@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg: #0a0d10;
    --panel-bg: #10151a;
    --panel-bg-raised: #131920;
    --panel-border: #232b32;
    --text: #e7ecf1;
    --text-dim: #8a939d;
    --amber: #f5a623;
    --amber-dim: #b9832c;
    --green: #2ecc71;
    --red: #e74c3c;
    --blue: #4aa3ff;
    --header-bg: #050708;

    /* Sans-serif for UI chrome (headers, labels, buttons) - a cleaner,
       more "designed" read than monospace for prose-like text. Monospace
       stays reserved for tabular/numeric data below, where fixed-width
       digits keep columns aligned (the classic terminal convention). */
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Consolas", "SF Mono", monospace;

    --shadow-panel: 0 4px 18px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.02) inset;
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.55);
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Window launcher - opens each dashboard view as a REAL separate browser
   window (window.open), so it can be dragged onto another monitor - a CSS
   panel confined to one page/viewport can't do that. */
.window-launcher {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #030405;
    border-bottom: 1px solid var(--panel-border);
}

.win-btn {
    background: var(--panel-bg);
    color: var(--text-dim);
    border: 1px solid var(--panel-border);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    padding: 7px 16px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.win-btn:hover { color: var(--text); border-color: var(--text-dim); background: var(--panel-bg-raised); }
.win-btn.active { color: var(--amber); border-color: var(--amber); background: var(--panel-bg-raised); }
.win-btn.locked { color: #55606a; opacity: 0.65; }
.win-btn.locked:hover { color: var(--amber-dim); border-color: var(--amber-dim); background: var(--panel-bg); }

.win-mode-toggle {
    display: flex;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
}
.win-mode-btn {
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.win-mode-btn:hover { color: var(--text); }
.win-mode-btn.active { color: var(--bg); background: var(--amber); }

.topbar {
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 13px 22px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--panel-border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

.brand-logo {
    /* Logo's wordmark ("QUANT ALPHA") is dark charcoal, illegible directly
       on this dashboard's near-black header - the source PNG is
       transparent (not literally white), so a white chip behind it (not a
       baked-in white background) keeps it sharp at any size. */
    height: 40px;
    width: auto;
    display: block;
    background: #fff;
    border-radius: 6px;
    padding: 3px 8px;
}

.topbar .title {
    font-family: var(--font-ui);
    color: var(--amber);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.6px;
}

.ticker {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    gap: 2px;
}

.ticker .label {
    font-family: var(--font-ui);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.ticker .value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.ticker .change.up { color: var(--green); }
.ticker .change.down { color: var(--red); }

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
    margin-right: 6px;
}
.status-dot.live { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.down { background: var(--red); }

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 14px;
}

.span-all {
    grid-column: 1 / -1;
}

.span-3 {
    grid-column: span 3;
}

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-panel);
}

.panel-header {
    padding: 11px 16px;
    border-bottom: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
    color: var(--amber);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-body {
    overflow-y: auto;
    max-height: 400px;
}

.chart-body {
    height: 520px;
}

.symbol-select {
    background: var(--panel-bg-raised);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 5px 9px;
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
}

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

th {
    position: sticky;
    top: 0;
    background: var(--panel-bg);
    text-align: left;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.7px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--panel-border);
    text-transform: uppercase;
}

td {
    padding: 9px 14px;
    border-bottom: 1px solid #161c22;
    white-space: nowrap;
    font-size: 13.5px;
}

tr:hover td { background: #151b21; }

.pnl-pos { color: var(--green); }
.pnl-neg { color: var(--red); }

/* Price-tick flash: blue on uptick, red on downtick - broker-terminal style */
@keyframes flash-up-bg {
    0%   { background-color: rgba(74, 163, 255, 0.55); color: var(--blue); }
    100% { background-color: transparent; color: inherit; }
}
@keyframes flash-down-bg {
    0%   { background-color: rgba(231, 76, 60, 0.55); color: var(--red); }
    100% { background-color: transparent; color: inherit; }
}
.flash-up { animation: flash-up-bg 900ms ease-out; }
.flash-down { animation: flash-down-bg 900ms ease-out; }
.ltp-cell { transition: none; }
.tag {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #1c2530;
    color: var(--blue);
}
.tag.ce { color: var(--green); background: #10241a; }
.tag.pe { color: var(--red); background: #241010; }
.tag.type-options_strategy { color: var(--amber); background: rgba(245, 166, 35, 0.14); }
.tag.type-range_strategy { color: var(--blue); background: rgba(74, 163, 255, 0.14); }
.tag.type-unknown { color: var(--text-dim); background: #1c2530; }
/* Ratio Trade (scanner.js) - a real strategy suggestion with real uncapped
   risk on the short side, not a locked-in arb like the other scan types -
   flagged with a warning color so it doesn't visually blend in as "safe". */
.tag.type-ratio_trade { color: var(--amber); background: rgba(245, 166, 35, 0.14); border: 1px solid rgba(245, 166, 35, 0.35); }
/* Event Alert (event_alert_scanner.py) - a HIGH-materiality news event
   hitting a symbol you hold - flagged red so it reads as "check this now",
   distinct from the amber "worth noting" style used elsewhere. */
.tag.type-event_alert { color: var(--red); background: rgba(231, 76, 60, 0.14); border: 1px solid rgba(231, 76, 60, 0.35); }

.empty-row td {
    font-family: var(--font-ui);
    color: var(--text-dim);
    text-align: center;
    padding: 26px;
}

/* Scanner toolbar - category tabs (filter) + table/grid view toggle +
   4-box/5-box layout picker (grid mode only). Mirrors .win-btn's pill
   style at a smaller size so it reads as "part of this panel", not a
   second window-launcher bar. */
.scanner-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
}

.tab-group, .view-toggle-group, .layout-picker, .view-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-toggle-group { gap: 14px; }

.view-tab {
    background: var(--panel-bg-raised);
    color: var(--text-dim);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    padding: 5px 12px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.view-tab:hover { color: var(--text); border-color: var(--text-dim); }
.view-tab.active { color: var(--amber); border-color: var(--amber); background: rgba(245, 166, 35, 0.1); }

.layout-picker { display: none; }
.layout-picker.visible { display: flex; }

/* Grid view - "N box" layout: each box is one strategy category, holding
   its own condensed, clickable opportunity list. auto-fit naturally
   settles into 2 rows for 4 boxes or a 3+2 arrangement for 5, without
   hardcoding row math per layout size. */
.scanner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    padding: 14px;
}

.scan-box {
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scan-box-header {
    padding: 9px 13px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--amber);
}

.scan-box-count {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 11px;
}

.scan-box-body {
    max-height: 280px;
    overflow-y: auto;
}

.scan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 13px;
    border-bottom: 1px solid #161c22;
    cursor: pointer;
    transition: background 120ms ease;
}
.scan-item:hover { background: #182028; }
.scan-item:last-child { border-bottom: none; }

.scan-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.scan-item-symbol {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text);
}

.scan-item-edge {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
}

.scan-box-empty {
    padding: 22px 13px;
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 12px;
}

/* Detail modal - opened by clicking a grid-view item, shows every field
   that the table view has room for plus the full (untruncated) notes
   text, which the grid's condensed row can't show. */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 4, 5, 0.72);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-overlay.open { display: flex; }

.modal-panel {
    background: var(--panel-bg);
    border: 1px solid var(--amber);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
    max-width: 640px;
    width: 100%;
    max-height: 84vh;
    overflow-y: auto;
}

.modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
}

.modal-close {
    background: none;
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}
.modal-close:hover { color: var(--text); border-color: var(--text-dim); }

.modal-body { padding: 16px 20px 20px; }

.modal-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.modal-legs {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
    line-height: 1.7;
}

.modal-notes {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}

.reason-cell {
    white-space: normal;
    max-width: 320px;
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.5;
}

.daily-row { cursor: pointer; }
.daily-row td:first-child { width: 20px; color: var(--text-dim); }
.daily-detail-row td { padding: 0; background: #0d1116; }
.daily-detail-table { margin: 4px 14px 10px; width: calc(100% - 28px); }
.daily-detail-table th { position: static; background: transparent; font-size: 10.5px; }
.daily-detail-table td { font-size: 12.5px; }

.date-separator td {
    background: #0d1116;
    color: var(--amber);
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 6px 14px;
    text-align: center;
}

.footer {
    padding: 9px 22px;
    font-family: var(--font-ui);
    color: var(--text-dim);
    font-size: 11.5px;
    border-top: 1px solid var(--panel-border);
}

/* Draggable floating "Net Position" panel */
.floating-panel {
    position: fixed;
    top: 90px;
    right: 20px;
    width: 260px;
    background: var(--panel-bg);
    border: 1px solid var(--amber);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
    z-index: 1000;
    font-size: 12.5px;
    user-select: none;
}

.floating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--panel-border);
    cursor: move;
    border-radius: 7px 7px 0 0;
    color: var(--amber);
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 11.5px;
}

.collapse-btn {
    background: none;
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    width: 19px;
    height: 19px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    transition: color 120ms ease, border-color 120ms ease;
}
.collapse-btn:hover { color: var(--text); border-color: var(--text-dim); }

.floating-body {
    padding: 10px 12px;
    max-height: 70vh;
    overflow-y: auto;
}
.floating-body.collapsed { display: none; }
#edge-panel-content.collapsed { display: none; }

/* ---- Live Trade Alerts cascade (live_alerts.js, global on every page) -
   own .la-* prefix, own top-right default position, distinct from
   .floating-panel's default (top:90px/right:20px, used by Net Position on
   portfolio.html) so the two never overlap when both are present. ---- */
.live-alerts-panel {
    top: 90px;
    right: 300px;
    width: 300px;
    max-width: calc(100vw - 24px);
}
.la-card {
    position: relative;
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--blue);
    border-radius: 2px;
    padding: 7px 26px 7px 9px;
    margin-bottom: 6px;
    cursor: pointer;
    animation: la-slide-in 0.25s ease-out;
}
.la-card:last-child { margin-bottom: 0; }
.la-card.la-sev-high { border-left-color: var(--red); }
.la-card.la-sev-high { animation: la-slide-in 0.25s ease-out, la-glow 2.2s ease-in-out infinite; }
@keyframes la-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes la-glow {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 77, 77, 0); }
    50%      { box-shadow: inset 3px 0 8px -2px rgba(255, 77, 77, 0.35); }
}
.la-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.la-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
}
.la-badge.la-sev-normal { color: var(--green); background: rgba(38, 208, 124, 0.14); }
.la-badge.la-sev-high { color: var(--red); background: rgba(255, 77, 77, 0.14); }
.la-updated {
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    color: #08090b; background: var(--blue); border-radius: 2px; padding: 1px 5px;
}
.la-symbol { font-family: var(--font-ui); font-weight: 700; font-size: 11px; color: var(--text); }
.la-time { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); margin-left: auto; }
.la-dismiss {
    position: absolute; top: 4px; right: 4px;
    width: 16px; height: 16px; line-height: 14px;
    text-align: center; padding: 0;
    background: none; border: none; color: var(--text-dim);
    font-size: 14px; cursor: pointer; border-radius: 3px;
}
.la-dismiss:hover { color: var(--text); background: var(--panel-border); }
.la-headline {
    font-family: var(--font-ui); font-size: 11.5px; color: var(--text);
    margin-top: 3px; line-height: 1.35;
}
.la-detail {
    display: none;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--panel-border);
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--text-dim);
}
.la-card.open .la-detail { display: block; }
.la-detail-row { margin-bottom: 4px; line-height: 1.4; }
.la-detail-row b { color: var(--text-dim); font-weight: 700; }
.la-detail-row.la-hi { color: var(--text); }

