/* =========================================================
   Nour Academy — Memorization app
   Dark green design · Baloo Bhaijaan 2
========================================================= */

/* ==============================
   TOKENS
============================== */
:root {
  --bg: #0A0C0B;
  --bg-2: #0F1211;
  --card: #171A19;
  --card-2: #1D2120;
  --card-3: #252A28;
  --line: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.11);

  --g-950: #08201B;
  --g-900: #0C2B24;
  --g-800: #10392F;
  --g-700: #14503F;
  --green: #2E8C76;
  --green-l: #47B39A;
  --green-ll: #7FD6BF;
  --green-glow: rgba(71,179,154,0.16);
  --mint: #CFEFB4;
  --mint-ink: #12221A;
  --sand: #E6C79C;
  --sand-ink: #2A1E0F;

  --text: #F2F4F3;
  --text-m: #A1AAA6;
  --text-l: #69736F;
  --ok: #5BD1A6;
  --ok-bg: rgba(91,209,166,0.12);
  --bad: #EF7A63;
  --bad-bg: rgba(239,122,99,0.12);

  --font: 'Baloo Bhaijaan 2', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --quran: 'Amiri Quran', 'Amiri', 'Baloo Bhaijaan 2', serif;
  /* legacy aliases used by older markup */
  --sans: var(--font); --serif: var(--font); --arabic: var(--font);
  --teal: var(--green); --teal-l: var(--green-l); --teal-ll: var(--green-ll); --gold: var(--sand); --gold-l: var(--sand); --gold-ll: var(--sand);
  --border: var(--line); --border-m: var(--line-2); --deep: var(--card); --mid: var(--card-2); --surface: var(--card-3); --night: var(--bg);

  --r-lg: 24px;
  --r: 18px;
  --r-s: 12px;
  --nav-h: 64px;
  --tab-h: 68px;
  --shadow: 0 24px 60px rgba(0,0,0,0.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow-x: clip;
}
main { flex: 1; position: relative; z-index: 1; }
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--green-ll); }
svg { flex-shrink: 0; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: rgba(71,179,154,0.4); color: #fff; }
:focus-visible { outline: 2px solid var(--green-l); outline-offset: 2px; }
.geo-bg, .hero-glow-main, .hero-glow-2 { display: none; }
.flip-rtl { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .flip-rtl, html[dir="rtl"] .nav-back .ic, html[dir="rtl"] .back-link svg { transform: scaleX(-1); }

/* ==============================
   8-POINT STAR NUMBER (ayah marker)
============================== */
.star-num {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; color: var(--green-ll);
  font-weight: 600; font-size: 0.82rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.star-num::before, .star-num::after {
  content: ''; position: absolute; inset: 6px;
  border: 1.6px solid currentColor; border-radius: 4px;
}
.star-num::after { transform: rotate(45deg); }
.star-num > span { position: relative; z-index: 1; color: var(--text); padding-top: 2px; transition: transform 0.3s; }
.star-num.lg { width: 46px; height: 46px; font-size: 0.95rem; }
.star-num.lg::before, .star-num.lg::after { inset: 8px; }
.star-num.sand { color: var(--sand); }
.star-num.fill::before, .star-num.fill::after { background: var(--sand); border-color: var(--sand); }
.star-num.fill > span { color: var(--sand-ink); }
.star-num .bump { animation: bump 0.4s ease; display: inline-block; }
@keyframes bump { 50% { transform: scale(1.35); } }

/* ==============================
   NAVBAR
============================== */
.nav {
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 max(20px, calc((100vw - 1180px) / 2));
  background: rgba(10,12,11,0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
html[data-page="home"] .nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; position: absolute; left: 0; right: 0; }
html[data-page="home"] .nav.scrolled { position: fixed; background: rgba(10,12,11,0.88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.brand-star { width: 40px; height: 40px; color: var(--green-l); }
.brand-star > span { font-size: 1rem; font-weight: 700; color: var(--text); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name { font-weight: 700; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 0.72rem; color: var(--text-l); }
.nav-back {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text); text-decoration: none; transition: background 0.2s;
}
.nav-back .ic { width: 22px; height: 22px; }
.nav-back:hover { background: var(--card-2); }
.brand-compact .brand-sub { display: none; }
.nav-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-shrink: 0; }
.nav-inline-form { display: inline; }
.pill-btn, .nav-a {
  font-size: 0.85rem; font-weight: 500; color: var(--text-m); text-decoration: none;
  padding: 7px 14px; border-radius: 999px; border: none; background: transparent; cursor: pointer; transition: all 0.2s;
}
.pill-btn:hover, .nav-a:hover { color: var(--text); background: var(--card-2); }
.nav-icon-btn {
  height: 40px; padding: 0 6px 0 10px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-m); cursor: pointer; transition: all 0.2s;
}
html[dir="rtl"] .nav-icon-btn { padding: 0 10px 0 6px; }
.nav-icon-btn .ic { transition: transform 0.5s; }
.nav-icon-btn:hover, .nav-icon-btn[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); }
.nav-icon-btn[aria-expanded="true"] .ic { transform: rotate(60deg); }
.nav-lang-chip { font-size: 0.72rem; font-weight: 700; background: var(--card-3); color: var(--text); border-radius: 999px; padding: 3px 9px; }
.nav-kbd { font-family: var(--font); font-size: 0.7rem; color: var(--text-l); border: 1px solid var(--line-2); border-radius: 6px; padding: 0 6px; }

/* ==============================
   SETTINGS PANEL
============================== */
.settings-panel {
  position: fixed; top: calc(var(--nav-h) + 6px); inset-inline-end: max(16px, calc((100vw - 1180px) / 2));
  z-index: 1100; width: min(360px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 20px 20px 16px;
  animation: pop-in 0.22s cubic-bezier(0.4,0,0.2,1);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.sp-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.sp-close { background: var(--card-2); border: none; color: var(--text-m); width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.sp-close:hover { color: var(--text); }
.sp-group { padding: 14px 0; border-top: 1px solid var(--line); }
.sp-label { font-size: 0.78rem; font-weight: 600; color: var(--text-l); margin-bottom: 10px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg button { background: none; border: none; color: var(--text-m); padding: 7px 6px; border-radius: 999px; cursor: pointer; font-size: 0.86rem; font-weight: 500; transition: all 0.2s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--card-3); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.sp-learner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sp-learner b { display: block; font-weight: 600; font-size: 1.05rem; }
.sp-learner small { color: var(--text-l); font-size: 0.78rem; }
.testi-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--g-700), var(--g-900)); border: 1px solid rgba(127,214,191,0.25);
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--green-ll);
}
.sp-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sp-btn { flex: 1; min-width: 120px; font-size: 0.85rem; font-weight: 500; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-m); cursor: pointer; transition: all 0.2s; }
.sp-btn:hover { color: var(--text); background: var(--card-2); }
.sp-btn.danger:hover { color: var(--bad); border-color: rgba(239,122,99,0.4); background: var(--bad-bg); }
.sp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--text-m); cursor: pointer; }
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--card-3); border-radius: 13px; transition: 0.25s; }
.switch span::before { content: ''; position: absolute; width: 20px; height: 20px; top: 3px; inset-inline-start: 3px; background: var(--text); border-radius: 50%; transition: 0.25s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::before { transform: translateX(18px); }
html[dir="rtl"] .switch input:checked + span::before { transform: translateX(-18px); }

/* ==============================
   BUTTONS
============================== */
.btn-white, .btn-fill, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: 0.98rem; font-weight: 600; line-height: 1.2;
  padding: 14px 28px; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
.btn-white { background: #fff; color: #0A0C0B; width: 100%; padding: 15px 28px; }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255,255,255,0.15); }
.btn-fill { background: var(--green); color: #fff; }
.btn-fill:hover { background: var(--green-l); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(46,140,118,0.35); }
.btn-fill.gold { background: #fff; color: #0A0C0B; }
.btn-fill.gold:hover { background: var(--mint); box-shadow: 0 10px 28px rgba(207,239,180,0.2); }
.btn-fill:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline { background: var(--card-2); color: var(--text); border-color: var(--line); }
.btn-outline:hover { background: var(--card-3); }
.btn-outline:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-outline.danger:hover { color: var(--bad); background: var(--bad-bg); }
.btn-fill.sm, .btn-outline.sm { padding: 10px 20px; font-size: 0.9rem; }
.btn-fill .flip-rtl, .btn-outline .flip-rtl { width: 16px; height: 16px; }
.btn-ghost { background: none; border: none; color: var(--text-m); cursor: pointer; font-size: 0.9rem; padding: 8px 12px; border-radius: 999px; }
.btn-ghost:hover { color: var(--text); background: var(--card-2); }
.btn-sub { opacity: 0.8; font-weight: 500; }

/* ==============================
   HOME — HERO
============================== */
.home { padding-bottom: 20px; }
.hero-card {
  position: relative; overflow: clip;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(47,156,128,0.35), transparent 60%),
    linear-gradient(160deg, #0F3A30 0%, #0B2721 45%, #091B17 100%);
  padding: calc(var(--nav-h) + 28px) max(20px, calc((100vw - 1180px) / 2)) 80px;
  min-height: 420px;
}
.hero-art { position: absolute; bottom: 0; inset-inline-end: max(0px, calc((100vw - 1260px) / 2)); width: min(48vw, 520px); height: 100%; pointer-events: none; opacity: 0.95; }
.hero-art svg { position: absolute; bottom: 0; inset-inline-end: 0; width: 100%; height: 100%; }
html[dir="rtl"] .hero-art svg { transform: scaleX(-1); }
.hero-content { position: relative; z-index: 1; max-width: 520px; }
.hero-hi { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.15; margin-bottom: 10px; overflow-wrap: anywhere; }
.hero-current { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 500; margin-bottom: 14px; }
.hero-current .star-num { width: 34px; height: 34px; }
.hero-current .star-num::before, .hero-current .star-num::after { background: var(--sand); border-color: var(--sand); inset: 6px; }
.hero-current .star-num > span { color: var(--sand-ink); font-size: 0.72rem; font-weight: 700; }
.hero-line { font-size: 0.95rem; color: rgba(242,244,243,0.85); margin-bottom: 2px; }
.hero-line:empty { display: none; }
.segments { display: flex; gap: 8px; margin: 16px 0 26px; max-width: 360px; }
.segments .seg-dummy { display: none; }
.segments span { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.16); }
.segments span.on { background: var(--green-l); }
.segments span.cur { background: linear-gradient(90deg, var(--green-l) 45%, rgba(255,255,255,0.16) 45%); }
html[dir="rtl"] .segments span.cur { background: linear-gradient(270deg, var(--green-l) 45%, rgba(255,255,255,0.16) 45%); }
.hero-content .btn-white { max-width: 360px; }

/* ==============================
   HOME — SHEET
============================== */
.sheet {
  position: relative; z-index: 2;
  margin-top: -36px;
  background: var(--bg-2);
  border-radius: 28px 28px 0 0;
  border-top: 1px solid var(--line);
  padding: 12px max(20px, calc((100vw - 1180px) / 2)) 40px;
}
.sheet-grabber { width: 44px; height: 5px; border-radius: 3px; background: var(--card-3); margin: 0 auto 22px; }
.sheet-grid { display: grid; grid-template-columns: 360px 1fr; gap: 36px; align-items: start; }
.sheet-side { position: sticky; top: calc(var(--nav-h) + 16px); }

.streak-card { margin-bottom: 26px; }
.streak-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 14px; }
.flame { font-size: 1.1rem; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.day-name { font-size: 0.78rem; color: var(--green-l); font-weight: 500; text-transform: capitalize; white-space: nowrap; }
.day.future .day-name, .day.missed .day-name { color: var(--text-l); }
.day-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card-2); }
.day.done .day-dot { background: var(--green); box-shadow: 0 4px 14px rgba(46,140,118,0.35); }
.day.done svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.day.today .day-dot { background: var(--card-2); border: 1px solid var(--line-2); }
.day.today i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-l); }
.muted-note { font-size: 0.86rem; color: var(--text-l); }

