/*
    The Modern dashboard (Components/Pages/Admin/DashboardParts/Modern): one canvas in a handful of surfaces instead of a
    wall of cards. Every surface has the same anatomy (a quiet panel, 1px hairline, one soft shadow); a surface splits into
    cells with hairlines, so related things read as one piece. Each cell keeps its area's hue (cash blue, spending indigo,
    budgets fuchsia, investments green, debt rose, bills amber, retirement teal, the couple's blue and amber), but only in
    its glyph chip, its chart and its status marks; text stays in the ink tokens. Charts are hand-drawn SVG and CSS, so
    light and dark are two token sets, not a re-render. Container queries size the layout to the content column (the admin
    sidebar takes a varying share of the window). Prefix: dx-. The Classic / Modern switch (dash-style) lives here too.
*/

/* ------------------------------------------------------------------ Tokens */
.dx {
    --dx-font: var(--si-font-sans-serif, "Manrope"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --dx-display: "Poppins", var(--si-font-sans-serif, "Manrope"), system-ui, sans-serif;

    --dx-ink: #0E1222;
    --dx-ink-2: #4A4F66;
    --dx-ink-3: #7C8199;
    --dx-panel: #FFFFFF;
    --dx-panel-solid: #FFFFFF;
    --dx-inset: #F6F7FB;
    --dx-inset-line: #ECEEF5;
    --dx-line: #E6E9F2;
    --dx-line-soft: #EEF0F6;
    --dx-line-strong: #CDD2E1;
    --dx-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -20px rgba(36, 54, 115, .26);
    --dx-radius: 22px;
    --dx-tip-bg: #141A2E;
    --dx-tip-ink: #F4F6FC;
    --dx-seg-track: #F1F3F8;
    --dx-ring-track: #EDEFF6;
    --dx-bone-a: rgba(15, 23, 42, .05);
    --dx-bone-b: rgba(15, 23, 42, .10);

    --dx-accent: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --dx-accent-ink: hsl(calc(248.51deg + var(--ci-accent-shift, 0deg)) 62.11% 44.51%);
    --dx-accent-soft: hsl(calc(247.06deg + var(--ci-accent-shift, 0deg)) 100% 96.67%);

    --dx-pos: #16A34A;
    --dx-pos-ink: #15803D;
    --dx-pos-soft: #E6F7EC;
    --dx-neg: #DC2626;
    --dx-neg-ink: #B91C1C;
    --dx-neg-soft: #FDECEC;
    --dx-caution: #D97706;
    --dx-caution-ink: #B45309;
    --dx-caution-soft: #FEF3E2;
    --dx-neutral-soft: #F1F3F8;

    --dx-blue: #2563EB;      --dx-blue-ink: #1D4ED8;     --dx-blue-soft: #E3EDFF;
    --dx-indigo: #4F46E5;    --dx-indigo-ink: #4338CA;   --dx-indigo-soft: #E8E9FF;
    --dx-fuchsia: #C026D3;   --dx-fuchsia-ink: #A21CAF;  --dx-fuchsia-soft: #FBE8FD;
    --dx-green: #16A34A;     --dx-green-ink: #15803D;    --dx-green-soft: #E3F7EA;
    --dx-rose: #E5484D;      --dx-rose-ink: #C2373B;     --dx-rose-soft: #FDE8E9;
    --dx-amber: #D97706;     --dx-amber-ink: #B45309;    --dx-amber-soft: #FDF1DE;
    --dx-teal: #0D9488;      --dx-teal-ink: #0F766E;     --dx-teal-soft: #DDF6F2;
    --dx-you: #2563EB;       --dx-you-soft: #E6EEFF;
    --dx-partner: #D97706;   --dx-partner-ink: #B45309;  --dx-partner-soft: #FDF1DE;

    /* Spending categories: a validated order (adjacent pairs and the wrap-around clear the CVD and normal-vision
       floors in both themes; dataviz validate_palette.js). Rank picks the slot; the list beside the ring names each. */
    --dx-cat-0: #5A45E6;
    --dx-cat-1: #0E9F8A;
    --dx-cat-2: #E8642C;
    --dx-cat-3: #2A78D6;
    --dx-cat-4: #E09A00;
    --dx-cat-5: #E0559A;
    --dx-cat-other: #A3A9BC;

    /* What the cash net worth is made of. */
    --dx-comp-checking: #2563EB;
    --dx-comp-savings: #0D9488;
    --dx-comp-cash: #60A5FA;
    --dx-comp-manual: #8B7CF6;
    --dx-comp-debt: #E5484D;

    /* The recurring mix (bills, subscriptions, pay-later plans), the Recurring area's kinds; validated as a set in both themes. */
    --dx-mix-bills: #D97706;
    --dx-mix-subscriptions: #4F46E5;
    --dx-mix-installments: #E11D48;
    --dx-mix-income: #16A34A;
    --dx-mix-other: #94A3B8;

    position: relative;
    isolation: isolate;
    container: dx / inline-size;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 6px clamp(10px, 1.6vw, 22px) 48px;
    color: var(--dx-ink);
    font-family: var(--dx-font);
    min-width: 0;
}

[data-bs-theme="dark"] .dx {
    --dx-ink: #E9EBF5;
    --dx-ink-2: #B1B6CB;
    --dx-ink-3: #7D839C;
    --dx-panel: linear-gradient(180deg, rgba(255, 255, 255, .034) 0%, rgba(255, 255, 255, .014) 100%), #0F1421;
    --dx-panel-solid: #121828;
    --dx-inset: rgba(255, 255, 255, .035);
    --dx-inset-line: rgba(255, 255, 255, .06);
    --dx-line: rgba(255, 255, 255, .075);
    --dx-line-soft: rgba(255, 255, 255, .055);
    --dx-line-strong: rgba(255, 255, 255, .22);
    --dx-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 24px 48px -30px rgba(0, 0, 0, .85);
    --dx-tip-bg: #F3F5FB;
    --dx-tip-ink: #0E1222;
    --dx-seg-track: rgba(255, 255, 255, .05);
    --dx-ring-track: rgba(255, 255, 255, .08);
    --dx-bone-a: rgba(255, 255, 255, .045);
    --dx-bone-b: rgba(255, 255, 255, .09);

    --dx-accent: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --dx-accent-ink: hsl(calc(246.89deg + var(--ci-accent-shift, 0deg)) 100% 82%);
    --dx-accent-soft: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24% / .16);

    --dx-pos: #22C55E;
    --dx-pos-ink: #4ADE80;
    --dx-pos-soft: rgba(34, 197, 94, .13);
    --dx-neg: #F87171;
    --dx-neg-ink: #FCA5A5;
    --dx-neg-soft: rgba(248, 113, 113, .13);
    --dx-caution: #FBBF24;
    --dx-caution-ink: #FCD34D;
    --dx-caution-soft: rgba(251, 191, 36, .12);
    --dx-neutral-soft: rgba(255, 255, 255, .06);

    --dx-blue: #60A5FA;      --dx-blue-ink: #93C5FD;     --dx-blue-soft: rgba(96, 165, 250, .14);
    --dx-indigo: #A5B4FC;    --dx-indigo-ink: #C7D2FE;   --dx-indigo-soft: rgba(165, 180, 252, .14);
    --dx-fuchsia: #E879F9;   --dx-fuchsia-ink: #F0ABFC;  --dx-fuchsia-soft: rgba(232, 121, 249, .13);
    --dx-green: #34D399;     --dx-green-ink: #6EE7B7;    --dx-green-soft: rgba(52, 211, 153, .13);
    --dx-rose: #F87171;      --dx-rose-ink: #FCA5A5;     --dx-rose-soft: rgba(248, 113, 113, .13);
    --dx-amber: #F2B557;     --dx-amber-ink: #F6C77E;    --dx-amber-soft: rgba(242, 181, 87, .13);
    --dx-teal: #2DD4BF;      --dx-teal-ink: #5EEAD4;     --dx-teal-soft: rgba(45, 212, 191, .13);
    --dx-you: #60A5FA;       --dx-you-soft: rgba(96, 165, 250, .13);
    --dx-partner: #FBBF24;   --dx-partner-ink: #FCD34D;  --dx-partner-soft: rgba(251, 191, 36, .12);

    --dx-cat-0: #7F70F0;
    --dx-cat-1: #169C86;
    --dx-cat-2: #D95926;
    --dx-cat-3: #3987E5;
    --dx-cat-4: #C98500;
    --dx-cat-5: #D55181;
    --dx-cat-other: #59607A;

    --dx-comp-checking: #3B82F6;
    --dx-comp-savings: #14B8A6;
    --dx-comp-cash: #93C5FD;
    --dx-comp-manual: #A78BFA;
    --dx-comp-debt: #F87171;

    --dx-mix-bills: #CC7F12;
    --dx-mix-subscriptions: #7A80F0;
    --dx-mix-installments: #EC4463;
    --dx-mix-income: #34D399;
    --dx-mix-other: #64748B;
}

