:root {
  --bg-0: #050400;
  --bg-1: #0a0804;
  --panel: #0d0b06;
  --panel-raised: #121007;
  --row-hover: #191309;
  --row-selected: #2b1600;
  --row-cursor: #281b07;
  --line-subtle: #211a10;
  --line: #342817;
  --line-strong: #5a3c16;
  --amber-primary: #ffb000;
  --orange-action: #ff7a00;
  --amber-secondary: #d99700;
  --link-context: #32c7d9;
  --focus-ring: #f5e8d0;
  --fg-primary: #e8dfcf;
  --fg-secondary: #b9aa94;
  --fg-muted: #8f806c;
  --fg-dim: #655b4d;
  --positive: #20d47b;
  --negative: #ff4d5f;
  --stale: #e0a02b;
  --alert: #ff3b74;
  --info: #67a7ff;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --function-h: 24px;
  --ticker-h: 22px;
  --command-h: 30px;
  --status-h: 20px;
  --panel-header-h: 22px;
  --table-header-h: 18px;
  --row-h: 19px;
  color-scheme: dark;
  font-family: Consolas, "Courier New", monospace;
  background: var(--bg-0);
  color: var(--fg-primary);
}

* { box-sizing: border-box; }
html, body, #v2-full-app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg-0); }
button, input { font: inherit; }
button { color: inherit; }

.terminal-shell {
  height: 100dvh;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--function-h) var(--ticker-h) var(--command-h) minmax(0, 1fr) var(--status-h);
  background: var(--bg-0);
  color: var(--fg-primary);
  font-size: 11px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}

.function-strip,
.ticker-strip,
.command-line,
.status-bar {
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  display: flex;
  align-items: center;
}

.function-strip { gap: 2px; padding-right: 5px; }
.brand-mark { width: 24px; height: 100%; display: grid; place-items: center; background: var(--amber-primary); color: var(--bg-0); font-weight: 700; }
.brand-name { padding: 0 7px 0 3px; color: var(--amber-primary); font-weight: 600; letter-spacing: .08em; }
.function-key { height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--fg-secondary); cursor: pointer; }
.function-key:hover, .function-key:focus-visible, .function-key.is-active { border-color: var(--amber-primary); color: var(--amber-primary); outline: none; }
.function-key kbd { color: var(--orange-action); font: inherit; }
.function-caption { color: var(--fg-muted); margin-left: 4px; }
.session-clock { margin-left: auto; color: var(--fg-secondary); }

.ticker-strip { gap: 12px; padding: 0 5px; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
.ticker-item { color: var(--fg-secondary); }
.ticker-item b { color: var(--amber-primary); font-weight: 600; }
.ticker-item i { font-style: normal; }
.ticker-loading { color: var(--fg-muted); letter-spacing: .04em; }

.command-line { position: relative; padding: 0 5px; gap: 6px; border-bottom-color: var(--line-strong); }
.command-line label { color: var(--orange-action); white-space: nowrap; font-size: 12px; }
.command-line label span { color: var(--amber-primary); font-weight: 600; }
.command-line input { flex: 1; min-width: 100px; height: 22px; padding: 0 4px; border: 0; border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); outline: none; background: var(--panel); color: var(--fg-primary); text-transform: uppercase; }
.command-line input:focus { box-shadow: inset 0 -1px var(--focus-ring); }
#command-message { color: var(--fg-muted); white-space: nowrap; }
.command-suggestions { position: fixed; z-index: 50; top: calc(var(--function-h) + var(--ticker-h) + var(--command-h)); left: 70px; width: min(520px, calc(100vw - 80px)); border: 1px solid var(--line-strong); background: var(--panel-raised); }
.command-suggestions [role="option"] { display: grid; grid-template-columns: 90px 1fr; min-height: 22px; padding: 3px 6px; color: var(--fg-secondary); }
.command-suggestions [role="option"] span { color: var(--amber-secondary); }
.command-suggestions [role="option"].is-active { background: var(--row-selected); border-left: 3px solid var(--orange-action); color: var(--fg-primary); }

.workspace-grid {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 248px minmax(482px, 1fr) 318px;
  grid-template-rows: minmax(300px, 336px) minmax(180px, 1fr);
  grid-template-areas: "monitor chart news" "rates detail news-detail";
  gap: 2px;
  background: var(--line-subtle);
}

