.topbar{position:sticky;top:0;z-index:10;background:var(--paper)}.topbar.scrolled{box-shadow:0 8px 16px -14px #203b3066}.topbar.scrolled .seal{background:var(--soft)}#chartSection{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0 26px;margin:0 0 40px}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:25px}.chart-eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:12px}.chart-heading h2{font-size:36px;margin-bottom:8px}.chart-heading p:last-child{margin-bottom:0}.chart-controls{display:flex;border:1px solid var(--line);border-radius:6px;padding:4px;gap:3px}.chart-controls button{border:0;min-height:44px;font-size:13px}.chart-controls [aria-pressed=true]{background:var(--green);color:var(--paper)}.chart-note{font-size:12px;color:var(--muted);max-width:85ch;margin-top:18px}.chart-legend{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:12px;margin-top:24px}.legend-in{color:#40724a}.legend-out{color:var(--red)}.legend-balance{color:var(--ink);font-weight:700}#chartStatus{font-size:11px;color:var(--muted);min-height:17px;margin:10px 0}#chartEmpty{font-size:13px;padding:12px 16px;background:var(--soft);border-left:2px solid var(--green)}#cashChart{display:block;width:100%;height:auto;min-height:220px;touch-action:pan-y;overflow:visible}#cashChart text{font:12px var(--sans);fill:var(--muted)}.chart-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}.chart-zero{stroke:#718276;stroke-width:1.2}.series-income{stroke:#40724a;stroke-width:2}.series-expense{stroke:var(--red);stroke-width:2;stroke-dasharray:5 4}.series-balance{stroke:var(--ink);stroke-width:3}.chart-cursor{stroke:#a3782b;stroke-dasharray:3 4;opacity:.7}.chart-inspector{display:flex;align-items:center;gap:12px;background:var(--soft);padding:9px 12px;border-radius:4px}.chart-inspector button{flex-shrink:0;padding:6px;min-width:44px}.chart-inspector p{flex:1;font-size:12px;font-variant-numeric:tabular-nums;margin:0;line-height:1.7}#chartDetails summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:13px;font-weight:600}.chart-table-wrap{overflow:auto;max-height:340px}.chart-table-wrap table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}.chart-table-wrap caption{text-align:left;padding:12px 0;color:var(--muted)}.chart-table-wrap td,.chart-table-wrap th{border-bottom:1px solid var(--line);padding:12px;text-align:right}.chart-table-wrap th:first-child{text-align:left}.chart-table-wrap thead{background:var(--soft)}@media(max-width:760px){.chart-heading{display:block}.chart-controls{margin-top:20px;max-width:350px}.chart-controls button{flex:1}.chart-heading h2{font-size:31px}.chart-legend{gap:9px 16px;font-size:11px}#cashChart{min-height:190px}#cashChart text{font-size:27px}.chart-inspector{padding:8px;gap:7px}.chart-inspector p{font-size:11px}.topbar{top:-1px}#chartSection{padding-top:25px}.chart-note{font-size:11px}}@media(prefers-reduced-motion:no-preference){.topbar{transition:box-shadow .25s ease}.seal{transition:background .25s ease}.chart-controls button{transition:background .2s,color .2s}.tx-row{transition:background .18s ease}.tx-row:hover{background:var(--soft)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Bars stay legible at native size; only their own region scrolls. */
html{scrollbar-gutter:stable}#app main{min-height:calc(100dvh - 170px)}
#chartCanvas{overflow-x:auto;overflow-y:hidden;height:310px;max-width:100%;overscroll-behavior-x:contain}
#cashChart{height:310px;min-height:310px;max-width:none;touch-action:auto;overflow:hidden}
#cashChart text{font-size:12px;transition:fill .2s ease}

/* Animated bars with stagger */
.series-income,.series-expense,.series-balance{opacity:0;animation:bar-grow .6s cubic-bezier(.16,1,.3,1) forwards;transform-origin:bottom;filter:drop-shadow(0 2px 4px rgba(32,59,48,.12))}
.series-income{fill:#40724a;stroke:none}
.series-expense{fill:var(--red);stroke:none}
.series-balance{fill:var(--ink);stroke:none}
.series-income:hover,.series-expense:hover,.series-balance:hover{filter:drop-shadow(0 4px 12px rgba(32,59,48,.3)) brightness(1.1);cursor:pointer}
#cashChart rect{transition:filter .2s ease}

@keyframes bar-grow{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}

/* Stagger animation for each bar */
#cashChart rect:nth-child(1){animation-delay:0ms}
#cashChart rect:nth-child(2){animation-delay:30ms}
#cashChart rect:nth-child(3){animation-delay:60ms}
#cashChart rect:nth-child(4){animation-delay:90ms}
#cashChart rect:nth-child(5){animation-delay:120ms}
#cashChart rect:nth-child(6){animation-delay:150ms}
#cashChart rect:nth-child(7){animation-delay:180ms}
#cashChart rect:nth-child(8){animation-delay:210ms}
#cashChart rect:nth-child(9){animation-delay:240ms}
#cashChart rect:nth-child(10){animation-delay:270ms}
#cashChart rect:nth-child(n+11){animation-delay:300ms}

.chart-view{width:fit-content;margin-top:20px}
.chart-legend{min-height:18px;opacity:0;animation:fade-in .4s ease .2s forwards}
.chart-inspector{min-height:104px;transition:background .2s ease}
#chartStatus{height:34px;margin:10px 0;overflow:hidden;opacity:0;animation:fade-in .4s ease .3s forwards}

@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

#chartTable tr{transition:background .15s ease}
#chartTable tr[aria-current=true]{background:var(--soft);animation:row-highlight .6s ease}
.chart-cursor{pointer-events:none;transition:opacity .2s ease}
.topbar{box-shadow:0 8px 16px -14px #203b3066}
.topbar.scrolled .seal{background:transparent}

/* Smooth page transitions */
@media(prefers-reduced-motion:no-preference){
  #app main.page-enter{animation:page-enter .3s cubic-bezier(.16,1,.3,1)}
  @keyframes page-enter{from{opacity:.92;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  
  /* Animated numbers */
  .number{transition:color .2s ease}
  
  /* Button ripple effect */
  button{position:relative;overflow:hidden}
  button::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.3) 0%,transparent 50%);opacity:0;transition:opacity .3s}
  button:active::after{opacity:1;transition:opacity 0s}
  
  /* Summary cards stagger */
  .metric{opacity:0;animation:card-enter .5s cubic-bezier(.16,1,.3,1) forwards}
  .metric:nth-child(1){animation-delay:0ms}
  .metric:nth-child(2){animation-delay:80ms}
  .metric:nth-child(3){animation-delay:160ms}
  @keyframes card-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  
  /* Transaction rows stagger */
  .tx-row{opacity:0;animation:row-enter .4s cubic-bezier(.16,1,.3,1) forwards}
  .tx-row:nth-child(1){animation-delay:0ms}
  .tx-row:nth-child(2){animation-delay:40ms}
  .tx-row:nth-child(3){animation-delay:80ms}
  .tx-row:nth-child(4){animation-delay:120ms}
  .tx-row:nth-child(5){animation-delay:160ms}
  .tx-row:nth-child(n+6){animation-delay:200ms}
  @keyframes row-enter{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
  
  /* Smooth chart section */
  #chartSection{opacity:0;animation:section-enter .6s cubic-bezier(.16,1,.3,1) .1s forwards}
  @keyframes section-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
}

/* Cursor animation */
.chart-cursor{stroke:#a3782b;stroke-dasharray:3 4;opacity:0;animation:cursor-fade .3s ease forwards}
@keyframes cursor-fade{from{opacity:0}to{opacity:.7}}

/* Tooltip smooth */
#chartTooltip{transition:color .15s ease}
.chart-inspector{transition:transform .2s ease,box-shadow .2s ease}
.chart-inspector:focus-within{transform:translateY(-2px);box-shadow:0 4px 12px rgba(32,59,48,.08)}

/* Button hover lift */
button.primary{transition:transform .15s ease,box-shadow .15s ease}
button.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,78,59,.2)}

/* Grid lines subtle animation */
.chart-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 5;opacity:0;animation:grid-fade .5s ease .1s forwards}
@keyframes grid-fade{from{opacity:0}to{opacity:1}}

/* Zero line emphasis */
.chart-zero{stroke:#718276;stroke-width:1.2;opacity:0;animation:line-fade .4s ease .15s forwards}
@keyframes line-fade{from{opacity:0}to{opacity:1}}

/* Number counting animation pulse */
.number-animate{color:var(--green)!important;transform:scale(1.02);transition:color .15s ease,transform .15s ease}

/* Summary card shimmer on hover */
.metric{position:relative;overflow:hidden;transition:transform .2s ease}
.metric::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(34,78,59,.04) 50%,transparent 70%);transform:translateX(-100%);transition:transform .6s ease}
.metric:hover::before{transform:translateX(100%)}
.metric:hover{transform:translateY(-2px)}

