:root {
  --bg: #f6f8fb;
  --surface: rgba(255,255,255,.84);
  --surface-solid: #ffffff;
  --surface-soft: #f8fafc;
  --text: #152033;
  --muted: #64748b;
  --primary: #4f46e5;
  --primary2: #06b6d4;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --border: rgba(148,163,184,.26);
  --shadow: 0 22px 55px rgba(15,23,42,.10);
  --radius: 24px;
}

[data-theme="dark"] {
  --bg: #08101f;
  --surface: rgba(15,23,42,.82);
  --surface-solid: #111827;
  --surface-soft: #0f172a;
  --text: #edf2f7;
  --muted: #a6b1c2;
  --border: rgba(148,163,184,.18);
  --shadow: 0 24px 60px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Cairo", system-ui, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(79,70,229,.18), transparent 32%),
    radial-gradient(circle at top left, rgba(6,182,212,.14), transparent 28%),
    var(--bg);
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.app-shell { width: min(1220px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 50px; }
.navbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:28px; padding:12px 14px; position:sticky; top:10px; z-index:40;
  border:1px solid var(--border); background:var(--surface); backdrop-filter: blur(18px);
  border-radius:999px; box-shadow:0 12px 30px rgba(15,23,42,.06);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:900; cursor:pointer; white-space:nowrap; }
.logo { width:42px; height:42px; border-radius:15px; display:grid; place-items:center; color:white; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--primary2)); box-shadow:0 10px 22px rgba(79,70,229,.28); }
.nav-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.nav-link { border:0; background:transparent; padding:10px 12px; border-radius:999px; cursor:pointer; font-weight:800; color:var(--muted); }
.nav-link:hover, .nav-link.active { background:rgba(79,70,229,.10); color:var(--primary); }

.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:stretch; margin-top:12px; }
.card, .hero-card, .panel, .question-card, .result-card, .auth-card {
  background:var(--surface); backdrop-filter:blur(18px); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-card { padding:36px; min-height:390px; display:flex; flex-direction:column; justify-content:center; }
.kicker { color:var(--primary); font-weight:900; margin-bottom:8px; }
h1 { margin:0; font-size:clamp(34px,5vw,58px); line-height:1.12; letter-spacing:-1px; }
h2 { margin:0 0 12px; font-size:clamp(24px,3vw,32px); }
h3 { margin:0 0 8px; }
p { color:var(--muted); line-height:1.85; }
.hero-buttons, .inline-actions { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }

.btn { border:0; padding:11px 17px; border-radius:999px; cursor:pointer; font-weight:900; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:.18s ease; }
.btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,23,42,.10); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:linear-gradient(135deg,var(--primary),var(--primary2)); color:white; }
.btn.ghost { background:var(--surface-solid); border:1px solid var(--border); }
.btn.success { background:#dcfce7; color:#166534; }
.btn.danger { background:#fee2e2; color:#991b1b; }
.btn.warning { background:#fff7ed; color:#9a3412; }
.btn.full { width:100%; }
.icon-btn { width:40px; height:40px; padding:0; border-radius:50%; }

.side-stats { padding:24px; display:grid; gap:12px; }
.stat { padding:18px; border-radius:20px; background:var(--surface-solid); border:1px solid var(--border); }
.stat strong { display:block; font-size:28px; }
.stat span { color:var(--muted); font-weight:700; }
.progress-stats { align-content:center; }
.progress-stat { display:grid; gap:8px; min-height:104px; transition:.18s ease; }
.progress-stat:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 34%,var(--border)); }
.stat-heading { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; font-weight:900; }
.stat-heading .stat-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:rgba(79,70,229,.10); font-size:16px; }
.progress-stat strong { font-size:30px; line-height:1.05; }
.progress-stat > span:last-child { font-size:12px; line-height:1.55; }
.readiness-track { width:100%; height:7px; border-radius:999px; background:var(--surface-soft); overflow:hidden; border:1px solid var(--border); }
.readiness-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--primary2)); transition:width .35s ease; }

.grid { display:grid; gap:18px; }
.grid.two { grid-template-columns:repeat(2,1fr); }
.grid.three { grid-template-columns:repeat(3,1fr); }
.grid.four { grid-template-columns:repeat(4,1fr); }
.panel, .card { padding:24px; }
.exam-card { cursor:pointer; position:relative; overflow:hidden; transition:.2s; }
.exam-card:hover { transform:translateY(-4px); }
.exam-card::after { content:""; position:absolute; width:170px; height:170px; border-radius:50%; background:rgba(79,70,229,.09); left:-60px; bottom:-70px; pointer-events:none; }

