:root{
  --bg:#f4f6f5;--card:#fff;--ink:#14231f;--mute:#5f6f6a;--line:#e1e7e4;
  --acc:#0f766e;--acc-ink:#fff;--bad:#c62828;--bad-bg:#fdecea;--ok:#2e7d32;--warn-bg:#fff6dd;
  --g-bydleni:#3b82f6;--g-zdravi:#16a34a;--g-osobni:#d97706;--g-finance:#7c3aed;--g-def:#64748b;
  --r:14px;--nav:64px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1513;--card:#17211e;--ink:#e8f0ed;--mute:#93a6a0;--line:#26332f;
  --acc:#2dd4bf;--acc-ink:#042f2a;--bad:#ff8a80;--bad-bg:#3a1c1a;--ok:#81c784;--warn-bg:#3a331a;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
header.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--acc);color:var(--acc-ink)}
header.top h1{font-size:18px;margin:0}
header.top button{background:rgba(255,255,255,.18);border:0;color:inherit;border-radius:20px;padding:8px 14px;min-height:40px}
main{max-width:1180px;margin:0 auto;padding:16px 16px calc(var(--nav) + 40px + env(safe-area-inset-bottom))}
h2{font-size:20px;margin:4px 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.muted{color:var(--mute)}.small{font-size:13px}
.neg{color:var(--bad)}.pos{color:var(--ok)}
/* nav */
nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;align-items:center;height:calc(var(--nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line)}
nav.bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;color:var(--mute);text-decoration:none;font-size:12px;min-height:48px}
nav.bottom a svg{width:24px;height:24px}
nav.bottom a.on{color:var(--acc)}
nav.bottom .fab{flex:0 0 58px;height:58px;margin-top:-26px;border-radius:50%;border:0;background:var(--acc);color:var(--acc-ink);font-size:32px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.3)}
/* plán */
.total .fld{max-width:260px}
.total.over{background:var(--bad-bg);border-color:var(--bad)}
.status{margin-top:8px;font-size:14px}
.over .status{color:var(--bad);font-weight:600}
.groups{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.groups>*,.pair>*{min-width:0}
@media(min-width:760px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.groups{grid-template-columns:repeat(4,minmax(0,1fr))}}
.group{border-top:5px solid var(--gc,var(--g-def));margin-bottom:0}
.group[data-g=bydleni]{--gc:var(--g-bydleni)}.group[data-g=zdravi]{--gc:var(--g-zdravi)}.group[data-g=osobni]{--gc:var(--g-osobni)}.group[data-g=finance]{--gc:var(--g-finance)}
.group h3{margin:0 0 2px;font-size:17px}
.gsum{font-size:13px;color:var(--mute);margin-bottom:8px}
.item{padding:10px 0;border-top:1px solid var(--line)}
.iname{font-weight:600;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.iname input{flex:1}
.pair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px}
.fld{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);padding:0 10px;min-height:46px}
.fld.pinned{border-color:var(--acc)}
.fld input{flex:1;width:100%;min-width:0;border:0;background:transparent;outline:0;padding:10px 0;font-size:16px;text-align:right}
.fld span{margin-left:6px;color:var(--mute);font-size:14px}
.fld:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.fld.bad{border-color:var(--bad)}
.rn{border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--bg)}
.x{border:0;background:var(--bad-bg);color:var(--bad);border-radius:8px;width:38px;height:38px;font-size:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;border-radius:12px;border:1.5px solid var(--acc);background:transparent;color:var(--acc);font-weight:600}
.btn.pri{background:var(--acc);color:var(--acc-ink)}
.btn.warn{border-color:var(--bad);color:var(--bad)}
.btn.block{display:flex;width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sp{justify-content:space-between}
/* měsíc */
.mnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mnav a{padding:10px 14px;text-decoration:none;color:var(--acc);font-size:22px}
.mnav h2{margin:0;text-align:center}
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:13px;background:var(--warn-bg)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}
.tile small{display:block;color:var(--mute);font-size:12px}
.tile b{font-size:16px;word-break:break-word}
.irow{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 0}
.irow.sel{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.irow .top{display:flex;justify-content:space-between;gap:8px}
.irow small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.bar{height:6px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gc,var(--g-def))}
.bar.over i{background:var(--bad)}
.tx{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.tx .ic{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--bg)}
.tx .ic.in{color:var(--ok)}.tx .ic.out{color:var(--bad)}
.tx .m{flex:1;min-width:0}
.tx .m b,.tx .m small{display:block;overflow-wrap:anywhere}
.tx .a{font-weight:700;white-space:nowrap}
details.card>summary{cursor:pointer;font-weight:600;min-height:32px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:4px 12px;font-size:13px}
/* cíle */
.goal .gb{height:12px;border-radius:6px;background:var(--line);overflow:hidden;margin:8px 0}
.goal .gb i{display:block;height:100%;background:var(--g-finance)}
.goal.done .gb i{background:var(--ok)}
/* sheet */
#sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden],#toast[hidden]{display:none}
.panel{background:var(--card);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
@media(min-width:600px){#sheet{align-items:center}.panel{border-radius:20px}}
.panel h3{margin:0 0 12px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-bottom:12px}
.seg button{min-height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg)}
.seg button.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{min-height:44px;padding:0 16px;border-radius:22px;border:1.5px solid var(--line);background:var(--bg)}
.chips button.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:700}
label.l{display:block;font-size:13px;color:var(--mute);margin:12px 0 4px}
.inp{width:100%;min-height:46px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;background:var(--bg);font-size:16px}
.big{font-size:26px;text-align:right;min-height:56px}
.prev{font-size:13px;color:var(--mute);margin-top:6px}
#toast{position:fixed;left:16px;right:16px;bottom:calc(var(--nav) + 20px + env(safe-area-inset-bottom));z-index:30;background:#222;color:#fff;padding:12px 16px;border-radius:12px;text-align:center}
#toast.err{background:var(--bad);color:#fff}
/* login */
.login{max-width:380px;margin:0 auto;padding:calc(48px + env(safe-area-inset-top)) 20px 20px}
.login h1{text-align:center;margin-bottom:24px}
.log .e{padding:10px 0;border-top:1px solid var(--line)}

