/* ═══════════════════════════════════════════════════════════
   SCENARIOS — Financial Sandbox
   ═══════════════════════════════════════════════════════════ */

/* ── Reality Card ── */
.sc-reality-card {
    margin-bottom: 16px;
}
.sc-reality-inner {
    background: rgba(255,255,255,0.58);
    border-radius: 20px;
    padding: 22px 24px;
    border: 0.5px solid rgba(0,0,0,0.04);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.sc-reality-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid rgba(0,0,0,0.05);
}
.sc-reality-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.sc-reality-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: rgba(0,0,0,0.03);
    padding: 4px 10px;
    border-radius: 8px;
}
.sc-reality-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.sc-reality-stat {
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    position: relative;
}
.sc-reality-stat-highlight {
    background: color-mix(in srgb, var(--accent, transparent) 6%, transparent);
}
.sc-reality-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
    margin-bottom: 4px;
}
.sc-reality-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 750;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: var(--mono-ls-medium);
}
.sc-reality-stat-sub {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .sc-reality-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Section Headers ── */
.sc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}
.sc-section-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-quaternary);
}
.sc-section-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--system-blue);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.sc-section-action:hover { background: rgba(0,122,255,0.06); }
.sc-section-action .material-symbols-outlined { font-size: 16px; }

/* ── Scenario Cards ── */
.sc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.sc-empty {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255,255,255,0.4);
    border-radius: 18px;
    border: 1px dashed rgba(0,0,0,0.08);
}

.sc-card {
    background: rgba(255,255,255,0.58);
    border-radius: 18px;
    padding: 18px 20px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.sc-card:hover { background: rgba(255,255,255,0.75); transform: translateY(-1px); }
.sc-card.active {
    border-color: var(--system-purple);
    background: rgba(175,82,222,0.04);
}

.sc-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.sc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sc-card-icon .material-symbols-outlined { font-size: 18px; }

.sc-card-info { flex: 1; min-width: 0; }
.sc-card-name {
    display: block;
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.sc-card-desc {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-card-selected-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--system-purple);
    background: rgba(175,82,222,0.1);
    padding: 3px 10px;
    border-radius: 12px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Delta bar on card */
.sc-card-delta {
    padding-top: 12px;
    border-top: 0.5px solid rgba(0,0,0,0.05);
}
.sc-delta-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.sc-delta-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
}
.sc-delta-value {
    font-size: 17px;
    font-weight: 750;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-medium);
}
.sc-delta-eoy {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.sc-delta-eoy-label {
    font-size: 11px;
    color: var(--text-tertiary);
}
.sc-delta-eoy-value {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-display);
}

/* ── Chart ── */
.sc-chart-card {
    margin-bottom: 20px;
}
.sc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-left: 12px;
}
.sc-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Builder ── */
.sc-builder {
    margin-bottom: 24px;
}
.sc-builder-inner {
    background: rgba(255,255,255,0.58);
    border-radius: 20px;
    padding: 24px;
    border: 0.5px solid rgba(0,0,0,0.04);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.sc-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid rgba(0,0,0,0.05);
}
.sc-builder-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    border: none;
    background: none;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    padding: 4px 0;
    width: 60%;
}
.sc-builder-name:focus {
    outline: none;
    border-bottom: 2px solid var(--system-purple);
}

/* Verdict card */
.sc-verdict {
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.sc-verdict-main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sc-verdict-text {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.sc-verdict-danger {
    font-size: 12px;
    color: var(--system-red);
    font-weight: 600;
    margin-top: 2px;
}
.sc-verdict-eoy {
    text-align: right;
    flex-shrink: 0;
}
.sc-verdict-eoy-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-quaternary);
    margin-bottom: 2px;
}
.sc-verdict-eoy-value {
    font-size: 20px;
    font-weight: 750;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* Adjustment rows */
.sc-adjustments {
    margin-bottom: 20px;
}
.sc-adjust-row {
    background: rgba(0,0,0,0.02);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 10px;
}
.sc-adjust-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.sc-adjust-label .material-symbols-outlined { font-size: 18px; }

.sc-adjust-values {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sc-adjust-current {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,0.2);
}
.sc-adjust-new {
    font-size: 20px;
    font-weight: 750;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.sc-adjust-delta {
    font-size: 12px;
    font-weight: 700;
    background: rgba(0,0,0,0.04);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--text-secondary);
}

/* Custom range slider */
.sc-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.sc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--system-purple);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}
.sc-range-income::-webkit-slider-thumb { border-color: var(--system-green); }
.sc-range-expense::-webkit-slider-thumb { border-color: var(--system-red); }
.sc-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-quaternary);
    margin-top: 4px;
}

/* Events */
.sc-events {
    background: rgba(0,0,0,0.02);
    border-radius: 14px;
    padding: 4px 0;
    margin-bottom: 20px;
}
.sc-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
}
.sc-events-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.sc-events-label .material-symbols-outlined { font-size: 18px; }
.sc-events-empty {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.sc-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
}
.sc-event-row:last-child { border-bottom: none; }
.sc-event-name {
    flex: 2;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    background: rgba(255,255,255,0.6);
}
.sc-event-month {
    flex: 1;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    background: rgba(255,255,255,0.6);
}
.sc-event-amount {
    width: 90px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    text-align: right;
    background: rgba(255,255,255,0.6);
    font-weight: 600;
}
.sc-event-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-quaternary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.sc-event-remove:hover { background: rgba(255,59,48,0.1); color: var(--system-red); }
.sc-event-remove .material-symbols-outlined { font-size: 16px; }

/* Make It Real */
.sc-make-real {
    margin-top: 4px;
}
.sc-make-real-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1.5px solid rgba(52,199,89,0.3);
    background: rgba(52,199,89,0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sc-make-real-btn:hover {
    background: rgba(52,199,89,0.1);
    border-color: rgba(52,199,89,0.5);
}
.sc-make-real-btn > .material-symbols-outlined:first-child {
    font-size: 24px;
    color: var(--system-green);
}
.sc-make-real-btn > .material-symbols-outlined:last-child {
    margin-left: auto;
}
.sc-make-real-title {
    display: block;
    font-size: 15px;
    font-weight: 650;
    color: var(--system-green);
}
.sc-make-real-desc {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

/* Template picker (in modal) */
.sc-template-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-template-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    width: 100%;
}
.sc-template-btn:hover {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.sc-template-btn .material-symbols-outlined { font-size: 22px; flex-shrink: 0; }
.sc-template-btn-text { flex: 1; }
.sc-template-btn-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.sc-template-btn-desc {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .sc-cards-grid { grid-template-columns: 1fr; }
    .sc-builder-inner { padding: 18px; }
    .sc-verdict { flex-direction: column; text-align: center; }
    .sc-verdict-eoy { text-align: center; }
    .sc-adjust-values { justify-content: center; }
    .sc-event-row { flex-wrap: wrap; }
    .sc-event-name { flex: 1 1 100%; }
    .sc-event-month, .sc-event-amount { flex: 1; }
    .sc-reality-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== MILESTONES ==================== */
/* ==================== GOALS — Editorial Layout ==================== */
.goals-editorial {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 24px;
}

.goals-editorial-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(220,252,231,0.5) 0%, rgba(220,240,255,0.3) 40%, rgba(245,235,255,0.2) 100%);
    z-index: 0;
}

.goals-editorial-bg::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    border-radius: 50%;
}

.goals-editorial-inner {
    position: relative;
    z-index: 1;
    padding: 36px 40px 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.goals-editorial-title {
    font-size: 36px;
    font-weight: 700;
    font-family: var(--font-editorial);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
}

.goals-editorial-sub {
    font-size: 15px;
    font-weight: 440;
    color: var(--text-secondary);
    margin-top: 6px;
}



/* --- Section Structure --- */
.goals-section {
    margin-bottom: 28px;
}

/* goals-section-header base layout in components.css */

.goals-section-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.goals-section-action {
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--system-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 10px;
    corner-shape: squircle;
    transition: background 0.15s ease;
}
.goals-section-action:hover { background: rgba(0,122,255,0.06); }

/* ═══════════════════════════════════════
   GOALS LAYOUT — Two Column + Jar
   ═══════════════════════════════════════ */
.goals-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}
.goals-jar-col {
    position: sticky;
    top: 24px;
}

@media (max-width: 768px) {
    .goals-layout {
        grid-template-columns: 1fr;
    }
    .goals-jar-col {
        position: static;
    }
    .goals-jar-tube-inner {
        height: 200px !important;
    }
}

/* ═══ THE SAVINGS JAR ═══ */
.goals-jar-card {
    background: linear-gradient(180deg, #f8fffe 0%, #f0faf4 100%);
    border-radius: 24px;
    padding: 24px 20px;
    border: 1px solid rgba(52,199,89,0.08);
    text-align: center;
}
.goals-jar-eyebrow {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--system-green);
    margin-bottom: 4px;
}
.goals-jar-pct {
    font-size: 32px; font-weight: 900;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.04em; line-height: 1;
}
.goals-jar-sub {
    font-size: 12px; font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

/* Jar container */
.goals-jar-wrap {
    position: relative;
    width: 140px; height: 200px;
    margin: 0 auto 16px;
}

/* Jar lid */
.goals-jar-lid {
    position: absolute; top: 0;
    left: 50%; transform: translateX(-50%);
    width: 80px; height: 16px;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #d4d4d8, #c0c0c4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 3;
}

/* Jar neck */
.goals-jar-neck {
    position: absolute; top: 14px;
    left: 50%; transform: translateX(-50%);
    width: 70px; height: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
    border-radius: 0 0 4px 4px;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-top: none;
    z-index: 2;
}

/* Jar body — glass container */
.goals-jar-body {
    position: absolute; top: 26px;
    left: 50%; transform: translateX(-50%);
    width: 120px; height: 170px;
    border-radius: 12px 12px 28px 28px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.4) 100%);
    border: 2px solid rgba(0,0,0,0.06);
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(255,255,255,0.3), 0 4px 20px rgba(0,0,0,0.06);
}

/* Glass highlight reflection */
.goals-jar-highlight {
    position: absolute; top: 8px; left: 8px;
    width: 16px; height: 60px;
    border-radius: 8px;
    background: rgba(255,255,255,0.5);
    transform: rotate(-5deg);
    pointer-events: none;
}

/* Coin fill — rises from bottom */
.goals-jar-fill {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, #FFD60A 0%, #FFB800 30%, #FF9F0A 100%);
    border-radius: 0 0 26px 26px;
    transition: height 2s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Coin texture overlay */
.goals-jar-fill::before {
    content: '';
    position: absolute; inset: 0;
    opacity: 0.15;
    background: repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0, transparent 8px,
        rgba(0,0,0,0.1) 8px, rgba(0,0,0,0.1) 10px
    );
}

/* Shimmer at top of coin stack */
.goals-jar-fill::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
    border-radius: 3px;
}

/* Floating coins */
.goals-jar-coin {
    position: absolute;
    font-size: 14px;
}
.goals-jar-coin.c1 {
    bottom: 15%; left: 20%;
    animation: jarCoinFloat 3s ease-in-out infinite;
}
.goals-jar-coin.c2 {
    bottom: 25%; right: 22%;
    font-size: 11px;
    animation: jarCoinFloat 4s ease-in-out 1s infinite;
}

@keyframes jarCoinFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(10deg); }
}

/* Footer stat */
.goals-jar-footer {
    background: rgba(52,199,89,0.06);
    border-radius: 14px;
    padding: 14px 16px;
}
.goals-jar-footer-amount {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 20px; font-weight: 750;
    color: var(--system-green);
    letter-spacing: var(--mono-ls-medium);
}
.goals-jar-footer-sub {
    font-size: 12px; font-weight: 600;
    color: var(--text-tertiary);
}
.goals-jar-monthly {
    margin-top: 10px;
    font-size: 12px; font-weight: 700;
    color: var(--text-tertiary);
}
.goals-jar-monthly span {
    color: var(--system-blue);
}

