:root{--navy:#0a2647;--blue:#144272;--mid:#205295;--bright:#2c74b3;--ink:#071b32;--paper:#f4f8fc;--white:#fff;--muted:#74879b;--shadow:0 20px 55px rgba(10,38,71,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#eef5fb 0,#f9fbfd 70%);color:var(--ink);font-family:Manrope,system-ui,sans-serif;min-height:100vh}.ambient{position:fixed;border-radius:50%;filter:blur(2px);pointer-events:none;opacity:.14}.ambient-one{width:480px;height:480px;background:var(--bright);right:-220px;top:-210px}.ambient-two{width:360px;height:360px;background:var(--mid);left:-230px;top:44%}.shell{width:min(1080px,calc(100% - 40px));margin:auto;padding:58px 0 30px;position:relative}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px}.eyebrow,.section-title p{color:var(--bright);font-size:11px;font-weight:800;letter-spacing:.18em;margin:0 0 9px}.eyebrow span{display:inline-block;width:7px;height:7px;background:var(--bright);border-radius:99px;margin-right:7px;box-shadow:0 0 0 5px rgba(44,116,179,.1)}h1{font-size:clamp(44px,6vw,70px);line-height:.95;letter-spacing:-.055em;margin:0;color:var(--navy)}.subtitle{color:var(--muted);margin:16px 0 0}.date-pill{background:#fff;border:1px solid rgba(32,82,149,.1);border-radius:18px;padding:13px 18px;display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(10,38,71,.06)}.date-pill span{font-size:9px;color:var(--bright);font-weight:800;letter-spacing:.16em}.date-pill strong{font-size:14px;margin-top:3px}.balance-card{min-height:260px;border-radius:30px;background:linear-gradient(125deg,var(--navy),var(--blue));color:#fff;padding:47px 55px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;box-shadow:0 24px 60px rgba(10,38,71,.25)}.balance-card:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-140px}.balance-copy{z-index:2}.balance-copy p{color:#adc8e3;font-size:13px;margin:0 0 12px}.balance-copy h2{font-size:clamp(38px,6vw,65px);letter-spacing:-.055em;margin:0}.saved{display:flex;align-items:center;gap:8px;color:#bbd1e6;font-size:11px;margin-top:24px}.saved i{width:7px;height:7px;background:#53d6a0;border-radius:50%;box-shadow:0 0 0 5px rgba(83,214,160,.12)}.balance-art{position:relative;width:260px;height:190px}.jar{position:absolute;width:130px;height:145px;right:38px;bottom:-17px;border:4px solid rgba(255,255,255,.7);border-radius:14px 14px 45px 45px;overflow:hidden;transform:rotate(3deg)}.jar-neck{position:absolute;width:78px;height:14px;border:4px solid rgba(255,255,255,.7);border-bottom:0;left:22px;top:-2px;border-radius:5px}.jar-fill{position:absolute;inset:58% 0 0;background:linear-gradient(0deg,var(--bright),#4b99d5);animation:wave 4s ease-in-out infinite}.jar b{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:28px}.coin{position:absolute;border:2px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center;color:white;font-size:11px;font-weight:800;animation:float 3s ease-in-out infinite}.coin-a{width:43px;height:43px;right:6px;top:11px}.coin-b{width:34px;height:34px;left:55px;top:4px;animation-delay:-1.4s}.section-title{margin:51px 2px 21px;display:flex;justify-content:space-between;align-items:end}.section-title h2{font-size:24px;margin:0;letter-spacing:-.035em}.section-title>span{font-size:13px;font-weight:800;color:var(--mid);background:#e5eff8;padding:9px 14px;border-radius:10px}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.note{background:#fff;border:1px solid rgba(32,82,149,.1);border-radius:20px;padding:18px;box-shadow:0 8px 30px rgba(10,38,71,.055);transition:transform .3s,box-shadow .3s,border-color .3s}.note:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(44,116,179,.25)}.banknote{height:80px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--mid));color:white;display:flex;align-items:center;justify-content:space-between;padding:13px;position:relative;overflow:hidden}.banknote:before,.banknote:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%}.banknote:before{width:110px;height:110px;right:-42px}.banknote:after{width:55px;height:55px;left:-24px}.banknote strong{font-size:19px;z-index:1}.banknote small{z-index:1;opacity:.65}.stepper{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;margin-top:15px}.stepper button{border:0;width:36px;height:36px;border-radius:10px;background:#eaf2f9;color:var(--blue);font-size:21px;cursor:pointer;transition:.2s}.stepper button:hover{background:var(--bright);color:#fff;transform:scale(1.06)}.stepper input{width:100%;border:0;text-align:center;font:700 16px Manrope;color:var(--navy);outline:none}.subtotal{text-align:center;color:var(--muted);font-size:10px;margin:7px 0 0}.accounts-title{margin-top:55px}.accounts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.account{background:#fff;border:1px solid rgba(32,82,149,.1);border-radius:20px;padding:19px 20px;display:flex;align-items:center;gap:14px;transition:.3s}.account:focus-within{border-color:var(--bright);box-shadow:0 12px 35px rgba(32,82,149,.1);transform:translateY(-2px)}.bank-icon{width:46px;height:46px;flex:none;border-radius:14px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}.revolut .bank-icon{background:var(--navy);font-size:22px}.account-name{display:flex;flex-direction:column;min-width:110px}.account-name b{font-size:14px}.account-name small{color:var(--muted);font-size:10px;margin-top:3px}.input-wrap{margin-left:auto;display:flex;align-items:center;background:var(--paper);border-radius:12px;padding:0 12px;max-width:190px}.input-wrap input{border:0;background:transparent;outline:0;width:100%;min-width:40px;text-align:right;padding:12px 5px;font:700 15px Manrope;color:var(--navy)}.input-wrap em{font-style:normal;color:var(--muted);font-size:11px}.history-wrap{margin-top:58px}.history-wrap .section-title{margin-top:0}.section-title button{border:0;background:transparent;color:#9b6070;font:600 11px Manrope;cursor:pointer}.history{background:#fff;border-radius:20px;border:1px solid rgba(32,82,149,.1);overflow:hidden}.history-row,.empty{padding:17px 21px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf2f7}.history-row:last-child{border:0}.history-row span{color:var(--muted);font-size:12px}.history-row strong{font-size:14px}.empty{color:var(--muted);font-size:12px;justify-content:center}footer{text-align:center;color:#96a7b8;font-size:10px;margin-top:35px}footer span{color:var(--bright);margin-left:5px}@keyframes float{50%{transform:translateY(-10px) rotate(7deg)}}@keyframes wave{50%{transform:translateY(-5px) rotate(-2deg) scaleX(1.05)}}@media(max-width:720px){.shell{width:min(100% - 24px,1080px);padding-top:35px}.hero{align-items:center}.subtitle{font-size:13px}.balance-card{padding:35px 28px;min-height:220px}.balance-art{width:150px;transform:scale(.8);transform-origin:right}.notes{grid-template-columns:repeat(2,1fr)}.accounts{grid-template-columns:1fr}.section-title{margin-top:40px}}@media(max-width:480px){.hero{align-items:end}.date-pill{padding:10px 12px}.date-pill strong{font-size:11px}.balance-art{display:none}.balance-card{min-height:210px}.notes{gap:10px}.note{padding:11px}.banknote{height:66px;padding:10px}.banknote strong{font-size:15px}.stepper{grid-template-columns:32px 1fr 32px;gap:2px}.stepper button{width:32px;height:32px}.section-title h2{font-size:20px}.account{padding:15px 13px}.account-name{min-width:85px}.input-wrap{max-width:140px}}
.money-stage{height:142px;position:relative;display:grid;place-items:center;perspective:700px}.banknote-stack{position:relative;width:92%;aspect-ratio:2.1/1;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}.banknote-stack.is-stack{transform:rotate(-4deg) translateY(-3px)}.money-layer{position:absolute;inset:0;border-radius:7px;overflow:hidden;box-shadow:0 7px 13px rgba(10,38,71,.18);transform:translate(calc(var(--i)*2px),calc(var(--i)*-4px)) rotate(calc((var(--i) - 2)*1.35deg));animation:noteIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.04s);background:#dce7ef}.money-layer img{width:100%;height:100%;object-fit:cover;display:block}.money-layer.creased{clip-path:polygon(0 2%,30% 0,33% 3%,67% 0,100% 2%,99% 96%,76% 100%,72% 96%,28% 100%,25% 96%,1% 99%);filter:contrast(.96) brightness(.98)}.money-layer.creased:after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,transparent 45%,rgba(255,255,255,.3) 48%,rgba(9,31,54,.16) 50%,transparent 53%);mix-blend-mode:soft-light}.count-badge{position:absolute;right:2px;top:0;background:var(--navy);color:#fff;font-size:9px;font-weight:800;padding:6px 8px;border-radius:99px;box-shadow:0 6px 15px rgba(10,38,71,.22);opacity:0;transform:scale(.7);transition:.3s}.count-badge.show{opacity:1;transform:scale(1)}.money-stage+.stepper{margin-top:8px}.bank-icon{overflow:hidden;background:#fff!important}.bank-icon img{width:100%;height:100%;object-fit:cover;display:block}@keyframes noteIn{from{opacity:0;transform:translate(18px,-18px) rotate(10deg) scale(.93)}}
.compact-title{height:0;margin:0;position:relative}.compact-title>span{position:absolute;right:0;top:8px;z-index:3}.history-wrap>summary{list-style:none;width:38px;height:30px;margin:12px auto 0;border-radius:12px;background:#e5eff8;color:var(--mid);display:grid;place-items:center;cursor:pointer}.history-wrap>summary::-webkit-details-marker{display:none}.history-wrap[open]>summary span{transform:rotate(180deg)}.history-wrap>summary span{transition:.3s}.history-row{gap:12px}.history-row strong{margin-left:auto}.history-row button{border:0;background:#edf3f8;color:#8b9bad;border-radius:8px;width:26px;height:26px;cursor:pointer}*{user-select:none}.jar-fill{inset:auto 0 0!important;height:42%!important;animation:none!important;transform:none!important}.shell{padding-top:18px}.hero{margin-bottom:14px;align-items:center}h1{font-size:38px}.balance-card{min-height:150px;padding:25px 40px;border-radius:24px}.balance-copy h2{font-size:42px}.balance-copy p{display:none}.saved{margin-top:10px}.balance-art{height:135px;transform:scale(.72);transform-origin:center}.notes{gap:10px}.note{padding:10px}.money-stage{height:96px}.accounts-title{margin:8px 0 0}.accounts{gap:10px}.account{padding:10px 14px}.history-wrap{margin-top:0}footer{margin-top:8px}.stepper{margin-top:2px!important}.subtotal{display:none}
@media(min-width:721px) and (min-height:650px){body:not(:has(.history-wrap[open])){overflow:hidden}.shell{height:100vh;display:flex;flex-direction:column}.notes{flex:1;min-height:0}.accounts{flex:none}}
@media(max-height:760px) and (min-width:721px){.shell{width:min(1180px,calc(100% - 28px))}.hero{margin-bottom:8px}.balance-card{min-height:120px;padding:18px 32px}.balance-art{height:110px;transform:scale(.62)}.money-stage{height:82px}.bank-icon{width:38px;height:38px}.account{padding:7px 12px}footer{display:none}}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper input[type=number]{appearance:textfield;-moz-appearance:textfield}
.hero{display:none!important}.shell{padding-top:14px!important}.balance-card{margin-bottom:14px!important}.notes{row-gap:14px!important}.accounts{margin-top:12px!important}.history-wrap{flex:none!important;margin-top:10px!important}.history-wrap[open]{width:100%;padding-bottom:24px}.shell:has(.history-wrap[open]){height:auto!important;min-height:100vh!important}.history-wrap[open] .history{margin-top:10px}.history-wrap[open]>summary{margin-top:0}.money-layer img{image-rendering:auto}.note{min-height:0}.account{min-height:58px}
@media(min-width:721px) and (min-height:650px){.notes{flex:none!important;height:348px!important}.balance-card{margin-bottom:18px!important}.accounts{margin-top:16px!important}body .shell:has(details.history-wrap[open]){height:auto!important;min-height:100vh!important;overflow:visible!important}}
body{background:radial-gradient(circle at 12% 8%,rgba(44,116,179,.22),transparent 30%),radial-gradient(circle at 88% 92%,rgba(32,82,149,.2),transparent 34%),linear-gradient(145deg,#061525 0%,#091f38 52%,#07192d 100%)!important;background-attachment:fixed;color:#eaf3fb}.ambient{display:none!important}.note,.account,.history{background:rgba(12,38,66,.94)!important;border-color:rgba(119,174,222,.16)!important;box-shadow:0 12px 30px rgba(0,0,0,.24)!important}.note:hover,.account:focus-within{border-color:rgba(74,153,219,.5)!important;box-shadow:0 18px 38px rgba(0,0,0,.34)!important}.stepper input,.account-name b,.history-row strong{color:#edf6ff!important}.stepper input{background:transparent!important}.stepper button,.history-wrap>summary{background:#123b64!important;color:#8ecbff!important}.stepper button:hover{background:#2c74b3!important;color:#fff!important}.input-wrap{background:#0a2948!important}.input-wrap input{color:#f2f8ff!important}.account-name small,.input-wrap em,.history-row span,.empty{color:#87a2bb!important}.bank-icon{box-shadow:0 6px 18px rgba(0,0,0,.3)!important}.compact-title>span{background:#123b64!important;color:#9bd1ff!important}.history-row{border-color:rgba(119,174,222,.12)!important}.history-row button{background:#173b5e!important;color:#a9c2d9!important}
.note{display:flex!important;flex-direction:column!important;padding:10px 12px 12px!important}.money-stage{height:auto!important;min-height:105px!important;flex:1!important}.money-stage+.stepper{display:block!important;margin-top:8px!important}.stepper input{display:block!important;width:100%!important;height:34px!important;border:1px solid rgba(119,174,222,.2)!important;border-radius:10px!important;background:#0a2948!important;color:#f2f8ff!important;text-align:center!important;padding:5px 10px!important;font:700 14px Manrope!important}.stepper input:focus{border-color:#2c74b3!important;box-shadow:0 0 0 3px rgba(44,116,179,.18)!important}.count-badge{top:4px!important;right:4px!important}.history-wrap{position:relative!important}.history-wrap>summary{position:relative!important;z-index:2!important;margin:10px auto 0!important}.history-wrap>.history{display:block!important;max-height:0!important;opacity:0!important;overflow:hidden!important;transform:translateY(-8px)!important;margin-top:0!important;transition:max-height .5s cubic-bezier(.22,.8,.25,1),opacity .3s ease,transform .45s cubic-bezier(.22,.8,.25,1),margin-top .45s ease!important}.history-wrap[open]>.history{max-height:420px!important;opacity:1!important;transform:translateY(0)!important;margin-top:10px!important}
@media(min-width:721px) and (min-height:650px){.notes{height:370px!important}.accounts{margin-top:18px!important}}

/* A bankjegy és a darabszám mező kapjon külön, biztosan elférő sávot. */
@media (min-width:721px) and (min-height:650px){
  .balance-card{
    height:72px!important;
    min-height:72px!important;
    max-height:72px!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  .notes{
    height:470px!important;
  }
  .note{
    min-height:228px!important;
    padding:10px 12px 12px!important;
  }
  .money-stage{
    min-height:154px!important;
    overflow:visible!important;
  }
  .banknote-stack{
    width:min(92%,310px)!important;
  }
  .money-stage + .stepper{
    flex:none!important;
    margin-top:16px!important;
  }
}

.balance-line{
  display:flex;
  align-items:center;
  gap:14px;
}
.save-button{
  border:1px solid rgba(255,255,255,.22);
  border-radius:11px;
  background:#2c74b3;
  color:#fff;
  padding:9px 16px;
  font:800 12px Manrope,system-ui,sans-serif;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.save-button:hover{
  background:#3989cb;
  transform:translateY(-2px);
  box-shadow:0 11px 24px rgba(0,0,0,.28);
}
.save-button:active{transform:scale(.96)}
.save-button.saved-now{background:#23976d}
.save-status{
  color:#77e7ba;
  min-width:42px;
  font-size:10px;
  font-weight:800;
}
@media(max-width:480px){
  .balance-line{gap:8px}
  .save-button{padding:8px 11px}
  .save-status{display:none}
}

.history-wrap[open] > .history{
  max-height:2200px!important;
  overflow:hidden!important;
}
.chart-card{
  padding:18px 18px 8px;
  background:linear-gradient(180deg,rgba(18,59,100,.38),rgba(8,31,55,.12));
  border-bottom:1px solid rgba(119,174,222,.12);
}
.chart-meta{
  height:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#87a2bb;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.chart-meta b{
  font-size:12px;
  letter-spacing:0;
}
.history-chart{
  display:block;
  width:100%;
  height:220px;
  overflow:visible;
}
.chart-grid line{
  stroke:rgba(155,209,255,.15);
  stroke-width:1;
}
.chart-area{
  fill:url(#chartFill);
  animation:chartFade .65s ease both;
}
.chart-line{
  fill:none;
  stroke:#2f8fe0;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:drawChart .9s .08s cubic-bezier(.22,.8,.25,1) forwards;
}
.chart-points circle{
  fill:#58b2ff;
  stroke:#0c2642;
  stroke-width:4;
  transform-box:fill-box;
  transform-origin:center;
  animation:chartPoint .35s calc(.25s + var(--delay)) ease both;
}
.history-row{
  min-height:52px;
}
.history-date{
  min-width:170px;
  color:#a9c2d9!important;
  font-variant-numeric:tabular-nums;
}
.history-delta{
  min-width:90px;
  font-size:11px!important;
  font-weight:800;
  text-align:right;
}
.positive{color:#55d9a2!important}
.negative{color:#ff8793!important}
.neutral{color:#87a2bb!important}
@keyframes drawChart{to{stroke-dashoffset:0}}
@keyframes chartFade{from{opacity:0}to{opacity:1}}
@keyframes chartPoint{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@media(max-width:620px){
  .chart-card{padding:12px 9px 5px}
  .history-chart{height:170px}
  .history-row{padding:13px 11px;gap:7px;flex-wrap:wrap}
  .history-date{min-width:calc(100% - 35px);order:1}
  .history-row button{order:2;margin-left:auto}
  .history-delta{order:3;min-width:0;text-align:left}
  .history-row strong{order:4}
}

.stepper{position:relative!important}
.stepper input{padding-right:42px!important}
.stepper .clear-note{
  position:absolute!important;
  top:50%!important;
  right:5px!important;
  width:26px!important;
  height:26px!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:rgba(44,116,179,.22)!important;
  color:#8ecbff!important;
  font:700 17px/26px Manrope,system-ui,sans-serif!important;
  cursor:pointer!important;
  transform:translateY(-50%)!important;
  transition:background .2s ease,color .2s ease,transform .2s ease!important;
}
.stepper .clear-note:hover{
  background:#2c74b3!important;
  color:#fff!important;
  transform:translateY(-50%) scale(1.06)!important;
}
.chart-card{position:relative}
.chart-card{
  border-radius:19px 19px 0 0;
}
.chart-points circle{
  cursor:pointer;
  transition:r .2s ease,fill .2s ease;
  outline:none;
}
.chart-points circle:hover,.chart-points circle:focus{
  r:9px;
  fill:#a5dcff;
}
.chart-tooltip{
  position:absolute;
  z-index:5;
  min-width:140px;
  padding:9px 12px;
  border:1px solid rgba(142,203,255,.24);
  border-radius:11px;
  background:rgba(5,24,43,.96);
  box-shadow:0 12px 30px rgba(0,0,0,.38);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-100%) translateY(-7px) scale(.94);
  transition:opacity .16s ease,transform .16s ease;
}
.chart-tooltip.show{
  opacity:1;
  transform:translate(-50%,-100%) translateY(-7px) scale(1);
}
.chart-tooltip.below{
  transform:translate(-50%,0) translateY(7px) scale(.94);
}
.chart-tooltip.below.show{
  transform:translate(-50%,0) translateY(7px) scale(1);
}
.chart-tooltip span,.chart-tooltip strong{display:block;white-space:nowrap}
.chart-tooltip span{color:#91abc3;font-size:9px;margin-bottom:3px}
.chart-tooltip strong{color:#f1f8ff;font-size:12px}

.confirm-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(2,12,23,.68);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .22s ease;
}
.confirm-overlay[hidden]{display:none}
.confirm-overlay.show{opacity:1}
.confirm-panel{
  width:min(330px,100%);
  padding:27px;
  border:1px solid rgba(142,203,255,.2);
  border-radius:22px;
  background:linear-gradient(145deg,#0d3154,#081f38);
  box-shadow:0 28px 70px rgba(0,0,0,.48);
  text-align:center;
  transform:translateY(12px) scale(.96);
  transition:transform .25s cubic-bezier(.22,.8,.25,1);
}
.confirm-overlay.show .confirm-panel{transform:translateY(0) scale(1)}
.confirm-icon{
  width:44px;
  height:44px;
  margin:0 auto 13px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,93,112,.13);
  color:#ff8793;
  font-size:25px;
}
.confirm-panel h3{margin:0;color:#f2f8ff;font-size:20px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.confirm-actions button{
  height:42px;
  border:0;
  border-radius:11px;
  color:#fff;
  font:800 12px Manrope,system-ui,sans-serif;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.confirm-actions button:hover{transform:translateY(-2px);filter:brightness(1.12)}
.confirm-no{background:#173b5e}
.confirm-yes{background:#c94b5b}

html{
  overflow-y:auto!important;
  background:#07192d!important;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#2c74b3 #061525;
}
body{overflow-x:hidden}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#061525}
::-webkit-scrollbar-thumb{
  min-height:48px;
  border:2px solid #061525;
  border-radius:999px;
  background:linear-gradient(180deg,#3c8fd0,#205295);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#58a8e6,#2c74b3);
}
::-webkit-scrollbar-corner{background:#061525}

/* Letisztított felső összegkártya. */
.balance-card{
  justify-content:center!important;
  background:#123b64!important;
}
.balance-card::before,
.balance-art{
  display:none!important;
}
.balance-copy{
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.balance-line{
  justify-content:center!important;
}
.save-status{
  display:none!important;
}

@media (min-width:721px) and (min-height:650px){
  body:not(:has(.history-wrap[open])) .shell{
    height:100vh!important;
    min-height:100vh!important;
    padding-top:0!important;
    padding-bottom:0!important;
    justify-content:center!important;
  }
}

.balance-card{
  justify-content:space-between!important;
}
.balance-copy,
.balance-line{
  width:100%!important;
}
.balance-line{
  justify-content:space-between!important;
}

@media (min-width:721px) and (min-height:650px){
  body .shell:has(details.history-wrap[open]){
    padding-top:max(14px,calc((100vh - 690px)/2))!important;
    padding-bottom:30px!important;
    justify-content:flex-start!important;
  }
}

.history-row .history-delta.positive{
  color:#55d9a2!important;
}
.history-row .history-delta.negative{
  color:#ff6f7f!important;
}
.history-row .history-delta.neutral{
  color:#87a2bb!important;
}
.chart-points circle{
  cursor:default!important;
}
.chart-points circle:hover{
  r:9px;
  fill:#a5dcff;
}

.history-wrap[open] > .history{
  overflow:visible!important;
}
.history-row{
  position:relative;
}
.history-row:hover{
  z-index:20;
  background:rgba(20,66,108,.62);
}
.history-details{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:calc(100% - 5px);
  width:min(720px,calc(100% - 36px));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  padding:12px;
  border:1px solid rgba(142,203,255,.22);
  border-radius:14px;
  background:rgba(5,24,43,.97);
  box-shadow:0 18px 45px rgba(0,0,0,.42);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,8px) scale(.97);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.history-row:hover .history-details{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
}
.history-details span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  padding:8px 9px;
  border-radius:9px;
  background:#0d3154;
}
.history-details b{
  color:#dcecff;
  font-size:10px;
  white-space:nowrap;
}
.history-details em{
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}
.history-details .account-detail{
  background:#123b64;
}
.history-details img{
  display:block;
  flex:none;
  object-fit:cover;
  box-shadow:0 3px 8px rgba(0,0,0,.28);
}
.history-details .note-detail img{
  width:34px;
  height:17px;
  border-radius:3px;
}
.history-details .account-detail img{
  width:22px;
  height:22px;
  border-radius:7px;
}
.history-details .note-detail b,
.history-details .account-detail b{
  margin-right:auto;
}
@media(max-width:720px){
  .history-details{
    grid-template-columns:repeat(2,1fr);
    width:calc(100% - 18px);
  }
}

.comment-field{
  display:block;
  flex:none;
  margin-top:6px;
}
.comment-field input{
  width:100%;
  height:46px;
  padding:0 16px;
  border:1px solid rgba(119,174,222,.16);
  border-radius:11px;
  outline:none;
  background:#0a2948;
  color:#f2f8ff;
  font:600 11px Manrope,system-ui,sans-serif;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.comment-field input::placeholder{color:#718ba4}
.comment-field input:focus{
  border-color:#2c74b3;
  box-shadow:0 0 0 3px rgba(44,116,179,.16);
}
.history-note{
  grid-column:1/-1;
  margin:2px 3px 0;
  padding:9px 10px 2px;
  border-top:1px solid rgba(142,203,255,.12);
  color:#8ba2b8;
  font-size:10px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
@media(min-width:721px) and (min-height:650px){
  .balance-card{margin-bottom:6px!important}
  .accounts{margin-top:6px!important}
  body .shell:has(details.history-wrap[open]){
    padding-top:max(8px,calc((100vh - 718px)/2))!important;
  }
}

.history-wrap.preparing-open > .history,
.history-wrap.is-closing > .history{
  max-height:0!important;
  margin-top:0!important;
  opacity:0!important;
  transform:translateY(-8px)!important;
}
.history-wrap.is-closing > summary span{
  transform:rotate(0deg)!important;
}

html.manual-scroll{
  scroll-behavior:auto!important;
}
@media(min-width:721px) and (min-height:650px){
  body:not(:has(.history-wrap[open])){
    overflow-y:visible!important;
    overflow-x:clip!important;
  }
}

body{
  overflow-y:visible!important;
  overflow-x:clip!important;
}

.save-toast{
  position:fixed;
  z-index:120;
  top:16px;
  left:50%;
  width:min(390px,calc(100% - 28px));
  min-height:62px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 17px 16px;
  overflow:hidden;
  border:1px solid rgba(111,225,177,.24);
  border-radius:15px;
  background:rgba(7,35,59,.97);
  color:#f3f9ff;
  box-shadow:0 18px 45px rgba(0,0,0,.42);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-140%);
  transition:transform .48s cubic-bezier(.22,.8,.25,1),opacity .3s ease;
}
.save-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}
.save-toast.show.hide{
  opacity:0;
  transform:translate(-50%,-140%);
}
.save-toast-icon{
  width:30px;
  height:30px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(85,217,162,.16);
  color:#55d9a2;
  font-size:17px;
  font-weight:900;
}
.save-toast strong{
  font-size:13px;
  letter-spacing:-.01em;
}
.save-toast-progress{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,#55d9a2,#2c74b3);
  transform-origin:left;
  transform:scaleX(1);
}
.save-toast.show .save-toast-progress{
  animation:saveToastProgress 5s linear forwards;
}
@keyframes saveToastProgress{
  to{transform:scaleX(0)}
}

.history-row.new-save{
  position:relative;
  z-index:21;
  animation:newSaveHighlight 1s ease both;
}
@keyframes newSaveHighlight{
  0%,100%{
    background:transparent;
    box-shadow:inset 0 0 0 0 rgba(85,217,162,0);
  }
  18%,72%{
    background:rgba(85,217,162,.15);
    box-shadow:inset 4px 0 0 #55d9a2,inset 0 0 24px rgba(85,217,162,.08);
  }
}

.history-wrap[hidden]{
  display:none!important;
}

.note:hover{
  transform:none!important;
}

.balance-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.cancel-edit{
  height:36px;
  padding:0 15px;
  border:1px solid rgba(255,135,147,.28);
  border-radius:11px;
  background:#a83d4b;
  color:#fff;
  font:800 12px Manrope,system-ui,sans-serif;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}
.cancel-edit:hover{
  background:#c94b5b;
  transform:translateY(-2px);
}
.cancel-edit[hidden]{display:none!important}

.context-menu{
  position:fixed;
  z-index:200;
  width:180px;
  padding:6px;
  border:1px solid rgba(142,203,255,.2);
  border-radius:12px;
  background:rgba(6,27,48,.98);
  box-shadow:0 16px 42px rgba(0,0,0,.46);
  opacity:0;
  transform:translateY(-5px) scale(.96);
  transform-origin:top left;
  transition:opacity .14s ease,transform .14s ease;
}
.context-menu[hidden]{display:none!important}
.context-menu.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.context-menu button,
.context-empty{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 11px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#dcecff;
  font:700 11px Manrope,system-ui,sans-serif;
  text-align:left;
}
.context-menu button{cursor:pointer}
.context-menu button:hover{background:#123b64}
.context-menu button span{color:#63baff;font-size:15px}
.context-empty{color:#718ba4}
.context-empty[hidden],.context-menu button[hidden]{display:none!important}