/* ═══════════════════════════════════════════════════════
   pages.css — Shared design system for secondary pages
   (registry, capital, settings, market-close, import)
   Compact & sleek — matches the main dashboard language
   ═══════════════════════════════════════════════════════ */

:root {
    --nav-height: 38px;
}

/* ── Page Navigation Bar ──
   Fixed height so full-height pages can subtract it precisely. */
.page-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--nav-height);
    box-sizing: border-box;
    padding: 6px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
}

/* Full-height app container: fills viewport below the fixed nav.
   Apply this class to the page's #app root. */
#app.full-height-app {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height));
    overflow: hidden;
}

/* ── Robust viewport fit ──
   Shell pages (body.app-shell, set in _Layout.cshtml) lay out as a
   flex column: the fixed-height top nav keeps its own height, #app
   fills the remaining space, and the live status bar sits in-flow as
   the last flex item at the bottom.

   Because the status bar is a real flex item (not `position: fixed`),
   its height is reserved by the layout itself — no magic 26/27/38px
   offsets anywhere. Change the bar height and every page adapts.

   This supersedes the per-page `height: 100vh` / `calc(100vh - …)`
   declarations, which overflowed by the nav height and let the
   status bar overlap page footers (settings OK/Apply, import
   footer, registry grid). Scoped to .app-shell so standalone pages
   (Login, ScriptBuilder, StrategyAutopsy) keep their own body. */
body.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
#app,
#app.full-height-app {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* ── Direct nav links (single-item groups) ── */
.page-nav .nav-link {
    color: var(--fg2);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 4px;
    transition: all 0.15s;
    white-space: nowrap;
}
.page-nav .nav-link:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
.page-nav .nav-link.active { background: var(--teal); color: #fff; font-weight: 600; }
.page-nav .nav-spacer { flex: 1; }
.page-nav .nav-clock { color: var(--fg2); font-size: 12px; font-family: 'Cascadia Mono', monospace; font-variant-numeric: tabular-nums; }
.page-nav .nav-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.08);
    margin: 0 6px;
    flex-shrink: 0;
}

/* ── Nav Dropdown Groups ── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: var(--fg2);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger { background: rgba(255,255,255,0.06); color: var(--fg); }
.nav-dropdown-trigger.group-active { color: var(--teal); font-weight: 600; }
.nav-chevron { transition: transform 0.2s; opacity: 0.4; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); opacity: 0.7; }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    z-index: 1000;
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--fg2);
    transition: background 0.12s, color 0.12s;
}
.nav-dropdown-item:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
.nav-dropdown-item.active { background: rgba(20,184,166,0.08); color: var(--teal); }
.nav-dd-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0.75; }
.nav-dd-text { flex: 1; min-width: 0; }
.nav-dd-label { font-size: 12.5px; font-weight: 500; display: block; }
.nav-dd-desc { font-size: 10.5px; color: var(--fg2); opacity: 0.6; display: block; margin-top: 1px; }
.nav-dropdown-item.active .nav-dd-desc { color: var(--teal); opacity: 0.5; }
.nav-dropdown-item.active .nav-dd-icon,
.nav-dropdown-item:hover .nav-dd-icon { opacity: 1; }
.nav-dd-shortcut {
    font-family: 'Cascadia Mono', monospace;
    font-size: 10px;
    color: var(--fg2);
    opacity: 0.35;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ── User Menu Pill ── */
.nav-user-menu { position: relative; margin-left: 8px; }
.nav-user-pill {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--fg2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-user-pill:hover,
.nav-user-menu.open .nav-user-pill { background: rgba(255,255,255,0.1); color: var(--fg); border-color: rgba(255,255,255,0.15); }
.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    z-index: 1000;
}
.nav-user-menu.open .nav-user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-user-header {
    font-size: 9px;
    font-weight: 700;
    color: var(--fg2);
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 10px 4px;
    user-select: none;
}
.nav-user-info { padding: 10px 12px 8px; }
.nav-user-name { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
.nav-user-role { display: block; font-size: 10px; color: var(--fg2); opacity: 0.5; margin-top: 2px; }
.nav-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    color: var(--fg2);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
}
.nav-user-item:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
.nav-user-item.danger:hover { background: rgba(239,68,68,0.08); color: var(--red); }
.nui-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 13px; opacity: 0.6; }
.nav-user-item kbd {
    margin-left: auto;
    font-family: 'Cascadia Mono', monospace;
    font-size: 10px;
    color: var(--fg2);
    opacity: 0.3;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 3px;
}
.nav-user-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* ── Floating Trade Version Toggle ── */
.trade-version-toggle {
    position: fixed; bottom: 36px; right: 20px; z-index: 900;
    display: flex; gap: 0; background: var(--panel); border: 1px solid var(--border);
    border-radius: 6px; padding: 2px; box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    backdrop-filter: blur(12px);
    opacity: 0.18; transition: opacity 0.4s ease;
}
.trade-version-toggle:hover { opacity: 1; }
.tvt-btn {
    font-family: 'Cascadia Mono', monospace; font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: 4px; border: none;
    background: transparent; color: var(--fg2); cursor: pointer;
    transition: all 0.15s ease; letter-spacing: 0.5px;
}
.tvt-btn:hover { background: rgba(255,255,255,0.08); color: var(--fg); }
.tvt-btn.active { background: var(--teal); color: #000; }

/* ── Page Shell ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}
.page-header .header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.page-header h1 {
    font-size: 15px;
    font-weight: 600;
    color: var(--teal);
    margin: 0;
    white-space: nowrap;
}
.page-header .subtitle {
    font-size: 11px;
    color: var(--fg2);
    white-space: nowrap;
}
.page-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
.page-footer {
    padding: 5px 16px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--fg2);
    flex-shrink: 0;
}

/* ── Section Cards ── */
.section-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.1);
    transition: border-color 0.15s;
}
.section-card:hover {
    border-color: rgba(255,255,255,0.12);
}
.section-card h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--teal);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-card h2.yellow { color: var(--yellow); }
.section-card h2.blue { color: var(--blue); }
.section-card h2.red { color: var(--red); }
.section-card h2.purple { color: #8b5cf6; }
.section-card h2.muted { color: var(--fg2); }

/* ── Form Fields ── */
.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.1s;
}
.form-row:hover {
    background: rgba(255,255,255,0.025);
}
.form-row label {
    width: 160px;
    min-width: 120px;
    font-size: 12px;
    color: var(--fg2);
    line-height: 1.3;
}
.form-row input, .form-row select {
    flex: 1;
    max-width: 220px;
    padding: 6px 10px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 12px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-row input:focus, .form-row select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(20,184,166,0.15);
}
.form-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--teal);
}
.form-row input[type="number"], .form-row select { max-width: 130px; }
.form-row .hint { font-size: 11px; color: var(--fg2); margin-left: 6px; }

/* ── Inline Checkbox Labels (used in logging component rows) ── */
.check-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--fg2);
    cursor: pointer;
    white-space: nowrap;
    flex: none;
}
/* Override .form-row label sizing (specificity 0,2,0 > 0,1,1) */
.form-row .check-inline {
    width: auto;
    min-width: 80px;
}
.check-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--teal);
}

/* ── Section Hint Text ── */
.section-hint {
    color: var(--fg2);
    font-size: 12px;
    margin-bottom: 8px;
}

/* ── Data Grid ── */
/* ══════════════════════════════════════════
   Registry Grid — modern card-row design
   ══════════════════════════════════════════ */