/* The page's one atmospheric touch: a soft aurora behind the greeting and the hero. */
.dx::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -24px -40px auto;
    height: 560px;
    pointer-events: none;
    background:
        radial-gradient(640px 300px at 8% 10%, rgba(37, 99, 235, .10), transparent 70%),
        radial-gradient(560px 280px at 62% 0%, color-mix(in srgb, var(--dx-accent) 10%, transparent), transparent 70%);
}

[data-bs-theme="dark"] .dx::before {
    background:
        radial-gradient(640px 300px at 8% 10%, rgba(96, 165, 250, .13), transparent 70%),
        radial-gradient(560px 280px at 62% 0%, color-mix(in srgb, var(--dx-accent) 14%, transparent), transparent 70%);
}

/* Hue sets: a glyph chip, a state icon or a shimmer picks its area's hue with one class. */
.dx-hue-blue { --hue: var(--dx-blue); --hue-ink: var(--dx-blue-ink); --hue-soft: var(--dx-blue-soft); }
.dx-hue-indigo { --hue: var(--dx-indigo); --hue-ink: var(--dx-indigo-ink); --hue-soft: var(--dx-indigo-soft); }
.dx-hue-fuchsia { --hue: var(--dx-fuchsia); --hue-ink: var(--dx-fuchsia-ink); --hue-soft: var(--dx-fuchsia-soft); }
.dx-hue-green { --hue: var(--dx-green); --hue-ink: var(--dx-green-ink); --hue-soft: var(--dx-green-soft); }
.dx-hue-rose { --hue: var(--dx-rose); --hue-ink: var(--dx-rose-ink); --hue-soft: var(--dx-rose-soft); }
.dx-hue-amber { --hue: var(--dx-amber); --hue-ink: var(--dx-amber-ink); --hue-soft: var(--dx-amber-soft); }
.dx-hue-teal { --hue: var(--dx-teal); --hue-ink: var(--dx-teal-ink); --hue-soft: var(--dx-teal-soft); }
.dx-hue-accent { --hue: var(--dx-accent); --hue-ink: var(--dx-accent-ink); --hue-soft: var(--dx-accent-soft); }
.dx-hue-couple { --hue: var(--dx-you); --hue-ink: var(--dx-you); --hue-soft: var(--dx-you-soft); }

.dx-tone-positive { color: var(--dx-pos-ink); }
.dx-tone-negative, .dx-tone-critical { color: var(--dx-neg-ink); }
.dx-tone-caution { color: var(--dx-caution-ink); }
.dx-tone-text, .dx-tone-neutral, .dx-tone-muted { color: var(--dx-ink); }
.dx-tone-accent { color: var(--dx-accent-ink); }
.dx-muted { color: var(--dx-ink-3); }

/* ------------------------------------------------------------------ Header */
.dx-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    padding-top: 6px;
}

.dx-top-copy { min-width: 0; flex: 1 1 420px; }

.dx-hello {
    margin: 0;
    font: 700 clamp(25px, 2.5vw, 33px)/1.12 var(--dx-font);
    letter-spacing: -.025em;
    color: var(--dx-ink);
}

.dx-brief {
    margin: 6px 0 0;
    max-width: 68ch;
    font-size: 15px;
    line-height: 1.5;
    color: var(--dx-ink-2);
}

.dx-top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--dx-line);
    border-radius: 12px;
    background: var(--dx-panel-solid);
    color: var(--dx-ink);
    font: 600 13.5px/1 var(--dx-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.dx-btn:hover:not(:disabled) { border-color: var(--dx-line-strong); color: var(--dx-ink); }
.dx-btn:disabled { opacity: .55; cursor: default; }
.dx-btn i { font-size: 13px; color: var(--dx-ink-2); }
.dx-btn-sm { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.dx-btn-primary { background: var(--dx-accent); border-color: transparent; color: #FFFFFF; }
.dx-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--dx-accent) 88%, #000); border-color: transparent; color: #FFFFFF; }
.dx-btn-soft { background: var(--dx-accent-soft); border-color: transparent; color: var(--dx-accent-ink); }
.dx-btn-soft:hover:not(:disabled) { border-color: color-mix(in srgb, var(--dx-accent) 35%, transparent); color: var(--dx-accent-ink); }
[data-bs-theme="dark"] .dx-btn-primary { color: #0B0F19; }
[data-bs-theme="dark"] .dx-btn-primary:hover:not(:disabled) { color: #0B0F19; background: color-mix(in srgb, var(--dx-accent) 86%, #fff); }

.dx-icon-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--dx-line);
    border-radius: 10px;
    background: var(--dx-panel-solid);
    color: var(--dx-ink-2);
    cursor: pointer;
}

.dx-icon-btn:hover { color: var(--dx-ink); border-color: var(--dx-line-strong); }

.dx-spin { animation: dx-spin .9s linear infinite; }

.dx-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 13.5px;
}

.dx-notice.is-error { background: var(--dx-neg-soft); color: var(--dx-neg-ink); }
.dx-notice.is-caution { background: var(--dx-caution-soft); color: var(--dx-caution-ink); }

/* ------------------------------------------------------------------ Surfaces */
.dx-panel {
    position: relative;
    min-width: 0;
    background: var(--dx-panel);
    border: 1px solid var(--dx-line);
    border-radius: var(--dx-radius);
    box-shadow: var(--dx-shadow);
}

.dx-split { display: grid; grid-template-columns: minmax(0, 1fr); }
.dx-split > * + * { border-top: 1px solid var(--dx-line-soft); }

.dx-cell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 22px 24px;
}

.dx-stack { display: flex; flex-direction: column; min-width: 0; }
.dx-stack > * + * { border-top: 1px solid var(--dx-line-soft); }
.dx-stack > .dx-cell:last-child { flex: 1 1 auto; }

.dx-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.dx-chip {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--hue-soft);
    color: var(--hue-ink);
    font-size: 15px;
}

.dx-chip.dx-hue-couple {
    background: linear-gradient(135deg, var(--dx-you) 0%, var(--dx-partner) 100%);
    color: #FFFFFF;
}

.dx-head-text { flex: 1 1 auto; min-width: 0; }

.dx-title {
    margin: 0;
    font: 700 16px/1.3 var(--dx-font);
    letter-spacing: -.01em;
    color: var(--dx-ink);
}

.dx-caption {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--dx-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.dx-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--dx-accent-ink);
    font: 600 13px/1.2 var(--dx-font);
    text-decoration: none;
    white-space: nowrap;
}

.dx-link i { font-size: 9.5px; transition: transform .15s ease; }
.dx-link:hover { color: var(--dx-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.dx-link:hover i { transform: translateX(2px); }

.dx-cell-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--dx-line-soft);
}

/* Segmented controls: the windows and views a cell offers. */
.dx-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: var(--dx-seg-track);
    border: 1px solid var(--dx-line-soft);
}

.dx-seg-btn {
    padding: 5px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dx-ink-2);
    font: 600 12.5px/1.2 var(--dx-font);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.dx-seg-btn:hover:not(:disabled) { color: var(--dx-ink); }
.dx-seg-btn:disabled { cursor: default; opacity: .6; }
.dx-seg-btn.is-on {
    background: var(--dx-panel-solid);
    color: var(--dx-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--dx-line);
}

[data-bs-theme="dark"] .dx-seg-btn.is-on { background: rgba(255, 255, 255, .1); box-shadow: none; }

/* Figures, pills, stat tiles, keys. */
.dx-figure-sm {
    font: 600 26px/1.15 var(--dx-display);
    letter-spacing: -.02em;
    color: var(--dx-ink);
}

.dx-figure-sm small { font: 600 13px var(--dx-font); letter-spacing: 0; color: var(--dx-ink-3); }

.dx-subtle { margin: -8px 0 0; font-size: 12.5px; color: var(--dx-ink-3); }

.dx-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.dx-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--dx-neutral-soft);
    color: var(--dx-ink-2);
    font: 600 12px/1.45 var(--dx-font);
    white-space: nowrap;
}

.dx-pill i { font-size: 10.5px; }
.dx-pill.is-positive { background: var(--dx-pos-soft); color: var(--dx-pos-ink); }
.dx-pill.is-negative { background: var(--dx-neg-soft); color: var(--dx-neg-ink); }
.dx-pill.is-caution { background: var(--dx-caution-soft); color: var(--dx-caution-ink); }
.dx-pill.is-partner { background: var(--dx-partner-soft); color: var(--dx-partner-ink); }
.dx-pill.is-early { background: var(--dx-blue-soft); color: var(--dx-blue-ink); }
.dx-pill.is-flow-income { background: var(--dx-pos-soft); color: var(--dx-pos-ink); }
.dx-pill.is-flow-transfer { background: var(--dx-blue-soft); color: var(--dx-blue-ink); }
.dx-pill.is-flow-credit { background: var(--dx-teal-soft); color: var(--dx-teal-ink); }