.np-section-label {
    font-family: var(--font-ui);
    color: var(--amber);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 6px 0 3px;
}

.np-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    gap: 8px;
}

.np-label {
    font-family: var(--font-ui);
    color: var(--text-dim);
    white-space: nowrap;
}

.np-value {
    font-family: var(--font-mono);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.np-divider {
    border-top: 1px solid var(--panel-border);
    margin: 8px 0;
}

/* News feed */
.news-item {
    padding: 12px 16px;
    border-bottom: 1px solid #161c22;
}
.news-item.news-alert {
    background: rgba(245, 166, 35, 0.07);
    border-left: 3px solid var(--amber);
}
.news-headline a {
    font-family: var(--font-ui);
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}
.news-headline a:hover { color: var(--amber); text-decoration: underline; }
.news-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 5px;
    font-family: var(--font-ui);
    color: var(--text-dim);
    font-size: 11.5px;
}

/* Global/Macro Watch panel (news.html right sidebar) */
.macro-subheader {
    padding: 8px 16px;
    font-family: var(--font-ui);
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--panel-border);
}
/* ===== Market Overview (index.html) - Bloomberg-terminal style ===== */

/* Scrolling ticker tape - the exchange-style rates strip along the top.
   Two identical halves inside the track, each 50% wide, animated -50%:
   that makes the loop seamless (the second half is exactly where the
   first started), which a single copy can't do without a visible jump. */
