:root{
  --bg:#eef2ef;
  --surface:#ffffff;
  --ink:#122622;
  --muted:#5c7069;
  --accent:#0e7a6b;
  --accent-ink:#ffffff;
  --sum:#b7791f;
  --income:#1a8f5e;
  --line:#d9e2de;
  --danger:#b5452f;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1715;
    --surface:#17211e;
    --ink:#eaf2ef;
    --muted:#90a39c;
    --accent:#35c2a8;
    --accent-ink:#06211c;
    --sum:#e3a33e;
    --income:#3fd08e;
    --line:#2a3733;
    --danger:#e07a5f;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1715;
  --surface:#17211e;
  --ink:#eaf2ef;
  --muted:#90a39c;
  --accent:#35c2a8;
  --accent-ink:#06211c;
  --sum:#e3a33e;
  --income:#3fd08e;
  --line:#2a3733;
  --danger:#e07a5f;
  color-scheme:dark;
}

*{box-sizing:border-box;}
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Tajawal","Segoe UI",system-ui,sans-serif;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.num{ font-family:"IBM Plex Mono","Tajawal",monospace; font-variant-numeric:tabular-nums; }

.wrap{ max-width:520px; margin:0 auto; padding-bottom:48px; }

.topbar{
  padding:22px 2px 18px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.eyebrow{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:12px;
}
.eyebrow-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.eyebrow-row .eyebrow{ margin-bottom:0; }
.user-row{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--muted); }
.auth-title{ font-size:1.3rem; margin:0; }

.stats-row{ display:flex; gap:10px; }
.stat-tile{
  flex:1; min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
}
.stat-label{ font-size:.7rem; color:var(--muted); font-weight:700; margin-bottom:6px; }
.stat-value{ font-size:1.05rem; font-weight:700; overflow-wrap:break-word; }
.stat-value.income-color{ color:var(--income); }
.stat-value.expense-color{ color:var(--sum); }
.stat-value.remaining{ color:var(--income); }
.stat-value.remaining.negative{ color:var(--danger); }

section{ margin-top:28px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.section-head h2{ font-size:1rem; margin:0; }
.section-total{ font-weight:700; font-size:.95rem; }

.auth-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.auth-tab{
  flex:1; border:1px solid var(--line); background:var(--surface); color:var(--muted);
  font-weight:700; font-size:.9rem; padding:10px; border-radius:10px; cursor:pointer;
}
.auth-tab.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.inline-form{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:14px; margin-bottom:10px;
}
.field label{ display:block; font-size:.78rem; color:var(--muted); font-weight:700; margin-bottom:5px; }
.field input{
  width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:10px; padding:11px 12px; font:inherit;
}
.field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.save-btn{
  border:none; background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:.95rem; padding:12px; border-radius:10px; cursor:pointer;
}
.auth-status{ font-size:.82rem; color:var(--danger); min-height:1.2em; text-align:center; }

.ghost-btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:.82rem; font-weight:700; padding:9px 14px; border-radius:10px; cursor:pointer;
}
.ghost-btn:hover{ border-color:var(--accent); }
.toggle-list-btn{ width:100%; text-align:center; }

.entries{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:1px; }
.entry{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line); }
.entry-main{ flex:1; min-width:0; }
.entry-desc{ font-size:.88rem; overflow-wrap:break-word; }
.entry-date{ font-size:.72rem; color:var(--muted); margin-top:2px; }
.entry-amount{ font-weight:600; white-space:nowrap; }
.entry-del{ border:none; background:none; color:var(--muted); font-size:1.1rem; cursor:pointer; padding:2px 4px; flex:none; }
.entry-del:hover{ color:var(--danger); }
.empty-entries{ color:var(--muted); font-size:.85rem; padding:10px 2px; }