.dx-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.dx-stat {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 13px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
}

.dx-stat dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 12px/1.3 var(--dx-font);
    color: var(--dx-ink-3);
    white-space: nowrap;
}

.dx-stat dd {
    margin: 4px 0 0;
    font: 600 17px/1.2 var(--dx-display);
    letter-spacing: -.01em;
    color: var(--dx-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-stat dd .dx-unit { font: 600 12px var(--dx-font); color: var(--dx-ink-3); margin-left: 2px; }

.dx-stat small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--dx-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-key {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--dx-ink-3);
}

.dx-key.is-positive { background: var(--dx-pos); }
.dx-key.is-negative { background: var(--dx-neg); }
.dx-key.is-caution, .dx-key.is-bills { background: var(--dx-amber); }
.dx-key.is-checking { background: var(--dx-comp-checking); }
.dx-key.is-savings { background: var(--dx-comp-savings); }
.dx-key.is-cash { background: var(--dx-comp-cash); }
.dx-key.is-manual { background: var(--dx-comp-manual); }
.dx-key.is-debt { background: var(--dx-comp-debt); }

.dx-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; flex: 0 0 auto; }

/* Single-fill bars fade into their track over the last stretch (the site's blended-bar language, blend-bars.css). */
.dx-bline-fill, .dx-balance-bar, .dx-egg-fill, .dx-meter-fill {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - min(var(--ci-blend, 32px), 50%)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - min(var(--ci-blend, 32px), 50%)), transparent 100%);
}

.dx-bline-fill[style*="width:100%"], .dx-balance-bar[style*="width:100%"], .dx-egg-fill[style*="width:100%"], .dx-meter-fill[style*="width:100%"] {
    -webkit-mask-image: none;
    mask-image: none;
}

/* States and shimmer. */
.dx-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 15px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
}

.dx-state-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--hue-soft);
    color: var(--hue-ink);
}

.dx-state-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.dx-state-text strong { font: 700 14px/1.3 var(--dx-font); color: var(--dx-ink); }
.dx-state-text span { font-size: 13px; line-height: 1.45; color: var(--dx-ink-2); }
.dx-state-text .dx-btn { margin-top: 6px; }

.dx-bones { display: flex; flex-direction: column; gap: 12px; }

.dx-bone {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--dx-bone-a) 0%, var(--dx-bone-b) 50%, var(--dx-bone-a) 100%);
    background-size: 200% 100%;
    animation: dx-shimmer 1.5s ease-in-out infinite;
}

.dx-bones.dx-hue-blue, .dx-bones.dx-hue-indigo, .dx-bones.dx-hue-fuchsia, .dx-bones.dx-hue-green,
.dx-bones.dx-hue-rose, .dx-bones.dx-hue-amber, .dx-bones.dx-hue-teal {
    --dx-bone-a: color-mix(in srgb, var(--hue) 7%, transparent);
    --dx-bone-b: color-mix(in srgb, var(--hue) 15%, transparent);
}

.dx-bone-title { width: 38%; height: 12px; }
.dx-bone-figure { width: 46%; height: 26px; border-radius: 10px; }
.dx-bone-plot { width: 100%; border-radius: 14px; }
.dx-bone-row { display: flex; align-items: center; gap: 10px; }
.dx-bone-dot { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.dx-bone-line { height: 11px; }
.dx-bone-amount { width: 56px; height: 11px; margin-left: auto; }
.dx-bone-hero { width: 44%; height: 50px; border-radius: 14px; }
.dx-bone-strip { width: 100%; height: 82px; border-radius: 14px; }

.is-refreshing { opacity: .55; transition: opacity .2s ease; }

/* The shared hover readout: a hairline crosshair that snaps to the nearest spot, its dot, and the value over the date. */
.dx-hits { position: absolute; inset: 0; }
.dx-hit { position: absolute; top: 0; bottom: 0; }

.dx-hit-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--dx-at, 50%);
    width: 1px;
    background: var(--dx-ink-3);
    opacity: 0;
    transform: translateX(-.5px);
    pointer-events: none;
}

.dx-hit-dot {
    position: absolute;
    left: var(--dx-at, 50%);
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: var(--dx-blue);
    box-shadow: 0 0 0 2.5px var(--dx-panel-solid);
    opacity: 0;
    pointer-events: none;
}

.dx-hit-dot.is-negative { background: var(--dx-neg); }
.dx-hit-dot.is-positive { background: var(--dx-pos); }
.dx-plot-hero .dx-hit-dot.is-positive { background: var(--dx-blue); }

.dx-tip {
    position: absolute;
    z-index: 3;
    top: 6px;
    left: var(--dx-at, 50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 260px;
    padding: 7px 11px;
    border-radius: 11px;
    background: var(--dx-tip-bg);
    color: var(--dx-tip-ink);
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .45);
    transform: translateX(14px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .12s ease;
}

.dx-tip.is-left { transform: translateX(calc(-100% - 14px)); }
.dx-tip b { font: 700 14px/1.3 var(--dx-display); }
.dx-tip small { font: 500 11.5px/1.35 var(--dx-font); opacity: .75; }
.dx-tip em { font: 500 11.5px/1.35 var(--dx-font); font-style: normal; opacity: .9; white-space: normal; min-width: 170px; }

.dx-hit:hover .dx-hit-rule,
.dx-hit:hover .dx-hit-dot,
.dx-hit:hover .dx-tip { opacity: 1; }

/* ------------------------------------------------------------------ Hero */
.dx-heropanel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-color: #D9E4F8;
    background:
        radial-gradient(820px 380px at -6% -24%, rgba(37, 99, 235, .13), transparent 62%),
        radial-gradient(620px 340px at 58% -34%, color-mix(in srgb, var(--dx-accent) 11%, transparent), transparent 64%),
        linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
}

[data-bs-theme="dark"] .dx-heropanel {
    border-color: rgba(147, 178, 255, .14);
    background:
        radial-gradient(820px 380px at -6% -24%, rgba(96, 165, 250, .19), transparent 62%),
        radial-gradient(620px 340px at 58% -34%, color-mix(in srgb, var(--dx-accent) 20%, transparent), transparent 66%),
        linear-gradient(180deg, #121B30 0%, #0E1322 100%);
}

.dx-heromain {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 24px 26px 22px;
}

.dx-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.dx-hero-kicker { display: flex; align-items: center; gap: 10px; min-width: 0; }

.dx-hero-label {
    margin: 0;
    font: 700 15px/1.3 var(--dx-font);
    color: var(--dx-ink-2);
    cursor: help;
}

.dx-figure-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    min-height: 56px;
}

.dx-figure {
    font: 600 clamp(36px, 4.4vw, 56px)/1.02 var(--dx-display);
    letter-spacing: -.03em;
    color: var(--dx-ink);
    white-space: nowrap;
}

.dx-delta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font: 600 13px/1.2 var(--dx-font);
    white-space: nowrap;
}

.dx-delta b { font-weight: 700; }
.dx-delta span { font-weight: 500; opacity: .85; }
.dx-delta.is-positive { background: var(--dx-pos-soft); color: var(--dx-pos-ink); }
.dx-delta.is-negative { background: var(--dx-neg-soft); color: var(--dx-neg-ink); }
.dx-delta.is-neutral { background: var(--dx-neutral-soft); color: var(--dx-ink-2); }

.dx-plot { position: relative; }
/* Bleeds to the cell's left edge; stops short on the right so today's dot sits whole beside Until payday. */
.dx-plot-hero { height: clamp(170px, 21cqi, 250px); margin: 4px -12px 0 -26px; }
.dx-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

.dx-area { stroke: none; }

