:root{--bg:#eef4fb;--surf:#fff;--ink:#0a1f5c;--mut:#5a6b94;--line:#d3def0;--acc:#0b5ed7;--accink:#fff;--grn:#2e8b1f;--warn:#b45309;--warnbg:#fff1d6;--ok:#166534;--okbg:#dcfce7;--bad:#c0123f;--badbg:#ffe0e8;--row:#f5f8fd;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1430;--surf:#111f45;--ink:#e6eeff;--mut:#9db0dd;--line:#25376b;--acc:#4d9bff;--accink:#06122e;--grn:#6fd05a;--warn:#fbbf24;--warnbg:#3b2a08;--ok:#86efac;--okbg:#10341e;--bad:#ff8fae;--badbg:#45101f;--row:#0e1a3b;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a1430;--surf:#111f45;--ink:#e6eeff;--mut:#9db0dd;--line:#25376b;--acc:#4d9bff;--accink:#06122e;--grn:#6fd05a;--warn:#fbbf24;--warnbg:#3b2a08;--ok:#86efac;--okbg:#10341e;--bad:#ff8fae;--badbg:#45101f;--row:#0e1a3b;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Sora,system-ui,sans-serif}
.bar{height:5px;background:linear-gradient(90deg,#0b6fe0 0 25%,#2e9a1f 25% 50%,#f5a30a 50% 75%,#e6195f 75%)}
header{background:linear-gradient(90deg,#0a3fa8,#0b6fe0);color:#fff}
.w{max-width:1200px;margin:0 auto;padding:0 20px}
header .w{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.logo{height:64px;background:#fff;border-radius:12px;padding:4px 8px;display:block}
header b{font-size:18px}
nav{background:#0a1f5c}
nav .w{display:flex;gap:2px;overflow-x:auto}
nav button{background:none;border:0;border-bottom:3px solid transparent;color:#cfe0ff;font:600 14px Sora,sans-serif;padding:13px 16px;cursor:pointer;white-space:nowrap}
nav button.on{color:#fff;border-bottom-color:#f5a30a}
nav i{font-style:normal;background:#e6195f;color:#fff;border-radius:99px;padding:1px 8px;font-size:12px;margin-left:5px}
main{padding-top:20px;padding-bottom:40px}
h2{font-size:17px;margin:0 0 12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.tile{border-radius:14px;padding:14px 16px;color:#fff;background:#0b5ed7}
.tile:nth-child(2){background:#e6195f}.tile:nth-child(3){background:#d98600}.tile:nth-child(4){background:#c0123f}.tile:nth-child(5){background:#2e8b1f}.tile:nth-child(6){background:#0a3fa8}
.tile b{display:block;font-size:22px}.tile span{font-size:13px;opacity:.92}
.card{background:var(--surf);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.card>h3{margin:0;padding:11px 16px;background:#f5a30a;color:#2b1d00;font-size:15px}
.pad{padding:16px}
.chart{display:flex;align-items:flex-end;gap:8px;height:170px;padding:16px 16px 0}
.chart div{flex:1;text-align:center;font-size:11px;color:var(--mut);display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.chart u{display:block;background:linear-gradient(#18a9ff,#0b5ed7);border-radius:5px 5px 0 0;min-height:2px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px}
th{background:#0a1f5c;color:#fff;text-align:left;font-size:13px;padding:10px 12px;white-space:nowrap}
td{padding:9px 12px;border-top:1px solid var(--line)}
tbody tr:nth-child(even){background:var(--row)}
tfoot td{font-weight:700;background:var(--row)}
.tool{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tool input{max-width:320px}
label{display:block;font-size:13px;color:var(--mut);margin:0 0 4px}
input,select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:14px Sora,sans-serif}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
button.btn{border:1px solid var(--acc);background:var(--acc);color:var(--accink);font:600 13px Sora,sans-serif;padding:8px 13px;border-radius:9px;cursor:pointer}
button.btn.ghost{background:none;color:var(--acc)}button.btn.del{background:none;border-color:var(--bad);color:var(--bad)}
a.wa{background:#1fa855;color:#fff;font:600 13px Sora,sans-serif;padding:8px 12px;border-radius:9px;text-decoration:none;display:inline-block}
td .btn,td .wa{margin:2px 4px 2px 0}
.chip{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap}
.chip.paid{background:var(--okbg);color:var(--ok)}.chip.due{background:var(--warnbg);color:var(--warn)}.chip.over{background:var(--badbg);color:var(--bad)}
.mut{color:var(--mut)}.empty{text-align:center;color:var(--mut);padding:28px}.big{font-size:28px;font-weight:700}
.hide{display:none}
@media (max-width:640px){.logo{height:48px}header b{font-size:15px}}
@media print{header,nav,.tool,button,.fg{display:none!important}}
/* --- server app additions --- */
nav .w{overflow:visible;flex-wrap:wrap}
nav a,nav summary{display:block;color:#cfe0ff;font:600 14px Sora,sans-serif;padding:13px 16px;text-decoration:none;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;list-style:none}
nav summary::-webkit-details-marker{display:none}
nav a.on,nav details.on>summary{color:#fff;border-bottom-color:#f5a30a}
nav details{position:relative}
nav details>div{position:absolute;z-index:20;top:100%;left:0;min-width:230px;background:var(--surf);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.18);padding:6px 0}
nav details>div a{color:var(--ink);border:0;padding:10px 16px}
nav details>div a:hover{background:var(--acc);color:#fff}
.who{text-align:right;line-height:1.3}.who small{display:block;opacity:.85;font-size:12px}.who a{color:#fff;font-size:12px}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:14px;font-weight:600}
.flash.ok{background:var(--okbg);color:var(--ok)}.flash.bad{background:var(--badbg);color:var(--bad)}
.homegrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:16px;align-items:start}
.homegrid .card{margin:0}
table.kv{min-width:0}table.kv td:last-child{text-align:right;font-weight:700}
.chart{height:280px}
.detgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.full{grid-column:1/-1}textarea{min-height:80px;resize:vertical}
a.nm{color:var(--acc);font-weight:600;text-decoration:none}a.nm:hover{text-decoration:underline}
.acts{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;margin-top:14px}
td form{display:inline}
.r{text-align:right}
.loginbox{max-width:380px;margin:60px auto}
@media (max-width:860px){.homegrid,.detgrid{grid-template-columns:1fr}}
main.w{padding-top:20px;padding-bottom:40px}
textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:14px Sora,sans-serif}
a.btn{display:inline-block;text-decoration:none;border:1px solid var(--acc);background:var(--acc);color:var(--accink);font:600 13px Sora,sans-serif;padding:8px 13px;border-radius:9px}
a.btn.ghost{background:none;color:var(--acc)}
.chart div{font-size:10px;white-space:nowrap}
.tabs{display:flex;gap:0}.tabs a{flex:1;text-align:center;padding:12px;font-weight:600;text-decoration:none;color:var(--mut);background:var(--surf);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0}
.tabs a.on{background:#f5a30a;color:#2b1d00;border-color:#f5a30a}
dialog{border:1px solid var(--line);color:var(--ink);background:var(--surf)}dialog::backdrop{background:rgba(10,31,92,.45)}
details.offs summary{list-style:none;display:inline-block}details.offs summary::-webkit-details-marker{display:none}
fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{opacity:.85}
summary.btn{display:inline-block;border:1px solid var(--acc);color:var(--acc);padding:6px 12px;border-radius:9px;font:600 13px Sora,sans-serif;cursor:pointer}
.btn{white-space:nowrap}
.w{max-width:1360px}
.homegrid{grid-template-columns:minmax(300px,440px) minmax(0,1fr)}
.homegrid .tiles{grid-template-columns:repeat(2,1fr);margin:0}
.tile:nth-child(7){background:#2e8b1f}.tile:nth-child(8){background:#e6195f}
.tile{cursor:pointer}
.chart{height:300px}
nav a{cursor:pointer}
.hdr{display:flex;align-items:center;gap:14px}
.newu{border:2px solid #f5a30a}
.lg{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.lg img{height:64px;background:#fff;border-radius:10px;padding:4px;border:1px solid var(--line)}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.toptiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
.homegrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.homegrid2 .card{margin:0 0 16px}
table.num td:not(:first-child),table.num th:not(:first-child){text-align:right}
table.num td:first-child,table.kv td:first-child{white-space:normal}
@media (max-width:860px){.homegrid2{grid-template-columns:1fr}}
@media (max-width:860px){.homegrid2,.homegrid,.detgrid{grid-template-columns:minmax(0,1fr)}}
table.num{min-width:460px}
.chart{overflow-x:auto}.chart div{min-width:26px}
.pick{padding:8px 10px;border:1px solid var(--line);border-top:0;cursor:pointer;background:var(--surf)}.pick:hover{background:var(--row)}
#tres{max-height:260px;overflow:auto}
nav a i{font-style:normal;background:#e6195f;color:#fff;border-radius:99px;padding:1px 8px;font-size:12px;margin-left:5px}
dialog.card,#dlg{position:fixed;inset:0;margin:auto!important;max-height:90vh;overflow:auto}
.ico{display:inline-flex;align-items:center;gap:3px;justify-content:center;min-width:38px;height:34px;padding:0 8px;border-radius:9px;border:1px solid transparent;font:700 13px Sora,sans-serif;cursor:pointer;text-decoration:none}
.ico.wa2{background:#1fa855;color:#fff}.ico.sent{background:var(--row);color:var(--mut);border-color:var(--line)}
.ico.dup{background:#f5a30a;color:#2b1d00}
.dupw{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
button.btn.sm{padding:4px 8px;font-size:12px}
.ico.dup.sm{min-width:26px;height:24px;padding:0 6px;font-size:11px;border-radius:7px}