:root{
  --bg:#0f1115; --kaart:#171a21; --kaart2:#1b1f28; --rand:#252a34; --tekst:#e6e9ef;
  --zacht:#8b93a7; --accent:#4f8cff; --groen:#3ecf8e; --rood:#ff5f6d; --geel:#ffb454;
  --thijs:#4f8cff; --amber:#ffb454;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--tekst);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit; color:inherit}
.zacht{color:var(--zacht)} .klein{font-size:.78rem} .fout{color:var(--rood)}
.knop{display:inline-flex; align-items:center; justify-content:center; gap:.35rem; background:#1f242e; border:1px solid var(--rand);
  border-radius:9px; padding:.55rem .95rem; cursor:pointer; text-decoration:none; white-space:nowrap; min-height:42px}
.knop:hover:not(:disabled){border-color:var(--accent)}
.knop:disabled{opacity:.5; cursor:default}
.knop.hoofd{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.knop.gevaar{color:var(--rood); border-color:rgba(255,95,109,.4)}
.knop.groot{width:100%; padding:.8rem; font-size:1rem}
.link{background:none; border:0; color:var(--accent); cursor:pointer; padding:.2rem .3rem}

/* inloggen */
body.login{display:grid; place-items:center; min-height:100vh; padding:1rem}
.loginkaart{width:100%; max-width:360px; background:var(--kaart); border:1px solid var(--rand); border-radius:16px; padding:2rem 1.5rem;
  display:flex; flex-direction:column; gap:.8rem; text-align:center}
.loginkaart h1{margin:0; font-size:1.5rem}
.loginkaart p{margin:0}
.logo{font-size:2.6rem; line-height:1}
.wie{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.4rem}
.wie label{cursor:pointer}
.wie input{position:absolute; opacity:0; pointer-events:none}
.wie span{display:block; padding:.7rem; border:1px solid var(--rand); border-radius:10px; background:#1f242e; font-weight:600}
.wie input:checked+span{border-color:var(--accent); background:#1b2a48}
.wie input:focus-visible+span{outline:2px solid var(--accent)}
.loginkaart input[type=password]{width:100%; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--rand); background:var(--bg); font-size:1rem}

/* kop */
.kop{max-width:860px; margin:0 auto; padding:1rem 1rem .5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.titel{font-size:1.35rem; font-weight:700; letter-spacing:-.02em}
.ik{position:relative; color:var(--zacht); font-size:.88rem; display:flex; align-items:center; gap:.3rem}
.ik b{color:var(--tekst)}
.thuislabel{font-size:.78rem; color:var(--groen); background:rgba(62,207,142,.1); border:1px solid rgba(62,207,142,.3); border-radius:20px; padding:.15rem .55rem}

#btnMenu{font-size:1.3rem; line-height:1; padding:.2rem .5rem; color:var(--tekst)}
.menu{position:absolute; right:0; top:calc(100% + .3rem); background:var(--kaart2); border:1px solid var(--rand); border-radius:10px;
  min-width:230px; padding:.3rem; z-index:20; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.menu a,.menu button{display:block; width:100%; text-align:left; background:none; border:0; padding:.6rem .75rem; border-radius:7px;
  color:var(--tekst); text-decoration:none; cursor:pointer}
.menu a:hover,.menu button:hover{background:#252b37}

main{max-width:860px; margin:0 auto; padding:0 1rem 6rem}

/* saldo */
.saldo{background:var(--kaart); border:1px solid var(--rand); border-radius:16px; overflow:hidden; margin:.4rem 0 1rem}
.saldo-hoofd{padding:1.2rem 1.2rem 1rem; text-align:center}
.saldo-hoofd.plus{background:linear-gradient(180deg,rgba(62,207,142,.12),transparent)}
.saldo-hoofd.min{background:linear-gradient(180deg,rgba(255,180,84,.13),transparent)}
.saldo-hoofd.quitte{font-size:1.2rem; font-weight:600}
.saldo-label{color:var(--zacht)}
.saldo-bedrag{font-size:2.3rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:.1rem 0 .6rem}
.plus .saldo-bedrag{color:var(--groen)} .min .saldo-bedrag{color:var(--geel)}
.saldo-detail{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rand)}
.saldo-detail>div{padding:.7rem .8rem; display:flex; flex-direction:column; gap:.05rem; border-right:1px solid var(--rand); min-width:0}
.saldo-detail>div:last-child{border-right:0}
.saldo-detail b{font-variant-numeric:tabular-nums}

/* filterbalk */
.balk{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.8rem}
.balk input,.balk select{background:var(--kaart); border:1px solid var(--rand); border-radius:9px; padding:.5rem .7rem; min-height:42px}
.balk input{flex:1; min-width:150px}

/* categorie-overzicht */
.overzicht details{background:var(--kaart); border:1px solid var(--rand); border-radius:12px; padding:.2rem .9rem; margin-bottom:.8rem}
.overzicht summary{cursor:pointer; padding:.55rem 0; color:var(--zacht)}
.catrij{display:grid; grid-template-columns:minmax(120px,190px) 1fr auto; gap:.7rem; align-items:center; width:100%; background:none; border:0;
  padding:.35rem 0; cursor:pointer; text-align:left}
.catrij span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.balk2{height:8px; background:#222833; border-radius:4px; overflow:hidden}
.balk2 i{display:block; height:100%; background:var(--accent); border-radius:4px}
.catrij b{font-variant-numeric:tabular-nums; font-weight:600}

/* lijst */
.maand{display:flex; justify-content:space-between; font-size:.8rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--zacht); font-weight:600; margin:1.2rem .2rem .45rem}
.groep{background:var(--kaart); border:1px solid var(--rand); border-radius:12px; overflow:hidden}
.item{display:grid; grid-template-columns:2.2rem 1fr auto auto; gap:.7rem; align-items:center; width:100%; background:none; border:0;
  border-bottom:1px solid var(--rand); padding:.7rem .9rem; text-align:left; cursor:pointer}
.item:last-child{border-bottom:0}
.item:not(.vast):hover{background:var(--kaart2)}
.ic{font-size:1.3rem; text-align:center}
.mid{display:flex; flex-direction:column; min-width:0}
.oms{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sub{color:var(--zacht); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bedrag{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.bedrag.thijs{color:var(--thijs)} .bedrag.amber{color:var(--amber)}
.leeg{text-align:center; color:var(--zacht); padding:2.5rem 1rem; background:var(--kaart); border:1px dashed var(--rand); border-radius:12px}

/* dialogen */
dialog{background:var(--kaart); color:var(--tekst); border:1px solid var(--rand); border-radius:16px; padding:0; width:min(520px,calc(100vw - 1.5rem));
  max-height:calc(100vh - 2rem)}
dialog::backdrop{background:rgba(5,7,10,.65); backdrop-filter:blur(2px)}
dialog form,.logwrap{display:flex; flex-direction:column; gap:.75rem; padding:1.2rem}
dialog h2{margin:0 0 .2rem; font-size:1.2rem}
dialog label{display:flex; flex-direction:column; gap:.3rem; font-size:.88rem; color:var(--zacht)}
dialog input:not([type=radio]):not([type=checkbox]):not([type=range]),dialog select,dialog textarea{background:var(--bg); border:1px solid var(--rand);
  border-radius:9px; padding:.6rem .7rem; color:var(--tekst); font-size:1rem; width:100%; min-height:44px}
dialog input:focus,dialog select:focus,dialog textarea:focus{outline:none; border-color:var(--accent)}
dialog input:disabled{opacity:.4}
.rij2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.euro{position:relative}
.euro span{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--zacht)}
.euro input{padding-left:1.7rem!important; font-variant-numeric:tabular-nums; font-size:1.1rem!important; font-weight:600}
label.check{flex-direction:row; align-items:center; gap:.45rem}
.segment{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem}
.segment legend{font-size:.88rem; color:var(--zacht); margin-bottom:.3rem; padding:0}
.segment label{flex:1 1 auto}
.segment input{position:absolute; opacity:0; pointer-events:none}
.segment span{display:block; text-align:center; padding:.55rem .6rem; border:1px solid var(--rand); border-radius:9px; background:#1f242e;
  color:var(--tekst); cursor:pointer; white-space:nowrap}
.segment input:checked+span{border-color:var(--accent); background:#1b2a48}
.segment input:focus-visible+span{outline:2px solid var(--accent)}
.schuif{display:flex; flex-direction:column; gap:.3rem}
.schuif input{width:100%; accent-color:var(--accent)}
.schuif output{color:var(--zacht); font-size:.85rem; text-align:center}
.bonvak{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.bonvak .knop{flex-direction:row; color:var(--tekst)}
.acties{display:flex; gap:.5rem; align-items:center; margin-top:.3rem}
.vul{flex:1}
dialog.bon{width:min(720px,calc(100vw - 1.5rem))}
#bonInhoud{padding:1rem; text-align:center}
#bonInhoud img{max-width:100%; max-height:70vh; border-radius:8px}
dialog.bon .acties{padding:0 1rem 1rem}
.logrij{display:grid; grid-template-columns:1.6rem 1fr; gap:.4rem; padding:.45rem 0; border-bottom:1px solid var(--rand); font-size:.88rem}
.logrij .klein{display:block}
#log{max-height:60vh; overflow-y:auto}

/* toast & fab */
.toast{position:fixed; left:50%; bottom:calc(1.2rem + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#262c38;
  border:1px solid var(--rand); border-radius:12px; padding:.7rem 1rem; display:flex; gap:1rem; align-items:center; z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.45); max-width:calc(100vw - 2rem)}
.fab{display:none}

@media (max-width:640px){
  .kop{padding:.8rem .9rem .3rem} main{padding:0 .75rem 6rem}
  #btnMenu{font-size:1.4rem}
  .saldo-bedrag{font-size:2rem}
  .saldo-detail{grid-template-columns:1fr 1fr}
  .saldo-detail>div:last-child{grid-column:1/-1; border-top:1px solid var(--rand)}
  .saldo-detail>div:nth-child(2){border-right:0}
  #btnNieuw{display:none}
  .balk input{flex-basis:100%}
  .balk select{flex:1; min-width:0}
  .item{grid-template-columns:1.8rem 1fr auto auto; gap:.55rem; padding:.65rem .7rem}
  .catrij{grid-template-columns:minmax(0,130px) 1fr auto}
  .fab{display:flex; position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); width:58px; height:58px; border-radius:50%;
    background:var(--accent); color:#fff; border:0; font-size:1.9rem; align-items:center; justify-content:center; z-index:30;
    box-shadow:0 8px 24px rgba(79,140,255,.45); cursor:pointer}
  .toast{bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  dialog{width:100vw; max-width:100vw; max-height:92vh; margin:auto 0 0; border-radius:16px 16px 0 0}
  .rij2{grid-template-columns:1fr 1fr}
}