.dx-line {
    fill: none;
    stroke: var(--dx-blue);
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.dx-glow {
    fill: none;
    stroke: var(--dx-blue);
    stroke-width: 9;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: .14;
    vector-effect: non-scaling-stroke;
}

.dx-line.is-negative, .dx-glow.is-negative { stroke: var(--dx-neg); }
.dx-line.is-flow { stroke: var(--dx-blue); }

.dx-zero {
    stroke: var(--dx-line-strong);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.dx-zero-label {
    position: absolute;
    right: 10px;
    transform: translateY(-120%);
    font: 600 11px var(--dx-font);
    color: var(--dx-ink-3);
    pointer-events: none;
}

.dx-stop-cash-0 { stop-color: var(--dx-blue); stop-opacity: .30; }
.dx-stop-cash-1 { stop-color: var(--dx-blue); stop-opacity: 0; }
.dx-stop-neg-0 { stop-color: var(--dx-neg); stop-opacity: 0; }
.dx-stop-neg-1 { stop-color: var(--dx-neg); stop-opacity: .24; }
.dx-stop-flow-0 { stop-color: var(--dx-blue); stop-opacity: .24; }
.dx-stop-flow-1 { stop-color: var(--dx-blue); stop-opacity: .02; }
.dx-stop-inv-0 { stop-color: var(--dx-green); stop-opacity: .30; }
.dx-stop-inv-1 { stop-color: var(--dx-green); stop-opacity: 0; }
[data-bs-theme="dark"] .dx-stop-cash-0 { stop-opacity: .38; }
[data-bs-theme="dark"] .dx-glow { opacity: .22; }

.dx-enddot {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--dx-blue);
    box-shadow: 0 0 0 3px var(--dx-panel-solid), 0 0 0 8px color-mix(in srgb, var(--dx-blue) 20%, transparent);
    pointer-events: none;
    animation: dx-pulse 2.4s ease-out 1.2s 2 both;
}

.dx-enddot.is-negative { background: var(--dx-neg); box-shadow: 0 0 0 3px var(--dx-panel-solid), 0 0 0 8px color-mix(in srgb, var(--dx-neg) 20%, transparent); }

.dx-plot-wave {
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(90deg, var(--dx-bone-a), var(--dx-bone-b), var(--dx-bone-a));
    background-size: 200% 100%;
    animation: dx-shimmer 1.6s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
    mask-image: linear-gradient(180deg, transparent, #000 70%);
    border-radius: 0 0 4px 4px;
}

.dx-plot-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    font-size: 13.5px;
    color: var(--dx-ink-3);
}

/* Spending: a column per bucket (day, week or month, as the API picks for the range), the running bucket in the
   accent, buckets cut short muted with a dashed outline, the average of complete buckets as a rule. */
.dx-cols {
    position: absolute;
    inset: 12px 26px 0;
    display: flex;
    align-items: stretch;
    gap: clamp(6px, 1.4cqi, 16px);
    padding-bottom: 26px;
}

.dx-cols-avg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    height: calc(100% - 26px);
    pointer-events: none;
}

.dx-cols-avg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--dx-avg);
    border-top: 1px solid color-mix(in srgb, var(--dx-indigo) 45%, transparent);
}

.dx-cols-avg span {
    position: absolute;
    right: 0;
    bottom: var(--dx-avg);
    padding: 0 0 3px;
    font: 600 10.5px var(--dx-font);
    color: var(--dx-indigo-ink);
}

.dx-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dx-col-track { flex: 1 1 auto; width: 100%; max-width: 46px; display: flex; align-items: flex-end; }

.dx-col-bar {
    width: 100%;
    min-height: 3px;
    border-radius: 9px 9px 4px 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dx-indigo) 70%, transparent), color-mix(in srgb, var(--dx-indigo) 28%, transparent));
    transform-origin: bottom;
    animation: dx-grow .8s cubic-bezier(.2, .8, .2, 1) both;
    transition: filter .15s ease;
}

.dx-col.is-peak .dx-col-bar { background: linear-gradient(180deg, var(--dx-indigo), color-mix(in srgb, var(--dx-indigo) 45%, transparent)); }
.dx-col.is-current .dx-col-bar { background: linear-gradient(180deg, var(--dx-accent), color-mix(in srgb, var(--dx-accent) 45%, transparent)); }

.dx-col-label {
    position: absolute;
    bottom: -22px;
    font: 600 11.5px var(--dx-font);
    color: var(--dx-ink-3);
    white-space: nowrap;
}

.dx-col.is-current .dx-col-label { color: var(--dx-accent-ink); }
.dx-col.is-partial .dx-col-bar {
    opacity: .58;
    outline: 1px dashed color-mix(in srgb, var(--dx-indigo) 55%, transparent);
    outline-offset: -1px;
}
.dx-col.is-current.is-partial .dx-col-bar { outline-color: color-mix(in srgb, var(--dx-accent) 70%, transparent); }

/* Dense axes keep every other tick on narrow layouts (the readout still names every bucket). */
@container dx (max-width: 640px) {
    .dx-col-label.is-minor { display: none; }
}
.dx-col .dx-tip { top: 0; left: 50%; transform: translate(-50%, -105%); }
.dx-col:hover .dx-tip { opacity: 1; }
.dx-col:hover .dx-col-bar { filter: brightness(1.08) saturate(1.1); }

.dx-hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.dx-plot-hero + .dx-hero-foot { margin-top: 28px; }
.is-cash .dx-plot-hero + .dx-hero-foot { margin-top: 6px; }

.dx-ranges { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.dx-range {
    min-width: 40px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--dx-ink-2);
    font: 600 12.5px/1.2 var(--dx-font);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dx-range:hover:not(:disabled) { background: var(--dx-neutral-soft); color: var(--dx-ink); }
.dx-range.is-on { background: var(--dx-blue-soft); border-color: color-mix(in srgb, var(--dx-blue) 22%, transparent); color: var(--dx-blue-ink); }
.is-spending .dx-range.is-on { background: var(--dx-indigo-soft); border-color: color-mix(in srgb, var(--dx-indigo) 22%, transparent); color: var(--dx-indigo-ink); }
.dx-range:disabled { cursor: progress; }

.dx-hero-note { font-size: 12.5px; color: var(--dx-ink-3); }

/* What the cash net worth is made of: one blended bar on one scale, the legend under it. */
.dx-comp {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--dx-line-soft);
}

.dx-comp-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--dx-ring-track);
}

.dx-comp-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--dx-ink-2);
}

.dx-comp-legend li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dx-comp-legend b { color: var(--dx-ink); font-weight: 700; }
.dx-comp-legend .is-debt { margin-left: auto; }

.dx-monthcmp {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--dx-line-soft);
}

.dx-monthcmp div { display: flex; flex-direction: column; gap: 2px; }
.dx-monthcmp span { font-size: 12px; color: var(--dx-ink-3); }
.dx-monthcmp b { font: 600 17px var(--dx-display); color: var(--dx-ink); }
.dx-monthcmp .is-negative b { color: var(--dx-neg-ink); }
.dx-monthcmp .is-positive b { color: var(--dx-pos-ink); }

/* ------------------------------------------------------------------ Until payday */
.dx-payday {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    margin: 0 12px 12px;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #E4EAF6;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

[data-bs-theme="dark"] .dx-payday {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .07);
}

.dx-payday-head { display: flex; align-items: center; gap: 10px; }
.dx-payday-title { margin: 0; font: 700 15px/1.3 var(--dx-font); color: var(--dx-ink); }

.dx-tag {
    margin-left: auto;
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--dx-amber-soft);
    color: var(--dx-amber-ink);
    font: 700 12px/1.2 var(--dx-font);
    white-space: nowrap;
}

.dx-count-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dx-count { font: 600 46px/1 var(--dx-display); letter-spacing: -.035em; color: var(--dx-ink); }
.dx-count-sm { font-size: 22px; letter-spacing: -.01em; }
.dx-count-unit { font: 600 16px var(--dx-font); color: var(--dx-ink-2); }

.dx-expect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    color: var(--dx-ink-2);
}

.dx-expect i { color: var(--dx-pos); }
.dx-expect b { color: var(--dx-pos-ink); font-weight: 700; }

/* The runway: today on the left, payday on the right, each bill placed on its day. */
.dx-runway { position: relative; height: 80px; margin: 2px 16px 0 8px; }

.dx-runway-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--dx-amber) 35%, transparent), color-mix(in srgb, var(--dx-pos) 70%, transparent));
}

.dx-runway-tick { position: absolute; top: 49px; width: 1px; height: 10px; background: var(--dx-line-strong); opacity: .7; }

.dx-runway-node { position: absolute; display: grid; place-items: center; border-radius: 50%; }

.dx-runway-node.is-today {
    left: -7px;
    top: 47px;
    width: 14px;
    height: 14px;
    background: var(--dx-panel-solid);
    border: 3px solid var(--dx-ink-2);
}

.dx-runway-node.is-payday {
    right: -15px;
    top: 39px;
    width: 30px;
    height: 30px;
    background: var(--dx-pos);
    color: #FFFFFF;
    font-size: 13px;
    box-shadow: 0 0 0 4px var(--dx-pos-soft);
}

.dx-runway-node.is-payday.is-unknown { background: var(--dx-ink-3); box-shadow: 0 0 0 4px var(--dx-neutral-soft); }
[data-bs-theme="dark"] .dx-runway-node.is-payday { color: #0B0F19; }

.dx-runway-stop {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    transform: translateX(-50%);
    cursor: pointer;
}

.dx-runway-stop:hover .dx-bubble, .dx-runway-stop:focus-visible .dx-bubble { transform: translateY(-2px); }
.dx-bubbles { display: flex; }

.dx-bubble {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: -10px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--dx-panel-solid);
    background: var(--dx-bubble, var(--dx-ink-3));
    color: #FFFFFF;
    font: 700 12px var(--dx-font);
    box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .5);
    transition: transform .15s ease;
}