.data-grid {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;
    table-layout: auto;
    min-width: 560px;
    padding: 0 4px;
}
.data-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    color: var(--fg2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 6px 10px 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    user-select: none;
    white-space: nowrap;
}
.data-grid thead th.num { text-align: right; }
/* Spacer column for the left accent bar */
.data-grid thead th.col-accent { width: 4px; padding: 0; }
.data-grid tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}
.data-grid tbody tr td {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.045);
    padding: 10px 10px;
    color: var(--fg);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s;
}
.data-grid tbody tr:first-child td { border-top: 1px solid rgba(255,255,255,0.045); }
.data-grid tbody tr td:first-child {
    border-left: none;
    padding: 0;
    width: 4px;
    overflow: visible;
}
.data-grid tbody tr td:last-child {
    border-right: none;
}
/* Accent bar — left edge colour per state */
.data-grid tbody tr .row-accent {
    display: block;
    width: 3px;
    height: 100%;
    min-height: 42px;
    background: transparent;
    transition: background 0.2s;
}
.data-grid tbody tr.row-enabled .row-accent  { background: var(--teal); }
.data-grid tbody tr.row-options .row-accent  { background: #8b5cf6; }
.data-grid tbody tr.row-disabled .row-accent { background: rgba(255,255,255,0.1); }
.data-grid tbody tr:hover td { background: rgba(255,255,255,0.028); }
.data-grid tbody tr.selected td {
    background: rgba(20,184,166,0.06);
}
.data-grid tbody tr.selected .row-accent {
    background: var(--teal);
    box-shadow: 0 0 6px rgba(20,184,166,0.4);
}
.data-grid tbody tr.row-disabled td { opacity: 0.45; }
.data-grid tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: 'Cascadia Mono', monospace;
    font-size: 11px;
    letter-spacing: -0.01em;
}
/* Micro pill toggles (ON / OPT columns) */
.grid-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 2px 7px 2px 5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
    border: 1px solid transparent;
}
.grid-pill .pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s;
}
.grid-pill.pill-on  { background: rgba(20,184,166,0.12); color: var(--teal);  border-color: rgba(20,184,166,0.25); }
.grid-pill.pill-on  .pill-dot { background: var(--teal); }
.grid-pill.pill-off { background: rgba(255,255,255,0.04); color: var(--fg2); border-color: rgba(255,255,255,0.08); }
.grid-pill.pill-off .pill-dot { background: var(--fg2); opacity: 0.4; }
.grid-pill.pill-opt { background: rgba(139,92,246,0.12); color: #a78bfa; border-color: rgba(139,92,246,0.22); }
.grid-pill.pill-opt .pill-dot { background: #a78bfa; }
.grid-pill.pill-stk { background: rgba(20,184,166,0.08); color: var(--teal); border-color: rgba(20,184,166,0.2); }
.grid-pill.pill-stk .pill-dot { background: var(--teal); }
/* Ticker cell */
.cell-ticker-block { display: flex; flex-direction: column; gap: 1px; }
.cell-ticker-sym   { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: var(--fg); }
.cell-ticker-exch  { font-size: 9px; color: var(--fg2); letter-spacing: 0.05em; text-transform: uppercase; }
/* Signal cell */
.cell-signal-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-signal-name  { font-size: 11px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.cell-signal-prof  { font-size: 9px; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; }
.cell-manual-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: rgba(255,200,100,0.08); color: rgba(255,200,100,0.75);
    border: 1px solid rgba(255,200,100,0.2);
    border-radius: 10px; padding: 2px 8px;
}

/* ── Asset Type Badges ── */
.badge-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.badge-type.stk { color: var(--teal); background: rgba(20,184,166,0.12); }
.badge-type.opt { color: #8b5cf6; background: rgba(139,92,246,0.12); }

/* ── Risk Level Badges ── */
.badge-risk {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}
.badge-risk.low { color: var(--green); background: rgba(34,197,94,0.12); }
.badge-risk.medium, .badge-risk.medi { color: var(--yellow); background: rgba(251,191,36,0.12); }
.badge-risk.high { color: var(--red); background: rgba(239,68,68,0.12); }

/* ── Direction Colors ── */
.dir-long, .dir-call { color: var(--green); }
.dir-short, .dir-put { color: var(--red); }
.dir-bi { color: var(--blue); }

/* ── State Colors ── */
.state-active { color: var(--green); }
.state-waiting { color: var(--blue); }
.state-allocating { color: var(--teal); }
.state-completed { color: var(--fg2); }
.state-cancelled, .state-error { color: var(--red); }
.state-suspended { color: var(--yellow); }

/* ── P/L Colors ── */
.pnl-positive { color: var(--green); }
.pnl-negative { color: var(--red); }
.pnl-zero { color: var(--fg2); }

/* ── Signal Truncation ── */
.cell-signal {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--fg2);
    cursor: default;
}

/* ── Button Variants ── */
.btn {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.15); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover:not(:disabled) { filter: brightness(1.1); }
.btn-danger { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.25); }
.btn-warning { background: var(--yellow); color: #000; }
.btn-secondary {
    background: var(--card);
    color: var(--fg2);
    border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--border); color: var(--fg); }
.btn-tertiary {
    background: transparent;
    color: var(--fg2);
    border: none;
    padding: 4px 8px;
    font-size: 11px;
}
.btn-tertiary:hover:not(:disabled) { color: var(--fg); }

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }
.btn-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ── KPI Cards (page-level) ── */
.page-kpi {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg);
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.page-kpi .kpi-card {
    flex: 1;
    min-width: 80px;
    padding: 7px 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.page-kpi .kpi-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
}
.page-kpi .kpi-label {
    font-size: 9px;
    color: var(--fg2);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 3px;
    font-weight: 700;
}
.page-kpi .kpi-value {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── Two-Column Layout ── */
.split-layout {
    display: flex;
    gap: 12px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.split-layout .split-left {
    flex: 1;
    min-width: 280px;
    overflow-y: auto;
}
.split-layout .split-right {
    flex: 0 0 auto;
    width: 400px;
    min-width: 300px;
    max-width: 440px;
    overflow-y: auto;
    overflow-x: hidden;
}
.split-layout .split-right .section-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Detail Drawer (slide-over for Registry / Signal Profiles) ── */
.detail-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.detail-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.detail-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 910;
    width: 700px;
    max-width: 96vw;
    background: var(--panel);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 40px rgba(0,0,0,0.45), 0 0 1px rgba(255,255,255,0.04);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-drawer.open {
    transform: translateX(0);
}
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drawer-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.drawer-header .drawer-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: var(--fg2);
}
.drawer-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--fg2);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.drawer-close:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
    color: var(--red);
}
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 20px;
}
.drawer-body::-webkit-scrollbar { width: 5px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* Drawer form rows get more breathing room */
.drawer-body .form-row {
    padding: 5px 4px;
}
.drawer-body .form-row label {
    min-width: 90px;
    width: 100px;
    flex-shrink: 0;
}
.drawer-body .form-row input,
.drawer-body .form-row select {
    max-width: none;
    flex: 1;
    min-width: 0;
}
/* Two-column form grid inside drawer */
.drawer-body .drawer-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
}
.drawer-body .drawer-form-grid .form-row {
    margin-bottom: 2px;
    min-width: 0;
    overflow: hidden;
}
/* Full-width form rows span both columns */
.drawer-body .drawer-form-grid .form-row.full-width {
    grid-column: 1 / -1;
}
/* Signal metadata: short labels (Name, Timeframe, Direction) use narrower width */
.drawer-form-grid.sig-meta .form-row label {
    width: 75px;
    min-width: 65px;
}

/* ── View / Edit Mode Toggle ── */
.drawer-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--fg2);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 6px;
    flex-shrink: 0;
}
.drawer-edit-btn:hover {
    background: rgba(20,184,166,0.10);
    border-color: var(--teal);
    color: var(--teal);
}
.drawer-edit-btn.active {
    background: rgba(20,184,166,0.12);
    border-color: var(--teal);
    color: var(--teal);
}
/* ── Drawer Action Buttons (icon-only: duplicate, delete in header) ── */
.drawer-action-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--fg2);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.drawer-action-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
    color: var(--fg);
}
.drawer-action-btn.danger:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
    color: var(--red);
}
/* Elements that only show in edit mode */
.edit-only { display: none !important; }
.detail-drawer.editing .edit-only { display: flex !important; }
.detail-drawer.editing .section-card.edit-only { display: block !important; }
.detail-drawer.editing .edit-only-inline { display: inline-flex !important; }
.edit-only-inline { display: none !important; }
/* Textarea in drawer: prevent horizontal overflow */
.drawer-body textarea {
    box-sizing: border-box;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}
/* Fix: Drawer checkboxes must NOT stretch (specificity override) */
.drawer-body .form-row input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
}

