/* Login */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; }
.login-page::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at 30% 50%,rgba(34,197,94,.08) 0%,transparent 50%),radial-gradient(circle at 70% 50%,rgba(59,130,246,.08) 0%,transparent 50%); animation:loginBg 15s ease-in-out infinite; }
@keyframes loginBg { 0%,100%{transform:translate(0,0)} 50%{transform:translate(2%,-2%)} }
.login-card { position:relative; z-index:1; background:var(--bg-card); backdrop-filter:blur(20px); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:48px 40px; width:100%; max-width:420px; box-shadow:var(--shadow-lg); }
.login-card .logo { text-align:center; margin-bottom:32px; }
.login-card .logo-icon { width:64px; height:64px; background:var(--gradient-green); border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:16px; box-shadow:var(--shadow-glow-green); }
.login-card .logo h1 { font-size:24px; font-weight:700; }
.login-card .logo p { color:var(--text-secondary); font-size:14px; margin-top:4px; }
.login-error { background:var(--accent-red-glow); border:1px solid rgba(239,68,68,.3); color:#fca5a5; padding:12px 16px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:20px; text-align:center; }

/* Sidebar */
.sidebar { position:fixed; left:0; top:0; width:var(--sidebar-width); height:100vh; background:var(--bg-sidebar); backdrop-filter:blur(20px); border-right:1px solid var(--border-color); display:flex; flex-direction:column; z-index:100; transition:var(--transition); }
.sidebar-header { padding:20px 24px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:12px; }
.sidebar-logo { width:40px; height:40px; background:var(--gradient-green); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; box-shadow:var(--shadow-glow-green); }
.sidebar-brand h2 { font-size:16px; font-weight:700; line-height:1.2; }
.sidebar-brand span { font-size:11px; color:var(--text-muted); }
.sidebar-nav { flex:1; overflow-y:auto; padding:16px 12px; }
.nav-section { margin-bottom:24px; }
.nav-section-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); padding:0 12px; margin-bottom:8px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm); color:var(--text-secondary); font-size:14px; font-weight:500; transition:var(--transition); margin-bottom:2px; position:relative; }
.nav-item:hover { background:rgba(34,197,94,.08); color:var(--text-primary); }
.nav-item.active { background:var(--accent-green-glow); color:var(--accent-green); }
.nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--accent-green); border-radius:0 3px 3px 0; }
.nav-item .icon { width:20px; text-align:center; font-size:16px; }
.sidebar-footer { padding:16px 12px; border-top:1px solid var(--border-color); }
.sidebar-footer .nav-item { color:var(--accent-red); }
.sidebar-footer .nav-item:hover { background:var(--accent-red-glow); }

/* Main Content */
.main-content { margin-left:var(--sidebar-width); flex:1; padding:32px; position:relative; z-index:1; min-height:100vh; }
.page-header { margin-bottom:32px; }
.page-header h1 { font-size:28px; font-weight:700; margin-bottom:4px; }
.page-header p { color:var(--text-secondary); font-size:14px; }

/* Cards */
.card { background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border-color); border-radius:var(--radius); padding:24px; transition:var(--transition); }
.card:hover { border-color:var(--border-glow); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border-color); }
.card-header h3 { font-size:16px; font-weight:600; }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:32px; }
.stat-card { background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border-color); border-radius:var(--radius); padding:24px; transition:var(--transition); position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; }
.stat-card.green::before { background:var(--gradient-green); }
.stat-card.blue::before { background:var(--gradient-blue); }
.stat-card.purple::before { background:var(--gradient-purple); }
.stat-card.orange::before { background:var(--gradient-orange); }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-glow); }
.stat-card .stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.stat-card.green .stat-icon { background:var(--accent-green-glow); }
.stat-card.blue .stat-icon { background:var(--accent-blue-glow); }
.stat-card.purple .stat-icon { background:var(--accent-purple-glow); }
.stat-card.orange .stat-icon { background:var(--accent-orange-glow); }
.stat-card .stat-value { font-size:32px; font-weight:800; line-height:1; margin-bottom:4px; }
.stat-card.green .stat-value { color:var(--accent-green); }
.stat-card.blue .stat-value { color:var(--accent-blue); }
.stat-card.purple .stat-value { color:var(--accent-purple); }
.stat-card.orange .stat-value { color:var(--accent-orange); }
.stat-card .stat-label { font-size:13px; color:var(--text-secondary); font-weight:500; }

/* Session Status */
.session-status { display:flex; align-items:center; gap:12px; padding:16px 20px; border-radius:var(--radius-sm); margin-bottom:20px; font-weight:500; }
.session-status.connected { background:var(--accent-green-glow); border:1px solid rgba(34,197,94,.3); color:#86efac; }
.session-status.disconnected { background:var(--accent-red-glow); border:1px solid rgba(239,68,68,.3); color:#fca5a5; }
.session-status.scanning { background:var(--accent-orange-glow); border:1px solid rgba(245,158,11,.3); color:#fcd34d; }
.session-status.starting { background:var(--accent-blue-glow); border:1px solid rgba(59,130,246,.3); color:#93c5fd; }
.status-dot { width:10px; height:10px; border-radius:50%; animation:pulse 2s infinite; }
.connected .status-dot { background:var(--accent-green); }
.disconnected .status-dot { background:var(--accent-red); }
.scanning .status-dot { background:var(--accent-orange); }
.starting .status-dot { background:var(--accent-blue); }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.qr-container { text-align:center; padding:32px; }
.qr-container img { max-width:280px; border-radius:var(--radius); border:2px solid var(--border-color); margin:16px 0; }