.dx-bubble:first-child { margin-left: 0; }
.dx-bubble img { width: 100%; height: 100%; object-fit: cover; background: #FFFFFF; }
.dx-bubble.is-more { background: var(--dx-panel-solid); color: var(--dx-ink-2); font-size: 10.5px; border-color: var(--dx-line); }

.dx-runway-stem { width: 2px; height: 20px; margin-top: 1px; background: color-mix(in srgb, var(--dx-amber) 60%, transparent); }
.dx-runway-stop.is-overdue .dx-runway-stem { background: var(--dx-neg); }

.dx-runway-amount {
    margin-top: 9px;
    font: 700 11px var(--dx-font);
    color: var(--dx-ink-2);
    white-space: nowrap;
}

.dx-runway.is-dense .dx-runway-amount { display: none; }

.dx-runway-axis {
    display: flex;
    justify-content: space-between;
    margin: -6px 0 0;
    font: 600 11.5px var(--dx-font);
    color: var(--dx-ink-3);
}

.dx-safe {
    --safe: var(--dx-pos);
    --safe-ink: var(--dx-pos-ink);
    --safe-soft: var(--dx-pos-soft);
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--safe-soft);
}

.dx-safe.is-caution { --safe: var(--dx-caution); --safe-ink: var(--dx-caution-ink); --safe-soft: var(--dx-caution-soft); }
.dx-safe.is-tight { --safe: #EA580C; --safe-ink: #C2410C; --safe-soft: #FFEDDF; }
.dx-safe.is-danger { --safe: var(--dx-neg); --safe-ink: var(--dx-neg-ink); --safe-soft: var(--dx-neg-soft); }
[data-bs-theme="dark"] .dx-safe.is-tight { --safe: #FB923C; --safe-ink: #FDBA74; --safe-soft: rgba(251, 146, 60, .13); }

.dx-safe-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dx-safe-label { font: 700 13px var(--dx-font); color: var(--dx-ink); }
.dx-safe-value { font: 600 22px/1.1 var(--dx-display); letter-spacing: -.02em; color: var(--safe-ink); }

.dx-safe-bar {
    display: flex;
    height: 8px;
    margin: 9px 0 7px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--dx-ink) 8%, transparent);
}

.dx-safe-bar .is-bills { --dx-seg: var(--dx-amber); }
.dx-safe-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--dx-ink-2); }

.dx-payday-clear {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dx-ink-2);
}

.dx-payday-clear i { color: var(--dx-pos); }
.dx-payday-clear.is-muted i { color: var(--dx-ink-3); }

.dx-bills, .dx-events, .dx-lines, .dx-balances, .dx-legend, .dx-tx-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dx-bill, .dx-event, .dx-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    margin: 0 -8px;
    width: calc(100% + 16px);
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dx-bill:hover, .dx-event:hover:not(:disabled), .dx-row:hover:not(:disabled) { background: var(--dx-inset); }
.dx-event:disabled, .dx-row:disabled { cursor: default; }

.dx-bill-text, .dx-event-text, .dx-row-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dx-bill-name, .dx-event-name, .dx-row-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font: 600 13.5px/1.3 var(--dx-font);
    color: var(--dx-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-bill-meta, .dx-event-meta, .dx-row-meta {
    font-size: 12px;
    line-height: 1.35;
    color: var(--dx-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dx-bill-amount, .dx-event-amount {
    flex: 0 0 auto;
    font: 600 13.5px var(--dx-font);
    font-variant-numeric: tabular-nums;
    color: var(--dx-ink);
}

.dx-event.is-income .dx-event-amount { color: var(--dx-pos-ink); }

.dx-more {
    align-self: flex-start;
    margin-top: -6px;
    font: 600 12.5px var(--dx-font);
    color: var(--dx-accent-ink);
    text-decoration: none;
}

.dx-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Get started */
.dx-onboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-color: color-mix(in srgb, var(--dx-accent) 22%, var(--dx-line));
    background:
        radial-gradient(560px 220px at 0% 0%, color-mix(in srgb, var(--dx-accent) 13%, transparent), transparent 70%),
        var(--dx-panel);
}

.dx-onboard.is-complete { border-color: color-mix(in srgb, var(--dx-pos) 30%, var(--dx-line)); }

.dx-onboard-intro { display: flex; align-items: center; gap: 14px; }

.dx-onboard-ring { position: relative; flex: 0 0 auto; width: 50px; height: 50px; }
.dx-onboard-ring svg { width: 100%; height: 100%; display: block; }
.dx-onboard-ring .dx-ring-track { fill: none; stroke: var(--dx-ring-track); stroke-width: 5; }
.dx-onboard-ring .dx-ring-fill { fill: none; stroke: var(--dx-accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.dx-onboard.is-complete .dx-onboard-ring .dx-ring-fill { stroke: var(--dx-pos); }

.dx-onboard-ring span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 12.5px var(--dx-font);
    color: var(--dx-ink);
}

.dx-onboard-copy { flex: 1 1 auto; min-width: 0; }
.dx-onboard-copy h2 { margin: 0; font: 700 17px/1.3 var(--dx-font); letter-spacing: -.01em; color: var(--dx-ink); }
.dx-onboard-copy p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--dx-ink-2); }

.dx-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dx-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px 14px 14px;
    border-radius: 16px;
    background: var(--dx-panel-solid);
    border: 1px solid var(--dx-line);
    transition: background-color .2s ease, border-color .2s ease;
}

[data-bs-theme="dark"] .dx-step { background: rgba(255, 255, 255, .03); }

.dx-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1.5px solid var(--dx-line-strong);
    border-radius: 8px;
    background: transparent;
    color: transparent;
    font-size: 11px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dx-check:hover:not(:disabled) { border-color: var(--dx-pos); color: var(--dx-pos); }
.dx-check:disabled { cursor: default; }

.dx-step-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--dx-accent-soft);
    color: var(--dx-accent-ink);
    font-size: 16px;
}

.dx-step-body h3 { margin: 1px 30px 4px 0; font: 700 14.5px/1.3 var(--dx-font); color: var(--dx-ink); }
.dx-step-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--dx-ink-2); }

.dx-step-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 12.5px var(--dx-font);
    color: var(--dx-pos-ink);
}

.dx-step-state.is-marked { color: var(--dx-ink-3); font-weight: 600; }

.dx-step.is-done { background: transparent; border-style: dashed; }
.dx-step.is-done .dx-check { background: var(--dx-pos); border-color: var(--dx-pos); color: #FFFFFF; }
.dx-step.is-done .dx-step-icon { background: var(--dx-pos-soft); color: var(--dx-pos-ink); }
.dx-step.is-done h3 { color: var(--dx-ink-2); }

/* ------------------------------------------------------------------ Smart Signals (the shared rail, set into the canvas) */
.dx .dx-signals .ss-section {
    padding: 20px 22px 18px;
    border-radius: var(--dx-radius);
    box-shadow: var(--dx-shadow);
}

/* ------------------------------------------------------------------ Cash flow ahead */
.dx-flow-figs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
}

.dx-big { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-big-value { font: 600 32px/1.1 var(--dx-display); letter-spacing: -.025em; color: var(--dx-ink); }
.dx-big-value.dx-tone-text { color: var(--dx-ink); }
.dx-big-caption { font-size: 13px; color: var(--dx-ink-2); }

.dx-flow-figs .dx-stats { flex: 1 1 360px; max-width: 520px; }

.dx-meter { display: flex; flex-direction: column; gap: 6px; }
.dx-meter-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--dx-ink-3); }
.dx-meter-head b { font-weight: 700; }
.dx-meter-track { height: 6px; border-radius: 999px; background: var(--dx-ring-track); overflow: hidden; }
.dx-meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--dx-pos); }
.dx-fill-caution { background: var(--dx-caution); }
.dx-fill-critical, .dx-fill-negative { background: var(--dx-neg); }
.dx-fill-muted, .dx-fill-neutral { background: var(--dx-ink-3); }

.dx-plot-flow {
    height: 190px;
    margin: 4px 0 0;
    border-radius: 14px;
    background:
        linear-gradient(var(--dx-line-soft), var(--dx-line-soft)) 0 25% / 100% 1px no-repeat,
        linear-gradient(var(--dx-line-soft), var(--dx-line-soft)) 0 50% / 100% 1px no-repeat,
        linear-gradient(var(--dx-line-soft), var(--dx-line-soft)) 0 75% / 100% 1px no-repeat;
}

.dx-mark {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px var(--dx-panel-solid);
    pointer-events: none;
}

.dx-mark.is-payday { background: var(--dx-pos); }
.dx-mark.is-low { background: var(--dx-caution); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 4px; transform: rotate(45deg); }

.dx-axis {
    display: flex;
    justify-content: space-between;
    margin-top: -6px;
    font: 600 11.5px var(--dx-font);
    color: var(--dx-ink-3);
}

.dx-legend-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--dx-ink-2);
}

.dx-legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.dx-legend-inline .dx-muted { margin-left: auto; }
.dx-mark-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dx-mark-key.is-payday { background: var(--dx-pos); }
.dx-mark-key.is-low { background: var(--dx-caution); border-radius: 2px; transform: rotate(45deg); }

