/* ═══════════════════════════════════════════════════════════════════════════
   Portfolio IQ — v40 — Inter + JetBrains Mono
   Dark default (mobile) · Light default (desktop)
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Dark theme tokens (default) ─────────────────────────────────────── */
:root {
    --brand:      #6366f1;
    --brand-2:    #8b5cf6;
    --brand-dim:  rgba(99,102,241,0.15);
    --gain:       #10b981;
    --gain-dim:   rgba(16,185,129,0.14);
    --loss:       #ef4444;
    --loss-dim:   rgba(239,68,68,0.14);
    --amber:      #f59e0b;
    --surface:    #0c0e13;
    --surface-2:  #141720;
    --surface-3:  #1c2030;
    --border:     rgba(255,255,255,0.07);
    --border-2:   rgba(255,255,255,0.12);
    --text:       #f1f5f9;
    --text-2:     #8892a4;
    --text-3:     #4a5568;
    --ff:         'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:       'JetBrains Mono', 'DM Mono', 'Fira Mono', monospace;
    --header-bg:  var(--surface-2);
    --header-border: var(--border);
    --body-bg:    var(--surface);
    --container-radius: 0px;
    --container-shadow: none;
    --body-pad:   0px;
    --tab-bg:     #151922;

    --fs-xs:   clamp(11px, 2.2vw, 12px);
    --fs-sm:   clamp(12px, 2.4vw, 13px);
    --fs-base: clamp(13px, 2.6vw, 14px);
    --fs-md:   clamp(12px, 2.8vw, 14px);
    --fs-lg:   clamp(13px, 3.2vw, 16px);
    --fs-xl:   clamp(15px, 3.8vw, 20px);

    --pad-cell: clamp(4px,1vw,8px) clamp(5px,1.2vw,10px);
    --radius:   12px;
    --nav-h:    58px;
}

/* ── Light theme token overrides ─────────────────────────────────────── */
html[data-theme="light"] {
    /* ── Eggshell + charcoal + semantic only ── */
    --surface:    #f7f6f2;          /* eggshell body */
    --surface-2:  #ffffff;          /* pure white cards */
    --surface-3:  #f0ede8;          /* warm gray — inputs, tab bar bg */
    --border:     #ddd9d2;
    --border-2:   #c8c4bc;
    --text:       #111111;
    --text-2:     #555555;
    --text-3:     #999999;
    --header-bg:  #111111;          /* black bar */
    --header-border: transparent;
    --body-bg:    #f7f6f2;
    --container-radius: 10px;
    --container-shadow: 0 4px 24px rgba(0,0,0,0.12);
    --body-pad:   6px;
    --tab-bg:     #eeebe5;          /* distinct warm gray nav */
    --brand:      #4f46e5;          /* single indigo accent */
    --gain:       #059669;
    --loss:       #dc2626;
    --brand-dim:  rgba(79,70,229,0.08);
    --gain-dim:   rgba(5,150,105,0.08);
    --loss-dim:   rgba(220,38,38,0.08);
}
/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES — matches mockup exactly
   ══════════════════════════════════════════════════════════════════════ */

/* Header — BMW black bar */
html[data-theme="light"] .header { color: white; }
html[data-theme="light"] .logo-portfolio { color: white; }
html[data-theme="light"] .logo-iq { color: #a5b4fc; }
html[data-theme="light"] .header-subtitle { color: rgba(255,255,255,0.55); }
html[data-theme="light"] .header-divider { background: rgba(255,255,255,0.2); }
html[data-theme="light"] .header-user-name { color: rgba(255,255,255,0.75); }
html[data-theme="light"] #signOutBtn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.8); }
html[data-theme="light"] .btn-theme-toggle { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); }

