*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #f5f1ea;
    --bg-secondary: #ebe6dc;
    --card-bg: #fdfbf6;
    --border: rgba(0,0,0,0.06);
    --text: #2a2825;
    --text-muted: #656259;
    --text-secondary: #656259;
    --danger: #b54a3e;
    --primary: #b85c2a;
    --primary-light: rgba(184,92,42,0.10);
    --green: #3a7a4a;
    --red: #b54a3e;
    --orange-bg: #fdf3e3;
    --green-bg: rgba(58,122,74,0.10);
    --red-bg: rgba(181,74,62,0.10);
    --header-bg: rgba(253,251,246,0.94);
    --shadow-sm: 0 1px 0 rgba(0,0,0,0.02), 0 2px 6px -2px rgba(80,70,50,0.08);
    --shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 18px -8px rgba(80,70,50,0.12);
    --shadow-md: 0 4px 24px -6px rgba(80,70,50,0.16);
    --radius: 10px;
    --radius-lg: 14px;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, var(--fp-hover, #f5f1ea) 0%, var(--fp-canvas, #ebe6dc) 100%) fixed;
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Header */
header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}
header h1 { font-size: 1.4rem; }
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.last-updated {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.header-divider {
    color: var(--border);
    font-size: 0.9rem;
}
.user-display {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Buttons */
.btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--card-bg);
    color: var(--text);
    transition: all 0.15s ease;
}
.btn:hover { background: var(--bg-secondary); border-color: #cbd5e1; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: #9e4e24; border-color: #9e4e24; }
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.72rem; border-radius: 6px; }
.btn-danger { background: var(--fp-surface, #fff); color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--fp-surface, #fff); }

/* legacy .alerts-panel / .alerts-header / .alert-item removed
   — Alerts now rendered as a full-page tab via .alerts-page in soft.css */

/* Tabs */
.tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.6rem 2rem;
    background: rgba(253,251,246,0.7);
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.tab {
    padding: 0.45rem 1.1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    border-radius: 999px;
}
.tab:hover { color: var(--text); background: rgba(0,0,0,0.05); }
.tab.active {
    color: var(--fp-surface, #fdfbf6);
    background: var(--fp-text, #2a2825);
    border-bottom-color: transparent;
}

.tab-content { display: none; padding: 1.25rem 2rem; }
.tab-content.active { display: block; }

/* Main/Sub tab hierarchy */
.main-tabs { border-bottom: 1px solid var(--border); }
.main-tabs .tab { font-size: 0.9rem; font-weight: 600; }
.subtabs { border-bottom: 1px solid var(--border); padding-top: 0.4rem; background: rgba(253,251,246,0.5); }
.subtabs .tab { font-size: 0.8rem; font-weight: 500; padding: 0.35rem 0.9rem; }

/* Controls */
.controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.search-box {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    width: 280px;
    max-width: 100%;
    background: var(--card-bg);
    transition: border-color 0.15s;
}
.search-box:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
/* legacy .add-inline / .filter-chips / .chip-region / .chip-extra / .chip-divider removed
   — watchlist now uses .wl-filter-row / .wl-pills / .pill in soft.css */
.chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Table */
.table-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
thead {
    position: sticky;
    top: 0;
    z-index: 10;
}
th {
    background: var(--bg-secondary);
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border);
}
th:hover { color: var(--text); }
th .sort-arrow { font-size: 0.65rem; margin-left: 0.2rem; }
td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bg-secondary);
    white-space: nowrap;
}
tr:hover td { background: var(--fp-hover, #f0ebe1); }

/* Frozen first column for watchlist tables */
#stocks-table th:first-child,
#sx5e-table th:first-child,
#etfs-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 12;
    background: var(--bg-secondary);
}
#stocks-table td:first-child,
#sx5e-table td:first-child,
#etfs-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg);
}
tr:hover #stocks-table td:first-child,
tr:hover #sx5e-table td:first-child,
tr:hover #etfs-table td:first-child,
#stocks-table tr:hover td:first-child,
#sx5e-table tr:hover td:first-child,
#etfs-table tr:hover td:first-child {
    background: var(--fp-hover, #f0ebe1);
}

/* Number alignment */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Color classes */
.positive { color: var(--green); font-weight: 500; }
.negative { color: var(--red); font-weight: 500; }

tr.highlight-orange td { background: var(--orange-bg) !important; }
tr.highlight-green td { background: var(--green-bg) !important; }
tr.etf-drop-alert td { background: var(--red-bg) !important; }

.delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: all 0.15s;
}
.delete-btn:hover { color: var(--red); background: var(--red-bg); }