.panel { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: var(--panel-header-h) minmax(0, 1fr); border: 1px solid var(--line); background: var(--panel); }
.panel-monitor { grid-area: monitor; grid-template-rows: var(--panel-header-h) var(--table-header-h) minmax(0, 1fr); }
.panel-chart { grid-area: chart; }
.panel-chart.is-expanded { position: fixed; z-index: 60; inset: 0; width: 100vw; height: 100dvh; grid-template-rows: var(--panel-header-h) minmax(0, 1fr); border-color: var(--amber-primary); }
.panel-rates { grid-area: rates; }
.panel-detail { grid-area: detail; }
.panel-news { grid-area: news; }
.panel-news-detail { grid-area: news-detail; }
.panel.is-focused { border-color: var(--focus-ring); }
.panel-header { min-width: 0; height: var(--panel-header-h); display: flex; align-items: center; gap: 5px; padding: 0 5px; border-bottom: 1px solid var(--line); background: var(--panel-raised); outline: none; }
.panel-header:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-ring); }
.panel-code { color: var(--bg-0); background: var(--amber-primary); padding: 0 3px; font-weight: 700; }
.panel-header h2 { margin: 0; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: .05em; color: var(--amber-primary); }
.panel-link { color: var(--link-context); border: 1px solid var(--link-context); line-height: 12px; padding: 0 3px; }
.panel-source { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: 9px; }
.panel-state { font-size: 9px; padding-left: 4px; border-left: 2px solid var(--fg-dim); color: var(--fg-muted); }
.state-ready { border-color: var(--positive); color: var(--positive); }
.state-loading { border-color: var(--amber-secondary); color: var(--amber-secondary); }
.state-stale, .state-degraded { border-color: var(--stale); color: var(--stale); }
.state-unavailable, .state-error { border-color: var(--negative); color: var(--negative); }

.monitor-head, .monitor-row { display: grid; grid-template-columns: minmax(48px, 1fr) 68px 54px 36px 30px; align-items: center; min-width: 0; }
.monitor-head { position: sticky; top: 0; z-index: 2; height: var(--table-header-h); padding: 0 5px; border-bottom: 1px solid var(--line); color: var(--fg-muted); background: var(--bg-1); font-size: 9px; }
.monitor-head span:not(:first-child), .monitor-row span:not(:first-child) { text-align: right; }
.panel-body { min-width: 0; min-height: 0; overflow: auto; scrollbar-color: var(--line-strong) var(--bg-1); scrollbar-width: thin; }
.monitor-row { height: var(--row-h); padding: 0 5px; border-bottom: 1px solid var(--line-subtle); color: var(--fg-secondary); outline: none; }
.monitor-row:hover { background: var(--row-hover); }
.monitor-row.is-cursor { background: var(--row-cursor); box-shadow: inset 3px 0 var(--amber-primary); color: var(--fg-primary); }
.monitor-row.is-selected { background: var(--row-selected); }
.monitor-row.is-selected .symbol::after { content: " SEL"; color: var(--orange-action); font-size: 8px; }
.monitor-row:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-ring), inset 3px 0 var(--amber-primary); }
.symbol { color: var(--amber-secondary); font-weight: 600; }
.numeric { text-align: right; }
.positive { color: var(--positive) !important; }
.negative { color: var(--negative) !important; }
.source-code { color: var(--fg-muted); font-size: 9px; }
.freshness-stale, .freshness-delayed { color: var(--stale); }
.freshness-current { color: var(--positive); }
.freshness-indicative { color: var(--fg-secondary); }
.skeleton-row span { height: 6px; margin: 0 3px; background: var(--line-subtle); }
.skeleton-row span:first-child { color: var(--fg-dim); background: none; height: auto; }
.inline-state { height: 100%; min-height: 90px; display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--fg-muted); }
.inline-state strong { color: var(--negative); font-size: 14px; }
.inline-state button { min-height: 22px; border: 1px solid var(--orange-action); border-radius: 2px; background: transparent; color: var(--orange-action); cursor: pointer; }