.badge-row { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; align-items:center; }
.badge { background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; padding:6px 11px; border-radius:999px; font-weight:900; font-size:12px; }
.badge.cyan { background:#ecfeff; color:#155e75; border-color:#a5f3fc; }
.badge.green { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.badge.orange { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.badge.gray { background:var(--surface-soft); color:var(--muted); border-color:var(--border); }
.section-title { margin:34px 0 14px; display:flex; align-items:end; justify-content:space-between; gap:14px; }
.section-title p { margin:4px 0 0; }
.muted { color:var(--muted); }
.small { font-size:13px; }

.chapter-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.chapter { background:var(--surface-solid); border:1px solid var(--border); border-radius:20px; padding:20px; transition:.18s; }
.chapter:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.08); }
.chapter-icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; font-size:23px; background:rgba(79,70,229,.10); color:var(--primary); margin-bottom:12px; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:grid; gap:7px; }
.field label { font-weight:800; font-size:14px; }
.input, select, textarea { width:100%; border:1px solid var(--border); background:var(--surface-solid); color:var(--text); border-radius:16px; padding:13px 14px; outline:none; }
.input:focus, select:focus, textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,70,229,.10); }
textarea { min-height:260px; resize:vertical; line-height:1.9; }
.auth-wrap { max-width:560px; margin:40px auto; }
.auth-card { padding:30px; }
.auth-card h1 { font-size:34px; }

.topbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.timer { padding:10px 15px; border-radius:999px; background:#0f172a; color:white; font-weight:900; direction:ltr; min-width:86px; text-align:center; }
.timer.warning { background:#9a3412; }
.progress { width:100%; height:9px; background:rgba(148,163,184,.20); border-radius:999px; overflow:hidden; margin:10px 0 18px; }
.progress > div { height:100%; background:linear-gradient(135deg,var(--primary),var(--primary2)); transition:.2s; }

.exam-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.question-card { padding:26px; min-width:0; }
.question-meta { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.question-text { font-size:22px; font-weight:800; line-height:1.8; margin-bottom:18px; }
.passage { background:var(--surface-soft); border:1px solid var(--border); border-radius:18px; padding:18px; line-height:2; margin-bottom:18px; color:var(--text); }
.options { display:grid; gap:11px; }
.option { border:1px solid var(--border); background:var(--surface-solid); border-radius:18px; padding:14px 15px; cursor:pointer; transition:.16s; font-weight:700; }
.option:hover { border-color:#818cf8; background:rgba(79,70,229,.04); }
.option.selected { border-color:var(--primary); background:rgba(79,70,229,.10); }
.option.correct { border-color:var(--success); background:rgba(22,163,74,.12); }
.option.wrong { border-color:var(--danger); background:rgba(220,38,38,.10); }
.session-actions { margin-top:20px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.navigator { padding:18px; position:sticky; top:92px; }
.navigator h3 { margin-bottom:12px; }
.nav-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.q-dot { width:100%; aspect-ratio:1; border-radius:12px; border:1px solid var(--border); background:var(--surface-solid); cursor:pointer; font-weight:900; position:relative; }
.q-dot.answered { background:rgba(79,70,229,.12); border-color:#818cf8; }
.q-dot.current { outline:3px solid rgba(6,182,212,.24); border-color:var(--primary2); }
.q-dot.flagged::after { content:"•"; color:var(--warning); font-size:24px; line-height:0; position:absolute; top:4px; left:5px; }
.legend { display:grid; gap:7px; margin-top:14px; font-size:12px; color:var(--muted); }
.legend span { display:flex; gap:8px; align-items:center; }
.legend i { width:11px; height:11px; border-radius:4px; display:inline-block; border:1px solid var(--border); }

.result-card { padding:30px; text-align:center; }
.score { font-size:64px; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--primary2)); color:transparent; -webkit-background-clip:text; background-clip:text; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.metric { background:var(--surface-solid); border:1px solid var(--border); border-radius:18px; padding:16px; }
.metric strong { display:block; font-size:24px; }
.metric span { color:var(--muted); font-size:13px; }
.review-item { padding:18px; border-radius:18px; background:var(--surface-solid); border:1px solid var(--border); margin-bottom:12px; }

.dashboard-hero { display:grid; grid-template-columns:1fr 320px; gap:18px; }
.dash-score { min-height:100%; display:grid; place-items:center; text-align:center; }
.history-table { width:100%; border-collapse:collapse; }
.history-table th, .history-table td { padding:13px 10px; border-bottom:1px solid var(--border); text-align:right; }
.history-table th { color:var(--muted); font-size:13px; }
.table-wrap { overflow:auto; }
.empty { text-align:center; padding:34px; color:var(--muted); border:1px dashed var(--border); border-radius:18px; }

.ai-card { border:1px solid rgba(79,70,229,.22); background:linear-gradient(135deg, rgba(79,70,229,.08), rgba(6,182,212,.08)); }
.ai-orb { width:62px; height:62px; display:grid; place-items:center; border-radius:20px; color:white; font-size:28px; background:linear-gradient(135deg,var(--primary),var(--primary2)); box-shadow:0 14px 30px rgba(79,70,229,.22); }
.check-list { display:grid; gap:10px; margin-top:18px; }
.check-item { padding:12px 14px; border:1px solid var(--border); background:var(--surface-solid); border-radius:15px; display:flex; justify-content:space-between; gap:12px; }

.writing-toolbar { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.word-count { font-weight:900; }
.word-count.good { color:var(--success); }
.word-count.low, .word-count.high { color:var(--warning); }

.notice { padding:14px 16px; border-radius:16px; border:1px solid #bae6fd; background:#f0f9ff; color:#075985; line-height:1.7; }
[data-theme="dark"] .notice { background:rgba(14,116,144,.15); color:#bae6fd; border-color:rgba(125,211,252,.25); }
.separator { height:1px; background:var(--border); margin:18px 0; }
.ltr { direction:ltr; text-align:left; }
.rtl { direction:rtl; text-align:right; }
.footer-note { margin-top:30px; text-align:center; color:var(--muted); font-size:13px; }

.toast-root { position:fixed; bottom:18px; left:18px; z-index:100; display:grid; gap:9px; }
.toast { background:#0f172a; color:white; padding:12px 16px; border-radius:14px; box-shadow:0 14px 30px rgba(0,0,0,.2); animation:toastIn .2s ease; max-width:360px; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 980px) {
  .exam-layout, .dashboard-hero { grid-template-columns:1fr; }
  .navigator { position:static; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px) {
  .hero, .grid.two, .grid.three, .grid.four, .chapter-list, .form-grid { grid-template-columns:1fr; }
  .navbar { border-radius:24px; align-items:flex-start; flex-direction:column; }
  .nav-actions { width:100%; overflow:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .nav-link { white-space:nowrap; }
  .hero-card { min-height:auto; padding:26px; }
  .app-shell { width:min(100% - 20px, 1220px); }
  .question-card { padding:20px; }
  .metric-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 520px) {
  .metric-grid { grid-template-columns:1fr; }
  .nav-grid { grid-template-columns:repeat(6,1fr); }
  h1 { font-size:34px; }
  .score { font-size:52px; }
  .session-actions .btn { flex:1; }
}


/* AI features */
.ai-score-row{display:flex;align-items:center;gap:18px;margin:18px 0}.ai-main-score{min-width:110px;height:110px;border-radius:28px;display:flex;align-items:baseline;justify-content:center;align-content:center;gap:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-solid) 88%,var(--primary) 12%),color-mix(in srgb,var(--surface-solid) 92%,var(--primary2) 8%));border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 28px rgba(15,23,42,.10);padding:0 10px;direction:ltr;color:var(--text)}.ai-main-score strong{font-size:2.7rem;line-height:1;color:var(--primary);font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.08)}.ai-main-score span{font-weight:900;color:var(--muted);opacity:1}.ai-feedback-list{margin:8px 0 0;padding-inline-start:22px;line-height:1.8}.ai-improved summary{cursor:pointer;font-weight:800}.ai-result{overflow:hidden}@media(max-width:700px){.ai-score-row{align-items:flex-start}.ai-main-score{min-width:86px;height:86px;border-radius:22px;padding:0 8px}.ai-main-score strong{font-size:2rem}}

/* Premium AI suite */
.ai-premium-hero{display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:center;overflow:hidden;position:relative;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,#4f46e5 8%),color-mix(in srgb,var(--surface) 94%,#06b6d4 6%))}
.ai-premium-hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(79,70,229,.08);left:-90px;bottom:-130px;pointer-events:none}.ai-orb{width:92px;height:92px;border-radius:30px;display:grid;place-items:center;font-size:42px;color:#fff;background:linear-gradient(135deg,#4f46e5,#06b6d4);box-shadow:0 20px 44px rgba(79,70,229,.28);position:relative;z-index:1}.ai-premium-copy{position:relative;z-index:1}.ai-premium-copy h1{font-size:clamp(30px,4vw,48px)}
.premium-note{display:grid;gap:4px;padding:13px 15px;border-radius:16px;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;max-width:720px}.premium-note span{font-size:13px;line-height:1.7}
.ai-quota-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.ai-quota{background:var(--surface);border:1px solid var(--border);border-radius:19px;padding:16px;box-shadow:var(--shadow);display:grid;gap:3px}.ai-quota span{font-size:13px;font-weight:800;color:var(--muted)}.ai-quota strong{font-size:25px}.ai-quota small{color:var(--muted)}.ai-quota.free{border-color:#bbf7d0;background:color-mix(in srgb,var(--surface) 92%,#dcfce7 8%)}
.ai-feature-card{position:relative;overflow:hidden}.ai-feature-card.locked{opacity:.82}.ai-feature-card.locked::after{content:"🔒";position:absolute;left:20px;top:18px;font-size:22px}.ai-feature-card.premium-active{border-color:rgba(217,119,6,.38);box-shadow:0 18px 44px rgba(217,119,6,.08)}.free-feature{border-color:rgba(22,163,74,.30)}
.premium-paywall{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;border-color:rgba(217,119,6,.35)}.premium-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.premium-feature-list span{padding:10px 12px;border-radius:13px;background:var(--surface-soft);font-weight:800;font-size:13px}.premium-paywall .notice{grid-column:1/-1}
.ai-lab-grid{align-items:start}.ai-tool-card{min-height:100%}.form-grid.compact{gap:10px}.form-grid.four-col{grid-template-columns:repeat(4,1fr)}.stack-form{display:grid;gap:12px}.check-line{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.6}.check-line input{margin-top:4px}
.ai-loading{margin-top:14px;padding:18px;border-radius:16px;background:var(--surface-soft);border:1px dashed var(--border);color:var(--muted);font-weight:800}.ai-generated-box{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.ai-generated-box h4{margin:8px 0}.ai-advice-grid{margin-top:16px}.ai-performance{display:grid;gap:9px;margin:16px 0}.ai-performance-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,1.2fr) 50px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.ai-performance-row>div:first-child{display:grid}.ai-performance-row small{color:var(--muted)}.ai-accuracy{height:8px;border-radius:999px;background:var(--surface-soft);overflow:hidden}.ai-accuracy span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:inherit}
.ai-plan-days{display:grid;gap:10px;margin:16px 0}.ai-day-card{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:14px;border-radius:17px;border:1px solid var(--border);background:var(--surface-soft)}.ai-day-number{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:900;font-size:18px}.ai-day-card ul{margin:8px 0;padding-inline-start:20px;line-height:1.8}
.ai-drill-builder{overflow:hidden}.ai-drill-question{margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft)}.ai-drill-options{display:grid;gap:9px;margin-top:12px}.ai-option{width:100%;display:flex;align-items:center;gap:10px;text-align:start;border:1px solid var(--border);background:var(--surface-solid);color:var(--text);border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;font-weight:700}.ai-option span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface-soft);font-weight:900;flex:none}.ai-option:hover{border-color:var(--primary)}.ai-option.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.11);background:color-mix(in srgb,var(--surface-solid) 92%,#eef2ff 8%)}.ai-option.selected span{background:var(--primary);color:#fff}.ai-drill-score{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}.ai-drill-score strong{font-size:48px;color:var(--primary)}.ai-drill-review{padding:16px;border-radius:17px;border:1px solid var(--border);margin:10px 0;background:var(--surface-soft)}.ai-drill-review.correct{border-inline-start:5px solid var(--success)}.ai-drill-review.wrong{border-inline-start:5px solid var(--danger)}.ai-history-card p{margin:6px 0 12px}.ai-mini-example{margin-top:14px;padding:13px;border-radius:14px;background:var(--surface-soft);border:1px solid var(--border)}
.premium-lock{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;border-radius:17px;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412}.premium-lock p{margin:3px 0 0;color:inherit}.ai-explanation h4{margin-top:16px}

@media(max-width:1000px){.ai-quota-grid{grid-template-columns:repeat(3,1fr)}.form-grid.four-col{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.ai-premium-hero{grid-template-columns:1fr}.ai-orb{width:70px;height:70px;border-radius:22px;font-size:32px}.ai-quota-grid{grid-template-columns:1fr 1fr}.premium-paywall{grid-template-columns:1fr}.premium-feature-list{grid-template-columns:1fr}.ai-performance-row{grid-template-columns:1fr 55px}.ai-performance-row .ai-accuracy{grid-column:1/-1;grid-row:2}.form-grid.four-col{grid-template-columns:1fr}.premium-lock{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.ai-quota-grid{grid-template-columns:1fr}.ai-day-card{grid-template-columns:1fr}.ai-day-number{width:38px;height:38px}.ai-drill-score strong{font-size:38px}}

.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:8px}.footer-links a{color:var(--muted);text-decoration:none;font-weight:700}.footer-links a:hover{color:var(--primary)}

.footer-social{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:13px}.social-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:13px;background:var(--surface-solid);color:var(--muted);text-decoration:none;transition:transform .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}.social-icon:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--primary);box-shadow:0 8px 22px rgba(79,70,229,.13)}.social-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.social-icon .social-fill{fill:currentColor;stroke:none}
/* =========================================================
   LERNIX MOBILE RESPONSIVE HARDENING
   Keeps desktop unchanged; improves phones/small tablets.
   ========================================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas {
  max-width: 100%;
}
table {
  max-width: 100%;
}

@media (max-width: 820px) {
  body {
    background:
      radial-gradient(circle at top right, rgba(79,70,229,.13), transparent 26%),
      radial-gradient(circle at top left, rgba(6,182,212,.10), transparent 24%),
      var(--bg);
  }

  .app-shell {
    width: min(100% - 20px, 1220px);
    padding: 10px 0 34px;
  }

  .navbar {
    position: sticky;
    top: 6px;
    z-index: 50;
    margin-bottom: 18px;
    padding: 10px;
    border-radius: 20px;
    gap: 10px;
    align-items: stretch;
    overflow: hidden;
  }

  .brand {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }

  .logo {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    flex: 0 0 auto;
  }

  .nav-actions {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-actions::-webkit-scrollbar { display: none; }

  .nav-actions > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .nav-link {
    min-height: 40px;
    padding: 9px 11px;
    font-size: 13px;
  }

  .icon-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 6px;
  }

  .hero-card,
  .panel,
  .card,
  .question-card,
  .result-card,
  .auth-card {
    border-radius: 20px;
  }

  .hero-card {
    padding: 24px 20px;
    min-height: auto;
  }

  h1 {
    font-size: clamp(30px, 10vw, 42px);
    line-height: 1.18;
    letter-spacing: -.5px;
  }

  h2 {
    font-size: clamp(22px, 7vw, 29px);
  }

  p {
    line-height: 1.75;
  }

  .panel, .card {
    padding: 18px;
  }

  .side-stats {
    padding: 16px;
    grid-template-columns: 1fr;
  }

  .stat {
    padding: 15px;
    border-radius: 17px;
  }

  .stat strong,
  .progress-stat strong {
    font-size: 26px;
  }

  .section-title {
    margin: 26px 0 12px;
    align-items: flex-start;
    flex-direction: column;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .chapter-list,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .chapter {
    padding: 17px;
    border-radius: 18px;
  }

  .hero-buttons,
  .inline-actions {
    gap: 8px;
  }

  .hero-buttons .btn,
  .inline-actions .btn {
    min-height: 44px;
  }

  .auth-wrap {
    margin: 18px auto;
    max-width: 100%;
  }

  .auth-card {
    padding: 22px 18px;
  }

  .auth-card h1 {
    font-size: 30px;
  }

  .input, select, textarea {
    min-height: 46px;
    border-radius: 14px;
    font-size: 16px; /* prevents iOS input zoom */
  }

  textarea {
    min-height: 210px;
  }

  .exam-layout,
  .dashboard-hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .topbar {
    align-items: stretch;
    gap: 10px;
  }

  .topbar > * {
    min-width: 0;
  }

  .timer {
    min-height: 42px;
  }

  .question-card {
    padding: 18px 16px;
  }

  .question-meta {
    gap: 8px;
    margin-bottom: 12px;
  }

  .question-text {
    font-size: 19px;
    line-height: 1.75;
  }

  .passage {
    padding: 15px;
    border-radius: 15px;
    overflow-wrap: anywhere;
  }

  .option {
    padding: 13px;
    border-radius: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .navigator {
    position: static;
    padding: 15px;
  }

  .nav-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .q-dot {
    border-radius: 10px;
    min-width: 0;
  }

  .session-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .session-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .metric {
    padding: 13px 10px;
    border-radius: 15px;
    min-width: 0;
  }

  .metric strong {
    font-size: 21px;
    overflow-wrap: anywhere;
  }

  .score {
    font-size: 50px;
  }

  .table-wrap,
  .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .history-table {
    min-width: 620px;
  }

  .writing-toolbar {
    align-items: stretch;
  }

  .writing-toolbar > * {
    min-width: 0;
  }

  .toast-root {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .toast {
    width: 100%;
    max-width: none;
  }

  .ai-premium-hero {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px;
  }

  .ai-orb {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    font-size: 30px;
  }

  .ai-premium-copy h1 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .ai-quota-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .ai-quota {
    min-width: 0;
    padding: 13px;
  }

  .ai-quota strong {
    font-size: 21px;
  }

  .premium-paywall,
  .premium-feature-list {
    grid-template-columns: 1fr;
  }

  .ai-performance-row {
    grid-template-columns: 1fr 52px;
  }

  .ai-performance-row .ai-accuracy {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .form-grid.four-col {
    grid-template-columns: 1fr;
  }

  .premium-lock {
    align-items: stretch;
    flex-direction: column;
  }

  .premium-lock .btn {
    width: 100%;
  }

  .ai-score-row {
    align-items: center;
    gap: 12px;
  }

  .ai-main-score {
    min-width: 82px;
    width: 82px;
    height: 82px;
    border-radius: 20px;
    flex: 0 0 82px;
  }

  .ai-main-score strong {
    font-size: 1.9rem;
  }

  .footer-links {
    gap: 8px 12px;
    font-size: 13px;
  }

  .footer-social {
    margin-top: 12px;
  }
}

@media (max-width: 520px) {
  .app-shell {
    width: calc(100% - 14px);
    padding-top: 7px;
  }

  .navbar {
    top: 4px;
    border-radius: 17px;
    padding: 8px;
  }

  .brand {
    font-size: 14px;
  }

  .hero-card,
  .panel,
  .card,
  .question-card,
  .result-card,
  .auth-card {
    border-radius: 17px;
  }

  .hero-card {
    padding: 20px 16px;
  }

  .panel, .card {
    padding: 16px;
  }

  h1 {
    font-size: clamp(28px, 10.5vw, 36px);
  }

  h2 {
    font-size: 22px;
  }

  .hero-buttons,
  .inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-buttons .btn,
  .inline-actions .btn {
    width: 100%;
  }

  .badge-row {
    gap: 6px;
  }

  .badge {
    padding: 5px 9px;
    font-size: 11px;
  }

  .nav-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .session-actions {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .ai-quota-grid {
    grid-template-columns: 1fr;
  }

  .result-card {
    padding: 20px 15px;
  }

  .score {
    font-size: 46px;
  }

  .ai-score-row {
    align-items: flex-start;
  }

  .ai-main-score {
    min-width: 76px;
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  .ai-day-card {
    grid-template-columns: 1fr;
  }

  .ai-day-number {
    width: 38px;
    height: 38px;
  }

  .ai-drill-score strong {
    font-size: 36px;
  }

  .ai-option {
    padding: 11px 12px;
  }

  .footer-note {
    margin-top: 22px;
    padding-inline: 8px;
    line-height: 1.7;
  }
}

/* Small-height phones / landscape */
@media (max-width: 900px) and (max-height: 500px) {
  .navbar {
    position: static;
  }
}

/* Safe area support for notched iPhones */
@supports (padding: max(0px)) {
  @media (max-width: 820px) {
    .app-shell {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
      padding-bottom: max(34px, env(safe-area-inset-bottom));
    }
  }
}