/* BudgetBuddy */
:root{
 --mid:#1E2B4A;--moon:#F4B942;--paper:#F7F3EB;--cloud:#E8E3D8;--sage:#5E9C84;--pos:#3F7A63;--clay:#D8654A;--neg:#B64A32;--slate:#6B7385;
 --bg:var(--paper);--card:#fff;--tx:var(--mid);--mut:var(--slate);--bd:rgba(30,43,74,.12);--trk:var(--cloud);--chip:var(--paper);--hl:#FCEAC6;--fm:var(--mid);
 --serif:Fraunces,Georgia,serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --fs-xs:12px;--fs-sm:14px;--fs-base:16px;--fs-lg:20px;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
 --r1:10px;--r2:12px;--r3:16px;--pad:16px;--gap:12px;
 color-scheme:light dark;
 padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
@media(min-width:480px){:root{--pad:20px;--gap:16px}}
@media(prefers-color-scheme:dark){:root{--bg:#1E2B4A;--card:#26365B;--tx:#F7F3EB;--mut:#A9B0C0;--bd:rgba(247,243,235,.14);--trk:#3A4A73;--chip:#1E2B4A;--hl:color-mix(in srgb,var(--moon) 22%,#26365B);--pos:#8FC4AE;--neg:#F0937C;--fm:#6F82B5}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--tx);font:400 var(--fs-base)/1.5 var(--sans);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
[hidden]{display:none!important}
button,input{font-family:inherit}button{touch-action:manipulation}
.wrap{max-width:560px;margin:0 auto;padding:var(--s3) var(--pad) calc(var(--s6) + var(--s4))}

/* tipográfia */
h1,h2{font-family:var(--serif);font-weight:500;margin:0}
h1{font-size:clamp(24px,7vw,28px);line-height:1.15;letter-spacing:-.01em}
h2{font-size:var(--fs-lg);line-height:1.25;margin-bottom:var(--s2)}
p{margin:0 0 var(--s3)}p:last-child{margin-bottom:0}
small{font-size:var(--fs-sm);color:var(--mut)}.mut{color:var(--mut)}.ctr{text-align:center}
.lab{font-size:var(--fs-sm);color:var(--mut)}
.per{font-weight:500;margin-bottom:var(--s3)}
.big{font:500 clamp(32px,10vw,40px)/1.1 var(--serif);letter-spacing:-.01em}.big small{font-size:.45em;letter-spacing:0}
.neg{color:var(--neg)}
.err{color:var(--neg);margin:var(--s3) 0 0}

/* kártya, sáv */
.card{display:block;background:var(--card);border:.5px solid var(--bd);border-radius:var(--r3);padding:var(--pad);margin-top:var(--gap)}
.warn{border-color:var(--neg)}
.bar{height:8px;border-radius:4px;background:var(--trk);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--sage)}.bar.moon i{background:var(--moon)}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s3);font-size:var(--fs-sm);color:var(--mut);margin-top:var(--s2)}
.split2{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);font-weight:500}
.sb{background:var(--clay);color:#fff;border-radius:var(--r2);padding:var(--s3) var(--s4);font-size:var(--fs-sm);margin:var(--s2) 0 0}

/* logó, fejléc */
.brand{display:flex;align-items:center;gap:var(--s2);min-width:0;font:500 22px/1 var(--serif);letter-spacing:-.02em;white-space:nowrap}
.mk{display:block;flex:none;width:28px;height:28px}.mk svg{display:block;width:100%;height:100%}
.brand.lg{justify-content:center;gap:var(--s3);font-size:clamp(30px,10vw,38px);margin:6vh 0 var(--s3)}.brand.lg .mk{width:clamp(36px,12vw,46px);height:clamp(36px,12vw,46px)}
.top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) 0 var(--s3)}
.acts{display:flex;align-items:center;gap:var(--s2);flex:none}
.av{position:relative;width:44px;height:44px;border:0;border-radius:50%;background:var(--tx);color:var(--bg);font:500 var(--fs-base) var(--serif);cursor:pointer}
.av.bad::after{content:'';position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--clay);border:2px solid var(--bg)}
.back{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;margin-bottom:var(--s1);padding:0 var(--s3) 0 0;background:none;border:0;color:var(--tx);font-size:var(--fs-base);cursor:pointer}
.back svg{width:20px;height:20px}
.auth .card{margin-top:var(--s5)}