.block-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 12px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.stat-card.wide { grid-column: 1 / -1; }
.stat-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-m); }
.stat-label .ic { color: var(--text-m); width: 18px; height: 18px; }
.stat-num { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-top: 8px; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-num.sm { font-size: 1.35rem; margin-top: 2px; }
.stat-sub { font-size: 0.8rem; color: var(--text-l); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }

.bar { height: 8px; border-radius: 4px; background: var(--card-3); overflow: hidden; }
.bar.big { height: 10px; border-radius: 5px; }
.bar-fill { height: 100%; width: 0; border-radius: inherit; background: var(--green-l); transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }

.page-title { font-size: 2rem; font-weight: 700; margin-bottom: 10px; line-height: 1.2; }
.search-line { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); padding: 8px 2px; margin-bottom: 16px; color: var(--text-m); transition: border-color 0.2s; }
.search-line:focus-within { border-bottom-color: var(--green-l); }
.search-line input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 1rem; padding: 4px 0; }
.search-line input::placeholder { color: var(--text-l); }
.search-line input::-webkit-search-cancel-button { filter: invert(0.6); }
.search-line:focus-within .nav-kbd { display: none; }
.tabs { display: flex; gap: 22px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab-u { background: none; border: none; color: var(--text-l); font-size: 1rem; font-weight: 500; padding: 8px 0 10px; cursor: pointer; white-space: nowrap; position: relative; transition: color 0.2s; }
.tab-u:hover { color: var(--text-m); }
.tab-u.active { color: var(--text); font-weight: 600; }
.tab-u.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }

/* chapter rows */
.ch-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
  text-decoration: none; color: inherit; min-width: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  animation: fadeUp 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