.chart-body { position: relative; overflow: hidden; display: grid; grid-template-rows: 24px minmax(0, 1fr) 18px; }
.chart-toolbar, .chart-scale { display: flex; align-items: center; gap: 12px; padding: 0 6px; color: var(--fg-secondary); border-bottom: 1px solid var(--line-subtle); }
.chart-toolbar b { color: var(--amber-primary); font-size: 12px; }
.chart-toolbar span:nth-child(3) { margin-left: auto; color: var(--fg-primary); font-size: 12px; }
.chart-toolbar button { height: 20px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 2px; background: transparent; color: var(--orange-action); cursor: pointer; }
.chart-toolbar button:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 1px; }
.chart-scale { justify-content: space-between; border-top: 1px solid var(--line-subtle); border-bottom: 0; color: var(--fg-muted); font-size: 9px; }
.price-chart { width: 100%; height: 100%; min-height: 0; background: var(--panel); }
.chart-grid line { stroke: var(--line-subtle); stroke-width: 1; }
.chart-axis-labels { fill: var(--fg-muted); font-size: 9px; }
.price-line { fill: none; stroke: var(--amber-primary); stroke-width: 1.5; }
.last-line { stroke: var(--orange-action); stroke-width: .7; stroke-dasharray: 3 3; }
.chart-crosshair line { stroke: var(--link-context); stroke-width: .8; stroke-dasharray: 2 2; }
.chart-crosshair[hidden] { display: none; }
.chart-crosshair circle { fill: var(--panel); stroke: var(--link-context); stroke-width: 1.5; }
.chart-crosshair rect { fill: var(--bg-1); stroke: var(--line-strong); }
.chart-crosshair text { fill: var(--fg-primary); font-size: 10px; }
.price-chart:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: -1px; }
.chart-crosshair-readout { margin-left: auto; color: var(--link-context); }
.chart-loading { height: 100%; display: grid; align-content: center; gap: 12px; padding: 24px; }
.chart-loading span { height: 1px; background: var(--line-strong); }

