:root{
  --bg:#0f1216; --panel:#171b21; --panel2:#1e242c; --line:#2a323c;
  --tx:#e8edf4; --dim:#93a1b3;
  --ok:#3ddc97; --bad:#ff6b6b; --acc:#5aa9ff; --warn:#ffc14d; --exp:#c792ea;
  --r:14px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f4f6f9; --panel:#fff; --panel2:#f0f3f7; --line:#dde3ea;
         --tx:#141a21; --dim:#5f6d7e; --ok:#0f9d68; --bad:#d63a3a;
         --acc:#1f6feb; --warn:#b57d00; --exp:#8250df; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--tx);
     font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     padding:18px 14px calc(70px + var(--safe-b));
     -webkit-text-size-adjust:100%}
.wrap{max-width:1060px;margin:0 auto}
[hidden]{display:none !important}

h1{font-size:21px;margin:0}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:0 0 12px;font-weight:600}
h2 .hint{text-transform:none;letter-spacing:0;font-weight:400;opacity:.75;margin-left:8px;font-size:12px}
a{color:var(--acc)}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.who{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:8px}

/* lišta mesiaca — na mobile prilepená hore */
.monthbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
          background:var(--bg);padding:12px 0 8px;margin-top:6px}
.monthbar select{flex:1;min-width:0;font-weight:600;font-size:16px}
.nav{background:var(--panel2);border:1px solid var(--line);color:var(--tx);
     width:44px;height:44px;flex:none;padding:0;border-radius:11px;font-size:20px;line-height:1}
.nav:hover{filter:none;border-color:var(--acc);color:var(--acc)}
.sub{color:var(--dim);font-size:13px;margin-bottom:16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.kpi .lab{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.kpi .val{font-size:23px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .note{font-size:12px;color:var(--dim);margin-top:2px}
.ok{color:var(--ok)} .bad{color:var(--bad)} .acc{color:var(--acc)} .warn{color:var(--warn)} .sav{color:var(--exp)}

.bar{height:12px;border-radius:99px;background:var(--panel2);overflow:hidden;display:flex;margin:12px 0 8px}
.bar span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--dim)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);
   padding:0 8px 8px;font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{text-align:right;white-space:nowrap}
.name{font-weight:600}
.desc{font-size:12px;color:var(--dim);font-weight:400}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.tag{font-size:11px;padding:3px 10px;border-radius:99px;background:var(--panel2);color:var(--dim);
     white-space:nowrap;display:inline-block;border:1px solid transparent}
.tag.one{background:rgba(255,193,77,.15);color:var(--warn)}
.tag.got{background:rgba(61,220,151,.15);color:var(--ok)}
.tag.wait{background:rgba(90,169,255,.15);color:var(--acc)}
.tag.click{cursor:pointer;min-height:30px;display:inline-flex;align-items:center}
.tag.click:hover{border-color:currentColor}
.dot{width:8px;height:8px;border-radius:3px;display:inline-block;margin-right:6px}

input,select,button,textarea{font:inherit;color:var(--tx)}
input,select{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
             padding:11px 12px;width:100%;font-size:16px}  /* 16px zabráni priblíženiu na iPhone */
input:focus,select:focus{outline:2px solid var(--acc);outline-offset:-1px}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--acc);flex:none}
label{display:block;font-size:12px;color:var(--dim);margin-bottom:5px}
label.check{display:flex;align-items:center;gap:9px;margin:0;font-size:14px;color:var(--tx);cursor:pointer;padding:6px 0}
button{background:var(--acc);border:0;border-radius:10px;padding:12px 18px;color:#fff;
       font-weight:600;cursor:pointer;min-height:44px}
button:hover:not(:disabled){filter:brightness(1.1)}
button:disabled{opacity:.55;cursor:default}
button.wide{width:100%}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);
             padding:8px 12px;font-weight:500;font-size:13px;min-height:38px}
button.ghost:hover:not(:disabled){color:var(--acc);border-color:var(--acc);filter:none}
button.ghost.danger:hover:not(:disabled){color:var(--bad);border-color:var(--bad)}
button.tiny{padding:5px 10px;min-height:32px;font-size:12px}

