/* 2025 glass theme (dark/light) */
*,*::before,*::after{box-sizing:border-box}
:root{--bg:#0b1020;--bg-2:#0e1530;--panel:rgba(255,255,255,.06);--panel-2:rgba(255,255,255,.1);--txt:#e8edff;--muted:#a6b5ff;--primary:#7aa2ff;--primary-2:#9bc2ff;--accent:#00ddb3;--danger:#ff6b6b;--good:#3bd1a5;--shadow:0 15px 40px rgba(0,0,0,.35);--radius:16px}
:root.light{--bg:#f7f9ff;--bg-2:#fff;--panel:rgba(0,0,0,.05);--panel-2:rgba(0,0,0,.08);--txt:#0d1b2a;--muted:#4a5d8c;--primary:#2a6df4;--primary-2:#5b8cff;--accent:#00b894;--danger:#d63031;--good:#1abc9c;--shadow:0 20px 50px rgba(17,24,39,.12)}
html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
radial-gradient(1000px 600px at -10% -20%,var(--bg-2),transparent 60%),radial-gradient(1200px 700px at 110% -10%,#112148,transparent 70%),linear-gradient(180deg,var(--bg),#071229 60%);color:var(--txt);line-height:1.5}
.container{width:min(1100px,92vw);margin:0 auto}
.na-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.18));border-bottom:1px solid var(--panel)}
.na-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{color:var(--txt);text-decoration:none;font-weight:800;letter-spacing:.2px;font-size:20px}
.nav-right{display:flex;gap:10px;align-items:center}.badge{background:var(--panel);color:var(--muted);padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--panel-2)}
.icon-btn,.btn{cursor:pointer;border:none;border-radius:12px}
.icon-btn{padding:8px 10px;background:var(--panel);color:var(--txt);transition:transform .12s ease,background .2s ease}
.icon-btn:hover{transform:translateY(-1px);background:var(--panel-2)}.icon-btn:active{transform:translateY(0)}
.btn{padding:12px 16px;font-weight:600;background:var(--panel);color:var(--txt);border:1px solid var(--panel-2);box-shadow:var(--shadow);transition:filter .2s ease,transform .12s ease,background .2s ease}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;border:none}
.btn.text{background:transparent;border:1px dashed var(--panel-2)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}.btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}
.card{background:rgba(255,255,255,.04);border:1px solid var(--panel-2);border-radius:var(--radius);padding:20px;margin:20px 0;box-shadow:var(--shadow)}
.card-sub{background:rgba(255,255,255,.03);border:1px solid var(--panel);border-radius:var(--radius);padding:14px}
.gap-lg{display:grid;gap:18px}
.title{font-size:28px;margin:0 0 6px}.muted{color:var(--muted);margin:0}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;padding:6px;background:var(--panel);width:220px;border-radius:999px;border:1px solid var(--panel-2)}
.mode-switch input{display:none}.mode-switch label{text-align:center;padding:8px 0;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted)}
.mode-switch input:checked+label{background:var(--primary);color:#fff}
.quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.quiz-card{overflow:hidden;border-radius:16px;padding:14px;border:1px solid var(--panel-2);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));min-height:130px;display:grid;gap:8px}
.quiz-card:hover{outline:2px solid var(--primary-2);transform:translateY(-2px);transition:all .15s ease}
.quiz-card .subject{font-weight:800;letter-spacing:.2px}.quiz-card .meta{font-size:12px;color:var(--muted)}
.quiz-card .select-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px}
.quiz-card select,.quiz-card .qty{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--panel-2);background:rgba(255,255,255,.06);color:var(--txt)}
.qty{display:flex;align-items:center;gap:8px}.qty input{width:60px;padding:8px;border-radius:10px;border:1px solid var(--panel-2);background:rgba(255,255,255,.06);color:var(--txt)}
.pill{padding:6px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-2);color:var(--muted);font-size:12px}
.quiz-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.quiz-meta .left,.quiz-meta .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.question-wrap{display:grid;gap:12px;margin:20px 0 6px}.question{font-size:18px;font-weight:600}
.media img,.media video,.media canvas{max-width:100%;display:block;border-radius:12px;border:1px solid var(--panel-2)}
.options{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid var(--panel-2);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer}
.opt input{margin-top:4px}.opt.correct{outline:2px solid var(--good)}.opt.incorrect{outline:2px solid var(--danger)}
.toolbelt{display:grid;grid-auto-flow:column;gap:10px;align-items:center;width:max-content}
.tool{display:grid;grid-template-columns:22px auto;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-2)}
.feedback{border:1px solid var(--panel-2);border-radius:14px;padding:12px;margin-top:10px;background:rgba(0,0,0,.12)}
.feedback-title{font-weight:800;margin-bottom:6px}.feedback.good{border-color:var(--good);background:rgba(49,208,170,.08)}.feedback.bad{border-color:var(--danger);background:rgba(255,107,107,.08)}
.quiz-actions{display:flex;justify-content:flex-end;margin-top:14px}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.stats{display:flex;gap:14px}.stat{background:var(--panel);border:1px solid var(--panel-2);border-radius:12px;padding:10px 14px}.stat-num{font-size:20px;font-weight:800}
.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{text-align:left;padding:10px;border-bottom:1px solid var(--panel)}
.encourage{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);padding:10px 14px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--primary));color:#00111b;font-weight:800;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.encourage.show{opacity:1;transform:translate(-50%,-6px)}
:focus-visible{outline:3px solid var(--primary-2);outline-offset:2px;border-radius:8px}