:root {
  --navy:#17324d;
  --navy-2:#214666;
  --teal:#247b8b;
  --teal-2:#2e91a3;
  --green:#2e7d57;
  --green-2:#4e9a73;
  --orange:#d98e2b;
  --red:#c45151;
  --yellow:#fff2cc;
  --bg:#f4f8fa;
  --card:#ffffff;
  --panel:#eef5f7;
  --border:#d6e2e7;
  --text:#21323d;
  --muted:#607783;
  --muted-2:#8aa0ab;
  --shadow:0 8px 24px rgba(23,50,77,.08);
  --shadow-sm:0 3px 12px rgba(23,50,77,.07);
  --radius:18px;
  --radius-sm:13px;
  --tap:46px;
  --body-size:15px;
}

html[data-theme="dark"] {
  --bg:#0f1b25;
  --card:#162631;
  --panel:#1b303c;
  --border:#2c4655;
  --text:#edf5f7;
  --muted:#a5bac4;
  --muted-2:#78909b;
  --navy:#0d293d;
  --navy-2:#153c54;
  --yellow:#3d361f;
  --shadow:0 8px 24px rgba(0,0,0,.2);
  --shadow-sm:0 3px 12px rgba(0,0,0,.16);
}

html[data-font="small"] { --body-size:14px; }
html[data-font="large"] { --body-size:17px; }

* { box-sizing:border-box; }
html { background:var(--bg); color:var(--text); }
body {
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--text);
  font-family:"Vazirmatn","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  font-size:var(--body-size);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
button,select,input { font:inherit; }
button { color:inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline:3px solid rgba(46,145,163,.35);
  outline-offset:2px;
}
button { -webkit-tap-highlight-color:transparent; }

.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.icon.large { width:34px; height:34px; }
.grow { flex:1; min-width:0; }
.is-hidden { display:none !important; }
.hidden-input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }

