/* ================================
   CSS Variables & Theme
   ================================ */
:root {
    /* Colors - Purple theme for premium sophisticated look */
    --primary: #2962FF;
    --primary-dark: #1e4dd9;
    --primary-light: #5389ff;
    --secondary: #9b59b6;
    --success: #27ae60;
    --success-light: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --danger-light: #ec7063;
    --info: #17a2b8;

    /* Backgrounds */
    --bg-primary: #1a1d23;
    --bg-secondary: #22262e;
    --bg-tertiary: #2a2f38;
    --bg-card: #272b33;
    --bg-hover: #32373f;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #b0b8c4;
    --text-muted: #6c757d;

    /* Borders */
    --border-color: #3a3f48;
    --border-light: #454b55;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);

    /* Sizing */
    --sidebar-width: 250px;
    --sidebar-collapsed: 70px;
    --header-height: 60px;
    --border-radius: 8px;
    --border-radius-lg: 12px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ================================
   Light theme — overrides of :root color tokens only. Component rules
   reference these variables so everything flips automatically. Accent
   colors (--primary, --success, --warning, --danger, --info) stay since
   they read on both themes.
   ================================ */
html[data-theme="light"] {
    --bg-primary:   #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-card:      #ffffff;
    --bg-tertiary:  #f0f2f5;
    --bg-hover:     #e5e8ee;

    --text-primary:   #333333;
    --text-secondary: #484848;
    --text-muted:     #717171;

    --border-color: #e0e3e8;
    --border-light: #eef0f3;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Tables are flat-rows + distinct-header on both themes — no zebra stripes.
   Header uses var(--bg-hover), rows inherit wrapper's var(--bg-tertiary).
   Kept: border-color flip below for sidebar/logo/header hairlines. */
html[data-theme="light"] .sidebar::after,
html[data-theme="light"] .logo,
html[data-theme="light"] .header {
    border-color: rgba(0, 0, 0, 0.08);
}

/* ================================
   Reset & Base Styles
   ================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Browser-default 16px root (buildmidas parity — it never overrides it).
       The rem scale below was authored against 14px and read 1.5-2px smaller
       than buildmidas everywhere; at 16px it lands on their rendered sizes. */
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-light);
}

/* System font stack site-wide (buildmidas parity, 2026-08-01). */
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.8rem; }

/* ================================
   Layout
   ================================ */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: width var(--transition-normal);
}
/* Sidebar right-edge border starts BELOW the header so the header's
   horizontal line visually covers it (matching SEO's layout). */
.sidebar::after {
    content: '';
    position: absolute;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar.collapsed .nav-item span,
.sidebar.collapsed .logo span,
.sidebar.collapsed .status-indicator span {
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: var(--header-height);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.05) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
}

.logo i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px rgba(41, 98, 255, 0.4));
}

.logo span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    flex: 1;
    padding: 15px 0;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item:hover i {
    color: var(--primary);
    transform: scale(1.1);
}

.nav-item.active {
    background: rgba(41, 98, 255, 0.1);
    color: var(--primary);
    border-left-color: var(--primary);
}

.nav-item.active i {
    color: var(--primary);
    filter: drop-shadow(0 0 6px rgba(41, 98, 255, 0.5));
}

.nav-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
    border-radius: 6px;
}

.sidebar-footer {
    padding: 15px 20px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px var(--success), 0 0 16px rgba(39, 174, 96, 0.3);
}

.status-dot.warning {
    background: var(--warning);
    box-shadow: 0 0 8px var(--warning), 0 0 16px rgba(243, 156, 18, 0.3);
}

.status-dot.danger {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger), 0 0 16px rgba(231, 76, 60, 0.3);
}

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

/* Main Content */
.main-content {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-normal);
}

.sidebar.collapsed + .main-content {
    margin-left: var(--sidebar-collapsed);
}

/* Header */
.header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    position: sticky;
    top: 0;
    z-index: 200;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
}

.page-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    color: var(--primary);
}

.icon-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* General badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.badge-info { background: var(--info); color: white; }
.badge-success { background: var(--success); color: white; }
.badge-warning { background: var(--warning); color: white; }
.badge-primary { background: var(--primary); color: white; }
.badge-danger { background: var(--danger); color: white; }

/* Content Wrapper */
.content-wrapper {
    flex: 1;
    min-width: 0;
    padding: 25px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Page */
.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================
   Cards
   ================================ */
.card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header h3 i {
    color: var(--primary);
    font-size: 1.1rem;
}

.card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Summary Cards */
.summary-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
}

.bg-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.bg-success { background: linear-gradient(135deg, var(--success), var(--success-light)); }
.bg-warning { background: linear-gradient(135deg, var(--warning), #e67e22); }
.bg-info { background: linear-gradient(135deg, var(--info), #20c997); }
.bg-secondary { background: linear-gradient(135deg, var(--secondary), #8e44ad); }
.bg-danger { background: linear-gradient(135deg, var(--danger), var(--danger-light)); }

.card-content h3 {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.card-content .value {
    font-size: 1.6rem;
    font-weight: 700;
}

.card-content .value.positive { color: var(--success); }
.card-content .value.negative { color: var(--danger); }

.card-content .change {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.card-content .change.positive { color: var(--success); }
.card-content .change.negative { color: var(--danger); }

/* Chart Cards */
.chart-card {
    padding: 0;
}

.chart-container {
    padding: 20px;
    height: 300px;
    position: relative;
}

/* Token Cost card — over-time + by-agent charts beneath the per-agent table.
   No horizontal padding so the charts line up with the table's left/right edges. */
.tc-chart-block { margin-top: 18px; }
.tc-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tc-chart-head .tc-chart-title { margin-bottom: 0; }
.tc-chart-title {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-secondary); margin-bottom: 8px;
}
/* Cost/Calls/Tokens metric toggle on the by-agent chart — same pill scheme as the
   Daily/Monthly/Annual returns tabs on the strategy page (--bg-hover default, --primary
   active, text-color lift on hover). */
.tc-metric-toggle { display: inline-flex; gap: 4px; }
.tc-metric-btn {
    font-size: 0.7rem; padding: 4px 12px; border: none; border-radius: 20px; cursor: pointer;
    background: var(--bg-hover); color: var(--text-secondary); transition: all 0.15s;
}
.tc-metric-btn:hover { color: var(--text-primary); }
.tc-metric-btn.active { background: var(--primary); color: #fff; }
/* Definite height keeps Chart.js (maintainAspectRatio:false) from the resize loop.
   The by-agent wrap height is set inline per agent count. */
.tc-chart-wrap { position: relative; height: 220px; }
/* Top Strategies leaderboard: bounded scroll area per page (like Recent Activity). */
.ins-lead-wrap { max-height: 420px; overflow-y: auto; }
/* Data Coverage stat-tile values, dashboard vocabulary: neutral total = primary blue, the
   problem counts (gaps / low-coverage / empty) carry the .neg red class in the markup. */
body[data-page-id="data-coverage"] #dcTotal { color: var(--primary); }
/* Data Coverage tables: fixed header + scrollable body, so the scrollbar sits BELOW the
   header (not alongside it). thead/tbody go block; rows become fixed-layout tables so columns
   stay aligned; scrollbar-gutter reserves matching space on both header and body. */
body[data-page-id="data-coverage"] .dc-scroll thead,
body[data-page-id="data-coverage"] .dc-scroll tbody { display: block; }
body[data-page-id="data-coverage"] .dc-scroll thead tr,
body[data-page-id="data-coverage"] .dc-scroll tbody tr { display: table; width: 100%; table-layout: fixed; }
body[data-page-id="data-coverage"] .dc-scroll thead { overflow-y: hidden; scrollbar-gutter: stable; background: var(--bg-tertiary); }
body[data-page-id="data-coverage"] .dc-scroll tbody { max-height: 600px; overflow-y: auto; scrollbar-gutter: stable; }
/* Explicit per-column widths for the 11-col data table (fixed layout): Source, Symbol,
   Exchange, Venue, TF, Coverage, Rows, Gaps, Dupes, Max Gap, Span. */
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(1),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(1) { width: 8%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(2),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(2) { width: 15%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(3),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(3) { width: 9%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(4),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(4) { width: 12%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(5),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(5) { width: 6%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(6),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(6) { width: 9%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(7),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(7) { width: 7%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(8),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(8) { width: 6%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(9),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(9) { width: 6%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(10),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(10) { width: 8%; }
body[data-page-id="data-coverage"] #dcWorstScroll th:nth-child(11),
body[data-page-id="data-coverage"] #dcWorstScroll td:nth-child(11) { width: 14%; }
/* Tighter cells + wrap long content so all columns fit without clipping the headers. */
body[data-page-id="data-coverage"] .dc-scroll th,
body[data-page-id="data-coverage"] .dc-scroll td { padding: 8px 10px; }
body[data-page-id="data-coverage"] .dc-scroll td { overflow-wrap: anywhere; }
/* Sortable headers: clickable, highlight on hover, active arrow rendered by JS. */
body[data-page-id="data-coverage"] #dcWorstScroll th.dc-sortable { cursor: pointer; user-select: none; }
body[data-page-id="data-coverage"] #dcWorstScroll th.dc-sortable:hover { color: var(--primary); }
/* Per-page selector menu opens upward (it sits at the bottom of a list). */
.filter-combo-menu.combo-up { top: auto; bottom: calc(100% + 4px); }

/* ================================
   Dashboard Grid
   ================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dashboard-grid .wide {
    grid-column: span 2;
}

.dashboard-grid .full-width {
    grid-column: 1 / -1;
}

/* ================================
   Tables
   ================================ */
.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-tertiary);
}

table td {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

table tbody tr {
    transition: background var(--transition-fast);
}

table tbody tr:hover {
    background: var(--bg-hover);
}

/* Sortable table headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover {
    color: var(--primary-light);
}

th.sortable i {
    margin-left: 4px;
    font-size: 0.7rem;
    opacity: 0.5;
}

th.sortable:hover i,
th.sortable i.fa-sort-up,
th.sortable i.fa-sort-down {
    opacity: 1;
}

/* Pagination controls */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}
/* 3-zone layout: .pag-info on left, .pag-nav (buttons) centered via auto
   margins, .pag-per-page selector on right. The nav wrapper's margin: 0 auto
   absorbs extra space on both sides, anchoring it in the middle while
   pushing the selector flush to the right edge. */
.pag-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}

.pag-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.pag-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.pag-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pag-info {
    padding: 0 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.pag-per-page {
    padding: 2px 8px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.pag-per-page:hover {
    background: var(--bg-tertiary);
}
.pag-per-page:focus {
    outline: none;
}

/* Reusable filter-bar control: select + text input. Transparent by
   default (matches the per-page dropdown), --bg-tertiary on hover and
   while focused, primary-color glow on focus (box-shadow, no layout
   shift). Pill-ish 8px radius. Add class="filter-control" to any
   select/input. */
.filter-control {
    padding: 7px 14px;
    border: none;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1rem;
    font-family: inherit;
    transition: background var(--transition-fast);
}
input.filter-control { color: var(--text-primary); }
select.filter-control { cursor: pointer; }
.filter-control:hover { background: var(--bg-hover); }
.filter-control:focus {
    outline: none;
    background: var(--bg-hover);
}
.filter-control::placeholder { color: var(--text-muted); }

/* Searchable tag combobox: a .filter-control input that LOOKS like the sibling
   <select> filters (same pill + caret + size) but can be typed into to filter the
   tag list. Native <select> can't be searched; only the search ability is added —
   the resting appearance matches the original tag dropdown. */
.filter-combo { position: relative; display: inline-block; }
/* Compact verification pips (strategies table "Verify" column) — 4 dots for the layers. */
.v-pips { display: inline-flex; gap: 4px; align-items: center; }
.v-pip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.v-pip.pass { background: #27ae60; }
.v-pip.fail { background: #ef4444; }
.v-pip.skip { background: var(--text-muted); opacity: 0.35; }
/* A filter-combo dropdown is absolutely-positioned inside its card; when the table is
   short the card's overflow:hidden clipped the menu's BOTTOM. Let cards that hold a
   filter combo overflow visibly so the menu can extend past a short card. (The card's
   bottom edge is the pagination row, which has no corner-reaching background, so the
   12px rounded corners stay clean.) */
/* !important to beat the theme-scoped `body:is(...) .card` overflow rules (the
   light-theme one forces hidden, which re-clips the menu). Scoped to combo-cards only. */
.card:has(.filter-combo) { overflow: visible !important; }
.filter-combo > .filter-control {
    width: 150px;            /* fits the longest placeholder at 1rem ("All performance") */
    padding-right: 26px;     /* room for the caret */
    cursor: pointer;
}
.filter-combo::after {       /* dropdown caret, like a native select */
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    pointer-events: none;
}
.filter-combo-menu {
    position: absolute;
    top: calc(100% + 4px);
    /* Anchor to the combo's right edge so the menu opens leftward, into the page —
       the filter controls sit at the page's right edge, so a left-anchored menu
       (min-width 200px wider than the 127px input) overflowed off the right edge. */
    right: 0;
    z-index: 1000;   /* above sticky table headers (z-index 200) so the open menu is
                        never painted under the table rows below the filter bar */
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    scrollbar-width: thin;                 /* Firefox: thin bar */
    scrollbar-color: var(--bg-hover) transparent;
}
/* Keep the scrollbar inside the rounded menu: inset the track top/bottom so it never
   reaches the rounded corners, and pad the thumb off the right edge. */
.filter-combo-menu::-webkit-scrollbar { width: 10px; }
.filter-combo-menu::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.filter-combo-menu::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
/* Default menu anchor is right:0 (the filter bars on most pages sit at the right edge).
   The Live Market controls are LEFT-aligned, so their menus must open rightward instead,
   or they'd overflow off the left edge. */
.lm-controls .filter-combo-menu { left: 0; right: auto; }
.filter-combo-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1rem;      /* match .filter-control — the menu options read at
                             the same size as the pill that opened them */
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.filter-combo-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.filter-combo-item.active { background: rgba(41, 98, 255, 0.14); color: var(--text-primary); }
.filter-combo-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.filter-combo-empty { padding: 8px 10px; color: var(--text-muted); font-size: 0.78rem; }

/* Status badges in tables */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-active,
.status-live,
.status-live_stage {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-pending {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}
.status-in_progress {
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
}
.status-tested {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-coding,
.status-verifying,
.status-backtesting,
.status-backtest_stage,
.status-backtest_review,
.status-optimizing,
.status-analyzing,
.status-iterating {
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
}

.status-promoting,
.status-risk_review {
    background: rgba(23, 162, 184, 0.15);
    color: var(--info);
}

.status-abandoned,
.status-failed {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.status-retired {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-muted);
}

.status-paper,
.status-paper_stage {
    background: rgba(155, 89, 182, 0.15);
    color: var(--secondary);
}

.status-idle {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-muted);
}

.status-running {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-error,
.status-paused {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

/* ================================
   Pipeline Visualization
   ================================ */
.pipeline-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px;
    overflow-x: auto;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    position: relative;
}

.pipeline-stage-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    transition: all var(--transition-normal);
}

.pipeline-stage.completed .pipeline-stage-icon {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.pipeline-stage.active .pipeline-stage-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    animation: pulse 2s infinite;
    box-shadow: 0 0 12px rgba(41, 98, 255, 0.5);
}

.pipeline-stage.failed .pipeline-stage-icon {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.pipeline-stage-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pipeline-stage.completed .pipeline-stage-label {
    color: var(--success);
}

.pipeline-stage.active .pipeline-stage-label {
    color: var(--primary-light);
}

.pipeline-stage.failed .pipeline-stage-label {
    color: var(--danger);
}

.pipeline-connector {
    width: 30px;
    height: 2px;
    background: var(--border-color);
    flex-shrink: 0;
}

.pipeline-connector.completed {
    background: var(--success);
}

/* Pipeline run card */
.pipeline-run-card {
    margin-bottom: 16px;
}

.pipeline-run-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.pipeline-run-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
}

.pipeline-run-header .pipeline-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ================================
   Activity Feed
   ================================ */
.activity-feed {
    padding: 0;
}
/* Recent Activity: bounded scroll area per page so the card stays compact, with
   pagination below (see activityGoPage in dashboard.js). */
.activity-list {
    max-height: 420px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    transition: background var(--transition-fast);
}

.activity-item:hover {
    background: var(--bg-hover);
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.activity-icon.research { background: rgba(41, 98, 255, 0.15); color: var(--primary); }
.activity-icon.development { background: rgba(23, 162, 184, 0.15); color: var(--info); }
.activity-icon.verification { background: rgba(243, 156, 18, 0.15); color: var(--warning); }
.activity-icon.backtest { background: rgba(39, 174, 96, 0.15); color: var(--success); }
.activity-icon.analysis { background: rgba(155, 89, 182, 0.15); color: var(--secondary); }
.activity-icon.risk { background: rgba(231, 76, 60, 0.15); color: var(--danger); }

/* Recent-activity rows (audit "Strategy Data Integrity" + dashboard feed): the 36px
   status icon is taller than the single-line title, so flex-start left its glyph ~8px
   below the title. Lift it so the icon centers on the title's first line. */
body:is([data-page-id="audit"], [data-page-id="dashboard"]) .activity-icon { margin-top: -8px; }

.activity-content {
    flex: 1;
}

.activity-content .activity-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.activity-content .activity-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ================================
   Agent Cards
   ================================ */
.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.agent-card {
    padding: 20px;
}

.agent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.agent-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.agent-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.agent-role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.agent-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.agent-stat {
    background: var(--bg-tertiary);
    padding: 10px;
    border-radius: var(--border-radius);
}

.agent-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.agent-stat-value {
    font-size: 1rem;
    font-weight: 700;
}

/* ================================
   Hypothesis Cards
   ================================ */
.hypothesis-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.hypothesis-item {
    background: var(--bg-hover);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: all var(--transition-fast);
}

.hypothesis-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
.hypothesis-item:hover {
    background: color-mix(in srgb, var(--bg-tertiary) 85%, #000);
}

.hypothesis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

/* Title: single line + ellipsis by default; click to expand to the full title. */
.hypothesis-title {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    white-space: normal;   /* full title, no truncation */
}
.hypothesis-header .status { flex-shrink: 0; }

/* Body: shown in full (no clamp). */
.hypothesis-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Tags: first 4 shown; click the "+N more" badge to reveal the rest (footer then wraps).
   Scoped under .hypothesis-footer so the hide beats the base .tag display rule. */
.hypothesis-footer .hyp-tag-extra { display: none; }
.tag-more { cursor: pointer; }
.hypothesis-footer.tags-shown { flex-wrap: wrap; overflow: visible; }
.hypothesis-footer.tags-shown .hyp-tag-extra { display: inline-flex; }
.hypothesis-footer.tags-shown .tag-more { display: none; }

/* Footer: single row of tags (they don't shrink/wrap) so every card is the same height. */
.hypothesis-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    /* wrap instead of clip: at tablet widths (≈1024px) nowrap+hidden cut off
       the "View Strategy" link after the tag chips. flex-wrap only engages
       when the row doesn't fit, so wide desktop rows render exactly as
       before. */
    flex-wrap: wrap;
    row-gap: 6px;
    min-height: 24px;
}
.hypothesis-footer .tag { flex-shrink: 0; white-space: nowrap; }

.hypothesis-strategy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 12px;
    background: rgba(41, 98, 255, 0.1);
    border: none;
    border-radius: 20px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;       /* stay one line so the footer height is constant */
    overflow: hidden;
    min-width: 0;
    flex-shrink: 0;
}
.hypothesis-strategy-link:hover {
    background: rgba(41, 98, 255, 0.2);
}

.hypothesis-strategy-link i {
    font-size: 0.7rem;
}

.hypothesis-strategy-link .status {
    font-size: 0.68rem;
    padding: 1px 6px;
}

.hypothesis-strategy-name {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
}

.tag.priority-high {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.tag.priority-medium {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.tag.priority-low {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

/* ================================
   Loading & Empty States
   ================================ */
/* Canonical loading indicator — SAME size/styling everywhere (matches the
   chat thinking indicator): 14px spinner + 14px text, 8px gap, centered,
   var(--text-secondary). `.page` variant centers vertically for whole-page
   initial loads. `td.loading-cell` is the in-table equivalent. */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    gap: 8px;
    font-size: 14px;
}
.loading-spinner.page { min-height: 45vh; }
.loading-spinner p,
.loading-spinner span { margin: 0; font-size: 14px; }

.loading-spinner i {
    font-size: 14px;
    animation: spin 1s linear infinite;
}

td.loading-cell {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px;
    font-size: 14px;
}
td.loading-cell i { margin-right: 8px; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.9rem;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-collapsed);
    }

    .sidebar .nav-item span,
    .sidebar .logo span,
    .sidebar .status-indicator span {
        display: none;
    }

    .sidebar .nav-item {
        justify-content: center;
    }

    .main-content {
        margin-left: var(--sidebar-collapsed);
    }

    .menu-toggle {
        display: block;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-grid .wide {
        grid-column: span 1;
    }

    .agent-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Scrollbar
   ================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* ================================
   Refresh Indicator
   ================================ */
.refresh-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.refresh-indicator.updating i {
    animation: spin 1s linear infinite;
}

/* Settings page */
.settings-section {
    padding: 20px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.settings-row:last-child {
    border-bottom: none;
}

/* Theme toggle (on Settings page) — segmented pill with two options */
.theme-toggle {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    padding: 3px;
}
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.theme-toggle-btn:hover {
    color: var(--text-primary);
}
.theme-toggle-btn.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.settings-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.settings-control input[type="text"],
.settings-control input[type="number"],
.settings-control input[type="password"],
.settings-control select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    outline: none;
}

.settings-control input:focus,
.settings-control select:focus {
    border-color: var(--primary);
}

/* Verification result icons */
.verification-pass {
    color: var(--success);
}

.verification-fail {
    color: var(--danger);
}

.verification-skip {
    color: var(--text-muted);
}

/* ================================
   Stage Detail Modal
   ================================ */
.stage-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.stage-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.25s ease;
    overflow: hidden;   /* clip .stage-detail-content scrollbar to rounded corners */
}

/* Keep the modal's main scrollbar (.stage-detail-content) above the rounded
   bottom corner of the card (12px = --border-radius-lg). */
.stage-detail-content::-webkit-scrollbar {
    width: 6px;
}
.stage-detail-content::-webkit-scrollbar-track {
    background: transparent;
    margin-bottom: 12px;
}
.stage-detail-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.stage-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stage-detail-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-light);
}

.modal-close-btn,
.stage-detail-header .close-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.modal-close-btn:hover,
.stage-detail-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.stage-detail-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.stage-detail-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.stage-detail-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.stage-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.stage-detail-section h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stage-detail-section h4 i {
    color: var(--primary);
    font-size: 0.9rem;
}

.stage-detail-subsection {
    margin-top: 14px;
    padding: 14px 14px 14px 18px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
}

.stage-detail-subsection h5 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.stage-metric {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 7px 8px;
    gap: 12px;
    border-radius: 4px;
}

.stage-metric:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.stage-metric-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.stage-metric-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.stage-metric-value.stage-metric-text {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.stage-detail-layers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.stage-layer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}

.stage-layer-card .layer-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.stage-layer-card .layer-icon.pass { color: var(--success); }
.stage-layer-card .layer-icon.fail { color: var(--danger); }
.stage-layer-card .layer-icon.pending { color: var(--text-muted); }

.stage-layer-card .layer-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stage-badge-pass {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.stage-badge-fail {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.stage-badge-pending {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-muted);
}

.stage-detail-feedback-box {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.stage-detail-feedback-box h5 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.stage-detail-feedback {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 200px;
    overflow-y: auto;
}

.stage-detail-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.stage-metric-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px 12px;
    text-align: center;
    background: linear-gradient(180deg, rgba(41, 98, 255, 0.04) 0%, var(--bg-tertiary) 40%);
}

.stage-metric-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.stage-metric-card-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stage-metric-card-value.positive {
    color: var(--success);
}

.stage-metric-card-value.negative {
    color: var(--danger);
}

.stage-params-table,
.stage-wf-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.82rem;
}

.stage-params-table th,
.stage-wf-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-color);
    background: rgba(41, 98, 255, 0.06);
}

.stage-params-table td,
.stage-wf-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.stage-params-table td:first-child {
    font-weight: 500;
    color: var(--text-secondary);
}

.stage-params-table td:last-child,
.stage-wf-table td:nth-child(2),
.stage-wf-table td:nth-child(3) {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stage-params-table tr:last-child td,
.stage-wf-table tr:last-child td {
    border-bottom: none;
}

.stage-params-table tr:hover td,
.stage-wf-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.stage-hyp-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.stage-hyp-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 12px;
}

.stage-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.15);
    color: var(--primary);
    margin-right: 8px;
}

.stage-tag i {
    font-size: 0.68rem;
}

/* Clickable pipeline stages */
.pipeline-stage.clickable:hover .pipeline-stage-icon {
    transform: scale(1.15);
    transition: transform var(--transition-fast);
}

.pipeline-stage.clickable:hover .pipeline-stage-label {
    color: var(--text-primary);
}

/* ================================
   Code Viewer
   ================================ */
.code-viewer {
    margin-top: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.code-viewer-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: none;
    color: var(--primary-light);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.code-viewer-toggle:hover {
    background: var(--bg-hover);
    color: var(--primary);
}

.code-viewer-toggle.active {
    background: rgba(41, 98, 255, 0.1);
    border-bottom: 1px solid var(--border-color);
}

.code-viewer-toggle .code-viewer-arrow {
    margin-left: auto;
    font-size: 0.72rem;
    transition: transform var(--transition-fast);
}

.code-viewer-content {
    background: #1e1e2e;
    max-height: 400px;
    overflow: auto;
}

.code-viewer pre {
    margin: 0;
    padding: 16px;
    background: transparent;
    overflow-x: auto;
}

.code-viewer code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #abb2bf;
    tab-size: 4;
    white-space: pre;
}

/* Python syntax highlighting */
.py-keyword {
    color: #c678dd;
    font-weight: 600;
}

.py-string {
    color: #98c379;
}

.py-comment {
    color: #5c6370;
    font-style: italic;
}

.py-decorator {
    color: #e5c07b;
}

.py-number {
    color: #d19a66;
}

.py-builtin {
    color: #56b6c2;
    font-weight: 600;
}

/* ================================
   Iteration Timeline
   ================================ */
.iteration-timeline {
    position: relative;
    padding-left: 4px;
}

.iteration-item {
    position: relative;
    padding: 12px 14px 12px 28px;
    margin-left: 10px;
    border-left: 2px solid var(--border-color);
    transition: all var(--transition-fast);
}

.iteration-item:last-child {
    border-left-color: transparent;
}

.iteration-item.current {
    border-left-color: var(--primary);
    background: rgba(41, 98, 255, 0.05);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.iteration-dot {
    position: absolute;
    left: -7px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    z-index: 1;
}

.iteration-item.current .iteration-dot {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 8px rgba(41, 98, 255, 0.4);
}

.iteration-content {
    min-width: 0;
}

.iteration-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.iteration-number {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.iteration-stage {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 10px;
    background: rgba(108, 117, 125, 0.15);
    border-radius: 20px;
}

.iteration-details {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.iteration-details span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.iteration-details i {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.iteration-feedback {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 6px;
}
.iteration-feedback p { margin: 4px 0; }
.iteration-feedback strong { color: var(--text); }
.iteration-feedback code {
    background: rgba(41, 98, 255,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.78rem;
}
.iteration-feedback ol, .iteration-feedback ul {
    margin: 4px 0;
    padding-left: 18px;
}
.iteration-feedback li { margin: 2px 0; }

/* ================================
   Strategy Explanation (How It Works)
   ================================ */
.strategy-explanation {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.strategy-explanation .explanation-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.strategy-explanation .explanation-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 10px;
}

.strategy-explanation .explanation-rationale {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* ================================
   Parameter Toggle
   ================================ */
.params-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 14px;
    background: rgba(41, 98, 255, 0.08);
    border: 1px solid rgba(41, 98, 255, 0.2);
    border-radius: 6px;
    color: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.params-toggle-btn:hover {
    background: rgba(41, 98, 255, 0.15);
    border-color: rgba(41, 98, 255, 0.35);
}

.params-toggle-btn i {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.params-toggle-btn.expanded i {
    transform: rotate(180deg);
}

.params-hidden {
    display: none;
}

/* ================================
   Verification Layer Detail Cards
   ================================ */
.layer-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    transition: all var(--transition-fast);
}

.layer-detail:last-child {
    margin-bottom: 0;
}

.layer-detail .layer-status-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
}

.layer-detail .layer-status-icon.pass {
    background: none;
    color: var(--success);
}

.layer-detail .layer-status-icon.fail {
    background: none;
    color: var(--danger);
}

.layer-detail .layer-status-icon.pending {
    background: none;
    color: var(--text-muted);
}

.layer-detail .layer-info {
    flex: 1;
    min-width: 0;
}

.layer-detail .layer-info .layer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.layer-detail .layer-info .layer-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.layer-detail .layer-description {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.layer-detail .layer-error {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--danger);
    line-height: 1.6;
    background: rgba(231, 76, 60, 0.06);
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    word-break: break-word;
}
.layer-error p { margin: 4px 0; }
.layer-error strong { color: var(--danger); }
.layer-error code {
    background: rgba(231, 76, 60, 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.78rem;
}
.layer-error ol, .layer-error ul {
    margin: 4px 0;
    padding-left: 18px;
}
.layer-error li { margin: 2px 0; }

/* ================================
   Metric Sections
   ================================ */
.metrics-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.metrics-section-title:first-child {
    margin-top: 0;
}

.metrics-2col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* ================================
   Params Comparison Table
   ================================ */
.params-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.82rem;
}

.params-comparison-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-color);
    background: rgba(41, 98, 255, 0.06);
}

.params-comparison-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.params-comparison-table td:first-child {
    font-weight: 500;
    color: var(--text-muted);
}

.params-comparison-table tr:last-child td {
    border-bottom: none;
}

.params-comparison-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.param-changed {
    color: var(--primary-light) !important;
    font-weight: 700 !important;
}

.param-changed-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 6px;
    vertical-align: middle;
}

/* Walk-forward color coding */
.stage-wf-table .wf-positive {
    color: var(--success);
}

.stage-wf-table .wf-negative {
    color: var(--danger);
}

.stage-wf-table .wf-avg-row td {
    font-weight: 700;
    border-top: 2px solid var(--border-color);
    background: rgba(41, 98, 255, 0.04);
}

/* Sensitivity status display */
.sensitivity-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.88rem;
}

.sensitivity-status.pass {
    background: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.2);
    color: var(--success);
}

.sensitivity-status.fail {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.2);
    color: var(--danger);
}

.sensitivity-status i {
    font-size: 1.1rem;
}

/* Optimization phase summary badges */
.opt-phase-summary {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}
.opt-phase-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}
.opt-phase-badge.pass {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.2);
}
.opt-phase-badge.fail {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.2);
}
.opt-phase-badge.warn {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
}

/* Metrics comparison table */
.metrics-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 8px;
}
.metrics-comparison-table th,
.metrics-comparison-table td {
    padding: 6px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.metrics-comparison-table th:first-child,
.metrics-comparison-table td:first-child {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
}
.metrics-comparison-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Analysis feedback block */
.analysis-feedback {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    margin-top: 8px;
}
.analysis-feedback p { margin: 6px 0; }
.analysis-feedback strong { color: var(--text); }
.analysis-feedback code {
    background: rgba(41, 98, 255,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
}
.analysis-feedback ol, .analysis-feedback ul {
    margin: 6px 0;
    padding-left: 20px;
}
.analysis-feedback li { margin: 3px 0; }

/* Sensitivity parameter charts grid */
.sensitivity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.sensitivity-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
}
.sensitivity-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.param-cliff-tag {
    color: #ef4444;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(239,68,68,0.15);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
}

@media (max-width: 768px) {
    .stage-detail-card {
        width: 95%;
        max-height: 90vh;
    }

    .stage-detail-summary {
        grid-template-columns: 1fr;
    }

    .stage-detail-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stage-detail-layers {
        grid-template-columns: repeat(2, 1fr);
    }

    .code-viewer-content {
        max-height: 300px;
    }

    .iteration-details {
        flex-direction: column;
        gap: 4px;
    }

    .metrics-2col-grid {
        grid-template-columns: 1fr;
    }

    .layer-detail {
        flex-direction: column;
    }
}

/* ================================
   Strategy Detail Page
   ================================ */

/* Clickable strategy name links */
.strategy-name-link {
    color: var(--primary-light);
    cursor: pointer;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.strategy-name-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Header */
.sd-header {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.sd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 16px;
}

.sd-back-btn:hover {
    background: var(--bg-hover);
    color: var(--primary-light);
    border-color: var(--primary);
}

.sd-header-main {
    margin-bottom: 8px;
}

.sd-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.sd-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.sd-iteration-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.12);
    color: var(--primary-light);
}

/* Publish-to-Marketplace action in the title row: anchored to the right edge
   (margin-left: auto) so it reads as the page action instead of another badge
   crammed after the title. Pill convention (20px), primary-tinted at rest,
   filled on hover; rgba tint works on both themes. Wraps to its own line on
   narrow viewports via the row's existing flex-wrap. */
.sd-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.12);
    color: var(--primary);
    transition: background 0.15s ease, color 0.15s ease;
}

.sd-publish-btn:hover {
    background: var(--primary);
    color: #fff;
}

.sd-hypothesis-title {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}

.sd-abandon-banner {
    padding: 12px 16px;
    margin-top: 12px;
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--danger);
    font-size: 0.85rem;
    line-height: 1.5;
}

.sd-abandon-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-abandon-banner i {
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--danger);
}

.sd-abandon-lead {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-abandon-toggle {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.sd-abandon-toggle:hover { background: var(--bg-hover); }

.sd-abandon-full {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Quick stats row */
.sd-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.sd-stat {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.sd-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.sd-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.sd-stat-value.positive {
    color: var(--success);
}

.sd-stat-value.negative {
    color: var(--danger);
}

/* Section cards */
.sd-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
}

.sd-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sd-card-header i {
    color: var(--primary);
    font-size: 1rem;
}

.sd-card-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(41, 98, 255, 0.12);
    color: var(--primary-light);
}

.sd-card-body {
    padding: 20px 24px;
}

.sd-section-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

.sd-rationale {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    margin-bottom: 12px;
}

/* Research section */
.research-badges {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}
.research-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    background: rgba(41, 98, 255, 0.12);
    color: var(--primary);
    border: 1px solid rgba(41, 98, 255, 0.18);
}
.research-badge i {
    font-size: 0.65rem;
    opacity: 0.7;
}
.research-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}
.research-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    line-height: 1.4;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.hyp-view-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.hyp-view-link:hover {
    opacity: 1;
    text-decoration: underline;
}
.sd-subsection {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.sd-subsection-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Hypothesis run cards */
.hyp-run-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.hyp-run-header {
    display: flex;
    align-items: center;
    gap: 10px;
    /* wrap instead of pushing the status badge past the card edge — long
       run titles + "Abandoned" don't fit one row on phones. No-op when the
       row fits (desktop/tablet render unchanged). */
    flex-wrap: wrap;
    row-gap: 4px;
    margin-bottom: 6px;
}
.hyp-run-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    text-decoration: none;
}
.hyp-run-title:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.sd-params-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.sd-params-section h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Code stats row */
.sd-code-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.sd-code-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sd-code-stats i {
    color: var(--primary);
    font-size: 0.78rem;
}

/* Timeline flow */
.sd-timeline-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    overflow-x: auto;
}

.sd-timeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 100px;
    flex-shrink: 0;
}

.sd-timeline-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    transition: all var(--transition-normal);
}

.sd-timeline-stage.completed .sd-timeline-icon {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.sd-timeline-stage.active .sd-timeline-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    animation: pulse 2s infinite;
    box-shadow: 0 0 16px rgba(41, 98, 255, 0.5);
}

.sd-timeline-stage.failed .sd-timeline-icon {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.sd-timeline-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sd-timeline-stage.completed .sd-timeline-label {
    color: var(--success);
}

.sd-timeline-stage.active .sd-timeline-label {
    color: var(--primary-light);
}

.sd-timeline-stage.failed .sd-timeline-label {
    color: var(--danger);
}

.sd-timeline-connector {
    width: 40px;
    height: 3px;
    background: var(--border-color);
    flex-shrink: 0;
    border-radius: 2px;
}

.sd-timeline-connector.completed {
    background: var(--success);
}

/* Strategy detail page responsive */
@media (max-width: 768px) {
    .sd-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-title {
        font-size: 1.2rem;
    }

    .sd-card-body {
        padding: 16px;
    }

    .sd-header {
        padding: 16px;
    }

    .sd-timeline-flow {
        justify-content: flex-start;
    }

    .sd-timeline-stage {
        min-width: 80px;
    }

    .sd-timeline-icon {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .sd-code-stats {
        flex-direction: column;
        gap: 6px;
    }
}

/* ================================
   Backtest Rich Data Styles
   ================================ */

/* Chart containers */
.backtest-chart-container {
    position: relative;
    width: 100%;
    height: 350px;
    margin: 20px 0;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 12px;
}

.backtest-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.backtest-chart-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.backtest-chart-title i {
    color: var(--primary);
}

/* Backtest section grid layout for metrics */
.backtest-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .backtest-section-grid {
        grid-template-columns: 1fr;
    }
}

.backtest-metrics-block {
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    padding: 14px;
}

.backtest-metrics-block-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.backtest-metrics-block .stage-metric-card {
    margin-bottom: 4px;
}

/* Data Sources table — styled to match the All Trades table exactly: same
   bordered/rounded 600px scroll box, same --bg-tertiary surface, same custom
   scrollbar with the track inset below the 32px sticky header, distinct
   --bg-hover header (via the scoped rules). Columns are left-aligned text (vs
   the trades table's right-aligned numerics) and kept on one line. */
.data-sources-wrapper {
    max-height: 600px;
    overflow-y: auto;
    margin-top: 8px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}
.data-sources-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.data-sources-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-tertiary);
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}
.data-sources-table td {
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.data-sources-table tr:hover {
    background: var(--bg-hover);
}
.data-source-link {
    color: var(--primary);
    text-decoration: none;
    transition: opacity 0.15s;
}
.data-source-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Data preview pagination */
.data-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    flex-wrap: wrap;
}
.data-pagination-info {
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}
.data-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.data-page-btn {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 32px;
    text-align: center;
}
.data-page-btn:hover:not([disabled]) {
    background: var(--primary);
    border-color: var(--primary);
}
.data-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 700;
}
.data-page-btn[disabled] {
    opacity: 0.3;
    cursor: default;
}
.data-page-ellipsis {
    color: var(--text-muted);
    padding: 0 4px;
    font-size: 0.8rem;
}
.data-pagination-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.data-pagination-size select {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}
.data-preview-table .row-num {
    color: var(--text-muted);
    font-size: 0.7rem;
    opacity: 0.6;
}
/* Data rows are timestamps + numbers — never let a cell wrap to two lines
   (the wrapper scrolls horizontally instead). */
