/* Layout: one-column phone app. Asphalt header band with a lane line, road-sign colours for state (green pass, red fail, amber timer). */
:root{
  --bg:#f3f4f1; --surface:#ffffff; --surface-2:#eef1ec; --fg:#1b2220; --muted:#5f6a65; --line:#dfe3dd;
  --asphalt:#1f2725; --asphalt-fg:#f4f6f3; --asphalt-muted:#b9c3be; --lane:#f2c230;
  --accent:#0d6b4d; --accent-fg:#ffffff; --accent-soft:#dcefe6;
  --ok:#17834f; --ok-soft:#dff2e7; --bad:#c62a35; --bad-soft:#fbe3e4; --amber:#e3a21a;
  --f-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --r:16px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#101413; --surface:#191f1d; --surface-2:#212826; --fg:#eef2ef; --muted:#9aa6a0; --line:#2b3330;
  --asphalt:#0b0f0e; --asphalt-fg:#eef2ef; --asphalt-muted:#9aa6a0; --lane:#e9b829;
  --accent:#3cbf8d; --accent-fg:#0b1310; --accent-soft:#173328;
  --ok:#47cf8c; --ok-soft:#153526; --bad:#ff6b73; --bad-soft:#3a1c1f; --amber:#f2bb4a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101413; --surface:#191f1d; --surface-2:#212826; --fg:#eef2ef; --muted:#9aa6a0; --line:#2b3330;
  --asphalt:#0b0f0e; --asphalt-fg:#eef2ef; --asphalt-muted:#9aa6a0; --lane:#e9b829;
  --accent:#3cbf8d; --accent-fg:#0b1310; --accent-soft:#173328;
  --ok:#47cf8c; --ok-soft:#153526; --bad:#ff6b73; --bad-soft:#3a1c1f; --amber:#f2bb4a; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-tap-highlight-color:transparent}
.wrap{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.3}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.stack{display:flex;flex-direction:column;gap:14px}

.band{background:var(--asphalt);color:var(--asphalt-fg);position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:repeating-linear-gradient(90deg,var(--lane) 0 36px,transparent 36px 64px)}
.band .wrap{padding-block:22px 30px;display:flex;flex-direction:column;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:48px;height:48px;border-radius:50%;border:6px solid #d1323c;background:#fff;color:#1b2220;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:20px;flex:none}
.brand h1{font-size:26px}
.brand small{display:block;color:var(--asphalt-muted);font-size:13px}
.progress-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:14px 16px;display:grid;gap:10px}
.pc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:var(--asphalt-muted);font-size:14px}
.pc-top b{font-family:var(--f-display);font-size:28px;color:var(--asphalt-fg);font-variant-numeric:tabular-nums}
.pc-top b small{font-size:15px;color:var(--asphalt-muted)}
.meter{height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.meter i{display:block;height:100%;background:var(--lane);border-radius:4px}
.pc-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--asphalt-muted)}
.pc-stats b{color:var(--asphalt-fg);font-variant-numeric:tabular-nums}