.mo-tape {
    overflow: hidden;
    white-space: nowrap;
    background: var(--header-bg);
    border-bottom: 1px solid var(--panel-border);
    padding: 7px 0;
    position: relative;
}
.mo-tape::before,
.mo-tape::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.mo-tape::before { left: 0; background: linear-gradient(90deg, var(--header-bg), transparent); }
.mo-tape::after { right: 0; background: linear-gradient(270deg, var(--header-bg), transparent); }
.mo-tape-track {
    display: inline-block;
    animation: mo-tape-scroll 70s linear infinite;
}
.mo-tape:hover .mo-tape-track { animation-play-state: paused; }
@keyframes mo-tape-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.mo-tape-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.mo-tape-sym {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    color: var(--text-dim);
    text-transform: uppercase;
}
.mo-tape-price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.mo-tape-chg { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.mo-tape-chg.pos { color: var(--green); }
.mo-tape-chg.neg { color: var(--red); }

/* Brief flash when a price actually ticks - makes "live" visible */
@keyframes mo-flash-up   { from { background: rgba(46, 204, 113, 0.30); } to { background: transparent; } }
@keyframes mo-flash-down { from { background: rgba(231, 76, 60, 0.30); } to { background: transparent; } }
.mo-tick-up   { animation: mo-flash-up 0.7s ease-out; }
.mo-tick-down { animation: mo-flash-down 0.7s ease-out; }

/* Live-status dot in the panel headers */
.mo-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 6px;
    animation: mo-pulse 2s ease-in-out infinite;
}
@keyframes mo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Filter strip: asset class / region / sector selectors above the table */
.mo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.012);
}
.mo-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mo-filter-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 2px;
}

/* Sortable column headers - the arrow the user clicks to flip asc/desc */
th.mo-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease;
}
th.mo-sortable:hover { color: var(--text); }
th.mo-sortable.active { color: var(--amber); }
th.mo-sortable .mo-arrow {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.35;
    font-size: 9px;
}
th.mo-sortable.active .mo-arrow { opacity: 1; }
th.mo-num, td.mo-num { text-align: right; }

/* Rank number in the leftmost column */
td.mo-rank {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 11.5px;
    width: 34px;
}
.mo-name { font-family: var(--font-ui); font-weight: 500; }
.mo-region {
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Sector heat map - color intensity scales with the selected period's move */
.mo-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    padding: 14px 16px;
}
.mo-heat-tile {
    border-radius: 5px;
    padding: 11px 12px;
    border: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 68px;
    justify-content: center;
}
.mo-heat-name {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.3px;
}
.mo-heat-value {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 700;
}
.mo-heat-value.pos { color: var(--green); }
.mo-heat-value.neg { color: var(--red); }
.mo-heat-sub {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-dim);
}
.mo-heat-sub .mo-heat-region {
    font-family: var(--font-ui);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 9.5px;
}