.panel.full{max-width:640px;height:100%;max-height:100%;border-radius:0;padding-top:calc(16px + env(safe-area-inset-top))}
@media(min-width:600px){.panel.full{height:auto;max-height:92vh;border-radius:20px}}
.cover.short{background:var(--bad-bg);border-color:var(--bad)}
.cover.short .status{color:var(--bad)}
.tiles{grid-template-columns:repeat(2,1fr)!important}

/* ---- animace a odezva ---- */
button,.btn,.irow,nav.bottom a,.chip,.seg button,.chips button{transition:transform .12s ease,background-color .2s,box-shadow .2s,opacity .2s}
button:active,.btn:active,.irow:active,.seg button:active,.chips button:active{transform:scale(.96)}
nav.bottom a:active{transform:scale(.9)}
.fab{transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.fab:active{transform:scale(.88) rotate(90deg)}
.fld{transition:border-color .2s,box-shadow .2s,background-color .2s}
.total{transition:background-color .35s,border-color .35s}
.bar i{transition:width .55s cubic-bezier(.2,.8,.2,1),background-color .3s}
.gb i{transition:width .6s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideDown{to{transform:translateY(40px);opacity:0}}
#sheet:not([hidden]){animation:fadeIn .2s ease-out}
#sheet.closing{animation:fadeIn .18s ease-in reverse forwards}
.panel{animation:slideUp .28s cubic-bezier(.2,.9,.25,1)}
.panel.still{animation:none}
#sheet.closing .panel{animation:slideDown .18s ease-in forwards}
@keyframes toastIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
#toast:not([hidden]){animation:toastIn .25s cubic-bezier(.2,.9,.25,1)}
.tx{transition:opacity .22s,transform .22s,max-height .24s,padding .24s;max-height:120px;overflow:hidden}
.tx.leaving{opacity:0;transform:translateX(40px);max-height:0;padding-top:0;padding-bottom:0}
/* přetahování */
.items{min-height:44px}
.drag{cursor:grab;touch-action:none;font-size:22px;line-height:1;color:var(--mute);padding:8px 6px;user-select:none}
.item.ghost{opacity:.35;background:color-mix(in srgb,var(--acc) 14%,transparent);border-radius:10px}
.item.chosen{background:var(--card);box-shadow:0 8px 24px rgba(0,0,0,.25);border-radius:10px}
.irow{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.irow.lift{opacity:.4;transform:scale(.98)}
.irow.drop{background:color-mix(in srgb,var(--acc) 22%,transparent);outline:2px dashed var(--acc);outline-offset:-2px;border-radius:10px;transform:scale(1.02)}
.ghostrow{position:fixed;z-index:40;pointer-events:none;background:var(--card);border:1px solid var(--acc)!important;border-radius:12px;padding:10px 12px;box-shadow:0 12px 30px rgba(0,0,0,.35);transform:rotate(-2deg) scale(1.03)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.dlg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s ease-out}
.dbox{background:var(--card);border-radius:18px;padding:20px;width:100%;max-width:380px;animation:slideUp .22s cubic-bezier(.2,.9,.25,1)}
.dbox p{margin:0 0 12px;font-size:17px}