.home{padding-block:18px 28px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act{border-radius:var(--r);padding:14px;text-align:start;display:flex;flex-direction:column;gap:2px;min-width:0}
.act b{font-family:var(--f-display);font-size:16px}
.act span{font-size:13px;opacity:.85}
.act.primary{background:var(--accent);color:var(--accent-fg)}
.act.second{background:var(--surface);border:1px solid var(--line)}
.act:disabled{opacity:.5;cursor:default}
.sec-title{display:flex;justify-content:space-between;align-items:baseline}
.sec-title h2{font-size:18px}
.sec-title span{color:var(--muted);font-size:13px}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.serie{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 10px 10px;display:flex;flex-direction:column;gap:6px;text-align:center}
.serie .num{font-family:var(--f-display);font-size:24px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.serie .lbl{font-size:12px;color:var(--muted)}
.serie .bar{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.serie .bar i{display:block;height:100%}
.serie.pass{border-color:var(--ok)}
.serie.pass .bar i{background:var(--ok)}
.serie.fail .bar i{background:var(--bad)}
.serie.pass .lbl:last-child{color:var(--ok)}
.serie.fail .lbl:last-child{color:var(--bad)}
.foot{color:var(--muted);font-size:12px;text-align:center;margin:0}

.page{padding-block:16px 8px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ghost{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 12px;font-size:14px}
.count{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.mode{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:16px;text-align:start;width:100%}
.mode:hover{border-color:var(--accent)}
.mode .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.mode b{display:block;font-family:var(--f-display);font-size:18px}
.mode span span{color:var(--muted);font-size:14px}

.qbar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface-2);aspect-ratio:4/3;max-width:100%;margin:0}
.photo img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.wm{position:absolute;inset:auto 10px 8px auto;font-family:var(--f-display);font-size:12px;color:#fff;background:rgba(0,0,0,.4);padding:2px 10px;border-radius:999px;pointer-events:none}
.wm-c{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:var(--f-display);font-weight:700;font-size:34px;color:rgba(255,255,255,.16);transform:rotate(-18deg)}
.clock{position:absolute;top:10px;left:10px;width:54px;height:54px;pointer-events:none}
.clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.clock .t{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.qrow{display:flex;gap:10px;align-items:flex-start}
.q{font-size:19px;font-weight:600;flex:1;min-width:0;margin:0}
.audio{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--accent)}
.audio:disabled{opacity:.35;cursor:default;color:var(--muted)}
.hint{color:var(--muted);font-size:14px;margin:0}
.answers{display:grid;gap:10px}
.ans{display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:12px 14px;text-align:start;width:100%;transition:border-color .15s,background .15s}
.ans .n{flex:none;width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-family:var(--f-display);font-weight:700}
.ans.sel{border-color:var(--accent);background:var(--accent-soft)}
.ans.sel .n{background:var(--accent);color:var(--accent-fg)}
.ans.right{border-color:var(--ok);background:var(--ok-soft)}
.ans.right .n{background:var(--ok);color:#fff}
.ans.wrong{border-color:var(--bad);background:var(--bad-soft)}
.ans.wrong .n{background:var(--bad);color:#fff}
.ans:disabled{cursor:default}
.explain{border-radius:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--muted)}
.explain.ok{border-inline-start-color:var(--ok)}
.explain.ko{border-inline-start-color:var(--bad)}
.explain h3{font-size:16px;margin-bottom:2px}
.explain.ok h3{color:var(--ok)}
.explain.ko h3{color:var(--bad)}
.explain p{margin:0}
.cta{position:sticky;bottom:0;padding-block:10px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 75%,transparent)}
.primary-btn{background:var(--accent);color:var(--accent-fg);border-radius:14px;padding:15px;font-family:var(--f-display);font-size:17px;width:100%}
.primary-btn:disabled{opacity:.45;cursor:default}
.wa-btn{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#0b2e17;border-radius:14px;padding:14px;font-family:var(--f-display);font-weight:700;font-size:16px;text-decoration:none}
.second-btn{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;font-family:var(--f-display);font-size:16px;width:100%}

.score{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-block:8px}
.ring{position:relative;width:170px;height:170px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring b{font-family:var(--f-display);font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.ring small{color:var(--muted)}
.verdict{font-size:22px}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.tally div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center}
.tally b{display:block;font-family:var(--f-display);font-size:20px;font-variant-numeric:tabular-nums}
.tally span{font-size:12px;color:var(--muted)}
.tally .g b{color:var(--ok)}
.tally .r b{color:var(--bad)}
.review{display:grid;gap:10px}
.rv{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.rv b{font-weight:600}
.rv .good{color:var(--ok)}
.rv .bad{color:var(--bad)}
.rv p{margin:0;color:var(--muted);font-size:15px}
.result-btns{padding-bottom:24px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}