.ch-card:hover { background: var(--card-2); border-color: var(--line-2); transform: translateY(-2px); }
.ch-card.done { border-color: rgba(71,179,154,0.35); background: linear-gradient(135deg, rgba(46,140,118,0.14), var(--card) 60%); }
/* chapter badge: number inside a circular progress ring */
.ch-ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--card-3), var(--card-2) 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.ch-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
html[dir="rtl"] .ch-ring > svg { transform: rotate(-90deg) scaleY(-1); }
.ch-ring circle { fill: none; stroke-width: 3; }
.ch-ring .r-bg { stroke: rgba(127,214,191,0.16); }
.ch-ring .r-fg { stroke: var(--green-l); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1); }
.ch-card:not(.started):not(.done) .ch-ring .r-fg { opacity: 0; }
.ch-ring-n { position: relative; font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1; padding-top: 2px; font-variant-numeric: tabular-nums; }
.ch-ring-n.long { font-size: 0.82rem; }
.ch-ring-ok { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--card); }
.ch-ring-ok svg { position: static; width: 12px; height: 12px; transform: none; fill: none; stroke: var(--mint-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ch-card.done .ch-ring { background: radial-gradient(circle at 50% 35%, rgba(207,239,180,0.16), rgba(207,239,180,0.05) 70%); }
.ch-card.done .ch-ring .r-fg { stroke: var(--mint); }
.ch-card.done .ch-ring-ok { display: inline-flex; }
.ch-card:hover .ch-ring .r-bg { stroke: rgba(127,214,191,0.28); }
.ch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ch-title { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-meta { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-l); flex-wrap: wrap; }
.ch-meta i { font-style: normal; opacity: 0.6; }
.ch-audio { color: var(--sand); }
.ch-status { font-size: 0.7rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-inline-start: 2px; }
.ch-status:empty { display: none; }
.ch-status.progress { background: var(--green-glow); color: var(--green-ll); }
.ch-status.done { background: rgba(207,239,180,0.14); color: var(--mint); }
.ch-bar { display: block; height: 4px; border-radius: 2px; background: var(--card-3); overflow: hidden; margin-top: 6px; }
.ch-card:not(.started):not(.done) .ch-bar { opacity: 0.5; }
.ch-fill { display: block; height: 100%; width: 0; background: var(--green-l); border-radius: 2px; transition: width 0.8s; }
.ch-card.done .ch-fill { background: var(--mint); }
.ch-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; max-width: 40%; }
.ch-ar { font-family: var(--quran); font-size: 1.35rem; line-height: 1.5; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ch-pct { font-size: 0.75rem; color: var(--text-l); font-variant-numeric: tabular-nums; }
.ch-card.done .ch-pct { color: var(--mint); }

.empty-state { text-align: center; padding: 48px 20px; border: 1px dashed var(--line-2); border-radius: var(--r); }
.empty-state.small { padding: 28px 16px; margin-top: 12px; }
.empty-icon { display: flex; justify-content: center; margin-bottom: 8px; }
.empty-icon .star-num { width: 64px; height: 64px; font-size: 1.4rem; }
.empty-icon .star-num::before, .empty-icon .star-num::after { inset: 10px; }
.empty-state h3 { font-size: 1.4rem; margin-bottom: 6px; }
.empty-state p { color: var(--text-m); max-width: 480px; margin: 0 auto 10px; }

/* bottom tab bar (mobile) */
.tabbar { display: none; }

/* ==============================
   MODAL / FORMS
============================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fade-in 0.25s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.form-card {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 32px 28px; box-shadow: var(--shadow); width: 100%; max-width: 440px;
  position: relative; overflow: hidden; animation: pop-in 0.3s cubic-bezier(0.4,0,0.2,1);
}
.form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: radial-gradient(100% 100% at 50% 0%, rgba(47,156,128,0.28), transparent 70%); pointer-events: none; }
.form-card > * { position: relative; }
.modal-callig { font-family: var(--quran); font-size: 1.6rem; color: var(--green-ll); text-align: center; direction: rtl; margin-bottom: 4px; }
.form-card-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 4px; }
.form-card-sub { font-size: 0.92rem; color: var(--text-m); margin-bottom: 22px; line-height: 1.6; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-m); margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 12px 16px; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  color: var(--text); font-size: 1rem; outline: none; transition: all 0.2s;
}
.form-input::placeholder { color: var(--text-l); }
.form-input:focus { border-color: var(--green-l); box-shadow: 0 0 0 3px var(--green-glow); }
.form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
html[dir="rtl"] .form-select { background-position: left 14px center; padding-right: 16px; padding-left: 36px; }
.form-select option { background: var(--card); }
.form-submit {
  width: 100%; padding: 14px; background: #fff; color: #0A0C0B;
  border: none; border-radius: 999px; cursor: pointer;
  font-size: 1rem; font-weight: 700; transition: all 0.2s; margin-top: 6px;
}
.form-submit:hover { background: var(--mint); transform: translateY(-1px); }
.form-fine { font-size: 0.8rem; color: var(--text-l); text-align: center; margin-top: 14px; }
.form-error { color: #f6a796; font-size: 0.9rem; background: var(--bad-bg); border: 1px solid rgba(239,122,99,0.3); border-radius: var(--r-s); padding: 10px 14px; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.empty-warn { animation: shake 0.4s; border-color: var(--bad) !important; }
@keyframes shake { 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }

/* ==============================
   LEARN PAGE
============================== */
.learn-wrap { padding: 8px 20px 60px; }
.learn-inner { max-width: 820px; margin: 0 auto; }
.learn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 16px; }
.learn-h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.learn-sub { font-size: 0.92rem; color: var(--text-m); margin-top: 4px; }
.learn-ar { font-family: var(--quran); font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--text); line-height: 1.6; text-align: end; }
.learn-ids { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.id-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 14px; }
html[dir="rtl"] .id-pill { padding: 2px 14px 2px 4px; }
.id-pill-l { font-size: 0.82rem; font-weight: 500; color: var(--text-m); }
.id-pill .star-num { width: 36px; height: 36px; }
.stage-sub { font-size: 0.85rem; color: var(--text-l); margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.learn-wrap > .learn-inner > .bar.big { margin-bottom: 18px; }

.learn-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); position: relative; box-shadow: var(--shadow); }
.session-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--mint); color: var(--mint-ink);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  padding: 12px 10px 12px 20px; min-height: 54px;
}
html[dir="rtl"] .session-bar { padding: 12px 20px 12px 10px; }
.stage-label { font-weight: 600; font-size: 0.98rem; }
.session-right { display: flex; align-items: center; gap: 6px; }
.timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.timer .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.card-menu-wrap { position: relative; }
.card-menu-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 50%; color: var(--mint-ink); cursor: pointer; transition: background 0.2s; }
.card-menu-btn .ic { stroke-width: 3; }
.card-menu-btn:hover, .card-menu-btn[aria-expanded="true"] { background: rgba(0,0,0,0.08); }
.card-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 50;
  min-width: 250px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 6px; animation: pop-in 0.2s ease; display: block;
}
.card-menu button { display: block; width: 100%; text-align: start; background: none; border: none; color: var(--text-m); padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 0.92rem; }
.card-menu button:hover { background: var(--card-3); color: var(--text); }
.card-menu button.danger:hover { color: var(--bad); background: var(--bad-bg); }

.learn-body { padding: 22px 24px 22px; min-height: 320px; background: #121514; border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
.chapter-progress { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; }
.pb-label { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; color: var(--text-m); margin-bottom: 9px; }
.pb-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* verse card (reading + questions) */
.verse-card { animation: fadeUp 0.35s ease both; }
.verse-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.verse-tools { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.icon-round {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-m); cursor: pointer; transition: all 0.2s; padding: 0;
}
.icon-round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-round:hover { background: var(--card-2); color: var(--text); }
.icon-round[aria-pressed="true"] { color: var(--green-ll); background: var(--green-glow); }
.icon-round.audio-btn { padding: 0; }
.icon-round .ab-ic { width: auto; height: auto; background: none; color: inherit; }
.icon-round .ab-ic svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.icon-round.audio-btn.playing { color: var(--green-ll); background: var(--green-glow); }
.icon-round.audio-btn.playing .ab-ic { animation: none; }
.icon-round.audio-btn.playing { animation: ring 1.2s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(127,214,191,0.5); } 100% { box-shadow: 0 0 0 12px rgba(127,214,191,0); } }

