/* PénzTerv - privátbanki téma (DESIGN.md). Tokenek OKLCH-ban, light+dark. */
:root{
  --bg:oklch(0.972 0.004 165);
  --surface:oklch(1 0 0);
  --ink:oklch(0.22 0.02 170);
  --muted:oklch(0.45 0.015 170);
  --faint:oklch(0.52 0.012 170);
  --border:oklch(0.905 0.008 165);
  --border-strong:oklch(0.84 0.012 165);
  --accent:oklch(0.42 0.09 160);
  --accent-hover:oklch(0.36 0.085 160);
  --accent-soft:oklch(0.955 0.018 160);
  --accent-tx:#ffffff;
  --gold:oklch(0.62 0.115 85);
  --gold-tx:oklch(0.50 0.11 80);
  --gold-soft:oklch(0.96 0.025 90);
  --link:oklch(0.42 0.09 160);
  --ok-bg:oklch(0.955 0.02 155);--ok-bd:oklch(0.55 0.11 155);--ok-tx:oklch(0.40 0.09 155);
  --warn-bg:oklch(0.965 0.025 90);--warn-bd:oklch(0.68 0.13 80);--warn-tx:oklch(0.47 0.10 70);
  --err-bg:oklch(0.955 0.02 25);--err-bd:oklch(0.55 0.15 25);--err-tx:oklch(0.44 0.15 25);
  --info-bg:oklch(0.955 0.015 240);--info-bd:oklch(0.55 0.10 245);--info-tx:oklch(0.42 0.09 245);
  --wash:oklch(0.955 0.005 165);
  --sb-bg:oklch(0.25 0.045 165);
  --sb-ink:oklch(0.88 0.018 160);
  --sb-muted:oklch(0.68 0.03 160);
  --sb-hover:oklch(0.30 0.05 163);
  --sb-active:oklch(0.335 0.06 162);
  --shadow:0 1px 2px oklch(0.2 0.02 170 / 0.05),0 4px 14px oklch(0.2 0.02 170 / 0.05);
  --z-nav:20;--z-flash:30;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:oklch(0.16 0.012 170);
    --surface:oklch(0.205 0.015 170);
    --ink:oklch(0.93 0.005 170);
    --muted:oklch(0.72 0.01 170);
    --faint:oklch(0.63 0.01 170);
    --border:oklch(0.285 0.015 170);
    --border-strong:oklch(0.36 0.018 170);
    --accent:oklch(0.75 0.11 160);
    --accent-hover:oklch(0.81 0.11 160);
    --accent-soft:oklch(0.26 0.035 162);
    --accent-tx:oklch(0.17 0.03 165);
    --gold:oklch(0.80 0.11 88);
    --gold-tx:oklch(0.82 0.11 88);
    --gold-soft:oklch(0.26 0.03 90);
    --link:oklch(0.78 0.10 160);
    --ok-bg:oklch(0.24 0.03 155);--ok-bd:oklch(0.60 0.10 155);--ok-tx:oklch(0.80 0.09 155);
    --warn-bg:oklch(0.25 0.03 85);--warn-bd:oklch(0.70 0.11 82);--warn-tx:oklch(0.83 0.10 85);
    --err-bg:oklch(0.24 0.03 25);--err-bd:oklch(0.58 0.14 25);--err-tx:oklch(0.79 0.11 25);
    --info-bg:oklch(0.235 0.025 245);--info-bd:oklch(0.60 0.09 245);--info-tx:oklch(0.80 0.07 245);
    --wash:oklch(0.235 0.014 170);
    --sb-bg:oklch(0.13 0.014 170);
    --sb-ink:oklch(0.88 0.012 165);
    --sb-muted:oklch(0.63 0.015 165);
    --sb-hover:oklch(0.185 0.02 168);
    --sb-active:oklch(0.235 0.03 165);
    --shadow:0 1px 2px oklch(0 0 0 / 0.25),0 4px 14px oklch(0 0 0 / 0.22);
  }
}

*{box-sizing:border-box;}
html{height:100%;}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;}
a{color:var(--link);text-underline-offset:2px;}
h1{font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:600;letter-spacing:-0.01em;
  margin:0 0 18px;text-wrap:balance;}