/* Toolbar */
html[data-theme="light"] #settingsBar { background: #ffffff; border-bottom: 1px solid #e0ddd8; }
html[data-theme="light"] .toolbar-line-1 { background: #ffffff; border-bottom-color: #e8e5e0; }
html[data-theme="light"] .settings-label { color: #888; font-weight: 500; }
html[data-theme="light"] .ccy-select { background-color: #f0ede8; color: #111; border-color: #bbb; }
html[data-theme="light"] .btn-upload { background: #111; }
html[data-theme="light"] .btn-newfile { background: #f0ede8; color: #555; border-color: #ccc; }

/* View toggles */
html[data-theme="light"] .view-toggle-btn { background: #f0ede8; color: #333; border-color: #bbb; }
html[data-theme="light"] .view-toggle-btn.active { background: #111; color: white; border-color: #111; }

/* Method/region buttons */
html[data-theme="light"] .method-btn { background: #f0ede8; color: #333; border-color: #bbb; }
html[data-theme="light"] .method-btn.active { background: #111; color: white; border-color: #111; }

/* CG controls panel stays dark */
html[data-theme="light"] /* ── Mobile CG controls — compact dropdown row ─────────────────────────── */
.cg-mobile-controls {
    display:flex; flex-direction:column; padding:8px 12px; gap:0;
}
.cg-mobile-row {
    display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
}
.cg-mobile-label {
    font-size:11px; font-weight:600; color:var(--text-3);
    text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap;
    flex-shrink:0;
}
.cg-mobile-select {
    flex:1; min-width:0;
}
.cg-mobile-info {
    flex-shrink:0;
}
/* Show mobile controls only on mobile */
.cg-mobile-controls { display:flex; }
.cg-desktop-controls { display:none !important; }
@media(min-width:1024px) {
    .cg-mobile-controls { display:none !important; }
    .cg-desktop-controls { display:flex !important; }
}

/* Dark theme: dark panel */
html:not([data-theme="light"]) .cg-controls-panel { background: #1a1a1a; border-color: rgba(255,255,255,0.08); }
/* Light theme: warm white panel matching toolbar */
html[data-theme="light"] .cg-controls-panel { background: #ffffff; border-color: #ddd9d2; }
html[data-theme="light"] .cg-controls-panel .cg-ctrl-label { color: #888; }
html[data-theme="light"] .cg-controls-sep { background: #ddd9d2; }
html[data-theme="light"] .info-btn { background: #f0ede8; border-color: #bbb; color: #555; }

/* Tables */
html[data-theme="light"] table { background: white; }
html[data-theme="light"] th { background:#f5f3ef; color:#555; border-bottom-color:#ddd9d2; }
html[data-theme="light"] td { border-bottom-color: #e8e5e0; color: #111; }
html[data-theme="light"] tbody tr:hover td { background: #f5f3ef !important; }
html[data-theme="light"] tr.row-buy  td { background: rgba(5,150,105,0.05); }
html[data-theme="light"] tr.row-sell td { background: rgba(220,38,38,0.04); }
html[data-theme="light"] tr.row-split td { background: rgba(180,130,0,0.04); }
html[data-theme="light"] .col-balance { background: #f5f3ef !important; color: #222; }
html[data-theme="light"] th.col-balance { background:#f5f3ef !important; color:#4f46e5; border-bottom-color:#ddd9d2; }

/* FY accordions */
html[data-theme="light"] .fy-card { background: white; border-color: #ddd9d2; }
html[data-theme="light"] .fy-header { background: #faf8f4; }
html[data-theme="light"] .fy-header:hover { background: #f5f3ef; }
html[data-theme="light"] .fy-content { background: #f7f6f2; border-top-color: #ddd9d2; }
html[data-theme="light"] .fy-title { color:#4f46e5; background:rgba(79,70,229,0.08); }
html[data-theme="light"] .fy-chevron { color: #999; }
html[data-theme="light"] .fy-summary-label { color: #999; }
html[data-theme="light"] .fy-summary-value { color: #111; }
html[data-theme="light"] .fy-stat { background: white; border-color: #ddd9d2; }
html[data-theme="light"] .fy-stat-label { color: #999; }
html[data-theme="light"] .fy-stat-value { color: #111; }

/* Investment section header — black bar matching positions card headers */
html[data-theme="light"] .inv-section-header { background: #111; color: white; border-bottom: none; }
html[data-theme="light"] .inv-section-header h3 { color: white; }
html[data-theme="light"] .inv-section-subtitle { color: rgba(255,255,255,0.55); }
html[data-theme="light"] .inv-price-status { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.15); }
html[data-theme="light"] .inv-actions { background: #faf8f4; border-bottom: 1px solid #ddd9d2; }
html[data-theme="light"] .inv-actions-label { color: #888; }
html[data-theme="light"] .inv-actions-divider { background: #ddd9d2; }
html[data-theme="light"] .btn-download { background: rgba(0,0,0,0.05); color: #333; border-color: #ccc; }
html[data-theme="light"] .btn-download--inv { background: rgba(0,0,0,0.05) !important; color: #444 !important; border-color: #bbb !important; }
html[data-theme="light"] .btn-download--combo { background: rgba(79,70,229,0.07) !important; color: #4f46e5 !important; border-color: rgba(79,70,229,0.2) !important; }

/* Position cards — black header, white body, warm borders */
html[data-theme="light"] .inv-card { background: white; border-color: #ddd9d2; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
html[data-theme="light"] .inv-card-header { background: #111; }
html[data-theme="light"] .inv-card-ticker { color: white; }
html[data-theme="light"] .inv-card-shares { color: rgba(255,255,255,0.5); }
html[data-theme="light"] .inv-card-name   { color: rgba(255,255,255,0.45); }
html[data-theme="light"] .inv-metric { border-color: #e8e5e0; }
html[data-theme="light"] .inv-metric-label { color: #999; }
html[data-theme="light"] .inv-metric-value { color: #111; }
/* PnL bar — solid flat colour matching mockup */
html[data-theme="light"] .inv-card-pnl.gain { background: #059669; }
html[data-theme="light"] .inv-card-pnl.loss { background: #dc2626; }
html[data-theme="light"] .inv-card-pnl.neutral { background: #f0ede8; color: #555; }
html[data-theme="light"] .inv-price-pill { background: #111; color: white; }
html[data-theme="light"] .inv-price-pill.unavail { background: #f0ede8; color: #999; border-color: #ccc; }

/* Totals bar */
html[data-theme="light"] .inv-totals-bar { background: #faf8f4; border-top-color: #ddd9d2; }
html[data-theme="light"] .inv-total-cell { border-right-color: #ddd9d2; }
html[data-theme="light"] .inv-total-label { color: #999; }
html[data-theme="light"] .inv-total-value { color: #111; }

/* Tab nav sidebar — warm gray, white active, separated rows */
html[data-theme="light"] .tab-nav { background: #eeebe5; border-right: 1px solid #d8d5ce; }


/* Bottom nav (mobile) */
html[data-theme="light"] .tab-nav { border-top-color: #ddd9d2; }

/* Sidebar export */
html[data-theme="light"] .sidebar-export { background: #faf8f4; border-top: 1px solid #d8d5ce; }
html[data-theme="light"] .sidebar-export-header { color: #888; }
html[data-theme="light"] .sidebar-section { border-bottom-color: #e8e5e0; }
html[data-theme="light"] .sidebar-section-heading { color: #444; }
html[data-theme="light"] .sidebar-dl-btn { background: white; color: #333; border-color: #ccc; }
html[data-theme="light"] .sidebar-dl-btn:active { background: #f0ede8; }
html[data-theme="light"] .sidebar-dl-btn-disabled { background: #f5f3ef; color: #bbb; border-color: #e0ddd8; }

/* Summary bubbles — solid bold fills matching mockup */


/* CGT summary cards */
html[data-theme="light"] .card { background: white; border-color: #ddd9d2; }
html[data-theme="light"] .card.positive { background: #ecfdf5; border-color: #6ee7b7; }
html[data-theme="light"] .card.negative { background: #fef2f2; border-color: #fca5a5; }
html[data-theme="light"] .card-label { color: #999; }
html[data-theme="light"] .card-value { color: #111; }
html[data-theme="light"] .card.positive .card-value { color: #059669; }
html[data-theme="light"] .card.negative .card-value { color: #dc2626; }

/* Treemap area */
html[data-theme="light"] #invTreemapContainer { background: #f0ede8; }
html[data-theme="light"] .treemap-scroll-wrap { background: #f0ede8; }
html[data-theme="light"] .treemap-legend { background: #faf8f4; border-top-color: #ddd9d2; color: #555; }
html[data-theme="light"] .treemap-legend span { color: #555 !important; }
html[data-theme="light"] .tm-legend-sep { background: #ddd9d2; }

/* Notice bars */
html[data-theme="light"] #ccyNoticeBar { background: #f5f3ef; border-top-color: #ddd9d2; color: #4f46e5; }
html[data-theme="light"] .split-notice { background: #fef9ec; border-left-color: #d97706; color: #7c5a00; }
html[data-theme="light"] .error { background: rgba(220,38,38,0.06); color: #b91c1c; border-left-color: #dc2626; }

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body { height: 100%; }
body {
    font-family: var(--ff);
    font-size: var(--fs-base);
    background: var(--body-bg);
    color: var(--text);
    /* dvh = dynamic viewport height — excludes browser chrome like bottom address bar */
    height: 100dvh;
    min-height: 100dvh;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: var(--body-pad);
    -webkit-font-smoothing: antialiased;
}

/* ── App shell ─────────────────────────────────────────────────────────── */
#appShell {
    display: none; flex-direction: column;
    height: 100dvh; width: 100%;
    flex: 1; min-height: 0; max-height: 100dvh;
    background: var(--surface);
    overflow: hidden;
}

.container {
    flex: 1; display: flex; flex-direction: column;
    width: 100%; max-width: 100%; margin: 0 auto;
    background: var(--surface);
    border-radius: var(--container-radius);
    box-shadow: var(--container-shadow);
    overflow: hidden; min-height: 0;
    height: 100%;
}
html[data-theme="light"] .container { max-width: 1600px; }

/* ── App header ────────────────────────────────────────────────────────── */
.header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    color: var(--text);
    padding: 8px 14px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; min-height: 44px;
    border-radius: 0;          /* never let container-radius bleed into header */
}
.header h1, .app-logo {
    font-size: clamp(16px,3.5vw,20px); font-weight: 700;
    letter-spacing: -0.01em; white-space: nowrap; margin: 0;
}
/* Portfolio IQ logo — Montserrat, white + light purple */
.app-logo {
    font-family: 'Montserrat', var(--ff);
    font-weight: 800;
    font-size: clamp(16px,3.8vw,22px);
}
.logo-portfolio {
    color: white;
    font-family: 'Montserrat', var(--ff);
    font-weight: 800;
}
.logo-iq {
    color: #c4b5fd;  /* light purple */
    font-family: 'Montserrat', var(--ff);
    font-weight: 900;
    letter-spacing: 0.02em;
}
/* In light mode header (purple gradient) logo stays white/light-purple — same */
html[data-theme="light"] .logo-portfolio { color: white; }
html[data-theme="light"] .logo-iq        { color: #e9d5ff; }
.header-divider { width:1px; height:16px; background:var(--border-2); flex-shrink:0; }
.header-subtitle { font-size:var(--fs-xs); color:var(--text-2); display:none; }
@media(min-width:540px){ .header-subtitle { display:block; } }

/* ── Mobile header action buttons ───────────────────────────────────── */
.header-actions {
    display:flex; align-items:center; gap:6px;
    margin-left:auto; flex-shrink:0;
}
/* Desktop: toolbar already has Import — keep only the export btn in header */
@media(min-width:1024px) { .btn-hdr-import { display:none !important; } }

.btn-hdr {
    display:flex; align-items:center; justify-content:center;
    gap:5px;
    width:36px; height:36px;
    border:none; border-radius:9px; cursor:pointer;
    flex-shrink:0; color:white;
    font-family:var(--ff); font-size:var(--fs-xs); font-weight:600;
    white-space:nowrap; overflow:hidden;
    transition:width 0.2s ease;
    -webkit-tap-highlight-color:transparent;
}
/* Hold-to-reveal label */
.hdr-label {
    display:none; font-size:11px; font-weight:600; white-space:nowrap;
}
.btn-hdr.show-label {
    width:auto; padding:0 12px;
}
.btn-hdr.show-label .hdr-label { display:inline; }

.btn-hdr-import   { background:#3b82f6; color:white; }   /* blue */
.btn-hdr-download { background:#059669; color:white; border:none; /* always show label */
    width:auto; padding:0 12px; }
.btn-hdr-download .hdr-label { display:inline; }

html[data-theme="light"] .btn-hdr-import   { background:#2563eb; color:white; }
html[data-theme="light"] .btn-hdr-download { background:#059669; color:white; border:none; }

/* ── Export dropdown ────────────────────────────────────────────────── */
.export-dropdown-wrap {
    position:relative; display:inline-flex; flex-shrink:0;
}
.export-dropdown-menu {
    display:none; position:absolute;
    top:calc(100% + 6px); right:0;
    min-width:260px;
    background:var(--surface-2); border:1px solid var(--border-2);
    border-radius:14px; padding:6px;
    box-shadow:0 8px 32px rgba(0,0,0,0.45);
    z-index:600; flex-direction:column; gap:2px;
}
.export-dropdown-menu.open { display:flex; }
.export-dropdown-menu .export-modal-btn {
    border-radius:9px; padding:9px 12px; gap:10px;
}
.export-dropdown-menu .export-modal-btn:hover { opacity:0.85; }
.export-dropdown-section {
    font-size:10px; font-weight:700; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.08em;
    padding:5px 10px 2px;
}
.export-dropdown-divider { height:0.5px; background:var(--border); margin:4px 2px; }
html[data-theme="light"] .export-dropdown-menu {
    background:#fff; border-color:#ddd9d2;
    box-shadow:0 8px 32px rgba(0,0,0,0.14);
}

/* Export modal buttons */
.export-modal-btn {
    display:flex; align-items:center; gap:14px;
    width:100%; background:var(--surface-3);
    border:1px solid var(--border-2); border-radius:12px;
    padding:12px 14px; cursor:pointer; font-family:var(--ff);
    text-align:left; color:var(--text);
    -webkit-tap-highlight-color:transparent;
}
.export-modal-btn:active { opacity:0.7; }
html[data-theme="light"] .export-modal-btn { background:#f7f6f2; border-color:#ddd9d2; }
html[data-theme="light"] .export-modal-btn div div:first-child { color:#111; }

/* ── Settings toolbar — hidden on mobile, visible on tablet+ ────────── */
#settingsBar { background:var(--surface-2); border-bottom:1px solid var(--border); flex-shrink:0; display:none; }
@media(min-width:768px) { #settingsBar { display:block; } }
/* Tablet: hide file-controls line — import/export live in header buttons instead */
@media(min-width:768px) and (max-width:1023px) { .toolbar-line-1 { display:none !important; } }
.toolbar-line {
    display:flex; align-items:center; gap:6px;
    padding:6px 12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
}
/* Spacer pushes currency controls to far right */
.toolbar-spacer { flex:1; min-width:8px; }
.toolbar-line::-webkit-scrollbar { display:none; }
.toolbar-line-1 { border-bottom:1px solid var(--border); }
.settings-group { display:flex; align-items:center; gap:4px; }
.settings-label {
    font-size:var(--fs-xs); font-weight:600; color:var(--text-3);
    white-space:nowrap; text-transform:uppercase; letter-spacing:0.06em;
}
.settings-divider { width:1px; height:18px; background:var(--border-2); flex-shrink:0; margin:0 4px; }
input[type="file"] { display:none; }
.toolbar-file { display:flex; align-items:center; gap:6px; }

.btn-upload {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color:white; border:none; padding:6px 12px; border-radius:8px;
    font-size:var(--fs-sm); font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; gap:4px; font-family:var(--ff); white-space:nowrap;
}
/* Import button — hides long label on very small screens */
/* Import button — always compact on mobile, full label on desktop */
.btn-import .import-full  { display:none; }
.btn-import .import-short { display:inline; }
@media(min-width:600px) {
    .btn-import .import-full  { display:inline; }
    .btn-import .import-short { display:none; }
}
.btn-newfile {
    background:var(--surface-3); color:var(--text-2);
    border:1px solid var(--border-2); padding:6px 12px; border-radius:8px;
    font-size:var(--fs-sm); font-weight:600; cursor:pointer;
    display:none; align-items:center; gap:4px; font-family:var(--ff); white-space:nowrap;
}
.btn-newfile.visible { display:inline-flex; }

#filenamePill {
    display:none; align-items:center; gap:4px;
    background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.25);
    border-radius:20px; padding:3px 10px;
    font-size:var(--fs-xs); color:var(--gain); font-weight:600;
    max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#filenamePill.visible { display:inline-flex; }

.ccy-btn {
    background:var(--surface-3); color:var(--text-2);
    border:1px solid var(--border-2); padding:4px 8px; border-radius:6px;
    font-size:var(--fs-xs); font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:2px; font-family:var(--ff); white-space:nowrap;
}
.ccy-btn.active { background:var(--brand); color:white; border-color:transparent; }

.fileccy-btn {
    background:var(--surface-3); color:var(--text-2);
    border:1px solid rgba(16,185,129,0.2); padding:4px 8px; border-radius:6px;
    font-size:var(--fs-xs); font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:2px; font-family:var(--ff); white-space:nowrap;
}
.fileccy-btn.active { background:rgba(16,185,129,0.15); color:var(--gain); border-color:rgba(16,185,129,0.35); }

/* ── Currency select dropdowns (replace button groups in toolbar) ─────── */
.ccy-select {
    background:var(--surface-3); color:var(--text-2);
    border:1px solid var(--border-2); padding:7px 26px 7px 10px; border-radius:6px;
    font-size:12px; font-weight:600; cursor:pointer;
    font-family:var(--ff); outline:none;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 8px center;
    min-width:100px;
}
.ccy-select:focus { border-color:var(--brand); color:var(--text); }
html[data-theme="light"] .ccy-select {
    background-color:#f0ede8; color:#111; border-color:rgba(0,0,0,0.18);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ccy-select option { background:var(--surface-2); color:var(--text); }

/* ── Sidebar export section (tablet only) ────────────────────────────── */
.sidebar-export {
    display:none;
    margin-top:auto;
    padding:12px 0 0;
    border-top:1px solid var(--border);
}
.sidebar-export-header {
    font-size:11px; font-weight:600; color:var(--text-3);
    text-transform:uppercase; letter-spacing:0.1em;
    padding:0 14px 10px;
}
.sidebar-section {
    padding:0 14px 10px;
    border-bottom:1px solid var(--border);
    margin-bottom:0;
}
.sidebar-section:last-child { border-bottom:none; }
.sidebar-section-heading {
    font-size:var(--fs-xs); font-weight:600; color:var(--text-2);
    margin-bottom:6px; display:block;
}
.sidebar-dl-btns {
    display:flex; gap:4px;
}
.sidebar-dl-btn {
    flex:1;
    background:var(--surface-3); color:var(--text-2);
    border:1px solid var(--border-2); padding:5px 4px; border-radius:6px;
    font-size:11px; font-weight:600; cursor:pointer;
    font-family:var(--ff); white-space:nowrap; text-align:center;
    display:flex; align-items:center; justify-content:center; gap:2px;
}
.sidebar-dl-btn:active { opacity:0.7; }
.sidebar-dl-btn-disabled,
.sidebar-dl-btn[disabled] {
    opacity:0.35;
    cursor:not-allowed;
    pointer-events:none;
}
/* Sidebar export removed — export lives in header green button at all breakpoints */
.inv-actions-export-desktop { display:none !important; }
.sidebar-export { display:none !important; }

#ccyNoticeBar {
    display:none;
    background:linear-gradient(90deg,rgba(99,102,241,0.12),rgba(139,92,246,0.08));
    border-top:1px solid rgba(99,102,241,0.2); padding:5px 14px;
    font-size:var(--fs-xs); font-weight:600; color:#a5b4fc;
    align-items:center; gap:6px;
}
#ccyNoticeBar.visible { display:flex; }

#fxStatusBar {
    display:none; align-items:center; gap:8px;
    background:rgba(245,158,11,0.08); border-top:1px solid rgba(245,158,11,0.2);
    padding:4px 14px; font-size:var(--fs-xs); font-weight:600; color:var(--amber);
}
#fxStatusBar.visible { display:flex; }
.fx-status-spinner { animation:fxSpin 1s linear infinite; display:inline-block; }
@keyframes fxSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.view-toggle-group {
    display:flex; gap:6px;
}
.view-toggle-btn {
    background:var(--surface-3); color:var(--text-2);
    border:1px solid var(--border-2);
    padding:7px 18px; border-radius:8px;
    font-size:var(--fs-sm); font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:4px;
    font-family:var(--ff);
    white-space:nowrap; flex-shrink:0;
    /* Fixed minimum width so both buttons are stable */
    min-width:100px;
}
.view-toggle-btn.active { background:var(--brand); color:white; border-color:var(--brand); }

/* ── Content area ──────────────────────────────────────────────────────── */
.content { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; max-height:100%; }
/* Tab panels fill remaining space, tab nav gets its fixed height below */
.tab-panels-wrap { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   TAB NAVIGATION — clean single source of truth
   Mobile (<768px): bottom bar, bubble style via box-shadow only
   Tablet (768px+): left sidebar with left-bar indicator
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared base ── */
.tab-nav {
    display:flex;
    background:var(--tab-bg);
    border-top:1px solid rgba(255,255,255,0.12);
    flex-shrink:0 !important;
    order:99;
    padding-bottom:env(safe-area-inset-bottom,0px);
    position:relative; z-index:50;
    height:var(--nav-h);
    overflow:hidden;
    transform:translateZ(0);
}
.tab-btn {
    position:relative;
    flex:1; width:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:3px; padding:0; margin:0;
    border:none; outline:none;
    cursor:pointer;
    height:var(--nav-h); min-height:var(--nav-h); max-height:var(--nav-h);
    box-sizing:border-box; overflow:hidden;
    font-family:var(--ff); font-size:11px; font-weight:500; line-height:1;
    color:var(--text-3); background:transparent;
    -webkit-tap-highlight-color:transparent;
    -webkit-appearance:none;
    user-select:none; -webkit-user-select:none;
}
.tab-btn::after,.tab-btn.active::after { display:none !important; content:none !important; }
.tab-icon {
    display:block; flex-shrink:0;
    width:22px; height:22px;
    font-size:18px; line-height:22px;
    text-align:center; isolation:isolate;
}
.tab-btn .tab-label,
.tab-btn.active .tab-label {
    display:block; width:100%;
    font-size:11px; font-weight:500; line-height:1.2;
    color:var(--text-3);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-align:center; padding:0 2px;
    box-sizing:border-box;
    /* Prevent icon font-size from bleeding into label via inheritance */
    font-family:var(--ff);
}

/* ── Mobile bubble style (<768px) ──────────────────────────────────────── */
@media(max-width:767px) {
    .tab-nav { padding:0 6px; gap:4px; align-items:center; }
    .tab-btn {
        border-radius:10px;
        box-shadow:0 0 0 1px rgba(255,255,255,0.12);
    }
    .tab-btn.active {
        background:rgba(99,102,241,0.18);
        box-shadow:0 0 0 1.5px #6366f1;
    }
    html[data-theme="light"] .tab-btn {
        box-shadow:0 0 0 1px #c8c4bc;
    }
    html[data-theme="light"] .tab-btn.active {
        background:#dbeafe;
        box-shadow:0 0 0 1.5px #2563eb;
    }
}

/* ── Tablet sidebar (768px+) ───────────────────────────────────────────── */
@media(min-width:1024px) {
    .content { flex-direction:row; }
    .tab-nav {
        flex-direction:column; width:152px; min-width:152px;
        height:auto;
        border-top:none; border-right:1px solid var(--border);
        order:0; padding-bottom:0;
        align-items:stretch; justify-content:flex-start;
        gap:0; padding:8px 0 0;
        transform:none;
    }
    .tab-btn {
        flex:none; width:auto; height:auto;
        min-height:44px; max-height:none;
        flex-direction:row; justify-content:flex-start;
        align-items:center;
        gap:8px; padding:11px 12px;
        border-radius:0;
        box-shadow:none;
        border-bottom:1px solid var(--border);
        font-size:13px; /* lock all tabs to same size — active and inactive */
    }
    .tab-btn:last-of-type { border-bottom:none; }
    .tab-btn.active {
        background:linear-gradient(90deg,var(--brand-dim),transparent);
        color:var(--brand);
        box-shadow:none;
        /* NO font-size here — inherits 13px from .tab-btn above */
    }
    .tab-btn.active::after {
        display:block !important;
        position:absolute;
        top:20%; bottom:20%; left:0; right:auto;
        width:3px; height:auto;
        border-radius:0 2px 2px 0;
        background:var(--brand);
        content:'';
    }
    .tab-icon { font-size:16px !important; width:18px; height:18px; text-align:center; flex-shrink:0; }
    .tab-btn .tab-label,
    .tab-btn.active .tab-label { font-size:13px !important; font-weight:500 !important; color:var(--text-2); max-width:none; }
    .tab-btn.active .tab-label { color:var(--brand); }
    html[data-theme="light"] .tab-btn.active { background:white; box-shadow:none; }
    html[data-theme="light"] .tab-btn.active .tab-label { color:#4f46e5; }
    html[data-theme="light"] .tab-btn.active::after { background:#4f46e5; }
}

/* ── Tab panels ────────────────────────────────────────────────────────── */
.tab-panels-wrap {
    flex:1; display:flex; flex-direction:column;
    min-height:0; min-width:0; overflow:hidden;
}
.tab-panel { display:none; flex-direction:column; min-height:0; }
.tab-panel.active {
    display:flex; flex-direction:column;
    overflow-y:auto; padding:12px;
    flex:1; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--border-2) transparent;
}
#tab-panel-inv.active  { overflow-y:auto; padding:0; flex:1; min-height:0; max-height:100%; }
#tab-panel-cg.active   { padding:10px 12px; }

/* ── Welcome / error / loading ─────────────────────────────────────────── */
#welcomeMsg { text-align:center; padding:48px 24px; color:var(--text-3); }
.error {
    background:rgba(239,68,68,0.1); color:#fca5a5;
    padding:12px 16px; border-radius:var(--radius); margin:12px 0;
    border-left:3px solid var(--loss); font-size:var(--fs-sm);
}
.loading { text-align:center; padding:32px; font-size:var(--fs-lg); color:var(--brand); }
.inv-loading { text-align:center; padding:20px; color:var(--brand); font-size:var(--fs-sm); }

/* ── Investment Summary ─────────────────────────────────────────────────── */
.inv-section {
    border-radius:0;
    flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.inv-section-header {
    background:var(--surface-2); border-bottom:1px solid var(--border);
    color:var(--text); padding:6px 12px;
    display:none; /* hidden on mobile */
    align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:5px; flex-shrink:0;
    min-height:38px;
}
@media(min-width:768px) { .inv-section-header { display:flex; } }
.inv-section-header h3 { font-size:var(--fs-sm); font-weight:700; margin:0; }
.inv-section-subtitle  { font-size:11px; color:var(--text-2); margin-top:0; display:none; }
@media(min-width:600px){ .inv-section-subtitle { display:block; font-size:var(--fs-xs); } }
.inv-header-right      { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.inv-price-status {
    font-size:var(--fs-xs); background:var(--surface-3);
    border-radius:6px; padding:3px 8px; font-weight:600;
    color:var(--text-2); border:1px solid var(--border);
}
.inv-actions {
    display:flex; gap:6px; padding:6px 10px;
    background:var(--surface-2); border-bottom:1px solid var(--border);
    flex-wrap:nowrap; align-items:center; flex-shrink:0; min-height:40px;
    overflow-x:auto; scrollbar-width:none;
    justify-content:flex-start;
}
.inv-actions::-webkit-scrollbar { display:none; }
.inv-actions-label {
    font-size:var(--fs-xs); font-weight:700; color:var(--text-3);
    white-space:nowrap; text-transform:uppercase; letter-spacing:0.06em;
    display:none;                               /* hidden on mobile */
}
@media(min-width:600px){ .inv-actions-label { display:inline; } }
.inv-actions-divider { width:1px; height:12px; background:var(--border-2); margin:0 2px; }

/* Download buttons */
.btn-download {
    background:rgba(16,185,129,0.14); color:var(--gain);
    border:1px solid rgba(16,185,129,0.25); padding:4px 9px; border-radius:6px;
    font-size:var(--fs-xs); font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:4px; font-family:var(--ff);
}
.btn-download--inv   { background:rgba(99,102,241,0.14)!important; color:#a5b4fc!important; border-color:rgba(99,102,241,0.25)!important; }
.btn-download--div   { background:rgba(59,130,246,0.14)!important; color:#93c5fd!important; border-color:rgba(59,130,246,0.25)!important; }
.btn-download--combo { background:linear-gradient(135deg,rgba(139,92,246,0.18),rgba(99,102,241,0.14))!important; color:#c4b5fd!important; border:1px solid rgba(139,92,246,0.3)!important; }

/* Totals bar */
.inv-totals-bar {
    display:flex; gap:0; flex-wrap:nowrap;
    border-top:1px solid var(--border); background:var(--surface-2); flex-shrink:0;
    overflow-x:auto; scrollbar-width:none;
}
.inv-totals-bar::-webkit-scrollbar { display:none; }
.inv-total-cell { flex:1; min-width:68px; padding:6px 8px; border-right:1px solid var(--border); text-align:center; }
.inv-total-cell:last-child { border-right:none; }
.inv-total-label { font-size:11px; color:var(--text-3); font-weight:500; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.inv-total-value { font-size:clamp(12px,2.5vw,14px); font-weight:700; color:var(--text); line-height:1.2; font-family:var(--mono); }
.inv-total-value.gain { color:var(--gain); }
.inv-total-value.loss { color:var(--loss); }
.inv-total-value.blue { color:#a5b4fc; }

.inv-body {
    flex:1; overflow:hidden; min-height:0;
    display:flex; flex-direction:column;
}
/* Cards view: full scroll */
.inv-body.cards-mode {
    overflow-y:auto !important;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}

/* ── Investment cards ──────────────────────────────────────────────────── */
.inv-cards-grid {
    display:grid;
    grid-template-columns:1fr 1fr;   /* mobile portrait: 2 cols */
    gap:8px; padding:10px; background:var(--surface);
}
/* Mobile portrait wide: 3 cols */
@media(min-width:480px) and (max-width:767px) and (orientation:portrait) {
    .inv-cards-grid { grid-template-columns:repeat(3,1fr); }
}
/* Phone landscape (< 768px wide when rotated): 4 cols */
@media(orientation:landscape) and (max-width:767px) {
    .inv-cards-grid { grid-template-columns:repeat(4,1fr); gap:6px; padding:8px; }
}
/* Tablet portrait (768–1023px): 4 cols */
@media(min-width:768px) and (max-width:1023px) and (orientation:portrait) {
    .inv-cards-grid { grid-template-columns:repeat(4,1fr); gap:6px; }
}
/* Touch-device landscape (tablets at any width): max 5 cols */
@media(pointer:coarse) and (orientation:landscape) and (min-width:768px) {
    .inv-cards-grid { grid-template-columns:repeat(5,1fr); gap:6px; padding:8px; }
}
/* Desktop portrait (1024px+, fine pointer): 4 cols */
@media(min-width:1024px) and (orientation:portrait) and (pointer:fine) {
    .inv-cards-grid { grid-template-columns:repeat(4,1fr); gap:6px; }
}
/* Desktop landscape (fine pointer): 8 cols */
@media(min-width:1024px) and (orientation:landscape) and (pointer:fine) {
    .inv-cards-grid { grid-template-columns:repeat(8,1fr); gap:5px; padding:6px; }
}
/* Large desktop: auto-fill */
@media(min-width:1400px) {
    .inv-cards-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
}

.inv-card {
    border-radius:var(--radius); overflow:hidden;
    background:var(--surface-2); border:1px solid var(--border);
    display:flex; flex-direction:column;
}
.inv-card-metrics { flex:1; }
.inv-card-header {
    background:#1c2030;
    color:white; padding:8px 10px;
    display:flex; align-items:flex-start; justify-content:space-between;
}
.inv-card-ticker { font-size:clamp(13px,3.5vw,16px); font-weight:700; letter-spacing:0.03em; line-height:1.2; }
.inv-card-shares { font-size:var(--fs-xs); opacity:0.75; margin-top:2px; white-space:nowrap; }
.inv-card-name   { font-size:var(--fs-xs); opacity:0.65; max-width:80px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-card-metrics {
    flex:1; display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.inv-metric {
    padding:6px 8px;
    border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.inv-metric:nth-child(even) { border-right:none; }
.inv-metric:nth-last-child(-n+2) { border-bottom:none; }
.inv-metric-label { font-size:11px; color:var(--text-3); font-weight:500; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.inv-metric-value { font-size:clamp(12px,2.5vw,13px); font-weight:700; color:var(--text); font-family:var(--mono); }

.inv-card-pnl {
    padding:5px 10px;
    display:flex; align-items:center; justify-content:space-between; font-weight:700;
}
.inv-card-pnl.gain { background:#059669; color:white; }
.inv-card-pnl.loss { background:#dc2626; color:white; }
.inv-card-pnl.neutral { background:var(--surface-3); color:var(--text-2); }
.inv-card-pnl-label  { font-size:var(--fs-xs); opacity:0.8; }
.inv-card-pnl-values { text-align:right; }
.inv-card-pnl-amount { font-size:clamp(10px,2vw,12px); font-family:var(--mono); }
.inv-card-pnl-pct    { font-size:var(--fs-xs); opacity:0.85; font-family:var(--mono); }

.inv-price-pill {
    display:inline-flex; align-items:center; gap:3px;
    background:#1c2030; border:1px solid rgba(129,140,248,0.3);
    color:#818cf8; border-radius:6px; padding:2px 8px;
    font-size:var(--fs-xs); font-weight:600;
}
.inv-price-pill.unavail { background:var(--surface-3); color:var(--text-3); border:1px solid var(--border); }

/* ── Treemap ───────────────────────────────────────────────────────────── */
#invTreemapContainer {
    display:none; padding:0; background:var(--surface);
    flex:1; min-height:0; flex-direction:column;
}
.treemap-scroll-wrap {
    width:100%; border-radius:0; background:var(--surface);
    box-sizing:border-box; overflow:hidden;
    height:100%; display:flex; flex-direction:column;
}
.treemap-canvas-wrap {
    position:relative; width:100%; line-height:0;
    box-sizing:border-box; overflow:hidden;
    flex:1; min-height:0;
}
.treemap-canvas-wrap canvas {
    display:block; cursor:pointer;
    width:100% !important;
}

/* ── Treemap tap → bottom-sheet card (mobile) ──────────────────────────── */
#tm-stock-detail {
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(0,0,0,0.65); backdrop-filter:blur(4px);
    align-items:flex-end; justify-content:center;
}
#tm-stock-detail.visible { display:flex; }
.tm-detail-sheet {
    background:var(--surface-2);
    border-radius:20px 20px 0 0;
    border:1px solid var(--border-2); border-bottom:none;
    width:100%; max-width:600px;
    max-height:88vh; overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom,16px);
    animation:slideUp 0.2s ease-out;
}
@keyframes slideUp {
    from{transform:translateY(40px);opacity:0}
    to{transform:translateY(0);opacity:1}
}
.tm-detail-handle {
    width:34px; height:4px; background:var(--border-2);
    border-radius:2px; margin:10px auto 0;
}
.tm-detail-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px 6px;
}
.tm-detail-back {
    display:flex; align-items:center; gap:6px;
    background:var(--surface-3); border:1px solid var(--border-2);
    border-radius:8px; padding:6px 12px;
    font-size:var(--fs-sm); font-weight:600; color:var(--text-2);
    cursor:pointer; font-family:var(--ff);
    -webkit-tap-highlight-color:transparent;
}
.tm-detail-content { padding:0 10px 14px; }
@media(min-width:560px) {
    #tm-stock-detail { align-items:center; }
    .tm-detail-sheet { border-radius:20px; border:1px solid var(--border-2); max-width:380px; max-height:90vh; margin:16px; }
}

/* Desktop hover popup */
#tm-card-popup { animation:tmPopIn 0.12s ease-out; }
@keyframes tmPopIn { from{opacity:0;transform:scale(0.95) translateY(4px)} to{opacity:1;transform:scale(1) translateY(0)} }
#tm-card-popup .inv-card { box-shadow:0 12px 40px rgba(0,0,0,0.6); border-radius:12px; border:1px solid var(--border-2); }
.tm-popup-card.inv-card       { width:290px!important; }
.tm-popup-card .inv-card-header{ padding:8px 11px; }
.tm-popup-card .inv-card-ticker{ font-size:15px; }
.tm-popup-card .inv-metric     { padding:5px 9px; }
.tm-popup-card .inv-metric-label{ font-size:11px; }
.tm-popup-card .inv-metric-value{ font-size:13px; }
.tm-popup-card .inv-card-pnl   { padding:5px 11px; }

.tm-tt-row   { display:flex; justify-content:space-between; gap:14px; }
.tm-tt-label { color:#93c5fd; }

/* Treemap legend */
.treemap-legend {
    display:flex; gap:6px; flex-wrap:wrap; align-items:center;
    padding:6px 10px; background:var(--surface);
    border-top:1px solid var(--border);
    font-size:11px; font-weight:400;
    color:rgba(255,255,255,0.5); letter-spacing:0.02em;
    flex-shrink:0;
}
.tm-legend-grad { display:inline-flex; align-items:center; gap:4px; }
.tm-legend-bar  { width:56px; height:6px; border-radius:3px; display:inline-block; }
.tm-legend-bar--gain { background:linear-gradient(to right,#86efac,#15803d); }
.tm-legend-bar--loss { background:linear-gradient(to right,#fca5a5,#7f1d1d); }
.tm-legend-sep  { width:1px; height:10px; background:var(--border); margin:0 3px; }
.tm-legend-swatch { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.tm-legend-item { display:flex; align-items:center; gap:3px; }

/* Tooltip overlay */
.inv-ttip-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:12px; height:12px; background:var(--surface-3); color:#a5b4fc;
    border-radius:50%; font-size:11px; font-weight:700;
    cursor:default; margin-left:3px; vertical-align:middle; flex-shrink:0;
    border:1px solid var(--border-2);
}
.inv-ttip-box { display:none; }
#inv-ttip-overlay {
    display:none; position:fixed;
    background:var(--surface-3); color:var(--text);
    border:1px solid var(--border-2); border-radius:8px;
    padding:8px 11px; font-size:var(--fs-xs); line-height:1.6;
    white-space:nowrap; z-index:9998;
    box-shadow:0 6px 24px rgba(0,0,0,0.5);
    min-width:160px; pointer-events:none;
}
#inv-ttip-overlay::after { content:''; position:absolute; border:6px solid transparent; }
#inv-ttip-overlay.arr-down::after { top:100%; left:50%; transform:translateX(-50%); border-top-color:var(--surface-3); }
#inv-ttip-overlay.arr-up::after   { bottom:100%; left:50%; transform:translateX(-50%); border-bottom-color:var(--surface-3); }
.inv-ttip-row { display:flex; justify-content:space-between; gap:12px; }
.inv-ttip-row.ttip-total { border-top:1px solid var(--border-2); margin-top:4px; padding-top:4px; font-weight:700; color:var(--text); }
.inv-ttip-sym { color:#93c5fd; }

/* ── Misc UI ────────────────────────────────────────────────────────────── */
h2 { font-size:var(--fs-xl); color:var(--text); }
.subtitle { opacity:0.7; font-size:var(--fs-sm); color:var(--text-2); }
.section-heading { display:flex; align-items:center; gap:6px; margin-top:0; margin-bottom:8px; }
.section-heading h2 { margin:0; font-size:var(--fs-lg); font-weight:700; color:var(--text); }

/* Info tooltip */
.info-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; background:var(--brand-dim); color:#a5b4fc;
    border-radius:50%; border:1px solid rgba(99,102,241,0.3);
    font-size:11px; font-weight:700; cursor:pointer;
    vertical-align:middle; margin-left:6px; flex-shrink:0;
}
#info-tooltip-overlay {
    display:none; position:fixed; z-index:99999;
    width:min(350px,90vw); background:var(--surface-3); color:var(--text);
    border:1px solid var(--border-2); border-radius:10px;
    padding:14px 16px; font-size:var(--fs-xs); font-weight:400;
    line-height:1.6; box-shadow:0 8px 32px rgba(0,0,0,0.5); pointer-events:none;
}
#info-tooltip-overlay::before { content:''; position:absolute; border:7px solid transparent; }
#info-tooltip-overlay.arrow-left::before  { left:-7px; top:14px; border-right-color:var(--surface-3); }
#info-tooltip-overlay.arrow-right::before { right:-7px; top:14px; border-left-color:var(--surface-3); }
#info-tooltip-overlay.arrow-bottom::before{ bottom:-7px; left:18px; border-top-color:var(--surface-3); }
#info-tooltip-overlay h4  { color:#93c5fd; margin-bottom:8px; font-size:var(--fs-sm); }
#info-tooltip-overlay ul  { margin-left:14px; }
#info-tooltip-overlay li  { margin-bottom:4px; }
#info-tooltip-overlay code{ background:var(--surface); padding:1px 4px; border-radius:3px; color:#fde68a; }
#info-tooltip-overlay .tip-note { margin-top:10px; padding:7px 10px; background:var(--surface); border-radius:6px; border-left:3px solid var(--gain); }

/* CG controls */
.cg-controls-panel { background:var(--surface-2); border-radius:var(--radius); padding:10px 14px; margin-bottom:12px; border:1px solid var(--border); }
.cg-controls-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cg-ctrl-group   { display:flex; align-items:center; gap:6px; }
.cg-ctrl-label   { font-size:var(--fs-xs); font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; white-space:nowrap; }
.cg-btn-group    { display:flex; align-items:center; gap:3px; }
.cg-controls-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; margin:0 4px; }

.method-btn {
    background:var(--surface-3); color:var(--text-2);
    border:1px solid var(--border-2); padding:5px 10px; border-radius:6px;
    font-size:var(--fs-xs); font-weight:600; cursor:pointer; font-family:var(--ff);
}
.method-btn.active { background:var(--brand); color:white; border-color:var(--brand); }
.cg-controls-panel .method-btn { color:var(--text-2); }
.cg-controls-panel .method-btn.active { color:white; }
.cg-controls-panel .info-btn { margin-left:auto; }

/* Deemed dates */
.deemed-date-wrap { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.deemed-date-input {
    background:var(--surface-3); color:var(--text-2);
    border:1px solid var(--border-2); border-radius:6px;
    padding:5px 8px; font-size:var(--fs-xs); font-weight:600;
    font-family:var(--ff); cursor:pointer; outline:none;
    width:112px; color-scheme:dark;
}
.deemed-date-input:focus  { border-color:var(--brand); color:var(--text); }
.deemed-date-input.has-value { background:var(--brand-dim); border-color:var(--brand); color:#a5b4fc; }
.deemed-clear-btn {
    background:rgba(239,68,68,0.1); color:#fca5a5;
    border:1px solid rgba(239,68,68,0.2); border-radius:6px;
    padding:4px 7px; font-size:var(--fs-xs); font-weight:600;
    cursor:pointer; font-family:var(--ff); display:none; white-space:nowrap;
}
.deemed-clear-btn.visible { display:inline-flex; align-items:center; gap:3px; }
#deemedActiveBanner {
    display:none; align-items:center; gap:8px;
    padding:6px 12px; background:var(--brand-dim);
    border:1px solid rgba(99,102,241,0.25); border-radius:var(--radius);
    margin-bottom:10px; font-size:var(--fs-xs); font-weight:600; color:#a5b4fc; flex-wrap:wrap;
}
#deemedActiveBanner.visible { display:flex; }
#deemedActiveBanner .banner-tag {
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:white; border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700; white-space:nowrap;
}

/* CGT summary cards */
.summary-cards {
    display:grid; grid-template-columns:1fr 1fr;
    gap:8px; margin-bottom:12px;
}
@media(min-width:480px){ .summary-cards { grid-template-columns:repeat(3,1fr); } }
@media(min-width:768px){ .summary-cards { grid-template-columns:repeat(6,1fr); } }

.card { background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:var(--radius); }
.card.positive { background:var(--gain-dim); border-color:rgba(16,185,129,0.2); }
.card.negative { background:var(--loss-dim); border-color:rgba(239,68,68,0.2); }
.card-label { font-size:11px; color:var(--text-3); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.06em; font-weight:500; }
.card-value { font-size:clamp(12px,2.5vw,14px); font-weight:700; word-break:break-all; line-height:1.2; color:var(--text); font-family:var(--mono); }
.card.positive .card-value { color:var(--gain); }
.card.negative .card-value { color:var(--loss); }

/* FY accordion */
.fy-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:6px; overflow:hidden; }
.fy-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; cursor:pointer; flex-wrap:wrap; gap:6px; min-height:44px; }
.fy-header-left { display:flex; align-items:center; gap:8px; }
.fy-chevron { font-size:12px; transition:transform 0.2s; flex-shrink:0; color:var(--text-3); }
.fy-chevron.expanded { transform:rotate(90deg); }
.fy-title { font-size:var(--fs-sm); font-weight:700; color:var(--brand); background:var(--brand-dim); padding:2px 8px; border-radius:5px; }
.fy-summary-stats { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.fy-summary-stat { text-align:right; }
.fy-summary-label { font-size:11px; color:var(--text-3); margin-bottom:1px; white-space:nowrap; text-transform:uppercase; letter-spacing:0.04em; }
.fy-summary-value { font-size:11px; font-weight:700; line-height:1.2; color:var(--text); font-family:var(--mono); }
.fy-content { display:none; padding:0 12px 12px; border-top:1px solid var(--border); background:var(--surface); }
.fy-content.expanded { display:block; }
.fy-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:6px; margin:10px 0 6px; }
.fy-stat { text-align:center; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:6px 8px; }
.fy-stat-label { font-size:11px; color:var(--text-3); margin-bottom:2px; text-transform:uppercase; letter-spacing:0.04em; }
.fy-stat-value { font-size:12px; font-weight:700; color:var(--text); font-family:var(--mono); }
.fy-actions { display:flex; gap:5px; margin:8px 0; flex-wrap:wrap; }

/* Dividend accordion */
.fy-card--div { border-color:rgba(59,130,246,0.2); }
.fy-card--div .fy-header { background:rgba(59,130,246,0.06); }
.fy-card--div .fy-content { border-top-color:rgba(59,130,246,0.2); background:var(--surface); }
.fy-card--div .fy-title { color:#93c5fd; }
.div-two-col { display:grid; grid-template-columns:minmax(130px,auto) 1fr; gap:10px; align-items:start; margin-top:8px; }
@media(max-width:560px){ .div-two-col { grid-template-columns:1fr; } }
.div-two-col .col-label { font-size:11px; font-weight:600; color:#93c5fd; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.06em; }
.div-two-col th { background:var(--surface-3); color:var(--text-2); font-size:11px; padding:6px 8px; border-bottom:1px solid var(--border-2); }
.div-two-col td { font-size:var(--fs-xs); padding:4px 8px; }
.div-two-col tfoot td { background:rgba(37,99,235,0.1); font-weight:700; color:#93c5fd; border-top:1px solid rgba(37,99,235,0.2); font-size:var(--fs-xs); }
.div-overall-bar { background:var(--surface-3); border:1px solid var(--border-2); color:var(--text); border-radius:var(--radius); padding:8px 14px; margin-bottom:10px; display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.div-overall-bar .bar-item { text-align:center; flex:1; min-width:68px; padding:2px 8px; border-right:1px solid rgba(255,255,255,0.12); }
.div-overall-bar .bar-item:last-child { border-right:none; }
.div-overall-bar .bar-label { font-size:11px; opacity:0.8; margin-bottom:1px; text-transform:uppercase; letter-spacing:0.04em; }
.div-overall-bar .bar-value { font-size:14px; font-weight:700; font-family:var(--mono); }
.btn-download--div { background:rgba(59,130,246,0.14)!important; color:#93c5fd!important; border-color:rgba(59,130,246,0.25)!important; }
.div-section { margin-top:12px; border:1px solid rgba(59,130,246,0.2); border-radius:var(--radius); overflow:hidden; }
.div-section-header { background:rgba(37,99,235,0.1); padding:8px 14px; font-size:var(--fs-sm); font-weight:600; color:#93c5fd; display:flex; align-items:center; gap:6px; }
.div-section table { box-shadow:none; margin-top:0; border-radius:0; }
.div-section th { background:var(--surface-3); color:var(--text-2); font-size:var(--fs-xs); border-bottom:1px solid var(--border-2); }

/* Tables */
table { width:100%; border-collapse:collapse; margin-top:10px; background:var(--surface-2); border-radius:var(--radius); overflow:hidden; font-size:var(--fs-sm); }
th { background:var(--surface-3); color:var(--text-2); padding:var(--pad-cell); text-align:left; font-weight:600; font-size:var(--fs-xs); white-space:normal; border-bottom:1px solid var(--border-2); }
td { padding:var(--pad-cell); border-bottom:1px solid var(--border); font-size:var(--fs-sm); color:var(--text); }
tr:last-child td { border-bottom:none; }
.gain { color:var(--gain); font-weight:600; }
.loss { color:var(--loss); font-weight:600; }
.col-balance { background:rgba(99,102,241,0.1)!important; font-weight:700; color:#a5b4fc; white-space:nowrap; }
th.col-balance { background:var(--surface-3)!important; color:#a5b4fc; border-bottom:1px solid var(--border-2); }
th.sortable { cursor:pointer; user-select:none; position:relative; padding-right:18px!important; }
th.sortable::after { content:'⇅'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:8px; opacity:0.4; }
th.sortable.sort-asc::after  { content:'▲'; opacity:1; }
th.sortable.sort-desc::after { content:'▼'; opacity:1; }
.term-short { display:inline-block; padding:2px 6px; border-radius:4px; background:rgba(245,158,11,0.12); color:var(--amber); border:1px solid rgba(245,158,11,0.2); font-size:var(--fs-xs); font-weight:700; white-space:nowrap; }
.term-long  { display:inline-block; padding:2px 6px; border-radius:4px; background:var(--gain-dim); color:var(--gain); border:1px solid rgba(16,185,129,0.2); font-size:var(--fs-xs); font-weight:700; white-space:nowrap; }
tr.row-buy  td { background:rgba(16,185,129,0.04); }
tr.row-sell td { background:rgba(239,68,68,0.04); }
tr.row-split td { background:rgba(245,158,11,0.04); }
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fy-content .table-wrap { max-height:60vh; overflow-y:auto; overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.fy-table { margin-top:0; border-radius:0; box-shadow:none; border:none; background:var(--surface-2); }
.fy-table th { font-size:11px; padding:6px 12px 6px 5px; white-space:normal; word-break:break-word; hyphens:auto; vertical-align:bottom; line-height:1.3; min-width:0; background:var(--surface-3); color:var(--text-2); border-bottom:1px solid var(--border-2); }
.fy-table thead tr  { position:sticky; top:0; z-index:4; }
.fy-table thead th  { position:sticky; top:0; z-index:4; box-shadow:0 1px 0 rgba(0,0,0,0.3); background-clip:padding-box; }
.fy-table th.col-balance { position:sticky; top:0; z-index:4; }
.fy-table th.sortable { padding-right:12px!important; }
.fy-table th.sortable::after { right:3px; font-size:7px; }
.fy-table td { font-size:var(--fs-xs); padding:3px 5px; font-family:var(--mono); }
.fy-table td[data-sort] { white-space:nowrap; }
.fy-table td:nth-child(1),.fy-table th:nth-child(1) { min-width:44px; }
.fy-table td:nth-child(2),.fy-table th:nth-child(2),
.fy-table td:nth-child(3),.fy-table th:nth-child(3) { min-width:56px; }

/* Split notices */
.split-notice { background:rgba(245,158,11,0.08); border-left:3px solid var(--amber); color:#fcd34d; padding:8px 12px; border-radius:6px; margin-bottom:8px; font-size:var(--fs-xs); }

/* Ledger */
.ledger-header { display:flex; align-items:center; justify-content:space-between; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 16px; cursor:pointer; margin-top:20px; margin-bottom:0; user-select:none; }
.ledger-header-left { display:flex; align-items:center; gap:10px; }
.ledger-header h2   { margin:0; font-size:var(--fs-xl); }
.ledger-chevron     { font-size:14px; transition:transform 0.25s; color:var(--brand); }
.ledger-chevron.open { transform:rotate(90deg); }
.ledger-body        { display:none; margin-top:10px; }
.ledger-body.open   { display:block; }

/* ── Parcel & Ledger — fully static scrollable tables ──────────────────── */
#tab-panel-parcel.active,
#tab-panel-ledger.active {
    overflow:hidden; padding:12px;
    flex-direction:column;
}
#tab-panel-parcel .table-wrap,
#tab-panel-ledger .table-wrap {
    flex:1; overflow:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--border);
    border-radius:var(--radius);
    min-height:0;
}
#parcelTable,
#ledgerTable {
    width:max-content; min-width:100%;
    border-collapse:collapse; margin:0;
    border-radius:0; background:var(--surface-2);
    table-layout:auto;
}
#parcelTable th,
#ledgerTable th {
    position:sticky; top:0; z-index:4;
    background:var(--surface-3); color:var(--text-2);
    font-size:var(--fs-xs); font-weight:600;
    letter-spacing:0.06em; text-transform:uppercase;
    padding:8px 10px; white-space:nowrap;
    border-bottom:1px solid var(--border-2);
    box-shadow:0 1px 0 var(--border-2);
}
#parcelTable td,
#ledgerTable td {
    padding:8px 10px; white-space:nowrap;
    border-bottom:1px solid var(--border);
    font-size:var(--fs-xs); vertical-align:middle;
}
#parcelTable tbody tr:last-child td,
#ledgerTable tbody tr:last-child td { border-bottom:none; }
/* Touch: no hover changes on these rows ever */
#parcelTable tbody tr:hover td,
#ledgerTable tbody tr:hover td { background:inherit !important; }
@media(pointer:fine) {
    #parcelTable tbody tr:hover td,
    #ledgerTable tbody tr:hover td { background:rgba(255,255,255,0.04) !important; }
    html[data-theme="light"] #parcelTable tbody tr:hover td,
    html[data-theme="light"] #ledgerTable tbody tr:hover td { background:#f5f3ef !important; }
}

/* ── Smooth state transitions ──────────────────────────────────────────── */
.tab-btn, .method-btn, .view-toggle-btn, .ccy-btn, .fileccy-btn,
.btn-upload, .btn-download, .btn-newfile, .ccy-select {
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

/* General buttons */
.btn { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:white; border:none; padding:9px 20px; border-radius:var(--radius); font-size:var(--fs-base); cursor:pointer; margin:5px 3px; font-family:var(--ff); }
.btn-secondary { background:var(--surface-3); border:1px solid var(--border-2); color:var(--text-2); }
.tab-panel-dup-placeholder { display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */
#loginScreen {
    position:fixed; inset:0; z-index:10000;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); font-family:var(--ff);
}
#loginScreen::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 30% 40%,rgba(99,102,241,0.15) 0%,transparent 60%),
               radial-gradient(ellipse at 70% 60%,rgba(139,92,246,0.1) 0%,transparent 60%);
    pointer-events:none;
}
.login-card {
    background:var(--surface-2); border:1px solid var(--border-2); border-radius:22px;
    padding:38px 34px 30px; width:min(420px,92vw);
    box-shadow:0 24px 64px rgba(0,0,0,0.6);
    text-align:center; display:flex; flex-direction:column; gap:0; position:relative;
}
.login-logo { font-size:44px; margin-bottom:10px; line-height:1; }
.login-card h1 {
    font-size:clamp(22px,5vw,28px); font-weight:800;
    margin-bottom:4px; letter-spacing:-0.01em;
    font-family:'Montserrat', var(--ff);
}
.login-card h1 .logo-portfolio { color: var(--text); }
.login-card h1 .logo-iq        { color: var(--brand); }
html[data-theme="light"] .login-card h1 .logo-portfolio { color: var(--text); }
html[data-theme="light"] .login-card h1 .logo-iq        { color: var(--brand); }
.login-tagline { font-size:var(--fs-sm); color:var(--text-2); margin-bottom:26px; }
.login-divider-label { font-size:11px; color:var(--text-3); margin:16px 0; display:flex; align-items:center; gap:10px; }
.login-divider-label::before,.login-divider-label::after { content:''; flex:1; height:1px; background:var(--border); }
.btn-signin {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:12px 20px; border-radius:12px; border:1px solid var(--border-2);
    background:var(--surface-3); color:var(--text);
    font-family:var(--ff); font-size:var(--fs-md); font-weight:600;
    cursor:pointer; margin-bottom:10px;
    -webkit-tap-highlight-color:transparent;
}
.btn-signin:active { opacity:0.75; }
.btn-signin-icon { width:20px; height:20px; flex-shrink:0; }
#authError { display:none; background:var(--loss-dim); color:#fca5a5; border:1px solid rgba(239,68,68,0.2); border-radius:8px; padding:10px 14px; font-size:var(--fs-sm); margin-top:8px; text-align:left; }
.login-privacy-note { margin-top:16px; font-size:11px; color:var(--text-3); line-height:1.6; }

/* Header user */
.header-user { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-user-name { font-size:var(--fs-xs); font-weight:500; color:var(--text-2); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:none; }
@media(min-width:480px){ .header-user-name { display:block; } }
#signOutBtn { display:none; align-items:center; gap:4px; background:var(--surface-3); border:1px solid var(--border-2); color:var(--text-2); border-radius:8px; padding:4px 10px; font-size:var(--fs-xs); font-weight:600; cursor:pointer; font-family:var(--ff); }

/* ── Dark/Light mode toggle button ──────────────────────────────────── */
.btn-theme-toggle {
    display:flex; align-items:center; gap:5px;
    background:var(--surface-3); border:1px solid var(--border-2);
    border-radius:8px; padding:4px 10px;
    font-size:var(--fs-xs); font-weight:600; color:var(--text-2);
    cursor:pointer; font-family:var(--ff);
    white-space:nowrap; flex-shrink:0;
}
.btn-theme-toggle:active { opacity:0.7; }

/* ── Summary bubble cards ─────────────────────────────────────────────── */
#summary-bubbles {
    display:none;
    padding:8px 8px 0;
    flex-shrink:0;
}
#summary-bubbles.visible { display:block; }

.bubble-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
@media(min-width:560px) { .bubble-grid { grid-template-columns:repeat(4,1fr); } }

/* Dark mode bubbles — clean card with coloured top border */
.bubble {
    border-radius:10px;
    padding:12px 14px 10px;
    position:relative; overflow:hidden;
    background:var(--surface-2);
    border:1px solid var(--border-2);
    border-top-width:3px;
}
.bubble.bubble-port  { border-top-color:#818cf8; }
.bubble.bubble-gain  { border-top-color:var(--gain); }
.bubble.bubble-loss  { border-top-color:var(--loss); }
.bubble.bubble-neutral { border-top-color:#60a5fa; }
.bubble.bubble-brand { border-top-color:var(--brand); }

.bubble-label {
    font-size:11px; font-weight:500; letter-spacing:0.06em;
    text-transform:uppercase; color:rgba(255,255,255,0.5);
    margin-bottom:5px;
}
.bubble-value {
    font-size:clamp(16px,4vw,24px);
    font-weight:700; letter-spacing:-0.02em;
    line-height:1; color:var(--text);
    font-family:var(--mono);
}
.bubble.bubble-port  .bubble-value { color:#a5b4fc; }
.bubble.bubble-gain  .bubble-value { color:var(--gain); }
.bubble.bubble-loss  .bubble-value { color:var(--loss); }
.bubble.bubble-brand .bubble-value { color:#a5b4fc; }
.bubble-sub {
    font-size:11px; color:rgba(255,255,255,0.4);
    margin-top:3px; font-weight:400;
}

/* Light mode bubbles — clean white card with coloured top border accent */
html[data-theme="light"] .bubble                { background:white; border:1px solid #ddd9d2; border-top-width:3px; }
html[data-theme="light"] .bubble.bubble-port    { background:white; border-color:#ddd9d2; border-top-color:#4f46e5; }
html[data-theme="light"] .bubble.bubble-gain    { background:white; border-color:#ddd9d2; border-top-color:#059669; }
html[data-theme="light"] .bubble.bubble-loss    { background:white; border-color:#ddd9d2; border-top-color:#dc2626; }
html[data-theme="light"] .bubble.bubble-neutral { background:white; border-color:#ddd9d2; border-top-color:#2563eb; }
html[data-theme="light"] .bubble.bubble-brand   { background:white; border-color:#ddd9d2; border-top-color:#7c3aed; }
html[data-theme="light"] .bubble-label          { color:#888; }
html[data-theme="light"] .bubble-sub            { color:#aaa; }
html[data-theme="light"] .bubble-value          { color:#111; }
html[data-theme="light"] .bubble.bubble-port    .bubble-value { color:#4f46e5; }
html[data-theme="light"] .bubble.bubble-gain    .bubble-value { color:#059669; }
html[data-theme="light"] .bubble.bubble-loss    .bubble-value { color:#dc2626; }
html[data-theme="light"] .bubble.bubble-brand   .bubble-value { color:#7c3aed; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SWIPE TAB NAV — replaces bottom button bar on <768px
   Zero active-state layout changes: only text content swaps.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide sidebar tab-nav on mobile + all touch portrait — use swipe nav */
@media(max-width:1023px) {
    .tab-nav { display:none !important; }
}
/* Touch tablets in landscape at any width: restore sidebar, hide swipe nav */
@media(pointer:coarse) and (orientation:landscape) and (min-width:768px) {
    .tab-nav { display:flex !important; }
    .mobile-tab-nav { display:none !important; }
    .content { flex-direction:row !important; }
    .tab-panels-wrap { flex:1 !important; }
}

/* Show swipe nav only on mobile + touch portrait; hide on desktop (fine pointer) */
@media(min-width:1024px) and (pointer:fine) {
    .mobile-tab-nav { display:none !important; }
}

.mobile-tab-nav {
    display:flex;
    align-items:center;
    flex-shrink:0;
    order:99;
    height:60px;
    background:var(--tab-bg);
    border-top:1px solid rgba(255,255,255,0.08);
    padding:0 4px;
    padding-bottom:env(safe-area-inset-bottom,0px);
    position:relative;
    z-index:50;
    box-sizing:border-box;
}
html[data-theme="light"] .mobile-tab-nav {
    background:#eeebe5;
    border-top-color:#ddd9d2;
}

/* Arrow buttons — large tap target, no border, no state change */
.mtn-arrow {
    width:48px; height:48px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; outline:none;
    font-size:24px; font-weight:300; line-height:1;
    color:var(--text-2);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    user-select:none; -webkit-user-select:none;
    border-radius:10px;
    box-sizing:border-box;
}
.mtn-arrow:active { background:rgba(255,255,255,0.06); }
.mtn-arrow.dimmed { opacity:0.2; pointer-events:none; }
html[data-theme="light"] .mtn-arrow { color:#555; }
html[data-theme="light"] .mtn-arrow:active { background:rgba(0,0,0,0.06); }

/* Centre: icon + tab name */
.mtn-center {
    flex:1;
    display:flex; align-items:center; justify-content:center;
    gap:8px;
    height:100%;
    padding-bottom:12px; /* lift above dots */
}
.mtn-icon {
    font-size:20px; line-height:1;
    display:block; width:24px; height:24px;
    text-align:center; flex-shrink:0;
    isolation:isolate;
}
.mtn-title {
    font-size:14px; font-weight:600; line-height:1;
    color:var(--brand);
    white-space:nowrap;
    font-family:var(--ff);
    letter-spacing:-0.01em;
}
html[data-theme="light"] .mtn-title { color:var(--brand); }

/* Progress dots */
.mtn-dots {
    position:absolute;
    bottom:6px;
    left:50%; transform:translateX(-50%);
    display:flex; gap:5px; align-items:center;
}
html[data-theme="light"] .mtn-dots { bottom:5px; }
.mtn-dot {
    width:5px; height:5px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    transition:width 0.2s, border-radius 0.2s, background 0.2s;
    flex-shrink:0;
}
.mtn-dot.active {
    width:16px;
    border-radius:3px;
    background:#6366f1;
}
html[data-theme="light"] .mtn-dot { background:rgba(0,0,0,0.12); }
html[data-theme="light"] .mtn-dot.active { background:#4f46e5; }

/* ── Portrait layout — treemap fills, cards scroll, tab bar always visible ── */
@media(orientation:portrait) {
    .content { flex-direction:column !important; }
    .tab-nav { order:99 !important; flex-shrink:0 !important; min-height:var(--nav-h) !important; }
    .tab-panels-wrap { flex:1 !important; min-height:0 !important; overflow:hidden !important; }

    /* Treemap mode: hard clip so canvas doesn't overflow */
    #tab-panel-inv.active:not(.cards-active) {
        flex:1 !important; min-height:0 !important;
        padding:0 !important; overflow:hidden !important;
    }
    /* Cards mode: allow vertical scroll */
    #tab-panel-inv.active.cards-active {
        flex:1 !important; min-height:0 !important;
        padding:0 !important;
        overflow-y:auto !important; overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
    }

    /* inv-section: treemap clips, cards scrolls through */
    .inv-section:not(.cards-active) { flex:1 !important; min-height:0 !important; overflow:hidden !important; }
    .inv-section.cards-active { flex:1 !important; min-height:0 !important; overflow:visible !important; }

    /* inv-body: treemap clips, cards scrolls */
    .inv-body:not(.cards-mode) { flex:1 !important; min-height:0 !important; overflow:hidden !important; }
    .inv-body.cards-mode { flex:1 !important; min-height:auto !important; overflow:visible !important; }

    /* Treemap containers fill height */
    #invTreemapContainer { flex:1 !important; min-height:0 !important; }
    .treemap-scroll-wrap { flex:1 !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
    .treemap-canvas-wrap { flex:1 !important; min-height:0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NO HOVER ON TOUCH DEVICES
   ═══════════════════════════════════════════════════════════════════════════ */
@media(pointer:coarse){
    *{ -webkit-tap-highlight-color:transparent; }
    /* On touch: kill hover backgrounds/opacity only — never all:unset which wipes layout */
    .btn:hover,.btn-upload:hover,.btn-newfile:hover,
    .btn-download:hover,.btn-signin:hover,
    .method-btn:hover,.ccy-btn:hover,.fileccy-btn:hover,
    .view-toggle-btn:hover,.inv-card:hover {
        opacity:1;
    }
    /* Tab buttons: kill hover highlight but preserve all layout/size styles */
    .tab-btn:hover {
        background:transparent;
    }
    /* FY accordion: no hover tint on touch */
    .fy-header:hover {
        background:inherit;
    }
    /* Table rows: no hover row highlight on touch — critical: do NOT use all:unset */
    tbody tr:hover td {
        background:transparent !important;
    }
    /* Date inputs: no hover state on touch */
    .deemed-date-input:hover {
        border-color:var(--border-2);
    }
}
@media(pointer:fine){
    tbody tr:hover td { background:rgba(255,255,255,0.06)!important; }
    .fy-header:hover  { background:rgba(255,255,255,0.03); }
    .btn-upload:hover,.btn-download:hover { opacity:0.85; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTFOLIO IQ TAB — scoped under .tab-panel#tab-panel-iq
   ═══════════════════════════════════════════════════════════════════════ */

/* IQ tab button accent */
.tab-btn.tab-btn-iq { position: relative; }
.tab-btn.tab-btn-iq .tab-label { font-weight: 700; }
.tab-btn.tab-btn-iq.active {
  background: linear-gradient(135deg, rgba(0,229,196,.18), rgba(124,136,255,.18));
  border-color: rgba(0,229,196,.45);
}
.tab-btn.tab-btn-iq.active .tab-label {
  background: linear-gradient(100deg, #00e5c4 0%, #7c88ff 55%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* IQ CSS variables — dark mode (default) */
#tab-panel-iq {
  --iq-bg: var(--surface);
  --iq-surface: var(--surface-2, #101827);
  --iq-surface2: var(--surface-3, #19253a);
  --iq-border: var(--border-2, #1a2d47);
  --iq-teal: #00e5c4;
  --iq-amber: #f5a623;
  --iq-crimson: #ff3a5c;
  --iq-indigo: #7c88ff;
  --iq-violet: #c084fc;
  --iq-text1: var(--text, #e8f1ff);
  --iq-text2: #8ba3c7;
  --iq-text3: #3d5a7a;
  --iq-r: 10px;
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 100%;
}

/* Light mode overrides for IQ — strong dark text for full readability */
[data-theme="light"] #tab-panel-iq {
  --iq-surface: #ffffff;
  --iq-surface2: #ddeeff;
  --iq-border: #4a90bb;
  --iq-teal: #006b54;
  --iq-amber: #8c4e00;
  --iq-crimson: #9a0e28;
  --iq-indigo: #2030aa;
  --iq-violet: #5500aa;
  --iq-text1: #060e1f;
  --iq-text2: #0e2a48;
  --iq-text3: #1a4060;
}

/* IQ sub-tabs */
.iq-tabs {
  display: flex;
  gap: 5px;
  background: var(--iq-surface);
  border: 1px solid var(--iq-border);
  border-radius: var(--iq-r);
  padding: 5px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.iq-tab {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--iq-text3);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.iq-tab:hover { color: var(--iq-text2); background: var(--iq-surface2); }
.iq-tab.active {
  background: var(--iq-surface2);
  color: var(--iq-text1);
  box-shadow: 0 0 0 1px var(--iq-border);
}

/* IQ panels */
.iq-panel { display: none; flex-direction: column; gap: 14px; animation: iqFadeIn .3s ease; }
.iq-panel.active { display: flex; }
@keyframes iqFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.iq-panel-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.iq-panel-title { font-size: clamp(17.5px, 2.5vw, 22.5px); font-weight: 700; color: var(--iq-text1); }
.iq-panel-desc { font-size: 15.5px; color: var(--iq-text2); max-width: 580px; line-height: 1.55; margin-top: 3px; }

.iq-chart-wrap {
  background: var(--iq-surface);
  border: 1px solid var(--iq-border);
  border-radius: var(--iq-r);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.iq-chart-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 5% 95%, rgba(0,229,196,.025) 0%, transparent 70%);
  pointer-events: none;
}

/* IQ Insights */
.iq-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; }
.iq-insight { background: var(--iq-surface); border: 1px solid var(--iq-border); border-radius: 8px; padding: 12px 15px; display: flex; gap: 9px; align-items: flex-start; }
.iq-ii { font-size: 21px; flex-shrink: 0; }
.iq-it { font-size: 15px; color: var(--iq-text2); line-height: 1.55; }
.iq-it strong { color: var(--iq-text1); font-weight: 700; }

/* ── Panel 0: CGT Sell Queue ── */
.iq-sell-queue { display: flex; flex-direction: column; gap: 7px; }
.iq-sq-hdr {
  display: grid;
  grid-template-columns: 90px 1fr 65px 80px 80px 90px 110px 90px;
  gap: 8px;
  padding: 4px 16px;
  font-size: 12.5px;
  color: var(--iq-text3);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.iq-sq-row {
  display: grid;
  grid-template-columns: 90px 1fr 65px 80px 80px 90px 110px 90px;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  background: var(--iq-surface2);
  border: 1px solid var(--iq-border);
  border-radius: 8px;
  transition: border-color .2s, background .2s;
  cursor: default;
}
.iq-sq-row:hover { background: var(--iq-surface2); filter: brightness(1.08); }
.iq-sq-sym { font-weight: 700; font-size: 16px; color: var(--iq-text1); }
.iq-sq-pid { font-size: 12.5px; font-family: 'Space Mono', monospace; color: var(--iq-text3); margin-top: 2px; }
.iq-sq-track-wrap { position: relative; }
/* Full-height track (default) */
.iq-sq-track { background: var(--iq-surface2); border-radius: 20px; height: 8px; overflow: visible; position: relative; border: 1px solid rgba(255,255,255,.04); }
/* Halved track */
.iq-sq-track-slim { height: 4px !important; }
[data-theme="light"] .iq-sq-track { border-color: rgba(0,0,0,.08); }
.iq-sq-fill { height: 100%; border-radius: 20px; transition: width .9s cubic-bezier(.23,1,.32,1); }
.iq-sq-age { font-family: 'Space Mono', monospace; font-size: 12.5px; color: var(--iq-text2); margin-top: 4px; }
.iq-sq-days-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--iq-text3); font-family: 'Space Mono', monospace; margin-bottom: 2px; }
.iq-cgt-bomb { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; z-index: 2; }
.iq-spark-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 11px; animation: iqBombPulse .7s ease-in-out infinite alternate; }
@keyframes iqBombPulse {
  from { transform: translate(-50%,-50%) scale(.8); filter: brightness(.9); }
  to   { transform: translate(-50%,-50%) scale(1.3); filter: brightness(1.4); }
}
.iq-spark-ray { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; margin: -1.5px 0 0 -1.5px; animation: iqSparkFly 1.3s ease-out infinite; }
@keyframes iqSparkFly {
  0%   { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; }
  60%  { opacity: .9; }
  100% { transform: rotate(var(--a)) translateX(18px) scale(0); opacity: 0; }
}
.iq-sq-gain { font-family: 'Space Mono', monospace; font-size: 15px; font-weight: 700; text-align: right; }
.iq-sq-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.iq-badge-harvest { background: rgba(255,58,92,.15);  color: var(--iq-crimson); border: 1px solid rgba(255,58,92,.35); }
.iq-badge-wait    { background: rgba(245,166,35,.15); color: var(--iq-amber);   border: 1px solid rgba(245,166,35,.4);  }
.iq-badge-sell    { background: rgba(0,200,160,.15);  color: var(--iq-teal);    border: 1px solid rgba(0,180,140,.4);   }
.iq-badge-hold    { background: rgba(80,100,220,.12); color: var(--iq-indigo);  border: 1px solid rgba(60,80,200,.3);   }
.iq-sq-saving     { font-family: 'Space Mono', monospace; font-size: 12.5px; color: var(--iq-teal); text-align: right; }
.iq-sq-saving.neg { color: var(--iq-text3); }

/* ── Panel 1: Bubble Universe ── */
.iq-bubble-canvas-outer { position: relative; border-radius: 8px; overflow: hidden; }
.iq-meadow-bg { display: none !important; } /* sky is drawn directly on canvas now */
#iq-bubble-canvas { display: block; width: 100%; cursor: crosshair; border-radius: 8px; position: relative; z-index: 1; }
.iq-bubble-legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--iq-border); }
.iq-ble { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--iq-text2); }
.iq-bldot { width: 11px; height: 11px; border-radius: 50%; }
#iq-bubble-hint { text-align: center; font-size: 13.5px; color: var(--iq-text3); font-family: 'Space Mono', monospace; margin-top: 6px; letter-spacing: .04em; }
#iq-reset-btn {
  display: none; margin: 8px auto 0; padding: 7px 20px;
  background: var(--iq-surface2); border: 1px solid var(--iq-border);
  color: var(--iq-text2); border-radius: 20px; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 600; transition: all .2s;
}
#iq-reset-btn:hover { background: var(--iq-indigo); color: #fff; border-color: var(--iq-indigo); }

/* ── Panel 2: Timeline River ── */
.iq-tl-wrap { overflow-x: auto; padding-bottom: 6px; }
canvas#iq-tl-canvas { display: block; }
.iq-tl-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--iq-border); }
.iq-tle { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--iq-text2); }
.iq-tle-grad { width: 40px; height: 8px; border-radius: 3px; }
.iq-tle-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Panel 3: Tax Savings Clock ── */
.iq-ts-row { display: grid; grid-template-columns: 80px 1fr 90px; gap: 8px; align-items: center; margin-bottom: 12px; }
.iq-ts-sym { font-size: 15px; font-weight: 700; text-align: right; font-family: 'Space Mono', monospace; }
.iq-ts-bars { display: flex; flex-direction: column; gap: 4px; }
.iq-ts-bar-row { display: flex; align-items: center; gap: 8px; }
.iq-ts-label { font-size: 12.5px; color: var(--iq-text3); width: 32px; flex-shrink: 0; font-family: 'Space Mono', monospace; }
.iq-ts-track { flex: 1; background: var(--iq-surface2); border-radius: 4px; height: 12px; overflow: hidden; }
.iq-ts-bar-now  { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--iq-crimson), rgba(255,58,92,.4)); transition: width .9s cubic-bezier(.23,1,.32,1); }
.iq-ts-bar-wait { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--iq-teal), rgba(0,229,196,.4)); transition: width .9s cubic-bezier(.23,1,.32,1); }
.iq-ts-saving { font-size: 13.5px; font-family: 'Space Mono', monospace; color: var(--iq-teal); font-weight: 700; text-align: right; }
.iq-ts-days-lbl { font-size: 11px; color: var(--iq-text3); font-family: 'Space Mono', monospace; margin-top: 2px; }
.iq-ts-divider { height: 1px; background: var(--iq-border); margin: 6px 0; }
.iq-ts-total-bar { display: flex; align-items: center; justify-content: space-between; background: rgba(0,229,196,.06); border: 1px solid rgba(0,229,196,.2); border-radius: 7px; padding: 10px 16px; margin-top: 8px; }
.iq-ts-total-label { font-size: 15px; color: var(--iq-text2); font-weight: 600; }
.iq-ts-total-val { font-size: 22.5px; font-weight: 800; font-family: 'Space Mono', monospace; color: var(--iq-teal); }

/* IQ Tooltip */
#iq-tooltip {
  position: fixed; pointer-events: none; display: none;
  background: rgba(10,15,24,.97); border: 1px solid var(--iq-border);
  border-radius: 9px; padding: 11px 15px; font-size: 15px;
  color: var(--iq-text1); z-index: 9999;
  box-shadow: 0 12px 40px rgba(0,0,0,.8); max-width: 260px; line-height: 1.6;
  backdrop-filter: blur(8px);
}
#iq-tooltip .iq-tt-title { font-weight: 700; font-size: 17px; margin-bottom: 5px; }
#iq-tooltip .iq-tt-row { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
#iq-tooltip .iq-tv { font-family: 'Space Mono', monospace; font-weight: 700; }
#iq-tooltip .iq-tpos { color: #00e5c4; }
#iq-tooltip .iq-tneg { color: #ff3a5c; }

@media (max-width: 700px) {
  /* Sell queue: show only parcel, progress bar, gain, action on mobile */
  .iq-sq-hdr { grid-template-columns: 70px 1fr 80px 90px; }
  .iq-sq-row { grid-template-columns: 70px 1fr 80px 90px; }
  .iq-sq-hdr span:nth-child(3), .iq-sq-hdr span:nth-child(4), .iq-sq-hdr span:nth-child(5), .iq-sq-hdr span:nth-child(8),
  .iq-sq-row > div:nth-child(3), .iq-sq-row > div:nth-child(4), .iq-sq-row > div:nth-child(5), .iq-sq-row > div:nth-child(8) { display: none; }
  .iq-tabs { gap: 3px; }
  .iq-tab { font-size: 11.5px; padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EXPERIMENTAL TAB — sidebar nav button + bottom placement
   ══════════════════════════════════════════════════════════════════════════ */

/* Spacer that pushes Experi'mental' to the bottom of the sidebar */
.tab-nav-spacer {
    flex: 1;
    min-height: 12px;
    display: none; /* hidden on mobile/tablet bottom-bar */
}
@media (min-width: 1024px) {
    .tab-nav-spacer { display: block; }
}

/* Experimental tab button — distinct bottom-anchored style on desktop */
.tab-btn-exp {
    position: relative;
}
.tab-btn-exp .tab-label {
    letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
    .tab-btn-exp {
        border-top: 1px dashed var(--border) !important;
        border-bottom: none !important;
        margin-top: 0;
    }
    .tab-btn-exp .tab-icon {
        filter: saturate(1.5);
    }
    .tab-btn-exp.active {
        background: linear-gradient(90deg, rgba(139,92,246,0.18), transparent) !important;
        color: #a78bfa !important;
    }
    .tab-btn-exp.active::after {
        background: #a78bfa !important;
    }
    .tab-btn-exp.active .tab-label {
        color: #a78bfa !important;
    }
    html[data-theme="light"] .tab-btn-exp.active {
        background: linear-gradient(90deg, rgba(109,40,217,0.08), transparent) !important;
    }
    html[data-theme="light"] .tab-btn-exp.active .tab-label { color: #6d28d9 !important; }
    html[data-theme="light"] .tab-btn-exp.active::after { background: #6d28d9 !important; }
}

/* Mobile experimental tab dot — purple tint */
.mtn-dot-exp { background: #a78bfa !important; }
.mtn-dot-exp.active { box-shadow: 0 0 0 2px #a78bfa; }

/* ══════════════════════════════════════════════════════════════════════════
   EXPERIMENTAL TAB — sub-tab bar with Beta badge
   ══════════════════════════════════════════════════════════════════════════ */
.exp-tabs {
    position: relative;
}
.exp-beta-badge {
    position: absolute;
    top: -10px;
    right: 8px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 20px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(124,58,237,0.4);
}

/* ══════════════════════════════════════════════════════════════════════════
   PARCEL HEALTH — IQ sub-tab panel styles
   ══════════════════════════════════════════════════════════════════════════ */

/* Legend above parcel health chart */
.iq-ph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
}
.iq-ph-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--iq-text2);
    font-family: 'Space Mono', monospace;
}
.iq-ph-leg-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Column header row */
.iq-ph-header {
    display: grid;
    grid-template-columns: 100px 1fr 120px 80px;
    gap: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--iq-border);
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--iq-text3);
    font-family: 'Space Mono', monospace;
}

/* Grid of parcel rows */
.iq-ph-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Individual parcel row */
.iq-ph-row {
    display: grid;
    grid-template-columns: 100px 1fr 120px 80px;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--iq-surface2);
    transition: filter 0.15s;
}
.iq-ph-row:hover { filter: brightness(1.08); }

.iq-ph-sym {
    font-weight: 700;
    font-size: 14px;
    color: var(--iq-text1);
}
.iq-ph-pid {
    font-size: 10px;
    color: var(--iq-text3);
    font-family: 'Space Mono', monospace;
    margin-top: 2px;
}

/* Cost basis bar */
.iq-ph-bar-track {
    background: var(--iq-surface);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--iq-border);
}
.iq-ph-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.iq-ph-pct {
    font-size: 10px;
    color: var(--iq-text3);
    margin-top: 3px;
    font-family: 'Space Mono', monospace;
}

/* Value + gain column */
.iq-ph-val {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-align: right;
}

/* Age column */
.iq-ph-age {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-align: right;
}

@media (max-width: 700px) {
    .iq-ph-header { grid-template-columns: 80px 1fr 90px 70px; font-size: 10px; }
    .iq-ph-row    { grid-template-columns: 80px 1fr 90px 70px; padding: 8px 10px; }
    .iq-ph-sym    { font-size: 12px; }
    .exp-beta-badge { font-size: 9px; padding: 1px 6px; }
}