.goals-empty {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255,255,255,0.72);
    border-radius: 20px;
    border: 1px dashed rgba(0,0,0,0.08);
}
.goals-empty i {
    font-size: 36px;
    opacity: 0.25;
    margin-bottom: 12px;
    display: block;
}
.goals-empty p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 4px;
}
.goals-empty span {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* --- Milestone Cards --- */
.gl-milestone {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 18px 20px 14px;
    background: rgba(255,255,255,0.82);
    border: 0.5px solid rgba(0,0,0,0.03);
    border-radius: 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.gl-milestone:hover { background: rgba(255,255,255,0.65); box-shadow: var(--shadow-md); }
.gl-milestone.complete { background: rgba(52,199,89,0.06); border: 0.5px solid rgba(52,199,89,0.1); }
.gl-milestone.complete:hover { background: rgba(52,199,89,0.1); }

.gl-mile-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.gl-mile-icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.gl-mile-icon.done {
    background: none;
    color: var(--system-green);
}

.gl-mile-info { min-width: 0; }

.gl-mile-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.gl-mile-meta {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.gl-mile-right {
    text-align: right;
    flex-shrink: 0;
}

.gl-mile-target {
    display: block;
    font-size: 17px;
    font-weight: 750;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.gl-mile-pct {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.gl-mile-bar {
    width: 100%;
    height: 5px;
    background: rgba(0,0,0,0.04);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.gl-mile-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--system-blue), var(--system-teal));
    border-radius: 100px;
    transition: width 0.6s ease;
}
.gl-mile-fill.done {
    background: var(--system-green);
}

.gl-mile-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.gl-milestone:hover .gl-mile-actions { opacity: 1; }

.gl-mile-actions button {
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(0,0,0,0.04);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 10px;
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.gl-mile-actions button:hover { background: rgba(0,122,255,0.1); color: var(--system-blue); }
.gl-mile-actions button:last-child:hover { background: rgba(255,59,48,0.1); color: var(--system-red); }

/* --- Daily Spend Pace --- */
.gl-pace-card {
    background: rgba(255,255,255,0.58);
    border-radius: 20px;
    overflow: hidden;
    border: 0.5px solid rgba(0,0,0,0.04);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.gl-pace-hero {
    text-align: center;
    padding: 28px 24px 20px;
    background: linear-gradient(180deg, rgba(0,122,255,0.04) 0%, transparent 100%);
}

.gl-pace-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.gl-pace-amount {
    display: block;
    font-size: 36px;
    font-weight: 750;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-hero);
    color: var(--system-blue);
    line-height: 1.1;
}

.gl-pace-sub {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.gl-pace-savings {
    padding: 18px 24px;
    border-top: 0.5px solid rgba(0,0,0,0.04);
}

.gl-pace-savings-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.gl-pace-savings-value {
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.gl-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.08);
    border-radius: 100px;
    outline: none;
    cursor: pointer;
}
.gl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--system-blue);
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gl-range::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.gl-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--system-blue);
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    cursor: pointer;
}
.gl-range::-moz-range-track {
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 100px;
    border: none;
}

.gl-pace-split {
    padding: 8px 24px 20px;
}

.gl-pace-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}

.gl-pace-divider {
    height: 0.5px;
    background: rgba(0,0,0,0.04);
}

