:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-soft: #eef4fb;
  --text: #142033;
  --muted: #4f5f73;
  --line: #c8d3df;
  --accent: #0f766e;
  --accent-soft: #dff7f1;
  --warn: #8a5a00;
  --warn-soft: #fff3cc;
  --ok: #1d6f3d;
  --bad: #9d1e2a;
  --blue: #1d4ed8;
  --blue-soft: #eaf0ff;
  --purple: #6d28d9;
  --purple-soft: #efe7ff;
  --shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.06);
}

/* BotTrade terminal shell ------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg-app: #0B0F14; --bg-sidebar: #0E141B; --bg-card: #111822; --bg-surface: #17212B; --bg-hover: #1B2836; --border: #253140;
  --text-primary: #F4F7FA; --text-secondary: #A7B4C2; --text-muted: #7D8B99;
  --accent-primary: #6366F1; --accent-blue: #3B82F6; --status-success: #10B981; --status-warning: #F59E0B; --status-danger: #EF4444; --status-info: #38BDF8;
  --bg: var(--bg-app); --panel: var(--bg-card); --panel-soft: var(--bg-surface); --text: var(--text-primary); --muted: var(--text-secondary); --line: var(--border); --accent: var(--accent-primary); --accent-soft: rgba(99,102,241,.15); --ok: var(--status-success); --bad: var(--status-danger); --warn: var(--status-warning);
  --shadow: 0 10px 30px rgba(0, 0, 0, .22);
  --sidebar: 224px;
}

body { background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
button, select { font: inherit; }
.terminal-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar); display: flex; flex-direction: column; padding: 18px 12px 14px; background: var(--bg-sidebar); border-right: 1px solid var(--line); transition: width .16s ease; }
.sidebar-toggle { position:absolute; top:22px; right:-12px; display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--border); border-radius:50%; background:var(--bg-surface); color:var(--text-secondary); cursor:pointer; }
.terminal-mark { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; color: var(--text); text-decoration: none; }
.terminal-mark span { display: grid; place-items: center; width: 35px; aspect-ratio: 1; border-radius: 9px; background: var(--accent); color: #06120f; font-size: 12px; font-weight: 900; letter-spacing: -.04em; }
.terminal-mark::after { content: "BOTTRADE\A AUTOPILOT"; white-space: pre; font-size: 12px; font-weight: 850; line-height: 1.05; letter-spacing: .04em; }
.sidebar-search { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 36px; padding: 0 10px; color: var(--muted); background: #0d141f; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.sidebar-search kbd { padding: 1px 6px; border: 1px solid #2b3746; border-radius: 4px; color: #68768a; font-size: 11px; }
.sidebar-nav { margin-top: 14px; overflow-y: auto; }
.sidebar-nav p { padding: 13px 10px 5px; color: #536075; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-nav a { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; min-height: 38px; margin: 2px 0; padding: 0 10px; border-radius: 6px; color: #8c98aa; text-decoration: none; transition: .15s ease; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: var(--accent-soft); color: var(--text); }
.sidebar-nav a.active { box-shadow: inset 2px 0 var(--accent); }
.sidebar-nav a.active > span { color: var(--accent); }
.sidebar-nav b { font-size: 12px; font-weight: 600; }
.sidebar-nav em { min-width: 18px; padding: 1px 5px; border-radius: 8px; background: #202b39; color: #b5c0cf; font-size: 9px; font-style: normal; text-align: center; }
.sidebar-footer { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 12px 9px 0; border-top: 1px solid var(--line); }
.sidebar-footer div { display: grid; }.sidebar-footer b { font-size: 10px; }.sidebar-footer small { color: var(--muted); font-size: 9px; }
.live-dot, .health-ok i, .streaming i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(57,214,164,.1); }
.app-header { left: var(--sidebar); padding: 14px 24px; background: rgba(9, 14, 22, .94); border-color: var(--line); }
.brand-block { gap: 0; }.brand-block h1 { font-size: 20px; letter-spacing: -.02em; }.header-subtitle { color: var(--muted); font-size: 11px; font-weight: 500; }
.eyebrow { color: #69778b; font-size: 9px; letter-spacing: .12em; }
.header-badges .mode-strip { display: none; }.source-badge { border-color: rgba(57,214,164,.2); background: var(--accent-soft); color: var(--accent); }
.refresh-control { display: flex; align-items: center; gap: 7px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }.refresh-control select { padding: 6px 24px 6px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
.icon-button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: #a7b2c1; cursor: pointer; }.notification-button span { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--bad); color: white; font-size: 8px; }
main { margin-left: var(--sidebar); gap: 14px; padding: 18px 22px 40px; }
.app-tabs { position: static; padding: 0; background: transparent; }.app-tab, .install-app { min-height: 32px; padding: 7px 11px; border-color: var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 10px; }.app-tab.active { border-color: rgba(57,214,164,.35); background: var(--accent-soft); color: var(--accent); }
.status-bar { padding: 8px 10px; border-radius: 7px; background: var(--panel); }.status-chip { min-height: 26px; padding: 4px 8px; border-radius: 5px; font-size: 9px; }.status-purple, .status-blue { background: rgba(107, 122, 255, .11); color: #94a0ff; }.status-green { background: var(--accent-soft); color: var(--ok); }.status-last-update { font-size: 10px; }
main > .notice-banner { display: none; }
.section-band { padding: 16px; border-color: var(--line); border-radius: 8px; background: var(--panel); box-shadow: none; }.section-heading { margin-bottom: 12px; }.section-heading h2 { font-size: 15px; }
#overview { padding: 0; border: 0; background: transparent; }#overview > .section-heading { margin: 2px 0 10px; }
.metrics-grid { grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 8px; }
.metric { position: relative; min-height: 100px; padding: 13px; border: 1px solid var(--line) !important; border-radius: 7px; background: var(--panel) !important; overflow: hidden; }.metric::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 46px; height: 18px; border-bottom: 1.5px solid #526276; transform: skewY(-12deg); opacity: .6; }.metric-safe::after { border-color: var(--ok); }.metric-danger::after { border-color: var(--bad); }
.metric .metric-label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }.metric .metric-value { margin-top: 8px; color: var(--text); font-size: 19px; font-weight: 700; line-height: 1.1; }
.terminal-overview-grid { display: grid; grid-template-columns: 1.45fr 1fr .7fr; gap: 8px; margin-top: 8px; }.terminal-panel { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }.terminal-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.terminal-panel h3 { font-size: 13px; }
.equity-panel { grid-column: span 2; }.range-tabs { display: flex; gap: 3px; }.range-tabs button, .text-button { padding: 4px 7px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }.range-tabs button.active { background: var(--accent-soft); color: var(--accent); }.chart-summary { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }.chart-summary strong { font-size: 23px; }.positive { color: var(--ok); font-size: 10px; }.equity-chart { height: 180px; margin-top: 4px; }.equity-chart svg { width: 100%; height: 155px; overflow: visible; }.equity-chart .gridline { fill: none; stroke: #1a2431; stroke-width: 1; }.equity-chart .fill { fill: url(#equityFill); }.equity-chart .line { fill: none; stroke: var(--ok); stroke-width: 2; vector-effect: non-scaling-stroke; }.chart-axis { display: flex; justify-content: space-between; color: #59677a; font-size: 8px; }
.health-ok, .streaming { display: flex; align-items: center; gap: 7px; color: var(--ok); font-size: 8px; }.service-list { margin-top: 10px; }.service-list > div { display: grid; grid-template-columns: 1fr 46px 58px; align-items: center; min-height: 48px; border-bottom: 1px solid #18222f; }.service-list span { display: grid; grid-template-columns: 28px 1fr; }.service-list .service-icon { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #142131; color: #7f93aa; font-size: 7px; font-style: normal; }.service-list b { font-size: 10px; }.service-list small { color: var(--muted); font-size: 8px; }.service-list em { color: var(--muted); font-size: 8px; font-style: normal; }.service-list strong { color: var(--ok); font-size: 8px; text-align: right; }.resource-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }.resource-grid div { display: grid; gap: 5px; }.resource-grid span { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }.resource-grid span b { color: var(--text); }.resource-grid > div > i { height: 3px; border-radius: 2px; background: #1a2532; overflow: hidden; }.resource-grid i em { display: block; height: 100%; background: #6688b0; }
.allocation-content { display: grid; justify-items: center; gap: 16px; padding-top: 14px; }.donut { display: grid; place-items: center; width: 116px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#f6b94a 0 29.2%, #6b7cff 29.2% 44%, #273241 44% 100%); }.donut::before { content:""; grid-area:1/1; width: 76px; aspect-ratio:1; border-radius:50%; background:var(--panel); }.donut div { z-index:1; grid-area:1/1; display:grid; text-align:center; }.donut strong { font-size:17px; }.donut span { color:var(--muted); font-size:8px; }.allocation-content ul { width:100%; padding:0; margin:0; list-style:none; }.allocation-content li { display:grid; grid-template-columns:10px 1fr auto; gap:6px; padding:5px 0; color:var(--muted); font-size:9px; }.allocation-content li i { width:6px; height:6px; margin-top:3px; border-radius:50%; background:#273241; }.allocation-content li i.btc { background:#f6b94a; }.allocation-content li i.eth { background:#6b7cff; }.allocation-content li b { color:var(--text); }
.timeline-panel { grid-column: span 2; }.timeline-panel ol { padding: 0; margin: 10px 0 0; list-style: none; }.timeline-panel li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; min-height: 51px; border-top: 1px solid #18222f; }.timeline-panel li > i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-style:normal; font-size:9px; }.timeline-panel .buy,.timeline-panel .safe { background:var(--accent-soft); color:var(--ok); }.timeline-panel .info { background:rgba(107,124,255,.12); color:#8b9aff; }.timeline-panel li div { display:grid; }.timeline-panel li b { font-size:10px; }.timeline-panel li span,.timeline-panel time { color:var(--muted); font-size:8px; }
table { font-size: 11px; } th { color: var(--muted); background: #0a1018; } td, th { border-color: var(--line); }.detail, .trade-card { border-color: var(--line); background: var(--panel-soft); }.muted { color: var(--muted); }
[data-theme="light"] { color-scheme:light; --bg-app:#F4F7FA; --bg-sidebar:#FFFFFF; --bg-card:#FFFFFF; --bg-surface:#EDF2F7; --bg-hover:#E5EBF1; --border:#D8E0E8; --text-primary:#15202B; --text-secondary:#526477; --text-muted:#748494; --accent-primary:#4F46E5; --accent-blue:#2563EB; --status-success:#148A55; --status-warning:#B97800; --status-danger:#D94250; --status-info:#087EA4; --bg:var(--bg-app); --panel:var(--bg-card); --panel-soft:var(--bg-surface); --text:var(--text-primary); --muted:var(--text-secondary); --line:var(--border); --accent:var(--accent-primary); --accent-soft:rgba(79,70,229,.11); --ok:var(--status-success); --bad:var(--status-danger); --warn:var(--status-warning); --shadow:0 8px 25px rgba(15,23,42,.08); }[data-theme="light"] .app-header { background:rgba(255,255,255,.94); }[data-theme="light"] .equity-chart .gridline { stroke:#e6ebf0; }
@media (max-width: 1180px) { .metrics-grid { grid-template-columns: repeat(3,1fr); }.terminal-overview-grid { grid-template-columns: 1fr 1fr; }.equity-panel { grid-column:span 2; }.allocation-panel { grid-column:auto; }.timeline-panel { grid-column:auto; } }
@media (max-width: 760px) { :root { --sidebar:0px; }.terminal-sidebar { inset:auto 0 0; width:auto; height:58px; flex-direction:row; padding:5px 8px; border:1px solid var(--line); border-width:1px 0 0; }.terminal-mark,.sidebar-search,.sidebar-nav p,.sidebar-footer,.sidebar-nav a:nth-of-type(n+6) { display:none; }.sidebar-nav { display:grid; grid-template-columns:repeat(5,1fr); width:100%; margin:0; overflow:visible; }.sidebar-nav a { display:flex; flex-direction:column; justify-content:center; gap:1px; margin:0; padding:3px; }.sidebar-nav a b { font-size:8px; }.sidebar-nav a em { display:none; }.app-header { left:0; padding:10px 12px; }.brand-block h1 { font-size:16px; }.header-subtitle,.refresh-control span,.source-badge { display:none; }.header-badges { gap:5px; } main { margin:0; padding:12px 10px 75px; }.app-tabs { display:none; }.status-bar { flex-wrap:nowrap; overflow:auto; }.status-last-update { display:none; }.metrics-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }.metric { flex:0 0 145px; scroll-snap-align:start; }.terminal-overview-grid { grid-template-columns:1fr; }.equity-panel,.timeline-panel { grid-column:auto; }.equity-chart { height:150px; }.equity-chart svg { height:125px; }.table-wrap { display:block; overflow:auto; }.section-band { padding:12px; } }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand-block {
  display: grid;
  gap: 2px;
  min-width: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 25px;
  font-weight: 760;
}

h2 {
  font-size: 18px;
  font-weight: 720;
}

h3 {
  font-size: 15px;
  font-weight: 700;
}

.eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.header-subtitle {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

main {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.app-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0.6rem;
  padding: 0.8rem;
  background: #0a1c38;
  overflow-x: auto;
  scrollbar-width: thin;
}

.app-tab,
.install-app {
  min-height: 44px;
  padding: 0.8rem 1rem;
  border: 1px solid #4ba6ca;
  border-radius: 999px;
  background: #123461;
  color: #f8fbff;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}

.app-tab:hover,
.install-app:hover {
  background: #1a4d8c;
}

.app-tab:focus-visible,
.install-app:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
}

.app-tab.active {
  background: #65d9ff;
  border-color: #65d9ff;
  color: #07233a;
}

.controlled-testnet-stack {
  display: grid;
  gap: 12px;
}

.section-band {
  width: 100%;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.mode-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.header-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.mode-label,
.status-pill,
.source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-strip {
  display: block;
  padding: 0;
}

.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
}

.status-purple {
  background: var(--purple-soft);
  color: var(--purple);
}

.status-green {
  background: #e9f7ed;
  color: var(--ok);
}

.status-blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.status-last-update {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.92rem;
}

.mode-label.active,
.status-pill.approved,
.status-pill.keep,
.source-badge {
  border-color: #9fd7cb;
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill.rejected,
.status-pill.disable {
  border-color: #f2b8bd;
  background: #ffe4e8;
  color: var(--bad);
}

.status-pill.reduce_size,
.status-pill.need_more_data {
  border-color: #f6d39b;
  background: #fff3d8;
  color: #81520a;
}

.warning-banner {
  padding: 12px 14px;
  border: 1px solid #f5c25d;
  border-radius: 10px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 750;
}

.notice-banner {
  padding: 12px 14px;
  border: 1px solid #b8d7cd;
  border-radius: 10px;
  background: #edf8f4;
  color: #174f45;
  font-size: 14px;
  font-weight: 750;
}

.hidden {
  display: none;
}

.metrics-grid,
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.metric,
.detail,
.trade-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfd;
}

.metric {
  border-left: 4px solid #c8d3df;
}

.metric-safe {
  border-left-color: var(--ok);
  background: #f4fbf5;
}

.metric-danger {
  border-left-color: var(--bad);
  background: #fff6f7;
}

.metric-warn,
.metric-risk {
  border-left-color: #b87916;
  background: #fff9eb;
}

.metric-focus,
.metric-mode {
  border-left-color: var(--blue);
  background: var(--blue-soft);
}

.metric .label,
.detail .label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric .value,
.detail .value {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.trade-card,
.scenario-card {
  display: grid;
  gap: 12px;
  border-left: 5px solid #c8d3df;
}

.trade-card-approved {
  border-left-color: var(--ok);
}

.trade-card-rejected {
  border-left-color: var(--bad);
}

.scenario-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.scenario-summary-card,
.scenario-card,
.strategy-notes {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.scenario-summary-card {
  border-left: 4px solid var(--blue);
}

.scenario-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.scenario-summary-card strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.scenario-summary-card small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
}

.readiness-gate {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #b9cdea;
  border-radius: 8px;
  background: #f7fbff;
}

.compact-heading {
  margin-bottom: 0;
}

.readiness-grid,
.readiness-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.readiness-card,
.readiness-list {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.readiness-card {
  border-left: 4px solid var(--blue);
}

.readiness-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.readiness-card strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.readiness-paper_ready_candidate,
.readiness-simulation_ready {
  border-left-color: var(--ok);
}

.readiness-research_only,
.readiness-need_more_data {
  border-left-color: #b87916;
}

.readiness-blocked {
  border-left-color: var(--bad);
}

.readiness-list h4 {
  margin: 0;
  font-size: 13px;
}

.guardrail-gate {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #c9d8c5;
  border-radius: 8px;
  background: #f7fbf5;
}

.guardrail-grid,
.guardrail-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.guardrail-card,
.guardrail-list,
.guardrail-summary {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.guardrail-card {
  border-left: 4px solid var(--accent);
}

.guardrail-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.guardrail-card strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.guardrail-allow {
  border-left-color: var(--ok);
}

.guardrail-reduce_size,
.guardrail-need_more_data {
  border-left-color: #b87916;
}

.guardrail-avoid,
.guardrail-blocked {
  border-left-color: var(--bad);
}

.guardrail-list h4 {
  margin: 0;
  font-size: 13px;
}

.guardrail-summary p {
  color: #264337;
  font-weight: 700;
}

.risk-policy-gate {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d8ccb6;
  border-radius: 8px;
  background: #fffcf5;
}

.risk-policy-grid,
.risk-policy-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.risk-policy-card,
.risk-policy-list,
.risk-policy-summary {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.risk-policy-card {
  border-left: 4px solid #b87916;
}

.risk-policy-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.risk-policy-card strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.risk-policy-standard_size_candidate {
  border-left-color: var(--ok);
}

.risk-policy-reduced_size_only,
.risk-policy-simulation_only,
.risk-policy-research_only,
.risk-policy-need_more_data {
  border-left-color: #b87916;
}

.risk-policy-no_trade {
  border-left-color: var(--bad);
}

.risk-policy-list h4 {
  margin: 0;
  font-size: 13px;
}

.risk-policy-summary {
  display: grid;
  gap: 6px;
}

.risk-policy-summary p {
  color: #493916;
  font-weight: 700;
}

.reference-audit-gate {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #c6d2df;
  border-radius: 8px;
  background: #f7f9fc;
}

.reference-audit-grid,
.reference-system-grid,
.reference-audit-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.reference-audit-card,
.reference-system-card,
.reference-audit-list {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.reference-audit-card {
  border-left: 4px solid var(--blue);
}

.reference-audit-card span,
.reference-system-card span,
.reference-system-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reference-audit-card strong,
.reference-system-card strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.reference-audit-list h4 {
  margin: 0;
  font-size: 13px;
}

.candidate-lab-gate {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #c7d8c9;
  border-radius: 8px;
  background: #f6fbf7;
}

.candidate-lab-grid,
.candidate-card-grid,
.candidate-lab-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.candidate-lab-card,
.candidate-card,
.candidate-lab-list {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.candidate-lab-card {
  border-left: 4px solid var(--green);
}

.candidate-card {
  border-left: 4px solid var(--blue);
}

.candidate-high {
  border-left-color: var(--red);
}

.candidate-low {
  border-left-color: var(--green);
}

.candidate-lab-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.candidate-lab-card strong,
.candidate-card strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.candidate-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.candidate-lab-list h4 {
  margin: 0;
  font-size: 13px;
}

.candidate-matrix-gate {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #d6ccd9;
  border-radius: 8px;
  background: #fbf8fc;
}

.candidate-matrix-grid,
.candidate-matrix-list-grid,
.phase31-safety-grid,
.phase31-safety-list-grid,
.phase32-approval-grid,
.phase32-approval-list-grid,
.phase33-audit-grid,
.phase33-audit-list-grid,
.phase34-report-grid,
.phase34-report-list-grid,
.phase35-dry-run-grid,
.phase35-dry-run-list-grid,
.phase36-dashboard-grid,
.phase36-dashboard-list-grid,
.phase37-risk-gate-grid,
.phase37-risk-gate-list-grid,
.phase38-final-review-grid,
.phase38-final-review-list-grid,
.phase39-sample-expansion-grid,
.phase39-sample-expansion-list-grid,
.phase40-filter-dashboard-grid,
.phase40-filter-dashboard-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.candidate-matrix-card,
.candidate-matrix-list,
.phase31-safety-list,
.phase32-approval-list,
.phase33-audit-list,
.phase34-report-list,
.phase35-dry-run-list,
.phase36-dashboard-list,
.phase37-risk-gate-list,
.phase38-final-review-list,
.phase39-sample-expansion-list,
.phase40-filter-dashboard-list {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.candidate-matrix-card {
  border-left: 4px solid var(--blue);
}

.candidate-matrix-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.candidate-matrix-card strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.candidate-matrix-list h4,
.phase31-safety-list h4,
.phase32-approval-list h4,
.phase33-audit-list h4,
.phase34-report-list h4,
.phase35-dry-run-list h4,
.phase36-dashboard-list h4,
.phase37-risk-gate-list h4,
.phase38-final-review-list h4,
.phase39-sample-expansion-list h4,
.phase40-filter-dashboard-list h4 {
  margin: 0;
  font-size: 13px;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.scenario-card {
  border-left-color: var(--accent);
}

.scenario-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scenario-labels span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #b9cdea;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.strategy-notes {
  margin-top: 14px;
}

.strategy-notes h3 {
  margin-bottom: 10px;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.plan-section {
  display: grid;
  gap: 8px;
}

.kv {
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  background: var(--panel-soft);
}

.target-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.target-box {
  min-width: 0;
  padding: 10px;
  border: 1px solid #bfd1ea;
  border-radius: 8px;
  background: #f4f8ff;
}

.target-box span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.target-box strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.kv span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.kv strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.plan-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ladder {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.ladder-step {
  position: relative;
  min-width: 140px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.ladder-step::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 800;
}

.ladder-step:last-child::after {
  content: "";
}

.ladder-step span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ladder-step strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ladder-support {
  border-color: #a8d5b0;
  background: #f3fbf5;
}

.ladder-entry {
  border-color: #b9cdea;
  background: #f4f8ff;
}

.ladder-target,
.ladder-runner {
  border-color: #e2c88f;
  background: #fff9eb;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 800;
}

td {
  font-size: 13px;
}

tr:last-child td {
  border-bottom: 0;
}

.muted,
.empty {
  color: var(--muted);
}

.log-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.log-list li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.log-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.log-meta strong {
  color: var(--text);
}

.log-time,
.log-relative {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.log-message {
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.timeline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.timeline-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #fbfcfd;
}

.timeline-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.timeline-list strong {
  text-align: right;
  font-size: 13px;
}

@media (max-width: 720px) {
  .app-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  main {
    padding: 14px;
    gap: 14px;
  }

  .section-band {
    padding: 14px;
  }

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

  .header-badges {
    justify-content: flex-start;
  }

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

  .target-strip {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .timeline-list li,
  .log-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-list strong {
    text-align: left;
  }

  .status-last-update {
    margin-left: 0;
  }
}

.tab-hidden {
  display: none !important;
}

/* Final shell cascade: legacy component rules above remain available in
   research views; these declarations own the application frame. */
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.app-header { left: var(--sidebar); padding: 14px 24px; background: rgba(9,14,22,.94); border-color: var(--line); }
main { display: grid; margin-left: var(--sidebar); gap: 14px; padding: 18px 22px 40px; }
.app-tabs { position: static; top: auto; padding: 0; background: transparent; }
.app-tab,.install-app { min-height:32px; padding:7px 11px; border-color:var(--line); border-radius:6px; background:var(--panel); color:var(--muted); font-size:10px; }
.app-tab.active { border-color:rgba(57,214,164,.35); background:var(--accent-soft); color:var(--accent); }
.status-bar { padding:8px 10px; border-color:var(--line); border-radius:7px; background:var(--panel); }
.status-chip { min-height:26px; padding:4px 8px; border-radius:5px; font-size:9px; }
.section-band { padding:16px; border-color:var(--line); border-radius:8px; background:var(--panel); box-shadow:none; }
#overview { padding:0; border:0; background:transparent; }
.metrics-grid { grid-template-columns:repeat(6,minmax(130px,1fr)); gap:8px; }
.metric { min-height:100px; padding:13px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.range-tabs span { display:inline-block; padding:4px 7px; border-radius:4px; color:var(--muted); font-size:9px; cursor:pointer; }.range-tabs span.active { background:var(--accent-soft); color:var(--accent); }
@media (max-width:1180px) { .metrics-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .app-header { left:0; padding:10px 12px; } main { margin:0; padding:12px 10px 75px; }.metrics-grid { display:flex; grid-template-columns:none; overflow-x:auto; }.metric { flex:0 0 145px; } }

.version-label { display:inline-block; margin-left:5px; padding:1px 5px; border-radius:3px; background:var(--accent-primary); color:#fff; letter-spacing:.03em; }
.safety-badge { display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border:1px solid var(--border); border-radius:5px; font-size:10px; font-weight:800; }.safety-badge.testnet { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.12); color:var(--status-warning); }.safety-badge.readonly { border-color:rgba(56,189,248,.4); background:rgba(56,189,248,.11); color:var(--status-info); }
.status-warning { background:rgba(245,158,11,.12); color:var(--status-warning); }.status-danger { background:rgba(239,68,68,.12); color:var(--status-danger); }.health-pending { color:var(--text-muted); font-size:11px; }.unavailable-state { display:grid; place-items:center; align-content:center; min-height:175px; padding:24px; text-align:center; }.unavailable-state strong { color:var(--text-secondary); font-size:20px; }.unavailable-state span { max-width:320px; margin-top:6px; color:var(--text-muted); font-size:12px; }.state-unavailable .range-tabs { display:none; }
.is-updating #manual-refresh { animation:refresh-spin .8s linear infinite; }.is-updating::after { content:"Updating"; position:fixed; right:18px; bottom:18px; z-index:60; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--bg-surface); color:var(--text-secondary); font-size:11px; }@keyframes refresh-spin { to { transform:rotate(360deg); } }
.app-footer { display:flex; justify-content:space-between; gap:12px; margin-left:var(--sidebar); padding:12px 22px; border-top:1px solid var(--border); color:var(--text-muted); background:var(--bg-app); font-size:10px; }.mobile-bottom-nav { display:none; }
body.sidebar-collapsed { --sidebar:72px; }.sidebar-collapsed .terminal-mark::after,.sidebar-collapsed .sidebar-nav b,.sidebar-collapsed .sidebar-nav p,.sidebar-collapsed .sidebar-nav em,.sidebar-collapsed .sidebar-footer div,.sidebar-collapsed .sidebar-search { display:none; }.sidebar-collapsed .terminal-mark { justify-content:center; padding-inline:0; }.sidebar-collapsed .sidebar-nav a { display:flex; justify-content:center; padding:0; }.sidebar-collapsed .sidebar-nav a > span { font-size:17px; }.sidebar-collapsed .sidebar-toggle { transform:rotate(180deg); }
:focus-visible { outline:2px solid var(--status-info); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

@media (max-width:760px) {
  html,body { max-width:100%; overflow-x:hidden; }.terminal-sidebar { display:none; }.app-header { min-height:62px; padding-top:max(10px,env(safe-area-inset-top)); }.brand-block .eyebrow { white-space:nowrap; }.header-badges .safety-badge,.header-badges .refresh-control,.header-badges .notification-button { display:none; }
  main { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }.status-strip { margin-inline:-10px; }.status-bar { border-inline:0; border-radius:0; }.status-chip { flex:0 0 auto; min-height:30px; }.terminal-overview-grid { display:grid; grid-template-columns:1fr; }.terminal-panel { width:100%; }.app-footer { display:none; }
  .mobile-bottom-nav { position:fixed; inset:auto 0 0; z-index:80; display:grid; grid-template-columns:repeat(5,1fr); min-height:64px; padding:5px 4px max(5px,env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--bg-sidebar); box-shadow:0 -8px 25px rgba(0,0,0,.2); }.mobile-bottom-nav > a,.mobile-bottom-nav > details > summary { display:flex; min-width:0; min-height:48px; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--text-secondary); font-size:10px; text-decoration:none; list-style:none; }.mobile-bottom-nav span { font-size:16px; }.mobile-bottom-nav details[open] summary { color:var(--accent-primary); }.mobile-more-sheet { position:fixed; inset:auto 0 calc(64px + env(safe-area-inset-bottom)); display:grid; max-height:70vh; padding:18px 16px 22px; border:1px solid var(--border); border-radius:16px 16px 0 0; background:var(--bg-card); box-shadow:0 -20px 50px rgba(0,0,0,.35); overflow:auto; }.mobile-more-sheet strong { padding:0 6px 10px; font-size:16px; }.mobile-more-sheet a,.mobile-more-sheet > span { display:flex; align-items:center; min-height:46px; padding:0 8px; border-top:1px solid var(--border); color:var(--text-primary); font-size:13px; text-decoration:none; }
  #active-positions .table-wrap,#open-orders .table-wrap { overflow:visible; }#active-positions table,#open-orders table,#active-positions tbody,#open-orders tbody { display:block; width:100%; }#active-positions thead,#open-orders thead { display:none; }#active-positions tr,#open-orders tr { display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; margin-bottom:10px; padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--bg-surface); }#active-positions td,#open-orders td { display:grid; gap:2px; padding:0; border:0; font-size:13px; text-align:left; }#active-positions td::before,#open-orders td::before { content:attr(data-label); color:var(--text-muted); font-size:10px; text-transform:uppercase; }#active-positions td.empty,#open-orders td.empty { grid-column:1/-1; }#active-positions td.empty::before,#open-orders td.empty::before { display:none; }
}

/* V2 visual polish ------------------------------------------------------- */
:root { --bg-app:#0B1118; --bg-sidebar:#0D151F; --bg-card:#131D29; --bg-surface:#172330; --bg-hover:#1B2A39; --border:#253140; --text-primary:#F4F7FA; --text-secondary:#AAB8C5; --text-muted:#748494; --accent-blue:#3B82F6; --accent-primary:#6366F1; --status-success:#10B981; --status-warning:#F59E0B; --status-danger:#EF4444; --status-info:#38BDF8; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --shadow-card:0 1px 2px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.12); --shadow-hover:0 12px 32px rgba(0,0,0,.22); }
[data-theme="light"] { --bg-app:#F3F6F9; --bg-sidebar:#FFFFFF; --bg-card:#FFFFFF; --bg-surface:#EDF2F7; --bg-hover:#E5EBF1; --border:#D7E0E9; --text-primary:#15202B; --text-secondary:#526477; --text-muted:#748494; --shadow-card:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06); --shadow-hover:0 12px 32px rgba(15,23,42,.1); }
html { scroll-behavior:smooth; background:var(--bg-app); }
body { background:radial-gradient(circle at 70% -10%,rgba(59,130,246,.055),transparent 32%),var(--bg-app); font-family:Inter,"IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.005em; }
.terminal-sidebar { padding:20px 12px 16px; background:linear-gradient(180deg,var(--bg-sidebar),color-mix(in srgb,var(--bg-sidebar) 94%,#000)); box-shadow:8px 0 30px rgba(0,0,0,.08); }
.terminal-mark { min-height:44px; padding:0 10px 20px; }.terminal-mark span { width:38px; border-radius:10px; background:linear-gradient(145deg,var(--accent-primary),var(--accent-blue)); color:white; box-shadow:0 7px 18px rgba(99,102,241,.28); }.terminal-mark::after { font-size:12px; line-height:1.15; }
.sidebar-search { min-height:40px; border-color:color-mix(in srgb,var(--border) 85%,transparent); background:var(--bg-card); transition:border-color .18s,background .18s,transform .18s; }.sidebar-search:hover { border-color:var(--accent-blue); background:var(--bg-hover); }
.sidebar-nav { padding-right:2px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }.sidebar-nav p { padding:18px 12px 7px; font-size:10px; }.sidebar-nav a { position:relative; min-height:42px; padding:0 12px; border-radius:8px; color:var(--text-secondary); transition:color .16s,background .16s,transform .16s; }.sidebar-nav a::before { content:""; position:absolute; left:0; width:3px; height:0; border-radius:0 3px 3px 0; background:var(--accent-primary); transition:height .16s; }.sidebar-nav a:hover { color:var(--text-primary); background:var(--bg-hover); transform:translateX(2px); }.sidebar-nav a.active { color:#fff; background:linear-gradient(90deg,rgba(99,102,241,.24),rgba(99,102,241,.1)); box-shadow:none; }.sidebar-nav a.active::before { height:22px; }.sidebar-nav a > span { display:grid; place-items:center; width:20px; color:var(--text-muted); font-size:15px; }.sidebar-nav a.active > span { color:#9DA2FF; }.sidebar-nav b { font-size:12px; font-weight:600; }.sidebar-footer { padding:15px 10px 2px; }
.app-header { min-height:72px; padding:13px 24px; background:color-mix(in srgb,var(--bg-app) 88%,transparent); border-bottom-color:var(--border); box-shadow:0 8px 30px rgba(0,0,0,.06); }.brand-block h1 { font-size:23px; font-weight:730; line-height:1.2; }.brand-block .eyebrow { margin-bottom:3px; color:var(--text-muted); }.header-subtitle { margin-top:3px; font-size:12px; }.header-badges { gap:8px; }.safety-badge,.source-badge { min-height:30px; padding:5px 10px; border-radius:6px; font-size:10px; letter-spacing:.04em; }.refresh-control { min-height:36px; margin-left:3px; padding-left:12px; }.refresh-control select { min-height:34px; border-color:var(--border); border-radius:7px; background:var(--bg-card); }.icon-button { width:36px; height:36px; border-radius:8px; transition:background .16s,border-color .16s,transform .16s; }.icon-button:hover { border-color:var(--accent-blue); background:var(--bg-hover); color:var(--text-primary); transform:translateY(-1px); }
main { gap:16px; padding:18px 24px 48px; }.app-tabs { gap:6px; }.app-tab,.install-app { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 13px; border-radius:7px; transition:all .16s; }.app-tab:hover,.install-app:hover { border-color:var(--accent-blue); background:var(--bg-hover); color:var(--text-primary); }.app-tab.active { box-shadow:inset 0 0 0 1px rgba(99,102,241,.14); }
.status-bar { min-height:46px; padding:8px 12px; border-radius:9px; box-shadow:var(--shadow-card); }.status-chip { position:relative; min-height:28px; padding:5px 9px 5px 22px; border:1px solid transparent; border-radius:6px; letter-spacing:.025em; }.status-chip::before { content:""; position:absolute; left:9px; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 13%,transparent); }.status-last-update { padding-left:12px; border-left:1px solid var(--border); }
#overview > .section-heading { min-height:38px; margin-bottom:12px; }.section-heading h2 { font-size:17px; font-weight:690; }.section-heading h3,.terminal-panel h3 { font-size:14px; font-weight:680; }.section-heading .eyebrow,.terminal-panel .eyebrow { margin-bottom:3px; }
.metrics-grid { gap:10px; }.metric { min-height:132px; padding:15px 16px; border-color:var(--border)!important; border-radius:var(--radius-md); background:linear-gradient(145deg,var(--bg-card),color-mix(in srgb,var(--bg-card) 93%,var(--accent-primary)))!important; box-shadow:var(--shadow-card); transition:border-color .18s,box-shadow .18s,transform .18s; }.metric:hover,.metric:focus-visible { border-color:color-mix(in srgb,var(--accent-primary) 55%,var(--border))!important; box-shadow:var(--shadow-hover); transform:translateY(-2px); }.metric::after { display:none; }.metric header { display:flex; align-items:center; justify-content:space-between; min-height:25px; margin-bottom:9px; }.metric-icon { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--border); border-radius:7px; background:var(--bg-surface); color:var(--accent-blue); font-size:14px; }.metric-status { color:var(--text-muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.metric-safe .metric-status,.metric-safe .value { color:var(--status-success); }.metric-danger .metric-status,.metric-danger .value { color:var(--status-danger); }.metric-warn .metric-status { color:var(--status-warning); }.metric .label { color:var(--text-secondary); font-size:11px; font-weight:600; letter-spacing:.01em; }.metric .value { display:block; margin-top:5px; overflow:hidden; color:var(--text-primary); font-size:21px; font-weight:720; line-height:1.12; text-overflow:ellipsis; white-space:nowrap; }.metric-caption { display:block; margin-top:7px; color:var(--text-muted); font-size:10px; }
.skeleton-card { position:relative; overflow:hidden; }.skeleton-card::before { content:""; position:absolute; inset:14px; border-radius:7px; background:linear-gradient(90deg,var(--bg-surface) 20%,var(--bg-hover) 48%,var(--bg-surface) 75%); background-size:220% 100%; animation:skeleton 1.25s ease-in-out infinite; }@keyframes skeleton { to { background-position:-220% 0; } }
.terminal-overview-grid { gap:10px; margin-top:10px; }.terminal-panel,.section-band { border-color:var(--border); border-radius:var(--radius-md); background:linear-gradient(145deg,var(--bg-card),color-mix(in srgb,var(--bg-card) 97%,var(--accent-blue))); box-shadow:var(--shadow-card); }.terminal-panel { padding:17px; transition:border-color .18s,box-shadow .18s,transform .18s; }.terminal-panel:hover { border-color:color-mix(in srgb,var(--border) 68%,var(--accent-blue)); box-shadow:var(--shadow-hover); }.terminal-panel > header { min-height:34px; padding-bottom:11px; border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent); }
.empty-chart { position:relative; min-height:206px; overflow:hidden; }.empty-chart-grid { position:absolute; inset:12px 0 24px; display:grid; grid-template-rows:repeat(5,1fr); opacity:.65; }.empty-chart-grid i { border-bottom:1px dashed color-mix(in srgb,var(--border) 70%,transparent); }.empty-chart-grid::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),color-mix(in srgb,var(--border) 50%,transparent) 20%); opacity:.45; }.empty-chart .unavailable-state { position:relative; z-index:1; min-height:180px; }.empty-chart-axis { position:absolute; inset:auto 0 3px; display:flex; justify-content:space-between; color:var(--text-muted); font-size:9px; }.empty-state-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:10px; border:1px solid var(--border); border-radius:12px; background:var(--bg-surface); color:var(--accent-blue); font-size:21px; box-shadow:0 8px 20px rgba(0,0,0,.1); }.unavailable-state.compact { min-height:185px; }.unavailable-state.compact strong { font-size:15px; }.status-tag { display:inline-flex; align-items:center; min-height:23px; padding:3px 7px; border:1px solid var(--border); border-radius:5px; font-size:9px; font-weight:700; }.status-tag.unavailable { color:var(--text-muted); background:var(--bg-surface); }
.service-list > div { min-height:54px; padding:4px 2px; transition:background .16s; }.service-list > div:hover { background:var(--bg-hover); }.service-list .service-icon { width:26px; height:26px; border:1px solid var(--border); border-radius:7px; color:var(--status-info); }.service-list strong { font-weight:700; }.resource-grid { gap:10px; }.resource-grid > div { min-height:34px; padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--bg-surface); }
.timeline-panel li { min-height:58px; padding:5px 2px; transition:background .16s; }.timeline-panel li:hover { background:var(--bg-hover); }.timeline-panel li > i { width:26px; height:26px; }.timeline-panel li b { font-size:11px; }.timeline-panel li span,.timeline-panel time { font-size:9px; }
.section-band { padding:18px; }.detail,.trade-card,[class$="-card"] { border-color:var(--border); border-radius:8px; background:var(--bg-surface); }.details-grid { gap:10px; }.detail { min-height:72px; padding:14px; }.detail .label { color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }.detail .value { margin-top:5px; color:var(--text-primary); font-size:14px; font-weight:650; }
.table-wrap { border:1px solid var(--border); border-radius:8px; background:var(--bg-card); }.table-wrap table { border-collapse:separate; border-spacing:0; }.table-wrap thead { position:sticky; top:0; z-index:2; }.table-wrap th { height:40px; padding:9px 12px; border-bottom:1px solid var(--border); background:var(--bg-surface); color:var(--text-muted); font-size:10px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; }.table-wrap td { height:44px; padding:9px 12px; color:var(--text-secondary); }.table-wrap tbody tr:nth-child(even) { background:color-mix(in srgb,var(--bg-surface) 45%,transparent); }.table-wrap tbody tr { transition:background .15s; }.table-wrap tbody tr:hover { background:var(--bg-hover); }.status-pill,.mode-label,.source-badge { border-radius:5px; letter-spacing:.025em; }
.notice-banner,.warning-banner { border-radius:8px; box-shadow:inset 3px 0 currentColor; }.diagnostic-details { border:1px solid var(--border); border-radius:8px; background:var(--bg-surface); }.diagnostic-details summary { min-height:44px; padding:12px 14px; cursor:pointer; color:var(--text-secondary); font-weight:650; }.diagnostic-details[open] summary { border-bottom:1px solid var(--border); color:var(--text-primary); }
.app-footer { min-height:44px; align-items:center; border-color:var(--border); }
@media (max-width:1180px) { .metric .value { font-size:23px; }.terminal-panel { padding:15px; } }
@media (max-width:760px) { body { background:var(--bg-app); }.app-header { min-height:66px; border-bottom:1px solid var(--border); box-shadow:0 5px 18px rgba(0,0,0,.12); }.brand-block h1 { font-size:18px; }.header-badges .icon-button { width:36px; height:36px; }.status-bar { min-height:42px; padding:7px 10px; border-inline:0; box-shadow:none; }.metrics-grid { gap:9px; padding-bottom:4px; }.metric { flex-basis:172px; min-height:138px; }.metric .value { font-size:22px; }.terminal-overview-grid { gap:10px; }.terminal-panel,.section-band { border-radius:9px; }.terminal-panel { padding:15px; }.empty-chart { min-height:190px; }.unavailable-state { padding:18px; }.mobile-bottom-nav { min-height:68px; background:color-mix(in srgb,var(--bg-sidebar) 96%,transparent); backdrop-filter:blur(18px); }.mobile-bottom-nav > a,.mobile-bottom-nav > details > summary { min-height:52px; transition:color .15s,background .15s; }.mobile-bottom-nav > a:active,.mobile-bottom-nav > details > summary:active { color:#fff; background:rgba(99,102,241,.16); border-radius:8px; }.mobile-more-sheet { padding-top:20px; background:var(--bg-card); }.table-wrap { border:0; background:transparent; } }