/* Velora Release Polish
   Quiet depth, deliberate motion, and better touch behavior.
   This file intentionally sits last in the cascade so it can refine
   the existing design without changing the information architecture.
*/

:root {
    --polish-spring: cubic-bezier(.2, .8, .2, 1);
    --polish-spring-tight: cubic-bezier(.16, 1, .3, 1);
    --polish-fast: 150ms var(--polish-spring);
    --polish-base: 220ms var(--polish-spring);
    --polish-slow: 420ms var(--polish-spring-tight);
}

/* Browser details */
html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
    overscroll-behavior-x: none;
}

body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-x: none;
    transition:
        background-color 320ms var(--polish-spring),
        color 220ms var(--polish-spring);
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Keep the glass effect crisp instead of overly frosted. */
.glass {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    transition:
        background-color var(--polish-base),
        border-color var(--polish-base),
        box-shadow 280ms var(--polish-spring),
        transform 280ms var(--polish-spring);
}

.glass::before,
.glass::after {
    backface-visibility: hidden;
}

/* Cards should feel alive on desktop, but never "float" on touch devices. */
@media (hover: none), (pointer: coarse) {
    .glass:hover {
        border-color: var(--glass-border);
    }

    .panel:hover,
    .hero-card:hover,
    .stat-card:hover,
    .safe-card:hover {
        transform: none !important;
        box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-border-inner);
    }
}

@media (hover: hover) and (pointer: fine) {
    .glass:hover {
        border-color: var(--glass-border-hover);
    }

    .panel:hover,
    .hero-card:hover,
    .stat-card:hover,
    .safe-card:hover {
        transform: translate3d(0, -3px, 0) scale(1.001);
        box-shadow:
            var(--glass-shadow),
            0 18px 38px rgba(0, 0, 0, .07),
            inset 0 1px 0 var(--glass-border-inner);
    }

    .transaction-row,
    .account-row,
    .category-row,
    .budget-row,
    .goal-row,
    .recurring-row,
    .settings-card {
        transition:
            background-color var(--polish-fast),
            border-color var(--polish-fast),
            transform var(--polish-base);
    }

    .transaction-row:hover,
    .account-row:hover,
    .category-row:hover,
    .budget-row:hover,
    .goal-row:hover,
    .recurring-row:hover,
    .settings-card:hover {
        background: color-mix(in srgb, var(--surface-hover) 55%, transparent);
    }
}

/* Navigation: softer state changes and a clearer active surface. */
.nav-item,
.mobile-nav-item {
    transition:
        background-color var(--polish-base),
        color var(--polish-base),
        box-shadow var(--polish-base),
        transform var(--polish-fast);
}

.nav-item.is-active {
    box-shadow:
        inset 0 1px 0 var(--glass-border-inner),
        0 1px 2px rgba(0, 0, 0, .025);
}

.nav-item:active,
.mobile-nav-item:active {
    transform: scale(.975);
}

.nav-item:focus-visible,
.mobile-nav-item:focus-visible,
.icon-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.danger-button:focus-visible,
.text-button:focus-visible,
.mobile-more-item:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Buttons: physical but restrained. */
.primary-button,
.secondary-button,
.danger-button,
.icon-button {
    transition:
        background-color var(--polish-fast),
        border-color var(--polish-fast),
        box-shadow var(--polish-base),
        color var(--polish-fast),
        opacity var(--polish-fast),
        transform var(--polish-fast);
}