/* Ticker autocomplete dropdown */
.ticker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.ticker-dropdown-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}
.ticker-dropdown-item:hover { background: var(--bg-secondary); }
.ticker-dropdown-item .td-ticker { font-weight: 600; }
.ticker-dropdown-item .td-name { color: var(--text-muted); margin-left: 0.5rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-dropdown-item .td-shares { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; margin-left: 0.5rem; }
.ticker-dropdown-item.td-add-custom { border-top: 1px solid var(--border, #2a2a2a); }
.ticker-dropdown-item.td-add-custom .td-ticker { color: var(--accent, var(--fp-positive, #3a7a4a)); font-weight: 700; }
.ticker-dropdown-item.td-add-custom .td-name { color: var(--accent, var(--fp-positive, #3a7a4a)); }
.holding-info {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 6px;
}

/* Progress bar */
.progress-bar {
    position: relative;
    height: 22px;
    background: var(--bg-secondary);
    border-radius: 11px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #d4885a);
    border-radius: 11px;
    transition: width 0.3s ease;
}
.progress-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 22px;
    color: var(--text);
}

/* Stock Detail Modal */
.detail-modal { max-width: 900px; width: 92%; }
.stock-link { cursor: pointer; color: inherit; text-decoration: none; }
.stock-link:hover { text-decoration: underline; color: var(--primary); }
.detail-chart-controls { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; align-items: center; }
.timeframe-btn {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    transition: all 0.15s;
}
.timeframe-btn:hover { background: var(--bg-secondary); color: var(--text); }
.timeframe-btn.active { background: var(--primary); color: var(--fp-surface, #fff); border-color: var(--primary); }
.detail-change { font-size: 1.05rem; font-weight: 600; margin-left: 0.75rem; }
.detail-stats { margin-top: 1rem; }

/* ── Position Detail Drawer — slide-in from right ───────────────────────── */
.pos-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.18);
    z-index: 9000;
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
}
.pos-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.pos-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 780px;
    max-width: 100vw;
    height: 100vh;
    background: var(--fp-surface, #fdfbf6);
    border-radius: 16px 0 0 16px;
    box-shadow: -8px 0 40px rgba(80,70,50,0.12), 0 1px 0 rgba(0,0,0,0.04);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-drawer.open { transform: translateX(0); }

.sd { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--fp-text, #2a2825); background: var(--fp-surface, #fdfbf6); height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.sd .num   { font-variant-numeric: tabular-nums; }
.sd .micro { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fp-muted, #656259); font-weight: 500; }
.sd .pos   { color: var(--fp-positive, #2d6a3a); }
.sd .neg   { color: var(--fp-negative, #a23a2e); }
.sd .acc   { color: var(--fp-accent, #b85c2a); }
.sd .muted { color: var(--fp-muted, #656259); }

/* Header */
.sd-header { padding: 20px 24px 16px; border-bottom: 1px solid rgba(0,0,0,0.07); flex-shrink: 0; }
.sd-header-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sd-header-titles { min-width: 0; }
.sd-header-tickerline { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sd-ticker { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--fp-text, #2a2825); }
.sd-header-sep { width: 1px; height: 14px; background: rgba(0,0,0,0.12); flex-shrink: 0; }
.sd-company { font-size: 14px; color: var(--fp-muted, #5a5750); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sd-header-priceline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sd-price { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--fp-text, #2a2825); }
.sd-ccy { font-size: 10px; }
.sd-pl-badge { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.sd-pl-badge.pos { background: rgba(45,106,58,0.09); color: var(--fp-positive, #2d6a3a); }
.sd-pl-badge.neg { background: rgba(162,58,46,0.09); color: var(--fp-negative, #a23a2e); }
.sd-close { background: none; border: none; font-size: 20px; color: var(--fp-muted, #656259); cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; }
.sd-close:hover { background: rgba(0,0,0,0.04); }

.sd-header-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; flex-wrap: wrap; }
.sd-tabs { display: flex; gap: 5px; }
.sd-tab { padding: 10px 16px; font-size: 13px; color: var(--fp-muted, #656259); cursor: pointer; border-bottom: 2px solid transparent; }
.sd-tab:hover { color: var(--fp-text, #2a2825); }
.sd-tab.on { color: var(--fp-text, #2a2825); border-bottom-color: var(--fp-accent, #b85c2a); font-weight: 500; }
.sd-periods { display: flex; gap: 4px; flex-wrap: wrap; }
.sd-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; cursor: pointer; border: none; font-family: inherit; background: rgba(0,0,0,0.04); color: var(--fp-muted, #5a5750); }
.sd-pill:hover:not(.on) { background: rgba(0,0,0,0.08); }
.sd-pill.on { background: var(--fp-accent, #b85c2a); color: var(--fp-surface, #fdfbf6); }

/* Body */
.sd-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* Chart legend below SVG */
.sd-chart-legend { display: flex; gap: 18px; font-size: 11px; color: var(--fp-muted, #656259); margin-top: 4px; flex-wrap: wrap; }
.sd-chart-legend .leg { display: inline-flex; align-items: center; gap: 5px; }
.sd-chart-legend .swatch { display: inline-block; width: 20px; height: 2px; border-radius: 1px; }
.sd-chart-legend .swatch.dashed { width: 16px; border-top: 2px dashed rgba(42,40,37,0.45); height: 0; background: none; }
.sd-chart-legend .swatch.dot { width: 8px; height: 8px; border-radius: 50%; }
.sd-chart-legend .leg.sd-clickable { cursor: pointer; user-select: none; }
.sd-chart-legend .leg.sd-clickable:hover { color: var(--fp-text, #2a2825); }
.sd-chart-legend .leg.off { opacity: 0.4; text-decoration: line-through; }

/* Performance strip */
.sd-perf-strip {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    background: rgba(0,0,0,0.02);
    border-radius: 12px;
    padding: 6px 0;
    margin-bottom: 16px;
}
.sd-perf-strip .divider { background: rgba(0,0,0,0.07); width: 1px; margin: 8px 0; }
.sd-perf-strip .cell { padding: 14px 18px; }
.sd-perf-strip .cell .micro { margin-bottom: 6px; }
.sd-perf-strip .cell .value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-perf-strip .cell .sub { font-size: 11px; color: var(--fp-muted, #656259); margin-top: 3px; }

/* Position details grid */
.sd-pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.sd-pos-grid .stat { background: rgba(0,0,0,0.02); border-radius: 10px; padding: 14px 16px; }
.sd-pos-grid .stat .micro { margin-bottom: 6px; }
.sd-pos-grid .stat .value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-pos-grid .stat .sub { font-size: 11px; color: var(--fp-muted, #656259); margin-top: 3px; }

/* Trade activity list */
.sd-trade-activity .sd-trade-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sd-trade-activity .sd-trade-sub { font-size: 12px; color: var(--fp-muted, #656259); }
.sd-trade-activity .sd-trade-rule { height: 1px; background: rgba(0,0,0,0.07); margin-bottom: 8px; }
.sd-txn-row { display: grid; grid-template-columns: 130px 60px 80px 100px 1fr; column-gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05); align-items: center; }
.sd-txn-row:last-child { border-bottom: none; }
.sd-txn-row .date { font-size: 12px; color: var(--fp-muted, #656259); font-variant-numeric: tabular-nums; }
.sd-txn-row .type { font-size: 12px; font-weight: 700; }
.sd-txn-row .type.buy  { color: var(--fp-positive, #2d6a3a); }
.sd-txn-row .type.sell { color: var(--fp-negative, #a23a2e); }
.sd-txn-row .qty   { font-size: 13px; font-variant-numeric: tabular-nums; }
.sd-txn-row .price { font-size: 13px; font-variant-numeric: tabular-nums; }
.sd-txn-row .total { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }

/* Transactions tab — full table */
.sd-tx-head { display: grid; grid-template-columns: 130px 60px 80px 100px 110px 1fr; column-gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.sd-tx-row  { display: grid; grid-template-columns: 130px 60px 80px 100px 110px 1fr; column-gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.04); align-items: center; }
.sd-tx-row:last-child { border-bottom: none; }
.sd-tx-row .notes { font-size: 12px; color: var(--fp-muted, #656259); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dividends tab */
.sd-div-empty { padding: 24px 0; text-align: center; color: var(--fp-muted, #656259); font-size: 13px; }
.sd-div-head { display: grid; grid-template-columns: 130px 110px 110px 1fr; column-gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.sd-div-row  { display: grid; grid-template-columns: 130px 110px 110px 1fr; column-gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.04); align-items: center; }
.sd-div-row:last-child { border-bottom: none; }

@media (max-width: 720px) {
    .sd-perf-strip { grid-template-columns: 1fr 1fr; padding: 4px; gap: 6px; }
    .sd-perf-strip .divider { display: none; }
    .sd-pos-grid { grid-template-columns: 1fr 1fr; }
}

/* Position chart modal — legend chips and stats grid */
.pos-detail-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--fp-muted, #5a5750);
}
.pos-detail-legend .leg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pos-detail-legend .swatch {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
}
.pos-detail-legend .swatch.dashed {
    background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
    height: 2px;
}
.pos-detail-legend .swatch.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.pos-detail-stats {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 600px) { .pos-detail-stats { grid-template-columns: repeat(2, 1fr); } }
.pos-detail-stats .stat {
    background: rgba(0,0,0,0.025);
    border-radius: 8px;
    padding: 10px 12px;
}
.pos-detail-stats .stat .label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-muted, #656259);
    margin-bottom: 4px;
}
.pos-detail-stats .stat .value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1815;
    font-variant-numeric: tabular-nums;
}
.pos-detail-stats .stat .value.pos { color: var(--fp-positive, #2d6a3a); }
.pos-detail-stats .stat .value.neg { color: var(--fp-negative, #a23a2e); }
.detail-stats-key {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 600px) { .detail-stats-key { grid-template-columns: repeat(2, 1fr); } }
.detail-stats-other {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
@media (max-width: 600px) { .detail-stats-other { grid-template-columns: repeat(2, 1fr); } }
.detail-stat {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 0.78rem;
}
.detail-stat-key {
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.detail-stat-key .detail-stat-value { font-size: 1.1rem; }
.detail-stat-label { color: var(--text-muted); }
.detail-stat-value { font-weight: 600; }

/* Statistics */
#stats-section {
    padding: 1.25rem 1.5rem 2rem;
}
/* legacy .stats-grid / .stats-card / .stats-row removed
   — Statistics tab now uses .stats-page (soft.css) with section-header + stat-row */

/* Behavioral section (inside stats) */
.beh-section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.beh-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.beh-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.beh-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 720px) { .beh-grid { grid-template-columns: 1fr; } }
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.stat-value {
    font-size: 0.88rem;
    font-weight: 600;
}

/* Add Ticker Form */
.add-ticker-form {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.add-ticker-form h4 { margin-bottom: 0.75rem; font-size: 0.9rem; }
.form-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.form-row input, .form-row select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}

.action-col { width: 60px; text-align: center; }

/* Toast notification */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 3000;
    box-shadow: var(--shadow-md);
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Loading spinner */
.loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

/* Chat Panel */
.chat-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--card-bg);
    box-shadow: -4px 0 16px rgba(0,0,0,0.08);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}
.chat-panel.open { right: 0; }
.chat-header {
    background: var(--primary);
    color: white;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}
.chat-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 0.3rem;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.chat-msg {
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    max-width: 90%;
    word-wrap: break-word;
}
.chat-msg.user {
    background: var(--primary);
    color: white;
    align-self: flex-end;
}
.chat-msg.ai {
    background: var(--bg-secondary);
    color: var(--text);
    align-self: flex-start;
}
.chat-msg.ai p { margin: 0.3rem 0; }
.chat-msg.ai strong { font-weight: 600; }
.chat-input-row {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
}
.chat-input-row input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
}
.chat-typing {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.78rem;
    padding: 0.4rem 0.8rem;
}

/* Target Price */
.tp-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.12rem 0.35rem;
    font-size: 0.68rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.tp-btn:hover { border-color: var(--primary); color: var(--primary); }
.tp-btn.tp-active { border-color: var(--primary); color: var(--primary); font-weight: 600; background: var(--primary-light); }

.btn-note-active { color: #e6a817 !important; border-color: #e6a817 !important; }
.holding-note-preview {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

tr.target-hit {
    background: #ffe0e6 !important;
    animation: blink-pink 1.5s ease-in-out infinite;
}
@keyframes blink-pink {
    0%, 100% { background: #ffe0e6; }
    50% { background: #fff0f3; }
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    border: 1px solid var(--border);
}
.modal-header {
    background: var(--bg-secondary);
    color: var(--text);
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 1rem; }
.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.15s;
}
.modal-close:hover { color: var(--red); }
.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}

/* Form groups (used in modals) */
.form-group {
    margin-bottom: 0.75rem;
}
.form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--text-muted);
}
.form-input {
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    transition: border-color 0.15s;
}
.form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* Portfolio List */
.portfolio-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.portfolio-list-header h2 { font-size: 1.15rem; font-weight: 600; }
.portfolio-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 3rem;
}
/* legacy portfolio-list / portfolio-detail / KPI-bar / sub-tab rules removed
   — all migrated to soft.css: .pcard / .pf-hero / .kpi-strip / .pf-tab-strip.
   .psb-help is preserved (still used inline in the hero KPI cells for tooltips). */
.psb-help {
    padding: 0;
    border: 0;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--sx-soft-3, rgba(0,0,0,0.04));
    color: var(--sx-muted-2, var(--fp-muted, #656259));
    font-size: 0.5rem;
    font-weight: 600;
    cursor: help;
    vertical-align: middle;
    margin-left: 2px;
}
.psb-help:focus-visible { outline: 2px solid var(--sx-accent, var(--fp-accent, #b85c2a)); outline-offset: 3px; }
.psb-help:hover { background: var(--sx-accent, var(--fp-accent, #b85c2a)); color: var(--fp-surface, #fff); }
.psb-tooltip {
    position: fixed;
    background: var(--sx-text, var(--fp-text, #2a2825));
    color: var(--fp-surface, #fff);
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.72rem;
    line-height: 1.4;
    width: min(280px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    pointer-events: auto;
    white-space: pre-line;
}

#holdings-header th[onclick] { cursor: pointer; user-select: none; white-space: nowrap; }
#holdings-header th[onclick]:hover { color: var(--primary); }
.sort-icon { font-size: 0.7rem; color: var(--primary); }

/* legacy .badge-buy / .badge-sell removed — Transactions tab uses .tx-type-pill (soft.css) */
.badge { display: inline-block; padding: 0.12rem 0.45rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }

/* Responsive */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem; }
    .tab-content { padding: 1rem; }
    .search-box { width: 100%; }
    .form-row { flex-direction: column; }
    .form-row input, .form-row select { width: 100%; }
    .tabs { padding: 0 1rem; overflow-x: auto; }
}

/* legacy .btn-add-wl removed — watchlist actions now use .wl-icon-btn (soft.css) */

/* Read-only mode: hide all edit controls */
.subscription-notice { margin:16px 24px; padding:16px 20px; border:1px solid #d9d0c4; border-radius:12px; background:#fffdf8; color:#2a2825; line-height:1.6; }
.subscription-notice a { color:#656d4a; font-weight:600; margin-left:12px; white-space:nowrap; }
.read-only-mode .btn-primary,
.read-only-mode #portfolio-entry-btn,
.read-only-mode #portfolio-invest-btn,
.read-only-mode #portfolio-plan-btn,
.read-only-mode button[onclick*="openPortfolioImport"],
.read-only-mode button[onclick*="editPortfolioMeta"],
.read-only-mode button[onclick*="showHoldingNoteFromBtn"],
.read-only-mode .btn-danger,
.read-only-mode .delete-btn,
.read-only-mode .tp-btn,
.read-only-mode .btn-add-wl,
.read-only-mode .add-inline,
.read-only-mode .portfolio-nav-actions,
.read-only-mode #trade-overlay,
.read-only-mode button[onclick*="showAddTransaction"],
.read-only-mode button[onclick*="showAddDividend"],
.read-only-mode button[onclick*="showAddOption"],
.read-only-mode button[onclick*="importTransactions"],
.read-only-mode button[onclick*="importDividends"],
.read-only-mode button[onclick*="deleteCurrentPortfolio"],
.read-only-mode button[onclick*="renamePortfolio"],
.read-only-mode button[onclick*="showNewPortfolioModal"],
.read-only-mode button[onclick*="showCreateWatchlist"],
.read-only-mode button[onclick*="manualRefresh"] { display: none !important; }
.chip-dynamic { border-color: #e53935; color: #e53935; }
.chip-dynamic.active { background: #e53935; color: white; border-color: #e53935; }
.chip-value { border-color: var(--fp-positive, #3a7a4a); color: var(--fp-positive, #3a7a4a); }

/* ── Soft Portfolio Theme ─────────────────────────────────────────────────── */

/* Numeric cells render in the same Helvetica-Neue tabular stack as the rest of
   the app — the literal monospace stack was retired so all views match the
   watchlist look. */
#pf-layout .pf-mono {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}
#pf-layout .pf-num { font-variant-numeric: tabular-nums; }

/* Pill filter chips */
.pf-pill {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11.5px;
    background: rgba(0,0,0,0.04);
    color: var(--fp-muted, #5a5750);
    border: none;
    cursor: pointer;
    transition: background 120ms;
    white-space: nowrap;
    font-family: inherit;
}
.pf-pill:hover { background: rgba(0,0,0,0.08); }
.pf-pill.active { background: var(--fp-text, #2a2825); color: var(--fp-surface, #fdfbf6); }

/* body.pf-soft-bg is now global — these rules are retained for legacy compatibility */

#pf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    padding: 18px 1.5rem 2.5rem;
    /* No hard pixel cap — the Name column on every grid uses minmax(0, 1fr) so
       it absorbs the extra width on wide monitors. We bound width relative to
       the viewport instead so 4K screens don't stretch lines to unreadable. */
    max-width: min(2200px, 96vw);
    margin: 0 auto;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    #pf-layout {
        grid-template-columns: 1fr;
        padding: 12px 12px 2.5rem;
        gap: 12px;
    }
    #pf-right { order: -1; } /* show summary sidebar above holdings on mobile */
}
#pf-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#pf-left > * { min-width: 0; max-width: 100%; }
#holdings-section, #transactions-section, #targets-section, #closed-section, #dividends-section, #report-section { min-width: 0; max-width: 100%; overflow-x: auto; }
/* Holdings: bounded-height scroll box so the search + currency pills + column
   header freeze at the top while the list scrolls underneath (header stays in
   horizontal sync with rows since they share the scroll container). */
#holdings-section { max-height: calc(100vh - 180px); overflow-y: auto; }

/* On the desktop 2-column layout the grid stretches #pf-left to the sidebar's
   height. Let the content card grow into that space and the holdings scroll box
   fill the card, so the holdings window bottom-aligns with the sidebar instead
   of floating short with an empty gap beneath it. (Mobile keeps the plain
   viewport-bounded scroll box above.) */
@media (min-width: 1101px) {
    #pf-left { min-height: 0; }
    .pf-content-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    #holdings-section { flex: 1 1 auto; min-height: 360px; max-height: none; }
}
#holdings-section .pf-holdings-controls {
    position: sticky; top: 0; z-index: 7;
    background: var(--fp-inset, #f2eee6);
}
#holdings-header {
    position: sticky; top: var(--holdings-ctrl-h, 58px); z-index: 6;
    background: var(--fp-inset, #f2eee6);
}
body { overflow-x: hidden; }

/* legacy .soft-card / .soft-micro / .pf-hero-nav / .pf-breadcrumb /
   .pf-back-btn / .pf-ccy-pill / #portfolio-title.pf-hero-title removed.
   Replaced by soft.css: .card / .micro / .pf-hero-top / .crumbs / .pf-back /
   .pill.on / .pf-title.

   The sidebar still uses .soft-card and .soft-micro — keep just those: */
.soft-card {
    background: var(--fp-surface, #fdfbf6);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 18px -8px rgba(80,70,50,0.12);
    border: 1px solid rgba(0,0,0,0.04);
}
.soft-micro {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fp-muted, #656259);
    font-weight: 500;
}

/* KPI grid + tab strip styling now lives in soft.css (.sx .pf-kpi-strip,
   .sx .kpi-cell, .sx .pf-tab-strip). Keep just the legacy-table positive/
   negative color helpers used inside un-migrated table cells. */
#pf-layout .positive { color: var(--fp-positive, #3a7a4a); }
#pf-layout .negative { color: var(--fp-negative, #b54a3e); }

/* Holdings controls: search, currency filter and personal columns. */
.pf-holdings-controls {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px 10px;
}
.holdings-column-control { position: relative; justify-self: end; }
#holdings-col-picker { position: fixed; inset: auto; margin: 0; width: 200px; overflow-y: auto; }
#holdings-col-picker[hidden] { display: none; }
#holdings-col-btn { white-space: nowrap; }
.pf-holdings-controls .search-box {
    background: rgba(0,0,0,0.03);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    width: 100%;
}
.pf-holdings-controls .search-box:focus {
    background: var(--fp-surface, #fdfbf6);
    border-color: rgba(0,0,0,0.10);
    outline: none;
}
.pf-filter-pills {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}
#order-table-btn { grid-column: 1 / -1; margin-top: -6px; width: fit-content; }

/* Holdings column header */
.holdings-col-header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 110px 80px 116px 72px 116px 80px minmax(120px, 140px);
    gap: 10px;
    padding: 4px 14px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-muted, #656259);
    font-weight: 500;
}
.hdr-sortable { cursor: pointer; }
.hdr-sortable:hover { color: var(--fp-text, #2a2825); }
#pf-layout .sort-icon { color: var(--fp-accent, #b85c2a); font-size: 0.7rem; }

/* Soft holding rows */
.holdings-soft-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 110px 80px 116px 72px 116px 80px minmax(120px, 140px);
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 140ms;
    margin: 1px 6px;
}
.holdings-soft-row:hover { background: var(--fp-hover, #f5f1ea); }
/* Shared tracks follow the visible columns, including sleeve subtotals. */
#holdings-header,
#holdings-body .holdings-soft-row,
#holdings-body .hsleeve-section-head {
    grid-template-columns: var(--holdings-template);
    min-width: var(--holdings-min-width);
    box-sizing: border-box;
    margin-left: 0; margin-right: 0;
}
#holdings-body .holding-note-soft { min-width: var(--holdings-min-width); box-sizing: border-box; }
#holdings-body .hsleeve-section-lbl { min-width: 0; width: max-content; max-width: 100%; overflow: hidden; }
.ticker-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 27px;
    padding: 0 6px;
    background: var(--fp-text, #2a2825);
    color: var(--fp-surface, #fdfbf6);
    border-radius: 7px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.holding-note-soft {
    margin: 0 22px 6px;
    padding: 5px 10px;
    background: rgba(var(--fp-accent-rgb, 184,92,42),0.06);
    border-left: 2px solid rgba(var(--fp-accent-rgb, 184,92,42),0.4);
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--fp-muted, #656259);
    line-height: 1.4;
}

/* Sidebar */
#pf-sidebar { display: flex; flex-direction: column; gap: 16px; }
.pf-sidebar-card { padding: 20px; }
.alloc-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--fp-text, #2a2825);
}
.alloc-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
/* Part header inside the grouped Holdings legend */
.alloc-group-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 12px 0 7px; padding-bottom: 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}
.alloc-group-head:first-child { margin-top: 0; }
.alloc-row-sub { padding-left: 4px; margin-bottom: 8px; }
.upcoming-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.upcoming-row:last-child { border-bottom: none; }
.upcoming-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(0,0,0,0.04);
    color: var(--fp-muted, #5a5750);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Content sections padding */
.pf-content-card .table-container { padding: 0 1rem 1rem; overflow-x: auto; }
.pf-content-card .controls { padding: 0.5rem 1rem; }
/* legacy stats-grid padding removed — soft .stats-page supplies its own padding */
.pf-content-card #portfolio-report-content { padding: 1rem; }

@media (max-width: 1100px) {
    #pf-layout { grid-template-columns: 1fr; }
    #pf-sidebar { flex-direction: row; flex-wrap: wrap; }
    #pf-sidebar .soft-card { flex: 1; min-width: 280px; }
}
.chip-value.active { background: var(--fp-positive, #3a7a4a); color: white; border-color: var(--fp-positive, #3a7a4a); }

/* Column picker dropdown */
.col-picker-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 4px 0;
    z-index: 200;
    min-width: 170px;
}
.col-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--text);
}
.col-picker-item:hover { background: var(--bg-secondary); }

/* ═══════════════════════════════════════════
   PORTFOLIO — MOBILE FIXES  (≤ 768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero card header ── */
  .sx .pf-hero-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 0;
  }
  .sx .pf-title { font-size: 22px; }
  .sx .pf-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sx .pf-actions .ret-select { max-width: 90px; }

  /* ── KPI strip — hero full-width, the rest 2×2 ──
     The Current Value hero (an 8-figure number + a "positions … + cash …"
     sub-line) was cramped sharing a half-column with Unrealized P&L. Give it its
     own full-width row so the big number and its sub-line have room; the other
     four KPIs sit in a 2×2 grid below. */
  .sx .pf-kpi-strip {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px;
    row-gap: 18px;
    padding-top: 16px;
    margin-top: 16px;
  }
  .sx .kpi-cell.pf-kpi-main { grid-column: 1 / -1; }
  .sx .kpi-cell { border-right: none !important; padding-right: 0; min-width: 0; }
  .sx .kpi-cell .kpi-value-lg { font-size: 26px !important; }
  .sx .kpi-cell .kpi-value    { font-size: 17px; }
  /* Long money values must be free to shrink/ellipsize inside their cell rather
     than push into the neighbour. */
  .sx .kpi-cell .kpi-value,
  .sx .kpi-cell .kpi-sub { overflow: hidden; text-overflow: ellipsis; }

  /* ── Sub-tab strip — scrollable, don't wrap ── */
  .sx .pf-tab-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .sx .pf-tab-strip .tab {
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ══ Holdings table: frozen header row + frozen ticker/company column ══
     One bounded scroll box (both axes) so `position:sticky` anchors to the box,
     not the page. Header sticks to the top; the first two columns (ticker chip +
     company name) stick to the left while you swipe sideways. Everything else
     scrolls under them. The grid has a 10px column gap, so column 2 starts at
     52+10 = 62px; each frozen cell paints a 10px same-colour box-shadow to fill
     the gap to its right (otherwise scrolling content peeks through the seam),
     and column 2 adds a soft shadow as the frozen↔scrolling divider. */
  #holdings-section {
    max-height: calc(100vh - 150px);
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  /* Search + currency pills scroll away — they used to also be sticky and fought
     the header for the top band, which is what caused the overlapping mess. */
  #holdings-section .pf-holdings-controls { position: static; }

  #holdings-header,
  #holdings-body .holdings-soft-row,
  #holdings-body .hsleeve-section-head {
    min-width: var(--holdings-mobile-width);
    grid-template-columns: var(--holdings-mobile-template) !important;
  }
  #holdings-body .holding-note-soft { min-width: var(--holdings-mobile-width); }
  .pf-holdings-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-holdings-controls .search-box { grid-column: 1 / -1; }
  .pf-filter-pills { flex-wrap: wrap; }
  /* Hide the now-empty "Trend" header label (keeps the 12px track for alignment). */
  #holdings-header > [data-col="trend"] { visibility: hidden; }
  .ticker-chip { width: 40px; font-size: 9.5px; }

  /* Hide the trend sparkline on mobile. It's tiny here, and its 28px area-fill
     was the thing bleeding over the frozen name column when scrolling sideways.
     Trend is still on the stock detail view (tap a row). Keep the (now empty)
     column so the grid tracks stay aligned with the header — no reflow. */
  #holdings-body .spark-cell { display: none !important; }

  /* Rows go flush (drop the card margin/radius/side-padding) so the frozen
     column pins cleanly to the scroll box's left edge instead of floating over
     an inset rounded card. Fixed row height so the frozen cells' backgrounds
     cover the full row and nothing can peek above/below them. */
  .holdings-soft-row {
    margin: 0 !important; border-radius: 0 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }

  /* Frozen HEADER row (vertical) — solid, above every row. */
  #holdings-header.holdings-col-header {
    position: sticky; top: 0; z-index: 8;
    background: var(--fp-inset, #f2eee6);
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* Frozen COLUMNS (horizontal): ticker chip = col 1, company name = col 2.
     The chip keeps its own dark pill background; its box-shadow (offset past the
     44px chip) fills the 18px of track+gap to its right with the row colour so
     scrolling content can't peek through between the chip and the name. */
  .holdings-soft-row > [data-col="ticker"] {
    position: sticky; left: 0; z-index: 4;
    box-shadow: 18px 0 0 0 var(--fp-surface, #fdfbf6);
  }
  .holdings-soft-row > [data-col="name"] {
    position: sticky; left: var(--holdings-name-left, 62px); z-index: 4;
    align-self: stretch; display: flex; flex-direction: column; justify-content: center;
    background: var(--fp-surface, #fdfbf6);
    box-shadow: 10px 0 0 0 var(--fp-surface, #fdfbf6), 16px 0 11px -8px rgba(40,38,34,0.16);
  }
  /* Header's own first two cells: frozen in BOTH axes (the top-left corner). */
  #holdings-header > [data-col="ticker"] {
    position: sticky; left: 0; z-index: 9;
    background: var(--fp-inset, #f2eee6); box-shadow: 10px 0 0 0 var(--fp-inset, #f2eee6);
  }
  #holdings-header > [data-col="name"] {
    position: sticky; left: var(--holdings-name-left, 62px); z-index: 9;
    background: var(--fp-inset, #f2eee6);
    box-shadow: 10px 0 0 0 var(--fp-inset, #f2eee6), 16px 0 11px -8px rgba(40,38,34,0.16);
  }

  /* ── Sleeve group headers: same grid + same frozen columns ──
     Caret = col 1, sleeve label = col 2 (name only on mobile so its frozen
     width matches the rows'); Value / P&L / P&L% subtotals scroll like the row
     numbers. The count chip is hidden here (still shown on the summary cards). */
  .hsleeve-section-head {
    margin: 12px 0 2px !important; border-radius: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    background: var(--fp-soft, #faf8f3);
  }
  .hsleeve-section-count { display: none; }
  .hsleeve-section-head > .hsleeve-caret {
    position: sticky; left: 0; z-index: 5;
    background: var(--fp-soft, #faf8f3); box-shadow: 10px 0 0 0 var(--fp-soft, #faf8f3);
    align-self: stretch; display: flex; align-items: center;
  }
  .hsleeve-section-head > .hsleeve-section-lbl {
    position: sticky; left: 0; z-index: 5;
    background: var(--fp-soft, #faf8f3);
    box-shadow: 10px 0 0 0 var(--fp-soft, #faf8f3), 16px 0 11px -8px rgba(40,38,34,0.16);
    align-self: stretch; align-items: center;
  }

  /* ── Portfolio list cards ── */
  .portfolio-list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px 12px;
  }
  .sx .portfolio-cards-grid {
    grid-template-columns: 1fr !important;
    padding: 0 12px 20px;
    gap: 12px;
  }

  /* ── Sidebar: full width below main content ── */
  #pf-right {
    order: -1;
  }
  #pf-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  #pf-sidebar > * { flex: 1 1 calc(50% - 5px); min-width: 140px; }

  /* ── Targets / tg-grid ── */
  .sx .tg-grid {
    grid-template-columns: 60px minmax(0,1fr) 70px 70px !important;
    font-size: 11px;
  }
  .sx .tg-grid > *:nth-child(n+5) { display: none !important; }
  .sx .targets-actions { flex-wrap: wrap; gap: 6px; }

  /* ── Generic content padding ── */
  .sx .dividends-page,
  .sx .targets-page { padding: 12px 10px; }

  .sx .card.pf-hero { padding: 14px; }
  .sx .card.pf-content-card { padding: 0; }
}
.col-picker-item input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--primary);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}


/* Invest this month */
.invest-top { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.invest-amt { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sx-muted); }
.invest-in { display: flex; align-items: center; gap: 6px; background: var(--fp-surface, #fff); border: 1px solid #e3ded2; border-radius: 9px; padding: 8px 11px; }
.invest-in i { font-style: normal; color: var(--sx-muted); }
.invest-in input { border: 0; outline: 0; background: none; width: 120px; font: 500 16px/1.2 'IBM Plex Mono', monospace; }
.invest-frac { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sx-muted); padding-bottom: 10px; }
.invest-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.invest-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sx-muted); padding: 6px 8px; border-bottom: 1px solid #e8e3d8; }
.invest-table td { padding: 9px 8px; border-bottom: 1px solid #f0ece2; vertical-align: top; }
.invest-table .num { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.invest-table input { width: 90px; text-align: right; border: 1px solid #e3ded2; border-radius: 7px; padding: 5px 7px; font: 500 14px/1.2 'IBM Plex Mono', monospace; }
.invest-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--fp-muted, #5a5750); }
.invest-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--fp-muted, #5a5750); background: rgba(0,0,0,.03); border-radius: 9px; padding: 10px 13px; }
.invest-note.warn { background: rgba(var(--fp-accent-rgb, 184,92,42),.08); color: #7a3d18; }

.fees-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--sx-muted); margin-bottom: 10px; }
.fees-f .invest-in input { width: 100%; }
.fees-h { font-size: 13px; font-weight: 600; margin: 16px 0 8px; }
.fees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* Public accounts: entry points to family-only features. The server refuses
   them regardless; this keeps them from being offered. Custom instruments
   write a shared manual price, and order lists are the family's own. */
body.public-account [onclick*="_builderAddCustom"],
body.public-account [onmousedown*="_txAddCustom"],
body.public-account [onclick*="showOrderLists"] { display: none !important; }