.gl-pace-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.gl-pace-avatar.josh { background: linear-gradient(135deg, #007AFF, #8E8E93); }
.gl-pace-avatar.rob { background: linear-gradient(135deg, #34C759, #5BD778); }

.gl-pace-person-info { flex: 1; min-width: 0; }

.gl-pace-person-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.gl-pace-person-daily {
    display: block;
    font-size: 20px;
    font-weight: 750;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-top: 1px;
}

.gl-pace-per {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.gl-pace-pct {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.gl-pace-pct input {
    width: 48px;
    text-align: center;
    padding: 6px 4px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(0,0,0,0.02);
    color: var(--text-primary);
}

/* --- Goal Tiles --- */
.gl-goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.gl-goal-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.78);
    border-radius: 16px;
    position: relative;
    transition: background 0.15s ease;
}
.gl-goal-tile:hover { background: rgba(255,255,255,0.75); }

.gl-goal-icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--system-blue);
    flex-shrink: 0;
}

.gl-goal-info { flex: 1; min-width: 0; }

.gl-goal-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.gl-goal-meta {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.gl-goal-amount {
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: var(--mono-ls-medium);
    flex-shrink: 0;
}

.gl-goal-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-quaternary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.gl-goal-tile:hover .gl-goal-remove { opacity: 1; }
.gl-goal-remove:hover { background: rgba(255,59,48,0.1); color: var(--system-red); }

/* ==================== DEBT PAYOFF PAGE — "The Ascent" v44 ==================== */

/* ─── DARK HERO — "The Number" ─── */
.debt-hero {
    background: #1C1C1E;
    border-radius: 20px;
    corner-shape: squircle;
    padding: 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.debt-hero::after {
    content: '';
    position: absolute; top: -30%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle at top right, rgba(52,199,89,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.debt-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; position: relative; z-index: 1; }
.debt-hero-label { font-size: 11px; font-weight: 650; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.debt-hero-total { font-size: 42px; font-weight: 700; color: white; letter-spacing: var(--mono-ls-hero); font-family: var(--font-mono); line-height: 1; font-variant-numeric: tabular-nums; }
.debt-hero-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 100px;
    font-size: 12px; font-weight: 650; white-space: nowrap;
}
.debt-hero-badge .material-symbols-outlined { font-size: 14px; }
.debt-hero-badge.on-track { background: rgba(52,199,89,0.15); color: #34C759; }

/* Progress bar — spring animation */
.debt-hero-progress {
    height: 8px; border-radius: 100px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    margin: 18px 0 8px;
    position: relative; z-index: 1;
}
.debt-hero-progress-fill {
    height: 100%; border-radius: 100px;
    background: linear-gradient(90deg, #34C759, #30D158, #5BD778);
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.debt-hero-progress-text {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 600;
    position: relative; z-index: 1;
}
.debt-hero-progress-text span:first-child { color: #34C759; }
.debt-hero-progress-text span:last-child { color: rgba(255,255,255,0.4); }

/* Person split */
.debt-hero-people {
    display: flex; gap: 0;
    margin-top: 18px; padding-top: 18px;
    border-top: 0.5px solid rgba(255,255,255,0.08);
    position: relative; z-index: 1;
}
.debt-hero-person {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
}
.debt-hero-person:first-child { border-right: 0.5px solid rgba(255,255,255,0.08); }
.debt-hero-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: white; flex-shrink: 0;
}
.debt-hero-avatar.josh { background: rgba(52,199,89,0.25); }
.debt-hero-avatar.rob { background: rgba(0,122,255,0.25); }
.debt-hero-person-info { min-width: 0; }
.debt-hero-person-name { display: block; font-size: 12px; font-weight: 550; color: rgba(255,255,255,0.45); }
.debt-hero-person-amount { display: block; font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.9); font-family: var(--font-mono); letter-spacing: var(--mono-ls-medium); font-variant-numeric: tabular-nums; }

/* Empty state */
.dp-empty { text-align: center; padding: 48px 24px; background: var(--surface-1);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--border-hairline); border-radius: 20px; }
.dp-empty h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 14px 0 6px; font-family: var(--font-display); }
.dp-empty p { font-size: 13px; color: var(--text-tertiary); margin: 0 0 20px; max-width: 340px; margin-left: auto; margin-right: auto; }

/* ─── TWO-COLUMN LAYOUT ─── */
.dp-columns {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}
.dp-col-left {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dp-col-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* ─── GAUGE CARD — "The Ascent" ─── */
.dp-gauge-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FFF4 100%);
    border: 1px solid var(--border-hairline);
    border-radius: 20px;
    corner-shape: squircle;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}
.dp-gauge-card::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        rgba(0,0,0,0.015) 19px,
        rgba(0,0,0,0.015) 20px
    );
    pointer-events: none;
}
.dp-gauge-header {
    position: relative; z-index: 1;
    margin-bottom: 20px;
}
.dp-gauge-pct {
    font-size: 48px; font-weight: 800;
    font-family: var(--font-display);
    letter-spacing: -0.04em;
    color: var(--system-green);
    line-height: 1;
}
.dp-gauge-sub {
    font-size: 12px; font-weight: 600;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Tube container */
.dp-gauge-body {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    position: relative; z-index: 1;
    min-height: 380px;
}
.dp-gauge-milestones {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
    width: 36px;
    flex-shrink: 0;
}
.dp-gauge-milestone {
    font-size: 10px; font-weight: 700;
    color: var(--text-quaternary);
    text-align: right;
    transition: color 0.4s, opacity 0.4s;
}
.dp-gauge-milestone.reached { color: var(--system-green); opacity: 1; }
.dp-gauge-milestone.dim { opacity: 0.35; }

/* The tube itself */
.dp-gauge-tube-wrap {
    position: relative;
    width: 64px;
    flex-shrink: 0;
}
.dp-gauge-tube {
    width: 64px;
    height: 380px;
    border-radius: 32px;
    background: rgba(0,0,0,0.04);
    border: 1.5px solid rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

/* Liquid fill */
.dp-gauge-liquid {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, #30D158 0%, #34C759 40%, #248A3D 100%);
    border-radius: 0 0 30px 30px;
    transition: height 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Surface shimmer */
.dp-gauge-liquid::after {
    content: '';
    position: absolute; top: 0; left: 4px; right: 4px;
    height: 6px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    border-radius: 3px;
    animation: dp-shimmer 2.5s ease-in-out infinite;
}
@keyframes dp-shimmer {
    0%, 100% { opacity: 0.3; transform: translateX(-8px); }
    50% { opacity: 0.8; transform: translateX(8px); }
}

/* Bubbles */
.dp-gauge-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    animation: dp-bubble 3s ease-in infinite;
}
.dp-gauge-bubble:nth-child(1) { width: 6px; height: 6px; left: 15px; bottom: 20%; animation-delay: 0s; animation-duration: 2.8s; }
.dp-gauge-bubble:nth-child(2) { width: 4px; height: 4px; left: 35px; bottom: 10%; animation-delay: 0.8s; animation-duration: 3.2s; }
.dp-gauge-bubble:nth-child(3) { width: 5px; height: 5px; left: 25px; bottom: 30%; animation-delay: 1.5s; animation-duration: 2.5s; }
@keyframes dp-bubble {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-60px) scale(0.5); opacity: 0; }
}

/* Tick marks */
.dp-gauge-ticks {
    position: absolute; inset: 0;
    pointer-events: none;
}
.dp-gauge-tick {
    position: absolute;
    right: 0;
    width: 10px; height: 1px;
    background: rgba(0,0,0,0.08);
}

/* Position marker */
.dp-gauge-marker {
    position: absolute;
    left: 50%; transform: translate(-50%, 50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 2px rgba(52,199,89,0.3);
    transition: bottom 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

/* Goal emoji at top */
.dp-gauge-goal {
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* Dollar labels (right side) */
.dp-gauge-dollars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
    width: 52px;
    flex-shrink: 0;
}
.dp-gauge-dollar {
    font-size: 10px; font-weight: 650;
    font-family: var(--font-display);
    color: var(--text-quaternary);
    text-align: left;
}

/* Footer */
.dp-gauge-footer {
    position: relative; z-index: 1;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 0.5px solid rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-between;
}
.dp-gauge-foot-stat { text-align: center; }
.dp-gauge-foot-label { font-size: 9px; font-weight: 700; color: var(--text-quaternary); text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.dp-gauge-foot-value { font-size: 15px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dp-gauge-foot-value.green { color: var(--system-green); }

/* ─── STRATEGY CARD ─── */
.dp-strategy {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    corner-shape: squircle;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.dp-strat-header {
    font-size: 11px; font-weight: 700; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.dp-strat-toggle {
    display: flex; gap: 6px; margin-bottom: 14px;
}
.dp-strat-toggle button {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--border-hairline);
    background: transparent;
    font-size: 12px; font-weight: 700;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: all 0.2s;
    font-family: var(--font-body);
}
.dp-strat-toggle button .material-symbols-outlined { font-size: 15px; }
.dp-strat-toggle button.active {
    background: #1C1C1E;
    color: white;
    border-color: #1C1C1E;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.dp-strat-toggle button:hover:not(.active) {
    border-color: var(--text-tertiary);
    color: var(--text-secondary);
}
.dp-strat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.dp-strat-stat {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 10px 12px;
}
.dp-strat-stat-label {
    font-size: 9px; font-weight: 700;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
}
.dp-strat-stat-value {
    font-size: 16px; font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    display: block; margin-top: 3px;
    letter-spacing: var(--mono-ls-medium);
}
.dp-strat-stat-value.red { color: var(--system-red); }
.dp-strat-stat-value.clickable { cursor: pointer; }
.dp-strat-stat-value.clickable:hover { color: var(--system-blue); }
.dp-strat-stat-value .material-symbols-outlined { font-size: 12px; color: var(--text-quaternary); vertical-align: middle; margin-left: 2px; }

/* ─── BATTLE PLAN — "The Queue" ─── */
.dp-battle {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    corner-shape: squircle;
    overflow: hidden;
}
.dp-battle-eyebrow {
    padding: 14px 20px 0;
    display: flex; align-items: center; justify-content: space-between;
}
.dp-battle-title {
    font-size: 11px; font-weight: 750;
    color: var(--system-red);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dp-battle-count {
    font-size: 11px; font-weight: 650;
    color: var(--text-tertiary);
    background: rgba(0,0,0,0.04);
    padding: 2px 8px; border-radius: 100px;
}
.dp-battle-list { padding: 10px 0; }
.dp-battle-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    cursor: pointer; transition: background 0.12s;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
    position: relative;
}
.dp-battle-item:last-child { border-bottom: none; }
.dp-battle-item:hover { background: rgba(0,0,0,0.012); }
.dp-battle-item.focus {
    background: rgba(255,59,48,0.04);
    border: 1px solid rgba(255,59,48,0.12);
    border-radius: 14px;
    margin: 4px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,59,48,0.12);
}
.dp-battle-rank {
    width: 24px; height: 24px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.dp-battle-rank.r1 { background: var(--system-red); color: white; }
.dp-battle-rank.rn { background: rgba(0,0,0,0.05); color: var(--text-tertiary); }
.dp-battle-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.dp-battle-info { flex: 1; min-width: 0; }
.dp-battle-name {
    font-size: 14px; font-weight: 650;
    color: var(--text-primary);
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
.dp-battle-meta {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    font-size: 11px; font-weight: 500; color: var(--text-tertiary); margin-top: 2px;
}
.dp-battle-owner {
    display: inline-flex; padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700;
}
.dp-battle-owner.josh { background: rgba(52,199,89,0.1); color: var(--system-green); }
.dp-battle-owner.rob { background: rgba(0,122,255,0.1); color: var(--system-blue); }
.dp-battle-owner.joint { background: rgba(0,0,0,0.04); color: var(--text-tertiary); }
.dp-battle-numbers { text-align: right; flex-shrink: 0; }
.dp-battle-balance {
    font-size: 15px; font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: var(--mono-ls-medium);
}
.dp-battle-payment {
    font-size: 11px; font-weight: 550;
    color: var(--text-tertiary); margin-top: 2px;
}
.dp-battle-payment strong { color: var(--text-secondary); }
.dp-battle-eta {
    display: inline-block; margin-top: 3px;
    font-size: 10px; font-weight: 700;
    color: var(--system-green);
    background: rgba(52,199,89,0.08);
    padding: 1px 7px; border-radius: 4px;
}
.dp-battle-chevron { color: var(--text-quaternary); flex-shrink: 0; }
.dp-battle-chevron .material-symbols-outlined { font-size: 16px; }

/* Focus callout */
.dp-battle-focus-callout {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 6px 10px;
    background: rgba(255,59,48,0.06);
    border-radius: 8px;
    font-size: 11px; font-weight: 650;
    color: var(--system-red);
}
.dp-battle-focus-callout .material-symbols-outlined { font-size: 14px; }

/* Add debt button */
.dp-battle-add {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 20px;
    border-top: 1px dashed rgba(0,0,0,0.06);
    font-size: 13px; font-weight: 650;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
    background: transparent; border-left: none; border-right: none; border-bottom: none;
    width: 100%;
    font-family: var(--font-body);
}
.dp-battle-add:hover { color: var(--system-blue); background: rgba(0,122,255,0.03); }
.dp-battle-add .material-symbols-outlined { font-size: 16px; }

/* Battle plan empty */
.dp-battle-empty {
    padding: 32px 20px; text-align: center;
}
.dp-battle-empty .material-symbols-outlined { font-size: 28px; color: var(--text-quaternary); }
.dp-battle-empty p { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 10px 0 4px; }
.dp-battle-empty-hint { font-size: 12px; font-weight: 450; color: var(--text-tertiary); }

/* ─── VICTORY WALL ─── */
.dp-victory {
    background: linear-gradient(135deg, rgba(52,199,89,0.06) 0%, rgba(48,209,88,0.03) 100%);
    border: 1px solid rgba(52,199,89,0.12);
    border-radius: 18px;
    corner-shape: squircle;
    padding: 20px;
}
.dp-victory-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.dp-victory-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700;
    font-family: var(--font-display);
    color: var(--system-green);
    letter-spacing: -0.01em;
}
.dp-victory-total {
    font-size: 13px; font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--system-green);
    background: rgba(52,199,89,0.1);
    padding: 3px 10px; border-radius: 100px;
}
.dp-victory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.dp-victory-card {
    background: white;
    border: 1px solid rgba(52,199,89,0.1);
    border-radius: 14px;
    corner-shape: squircle;
    padding: 16px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.dp-victory-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52,199,89,0.1); }
.dp-victory-check {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(52,199,89,0.1);
    color: var(--system-green);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.dp-victory-check .material-symbols-outlined { font-size: 18px; }
.dp-victory-name {
    font-size: 13px; font-weight: 650;
    color: var(--text-primary);
    font-family: var(--font-display);
    margin-bottom: 4px;
    text-decoration: line-through;
    text-decoration-color: rgba(52,199,89,0.3);
}
.dp-victory-amount {
    font-size: 15px; font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--system-green);
    letter-spacing: var(--mono-ls-medium);
}
.dp-victory-date {
    font-size: 10px; font-weight: 600;
    color: var(--text-quaternary);
    margin-top: 4px;
}

/* ─── VAULT — tracked/paused ─── */
.dp-vault {
    background: rgba(0,0,0,0.01);
    border: 1px dashed rgba(0,0,0,0.1);
    border-radius: 16px;
    corner-shape: squircle;
    overflow: hidden;
}
.dp-vault-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
}
.dp-vault-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700;
    color: var(--text-secondary);
    font-family: var(--font-display);
}
.dp-vault-title .material-symbols-outlined { font-size: 16px; color: var(--text-tertiary); }
.dp-vault-count {
    font-size: 10px; font-weight: 650;
    color: var(--text-tertiary);
    background: rgba(0,0,0,0.04);
    padding: 2px 7px; border-radius: 100px;
}
.dp-vault-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 18px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
}
.dp-vault-item:last-child { border-bottom: none; }
.dp-vault-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.dp-vault-info { flex: 1; min-width: 0; }
.dp-vault-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dp-vault-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.dp-vault-bal { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-secondary); flex-shrink: 0; margin-right: 8px; font-variant-numeric: tabular-nums; }
.dp-vault-activate {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 8px;
    border: 1.5px solid rgba(0,122,255,0.2);
    background: rgba(0,122,255,0.04);
    font-size: 11px; font-weight: 700;
    color: var(--system-blue);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
    flex-shrink: 0;
}
.dp-vault-activate:hover { background: rgba(0,122,255,0.1); border-color: var(--system-blue); }
.dp-vault-activate .material-symbols-outlined { font-size: 13px; }
.dp-vault-add {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 12px 18px;
    border-top: 0.5px dashed rgba(0,0,0,0.06);
    font-size: 12px; font-weight: 650;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.12s;
    background: none; border-left: none; border-right: none; border-bottom: none;
    width: 100%;
    font-family: var(--font-body);
}
.dp-vault-add:hover { color: var(--system-blue); }
.dp-vault-add .material-symbols-outlined { font-size: 14px; }

/* ─── MOBILE RESPONSIVE ─── */
@media (max-width: 768px) {
    .dp-columns {
        grid-template-columns: 1fr;
    }
    .dp-col-left {
        position: static;
    }
    .dp-gauge-tube { height: 280px; }
    .dp-gauge-body { min-height: 280px; }
    .dp-victory-grid { grid-template-columns: repeat(2, 1fr); }
    .debt-hero-total { font-size: 32px; }
    .debt-hero-people { flex-direction: column; gap: 12px; }
    .debt-hero-person { padding: 0; }
    .debt-hero-person:first-child { border-right: none; padding-bottom: 12px; border-bottom: 0.5px solid rgba(255,255,255,0.08); }
}
@media (max-width: 480px) {
    .dp-victory-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════
   DEBT DETAIL MODAL — Polished
   ═══════════════════════════════════════ */

/* Overlay */
.dp-detail-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 6000;
    align-items: center; justify-content: center;
    padding: 24px;
}
.dp-detail-overlay.active { display: flex; }

/* Panel */
.dp-detail-panel {
    background: #F5F5F7;
    border-radius: 20px;
    corner-shape: squircle;
    width: 100%; max-width: 520px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(0,0,0,0.04);
    animation: ddSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ddSlideUp {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══ HERO SECTION ═══ */
.dd-hero {
    border-radius: 20px 20px 0 0;
    padding: 24px 24px 20px;
    color: white;
    position: relative;
    overflow: hidden;
}
.dd-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}

/* Close button */
.dd-hero-close {
    position: absolute; top: 16px; right: 16px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none; color: rgba(255,255,255,0.6);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
    z-index: 2;
}
.dd-hero-close:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}
.dd-hero-close .material-symbols-outlined { font-size: 16px; }

/* Top row: icon + name */
.dd-hero-top {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
    position: relative; z-index: 1;
}
.dd-hero-icon {
    width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dd-hero-icon .material-symbols-outlined {
    color: white; font-size: 22px;
}
.dd-hero-info { min-width: 0; }
.dd-hero-name {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0; color: white;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-hero-type {
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.5);
}

/* Balance — large number */
.dd-hero-balance {
    font-family: var(--font-mono);
    font-size: 36px; font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-hero);
    color: white; line-height: 1;
    margin-bottom: 10px;
    position: relative; z-index: 1;
}

/* Progress bar */
.dd-hero-progress {
    margin-bottom: 10px;
    position: relative; z-index: 1;
}
.dd-hero-bar {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.dd-hero-bar-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.6s ease;
}
.dd-hero-bar-meta {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.45);
}

/* Quick stats row */
.dd-hero-stats {
    font-size: 13px; font-weight: 550;
    color: rgba(255,255,255,0.55);
    margin-bottom: 14px;
    position: relative; z-index: 1;
}
.dd-hero-dot { margin: 0 6px; opacity: 0.4; }

/* Paid off badge */
.dd-hero-paid-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(52,199,89,0.2);
    padding: 6px 14px; border-radius: 10px;
    font-size: 14px; font-weight: 700;
    color: var(--system-green);
    margin-bottom: 10px;
}
.dd-hero-paid-badge .material-symbols-outlined { font-size: 18px; }

/* Status bar — inside hero */
.dd-hero-status {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    padding-top: 14px;
    border-top: 0.5px solid rgba(255,255,255,0.08);
    position: relative; z-index: 1;
}