.tag { font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.tag-mint, .tag-gold { background: rgba(207,239,180,0.12); color: var(--mint); }
.tag-teal { background: var(--green-glow); color: var(--green-ll); }
.tag-rose { background: var(--bad-bg); color: var(--bad); }

.phrase-text {
  font-family: var(--quran); font-size: clamp(1.7rem, 4.4vw, 2.4rem); line-height: 2.3;
  color: var(--text); text-align: center; padding: 12px 4px 18px; overflow-wrap: anywhere;
  transition: filter 0.3s, opacity 0.3s;
}
.phrase-text.ltr-text { font-family: var(--font); font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.7; }
.verse-card .phrase-text { text-align: start; }
html[dir="ltr"] .verse-card .phrase-text:not(.ltr-text) { text-align: right; }
.verse-card.veiled .phrase-text { filter: blur(11px); opacity: 0.6; user-select: none; }
.read-mode { animation: fadeUp 0.4s ease both; }
.verse-tr { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.verse-tr p { font-size: 0.98rem; color: var(--text-m); line-height: 1.7; }

.audio-btn {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600;
  background: var(--card-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 16px 6px 6px; cursor: pointer; transition: all 0.2s;
}
html[dir="rtl"] .audio-btn:not(.icon-round) { padding: 6px 6px 6px 16px; }
.audio-btn .ab-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.audio-btn .ab-ic svg { width: 11px; height: 11px; fill: currentColor; }
.audio-btn:hover { background: var(--card-3); }
.audio-btn.playing .ab-ic { animation: ring 1.2s ease-out infinite; }

.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.nav-row .grow { flex: 1; }
.dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; flex: 1; min-width: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-3); border: none; cursor: pointer; padding: 0; transition: all 0.25s; }
.dot.seen { background: rgba(71,179,154,0.5); }
.dot.active { background: var(--green-ll); width: 22px; border-radius: 4px; }
.read-opts { display: flex; justify-content: center; margin-top: 14px; }
.kbd-hint { font-size: 0.78rem; color: var(--text-l); margin-top: 14px; }
.kbd-hint kbd { font-family: var(--font); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 6px; }

/* questions */
.q-instr { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 4px 0 2px; }
.blank {
  display: inline-block; min-width: 3em; height: 1.3em; vertical-align: middle; line-height: 1.3;
  border-bottom: 2px dashed rgba(207,239,180,0.6); margin: 0 0.1em; border-radius: 8px 8px 0 0;
  background: rgba(207,239,180,0.05); transition: all 0.25s; text-align: center; padding: 0 0.25em;
}
.blank.active { background: rgba(207,239,180,0.14); border-bottom: 2px solid var(--mint); box-shadow: 0 0 0 2px rgba(207,239,180,0.25); animation: blank-pulse 1.6s ease-in-out infinite; }
@keyframes blank-pulse { 50% { box-shadow: 0 0 0 4px rgba(207,239,180,0.18); } }
.blank.ok, .ans.ok { color: var(--ok); background: var(--ok-bg); border-bottom: 2px solid var(--ok); height: auto; animation: none; box-shadow: none; }
.blank.bad, .ans.bad { color: var(--bad); background: var(--bad-bg); border-bottom: 2px solid var(--bad); height: auto; animation: none; box-shadow: none; }
.ans.close { color: var(--sand); background: rgba(230,199,156,0.12); border-bottom: 2px solid var(--sand); }
.ans { display: inline-block; border-radius: 8px 8px 0 0; padding: 0 0.2em; margin: 0 0.1em; line-height: 1.6; }
.ans s { opacity: 0.7; font-size: 0.55em; display: block; line-height: 1.3; font-family: var(--font); }
.blank-input {
  display: inline-block; vertical-align: middle;
  font-family: var(--quran); font-size: 0.82em; color: var(--mint); text-align: center;
  background: rgba(207,239,180,0.08); border: none; border-bottom: 2px solid var(--mint);
  border-radius: 8px 8px 0 0; padding: 0 0.3em; margin: 0 0.1em; height: 1.6em; line-height: 1.6em;
  outline: none; transition: all 0.2s; max-width: 100%;
}
.blank-input:focus { background: rgba(207,239,180,0.16); box-shadow: 0 0 0 2px rgba(207,239,180,0.3); }
.ltr-text .blank-input { font-family: var(--font); }

.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.opt {
  position: relative; padding: 14px 14px; border-radius: var(--r); text-align: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  font-family: var(--quran); font-size: 1.45rem; line-height: 1.75; transition: all 0.18s; overflow-wrap: anywhere;
}
.opt.ltr-text { font-family: var(--font); font-size: 1.1rem; font-weight: 500; }
.opt:hover:not(:disabled) { background: var(--card-3); border-color: var(--line-2); transform: translateY(-2px); }
.opt:disabled { cursor: default; }
.opt.correct { border-color: var(--ok) !important; background: var(--ok-bg) !important; color: var(--ok); }
.opt.wrong { border-color: var(--bad) !important; background: var(--bad-bg) !important; color: var(--bad); animation: shake 0.4s; }
.opt.dim { opacity: 0.35; }
.opt-key { position: absolute; top: 8px; inset-inline-start: 10px; font-family: var(--font); font-size: 0.68rem; color: var(--text-l); background: var(--card); border-radius: 6px; padding: 0 6px; line-height: 1.7; }
.options.phrases { grid-template-columns: 1fr; }
.options.phrases .opt { font-size: 1.25rem; text-align: start; padding: 14px 18px 14px 44px; }
html[dir="rtl"] .options.phrases .opt { padding: 14px 44px 14px 18px; }

.full-prompt { text-align: center; padding: 10px 0 18px; }
.full-prompt .q-instr { margin-bottom: 14px; }
.full-prompt-ids { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.big-id { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; padding: 14px 22px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line); }
.big-id small { font-size: 0.82rem; font-weight: 500; color: var(--text-m); }
.big-id b { font-size: 2.8rem; line-height: 1.1; color: var(--green-ll); font-weight: 700; }
.big-id.gold b { color: var(--sand); }
.full-textarea {
  width: 100%; min-height: 130px; resize: vertical;
  font-family: var(--quran); font-size: 1.5rem; line-height: 2; color: var(--mint);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 18px;
  outline: none; transition: all 0.2s; margin-bottom: 14px;
}
.full-textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(207,239,180,0.12); }
.full-textarea.ltr-text { font-family: var(--font); font-size: 1.15rem; }