h2{font-size:16px;font-weight:600;margin:0 0 12px;letter-spacing:-0.005em;}
p{margin:0 0 12px;max-width:72ch;}
.muted{color:var(--muted);}
.small{font-size:14px;}
em.muted{color:var(--faint);font-style:normal;font-size:13px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
::placeholder{color:var(--faint);opacity:1;}
button,input,select{font:inherit;}
svg.i{width:19px;height:19px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}

/* ── App-shell: sidebar + tartalom ─────────────────────────────── */
.shell{display:flex;min-height:100dvh;}
.sidebar{width:248px;flex:0 0 auto;background:var(--sb-bg);color:var(--sb-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;padding:20px 14px 16px;}
.sidebar .brand{font-family:'Fraunces',Georgia,serif;font-size:23px;font-weight:600;
  color:#fff;text-decoration:none;letter-spacing:0.002em;padding:2px 12px 0;display:block;}
.sidebar .brand span{color:var(--gold);}
.sidebar .brand-sub{font-size:12.5px;color:var(--sb-muted);padding:0 12px;margin:2px 0 22px;}
.sidenav{display:flex;flex-direction:column;gap:2px;flex:1;}
.sidenav a{display:flex;align-items:center;gap:11px;color:var(--sb-muted);text-decoration:none;
  font-size:15px;font-weight:500;padding:9px 12px;border-radius:9px;
  transition:background .15s var(--ease),color .15s var(--ease);}
.sidenav a:hover{background:var(--sb-hover);color:var(--sb-ink);}
.sidenav a.active{background:var(--sb-active);color:#fff;}
.sidenav a.active svg.i{color:var(--gold);}
.sb-foot{border-top:1px solid oklch(1 0 0 / 0.09);padding-top:12px;margin-top:12px;}
.sb-user{font-size:12.5px;color:var(--sb-muted);padding:0 12px 8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.sb-foot .logout-form{margin:0;}
.sb-foot button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  color:var(--sb-muted);font-size:15px;font-weight:500;padding:9px 12px;border-radius:9px;
  cursor:pointer;text-align:left;transition:background .15s var(--ease),color .15s var(--ease);}
.sb-foot button:hover{background:var(--sb-hover);color:var(--sb-ink);}
.content{flex:1;min-width:0;display:flex;flex-direction:column;}
.container{width:100%;max-width:1080px;margin:0 auto;padding:30px 28px 72px;}
.container-bare{max-width:430px;padding-top:10vh;}

/* Mobil felső sáv + alsó navigáció */
.mobilebar{display:none;align-items:center;gap:8px;background:var(--sb-bg);color:var(--sb-ink);
  padding:0 8px 0 16px;min-height:52px;position:sticky;top:0;z-index:var(--z-nav);}
.mobilebar .brand{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;
  color:#fff;text-decoration:none;flex:1;}
.mobilebar .brand span{color:var(--gold);}
.mobilebar a,.mobilebar button{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:9px;color:var(--sb-muted);background:none;border:0;
  cursor:pointer;text-decoration:none;}
.mobilebar a:hover,.mobilebar button:hover{background:var(--sb-hover);color:var(--sb-ink);}
.mobilebar .logout-form{margin:0;}
.bottomnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
  background:var(--surface);border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);}
.bottomnav-inner{display:grid;grid-template-columns:repeat(5,1fr);}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;
  min-height:52px;color:var(--faint);text-decoration:none;font-size:11px;font-weight:500;}
.bottomnav a.active{color:var(--accent);}
.bottomnav svg.i{width:21px;height:21px;}
@media (max-width:959px){
  .sidebar{display:none;}
  .mobilebar{display:flex;}
  .bottomnav{display:block;}
  .container{padding:20px 16px 92px;}
  h1{font-size:24px;}
}

/* ── Oldal-fejléc, kártyák ─────────────────────────────────────── */
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:6px;flex-wrap:wrap;}
.page-head h1{margin:0 0 14px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px 22px;margin:0 0 18px;box-shadow:var(--shadow);}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;}
@media (max-width:820px){.grid-2{grid-template-columns:minmax(0,1fr);}}
.grid-2>*{min-width:0;}
.empty-state{text-align:center;padding:40px 24px;}
.empty-state p{margin-inline:auto;}

/* ── Flash ─────────────────────────────────────────────────────── */
.flash{display:flex;gap:10px;align-items:baseline;border:1px solid;border-radius:10px;
  padding:11px 16px;margin:0 0 16px;font-size:15px;}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx);}
.flash-error{background:var(--err-bg);border-color:var(--err-bd);color:var(--err-tx);}
.flash-warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-tx);}
.flash a{color:inherit;font-weight:600;}

