@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --canvas: #f8f9ff;
  --panel: #ffffff;
  --panel-soft: #f3f6fd;
  --panel-blue: #e8effc;
  --ink: #172435;
  --muted: #657388;
  --subtle: #8a96a8;
  --line: #d9e0ec;
  --line-strong: #c5cede;
  --primary: #1d5fc4;
  --primary-dark: #00479f;
  --primary-soft: #e5eefc;
  --positive: #c62d35;
  --positive-soft: #fff0ef;
  --negative: #138259;
  --negative-soft: #ebf8f1;
  --warning: #a54a00;
  --warning-soft: #fff0e7;
  --danger: #c52831;
  --danger-soft: #ffe9e8;
  --header-h: 60px;
  --sidebar-w: 208px;
  --footer-h: 28px;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
* { box-sizing: border-box; min-width: 0; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: var(--canvas); font-family: var(--sans); font-size: 13px; }
body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
code, .mono, .market-clock, td:not(:first-child), .metric-value { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.muted { color: var(--muted) !important; }
.subtle { color: var(--subtle) !important; }
.positive { color: var(--positive) !important; }
.negative { color: var(--negative) !important; }
.warning-text { color: var(--warning) !important; }
.danger-text { color: var(--danger) !important; }
.nowrap { white-space: nowrap; }
.mt7 { margin-top: 7px !important; }
.mt8 { margin-top: 8px !important; }
.mb7 { margin-bottom: 7px !important; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--negative); vertical-align: 1px; }
.dot.off { background: #8e98a7; }
.dot.warn { background: #dc7b14; }

/* fixed Stitch workstation shell */
.app-shell { min-height: 100vh; }
.global-header { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--header-h); display: flex; align-items: stretch; gap: 12px; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line-strong); }
.global-brand { flex: 0 1 400px; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; }
.global-brand strong { font-size: 15px; font-weight: 800; }
.brand-glyph { color: var(--primary-dark); font-size: 25px; font-weight: 900; line-height: 1; }
.version-chip, .demo-flag { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 6px; border: 1px solid #cdd7e8; color: #5c6b80; background: #edf2fb; font: 11px var(--mono); white-space: nowrap; }
.demo-flag { color: #6d2f15; border-color: #f3ae8b; background: #ffe3d4; font-family: var(--sans); font-weight: 700; }
.telemetry { flex: 1 1 auto; display: flex; justify-content: flex-end; overflow: hidden; }
.telemetry-item { flex: 0 1 140px; min-width: 86px; padding: 10px 10px 6px; border-left: 1px solid #e3e8f1; overflow: hidden; }
.telemetry-item small, .telemetry-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-item small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.telemetry-item strong { margin-top: 3px; font: 11px var(--mono); }
.operator { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding-left: 10px; border-left: 1px solid var(--line); text-align: right; }
.operator small, .operator strong { display: block; }
.operator small { color: var(--muted); font-size: 9px; }
.operator strong { margin-top: 2px; color: var(--primary-dark); font: 11px var(--mono); }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary-dark); font: 700 11px var(--mono); }
.sidebar { position: fixed; z-index: 30; top: var(--header-h); bottom: var(--footer-h); left: 0; width: var(--sidebar-w); display: flex; flex-direction: column; padding: 8px 4px 4px; overflow-y: auto; background: #fff; border-right: 1px solid var(--line-strong); }
.nav-caption { padding: 0 4px 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
nav { display: grid; gap: 1px; }
nav a { height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 9px; color: #4a5565; text-decoration: none; font-size: 13px; white-space: nowrap; border: 1px solid transparent; }
nav a:hover { color: var(--primary-dark); background: #eef3fb; }
nav a.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.nav-icon { width: 18px; color: currentColor; text-align: center; font-size: 17px; font-weight: 700; }
.nav-divider { height: 1px; margin: 9px 0 8px; background: var(--line); }
.sidebar-spacer { flex: 1; min-height: 16px; }
.agent-indicator { display: flex; align-items: center; gap: 6px; margin: 0 3px 7px; padding: 6px 7px; color: var(--muted); background: #f4f6fa; border: 1px solid var(--line); font-size: 9px; overflow: hidden; }
.agent-indicator i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #8792a2; }
.agent-indicator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-indicator.online { color: #126640; background: var(--negative-soft); }
.agent-indicator.online i { background: var(--negative); }
.emergency-button { width: 100%; height: 39px; min-height: 39px; display: grid; place-items: center; padding: 3px 8px; color: #a51f25; background: #ffdcd9; border: 1px solid #e1484e; }
.emergency-button strong, .emergency-button small { display: block; }
.emergency-button strong { font-size: 12px; }
.emergency-button small { margin-top: 1px; font-size: 9px; }
.workspace { min-height: 100vh; margin-left: var(--sidebar-w); padding-top: var(--header-h); padding-bottom: var(--footer-h); overflow: hidden; }
.page-toolbar { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.page-toolbar h1 { margin: 0; font-size: 16px; line-height: 1.2; }
.page-toolbar p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.toolbar-actions, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.system-bar { position: fixed; z-index: 45; inset: auto 0 0 0; height: var(--footer-h); display: flex; align-items: center; gap: 18px; padding: 0 12px; overflow: hidden; color: #5c6b7e; background: #e7eefb; border-top: 1px solid #c5d2e6; font: 10px var(--mono); white-space: nowrap; }
.system-bar span { border-right: 1px solid #bdc9da; padding-right: 18px; }
.system-bar span:last-child, .system-bar .system-bar-spacer { border: 0; padding-right: 0; }
.system-bar-spacer { flex: 1; }
.system-bar > strong { color: var(--primary-dark); }

/* controls */
.button, .icon-button, .text-button { min-height: 30px; padding: 5px 10px; color: #435168; background: #f8faff; border: 1px solid var(--line-strong); border-radius: 1px; font-size: 11px; font-weight: 650; }
.button:hover, .icon-button:hover { color: var(--primary-dark); border-color: #8eabd4; background: #eef4fd; }
.button.primary { color: #fff; background: var(--primary-dark); border-color: var(--primary-dark); }
.button.primary:hover { background: #003d89; }
.button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.button.danger-outline { color: var(--danger); background: #fff; border-color: #df7a7f; }
.button.small { min-height: 24px; padding: 3px 7px; font-size: 9px; }
.button.compact { min-height: 26px; padding: 3px 8px; }
.button.wide { width: 100%; min-height: 38px; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.icon-button { width: 30px; padding: 0; display: inline-grid; place-items: center; font-size: 15px; }
.text-button { padding: 0; min-height: auto; color: var(--primary-dark); background: transparent; border: 0; }
.market-clock { padding: 4px 7px; color: #4a5b70; background: #edf2fa; border: 1px solid #d2dbea; font-size: 10px; }
.badge { display: inline-flex; align-items: center; max-width: 100%; min-height: 21px; padding: 2px 6px; color: #355b94; background: var(--primary-soft); border: 1px solid #cad9f1; border-radius: 1px; font-size: 9px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge.success { color: #137449; background: var(--negative-soft); border-color: #bde1cf; }
.badge.warning { color: #87410a; background: var(--warning-soft); border-color: #efc7a8; }
.badge.danger { color: #aa202a; background: var(--danger-soft); border-color: #edb7b5; }
.badge.neutral { color: #5f6d80; background: #eff2f7; border-color: #d9dfe8; }
.global-banner { margin: 8px 14px 0; padding: 7px 9px; font-size: 10px; line-height: 1.45; }
.global-banner.warning { color: #743900; background: #fff1e9; border: 1px solid #edc6ad; }
.global-banner.danger { color: #9b1e25; background: #ffe9e8; border: 1px solid #e9aaa9; }

/* page surfaces */
main { padding: 10px 14px 24px; overflow: hidden; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.page-head h2 { margin: 0; font-size: 14px; }
.page-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.panel, .metric-card, .risk-hero { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 1px 2px rgba(21, 41, 72, .025); }
.panel + .panel { margin-top: 8px; }
.grid { min-width: 0; display: grid; gap: 8px; }
.grid > * { min-width: 0; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.wide-left { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); }
.grid.wide-right { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.7fr); }
.grid .panel + .panel { margin-top: 0; }
.panel-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; background: #fff; border-bottom: 1px solid var(--line); }
.panel-head.blue { background: var(--panel-blue); }
.panel-head h3 { margin: 0; font-size: 12px; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.panel-body { min-width: 0; padding: 9px; }
.panel-body.flush { padding: 0; }
.metric-grid { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.metric-card { min-height: 92px; padding: 10px; overflow: hidden; }
.metric-label { display: block; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.metric-value { display: block; margin: 8px 0 5px; overflow: hidden; font-size: clamp(16px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.metric-meta { display: block; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.summary-strip { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); background: var(--panel-soft); border-bottom: 1px solid var(--line); }
.summary-item { min-width: 0; padding: 7px 9px; border-right: 1px solid var(--line); }
.summary-item:last-child { border-right: 0; }
.summary-item small, .summary-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-item small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.summary-item strong { margin-top: 3px; font: 700 10px var(--mono); }
.status-list { display: grid; }
.status-row { min-width: 0; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 1px; border-bottom: 1px solid #e7ebf2; font-size: 10px; }
.status-row:last-child { border-bottom: 0; }
.status-row > span, .status-row > strong { overflow: hidden; text-overflow: ellipsis; }
.status-row strong { text-align: right; font: 700 10px var(--mono); }
.flow { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.flow-step { min-width: 0; position: relative; padding: 9px 5px; text-align: center; background: var(--panel-soft); border: 1px solid #dbe3f1; }
.flow-step:not(:last-child)::after { content: "›"; position: absolute; right: -6px; top: 50%; z-index: 1; width: 12px; color: #6f7f95; background: #fff; transform: translateY(-50%); }
.flow-step strong, .flow-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-step strong { color: var(--primary-dark); font: 800 14px var(--mono); }
.flow-step small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.table-wrap { width: 100%; max-width: 100%; overflow: auto; scrollbar-gutter: stable; }
table { width: 100%; min-width: 720px; border-collapse: collapse; }
th { height: 31px; padding: 0 8px; color: #5e6d82; background: #eaf0fb; border-bottom: 1px solid #cfd9e9; text-align: left; font-size: 9px; font-weight: 800; white-space: nowrap; }
td { height: 34px; max-width: 340px; padding: 5px 8px; color: #344357; border-bottom: 1px solid #e5e9f1; font-size: 9px; line-height: 1.35; vertical-align: middle; overflow-wrap: anywhere; }
tbody tr { cursor: default; }
tbody tr:hover { background: #f5f8fe; }
tbody tr.selected { background: #e8effc; box-shadow: inset 2px 0 var(--primary); }
tbody tr:last-child td { border-bottom: 0; }
td code { display: inline-block; max-width: 220px; overflow: hidden; color: #53677f; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.code-cell strong, .code-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-cell strong { color: #27364a; font-size: 10px; }
.code-cell small { margin-top: 1px; color: #7f8b9e; font: 8px var(--mono); }
.rank { display: inline-block; min-width: 28px; color: var(--primary-dark); font: 800 10px var(--mono); }
.reason-tags { min-width: 140px; display: flex; flex-wrap: wrap; gap: 3px; }
.tag { max-width: 170px; padding: 2px 4px; overflow: hidden; color: #45668f; background: #edf3fc; border: 1px solid #d5e0f0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.table-footer { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; color: var(--muted); background: #eaf0fb; border-top: 1px solid #d1dbea; font: 9px var(--mono); }
.empty { min-height: 120px; display: grid; place-content: center; gap: 4px; padding: 22px; color: var(--muted); text-align: center; font-size: 10px; }
.empty strong { color: #516078; font-size: 12px; }
.event-list { display: grid; }
.event { position: relative; min-height: 35px; padding: 6px 8px 6px 15px; border-left: 1px solid #cdd7e6; }
.event::before { content: ""; position: absolute; left: -3px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.event strong { font-size: 10px; }
.event p { margin: 2px 0 0; color: var(--muted); font: 8px var(--mono); }
.chart { width: 100%; height: 180px; background: linear-gradient(#fff, #f7f9fe); border: 1px solid #e3e8f0; }
.chart svg { width: 100%; height: 100%; }
.chart-grid { stroke: #e4e9f2; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--primary-dark); stroke-width: 1.8; }
.chart-area { fill: url(#area-gradient); }
.bar-track { height: 8px; overflow: hidden; background: #e4eaf4; }
.bar-fill { display: block; height: 100%; background: var(--primary); }
.bar-progress { display: block; width: 100%; height: 8px; overflow: hidden; appearance: none; border: 0; border-radius: 0; background: #e4eaf4; }
.bar-progress::-webkit-progress-bar { background: #e4eaf4; }
.bar-progress::-webkit-progress-value { background: var(--primary); }
.bar-progress::-moz-progress-bar { background: var(--primary); }
.concentration-item { margin-bottom: 10px; }
.status-row.compact { min-height: 0; padding: 0 0 4px; border: 0; }
.filter-bar { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 8px; background: #fff; border: 1px solid var(--line); margin-bottom: 7px; }
.filters { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.filters input, .filters select, .filter-bar input, .filter-bar select { width: auto; min-width: 135px; max-width: 230px; height: 28px; padding: 0 7px; color: #344357; background: #fff; border: 1px solid var(--line-strong); border-radius: 1px; font-size: 10px; }
.filter-bar .search { flex: 1 1 220px; max-width: none; }
.filter-spacer { flex: 1; }
.check-inline { display: flex; grid-auto-flow: column; align-items: center; gap: 5px; white-space: nowrap; }
.compact-check { width: 14px; height: 14px; }
.segmented { display: inline-flex; min-width: 0; overflow-x: auto; border: 1px solid var(--line-strong); }
.segmented button { min-height: 27px; padding: 3px 8px; color: #56657a; background: #fff; border: 0; border-right: 1px solid var(--line); font-size: 9px; white-space: nowrap; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { color: var(--primary-dark); background: var(--primary-soft); font-weight: 800; }
.risk-checks { min-width: 220px; display: flex; flex-wrap: wrap; gap: 3px; }
.risk-check { padding: 2px 4px; color: #69768a; background: #f0f3f7; border: 1px solid #e0e5ed; font-size: 8px; }
.risk-check.pass { color: #137149; background: var(--negative-soft); border-color: #c5e5d5; }
.risk-check.fail { color: #a82029; background: var(--danger-soft); border-color: #efbdbc; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.tab { min-height: 30px; padding: 5px 11px; color: #617086; background: #fff; border: 0; border-right: 1px solid var(--line); font-size: 9px; }
.tab.active { color: var(--primary-dark); background: var(--primary-soft); box-shadow: inset 0 -2px var(--primary); font-weight: 800; }
.notice { padding: 7px 9px; overflow-wrap: anywhere; font-size: 9px; line-height: 1.55; }
.notice.info { color: #315c93; background: #edf4ff; border: 1px solid #cbdcf2; }
.notice.warning { color: #793900; background: var(--warning-soft); border: 1px solid #edc7ac; }
.notice.danger { color: #991e25; background: var(--danger-soft); border: 1px solid #ecb5b3; }

/* qmt_1 overview: compact monitoring workstation */
.workspace.overview-route .page-toolbar,
.workspace.overview-route .global-banner,
.app-shell.overview-route .agent-indicator { display: none !important; }
.workspace.overview-route main { padding: 0 12px 20px; }
.overview-page { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.overview-status-panel,
.overview-engine-bar { min-width: 0; background: #fff; border: 1px solid #e1e6ef; border-radius: 4px; box-shadow: 0 1px 3px rgba(28, 45, 70, .045); }
.overview-status-panel { height: 70px; padding: 7px 8px; border: 0; }
.overview-status-main { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.overview-status-identity,
.overview-state-actions,
.overview-engine-title,
.overview-engine-actions,
.overview-panel-head > div,
.overview-console-head > div { min-width: 0; display: flex; align-items: center; gap: 7px; }
.overview-status-identity { flex: 1 1 auto; flex-wrap: wrap; }
.overview-status-identity > strong { overflow: hidden; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.overview-live-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px #e8f0fc; }
.overview-live-dot.offline { background: #8a95a5; box-shadow: none; }
.overview-code-chip { display: inline-flex; align-items: center; min-height: 20px; max-width: 240px; padding: 2px 6px; overflow: hidden; color: #57677e; background: #edf2fb; font: 11px/14px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.overview-state-actions { flex: 0 0 auto; }
.overview-state-pills { display: flex; align-items: center; padding: 2px; background: #f0f3f8; }
.overview-state-pill { min-height: 26px; display: inline-flex; align-items: center; padding: 4px 8px; color: #627086; font-size: 11px; font-weight: 700; white-space: nowrap; }
.overview-state-pill.active { color: var(--primary-dark); background: #fff; box-shadow: 0 1px 2px rgba(22, 42, 70, .08); }
.overview-state-pill.warning { color: #8d4409; }
.overview-decoupling { min-width: 0; height: 24px; display: flex; align-items: center; gap: 7px; margin-top: 4px; padding: 3px 7px; color: #5e6c81; background: #edf3ff; font-size: 12px; line-height: 16px; }
.overview-decoupling > span:nth-child(2) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-decoupling strong { color: #26374c; }
.overview-decoupling code { flex: 0 0 auto; color: var(--primary-dark); font-size: 11px; white-space: nowrap; }
.overview-shield,
.overview-section-icon { color: var(--primary-dark); font-size: 17px; font-weight: 800; line-height: 1; }

.overview-metric-grid { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.overview-metric-card { min-width: 0; height: 106px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; overflow: hidden; background: #fff; border: 0; border-radius: 4px; box-shadow: 0 1px 3px rgba(28, 45, 70, .055); }
.overview-metric-label { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #5b697d; font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.overview-metric-label span { overflow: hidden; text-overflow: ellipsis; }
.overview-metric-label i { color: #607087; font: 700 10px var(--mono); }
.overview-metric-main { min-width: 0; display: grid; gap: 3px; margin: 4px 0; }
.overview-metric-main > strong { overflow: hidden; color: #132237; font: 800 clamp(18px, 1.8vw, 23px)/24px var(--mono); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.overview-metric-main > .metric-value { margin: 0; }
.overview-metric-main > strong.primary-text,
.primary-text { color: var(--primary-dark) !important; }
.overview-metric-main > span { overflow: hidden; color: #657388; font-size: 11px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.overview-metric-footer { min-height: 23px; display: flex; align-items: center; padding: 3px 6px; overflow: hidden; color: #516077; background: #edf2fb; font: 11px/14px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.overview-metric-progress { width: 100%; height: 6px; margin-top: 1px; appearance: none; border: 0; background: #dbe6f7; }
.overview-metric-progress::-webkit-progress-bar { background: #dbe6f7; }
.overview-metric-progress::-webkit-progress-value { background: var(--primary-dark); }
.overview-metric-progress::-moz-progress-bar { background: var(--primary-dark); }

.overview-engine-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 0; }
.overview-engine-title { flex: 1 1 auto; }
.overview-engine-title > h3 { margin: 0; font-size: 14px; line-height: 20px; white-space: nowrap; }
.overview-engine-actions { flex: 0 1 auto; justify-content: flex-end; flex-wrap: nowrap; }
.overview-engine-actions .button { white-space: nowrap; }
.overview-engine-actions .button { background: #edf2fb; }
.overview-engine-actions .danger-outline { background: #fff; }

.overview-main-grid { min-width: 0; min-height: 440px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); gap: 8px; align-items: start; }
.overview-decision-panel { margin: 0 !important; overflow: hidden; }
.overview-panel-head { min-width: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 9px; background: #edf3ff; }
.overview-panel-head h3 { margin: 0; font-size: 14px; line-height: 20px; white-space: nowrap; }
.overview-decision-table { width: 100%; min-width: 0; table-layout: fixed; }
.overview-decision-table th:nth-child(1) { width: 19%; }
.overview-decision-table th:nth-child(2) { width: 13%; }
.overview-decision-table th:nth-child(3) { width: 18%; }
.overview-decision-table th:nth-child(4) { width: 22%; text-align: right; }
.overview-decision-table th:nth-child(5) { width: 28%; }
.overview-decision-table th { height: 44px; font-size: 11px; line-height: 14px; }
.overview-decision-table td { height: 49px; font-size: 12px; line-height: 16px; }
.overview-decision-table td:nth-child(4) { color: var(--muted); text-align: right; }
.overview-cell-note { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.overview-flow-footer { height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 8px; color: #5a697e; background: #edf3ff; font-size: 11px; line-height: 14px; }
.overview-flow-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-flow-footer strong { flex: 0 0 auto; color: var(--primary-dark); font: 700 11px/14px var(--mono); }

.overview-position-column { min-width: 0; display: grid; gap: 8px; }
.overview-position-head { background: #fff; border: 1px solid #e1e6ef; border-radius: 4px; box-shadow: 0 1px 3px rgba(28, 45, 70, .045); }
.overview-position-card { min-width: 0; height: 120px; padding: 8px; overflow: hidden; background: #fff; border: 0; border-radius: 4px; box-shadow: 0 1px 3px rgba(28, 45, 70, .055); cursor: pointer; }
.overview-position-card:last-child { height: 148px; }
.overview-position-card:hover { border-color: #aebfd8; }
.overview-position-top { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.overview-position-top > div { min-width: 0; }
.overview-position-top > div:first-child strong,
.overview-position-top > div:first-child small,
.overview-position-top > div:last-child strong,
.overview-position-top > div:last-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-position-top > div:first-child strong { font-size: 14px; line-height: 20px; }
.overview-position-top > div:first-child small { margin-top: 1px; color: var(--muted); font-size: 11px; line-height: 14px; }
.overview-position-top > div:last-child { flex: 0 0 auto; text-align: right; }
.overview-position-top > div:last-child strong { font: 800 18px/22px var(--mono); }
.overview-position-top > div:last-child small { margin-top: 1px; font: 12px/14px var(--mono); }
.overview-position-stats { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 7px 0; padding: 6px; background: #edf2fb; text-align: center; }
.overview-position-stats span,
.overview-position-stats small,
.overview-position-stats strong { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-position-stats small { color: var(--muted); font-size: 11px; line-height: 14px; }
.overview-position-stats strong { margin-top: 1px; font: 700 12px/14px var(--mono); }
.overview-position-foot { min-width: 0; display: flex; align-items: center; gap: 10px; color: #5d6b80; font-size: 12px; line-height: 16px; }
.overview-position-foot span { white-space: nowrap; }
.overview-position-foot em { min-width: 0; margin-left: auto; padding: 3px 5px; overflow: hidden; color: #5b6a7f; background: #edf2fb; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.overview-t1-note { margin-top: 6px; padding: 4px 6px; color: #5e6c81; background: #edf2fb; font-size: 11px; line-height: 14px; }
.overview-t1-note strong { color: #27374b; }

.overview-console-panel { height: 122px; margin: 0 !important; overflow: hidden; }
.overview-console-head { min-width: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 9px; background: #edf3ff; }
.overview-console-head > div:first-child h3 { margin: 0; font-size: 14px; line-height: 20px; white-space: nowrap; }
.overview-config-status { flex: 1 1 auto; justify-content: flex-end; overflow: hidden; color: #5a697e; font: 11px/14px var(--mono); }
.overview-config-status > span { padding-right: 8px; border-right: 1px solid #c7d2e2; white-space: nowrap; }
.overview-config-status .badge { border: 0; cursor: pointer; font-family: var(--sans); }
.overview-terminal { height: 94px; display: grid; gap: 2px; padding: 6px 9px; overflow-y: auto; }
.overview-terminal-line { min-width: 0; display: grid; grid-template-columns: 150px minmax(170px, auto) minmax(0, 1fr); gap: 7px; align-items: baseline; color: #5d6b80; font: 11px/14px var(--mono); }
.overview-terminal-line time { color: #7e8999; }
.overview-terminal-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-terminal-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* forms and settings */
.form-grid { min-width: 0; display: grid; gap: 8px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { min-width: 0; display: grid; gap: 4px; color: #55647a; font-size: 9px; font-weight: 700; }
input, select, textarea { width: 100%; max-width: 100%; color: #26364a; background: #fff; border: 1px solid var(--line-strong); border-radius: 1px; outline: none; }
input, select { height: 30px; padding: 0 7px; }
textarea { padding: 7px; resize: vertical; }
.form-submit-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
input:focus, select:focus, textarea:focus { border-color: #7295ca; box-shadow: inset 0 0 0 1px #7295ca; }
input[readonly], input:disabled, select:disabled { color: #778396; background: #f0f2f6; }
.switch-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e6eaf1; }
.switch-row:last-child { border-bottom: 0; }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: 10px; }
.switch-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.switch { position: relative; width: 34px; height: 18px; flex: 0 0 34px; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; background: #b9c1cc; border: 1px solid #aab4c2; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--primary); border-color: var(--primary); }
.switch input:checked + span::after { transform: translateX(16px); }
.risk-hero { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; color: #9a1f27; background: var(--danger-soft); border-color: #e5aaa9; }
.risk-hero.safe { color: #116943; background: var(--negative-soft); border-color: #b8dcc9; }
.risk-hero h3 { margin: 0; font-size: 12px; }
.risk-hero p { margin: 3px 0 0; color: #627086; font-size: 9px; }
.config-tools { position: sticky; top: 60px; z-index: 5; }
.config-layout { min-width: 0; display: grid; grid-template-columns: 176px minmax(0, 1fr) 248px; gap: 8px; align-items: start; }
.config-layout > * { min-width: 0; }
.config-nav { position: sticky; top: 68px; }
.config-nav .panel-body { padding: 4px; }
.config-nav button { width: 100%; min-height: 29px; display: flex; justify-content: space-between; gap: 4px; padding: 4px 7px; overflow: hidden; color: #56657a; background: transparent; border: 0; text-align: left; font-size: 9px; }
.config-nav button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-nav button:hover, .config-nav button.active { color: var(--primary-dark); background: var(--primary-soft); }
.config-section { margin: 0 0 8px !important; scroll-margin-top: 70px; }
.config-row { min-width: 0; display: grid; grid-template-columns: minmax(190px, .9fr) minmax(220px, 1.1fr); gap: 8px; align-items: center; padding: 7px 9px; border-bottom: 1px solid #e5e9f1; }
.config-row:last-child { border-bottom: 0; }
.config-row > * { min-width: 0; }
.config-row strong, .config-row small, .config-row code { display: block; max-width: 100%; overflow-wrap: anywhere; }
.config-row strong { margin-bottom: 2px; font-size: 9px; }
.config-row small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.config-row code { margin-top: 3px; color: #6e7e94; font-size: 7px; }
.config-row.changed { background: #fff5ea; box-shadow: inset 2px 0 #d27517; }
.config-input-array { font: 8px var(--mono); }
.config-side { position: sticky; top: 68px; display: grid; gap: 8px; }
.diff-list { max-height: 250px; overflow: auto; }
.diff-item { padding: 6px 0; border-bottom: 1px solid #e5e9f1; font-size: 8px; }
.diff-item code, .diff-item span { display: block; overflow-wrap: anywhere; }
.diff-item span { margin-top: 2px; color: var(--muted); }
.version-list { max-height: 420px; overflow: auto; }
.version-item { min-width: 0; padding: 7px 8px; border-bottom: 1px solid #e5e9f1; }
.version-item:last-child { border-bottom: 0; }
.version-item > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.version-item strong, .version-item code, .version-item small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-item strong { font-size: 9px; }
.version-item code { margin-top: 4px; color: #5f6f85; font-size: 8px; }
.version-item small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.version-item .actions { margin-top: 5px; }
.micro-copy { font-size: 8px; }
.json-block { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: 9px var(--mono); }

/* drawer and modals */
.detail-drawer { position: fixed; z-index: 80; top: var(--header-h); right: 0; bottom: var(--footer-h); width: min(440px, calc(100vw - var(--sidebar-w))); overflow: hidden; background: #fff; border-left: 1px solid #bfcadc; box-shadow: -8px 0 20px rgba(28, 45, 70, .08); transform: translateX(102%); transition: transform .18s ease; }
.detail-drawer.open { transform: translateX(0); }
.drawer-head { height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 14px; }
.drawer-body { height: calc(100% - 54px); overflow: auto; padding: 9px; }
.drawer-section { margin-bottom: 8px; border: 1px solid var(--line); }
.drawer-section h3 { margin: 0; padding: 7px 8px; background: var(--panel-blue); border-bottom: 1px solid var(--line); font-size: 10px; }
.drawer-kv { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); border-bottom: 1px solid #e7eaf0; }
.drawer-kv:last-child { border: 0; }
.drawer-kv span, .drawer-kv strong { padding: 6px 7px; overflow-wrap: anywhere; font-size: 9px; }
.drawer-kv span { color: var(--muted); background: #fafbfe; }
.drawer-kv strong { font-family: var(--mono); }
.drawer-backdrop { position: fixed; z-index: 70; inset: var(--header-h) 0 var(--footer-h) var(--sidebar-w); background: rgba(21, 31, 46, .12); }
.modal { width: min(580px, calc(100vw - 30px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; color: var(--ink); background: #fff; border: 1px solid #aebbd0; border-radius: 2px; box-shadow: 0 12px 40px rgba(18, 35, 60, .24); }
.modal::backdrop { background: rgba(18, 28, 42, .38); }
.modal form { padding: 12px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 14px; }
.modal form > label { margin-top: 9px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.confirm-modal { width: min(500px, calc(100vw - 30px)); }
.confirm-message { padding: 8px; color: #5e3b12; background: var(--warning-soft); border: 1px solid #edc7aa; font-size: 10px; line-height: 1.55; }
.toast-stack { position: fixed; z-index: 100; right: 12px; bottom: 40px; display: grid; gap: 6px; }
.toast { min-width: 260px; max-width: 430px; padding: 9px 11px; color: #315476; background: #fff; border: 1px solid #a9bfdc; box-shadow: 0 4px 18px rgba(25, 45, 72, .14); font-size: 10px; animation: toast-in .16s ease; }
.toast.error { color: #97202a; background: #fff9f9; border-color: #df9b9f; }
@keyframes toast-in { from { opacity: 0; transform: translateY(5px); } }
.skeleton { min-height: 74px; background: linear-gradient(90deg, #eef2f8, #fafbfd, #eef2f8); background-size: 200% 100%; border: 1px solid var(--line); animation: shimmer 1.1s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* login */
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #edf2fa; }
.login-card { width: min(420px, 100%); padding: 25px; background: #fff; border: 1px solid #bfcbdc; border-top: 3px solid var(--primary-dark); box-shadow: 0 8px 28px rgba(25, 46, 74, .12); }
.login-brand { display: flex; align-items: center; gap: 7px; font-size: 16px; }
.login-flags { display: flex; gap: 5px; margin: 9px 0 20px; color: var(--muted); font: 10px var(--mono); }
.login-card h1 { margin: 0 0 7px; font-size: 19px; }
.login-card > p { margin: 0 0 18px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.login-card form { display: grid; gap: 10px; }
.login-card .form-error { min-height: 16px; margin: 8px 0 0; color: var(--danger); }

@media (max-width: 1320px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .config-layout { grid-template-columns: 160px minmax(0, 1fr); }
  .config-side { position: static; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  :root { --sidebar-w: 176px; }
  .telemetry-item:nth-child(3), .telemetry-item:nth-child(5) { display: none; }
  .global-brand { flex-basis: 390px; }
  .grid.wide-left, .grid.wide-right { grid-template-columns: minmax(0, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --sidebar-w: 58px; }
  .global-brand .version-chip, .global-brand .demo-flag, .global-brand strong, .telemetry { display: none; }
  .global-brand { flex: 1 1 auto; }
  .operator div { display: none; }
  .sidebar { padding-left: 4px; padding-right: 4px; }
  .nav-caption, nav a { font-size: 0; }
  .nav-caption { height: 7px; padding: 0; }
  nav a { justify-content: center; padding: 0; }
  .nav-icon { font-size: 17px; }
  .agent-indicator span, .emergency-button small, .emergency-button strong { font-size: 0; }
  .emergency-button strong::before { content: "♨"; font-size: 16px; }
  .page-toolbar { padding-left: 9px; padding-right: 9px; }
  .toolbar-actions .badge, .market-clock { display: none; }
  main { padding-left: 8px; padding-right: 8px; }
  .grid.two, .metric-grid, .config-layout, .config-side, .form-grid.two { grid-template-columns: minmax(0, 1fr); }
  .config-nav { position: static; }
  .config-nav .panel-body { display: flex; overflow: auto; }
  .config-nav button { width: auto; flex: 0 0 auto; }
  .config-row { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .system-bar span:nth-child(2), .system-bar span:nth-child(3), .system-bar span:last-child { display: none; }
}