:root{--bg:#fbfcff;--ink:#14213d;--card:#fff;--p:#1b3a8a;--p2:#e6ecff;--mr:#d64545;--hl:#ffe27a;--ok:#16794a;--ko:#b3261e;--ln:#cfd9f2;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1526;--ink:#e8edfb;--card:#18203a;--p:#9db4ff;--p2:#222d52;--mr:#ff7d7d;--hl:#6b5a14;--ok:#5fd39a;--ko:#ff8a80;--ln:#26304f}}
:root[data-theme="dark"]{--bg:#0f1526;--ink:#e8edfb;--card:#18203a;--p:#9db4ff;--p2:#222d52;--mr:#ff7d7d;--hl:#6b5a14;--ok:#5fd39a;--ko:#ff8a80;--ln:#26304f}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 system-ui,"Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif;background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:24px 24px}
#app{max-width:640px;margin:0 auto;padding:0 14px 40px;border-inline-start:2px solid var(--mr);min-height:100vh;background:color-mix(in srgb,var(--bg) 82%,transparent)}
.m{direction:ltr;unicode-bidi:isolate;display:inline-block;font-weight:700}
button{font:inherit;min-height:48px;padding:6px 16px;border-radius:12px;border:2px solid var(--p);background:var(--card);color:var(--p);cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid var(--mr);outline-offset:2px}
button:disabled{opacity:.45}
.pri{background:var(--p);color:var(--bg);font-weight:700}
.top{display:flex;align-items:center;gap:10px;padding:12px 0}.top b{font-size:1.05rem}
h1{font-size:2rem;line-height:1.3;margin:.2em 0}h3{margin:.2em 0 .5em}
.hero{padding:20px 0 8px}.hero small{color:var(--p);font-weight:700}
.bar{height:12px;border-radius:8px;background:var(--p2);overflow:hidden;margin:10px 0 4px}.bar u{display:block;height:100%;background:var(--p)}
.card,.card2{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:14px;margin:12px 0;box-shadow:4px 4px 0 var(--ln)}
.card{display:flex;gap:12px;align-items:center;width:100%;text-align:start;color:var(--ink)}
.card b{font-size:1.5rem;color:var(--mr);min-width:1.6em}.card.soon{opacity:.55;border-style:dashed;box-shadow:none}.card em{font-size:.8rem;color:var(--mr)}
.tabs{display:flex;gap:8px;margin:8px 0}.tabs button{flex:1}.tabs .on{background:var(--hl);color:var(--ink);border-color:var(--ink)}
.q{font-size:1.2rem;margin-bottom:10px}label{display:block;margin:8px 0}
input{width:100%;font:inherit;font-size:1.3rem;padding:8px 12px;margin-top:4px;border:2px solid var(--p);border-radius:10px;background:var(--bg);color:var(--ink);direction:ltr;text-align:center}
.ops{display:flex;gap:8px;flex-wrap:wrap}.op{min-width:64px;font-size:1.3rem}.op.on{background:var(--hl);color:var(--ink);border-color:var(--ink)}
.bt{display:flex;gap:8px;margin-top:10px}.bt .pri{flex:1}
.fb{margin-top:10px;border-radius:10px}.fb:not(:empty){padding:8px 12px}.ok{background:#16794a22;border:2px solid var(--ok)}.ko{background:#b3261e1f;border:2px solid var(--ko)}.hn{background:var(--hl);color:var(--ink)}
.sp{display:flex;align-items:center;gap:10px;margin:6px 0}.sp span{flex:1}.sp b{min-width:2ch;text-align:center;font-size:1.4rem}.sp button{width:52px;padding:0;font-size:1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0;direction:ltr}.chips i{font-style:normal;background:var(--p2);border:2px solid var(--p);border-radius:8px;padding:2px 9px;font-weight:700}.chips i.r{background:var(--hl);color:var(--ink);border-color:var(--mr)}.chips b{color:var(--mr)}
.big{font-size:1.25rem;text-align:center}.note{background:var(--hl);color:var(--ink);padding:8px 12px;border-radius:10px}
.ex{border-inline-start:4px solid var(--mr);padding-inline-start:10px;margin:10px 0}.cnt{color:var(--p);font-weight:700}
.sc{font-size:2.6rem;font-weight:800;text-align:center;color:var(--p)}.row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:8px 0}
.sv{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;direction:ltr;margin:10px 0}.sv i{font-style:normal;text-align:center;font-size:.8rem;padding:4px 0;background:var(--p2);border-radius:5px}.sv i.x{opacity:.3;text-decoration:line-through}.sv i.r{background:var(--hl);color:var(--ink);font-weight:700}
.bx{display:flex;direction:ltr;gap:3px;margin:10px 0}.bx i{font-style:normal;text-align:center;background:var(--p2);border:2px solid var(--p);border-radius:6px;font-weight:700;min-width:2.2em}.bx i.r{background:var(--hl);border-color:var(--mr);color:var(--ink)}
.gr{display:grid;gap:3px;direction:ltr;margin:10px 0}.gr i{height:16px;background:var(--p2);border:2px solid var(--p);border-radius:3px}.gr i.r{background:var(--hl);border-color:var(--mr)}
@media(prefers-reduced-motion:no-preference){.bar u{transition:width .5s}}
.av{width:48px;height:48px;border-radius:50%;background:var(--p);color:var(--bg);font-weight:700;font-style:normal;display:inline-grid;place-items:center;padding:0;flex:none;margin-inline:auto}button.av{border-color:var(--p);margin-inline:auto 0}
.brand{font-size:1.3rem;color:var(--p);direction:ltr}
.tl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.tl button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:84px;background:var(--card);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ln);color:var(--ink)}.tl b{font-size:1.6rem;color:var(--mr);line-height:1.2}
.sg{display:flex;gap:8px}.sg button{flex:1}.sg .on{background:var(--hl);color:var(--ink);border-color:var(--ink)}
html[data-fs="big"] body{font-size:21px}