/* Chart toggle buttons active state */
.chart-controls [aria-pressed=true]{animation:toggle-pop .25s cubic-bezier(.16,1,.3,1)}
@keyframes toggle-pop{0%{transform:scale(.95)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

/* Report month cards stagger */
.report-month{opacity:0;animation:fade-in .4s ease forwards}
.report-month:nth-child(1){animation-delay:0ms}
.report-month:nth-child(2){animation-delay:60ms}
.report-month:nth-child(3){animation-delay:120ms}
.report-month:nth-child(4){animation-delay:180ms}
.report-month:nth-child(n+5){animation-delay:240ms}

/* Row highlight animation */
@keyframes row-highlight{0%{background:transparent}50%{background:rgba(34,78,59,.08)}100%{background:var(--soft)}}

/* Login page entrance */
.login-entry{opacity:0;animation:login-enter .6s cubic-bezier(.16,1,.3,1) .1s forwards}
.login-story{opacity:0;animation:login-story-enter .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes login-enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes login-story-enter{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

/* PIN keypad press feedback */
.keypad button{transition:transform .1s ease,box-shadow .1s ease,background .15s ease}
.keypad button:active{transform:scale(.92);box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}

/* Dialog smooth entrance */
dialog[open]{animation:dialog-enter .35s cubic-bezier(.16,1,.3,1)}
dialog[open]::backdrop{animation:backdrop-enter .25s ease}
@keyframes dialog-enter{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}

/* Scroll-triggered subtle pulse for chart section */
#chartSection:not([aria-busy=true]) .chart-heading{animation:heading-settle .5s ease forwards}
@keyframes heading-settle{from{opacity:.85}to{opacity:1}}

/* === SMOOTH SCROLL === */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* === PARALLAX LOGIN HERO === */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  .login-story{transition:background-position .1s linear}
  .login-story h1{transition:transform .15s ease-out}
}

/* === SKELETON LOADING === */
.skeleton{position:relative;overflow:hidden;background:var(--soft);border-radius:6px;color:transparent!important}
.skeleton *{visibility:hidden}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,253,247,.5),transparent);animation:skeleton-shimmer 1.5s ease-in-out infinite}
@keyframes skeleton-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.metric.skeleton dd{width:60%;height:1.2em;margin-top:4px}
.metric.skeleton small{width:40%;height:.8em;margin-top:8px;display:block}
.tx-row.skeleton{border:0;padding:20px 0}
.tx-row.skeleton .tx-date{width:30%;height:.7em;background:var(--soft);border-radius:4px}
.tx-row.skeleton .tx-desc{width:55%;height:1em;background:var(--soft);border-radius:4px}
.tx-row.skeleton .tx-amount{width:20%;height:1em;background:var(--soft);border-radius:4px}
.chart-skeleton{width:100%;height:200px;background:linear-gradient(90deg,var(--soft) 25%,rgba(231,237,226,.5) 50%,var(--soft) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:8px}

/* === SPARKLE/CONFETTI ON SUCCESS === */
.sparkle-container{position:fixed;pointer-events:none;z-index:9999;inset:0;overflow:hidden}
.sparkle{position:absolute;width:8px;height:8px;border-radius:50%;animation:sparkle-fly 1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes sparkle-fly{
  0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
  50%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(180deg)}
  100%{opacity:0;transform:translate(var(--dx2),calc(var(--dy) + 40px)) scale(0) rotate(360deg)}
}

/* === SUCCESS CHECKMARK === */
.success-check{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--green);margin-right:8px;flex-shrink:0}
.success-check svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.success-check svg path{stroke-dasharray:20;stroke-dashoffset:20;animation:check-draw .4s ease .1s forwards}
@keyframes check-draw{to{stroke-dashoffset:0}}

