/*
    The admin Dashboard: the loading skeletons every section shows until its data lands (dsh-), the first row (hero and
    Settle side by side), the Bills Before Payday glass treatment, and the Insights below the first three rows (dbx-).
    Reads the Recurring area's tokens (recurring-area.css, --rc-*) and the transaction popups' (--tx-*), so light and
    dark follow the rest of the admin. Every animation stops under prefers-reduced-motion.
*/

:root {
    --dsh-bone: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .09);
    --dsh-wave: rgba(255, 255, 255, .8);
    --dsh-line: hsl(calc(247.38deg + var(--ci-accent-shift, 0deg)) 87.14% 72.55%);
    --dbx-income: #10B981;
    --dbx-flow-income: #16A34A;
    --dbx-flow-income-soft: #DCFCE7;
    --dbx-flow-transfer: #2563EB;
    --dbx-flow-transfer-soft: #DBEAFE;
    --dbx-flow-credit: #0D9488;
    --dbx-flow-credit-soft: #CCFBF1;
    --dbx-flow-loan: #B45309;
    --dbx-flow-loan-soft: #F6DDB2;
}

[data-bs-theme="dark"] {
    --dsh-bone: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24% / .13);
    --dsh-wave: hsl(calc(248.7deg + var(--ci-accent-shift, 0deg)) 100% 86.47% / .15);
    --dsh-line: hsl(calc(247.88deg + var(--ci-accent-shift, 0deg)) 100% 80.59%);
    --dbx-income: #34D399;
    --dbx-flow-income: #22C55E;
    --dbx-flow-income-soft: rgba(34, 197, 94, .15);
    --dbx-flow-transfer: #60A5FA;
    --dbx-flow-transfer-soft: rgba(96, 165, 250, .16);
    --dbx-flow-credit: #2DD4BF;
    --dbx-flow-credit-soft: rgba(45, 212, 191, .15);
    --dbx-flow-loan: #F2B557;
    --dbx-flow-loan-soft: rgba(242, 181, 87, .16);
}

/* ------------------------------------------------------------------ Shimmer bones */

.dsh-bone {
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    border-radius: 7px;
    background-color: var(--dsh-bone);
    background-image: linear-gradient(100deg, transparent 0%, transparent 38%, var(--dsh-wave) 50%, transparent 62%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 900px 100%;
    animation: dsh-sweep 1.7s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes dsh-sweep {
    from { background-position: -900px 0; }
    to { background-position: 900px 0; }
}

.dsh-wave { display: block; pointer-events: none; overflow: visible; }
.dsh-wave-line { fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dsh-wave-stop { stop-color: var(--dsh-line); stop-opacity: .3; }
.dsh-wave-stop-hi { stop-color: var(--dsh-line); stop-opacity: 1; }
.dsh-wave-fill-top { stop-color: var(--dsh-line); stop-opacity: .18; }
.dsh-wave-fill-bottom { stop-color: var(--dsh-line); stop-opacity: 0; }
.dsh-wave-area { animation: dsh-breathe 2.4s ease-in-out infinite; }

@keyframes dsh-breathe {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}

/* Section tints: each skeleton shimmers in its own card's color. */
.dsh-hero { --dsh-bone: rgba(37, 99, 235, .11); --dsh-wave: rgba(255, 255, 255, .88); --dsh-line: #4DA3F5; }
.dsh-tone-settle { --dsh-bone: rgba(37, 99, 235, .09); }
.dsh-tone-liab { --dsh-bone: rgba(225, 29, 72, .09); --dsh-line: #FB7185; }
.dsh-tone-inv { --dsh-bone: rgba(22, 163, 74, .1); --dsh-line: #22C55E; }
.dsh-tone-bills { --dsh-bone: rgba(180, 83, 9, .1); --dsh-wave: rgba(255, 255, 255, .85); }

[data-bs-theme="dark"] .dsh-hero { --dsh-bone: rgba(96, 165, 250, .14); --dsh-wave: rgba(186, 214, 255, .14); }
[data-bs-theme="dark"] .dsh-tone-settle { --dsh-bone: rgba(96, 165, 250, .12); }
[data-bs-theme="dark"] .dsh-tone-liab { --dsh-bone: rgba(251, 113, 133, .13); --dsh-wave: rgba(255, 200, 210, .12); }
[data-bs-theme="dark"] .dsh-tone-inv { --dsh-bone: rgba(52, 211, 153, .12); --dsh-wave: rgba(190, 255, 225, .1); --dsh-line: #34D399; }
[data-bs-theme="dark"] .dsh-tone-bills { --dsh-bone: rgba(251, 191, 36, .12); --dsh-wave: rgba(255, 230, 180, .1); }

/* Shared bone shapes */
.dsh-row { display: flex; align-items: center; gap: .55rem; width: 100%; }
.dsh-between { justify-content: space-between; }
.dsh-lines { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.dsh-end { align-items: flex-end; }
.dsh-badge { width: 32px; height: 32px; border-radius: 10px; }
.dsh-badge-sm { width: 24px; height: 24px; border-radius: 8px; }
.dsh-pill { height: 26px; border-radius: 14px; }
.dsh-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dsh-chip { height: 20px; border-radius: 999px; }
.dsh-value { width: 9.5rem; height: 26px; border-radius: 9px; margin: .1rem 0 .15rem; }
.dsh-avatar { width: 34px; height: 34px; border-radius: 50%; }
.dsh-logo { width: 34px; height: 34px; border-radius: 50%; }
.dsh-date { width: 40px; height: 44px; border-radius: 12px; }
.dsh-amount { width: 3.8rem; height: 12px; }
.dsh-glyph { width: 28px; height: 28px; border-radius: 9px; }
.dsh-progress { width: 100%; height: 8px; border-radius: 999px; }
.dsh-ring { width: 72px; height: 72px; border-radius: 50%; }

/* ------------------------------------------------------------------ Hero skeleton (mirrors DashboardOverview) */

.dsh-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    border-radius: 20px;
    border: 1px solid #B5CFF6;
    background: linear-gradient(158deg, #C9DEFF 0%, #E6F0FF 45%, #FFFFFF 100%);
    overflow: hidden;
}

[data-bs-theme="dark"] .dsh-hero {
    border-color: #24406A;
    background: linear-gradient(158deg, #173A6B 0%, #16243F 45%, #10131C 100%);
}

.dsh-hero-main {
    position: relative;
    min-height: 318px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    padding: .8rem 1rem;
}

.dsh-hero-main > .dsh-bone,
.dsh-hero-main > .dsh-row { position: relative; z-index: 1; }

.dsh-hero-value { width: min(13rem, 70%); height: 36px; border-radius: 10px; }

.dsh-hero-dots { display: flex; gap: 15px; margin-left: auto; }
.dsh-hero-dots .dsh-bone { width: 32px; height: 6px; border-radius: 4px; }

.dsh-hero-wave { position: absolute; left: 0; right: 0; bottom: 44px; width: 100%; height: 52%; z-index: 0; }

.dsh-hero-range {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border-radius: 12px;
    background: rgba(227, 238, 255, .5);
}

[data-bs-theme="dark"] .dsh-hero-range { background: rgba(28, 51, 88, .69); }

.dsh-hero-range .dsh-bone { height: 18px; border-radius: 9px; }

.dsh-hero-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    align-content: center;
    padding: 1rem;
    background: rgba(255, 255, 255, .92);
    border-left: 1px solid #B5CFF6;
}

[data-bs-theme="dark"] .dsh-hero-tiles { background: transparent; border-left-color: #24406A; }

.dsh-tile { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ------------------------------------------------------------------ Card skeletons */

.dsh-card { position: relative; overflow: hidden; }
.fin-rollup-card.dsh-card { gap: .5rem; min-height: 300px; }
.fin-rollup-card.dsh-card > :not(.dsh-wave) { position: relative; z-index: 1; }

.fin-rollup-card.dsh-card > .dsh-preview-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: 0; }

.dsh-settle-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .25rem; }

.dsh-settle-side {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .65rem;
    border-radius: 14px;
    background: rgba(37, 99, 235, .07);
}

.dsh-settle-partner { background: rgba(217, 119, 6, .08); }

[data-bs-theme="dark"] .dsh-settle-side { background: rgba(96, 165, 250, .1); }
[data-bs-theme="dark"] .dsh-settle-partner { background: rgba(251, 191, 36, .1); }

.dsh-settle-bar { width: 100%; height: 8px; border-radius: 999px; margin: .2rem 0; }

.dsh-settle-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding-top: .55rem;
    border-top: 1px solid color-mix(in srgb, var(--chipin-brand-primary, hsl(calc(247.74deg + var(--ci-accent-shift, 0deg)) 60.78% 50%)) 10%, transparent);
}

.dsh-bills-top { display: flex; justify-content: space-between; gap: .75rem; }

.dsh-bill-tiles { display: flex; gap: .6rem; margin-top: .4rem; overflow: hidden; }

.dsh-bill-tile {
    flex: 0 0 146px;
    height: 100px;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .6rem .75rem .55rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .64);
    border: 1px solid #EEDDC2;
}

[data-bs-theme="dark"] .dsh-bill-tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

.dsh-bills-banner {
    margin: auto -1.1rem -1rem;
    width: auto;
    max-width: none;
    height: 36px;
    border-radius: 0 0 15px 15px;
    background-color: rgba(40, 116, 200, .14);
}

[data-bs-theme="dark"] .dsh-bills-banner { background-color: rgba(77, 163, 245, .16); }

.dsh-body { display: flex; flex-direction: column; gap: .65rem; }

.dsh-metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.dsh-metric-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dsh-metric {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .7rem .75rem;
    border-radius: 14px;
    background: var(--rc-row);
}

.dsh-metric-edge { border-left: 4px solid var(--dsh-bone); }

.dsh-seg { align-self: flex-end; width: min(330px, 100%); height: 34px; border-radius: 12px; margin: .15rem 0 .3rem; }

.dsh-rank-row {
    display: grid;
    grid-template-columns: 24px 28px minmax(0, 1fr) auto;
    grid-template-rows: auto 7px;
    column-gap: 10px;
    row-gap: 7px;
    align-items: center;
}

.dsh-rank-badge { grid-row: 1 / span 2; align-self: start; width: 24px; height: 24px; border-radius: 8px; }
.dsh-rank-bar { grid-column: 2 / span 3; height: 7px; border-radius: 4px; }
.dsh-rank-row-plain { grid-template-columns: 28px minmax(0, 1fr) auto; }
.dsh-rank-row-plain .dsh-glyph { grid-row: 1 / span 2; align-self: start; }
.dsh-rank-row-plain .dsh-rank-bar { grid-column: 2 / span 2; }

.dsh-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--rc-row); }

.dsh-card-wave { width: 100%; height: 96px; margin-top: .25rem; }

.dsh-week { display: flex; flex-direction: column; gap: .7rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--rc-line); }
.dsh-week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; justify-items: center; gap: 8px; height: 132px; }
.dsh-week-bar { width: min(34px, 100%); border-radius: 10px; }

.dsh-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .75rem; }
.dsh-account { display: flex; flex-direction: column; gap: .6rem; padding: .85rem .9rem; border-radius: 16px; background: var(--rc-row); }

/* ------------------------------------------------------------------ First row: the hero beside Settle */

/* The row measures itself (the admin sidebar takes a varying share of the viewport), and Settle moves up beside the
   hero only while the hero keeps room for its tiles beside the chart, so the two cards stay about the same height. */
.fin-top-row { container-type: inline-size; container-name: fin-top-row; }

.fin-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    align-items: stretch;
}