/* ── Drawer Footer (Save Bar) ── */
.drawer-footer {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.detail-drawer.editing .drawer-footer {
    display: flex;
}
.drawer-footer .dirty-dot {
    font-size: 11px;
    color: var(--yellow);
    opacity: 0;
    transition: opacity 0.2s;
}
.drawer-footer .dirty-dot.visible {
    opacity: 1;
}
.drawer-footer .spacer { flex: 1; }

/* ── Signal / Indicator Entry Cards (drawer) ── */
.signal-entry {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
/* Manual (NoSignal) sentinel row — visually distinct, non-interactive */
.signal-entry-manual {
    background: rgba(255,255,255,0.01);
    border: 1px dashed rgba(255,255,255,0.1);
    opacity: 0.6;
    pointer-events: none;     /* whole card non-interactive */
}
.signal-entry-manual .signal-entry-header { margin-bottom: 0; }
.manual-sig-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.07);
    color: var(--fg2);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 2px 8px;
    cursor: default;
    user-select: none;
}
.signal-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}
.signal-entry-header .sig-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
}
.signal-entry-header .sig-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.sig-section-label {
    font-size: 10px;
    color: var(--fg2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 8px 0 4px;
    padding: 0 4px;
}
/* KB subsection titles inside Knowledge Base section-card */
.kb-subsection-title {
    font-size: 10px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 10px 0 4px;
    padding: 2px 4px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.kb-subsection-title.teal { color: var(--teal); }
.kb-subsection-title.purple { color: #8b5cf6; }
.sig-sub-card {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 4px;
}
.sig-sub-card .sig-sub-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.sig-sub-card .sig-sub-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg);
}
.sig-sub-card .sig-sub-role {
    font-size: 9px;
    color: var(--fg2);
    background: rgba(255,255,255,0.04);
    padding: 1px 6px;
    border-radius: 8px;
}
.shared-ind-entry {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.shared-ind-entry .shared-ind-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* View mode: form controls become read-only styled text (.drawer-body context) */
.detail-drawer:not(.editing) .drawer-body input:not([type="checkbox"]),
.detail-drawer:not(.editing) .drawer-body select,
.detail-drawer:not(.editing) .drawer-body textarea {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
    color: var(--fg);
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 0;
}
.detail-drawer:not(.editing) .drawer-body select {
    background-image: none;
    padding-right: 0;
}
.detail-drawer:not(.editing) .drawer-body input[type="checkbox"] {
    pointer-events: none;
}
/* View mode: form controls become read-only styled text (.spv2-panel context — tabbed panels
   are siblings of .drawer-body, not children, so they need the same rules re-scoped) */
.detail-drawer:not(.editing) .spv2-panel input:not([type="checkbox"]),
.detail-drawer:not(.editing) .spv2-panel select,
.detail-drawer:not(.editing) .spv2-panel textarea:not(#fldJson) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
    color: var(--fg);
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 0;
}
/* JSON textarea: always allow read/copy/scroll even in view mode */
.detail-drawer:not(.editing) #fldJson {
    pointer-events: auto;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    background: var(--bg);
    border-color: var(--border);
    opacity: 1;
}
.detail-drawer:not(.editing) .spv2-panel select {
    background-image: none;
    padding-right: 0;
}
.detail-drawer:not(.editing) .spv2-panel input[type="checkbox"] {
    pointer-events: none;
}
/* View mode: hide interactive affordances */
.detail-drawer:not(.editing) .drawer-body .signal-entry [data-sig-remove],
.detail-drawer:not(.editing) .drawer-body .signal-entry [data-sig-import],
.detail-drawer:not(.editing) .drawer-body .shared-ind-entry [data-shared-remove] {
    display: none;
}

/* ── Detail Panel ── */
.detail-panel {
    padding: 0;
}
.detail-panel .section-card:first-child { margin-top: 0; }

/* ── Status Indicator ── */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.status-dot.green { background: var(--green); }
.status-dot.red { background: var(--red); }
.status-dot.yellow { background: var(--yellow); }
.status-dot.orange { background: #fb923c; }
.status-dot.muted { background: var(--fg2); }

/* ── Progress Bar ── */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    margin: 6px 0;
}
.progress-bar .fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s, background 0.3s;
    background: var(--green);
    box-shadow: 0 0 8px rgba(34,197,94,0.25);
}

/* ── Alerts Box ── */
.alerts-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--fg2);
    white-space: pre-wrap;
    max-height: 160px;
    overflow-y: auto;
    font-family: 'Cascadia Mono', monospace;
}

/* ── Sidebar Navigation (Settings) ── */

/* ── Settings field-level validation errors ── */
.input-error { border-color: var(--red, #e74c3c) !important; box-shadow: 0 0 0 1px var(--red, #e74c3c); }
.field-error { display: block; color: var(--red, #e74c3c); font-size: 11px; margin-top: 2px; }

.sidebar-layout {
    display: flex;
    height: 100%;
}
.sidebar-nav {
    width: 170px;
    min-width: 150px;
    background: rgba(35,38,45,1);
    border-right: 1px solid var(--border);
    padding: 8px 0;
    overflow-y: auto;
}
.sidebar-nav .nav-item {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--fg2);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-nav .nav-item:hover { background: rgba(42,48,60,1); color: var(--fg); }
.sidebar-nav .nav-item.active {
    background: rgba(45,55,72,1);
    color: var(--fg);
    border-left-color: var(--teal);
    font-weight: 600;
}
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* ── Info / Metric Text (compact) ── */
.section-card p {
    font-size: 12px;
    color: var(--fg2);
    margin: 5px 0;
    line-height: 1.55;
}
.section-card p strong { color: var(--fg); font-weight: 600; }

/* ── Compact Metric Row ── */
.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.metric-row:last-child { border-bottom: none; }
.metric-row .metric-label { color: var(--fg2); }
.metric-row .metric-value { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Status Block (Market Close, etc.) ── */
.status-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.status-block > div {
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    border-left: 3px solid var(--border);
    transition: border-color 0.15s;
}
.status-block > div:hover {
    border-left-color: var(--teal);
}
.status-block .status-item-label {
    font-size: 10px;
    color: var(--fg2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.status-block .status-item-value {
    font-size: 14px;
    font-weight: 700;
    margin-top: 3px;
}

/* ── Countdown ── */
.countdown-value {
    font-size: 2.6rem;
    font-weight: 700;
    font-family: 'Cascadia Mono', monospace;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 12px 0 8px;
    color: var(--teal);
    letter-spacing: 0.04em;
    text-shadow: 0 0 30px rgba(20,184,166,0.2);
}

/* ── Two-Column Form Grid ── */
.form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
}
.form-2col .form-row { margin-bottom: 4px; }

/* ── Callouts (Info / Warning / Danger) ── */
.info-callout {
    background: rgba(59,130,246,0.05);
    border: 1px solid rgba(59,130,246,0.12);
    border-left: 3px solid var(--blue);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--fg2);
    line-height: 1.6;
}
.warning-callout {
    background: rgba(251,191,36,0.05);
    border: 1px solid rgba(251,191,36,0.12);
    border-left: 3px solid var(--yellow);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--fg2);
    line-height: 1.5;
}
.danger-callout {
    background: rgba(239,68,68,0.05);
    border: 1px solid rgba(239,68,68,0.12);
    border-left: 3px solid var(--red);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--fg2);
    line-height: 1.6;
}
.danger-callout strong, .warning-callout strong, .info-callout strong { color: var(--fg); }

/* ── Import Config Panels ── */
.import-config-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 16px;
    flex-shrink: 0;
    background: var(--bg);
}
.import-config-panels .section-card {
    margin-bottom: 0;
    padding: 12px 16px;
}
.import-config-panels .section-card h2 { margin-bottom: 8px; padding-bottom: 6px; }
.import-config-panels .form-row { padding: 2px 4px; margin-bottom: 2px; }
.import-config-panels .form-row label { width: 100px; min-width: 80px; }
/* Let selects fill the card width */
.import-strategy-card .form-row select,
.import-settings-card .form-row select { max-width: none; }
.import-settings-card .form-row input[type="number"] { max-width: 130px; }
.import-config-panels .signal-info-panel { margin-top: 8px; padding: 8px 12px; }
.import-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ── Signal Info Tags (import page — timeframe / direction / indicators) ── */
.signal-info-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.sig-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 5px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255,255,255,0.09);
}
.sig-tag-label {
    padding: 3px 6px;
    background: rgba(255,255,255,0.06);
    color: var(--fg2);
    border-right: 1px solid rgba(255,255,255,0.09);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sig-tag-value {
    padding: 3px 7px;
    background: rgba(255,255,255,0.03);
    color: var(--fg);
}
/* Colour-code common tag values */
.sig-tag:has(.sig-tag-label[data-key="timeframe"]) .sig-tag-value { color: var(--blue); }
.sig-tag:has(.sig-tag-label[data-key="direction"]) .sig-tag-value { color: var(--teal); }
.sig-tag:has(.sig-tag-label[data-key="indicators"]) .sig-tag-value { color: var(--yellow); }
.sig-tag:has(.sig-tag-label[data-key="parameters"]) .sig-tag-value { color: #8b5cf6; }
@media (max-width: 900px) {
    .import-config-panels { grid-template-columns: 1fr; }
    .import-settings-grid { grid-template-columns: 1fr; }
}

/* ── Custom Scrollbar for Panels ── */
.split-right::-webkit-scrollbar,
.split-left::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar { width: 5px; }
.split-right::-webkit-scrollbar-track,
.split-left::-webkit-scrollbar-track,
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.split-right::-webkit-scrollbar-thumb,
.split-left::-webkit-scrollbar-thumb,
.sidebar-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.split-right::-webkit-scrollbar-thumb:hover,
.split-left::-webkit-scrollbar-thumb:hover,
.sidebar-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ── Modal Overlay ── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease-out;
}
.modal.hidden { display: none; }
.modal-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 28px;
    min-width: 340px;
    max-width: 480px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.06);
    animation: slideUp 0.2s ease-out;
}
.modal-content h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 10px 0;
}
.modal-content p {
    font-size: 13px;
    color: var(--fg2);
    line-height: 1.6;
    margin: 0 0 18px 0;
}
/* ── Profile Switch Modal ── */
.profile-switch-modal {
    min-width: 420px;
    max-width: 520px;
    background: var(--panel);
}
/* Override: let selects fill the modal width instead of 220px cap */
.profile-switch-card .form-row select {
    max-width: none;
}
.signal-info-panel {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.signal-info-panel.hidden { display: none; }
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Page Body Scrollbar ── */
.page-body::-webkit-scrollbar { width: 5px; }
.page-body::-webkit-scrollbar-track { background: transparent; }
.page-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.page-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ═══════════════════════════════════════════════════════
   Catalog Picker Modal (Signal Profiles page)
   ═══════════════════════════════════════════════════════ */

.picker-modal {
    width: 520px;
    max-width: 95vw;
    max-height: 85vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
}
.picker-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    margin: 0;
}
.picker-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--fg2);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
}
.picker-close:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.25);
    color: var(--red);
}
.picker-search-wrap {
    position: relative;
    padding: 12px 20px 8px;
}
.picker-search {
    width: 100%;
    padding: 9px 14px 9px 34px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--fg);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.picker-search:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(20,184,166,0.15);
}
.picker-search::placeholder { color: var(--fg2); opacity: 0.6; }
.picker-search-icon {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--fg2);
    pointer-events: none;
}
.picker-count {
    padding: 0 20px 6px;
    font-size: 11px;
    color: var(--fg2);
    letter-spacing: 0.02em;
}
.picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 8px;
    min-height: 180px;
    max-height: 46vh;
}
.picker-list::-webkit-scrollbar { width: 5px; }
.picker-list::-webkit-scrollbar-track { background: transparent; }
.picker-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.picker-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

.picker-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    margin-bottom: 2px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.12s;
}
.picker-item:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
}
.picker-item.active {
    background: rgba(20,184,166,0.08);
    border-color: rgba(20,184,166,0.3);
}
.picker-item.dimmed {
    opacity: 0.45;
}
.picker-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.picker-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
}
.picker-item-type {
    font-size: 11px;
    color: var(--fg2);
    font-family: 'Cascadia Mono', monospace;
}
.picker-item-desc {
    font-size: 11px;
    color: var(--fg2);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.picker-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 3px;
    white-space: nowrap;
}
.picker-badge.kg { background: rgba(139,92,246,0.15); color: #a78bfa; }
.picker-badge.params { background: rgba(59,130,246,0.12); color: #93c5fd; }
.picker-badge.subs { background: rgba(251,191,36,0.12); color: #fcd34d; }
.picker-badge.added { background: rgba(34,197,94,0.12); color: var(--green); }
.picker-badge.danger { background: rgba(239,68,68,0.12); color: #f87171; }
.picker-badge.script { background: rgba(6,182,212,0.12); color: #67e8f9; }

.picker-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--fg2);
    font-size: 13px;
}
.picker-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }

.picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    gap: 12px;
}
.picker-selection {
    font-size: 12px;
    color: var(--fg2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.picker-selection strong { color: var(--teal); font-weight: 600; }
.picker-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   Trade Focus Page (trade.html)
   ═══════════════════════════════════════════════════════ */

/* ── Trade Header Bar ── */
.trade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.trade-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.trade-header-center {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.trade-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.trade-ticker {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: 0.02em;
}
.trade-dir {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.trade-state {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
}
.trade-duration {
    font-size: 11px;
    color: var(--fg2);
    font-family: 'Cascadia Mono', monospace;
    font-variant-numeric: tabular-nums;
}
.trade-live-price {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'Cascadia Mono', monospace;
    color: var(--fg);
    letter-spacing: -0.01em;
}
.trade-pnl {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: 'Cascadia Mono', monospace;
}
.hdr-sparkline {
    display: inline-flex;
    align-items: center;
    width: 56px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.9;
}
.spark-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.trade-conn {
    font-size: 14px;
    color: var(--fg2);
    margin-left: 4px;
    transition: color 0.2s;
}
.trade-conn.connected { color: var(--green); }
.trade-conn.disconnected { color: var(--red); }

/* ── Trade Layout ── */
.trade-page-body { padding: 0; }
.trade-layout {
    display: flex;
    gap: 12px;
    height: 100%;
    padding: 12px 16px;
}
.trade-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.trade-sidebar {
    flex: 0 0 auto;
    width: 340px;
    min-width: 280px;
    max-width: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Chart Card ── */
.trade-chart-card {
    padding: 10px 14px 6px;
    display: flex;
    flex-direction: column;
}
.trade-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.trade-chart-toolbar h2 {
    margin: 0;
    padding: 0;
    border: none;
}
.trade-chart-info {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--fg2);
}
.trade-chart-container {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;
}

/* ── Signal Grid ── */
.signal-grid .metric-row .metric-value { display: flex; align-items: center; gap: 6px; }
.signal-value {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Confidence Bar ── */
.confidence-bar {
    width: 80px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}
.confidence-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background 0.3s;
}

/* ── Signal Route Badge ── */
.signal-route-badge {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
}

/* ── Signal Section Divider ── */
.signal-section-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
    opacity: 0.5;
}
/* Suppress metric-row border immediately before a section divider — prevents double-line */
.signal-grid .metric-row:has(+ .signal-section-divider) { border-bottom-color: transparent; }

/* ── Gate Result Badges ── */
.gate-result {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
}
.gate-pass { color: var(--green); }
.gate-block { color: var(--red); }

/* ── Gate Insight Panel ── */
.gate-insight {
    display: flex;
    gap: 2px;
    margin: 6px 0 2px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    overflow: hidden;
}
.gate-insight-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px 6px;
    gap: 1px;
    min-width: 0;
}
.gate-insight-col:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.05);
}
.gate-insight-verdict {
    flex: 0.6;
}
.gate-insight-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.gate-insight-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg2);
    opacity: 0.7;
}
.gate-insight-hint {
    font-size: 10px;
    color: var(--fg2);
    opacity: 0.5;
    text-align: center;
    line-height: 1.2;
}

/* ── Inline Switch Button (trade card profile switch) ── */
.btn-inline-switch {
    display: inline-block;
    background: none;
    border: 1px solid var(--border);
    color: var(--fg2);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    transition: color 0.2s, border-color 0.2s;
}
.btn-inline-switch:hover {
    color: var(--teal);
    border-color: var(--teal);
}

/* ── Semantic Signal Colors ──
   Grouped by trader intent, not binary positive/negative.
   Entry (green) · Profit (teal) · Exit (amber) · Neutral (inherit) · Error (dim red) */
.sig-entry  { color: var(--green); }
.sig-profit { color: var(--teal); }
.sig-exit   { color: var(--yellow); }
.sig-error  { color: var(--red); opacity: 0.7; }

/* ── Live Signal Pulse Dot ── */
.signal-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    animation: signalPulse 2s ease-in-out infinite;
}
@keyframes signalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Risk/Reward Position Gauge ── */
.risk-gauge {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin: 2px 0;
}
.risk-gauge-track {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(to right,
        rgba(239,68,68,0.25),
        rgba(251,191,36,0.15) 40%,
        rgba(34,197,94,0.25));
}
.risk-gauge-marker {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--card);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
    transition: left 0.4s ease, background 0.3s;
    z-index: 1;
}
.risk-gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--fg2);
    margin-top: 3px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    font-family: 'Cascadia Mono', monospace;
}

/* ── Trade sidebar scrollbar ── */
.trade-sidebar::-webkit-scrollbar,
.trade-main::-webkit-scrollbar { width: 5px; }
.trade-sidebar::-webkit-scrollbar-track,
.trade-main::-webkit-scrollbar-track { background: transparent; }
.trade-sidebar::-webkit-scrollbar-thumb,
.trade-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.trade-sidebar::-webkit-scrollbar-thumb:hover,
.trade-main::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ═══════════════════════════════════════════════════════
   Trade Journal Page (journal.html)
   ═══════════════════════════════════════════════════════ */

/* ── Journal Filter Bar ── */
.journal-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.journal-filters input,
.journal-filters select {
    padding: 5px 10px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.journal-filters input:focus,
.journal-filters select:focus { outline: none; border-color: var(--teal); }
.journal-filters .filter-label { font-size: 11px; color: var(--fg2); white-space: nowrap; }
.journal-filters .filter-count { font-size: 11px; color: var(--fg2); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── Journal Outcome Badges ── */
.badge-outcome {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.badge-outcome.win { color: var(--green); background: rgba(34,197,94,0.12); }
.badge-outcome.loss { color: var(--red); background: rgba(239,68,68,0.12); }
.badge-outcome.flat { color: var(--fg2); background: rgba(160,165,175,0.10); }

/* ── Exit Reason Badges ── */
.badge-exit {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}
.badge-exit.tp { color: var(--green); background: rgba(34,197,94,0.10); }
.badge-exit.sl { color: var(--red); background: rgba(239,68,68,0.10); }
.badge-exit.signal { color: var(--teal); background: rgba(20,184,166,0.10); }
.badge-exit.manual { color: var(--yellow); background: rgba(251,191,36,0.10); }
.badge-exit.mktclose { color: var(--blue); background: rgba(59,130,246,0.10); }

/* ── Journal Summary Stats Grid ── */
.journal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}
.journal-stats .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.journal-stats .stat-item:last-child { border-bottom: none; }
.journal-stats .stat-label { color: var(--fg2); }
.journal-stats .stat-value { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════
   System Health Page (health.html)
   ═══════════════════════════════════════════════════════ */

/* ── Health Status Banner ── */
.health-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.health-banner.healthy {
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.15);
}
.health-banner.degraded {
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.15);
}
.health-banner.critical {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
}
.health-banner .banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: signalPulse 2s ease-in-out infinite;
}
.health-banner .banner-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}
.health-banner .banner-sub {
    font-size: 12px;
    color: var(--fg2);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-family: 'Cascadia Mono', monospace;
}

/* ── Component Health Cards Grid ── */
.health-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 1100px) { .health-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .health-grid { grid-template-columns: 1fr; } }
.health-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color 0.15s;
}
.health-card:hover { border-color: rgba(255,255,255,0.12); }
.health-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.health-card-name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg);
}
.health-card-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}
.health-card-status.green { color: var(--green); background: rgba(34,197,94,0.12); }
.health-card-status.red { color: var(--red); background: rgba(239,68,68,0.12); }
.health-card-status.yellow { color: var(--yellow); background: rgba(251,191,36,0.12); }
.health-card-status.muted { color: var(--fg2); background: rgba(160,165,175,0.10); }
.health-card-detail {
    font-size: 12px;
    color: var(--fg2);
    margin-bottom: 8px;
    line-height: 1.4;
}
.health-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.health-metric {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.health-metric:last-child { border-bottom: none; }
.health-metric-key { color: var(--fg2); }
.health-metric-val { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Health Event Log ── */
.health-event-log {
    max-height: 280px;
    overflow-y: auto;
}
.health-event {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
}
.health-event:last-child { border-bottom: none; }
.health-event-time {
    font-family: 'Cascadia Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--fg2);
    font-size: 11px;
    white-space: nowrap;
    min-width: 55px;
}
.health-event-severity {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.health-event-severity.info { color: var(--blue); background: rgba(59,130,246,0.10); }
.health-event-severity.warning { color: var(--yellow); background: rgba(251,191,36,0.10); }
.health-event-severity.error { color: var(--red); background: rgba(239,68,68,0.10); }
.health-event-source {
    color: var(--teal);
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}
.health-event-msg { color: var(--fg2); line-height: 1.4; }
.health-event-log::-webkit-scrollbar { width: 5px; }
.health-event-log::-webkit-scrollbar-track { background: transparent; }
.health-event-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* ═════════════════════════════════════════════════════════
   PERFORMANCE ANALYTICS PAGE
   ════════════════════════════════════════════════════════ */

.analytics-chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    width: 100%;
}
.chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.chart-card-header h2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    margin: 0;
    letter-spacing: 0.3px;
}
.chart-hint {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.analytics-chart-wrap {
    width: 100%;
    height: 300px;
    min-height: 200px;
}
.analytics-chart-sm {
    height: 180px;
    min-height: 140px;
}

/* Two-column layout */
.analytics-columns {
    display: flex;
    gap: 16px;
    width: 100%;
}
.analytics-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}
.analytics-card-wide { flex: 1.6; }
.analytics-card h2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    margin: 0 0 12px 0;
    letter-spacing: 0.3px;
}

/* Risk metric grid */
.analytics-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.analytics-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--panel);
    border-radius: 6px;
    font-size: 12px;
}
.analytics-metric .metric-label {
    color: var(--fg2);
}
.analytics-metric .metric-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Period buttons */
.period-btn {
    background: var(--panel);
    color: var(--fg2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.period-btn.active,
.period-btn:hover {
    background: var(--teal);
    color: #000;
    border-color: var(--teal);
}

/* Returns & signal tables */
.analytics-returns-table-wrap {
    max-height: 360px;
    overflow-y: auto;
}
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.analytics-table th {
    position: sticky;
    top: 0;
    background: var(--card);
    color: var(--fg2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.analytics-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}
.analytics-table tr:hover td {
    background: rgba(255,255,255,0.02);
}
.signal-name-badge {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   ALERTS / NOTIFICATIONS PAGE
   ════════════════════════════════════════════════════════ */

/* Filter bar */
.alerts-filter-bar {
    display: flex;
    gap: 12px;
    padding: 0 20px 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    flex-shrink: 0;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.filter-group label {
    font-size: 10px;
    color: var(--fg2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.filter-select,
.filter-input {
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    outline: none;
    min-width: 110px;
    width: 100%;
}
.filter-select:focus,
.filter-input:focus {
    border-color: var(--teal);
}
.filter-search { flex: 1; min-width: 180px; }

/* Alert feed */
.alerts-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 20px;
}
.empty-state {
    text-align: center;
    color: var(--fg2);
    padding: 40px 0;
    font-size: 13px;
}

/* Alert card */
.alert-card {
    display: flex;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: opacity 0.2s, transform 0.2s;
}
.alert-card.alert-dismissed {
    opacity: 0.45;
}
.alert-card-left {
    width: 4px;
    flex-shrink: 0;
}
.alert-sev-info .alert-card-left,
.alert-severity-dot.alert-sev-info { background: var(--teal); }
.alert-sev-warning .alert-card-left,
.alert-severity-dot.alert-sev-warning { background: var(--yellow); }
.alert-sev-error .alert-card-left,
.alert-severity-dot.alert-sev-error { background: var(--red); }
.alert-sev-critical .alert-card-left,
.alert-severity-dot.alert-sev-critical { background: #dc2626; }

.alert-severity-dot {
    display: none;
}
.alert-card-body {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
}
.alert-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.alert-icon {
    font-size: 14px;
}
.alert-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
}
.alert-ticker {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.alert-category {
    font-size: 11px;
    color: var(--fg2);
    margin-left: auto;
}
.alert-message {
    font-size: 12px;
    color: var(--fg2);
    line-height: 1.4;
    margin-bottom: 4px;
}
.alert-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-time {
    font-size: 11px;
    color: var(--fg2);
    opacity: 0.7;
}
.alert-badge-dismissed {
    font-size: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--fg2);
    padding: 1px 6px;
    border-radius: 3px;
}
.alert-card-actions {
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.btn-dismiss {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg2);
    border-radius: 5px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}
.btn-dismiss:hover {
    background: rgba(239,68,68,0.15);
    color: var(--red);
    border-color: var(--red);
}

/* Flash animation for new real-time alerts */
@keyframes alertFlash {
    0%   { background: rgba(20, 184, 166, 0.15); }
    100% { background: var(--card); }
}
.alert-flash {
    animation: alertFlash 1.5s ease-out;
}

/* ── Analytics + Alerts responsive ── */

@media (max-width: 900px) {
    .analytics-columns {
        flex-direction: column;
    }
    .analytics-card-wide { flex: 1; }
    .analytics-metric-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════
   Command Palette
   ═══════════════════════════════════════════════════════ */
.cmd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 160px);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.cmd-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.cmd-palette {
    width: min(540px, 92vw);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
    transform: translateY(-12px) scale(0.97);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmd-backdrop.open .cmd-palette {
    transform: translateY(0) scale(1);
}

/* Search input */
.cmd-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.cmd-search-icon {
    font-size: 16px;
    color: var(--teal);
    flex-shrink: 0;
}
.cmd-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--fg);
    font-size: 15px;
    font-family: inherit;
    caret-color: var(--teal);
}
.cmd-search::placeholder { color: var(--fg2); opacity: 0.6; }
.cmd-kbd-hint {
    font-size: 10px;
    color: var(--fg2);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Cascadia Mono', monospace;
    flex-shrink: 0;
}

/* Results list */
.cmd-results {
    max-height: min(380px, 50vh);
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.cmd-group-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(160,165,175,0.5);
    padding: 8px 18px 4px;
    user-select: none;
}
.cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.08s;
    border-left: 2px solid transparent;
}
.cmd-item:hover { background: rgba(255,255,255,0.04); }
.cmd-item.selected {
    background: rgba(20, 184, 166, 0.10);
    border-left-color: var(--teal);
}
.cmd-item-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.cmd-item-text {
    flex: 1;
    min-width: 0;
}
.cmd-item-label {
    font-size: 13px;
    color: var(--fg);
    font-weight: 500;
}
.cmd-item-label mark {
    background: rgba(20, 184, 166, 0.3);
    color: var(--fg);
    border-radius: 2px;
    padding: 0 1px;
}
.cmd-item-desc {
    font-size: 10px;
    color: var(--fg2);
    margin-top: 1px;
}
.cmd-item-shortcut {
    font-size: 10px;
    color: var(--fg2);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'Cascadia Mono', monospace;
    flex-shrink: 0;
}
.cmd-item.current-page .cmd-item-label::after {
    content: ' ●';
    color: var(--teal);
    font-size: 8px;
}
.cmd-empty {
    text-align: center;
    padding: 24px 18px;
    color: var(--fg2);
    font-size: 12px;
}

/* Footer hint */
.cmd-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 18px;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 10px;
    color: rgba(160,165,175,0.5);
    user-select: none;
}
.cmd-footer kbd {
    font-family: 'Cascadia Mono', monospace;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════
   Live Status Bar — Real-time portfolio vitals
   ═══════════════════════════════════════════════════════ */
.status-bar {
    flex-shrink: 0;
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 12px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-family: 'Cascadia Mono', 'Segoe UI', monospace;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.sb-segment {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
.sb-segment:last-child { border-right: none; }
.sb-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg2);
    font-weight: 600;
}
.sb-value {
    font-weight: 600;
    color: var(--fg);
}
.sb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    transition: background 0.3s;
}
.sb-dot.offline { background: var(--red); }
.sb-dot.loading {
    background: var(--yellow);
    animation: sb-pulse 1s infinite;
}
@keyframes sb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.sb-spacer { flex: 1; }
.sb-cmd-hint {
    font-size: 10px;
    color: var(--fg2);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.sb-cmd-hint:hover { background: rgba(255,255,255,0.06); }
.sb-cmd-hint kbd {
    font-family: 'Cascadia Mono', monospace;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 10px;
    margin-right: 4px;
}

/* ══════════════════════════════════════════════════════
   Login Page — Trading Terminal Aesthetic
   ══════════════════════════════════════════════════════ */

/* ── Background ── */
.login-body {
    overflow: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: rgb(16, 16, 22);
    padding-bottom: 0 !important;
    position: relative;
}
.login-body #app { display: none !important; }

/* Subtle chart-like grid overlay */
.login-bg-grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(20,184,166,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,184,166,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
}

/* Radial ambient glow centred behind card */
.login-bg-glow {
    position: fixed;
    top: 45%;
    left: 50%;
    width: 700px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(20,184,166,0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Container ── */
.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    z-index: 1;
    position: relative;
}

/* ── Card ── */
.login-card {
    position: relative;
    background: rgba(40, 44, 52, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(70, 75, 85, 0.5);
    border-radius: 16px;
    padding: 0 36px 32px;
    overflow: hidden;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    animation: login-entrance 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes login-entrance {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Teal → blue gradient accent at top edge */
.login-accent {
    height: 3px;
    margin: 0 -36px 32px;
    background: linear-gradient(90deg, transparent 5%, var(--teal) 30%, var(--blue) 70%, transparent 95%);
    opacity: 0.6;
}

/* ── Header & Logo ── */
.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    background: rgba(20, 184, 166, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.1);
    border-radius: 18px;
    margin-bottom: 16px;
    position: relative;
}

.login-logo::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 24px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.login-header h1 {
    font-size: 21px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.login-subtitle {
    font-size: 12px;
    color: var(--fg2);
    letter-spacing: 0.15px;
}

/* ── Divider ── */
.login-divider {
    height: 1px;
    margin: 0 0 24px;
    background: linear-gradient(90deg, transparent 5%, var(--border) 50%, transparent 95%);
}

/* ── Form Fields ── */
.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--fg2);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 12px;
    color: var(--fg2);
    opacity: 0.4;
    transition: color 0.2s, opacity 0.2s;
    pointer-events: none;
    flex-shrink: 0;
}

.login-input-wrap:focus-within .login-input-icon {
    color: var(--teal);
    opacity: 0.9;
}

.login-field input {
    width: 100%;
    padding: 11px 12px 11px 38px;
    font-size: 13px;
    font-family: inherit;
    background: rgba(24, 24, 30, 0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--fg);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.login-field input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
    background: rgba(24, 24, 30, 0.85);
}

.login-field input::placeholder {
    color: rgba(160, 165, 175, 0.3);
}

/* Password input: extra padding for toggle button */
.login-input-wrap:has(.login-pw-toggle) input {
    padding-right: 40px;
}

/* ── Password Visibility Toggle ── */
.login-pw-toggle {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--fg2);
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.login-pw-toggle:hover {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.04);
}
.login-pw-toggle.active {
    opacity: 0.85;
    color: var(--teal);
}

/* ── Error Message ── */
.login-error {
    font-size: 12px;
    color: var(--red);
    min-height: 20px;
    margin-bottom: 6px;
    text-align: center;
    letter-spacing: 0.1px;
}

/* ── Submit Button ── */
.login-btn {
    width: 100%;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: linear-gradient(135deg, var(--teal), rgb(16, 155, 145));
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.25s, filter 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

/* Shine sweep on hover */
.login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%);
    transform: translateX(-110%);
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-btn:hover::before { transform: translateX(110%); }

.login-btn:hover {
    box-shadow: 0 6px 28px rgba(20, 184, 166, 0.25);
    filter: brightness(1.06);
}
.login-btn:active { filter: brightness(0.94); }
.login-btn:disabled {
    opacity: 0.5;
    cursor: wait;
    box-shadow: none;
    filter: none;
}
.login-btn:disabled::before { display: none; }

/* Arrow slides right on hover */
.login-btn-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.85;
}
.login-btn:hover .login-btn-arrow { transform: translateX(3px); }

/* ── Spinner ── */
/* ── Auth-check overlay (shown while session probe is in flight) ── */
.login-card--hidden {
    display: none !important;
}
.login-card--auth-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 40px 32px;
}
.login-card--auth-check .login-header {
    align-items: center;
    gap: 16px;
}
.login-card--auth-check .login-subtitle {
    margin: 0;
    font-size: 13px;
    color: rgba(160, 165, 175, 0.7);
    letter-spacing: 0.3px;
}
.login-spinner--lg {
    width: 28px;
    height: 28px;
    border-width: 3px;
    border-color: rgba(20, 184, 166, 0.18);
    border-top-color: rgb(20, 184, 166);
    border-radius: 50%;
    animation: login-spin 0.75s linear infinite;
}

.login-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin 0.6s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* ── Footer ── */
.login-footer {
    text-align: center;
    margin-top: 28px;
    font-size: 10px;
    color: rgba(160, 165, 175, 0.25);
    letter-spacing: 0.6px;
}

/* ── Shake (invalid credentials) ── */
@keyframes login-shake {
    0%, 100% { transform: translateX(0); }
    12% { transform: translateX(-10px); }
    28% { transform: translateX(8px); }
    44% { transform: translateX(-6px); }
    60% { transform: translateX(4px); }
    76% { transform: translateX(-2px); }
}
.login-card.shake {
    animation: login-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Login accessibility — focus-visible */
.login-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}
.login-pw-toggle:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    opacity: 0.7;
}
.login-field input:focus-visible {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

/* ── Mobile ── */
@media (max-width: 440px) {
    .login-card { padding: 0 24px 24px; border-radius: 12px; }
    .login-accent { margin: 0 -24px 24px; }
    .login-logo { width: 64px; height: 64px; }
    .login-logo svg { width: 40px; height: 40px; }
    .login-field input {
        padding: 13px 12px 13px 38px;
        font-size: 16px;
        border-radius: 10px;
    }
    .login-btn {
        padding: 14px;
        font-size: 15px;
        border-radius: 10px;
    }
    .login-pw-toggle {
        width: 44px;
        height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════
   Global App Confirm / Alert Dialog
   Professional themed replacement for native confirm() & alert()
   ═══════════════════════════════════════════════════════ */
.app-dialog-content {
    min-width: 360px;
    max-width: 460px;
    padding: 0;
    overflow: hidden;
}
.app-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px 0;
}
.app-dialog-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    margin: 0;
    line-height: 1.3;
}
.app-dialog-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.app-dialog-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.app-dialog-body {
    padding: 10px 24px 20px;
}
.app-dialog-body p {
    font-size: 13px;
    color: var(--fg2);
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}
.app-dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 0 24px 20px;
}
.app-dialog-actions .btn {
    min-width: 80px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
}
/* Danger variant — red tinted confirm button */
.app-dialog-actions .btn-confirm-danger {
    background: rgba(239,68,68,0.12);
    color: var(--red);
    border: 1px solid rgba(239,68,68,0.3);
}
.app-dialog-actions .btn-confirm-danger:hover:not(:disabled) {
    background: rgba(239,68,68,0.22);
    border-color: var(--red);
}
/* Prompt input field */
.app-dialog-input {
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
}
.app-dialog-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
/* ── Change Password Dialog ── */
.cpw-dialog { min-width: 380px; }
.cpw-fields { display: flex; flex-direction: column; gap: 12px; }
.cpw-fields .app-dialog-input { margin-top: 4px; }
.cpw-label {
    display: flex;
    flex-direction: column;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg2);
}
.cpw-error {
    font-size: 12px;
    color: var(--red);
    min-height: 16px;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   KB Validation Modal
   ═══════════════════════════════════════════════════════ */
.kb-validate-modal {
    width: 580px;
    max-width: 95vw;
    max-height: 88vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--panel);
    border-color: rgba(20,184,166,0.15);
}

/* ── Header ── */
.kb-validate-header {
    display: flex;
    align-items: flex-start;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    flex-shrink: 0;
}
.kb-validate-header-icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 1px;
}
.kb-validate-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    margin: 0;
    line-height: 1.2;
}
.kb-validate-header > div:nth-child(2) { flex: 1; min-width: 0; }
.kb-validate-path {
    font-size: 11px;
    color: var(--fg2);
    font-family: 'Cascadia Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
    opacity: 0.7;
}
.kb-validate-close {
    background: none;
    border: none;
    color: var(--fg2);
    font-size: 20px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    margin-top: -2px;
}
.kb-validate-close:hover { color: var(--fg); background: rgba(255,255,255,0.06); }