/* Big-mover alert strip */
.mo-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
}
.mo-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 12px;
    border: 1px solid;
}
.mo-alert.up {
    color: var(--green);
    background: rgba(46, 204, 113, 0.09);
    border-color: rgba(46, 204, 113, 0.35);
}
.mo-alert.down {
    color: var(--red);
    background: rgba(231, 76, 60, 0.09);
    border-color: rgba(231, 76, 60, 0.35);
}
.mo-alert b { font-family: var(--font-mono); }
.mo-alert-price {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text);
    opacity: 0.75;
}
.mo-alert-empty {
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 12px;
    padding: 4px 2px;
}

/* ===== News window (news.html) - ranked desk feed ===== */
.news-line1 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
/* Impact score chip - the 0-100 ranking from news_classifier.py */
.news-impact {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: center;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
}
.news-impact.impact-high { color: var(--red);   background: rgba(231, 76, 60, 0.12);  border-color: rgba(231, 76, 60, 0.4); }
.news-impact.impact-med  { color: var(--amber); background: rgba(245, 166, 35, 0.12); border-color: rgba(245, 166, 35, 0.4); }
.news-impact.impact-low  { color: var(--text-dim); background: rgba(138, 147, 157, 0.1); border-color: var(--panel-border); }

.news-cat {
    font-family: var(--font-ui);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--blue);
    background: rgba(74, 163, 255, 0.12);
    border-radius: 3px;
    padding: 2px 6px;
}
/* "+N more" = same story carried by other outlets, folded in */
.news-more {
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-dim);
    border: 1px dashed var(--panel-border);
    border-radius: 3px;
    padding: 1px 5px;
    cursor: help;
}
/* Live market move for a symbol the headline names */
.news-reaction {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 3px;
    padding: 1px 6px;
}
.news-reaction.pos { color: var(--green); background: rgba(46, 204, 113, 0.1); }
.news-reaction.neg { color: var(--red);   background: rgba(231, 76, 60, 0.1); }

/* A symbol you actually hold */
.tag.tag-held {
    color: var(--amber);
    background: rgba(245, 166, 35, 0.18);
    border: 1px solid rgba(245, 166, 35, 0.45);
}
.news-item.news-held {
    background: rgba(245, 166, 35, 0.05);
    border-left: 3px solid var(--amber);
}

.news-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.012);
}

/* Algo Lab metric cards */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--panel-border);
}
.metric-card {
    background: var(--panel-bg);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.metric-label {
    font-family: var(--font-ui);
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.metric-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

/* AI Insights - card-per-insight layout (Scanner window). Each card leads
   with a highlighted trade-reco banner, then bite-sized metric boxes, then
   the full text tucked into a <details> so the headline numbers are what
   you see first, not a wall of text. */
.insights-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}

.insight-card {
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-panel);
}

.insight-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.insight-symbol {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.3px;
    color: var(--text);
}

.insight-time {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-dim);
}

.trade-reco-banner {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.16), rgba(245, 166, 35, 0.03));
    border: 1px solid var(--amber);
    border-left: 4px solid var(--amber);
    border-radius: 6px;
    padding: 11px 14px;
    margin-bottom: 12px;
}
.trade-reco-banner.view {
    background: linear-gradient(135deg, rgba(74, 163, 255, 0.14), rgba(74, 163, 255, 0.03));
    border-color: var(--blue);
    border-left-color: var(--blue);
}

.trade-reco-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    color: var(--amber);
    text-transform: uppercase;
}
.trade-reco-banner.view .trade-reco-label { color: var(--blue); }

.trade-reco-strategy {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin: 3px 0 5px;
    letter-spacing: 0.2px;
}

.trade-reco-legs {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.trade-reco-meta {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 5px;
}

.metric-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.metric-box {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.metric-box .mb-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.metric-box .mb-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.metric-box.pos { border-color: rgba(46, 204, 113, 0.4); }
.metric-box.pos .mb-value { color: var(--green); }
.metric-box.neg { border-color: rgba(231, 76, 60, 0.4); }
.metric-box.neg .mb-value { color: var(--red); }

.edge-split-wrap { margin: 2px 0 14px; }
.edge-split-bar {
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
}
.edge-split-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #0a0f14;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.3s ease;
}
.edge-split-seg.target { background: var(--green); }
.edge-split-seg.sl { background: var(--red); }

.edge-bar-track {
    position: relative;
    width: 140px;
    height: 8px;
    background: #1c2530;
    border-radius: 4px;
}
.edge-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.edge-bar-fill.pos { background: var(--green); }
.edge-bar-fill.neg { background: var(--red); }
.edge-bar-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    background: var(--text-dim);
}
.edge-bar-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    margin-top: 3px;
    color: var(--text-dim);
    white-space: nowrap;
}

.greeks-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.greek-chip {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    background: #1c2530;
    color: var(--blue);
    border: 1px solid var(--panel-border);
}
.greek-chip.pos { color: var(--green); }
.greek-chip.neg { color: var(--red); }

.insight-details summary {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    padding: 6px 0 0;
    list-style: none;
}
.insight-details summary::-webkit-details-marker { display: none; }
.insight-details summary::before { content: "▸ "; color: var(--amber); }
.insight-details[open] summary::before { content: "▾ "; }
.insight-details p {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.65;
    white-space: pre-wrap;
    margin: 8px 0 0;
}

