/* =========================================================================
   AI TAJWEED VOICE EVALUATION — Learn Quran Tajwid iOS redesign prototype
   Design system + components + screen layouts
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* App gradient (real iOS tokens: VERY_DARK_BLUE2 -> VERY_DARK_BLUE) */
  --bg-top:#04324a;
  --bg-bottom:#021b29;
  /* surfaces (aligned with backend web UI for cross-product consistency) */
  --navy:#021824;
  --surface:#063047;
  --surface-2:#0a3c57;
  --surface-3:#0e4a6b;
  --surface-card:#072f45;
  --border:#11567c;
  --border-soft:rgba(255,255,255,.09);
  --hairline:rgba(255,255,255,.07);

  /* ink */
  --ink:#eef5f9;
  --ink-soft:#aec4d2;
  --ink-faint:#92abb8; /* WCAG AA on card surfaces (>=4.8:1 on --surface-2) */
  --ink-on-accent:#ffffff;

  /* brand cyan (existing app accent) */
  --cyan:#1f9fce;
  --cyan-2:#33abe8;
  --cyan-deep:#0775a2;

  /* warm */
  --orange:#ff8a00;
  --gold:#e0b75f;

  /* AI signature gradient — gives the NEW feature a recognizable identity */
  --ai-1:#8a6bff;
  --ai-2:#21c7c7;
  --ai-3:#3aa0ff;
  --ai-grad:linear-gradient(120deg,#8a6bff 0%,#3aa0ff 52%,#21c7c7 100%);
  --ai-grad-soft:linear-gradient(120deg,rgba(138,107,255,.18),rgba(33,199,199,.16));
  --ai-glow:0 10px 34px -8px rgba(99,110,255,.55);

  /* evaluation semantics (from backend) */
  --correct:#43c98c;
  --jaliy:#f0635f;
  --khofiy:#eaa53e;
  --correct-bg:rgba(67,201,140,.16);
  --jaliy-bg:rgba(240,99,95,.20);
  --khofiy-bg:rgba(234,165,62,.16);

  /* radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* shadows */
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 8px 24px -8px rgba(0,0,0,.5);
  --sh-3:0 18px 48px -14px rgba(0,0,0,.65);

  /* type */
  --font:-apple-system,"Inter",BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-ar:"Amiri Quran","Scheherazade New",serif;

  --nav-h:52px;
  --ease:cubic-bezier(.32,.72,0,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 700px at 14% -8%, #163a52 0%, transparent 55%),
    radial-gradient(1000px 700px at 100% 0%, #2a2452 0%, transparent 50%),
    #0a141c;
  color:#e7eef3;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:var(--cyan-2); text-decoration:none; }
img{ max-width:100%; display:block; }

/* =========================================================================
   PRESENTATION CHROME (not part of the app)
   ========================================================================= */
.presenter{ height:100vh; display:flex; flex-direction:column; }
.presenter__bar{
  height:60px; flex:0 0 60px; display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(8,16,22,.6); backdrop-filter:blur(12px);
}
.presenter__brand{ display:flex; align-items:center; gap:12px; }
.presenter__logo{
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  font-size:22px; color:#fff; background:var(--ai-grad); box-shadow:var(--ai-glow);
}
.presenter__brand strong{ display:block; font-size:14px; letter-spacing:.2px; }
.presenter__brand small{ display:block; font-size:11px; color:var(--ink-faint); margin-top:1px; }
.presenter__controls{ display:flex; align-items:center; gap:12px; }
.pc-btn{
  font-size:12px; color:#cfe0ea; padding:8px 13px; border-radius:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition:.15s;
}
.pc-btn:hover{ background:rgba(255,255,255,.12); }
.pc-seg{ display:flex; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:3px; gap:2px; }
.pc-seg button{ font-size:12px; min-width:30px; padding:6px 8px; border-radius:7px; color:var(--ink-soft); transition:.15s; }
.pc-seg button.is-active{ background:var(--ai-grad); color:#fff; box-shadow:var(--sh-1); }

.stage{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:40px;
  padding:26px; position:relative;
}

/* Device frame */
.device{ position:relative; flex:0 0 auto; }
.device__frame{
  position:relative; width:390px; height:844px; border-radius:54px; overflow:hidden;
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  box-shadow:
    0 0 0 13px #0b0e13, 0 0 0 15px #23282f,
    var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.04);
}
.device__notch{
  position:absolute; top:0; left:0; right:0; height:50px; z-index:60; display:flex;
  align-items:flex-start; justify-content:center; pointer-events:none;
}
.device__island{
  margin-top:11px; width:118px; height:32px; background:#05080b; border-radius:20px;
}
.device__home{
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  width:134px; height:5px; border-radius:3px; background:rgba(255,255,255,.55); z-index:70; pointer-events:none;
}

/* status bar */
.statusbar{
  position:absolute; top:0; left:0; right:0; height:50px; z-index:55;
  display:flex; align-items:center; justify-content:space-between; padding:16px 30px 0;
  font-size:14px; font-weight:600; color:#fff; pointer-events:none;
}
.statusbar__icons{ display:flex; align-items:center; gap:6px; }
.sb-signal,.sb-wifi,.sb-batt{ display:inline-block; background:#fff; }
.sb-signal{ width:17px; height:11px; -webkit-mask:linear-gradient(#000,#000); border-radius:1px;
  background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 4px); }
.sb-wifi{ width:16px; height:11px; clip-path:polygon(50% 100%,0 38%,12% 26%,50% 60%,88% 26%,100% 38%); }
.sb-batt{ width:25px; height:12px; border-radius:3px; position:relative; background:transparent; box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.55); }
.sb-batt::before{ content:""; position:absolute; inset:2px; width:64%; background:#fff; border-radius:1px; }
.sb-batt::after{ content:""; position:absolute; right:-3px; top:3.5px; width:2px; height:5px; background:rgba(255,255,255,.55); border-radius:0 1px 1px 0; }

/* viewport where screens mount */
.viewport{
  position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column;
}
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; }
.screen.is-enter{ animation:screenIn .34s var(--ease) both; }
.screen.is-enter-back{ animation:screenInBack .34s var(--ease) both; }
@keyframes screenIn{ from{ transform:translateX(28px); opacity:0;} to{ transform:none; opacity:1;} }
@keyframes screenInBack{ from{ transform:translateX(-22px); opacity:0;} to{ transform:none; opacity:1;} }

/* caption panel */
.caption{
  width:300px; flex:0 0 300px; align-self:center; color:#cdd9e1;
}
.caption__kicker{ font-size:10.5px; letter-spacing:2.4px; color:var(--ai-2); font-weight:700; }
.caption__title{ font-size:21px; margin:8px 0 10px; color:#fff; line-height:1.25; }
.caption__body{ font-size:13.5px; line-height:1.62; color:#9fb3c0; margin:0; }
.caption__hint{ margin-top:16px; font-size:12px; line-height:1.55; color:#8aa1b0; padding:12px 14px;
  border-left:2px solid var(--ai-2); background:rgba(33,199,199,.06); border-radius:0 10px 10px 0; }
.caption__hint b{ color:#cfe7ec; }
@media (max-width:1180px){ .caption{ display:none; } }
@media (max-width:880px){ .presenter__brand small{ display:none; } .device__frame{ transform:scale(.86); transform-origin:center; } }

/* =========================================================================
   APP CHROME: navbar / scroll / content
   ========================================================================= */
.navbar{
  position:relative; z-index:30; flex:0 0 auto; padding:54px 12px 10px;
  display:flex; align-items:center; gap:6px; min-height:var(--nav-h);
  background:linear-gradient(180deg,rgba(2,24,36,.92),rgba(2,24,36,0));
}
.navbar--solid{ background:#022533; box-shadow:0 1px 0 rgba(255,255,255,.05); }
.nav-btn{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff; font-size:18px; transition:.15s; backdrop-filter:blur(6px);
}
.nav-btn:active{ transform:scale(.92); background:rgba(255,255,255,.2); }
.nav-title{ flex:1; text-align:center; font-size:16px; font-weight:700; color:#fff; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }
.nav-sub{ display:block; font-size:11px; font-weight:500; color:var(--ink-faint); margin-top:1px; }
.nav-spacer{ width:44px; flex:0 0 44px; }

.content{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:30px; }
.content::-webkit-scrollbar{ width:0; }
.pad{ padding:0 18px; }
.stack > * + *{ margin-top:12px; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15.5px; font-weight:700; padding:15px 20px; border-radius:var(--r-pill);
  width:100%; transition:transform .12s var(--ease), box-shadow .2s, opacity .2s; line-height:1;
}
.btn:active{ transform:scale(.975); }
.btn--ai{ background:var(--ai-grad); color:#fff; box-shadow:var(--ai-glow); }
.btn--primary{ background:var(--cyan-deep); color:#fff; box-shadow:0 10px 26px -10px rgba(7,117,162,.8); }
.btn--ghost{ background:rgba(255,255,255,.08); color:#dcebf4; color:#e6eff5; border:1px solid var(--border-soft); }
.btn--outline{ background:transparent; border:1.5px solid var(--ai-2); color:#bff0ef; box-shadow:none; }
.btn--danger-ghost{ background:transparent; border:1px solid rgba(240,99,95,.4); color:#f4928f; }
.btn--sm{ padding:11px 16px; font-size:13.5px; }
.btn--block + .btn--block{ margin-top:10px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn__ic{ font-size:18px; }

.linkbtn{ background:none; color:var(--ai-2); font-weight:700; font-size:14px; padding:11px 8px; min-height:44px; }
.iconbtn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:19px;
  background:rgba(255,255,255,.08); color:#dceaf2; transition:.15s; }
.iconbtn:active{ transform:scale(.9); }

/* =========================================================================
   GENERIC SURFACES
   ========================================================================= */
.card{ background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--r-md); }
.card--pad{ padding:16px; }
.section-head{ font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ink-faint); padding:18px 4px 9px; }
.hairline{ height:1px; background:var(--hairline); margin:0 0 0 54px; }

/* list rows (iOS grouped style) */
.rowgroup{ background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--r-md); overflow:hidden; }
.row{ display:flex; align-items:center; gap:14px; padding:15px 16px; min-height:56px; position:relative; transition:background .12s; }
.row:active{ background:rgba(255,255,255,.04); }
.row + .row{ border-top:1px solid var(--hairline); }
.row__icon{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center; font-size:17px; }
.row__num{ width:24px; flex:0 0 24px; text-align:center; font-weight:700; color:var(--ink-faint); font-size:15px; }
.row__main{ flex:1; min-width:0; }
.row__title{ font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.row__sub{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.row__chev{ color:var(--ink-faint); font-size:16px; flex:0 0 auto; }
.row__trail{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* =========================================================================
   BADGES / CHIPS / PILLS
   ========================================================================= */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.4px;
  padding:4px 8px; border-radius:7px; text-transform:uppercase; line-height:1; }
.badge--ai{ background:var(--ai-grad); color:#fff; box-shadow:0 4px 12px -4px rgba(99,110,255,.6); }
.badge--ai-soft{ background:var(--ai-grad-soft); color:#bcdcff; border:1px solid rgba(138,107,255,.3); }
.badge--new{ background:var(--orange); color:#3a1c00; }
.badge--trial{ background:rgba(67,201,140,.16); color:var(--correct); border:1px solid rgba(67,201,140,.35); }
.badge--lock{ background:rgba(255,255,255,.1); color:var(--ink-soft); }
.badge--pro{ background:linear-gradient(120deg,#e0b75f,#f0d28a); color:#3a2a00; }
.badge .spark{ font-size:11px; }

.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:7px 11px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.07); color:var(--ink-soft); border:1px solid var(--border-soft); }
.chip--ai{ background:var(--ai-grad-soft); color:#cfe3ff; border-color:rgba(138,107,255,.35); }

/* trial meter */
.trialbar{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-sm);
  background:var(--ai-grad-soft); border:1px solid rgba(138,107,255,.28); }
.trialbar__txt{ flex:1; font-size:12.5px; color:#d6e6f3; line-height:1.4; }
.trialbar__txt b{ color:#fff; }
.trialdots{ display:flex; gap:5px; }
.trialdots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); display:inline-block; }
.trialdots i.on{ background:var(--ai-2); box-shadow:0 0 8px rgba(33,199,199,.7); }

/* =========================================================================
   SEGMENTED MODE TOGGLE (AI vs Manual)
   ========================================================================= */
.modeseg{ display:flex; padding:4px; border-radius:var(--r-pill); background:rgba(255,255,255,.07);
  border:1px solid var(--border-soft); position:relative; }
.modeseg__opt{ flex:1; min-width:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:13.5px; font-weight:700; padding:10px 8px; border-radius:var(--r-pill); color:var(--ink-soft); transition:color .25s;
  text-align:center; line-height:1.2; }
.modeseg__opt .spark{ font-size:14px; }
.modeseg__thumb{ position:absolute; top:4px; bottom:4px; width:calc(50% - 4px); left:4px; border-radius:var(--r-pill);
  background:var(--surface-3); transition:transform .3s var(--ease); box-shadow:var(--sh-1); }
.modeseg[data-mode="ai"] .modeseg__thumb{ transform:translateX(0); background:var(--ai-grad); box-shadow:var(--ai-glow); }
.modeseg[data-mode="manual"] .modeseg__thumb{ transform:translateX(calc(100% + 0px)); background:var(--surface-3); }
.modeseg[data-mode="ai"] .modeseg__opt[data-opt="ai"]{ color:#fff; }
.modeseg[data-mode="manual"] .modeseg__opt[data-opt="manual"]{ color:#fff; }

/* iOS switch */
.switch{ width:50px; height:30px; border-radius:var(--r-pill); background:rgba(255,255,255,.18); position:relative; transition:.25s; flex:0 0 50px; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%; background:#fff; transition:.25s var(--ease); box-shadow:var(--sh-1); }
.switch.on{ background:var(--correct); }
.switch.on::after{ transform:translateX(20px); }
.switch.on--ai{ background:transparent; }
.switch.on.on--ai{ background:linear-gradient(120deg,var(--ai-1),var(--ai-2)); }

/* =========================================================================
   ARABIC AYAH DISPLAY + per-word coloring
   ========================================================================= */
.ayah{ font-family:var(--font-ar); direction:rtl; text-align:center; color:#fff; line-height:2.15;
  font-size:40px; letter-spacing:0; }
.ayah--sm{ font-size:30px; line-height:2; }
.ayah--lg{ font-size:46px; }
.ayah .w{ display:inline-block; padding:2px 8px; margin:2px 2px; border-radius:10px; transition:.15s; cursor:pointer; }
.ayah .w-correct{ color:#dff3ea; }
.ayah .w-jaliy{ background:var(--jaliy-bg); box-shadow:inset 0 0 0 1.6px var(--jaliy); color:#ffe2e1; }
.ayah .w-khofiy{ background:var(--khofiy-bg); box-shadow:inset 0 0 0 1.4px var(--khofiy); color:#ffeccb; }
.ayah .w-active{ outline:2px solid var(--gold); outline-offset:1px; }
.translit{ text-align:center; color:var(--ink-soft); font-size:14px; margin-top:14px; font-style:italic; letter-spacing:.3px; }
.wordnote{ margin:14px auto 0; max-width:300px; font-size:13px; text-align:center; color:#cfe0ea;
  background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px; padding:10px 14px; }
.wordnote .tag{ font-weight:800; }

/* =========================================================================
   RECORDING UI
   ========================================================================= */
.recstage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 18px; gap:0; }
.rec-toptag{ display:flex; align-items:center; gap:8px; }

/* waveform visualizer */
.waveform{ display:flex; align-items:center; justify-content:center; gap:4px; height:64px; margin:8px 0; }
.waveform i{ width:5px; height:12px; border-radius:3px; background:var(--ai-2); opacity:.85;
  animation:wave 1s ease-in-out infinite; }
.waveform i:nth-child(odd){ background:var(--ai-3); }
.waveform.is-idle i{ animation:none; height:8px; opacity:.3; }
@keyframes wave{ 0%,100%{ height:10px;} 50%{ height:48px;} }

/* mic button + countdown ring */
.micwrap{ position:relative; width:108px; height:108px; display:grid; place-items:center; margin:6px 0; }
.micring{ position:absolute; inset:0; transform:rotate(-90deg); }
.micring__bg{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:6; }
.micring__fg{ fill:none; stroke:url(#aiGrad); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:302; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear; }
.micbtn{ width:80px; height:80px; border-radius:50%; display:grid; place-items:center; font-size:32px; color:#fff;
  background:var(--ai-grad); box-shadow:var(--ai-glow); transition:.15s; position:relative; z-index:2; }
.micbtn:active{ transform:scale(.94); }
.micbtn.is-rec{ background:var(--jaliy); box-shadow:0 0 0 0 rgba(240,99,95,.5); animation:pulse 1.6s infinite; }
.micbtn.is-rec .micbtn__ic{ width:26px; height:26px; border-radius:7px; background:#fff; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(240,99,95,.45);} 70%{ box-shadow:0 0 0 22px rgba(240,99,95,0);} 100%{ box-shadow:0 0 0 0 rgba(240,99,95,0);} }
.rec-timer{ font-size:34px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.rec-timer small{ font-size:15px; color:var(--ink-faint); font-weight:600; }
.rec-hint{ font-size:13px; color:var(--ink-soft); text-align:center; margin-top:4px; max-width:240px; }
.rec-limitnote{ font-size:11.5px; color:var(--ink-faint); margin-top:3px; }

/* play row (review recorded audio) */
.audiobar{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--border-soft); }
.audiobar__play{ width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:grid; place-items:center;
  font-size:17px; background:var(--cyan-deep); color:#fff; }
.audiobar__play.alt{ background:rgba(255,255,255,.1); }
.audiobar__wave{ flex:1; height:30px; display:flex; align-items:center; gap:3px; overflow:hidden; }
.audiobar__wave i{ width:3px; border-radius:2px; background:rgba(255,255,255,.3); flex:0 0 3px; }
.audiobar__wave i.on{ background:var(--ai-2); }
.audiobar__time{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; flex:0 0 auto; }

/* legacy control buttons (manual mode footer) */
.ctrlbar{ display:flex; align-items:center; justify-content:center; gap:18px; padding:14px 0; }
.ctrl{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:22px;
  background:rgba(255,255,255,.1); color:#dceaf2; transition:.15s; }
.ctrl:active{ transform:scale(.92); }
.ctrl--rec{ background:var(--cyan-deep); }
.ctrl[disabled]{ opacity:.4; }
.thumbs{ display:flex; justify-content:center; gap:26px; }
.thumb{ width:66px; height:66px; border-radius:50%; display:grid; place-items:center; font-size:28px; transition:.15s; }
.thumb--up{ background:rgba(67,201,140,.16); color:var(--correct); border:1.5px solid rgba(67,201,140,.4); }
.thumb--down{ background:rgba(240,99,95,.14); color:var(--jaliy); border:1.5px solid rgba(240,99,95,.4); }
.thumb:active{ transform:scale(.9); }

/* page counter */
.pager{ display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 0 2px; }
.pager__nav{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#cfe0ea; }
.pager__count{ font-size:13px; font-weight:700; color:#fff; background:rgba(255,255,255,.1); padding:5px 12px; border-radius:var(--r-pill); }

/* =========================================================================
   BOTTOM SHEET / MODAL / SCRIM
   ========================================================================= */
.overlay-root{ position:absolute; inset:0; z-index:80; pointer-events:none; }
.scrim{ position:absolute; inset:0; background:rgba(2,10,16,.62); opacity:0; transition:opacity .3s; pointer-events:auto; backdrop-filter:blur(2px); }
.scrim.show{ opacity:1; }

.sheet{ position:absolute; left:0; right:0; bottom:0; background:#0a2b3e; border-radius:26px 26px 0 0;
  border-top:1px solid var(--border-soft); box-shadow:0 -20px 50px -12px rgba(0,0,0,.6);
  transform:translateY(110%); transition:transform .4s var(--ease); pointer-events:auto;
  max-height:88%; display:flex; flex-direction:column; padding-bottom:30px; }
.sheet.show{ transform:translateY(0); }
.sheet__grip{ width:38px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:11px auto 4px; flex:0 0 auto; }
.sheet__body{ padding:8px 20px 6px; overflow-y:auto; }
.sheet__title{ font-size:19px; font-weight:800; color:#fff; text-align:center; margin:6px 0 4px; }
.sheet__sub{ font-size:13.5px; color:var(--ink-soft); text-align:center; line-height:1.55; margin:0 auto 6px; max-width:300px; }
.sheet__foot{ padding:8px 20px 0; flex:0 0 auto; }

.modal{ position:absolute; top:50%; left:50%; transform:translate(-50%,-46%) scale(.95); opacity:0;
  width:300px; background:#0c2d40; border-radius:22px; border:1px solid var(--border-soft);
  box-shadow:var(--sh-3); pointer-events:auto; transition:.28s var(--ease); padding:24px 22px 20px; text-align:center; }
.modal.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.modal__icon{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; font-size:28px; }
.modal__title{ font-size:18px; font-weight:800; color:#fff; }
.modal__body{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:8px 0 18px; }

/* =========================================================================
   COACHMARK / TOOLTIP
   ========================================================================= */
.coach{ position:absolute; z-index:90; pointer-events:auto; }
.coach__bubble{ background:#fff; color:#0c2233; border-radius:14px; padding:13px 15px; max-width:240px;
  box-shadow:var(--sh-3); font-size:13px; line-height:1.5; position:relative; }
.coach__bubble strong{ display:block; font-size:13.5px; margin-bottom:3px; color:#0a1a26; }
.coach__bubble .badge{ margin-bottom:8px; }
.coach__arrow{ position:absolute; width:14px; height:14px; background:#fff; transform:rotate(45deg); }
.coach__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; }
.coach__dots{ display:flex; gap:5px; }
.coach__dots i{ width:6px; height:6px; border-radius:50%; background:#c4d2db; }
.coach__dots i.on{ background:var(--ai-1); width:16px; border-radius:3px; }
.coach__next{ font-weight:800; font-size:13px; color:var(--ai-1); }
.coach__spot{ position:absolute; border-radius:50%; box-shadow:0 0 0 9999px rgba(2,10,16,.74); transition:.3s; pointer-events:none; }

/* =========================================================================
   SCORES / VERDICT / PROGRESS RING
   ========================================================================= */
.verdict{ text-align:center; }
.verdict__ring{ position:relative; width:138px; height:138px; margin:0 auto; }
.verdict__ring svg{ transform:rotate(-90deg); }
.verdict__val{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.verdict__num{ font-size:42px; font-weight:900; line-height:1; color:#fff; }
.verdict__num small{ font-size:18px; font-weight:700; }
.verdict__lbl{ font-size:11px; color:var(--ink-faint); margin-top:3px; letter-spacing:.5px; text-transform:uppercase; }
.verdict__tag{ display:inline-block; font-size:14px; font-weight:800; padding:6px 16px; border-radius:var(--r-pill); margin-top:12px; }
.verdict__summary{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:12px auto 0; max-width:300px; text-align:center; }

.scorebar{ display:flex; gap:10px; }
.scorebox{ flex:1; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:13px 10px; text-align:center; }
.scorebox__num{ font-size:24px; font-weight:900; line-height:1; }
.scorebox__lbl{ font-size:11px; color:var(--ink-faint); margin-top:5px; font-weight:600; }
.scorebox__hint{ font-size:9.5px; color:var(--ink-faint); margin-top:1px; }

.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font-size:11.5px; color:var(--ink-soft); }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend i{ width:10px; height:10px; border-radius:3px; }

/* error lists (lahn jaliy / khofiy) */
.errsec{ margin-top:6px; }
.errsec__title{ font-size:13px; font-weight:800; display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.erritem{ display:flex; gap:11px; padding:13px 14px; border-radius:var(--r-md); background:var(--surface-2);
  border:1px solid var(--border-soft); margin-bottom:9px; }
.erritem__ar{ font-family:var(--font-ar); font-size:24px; color:#fff; direction:rtl; flex:0 0 auto; line-height:1.4; min-width:40px; text-align:center; }
.erritem__body{ flex:1; min-width:0; }
.erritem__top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:4px; }
.erritem__rule{ font-size:13px; font-weight:700; color:#fff; }
.erritem__swap{ font-size:12px; color:var(--ink-soft); }
.erritem__swap b{ color:#ffd9d8; }
.erritem__exp{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.sev{ font-size:9.5px; font-weight:800; padding:3px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.3px; }
.sev--minor{ background:rgba(234,165,62,.18); color:var(--khofiy); }
.sev--moderate{ background:rgba(240,99,95,.18); color:var(--jaliy); }
.sev--jaliy{ background:rgba(240,99,95,.2); color:#ffb3b1; }

.cleanbox{ text-align:center; padding:18px; border-radius:var(--r-md); background:var(--correct-bg);
  border:1px solid rgba(67,201,140,.3); color:#bdf0d6; font-size:14px; font-weight:600; }
.cleanbox .ic{ font-size:28px; display:block; margin-bottom:6px; }

/* disclaimer + LWT bridge */
.disclaimer{ display:flex; gap:11px; padding:14px; border-radius:var(--r-md); background:rgba(224,183,95,.08);
  border:1px solid rgba(224,183,95,.25); }
.disclaimer__ic{ flex:0 0 auto; font-size:18px; color:var(--gold); }
.disclaimer__txt{ font-size:12.5px; line-height:1.6; color:#d9cba9; }
.disclaimer__txt a{ color:#f0d28a; font-weight:800; text-decoration:underline; text-underline-offset:2px; }

.lwt-card{ border-radius:var(--r-lg); padding:18px; background:linear-gradient(135deg,#0e3a52,#10324f);
  border:1px solid rgba(224,183,95,.3); position:relative; overflow:hidden; }
.lwt-card::after{ content:"۞"; position:absolute; right:-10px; bottom:-26px; font-size:120px; color:rgba(224,183,95,.07); }
.lwt-card__k{ font-size:11px; letter-spacing:1.4px; color:var(--gold); font-weight:700; text-transform:uppercase; }
.lwt-card__t{ font-size:17px; font-weight:800; color:#fff; margin:6px 0 6px; }
.lwt-card__d{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; position:relative; z-index:2; }

.meta-foot{ font-size:11px; color:var(--ink-faint); text-align:center; line-height:1.6; }
.meta-foot code{ font-family:ui-monospace,monospace; color:#9fc7d8; }

/* metric strip */
.metricrow{ display:flex; gap:10px; }
.metric{ flex:1; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:13px; }
.metric__num{ font-size:20px; font-weight:900; color:#fff; }
.metric__lbl{ font-size:11px; color:var(--ink-faint); margin-top:3px; }

/* =========================================================================
   ONBOARDING
   ========================================================================= */
.onb{ flex:1; display:flex; flex-direction:column; position:relative; }
.onb__hero{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 28px; text-align:center; position:relative; }
.onb__art{ width:180px; height:180px; border-radius:40px; display:grid; place-items:center; margin-bottom:30px; position:relative; }
.onb__halo{ position:absolute; inset:-30px; border-radius:50%; background:radial-gradient(circle,rgba(99,110,255,.4),transparent 65%); filter:blur(8px); }
.onb__icon{ font-size:78px; position:relative; z-index:2; }
.onb__title{ font-size:26px; font-weight:900; color:#fff; line-height:1.18; margin:0 0 12px; letter-spacing:-.3px; }
.onb__title em{ font-style:normal; background:var(--ai-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.onb__body{ font-size:15px; color:var(--ink-soft); line-height:1.6; max-width:300px; margin:0 auto; }
.onb__foot{ padding:0 24px 30px; flex:0 0 auto; }
.onb__dots{ display:flex; justify-content:center; gap:7px; margin:18px 0 18px; }
.onb__dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); transition:.3s; }
.onb__dots i.on{ background:var(--ai-2); width:22px; border-radius:4px; }
.onb__skip{ position:absolute; top:50px; right:14px; z-index:5; font-size:13px; color:var(--ink-soft); padding:11px 14px; min-height:44px; }

.feat-list{ text-align:left; max-width:300px; margin:18px auto 0; }
.feat-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; list-style:none; }
.feat-list .fic{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:grid; place-items:center; font-size:18px; background:var(--ai-grad-soft); }
.feat-list .ft{ font-size:14.5px; font-weight:700; color:#fff; }
.feat-list .fd{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; line-height:1.45; }
.feat-list ul{ padding:0; margin:0; }

/* sample mini result inside onboarding */
.mini-demo{ background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:16px; margin-top:8px; box-shadow:var(--sh-2); }

/* =========================================================================
   PROCESSING / LOADING (AI thinking)
   ========================================================================= */
.proc{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; text-align:center; }
.proc__orb{ width:128px; height:128px; border-radius:50%; position:relative; display:grid; place-items:center; margin-bottom:26px; }
.proc__orb::before, .proc__orb::after{ content:""; position:absolute; inset:0; border-radius:50%;
  border:3px solid transparent; }
.proc__orb::before{ border-top-color:var(--ai-1); border-right-color:var(--ai-3); animation:spin 1.1s linear infinite; }
.proc__orb::after{ inset:14px; border-bottom-color:var(--ai-2); border-left-color:var(--ai-3); animation:spin 1.6s linear infinite reverse; }
.proc__core{ font-size:44px; animation:breathe 2.4s ease-in-out infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.85;} 50%{ transform:scale(1.12); opacity:1;} }
.proc__title{ font-size:20px; font-weight:800; color:#fff; }
.proc__step{ font-size:13.5px; color:var(--ink-soft); margin-top:8px; min-height:20px; transition:.3s; }
.proc__bar{ width:200px; height:6px; border-radius:3px; background:rgba(255,255,255,.12); margin:20px auto 0; overflow:hidden; }
.proc__bar i{ display:block; height:100%; width:30%; border-radius:3px; background:var(--ai-grad); animation:indet 1.4s ease-in-out infinite; }
@keyframes indet{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(380%);} }
.proc__note{ font-size:12px; color:var(--ink-faint); margin-top:24px; max-width:260px; line-height:1.55; }
.proc__leave{ margin-top:18px; }

/* eval chip (persistent) */
.evalchip[hidden]{ display:none !important; }
.evalchip{ position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:58;
  display:flex; align-items:center; gap:9px; padding:7px 14px 7px 11px; border-radius:var(--r-pill);
  background:rgba(10,40,58,.92); border:1px solid rgba(138,107,255,.4); box-shadow:var(--sh-2); backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:600; color:#dceaf2; animation:chipIn .4s var(--ease) both; cursor:pointer; }
@keyframes chipIn{ from{ transform:translate(-50%,-16px); opacity:0;} to{ transform:translate(-50%,0); opacity:1;} }
.evalchip__spin{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:var(--ai-2); animation:spin .8s linear infinite; }
.evalchip__count{ background:var(--ai-grad); color:#fff; font-size:11px; font-weight:800; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center; }
.evalchip.done{ border-color:rgba(67,201,140,.6); color:#bff0d6; animation:chipIn .4s var(--ease) both, chipReady 1.8s ease-in-out 2; }
.evalchip.done .evalchip__spin{ border:none; }
@keyframes chipReady{ 0%,100%{ box-shadow:0 0 0 0 rgba(67,201,140,.0); } 50%{ box-shadow:0 0 0 6px rgba(67,201,140,.18); } }

/* =========================================================================
   MY RESULT dashboard
   ========================================================================= */
.dash-hero{ display:flex; gap:14px; align-items:stretch; }
.dash-ring{ position:relative; width:120px; height:120px; flex:0 0 120px; }
.dash-ring svg{ transform:rotate(-90deg); }
.dash-ring__c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dash-ring__n{ font-size:24px; font-weight:900; color:#fff; line-height:1; }
.dash-ring__l{ font-size:10.5px; color:var(--ink-faint); margin-top:3px; text-align:center; }
.dash-stats{ flex:1; display:flex; flex-direction:column; gap:10px; }
.dash-stat{ flex:1; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:12px 14px; display:flex; flex-direction:column; justify-content:center; }
.dash-stat__n{ font-size:22px; font-weight:900; color:#fff; }
.dash-stat__l{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

.restable{ width:100%; border-collapse:collapse; }
.restable th{ font-size:10.5px; color:var(--ink-faint); font-weight:700; padding:10px 4px; text-align:center; text-transform:uppercase; letter-spacing:.3px; }
.restable th.l{ text-align:left; padding-left:14px; }
.restable td{ padding:11px 4px; border-top:1px solid var(--hairline); text-align:center; }
.restable td.l{ text-align:left; padding-left:14px; font-size:13.5px; color:var(--ink); font-weight:600; }
.scoredot{ width:42px; height:42px; border-radius:50%; display:inline-grid; place-items:center; font-size:13px; font-weight:800; color:#fff; }
.scoredot--zero{ background:#3a5566; color:#9fb6c4; }

/* history item cards */
.histcard{ background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:14px; }
.histcard__top{ display:flex; align-items:center; gap:10px; }
.histcard__score{ width:46px; height:46px; flex:0 0 46px; border-radius:13px; display:grid; place-items:center; font-size:17px; font-weight:900; color:#fff; }
.histcard__meta{ flex:1; min-width:0; }
.histcard__title{ font-size:14px; font-weight:700; color:#fff; }
.histcard__sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.histcard__ar{ font-family:var(--font-ar); font-size:20px; color:#cfe0ea; direction:rtl; text-align:right; margin-top:10px; line-height:1.7; }

/* =========================================================================
   PAYWALL
   ========================================================================= */
.pw-hero{ text-align:center; padding:10px 8px 4px; }
.pw-hero__ic{ width:84px; height:84px; border-radius:24px; display:grid; place-items:center; margin:0 auto 16px; font-size:40px; background:var(--ai-grad); box-shadow:var(--ai-glow); }
.pw-hero__t{ font-size:23px; font-weight:900; color:#fff; line-height:1.2; }
.pw-hero__t em{ font-style:normal; background:var(--ai-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pw-hero__d{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:10px auto 0; max-width:300px; }
.benefit{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; }
.benefit__ic{ width:32px; height:32px; flex:0 0 32px; border-radius:10px; display:grid; place-items:center; font-size:15px; background:var(--ai-grad-soft); color:#cfe3ff; }
.benefit__t{ font-size:14px; font-weight:700; color:#fff; }
.benefit__d{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; line-height:1.45; }
.plan{ border:1.5px solid var(--border); border-radius:var(--r-md); padding:14px 16px; display:flex; align-items:center; gap:12px; position:relative; }
.plan.sel{ border-color:var(--ai-2); background:var(--ai-grad-soft); }
.plan__radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex:0 0 22px; display:grid; place-items:center; }
.plan.sel .plan__radio{ border-color:var(--ai-2); }
.plan.sel .plan__radio::after{ content:""; width:12px; height:12px; border-radius:50%; background:var(--ai-2); }
.plan__main{ flex:1; }
.plan__t{ font-size:14.5px; font-weight:700; color:#fff; }
.plan__d{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
.plan__price{ text-align:right; }
.plan__price b{ font-size:16px; color:#fff; }
.plan__price small{ display:block; font-size:11px; color:var(--ink-faint); }
.plan__ribbon{ position:absolute; top:-9px; right:14px; font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:6px; background:var(--gold); color:#3a2a00; text-transform:uppercase; }

/* settings */
.setrow{ display:flex; align-items:center; gap:14px; padding:14px 16px; min-height:54px; }
.setrow + .setrow{ border-top:1px solid var(--hairline); }
.setrow__ic{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:grid; place-items:center; font-size:15px; background:rgba(255,255,255,.08); }
.setrow__main{ flex:1; }
.setrow__t{ font-size:14.5px; color:var(--ink); font-weight:500; }
.setrow__d{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; line-height:1.4; }
.setrow__val{ font-size:13px; color:var(--ink-faint); }

/* lang list */
.langrow{ display:flex; align-items:center; gap:14px; padding:15px 16px; }
.langrow + .langrow{ border-top:1px solid var(--hairline); }
.langrow__flag{ font-size:22px; width:30px; text-align:center; }
.langrow__main{ flex:1; }
.langrow__t{ font-size:15px; color:var(--ink); font-weight:600; }
.langrow__n{ font-size:12px; color:var(--ink-faint); }
.langrow__check{ color:var(--ai-2); font-size:18px; opacity:0; }
.langrow.sel .langrow__check{ opacity:1; }

/* toast */
.toast-root{ position:absolute; left:0; right:0; bottom:34px; z-index:95; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 24px; }
.toast{ background:rgba(12,40,56,.96); border:1px solid var(--border-soft); color:#eaf2f6; font-size:13px; font-weight:600;
  padding:12px 16px; border-radius:14px; box-shadow:var(--sh-2); display:flex; align-items:center; gap:9px; max-width:100%;
  animation:toastIn .3s var(--ease) both; backdrop-filter:blur(8px); }
.toast.out{ animation:toastOut .3s var(--ease) both; }
.toast__ic{ font-size:16px; }
@keyframes toastIn{ from{ transform:translateY(20px); opacity:0;} to{ transform:none; opacity:1;} }
@keyframes toastOut{ to{ transform:translateY(20px); opacity:0;} }

/* misc helpers */
.center{ text-align:center; }
.muted{ color:var(--ink-faint); }
.sp-8{ height:8px; } .sp-12{ height:12px; } .sp-16{ height:16px; } .sp-24{ height:24px; } .sp-32{ height:32px; }
.row-actions{ display:flex; gap:10px; }
.row-actions .btn{ flex:1; }
.fadein{ animation:fadein .4s ease both; }
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.divider-text{ display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:12px; margin:4px 0; }
.divider-text::before,.divider-text::after{ content:""; flex:1; height:1px; background:var(--hairline); }

/* =========================================================================
   RTL
   ========================================================================= */
[dir="rtl"] .row__num{ order:0; }
[dir="rtl"] .nav-btn--back{ transform:scaleX(-1); } /* only the directional chevron mirrors */
[dir="rtl"] .row__chev{ transform:scaleX(-1); }
[dir="rtl"] .onb__skip{ right:auto; left:14px; }
[dir="rtl"] .plan__ribbon{ right:auto; left:14px; }
[dir="rtl"] .hairline{ margin:0 54px 0 0; }
[dir="rtl"] .section-head{ text-align:right; }
[dir="rtl"] .disclaimer__txt, [dir="rtl"] .setrow__main, [dir="rtl"] .benefit__d{ text-align:right; }
[dir="rtl"] .restable th.l, [dir="rtl"] .restable td.l{ text-align:right; padding-left:4px; padding-right:14px; }
[dir="rtl"] .screen.is-enter{ animation:screenInRTL .34s var(--ease) both; }
@keyframes screenInRTL{ from{ transform:translateX(-28px); opacity:0;} to{ transform:none; opacity:1;} }

/* segmented-control thumb mirrors in RTL (first opt sits on the right) */
[dir="rtl"] .modeseg__thumb{ left:auto; right:4px; }
[dir="rtl"] .modeseg[data-mode="ai"] .modeseg__thumb{ transform:translateX(0); }
[dir="rtl"] .modeseg[data-mode="manual"] .modeseg__thumb{ transform:translateX(-100%); }

/* language-specific base font tweaks for Arabic UI text */
[dir="rtl"] .nav-title, [dir="rtl"] .row__title, [dir="rtl"] .onb__title{ letter-spacing:0; }