:root{--paper:#f3eee4;--ink:#17231f;--muted:#5c6b66;--water:#0c5f5a;--water-deep:#0a2f2c;--card:#fffaf1;--line:#d9cfc0;--warn:#8a4b12;--bad:#9b1c1c;--ok:#1f6b43;--neg:#9b1c1c;--sidebar:240px;--touch:44px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body,#root{min-height:100%}body{color:var(--ink);background:var(--paper);margin:0;font-family:Segoe UI,system-ui,sans-serif;overflow-x:hidden}html[lang=ur] body,html[lang=ur] button,html[lang=ur] input,html[lang=ur] select{font-family:Noto Naskh Arabic,Nirmala UI,Urdu Typesetting,Segoe UI,Tahoma,sans-serif;line-height:1.7}h1,h2,.brand strong{font-family:Georgia,Times New Roman,serif;font-weight:600}html[lang=ur] h1,html[lang=ur] h2,html[lang=ur] .brand strong{font-family:Noto Nastaliq Urdu,Noto Naskh Arabic,Urdu Typesetting,Georgia,serif;line-height:1.85}html[lang=ur] .kicker{letter-spacing:0;text-transform:none;font-size:.85rem}h1{margin:0 0 .35rem;font-size:clamp(1.45rem,5vw,2rem)}h2{margin:0 0 .6rem;font-size:1.1rem}.app-shell{grid-template-columns:var(--sidebar) 1fr;min-height:100dvh;display:grid}.mobile-bar,.backdrop{display:none}.sidebar{background:var(--water-deep);color:#e8f3f1;padding:1.4rem 1rem;padding-left:max(1rem, var(--safe-left));flex-direction:column;gap:1.5rem;display:flex}.brand{align-items:center;gap:.75rem;display:flex}.brand.compact{gap:.5rem}.brand small{color:#9dc4bf;font-size:.8rem;display:block}.mark{color:#2c2108;background:#e8c872;border-radius:.7rem;flex-shrink:0;place-items:center;width:2.4rem;height:2.4rem;font-family:Georgia,serif;font-size:1.3rem;display:grid}.sidebar nav{flex-direction:column;gap:.25rem;display:flex}.nav{appearance:none;color:inherit;text-align:start;min-height:var(--touch);cursor:pointer;font:inherit;background:0 0;border:0;border-radius:.5rem;padding:.7rem .8rem}.nav.active,.nav:hover{background:#ffffff14}.main{flex-direction:column;min-width:0;display:flex}.topbar{padding:1rem 1.5rem;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:.75rem;padding-inline-end:max(1.5rem, var(--safe-right));display:flex}.topbar-actions{align-items:center;gap:.6rem;display:flex}.kicker{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.75rem}.page{padding:1.5rem;padding-right:max(1.5rem, var(--safe-right));padding-bottom:max(1.5rem, var(--safe-bottom))}.lede{color:var(--muted);max-width:46rem;line-height:1.45}.banner{margin:1rem 1.5rem 0;margin-right:max(1.5rem, var(--safe-right));color:#20452c;background:#e7efe8;border-radius:.55rem;padding:.7rem .9rem;line-height:1.4}.banner.warn{color:var(--warn);background:#f6e6cf}.banner.bad{color:var(--bad);background:#f8d7d4}.banner.ok{color:var(--ok);background:#dcefe3}.stat-grid,.account-grid,.month-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:.85rem;margin:1.2rem 0;display:grid}.stat,.card{background:var(--card);border:1px solid var(--line);border-radius:.85rem;min-width:0;padding:1rem 1.1rem}.stat span,.muted{color:var(--muted)}.stat strong{overflow-wrap:anywhere;margin-top:.35rem;font-size:1.2rem;display:block}.split{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;display:grid}.grow{min-width:0}.filters{flex-wrap:wrap;gap:.6rem;margin:1rem 0;display:flex}.filters>input,.filters>select,.filters>button{min-height:var(--touch)}input,select,button{font:inherit;border:1px solid var(--line);background:#fff;border-radius:.5rem;max-width:100%;padding:.55rem .75rem;font-size:1rem}button{cursor:pointer;-webkit-tap-highlight-color:#0c5f5a2e}button.primary{background:var(--water);color:#fff;border-color:var(--water);min-height:var(--touch)}button.primary.compact{white-space:nowrap;flex-shrink:0;padding-inline:.85rem}button.link,.link{color:var(--water);cursor:pointer;min-height:var(--touch);background:0 0;border:0;padding:.35rem 0;text-decoration:underline}.icon-btn{width:var(--touch);height:var(--touch);place-items:center;padding:0;font-size:1.25rem;display:grid}.table-wrap{-webkit-overflow-scrolling:touch;width:100%;margin:.4rem 0 1rem;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:36rem;font-size:.95rem}.table-wrap.compact table{min-width:22rem}th,td{text-align:start;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;padding:.55rem .45rem}.plain,.checks{margin:0;padding:0;list-style:none}.plain li,.check{justify-content:space-between;gap:1rem;padding:.4rem 0;display:flex}.plain li{align-items:flex-start}.account .row-btn{width:100%;min-height:var(--touch);background:0 0;justify-content:space-between;gap:.75rem;margin:.25rem 0;display:flex}.account .static{cursor:default}.money{overflow-wrap:anywhere}.money.neg{color:var(--neg);font-weight:700}.stack label{flex-direction:column;gap:.35rem;margin-bottom:.8rem;display:flex}.stack input,.stack select{width:100%}.checkline{min-height:var(--touch);align-items:flex-start;gap:.6rem;flex-direction:row!important}.checkline input[type=checkbox]{flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:.2rem}.checks{flex-direction:column;gap:.65rem;display:flex}.check{background:var(--card);border:1px solid var(--line);border-radius:.7rem;align-items:flex-start;padding:.8rem 1rem}.check .mark{font-weight:700}.check.ok .mark{color:var(--ok)}.check.warning .mark,.check.error .mark{color:var(--warn)}.month{text-align:start;min-height:6.5rem}.lang-switch{gap:.35rem;margin-top:.5rem;display:flex}.lang-switch.compact{margin-top:0}.lang-btn{min-height:var(--touch);color:inherit;background:#ffffff14;border-color:#0000;padding:.35rem .7rem}.topbar .lang-btn,.page .lang-btn{background:var(--card);color:var(--ink);border-color:var(--line)}.lang-btn.active{background:var(--water);color:#fff;border-color:var(--water)}.sidebar .lang-btn.active{color:#2c2108;background:#e8c872;border-color:#e8c872}.month.active{outline:2px solid var(--water)}.due-block{background:#f8e8e4;border-radius:.7rem;margin:1rem 0 1.4rem;padding:.6rem .8rem}.due-block h2{color:var(--bad)}.howto{flex-direction:column;gap:.75rem;margin:.4rem 0 1rem;padding-inline-start:1.3rem;line-height:1.45;display:flex}.howto li{padding-inline-start:.2rem}.howto li::marker{color:var(--water);font-weight:700}.history-list{flex-direction:column;gap:.85rem;margin:1rem 0 0;padding:0;list-style:none;display:flex}.history-item{margin:0}.history-head{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.8rem;display:grid}.history-head p{margin:.25rem 0 0}.history-actions{margin:0}.history-detail{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.8rem}@media (width<=720px){.history-head{grid-template-columns:1fr}}@media (width<=860px){.app-shell{grid-template-columns:1fr}.desktop-only{display:none}.mobile-bar{z-index:20;background:var(--water-deep);color:#e8f3f1;padding:calc(.55rem + var(--safe-top)) .75rem .55rem;padding-right:max(.75rem, var(--safe-right));padding-left:max(.75rem, var(--safe-left));justify-content:space-between;align-items:center;gap:.6rem;display:flex;position:sticky;top:0}.mobile-bar .brand{min-width:0}.mobile-bar .brand strong{color:#e8f3f1;white-space:nowrap}.mobile-bar .mark{width:2rem;height:2rem;font-size:1.1rem}.mobile-bar .icon-btn{color:inherit;background:#ffffff14;border-color:#0000;flex-shrink:0}.backdrop{z-index:25;background:#0c181673;border:0;width:100%;height:100%;margin:0;padding:0;display:block;position:fixed;inset:0}.sidebar{z-index:30;width:min(86vw,300px);padding-top:calc(1rem + var(--safe-top));visibility:hidden;pointer-events:none;transition:transform .2s;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-105%)}.sidebar.open{visibility:visible;pointer-events:auto;transform:translate(0)}html[dir=rtl] .sidebar{padding-left:1rem;padding-right:max(1rem, var(--safe-right));left:auto;right:0;transform:translate(105%)}html[dir=rtl] .sidebar.open{transform:translate(0)}.topbar,.page{padding:.9rem}.banner{margin:.75rem .9rem 0}.stat-grid,.account-grid,.month-grid{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.filters>input,.filters>select,.filters>button{flex:100%}.plain li,.check{flex-direction:column;gap:.25rem}}@media (width<=520px){.stat-grid,.account-grid,.month-grid{grid-template-columns:1fr}table{min-width:32rem;font-size:.9rem}}