:root{--bg:#f5f4fb;--surface:#fff;--text:#1c1b2e;--muted:#6b6a80;--border:#e3e1f0;--primary:#5b4bdb;--primary-dark:#4638b8;--accent:#ffd166;--danger:#d6455d;--success:#1f9d6b;--radius:14px;--shadow:0 6px 24px #281e7814;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0;line-height:1.5}h1{margin:0 0 1rem;font-size:1.7rem}h2{margin:0 0 .4rem;font-size:1.15rem}a{color:var(--primary)}.muted{color:var(--muted)}.shell{flex-direction:column;min-height:100vh;display:flex}.topbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:5;align-items:center;gap:1.25rem;padding:.75rem 1.25rem;display:flex;position:sticky;top:0}.brand{color:var(--text);align-items:center;gap:.5rem;font-size:1.2rem;font-weight:800;text-decoration:none;display:flex}.brand-mark{background:var(--primary);color:#fff;border-radius:9px;place-items:center;width:32px;height:32px;display:grid}.nav{flex-wrap:wrap;flex:1;gap:1rem;display:flex}.nav a{color:var(--muted);border-bottom:2px solid #0000;padding:.25rem .1rem;font-weight:600;text-decoration:none}.nav a.active{color:var(--primary);border-color:var(--primary)}.topbar-right{align-items:center;gap:.5rem;display:flex}.who{margin-right:.25rem;font-weight:600}.content{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:1.5rem 1.25rem 3rem}.footer{text-align:center;color:var(--muted);padding:1rem;font-size:.85rem}.btn{cursor:pointer;font:inherit;border:2px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:.4rem;padding:.55rem 1rem;font-weight:700;text-decoration:none;transition:transform 80ms,background .15s,border-color .15s;display:inline-flex}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-dark)}.btn-ghost{color:var(--primary);border-color:var(--border);background:0 0}.btn-ghost:hover:not(:disabled){border-color:var(--primary)}.btn-danger{background:var(--danger);color:#fff}.btn-lg{padding:.8rem 1.6rem;font-size:1.05rem}.btn-sm{padding:.3rem .65rem;font-size:.85rem}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}.auth-card{max-width:420px;margin:2rem auto}.form{gap:.9rem;display:grid}.form label{gap:.3rem;font-size:.92rem;font-weight:600;display:grid}input,select,textarea{font:inherit;border:1.5px solid var(--border);color:var(--text);background:#fff;border-radius:10px;width:100%;padding:.6rem .75rem}input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #5b4bdb2e}.form-error{color:var(--danger);margin:0;font-weight:600}.hero{text-align:center;padding:3rem 1rem 2rem}.hero h1{font-size:2.4rem}.hero p{max-width:560px;color:var(--muted);margin:0 auto 1.5rem;font-size:1.1rem}.hero-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.stats{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem;display:flex}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;min-width:130px;padding:1rem 1.6rem}.stat b{color:var(--primary);font-size:1.8rem;display:block}.stat span{color:var(--muted)}.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}.quiz-card{flex-direction:column;gap:.5rem;display:flex}.quiz-card .muted{flex:1;margin:0}.chips{flex-wrap:wrap;gap:.4rem;display:flex}.chip{color:var(--primary-dark);background:#efedfb;border-radius:999px;padding:.15rem .65rem;font-size:.8rem;font-weight:700}.chip-easy{color:#17794f;background:#e1f6ec}.chip-medium{color:#8a5a00;background:#fff1cf}.chip-hard{color:#a8243b;background:#fde3e8}.state{text-align:center;color:var(--muted);justify-items:center;gap:.75rem;padding:2.5rem 1rem;display:grid}.state-error{color:var(--danger)}.state-title{color:var(--text);margin:0;font-size:1.1rem;font-weight:700}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){.topbar{flex-wrap:wrap;gap:.5rem .75rem}.nav{flex-basis:100%;order:3}.hero h1{font-size:1.8rem}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}