.data-preview-table th,
.data-preview-table td { white-space: nowrap; }

/* Data preview: the table fills its card flush — drop the inset padding so there's
   no gap between the table and its container. overflow:hidden clips the table to
   the card's rounded corners. Scoped to the table block only (the Summary block
   above and the shared .backtest-metrics-block elsewhere keep their padding). */
body[data-page-id="data-preview"] .dp-table-block {
    padding: 0;
    overflow: hidden;
}

/* Options analytics section (strategy detail / pipeline modal) ----------------- */
.opt-section .backtest-metrics-block { margin-top: 12px; }
.opt-grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 12px;
    margin-top: 12px;
}
.opt-grid2 > .backtest-metrics-block { margin-top: 0; }
@media (max-width: 860px) {
    .opt-grid2 { grid-template-columns: 1fr; }
}
.opt-chart-wrap {
    position: relative;
    width: 100%;
    margin-top: 6px;
}
.opt-struct-table { width: 100%; }

/* Monthly returns wrapper with scrollbar */
.monthly-returns-wrapper {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 8px;
}
.monthly-returns-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.monthly-returns-wrapper::-webkit-scrollbar-track:vertical {
    background: var(--bg-tertiary);
    margin-top: 32px;
    margin-bottom: 8px;
}
.monthly-returns-wrapper::-webkit-scrollbar-track:horizontal {
    background: var(--bg-tertiary);
    margin-left: 8px;
    margin-right: 8px;
}
.monthly-returns-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}
.monthly-returns-wrapper::-webkit-scrollbar-corner {
    background: transparent;
}

/* Returns tab buttons */
.returns-tab-buttons {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.returns-tab-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.returns-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.returns-tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Returns table (shared by daily, monthly, annual) */
.returns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.returns-table th,
.returns-table td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.returns-table th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: right;
    z-index: 1;
}

.returns-table th:first-child,
.returns-table td:first-child {
    text-align: left;
}

.returns-table td.positive {
    color: var(--success);
    font-weight: 600;
}

.returns-table td.negative {
    color: var(--danger);
    font-weight: 600;
}

.returns-table tr:hover {
    background: var(--bg-hover);
}

/* Trade list table */
.trades-table-wrapper {
    max-height: 600px;
    overflow-y: auto;
    margin-top: 8px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}

.trades-table-wrapper::-webkit-scrollbar,
.data-sources-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;   /* horizontal scrollbar when columns overflow (e.g., inside modal) */
}

/* Vertical scrollbar track — below sticky header, above rounded bottom corner */
.trades-table-wrapper::-webkit-scrollbar-track:vertical,
.data-sources-wrapper::-webkit-scrollbar-track:vertical {
    background: var(--bg-tertiary);
    margin-top: 32px;
    margin-bottom: 8px;
}

/* Horizontal scrollbar track — inset from both rounded bottom corners */
.trades-table-wrapper::-webkit-scrollbar-track:horizontal,
.data-sources-wrapper::-webkit-scrollbar-track:horizontal {
    background: var(--bg-tertiary);
    margin-left: 8px;
    margin-right: 8px;
}

.trades-table-wrapper::-webkit-scrollbar-thumb,
.data-sources-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

/* Corner where horizontal + vertical scrollbars meet — transparent so the
   rounded bottom-right corner of the wrapper shows through. */
.trades-table-wrapper::-webkit-scrollbar-corner,
.data-sources-wrapper::-webkit-scrollbar-corner {
    background: transparent;
}

.trades-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.trades-table th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    padding: 8px 10px;
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border-color);
    z-index: 1;
    white-space: nowrap;   /* keep multi-word headers (e.g. "Price PnL") on one line */
}
/* Header carrying an explanatory title tooltip (e.g. "Fee (incl.)"): hint that
   it's hoverable with a help cursor + subtle dotted underline. */
/* Always-visible legend under the trades table — explains the abbreviated columns
   (Lev, Fee) so the headers need no per-column hover tooltip; they render like any
   other column. */
.trades-legend {
    margin-top: 8px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.trades-table th:first-child,
.trades-table td:first-child {
    text-align: center;
    width: 40px;
}

.trades-table th:nth-child(2),
.trades-table td:nth-child(2) {
    text-align: center;
}

.trades-table td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    white-space: nowrap;
}

.trades-table tr:hover {
    background: var(--bg-hover);
}

.trades-table .side-long {
    color: var(--success);
    font-weight: 600;
}

.trades-table .side-short {
    color: var(--danger);
    font-weight: 600;
}

.trades-table .pnl-positive {
    color: var(--success);
    font-weight: 600;
}

.trades-table .pnl-negative {
    color: var(--danger);
    font-weight: 600;
}

/* No data message */
.backtest-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.85rem;
    gap: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    margin: 8px 0;
}

.backtest-no-data i {
    font-size: 1rem;
}

/* Drawdown chart specific */
.backtest-chart-container.drawdown-chart {
    height: 350px;
}

/* Collapsible section toggle */
.bt-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    width: 100%;
    text-align: left;
    transition: color var(--transition-fast);
}

.bt-section-toggle:hover {
    color: var(--primary-light);
}

.bt-section-toggle i.fa-chevron-down {
    transition: transform var(--transition-fast);
}

.bt-section-toggle.expanded i.fa-chevron-down {
    transform: rotate(180deg);
}

/* ── Idea Submission ──────────────────────────────────────────────────────── */

.idea-submit-card {
    display: flex;
    flex-direction: column;
    height: 100%;           /* force-fill the grid row height */
}
.idea-submit-body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Textarea blends into the card — no nested box. Background transparent,
   no border/radius/padding of its own; the card provides all chrome.
   flex: 1 + min-height: 0 makes it fill the card's available height so the
   left card's content reaches the bottom, matching the hint card's height. */
.idea-textarea {
    width: 100%;
    flex: 1;
    min-height: 140px;
    max-height: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0;
    resize: none;
    box-sizing: border-box;
}
.idea-textarea:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.idea-textarea::placeholder {
    color: var(--text-muted);
}
.idea-submit-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}
.idea-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color var(--transition-fast);
}
.idea-upload-btn:hover {
    color: var(--primary);
}
#ideaFileName {
    font-size: 0.8rem;
    color: var(--primary);
}
.idea-send-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.idea-send-btn:hover {
    opacity: 0.9;
}
.idea-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.idea-status {
    margin-top: 10px;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(41, 98, 255,0.1);
    color: var(--primary);
}
.idea-status-success {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}
.idea-status-error {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

/* ── Idea Submission: GCP-style guided input (centered title + input/hint pair) ── */

.idea-submit-wrapper {
    margin-bottom: 24px;
}
.idea-submit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .idea-submit-row { grid-template-columns: 1fr; }
}
.idea-submit-helper {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
/* Hint card — soft TV-blue tint, 12px radius to match the input card.
   Uses its own header + body structure (not .card-header so the TV
   border-bottom hairline doesn't conflict with the blue bg). */
.idea-hint-card {
    background: rgba(41, 98, 255, 0.08);
    border-radius: 12px;
    font-size: 0.88rem;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.idea-hint-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(41, 98, 255, 0.18);
}
.idea-hint-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.idea-hint-header h3 i {
    color: var(--primary);
    font-size: 13px;
}
.idea-hint-body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.idea-hint-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}
.idea-hint-list li {
    margin-bottom: 4px;
    line-height: 1.5;
}
.idea-hint-footnote {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    border-top: 1px solid rgba(41, 98, 255, 0.15);
    padding-top: 10px;
    margin-top: auto;
}

/* ── Chat Interface ───────────────────────────────────────────────────────── */

/* Chat page: constrain parent height chain so only messages scroll */
:is(body[data-page-id="chat"], .ai-dock) .main-content {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}
:is(body[data-page-id="chat"], .ai-dock) .content-wrapper {
    overflow: hidden;
}

.chat-wrapper {
    padding: 0 !important;
    display: flex;
    overflow: hidden !important;
    /* Override content-wrapper's flex:1 + overflow-y:auto — chat needs fixed layout */
    flex: 1;
    min-height: 0;
}
.chat-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    min-height: 0;
    flex: 1;
}
.chat-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px 0;
    flex-shrink: 0;
}
.chat-new-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.chat-new-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    /* Hard-stop horizontal overflow — a stray wide descendant (code block,
       image, oversized table) must clip itself, not scroll the column. */
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.chat-messages:hover { scrollbar-color: rgba(128,128,128,0.35) transparent; }
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.chat-messages:hover::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.35); }
.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    color: var(--text-muted);
    gap: 8px;
    padding: 40px 20px;
}
.chat-welcome i {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.6;
}
.chat-welcome h3 {
    color: var(--text);
    margin: 8px 0 4px;
    font-size: 20px;
}
.chat-welcome p {
    font-size: 14px;
    max-width: 420px;
}
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}
.chat-suggestion {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.chat-suggestion:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Messages — buildmidas assistant parity: user is a solid primary pill
   (max 80%), the assistant reply flows as a BARE document (max 85%), the
   Claude.ai / ChatGPT pattern — markdown lists / tables / code blocks are
   never cramped inside a rounded box. min-width: 0 on the row AND content
   is required so a wide <pre>/<table> clips inside its own overflow-x
   instead of blowing horizontal scroll onto the whole column. */
.chat-msg {
    display: flex;
    gap: 12px;
    max-width: 85%;
    flex-shrink: 0;
    min-width: 0;
}
.chat-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 80%;
}
.chat-msg-assistant {
    align-self: flex-start;
}
.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.chat-msg-user .chat-msg-avatar {
    background: var(--primary);
    color: white;
}
.chat-msg-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Without min-width:0 this flex child expands to its content's intrinsic
       width — a wide table blew a 933px row out of the 460px Ask-AI dock. */
    min-width: 0;
    max-width: 100%;
}
/* Tables + charts scroll INSIDE their own wrapper, never the window — any
   size renders. Headers stay on one line (the wrapper pans instead). */
.chat-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    margin: 8px 0;
}
.chat-table-wrap > table { margin: 0; }
.chat-msg-content th { white-space: nowrap; }
.chat-msg-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-msg-user .chat-msg-label {
    text-align: right;
}
.chat-msg-content {
    /* Bare assistant response — no bubble (buildmidas parity). */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    min-width: 0;
    max-width: 100%;
}
.chat-msg-user .chat-msg-content {
    /* Solid primary pill with white text (buildmidas parity). */
    background: var(--primary);
    border: none;
    color: #fff;
    padding: 10px 16px;
    border-radius: 18px;
    line-height: 1.5;
}
.chat-msg-user .chat-msg-content p { margin: 0; }
.chat-msg-content h2 {
    margin: 14px 0 8px;
    font-size: 16px;
}
.chat-msg-content h3 {
    margin: 12px 0 6px;
    font-size: 15px;
}
.chat-msg-content h4 {
    margin: 10px 0 5px;
    font-size: 14px;
}
.chat-msg-content ul, .chat-msg-content ol {
    margin: 4px 0;
    padding-left: 20px;
}
.chat-msg-content li {
    margin-bottom: 4px;
}
.chat-msg-content code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.chat-msg-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    font-size: 13px;
    margin: 8px 0;
    /* The pre must never outgrow its flex parent, or the whole message row
       overflows horizontally instead of the pre itself scrolling. */
    max-width: 100%;
    white-space: pre;
}
.chat-msg-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}
.chat-msg-content strong {
    color: var(--text);
    font-weight: 600;
}
.chat-msg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
    border: 1px solid var(--border-color);
}
.chat-msg-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 8px 0;
}
.chat-msg-content th,
.chat-msg-content td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}
.chat-msg-content th {
    background: var(--bg-tertiary);
    font-weight: 600;
}
.chat-msg-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}
.chat-msg-content blockquote {
    border-left: 3px solid var(--primary);
    margin: 8px 0;
    padding: 4px 12px;
    color: var(--text-muted);
}
.chat-msg-content p {
    margin: 0 0 8px;
}
.chat-msg-content p:last-child {
    margin-bottom: 0;
}

/* Action cards */
.chat-action {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 10px;
    padding: 10px 14px;
    align-self: flex-start;
    max-width: 90%;
}
.chat-action-icon {
    color: #22c55e;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.chat-action-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}
.chat-action-link {
    color: var(--primary);
    font-size: 0.82rem;
    text-decoration: none;
}
.chat-action-link:hover {
    text-decoration: underline;
}

/* Input area */
.chat-input-area {
    padding: 12px 20px 20px;
    flex-shrink: 0;
}
.chat-input-box {
    background: var(--card-bg);
    border: 1px solid rgba(41, 98, 255,0.25);
    border-radius: 24px;
    padding: 6px 6px 6px 6px;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-input-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(41, 98, 255,0.12);
}
.chat-input-row {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}
.chat-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    padding: 8px 0;
    resize: none;
    max-height: 150px;
    overflow-y: auto;
}
.chat-input:focus {
    outline: none;
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--transition-fast);
    position: relative;
}
.chat-attach-btn:hover {
    color: var(--primary);
}
.chat-attach-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}
.chat-send-btn:hover {
    opacity: 0.9;
}
.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.chat-file-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
    margin-bottom: 4px;
    background: rgba(41, 98, 255,0.06);
    border-radius: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
    width: fit-content;
}
.chat-file-preview i {
    color: var(--primary);
}
.chat-file-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 50%;
}
.chat-file-remove:hover {
    color: #ef4444;
}

/* ================================
   Live-market vocabulary (shared)
   Tighter, denser cards: 8px radius, 16px padding/gap, uppercase
   13/700 headers, --bg-secondary surfaces. Generic so any page can opt in.
   ================================ */
.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.metric-grid {
    display: grid;
    gap: 16px;
}
.metric-grid > .metric-card { margin-bottom: 0; }

.metric-grid--cols-3 { grid-template-columns: 1fr 320px 280px; }
.metric-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.metric-grid--auto   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 1600px) {
    .metric-grid--cols-3 { grid-template-columns: 1fr 320px; }
}
@media (max-width: 1200px) {
    .metric-grid--cols-3,
    .metric-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .metric-grid--cols-3,
    .metric-grid--cols-4 { grid-template-columns: 1fr; }
}

.card-title-sm {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.metric-kv {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}
.metric-kv-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.metric-kv-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.metric-kv-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.stat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    background: rgba(176, 184, 196, 0.1);
    color: var(--text-secondary);
    border-color: rgba(176, 184, 196, 0.3);
}
.stat-badge--success { background: rgba(39, 174, 96, 0.12);  color: var(--success);       border-color: rgba(39, 174, 96, 0.3); }
.stat-badge--info    { background: rgba(23, 162, 184, 0.12); color: var(--info);          border-color: rgba(23, 162, 184, 0.3); }
.stat-badge--warning { background: rgba(243, 156, 18, 0.12); color: var(--warning);       border-color: rgba(243, 156, 18, 0.3); }
.stat-badge--danger  { background: rgba(231, 76, 60, 0.12);  color: var(--danger);        border-color: rgba(231, 76, 60, 0.3); }
.stat-badge--neutral { background: rgba(108, 117, 125, 0.12);color: var(--text-muted);    border-color: rgba(108, 117, 125, 0.3); }

.tabular { font-variant-numeric: tabular-nums; }

/* ================================
   Pages that adopt the LM look
   Shared shell rules (card shell + header typography) apply to any page
   listed in the :is() selector. Add more page ids here to opt them in.
   Dashboard-only specifics stay scoped to the dashboard alone below.
   ================================ */