/* ── Input bar ── */
.kb-validate-inputs {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
}
.kb-input-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kb-input-group label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--fg2);
    opacity: 0.7;
}
.kb-validate-inputs input,
.kb-validate-inputs select {
    font-size: 12px;
    padding: 6px 10px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 32px;
}
.kb-validate-inputs input:focus,
.kb-validate-inputs select:focus {
    border-color: var(--teal);
    outline: none;
    box-shadow: 0 0 0 2px rgba(20,184,166,0.12);
}
.kb-validate-inputs input::placeholder { color: var(--fg2); opacity: 0.5; }
.kb-run-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: var(--teal);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.kb-run-btn:hover { background: rgb(17,164,148); box-shadow: 0 2px 8px rgba(20,184,166,0.25); }
.kb-run-btn:active { transform: scale(0.97); }
.kb-run-btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.kb-run-btn-icon { font-size: 10px; }

/* ── Verdict banner ── */
.kb-verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.kb-verdict.pass { background: rgba(34,197,94,0.06); color: var(--green); }
.kb-verdict.fail { background: rgba(239,68,68,0.06); color: var(--red); }
.kb-verdict.loading { background: rgba(59,130,246,0.06); color: var(--blue); }
.kb-verdict-icon { font-size: 18px; line-height: 1; }

/* ── Loading state — Knowledge Constellation ── */
.kb-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 28px;
    gap: 18px;
    text-align: center;
    overflow: hidden;
}

/* Canvas / SVG wrapper */
.kb-constellation {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* Outer slow pulse rings */
.kb-constellation::before,
.kb-constellation::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(99,179,237,0.18);
    animation: kb-pulse-ring 3s ease-out infinite;
}
.kb-constellation::after {
    animation-delay: 1.5s;
    border-color: rgba(167,139,250,0.12);
}

@keyframes kb-pulse-ring {
    0%   { transform: scale(0.55); opacity: 0.9; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Central nucleus */
.kb-nucleus {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #63b3ed, #3b82f6 60%, #1d4ed8);
    box-shadow: 0 0 12px rgba(99,179,237,0.55), 0 0 28px rgba(59,130,246,0.25);
    animation: kb-nucleus-pulse 2.4s ease-in-out infinite;
    z-index: 2;
}
@keyframes kb-nucleus-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(99,179,237,0.5), 0 0 24px rgba(59,130,246,0.2); transform: translate(-50%,-50%) scale(1); }
    50%       { box-shadow: 0 0 18px rgba(99,179,237,0.8), 0 0 40px rgba(59,130,246,0.35); transform: translate(-50%,-50%) scale(1.1); }
}

/* SVG orbital tracks + nodes */
.kb-orbital-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
}

/* Orbital track rings */
.kb-orbit-track {
    fill: none;
    stroke: rgba(148,163,184,0.1);
    stroke-width: 1;
}

/* Orbiting nodes — each is a <circle> with animation */
.kb-orb {
    fill: none;
    stroke-width: 1.5;
}
.kb-orb-1 { stroke: rgba(99,179,237,0.7); fill: rgba(99,179,237,0.15); }
.kb-orb-2 { stroke: rgba(167,139,250,0.7); fill: rgba(167,139,250,0.15); }
.kb-orb-3 { stroke: rgba(52,211,153,0.7); fill: rgba(52,211,153,0.15); }
.kb-orb-4 { stroke: rgba(251,191,36,0.6); fill: rgba(251,191,36,0.1); }
.kb-orb-5 { stroke: rgba(248,113,113,0.6); fill: rgba(248,113,113,0.1); }

/* Orbiting group wrappers animated via CSS */
.kb-orbit-g1 { animation: kb-orbit-cw  6s linear infinite; transform-origin: 60px 60px; }
.kb-orbit-g2 { animation: kb-orbit-ccw 9s linear infinite; transform-origin: 60px 60px; }
.kb-orbit-g3 { animation: kb-orbit-cw 13s linear infinite; transform-origin: 60px 60px; }

@keyframes kb-orbit-cw  { to { transform: rotate(360deg);  } }
@keyframes kb-orbit-ccw { to { transform: rotate(-360deg); } }

/* Connector spokes from nucleus to nodes — pulse along path */
.kb-spoke {
    stroke: rgba(99,179,237,0.12);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    fill: none;
    animation: kb-spoke-fade 2.4s ease-in-out infinite;
}
.kb-spoke:nth-child(2) { animation-delay: 0.8s; stroke: rgba(167,139,250,0.12); }
.kb-spoke:nth-child(3) { animation-delay: 1.6s; stroke: rgba(52,211,153,0.12); }
@keyframes kb-spoke-fade {
    0%,100% { opacity: 0.3; }
    50%     { opacity: 0.9; }
}

/* Floating data particles */
.kb-particle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(99,179,237,0.6);
    animation: kb-float 4s ease-in-out infinite;
}
.kb-particle:nth-child(2) { width:2px;height:2px; top:18%; left:72%; background:rgba(167,139,250,0.5); animation-delay:.9s; animation-duration:5.5s; }
.kb-particle:nth-child(3) { width:2px;height:2px; top:75%; left:22%; background:rgba(52,211,153,0.5); animation-delay:1.8s; animation-duration:3.8s; }
.kb-particle:nth-child(4) { width:3px;height:3px; top:80%; left:68%; background:rgba(251,191,36,0.4); animation-delay:2.7s; animation-duration:4.9s; }
@keyframes kb-float {
    0%,100% { transform: translateY(0) scale(1); opacity:0.6; }
    50%     { transform: translateY(-8px) scale(1.4); opacity:1; }
}

/* Text section */
.kb-loading-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.kb-loading-phase {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 0.01em;
}
.kb-loading-elapsed {
    font-size: 11px;
    color: var(--fg2);
    font-variant-numeric: tabular-nums;
    transition: color 0.6s;
    opacity: 0.7;
}
.kb-loading-hint {
    font-size: 11.5px;
    color: var(--fg2);
    background: rgba(234,179,8,0.07);
    border: 1px solid rgba(234,179,8,0.18);
    border-radius: 6px;
    padding: 7px 14px;
    max-width: 320px;
    line-height: 1.55;
}
.kb-loading-hint strong { color: var(--yellow); font-weight: 600; }

/* ── Empty state ── */
.kb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px;
    gap: 8px;
}
.kb-empty-icon { font-size: 32px; opacity: 0.4; }
.kb-empty-text { font-size: 13px; color: var(--fg); font-weight: 500; }
.kb-empty-hint { font-size: 11.5px; color: var(--fg2); opacity: 0.6; }

/* ── Scrollable body ── */
.kb-validate-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px 24px;
    min-height: 0;
}
.kb-validate-body::-webkit-scrollbar { width: 5px; }
.kb-validate-body::-webkit-scrollbar-track { background: transparent; }
.kb-validate-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.kb-validate-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ── Checklist ── */
.kb-checklist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.kb-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.55;
    transition: background 0.1s;
}
.kb-check:hover { background: rgba(255,255,255,0.02); }
.kb-check-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    margin-top: 1px;
}
.kb-check-icon.pass { background: rgba(34,197,94,0.12); color: var(--green); }
.kb-check-icon.warn { background: rgba(251,191,36,0.12); color: var(--yellow); }
.kb-check-icon.fail { background: rgba(239,68,68,0.12); color: var(--red); }
.kb-check-label { color: var(--fg); font-weight: 600; font-size: 12px; }
.kb-check-detail { color: var(--fg2); font-size: 11px; margin-left: 2px; }

/* ── Section cards ── */
.kb-section {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.kb-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--fg2);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    gap: 6px;
}
.kb-section-title.teal { color: var(--teal); border-bottom-color: rgba(20,184,166,0.1); }
.kb-section-title.purple { color: #8b5cf6; border-bottom-color: rgba(139,92,246,0.1); }
.kb-section-title.green { color: var(--green); border-bottom-color: rgba(34,197,94,0.1); }
.kb-section-title.yellow { color: var(--yellow); border-bottom-color: rgba(251,191,36,0.1); }

.kb-section-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    font-size: 11.5px;
}
.kb-section-grid .kv-label { color: var(--fg2); white-space: nowrap; }
.kb-section-grid .kv-value { color: var(--fg); font-weight: 500; word-break: break-all; }
.kb-section-note {
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--fg2);
    opacity: 0.75;
    line-height: 1.5;
}

/* ── Source availability pills ── */
.kb-source-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.kb-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    transition: all 0.15s;
}
.kb-source-pill.ready {
    color: var(--green);
    background: rgba(34,197,94,0.06);
    border-color: rgba(34,197,94,0.2);
}
.kb-source-pill.unavail {
    color: var(--fg2);
    background: rgba(70,75,85,0.15);
    border-color: rgba(70,75,85,0.3);
    opacity: 0.5;
}

/* ── Verdict badge in section ── */
.kb-verdict-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 1.4;
}
.kb-verdict-badge.good { background: rgba(34,197,94,0.08); color: var(--green); border: 1px solid rgba(34,197,94,0.15); }
.kb-verdict-badge.marginal { background: rgba(251,191,36,0.08); color: var(--yellow); border: 1px solid rgba(251,191,36,0.15); }
.kb-verdict-badge.poor { background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.15); }

/* ── Validate KB icon button (next to KB Path) ── */
.kb-validate-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(20,184,166,0.08);
    border: 1px solid rgba(20,184,166,0.2);
    color: var(--teal);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.15s;
}
.kb-validate-trigger:hover {
    background: rgba(20,184,166,0.15);
    border-color: rgba(20,184,166,0.4);
    box-shadow: 0 0 8px rgba(20,184,166,0.15);
}
.kb-validate-trigger:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════════════════════════
   Panel degradation states (degradation.js) — every read surface renders an
   explicit state: loading, loaded, stale-marked, or unavailable. Never blank,
   never fabricated.
   ═══════════════════════════════════════════════════════════════════════════════ */

.panel-loading {
    opacity: 0.6;
    pointer-events: none;
    animation: panel-pulse 1.4s ease-in-out infinite;
}

@keyframes panel-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.35; }
}

/* Refresh failed but the panel has content: keep last-good data, marked stale.
   The chip is a real element (degradation.js placeStaleChip), absolutely positioned at a
   fixed mapped spot — it never shifts siblings when it appears or disappears. */
.panel-stale { position: relative; }
.panel-stale-chip {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--yellow, #eab308);
    background: var(--panel, #1f2937);
    border: 1px solid var(--border, #374151);
    border-radius: 4px;
    padding: 1px 7px;
    pointer-events: auto;
    cursor: help;
    white-space: nowrap;
    z-index: 5;
}

/* Never loaded or persistently cold: explicit placeholder, never a silent blank. */
.panel-unavailable { position: relative; }
.panel-unavailable::after {
    content: attr(data-unavailable-message);
    display: block;
    padding: 14px 16px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted, #9ca3af);
    border: 1px dashed var(--border, #374151);
    border-radius: 8px;
    margin: 8px;
}

/* Absence placeholder (not-offered opt-in): the panel's content is replaced by the
   absence message — content and absence never contradict, and the pseudo-element
   message is unaffected (it is not a child). */
.panel-absent > * {
    display: none;
}