/* Daily Market Brief (insights.js) - rule-based, auto-refreshed cards (see
   market_brief_engine.py) for the top indices/stocks (full option-OI based
   brief) and commodities (lighter realized-vol based brief, no MCX option
   data available). A colored left border reads the trend at a glance
   before any numbers are read. */
.brief-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    padding: 14px;
}

.brief-card {
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-left: 4px solid var(--text-dim);
    border-radius: var(--radius);
    padding: 13px 15px;
    box-shadow: var(--shadow-panel);
}
.brief-card.trend-bullish { border-left-color: var(--green); }
.brief-card.trend-bearish { border-left-color: var(--red); }
.brief-card.trend-neutral { border-left-color: var(--blue); }
.brief-card.trend-elevated { border-left-color: var(--amber); }

.brief-card-header {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 3px;
}

.brief-symbol {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
}

.brief-spot {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
}

.brief-trend-badge {
    margin-left: auto;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    background: #1c2530;
    color: var(--text-dim);
    white-space: nowrap;
}
.trend-bullish .brief-trend-badge { color: var(--green); background: rgba(46, 204, 113, 0.14); }
.trend-bearish .brief-trend-badge { color: var(--red); background: rgba(231, 76, 60, 0.14); }
.trend-neutral .brief-trend-badge { color: var(--blue); background: rgba(74, 163, 255, 0.14); }
.trend-elevated .brief-trend-badge { color: var(--amber); background: rgba(245, 166, 35, 0.14); }
/* Distinct third state for IV Skew Sentiment's TRENDING (not a synonym for
   bullish) - a violet accent, kept visually apart from the green/red/blue/
   amber states already in use above. */
.trend-trending .brief-trend-badge { color: #b581e6; background: rgba(181, 129, 230, 0.14); }
.trend-expired .brief-trend-badge { color: var(--text-dim); background: rgba(138, 147, 157, 0.14); }
td.pos { color: var(--green); }
td.neg { color: var(--red); }

.brief-range {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    margin: 8px 0 10px;
}
.brief-range .brief-range-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
}

.brief-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.brief-level-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--panel-border);
    background: #1c2530;
    color: var(--text-dim);
}
.brief-level-chip.resistance { color: var(--red); border-color: rgba(231, 76, 60, 0.35); }
.brief-level-chip.support { color: var(--green); border-color: rgba(46, 204, 113, 0.35); }

.brief-stale {
    border-left-style: dashed;
}
.stale-badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(245, 166, 35, 0.14);
    color: var(--amber);
    border: 1px solid rgba(245, 166, 35, 0.35);
    margin-left: 6px;
}
.brief-updated {
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Pre-Market Movers (insights.js) - a compact ranked, clickable list;
   clicking a row scrolls to/highlights that symbol's full trade-idea card
   further down in the AI Insights journal (reuses the options_strategy
   card layout - see premarket_engine.build_trade_idea's docstring). */
.mover-list {
    display: flex;
    flex-direction: column;
}
.mover-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #161c22;
    cursor: pointer;
    transition: background 120ms ease;
}
.mover-row:hover { background: #151b21; }
.mover-row:last-child { border-bottom: none; }
.mover-rank {
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: 12px;
    width: 18px;
    text-align: right;
}
.mover-symbol {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
    min-width: 100px;
}
.mover-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
}
.mover-stats b { color: var(--text); }
.mover-pnl {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}
.mover-arrow {
    color: var(--amber);
    font-family: var(--font-ui);
    font-size: 13px;
}

@keyframes highlight-flash {
    0%   { box-shadow: 0 0 0 2px var(--amber); }
    100% { box-shadow: 0 0 0 2px transparent; }
}
.insight-card.highlight { animation: highlight-flash 1800ms ease-out; }

/* Extra trade-idea sections (renderOptionsStrategyCard, insights.js) -
   Bull/Bear Zones (OI-based), a simplified Smart Money Concepts read, and
   the "Confluence Zones" forward projection - shown on any card whose
   metadata carries this data (both the journal card and the Pre-Market
   Movers detail modal reuse the same renderer). */
.card-section-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--amber);
    margin: 12px 0 6px;
}

.smc-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}
.smc-row {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-dim);
    padding: 6px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
}
.smc-row b { color: var(--text); }
.smc-row.bullish { border-left: 3px solid var(--green); }
.smc-row.bearish { border-left: 3px solid var(--red); }

.confluence-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.confluence-row {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
}
.confluence-row.high-conviction {
    color: var(--amber);
    border-color: rgba(245, 166, 35, 0.4);
    background: rgba(245, 166, 35, 0.08);
}

/* Backtest win-rate badge bar (Pre-Market Movers panel, insights.js) - the
   honest, un-spun result of premarket_backtest.py, colored red/amber when
   the synthetic P&L is net-losing (not hidden just because it's a bad
   number - see that script's module docstring on why). */
.backtest-badge-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.15);
}
.backtest-chip {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--panel-border);
    background: #1c2530;
    color: var(--text-dim);
}
.backtest-chip.pos { color: var(--green); border-color: rgba(46, 204, 113, 0.35); background: rgba(46, 204, 113, 0.1); }
.backtest-chip.neg { color: var(--red); border-color: rgba(231, 76, 60, 0.35); background: rgba(231, 76, 60, 0.1); }
.backtest-note {
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--text-dim);
    cursor: help;
}

