:root{
  --bg:#f3f2ef; --panel:#ffffff; --panel2:#f8f7f4; --ink:#191b2a; --ink2:#5d6075; --ink3:#9295a6;
  --line:#e7e5df; --accent:#5b4bdb; --accent2:#ece9ff; --side:#16182b; --sideInk:#b9bbd0;
  --pos:#119a63; --neg:#d9473f; --warn:#c7871a; --posbg:#e4f5ed; --negbg:#fbe9e7; --warnbg:#fbf1dd;
  --r:14px; --sh:0 1px 2px rgba(20,20,40,.05),0 2px 10px rgba(20,20,40,.04);
}
:root[data-theme="dark"]{
  --bg:#0f1020; --panel:#181a2e; --panel2:#1e2036; --ink:#ecedf6; --ink2:#a6a9c2; --ink3:#6f7290;
  --line:#2a2d46; --accent:#8b7dff; --accent2:#26244a; --side:#0b0c18; --sideInk:#9a9cb8;
  --pos:#35c98a; --neg:#ff6b61; --warn:#e7a944; --posbg:#15302a; --negbg:#3a1c1f; --warnbg:#3a2d14;
  --sh:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
#app{display:flex;height:100vh}
#side{width:232px;flex:none;background:var(--side);color:var(--sideInk);display:flex;flex-direction:column;padding:20px 14px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:650;font-size:16px;padding:4px 8px 22px}
.brand img{width:30px;height:30px;border-radius:8px}
#nav{display:flex;flex-direction:column;gap:2px}
#nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;user-select:none}
#nav a:hover{background:rgba(255,255,255,.05);color:#fff}
#nav a.on{background:rgba(139,125,255,.16);color:#fff}
#nav a.on i{color:#a99fff}
i[data-ic]{display:inline-flex;width:18px;height:18px;flex:none}
i[data-ic] svg{width:100%;height:100%}
.btn-new{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px;cursor:pointer;font-weight:600}
.btn-new:hover{filter:brightness(1.08)}
main{flex:1;overflow:auto;padding:26px 32px 80px}
.fab{display:none}
h1{font-size:22px;margin:0;font-weight:650;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 12px;font-weight:620}
.top{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.top .sp{flex:1}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);min-width:0}
.card.flat{box-shadow:none}
.kpi .lb{color:var(--ink2);font-size:12.5px;margin-bottom:6px}
.kpi .v{font-size:24px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pos{color:var(--pos)} .neg{color:var(--neg)} .mut{color:var(--ink2)} .mut3{color:var(--ink3)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.row{display:flex;align-items:center;gap:12px}
.row .sp{flex:1;min-width:0}
.list .it{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.list .it:first-child{border-top:0}
.list .it .sp{flex:1;min-width:0}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm{font-size:12.5px}
.xs{font-size:11.5px}
.b{font-weight:600}
.logo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex:none}
.cat{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.cat i{width:15px;height:15px}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 13px;cursor:pointer;font-weight:550;white-space:nowrap}
.btn:hover{border-color:var(--ink3)}
.btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.danger{color:var(--neg)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn i{width:16px;height:16px}
.icon-btn{border:0;background:transparent;cursor:pointer;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2)}
.icon-btn:hover{background:var(--panel2);color:var(--ink)}
.mnav{display:flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px}
.mnav .lbl{min-width:150px;text-align:center;font-weight:600;cursor:pointer}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600}
.chip.ok{background:var(--posbg);color:var(--pos)} .chip.bad{background:var(--negbg);color:var(--neg)} .chip.warn{background:var(--warnbg);color:var(--warn)} .chip.n{background:var(--panel2);color:var(--ink2)} .chip.acc{background:var(--accent2);color:var(--accent)}
.bar{height:7px;background:var(--panel2);border-radius:9px;overflow:hidden}
.bar>div{height:100%;border-radius:9px;background:var(--accent)}
/* table of transactions */
.tx-day{font-size:12px;font-weight:650;color:var(--ink2);padding:16px 4px 6px}
.tx{display:grid;grid-template-columns:30px 1fr 170px 130px 112px 30px;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;cursor:pointer}
.tx:hover{background:var(--panel2)}
.tx.compact{grid-template-columns:30px 1fr 150px 112px 44px}
.tx.compact .c-acc{display:none}
.tx .m-only{display:none}
.tx.compact .m-only{display:inline}
.tx.compact .c-cat{display:none}
.tx.compact{grid-template-columns:30px 1fr 112px 44px}
.tx .desc{min-width:0}
.tx .desc .t{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .desc .s{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx .val{text-align:right;font-weight:600}
.tx.virtual .t{color:var(--ink2)}
.st{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;padding:0}
.st.paid{background:var(--pos);border-color:var(--pos);color:#fff}
.st.late{border-color:var(--neg)}
.st i{width:13px;height:13px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
select.f,input.f{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 10px;min-width:0}
input.f:focus,select.f:focus,textarea.f:focus{outline:2px solid var(--accent2);border-color:var(--accent)}
.totals{display:flex;gap:28px;flex-wrap:wrap;padding:14px 4px 0;border-top:1px solid var(--line);margin-top:10px}
.totals div .lb{font-size:12px;color:var(--ink2)}
.totals div .v{font-weight:650;font-size:16px}
/* tabs */
.tabs{display:flex;gap:4px;background:var(--panel2);padding:4px;border-radius:12px;width:max-content;max-width:100%;overflow:auto}
.tabs a{padding:7px 14px;border-radius:9px;cursor:pointer;font-weight:550;color:var(--ink2);white-space:nowrap}
.tabs a.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
/* modal */
.ov{position:fixed;inset:0;background:rgba(10,10,25,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:18px;width:520px;max-width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal .hd{display:flex;align-items:center;padding:18px 20px 8px}
.modal .hd h3{margin:0;font-size:17px;flex:1}
.modal .bd{padding:8px 20px 4px}
.modal .ft{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px 18px;flex-wrap:wrap}
.modal .ft .sp{flex:1}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.fld label{font-size:12.5px;color:var(--ink2);font-weight:550}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:10px 11px;width:100%}
.fld .money{font-size:24px;font-weight:650;padding:8px 11px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:flex;background:var(--panel2);padding:4px;border-radius:12px;margin-bottom:14px}
.seg a{flex:1;text-align:center;padding:8px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--ink2)}
.seg a.on.e{background:var(--negbg);color:var(--neg)} .seg a.on.i{background:var(--posbg);color:var(--pos)} .seg a.on.t{background:var(--accent2);color:var(--accent)}
.seg a.on.x{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
.chk{display:flex;align-items:center;gap:9px;cursor:pointer;margin-bottom:12px}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);opacity:0;background:var(--ink);color:var(--panel);padding:11px 16px;border-radius:12px;transition:.25s;z-index:60;display:flex;gap:14px;align-items:center;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
#toast a{color:#a99fff;font-weight:650;cursor:pointer}
.empty{padding:40px;text-align:center;color:var(--ink3)}
.invoice-head{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end}
.cardpick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cardpick a{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}
.cardpick a.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent2)}
.legend .it{cursor:pointer}
.legend .it:hover .b{color:var(--accent)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.setlist .it{cursor:pointer}
.pill{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--panel2);color:var(--ink2)}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatches span{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.swatches span.on{border-color:var(--ink)}
.search{position:relative}
.search input{padding-left:34px;width:240px}
.search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink3);width:16px;height:16px}
.chart-bars text{fill:var(--ink3);font-size:11px}
@media (max-width:1100px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  #app{flex-direction:column;height:auto;min-height:100vh}
  #side{position:fixed;bottom:0;left:0;right:0;width:auto;height:auto;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:40}
  .brand,.btn-new{display:none}
  #nav{flex-direction:row;flex:1;justify-content:space-around}
  #nav a{flex-direction:column;gap:3px;padding:6px 4px;font-size:10.5px;flex:1;text-align:center}
  main{padding:18px 14px 110px}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr;gap:10px}
  .fab{display:flex;position:fixed;right:16px;bottom:86px;width:56px;height:56px;border-radius:18px;border:0;background:var(--accent);color:#fff;align-items:center;justify-content:center;z-index:41;box-shadow:0 8px 24px rgba(91,75,219,.4)}
  .fab i{width:24px;height:24px}
  .tx{grid-template-columns:30px minmax(0,1fr) 108px 26px;gap:10px;padding:9px 6px}
  .tx .c-acc,.tx .c-cat{display:none}
  .tx .m-only{display:inline}
  .tx.compact{grid-template-columns:30px minmax(0,1fr) 100px 40px}
  .search input{width:100%}
  .mnav .lbl{min-width:120px}
  .modal{border-radius:18px 18px 0 0;align-self:flex-end;max-height:94vh}
  .ov{padding:0;align-items:flex-end}
  .kpi .v{font-size:20px}
}

.sync-side{margin-top:auto;padding:0 6px 10px;cursor:pointer}
.sync-side .chip{background:rgba(255,255,255,.06);color:var(--sideInk)}
.sync-side .chip.ok i{color:#35c98a}
.chip i{width:13px;height:13px}
.btn-new{margin-top:0}
.upd{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:8px 10px 8px 16px;border-radius:12px;display:flex;gap:12px;align-items:center;z-index:70;box-shadow:0 8px 30px rgba(0,0,0,.25)}
@media (max-width:860px){.sync-side{display:none}}