/* Status pill */
.dd-status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 100px;
    font-size: 12px; font-weight: 650;
}
.dd-status-pill.active { background: rgba(0,122,255,0.15); color: #5AC8FA; }
.dd-status-pill.paused { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.dd-status-pill.paid { background: rgba(52,199,89,0.15); color: #34C759; }

/* Status action buttons — inside dark hero */
.dd-status-actions { display: flex; gap: 5px; }
.dd-hero-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 5px 12px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    font-size: 11px; font-weight: 650;
    color: rgba(255,255,255,0.7);
    cursor: pointer; transition: all 0.15s;
    font-family: var(--font-body);
}
.dd-hero-btn:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}
.dd-hero-btn .material-symbols-outlined { font-size: 12px; }
.dd-hero-btn-green {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 5px 12px; border-radius: 10px;
    border: 1px solid rgba(52,199,89,0.2);
    background: rgba(52,199,89,0.1);
    font-size: 11px; font-weight: 650;
    color: #34C759;
    cursor: pointer; transition: all 0.15s;
    font-family: var(--font-body);
}
.dd-hero-btn-green:hover {
    background: rgba(52,199,89,0.2);
}
.dd-hero-btn-green .material-symbols-outlined { font-size: 12px; }

/* ═══ TABS ═══ */
.dd-tabs {
    display: flex; gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--surface-1);
}
.dd-tab {
    padding: 11px 16px;
    border: none; background: transparent;
    font-size: 13px; font-weight: 650;
    color: var(--text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    font-family: var(--font-body);
}
.dd-tab.on { color: var(--system-blue); border-bottom-color: var(--system-blue); }
.dd-tab:hover:not(.on) { color: var(--text-primary); }
.dd-tab-n {
    font-size: 10px; font-weight: 700;
    background: rgba(0,122,255,0.1); color: var(--system-blue);
    padding: 1px 6px; border-radius: 100px; margin-left: 4px;
}

/* ═══ BODY ═══ */
.dd-body { padding: 20px 24px 24px; }

/* ═══ EDIT FIELDS ═══ */
.dd-fields { display: flex; flex-direction: column; gap: 0; }
.dd-field-row {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--separator);
}
.dd-field-row:last-child { border-bottom: none; }
.dd-fl {
    font-size: 14px; font-weight: 550;
    color: var(--text-secondary);
    font-family: var(--font-sf);
}
.dd-input {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 600;
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1.5px solid var(--border-hairline);
    border-radius: 12px; corner-shape: squircle;
    padding: 9px 14px;
    width: 160px; text-align: right;
    outline: none;
    transition: border-color 0.15s;
}
.dd-input:focus { border-color: var(--system-blue); }
select.dd-input {
    text-align: left;
    appearance: auto;
    -webkit-appearance: auto;
}

/* ═══ DANGER ZONE ═══ */
.dd-danger-zone {
    margin-top: 20px; padding-top: 16px;
    border-top: 0.5px solid rgba(0,0,0,0.04);
}
.dd-delete-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 12px;
    border: 1px solid rgba(255,59,48,0.12);
    background: rgba(255,59,48,0.04);
    font-size: 13px; font-weight: 600;
    color: var(--system-red);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
}
.dd-delete-btn:hover {
    background: rgba(255,59,48,0.1);
    border-color: rgba(255,59,48,0.2);
}
.dd-delete-btn .material-symbols-outlined { font-size: 16px; }

/* ═══ DOCUMENTS TAB ═══ */
.dd-docs-empty { text-align: center; padding: 24px 0; }
.dd-docs-empty p { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 8px 0 4px; }
.dd-docs-hint { font-size: 12px; color: var(--text-tertiary); margin: 0 !important; }
.dd-doc-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
}
.dd-doc-row:last-of-type { border-bottom: none; }
.dd-doc-icon { font-size: 18px; color: var(--text-tertiary); }
.dd-doc-info { flex: 1; min-width: 0; }
.dd-doc-name { font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; }
.dd-doc-date { font-size: 11px; color: var(--text-tertiary); }
.dd-upload-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 8px 16px;
    border-radius: 12px;
    border: 1.5px dashed var(--border-hairline);
    background: transparent;
    font-size: 13px; font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer; transition: all 0.15s;
    font-family: var(--font-body);
}
.dd-upload-btn:hover {
    border-color: var(--system-blue);
    color: var(--system-blue);
}

/* ═══ NOTES TAB ═══ */
.dd-notes-area {
    width: 100%; min-height: 160px;
    padding: 14px 16px;
    border: 1.5px solid var(--border-hairline);
    border-radius: 14px; corner-shape: squircle;
    background: var(--surface-2);
    font-size: 14px; font-weight: 450;
    font-family: var(--font-body);
    color: var(--text-primary);
    resize: vertical; outline: none;
    transition: border-color 0.15s;
    line-height: 1.6; box-sizing: border-box;
}
.dd-notes-area:focus { border-color: var(--system-blue); }
.dd-notes-area::placeholder { color: var(--text-quaternary); }

/* ═══ MOBILE ═══ */
@media (max-width: 900px) {
    .dp-detail-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .dp-detail-panel {
        max-width: 100%; width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        animation: ddSlideSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes ddSlideSheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    .dd-hero { border-radius: 20px 20px 0 0; }
    .dd-hero-balance { font-size: 28px; }
}

/* ==================== DEBT PAYOFF — Machine Lane ==================== */
.mch-debt-lane {
    margin-top: 24px;
}
.mch-debt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.mch-debt-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mch-debt-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #FF9500, #FFB340);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(255,179,64,0.25);
}
.mch-debt-title {
    font-size: 15px;
    font-weight: 660;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.mch-debt-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.mch-debt-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mch-debt-card {
    background: rgba(255,255,255,0.7);
    border: 0.5px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mch-debt-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.mch-debt-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mch-debt-card-name {
    font-size: 15px;
    font-weight: 640;
    color: var(--text-primary);
}
.mch-debt-card-payment {
    font-size: 14px;
    font-weight: 680;
    font-family: var(--font-display);
    color: var(--system-orange);
    letter-spacing: -0.02em;
}

/* Apple Fitness ring-style progress */
.mch-debt-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.mch-debt-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mch-debt-ring svg {
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}
.mch-debt-ring-bg {
    fill: none;
    stroke: rgba(0,0,0,0.06);
    stroke-width: 4;
}
.mch-debt-ring-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.23,1,0.32,1);
}
.mch-debt-ring-pct {
    position: absolute;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-secondary);
}
.mch-debt-bar-info {
    flex: 1;
}
.mch-debt-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
}
.mch-debt-bar-remaining {
    font-weight: 600;
    color: var(--text-primary);
}
.mch-debt-bar-original {
    font-weight: 500;
    color: var(--text-quaternary);
}
.mch-debt-bar {
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.mch-debt-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #34C759, #5BD778);
    transition: width 0.8s ease;
}

.mch-debt-card-meta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    font-weight: 520;
    color: var(--text-tertiary);
}
.mch-debt-card-meta span { display: flex; align-items: center; gap: 4px; }
.mch-debt-card-meta i { font-size: 9px; opacity: 0.5; }

.mch-debt-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1.5px dashed rgba(0,0,0,0.08);
    border-radius: 14px;
    background: none;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    font-family: var(--font-system);
}
.mch-debt-add:hover {
    border-color: var(--system-orange);
    color: var(--system-orange);
    background: rgba(255,179,64,0.04);
}

/* Machine formula debt step */
.mch-flow-item.debt { border-color: rgba(255,179,64,0.2); }
.mch-flow-item.debt .mch-flow-amount { color: var(--system-orange); }

/* ==================== DEBT WIDGET — Home Dashboard ==================== */
.dash-w-debt { grid-column: span 1; }

.debt-widget-empty {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-quaternary);
    text-align: center;
    padding: 16px 0;
}

.debt-widget-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.debt-widget-ring {
    width: 56px;
    height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.debt-widget-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.debt-widget-ring-pct {
    position: absolute;
    font-size: 14px;
    font-weight: 740;
    font-family: var(--font-display);
    color: var(--system-green);
    letter-spacing: -0.02em;
}
.debt-widget-stats {
    flex: 1;
}
.debt-widget-remaining {
    font-size: 22px;
    font-weight: 740;
    font-family: var(--font-display);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.1;
}
.debt-widget-label {
    font-size: 12px;
    font-weight: 520;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.debt-widget-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.debt-widget-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.debt-widget-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.debt-widget-item-name {
    flex: 1;
    font-weight: 560;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.debt-widget-item-amt {
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* ==================== DEBT GOALS — Goals Page ==================== */
.debt-goal-card {
    background: rgba(255,255,255,0.75);
    border: 0.5px solid rgba(0,0,0,0.04);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.debt-goal-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.debt-goal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.debt-goal-name {
    font-size: 16px;
    font-weight: 660;
    color: var(--text-primary);
}
.debt-goal-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,179,64,0.1);
    color: var(--system-orange);
}

.debt-goal-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.debt-goal-bar {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.debt-goal-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #FF9500, #FFB340);
    transition: width 0.6s ease;
}
.debt-goal-pct {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--system-orange);
    min-width: 40px;
    text-align: right;
}

.debt-goal-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.debt-goal-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.debt-goal-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
}
.debt-goal-stat-value {
    font-size: 14px;
    font-weight: 660;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: var(--mono-ls-medium);
}

.debt-goal-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 0.5px solid var(--separator);
}
.debt-goal-btn {
    flex: 1;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-system);
    cursor: pointer;
    transition: background 0.15s ease;
}
.debt-goal-btn.edit { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
.debt-goal-btn.edit:hover { background: rgba(0,0,0,0.08); }
.debt-goal-btn.delete { background: rgba(255,59,48,0.06); color: var(--system-red); }
.debt-goal-btn.delete:hover { background: rgba(255,59,48,0.12); }

.goals-section-label-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.goals-section-badge {
    font-size: 11px;
    font-weight: 650;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255,179,64,0.1);
    color: var(--system-orange);
}

/* ==================== DEBT WIZARD FORM STYLES (dw-*) ==================== */
.dw-form { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dw-field { display: flex; flex-direction: column; gap: 6px; }
.dw-label { font-size: 13px; font-weight: 650; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.dw-required { color: var(--system-red); font-weight: 700; }
.dw-optional { font-size: 11px; font-weight: 500; color: var(--text-tertiary); font-style: italic; }
.dw-input {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px;
    font-size: 15px; font-weight: 550; font-family: var(--font-body);
    background: var(--surface-1); color: var(--text-primary);
    outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.dw-input:focus { border-color: var(--system-blue); }
.dw-input::placeholder { color: var(--text-quaternary); }
.dw-input-prefix, .dw-input-suffix { display: flex; align-items: center; gap: 0; position: relative; }
.dw-prefix, .dw-suffix {
    font-size: 15px; font-weight: 600; color: var(--text-tertiary);
    position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
}
.dw-prefix { left: 14px; }
.dw-suffix { right: 14px; }
.dw-input-prefix .dw-input { padding-left: 30px; }
.dw-input-suffix .dw-input { padding-right: 30px; }
.dw-error { font-size: 12px; font-weight: 550; color: var(--system-red); min-height: 16px; }
.dw-select {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px;
    font-size: 14px; font-weight: 550; font-family: var(--font-body);
    background: var(--surface-1); color: var(--text-primary);
    outline: none; box-sizing: border-box; cursor: pointer;
}
.dw-select:focus { border-color: var(--system-blue); }
.dw-row { display: flex; gap: 14px; }
.dw-half { flex: 1; min-width: 0; }
.dw-third { max-width: 50%; }
.dw-skip-link {
    border: none; background: none; padding: 0; margin-top: 2px;
    font-size: 12px; font-weight: 550; color: var(--system-blue);
    cursor: pointer; font-family: var(--font-body); text-align: left;
}
.dw-skip-link:hover { text-decoration: underline; }

/* Type grid */
.dw-type-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-type-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.08); background: var(--surface-1);
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    cursor: pointer; transition: all 0.15s; font-family: var(--font-body);
}
.dw-type-btn .material-symbols-outlined { font-size: 17px; }
.dw-type-btn:hover { border-color: var(--system-blue); color: var(--system-blue); }
.dw-type-btn.active { border-color: var(--system-blue); background: rgba(0,122,255,0.08); color: var(--system-blue); }

/* Toggle group (owner, frequency, priority) */
.dw-toggle-group { display: flex; gap: 6px; flex-wrap: wrap; }
.dw-owner-btn, .dw-freq-btn, .dw-priority-btn {
    padding: 8px 16px; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.08); background: var(--surface-1);
    font-size: 13px; font-weight: 650; color: var(--text-secondary);
    cursor: pointer; transition: all 0.15s; font-family: var(--font-body);
}
.dw-owner-btn:hover, .dw-freq-btn:hover, .dw-priority-btn:hover { border-color: var(--system-blue); }
.dw-owner-btn.active, .dw-freq-btn.active { border-color: var(--system-blue); background: rgba(0,122,255,0.08); color: var(--system-blue); }
.dw-priority-btn.active { border-width: 2px; }

/* Toggle row */
.dw-toggle-row { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; }
.dw-toggle-label { font-size: 14px; font-weight: 550; color: var(--text-primary); flex: 1; }

