:root{--bg:#f4f6f8;--card:#fff;--tx:#1b1f24;--mu:#66707c;--pr:#1f6feb;--on:#fff;--bd:#dfe3e8;--dg:#d1242f;--ok:#1a7f37;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1317;--card:#181d23;--tx:#e8ebef;--mu:#98a2af;--pr:#4c8dff;--on:#fff;--bd:#2a313a;--dg:#ff7b7b;--ok:#3fb950}}
:root[data-theme="dark"]{--bg:#0f1317;--card:#181d23;--tx:#e8ebef;--mu:#98a2af;--pr:#4c8dff;--on:#fff;--bd:#2a313a;--dg:#ff7b7b;--ok:#3fb950}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{max-width:640px;margin:0 auto;padding:14px 14px 96px}
h1{font-size:22px;margin:4px 0 12px}h2{font-size:16px;margin:16px 0 8px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px;margin-bottom:10px}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit;margin:4px 0 8px}
label{display:block;font-size:12px;color:var(--mu);flex:1}
button{font:inherit;border:0;border-radius:8px;padding:10px 14px;background:var(--pr);color:var(--on);cursor:pointer}
button.sec{background:transparent;color:var(--pr);border:1px solid var(--bd)}
button.dg{background:transparent;color:var(--dg);border:1px solid var(--bd)}
button.x{background:transparent;color:var(--dg);padding:10px 8px;margin-top:14px}
.row{display:flex;gap:8px;align-items:flex-start}.row>*{min-width:0}
.seg{display:flex;border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin:6px 0 10px}
.seg button{flex:1;border-radius:0;background:var(--card);color:var(--tx)}
.seg button.on{background:var(--pr);color:var(--on)}
.mu{color:var(--mu);font-size:13px}.r{text-align:right}.b{font-weight:600}
.item{display:flex;justify-content:space-between;gap:10px;align-items:center}
.pill{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--bd)}
.paid{color:var(--ok)}.due{color:var(--dg)}
.tot div{display:flex;justify-content:space-between;padding:3px 0}
.tot .g{font-size:18px;font-weight:700;border-top:1px solid var(--bd);margin-top:4px;padding-top:8px}
nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
nav button{flex:1;background:transparent;color:var(--mu);border-radius:0;padding:12px 4px;font-size:13px}
nav button.on{color:var(--pr);font-weight:600}
table{width:100%;border-collapse:collapse;margin:10px 0}th,td{padding:6px 4px;border-bottom:1px solid var(--bd);text-align:left;font-size:14px}th{color:var(--mu);font-weight:500}td.r,th.r{text-align:right}
.fab{position:fixed;right:16px;bottom:78px;border-radius:99px;padding:14px 20px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
@media print{nav,.noprint,.fab{display:none!important}body,.card{background:#fff;color:#000}.card{border:0}}