/* Paper Trading (papertrading.html/js) - order ticket inputs, buy/sell
   action buttons, and the live option-chain ladder. This is the first
   window in the dashboard with real form inputs/buttons (every other
   window is read-only), so these classes are new rather than reused. */
.order-ticket {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

.order-ticket-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-ticket-label {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 60px;
}

.order-selection {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    padding: 6px 10px;
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
}
.order-selection.empty { color: var(--text-dim); font-weight: 400; font-family: var(--font-ui); font-size: 12px; }

.order-input {
    background: var(--panel-bg-raised);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    width: 90px;
}
.order-input:focus { outline: none; border-color: var(--amber-dim); }

.btn-buy, .btn-sell {
    border: none;
    border-radius: 5px;
    padding: 9px 22px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-transform: uppercase;
}
.btn-buy { background: var(--green); color: #06210f; }
.btn-sell { background: var(--red); color: #2a0806; }
.btn-buy:hover, .btn-sell:hover { filter: brightness(1.12); }
.btn-buy:disabled, .btn-sell:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

.order-ticket-msg {
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-dim);
    min-height: 15px;
}
.order-ticket-msg.pos { color: var(--green); }
.order-ticket-msg.neg { color: var(--red); }

/* Live option chain ladder - classic broker-terminal shape: CE wing | STRIKE | PE wing. */
.chain-ladder td { text-align: right; cursor: default; }
.chain-ladder td.strike-col {
    text-align: center;
    font-weight: 700;
    color: var(--amber);
    background: rgba(245, 166, 35, 0.04);
}
.chain-ladder tr.atm-row td { background: rgba(245, 166, 35, 0.08); }
.chain-ladder tr.atm-row td.strike-col { color: var(--amber); text-shadow: 0 0 6px rgba(245, 166, 35, 0.4); }
/* Bid = click to SELL (red), Ask = click to BUY (green) - real
   broker-terminal convention, applies to both the CE and PE wing. A leg
   already added to the basket (matching strike+option_type+side) gets
   `.selected` so it's visually clear it's already queued. */
.chain-cell-bid, .chain-cell-ask {
    cursor: pointer;
    transition: background 100ms ease;
}
.chain-cell-bid:hover { background: rgba(231, 76, 60, 0.15); }
.chain-cell-ask:hover { background: rgba(46, 204, 113, 0.15); }
.chain-cell-bid.selected { background: rgba(231, 76, 60, 0.28); }
.chain-cell-ask.selected { background: rgba(46, 204, 113, 0.28); }

/* Basket leg list (papertrading.js) - one row per added leg: side tag
   (click to flip BUY/SELL), strike/type label, lots input, remove button. */
.basket-leg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #161c22;
}
.basket-leg-row:last-child { border-bottom: none; }
.basket-leg-side {
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.3px;
    cursor: pointer;
    min-width: 40px;
}
.basket-leg-side.buy { background: rgba(46, 204, 113, 0.18); color: var(--green); }
.basket-leg-side.sell { background: rgba(231, 76, 60, 0.18); color: var(--red); }
.basket-leg-label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    flex: 1;
}
.basket-leg-lots {
    background: var(--panel-bg-raised);
    color: var(--text);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 3px 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    width: 44px;
}
.basket-leg-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
}
.basket-leg-remove:hover { color: var(--red); }

/* ---- Admin login page (login.html) ---- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-box {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    padding: 32px;
    width: 320px;
}
.login-title {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1.1px;
    color: var(--amber);
    margin-bottom: 4px;
}
.login-sub {
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-dim);
    margin-bottom: 20px;
}
.login-box input {
    width: 100%;
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 9px 10px;
    margin-bottom: 10px;
}
.login-box input:focus { outline: none; border-color: var(--amber-dim); }
.login-box button {
    width: 100%;
    background: var(--amber);
    border: none;
    border-radius: 6px;
    color: var(--bg);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    padding: 10px;
    cursor: pointer;
}
.login-box button:disabled { opacity: 0.6; cursor: default; }
.login-error {
    color: var(--red);
    font-size: 12px;
    margin-top: 10px;
    min-height: 14px;
}

/* ---- Admin panel (admin.html) - RMS violations + rules ---- */
.rms-violation-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 12.5px;
}
.rms-violation-row.breach { background: rgba(231, 76, 60, 0.06); }
.rms-badge {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}
.rms-badge.breach { background: rgba(231, 76, 60, 0.18); color: var(--red); }
.rms-badge.warning { background: rgba(245, 166, 35, 0.18); color: var(--amber); }
.rms-account-tag {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 1px 6px;
}
.rms-account-tag.ok { color: var(--green); border-color: var(--green); }
.rms-account-tag.danger { color: var(--red); border-color: var(--red); }
.rms-violation-msg { flex: 1; color: var(--text); }
.rms-violation-time { color: var(--text-dim); font-size: 11px; white-space: nowrap; }

.rms-rule-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--panel-border);
}
.rms-rule-row:last-child { border-bottom: none; }
.rms-rule-label { width: 190px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text); }
.rms-rule-account-type {
    width: 60px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
}
.rms-rule-input {
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 6px 8px;
    width: 220px;
}
.rms-rule-input:focus { outline: none; border-color: var(--amber-dim); }
.rms-rule-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-dim);
}