.fin-top-hero { min-width: 0; display: grid; container-type: inline-size; container-name: fin-top-hero; }
.fin-top-settle { min-width: 0; display: flex; }
.fin-top-settle > .fin-rollup-card { flex: 1 1 auto; }

@container fin-top-row (min-width: 940px) {
    .fin-top-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); }
}

/* Settle under the hero at full width: its Payments and Auto Split rows sit side by side. */
@container fin-top-row (min-width: 700px) and (max-width: 939.98px) {
    .fin-top-settle .fin-settle-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

/* The hero follows its column, not the viewport: chart beside the tiles while there's room, stacked below that, and
   two tiles a row on a phone (DashboardOverview and its skeleton alike). */
@container fin-top-hero (min-width: 601px) {
    .fin-top-row .fin-top-hero .dh,
    .fin-top-row .fin-top-hero .dsh-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

    .fin-top-row .fin-top-hero .dh-tiles { border-top: 0; border-left: 1px solid var(--dh-border); }
}

/* A snug hero column (beside Settle on a laptop): tighter tiles, and their captions wrap rather than clip. */
@container fin-top-hero (min-width: 601px) and (max-width: 780px) {
    .fin-top-row .fin-top-hero .dh-tiles { gap: 10px 8px; padding: .85rem .8rem; }
    .fin-top-row .fin-top-hero .dh-tile { gap: 8px; }
    .fin-top-row .fin-top-hero .dh-tile .dh-badge { width: 28px; height: 28px; border-radius: 9px; }
    .fin-top-row .fin-top-hero .dh-tile-caption { white-space: normal; line-height: 1.2; }
}

@container fin-top-hero (max-width: 600px) {
    .fin-top-row .fin-top-hero .dh,
    .fin-top-row .fin-top-hero .dsh-hero { grid-template-columns: minmax(0, 1fr); }

    .fin-top-row .fin-top-hero .dh-tiles,
    .fin-top-row .fin-top-hero .dsh-hero-tiles {
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
        border-left: 0;
        border-top: 1px solid var(--dh-border, #B5CFF6);
    }

    [data-bs-theme="dark"] .fin-top-row .fin-top-hero .dsh-hero-tiles { border-top-color: #24406A; }
}

@container fin-top-hero (max-width: 420px) {
    .fin-top-row .fin-top-hero .dh-tiles,
    .fin-top-row .fin-top-hero .dsh-hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A card fades in when it replaces its skeleton. */
.fin-top-settle > .fin-rollup-card:not(.dsh-card),
.fin-rollup-grid > .fin-rollup-card:not(.dsh-card),
.fin-top-hero > .dh { animation: dbx-fade .45s ease both; }

/* ------------------------------------------------------------------ Bills Before Payday: glass that blends with the warm card */

.fin-rollup-card.fin-preview--bills {
    --fp-pill-bg: rgba(255, 255, 255, .7);
    --fp-pill-border: #EEDDC2;
    --fp-soft-bg: rgba(255, 255, 255, .7);
    --fp-tile-bg: rgba(255, 255, 255, .64);
    --fp-tile-border: #EEDDC2;
    --fp-due-bg: rgba(180, 83, 9, .09);
    --fp-due-text: #8A5A1F;
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bills {
    --fp-pill-bg: rgba(255, 255, 255, .08);
    --fp-pill-border: rgba(255, 255, 255, .14);
    --fp-soft-bg: rgba(255, 255, 255, .08);
    --fp-tile-bg: rgba(255, 255, 255, .06);
    --fp-tile-border: rgba(255, 255, 255, .12);
    --fp-due-bg: rgba(251, 191, 36, .12);
    --fp-due-text: #E9C58F;
}

.fin-rollup-card.fin-preview--bills .fin-pill--soft {
    border: 1px solid var(--fp-pill-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.fin-rollup-card.fin-preview--bills .fin-bill-tile {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

.fin-rollup-card.fin-preview--bills .fin-bill-tile:hover {
    border-color: #DDB57E;
    box-shadow: 0 10px 22px rgba(180, 83, 9, .13);
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bills .fin-bill-tile { box-shadow: none; }

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bills .fin-bill-tile:hover {
    border-color: rgba(251, 191, 36, .35);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .4);
}

/* The merchant mark is a crisp logo in the corner, not a large faded watermark. */
.fin-rollup-card.fin-preview--bills .fin-bill-mark {
    top: .55rem;
    right: .55rem;
    width: 26px;
    height: 26px;
    opacity: 1;
    background: #FFFFFF;
    border: 1px solid var(--fp-tile-border);
    box-shadow: 0 1px 3px rgba(31, 42, 68, .12);
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bills .fin-bill-mark { background: rgba(255, 255, 255, .92); border-color: transparent; }

.fin-rollup-card.fin-preview--bills .fin-bill-mark b { font-size: .78rem; font-weight: 800; }
.fin-rollup-card.fin-preview--bills .fin-bill-name { padding-right: 30px; }

/* Edge fades by mask, so they blend with the gradient instead of painting a solid color over it. */
.fin-rollup-card.fin-preview--bills .fin-bills-strip::before,
.fin-rollup-card.fin-preview--bills .fin-bills-strip::after { display: none; }

.fin-rollup-card.fin-preview--bills .fin-bills-strip[data-scrollable] .fin-bills-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.1rem, #000 calc(100% - 1.1rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.1rem, #000 calc(100% - 1.1rem), transparent 100%);
}

.fin-rollup-card.fin-preview--bills .fin-bills-strip[data-scrollable][data-at-start] .fin-bills-track {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.1rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.1rem), transparent 100%);
}

.fin-rollup-card.fin-preview--bills .fin-bills-strip[data-scrollable][data-at-end] .fin-bills-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.1rem, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.1rem, #000 100%);
}

.fin-rollup-card.fin-preview--bills .fin-bills-strip[data-scrollable][data-at-start][data-at-end] .fin-bills-track {
    -webkit-mask-image: none;
    mask-image: none;
}

/* The "available after bills" banner: the mobile calm light-blue glass when safe, bold gradients for the alerts. */
.fin-rollup-card.fin-preview--bills .fin-bills-safe {
    opacity: 1;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    background: linear-gradient(135deg, #4B5563 0%, #6B7280 50%, #9CA3AF 100%);
    border-top: 1px solid transparent;
}

.fin-rollup-card.fin-preview--bills .fin-bills-safe.is-safe {
    color: #1D5AA6;
    text-shadow: none;
    background: linear-gradient(135deg, #DCEBFE 0%, #EAF3FF 50%, #F5F9FF 100%);
    border-top-color: #D3E3F8;
}

.fin-rollup-card.fin-preview--bills .fin-bills-safe.is-safe i { color: #2874C8; }

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bills .fin-bills-safe.is-safe {
    color: #D6E8FF;
    background: linear-gradient(135deg, #1D3F6E 0%, #182E50 50%, #141F35 100%);
    border-top-color: rgba(77, 163, 245, .22);
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bills .fin-bills-safe.is-safe i { color: #4DA3F5; }

.fin-rollup-card.fin-preview--bills .fin-bills-safe.is-caution { background: linear-gradient(135deg, #A15C00 0%, #C98300 50%, #E3A21A 100%); }
.fin-rollup-card.fin-preview--bills .fin-bills-safe.is-tight { background: linear-gradient(135deg, #B8420A 0%, #E4640A 50%, #FB923C 100%); }
.fin-rollup-card.fin-preview--bills .fin-bills-safe.is-danger { background: linear-gradient(135deg, #B3261E 0%, #E0352B 50%, #FF6A5E 100%); }

/* ------------------------------------------------------------------ Insights (below the first three rows) */

.dbx { margin-top: 1.75rem; }

.dbx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dbx-head-copy { min-width: 0; max-width: 70ch; }
.dbx-title { margin: .2rem 0 .2rem; font-family: var(--tx-font); font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: var(--rc-text); }
.dbx-caption { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--rc-muted); }

.dbx-grid { display: grid; gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.dbx-grid-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dbx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dbx-card { display: flex; flex-direction: column; min-width: 0; animation: dbx-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.dbx-card > .rc-card-body { display: flex; flex-direction: column; gap: .75rem; flex: 1 1 auto; min-width: 0; }
.dbx .rc-card-head { flex-wrap: wrap; }

.dbx-card-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    margin-top: auto;
    padding-top: .75rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-primary);
    text-decoration: none;
}

.dbx-card-link:hover { text-decoration: underline; }

/* The Recurring link buttons are buttons there; here some are links, which keep the button look (no underline). */
.dbx a.rc-link-btn { text-decoration: none; }
.dbx-card-link .tx-glyph { font-size: 10px; }

.dbx-refreshing { opacity: .55; pointer-events: none; transition: opacity .2s ease; }

/* Metric tiles (the AI Assist KPI cards, compact) */
.dbx-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.dbx-metrics-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dbx-metric {
    --dbx-tone: var(--tx-primary);
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas: "badge label" "value value" "caption caption";
    align-items: center;
    gap: .35rem .5rem;
    min-width: 0;
    padding: .65rem .75rem;
    border-radius: 14px;
    background: var(--rc-row);
}

.dbx-metric-positive { --dbx-tone: var(--tx-positive); }
.dbx-metric-critical { --dbx-tone: var(--tx-critical); }
.dbx-metric-caution { --dbx-tone: var(--tx-caution); }
.dbx-metric-neutral { --dbx-tone: var(--rc-muted); }

.dbx-metric-badge {
    grid-area: badge;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 11px;
    color: var(--dbx-tone);
    background: color-mix(in srgb, var(--dbx-tone) 14%, transparent);
}

.dbx-metric-label {
    grid-area: label;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dbx-metric-value {
    grid-area: value;
    font-family: var(--tx-font);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dbx-metric-positive .dbx-metric-value { color: var(--tx-positive); }
.dbx-metric-critical .dbx-metric-value { color: var(--tx-critical); }

.dbx-metric-caption { grid-area: caption; font-size: 11px; color: var(--rc-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Where your money goes */
.dbx-spend-body { display: flex; flex-direction: column; gap: .8rem; transition: opacity .2s ease; }
.dbx-spend-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.dbx-lead { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--rc-text); }
.dbx-lead .dbx-lead-glyph { color: #F59E0B; }
.dbx-seg.tx-seg { width: min(288px, 100%); }
.dbx-seg .tx-seg-item { height: 34px; font-size: 12.5px; }
.dbx-windows .rc-window:disabled { opacity: .6; cursor: default; }

.dbx-rank { gap: 13px; }
.dbx-rank-row { --dbx-hue: var(--tx-primary); }

.dbx-rank-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    overflow: visible;
    white-space: normal;
}

.dbx-rank-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 12px;
    color: var(--dbx-hue);
    background: color-mix(in srgb, var(--dbx-hue) 15%, transparent);
}

.dbx-rank-text { display: flex; flex-direction: column; min-width: 0; }
.dbx-rank-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-rank-caption { font-size: 11px; font-weight: 400; color: var(--rc-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-rank-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--dbx-hue) 50%, transparent) 0%, var(--dbx-hue) 100%); }

.dbx-rank-toggle i { transition: transform .2s ease; }
.dbx-rank-toggle i.is-open { transform: rotate(180deg); }

.dbx-chart { min-height: 220px; }

/* app.css tints every admin pie with the brand palette; the spending pie keeps the colors its legend and the ranked list
   use (AiChartPalette, in palette order: each slice's PaletteIndex is its position). */
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+1) { fill: #5A45E6; }
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+2) { fill: #0EA5E9; }
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+3) { fill: #16A34A; }
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+4) { fill: #D97706; }
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+5) { fill: #DB2777; }
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+6) { fill: #0D9488; }
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+7) { fill: #4F46E5; }
.admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+8) { fill: #DC2626; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+1) { fill: #8B7CF6; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+2) { fill: #4ACAFF; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+3) { fill: #34D399; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+4) { fill: #F2B557; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+5) { fill: #F472B6; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+6) { fill: #2DD4BF; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+7) { fill: #A5B4FC; }
[data-bs-theme="dark"] .admin-shell .dbx-chart .e-accumulationchart .e-accumulation-series-group path:nth-of-type(8n+8) { fill: #F87171; }

/* Empty and error states inside a card */
.dbx-empty { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-radius: 14px; background: var(--rc-row); }
.dbx-empty > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dbx-empty strong { font-size: 13.5px; font-weight: 600; color: var(--rc-text); }
.dbx-empty > div > span { font-size: 12.5px; line-height: 1.4; color: var(--rc-muted); }
.dbx-empty-error { background: var(--rc-critical-soft); }
.dbx-empty-compact { padding: .7rem .85rem; }
.dbx-note { margin: 0; font-size: 12.5px; color: var(--rc-muted); }

/* Figures, sections, chips */
.dbx-figure { font-family: var(--tx-font); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--rc-text); }
.dbx-figure.rc-tone-text-caution { color: var(--tx-caution); }
.dbx-figure small { margin-left: 3px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--rc-muted); }
.dbx-figure-sub { margin-top: -.45rem; font-size: 12.5px; line-height: 1.4; color: var(--rc-muted); }

.dbx-section { display: flex; flex-direction: column; gap: .6rem; padding-top: .8rem; border-top: 1px solid var(--rc-line); }

.dbx-subhead {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--tx-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rc-muted);
}

.dbx-subhead small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rc-light); }
.dbx-subhead-link { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tx-primary); text-decoration: none; }
.dbx-subhead-link:hover { text-decoration: underline; }

.dbx-price-line { display: flex; flex-direction: column; gap: .15rem; }
.dbx-price-figure { font-family: var(--tx-font); font-size: 21px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dbx-price-headline { font-size: 12.5px; line-height: 1.4; color: var(--rc-muted); }

.dbx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.dbx-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rc-muted);
    background: var(--rc-neutral-soft);
    white-space: nowrap;
}

.dbx-chip b { font-weight: 700; color: var(--rc-text); }
.dbx-chip .tx-glyph { font-size: 10px; }
.dbx-chip-positive { color: var(--tx-positive); background: var(--rc-positive-soft); }
.dbx-chip-caution { color: var(--tx-caution); background: var(--rc-caution-soft); }
.dbx-chip-critical { color: var(--tx-critical); background: var(--rc-critical-soft); }
.dbx-chip-positive b, .dbx-chip-caution b, .dbx-chip-critical b { color: inherit; }

.dbx .rc-tag-muted { color: var(--rc-muted); background: var(--rc-neutral-soft); }
.dbx .rc-tag-accent { color: var(--tx-primary); background: var(--rc-accent-soft); }
.dbx-rows-tight { gap: 6px; }
.dbx-inline-bones { display: flex; flex-direction: column; gap: .55rem; }

/* Cash-flow forecast */
.dbx-forecast { display: flex; flex-direction: column; }

.dbx-spark { margin-top: 14px; padding: 10px 12px 6px; border-radius: 16px; background: var(--tx-hero-tile); }
.dbx-spark-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.dbx-spark-title { display: inline-flex; align-items: center; gap: .4rem; color: var(--rc-text); }
.dbx-spark-legend { display: inline-flex; gap: .75rem; font-weight: 500; color: var(--rc-muted); }
.dbx-spark-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.dbx-spark-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dbx-spark-dot.is-payday { background: #16A34A; }
.dbx-spark-dot.is-low { background: #DC2626; border-radius: 2px; transform: rotate(45deg); }

.dbx-spark-plot { position: relative; height: 112px; }
.dbx-spark-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dbx-spark-line { fill: none; stroke: var(--tx-primary); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dbx-spark-zero { stroke: var(--rc-light); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .6; }
.dbx-spark-pos-0 { stop-color: #16A34A; stop-opacity: .3; }
.dbx-spark-pos-1 { stop-color: #16A34A; stop-opacity: .05; }
.dbx-spark-neg-0 { stop-color: #DC2626; stop-opacity: .3; }
.dbx-spark-neg-1 { stop-color: #DC2626; stop-opacity: .05; }

.dbx-spark-marker {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    border: 2px solid var(--rc-card);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
    animation: dbx-pop .45s cubic-bezier(.2, .9, .3, 1.25) .3s both;
}

.dbx-spark-marker.is-payday { background: #16A34A; }
.dbx-spark-marker.is-low { background: #DC2626; border-radius: 3px; transform: rotate(45deg); }
.dbx-spark-axis { margin-top: 4px; }

.dbx-periods { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Coming up */
.dbx-group + .dbx-group { margin-top: 10px; }
.dbx-event { align-items: center; }

/* Needs review */
.dbx-review-progress { margin-top: 0; }
.dbx-review-row .rc-row-detail { display: flex; align-items: flex-start; gap: .35rem; }
.dbx-issue-glyph { margin-top: 2px; color: var(--tx-caution); font-size: 11px; }

/* The review button is the shared .rc-cta (the Recurring pulse "full checkup" button); this pins it to the card bottom. */
.dbx-cta-slot { margin-top: auto; }

.dbx-caught-up {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.25rem .75rem;
    border-radius: 16px;
    text-align: center;
    background: var(--rc-positive-soft);
}

.dbx-caught-up strong { font-family: var(--tx-font); font-size: 15px; color: var(--rc-text); }
.dbx-caught-up > span:not(.dbx-caught-up-icon) { font-size: 12.5px; line-height: 1.45; color: var(--rc-muted); }

.dbx-caught-up-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 22px;
    color: var(--tx-positive);
    background: var(--rc-card);
    animation: dbx-pop .5s cubic-bezier(.2, .9, .3, 1.25) .15s both;
}

/* Recent transactions */
/* The Recent card's "Last 7 days": a bar per day (today in the accent, the week's biggest day in the caution tone), sat at
   the bottom of the card so it fills the room beside Debt & payments. */
.dbx-week { display: flex; flex-direction: column; gap: .7rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--rc-line); }
.dbx-week .dbx-subhead small { margin-left: auto; text-align: right; }

.dbx-week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 132px; }

.dbx-week-day { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }

.dbx-week-value {
    min-height: 14px;
    font-family: var(--tx-font);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 14px;
    color: var(--rc-muted);
    white-space: nowrap;
}

.dbx-week-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
    width: min(34px, 100%);
    border-radius: 10px;
    background: var(--rc-row);
    overflow: hidden;
}

.dbx-week-bar {
    display: block;
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tx-primary) 55%, transparent), color-mix(in srgb, var(--tx-primary) 30%, transparent));
    transform-origin: bottom;
    animation: dbx-week-grow .7s cubic-bezier(.2, .8, .2, 1) both;
}

.dbx-week-day:nth-child(2) .dbx-week-bar { animation-delay: .04s; }
.dbx-week-day:nth-child(3) .dbx-week-bar { animation-delay: .08s; }
.dbx-week-day:nth-child(4) .dbx-week-bar { animation-delay: .12s; }
.dbx-week-day:nth-child(5) .dbx-week-bar { animation-delay: .16s; }
.dbx-week-day:nth-child(6) .dbx-week-bar { animation-delay: .2s; }
.dbx-week-day:nth-child(7) .dbx-week-bar { animation-delay: .24s; }

.dbx-week-day.is-peak .dbx-week-bar { background: linear-gradient(180deg, #F59E0B, color-mix(in srgb, #F59E0B 55%, transparent)); }
.dbx-week-day.is-peak .dbx-week-value { color: var(--tx-caution); }
.dbx-week-day.is-today .dbx-week-bar { background: linear-gradient(180deg, var(--tx-primary), color-mix(in srgb, var(--tx-primary) 70%, #4ACAFF)); }
.dbx-week-day.is-today .dbx-week-value,
.dbx-week-day.is-today .dbx-week-label { color: var(--tx-primary); }

.dbx-week-label { font-size: 11px; font-weight: 600; color: var(--rc-light); }

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

.dbx-tx-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; transition: opacity .2s ease; }

.dbx-tx {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 14px;
    background: var(--rc-row);
    transition: background .15s ease;
    animation: dbx-rise .4s cubic-bezier(.2, .8, .2, 1) both;
}

.dbx-tx:nth-child(2) { animation-delay: .04s; }
.dbx-tx:nth-child(3) { animation-delay: .08s; }
.dbx-tx:nth-child(4) { animation-delay: .12s; }
.dbx-tx:nth-child(5) { animation-delay: .16s; }
.dbx-tx:nth-child(n + 6) { animation-delay: .2s; }
.dbx-tx:hover { background: var(--rc-row-hover); }

.dbx-tx-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 6px 9px 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--rc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dbx-tx-main:focus-visible { outline: 2px solid var(--tx-primary); outline-offset: -2px; }

.dbx-tx-plate { position: relative; flex: 0 0 auto; display: inline-flex; }

.dbx-tx-badge {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 8.5px;
    color: var(--tx-primary);
    background: var(--rc-card);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}

.dbx-tx.is-income .dbx-tx-badge { color: var(--dbx-income); }
.dbx-tx-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dbx-tx-title { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.dbx-tx-name { min-width: 0; font-family: var(--tx-font); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dbx-flag {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    font-size: 9.5px;
    color: var(--tx-primary);
    background: var(--rc-accent-soft);
}

.dbx-flag svg { width: 12px; height: 12px; fill: currentColor; }
.dbx-flag-split { color: var(--tx-caution); background: var(--rc-caution-soft); }

.dbx-tx-meta { display: flex; align-items: center; gap: .4rem; min-width: 0; overflow: hidden; font-size: 12px; white-space: nowrap; color: var(--rc-muted); }
.dbx-tx-account { overflow: hidden; text-overflow: ellipsis; }
.dbx-dot { flex: 0 0 auto; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }

.dbx-tx-amount { flex: 0 0 auto; font-family: var(--tx-font); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rc-text); }
.dbx-tx.is-income .dbx-tx-amount { color: var(--dbx-income); }

/* What the row is to the totals (the API's flowKind): income, a transfer or card payment between the user's own
   accounts, a loan payment, or a refund. Never green for a transfer: only real money in reads as income. */
.dbx-flow { flex-shrink: 0; padding: 2px 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.dbx-flow-income { color: var(--dbx-flow-income); background: var(--dbx-flow-income-soft); }
.dbx-flow-transfer { color: var(--dbx-flow-transfer); background: var(--dbx-flow-transfer-soft); }
.dbx-flow-credit { color: var(--dbx-flow-credit); background: var(--dbx-flow-credit-soft); }
.dbx-flow-loan { color: var(--dbx-flow-loan); background: var(--dbx-flow-loan-soft); }

.dbx-tx-split {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border: 1px solid var(--rc-card-border);
    border-radius: 11px;
    background: var(--rc-card);
    color: var(--rc-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.dbx-tx-split:hover,
.dbx-tx-split:focus-visible { color: var(--tx-primary); border-color: color-mix(in srgb, var(--tx-primary) 45%, transparent); background: var(--rc-accent-soft); outline: none; }
.dbx-tx-split.is-split { color: var(--tx-primary); }
.dbx-tx-split svg { width: 16px; height: 16px; fill: currentColor; }
.dbx-tx-split-spacer { flex: 0 0 auto; width: 34px; margin-right: 8px; }

/* Debt & payments */
.dbx-debt-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dbx-debt-top .dbx-figure-sub { margin-top: .25rem; }

.dbx-ring {
    --dbx-ring: var(--tx-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    text-align: center;
}

.dbx-ring-positive { --dbx-ring: var(--tx-positive); }
.dbx-ring-caution { --dbx-ring: var(--tx-caution); }
.dbx-ring-critical { --dbx-ring: var(--tx-critical); }
.dbx-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dbx-ring-track { fill: none; stroke: var(--rc-neutral-soft); stroke-width: 5; }
.dbx-ring-fill { fill: none; stroke: var(--dbx-ring); stroke-width: 5; stroke-linecap: round; animation: dbx-ring-in 1s cubic-bezier(.2, .8, .2, 1) both; }
.dbx-ring-value { position: relative; font-family: var(--tx-font); font-size: 16px; font-weight: 700; line-height: 1; color: var(--dbx-ring); }
.dbx-ring-label { position: relative; margin-top: 2px; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-muted); }

.dbx-alert { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--tx-critical); background: var(--rc-critical-soft); }

.dbx-debt-list { display: flex; flex-direction: column; gap: 11px; }

.dbx-debt-row {
    --dbx-row-tone: var(--tx-primary);
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-rows: auto 6px;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
}

.dbx-tone-positive { --dbx-row-tone: var(--tx-positive); }
.dbx-tone-caution { --dbx-row-tone: var(--tx-caution); }
.dbx-tone-critical { --dbx-row-tone: var(--tx-critical); }
.dbx-tone-neutral { --dbx-row-tone: var(--tx-primary); }

.dbx-debt-glyph {
    grid-row: 1 / span 2;
    align-self: start;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--dbx-row-tone);
    background: color-mix(in srgb, var(--dbx-row-tone) 14%, transparent);
}

.dbx-debt-text { display: flex; flex-direction: column; min-width: 0; }
.dbx-debt-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-debt-caption { font-size: 11.5px; color: var(--rc-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-debt-amount { font-family: var(--tx-font); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dbx-debt-track { grid-column: 2 / span 2; height: 6px; border-radius: 3px; background: var(--rc-neutral-soft); overflow: hidden; }

.dbx-debt-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--dbx-row-tone) 50%, transparent) 0%, var(--dbx-row-tone) 100%);
    transform-origin: left center;
    animation: dbx-grow .8s cubic-bezier(.2, .8, .2, 1) both;
}

.dbx-pay-row { align-items: center; }
.dbx .rc-date-chip.dbx-date-overdue { color: var(--tx-critical); background: var(--rc-critical-soft); }

/* Accounts & sync */
.dbx-status-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.dbx-status {
    --dbx-status: var(--rc-muted);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .75rem;
    border-radius: 12px;
    font-size: 12px;
    color: var(--rc-muted);
    background: var(--rc-row);
}

.dbx-status b { font-weight: 700; color: var(--rc-text); }
.dbx-status .tx-glyph { color: var(--dbx-status); }
.dbx-status.is-positive { --dbx-status: var(--tx-positive); }
.dbx-status.is-accent { --dbx-status: var(--tx-primary); }
.dbx-status.is-neutral { --dbx-status: var(--rc-muted); }
.dbx-status.is-critical { --dbx-status: var(--tx-critical); background: var(--rc-critical-soft); }
.dbx-status.is-critical b { color: var(--tx-critical); }

.dbx-institutions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }

.dbx-institution {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem .9rem;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--rc-row);
    transition: border-color .15s ease, transform .15s ease;
}

.dbx-institution:hover { border-color: var(--rc-card-border); transform: translateY(-1px); }
.dbx-institution.has-issue { border-color: color-mix(in srgb, var(--tx-critical) 35%, transparent); }
.dbx-institution-head { display: flex; align-items: center; gap: .65rem; }

.dbx-institution-logo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid var(--rc-card-border);
    border-radius: 11px;
    background: transparent;
}

/* A real logo sits on the card itself: no tile, no frame. The letter fallback keeps its outline. */
.dbx-institution-logo:has(img) { border-color: transparent; border-radius: 0; }
.dbx-institution-logo img { width: 100%; height: 100%; object-fit: contain; }
.dbx-institution-logo b { font-size: 15px; font-weight: 800; }
.dbx-institution-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dbx-institution-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-institution-caption { font-size: 11.5px; color: var(--rc-light); }
.dbx-institution.has-issue .dbx-institution-caption { color: var(--tx-critical); }
.dbx-institution-total { font-family: var(--tx-font); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dbx-institution-accounts { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.dbx-institution-accounts li { display: flex; align-items: center; gap: .5rem; font-size: 12.5px; }

.dbx-account-glyph {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 9.5px;
    color: var(--tx-primary);
    background: var(--rc-accent-soft);
}

.dbx-account-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-account-name small { margin-left: .35rem; color: var(--rc-light); }
.dbx-account-issue { color: var(--tx-critical); font-size: 11px; }
.dbx-account-balance { font-weight: 600; font-variant-numeric: tabular-nums; }
.dbx-account-balance.is-negative { color: var(--tx-critical); }
.dbx-institution-more { font-size: 11.5px; color: var(--rc-muted); }

/* Connection health on the Accounts & sync card: the Connections chip opens the most urgent bank, and a bank that needs
   the viewer carries its own chip ("Reconnect", "Moving to Capital One") with a Fix button that opens the connection sheet. */
.dbx-status.is-caution { --dbx-status: var(--tx-caution); background: var(--rc-caution-soft); }
.dbx-status.is-caution b { color: var(--tx-caution); }

.dbx-status-btn {
    border: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.dbx-status-btn:hover { filter: brightness(.97); transform: translateY(-1px); }
.dbx-status-btn:focus-visible { outline: 2px solid var(--dbx-status); outline-offset: 2px; }

.dbx-institution.has-issue.is-caution { border-color: color-mix(in srgb, var(--tx-caution) 40%, transparent); }
.dbx-institution.has-issue.is-caution .dbx-institution-caption { color: var(--tx-caution); }

.dbx-institution-issue {
    --dbx-issue: var(--tx-critical);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem .45rem .7rem;
    border-radius: 11px;
    font-size: 12px;
    color: var(--dbx-issue);
    background: var(--rc-critical-soft);
}

.dbx-institution.is-caution .dbx-institution-issue { --dbx-issue: var(--tx-caution); background: var(--rc-caution-soft); }
.dbx-institution-issue-text { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dbx-institution-fix {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .3rem .65rem;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: var(--dbx-issue);
    cursor: pointer;
    transition: filter .15s ease;
}

[data-bs-theme="dark"] .dbx-institution-fix { color: var(--rc-card); }
.dbx-institution-fix:hover { filter: brightness(1.08); }
.dbx-institution-fix:focus-visible { outline: 2px solid var(--dbx-issue); outline-offset: 2px; }

/* ------------------------------------------------------------------ Motion */

@keyframes dbx-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes dbx-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dbx-pop {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; }
}

@keyframes dbx-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes dbx-ring-in {
    from { stroke-dasharray: 0 200; }
}

/* Refresh's icon turns while the sections re-read. */
.e-btn-icon.fin-refresh-spin {
    display: inline-block;
    animation: dbx-spin .9s linear infinite;
}

@keyframes dbx-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ Responsive */

@media (max-width: 1399.98px) {
    .dbx-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dbx-grid-3 > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 1199.98px) {
    .dbx-grid-feature { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .dbx-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .dbx-grid-3 > :last-child { grid-column: auto; }
    .dbx-metrics, .dsh-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dbx-metrics-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dbx-head { align-items: flex-start; }
    .dbx-spend-bar { align-items: stretch; }
    .dbx-seg.tx-seg { width: 100%; }
}

@media (max-width: 575.98px) {
    .dsh-hero-main { min-height: 300px; }
    .dbx-week .dbx-subhead { flex-wrap: wrap; }
    .dbx-week .dbx-subhead small { flex-basis: 100%; margin-left: 0; text-align: left; }
    .dbx-tx-meta { flex-wrap: wrap; row-gap: 1px; }
    .dbx-tx-meta .dbx-tx-account,
    .dbx-tx-meta .dbx-tx-account + .dbx-dot { display: none; }
    .dbx-institutions { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .dsh-bone,
    .dsh-wave-area,
    .dbx-card,
    .dbx-tx,
    .dbx-debt-bar,
    .dbx-ring-fill,
    .dbx-spark-marker,
    .dbx-caught-up-icon,
    .fin-top-settle > .fin-rollup-card:not(.dsh-card),
    .fin-rollup-grid > .fin-rollup-card:not(.dsh-card),
    .fin-top-hero > .dh,
    .dbx-week-bar,
    .e-btn-icon.fin-refresh-spin { animation: none; }

    /* A still bone shows no highlight band. */
    .dsh-bone { background-image: none; }

    /* The wave's moving highlight is SMIL, which CSS can't pause: flatten the highlight so nothing visibly moves. */
    .dsh-wave-stop-hi { stop-opacity: .3; }
}

/* ------------------------------------------------------------------ Row two: Budgets / Dividend income / Retirement readiness
   The mobile Home cards, in the hero recipe: a 158deg wash of the area's hue from the top left into the card, a 1px hue
   hairline, glass pills and a glass facts strip on top. Light and dark are tuned separately (never inverted). The row
   reads the preview tokens the Dashboard page defines on .fin-preview (--fp-*), and adds its own text and ring tokens so
   nothing depends on Bootstrap resolving the theme. */

.fin-rollup-card.fin-preview--bud,
.fin-rollup-card.fin-preview--div,
.fin-rollup-card.fin-preview--ret {
    --fin-text: #1F2440;
    --fin-text-2: #6C757D;
    --fin-ring-track: rgba(31, 36, 64, .09);
    --fp-pill-bg: rgba(255, 255, 255, .72);
    --fp-tile-bg: rgba(255, 255, 255, .66);
    gap: .5rem;
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bud,
[data-bs-theme="dark"] .fin-rollup-card.fin-preview--div,
[data-bs-theme="dark"] .fin-rollup-card.fin-preview--ret {
    --fin-text: #E6E9F5;
    --fin-text-2: rgba(230, 233, 245, .7);
    --fin-ring-track: rgba(255, 255, 255, .11);
    --fp-pill-bg: rgba(255, 255, 255, .08);
    --fp-tile-bg: rgba(255, 255, 255, .06);
}

/* Budgets: the Reports indigo. */
.fin-rollup-card.fin-preview--bud {
    --fin-accent: hsl(calc(243.4deg + var(--ci-accent-shift, 0deg)) 75.36% 58.63%);
    --fp-card-bg: #FFFFFF;
    --fp-pill-border: hsl(calc(248.57deg + var(--ci-accent-shift, 0deg)) 68.63% 90%);
    --fp-tile-border: hsl(calc(247.74deg + var(--ci-accent-shift, 0deg)) 60.78% 90%);
    background: linear-gradient(158deg, #E0E7FF 0%, #EEF1FF 45%, #FFFFFF 100%);
    border-color: hsl(calc(248.57deg + var(--ci-accent-shift, 0deg)) 71.01% 86.47%);
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--bud {
    --fin-accent: #A5B4FC;
    --fp-card-bg: #10131C;
    --fp-pill-border: rgba(165, 180, 252, .22);
    --fp-tile-border: rgba(165, 180, 252, .16);
    background: linear-gradient(158deg, hsl(calc(245.62deg + var(--ci-accent-shift, 0deg)) 44.44% 28.24%) 0%, hsl(calc(240deg + var(--ci-accent-shift, 0deg)) 31.82% 17.25%) 45%, #10131C 100%);
    border-color: hsl(calc(245.81deg + var(--ci-accent-shift, 0deg)) 40.79% 29.8%);
}

/* Dividend income: the Investments green. */
.fin-rollup-card.fin-preview--div {
    --fin-accent: #16A34A;
    --fp-card-bg: #FFFFFF;
    --fp-pill-border: #CFE9D9;
    --fp-tile-border: #D5EBDD;
    background: linear-gradient(158deg, #DCFCE7 0%, #EEFAF2 45%, #FFFFFF 100%);
    border-color: #C2EACF;
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--div {
    --fin-accent: #34D399;
    --fp-card-bg: #10131C;
    --fp-pill-border: rgba(52, 211, 153, .22);
    --fp-tile-border: rgba(52, 211, 153, .16);
    background: linear-gradient(158deg, #223A2B 0%, #182A24 45%, #10131C 100%);
    border-color: #1F3A2B;
}

/* Retirement readiness: the Dashboard blue. */
.fin-rollup-card.fin-preview--ret {
    --fin-accent: #2563EB;
    --fp-card-bg: #FFFFFF;
    --fp-pill-border: #CFDFF8;
    --fp-tile-border: #D5E2F7;
    background: linear-gradient(158deg, #DBEAFE 0%, #EDF3FF 45%, #FFFFFF 100%);
    border-color: #B5CFF6;
}

[data-bs-theme="dark"] .fin-rollup-card.fin-preview--ret {
    --fin-accent: #60A5FA;
    --fp-card-bg: #10131C;
    --fp-pill-border: rgba(96, 165, 250, .22);
    --fp-tile-border: rgba(96, 165, 250, .16);
    background: linear-gradient(158deg, #1E3354 0%, #182236 45%, #10131C 100%);
    border-color: #24406A;
}

.fin-rollup-icon--bud { color: hsl(calc(243.4deg + var(--ci-accent-shift, 0deg)) 75.36% 58.63%); background: hsl(calc(243.4deg + var(--ci-accent-shift, 0deg)) 75.36% 58.63% / .12); }
.fin-rollup-icon--div { color: #16A34A; background: rgba(22, 163, 74, .12); }
.fin-rollup-icon--ret { color: #2563EB; background: rgba(37, 99, 235, .12); }
[data-bs-theme="dark"] .fin-rollup-icon--bud { color: #A5B4FC; background: rgba(165, 180, 252, .18); }
[data-bs-theme="dark"] .fin-rollup-icon--div { color: #34D399; background: rgba(52, 211, 153, .16); }
[data-bs-theme="dark"] .fin-rollup-icon--ret { color: #60A5FA; background: rgba(96, 165, 250, .18); }

.dsh-tone-bud { --dsh-bone: hsl(calc(243.4deg + var(--ci-accent-shift, 0deg)) 75.36% 58.63% / .1); --dsh-line: #818CF8; }
.dsh-tone-ret { --dsh-bone: rgba(37, 99, 235, .1); --dsh-line: #60A5FA; }
[data-bs-theme="dark"] .dsh-tone-bud { --dsh-bone: rgba(165, 180, 252, .13); --dsh-wave: rgba(210, 215, 255, .1); }
[data-bs-theme="dark"] .dsh-tone-ret { --dsh-bone: rgba(96, 165, 250, .13); --dsh-wave: rgba(200, 225, 255, .1); }

.dsh-row-ring { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 .35rem; }
.dsh-row-ring .dsh-ring { width: 96px; height: 96px; }

/* A sub-caption inside the uppercase title ("Last 12 months"). */
.fin-rollup-title-note {
    margin-left: .4rem;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fin-text-2);
}

.fin-caution { color: var(--fp-amber); }

/* ---- Shared states: an error, an empty card, an invitation ---- */
.fin-state {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .45rem .1rem .3rem;
}

.fin-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1rem;
    color: var(--fin-accent, var(--fp-accent));
    background: color-mix(in srgb, var(--fin-accent, var(--fp-accent)) 13%, transparent);
}

.fin-state-icon--warn { color: var(--fp-amber); background: color-mix(in srgb, var(--fp-amber) 14%, transparent); }
.fin-state-title { font-size: .9rem; font-weight: 600; color: var(--fin-text); }
.fin-state-text { margin-top: .15rem; font-size: .76rem; line-height: 1.35; color: var(--fin-text-2); max-width: 44ch; }

.fin-state-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    padding: .3rem .7rem;
    border: 1px solid var(--fp-pill-border);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--fin-accent, var(--fp-accent));
    background: var(--fp-pill-bg);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fin-state-link:hover { text-decoration: none; color: var(--fin-accent, var(--fp-accent)); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--fin-accent, var(--fp-accent)) 18%, transparent); }
.fin-state-link i { font-size: .72rem; }

/* ---- The glass facts strip (the mobile glass panel under Dividend income and Retirement readiness) ---- */
.fin-glass-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .5rem 1.1rem;
    margin: auto 0 0;
    padding: .55rem .8rem;
    border-radius: 12px;
    background: var(--fp-pill-bg);
    border: 1px solid var(--fp-pill-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.fin-glass-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-glass-fact { min-width: 0; }
.fin-glass-facts:not(.fin-glass-facts--3) .fin-glass-fact:not(.fin-glass-fact--wide) { text-align: right; }

.fin-glass-fact dt {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fin-text-2);
}

.fin-glass-fact dd {
    margin: .12rem 0 0;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fin-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fin-glass-fact dd.fin-pos { color: var(--fp-pos); }
.fin-glass-fact dd.fin-neg { color: var(--fp-neg); }
.fin-glass-fact dd.fin-caution { color: var(--fp-amber); }
.fin-glass-muted { font-size: .76rem; font-weight: 500; color: var(--fin-text-2); }
.fin-glass-dot { margin: 0 .3rem; color: var(--fin-text-2); }

/* ---- Budgets ---- */
.fin-bud-top { display: flex; align-items: center; gap: .9rem; }

.fin-bud-ring {
    --fin-ring: var(--fp-pos);
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
}

.fin-bud-ring.is-caution { --fin-ring: var(--fp-amber); }
.fin-bud-ring.is-negative { --fin-ring: var(--fp-neg); }
.fin-bud-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fin-bud-ring-track { fill: none; stroke: var(--fin-ring-track); stroke-width: 10; }
.fin-bud-ring-fill { fill: none; stroke: var(--fin-ring); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .9s cubic-bezier(.2, .8, .2, 1); }
.fin-bud-ring-pace { fill: var(--fp-card-bg); stroke: var(--fin-ring); stroke-width: 2.5; }

.fin-bud-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fin-bud-ring-center strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--fin-text); }
.fin-bud-ring-center small { margin-top: .2rem; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fin-ring); }

.fin-bud-copy { flex: 1 1 auto; min-width: 0; }

.fin-bud-month {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fin-accent);
}

.fin-bud-headline { margin-top: .1rem; font-size: 1.05rem; font-weight: 600; line-height: 1.2; color: var(--fin-text); }
.fin-bud-headline b { font-weight: 800; }
.fin-bud-pace { margin-top: .15rem; font-size: .74rem; line-height: 1.3; color: var(--fin-text-2); }
.fin-bud-dot { margin: 0 .3rem; }
.fin-bud-text-caution { font-weight: 600; color: var(--fp-amber); }
.fin-bud-text-positive { font-weight: 600; color: var(--fp-pos); }
.fin-bud-counts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }

.fin-bud-count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .14rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fin-text);
    background: var(--fp-pill-bg);
    border: 1px solid var(--fp-pill-border);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.fin-bud-count i { font-size: .66rem; }
.fin-bud-count b { font-weight: 800; }
.fin-bud-count.is-negative { color: var(--fp-neg); }
.fin-bud-count.is-caution { color: var(--fp-amber); }
.fin-bud-count.is-positive { color: var(--fp-pos); }
.fin-bud-count.is-zero { opacity: .55; }

.fin-bud-lines { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0 0; padding: 0; }

.fin-bud-line {
    --fin-line: var(--fp-pos);
    --fp-cat: var(--fin-accent);
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    border-radius: 12px;
    background: var(--fp-tile-bg);
    border: 1px solid var(--fp-tile-border);
}

.fin-bud-line.is-caution { --fin-line: var(--fp-amber); }
.fin-bud-line.is-negative { --fin-line: var(--fp-neg); }

.fin-bud-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: .8rem;
    color: var(--fp-cat);
    background: color-mix(in srgb, var(--fp-cat) 16%, transparent);
}

.fin-bud-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.fin-bud-line-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.fin-bud-name { font-size: .82rem; font-weight: 600; color: var(--fin-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fin-bud-status {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    flex: 0 0 auto;
    padding: .1rem .48rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--fin-line);
    background: color-mix(in srgb, var(--fin-line) 14%, transparent);
    white-space: nowrap;
}

.fin-bud-status i { font-size: .58rem; }

.fin-bud-track {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fin-line) 14%, transparent);
}

.fin-bud-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--fin-line); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.fin-bud-over { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(135deg, var(--fin-line) 0 3px, transparent 3px 6px); opacity: .75; }
.fin-bud-pace-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--fp-card-bg); border: 2px solid var(--fin-line); transform: translate(-50%, -50%); }
.fin-bud-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .5rem; font-size: .72rem; color: var(--fin-text-2); }
.fin-bud-legend b { font-weight: 700; color: var(--fin-text); }

.fin-bud-foot { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: .74rem; color: var(--fin-text-2); }
.fin-bud-foot i { color: var(--fin-accent); }
.fin-bud-foot b { font-weight: 700; color: var(--fin-text); }

/* ---- Dividend income ---- */
.fin-div-figure { flex: 0 0 auto; min-width: 0; }
.fin-div-value-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.fin-div-figure .fin-rollup-value { font-size: 1.6rem; color: var(--fin-text); }
.fin-div-figure .fin-rollup-sub { color: var(--fin-text-2); }

.fin-div-change {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .48rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--fin-text);
    background: var(--fp-pill-bg);
    border: 1px solid var(--fp-pill-border);
    white-space: nowrap;
}

.fin-div-change.is-positive { color: var(--fp-pos); }
.fin-div-change.is-negative { color: var(--fp-neg); }
.fin-div-change i { font-size: .6rem; }

.fin-div-bars { display: flex; flex: 1 1 auto; flex-direction: column; gap: .3rem; min-width: 0; min-height: 96px; margin: .5rem 0 .7rem; }
.fin-div-cols { display: flex; flex: 1 1 auto; align-items: flex-end; gap: 6px; min-height: 64px; }
.fin-div-col { display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }

.fin-div-bar {
    --fin-h: 0%;
    width: 100%;
    max-width: 34px;
    height: var(--fin-h);
    min-height: 3px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--fin-accent) 0%, color-mix(in srgb, var(--fin-accent) 55%, transparent) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fin-accent) 18%, transparent) inset;
    opacity: .92;
    transform-origin: bottom;
}

.fin-div-bar.is-zero { height: 3px; opacity: .3; box-shadow: none; background: var(--fin-accent); }
.fin-div-axis { display: flex; justify-content: space-between; font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fin-text-2); }
.fin-div-bones { display: flex; flex: 1 1 auto; align-items: flex-end; gap: 6px; min-height: 96px; margin: .5rem 0 .7rem; }
.fin-div-bones > .dsh-bone { flex: 1 1 0; border-radius: 3px; }
.fin-card-bones { display: flex; flex: 1 1 auto; flex-direction: column; gap: .7rem; }
.fin-card-bones-row { display: flex; flex: 1 1 auto; flex-direction: column; gap: .5rem; }

/* ---- Retirement readiness ---- */
.fin-ret-plan,
.fin-ret-cta { display: flex; flex: 1 1 auto; align-items: center; gap: 1rem; margin-bottom: .6rem; }

.fin-ret-egg {
    --fin-tone: var(--fin-accent);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .6rem;
    padding: .55rem .7rem .5rem;
    border-radius: 12px;
    background: var(--fp-tile-bg);
    border: 1px solid var(--fp-tile-border);
}

.fin-ret-egg.is-positive { --fin-tone: var(--fp-pos); }
.fin-ret-egg.is-caution { --fin-tone: var(--fp-amber); }
.fin-ret-egg.is-negative { --fin-tone: var(--fp-neg); }
.fin-ret-egg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; }
.fin-ret-egg-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fin-text-2); }
.fin-ret-egg-label i { font-size: .62rem; color: var(--fin-accent); }
.fin-ret-egg-figures { font-size: .72rem; color: var(--fin-text-2); white-space: nowrap; }
.fin-ret-egg-figures b { font-weight: 700; color: var(--fin-text); }
.fin-ret-egg-track { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--fin-tone) 14%, transparent); }
.fin-ret-egg-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--fin-tone) 70%, transparent), var(--fin-tone)); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.fin-ret-egg-target { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--fin-text); opacity: .5; transform: translateX(-50%); }
.fin-ret-egg-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .6rem; font-size: .72rem; color: var(--fin-text-2); }
.fin-ret-egg-legend b { font-weight: 700; color: var(--fin-text); }
.fin-ret-egg-legend .fin-pos,
.fin-ret-egg-legend .fin-caution { font-weight: 600; }

.fin-ret-ring {
    --fin-ring: var(--fp-pos);
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
}

.fin-ret-ring.is-caution { --fin-ring: var(--fp-amber); }
.fin-ret-ring.is-negative { --fin-ring: var(--fp-neg); }
.fin-ret-ring.is-neutral,
.fin-ret-ring--demo { --fin-ring: var(--fin-accent); }
.fin-ret-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fin-ret-ring-track { fill: none; stroke: var(--fin-ring-track); stroke-width: 9; }
.fin-ret-ring-fill { fill: none; stroke: var(--fin-ring); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.fin-ret-ring--demo .fin-ret-ring-fill { opacity: .55; }

.fin-ret-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fin-ret-ring-center strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; color: var(--fin-text); }
.fin-ret-ring-center small { margin-top: .2rem; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fin-ring); }
.fin-ret-ring-center i { font-size: 1.5rem; color: var(--fin-accent); }
.fin-ret-ring-bone { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; }
.fin-ret-copy,
.fin-ret-cta-copy { flex: 1 1 auto; min-width: 0; }
.fin-ret-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.fin-ret-pill {
    --fin-tone: var(--fin-accent);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .62rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--fin-tone);
    background: color-mix(in srgb, var(--fin-tone) 14%, transparent);
    white-space: nowrap;
}

.fin-ret-pill.is-positive { --fin-tone: var(--fp-pos); }
.fin-ret-pill.is-caution { --fin-tone: var(--fp-amber); }
.fin-ret-pill.is-negative { --fin-tone: var(--fp-neg); }
.fin-ret-pill i { font-size: .66rem; }
.fin-ret-age { font-size: .72rem; color: var(--fin-text-2); white-space: nowrap; }
.fin-ret-headline { margin: .4rem 0 0; font-size: .86rem; font-weight: 500; line-height: 1.35; color: var(--fin-text); }

/* Entrance: lines and bars rise in, rings draw themselves (modest, matching row one). */
.fin-preview.is-live .fin-bud-line,
.fin-preview.is-live .fin-ret-egg,
.fin-preview.is-live .fin-glass-facts,
.fin-preview.is-live .fin-bud-foot { animation: fin-settle-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.fin-preview.is-live .fin-bud-line:nth-child(2) { animation-delay: .07s; }
.fin-preview.is-live .fin-bud-line:nth-child(3) { animation-delay: .14s; }
.fin-preview.is-live .fin-glass-facts { animation-delay: .18s; }
.fin-preview.is-live .fin-bud-foot { animation-delay: .24s; }
.fin-preview.is-live .fin-div-bar:not(.is-zero) { animation: fin-bar-grow .7s cubic-bezier(.2, .8, .2, 1) both; }
.fin-preview.is-live .fin-div-col:nth-child(n+2) .fin-div-bar { animation-delay: .04s; }
.fin-preview.is-live .fin-div-col:nth-child(n+5) .fin-div-bar { animation-delay: .1s; }
.fin-preview.is-live .fin-div-col:nth-child(n+9) .fin-div-bar { animation-delay: .16s; }
.fin-preview.is-live .fin-bud-ring-fill,
.fin-preview.is-live .fin-ret-ring-fill { animation: fin-ring-in .9s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes fin-bar-grow {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: none; opacity: .92; }
}

@keyframes fin-ring-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 575.98px) {
    .fin-glass-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-glass-fact--wide { grid-column: 1 / -1; }
    .fin-glass-facts:not(.fin-glass-facts--3) .fin-glass-fact:not(.fin-glass-fact--wide) { text-align: left; }
    .fin-glass-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .fin-preview.is-live .fin-bud-line,
    .fin-preview.is-live .fin-ret-egg,
    .fin-preview.is-live .fin-glass-facts,
    .fin-preview.is-live .fin-bud-foot,
    .fin-preview.is-live .fin-div-bar:not(.is-zero),
    .fin-preview.is-live .fin-bud-ring-fill,
    .fin-preview.is-live .fin-ret-ring-fill { animation: none; }
    .fin-bud-fill,
    .fin-bud-ring-fill,
    .fin-ret-ring-fill,
    .fin-ret-egg-fill,
    .fin-state-link { transition: none; }
}