.primary-button {
    box-shadow:
        0 8px 24px var(--button-shadow),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.primary-button:hover {
    opacity: 1;
}

.primary-button:active,
.secondary-button:active,
.danger-button:active,
.icon-button:active {
    transform: scale(.965);
}

.text-button {
    transition: color var(--polish-fast), opacity var(--polish-fast);
}

.text-button:hover {
    opacity: .82;
}

/* Quiet controls inside forms. */
.form-field input,
.form-field select,
.amount-input,
.more-options summary {
    transition:
        border-color var(--polish-fast),
        background-color var(--polish-fast),
        box-shadow var(--polish-fast),
        color var(--polish-fast);
}

.form-field input:hover,
.form-field select:hover {
    border-color: var(--glass-border-hover);
}

/* More deliberate chips without adding movement everywhere. */
.soft-badge,
.date-chip,
.info-badge,
.filter-button,
.type-switch span,
.category-options span {
    transition:
        background-color var(--polish-fast),
        border-color var(--polish-fast),
        color var(--polish-fast),
        box-shadow var(--polish-fast),
        transform var(--polish-fast);
}

@media (hover: hover) and (pointer: fine) {
    .type-switch label:hover span,
    .category-options label:hover span,
    .filter-button:hover,
    .info-badge:hover {
        transform: translateY(-1px);
    }
}

/* Bottom navigation gets an understated active "pill" instead of a hard block. */
@media (max-width: 900px) {
    body {
        background-attachment: scroll;
    }

    .mobile-nav {
        padding: 6px;
        gap: 3px;
        box-shadow:
            0 18px 42px rgba(0,0,0,.18),
            0 2px 10px rgba(0,0,0,.10),
            inset 0 1px 0 var(--glass-border-inner);
    }

    .mobile-nav-item {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: transparent;
    }

    .mobile-nav-item::before {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 13px;
        background: var(--nav-active);
        box-shadow: inset 0 1px 0 var(--glass-border-inner);
        opacity: 0;
        transform: scale(.86);
        transition:
            opacity 220ms var(--polish-spring),
            transform 280ms var(--polish-spring-tight);
        z-index: -1;
    }

    .mobile-nav-item.is-active::before {
        opacity: 1;
        transform: scale(1);
    }

    .mobile-nav-item.is-active {
        background: transparent;
        color: var(--text);
    }

    .mobile-nav-item .nav-icon,
    .mobile-nav-item span {
        position: relative;
        z-index: 1;
    }

    /* Reduce expensive backdrop work on smaller screens while keeping the glass feel. */
    .glass {
        backdrop-filter: blur(16px) saturate(125%);
        -webkit-backdrop-filter: blur(16px) saturate(125%);
    }

    .sheet-backdrop {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

@media (max-width: 620px) {
    .mobile-nav {
        left: 10px;
        right: 10px;
        bottom: max(8px, env(safe-area-inset-bottom));
        border-radius: 20px;
    }

    .mobile-nav-item {
        min-height: 48px;
        border-radius: 14px;
    }

    .mobile-more-sheet {
        box-shadow:
            0 22px 54px rgba(0,0,0,.22),
            inset 0 1px 0 var(--glass-border-inner);
    }

    .mobile-more-item {
        transition:
            background-color var(--polish-fast),
            border-color var(--polish-fast),
            color var(--polish-fast),
            box-shadow var(--polish-base),
            transform var(--polish-fast);
    }

    .mobile-more-item:active {
        transform: scale(.975);
    }
}

/* Modal stacking: keep the sheet above its backdrop.
   The legacy category-sheet rule used a lower z-index, which caused the
   account/category form itself to become blurred by the backdrop. */
.sheet-backdrop {
    z-index: 100;
}

.glass.category-sheet,
.glass.transaction-sheet,
.glass.onboarding-sheet,
.glass.confirm-dialog {
    z-index: 101;
}

#account-sheet,
#category-sheet,
#onboarding-sheet {
    z-index: 101;
}

/* Dialog and sheet surfaces: stable geometry, soft entry, safe scrolling. */
.sheet-backdrop {
    background: rgba(8, 12, 16, .46);
    transition: opacity 220ms var(--polish-spring);
}

.transaction-sheet,
.category-sheet,
.confirm-dialog,
.mobile-more-sheet {
    overscroll-behavior: contain;
    box-shadow:
        var(--glass-shadow),
        0 26px 70px rgba(0,0,0,.18),
        inset 0 1px 0 var(--glass-border-inner);
}

.confirm-dialog {
    width: min(410px, calc(100% - 28px));
}

.sheet-actions .primary-button,
.sheet-actions .secondary-button,
.sheet-actions .danger-button {
    min-height: 44px;
}

/* Give the app a calm first impression without a long entrance animation. */
.app-shell {
    animation-duration: 420ms;
}

/* Avoid expensive blur filters during view changes. */
.view > .motion-enter {
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    .glass,
    .primary-button,
    .secondary-button,
    .danger-button,
    .icon-button,
    .nav-item,
    .mobile-nav-item,
    .mobile-more-item,
    .text-button {
        will-change: auto;
    }

    .mobile-nav-item::before {
        transition: none;
        transform: none;
    }
}

/* Very narrow phones: preserve touch target sizes and prevent action rows from pinching. */
@media (max-width: 374px) {
    .topbar-actions {
        gap: 6px;
    }

    .topbar-actions .icon-button {
        width: 38px;
        height: 38px;
    }

    .mobile-nav {
        left: 7px;
        right: 7px;
        padding-inline: 4px;
    }

    .mobile-nav-item {
        min-height: 46px;
    }

    .mobile-nav-item span {
        font-size: .52rem;
    }

    .sheet-actions,
    .confirm-dialog .sheet-actions {
        gap: 8px;
    }
}

/* Release fix: the .glass performance transform must not replace the
   positioning transform used by fixed sheets. Keep every fixed surface
   centered/anchored correctly after the glass layer adds translateZ(0). */
.transaction-sheet,
.category-sheet,
.confirm-dialog,
.onboarding-sheet {
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    max-width: calc(100vw - 20px);
    overflow-x: hidden;
}

.mobile-more-sheet {
    transform: translateX(-50%);
    box-sizing: border-box;
    max-width: calc(100vw - 20px);
}

@media (max-width: 620px) {
    .transaction-sheet,
    .category-sheet,
    .onboarding-sheet {
        width: calc(100vw - 20px);
        max-width: 430px;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        max-height: calc(100dvh - 10px);
    }

    .confirm-dialog {
        width: min(390px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
    }

    .mobile-more-sheet {
        width: min(520px, calc(100vw - 20px));
        left: 50%;
        right: auto;
        bottom: max(18px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
    }

    .transaction-sheet .amount-input,
    .transaction-sheet .form-field,
    .transaction-sheet fieldset,
    .transaction-sheet input,
    .transaction-sheet select,
    .transaction-sheet textarea {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    .transaction-sheet,
    .category-sheet,
    .confirm-dialog,
    .onboarding-sheet {
        transform: translate(-50%, -50%);
    }

    .mobile-more-sheet {
        transform: translateX(-50%);
    }
}

@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
    .transaction-sheet,
    .category-sheet,
    .onboarding-sheet,
    .mobile-more-sheet {
        transform: translateX(-50%);
    }

    .confirm-dialog {
        transform: translate(-50%, -50%);
    }
}

/* --------------------------------------------------------------------------
   Velora Material Refinement
   Dark mode: deep, quiet, high-contrast glass.
   Light mode: clear, bright, Apple-inspired frosted glass.
   -------------------------------------------------------------------------- */

/* Primary actions remain the strongest visual accent in both themes. */
.primary-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .46);
    background:
        linear-gradient(135deg,
            rgba(108, 202, 255, .96),
            rgba(47, 145, 238, .96) 55%,
            rgba(43, 105, 220, .97));
    color: #fff;
    box-shadow:
        0 10px 28px var(--button-shadow),
        0 0 0 1px rgba(92, 190, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .56),
        inset 0 -1px 0 rgba(10, 64, 140, .18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.primary-button::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(112deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.08) 32%,
            transparent 52%,
            rgba(255,255,255,.06));
    pointer-events: none;
    z-index: -1;
}

.primary-button:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow:
        0 13px 34px var(--button-shadow),
        0 0 26px var(--accent-glow),
        inset 0 1px 0 rgba(255,255,255,.64),
        inset 0 -1px 0 rgba(10,64,140,.18);
}

.primary-button:active { transform: scale(.975); }

.secondary-button {
    border-color: var(--chip-border);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent-soft) 78%, transparent),
            var(--control-bg));
    color: var(--text);
    box-shadow:
        0 5px 16px rgba(0, 0, 0, .07),
        inset 0 1px 0 var(--glass-border-inner);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.secondary-button:hover {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent-soft) 100%, transparent),
            var(--control-hover));
    border-color: var(--accent-ring);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .09),
        0 0 16px var(--accent-glow),
        inset 0 1px 0 var(--glass-border-inner);
}