/* ── Statok ────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:0 0 18px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:15px 17px;box-shadow:var(--shadow);}
.stat .k{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:5px;}
.stat .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.015em;}
.stat .sub{font-size:13px;color:var(--faint);margin-top:5px;}
.stat.hero{background:var(--sb-bg);border-color:var(--sb-bg);}
.stat.hero .k{color:var(--sb-muted);}
.stat.hero .v{color:#fff;}
.stat.hero .sub{color:var(--gold);}
@media (prefers-color-scheme:dark){
  .stat.hero{background:var(--sb-active);border-color:var(--border-strong);}
}

/* ── Progress ──────────────────────────────────────────────────── */
.progress{background:var(--wash);border-radius:999px;height:8px;margin:9px 0 5px;overflow:hidden;}
.progress-bar{background:var(--accent);height:100%;border-radius:999px;
  transition:width .3s var(--ease);}
.progress-bar.done{background:var(--gold);}
.stat.hero .progress{background:oklch(1 0 0 / 0.15);}

/* ── Táblázat ──────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px;}
table.data{width:100%;border-collapse:collapse;font-size:14.5px;}
table.data th{font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--faint);
  font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-strong);}
table.data td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.data tr:last-child td{border-bottom:0;}
table.data tbody tr:hover td,table.data tr:hover td{background:var(--wash);}
table.data th.num,table.data .num{text-align:right;font-variant-numeric:tabular-nums;}
table.data td.pos{color:var(--ok-tx);}
table.data td.neg{color:var(--err-tx);}
table.data tr.inactive td{opacity:.5;}
td.actions{text-align:right;white-space:nowrap;}
td.actions .btn{margin-left:5px;}

/* ── Badge ─────────────────────────────────────────────────────── */
.badge{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 10px;
  border-radius:999px;background:var(--wash);color:var(--muted);border:1px solid var(--border);
  font-variant-numeric:tabular-nums;}
.badge-ok{background:var(--gold-soft);color:var(--gold-tx);border-color:var(--gold);}
.badge-info{background:var(--info-bg);color:var(--info-tx);border-color:var(--info-bd);}
.badge-warn{background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-bd);}

/* ── Űrlapok ───────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:13px 16px;margin:0 0 14px;}
.field{display:block;margin:0 0 13px;}
.form-grid .field{margin:0;}
.field span{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:5px;}
.field input,.field select{width:100%;min-width:0;padding:9px 12px;font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
.field input:hover,.field select:hover{border-color:var(--faint);}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);}
.field input[readonly]{background:var(--wash);color:var(--muted);}
.field.check{display:flex;align-items:center;gap:10px;}
.field.check span{margin:0;color:var(--ink);}
.field.check input{width:19px;height:19px;accent-color:var(--accent);}
.form-actions{margin-top:16px;}

/* ── Gombok ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:14.5px;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:9px;padding:8px 16px;min-height:38px;
  cursor:pointer;text-decoration:none;line-height:1.3;
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease);}
.btn:hover{background:var(--wash);border-color:var(--faint);}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-tx);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-danger{color:var(--err-tx);border-color:var(--err-bd);background:var(--err-bg);}
.btn-danger:hover{background:var(--err-bg);border-color:var(--err-tx);filter:brightness(0.97);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn-ghost:hover{background:var(--wash);border-color:transparent;}
.btn-sm{font-size:13px;padding:5px 11px;min-height:30px;}
.btn-block{width:100%;}
form.inline{display:inline;}

/* ── Login ─────────────────────────────────────────────────────── */
body.bare{background:var(--sb-bg);}
.login-box{text-align:center;}
.login-brand{font-size:34px;margin:0 0 2px;color:#fff;}
.login-brand span{color:var(--gold);}
.login-box>.muted{color:var(--sb-muted);}
.login-box .card{text-align:left;margin-top:22px;padding:26px 26px 24px;}
.login-box .flash{text-align:left;}

/* ── Dashboard extrák ──────────────────────────────────────────── */
.chart-wrap{overflow-x:auto;}
svg text{font-family:'Inter',system-ui,sans-serif;}
.waterfall{list-style:none;margin:0;padding:0;}
.waterfall li{padding:11px 0;border-bottom:1px solid var(--border);}
.waterfall li:first-child{padding-top:2px;}
.waterfall li:last-child{border-bottom:0;padding-bottom:2px;}
.wf-label{display:block;font-size:14px;font-weight:500;color:var(--muted);}
.wf-value{font-size:15px;font-variant-numeric:tabular-nums;}
.wf-value.big{font-size:19px;font-weight:700;}
.wf-value.warn{color:var(--warn-tx);font-weight:700;}

/* ── Checklist ─────────────────────────────────────────────────── */
.year-nav{display:flex;gap:6px;flex-wrap:wrap;}
ul.checklist{list-style:none;margin:0;padding:0;}
ul.checklist li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
ul.checklist li:last-child{border-bottom:0;}
ul.checklist li.done .check-label{text-decoration:line-through;color:var(--faint);}
.check-btn{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--border-strong);
  background:var(--surface);color:var(--accent-tx);font-size:15px;font-weight:700;cursor:pointer;
  line-height:1;flex:0 0 auto;transition:background .15s var(--ease),border-color .15s var(--ease);}
