:root {
  --bg-primary: #0b0f14;
  --bg-secondary: #101720;
  --surface: #131c27;
  --surface-hover: #182331;
  --border: #243244;
  --text-primary: #f3f6fa;
  --text-secondary: #9aa8ba;
  --text-muted: #6f7e90;
  --accent: #3b82f6;
  --positive: #16c784;
  --negative: #ea3943;
  --warning: #f59e0b;
  --info: #38bdf8;
  --radius: 6px;
  --page-width: 1500px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button, a, input { outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--info); }
a { color: inherit; text-decoration: none; }
.shell { width: min(100%, var(--page-width)); margin: 0 auto; padding: 0 24px 32px; }
.topbar { min-height: 64px; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--border); }
.brand { font-size: 18px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
.topnav { display: flex; align-self: stretch; gap: 4px; }
.topnav a { display: grid; place-items: center; padding: 0 12px; color: var(--text-secondary); border-bottom: 2px solid transparent; }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--text-primary); background: var(--surface); border-bottom-color: var(--accent); }
.market-view-nav { display: flex; gap: 4px; padding: 12px 0 0; }.market-view-nav a { color: var(--text-secondary); padding: 5px 9px; border-radius: 4px; font-size: 12px; font-weight: 700; }.market-view-nav a:hover, .market-view-nav a[aria-current="page"] { color: var(--text-primary); background: var(--surface); }
.topbar-status { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--text-secondary); white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; }
.status::before { content: "●"; font-size: 10px; }
.status.live, .status.fresh { color: var(--positive); }
.status.stale, .status.warning { color: var(--warning); }
.status.finalized, .status.info { color: var(--info); }
.status.not-instrumented, .status.unknown { color: var(--text-muted); }
.status.not-instrumented::before, .status.unknown::before { content: "?"; font-size: 13px; }
.status.unavailable { color: var(--text-muted); }
.status.unavailable::before { content: "×"; font-size: 15px; }
.status.stale::before { content: "▲"; }
.market-nav { display: flex; align-items: stretch; gap: 3px; min-height: 50px; border-bottom: 1px solid var(--border); }
.market-tab, .interval-button { cursor: pointer; border: 0; color: var(--text-secondary); background: transparent; }
.market-tab { position: relative; padding: 0 14px; font-weight: 700; letter-spacing: .01em; }
.market-tab:hover, .market-tab[aria-selected="true"] { background: var(--surface); color: var(--text-primary); }
.market-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--accent); }
.overview { padding-top: 26px; }
.market-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 10px 0 26px; }
.eyebrow, .section-label { color: var(--text-muted); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.symbol-title { margin: 5px 0 3px; font-size: 25px; letter-spacing: -.035em; }
.price { margin: 0; font-size: clamp(34px, 4vw, 52px); font-weight: 760; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.change { margin: 9px 0 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.change.positive { color: var(--positive); }.change.negative { color: var(--negative); }
.updated { color: var(--text-muted); margin: 7px 0 0; font-size: 12px; }
.watchlist { min-width: 300px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.watch-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; width: 100%; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; cursor: pointer; }
.watch-row:last-child { border-bottom: 0; }.watch-row strong { color: var(--text-primary); text-align: left; }.watch-row .status { font-size: 11px; }.watch-row:hover { background: var(--surface-hover); }.watch-row:focus-visible { position: relative; z-index: 1; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat { min-width: 0; padding: 14px 16px 16px 0; }.stat:not(:first-child) { padding-left: 16px; border-left: 1px solid var(--border); }
.stat dt { color: var(--text-muted); font-size: 11px; margin-bottom: 5px; }.stat dd { margin: 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.market-workspace { border-bottom: 1px solid var(--border); }
.chart-panel { display: flex; min-width: 0; flex-direction: column; padding: 22px 0 18px; }
.trades-panel { display: flex; min-height: 0; height: 330px; flex-direction: column; margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 13px; }.panel-heading h2, .section-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }.panel-heading small { color: var(--text-muted); }
.chart-meta { color: var(--text-secondary); font-size: 12px; margin: -5px 0 10px; }.chart-meta strong { color: var(--info); }
.chart { position: relative; width: 100%; height: clamp(420px, 45vw, 600px); min-height: 420px; flex: 0 0 auto; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }.chart.empty { display: grid; place-items: center; color: var(--text-muted); padding: 20px; text-align: center; }
.chart-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; margin: 2px 0 14px; }.control-group { display: grid; gap: 4px; min-width: 0; }.control-label { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.control-note { color: var(--text-muted); font-size: 11px; }.intervals, .range-controls { display: flex; flex-wrap: wrap; gap: 3px; }.interval-button, .range-button { cursor: pointer; border: 1px solid transparent; padding: 5px 10px; border-radius: 4px; font-size: 12px; color: var(--text-secondary); background: transparent; white-space: nowrap; }.interval-button:hover, .interval-button[aria-pressed="true"], .range-button:hover, .range-button[aria-pressed="true"] { color: var(--text-primary); background: var(--surface); border-color: var(--border); }.interval-button[aria-pressed="true"] { border-color: var(--accent); }.finalized-interval { color: var(--info); }.range-button[aria-pressed="true"] { border-color: var(--info); }
.candle-tooltip { position: absolute; z-index: 3; top: 12px; left: 12px; width: max-content; min-width: 182px; max-width: calc(100% - 24px); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(16, 23, 32, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); color: var(--text-primary); font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }.candle-tooltip[hidden] { display: none; }.candle-tooltip strong { display: block; margin-bottom: 7px; color: var(--text-secondary); font-size: 11px; }.candle-tooltip-values { display: grid; grid-template-columns: max-content max-content; gap: 3px 16px; margin: 0; }.candle-tooltip-values dt { color: var(--text-muted); }.candle-tooltip-values dt.tooltip-high { color: var(--positive); }.candle-tooltip-values dt.tooltip-low { color: var(--negative); }.candle-tooltip-values dd { margin: 0; text-align: right; }
.trade-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--border) transparent; }.trade-table, .candle-table, .asset-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }.trade-table th, .trade-table td, .candle-table th, .candle-table td, .asset-table th, .asset-table td { padding: 8px 4px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }.trade-table th:first-child, .trade-table td:first-child, .candle-table th:first-child, .candle-table td:first-child, .asset-table th:first-child, .asset-table td:first-child { text-align: left; }.trade-table th, .candle-table th, .asset-table th { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }.trade-table td, .asset-table td { color: var(--text-secondary); font-size: 12px; }.trade-table tbody tr:last-child td, .candle-table tbody tr:last-child td, .asset-table tbody tr:last-child td { border-bottom: 0; }.asset-table .status { justify-content: flex-end; }
.analytics { padding: 25px 0; border-bottom: 1px solid var(--border); }.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }.muted-block { opacity: .58; }.analytics-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }.metric { min-height: 98px; padding: 13px; border-right: 1px solid var(--border); }.metric:last-child { border-right: 0; }.metric-name { color: var(--text-secondary); font-size: 12px; }.metric-value { margin-top: 8px; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }.metric-help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; border: 1px solid var(--text-muted); border-radius: 50%; color: var(--text-muted); font-size: 9px; cursor: help; }
.freshness-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 0; }.freshness-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }.freshness-item > span:first-child { display: block; color: var(--text-secondary); margin-bottom: 7px; }.freshness-detail { display: block; color: var(--text-muted); font-size: 12px; margin-top: 6px; }
.source-details { margin-top: 14px; color: var(--text-secondary); font-size: 12px; }.source-details summary { cursor: pointer; color: var(--text-muted); }.source-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 8px 0 0; }.source-details dt { color: var(--text-muted); }.source-details dd { margin: 0; overflow-wrap: anywhere; }
.view { display: none; }.view.active { display: block; }.historical { padding-top: 26px; }.historical-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); }.field { display: grid; gap: 6px; color: var(--text-secondary); font-size: 12px; }.field input { min-height: 34px; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; }.action { min-height: 34px; cursor: pointer; border: 1px solid #2563eb; border-radius: 4px; background: var(--accent); color: white; padding: 0 13px; font-weight: 700; }.action:hover { background: #2563eb; }.historical-chart { margin-top: 18px; }.historical-timestamps { display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--text-secondary); font-size: 12px; margin: 13px 0; }.historical-timestamps strong { color: var(--info); }.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px; margin-top: 18px; }
.data-platform, .ops-page { padding-top: 32px; }.platform-hero { max-width: 700px; margin-bottom: 28px; }.platform-hero h1, .ops-page h1 { margin: 7px 0; font-size: 32px; letter-spacing: -.04em; }.platform-hero p, .ops-page > p { color: var(--text-secondary); margin: 0; }.platform-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; margin-top: 20px; }.platform-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--bg-secondary); }.asset-scroll { margin-top: 12px; max-height: 420px; overflow-y: auto; }.health-list { list-style: none; margin: 12px 0 0; padding: 0; }.health-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }.health-list li:last-child { border-bottom: 0; }.catalog-contract { display: grid; gap: 8px; margin-top: 12px; }.contract-item { display: flex; justify-content: space-between; padding: 10px 0; color: var(--text-secondary); border-bottom: 1px solid var(--border); }.contract-item span:last-child { color: var(--text-muted); font-size: 12px; }.notice { color: var(--text-muted); font-size: 12px; margin-top: 13px; }
.platform-header { margin-bottom: 22px; }.platform-title-row, .section-heading, .platform-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.platform-title-row h1 { margin-right: auto; }.platform-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); }.platform-nav a { padding: 9px 11px; color: var(--text-secondary); font-size: 13px; border-bottom: 2px solid transparent; }.platform-nav a[aria-current="page"] { color: var(--text-primary); border-color: var(--accent); }.platform-kpis, .optimization-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }.platform-kpi { min-height: 84px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); }.platform-kpi span, .platform-kpi small { display: block; color: var(--text-muted); font-size: 11px; }.platform-kpi strong { display: block; margin: 8px 0 3px; overflow-wrap: anywhere; font-size: 14px; font-variant-numeric: tabular-nums; }.service-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }.service-strip article { min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }.service-strip article > span { display: block; min-height: 28px; color: var(--text-secondary); font-size: 11px; }.platform-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }.platform-table th, .platform-table td { padding: 10px 8px; text-align: left; white-space: nowrap; color: var(--text-secondary); font-size: 12px; border-bottom: 1px solid var(--border); }.platform-table th { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }.platform-table tbody tr:last-child td { border-bottom: 0; }.platform-table a, .section-heading a { color: var(--info); }.platform-toolbar { justify-content: flex-start; margin-bottom: 14px; }.platform-toolbar label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 12px; }.run-filter { color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 7px 8px; }.lifecycle { display: grid; grid-template-columns: repeat(8, minmax(90px, 1fr)); gap: 6px; overflow-x: auto; margin: 0 0 18px; padding: 0; list-style: none; }.lifecycle li { min-width: 90px; padding: 9px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; font-size: 10px; font-weight: 700; text-align: center; }.lifecycle li.complete { color: var(--positive); border-color: var(--positive); }.run-details { display: grid; grid-template-columns: minmax(160px, .7fr) 2fr; gap: 9px 18px; margin: 0; font-size: 13px; }.run-details dt { color: var(--text-muted); }.run-details dd { margin: 0; overflow-wrap: anywhere; }.evidence-list { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }.evidence-list li { display: flex; gap: 10px; align-items: baseline; color: var(--text-secondary); }.run-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }.run-links a { padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; color: var(--info); }.asset-link { padding: 0; cursor: pointer; color: var(--info); border: 0; background: transparent; font: inherit; }.asset-detail { margin-top: 18px; }
.ops-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }.tool-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); padding: 16px; }.tool-card h2 { margin: 0 0 8px; font-size: 14px; }.tool-card p { min-height: 42px; color: var(--text-secondary); font-size: 12px; }.tool-card a { display: inline-flex; margin-top: 8px; color: var(--info); font-weight: 700; }.tool-card a:hover { text-decoration: underline; }
@media (max-width: 900px) { .shell { padding: 0 16px 24px; }.market-heading { display: block; }.watchlist { margin-top: 20px; max-width: 480px; }.stats { grid-template-columns: repeat(3, 1fr); }.stat:nth-child(4) { border-left: 0; }.chart { height: clamp(420px, 62vw, 540px); }.trades-panel { height: 340px; }.analytics-grid { grid-template-columns: repeat(3, 1fr); }.metric:nth-child(3n) { border-right: 0; }.metric { border-bottom: 1px solid var(--border); }.platform-grid { grid-template-columns: 1fr; }.platform-kpis, .optimization-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.service-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }.ops-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .shell { padding-inline: 12px; }.topbar { gap: 8px; }.topnav a { padding: 0 8px; font-size: 12px; }.topbar-status { display: none; }.market-nav { overflow-x: auto; }.market-tab { padding: 0 11px; white-space: nowrap; }.watch-row { gap: 8px; padding-inline: 8px; }.stats { grid-template-columns: repeat(2, 1fr); }.stat { border-bottom: 1px solid var(--border); }.stat:nth-child(odd) { border-left: 0; padding-left: 0; }.chart { height: 420px; }.chart-controls { gap: 10px; align-items: stretch; }.intervals, .range-controls { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-color: var(--border) transparent; }.trades-panel { height: 300px; }.freshness-strip { grid-template-columns: 1fr; gap: 8px; }.analytics-grid { grid-template-columns: repeat(2, 1fr); }.metric:nth-child(3n) { border-right: 1px solid var(--border); }.metric:nth-child(even) { border-right: 0; }.historical-controls { align-items: stretch; }.field { flex: 1 1 135px; }.platform-kpis, .optimization-summary, .service-strip { grid-template-columns: 1fr; }.platform-nav { flex-wrap: nowrap; overflow-x: auto; }.run-details { grid-template-columns: 1fr; }.ops-grid { grid-template-columns: 1fr; } }
.evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }.evidence-card, .evidence-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); padding: 16px; }.evidence-card span, .evidence-section small { display: block; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }.evidence-card strong { display: block; margin-top: 9px; font-size: 16px; overflow-wrap: anywhere; }.evidence-section { margin-top: 16px; }.promotion-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.promotion-flow article { border-left: 3px solid var(--accent); padding: 12px; background: var(--surface); }.promotion-flow strong { display: block; margin-bottom: 8px; text-transform: capitalize; }.evidence-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }.evidence-table th, .evidence-table td { padding: 10px 8px; text-align: left; color: var(--text-secondary); border-bottom: 1px solid var(--border); vertical-align: top; }.evidence-table th { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }.evidence-table code { font-size: 11px; overflow-wrap: anywhere; }.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.evidence-list { display: grid; gap: 9px; }.evidence-list article { padding: 12px; background: var(--surface); border-left: 3px solid var(--border); }.evidence-list article strong { display: block; text-transform: capitalize; }.evidence-list article p { margin: 6px 0; color: var(--text-secondary); }.evidence-list article small { text-transform: none; letter-spacing: 0; } @media (max-width: 900px) { .evidence-grid, .promotion-flow, .two-column { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .evidence-grid, .promotion-flow, .two-column { grid-template-columns: 1fr; } }