.q-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.q-actions .right { display: flex; gap: 10px; margin-inline-start: auto; flex-wrap: wrap; }
.feedback { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r); margin-bottom: 14px; animation: fadeUp 0.3s ease both; }
.feedback.ok { background: var(--ok-bg); color: var(--ok); }
.feedback.bad { background: var(--bad-bg); color: var(--bad); }
.feedback-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; flex-shrink: 0; background: currentColor; }
.feedback-ic { color: inherit; }
.feedback.ok .feedback-ic { background: var(--ok); color: #0A0C0B; }
.feedback.bad .feedback-ic { background: var(--bad); color: #0A0C0B; }
.feedback-t { font-weight: 600; font-size: 1rem; }
.feedback-s { font-size: 0.86rem; color: var(--text-m); }
.correct-phrase { font-family: var(--quran); font-size: 1.4rem; line-height: 2.1; text-align: center; padding: 12px; border-radius: var(--r); background: var(--card-2); margin-bottom: 14px; overflow-wrap: anywhere; }
.correct-phrase .miss { color: var(--bad); border-bottom: 2px solid var(--bad); }
.correct-phrase .hit { color: var(--ok); }
.correct-phrase .near { color: var(--sand); border-bottom: 2px dotted var(--sand); }
.your-answer { font-size: 0.86rem; color: var(--text-l); text-align: center; margin: -6px 0 14px; overflow-wrap: anywhere; }

/* interstitials (level intro, review, completion) */
.inter { text-align: center; padding: 18px 6px 6px; animation: fadeUp 0.45s ease both; }
.inter-badge {
  width: 104px; height: 104px; margin: 0 auto 18px; position: relative;
  display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--green-l);
}
.inter-badge::before, .inter-badge::after {
  content: ''; position: absolute; inset: 15px; border: 2px solid currentColor; border-radius: 10px;
  background: rgba(71,179,154,0.08);
}
.inter-badge::after { transform: rotate(45deg); }
.inter-badge b { position: relative; z-index: 1; font-size: 2.2rem; font-weight: 700; color: var(--text); line-height: 1; }
.inter-badge small { position: relative; z-index: 1; font-size: 0.68rem; color: var(--text-m); }
.inter-badge.rose { color: var(--bad); }
.inter-badge.rose::before, .inter-badge.rose::after { background: var(--bad-bg); }
.inter h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.inter h3 em { font-style: normal; color: var(--green-ll); }
.inter p { color: var(--text-m); line-height: 1.7; max-width: 520px; margin: 0 auto 6px; }
.inter-meter { display: flex; justify-content: center; gap: 6px; margin: 20px auto 24px; flex-wrap: wrap; max-width: 420px; }
.inter-meter span { flex: 1; min-width: 14px; max-width: 48px; height: 7px; border-radius: 4px; background: var(--card-3); }
.inter-meter span.on { background: var(--green-l); }
.inter-meter span.cur { background: var(--mint); }
.inter-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 22px; }
.inter-list span { font-size: 0.85rem; padding: 3px 12px; border-radius: 999px; color: var(--bad); background: var(--bad-bg); }
.inter .btn-fill { margin-top: 4px; min-width: 220px; }
.inter .btn-fill:not(.gold) { background: #fff; color: #0A0C0B; }
.inter .btn-fill:not(.gold):hover { background: var(--mint); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px auto 24px; max-width: 460px; }
.stats-row > div { background: var(--card-2); border-radius: var(--r); padding: 12px 8px; }
.stats-row b { display: block; font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.stats-row small { font-size: 0.78rem; color: var(--text-m); }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* celebration overlay */
.fw-canvas { position: fixed; inset: 0; z-index: 2500; pointer-events: none; }
.celebrate { position: fixed; inset: 0; z-index: 2400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.35s ease; }
.celebrate-card {
  text-align: center; max-width: 480px; width: 100%; padding: 36px 26px 28px; border-radius: 28px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(47,156,128,0.45), transparent 65%), linear-gradient(180deg, #0F3A30, #0D1110 70%);
  border: 1px solid rgba(127,214,191,0.2); box-shadow: 0 40px 120px rgba(0,0,0,0.7);
  position: relative; z-index: 2600; animation: celebrate-pop 0.6s cubic-bezier(0.2,1.4,0.4,1) both;
}
@keyframes celebrate-pop { from { opacity: 0; transform: scale(0.75) translateY(30px); } to { opacity: 1; transform: none; } }
.celebrate-ar { font-family: var(--quran); font-size: 3rem; color: var(--mint); line-height: 1.6; }
.celebrate h2 { font-size: 1.9rem; font-weight: 700; margin: 2px 0 8px; }
.celebrate p { color: var(--text-m); line-height: 1.7; }
.celebrate .stats-row > div { background: rgba(255,255,255,0.06); }
.celebrate .btn-fill { width: 100%; }
.celebrate .countdown { font-size: 0.85rem; color: var(--text-l); margin-top: 12px; }

/* toast */
.toast-wrap { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 460px; }
.toast { background: var(--card-3); border: 1px solid var(--line-2); color: var(--text); padding: 11px 18px; border-radius: 999px; font-size: 0.92rem; box-shadow: var(--shadow); animation: toast-in 0.3s ease both; pointer-events: auto; text-align: center; }
.toast.ok { background: var(--mint); color: var(--mint-ink); border-color: transparent; font-weight: 600; }
.toast.bad { background: #3a1b15; color: #ffb8a8; border-color: rgba(239,122,99,0.35); }
.toast.out { animation: toast-out 0.3s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(14px); } }

/* ==============================
   FOOTER
============================== */
.footer-slim { background: var(--bg-2); padding: 22px max(20px, calc((100vw - 1180px) / 2)); position: relative; z-index: 1; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
.footer-copy { font-size: 0.82rem; color: var(--text-l); }
.footer-verse { font-family: var(--quran); font-size: 1.05rem; color: var(--green-l); opacity: 0.55; direction: rtl; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: 0.82rem; color: var(--text-l); text-decoration: none; }
.footer-links a:hover { color: var(--text); }

/* ==============================
   ADMIN
============================== */
.admin-wrap { padding: 24px 24px 70px; }
.admin-inner { max-width: 1180px; margin: 0 auto; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.s-label { display: inline-flex; font-size: 0.82rem; font-weight: 600; color: var(--green-ll); background: var(--green-glow); padding: 3px 12px; border-radius: 999px; margin-bottom: 10px; }
.s-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.15; margin-bottom: 6px; }
.s-title em { font-style: normal; color: var(--green-ll); }
.s-sub { font-size: 0.98rem; color: var(--text-m); max-width: 640px; line-height: 1.7; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-m); text-decoration: none; font-size: 0.92rem; padding: 6px 12px 6px 6px; border-radius: 999px; }
.back-link:hover { color: var(--text); background: var(--card-2); }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-bottom: 18px; position: relative; }
.panel-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.panel-num { width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); font-size: 0.9rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.panel-sub { font-size: 0.92rem; color: var(--text-m); margin-bottom: 18px; line-height: 1.6; }
.alert { border-radius: var(--r); padding: 12px 16px; font-size: 0.92rem; margin-bottom: 14px; line-height: 1.6; }
.alert.warn { background: rgba(230,199,156,0.1); color: var(--sand); }
.alert.err { background: var(--bad-bg); color: #f6a796; }
.alert.info { background: var(--green-glow); color: var(--green-ll); }
.alert code, .panel code { font-size: 0.82rem; background: rgba(0,0,0,0.35); padding: 1px 6px; border-radius: 5px; color: var(--text); word-break: break-all; font-family: ui-monospace, Menlo, monospace; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th { text-align: start; font-size: 0.78rem; font-weight: 600; color: var(--text-l); padding: 12px 14px; background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text-m); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,0.015); }
.table .t-name { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.table .t-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.mini-btn { font-size: 0.85rem; font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-m); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; white-space: nowrap; }
.mini-btn:hover { color: var(--text); background: var(--card-2); }
.mini-btn.gold { background: var(--mint); color: var(--mint-ink); border-color: transparent; font-weight: 600; }
.mini-btn.gold:hover { background: #ddf6c9; }
.mini-btn.danger:hover { color: var(--bad); border-color: rgba(239,122,99,0.4); background: var(--bad-bg); }
.mini-btn.active { color: #fff; background: var(--green); border-color: var(--green); }
.mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.status-yes { color: var(--ok); }
.status-no { color: var(--text-l); }
.status-part { color: var(--sand); }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.map-field .form-label { display: flex; justify-content: space-between; gap: 8px; }
.map-field .form-label small { color: var(--text-l); font-weight: 400; }
.map-field .form-input { font-family: ui-monospace, Menlo, monospace; font-size: 0.88rem; padding: 10px 14px; }
.map-sep { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 600; color: var(--green-ll); margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.dropzone {
  display: block; width: 100%;
  border: 1.5px dashed rgba(127,214,191,0.35); border-radius: var(--r-lg); padding: 32px 20px; text-align: center; cursor: pointer;
  background: rgba(46,140,118,0.06); transition: all 0.2s; position: relative;
}
.dropzone:hover, .dropzone.drag { border-color: var(--green-ll); background: rgba(46,140,118,0.13); }
.dropzone > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dz-icon { font-size: 1.8rem; font-weight: 700; color: var(--green-ll); line-height: 1.2; }
.dz-title { font-weight: 600; font-size: 1.05rem; margin: 6px 0 4px; }
.dz-sub { font-size: 0.86rem; color: var(--text-l); }
.dz-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.dz-actions .mini-btn { cursor: pointer; }
.dz-progress { max-width: 420px; margin: 16px auto 0; height: 8px; border-radius: 4px; background: var(--card-3); overflow: hidden; }
.pb-track { height: 8px; border-radius: 4px; background: var(--card-3); overflow: hidden; }
.pb-fill { height: 100%; width: 0; border-radius: inherit; background: var(--green-l); transition: width 0.6s; }
.import-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.9rem; color: var(--text-m); margin-bottom: 12px; }
.import-summary b { font-weight: 700; }
.detected { margin-top: 16px; font-size: 0.88rem; color: var(--text-m); }
.detected .keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.detected .keys code { cursor: pointer; transition: all 0.2s; border: 1px solid var(--line); }
.detected .keys code:hover { border-color: var(--green-l); color: var(--green-ll); }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--text-m); cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--green); }
.res-ok { color: var(--ok); }
.res-err { color: var(--bad); }
.res-warn { color: var(--sand); }
.sticky-bar { position: sticky; bottom: 14px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: rgba(29,33,32,0.95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow); flex-wrap: wrap; }
.dirty-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); margin-inline-end: 8px; }