.detail-body { padding: 6px; overflow: auto; }
.security-title { display: flex; align-items: baseline; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.security-title b { color: var(--amber-primary); font-size: 16px; }
.security-title span { color: var(--fg-secondary); }
.detail-grid { margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.detail-grid div { min-width: 0; padding: 5px; border-left: 2px solid var(--line-strong); background: var(--bg-1); }
.detail-grid dt { color: var(--fg-muted); font-size: 9px; }
.detail-grid dd { margin: 2px 0 0; color: var(--fg-primary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.detail-grid.is-loading span { height: 42px; background: var(--line-subtle); }

.rates-body { display: grid; grid-template-columns: 1fr 1fr; align-content: start; overflow: auto; }
.rate-section { min-width: 0; overflow: hidden; border-right: 1px solid var(--line); }
.rate-section h3 { min-height: 18px; margin: 0; padding: 2px 5px; overflow: hidden; border-bottom: 1px solid var(--line); color: var(--amber-secondary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.rate-section h3 small { color: var(--fg-muted); font-size: 8px; font-weight: 400; }
.rate-provenance { min-height: 18px; margin: 0; padding: 2px 5px; overflow: hidden; border-bottom: 1px solid var(--line); color: var(--fg-dim); font-size: 8px; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rate-section div, .rate-spread { min-height: 20px; padding: 2px 5px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-subtle); }
.rate-section span, .rate-spread span { color: var(--fg-muted); }
.rate-section b, .rate-spread b { color: var(--fg-primary); font-weight: 500; }
.rate-spread { grid-column: 1 / -1; border-left: 2px solid var(--orange-action); }
.rate-list.is-loading { grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px; }
.rate-list.is-loading span { height: 12px; background: var(--line-subtle); }

.news-body { overflow: auto; }
.news-row { min-height: 42px; display: grid; grid-template-columns: 34px 48px minmax(0,1fr); grid-template-rows: 16px auto; padding: 3px 5px; border-bottom: 1px solid var(--line-subtle); outline: none; }
.news-row time { color: var(--fg-muted); font-size: 9px; }
.news-row > span { color: var(--amber-secondary); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-row h3 { grid-column: 1 / -1; margin: 0; color: var(--fg-secondary); font-size: 10px; line-height: 13px; font-weight: 500; }
.news-row.is-cursor { background: var(--row-cursor); box-shadow: inset 3px 0 var(--amber-primary); }
.news-row.is-selected { background: var(--row-selected); }
.news-row:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-ring), inset 3px 0 var(--amber-primary); }
.news-loading { display: grid; gap: 8px; padding: 10px; }
.news-loading span { height: 28px; background: var(--line-subtle); }
.news-detail-body { padding: 7px; overflow: auto; }
.news-detail { border-left: 2px solid var(--orange-action); padding-left: 7px; }
.news-detail h3 { margin: 5px 0; color: var(--amber-primary); font-size: 12px; line-height: 15px; }
.news-detail p { margin: 5px 0; color: var(--fg-secondary); }
.news-detail .news-meta, .news-detail .quality { color: var(--fg-muted); font-size: 9px; }
.news-detail a { color: var(--orange-action); text-decoration: none; }

.status-bar { gap: 10px; padding: 0 5px; border-top: 1px solid var(--line-strong); border-bottom: 0; color: var(--fg-muted); font-size: 9px; }
.status-bar b { color: var(--focus-ring); font-weight: 500; }
.status-bar .linked { color: var(--link-context); }
.status-spacer { flex: 1; }
.mobile-dock { display: none; }
.mobile-more { display: none; }
.tablet-tabs { display: none; }

.density-standard { --function-h: 28px; --ticker-h: 24px; --command-h: 32px; --status-h: 22px; --panel-header-h: 24px; --table-header-h: 20px; --row-h: 22px; }

@media (min-width: 1600px) {
  .terminal-shell { --function-h: 28px; --ticker-h: 44px; --command-h: 32px; --status-h: 22px; }
  .workspace-grid { grid-template-columns: 320px minmax(760px, 1fr) 430px; grid-template-rows: minmax(520px, 1fr) 260px; }
  .ticker-strip { flex-wrap: wrap; align-content: center; row-gap: 2px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .workspace-grid { grid-template-columns: 230px minmax(360px, 1fr) 260px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "monitor chart news"; }
  .panel-monitor { grid-area: monitor; }
  .panel-chart { grid-area: chart; }
  .panel-news { grid-area: news; }
  .panel-news, .panel-rates, .panel-detail, .panel-news-detail { display: none; grid-area: news; }
  .terminal-shell[data-tablet-panel="NEWS"] .panel-news,
  .terminal-shell[data-tablet-panel="RATE"] .panel-rates,
  .terminal-shell[data-tablet-panel="DETAIL"] .panel-detail,
  .terminal-shell[data-tablet-panel="NEWS_DETAIL"] .panel-news-detail { display: grid; }
  .tablet-tabs { display: inline-flex; gap: 2px; }
  .tablet-tabs button { height: 18px; padding: 0 4px; border: 0; background: transparent; color: var(--fg-muted); font-size: 8px; }
  .tablet-tabs button.is-active { color: var(--amber-primary); box-shadow: inset 0 -1px var(--amber-primary); }
  .tablet-tabs button[aria-pressed="true"] { color: var(--amber-primary); }
  .function-caption, #command-message { display: none; }
}

@media (max-width: 760px) {
  :root { --function-h: 28px; --ticker-h: 24px; --command-h: 34px; --status-h: 22px; }
  .terminal-shell { padding-bottom: 52px; }
  .brand-name { display: none; }
  .function-caption { font-size: 9px; }
  .session-clock { font-size: 9px; }
  .ticker-strip { gap: 14px; }
  #command-message { display: none; }
  .command-line label { font-size: 10px; }
  .workspace-grid { display: block; min-height: 0; background: var(--bg-0); }
  .panel { display: none; width: 100%; height: 100%; border-left: 0; border-right: 0; }
  .terminal-shell[data-mobile-panel="MON"] .panel-monitor,
  .terminal-shell[data-mobile-panel="CHT"] .panel-chart,
  .terminal-shell[data-mobile-panel="NEWS"] .panel-news,
  .terminal-shell[data-mobile-panel="RATE"] .panel-rates,
  .terminal-shell[data-mobile-panel="DETAIL"] .panel-detail,
  .terminal-shell[data-mobile-panel="NEWS_DETAIL"] .panel-news-detail { display: grid; }
  .chart-body { grid-template-rows: 28px minmax(0, 1fr) 20px; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .monitor-head, .monitor-row { grid-template-columns: minmax(54px, 1fr) 78px 62px 42px 32px; }
  .monitor-row { min-height: 44px; height: 44px; }
  .status-bar { gap: 6px; }
  .status-bar span:nth-child(3) { display: none; }
  .mobile-dock { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 52px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-strong); background: var(--bg-1); }
  .mobile-dock button { min-width: 0; min-height: 44px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--fg-muted); }
  .mobile-dock button.is-active { color: var(--amber-primary); box-shadow: inset 0 3px var(--amber-primary); }
  .mobile-dock button[aria-current="page"] { color: var(--amber-primary); }
  .mobile-dock button:disabled { color: var(--fg-dim); }
  .mobile-more { position: fixed; z-index: 45; right: 0; bottom: 52px; width: 190px; display: grid; border: 1px solid var(--line-strong); background: var(--panel-raised); }
  .mobile-more[hidden] { display: none; }
  .mobile-more button { min-height: 44px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--amber-primary); text-align: left; padding: 0 10px; }
}