.dx-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 40px;
    border-radius: 10px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
    line-height: 1;
}

.dx-date small { font: 700 9.5px var(--dx-font); letter-spacing: .04em; color: var(--dx-ink-3); }
.dx-date b { margin-top: 3px; font: 700 15px var(--dx-display); color: var(--dx-ink); }
.dx-date.is-today { background: var(--dx-amber-soft); border-color: transparent; }
.dx-date.is-today small, .dx-date.is-today b { color: var(--dx-amber-ink); }

.dx-events { gap: 2px; }

/* ------------------------------------------------------------------ This month: spending */
.dx-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-radius: 15px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
}

.dx-kpi { min-width: 0; padding: 11px 14px; }
.dx-kpi + .dx-kpi { border-left: 1px solid var(--dx-inset-line); }
.dx-kpi dt { font: 600 12px var(--dx-font); color: var(--dx-ink-3); }
.dx-kpi dd { margin: 4px 0 0; font: 600 18px/1.2 var(--dx-display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dx-spend-body { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }

.dx-donut-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.dx-donut { position: relative; width: min(100%, 196px); aspect-ratio: 1; margin: 0 auto; }
.dx-donut svg { width: 100%; height: 100%; display: block; overflow: visible; }

.dx-arc {
    transform-origin: 60px 60px;
    transition: opacity .18s ease, transform .18s ease;
    animation: dx-arc-in .9s cubic-bezier(.2, .8, .2, 1) both;
}

.dx-arc:hover { transform: scale(1.035); }
.dx-arc.dx-cat-0 { fill: var(--dx-cat-0); }
.dx-arc.dx-cat-1 { fill: var(--dx-cat-1); }
.dx-arc.dx-cat-2 { fill: var(--dx-cat-2); }
.dx-arc.dx-cat-3 { fill: var(--dx-cat-3); }
.dx-arc.dx-cat-4 { fill: var(--dx-cat-4); }
.dx-arc.dx-cat-5 { fill: var(--dx-cat-5); }
.dx-arc.dx-cat-other { fill: var(--dx-cat-other); }

.dx-donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}

.dx-donut-center b { font: 600 21px/1.1 var(--dx-display); letter-spacing: -.02em; color: var(--dx-ink); }
.dx-donut-center span { margin-top: 2px; font-size: 12px; color: var(--dx-ink-3); }

.dx-legend { gap: 2px; min-width: 0; }

.dx-legend-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 6px 8px;
    border-radius: 11px;
    transition: background-color .15s ease, opacity .15s ease;
}

.dx-swatch {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #FFFFFF;
    font-size: 12px;
}

.dx-swatch.dx-cat-0 { background: var(--dx-cat-0); }
.dx-swatch.dx-cat-1 { background: var(--dx-cat-1); }
.dx-swatch.dx-cat-2 { background: var(--dx-cat-2); }
.dx-swatch.dx-cat-3 { background: var(--dx-cat-3); }
.dx-swatch.dx-cat-4 { background: var(--dx-cat-4); }
.dx-swatch.dx-cat-5 { background: var(--dx-cat-5); }
.dx-swatch.dx-cat-other { background: var(--dx-cat-other); }

.dx-legend-text { display: flex; flex-direction: column; min-width: 0; }
.dx-legend-name { font: 600 13.5px/1.3 var(--dx-font); color: var(--dx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-legend-caption { font-size: 11.5px; color: var(--dx-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-legend-values { display: flex; flex-direction: column; align-items: flex-end; }
.dx-legend-values b { font: 600 13.5px var(--dx-font); font-variant-numeric: tabular-nums; color: var(--dx-ink); }
.dx-legend-values small { font: 600 11.5px var(--dx-font); color: var(--dx-ink-3); }

/* The ring and the list light each other up. */
.dx-donut-wrap:has(.dx-legend-row:hover) .dx-arc { opacity: .28; }
.dx-donut-wrap:has(.dx-legend-row[data-i="0"]:hover) .dx-arc[data-i="0"],
.dx-donut-wrap:has(.dx-legend-row[data-i="1"]:hover) .dx-arc[data-i="1"],
.dx-donut-wrap:has(.dx-legend-row[data-i="2"]:hover) .dx-arc[data-i="2"],
.dx-donut-wrap:has(.dx-legend-row[data-i="3"]:hover) .dx-arc[data-i="3"],
.dx-donut-wrap:has(.dx-legend-row[data-i="4"]:hover) .dx-arc[data-i="4"],
.dx-donut-wrap:has(.dx-legend-row[data-i="5"]:hover) .dx-arc[data-i="5"],
.dx-donut-wrap:has(.dx-legend-row[data-i="99"]:hover) .dx-arc[data-i="99"] { opacity: 1; transform: scale(1.035); }
.dx-donut-wrap:has(.dx-arc:hover) .dx-legend-row { opacity: .5; }
.dx-legend-row:hover,
.dx-donut-wrap:has(.dx-arc[data-i="0"]:hover) .dx-legend-row[data-i="0"],
.dx-donut-wrap:has(.dx-arc[data-i="1"]:hover) .dx-legend-row[data-i="1"],
.dx-donut-wrap:has(.dx-arc[data-i="2"]:hover) .dx-legend-row[data-i="2"],
.dx-donut-wrap:has(.dx-arc[data-i="3"]:hover) .dx-legend-row[data-i="3"],
.dx-donut-wrap:has(.dx-arc[data-i="4"]:hover) .dx-legend-row[data-i="4"],
.dx-donut-wrap:has(.dx-arc[data-i="5"]:hover) .dx-legend-row[data-i="5"],
.dx-donut-wrap:has(.dx-arc[data-i="99"]:hover) .dx-legend-row[data-i="99"] { opacity: 1; background: var(--dx-inset); }

.dx-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--dx-ink-2);
}

.dx-lead i { color: var(--dx-amber); }

/* ------------------------------------------------------------------ Rings (budget, debt, retirement) */
.dx-ring { position: relative; flex: 0 0 auto; }
.dx-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dx-ring-lg { width: 118px; height: 118px; }
.dx-ring-sm { width: 70px; height: 70px; }
.dx-ring-track { fill: none; stroke: var(--dx-ring-track); }
.dx-ring-fill { fill: none; stroke: var(--ring, var(--dx-blue)); stroke-linecap: round; transition: stroke-dasharray .9s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--ring, var(--dx-blue)) 30%, transparent)); }
.dx-ring-lg circle { stroke-width: 11; }
.dx-ring-sm circle { stroke-width: 7; }
.dx-ring.is-positive { --ring: var(--dx-pos); }
.dx-ring.is-caution { --ring: var(--dx-caution); }
.dx-ring.is-negative { --ring: var(--dx-neg); }
.dx-ring.is-neutral { --ring: var(--dx-teal); }
.dx-ring.is-demo { --ring: color-mix(in srgb, var(--dx-teal) 45%, transparent); }
.dx-ring-pace { fill: var(--dx-panel-solid); stroke: var(--dx-ink); stroke-width: 2.5 !important; }

.dx-ring-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.dx-ring-center b { font: 600 28px/1 var(--dx-display); letter-spacing: -.02em; color: var(--dx-ink); }
.dx-ring-center small { margin-top: 4px; font: 600 11px/1.2 var(--dx-font); color: var(--dx-ink-3); max-width: 82px; }
.dx-ring-center i { font-size: 26px; color: var(--dx-teal); }
.dx-ring-sm .dx-ring-center b { font-size: 15px; }
.dx-ring-sm .dx-ring-center small { margin-top: 1px; font-size: 10px; }

/* ------------------------------------------------------------------ Budget */
.dx-budget-top { display: flex; align-items: center; gap: 18px; }
.dx-budget-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dx-budget-headline { font-size: 14.5px; color: var(--dx-ink-2); }
.dx-budget-headline b { display: block; font: 600 26px/1.1 var(--dx-display); letter-spacing: -.02em; color: var(--dx-ink); }
.dx-budget-meta { font-size: 12.5px; color: var(--dx-ink-3); }

.dx-lines { gap: 4px; }

.dx-bline-link {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 -8px;
    padding: 8px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}

.dx-bline-link:hover { background: var(--dx-inset); color: inherit; }

.dx-bline-head { display: flex; align-items: center; gap: 9px; min-width: 0; }

.dx-bline-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--dx-line-color, var(--dx-fuchsia)) 15%, transparent);
    color: var(--dx-line-color, var(--dx-fuchsia));
    font-size: 11.5px;
}