.icon-button {
    border: 1px solid var(--chip-border);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent-soft) 64%, transparent),
            var(--control-bg));
    box-shadow:
        0 5px 18px rgba(0, 0, 0, .08),
        inset 0 1px 0 var(--glass-border-inner);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.icon-button:hover {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent-soft) 100%, transparent),
            var(--control-hover));
    border-color: var(--accent-ring);
    color: var(--accent);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .10),
        0 0 16px var(--accent-glow),
        inset 0 1px 0 var(--glass-border-inner);
}

/* Dark mode: preserve the deep navy-black material and keep blue atmospheric,
   not blue-washed. */
[data-theme="dark"] body {
    background:
        radial-gradient(circle at 8% -5%, rgba(24, 122, 225, .14), transparent 30rem),
        radial-gradient(circle at 94% 8%, rgba(72, 77, 205, .075), transparent 28rem),
        radial-gradient(circle at 52% 110%, rgba(42, 167, 239, .055), transparent 34rem),
        var(--background);
}

[data-theme="dark"] .primary-button {
    background:
        linear-gradient(135deg,
            rgba(72, 166, 238, .88),
            rgba(38, 111, 201, .92) 56%,
            rgba(27, 73, 151, .96));
    border-color: rgba(116, 203, 255, .42);
    color: #f7fbff;
    box-shadow:
        0 10px 28px rgba(11, 63, 132, .28),
        0 0 18px rgba(54, 153, 238, .12),
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -1px 0 rgba(3, 27, 69, .34);
}

