:root{--bg:#eceff2;--card:#fff;--ink:#14202b;--mute:#5d6b78;--line:#d5dbe1;--hd:#14202b;--acc:#f5b700;--pri:#0f5c8c;--dng:#c0392b;--pending:#c77d00;--partial:#1f6fe0;--fulfilled:#1b8f55;--closed:#6b7280}
@media(prefers-color-scheme:dark){:root{--bg:#0e151c;--card:#18222c;--ink:#e8edf1;--mute:#97a5b1;--line:#2b3946;--hd:#0a1016;--pri:#5eb3e8;--dng:#ff7b6b;--pending:#f0a63a;--partial:#6aa5ff;--fulfilled:#4cc98a;--closed:#9aa4af}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,Roboto,"Noto Sans Arabic",sans-serif;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;background:var(--hd);color:#fff;padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
h1{flex:1;margin:0;font-size:1.15rem;font-weight:700}
.ib{background:none;border:0;color:inherit;min-width:44px;height:44px;font-size:1.4rem;border-radius:10px}
#lg{font-size:1rem;font-weight:700;border:1px solid #ffffff55}
[dir=rtl] #bk{transform:scaleX(-1)}
main{padding:12px;max-width:640px;margin:auto}
nav{position:fixed;inset:auto 0 0;display:flex;background:var(--hd);padding-bottom:env(safe-area-inset-bottom)}
nav a{flex:1;text-align:center;color:#9fb0bf;text-decoration:none;padding:16px 4px;font-weight:600;font-size:.9rem;border-top:3px solid transparent}
nav a.on{color:#fff;border-color:var(--acc)}
#fab{position:fixed;inset-inline-end:16px;bottom:calc(84px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:18px;background:var(--acc);color:#14202b;font-size:2rem;display:grid;place-items:center;text-decoration:none;box-shadow:0 4px 14px #0005;z-index:4}
.card{background:var(--card);border:1px solid var(--line);border-inline-start:6px solid var(--c);border-radius:12px;margin-bottom:12px;overflow:hidden}
.s-pending{--c:var(--pending)}.s-partial{--c:var(--partial)}.s-fulfilled{--c:var(--fulfilled)}.s-closed{--c:var(--closed)}
.cb{padding:12px 14px;cursor:pointer}.r{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
h3{margin:0;font-size:1.05rem}.m{color:var(--mute);font-size:.88rem;margin-top:4px}
.badge{white-space:nowrap;font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:99px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid var(--c)}
.pg{height:6px;background:var(--line);border-radius:9px;margin-top:10px;overflow:hidden}.pg i{display:block;height:100%;background:var(--c)}
.ca{display:flex;border-top:1px solid var(--line)}
.ca button,.bt button,.chip,.btn{font:inherit;font-weight:600;border:0;background:none;color:var(--pri);min-height:46px;padding:0 12px}
.ca button{flex:1}.ca button+button{border-inline-start:1px solid var(--line)}
.danger{color:var(--dng)!important}
.bar input,.fld input,.sheet input{width:100%;font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0}
.chip{border:1px solid var(--line);border-radius:99px;white-space:nowrap;min-height:38px;color:var(--ink)}.chip.on{background:var(--hd);color:#fff;border-color:var(--hd)}
.fld{margin-bottom:14px}.fld label,.lab{display:block;font-size:.85rem;color:var(--mute);margin-bottom:4px}
.pk{width:100%;text-align:start;font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);min-height:48px}.pk:disabled{opacity:.6}
.btn{background:var(--pri);color:var(--bg);border-radius:12px;width:100%;margin-top:8px}.btn.alt{background:none;color:var(--pri);border:1px solid var(--pri)}.btn:disabled{opacity:.4}
[dir=rtl] .btn{color:var(--bg)}
.ln{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px}
.lt{flex:1;min-width:0}.lt small{display:block;color:var(--mute)}
.st{display:flex;align-items:center}.st button{width:40px;height:44px;font-size:1.3rem;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.st input{width:62px;height:44px;text-align:center;border:1px solid var(--line);border-inline:0;font:inherit;background:var(--card);color:var(--ink)}
.row{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;padding:9px 12px;border-top:1px solid var(--line);align-items:center}.row.h{color:var(--mute);font-size:.8rem;border:0}.row b{font-weight:600}
.row span{min-width:40px;text-align:end}
.act{display:grid;gap:8px;margin-top:14px}.act .btn{margin:0}
.empty{text-align:center;color:var(--mute);padding:36px 12px}
.sec{font-weight:700;margin:18px 2px 8px}
.seg{display:flex;gap:8px}.seg .btn{margin:0}
.sheet{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column}
.sh{display:flex;gap:6px;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;background:var(--hd)}
#pl{overflow:auto;flex:1}.opt{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--card)}.opt small{display:block;color:var(--mute)}
.modal{position:fixed;inset:0;background:#000a;z-index:30;display:grid;place-items:center;padding:20px}
.box{background:var(--card);border-radius:14px;padding:18px;max-width:420px;width:100%}.bt{display:flex;gap:8px;justify-content:flex-end}
#toast{position:fixed;inset-inline:16px;bottom:calc(90px + env(safe-area-inset-bottom));background:var(--hd);color:#fff;padding:12px 14px;border-radius:10px;z-index:40;text-align:center}
small.hint{color:var(--mute);display:block;margin-top:6px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}