:root {
  --ink: #dcebea;
  --muted: #769391;
  --void: #050d0f;
  --base: #071417;
  --panel: #0b1b1f;
  --panel-2: #0f2428;
  --line: #1a3b3e;
  --cyan: #57e6c2;
  --cyan-dim: #218b78;
  --amber: #ffb84d;
  --red: #ff5f57;
  --blue: #5caeff;
  --sidebar: 178px;
  --header: 78px;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --display: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --body: "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--void); color-scheme: dark; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 0%, rgba(22, 117, 105, .2), transparent 28%),
    linear-gradient(135deg, rgba(87, 230, 194, .025) 25%, transparent 25%) 0 0 / 32px 32px,
    var(--base);
  font-family: var(--body);
  min-width: 320px;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.scanline {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.035) 4px);
  mix-blend-mode: overlay;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-rows: var(--header) minmax(calc(100vh - var(--header)), auto);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  grid-column: 1 / -1;
  height: var(--header);
  display: grid;
  grid-template-columns: var(--sidebar) minmax(360px, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 15, 17, .94);
  backdrop-filter: blur(16px);
}

.brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  color: var(--ink);
  text-decoration: none;
  border-right: 1px solid var(--line);
}

.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  border: 2px solid var(--cyan);
  font: 800 15px var(--mono);
  transform: skew(-7deg) rotate(-2deg);
  box-shadow: 0 0 24px rgba(87, 230, 194, .15);
}

.brand strong { display: block; font: 700 13px var(--display); letter-spacing: .04em; }
.brand small { display: block; margin-top: 3px; color: var(--cyan); font: 600 7px var(--mono); letter-spacing: .1em; }

.top-alert {
  justify-self: center;
  width: min(700px, 90%);
  min-height: 44px;
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid #295155;
  background: rgba(12, 31, 34, .82);
  box-shadow: inset 3px 0 var(--cyan-dim);
}

.top-alert.is-alert { border-color: var(--red); background: rgba(77, 20, 20, .5); box-shadow: inset 4px 0 var(--red); }
.alert-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 1.5s infinite; }
.top-alert.is-alert .alert-pulse { background: var(--red); box-shadow: 0 0 12px var(--red); }
.alert-code { color: var(--muted); font: 700 10px var(--mono); }
.top-alert strong { font-size: 13px; white-space: nowrap; }
.alert-detail { overflow: hidden; color: #a7bcba; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }

.top-status { display: flex; align-items: center; gap: 12px; padding: 0 18px; }
.top-status time { color: var(--muted); font: 11px var(--mono); }
.online-pill { padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; color: #b9d0ce; font: 700 9px var(--mono); white-space: nowrap; }
.online-pill i, .live-indicator i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }

.sidebar {
  position: sticky;
  top: var(--header);
  height: calc(100vh - var(--header));
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
  background: rgba(6, 17, 20, .92);
  overflow: auto;
}

.sidebar-label { padding: 0 7px 8px; color: #4f706e; font: 700 8px var(--mono); letter-spacing: .12em; }
#project-nav { display: grid; gap: 3px; }
.project-nav-item, .nav-tool {
  width: 100%;
  display: grid;
  grid-template-columns: 29px 1fr;
  grid-template-rows: auto auto;
  gap: 1px 7px;
  padding: 7px;
  color: #96acaa;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: .2s ease;
}
.project-nav-item:hover, .nav-tool:hover { color: var(--ink); border-color: #24474a; background: #0b2023; transform: translateX(2px); }
.project-nav-item.active { color: var(--ink); border-color: var(--cyan-dim); background: linear-gradient(90deg, rgba(87,230,194,.14), transparent); box-shadow: inset 3px 0 var(--cyan); }
.project-nav-item > span, .nav-tool > span { grid-row: 1 / -1; display: grid; place-items: center; width: 27px; height: 27px; color: var(--cyan); border: 1px solid #285957; font: 700 9px var(--mono); }
.project-nav-item b, .nav-tool b { align-self: end; font-size: 10px; }
.project-nav-item small, .nav-tool small { color: #50706e; font: 6px var(--mono); letter-spacing: .04em; }
.side-footer { display: grid; gap: 5px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }

#app-main { min-width: 0; padding: 18px 20px 40px; outline: none; }
.reveal { animation: reveal .42s ease both; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.eyebrow { color: var(--amber); font: 700 9px var(--mono); letter-spacing: .16em; }
.page-heading h1 { margin: 5px 0 4px; font: 700 clamp(25px, 3vw, 42px)/1 var(--display); letter-spacing: .02em; }
.page-heading p { max-width: 820px; margin: 0; color: var(--muted); font-size: 12px; }
.heading-actions { display: flex; align-items: center; gap: 8px; }
.demo-badge { padding: 7px 10px; border: 1px solid #735e35; color: var(--amber); font: 700 9px var(--mono); }
.ghost-button, .registry-link, .step-button { color: #a9c2c0; border: 1px solid var(--line); background: #0a1a1d; cursor: pointer; }
.ghost-button { padding: 8px 11px; font-size: 10px; }
.ghost-button:hover, .registry-link:hover, .step-button:hover { color: var(--cyan); border-color: var(--cyan-dim); }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-bottom: 12px; }
.metric-strip article { position: relative; min-height: 62px; padding: 10px 13px; border-right: 1px solid var(--line); overflow: hidden; }
.metric-strip article:last-child { border-right: 0; }
.metric-strip small { display: block; color: var(--muted); font: 700 8px var(--mono); letter-spacing: .12em; }
.metric-strip strong { display: block; margin-top: 5px; font: 700 19px var(--display); }
.metric-strip i { position: absolute; inset: auto 0 0; height: 2px; background: var(--cyan); }
.metric-strip article:nth-child(2) i { background: var(--amber); }
.metric-strip article:nth-child(3) i { background: var(--blue); }

.video-station { border: 1px solid #2e5a5c; background: rgba(8, 24, 27, .82); }
.station-header, .comparison-labels, .timeline-row { display: flex; align-items: center; }
.station-header { justify-content: space-between; min-height: 42px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.station-header strong { font-size: 13px; }
.camera-code { margin-left: 8px; color: #506f6d; font: 9px var(--mono); }
.live-indicator { color: var(--cyan); font: 700 9px var(--mono); }
.comparison-labels { justify-content: space-between; padding: 7px 12px; color: #95aaa8; font: 700 8px var(--mono); letter-spacing: .12em; }
.comparison-labels span { width: 50%; }
.comparison-labels span:last-child { padding-left: 12px; color: var(--cyan); }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.feed { position: relative; aspect-ratio: 16 / 8.6; margin: 0; overflow: hidden; background: #102225; }
.scene-canvas { width: 100%; height: 100%; display: block; }
.feed figcaption { position: absolute; inset: 12px 12px auto; display: flex; justify-content: space-between; color: rgba(233,247,244,.85); font: 10px var(--mono); text-shadow: 0 1px 4px #000; }
.feed figcaption b { padding: 4px 6px; background: rgba(3,12,13,.64); font-size: 8px; }
.ai-feed::after { content: "AI"; position: absolute; right: -15px; bottom: -31px; color: rgba(87,230,194,.05); font: 900 120px var(--display); }
.timeline-row { min-height: 56px; gap: 12px; padding: 7px 12px; border-top: 1px solid var(--line); }
.timeline-row > div:not(.timeline) { min-width: 105px; }
.timeline-row small { display: block; color: var(--muted); font: 8px var(--mono); }
.timeline-row strong { font: 700 12px var(--mono); }
.timeline { position: relative; flex: 1; height: 6px; border-radius: 8px; background: #314042; overflow: hidden; }
.timeline span { position: absolute; inset: 0 auto 0 0; width: 68%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.timeline span::after { content: ""; position: absolute; right: -5px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.step-button { padding: 7px 8px; font: 700 9px var(--mono); }

.upload-workbench { border: 1px solid #2a5557; background: rgba(8, 25, 28, .92); }
.upload-workbench > header { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.upload-workbench h2 { margin: 2px 0 0; font: 700 17px var(--display); }
.backend-chip { padding: 6px 9px; color: var(--amber); border: 1px solid #66522d; font: 700 8px var(--mono); }
.backend-chip.ready { color: var(--cyan); border-color: var(--cyan-dim); }
.backend-chip.failed { color: var(--red); border-color: var(--red); }
.sample-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(87,230,194,.08), rgba(73,184,255,.025)); }
.sample-strip > div { min-width: 0; display: grid; gap: 4px; }
.sample-kicker { color: var(--cyan); font: 700 8px var(--mono); letter-spacing: .1em; }
.sample-title { font-size: 12px; }
.sample-fit { color: #78918f; font: 8px/1.5 var(--mono); }
.load-sample { flex: 0 0 auto; min-height: 32px; padding: 0 14px; color: #04110f; border: 1px solid var(--cyan); background: var(--cyan); font: 800 9px var(--mono); cursor: pointer; }
.load-sample:hover { filter: brightness(1.08); }
.load-sample:disabled { color: #5e7775; border-color: #294347; background: #183134; cursor: not-allowed; }
.upload-layout { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 104px; }
.upload-layout[hidden] { display: none; }
.drop-zone { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-content: center; gap: 3px 10px; padding: 10px 14px; border-right: 1px solid var(--line); background: repeating-linear-gradient(135deg, rgba(87,230,194,.02) 0 8px, transparent 8px 16px); cursor: pointer; transition: .2s ease; }
.drop-zone:hover, .drop-zone.dragging { background-color: rgba(87,230,194,.06); box-shadow: inset 0 0 0 1px var(--cyan-dim); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--cyan-dim); font: 18px var(--mono); }
.drop-zone strong { align-self: end; font-size: 11px; }
.drop-zone small { display: none; }
.selected-file { align-self: start; max-width: 90%; color: var(--amber); font: 8px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-control { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 9px 12px; }
.job-control > label { display: flex; justify-content: space-between; color: #91aaa8; font: 9px var(--mono); }
.confidence-input { width: 100%; accent-color: var(--cyan); }
.run-inference { min-height: 31px; color: #04110f; border: 0; background: var(--cyan); font: 800 9px var(--mono); cursor: pointer; }
.run-inference:disabled { color: #5e7775; background: #183134; cursor: not-allowed; }
.upload-note { display: none; }
.job-progress > div { display: flex; justify-content: space-between; margin-bottom: 5px; color: #9bb1af; font: 8px var(--mono); }
.job-progress progress { width: 100%; height: 7px; border: 0; accent-color: var(--cyan); }
.job-id { display: block; margin-top: 5px; color: #53706e; font-size: 7px; overflow-wrap: anywhere; }
.result-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, .72fr); grid-template-areas: "result side"; gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.result-workspace > article { min-width: 0; background: #071518; }
.result-workspace article > header { padding: 7px 10px; color: #8ca4a2; background: #0c2225; font: 700 8px var(--mono); }
.result-primary { grid-area: result; min-width: 0; background: #071518; }
.result-primary > header { color: var(--cyan) !important; }
.result-primary video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: contain; background: #020708; }
.result-side { grid-area: side; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1px; background: var(--line); }
.source-card { min-width: 0; background: #071518; }
.source-card video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: contain; background: #020708; }
.result-summary { padding: 13px; background: #0a1c1f; overflow: auto; }
.result-summary h3 { margin: 0 0 10px; color: var(--cyan); font: 700 11px var(--mono); }
.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #244043; color: #78918f; font-size: 9px; }
.summary-row b { color: var(--ink); font: 700 9px var(--mono); text-align: right; overflow-wrap: anywhere; }
.result-download { display: block; margin-top: 12px; padding: 9px; color: #05120f; text-align: center; text-decoration: none; background: var(--cyan); font: 800 9px var(--mono); }
.sample-provenance { margin-top: 11px; padding-top: 10px; border-top: 1px solid #244043; color: #78918f; font: 8px/1.6 var(--mono); }
.sample-provenance a { color: var(--amber); }

.detail-grid { display: grid; grid-template-columns: 1.45fr .85fr; gap: 12px; margin-top: 12px; }
.panel { min-width: 0; border: 1px solid var(--line); background: rgba(9, 25, 28, .82); }
.panel > header { min-height: 39px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line); color: #a8bfbd; font: 700 9px var(--mono); letter-spacing: .08em; }
.registry-link { padding: 5px 8px; font: 8px var(--mono); }
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pipeline-step { position: relative; min-height: 155px; padding: 14px; border-right: 1px solid var(--line); }
.pipeline-step:last-child { border-right: 0; }
.pipeline-step::after { content: "→"; position: absolute; z-index: 2; right: -9px; top: 18px; color: var(--cyan); font: 14px var(--mono); }
.pipeline-step:last-child::after { content: none; }
.step-index { color: var(--cyan); font: 700 9px var(--mono); }
.pipeline-step h3 { margin: 7px 0 8px; font-size: 13px; }
.tech-row { margin-top: 6px; }
.tech-row span { display: block; color: #547270; font: 7px var(--mono); letter-spacing: .08em; }
.tech-row code { display: block; margin-top: 2px; color: #c4d8d6; font: 9px/1.35 var(--mono); overflow-wrap: anywhere; }
.rule-version { color: var(--amber); }
.rule-body { padding: 15px; }
.rule-code { display: block; padding: 11px; color: var(--cyan); border-left: 2px solid var(--cyan); background: #071518; font: 10px/1.6 var(--mono); }
.rule-list { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.rule-list li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px dashed #1a3436; color: #8ca3a1; font-size: 10px; }
.rule-list b { color: var(--ink); font: 700 10px var(--mono); }

.archive-section { margin-top: 12px; padding: 13px; border: 1px solid var(--line); background: rgba(8, 22, 25, .7); }
.archive-section > header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.archive-section h2 { margin: 4px 0 0; font: 700 20px var(--display); }
.archive-filter { display: flex; }
.archive-filter button { padding: 6px 10px; color: #6f8987; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 9px; }
.archive-filter button.active { color: #061310; border-color: var(--cyan); background: var(--cyan); }
.archive-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.event-card { position: relative; min-height: 92px; display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px; text-align: left; color: var(--ink); border: 1px solid #284347; background: #0d2023; cursor: pointer; transition: .2s ease; overflow: hidden; }
.event-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--amber); }
.event-card.normal::before { background: var(--cyan-dim); }
.event-card:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }
.event-thumb { position: relative; min-height: 50px; background: linear-gradient(135deg, #183b3d, #0a1517); border: 1px solid #2a5050; }
.event-thumb::after { content: ""; position: absolute; left: 15px; top: 10px; width: 22px; height: 27px; border: 2px solid var(--red); }
.event-card.normal .event-thumb::after { border-color: var(--cyan); }
.event-copy strong { display: block; margin-bottom: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-copy p { margin: 0; color: #78918f; font: 8px/1.45 var(--mono); }
.event-copy small { display: block; margin-top: 6px; color: var(--amber); font: 7px var(--mono); }

.overview-page h1, .registry-page h1, .architecture-page h1 { margin: 6px 0; font: 700 clamp(30px, 4vw, 54px)/1 var(--display); }
.overview-intro, .registry-intro { max-width: 880px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.overview-card { position: relative; min-height: 220px; padding: 18px; color: var(--ink); text-align: left; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(15,43,45,.86), rgba(7,19,21,.92)); cursor: pointer; overflow: hidden; transition: .25s ease; }
.overview-card:hover { border-color: var(--cyan-dim); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.overview-card::after { content: attr(data-index); position: absolute; right: -8px; bottom: -32px; color: rgba(87,230,194,.06); font: 900 120px var(--display); }
.overview-card .card-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--cyan); border: 1px solid #2f6660; font: 700 11px var(--mono); }
.overview-card h2 { margin: 25px 0 8px; font: 700 20px var(--display); }
.overview-card p { margin: 0; color: #78918f; font-size: 10px; line-height: 1.6; }
.overview-card footer { position: absolute; left: 18px; right: 18px; bottom: 15px; display: flex; justify-content: space-between; color: #587573; font: 8px var(--mono); }
.overview-card footer b { color: var(--cyan); }

.registry-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); }
.registry-table { width: 100%; min-width: 900px; border-collapse: collapse; background: rgba(8,22,25,.88); }
.registry-table th { padding: 11px; color: var(--cyan); text-align: left; border-bottom: 1px solid var(--line); background: #0d2326; font: 700 8px var(--mono); letter-spacing: .1em; }
.registry-table td { padding: 12px 11px; border-bottom: 1px solid #173235; color: #a7bcba; font-size: 10px; vertical-align: top; }
.registry-table tr:hover td { background: rgba(87,230,194,.025); }
.registry-table code { color: var(--ink); font: 9px var(--mono); }
.registry-table .tag { display: inline-block; padding: 3px 6px; margin: 2px 2px 0 0; color: var(--amber); border: 1px solid #5c4b2c; font: 7px var(--mono); }
.truth-note { margin-top: 12px; padding: 12px; color: #c7b37f; border: 1px solid #554724; background: rgba(73,54,15,.2); font: 10px/1.7 var(--mono); }

.architecture-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
.arch-node { position: relative; min-height: 180px; padding: 16px; border: 1px solid var(--line); background: #0b1d20; }
.arch-node:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 45%; z-index: 3; color: var(--cyan); }
.arch-node span { color: var(--cyan); font: 700 9px var(--mono); }
.arch-node h2 { margin: 9px 0; font: 700 18px var(--display); }
.arch-node ul { margin: 0; padding-left: 15px; color: #7f9996; font-size: 10px; line-height: 1.8; }

.event-dialog { width: min(650px, calc(100vw - 30px)); padding: 0; color: var(--ink); border: 1px solid var(--cyan-dim); background: #08181b; box-shadow: 0 25px 90px #000; }
.event-dialog::backdrop { background: rgba(0,8,9,.78); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 10px; top: 8px; z-index: 2; width: 30px; height: 30px; color: var(--muted); border: 1px solid var(--line); background: #0c2023; cursor: pointer; }
.dialog-visual { min-height: 220px; display: grid; place-items: center; background: radial-gradient(circle, #1a4242, #071315 70%); border-bottom: 1px solid var(--line); }
.dialog-box { width: 180px; height: 110px; display: grid; place-items: center; color: var(--red); border: 3px solid var(--red); font: 700 13px var(--mono); }
.dialog-info { padding: 20px; }
.dialog-info h2 { margin: 0 0 6px; font: 700 26px var(--display); }
.dialog-info p { color: var(--muted); font-size: 11px; }
.dialog-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.dialog-meta div { padding: 9px; border: 1px solid var(--line); }
.dialog-meta small { display: block; color: #53706e; font: 7px var(--mono); }
.dialog-meta b { font: 10px var(--mono); }

@keyframes pulse { 50% { opacity: .4; transform: scale(.75); } }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  :root { --sidebar: 164px; }
  .overview-grid, .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .architecture-flow { grid-template-columns: 1fr 1fr; }
  .result-workspace { grid-template-columns: minmax(0, 1.7fr) minmax(230px, .72fr); }
  .arch-node::after { display: none; }
}

@media (max-width: 820px) {
  :root { --header: 66px; }
  .app-shell { display: block; padding-top: var(--header); }
  .topbar { position: fixed; inset: 0 0 auto; height: var(--header); grid-template-columns: 1fr auto; }
  .brand { border-right: 0; }
  .brand-mark { width: 36px; height: 36px; }
  .brand strong { font-size: 12px; }
  .top-alert { display: none; }
  .top-status time { display: none; }
  .sidebar { position: fixed; z-index: 30; top: auto; bottom: 0; width: 100%; height: 68px; display: block; padding: 7px; border: 0; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
  .sidebar-label, .side-footer { display: none; }
  #project-nav { display: flex; width: max-content; gap: 5px; }
  .project-nav-item { width: 142px; flex: 0 0 auto; padding: 7px; }
  .project-nav-item > span { width: 30px; height: 30px; }
  #app-main { padding: 16px 12px 90px; }
  .page-heading { align-items: flex-start; }
  .heading-actions { flex-direction: column; align-items: flex-end; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric-strip article:nth-child(2) { border-right: 0; }
  .metric-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .sample-strip { align-items: stretch; flex-direction: column; }
  .load-sample { width: 100%; }
  .upload-layout { grid-template-columns: 1fr; }
  .drop-zone { min-height: 88px; border-right: 0; border-bottom: 1px solid var(--line); }
  .result-workspace { grid-template-columns: 1fr; grid-template-areas: "result" "side"; }
  .result-side { grid-template-columns: minmax(0, .9fr) minmax(230px, 1.1fr); grid-template-rows: auto; }
  .pipeline { grid-template-columns: 1fr; }
  .pipeline-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .pipeline-step::after { content: "↓"; right: 14px; top: auto; bottom: -10px; }
  .overview-grid, .archive-grid { grid-template-columns: 1fr; }
  .overview-card { min-height: 180px; }
}

@media (max-width: 560px) {
  .result-side { grid-template-columns: 1fr; grid-template-rows: auto auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}