/* Hero numbers (hero-numbers.js): a neon glow on the big headline values, holiday colors when one is near. */
:root{--hero-glow:#39ff88;--hero-glow-2:#39ff88;--hero-speckle:none}
html[data-holiday="halloween"]{--hero-glow:#ff8a1f;--hero-glow-2:#a259ff}
html[data-holiday="thanksgiving"]{--hero-glow:#ffb547;--hero-glow-2:#d9622b}
html[data-holiday="christmas"]{--hero-glow:#ff3b4f;--hero-glow-2:#2bd96b;--hero-speckle:radial-gradient(circle,#ff6b78 0 1.4px,transparent 2px) 0 0/23px 19px,radial-gradient(circle,#5cff95 0 1.4px,transparent 2px) 11px 9px/29px 23px,radial-gradient(circle,#ffffff 0 1px,transparent 1.6px) 6px 14px/37px 27px}
html[data-holiday="new-year"]{--hero-glow:#ffd36b;--hero-glow-2:#fff1c7;--hero-speckle:radial-gradient(circle,#ffe39a 0 1.3px,transparent 2px) 0 0/21px 17px,radial-gradient(circle,#ffffff 0 1px,transparent 1.6px) 9px 8px/31px 25px}
html[data-holiday="valentines"]{--hero-glow:#ff5fa2;--hero-glow-2:#ff3b6b}
html[data-holiday="st-patricks"]{--hero-glow:#19e07a;--hero-glow-2:#ffd36b}
html[data-holiday="independence"]{--hero-glow:#ff4058;--hero-glow-2:#4d8dff;--hero-speckle:radial-gradient(circle,#ffffff 0 1.2px,transparent 1.8px) 0 0/22px 18px,radial-gradient(circle,#7fb0ff 0 1.2px,transparent 1.8px) 10px 9px/30px 24px}

.hero-number{position:relative;display:inline-block;transform-origin:left center;font-variant-numeric:tabular-nums;
 text-shadow:0 0 10px color-mix(in srgb,var(--hero-glow) 45%,transparent),0 0 26px color-mix(in srgb,var(--hero-glow-2) 22%,transparent);
 transition:transform .65s cubic-bezier(.34,1.56,.64,1),text-shadow .65s ease}
/* Spinning: pops out and glows brighter; when it lands it eases back to size with a small overshoot. */
.hero-number.hero-spinning{transform:scale(1.1);transition:transform .25s ease-out,text-shadow .25s ease-out;
 text-shadow:0 0 14px color-mix(in srgb,var(--hero-glow) 80%,transparent),0 0 36px color-mix(in srgb,var(--hero-glow-2) 45%,transparent)}
.hero-number.hero-spinning.hero-small{transform:scale(1.04)}
/* Holiday speckles twinkle over the number (Christmas, New Year, Independence Day). */
.hero-number::after{content:'';position:absolute;inset:-6px -8px;background:var(--hero-speckle);pointer-events:none;opacity:0;mix-blend-mode:screen}
html[data-holiday="christmas"] .hero-number::after,html[data-holiday="new-year"] .hero-number::after,html[data-holiday="independence"] .hero-number::after{opacity:.55;animation:hero-twinkle 3.2s ease-in-out infinite}
@keyframes hero-twinkle{0%,100%{opacity:.25;background-position:0 0,11px 9px,6px 14px}50%{opacity:.7;background-position:2px 3px,8px 12px,9px 11px}}
body.light .hero-number{text-shadow:0 0 8px color-mix(in srgb,var(--hero-glow) 30%,transparent)}
body.light .hero-number::after{mix-blend-mode:normal}

/* Holiday touches outside the numbers: a badge by the brand, a thin accent line under the header and the active tab. */
body>header .brand:has(.holiday-badge)>strong{display:inline-block;margin-right:0}
.holiday-badge{background:transparent!important;border:0!important;padding:0 2px!important;margin:0 0 0 6px;font-size:17px;line-height:1;cursor:pointer;vertical-align:middle;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hero-glow) 55%,transparent));transition:transform .2s ease}
.holiday-badge:hover{transform:scale(1.15) rotate(-6deg)}
.holiday-badge.holiday-off{filter:grayscale(1);opacity:.45}
html[data-holiday] body>header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--hero-glow) 25%,var(--hero-glow-2) 75%,transparent);opacity:.75;pointer-events:none}
html[data-holiday] body.signed-in nav button.active{border-bottom-color:var(--hero-glow)}

@media (prefers-reduced-motion:reduce){.hero-number,.hero-number.hero-spinning{transition:none;transform:none}.hero-number::after{animation:none!important}.holiday-badge{transition:none}}

/* Confetti / fireworks canvas and the celebration message. */
.fun-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
.fun-toast{position:fixed;left:50%;top:64px;z-index:10000;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:240px;max-width:min(92vw,460px);padding:12px 20px;border-radius:8px;
 background:var(--panel,#0b0e16);border:1px solid var(--hero-glow);color:var(--text,#fff);text-align:center;
 box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 24px color-mix(in srgb,var(--hero-glow) 40%,transparent);
 transform:translate(-50%,-20px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .35s ease}
.fun-toast.show{transform:translate(-50%,0);opacity:1}
.fun-toast strong{font-size:17px;letter-spacing:-.2px}
.fun-toast span{font-size:13px;color:var(--muted,#a9b6cd)}
@media (prefers-reduced-motion:reduce){.fun-toast{transition:opacity .2s ease;transform:translate(-50%,0)}}

/* Budget flow chart: money dots / holiday objects travelling the streams (folio-flow-fx.js). */
#budgetProfile .fun-flow{pointer-events:none}
#budgetProfile .fun-flow-dot{filter:drop-shadow(0 0 3px currentColor)}
#budgetProfile .fun-flow-item{filter:drop-shadow(0 0 4px rgba(0,0,0,.45))}

/* Accounts home: streak badges and the monthly recap (folio-streaks.js). */
.fun-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.fun-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:18px;color:var(--text);
 background:color-mix(in srgb,var(--hero-glow) 10%,transparent);border:1px solid color-mix(in srgb,var(--hero-glow) 55%,transparent);
 box-shadow:0 0 10px color-mix(in srgb,var(--hero-glow) 25%,transparent);white-space:nowrap}
.fun-badge i{font-style:normal}
button.fun-badge-button{cursor:pointer;margin:0;min-height:0}
button.fun-badge-button:hover{border-color:var(--hero-glow)}
.fun-recap{position:relative;margin:16px 0;padding:18px 22px;border:1px solid color-mix(in srgb,var(--hero-glow) 45%,var(--border));border-radius:8px;background:var(--panel);
 box-shadow:0 0 24px color-mix(in srgb,var(--hero-glow) 14%,transparent);animation:fun-recap-in .45s cubic-bezier(.2,.9,.3,1.1)}
@keyframes fun-recap-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.fun-recap-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fun-recap-head h2{margin:0;font-size:18px}
.fun-recap-close{font-size:12px;padding:5px 12px}
.fun-recap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fun-recap-stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:6px}
.fun-recap-stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.fun-recap-stat strong{font-size:20px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fun-recap-stat small{font-size:11px;color:var(--muted)}
.fun-recap-stat.up strong{color:var(--return-gain,#39ff88)}
.fun-recap-stat.down strong{color:var(--return-loss,#ff4058)}

/* Lofi radio button (folio-lofi.js). */
.lofi-toggle{display:inline-flex;align-items:center;gap:7px}
.lofi-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.lofi-bars i{display:block;width:2px;height:4px;border-radius:1px;background:currentColor;opacity:.7}
.lofi-bars i:nth-child(1){height:5px}.lofi-bars i:nth-child(2){height:9px}.lofi-bars i:nth-child(3){height:12px}.lofi-bars i:nth-child(4){height:7px}
.lofi-toggle.is-playing{border-color:var(--hero-glow)!important;box-shadow:0 0 12px color-mix(in srgb,var(--hero-glow) 35%,transparent)}
.lofi-toggle.is-playing .lofi-bars i{opacity:1;background:var(--hero-glow);animation:lofi-eq 1.1s ease-in-out infinite}
.lofi-toggle.is-playing .lofi-bars i:nth-child(2){animation-delay:-.3s}
.lofi-toggle.is-playing .lofi-bars i:nth-child(3){animation-delay:-.6s}
.lofi-toggle.is-playing .lofi-bars i:nth-child(4){animation-delay:-.9s}
@keyframes lofi-eq{0%,100%{height:3px}50%{height:12px}}
body:not(.signed-in) #lofiToggle{display:none}
@media (prefers-reduced-motion:reduce){.lofi-toggle.is-playing .lofi-bars i{animation:none;height:9px}.fun-recap{animation:none}}

/* Holiday budget card on the Budget tab (holiday-budget-ui.js). */
.holiday-budget{position:relative;margin:0 0 16px;padding:18px 22px;border:1px solid color-mix(in srgb,#2bd96b 40%,var(--border));border-radius:8px;background:var(--panel);
 box-shadow:0 0 22px rgba(255,59,79,.10),0 0 22px rgba(43,217,107,.08);display:flex;flex-direction:column;gap:10px}
.hb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hb-head h2{margin:0;font-size:18px}
.hb-countdown{font-size:12px;font-weight:600;color:#ff8a93;border:1px solid rgba(255,59,79,.5);border-radius:999px;padding:3px 10px}
.hb-total strong{font-size:28px;font-variant-numeric:tabular-nums}
.hb-total span{color:var(--muted);font-size:13px}
.hb-bar{position:relative;height:10px;border-radius:999px;background:color-mix(in srgb,var(--border) 70%,transparent);overflow:hidden}
.hb-bar.hb-main{height:16px}
.hb-fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:repeating-linear-gradient(135deg,#ff3b4f 0 10px,#fff 10px 16px,#2bd96b 16px 26px,#fff 26px 32px);box-shadow:0 0 12px rgba(255,59,79,.35);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.hb-bar.hb-over .hb-fill{background:repeating-linear-gradient(135deg,#ff3b4f 0 10px,#9c1424 10px 20px)}
.hb-snow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#fff 0 1.2px,transparent 1.8px) 0 0/14px 10px,radial-gradient(circle,#fff 0 1px,transparent 1.5px) 7px 5px/18px 12px;opacity:.9;animation:hb-snow 2.4s linear infinite}
@keyframes hb-snow{from{background-position:0 -10px,7px -7px}to{background-position:6px 10px,1px 17px}}
.hb-note{margin:0;font-size:12px;color:var(--muted)}
.hb-recap{margin:0;font-size:15px;font-weight:600}
.hb-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px}
.hb-group{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:baseline}
.hb-group .hb-bar{grid-column:1/-1;height:8px}
.hb-label{font-size:13px}.hb-amount{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.hb-edit summary,.hb-gifts summary{cursor:pointer;font-size:13px;font-weight:600;padding:6px 0}
.hb-form{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.hb-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.hb-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.hb-field input{width:100%;min-width:0}
.hb-people{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.hb-person{display:grid;grid-template-columns:minmax(110px,1.2fr) minmax(120px,1.6fr) 100px 100px auto auto;gap:8px;align-items:end}
.hb-person.done>input:first-child{text-decoration:line-through;opacity:.7}
.hb-done{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;min-height:36px}
.hb-remove,.hb-add{font-size:12px;padding:6px 10px}
.hb-add{align-self:flex-start}
.hb-save{align-self:flex-start}
.hb-status{margin:0;font-size:12px;color:var(--muted);min-height:16px}
@media(max-width:760px){.hb-person{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.hb-snow{animation:none}.hb-fill{transition:none}}

/* Badge explanation card (folio-streaks.js). */
.fun-badge[data-tip]{cursor:help}
.fun-badge:focus-visible{outline:2px solid var(--hero-glow);outline-offset:2px}
.fun-tip{position:fixed;z-index:10001;max-width:min(300px,calc(100vw - 16px));display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:8px;
 background:var(--panel,#0b0e16);border:1px solid var(--hero-glow);color:var(--text,#fff);font-size:12px;line-height:1.45;pointer-events:none;
 box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 16px color-mix(in srgb,var(--hero-glow) 30%,transparent)}
.fun-tip[hidden]{display:none}
.fun-tip strong{font-size:13px}
.fun-tip span{color:var(--muted,#a9b6cd)}
.fun-tip.pop{animation:fun-tip-pop .18s ease}
@keyframes fun-tip-pop{from{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fun-tip.pop{animation:none}}
/* Holiday music menu (folio-lofi.js): holiday tune, lofi, or off. */
.lofi-menu{position:fixed;z-index:60;display:flex;flex-direction:column;min-width:190px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--panel);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.lofi-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:5px;font:500 13px/1.2 var(--mix-sans,system-ui);color:var(--text);cursor:pointer}
.lofi-menu button:before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--muted);flex:none}
.lofi-menu button[aria-checked=true]:before{background:var(--hero-glow,var(--gold));border-color:var(--hero-glow,var(--gold));box-shadow:0 0 8px var(--hero-glow,var(--gold))}
.lofi-menu button:hover,.lofi-menu button:focus-visible{background:color-mix(in srgb,var(--text) 8%,transparent)}