.row{display:grid;gap:10px;align-items:end}
.row.inc{grid-template-columns:1.6fr 1fr 1.1fr .7fr}
.row.exp{grid-template-columns:2fr 1fr 1.3fr}
.row.spend{grid-template-columns:1.6fr 1fr 1.2fr .7fr}
.row.card2{grid-template-columns:2fr 1fr}
.row .act{margin-top:2px}
.checks{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hrow h2{margin-bottom:12px}

/* drobné pomocné triedy — inline style= atribúty blokuje CSP */
.m0{margin:0}
.mt6{margin-top:6px}
.mt20{margin-top:20px}
.mb6{margin-bottom:6px}
.thleft{text-align:left}

/* rozbaľovacie formuláre — na mobile nezaberajú miesto */
.adder{border:1px dashed var(--line);border-radius:12px;padding:0 14px;margin-bottom:14px}
.adder[open]{padding-bottom:14px;border-style:solid}
.adder>summary{cursor:pointer;padding:12px 0;font-size:14px;font-weight:600;color:var(--acc);list-style:none}
.adder>summary::-webkit-details-marker{display:none}
.adder>summary:hover{filter:brightness(1.15)}

.empty{color:var(--dim);font-size:13px;text-align:center;padding:16px}
.note-line{font-size:12px;color:var(--dim);margin-top:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.warnbox{background:rgba(255,193,77,.12);border:1px solid rgba(255,193,77,.35);color:var(--warn);
         border-radius:10px;padding:9px 12px;font-size:13px;margin-top:10px}

/* karta / sporenie ako blok */
.item{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--panel2)}
.item .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.item .ttl{font-weight:700;font-size:16px}
.item .figs{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.item .fig .l{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.item .fig .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.item .acts{display:flex;gap:7px;flex-wrap:wrap}
.prog{height:10px;border-radius:99px;background:var(--bg);overflow:hidden;margin-top:12px}
.prog b{display:block;height:100%;border-radius:99px}
.txrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
       padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.txrow .m{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* prihlásenie */
.auth{max-width:400px;margin:6vh auto 0}
.auth h1{text-align:center;margin-bottom:6px}
.auth .sub{text-align:center;margin-bottom:20px}
.auth .card{padding:20px}
.tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--panel2);padding:4px;border-radius:11px}
.tabs button{flex:1;background:transparent;color:var(--dim);padding:10px;border-radius:8px;font-size:14px}
.tabs button.on{background:var(--panel);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.field{margin-bottom:12px}
.msg{font-size:13px;border-radius:9px;padding:9px 12px;margin-bottom:14px}
.msg.err{background:rgba(255,107,107,.13);color:var(--bad);border:1px solid rgba(255,107,107,.3)}
.msg.ok{background:rgba(61,220,151,.13);color:var(--ok);border:1px solid rgba(61,220,151,.3)}

/* história */
.hist{display:flex;align-items:flex-end;gap:9px;height:128px;padding-top:8px;overflow-x:auto}
.hcol{min-width:40px;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.hcol .stack{width:100%;display:flex;gap:3px;align-items:flex-end;height:94px}
.hcol .stack b{flex:1;border-radius:4px 4px 0 0;display:block;min-height:2px}
.hcol .lbl{font-size:10px;color:var(--dim);white-space:nowrap}
.hcol.cur .lbl{color:var(--acc);font-weight:700}

.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%);
       background:var(--panel);border:1px solid var(--line);border-radius:11px;
       padding:12px 18px;font-size:14px;box-shadow:0 8px 26px rgba(0,0,0,.35);
       z-index:60;max-width:92vw;text-align:center}
.toast.err{border-color:var(--bad);color:var(--bad)}
.toast.ok{border-color:var(--ok)}
.install{position:fixed;right:14px;bottom:calc(14px + var(--safe-b));z-index:40;
         box-shadow:0 6px 20px rgba(0,0,0,.35);font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
      color:var(--dim);font-size:12px;margin-top:10px}
.busy{opacity:.55;pointer-events:none;transition:opacity .15s}

/* ══════════ mobil ══════════ */
@media(max-width:820px){
  .split{grid-template-columns:1fr}
}
@media(max-width:680px){
  body{padding:14px 11px calc(70px + var(--safe-b))}
  h1{font-size:19px}
  .card{padding:14px 13px}
  .kpis{grid-template-columns:1fr 1fr;gap:9px}
  .kpi{padding:11px 12px}
  .kpi .val{font-size:20px}
  .row.inc,.row.exp,.row.spend,.row.card2{grid-template-columns:1fr 1fr}
  .row .full{grid-column:1/-1}
  .who{font-size:12px}

  /* tabuľky sa menia na karty: hlavička sa skryje, bunky dostanú vlastný popisok */
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;
          background:var(--panel2)}
  .tbl td{border:0;padding:4px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;
          text-align:left}
  .tbl td.num{text-align:left}
  .tbl td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;
                  letter-spacing:.05em;color:var(--dim);flex:none}
  .tbl td:empty{display:none}
  .tbl td>input{max-width:130px;text-align:right}
  .scroll{overflow-x:visible}
}