.check-btn:hover{border-color:var(--accent);}
li.done .check-btn{background:var(--accent);border-color:var(--accent);}
.check-label{flex:1;}

/* ── Költések ──────────────────────────────────────────────────── */
.month-nav{display:flex;align-items:center;gap:8px;}
.month-label{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;min-width:74px;text-align:center;}
.qe-row{display:grid;grid-template-columns:150px 160px 1fr;gap:13px 16px;margin:0 0 13px;}
@media (max-width:640px){.qe-row{grid-template-columns:1fr 1fr;}.qe-note{grid-column:1 / -1;}}
.qe-row .field{margin:0;}
.qe-amount input{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;}
.qe-actions{display:flex;gap:8px;align-items:center;}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.chips legend{font-size:13.5px;font-weight:500;color:var(--muted);padding:0;margin-bottom:7px;}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 15px;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--ink);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:999px;user-select:none;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);}
.chip:hover{border-color:var(--faint);background:var(--wash);}
.chip input{position:absolute;opacity:0;pointer-events:none;}
.chip svg.i{width:17px;height:17px;}
.chip.selected,.chip:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--accent-tx);}
.chip.focused,.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.chip-icon{padding:9px 13px;min-height:42px;justify-content:center;}
.chip-icon svg.i{width:20px;height:20px;}
.chips-current{color:var(--ink);font-weight:600;}
.exp-cat{display:inline-flex;flex:0 0 auto;color:var(--muted);}
.exp-cat svg.i{width:18px;height:18px;}
.badge-icon{display:inline-flex;align-items:center;gap:5px;}
.badge-icon svg.i{width:14px;height:14px;}
.catname{display:inline-flex;align-items:center;gap:7px;}
.catname svg.i{width:16px;height:16px;color:var(--muted);}
.cell-icon{display:inline-flex;align-items:center;gap:8px;}
.cell-icon svg.i{width:16px;height:16px;color:var(--muted);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.trend-up{color:var(--err-tx) !important;}
.trend-down{color:var(--ok-tx) !important;}
.daylist{list-style:none;margin:0;padding:0;}
.daygroup{margin:0 0 4px;}
.dayhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:0.04em;
  padding:10px 0 6px;border-bottom:1px solid var(--border-strong);}
.dayhead em.muted{text-transform:none;letter-spacing:0;font-weight:500;}
.dayhead .num{font-variant-numeric:tabular-nums;color:var(--muted);text-transform:none;letter-spacing:0;}
.expense-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.daygroup .expense-row:last-child{border-bottom:0;}
.exp-note{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;}
.exp-amount{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.exp-actions{display:flex;gap:2px;white-space:nowrap;}
.exp-del{color:var(--err-tx);}
@media (max-width:640px){
  .expense-row{flex-wrap:wrap;}
  .exp-note{flex-basis:100%;order:3;}
  .exp-amount{margin-left:auto;}
}
.catlist{list-style:none;margin:0;padding:0;}
.catlist li{padding:9px 0;border-bottom:1px solid var(--border);}
.catlist li:last-child{border-bottom:0;}
.cathead{display:flex;align-items:baseline;gap:8px;}
.catname{font-size:14.5px;font-weight:500;flex:1;}
.catsum{font-weight:600;font-variant-numeric:tabular-nums;}
.catbar{background:var(--wash);border-radius:999px;height:6px;margin:7px 0 0;overflow:hidden;}
.catbar div{background:var(--accent);height:100%;border-radius:999px;transition:width .3s var(--ease);}
.catbudget{font-size:13px;color:var(--faint);margin-top:5px;font-variant-numeric:tabular-nums;}
.catbudget.over{color:var(--err-tx);font-weight:600;}
h2.mt{margin-top:22px;}
.toplist{list-style:none;margin:0;padding:0;font-size:14.5px;}
.toplist li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);}
.toplist li:last-child{border-bottom:0;}
.top-what{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.toplist .num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.fire-note{background:var(--gold-soft);border:1px solid var(--gold);border-radius:10px;
  padding:11px 15px;font-size:14.5px;margin:16px 0 12px;}
.fire-note strong{color:var(--gold-tx);}
.expense-hint{display:flex;align-items:baseline;gap:8px;font-size:13.5px;color:var(--muted);
  margin:4px 0 0;flex-wrap:wrap;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
}