/* timing editor */
.tm-player { display: flex; flex-direction: column; gap: 14px; }
.wave-wrap { position: relative; height: 130px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; }
.wave-wrap canvas { width: 100%; height: 100%; display: block; }
.wave-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; color: var(--text-l); text-align: center; padding: 10px; pointer-events: none; }
.transport { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--card-3); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.tp-btn svg { width: 16px; height: 16px; fill: currentColor; }
.tp-btn:hover { background: var(--green); }
#tp-play { background: #fff; color: #0A0C0B; }
.tp-time { font-family: ui-monospace, Menlo, monospace; font-size: 0.95rem; background: var(--bg); border: 1px solid var(--line); padding: 9px 14px; border-radius: 999px; min-width: 170px; text-align: center; }
.tp-sep { flex: 1; }
.tp-select { width: auto; padding: 8px 32px 8px 12px; font-size: 0.88rem; border-radius: 999px; }
.tools-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tools-row .form-input { width: 80px; padding: 7px 10px; font-size: 0.86rem; }
.tools-row label { font-size: 0.85rem; color: var(--text-m); display: inline-flex; align-items: center; gap: 6px; }
.tap-panel { background: rgba(207,239,180,0.07); border: 1px solid rgba(207,239,180,0.2); border-radius: var(--r); padding: 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tap-btn { width: 110px; height: 110px; border-radius: 50%; border: none; background: var(--mint); color: var(--mint-ink); font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform 0.1s; flex-shrink: 0; box-shadow: 0 10px 30px rgba(207,239,180,0.2); }
.tap-btn:active, .tap-btn.hit { transform: scale(0.92); }
.tap-info { flex: 1; min-width: 200px; font-size: 0.92rem; color: var(--text-m); line-height: 1.7; }
.tap-info b { color: var(--mint); font-size: 1.05rem; }
.tm-table td { padding: 8px 10px; }
.tm-table tr.sel td { background: var(--green-glow); }
.tm-table tr.playing td { background: rgba(207,239,180,0.08); }
.tm-n { font-weight: 700; color: var(--green-ll); }
.tm-text { font-family: var(--quran); font-size: 1.1rem; color: var(--text); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.9; }
.tm-time { width: 92px; font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; padding: 7px 8px; text-align: center; }
.tm-time.invalid { border-color: var(--bad); }
.tm-cell { display: flex; align-items: center; gap: 4px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text-m); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: all 0.2s; flex-shrink: 0; }
.icon-btn:hover { color: var(--text); background: var(--card-3); }
.icon-btn svg { width: 12px; height: 12px; fill: currentColor; }
.login-wrap { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; padding: 30px 20px 40px; background: radial-gradient(60% 50% at 50% 0%, rgba(47,156,128,0.18), transparent 70%); }

/* ==============================
   ANIMATIONS
============================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.anim { animation: fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 1000px) {
  .sheet-grid { grid-template-columns: 1fr; gap: 28px; }
  .sheet-side { position: static; }
  .ch-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --nav-h: 58px; }
  html { font-size: 15.5px; }
  .nav { padding: 0 14px; }
  .brand-sub { display: none; }
  .hero-card { padding: calc(var(--nav-h) + 14px) 20px 64px; min-height: 380px; }
  .hero-art { width: 62vw; opacity: 0.85; }
  .hero-content { max-width: 100%; }
  .hero-hi { font-size: 2.1rem; }
  .hero-current { font-size: 1.15rem; }
  .sheet { padding: 10px 16px 30px; border-radius: 26px 26px 0 0; }
  .week .day-dot { width: 34px; height: 34px; }
  .page-title { font-size: 1.7rem; }
  .ch-card { padding: 12px 14px; gap: 12px; }
  .ch-ring { width: 44px; height: 44px; }
  .ch-ar { font-size: 1.2rem; }

  /* app-like bottom tab bar */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(15,18,17,0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-l); text-decoration: none; font-size: 0.74rem; font-weight: 500; }
  .tab .ic { width: 24px; height: 24px; }
  .tab.active { color: var(--text); font-weight: 600; }
  .tab.active .ic { stroke-width: 2.2; }
  html[data-page="home"] body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
  html[data-page="home"] .toast-wrap { bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); }
  .settings-panel { top: auto; bottom: 0; inset-inline: 0; width: 100%; border-radius: 26px 26px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); animation: sheet-up 0.28s cubic-bezier(0.4,0,0.2,1); max-height: 85vh; overflow-y: auto; }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

  .learn-wrap { padding: 4px 12px 40px; }
  .learn-head { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 12px; }
  .learn-ar { text-align: start; }
  .stage-sub { width: 100%; margin-inline-start: 0; }
  .learn-body { padding: 18px 16px; min-height: 280px; }
  .session-bar { padding: 10px 6px 10px 16px; min-height: 50px; }
  html[dir="rtl"] .session-bar { padding: 10px 16px 10px 6px; }
  .options { gap: 8px; }
  .opt { font-size: 1.25rem; padding: 12px 10px; }
  .nav-row .btn-fill, .nav-row .btn-outline { padding: 11px 16px; }
  .q-actions { flex-direction: column-reverse; align-items: stretch; }
  .q-actions .right { width: 100%; }
  .q-actions .right > * { flex: 1; }
  .q-actions > .btn-ghost { align-self: center; }
  .form-card { padding: 28px 20px; }
  .admin-wrap { padding: 16px 12px 50px; }
  .panel { padding: 18px 14px; }
  .sticky-bar { border-radius: var(--r); }
  .tp-time { min-width: 0; flex: 1; }
  .tm-text { max-width: 160px; }
  .table th, .table td { padding: 10px 8px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .celebrate-ar { font-size: 2.5rem; }
}
@media (max-width: 400px) {
  .week { gap: 2px; }
  .week .day-dot { width: 32px; height: 32px; }
  .day-name { font-size: 0.7rem; }
  .options:not(.phrases) .opt { font-size: 1.12rem; }
  .big-id { min-width: 100px; }
  .big-id b { font-size: 2.3rem; }
  .stat-num { font-size: 1.7rem; }
}