.splash {
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  padding:32px 24px;
  text-align:center;
  background:
    radial-gradient(circle at 15% 10%, rgba(46,145,163,.18), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(36,123,139,.12), transparent 30%),
    linear-gradient(160deg,#f8fbfc 0%,#eef5f7 100%);
  color:#17324d;
}
html[data-theme="dark"] .splash { background:linear-gradient(160deg,#0f1b25,#162631); color:#edf5f7; }
.splash-mark { width:76px; height:76px; border-radius:24px; background:var(--navy); position:relative; box-shadow:var(--shadow); margin-bottom:12px; overflow:hidden; }
.splash-mark span { position:absolute; background:#8bd1ca; border-radius:100% 0 100% 0; transform:rotate(45deg); }
.splash-mark span:nth-child(1){ width:28px;height:42px;left:24px;top:13px; }
.splash-mark span:nth-child(2){ width:22px;height:34px;left:10px;top:27px; transform:rotate(12deg); opacity:.9; }
.splash-mark span:nth-child(3){ width:22px;height:34px;right:10px;top:27px; transform:rotate(78deg); opacity:.9; }
.splash-title { font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:30px; direction:ltr; }
.splash-subtitle { font-weight:700; font-size:17px; }
.splash-tagline { color:var(--teal); font-size:13px; margin-top:6px; }

.app-shell { max-width:720px; margin:0 auto; min-height:100vh; background:var(--bg); padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
.status-banner { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; background:#805f13; color:#fff9e6; padding:8px 16px; font-size:12px; }
.app-header { min-height:74px; padding:calc(12px + env(safe-area-inset-top)) 18px 10px; background:var(--navy); color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; position:sticky; top:0; z-index:15; }
.status-banner:not(.is-hidden) + .app-header { top:37px; }
.brand-block { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.brand-en { font-family:Georgia,"Times New Roman",serif; font-size:17px; font-weight:700; direction:ltr; unicode-bidi:embed; }
.brand-fa { color:#dce9ee; font-size:11px; margin-top:3px; }
.header-status { display:flex; align-items:center; gap:8px; }
.status-chip { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 9px; font-size:10px; white-space:nowrap; }
.status-dot { width:9px;height:9px;background:#77d4aa;border-radius:50%; box-shadow:0 0 0 3px rgba(119,212,170,.17); }
.status-dot.offline { background:#f0b24d; box-shadow:0 0 0 3px rgba(240,178,77,.18); }

main { padding:18px 16px 18px; }
.view { display:none; animation:fadeIn .16s ease-out; }
.view.active { display:block; }
@keyframes fadeIn { from{opacity:.35;transform:translateY(3px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce) { .view { animation:none; } * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

.page-intro,.subpage-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 16px; }
.subpage-header { justify-content:flex-start; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:22px; line-height:1.35; margin-bottom:0; color:var(--text); }
h2 { font-size:17px; line-height:1.45; margin-bottom:0; }
h3 { font-size:15px; line-height:1.45; margin-bottom:0; }
.eyebrow { color:var(--teal); font-weight:700; font-size:11px; letter-spacing:.01em; margin:0 0 3px; }
.muted-small { color:var(--muted); font-size:12px; }

.icon-button { min-width:var(--tap); min-height:var(--tap); border:1px solid var(--border); background:var(--card); color:var(--navy); border-radius:14px; display:grid; place-items:center; box-shadow:var(--shadow-sm); cursor:pointer; }
.icon-button.subtle { background:transparent; box-shadow:none; border-color:transparent; color:var(--muted); }
.text-button { border:0; background:transparent; color:var(--teal); font-weight:700; padding:9px 4px; cursor:pointer; }

.hero-card { background:linear-gradient(145deg,var(--navy),#1d5d72); color:#fff; border-radius:24px; padding:20px; box-shadow:0 12px 30px rgba(23,50,77,.18); margin-bottom:14px; overflow:hidden; position:relative; }
.hero-card::after { content:""; position:absolute; width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05);left:-54px;top:-70px;pointer-events:none; }
.hero-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.hero-card .muted-small { color:#dce9ee; }
.hero-card h2 { font-size:14px; font-weight:600; color:#dce9ee; }
.hero-count { display:flex; align-items:baseline; gap:10px; margin:2px 0 8px; }
.hero-count strong { font-size:42px; line-height:1; }
.hero-count span { font-size:13px; color:#e9f2f5; }
.hero-details { display:flex; gap:16px; color:#e3eef2; font-size:12px; margin-bottom:16px; }
.hero-details b { color:#fff; }

.btn { border:0; min-height:var(--tap); border-radius:14px; padding:11px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; cursor:pointer; text-decoration:none; }
.btn-wide { width:100%; }
.btn-primary { background:var(--teal); color:#fff; box-shadow:0 6px 18px rgba(36,123,139,.2); }
.hero-card .btn-primary { background:#fff; color:var(--navy); }
.btn-secondary { background:var(--panel); color:var(--navy); border:1px solid var(--border); }
html[data-theme="dark"] .btn-secondary { color:var(--text); }
.btn-danger { background:var(--red); color:#fff; }
.btn-reveal { background:var(--panel); color:var(--navy); border:1px solid var(--border); margin:12px 0; }
.btn.compact { width:auto; min-height:42px; padding:9px 12px; font-size:12px; }

.pill { display:inline-flex; align-items:center; gap:5px; background:rgba(36,123,139,.1); color:var(--teal); padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; }
.pill.soft { background:rgba(255,255,255,.12); color:inherit; }
.section-card .pill.soft, .review-view .pill.soft { background:var(--panel); color:var(--muted); }

.kpi-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.metric-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-height:100px; }
.metric-label { color:var(--muted); font-size:11px; font-weight:700; }
.metric-card strong { color:var(--navy-2); font-size:24px; line-height:1.3; margin-top:5px; }
html[data-theme="dark"] .metric-card strong { color:#9ddbe4; }
.metric-card small { color:var(--muted-2); font-size:10px; margin-top:auto; }

.section-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:15px; box-shadow:var(--shadow-sm); margin-bottom:14px; }
.section-card.compact-card { padding:12px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:13px; }
.section-heading h2 { color:var(--text); }

.lesson-dots { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; direction:ltr; margin:12px 0 16px; }
.lesson-dot { height:7px; border-radius:10px; background:var(--border); position:relative; }
.lesson-dot.done { background:var(--green); }
.lesson-dot.active { background:var(--teal); box-shadow:0 0 0 3px rgba(36,123,139,.12); }
.snapshot-active { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.snapshot-active h3 { margin:4px 0 3px; }
.mini-badge,.counter-chip { display:inline-flex; background:var(--panel); color:var(--teal); border-radius:999px; padding:3px 8px; font-size:10px; font-weight:800; }
.ring { width:62px;height:62px;border-radius:50%;border:7px solid var(--panel); display:grid; place-items:center; flex:0 0 auto; color:var(--teal); font-weight:900; font-size:12px; }

.skill-list { display:flex; flex-direction:column; gap:11px; }
.skill-row { display:grid; grid-template-columns:96px 1fr 42px; align-items:center; gap:9px; direction:ltr; }
.skill-row .skill-name { color:var(--text); font-size:12px; direction:ltr; text-align:left; }
.skill-row .skill-value { font-size:11px; color:var(--muted); text-align:right; direction:ltr; }
.skill-row progress { width:100%; height:8px; }
progress { appearance:none; border:0; border-radius:999px; overflow:hidden; background:var(--panel); }
progress::-webkit-progress-bar { background:var(--panel); border-radius:999px; }
progress::-webkit-progress-value { background:linear-gradient(90deg,var(--teal),var(--green-2)); border-radius:999px; }
progress::-moz-progress-bar { background:var(--teal); border-radius:999px; }

.weak-focus { display:flex; align-items:center; gap:12px; }
.weak-icon { width:48px;height:48px;border-radius:15px;background:rgba(217,142,43,.12);color:var(--orange);display:grid;place-items:center;flex:0 0 auto; }
.weak-icon .icon { width:26px;height:26px; }

/* Review */
.review-idle { text-align:center; padding:38px 12px 18px; }
.empty-illustration { width:100px;height:100px;border-radius:30px;background:var(--panel);display:grid;place-items:center;margin:0 auto 18px;color:var(--teal); }
.empty-illustration svg { width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.5; }
.review-idle p { color:var(--muted); max-width:430px; margin:8px auto 18px; }
.idle-stats { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.idle-stats span { background:var(--card); border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:11px; }
.review-toolbar { display:grid; grid-template-columns:46px 1fr 46px; gap:10px; align-items:center; margin-bottom:12px; direction:ltr; }
.review-progress-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; }
.review-progress-wrap progress { width:100%; height:6px; }
.review-progress-wrap span { font-size:10px; color:var(--muted); direction:rtl; }
.card-meta-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.flashcard { background:var(--card); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); min-height:330px; overflow:hidden; }
.flash-front { min-height:255px; padding:34px 22px 22px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.flash-main { margin:0; font-family:Inter,Roboto,Arial,sans-serif; font-size:29px; font-weight:800; line-height:1.3; direction:auto; unicode-bidi:plaintext; color:var(--navy-2); overflow-wrap:anywhere; }
html[data-theme="dark"] .flash-main { color:#a9dce4; }
.round-audio { margin-top:18px; border:0; background:var(--panel); color:var(--teal); width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer; }
.review-instruction { color:var(--muted); font-size:12px; margin:18px 0 0; }
.flash-answer { border-top:1px solid var(--border); padding:20px; text-align:center; background:linear-gradient(180deg,rgba(36,123,139,.06),transparent); }
.answer-main { font-weight:900; font-size:18px; color:var(--text); margin-bottom:8px; direction:auto; unicode-bidi:plaintext; }
.ipa { font-family:"Noto Sans",Arial,sans-serif; direction:ltr; unicode-bidi:embed; color:var(--teal); font-size:15px; margin-bottom:4px; }
.persian-pron { color:var(--muted); font-size:13px; margin-bottom:10px; }
.example-box,.note-box { text-align:start; border-radius:14px; padding:10px 12px; background:var(--panel); margin-top:10px; }
.example-box span,.note-box span { color:var(--teal); font-size:10px; font-weight:800; }
.example-box p,.note-box p { margin:3px 0 0; font-size:12px; direction:auto; unicode-bidi:plaintext; }
.rating-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:6px 0 10px; }
.rating-btn { min-height:76px; border:0; color:#fff; border-radius:16px; padding:8px 8px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; text-align:right; cursor:pointer; }
.rating-btn span { font-size:20px; font-weight:900; grid-row:1/3; margin-left:8px; }
.rating-btn b { font-size:12px; }
.rating-btn small { opacity:.82; font-size:9px; }
.rate-0 { background:var(--red); }.rate-1 { background:var(--orange); }.rate-2 { background:var(--green); }.rate-3 { background:#226d4b; }
.rating-btn:disabled { opacity:.35; cursor:not-allowed; filter:saturate(.4); }
body.focus-mode .app-header, body.focus-mode .bottom-nav { display:none; }
body.focus-mode .app-shell { padding-bottom:20px; }
body.focus-mode main { padding-top:calc(14px + env(safe-area-inset-top)); }

/* Roadmap */
.progress-badge { width:64px;height:64px;border-radius:18px;background:var(--card);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-sm); }
.progress-badge span { font-weight:900;color:var(--teal);font-size:13px; }.progress-badge small{font-size:9px;color:var(--muted)}
.course-overview-card { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; gap:6px; }
.course-overview-card div { display:flex; flex-direction:column; padding:5px 2px; }
.course-overview-card strong { color:var(--teal); font-size:19px; }.course-overview-card span{font-size:9px;color:var(--muted)}
.roadmap-list { display:flex; flex-direction:column; gap:10px; }
.roadmap-item { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:14px; display:grid; grid-template-columns:44px 1fr auto; gap:11px; align-items:center; box-shadow:var(--shadow-sm); cursor:pointer; }
.roadmap-number { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--panel);color:var(--muted);font-weight:900; }
.roadmap-item.done .roadmap-number { background:rgba(46,125,87,.12); color:var(--green); }
.roadmap-item.active { border-color:rgba(36,123,139,.55); background:linear-gradient(145deg,var(--card),rgba(36,123,139,.06)); }
.roadmap-item.active .roadmap-number { background:var(--teal); color:#fff; }
.roadmap-title { min-width:0; }.roadmap-title h3{margin-bottom:3px}.roadmap-title p{margin:0;color:var(--muted);font-size:11px;direction:ltr;text-align:right;unicode-bidi:plaintext}.roadmap-meta{text-align:left;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.roadmap-meta span{font-size:9px;color:var(--muted)}
.roadmap-status { font-size:9px; border-radius:999px; padding:3px 7px; background:var(--panel); color:var(--muted); }
.roadmap-item.done .roadmap-status{background:rgba(46,125,87,.1);color:var(--green)}.roadmap-item.active .roadmap-status{background:rgba(36,123,139,.12);color:var(--teal)}

/* Progress */
.progress-kpis { margin-bottom:14px; }
.lesson-bars { display:flex; flex-direction:column; gap:9px; }
.lesson-bar-row { display:grid; grid-template-columns:58px 1fr 40px; align-items:center; gap:8px; direction:ltr; }
.lesson-bar-row span { font-size:10px; color:var(--muted); }.lesson-bar-row strong{font-size:10px;color:var(--teal);text-align:right}.lesson-bar-row progress{height:9px;width:100%}
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chart-grid .section-card { min-width:0; }
.mini-chart { min-height:160px; display:flex; align-items:flex-end; gap:6px; direction:ltr; padding-top:8px; }
.bar-cell { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; min-width:0; }
.bar-visual { width:100%; max-width:24px; background:linear-gradient(180deg,var(--teal-2),var(--teal)); border-radius:7px 7px 2px 2px; min-height:3px; }
.bar-cell b { font-size:9px; color:var(--text); }.bar-cell span{font-size:8px;color:var(--muted);white-space:nowrap}
.weak-list { display:flex; flex-direction:column; gap:8px; }
.weak-item { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.weak-item:last-child { border-bottom:0; }
.weak-rank { width:28px;height:28px;border-radius:9px;background:rgba(196,81,81,.1);color:var(--red);display:grid;place-items:center;font-size:10px;font-weight:900; }
.weak-item .grow b { display:block; font-size:12px; direction:auto; unicode-bidi:plaintext; }.weak-item .grow small{font-size:9px;color:var(--muted)}.weak-count{color:var(--red);font-size:10px;font-weight:800}

/* Settings */
.settings-group { margin-bottom:18px; }
.settings-group > h2 { font-size:12px; color:var(--muted); margin:0 4px 8px; }
.setting-row,.setting-action { width:100%; min-height:66px; background:var(--card); border:1px solid var(--border); border-bottom:0; padding:11px 13px; display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:right; }
.setting-row:first-of-type,.setting-action:first-of-type { border-radius:16px 16px 0 0; }
.setting-row:last-child,.setting-action:last-child { border-bottom:1px solid var(--border); border-radius:0 0 16px 16px; }
.settings-group > .setting-action:only-of-type { border:1px solid var(--border); border-radius:16px; }
.setting-row span,.setting-action span { display:flex; flex-direction:column; min-width:0; }.setting-row b,.setting-action b{font-size:12px}.setting-row small,.setting-action small{font-size:9px;color:var(--muted);margin-top:2px}.setting-action{cursor:pointer;color:var(--text)}
.setting-row select { max-width:112px; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:10px; padding:7px 9px; }
.switch { appearance:none; width:48px;height:28px;border-radius:999px;background:var(--border);position:relative;transition:.18s;cursor:pointer;flex:0 0 auto; }
.switch::after { content:""; width:22px;height:22px;border-radius:50%;background:#fff;position:absolute;top:3px;right:3px;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.18s; }
.switch:checked { background:var(--teal); }.switch:checked::after{transform:translateX(-20px)}
.privacy-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; display:flex; gap:12px; align-items:flex-start; }.privacy-card .icon{color:var(--green)}.privacy-card b{display:block;margin-bottom:3px}.privacy-card p{font-size:10px;color:var(--muted);margin:0}
.security-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }.security-badges span{background:rgba(46,125,87,.09);color:var(--green);font-size:9px;padding:5px 8px;border-radius:999px}
.setting-action.danger { color:var(--red); }

/* Lessons */
.lessons-list { display:flex; flex-direction:column; gap:10px; }
.lesson-card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:14px; box-shadow:var(--shadow-sm); cursor:pointer; }
.lesson-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }.lesson-card h2{font-size:14px;margin:4px 0 2px}.lesson-card .en-title{direction:ltr;text-align:right;unicode-bidi:plaintext;font-size:10px;color:var(--muted);margin:0}.lesson-card progress{width:100%;height:7px;margin-top:11px}.lesson-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:9px;color:var(--muted)}
.lesson-hero { background:linear-gradient(145deg,var(--navy),#1e5b70); color:#fff; border-radius:22px; padding:18px; margin-bottom:14px; box-shadow:var(--shadow); }
.lesson-hero h2 { direction:ltr;text-align:right;unicode-bidi:plaintext;margin:7px 0 5px;font-family:Inter,Arial,sans-serif; }.lesson-hero p{font-size:11px;color:#dce9ee;margin-bottom:12px}.lesson-hero progress{width:calc(100% - 42px);height:8px;margin-left:8px}.lesson-hero > span:last-child{font-size:10px}
.vocab-list { display:flex;flex-direction:column;gap:8px; }
.vocab-item { border:1px solid var(--border);border-radius:14px;padding:10px 11px; }.vocab-main{display:flex;justify-content:space-between;gap:10px;align-items:start}.vocab-term{direction:ltr;unicode-bidi:plaintext;font-family:Inter,Arial,sans-serif;font-weight:800;font-size:13px}.vocab-meaning{font-size:11px;text-align:left}.vocab-meta{margin-top:6px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.vocab-meta span{background:var(--panel);border-radius:8px;padding:5px 7px;font-size:9px;overflow-wrap:anywhere}.vocab-meta .ipa{font-size:10px;margin:0}.vocab-example{font-size:10px;color:var(--muted);direction:ltr;text-align:left;unicode-bidi:plaintext;margin:7px 0 0}
.chunk-list { display:flex;flex-wrap:wrap;gap:7px; }.chunk{border:1px solid var(--border);border-radius:999px;padding:7px 10px;font-size:10px;background:var(--panel)}.chunk b{direction:ltr;unicode-bidi:plaintext}.chunk span{color:var(--muted)}
.info-list { display:flex;flex-direction:column;gap:8px; }.info-row{background:var(--panel);border-radius:12px;padding:10px 12px}.info-row span{display:block;color:var(--teal);font-size:9px;font-weight:800}.info-row p{margin:3px 0 0;font-size:11px}

/* Backup */
.backup-hero { text-align:center; padding:24px 14px 16px; }.backup-cloud{width:72px;height:72px;fill:none;stroke:var(--teal);stroke-width:1.3;margin-bottom:8px}.backup-hero h2{margin-bottom:6px}.backup-hero p{color:var(--muted);font-size:12px;max-width:430px;margin:0 auto}.backup-actions{display:flex;flex-direction:column;gap:9px}.file-button{cursor:pointer}.backup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.backup-stats div{display:flex;flex-direction:column}.backup-stats span{font-size:9px;color:var(--muted)}.backup-stats strong{font-size:13px;margin-top:3px}.warning-box{display:flex;gap:9px;background:var(--yellow);color:var(--text);border-radius:14px;padding:11px 12px;font-size:10px}.warning-box .icon{color:var(--orange);margin-top:1px}.warning-box p{margin:0}

/* Session end */
.session-end { text-align:center; padding-top:20px; }.trophy-wrap{width:94px;height:94px;border-radius:28px;background:rgba(217,142,43,.12);display:grid;place-items:center;margin:0 auto 14px;color:var(--orange)}.trophy-wrap svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.5}.session-end > p{color:var(--muted);font-size:12px}.session-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 14px}.session-summary-grid article{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:13px 6px;display:flex;flex-direction:column}.session-summary-grid strong{color:var(--teal);font-size:21px}.session-summary-grid span{font-size:9px;color:var(--muted)}.session-weak-card{text-align:right}.session-end .btn{margin-top:8px}

/* Bottom nav */
.bottom-nav { position:fixed; z-index:30; bottom:0; left:50%; transform:translateX(-50%); width:min(720px,100%); min-height:68px; padding:7px 10px calc(7px + env(safe-area-inset-bottom)); background:var(--card); background:color-mix(in srgb,var(--card) 94%,transparent); border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(5,1fr); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.nav-item { border:0; background:transparent; color:var(--muted); min-height:52px; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; }
.nav-item .icon { width:20px;height:20px; }.nav-item span{font-size:9px;font-weight:700}.nav-item.active{color:var(--teal);background:rgba(36,123,139,.08)}

.toast { position:fixed; z-index:80; left:50%; bottom:calc(82px + env(safe-area-inset-bottom)); transform:translate(-50%,18px); width:min(88vw,420px); background:#17324d; color:#fff; border-radius:14px; padding:11px 14px; box-shadow:0 14px 35px rgba(0,0,0,.2); text-align:center; font-size:11px; opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal-backdrop { position:fixed; inset:0; z-index:90; background:rgba(9,22,31,.55); display:flex; align-items:center; justify-content:center; padding:18px; }
.modal-card { width:min(100%,440px); background:var(--card); border-radius:20px; padding:20px; box-shadow:0 20px 70px rgba(0,0,0,.25); }.modal-card h2{margin-bottom:8px}.modal-card p{color:var(--muted);font-size:12px}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.modal-actions .btn{min-width:100px}

@media (min-width:600px) {
  main { padding:22px 24px; }
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
  .rating-panel { grid-template-columns:repeat(4,1fr); }
  .course-overview-card { gap:20px; }
  .flashcard { min-height:350px; }
  .flash-front { min-height:270px; }
}

@media (max-width:380px) {
  main { padding-inline:12px; }
  .app-header { padding-inline:13px; }
  .brand-en { font-size:15px; }.brand-fa{font-size:10px}.status-chip{font-size:9px;padding:4px 7px}
  .hero-card { padding:17px; }.hero-count strong{font-size:36px}
  .metric-card { padding:11px; min-height:94px; }.metric-card strong{font-size:21px}
  .skill-row { grid-template-columns:84px 1fr 36px; gap:6px; }
  .chart-grid { grid-template-columns:1fr; }
  .flash-main { font-size:25px; }
  .roadmap-item { grid-template-columns:40px 1fr; }.roadmap-meta{grid-column:2;align-items:flex-start;flex-direction:row;flex-wrap:wrap}.roadmap-number{width:38px;height:38px}
}