body[data-page-id] .card {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: visible;
}
body[data-page-id] .card-header {
    padding: 12px 16px;
}
body[data-page-id] .card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body[data-page-id] .card-header h3 i {
    color: var(--text-secondary);
    font-size: 13px;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .summary-card {
    display: block;
    padding: 16px;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .summary-card .card-icon { display: none; }
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .card-content h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .card-content .value {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid {
    gap: 16px;
}
@media (max-width: 1200px) {
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid .wide,
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid .full-width { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid { grid-template-columns: 1fr; }
}
/* Audit page: space the stacked section cards (summary tiles in the grid keep gap
   spacing, so exempt them); scrollable + paginated flagged-strategies list. */
body:is([data-page-id="audit"], [data-page-id="data-coverage"], [data-page-id="data-preview"], [data-page-id="portfolio"]) .card { margin-bottom: 16px; }
.audit-flagged-list { max-height: 560px; overflow-y: auto; }
/* Feed-row icons (audit flagged list + dashboard Recent Activity): drop the colored circle,
   keep the severity/role-colored glyph — declutters the dense list, color still conveys state. */
body[data-page-id="audit"] .audit-flagged-list .activity-icon,
body[data-page-id="dashboard"] .activity-feed .activity-icon { background: transparent; width: 24px; font-size: 1rem; }
/* Stats tiles reuse the Live Market "Futures Metrics" key-value card styling
   (shared here so the audit page can use the same classes). */
.lm-fut-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lm-fut-kv { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; }
.lm-fut-kv-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; }
.lm-fut-kv-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.lm-fut-kv-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.lm-fut-kv-value.pos { color: #10b981; }
.lm-fut-kv-value.neg { color: #ef4444; }
/* Tighten chart card inner padding to match LM density */
body[data-page-id="dashboard"] .chart-container {
    padding: 16px;
    height: 280px;
}

/* Hypotheses outer cards use --bg-secondary (matching LM .lm-card / "Flow &
   Regime Analytics" section). The inner .hypothesis-item rows already use
   --bg-tertiary (matching LM .lm-micro-kv sub-cards), so the two-layer
   contrast looks identical to the LM analytics section. */
body[data-page-id="hypotheses"] .card {
    background: var(--bg-secondary);
}
/* Agents page — same two-layer pattern. Outer .agent-card = --bg-secondary,
   inner .agent-stat tiles already use --bg-tertiary. Grid gap tightened
   to 16px to match LM density. */
body[data-page-id="agents"] .card {
    background: var(--bg-secondary);
}
body[data-page-id="agents"] .agent-grid {
    gap: 16px;
}

/* Hypothesis detail page — adopt the LM card vocabulary for .sd-card and
   the inner .hyp-run-card. Scoped under body[data-page-id="hypothesis-detail"]
   so strategy.html (which also uses .sd-card) keeps its existing styling. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-card {
    background: var(--bg-secondary);
    border: none;
    border-radius: 8px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-card-header {
    padding: 12px 16px;
    border-bottom: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-card-header i {
    color: var(--text-secondary);
    font-size: 13px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-card-body {
    padding: 16px;
}
body[data-page-id="hypothesis-detail"] .hyp-run-card {
    background: transparent;
    border: none;
    border-radius: 8px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-header {
    background: var(--bg-secondary);
    border: none;
    border-radius: 8px;
    padding: 16px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-back-btn {
    border: none;
    background: var(--bg-tertiary);
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: transparent;
}
/* First-section inner elements on strategy detail (iteration badge, abandon
   banner, stats row, stat tiles) — LM-ize to match the borderless card shell. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-iteration-badge {
    border-radius: 20px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-abandon-banner {
    border: none;
    border-left: 3px solid var(--danger);
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-stats-row {
    border-top: none;
    padding-top: 0;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-stat {
    border: none;
    border-radius: 8px;
}
/* Strategy-detail "Parameters" section wraps the table in .sd-params-section
   (different class than the pipeline modal's .stage-detail-subsection).
   Match the pipeline subsection look: --bg-tertiary bg + 3px primary
   left-edge accent + no top-divider. */
body[data-page-id="strategy-detail"] .sd-params-section {
    margin-top: 14px;
    padding: 14px 14px 14px 18px;
    background: var(--bg-tertiary);
    border: none;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    border-top: none;
}
/* "Parameters" heading above the params table — LM uppercase 13/700 muted
   to match other section sub-headings (Walk-Forward, Holdout, etc.). */
body[data-page-id="strategy-detail"] .sd-params-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
/* Tag/badge pills in the How It Works section — drop the 1px border, keep
   the background tint + pill shape (20px radius). */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .research-badge,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .research-tag {
    border: none;
}
/* Paper/Live hypothesis section: keep the tag badges on ONE clipped line with a
   "+N more" expander (same pattern as the hypotheses-page cards' .hypothesis-footer).
   Scoped to these pages so strategy/hypothesis-detail badges still wrap freely. */
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges {
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges .research-badge,
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges .research-tag {
    flex-shrink: 0;
    white-space: nowrap;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges .hyp-tag-extra {
    display: none;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges.tags-shown {
    flex-wrap: wrap;
    overflow: visible;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges.tags-shown .hyp-tag-extra {
    display: inline-flex;
}
body:is([data-page-id="paper-trading"], [data-page-id="live-trading"]) .research-badges.tags-shown .tag-more {
    display: none;
}
/* Show-all-parameters button + View Source Code wrapper — drop the 1px
   border so they match the borderless LM look. The bg tints (--bg-tertiary
   inside .code-viewer-toggle, purple tint on params-toggle) still read. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="pipeline"]) .params-toggle-btn,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="pipeline"]) .code-viewer {
    border: none;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"], [data-page-id="pipeline"]) .params-toggle-btn {
    border-radius: 20px;
}
/* Verdict badges in Backtest Review + Analysis sections — drop the 1px
   colored border, keep the semantic bg tint and text color. Full pill. */
body:is([data-page-id="strategy-detail"], [data-page-id="pipeline"]) .opt-phase-badge {
    border: none;
    border-radius: 20px;
}

/* Pipeline page — drop the divider line under each run-card header
   (matches site-wide borderless LM look). Also override the shared :is()
   card bg from --bg-card to --bg-secondary so the --bg-tertiary stage
   icons inside get the same contrast they have on strategy-detail's
   sd-card (--bg-secondary). */
body[data-page-id="pipeline"] .pipeline-run-card {
    background: var(--bg-secondary);
}
body[data-page-id="pipeline"] .pipeline-run-header {
    border-bottom: none;
    padding: 12px 16px;
}
/* Pipeline stage icons — drop the 2px ring around each circle. State is
   still legible via bg color (green=completed, purple=active with glow,
   red=failed, --bg-tertiary=pending) and the existing active-state
   box-shadow glow. Same treatment for the strategy detail page's timeline
   icons (.sd-timeline-icon) since they share the stages-flow pattern. */
body[data-page-id="pipeline"] .pipeline-stage-icon,
body[data-page-id="pipeline"] .pipeline-stage.completed .pipeline-stage-icon,
body[data-page-id="pipeline"] .pipeline-stage.active .pipeline-stage-icon,
body[data-page-id="pipeline"] .pipeline-stage.failed .pipeline-stage-icon,
body[data-page-id="strategy-detail"] .sd-timeline-icon,
body[data-page-id="strategy-detail"] .sd-timeline-stage.completed .sd-timeline-icon,
body[data-page-id="strategy-detail"] .sd-timeline-stage.active .sd-timeline-icon,
body[data-page-id="strategy-detail"] .sd-timeline-stage.failed .sd-timeline-icon {
    border: none;
}
/* Chat page — apply LM styling to interactive controls. No .card shell
   so we skip the :is() expansion; just update the buttons and input box
   to match the .filter-control pill convention. */
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn {
    background: var(--bg-tertiary);
    border: none;
    border-radius: 20px;
    color: var(--text-secondary);
    padding: 6px 14px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: transparent;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-input-box {
    background: var(--bg-tertiary);
    border: none;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-input-box:focus-within {
    background: var(--bg-hover);
    box-shadow: none;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-suggestion {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-suggestion:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: transparent;
}
/* Chat messages — hide the avatar circle and sender/responder label so
   only the bubble text remains. Bump the bubble corner radius to 20px
   to match the LM pill convention. */
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-avatar,
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-label {
    display: none;
}
/* (bubble-radius override retired — assistant messages are bare document
   flow and the user pill carries its own 18px radius, buildmidas parity) */

/* Chat page — multi-session sidebar + centered max-width content.
   Sidebar holds past conversations (load / switch / delete). The chat
   content (messages + input area) is centered at 800px max-width inside
   .chat-content-wrap so it reads as a focused chat column on wide screens.
   Bubble/avatar/suggestion/input styling is intentionally left alone —
   only page layout changes here. */
:is(body[data-page-id="chat"], .ai-dock) .chat-page-flex {
    display: flex;
    height: 100%;
    min-height: 0;
    flex: 1;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar.collapsed {
    width: 0;
    border-right: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn-side {
    flex: 1;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 20px;
    color: var(--text-secondary);
    padding: 8px 14px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn-side:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-new-btn-side i {
    margin-right: 6px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-toggle,
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-expand {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-toggle:hover,
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-expand:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar-expand {
    display: none;
    align-self: flex-start;
    margin: 12px 4px 0 6px;
    flex-shrink: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-sidebar.collapsed + .chat-sidebar-expand {
    display: inline-flex;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-empty {
    padding: 16px 14px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    background: transparent;
    font-size: 0.86rem;
    line-height: 1.3;
    transition: background var(--transition-fast);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item:hover {
    background: var(--bg-hover);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item.active {
    background: rgba(41, 98, 255, 0.14);
    color: var(--text-primary);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    line-height: 1.3;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-delete {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item:hover .chat-session-delete,
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-delete:focus {
    opacity: 1;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-session-item .chat-session-delete:hover {
    /* Destructive affordance (autovalueuae pattern: muted -> red on hover). */
    background: var(--bg-card);
    color: var(--danger-light);
}
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap > .chat-container {
    flex: 1;
    min-height: 0;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap .chat-messages,
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap .chat-input-area,
:is(body[data-page-id="chat"], .ai-dock) .chat-content-wrap .chat-toolbar {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Settings page — drop the divider lines between rows (LM borderless
   look) and give inputs the subtle .filter-control pill treatment. */
body[data-page-id="settings"] .settings-row {
    border-bottom: none;
}
body[data-page-id="settings"] .settings-control input[type="text"],
body[data-page-id="settings"] .settings-control input[type="number"],
body[data-page-id="settings"] .settings-control input[type="password"],
body[data-page-id="settings"] .settings-control select {
    background: var(--bg-tertiary);
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    transition: background var(--transition-fast);
}
body[data-page-id="settings"] .settings-control input:hover,
body[data-page-id="settings"] .settings-control select:hover,
body[data-page-id="settings"] .settings-control input:focus,
body[data-page-id="settings"] .settings-control select:focus {
    background: var(--bg-hover);
}
/* Change-password Save — pill button matching the settings input row.
   There is no global .btn/.btn-primary class in this stylesheet. */
.settings-control .settings-pill-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;   /* match the 26px height of the settings pill inputs */
    cursor: pointer;
    transition: background var(--transition-fast);
}
.settings-control .settings-pill-btn:hover { background: var(--primary-dark); }
.settings-control .settings-pill-btn[disabled] { opacity: 0.55; cursor: default; }
/* Change-password row: larger controls than the compact settings pills. */
#pwRow .settings-control input[type="password"] {
    font-size: 0.95rem;
    padding: 0 18px;
    width: 220px;
    height: 36px;
    box-sizing: border-box;
}
#pwRow .settings-pill-btn {
    font-size: 0.95rem;
    padding: 0 24px;
    height: 36px;
    box-sizing: border-box;
}
/* Pipeline stage-detail modal — adopt LM card vocabulary. Outer modal
   card uses --bg-secondary, inner subsections use --bg-tertiary
   (two-layer pattern). Header and section dividers removed. */
body[data-page-id="pipeline"] .stage-detail-card {
    background: var(--bg-secondary);
    border: none;
    border-radius: 8px;
}
body[data-page-id="pipeline"] .stage-detail-header {
    border-bottom: none;
    padding: 12px 16px;
}
body[data-page-id="pipeline"] .stage-detail-header h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body[data-page-id="pipeline"] .stage-detail-content {
    padding: 16px;
}
body[data-page-id="pipeline"] .stage-detail-summary {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
}
body[data-page-id="pipeline"] .stage-detail-section {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
}
body[data-page-id="pipeline"] .stage-detail-subsection,
body[data-page-id="hypothesis-detail"] .sd-card .stage-detail-subsection,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-subsection {
    border: none;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

/* Strategy-detail + hypothesis-detail: subsections/params/explanation lose the
   3px primary left stripe (operator request 2026-08-02) — flat --bg-tertiary
   tiles; the pipeline MODAL keeps its accent. padding-left drops to 14px to
   stay symmetric now that the stripe no longer eats 3px. */
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .stage-detail-subsection,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .sd-card .stage-detail-subsection,
body[data-page-id="strategy-detail"] .sd-params-section,
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .strategy-explanation {
    border-left: none;
    padding-left: 14px;
}
body:is([data-page-id="hypothesis-detail"], [data-page-id="strategy-detail"]) .strategy-explanation {
    padding-left: 18px;
}
/* Optimization-section inner elements on the strategy detail page —
   sensitivity status alerts, sensitivity cards, cliff tag. LM-ize. */
body[data-page-id="strategy-detail"] .sd-card .sensitivity-status,
body[data-page-id="pipeline"] .stage-detail-card .sensitivity-status {
    border: none;
    border-radius: 8px;
}
body[data-page-id="strategy-detail"] .sd-card .sensitivity-card,
body[data-page-id="pipeline"] .stage-detail-card .sensitivity-card {
    border: none;
    border-radius: 8px;
    background: var(--bg-tertiary);
}
body[data-page-id="strategy-detail"] .sd-card .param-cliff-tag,
body[data-page-id="pipeline"] .stage-detail-card .param-cliff-tag {
    border-radius: 20px;
    padding: 1px 8px;
}
body[data-page-id="strategy-detail"] .sd-card .analysis-feedback,
body[data-page-id="hypothesis-detail"] .sd-card .analysis-feedback,
body[data-page-id="pipeline"] .stage-detail-card .analysis-feedback {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
}
/* Inside the pipeline modal AND the strategy detail page, drop the 1px
   borders on inner cards so the VERIFYING layer rows, BACKTESTING metric
   cards, and verification layer grid cards all read as clean LM-style
   tiles on --bg-tertiary. */
body[data-page-id="pipeline"] .stage-detail-card .layer-detail,
body[data-page-id="pipeline"] .stage-detail-card .stage-metric-card,
body[data-page-id="pipeline"] .stage-detail-card .stage-layer-card,
body[data-page-id="strategy-detail"] .sd-card .layer-detail,
body[data-page-id="strategy-detail"] .sd-card .stage-metric-card,
body[data-page-id="strategy-detail"] .sd-card .stage-layer-card,
body[data-page-id="hypothesis-detail"] .sd-card .stage-metric-card {
    border: none;
}
/* Section headers ("Strategy Code", "Verification", "Backtest", etc.) —
   LM-style uppercase 13/700 in --text-secondary, with icons matching.
   Replaces the primary-purple icon tint. */
body[data-page-id="pipeline"] .stage-detail-card .stage-detail-section h4,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body[data-page-id="pipeline"] .stage-detail-card .stage-detail-section h4 i,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-section h4 i {
    color: var(--text-secondary);
    font-size: 13px;
}
/* Backtest section block titles ("Capital", "Performance", "Trading",
   "Risk", "Timing") — drop the divider line and let the title stand on
   its own. */
body[data-page-id="pipeline"] .stage-detail-card .backtest-metrics-block-title,
body[data-page-id="strategy-detail"] .sd-card .backtest-metrics-block-title {
    border-bottom: none;
    padding-bottom: 0;
}
/* Metric cards — kill the purple-tinted gradient and use solid
   --bg-tertiary to match LM .lm-micro-kv tiles. */
body[data-page-id="pipeline"] .stage-detail-card .stage-metric-card,
body[data-page-id="strategy-detail"] .sd-card .stage-metric-card,
body[data-page-id="hypothesis-detail"] .sd-card .stage-metric-card {
    background: var(--bg-tertiary);
}
/* Pass/Fail/Pending stage badges — pill shape to match LM badges. */
body[data-page-id="pipeline"] .stage-detail-card .stage-badge,
body[data-page-id="strategy-detail"] .sd-card .stage-badge {
    border-radius: 20px;
}
/* Feedback / code-block container — drop the 1px border, stay on
   --bg-tertiary. */
body[data-page-id="pipeline"] .stage-detail-card .stage-detail-feedback-box,
body[data-page-id="strategy-detail"] .sd-card .stage-detail-feedback-box {
    border: none;
}
/* Params / walk-forward tables — drop the hard row dividers so the
   rows flow together, matching the strategies table LM treatment. The
   header row background + hover tint still read without a divider. */
body[data-page-id="pipeline"] .stage-detail-card .stage-params-table th,
body[data-page-id="pipeline"] .stage-detail-card .stage-params-table td,
body[data-page-id="pipeline"] .stage-detail-card .stage-wf-table th,
body[data-page-id="pipeline"] .stage-detail-card .stage-wf-table td,
body[data-page-id="strategy-detail"] .sd-card .stage-params-table th,
body[data-page-id="strategy-detail"] .sd-card .stage-params-table td,
body[data-page-id="strategy-detail"] .sd-card .stage-wf-table th,
body[data-page-id="strategy-detail"] .sd-card .stage-wf-table td {
    border-bottom: none;
}
/* Params / Walk-Forward tables: flat rows (inherit wrapper). No zebra. */
/* Best Parameters comparison table (3-column: Parameter / Original /
   Optimized) — same LM treatment as .stage-params-table: no dividers,
   two-row zebra, brighter param-name column. */
body[data-page-id="pipeline"] .stage-detail-card .params-comparison-table th,
body[data-page-id="pipeline"] .stage-detail-card .params-comparison-table td,
body[data-page-id="strategy-detail"] .sd-card .params-comparison-table th,
body[data-page-id="strategy-detail"] .sd-card .params-comparison-table td {
    border-bottom: none;
}
body[data-page-id="pipeline"] .stage-detail-card .params-comparison-table td:first-child,
body[data-page-id="strategy-detail"] .sd-card .params-comparison-table td:first-child {
    color: var(--text-secondary);
}
/* Best Parameters comparison: flat rows (inherit wrapper). No zebra. */
/* Daily / Monthly / Annual tab buttons in the Returns section — LM pill
   treatment. Default: --bg-tertiary pill with no border, --bg-hover on
   hover, solid --primary when active. */
body[data-page-id="pipeline"] .stage-detail-card .returns-tab-btn,
body[data-page-id="strategy-detail"] .sd-card .returns-tab-btn {
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    /* --bg-hover (the lightest neutral) so the pill reads consistently whether it sits
       on the card body (Backtest section) or on a --bg-tertiary subsection (Optimization
       section's Optimized Backtest) — the latter shares --bg-tertiary, which made
       --bg-tertiary tabs blend in. Hover still gives feedback via the text-color lift. */
    background: var(--bg-hover);
    color: var(--text-secondary);
}
body[data-page-id="pipeline"] .stage-detail-card .returns-tab-btn:hover,
body[data-page-id="strategy-detail"] .sd-card .returns-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
body[data-page-id="pipeline"] .stage-detail-card .returns-tab-btn.active,
body[data-page-id="strategy-detail"] .sd-card .returns-tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}
/* Trades table inside the backtest modal AND on the strategy detail page
   — remove the outer border, the heavy 2px divider under the header, and
   the inter-row dividers. The wrapper gets --bg-tertiary so the whole
   table reads as a raised tile distinct from the section --bg-secondary;
   zebra stripe on even rows provides scannability without dividers. */
body[data-page-id="pipeline"] .stage-detail-card .trades-table-wrapper,
body[data-page-id="strategy-detail"] .sd-card .trades-table-wrapper,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-wrapper,
body[data-page-id="strategy-detail"] .sd-card .data-sources-wrapper {
    border: none;
    /* Top 32px band uses --bg-hover to match the sticky header row — covers
       the 6px scrollbar-column area in the header region. Below 32px, the
       wrapper returns to --bg-tertiary for the scrollable body. */
    background: linear-gradient(to bottom, var(--bg-hover) 32px, var(--bg-tertiary) 32px);
    border-radius: 8px;
}
body[data-page-id="pipeline"] .stage-detail-card .trades-table th,
body[data-page-id="pipeline"] .stage-detail-card .trades-table td,
body[data-page-id="strategy-detail"] .sd-card .trades-table th,
body[data-page-id="strategy-detail"] .sd-card .trades-table td,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table th,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table td,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table th,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table td {
    border-bottom: none;
}
/* Sticky header on --bg-hover — one shade lighter than the --bg-tertiary
   rows/wrapper, so it reads as a distinct label row on both themes. Using
   --bg-card breaks in the TV palette where card == page-well (invisible).
   Explicit height: 32px pins the header row so it aligns pixel-perfectly
   with the 32px wrapper-gradient top band and the scrollbar-track
   `margin-top: 32px`. Without this, font-size cascade can produce 29-30px
   header heights that don't match the 32px gradient, leaving a visible
   1-3px band below the header text. */
body[data-page-id="pipeline"] .stage-detail-card .trades-table th,
body[data-page-id="strategy-detail"] .sd-card .trades-table th,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table th,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table th {
    background: var(--bg-hover);
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}
/* Rows stay flat (inherit wrapper --bg-tertiary). Hover uses primary tint
   for clear distinction from flat rows. */
body[data-page-id="pipeline"] .stage-detail-card .trades-table tbody tr:hover,
body[data-page-id="strategy-detail"] .sd-card .trades-table tbody tr:hover,
body[data-page-id="pipeline"] .stage-detail-card .data-sources-table tbody tr:hover,
body[data-page-id="strategy-detail"] .sd-card .data-sources-table tbody tr:hover {
    background: rgba(41, 98, 255, 0.12);
}
/* Returns table (Daily / Monthly / Annual tabs, above All Trades) — same
   LM treatment on BOTH pages: wrapper tile on --bg-tertiary, header on
   --bg-card, row dividers removed, zebra stripe on even rows,
   primary-tint hover. */
body[data-page-id="pipeline"] .stage-detail-card .monthly-returns-wrapper,
body[data-page-id="strategy-detail"] .sd-card .monthly-returns-wrapper {
    /* Top 32px band = --bg-hover (matches sticky header), below = --bg-tertiary
       (rows). Covers the 6px scrollbar-column area in the header region so
       the header row reads as a single continuous band. */
    background: linear-gradient(to bottom, var(--bg-hover) 32px, var(--bg-tertiary) 32px);
    border-radius: 8px;
}
body[data-page-id="pipeline"] .stage-detail-card .returns-table th,
body[data-page-id="pipeline"] .stage-detail-card .returns-table td,
body[data-page-id="strategy-detail"] .sd-card .returns-table th,
body[data-page-id="strategy-detail"] .sd-card .returns-table td {
    border-bottom: none;
}
body[data-page-id="pipeline"] .stage-detail-card .returns-table th,
body[data-page-id="strategy-detail"] .sd-card .returns-table th {
    background: var(--bg-hover);
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}
body[data-page-id="pipeline"] .stage-detail-card .returns-table tbody tr:hover,
body[data-page-id="strategy-detail"] .sd-card .returns-table tbody tr:hover {
    background: rgba(41, 98, 255, 0.12);
}

/* Strategies table — drop row dividers, add subtle zebra striping so rows
   are still scannable across the 9-column layout. Hover bg still wins. */
body[data-page-id="strategies"] table th,
body[data-page-id="strategies"] table td {
    border-bottom: none;
}
body[data-page-id="strategies"] .pagination-controls,
body[data-page-id="hypotheses"] .pagination-controls,
body[data-page-id="pipeline"] .pagination-controls,
body[data-page-id="paper-trading"] .pagination-controls,
body[data-page-id="live-trading"] .pagination-controls {
    border-top: none;
}
body[data-page-id="strategies"] table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.025);
}

/* Light-mode flips for the remaining white-overlay stripe/hover rules that
   the earlier light-theme block missed. rgba(255,255,255,X) on a white card
   is invisible — swap to rgba(0,0,0,X) to darken instead. */
html[data-theme="light"] body[data-page-id="strategies"] table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .stage-metric:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .stage-params-table tr:hover td,
html[data-theme="light"] .stage-wf-table tr:hover td,
html[data-theme="light"] .params-comparison-table tr:hover td {
    background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .modal-close-btn:hover,
html[data-theme="light"] .stage-detail-header .close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Light-mode table-header fixes — in dark mode, table headers using
   var(--bg-card) are DARKER than the --bg-tertiary wrapper (recessed
   label). In light mode, --bg-card is #ffffff (same as card) and
   --bg-tertiary is #f0f2f5 (slight gray) — so headers become invisible
   against the card. Override to use a distinct darker-gray tint so the
   dark-mode visual hierarchy (wrapper bright, header recessed, rows
   in between) is preserved. */
html[data-theme="light"] .trades-table th,
html[data-theme="light"] .returns-table th,
html[data-theme="light"] .data-sources-table th,
html[data-theme="light"] .pt-trades-table th {
    background: var(--bg-hover);
}
html[data-theme="light"] .stage-params-table th,
html[data-theme="light"] .stage-wf-table th,
html[data-theme="light"] .params-comparison-table th {
    background: rgba(41, 98, 255, 0.12);
}

/* ================================
   TradingView look — dashboard only, dark mode only. Applies cool
   blue-gray palette (#131722 page, #1e222d panels), TradingView blue
   accent (#2962FF), teal-green / soft-red for up/down, reintroduces
   subtle 1px panel borders, moderate 6px radii, and non-uppercase
   card titles. The `html:not([data-theme="light"])` guard ensures TV
   overrides only apply in dark mode — light theme keeps its palette.
   ================================ */
html:not([data-theme="light"]) body[data-page-id] {
    --bg-primary:   #131722;
    --bg-secondary: #131722;
    --bg-card:      #131722;
    --bg-tertiary:  #1e222d;
    --bg-hover:     #2a2e39;

    --text-primary:   #d1d4dc;
    --text-secondary: #787b86;
    --text-muted:     #555963;

    --border-color: #2a2e39;
    --border-light: #363a45;

    --primary:        #2962FF;
    --primary-dark:   #1e4dd9;
    --primary-light:  #5389ff;

    --success:        #26a69a;
    --success-light:  #4fb8ac;
    --danger:         #ef5350;
    --danger-light:   #f38481;
}
html:not([data-theme="light"]) body[data-page-id] .card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    overflow: hidden;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.chart-card {
    border: none;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.chart-card .card-header {
    border-bottom: none;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.summary-card,
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card:has(> .summary-card),
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.full-width {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="dashboard"] .card.full-width {
    border: none;
}
/* Data Coverage + Portfolio sections: borderless + 12px radius, matching dashboard cards. */
html:not([data-theme="light"]) body:is([data-page-id="data-coverage"], [data-page-id="data-preview"], [data-page-id="portfolio"]) .card {
    border: none;
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="pipeline"] .pipeline-run-card {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="agents"] .agent-card {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="settings"] .card {
    border: none;
    border-radius: 12px;
}
/* Equity curve + Drawdown chart containers — merge with the surrounding
   card/page background so the chart sits flush instead of as a raised
   --bg-tertiary tile. Scoped to strategy detail + pipeline modal. */
html:not([data-theme="light"]) body[data-page-id="strategy-detail"] .backtest-chart-container,
html:not([data-theme="light"]) body[data-page-id="pipeline"] .backtest-chart-container {
    background: transparent;
}
html:not([data-theme="light"]) body[data-page-id="strategies"] .card {
    border: none;
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="strategies"] .card .card-header {
    border-bottom: none;
}
html:not([data-theme="light"]) body[data-page-id="hypotheses"] .card {
    border-radius: 12px;
}
html:not([data-theme="light"]) body[data-page-id="hypotheses"] .card:not(.idea-submit-card) {
    border: none;
}
/* "Submit Your Idea" input card — hollow outlined variant: card bg matches
   the page well (--bg-primary), only the 1px border + 12px radius define
   the card. Minimal look; departs from GCP's "paper on desk" contrast. */
html:not([data-theme="light"]) body[data-page-id="hypotheses"] .card.idea-submit-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
/* Filter controls + per-page dropdown: now that --bg-secondary equals
   the page bg, give them --bg-tertiary so they read as raised pills
   above the page. Hover still goes to --bg-hover. */
html:not([data-theme="light"]) body[data-page-id] .filter-control,
html:not([data-theme="light"]) body[data-page-id] .pag-per-page {
    background: var(--bg-hover);
}
html:not([data-theme="light"]) body[data-page-id] .filter-control:hover,
html:not([data-theme="light"]) body[data-page-id] .filter-control:focus,
html:not([data-theme="light"]) body[data-page-id] .pag-per-page:hover {
    background: rgba(255, 255, 255, 0.12);
}
html:not([data-theme="light"]) body[data-page-id] .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
html:not([data-theme="light"]) body[data-page-id] .card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}
html:not([data-theme="light"]) body[data-page-id] .card-header h3 i {
    color: var(--primary);
    font-size: 13px;
}
html:not([data-theme="light"]) body[data-page-id] .card-content h3 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 8px;
}
html:not([data-theme="light"]) body[data-page-id] .card-content .value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
html:not([data-theme="light"]) body[data-page-id] .sidebar,
html:not([data-theme="light"]) body[data-page-id] .header {
    background: var(--bg-secondary);
}
html:not([data-theme="light"]) body[data-page-id] .header {
    border-bottom: 1px solid var(--border-color);
}
html:not([data-theme="light"]) body[data-page-id] .sidebar::after {
    background: var(--border-color);
}
html:not([data-theme="light"]) body[data-page-id] .activity-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}
html:not([data-theme="light"]) body[data-page-id] .chart-container {
    padding: 12px 16px 16px;
    background: var(--bg-card);
}

/* ================================
   TradingView light variant — dashboard only, light mode only. Same
   TV aesthetic but inverted: page = very light blue-gray (#f0f3fa),
   panels = white, borders = soft gray. Accent + up/down colors stay.
   ================================ */
html[data-theme="light"] body[data-page-id] {
    --bg-primary:   #ffffff;
    --bg-secondary: #ffffff;
    --bg-card:      #ffffff;
    --bg-tertiary:  #f8f9fd;
    --bg-hover:     #e8ebf3;

    --text-primary:   #333333;
    --text-secondary: #484848;
    --text-muted:     #717171;

    --border-color: #e0e3eb;
    --border-light: #eef0f4;

    --primary:        #2962FF;
    --primary-dark:   #1e4dd9;
    --primary-light:  #5389ff;

    --success:        #26a69a;
    --success-light:  #4fb8ac;
    --danger:         #ef5350;
    --danger-light:   #f38481;
}
html[data-theme="light"] body[data-page-id] .card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    overflow: hidden;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.chart-card {
    border: none;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.chart-card .card-header {
    border-bottom: none;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.summary-card,
html[data-theme="light"] body[data-page-id="dashboard"] .card:has(> .summary-card),
html[data-theme="light"] body[data-page-id="dashboard"] .card.full-width {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="dashboard"] .card.full-width {
    border: none;
}
/* Data Coverage + Portfolio sections: borderless + 12px radius, matching dashboard cards. */
html[data-theme="light"] body:is([data-page-id="data-coverage"], [data-page-id="data-preview"], [data-page-id="portfolio"]) .card {
    border: none;
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="pipeline"] .pipeline-run-card {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="agents"] .agent-card {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="settings"] .card {
    border: none;
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="strategy-detail"] .backtest-chart-container,
html[data-theme="light"] body[data-page-id="pipeline"] .backtest-chart-container {
    background: transparent;
}
html[data-theme="light"] body[data-page-id="strategies"] .card {
    border: none;
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="strategies"] .card .card-header {
    border-bottom: none;
}
html[data-theme="light"] body[data-page-id="hypotheses"] .card {
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id="hypotheses"] .card:not(.idea-submit-card) {
    border: none;
}
html[data-theme="light"] body[data-page-id="hypotheses"] .card.idea-submit-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
html[data-theme="light"] body[data-page-id] .filter-control,
html[data-theme="light"] body[data-page-id] .pag-per-page {
    background: var(--bg-hover);
}
html[data-theme="light"] body[data-page-id] .filter-control:hover,
html[data-theme="light"] body[data-page-id] .filter-control:focus,
html[data-theme="light"] body[data-page-id] .pag-per-page:hover {
    background: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] body[data-page-id] .card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
html[data-theme="light"] body[data-page-id] .card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}
html[data-theme="light"] body[data-page-id] .card-header h3 i {
    color: var(--primary);
    font-size: 13px;
}
html[data-theme="light"] body[data-page-id] .card-content h3 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 8px;
}
html[data-theme="light"] body[data-page-id] .card-content .value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] body[data-page-id] .sidebar,
html[data-theme="light"] body[data-page-id] .header {
    background: var(--bg-secondary);
}
html[data-theme="light"] body[data-page-id] .header {
    border-bottom: 1px solid var(--border-color);
}
html[data-theme="light"] body[data-page-id] .sidebar::after {
    background: var(--border-color);
}
html[data-theme="light"] body[data-page-id] .activity-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}
html[data-theme="light"] body[data-page-id] .chart-container {
    padding: 12px 16px 16px;
    background: var(--bg-card);
}



/* Per-iteration result line (Iteration History) */
.iteration-result { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.85rem; color: var(--text-secondary); }
.iteration-result-sep { color: var(--text-muted); }
.iteration-result-empty { color: var(--text-muted); font-style: italic; }

/* Audit page — borderless stat tiles + section cards (user preference). In the
   dark TV palette the card bg equals the page bg, so the 1px border was the only
   separation; drop it and use --bg-tertiary contrast instead. Light theme keeps
   its card bg (white on off-white reads fine without a border). Placed after the
   TV blocks so it wins on source order at equal specificity. */
body:is([data-page-id="audit"], [data-page-id="dashboard"], [data-page-id="autofix"], [data-page-id="alignment"], [data-page-id="data-coverage"], [data-page-id="portfolio"]) .lm-fut-kv { border: none; }
html:not([data-theme="light"]) body[data-page-id="audit"] .card {
    border: none;
    background: var(--bg-tertiary);
}
html[data-theme="light"] body[data-page-id="audit"] .card { border: none; }



/* ============================================================
   Self-Heal page (autofix.html) — site primitives + theme VARIABLES only
   (no hardcoded hex; --sh = per-status accent → color-mix tints adapt to theme).
   ============================================================ */
/* Full-width borderless cards + 12px radius, matching the dashboard's Factory Health
   card (override the TV 1px-border/6px rule; html-prefixed to win specificity). */
html:not([data-theme="light"]) body:is([data-page-id="autofix"], [data-page-id="alignment"]) .card,
html[data-theme="light"] body:is([data-page-id="autofix"], [data-page-id="alignment"]) .card { border: none; border-radius: 12px; }
body[data-page-id="autofix"] #autofixContent > .card,
body[data-page-id="alignment"] #alignmentContent > .card { margin-bottom: 20px; }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-stats { margin-bottom: 20px; }
body[data-page-id="autofix"] #autofixContent > .card:last-child,
body[data-page-id="alignment"] #alignmentContent > .card:last-child { margin-bottom: 0; }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-intro { padding: 14px 16px; font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-intro b { color: var(--text-primary); }
body:is([data-page-id="autofix"], [data-page-id="alignment"]) .sh-runs-body { padding: 14px 16px; }

.sh-armed { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.sh-armed.on  { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.sh-armed.off { background: var(--bg-tertiary); color: var(--text-muted); }

.sh-run { --sh: var(--text-muted); background: var(--bg-tertiary); border-radius: 8px; border-left: 3px solid var(--sh); padding: 14px 16px; margin-bottom: 12px; }
.sh-run:last-child { margin-bottom: 0; }
.sh-run.merged          { --sh: var(--success); }
.sh-run.verified_pushed { --sh: var(--primary); }
.sh-run.needs_review, .sh-run.merged_local { --sh: var(--warning); }
.sh-run.rejected, .sh-run.error { --sh: var(--danger); }

.sh-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-ic { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--sh); }
.sh-name { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.sh-status { padding: 2px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: color-mix(in srgb, var(--sh) 16%, transparent); color: var(--sh); }
.sh-time { margin-left: auto; font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.sh-branch { font-family: ui-monospace, Menlo, monospace; font-size: 0.74rem; color: var(--text-muted); margin-top: 8px; }

.sh-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 14px 0 6px; }
.sh-finding { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); }
.sh-check { font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; font-weight: 600; color: var(--text-primary); background: var(--bg-card); padding: 1px 7px; border-radius: 6px; margin-right: 6px; }

.sh-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.sh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.sh-chip.ok  { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.sh-chip.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

.sh-sub { background: var(--bg-card); border-radius: 8px; margin-top: 10px; overflow: hidden; }
.sh-sub > summary { cursor: pointer; list-style: none; padding: 10px 13px; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; user-select: none; }
.sh-sub > summary::-webkit-details-marker { display: none; }
.sh-sub > summary i { color: var(--primary); font-size: 0.78rem; }
.sh-sub > summary .sh-diffstat { margin-left: auto; font-weight: 400; font-size: 0.74rem; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.sh-sub pre { margin: 0; padding: 11px 13px; font-size: 0.78rem; line-height: 1.55; overflow: auto; max-height: 440px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* Root-cause analysis is prose (rendered as markdown), not code — flow it normally,
   left-aligned, with the same inset the diff <pre> has so it lines up with the summary. */
.sh-sub .sh-analysis { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.55; padding: 11px 13px; text-align: left; }
.sh-sub .sh-analysis p { margin: 0 0 8px; }
.sh-sub .sh-analysis p:last-child { margin-bottom: 0; }
.sh-sub .sh-analysis ul, .sh-sub .sh-analysis ol { margin: 4px 0 8px; padding-left: 20px; }
.sh-sub .sh-analysis li { margin: 2px 0; }
.sh-sub .sh-analysis code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }

.sh-action { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-rollback { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 20px; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; background: var(--bg-card); color: var(--text-secondary); transition: all 0.15s; }
.sh-rollback:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.sh-rollback:disabled { opacity: 0.6; cursor: default; }
.sh-hint { color: var(--text-muted); font-size: 0.76rem; }
.sh-merge-hint { margin-top: 12px; font-size: 0.8rem; color: var(--text-secondary); }
.sh-merge-hint code { background: var(--bg-card); padding: 2px 7px; border-radius: 6px; font-size: 0.76rem; font-family: ui-monospace, Menlo, monospace; }
.sh-rolled { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; background: var(--bg-tertiary); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }

.sh-empty { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.sh-empty i { font-size: 1.9rem; opacity: 0.5; display: block; margin-bottom: 12px; }

/* ================================
   Mobile layer (≤768px) — ADDITIVE ONLY (frontend.md rule: never rewrite
   desktop layout rules). This block is last in the file so it supersedes the
   earlier ≤768px icon-rail rules: on phones the sidebar becomes an off-canvas
   drawer with full labels (hamburger toggles .mobile-open + body
   .mobile-nav-open — see layout.js), and the content column gets guards
   against CSS-grid track blowout (1fr == minmax(auto,1fr), so one wide table
   stretches every sibling past the viewport and content-wrapper's
   overflow-x:hidden clips the page — the root cause of the cut-off cards).
   ================================ */
@media (max-width: 768px) {
    /* --- Off-canvas nav drawer --- */
    .sidebar,
    .sidebar.collapsed {
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        z-index: 1200;
    }
    .sidebar.mobile-open,
    .sidebar.collapsed.mobile-open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
    }
    /* The drawer always shows full labels — undo the icon-rail hiding from
       both the earlier mobile block and the .collapsed desktop state. */
    .sidebar .nav-item span,
    .sidebar .logo span,
    .sidebar .status-indicator span,
    .sidebar.collapsed .nav-item span,
    .sidebar.collapsed .logo span,
    .sidebar.collapsed .status-indicator span {
        display: inline;
    }
    .sidebar .nav-item,
    .sidebar.collapsed .nav-item {
        justify-content: flex-start;
    }
    .main-content,
    .sidebar.collapsed + .main-content {
        margin-left: 0;
    }
    /* Scrim under the open drawer; tap closes it (layout.js). */
    .mobile-nav-scrim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1100;
    }
    body.mobile-nav-open .mobile-nav-scrim { display: block; }
    /* Keep the page from scrolling behind the open drawer. */
    body.mobile-nav-open { overflow: hidden; }

    /* --- Density --- */
    .content-wrapper { padding: 12px; }
    .header { padding: 0 14px; }

    /* --- Grid blowout guards --- */
    /* Must OUT-SPECIFY the body:is(...) page-scoped .dashboard-grid rules
       (repeat(2,1fr)/1fr) or those pages keep the minmax(auto,1fr) blowout. */
    .dashboard-grid,
    body:is([data-page-id="dashboard"], [data-page-id="audit"], [data-page-id="autofix"], [data-page-id="alignment"]) .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .dashboard-grid > * { min-width: 0; }
    .card { min-width: 0; }

    /* Wide data tables: the table's immediate WRAPPER becomes the horizontal
       scroller. Tables keep display:table, so a table that fits still
       stretches to width:100% and stays edge-aligned with sibling sections —
       display:block on the table itself shrink-fits the anonymous inner table
       (Token Cost rendered 334px inside a 366px card). An overflow container
       contributes ~0 min-content, so this also breaks the grid blowout chain. */
    .card:has(> table),
    .card :has(> table),
    .table-container:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
    }

    /* Data-coverage tables: handled by the viewport-independent single-line-
       header rules right after this media block (min-width + pan applies to
       desktop and mobile alike). */

    /* Data-coverage filter rail: ONE horizontally-scrollable row of filter
       pills instead of three stacked rows (inline flex-wrap:wrap on the
       container needs the !important). Chip-rail look: scrollbar hidden,
       pills keep their intrinsic width. */
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .card-header > div:has(> .filter-combo) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        scrollbar-width: none;
    }
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .card-header > div:has(> .filter-combo)::-webkit-scrollbar {
        display: none;
    }
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .filter-combo { flex-shrink: 0; }
    /* The rail is a scroll container, which clips absolutely-positioned
       descendants on BOTH axes — the dropdown menus would be unusable. A
       fixed CENTERED picker escapes the clip deterministically (fixed +
       top:auto static positioning is NOT an option: Chromium resolves the
       hypothetical static position without subtracting ancestor scroll, so
       the menu lands hundreds of px below the viewport). The menu opens as
       a modal-style option dialog in the middle of the screen. */
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .filter-combo-menu,
    body:is([data-page-id="data-coverage"], [data-page-id="strategies"]) .filter-combo-menu.combo-up {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100vw - 32px));
        min-width: 0;
        max-width: none;
        max-height: 60vh;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    }

    /* Card-header filter pills wrap onto extra rows instead of overflowing. */
    .card-header { flex-wrap: wrap; row-gap: 8px; }
    .filter-control { max-width: 100%; padding: 9px 16px; }

    /* 3-zone pagination bar wraps gracefully. */
    .pagination-controls { flex-wrap: wrap; row-gap: 6px; }

    /* Pipeline/strategy-detail modal fills the phone screen. */
    .stage-detail-card {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    /* Hypothesis rows: tag chips wrap to extra rows instead of clipping
       mid-chip at the card edge. */
    .hypothesis-footer { flex-wrap: wrap; row-gap: 6px; }

    /* Idea card: the helper sentence gets the full row instead of a cramped
       ~70px column beside the send button; the button row sits below it. */
    .idea-submit-actions { flex-wrap: wrap; }
    .idea-submit-helper { flex: 1 1 100%; }

    /* Chat: the 260px session sidebar + min chat column can't share a phone
       screen — chat takes the full width. */
    :is(body[data-page-id="chat"], .ai-dock) .chat-sidebar { display: none; }

    /* Autofix history: inline code spans (file paths, commit refs) wrap on
       phones. (Diffstat wrap is viewport-independent — see below.) */
    .sh-name { overflow-wrap: anywhere; }
    code { overflow-wrap: anywhere; }
    .sh-sub > summary .sh-diffstat { margin-left: 0; }
}

/* Dropdown menus are right-anchored to their combo (correct for right-edge
   combos), but a menu's natural width is max-content — the strategies tags
   menu grew to ~605px of long tag names and extended LEFT past the content
   area, where .content-wrapper's overflow-x:hidden clipped it, looking
   "covered by the sidebar". Cap the width and ellipsize long labels instead;
   counts stay fully visible. Left-anchoring is NOT the fix — combos near the
   right edge would then push their menus off the right side at tablet
   widths. Desktop/tablet only: the mobile centered picker sizes itself. */
@media (min-width: 769px) {
    .filter-combo-menu { max-width: 380px; }
    .filter-combo-item > span:first-child {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .filter-combo-count { flex-shrink: 0; }
}

/* Autofix diffstat lines exceed 1,100px for multi-file fixes — they overflow
   even a 1440px desktop window, so the wrap applies at EVERY viewport. */
.sh-sub > summary { flex-wrap: wrap; }
.sh-sub > summary .sh-diffstat {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ================================
   Data-coverage tables — single-line column headers at EVERY viewport.
   table-layout:fixed (required by the fixed-header thead/tbody pattern)
   cannot widen a column to fit its header, so instead of letting headers
   wrap or overlap, the table gets a hard minimum width at which every
   nowrap header fits its proportional column (1100px — measured: the
   "Span (first → last)" column is the binding constraint at 149px).
   Windows narrower than that pan the table horizontally inside .dc-scroll;
   header and body stay column-aligned because they pan together.
   ================================ */
body[data-page-id="data-coverage"] .dc-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body[data-page-id="data-coverage"] .dc-scroll table {
    min-width: 1100px;
}
body[data-page-id="data-coverage"] .dc-scroll th {
    white-space: nowrap;
}

/* ================================
   Language switcher (globe dropdown in the header) + RTL starter.
   Part of Phase-0 i18n (buildmidas pattern; js/i18n.js + js/i18n/languages.js).
   ================================ */
.lang-dropdown {
    position: relative;
}
.lang-globe-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: none;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.lang-globe-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.lang-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.lang-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}
.lang-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.lang-dropdown-item.active { background: rgba(41, 98, 255, 0.14); color: var(--text-primary); }
@media (max-width: 768px) {
    /* phone: menu hugs the right edge inside the viewport */
    .lang-dropdown-menu { max-width: calc(100vw - 24px); }
}

/* RTL starter (ar/he/fa/ur — js/i18n.js sets document.documentElement.dir).
   Flips the app shell; content-level polish is i18n phase 2. */
[dir='rtl'] .sidebar { left: auto; right: 0; }
[dir='rtl'] .sidebar::after { right: auto; left: 0; }
[dir='rtl'] .main-content { margin-left: 0; margin-right: var(--sidebar-width); }
[dir='rtl'] .sidebar.collapsed + .main-content { margin-left: 0; margin-right: var(--sidebar-collapsed); }
[dir='rtl'] .lang-dropdown-menu { right: auto; left: 0; }
[dir='rtl'] .lang-dropdown-item { text-align: right; }
@media (max-width: 768px) {
    [dir='rtl'] .sidebar,
    [dir='rtl'] .sidebar.collapsed { transform: translateX(100%); }
    [dir='rtl'] .sidebar.mobile-open,
    [dir='rtl'] .sidebar.collapsed.mobile-open { transform: translateX(0); }
    [dir='rtl'] .main-content,
    [dir='rtl'] .sidebar.collapsed + .main-content { margin-right: 0; }
}

/* ================================
   Ask-AI dock frame (top-nav assistant overlay). The interior reuses the
   chat page vocabulary verbatim — every chat rule is scoped
   :is(body[data-page-id=chat], .ai-dock) so the dock IS the chat page,
   re-housed in a floating window. Small window by default, .maximized wide.
   ================================ */
/* buildmidas Ask-AI pattern: transparent pill, primary-colored text + the
   Material auto_awesome sparkle (embedded SVG — we do not ship a second
   icon font for one glyph), faint primary tint on hover. */
.ask-ai-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px; border: none; border-radius: 9999px;
    background: transparent; color: var(--primary);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    margin-right: 6px;
    transition: background-color 0.15s ease;
}
.ask-ai-btn:hover { background: rgba(41, 98, 255, 0.08); }
.ask-ai-btn:active { background: rgba(41, 98, 255, 0.14); }
.ask-ai-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ask-ai-btn svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
@media (max-width: 640px) { .ask-ai-btn .ask-ai-btn-label { display: none; } }
.ai-dock {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
    width: min(460px, 100vw); display: flex; flex-direction: column;
    background: var(--bg-secondary); border-left: 1px solid var(--border-color);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%); transition: transform 0.18s ease, width 0.18s ease;
}
.ai-dock.open { transform: translateX(0); }
.ai-dock.maximized { width: min(1100px, 96vw); }
.ai-dock-header {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    border-bottom: 1px solid var(--border-color); color: var(--text-primary);
    flex-shrink: 0;
}
.ai-dock-header > i { color: var(--primary); }
.ai-dock-title { flex: 1; font-weight: 700; font-size: 1.1rem; }
/* Circular icon buttons (autovalueuae assistant-header pattern). */
.ai-dock-iconbtn {
    width: 38px; height: 38px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; padding: 0;
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    border-radius: 50%; font-size: 1.05rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-dock-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Interior fit: the chat vocabulary fills the dock below the header. */
.ai-dock .chat-page-flex { flex: 1; min-height: 0; }
.ai-dock .chat-container { max-width: 800px; }
/* Small window: the session sidebar starts collapsed (chat.js toggles it). */
.ai-dock:not(.maximized) .chat-sidebar.collapsed { width: 0; border-right: none; }

/* ================================
   Locale modal (autovalueuae LocaleSelectors port): two-tab instant-apply
   dialog — language grid + grouped region cells with flags, currency grid.
   ================================ */
.lc-overlay {
    position: fixed; inset: 0; z-index: 1300; display: flex;
    align-items: flex-start; justify-content: center; overflow-y: auto;
    background: rgba(0, 0, 0, 0.5); padding: 16px;
}
@media (min-width: 640px) { .lc-overlay { align-items: center; } }
.lc-panel {
    display: flex; flex-direction: column; overflow: hidden;
    width: 100%; max-width: 768px; max-height: 85vh;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.lc-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px 0 24px; border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.lc-tabs { display: flex; gap: 20px; padding-top: 12px; }
.lc-tab {
    position: relative; background: none; border: none; cursor: pointer;
    padding: 0 0 8px; color: var(--text-muted); font: inherit;
    font-size: 14px; font-weight: 500;
}
.lc-tab.active { color: var(--text-primary); }
.lc-tab.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; border-radius: 2px; background: var(--text-primary);
}
.lc-close {
    width: 32px; height: 32px; margin: 10px 0; display: flex; align-items: center;
    justify-content: center; background: none; border: none; cursor: pointer;
    color: var(--text-muted); border-radius: 50%; font-size: 0.95rem;
}
.lc-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.lc-body { overflow-y: auto; padding: 20px 24px; }
.lc-heading { color: var(--text-primary); font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.lc-group {
    color: var(--text-muted); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.025em; margin: 16px 0 8px;
}
.lc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .lc-grid { grid-template-columns: repeat(3, 1fr); } }
/* Cell states mirror the reference exactly (current autovalueuae Cell):
   resting = panel background (invisible), hover = one surface step up,
   selected = that same step held persistently. No borders, no brand tint. */
.lc-cell {
    display: flex; align-items: center; gap: 10px; text-align: start;
    background: transparent; border: none; border-radius: 8px;
    padding: 8px 12px; cursor: pointer; color: var(--text-primary); font: inherit;
    min-width: 0; transition: background var(--transition-fast);
}
.lc-cell:hover { background: var(--bg-tertiary); }
.lc-cell.selected { background: var(--bg-tertiary); }
.lc-flag { width: 24px; height: 16px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.lc-cell-text { display: flex; flex-direction: column; min-width: 0; }
.lc-cell-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-cell-sub { font-size: 12px; color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Round globe trigger (reference: icon-only rounded-full header button). */
.lc-globe-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 1rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.lc-globe-btn:hover { background: var(--bg-hover); color: var(--text-primary); }


/* Admin-only Operations nav group (collapsible) — head mirrors .nav-item
   metrics exactly (padding, 3px spacer border, 24px icon box, hover). */
.nav-group-head {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 20px; background: none; border: none;
    border-left: 3px solid transparent; border-radius: 0;
    cursor: pointer; color: var(--text-secondary);
    font: inherit; text-align: left;
    transition: all var(--transition-fast);
}
.nav-group-head:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-group-head > i:first-child {
    width: 24px; height: 24px; display: flex; align-items: center;
    justify-content: center; text-align: center; font-size: 1.1rem;
    transition: all var(--transition-fast); border-radius: 6px;
}
.nav-group-head:hover > i:first-child { color: var(--primary); transform: scale(1.1); }
.nav-group-head .nav-group-chev {
    margin-left: auto; font-size: 0.65rem; transition: transform 0.15s;
}
.nav-group.open .nav-group-head .nav-group-chev { transform: rotate(180deg); }
.nav-group-items { display: none; }
.nav-group.open .nav-group-items { display: block; }
.nav-group-items .nav-item { padding-left: 34px; }


/* Collapsed sidebar: Operations group head becomes icon-only like nav items */
.sidebar.collapsed .nav-group-head span,
.sidebar.collapsed .nav-group-head .nav-group-chev {
    display: none;
}
.sidebar.collapsed .nav-group-head {
    justify-content: center;
}
.sidebar.collapsed .nav-group-items .nav-item {
    padding-left: 20px;   /* undo the open-state 34px indent; centers like siblings */
}


/* Reserve the root scrollbar gutter permanently: pages with and without a
   scrollbar otherwise differ ~17px in layout width, so the right-aligned
   header buttons (Ask AI / globe / account) visibly jump when navigating
   between long and short pages. Overlay-scrollbar platforms are unaffected. */
html { scrollbar-gutter: stable; }


/* Restart-reconciliation rows in the paper trades table: settle/restore
   plumbing gets a muted badge so it can't be mistaken for a signal trade. */
.pt-reason-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; border-radius: 999px;
    background: var(--bg-hover); color: var(--text-muted);
    vertical-align: middle; cursor: help;
}
.pt-trade-row.pt-reconcile td { opacity: 0.75; }


/* ─── AI assistant: charts + stream smoother + code copy (buildmidas parity) ─── */
:is(body[data-page-id="chat"], .ai-dock) .chat-chart-container {
    background: var(--bg-tertiary); border-radius: 10px; padding: 16px; margin: 12px 0;
    max-width: 100%;
    overflow-x: auto;
}
/* Chart.js sizes to its PARENT — the inner wrapper floors that at the width
   charts get in the maximized window, so a small dock shows the SAME-sized
   chart panning horizontally instead of a shrunken one. */
:is(body[data-page-id="chat"], .ai-dock) .chat-chart-inner { min-width: 640px; }
:is(body[data-page-id="chat"], .ai-dock) .chat-chart-container canvas { max-height: 350px; }

/* Code blocks: dark surface + pinned copy button / language chip. */
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content pre,
:is(body[data-page-id="chat"], .ai-dock) pre.ws-code-block {
    background: #1e1e1e; color: #d4d4d4; border: none; border-radius: 8px;
    padding: 30px 16px 12px; overflow: auto; max-height: min(480px, 60vh); white-space: pre;
    font-size: 13px;
}
.ws-code-wrap { position: relative; margin: 8px 0; }
.ws-code-wrap > pre { margin: 0 !important; }
.ws-code-wrap > .ws-code-lang {
    position: absolute; top: 6px; left: 12px; padding: 1px 6px; border-radius: 4px;
    background: rgba(20,20,20,0.85); font-size: 11px; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; z-index: 1;
}
.ws-code-wrap > .ws-code-copy {
    position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; background: rgba(20,20,20,0.85); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9999px; color: #d4d4d4; font-size: 11px; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s; user-select: none; z-index: 1;
}
.ws-code-wrap > .ws-code-copy:hover { background: rgba(40,40,40,0.95); color: #fff; border-color: rgba(255,255,255,0.28); }
.ws-code-wrap > .ws-code-copy.copied { background: var(--success); border-color: var(--success); color: #fff; }

/* Tool-activity spinner strip — theme-aware overrides of the smoother's inline light styles. */
:is(body[data-page-id="chat"], .ai-dock) .ws-streaming-spinner-label,
:is(body[data-page-id="chat"], .ai-dock) .ws-streaming-spinner-icon { color: var(--text-secondary) !important; }
:is(body[data-page-id="chat"], .ai-dock) .ws-stream-activity-detail {
    background: var(--bg-tertiary) !important; color: var(--text-secondary) !important;
}
:is(body[data-page-id="chat"], .ai-dock) .ws-stream-activity-row { cursor: pointer !important; }

/* Rounded bordered tables (matches buildmidas). */
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content table {
    border-collapse: separate; border-spacing: 0; width: 100%; margin: 10px 0;
    border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; font-size: 13px;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content th,
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content td {
    border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
    padding: 8px 12px; text-align: left;
}
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content th:last-child,
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content td:last-child { border-right: none; }
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content tr:last-child td { border-bottom: none; }
:is(body[data-page-id="chat"], .ai-dock) .chat-msg-content th { background: var(--bg-tertiary); font-weight: 600; }

:is(body[data-page-id="chat"], .ai-dock) .chat-send-btn.streaming { background: var(--danger); }

/* Assistant reply text — buildmidas parity: #374151 (gray-700) on light,
   #e6e8ec (their dark-surface text tone) on dark. Scoped to the assistant
   message only so the user pill keeps its white-on-primary text. */
html[data-theme="light"] :is(body[data-page-id="chat"], .ai-dock) .chat-msg-assistant .chat-msg-content { color: #374151; }
html:not([data-theme="light"]) :is(body[data-page-id="chat"], .ai-dock) .chat-msg-assistant .chat-msg-content { color: #e6e8ec; }

/* ── Public (anonymous) mode — live-market / options-chain opened from the
   landing page: content only, no dashboard chrome. layout.js stamps
   body.sf-public from the identity check. Placed after the mobile layer on
   purpose: these rules apply at every viewport width. */
body.sf-public .sidebar,
body.sf-public .mobile-nav-scrim { display: none !important; }
body.sf-public .main-content { margin-left: 0 !important; }
body.sf-public .menu-toggle { display: none !important; }
body.sf-public .ask-ai-btn { display: none !important; }
.sf-public-brand { display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-primary); text-decoration: none; font-weight: 800;
    font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap; }
.sf-public-brand:hover { color: var(--text-primary); }
.sf-public-brand i { color: var(--primary); }