/* ---- Admin panel - Clients / Notifications inline forms (admin.html) ---- */
.admin-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--panel-border);
}
.admin-inline-form input, .admin-inline-form select {
    background: var(--panel-bg-raised);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 6px 8px;
}
#create-client-status { font-size: 11px; color: var(--text-dim); }

.client-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 12.5px;
}
.client-row.selected { background: rgba(245, 166, 35, 0.08); }
.client-name { width: 150px; font-weight: 600; color: var(--text); }
.client-email { width: 180px; color: var(--text-dim); font-size: 11.5px; }
.client-status { width: 70px; font-family: var(--font-ui); font-weight: 700; font-size: 11px; }
.client-capital { width: 110px; color: var(--text-dim); }
select.client-field { width: 80px; }
input[type="date"].client-field { width: 130px; }

/* LLM analysis cards (insights.js renderLlmCard). Deliberately plain - these
   sit inside .insight-card, which already supplies the frame and spacing. */
.llm-card { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.45; }
.llm-card ul { margin: 2px 0 2px 16px; padding: 0; }
.llm-card li { margin: 1px 0; }
.llm-row {
    border-left: 2px solid var(--border);
    padding: 4px 0 4px 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.llm-row:hover { border-left-color: var(--amber); }

/* ===========================================================================
   TERMINAL SKIN
   ===========================================================================
   Appended last so it wins on specificity ties without editing the 1,700
   lines above - the component rules stay as they are, and this changes what
   they resolve to.

   What makes a trading terminal read as one, versus a dark web app:

     - BLACK, not charcoal. Contrast comes from the data, so the ground has
       to get out of the way.
     - NO ROUNDING AND NO SHADOWS. Rounded cards floating on shadows say
       "web app". Terminals are flat panes divided by hairlines.
     - DENSITY. Padding is the enemy; a screen should hold more rows, not
       more air. Line-height comes down, cell padding comes down.
     - AMBER IS STRUCTURE, NOT DECORATION. Headers, keys and labels are
       amber; values are white; only direction is green/red. That is the
       colour grammar - three meanings, not a palette.
     - TABULAR FIGURES EVERYWHERE. Digits must line up between rows or the
       eye cannot scan a column, which is the whole point of a table.
   =========================================================================== */

:root {
    --bg: #000000;
    --panel-bg: #08090b;
    --panel-bg-raised: #0d0f12;
    --panel-border: #1c2126;
    --grid-line: #14181c;

    --text: #e8edf2;
    --text-dim: #6f7d8a;
    --text-key: #ffa71a;          /* labels and keys */

    --amber: #ffa71a;
    --amber-dim: #a86d10;
    --amber-glow: rgba(255, 167, 26, 0.10);
    --green: #26d07c;
    --red: #ff4d4d;
    --blue: #4aa3ff;

    --header-bg: #000000;
    --shadow-panel: none;
    --shadow-float: 0 0 0 1px var(--panel-border), 0 18px 40px rgba(0,0,0,0.75);
    --radius: 0px;
}

/* Flat panes, hairline separated. The left amber rule is the terminal's
   section marker - it replaces the card shadow as the thing that says
   "this is a distinct block". */
.panel {
    border: 1px solid var(--panel-border);
    border-radius: 0;
    box-shadow: none;
    background: var(--panel-bg);
}

.panel-header {
    background: linear-gradient(180deg, #101317 0%, #0a0c0f 100%);
    border-bottom: 1px solid var(--panel-border);
    border-left: 2px solid var(--amber);
    color: var(--amber);
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-size: 11px;
    padding: 6px 10px;
}

/* Density. The stock rules leave a lot of air between rows; a terminal
   trades that air for another eight visible rows. */
body { font-size: 12px; line-height: 1.35; background: var(--bg); }
.panel-body { padding: 0; }
table { border-collapse: collapse; width: 100%; }
th, td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--grid-line);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
}
th {
    background: #0a0c0f;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 10px;
    font-weight: 600;
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    z-index: 2;
}
tbody tr:hover { background: var(--amber-glow); }

/* Every digit on the screen is tabular, so columns align down the page even
   outside <table> - the cards and metric boxes carry numbers too. */
.value, .mb-value, .metric-box, .insight-time, td, th,
.llm-card, .tag { font-variant-numeric: tabular-nums; }

/* The top strip: this is the closest thing to a terminal's status line, so
   it gets the strongest treatment on the page. */
.ticker-strip, .status-bar, .top-bar {
    background: #000;
    border-bottom: 1px solid var(--amber-dim);
}
.ticker-strip .label, .status-bar .label { color: var(--amber); }

/* Nav: function-key strip rather than web tabs. */
.window-launcher a, .window-launcher button, .nav-tab {
    border-radius: 0;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}
.window-launcher a:hover, .nav-tab:hover {
    background: var(--amber-glow);
    border-color: var(--amber-dim);
    color: var(--amber);
}
.window-launcher a.active, .nav-tab.active {
    background: var(--amber);
    color: #000;
    font-weight: 700;
    border-color: var(--amber);
}

/* Tags become terminal chips: square, outlined, uppercase. */
.tag {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border: 1px solid currentColor;
    background: transparent;
}
.trend-bullish { color: var(--green); }
.trend-bearish { color: var(--red); }
.trend-elevated { color: var(--amber); }
.trend-neutral { color: var(--text-dim); }

/* Direction colouring, the terminal's only other use of colour. */
.pos, .up, .change.up { color: var(--green); }
.neg, .down, .change.down { color: var(--red); }