[data-theme="dark"] .primary-button::before {
    background:
        linear-gradient(112deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.055) 32%,
            transparent 52%,
            rgba(95,190,255,.055));
}

[data-theme="dark"] .primary-button:hover {
    box-shadow:
        0 13px 34px rgba(11, 63, 132, .34),
        0 0 24px rgba(54, 153, 238, .20),
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -1px 0 rgba(3,27,69,.34);
}

[data-theme="dark"] .glass {
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.030));
    border-color: var(--glass-border);
    box-shadow:
        var(--glass-shadow),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 0 rgba(0,0,0,.16);
}

[data-theme="dark"] .glass::after {
    background:
        linear-gradient(115deg,
            rgba(255,255,255,.075),
            transparent 26%,
            transparent 72%,
            rgba(103,197,255,.018));
    opacity: .82;
}

[data-theme="dark"] .mobile-nav {
    background:
        linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.035));
    border-color: rgba(132,204,255,.14);
}

/* Light mode: bright, clear, frosted. The surface is intentionally less
   opaque than the old version so the background atmosphere can show through. */
[data-theme="light"] {
    --background: #edf5fd;
    --text: #102238;
    --text-secondary: #52677d;
    --muted: #7b8da0;
    --focus: #168ff2;

    --glass-background: rgba(255,255,255,.42);
    --glass-background-strong: rgba(255,255,255,.58);
    --glass-border: rgba(255,255,255,.72);
    --glass-border-hover: rgba(76,166,236,.38);
    --glass-border-inner: rgba(255,255,255,.88);
    --glass-shadow:
        0 22px 60px rgba(47,92,132,.10),
        0 4px 16px rgba(47,92,132,.045);

    --surface-hover: rgba(32,143,238,.065);
    --nav-active: rgba(32,143,238,.095);
    --control-bg: rgba(255,255,255,.34);
    --control-hover: rgba(32,143,238,.085);
    --inner-surface: rgba(255,255,255,.30);
    --inner-border: rgba(70,145,205,.105);
    --divider: rgba(70,128,175,.105);
    --chip-bg: rgba(32,143,238,.050);
    --chip-border: rgba(32,143,238,.13);

    --accent: #168ff2;
    --accent-soft: rgba(22,143,242,.105);
    --accent-ring: rgba(22,143,242,.28);
    --accent-glow: rgba(22,143,242,.115);
    --positive: #218c60;
    --button-shadow: rgba(26,105,172,.18);

    --ambient-1: rgba(55,169,245,.13);
    --ambient-2: rgba(108,125,235,.075);
    --ambient-3: rgba(71,196,247,.075);
}

[data-theme="light"] body {
    background:
        radial-gradient(circle at 8% -10%, rgba(76,185,250,.18), transparent 31rem),
        radial-gradient(circle at 94% 8%, rgba(121,137,244,.10), transparent 28rem),
        radial-gradient(circle at 52% 110%, rgba(80,197,247,.09), transparent 34rem),
        var(--background);
    color: var(--text);
}

[data-theme="light"] body::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.62), transparent 34%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.42), transparent 42%);
}

