:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;
  --text: #111827;
  --text-soft: #374151;
  --muted: #6b7280;
  --border: #e5e7eb;
  --input-border: #d1d5db;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: #eff6ff;
  --success: #16a34a;
  --success-soft: #ecfdf5;
  --danger: #dc2626;
  --danger-soft: #fff1f2;
  --warning: #d97706;
  --audio-bg: #f8fafc;
  --progress-bg: #e5e7eb;
  --topbar: rgba(255,255,255,.94);
  --sticky: rgba(245,247,251,.96);
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --radius: 16px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120;
  --surface: #111827;
  --surface-2: #182235;
  --surface-3: #1f2937;
  --text: #f3f4f6;
  --text-soft: #d1d5db;
  --muted: #9ca3af;
  --border: #283548;
  --input-border: #374151;
  --accent: #60a5fa;
  --accent-2: #93c5fd;
  --accent-soft: #172554;
  --success: #4ade80;
  --success-soft: #052e16;
  --danger: #fb7185;
  --danger-soft: #4c0519;
  --warning: #fbbf24;
  --audio-bg: #0f172a;
  --progress-bg: #273449;
  --topbar: rgba(17,24,39,.94);
  --sticky: rgba(11,17,32,.96);
  --shadow: 0 10px 28px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { transition: background-color .18s ease, color .18s ease; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "topbar topbar" "sidebar content"; }
.topbar { grid-area: topbar; position: sticky; top: 0; z-index: 50; height: 64px; background: var(--topbar); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding: 0 20px; }
.brand-wrap, .topbar-actions { display:flex; align-items:center; gap:10px; min-width:0; }
.brand { font-weight: 800; letter-spacing: -.02em; font-size: 20px; }
.badge, .meta-pill { display:inline-flex; align-items:center; min-height: 28px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border:1px solid var(--border); font-size:12px; color:var(--muted); white-space:nowrap; }

.language-switch { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--border); background:var(--surface-2); border-radius:11px; }
.lang-btn { min-width:34px; height:30px; padding:0 7px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:11px; font-weight:800; }
.lang-btn.active { background:var(--surface); color:var(--accent); box-shadow:0 1px 5px rgba(0,0,0,.08); }
.theme-toggle { min-height:38px; padding:7px 10px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12px; }
.theme-toggle:hover, .lang-btn:hover { background:var(--surface-3); }

