:root{--bg:#f5f7f9;--surface:#fff;--ink:#0b1220;--muted:#5b6779;--line:#e3e7ec;--brand:#0a7d5a;--danger:#b42318;--warn:#a15c07;--ok:#067647;--focus:#2563eb;--r:14px;--sh:0 10px 30px rgb(2 6 23 / .07)}
[data-theme=dark]{--bg:#0b0f14;--surface:#121821;--ink:#e6edf5;--muted:#93a1b3;--line:#223040;--brand:#19a97b;--danger:#ef6b60;--warn:#e2a03f;--ok:#3ecf8e;--focus:#7fb1ff;--sh:0 10px 30px rgb(0 0 0/.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b0f14;--surface:#121821;--ink:#e6edf5;--muted:#93a1b3;--line:#223040;--brand:#19a97b;--focus:#7fb1ff}}
*{box-sizing:border-box}html,body{margin:0}body{min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
html[dir=rtl] body{font-family:"Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif}
.skip{position:absolute;top:-3rem;inset-inline-start:1rem;background:var(--surface);padding:.4rem .8rem;border-radius:8px}.skip:focus{top:.5rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
header{position:sticky;top:0;z-index:5;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.7rem 1rem;padding-top:calc(.7rem + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:900;letter-spacing:.4px}.brand::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-inline-start:4px}
nav{display:flex;gap:.25rem;flex-wrap:wrap}nav button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;padding:.55rem .8rem;border-radius:10px;cursor:pointer;min-height:44px}
nav button.active{background:var(--bg);color:var(--ink)}
.grow{flex:1}button{font:inherit;min-height:44px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:.6rem 1rem;font-weight:700;cursor:pointer}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}button.ghost{border:0;background:transparent}.danger{background:var(--danger);border-color:var(--danger);color:#fff}
button:disabled{opacity:.55;cursor:not-allowed}
main{max-width:920px;margin:0 auto;padding:1.2rem;padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
h1{font-size:1.6rem;margin:.2rem 0 1rem}h2{font-size:1.05rem;margin:1.4rem 0 .6rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--sh);margin-bottom:.9rem}
.grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.muted{color:var(--muted)}.right{text-align:end}.space{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
label{display:grid;gap:.3rem;font-weight:600;font-size:.85rem;margin-bottom:.7rem}
input,select{min-height:46px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);padding:.6rem .8rem;font:inherit;width:100%}
.balance{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:.72rem;font-weight:800;padding:.15rem .55rem;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.pill.ok{color:var(--ok)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--danger)}
.login{max-width:420px;margin:7vh auto}
.state{padding:1.2rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
.toast{position:fixed;inset-inline-end:1rem;bottom:1rem;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:10px;opacity:0;transition:.2s}
.toast.show{opacity:1}.toast.bad{background:var(--danger);color:#fff}
.hide{display:none}
@media (max-width:640px){nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}main{padding:1rem .8rem}}