:root{
  --bg:#f3f5f1; --surface:#ffffff; --line:#dde3d8; --fg:#1e2a22; --muted:#66746a;
  --accent:#2f6b4f; --accent-soft:#e2efe7; --on-accent:#ffffff;
  --ok:#2f8a5a; --ok-soft:#e3f3ea; --low:#b7791f; --low-soft:#fbf0dc; --out:#c0392b; --out-soft:#fbe6e3;
  --display:"Reem Kufi","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121814; --surface:#1a221d; --line:#2b362f; --fg:#e6ede8; --muted:#94a39a;
  --accent:#6fbf96; --accent-soft:#1f3328; --on-accent:#0f1712;
  --ok:#5cc28c; --ok-soft:#1b3326; --low:#e3ac4f; --low-soft:#3a2e17; --out:#ef7b6d; --out-soft:#3d1f1b;
  color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap,.top-in{max-width:680px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{padding-block:16px 40px;display:flex;flex-direction:column;gap:14px}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-block:10px 4px}
.top h1{font-family:var(--display);font-size:22px;margin:0;color:var(--accent)}
.who{font-size:13px;color:var(--muted)}
.link{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;text-decoration:underline}
.tabs{display:flex;gap:4px;padding-block:0;overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;padding:10px 12px;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;font-weight:500}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--out);color:#fff;font-size:11px;text-align:center;font-variant-numeric:tabular-nums}
.badge.zero{background:var(--line);color:var(--muted)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px}
.login-card h1{font-family:var(--display);color:var(--accent);margin:0;font-size:30px}
.login-card p{margin:0 0 8px;color:var(--muted)}
label{font-size:13px;color:var(--muted)}
input,select{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;min-width:0;width:100%}
.err{color:var(--out)!important;margin:4px 0 0!important}

/* buttons */
.btn{border:0;background:var(--accent);color:var(--on-accent);border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:var(--accent-soft);color:var(--accent)}
.btn.danger{background:var(--out-soft);color:var(--out)}
.btn.sm{padding:6px 12px;font-size:13px}

/* stock */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;border:1.5px solid transparent;cursor:pointer;text-align:start}
.stat b{font-family:var(--display);font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12px}
.stat.ok{background:var(--ok-soft)} .stat.ok b{color:var(--ok)}
.stat.low{background:var(--low-soft)} .stat.low b{color:var(--low)}
.stat.out{background:var(--out-soft)} .stat.out b{color:var(--out)}
.stat[aria-pressed="true"]{border-color:currentColor}
.search{width:100%}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.group h2{font-family:var(--display);font-size:16px;margin:4px 0 6px;color:var(--muted);font-weight:600}
.list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.row[data-s="ok"] .dot{background:var(--ok)} .row[data-s="low"] .dot{background:var(--low)} .row[data-s="out"] .dot{background:var(--out)}
.info{flex:1;min-width:0;border:0;background:none;text-align:start;padding:0;cursor:pointer}
.name{font-weight:600;overflow-wrap:anywhere}
.meta{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.stale{color:var(--low)}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
.seg button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:6px 8px;cursor:pointer;min-width:44px}
.seg button+button{border-inline-start:1px solid var(--line)}
.seg button.on.ok{background:var(--ok);color:#fff} .seg button.on.low{background:var(--low);color:#fff} .seg button.on.out{background:var(--out);color:#fff}
.row{flex-wrap:wrap}
.fields{flex-basis:100%;display:grid;grid-template-columns:110px 1fr;gap:6px;padding-inline-start:18px}
.fields input{padding:6px 10px;font-size:13px;border-radius:8px;background:var(--bg);border-color:transparent;transition:border-color .2s,background .2s}
.fields input:hover{border-color:var(--line)}
.fields input:focus{background:var(--surface);border-color:var(--accent)}
.fields input.saving{border-color:var(--low)}
.fields input.saved{border-color:var(--ok)}
.shop-row .sn em{display:block;font-style:normal;color:var(--muted);font-size:12px}
.add{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.add select{width:auto}
.empty{padding:24px 16px;text-align:center;color:var(--muted)}
.note{font-size:12px;color:var(--muted);margin:0}

/* shop */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel h2{font-family:var(--display);margin:0;font-size:18px}
.shop-cat{font-size:13px;color:var(--muted);margin:8px 0 2px;font-weight:600}
.shop-row{display:grid;grid-template-columns:auto 1fr 84px 92px;gap:8px;align-items:center;padding:6px 0;border-top:1px dashed var(--line)}
.shop-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.shop-row .sn{min-width:0;overflow-wrap:anywhere}
.shop-row .sn small{display:block;color:var(--low);font-size:11px}
.shop-row input.p,.shop-row input.qy{padding:6px 8px;font-size:13px;font-variant-numeric:tabular-nums}
.shop-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.shop-foot b{font-variant-numeric:tabular-nums}
.copy-src{white-space:pre-wrap;background:var(--bg);border-radius:10px;padding:10px;font-family:var(--body);margin:0;user-select:text}

/* log */
.month{display:flex;align-items:center;justify-content:space-between;gap:8px}
.month b{font-family:var(--display);font-size:18px}
.spend{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.spend-total{display:flex;justify-content:space-between;align-items:baseline}
.spend-total b{font-family:var(--display);font-size:28px;color:var(--accent);font-variant-numeric:tabular-nums}
.bar-row{display:grid;grid-template-columns:110px 1fr 70px;gap:8px;align-items:center;font-size:13px}
.bar-track{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:4px}
.bar-row .v{text-align:end;font-variant-numeric:tabular-nums}
.log-day{font-size:13px;color:var(--muted);margin:8px 0 4px;font-weight:600}
.log-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.log-row:first-child{border-top:0}
.log-row .info{cursor:default}
.log-row .pr{font-variant-numeric:tabular-nums;font-weight:600}
.x{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 4px}

/* edit sheet */
.sheet-bg{position:fixed;inset:0;background:rgb(0 0 0 / .4);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;background:var(--surface);border-radius:16px 16px 0 0;padding:18px max(16px,env(safe-area-inset-left,0px)) calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px}
.sheet h2{font-family:var(--display);margin:0 0 4px}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

.toast{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:30;font-size:14px;max-width:calc(100% - 32px)}

@media (max-width:420px){
  .fields{grid-template-columns:92px 1fr}
  .seg button{min-width:38px;padding:6px 5px}
  .shop-row{grid-template-columns:auto 1fr 64px 76px}
  .bar-row{grid-template-columns:90px 1fr 60px}
}
@media (prefers-reduced-motion:no-preference){.stat,.chip,.seg button{transition:background .15s,color .15s}}