/* Status grid */
.dw-status-grid { display: flex; gap: 8px; }
.dw-status-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 14px 10px; border-radius: 14px;
    border: 1.5px solid rgba(0,0,0,0.08); background: var(--surface-1);
    cursor: pointer; transition: all 0.15s; text-align: center;
}
.dw-status-btn .material-symbols-outlined { font-size: 22px; color: var(--text-tertiary); }
.dw-status-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dw-status-desc { font-size: 11px; font-weight: 450; color: var(--text-tertiary); }
.dw-status-btn:hover { border-color: var(--system-blue); }
.dw-status-btn.active { border-color: var(--system-blue); background: rgba(0,122,255,0.06); }
.dw-status-btn.active .material-symbols-outlined { color: var(--system-blue); }

/* Confirm card */
.dw-confirm-card { background: var(--surface-2); border-radius: 16px; overflow: hidden; max-width: 420px; margin: 0 auto; }
.dw-confirm-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.dw-confirm-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dw-confirm-icon .material-symbols-outlined { font-size: 20px; }
.dw-confirm-title { flex: 1; min-width: 0; }
.dw-confirm-name { font-size: 16px; font-weight: 700; color: var(--text-primary); display: block; }
.dw-confirm-type { font-size: 12px; color: var(--text-tertiary); }
.dw-confirm-balance { font-size: 20px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dw-confirm-details { padding: 0 20px 14px; }
.dw-confirm-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 0.5px solid rgba(0,0,0,0.04);
    font-size: 13px;
}
.dw-confirm-row:last-child { border-bottom: none; }
.dw-confirm-row span:first-child { color: var(--text-tertiary); font-weight: 500; }
.dw-confirm-row span:last-child { color: var(--text-primary); font-weight: 650; }
.dw-badge { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.dw-badge.active { background: rgba(0,122,255,0.1); color: var(--system-blue); }
.dw-badge.tracked { background: var(--surface-2); color: var(--text-tertiary); }
.dw-badge.paused { background: rgba(255,149,0,0.1); color: var(--system-orange); }
.dw-badge.warn { background: rgba(255,149,0,0.1); color: var(--system-orange); }

/* ==================== THE MACHINE — 4-Tier Autopilot ==================== */
/* Tier 1: Status Hero | Tier 2: Formula (collapsed)                       */
/* Tier 3: Forecast    | Tier 4: Breakdown (collapsed)                     */

/* === TIER 1: Autopilot Status Hero === */
.mch-hero {
    margin-bottom: 24px;
}

.mch-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.mch-hero-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--system-orange);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mch-hero-label i { font-size: 11px; }
.mch-hero-sublabel {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-tertiary);
    font-size: 11px;
    margin-left: 2px;
}

.mch-month-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* mch-nav classes removed — replaced by bp2-nav-* in budget.css */

/* Status headline — the emotional anchor */
.mch-hero-headline {
    font-size: 36px;
    font-weight: 780;
    font-family: var(--font-display);
    letter-spacing: -0.035em;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
}
.mch-hero-headline.healthy {
    background: linear-gradient(135deg, var(--text-primary) 55%, var(--system-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mch-hero-headline.warning {
    background: linear-gradient(135deg, var(--text-primary) 55%, var(--system-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mch-tag.projected {
    font-size: 11px;
    font-weight: 600;
    background: rgba(0,122,255,0.1);
    color: var(--system-blue);
    -webkit-text-fill-color: var(--system-blue);
    padding: 2px 8px;
    border-radius: 20px;
    vertical-align: middle;
}

.mch-hero-sub {
    font-size: 15px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
    max-width: 480px;
}

/* The hero number — BIG net monthly */
.mch-hero-number {
    margin: 32px 0 28px;
}

.mch-hero-amount {
    font-size: 56px;
    font-weight: 800;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-hero);
    line-height: 1;
    display: block;
}
.mch-hero-amount.positive { color: var(--system-green); }
.mch-hero-amount.negative { color: var(--system-red); }

.mch-hero-caption {
    font-size: 14px;
    font-weight: 560;
    color: var(--text-tertiary);
    margin-top: 6px;
    display: block;
    text-transform: lowercase;
}

/* Coverage bar — minimal, elegant */
.mch-coverage {
    margin-bottom: 8px;
}

.mch-coverage-bar {
    height: 5px;
    border-radius: 100px;
    background: rgba(0,0,0,0.04);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    display: flex;
    overflow: hidden;
}

.mch-coverage-fill {
    height: 100%;
    border-radius: 100px 0 0 100px;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.mch-coverage-fill.healthy { background: var(--system-blue); opacity: 0.4; }
.mch-coverage-fill.warning { background: var(--system-red); opacity: 0.5; }

.mch-coverage-surplus {
    height: 100%;
    background: var(--system-green);
    opacity: 0.35;
    border-radius: 0 3px 3px 0;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

.mch-coverage-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 550;
    color: var(--text-tertiary);
}
.mch-coverage-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* === TIER 2 + 4: Disclosure containers === */
.mch-disclosure {
    margin-bottom: 16px;
    border-radius: 16px;
    corner-shape: squircle;
    border: 0.5px solid rgba(0,0,0,0.04);
    background: rgba(255,255,255,0.58);
    overflow: hidden;
    transition: background 0.2s ease;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.mch-disclosure[open] {
    background: rgba(255,255,255,0.65);
}

.mch-disclosure-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 620;
    color: var(--text-primary);
    transition: background 0.15s ease;
}
.mch-disclosure-trigger:hover {
    background: rgba(0,0,0,0.02);
}
.mch-disclosure-trigger::-webkit-details-marker { display: none; }

.mch-disclosure-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mch-disclosure-left > i {
    font-size: 14px;
    color: var(--text-tertiary);
    width: 20px;
    text-align: center;
}

.mch-disclosure-text {
    display: flex;
    flex-direction: column;
}
.mch-disclosure-sub {
    font-size: 12px;
    font-weight: 450;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.mch-disclosure-chevron {
    font-size: 10px;
    color: var(--text-quaternary);
    transition: transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.mch-disclosure[open] .mch-disclosure-chevron {
    transform: rotate(180deg);
}

.mch-disclosure-body {
    padding: 4px 20px 20px;
    border-top: 0.5px solid var(--separator);
    animation: mchDisclosureOpen 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes mchDisclosureOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mch-disclosure-body { animation: none; }
}

/* Formula flow inside Tier 2 */
.mch-formula-flow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 0 8px;
}

.mch-flow-item {
    flex: 1;
    text-align: center;
    padding: 12px 6px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.mch-flow-item:hover { background: rgba(0,0,0,0.025); }
.mch-flow-item.result {
    background: rgba(0,0,0,0.02);
    border-radius: 14px;
}

.mch-flow-amount {
    font-size: 20px;
    font-weight: 750;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-medium);
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}
.mch-flow-amount.positive { color: var(--system-green); }
.mch-flow-amount.negative { color: var(--system-red); }

.mch-flow-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mch-flow-op {
    font-size: 18px;
    font-weight: 300;
    color: var(--text-quaternary);
    padding-top: 12px;
    flex-shrink: 0;
}

/* Extras inside formula */
.mch-extras-inline {
    padding: 14px 16px;
    background: rgba(0,0,0,0.02);
    border-radius: 12px;
    margin-top: 8px;
}
.mch-extras-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}
.mch-extras-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-primary);
}
.mch-extras-row span.positive { color: var(--system-green); font-weight: 650; font-family: var(--font-display); }
.mch-extras-row span.negative { color: var(--system-red); font-weight: 650; font-family: var(--font-display); }

/* === TIER 3: What Happens Next === */
.mch-forecast {
    margin-bottom: 24px;
}

.mch-tier-title {
    font-size: 20px;
    font-weight: 750;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 28px 0 16px;
}

.mch-forecast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

/* Pulse cards — forecast widgets */
.mch-pulse {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.5);
    border: 0.5px solid var(--separator);
    border-radius: 18px;
    transition: all 0.2s ease;
}
.mch-pulse:hover {
    background: rgba(255,255,255,0.7);
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}
.mch-pulse.muted { opacity: 0.6; }

.mch-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    background: var(--text-quaternary);
}
.mch-pulse.income .mch-pulse-dot { background: var(--system-green); }
.mch-pulse.expense .mch-pulse-dot { background: var(--system-red); }

.mch-pulse-body { flex: 1; min-width: 0; }

.mch-pulse-label {
    font-size: 11px;
    font-weight: 650;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 2px;
}

.mch-pulse-value {
    font-size: 22px;
    font-weight: 750;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    display: block;
    margin-bottom: 3px;
}

.mch-pulse-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Trend sparkline */
.mch-trend {
    background: rgba(0,0,0,0.015);
    border-radius: 16px;
    padding: 18px 20px 14px;
}

.mch-trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.mch-trend-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.mch-trend-current {
    font-size: 15px;
    font-weight: 750;
    font-family: var(--font-display);
}
.mch-trend-current.positive { color: var(--system-green); }
.mch-trend-current.negative { color: var(--system-red); }

.mch-trend-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 72px;
}

.mch-trend-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}
.mch-trend-col.future { opacity: 0.5; }

.mch-trend-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    transition: height 0.5s cubic-bezier(0.4,0,0.2,1);
    margin-top: auto;
}
.mch-trend-bar.pos { background: rgba(52,199,89,0.25); }
.mch-trend-bar.neg { background: rgba(255,59,48,0.25); }
.mch-trend-col.current .mch-trend-bar.pos { background: var(--system-green); }
.mch-trend-col.current .mch-trend-bar.neg { background: var(--system-red); }

.mch-trend-col span {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-quaternary);
}
.mch-trend-col.current span {
    color: var(--text-primary);
    font-weight: 700;
}

/* Quick nav pills */
.mch-quicknav {
    display: flex;
    gap: 8px;
    margin: 24px 0 8px;
}

.mch-qn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 14px;
    border: 0.5px solid var(--separator);
    border-radius: 14px;
    background: rgba(255,255,255,0.78);
    font-size: 13px;
    font-weight: 620;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.mch-qn:hover {
    background: rgba(255,255,255,0.85);
    color: var(--text-primary);
    box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}
.mch-qn i { font-size: 13px; opacity: 0.6; }

/* Disclosure: breakdown variant */
.mch-disclosure.breakdown {
    margin-top: 24px;
}

/* TL;DR footer */
.mch-tldr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    background: rgba(0,0,0,0.02);
    border-radius: 14px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.mch-tldr i { font-size: 16px; color: var(--system-orange); margin-top: 1px; flex-shrink: 0; }

/* Machine mobile */
@media (max-width: 768px) {
    .mch-hero-top { flex-direction: column; align-items: flex-start; gap: 10px; }
    .mch-hero-headline { font-size: 26px; }
    .mch-hero-amount { font-size: 40px; }
    .mch-hero-number { margin: 24px 0 20px; }
    .mch-forecast-grid { grid-template-columns: 1fr; }
    .mch-formula-flow { flex-direction: column; gap: 4px; }
    .mch-flow-op { padding: 0; text-align: center; }
    .mch-quicknav { flex-wrap: wrap; }
    .mch-pulse-value { font-size: 18px; }
}

/* ==================== MACHINE 2-COLUMN LAYOUT ==================== */
.mch-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: var(--space-xl) 0;
}

.mch-column {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--radius-2xl);
    padding: 0;
    overflow: hidden;
}

/* Column header */
.mch-col-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(0,122,255,0.04), rgba(142,142,147,0.03));
    border-bottom: 0.5px solid rgba(0,0,0,0.05);
}

.mch-col-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--system-blue), var(--system-indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    flex-shrink: 0;
}

.mch-col-info { flex: 1; min-width: 0; }

.mch-col-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.mch-col-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.mch-col-totals {
    display: flex;
    gap: 14px;
}

.mch-col-stat { text-align: right; }

.mch-col-stat-val {
    display: block;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-display);
}

.mch-col-stat-val.household { color: var(--system-blue); }
.mch-col-stat-val.personal { color: var(--system-orange); }

.mch-col-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-quaternary);
    font-weight: 600;
}

/* Cards container */
.mch-col-cards {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 60px;
    transition: background 0.2s ease;
}

.mch-col-cards.drag-over {
    background: rgba(0,122,255,0.03);
}

/* Individual check card */
.mch-card {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,0.62);
    border: 0.5px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out-expo);
    cursor: grab;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

