/* Layout idea: one calm column on phones, report cards side by side on wide screens. White by default, dark is a manual switch.
   Teal = household, green = money in, brick = money out, amber = money taken. */
:root{
  --bg:#f4f7f6; --surface:#ffffff; --ink:#14201f; --muted:#5d6f6d; --line:#dbe3e1;
  --accent:#0b6e6e; --accent-ink:#ffffff; --in:#1d7a4b; --out:#b4432e; --taken:#946200; --soft:#e4efed;
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0e1514; --surface:#162120; --ink:#e6efed; --muted:#93a8a5; --line:#273533;
  --accent:#3fb8b0; --accent-ink:#06201f; --in:#5fcf93; --out:#f08a73; --taken:#e5b648; --soft:#1d2d2b; color-scheme:dark;
}
html[lang="ur"]{ --font-display:'Noto Naskh Arabic',serif; --font-body:'Noto Naskh Arabic','Hanken Grotesk',system-ui,sans-serif; }
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
html[lang="ur"] body{line-height:1.8}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.6;cursor:default}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:16px}
.muted{color:var(--muted)}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0 16px}
h1{font-family:var(--font-display);font-size:1.7rem;margin:0;letter-spacing:-.01em;text-wrap:balance}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface);overflow:hidden}
.lang button{border:0;background:none;padding:6px 14px;font-weight:600}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:600}
.banner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);background:var(--soft);border-radius:10px;padding:8px 12px;margin-bottom:14px}
.banner button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 10px;font-weight:600}
.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;padding:10px 18px;font-weight:700}
.ghost{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-weight:600}
.link{background:none;border:0;color:var(--accent);font-weight:600;padding:6px 0;text-decoration:underline}
.center{max-width:440px;margin:24px auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.card h2{font-family:var(--font-display);font-size:1.05rem;margin:0 0 12px}
.card + .card{margin-top:16px}
.grid > .card{margin-top:0}
.msg{font-size:.92rem;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--soft)}
.msg.bad{color:var(--out)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.nav{display:flex;align-items:center;gap:6px}
.nav .label{font-family:var(--font-display);font-weight:700;font-size:1.05rem;min-width:11em;text-align:center}
.iconbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:1.2rem;line-height:1}
[dir="rtl"] .flip{transform:scaleX(-1)}
.periods{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--soft);border-radius:12px;padding:4px;margin-bottom:12px}
.periods button{border:0;background:none;border-radius:9px;padding:8px 4px;font-weight:700;color:var(--muted)}
.periods button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{background:none;border:0;padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media (min-width:900px){ .grid.two{grid-template-columns:1fr 1fr;align-items:start} }
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){ .tiles{grid-template-columns:repeat(2,1fr)} }
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;border-inline-start:6px solid var(--line);min-width:0}
.tile.in{border-inline-start-color:var(--in)} .tile.out{border-inline-start-color:var(--out)} .tile.tk{border-inline-start-color:var(--taken)} .tile.bal{border-inline-start-color:var(--accent)}
.tile .k{color:var(--muted);font-size:.85rem}
.tile .v{font-family:var(--font-display);font-weight:700;font-size:1.35rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile.in .v{color:var(--in)} .tile.out .v{color:var(--out)} .tile.tk .v{color:var(--taken)}
.tablewrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:8px 6px;text-align:end;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:start;white-space:nowrap;min-width:4.5em;padding-inline-end:12px}
.tbl thead th{font-size:.8rem;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.tbl tbody td{border-bottom:1px solid var(--line)}
.tbl tfoot td{font-weight:700}
.c-in{color:var(--in)} .c-out{color:var(--out)} .c-tk{color:var(--taken)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;margin-bottom:12px}
.row .name{font-weight:600;overflow-wrap:anywhere}
.row .amt{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.meter{grid-column:1/-1;height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--out)}
.pct{color:var(--muted);font-size:.82rem;font-weight:400;margin-inline-start:6px}
.trend{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:8px}
.trend .b{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.trend .b i{display:block;width:100%;background:var(--out);border-radius:4px 4px 0 0;min-height:2px}
.trend .b i.zero{background:var(--line)}
.trend .b span{font-size:.62rem;color:var(--muted);margin-top:4px;height:1.1em;white-space:nowrap}
.empty{color:var(--muted);padding:8px 0}
ul.list{list-style:none;margin:0;padding:0}
ul.list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
ul.list li:last-child{border-bottom:0}
.li-main{font-weight:600;overflow-wrap:anywhere}
.li-sub{color:var(--muted);font-size:.86rem;overflow-wrap:anywhere}
.li-amt{font-variant-numeric:tabular-nums;font-weight:700;text-align:end}
.del{border:0;background:none;color:var(--muted);font-size:.82rem;padding:2px 0;text-align:end;width:100%}
.del.armed{color:var(--out);font-weight:700}
.tag{display:inline-block;font-size:.72rem;font-weight:700;border-radius:6px;padding:0 6px;margin-inline-start:6px;background:var(--soft);color:var(--accent)}
.overlay{position:fixed;inset:0;background:rgba(5,15,14,.55);display:flex;align-items:flex-end;justify-content:center;z-index:10}
@media (min-width:640px){ .overlay{align-items:center} }
.sheet{background:var(--surface);width:100%;max-width:460px;border-radius:20px 20px 0 0;padding:20px;max-height:92%;overflow:auto}
@media (min-width:640px){ .sheet{border-radius:20px} }
.sheet h2{font-family:var(--font-display);margin:0 0 14px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.seg button{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 4px;font-weight:700}
.seg button[aria-pressed="true"]{color:#fff;border-color:transparent}
.seg button.contribution[aria-pressed="true"]{background:var(--in)}
.seg button.expense[aria-pressed="true"]{background:var(--out)}
.seg button.taken[aria-pressed="true"]{background:var(--taken)}
label{display:block;font-size:.88rem;color:var(--muted);margin-bottom:4px}
.field{margin-bottom:12px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-height:44px}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.chips{display:grid;gap:8px;margin-bottom:14px}
.person{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--soft);border-radius:12px;padding:8px 12px}
.person button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:2px 10px;font-size:.85rem}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;letter-spacing:.12em;font-weight:700;direction:ltr;unicode-bidi:isolate}
.inline{display:flex;gap:8px}
.inline input{flex:1}
hr.or{border:0;border-top:1px solid var(--line);margin:18px 0}
.grid > *, .card{min-width:0}
.tile .v,.row .amt,.li-amt,.tbl td,.tbl th{font-family:'Hanken Grotesk',system-ui,sans-serif}
.tile .v{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif}