:root{
  --bg:#F4F1EA; --surf:#FFFFFF; --soft:#FAF8F3; --line:#D9D3C6;
  --txt:#1F2A2E; --mut:#4C5B61; --dim:#6E7C82;
  --acc:#12796C; --acc2:#0E5E54; --warm:#A8710E; --ok:#1B7F45; --no:#B32B47;
  --r:16px;
}
html[data-theme="green"]{--acc:#2F7D32;--acc2:#1F5E23;--warm:#A8710E}
html[data-theme="gold"]{--acc:#9C6B12;--acc2:#7A520C;--warm:#2F7D32}
html[data-theme="navy"]{--acc:#2B4C7E;--acc2:#1E355C;--warm:#A8710E}
html[data-theme="rose"]{--acc:#A8455E;--acc2:#7E3247;--warm:#9C6B12}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:light;scroll-padding-top:env(safe-area-inset-top,0px)}
body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;background:var(--bg);color:var(--txt);
  line-height:1.7;-webkit-font-smoothing:antialiased;min-height:100%;
  padding:env(safe-area-inset-top,0px) 0 calc(40px + env(safe-area-inset-bottom,0px))}
h1,h2,h3,.kufi{font-family:"Noto Kufi Arabic",sans-serif;line-height:1.4}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:8px}
a{color:var(--acc2)}

.top{position:sticky;top:0;z-index:9;background:rgba(244,241,234,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;max-width:520px;margin-inline:auto}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--warm));
  display:grid;place-items:center;font-size:1.1rem;color:#fff;flex:none}
.brand b{font-family:"Noto Kufi Arabic",sans-serif;font-size:1.02rem}
.brand span{font-size:.72rem;color:var(--dim);display:block;margin-top:-4px}
.brand .sp{flex:1}

.wrap{max-width:520px;margin-inline:auto;padding:16px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(31,42,46,.07)}
.lbl{font-family:"Noto Kufi Arabic",sans-serif;font-size:.9rem;color:var(--acc2);margin-bottom:10px;font-weight:700}
.h{font-family:"Noto Kufi Arabic",sans-serif;font-size:1.2rem;margin-bottom:2px}
.sub{font-size:.8rem;color:var(--dim);margin-bottom:12px}
.hint{font-size:.82rem;color:var(--mut)}
.empty{text-align:center;color:var(--dim);padding:22px 10px;font-size:.9rem}
.err{background:rgba(179,43,71,.08);border:1px solid rgba(179,43,71,.35);color:var(--no);
  border-radius:12px;padding:10px 12px;font-size:.85rem;margin:8px 0}
.notice{font-size:.82rem;color:#5C4A12;background:rgba(168,113,14,.10);border:1px solid rgba(168,113,14,.35);
  border-radius:10px;padding:9px 12px;margin-bottom:12px;line-height:1.6}

.btn{display:block;width:100%;text-align:center;padding:13px;border-radius:12px;font-size:.92rem;
  background:var(--acc);color:#fff;font-weight:700;margin-top:8px}
.btn.g{background:var(--surf);color:var(--txt);border:1px solid var(--line);font-weight:500}
.btn.w{background:var(--warm);color:#fff}
.btn.d{background:transparent;color:var(--no);border:1px solid rgba(179,43,71,.4);font-weight:500}
.btn.sm{padding:9px 12px;font-size:.8rem;width:auto;display:inline-block;margin:4px 0 0}
.row2{display:flex;gap:8px}.row2>*{flex:1}
.tools{display:flex;gap:8px;flex-wrap:wrap}

.inp,.sel,.ta{width:100%;padding:12px 13px;border-radius:12px;background:var(--soft);border:1.5px solid var(--line);
  color:var(--txt);font:inherit;font-size:.92rem}
.ta{min-height:90px;resize:vertical}
.fld{margin-bottom:12px}.fld label{display:block;font-size:.8rem;color:var(--mut);margin-bottom:4px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.82rem;padding:7px 12px;border-radius:99px;background:var(--soft);border:1px solid var(--line);color:var(--mut)}
.chip.on{background:rgba(18,121,108,.12);border-color:var(--acc);color:var(--acc2);font-weight:600}

.code{text-align:center;padding:16px;border:2px dashed var(--acc);border-radius:14px;background:rgba(18,121,108,.06)}
.code b{font-family:"Noto Kufi Arabic",sans-serif;font-size:2.2rem;letter-spacing:.24em;color:var(--acc);display:block;direction:ltr}
.code span{font-size:.74rem;color:var(--dim)}
.qrbox{display:grid;place-items:center;padding:10px;background:#fff;border-radius:14px;border:1px solid var(--line);margin:10px auto;width:max-content}

.prog{display:flex;justify-content:space-between;font-size:.82rem;color:var(--mut);margin-bottom:8px}
.bar{height:7px;border-radius:99px;background:#E2DCD0;overflow:hidden;margin-bottom:14px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),#3FA394);transition:width .4s}
.emoji{font-size:2.6rem;text-align:center;margin:4px 0 8px;line-height:1.2}
.q{font-family:"Noto Kufi Arabic",sans-serif;font-size:1.08rem;font-weight:500;margin-bottom:14px;line-height:1.6}
.opt{display:block;width:100%;text-align:start;padding:15px;border-radius:12px;margin-bottom:8px;
  background:var(--soft);border:1.5px solid var(--line);font-size:.95rem;transition:transform .08s}
.opt:active{transform:scale(.99)}
.opt.ok{border-color:var(--ok);background:rgba(27,127,69,.10);font-weight:600}
.opt.no{border-color:var(--no);background:rgba(179,43,71,.10)}
.opt.sel{border-color:var(--acc);background:rgba(18,121,108,.10)}
.fb{font-size:.84rem;padding:10px 12px;border-radius:10px;margin-top:4px;line-height:1.6}
.fb.ok{background:rgba(27,127,69,.10);color:var(--ok);font-weight:600}
.fb.no{background:rgba(179,43,71,.10);color:var(--no);font-weight:600}
.fb.n{background:var(--soft);color:var(--mut)}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.kpi .v{font-family:"Noto Kufi Arabic",sans-serif;font-size:1.5rem;color:var(--acc2);font-weight:700}
.kpi .k{font-size:.76rem;color:var(--mut)}

.prow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border-radius:12px;margin-bottom:6px;
  background:var(--soft);border:1px solid var(--line)}
.prow .n{flex:1;font-size:.9rem;font-weight:600;min-width:120px}
.prow .s{font-size:.78rem;color:var(--mut)}
.prow.done{border-color:rgba(27,127,69,.5);background:rgba(27,127,69,.09)}
.prow.live{border-color:rgba(168,113,14,.55);background:rgba(168,113,14,.10)}
.prow.idle{opacity:.62}
.prow.me{outline:2px solid var(--acc)}
.dot{width:7px;height:7px;border-radius:99px;background:var(--warm);flex:none}
.rk{font-family:"Noto Kufi Arabic",sans-serif;color:var(--warm);min-width:1.6em;text-align:center}

.win{text-align:center;background:linear-gradient(160deg,rgba(168,113,14,.14),var(--surf));border-color:rgba(168,113,14,.45)}
.win .c{font-size:2.8rem;line-height:1}
.win .wn{font-family:"Noto Kufi Arabic",sans-serif;font-size:1.4rem;color:var(--warm);margin:6px 0 2px}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:end;margin-bottom:10px}
.pod{background:var(--soft);border:1px solid var(--line);border-radius:12px 12px 0 0;padding:10px 6px;text-align:center;min-height:52px}
.pod .pn{font-size:.78rem;font-weight:600;line-height:1.4}
.pod .pr{font-family:"Noto Kufi Arabic",sans-serif;color:var(--warm);font-size:1.1rem}
.pod .ps{font-size:.7rem;color:var(--dim)}
.p1{padding-bottom:32px;border-color:rgba(168,113,14,.5);background:rgba(168,113,14,.08)}.p2{padding-bottom:18px}.p3{padding-bottom:10px}

.link{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:.76rem;color:var(--mut);word-break:break-all;margin-bottom:7px;direction:ltr;text-align:left;font-family:ui-monospace,Menlo,monospace}
.pill{display:inline-block;font-size:.7rem;padding:3px 9px;border-radius:99px;font-weight:600;
  background:rgba(18,121,108,.12);color:var(--acc2);border:1px solid rgba(18,121,108,.35);vertical-align:middle}
.pill.w{background:rgba(168,113,14,.12);color:var(--warm);border-color:rgba(168,113,14,.35)}
.pill.n{background:rgba(179,43,71,.10);color:var(--no);border-color:rgba(179,43,71,.3)}
.pill.g{background:var(--soft);color:var(--dim);border-color:var(--line)}

.tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 16px 0;scrollbar-width:none;max-width:520px;margin-inline:auto}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;font-size:.8rem;padding:7px 13px;border-radius:99px;border:1px solid var(--line);color:var(--mut);background:var(--surf)}
.tab.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.sec{display:none}.sec.on{display:block}

.ai{padding:10px 0;border-bottom:1px dashed var(--line);font-size:.86rem}
.ai:last-child{border-bottom:0}
.ai .aq{font-weight:600;margin-bottom:2px}
.ai .aa{color:var(--ok)}.ai .am{color:var(--no)}.ai .af{color:var(--dim);font-size:.8rem}
.tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.tbl th,.tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.tbl th{color:var(--dim);font-weight:500;font-size:.74rem}
.scroll{overflow-x:auto}
.snd{font-size:.8rem;color:var(--acc2);background:rgba(18,121,108,.08);border:1px solid rgba(18,121,108,.3);padding:8px 12px;border-radius:99px}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.toast{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  background:var(--txt);color:#fff;padding:10px 16px;border-radius:99px;font-size:.84rem;z-index:99;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}