.mch-card:hover {
    border-color: rgba(255,255,255,0.7);
    box-shadow: 
        0 0 0 0.5px rgba(0,0,0,0.03),
        0 4px 16px rgba(0,0,0,0.05);
}

.mch-card.dragging {
    opacity: 0.5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: rotate(1deg);
}

.mch-card.floating {
    border-color: rgba(200,138,62,0.2);
}

.mch-card-grip {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: 10px;
    background: rgba(0,0,0,0.015);
    flex-shrink: 0;
    cursor: grab;
    transition: color 0.2s ease;
}

.mch-card:hover .mch-card-grip { color: var(--text-tertiary); }

.mch-card-main {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
}

/* Card top bar */
.mch-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.mch-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.mch-card-freq {
    font-size: 10px;
    color: var(--text-tertiary);
    display: block;
    margin-top: 2px;
}

.mch-card-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.mch-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.mch-badge.date {
    color: var(--system-blue);
    background: rgba(0,122,255,0.08);
}

.mch-badge.floating {
    color: var(--system-orange);
    background: rgba(255,149,0,0.08);
    display: flex;
    align-items: center;
    gap: 3px;
    animation: floatPulse 2s ease-in-out infinite;
}

@keyframes floatPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.mch-float-btn {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid var(--separator);
    background: transparent;
    color: var(--text-quaternary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all var(--duration-fast) var(--ease-out-expo);
}

.mch-float-btn:hover,
.mch-float-btn.active {
    background: rgba(255,149,0,0.08);
    color: var(--system-orange);
    border-color: rgba(255,149,0,0.3);
}

/* Card body */
.mch-card-body {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.mch-card-amount {
    flex: 0 0 auto;
    min-width: 100px;
}

.mch-card-amt-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
    font-weight: 600;
    margin-bottom: 3px;
}

.mch-card-amt-input {
    display: flex;
    align-items: center;
    gap: 1px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--separator);
    border-radius: 8px;
    padding: 0 8px;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.mch-card-amt-input:focus-within {
    border-color: var(--system-blue);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.08);
}

.mch-dollar {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.mch-input {
    border: none;
    background: none;
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    padding: 6px 2px;
    width: 80px;
    outline: none;
}

.mch-input.overridden { color: var(--system-blue); }

.mch-reset {
    border: none;
    background: rgba(0,122,255,0.08);
    color: var(--system-blue);
    cursor: pointer;
    padding: 3px;
    border-radius: 5px;
    font-size: 10px;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-out-expo);
}

.mch-reset:hover { background: rgba(0,122,255,0.15); }

/* Split display */
.mch-card-splits {
    flex: 1;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.mch-split {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    min-width: 0;
}

.mch-split.household { background: rgba(0,122,255,0.04); }
.mch-split.personal { background: rgba(255,149,0,0.04); }

.mch-split-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.mch-split.household .mch-split-top i { color: var(--system-blue); font-size: 11px; }
.mch-split.personal .mch-split-top i { color: var(--system-orange); font-size: 11px; }

.mch-split-amt {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.mch-split-amt.negative { color: var(--system-red); }

.mch-split-bar {
    height: 3px;
    background: rgba(0,0,0,0.04);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}

.mch-split-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.mch-split-fill.household { background: var(--system-blue); }
.mch-split-fill.personal { background: var(--system-orange); }

.mch-split-label {
    font-size: 9px;
    color: var(--text-quaternary);
    font-weight: 500;
}

/* ─── START TRACKING WIZARD ─── */
.stw-mode-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.stw-mode-card {
    cursor: pointer;
}
.stw-mode-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.stw-mode-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1.5px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.7);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.stw-mode-card input:checked + .stw-mode-card-inner {
    border-color: var(--system-blue);
    background: rgba(0,122,255,0.04);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.08);
}
.stw-mode-card:hover .stw-mode-card-inner {
    border-color: rgba(0,0,0,0.12);
}
.stw-mode-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.03);
    flex-shrink: 0;
}
.stw-mode-icon .material-symbols-outlined { font-size: 20px; }
.stw-mode-info { flex: 1; }
.stw-mode-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.stw-mode-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 3px;
    line-height: 1.4;
}
.stw-mode-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 10px;
    font-weight: 700;
    color: var(--system-green);
    background: rgba(52,199,89,0.1);
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Snapshot confirm rows */
.stw-confirm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(52,199,89,0.06);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.stw-confirm-missing {
    background: rgba(255,179,64,0.06);
}

/* Bills checklist in wizard */
.stw-bills-list {
    max-height: 340px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 4px;
}
.stw-bills-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
    padding: 12px 0 6px;
}
.stw-bill-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
}
.stw-bill-check {
    font-size: 18px;
    flex-shrink: 0;
}
.stw-bill-row.done .stw-bill-check { color: var(--system-green); }
.stw-bill-row.done .stw-bill-name { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.12); }
.stw-bill-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stw-bill-due {
    font-size: 12px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.stw-bill-amt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.stw-bills-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px 4px;
    font-size: 13px;
    color: var(--text-tertiary);
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 8px;
}
.stw-empty-bills {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-quaternary);
    font-size: 13px;
}