/* === TOAST NOTIFICATION === */
.toast-stack{position:fixed;bottom:24px;right:24px;z-index:10000;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:360px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(32,59,48,.12);font-size:13px;animation:toast-in .4s cubic-bezier(.16,1,.3,1) forwards;backdrop-filter:blur(8px)}
.toast.toast-out{animation:toast-out .3s ease forwards}
.toast-success{border-left:3px solid var(--green)}
.toast-error{border-left:3px solid var(--red)}
@keyframes toast-in{from{opacity:0;transform:translateX(100%) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%) scale(.9)}}
@media(max-width:760px){.toast-stack{bottom:16px;left:16px;right:16px;max-width:none}.toast{padding:12px 14px;font-size:12px}}

/* === NAV INDICATOR (smooth sliding underline) === */
.topbar nav{position:relative}
.nav-indicator{position:absolute;bottom:0;height:2px;background:var(--green);border-radius:2px;transition:left .3s cubic-bezier(.16,1,.3,1),width .3s cubic-bezier(.16,1,.3,1)}

/* === MICRO: Transaction row press === */
.tx-row{transition:transform .1s ease,background .15s ease}
.tx-row:active{transform:scale(.98);background:var(--soft)}

/* === MICRO: Month picker focus ring === */
#month:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,78,59,.15);transition:border-color .2s ease,box-shadow .2s ease}

/* === MICRO: Notice banner slide-in === */
.status{animation:notice-slide .35s cubic-bezier(.16,1,.3,1)}
@keyframes notice-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* === FOOTER FADE === */
footer{opacity:0;animation:fade-in .6s ease .4s forwards}