/* gombok, űrlap */
.btn{height:48px;padding:0 var(--s5);border:0;border-radius:var(--r2);background:var(--tx);color:var(--bg);font-size:var(--fs-base);font-weight:500;cursor:pointer}
.btn.sm{height:44px;padding:0 var(--s4);font-size:var(--fs-sm)}.btn.full{width:100%;margin-top:var(--s4)}.btn:disabled{opacity:.5}
.ghost{height:48px;padding:0 var(--s4);border:0;background:none;color:var(--mut);font-size:var(--fs-base);cursor:pointer}
.ghost.danger{display:block;margin:var(--s5) auto 0;font-size:var(--fs-sm)}
.row{display:flex;gap:var(--s2);margin-top:var(--s4)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--s3)}.grid.one{grid-template-columns:1fr}
.fl{display:grid;gap:var(--s1);font-size:var(--fs-sm);color:var(--mut)}
input:not([type=checkbox]){width:100%;height:48px;padding:0 var(--s4);border:.5px solid var(--bd);border-radius:var(--r2);background:var(--chip);color:var(--tx);font-size:var(--fs-base)}
input:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--moon);outline-offset:2px}
.sec{font-weight:500;margin:var(--s5) 0 var(--s2)}.sec:first-of-type{margin-top:var(--s3)}
details{margin-top:var(--gap)}
summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:44px;font-weight:500;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--mut);font-size:var(--fs-lg);line-height:1}details[open]>summary::after{content:'–'}
details[open]>summary{margin-bottom:var(--s2)}
.sheet details{margin-top:var(--s4)}

/* főoldal lista */
.nm{flex:1;min-width:0;display:grid;line-height:1.35}.nm b{font-weight:500}
.ro{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:56px;padding:var(--s3) 0;background:none;border:0;border-top:.5px solid var(--bd);color:inherit;font-size:var(--fs-base);text-align:left;cursor:pointer}
h2+.ro{border-top:0}.chev{width:18px;height:18px;flex:none;color:var(--mut)}