/* round icon variant of the audio button (verse header) */
.icon-round.audio-btn { border: none; background: transparent; color: var(--text-m); }
.icon-round.audio-btn .ab-ic { width: auto; height: auto; background: none; color: inherit; }
.icon-round.audio-btn .ab-ic svg { width: 14px; height: 14px; }
.icon-round.audio-btn:hover { background: var(--card-2); color: var(--text); }
/* keyboard hints are useless on touch screens */
@media (pointer: coarse) { .kbd-hint, .nav-kbd { display: none !important; } }
@media (max-width: 760px) {
  .hero-art { width: 58vw; height: 78%; opacity: 0.55; }
}

/* navbar logo (assets/logo.png) */
.brand-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); transition: transform 0.3s; }
@media (max-width: 760px) { .brand-logo { width: 40px; height: 40px; } }

/* ==============================
   CIRCULAR NUMBER BADGES (replaces the 8-point star everywhere,
   same look as the chapter rings on the main menu)
============================== */
.star-num::after, .inter-badge::after { display: none; }
.star-num::before {
  inset: 2px; border-radius: 50%; border: 2.5px solid currentColor;
  background: radial-gradient(circle at 50% 35%, var(--card-3), var(--card-2) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.star-num.lg::before { inset: 2px; }
.star-num.sand::before { border-color: var(--sand); background: radial-gradient(circle at 50% 35%, rgba(230,199,156,0.18), rgba(230,199,156,0.05) 70%); }
.id-pill .star-num { width: 34px; height: 34px; color: var(--green-l); }
.id-pill .star-num.sand { color: var(--sand); }
.id-pill .star-num::before { inset: 1px; }
.hero-current .star-num::before { inset: 3px; border-color: var(--sand); background: var(--sand); }
.empty-icon .star-num::before { inset: 4px; }
.brand-star::before { inset: 3px; }
/* level / review / completion badge */
.inter-badge { width: 100px; height: 100px; }
.inter-badge::before {
  inset: 4px; border-radius: 50%; border: 3px solid currentColor;
  background: radial-gradient(circle at 50% 35%, rgba(71,179,154,0.16), rgba(71,179,154,0.04) 70%);
  box-shadow: 0 0 40px rgba(71,179,154,0.15);
}
.inter-badge.rose::before { background: radial-gradient(circle at 50% 35%, rgba(239,122,99,0.16), rgba(239,122,99,0.04) 70%); box-shadow: 0 0 40px rgba(239,122,99,0.12); }

/* =========================================================
   v3 — navigation, home quick cards, challenge, analytics
========================================================= */

/* desktop navigation links */
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 24px; background: rgba(23,26,25,0.65); border: 1px solid var(--line); border-radius: 999px; padding: 4px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; color: var(--text-m); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: all 0.2s; }
.nav-link .ic { width: 18px; height: 18px; }
.nav-link:hover { color: var(--text); background: var(--card-2); }
.nav-link.active { color: var(--mint-ink); background: var(--mint); font-weight: 600; }
.sp-note { display: block; font-size: 0.78rem; color: var(--text-l); margin-top: 8px; }

/* hero secondary links */
.hero-links { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.glass-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.92rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.2s; }
.glass-pill .ic { width: 18px; height: 18px; }
.glass-pill:hover { background: rgba(255,255,255,0.16); }

/* quick cards */
.quick-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin-bottom: 34px; }
.quick-card { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px; border-radius: var(--r-lg); text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 0.2s, border-color 0.2s, background 0.2s; }
.quick-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--card-2); }
.qc-continue { background: linear-gradient(135deg, #14503F 0%, #0F3A30 55%, #0D2A23 100%); border-color: rgba(127,214,191,0.2); }
.qc-continue:hover { background: linear-gradient(135deg, #17604c 0%, #114236 55%, #0f3029 100%); }
.qc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qc-kicker { font-size: 0.8rem; font-weight: 600; color: var(--green-ll); }
.qc-continue .qc-kicker { color: var(--mint); }
.qc-title { font-size: 1.12rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-sub { font-size: 0.84rem; color: var(--text-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-continue .qc-sub { color: rgba(242,244,243,0.75); }
.qc-go { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); flex-shrink: 0; transition: transform 0.2s, background 0.2s; }
.qc-continue .qc-go { background: #fff; color: #0A0C0B; }
.quick-card:hover .qc-go { transform: translateX(3px); }
html[dir="rtl"] .qc-go .ic { transform: scaleX(-1); }
html[dir="rtl"] .quick-card:hover .qc-go { transform: translateX(-3px); }
.qc-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green-glow); color: var(--green-ll); flex-shrink: 0; }
.qc-icon .ic { width: 22px; height: 22px; }
.qc-stats .qc-icon { background: rgba(230,199,156,0.12); color: var(--sand); }
.qc-ring { position: relative; width: 62px; height: 62px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.qc-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
html[dir="rtl"] .qc-ring svg { transform: rotate(-90deg) scaleY(-1); }
.qc-ring circle, .score-ring circle { fill: none; }
.qc-ring .r-bg { stroke: rgba(255,255,255,0.14); stroke-width: 5; }
.qc-ring .r-fg { stroke: var(--mint); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset 1s; }
.qc-ring b { position: relative; font-size: 0.92rem; font-weight: 700; }
.qc-spark { position: absolute; inset-inline-end: 14px; bottom: 10px; width: 92px; height: 34px; color: var(--text-l); opacity: 0.9; pointer-events: none; }
.qc-spark.good { color: var(--green-l); }
.qc-spark.bad { color: var(--bad); }
.qc-stats .qc-body { padding-inline-end: 96px; }

/* today */
.today-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 26px; }
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 600; margin-bottom: 10px; }
.today-date { font-size: 0.8rem; font-weight: 400; color: var(--text-l); text-transform: capitalize; }
.today-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.today-row > div { background: var(--card-2); border-radius: var(--r-s); padding: 10px 8px; text-align: center; }
.today-row b { display: block; font-size: 1.5rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.today-row small { font-size: 0.76rem; color: var(--text-m); }

/* chapter list header */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.list-head .page-title { margin-bottom: 0; display: flex; align-items: center; gap: 10px; }
.count-chip { font-size: 0.85rem; font-weight: 600; background: var(--card-2); color: var(--text-m); padding: 2px 10px; border-radius: 999px; }
.sort-select { appearance: none; -webkit-appearance: none; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); padding: 8px 34px 8px 14px; font-size: 0.88rem; cursor: pointer; outline: none; }
html[dir="rtl"] .sort-select { background-position: left 12px center; padding: 8px 14px 8px 34px; }
.sort-select option { background: var(--card); }

/* generic page (challenge picker, analytics) */
.page-wrap { max-width: 1180px; width: 100%; margin: 0 auto; padding: 18px 20px 50px; }
.page-hero { display: flex; align-items: center; gap: 16px; margin: 8px 0 22px; }
.page-hero-icon { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #14503F, #0D2A23); color: var(--mint); border: 1px solid rgba(127,214,191,0.2); }
.page-hero-icon .ic { width: 28px; height: 28px; }
.page-h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.15; }
.page-lead { color: var(--text-m); max-width: 680px; line-height: 1.6; margin-top: 2px; }
.kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--sand); margin-bottom: 2px; }
.kicker .ic { width: 16px; height: 16px; }

/* challenge setup */
.ch-setup { animation: fadeUp 0.4s ease both; }
.ch-setup-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.ch-setup-head .inter-badge { margin: 0; flex-shrink: 0; width: 92px; height: 92px; }
.ch-setup-head .inter-badge b { font-size: 1.5rem; }
.ch-setup-head h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.ch-setup-head p { color: var(--text-m); line-height: 1.6; }
.opt-group { margin-bottom: 18px; }
.opt-label { font-size: 0.85rem; font-weight: 600; color: var(--text-m); margin-bottom: 8px; }
.opt-note { display: block; font-size: 0.8rem; color: var(--text-l); margin-top: 8px; }
.seg.seg-2 { grid-template-columns: 1fr 1fr; }
.seg.seg-4 { grid-template-columns: repeat(4, 1fr); }
.seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.ch-setup .btn-white { margin-top: 4px; }
.ch-history { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.hist-row { display: grid; grid-template-columns: 70px 1fr 48px auto; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--text-m); padding: 5px 0; }
.hist-row b { color: var(--text); text-align: end; }
.hist-row small { color: var(--text-l); white-space: nowrap; }
.hist-bar { height: 6px; border-radius: 3px; background: var(--card-3); overflow: hidden; }
.hist-bar i { display: block; height: 100%; background: var(--green-l); border-radius: 3px; }
.options.nums { grid-template-columns: repeat(4, 1fr); }
.options.nums .opt { font-family: var(--font); font-size: 1.6rem; font-weight: 700; padding: 16px 8px; }
.answer-num { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 10px; color: var(--text-m); }
.answer-num b { font-size: 2.2rem; color: var(--sand); }

/* challenge results */
.results h3 { margin-top: 6px; }
.score-ring { position: relative; width: 150px; height: 150px; margin: 4px auto 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-ring .r-bg { stroke: var(--card-3); stroke-width: 9; }
.score-ring .r-fg { stroke: var(--mint); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); animation: ring-in 1.2s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes ring-in { from { stroke-dashoffset: 100; } }
.score-ring b { position: relative; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.score-ring small { position: relative; color: var(--text-m); font-size: 0.9rem; }
.new-best { display: inline-block; color: var(--mint-ink) !important; background: var(--mint); border-radius: 999px; padding: 3px 14px; font-weight: 600; }
.type-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -6px 0 20px; }
.type-grid > div { display: flex; gap: 8px; align-items: center; background: var(--card-2); border-radius: 999px; padding: 5px 12px; font-size: 0.84rem; color: var(--text-m); }
.type-grid b { color: var(--text); }
.missed-list { text-align: start; margin: 0 auto 22px; max-width: 620px; }
.missed-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card-2); border-radius: var(--r); margin-bottom: 8px; }
.missed-row .star-num { color: var(--bad); }
.missed-text { flex: 1; min-width: 0; font-family: var(--quran); font-size: 1.15rem; line-height: 1.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 0 auto; }
.result-actions .btn-white { grid-column: 1 / -1; }

/* analytics */
.range-tabs { margin-bottom: 20px; }
.verdict { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-lg); margin-bottom: 18px; background: linear-gradient(135deg, #14503F, #0D2A23 70%); border: 1px solid rgba(127,214,191,0.2); }
.verdict h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.verdict p { color: rgba(242,244,243,0.8); line-height: 1.6; margin-top: 4px; max-width: 760px; }
.verdict-ic { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; background: var(--mint); color: var(--mint-ink); }
.verdict.slower { background: linear-gradient(135deg, #4a2a20, #241512 70%); border-color: rgba(239,122,99,0.25); }
.verdict.slower .verdict-ic { background: var(--bad); color: #1a0d09; }
.verdict.steady { background: linear-gradient(135deg, #3d3424, #1e1a12 70%); border-color: rgba(230,199,156,0.2); }
.verdict.steady .verdict-ic { background: var(--sand); color: var(--sand-ink); }
.verdict.none { background: var(--card); border-color: var(--line); }
.verdict.none .verdict-ic { background: var(--card-3); color: var(--text-m); }
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.kpi-label { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-val { font-size: 1.9rem; font-weight: 700; line-height: 1.25; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-val small { font-size: 0.95rem; font-weight: 500; color: var(--text-m); }
.kpi-sub { font-size: 0.78rem; color: var(--text-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 12px; min-width: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card header { margin-bottom: 8px; }
.chart-card h2 { font-size: 1.1rem; font-weight: 700; }
.chart-card header p { font-size: 0.85rem; color: var(--text-l); }
.chart { position: relative; min-height: 220px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-svg .grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.chart-svg .axis { fill: var(--text-l); font-size: 11px; font-family: var(--font); }
.chart-svg .line { fill: none; stroke: var(--green-l); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .area { fill: rgba(71,179,154,0.1); }
.chart-svg .dot { fill: var(--green-l); stroke: var(--card); stroke-width: 2; }
.chart-svg .bar { fill: var(--green-l); }
.chart-svg .trend { stroke: var(--sand); stroke-width: 2; stroke-dasharray: 6 5; }
.chart-svg .cross { stroke: rgba(255,255,255,0.25); stroke-width: 1; }
.chart-svg .band { fill: rgba(255,255,255,0.03); }
.chart .tip { position: absolute; z-index: 5; pointer-events: none; background: var(--card-3); border: 1px solid var(--line-2); border-radius: 10px; padding: 7px 10px; font-size: 0.82rem; box-shadow: var(--shadow); white-space: nowrap; }
.chart .tip b { display: block; font-weight: 600; }
.chart .tip span { color: var(--text-m); }
.chart-empty { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 200px; color: var(--text-l); font-size: 0.92rem; padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--r); }
td.chart-empty { display: table-cell; min-height: 0; border: none; }
.table-card { margin-bottom: 14px; }
.t-link { text-decoration: none; }
.t-link:hover { color: var(--green-ll); }
.mini-bar { display: inline-block; width: 60px; height: 6px; background: var(--card-3); border-radius: 3px; vertical-align: middle; overflow: hidden; margin-inline-end: 6px; }
.mini-bar i { display: block; height: 100%; background: var(--green-l); border-radius: 3px; }
.data-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.data-card h2 { font-size: 1.2rem; font-weight: 700; }
.data-card p { color: var(--text-m); max-width: 620px; line-height: 1.6; }
.data-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.data-actions .btn-white { width: auto; }
.data-actions .ic { transform: rotate(90deg); }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .quick-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 26px; }
  .chart-grid { grid-template-columns: 1fr; }
  .nav-links { margin-inline-start: 12px; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero-links { display: none; }
  .page-wrap { padding: 12px 14px 40px; }
  .page-hero { gap: 12px; }
  .page-hero-icon { width: 48px; height: 48px; border-radius: 14px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-val { font-size: 1.6rem; }
  .verdict { padding: 18px; gap: 14px; align-items: flex-start; }
  .verdict-ic { width: 48px; height: 48px; font-size: 1.4rem; }
  .verdict h2 { font-size: 1.25rem; }
  .chart-card { padding: 16px 12px 10px; }
  .options.nums { grid-template-columns: repeat(2, 1fr); }
  .ch-setup-head { flex-direction: column; text-align: center; }
  .result-actions { grid-template-columns: 1fr; }
  .tab { font-size: 0.68rem; }
  .tab .ic { width: 22px; height: 22px; }
  html[data-page="challenge"] body:has(.page-wrap), html[data-page="stats"] body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
}
.result-actions .btn-fill { background: var(--green); color: #fff; }
.result-actions .btn-fill:hover { background: var(--green-l); }
.qc-stats .qc-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }