*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--bg2: #111118;--bg3: #18181f;--card: #1c1c26;--card2: #22222e;--border: #2a2a38;--border2: #35354a;--accent: #6ee7b7;--accent2: #34d399;--accent-dim: rgba(110,231,183,.12);--accent-glow: rgba(110,231,183,.25);--red: #f87171;--red-dim: rgba(248,113,113,.12);--yellow: #fbbf24;--yellow-dim: rgba(251,191,36,.12);--blue: #60a5fa;--blue-dim: rgba(96,165,250,.12);--text: #f0f0f8;--text2: #a0a0b8;--text3: #606078;--radius: 14px;--radius-sm: 8px;--shadow: 0 4px 24px rgba(0,0,0,.4);--shadow-lg: 0 8px 48px rgba(0,0,0,.6);--font-head: "Syne", sans-serif;--font-body: "DM Sans", sans-serif;--transition: .2s cubic-bezier(.4,0,.2,1)}html{font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-body)}input,select,textarea{font-family:var(--font-body)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.w-full{width:100%}.text-center{text-align:center}.hidden{display:none!important}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.fade-up{animation:fadeUp .4s ease both}.fade-up-1{animation:fadeUp .4s .05s ease both}.fade-up-2{animation:fadeUp .4s .1s ease both}.fade-up-3{animation:fadeUp .4s .15s ease both}.fade-up-4{animation:fadeUp .4s .2s ease both}.fade-up-5{animation:fadeUp .4s .25s ease both}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}.spinner-sm{width:18px;height:18px;border-width:2px}.skeleton{background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:var(--radius-sm);border:none;font-size:.875rem;font-weight:500;transition:all var(--transition);white-space:nowrap}.btn:disabled{opacity:.45;pointer-events:none}.btn-primary{background:var(--accent);color:#0a0a0f;font-weight:700}.btn-primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--card);color:var(--text);border-color:var(--border2)}.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,.25)}.btn-danger:hover{background:#f8717133}.btn-lg{padding:.875rem 2rem;font-size:1rem;border-radius:var(--radius)}.btn-sm{padding:.375rem .875rem;font-size:.8rem}.btn-icon{padding:.5rem;border-radius:var(--radius-sm);aspect-ratio:1}.input-group{display:flex;flex-direction:column;gap:.375rem}.input-label{font-size:.8rem;font-weight:500;color:var(--text2);letter-spacing:.04em;text-transform:uppercase}.input{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;color:var(--text);font-size:.9rem;transition:border-color var(--transition),box-shadow var(--transition);width:100%;outline:none}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.input::placeholder{color:var(--text3)}select.input{cursor:pointer}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.card-hover{transition:all var(--transition);cursor:pointer}.card-hover:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.badge-easy{background:#34d39926;color:var(--accent2)}.badge-medium{background:var(--yellow-dim);color:var(--yellow)}.badge-hard{background:var(--red-dim);color:var(--red)}.badge-blue{background:var(--blue-dim);color:var(--blue)}.badge-gray{background:#a0a0b81a;color:var(--text2)}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}.toast{padding:.75rem 1.25rem;border-radius:var(--radius-sm);font-size:.875rem;animation:fadeUp .3s ease;border:1px solid;min-width:220px;max-width:360px}.toast-success{background:#34d39926;border-color:#34d3994d;color:var(--accent)}.toast-error{background:var(--red-dim);border-color:#f871714d;color:var(--red)}.toast-info{background:var(--blue-dim);border-color:#60a5fa4d;color:var(--blue)}.tag{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:4px;font-size:.72rem;background:var(--bg3);color:var(--text3);border:1px solid var(--border)}.progress-bar{width:100%;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .5s ease}.page-wrap{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.page-header{margin-bottom:2rem}.page-title{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--text);line-height:1.1}.page-sub{color:var(--text2);font-size:.95rem;margin-top:.375rem}.quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}.empty-state{text-align:center;padding:4rem 2rem;color:var(--text3)}.empty-state .icon{font-size:3rem;margin-bottom:1rem;opacity:.4}.empty-state h3{font-family:var(--font-head);font-size:1.25rem;color:var(--text2);margin-bottom:.5rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .2s ease}.modal{background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);padding:2rem;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:fadeUp .25s ease}.modal-title{font-family:var(--font-head);font-size:1.4rem;font-weight:700;margin-bottom:1.5rem}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.875rem}th{text-align:left;padding:.75rem 1rem;color:var(--text3);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}td{padding:.875rem 1rem;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}tr:last-child td{border-bottom:none}tr:hover td{background:var(--bg3)}.divider{height:1px;background:var(--border);margin:1.5rem 0}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.5s infinite}.score-ring{display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;border:4px solid var(--accent);box-shadow:0 0 30px var(--accent-glow)}.score-ring .score-num{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--accent);line-height:1}.score-ring .score-label{font-size:.7rem;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem}.tab{padding:.625rem 1rem;font-size:.875rem;font-weight:500;color:var(--text3);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--transition)}.tab:hover{color:var(--text2)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.option-btn{width:100%;display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.9rem;text-align:left;transition:all var(--transition);cursor:pointer}.option-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-dim)}.option-btn.selected{border-color:var(--accent);background:var(--accent-dim)}.option-btn.correct{border-color:var(--accent2);background:#34d39926}.option-btn.wrong{border-color:var(--red);background:var(--red-dim)}.option-btn:disabled{cursor:default}.option-key{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--card2);border:1px solid var(--border2);font-size:.75rem;font-weight:700;font-family:var(--font-head);color:var(--text3)}.option-btn.selected .option-key{background:var(--accent);color:#0a0a0f;border-color:var(--accent)}.option-btn.correct .option-key{background:var(--accent2);color:#0a0a0f;border-color:var(--accent2)}.option-btn.wrong .option-key{background:var(--red);color:#fff;border-color:var(--red)}.sidebar{width:240px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);min-height:100vh;display:flex;flex-direction:column;padding:1.5rem 0}.sidebar-logo{padding:0 1.5rem 1.5rem;border-bottom:1px solid var(--border);margin-bottom:1rem}.sidebar-logo h1{font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:var(--text)}.sidebar-logo span{color:var(--accent)}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.625rem 1.5rem;color:var(--text3);font-size:.875rem;font-weight:500;transition:all var(--transition);border-left:2px solid transparent}.nav-item:hover{color:var(--text2);background:var(--bg3)}.nav-item.active{color:var(--accent);background:var(--accent-dim);border-left-color:var(--accent)}.nav-icon{font-size:1rem;width:20px;text-align:center}.sidebar-footer{margin-top:auto;padding:1rem 1.5rem;border-top:1px solid var(--border)}.app-shell{display:flex;min-height:100vh}.app-main{flex:1;overflow:auto}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:1.5rem;position:relative;overflow:hidden}.auth-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(110,231,183,.08) 0%,transparent 60%)}.auth-card{position:relative;z-index:1;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) * 1.5);padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}.auth-logo{font-family:var(--font-head);font-size:1.75rem;font-weight:800;text-align:center;margin-bottom:.25rem}.auth-logo span{color:var(--accent)}.auth-subtitle{text-align:center;color:var(--text3);font-size:.875rem;margin-bottom:2rem}.auth-switch{text-align:center;color:var(--text3);font-size:.875rem;margin-top:1.5rem}.auth-switch a{color:var(--accent);font-weight:500}.auth-switch a:hover{text-decoration:underline}.auth-error{background:var(--red-dim);border:1px solid rgba(248,113,113,.3);color:var(--red);padding:.625rem 1rem;border-radius:var(--radius-sm);font-size:.875rem;margin-bottom:1rem}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem}.stat-label{font-size:.75rem;color:var(--text3);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}.stat-value{font-family:var(--font-head);font-size:2.25rem;font-weight:800;color:var(--text);line-height:1}.stat-sub{font-size:.8rem;color:var(--text3);margin-top:.25rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}.timer{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--accent);background:var(--accent-dim);padding:.4rem .875rem;border-radius:999px;border:1px solid rgba(110,231,183,.2)}.timer.warning{color:var(--yellow);background:var(--yellow-dim);border-color:#fbbf2433}.timer.danger{color:var(--red);background:var(--red-dim);border-color:#f8717133;animation:pulse .8s infinite}.q-nav{display:flex;flex-wrap:wrap;gap:.375rem}.q-dot{width:32px;height:32px;border-radius:6px;border:1.5px solid var(--border);background:var(--bg3);color:var(--text3);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition)}.q-dot:hover{border-color:var(--border2);color:var(--text2)}.q-dot.answered{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.q-dot.current{background:var(--accent);border-color:var(--accent);color:#0a0a0f}@media (max-width: 768px){.sidebar{display:none}.page-wrap{padding:1.25rem 1rem}.page-title{font-size:1.5rem}.modal{padding:1.5rem}.quiz-grid{grid-template-columns:1fr}}