.dx-bline-name { flex: 1 1 auto; min-width: 0; font: 600 13.5px var(--dx-font); color: var(--dx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-bline-status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font: 600 11.5px var(--dx-font); color: var(--dx-ink-3); white-space: nowrap; }
.dx-bline-amount { flex: 0 0 auto; font: 600 13px var(--dx-font); font-variant-numeric: tabular-nums; color: var(--dx-ink); white-space: nowrap; }
.dx-bline-amount small { font-weight: 500; color: var(--dx-ink-3); }
.dx-bline.is-negative .dx-bline-status { color: var(--dx-neg-ink); }
.dx-bline.is-caution .dx-bline-status { color: var(--dx-caution-ink); }
.dx-bline.is-positive .dx-bline-status { color: var(--dx-pos-ink); }

.dx-bline-track { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--dx-ring-track); overflow: hidden; }
.dx-bline-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--dx-pos); }
.dx-bline.is-caution .dx-bline-fill { background: var(--dx-caution); }
.dx-bline.is-negative .dx-bline-fill { background: var(--dx-neg); }
.dx-bline.is-neutral .dx-bline-fill { background: var(--dx-ink-3); }

.dx-bline-over {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, var(--dx-neg) 0 3px, color-mix(in srgb, var(--dx-neg) 45%, transparent) 3px 6px);
}

.dx-bline-pace { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--dx-ink); opacity: .55; }

/* ------------------------------------------------------------------ Investments */
.dx-spark { position: relative; height: 92px; margin: 0 -24px; }
.dx-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.dx-spark-area { stroke: none; }
.dx-spark-line { fill: none; stroke: var(--dx-green); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dx-spark-caption { position: absolute; right: 24px; bottom: 6px; font: 600 11px var(--dx-font); color: var(--dx-ink-3); }

.dx-movers { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 12.5px var(--dx-font); color: var(--dx-ink-2); }
.dx-mover { display: inline-flex; align-items: center; gap: 5px; }
.dx-mover.is-up i { color: var(--dx-pos); }
.dx-mover.is-down i { color: var(--dx-neg); }

.dx-divs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding: 13px 14px;
    border-radius: 15px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
}

.dx-divs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dx-divs-label { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px var(--dx-font); color: var(--dx-ink-2); }
.dx-divs-label i { color: var(--dx-green); }
.dx-divs-row { display: flex; align-items: flex-end; gap: 14px; }
.dx-divs-figure { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 0 0 auto; }
.dx-divs-figure b { font: 600 20px/1.1 var(--dx-display); letter-spacing: -.02em; color: var(--dx-ink); }

.dx-minibars { display: flex; align-items: flex-end; gap: 3px; height: 38px; flex: 1 1 auto; min-width: 0; }

.dx-minibar {
    flex: 1 1 0;
    height: var(--h);
    min-height: 3px;
    border-radius: 3px 3px 1px 1px;
    background: color-mix(in srgb, var(--dx-green) 80%, transparent);
    transform-origin: bottom;
    animation: dx-grow .7s cubic-bezier(.2, .8, .2, 1) both;
}

.dx-minibar.is-zero { background: var(--dx-line); }
.dx-minibar:last-child { background: var(--dx-green); }

.dx-divs-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--dx-ink-3); }
.dx-divs-facts b { color: var(--dx-ink); font-weight: 700; }

/* ------------------------------------------------------------------ Debt */
.dx-debt-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dx-debt-figures { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }

.dx-callout {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
}

.dx-callout i { margin-top: 2px; }
.dx-callout.is-caution { background: var(--dx-caution-soft); color: var(--dx-caution-ink); }
.dx-callout.is-negative { background: var(--dx-neg-soft); color: var(--dx-neg-ink); }

.dx-balances { gap: 10px; }
.dx-balances li { display: flex; flex-direction: column; gap: 5px; }
.dx-balance-head { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.dx-balance-name { font: 600 13px var(--dx-font); color: var(--dx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-balance-amount { font: 600 13px var(--dx-font); font-variant-numeric: tabular-nums; color: var(--dx-ink); }
.dx-balance-track { display: block; height: 6px; border-radius: 999px; background: var(--dx-ring-track); overflow: hidden; }
.dx-balance-bar { display: block; height: 100%; border-radius: inherit; background: var(--dx-rose); }
.dx-balances .is-caution .dx-balance-bar { background: var(--dx-caution); }
.dx-balances .is-positive .dx-balance-bar { background: color-mix(in srgb, var(--dx-rose) 60%, transparent); }
.dx-balance-meta { font-size: 11.5px; color: var(--dx-ink-3); }

/* ------------------------------------------------------------------ Retirement */
.dx-retire-top, .dx-retire-cta { display: flex; align-items: center; gap: 18px; }
.dx-retire-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.dx-retire-copy p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dx-ink-2); }
.dx-retire-headline { font-size: 13.5px !important; color: var(--dx-ink) !important; }
.dx-retire-age { font-size: 12px; color: var(--dx-ink-3); }

.dx-egg { display: flex; flex-direction: column; gap: 7px; }
.dx-egg-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--dx-ink-3); }
.dx-egg-head b { color: var(--dx-ink); }
.dx-egg-track { position: relative; height: 10px; border-radius: 999px; background: var(--dx-ring-track); }
.dx-egg-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--dx-teal) 55%, transparent), var(--dx-teal)); }
.dx-egg.is-caution .dx-egg-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--dx-caution) 55%, transparent), var(--dx-caution)); }
.dx-egg.is-negative .dx-egg-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--dx-neg) 55%, transparent), var(--dx-neg)); }
.dx-egg-target { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--dx-ink); }

/* ------------------------------------------------------------------ Settle up (the couple's blue and amber) */
.dx-settle-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.dx-side {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--dx-you-soft);
}

.dx-side.is-partner { background: var(--dx-partner-soft); }

.dx-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    color: #FFFFFF;
    font: 700 13px var(--dx-font);
    box-shadow: 0 0 0 2px var(--dx-you), 0 0 0 4px var(--dx-panel-solid);
}

.dx-avatar.is-partner { box-shadow: 0 0 0 2px var(--dx-partner), 0 0 0 4px var(--dx-panel-solid); }
.dx-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dx-side-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dx-side-label { font: 600 11.5px var(--dx-font); color: var(--dx-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-side-text b { margin-top: 2px; font: 600 18px var(--dx-display); letter-spacing: -.01em; color: var(--dx-you); }
.dx-side.is-partner .dx-side-text b { color: var(--dx-partner-ink); }
.dx-side-text small { font-size: 11px; color: var(--dx-ink-3); }

.dx-settle-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--dx-ring-track); }

.dx-settle-net { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 14px/1.35 var(--dx-font); color: var(--dx-ink); }
.dx-settle-net.is-positive i { color: var(--dx-pos); }
.dx-settle-net.is-caution i { color: var(--dx-caution); }
.dx-settle-net small { font: 600 12px var(--dx-font); color: var(--dx-ink-3); }

.dx-settle-facts { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--dx-line-soft); }
.dx-rails { display: flex; flex-wrap: wrap; gap: 6px; }

.dx-rail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
    font: 600 12px var(--dx-font);
    color: var(--dx-ink-2);
}

.dx-rail b { color: var(--dx-ink); }
.dx-settle-line { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--dx-ink-2); }
.dx-settle-line i { margin-top: 3px; color: var(--dx-ink-3); }
.dx-settle-line a { color: var(--dx-accent-ink); font-weight: 600; text-decoration: none; }
.dx-settle-line a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Bills & subscriptions */
.dx-mix { display: flex; flex-direction: column; gap: 9px; }
.dx-mix-bar { display: block; height: 8px; border-radius: 999px; overflow: hidden; }
.dx-mix-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--dx-ink-2); }
.dx-mix-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dx-mix-legend b { color: var(--dx-ink); }

.dx-prices {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 15px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
}

.dx-prices-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 12.5px var(--dx-font); color: var(--dx-ink-2); }
.dx-prices .dx-row { margin: 0 -6px; width: calc(100% + 12px); padding: 6px; }

.dx-review {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 11px 14px;
    border-radius: 15px;
    background: var(--dx-caution-soft);
    color: var(--dx-ink);
    text-decoration: none;
    transition: filter .15s ease;
}

a.dx-review:hover { color: var(--dx-ink); filter: brightness(.98) saturate(1.1); }
.dx-review > i { margin-left: auto; font-size: 11px; color: var(--dx-caution-ink); }

.dx-review-count {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--dx-caution);
    color: #FFFFFF;
    font: 700 16px var(--dx-display);
}