.cat-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.cat-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:14px 14px 12px; text-align:right; cursor:pointer;
  display:flex; flex-direction:column; gap:10px; min-width:0;
  transition:border-color .15s ease, transform .1s ease;
}
.cat-card:active{ transform:scale(.98); }
.cat-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cat-card:hover{ border-color:var(--accent); }
.cat-name{ font-weight:700; font-size:.98rem; overflow-wrap:break-word; padding-left:22px; }
.cat-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.cat-sum{ color:var(--sum); font-weight:600; font-size:1.02rem; }
.cat-count{ color:var(--muted); font-size:.74rem; }
.cat-del{
  position:absolute; top:8px; left:8px; width:22px; height:22px;
  border:none; background:var(--bg); color:var(--muted); border-radius:50%;
  font-size:1rem; line-height:1; cursor:pointer;
}
.cat-del:hover{ color:var(--danger); }

.empty-cats{
  border:1px dashed var(--line); border-radius:14px; padding:24px 14px;
  text-align:center; color:var(--muted); font-size:.85rem; line-height:1.6;
}

.new-cat{
  margin-top:12px; display:flex; gap:8px; background:var(--surface);
  border:1px dashed var(--line); border-radius:14px; padding:10px;
}
.new-cat input{ flex:1; min-width:0; border:none; background:transparent; font:inherit; color:var(--ink); padding:6px 4px; }
.new-cat input:focus{ outline:none; }
.new-cat button{
  border:none; background:var(--accent); color:var(--accent-ink); font-weight:700;
  font-size:.85rem; padding:8px 16px; border-radius:10px; cursor:pointer; white-space:nowrap;
}

.backdrop{ position:fixed; inset:0; background:rgba(5,12,10,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:20; }
.backdrop.open{ opacity:1; pointer-events:auto; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto;
  background:var(--surface); border-radius:20px 20px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(105%); transition:transform .22s ease; z-index:21;
  max-height:82vh; overflow-y:auto; box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.sheet.open{ transform:translateY(0); }
.sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px; }
.sheet-head h2{ font-size:1.2rem; margin:0; }
.sheet-close{
  border:none; background:var(--bg); color:var(--muted); width:32px; height:32px;
  border-radius:50%; font-size:1.1rem; line-height:1; cursor:pointer; flex:none;
}
.sheet-sum{ color:var(--sum); font-weight:600; font-size:1.3rem; margin-bottom:16px; }
.expense-form{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }

.danger-btn{
  border:none; background:var(--danger); color:#fff; font-weight:700; font-size:.9rem;
  padding:12px; border-radius:10px; cursor:pointer; width:100%;
}
.reset-hint{ font-size:.8rem; color:var(--muted); margin-bottom:12px; line-height:1.6; }
.reset-confirm{
  margin-top:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px;
}
.reset-summary{ font-size:.85rem; line-height:1.8; }
.reset-actions{ display:flex; gap:8px; }
.reset-actions > *{ flex:1; }
.reset-status{ font-size:.78rem; color:var(--income); min-height:1.1em; }

.history-card{ border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; background:var(--surface); }
.history-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:13px 14px; background:none; border:none; cursor:pointer; text-align:right;
  color:var(--ink); font:inherit;
}
.history-label{ font-weight:700; font-size:.92rem; }
.history-mini{ display:flex; gap:10px; font-size:.76rem; }
.mini-income{ color:var(--income); }
.mini-expense{ color:var(--sum); }
.mini-remaining{ color:var(--ink); font-weight:700; }
.history-detail{ padding:0 14px 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.history-row{ display:flex; justify-content:space-between; font-size:.82rem; padding:5px 0; }
.history-row.sep{ border-top:1px dashed var(--line); margin-top:4px; padding-top:9px; font-weight:700; }
.history-del{ margin-top:8px; }
.empty-history{ color:var(--muted); font-size:.85rem; text-align:center; padding:18px; border:1px dashed var(--line); border-radius:12px; }

@media (max-width:360px){
  .cat-grid{ grid-template-columns:1fr; }
}