.sidebar { grid-area: sidebar; position: sticky; top:64px; height: calc(100vh - 64px); background:var(--surface); border-right:1px solid var(--border); padding:18px 14px; display:flex; flex-direction:column; justify-content:space-between; z-index:40; }
.nav-list { display:grid; gap:8px; }
.nav-item { width:100%; min-height:44px; border:0; border-radius:12px; padding:10px 12px; background:transparent; text-align:left; color:var(--text-soft); font-weight:600; }
.nav-item:hover { background:var(--surface-3); }
.nav-item.active { background:var(--accent-soft); color:var(--accent); }
.sidebar-footer { border-top:1px solid var(--border); padding-top:14px; }
.content { grid-area: content; padding:24px; min-width:0; }
.page { max-width: 1180px; margin: 0 auto; }
.page-header { display:flex; gap:16px; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.page-title { margin:0; font-size: clamp(24px, 3vw, 34px); letter-spacing:-.03em; }
.page-subtitle { color:var(--muted); margin:6px 0 0; max-width:760px; line-height:1.55; }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 8px; }
.stat { font-size:30px; font-weight:800; letter-spacing:-.04em; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.btn { min-height:44px; padding:10px 15px; border-radius:12px; border:1px solid transparent; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(.93); }
.btn-secondary { background:var(--surface); color:var(--text-soft); border-color:var(--border); }
.btn-secondary:hover { background:var(--surface-3); }
.btn-danger { background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); }
.btn-success { background:var(--success-soft); color:var(--success); border-color:color-mix(in srgb, var(--success) 35%, var(--border)); }
.btn-block { width:100%; }
.icon-btn { min-width:44px; height:44px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:12px; }
.field { display:grid; gap:7px; }
.field label { font-weight:700; font-size:14px; }
.input, .textarea, .select { width:100%; color:var(--text); border:1px solid var(--input-border); background:var(--surface); border-radius:12px; min-height:44px; padding:10px 12px; outline:none; }
.textarea { min-height:110px; resize:vertical; line-height:1.5; }
.input::placeholder, .textarea::placeholder { color:var(--muted); }
.input:focus, .textarea:focus, .select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.form-grid { display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid .full { grid-column:1 / -1; }
.answer-row { display:grid; grid-template-columns:44px 1fr 44px; gap:8px; align-items:center; margin-bottom:8px; }
.answer-check { width:20px; height:20px; justify-self:center; }
.answer-remove { height:44px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--danger); }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.question-list { display:grid; gap:10px; margin-top:12px; }
.question-item { border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--surface); display:grid; gap:7px; }
.question-top { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; }
.question-meta { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); }
.exam-shell { max-width:760px; margin:0 auto; }
.exam-head { display:grid; gap:8px; margin-bottom:14px; }
.progress { height:8px; background:var(--progress-bg); border-radius:999px; overflow:hidden; }
.progress > div { height:100%; background:var(--accent); transition:width .2s ease; }
.question-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:22px; box-shadow:var(--shadow); }
.question-title { font-size:21px; line-height:1.5; margin:0 0 18px; }
.choice-list { display:grid; gap:10px; }
.choice { width:100%; min-height:52px; border:1px solid var(--input-border); color:var(--text); background:var(--surface); border-radius:14px; padding:12px 14px; text-align:left; display:flex; gap:10px; align-items:center; }
.choice:hover { background:var(--surface-2); }
.choice.selected { border-color:var(--accent); background:var(--accent-soft); }
.choice-dot { width:20px; height:20px; border-radius:50%; border:2px solid var(--muted); flex:0 0 auto; }
.choice.selected .choice-dot { border-color:var(--accent); box-shadow: inset 0 0 0 5px var(--surface); background:var(--accent); }
.exam-actions { position:sticky; bottom:0; padding:14px 0 calc(14px + env(safe-area-inset-bottom)); margin-top:14px; background:linear-gradient(to top, var(--bg) 72%, transparent); display:flex; gap:10px; justify-content:space-between; }
.audio-box { border:1px dashed var(--input-border); border-radius:18px; padding:28px 18px; display:grid; justify-items:center; gap:12px; background:var(--audio-bg); margin-bottom:18px; }
.audio-icon { font-size:34px; }
.audio-btn { min-width:140px; }
.result-score { font-size:48px; font-weight:900; letter-spacing:-.05em; }
.codebox { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#020617; color:#e2e8f0; border-radius:14px; padding:14px; overflow:auto; white-space:pre-wrap; }
.notice { border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background:var(--accent-soft); color:var(--text); border-radius:14px; padding:12px 14px; }
.toast { position:fixed; right:18px; bottom:18px; z-index:200; background:var(--text); color:var(--bg); padding:12px 14px; border-radius:12px; box-shadow:var(--shadow); max-width:min(360px, calc(100vw - 36px)); }
.mobile-only { display:none; }
.hidden { display:none !important; }

@media (max-width: 900px) {
  .grid-3, .grid-2 { grid-template-columns:1fr; }
  .app-shell { grid-template-columns:1fr; grid-template-rows:64px 1fr; grid-template-areas:"topbar" "content"; }
  .sidebar { position:fixed; inset:64px auto 0 0; width:min(84vw, 300px); transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .mobile-only { display:inline-flex; align-items:center; justify-content:center; }
  .content { padding:18px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
}

@media (max-width: 680px) {
  .meta-pill { display:none; }
  .theme-label { display:none; }
  .theme-toggle { width:38px; padding:0; justify-content:center; }
  .topbar-actions { gap:6px; }
}

@media (max-width: 560px) {
  .topbar { padding:0 10px; }
  .brand { font-size:17px; }
  .badge { display:none; }
  .brand-wrap { gap:7px; }
  .language-switch { gap:1px; padding:2px; }
  .lang-btn { min-width:30px; height:29px; padding:0 5px; font-size:10px; }
  .theme-toggle { width:34px; min-height:34px; }
  .content { padding:14px 12px 92px; }
  .page-header { display:grid; }
  .card { padding:15px; border-radius:14px; }
  .question-card { padding:16px; border-radius:16px; }
  .question-title { font-size:18px; }
  .exam-actions { position:fixed; left:0; right:0; bottom:0; z-index:35; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--sticky); border-top:1px solid var(--border); backdrop-filter:blur(10px); }
  .exam-actions .btn { flex:1; }
  .answer-row { grid-template-columns:38px 1fr 42px; }
  .question-top { flex-direction:column; }
}

/* v0.3 additions */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.auth-card{width:min(100%,460px);background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.auth-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:20px}
.auth-card h1{margin:0 0 8px;font-size:30px;letter-spacing:-.03em}.auth-form{display:grid;gap:14px;margin-top:18px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;margin-top:18px}.auth-tab{min-height:42px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:800}.auth-tab.active{background:var(--surface);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.07)}.auth-message{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--danger-soft);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border))}.auth-note{margin:14px 0 0}.auth-settings{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.subject-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--surface-2)}.subject-card.selected{border-color:var(--accent);background:var(--accent-soft)}.subject-card h3{margin:0 0 4px}.subject-card p{margin:0}.subject-flag{font-size:32px}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mode-card{min-height:126px;text-align:left;border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--surface);color:var(--text);display:grid;gap:8px}.mode-card strong{font-size:17px}.mode-card span{color:var(--muted);line-height:1.5}.mode-card.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.segmented{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border:1px solid var(--border);background:var(--surface-2);border-radius:14px;margin-bottom:16px;width:max-content;max-width:100%}.segmented button{min-height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:800;padding:8px 12px}.segmented button.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 5px rgba(0,0,0,.08)}
.exam-meta-row{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}.mode-pill,.timer-pill{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:12px}.timer-pill{font-variant-numeric:tabular-nums}.timer-pill.danger{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border));animation:pulseTimer .8s ease-in-out infinite alternate}@keyframes pulseTimer{to{transform:scale(1.04)}}
.choice.correct-choice{background:var(--success-soft)!important;border-color:var(--success)!important;color:var(--success)}.choice.wrong-choice{background:var(--danger-soft)!important;border-color:var(--danger)!important;color:var(--danger)}
.feedback-card{margin-top:14px;border-radius:16px;padding:15px 16px;border:1px solid var(--border);line-height:1.5}.feedback-correct{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 48%,var(--border));color:var(--success)}.feedback-wrong{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 48%,var(--border));color:var(--danger)}.feedback-partial{background:color-mix(in srgb,var(--warning) 12%,var(--surface));border-color:color-mix(in srgb,var(--warning) 45%,var(--border));color:var(--warning)}.feedback-title{font-size:18px;font-weight:900;margin-bottom:4px}.feedback-list{margin:8px 0 0;padding-left:20px}
.result-hero{display:flex;align-items:center;justify-content:space-between;gap:18px}.score-ring{--score:0;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--score)*1%),var(--progress-bg) 0);position:relative;flex:0 0 auto}.score-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}.score-ring span{position:relative;z-index:1;font-size:22px;font-weight:900}.score-badge{font-size:12px;font-weight:900;padding:6px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}.result-item.correct{border-left:4px solid var(--success)}.result-item.partial{border-left:4px solid var(--warning)}.result-item.wrong,.result-item.timeout{border-left:4px solid var(--danger)}.result-answer{padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:4px 0 2px}
.answer-input,.essay-input{font-size:16px}

@media (max-width:700px){.subject-grid,.mode-grid{grid-template-columns:1fr}.subject-card{grid-template-columns:auto 1fr}.subject-card .btn{grid-column:1/-1}.result-hero{align-items:flex-start}.score-ring{width:76px;height:76px}.exam-meta-row{align-items:flex-start}.auth-card{padding:20px;border-radius:20px}}