/* budget nézet */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);margin-top:var(--s3);padding:var(--s1);background:var(--trk);border-radius:var(--r2)}
.seg button{height:40px;padding:0 var(--s1);border:0;border-radius:var(--r1);background:none;color:var(--mut);font-size:var(--fs-sm);font-weight:500;cursor:pointer}
.seg button.on{background:var(--card);color:var(--tx)}
.mini{display:grid;gap:var(--s2);margin-top:var(--s4)}
.mini>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s3);background:var(--chip);border-radius:var(--r2)}
.mini b{font-weight:500;white-space:nowrap}
.mini .mn{background:var(--moon);color:var(--mid)}.mini .mn small{color:var(--mid);opacity:.75}
@media(min-width:480px){.mini{grid-template-columns:repeat(3,1fr)}.mini>div{display:block}.mini small{display:block;font-size:var(--fs-xs)}}
.chip{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--chip);border-radius:var(--r2);font-size:var(--fs-sm);cursor:pointer}
.chip span{color:var(--mut);font-size:var(--fs-xs)}.chip.static{cursor:default}
.dn{display:grid;place-items:center;margin:var(--s4) 0 var(--s2)}
.pie{position:relative;width:min(240px,72vw);aspect-ratio:1;border-radius:50%}
.pie::after{content:'';position:absolute;inset:20%;border-radius:50%;background:var(--card)}
#sm{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;pointer-events:none;line-height:1.25}
#sm strong{font:500 24px/1.1 var(--serif)}#sm strong em{font-size:.55em;color:var(--mut);font-style:normal}#sm small{font-size:var(--fs-xs)}
.gt{margin:var(--s4) 0 var(--s1);font-size:var(--fs-sm);color:var(--mut)}
.li{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:var(--s2) 0;border-top:.5px solid var(--bd);cursor:pointer}
.gt+.li{border-top:0}.li .nm{display:block}.am{font-weight:500;white-space:nowrap}
.dot{flex:none;width:10px;height:10px;border-radius:50%}
.li.paid .nm,.li.paid .am{opacity:.5;text-decoration:line-through}.li.paid .dot{opacity:.35}
input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:24px;height:24px;margin:0;border:1.5px solid var(--slate);border-radius:50%;cursor:pointer}
input[type=checkbox]:checked{background:var(--sage);border-color:var(--sage)}
input[type=checkbox]:checked::after{content:'';width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(0,-1px) rotate(45deg)}
#tt{position:fixed;display:none;z-index:30;max-width:240px;padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--tx);color:var(--bg);font-size:var(--fs-sm);line-height:1.45;pointer-events:none}
.split{display:flex;height:40px;border-radius:var(--r1);overflow:hidden;color:#fff;font-size:var(--fs-sm);font-weight:500}
.split div{display:flex;align-items:center;padding:0 var(--s3);white-space:nowrap;overflow:hidden}
#sv{margin:var(--s3) 0 var(--s4);font-size:var(--fs-sm)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{padding:var(--s2) var(--s1);text-align:right;border-bottom:.5px solid var(--bd)}
th:first-child,td:first-child{text-align:left}th{font-weight:500;color:var(--mut)}
tr.g td{font-weight:500;background:var(--chip)}tr.t td{font-weight:500;border-top:1.5px solid var(--tx)}tr.v td{font-weight:500;background:var(--hl)}
.kv{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-top:.5px solid var(--bd)}
.kv:first-child{border-top:0}.kv b{font-weight:500;text-align:right}

/* napi nézet, költések */
.wk{margin-top:var(--s2);padding-top:var(--s1);border-top:.5px solid var(--bd)}
.wk>summary::after,.wk[open]>summary::after{content:none}.wk summary span{color:var(--mut);font-weight:400}
.wk summary span:first-child{color:var(--tx);font-weight:500}
.day.today,.sr.today{margin:0 calc(var(--s3) * -1);padding-left:var(--s3);padding-right:var(--s3);background:var(--hl);border-radius:var(--r1);border-top-color:transparent}
.day.past span,.day.past b{opacity:.5}
/* alsó panel */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(30,43,74,.5);animation:fd .2s}
.sh{width:100%;max-width:560px;max-height:90vh;max-height:90dvh;overflow:auto;padding:var(--s2) var(--pad) calc(var(--s5) + env(safe-area-inset-bottom,0px));background:var(--card);border-radius:24px 24px 0 0;animation:up .3s cubic-bezier(.32,.72,0,1)}
.grab{width:40px;height:4px;margin:0 auto var(--s4);border-radius:2px;background:var(--trk)}
@media(min-width:600px){.sheet{align-items:center;padding:var(--s4)}.sh{border-radius:24px}}
@keyframes up{from{transform:translateY(40px);opacity:0}}@keyframes fd{from{opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* egyebek */
#sync{font-size:var(--fs-sm);color:var(--mut)}#sync.ok{color:var(--pos)}#sync.bad{color:var(--neg);font-weight:500}
#ver{margin:var(--s6) 0 0;text-align:center;font-size:var(--fs-xs);color:var(--mut)}

/* keskeny telefonok */
@media(max-width:360px){
 .brand{font-size:20px}.mk{width:24px;height:24px}
 .btn.sm{padding:0 var(--s3)}.av{width:40px;height:40px}.acts{gap:6px}
 .sh{padding-left:var(--s4);padding-right:var(--s4)}
}

/* költések, kategóriák */
select{width:100%;height:48px;padding:0 36px 0 var(--s4);border:.5px solid var(--bd);border-radius:var(--r2);background:var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px;color:var(--tx);font-size:var(--fs-base);-webkit-appearance:none;appearance:none}
input[type=date]{min-width:0;-webkit-appearance:none;appearance:none;text-align:left}
.grid.two{grid-template-columns:1fr 1fr}
.am small{display:block;text-align:right;font-size:var(--fs-xs);font-weight:400;color:var(--mut)}
.cr{display:grid;grid-template-columns:10px minmax(0,1fr) auto 36px;gap:var(--s1) var(--s3);align-items:center;padding:var(--s3) 0;border-top:.5px solid var(--bd)}
.gt+.cr{border-top:0}.cr .bar{grid-column:2/5}.cr .nm small{font-size:var(--fs-xs)}
.dh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-top:var(--s4);font-weight:500}.dh small{font-weight:400}
.er{display:flex;align-items:center;gap:var(--s3);min-height:48px;border-top:.5px solid var(--bd)}
.x{flex:none;min-width:44px;height:44px;border:0;background:none;color:var(--mut);font-size:var(--fs-lg);cursor:pointer}.x.arm{color:var(--neg);font-size:var(--fs-sm)}

/* széria */
.streak{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s3);padding:var(--s4);background:var(--chip);border-radius:var(--r3)}
.flame{flex:none;width:64px;height:70px}.flame.off{filter:grayscale(1);opacity:.4}
.sn{display:flex;align-items:baseline;gap:var(--s2)}.sn b{font:500 40px/1 var(--serif)}.sn span{font-weight:500}
.wkd{display:flex;gap:var(--s2);margin-bottom:var(--s3)}
.wkd div{flex:1;text-align:center;font-size:var(--fs-xs);color:var(--mut)}
.wkd i{display:block;width:100%;max-width:32px;aspect-ratio:1;margin:var(--s1) auto 0;border:1.5px solid var(--bd);border-radius:50%}
.wkd .on i{background:var(--moon);border-color:var(--moon)}.wkd .t{font-weight:500;color:var(--tx)}

