/* The entire hero is swipeable, without visible navigation controls. */
#dashboard .neon-hero{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;height:190px;min-height:190px}
#dashboard .neon-hero:focus-visible{outline:2px solid #8cd5ff;outline-offset:4px}
#dashboard .neon-hero-copy{flex:1;min-width:0;justify-items:start;text-align:right}
#dashboard .neon-hero-graph{flex-shrink:0}
#dashboard .neon-hero[data-view="savings"] .neon-inline-icon{color:#f5c84c;filter:drop-shadow(0 0 7px #c99a2633)}
#dashboard .neon-hero[data-view="income"] .neon-inline-icon,
#dashboard .neon-hero[data-view="balance"] .neon-inline-icon{color:#6ee7bc}
#dashboard .neon-hero[data-view="expenses"] .neon-inline-icon{color:#ff9c98}
#dashboard .neon-hero-budget{width:min(100%,420px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
#dashboard .neon-hero-budget[hidden]{display:none}
#dashboard .neon-hero-budget-rail{height:8px;overflow:hidden;border-radius:20px;background:#ffffff20}
#dashboard .neon-hero-budget-rail i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#579cff,#7acfff);transition:width .25s ease}
#dashboard .neon-hero-budget-rail.is-over-budget i{background:#ff899e}
#dashboard .neon-hero-budget-usage{color:#9ed3ff;font-size:12px}
#dashboard .neon-hero[data-view="budget"] .neon-hero-copy{gap:4px;align-content:center}
#dashboard .neon-hero[data-view="budget"] .neon-hero-amount{font-size:clamp(35px,5vw,56px)}
#dashboard .neon-hero[data-view="budget"] .neon-hero-note{font-size:11px;line-height:1.2;overflow-wrap:anywhere}
#dashboard .neon-hero-budget-usage{white-space:nowrap}
@media(max-width:640px){
 #dashboard .neon-hero{height:148px;min-height:148px}
 #dashboard .neon-hero[data-view="budget"] .neon-hero-amount{font-size:clamp(28px,7.5vw,36px)}
 #dashboard .neon-hero[data-view="budget"] .neon-hero-note{font-size:10px}
 #dashboard .neon-hero-budget-rail{height:6px}
 #dashboard .neon-hero-budget-usage{font-size:10px;line-height:1.2}
}
@media(prefers-reduced-motion:reduce){#dashboard .neon-hero-budget-rail i{transition:none}}

/* The two summary slots keep their position while their content changes. */
#dashboard .neon-stat-switchable{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;cursor:grab;min-width:0}
#dashboard .neon-stat-switchable:focus-visible{outline:2px solid #8cd5ff;outline-offset:4px}
#dashboard .neon-stat-switchable [hidden]{display:none!important}
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-switchable .neon-stat-pict{color:#20dbea!important}
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-switchable .neon-stat-value{color:#f0f8ff}
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-switchable .neon-stat-value.neon-value-positive{color:#62edbd}
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-switchable .neon-stat-value.neon-value-negative{color:#ff8198!important}
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-switchable[data-view="savings"] .neon-stat-value{color:#62edbd!important}
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-switchable[data-view="savings"] .neon-stat-pict{color:#ead34a!important}
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-hero[data-view="credit"] .neon-inline-icon{color:#65bdd4}


/* Keep credit summaries consistent with the credit table amount. */
#dashboard.neon-home-dashboard .neon-hero[data-view="credit"] .neon-hero-amount,
#dashboard.neon-home-dashboard .neon-stat-switchable[data-view="credit"] .neon-stat-value,
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-hero[data-view="credit"] .neon-hero-amount,
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-switchable[data-view="credit"] .neon-stat-value{color:#4dd9ff!important}
#dashboard.neon-home-dashboard .neon-stat-expenses .neon-stat-pict,
#dashboard.neon-home-dashboard .neon-hero[data-view="expenses"] .neon-inline-icon{color:#ff8198!important}

/* Match the income trend arrow glow in red for expenses. */
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-stat-expenses .neon-stat-pict,
html.kama-ocean-ui #dashboard.neon-home-dashboard .neon-hero[data-view="expenses"] .neon-inline-icon{
 filter:drop-shadow(0 0 8px #ff8198)!important;
}