/* Clear glass: translucent white, high-quality highlight, restrained tint. */
[data-theme="light"] .glass {
    background:
        linear-gradient(135deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.34) 52%,
            rgba(238,248,255,.28));
    border-color: var(--glass-border);
    box-shadow:
        0 22px 60px rgba(47,92,132,.095),
        0 3px 14px rgba(47,92,132,.045),
        inset 0 1px 0 rgba(255,255,255,.94),
        inset 0 -1px 0 rgba(74,139,190,.035);
    backdrop-filter: blur(28px) saturate(155%) brightness(1.03);
    -webkit-backdrop-filter: blur(28px) saturate(155%) brightness(1.03);
}

[data-theme="light"] .glass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(125deg,
            rgba(255,255,255,.58),
            transparent 27%,
            transparent 68%,
            rgba(67,164,231,.035));
    opacity: .82;
}

[data-theme="light"] .glass::after {
    background:
        linear-gradient(115deg,
            rgba(255,255,255,.30),
            transparent 35%,
            transparent 74%,
            rgba(42,145,218,.035));
    opacity: .72;
}

[data-theme="light"] .primary-button {
    background:
        linear-gradient(135deg,
            rgba(111,205,255,.96),
            rgba(40,145,240,.96) 56%,
            rgba(47,108,220,.97));
    border-color: rgba(255,255,255,.84);
    box-shadow:
        0 12px 30px rgba(30,116,203,.20),
        0 0 24px rgba(54,164,243,.11),
        inset 0 1px 0 rgba(255,255,255,.78),
        inset 0 -1px 0 rgba(16,77,148,.13);
}

[data-theme="light"] .secondary-button,
[data-theme="light"] .icon-button {
    color: #17344f;
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.54),
            rgba(224,242,255,.28));
    border-color: rgba(60,153,224,.20);
    box-shadow:
        0 7px 20px rgba(31,111,168,.055),
        inset 0 1px 0 rgba(255,255,255,.88);
}

[data-theme="light"] .secondary-button:hover,
[data-theme="light"] .icon-button:hover {
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.70),
            rgba(215,239,255,.46));
    border-color: rgba(22,143,242,.32);
    box-shadow:
        0 9px 24px rgba(31,111,168,.075),
        0 0 16px rgba(22,143,242,.08),
        inset 0 1px 0 rgba(255,255,255,.94);
}

[data-theme="light"] .mobile-nav {
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.62),
            rgba(233,246,255,.40));
    border-color: rgba(255,255,255,.82);
    box-shadow:
        0 20px 46px rgba(32,91,137,.11),
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -1px 0 rgba(60,145,205,.04);
    backdrop-filter: blur(28px) saturate(155%);
    -webkit-backdrop-filter: blur(28px) saturate(155%);
}

[data-theme="light"] .mobile-nav-item.is-active::before {
    background:
        linear-gradient(145deg,
            rgba(255,255,255,.62),
            rgba(183,225,253,.40));
    border-color: rgba(22,143,242,.19);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 4px 16px rgba(22,143,242,.075);
}

[data-theme="light"] .sheet-backdrop {
    background: rgba(207,226,243,.42);
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
}
.hero-card .card-label {
    position: relative;
    top: -8px;
}