/* Metric boxes: label above, big tabular number below, hairline separated
   rather than boxed - closer to a terminal's field grid. */
.metric-box {
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--panel-border);
    background: transparent;
    padding: 4px 12px;
}
.mb-label {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 9px;
}
.mb-value { font-family: var(--font-mono); font-size: 15px; color: var(--text); }

/* The AI cards. Keys amber, values white - so a wall of analysis still has
   a scannable skeleton. */
.llm-card { font-size: 12px; line-height: 1.4; padding: 8px 10px; }
.llm-card em { color: var(--amber); font-style: normal; font-weight: 600;
               text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.llm-card strong { color: var(--text); font-weight: 600; }
.llm-row {
    border-left: 2px solid var(--panel-border);
    padding: 4px 0 4px 8px;
    margin: 2px 0;
}
.llm-row:hover { border-left-color: var(--amber); background: var(--amber-glow); }

.insight-card {
    border: 1px solid var(--panel-border);
    border-radius: 0;
    background: var(--panel-bg-raised);
    margin-bottom: 6px;
}
.insight-card-header {
    border-bottom: 1px solid var(--grid-line);
    padding: 4px 8px;
    background: #0a0c0f;
}
.insight-time { color: var(--text-dim); font-size: 10px; font-family: var(--font-mono); }

/* Inputs and buttons: square, terminal-styled. */
input, select, textarea, button {
    border-radius: 0;
    background: #0a0c0f;
    border: 1px solid var(--panel-border);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 1px var(--amber-dim);
}
button:hover { border-color: var(--amber); color: var(--amber); }

/* Scrollbars, so panes look built-in rather than browser-default. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #1e242a; border: 1px solid #000; }
::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); }

/* A live pane should look live. Slow enough not to nag. */
@keyframes term-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.mo-live-dot, .status-dot { animation: term-pulse 2.4s ease-in-out infinite; }

/* Setup table: the levels are the content, so they get the tightest grid on
   the page and the alternating why-row is dimmed so it never competes with
   the numbers above it. */
.setup-table { width: 100%; font-family: var(--font-mono); font-size: 11px; }
.setup-table th { font-size: 9px; padding: 3px 6px; white-space: nowrap; }
.setup-table td { padding: 3px 6px; white-space: nowrap; border-bottom: none; }
.setup-table tr.setup-why td {
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 11px;
    white-space: normal;
    padding: 0 6px 6px 6px;
    border-bottom: 1px solid var(--grid-line);
}
.setup-table tbody tr:not(.setup-why):hover { background: var(--amber-glow); }

/* Global/Macro Watch is the manual-reading column: top right, spanning the
   rows beside "Affects My Positions" and the Newsroom. It was pushed below
   the fold on 2026-09-04 when the AI panel took the top slot; a feed you have
   to scroll to find is a feed you stop reading. */
.news-macro-col { display: flex; flex-direction: column; min-height: 0; }
.news-macro-col .panel-body,
.news-macro-col #macro-news-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* "AAJ MARKET ME KYA HUA" panel - levels block (2026-09-22) */
.wmm-p-zone { display:flex; justify-content:space-between; gap:10px; padding:2px 0; font-size:11.5px; }
.wmm-p-zone span:first-child { color: var(--text); font-weight:600; }
.wmm-p-zone-head { font-size:10px; letter-spacing:.08em; margin-top:6px; }

/* Per-leg breakdown inside a detail modal (2026-09-23). Used by the Quant Edge
 * window and by the Options Scanner's own modal, which referenced
 * .modal-legs-table without it ever being styled. A wide modal is deliberate:
 * nine columns of strike/bid/ask/spread do not fit the 640px default. */
.modal-panel.wide, #ivrv-detail-panel { max-width: 860px; }
.modal-legs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 4px;
    font-family: var(--font-mono);
    font-size: 11px;
}
.modal-legs-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--panel-border);
    white-space: nowrap;
}
.modal-legs-table td {
    padding: 7px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}
.modal-legs-table tbody tr:last-child td { border-bottom: 0; }
.modal-legs-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* A row that opens a detail modal - the affordance has to be visible, otherwise
 * nobody discovers the detail exists. */
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: rgba(255, 176, 32, 0.07); }

/* Quant Edge order ticket: the row the T / X shortcut will act on. ODIN arms
 * whatever the cursor is over, so the highlight has to be unmistakable. */
tr.row-armed { background: rgba(255, 176, 32, 0.12) !important; box-shadow: inset 2px 0 0 var(--amber); }
#qe-ticket-panel { max-width: 720px; }
#qe-ticket-panel input, #qe-ticket-panel select {
    background: var(--panel-bg); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 3px;
    padding: 5px 7px; font-family: var(--font-mono); font-size: 11px;
}

/* 3-Candle Reversal Detector - filter bar (2026-09-29) */
.scanner-toolbar.cp-filter-bar { justify-content: flex-start; gap: 8px 14px; }
.cp-filter { display: inline-flex; align-items: center; gap: 5px; }
.cp-filter-label { color: var(--text-dim); font-size: 11px; font-family: var(--font-ui); white-space: nowrap; }
.cp-filter .order-input.cp-num { width: 72px; }
.cp-filter-count { color: var(--text-dim); font-size: 11px; font-family: var(--font-ui); margin-left: auto; }
.cp-filter-bar.cp-filtering .cp-filter-count { color: var(--amber); }