/* =====================================================================
   Rich widgets: autocomplete popup, searchable combobox, inline row
   details, the expense dialog, account hero card, chit money bars.
   ===================================================================== */

/* ---------------------------------------------------------------- autocomplete popup */
.ac-pop {
    position: fixed;
    z-index: 400;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(252, 254, 255, 0.98);
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 18px 48px rgba(6, 32, 56, 0.22), 0 2px 6px rgba(6, 32, 56, 0.08);
    animation: pop-in 0.12s ease-out;
}
.ac-head {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ocean-700);
    background: var(--grad-brand-soft);
    border-bottom: 1px solid var(--hairline);
}
.ac-head svg { width: 13px; height: 13px; }
.ac-search {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--hairline);
    background: var(--grad-brand-soft);
}
.ac-search svg { color: var(--ocean-500); width: 14px; height: 14px; }
.ac-search input { flex: 1; height: 26px; border-radius: 7px; }
.ac-list { overflow: auto; padding: 4px; min-height: 0; }
.ac-item {
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; flex-direction: column;
}
.ac-item:not(:has(.ac-row)) { flex-direction: row; align-items: center; gap: 10px; }
.ac-item.active { background: var(--surface-selected); }
.ac-item:hover { background: var(--surface-hover); }
.ac-group {
    margin: 2px -4px 4px;
    padding: 4px 4px 2px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--hairline);
}
.ac-item:first-child .ac-group { border-top: 0; margin-top: 0; }
.ac-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-row > svg { width: 14px; height: 14px; color: var(--ocean-500); }
.ac-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ac-value { display: flex; flex-direction: column; flex: 1; min-width: 0; font-weight: 600; }
.ac-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-sub { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
.ac-meta b { color: var(--text-primary); font-size: var(--font-size-sm); }
.ac-item mark { background: rgba(250, 178, 25, 0.35); color: inherit; border-radius: 3px; padding: 0 1px; }
.ac-empty { padding: 14px; text-align: center; color: var(--text-muted); }

/* ---------------------------------------------------------------- combobox (enhanced select) */
.combo { position: relative; min-width: 0; }
.combo-native {                    /* kept for form values and native validation, but invisible */
    position: absolute !important;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.combo-display {
    display: flex; align-items: center; gap: 7px;
    width: 100%;
    height: var(--control-height);
    padding: 0 8px 0 6px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.92);
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}
.combo-display:hover { border-color: var(--ocean-300); }
.combo-display:focus { outline: none; border-color: var(--ocean-400); box-shadow: var(--brand-ring); }
.combo-display.invalid { border-color: var(--status-critical); }
.combo-display > svg { width: 13px; height: 13px; margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
.combo-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.combo-meta { font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
.combo-placeholder { flex: 1; color: var(--text-muted); padding-left: 3px; }
.combo .chip-icon.sm { width: 20px; height: 20px; }
.page-toolbar .combo { width: 190px; }

/* ---------------------------------------------------------------- search box */
.search-box {
    display: flex; align-items: center; gap: 6px;
    height: var(--control-height);
    padding: 0 8px;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
}
.search-box:focus-within { border-color: var(--ocean-400); box-shadow: var(--brand-ring); }
.search-box svg { width: 14px; height: 14px; color: var(--text-muted); }
.search-box input { border: 0; background: transparent; height: 100%; padding: 0; box-shadow: none !important; flex: 1; min-width: 120px; }

/* ---------------------------------------------------------------- dense tables & inline detail rows */
table.grid.dense td { padding: 3px 8px; height: 30px; }
table.grid.dense th { padding: 5px 8px; }
table.grid tr.expanded td { background: var(--surface-selected); border-bottom-color: transparent; }
.expand-caret svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform 0.15s; }
tr.expanded .expand-caret svg { transform: rotate(180deg); color: var(--ocean-600); }
tr.detail-row > td { padding: 0 !important; background: rgba(227, 245, 253, 0.55); border-bottom: 1px solid var(--hairline-strong); }
.entry-detail {
    display: flex; flex-direction: column; gap: 5px;
    padding: 6px 10px 7px 24px;
    border-left: 3px solid var(--ocean-400);
    animation: fade-in 0.15s;
}
.ed-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ed-side { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.ed-arrow { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(10, 79, 128, 0.08); color: var(--ocean-600); flex-shrink: 0; }
.ed-arrow svg { width: 11px; height: 11px; }
.ed-pill {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 320px; height: 24px; padding: 0 8px 0 3px;
    border-radius: 6px;
    background: #fff; border: 1px solid var(--hairline);
    font-size: var(--font-size-sm);
    box-shadow: 0 1px 2px rgba(10, 46, 79, 0.05);
}
.ed-pill small {
    display: grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 4px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
}
.ed-pill.dr small { background: #e4f4ec; color: #0b7a3b; }
.ed-pill.cr small { background: #e7f1fb; color: var(--ocean-700); }
.ed-pill b { font-weight: 650; min-width: 0; }
.ed-pill .mono { color: var(--text-secondary); font-weight: 650; white-space: nowrap; }
.ed-bar { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--text-secondary); }
.ed-fact { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ed-fact svg { width: 11px; height: 11px; color: var(--ocean-500); }
.ed-fact b { color: var(--ocean-800); }
.ed-fact.muted, .ed-fact.muted svg { color: var(--text-muted); }
.ed-fact.warn { color: #8a5b00; }
.ed-fact.memo { white-space: normal; max-width: 420px; }
.ed-bar .btn.sm { height: 22px; }
/* the note recorded with an entry: its own callout, line breaks kept */
.ed-note { display: flex; align-items: flex-start; gap: 8px; max-width: 760px; margin: 2px 0; padding: 6px 10px;
    border-left: 3px solid var(--brand-gold); border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: linear-gradient(90deg, rgba(201, 154, 59, 0.12), rgba(201, 154, 59, 0.04)); }
.ed-note > div { flex: 1; min-width: 0; }
.ed-note > svg { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--brand-gold); }
.ed-note small { display: block; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: #8a6a24; }
.ed-note p { margin: 1px 0 0; color: var(--text-primary); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
/* a list row whose entry carries a note; the note is the tooltip */
.note-mark { display: inline-flex; vertical-align: middle; margin-left: 5px; color: var(--brand-gold); cursor: help; }
.note-mark svg { width: 11px; height: 11px; }
.qe-note textarea { min-height: 44px; resize: vertical; }
table.grid.mini { background: rgba(255, 255, 255, 0.75); border-radius: 8px; overflow: hidden; border: 1px solid var(--hairline); }
table.grid.mini th { position: static; background: rgba(233, 244, 251, 0.9); }
dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: var(--font-size-sm); }
dt { color: var(--text-muted); }
dd { margin: 0; font-weight: 600; }
.tiny { font-size: 10.5px; }
.tag {
    display: inline-flex; align-items: center;
    height: 18px; padding: 0 7px;
    border-radius: 5px;
    background: rgba(10, 79, 128, 0.07);
    color: var(--text-secondary);
    font-size: var(--font-size-xs); font-weight: 600;
    white-space: nowrap;
}
.kbd.light { border-color: rgba(255, 255, 255, 0.5); color: #fff; margin-left: 4px; }


/* ---------------------------------------------------------------- expense dialog */
.modal.expense-modal { width: min(940px, 100%); }
.expense-modal .modal-body { padding-top: 10px; }
.xp-modes {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    padding: 3px; margin-bottom: 10px;
    border-radius: 11px;
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
}
.xp-mode {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 28px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-secondary);
    font: inherit; font-weight: 650; cursor: pointer;
}
.xp-mode svg { width: 14px; height: 14px; }
.xp-mode:hover:not(:disabled) { background: rgba(255, 255, 255, 0.7); color: var(--ocean-800); }
.xp-mode.selected { background: var(--grad-navy); color: #fff; box-shadow: 0 2px 8px rgba(11, 32, 56, 0.25); }
.xp-mode:disabled { opacity: 0.4; cursor: not-allowed; }

.xp-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); gap: 14px; }
.xp-left, .xp-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.xp-amount {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 12px;
    border-radius: 12px;
    background: var(--grad-brand-soft);
    border: 1px solid rgba(11, 124, 189, 0.25);
}
.xp-amount:focus-within { box-shadow: var(--brand-ring); border-color: var(--ocean-400); }
.xp-currency { font-size: 22px; font-weight: 700; color: var(--ocean-600); }
.xp-amount input {
    flex: 1;
    height: 44px;
    border: 0; background: transparent; box-shadow: none !important;
    font-size: 26px; font-weight: 750; letter-spacing: -0.02em;
    text-align: left;
    color: var(--ocean-900);
}
.xp-dates, .xp-due-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.xp-dates input[type="date"] { margin-left: auto; height: 26px; }
.xp-notes textarea { min-height: 44px; resize: none; }
.date-chip, .pay-chip, .cat-tile, .into-chip {
    border: 1px solid var(--hairline-strong);
    background: rgba(255, 255, 255, 0.85);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.date-chip { height: 24px; padding: 0 10px; border-radius: 999px; font-weight: 600; font-size: var(--font-size-sm); color: var(--text-secondary); }
.date-chip:hover, .pay-chip:hover, .cat-tile:hover, .into-chip:hover { border-color: var(--ocean-300); background: #fff; }
.date-chip.selected, .pay-chip.selected, .cat-tile.selected, .into-chip.selected {
    border-color: var(--ocean-500);
    background: linear-gradient(180deg, #f2fbff, #dff3fd);
    box-shadow: 0 0 0 2px rgba(11, 124, 189, 0.16);
    color: var(--ocean-800);
}
.xp-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.xp-section-head .section-title { margin: 0; display: flex; align-items: center; gap: 5px; }
.xp-section-head .section-title svg { width: 13px; height: 13px; color: var(--ocean-500); }
.xp-cat-search { margin-left: auto; height: 24px; width: 160px; border-radius: 999px; font-size: var(--font-size-sm); }
.cat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}
.cat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 46px; padding: 3px 3px;
    border-radius: 9px;
    text-align: center;
    min-width: 0;
}
.cat-tile .chip-icon.sm { width: 22px; height: 22px; border-radius: 7px; }
.cat-tile .chip-icon.sm svg { width: 12px; height: 12px; }
.cat-name { font-size: 10px; font-weight: 600; line-height: 1.15; color: var(--text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tile.selected { background: var(--grad-navy); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(11, 32, 56, 0.25); }
.cat-tile.selected .cat-name { color: #fff; }
.cat-tile.selected .chip-icon { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pay-chip { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 9px; text-align: left; min-width: 0; height: 38px; }
.pay-chip.more { border-style: dashed; color: var(--text-secondary); }
.pay-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pay-text b { font-size: var(--font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-text small { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-budget {
    display: flex; flex-direction: column; gap: 4px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px dashed var(--hairline-strong);
    min-height: 48px;
    justify-content: center;
}
.xp-budget svg, .xp-claim-line svg { width: 13px; height: 13px; vertical-align: -2px; }

/* mode switching: show only what applies */
.expense-form .claim-only, .expense-form .lent-only { display: none; }
.expense-form.mode-PAID_FOR .claim-only, .expense-form.mode-LENT .claim-only { display: grid; }
.expense-form.mode-LENT .lent-only { display: flex; }
.expense-form.mode-PAID_FOR .expense-only, .expense-form.mode-LENT .expense-only { display: none; }
.expense-form.mode-PAID_FOR .claim-only.form-grid .field:first-child { grid-column: span 2; }
.xp-claim-info { display: none; flex-direction: column; gap: 6px; }
.expense-form:not(.mode-EXPENSE) .xp-claim-info { display: flex; }
.xp-claim-card {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px; border-radius: 12px;
    background: var(--grad-brand-soft);
    border: 1px solid rgba(11, 124, 189, 0.18);
}
.xp-claim-line { padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--hairline); font-size: var(--font-size-sm); }
.xp-claim-line.warn { background: #fff8e8; border-color: #f3d48a; }
.xp-people { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ---------------------------------------------------------------- segmented chips (period / type filters) */
.seg-chips {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px; border-radius: 999px;
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
}
.seg-chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 10px;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--text-secondary); font: inherit; font-size: var(--font-size-sm); font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.seg-chip svg { width: 12px; height: 12px; }
.seg-chip:hover { color: var(--ocean-800); background: rgba(255, 255, 255, 0.7); }
.seg-chip.active { background: var(--grad-navy); color: #fff; box-shadow: 0 2px 6px rgba(11, 32, 56, 0.25); }
.seg-chip .count {
    min-width: 16px; height: 15px; padding: 0 4px; border-radius: 999px;
    display: inline-grid; place-items: center;
    font-size: 9.5px; background: rgba(10, 79, 128, 0.1); color: var(--text-secondary);
}
.seg-chip.active .count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.seg-chips.sm .seg-chip { height: 22px; padding: 0 8px; font-size: var(--font-size-xs); }
.xp-range { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 600; }
.xp-range svg { width: 13px; height: 13px; color: var(--ocean-500); }
.xp-range input[type="date"] { height: 24px; width: 128px; }

/* ---------------------------------------------------------------- expense table */
.xp-list { height: 100%; }
.xp-table { table-layout: fixed; width: 100%; }
.xp-table thead th { position: sticky; top: 0; z-index: 2; }
.xp-table .c-cat { width: 210px; }
.xp-table .c-pay { width: 190px; }
.xp-table .c-amt { width: 120px; }
.xp-table .c-caret { width: 26px; }
.xp-table td { padding-top: 4px; padding-bottom: 4px; vertical-align: middle; }
.day-row td { padding: 0 !important; position: sticky; top: 27px; z-index: 1; }
.day-head-inner {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 12px;
    font-size: var(--font-size-xs);
    background: linear-gradient(180deg, #f4f8fb, #e9f1f7);
    border-bottom: 1px solid var(--hairline);
}
.day-date b { color: var(--ocean-800); margin-right: 4px; }
.xp-tr { cursor: pointer; }
.xp-tr:hover td { background: var(--surface-hover); }
.xp-tr.expanded td { background: var(--surface-selected); }
.xp-tr.expanded .expand-caret svg { transform: rotate(180deg); }
.cell-flex { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cat-cell { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cat-cell b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-cell .badge { transform: scale(0.92); transform-origin: left center; }
.xp-what { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.xp-what svg { width: 11px; height: 11px; vertical-align: -1px; }
.lock-dot { color: var(--text-muted); }
.lock-dot svg { width: 11px; height: 11px; vertical-align: -1px; }
.chip-icon.xs { width: 18px; height: 18px; border-radius: 6px; }
.chip-icon.xs svg { width: 11px; height: 11px; }
.c-pay .ellipsis { color: var(--text-secondary); }
.c-amt small { display: block; font-size: 10px; }
.claim-amt { color: #5b4fc9; }
.is-claim td:first-child { box-shadow: inset 3px 0 0 #8a7ff0; }

.xp-detail {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px;
    padding: 8px 12px 10px 40px;
    background: linear-gradient(180deg, rgba(227, 242, 251, 0.55), rgba(255, 255, 255, 0.4));
    border-top: 1px dashed var(--hairline);
}
.xp-facts { display: grid; grid-template-columns: 80px 1fr; gap: 3px 10px; margin: 0; font-size: var(--font-size-sm); }
.xp-facts dt { color: var(--text-muted); }
.xp-facts dd { margin: 0; min-width: 0; }
.xp-note { white-space: pre-wrap; color: var(--text-primary); background: #fffbea; padding: 3px 6px; border-radius: 6px; border: 1px solid #f3e3a6; }
.xp-journal .section-title { margin: 0 0 4px; display: flex; align-items: center; gap: 4px; }
.xp-journal svg, .xp-actions svg { width: 13px; height: 13px; }
.xp-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 240px; }

/* KPI used as a button (To collect) */
.kpi-button { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.kpi-button:hover { border-color: rgba(18, 168, 154, 0.5); }
.kpi-button.active { box-shadow: 0 0 0 2px rgba(18, 168, 154, 0.45), var(--shadow); }

/* owed to you */
.owed-list { display: flex; flex-direction: column; gap: 3px; }
.owed-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border: 0; border-radius: 9px;
    background: transparent; font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.owed-row:hover { background: var(--surface-hover); }
.owed-row .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.owed-row .avatar.sm { width: 26px; height: 26px; font-size: 10.5px; background: linear-gradient(180deg, #8a7ff0, #5b4fc9); }

/* ---------------------------------------------------------------- claim lifecycle panel */
.claim-panel {
    display: flex; flex-direction: column; gap: 6px;
    margin: 4px 10px 8px 24px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    cursor: default;
}
.claim-head { display: flex; align-items: center; gap: 10px; }
.claim-head .grow { min-width: 0; }
.claim-progress { width: 180px; }
.split-bar { height: 7px; border-radius: 999px; background: rgba(10, 79, 128, 0.1); overflow: hidden; display: flex; }
.split-bar .seg.paid { background: linear-gradient(90deg, #2fd0bf, #13a89a); }
.claim-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.cfig {
    display: flex; flex-direction: column; gap: 1px;
    padding: 4px 8px; border-radius: 6px;
    background: var(--surface-sunken); border: 1px solid var(--hairline);
    min-width: 0;
}
.cfig .label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; color: var(--text-muted); }
.cfig b { font-size: 13px; font-variant-numeric: tabular-nums; }
.cfig b.warn { color: #a06d00; }
.cfig b.strong { color: var(--ocean-800); }
.cfig small { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claim-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; }
.claim-timeline .section-title, .claim-forecast .section-title, .repay-form .section-title { display: flex; align-items: center; gap: 5px; margin: 0 0 5px; }
.claim-panel .section-title svg { width: 12px; height: 12px; color: var(--ocean-500); }
.claim-notes { margin-top: 6px; }
.claim-notes svg { width: 12px; height: 12px; vertical-align: -2px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--hairline-strong); border-radius: 2px; }
.timeline li { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 1px 0; }
.tl-dot {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; border: 2px solid var(--ocean-400); color: var(--ocean-600);
}
.tl-dot svg { width: 11px; height: 11px; }
.tl-body { flex: 1; min-width: 0; line-height: 1.3; }
.tl-body .row { gap: 6px; }
.tl-out .tl-dot { border-color: #8a7ff0; color: #5b4fc9; }
.tl-in .tl-dot { border-color: #13a89a; color: #0b8a7e; }
.tl-done .tl-dot { background: #13a89a; border-color: #13a89a; color: #fff; }
.tl-due .tl-dot { border-style: dashed; border-color: var(--text-muted); color: var(--text-muted); }
.tl-late .tl-dot { border-color: var(--status-critical); color: var(--status-critical); background: #fff1f1; }
.tl-gray .tl-dot { border-color: var(--text-muted); color: var(--text-muted); }
.timeline li .btn.icon { opacity: 0; transition: opacity 0.12s; }
.timeline li:hover .btn.icon { opacity: 1; }
.claim-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.repay-form {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 10px; border-radius: 10px;
    background: linear-gradient(180deg, #f1fbf9, #e6f6f3);
    border: 1px solid rgba(19, 168, 154, 0.3);
}
.repay-amount { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.repay-amount input { width: 130px; font-weight: 700; font-size: 14px; }
.repay-amount .chips { display: flex; gap: 4px; flex-wrap: wrap; }
.repay-split { min-height: 20px; }
.into-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.into-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: var(--font-size-xs); font-weight: 600; }
.into-chip svg { width: 12px; height: 12px; }
.repay-form input[type="date"] { width: 130px; height: 26px; }
.repay-form .grow { flex: 1; min-width: 0; }
.claim-forecast .small { margin-top: 4px; }
.claim-done { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: #effaf3; border: 1px solid #bfe8cd; }
.claim-done > svg { width: 22px; height: 22px; color: #0b7a3b; }
.claim-actions { padding-top: 6px; border-top: 1px dashed var(--hairline); }
.claim-actions .small svg { width: 12px; height: 12px; vertical-align: -2px; }

.cat-bars { display: flex; flex-direction: column; gap: 4px; }
.cat-bar { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.cat-bar:hover { background: var(--surface-hover); }
.cat-bar .grow { flex: 1; min-width: 0; }
.cat-bar.active { background: var(--surface-selected); box-shadow: inset 3px 0 0 var(--ocean-500); }
.bar-track { position: relative; height: 6px; border-radius: 999px; background: rgba(10, 79, 128, 0.08); margin: 3px 0 2px; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #f3a07f, var(--series-2)); }
.bar-fill.alt { background: linear-gradient(90deg, #7fb6ef, var(--series-1)); }
.bar-fill.over { background: linear-gradient(90deg, #ef6b6b, var(--status-critical)); }
.bar-limit { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ocean-800); border-radius: 1px; }

.month-nav { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.month-nav b { min-width: 118px; text-align: center; color: var(--ocean-800); }

/* ---------------------------------------------------------------- accounts */
.nw-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 12px;
    background: var(--grad-navy); color: #fff;
    box-shadow: 0 6px 16px rgba(11, 32, 56, 0.22);
    position: relative; overflow: hidden;
}
.nw-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.85), transparent); }
.nw-main { display: flex; flex-direction: column; flex: 1; }
.nw-main .label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fc3df; }
.nw-main b { font-size: 18px; letter-spacing: -0.01em; color: #f0d49a; font-variant-numeric: tabular-nums; }
.nw-side { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-size-xs); color: #cfe3f3; }
.nw-side b { color: #fff; margin-left: 4px; }
.nw-side .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.nw-side .dot.asset { background: #7dd0f5; }
.nw-side .dot.liability { background: #f3a07f; }
.mix-bar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(10, 79, 128, 0.06); }
.mix-bar span { display: block; height: 100%; }
.mix-bar.tall { height: 14px; border-radius: 6px; }
/* account list item: a compact rectangle with a family-coloured edge, no chart */
.acct-item {
    --accent: #7b8fa3;
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 5px 9px 5px 10px;
    margin: 0 0 3px;
    border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 253, 0.85));
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.acct-item:hover { border-color: var(--hairline-strong); border-left-color: var(--accent); box-shadow: 0 3px 10px rgba(10, 46, 79, 0.08); }
.acct-item .chip-icon { margin-top: 1px; }
.acct-item.selected {
    background: var(--grad-navy);
    border-color: transparent;
    border-left-color: var(--brand-gold);
    box-shadow: 0 6px 16px rgba(11, 32, 56, 0.28);
    color: #fff;
}
.acct-item.selected .acct-meta, .acct-item.selected .fact { color: #a9c6de; }
.acct-item.selected .acct-bal { color: #f0d49a; }
.acct-item.selected .acct-delta.pos { color: #7de3b0; }
.acct-item.selected .acct-delta.neg { color: #ffa3a3; }
.acct-item.selected .fact { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); }
.acct-item.selected .chip-icon { box-shadow: 0 0 0 1.5px rgba(240, 212, 154, 0.7); }
.acct-item.selected .lock svg { color: #a9c6de; }
.accent-ocean { --accent: #0b7cbd; } .accent-violet { --accent: #5b4fc9; } .accent-aqua { --accent: #13a89a; }
.accent-gold { --accent: #c99a3b; } .accent-teal { --accent: #13808f; } .accent-coral { --accent: #d9603c; }
.accent-red { --accent: #b02a2a; } .accent-green { --accent: #0b7a3b; } .accent-slate { --accent: #7b8fa3; }
.acct-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acct-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.acct-name { flex: 1; min-width: 0; font-weight: 650; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acct-name .lock svg { width: 11px; height: 11px; color: var(--text-muted); }
.acct-bal { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.acct-line.sub { font-size: var(--font-size-xs); align-items: center; gap: 5px; }
.acct-meta { flex: 1; min-width: 24px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acct-delta { white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.acct-facts { display: flex; gap: 3px; flex-shrink: 0; }
.fact {
    display: inline-flex; align-items: center; height: 15px; padding: 0 5px;
    border-radius: 3px; border: 1px solid var(--hairline);
    background: rgba(10, 79, 128, 0.04);
    font-size: 10px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.fact.good { color: #0a6b0a; background: #eaf7ec; border-color: rgba(12, 163, 12, 0.2); }
.fact.warn { color: #8a5b00; background: #fff6dc; border-color: rgba(250, 178, 25, 0.35); }
.fact.bad { color: #a32626; background: #fdeaea; border-color: rgba(208, 59, 59, 0.25); }
.fact.muted { color: var(--text-muted); }
.acct-util { height: 3px; margin-top: 4px; border-radius: 2px; background: rgba(10, 79, 128, 0.1); overflow: hidden; }
.acct-util span { display: block; height: 100%; background: var(--status-good); }
.acct-util.warning span { background: var(--status-warning); }
.acct-util.over span { background: var(--status-critical); }
.group-label i { font-style: normal; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.sparkline { display: block; overflow: visible; }

.tone-ocean { background: linear-gradient(135deg, #0b2f52, #0b5d97 55%, #1a86c6); }
.tone-violet { background: linear-gradient(135deg, #3c2f8f, #5b4fc9 55%, #8a7ff0); }
.tone-aqua { background: linear-gradient(135deg, #0b6f66, #10a596 55%, #2fd0bf); }
.tone-gold { background: linear-gradient(135deg, #8a5b00, #c98500 50%, #f2b705); }
.tone-teal { background: linear-gradient(135deg, #0b4f5c, #13808f 55%, #3fb5c4); }
.tone-coral { background: linear-gradient(135deg, #9a3f19, #d9603c 55%, #f08a6a); }
.tone-red { background: linear-gradient(135deg, #7a1d1d, #b02a2a 55%, #e05a5a); }
.tone-green { background: linear-gradient(135deg, #075c2e, #0b7a3b 55%, #2fae63); }
.tone-slate { background: linear-gradient(135deg, #253445, #46607a 55%, #7b8fa3); }
/* selected account: one slim branded rectangle instead of a card-shaped hero */
.p-account-head { padding: 8px; gap: 8px; }
.p-account-head::before { display: none; }
.acct-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(6, 32, 56, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.acct-banner::before {                 /* navy wash so every family stays on brand */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(8, 26, 46, 0.92) 0%, rgba(10, 40, 68, 0.78) 45%, rgba(10, 40, 68, 0.25) 100%);
    pointer-events: none;
}
.acct-banner::after {                  /* gold hairline */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, rgba(201, 154, 59, 0.9), rgba(240, 212, 154, 0.6) 40%, transparent);
}
.acct-banner > * { position: relative; z-index: 1; }
.hero-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(240, 212, 154, 0.35); }
.hero-icon svg { width: 17px; height: 17px; }
.hero-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 10.5px; font-weight: 600; }
.hero-badge svg { width: 10px; height: 10px; }
.ab-id { min-width: 0; }
.ab-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-meta { font-size: var(--font-size-xs); color: #a9c6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-meta i { font-style: normal; margin: 0 5px; opacity: 0.6; }
.ab-bal { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.ab-bal small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9c6de; }
.ab-bal b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #f0d49a; font-variant-numeric: tabular-nums; }
.ab-change { font-size: 10.5px; color: #a9c6de; }
.ab-change.up { color: #7de3b0; }
.ab-change.down { color: #ffa3a3; }
.ab-actions { display: flex; flex-direction: column; gap: 4px; }
.btn.on-dark { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
.btn.on-dark:hover { background: rgba(255, 255, 255, 0.22); }
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 5px; }
.metric {
    display: flex; gap: 7px; align-items: flex-start;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--hairline);
    min-width: 0;
}
.metric.highlight { border-color: rgba(250, 178, 25, 0.6); background: #fffaea; }
.metric-icon { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: var(--grad-brand-soft); color: var(--ocean-600); flex-shrink: 0; }
.metric-icon svg { width: 11px; height: 11px; }
.metric .label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.metric .value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric .note { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric .progress { margin-top: 3px; }
.acct-desc { padding: 0 2px; }
.acct-desc svg { width: 12px; height: 12px; vertical-align: -2px; }

/* statement timeline (grouped view) */
table.grouped tr.group-row td { padding: 0 !important; background: none; cursor: pointer; position: sticky; top: 25px; z-index: 1; }
table.grouped tr.group-row:hover td { background: none; }
.grp-head {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    font-size: var(--font-size-sm);
    background: linear-gradient(180deg, #f1f7fc, #e6f0f8);
    border-bottom: 1px solid var(--hairline-strong);
    border-left: 3px solid var(--ocean-600);
}
.grp-head b.ellipsis { color: var(--ocean-900); max-width: 260px; }
.grp-caret svg { width: 12px; height: 12px; color: var(--ocean-600); transition: transform 0.15s; }
tr.group-row.collapsed .grp-caret svg { transform: rotate(-90deg); }
.grp-count { font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: rgba(10, 79, 128, 0.1); color: var(--text-secondary); }
.grp-bar { width: 70px; height: 4px; border-radius: 2px; background: rgba(10, 79, 128, 0.08); overflow: hidden; }
.grp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ocean-400), var(--brand-accent)); }
.grp-head .pos, .grp-head .neg { font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.grp-net { min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.panel-head .switch { font-size: var(--font-size-sm); font-weight: 600; }

.ledger-summary {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    padding: 5px 12px;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.45);
}
.ledger-summary .muted { margin-left: auto; }

/* ---------------------------------------------------------------- chits */
.split-bar { display: flex; gap: 2px; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(10, 79, 128, 0.08); }
.split-bar.big { height: 12px; border-radius: 6px; }
.split-bar .paid { background: linear-gradient(90deg, #2fd0bf, var(--aqua-500)); }
.split-bar .overdue { background: var(--status-critical); }
.split-bar .todo { background: rgba(10, 79, 128, 0.14); }
.chit-cards { display: flex; flex-direction: column; gap: 7px; }
.chit-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--hairline);
    cursor: pointer;
    transition: box-shadow 0.12s, border-color 0.12s;
}
.chit-card:hover { box-shadow: var(--shadow-sm); border-color: var(--ocean-300); }
.chit-card.selected { border-color: var(--aqua-500); box-shadow: 0 0 0 2px rgba(18, 181, 166, 0.2); background: linear-gradient(180deg, #fff, #effcfa); }
.chit-card .title { font-weight: 700; }
.chit-card .meta { font-size: var(--font-size-xs); color: var(--text-muted); }
.chit-card-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.chit-card-figures > div { display: flex; flex-direction: column; }
.chit-card-figures .label, .cstat .label, .is-chip span, .mp span {
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);
}
.money-position { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mp-labels { display: flex; gap: 8px; }
.mp { flex: 1; display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.7); border-left-width: 3px; }
.mp b { font-size: 15px; font-variant-numeric: tabular-nums; }
.mp small { font-size: 10.5px; color: var(--text-muted); }
.mp.paid { border-left-color: var(--aqua-500); }
.mp.overdue { border-left-color: var(--status-critical); }
.mp.todo { border-left-color: var(--ocean-300); }
.mp.target { border-left-color: var(--status-warning); background: linear-gradient(180deg, #fffdf5, #fff6dc); }
.chit-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cstat { padding: 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--hairline); min-width: 0; }
.cstat .value { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstat .note { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chit-tab-body { height: 100%; }
tr.pending-row td { color: var(--text-secondary); }

.interest-summary { display: flex; gap: 6px; align-items: stretch; padding: 8px 10px 4px; flex-wrap: wrap; }
.is-chip { display: flex; flex-direction: column; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--hairline); }
.is-chip b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.is-chip small { font-size: 10.5px; color: var(--text-muted); }
.is-chip.compound { border-left: 3px solid var(--aqua-500); }
.is-chip.simple { border-left: 3px solid var(--series-7); }
.is-filter { margin-left: auto; align-self: center; }
.formula { margin: 4px 10px 8px; padding: 6px 10px; border-radius: 8px; font-size: var(--font-size-sm); color: var(--text-secondary); background: var(--grad-brand-soft); }
.formula svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--ocean-600); }
.interest-table th.col-simple, .interest-table td.col-simple { background-color: rgba(74, 58, 167, 0.04); }
.interest-row.projected td, .interest-row.after_payout td { color: var(--text-muted); font-style: italic; }
.interest-row.projected td.pos { color: #4f8f6a; }
.interest-row.accruing td { background: rgba(250, 178, 25, 0.06); }
tr.today-divider td { padding: 4px 10px !important; background: linear-gradient(90deg, rgba(18, 181, 166, 0.16), rgba(11, 139, 208, 0.06)); font-size: var(--font-size-sm); color: var(--ocean-800); }
tr.today-divider svg { width: 12px; height: 12px; vertical-align: -1px; }
.chit-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 10px 14px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--hairline); font-size: var(--font-size-sm); }
.kv span { color: var(--text-muted); }
.kv b { text-align: right; }

/* ---------------------------------------------------------------- balance sheet */
.bs-main { display: flex; flex-direction: column; min-height: 0; }
.bs-equation {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--grad-navy);
    color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
}
.bs-equation::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.8) 30%, rgba(240, 212, 154, 0.9) 50%, rgba(201, 154, 59, 0.8) 70%, transparent);
}
.eq-term { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eq-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9fc3df; }
.eq-value { font-size: 19px; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.eq-term.net .eq-value { font-size: 22px; color: #f0d49a; }
.eq-change { font-size: var(--font-size-xs); }
.eq-change .pos { color: #7de3b0; }
.eq-change .neg { color: #ffa3a3; }
.eq-change .muted { color: #8fb0c9; }
.eq-op { font-size: 22px; font-weight: 300; color: #7fa6c6; }

.bs-columns { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.bs-col { padding: 8px 12px 10px; min-width: 0; }
.bs-col + .bs-col { border-left: 1px solid var(--hairline); }
.bs-section + .bs-section { margin-top: 12px; }
.bs-section-head {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 2px 6px;
    border-bottom: 2px solid var(--ocean-700);
    font-size: 13px; color: var(--ocean-900);
}
.bs-section.liability .bs-section-head { border-bottom-color: #c2532c; }
.bs-section.equity .bs-section-head { border-bottom-color: #5b4fc9; }
.col-h { width: 96px; text-align: right; font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 600; }
.col-h.now { color: var(--text-primary); }
.bs-group { border-bottom: 1px solid var(--hairline); }
.bs-group-head {
    width: 100%;
    display: flex; align-items: center; gap: 7px;
    padding: 6px 2px;
    border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.bs-group-head:hover { background: var(--surface-hover); }
.bs-group-head .caret svg { width: 12px; height: 12px; color: var(--text-muted); transition: transform 0.15s; }
.bs-group.collapsed .caret svg { transform: rotate(-90deg); }
.bs-group.collapsed .bs-accounts { display: none; }
.g-label { font-weight: 700; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.g-count { font-size: 9.5px; padding: 0 5px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--hairline); }
.g-share { margin-left: auto; width: 54px; height: 4px; border-radius: 3px; background: rgba(10, 79, 128, 0.08); overflow: hidden; }
.g-share i { display: block; height: 100%; background: linear-gradient(90deg, var(--ocean-400), var(--brand-accent)); }
.bs-section.liability .g-share i { background: linear-gradient(90deg, #f3a07f, #d9603c); }
.g-pct { width: 32px; text-align: right; font-size: var(--font-size-xs); color: var(--text-muted); }
.g-prev, .a-prev { width: 96px; text-align: right; font-size: var(--font-size-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.g-total { width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.bs-accounts { padding: 0 0 4px 20px; }
.bs-acct { display: flex; align-items: center; gap: 7px; height: 25px; font-size: var(--font-size-sm); }
.bs-acct:hover { background: rgba(11, 124, 189, 0.04); }
.a-name { flex: 1; min-width: 0; }
.a-delta { font-size: 10px; font-weight: 650; padding: 0 5px; border-radius: 999px; background: rgba(11, 122, 59, 0.08); }
.a-delta.neg { background: rgba(194, 54, 58, 0.08); }
.a-amt { width: 104px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bs-section-total {
    display: flex; align-items: center; gap: 7px; justify-content: flex-end;
    padding: 7px 2px 0;
    font-weight: 700; color: var(--ocean-900);
    border-top: 1px solid var(--hairline-strong);
}
.bs-section-total span:first-child { margin-right: auto; text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: 0.05em; color: var(--text-secondary); }
.bs-section-total b { width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.bs-empty { padding: 10px 4px; }
.bs-totals {
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 2px double var(--hairline-strong);
    background: linear-gradient(180deg, #f6f9fc, #edf3f8);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.bs-totals > div { display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
.bs-totals > div + div { border-left: 1px solid var(--hairline); }
.bs-totals span { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.bs-totals b { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ocean-900); }
.bs-totals .badge { margin-left: 4px; }

/* right pane */
.bs-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-right: 2px; }
.side-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 9px 11px;
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.side-head { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--ocean-900); }
.side-head > svg { width: 14px; height: 14px; color: var(--ocean-500); }
.bs-trend { height: 112px; }
.mix-rows { display: flex; flex-direction: column; gap: 2px; }
.mix-row { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--text-secondary); min-width: 0; }
.mix-row b { width: 52px; text-align: right; color: var(--text-primary); }
.mix-row .muted { width: 30px; text-align: right; }
.health-rows { display: flex; flex-direction: column; gap: 3px; }
.health-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 54px 56px; align-items: center; gap: 6px; font-size: var(--font-size-sm); }
.health-row .h-icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #e5f6ea; color: #0b7a3b; }
.health-row.warn .h-icon { background: #fff2d9; color: #a06d00; }
.health-row .h-icon svg { width: 11px; height: 11px; }
.h-label { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.h-label small { font-size: 9.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-meter { height: 4px; border-radius: 3px; background: rgba(10, 79, 128, 0.08); overflow: hidden; }
.h-meter i { display: block; height: 100%; background: linear-gradient(90deg, #6fd3a0, #13a89a); }
.health-row.warn .h-meter i { background: linear-gradient(90deg, #f6c445, #e8913a); }
.health-row b { text-align: right; font-variant-numeric: tabular-nums; }
.dues-split { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px dashed var(--hairline); }
.split-bar .seg.short { background: linear-gradient(90deg, #f3a07f, #d9603c); }
.split-bar .seg.long { background: linear-gradient(90deg, #9aa9bb, #6b7f95); }
.mover { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); min-width: 0; height: 22px; }

/* toggle switch */
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-secondary); user-select: none; }
.switch input { display: none; }
.switch span { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(10, 79, 128, 0.2); transition: background 0.15s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch input:checked + span { background: var(--ocean-600); }
.switch input:checked + span::after { transform: translateX(12px); }

/* chit list cards on brand */
.chit-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--grad-navy); color: #f0d49a; flex-shrink: 0; box-shadow: 0 2px 6px rgba(11, 32, 56, 0.25); }
.chit-mark svg { width: 14px; height: 14px; }
.chit-card { border-radius: 10px; border-left: 3px solid var(--brand-accent); }
.chit-card.status-prized { border-left-color: var(--brand-gold); }
.chit-card.status-matured, .chit-card.status-closed { border-left-color: #9aa9bb; }
.chit-card.selected { border-color: var(--brand-gold); border-left-color: var(--brand-gold); box-shadow: 0 0 0 2px rgba(201, 154, 59, 0.25); background: linear-gradient(180deg, #fff, #fffaf0); }
.upi-dot { padding: 0 5px; border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: var(--ocean-700); background: var(--glacier-100); border: 1px solid rgba(11, 139, 208, 0.25); }

/* ---------------------------------------------------------------- UPI pay */
.upi-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f3f9fd);
    border: 1px solid var(--hairline-strong);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.upi-head { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--ocean-800); }
.upi-head svg { width: 14px; height: 14px; color: var(--ocean-500); }
.upi-qr { padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 4px 14px rgba(10, 46, 79, 0.1); line-height: 0; }
.upi-qr svg.qr { display: block; }
.upi-amount { font-size: 20px; font-weight: 800; color: var(--ocean-900); font-variant-numeric: tabular-nums; }
.upi-payee { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--font-size-sm); }
.upi-payee .mono { color: var(--text-muted); font-size: var(--font-size-xs); }
.upi-note { display: flex; align-items: center; gap: 5px; max-width: 240px; padding: 3px 8px; border-radius: 6px; background: #fffaea; border: 1px dashed #e8cf86; font-size: var(--font-size-xs); color: #6b5a16; }
.upi-note svg { width: 11px; height: 11px; flex-shrink: 0; }
.upi-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.upi-dialog { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.upi-side { display: flex; flex-direction: column; gap: 6px; }
.upi-side .hint svg { width: 12px; height: 12px; vertical-align: -2px; color: var(--brand-gold); }
.pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start; }

/* on-demand form section */
.disclosure { border: 1px dashed var(--hairline-strong); border-radius: 10px; background: rgba(255, 255, 255, 0.5); }
.disclosure-btn {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 6px 10px; border: 0; background: none; font: inherit; cursor: pointer; color: var(--ocean-800); text-align: left;
}
.disclosure-btn svg { width: 13px; height: 13px; color: var(--ocean-500); }
.disclosure-btn svg:last-child { margin-left: auto; transition: transform 0.15s; color: var(--text-muted); }
.disclosure-btn .muted { font-size: var(--font-size-sm); }
.disclosure-body { display: none; padding: 0 10px 10px; }
.disclosure.open .disclosure-body { display: grid; }
.disclosure.open .disclosure-btn svg:last-child { transform: rotate(180deg); }
.link-btn { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--link); cursor: pointer; }
.link-btn svg { width: 11px; height: 11px; }
.link-btn:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- budgets */
.budget-cards { display: flex; flex-direction: column; gap: 5px; }
.budget-card {
    display: flex; flex-direction: column; gap: 5px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--status-good);
    cursor: pointer;
    transition: box-shadow 0.12s, border-color 0.12s;
}
.budget-card:hover { box-shadow: var(--shadow-sm); border-color: var(--ocean-300); }
.budget-card.health-warning { border-left-color: var(--status-warning); }
.budget-card.health-over { border-left-color: var(--status-critical); }
.budget-card.unbudgeted { border-left-color: #b9c6d3; border-style: dashed; border-left-style: solid; gap: 3px; }
.budget-card.selected { background: linear-gradient(90deg, #fff, #eef7fd); border-color: rgba(11, 124, 189, 0.45); box-shadow: 0 0 0 2px rgba(11, 124, 189, 0.12); }
.budget-card .grow { flex: 1; min-width: 0; }
.bc-pct { font-weight: 750; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.bc-pct.good { color: #0a6b0a; } .bc-pct.warning { color: #8a5b00; } .bc-pct.over { color: #a32626; }
.bc-track { position: relative; height: 6px; border-radius: 999px; background: rgba(10, 79, 128, 0.09); }
.bc-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3cc06b, var(--status-good)); }
.bc-track.warning > span { background: linear-gradient(90deg, #ffd060, var(--status-warning)); }
.bc-track.over > span { background: linear-gradient(90deg, #ef6b6b, var(--status-critical)); }
.pace-tick { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 1px; background: var(--ocean-900); opacity: 0.55; }
.p-budget-head { padding: 8px; gap: 8px; }
.p-budget-head::before { display: none; }
.budget-banner {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--grad-navy);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(6, 32, 56, 0.22);
}
.budget-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(201, 154, 59, 0.9), rgba(240, 212, 154, 0.6) 40%, transparent); }
.bb-ring {
    --p: 0; --ring: #34d399;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(255, 255, 255, 0.14) 0);
}
.health-warning .bb-ring { --ring: #fbbf24; }
.health-over .bb-ring { --ring: #f87171; }
.health-unbudgeted .bb-ring { --ring: #9fbdd6; }
.bb-ring span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #0d3150; font-size: 11.5px; font-weight: 800; color: #f0d49a; }
.bb-name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 750; min-width: 0; }
.bb-name > svg { width: 16px; height: 16px; color: #7de3d6; }
.bb-meta { font-size: var(--font-size-xs); color: #a9c6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-fig { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.bb-fig small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9c6de; }
.bb-fig b { font-size: 20px; font-weight: 800; color: #f0d49a; font-variant-numeric: tabular-nums; }
.bb-fig span { font-size: 10.5px; color: #a9c6de; }
.bb-actions { display: flex; gap: 4px; }
.insights { display: flex; flex-direction: column; gap: 5px; }
.insight { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; font-size: var(--font-size-sm); line-height: 1.35; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--hairline); border-left: 3px solid var(--info); }
.insight > svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--info); }
.insight.good { border-left-color: var(--status-good); } .insight.good > svg { color: var(--status-good); }
.insight.warn { border-left-color: var(--status-warning); } .insight.warn > svg { color: #c98500; }
.insight.bad { border-left-color: var(--status-critical); } .insight.bad > svg { color: var(--status-critical); }
.p-budget-tx .panel-body { display: flex; flex-direction: column; }
.p-budget-tx .scroll { flex: 1; }

/* ---------------------------------------------------------------- dashboard: health score & insights */
.insight-ribbon { display: grid; grid-template-columns: 290px minmax(0, 1fr) auto; gap: var(--gap); min-width: 0; }
.health-card {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px;
    border-radius: var(--radius-lg);
    background: var(--grad-navy);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(6, 32, 56, 0.25);
}
.health-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.9) 30%, rgba(240, 212, 154, 0.95) 50%, rgba(201, 154, 59, 0.9) 70%, transparent); }
.hc-gauge {
    --p: 0;
    width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: conic-gradient(from 210deg, #2fd0bf 0, #f0d49a calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0);
}
.hc-gauge span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: #0d3150; line-height: 1; }
.hc-gauge b { font-size: 18px; font-weight: 800; color: #f0d49a; }
.hc-gauge small { font-size: 8.5px; color: #a9c6de; }
.hc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-label { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9c6de; }
.hc-label svg { width: 11px; height: 11px; color: #f0d49a; }
.hc-grade { font-size: 15px; font-weight: 750; }
.hc-parts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 2px; }
.hc-part { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-part span { font-size: 8.5px; color: #a9c6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-part i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.hc-part i b { display: block; height: 100%; background: linear-gradient(90deg, #2fd0bf, #f0d49a); }
.insight-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); min-width: 0; }
.insight-card {
    position: relative;
    display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-top: 3px solid var(--info);
    box-shadow: var(--shadow-sm);
    color: inherit;
    min-width: 0;
    transition: transform 0.1s, box-shadow 0.15s;
}
.insight-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.insight-card.good { border-top-color: var(--status-good); }
.insight-card.warn { border-top-color: var(--status-warning); }
.insight-card.bad { border-top-color: var(--status-critical); }
.ic-icon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; background: var(--glacier-100); color: var(--ocean-600); }
.ic-icon svg { width: 14px; height: 14px; }
.insight-card.good .ic-icon { background: #e3f6e3; color: #0a6b0a; }
.insight-card.warn .ic-icon { background: #fff4d6; color: #a06d00; }
.insight-card.bad .ic-icon { background: #fbe3e3; color: #a32626; }
.ic-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ic-title { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ic-value { margin-left: auto; font-size: 13px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ic-text { font-size: var(--font-size-xs); line-height: 1.35; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insight-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 64px; padding: 6px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(201, 154, 59, 0.45);
    background: linear-gradient(180deg, #fffdf6, #fff4d8);
    font: inherit; color: #6b4f12; cursor: pointer;
}
.insight-more svg { width: 16px; height: 16px; color: #c99a3b; }
.insight-more b { font-size: 16px; line-height: 1; }
.insight-more span { font-size: 9.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.insight-more:hover { box-shadow: 0 0 0 2px rgba(201, 154, 59, 0.25); }
.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.insight-grid .ic-text { -webkit-line-clamp: unset; }
.hc-breakdown { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hc-breakdown > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.hc-breakdown span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.hc-breakdown small { font-size: 10px; color: var(--text-muted); }
@media (max-width: 1500px) {
    .insight-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .insight-cards .insight-card:nth-child(4) { display: none; }
}

/* ---------------------------------------------------------------- forecast planners */
.planner-form { gap: 10px; }
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix input { width: 100%; padding-right: 54px; }
.input-suffix i { position: absolute; right: 9px; font-style: normal; font-size: var(--font-size-xs); font-weight: 650; color: var(--text-muted); pointer-events: none; }
.planner-note { display: flex; gap: 6px; padding: 7px 9px; border-radius: 8px; background: var(--grad-brand-soft); font-size: var(--font-size-xs); line-height: 1.4; color: var(--text-secondary); }
.planner-note svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--ocean-600); }
.planner-form input[type="range"] { width: 100%; }
.planner-form .field > span b { color: var(--ocean-700); text-transform: none; letter-spacing: 0; }
.mode-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mode-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 7px 8px; border-radius: 9px;
    border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, 0.85);
    font: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.mode-tile svg { width: 15px; height: 15px; color: var(--ocean-500); }
.mode-tile b { font-size: var(--font-size-sm); }
.mode-tile small { font-size: 9.5px; color: var(--text-muted); line-height: 1.25; }
.mode-tile.active { background: var(--grad-navy); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(11, 32, 56, 0.25); }
.mode-tile.active svg { color: #f0d49a; }
.mode-tile.active small { color: #a9c6de; }
table.grid tr.selected-row td { background: rgba(11, 139, 208, 0.1); font-weight: 650; }
table.grid tr.best-row td:first-child { box-shadow: inset 3px 0 0 var(--brand-gold); }
#fc-mode .seg-chip { height: 26px; color: var(--text-secondary); text-decoration: none; }
#fc-mode .seg-chip.active { color: #fff; }

/* ---------------------------------------------------------------- accounts: overview chips */
.acct-overview { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(200px, 1.5fr) repeat(10, minmax(0, 1fr)); gap: 6px; }
.ov-chip {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
    min-width: 0; padding: 6px 10px;
    border-radius: 10px;
    background: var(--surface);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    font: inherit; text-align: left; color: inherit;
}
.ov-chip .ov-label { display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ov-chip .ov-label svg { width: 11px; height: 11px; color: var(--ocean-500); }
.ov-chip .ov-label i { font-style: normal; margin-left: auto; padding: 0 5px; border-radius: 999px; background: rgba(10, 79, 128, 0.08); color: var(--text-secondary); }
.ov-chip b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-chip small { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-net { background: var(--grad-navy); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(11, 32, 56, 0.25); }
.ov-net::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0 0 10px 10px; background: linear-gradient(90deg, rgba(201, 154, 59, 0.9), rgba(240, 212, 154, 0.6) 50%, transparent); }
.ov-net .ov-label { color: #a9c6de; }
.ov-net .ov-label svg { color: #f0d49a; }
.ov-net b { font-size: 18px; color: #f0d49a; }
.ov-net small { color: #a9c6de; }
.ov-net .up { color: #7de3b0; } .ov-net .down { color: #ffa3a3; }
.ov-net .mix-bar { margin-top: 4px; height: 5px; background: rgba(255, 255, 255, 0.12); }
.class-chip { cursor: pointer; border-top: 3px solid transparent; transition: box-shadow 0.12s, transform 0.08s; }
.class-chip:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.class-chip.tone-asset { border-top-color: var(--ocean-500); background-image: none; }
.class-chip.tone-liability { border-top-color: #d9603c; background-image: none; }
.class-chip.tone-income { border-top-color: var(--brand-accent); background-image: none; }
.class-chip.tone-expense { border-top-color: #c98500; background-image: none; }
.class-chip.tone-equity { border-top-color: #5b4fc9; background-image: none; }
.class-chip.active { background: linear-gradient(180deg, #fff, #eaf5fc); box-shadow: 0 0 0 2px rgba(11, 124, 189, 0.3), var(--shadow-sm); }
.class-chip.active b { color: var(--ocean-800); }
.info-chip.warn { border-left: 3px solid var(--status-warning); }
.info-chip.note { border-left: 3px solid var(--brand-gold); }
.account-list:focus { outline: none; }
.account-list:focus .acct-item.selected { box-shadow: 0 0 0 2px rgba(240, 212, 154, 0.8), 0 6px 16px rgba(11, 32, 56, 0.28); }
@media (max-width: 1500px) {
    .acct-overview { grid-template-columns: minmax(180px, 1.4fr) repeat(5, minmax(0, 1fr)) repeat(3, minmax(0, 1fr)); }
    .acct-overview .info-chip:nth-last-child(-n+2) { display: none; }
}

/* ---------------------------------------------------------------- expenses */
.xp-toolbar { row-gap: 6px; }
.seg-chip.more { padding: 0 7px; }
.smart-search { width: 290px; }
.smart-search .btn { height: 20px; width: 20px; }
.btn.active-filter { border-color: var(--ocean-400); box-shadow: var(--brand-ring); }
.count-dot { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ocean-600); color: #fff; font-size: 9.5px; }
.xp-more-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--hairline); background: var(--grad-brand-soft); }
.xp-more-filters select, .xp-more-filters .combo { width: 190px; }
.xp-amounts { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.xp-amounts svg { width: 14px; height: 14px; color: var(--ocean-500); }
.xp-amounts input { width: 90px; height: 26px; }
.xp-query { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-bottom: 1px dashed var(--hairline); font-size: var(--font-size-xs); }
.xp-query svg { width: 12px; height: 12px; color: var(--brand-gold); }
.p-xp-list .panel-body { display: flex; flex-direction: column; }
.p-xp-list .xp-list { flex: 1; }
.xp-table .c-date { width: 104px; line-height: 1.15; white-space: nowrap; }
.xp-table .c-date b { display: block; font-size: var(--font-size-sm); color: var(--ocean-800); }
.xp-table .c-date small { font-size: 10px; color: var(--text-muted); }
.xp-summary { display: flex; flex-direction: column; gap: 8px; }
.xs-hero { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; background: var(--grad-navy); color: #fff; position: relative; overflow: hidden; }
.xs-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(201, 154, 59, 0.9), transparent); }
.xs-hero .label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9c6de; }
.xs-hero b { font-size: 21px; font-weight: 800; color: #f0d49a; font-variant-numeric: tabular-nums; }
.xs-hero small { font-size: 10.5px; color: #a9c6de; }
.xs-hero .pos { color: #7de3b0; } .xs-hero .neg { color: #ffa3a3; }
.xs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.xs-grid > div { display: flex; flex-direction: column; min-width: 0; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--hairline); }
.xs-grid > div.clickable { cursor: pointer; }
.xs-grid > div.clickable:hover { border-color: var(--ocean-300); }
.xs-grid > div.active { border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(18, 168, 154, 0.2); }
.xs-grid span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.xs-grid b { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.xs-grid small { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-bar { display: block; height: 4px; margin: 2px 0; border-radius: 2px; background: rgba(10, 79, 128, 0.1); overflow: hidden; }
.xs-bar em { display: block; height: 100%; background: var(--status-good); }
.xs-bar.warn em { background: var(--status-warning); }
.xs-bar.over em { background: var(--status-critical); }
.aqua-ink { color: #0b8a7e; }

/* lent money: net payable and the monthly schedule */
.rate-type { display: flex; gap: 4px; }
.rate-type input { flex: 1; min-width: 0; }
.rate-type select { width: 108px; }
.payable-card {
    display: grid; grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); gap: 8px;
    padding: 8px 12px; border-radius: 10px;
    background: var(--grad-navy); color: #fff;
}
.payable-card > div { display: flex; flex-direction: column; min-width: 0; }
.payable-card .label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a9c6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payable-card b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.payable-card .pc-main b { font-size: 20px; color: #f0d49a; }
.payable-card small { font-size: 10.5px; color: #a9c6de; }
.payable-card .pc-side { border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: 10px; }
.payable-card .pos { color: #7de3b0; } .payable-card .muted { color: #cfe3f3; }
.claim-schedule .section-title { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; flex-wrap: wrap; }
.claim-schedule .section-title .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sched-scroll { max-height: 230px; border: 1px solid var(--hairline); border-radius: 8px; }
.claim-schedule tr.sched-projected td { color: var(--text-muted); font-style: italic; }
.claim-schedule tr.sched-accruing td { background: rgba(250, 178, 25, 0.07); }

/* ---------------------------------------------------------------- budgets: list | transactions | insights */
.planning-body.budgets { grid-template-columns: 290px minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); }
.p-budget-list .panel-body { display: flex; flex-direction: column; }
.budget-total { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--hairline); background: var(--grad-brand-soft); }
.budget-total .label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.bt-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bt-figs span { display: flex; flex-direction: column; min-width: 0; }
.bt-figs small { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650; }
.bt-figs b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.budget-cards.scroll { flex: 1; padding: 6px 8px; gap: 4px; }
.budget-card { padding: 6px 8px; gap: 4px; }
.budget-card.unbudgeted { padding: 4px 8px; }
.bc-flag svg { width: 12px; height: 12px; color: #c98500; }
.budget-main { display: grid; min-height: 0; min-width: 0; }
.p-budget-tx .panel-body { display: flex; flex-direction: column; }
.p-budget-tx .scroll { flex: 1; }
.budget-strip { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.55); border-left: 3px solid var(--status-good); }
.budget-strip.health-warning { border-left-color: var(--status-warning); }
.budget-strip.health-over { border-left-color: var(--status-critical); }
.budget-strip.health-unbudgeted { border-left-color: #b9c6d3; }
.budget-strip .row { gap: 8px; margin-bottom: 4px; }
.budget-strip b { font-size: 15px; font-variant-numeric: tabular-nums; }
.search-box.sm { height: 24px; }
.search-box.sm input { min-width: 90px; width: 110px; font-size: var(--font-size-sm); }
.budget-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; padding-right: 2px; }
.bs-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.budget-trend { height: 130px; }
.side-head .legend { margin-left: auto; }
.insight.clickable { cursor: pointer; }
.insight.clickable:hover { box-shadow: var(--shadow-sm); }
.insight .link-btn { margin-left: 4px; }

/* ---------------------------------------------------------------- chits: compact portfolio strip */
.chit-strip {
    grid-column: 1 / -1;
    position: relative;
    display: grid; grid-template-columns: minmax(150px, 1.1fr) repeat(7, minmax(0, 1fr)) auto;
    align-items: stretch;
    border-radius: var(--radius-lg);
    background: var(--grad-navy);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(6, 32, 56, 0.25);
}
.chit-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.9) 25%, rgba(240, 212, 154, 0.95) 50%, rgba(201, 154, 59, 0.9) 75%, transparent); }
.cs-brand { display: flex; align-items: center; gap: 8px; padding: 7px 12px; min-width: 0; }
.cs-brand b { display: block; font-size: 13px; }
.cs-brand small { font-size: 10px; color: #a9c6de; }
.cs-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(240, 212, 154, 0.15); color: #f0d49a; flex-shrink: 0; }
.cs-mark svg { width: 15px; height: 15px; }
.cs-cell { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 6px 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.cs-cell > span { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #a9c6de; white-space: nowrap; }
.cs-cell > b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-cell > small { font-size: 9.5px; color: #a9c6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.cs-cell .up { color: #7de3b0; } .cs-cell .down { color: #ffa3a3; } .cs-cell .gold { color: #f6dc9c; }
.cs-cell.highlight { background: linear-gradient(180deg, rgba(240, 212, 154, 0.12), rgba(240, 212, 154, 0.04)); }
.cs-cell.alert { background: rgba(255, 120, 120, 0.12); }
.cs-bar { display: inline-block; width: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); overflow: hidden; flex-shrink: 0; }
.cs-bar em { display: block; height: 100%; background: linear-gradient(90deg, #2fd0bf, #f0d49a); }
.cs-switch { align-self: center; padding: 0 12px; color: #cfe3f3; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.cs-switch span { background: rgba(255, 255, 255, 0.2); }
.cs-switch input:checked + span { background: #c99a3b; }
@media (max-width: 1450px) {
    .chit-strip { grid-template-columns: minmax(120px, 1fr) repeat(6, minmax(0, 1fr)) auto; }
    .chit-strip .cs-cell:nth-of-type(6) { display: none; }
}

.chit-rows { padding: 6px 8px; height: 100%; }
.chit-row {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center;
    padding: 6px 9px; margin-bottom: 3px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 253, 0.85));
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--brand-accent);
    cursor: pointer;
}
.chit-row:hover { box-shadow: 0 3px 10px rgba(10, 46, 79, 0.08); }
.chit-row.status-prized { border-left-color: var(--brand-gold); }
.chit-row.status-matured, .chit-row.status-closed { border-left-color: #9aa9bb; opacity: 0.85; }
.chit-row .chit-mark { width: 26px; height: 26px; }
.chit-row .chit-mark svg { width: 13px; height: 13px; }
.chit-row.selected { background: var(--grad-navy); color: #fff; border-color: transparent; border-left-color: var(--brand-gold); box-shadow: 0 6px 16px rgba(11, 32, 56, 0.28); }
.chit-row.selected .cr-line.sub { color: #a9c6de; }
.chit-row.selected .cr-value { color: #f0d49a; }
.chit-row.selected .chit-mark { background: rgba(240, 212, 154, 0.16); box-shadow: none; }
.cr-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cr-line b.ellipsis { flex: 1; min-width: 0; }
.cr-value { font-variant-numeric: tabular-nums; }
.cr-line.sub { font-size: var(--font-size-xs); color: var(--text-muted); }
.cr-line.sub .ellipsis { flex: 1; min-width: 0; }
.cr-bar { display: flex; height: 3px; margin-top: 4px; border-radius: 2px; background: rgba(10, 79, 128, 0.1); overflow: hidden; }
.cr-bar em { display: block; height: 100%; background: linear-gradient(90deg, #2fd0bf, var(--aqua-500)); }
.cr-bar em.late { background: var(--status-critical); }
.chit-row.selected .cr-bar { background: rgba(255, 255, 255, 0.15); }
.chit-row.selected .cr-bar em { background: linear-gradient(90deg, #2fd0bf, #f0d49a); }

.p-chit-head { padding: 8px; gap: 8px; }
.p-chit-head::before { display: none; }
.chit-banner {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 8px;
    background: var(--grad-navy); color: #fff; overflow: hidden;
    box-shadow: 0 8px 20px rgba(6, 32, 56, 0.22);
}
.chit-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(201, 154, 59, 0.9), rgba(240, 212, 154, 0.6) 40%, transparent); }
.chit-banner .hero-icon { color: #f0d49a; }
.chit-banner .badge { transform: scale(0.92); }
/* the chit's progress in its banner: paid (and overdue) against the whole contribution, a tick for today */
.cb-progress { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; max-width: 420px; }
.cb-track { position: relative; display: flex; height: 8px; border-radius: 999px; overflow: visible;
    background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cb-track .cb-paid { height: 100%; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, #2fd0bf, #7de3b0); }
.cb-track .cb-paid[style="width:100%"] { border-radius: 999px; }
.cb-track .cb-overdue { height: 100%; background: repeating-linear-gradient(45deg, #ff8a8a 0 4px, #e25555 4px 8px); }
.cb-track .cb-now { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: #f0d49a;
    box-shadow: 0 0 0 1px rgba(8, 26, 46, 0.6); }
.cb-legend { display: flex; flex-wrap: wrap; gap: 0 5px; font-size: 10.5px; color: #a9c6de; line-height: 1.35; }
.cb-legend b { color: #fff; font-weight: 750; }
.cb-legend .cb-late { color: #ffa3a3; font-weight: 650; }
.cb-legend .cb-ahead { color: #7de3b0; }
.chit-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
.metric.gold { border-color: rgba(201, 154, 59, 0.45); background: linear-gradient(180deg, #fffdf6, #fff6dc); }
.book-note { display: flex; gap: 6px; align-items: flex-start; padding: 6px 9px; border-radius: 8px; background: var(--grad-brand-soft); font-size: var(--font-size-sm); color: var(--text-secondary); }
.book-note svg { width: 13px; height: 13px; color: var(--ocean-600); flex-shrink: 0; margin-top: 2px; }

/* ---------------------------------------------------------------- balance sheet */
.eq-funding { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 6px; margin-top: 2px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ef-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fc3df; white-space: nowrap; }
.ef-bar { flex: 1; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.ef-bar span { display: block; height: 100%; }
.ef-debt { background: linear-gradient(90deg, #f3a07f, #d9603c); }
.ef-own { background: linear-gradient(90deg, #2fd0bf, #f0d49a); }
.ef-legend { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); color: #cfe3f3; white-space: nowrap; }
.ef-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.bs-single { display: flex; align-items: center; gap: 7px; padding: 5px 2px; min-height: 30px; }
.bs-single .a-name b { font-weight: 650; }
.g-tag { font-size: 9.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 5px; border-radius: 3px; background: rgba(10, 79, 128, 0.06); }
.bs-mixes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bs-mixes .side-card { backdrop-filter: none; background: rgba(255, 255, 255, 0.6); }

/* ---------------------------------------------------------------- keyboard & shortcut map */
.shortcut-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.shortcut-map section { display: flex; flex-direction: column; gap: 3px; }
.sc-row { display: flex; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px dashed var(--hairline); font-size: var(--font-size-sm); }
.sc-row span:last-child { margin-left: 8px; color: var(--text-secondary); }
.sc-row .kbd { min-width: 20px; text-align: center; font-weight: 700; color: var(--ocean-800); background: #fff; }
.foot-keys .kbd { margin: 0 2px 0 4px; }
tr.cursor td { background: rgba(240, 212, 154, 0.22) !important; box-shadow: inset 0 0 0 0 transparent; }
tr.cursor td:first-child { box-shadow: inset 3px 0 0 var(--brand-gold); }

/* ---------------------------------------------------------------- dashboard */
.dashboard { display: flex !important; flex-direction: column; gap: var(--gap); }
.dash-bar { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.dash-hello { display: flex; align-items: baseline; gap: 8px; }
.dash-hello b { font-size: 15px; color: var(--ocean-900); }
.dash-hello span { font-size: var(--font-size-sm); color: var(--text-muted); }
.quick-actions { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); }
.qa {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
    border: 0; border-radius: 9px; background: transparent; color: var(--ocean-800);
    font: inherit; font-weight: 650; font-size: var(--font-size-sm); cursor: pointer; white-space: nowrap;
}
.qa svg { width: 13px; height: 13px; color: var(--ocean-500); }
.qa .kbd { font-size: 9px; padding: 0 4px; opacity: 0.7; }
.qa:hover { background: var(--grad-navy); color: #fff; }
.qa:hover svg { color: #f0d49a; }
.qa:hover .kbd { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.qa.gold { background: linear-gradient(180deg, #fffdf6, #fff2cf); color: #6b4f12; }
.qa.gold svg { color: #c99a3b; }
.dashboard .kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dash-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: dense; gap: var(--gap); }
.dash-cell { display: grid; min-height: 0; min-width: 0; }
.dchit-list { display: flex; flex-direction: column; gap: 6px; }
.dchit { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.7); color: inherit; }
.dchit:hover { border-color: var(--brand-gold); }
.dchit .tiny { gap: 8px; color: var(--text-muted); }
.dchit .tiny b { color: var(--text-primary); }
.cashflow { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cf-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 64px; align-items: center; gap: 8px; font-size: var(--font-size-sm); }
.cf-row b { text-align: right; font-variant-numeric: tabular-nums; }
.cf-bar { display: block; height: 10px; border-radius: 5px; background: rgba(10, 79, 128, 0.07); overflow: hidden; }
.cf-bar em { display: block; height: 100%; border-radius: 5px; }
.cf-bar.in em { background: linear-gradient(90deg, #6fd3a0, #13a89a); }
.cf-bar.out em { background: linear-gradient(90deg, #f3a07f, #d9603c); }
.cf-bar.kept em { background: linear-gradient(90deg, #2fd0bf, #f0d49a); }
.cf-note { font-size: var(--font-size-xs); color: var(--text-secondary); padding: 6px 8px; border-radius: 8px; background: var(--grad-brand-soft); }
.cf-note svg { width: 12px; height: 12px; vertical-align: -2px; color: var(--ocean-600); }
.dash-custom { display: flex; flex-direction: column; gap: 10px; }
.dc-bands { display: flex; gap: 18px; padding: 8px 10px; border-radius: 10px; background: var(--grad-brand-soft); }
.dc-list { display: flex; flex-direction: column; gap: 4px; }
.dc-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: #fff; }
.dc-row.off { opacity: 0.55; background: var(--surface-sunken); }
@media (max-width: 1400px) { .dashboard .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qa .kbd { display: none; } }

/* ---------------------------------------------------------------- income */
.income-page { grid-template-columns: 290px minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); }
.income-page .page-toolbar { grid-column: 1 / -1; }
.p-in-sources .panel-body { display: flex; flex-direction: column; }
.in-total { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; margin: 8px; border-radius: 10px; background: var(--grad-navy); color: #fff; position: relative; }
.in-total::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0 0 10px 10px; background: linear-gradient(90deg, rgba(201, 154, 59, 0.9), transparent); }
.in-total .label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9c6de; }
.in-total b { font-size: 21px; font-weight: 800; color: #f0d49a; font-variant-numeric: tabular-nums; }
.in-total small { font-size: 10.5px; color: #a9c6de; }
.in-total .up { color: #7de3b0; } .in-total .down { color: #ffa3a3; }
.in-split { display: flex; height: 5px; margin: 5px 0 2px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.in-split .earned { background: #7dd0f5; } .in-split .passive { background: #f0d49a; }
.in-sources { flex: 1; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.in-source { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--hairline); border-left: 3px solid var(--brand-accent); background: rgba(255, 255, 255, 0.85); cursor: pointer; }
.in-source:hover { box-shadow: var(--shadow-sm); }
.in-source.quiet { opacity: 0.6; }
.in-source .grow { flex: 1; }
.in-source .r { display: flex; flex-direction: column; align-items: flex-end; }
.in-source .r small { font-size: 10px; color: var(--text-muted); }
.in-source .tag { font-size: 9px; height: 15px; }
.in-source.selected { background: var(--grad-navy); color: #fff; border-color: transparent; border-left-color: var(--brand-gold); }
.in-source.selected small, .in-source.selected .tag { color: #a9c6de; background: rgba(255, 255, 255, 0.1); }
.in-source.selected .mono { color: #f0d49a; }
.in-bar { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: rgba(10, 79, 128, 0.08); overflow: hidden; }
.in-bar em { display: block; height: 100%; background: linear-gradient(90deg, #2fd0bf, var(--aqua-500)); }
.in-source.selected .in-bar { background: rgba(255, 255, 255, 0.15); }
.p-in-list .panel-body { display: flex; flex-direction: column; }
.p-in-list .scroll { flex: 1; }
.in-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }
.in-trend { height: 120px; }
.in-mix { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center; }
.in-mix .chart { height: 120px; }
.in-mix-legend { display: flex; flex-direction: column; gap: 3px; }
.chit-gains { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg, #0b2038 0%, #0e3456 55%, #3a2c08 100%); box-shadow: 0 8px 20px rgba(6, 32, 56, 0.25); flex-shrink: 0; }
.cg-head { display: flex; align-items: center; gap: 6px; }
.cg-head svg { width: 15px; height: 15px; color: #f0d49a; }
.cg-pill { padding: 0 7px; border-radius: 999px; border: 1px solid rgba(240, 212, 154, 0.5); color: #f0d49a; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.cg-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cg-figs > div { display: flex; flex-direction: column; padding: 5px 7px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(240, 212, 154, 0.15); min-width: 0; }
.cg-figs span { font-size: 9px; color: #a9c6de; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.cg-figs b { font-size: 13.5px; color: #f6dc9c; font-variant-numeric: tabular-nums; }
.cg-figs small { font-size: 9.5px; color: #a9c6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-rows { display: flex; flex-direction: column; gap: 3px; }
.cg-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; color: #fff; }
.cg-row:hover { background: rgba(255, 255, 255, 0.07); }
.cg-row .ellipsis { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-row small { font-size: 10px; color: #a9c6de; }
.cg-row .r { display: flex; flex-direction: column; align-items: flex-end; }
.cg-row .up { color: #7de3b0; } .cg-row .down { color: #ffa3a3; }
.cg-note { margin: 0; font-size: 10px; color: #cfe3f3; line-height: 1.4; }
.cg-note svg { width: 11px; height: 11px; vertical-align: -2px; color: #f0d49a; }

/* ---------------------------------------------------------------- settings */
.settings-page { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.set-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.set-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: inherit; border: 1px solid transparent; }
.set-item small { display: block; font-size: 10.5px; color: var(--text-muted); }
.set-item:hover { background: var(--surface-hover); }
.set-item.selected { background: var(--grad-navy); color: #fff; }
.set-item.selected small { color: #a9c6de; }
.set-body { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; min-width: 0; }
.set-body > .panel { flex: 1; }
.p-set-add { flex: 0 0 auto !important; padding: 10px 12px; }
.cat-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-add input[name=name] { flex: 1; min-width: 240px; }
.cat-add input[name=description] { width: 240px; }
.set-cats { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.set-cats .panel-body { display: flex; flex-direction: column; }
.cat-list { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.cat-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.8); }
.cat-row small { display: block; font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row .grow { flex: 1; }
.cat-row .r { display: flex; flex-direction: column; align-items: flex-end; }
.cat-actions { display: flex; gap: 2px; opacity: 0.35; transition: opacity 0.12s; }
.cat-row:hover .cat-actions { opacity: 1; }
.prefs { display: flex; flex-direction: column; }
.pref-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--hairline); }
.pref-row small { display: block; font-size: var(--font-size-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- accounts: lower, planning-focused overview */
.acct-overview { grid-template-columns: minmax(210px, 1.6fr) repeat(9, minmax(0, 1fr)); gap: 6px; }
.ov-chip { padding: 5px 9px; border-radius: 8px; border-left: 3px solid var(--ocean-300); }
.ov-chip.good { border-left-color: var(--status-good); }
.ov-chip.warn { border-left-color: var(--status-warning); }
.ov-chip.note { border-left-color: var(--brand-gold); }
.ov-line { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.ov-chip b { font-size: 14px; }
.ov-chip .ov-line small { flex: 1; min-width: 0; }
.ov-net { border-left: 0; }
.ov-net b { font-size: 17px; }
.ov-net .mix-bar { margin-top: 3px; height: 4px; }
@media (max-width: 1500px) {
    .acct-overview { grid-template-columns: minmax(190px, 1.5fr) repeat(7, minmax(0, 1fr)); }
    .acct-overview .ov-chip:nth-child(n+9) { display: none; }
}
.list-tools { gap: 6px; padding: 6px 10px 8px; }
.class-filter { display: flex; gap: 3px; flex-wrap: wrap; }
.cf-chip { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--hairline-strong); background: #fff; font: inherit; font-size: 10.5px; font-weight: 650; color: var(--text-secondary); cursor: pointer; }
.cf-chip i { font-style: normal; font-size: 9px; color: var(--text-muted); }
.cf-chip.active { background: var(--grad-navy); color: #fff; border-color: transparent; }
.cf-chip.active i { color: #f0d49a; }
.class-head { display: flex; justify-content: space-between; align-items: center; margin: 10px 2px 2px; padding: 4px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--grad-navy); }
.class-head b { color: #f0d49a; font-variant-numeric: tabular-nums; }
.class-head:first-child { margin-top: 2px; }
.account-list .acct-item { padding: 8px 10px; margin: 0 0 6px; gap: 9px; min-height: 52px; border-radius: 5px; }
.account-list .acct-item .acct-main { gap: 4px; }
.account-list .acct-name { font-size: 13px; }

/* selected account: one brand palette, a family accent on the left */
.acct-banner { background: var(--grad-navy) !important; }
.acct-banner::before { background: linear-gradient(100deg, transparent 0%, rgba(240, 212, 154, 0.05) 100%); left: 0; width: 5px; inset: 0 auto 0 0; }
.acct-banner.tone-ocean::before { background: #33aee8; } .acct-banner.tone-violet::before { background: #8a7ff0; }
.acct-banner.tone-aqua::before { background: #2fd0bf; } .acct-banner.tone-gold::before { background: #f0d49a; }
.acct-banner.tone-teal::before { background: #3fb5c4; } .acct-banner.tone-coral::before { background: #f08a6a; }
.acct-banner.tone-red::before { background: #e05a5a; } .acct-banner.tone-green::before { background: #2fae63; } .acct-banner.tone-slate::before { background: #9fb3c8; }
.acct-banner .hero-icon { color: #f0d49a; }
.ab-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; gap: 4px; }
.p-account-head .metric-strip { gap: 0; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; background: #fff; }
.p-account-head .metric { border: 0; border-radius: 0; border-left: 1px solid var(--hairline); background: transparent; }
.p-account-head .metric:first-child { border-left: 0; }
.p-account-head .metric-icon { background: var(--grad-navy); color: #f0d49a; }
.dr-amt { color: #0b7a3b; font-weight: 650; }
.cr-amt { color: #c2363a; font-weight: 650; }
.ed-pill.cr small { background: #fde6e6; color: #c2363a; }
.ed-pill.dr .mono { color: #0b7a3b; }
.ed-pill.cr .mono { color: #c2363a; }
small.block { display: block; font-size: 10px; }
.people-summary { display: grid; grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr)) 1.4fr; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--hairline); background: var(--grad-brand-soft); }
.people-summary > div { display: flex; flex-direction: column; min-width: 0; padding: 4px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--hairline); }
.people-summary span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.people-summary b { font-size: 14px; font-variant-numeric: tabular-nums; }
.people-summary small { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-summary .ps-main { background: var(--grad-navy); border-color: transparent; }
.people-summary .ps-main span, .people-summary .ps-main small { color: #a9c6de; }
.people-summary .ps-main b { color: #7de3b0; font-size: 16px; }
.people-summary.owe .ps-main b { color: #ffa3a3; }
.age-bar { display: flex; height: 6px; margin: 4px 0 2px; border-radius: 3px; overflow: hidden; background: rgba(10, 79, 128, 0.08); }
.age-bar em { display: block; height: 100%; }
.age-0 { background: #6fd3a0; } .age-1 { background: #f6c445; } .age-2 { background: #f08a6a; } .age-3 { background: #d03b3b; }
.period-chips { display: inline-flex; align-items: center; gap: 6px; }
.period-chips .seg-chip svg { width: 12px; height: 12px; }
.pc-label { font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
.pc-custom { display: inline-flex; align-items: center; gap: 3px; }
.pc-custom input { height: 24px; width: 122px; font-size: var(--font-size-sm); }
.xp-modes.two { grid-template-columns: 1fr 1fr; }

/* ---------------------------------------------------------------- expenses donut */
.xp-donut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; height: 100%; align-items: center; }
.xp-donut .chart { height: 100%; min-height: 120px; }
.xp-donut-legend { display: flex; flex-direction: column; gap: 2px; max-height: 100%; }
.xp-donut-legend .legend-row { border: 0; background: none; font: inherit; font-size: var(--font-size-xs); padding: 3px 5px; border-radius: 6px; cursor: pointer; text-align: left; color: var(--text-secondary); }
.xp-donut-legend .legend-row small { margin-left: auto; color: var(--text-muted); }
.xp-donut-legend .legend-row b { margin-left: 6px; }
.xp-donut-legend .legend-row:hover, .xp-donut-legend .legend-row.active { background: var(--surface-selected); }

/* ---------------------------------------------------------------- chits: both return rates on each row */
.cr-rates { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 10px; }
.cr-rates .rate { padding: 0 5px; border-radius: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-rates .rate.c { background: #e3f6f1; color: #0b6f66; }
.cr-rates .rate.s { background: #eeecfd; color: #4a3aa7; }
.cr-rates .earned { color: var(--positive); font-weight: 650; }
.chit-row.selected .cr-rates .rate.c { background: rgba(47, 208, 191, 0.2); color: #7de3d6; }
.chit-row.selected .cr-rates .rate.s { background: rgba(169, 156, 245, 0.2); color: #c9c1ff; }
.chit-row.selected .cr-rates .earned { color: #7de3b0; }

/* ---------------------------------------------------------------- forecast: chits to maturity */
.p-fc-chits .panel-body { display: flex; flex-direction: column; }
.fc-chit-total { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px 8px; background: var(--grad-navy); color: #fff; }
.fc-chit-total span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: #a9c6de; font-weight: 700; }
.fc-chit-total b { font-size: 13px; font-variant-numeric: tabular-nums; }
.fc-chit-total .gold-ink { color: #f6dc9c; }
.fc-chits { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }
.fc-chit { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.8); }
.fc-chit-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.fc-chit-figs span { display: flex; flex-direction: column; min-width: 0; }
.fc-chit-figs small { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- balance sheet header */
.bs-header { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 8px; padding: 8px; background: var(--grad-navy); border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: relative; }
.bs-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 154, 59, 0.8) 30%, rgba(240, 212, 154, 0.9) 50%, rgba(201, 154, 59, 0.8) 70%, transparent); }
.bh-card { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; min-width: 0; }
.bh-card.net { background: rgba(240, 212, 154, 0.08); border-color: rgba(240, 212, 154, 0.3); }
.bh-top { display: flex; align-items: center; gap: 6px; }
.bh-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fc3df; }
.bh-label svg { width: 12px; height: 12px; color: #f0d49a; }
.bh-change { margin-left: auto; font-size: var(--font-size-xs); font-weight: 650; }
.bh-change.up { color: #7de3b0; } .bh-change.down { color: #ffa3a3; } .bh-change.muted { color: #8fb0c9; }
.bh-value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-card.net .bh-value { color: #f0d49a; }
.bh-mix, .bh-card .ef-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.1); flex: none; }
.bh-mix span { display: block; height: 100%; }
.bh-chips { display: flex; flex-wrap: wrap; gap: 2px 9px; font-size: 10px; color: #cfe3f3; }
.bh-chips span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bh-chips i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.suggest-card .insight { font-size: var(--font-size-xs); color: inherit; }

/* interest posted month by month (claim panel) */
.posting-card { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; background: var(--surface-solid); display: grid; gap: 4px; }
.posting-card.on { border-left: 3px solid var(--status-good); }
.posting-card .row { gap: 6px; align-items: center; }
.posting-card svg { width: 14px; height: 14px; }
.posting-figs .warn { color: #a06d00; }
.repay-form .ev-field { margin-top: 8px; }

/* expense rows: description with the merchant / person beside it, grayed and right-aligned */
.xp-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.xp-line > b { min-width: 0; }
.xp-party { margin-left: auto; padding-left: 10px; color: var(--text-muted); font-size: var(--font-size-sm); font-weight: 500; flex-shrink: 1; max-width: 45%; text-align: right; }
.xp-detail .xp-evidence { grid-column: 1 / -1; }

/* compact lifecycle */
.claim-timeline .timeline { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.timeline .tl-group { cursor: pointer; }
.timeline .tl-sub { list-style: none; margin: 4px 0 2px; padding: 4px 8px; border-radius: 6px; background: var(--surface-sunken); display: grid; gap: 2px; }
.timeline .tl-sub li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; font-size: var(--font-size-xs); }
.timeline .tl-sub li::before { display: none; }
.timeline .tl-more { cursor: pointer; }
.timeline .tl-more .tl-dot { border-style: dotted; color: var(--text-muted); }
.posting-account { color: var(--text-secondary); }
.post-summary { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface-sunken); display: grid; gap: 3px; }
.btn.xs { padding: 1px 7px; font-size: 10.5px; min-height: 20px; gap: 3px; }
.btn.xs svg { width: 11px; height: 11px; }

/* ===================================================================== budgets: month hero, cards, watch list */
.warn-text { color: #a06d00; font-weight: 650; }
.budget-hero { display: grid; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--hairline);
    background: linear-gradient(135deg, #0b3d63, #0b6aa6); color: #fff; }
.budget-hero.over { background: linear-gradient(135deg, #5a1d1d, #a33a2a); }
.budget-hero .label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #bcd9ee; }
.bh-top { display: flex; align-items: baseline; gap: 6px; }
.bh-top b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bh-top .muted { color: #bcd9ee; font-size: 12px; }
.bh-pct { font-weight: 750; font-size: 13px; }
.bh-track { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
.bh-track .spent { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #5fe0b1, #f0d49a); }
.bh-track .proj { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.45) 0 4px, rgba(255,255,255,0.15) 4px 8px); }
.bh-track .pace-tick { background: #fff; opacity: 0.9; }
.bh-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.bh-figs span { flex-direction: row !important; justify-content: space-between; align-items: baseline; gap: 6px; }
.bh-figs span { display: flex; flex-direction: column; min-width: 0; }
.bh-figs small { font-size: 9px; color: #bcd9ee; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650; white-space: nowrap; }
.bh-figs b { font-size: 13px; font-variant-numeric: tabular-nums; color: #fff; }
.bh-figs b.neg { color: #ffb4a8; } .bh-figs b.pos { color: #9ff0cf; } .bh-figs b.warn-text { color: #ffe08a; }

.budget-cards .group-label { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 2px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.budget-cards .group-label span { display: inline-flex; align-items: center; gap: 4px; }
.budget-cards .group-label svg { width: 12px; height: 12px; }
.budget-card { border-left-width: 3px; transition: transform 0.08s, box-shadow 0.15s; }
.budget-card:hover { transform: translateX(1px); }
.budget-card.pace-over, .budget-card.pay-over { border-left-color: var(--status-critical); }
.budget-card.pace-warning, .budget-card.pay-warning { border-left-color: var(--status-warning); }
.budget-card.pace-ahead, .budget-card.pay-ahead { border-left-color: #2d8fd5; }
.budget-card.pace-good, .budget-card.pay-good { border-left-color: var(--status-good); }
.budget-card.committed { background: linear-gradient(90deg, #fffdf7, #fff); }
.bc-insight { font-size: 10.5px; color: var(--text-secondary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pace-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap;
    background: #eef3f7; color: var(--text-secondary); }
.pace-chip svg { width: 10px; height: 10px; }
.pace-chip.over { background: #fde4e1; color: #a32626; }
.pace-chip.warning { background: #fff2cf; color: #8a5b00; }
.pace-chip.ahead { background: #e2f0fb; color: #0b5c94; }
.pace-chip.good { background: #e1f5e6; color: #0a6b2a; }
.bc-track.ahead > span { background: linear-gradient(90deg, #6cb7ea, #2d8fd5); }
.bc-track.good > span { background: linear-gradient(90deg, #3cc06b, var(--status-good)); }
.bc-track.gray > span { background: #b9c6d3; }
.bc-track .bc-proj { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0;
    background: repeating-linear-gradient(45deg, rgba(10,79,128,0.28) 0 3px, rgba(10,79,128,0.08) 3px 6px); }
.due-date { display: inline-flex; align-items: center; gap: 3px; color: var(--text-secondary); }
.due-date svg { width: 11px; height: 11px; }
.strip-insight { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.strip-insight svg { width: 12px; height: 12px; color: #c98500; }
.budget-strip.pace-over { background: linear-gradient(90deg, #fff4f2, transparent); }
.budget-strip.pace-warning { background: linear-gradient(90deg, #fff9e8, transparent); }

.watch-list { display: grid; gap: 6px; }
.watch-item { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 9px; background: var(--surface-solid);
    border: 1px solid var(--hairline); border-left: 3px solid var(--info); font-size: var(--font-size-sm); line-height: 1.35; }
.watch-item > svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.watch-item b { display: block; }
.watch-item p { margin: 1px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); }
.watch-item .hint-line { display: flex; gap: 4px; color: var(--ocean-800); font-weight: 550; margin-top: 3px; }
.watch-item .hint-line svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; color: #c98500; }
.watch-item.critical { border-left-color: var(--status-critical); background: #fff7f6; } .watch-item.critical > svg { color: var(--status-critical); }
.watch-item.warning { border-left-color: var(--status-warning); background: #fffbef; } .watch-item.warning > svg { color: #c98500; }
.watch-item.good { border-left-color: var(--status-good); } .watch-item.good > svg { color: var(--status-good); }
.watch-item.info > svg { color: var(--info); }
.watch-item.clickable { cursor: pointer; }
.watch-item.clickable:hover { box-shadow: var(--shadow-sm); }

.budget-empty { grid-column: 1 / -1; align-self: center; justify-self: center; max-width: 520px; text-align: center; display: grid; gap: 10px; justify-items: center;
    padding: 32px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); }
.budget-empty h3 { margin: 0; }
.budget-empty p { margin: 0; color: var(--text-secondary); }
.chip-icon.lg { width: 48px; height: 48px; border-radius: 14px; }
.chip-icon.lg svg { width: 24px; height: 24px; }
.btn.lg { padding: 9px 18px; font-size: 14px; }
.budget-form .only-committed { display: none; }
.budget-form.is-committed .only-committed { display: flex; }
.budget-form.is-committed .only-spend { display: none; }
.budget-form .kind-hint { margin: 0; }

/* refunded and reversed expenses */
.xp-tr.xp-reversed td { background: repeating-linear-gradient(135deg, rgba(120,140,160,0.06) 0 8px, transparent 8px 16px); }
.xp-tr.xp-reversed .xp-line > b { text-decoration: line-through; text-decoration-color: rgba(80,90,100,0.55); color: var(--text-muted); }
.xp-tr.xp-reversed .chip-icon { filter: grayscale(1); opacity: 0.6; }
.xp-tr.xp-refunded .xp-line > b { color: var(--text-secondary); }
.xp-status { font-size: 9.5px; padding: 0 6px; gap: 3px; }
.xp-status svg { width: 10px; height: 10px; }
.c-amt s { margin-right: 2px; }
.xp-refunds { grid-column: 1 / -1; display: grid; gap: 4px; padding: 6px 8px; border-radius: var(--radius-sm); background: rgba(19, 168, 154, 0.06); border: 1px solid rgba(19, 168, 154, 0.2); }
.xp-refunds .section-title { margin: 0; display: flex; align-items: center; gap: 5px; }
.xp-refund { display: flex; align-items: flex-start; gap: 8px; }
.xp-refund .grow { display: flex; flex-direction: column; }
.xp-refund.is-reversal b { color: var(--text-secondary); }

.check-line .post-amount { margin-left: auto; font-size: var(--font-size-xs); color: var(--ocean-800); font-variant-numeric: tabular-nums; }
.check-line .post-amount:empty { display: none; }

/* read-only lent / borrowed context (journal, account statements) */
.claim-context { margin: 6px 0 2px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(227, 242, 251, 0.45), rgba(255, 255, 255, 0.6)); display: grid; gap: 6px; }
.cc-head { display: flex; align-items: center; gap: 8px; }
.cc-head .row { gap: 6px; }
.cc-role { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: var(--surface-solid); border-left: 3px solid var(--ocean-600); }
.cc-role > .small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.cc-row { display: flex; gap: 8px; align-items: flex-start; }
.cc-row > svg { width: 14px; height: 14px; margin-top: 2px; color: var(--ocean-600); flex-shrink: 0; }
.cc-figs { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cc-fig { display: flex; flex-direction: column; }
.cc-fig small { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650; }
.cc-fig b { font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* compact lent / borrowed entry (journal, statements) */
.entry-detail.claim-entry { display: grid; gap: 4px; padding: 6px 10px 6px 14px; }
.ce-main { display: flex; align-items: center; gap: 8px; }
.ce-main .row { gap: 6px; align-items: baseline; flex-wrap: nowrap; min-width: 0; }
.ce-main .row .ellipsis { min-width: 0; }
.ce-more { display: grid; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--surface-sunken); }
.btn.active svg { transform: rotate(180deg); }
.claim-entry .ev-strip { padding: 0; }
/* read-only details overlay */
.claim-details-modal .claim-panel { border: 0; padding: 0; background: none; box-shadow: none; }
.timeline li.tl-current > .tl-body, .timeline .tl-sub li.current { background: #fff6dc; border-radius: 6px; box-shadow: 0 0 0 2px #f2c94c inset; }
.timeline .tl-sub li.current { padding: 1px 4px; }
.timeline li.tl-current > .tl-dot { box-shadow: 0 0 0 3px #f2c94c; }
tr.sched-current td { background: #fff6dc !important; }
tr.sched-current td:first-child { box-shadow: inset 3px 0 0 #f2c94c; }

/* ===================================================================== lent / borrowed: expanded in a list row
   The panel scrolls on its own (never the whole list); its head with the actions stays in view. The list sets
   --claim-max to the room left under the row, so the row and its panel fit the list exactly. */
.claim-panel.in-row {
    max-height: var(--claim-max, min(72vh, 680px));
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 64px;
    padding-top: 0;
}
.claim-panel.in-row > .claim-head {
    position: sticky; top: 0; z-index: 3;
    margin: 0 -10px; padding: 8px 10px 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 80%, rgba(255, 255, 255, 0.9));
    border-bottom: 1px solid var(--hairline);
    border-radius: 8px 8px 0 0;
}
.claim-panel.in-row .claim-timeline .timeline { max-height: none; overflow: visible; }   /* one scroll only: the panel's */
.claim-head { flex-wrap: wrap; row-gap: 6px; }
.claim-quick { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.claim-quick .btn.icon { width: 28px; padding: 0; justify-content: center; }
.claim-quick .btn.danger:not(:hover) { color: var(--status-critical); }
.tag.aqua { background: #e3f7f4; color: #0b7a6e; }
.tag.aqua svg { width: 11px; height: 11px; vertical-align: -1px; }

/* interest plan: monthly / yearly / whenever paid, and automatic booking */
.plan-row { flex-wrap: wrap; row-gap: 4px; }
.seg-chips.xs .seg-chip { height: 20px; padding: 0 7px; font-size: 10.5px; }
.plan-auto { font-size: var(--font-size-xs); }
.plan-auto span { flex-shrink: 0; }

/* interest table on demand */
.claim-schedule.closed { padding: 2px 0; }
.sched-head { gap: 6px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.sched-toggle { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: var(--font-size-sm); }
.sched-toggle svg { width: 13px; height: 13px; }
.sched-note { margin: 0 0 4px; }
.sched-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-solid, #fff); }

/* statement links */
.cs-dialog { display: grid; gap: 10px; }
.cs-list { display: grid; gap: 4px; }
.cs-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface-sunken); }
.cs-row .grow { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.cs-row.expired, .cs-row.revoked { opacity: 0.7; }
.cs-made { padding: 10px; border-radius: 10px; border: 1px solid rgba(19, 168, 154, 0.35); background: #f1fbf9; }

/* open items whatever the period (Lent / Paid for / To collect / You owe) */
.xp-open-note { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--font-size-xs); color: var(--text-secondary);
    background: rgba(138, 127, 240, 0.08); border-bottom: 1px dashed var(--hairline); }
.xp-open-note svg { width: 12px; height: 12px; color: #5b4fc9; }
.xp-old-date { display: block; font-size: 10px; color: var(--text-muted); font-weight: 500; }

/* accounts: people pane filter */
.people-filter { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px dashed var(--hairline); }

/* approvals: history, corrections, settings */
.ap-history { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; }
.ap-history span { display: inline-flex; align-items: center; gap: 3px; }
.ap-history svg { width: 11px; height: 11px; }
.ap-history .rej { color: #b42828; } .ap-history .res { color: #8a5d00; }
.ap-settings { display: grid; gap: 12px; }
.ap-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-mode .mode-tile { text-align: left; }
.ap-users { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.ap-user { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); }
.ap-user .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ap-user select { width: 170px; }
.my-subs { display: grid; gap: 6px; }
.my-sub { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface-solid); }
.my-sub.rejected { border-color: #f1b8b8; background: #fff6f6; }
.my-sub .grow { flex: 1; min-width: 0; }
.xp-subs-bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: var(--font-size-sm); background: #fff8e6; border-bottom: 1px solid #f3d48a; }
.xp-subs-bar.has-rejected { background: #fff1f1; border-color: #f1b8b8; }
.xp-subs-bar svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .ap-mode { grid-template-columns: minmax(0, 1fr); } .claim-quick { margin-left: 0; } }

/* narratives: "[...]" segments as tags; money that came through your own bank or cash account stands out */
.nv-seg { display: inline-block; margin: 0 3px 1px 0; padding: 0 6px; border-radius: 5px; font-size: 0.92em; font-weight: 600; line-height: 1.55;
    background: #eef4f9; color: var(--ocean-800, #0b4f78); border: 1px solid #d6e4ef; white-space: nowrap; }
.nv-seg.own { background: #fff3dc; color: #8a5300; border-color: #f0cf8e; }
.nv-sep { display: inline-block; width: 1px; height: 0.95em; margin: 0 6px; vertical-align: -1px; background: var(--hairline-strong, #c9d6e2); }
.ed-fact.memo { line-height: 1.6; }

/* UPI app marks */
.upi-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.upi-logo svg { height: 22px; width: auto; display: block; }
.upi-logos { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upi-logos .upi-logo svg { height: 18px; }
.upi-brands { display: flex; justify-content: center; margin: 2px 0 6px; }
.tag.gold { background: #fbf0d6; color: #7a5600; }
.tag.good { background: #e3f6ec; color: #126b3d; }
.tag.gold svg, .tag.good svg { width: 11px; height: 11px; vertical-align: -1px; }
/* the loan agreement dialog (components/loan-agreement.js) */
.la-form .section-title { margin: 4px 0 -2px; }
.la-req { display: flex; flex-direction: column; gap: 4px; }
.la-panel { display: flex; flex-direction: column; gap: 10px; }
.la-linkcard { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.la-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.la-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.la-steps li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--ocean-600); }
.la-make { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }

/* where a hosted chit's money stands, against entries and payments (js/core/chit-trail.js): a compact pill sized to
   its words (never cut short), left-aligned in its column so a list of them still lines up; the tinted dot on the left
   is the kind of chit entry, the colour is where the money stands */
.ct-st { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 19px; padding: 0 7px 0 2px; max-width: none;
    border-radius: 999px; font-size: 10.5px; font-weight: 650; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle;
    border: 1px solid transparent; background: var(--ct-bg, #f0f3f6); color: var(--ct-fg, #51657a); border-color: var(--ct-line, #d6dee6); }
.ct-st.none { display: inline-block; width: 0; padding: 0; border: 0; background: none; }
.ct-st .ct-kind { display: grid; place-items: center; width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%; font-style: normal; background: var(--ct-fg, #51657a); color: #fff; }
.ct-st .ct-kind svg { width: 9px; height: 9px; }
.ct-st .ct-st-label { white-space: nowrap; }
.ct-st .ct-paid { display: grid; place-items: center; margin-left: 1px; font-style: normal; color: #b07d00; }
.ct-st .ct-paid svg { width: 11px; height: 11px; }
/* one colour per state */
.ct-st.warn   { --ct-bg: #fff4dc; --ct-fg: #9a5b00; --ct-line: #f1d08c; }   /* to move: waiting on you */
.ct-st.blue   { --ct-bg: #e9f1fe; --ct-fg: #2457b3; --ct-line: #c3d6f6; }   /* moved into collections */
.ct-st.teal   { --ct-bg: #e4f6f3; --ct-fg: #0b7064; --ct-line: #b6e2da; }   /* paid straight into collections */
.ct-st.indigo { --ct-bg: #eeedfc; --ct-fg: #4a3fb0; --ct-line: #d0cbf3; }   /* the gather transfer */
.ct-st.violet { --ct-bg: #f6ebfb; --ct-fg: #7b2f9a; --ct-line: #e3c7ef; }   /* paid to the winner directly */
.ct-st.gold   { --ct-bg: #fff6d6; --ct-fg: #8a6100; --ct-line: #ecd27a; }   /* the payout itself */
.ct-st.good   { --ct-bg: #e5f6ec; --ct-fg: #13703f; --ct-line: #a9dcbd; }   /* commission done */
.ct-st.muted  { --ct-bg: #f0f3f6; --ct-fg: #51657a; --ct-line: #d6dee6; }   /* a plain transfer */
/* paid out: the same status and words, turned green, with a crown */
.ct-st.paid { --ct-bg: #dff4e7; --ct-fg: #0f6b3a; --ct-line: #86cfa3; }
td.c-ctst, th.c-ctst { width: 112px; white-space: nowrap; }
.ct-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.ct-badge svg { width: 12px; height: 12px; }
.ct-badge.good { background: #e6f6ec; color: #11633a; }
.ct-badge.warn { background: #fff6e5; color: #8a5a00; }
.ct-badge.muted { background: #f1f4f7; color: #52657a; }
@media (max-width: 700px) {
    /* phones: the kind and a short label still fit */
    .ct-st { font-size: 10px; height: 18px; padding-right: 6px; }
    td.c-ctst, th.c-ctst { width: 100px; }
}
.ct-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 6px 10px; border-radius: 10px; background: #f7f9fc; border: 1px solid var(--hairline); font-size: 12px; }
.ct-chit { display: inline-flex; align-items: center; gap: 5px; color: var(--ocean-800, #0a4a73); }
.ct-chit span { color: var(--text-secondary); }
.ct-chit svg { width: 13px; height: 13px; }
.ct-facts { color: var(--text-secondary); }

/* ---------------------------------------------------------------- bought on EMI: the dialog's fourth mode, the preview and a plan opened in place */
.expense-form .xp-modes { grid-template-columns: repeat(4, 1fr); }
.expense-form .emi-only, .expense-form .emi-loan-only { display: none; }
.expense-form.mode-EMI .xp-claim-info { display: none; }
.expense-form.mode-EMI.emi-loan .emi-loan-only { display: flex; }
/* on EMI the dialog widens to three columns: the purchase · its category and card · the terms with the whole schedule */
.modal.expense-modal.emi-wide { width: min(1340px, 97vw); }
.expense-form.mode-EMI .xp-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.95fr) minmax(0, 1.3fr); }
.expense-form.mode-EMI .xp-emi-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.expense-form.mode-EMI .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.expense-form.mode-EMI .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.expense-form.mode-EMI .xp-notes textarea { min-height: 38px; }
.xp-emi { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--grad-brand-soft); border: 1px solid rgba(11, 124, 189, 0.18); }
.xp-emi .form-grid { gap: 6px 8px; }
.xp-emi .emi-auto { align-self: end; padding-bottom: 6px; font-size: var(--font-size-sm); }
.xp-emi-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.xp-emi-kinds .date-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; }
.xp-emi-kinds .date-chip svg { width: 13px; height: 13px; }
.expense-form [data-emi-locked] input:disabled, .expense-form input:disabled { opacity: 0.65; }
.emi-prev { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--hairline); min-height: 0; }
.emi-prev.empty { flex-direction: row; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--font-size-sm); padding: 18px 12px; justify-content: center; border-style: dashed; }
.emi-prev.empty svg { width: 16px; height: 16px; }
.emi-prev-hero { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 10px; background: var(--grad-navy); color: #fff; }
.emi-prev-hero > div { display: flex; flex-direction: column; line-height: 1.1; }
.emi-prev-hero small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.emi-prev-hero b { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.emi-prev-hero span { font-size: var(--font-size-sm); opacity: 0.85; }
.emi-prev-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px; }
.emi-prev-figs span { display: flex; flex-direction: column; padding: 3px 8px; border-radius: 8px; background: var(--surface-sunken); }
.emi-prev-figs small { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; }
.emi-prev-figs b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.emi-prev-figs .total { background: #fbf3dd; }
.emi-prev-how { display: flex; gap: 6px; font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; }
.emi-prev-how svg { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--ocean-600); }
.emi-table { max-height: 238px; overflow: auto; border: 1px solid var(--hairline); border-radius: 9px; }
.emi-table table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.emi-table th { position: sticky; top: 0; background: #eef4f9; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; text-align: left; padding: 4px 6px; z-index: 1; }
.emi-table tfoot th { position: sticky; bottom: 0; top: auto; background: #eef4f9; color: var(--ocean-900); font-size: 11px; text-transform: none; letter-spacing: 0; }
.emi-table td { padding: 3px 6px; border-top: 1px solid var(--hairline); white-space: nowrap; }
.emi-table .r { text-align: right; }
.emi-panel { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 6px; }
.emi-closed-note { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--surface-sunken); font-size: var(--font-size-sm); color: var(--text-secondary); }
.emi-closed-note svg { width: 13px; height: 13px; }
.emi-closed-note span { flex: 1; }
.emi-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emi-sched { max-height: 260px; overflow: auto; border: 1px solid var(--hairline); border-radius: 10px; }
.emi-sched table { margin: 0; }
.emi-sched tr.emi-paid td { color: var(--text-secondary); }
.emi-sched tr.emi-waived td { color: var(--text-muted); text-decoration: line-through; }
.emi-sched tr.emi-late td { background: #fff5f2; }
.emi-sched tr.emi-next td { background: #eef7fd; font-weight: 600; }
.emi-sched .badge svg { width: 10px; height: 10px; margin-right: 2px; vertical-align: -1px; }
.emi-fc-total { font-size: 18px; font-variant-numeric: tabular-nums; }
.xp-emis .xd-bar, .emi-side .xd-bar { display: block; height: 4px; border-radius: 99px; background: #e6edf3; overflow: hidden; margin-top: 3px; }
.xp-emis .xd-bar em, .emi-side .xd-bar em { display: block; height: 100%; background: linear-gradient(90deg, #5fcf8a, #1f9a5a); }
.xp-emis tr.emi-archived td { opacity: 0.6; }
.emi-side { display: flex; flex-direction: column; gap: 8px; }
.emi-side .xs-grid { grid-template-columns: 1fr 1fr; }
.emi-side-list { display: flex; flex-direction: column; gap: 2px; }
.emi-side-list .owed-row .grow { display: flex; flex-direction: column; }
.xp-emis .c-prog { width: 150px; }
.xp-emis .xd-prog { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--text-secondary); }
.xp-open-note .switch { margin-left: auto; }
.mini-flag.emi { display: inline-flex; align-items: center; width: auto; height: 17px; padding: 0 5px; font-size: 9.5px; font-weight: 700; gap: 3px; line-height: 1; white-space: nowrap; }
.mini-flag.emi svg { width: 10px; height: 10px; flex: none; }
/* the EMIs list: the name on top, the lender and shop under it */
.xd-cell.xd-stack { flex-direction: column; align-items: stretch; gap: 1px; }
.xd-cell.xd-stack .xd-party { max-width: 100%; margin-left: 0; text-align: left; font-size: 11px; }
.xd-cell.xd-stack .xd-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) {
    .expense-form.mode-EMI .xp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .expense-form.mode-EMI .xp-emi-col { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .expense-form .xp-modes { grid-template-columns: repeat(2, 1fr); }
    .expense-form.mode-EMI .xp-grid { grid-template-columns: minmax(0, 1fr); }
    .emi-cards { grid-template-columns: minmax(0, 1fr); }
    .xp-emi .form-grid.three { grid-template-columns: 1fr 1fr; }
}
.emi-panel .xd-top { flex-wrap: wrap; row-gap: 6px; }
.emi-panel .xd-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.emi-panel .xd-actions .switch { white-space: nowrap; }

/* ---------------------------------------------------------------- money lent: the interest card */
.expense-form.mode-LENT .xp-interest {
    flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 12px;
    background: var(--grad-brand-soft); border: 1px solid rgba(11, 124, 189, 0.18);
}
.xp-interest .xi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.xp-interest .xi-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.xp-interest .xi-label svg { width: 13px; height: 13px; color: var(--ocean-500); }
.xp-interest .xi-seg { background: rgba(255, 255, 255, 0.8); }
.xp-interest .xi-seg .seg-chip { height: 28px; padding: 0 12px; }
.modal .xp-interest .check-line { min-height: 38px; background: rgba(255, 255, 255, 0.75); cursor: pointer; }
.modal .xp-interest .check-line span { flex: 1; min-width: 0; }
.xp-interest .check-line .post-amount {
    padding: 2px 8px; border-radius: 999px; background: rgba(11, 124, 189, 0.1); white-space: nowrap;
}
.xp-interest.on-payment .xi-auto { display: none; }   /* nothing falls due on a schedule to book */
@media (max-width: 640px) {
    .xp-interest .xi-row { flex-direction: column; align-items: stretch; gap: 5px; }
    .xp-interest .xi-seg { display: flex; }
    .xp-interest .xi-seg .seg-chip { flex: 1; justify-content: center; }
}