.sk{display:none;align-items:center;gap:var(--s1);height:44px;padding:0 var(--s3);border:.5px solid var(--bd);border-radius:22px;background:var(--card);color:var(--tx);font:500 var(--fs-base) var(--sans);cursor:pointer}
.sk .flame{width:22px;height:24px}
@media(min-width:600px){.sk:not([hidden]){display:inline-flex}}
.skb{margin-bottom:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--hl);font-size:var(--fs-sm)}
.skb.bad{background:color-mix(in srgb,var(--clay) 18%,var(--card))}
.wkd .rs i{border-color:var(--moon);border-style:dashed}
.ghost.full{width:100%;margin-top:var(--s2)}
.bar+.meta+.wkd{margin-top:var(--s4)}

/* profil menü fülek */
.seg.two{grid-template-columns:repeat(2,1fr)}.sh>.seg{margin:0 0 var(--s4)}
.hint{margin:var(--s3) 0 0;font-size:var(--fs-sm)}
#sync{font-size:var(--fs-base)}

.card>.kv,.meta+.kv{margin-top:var(--s3);border-top:.5px solid var(--bd)}
#acct{margin-top:var(--s3);border-top:.5px solid var(--bd)}

/* átcsoportosítás */
.dots{display:grid;place-items:center;width:36px;height:44px;margin:-8px -6px -8px 0;padding:0;border:0;border-radius:var(--r1);background:none;color:var(--mut);cursor:pointer}
.menu{position:fixed;z-index:25;min-width:190px;padding:var(--s1);background:var(--card);border:.5px solid var(--bd);border-radius:var(--r2);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.menu button{display:block;width:100%;height:44px;padding:0 var(--s3);border:0;border-radius:var(--r1);background:none;color:var(--tx);font-size:var(--fs-base);text-align:left;cursor:pointer}
.x.undo{min-width:76px;font-size:var(--fs-sm);color:var(--mut)}