/* Reduced motion: retain the visual material, remove movement. */
@media (prefers-reduced-motion: reduce) {
    .primary-button:hover,
    .primary-button:active,
    .secondary-button:active,
    .icon-button:active {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Dashboard spacing refinement
   Keeps the existing grid/breakpoints intact while removing excess vertical
   breathing room from summary cards and empty-state panels.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .hero-grid > .hero-card {
        min-height: 226px;
        padding: 24px;
        justify-content: space-between;
    }

    .hero-grid > .hero-card .balance-value {
        margin: 10px 0 8px;
    }

    .hero-grid > .stat-card {
        min-height: 226px;
        padding: 24px;
    }

    .hero-grid > .stat-card .stat-stack {
        height: auto;
        margin-top: 20px;
        justify-content: flex-start;
    }

    .hero-grid > .stat-card .stat-divider {
        margin: 14px 0;
    }

    .dashboard-section.safe-card {
        min-height: 184px;
        padding: 24px;
    }

    .dashboard-grid.dashboard-section > .panel {
        min-height: 182px;
        padding: 20px;
    }

    .dashboard-grid.dashboard-section > .panel .panel-header {
        margin-bottom: 14px;
    }

    .dashboard-grid.dashboard-section > .panel .empty-state.compact {
        min-height: 94px;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
    .hero-grid > .hero-card {
        min-height: 218px;
        padding: 22px;
        justify-content: space-between;
    }

    .hero-grid > .stat-card {
        min-height: 218px;
        padding: 22px;
    }

    .hero-grid > .stat-card .stat-stack {
        height: auto;
        margin-top: 18px;
        justify-content: flex-start;
    }

    .hero-grid > .stat-card .stat-divider {
        margin: 13px 0;
    }

    .dashboard-section.safe-card {
        min-height: 194px;
        padding: 24px;
    }

    .dashboard-grid.dashboard-section > .panel {
        min-height: 178px;
        padding: 20px;
    }

    .dashboard-grid.dashboard-section > .panel .panel-header {
        margin-bottom: 14px;
    }
}

@media (max-width: 620px) {
    .hero-grid > .hero-card {
        min-height: 0;
        height: auto;
        padding: 18px;
        justify-content: flex-start;
    }

    .hero-grid > .hero-card .balance-value {
        margin: 16px 0 10px;
    }

    .hero-grid > .stat-card {
        min-height: 0;
        padding: 18px;
    }

    .hero-grid > .stat-card .stat-stack {
        height: auto;
        margin-top: 18px;
        justify-content: flex-start;
    }

    .hero-grid > .stat-card .stat-divider {
        margin: 11px 0;
    }

    .dashboard-section.safe-card {
        min-height: 0;
        padding: 18px;
    }

    .dashboard-grid.dashboard-section > .panel {
        min-height: 0;
        padding: 18px;
    }

    .dashboard-grid.dashboard-section > .panel .panel-header {
        margin-bottom: 14px;
    }

    .dashboard-grid.dashboard-section > .panel .empty-state.compact {
        min-height: 96px;
    }
}

/* --------------------------------------------------------------------------
   Final dashboard density pass
   Explicitly sizes dashboard summary cards by content instead of allowing
   grid stretching to create large empty vertical areas.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .hero-grid {
        align-items: start;
    }

    .hero-grid > .hero-card,
    .hero-grid > .stat-card {
        min-height: 0;
        height: 250px;
        box-sizing: border-box;
    }

    .hero-grid > .hero-card {
        padding: 24px;
        justify-content: flex-start;
    }

    .hero-grid > .hero-card .balance-value {
        margin-top: auto;
        margin-bottom: 8px;
        line-height: .82;
        overflow: visible;
        flex: 0 0 auto;
    }

    .hero-grid > .stat-card {
        padding: 24px;
    }

    .hero-grid > .stat-card .stat-stack {
        height: auto;
        margin-top: 18px;
        justify-content: flex-start;
    }

    .hero-grid > .stat-card .stat-divider {
        margin: 14px 0;
    }

    .dashboard-section.safe-card {
        min-height: 0;
        height: 190px;
        box-sizing: border-box;
        padding: 24px;
    }

    .dashboard-grid.dashboard-section {
        align-items: start;
    }

    .dashboard-grid.dashboard-section > .panel {
        min-height: 0;
        height: 180px;
        box-sizing: border-box;
        padding: 20px;
    }

    .dashboard-grid.dashboard-section > .panel .panel-header {
        margin-bottom: 12px;
    }

    .dashboard-grid.dashboard-section > .panel .empty-state.compact {
        min-height: 0;
        height: 92px;
        box-sizing: border-box;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
    .hero-grid {
        align-items: start;
    }

    .hero-grid > .hero-card,
    .hero-grid > .stat-card {
        min-height: 0;
        height: 225px;
        box-sizing: border-box;
    }

    .hero-grid > .hero-card {
        padding: 22px;
        justify-content: space-between;
    }

    .hero-grid > .hero-card .balance-value {
        margin-top: auto;
        margin-bottom: 8px;
        line-height: .82;
        overflow: visible;
        flex: 0 0 auto;
    }

    .hero-grid > .stat-card {
        padding: 22px;
    }

    .hero-grid > .stat-card .stat-stack {
        height: auto;
        margin-top: 16px;
        justify-content: flex-start;
    }

    .hero-grid > .stat-card .stat-divider {
        margin: 12px 0;
    }

    .dashboard-section.safe-card {
        min-height: 0;
        height: 190px;
    }

    .dashboard-grid.dashboard-section > .panel {
        min-height: 0;
        height: 175px;
    }
}

@media (max-width: 620px) {
    .hero-grid {
        align-items: start;
    }

    .hero-grid > .hero-card,
    .hero-grid > .stat-card,
    .dashboard-section.safe-card,
    .dashboard-grid.dashboard-section > .panel {
        height: auto;
        min-height: 0;
        box-sizing: border-box;
    }

    .hero-grid > .hero-card {
        padding: 18px;
        justify-content: flex-start;
    }

    .hero-grid > .hero-card .balance-value {
        margin: 6px 0 8px;
    }

    .hero-grid > .stat-card {
        padding: 18px;
    }

    .hero-grid > .stat-card .stat-stack {
        margin-top: 14px;
    }

    .hero-grid > .stat-card .stat-divider {
        margin: 10px 0;
    }

    .dashboard-section.safe-card,
    .dashboard-grid.dashboard-section > .panel {
        padding: 18px;
    }

    .dashboard-grid.dashboard-section > .panel .empty-state.compact {
        min-height: 0;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   Responsive currency fitting
   Large balances stay on one line and scale to the space actually available.
   -------------------------------------------------------------------------- */
.balance-value,
.safe-value {
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    transition: font-size 180ms cubic-bezier(.22, 1, .36, 1);
    font-variant-numeric: tabular-nums;
}

.balance-value {
    line-height: .82;
}

.safe-value {
    line-height: .9;
}

.balance-value.is-fitting,
.safe-value.is-fitting {
    transition: none;
}

@media (max-width: 620px) {
    .balance-sparkline {
        display: block;
        height: 40px;
        margin-top: 4px;
    }

    .balance-value {
        line-height: .84;
    }

    .safe-value {
        line-height: .9;
    }
}

/* --------------------------------------------------------------------------
   Sparkline responsive scaling
   -------------------------------------------------------------------------- */
.balance-sparkline {
    width: 100%;
    height: 52px;
    margin-top: 6px;
    opacity: 0;
    animation: spark-fade-in 700ms ease-out forwards;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .balance-sparkline { animation: none; opacity: 1; }
}

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

.balance-sparkline svg {
    width: 100%;
    height: 100%;
    display: block;
}



/* --------------------------------------------------------------------------
   Settings layout repair
   Keep settings cards content-driven and prevent default SVG sizing from
   expanding the card grid unexpectedly.
   -------------------------------------------------------------------------- */
.settings-panel {
    min-width: 0;
    overflow: hidden;
}

.settings-panel > .panel-header {
    margin-bottom: 0;
}

.settings-grid {
    min-width: 0;
    align-items: start;
    align-content: start;
    grid-auto-rows: auto;
}

.settings-card {
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: start;
    align-items: start;
    box-sizing: border-box;
}

.settings-card-icon {
    padding-top: 10px;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-sizing: border-box;
}

.settings-card-icon svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    max-width: 1.25rem;
    max-height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-card-copy {
    min-width: 0;
}

.settings-card-copy p {
    max-width: 62ch;
}

.settings-card > button {
    align-self: start;
    width: max-content;
    max-width: 100%;
}

.settings-backup-details,
.settings-footnote,
#backup-status {
    max-width: 100%;
}

@media (max-width: 760px) {
    .settings-panel {
        overflow: visible;
    }

    .settings-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .settings-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .settings-card > button {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
    }

    .settings-card-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .settings-card-icon svg {
        width: 20px;
        height: 20px;
        max-width: 20px;
        max-height: 20px;
    }

    .settings-card-copy p {
        margin-top: 2px;
    }
}

@media (max-width: 420px) {
    .settings-panel {
        padding: 16px;
    }

    .settings-card {
        padding: 14px;
        border-radius: 18px;
    }
}


/* Safe to Spend polish: stable info control and decorative visual. */
.safe-card .info-badge {
    background: var(--control-bg);
    border: 1px solid var(--chip-border);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 var(--glass-border-inner);
}

.safe-card .info-badge:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.safe-card .info-badge span {
    pointer-events: none;
}

.safe-card .safe-visual {
    position: relative;
    z-index: 1;
}

/* Settings action spacing polish: keep copy and actions visually distinct. */
.settings-card-copy p {
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.55;
}

.settings-card > button {
    margin-top: 12px;
}

@media (max-width: 760px) {
    .settings-card-copy p {
        margin-top: 9px;
    }

    .settings-card > button {
        margin-top: 14px;
    }
}

@media (max-width: 420px) {
    .settings-card > button {
        margin-top: 12px;
    }
}