/* Readiness score */
.stw-readiness {
    margin-top: 4px;
}
.stw-readiness-score {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: rgba(0,0,0,0.02);
    border-radius: 16px;
    margin-bottom: 16px;
}
.stw-score-ring {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.stw-score-ring svg { width: 80px; height: 80px; }
.stw-score-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.stw-score-info { flex: 1; }
.stw-score-status {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.stw-score-sub {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.stw-score-date {
    font-size: 12px;
    color: var(--text-quaternary);
    margin-top: 4px;
}

.stw-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stw-ready-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.stw-ready-item:hover { background: rgba(0,0,0,0.02); }
.stw-ready-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: var(--text-quaternary);
}
.stw-ready-item.done .stw-ready-icon { color: var(--system-green); }
.stw-ready-info { flex: 1; }
.stw-ready-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}
.stw-ready-item.done .stw-ready-label { color: var(--text-tertiary); }
.stw-ready-detail {
    font-size: 12px;
    color: var(--text-tertiary);
    display: block;
    margin-top: 1px;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .status-popover {
        left: 4px;
        right: 4px;
        width: auto;
    }
    .sp-links { flex-wrap: wrap; }
    .sp-link { min-width: 70px; }
    .stw-mode-card-inner { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   FUNDED GOALS — Cards, Summary, Empty State
   ═══════════════════════════════════════════════════════════════ */

/* Summary bar */
.fg-summary-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--card-bg);
    border-radius: 14px;
    margin-bottom: 12px;
    border: 0.5px solid var(--border-primary);
    border-left: none;
    box-shadow: var(--shadow-md);
}
.fg-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.fg-summary-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.fg-summary-value { font-size: 16px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fg-summary-pill {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

/* Card grid */
.fg-cards { display: flex; flex-direction: column; gap: 10px; }

/* Individual card */
.fg-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px;
    border: 0.5px solid var(--border-primary);
    transition: opacity 0.2s;
}
.fg-card-paused { opacity: 0.55; }
.fg-card-funded { border-color: rgba(52,199,89,0.25); }

/* Top row: icon + info + actions */
.fg-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.fg-card-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fg-card-icon .material-symbols-outlined { font-size: 20px; }
.fg-card-info { flex: 1; min-width: 0; }
.fg-card-name {
    display: block;
    font-size: 15px; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fg-card-date {
    display: block;
    font-size: 12px; font-weight: 500;
    color: var(--text-tertiary);
    margin-top: 1px;
}
.fg-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fg-card-menu {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none; background: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-quaternary);
    transition: background 0.15s;
}
.fg-card-menu:hover { background: rgba(0,0,0,0.04); }

/* fg-toggle removed — uses canonical .toggle-switch from components.css */

/* Amounts row */
.fg-card-amounts {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.fg-card-total, .fg-card-setaside { display: flex; flex-direction: column; gap: 1px; }
.fg-card-total-label, .fg-card-setaside-label {
    font-size: 11px; font-weight: 500;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fg-card-total-value { font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fg-card-setaside-value { font-size: 15px; font-weight: 600; font-family: var(--font-mono); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fg-card-status-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    flex-shrink: 0;
}
.fg-card-status-pill .material-symbols-outlined { font-size: 14px; }

/* Progress bar */
.fg-card-progress { margin-bottom: 4px; }
.fg-card-bar {
    height: 6px;
    background: rgba(0,0,0,0.04);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.fg-card-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.3s ease;
    min-width: 2px;
}
.fg-card-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px; font-weight: 500;
    color: var(--text-quaternary);
    margin-top: 4px;
}

/* Priority badge */
.fg-card-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px; font-weight: 600;
    color: var(--system-red);
    margin-top: 6px;
}
.fg-card-priority .material-symbols-outlined { font-size: 14px; }

/* Empty state */
.fg-empty {
    text-align: center;
    padding: 32px 20px;
    background: var(--card-bg);
    border-radius: 14px;
    border: 0.5px solid var(--border-primary);
}
.fg-empty-icon {
    width: 52px; height: 52px;
    margin: 0 auto 12px;
    background: rgba(52,199,89,0.1);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}
.fg-empty-icon .material-symbols-outlined { font-size: 26px; color: var(--system-green); }
.fg-empty-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.fg-empty-sub { font-size: 13px; color: var(--text-tertiary); max-width: 320px; margin: 0 auto 16px; line-height: 1.4; }
.fg-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: var(--system-green);
    color: white;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.fg-empty-cta:hover { opacity: 0.85; }
.fg-empty-cta .material-symbols-outlined { font-size: 18px; }



/* Budget Plan: Goals segment color */
.bp-seg-goals { background: linear-gradient(90deg, #AF52DE, #C77BDE); }
.bp-seg-label.goals { color: #AF52DE; }
.bp-seg-label.goals .material-symbols-outlined { color: #AF52DE; font-size: 14px; }

/* Budget Plan: Goals bucket icon */
.bp-bucket-icon.goals {
    background: linear-gradient(135deg, #AF52DE, #C77BDE);
    color: white;
}
.bp-bucket-bar-fill.goals { background: linear-gradient(90deg, #AF52DE, #C77BDE); }

/* Calendar: Goal events */
.cal-event.goal {
    background: rgba(175,82,222,0.12);
    color: #AF52DE;
    font-size: 10px;
    border-radius: 4px;
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-event.goal .material-symbols-outlined { font-size: 11px; }

/* Hero upcoming: goal dot */
.hero-ed-event-dot.goal { background: #AF52DE; }

/* ═══════════════════════════════════════════════════════════
   RECONCILIATION — Badges, Overview Strip, Smart Suggestions
   ═══════════════════════════════════════════════════════════ */

/* ── Badge Slots (inline in rows) ── */
.inc-recon-slot,
.bill-recon-slot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Reconciliation Badges ── */
.recon-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.4;
}
.recon-badge.received,
.recon-badge.paid {
    background: color-mix(in srgb, var(--system-green) 12%, transparent);
    color: var(--system-green);
}
.recon-badge.expected,
.recon-badge.upcoming {
    background: color-mix(in srgb, var(--system-blue) 10%, transparent);
    color: var(--system-blue);
}
.recon-badge.overdue {
    background: color-mix(in srgb, var(--system-red) 12%, transparent);
    color: var(--system-red);
}

.recon-auto {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
    background: rgba(0,0,0,0.04);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 2px;
}

.recon-variance {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-left: 4px;
}

/* ── Money Overview Reconciliation Strip ── */
.mo-recon-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    padding: 0 4px;
}

.mo-recon-item {
    background: rgba(255,255,255,0.55);
    border-radius: 16px;
    padding: 14px 16px;
    border: 0.5px solid rgba(0,0,0,0.04);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.mo-recon-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.mo-recon-item-label {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.mo-recon-item-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-left: auto;
}

.mo-recon-bar {
    height: 6px;
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
    overflow: hidden;
}

.mo-recon-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mo-recon-bar-fill.income {
    background: linear-gradient(90deg, #30D158, #34C759);
}

.mo-recon-bar-fill.bills {
    background: linear-gradient(90deg, #FF6482, #FF3B30);
}

@media (max-width: 540px) {
    .mo-recon-strip { grid-template-columns: 1fr; }
}

/* ── Smart Suggestions (Transaction Modal) ── */
.txn-smart-suggest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 8px 0;
    background: color-mix(in srgb, var(--system-blue) 6%, white);
    border: 0.5px solid color-mix(in srgb, var(--system-blue) 15%, transparent);
    border-radius: 12px;
}

.txn-smart-suggest.linked {
    background: color-mix(in srgb, var(--system-green) 6%, white);
    border-color: color-mix(in srgb, var(--system-green) 15%, transparent);
}

.txn-smart-icon {
    font-size: 20px;
    color: var(--system-blue);
    flex-shrink: 0;
}

.txn-smart-suggest.linked .txn-smart-icon {
    color: var(--system-green);
}

.txn-smart-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.txn-smart-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.txn-smart-confidence {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.txn-smart-link-btn {
    background: var(--system-blue);
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.txn-smart-link-btn:hover { opacity: 0.85; }

/* ── Dark Mode ── */
[data-theme="dark"] .mo-recon-item {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .mo-recon-bar {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .recon-auto {
    background: rgba(255,255,255,0.08);
    color: var(--text-tertiary);
}
[data-theme="dark"] .txn-smart-suggest {
    background: color-mix(in srgb, var(--system-blue) 10%, rgba(30,30,30,0.9));
    border-color: color-mix(in srgb, var(--system-blue) 20%, transparent);
}
[data-theme="dark"] .txn-smart-suggest.linked {
    background: color-mix(in srgb, var(--system-green) 10%, rgba(30,30,30,0.9));
    border-color: color-mix(in srgb, var(--system-green) 20%, transparent);
}

/* ═══════════════════════════════════════
   INCOME PAGE — Redesigned (v44.8)
   ═══════════════════════════════════════ */

/* ─── Monthly Pulse Hero ─── */
.inc-pulse-hero {
    background: linear-gradient(145deg, #1c1c1e, #2c2c2e);
    border-radius: 22px;
    padding: 26px 28px 22px;
    color: white;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.inc-pulse-hero::after {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(52,199,89,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.inc-pulse-month {
    font-size: 11px; font-weight: 650;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
.inc-pulse-row {
    display: flex; align-items: baseline; gap: 10px;
    margin-top: 4px; margin-bottom: 14px;
    position: relative; z-index: 1;
}
.inc-pulse-amount {
    font-family: var(--font-mono);
    font-size: 38px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-hero); line-height: 1;
}
.inc-pulse-of {
    font-size: 14px; font-weight: 500;
    color: rgba(255,255,255,0.35);
}
.inc-pulse-pct {
    margin-left: auto;
    background: rgba(255,149,0,0.12);
    color: var(--system-orange);
    padding: 5px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 750;
}
.inc-pulse-pct.green { background: rgba(52,199,89,0.12); color: var(--system-green); }
.inc-pulse-pct.red { background: rgba(255,59,48,0.12); color: var(--system-red); }

/* Progress bar */
.inc-pulse-bar {
    height: 7px; background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden;
    margin-bottom: 18px; position: relative; z-index: 1;
}
.inc-pulse-bar-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--system-green) 70%, var(--system-orange));
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.inc-pulse-bar-fill.green { background: var(--system-green); }

/* Person breakdown */
.inc-pulse-people {
    display: flex; gap: 12px;
    position: relative; z-index: 1;
}
.inc-pulse-person {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border-radius: 14px; padding: 14px 16px;
    border: 0.5px solid rgba(255,255,255,0.04);
}
.inc-pulse-person-top {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.inc-pulse-avatar {
    width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}
.inc-pulse-avatar.josh { background: rgba(0,122,255,0.15); color: #5AC8FA; }
.inc-pulse-avatar.rob { background: rgba(52,199,89,0.15); color: var(--system-green); }
.inc-pulse-person-name { font-size: 14px; font-weight: 700; }
.inc-pulse-person-pct {
    margin-left: auto;
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.3);
}
.inc-pulse-person-received {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 20px; font-weight: 750; letter-spacing: var(--mono-ls-medium);
}
.inc-pulse-person-expected {
    font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.3);
    margin-top: 2px;
}
.inc-pulse-person-bar {
    height: 3px; background: rgba(255,255,255,0.06);
    border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.inc-pulse-person-bar-fill {
    height: 100%; border-radius: 2px;
    transition: width 1s ease 0.3s;
}
.inc-pulse-person-bar-fill.josh { background: var(--system-blue); }
.inc-pulse-person-bar-fill.rob { background: var(--system-green); }

/* ─── Tab Bar ─── */
.inc-tabs-container { margin-bottom: 20px; }
.inc-tabs-bar {
    display: flex; gap: 0;
    padding: 0 4px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border-hairline);
}
.inc-tab {
    padding: 10px 18px 10px 0;
    border: none; background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 650;
    color: var(--text-tertiary);
    cursor: pointer; transition: all 0.15s;
    font-family: var(--font-body);
}
.inc-tab.on { color: var(--system-blue); border-bottom-color: var(--system-blue); }
.inc-tab:hover:not(.on) { color: var(--text-primary); }
.inc-tab-count {
    font-size: 10px; font-weight: 700;
    background: rgba(0,0,0,0.04);
    padding: 1px 7px; border-radius: 6px;
    color: var(--text-quaternary); margin-left: 6px;
}
.inc-tab.on .inc-tab-count {
    background: rgba(0,122,255,0.08);
    color: var(--system-blue);
}

/* ─── Pay Schedule Rows ─── */
.inc-tab-panel {
    background: var(--glass-bg);
    border-radius: 18px;
    border: 0.5px solid rgba(0,0,0,0.04);
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.inc-sched-row {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 12px;
    margin-bottom: 2px;
}
.inc-sched-row:last-child { border-bottom: none; }
.inc-sched-row.next-month { opacity: 0.4; }
.inc-sched-row:hover {
    background: rgba(0, 122, 255, 0.04);
}

.inc-sched-date { width: 40px; text-align: center; flex-shrink: 0; }
.inc-sched-month {
    font-size: 10px; font-weight: 650;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-quaternary); display: block; line-height: 1;
}
.inc-sched-day {
    font-size: 22px; font-weight: 850;
    color: var(--text-primary); letter-spacing: -0.03em;
    line-height: 1.1; display: block;
}
.inc-sched-dot {
    width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0;
}
.inc-sched-info { flex: 1; min-width: 0; }
.inc-sched-person {
    font-size: 14px; font-weight: 680; color: var(--text-primary);
}
.inc-sched-source {
    font-weight: 500; color: var(--text-tertiary); margin-left: 4px;
}
.inc-sched-via {
    font-size: 11px; font-weight: 500; color: var(--text-quaternary);
    margin-top: 1px;
}
.inc-sched-amount {
    font-size: 15px; font-weight: 740; font-family: var(--font-mono); color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.inc-sched-amount.received { color: var(--system-green); }
.inc-sched-badge { flex-shrink: 0; }

/* ─── Income Source Cards ─── */
.inc-sources-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.inc-source-card {
    background: var(--glass-bg);
    border-radius: 18px; padding: 18px 20px;
    border: 0.5px solid rgba(0,0,0,0.04);
    cursor: pointer; transition: all 0.15s;
    backdrop-filter: blur(20px);
}
.inc-source-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.inc-source-top {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.inc-source-avatar {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.inc-source-avatar .material-symbols-outlined { font-size: 16px; }
.inc-source-header {}
.inc-source-name {
    font-size: 15px; font-weight: 720; color: var(--text-primary);
}
.inc-source-person {
    font-size: 12px; font-weight: 500; color: var(--text-tertiary);
}
.inc-source-amount {
    font-family: var(--font-mono);
    font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text-primary);
    letter-spacing: var(--mono-ls-large);
}
.inc-source-per {
    font-size: 12px; font-weight: 500; color: var(--text-quaternary);
}
.inc-source-meta {
    display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.inc-source-pill {
    font-size: 11px; font-weight: 620; color: var(--text-tertiary);
    background: rgba(0,0,0,0.03); padding: 3px 9px; border-radius: 6px;
}
.inc-source-add {
    background: rgba(0,0,0,0.015);
    border-radius: 18px; padding: 18px 20px;
    border: 1.5px dashed rgba(0,0,0,0.06);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 6px; min-height: 140px;
    transition: all 0.15s;
}
.inc-source-add:hover {
    border-color: var(--system-blue);
    background: rgba(0,122,255,0.02);
}
.inc-source-add-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(0,122,255,0.06); color: var(--system-blue);
    display: flex; align-items: center; justify-content: center;
}
.inc-source-add-label {
    font-size: 13px; font-weight: 650; color: var(--system-blue);
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
    .inc-pulse-amount { font-size: 28px; }
    .inc-pulse-people { flex-direction: column; gap: 8px; }
    .inc-sources-grid { grid-template-columns: 1fr; }
    .inc-sched-badge { display: none; }
}

/* ═══════════════════════════════════════
   HELP SYSTEM — FAB + Drawer + Chat (v44.9)
   ═══════════════════════════════════════ */

/* ─── FAB Button ─── */
.help-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1c1c1e, #3a3a3c);
    border: none;
    color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(255,255,255,0.08) inset;
    z-index: 8000;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.help-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(0,0,0,0.2);
}
.help-fab.open {
    background: var(--system-red);
    transform: rotate(90deg);
}
.help-fab .material-symbols-outlined {
    font-size: 22px;
    transition: transform 0.3s;
}

/* ─── Backdrop (transparent — page stays visible) ─── */
.help-backdrop {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 8001;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.help-backdrop.open {
    opacity: 1; pointer-events: auto;
}

/* ─── Drawer ─── */
.help-drawer {
    position: fixed;
    bottom: 0; right: 0;
    width: 380px; max-width: 100vw;
    max-height: 75vh;
    z-index: 8002;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.help-drawer.open {
    transform: translateY(0);
}
.help-drawer-inner {
    background: #FBFBFD;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 60px rgba(0,0,0,0.18), 0 -2px 12px rgba(0,0,0,0.08);
    display: flex; flex-direction: column;
    max-height: 75vh;
    overflow: hidden;
}

/* ─── Header ─── */
.help-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-hairline);
    flex-shrink: 0;
}
.help-drawer-title {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 750;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.help-drawer-close {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-2); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-tertiary);
}
.help-drawer-close:hover { background: var(--border-hairline); }
.help-drawer-close .material-symbols-outlined { font-size: 16px; }

/* ─── Body (scrollable) ─── */
.help-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 18px 22px;
    -webkit-overflow-scrolling: touch;
}

/* ─── Static Content ─── */
.help-summary {
    font-size: 14px; font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px;
}
.help-sections-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-quaternary);
    margin-bottom: 10px;
}
.help-section-item {
    padding: 10px 14px;
    background: rgba(0,0,0,0.015);
    border-radius: 12px;
    margin-bottom: 6px;
}
.help-section-name {
    font-size: 13px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.help-section-desc {
    font-size: 12px; font-weight: 450;
    color: var(--text-tertiary);
    line-height: 1.5;
}
.help-connections {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(0,122,255,0.03);
    border: 1px solid rgba(0,122,255,0.06);
    border-radius: 12px;
}
.help-connections-label {
    font-size: 12px; font-weight: 700;
    color: var(--system-blue);
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 6px;
}
.help-connections-label .material-symbols-outlined { font-size: 14px; }
.help-connections-text {
    font-size: 12px; font-weight: 450;
    color: var(--text-tertiary);
    line-height: 1.6;
}

/* ─── Chat Section ─── */
.help-divider {
    height: 1px; background: var(--border-hairline);
    margin: 18px 0 14px;
}
.help-chat-label {
    font-size: 12px; font-weight: 650;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}
.help-msg {
    margin-bottom: 10px;
    display: flex;
}
.help-msg.user { justify-content: flex-end; }
.help-msg.assistant { justify-content: flex-start; }
.help-msg-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px; font-weight: 450;
    line-height: 1.5;
}
.help-msg.user .help-msg-bubble {
    background: var(--system-blue);
    color: white;
    border-bottom-right-radius: 6px;
}
.help-msg.assistant .help-msg-bubble {
    background: rgba(0,0,0,0.04);
    color: var(--text-primary);
    border-bottom-left-radius: 6px;
}

/* Typing indicator */
.help-msg-bubble.typing {
    display: flex; gap: 4px; align-items: center;
    padding: 12px 18px;
}
.help-msg-bubble.typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-quaternary);
    animation: helpTypingBounce 1.4s infinite ease-in-out;
}
.help-msg-bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.help-msg-bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes helpTypingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ─── Chat Input ─── */
.help-chat-input {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-hairline);
    background: #FBFBFD;
    flex-shrink: 0;
}
.help-chat-field {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--border-hairline);
    border-radius: 20px;
    font-size: 14px; font-weight: 450;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--surface-1);
    outline: none;
    transition: border-color 0.15s;
}
.help-chat-field:focus {
    border-color: var(--system-blue);
}
.help-chat-field::placeholder {
    color: var(--text-quaternary);
}
.help-chat-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--system-blue);
    border: none;
    color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.help-chat-send:hover { background: #0066d6; }
.help-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.help-chat-send .material-symbols-outlined { font-size: 18px; }

.help-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ─── Help Mobile ─── */
@media (max-width: 600px) {
    .help-drawer { width: 100vw; }
    .help-fab { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════
   FORECAST WIDGET — "What's Coming Up" (v45.0)
   ═══════════════════════════════════════ */
.fc-widget {
    background: var(--glass-bg);
    border-radius: 22px;
    border: 0.5px solid rgba(0,0,0,0.04);
    overflow: hidden;
    backdrop-filter: blur(20px);
    margin-bottom: 16px;
}
.fc-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px 14px;
}
.fc-title {
    font-size: 16px; font-weight: 780;
    color: var(--text-primary); letter-spacing: -0.02em;
}
.fc-subtitle {
    font-size: 12px; font-weight: 500;
    color: var(--text-tertiary); margin-top: 2px;
}
.fc-toggle {
    display: flex; background: rgba(0,0,0,0.04);
    border-radius: 8px; padding: 2px;
}
.fc-toggle-btn {
    padding: 5px 14px; border-radius: 6px;
    border: none; background: transparent;
    font-size: 11px; font-weight: 650;
    color: var(--text-tertiary); cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.15s;
}
.fc-toggle-btn.on {
    background: white;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.fc-summary {
    display: flex; padding: 0 22px 16px;
}
.fc-summary-col { flex: 1; }
.fc-summary-col.right { text-align: right; }
.fc-summary-label {
    font-size: 10px; font-weight: 650;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.fc-summary-label.green { color: var(--system-green); }
.fc-summary-label.red { color: var(--system-red); }
.fc-summary-value {
    font-size: 20px; font-weight: 750;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-medium);
}
.fc-summary-value.green { color: var(--system-green); }
.fc-summary-value.red { color: var(--system-red); }
.fc-events {
    border-top: 1px solid rgba(0,0,0,0.04);
}
.fc-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 22px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
    transition: background 0.15s;
}
.fc-row.today { background: rgba(0,122,255,0.02); }
.fc-row:last-child { border-bottom: none; }
.fc-date {
    width: 38px; text-align: center; flex-shrink: 0;
}
.fc-date-month {
    font-size: 9px; font-weight: 650;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-quaternary); display: block; line-height: 1;
}
.fc-row.today .fc-date-month { color: var(--system-blue); }
.fc-date-day {
    font-size: 20px; font-weight: 850;
    color: var(--text-primary); letter-spacing: -0.03em;
    line-height: 1.1; display: block;
}
.fc-row.today .fc-date-day { color: var(--system-blue); }
.fc-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fc-icon .material-symbols-outlined { font-size: 15px; }
.fc-icon.income { background: rgba(52,199,89,0.08); color: var(--system-green); }
.fc-icon.bill { background: rgba(255,59,48,0.06); color: var(--system-red); }
.fc-name {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 640;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-joint-badge {
    font-size: 9px; font-weight: 700;
    background: rgba(48,176,199,0.08); color: var(--system-teal);
    padding: 1px 6px; border-radius: 4px;
    vertical-align: middle; margin-left: 4px;
    text-transform: uppercase;
}
.fc-bank-badge {
    vertical-align: middle; margin-left: 2px;
}
.fc-bank-badge .material-symbols-outlined {
    font-size: 12px; color: var(--system-teal); vertical-align: middle;
}
.fc-amount {
    font-size: 14px; font-weight: 720;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.fc-amount.income { color: var(--system-green); }
.fc-amount.bill { color: var(--text-primary); }
.fc-empty {
    padding: 24px; text-align: center;
    font-size: 13px; font-weight: 500;
    color: var(--text-tertiary);
}
@media (max-width: 480px) {
    .fc-summary-value { font-size: 16px; }
    .fc-header { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* Bank linked badge on bill rows */
.bills-bank-badge {
    font-size: 10px; font-weight: 650;
    color: var(--system-teal);
    display: inline-flex; align-items: center; gap: 2px;
}

/* Toggle description in bill edit modal */
.be-toggle-text-wrap {
    display: flex; flex-direction: column;
}
.be-toggle-desc {
    font-size: 11px; font-weight: 450;
    color: var(--text-tertiary);
    margin-top: 1px;
}


/* ══════════════════════════════════════════════════════════
   PAY EVENT ACTION SHEET
   ══════════════════════════════════════════════════════════ */

.pay-event-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.pay-event-backdrop.visible { opacity: 1; }

.pay-event-sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 420px;
    background: var(--surface-1);
    border-radius: 20px 20px 0 0;
    padding: 24px 24px 32px;
    z-index: 2001;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 40px rgba(0,0,0,0.12);
}
.pay-event-sheet.visible { transform: translateX(-50%) translateY(0); }

.pay-event-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.pay-event-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.pay-event-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary);
}
.pay-event-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pay-event-close .material-symbols-outlined {
    font-size: 16px;
    color: var(--text-tertiary);
}

.pay-event-date {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.pay-event-amount {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: var(--mono-ls-large);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.pay-event-amount.received { color: var(--system-green); }

.pay-event-variance {
    font-size: 12px;
    font-weight: 550;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.pay-event-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: 10px;
}
.pay-event-status.confirmed {
    color: var(--system-green);
    background: rgba(52, 199, 89, 0.06);
}
.pay-event-status .material-symbols-outlined { font-size: 18px; }

.pay-event-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}
.pay-event-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 0.5px solid rgba(0,0,0,0.06);
    background: rgba(0,0,0,0.015);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sf);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.pay-event-action:hover { background: rgba(0,0,0,0.03); }
.pay-event-action .material-symbols-outlined { font-size: 18px; }
.pay-event-action.primary {
    background: rgba(52,199,89,0.06);
    border-color: rgba(52,199,89,0.15);
    color: var(--system-green);
}
.pay-event-action.primary:hover { background: rgba(52,199,89,0.1); }
.pay-event-action.danger { color: var(--system-red); }
.pay-event-action.subtle {
    border: none;
    background: none;
    color: var(--text-tertiary);
    font-weight: 550;
}

/* Dark mode overrides */
[data-theme="dark"] .pay-event-close { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .pay-event-action { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .pay-event-action:hover { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .pay-event-action.primary { background: rgba(52,199,89,0.1); border-color: rgba(52,199,89,0.2); }


/* ══════════════════════════════════════════════════════════
   BREATHER BUTTON — escape hatch 🐾
   ══════════════════════════════════════════════════════════ */

/* ── The paw button ── */
.breather-btn {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-quaternary);
    opacity: 0.12;
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}
.breather-btn .material-symbols-outlined { font-size: 20px; }
.breather-btn:hover {
    opacity: 0.6;
    background: rgba(255, 159, 67, 0.06);
    box-shadow: 0 0 24px rgba(255, 159, 67, 0.12);
}
.breather-btn:active { transform: scale(0.93); }

/* Whisper tooltip */
.breather-whisper {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.breather-btn:hover .breather-whisper { opacity: 1; }
[data-theme="dark"] .breather-whisper {
    background: rgba(58, 58, 60, 0.95);
    color: rgba(255,255,255,0.85);
}

/* ── Overlay ── */
.breather-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9000;
}
.breather-overlay.active { display: flex; align-items: center; justify-content: center; }

.breather-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: breatherFadeIn 0.25s ease-out;
}
.breather-overlay.closing .breather-backdrop { animation: breatherFadeOut 0.2s ease-in forwards; }

/* ── Card ── */
.breather-card {
    position: relative;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    border-radius: 24px;
    background: #1c1c1e;
    box-shadow: 0 0 80px rgba(255, 159, 67, 0.08), 0 20px 60px rgba(0,0,0,0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
    animation: breatherCardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.breather-overlay.closing .breather-card { animation: breatherCardOut 0.2s ease-in forwards; }

.breather-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s;
}
.breather-close:hover { background: rgba(255,255,255,0.18); }
.breather-close .material-symbols-outlined { font-size: 18px; }

.breather-content {
    flex: 1;
    overflow-y: auto;
    padding: 40px 28px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.breather-footer {
    padding: 12px 28px 20px;
    display: flex;
    justify-content: center;
}
.breather-shuffle {
    border: none;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.breather-shuffle:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.breather-shuffle .material-symbols-outlined { font-size: 16px; }

/* ── Affirmation ── */
.breather-affirmation { text-align: center; padding: 20px 0; }
.breather-affirmation-emoji { font-size: 48px; margin-bottom: 20px; }
.breather-affirmation-text {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-sf, -apple-system, sans-serif);
}

/* ── Drag Race Quote ── */
.breather-quote { text-align: center; padding: 10px 0; }
.breather-quote-mark {
    font-size: 72px;
    line-height: 1;
    color: rgba(175, 82, 222, 0.3);
    font-family: Georgia, serif;
    margin-bottom: -10px;
}
.breather-quote-text {
    font-size: 24px;
    font-weight: 600;
    font-style: italic;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin-bottom: 16px;
}
.breather-quote-queen {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* ── Video ── */
.breather-video-wrap { width: 100%; }
.breather-video-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
    text-align: center;
}
.breather-video {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}
.breather-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Mini-Games ── */
.breather-game { text-align: center; padding: 10px 0; width: 100%; }
.breather-game-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    margin-bottom: 24px;
}
.breather-petname {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}
.breather-game-btn {
    border: none;
    background: rgba(255, 159, 67, 0.15);
    color: rgba(255, 159, 67, 0.9);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.breather-game-btn:hover { background: rgba(255, 159, 67, 0.25); }
.breather-game-btn .material-symbols-outlined { font-size: 18px; }

/* Stress cats */
.breather-stress-cats {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}
.breather-stress-cat {
    font-size: 36px;
    background: rgba(255,255,255,0.05);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.breather-stress-cat:hover { background: rgba(255,255,255,0.1); transform: scale(1.1); }
.breather-stress-cat.selected { border-color: rgba(255, 159, 67, 0.5); background: rgba(255, 159, 67, 0.1); }
.breather-stress-response {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    min-height: 48px;
}

/* Fortune cookie */
.breather-fortune { text-align: center; padding: 10px 0; }
.breather-fortune-cookie {
    font-size: 64px;
    margin-bottom: 20px;
    display: inline-block;
}
.breather-fortune-text {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 16px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.breather-fortune-text.hidden { opacity: 0; height: 0; overflow: hidden; margin: 0; }

/* ── Animations ── */
@keyframes breatherFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes breatherFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes breatherCardIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes breatherCardOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.95) translateY(10px); }
}
@keyframes breatherPop {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes breatherReveal {
    from { opacity: 0; transform: translateY(8px); height: 0; margin-bottom: 0; }
    to { opacity: 1; transform: translateY(0); height: auto; margin-bottom: 16px; }
}
@keyframes breatherCookieCrack {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.15) rotate(-8deg); }
    60% { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .breather-card { animation: breatherFadeIn 0.15s ease !important; }
    .breather-overlay.closing .breather-card { animation: breatherFadeOut 0.15s ease !important; }
}

/* ── Mobile bottom sheet ── */
@media (max-width: 600px) {
    .breather-overlay.active { align-items: flex-end; }
    .breather-card {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 90vh;
    }
    .breather-btn {
        top: 11px;
        left: 60px;
        right: auto;
        width: 34px;
        height: 34px;
    }
    .breather-btn .material-symbols-outlined { font-size: 18px; }
    .breather-quote-text { font-size: 20px; }
    .breather-affirmation-text { font-size: 19px; }
    .breather-petname { font-size: 26px; }
    .breather-stress-cat { font-size: 28px; padding: 8px; }
}