/* Cairo, self-hosted. Previously loaded from fonts.googleapis.com with display=swap,
   which meant the hero headline painted in the system fallback first and then reflowed
   when Cairo arrived — the fallback fits the headline in 2 lines, Cairo needs 3, so
   everything below jumped 49px. That was CLS 0.171 and the whole PageSpeed deficit.
   Self-hosted + preloaded, the font is there at first paint so there is no swap.
   Cairo is OFL-licensed, so redistribution is permitted. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/cairo-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/cairo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/cairo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ===== مجموع — design system v2 (modern edtech) ===== */
:root{
  --bg:#f4f6fa; --card:#ffffff; --ink:#0f1720; --muted:#5b6b7f; --line:#e7ecf3;
  --brand:#2f7bf7; --brand-d:#1f60d4; --brand-soft:#eaf1ff;
  --accent:#2f7bf7; --accent-d:#1f60d4; --accent-soft:#eaf1ff;
  --mark:#ffd43b;
  --green:#16a34a; --green-soft:#e7f6ee;
  --red:#e5484d; --red-soft:#fdeaea;
  --amber:#d98a1a; --amber-soft:#fbf1de;
  --track:#eaeef4;
  --shadow:0 14px 34px -18px rgba(23,43,77,.20); --shadow-sm:0 4px 14px -8px rgba(23,43,77,.14);
  --rad:18px; --radS:12px;
  --grad:linear-gradient(120deg,#2f7bf7,#4f97ff);
}
[data-theme="dark"]{
  --bg:#0b1017; --card:#141b26; --ink:#e6edf5; --muted:#8a99ad; --line:#232d3b;
  --brand:#4d94ff; --brand-d:#2f7bf7; --brand-soft:#132234;
  --accent:#4d94ff; --accent-d:#2f7bf7; --accent-soft:#132234;
  --mark:#e8b400;
  --green:#22c55e; --green-soft:#0f2a1b; --red:#f2555a; --red-soft:#2c1618; --amber:#e0a52a; --amber-soft:#2c2414;
  --track:#232d3b;
  --shadow:0 22px 50px -16px rgba(0,0,0,.62); --shadow-sm:0 6px 18px -8px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* ---- nav ---- */
.nav{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.nav-in{max-width:1040px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:21px}
.brand .logo{width:38px;height:38px;display:grid;place-items:center}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:-3px}
.nav-links{display:flex;gap:7px;margin-inline-start:auto}
.nav-links a{padding:7px 13px;border-radius:11px;font-weight:800;font-size:13.5px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);box-shadow:none;transition:.14s;white-space:nowrap}
.nav-links a:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-1px)}
.nav-links a.active{color:#fff;background:var(--brand);border-color:var(--brand)}
.nav-cta{background:var(--brand);color:#fff;padding:10px 20px;border-radius:12px;font-weight:800;font-size:14.5px;transition:.15s;box-shadow:0 8px 18px -10px rgba(47,123,247,.5)}
.nav-cta:hover{transform:translateY(-1px)}
.nav-cta:active{transform:translateY(0)}
.burger{display:none;color:var(--ink)}
.themebtn,.acctbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card);color:var(--muted);border:1.5px solid var(--line);flex:none;transition:.15s}
.themebtn:hover,.acctbtn:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-1px)}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:800;font-size:15.5px;padding:13px 28px;border-radius:13px;transition:.15s;box-shadow:0 8px 20px -10px rgba(47,123,247,.5)}
.btn:hover{transform:translateY(-1px);box-shadow:0 11px 24px -10px rgba(47,123,247,.55)}
.btn:active{transform:translateY(0);box-shadow:0 5px 14px -9px rgba(47,123,247,.5)}
.btn.ghost{background:var(--card);color:var(--brand);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);background:var(--brand-soft);box-shadow:none;transform:translateY(-1px)}
.btn.amber{background:var(--amber);box-shadow:0 8px 20px -10px rgba(217,138,26,.5)}
.btn.amber:hover{box-shadow:0 11px 24px -10px rgba(217,138,26,.55)}
.btn.amber:active{box-shadow:0 1px 0 0 #c97f06}

/* ---- hero ---- */
.hero{position:relative;text-align:center;padding:64px 0 36px}
.hero::before{content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:860px;height:540px;background:radial-gradient(closest-side,rgba(47,123,247,.34),transparent 70%),radial-gradient(closest-side,rgba(47,123,247,.26),transparent 70%),radial-gradient(closest-side,rgba(47,123,247,.28),transparent 70%);background-position:22% 32%,82% 22%,55% 78%;background-repeat:no-repeat;background-size:52% 62%,48% 54%,46% 52%;filter:blur(10px);z-index:-1;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);color:var(--brand);font-weight:800;font-size:13.5px;padding:8px 17px;border-radius:30px;margin-bottom:22px;box-shadow:var(--shadow-sm)}
.hero h1{font-size:46px;font-weight:900;line-height:1.18;letter-spacing:-1px}
.hero h1 .hl{background:linear-gradient(100deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:18.5px;max-width:600px;margin:18px auto 30px;line-height:1.75}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trust{margin-top:24px;color:var(--muted);font-size:14px;font-weight:700}

/* ---- sections ---- */
.section{padding:54px 0}
.section.alt{background:linear-gradient(180deg,transparent,rgba(47,123,247,.10) 34%,rgba(47,123,247,.08) 66%,transparent)}
.shead{text-align:center;max-width:640px;margin:0 auto 38px}
.shead h2{font-size:33px;font-weight:900;letter-spacing:-.5px}
.shead p{color:var(--muted);font-size:17px;margin-top:12px}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:var(--card);border:2px solid var(--line);border-radius:var(--rad);padding:28px 24px;box-shadow:var(--shadow-sm);transition:.16s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step .n{counter-increment:s;width:48px;height:48px;border-radius:14px;background:var(--grad);color:#fff;font-weight:900;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 8px 18px -6px rgba(47,123,247,.6)}
.step .n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:19px;margin-bottom:7px;font-weight:800}
.step p{color:var(--muted);font-size:15px}

/* ---- features ---- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:var(--card);border:2px solid var(--line);border-radius:var(--rad);padding:24px;box-shadow:var(--shadow-sm);transition:.16s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;margin-bottom:14px;box-shadow:0 8px 18px -6px rgba(20,50,110,.4)}
.features .feat .ic{background:linear-gradient(135deg,#2f7bf7,#4f97ff)}
.feat h3{font-size:17px;margin-bottom:6px;font-weight:800}
.feat p{color:var(--muted);font-size:14.5px}

/* ---- custom practice (filters) ---- */
.filtercard{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:22px 24px;box-shadow:var(--shadow-sm);margin:14px 0 8px}
.bank-browse-h{font-size:16px;font-weight:900;color:var(--ink);margin:30px 0 14px}
.filtercard h3{font-size:19px;font-weight:900;margin-bottom:3px}
.filtercard .fc-sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.fgroup{margin-bottom:14px}
.fgroup label{display:block;font-weight:800;font-size:13px;color:var(--muted);margin-bottom:8px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{padding:8px 15px;border-radius:30px;font-weight:800;font-size:13.5px;background:var(--bg);color:var(--muted);border:1.5px solid var(--line);transition:.13s}
.fchip:hover{border-color:var(--brand);color:var(--brand)}
.fchip.active{background:var(--brand-soft);color:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
/* A selected filter used the SAME solid --brand fill as the CTA, so the card showed
   four identical blue blobs and nothing said which one was the action. Selected chips
   now read as a tinted state; the button below is the only solid fill on the card. */
.fstart{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.fc-match{font-weight:700;font-size:13.5px;color:var(--muted);line-height:1.3}
.fc-match b{display:block;font-weight:900;font-size:22px;color:var(--ink);letter-spacing:-.5px}
/* 19px @900 clears the WCAG large-text bar, so white-on-brand (3:1 in dark mode,
   inherited from .btn) is compliant here rather than borderline. */
.fstart .fc-go{padding:17px 46px;font-size:19px;font-weight:900;border-radius:14px;
  box-shadow:0 12px 28px -8px rgba(47,123,247,.55)}
.fstart .fc-go:hover{box-shadow:0 16px 34px -8px rgba(47,123,247,.62)}
.fstart .fc-go[disabled]{opacity:.4;pointer-events:none;box-shadow:none}
.btn:disabled{opacity:.45;cursor:default;transform:none}

/* ---- study plan ---- */
.plan-hero{display:flex;align-items:center;gap:26px;background:var(--card);border:2px solid var(--line);border-radius:var(--rad);padding:24px;box-shadow:var(--shadow-sm);margin:6px 0 18px;flex-wrap:wrap}
.mring{position:relative;width:130px;height:130px;flex:0 0 auto}
.mring svg{width:100%;height:100%}
.mring circle{transition:stroke-dashoffset .9s ease}
.mring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mring-num b{font-size:26px;font-weight:900}
.mring-num span{font-size:12px;color:var(--muted);font-weight:700}
.pstats{display:flex;gap:10px;flex:1;min-width:260px;flex-wrap:wrap}
.pstat{flex:1;min-width:105px;background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center}
.pstat b{display:block;font-size:22px;font-weight:900}
.pstat span{font-size:12px;color:var(--muted);font-weight:700}
.plan-note{flex-basis:100%;color:var(--muted);font-size:13px;font-weight:600}
.plancard{background:var(--grad);color:#fff;border-radius:var(--rad);padding:26px;box-shadow:var(--shadow);margin-bottom:18px}
.plancard h3{font-size:20px;font-weight:900;margin-bottom:4px}
.plan-mix{opacity:.92;font-size:14.5px;margin-bottom:14px;font-weight:600}
.plancard .btn{background:#fff;color:var(--brand-d)}
.plancard .btn:hover{background:#eef4ff}
.plan-donez{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:11px;padding:10px 14px;font-weight:800;font-size:14px;margin-bottom:12px;display:inline-block}

/* ---- lessons (gamified) ---- */
.unit-tag{margin:30px 0 15px;font-weight:900;font-size:16.5px;color:var(--ink);display:flex;align-items:center;gap:11px}
.unit-tag::before{content:"";width:8px;height:24px;background:var(--grad);border-radius:5px}
.lessons{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.lcard{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);text-align:start;transition:.16s;display:flex;align-items:center;gap:16px;width:100%}
.lcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.lcard .ln{width:48px;height:48px;border-radius:15px;background:var(--grad);color:#fff;font-weight:900;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none;transition:.16s;box-shadow:0 7px 15px -5px rgba(47,123,247,.55)}
.lcard:hover .ln{transform:scale(1.06);box-shadow:0 10px 20px -5px rgba(47,123,247,.7)}
.lcard .lt{flex:1}.lcard .lt b{font-size:16.5px;font-weight:800;display:block;line-height:1.4}
.lcard .lt small{color:var(--muted);font-size:12.5px;font-weight:700}
.lcard .arr{color:var(--brand);font-size:22px;font-weight:800}

/* ---- tests ---- */
.tests{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tcard{background:var(--card);border:2px solid var(--line);border-radius:var(--rad);padding:26px;box-shadow:var(--shadow-sm);transition:.16s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tcard .tk{font-weight:800;font-size:12.5px;color:var(--accent-d);background:var(--accent-soft);display:inline-block;padding:5px 13px;border-radius:30px;margin-bottom:13px}
.tcard h3{font-size:20px;margin-bottom:7px;font-weight:800}
.tcard p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.tcard .meta{display:flex;gap:16px;color:var(--muted);font-size:13.5px;font-weight:800;margin-bottom:18px}

/* ---- page header ---- */
.phead{padding:46px 0 8px}
.phead h1{font-size:36px;font-weight:900;letter-spacing:-.5px}
.phead p{color:var(--muted);font-size:17px;margin-top:9px;max-width:660px}

/* ---- subject + lang + tabs ---- */
.subjbar{display:flex;gap:10px;margin:8px 0 20px;flex-wrap:wrap}
.subjtab{padding:11px 24px;border-radius:14px;font-weight:800;font-size:15.5px;background:var(--card);color:var(--muted);border:2px solid var(--line);transition:.15s}
.subjtab.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 0 0 var(--brand-d)}
.subjtab:hover:not(.active){border-color:var(--brand);color:var(--brand)}
.langbar{display:flex;gap:3px;background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:3px}
.langtab{padding:6px 12px;border-radius:8px;font-weight:800;font-size:13px;color:var(--muted)}
.langtab.active{background:var(--brand);color:#fff}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;background:rgba(20,18,50,.55);backdrop-filter:blur(4px);display:none;place-items:center;z-index:60;padding:18px}
.overlay.show{display:grid}
.modal{background:var(--card);border-radius:24px;padding:30px;max-width:440px;width:100%;box-shadow:var(--shadow);border:2px solid var(--line)}
.modal h3{font-size:22px;margin-bottom:4px;font-weight:900}
.modal .msub{color:var(--muted);font-size:14px;margin-bottom:20px}
.diffs{display:flex;flex-direction:column;gap:11px}
.dchip{display:flex;align-items:center;gap:13px;border:2px solid var(--line);border-radius:15px;padding:14px 16px;font-weight:800;font-size:16px;background:var(--card);transition:.14s;text-align:start;width:100%}
.dchip:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.dchip .dot{width:13px;height:13px;border-radius:50%;flex:none}
.dchip .cnt{margin-inline-start:auto;color:var(--muted);font-weight:700;font-size:13px}
.modal .x{margin-top:16px;text-align:center;color:var(--muted);font-weight:800;font-size:14px;cursor:pointer}

/* ---- quiz ---- */
#screen{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.quizbox{max-width:780px;margin:0 auto;padding:18px 0 60px}
.qbar{position:sticky;top:0;z-index:20;background:var(--bg);padding:12px 0 9px;border-bottom:1.5px solid var(--line)}
.qbar-inner{padding:0 32px}
@media(max-width:640px){.qbar-inner{padding:0 16px}}
.qbar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.qexit{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:800;font-size:13.5px;border:1.5px solid var(--line);border-radius:10px;padding:6px 12px;transition:.14s}
.qexit:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.qtimer{font-weight:800;font-variant-numeric:tabular-nums;color:var(--brand);background:var(--brand-soft);padding:7px 15px;border-radius:30px;font-size:14px}
.progress{height:11px;background:var(--track);border-radius:30px;overflow:hidden;margin:5px 0}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));width:0;transition:width .35s;border-radius:30px}
.qmeta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:800;margin:9px 0 0}
.qcard{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.qtags{display:flex;align-items:center;gap:8px;margin-bottom:15px;flex-wrap:wrap}
.qtag{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:12.5px;padding:5px 13px;border-radius:30px}
.qtag.dtag{color:#fff}
.qstem{font-size:21px;font-weight:800;line-height:1.7;margin-bottom:22px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line);border-radius:15px;padding:15px 17px;font-size:16.5px;font-weight:700;text-align:start;transition:.13s;width:100%;color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.opt .key{width:32px;height:32px;border-radius:10px;background:var(--bg);color:var(--muted);font-weight:900;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none;transition:.13s}
.opt.correct{border-color:var(--green);background:var(--green-soft)}.opt.correct .key{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:var(--red-soft)}.opt.wrong .key{background:var(--red);color:#fff}
.opt:disabled{cursor:default}
.opt.selected{border-color:var(--brand);background:var(--brand-soft)}
.opt.selected .key{background:var(--brand);color:#fff}
.explain{margin-top:18px;border-radius:15px;padding:17px 19px;display:none}
.explain.show{display:block}
.explain.ok{background:var(--green-soft);border:1.5px solid color-mix(in srgb,var(--green) 35%,transparent)}
.explain.no{background:var(--red-soft);border:1.5px solid color-mix(in srgb,var(--red) 35%,transparent)}
.explain .v{font-weight:900;margin-bottom:6px}
.explain.ok .v{color:var(--green)}.explain.no .v{color:var(--red)}
.explain p{font-size:15.5px;color:var(--ink);line-height:1.8;opacity:.9;white-space:pre-line}
.qfoot{margin-top:24px;text-align:start}

/* ---- results ---- */
.res{max-width:780px;margin:0 auto;padding:32px 0 60px}
.res-hero{background:var(--card);border:2px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow);text-align:center;margin-bottom:22px}
.gauge{position:relative;width:200px;height:200px;margin:4px auto 12px}
.gauge svg{transform:rotate(-90deg);display:block;width:100%;height:100%}
.gauge .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge .num b{font-size:50px;font-weight:900;line-height:1}
.gauge .num span{font-size:13px;color:var(--muted);font-weight:800}
.band{display:inline-block;font-weight:900;font-size:18px;padding:9px 22px;border-radius:30px;margin-top:6px;color:#fff}
.res-sub{color:var(--muted);margin-top:12px;font-size:15px;font-weight:600}
.breakdown,.review{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.breakdown h3,.review h3{font-size:19px;margin-bottom:4px;font-weight:900}
.breakdown .h-sub,.review .h-sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.topic{margin-bottom:19px}.topic:last-child{margin-bottom:0}
.topic .t-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.topic .t-name{font-weight:800;font-size:15.5px;display:flex;align-items:center;gap:8px}
.topic .t-pct{font-weight:900;font-variant-numeric:tabular-nums}
.topic .t-bar{height:13px;background:var(--track);border-radius:30px;overflow:hidden}
.topic .t-bar span{display:block;height:100%;border-radius:30px;width:0;transition:width .7s ease}
.tag-weak{font-size:11px;font-weight:900;color:#fff;background:var(--red);padding:2px 10px;border-radius:30px}
.res-cta{background:var(--grad);color:#fff;border-radius:26px;padding:32px;text-align:center;box-shadow:0 24px 50px -16px rgba(47,123,247,.6)}
.res-cta h3{font-size:22px;margin-bottom:8px;font-weight:900}.res-cta p{opacity:.92;margin-bottom:20px;font-size:15px}
.res-cta .btn{background:#fff;color:var(--brand);box-shadow:0 4px 0 0 rgba(0,0,0,.12)}
.res-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- review ---- */
.rev-filters{display:flex;gap:9px;margin-bottom:18px}
.rev-f{padding:8px 17px;border-radius:11px;font-weight:800;font-size:14px;background:var(--bg);color:var(--muted);border:1.5px solid var(--line)}
.rev-f.active{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft)}
.qgrid{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.qpill{width:36px;height:36px;border-radius:11px;font-weight:900;font-size:14px;color:#fff;line-height:1;display:flex;align-items:center;justify-content:center;transition:.13s}
.qpill.ok{background:var(--green)}.qpill.no{background:var(--red)}
.qpill:hover{transform:translateY(-2px)}
.qrev{border-top:1px solid var(--line);padding:22px 0}.qrev:last-child{padding-bottom:0}
.qrev-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.qnum{width:30px;height:30px;border-radius:10px;background:var(--bg);color:var(--ink);font-weight:900;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none}
.rev-badge{font-weight:900;font-size:12px;padding:3px 13px;border-radius:30px;color:#fff}
.rev-badge.ok{background:var(--green)}.rev-badge.no{background:var(--red)}
.qrev-lesson{color:var(--muted);font-size:13px;font-weight:800;margin-inline-start:auto}
.qrev-stem{font-size:17px;font-weight:800;line-height:1.7;margin-bottom:13px}
.qrev-opts{display:flex;flex-direction:column;gap:9px;margin-bottom:13px}
.rev-opt{display:flex;align-items:center;gap:11px;border:2px solid var(--line);border-radius:13px;padding:11px 14px;font-size:15px;font-weight:700}
.rev-opt .rev-txt{flex:1}
.rev-opt .rev-key{width:28px;height:28px;border-radius:9px;background:var(--bg);color:var(--muted);font-weight:900;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none}
.rev-opt.c{border-color:var(--green);background:var(--green-soft)}.rev-opt.c .rev-key{background:var(--green);color:#fff}
.rev-opt.w{border-color:var(--red);background:var(--red-soft)}.rev-opt.w .rev-key{background:var(--red);color:#fff}
.rev-mark{font-size:12px;font-weight:900;flex:none}
.rev-opt.c .rev-mark{color:var(--green)}.rev-opt.w .rev-mark{color:var(--red)}
.qrev-exp{background:var(--bg);border-radius:13px;padding:13px 16px;font-size:14.5px;color:var(--ink);line-height:1.8;opacity:.92;white-space:pre-line}
.qrev-exp b{opacity:1;font-weight:900}

/* ---- auth ---- */
.authwrap{min-height:74vh;display:grid;place-items:center;padding:40px 18px}
.authcard{background:var(--card);border:2px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:34px;max-width:430px;width:100%}
.authcard h1{font-size:25px;text-align:center;margin-bottom:5px;font-weight:900}
.authcard .auth-sub{text-align:center;color:var(--muted);font-size:14.5px;margin-bottom:24px}
.authtabs{display:flex;background:var(--bg);border-radius:14px;padding:5px;margin-bottom:22px}
.authtab{flex:1;padding:11px;border-radius:10px;font-weight:800;font-size:15px;color:var(--muted)}
.authtab.active{background:var(--card);color:var(--brand);box-shadow:var(--shadow-sm)}
.field{margin-bottom:15px}
.field label{display:block;font-weight:800;font-size:13.5px;margin-bottom:7px}
.field input{width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:13px;font-family:inherit;font-size:15.5px;background:var(--bg);color:var(--ink)}
/* emails are always LTR even on the RTL site */
input[type="email"]{direction:ltr;text-align:start}
.set-email{direction:ltr;unicode-bidi:isolate}
.field input:focus{outline:none;border-color:var(--brand)}
.auth-msg{font-size:13.5px;margin:4px 0 12px;min-height:18px;font-weight:700}
.auth-msg.err{color:var(--red)}.auth-msg.ok{color:var(--green)}
.authcard .btn{width:100%;text-align:center}
.auth-alt{text-align:center;color:var(--muted);font-size:13.5px;margin-top:16px}
.auth-forgot{text-align:center;margin-top:15px}
.linklike{background:none;border:none;color:var(--brand);font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;padding:4px 6px}
.linklike:hover{text-decoration:underline}

/* ---- footer ---- */
footer{background:var(--card);border-top:1px solid var(--line);margin-top:46px}
.foot-in{max-width:1040px;margin:0 auto;padding:32px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13.5px;font-weight:600}
.foot-in .brand{font-size:19px}
.foot-links{display:flex;gap:6px;flex-wrap:wrap}
.foot-links a{color:var(--muted);text-decoration:none;font-weight:700}
.foot-links a:hover{color:var(--brand)}

@media(max-width:760px){
  .nav-links{display:none;position:absolute;top:64px;right:0;left:0;background:var(--card);flex-direction:column;padding:10px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .burger{display:block}
  .hero{padding:44px 0 24px}.hero h1{font-size:32px}.hero p{font-size:16px}
  .steps,.features,.lessons,.tests{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .shead h2{font-size:25px}.qstem{font-size:19px}.gauge{width:170px;height:170px}.phead h1{font-size:28px}
  .nav-cta{display:none}.hero-mock{max-width:330px}
  .nav-in{gap:8px;padding:11px 14px}
  .brand{font-size:18px;gap:8px}.brand small{display:none}.brand .logo{width:33px;height:33px}
  .themebtn,.acctbtn{width:36px;height:36px;border-radius:10px}
  .langtab{padding:5px 9px;font-size:12px}
}

/* ---- hero mockup ---- */
.hero-mock{margin:42px auto 6px;max-width:380px;position:relative}
.mock-card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow);text-align:start;animation:float 4.5s ease-in-out infinite}
.mock-tags{display:flex;gap:8px;margin-bottom:6px}
.mock-q{font-weight:800;font-size:16px;margin:12px 0 14px;line-height:1.6}
.mock-opt{border:2px solid var(--line);border-radius:12px;padding:11px 14px;font-weight:700;font-size:14.5px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.mock-opt:last-child{margin-bottom:0}
.mock-opt.ok{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.mock-badge{position:absolute;background:var(--card);border:2px solid var(--line);border-radius:30px;padding:8px 14px;font-weight:900;font-size:13.5px;box-shadow:var(--shadow);display:flex;align-items:center;gap:6px;animation:float 4.5s ease-in-out infinite}
.mock-badge.b1{top:-16px;inset-inline-start:-10px;color:var(--accent-d);animation-delay:.7s}
.mock-badge.b2{bottom:-16px;inset-inline-end:-10px;color:var(--amber);animation-delay:1.3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- entrance motion ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

/* ---- answer feedback ---- */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
.opt.correct{animation:pop .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.opt.wrong{animation:shake .35s ease}

/* ---- stats chip + toast ---- */
.statschip{display:flex;gap:9px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:30px;padding:6px 13px;font-weight:900;font-size:13.5px;flex:none}
.statschip .st-streak{display:flex;align-items:center;gap:4px;color:var(--amber)}
.statschip .st-xp{display:flex;align-items:center;gap:4px;color:var(--brand)}
.mj-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:13px 22px;border-radius:30px;font-weight:800;font-size:15px;box-shadow:0 16px 44px rgba(0,0,0,.32);z-index:9998;display:flex;align-items:center;gap:8px;opacity:0;transition:.42s}
.mj-toast.in{transform:translate(-50%,0);opacity:1}

/* ---- «المعلّم» chat ---- */
.ai-panel{margin-top:15px;display:flex;flex-direction:column;gap:12px}
.ai-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--brand-soft);color:var(--brand);border:1.6px solid var(--brand);border-radius:12px;padding:10px 16px;font-weight:800;font-size:14.5px;transition:.14s}
.ai-btn:hover:not(:disabled){background:var(--brand);color:#fff}
.ai-btn:disabled{opacity:.65;cursor:default}
.ai-hint{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;color:var(--brand);font-weight:800;font-size:14px;opacity:.9}
.ai-thread{display:flex;flex-direction:column;gap:9px}
.ai-thread:empty{display:none}
.ai-msg{max-width:88%;padding:12px 15px;border-radius:14px;font-size:14.7px;line-height:1.8;white-space:normal;word-wrap:break-word}
.ai-msg.ai-m{align-self:flex-start;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);color:var(--ink);border-start-start-radius:5px}
.ai-msg.ai-u{align-self:flex-end;background:var(--brand);color:#fff;border-start-end-radius:5px}
.ai-who{display:block;font-weight:900;font-size:12px;color:var(--brand);margin-bottom:5px}
.ai-typing{display:inline-flex;gap:4px;align-items:center;padding:14px 16px}
.ai-typing span{width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:.5;animation:aiblink 1s infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes aiblink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-ask{display:flex;gap:8px;align-items:stretch}
.ai-input{flex:1;min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:11px 15px;font:inherit;font-size:14.5px;color:var(--ink);transition:.14s}
.ai-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ai-input::placeholder{color:var(--muted)}
.ai-send{flex:0 0 auto;background:var(--brand);color:#fff;border:none;border-radius:12px;padding:0 20px;font-weight:800;font-size:14.5px;transition:.14s}
.ai-send:hover{background:var(--brand-d)}
.ai-send:active{transform:translateY(1px)}

/* ---- secret challenge popup ---- */
.overlay.premium{background:rgba(20,10,45,.6)}
.overlay.premium .premium-card{position:relative;background:var(--card);border-radius:26px;padding:36px 28px 28px;max-width:400px;width:100%;text-align:center;box-shadow:0 34px 90px -20px rgba(30,86,214,.65);border:1.5px solid color-mix(in srgb,#1e56d6 42%,transparent);overflow:hidden;animation:popIn .42s cubic-bezier(.2,.9,.3,1.25)}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.premium-glow{position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:320px;height:220px;background:radial-gradient(closest-side,rgba(30,86,214,.4),transparent 70%);pointer-events:none}
.premium-icon{position:relative;width:74px;height:74px;border-radius:21px;margin:0 auto 16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1e56d6,#4f97ff);box-shadow:0 16px 34px -8px rgba(30,86,214,.75)}
.premium-tag{position:relative;display:inline-block;font-weight:900;font-size:11.5px;letter-spacing:1.5px;color:#1e56d6;background:rgba(30,86,214,.13);padding:5px 14px;border-radius:30px;margin-bottom:11px}
.overlay.premium h3{position:relative;font-size:25px;font-weight:900;margin-bottom:8px}
.overlay.premium p{position:relative;color:var(--muted);font-size:15.5px;margin-bottom:22px;line-height:1.75}
.overlay.premium .btn{position:relative;width:100%;background:linear-gradient(135deg,#1e56d6,#4f97ff);box-shadow:0 4px 0 0 #123f9e,0 16px 30px -10px rgba(30,86,214,.65)}
.overlay.premium .btn:hover{box-shadow:0 5px 0 0 #123f9e,0 20px 34px -10px rgba(30,86,214,.7)}
.overlay.premium .btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 #123f9e}
.overlay.premium .x{position:relative;margin-top:15px;color:var(--muted);font-weight:800;font-size:14px;cursor:pointer}
[data-theme="dark"] .premium-tag{background:rgba(47,123,247,.2)}

/* ---- exam mode ---- */
.qbar-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.qnav-toggle{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--muted);border:1.5px solid var(--line);border-radius:10px;padding:6px 13px;font-weight:800;font-size:13.5px}
.qnav-toggle:hover{border-color:var(--brand);color:var(--brand)}
.flagbtn{display:inline-flex;align-items:center;gap:6px;color:var(--muted);border:1.5px solid var(--line);border-radius:10px;padding:6px 12px;font-weight:800;font-size:13px;transition:.14s}
.flagbtn.on{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
.opt.exam,.opt.elimable{position:relative;padding-inline-end:46px}
.opt.exam.selected{border-color:var(--brand);background:var(--brand-soft)}
.opt.exam.selected .key{background:var(--brand);color:#fff}
.opt .opt-txt{flex:1}
.opt.eliminated .key,.opt.eliminated .opt-txt{opacity:.38;text-decoration:line-through}
.elimx{position:absolute;inset-inline-end:11px;top:50%;transform:translateY(-50%);width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:12px;font-weight:900;border:1.5px solid var(--line);background:var(--card);transition:.13s}
.elimx:hover{color:var(--red);border-color:var(--red)}
.opt.eliminated .elimx{color:#fff;background:var(--red);border-color:var(--red);opacity:1;text-decoration:none}
.opt:disabled .elimx{display:none}
.exam-foot{display:flex;gap:12px}.exam-foot .btn{flex:1}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* practice footer — compact, restrained (OnePrep-style), no chunky blue */
.practice-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:20px}
.practice-foot .btn{flex:none;font-size:15px;font-weight:800;padding:11px 28px;border-radius:12px;box-shadow:none}
.practice-foot .btn:hover{transform:none;box-shadow:none}
#skipBtn{background:transparent;color:var(--muted);border:1.5px solid var(--line);box-shadow:none}
#skipBtn:hover{color:var(--ink);border-color:var(--muted);background:transparent}
#confirmBtn,#nextBtn{background:var(--ink);color:var(--card);border:1.5px solid var(--ink)}
#confirmBtn:hover,#nextBtn:hover{opacity:.88;background:var(--ink)}
.navmodal{background:var(--card);border-radius:22px;padding:22px;max-width:440px;width:100%;box-shadow:var(--shadow);border:2px solid var(--line);max-height:86vh;overflow:auto}
.navhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.navhead b{font-size:18px;font-weight:900}
.navx{cursor:pointer;color:var(--muted);font-weight:900;font-size:15px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;border:1.4px solid var(--line)}
.navlegend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;font-size:12.5px;color:var(--muted);font-weight:700}
.navlegend span{display:inline-flex;align-items:center;gap:6px}
.navlegend .lg{width:14px;height:14px;border-radius:5px;border:1.5px solid var(--line);display:inline-block}
.navlegend .lg.a{background:var(--brand);border-color:var(--brand)}
.navlegend .lg.f{border-color:var(--amber);border-width:2px}
.navgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}
.navcell{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--line);background:var(--card);font-weight:800;font-size:14px;color:var(--ink);position:relative;transition:.12s}
.navcell.answered{background:var(--brand);color:#fff;border-color:var(--brand)}
.navcell.flagged{border-color:var(--amber);border-width:2px}
.navcell.flagged::after{content:"";position:absolute;top:3px;inset-inline-end:3px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.navcell.current{outline:3px solid var(--brand);outline-offset:1px}
.navsubmit{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.navcount{font-weight:800;font-size:14px;color:var(--muted)}
.navmodal.confirm{max-width:400px;text-align:center}
.navmodal.confirm b{font-size:20px;font-weight:900;display:block;margin-bottom:8px}
.navmodal.confirm p{color:var(--muted);font-size:15px;margin-bottom:20px;line-height:1.7}
.confirm-btns{display:flex;gap:10px}.confirm-btns .btn{flex:1}

/* ---- سؤال اليوم ---- */
.qotd{max-width:560px;margin:34px auto 0;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);text-align:start}
.qotd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.qotd-htxt{flex:1}
.qotd-tag{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:900;font-size:12.5px;margin-bottom:8px}
.qotd-head h3{font-size:18px;font-weight:800;line-height:1.55}
.qotd-badge{flex:none;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:12.5px;padding:5px 12px;border-radius:30px}
.qotd-sub{color:var(--muted);font-size:13.5px;margin:6px 0 4px;font-weight:600}
.qotd-opts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.qotd-opt{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-weight:700;font-size:15px;text-align:start;transition:.14s;width:100%;color:var(--ink)}
.qotd-opt.live:hover{border-color:var(--brand);background:var(--brand-soft)}
.qotd-opt .key{width:26px;height:26px;flex:none;border-radius:8px;background:var(--card);border:1.5px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:13px;color:var(--muted)}
.qotd-opt.correct{border-color:var(--green);background:var(--green-soft)}
.qotd-opt.correct .key{background:var(--green);color:#fff;border-color:var(--green)}
.qotd-opt.wrong{border-color:var(--red);background:var(--red-soft)}
.qotd-opt.wrong .key{background:var(--red);color:#fff;border-color:var(--red)}
.qotd-exp{margin-top:14px;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:13px 15px;font-size:14px;line-height:1.8;color:var(--ink)}
.qotd-exp b{color:var(--brand)}
.qotd-done{margin-top:12px;text-align:center;color:var(--green);font-weight:800;font-size:14px}

/* ---- XP price + badges ---- */
.ai-price{margin-inline-start:8px;background:var(--mark);color:#3a2a00;padding:1px 9px;border-radius:20px;font-size:11.5px;font-weight:900;border:1.5px solid var(--line)}
.ai-cost{font-size:12.5px;color:var(--muted);font-weight:700}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}
.badge{border:1.5px solid var(--line);border-radius:12px;padding:13px 8px 11px;text-align:center;background:var(--card);box-shadow:var(--shadow-sm)}
.badge .bic{width:38px;height:38px;margin:0 auto 7px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff}
.badge b{display:block;font-size:12.5px;font-weight:900;line-height:1.4}
.badge small{color:var(--muted);font-size:10.5px;font-weight:700}
.badge.locked{opacity:.5;box-shadow:none}
.badge.locked .bic{background:var(--track);color:var(--muted)}

/* ---- app shell (sidebar dashboard layout) ---- */
.app{display:flex;min-height:100vh;align-items:flex-start}
.sidebar{width:222px;flex:none;position:sticky;top:0;height:100vh;overflow:hidden;background:var(--card);border-inline-end:1px solid var(--line);padding:16px 11px;display:flex;flex-direction:column;gap:5px;z-index:40}
.sb-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;padding:6px 8px 12px;color:var(--ink)}
.sb-brand .logo{width:34px;height:34px;display:grid;place-items:center}
/* sidebar track selector (segmented pill, always on the dark sidebar) */
.sb-track{display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:3px;margin:0 2px 10px}
.sb-trk{flex:1;min-width:0;padding:7px 4px;border-radius:9px;font-family:inherit;font-weight:800;font-size:12.5px;color:#c6d5df;background:transparent;border:0;cursor:pointer;white-space:nowrap;transition:.13s}
.sb-trk:hover:not(.active){color:#fff;background:rgba(255,255,255,.05)}
.sb-trk.active{background:rgba(255,255,255,.16);color:#fff}
.sb-subject{margin-bottom:6px}
.sb-subject .subjtab{padding:8px 14px;font-size:13.5px;border-radius:10px}
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.sb-foot{flex:none;display:flex;flex-direction:column;gap:5px;padding-top:6px}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;font-weight:700;font-size:14.5px;color:var(--muted);transition:.13s}
.sb-nav a svg{width:19px;height:19px;flex:none}
.sb-nav a:hover{background:var(--brand-soft);color:var(--brand)}
.sb-nav a.active{background:var(--brand);color:#fff}
.sb-group{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:11px 12px 5px;opacity:.65}

.sb-spacer{flex:1;min-height:12px}
/* Support lives in the footer, styled like a nav row but outside the scrolling list —
   the list had no vertical headroom left and Support was being clipped by the footer. */
.sb-support{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:11px;font-weight:700;font-size:14.5px;color:var(--muted);transition:.13s}
.sb-support svg{width:19px;height:19px;flex:none}
.sb-support:hover{background:var(--brand-soft);color:var(--brand)}
.sb-upgrade{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:13.5px;border:1.5px solid var(--brand)}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .nav-in{display:flex;align-items:center;gap:11px;padding:11px 26px;max-width:none;margin:0}
.topbar-title{font-weight:900;font-size:19px;margin-inline-end:auto}
.topbar .langbar{display:none}
.sb-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px;margin-top:6px;border-top:1px solid var(--line)}
.sb-controls .statschip{display:flex}
.sb-controls .langtab.active{display:block}
@media(min-width:901px){.topbar{display:none}}
.sb-toggle{display:none;color:var(--ink);width:40px;height:40px;border-radius:11px;border:1.5px solid var(--line);place-items:center;background:var(--card)}
.app-content{padding:26px 30px;width:100%;max-width:1120px;margin:0 auto;flex:1}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(10,20,40,.4);z-index:39}
/* dashboard */
.dash-greet{font-size:30px;font-weight:900;letter-spacing:-.5px;margin-bottom:3px}
.dash-sub{color:var(--muted);font-size:15px;margin-bottom:22px}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:20px;background:var(--line);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.dcard{position:relative;overflow:hidden;background:var(--card);padding:24px 20px 30px}
.dcard .dl{position:relative;z-index:1;color:var(--muted);font-size:13px;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.dcard .dv{position:relative;z-index:1;font-size:29px;font-weight:900;line-height:1;display:flex;align-items:center;gap:7px}
.dcard-bg{position:absolute;bottom:-16px;inset-inline-end:-12px;width:88px;height:88px;color:var(--ink);opacity:.055;pointer-events:none;z-index:0}
.dcard-bg svg{width:100%;height:100%}
/* section header with a "view all" pill (OnePrep-style) */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0 14px}
.sec-head .dash-secT{margin:0}
.dash-secT .sec-ic{display:inline-flex;width:19px;height:19px;color:var(--muted)}
.dash-secT .sec-ic svg{width:100%;height:100%}
.dash-viewall{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:800;color:var(--muted);background:var(--card);white-space:nowrap;transition:.13s}
.dash-viewall:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)}
.dash-two{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin:20px 0 22px;align-items:start}
.dash-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)}
.dash-panel h3{font-size:17px;font-weight:900;margin-bottom:2px}
.dash-lvl{display:flex;align-items:center;gap:12px;margin-top:14px}
.dash-lvl-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--grad);color:#fff;flex:none}
.dash-lvl b{font-size:17px;font-weight:900;flex:1}
.dash-lvl small{color:var(--amber);font-weight:800;display:flex;align-items:center;gap:5px}
.dash-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qlink{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);transition:.15s}
.qlink:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand)}
.qlink .qic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--grad);margin-bottom:12px}
.qlink .qic svg{width:22px;height:22px}
.qlink b{display:block;font-size:16px;font-weight:800;margin-bottom:3px;color:var(--ink)}
.qlink small{color:var(--muted);font-size:13px}
.ask-panel{max-width:720px}.ask-panel .ai-thread{min-height:180px}
@media(max-width:900px){
  .sidebar{position:fixed;inset-inline-start:0;top:0;transform:translateX(-100%);box-shadow:var(--shadow);transition:transform .22s}
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)!important}
  .sb-toggle{display:grid}
  .sb-backdrop.show{display:block}
  .app-content{padding:20px 16px}
  .topbar .nav-in{padding:11px 16px}
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .dash-two{grid-template-columns:1fr}
  .dash-quick{grid-template-columns:1fr}
  .dash-greet{font-size:25px}
}

.savebtn{margin-inline-start:auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--muted);border:1.5px solid var(--line);background:var(--card);transition:.13s;flex:none}
.savebtn svg{width:18px;height:18px}
.savebtn:hover{color:var(--brand);border-color:var(--brand)}
.savebtn.on{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)}
.savebtn.on svg{fill:var(--brand)}
/* quiz chrome: directions button, info button group, question-info panel */
.qbar-grp{display:flex;align-items:center;gap:9px}
.qbar-btn{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:800;font-size:13.5px;border:1.5px solid var(--line);border-radius:10px;padding:6px 12px;background:transparent;transition:.14s}
.qbar-btn:hover{border-color:var(--brand);color:var(--brand)}
.qtag-actions{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.qtag-actions .savebtn{margin-inline-start:0}
.infomodal{max-width:460px;text-align:start}
.dir-text{color:var(--muted);font-size:15px;line-height:1.9}
.qi-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px;margin-bottom:22px}
.qi-cell .qi-k{color:var(--muted);font-size:12.5px;font-weight:700;margin-bottom:3px}
.qi-cell .qi-v{color:var(--ink);font-size:15.5px;font-weight:800}
.qi-perf-h{font-weight:900;font-size:15px;margin:4px 0 11px}
.qi-lock{border:1.5px solid var(--line);border-radius:16px;padding:22px 18px;text-align:center;color:var(--muted)}
.qi-lock>svg{color:var(--faint,var(--muted));margin-bottom:9px}
.qi-lock-h{font-weight:900;color:var(--ink);font-size:15.5px;margin-bottom:5px}
.qi-lock-b{font-size:13.5px;line-height:1.75;margin-bottom:15px}
.qi-upg{display:inline-block;font-size:14px;font-weight:800;padding:10px 24px;border-radius:11px;box-shadow:none;background:var(--ink);color:var(--card);border:none}
.qi-upg:hover{opacity:.9;transform:none;box-shadow:none}
/* persistent hint bar */
.hint-wrap{margin-top:14px}
.hint-open{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;border:1.5px dashed var(--line);border-radius:14px;padding:12px 14px;color:var(--brand);font-weight:800;font-size:14.5px;background:transparent;transition:.14s;cursor:pointer}
.hint-open:hover{background:var(--brand-soft);border-color:var(--brand)}
.hint-open .hint-sub{color:var(--muted);font-weight:600;font-size:13px}
.hint-zone{margin-top:12px}
.hint-panel{margin-top:0}
/* dashboard: gradient subject cards (OnePrep-style) */
.dash-secT{font-size:18px;font-weight:900;margin:24px 0 14px;display:flex;align-items:center;gap:9px}
.subjcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:6px}
.subjcard{position:relative;border-radius:22px;padding:22px 24px;color:#fff;overflow:hidden;text-decoration:none;display:block;box-shadow:0 12px 30px -16px rgba(20,30,60,.55);transition:transform .16s,box-shadow .16s}
.subjcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(20,30,60,.6)}
.subjcard::after{content:"";position:absolute;inset-inline-end:-38px;top:-38px;width:150px;height:150px;background:rgba(255,255,255,.13);border-radius:50%;z-index:0}
.subjcard>*{position:relative;z-index:1}
.subjcard h3{color:#fff;font-size:21px;font-weight:900;margin-bottom:9px}
.subjcard-prog{font-size:13px;font-weight:700;opacity:.95;margin-bottom:11px}
.subjcard-bar{height:8px;background:rgba(255,255,255,.32);border-radius:20px;overflow:hidden;margin-bottom:16px}
.subjcard-bar span{display:block;height:100%;background:#fff;border-radius:20px;transition:width .6s ease}
.subjcard-open{font-weight:800;font-size:14.5px}
.subjcard.g0{background:linear-gradient(135deg,#4f8bff,#2f6bf0)}
.subjcard.g1{background:linear-gradient(135deg,#d06bff,#e8579b)}
.subjcard.g2{background:linear-gradient(135deg,#1fbfa8,#12a0cc)}
.subjcard.g3{background:linear-gradient(135deg,#ffa24d,#ff6b5c)}
.subjcard.g4{background:linear-gradient(135deg,#8b6bff,#5d8bff)}
.subjcard.g5{background:linear-gradient(135deg,#2fce74,#12a37a)}
/* activity trend chart */
.trend-card{padding:26px 28px}
.trend-h{font-size:26px;font-weight:900;color:var(--ink);margin:0 0 8px}
.trend-sub{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:18px;max-width:760px}
.trend-legend{display:flex;gap:30px;align-items:center;margin-bottom:22px}
.trend-legend .tl{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px;font-weight:600}
.trend-legend .tl b{font-size:30px;font-weight:900;color:var(--ink);line-height:1}
.trend-legend .tl svg{flex:none}
.trend-plot{display:flex;height:240px}
.trend-yaxis{width:44px;flex:none;display:flex;flex-direction:column;justify-content:space-between;padding-right:10px;box-sizing:border-box}
.trend-yl{font-size:12px;color:var(--muted);font-weight:600;text-align:right;line-height:1;transform:translateY(-4px)}
.trend-yl:last-child{transform:none}
.trend-area{position:relative;flex:1;height:100%}
.trend-glines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.trend-gl{border-top:1px dashed var(--line)}
.trend-bars{position:absolute;inset:0;display:flex;align-items:flex-end}
.trend-col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
.trend-stack{width:46%;max-width:13px;min-width:4px;display:flex;flex-direction:column;border-radius:4px 4px 0 0;overflow:hidden}
.ts{width:100%}
/* trend skeleton — reserves the card's height so it doesn't jump in on load */
.trend-skel{pointer-events:none}
.tskel-line,.tskel-pill,.tskel-plot{background:linear-gradient(90deg,var(--line) 25%,var(--track) 40%,var(--line) 60%);background-size:400% 100%;animation:tskel 1.5s ease-in-out infinite;border-radius:9px}
@keyframes tskel{0%{background-position:100% 0}100%{background-position:0 0}}
.tskel-legend{display:flex;gap:30px;margin:16px 0 22px}
.tskel-pill{width:96px;height:30px;border-radius:999px}
.tskel-plot{height:270px;border-radius:14px}
.ts.ce{background:#8fe6a4}.ts.cm{background:#22d24a}.ts.ch{background:#0aa838}
.ts.we{background:#ff96a0}.ts.wm{background:#ff2f3f}.ts.wh{background:#d60a1e}
.trend-xaxis{display:flex;margin-top:9px}
.trend-xsp{width:44px;flex:none}
.trend-xrow{flex:1;display:flex}
.trend-xl{flex:1;text-align:center;font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:visible}
.trend-xl.xstart{text-align:left}
.trend-xl.xend{text-align:right}
@media(max-width:640px){.trend-card{padding:18px 14px}.trend-h{font-size:21px}.trend-legend .tl b{font-size:24px}.trend-plot{height:200px}}
.unsavex{width:27px;height:27px;border-radius:50%;flex:none;color:var(--muted);border:1.4px solid var(--line);font-weight:900;font-size:12px;background:var(--card);transition:.12s}
.unsavex:hover{color:var(--red);border-color:var(--red)}

/* dashboard hero — minimal & bold: no box, no color, big ink numbers */
.dhero{position:relative;padding:20px 4px 20px;margin:-4px 0 10px}
.dhero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap;margin-bottom:0}
.dhero-htext{flex:1 1 260px;min-width:0}
.dhero-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none;max-width:100%}
.cd-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 18px 14px;box-shadow:var(--shadow-sm);width:fit-content;max-width:100%}
.dhero-stats{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.dstat{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid transparent}
.dstat b{font-size:17px;font-weight:900;color:#fff;line-height:1}
.dstat-l{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.82)}
.dstat-ic{display:inline-flex;align-items:center;color:#fff}
.dstat-streak{background:linear-gradient(135deg,#ffa62e,#ff5f1f);box-shadow:0 7px 18px -8px rgba(255,95,31,.65)}
.dstat-xp{background:linear-gradient(135deg,#4d97ff,#6a5cff);box-shadow:0 7px 18px -8px rgba(77,110,255,.6)}
.dhero-greet{font-size:40px;font-weight:900;line-height:1.06;margin:0;letter-spacing:-1.2px;color:var(--ink)}
.dhero-greet span{color:var(--muted)}
.dhero-sub{margin:10px 0 0;font-size:15.5px;color:var(--muted);font-weight:500}
.dhero-lead{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:9px}
.cd-clock{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;width:fit-content;max-width:100%}
.cd-unit{display:flex;align-items:baseline;gap:5px}
.cd-v{font-size:33px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px;color:var(--ink)}
.cd-u{font-size:12.5px;font-weight:700;color:var(--muted)}
.dhero-cap{margin-top:11px;font-size:12px;font-weight:600;color:var(--muted)}
.dhero-passed{font-size:30px;font-weight:900;margin:4px 0;color:var(--ink)}
@media(max-width:640px){
  .fstart{flex-direction:column;align-items:stretch;gap:12px}
  .fstart .fc-go{width:100%;text-align:center;padding:16px 20px}
  .dhero{padding:12px 2px 16px}
  .dhero-head{gap:16px}
  .dhero-greet{font-size:28px}
  .dhero-sub{font-size:14px}
  .dhero-right{align-items:stretch;width:100%}
  .cd-box{width:auto}
  .dhero-stats{justify-content:flex-start}
  .cd-clock{gap:13px}
  .cd-v{font-size:28px;letter-spacing:-.5px}
  .cd-u{font-size:12px}
}
/* question rush */
.rush-start{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:38px 28px;box-shadow:var(--shadow-sm);max-width:480px;margin:16px auto}
.rush-ic{width:60px;height:60px;border-radius:17px;display:grid;place-items:center;background:var(--grad);color:#fff;margin:0 auto 16px;box-shadow:0 10px 22px -8px rgba(47,123,247,.6)}
.rush-ic svg{width:30px;height:30px}
.rush-start h2{font-size:26px;font-weight:900;margin-bottom:6px}
.rush-start p{color:var(--muted);margin-bottom:8px}
.rush-best{color:var(--brand);font-weight:800;margin:12px 0 18px;font-size:15px}
.rush-final{font-size:66px;font-weight:900;color:var(--brand);line-height:1;margin:8px 0}
.rush-xp{display:inline-block;background:var(--mark);color:#3a2a00;font-weight:900;padding:4px 15px;border-radius:20px;margin:4px 0 6px}
.rush-game{max-width:620px;margin:0 auto}
.rush-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.rush-timer{font-size:36px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.rush-score{font-size:19px;font-weight:900;background:var(--brand-soft);color:var(--brand);padding:6px 20px;border-radius:30px}

.rush-setup{max-width:640px;margin:0 auto}
/* ---- wide screens: stop laying these out like a phone column ----
   Both blocks are generated in one place each (renderRushPage / fcRender), so the
   nth-child spans below track that markup order. Keep them in sync if it changes. */
@media(min-width:1000px){
  /* rush setup: hero + lessons full width, then Level / Count / Pace side by side */
  .rush-setup{max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px 24px;align-items:start}
  .rush-setup>.rush-hero,
  .rush-setup>:nth-child(2),
  .rush-setup>.rush-skip,
  .rush-setup>.fstart{grid-column:1/-1}
  .rush-setup>.fgroup{margin-bottom:14px}
  /* question-bank filter: heading + lessons full width, Level and Status share a row */
  .filtercard{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;align-items:start}
  .filtercard>h3,
  .filtercard>.fc-sub,
  .filtercard>:nth-child(3),
  .filtercard>.fstart{grid-column:1/-1}
  .filtercard>.fgroup{margin-bottom:12px}
}
@media(min-width:1200px){
  .ask-panel{max-width:860px}
}
.rush-hero{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 20px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.rush-hero .rush-ic{width:48px;height:48px;margin:0;border-radius:14px;flex:none}
.rush-hero .rush-ic svg{width:24px;height:24px}
.rush-hx{flex:1}.rush-hx h2{font-size:20px;font-weight:900}.rush-hx p{color:var(--muted);font-size:13.5px;line-height:1.5}
.rush-bestbig{font-weight:900;color:var(--amber);font-size:16px;white-space:nowrap}
.rush-skip{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--muted);margin:8px 0 2px;cursor:pointer}
.rush-skip input{width:18px;height:18px;accent-color:var(--brand)}
.rush-game{max-width:640px;margin:0 auto}
.rush-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.rush-count{font-weight:800;color:var(--muted);font-size:14px;white-space:nowrap}
.rush-tbar{flex:1;height:10px;background:var(--track);border-radius:30px;overflow:hidden}
.rush-tbar span{display:block;height:100%;background:var(--brand);border-radius:30px;transition:width 1s linear}
.rush-tbar span.low{background:var(--red)}
.rush-stars{font-weight:900;color:var(--amber);font-size:15px;white-space:nowrap}
.rush-starsbig{font-size:20px;color:var(--amber);display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0}
.rush-starsbig b{font-size:44px;font-weight:900;color:var(--brand)}
.rush-stats{display:flex;justify-content:center;gap:26px;margin:8px 0 14px}
.rush-stats b{display:block;font-size:26px;font-weight:900}
.rush-stats span{color:var(--muted);font-size:12.5px;font-weight:700}
.rush-drill{background:var(--brand-soft);color:var(--brand);border-radius:12px;padding:10px 14px;font-weight:800;font-size:14px;margin:6px 0 14px;display:inline-block}

.rep-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--muted);font-size:12.5px;font-weight:700;background:none;border:none;opacity:.7;transition:.13s}
.rep-link:hover{color:var(--red);opacity:1}
.rep-link svg{width:13px;height:13px}
.rep-modal{max-width:400px}
.rep-modal h3{font-size:18px;font-weight:900;margin-bottom:14px}
.rep-reasons{display:flex;flex-direction:column;gap:9px}
.rep-reason{text-align:start;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-weight:700;font-size:15px;color:var(--ink);transition:.13s}
.rep-reason:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

/* ---- responsive overrides (keep LAST so they beat base rules above) ---- */
.nav-cta{display:none}
@media(max-width:1150px){
  .statschip{display:none}
  .langtab.active{display:none}
  .brand small{display:none}
  .brand{font-size:18px;gap:8px}.brand .logo{width:33px;height:33px}
  .nav-links{gap:5px}
  .nav-links a{padding:6px 10px;font-size:12.5px}
  .themebtn,.acctbtn{width:36px;height:36px;border-radius:10px}
  .nav-in{gap:9px}
}
@media(max-width:760px){
  .statschip{padding:5px 10px;font-size:12.5px}
  .statschip .st-xp{display:none}
  .ai-input{font-size:16px}
  .plan-hero{gap:16px}
  .mring{width:110px;height:110px}
  .mring-num b{font-size:22px}
}
@media(max-width:560px){
  .statschip{display:none}
  .langtab.active{display:none} /* show only the language you can switch TO */
}

/* graph figures */
.qfig,.qrev-fig{margin:0 0 14px}
.qrev-fig:empty{display:none}
.figsvg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:8px 6px}

/* شعبة (track) picker in the subject bar */
.trackpick{display:inline-flex;align-items:center;gap:6px;margin-inline-end:10px}
.trackpick-lbl{font-size:12px;font-weight:700;color:var(--muted)}
.tracksel{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--brand);background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;padding:6px 9px;cursor:pointer;outline:none}
.tracksel:focus{border-color:var(--brand)}

/* ===== onboarding chooser + identity chip + custom-practice collapsible ===== */
.trackchip{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--brand);background:var(--card);border:1.4px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;margin-inline-end:10px;white-space:nowrap}
.trackchip:hover{border-color:var(--brand)}

.overlay.setup{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;background:rgba(8,13,20,.58);backdrop-filter:blur(3px);padding:20px}
.overlay.setup.show{display:flex}
.setup-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.30);padding:26px 24px;width:100%;max-width:440px}
.setup-h{font-size:21px;font-weight:900;color:var(--ink);margin-bottom:5px}
.setup-sub{font-size:13.5px;color:var(--muted);margin-bottom:18px;line-height:1.55}
.setup-grid{display:grid;grid-template-columns:1fr;gap:10px}
.setup-grid.two{grid-template-columns:1fr 1fr}
.setup-opt{display:flex;flex-direction:column;gap:3px;text-align:start;font-family:inherit;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .15s}
.setup-opt:hover{border-color:var(--brand)}
.setup-opt.sel{border-color:var(--brand)}
.setup-opt b{font-size:16px;font-weight:800;color:var(--ink)}
.setup-opt small{font-size:12px;color:var(--muted)}
.setup-back{background:none;border:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:0}
.setup-back:hover{color:var(--brand)}
.setup-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.setup-badge{font-size:12px;font-weight:800;color:var(--brand);background:var(--brand-soft);padding:5px 12px;border-radius:999px}
.setup-step{font-size:12px;font-weight:700;color:var(--muted)}

.customToggle{display:flex;align-items:center;gap:9px;width:100%;max-width:520px;font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;cursor:pointer;margin:26px 0 0}
.customToggle:hover{border-color:var(--brand);color:var(--brand)}
.customToggle .ct-arrow{margin-inline-start:auto;transition:transform .2s;color:var(--muted);font-size:16px}
.customToggle.on .ct-arrow{transform:rotate(180deg)}
.fc-collapsible{display:none;margin-top:12px}
.fc-collapsible.open{display:block}

/* clickable mistakes-log rows */
.mist-item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);padding:10px 8px;border-top:1px solid var(--line);cursor:pointer;transition:.12s;border-radius:8px}
.mist-item:first-of-type{border-top:none}
.mist-item:hover{background:var(--brand-soft);color:var(--brand)}
.mist-item svg{color:var(--muted);flex:none}
.mist-item:hover svg{color:var(--brand)}

/* medium (عربي / لغات) toggle in the subject bar */
.medtoggle{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.medbtn{font-family:inherit;font-weight:800;font-size:12.5px;padding:6px 13px;color:var(--muted);background:var(--card);border:none;cursor:pointer;transition:.13s;white-space:nowrap}
.medbtn.active{background:var(--brand);color:#fff}
.medbtn:not(.active):hover{color:var(--brand)}

/* ===== OnePrep-style dark sidebar (fixed navy rail in both themes) ===== */
.sidebar{background:#294a5f;border-inline-end:1px solid rgba(255,255,255,.10);color:#c6d5df}
[data-theme="dark"] .sidebar{background:#0a1a2b;border-inline-end-color:rgba(255,255,255,.06)}
.sb-brand{color:#fff}
.sb-group{color:#8ba1b2;opacity:1}
.sidebar .sb-support{color:#c6d5df;border-radius:999px}
.sidebar .sb-support:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-nav a{color:#c6d5df;border-radius:999px}
.sb-nav a svg{opacity:.82}
.sb-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sb-nav a:hover svg{opacity:1}
.sb-nav a.active{background:#123a5c;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sb-nav a.active svg{opacity:1}
/* subject switcher on the navy rail */
.sidebar .subjtab{background:rgba(255,255,255,.06);color:#c6d5df;border-color:rgba(255,255,255,.14)}
.sidebar .subjtab.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:none}
.sidebar .subjtab:hover:not(.active){border-color:#fff;color:#fff}
.sidebar .medtoggle{border-color:rgba(255,255,255,.18)}
.sidebar .medbtn{background:transparent;color:#c6d5df}
.sidebar .medbtn.active{background:var(--brand);color:#fff}
.sidebar .medbtn:not(.active):hover{color:#fff}
/* upgrade + feedback */
/* Go Premium — the one thing in the sidebar that should catch the eye.
   Filled brand gradient instead of the old ghost outline, a soft breathing glow,
   and a shine that sweeps across every few seconds. The sweep is deliberately
   brief and widely spaced: enough peripheral motion to pull attention, not a
   constant flicker sitting next to the study nav. */
.sidebar .sb-upgrade{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#2f7bf7 0%,#6d5ef0 55%,#a78bfa 100%);
  color:#fff; border-color:transparent; font-weight:900;
  box-shadow:0 6px 18px -6px rgba(79,107,255,.75);
  animation:sbUpGlow 3.4s ease-in-out infinite alternate;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.sidebar .sb-upgrade svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.sidebar .sb-upgrade::after{
  content:""; position:absolute; top:0; bottom:0; width:45%;
  inset-inline-start:-60%; pointer-events:none; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:sbUpShine 5.2s ease-in-out infinite;
}
.sidebar .sb-upgrade:hover{
  background:linear-gradient(135deg,#3f88ff 0%,#7b6cff 55%,#b79bff 100%);
  transform:translateY(-1px); filter:saturate(1.08);
  box-shadow:0 10px 24px -6px rgba(79,107,255,.95);
}
.sidebar .sb-upgrade:active{transform:translateY(0)}
/* The real 499 -> 249 offer, surfaced on the CTA itself. It sits INSIDE the button
   rather than overhanging a corner, because the button clips overflow for the shine. */
.sidebar .sb-upgrade .sb-off{
  margin-inline-start:auto; flex:none;
  background:#fff; color:#4526c9;
  font-size:10.5px; font-weight:900; line-height:1; letter-spacing:.2px;
  padding:4px 7px; border-radius:6px; white-space:nowrap;
  box-shadow:0 2px 7px -2px rgba(0,0,0,.5);
}
@keyframes sbUpGlow{
  from{box-shadow:0 6px 16px -7px rgba(79,107,255,.60)}
  to  {box-shadow:0 8px 26px -6px rgba(124,92,255,.95)}
}
@keyframes sbUpShine{
  0%{inset-inline-start:-60%}
  16%{inset-inline-start:130%}
  100%{inset-inline-start:130%}
}
/* A permanently animating control is a real accessibility problem for anyone with
   a vestibular disorder, so keep the colour and drop the motion. */
@media (prefers-reduced-motion:reduce){
  .sidebar .sb-upgrade{animation:none}
  .sidebar .sb-upgrade::after{animation:none; opacity:0}
}
/* bottom controls */
.sidebar .sb-controls{border-top-color:rgba(255,255,255,.12)}
.sidebar .statschip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#fff}
.sidebar .themebtn,.sidebar .acctbtn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#c6d5df}
.sidebar .themebtn:hover,.sidebar .acctbtn:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.12)}
.sidebar .langbar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.sidebar .langtab{color:#c6d5df}
.sidebar .langtab.active{background:var(--brand);color:#fff}

/* subject cards as the picker on practice pages */
.subj-top{margin-bottom:2px}
.subjctrls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
/* auto-FILL with a capped max keeps these as neat tiles; auto-fit + 1fr stretched
   each one to 255px, which is what kept the colour area high. */
/* ALWAYS one row. A grid wraps as soon as the tiles stop fitting; flex with
   `flex:1 1 0` + a min-width never does — the tiles share the row when there is
   space and the row scrolls when there isn't. Tracks only ever have 5 or 6
   subjects, so on any real desktop this is a single row with no scrolling. */
.page-subjcards{display:flex;gap:12px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;
  /* overflow-x:auto computes overflow-y to auto as well, so the -3px hover lift and
     the 3px selected ring were being clipped. Pad the scroll box out to hold them and
     pull the padding back with a matching negative margin, so nothing moves. */
  padding:12px 6px 22px;margin:-12px -6px 4px}
.page-subjcards::-webkit-scrollbar{display:none}
.page-subjcards .subjcard{flex:1 1 0;min-width:152px;scroll-snap-align:start}
/* These tiles were painting ~48x more saturated colour than the Start-practice
   button, so the page's main action lost to its own navigation. Same gradients,
   same information — just a much smaller canvas for them. */
.page-subjcards .subjcard{padding:13px 15px;border-radius:16px;
  box-shadow:0 6px 16px -12px rgba(20,30,60,.5)}
.page-subjcards .subjcard::after{width:92px;height:92px;inset-inline-end:-26px;top:-26px}
.page-subjcards .subjcard h3{font-size:14.5px;margin-bottom:4px;letter-spacing:-.3px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.page-subjcards .subjcard-prog{font-size:11.5px;opacity:.9;margin-bottom:8px}
.page-subjcards .subjcard-bar{height:5px;margin-bottom:0}
@media(max-width:640px){
  /* capped tiles left a dead gutter and stacked into a tall colour wall on phones;
     two per row fills the width and keeps the band short. This block must sit AFTER
     the desktop .page-subjcards rules — equal specificity, so source order decides. */
  .page-subjcards{gap:10px;padding:12px 6px 18px;margin:-12px -6px 2px}
  .page-subjcards .subjcard{padding:11px 13px;border-radius:14px;min-width:138px}
  .page-subjcards .subjcard h3{font-size:14px}
  .page-subjcards .subjcard-prog{font-size:11px;margin-bottom:7px}
  .page-subjcards .subjcard::after{width:70px;height:70px;inset-inline-end:-20px;top:-20px}
}
.subjcard.cur{box-shadow:0 0 0 3px var(--brand),0 14px 30px -16px rgba(20,30,60,.5)}

/* sidebar profile + settings (OnePrep-style) */
.sb-profile-wrap{border-top:1px solid rgba(255,255,255,.1);margin-top:8px;padding-top:8px}
.sb-prof{display:flex;align-items:center;gap:4px}
.sb-prof-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:8px;border-radius:12px;transition:.13s}
.sb-prof-main:hover{background:rgba(255,255,255,.06)}
.sb-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.13);display:grid;place-items:center;color:#fff;font-weight:900;font-size:15px;flex:none}
.sb-av svg{width:18px;height:18px}
.sb-prof-txt{flex:1;min-width:0}
.sb-prof-txt b{display:block;color:#fff;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-prof-sub{display:flex;align-items:center;gap:5px;color:#8ba1b2;font-size:11.5px;font-weight:800;margin-top:1px}
.sb-prof-sub svg{width:12px;height:12px}
.sb-gear{color:#8ba1b2;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;transition:.13s}
.sb-gear:hover{color:#fff;background:rgba(255,255,255,.08)}
.sb-settings{display:none;margin-top:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px}
.sb-settings.show{display:block}
.sbs-h{color:#8ba1b2;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.sbs-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.sbs-lbl{color:#c6d5df;font-size:13px;font-weight:700}
.sbs-seg{display:inline-flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:9px;overflow:hidden}
.sbs-seg button{padding:5px 11px;font-size:12.5px;font-weight:800;color:#c6d5df;background:transparent;font-family:inherit;cursor:pointer}
.sbs-seg button.on{background:var(--brand);color:#fff}
.sbs-sep{height:1px;background:rgba(255,255,255,.1);margin:4px 0 8px}
.sbs-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px;color:#c6d5df;font-size:13px;font-weight:700;border-radius:9px;background:transparent;font-family:inherit;cursor:pointer;text-align:start}
.sbs-item svg{width:17px;height:17px;flex:none}
.sbs-item:hover{background:rgba(255,255,255,.07);color:#fff}
.sbs-item.danger{color:#f0a3a3}
.sbs-item.danger:hover{color:#ff8f8f}

/* settings page (content) */
.set-h1{font-size:26px;font-weight:900;margin-bottom:20px}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.set-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.set-h2{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:14px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.set-row:last-child{margin-bottom:0}
.set-lbl{font-weight:800;font-size:14.5px;color:var(--ink)}
.seg{display:inline-flex;background:var(--bg);border:1.5px solid var(--line);border-radius:11px;overflow:hidden}
.seg-wrap{flex-wrap:wrap}
.segbtn{padding:8px 15px;font-family:inherit;font-weight:800;font-size:13.5px;color:var(--muted);background:transparent;cursor:pointer;transition:.13s;white-space:nowrap}
.segbtn.on{background:var(--brand);color:#fff}
.segbtn:not(.on):hover{color:var(--brand)}
.set-date{font-family:inherit;font-size:14px;font-weight:700;padding:8px 12px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink)}
.set-dateval{font-size:14.5px;font-weight:800;color:var(--ink)}
.set-prof{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.set-av{width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:900;font-size:22px;flex:none}
.set-av svg{width:26px;height:26px}
.set-prof-txt{min-width:0;flex:1}
.set-prof-txt b{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:900}
.set-prof-txt span{display:block;color:var(--muted);font-size:13.5px}
.set-edit{color:var(--muted);width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;flex:none;transition:.13s}
.set-edit:hover{color:var(--brand);background:var(--brand-soft)}
.set-nameinput{font-family:inherit;font-weight:800;font-size:16px;padding:8px 12px;border:1.5px solid var(--brand);border-radius:11px;background:var(--card);color:var(--ink);width:100%;margin-bottom:5px}
.set-name-actions{display:flex;gap:8px;margin-bottom:14px}
.set-name-actions .btn{padding:9px 22px;font-size:14px}
.set-save-btn:disabled{opacity:.6;cursor:default}
.set-btn{width:100%;text-align:center;margin-top:4px}
.set-btn svg{vertical-align:-2px}
.set-hint{color:var(--muted);font-size:14px;margin-bottom:14px}
.plan-badge{font-weight:900;font-size:13px;padding:5px 14px;border-radius:30px}
.plan-badge.free{background:var(--bg);color:var(--muted);border:1.5px solid var(--line)}
.plan-badge.prem{background:var(--brand);color:#fff}
.set-links{display:flex;flex-direction:column;gap:2px}
.set-link{display:flex;align-items:center;padding:11px 8px;font-weight:700;font-size:14px;color:var(--ink);border-radius:10px;cursor:pointer;background:transparent;font-family:inherit;text-align:start;width:100%}
.set-link:hover{background:var(--bg);color:var(--brand)}
.set-link.danger{color:var(--red)}
.set-link.danger:hover{color:var(--red);background:var(--red-soft)}

/* analytics page */
.an-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.an-kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.an-kv{font-size:26px;font-weight:900;line-height:1}
.an-kl{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:5px}
.an-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.an-bars{display:flex;flex-direction:column;gap:13px}
.an-bar-row{display:flex;align-items:center;gap:12px}
.an-bn{flex:0 0 40%;font-weight:800;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-track{flex:1;height:9px;background:var(--track);border-radius:20px;overflow:hidden}
.an-track span{display:block;height:100%;border-radius:20px;transition:width .5s ease}
.an-bv{flex:none;font-weight:900;font-size:13px;color:var(--ink);min-width:40px;text-align:end}
.an-bv i{color:var(--muted);font-weight:600;font-size:11px;font-style:normal;margin-inline-start:2px}
@media(max-width:640px){.an-kpis{grid-template-columns:repeat(2,1fr)}.an-grid{grid-template-columns:1fr}}

/* activity calendar heatmap */
.hm-scroll{overflow-x:auto;padding-bottom:6px;margin-top:12px}
.hm{display:inline-flex;flex-direction:column;gap:6px}
.hm-top{display:flex}
.hm-axsp{width:34px;flex:none}
.hm-mon{display:grid;grid-auto-flow:column;grid-auto-columns:12px;gap:3px;align-items:end}
.hm-ml{grid-row:1;font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap}
.hm-bot{display:flex}
.hm-axcol{width:34px;flex:none;display:grid;grid-template-rows:repeat(7,12px);gap:3px}
.hm-ax{font-size:9px;color:var(--muted);line-height:12px;text-align:start;white-space:nowrap}
.hm-cal{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);grid-auto-columns:12px;gap:3px}
.hm-c{width:12px;height:12px;border-radius:3px;display:inline-block;background:var(--track)}
.hm-c.l0{background:var(--track)}
.hm-c.l1{background:#c7ecd5}
.hm-c.l2{background:#84d3a2}
.hm-c.l3{background:#3fae6d}
.hm-c.l4{background:#1e854a}
.hm-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:14px}
.hm-active{font-weight:800;font-size:13.5px;color:var(--ink)}
.hm-legend{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.hm-legend .hm-c{width:11px;height:11px}

/* ---- paywall / locked surfaces ---- */
.modal.paywall{text-align:center;max-width:390px}
.modal.paywall>svg{color:var(--brand)}
.modal.paywall h3{margin:8px 0 7px}
.modal.paywall p{color:var(--muted);font-size:14px;line-height:1.75;margin-bottom:15px}
.pw-price{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-bottom:16px}
.pw-price s{color:var(--muted);font-weight:800;font-size:17px}
.pw-price b{font-size:38px;font-weight:900;line-height:1}
.pw-price span{font-weight:800;font-size:14px}
.pw-cta{width:100%;justify-content:center}
.pw-x{display:block;width:100%;margin-top:9px;color:var(--muted);font-weight:800;font-size:13.5px;padding:8px;font-family:inherit;background:none;border:none;cursor:pointer}
.pw-recheck{color:var(--brand);margin-top:12px}
.pw-recheck:hover{text-decoration:underline}
.pw-recheck:disabled{opacity:.6;cursor:default;text-decoration:none}
.pw-x:hover{color:var(--ink)}
/* the receipt upload sits directly under the CTA: a student who has already paid
   should find it without reading, because they arrive here frustrated */
.pw-upload{margin-top:12px;color:var(--brand);border:1px dashed var(--line);border-radius:10px;padding:10px}
.pw-upload:hover{color:var(--brand);background:var(--brand-soft)}
.pw-upload:disabled{opacity:.55;cursor:default}
.pw-msg{font-size:13px;line-height:1.7;margin-top:9px;min-height:0}
.pw-msg:not(:empty){min-height:22px}
.pw-msg.good{color:var(--green)}
.pw-msg.bad{color:var(--red)}
.mj-locked{position:relative}
.mj-veil{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  border-radius:inherit;cursor:pointer;overflow:hidden;
  background:color-mix(in srgb,var(--card) 38%,transparent);
  -webkit-backdrop-filter:blur(5px) saturate(.9);backdrop-filter:blur(5px) saturate(.9);
  transform:translateZ(0);will-change:backdrop-filter}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .mj-veil{background:color-mix(in srgb,var(--card) 86%,transparent)}
}
.mj-pill{display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 16px);
  background:var(--brand);color:#fff;font-weight:800;font-size:12.5px;line-height:1;
  padding:8px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;
  box-shadow:0 8px 20px -8px rgba(47,123,247,.85);transition:.15s}
.mj-pill b{font-weight:800}
.mj-pill-ico{padding:7px;gap:0;border-radius:50%}
.mj-pill-ico b{display:none}
.mj-veil:hover .mj-pill{filter:brightness(1.08);box-shadow:0 11px 24px -8px rgba(47,123,247,1)}
.lcard-lock{opacity:.6}
.lcard-lock:hover{opacity:.85}
.lcard .lfree{display:inline-block;background:var(--green-soft);color:var(--green);font-weight:800;font-size:10.5px;padding:2px 8px;border-radius:20px;margin-inline-start:7px;vertical-align:middle}
.sb-lock{margin-inline-start:auto;opacity:.5;display:inline-flex;flex:none}
.ai-locked{display:flex;align-items:center;gap:9px;width:100%;background:var(--bg);border:1.5px dashed var(--line);color:var(--muted);font-family:inherit;font-weight:800;font-size:13.5px;padding:12px 14px;border-radius:12px;cursor:pointer;margin-top:12px;transition:.15s}
.ai-locked:hover{border-color:var(--brand);color:var(--brand)}

/* ---- real ministry exam papers ---- */
.tcard-real{border-color:rgba(47,123,247,.4);box-shadow:0 0 0 1px rgba(47,123,247,.12),var(--shadow-sm)}
.tk-real{background:var(--brand)!important;color:#fff!important}
.qimg{display:block;max-width:100%;height:auto;margin:0 auto 4px;border:1px solid var(--line);border-radius:12px;background:#fff}

/* ================= LANDING PAGE (v2) ================= */
.lp{background:var(--bg)}
.lp-hero{position:relative;overflow:hidden;padding:44px 0 0}
.lp-hero-glow{position:absolute;inset:-20% -10% auto -10%;height:640px;pointer-events:none;z-index:0;
  background:radial-gradient(620px 320px at 78% 12%,rgba(47,123,247,.18),transparent 62%),
             radial-gradient(560px 300px at 16% 0%,rgba(106,61,240,.14),transparent 62%)}
[data-theme="dark"] .lp-hero-glow{background:radial-gradient(620px 320px at 78% 12%,rgba(77,148,255,.20),transparent 62%),radial-gradient(560px 300px at 16% 0%,rgba(124,58,237,.20),transparent 62%)}
.lp-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:34px;align-items:center;padding-bottom:40px}
.lp-hero-copy h1{font-size:38px;font-weight:900;line-height:1.28;letter-spacing:-.5px;margin:16px 0 0}
.lp-hero-copy h1 .hl{color:var(--brand)}
.lp-hero-copy p{color:var(--muted);font-size:16.5px;line-height:1.85;margin-top:14px;max-width:560px}
.lp-countdown{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;padding:8px 15px;font-weight:800;font-size:13px;color:var(--muted);box-shadow:var(--shadow-sm)}
.lp-countdown b{color:var(--ink);font-variant-numeric:tabular-nums}
.lp-countdown:hover{border-color:var(--brand)}
.lp-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.lp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.lp-btn-main{padding:14px 30px;font-size:16px;box-shadow:0 14px 30px -14px rgba(47,123,247,.85)}
.lp-trust{color:var(--muted);font-size:13.5px;font-weight:700;margin-top:14px}

/* hero product mock */
.lp-hero-art{position:relative;justify-self:center;width:100%;max-width:430px}
.lp-mock{background:var(--card);border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.lp-mock-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.lp-mock-bar span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.lp-mock-body{padding:18px}
.lp-mock-tags{display:flex;gap:7px;margin-bottom:12px}
.lp-real{background:var(--brand)!important;color:#fff!important}
.lp-mock-q{font-weight:800;font-size:15px;line-height:1.75;margin-bottom:14px}
.lp-mock-opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 13px;margin-bottom:9px;font-size:14px;font-weight:600;background:var(--card)}
.lp-mock-opt .k{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:7px;
  background:var(--bg);font-size:12px;font-weight:800;color:var(--muted)}
.lp-mock-opt.ok{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.lp-mock-opt.ok .k{background:var(--green);color:#fff}
.lp-mock-opt.ok svg{margin-inline-start:auto}
.lp-float{position:absolute;background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:10px 14px;box-shadow:var(--shadow);font-weight:800;font-size:12.5px;display:flex;align-items:center;gap:7px}
.lp-float b{font-size:18px;font-variant-numeric:tabular-nums}
.lp-float span{color:var(--muted)}
.lp-float{display:none}                 /* only float them where there is room beside the card */
.lp-f1{inset-inline-start:-18px;top:14%;flex-direction:column;gap:0;align-items:flex-start}
.lp-f2{inset-inline-end:-14px;bottom:10%;color:var(--amber)}

/* stats band */
.lp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:6px}
.lp-stat{background:var(--card);padding:20px 12px;text-align:center}
.lp-stat b{display:block;font-size:24px;font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums}
.lp-stat span{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:4px;line-height:1.5}

/* ministry papers split */
.lp-split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.lp-eyebrow{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:800;
  font-size:12px;padding:6px 13px;border-radius:999px;margin-bottom:13px}
.lp-split-copy h2{font-size:29px;font-weight:900;letter-spacing:-.4px;line-height:1.3}
.lp-split-copy>p{color:var(--muted);font-size:16px;line-height:1.9;margin-top:12px}
.lp-list{list-style:none;margin:18px 0 22px}
.lp-list li{position:relative;padding-inline-start:28px;margin-bottom:10px;font-weight:600;font-size:15px}
.lp-list li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--brand);box-shadow:inset 0 0 0 3px var(--card)}
.lp-split-art{position:relative;min-height:230px}
.lp-paper{background:var(--card);border:1.5px solid var(--brand);border-radius:var(--rad);padding:20px;
  box-shadow:0 0 0 1px rgba(47,123,247,.1),var(--shadow);position:relative;z-index:2}
.lp-paper-tag{display:inline-block;background:var(--brand);color:#fff;font-weight:800;font-size:11.5px;
  padding:5px 12px;border-radius:999px}
.lp-paper h4{font-size:19px;font-weight:900;margin:12px 0 6px}
.lp-paper p{color:var(--muted);font-size:14px;line-height:1.75}
.lp-paper-meta{display:flex;gap:14px;color:var(--muted);font-size:12.5px;font-weight:700;margin:14px 0}
.lp-paper-btn{background:var(--brand);color:#fff;text-align:center;font-weight:800;font-size:14.5px;
  padding:11px;border-radius:var(--radS)}
.lp-paper-back{position:absolute;inset-inline-start:16px;top:22px;z-index:1;opacity:.5;transform:rotate(-2deg)}

/* steps */
.lp-steps{display:grid;grid-template-columns:1fr;gap:18px}
.lp-step{background:var(--card);border:1.5px solid var(--line);border-radius:var(--rad);padding:24px;box-shadow:var(--shadow-sm)}
.lp-step-n{font-size:13px;font-weight:900;color:var(--brand);background:var(--brand-soft);
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px}
.lp-step h3{font-size:19px;font-weight:900;margin-bottom:7px}
.lp-step p{color:var(--muted);font-size:14.5px;line-height:1.8}
.lp-mini{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.lp-bar{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;margin-bottom:9px}
.lp-bar span{flex:none;width:96px;color:var(--muted)}
.lp-bar i{flex:1;height:8px;border-radius:99px;background:var(--track);position:relative}
.lp-bar i::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:var(--w);border-radius:99px;background:var(--brand)}
.lp-bar b{width:34px;text-align:end;font-variant-numeric:tabular-nums}
.lp-mini-plan{display:flex;flex-wrap:wrap;gap:8px}
.lp-chip{background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:800;color:var(--muted)}
.lp-mini-mastery{display:flex;align-items:center;gap:14px}
.lp-ring{position:relative;width:78px;height:78px;flex:none}
.lp-ring svg{width:100%;height:100%}
.lp-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;font-weight:900}
.lp-mini-mastery span{font-size:13.5px;font-weight:700;color:var(--muted)}

/* features */
.lp-feats{display:grid;grid-template-columns:1fr;gap:16px}
.lp-feat{background:var(--card);border:1.5px solid var(--line);border-radius:var(--rad);padding:22px;box-shadow:var(--shadow-sm);transition:.16s}
.lp-feat:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow)}
.lp-ic{width:44px;height:44px;border-radius:13px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;margin-bottom:13px}
.lp-ic svg{width:22px;height:22px}
.lp-feat h3{font-size:17px;font-weight:900;margin-bottom:6px}
.lp-feat p{color:var(--muted);font-size:14.3px;line-height:1.8}

/* final cta */
.lp-final{padding-bottom:56px}
.lp-final-card{background:var(--grad);border-radius:24px;padding:40px 26px;text-align:center;color:#fff;
  box-shadow:0 26px 54px -26px rgba(47,123,247,.75)}
.lp-final-card h2{font-size:26px;font-weight:900;line-height:1.4;letter-spacing:-.3px}
.lp-final-card p{font-size:15.5px;line-height:1.8;margin-top:12px;opacity:.94;max-width:520px;margin-inline:auto}
.lp-final-card .lp-cta{justify-content:center}
.lp-final-card .btn{background:#fff;color:var(--brand);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.lp-final-card .btn.ghost{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.6);box-shadow:none}
.lp-final-card .btn.ghost:hover{background:rgba(255,255,255,.12)}

@media(min-width:760px){
  .lp-stats{grid-template-columns:repeat(4,1fr)}
  .lp-steps{grid-template-columns:repeat(3,1fr)}
  .lp-feats{grid-template-columns:repeat(2,1fr)}
  .lp-hero-copy h1{font-size:46px}
}
@media(min-width:1000px){
  .lp-float{display:flex}
  .lp-hero{padding-top:56px}
  .lp-hero-in{grid-template-columns:1.05fr .95fr;gap:46px;padding-bottom:52px}
  .lp-hero-copy h1{font-size:54px;line-height:1.22}
  .lp-split{grid-template-columns:1.05fr .95fr;gap:48px}
  .lp-feats{grid-template-columns:repeat(3,1fr)}
  .lp-final-card{padding:52px 40px}
  .lp-final-card h2{font-size:32px}
}

/* ===== phone: bottom tab bar + docked primary action =========================
   Everything a thumb needs lives in the bottom third of the screen. The bar uses
   env(safe-area-inset-bottom) so it clears the iPhone home indicator instead of
   sitting under it. Both are phone-only — the desktop sidebar is untouched. */
.tabbar{display:none}
.mdock{display:none}
@media(max-width:900px){
  .tabbar{
    display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;
    background:color-mix(in srgb,var(--card) 88%,transparent);
    backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tab{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:6px 2px;min-height:48px;          /* >= 44pt touch target */
    color:var(--muted);text-decoration:none;background:none;border:0;
    font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .tab-ic{width:23px;height:23px;display:block}
  .tab-ic svg{width:100%;height:100%;display:block}
  .tab-lb{font-size:10.5px;font-weight:800;letter-spacing:-.1px;line-height:1}
  .tab.on{color:var(--brand)}
  .tab:active{opacity:.55}

  /* the page's primary action, permanently in the thumb zone */
  .mdock{display:none;position:fixed;inset-inline:0;z-index:55;
    bottom:calc(60px + env(safe-area-inset-bottom));padding:10px 14px 12px;
    background:linear-gradient(to top,var(--bg) 58%,transparent)}
  .mdock.show{display:block}
  .mdock-go{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
    padding:16px 20px;font-size:17px;font-weight:900;border-radius:15px;
    box-shadow:0 12px 30px -8px rgba(47,123,247,.55)}
  .mdock-n{font-weight:800;font-size:14px;opacity:.72;
    padding-inline-start:9px;border-inline-start:1px solid rgba(255,255,255,.34)}
  .mdock-go[disabled]{opacity:.4;pointer-events:none;box-shadow:none}
  /* one button, not two: the in-page copy steps aside on phones */
  body.has-dock .fstart .fc-go{display:none}
  body.has-dock .fstart{justify-content:flex-start;border-top:0;padding-top:0;margin-top:14px}

  /* The sidebar is now reachable from "More" in the thumb zone, so the top-left
     hamburger is a duplicate control in the hardest place to reach. Drop it and give
     the screen title the full width, the way an iOS title bar reads. */
  .sb-toggle{display:none!important}
  .topbar-title{font-size:20px;padding-inline-start:2px}
  /* explanatory copy costs four lines above the fold on a phone; the controls speak
     for themselves and the desktop still shows it */
  .phead p{display:none}
  /* the sticky topbar already names the screen — an <h1> repeating it costs ~60px
     of the fold on a phone for no information */
  .phead{display:none}

  /* content must clear the fixed bars */
  .app-content{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body.has-dock .app-content{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  /* a question set owns the whole screen — no chrome competing with the answers */
  body.solving .tabbar,body.solving .mdock{display:none}
}

/* ---- reserve space for JS-filled containers ----
   /bank, /tests, /plan and friends paint with these containers empty, then fill them
   once the question data arrives from the worker — injecting well over 1000px and
   shoving everything below it down. That was the entire PageSpeed deficit on /bank:
   CLS, not speed (FCP and LCP were already 0.4s).

   Values are measured from the filled containers at each real breakpoint, not guessed;
   the grids reflow so a single flat value would under-reserve on phones and
   over-reserve on desktop, and both directions cost CLS.

   :empty stops matching the instant the content lands, so the reservation releases
   itself and leaves no dead gap. */
#subjTop:empty{min-height:132px}
#filterCard:empty{min-height:461px}
#lessonWrap:empty{min-height:337px}
@media(max-width:767px){
  #subjTop:empty{min-height:121px}
  #filterCard:empty{min-height:688px}
  #lessonWrap:empty{min-height:646px}
}