[data-bs-theme="dark"] .dx-review-count { color: #0B0F19; }
.dx-review-text { display: flex; flex-direction: column; min-width: 0; }
.dx-review-text b { font: 700 13.5px var(--dx-font); }
.dx-review-text small { font-size: 12px; color: var(--dx-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-review.is-clear { background: var(--dx-pos-soft); }
.dx-review.is-clear > i { margin-left: 0; font-size: 18px; color: var(--dx-pos); }

/* ------------------------------------------------------------------ Recent activity */
.dx-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    height: 96px;
    padding: 12px 14px 8px;
    border-radius: 15px;
    background: var(--dx-inset);
    border: 1px solid var(--dx-inset-line);
}

.dx-week-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dx-week-track { flex: 1 1 auto; width: 100%; max-width: 30px; display: flex; align-items: flex-end; }

.dx-week-bar {
    width: 100%;
    border-radius: 6px 6px 3px 3px;
    background: color-mix(in srgb, var(--dx-blue) 42%, transparent);
    transform-origin: bottom;
    animation: dx-grow .7s cubic-bezier(.2, .8, .2, 1) both;
}

.dx-week-day.is-peak .dx-week-bar { background: color-mix(in srgb, var(--dx-blue) 70%, transparent); }
.dx-week-day.is-today .dx-week-bar { background: var(--dx-accent); }
.dx-week-label { font: 600 11px var(--dx-font); color: var(--dx-ink-3); }
.dx-week-day.is-today .dx-week-label { color: var(--dx-accent-ink); }
.dx-week-day .dx-tip { top: 0; left: 50%; transform: translate(-50%, -100%); }
.dx-week-day:hover .dx-tip { opacity: 1; }

.dx-tx { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dx-tx + .dx-tx { border-top: 1px solid var(--dx-line-soft); }

.dx-tx-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dx-tx-main:hover { background: var(--dx-inset); }

.dx-tx-plate { position: relative; flex: 0 0 auto; }

.dx-tx-badge {
    position: absolute;
    right: -4px;
    bottom: -3px;
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--dx-indigo);
    color: #FFFFFF;
    font-size: 9px;
    box-shadow: 0 0 0 2px var(--dx-panel-solid);
}

[data-bs-theme="dark"] .dx-tx-badge { color: #0B0F19; }

.dx-tx-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dx-tx-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dx-tx-name { min-width: 0; font: 600 14px/1.3 var(--dx-font); color: var(--dx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-flag { flex: 0 0 auto; font-size: 11px; color: var(--dx-ink-3); }
.dx-flag.is-split { color: var(--dx-accent); }

.dx-tx-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 12px;
    color: var(--dx-ink-3);
    white-space: nowrap;
    overflow: hidden;
}

.dx-tx-account { overflow: hidden; text-overflow: ellipsis; }
.dx-tx-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dx-tx-meta > span:last-child { flex: 0 0 auto; }
.dx-tx-tags:empty { display: none; }

.dx-tx-amount {
    flex: 0 0 auto;
    font: 600 14px var(--dx-font);
    font-variant-numeric: tabular-nums;
    color: var(--dx-ink);
}

.dx-tx.is-income .dx-tx-amount { color: var(--dx-pos-ink); }

.dx-tx-split, .dx-tx-split-spacer { flex: 0 0 auto; width: 32px; height: 32px; }

.dx-tx-split {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--dx-ink-3);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dx-tx-split:hover { background: var(--dx-accent-soft); color: var(--dx-accent-ink); }
.dx-tx-split.is-split { color: var(--dx-accent); }

/* ------------------------------------------------------------------ Layout by the content column's width */
@container dx (min-width: 640px) {
    .dx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dx-donut-wrap { grid-template-columns: minmax(150px, 196px) minmax(0, 1fr); gap: 24px; }
    .dx-donut { margin: 0; }
}

@container dx (min-width: 760px) {
    .dx-split-wealth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-split-wealth > :nth-child(2) { border-top: 0; border-left: 1px solid var(--dx-line-soft); }
    .dx-split-wealth > :nth-child(3) { grid-column: 1 / -1; }
}

@container dx (min-width: 980px) {
    .dx-heropanel { grid-template-columns: minmax(0, 1fr) clamp(330px, 33%, 420px); }
    .dx-payday { margin: 12px 12px 12px 0; }

    .dx-split-flow { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); }
    .dx-split-month { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .dx-split-activity { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }

    .dx-split-flow > * + *,
    .dx-split-month > * + *,
    .dx-split-activity > * + * { border-top: 0; border-left: 1px solid var(--dx-line-soft); }
}

@container dx (min-width: 1180px) {
    .dx-split-wealth { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dx-split-wealth > :nth-child(3) { grid-column: auto; border-top: 0; border-left: 1px solid var(--dx-line-soft); }
}

/* Wider screens: Until payday takes a third of the hero instead of stopping at 420px, so the runway and bills breathe. */
@container dx (min-width: 1180px) {
    .dx-heropanel { grid-template-columns: minmax(0, 1fr) clamp(380px, 32%, 540px); }
}

@container dx (min-width: 1440px) {
    .dx-heropanel { grid-template-columns: minmax(0, 1fr) clamp(480px, 34%, 720px); }
    .dx-payday { margin: 14px 14px 14px 0; padding: 22px 24px 20px; }
}


@container dx (max-width: 520px) {
    .dx-cell { padding: 18px 16px; }
    .dx-heromain { padding: 20px 16px 18px; }
    .dx-plot-hero { margin-inline: -16px -6px; }
    .dx-spark { margin-inline: -16px; }
    .dx-payday { margin: 0 8px 8px; padding: 16px 14px 14px; }
    /* Three figures still sit side by side on a phone, tighter, instead of stacking into a tall column. */
    .dx-stats { gap: 6px; }
    .dx-stat { padding: 8px 9px; border-radius: 11px; }
    .dx-stat dt { font-size: 11px; }
    .dx-stat dd { font-size: 15px; }
    .dx-stat small { font-size: 10.5px; }
    /* Recent activity: the account gives way so the category and the day stay readable, and a pill never hides the name. */
    .dx-tx-account, .dx-tx-meta .dx-dot:has(+ .dx-tx-account) { display: none; }
    .dx-tx-name { flex: 0 1 auto; min-width: min(7.5em, 55%); }
    .dx-tx-title .dx-pill { display: none; }
    .dx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-kpi:nth-child(3) { border-left: 0; }
    .dx-kpi:nth-child(n+3) { border-top: 1px solid var(--dx-inset-line); }
    .dx-settle-sides { grid-template-columns: minmax(0, 1fr); }
    .dx-head { flex-wrap: wrap; }
    /* The title keeps its place beside the chip (a long caption ellipsizes); the controls and the link take the next line. */
    .dx-head-text { flex-basis: 0; }
    .dx-head-actions { width: 100%; justify-content: flex-start; padding-left: 46px; }
    .dx-comp-legend .is-debt { margin-left: 0; }
    .dx-figure { font-size: 34px; }
    .dx-onboard { padding: 18px 16px; }
}

/* ------------------------------------------------------------------ Motion: one moment on load, then only answers */
.dx-draw { animation: dx-wipe 1.3s cubic-bezier(.3, .7, .3, 1) both; }

@keyframes dx-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes dx-grow {
    from { transform: scaleY(.04); }
    to { transform: scaleY(1); }
}

@keyframes dx-arc-in {
    from { opacity: 0; transform: scale(.86); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dx-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes dx-pulse {
    0% { box-shadow: 0 0 0 3px var(--dx-panel-solid), 0 0 0 0 color-mix(in srgb, var(--dx-blue) 45%, transparent); }
    70% { box-shadow: 0 0 0 3px var(--dx-panel-solid), 0 0 0 14px color-mix(in srgb, var(--dx-blue) 0%, transparent); }
    100% { box-shadow: 0 0 0 3px var(--dx-panel-solid), 0 0 0 8px color-mix(in srgb, var(--dx-blue) 20%, transparent); }
}

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

@media (prefers-reduced-motion: reduce) {
    .dx *, .dx *::before, .dx *::after { animation: none !important; transition: none !important; }
}

html[data-a11y-reduce-motion="on"] .dx *,
html[data-a11y-reduce-motion="on"] .dx *::before,
html[data-a11y-reduce-motion="on"] .dx *::after { animation: none !important; transition: none !important; }

/* Keyboard focus is always visible. */
.dx button:focus-visible,
.dx a:focus-visible {
    outline: 2px solid var(--dx-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ The Classic / Modern switch (both looks' headers) */
.dash-style {
    --ds-track: #F1F3F8;
    --ds-line: #E3E6EF;
    --ds-ink: #0E1222;
    --ds-ink-2: #5B6078;
    --ds-on: #FFFFFF;
    --ds-accent: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--ds-track);
    border: 1px solid var(--ds-line);
}

[data-bs-theme="dark"] .dash-style {
    --ds-track: rgba(255, 255, 255, .05);
    --ds-line: rgba(255, 255, 255, .08);
    --ds-ink: #E9EBF5;
    --ds-ink-2: #A9AEC4;
    --ds-on: rgba(255, 255, 255, .1);
    --ds-accent: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
}

.dash-style-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-ink-2);
    font: 600 13px/1 var(--si-font-sans-serif, "Manrope"), system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dash-style-btn i { font-size: 12px; }
.dash-style-btn:hover { color: var(--ds-ink); }
.dash-style-btn.is-on { background: var(--ds-on); color: var(--ds-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px var(--ds-line); }
.dash-style-btn.is-on i { color: var(--ds-accent); }
[data-bs-theme="dark"] .dash-style-btn.is-on { box-shadow: none; }
.dash-style-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }