/* ==================== BILLS & EXPENSES — Editorial Layout ==================== */

/* Force system font on entire bills page — no serif (exclude icon fonts + money amounts) */
#page-bills,
#page-bills *:not(.material-symbols-outlined):not(.hugeicons):not([class*="icon-"]):not([class*="amount"]):not([class*="total"]):not([class*="value"]):not([class*="balance"]),
.be-modal-header,
.be-modal-body,
.be-modal-body *:not(.material-symbols-outlined):not(.hugeicons):not([class*="icon-"]):not([class*="amount"]):not([class*="total"]):not([class*="value"]):not([class*="balance"]),
.be-modal-footer,
.be-modal-footer *:not(.material-symbols-outlined):not(.hugeicons):not([class*="icon-"]):not([class*="amount"]):not([class*="total"]):not([class*="value"]):not([class*="balance"]),
#billEditPanel,
#billEditPanel *:not(.material-symbols-outlined):not(.hugeicons):not([class*="icon-"]):not([class*="amount"]):not([class*="total"]):not([class*="value"]):not([class*="balance"]) {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif !important;
}
.be-editorial {
    position: relative;
    border-radius: 28px;
    overflow: visible;
    margin-bottom: 28px;
    margin-top: 32px;
}

.be-editorial-bg {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(242,242,248,0.5) 0%, rgba(244,244,250,0.3) 40%, rgba(248,247,252,0.15) 100%);
    z-index: 0;
}

.be-editorial-bg::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -5%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(200,215,255,0.2) 0%, transparent 65%);
    border-radius: 50%;
}

.be-editorial-inner {
    position: relative;
    z-index: 1;
    padding: 36px 40px 32px 218px;
    min-height: 108px;
}

/* ==================== EDITORIAL 3D ILLUSTRATIONS ==================== */
/* Apple Health / Apple Wallet category art treatment.                  */
/* The illustration is a floating editorial element, not a contained    */
/* image. Transparent PNGs sit in open space with no box, no frame,    */
/* no bounding rectangle. drop-shadow follows the alpha mask.          */
/* Think: magazine cover accent that "belongs" to the layout.          */

/* (Illustrations removed — replaced by Section Icon Tile system) */

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

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

.be-editorial-status { flex-shrink: 0; padding-top: 8px; margin-left: auto; }

.be-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
}
.be-status-pill.green {
    background: rgba(52,199,89,0.12);
    color: var(--system-green);
}
.be-status-pill.yellow {
    background: rgba(255,149,0,0.12);
    color: var(--system-orange);
}

/* --- Summary Strip --- */
.be-summary-strip {
    display: flex;
    align-items: center;
    background: var(--glass-bg-thick);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 18px;
    padding: 22px 32px;
    margin-bottom: 28px;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.48);
    box-shadow: var(--shadow-md);
}

.be-summary-item {
    flex: 1;
    text-align: center;
}

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

.be-summary-value {
    font-size: 26px;
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-large);
    color: var(--text-primary);
}
.be-summary-value.green { color: var(--system-green); }
.be-summary-value.blue { color: var(--system-blue); }

.be-summary-divider {
    width: 1px;
    height: 40px;
    background: rgba(0,0,0,0.06);
    flex-shrink: 0;
    margin: 0 4px;
}

/* --- Main 2-Column Grid --- */
.be-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.be-card-tier2 {
    background: rgba(255,255,255,0.5) !important;
    border: 0.5px solid rgba(0,0,0,0.03) !important;
    box-shadow: none !important;
}

/* --- Expense Total Bar --- */
.be-expense-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.be-expense-total {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-editorial);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* --- Apple Settings-style Expense List --- */
.be-expense-list { padding: 0 !important; }

.be-cat {
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
}
.be-cat:last-child { border-bottom: none; }

.be-cat-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.be-cat-header:hover { background: rgba(0,0,0,0.015); }

.be-cat-icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.be-cat-info { flex: 1; min-width: 0; }

.be-cat-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.be-cat-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.be-cat-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-left: 8px;
}

.be-cat-total {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    min-width: 72px;
    text-align: right;
}

.be-cat-chevron {
    font-size: 11px;
    color: var(--text-quaternary);
    transition: transform 0.2s ease;
}

.be-cat.open .be-cat-chevron {
    transform: rotate(90deg);
}

/* --- Expanded Category Body --- */
.be-cat-body {
    border-top: 0.5px solid rgba(0,0,0,0.03);
    background: rgba(0,0,0,0.01);
}

.be-expense-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 52px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
    transition: opacity 0.2s ease, background 0.15s ease;
}
.be-expense-row:last-of-type { border-bottom: none; }
.be-expense-row:hover { background: rgba(0,0,0,0.015); }
.be-expense-row.inactive { opacity: 0.4; }

.be-expense-info { flex: 1; min-width: 0; }

.be-expense-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    outline: none;
    border-radius: 4px;
    padding: 1px 2px;
}
.be-expense-name:focus {
    background: rgba(0,122,255,0.06);
}

.be-expense-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.be-expense-due {
    display: flex;
    align-items: center;
    gap: 3px;
}
.be-expense-due i { font-size: 10px; opacity: 0.5; }

.be-expense-joint {
    background: rgba(142,142,147,0.1);
    color: #8E8E93;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.be-expense-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.be-expense-amount {
    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);
    text-align: right;
    outline: none;
    border-radius: 4px;
    padding: 1px 3px;
}
.be-expense-amount:focus {
    background: rgba(0,122,255,0.06);
}

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

.be-expense-edit {
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--system-blue);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.be-expense-row:hover .be-expense-edit { opacity: 1; }

/* Add Bill inline button */
.be-cat-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px 10px 52px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--system-blue);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s ease;
}
.be-cat-add:hover { background: rgba(0,122,255,0.04); }

/* ==================== ANNUAL TABLE ==================== */
.annual-table-wrapper {
    overflow-x: auto;
    padding: 0 0 var(--space-lg);
}

.annual-table {
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
    font-size: 13px;
}

.annual-table th,
.annual-table td {
    padding: var(--space-md);
    text-align: right;
    border-bottom: 0.5px solid rgba(0,0,0,0.05);
    white-space: nowrap;
}

.annual-table th:first-child,
.annual-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    z-index: 1;
}

.annual-table th {
    font-weight: 600;
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.02);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.annual-table th:first-child {
    background: rgba(245, 245, 247, 0.95);
}

.annual-table .row-label {
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.annual-table .row-label i {
    font-size: 11px;
    width: 14px;
    opacity: 0.6;
}

.annual-table .row-income { color: var(--system-green); }
.annual-table .row-expense { color: var(--system-red); }
.annual-table .row-savings { font-weight: 600; color: var(--system-blue); }

.annual-table .cell-negative {
    background: rgba(229, 56, 59, 0.08);
    color: var(--system-red) !important;
    font-weight: 700;
    border-radius: 4px;
}

.annual-table .cell-positive {
    color: var(--system-green) !important;
}

/* ==================== INCOME — Editorial Layout ==================== */
.inc-editorial {
    position: relative;
    border-radius: 28px;
    overflow: visible;
    margin-bottom: 24px;
    margin-top: 32px;
}

.inc-editorial-bg {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(220,252,231,0.5) 0%, rgba(209,250,229,0.3) 40%, rgba(220,240,255,0.15) 100%);
    z-index: 0;
}

.inc-editorial-bg::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -5%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(190,240,210,0.2) 0%, transparent 65%);
    border-radius: 50%;
}

.inc-editorial-inner {
    position: relative;
    z-index: 1;
    padding: 36px 40px 32px 218px;
    min-height: 108px;
}

.inc-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;
}

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



/* --- Card Containers (glass) --- */
.inc-card-container {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
}

/* --- Section Headers (base layout in components.css) --- */

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

.inc-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: 6px;
    transition: background 0.15s ease;
}
.inc-section-action:hover { background: rgba(0,122,255,0.06); }

/* --- Timeline --- */
.inc-timeline-section {
    margin-bottom: 28px;
}

.inc-timeline {
    background: rgba(255,255,255,0.60);
    border-radius: 18px;
    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%);
}

.inc-timeline-event {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
    transition: background 0.12s ease;
}
.inc-timeline-event:last-child { border-bottom: none; }
.inc-timeline-event:hover { background: rgba(0,0,0,0.015); }

.inc-timeline-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    flex-shrink: 0;
}

.inc-timeline-month {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.03em;
    line-height: 1;
}

.inc-timeline-day {
    font-size: 20px;
    font-weight: 750;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.inc-timeline-line {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inc-timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.inc-timeline-info {
    flex: 1;
    min-width: 0;
}

.inc-timeline-person {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.inc-timeline-source {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.inc-timeline-amount {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--system-green);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* --- Sources by Person --- */
.inc-sources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.inc-person-section {
    background: rgba(255,255,255,0.62);
    border: 0.5px solid rgba(0,0,0,0.04);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.inc-person-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
}

.inc-person-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.inc-person-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.inc-person-total {
    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);
    flex-shrink: 0;
}

.inc-person-per {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.inc-person-sources {
    padding: 4px 0;
}

.inc-source-card {
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.12s ease;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
}
.inc-source-card:last-of-type { border-bottom: none; }
.inc-source-card:hover { background: rgba(0,0,0,0.015); }

.inc-source-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inc-source-info { flex: 1; min-width: 0; }

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

.inc-source-meta {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.inc-source-amounts {
    text-align: right;
    flex-shrink: 0;
}

.inc-source-amount {
    display: block;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.inc-source-check {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.inc-source-add {
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--system-blue);
    cursor: pointer;
    padding: 12px 20px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s ease;
}
.inc-source-add:hover { background: rgba(0,122,255,0.04); }

/* --- Additional Income List --- */
.inc-additional-list {
    background: rgba(255,255,255,0.60);
    border-radius: 18px;
    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%);
}

.inc-additional-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
    transition: background 0.12s ease;
}
.inc-additional-row:last-child { border-bottom: none; }
.inc-additional-row:hover { background: rgba(0,0,0,0.015); }

.inc-additional-info { flex: 1; min-width: 0; }

.inc-additional-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.inc-additional-month {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.inc-additional-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);
    flex-shrink: 0;
}

.inc-additional-remove {
    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);
    flex-shrink: 0;
}
.inc-additional-row:hover .inc-additional-remove { opacity: 1; }
.inc-additional-remove:hover { background: rgba(255,59,48,0.1); color: var(--system-red); }

/* --- B&E Income Summary Card --- */
.be-income-summary {
    background: rgba(255,255,255,0.60);
    border-radius: 20px;
    padding: 20px 22px 16px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out-expo);
    margin-bottom: 16px;
    border: 0.5px solid rgba(0,0,0,0.04);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-sm);
}
.be-income-summary:hover { background: rgba(255,255,255,0.75); }

.be-income-summary-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.be-income-summary-icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--system-green);
    flex-shrink: 0;
}

.be-income-summary-info { flex: 1; min-width: 0; }

.be-income-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.be-income-summary-total {
    display: block;
    font-size: 26px;
    font-weight: 600;
    font-family: var(--font-editorial);
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin-top: 2px;
}

.be-income-summary-chevron {
    color: var(--text-quaternary);
    font-size: 12px;
    flex-shrink: 0;
}

.be-income-summary-people {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 0.5px solid rgba(0,0,0,0.04);
}

.be-income-person {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.be-income-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.be-income-dot.josh { background: #007AFF; }
.be-income-dot.rob { background: #34C759; }

.be-income-person-amt {
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    margin-left: 2px;
}

/* ==================== BUDGET PLAN (BUCKET-FIRST) ==================== */
.bp-hero {
    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;
    padding: 32px 32px 28px;
    margin-bottom: 20px;
}
.bp-hero-title {
    font-family: var(--font-editorial);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.bp-hero-status { margin-bottom: 20px; }
.bp-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
}
.bp-hero-pill .material-symbols-outlined { font-size: 16px; }
.bp-hero-pill.green { background: rgba(52,199,89,0.12); color: #4A7A5A; }
.bp-hero-pill.yellow { background: rgba(255,149,0,0.12); color: #C93400; }

/* Segmented Bar */
.bp-segmented-bar { margin-top: 4px; }
.bp-seg-track {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--border-hairline);
    gap: 2px;
    padding: 2px;
}
.bp-seg-fill {
    border-radius: 5px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
    min-width: 4px;
}
.bp-seg-fill.bp-seg-needs { background: linear-gradient(90deg, #34C759, #5BD778); }
.bp-seg-fill.bp-seg-savings { background: linear-gradient(90deg, #007AFF, #409CFF); }
.bp-seg-fill.bp-seg-funded { background: linear-gradient(90deg, #FF9500, #FFB340); }

.bp-seg-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 4px;
}
.bp-seg-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}
.bp-seg-label .material-symbols-outlined { font-size: 14px; }
.bp-seg-label strong { font-weight: 700; }
.bp-seg-label.needs strong { color: #34C759; }
.bp-seg-label.savings strong { color: #007AFF; }
.bp-seg-label.funded strong { color: #FF9500; }
.bp-seg-label.unalloc strong { color: var(--text-tertiary); }
.bp-seg-fill.bp-seg-unalloc { background: rgba(58,53,50,0.12); }
.bp-hero-pill.neutral { background: rgba(142,142,147,0.12); color: var(--text-tertiary); }

/* ─── Income Source Card ─── */
.bp-income-card {
    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: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border-left: none;
}
.bp-income-top {
    display: flex; align-items: center; gap: 12px;
}
.bp-bucket-icon.income {
    background: rgba(0,199,190,0.12);
    color: #00C7BE;
}
.bp-income-info { flex: 1; min-width: 0; }
.bp-income-label {
    display: block; font-size: 11px; font-weight: 650;
    color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em;
}
.bp-income-amount {
    display: block; font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 24px; font-weight: 600; letter-spacing: var(--mono-ls-large);
    color: var(--text-primary); line-height: 1.15;
}
.bp-income-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bp-income-link {
    width: 28px; height: 28px; border-radius: 8px; border: none;
    background: var(--surface-2); display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-tertiary); transition: all 0.15s;
}
.bp-income-link:hover { color: var(--system-blue); background: rgba(0,122,255,0.08); }
.bp-income-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 100px;
    font-size: 11px; font-weight: 650;
}
.bp-income-pill.green { background: rgba(52,199,89,0.12); color: #4A7A5A; }
.bp-income-pill.yellow { background: rgba(255,149,0,0.12); color: #C93400; }
.bp-income-pill.neutral { background: rgba(142,142,147,0.12); color: var(--text-tertiary); }

/* Income breakdown */
.bp-income-breakdown {
    margin-top: 12px; padding-top: 10px;
    border-top: 0.5px solid rgba(0,0,0,0.04);
}
.bp-income-src {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 12.5px;
}
.bp-income-src-name { color: var(--text-secondary); font-weight: 550; }
.bp-income-src-amt { color: var(--text-tertiary); font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bp-income-alloc {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 12px; color: var(--text-tertiary); font-weight: 550;
}
.bp-income-alloc-result {
    padding-top: 6px; margin-top: 4px;
    border-top: 0.5px solid rgba(0,0,0,0.04);
    font-weight: 700; color: var(--text-primary); font-size: 13px;
}
.bp-income-alloc-result .green { color: var(--system-green); }
.bp-income-alloc-result .orange { color: var(--system-orange); }
.bp-buckets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* Bucket Card */
.bp-bucket-card {
    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;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}
.bp-bucket-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

/* v34 M-4: Joint Funding bucket — visually distinct */
#bpBucketJoint {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(0,122,255,0.04) 0%, rgba(142,142,147,0.04) 100%);
    border-color: rgba(0,122,255,0.18);
}
#bpBucketJoint .bp-bucket-bar { height: 10px; border-radius: 100px; }
#bpBucketJoint .bp-bucket-toggle { font-weight: 600; color: var(--system-blue); }

.bp-bucket-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.bp-bucket-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bp-bucket-icon .material-symbols-outlined { font-size: 22px; color: white; }
.bp-bucket-icon.needs { background: linear-gradient(135deg, #34C759, #248A3D); }
.bp-bucket-icon.savings { background: linear-gradient(135deg, #007AFF, #5A7E9C); }
/* .bp-bucket-icon.fun removed in v33 — replaced by .funded */

.bp-bucket-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.bp-bucket-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.bp-bucket-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: var(--mono-ls-large);
    color: var(--text-primary);
}
.bp-bucket-pct {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-tertiary);
    margin-left: auto;
}
.bp-bucket-status {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100px;
}
.bp-bucket-status.on-track { background: rgba(52,199,89,0.12); color: #4A7A5A; }
.bp-bucket-status.behind { background: rgba(255,59,48,0.12); color: #FF3B30; }

/* Bucket progress bars */
.bp-bucket-bar {
    height: 6px;
    border-radius: 100px;
    background: rgba(0,0,0,0.04);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 10px;
}
.bp-bucket-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.bp-bucket-bar-fill.needs { background: linear-gradient(90deg, #34C759, #5BD778); }
.bp-bucket-bar-fill.savings { background: linear-gradient(90deg, #007AFF, #409CFF); }
/* .bp-bucket-bar-fill.fun removed in v33 — replaced by .funded */

.bp-bucket-meta {
    font-size: 12.5px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.4;
    min-height: 18px;
}

/* Bucket Toggle Button */
.bp-bucket-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}
#bpNeedsToggle { background: linear-gradient(135deg, #34C759, #248A3D); color: white; }
#bpSavingsToggle { background: linear-gradient(135deg, #007AFF, #5A7E9C); color: white; }
#bpFunToggle { background: linear-gradient(135deg, #AF52DE, #A67E8E); color: white; }
.bp-bucket-toggle:hover { filter: brightness(1.08); }

.bp-bucket-toggle-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}
.bp-bucket-toggle.open .bp-bucket-toggle-icon {
    transform: rotate(180deg);
}
.bp-bucket-toggle.open .bp-bucket-toggle-label::after { content: ''; }

/* Bucket Details (expandable) */
.bp-bucket-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, margin 0.3s ease;
    opacity: 0;
    margin-top: 0;
}
.bp-bucket-details.open {
    max-height: 2000px;
    opacity: 1;
    margin-top: 16px;
}
.bp-bucket-details-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-hairline);
    margin-bottom: 4px;
}
.bp-bucket-details-header .material-symbols-outlined { font-size: 18px; color: var(--text-tertiary); }
.bp-bucket-details-header span:nth-child(2) { font-weight: 600; font-size: 14px; }
.bp-bucket-details-total {
    margin-left: auto;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}
.bp-bucket-details-sub {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 6px 0 4px;
}

/* Category breakdowns inside Needs bucket */
.bp-cat { border-bottom: 1px solid var(--border-hairline); }
.bp-cat:last-child { border-bottom: none; }
.bp-cat-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 8px;
}
.bp-cat-header:hover { background: rgba(0,0,0,0.02); }

.bp-cat-icon { font-size: 18px; color: var(--text-tertiary); flex-shrink: 0; }
.bp-cat-name { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }
.bp-cat-count {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 4px;
}
.bp-cat-total {
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-display);
    min-width: 72px;
    text-align: right;
    flex-shrink: 0;
    padding-left: 8px;
}
.bp-cat-chevron {
    font-size: 16px;
    color: var(--text-quaternary);
    transition: transform 0.2s ease;
}
.bp-cat.open .bp-cat-chevron { transform: rotate(90deg); }

.bp-cat-body {
    padding: 0 0 8px 36px;
}
.bp-bill-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 6px;
}
.bp-bill-row.inactive { opacity: 0.4; }
.bp-bill-check { font-size: 18px; color: var(--text-quaternary); flex-shrink: 0; }
.bp-bill-name { flex: 1; font-size: 13px; color: var(--text-secondary); min-width: 0; }
.bp-bill-amount {
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    text-align: right;
    margin-right: 8px;
    flex-shrink: 0;
}
.bp-cat-add-bill {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 8px;
    border: none;
    background: none;
    color: var(--system-blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    font-family: var(--font-body);
}
.bp-cat-add-bill:hover { background: rgba(0,122,255,0.06); }
.bp-cat-add-bill .material-symbols-outlined { font-size: 16px; }

.bp-bucket-add-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    border: 1px dashed var(--border-hairline);
    background: none;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    width: 100%;
    font-family: var(--font-body);
}
.bp-bucket-add-cat:hover { background: rgba(0,0,0,0.02); color: var(--system-blue); border-color: var(--system-blue); }
.bp-bucket-add-cat .material-symbols-outlined { font-size: 16px; }

/* Savings rows */
.bp-savings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-hairline);
}
.bp-savings-row:last-child { border-bottom: none; }
.bp-savings-name { flex: 1; font-size: 14px; font-weight: 500; }
.bp-savings-target { font-weight: 700; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.bp-savings-total-row { border-top: 2px solid var(--border-hairline); margin-top: 4px; padding-top: 12px; }

/* Joint Funding rows */
.bp-fun-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-hairline);
}
.bp-fun-row:last-child { border-bottom: none; }
.bp-fun-name { flex: 1; font-size: 14px; font-weight: 500; }
.bp-fun-amount { font-weight: 700; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.bp-fun-avg { border-top: 1px solid var(--border-hairline); margin-top: 2px; }

/* Bottom Grid */
.bp-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}
.bp-bottom-card {
    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;
    padding: 24px;
}
.bp-bottom-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.bp-bottom-card-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-display);
}
.bp-bottom-card-header h3 .material-symbols-outlined { font-size: 20px; color: var(--text-tertiary); }
.bp-view-all {
    background: none;
    border: none;
    color: var(--system-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
}
.bp-view-all:hover { text-decoration: underline; }

/* Planned expenses preview */
.bp-planned-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-hairline);
}
.bp-planned-row:last-of-type { border-bottom: none; }
.bp-planned-icon { font-size: 20px; color: var(--text-tertiary); }
.bp-planned-info { flex: 1; }
.bp-planned-name { font-weight: 600; font-size: 14px; display: block; }
.bp-planned-month { font-size: 12px; color: var(--text-tertiary); }
.bp-planned-amount { font-weight: 700; font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.bp-planned-empty { color: var(--text-tertiary); font-size: 13px; padding: 12px 0; }
.bp-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--system-blue);
    font-size: 13px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 12px;
    font-family: var(--font-body);
}

/* Suggestions */
.bp-suggestion-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-hairline);
}
.bp-suggestion-row:last-child { border-bottom: none; }
.bp-suggestion-icon { font-size: 20px; color: var(--system-blue); flex-shrink: 0; margin-top: 1px; }
.bp-suggestion-text { font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.bp-suggestions-action {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
.btn-outline-sm {
    padding: 8px 20px;
    border: 1.5px solid var(--system-blue);
    background: none;
    color: var(--system-blue);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.15s ease;
}
.btn-outline-sm:hover { background: var(--system-blue); color: white; }

/* ==================== BUDGET v2 (EDITORIAL REDESIGN) ==================== */

/* ==================== BUDGET HERO — Apple Fitness Editorial ==================== */
/* Glass card surface with Apple Fitness ring, status pill, pace line, inline CTAs  */

.bp2-hero {
    position: relative;
    padding: 8px 0 0;
    margin-bottom: var(--space-2xl);
}

/* --- Month Navigation --- */
.bp2-hero-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--space-xl);
}
.bp2-nav-arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.bp2-nav-arrow:hover { background: rgba(0,0,0,0.08); }
.bp2-nav-arrow .material-symbols-outlined { font-size: 18px; }
.bp2-nav-month {
    font-size: 15px; font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    padding: 0 4px;
}
.bp2-nav-today {
    margin-left: 8px; border: none;
    background: rgba(0,122,255,0.08);
    color: var(--system-blue);
    font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 100px;
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    transition: background 0.15s ease;
}
.bp2-nav-today:hover { background: rgba(0,122,255,0.14); }
.bp2-nav-today .material-symbols-outlined { font-size: 14px; }

/* --- Glass Hero Card --- */
.bp2-hero-card {
    background: linear-gradient(165deg, rgba(255,255,255,0.72) 0%, rgba(245,248,255,0.58) 50%, rgba(240,244,255,0.48) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(255,255,255,0.65);
    border-radius: 28px;
    corner-shape: squircle;
    padding: 32px 36px 0;
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.6) inset,
        0 1px 2px rgba(0,0,0,0.02),
        0 8px 32px rgba(0,0,0,0.06),
        0 24px 64px -8px rgba(0,0,0,0.04);
    overflow: hidden;
    position: relative;
}
/* Ambient glow behind ring area */
.bp2-hero-card::before {
    content: '';
    position: absolute;
    top: -30px; left: -30px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(52,199,89,0.08) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    transition: background 0.5s ease;
}
.bp2-hero-card.status-orange::before {
    background: radial-gradient(circle, rgba(255,149,0,0.08) 0%, transparent 65%);
}
.bp2-hero-card.status-red::before {
    background: radial-gradient(circle, rgba(255,59,48,0.08) 0%, transparent 65%);
}

/* --- Hero Body: Ring + Content side-by-side --- */
.bp2-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    position: relative;
    z-index: 1;
}

/* --- Funding Ring (enlarged to 180px) --- */
.bp2-ring-wrap {
    position: relative;
    width: 180px; height: 180px;
    flex-shrink: 0;
}
.bp2-ring {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.bp2-ring-track {
    fill: none;
    stroke: rgba(0,0,0,0.06);
    stroke-width: 11;
    stroke-linecap: round;
}
.bp2-ring-fill {
    fill: none;
    stroke: var(--system-green);
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1), stroke 0.4s ease;
    filter: drop-shadow(0 0 8px rgba(52,199,89,0.35));
}
.bp2-ring-fill.green {
    stroke: var(--system-green);
    filter: drop-shadow(0 0 8px rgba(52,199,89,0.35));
}
.bp2-ring-fill.orange {
    stroke: var(--system-orange);
    filter: drop-shadow(0 0 8px rgba(255,149,0,0.35));
}
.bp2-ring-fill.red {
    stroke: var(--system-red);
    filter: drop-shadow(0 0 8px rgba(255,59,48,0.35));
}
.bp2-ring-pace {
    fill: none;
    stroke: rgba(0,0,0,0.08);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}
.bp2-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
}
.bp2-ring-pct {
    font-family: var(--font-editorial);
    font-size: 40px; font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    line-height: 1;
}
.bp2-ring-amt {
    font-family: var(--font-sf);
    font-size: 14px; font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    margin-top: 2px;
}
.bp2-ring-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* --- Status Pill --- */
.bp2-status-pill {
    display: inline-flex; align-items: center;
    gap: 6px; padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}
.bp2-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%; flex-shrink: 0;
}
.bp2-status-pill.green {
    background: rgba(52,199,89,0.12); color: #1B8B3A;
}
.bp2-status-pill.green .bp2-status-dot {
    background: var(--system-green);
    box-shadow: 0 0 6px rgba(52,199,89,0.4);
}
.bp2-status-pill.orange {
    background: rgba(255,149,0,0.12); color: #C67500;
}
.bp2-status-pill.orange .bp2-status-dot {
    background: var(--system-orange);
    box-shadow: 0 0 6px rgba(255,149,0,0.4);
}
.bp2-status-pill.red {
    background: rgba(255,59,48,0.12); color: #C23023;
}
.bp2-status-pill.red .bp2-status-dot {
    background: var(--system-red);
    box-shadow: 0 0 6px rgba(255,59,48,0.4);
}

/* --- Headline + Content (right of ring) --- */
.bp2-hero-content {
    flex: 1; min-width: 0;
    padding-top: 4px;
}
.bp2-headline {
    font-family: var(--font-editorial);
    font-size: 34px; font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.bp2-hero-sub {
    font-size: 15px; font-weight: 440;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0 0 4px;
    max-width: 380px;
}
.bp2-hero-pace {
    font-size: 12px; font-weight: 600;
    color: var(--text-tertiary);
    display: flex; align-items: center; gap: 4px;
    margin: 0 0 var(--space-lg);
}
.bp2-hero-pace .material-symbols-outlined { font-size: 14px; opacity: 0.6; }

/* --- KPI Row --- */
.bp2-kpi-row {
    display: flex; align-items: stretch; gap: 0;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 0.5px solid rgba(0,0,0,0.06);
    border-radius: 14px; corner-shape: squircle;
    padding: 12px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: var(--space-lg);
}
.bp2-kpi {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 2px; padding: 0 14px;
}
.bp2-kpi-value {
    font-family: var(--font-editorial);
    font-size: 20px; font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary); line-height: 1.2;
}
.bp2-kpi-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}
.bp2-kpi-divider {
    width: 0.5px; background: rgba(0,0,0,0.08);
    align-self: stretch; flex-shrink: 0;
}
.bp2-kpi-funded  { color: var(--system-blue); }
.bp2-kpi-remaining.green  { color: var(--system-green); }
.bp2-kpi-remaining.orange { color: var(--system-orange); }
.bp2-kpi-remaining.red    { color: var(--system-red); }

/* --- CTAs (inside hero content) --- */
.bp2-cta {
    display: flex; gap: 8px; align-items: center;
}
.bp2-cta-primary {
    background: var(--system-green); color: white;
    border: none; padding: 10px 22px;
    font-size: 14px; font-weight: 650;
    border-radius: 12px; corner-shape: squircle;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: filter 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(52,199,89,0.25);
}
.bp2-cta-primary:hover { filter: brightness(1.08); }
.bp2-cta-primary:active { transform: scale(0.97); }
.bp2-cta-secondary {
    background: rgba(0,0,0,0.04); color: var(--text-secondary);
    border: none; padding: 10px 18px;
    font-size: 14px; font-weight: 600;
    border-radius: 12px; corner-shape: squircle;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s ease;
}
.bp2-cta-secondary:hover { background: rgba(0,0,0,0.08); }

/* --- Hero Footer: Micro bar --- */
.bp2-hero-footer {
    display: flex; align-items: center;
    padding: 14px 0;
    margin-top: var(--space-xl);
    border-top: 0.5px solid rgba(0,0,0,0.06);
}
.bp2-micro {
    font-size: 13px; color: var(--text-tertiary);
    display: flex; align-items: center;
    gap: 6px; flex: 1; min-width: 0;
}
.bp2-micro .material-symbols-outlined { font-size: 15px; opacity: 0.7; }

/* --- Insights Section (Analytics merged in v36) --- */
/* ==================== INSIGHTS SECTION ==================== */
.bp2-insights {
    margin-bottom: var(--space-3xl);
}

/* Editorial Callout Card */
.bp2-insight-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, rgba(255,214,10,0.08), rgba(255,159,10,0.05));
    border-left: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    corner-shape: squircle;
    margin-bottom: var(--space-xl);
}
.bp2-insight-callout-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    corner-shape: squircle;
    background: linear-gradient(135deg, #FFD60A, #FF9F0A);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bp2-insight-callout-icon .material-symbols-outlined {
    color: white;
    font-size: 18px;
}
.bp2-insight-callout-text {
    font-size: 14px;
    font-weight: 450;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 4px 0 0;
}

/* 2×2 KPI Grid (Apple Health Highlights) */
.bp2-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.bp2-kpi-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--glass-bg-thick);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.35);
    border-top-color: rgba(255,255,255,0.55);
    border-radius: var(--radius-xl);
    corner-shape: squircle;
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.03),
        0 2px 8px rgba(0,0,0,0.04),
        0 8px 24px -4px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
}
.bp2-kpi-cell:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.05),
        0 12px 32px -4px rgba(0,0,0,0.07);
}
.bp2-kpi-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-xl);
    right: var(--space-xl);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
}
.bp2-kpi-cell-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    corner-shape: squircle;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bp2-kpi-cell-icon .material-symbols-outlined {
    font-size: 18px;
    color: white;
}
.bp2-kpi-cell-icon.income { background: linear-gradient(135deg, #30D158, #34C759); }
.bp2-kpi-cell-icon.expense { background: linear-gradient(135deg, #FF453A, #FF6961); }
.bp2-kpi-cell-icon.net { background: linear-gradient(135deg, #007AFF, #5AC8FA); }
.bp2-kpi-cell-icon.savings { background: linear-gradient(135deg, #AF52DE, #BF5AF2); }
.bp2-kpi-cell-body { flex: 1; min-width: 0; }
.bp2-kpi-cell-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.bp2-kpi-cell-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mono-ls-large);
    line-height: 1.15;
    color: var(--text-primary);
}
.bp2-kpi-cell-value.positive { color: var(--system-green); }
.bp2-kpi-cell-value.negative { color: var(--system-red); }
.bp2-kpi-cell-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 3px;
}
.bp2-kpi-cell-meta .material-symbols-outlined {
    font-size: 12px;
    opacity: 0.7;
}

/* Tappable chart cards with sparkline previews */
.bp2-chart-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.bp2-chart-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    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: var(--radius-xl);
    corner-shape: squircle;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease;
    font-family: inherit;
    text-align: left;
}
.bp2-chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.bp2-chart-card:active { transform: scale(0.98); }
.bp2-chart-card-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    corner-shape: squircle;
    background: linear-gradient(135deg, #007AFF, #5AC8FA);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bp2-chart-card-icon.spending {
    background: linear-gradient(135deg, #AF52DE, #FF2D55);
}
.bp2-chart-card-icon .material-symbols-outlined { color: white; font-size: 20px; }
.bp2-chart-card-info { flex: 1; min-width: 0; }
.bp2-chart-card-title {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--text-primary);
}
.bp2-chart-card-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-top: 1px;
}
.bp2-chart-card-spark {
    width: 48px; height: 24px;
    flex-shrink: 0;
    color: var(--system-blue);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.bp2-chart-card-spark.donut {
    width: 24px; height: 24px;
}
.bp2-chart-card:hover .bp2-chart-card-spark {
    opacity: 0.8;
}
.bp2-chart-card-chevron {
    font-size: 18px;
    color: var(--text-quaternary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.bp2-chart-card:hover .bp2-chart-card-chevron {
    transform: translateX(3px);
    color: var(--text-secondary);
}

/* Metric pills — horizontal scroll strip */
.bp2-metric-pills {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: var(--space-xs) 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bp2-metric-pills::-webkit-scrollbar { display: none; }
.bp2-metric-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--glass-bg-thick);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.bp2-metric-pill:hover {
    transform: translateY(-1px);
}
.bp2-metric-pill-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
}
.bp2-metric-pill-icon .material-symbols-outlined {
    font-size: 16px;
}
.bp2-metric-pill-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
}
.bp2-metric-pill-value {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-display);
}
.bp2-metric-pill-arrow {
    font-size: 14px;
    display: flex;
    align-items: center;
}
.bp2-metric-pill-arrow .material-symbols-outlined {
    font-size: 14px;
}

/* --- Chart Modal --- */
.chart-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 6000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.chart-modal-overlay.active { display: flex; }
.chart-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.chart-modal-panel {
    position: relative;
    z-index: 1;
    background: #F5F5F7;
    border-radius: 20px;
    corner-shape: squircle;
    width: 100%;
    max-width: 680px;
    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: chartModalIn 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes chartModalIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.chart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 0.5px solid var(--separator);
}
.chart-modal-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.chart-modal-icon {
    font-size: 22px;
    color: var(--system-blue);
}
.chart-modal-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.chart-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--surface-2);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.chart-modal-close:hover { background: rgba(0,0,0,0.08); color: var(--text-primary); }
.chart-modal-close .material-symbols-outlined { font-size: 18px; }
.chart-modal-body {
    padding: 24px 28px 28px;
}
.chart-modal-view .chart-container {
    height: 340px;
}
.chart-modal-view .donut-wrapper {
    padding: 20px 0;
}
.chart-modal-view .donut-legend {
    margin-top: 16px;
}

@media (max-width: 900px) {
    .bp2-kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .bp2-kpi-cell { padding: var(--space-md); }
    .bp2-kpi-cell-value { font-size: 18px; }
    .bp2-chart-cards { grid-template-columns: 1fr; }
    .chart-modal-overlay { padding: 16px; }
    .chart-modal-panel { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
    .chart-modal-body { padding: 20px 16px 24px; }
    .chart-modal-view .chart-container { height: 260px; }
}
@media (max-width: 480px) {
    .bp2-kpi-grid { grid-template-columns: 1fr; }
    .bp2-chart-cards { grid-template-columns: 1fr; }
    .bp2-person-cards { grid-template-columns: 1fr; }
}

/* ==================== BASELINE BREAKDOWN ==================== */
.bp2-baseline {
    background: var(--surface-1);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: var(--radius-2xl);
    corner-shape: squircle;
    padding: 0;
    margin-bottom: var(--space-3xl);
    overflow: hidden;
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.04),
        0 2px 8px rgba(0,0,0,0.04),
        0 8px 32px -4px rgba(0,0,0,0.06);
}
.bp2-baseline-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-2xl);
}
.bp2-baseline-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background: linear-gradient(135deg, #007AFF, #5856D6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,122,255,0.25);
}
.bp2-baseline-icon .material-symbols-outlined { color: white; font-size: 20px; }
.bp2-baseline-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.bp2-baseline-rows { border-top: 0.5px solid var(--separator); }

/* Category rows with colored left accent */
.bp2-baseline-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 14px var(--space-2xl) 14px calc(var(--space-2xl) - 4px);
    border-bottom: 0.5px solid var(--separator);
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}
.bp2-baseline-row:hover { background: rgba(0,0,0,0.018); }
.bp2-baseline-row.cat-bills { border-left-color: var(--system-green); }
.bp2-baseline-row.cat-debt { border-left-color: var(--system-orange); }
.bp2-baseline-row.cat-savings { border-left-color: var(--system-blue); }
.bp2-baseline-row.cat-goals { border-left-color: var(--system-purple); }
.bp2-baseline-row.cat-planned { border-left-color: var(--system-teal); }

/* Gradient icon tile per category */
.bp2-baseline-row-tile {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    corner-shape: squircle;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bp2-baseline-row-tile .material-symbols-outlined { color: white; font-size: 18px; }
.bp2-baseline-row-tile.tile-bills { background: linear-gradient(135deg, #30D158, #34C759); }
.bp2-baseline-row-tile.tile-debt { background: linear-gradient(135deg, #FF9500, #FF6723); }
.bp2-baseline-row-tile.tile-savings { background: linear-gradient(135deg, #007AFF, #5AC8FA); }
.bp2-baseline-row-tile.tile-goals { background: linear-gradient(135deg, #AF52DE, #BF5AF2); }
.bp2-baseline-row-tile.tile-planned { background: linear-gradient(135deg, #30B0C7, #5AC8FA); }

.bp2-baseline-row-body {
    flex: 1;
    min-width: 0;
}
.bp2-baseline-row-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}
.bp2-baseline-row-count {
    font-size: 12px;
    color: var(--text-tertiary);
    display: block;
    margin-top: 1px;
}

/* Mini inline progress bar */
.bp2-baseline-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 100px;
}
.bp2-baseline-row-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: var(--mono-ls-medium);
    color: var(--text-primary);
}
.bp2-baseline-row-bar {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.05);
    overflow: hidden;
}
.bp2-baseline-row-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.bp2-baseline-row-bar-fill.bar-bills { background: var(--system-green); }
.bp2-baseline-row-bar-fill.bar-debt { background: var(--system-orange); }
.bp2-baseline-row-bar-fill.bar-savings { background: var(--system-blue); }
.bp2-baseline-row-bar-fill.bar-goals { background: var(--system-purple); }
.bp2-baseline-row-bar-fill.bar-planned { background: var(--system-teal); }

.bp2-baseline-row-chevron {
    font-size: 18px;
    color: var(--text-quaternary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.bp2-baseline-row-chevron.open { transform: rotate(180deg); }

/* Expandable detail */
.bp2-baseline-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
    opacity: 0;
    background: rgba(0,0,0,0.012);
}
.bp2-baseline-detail.open {
    max-height: 2000px;
    opacity: 1;
}
.bp2-baseline-detail-inner {
    padding: var(--space-md) var(--space-2xl) var(--space-lg) 68px;
}
.bp2-baseline-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.bp2-baseline-detail-row span:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Elevated total row */
.bp2-baseline-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl) var(--space-2xl);
    background: linear-gradient(135deg, rgba(0,122,255,0.06), rgba(88,86,214,0.04));
    border-top: 1px solid rgba(0,122,255,0.1);
}
.bp2-baseline-total-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.bp2-baseline-total-amt {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--system-blue);
}

/* ==================== FUNDING SOURCES ==================== */
.bp2-funding-section {
    margin-bottom: var(--space-3xl);
}
.bp2-funding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}
.bp2-funding-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.bp2-funding-title-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background: linear-gradient(135deg, #30D158, #007AFF);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(48,209,88,0.25);
}
.bp2-funding-title-icon .material-symbols-outlined { color: white; font-size: 20px; }
.bp2-funding-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--system-blue);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.bp2-funding-link:hover { text-decoration: underline; }

/* Person cards grid */
.bp2-person-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.bp2-person-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--glass-bg-thick);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.35);
    border-top-color: rgba(255,255,255,0.55);
    border-radius: var(--radius-xl);
    corner-shape: squircle;
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.03),
        0 2px 8px rgba(0,0,0,0.04),
        0 8px 24px -4px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}
.bp2-person-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-xl);
    right: var(--space-xl);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
}
.bp2-person-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.05),
        0 16px 40px -4px rgba(0,0,0,0.08);
}
.bp2-person-card:active { transform: scale(0.98); }

/* Mini contribution ring */
.bp2-person-ring-wrap {
    position: relative;
    width: 56px; height: 56px;
    flex-shrink: 0;
}
.bp2-person-ring {
    width: 56px; height: 56px;
    transform: rotate(-90deg);
}
.bp2-person-ring-track {
    fill: none;
    stroke: rgba(0,0,0,0.06);
    stroke-width: 4;
}
.bp2-person-ring-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1);
}
.bp2-person-ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.bp2-person-info { flex: 1; min-width: 0; }
.bp2-person-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.bp2-person-scheduled {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.bp2-person-contributed {
    display: block;
    font-size: 14px;
    font-weight: 650;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Household summary bar */
.bp2-household-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-xl);
    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: var(--radius-lg);
    corner-shape: squircle;
}
.bp2-household-stat {
    text-align: center;
    flex: 1;
}
.bp2-household-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}
.bp2-household-stat-value {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.bp2-household-divider {
    width: 1px;
    height: 28px;
    background: var(--separator);
    flex-shrink: 0;
}

/* ==================== TODAY / NEXT STRIP ==================== */
.bp2-today {
    margin-bottom: var(--space-3xl);
}

/* Prominent CTA action card */
.bp2-action-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-2xl);
    background: linear-gradient(135deg, #007AFF, #5856D6);
    border-radius: var(--radius-xl);
    corner-shape: squircle;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;
    box-shadow:
        0 4px 16px rgba(0,122,255,0.25),
        0 8px 32px -4px rgba(88,86,214,0.2);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}
.bp2-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
.bp2-action-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0,122,255,0.3),
        0 16px 48px -4px rgba(88,86,214,0.25);
}
.bp2-action-card:active { transform: scale(0.98); }
.bp2-action-card-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bp2-action-card-icon .material-symbols-outlined {
    color: white;
    font-size: 22px;
}
.bp2-action-card-body { flex: 1; }
.bp2-action-card-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
}
.bp2-action-card-sub {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
}
.bp2-action-card-chevron {
    color: rgba(255,255,255,0.5);
    font-size: 20px;
    flex-shrink: 0;
}

/* Celebration / funded state */
.bp2-action-card.funded {
    background: linear-gradient(135deg, #30D158, #34C759);
    box-shadow:
        0 4px 16px rgba(48,209,88,0.25),
        0 8px 32px -4px rgba(52,199,89,0.2);
    cursor: default;
}
.bp2-action-card.funded:hover {
    transform: none;
    box-shadow:
        0 4px 16px rgba(48,209,88,0.25),
        0 8px 32px -4px rgba(52,199,89,0.2);
}

/* Setup state */
.bp2-action-card.setup {
    background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
    box-shadow: var(--shadow-sm);
}
.bp2-action-card.setup .bp2-action-card-title { color: var(--text-primary); }
.bp2-action-card.setup .bp2-action-card-sub { color: var(--text-tertiary); }
.bp2-action-card.setup .bp2-action-card-icon { background: rgba(0,0,0,0.06); }
.bp2-action-card.setup .bp2-action-card-icon .material-symbols-outlined { color: var(--text-tertiary); }

/* Mini timeline */
.bp2-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 var(--space-md);
}
.bp2-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    position: relative;
}
.bp2-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 9px;
    top: calc(var(--space-md) + 14px);
    bottom: 0;
    width: 1px;
    background: var(--separator);
}
.bp2-timeline-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.bp2-timeline-dot.income { background: var(--system-green); box-shadow: 0 0 0 3px rgba(48,209,88,0.15); }
.bp2-timeline-dot.bill { background: var(--system-orange); box-shadow: 0 0 0 3px rgba(255,149,0,0.15); }
.bp2-timeline-dot.planned { background: var(--system-purple); box-shadow: 0 0 0 3px rgba(175,82,222,0.15); }
.bp2-timeline-body { flex: 1; min-width: 0; }
.bp2-timeline-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.bp2-timeline-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 6px;
}
.bp2-timeline-amount {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 650;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ==================== DETAILS SECTION ==================== */
.bp2-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

/* Section group headers */
.bp2-section-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    padding: var(--space-md) 0 var(--space-xs);
    margin-top: var(--space-lg);
}
.bp2-details-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Autopilot Checklist Progress Strip (promoted) */
.bp2-checklist-strip {
    margin-bottom: var(--space-md);
}
.bp2-checklist-bar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--glass-bg-thick);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--radius-xl);
    corner-shape: squircle;
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.03),
        0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
}
.bp2-checklist-bar:hover {
    background: var(--glass-bg);
}
.bp2-checklist-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.bp2-checklist-info {
    flex: 1;
    min-width: 0;
}
.bp2-checklist-label {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--text-primary);
}
.bp2-checklist-sub {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}
.bp2-checklist-progress {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.bp2-checklist-seg {
    width: 16px;
    height: 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
}
.bp2-checklist-seg.done {
    background: var(--system-green);
}
.bp2-checklist-pct {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}

/* --- Budget v2 Mobile --- */
@media (max-width: 900px) {
    .bp2-hero-body { flex-direction: column; gap: 24px; align-items: flex-start; }
    .bp2-ring-wrap { width: 120px; height: 120px; }
    .bp2-ring-pct { font-size: 28px; }
    .bp2-ring-amt { font-size: 12px; }
    .bp2-headline { font-size: 28px; }
    .bp2-kpi-row { padding: 12px 0; }
    .bp2-kpi-value { font-size: 18px; }
    .bp2-hero-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bp2-cta { flex-wrap: wrap; }
    .bp2-person-cards { grid-template-columns: 1fr 1fr; }
    .bp2-person-card { padding: var(--space-md); gap: var(--space-md); }
    .bp2-person-ring-wrap { width: 44px; height: 44px; }
    .bp2-person-ring { width: 44px; height: 44px; }
    .bp2-person-ring-pct { font-size: 10px; }
    .bp2-baseline-row { padding: 14px var(--space-lg) 14px calc(var(--space-lg) - 4px); }
    .bp2-baseline-detail-inner { padding-left: 52px; }
    .bp2-baseline-total { padding: var(--space-md) var(--space-lg); }
    .bp2-checklist-progress { display: none; }
    .bp2-action-card { padding: var(--space-lg); }
}

/* Budget Plan Mobile (legacy) */
@media (max-width: 900px) {
    .bp-buckets-grid { grid-template-columns: 1fr; }
    .bp-bottom-grid { grid-template-columns: 1fr; }
    .bp-hero { padding: 24px 20px 22px; }
    .bp-hero-title { font-size: 26px; }
    .bp-bucket-amount { font-size: 26px; }
    .bp-seg-labels { flex-wrap: wrap; gap: 8px; }
    .bp-income-amount { font-size: 20px; }
    .bills-summary-grid { grid-template-columns: 1fr; }
}

/* ==================== BILLS PAGE ==================== */
.bills-summary { margin-bottom: 20px; }
.bills-summary-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.bills-stat-card {
    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: 14px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 2px;
}
.bills-stat-card.accent { border-left: none; }
.bills-stat-label {
    font-size: 10.5px; font-weight: 650; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.bills-stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 22px; font-weight: 600;
    letter-spacing: var(--mono-ls-large); color: var(--text-primary);
}
.bills-stat-sub { font-size: 11.5px; font-weight: 550; color: var(--text-tertiary); }

/* Category Accordion */
.bills-categories { display: flex; flex-direction: column; gap: 10px; }
.bills-cat {
    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: 14px;
    overflow: hidden;
}

.bills-cat-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    cursor: pointer; user-select: none;
    transition: background 0.12s;
}
.bills-cat-header:hover { background: rgba(0,0,0,0.012); }

.bills-cat-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.bills-cat-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text-secondary);
    font-size: 18px; flex-shrink: 0;
}
.bills-cat-info { min-width: 0; }
.bills-cat-name { display: block; font-size: 14px; font-weight: 650; color: var(--text-primary); }
.bills-cat-count { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.bills-cat-total {
    font-family: var(--font-mono); font-size: 15px; font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary); letter-spacing: var(--mono-ls-medium); flex-shrink: 0;
}
.bills-cat-chev {
    font-size: 18px; color: var(--text-quaternary);
    transition: transform 0.2s; flex-shrink: 0;
}
.bills-cat.open .bills-cat-chev { transform: rotate(180deg); }

/* Bills body (expanded) */
.bills-cat-body {
    display: none;
    border-top: 0.5px solid rgba(0,0,0,0.04);
}
.bills-cat.open .bills-cat-body { display: block; }

/* ═══ Bills — Sort Bar ═══ */
.bills-sort-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; padding: 0 4px; margin-bottom: 12px;
}
.bills-sort-label {
    font-size: 11px; font-weight: 600; color: var(--text-quaternary);
}
.bills-sort-toggle {
    display: flex; background: rgba(0,0,0,0.04);
    border-radius: 8px; padding: 2px;
}
.bills-sort-btn {
    padding: 4px 12px; 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;
}
.bills-sort-btn.on {
    background: white;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ═══ Bills — Column Headers ═══ */
.bills-col-header {
    display: grid;
    grid-template-columns: 42px 1fr 100px 70px 130px 28px;
    gap: 10px;
    padding: 12px 20px 8px;
    border-bottom: 1px solid var(--border-hairline, rgba(0,0,0,0.04));
    margin-top: 4px;
}
.bills-col-header > span {
    font-size: 9px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-quaternary);
}
.bills-col-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.bills-col-sortable:hover {
    color: var(--system-blue);
}
.bills-col-sortable.active {
    color: var(--system-blue);
}
.bills-col-arrow {
    font-size: 10px !important;
    line-height: 1;
}
.bills-col-amount { text-align: right; }
.bills-col-due { text-align: center; }
.bills-col-status { text-align: center; }

/* ═══ Bills — Grid Row ═══ */
.bills-grid-row {
    display: grid;
    grid-template-columns: 42px 1fr 100px 70px 130px 28px;
    gap: 10px;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 0.5px solid rgba(0,0,0,0.03);
    cursor: pointer;
    transition: background 0.1s;
}
.bills-grid-row:hover { background: rgba(0,0,0,0.01); }
.bills-grid-row:active { background: rgba(0,122,255,0.03); }
.bills-grid-row:last-of-type { border-bottom: none; }
.bills-grid-row.bills-row-off { opacity: 0.4; }
.bills-grid-row.bills-row-off:hover { opacity: 0.6; }

/* Toggle column */
.bills-grid-toggle {
    display: flex; align-items: center; justify-content: center;
}

/* Name column */
.bills-grid-name {
    min-width: 0;
    display: flex; align-items: center; gap: 6px;
    overflow: hidden;
}
.bills-grid-name-text {
    font-size: 13.5px; font-weight: 620;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bills-joint-badge {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    background: rgba(48, 176, 199, 0.08); color: var(--system-teal, #30B0C7);
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; vertical-align: middle; flex-shrink: 0;
}
.bills-bank-icon {
    flex-shrink: 0; display: inline-flex;
}
.bills-bank-icon .material-symbols-outlined {
    font-size: 12px; color: var(--system-teal);
}

/* Amount column */
.bills-grid-amount {
    text-align: right;
    white-space: nowrap;
}
.bills-grid-amt-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: var(--mono-ls-medium);
}
.bills-grid-amt-period {
    font-size: 10px; font-weight: 500;
    color: var(--text-quaternary);
    margin-left: 1px;
}
.bills-grid-freq {
    display: block;
    font-size: 9px; font-weight: 600;
    color: var(--text-quaternary);
    text-align: right;
    margin-top: 1px;
}

/* Due date column */
.bills-grid-due {
    text-align: center;
}
.bills-grid-due-text {
    font-size: 12px; font-weight: 600;
    color: var(--text-tertiary);
}
.bills-grid-due-text.overdue { color: var(--system-red); }
.bills-grid-due-text.soon { color: var(--system-orange); }
.bills-grid-due-none {
    font-size: 11px; color: var(--text-quinary, #d1d1d6);
}

/* Status column */
.bills-grid-status {
    text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.bills-status-paid {
    font-size: 10px; font-weight: 650;
    color: #34C759;
    background: rgba(52, 199, 89, 0.08);
    padding: 2px 8px; border-radius: 6px;
    white-space: nowrap;
}
.bills-grid-status .recon-badge.paid {
    color: #34C759;
    background: rgba(52, 199, 89, 0.08);
}
.bills-status-var {
    font-size: 9px; font-weight: 650;
}
.bills-status-var.over { color: var(--system-orange); }
.bills-status-var.under { color: var(--system-green); }
.bills-status-overdue {
    font-size: 10px; font-weight: 650;
    color: var(--system-red);
    background: rgba(255,59,48,0.06);
    padding: 2px 8px; border-radius: 6px;
    white-space: nowrap;
}
.bills-status-soon {
    font-size: 10px; font-weight: 650;
    color: var(--system-orange);
    background: rgba(255,149,0,0.06);
    padding: 2px 8px; border-radius: 6px;
    white-space: nowrap;
}
.bills-status-none {
    font-size: 11px; color: var(--text-quinary, #d1d1d6);
}

/* Edit column */
.bills-grid-edit {
    text-align: center;
}
.bills-grid-edit .material-symbols-outlined {
    font-size: 15px;
    color: var(--text-quinary, #d1d1d6);
    opacity: 0;
    transition: opacity 0.15s;
}
.bills-grid-row:hover .bills-grid-edit .material-symbols-outlined {
    opacity: 0.6;
}

/* Paid count in category header */
.bills-paid-count { color: var(--system-green); }

/* ═══ Bills Grid — Mobile ═══ */
@media (max-width: 640px) {
    .bills-col-header { display: none; }
    .bills-grid-row {
        display: flex; flex-wrap: wrap;
        gap: 8px; padding: 12px 16px;
    }
    .bills-grid-toggle { flex-shrink: 0; }
    .bills-grid-name { flex: 1; min-width: 0; }
    .bills-grid-amount {
        flex-shrink: 0; order: 3;
    }
    .bills-grid-due { display: none; }
    .bills-grid-status {
        width: 100%; order: 4;
        justify-content: flex-start;
        padding-left: 50px;
        margin-top: -4px;
    }
    .bills-grid-edit { display: none; }
    .bills-sort-bar { padding: 0 8px; }
}

.bills-add-btn {
    display: flex; align-items: center; gap: 4px;
    width: 100%; padding: 10px 18px;
    border: none; background: none;
    font-size: 12px; font-weight: 600; color: var(--system-blue);
    cursor: pointer; font-family: var(--font-body);
    transition: background 0.12s;
    border-top: 0.5px solid rgba(0,0,0,0.04);
}
.bills-add-btn:hover { background: rgba(0,122,255,0.04); }
.bills-add-btn .material-symbols-outlined { font-size: 15px; }
.bills-delete-cat-btn {
    display: flex; align-items: center; gap: 4px;
    width: 100%; padding: 10px 18px;
    border: none; background: none;
    font-size: 12px; font-weight: 600; color: var(--system-red);
    cursor: pointer; font-family: var(--font-body);
    transition: background 0.12s;
    border-top: 0.5px solid rgba(0,0,0,0.04);
    opacity: 0.7;
}
.bills-delete-cat-btn:hover { background: rgba(255,59,48,0.04); opacity: 1; }
.bills-delete-cat-btn .material-symbols-outlined { font-size: 15px; }

.bills-footer { padding: 16px 0; text-align: center; }

/* ─── Bill Edit Modal ─── */
.bill-edit-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;
}
.bill-edit-overlay.active { display: flex; }
.bill-edit-panel {
    background: #F5F5F7;
    border-radius: 20px;
    corner-shape: squircle;
    width: 100%; max-width: 460px;
    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: beModalIn 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes beModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.be-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0;
}
.be-modal-title {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 750; letter-spacing: -0.02em;
    color: var(--text-primary);
}
.be-modal-close {
    width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-tertiary);
    transition: all 0.12s;
}
.be-modal-close:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
.be-modal-close .material-symbols-outlined { font-size: 18px; }

.be-modal-body { padding: 18px 24px 8px; }

/* Fields */
.be-field { margin-bottom: 14px; }
.be-field-label {
    display: block; font-size: 11px; font-weight: 650;
    color: var(--text-tertiary); text-transform: uppercase;
    letter-spacing: 0.04em; margin-bottom: 5px;
}
.be-field-opt { text-transform: none; font-weight: 500; letter-spacing: 0; }
.be-field-input, .be-field-select, .be-field-textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    corner-shape: squircle;
    background: rgba(0,0,0,0.025);
    font-family: var(--font-body);
    font-size: 14px; font-weight: 550;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box;
}
.be-field-input:focus, .be-field-select:focus, .be-field-textarea:focus {
    border-color: var(--system-blue);
    box-shadow: 0 0 0 3.5px rgba(0,122,255,0.10);
    background: rgba(0,0,0,0.015);
}
.be-field-textarea { resize: vertical; min-height: 48px; line-height: 1.45; }
.be-field-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}

/* Amount prefix */
.be-field-prefix {
    position: relative; display: flex; align-items: center;
}
.be-prefix {
    position: absolute; left: 12px;
    font-size: 14px; font-weight: 600; color: var(--text-tertiary);
    pointer-events: none;
}
.be-field-prefix .be-field-input { padding-left: 24px; }

/* Row layouts */
.be-field-row {
    display: flex; gap: 12px; margin-bottom: 14px;
}
.be-field-row .be-field { flex: 1; margin-bottom: 0; }
.be-field-grow { flex: 1.5 !important; }

/* Toggle list (vertical, iOS Settings style) */
.be-toggle-list {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
}
.be-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}
.be-toggle-row:last-child {
    border-bottom: none;
}
.be-toggle-label {
    flex: 1;
    min-width: 0;
}
.be-toggle-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.be-toggle-desc {
    display: block;
    font-size: 11px;
    font-weight: 450;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Footer */
.be-modal-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 24px 20px;
    border-top: 0.5px solid rgba(0,0,0,0.04);
    margin-top: 4px;
}
.be-modal-footer-right { display: flex; gap: 8px; }

.be-btn-save, .be-btn-cancel, .be-btn-delete {
    border: none; border-radius: 10px; cursor: pointer;
    font-family: var(--font-body); font-weight: 650; font-size: 13px;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.be-btn-save {
    background: var(--system-blue); color: #fff;
    padding: 9px 22px;
}
.be-btn-save:hover { filter: brightness(1.08); }
.be-btn-cancel {
    background: var(--surface-2); color: var(--text-secondary);
    padding: 9px 16px;
}
.be-btn-cancel:hover { background: var(--surface-3, rgba(0,0,0,0.04)); }
.be-btn-delete {
    background: none; color: var(--system-red); padding: 9px 12px;
    opacity: 0.7;
}
.be-btn-delete:hover { opacity: 1; background: rgba(255,59,48,0.06); }

/* Modal responsive */
@media (max-width: 520px) {
    .bill-edit-overlay { padding: 16px; }
    .bill-edit-panel { max-width: calc(100vw - 32px); }
    .be-field-row { flex-direction: column; gap: 0; }
    .be-field-row .be-field { margin-bottom: 14px; }
    /* old .be-field-toggles removed — replaced by .be-toggle-list */
}

/* ==================== MONEY OVERVIEW (Receipt-inspired) ==================== */
.receipt {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px;
}

.receipt-header {
    text-align: center;
    margin-bottom: 16px;
}

.receipt-logo {
    margin-bottom: 6px;
    color: var(--text-primary);
    display: flex;
    justify-content: center;
}

.receipt-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.receipt-subtitle { display: none; }

.receipt-date {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 4px;
}

.receipt-divider {
    border-top: 1px dashed var(--separator-opaque);
    margin: 14px 0;
    font-size: 0;
    overflow: hidden;
    height: 0;
}

.receipt-divider.thin {
    border-top: 1px dashed var(--separator);
    margin: 10px 0;
}

.receipt-section {
    padding: 2px 0;
}

.receipt-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.receipt-section-title i {
    font-size: 10px;
}

.receipt-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.receipt-line.total {
    font-weight: 700;
    color: var(--text-primary);
    border-top: 1px solid var(--separator-opaque);
    margin-top: 6px;
    padding-top: 8px;
    font-size: 14px;
}

.receipt-line.grand {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 4px 0;
    font-family: var(--font-editorial);
}

.receipt-line.grand .positive { color: var(--system-green); }
.receipt-line.grand .negative { color: var(--system-red); }

.receipt-grand-total {
    text-align: center;
    padding: 8px 0;
}

.receipt-fun-note {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* ==================== WHAT'S COMING UP ==================== */
.hub-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.coming-up-card {
    margin-top: 0;
}

.coming-up-card .card-body {
    padding: 4px 16px 16px;
}

.coming-up-card .card-header {
    flex-direction: row;
    align-items: center;
}

.coming-up-filters {
    display: flex;
    gap: 4px;
}

.cu-filter {
    border: none;
    background: transparent;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out-expo);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cu-filter:hover {
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
}

.cu-filter.active {
    background: var(--system-blue);
    color: white;
}

.cu-filter i { font-size: 10px; }

/* Timeline */
.cu-timeline {
    padding: 8px 0;
}

.cu-group {
    margin-bottom: 20px;
}

.cu-group:last-child { margin-bottom: 0; }

.cu-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.cu-group.today .cu-group-header { color: var(--system-blue); }
.cu-group.floating .cu-group-header { color: var(--system-orange); }
.cu-group.passed .cu-group-header { color: var(--text-quaternary); }

.cu-group-header i { font-size: 11px; }

.cu-group-count {
    font-size: 10px;
    font-weight: 600;
    background: rgba(0,0,0,0.05);
    padding: 1px 7px;
    border-radius: 20px;
    color: var(--text-tertiary);
}

.cu-group.today .cu-group-count { background: rgba(0,122,255,0.1); color: var(--system-blue); }

/* Item row */
.cu-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.cu-item:hover {
    background: rgba(0,0,0,0.02);
}

.cu-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cu-item-dot.income {
    background: var(--system-green);
    box-shadow: 0 0 0 3px rgba(52,199,89,0.15);
}

.cu-item-dot.bill {
    background: var(--system-red);
    box-shadow: 0 0 0 3px rgba(255,59,48,0.1);
}

.cu-item.floating .cu-item-dot {
    background: var(--system-orange);
    box-shadow: 0 0 0 3px rgba(255,149,0,0.12);
    animation: floatPulse 2s ease-in-out infinite;
}

.cu-item-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.cu-item-info {
    flex: 1;
    min-width: 0;
}

.cu-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cu-item-cat {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.cu-item-amount {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.cu-item-amount.income { color: var(--system-green); }
.cu-item-amount.bill { color: var(--system-red); }

/* Passed items */
.cu-passed-toggle {
    text-align: center;
    padding: 4px 0;
}

.cu-show-passed {
    border: none;
    background: rgba(0,0,0,0.03);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out-expo);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cu-show-passed:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-secondary);
}

.cu-passed-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cu-passed-items.visible {
    max-height: 600px;
}

.cu-passed-items .cu-item {
    opacity: 0.5;
}

.cu-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-tertiary);
}

.cu-empty i {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
    opacity: 0.4;
}

.cu-empty p {
    font-size: 14px;
    margin: 0;
}

/* ==================== INCOME LIST ROWS ==================== */
.inc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.inc-row:last-child { border-bottom: none; }
.inc-row:hover { background: rgba(0,122,255,0.03); }

.inc-row-avatar {
    width: 24px;
    height: 24px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: none !important;
}

.inc-row-info { flex: 1; min-width: 0; }

.inc-row-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inc-row-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

.inc-row-freq {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.inc-row-dot { color: var(--text-quaternary); font-size: 10px; }

.inc-row-schedule {
    font-size: 12px;
    color: var(--text-quaternary);
}

.inc-row-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    margin-left: 4px;
}

.inc-row-badge.override { color: var(--system-blue); }
.inc-row-badge.floating { color: var(--system-orange); }

.inc-row-amounts { text-align: right; flex-shrink: 0; }

.inc-row-amount {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.inc-row-per {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-quaternary);
}

.inc-row-check {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.inc-row-chevron {
    font-size: 11px;
    color: var(--text-quaternary);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.inc-row:hover .inc-row-chevron { transform: translateX(2px); color: var(--system-blue); }

.income-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.income-list-total {
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
}

/* ==================== INCOME DETAIL OVERLAY ==================== */
.ido-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ido-overlay.visible { opacity: 1; }

.ido-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ido-panel {
    position: relative;
    background: #F5F5F7;
    border-radius: 20px;
    corner-shape: squircle;
    width: 400px;
    max-width: calc(100vw - 48px);
    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);
    transform: scale(0.94) translateY(8px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.18s ease-out;
}

.ido-overlay.visible .ido-panel { transform: scale(1) translateY(0); opacity: 1; }

.ido-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    z-index: 2;
    transition: all var(--duration-fast) var(--ease-out-expo);
}

.ido-close:hover { background: rgba(0,0,0,0.1); color: var(--text-primary); }

/* Hero / Header */
.ido-hero {
    text-align: center;
    padding: 28px 20px 20px;
}

.ido-hero-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.ido-hero-name {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    border: none;
    background: transparent;
    padding: 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
    letter-spacing: -0.01em;
}

.ido-hero-name:focus {
    outline: none;
    border-bottom-color: var(--system-blue);
}

.ido-hero-name:hover { border-bottom-color: rgba(0,0,0,0.08); }

.ido-hero-total {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: var(--mono-ls-large);
    margin-top: 4px;
}

.ido-hero-total span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-quaternary);
}

/* Editable Fields */
.ido-fields { padding: 0 20px 12px; }

.ido-field-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.ido-field { flex: 1; }

.ido-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-quaternary);
    margin-bottom: 4px;
}

.ido-field-input-wrap {
    display: flex;
    align-items: center;
    background: #f5f5f7;
    border-radius: 10px;
    padding: 0 12px;
    height: 40px;
    border: 1.5px solid transparent;
    transition: border-color 0.15s ease;
}

.ido-field-input-wrap:focus-within { border-color: var(--system-blue); }

.ido-field-prefix {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-right: 2px;
}

.ido-field-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--text-primary);
    padding: 0;
    min-width: 0;
}

.ido-field-input:focus { outline: none; }

.ido-field-select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 28px;
    transition: border-color 0.15s ease;
}

.ido-field-select:focus { outline: none; border-color: var(--system-blue); }

/* Sections */
.ido-section {
    margin: 0 20px 16px;
    background: #f5f5f7;
    border-radius: 12px;
    padding: 12px;
}

.ido-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
    margin-bottom: 8px;
}

/* Variable pay grid in overlay */
.ido-variable-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.ido-var-month { text-align: center; }

.ido-var-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-quaternary);
    margin-bottom: 3px;
}

.ido-var-select {
    width: 100%;
    padding: 4px 2px;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-primary);
    cursor: pointer;
}

.ido-var-select:focus { outline: none; border-color: var(--system-blue); }

/* Notes */
.ido-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 20px 12px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.ido-note.blue { background: rgba(0,122,255,0.06); color: var(--system-blue); }
.ido-note.orange { background: rgba(255,149,0,0.06); color: var(--system-orange); }

.ido-note-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.ido-note-action {
    border: none;
    background: rgba(0,122,255,0.1);
    color: var(--system-blue);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.ido-note-action:hover { background: rgba(0,122,255,0.18); }

/* Calendar */
.ido-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.ido-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    border-radius: 8px;
}

.ido-cal-day.pay {
    background: var(--system-blue);
    color: white;
    font-weight: 700;
}

/* Footer */
.ido-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 20px;
}

.ido-delete-btn {
    border: none;
    background: transparent;
    color: var(--system-red);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s ease;
}

.ido-delete-btn:hover { background: rgba(255,59,48,0.08); }

.ido-done-btn {
    border: none;
    background: var(--system-blue);
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out-expo);
}

.ido-done-btn:hover { background: #0066cc; }

/* Action card */
.machine-action-card {
    border: 2px solid rgba(0,122,255,0.15);
    background: linear-gradient(135deg, rgba(0,122,255,0.03), rgba(142,142,147,0.03));
}

.machine-action-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.machine-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--system-blue);
    font-size: 28px;
    flex-shrink: 0;
    animation: rocketFloat 3s ease-in-out infinite;
}

@keyframes rocketFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.machine-action-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.machine-action-text strong {
    color: var(--text-primary);
}

/* ==================== VARIABLE PAY DATES (TABLES) ==================== */
.variable-pay-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.variable-pay-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 6px;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.variable-pay-month.current {
    background: rgba(0,122,255,0.08);
}

.variable-pay-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.variable-pay-month.current .variable-pay-label {
    color: var(--system-blue);
}

.variable-pay-select {
    width: 36px;
    padding: 2px;
    font-size: 11px;
    text-align: center;
    border: 1px solid var(--separator);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.variable-pay-select:focus {
    border-color: var(--system-blue);
    outline: none;
}