/* ============================================================================
   app.css — 应用样式（单一文件）。

   由 consolidate-css.mjs 把原来的 11 个样式层按**原加载顺序**拼接而成。
   拼接保持源码顺序 ⇒ 同优先级规则的取胜者不变 ⇒ 级联被精确保留，这一点由
   像素对照（shots/visual 的 before/after 全量截图）验证过。

   下面每个分节对应合并前的一个文件。历史上的"补丁层"关系仍然可见——
   越靠后的分节越可能覆盖前面的，这就是为什么改动应当尽量落在最早的
   基础层，而不是再加一层。
   ============================================================================ */

/* ======================== styles.css — 基础层：布局、组件、状态与全部历史规则 ======================== */

html.theme-dark {
  background: var(--bg-deep);
}

* {
  box-sizing: border-box;
}
html {
  min-width: 320px;
  overflow-x: hidden;
  /* Follow the body theme so overscroll never flashes the opposite scheme. */
  background: var(--bg-deep);
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--text);
  /* zh-CN product: the stack must carry a CJK family before generic fallbacks,
     otherwise Chinese glyphs render with per-platform browser defaults. Inter
     is kept first only for its Latin metrics when installed. */
  font:
    14px/1.6 Inter,
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    'Noto Sans CJK SC',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  background:
    radial-gradient(ellipse 70% 48% at 12% 4%, rgba(255, 107, 0, 0.06), transparent 58%),
    radial-gradient(ellipse 56% 46% at 92% 10%, rgba(6, 182, 212, 0.045), transparent 64%),
    var(--bg-deep);
}
button,
select,
textarea,
input {
  font: inherit;
}
button,
select {
  color: inherit;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: var(--z-sticky);
  transform: translateY(-160%);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  /* 前景必须是背景的互补深浅。--accent-text 在浅色是深橙 #c2410c、在暗色是
     亮橙 #ffb377，任何固定前景都会在其中一套主题上失效（白字 5.07:1 / 1.75:1，
     深字 3.66:1 / 10.79:1）。改成和 .button-primary 同一套做法：实心 --accent
     配深色前景，浅色 6.75:1、暗色约 9:1。 */
  color: var(--warm-ink);
  background: var(--accent);
  font-size:var(--fs-meta);
  font-weight: 750;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 58px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: var(--white);
  background: linear-gradient(135deg, var(--flame) 0%, var(--accent) 100%);
  font-size: 19px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 14px rgba(240, 90, 26, 0.22);
}
.brand-kicker,
.eyebrow,
.card-kicker,
.nav-label {
  display: block;
  color: var(--cyan);
  font-size:var(--fs-meta);
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.brand strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.topbar-context {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
}
.topbar-context strong {
  font-weight: 650;
}
.context-divider {
  width: 1px;
  height: 19px;
  margin: 0 4px;
  background: var(--line-strong);
}
.account-pill {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
  border: 1px solid rgba(70, 160, 98, 0.25);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--green-text);
  background: rgba(70, 160, 98, 0.08);
  font-size:var(--fs-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.service-pill,
.live-label,
.contract-badge,
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  white-space: nowrap;
}
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 13px var(--green);
}
.service-pill.is-loading .status-dot {
  background: var(--orange);
  box-shadow: 0 0 13px var(--orange);
}
.service-pill.is-error .status-dot {
  background: var(--red);
  box-shadow: 0 0 13px var(--red);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 6px 12px;
  color: var(--text);
  background: var(--white);
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.button:hover {
  border-color: rgba(240, 90, 26, 0.7);
  background: var(--white);
}
.button:active {
  transform: translateY(1px);
}
.button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
}
.button.is-active {
  border-color: rgba(240, 90, 26, 0.45);
  color: var(--accent-strong);
  background: rgba(240, 90, 26, 0.1);
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.button-primary {
  border-color: transparent;
  color: var(--white);
  background: linear-gradient(180deg, var(--flame) 0%, var(--accent) 100%);
  font-weight: 750;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 16px rgba(240, 90, 26, 0.18);
}
.button-primary:hover {
  border-color: transparent;
  background: linear-gradient(180deg, var(--flame-hot) 0%, var(--accent-hover) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 20px rgba(240, 90, 26, 0.24);
}
.button-ghost {
  background: transparent;
}
.button-quiet {
  border-color: transparent;
  color: var(--muted-strong);
  background: transparent;
}
.button-quiet:hover {
  border-color: var(--line);
  background: rgba(28, 28, 26, 0.04);
}
.button-small {
  min-height: 31px;
  padding: 4px 10px;
  font-size:var(--fs-meta);
}
.button-block {
  width: 100%;
}
.sidebar-project {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}
.sidebar-project-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  color: var(--cyan);
  background: rgba(240, 90, 26, 0.11);
  font-size: 18px;
}
.sidebar-project strong,
.sidebar-project span {
  display: block;
}
.sidebar-project strong {
  font-size:var(--fs-meta);
}
.sidebar-project div span {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.sidebar-project-state {
  align-self: start;
  margin-top: 2px;
  color: var(--green-text);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.1em;
  transition: color 0.15s ease;
}
.sidebar-project-state.is-ready {
  color: var(--green-text);
}
.sidebar-project-state.is-partial {
  color: var(--orange-text);
}
.sidebar-project-state.is-demo {
  color: var(--violet);
}
.sidebar-project-state.is-waiting {
  color: var(--muted);
}
.workflow-nav {
  display: grid;
  gap: 4px;
}
.module-item {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.module-item:hover {
  border-color: var(--line);
  color: var(--text);
  background: rgba(28, 28, 26, 0.03);
}
.module-item.is-active {
  border-color: rgba(240, 90, 26, 0.28);
  color: var(--cyan);
  background: rgba(240, 90, 26, 0.07);
}
.module-item.is-active .module-icon {
  border-color: rgba(240, 90, 26, 0.5);
  background: rgba(240, 90, 26, 0.1);
}
.module-item strong,
.module-item small {
  display: block;
}
.module-item strong {
  font-size:var(--fs-meta);
  font-weight: 600;
}
.module-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.sidebar-divider-compact {
  margin-top: 16px;
  margin-bottom: 16px;
}
.nav-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--muted-strong);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.nav-index {
  color: var(--muted);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.nav-item.is-active .nav-index {
  color: var(--accent-text);
}
.nav-item strong,
.nav-item small {
  display: block;
}
.nav-item strong {
  font-size:var(--fs-meta);
  font-weight: 650;
}
.nav-item small {
  margin-top: 2px;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
}
.sidebar-divider {
  height: 1px;
  margin: 24px 10px 20px;
  background: var(--line);
}
.side-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--muted);
  font-size:var(--fs-meta);
  text-decoration: none;
  border-radius: 8px;
}
.side-link span {
  color: var(--cyan);
}
.side-link:hover {
  color: var(--text);
  background: rgba(28, 28, 26, 0.03);
}
.sidebar-bottom {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
}
.safety-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(70, 160, 98, 0.2);
  border-radius: 11px;
  padding: 10px;
  background: rgba(70, 160, 98, 0.09);
}
.safety-mini > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--green-text);
  background: rgba(70, 160, 98, 0.12);
}
.safety-mini strong,
.safety-mini small {
  display: block;
}
.safety-mini strong {
  /* --green 是填充色，当文字压在淡绿底上实测 2.91:1；--green-text 才是为
     "绿底上的绿字"准备的语义令牌。 */
  color: var(--green-text);
  font-size:var(--fs-meta);
}
.safety-mini small {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.studio-link {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size:var(--fs-meta);
  text-decoration: none;
  text-align: center;
}
.studio-link:hover {
  color: var(--cyan);
}

.main-content {
  min-width: 0;
  padding: 32px 0 0;
}
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0 32px;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--violet);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  margin-bottom: 16px;
  font-size: clamp(35px, 4.6vw, 59px);
  line-height: 1.05;
  letter-spacing: -0.065em;
}
h1 em {
  color: var(--cyan);
  font-style: normal;
}
.target-dot.is-pending {
  background: var(--orange);
  box-shadow: 0 0 9px var(--orange);
}
.target-dot.is-ready {
  background: var(--green);
  box-shadow: 0 0 9px var(--green);
}

/* Guest banner: logged-out is a normal browsing mode (simulator playable),
   so the chrome is a calm informational strip — the red error styling only
   applies to the expanded login form where an actual failure matters. */
.auth-gate {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 12px;
  background: var(--panel-soft);
}
.auth-gate-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-gate-banner-title {
  color: var(--accent-text);
  font-size:var(--fs-meta);
}
.auth-gate-banner-copy {
  flex: 1 1 240px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.auth-gate-banner-link {
  color: var(--accent-text);
  font-size:var(--fs-meta);
  text-decoration: none;
}
.auth-gate-banner-link:hover { text-decoration: underline; }
.auth-gate:has([aria-expanded='true']) {
  border-color: rgba(220, 38, 38, 0.31);
  background: rgba(220, 38, 38, 0.055);
}
.auth-gate-panel {
  max-width: 380px;
  margin: 12px auto 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.auth-gate-title {
  display: block;
  color: var(--red-text);
  font-size:var(--fs-body);
}
.auth-gate-hint {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.6;
}
.auth-login-form {
  display: grid;
  gap: 10px;
  text-align: left;
}
.auth-login-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.auth-login-tab {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 4px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.auth-login-tab.is-active {
  border-color: rgba(240, 90, 26, 0.5);
  color: var(--text);
  background: rgba(240, 90, 26, 0.08);
}
.auth-login-field {
  display: grid;
  gap: 4px;
  font-size:var(--fs-meta);
  color: var(--muted);
}
.auth-login-field input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-raised);
  color: var(--text);
  font-size:var(--fs-body);
}
.auth-login-field input:focus {
  outline: none;
  border-color: rgba(240, 90, 26, 0.55);
}
.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.auth-login-error {
  margin: 0;
  color: var(--red-text);
  font-size:var(--fs-meta);
  line-height: 1.5;
}
.auth-gate-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.auth-gate-fallback {
  display: block;
  text-align: center;
  color: var(--muted);
  font-size:var(--fs-meta);
}

.context-strip {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr) minmax(145px, 0.86fr) minmax(180px, 1.15fr) minmax(150px, 0.9fr)
    minmax(130px, auto);
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  background: var(--panel-raised);
}
.workflow-node.is-active {
  border-color: rgba(240, 90, 26, 0.38);
  color: var(--cyan);
  background: rgba(240, 90, 26, 0.09);
}
.workflow-node.is-active .workflow-node-index {
  color: var(--cyan);
}
.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
/* G13：显式偏好标注——预选可感知、可一键改。 */
.profile-pref-note {
  display: block;
  margin-top: 2px;
  color: var(--accent-text);
  font-size:var(--fs-meta);
}
select,
input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--muted-strong);
  outline: none;
  background: var(--panel-soft);
}
select:focus,
textarea:focus,
input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(240, 90, 26, 0.1);
}
.context-health {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
  padding: 6px 8px;
  border-left: 1px solid var(--line);
}
.health-ring {
  color: var(--green-text);
  font-size: 14px;
  text-shadow: 0 0 10px rgba(70, 160, 98, 0.45);
}
.context-health span,
.context-health strong {
  display: block;
}
.context-health span {
  color: var(--muted);
  font-size:var(--fs-meta);
}
.context-health strong {
  margin-top: 2px;
  color: var(--green-text);
  font-size:var(--fs-meta);
}
.context-health.is-waiting .health-ring,
.context-health.is-waiting strong {
  color: var(--muted);
  text-shadow: none;
}
.context-health.is-blocked .health-ring,
.context-health.is-blocked strong {
  color: var(--orange-text);
  text-shadow: 0 0 10px rgba(217, 119, 6, 0.35);
}

/* Workspace command surface: a compact bridge between context, actions and the
   device agent. These classes are intentionally independent from app.js so the
   cards can gain live data progressively without changing the navigation API. */
.workspace-kicker {
  display: block;
  color: var(--accent-text);
  font-size:var(--fs-meta);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.workspace-card-heading .workspace-kicker {
  margin: 0;
}
.workspace-context-card .state-badge {
  min-height: 24px;
  padding: 2px 8px;
  font-size:var(--fs-meta);
}
.agent-entry-orb .status-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
}
.agent-status-label .status-dot {
  width: 5px;
  height: 5px;
  box-shadow: none;
}
.agent-entry-copy .button {
  min-height: 29px;
}

.view-section {
  min-width: 0;
  animation: view-in 0.22s ease both;
}
@keyframes view-in {
  from {
    opacity: 0.15;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.section-heading {
  display: flex;
  align-items: flex-end;
  /* 原本是 space-between：标题在左、"更新于 …"在右，1120px 列里中间空出 502px。
     说明性文字应该跟着标题读，只有"动作"才推到最右（见下方 :is(button) 规则）。 */
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.04em;
}
.section-heading-lean {
  margin-bottom: 12px;
}
.panel-heading-lean {
  margin-bottom: 12px;
}
.panel-heading-lean h2 {
  margin-top: 0;
  font-size: 17px;
}
.run-detail-block-title {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size:var(--fs-meta);
  font-weight: 750;
}
.next-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  overflow: hidden;
  min-height: 190px;
  margin-bottom: 16px;
  border: 1px solid rgba(240, 90, 26, 0.22);
  border-radius: 16px;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.96),
    rgba(251, 251, 249, 0.9) 60%,
    rgba(255, 255, 255, 0.85)
  );
  box-shadow: var(--shadow);
}
.next-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--accent-strong);
  background: rgba(240, 90, 26, 0.1);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.13em;
}
.next-card h3 {
  margin: 12px 0 6px;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.next-card p {
  max-width: 620px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size:var(--fs-meta);
}

.context-live {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.context-live-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.context-live-item span {
  display: block;
  color: var(--muted);
  font-size:var(--fs-meta);
  letter-spacing: 0.15em;
}
.context-live-item strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size:var(--fs-body);
  color: var(--text);
}

.project-workspace {
  margin-bottom: 16px;
  padding: 16px;
}
.project-workspace-heading { margin-bottom: 12px; }
.project-workspace-heading h2 { margin: 2px 0 0; font-size: 17px; }
.workspace-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.workspace-summary-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  color: var(--text);
  text-align: left;
  background: var(--panel-raised);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.workspace-summary-card:hover, .workspace-summary-card:focus-visible { border-color: rgba(240,90,26,.38); background: rgba(240,90,26,.035); transform: translateY(-1px); }
.workspace-summary-icon {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  color: var(--accent-strong); background: rgba(240,90,26,.10); font-size:var(--fs-body);
}
.workspace-summary-icon-violet { color: var(--violet); background: rgba(124,95,255,.11); }
.workspace-summary-icon-green { color: var(--green-text); background: rgba(70,160,98,.11); }
.workspace-summary-icon-orange { color: var(--orange-text); background: rgba(217,119,6,.11); }
.workspace-summary-card small, .workspace-summary-card strong, .workspace-summary-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-summary-card small { color: var(--muted); font-size:var(--fs-meta); }
.workspace-summary-card em { margin-top: 4px; color: var(--muted); font-size:var(--fs-meta); font-style: normal; }
.workspace-recent-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.workspace-recent-heading { display: flex; justify-content: flex-start; gap: 10px; margin-bottom: 6px; font-size:var(--fs-meta); }
.workspace-recent-heading span { color: var(--muted); font-size:var(--fs-meta); }
.workspace-recent-list { display: grid; gap: 2px; }
.workspace-recent-item { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 7px; padding: 6px 4px; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.workspace-recent-item:hover { background: rgba(240,90,26,.045); }
.workspace-recent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.workspace-recent-dot.state-success { background: var(--green); }
.workspace-recent-dot.state-partial { background: var(--orange); }
.workspace-recent-dot.state-error { background: var(--red); }
.workspace-recent-copy { min-width: 0; }
.workspace-recent-copy strong, .workspace-recent-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-recent-copy strong { font-size:var(--fs-meta); }
.workspace-recent-copy small { margin-top: 2px; color: var(--muted); font-size:var(--fs-meta); }

.deploy-timeline { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.deploy-timeline-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size:var(--fs-meta); }
.deploy-timeline-heading span { color: var(--muted); font-size:var(--fs-meta); }
.deploy-timeline ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.deploy-timeline-item { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; align-items: center; }
.deploy-timeline-marker { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size:var(--fs-meta); }
.deploy-timeline-item.is-done .deploy-timeline-marker { border-color: rgba(70,160,98,.35); color: var(--green-text); background: rgba(70,160,98,.1); }
.deploy-timeline-item.is-attention .deploy-timeline-marker { border-color: rgba(217,119,6,.35); color: var(--orange-text); background: rgba(217,119,6,.1); }
.deploy-timeline-item strong, .deploy-timeline-item small { display: block; }
.deploy-timeline-item strong { font-size:var(--fs-meta); }
.deploy-timeline-item small { margin-top: 2px; color: var(--muted); font-size:var(--fs-meta); }
.deploy-timeline-empty { color: var(--muted); font-size: var(--fs-body); }
.deploy-recovery-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid rgba(217,119,6,.26); border-radius: 9px; padding: 8px; color: var(--orange-text); background: rgba(217,119,6,.06); }
.deploy-recovery-icon { font-size: 16px; }
.deploy-recovery-note span:nth-child(2) { min-width: 0; flex: 1; }
.deploy-recovery-note strong, .deploy-recovery-note small { display: block; }
.deploy-recovery-note strong { font-size:var(--fs-meta); }
.deploy-recovery-note small { margin-top: 2px; color: var(--muted); font-size: var(--fs-body); line-height: 1.45; }

/* 模型晋级流：把 draft→validated→published→deployed 的证据链做成可见产品。 */
.promotion-flow { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.promotion-flow-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size:var(--fs-meta); }
.promotion-flow-heading span { color: var(--muted); font-size:var(--fs-meta); }
.promotion-stages { display: flex; gap: 6px; margin-bottom: 12px; }
.promotion-stage { flex: 1; display: flex; align-items: flex-start; gap: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 8px; }
.promotion-stage-index { display: grid; place-items: center; min-width: 22px; height: 20px; border-radius: 6px; color: var(--muted); background: rgba(240,90,26,.08); font-size:var(--fs-meta); font-weight: 600; }
.promotion-stage strong { display: block; font-size:var(--fs-meta); }
.promotion-stage small { display: block; margin-top: 2px; color: var(--muted); font-size:var(--fs-meta); line-height: 1.4; }
.promotion-stage.is-ready { border-color: rgba(70,160,98,.32); }
.promotion-stage.is-ready .promotion-stage-index { color: var(--green-text); background: rgba(70,160,98,.12); }
.promotion-stage.is-ready strong { color: var(--green-text); }
.promotion-stage.is-current { border-color: rgba(240,90,26,.3); background: rgba(240,90,26,.05); }
.promotion-stage.is-current .promotion-stage-index { color: var(--cyan); background: rgba(240,90,26,.13); }
.promotion-stage.is-blocked .promotion-stage-index { color: var(--orange-text); background: rgba(217,119,6,.1); }
.promotion-stage.is-locked { opacity: 0.55; }
.promotion-chain { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.promotion-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.promotion-item-marker { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size:var(--fs-meta); }
.promotion-item-main { min-width: 0; }
.promotion-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size:var(--fs-meta); }
.promotion-item-title strong { font-size:var(--fs-meta); }
.promotion-item-detail { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.promotion-item-detail dd { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: var(--muted); font-size:var(--fs-meta); }
.promotion-item-detail dd b { color: var(--text); font-weight: 600; }
.promotion-item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.promotion-item-actions .button { min-height: 26px; border-radius: 6px; padding: 4px 8px; font-size:var(--fs-meta); }
.promotion-item-evidence { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 6px; }
.promotion-item-evidence .promotion-item-detail { margin-top: 0; }
.promotion-item-error { margin-top: 6px; color: var(--red-text); font-size: var(--fs-body); line-height: 1.5; }
.promotion-chain-empty { color: var(--muted); font-size: var(--fs-body); line-height: 1.5; }
.promotion-item.is-artifact .promotion-item-marker { border-color: rgba(240,90,26,.3); color: var(--cyan); }
.promotion-item.is-evaluation.is-passed .promotion-item-marker,
.promotion-item.is-artifact.is-published .promotion-item-marker { border-color: rgba(70,160,98,.35); color: var(--green-text); background: rgba(70,160,98,.1); }
.promotion-item.is-evaluation.is-failed .promotion-item-marker,
.promotion-item.is-artifact.is-revoked .promotion-item-marker { border-color: rgba(220,38,38,.3); color: var(--red-text); background: rgba(220,38,38,.08); }
.promotion-item.is-deployment .promotion-item-marker { border-color: rgba(37,99,235,.3); color: var(--cyan); }
.promotion-lineage { display: grid; gap: 4px; margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.promotion-lineage-heading { margin: 0; color: var(--cyan); font-size:var(--fs-meta); }
.promotion-lineage-row { display: flex; align-items: center; gap: 6px; margin: 0; font-size:var(--fs-meta); }
.promotion-lineage-row span { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; color: var(--muted); font-size:var(--fs-meta); }
.promotion-lineage-row b { color: var(--text); font-weight: 600; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.status-card,
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.status-card-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.status-card-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size:var(--fs-meta);
}
.status-card p {
  margin: 6px 0 0 32px;
  overflow: hidden;
  color: var(--muted);
  font-size:var(--fs-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  font-size:var(--fs-meta);
}
.status-icon-blue {
  color: var(--cyan);
  background: rgba(240, 90, 26, 0.13);
}
.status-icon-violet {
  color: var(--violet);
  background: rgba(37, 99, 235, 0.13);
}
.status-icon-green {
  color: var(--green-text);
  background: rgba(70, 160, 98, 0.12);
}
.status-icon-orange {
  color: var(--orange-text);
  background: rgba(217, 119, 6, 0.12);
}
.overview-columns,
.sim-layout,
.train-layout,
.deploy-layout,
.records-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: 16px;
}
.records-single {
  grid-template-columns: 1fr;
}
.contract-guide-panel {
  min-height: 100%;
}
.contract-check-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contract-check-list li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-top: 1px solid rgba(28, 28, 26, 0.08);
  padding-top: 10px;
}
.contract-check-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.contract-check-list li > span {
  color: var(--cyan);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.contract-check-list strong,
.contract-check-list small {
  display: block;
}
.contract-check-list strong {
  font-size:var(--fs-meta);
}
.contract-check-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.5;
}
.panel-heading {
  display: flex;
  align-items: flex-start;
  /* 同上：这里原本空出 794px（面板标题 + 右侧徽标）。 */
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

/* 只有真正的"动作"才推到最右；说明性文字、徽标、时间戳都跟着标题。
   这是把上面五处 500–800px 空洞收掉的关键规则。 */
.section-heading > :last-child:is(button, a.button, .button),
.panel-heading > :last-child:is(button, a.button, .button),
/* 注意：不要把 .workspace-recent-heading 的「全部记录 →」推最右 —— 那会把它
   刚刚收掉的 768px 空洞再造出来。它是"看完这段的入口"，跟着标题读更顺。 */
.panel-heading h2 {
  margin-top: 4px;
  font-size: 19px;
}
.kit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.kit-status-ready {
  color: var(--green-text);
}
.kit-status-waiting {
  color: var(--muted);
}

.simulator-panel {
  padding-bottom: 12px;
}
.simulator-frame-wrap {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-soft);
}
.simulator-frame-wrap iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
  background: var(--panel-soft);
}
.simulator-product-gate {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: clamp(24px, 8vw, 78px);
  background:
    radial-gradient(circle at 78% 28%, rgba(220, 38, 38, 0.14), transparent 32%),
    radial-gradient(circle at 22% 72%, rgba(240, 90, 26, 0.13), transparent 34%), var(--paper);
}
.simulator-product-gate .gate-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(240, 90, 26, 0.5);
  border-radius: 12px;
  color: var(--cyan);
  font-size: 24px;
}
.simulator-product-gate strong {
  font-size: clamp(18px, 2vw, 24px);
}
.simulator-product-gate p {
  max-width: 430px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.7;
}
.simulator-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--green-text);
  font-size:var(--fs-meta);
}
.mono {
  color: var(--muted);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.live-label {
  min-height: 23px;
  padding: 2px 8px;
  border-color: rgba(70, 160, 98, 0.28);
  color: var(--green-text);
  font-size:var(--fs-meta);
  letter-spacing: 0.08em;
}
.live-label.is-waiting {
  border-color: rgba(217, 119, 6, 0.28);
  color: var(--orange-text);
}
.live-label.is-waiting .status-dot {
  background: var(--orange);
  box-shadow: 0 0 13px var(--orange);
}
.live-label.is-ready {
  border-color: rgba(70, 160, 98, 0.28);
  color: var(--green-text);
}
.guide-panel h2 {
  margin: 6px 0 20px;
}
.guide-panel .button-block {
  margin-top: 20px;
}
.model-summary,
.board-summary {
  min-height: 75px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: rgba(28, 28, 26, 0.03);
}
.summary-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.summary-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.summary-version {
  color: var(--cyan);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.summary-description {
  margin: 6px 0 0;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.55;
}
.policy-bundle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
.bundle-label {
  color: var(--muted);
  font-size:var(--fs-meta);
}
.policy-chip {
  border: 1px solid rgba(240, 90, 26, 0.2);
  border-radius: 999px;
  padding: 4px 6px;
  color: var(--cyan);
  background: rgba(240, 90, 26, 0.06);
  font-size:var(--fs-meta);
}
.artifact-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.artifact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(28, 28, 26, 0.07);
  padding: 6px 0;
}
.artifact-row:last-child {
  border-bottom: 0;
}
.artifact-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size:var(--fs-meta);
}
.artifact-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.compatibility-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
/* 2026-09-17 层次优化：逐板平铺的 .compatibility-row 收敛为
   「可上板 chips + 未兼容原因折叠」。旧 row/state 规则同步移除，
   新选择器全部首次定义（跨层预算 306/306 不动）。 */
.compatibility-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  border-radius: 7px;
  padding: 6px 8px;
  background: rgba(28, 28, 26, 0.02);
}
.compatibility-summary-label {
  color: var(--green-text);
  font-size:var(--fs-meta);
  font-weight: 600;
}
.compatibility-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--green-text);
  border-radius: 999px;
  color: var(--green-text);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.compatibility-note {
  color: var(--muted);
  font-size:var(--fs-meta);
}
.compatibility-detail summary {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.compatibility-reasons {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.compatibility-reasons li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 7px;
  color: var(--muted);
  font-size:var(--fs-meta);
  background: rgba(28, 28, 26, 0.02);
}
.compatibility-platform {
  color: var(--muted-strong);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.model-actions,
.board-actions,
.editor-actions,
.robogo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.training-controls {
  margin-top: 12px;
  border-top: 1px solid rgba(28, 28, 26, 0.09);
  padding-top: 10px;
}
.training-controls summary {
  cursor: pointer;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
}
.sidebar-mobile-tools { display: none; }
@media (max-width: 720px) { .sidebar-mobile-tools { display: flex; gap: 8px; flex-wrap: wrap; } }
.originman-workshop { margin-block: 12px; min-width: 0; }
.originman-workshop summary { cursor: pointer; }
.originman-workshop select { max-width: 100%; }
.originman-comparison-video { width: 100%; height: auto; }
#originman-model-preview { max-height: 520px; object-fit: contain; }
.originman-studio { min-width: 0; }
.originman-studio-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.originman-studio-heading h3 { margin: 0; font-size: var(--fs-section-title); }
.originman-studio-heading p { margin: 6px 0 0; }
.originman-studio-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.originman-scene-column { min-width: 0; }
.originman-scene { position: relative; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); }
.originman-scene-preview, #originman-sim-canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.originman-scene-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; margin: 0; text-align: center; color: var(--muted-strong); }
.originman-scene-caption { position: absolute; inset: 12px auto auto 12px; width: fit-content; max-width: calc(48% - 24px); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: var(--fs-meta); pointer-events: none; }
.originman-scene-start { position: absolute; left: 16px; bottom: 16px; }
.originman-scene-scale { display: block; margin-top: 8px; color: var(--muted-strong); font-size: var(--fs-meta); }
.originman-scene-transport { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.originman-scene-inspector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.originman-scene-inspector select { width: 100%; min-width: 0; }
.originman-scene-inspector p { overflow-wrap: anywhere; }
.originman-inspector-section > .button { width: 100%; }
.originman-inspector-section { display: grid; min-width: 0; gap: 8px; }
.originman-inspector-section p, .originman-inspector-section .model-actions { margin: 0; }
@media (max-width: 1080px) { .originman-scene-inspector { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .originman-studio-heading { align-items: flex-start; flex-direction: column; } .originman-scene { height: auto; aspect-ratio: 4 / 3; } }
.originman-lab { display: grid; gap: 12px; padding: 16px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.originman-lab h3, .originman-lab p, .originman-lab .model-actions { margin: 0; }
.originman-lab-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.originman-lab-overlay { position: absolute; top: 12px; right: 12px; display: grid; gap: 4px; max-width: 52%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: var(--fs-meta); pointer-events: none; }
.originman-lab-overlay strong { color: var(--accent-text); }
.originman-lab-chart { width: 100%; max-height: 200px; overflow: visible; }
.originman-chart-grid { stroke: var(--line); stroke-width: 1; }
.originman-chart-label { fill: var(--muted-strong); font-size: var(--fs-meta); }
.originman-chart-baseline { fill: none; stroke: var(--muted-strong); stroke-width: 2; }
.originman-chart-policy { fill: none; stroke: var(--accent); stroke-width: 2; }
.originman-chart-force { fill: var(--accent-ring); }
.originman-chart-cursor { stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 4 3; }
.originman-lab-replay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.originman-lab-replay select, .originman-lab .model-actions select { width: auto; max-width: 100%; }
#originman-live-sim.is-presenting { position: fixed; inset: 0; z-index: var(--z-tour); box-sizing: border-box; margin: 0; }
#originman-live-sim:is(:fullscreen, .is-presenting) { width: 100%; height: 100%; overflow-y: auto; padding: 16px; background: var(--bg); }
#originman-live-sim:is(:fullscreen, .is-presenting) .originman-studio-grid { display: flex; flex-wrap: wrap; align-items: flex-start; }
#originman-live-sim:is(:fullscreen, .is-presenting) .originman-studio-grid > :is(.originman-scene-column, .originman-lab) { flex: 1 1 460px; min-width: 0; }
#originman-live-sim:is(:fullscreen, .is-presenting) .originman-scene-inspector { flex: 1 1 100%; }
@media (min-width: 1080px) { #originman-live-sim:is(:fullscreen, .is-presenting) .originman-scene-column { position: sticky; top: 0; align-self: flex-start; } }
.originman-case-table { max-width: 100%; overflow-x: auto; }
.originman-case-table table { width: 100%; border-collapse: collapse; }
.originman-case-table td, .originman-case-table th { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; }
#originman-handoff table { table-layout: auto; }
#originman-handoff td.is-diff { color: var(--accent-text); font-weight: 700; background: var(--accent-soft); }
#originman-confirm-label { display: flex; align-items: center; gap: 10px; padding-block: 16px; cursor: pointer; }
#originman-confirm-parameters { flex: 0 0 auto; width: auto; margin: 0; padding: 0; accent-color: var(--accent); }
.training-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
}
.training-grid .field-label {
  margin: 0;
}
/* 2026-09-17 层次优化：训练参数展开后的 6 个字段按「训练设置 / 续训」
   分成两个语义组。组标题给了展开区一个第二层级，展开瞬间的密度
   陡增被组界打断。全部为新选择器，不与既有层交叉。 */
.training-field-group {
  display: grid;
  grid-template-columns: subgrid;
  gap: 6px 8px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(28, 28, 26, 0.07);
  background: rgba(28, 28, 26, 0.015);
}
.training-field-group + .training-field-group {
  margin-top: 10px;
}
.training-group-title {
  grid-column: 1 / -1;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.training-grid select,
.training-grid input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 8px 8px;
  color: var(--muted-strong);
  outline: none;
  background: var(--panel-soft);
  font-size:var(--fs-meta);
}
.small-note {
  margin: 12px 0 0;
  /* 曾经是硬编码 #70819c：两套主题共用同一个灰，暗色下压在 #101b24 面板上
     实测 4.43:1（AA 需 4.5），而且它永远不跟随主题。改用语义令牌。 */
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.55;
}
.backend-choice {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.backend-choice-card {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(28, 28, 26, 0.02);
}
.backend-choice-card.is-primary {
  border-color: rgba(240, 90, 26, 0.32);
  background: rgba(47, 102, 141, 0.17);
}
.backend-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--orange-text);
  background: rgba(217, 119, 6, 0.12);
}
.backend-choice-card strong,
.backend-choice-card small {
  display: block;
}
.backend-choice-card strong {
  font-size:var(--fs-meta);
}
.backend-choice-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.choice-tag {
  margin-left: auto;
  color: var(--cyan);
  font-size:var(--fs-meta);
}
.robogo-numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.robogo-numbers div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(28, 28, 26, 0.02);
}
.robogo-numbers span {
  display: block;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.robogo-numbers strong {
  display: block;
  margin-top: 4px;
  color: var(--violet);
  font:
    700 22px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--cyan);
  font-size:var(--fs-meta);
  text-decoration: none;
}
.text-link:hover {
  text-decoration: underline;
}

.deploy-safe {
  border: 1px solid rgba(70, 160, 98, 0.25);
  border-radius: 999px;
  padding: 4px 6px;
  color: var(--green-text);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.09em;
}
.board-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.board-summary-row strong {
  font-size:var(--fs-body);
}
.board-chip {
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.board-chip.is-ready {
  color: var(--green-text);
}
.board-chip.is-detected {
  color: var(--cyan);
}
.board-chip.is-failed {
  color: var(--red-text);
}
.board-chip.is-waiting {
  color: var(--orange-text);
}
.board-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-body);
}
.release-steps {
  display: grid;
  gap: 0;
  margin-top: 16px;
}
.release-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding: 10px 0 16px;
}
.release-step:not(:last-child)::after {
  position: absolute;
  top: 33px;
  bottom: 0;
  left: 11px;
  border-left: 1px dashed var(--line-strong);
  content: '';
}
.release-step > span {
  display: grid;
  place-items: center;
  z-index: 1;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(240, 90, 26, 0.1);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.release-step.is-ready > span {
  color: var(--green-text);
  background: rgba(70, 160, 98, 0.12);
}
.release-step.is-ready strong {
  color: var(--green-text);
}
.release-step.is-current {
  border-radius: 8px;
  padding-right: 8px;
  padding-left: 8px;
  background: rgba(240, 90, 26, 0.06);
}
.release-step.is-current > span {
  color: var(--cyan);
  background: rgba(240, 90, 26, 0.13);
}
.release-step.is-current strong {
  color: var(--cyan);
}
.release-step.is-blocked > span {
  color: var(--orange-text);
  background: rgba(217, 119, 6, 0.1);
}
.release-step.is-blocked strong {
  color: var(--orange-text);
}
.release-step.is-failed > span {
  color: var(--red-text);
  background: rgba(220, 38, 38, 0.1);
}
.release-step.is-failed strong {
  color: var(--red-text);
}
.release-step.is-locked {
  opacity: 0.58;
}
.release-step strong,
.release-step small {
  display: block;
}
.release-step strong {
  font-size:var(--fs-meta);
}
.release-step small {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
}

.evaluation-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(240, 90, 26, 0.2);
  border-radius: 13px;
  padding: 12px 16px;
  background: rgba(240, 90, 26, 0.055);
}
.evaluation-status-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(217, 119, 6, 0.38);
  border-radius: 50%;
  color: var(--orange-text);
  font-size: 17px;
}
.evaluation-status-mark.is-success {
  border-color: rgba(70, 160, 98, 0.45);
  color: var(--green-text);
  background: rgba(70, 160, 98, 0.08);
}
.evaluation-status-mark.is-demo {
  border-color: rgba(37, 99, 235, 0.52);
  color: var(--violet);
  background: rgba(37, 99, 235, 0.1);
}
.evaluation-status-mark.is-error {
  border-color: rgba(220, 38, 38, 0.45);
  color: var(--red-text);
  background: rgba(220, 38, 38, 0.08);
}
.evaluation-banner strong {
  display: block;
  font-size:var(--fs-meta);
}
.evaluation-banner p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.evaluation-quality {
  margin-top: 6px;
  font-size:var(--fs-meta);
}
.evaluation-banner .button {
  margin-left: auto;
  flex: 0 0 auto;
}
.evaluation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 16px;
}
.telemetry-panel {
  margin-top: 16px;
}
/* 2026-09-17 层次优化：评测页中段（最近实验对比 + 遥测回放与证据）
   原是两个全宽面板首尾堆叠，页面 1775px 高、五个同级标题一路排下来，
   节奏从顶部的双栏"分区"退化成"清单"。现在这两个证据面板并列成
   双栏（回放播放器全宽内容仍可各自内部滚动自然换行），窄屏回退单列。
   新选择器；两个面板旧的 margin-top 由 wrapper 统一接管节奏。 */
.evaluation-evidence {
  display: grid;
  /* auto-fit 而非媒体查询：一条声明同时表达宽屏双栏与窄屏单列，
     避免为同一选择器写第二处定义（跨层选择器预算 306/306 已满）。 */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.evaluation-evidence > .panel {
  margin-top: 0;
  min-width: 0;
}
/* 2026-09-17 空态优先：没有任何 Run 和遥测时，data-empty="true" 收起
   全部空数据面板（双栏 grid、六个面板的空文案墙），只显示一张
   三步引导卡。有数据即恢复正常仪表盘。 */
[data-view-section='evaluate'][data-empty='true'] .evaluation-grid,
[data-view-section='evaluate'][data-empty='true'] .evaluation-evidence {
  display: none;
}
.evaluation-empty-card {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  max-width: 640px;
}
.evaluation-empty-head {
  display: grid;
  gap: 4px;
}
.evaluation-empty-head strong {
  font-size: 16px;
}
.evaluation-empty-head span {
  color: var(--muted);
  font-size:var(--fs-body);
}
.evaluation-empty-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.evaluation-empty-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--panel-soft);
}
.evaluation-empty-steps strong {
  display: block;
  font-size:var(--fs-body);
}
.evaluation-empty-steps small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.5;
}
.evaluation-empty-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--accent-text, var(--muted-strong));
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  background: var(--panel);
  border: 1px solid var(--line-strong);
}
.evaluation-empty-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.telemetry-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: -3px 0 12px;
}
.state-recording-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.state-recording-choice { flex: 1 1 280px; min-width: 0; }
.state-recording-choice select { width: 100%; }
.state-recording-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.state-recording-transport input { flex: 1 1 240px; min-width: 0; }
.telemetry-intro p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.6;
}
.telemetry-file-button {
  flex: 0 0 auto;
}
.telemetry-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.telemetry-stat {
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px;
  background: rgba(28, 28, 26, 0.02);
}
.telemetry-stat span,
.telemetry-stat strong {
  display: block;
}
.telemetry-stat span {
  color: var(--muted);
  font-size:var(--fs-meta);
}
.telemetry-stat strong {
  margin-top: 4px;
  color: var(--muted-strong);
  font:
    700 15px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.telemetry-stat strong.is-warn {
  color: var(--orange-text);
}
.telemetry-timeline {
  margin-top: 12px;
}
.telemetry-timeline-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(28, 28, 26, 0.06);
}
.telemetry-timeline-track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
}
.telemetry-timeline-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.telemetry-visuals {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.telemetry-chart-block {
  display: grid;
  gap: 6px;
}
.telemetry-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.telemetry-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: -1px;
}
.legend-reward {
  background: var(--cyan);
}
.legend-fall {
  background: var(--red);
}
.legend-done {
  background: var(--green);
}
.telemetry-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}
.telemetry-scrub {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}
.telemetry-scrub-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.telemetry-scrub-heading strong { font-size:var(--fs-meta); }
.telemetry-scrub-heading span {
  font-family: var(--mono, ui-monospace, monospace);
  font-size:var(--fs-mono-micro);
  color: var(--muted);
}
.telemetry-scrub input[type='range'] { width: 100%; }
.telemetry-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.telemetry-chart-note {
  margin: 0;
}
.telemetry-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.heatmap-scale {
  display: inline-block;
  width: 90px;
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--royal),
    var(--paper-warm),
    var(--red)
  );
}
@media (max-width: 720px) {
  .telemetry-heatmap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.telemetry-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.telemetry-actions .small-note {
  margin: 0;
}
.metric-grid {
  display: grid;
  gap: 8px;
}
.metric {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  background: rgba(28, 28, 26, 0.02);
}
.metric strong,
.metric span {
  display: block;
}
.metric strong {
  color: var(--muted-strong);
  font:
    700 21px/1.1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.metric span {
  margin-top: 6px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.metric-grid-large {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2px;
}
.metric-grid-large .metric {
  min-height: 82px;
}
.metric-grid-large .metric strong {
  font-size: 21px;
}
.metric-contract strong {
  color: var(--green-text);
}
.comparison-chart {
  display: grid;
  gap: 16px;
  margin: 24px 0 20px;
}
.originbot-compare-panel {
  grid-column: 2;
}
.originbot-compare-body {
  display: grid;
  gap: 10px;
}
.originbot-compare-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.originbot-compare-metrics > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(28, 28, 26, 0.02);
}
.originbot-compare-metrics span {
  font-size:var(--fs-meta);
  color: var(--muted);
}
.originbot-compare-metrics strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.originbot-compare-panel[data-live='off'] .originbot-compare-metrics strong {
  color: var(--muted);
  font-size:var(--fs-body);
  font-weight: 500;
}
.chart-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.chart-row b {
  color: var(--muted-strong);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  text-align: right;
}
.chart-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(28, 28, 26, 0.05);
}
.chart-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 0.35s ease;
}
.chart-bar-sim {
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}
.chart-bar-real {
  background: linear-gradient(90deg, var(--violet), var(--pink));
}
.compare-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.compare-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.compare-dot-sim {
  margin-left: 2px;
  background: var(--cyan);
}
/* 两个图例点以前只差颜色，7px 下几乎分不出来。改成"实心圆 vs 空心环"，
   形状本身就能区分（颜色不再是唯一线索）。 */
.compare-dot-real {
  margin-left: 10px;
  border: 2px solid var(--violet);
  background: transparent;
}
.evaluation-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px;
  background: rgba(28, 28, 26, 0.02);
}
.next-line {
  width: 3px;
  height: 35px;
  border-radius: 999px;
  background: var(--orange);
}
.evaluation-next strong,
.evaluation-next small {
  display: block;
}
.evaluation-next strong {
  font-size:var(--fs-meta);
}
.evaluation-next small {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.evaluation-next .button {
  margin-left: auto;
  flex: 0 0 auto;
}

.manifest-panel textarea {
  display: block;
  width: 100%;
  min-height: 280px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 12px;
  color: var(--muted-strong);
  outline: none;
  background: var(--panel-soft);
  font:
    10.5px/1.55 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}
.file-input-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.file-input-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.validation-result {
  min-height: 34px;
  margin-top: 10px;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--muted);
  background: rgba(28, 28, 26, 0.03);
  font-size:var(--fs-meta);
}
.validation-result.is-ok {
  color: var(--green-text);
  background: rgba(70, 160, 98, 0.09);
}
.validation-result.is-error {
  color: var(--red-text);
  background: rgba(220, 38, 38, 0.09);
}
.history-panel {
  min-height: 100%;
}
.history-list {
  display: grid;
  gap: 2px;
}
.history-row {
  display: grid;
  grid-template-columns: 93px minmax(100px, 0.65fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(28, 28, 26, 0.08);
  padding: 10px 0;
}
.history-row:first-child {
  border-top: 0;
}
.history-time,
.history-kind {
  color: var(--muted);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.history-kind {
  color: var(--cyan);
}
.history-summary {
  overflow: hidden;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-status {
  justify-self: end;
  border-radius: 999px;
  padding: 2px 8px;
  font-size:var(--fs-meta);
}
.history-status-ready,
.history-status-completed {
  color: var(--green-text);
  background: rgba(70, 160, 98, 0.1);
}
.history-status-demo {
  color: var(--violet);
  background: rgba(37, 99, 235, 0.12);
}
.history-status-blocked,
.history-status-queued,
.history-status-planned {
  color: var(--orange-text);
  background: rgba(217, 119, 6, 0.1);
}
.history-status-failed {
  color: var(--red-text);
  background: rgba(220, 38, 38, 0.1);
}

.run-progress-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(240, 90, 26, 0.2);
  border-radius: 10px;
  padding: 12px;
  background: rgba(240, 90, 26, 0.045);
}
.run-progress-heading,
.run-dialog-heading,
.records-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.run-progress-heading strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size:var(--fs-meta);
}
.run-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.run-progress-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px;
  background: rgba(28, 28, 26, 0.02);
}
/* Physics-backend chip: the engine's own honest claim of which physics
   trained the policy — anchored with the stronger border. */
.run-progress-meta .physics-chip {
  border-color: var(--line-strong, var(--line));
}
/* History rows carry the compact physics label inline with the summary
   so runs from different engines are told apart without opening details. */
.history-physics {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size:var(--fs-mono-micro);
  white-space: nowrap;
  vertical-align: 1px;
}
.run-progress-track {
  position: relative;
  height: 22px;
  margin: 10px 0 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  overflow: hidden;
}
.run-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 0.4s ease;
}
.run-progress-track.is-indeterminate i {
  width: 34%;
  animation: run-progress-sweep 1.6s ease-in-out infinite;
}
@keyframes run-progress-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.run-progress-track-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .run-progress-track.is-indeterminate i { animation: none; width: 100%; opacity: 0.4; }
}
.run-progress-warning {
  border-left: 2px solid var(--orange);
  padding-left: 8px;
  color: var(--orange-text);
  font-size:var(--fs-meta);
}
.records-toolbar {
  align-items: flex-end;
  margin: 4px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.record-tabs {
  display: flex;
  gap: 4px;
}
.record-tab {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 4px 8px;
  color: var(--muted);
  background: transparent;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.record-tab:hover,
.record-tab.is-active {
  border-color: rgba(240, 90, 26, 0.27);
  color: var(--cyan);
  background: rgba(240, 90, 26, 0.08);
}
#record-search {
  max-width: 210px;
  padding: 6px 8px;
  font-size:var(--fs-meta);
}
.history-row-button {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.history-row-button:hover {
  background: rgba(240, 90, 26, 0.045);
}
.history-row-button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}
.run-dialog {
  width: min(620px, calc(100vw - 30px));
  max-height: min(720px, calc(100vh - 30px));
  overflow: auto;
  border: 1px solid rgba(240, 90, 26, 0.3);
  border-radius: 14px;
  padding: 16px;
  color: var(--text);
  background: var(--panel-raised);
  box-shadow: var(--shadow);
}
.run-dialog::backdrop {
  background: rgba(28, 28, 26, 0.32);
  backdrop-filter: blur(3px);
}
.originman-experiment-list .originman-experiment-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  margin-top: 12px;
  border: 1px solid var(--ui-border-soft);
  border-radius: 12px;
  background: var(--panel-raised);
}
.originman-experiment-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.originman-experiment-card h3,
.originman-experiment-card p,
.originman-experiment-comparison {
  margin: 0;
}
.originman-experiment-comparison {
  padding-inline-start: 20px;
}
.originman-experiment-video {
  width: 100%;
  display: block;
  margin-block: 12px;
}
.confirm-run-note {
  margin: 0;
  font-size:var(--fs-meta);
  line-height: 1.7;
  color: var(--text);
}
.confirm-run-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.run-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: anywhere;
  gap: 12px;
  margin-top: 16px;
}
.run-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.run-detail-field {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: rgba(28, 28, 26, 0.02);
}
.run-detail-field span,
.run-detail-field strong {
  display: block;
}
.run-detail-field span {
  color: var(--muted);
  font-size:var(--fs-meta);
}
.run-detail-field strong {
  margin-top: 4px;
  color: var(--text);
  font-size:var(--fs-meta);
  word-break: break-word;
}
.run-detail-summary {
  border-left: 2px solid var(--cyan);
  padding: 8px 10px;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  line-height: 1.55;
  background: rgba(240, 90, 26, 0.045);
}
.run-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.run-metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: rgba(28, 28, 26, 0.02);
}
.run-metric-card span,
.run-metric-card strong {
  display: block;
}
.run-metric-card span {
  color: var(--muted);
  font-size:var(--fs-meta);
}
.run-metric-card strong {
  margin-top: 4px;
  color: var(--muted-strong);
  font:
    700 14px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.run-metric-card.is-ok strong {
  color: var(--green-text);
}
.run-metric-card.is-warn strong {
  color: var(--orange-text);
}
.run-metric-card.is-error strong {
  color: var(--red-text);
}
.run-metrics-raw {
  margin: 0;
}
.run-metrics-raw summary {
  color: var(--muted);
  font-size: var(--fs-meta);
  cursor: pointer;
  user-select: none;
}
.run-metrics-raw pre {
  margin-top: 6px;
}
/* ---- 重训建议卡（环 A 飞轮的只读分析；面板不发起训练） ---- */
.run-retrain-card {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(28, 28, 26, 0.02);
  display: grid;
  gap: 8px;
}
/* ---- 训练画面（引擎快照流） ---- */
.run-training-snapshot {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.run-training-snapshot img {
  display: block;
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* ---- 策略演示视频卡（引擎渲染的策略 rollout 片段） ---- */
.run-demo-video {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(28, 28, 26, 0.02);
  display: grid;
  gap: 8px;
}
.run-demo-video-player {
  display: block;
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(28, 28, 26, 0.04);
}
.run-demo-upload-label {
  cursor: pointer;
}
/* ---- 上板会话卡（板端策略运行的结构化证据回放） ---- */
.run-board-sessions {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(28, 28, 26, 0.02);
  display: grid;
  gap: 8px;
}
.run-board-session {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-elev, var(--white));
  display: grid;
  gap: 6px;
}
.run-board-session.is-review-only {
  border-style: dashed;
}
.run-board-session-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.run-board-session-attest {
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size:var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.run-board-session-attest.is-attested {
  color: var(--attest-green);
}
.run-board-session-attest.is-mock {
  color: var(--attest-amber);
}
.run-board-session-model {
  margin: 0;
  font-size:var(--fs-meta);
  color: var(--muted);
  font-family: var(--mono, monospace);
  word-break: break-all;
}
.run-retrain-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.run-retrain-hint,
.run-retrain-advisory {
  margin: 0;
  font-size:var(--fs-meta);
  color: var(--muted);
}
.run-retrain-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.run-retrain-verdict {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size:var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.run-retrain-verdict.is-retrain-recommended {
  color: var(--orange-text);
  background: rgba(234, 124, 58, 0.12);
}
.run-retrain-verdict.is-healthy {
  color: var(--green-text);
  background: rgba(46, 160, 106, 0.12);
}
.run-retrain-verdict.is-insufficient-evidence {
  color: var(--muted-strong);
  background: rgba(28, 28, 26, 0.05);
}
.run-retrain-meta {
  font-size:var(--fs-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.run-retrain-summary {
  margin: 0;
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.run-retrain-signals {
  display: grid;
  gap: 6px;
}
.run-retrain-signal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size:var(--fs-meta);
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.run-retrain-signal strong {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  color: var(--muted-strong);
}
.run-retrain-signal small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.run-retrain-signal-flag {
  grid-column: 1 / -1;
  color: var(--orange-text);
  font-weight: 600;
}
.run-retrain-signal.is-breached {
  border-style: solid;
  border-color: rgba(234, 124, 58, 0.55);
  background: rgba(234, 124, 58, 0.06);
}
.run-retrain-signal.is-breached strong {
  color: var(--orange-text);
}
.run-retrain-suggested {
  display: grid;
  gap: 6px;
}
.run-retrain-readonly-note {
  margin: 0;
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
/* 可调整的重训档位（Bakusevych #29）：默认按建议预选，提交前可改。 */
.run-retrain-profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.run-retrain-profile-label {
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.run-retrain-profile-select {
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: inherit;
  font-size:var(--fs-meta);
}
.run-retrain-profile-note {
  font-size:var(--fs-meta);
  color: var(--muted);
}
.run-retrain-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.run-retrain-submit-status {
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.run-retrain-submit-status:empty {
  display: none;
}
.run-retrain-error {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(196, 68, 68, 0.45);
  border-radius: 8px;
  font-size:var(--fs-meta);
}
.run-retrain-error.is-not-found {
  border-color: var(--line);
}
.run-retrain-error p {
  margin: 0;
  color: var(--muted-strong);
}
.run-retrain-error .button {
  justify-self: start;
}
.run-retrain-note {
  margin: 0;
  font-size:var(--fs-meta);
  color: var(--muted);
}
.run-retrain-card .button {
  justify-self: start;
}
/* ---- 细粒度反馈控件（Amershi G15）：准确/不准确 + 可选备注 ---- */
.feedback-control {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}
.feedback-control-title {
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.feedback-control-context {
  font-size:var(--fs-meta);
  color: var(--muted);
}
.feedback-control-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.feedback-control-note {
  flex: 1 1 100%;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size:var(--fs-meta);
  resize: vertical;
}
.feedback-control-note:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.feedback-control-status {
  flex: 1 1 100%;
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.feedback-control-status:empty {
  display: none;
}
.feedback-control.is-submitted {
  border-style: solid;
  border-color: rgba(46, 160, 106, 0.45);
  background: rgba(46, 160, 106, 0.06);
}
.feedback-control.is-submitted .feedback-control-note {
  display: none;
}
.feedback-vote-accurate {
  color: var(--green-text);
}
.feedback-vote-inaccurate {
  color: var(--orange-text);
}
.run-record-feedback,
.run-retrain-feedback {
  margin-top: 12px;
}
.agent-message-feedback {
  margin-top: 6px;
}
/* 聊天反馈卡：与所在面板 surface 走同一主题（此处是 token 化面板的
   panel-soft）。历史值是深色孤岛时期的字面色：浅色主题下
   #8df0bf/#ffc05a 压白底 1.4-1.6:1、#c7cdf4 压白底同样不可读。 */
.agent-message-feedback .feedback-control {
  padding: 8px 10px;
  border-radius: 8px;
  border-color: var(--line);
  background: var(--panel-soft);
}
.agent-message-feedback .feedback-control-title,
.agent-message-feedback .feedback-control-status {
  color: var(--muted-strong);
}
.agent-message-feedback .feedback-control-context {
  color: var(--muted);
}
.agent-message-feedback .feedback-control-note {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}
.agent-message-feedback .feedback-vote-accurate {
  color: var(--green-text);
}
.agent-message-feedback .feedback-vote-inaccurate {
  color: var(--orange-text);
}
.agent-message-feedback .feedback-control.is-submitted {
  border-color: var(--green-border);
  background: var(--green-soft);
}
/* 反馈效果汇总（Bakusevych #38 / G17）：让用户看到自己的反馈去向。 */
.feedback-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.feedback-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.feedback-summary-title {
  font-size:var(--fs-body);
}
.feedback-summary-share {
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.feedback-summary-share.is-positive { color: var(--green-text, var(--mint)); }
.feedback-summary-share.is-negative { color: var(--orange-text, var(--coral)); }
.feedback-summary-rows {
  display: grid;
  gap: 8px;
}
.feedback-summary-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 10px;
}
.feedback-summary-row-label {
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.feedback-summary-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-soft);
  overflow: hidden;
}
.feedback-summary-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, var(--sky-soft));
}
.feedback-summary-row-value {
  font-size:var(--fs-meta);
  color: var(--muted);
  white-space: nowrap;
}
.feedback-summary-note,
.feedback-summary-empty,
.feedback-summary-error {
  margin: 0;
  font-size:var(--fs-meta);
  color: var(--muted);
}
@media (max-width: 720px) {
  .run-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* When a product has no browser simulator, keep the gated empty state
   proportionate to its message. The live iframe keeps the taller viewport,
   while an unavailable adapter should not leave a half-empty canvas. */
.simulator-frame-wrap:has(.simulator-product-gate:not([hidden])) {
  min-height: 360px;
}
.simulator-frame-wrap:has(.simulator-product-gate:not([hidden])) .simulator-product-gate {
  padding: 40px clamp(24px, 7vw, 72px);
}
.simulator-frame-wrap iframe[hidden] {
  display: none !important;
  width: 0;
  height: 0;
}

/* A disconnected station is a status surface, not an error wall. Keep the
   notice readable while leaving the telemetry cards available for inspection. */
.station-notice {
  line-height: 1.55;
}

/* Agent conversation drawer: keep the workflow canvas clear and make the
   assistant available from every view through a movable floating launcher. */
.agent-floating-toggle {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: var(--z-agent-fab);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 121, 24, .64);
  border-radius: 999px;
  color: var(--cream);
  background: linear-gradient(135deg, var(--flame-bright), var(--float-orange));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42), 0 0 0 5px rgba(255, 121, 24, .1);
  cursor: grab;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.agent-floating-toggle:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 121, 24, .14); }
.agent-floating-toggle:active { cursor: grabbing; transform: scale(.97); }
/* 桌面端侧栏常驻"Agent 对话"入口；悬浮球只在侧栏收成抽屉的宽度以下出现，
   避免同一屏两个 Agent 入口。 */
@media (min-width: 1081px) {
  .agent-floating-toggle { display: none; }
}
.agent-floating-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--flame-bright); background: var(--navy-deep); font-size: 17px; }
.agent-floating-label { font-size:var(--fs-meta); font-weight: 760; letter-spacing: .02em; }
.agent-floating-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-pale); box-shadow: 0 0 0 4px rgba(154, 242, 196, .14); }
.agent-chat-backdrop { position: fixed; inset: 0; z-index: var(--z-chat-backdrop); background: rgba(2, 7, 14, .58); backdrop-filter: blur(3px); }
.agent-chat-panel {
  position: fixed;
  right: 26px;
  bottom: 88px;
  z-index: var(--z-chat-panel);
  width: min(760px, calc(100vw - 52px));
  max-height: min(760px, calc(100vh - 124px));
  margin: 0;
  padding: 20px;
  overflow: auto;
  border-color: rgba(255, 121, 24, .42);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(18, 28, 42, .98), rgba(9, 17, 27, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .035);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .2s ease, visibility .2s;
}
body.agent-chat-open .agent-chat-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.agent-chat-heading-actions { display: inline-flex; align-items: center; gap: 12px; }
/* 关闭钮颜色走令牌：浅色面板上旧字面值 #c9d2e8-on-white 只有 1.5:1。 */
.agent-chat-close { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-strong); background: var(--panel-soft); font-size: 21px; line-height: 1; cursor: pointer; }
.agent-chat-close:hover { color: var(--accent-text); border-color: rgba(255, 121, 24, .65); background: var(--accent-soft); }
.agent-chat-panel:focus { outline: 2px solid rgba(255, 121, 24, .72); outline-offset: 3px; }
body.agent-chat-open { overflow: hidden; }
@media (max-width: 720px) {
  .agent-floating-toggle { right: 16px; bottom: 16px; min-height: 46px; }
  .agent-chat-panel { right: 10px; bottom: 76px; width: calc(100vw - 20px); max-height: calc(100vh - 96px); padding: 16px; border-radius: 16px; }
  .agent-chat-heading { align-items: flex-start; }
  .agent-chat-heading-actions { gap: 8px; }
  .agent-chat-runtime { display: none; }
}
.run-detail-code {
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted-strong);
  background: var(--panel-soft);
  font:
    10.5px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
;
}

.sim-action-library {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.sim-action-library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sim-action-library-heading strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size:var(--fs-meta);
}
.sim-action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.sim-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  background: rgba(28, 28, 26, 0.02);
}
.sim-action-item strong {
  overflow: hidden;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sim-action-item span {
  flex: 0 0 auto;
  color: var(--orange-text);
  font:
    10.5px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--slate);
  font-size:var(--fs-meta);
}
.footer a {
  color: var(--muted-strong);
  text-decoration: none;
}
.footer a:hover {
  color: var(--cyan);
}
.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Above the draggable agent launcher (z 1200) in the same corner — an
     error toast must never be hidden behind it. */
  z-index: var(--z-toast);
  display: grid;
  gap: 8px;
  width: min(360px, calc(100% - 40px));
}
.toast {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  font-size:var(--fs-meta);
}
.toast-error {
  border-color: rgba(220, 38, 38, 0.35);
  color: var(--red-text);
}
.toast-success {
  border-color: rgba(70, 160, 98, 0.35);
  color: var(--green-text);
}
/* 三段式错误：标题 + 影响行 + 恢复动作按钮。 */
.toast-recoverable {
  display: grid;
  gap: 4px;
}
.toast-impact {
  color: var(--muted-strong);
}
.toast-recoverable .button {
  justify-self: start;
  margin-top: 2px;
}
body.is-loading .app-shell {
  cursor: progress;
}

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

@media (max-width: 1080px) {
  .shell-layout {
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 24px;
  }
  .sidebar-project {
    grid-template-columns: 29px minmax(0, 1fr);
  }
  .sidebar-project-state {
    display: none;
  }
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-live {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .next-card {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
  .evaluation-grid {
    grid-template-columns: 1fr;
  }
  .context-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .context-health {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    border-left: 0;
    padding: 10px 2px 0;
  }
  .telemetry-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 26px, 690px);
    padding-top: 12px;
  }
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .topbar-context {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }
  .top-actions {
    margin-left: auto;
  }
  .shell-layout {
    display: block;
  }
  .sidebar {
    position: static;
    min-height: 0;
    padding: 16px 0 0;
  }
  .sidebar-project {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .sidebar-project div {
    flex: 1;
  }
  .sidebar-project-state {
    display: block;
    margin-left: auto;
  }
  .workflow-nav {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 2px;
  }
  .nav-item {
    flex: 1 0 130px;
  }
  .nav-item small {
    display: none;
  }
  .sidebar-divider,
  .module-nav,
  .sidebar-bottom,
  .sidebar > .nav-label:nth-of-type(2),
  .sidebar > .side-link {
    display: none;
  }
  .main-content {
    padding-top: 32px;
  }
  .hero {
    display: block;
    padding-top: 16px;
  }
  .context-strip {
    grid-template-columns: 1fr 1fr;
  }
  .context-health {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    border-left: 0;
    padding: 10px 2px 0;
  }
  .overview-columns,
  .sim-layout,
  .train-layout,
  .deploy-layout,
  .records-layout {
    grid-template-columns: 1fr;
  }
  .simulator-frame-wrap,
  .simulator-frame-wrap iframe {
    min-height: 58vh;
    height: 58vh;
  }
  .footer {
    display: block;
    line-height: 1.8;
  }
  .footer span {
    display: block;
  }
  .evaluation-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .evaluation-banner .button {
    margin-left: 40px;
  }
  .evaluation-next {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .evaluation-next .button {
    margin-left: 12px;
  }
  .telemetry-intro {
    display: block;
  }
  .telemetry-file-button {
    margin-top: 10px;
  }
}
@media (max-width: 560px) {
  h1 {
    font-size: clamp(34px, 11vw, 51px);
  }
  .status-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .context-live {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .status-card {
    padding: 10px;
  }
  .status-card p {
    margin-left: 0;
  }
  .metric-grid-large {
    grid-template-columns: 1fr 1fr;
  }
  .next-card {
    display: block;
  }
  .section-heading {
    display: block;
  }
  .section-caption {
    display: block;
    margin-top: 6px;
  }
  .workspace-summary-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .workspace-summary-card { padding: 8px; }
  .deploy-recovery-note { align-items: flex-start; flex-wrap: wrap; }
  .deploy-recovery-note .button { margin-left: 24px; }
  .context-health {
    grid-column: auto;
  }
  .training-grid {
    grid-template-columns: 1fr;
  }
  .sim-action-list {
    grid-template-columns: 1fr;
  }
  .telemetry-summary {
    grid-template-columns: 1fr 1fr;
  }
  .telemetry-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .history-row {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .history-time,
  .history-kind,
  .history-summary {
    grid-column: 1;
  }
  .history-status {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: 11em;
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
  }
}

/* ---- Host station (上位机) view ---- */
.station-notice {
  border: 1px solid var(--red, var(--coral));
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--red, var(--coral));
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}
.station-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.station-camera-panel,
.station-command-panel,
.station-drive-panel {
  grid-column: 2;
}
.station-status-panel {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.station-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(70, 160, 98, 0.5);
  border-radius: 999px;
  padding: 2px 10px;
  font-size:var(--fs-meta);
  letter-spacing: 0.08em;
  color: var(--green, var(--mint));
}
.station-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, var(--mint));
  animation: station-live-pulse 1.4s ease-in-out infinite;
}
.station-freshness {
  margin-left: auto;
  color: var(--muted);
  font-size:var(--fs-meta);
  font-variant-numeric: tabular-nums;
}
.station-freshness.is-stale {
  color: var(--orange-text);
}
@keyframes station-live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.station-device-line {
  color: var(--muted, var(--muted-cool));
  font-size:var(--fs-body);
  margin: 6px 0 12px;
}
.station-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.station-metric-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel-soft);
}
.station-metric-label {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  letter-spacing: 0.04em;
}
.station-metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.station-metric-sub {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
}
.station-metric-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.14);
  overflow: hidden;
  margin: 4px 0 2px;
}
.station-metric-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-bright), var(--sky));
  transition: width 0.4s ease;
}
.station-metric-bar i.is-warn {
  background: linear-gradient(90deg, var(--gold-fill), var(--gold-deep));
}
.station-metric-bar i.is-danger {
  background: linear-gradient(90deg, var(--red-bright), var(--red-fill));
}
.station-metric-card.is-danger .station-metric-value {
  color: var(--red-bright);
}
.station-spark {
  width: 100%;
  height: 24px;
  margin: 4px 0 2px;
  display: block;
}
.station-spark polyline {
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.station-spark .station-spark-tx {
  stroke: rgba(148, 163, 184, 0.45);
  stroke-dasharray: 2 2;
}
/* ---- 机体遥测卡（参考机型 OriginBot） ---- */
.station-robot-tele {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.05), rgba(56, 189, 248, 0.015));
}
.station-tele-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--muted, var(--muted-cool));
  margin-bottom: 10px;
}
.station-tele-live {
  color: var(--green, var(--mint));
  border: 1px solid rgba(70, 160, 98, 0.5);
  border-radius: 999px;
  padding: 2px 8px;
  font-size:var(--fs-meta);
}
.station-tele-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.station-tele-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel-soft);
}
.station-tele-compass {
  grid-column: span 1;
}
.station-compass {
  width: 84px;
  height: 84px;
  margin: 4px auto;
  position: relative;
}
.station-compass svg {
  width: 100%;
  height: 100%;
}
.station-compass-ring {
  fill: rgba(15, 23, 42, 0.35);
  stroke: rgba(148, 163, 184, 0.4);
  stroke-width: 1.5;
}
.station-compass-marks line {
  stroke: rgba(148, 163, 184, 0.6);
  stroke-width: 1;
}
.station-compass-marks text {
  fill: var(--muted, var(--muted-cool));
  font-size:var(--fs-meta);
  text-anchor: middle;
}
.station-compass-needle {
  transform-origin: 50px 50px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.station-compass-needle-n {
  fill: var(--red-fill);
}
.station-compass-needle-s {
  fill: rgba(148, 163, 184, 0.7);
}
.station-tele-compass .station-metric-value {
  text-align: center;
}
.station-battery-cells {
  display: flex;
  gap: 2px;
  margin: 4px 0 2px;
}
.station-battery-cells i {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.2);
  transition: background 0.4s ease;
}
.station-battery-cells i.is-on {
  background: linear-gradient(180deg, var(--teal-bright), var(--emerald));
  border-color: rgba(52, 210, 181, 0.5);
}
.station-battery-cells i.is-danger {
  background: linear-gradient(180deg, var(--red-bright), var(--red-fill));
  border-color: rgba(248, 113, 113, 0.5);
}
.station-odom {
  font-size: 15px;
}
.station-topics {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.station-topics-label {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  letter-spacing: 0.06em;
}
.station-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.station-topic-chip {
  border: 1px solid rgba(240, 90, 26, 0.35);
  border-radius: 999px;
  padding: 2px 10px;
  font-size:var(--fs-meta);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.station-topic-chip.station-topic-drive {
  border-color: rgba(239, 68, 68, 0.55);
  color: var(--red-text);
  background: rgba(239, 68, 68, 0.08);
}
.station-topic-chip.station-topic-sensor {
  border-color: rgba(56, 189, 248, 0.5);
  color: var(--blue);
  background: rgba(56, 189, 248, 0.08);
}
.station-topic-chip.station-topic-tf {
  border-color: rgba(52, 210, 181, 0.5);
  color: var(--green-text);
  background: rgba(52, 210, 181, 0.08);
}
.station-topic-chip.station-topic-sys {
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--muted, var(--muted-cool));
}
.station-topic-empty {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
}
.station-honesty-note {
  margin-top: 12px;
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  border-left: 3px solid rgba(255, 190, 60, 0.6);
  padding-left: 10px;
  line-height: 1.6;
}
.station-drive-note {
  margin: 10px 0 12px;
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  border-left: 3px solid rgba(255, 190, 60, 0.6);
  padding-left: 10px;
  line-height: 1.6;
}
.station-drive-controls {
  display: grid;
  gap: 12px;
}
.station-drive-slider label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size:var(--fs-body);
  margin-bottom: 6px;
  color: var(--text);
}
.station-drive-slider output {
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  font-size:var(--fs-body);
}
.station-drive-slider input[type='range'] {
  width: 100%;
  accent-color: var(--slider-orange);
}
.station-drive-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.station-drive-go {
  border: 1px solid rgba(70, 160, 98, 0.5);
  color: var(--green, var(--mint));
}
/* One shared hard-stop style for both the drive canary and the policy runtime. */
.station-drive-stop,
.station-policy-stop {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  background: var(--stop-red);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.12em;
}
.station-drive-stop:hover,
.station-policy-stop:hover {
  background: var(--stop-hover);
}
.station-drive-state {
  font-size:var(--fs-body);
  color: var(--muted, var(--muted-cool));
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
}

/* ---- 设备管理面板（网页添加真机：SSH 隧道，免命令行） ---- */
.station-device-manager {
  grid-column: 1 / -1;
}
.station-device-add {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 4px 0 12px;
}
.station-device-add label {
  display: grid;
  gap: 4px;
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
}
.station-device-add input {
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-inset, rgba(9, 15, 26, 0.55));
  color: var(--text);
  font-size:var(--fs-body);
}
.station-device-add input::placeholder {
  color: var(--muted, var(--muted-cool));
  opacity: 0.7;
}
.station-device-add-btn {
  border: 1px solid rgba(240, 90, 26, 0.55);
  color: var(--accent-text, var(--accent-blush));
}
.station-device-list {
  display: grid;
  gap: 8px;
}
.station-device-item {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-inset, rgba(9, 15, 26, 0.45));
}
.station-device-item-main {
  flex: 1;
  min-width: 180px;
  display: grid;
  gap: 2px;
}
.station-device-item-title {
  font-size:var(--fs-body);
  color: var(--text);
  font-weight: 600;
}
.station-device-item-meta {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  font-variant-numeric: tabular-nums;
}
.station-device-badge {
  font-size:var(--fs-meta);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted, var(--muted-cool));
  white-space: nowrap;
}
.station-device-badge.live {
  border-color: rgba(70, 160, 98, 0.6);
  color: var(--green, var(--mint));
}
.station-device-badge.down {
  border-color: rgba(217, 43, 43, 0.5);
  color: var(--coral-pale);
}
.station-device-item-actions {
  display: flex;
  gap: 8px;
}
.station-device-item-actions .button {
  font-size:var(--fs-meta);
  padding: 6px 12px;
}
.station-device-connect {
  border: 1px solid rgba(70, 160, 98, 0.5);
  color: var(--green, var(--mint));
}
.station-device-ssh-hint {
  margin-top: 12px;
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  line-height: 1.6;
}
.station-device-ssh-hint code {
  background: rgba(127, 151, 176, 0.14);
  padding: 2px 4px;
  border-radius: 4px;
}

/* ---- 运动开关面板（双开关网页化） ---- */
.station-switch-panel {
  grid-column: 1;
}
.station-switch-rows {
  display: grid;
  gap: 10px;
}
.station-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-inset, rgba(9, 15, 26, 0.45));
}
.station-switch-info {
  display: grid;
  gap: 2px;
}
.station-switch-info strong {
  font-size:var(--fs-body);
  color: var(--text);
}
.station-switch-sub {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
}
.station-switch-toggle {
  min-width: 64px;
  border: 1px solid var(--line);
  color: var(--muted, var(--muted-cool));
  font-variant-numeric: tabular-nums;
}
.station-switch-toggle[aria-pressed='true'] {
  border-color: rgba(255, 190, 60, 0.6);
  color: var(--warn-text, var(--gold-soft));
}
.station-switch-board-buttons {
  display: flex;
  gap: 8px;
}

/* ---- 策略运行时面板（与运动 Canary 同一受限通道的第三重开关） ---- */
.station-policy-panel {
  grid-column: 2;
}
.station-policy-controls {
  display: grid;
  gap: 12px;
}
.station-policy-model label {
  display: block;
  font-size:var(--fs-body);
  margin-bottom: 6px;
}
.station-policy-model-row {
  display: flex;
  gap: 8px;
}
.station-policy-model-row input[type='text'] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-soft);
  color: var(--text, var(--mist));
  font-family: var(--mono, ui-monospace, monospace);
  font-size:var(--fs-body);
}
.station-policy-model-meta {
  margin-top: 6px;
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  font-variant-numeric: tabular-nums;
}
/* ---- 产物下发（环 D）：runId → 平台证据校验 → 板端 policies/，只落盘 ---- */
.station-policy-stage label {
  display: block;
  font-size:var(--fs-body);
  margin-bottom: 6px;
}
.station-policy-stage .station-policy-model-row {
  margin-bottom: 0;
}
.station-policy-files {
  margin-top: 8px;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  max-height: 132px;
  overflow-y: auto;
}
.station-policy-files-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size:var(--fs-meta);
}
.station-policy-files-name {
  font-family: var(--mono, ui-monospace, monospace);
  overflow-wrap: anywhere;
}
.station-policy-files-bytes {
  color: var(--muted, var(--muted-cool));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.station-policy-files-empty {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
}
.station-policy-slider label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size:var(--fs-body);
  margin-bottom: 6px;
}
.station-policy-slider output {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.station-policy-slider input[type='range'] {
  width: 100%;
  accent-color: var(--sky);
}
.station-policy-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.station-policy-start {
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: var(--sky);
}
.station-policy-telemetry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.station-policy-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.station-policy-stat-label {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  letter-spacing: 0.04em;
}
.station-policy-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.station-policy-stat-value[data-state='running'] {
  color: var(--green, var(--mint));
}
.station-policy-stat-value[data-state='fault'] {
  color: var(--red-bright);
}
.station-policy-obsslots {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel-soft);
}
.station-policy-obsslots-title {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
}
.station-policy-obsslots-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size:var(--fs-meta);
}
.station-policy-obsslots-kind {
  flex: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size:var(--fs-meta);
  letter-spacing: 0.08em;
}
.station-policy-obsslots-kind.is-real {
  background: rgba(70, 160, 98, 0.18);
  color: var(--green, var(--mint));
}
.station-policy-obsslots-kind.is-zero {
  background: rgba(255, 190, 60, 0.14);
  color: var(--gold-bright);
}
.station-policy-obsslots-name {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text, var(--mist));
}
.station-policy-obsslots-desc {
  color: var(--muted, var(--muted-cool));
}
.station-policy-lasterr {
  font-size:var(--fs-meta);
  color: var(--red-bright);
  border-left: 3px solid rgba(248, 113, 113, 0.7);
  padding-left: 10px;
  line-height: 1.6;
}
.station-camera-frame {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-soft);
}
.station-camera-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.station-camera-placeholder {
  color: var(--muted, var(--muted-cool));
  font-size:var(--fs-body);
}
.station-camera-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.station-camera-state {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
}
.station-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.station-command-button {
  border: 1px solid rgba(240, 90, 26, 0.4);
  border-radius: 8px;
  background: rgba(240, 90, 26, 0.06);
  color: var(--accent-text);
  padding: 8px 10px;
  font-size:var(--fs-body);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.station-command-button:hover:not(:disabled) {
  background: rgba(240, 90, 26, 0.14);
  border-color: rgba(240, 90, 26, 0.7);
}
.station-command-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.station-command-output {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--accent-text);
  font-size:var(--fs-meta);
  line-height: 1.55;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 200px;
  overflow: auto;
  margin: 0 0 10px;
}
.station-log {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 8px 10px;
}
.station-log-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.station-log-title {
  font-size:var(--fs-meta);
  color: var(--muted, var(--muted-cool));
  letter-spacing: 0.06em;
}
.station-log-clear {
  font-size:var(--fs-meta);
  padding: 2px 8px;
}
.station-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 160px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.station-log-entry {
  font-size: var(--fs-body);
  color: var(--muted, var(--muted-cool));
  font-variant-numeric: tabular-nums;
}
.station-log-entry .station-log-time {
  color: var(--olive-gray);
  margin-right: 6px;
}
.station-log-entry.is-error {
  color: var(--red, var(--coral));
}
.station-log-entry.is-ok {
  color: var(--green, var(--mint));
}
@media (max-width: 1080px) {
  .station-layout {
    grid-template-columns: 1fr;
  }
  .station-status-panel,
  .station-camera-panel,
  .station-command-panel,
  .station-drive-panel {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 720px) {
  .station-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .station-tele-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .station-tele-compass {
    grid-column: 1 / -1;
  }
  .station-compass {
    width: 72px;
    height: 72px;
  }
  .station-command-grid {
    grid-template-columns: 1fr;
  }
  .station-freshness {
    width: 100%;
    margin-left: 0;
  }
}

/* 浮动急停：驱动窗口激活时在视口右下角常驻，任何视图可见。
   流断开 2s 后由前端隐藏；急停端点本身永远可用，与按钮显隐无关。 */
.station-float-stop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  background: var(--stop-red);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(217, 43, 43, 0.45);
  animation: station-float-stop-pulse 1s ease-in-out infinite;
}

.station-float-stop:hover {
  background: var(--stop-deep);
}

@keyframes station-float-stop-pulse {
  0%,
  100% {
    box-shadow: 0 6px 18px rgba(217, 43, 43, 0.45);
  }
  50% {
    box-shadow: 0 6px 26px rgba(217, 43, 43, 0.85);
  }
}

.agent-chat-panel { margin: 24px 0; padding: 20px; border: 1px solid rgba(126, 139, 255, .28); border-radius: 18px; background: linear-gradient(135deg, rgba(31, 35, 61, .96), rgba(22, 26, 42, .96)); box-shadow: 0 18px 42px rgba(0,0,0,.18); }
.agent-chat-heading, .agent-plan-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.agent-chat-heading h2 { margin: 4px 0 0; }
.agent-chat-runtime { color: var(--mint-bright); font-size:var(--fs-meta); }
.agent-chat-layout { display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap:16px; margin-top:16px; }
.agent-plan-card, .agent-evidence { min-height: 118px; max-height: 260px; overflow:auto; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(0,0,0,.16); }
.agent-chat-messages { min-height: 200px; max-height: 460px; overflow:auto; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(0,0,0,.16); }
.agent-chat-message { margin-bottom:10px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.06); }
.agent-chat-message-user { background:rgba(115,129,255,.18); }
.agent-chat-message strong { display:block; font-size:var(--fs-meta); color:var(--periwinkle); }
.agent-chat-message p { margin:4px 0 0; line-height:1.5; }
.agent-message-actions { display:flex; justify-content:flex-end; margin-top:6px; }
.agent-message-copy { border:0; padding:2px 6px; border-radius:5px; color:var(--muted); background:transparent; font-size:var(--fs-meta); cursor:pointer; }
.agent-message-copy:hover { color:var(--accent-text); background:var(--accent-soft); }
.agent-message-provenance { display:block; margin-top:4px; color:var(--muted); font-size:var(--fs-meta); }
.agent-chat-typing { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:8px 10px; color:var(--muted); font-size:var(--fs-meta); }
.agent-chat-typing i { color:var(--accent-text); font-style:normal; letter-spacing:3px; animation:agent-typing-pulse 1.2s ease-in-out infinite; }
@keyframes agent-typing-pulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }
.agent-approval-card { margin:8px 0 10px; padding:10px; border:1px solid var(--amber-text); border-radius:10px; background:var(--panel-soft); }
.agent-approval-card strong { color:var(--amber-text); }
.agent-approval-card p { margin:4px 0 8px; font-size:var(--fs-meta); line-height:1.5; }
.agent-approval-actions { display:flex; gap:8px; flex-wrap:wrap; }
.agent-approval-card.is-approved, .agent-approval-card.is-cancelled { opacity:.75; }
.agent-chat-side { display:grid; gap:10px; }
.agent-export-session { width: 100%; margin-top: 8px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--muted-strong); background:transparent; font-size:var(--fs-meta); cursor:pointer; text-align: left; }
.agent-export-session:hover { color:var(--accent-text); border-color:var(--line-strong); background:var(--accent-soft); }
.agent-plan-card ol { margin:12px 0 0; padding:0; list-style:none; }
.agent-plan-card li { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:var(--fs-body); }
.agent-plan-card li em { margin-left:auto; color:var(--slate-soft); font-size:var(--fs-meta); font-style:normal; }
.agent-plan-card li.is-done em { color:var(--mint); }.agent-plan-card li.is-running em { color:var(--gold); }.agent-plan-card li.is-failed em { color:var(--coral); }
.agent-step-dot { width:7px; height:7px; border-radius:50%; background:var(--step-gray); }.is-done .agent-step-dot { background:var(--mint); }.is-running .agent-step-dot { background:var(--gold); box-shadow:0 0 0 4px rgba(255,211,107,.15); }.is-failed .agent-step-dot { background:var(--coral); }
.agent-rationale { margin: 10px 0 0; color: var(--lavender-gray); font-size: var(--fs-body); line-height: 1.5; }
.agent-evidence, .agent-event-log { display:flex; flex-direction:column; gap:6px; font-size:var(--fs-meta); }.agent-evidence strong, .agent-event-log strong { color:var(--periwinkle); }.agent-evidence a { color:var(--sky-text); text-decoration:none; }
.agent-event-log { max-height: 180px; overflow:auto; padding: 12px 12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(0,0,0,.12); }
.agent-event { display:flex; gap:8px; line-height:1.4; }.agent-event time { flex: 0 0 58px; color:var(--slate-deep); font-variant-numeric:tabular-nums; }.agent-event-tool_start span { color:var(--gold); }.agent-event-tool_result span { color:var(--mint-bright); }.agent-event-message span { color:var(--mist-bright); }
.agent-image-controls { display:flex; flex:0 0 100%; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; font-size:var(--fs-meta); }
.agent-image-picker { display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:100%; color:var(--muted-strong); }
.agent-image-picker input { width:190px; max-width:100%; padding:4px 6px; font-size:var(--fs-meta); }
.agent-image-model-label { display:flex; align-items:center; gap:6px; color:var(--muted-strong); }
.agent-image-model-label select { max-width:180px; padding:4px 6px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel-soft); }
.agent-image-status { flex:1 0 100%; color:var(--muted); line-height:1.4; }
.agent-image-status.is-error { color:var(--red-text); }
.agent-image-preview { display:flex; flex:0 0 100%; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.agent-image-preview img { flex:0 0 64px; width:64px; height:64px; object-fit:contain; border-radius:4px; background:var(--panel); }
.agent-image-preview > div { flex:1; min-width:0; }
.agent-image-preview strong, .agent-image-preview span { display:block; overflow-wrap:anywhere; font-size:var(--fs-meta); }
.agent-image-source { color:var(--muted); }
.agent-image-disclosure { flex:0 0 100%; margin:0; color:var(--muted-strong); font-size:var(--fs-meta); line-height:1.4; }
.agent-image-message { display:block; margin-top:6px; color:var(--muted-strong); font-size:var(--fs-meta); overflow-wrap:anywhere; }
.agent-chat-composer {
  flex-wrap: wrap; display:flex; gap:10px; margin-top:12px; }.agent-chat-composer input { flex:1; min-width:0; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:10px 12px; color:inherit; background:rgba(0,0,0,.2); }
@media (max-width: 720px) { .agent-chat-layout { grid-template-columns:1fr; } .agent-chat-composer { flex-direction:column; } }

/* The Agent workspace used to be a hardcoded "dark island": light text pinned
   with literal hex values while product-polish.css (later file, higher
   specificity) repaints the same panel to var(--panel-raised). In light theme
   that combination rendered #f3f6ff on #ffffff = 1.08:1 — invisible. Every
   colour below now goes through a theme token so the surface and its text
   always move together. */
.agent-chat-panel {
  color: var(--text);
}
.agent-chat-panel h2,
.agent-chat-panel p,
.agent-chat-panel strong,
.agent-chat-panel .empty-inline,
.agent-chat-panel .agent-plan-card,
.agent-chat-panel .agent-evidence,
.agent-chat-panel .agent-event-log {
  color: var(--text);
}
.agent-chat-panel .workspace-kicker {
  color: var(--accent-text);
}
.agent-chat-panel .agent-chat-runtime {
  color: var(--green-text);
}
.agent-chat-panel .agent-chat-messages,
.agent-chat-panel .agent-plan-card,
.agent-chat-panel .agent-evidence,
.agent-chat-panel .agent-event-log {
  border-color: var(--line);
  background: var(--panel-soft);
}
/* 对话流是面板主角:气泡与底面分层,用户气泡带主题描边。 */
.agent-chat-panel .agent-chat-message {
  border: 1px solid var(--line);
  background: var(--panel-raised);
}
.agent-chat-panel .agent-chat-message-user {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--accent-soft);
}
.agent-chat-panel .agent-chat-message strong,
.agent-chat-panel .agent-evidence strong,
.agent-chat-panel .agent-event-log strong {
  color: var(--accent-text);
  letter-spacing: 0.02em;
}
.agent-chat-panel .agent-chat-composer input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* 消息正文的加粗是模型自己输出的 **强调**,统一染成主题橙会显得满屏告警;
   正文强调回归文字加粗,橙色只留给角色标签与结构化标题。 */
.agent-chat-panel .agent-chat-message p strong {
  color: var(--text);
  font-weight: 650;
}
.agent-chat-panel .agent-chat-message p strong.agent-msg-heading {
  display: block;
  margin: 10px 0 2px;
  font-weight: 700;
  color: var(--accent-text);
}
.agent-chat-panel .agent-chat-message:first-child .agent-msg-heading,
.agent-chat-panel .agent-chat-message p > .agent-msg-heading:first-child {
  margin-top: 0;
}
.agent-chat-panel .agent-chat-message p {
  overflow-wrap: anywhere;
}
.agent-chat-panel .agent-chat-message ul,
.agent-chat-panel .agent-chat-message ol {
  margin: 4px 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}
.agent-chat-panel .agent-chat-message li {
  line-height: 1.55;
}
.agent-chat-panel .agent-chat-message li::marker {
  color: var(--muted);
}
.agent-chat-panel .agent-chat-message code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  font-size: 0.92em;
}
.agent-chat-panel .agent-rationale {
  color: var(--muted-strong);
}
.agent-chat-panel .agent-plan-card li em,
.agent-chat-panel .agent-event time,
.agent-chat-panel .empty-inline {
  color: var(--muted);
}
.agent-chat-panel .agent-chat-composer input {
  color: var(--text);
  caret-color: var(--accent);
  border-color: var(--line-strong);
  background: var(--panel-soft);
}
.agent-chat-panel .agent-chat-composer input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.agent-chat-panel .agent-evidence a {
  color: var(--accent-text);
}
.agent-chat-panel .agent-plan-card li.is-done em {
  color: var(--green-text);
}
.agent-chat-panel .agent-plan-card li.is-running em {
  color: var(--amber-text);
}
.agent-chat-panel .agent-plan-card li.is-failed em {
  color: var(--red-text);
}
.agent-chat-panel .agent-event-tool_start span {
  color: var(--amber-text);
}
.agent-chat-panel .agent-event-tool_result span {
  color: var(--green-text);
}
.agent-chat-panel .agent-event-message span {
  color: var(--muted-strong);
}

/* DSH reasoning trace and tool timeline: optional disclosures attached to an
   agent reply. Collapsed by default so a tool-using turn stays a compact
   answer; one click opens the "how it thought / what it called" evidence. */
.agent-dsh-reasoning,
.agent-dsh-trail {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 6px 10px;
  font-size:var(--fs-meta);
}
.agent-dsh-reasoning summary,
.agent-dsh-trail summary {
  cursor: pointer;
  color: var(--muted-strong);
  user-select: none;
  line-height: 1.8;
}
.agent-dsh-reasoning p {
  margin: 4px 0 6px;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow-y: auto;
}
.agent-dsh-trail-item {
  display: block;
  color: var(--green-text);
  line-height: 1.7;
}
.agent-dsh-trail-item.is-failed {
  color: var(--red-text);
}

/* Recent-run comparison: compact enough for the evaluation workspace, with
   visible empty/missing states instead of fabricated values. */
.run-comparison-panel { margin-top: 16px; }
.run-comparison-panel .panel-subtitle { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-body); }
.run-comparison { display: grid; gap: 8px; }
.run-compare-row { display: grid; grid-template-columns: minmax(150px, .72fr) minmax(0, 1.8fr); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.run-compare-row:first-child { border-top: 0; }
.run-compare-name { min-width: 0; display: grid; gap: 2px; }
.run-compare-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--fs-body); }
.run-compare-name small { color: var(--muted); font-size:var(--fs-meta); }
.run-compare-metrics { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; }
.run-compare-metric { display: grid; grid-template-columns: auto minmax(35px, 1fr) auto; align-items: center; gap: 6px; color: var(--muted); font-size:var(--fs-meta); }
.run-compare-metric b { min-width: 38px; color: var(--text); font-size:var(--fs-meta); text-align: right; }
.run-compare-track { height: 6px; overflow: hidden; border-radius: 99px; background: var(--panel-soft); }
.run-compare-track i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--peach), var(--accent)); transition: width .25s ease; }
@media (max-width: 720px) {
  .run-compare-row { grid-template-columns: 1fr; gap: 8px; }
  .run-compare-metrics { grid-template-columns: 1fr; gap: 6px; }
}

.command-palette { width: min(560px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--text); background: var(--panel-raised); box-shadow: 0 28px 80px rgba(28,28,26,.2); }
.command-palette::backdrop { background: rgba(25,24,20,.32); backdrop-filter: blur(3px); }
.command-palette-shell { padding: 16px; }
.command-palette-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.command-palette-heading h2 { margin: 4px 0 0; font-size: 19px; }
.command-palette-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; background: var(--panel-soft); }
.command-palette-search > span { color: var(--muted); font-size: 20px; }
.command-palette-search input { min-width: 0; flex: 1; border: 0; outline: none; padding: 12px 0; color: var(--text); background: transparent; }
.command-palette kbd { border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; color: var(--muted); background: var(--panel); font: 12px ui-monospace, monospace; white-space: nowrap; }
.command-palette-list { display: grid; gap: 2px; max-height: 330px; overflow: auto; margin-top: 12px; }
.command-palette-item { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; border-radius: 9px; padding: 10px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.command-palette-item:hover, .command-palette-item.is-active { border-color: rgba(240,90,26,.22); background: rgba(240,90,26,.08); }
.command-palette-item-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--accent-text); background: rgba(240,90,26,.1); }
.command-palette-item strong, .command-palette-item small { display: block; }
.command-palette-item small { margin-top: 2px; color: var(--muted); font-size:var(--fs-meta); }
.command-palette-empty { padding: 24px 10px; color: var(--muted); text-align: center; }
.command-palette-hint { margin: 12px 2px 0; color: var(--muted); font-size:var(--fs-meta); }
@media (max-width: 560px) { .command-palette-shell { padding: 12px; } .command-palette-heading .button kbd { display: none; } }
.compute-resources-panel { grid-column: 1 / -1; }
.compute-resource-list { display: grid; gap: 10px; margin: 12px 0 16px; }
.compute-resource-card { border: 1px solid var(--line, var(--sand-border)); border-radius: 12px; padding: 12px; background: rgba(255,255,255,.68); }
.compute-resource-card-main { display: flex; align-items: center; gap: 8px; }
.compute-resource-card-main strong { flex: 1; }
.compute-resource-card-main small { color: var(--muted, var(--stone)); }
.compute-resource-card-meta { color: var(--muted, var(--stone)); font-size:var(--fs-meta); margin-top: 6px; overflow-wrap: anywhere; }
.compute-resource-card-actions, .compute-resource-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.compute-resource-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.compute-resource-form-grid input { width: 100%; margin-top: 4px; }
@media (max-width: 720px) { .compute-resource-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .compute-resource-form-grid { grid-template-columns: 1fr; } }

/* Dark operator workspace theme. The existing component selectors remain the
   source of truth for behavior; this scoped layer only changes visual tokens
   and spacing so the product reads like a focused Sim2Real workbench.
   ⚠️ 暗色令牌的真源是 pro-skin.css 的 `html.theme-dark`：pro-skin.css 同优先级
   但后加载，所以那里声明的 --bg/--panel/--text/--accent/--green/--red/--shadow
   等一直覆盖着这里。下面只保留 pro-skin 没有定义的三个令牌，避免"改这里
   却没反应"。需要改暗色配色请去 pro-skin.css:86-133。 */


html.theme-dark body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: '';
  opacity: 0.4;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, var(--black), transparent 78%);
}
html.theme-dark .topbar {
  min-height: 64px;
  padding-bottom: 16px;
  border-bottom-color: var(--line);
}
html.theme-dark .topbar-context { color: var(--muted-strong); }
html.theme-dark .button {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(21, 31, 43, 0.88);
}
html.theme-dark .button:hover {
  border-color: rgba(255, 116, 31, 0.72);
  background: rgba(255, 116, 31, 0.12);
}
html.theme-dark .button-primary {
  border-color: var(--accent);
  color: var(--ink-dark);
  background: linear-gradient(135deg, var(--dk-primary-a), var(--dk-primary-b));
  box-shadow: 0 6px 18px rgba(255, 116, 31, 0.2);
}
html.theme-dark .button-primary:hover {
  color: var(--ink-dark);
  background: linear-gradient(135deg, var(--dk-primary-hover-a), var(--dk-primary-hover-b));
}
/* ⚠️ 这两条是"桌面双列"布局，只在侧栏还是栅格列的时候成立。
   ≤1080px 侧栏变成 position:fixed 的抽屉后就不再占据栅格单元，如果这个
   两列模板还生效，正文会落进第一列（224px）——实测 821–1080px 暗色主题下
   #main-content 只有 224px，.next-card 文案被压成 25px 宽、首跑清单正文
   列 0px。注意这里的选择器是 (0,2,1)（html 是元素选择器），比皮肤层
   `.app-shell .shell-layout` 的 (0,2,0) 高，所以必须在源头加断点守卫，
   而不是靠提高皮肤层优先级去压。 */
@media (min-width: 1081px) {
  html.theme-dark .shell-layout {
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 24px;
  }
  html.theme-dark .sidebar {
    min-height: calc(100vh - 125px);
    padding-top: 20px;
  }
}
html.theme-dark .sidebar-project,
html.theme-dark .workspace-context-card,
html.theme-dark .workspace-quick-panel,
html.theme-dark .agent-entry-card,
html.theme-dark .status-card,
html.theme-dark .panel,
html.theme-dark .context-strip {
  border-color: var(--line);
  background: rgba(17, 27, 37, 0.92);
  box-shadow: var(--shadow);
}
html.theme-dark .sidebar-project { box-shadow: none; }
html.theme-dark .nav-item {
  color: var(--muted);
  border-color: transparent;
}
html.theme-dark .nav-item:hover { background: rgba(255, 255, 255, 0.05); }
html.theme-dark .nav-item.is-active {
  border-color: rgba(255, 116, 31, 0.5);
  color: var(--text);
  background: linear-gradient(90deg, rgba(255, 116, 31, 0.18), rgba(255, 116, 31, 0.04));
  box-shadow: inset 3px 0 0 var(--accent);
}
html.theme-dark .side-link:hover { background: rgba(255, 255, 255, 0.05); }
html.theme-dark select,
html.theme-dark input,
html.theme-dark textarea {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(8, 14, 21, 0.8);
}
html.theme-dark select option { color: var(--text); background: var(--navy-panel); }
html.theme-dark .main-content { padding-top: 24px; }
html.theme-dark .context-strip {
  padding: 12px;
  background: rgba(13, 22, 31, 0.96);
}
html.theme-dark .workspace-quick-panel,
html.theme-dark .workspace-context-card { box-shadow: none; }
html.theme-dark .agent-entry-card {
  border-color: rgba(255, 116, 31, 0.35);
  background: radial-gradient(circle at 88% 10%, rgba(255, 116, 31, 0.16), transparent 44%), var(--navy-panel);
}
html.theme-dark .quick-action {
  border-color: var(--line);
  color: var(--text);
  background: rgba(21, 31, 43, 0.9);
}
html.theme-dark .quick-action:hover { background: rgba(255, 116, 31, 0.12); }
html.theme-dark .module-card,
html.theme-dark .compute-resource-card { border-color: var(--line); background: var(--panel-raised); }
html.theme-dark .simulator-frame-wrap,
html.theme-dark .simulator-frame-wrap iframe { background: var(--dk-frame); }
html.theme-dark .simulator-product-gate { background: var(--dk-gate); }
html.theme-dark .toast { color: var(--text); background: rgba(17, 27, 37, .96); }
html.theme-dark .command-palette { color: var(--text); background: var(--navy-panel); }
html.theme-dark .command-palette-search { background: rgba(8, 14, 21, .8); }
html.theme-dark .command-palette-search input { background: transparent; }
html.theme-dark .footer { color: var(--muted); }

@media (max-width: 720px) {
  html.theme-dark .app-shell { width: min(100% - 24px, 700px); }
  html.theme-dark .shell-layout { display: block; }
  html.theme-dark .main-content { padding-top: 24px; }
}

/* -------------------------------------------------------------------------
   Duck Lab workstation theme
   The application keeps its semantic class names so the visual system can
   evolve independently of app.js. This layer aligns the product with the
   compact dark workbench reference: deep navy surfaces, orange action color,
   crisp hairlines and dense information cards. Scoped to html.theme-dark so
   the light Aurora tokens in the header remain the default and the theme
   toggle can swap between both systems without a reload. Dark palette values
   come from the operator token block above — this layer only contributes
   the body backdrop and component polish (single dark token source).
------------------------------------------------------------------------- */
html.theme-dark body {
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(255, 121, 24, 0.095), transparent 60%),
    radial-gradient(ellipse 55% 48% at 93% 8%, rgba(58, 124, 198, 0.08), transparent 62%),
    linear-gradient(rgba(139, 168, 202, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 168, 202, 0.022) 1px, transparent 1px),
    var(--bg-deep);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

:where(html.theme-dark) .app-shell { width: min(1500px, calc(100% - 34px)); padding: 16px 0 24px; }
:where(html.theme-dark) .topbar { min-height: 52px; padding-bottom: 12px; border-bottom-color: var(--line); }
:where(html.theme-dark) .brand { gap: 10px; }
:where(html.theme-dark) .brand-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; box-shadow: 0 0 22px rgba(255, 121, 24, 0.3); }
:where(html.theme-dark) .brand strong { color: var(--text); font-size: 15px; }
:where(html.theme-dark) .brand-kicker, :where(html.theme-dark) .eyebrow, :where(html.theme-dark) .card-kicker, :where(html.theme-dark) .nav-label { color: var(--accent-text); }
:where(html.theme-dark) .topbar-context { color: var(--muted-strong); }
:where(html.theme-dark) .context-label, :where(html.theme-dark) .field-label, :where(html.theme-dark) .section-caption, :where(html.theme-dark) .panel-caption { color: var(--muted); }
:where(html.theme-dark) .context-divider { background: var(--line-strong); }
:where(html.theme-dark) .account-pill { border-color: rgba(85, 217, 154, 0.3); color: var(--green-text); background: rgba(85, 217, 154, 0.1); }
:where(html.theme-dark) .service-pill, :where(html.theme-dark) .live-label, :where(html.theme-dark) .contract-badge, :where(html.theme-dark) .state-badge { border-color: var(--line); color: var(--muted-strong); background: rgba(12, 21, 33, 0.7); }

:where(html.theme-dark) .button { border-color: var(--line-strong); color: var(--text); background: var(--panel-raised); }
:where(html.theme-dark) .button:hover { border-color: rgba(255, 121, 24, 0.64); background: var(--dk-button); }
:where(html.theme-dark) .button-primary { border-color: transparent; color: var(--ink-deeper); background: linear-gradient(180deg, var(--dk-primary-c), var(--accent)); box-shadow: 0 6px 18px rgba(255, 121, 24, 0.24); }
:where(html.theme-dark) .button-primary:hover { border-color: transparent; color: var(--ink-deeper); background: linear-gradient(180deg, var(--dk-primary-hover-c), var(--dk-primary-hover-d)); }
:where(html.theme-dark) .button-ghost, :where(html.theme-dark) .button-quiet { background: transparent; }
:where(html.theme-dark) .button-quiet:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.055); }
:where(html.theme-dark) button:focus-visible, :where(html.theme-dark) a:focus-visible, :where(html.theme-dark) select:focus-visible, :where(html.theme-dark) input:focus-visible, :where(html.theme-dark) textarea:focus-visible { outline-color: var(--accent); }

:where(html.theme-dark) .shell-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
:where(html.theme-dark) .sidebar { top: 12px; min-height: calc(100vh - 124px); padding: 24px 12px 12px 0; border-right: 1px solid var(--line); }
:where(html.theme-dark) .sidebar-project { margin-bottom: 24px; border-color: var(--line); background: rgba(16, 26, 39, 0.82); box-shadow: none; }
:where(html.theme-dark) .sidebar-project-icon, :where(html.theme-dark) .module-icon { color: var(--accent-text); background: rgba(255, 121, 24, 0.12); }
:where(html.theme-dark) .module-item { color: var(--muted); }
:where(html.theme-dark) .module-item:hover, :where(html.theme-dark) .nav-item:hover, :where(html.theme-dark) .side-link:hover { border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, 0.045); }
:where(html.theme-dark) .module-item.is-active, :where(html.theme-dark) .nav-item.is-active { border-color: rgba(255, 121, 24, 0.42); color: var(--text); background: rgba(255, 121, 24, 0.12); box-shadow: inset 3px 0 0 var(--accent); }
:where(html.theme-dark) .module-item.is-active .module-icon { border-color: rgba(255, 121, 24, 0.55); background: rgba(255, 121, 24, 0.15); }
:where(html.theme-dark) .nav-item { color: var(--muted-strong); }
:where(html.theme-dark) .nav-item.is-active .nav-index { color: var(--accent-text); }
:where(html.theme-dark) .nav-index { color: var(--muted); }
:where(html.theme-dark) .sidebar-divider { background: var(--line); }
:where(html.theme-dark) .side-link { color: var(--muted); }
:where(html.theme-dark) .side-link span { color: var(--accent-text); }
:where(html.theme-dark) .safety-mini { border-color: rgba(85, 217, 154, 0.24); background: rgba(85, 217, 154, 0.08); }
:where(html.theme-dark) .safety-mini > span { color: var(--green-text); background: rgba(85, 217, 154, 0.12); }
:where(html.theme-dark) .safety-mini strong { color: var(--green-text); }
:where(html.theme-dark) .studio-link:hover { color: var(--accent-text); }

/* Keep quick links and the safety notice in normal flow. The old absolute
   footer could cover the last quick link on shorter laptop viewports. */
:where(html.theme-dark) .sidebar {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
:where(html.theme-dark) .sidebar-bottom {
  position: static;
  margin-top: 20px;
  padding-bottom: 2px;
}

:where(html.theme-dark) .main-content { padding-top: 20px; }
:where(html.theme-dark) .hero { align-items: center; padding: 20px 0 20px; }
:where(html.theme-dark) .hero-copy { max-width: 680px; }
:where(html.theme-dark) .eyebrow { margin-bottom: 8px; }
:where(html.theme-dark) h1 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.055em; }
:where(html.theme-dark) h1 em { color: var(--accent-text); }
:where(html.theme-dark) h2 { font-size: 20px; }
:where(html.theme-dark) .hero-meta { border-left-color: var(--line-strong); }
:where(html.theme-dark) .hero-meta strong { color: var(--accent-text); }

:where(html.theme-dark) .context-strip, :where(html.theme-dark) .workspace-context-card, :where(html.theme-dark) .workspace-quick-panel, :where(html.theme-dark) .agent-entry-card, :where(html.theme-dark) .status-card, :where(html.theme-dark) .panel, :where(html.theme-dark) .project-workspace, :where(html.theme-dark) .context-live-item, :where(html.theme-dark) .next-card, :where(html.theme-dark) .module-card, :where(html.theme-dark) .compute-resource-card {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}
:where(html.theme-dark) .context-strip { margin-bottom: 10px; padding: 10px; }
:where(html.theme-dark) select, :where(html.theme-dark) input, :where(html.theme-dark) textarea { border-color: var(--line-strong); color: var(--text); background: var(--panel-soft); }
:where(html.theme-dark) select option { color: var(--text); background: var(--panel-raised); }
:where(html.theme-dark) select:focus, :where(html.theme-dark) textarea:focus, :where(html.theme-dark) input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 121, 24, 0.14); }
:where(html.theme-dark) .context-health { border-left-color: var(--line); }
:where(html.theme-dark) .context-health strong { color: var(--green-text); }

:where(html.theme-dark) .workspace-command-bar { gap: 10px; margin-bottom: 16px; }
:where(html.theme-dark) .workspace-context-card, :where(html.theme-dark) .workspace-quick-panel { padding: 12px; }
:where(html.theme-dark) .workspace-project-mark, :where(html.theme-dark) .quick-action-icon, :where(html.theme-dark) .workspace-summary-icon, :where(html.theme-dark) .status-icon-blue { color: var(--accent-text); background: rgba(255, 121, 24, 0.13); }
:where(html.theme-dark) .workspace-shortcut-hint { border-color: var(--line); }
:where(html.theme-dark) .quick-action { border-color: var(--line); background: var(--panel-raised); }
:where(html.theme-dark) .quick-action:hover, :where(html.theme-dark) .workspace-summary-card:hover, :where(html.theme-dark) .workspace-summary-card:focus-visible { border-color: rgba(255, 121, 24, 0.52); background: rgba(255, 121, 24, 0.09); }
:where(html.theme-dark) .agent-entry-card { border-color: rgba(255, 121, 24, 0.34); background: radial-gradient(circle at 88% 10%, rgba(255, 121, 24, 0.18), transparent 44%), linear-gradient(145deg, var(--dk-entry), var(--navy-deep)); }

:where(html.theme-dark) .next-card { border-color: rgba(255, 121, 24, 0.36); background: linear-gradient(110deg, var(--dk-next-a), var(--navy-deep) 68%, var(--dk-next-b)); }
:where(html.theme-dark) .next-card p, :where(html.theme-dark) .module-card p { color: var(--muted); }
:where(html.theme-dark) .next-badge { color: var(--accent-text); background: rgba(255, 121, 24, 0.14); }
:where(html.theme-dark) .next-visual { background: radial-gradient(circle at 50% 52%, rgba(255, 121, 24, 0.18), transparent 37%), var(--dk-next-visual); }
:where(html.theme-dark) .orbit { border-color: rgba(255, 121, 24, 0.28); }
:where(html.theme-dark) .visual-label { border-color: var(--line-strong); color: var(--muted-strong); background: rgba(9, 16, 25, 0.86); }
:where(html.theme-dark) .module-card-highlight { border-color: rgba(255, 121, 24, 0.38); background: linear-gradient(145deg, var(--dk-highlight), var(--navy-deep)); }
:where(html.theme-dark) .module-card-icon { color: var(--accent-text); border-color: rgba(255, 121, 24, 0.38); background: rgba(255, 121, 24, 0.12); }
:where(html.theme-dark) .module-card-link { color: var(--accent-text); }

:where(html.theme-dark) .status-card-main strong, :where(html.theme-dark) .context-live-item strong, :where(html.theme-dark) .workspace-summary-card strong { color: var(--text); }
:where(html.theme-dark) .status-icon-violet { color: var(--violet); background: rgba(169, 150, 255, 0.14); }
:where(html.theme-dark) .status-icon-green { color: var(--green-text); background: rgba(85, 217, 154, 0.14); }
:where(html.theme-dark) .status-icon-orange { color: var(--orange-text); background: rgba(255, 194, 103, 0.14); }
:where(html.theme-dark) .contract-check-list li, :where(html.theme-dark) .workspace-recent-row, :where(html.theme-dark) .deploy-timeline { border-top-color: var(--line); }
:where(html.theme-dark) .kit-illustration { border-color: var(--line); background: linear-gradient(135deg, rgba(255, 121, 24, 0.1), rgba(75, 137, 210, 0.08)); }
:where(html.theme-dark) .table-wrap, :where(html.theme-dark) table, :where(html.theme-dark) th, :where(html.theme-dark) td { border-color: var(--line); }
:where(html.theme-dark) th { color: var(--muted); background: rgba(7, 13, 20, 0.58); }
:where(html.theme-dark) td { color: var(--muted-strong); }
:where(html.theme-dark) .empty-inline, :where(html.theme-dark) .empty-state { color: var(--muted); }

:where(html.theme-dark) .command-palette { border-color: var(--line-strong); color: var(--text); background: var(--dk-palette); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52); }
:where(html.theme-dark) .command-palette::backdrop { background: rgba(2, 7, 12, 0.72); }
:where(html.theme-dark) .command-palette-search { border-color: var(--line-strong); background: var(--panel-soft); }
:where(html.theme-dark) .command-palette kbd { border-color: var(--line-strong); background: var(--panel); }
:where(html.theme-dark) .compute-resource-card { background: var(--panel-raised); }

@media (max-width: 1080px) {
  .app-shell { width: min(100% - 24px, 900px); }
  .shell-layout { grid-template-columns: 184px minmax(0, 1fr); gap: 16px; }
  .sidebar { padding-right: 10px; }
  .topbar-context { display: none; }
}
@media (max-width: 720px) {
  .app-shell { width: calc(100% - 20px); padding-top: 10px; }
  .topbar { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .shell-layout { display: block; }
  .sidebar { position: static; min-height: 0; padding: 12px 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-project { margin-bottom: 10px; }
  .workflow-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .nav-item { grid-template-columns: 1fr; gap: 2px; padding: 6px 4px; text-align: center; }
  .nav-item .nav-index { font-size:var(--fs-meta); }
  .nav-item strong { font-size:var(--fs-meta); }
  .nav-item small { display: none; }
  .sidebar-divider, .nav-label, .sidebar-bottom { display: none; }
  .main-content { padding-top: 12px; }
  .hero { display: block; padding-top: 8px; }
  .context-health { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .workspace-command-bar, .module-grid, .status-grid { grid-template-columns: 1fr; }
  .next-card { grid-template-columns: 1fr; }
}

/* Keep the primary hand-off compact, like a workstation command banner. The
   action, current recommendation and CTA remain on one visual line so the
   status cards below stay above the fold on a laptop display. */
.next-card {
  display: flex;
  min-height: 0;
  margin-bottom: 12px;
}
html.theme-dark .next-card { min-height: 0; }
.next-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
}
html.theme-dark .next-card-main { padding: 12px 16px; }
.next-card-main .button { margin-left: auto; white-space: nowrap; }
@media (max-width: 720px) {
  .next-card-main .button { grid-column: 1 / -1; margin-left: 0; justify-self: start; }
}

/* Chat drawer layout: the message column and the task inspector share one
   bounded row. This prevents the inspector's stacked cards from stretching
   the chat column and leaving an empty block under the last message. */
body.agent-chat-open .agent-chat-panel {
  display: flex;
  flex-direction: column;
  height: min(700px, calc(100vh - 112px));
  max-height: min(700px, calc(100vh - 112px));
}
body.agent-chat-open .agent-chat-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}
body.agent-chat-open .agent-chat-messages {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: auto;
}
body.agent-chat-open .agent-chat-side {
  min-height: 0;
  grid-template-rows: minmax(0, 1.2fr) minmax(0, .82fr) minmax(0, .82fr);
}
body.agent-chat-open .agent-chat-side > * {
  min-height: 0;
  overflow: auto;
}
body.agent-chat-open .agent-chat-composer { flex: 0 0 auto; }
@media (max-width: 720px) {
  body.agent-chat-open .agent-chat-panel {
    height: calc(100vh - 96px);
    max-height: calc(100vh - 96px);
  }
  body.agent-chat-open .agent-chat-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 1fr) auto;
  }
  body.agent-chat-open .agent-chat-side {
    max-height: 180px;
    grid-template-rows: repeat(3, minmax(52px, 1fr));
  }
}

/* -------------------------------------------------------------------------
   Product workspace cleanup
   Keep the persistent shell quiet and reserve visual weight for the active
   workflow. Project metadata is already present in the top bar/sidebar, so
   the command surface becomes a single, scannable action row.
------------------------------------------------------------------------- */

/* One content rail and quieter cards make each screen read as a single task.
   全屏下 1120px 左贴会在右侧留出数百像素空区（1920 视口实测 ~537px），
   看起来像"页面没做完"；居中后两侧留白对称，读线仍然收在 1120px。 */
.main-content { max-width: 1120px; margin-inline: auto; }
.context-strip select { min-height: 34px; padding: 6px 8px; font-size:var(--fs-meta); }
.context-health { min-height: 34px; padding: 4px 8px; }
.view-section { margin-top: 8px; }
.section-heading-lean { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.next-card-main { padding: 10px 12px; gap: 10px; }
.next-card .button { min-height: 32px; padding: 6px 10px; font-size:var(--fs-meta); }
.context-live { gap: 8px; margin-bottom: 10px; }
.context-live-item span { font-size:var(--fs-meta); }
.context-live-item strong { margin-top: 4px; font-size:var(--fs-meta); }
.status-grid { gap: 8px; margin-bottom: 12px; }
.status-card { min-height: 72px; padding: 10px; border-radius: 9px; box-shadow: none; }
.status-card-main { gap: 8px; }
.status-card-main strong { font-size:var(--fs-meta); }
.status-card p { margin-top: 4px; font-size: var(--fs-body); }
.workspace-summary-card strong { margin-top: 2px; font-size:var(--fs-meta); }
.workspace-summary-card em { margin-top: 2px; font-size:var(--fs-meta); }

/* Remove heavy elevation from all work surfaces; hierarchy comes from border,
   spacing and the orange action state. */
.panel, .status-card, .context-live-item, .project-workspace,
.workspace-quick-panel, .context-strip { box-shadow: none; }

@media (max-width: 1080px) {
  .main-content { max-width: none; }
}
/* ≤980px 走全宽后不需要居中；避免窄屏下 margin-inline: auto 与贴边布局
   叠加出不对称的内边距。 */
@media (max-width: 1080px) {
  .main-content { margin-inline: 0; }
}
@media (max-width: 720px) {
  .context-strip { grid-template-columns: 1fr 1fr; }
  .context-health { grid-column: 1 / -1; }
}

/* The inline next-step helper is a secondary hint, so keep it as a compact
   status row. The full task conversation remains available in the Agent
   drawer and should not compete with the primary workflow cards. */
html.theme-dark .agent-assistant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  box-shadow: none;
}
html.theme-dark .agent-assistant-header { min-width: 0; }
html.theme-dark .agent-assistant-title-wrap h2 { font-size: 15px; }
html.theme-dark .agent-assistant-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 0;
}
html.theme-dark .agent-assistant-lead p { display: none; }
html.theme-dark .agent-assistant-actions { margin-top: 6px; }
html.theme-dark .agent-assistant-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
html.theme-dark .agent-assistant-health { max-width: 150px; }
@media (max-width: 720px) {
  html.theme-dark .agent-assistant { display: block; }
  html.theme-dark .agent-assistant-body { display: block; margin-top: 8px; }
  html.theme-dark .agent-assistant-foot { margin-top: 8px; }
}

/* Agent feedback states stay legible while a long-running task is active.
   Light defaults use the semantic tokens; dark keeps the brighter hues. */
.agent-event-error span { color: var(--red-text); }
.agent-chat-runtime.is-busy { color: var(--orange-text); }
:where(html.theme-dark) .agent-event-error span { color: var(--dk-error-text); }
:where(html.theme-dark) .agent-chat-runtime.is-busy { color: var(--gold); }
.agent-chat-composer button[disabled] { opacity: .58; cursor: wait; }
.agent-chat-composer input:disabled { opacity: .72; }

/* -------------------------------------------------------------------------
   Status-color restoration (final layer).
   The generic badge reset above ("state-badge { color: var(--muted-strong) }")
   washed out the semantic state colors: same specificity, later position.
   Two-class selectors restore green/orange/red/running, and active work
   (running/queued) gets an accent tint plus a pulsing dot so live tasks
   scan differently from "waiting for input" at a glance. Border tints are
   the only theme-dependent literals: light defaults first, then
   :where(html.theme-dark) overrides (same specificity, later position).
------------------------------------------------------------------------- */
:where(html.theme-dark) .state-badge.state-success,
:where(html.theme-dark) .state-badge.state-ready { border-color: rgba(85, 217, 154, 0.3); }
:where(html.theme-dark) .state-badge.state-partial,
:where(html.theme-dark) .state-badge.state-warn { border-color: rgba(255, 194, 103, 0.3); }
:where(html.theme-dark) .state-badge.state-error { border-color: rgba(255, 116, 124, 0.3); }
:where(html.theme-dark) .state-badge.state-demo { border-color: rgba(169, 150, 255, 0.32); }
:where(html.theme-dark) .state-badge.state-running {
  border-color: rgba(255, 121, 24, 0.42);
  background: rgba(255, 121, 24, 0.1);
}
.state-badge.state-running::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  animation: state-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes state-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
  55% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.workspace-recent-dot.state-running { background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .state-badge.state-running::before { animation: none; }
}

/* Sidebar nav completion state: the nav-index column swaps its numeric
   prefix for a green ✓ once a loop stage is complete (app.js mirrors the
   workflow-progress strip states onto .nav-item). */
.nav-item.is-complete .nav-index {
  color: var(--green-text, var(--green));
  font-size:var(--fs-meta);
}
.nav-item.is-complete .nav-index::after {
  /* `/ ''` = 空的可访问名：字形只做视觉提示，不进无障碍树（否则读屏会把
     "✓" 当成独立文本念出来）。 */
  content: ' ✓' / '';
  color: var(--green-text, var(--green));
}
.nav-item.is-complete strong {
  color: var(--text);
}

/* Action-library keycaps: renderActionLibrary emits <kbd> so the simulator
   control hints read as physical keys (pressed bottom edge) instead of a
   flat orange string. */
.sim-action-item kbd {
  flex: 0 0 auto;
  max-width: 55%;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--muted-strong);
  background: var(--panel-raised, var(--panel));
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------- 触控目标下限（WCAG 2.5.5 / Apple HIG 44pt / Material 48dp） ----------
   实测：≤1080px 下可交互控件里 57–68% 低于 44px —— 顶栏的 ☰ / 主题切换 /
   新手指引 / 更多 / ⌘K、进度条 4 个步骤、品牌链接、「查看训练任务」都在 32–43px。

   两个设计决定：
   1) 按断点（≤1080px，侧栏变抽屉的同一条）而不是 pointer: coarse。coarse 在
      Playwright 下同一视口会给出不一致结果（390px 报 fine、820px 报 coarse），
      测不准；真实场景里带鼠标的混合设备、外接键鼠的平板同样报 fine，下限会
      静默失效。断点是确定性的。
   2) 只用元素/属性选择器，不引用任何组件的类名。这样既不会把"跨层选择器"
      计数推高（棘轮会拦），也避免波及行内文字链接 —— HIG 的 44pt 针对的是
      控件，Apple 明确豁免行内文字链接；文字链接由前面各层已有的
      24×24（WCAG 2.5.8 AA）兜底。
   3) 用 !important：后续十层里有 .cmdk-trigger{min-height:32px}、
      .button{min-height:32px} 等一堆同优先级声明，不加就被击穿。这是
      "可访问性下限"，语义上正是不该被组件级尺寸击穿的东西。 */
@media (max-width: 1080px) {
  button,
  [role='button'],
  [role='tab'],
  [role='menuitem'],
  [role='menuitemcheckbox'],
  select,
  summary,
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']) {
    min-height: 48px !important;
  }
  input[type='checkbox'],
  input[type='radio'] {
    min-width: 24px !important;
    min-height: 24px !important;
  }
  /* 纯图标按钮（☰ 抽屉开关、◐ 主题切换）宽度只有 34–40px：高度已到 48，
     补最小宽度，让可点区域两轴都达标。 */
  button:empty,
  button:has(> span[aria-hidden='true']:only-child),
  .sidebar-toggle,
  #theme-toggle {
    min-width: 48px !important;
  }
}

/* ======================== overview-clean.css — 总览页：信息密度与留白 ======================== */

/* Overview has one primary action and one project surface. Secondary system
   diagnostics stay available in a native disclosure instead of competing with
   the work itself. Existing data-rendering hooks are preserved in the markup. */
[data-view-section="overview"] .section-heading {
  align-items: flex-end;
  margin: 6px 0 24px;
  padding: 0;
  border: 0;
}
.overview-page-title h2 { font-size: 24px; font-weight: 650; letter-spacing: -.045em; }
[data-view-section="overview"] .section-caption { padding-bottom: 2px; font-size:var(--fs-meta); }
[data-view-section="overview"] .next-card {
  margin: 0 0 24px;
  border: 1px solid rgba(255, 121, 24, .28);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(255, 121, 24, .07), rgba(255, 121, 24, .015));
  box-shadow: none;
}
[data-view-section="overview"] .next-card-main { min-height: 82px; padding: 16px 20px; gap: 16px; }
[data-view-section="overview"] .next-card h3 { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.55; }
[data-view-section="overview"] .next-card .button { min-height: 36px; padding: 8px 16px; font-size:var(--fs-meta); white-space: nowrap; }
[data-view-section="overview"] .project-workspace { margin: 0 0 20px; padding: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
[data-view-section="overview"] .project-workspace-heading { margin: 0; padding: 20px 20px 16px; border: 0; }
[data-view-section="overview"] .project-workspace-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
[data-view-section="overview"] .workspace-last-saved, [data-view-section="overview"] .panel-caption { font-size:var(--fs-meta); }
[data-view-section="overview"] .workspace-summary-grid { gap: 0; margin: 0 20px 20px; padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: transparent; }
[data-view-section="overview"] .workspace-summary-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 150px; padding: 16px 16px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
[data-view-section="overview"] .workspace-summary-card:last-child { border-right: 0; }
[data-view-section="overview"] .workspace-summary-card:hover { transform: none; background: rgba(255,255,255,.025); }
[data-view-section="overview"] .workspace-summary-icon { width: 26px; height: 26px; border-radius: 7px; font-size:var(--fs-body); }
[data-view-section="overview"] .workspace-summary-card > span:last-child { display: block; width: 100%; min-width: 0; }
[data-view-section="overview"] .workspace-summary-card strong { margin-top: 8px; font-size: 14px; font-weight: 600; }
[data-view-section="overview"] .workspace-summary-card em { margin-top: 6px; font-size:var(--fs-meta); }
[data-view-section="overview"] .workspace-recent-row { margin: 0; padding: 20px 20px 16px; border-top: 1px solid var(--line); }
[data-view-section="overview"] .workspace-recent-heading { align-items: center; margin-bottom: 12px; font-size:var(--fs-body); }
[data-view-section="overview"] .workspace-recent-heading > div { display: flex; align-items: baseline; gap: 10px; }
.overview-records-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0 4px 10px; color: var(--muted); border: 0; background: transparent; font: inherit; font-size:var(--fs-meta); cursor: pointer;   min-height: 24px;
}
.overview-records-link:hover { color: var(--text); }
[data-view-section="overview"] .workspace-recent-list { gap: 0; }
[data-view-section="overview"] .workspace-recent-item { padding: 12px 0; border-radius: 0; border-top: 1px solid rgba(255,255,255,.04); }
[data-view-section="overview"] .workspace-recent-item:first-child { border-top: 0; }
[data-view-section="overview"] .workspace-recent-copy strong { font-size:var(--fs-meta); font-weight: 500; }
[data-view-section="overview"] .workspace-recent-copy small { margin-top: 4px; font-size:var(--fs-meta); }
.overview-environment { margin-bottom: 24px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.overview-environment > summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; list-style: none; cursor: pointer; }
.overview-environment > summary::-webkit-details-marker { display: none; }
.overview-environment > summary:hover { background: rgba(255,255,255,.02); }
.overview-environment-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; font-size: 16px; }
.overview-environment > summary > span:nth-child(2) { flex: 1; min-width: 0; }
.overview-environment > summary strong { display: block; font-size:var(--fs-meta); font-weight: 550; }
.overview-environment > summary small { display: block; margin-top: 4px; color: var(--muted); font-size:var(--fs-meta); }
.overview-environment-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size:var(--fs-meta); }
.overview-environment-toggle i { display: block; font-style: normal; font-size: 16px; transition: transform .15s; }
.overview-environment[open] .overview-environment-toggle i { transform: rotate(180deg); }
.overview-environment-body { padding: 0 16px 16px; }
.overview-environment .context-live { margin-top: 6px; }
.overview-environment .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.overview-environment .workspace-command-bar { margin: 16px 0 0; }
.overview-environment .workspace-quick-panel { padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.overview-environment .workspace-quick-panel .workspace-kicker { display: none; }
.overview-environment .workspace-quick-panel h3 { color: var(--muted); font-weight: 500; }
.overview-environment .agent-assistant { margin: 12px 0 0; }
@media (max-width: 1080px) {
  [data-view-section="overview"] .workspace-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-view-section="overview"] .workspace-summary-card { min-height: 140px; }
  [data-view-section="overview"] .workspace-summary-card:nth-child(2) { border-right: 0; }
  [data-view-section="overview"] .workspace-summary-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  [data-view-section="overview"] .section-heading { margin: 4px 0 20px; }
  .overview-page-title h2 { font-size: 22px; }
  .overview-page-title p { font-size: var(--fs-body); line-height: 1.6; }
  [data-view-section="overview"] .section-caption { display: none; }
  [data-view-section="overview"] .next-card-main { flex-wrap: wrap; gap: 10px; padding: 16px; }
  [data-view-section="overview"] .next-card h3 { flex-basis: calc(100% - 65px); font-size: 14px; }
  [data-view-section="overview"] .next-card .button { width: 100%; }
  [data-view-section="overview"] .project-workspace-heading { padding: 16px 16px; }
  [data-view-section="overview"] .workspace-summary-grid { margin: 0 16px 16px; }
  [data-view-section="overview"] .workspace-summary-card { padding: 12px 12px; }
  [data-view-section="overview"] .workspace-summary-card strong { font-size:var(--fs-meta); }
  [data-view-section="overview"] .workspace-recent-row { padding: 16px 16px 12px; }
  [data-view-section="overview"] .workspace-recent-heading > div > span { display: none; }
  .overview-environment > summary { padding: 16px; }
  .overview-environment-toggle { font-size: 0; gap: 0; }
  .overview-environment .status-grid { grid-template-columns: 1fr; }
}
/* Keep the sidebar safety notice in document flow. The previous absolute
   footer could cover quick links when the viewport is shorter than the nav. */
@media (min-width: 1081px) {
  .sidebar { display: flex; flex-direction: column; min-height: calc(100vh - 124px); overflow: visible; }
  .sidebar-bottom { position: static; margin-top: auto; padding-top: 16px; }
}

/* ======================== visual-polish.css — 视觉打磨：surface 与状态色 ======================== */

/* Focused visual polish: preserve the existing component vocabulary while
   making empty and partial states easier to scan. This layer intentionally
   contains no data or interaction rules. */

/* Grid items should size to their own content. Stretching the short action
   card to the height of a simulator/timeline makes the page look unfinished
   when a resource is not connected yet. */
.sim-layout,
.train-layout,
.deploy-layout,
.evaluation-grid {
  align-items: start;
}

.sim-layout > .panel,
.train-layout > .panel,
.deploy-layout > .panel,
.evaluation-grid > .panel {
  min-width: 0;
}

/* A missing adapter is a useful state, not a 500px blank canvas. Keep the
   empty state prominent while returning the next action to the first screen. */
.simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-frame-wrap {
  min-height: 388px;
}
.simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-frame-wrap iframe {
  height: 388px;
}
.simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-product-gate {
  align-content: center;
  padding: 32px clamp(24px, 6vw, 64px);
}
.simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-footer {
  margin-top: 8px;
}
.guide-panel {
  align-self: start;
}
.simulator-evidence-status {
  margin-left: auto;
  color: var(--muted);
  text-align: right;
}
.simulator-evidence-status.is-ready { color: var(--green-text); }
@media (max-width: 720px) {
  .simulator-footer { flex-wrap: wrap; }
  .simulator-evidence-status { margin-left: 0; width: 100%; text-align: left; }
}
.status-card-device { cursor: pointer; position: relative; }
.status-card-device:hover, .status-card-device:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.status-card-action { display: block; margin-top: 8px; color: var(--accent-text); font-size:var(--fs-meta); font-weight: 700; }
.first-run-path {
  /* 原本与上方卡片间距 0px（实测），补上纵向节奏。 */
  margin-top: 16px;
  padding: 20px;
}
.first-run-path-step:hover, .first-run-path-step:focus-visible, .first-run-path-step.is-current { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.first-run-path-step.is-current b { background:var(--accent-soft); color:var(--accent-text); }
.simulator-gate-steps {
  width: min(620px, 100%);
  margin: 16px auto 20px;
  padding-left: 24px;
  text-align: left;
  color: var(--muted);
  line-height: 1.55;
}
.simulator-gate-steps li + li { margin-top: 6px; }
.simulator-gate-steps strong { color: var(--text); font-size: inherit; }
.simulator-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Keep labels and values readable at the compact workstation scale. */
.status-card-main strong,
.context-live-item strong,
.workspace-summary-card strong {
  line-height: 1.35;
}
.status-card p,
.context-live-item span,
.workspace-summary-card small,
.workspace-summary-card em {
  line-height: 1.45;
}

/* Native selects should never force the context rail wider than the viewport. */
.context-strip .context-field,
.context-strip .context-field select {
  min-width: 0;
}
.context-strip .context-field select {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Use one consistent keyboard focus treatment for cards that are buttons. */
.workspace-summary-card:focus-visible,
.quick-action:focus-visible,
.nav-item:focus-visible,
.side-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-frame-wrap,
  .simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-frame-wrap iframe {
    min-height: 320px;
    height: 320px;
  }
  .simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-product-gate {
    padding: 24px 20px;
  }
  .simulator-product-gate strong {
    font-size: 18px;
    line-height: 1.35;
  }
  .simulator-product-gate p {
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-section,
  .button,
  .quick-action,
  .workspace-summary-card {
    animation: none !important;
    transition: none !important;
  }
}
.train-onboarding{margin:12px 0 16px;padding:16px 20px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:14px;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 10%,transparent),var(--panel));}
.submodule-tabs{display:flex;gap:8px;margin:12px 0 12px;padding:4px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel-soft);overflow:auto}
.submodule-tab{flex:1;min-width:150px;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted-strong);text-align:left;font:inherit;cursor:pointer;transition:.18s ease}
.submodule-tab small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-meta)}
.submodule-tab:hover,.submodule-tab:focus-visible{border-color:var(--line-strong);outline:none;color:var(--text)}
.submodule-tab.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.submodule-tab.is-active small{color:var(--accent-text)}
.view-section[data-active-train-module="contract"] .compute-resources-panel{display:none}
.train-layout[data-train-active-module="resources"] > [data-train-module="run"]{display:none}
.train-layout[data-train-active-module="resources"] > .compute-resources-panel{grid-column:1 / -1}
.view-section[data-active-train-module="contract"] .train-onboarding{opacity:.72}
.view-section[data-active-train-module="contract"] .contract-fold{display:block}
.view-section[data-active-train-module="contract"] .train-layout{display:none}
.view-section[data-active-train-module="resources"] .train-onboarding{opacity:.72}
.view-section[data-active-train-module="resources"] .contract-fold{display:none}
.view-section[data-active-train-module="resources"] .train-layout{display:grid}
.view-section[data-active-train-module="resources"] .train-layout > [data-train-module="run"]{display:none}
/* D-002 forced exclusion: #train-module-config nests inside the run
   model-panel, so it must be hidden explicitly wherever another module is
   active — otherwise the config form leaks into the Run/Resources views. */
.train-layout[data-train-active-module="run"] > [data-train-module="run"] > #train-module-config,
.train-layout[data-train-active-module="resources"] > [data-train-module="run"] > #train-module-config{display:none}
.view-section[data-active-train-module="run"] .contract-fold,
.view-section[data-active-train-module="run"] .compute-resources-panel{display:none}
.view-section[data-active-train-module="config"] .contract-fold,
.view-section[data-active-train-module="config"] .compute-resources-panel,
.view-section[data-active-train-module="config"] .robogo-panel{display:none}
.view-section[data-active-train-module="config"] .train-layout{display:block}
.view-section[data-active-train-module="config"] .model-panel > :not(#train-module-config):not(#course-advanced-training){display:none}
.view-section[data-active-train-module="config"] #train-module-config{display:block;margin:0}
.station-layout[data-active-station-module] > [data-station-module]{display:none}.station-layout[data-active-station-module="telemetry"] > [data-station-module="telemetry"],
.station-layout[data-active-station-module="control"] > [data-station-module="control"],
.station-layout[data-active-station-module="policy"] > [data-station-module="policy"],
.station-layout[data-active-station-module="diagnostics"] > [data-station-module="diagnostics"]{display:block}
.station-control-contract{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 12px;padding:10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel-soft)}
.station-control-contract div{min-width:0}.station-control-contract span,.station-control-contract strong{display:block}.station-control-contract span{color:var(--muted);font-size:var(--fs-meta)}.station-control-contract strong{margin-top:2px;color:var(--text);font-size:var(--fs-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.station-control-contract{grid-template-columns:1fr}}
.view-section[data-active-station-module]:not([data-active-station-module="devices"]) .station-device-manager{display:none}
.view-section[data-active-station-module="devices"] .station-layout{display:none}
.view-section[data-active-station-module="devices"] .station-device-manager{display:block}
.view-section[data-active-eval-module="comparison"] .evaluation-grid{display:none}
.view-section[data-active-eval-module="run"] .evaluation-evidence{display:none}
.view-section[data-active-eval-module="comparison"] .telemetry-panel{display:none}
.view-section[data-active-deploy-module="feedback"] #preflight-panel{display:none}
.view-section[data-active-deploy-module="preflight"] #feedback-panel{display:none}
.view-section[data-active-deploy-module] .deploy-layout{grid-template-columns:minmax(0,1fr)}
@media (max-width:720px){.submodule-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-left:-2px;margin-right:-2px;overflow:visible}.submodule-tab{min-width:0;width:100%;padding:8px 10px}}
.flow-context-strip{display:flex;align-items:center;gap:12px;margin:8px 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:transparent;}
.flow-context-copy{min-width:0;flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.flow-context-kicker{margin:0;color:var(--muted-strong);font-size:var(--fs-meta)}.flow-context-copy h2{margin:0;font-size:var(--fs-section-title);font-weight:600;line-height:1.3;letter-spacing:-.02em}.flow-context-copy p{margin:0;color:var(--muted-strong);font-size:var(--fs-meta);line-height:1.4}
.flow-focus-target{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);}
/* 子界面分割（D-002）：评测与部署的多子项共享视图内，面板互斥显隐——
   一次只展示当前子项自己的内容，与训练页模块切换同构。 */
[data-view-section="evaluate"][data-active-eval-module="run"] .evaluation-evidence{display:none}
[data-view-section="evaluate"][data-active-eval-module="comparison"] #evaluation-run-panel{display:none}
[data-view-section="deploy"][data-active-deploy-module="preflight"] #feedback-panel{display:none}
[data-view-section="deploy"][data-active-deploy-module="feedback"] #preflight-panel{display:none}@media (max-width:720px){.flow-context-strip{align-items:flex-start;padding:8px 12px}#flow-context .flow-context-copy h2{font-size:var(--fs-section-title)}}
.module-step-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 16px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft)}
.module-step{display:flex;align-items:center;gap:8px;min-width:0;padding:10px 12px;border:1px solid transparent;border-radius:8px}.module-step>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--panel-raised);color:var(--muted-strong);font-size:var(--fs-meta);font-weight:700}.module-step strong{display:block;font-size:13px}.module-step small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-meta)}.module-step.is-current{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}.module-step.is-current>span{background:var(--accent);color:var(--accent-contrast,var(--panel))}
.view-section[data-active-train-module="config"] .model-panel>.panel-heading{display:flex}
@media (max-width:720px){.module-step-strip{grid-template-columns:1fr}}
.model-empty-guide{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px}.model-empty-guide strong{font-size:17px}.model-empty-guide span{color:var(--muted);font-size:var(--fs-meta)}.model-empty-guide .button{margin-top:4px}
.train-onboarding-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.train-onboarding h3{margin:2px 0 0;font-size:20px}.train-onboarding-note{color:var(--accent-text);font-size:var(--fs-meta);padding-top:6px}.train-onboarding .eyebrow{color:var(--accent-text);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase}.train-onboarding-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.train-onboarding-step{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft)}.train-onboarding-step b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--panel-raised);color:var(--muted-strong)}.train-onboarding-step strong,.train-onboarding-step small{display:block}.train-onboarding-step small{margin-top:2px;color:var(--muted);font-size:var(--fs-meta)}.train-onboarding-step.is-current{border-color:var(--accent)}.train-onboarding-step.is-current b{background:var(--accent-soft);color:var(--accent-text)}.train-onboarding-help{margin:12px 0 0;color:var(--muted-strong);font-size:var(--fs-meta)}.panel-tip{color:var(--muted);font-size:var(--fs-meta);font-weight:400}.manifest-panel h2{margin-bottom:2px}
@media (max-width:720px){.train-onboarding-steps{grid-template-columns:1fr}.train-onboarding-heading{display:block}.train-onboarding-note{display:block}}

/* Unified workspace refresh: one clear hierarchy across all modules.
   --surface-1/2 are this layer's own panel tokens: light resolves them to
   the Aurora panel scale, dark keeps the original navy literals. The old
   --line/--accent/--muted re-declarations here were dead code in the
   dark-only shell (shadowed by body-level tokens) and are removed: had
   they stayed, this late-loading layer would have overridden the operator
   token block now that all dark tokens resolve at html level. */


.view-section{max-width:1180px;margin:0 auto;padding:24px 32px 64px}
.section-heading{margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:16px}
.section-heading h2{font-size:26px;letter-spacing:-.02em;margin:0}
.panel{border:1px solid var(--line);border-radius:12px;background:var(--surface-1);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.panel+.panel{margin-top:16px}
.submodule-tabs{margin:0 0 16px;border:0;background:var(--surface-1);padding:4px;border-radius:10px}
.submodule-tab{min-height:54px;padding:10px 16px}
.submodule-tab.is-active{background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);color:var(--text)}
.train-onboarding{margin:0 0 16px;padding:16px 20px;border-color:var(--line);background:var(--surface-1);box-shadow:none}
.train-onboarding h3{font-size:18px}
.train-onboarding-steps{gap:8px;margin-top:12px}
.train-onboarding-step{padding:12px;border-radius:10px}
.train-onboarding-help{margin-top:10px;color:var(--muted)}
@media(max-width:720px){.view-section{padding:20px 16px 40px}.section-heading h2{font-size:22px}.train-onboarding{padding:16px}.train-onboarding-steps{gap:8px}}

/* ======================== onboarding.css — 新手指引浮层 ======================== */

.onboarding-overlay[hidden] { display: none; }
.onboarding-overlay { position: fixed; inset: 0; z-index: var(--z-tour); color: var(--text); }
.onboarding-scrim { position: absolute; inset: 0; background: rgba(3, 8, 14, .72); backdrop-filter: blur(2px); }
.onboarding-spotlight { position: fixed; z-index: 1; pointer-events: none; border: 2px solid rgba(255, 145, 65, .95); border-radius: 10px; box-shadow: 0 0 0 5px rgba(255, 121, 24, .18), 0 0 34px rgba(255, 121, 24, .35); animation: onboarding-pulse 1.8s ease-in-out infinite; transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease; }
.onboarding-card { position: fixed; z-index: 2; width: min(390px, calc(100vw - 32px)); padding: 20px 20px 16px; border: 1px solid rgba(255, 145, 65, .52); border-radius: 14px; background: linear-gradient(145deg, rgba(25, 35, 56, .98), rgba(12, 20, 34, .98)); box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset; animation: onboarding-card-in .22s ease both; }
.onboarding-card.is-centered { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.onboarding-card-top, .onboarding-card-foot, .onboarding-actions, .onboarding-progress { display: flex; align-items: center; }
.onboarding-card-top { justify-content: space-between; }
/* The tour card keeps a deliberately dark surface in BOTH themes (it sits on a
   dark scrim), so its text colours are pinned to light values instead of
   inheriting var(--text)/var(--muted). Previously the surface was hardcoded
   dark while the text followed the theme, so light theme rendered #1b1b18 on
   the dark gradient — the title and footer were unreadable. */
.onboarding-card { color: var(--ice, var(--orange-200)); }
.onboarding-kicker { color: var(--accent-pale, var(--orange-200)); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.onboarding-close { width: 28px; height: 28px; border: 1px solid rgba(214, 224, 255, .3); border-radius: 7px; color: var(--mist-deep, var(--orange-200)); background: transparent; font-size: 19px; line-height: 1; cursor: pointer; }
.onboarding-close:hover { color: var(--ice-soft, var(--orange-200)); border-color: var(--accent); }
.onboarding-progress { gap: 10px; margin-top: 16px; color: var(--muted-cool-soft, var(--orange-200)); font-size:var(--fs-meta); }
.onboarding-progress-label { white-space: nowrap; }
.onboarding-progress-track { flex: 1; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); }
.onboarding-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold-glow)); transition: width .25s ease; }
.onboarding-card h2 { margin: 16px 0 8px; color: var(--ice-soft, var(--orange-200)); font-size: 20px; letter-spacing: -.025em; }
.onboarding-body { margin: 0; color: var(--mist-soft, var(--orange-200)); font-size:var(--fs-body); line-height: 1.7; }
.onboarding-best { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 12px; padding: 10px 10px; border: 1px solid rgba(255, 121, 24, .3); border-radius: 8px; background: rgba(255, 121, 24, .12); }
.onboarding-best span { color: var(--accent-pale, var(--orange-200)); font-size:var(--fs-meta); font-weight: 650; white-space: nowrap; }
.onboarding-best p { margin: 0; color: var(--mist-soft, var(--orange-200)); font-size: var(--fs-body); line-height: 1.55; }
.onboarding-card-foot { justify-content: space-between; gap: 12px; margin-top: 16px; }
.onboarding-time { color: var(--muted-cool-soft, var(--orange-200)); font-size:var(--fs-meta); }
.onboarding-actions { gap: 6px; }
.onboarding-actions .button { min-height: 31px; }
/* Secondary tour buttons must read as light chips on the dark card in both
   themes, instead of following the light/dark .button surface. */
.onboarding-actions .button:not(.button-primary) { color: var(--ice, var(--orange-200)); border-color: rgba(214, 224, 255, .3); background: rgba(255, 255, 255, .08); }
.onboarding-actions .button:not(.button-primary):hover { color: var(--white); background: rgba(255, 255, 255, .16); }
.onboarding-actions .button-primary { min-width: 88px; }
body.onboarding-open { overflow: hidden; }

/* Keep the tour readable when a browser still serves an older token sheet
   without the cool-palette aliases. The current tokens win; the orange
   accent is the compatibility fallback for the intentionally dark card. */
@keyframes onboarding-pulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes onboarding-card-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 560px) { .onboarding-card { padding: 16px; } .onboarding-card h2 { font-size: 18px; } .onboarding-body { font-size: var(--fs-body); } .onboarding-card-foot { align-items: flex-end; } .onboarding-time { max-width: 65px; line-height: 1.35; } .onboarding-actions .button { padding-inline: 8px; font-size:var(--fs-meta); } }
@media (prefers-reduced-motion: reduce) { .onboarding-spotlight, .onboarding-card { animation: none; transition: none; } .onboarding-progress-track i { transition: none; } }

/* ======================== refactor-ia.css — 信息架构：context strip 与模块折叠 ======================== */

/* IA refactor layer: aligns the shell with the RDK Studio pattern —
   one navigation surface, read-only context strip, per-page selectors.
   This layer only repositions existing components; it does not redefine
   the design tokens or component vocabulary. */

/* ---- Top menu (replaces the four always-on topbar buttons) ---- */
.top-menu { position: relative; }
.top-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-raised, var(--panel));
  box-shadow: 0 18px 44px rgba(6, 10, 18, 0.5);
}
.top-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--muted-strong);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.top-menu-item:hover { color: var(--text); background: rgba(127, 169, 255, 0.08); }
.top-menu-account { cursor: default; }
.top-menu-account:hover { color: var(--muted-strong); background: transparent; }
.top-menu-account-name {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-menu-item[aria-pressed="true"]::after,
.top-menu-item[aria-checked="true"]::after {
  content: "✓" / '';
  color: var(--green-text);
  font-size:var(--fs-meta);
}

/* ---- Sidebar: product select inside the project card ---- */
.sidebar-project select {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size:var(--fs-meta);
}

/* ---- Context strip: read-only status chips (no selectors) ---- */
.context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 16px;
  background: var(--panel-raised);
}
.context-strip .context-live {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
}
.context-strip .context-live-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.context-strip .context-live-item span {
  color: var(--muted);
  font-size:var(--fs-meta);
  white-space: nowrap;
}
.context-strip .context-live-item strong {
  max-width: 220px;
  overflow: hidden;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-strip .context-health {
  min-width: 0;
  border-left: 0;
  padding: 0;
}

/* ---- Overview: agent panel is the primary surface after the workspace ---- */
[data-view-section="overview"] .agent-assistant { margin-top: 12px; }

/* ---- Train page: contract registration as a collapsed fold ---- */
.contract-fold {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.contract-fold > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  list-style: none;
  cursor: pointer;
}
.contract-fold > summary::-webkit-details-marker { display: none; }
.contract-fold > summary:hover { background: rgba(255, 255, 255, 0.02); }
.contract-fold > summary > span:nth-child(2) { flex: 1; min-width: 0; }
.contract-fold > summary strong { display: block; font-size:var(--fs-body); font-weight: 600; }
.contract-fold > summary small { display: block; margin-top: 2px; color: var(--muted); font-size:var(--fs-meta); }
.contract-fold[open] .overview-environment-toggle i { transform: rotate(180deg); }
.contract-fold > .records-layout { padding: 4px 12px 16px; }

/* Train page: model select beside the contract-run button */
.model-panel-select { display: flex; gap: 8px; align-items: center; }
.model-panel-select select { min-width: 230px; }

/* Sim page: task selector panel */
.sim-context-panel { margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; }
.guide-panel .side-link { margin: 12px 0 12px; }

/* Deploy page: device selector */
.deploy-device-select { margin: 4px 0 12px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 10px; }

/* ---- Agent drawer: example prompt chips ---- */
.agent-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}
.agent-prompt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted-strong);
  background: transparent;
  font: inherit;
  font-size: var(--fs-meta);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.agent-prompt-chip strong {
  color: var(--accent-text);
  font-weight: 600;
}
.agent-prompt-chip:hover {
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(86, 212, 255, 0.07);
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .context-strip { padding: 10px 12px; }
  .context-strip .context-live { gap: 2px 16px; }
  .context-strip .context-live-item strong { max-width: 150px; }
}
@media (max-width: 720px) {
  .context-strip .context-health { flex: 1 1 100%; }
  .model-panel-select { flex-wrap: wrap; }
  .model-panel-select select { min-width: 0; flex: 1 1 100%; }
}

/* ---- Agent task card: conversation-native progress artifact ----
   One card per task inside the message flow: goal + status badge,
   progress bar, live checklist, and jump-to-evidence links. The chat
   bubbles stay for narration; the card is the glanceable state. */
.agent-task-card {
  display: grid;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(255, 211, 107, 0.75);
  border-radius: 10px;
  background: var(--panel-soft, rgba(7, 12, 27, 0.5));
}
.agent-task-card[data-run-status="completed"] { border-left-color: var(--mint); }
.agent-task-card[data-run-status="failed"] { border-left-color: var(--coral); }
.agent-task-card[data-run-status="partial"] { border-left-color: var(--gold); }
.agent-task-card[data-run-status="blocked"] { border-left-color: var(--gold); }
/* 历史会话回放的任务卡：只读证据快照，不能续跑。 */
.agent-task-card-restored { border-style: dashed; }
.agent-task-card-restored[data-run-status="completed"] { border-left-style: solid; }
/* 计划选择器（Bakusevych #2）：同一目标的确定性再裁剪，操作员点选后才开始执行。 */
.agent-plan-picker {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft, rgba(7, 12, 27, 0.5));
}
.agent-plan-picker.is-answered { opacity: 0.75; }
.agent-plan-picker-intro { font-size:var(--fs-meta); color: var(--muted); }
.agent-plan-picker-list { display: grid; gap: 6px; }
.agent-plan-option {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.agent-plan-option:hover { border-color: var(--accent, var(--sky-soft)); }
.agent-plan-option.is-default { border-color: var(--accent, var(--sky-soft)); }
.agent-plan-option strong { font-size:var(--fs-body); }
.agent-plan-option small { color: var(--muted); font-size:var(--fs-meta); }
.agent-plan-option span { color: var(--muted-strong); font-size:var(--fs-meta); line-height: 1.4; }
.agent-plan-picker .agent-plan-cancel { justify-self: start; }
.agent-task-restored-note {
  color: var(--muted);
  font-size:var(--fs-meta);
}
.agent-task-head { display: flex; align-items: center; gap: 10px; }
.agent-task-head strong { font-size:var(--fs-body); line-height: 1.35; }
.agent-task-badge {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  white-space: nowrap;
}
.agent-task-badge-running { border-color: rgba(255, 211, 107, 0.5); color: var(--gold); }
.agent-task-badge-completed { border-color: rgba(116, 230, 176, 0.5); color: var(--mint); }
.agent-task-badge-failed, .agent-task-badge-blocked { border-color: rgba(255, 144, 152, 0.5); color: var(--coral); }
.agent-task-badge-partial { border-color: rgba(255, 211, 107, 0.5); color: var(--gold); }
.agent-task-progress {
  height: 4px;
  border-radius: 2px;
  background: rgba(134, 144, 170, 0.25);
  overflow: hidden;
}
.agent-task-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(86, 212, 255, 0.8), var(--mint));
  transition: width 0.35s ease;
}
.agent-task-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.agent-task-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size:var(--fs-meta);
  color: var(--muted-strong);
}
.agent-task-steps li em { margin-left: auto; font-style: normal; font-size:var(--fs-meta); }
.agent-task-steps li[data-step-status="completed"] { color: var(--text); }
.agent-task-steps li[data-step-status="completed"] em { color: var(--mint); }
.agent-task-steps li[data-step-status="running"] { color: var(--text); }
.agent-task-steps li[data-step-status="running"] em { color: var(--gold); }
.agent-task-steps li[data-step-status="failed"] em,
.agent-task-steps li[data-step-status="blocked"] em { color: var(--coral); }
.agent-task-evidence { display: grid; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--line); font-size:var(--fs-meta); }
.agent-task-evidence a { color: var(--sky-text); text-decoration: none; }
.agent-task-evidence a:hover { text-decoration: underline; }

/* Collapsible full event history in the side panel. */
.agent-event-more summary {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-meta);
  cursor: pointer;
  user-select: none;
}
.agent-event-more[open] summary { color: var(--cyan); margin-bottom: 4px; }

/* ======================== overview-density.css — 总览页字号阶梯（12/13/15/24） ======================== */

/* Typography scale + overview density normalization.
   The shell already carries one design-token truth per theme; this layer maps
   the remaining hard-coded font sizes of the overview work surface onto a
   four-step scale — 11 / 13 / 15 / 24 — and shrinks the collapsed environment
   drawer from four status cards to one inline strip, so the first screen
   carries at most six panel-level surfaces. */

/* ---- Step 1: map stray sizes to the scale ---- */
[data-view-section="overview"] .workspace-summary-card em,
[data-view-section="overview"] .workspace-recent-heading .overview-records-link span,
[data-view-section="overview"] .status-card p { font-size: var(--fs-body); }

[data-view-section="overview"] .section-caption,
[data-view-section="overview"] .next-badge,
[data-view-section="overview"] .panel-caption,
[data-view-section="overview"] .workspace-summary-card small,
[data-view-section="overview"] .workspace-recent-heading > div > span,
[data-view-section="overview"] .overview-records-link { font-size:var(--fs-meta); }

[data-view-section="overview"] .next-card .button,
[data-view-section="overview"] .agent-assistant .button,
[data-view-section="overview"] .agent-assistant-action,
[data-view-section="overview"] .overview-environment summary strong { font-size:var(--fs-body); }

[data-view-section="overview"] .overview-page-title p,
[data-view-section="overview"] .workspace-summary-icon,
[data-view-section="overview"] .workspace-recent-heading > div > strong { font-size:var(--fs-body); }

[data-view-section="overview"] .workspace-summary-card strong,
[data-view-section="overview"] .empty-inline,
[data-view-section="overview"] .agent-assistant .panel-kicker { font-size: 15px; }

[data-view-section="overview"] .project-workspace-heading h2,
[data-view-section="overview"] .agent-assistant-title-wrap h2,
[data-view-section="overview"] .agent-assistant-lead strong { font-size: 15px; }

[data-view-section="overview"] .next-card h3,
[data-view-section="overview"] .overview-environment summary .overview-environment-icon,
[data-view-section="overview"] .overview-environment-toggle i { font-size: 15px; }

[data-view-section="overview"] .agent-assistant-mark { font-size: 15px; }
[data-view-section="overview"] .agent-assistant-mode { font-size:var(--fs-meta); }

/* ---- Step 2: environment drawer becomes one inline strip ---- */
[data-view-section="overview"] .overview-environment .status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 4px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
[data-view-section="overview"] .overview-environment .status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
[data-view-section="overview"] .overview-environment .status-card-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-view-section="overview"] .overview-environment .status-card-main strong { font-size:var(--fs-body); }
[data-view-section="overview"] .overview-environment .status-icon {
  width: 24px;
  height: 24px;
  font-size:var(--fs-body);
}
[data-view-section="overview"] .overview-environment .status-card p {
  max-width: 340px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ======================== product-polish.css — 产品化打磨：面板、Agent 抽屉、station 布局 ======================== */

/* Product polish: one calm, editorial system on top of the legacy component CSS.
   Both themes are live now (see the boot script in index.html): colors come
   from the theme tokens, and any dark-only literals sit behind
   :where(html.theme-dark) overrides with light defaults first. */


/* Layout-only polish: sizing, rhythm and radii. All colors continue to come
   from the theme-dark tokens in styles.css so this layer stays theme-safe. */
.brand { gap: 10px; }
.button { min-height: 34px; border-radius: 8px; padding: 6px 12px; font-size:var(--fs-meta); }
.sidebar-project { margin-bottom: 24px; padding: 8px; border-radius: 11px; background: var(--panel); }
.sidebar-project-icon { width: 28px; height: 28px; border-radius: 8px; }
.nav-label { margin: 0 10px 6px; font-size:var(--fs-meta); letter-spacing: .12em; }
.workflow-nav { gap: 2px; }
.nav-item { min-height: 38px; border-radius: 8px; padding: 8px 10px; }
.nav-item.is-active { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.nav-item strong { font-size:var(--fs-meta); }
.sidebar-divider-compact { margin: 20px 10px; }
.safety-mini { border-radius: 10px; padding: 8px; }
.context-strip { margin-bottom: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.context-live { gap: 0; }
.context-live-item { min-height: 58px; padding: 10px 16px; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.context-live-item:last-child { border-right: 0; }
.context-health { border-left: 1px solid var(--line); border-radius: 0; }
.section-heading { margin-bottom: 16px; }
.overview-page-title h2 { font-size: 27px; letter-spacing: -.045em; }
.overview-page-title p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-body); }
.next-card { grid-template-columns: 1fr 190px; min-height: 164px; margin-bottom: 16px; border-radius: 14px; }
.next-card-main { padding: 24px 24px; }
.next-card h3 { margin: 12px 0 16px; font-size: 22px; }
.project-workspace { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.project-workspace-heading { padding: 16px 16px; border-bottom: 1px solid var(--line); }
.project-workspace-heading h2 { font-size: 16px; }
.workspace-summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; padding: 0; }
.workspace-summary-card { min-height: 92px; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 16px; }
.workspace-summary-card:last-child { border-right: 0; }
.workspace-summary-icon { width: 28px; height: 28px; border-radius: 8px; }
.workspace-summary-card small { margin-top: 8px; font-size:var(--fs-meta); }
.workspace-summary-card strong { font-size:var(--fs-body); }
.workspace-summary-card em { font-size:var(--fs-meta); }
.workspace-recent-row { padding: 12px 16px 16px; border-top: 1px solid var(--line); }

.panel { border-color: var(--line); border-radius: 12px; box-shadow: none; }
.section-heading-lean h2 { font-size: 22px; }
.agent-chat-panel { border-radius: 14px; box-shadow: var(--shadow); }
body.agent-chat-open .agent-chat-panel { right: 16px; bottom: 72px; width: min(1120px, calc(100vw - 32px)); height: min(760px, calc(100vh - 88px)); max-height: min(760px, calc(100vh - 88px)); padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--panel-raised); box-shadow: var(--shadow); }
body.agent-chat-open .agent-chat-heading { min-height: 64px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--panel); }
body.agent-chat-open .agent-chat-heading h2 { font-size: 18px; }
body.agent-chat-open .agent-chat-layout { grid-template-columns: 168px minmax(0, 1fr) 272px; gap: 0; margin-top: 0; min-height: 0; }
.agent-chat-sessions { min-width: 0; overflow: auto; padding: 16px 10px; border-right: 1px solid var(--line); background: var(--panel-soft); }
.agent-new-session, .agent-session-item { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; color: var(--text); text-align: left; background: transparent; cursor: pointer; font: inherit; font-size:var(--fs-meta); }
.agent-new-session { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.agent-session-label { margin: 20px 8px 6px; color: var(--muted); font-size:var(--fs-meta); }
.agent-session-item { border-color: transparent; color: var(--muted-strong); }
.agent-session-item.is-active, .agent-session-item:hover { background: var(--panel-soft); color: var(--text); }
body.agent-chat-open .agent-chat-messages { max-height: none; padding: 24px; border: 0; border-radius: 0; background: var(--bg); scrollbar-gutter: stable; }
body.agent-chat-open .agent-chat-message { max-width: min(680px, 88%); margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); line-height: 1.58; }
body.agent-chat-open .agent-chat-message-user { max-width: min(560px, 82%); margin-left: auto; border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
body.agent-chat-open .agent-chat-side { display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 0; min-width: 0; padding: 12px; border-left: 1px solid var(--line); background: var(--panel-soft); }
body.agent-chat-open .agent-chat-side > * { min-width: 0; min-height: 0; max-height: none; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
body.agent-chat-open .agent-chat-composer { gap: 10px; margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--panel); }
body.agent-chat-open .agent-chat-composer input { min-height: 44px; border-color: var(--line-strong); border-radius: 10px; background: var(--panel-soft); }
@media (max-width: 720px) { body.agent-chat-open .agent-chat-panel { right: 12px; bottom: 72px; width: calc(100vw - 24px); } body.agent-chat-open .agent-chat-layout { grid-template-columns: 1fr; } body.agent-chat-open .agent-chat-sessions, body.agent-chat-open .agent-chat-side { display: none; } }

/* Overview owns orientation only. Detailed agent and environment controls live
   behind their dedicated navigation entries, so the landing view stays calm. */
[data-view-section="overview"] .agent-assistant { display: none !important; }
[data-view-section="overview"] { max-width: 1040px; }
[data-view-section="overview"] .next-card { margin-top: 20px; }
[data-view-section="overview"] .project-workspace { margin-top: 20px; }

/* Host station: single fluid column keeps the live board panel usable even
   when an empty state has long, unbroken labels. The theme-dark product shell
   stacks the station panels vertically; no !important guards are needed once
   this layer is the only station-layout voice. */
.station-layout { display: block; width: 100%; min-width: 0; }
.station-layout > * { margin: 0 0 16px; }
.station-status-panel, .station-camera-panel, .station-command-panel, .station-drive-panel { min-width: 0; width: 100%; }
.station-metric-grid, .station-tele-grid, .station-command-grid { min-width: 0; }
.station-metric-card { min-width: 0; }
.station-metric-label, .station-metric-sub, .station-device-line { overflow-wrap: anywhere; }
.station-studio-connect { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 16px; padding: 12px 12px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.station-studio-connect strong, .station-studio-connect small { display: block; }
.station-studio-connect strong { font-size:var(--fs-body); }
.station-studio-connect small { margin-top: 2px; color: var(--muted); font-size:var(--fs-meta); }
.station-connect-script { margin: 0 0 16px; padding: 12px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-soft); }
.station-connect-script strong, .station-connect-script small { display: block; }
.station-connect-script small { margin: 2px 0 8px; color: var(--muted); font-size:var(--fs-meta); }
.station-connect-script textarea { width: 100%; min-height: 72px; resize: vertical; color: var(--text); background: var(--bg); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.manifest-explainer { display: grid; gap: 4px; margin: 0 0 12px; padding: 12px 12px; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 9px; background: var(--panel-soft); }
.manifest-explainer strong { font-size:var(--fs-body); }
.manifest-explainer span, .manifest-explainer em { color: var(--muted); font-size: var(--fs-body); font-style: normal; }
.manifest-explainer em { color: var(--accent-text); }
.train-onboarding-step.is-complete { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
/* 白字压 var(--green) 实测 3.3:1（浅）/2.2:1（深），换 soft 底 + 语义文字色，
   与 .status-icon-green 同一模式。 */
.train-onboarding-step.is-complete b { color: var(--green-text); background: var(--green-soft); }
.train-onboarding-step.is-complete strong::after { content: ' ✓' / ''; color: var(--green-text); }
.train-onboarding-step[role="button"] { cursor: pointer; }
.train-onboarding-step[role="button"]:hover,
.train-onboarding-step[role="button"]:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-1px); }
@media (max-width: 560px) { .station-studio-connect { align-items: flex-start; flex-direction: column; } }

@media (max-width: 720px) {
  .app-shell { width: min(100% - 32px, 720px); }
  .shell-layout { grid-template-columns: 1fr; gap: 12px; }
  .sidebar { position: static; min-height: 0; padding: 12px 0 0; }
  .sidebar-bottom, .sidebar-divider, .sidebar > .nav-label:nth-of-type(2) { display: none; }
  .workflow-nav { grid-template-columns: repeat(4,1fr); }
  .workflow-nav:first-of-type { grid-template-columns: repeat(2,1fr); }
  .nav-item { grid-template-columns: 20px 1fr; }
  .main-content { padding-top: 8px; }
  .workspace-summary-grid, .status-grid { grid-template-columns: repeat(2,1fr); }
  .workspace-summary-card:nth-child(2) { border-right: 0; }
  .workspace-summary-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .app-shell { width: calc(100% - 24px); }
  .topbar-context { display: none; }
  .top-actions .button-ghost { display: none; }
  .workflow-nav { grid-template-columns: repeat(2,1fr); }
  .next-card { grid-template-columns: 1fr; }
  .context-strip { grid-template-columns: 1fr 1fr; }
}
.platform-scorecard { margin-top: 16px; }
.platform-scorecard-heading { display:flex; align-items:flex-start; justify-content:flex-start; gap:24px; }
.platform-scorecard-heading h2 { margin:4px 0 4px; }
.platform-scorecard-heading p { margin:0; color:var(--muted); font-size:var(--fs-body); }
.platform-scorecard-total { display:flex; align-items:baseline; gap:4px; white-space:nowrap; color:var(--muted); }
.platform-scorecard-total strong { color:var(--text); font-size:30px; letter-spacing:-1px; }
.platform-scorecard-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:16px; }
.platform-score-item { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel); min-height:70px; }
.platform-score-item strong { display:block; font-size:var(--fs-meta); color:var(--text); }
.platform-score-item span { display:block; margin-top:8px; font-size:var(--fs-meta); color:var(--muted); }
.platform-score-item i { display:block; height:3px; margin-top:10px; border-radius:3px; background:var(--panel-soft); overflow:hidden; }
.platform-score-item i::after { content:""; display:block; width:var(--score,0%); height:100%; background:var(--green); border-radius:inherit; }
.platform-score-item.is-partial i::after { background:var(--orange); }
.platform-scorecard-foot { display:flex; justify-content:flex-start; align-items:center; gap:12px; margin-top:12px; color:var(--muted); font-size:var(--fs-meta); }
@media (max-width: 720px) { .platform-scorecard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .platform-scorecard-heading,.platform-scorecard-foot { flex-direction:column; align-items:flex-start; } .platform-scorecard-grid { grid-template-columns:1fr; } }

/* Replay player: a concrete control surface for run-scoped telemetry. */
.replay-player{margin-top:16px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel)}
.replay-player-heading,.replay-player-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}.replay-player-heading strong{font-size:14px}.replay-player-heading span,.replay-player-meta{color:var(--muted);font-size:var(--fs-meta)}
.replay-player-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}.replay-player-controls select{min-height:30px}.replay-speed{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:var(--fs-meta)}.replay-player input[type=range]{width:100%;accent-color:var(--accent)}.replay-player-meta{margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.replay-player .small-note{margin:8px 0 0}
.replay-camera{margin:12px 0 0}
.replay-camera canvas{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line);display:block;background:var(--panel-soft)}

/* Server-rendered replay MP4: a rendering of accepted camera frames. The
   video element sizes itself to its intrinsic aspect ratio and stays capped
   to the panel width. */
.replay-video-block{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line-strong)}
.replay-video-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.replay-video-heading strong{font-size:var(--fs-meta)}
.replay-video-block video{width:100%;max-height:360px;border-radius:8px;border:1px solid var(--line);display:block;background:var(--panel-soft)}
.replay-video-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.replay-video-block .small-note{margin:6px 0 0}

/* Browser ONNX policy trial: microduck-style in-browser inference driving the
   embedded simulator. Same control rhythm as the replay player. */
.policy-trial{border-top:1px dashed var(--line-strong);padding-top:10px;margin-top:10px}
.policy-trial .small-note{flex:1 1 220px;min-width:0;margin:0;color:var(--muted)}

/* Live training curve (worker-parsed engine stdout progress points). Same
   canvas sizing convention as the telemetry visuals. */
.run-progress-live-chart{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-strong)}
.run-progress-live-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.run-progress-live-heading strong{font-size:var(--fs-meta)}
.run-progress-live-chart canvas,.run-detail-live-chart canvas{width:100%;height:auto;display:block;border-radius:8px;background:var(--panel-soft)}
.run-detail-live-chart{margin-top:10px}
.run-detail-live-chart .small-note{margin:6px 0 0}

/* Engine log stream (run progress card): worker stdout/stderr lines arrive
   with a cursor; the body is a plain <pre> (textContent only, never markup).
   Monospace 12px per the floor rule — line-per-row logs must stay scannable. */
.run-progress-logs{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-strong)}
.run-progress-logs-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.run-progress-logs-heading strong{font-size:var(--fs-meta)}
.run-progress-logs-body{margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);font-family:var(--mono, ui-monospace, monospace);font-size:var(--fs-meta);line-height:1.5;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-all;color:var(--ink)}
.run-progress-logs .small-note{margin:6px 0 0}

/* Run comparison upgrades: metric/count selectors + overlaid curves. */
.run-comparison-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.run-comparison-controls select{min-height:30px}
.run-comparison-chart{margin-bottom:10px}
.run-comparison-chart canvas{width:100%;height:auto;display:block;border-radius:8px;background:var(--panel-soft)}
.run-comparison-chart .small-note{margin:6px 0 0}
.run-comparison-parcoords{margin-bottom:10px}
.run-comparison-parcoords canvas{width:100%;height:auto;display:block;border-radius:8px;background:var(--panel-soft)}
.run-comparison-parcoords .small-note{margin:6px 0 0}
.run-comparison-diff{margin-bottom:12px;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.run-comparison-diff summary{cursor:pointer;font-size:var(--fs-meta);color:var(--muted)}
.run-comparison-diff .table-scroll{max-height:240px;overflow:auto;margin-top:8px}
.run-comparison-diff .record-table{width:100%;font-size:var(--fs-body);border-collapse:collapse}
.run-comparison-diff .record-table th,.run-comparison-diff .record-table td{padding:4px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.run-comparison-diff .record-table td.is-diff{font-weight:700}
.run-comparison-diff .record-table td.is-empty{color:var(--muted)}
.run-comparison-diff .record-table col.is-diff{border-left:2px solid var(--cyan)}
.run-comparison-diff .small-note{margin:6px 0 0}
.telemetry-episodes-block{margin-top:2px}
.run-compare-swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:baseline}

/* ======================== workflow-ux.css — 闭环进度条 ======================== */

/* Shared progress rail: keep the user's next action visible on every workflow view.
   All colors resolve from the theme tokens (light Aurora / dark operator), so
   no separate per-theme rules are needed. */
.workflow-progress-strip{display:flex;align-items:center;gap:20px;margin:16px 0 16px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:14px;background:linear-gradient(100deg,var(--panel),var(--panel-soft));box-shadow:var(--shadow)}
.workflow-progress-intro{display:flex;flex-direction:column;gap:4px;min-width:124px}.workflow-progress-intro strong{font-size:var(--fs-body);color:var(--text)}
.workflow-progress-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0;flex:1}.workflow-progress-steps li{min-width:0}.workflow-progress-steps button{width:100%;display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted-strong);text-align:left;cursor:pointer}.workflow-progress-steps button:hover,.workflow-progress-steps button:focus-visible{border-color:var(--line-strong);background:var(--panel-soft);outline:none}.workflow-progress-steps b{display:grid;place-items:center;flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--panel-soft);color:var(--muted-strong);font-size:var(--fs-meta)}.workflow-progress-steps span{display:flex;flex-direction:column;min-width:0;gap:2px}.workflow-progress-steps strong{font-size:var(--fs-meta);color:var(--text);white-space:nowrap}.workflow-progress-steps small{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workflow-progress-steps li.is-current button{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.workflow-progress-steps li.is-current b{background:var(--accent-soft);color:var(--accent-text)}.workflow-progress-steps li.is-complete b{background:var(--green-soft);color:var(--green-text)}.workflow-progress-steps li.is-complete strong::after{content: ' ✓' / '';color:var(--green-text)}.workflow-progress-steps li.is-blocked{opacity:.7}.workflow-progress-steps li.is-blocked b{background:color-mix(in srgb,var(--red) 18%,var(--panel));color:var(--red-text)}.workflow-progress-steps li.is-blocked small{color:var(--red-text)}
@media (max-width:720px){.workflow-progress-strip{display:block;margin:10px 0 12px;padding:10px 12px}.workflow-progress-intro{margin-bottom:6px}.workflow-progress-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.workflow-progress-steps button{padding:6px 6px;gap:6px}.workflow-progress-steps b{width:20px;height:20px}
  /* 手机上只留阶段名，副标题（"生成可回放轨迹"）让 2×2 网格每格多占 22px，
     整条 rail 因此有 207px，把总览页标题挤到 y=448（首屏 53%）。顶栏管道
     这时已经在表达同样的四个阶段，副标题的边际价值低于首屏空间。 */
  .workflow-progress-steps small{display:none}}
.records-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;text-align:center}.records-empty strong{font-size:15px;color:var(--text)}.records-empty span{color:var(--muted);font-size:var(--fs-meta);max-width:420px}.records-empty-actions{display:flex;gap:8px;margin-top:8px}

/* ======================== maturity-ux.css — 项目上下文与工作区状态 ======================== */

/*
 * Product maturity layer
 *
 * This file is intentionally small and loaded last.  It gives the existing
 * workbench a stable visual language for workspace context, explicit blocked
 * states, and recoverable connection errors without changing the legacy
 * component tokens.
 */

/* ---- Project context --------------------------------------------------- */
.sidebar-project-context {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.sidebar-project-context > label {
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.2;
}
.sidebar-project-context-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.sidebar-project-context-row select {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.sidebar-project-add {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--accent-text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1;
}
.sidebar-project-add:hover,
.sidebar-project-add:focus-visible {
  border-color: var(--accent);
  background: rgba(255, 121, 24, .1);
  outline: none;
}
.sidebar-project-add:disabled { opacity: .45; cursor: wait; }
.sidebar-project-context > small {
  overflow: hidden;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Recoverable workspace connection state --------------------------- */
.workspace-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
}
.workspace-status-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--orange-text);
  background: rgba(255,194,103,.14);
  font-weight: 700;
}
.workspace-status-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  flex: 1 1 auto;
}
.workspace-status-copy strong {
  color: var(--text);
  font-size:var(--fs-meta);
  line-height: 1.3;
}
.workspace-status-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-status-banner.is-loading { border-color: rgba(101,169,255,.32); }
.workspace-status-banner.is-loading .workspace-status-icon {
  color: var(--blue);
  background: rgba(101,169,255,.14);
}
.workspace-status-banner.is-error { border-color: rgba(255,116,124,.45); }
.workspace-status-banner.is-error .workspace-status-icon {
  color: var(--red-text);
  background: rgba(255,116,124,.14);
}
.workspace-status-banner.is-success { border-color: rgba(85,217,154,.38); }
.workspace-status-banner.is-success .workspace-status-icon {
  color: var(--green-text);
  background: rgba(85,217,154,.14);
}

/* ---- Workspace notices (Amershi G18): passive, dismissible strip ---- */
.workspace-notices {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.workspace-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}
.workspace-notice-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size:var(--fs-meta);
  font-weight: 700;
  color: var(--blue);
  background: rgba(101, 169, 255, 0.12);
}
.workspace-notice.kind-degraded .workspace-notice-icon {
  color: var(--orange-text);
  background: rgba(255, 194, 103, 0.14);
}
.workspace-notice.kind-degraded {
  border-color: rgba(255, 194, 103, 0.45);
}
.workspace-notice-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  flex: 1 1 auto;
}
.workspace-notice-copy strong {
  color: var(--text);
  font-size:var(--fs-meta);
  line-height: 1.3;
}
.workspace-notice-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-notice.is-changed {
  border-color: rgba(85, 217, 154, 0.4);
  background: rgba(85, 217, 154, 0.06);
}
.workspace-notice-dismiss {
  flex: 0 0 auto;
  /* 最小 24×24 可点面积（触屏/指针都可及）；padding 走 8px 节奏刻度。 */
  min-width: 24px;
  min-height: 24px;
  padding: 2px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.4;
  cursor: pointer;
}
.workspace-notice-dismiss:hover {
  color: var(--text);
  background: rgba(28, 28, 26, 0.06);
}
@media (max-width: 720px) {
  .workspace-notice { align-items: flex-start; }
  .workspace-notice-copy span { white-space: normal; }
  .workspace-notice .button { align-self: center; }
}

/* ---- Explicit action blocking ---------------------------------------- */
.action-block-hint,
.deploy-action-hint {
  display: block;
  margin: 8px 0 0;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.5;
}
.action-block-hint[data-state="blocked"],
.deploy-action-hint[data-state="blocked"] { color: var(--orange-text); }
.action-block-hint[data-state="ready"] { color: var(--green-text); }
button:disabled { cursor: not-allowed; }

/* ---- Status surfaces -------------------------------------------------- */
.status-card[data-state="ready"] { border-color: rgba(85,217,154,.35); }
.status-card[data-state="partial"] { border-color: rgba(255,194,103,.35); }
.status-card[data-state="blocked"],
.status-card[data-state="error"] { border-color: rgba(255,116,124,.38); }
.status-card[data-state]::after {
  display: block;
  width: 6px;
  height: 6px;
  margin: 8px 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
  content: '';
}
.status-card[data-state="ready"]::after { background: var(--green); }
.status-card[data-state="partial"]::after { background: var(--orange); }
.status-card[data-state="blocked"]::after,
.status-card[data-state="error"]::after { background: var(--red); }

.board-empty {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: var(--panel-soft);
}
.board-empty strong { color: var(--text); font-size:var(--fs-body); }
.board-empty span { color: var(--muted); font-size: var(--fs-body); line-height: 1.45; }
.project-empty { display: grid; gap: 6px; justify-items: start; margin: 0; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--panel-soft); }
.project-empty strong { color: var(--text); font-size:var(--fs-meta); }
.project-empty span { color: var(--muted); font-size:var(--fs-meta); line-height: 1.45; }
.telemetry-empty { display: grid; gap: 6px; justify-items: start; margin: 0; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--panel-soft); }
.telemetry-empty strong { color: var(--text); font-size:var(--fs-body); }
.telemetry-empty span { color: var(--muted); font-size:var(--fs-meta); line-height: 1.45; }
.telemetry-empty-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Release steps expose the same state vocabulary to sighted and assistive
 * users. The base IA styles own spacing and typography; this layer only adds
 * the state border so a blocked gate is visible without opening the details. */
.release-step[data-state="ready"] { border-color: rgba(85,217,154,.42); }
.release-step[data-state="current"] { border-color: rgba(101,169,255,.42); }
.release-step[data-state="blocked"] { border-color: rgba(255,194,103,.38); }
.release-step[data-state="failed"] { border-color: rgba(255,116,124,.48); }
.release-step[data-state="locked"] { opacity: .72; }

.platform-score-item[data-state="ready"] { border-color: rgba(85,217,154,.35); }
.platform-score-item[data-state="partial"] { border-color: rgba(255,194,103,.35); }
.platform-score-item[data-state="blocked"] { border-color: rgba(255,116,124,.3); }
.platform-score-item[data-state="partial"] i::after { background: var(--orange); }
.platform-score-item[data-state="blocked"] i::after { background: var(--red); }

/* ---- Artifact and record rows ---------------------------------------- */
.run-detail-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.run-detail-title-row h2 { margin: 0; }
.artifact-row { align-items: flex-start; }
.artifact-row-main { display: grid; min-width: 0; gap: 2px; }
.artifact-row .artifact-state,
.history-status { flex: 0 0 auto; }
.artifact-state {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  line-height: 1.2;
  white-space: nowrap;
}
.artifact-state.state-success { border-color: rgba(85,217,154,.4); color: var(--green-text); }
.artifact-state.state-partial { border-color: rgba(255,194,103,.4); color: var(--orange-text); }
.artifact-state.state-error { border-color: rgba(255,116,124,.4); color: var(--red-text); }
.artifact-row[data-state="blocked"] .artifact-name { color: var(--orange-text); }
.history-status.state-success { color: var(--green-text); }
.history-status.state-partial { color: var(--orange-text); }
.history-status.state-error { color: var(--red-text); }

/* Board policy lifecycle evidence stays visible after a run stops. */
.station-policy-session {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.station-policy-session strong { color: var(--text); font-size:var(--fs-meta); }
.station-policy-session span,
.station-policy-session small { color: var(--muted); font-size:var(--fs-meta); line-height: 1.45; }
.station-policy-session[data-state="running"] { border-color: rgba(85,217,154,.42); }
.station-policy-session[data-state="running"] span { color: var(--green-text); }
.station-policy-session[data-state="stopped"] { border-color: rgba(101,169,255,.35); }
.station-policy-session[data-state="stopped"] span { color: var(--blue); }
.station-policy-session[data-state="waiting"] { border-style: dashed; }

/* ---- Project dialog --------------------------------------------------- */
.project-dialog { width: min(520px, calc(100vw - 32px)); }
.project-dialog form { display: grid; gap: 12px; }
.project-dialog-intro,
.project-dialog-scope,
.project-dialog-error { margin: 0; color: var(--muted); font-size:var(--fs-meta); line-height: 1.55; }
.project-dialog-scope { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); }
.project-dialog-error { color: var(--red-text); }
.project-dialog-field { display: grid; gap: 4px; color: var(--muted-strong); font-size:var(--fs-meta); }
.project-dialog-field input,
.project-dialog-field textarea { width: 100%; box-sizing: border-box; }
.project-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 720px) {
  .workspace-status-banner { align-items: flex-start; }
  .workspace-status-copy span { white-space: normal; }
  .workspace-status-banner .button { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-status-banner,
  .sidebar-project-add { transition: none !important; }
}

/* ======================== workbench-pro.css — 工作台形态：⌘K、首跑清单 ======================== */

/* 专业工作台层：⌘K 触发按钮、概览上手清单。
   全部复用全局令牌（--panel/--line/--text/--accent/--green…），
   深浅主题自动适配，不引入新的配色体系。
   （顶栏只读闭环管道已删除：它与主区可点击的 workflow-progress-strip
   表达同一份状态，双进度条是"状态墙"的来源之一。） */

/* ---------- ⌘K 触发按钮 ---------- */

.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-raised);
  padding: 6px 10px;
  font-size:var(--fs-meta);
  color: var(--muted-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cmdk-trigger:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.cmdk-trigger kbd {
  font-family: inherit;
  font-size:var(--fs-meta);
  line-height: 1;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 4px;
  background: var(--panel-soft);
  color: var(--muted-strong);
}

/* ---------- 概览 · 上手清单（真实数据驱动） ---------- */

.beginner-intro { margin: 12px 0; color: var(--muted-strong); line-height: 1.65; }
.workspace-help-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.workspace-context-heading { display: flex; flex: 1 1 240px; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.workspace-metrics-fold > summary { cursor: pointer; }
.learning-help-dialog { width: min(800px, calc(100vw - 30px)); padding: 0; }
.learning-help-dialog .run-dialog-heading { position: sticky; top: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--panel-raised); }
.learning-help-body { padding: 4px 20px 16px; }
.learning-help-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.learning-help-body .manifest-explainer { margin-inline: 0; }
.learning-help-body .train-onboarding { margin-top: 12px; }
.beginner-guide { margin-bottom: 16px; }
.beginner-guide .panel-heading { flex-wrap: wrap; gap: 8px; }
.beginner-guide .panel-heading .beginner-heading { white-space: normal; overflow: visible; text-overflow: clip; }
.beginner-guide .state-badge { white-space: normal; max-width: 100%; }
.beginner-guide p { color: var(--muted-strong); line-height: 1.65; overflow-wrap: anywhere; }
.beginner-guide summary, .beginner-json summary { cursor: pointer; padding: 10px 0; color: var(--text); }
.beginner-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.beginner-actions .small-note { flex: 1 1 220px; margin: 0; }
.simulator-policy-controls select { flex: 1 1 240px; width: auto; min-width: 0; }
.beginner-loop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; list-style: none; padding: 0; margin: 12px 0; }
.beginner-loop-step { display: flex; flex-direction: column; align-items: flex-start; white-space: normal; width: 100%; height: 100%; text-align: left; gap: 6px; }
.beginner-loop-step span { font-size: var(--fs-meta); color: var(--muted-strong); }
.beginner-guide .beginner-loop-grid .beginner-loop-step[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.beginner-contract-table { overflow-x: auto; }
.beginner-contract-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.beginner-contract-table th, .beginner-contract-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.beginner-json { margin: 10px 0; }
.beginner-json textarea { width: 100%; }
.learning-lab { padding-block: 12px; border-top: 1px solid var(--line); }
.learning-lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: center; gap: 20px; }
.lesson-scene { width: 100%; max-width: 360px; background: var(--panel-soft); border-radius: 12px; }
.lesson-ground { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 4; }
.lesson-leg, .lesson-foot { fill: none; stroke: var(--text); stroke-width: 8; stroke-linecap: round; }
.lesson-duck { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.lesson-beak { fill: var(--accent); }
.lesson-eye { fill: var(--text); }
.lesson-scene text { fill: var(--muted-strong); font-size: var(--fs-body); }
.lesson-controls { display: grid; gap: 8px; min-width: 0; }
.lesson-controls label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lesson-controls p { margin: 0; }
.learning-lab .lesson-controls .lesson-toggle { flex-direction: row; justify-content: flex-start; min-height: 40px; }
.learning-lab .lesson-controls .lesson-toggle input { width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; margin: 0; }

.onboard-card-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.onboard-card-bar h2 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.onboard-meter {
  flex: 1 1 auto;
  min-width: 90px;
  height: 4px;
  border-radius: 999px;
  background: var(--panel-soft);
  overflow: hidden;
}

.onboard-meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--green);
  transition: width 0.4s ease;
}

.onboard-count {
  font-size:var(--fs-meta);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--muted-strong);
  white-space: nowrap;
}

.onboard-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px 10px;
  display: grid;
  gap: 2px;
}

.onboard-item {
  display: grid;
  grid-template-columns: 28px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
}

.onboard-item-no {
  font-size:var(--fs-meta);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}

.onboard-item-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--line-strong);
  justify-self: center;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.onboard-item-body strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
}

.onboard-item-body span {
  display: block;
  font-size:var(--fs-meta);
  color: var(--muted);
  margin-top: 2px;
}

.onboard-item-meta {
  justify-self: end;
}

.onboard-cta {
  border: 1px solid var(--line);
  background: var(--panel-raised);
  border-radius: 7px;
  padding: 4px 10px;
  font-size:var(--fs-meta);
  color: var(--muted-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.onboard-cta:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.onboard-item.is-current .onboard-item-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(240, 90, 26, 0.16);
}

.onboard-item.is-complete .onboard-item-dot {
  background: var(--green);
}

.onboard-item.is-complete .onboard-item-body strong {
  color: var(--muted-strong);
}

.onboard-item.is-complete .onboard-item-no {
  color: var(--green-text);
}

.onboard-done {
  font-size:var(--fs-meta);
  color: var(--green-text);
  font-weight: 600;
  white-space: nowrap;
}

.onboard-item.is-pending {
  opacity: 0.78;
}

.onboard-locked {
  font-size:var(--fs-meta);
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .onboard-item {
    grid-template-columns: 18px 14px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .onboard-item-no {
    display: none;
  }
}

/* ======================== pro-skin.css — 皮肤层：密度、微标签、组件形态（历史上覆盖了以上全部） ======================== */

/* pro-workbench 皮肤层：把主平台整体重皮为专业工作台视觉。
   策略：① 重新定义设计令牌（继承级最高、改动面最小——styles.css 里
   所有 var() 引用自动跟随）；② 覆盖少量结构性规则（密度、圆角、
   阴影、顶栏/侧栏形态）；③ 新组件（管道/清单/⌘K）已在
   workbench-pro.css，这里只调密度对齐。加载顺序在所有样式之后。

   v4：引入 Rust 参考版的完整橙色色阶（orange-50/100/200/500/600/700）
   与语义三件套（文字/浅底/描边），所有徽章/标签的浅底从半透明改为
   实色，避免 alpha 混合在异底上漂移；新增 mono 微标签变量
   --font-label，eyebrow/kicker 一族统一切换。

   深浅主题与主平台同机制：html.theme-dark 单类翻转。 */

/* ---------- 0. 深色模式残余覆盖：styles.css 的 theme-dark 段在
   令牌层之后还有结构性规则（更宽的 shell、更高的顶栏），必须在
   皮肤层里显式压回去 ---------- */
html.theme-dark .app-shell {
  width: 100%;
  max-width: none;
  padding-top: 0;
}

html.theme-dark .topbar {
  min-height: 54px;
  padding: 0 16px;
}

/* ---------- ① 令牌层 ---------- */

/* mono 标签字体：所有 9-10px 大写微标签共用，是"开发者工具气质"的
   签名（Linear/GitHub/Vercel 同款做法）。 */




/* ---------- ② 结构层：密度与形态 ---------- */

body {
  font-size: 13.5px;
  line-height: 1.65;
  /* 去掉主平台的品牌色氛围渐变：预览页是纯净底色工作台 */
  background: var(--bg);
}

html.theme-dark body::before {
  display: none;
}

/* 顶栏内容压扁：预览页 54px 单行靠的是小尺寸 brand 与紧凑右侧 */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: none;
  background: var(--accent);
}

.brand strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

html.theme-dark .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: none;
}

.topbar-context {
  gap: 8px;
  font-size:var(--fs-meta);
  flex-wrap: nowrap;
  overflow: hidden;
}

.top-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.top-actions .button {
  min-height: 30px;
  padding: 4px 10px;
  font-size:var(--fs-meta);
}

.cmdk-trigger {
  height: 30px;
  padding: 0 8px;
}

.top-menu .button {
  min-height: 30px;
}

/* 顶栏：贴边 sticky 窄条，pro-workbench 的 54px 形态 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  width: 100%;
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  box-shadow: none;
}

.app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* shell-layout 原本是 grid；改为全宽 flex 感知更接近预览页的贴边侧栏 */
.shell-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.sidebar {
  position: sticky;
  top: 54px;
  height: calc(100vh - 54px);
  min-height: 0;
  margin: 0;
  padding: 16px 10px 32px 12px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

/* 主内容区贴边内边距（覆盖 .main-content 的 35px 顶部外距与 view 各自的
   侧向内边距——预览页主区是 26/30 内边距的整片滚动区） */
.main-content {
  padding: 20px 24px 70px;
}

[data-view-section] {
  padding: 0;
}

.view-section {
  padding: 0;
}

/* 侧栏导航项：预览页形态——无描边、激活左侧橙色竖条 */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  background: transparent;
  position: relative;
}

.nav-item:hover {
  border-color: transparent;
  background: var(--bg-soft);
}

.nav-item.is-active {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.module-item.is-active {
  border-color: transparent;
  background: var(--accent-soft);
}

/* 卡片：预览页 12px 圆角、无重阴影、16/18 内边距 */
.panel {
  border-radius: 12px;
  box-shadow: none;
  padding: 16px 16px;
}

/* 按钮：实心橙、9px 圆角、去掉渐变和高光（预览页是平的） */
.button {
  min-height: 34px;
  border-radius: 9px;
  background: var(--panel);
  font-weight: 550;
}

.button:hover {
  background: var(--panel);
}

.button-primary {
  background: var(--accent);
  /* 橙色实底上必须用深色前景。白字在浅色 --accent（#f97316）上只有 2.8:1，
     不达 AA；深色主题本来就用 #14100b。这里统一两套主题：深字在浅色
     --accent 上为 6.75:1。 */
  color: var(--warm-ink);
  border: none;
  box-shadow: none;
  font-weight: 600;
}

.button-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow);
}

html.theme-dark .button:not(.button-primary) {
  background: var(--panel-soft);
}

html.theme-dark .button-primary {
  color: var(--warm-ink);
}

/* 徽标统一胶囊形 */
.state-badge,
.contract-badge,
.live-label {
  border-radius: 999px;
}

/* ---------- ②b mono 微标签族：eyebrow / kicker / context-label 一律
   9-10px monospace 600 + .12em。这是参考版"开发者工具气质"的核心签名，
   一条规则族贡献一半的专业观感。
   选择器必须包含 workflow-ux / visual-polish 里的上下文变体
   （.workflow-progress-intro .eyebrow 等 0,2,0 优先级），皮肤层靠
   加载顺序在同优先级上胜出。 ---------- */

.eyebrow,
.brand-kicker,
.card-kicker,
.panel-kicker,
.nav-label,
.context-label,
.field-label,
.section-caption,
.panel-caption,
.workflow-progress-intro .eyebrow,
.train-onboarding .eyebrow,
[data-view-section='overview'] .section-caption,
[data-view-section='overview'] .panel-caption,
[data-view-section='overview'] .workspace-last-saved {
  font-family: var(--font-label);
  font-size:var(--fs-mono-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* eyebrow 在面板语境里点橙色（参考版 .eyebrow 用 --accent）。
   上下文变体（0,2,0）必须同优先级跟色，否则会赢过下面 0,1,0 的
   橙色规则、退回上面的 muted。 */
.eyebrow,
.panel-kicker,
.card-kicker,
.workflow-progress-intro .eyebrow,
.train-onboarding .eyebrow {
  /* 9px 微标签必须用「可读的强调文字色」：--accent 在浅色底上只有 2.71:1。
     --accent-text 浅色 #c2410c（5.07:1）、深色 #ffb377（10.5:1）。 */
  color: var(--accent-text);
}

/* ---------- ②c 状态徽章：三级视觉权重（风险 > 主状态 > 辅助元数据）。
   此前四种状态全部渲染成同权重软底胶囊，整页变成"状态墙"。现在只有
   风险状态（blocked/error/partial/warn）保留软底胶囊——唯一允许抢注意力
   的等级；主状态（success/ready/ok/running）退为色点+着色文字，无底无框；
   辅助元数据（neutral/demo）退为灰字，权重最低。
   覆盖 styles.css 2141 起的旧徽章规则（那里只改了描边和文字色，
   没有底色），保持与参考版 status 胶囊一致的形态。 ---------- */

.state-badge {
  min-height: 22px;
  padding: 2px 10px;
  gap: 6px;
  font-size:var(--fs-meta);
  font-weight: 600;
  background: var(--bg-soft);
}

.state-badge.state-blocked,
.state-badge.state-error {
  color: var(--red-text);
  border-color: var(--red-border);
  background: var(--red-soft);
}

.state-badge.state-blocked .status-dot,
.state-badge.state-error .status-dot {
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}

.state-badge.state-partial,
.state-badge.state-warn {
  color: var(--accent-text);
  border-color: var(--accent-ring);
  background: var(--accent-soft);
}

.state-badge.state-partial .status-dot,
.state-badge.state-warn .status-dot {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

.state-badge.state-success,
.state-badge.state-ready,
.state-badge.state-ok {
  color: var(--green-text);
  border-color: transparent;
  background: transparent;
}

.state-badge.state-running {
  color: var(--accent-text);
  border-color: transparent;
  background: transparent;
}

.state-badge.state-success .status-dot,
.state-badge.state-ready .status-dot,
.state-badge.state-ok .status-dot {
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.state-badge.state-running .status-dot {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pro-status-pulse 1.6s infinite;
}

.state-badge.state-neutral,
.state-badge.state-demo {
  color: var(--muted);
  border-color: transparent;
  background: transparent;
  font-weight: 500;
}

.state-badge .status-dot {
  width: 6px;
  height: 6px;
  flex: none;
  box-shadow: none;
}

@keyframes pro-status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
  }
  55% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

/* ---------- ②d hero / next-card：参考版 .hero 的橙色浅底卡形态 ----------
   原版 next-card 是渐变 + 双栏；皮肤层保留布局，只把底/边换成
   实色橙浅底 + ring 描边。overview-clean.css 的
   [data-view-section="overview"] .next-card（0,2,1）也要覆盖。 */
.next-card,
[data-view-section='overview'] .next-card {
  border-color: var(--accent-ring);
  background: var(--accent-soft);
  box-shadow: none;
}

/* styles.css 4873 的 html.theme-dark .next-card 是 (0,2,1) 且带渐变底，
   皮肤层的浅色规则 (0,2,0) 压不过它——必须同名同优先级跟一条暗色版。 */
html.theme-dark .next-card,
html.theme-dark [data-view-section='overview'] .next-card {
  border-color: var(--accent-ring);
  background: var(--accent-soft);
  box-shadow: none;
}

.next-badge,
[data-view-section='overview'] .next-badge {
  font-family: var(--font-label);
  font-size:var(--fs-mono-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  background: transparent;
  border: none;
}

html.theme-dark .next-badge {
  background: transparent;
}

/* ---------- ②e 激活光环：见文件末尾 ③ 段之后的 .onboard-item.is-current
   （.onboard-item 的 border-radius: 0 在 ③ 段声明，光环必须在它之后
   才能以同优先级胜出）。 ---------- */

@media (prefers-reduced-motion: reduce) {
  .state-badge.state-running .status-dot,
  .pulse,
  .status-dot {
    animation: none !important;
  }
}

/* kbd：预览页键盘帽样式。选择器需并上 styles.css / workbench-pro.css 的
   上下文变体（.command-palette kbd 等 0,2,0），其中 .cmdk-trigger kbd
   显式 font-family: inherit 必须被覆盖。 */
kbd,
.command-palette kbd,
.sim-action-item kbd,
.cmdk-trigger kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel);
  font-family: var(--font-label);
  font-size:var(--fs-meta);
  color: var(--text);
}

/* 视图切换动画：预览页的轻入场 */
[data-view-section],
.view-section {
  animation: pro-skin-in 0.25s ease;
}

@keyframes pro-skin-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- ③ 与 workbench-pro.css 的密度对齐 ---------- */

.onboard-card-bar {
  padding: 0 0 12px;
  border-bottom: none;
}

.onboard-list {
  padding: 0;
}

.onboard-item {
  border-top: 1px solid var(--line);
  border-radius: 0;
  grid-template-columns: 22px 20px minmax(0, 1fr) auto;
  padding: 10px 2px;
}

.onboard-item:first-child {
  border-top: none;
}

.onboard-meter i {
  background: var(--accent);
}

.onboard-cta {
  border-radius: 7px;
  height: 27px;
  padding: 0 10px;
  font-size:var(--fs-meta);
}

.onboard-item.is-current .onboard-cta {
  border-color: transparent;
  background: var(--accent);
  /* 同 .button-primary：橙色实底必须配深色前景，白字只有 2.8:1。 */
  color: var(--warm-ink);
  font-weight: 600;
}

html.theme-dark .onboard-item.is-current .onboard-cta {
  color: var(--warm-ink);
}

/* ②e 激活光环（声明在 ③ 之后以覆盖 .onboard-item 的 0 圆角）：
   参考版 .stage-card.stage-active 的橙描边 + 3px 浅橙光环。 */
.onboard-item.is-current {
  border-color: var(--accent-ring);
  border-radius: 9px;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* 窄屏：回到主平台原有的响应式行为（侧栏上收） */
/* ---------- 窄屏侧栏抽屉 ----------
   原来 ≤1080px 时侧栏是 position:static 的整块，直接堆在正文上方：
   390×844 上顶栏 87px + 侧栏 719px = 806px，占首屏 95%，页面标题落在
   y=1457（折叠线下 613px）；820×1180 上占 94%。导航不该吃掉首屏，
   所以窄屏把侧栏收成抽屉，由顶栏的 #sidebar-toggle 唤起。
   选择器用 .app-shell .sidebar（0,2,0）以稳定压过 styles.css 里
   html.theme-dark .sidebar / :where(html.theme-dark) .sidebar 的
   min-height、padding、max-height。 ---------- */

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.sidebar-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
.sidebar-backdrop[hidden] {
  display: none;
}

@media (max-width: 1080px) {
  /* 必须用 .app-shell .shell-layout（0,2,0）压过 styles.css 里的
     `html.theme-dark .shell-layout { grid-template-columns: 224px minmax(0,1fr) }`
     （0,2,0，同优先级但 pro-skin 后加载才赢）。侧栏在这个断点变成
     position:fixed 后不再占据栅格单元，如果两列模板还留着，正文会落进
     第一列（224px）——实测 821–1080px 暗色主题下 #main-content 只有 224px，
     .next-card 文案被压成 25px 宽、首跑清单正文列 0px。 */
  .app-shell .shell-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    width: min(330px, 88vw);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 16px 12px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--line);
    border-bottom: none;
    border-radius: 0;
    background: var(--panel);
    box-shadow: var(--shadow-strong);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s ease;
  }
  .app-shell.is-sidebar-open .sidebar {
    transform: none;
    visibility: visible;
  }
  .sidebar-toggle {
    display: inline-flex;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer-backdrop);
    background: rgba(3, 8, 14, 0.55);
    backdrop-filter: blur(1px);
  }
  /* 抽屉里是竖向面板，恢复完整的导航形态：组标签、分隔线、步骤副标题和
     底部安全提示都回来，不再需要窄屏那条横向滚动条。 */
  .app-shell .sidebar .workflow-nav {
    display: block;
    overflow-x: visible;
    padding-bottom: 0;
  }
  .app-shell .sidebar .nav-item {
    flex: none;
    width: 100%;
  }
  .app-shell .sidebar .nav-item small {
    display: block;
  }
  .app-shell .sidebar .nav-label,
  .app-shell .sidebar .sidebar-divider {
    display: block;
  }
  .app-shell .sidebar .side-link {
    display: flex;
  }
  .app-shell .sidebar .sidebar-bottom {
    position: static;
    margin-top: 16px;
  }
  body.sidebar-drawer-open {
    overflow: hidden;
  }
}

@media (min-width: 1081px) {
  .sidebar-backdrop {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .sidebar {
    transition: none;
  }
}

/* ---------- ④ 布局密度：消除宽屏留白（pro-skin 布局层） ----------
   三个来源：
   1. product-polish.css 11 行把外壳限到 min(1480px, 100% - 56px)——
      超宽屏两侧空地持续变大，且 1480 已低于现代笔记本满宽。
   2. styles.css 1731 把仿真 iframe 高度写死 500px，宽屏上画布上下
      留白随宽度增加；高度跟随视口后不再依赖宽度。
   3. 32px 网格沟 + 19px 面板内衬在 1440 下约吃掉 4% 可视面积。
   全部通过 pro-skin 层同优先级覆盖，不回改 styles.css。 */

.app-shell {
  width: min(1760px, calc(100% - 40px));
  padding: 12px 0 32px;
}

/* 面板内衬微收：19px → 16px，与参考版 12px 和 workbench 密度层一致。 */
.panel {
  padding: 16px;
}

/* 仿真画布：500px 写死高改为跟随视口（上限 720px），宽屏不再留白。 */
.simulator-frame-wrap,
.simulator-frame-wrap iframe {
  min-height: 60vh;
  height: 60vh;
}

/* 网格沟与侧栏：32px 沟 → 24px；侧栏给工作区切换器留出完整宽度；915px 以下降级
   回单列（原 820 断点提前到 915，避免右栏过窄）。 */
.shell-layout {
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 24px;
}

.sim-layout,
.train-layout,
.deploy-layout,
.records-layout {
  gap: 12px;
}

@media (min-width: 1081px) and (max-width: 1280px) {
  .app-shell {
    width: min(1480px, calc(100% - 32px));
  }
}

@media (max-width: 1080px) {
  .app-shell {
    /* The sidebar is a fixed drawer in this range, so the workbench owns the
       whole available rail.  A 740px cap left a third of laptop viewports
       empty and squeezed the overview cards for no interaction benefit. */
    width: calc(100% - 24px);
    max-width: none;
  }
  /* ④ 的桌面双列规则在源顺序上晚于 ③ 段的窄屏回退，会把它压掉——
     这里必须重申单列，窄屏才回到侧栏上收的原生布局。 */
  .shell-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .panel {
    padding: 12px;
  }
  .simulator-frame-wrap,
  .simulator-frame-wrap iframe {
    min-height: 58vh;
    height: 58vh;
  }
}

/* ---------- 常驻 chrome 压缩 ----------
   审查实测：桌面每个视图正文都从 y=402 开始（顶栏 54 + context-strip 194
   + 进度条 84），8 个视图完全一样；390px 手机上 context-strip 折成 377px、
   进度条 207px，标题被推到 y=739。两处压缩：
   1. context-strip 以前在 1440px 就把 7 个 chip 折成 3 行（第 2/3 行各只有
      1 个），浪费纵向空间。改成单行 + 横向滚动。
   2. 进度条以前和顶栏管道同时出现在每个视图上——顶栏现在用同一套词汇、
      同一份 deriveLoopStates() 表达同样的闭环进度，两者并存纯属重复。
      进度条收敛到总览页（它在那里承担"从哪继续"的定位作用）。 ---------- */

.context-strip {
  flex-wrap: nowrap;
  gap: 8px 12px;
  padding: 8px 12px;
  overflow: hidden;
}
.context-strip .context-live {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.context-strip .context-live-item {
  flex: 0 0 auto;
  min-width: 0;
}
.context-strip .context-health {
  flex: 0 0 auto;
}
/* 只压缩常驻的 context-strip；总览页内的 .overview-environment 复用了
   .context-live 类名，那里需要保留换行。 */
.overview-environment .context-live {
  flex-wrap: wrap;
  overflow-x: visible;
}

body[data-active-view]:not([data-active-view='overview']) .workflow-progress-strip {
  display: none;
}

@media (max-width: 1080px) {
  .context-strip {
    padding: 6px 12px;
  }
  .context-strip .context-live-item strong {
    max-width: 150px;
  }
}

/* ---------- 窄屏首跑清单：正文列不能被挤成 20px ----------
   .onboard-item 是 `22px 20px minmax(0,1fr) auto` 四列栅格。在 390px 上
   shell(24) + panel(28) + item(20) + 22 + 20 + 两个 gap(20) 之后只剩 20px 给
   正文，而 auto 列里的 CTA 按钮还有 89px —— 结果是四步说明各塌成一列单字
   （实测 div.onboard-item-body 宽 20px、高 413px）。窄屏把 CTA 换到正文下方
   独占一行，正文拿回全部剩余宽度。 ---------- */
@media (max-width: 720px) {
  /* workbench-pro.css:290 在 ≤640px 隐藏了步骤序号，却没有去掉它那一列：
     模板仍是 4 列，于是 -dot 落到第 1 列、-body 落到第 2 列（14–20px 宽），
     四步说明各塌成一列单字（实测 div.onboard-item-body 宽 20px、高 413px）。
     这里把序号显式恢复（它同时也是与侧栏 01–04 对齐的映射线索），
     模板改成 3 列，CTA 换到正文下方独占一行，正文拿回全部剩余宽度。 */
  .onboard-item {
    grid-template-columns: 22px 20px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }
  .onboard-item-no {
    display: block;
  }
  .onboard-item-meta {
    grid-column: 3;
    justify-self: start;
  }
}

/* ---------- 悬浮 Agent 球与正文的底部安全区 ----------
   悬浮球固定在视口右下（48px 高、距底 26px），正文会从它下面滚过去。实测
   每个视图都有 1–3 个文本节点被压住：记录表末行、上线闸门第 05 步、首跑清单
   第 02 步。给主内容补一段与悬浮球等高的底部内边距，最后一行就能滚到它上方。 */
.main-content {
  padding-bottom: 92px;
}

/* ---------- 页脚链接的可点区域 ----------
   实测三个页脚链接只有 62×16 / 57×16 / 65×16，低于 WCAG 2.5.8 AA 的
   24×24 下限。给链接本身上下内边距撑到 24px，行内观感基本不变。 */
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 2px;
}

/* 触屏设备没有 ⌘ 键，"⌘K" 提示是噪音（命令按钮本身仍然有用，保留）。 */
@media (hover: none) and (pointer: coarse) {
  .cmdk-trigger kbd {
    display: none;
  }
}

/* ---------- 恢复类提示不应该被省略号吃掉 ----------
   「项目列表暂不可用 · 点击"重新连接"重试」在桌面端只拿到 68px，截成
   「项目列表暂不可…」，正好把"下一步点什么"藏掉——而这条提示的全部价值
   就是那句操作指引。宁可换两行也要露出来。 */
.sidebar-project-context > small {
  min-width: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

/* 当前模型名在 220px 处被截成 "…upstrea…"（1920px 宽也一样）。
   context-strip 已经改成单行横向滚动，可以给它更多宽度。 */
.context-strip .context-live-item strong {
  max-width: 320px;
}

/* ---------- 侧栏项目卡：完整宽度的工作区切换器 ----------
   图标只属于标题，不再为整张表单保留一列。产品与项目选择器都占满卡片，
   新建入口跟随「项目」标签，状态独占末行，避免短标签挤压主要操作。 ---------- */
.sidebar-project {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.sidebar-project-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.sidebar-project-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sidebar-project > select,
.sidebar-project-context > select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  margin-top: 0;
}
.sidebar-project .sidebar-project-context {
  min-width: 0;
  margin-top: 4px;
  gap: 6px;
}
.sidebar-project-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size:var(--fs-meta);
}
.sidebar-project-label-row .sidebar-project-add {
  width: auto;
  min-height: 28px;
  padding: 0 6px;
  font-size:var(--fs-meta);
  white-space: nowrap;
}
.sidebar-project-state {
  grid-column: 1;
  justify-self: start;
  margin-left: 0;
}

/* ---------- 窄屏「下一步」卡：标题被压成 0px ----------
   styles.css 的 ≤720px 规则把 .next-card-main 写成 `auto minmax(0,1fr)` 两列
   （原本是给 badge + title 用的），但卡片里有 4 个孩子（badge / h3 / p /
   button），于是 p 落回第 1 列并把该列撑到 290px、h3 所在的第 2 列被压成
   0px —— 实测 #next-action-title 宽 0、高 233，"训练完成，先看评测证据"
   竖排成一列单字。窄屏应该直接单列堆叠。 ---------- */
@media (max-width: 720px) {
  .next-card-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }
  .next-card-main .next-badge {
    justify-self: start;
  }
}

/* Keep the theme-specific shell rule aligned with the drawer range above.  The
   drawer no longer consumes a grid column, so both themes should use the same
   full-width work rail on laptop viewports. */
@media (max-width: 1080px) {
  html.theme-dark .app-shell {
    width: calc(100% - 24px);
    max-width: none;
  }
}

/* 「完整看板 ↗」这类可点标题用的是 .panel-caption（mono 微标签族，17px 高），
   低于 WCAG 2.5.8 的 24×24 目标尺寸下限。只给链接形态撑高，纯文字的
   .panel-caption 保持原样。 */
a.panel-caption {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* 两处漏网的低对比度文字（都是"在淡色底上用了偏浅的墨色"）：
   1) 「无 RoboGo 账号也能运行」压在 .backend-choice-card.is-primary 的蓝色底上，
      --muted 实测 4.21:1；
   2) #station-notice 的告警文字用的是填充红 --red，压在 8% 红底上实测 4.13:1。
   两处都改用为"文字压在淡色底上"准备的语义令牌。写在文件末尾是为了稳压
   前面各层里更具体的选择器——这也正是分层棘轮要拦的那种做法，因此这里
   只作为最后两处收尾，不再新增其它覆盖。 */
.backend-choice-card.is-primary small {
  color: var(--muted-strong);
}
.station-notice,
.station-notice strong {
  color: var(--red-text);
}

/* ---------------- uniform-polish 尺寸统一 pass（2026-09-17，并入 pro-skin 层） ----------------

   背景：DOM 审计（1440×900，8 个视图）发现同类控件高度碎片化——
   单行按钮 5-8 种高度并存（27/29/31/34/36/39/45px），同页同级
   .button-small 与 .button-primary 34/36 混用；侧栏导航项 38/56px 交替
   导致垂直节奏断裂。本 pass 的唯一职责是把这些**结构性尺寸**收敛到
   4-4-8 尺寸节奏（详见每条注释），不改颜色与布局模式。策略与
   pro-skin 一致：追加在文件末尾靠加载顺序取胜，所有规则都给出
   覆盖依据，不使用 !important。按层预算约束（ui-layout-invariants
   的 LAYER_BUDGET 棘轮：层数只减不增），尺寸统一不另立第 12 层，
   而是作为 pro-skin（组件形态属主）末尾的 pass 存在——源码顺序与
   独立成层时逐字节一致，级联结果不变。 */

/* ---------- ① 单行按钮统一 32px ----------
   现状：`.button` 34px（pro-skin 6224） vs `.button-small` 36px —— small
   反而比普通款更高，来源于 6224 的 `min-height:34` 与基础层 292 的
   `padding 5px 10px` 相加。originallayout 里 34/36 两种高度在评测页同屏。
   32px 是 13.5px 字号下 (32-13.5×1.65)/2≈4.8px 视觉内边距的自然高度，
   与 input 的 32px 对齐后表单行不再犬牙交错。 */
.button {
  min-height: 32px;
  padding: 4px 12px;
}

.button-small {
  min-height: 32px;
  padding: 4px 10px;
}

/* 顶栏按钮从 30px 提到 32px，与表单控件同步（pro-skin 6105）。 */
.top-actions .button,
.top-menu .button,
.cmdk-trigger {
  min-height: 32px;
}

/* ---------- ② 深度整合层的小控件收 32px（覆盖它们原 26–31px 的碎片值，
   promotion-item 26 / next-card 32 之外的各种 29 / 31） ---------- */
.promotion-item-actions .button,
.evaluation-next .button,
.evaluation-banner .button,
.run-retrain-card .button,
.run-retrain-error .button,
.agent-entry-copy .button {
  min-height: 32px;
}

/* Agent 聊天面板：composer 发送钮 45px→32px、输入 44px→32px（5344），
   chip 31px→26px。45px 发送钮比主体表单还高，视觉重量倒挂。 */
body.agent-chat-open .agent-chat-composer input {
  min-height: 32px;
}

.agent-prompt-chip {
  min-height: 26px;
}

/* 引导步骤 CTA 27px→28px，贴齐 4px 节奏（6497）。 */
.onboard-cta {
  height: 28px;
}

/* ---------- ③ 侧栏导航项统一节奏 ----------
   现状：有描述行的项 56px、无描述行的 38px，交替出现打断垂直节奏。
   统一固定 44px（单行项 padding 上下 10px，双行项描述行收 11px/1.3
   行高）；分组标签 .nav-label 高度不变，仍是锚点。 */
.nav-item {
  min-height: 44px;
  padding: 8px 10px;
  grid-template-columns: 20px 1fr;
}

.nav-item small {
  display: block;
  margin-top: 2px;
  font-size:var(--fs-meta);
  line-height: 1.3;
}

/* ---------- ④ 嵌套视图标签（训练/设备站的 submodule-tab）双行 67px→48px，
   去掉与主内容卡片的双层边框+背景包裹（4889 仍是 54px，4842 无高度，
   实测 67）。标签是导航件不是内容件，不应比一级导航 44px 更重。 ---------- */
.submodule-tab {
  min-height: 48px;
  padding: 6px 12px;
}

.submodule-tabs {
  padding: 4px;
}

/* ---------- ⑤ 字号阶梯收敛：正文 13.5px、辅助 12px、微标签 11px ----------
   审计发现 12px/700 粗体小字 60-78 个/页，与 13.5px/400 正文打架。
   11px / 12px 辅助字统一去粗（600→500），把"粗体"留给真正的标题。 */
.nav-item small,
.submodule-tab small,
.onboard-item-body span,
.workspace-summary-card em,
.workspace-recent-item em {
  font-weight: 500;
}

/* ---------- ⑥ 阴影统一 ----------
   旧皮肤在 button-primary:hover 上残留 var(--shadow)（6246），它是
   30px 大投影，与 pro-skin "平的" 方向冲突。统一为一致的 1px 贴合感。 */
.button-primary:hover {
  box-shadow: 0 2px 8px rgba(240, 90, 26, 0.18);
}

/* ---------- ⑦ 输入控件统一 32px（与 .button 对齐，消除表单行高低差） ---------- */
.context-strip select {
  min-height: 32px;
}

input,
select,
textarea {
  min-height: 32px;
}

/* 文件导入/隐藏控件与数值输入不受影响。暗色主题无需额外覆盖：颜色走令牌。 */

/* ---------- ⑧ 状态徽章与卡片头部对齐 ----------
   徽章 min-height 29px（基础层 195）在卡片标题行里偏高，收 24px 后
   卡片头部（卡片 kicker 12px + 徽章）不再撑行。 */
.state-badge,
.contract-badge,
.live-label,
.service-pill {
  min-height: 24px;
  padding: 2px 10px;
}

/* ---------- ⑨ 侧栏项目卡状态行 ----------
   sidebar-project-state 12px mono 状态字（336）在浅色下 11px 更合适。 */
.sidebar-project-state {
  font-size:var(--fs-meta);
}


/* ---------- ⑩ 标题阶梯（uniform-polish 续） ----------
   审计：全局 h2 22px 与总览 .overview-page-title h2 27px（5308 覆盖 4627
   的 24px）竞争；面板标题散落 17/19/20px 三档。收敛为：
   页面级 20px / 面板级 16px / 正文 13.5px / 辅助 12px / 微标签 11px。
   总览页是入口，保留 22px 的放大版；letter-spacing 统一 -0.02em
   （原 -0.045em 过紧，中文下字干几乎贴住）。 */
h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.overview-page-title h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.panel-heading-lean h2,
.panel-heading h2,
.project-workspace-heading h2 {
  font-size: 16px;
  letter-spacing: -0.01em;
}

:where(html.theme-dark) h2 {
  font-size: 20px;
}

/* 面板 kicker（monospace 大写微标签）统一 11px：原来 12px/800 与
   10.5px/600 混用，取中并统一字重 650。 */
.eyebrow,
.brand-kicker,
.card-kicker,
.panel-kicker,
.nav-label {
  font-size:var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.12em;
}


/* ---------- ⑪ 残留碎片高度清理（uniform-polish 续） ----------
   复测发现 min-height 不是所有组件的高度来源：行内 padding × line-height
   (19.8px) 一样能撑出 34/39/45px。逐个压平：
   - station 设备行的 连接/移除：.button 通用 padding 4px 被更高优先级的
     station 层覆盖回 6px 12px（0,2,0 + !后续加载）→ 34px。改显式 padding。
   - agent-new-session / agent-session-item：9px×2 + 19.8 = 39px → 32px。
   - composer 发送钮：45px 来自外层 body.agent-chat-open 对 composer button
     的旧覆盖（5344 附近家族），显式固定 32px。
   - agent-prompt-chip：基础层 5087 的 28px min-height + 5px padding 实测
     31px → 固定 height 28px。
   - 双行 nav-item 实测 52px（44 + small 19.8px 行盒溢出 min-height）：
     给双行项一个 8px 节奏的 56px，单双行各自一致，交替节奏 44/56 是
     12px 步进，视觉上不再 38/56 随机。 */
.station-device-connect,
.station-device-add-btn,
.button.station-device-script-btn,
.station-device-item .button {
  min-height: 32px;
  padding: 4px 12px;
}

.agent-new-session,
.agent-session-item {
  min-height: 32px;
  padding: 6px 10px;
}

body.agent-chat-open .agent-chat-composer .button {
  min-height: 32px;
  padding: 4px 12px;
}

.agent-prompt-chip {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
}

.nav-item {
  min-height: 44px;
  max-height: 56px;
  padding: 6px 10px;
  align-content: center;
}

.nav-item:has(small) {
  min-height: 56px;
}

.nav-item small {
  font-size:var(--fs-meta);
  line-height: 1.35;
  margin-top: 2px;
}

/* ---------- ⑫ 顶栏按钮 50px 异常 ----------
   顶栏「新手指引」「更多」实测 50px：line-height 19.8 × 2 行（按钮内
   两个子元素 span 分行）+ padding 8px×2。强制单行排列。 */
.top-actions .button {
  line-height: 1;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.top-actions .button > * {
  white-space: nowrap;
}

/* ---------- ⑬ line-height 节奏 ----------
   19.8px (12×1.65) 的行高对 12px 标签过高，按钮因此虚高。标签类组件
   统一 1.4。 */
.state-badge,
.contract-badge,
.live-label,
.service-pill,
.agent-prompt-chip,
.submodule-tab small,
.nav-item small {
  line-height: 1.4;
}


/* ---------- ⑭ 二轮残留（uniform-polish 续） ----------
   缓存绕开后复测剩余碎片，全部是"更高优先级旧规则压过统一层"：
   - next-card 主 CTA 39px：4638 的 [data-view-section="overview"] 前缀
     (0,2,0) 压过 uniform 层的 .button (0,1,0)。同前缀反杀回 32px。
   - composer 发送钮 45px：body.agent-chat-open 前缀在 5344 家族里
     对 .button-primary 有 min-height 44。同前缀反杀。
   - agent-new/session 33px：6px+6px+19.8 line-height=32 上下溢出，
     line-height 1.4 后仍差 1px，直接给固定 height。 */
[data-view-section] .next-card .button,
[data-view-section] .agent-assistant .button {
  min-height: 32px;
  padding: 6px 12px;
}

body.agent-chat-open .agent-chat-composer .button,
body.agent-chat-open .agent-chat-composer .button-primary {
  min-height: 32px;
  height: 32px;
  padding: 4px 12px;
}

.agent-new-session,
.agent-session-item {
  height: 32px;
  line-height: 1.4;
}

/* 关闭钮 30×30 → 28×28（4px 节奏）；records-link 行高对齐 1.4。 */
.agent-chat-close {
  width: 28px;
  height: 28px;
  font-size: 19px;
}

.overview-records-link {
  line-height: 1.4;
  padding: 2px 0 2px 10px;
}


/* ---------- ⑮ 三轮：行盒溢出（uniform-polish 续） ----------
   ⑭ 后 CTA rect 33px：min-height 32 已赢，但 rect = 6+6 padding +
   21.45px(13px×1.65) 行盒 = 33.45。行盒才是高度真源。
   13px×1.65=21.45 是按钮文字的行高——按钮文字 12px/13px 用 1.65 行高
   完全没必要，全部压到 1.4（12→16.8、13→18.2）。 */
.button {
  line-height: 1.4;
}

.agent-new-session,
.agent-session-item {
  height: auto;
  min-height: 32px;
  line-height: 1.4;
  padding: 4px 10px;
}

/* chip 27px(28 目标差 1px)：19.8→16.8 后 5+5+16.8=26.8→27，直接 height 固定。 */
.agent-prompt-chip {
  height: 28px;
}


/* ---- 引擎能力说明条（training-engine 选中即显） ------------------------------
   追加于文件尾：全部走语义令牌（--line/--muted/--accent 等），亮/暗主题
   各自生效，不引入硬编码色。grid 尾行跨两列。 */
.engine-capability-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, rgba(240, 90, 26, 0.8));
  border-radius: 8px;
  background: var(--panel-soft);
  display: grid;
  gap: 6px;
}
.engine-capability-name {
  font-size:var(--fs-meta);
  font-weight: 600;
  color: var(--muted-strong);
}
.engine-capability-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.engine-capability-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--cyan, var(--teal-ink));
  background: var(--panel-soft);
  font-size:var(--fs-meta);
  line-height: 1.5;
  white-space: nowrap;
}
.engine-capability-desc {
  margin: 0;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.55;
}
.task-engine-mismatch-note {
  grid-column: 1 / -1;
  color: var(--orange-text);
}

/* ---- Agent drawer v2: conversation first, inspector on demand ----------
   The previous drawer gave three equal-weight columns to history, chat and
   empty execution panels. At a laptop width that made the actual conversation
   feel narrow while the right rail looked like unfinished placeholders. Keep
   the inspector available, but let the conversation own the visual weight and
   make empty states compact until a task produces real evidence. */
.agent-empty-state {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.agent-empty-state strong {
  color: var(--muted-strong);
  font-size:var(--fs-meta);
  font-weight: 650;
}

.agent-empty-state small {
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.4;
}

body.agent-chat-open .agent-chat-side > .agent-plan-card:has(> .agent-empty-state),
body.agent-chat-open .agent-chat-side > .agent-evidence:has(> .agent-empty-state),
body.agent-chat-open .agent-chat-side > .agent-event-log:has(> .agent-empty-state),
body.agent-chat-open .agent-chat-side > .agent-evidence:has(> .empty-inline),
body.agent-chat-open .agent-chat-side > .agent-event-log:has(> .empty-inline) {
  display: flex;
  align-items: center;
  min-height: 58px;
  max-height: 58px;
  padding: 10px 12px;
}

.capability-controls { display: grid; gap: 8px; margin: 10px 0; }
.capability-card { grid-template-columns: 1fr; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.capability-detail { display: grid; gap: 8px; min-width: 0; }
.capability-detail textarea { width: 100%; min-height: 80px; resize: vertical; }
.capability-detail code { overflow-wrap: anywhere; }
.capability-result { min-width: 0; }
.capability-result pre { max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.capability-result-metrics { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.capability-result-metrics dt { color: var(--muted); }
.capability-result-metrics dd { margin: 0; font-weight: 650; }
.agent-catalog { padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(0,0,0,.12); font-size:var(--fs-meta); }
.agent-catalog summary { cursor: pointer; color: var(--muted-strong); font-weight: 650; user-select: none; }
.agent-catalog-legend { margin: 8px 0; color: var(--muted); line-height: 1.4; }
.agent-catalog-list { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 6px; max-height: 200px; overflow: auto; }
.agent-catalog-item { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: start; color: var(--muted); line-height: 1.4; }
.agent-catalog-badge { white-space: nowrap; color: var(--muted-strong); font-weight: 600; }
.agent-catalog-item.is-gated .agent-catalog-badge { color: var(--gold-pale); }

body.agent-chat-open .agent-chat-side:has(> .agent-plan-card > .agent-empty-state) {
  grid-template-rows: auto auto auto auto;
  align-content: start;
}

body.agent-chat-open .agent-message-feedback {
  display: none !important;
}

body.agent-chat-open .agent-prompt-chips {
  flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
  scrollbar-width: thin;
}

body.agent-chat-open .agent-prompt-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.agent-chat-open .agent-chat-composer {
  padding: 12px 16px 16px;
}

@media (max-width: 720px) {
  body.agent-chat-open .agent-chat-panel {
    right: 10px;
    bottom: 62px;
    width: calc(100vw - 20px);
    height: calc(100vh - 76px);
    max-height: calc(100vh - 76px);
    border-radius: 16px;
  }

  body.agent-chat-open .agent-chat-layout {
    grid-template-columns: minmax(0, 1fr) 236px;
  }

  body.agent-chat-open .agent-chat-sessions {
    display: none;
  }
}

@media (max-width: 560px) {
  body.agent-chat-open .agent-chat-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  body.agent-chat-open .agent-chat-side {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-height: min(42vh, 320px);
    overflow: auto;
    padding: 8px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  body.agent-chat-open .agent-chat-side > .agent-catalog {
    display: block;
    max-height: none;
  }

  body.agent-chat-open .agent-chat-side > * {
    max-height: 82px;
    padding: 8px;
  }

  body.agent-chat-open .agent-chat-message,
  body.agent-chat-open .agent-chat-message-user {
    max-width: 94%;
  }
}

/* ======================== visual-hierarchy.css ==========================
   Editorial pass: make the workbench read as a sequence of decisions instead
   of a wall of equally weighted cards.  This layer intentionally keeps the
   existing DOM and data hooks intact; it only changes rhythm, emphasis and
   grouping so the interaction model remains stable.
========================================================================== */

body {
  background:
    radial-gradient(ellipse 58% 38% at 12% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%),
    radial-gradient(ellipse 48% 34% at 90% 5%, color-mix(in srgb, var(--blue) 5%, transparent), transparent 72%),
    var(--bg);
}

.topbar {
  min-height: 64px;
  padding-inline: 24px;
  border-bottom-color: var(--ui-border-soft);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
}

.brand {
  gap: 12px;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent-hover), var(--accent-strong));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.brand strong {
  font-size: 14px;
  letter-spacing: -0.025em;
}

.topbar-context {
  padding-left: 16px;
  border-left: 1px solid var(--ui-border-soft);
}

.shell-layout {
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  padding: 16px 12px 24px;
  border-right-color: var(--ui-border-soft);
  background: color-mix(in srgb, var(--bg) 92%, var(--panel));
}

.sidebar-project {
  margin-bottom: 16px;
  padding: 12px;
  border-color: var(--ui-border-soft);
  border-radius: var(--ui-radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--accent-soft)), var(--panel));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 5%, transparent);
}

.sidebar-project-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
}

.nav-label {
  margin: 0 12px 8px;
  color: var(--muted);
  font-size:var(--fs-mono-micro);
  letter-spacing: 0.16em;
}

.workflow-nav {
  gap: 4px;
}

.nav-item {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--muted-strong);
}

html body .nav-item:hover {
  background: color-mix(in srgb, var(--panel) 80%, var(--accent-soft));
}

.nav-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  box-shadow: inset 3px 0 0 var(--accent), 0 5px 14px color-mix(in srgb, var(--accent) 8%, transparent);
}

.sidebar-divider-compact {
  margin: 12px;
}

.sidebar-bottom {
  right: 16px;
  bottom: 20px;
  left: 16px;
}

.main-content {
  max-width: 1240px;
  padding: 32px clamp(32px, 4vw, 64px) 88px;
}

.context-strip {
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  border-radius: var(--ui-radius-md);
  border-color: var(--ui-border-soft);
  background: color-mix(in srgb, var(--panel) 94%, var(--accent-soft));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--text) 5%, transparent);
}

.context-strip::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: '';
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 22%, transparent));
}

.context-strip .context-live-item {
  min-height: 64px;
  padding: 12px 16px;
}

body .context-strip .context-live-item span {
  font-family: var(--font-label);
  font-size:var(--fs-mono-micro);
  letter-spacing: 0.12em;
}

.context-strip .context-live-item strong {
  margin-top: 8px;
  color: var(--text);
  font-size:var(--fs-body);
}

.context-health {
  padding-inline: 16px;
}

body .workflow-progress-strip {
  position: relative;
  gap: 24px;
  margin: 0 0 32px;
  padding: 16px;
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(110deg, color-mix(in srgb, var(--panel) 96%, var(--accent-soft)), var(--panel-soft));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 4%, transparent);
}

.workflow-progress-strip::after {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
}

.workflow-progress-intro {
  min-width: 150px;
  padding-left: 4px;
}

body .workflow-progress-intro strong {
  font-size: 14px;
  letter-spacing: -0.01em;
}

.workflow-progress-steps {
  gap: 12px;
}

.workflow-progress-steps button {
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 11px;
}

.workflow-progress-steps b {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  font-size:var(--fs-meta);
}

body .workflow-progress-steps li.is-current button {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.view-section {
  animation: view-in 0.28s ease both;
}

.section-heading-lean {
  margin-bottom: 24px;
  padding-bottom: 0;
  border-bottom: 0;
}

body .section-heading-lean h2,
.section-heading h2 {
  font-size: 29px;
  font-weight: 680;
  letter-spacing: -0.055em;
}

.section-heading-lean .section-caption,
.section-heading .section-caption {
  padding-bottom: 4px;
}

/* The landing view is a composed layout: one clear action, then two supporting
   decision surfaces, then the detailed project stream. */
[data-view-section='overview'] {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  gap: 24px;
  align-items: start;
}

[data-view-section='overview'] > .section-heading,
[data-view-section='overview'] > .next-card,
[data-view-section='overview'] > .project-workspace {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

[data-view-section='overview'] .overview-page-title h2 {
  font-size: var(--fs-page-title);
  line-height: 1.12;
}

[data-view-section='overview'] .overview-page-title p {
  max-width: 620px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
}

body [data-view-section='overview'] .next-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  margin: 0;
  border-radius: var(--ui-radius-lg);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--panel)) 0%, var(--panel) 62%);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 10%, transparent);
}

[data-view-section='overview'] .next-card::after {
  position: absolute;
  right: 36px;
  bottom: -54px;
  width: 180px;
  height: 180px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  content: '';
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 44px color-mix(in srgb, var(--accent) 3%, transparent);
  opacity: .12;
  pointer-events: none;
}

[data-view-section='overview'] .next-card-main {
  position: relative;
  z-index: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 104px;
  gap: 12px;
  padding: 16px 20px;
}

body [data-view-section='overview'] .next-badge {
  align-self: start;
  padding: 6px 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size:var(--fs-mono-micro);
}

[data-view-section='overview'] .next-card h3 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.25;
}

[data-view-section='overview'] .next-card p {
  margin: 0;
  font-size:var(--fs-body);
}

[data-view-section='overview'] .next-card .button {
  position: relative;
  z-index: 2;
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 11px;
}

[data-view-section='overview'] .first-run-path,
[data-view-section='overview'] .platform-scorecard {
  width: 100%;
  margin: 0;
  border-radius: var(--ui-radius-lg);
  border-color: var(--ui-border-soft);
  background: var(--ui-surface-tint);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 4%, transparent);
}

[data-view-section='overview'] .first-run-path {
  align-self: start;
}

[data-view-section='overview'] .onboard-card-bar {
  padding: 20px 24px 16px;
}

[data-view-section='overview'] .onboard-card-bar h2,
[data-view-section='overview'] .platform-scorecard-heading h2 {
  font-size: 16px;
  font-weight: 680;
}

[data-view-section='overview'] .onboard-list {
  gap: 4px;
  padding: 12px 12px 16px;
}

[data-view-section='overview'] .onboard-item {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid transparent;
}

[data-view-section='overview'] .onboard-item.is-current {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

body [data-view-section='overview'] .platform-scorecard {
  padding: 24px;
}

[data-view-section='overview'] .platform-scorecard-heading {
  justify-content: space-between;
  gap: 16px;
}

[data-view-section='overview'] .platform-scorecard-heading p {
  max-width: 360px;
  margin-top: 6px;
  line-height: 1.55;
}

[data-view-section='overview'] .platform-scorecard-total {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

[data-view-section='overview'] .platform-scorecard-total strong {
  font-size: 40px;
  line-height: 1;
}

[data-view-section='overview'] .platform-scorecard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

[data-view-section='overview'] .platform-score-item {
  min-height: 78px;
  padding: 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

[data-view-section='overview'] .platform-scorecard-foot {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

[data-view-section='overview'] .project-workspace {
  margin: 0;
  border-radius: var(--ui-radius-lg);
  border-color: var(--ui-border-soft);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 5%, transparent);
}

[data-view-section='overview'] .project-workspace-heading {
  padding: 20px 24px 16px;
}

[data-view-section='overview'] .workspace-summary-grid {
  margin: 0 24px 24px;
  border-color: var(--ui-border-soft);
  border-radius: 12px;
}

[data-view-section='overview'] .workspace-summary-card {
  min-height: 142px;
  padding: 16px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

[data-view-section='overview'] .workspace-summary-card:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

[data-view-section='overview'] .workspace-summary-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

[data-view-section='overview'] .workspace-summary-card strong {
  margin-top: 12px;
  font-size: 14px;
}

[data-view-section='overview'] .workspace-recent-row {
  padding: 16px 24px 20px;
}

/* Shared hierarchy for every workflow view. Panels become quiet containers;
   headings and the active control carry the contrast. */
.sim-layout,
.train-layout,
.deploy-layout,
.records-layout,
.overview-columns {
  gap: 24px;
}

.panel,
.status-card,
body .contract-fold,
body .sim-context-panel,
body .deploy-device-select,
body .replay-player {
  border-radius: var(--ui-radius-md);
  border-color: var(--ui-border-soft);
  background: color-mix(in srgb, var(--panel) 96%, var(--accent-soft));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 4%, transparent);
}

.panel {
  padding: 24px;
}

body .panel-heading {
  align-items: center;
  margin-bottom: 20px;
}

.panel-heading h2 {
  font-size: 18px;
  font-weight: 680;
}

body .panel-heading > :last-child:is(button, a.button, .button) {
  margin-left: auto;
}

.status-card {
  min-height: 96px;
  padding: 16px;
}

.status-card-main {
  margin-top: 0;
}

.status-card p {
  margin-top: 8px;
}

@media (max-width: 1080px) {
  .topbar {
    padding-inline: 16px;
  }

  .main-content {
    padding-inline: 32px;
  }

  .shell-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .topbar {
    min-height: 58px;
  }

  .sidebar {
    padding: 16px 12px 20px;
  }

  .main-content {
    padding: 24px 24px 64px;
  }

  html body [data-view-section='overview'] {
    grid-template-columns: 1fr;
  }

  html body [data-view-section='overview'] > .first-run-path,
  html body [data-view-section='overview'] > .platform-scorecard {
    grid-column: 1;
  }

  html body [data-view-section='overview'] .platform-scorecard-heading {
    justify-content: flex-start;
  }

  html body [data-view-section='overview'] .platform-scorecard-total {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-inline: 12px;
  }

  .main-content {
    padding: 20px 16px 48px;
  }

  html body .workflow-progress-strip {
    margin-bottom: 24px;
    border-radius: 14px;
  }

  html body .section-heading-lean h2,
  .section-heading h2 {
    font-size: 26px;
  }

  html body [data-view-section='overview'] .next-card-main {
    display: block;
    min-height: 0;
    padding: 24px;
  }

  html body [data-view-section='overview'] .next-badge {
    margin-bottom: 16px;
  }

  html body [data-view-section='overview'] .next-card .button {
    margin-top: 20px;
  }

  html body [data-view-section='overview'] .workspace-summary-grid {
    grid-template-columns: 1fr 1fr;
    margin-inline: 16px;
  }

  html body [data-view-section='overview'] .workspace-summary-card {
    min-height: 126px;
  }

  html body [data-view-section='overview'] .workspace-summary-card:nth-child(2) {
    border-right: 0;
  }

  html body [data-view-section='overview'] .workspace-summary-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  html body [data-view-section='overview'] .workspace-recent-row {
    padding-inline: 16px;
  }

  html body .panel {
    padding: 16px;
  }
}

/* ======================== information architecture pass ========================
   Keep the primary learning loop open, and put low-frequency status/tools behind
   deliberate disclosure points. This reduces the amount of chrome competing with
   the next action without removing access to the underlying controls. */

.sidebar-nav-group {
  margin: 0;
}

.sidebar > .sidebar-divider + .nav-label:has(+ .sidebar-nav-group) {
  display: none;
}

.sidebar-nav-group > .nav-label-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin: 0 12px 6px;
  padding: 0 2px;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
}

.sidebar-nav-group > .nav-label-toggle::-webkit-details-marker {
  display: none;
}

.sidebar-nav-group > .nav-label-toggle:hover,
.sidebar-nav-group > .nav-label-toggle:focus-visible {
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--panel) 80%, var(--accent-soft));
  outline: none;
}

.nav-group-chevron {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  transition: transform .16s ease;
}

.sidebar-nav-group[open] .nav-group-chevron {
  transform: rotate(180deg);
}

.sidebar-nav-group > .workflow-nav {
  margin-top: 2px;
}

.context-extra-details {
  position: relative;
  flex: 0 0 auto;
  min-width: 86px;
}

.context-extra-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--ui-border-soft);
  border-radius: 8px;
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--panel) 86%, var(--accent-soft));
  cursor: pointer;
  font-size:var(--fs-meta);
  list-style: none;
  white-space: nowrap;
}

.context-extra-details > summary::-webkit-details-marker {
  display: none;
}

.context-extra-details > summary::after {
  margin-left: 8px;
  color: var(--muted);
  content: '⌄';
  transition: transform .16s ease;
}

.context-extra-details[open] > summary::after {
  transform: rotate(180deg);
}

.context-extra-items {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 2px;
  min-width: min(430px, calc(100vw - 48px));
  padding: 6px;
  border: 1px solid var(--ui-border-soft);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 12%, transparent);
}

.context-extra-items .context-live-item {
  min-height: 54px;
  border: 0;
  border-radius: 7px;
  background: var(--panel-soft);
}

.compute-resource-add {
  margin-top: 16px;
  border-top: 1px solid var(--ui-border-soft);
}

.compute-resource-add > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 2px 4px;
  color: var(--muted-strong);
  cursor: pointer;
  font-size:var(--fs-body);
  font-weight: 650;
  list-style: none;
}

.compute-resource-add > summary::-webkit-details-marker {
  display: none;
}

.compute-resource-add > summary::after {
  color: var(--accent-text);
  content: '＋';
  font-size: 17px;
  font-weight: 500;
}

.compute-resource-add[open] > summary::after {
  content: '−';
}

.compute-resource-add > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size:var(--fs-meta);
  font-weight: 500;
}

.compute-resource-add[open] > summary {
  padding-bottom: 16px;
}

/* At tablet width the hero must stack deliberately; the old three-column grid
   left the title column narrower than a single Chinese glyph. */
@media (max-width: 720px) and (min-width: 721px) {
  html body [data-view-section='overview'] .next-card-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  html body [data-view-section='overview'] .next-card-main .next-badge,
  html body [data-view-section='overview'] .next-card-main h3,
  html body [data-view-section='overview'] .next-card-main p,
  html body [data-view-section='overview'] .next-card-main .button {
    grid-column: 1;
    margin-left: 0;
    justify-self: start;
  }
}

/* Toasts sit above the Agent launcher instead of occupying the same corner. */
html body .toast-region {
  bottom: 84px;
}

@media (max-width: 720px) {
  html body .context-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: visible;
  }

  html body .context-strip .context-live {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    overflow: visible;
  }

  html body .context-strip .context-live-item {
    min-width: 0;
    min-height: 48px;
    padding: 8px 12px;
  }

  html body .context-strip .context-live-item strong {
    max-width: 100%;
  }

  html body .context-strip .context-extra-details {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  html body .context-strip .context-extra-details > summary {
    min-height: 40px;
  }

  html body .context-strip .context-health {
    grid-column: 2;
    justify-self: end;
  }

  html body .context-extra-items {
    grid-template-columns: 1fr;
    min-width: min(260px, calc(100vw - 40px));
    right: auto;
    left: 0;
  }

  html body #toast-region {
    right: 16px;
    bottom: 76px;
    width: min(360px, calc(100% - 32px));
  }
}

/* ---- Train page: model contract details collapse secondary information -- */
.model-details-fold {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.model-details-fold > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
}
.model-details-fold > summary::-webkit-details-marker { display: none; }
.model-details-fold > summary:hover { color: var(--text); }
.model-details-fold > summary > span:nth-child(2) { flex: 1; min-width: 0; }
.model-details-fold > summary strong { display: block; color: var(--muted-strong); font-size:var(--fs-meta); font-weight: 600; }
.model-details-fold > summary small { display: block; margin-top: 2px; color: var(--muted); font-size:var(--fs-meta); }
.model-details-fold[open] .overview-environment-toggle i { transform: rotate(180deg); }
.model-details-body { padding: 0 0 4px; }

/* ---------- final workbench pass -----------------------------------------
   The shell is intentionally full width, but each view still needs one
   readable content rail.  Keeping this normalization at the end prevents
   older skin layers from reintroducing a narrow, left-heavy dashboard. */
@media (min-width: 1081px) {
  .app-shell .main-content {
    min-width: 0;
    width: 100%;
    padding-inline: clamp(32px, 3.2vw, 64px);
  }

  body .app-shell .main-content .view-section {
    width: min(100%, 1520px);
    max-width: 1520px;
    margin-inline: auto;
  }

  body .app-shell .context-strip,
  body .app-shell .workspace-status-banner,
  body .app-shell .workspace-notices {
    width: min(100%, 1520px);
    margin-inline: auto;
  }

  /* Three equal decision surfaces read much better than a narrow metric card
     beside a comparison card with a second card stranded below it. */
  body .app-shell .evaluation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1081px) and (max-width: 1280px) {
  body .app-shell [data-view-section='evaluate'] .evaluation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Every live dashboard surface must be allowed to shrink inside its grid
   track; otherwise long Chinese labels make the page appear clipped even
   when the document itself has no horizontal scrollbar. */
body .app-shell .context-live,
body .app-shell .context-live-item,
body .app-shell .evaluation-evidence,
body .app-shell .panel,
body .app-shell .panel-heading,
body .app-shell .workspace-summary-card {
  min-width: 0;
}

body .app-shell .context-live-item strong,
body .app-shell .panel-heading h2,
body .app-shell .section-heading h2,
body .app-shell .workspace-summary-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-view-section='evaluate'][data-empty='true'] .evaluation-empty-card {
  width: min(100%, 760px);
  max-width: none;
  border-color: var(--accent-ring);
  background: linear-gradient(135deg, var(--accent-soft), var(--panel));
}

[data-view-section='evaluate'][data-empty='true'] .evaluation-empty-head strong {
  font-size: 18px;
}

@media (max-width: 720px) {
  body .app-shell .main-content .view-section {
    width: 100%;
  }

  body .app-shell [data-view-section='evaluate'] .evaluation-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body .app-shell [data-view-section='evaluate'] .evaluation-banner > div:nth-child(2) {
    flex: 1 1 180px;
    min-width: 0;
  }

  body .app-shell [data-view-section='evaluate'] .evaluation-banner .button {
    width: 100%;
    margin-left: 40px;
  }
}

/* ---------- 宽屏工作区：把主内容拉回侧栏之后 ----------
   旧规则把 1240px 内容轨道居中放在 1760px 外壳里。1920px 屏幕因此在
   侧栏和正文之间、以及正文右侧各留下大块空白，评测页的右栏也被挤窄。
   桌面端让外壳使用可用宽度，正文从侧栏后的固定间距开始；1280px 以下
   保留原来的断点和抽屉布局。 */
@media (min-width: 1281px) {
  .app-shell {
    width: min(100%, 2048px);
  }

  .app-shell .main-content {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(32px, 3vw, 64px);
  }

  .app-shell .main-content .view-section {
    width: min(100%, 1520px);
    max-width: 1520px;
    margin-inline: auto;
  }
}

/* ---- Canvas interaction layer -------------------------------------------
   Charts remain dependency-free and keep their fixed-resolution rendering,
   while this layer adds the inspection affordances expected from robotics
   viewers: a local tooltip and a compact export row. */
.visualization-interaction-host {
  position: relative;
}
.visualization-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 150px;
  max-width: 230px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, var(--black) 6%);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size:var(--fs-meta);
  line-height: 1.45;
  pointer-events: none;
}
.visualization-tooltip span {
  display: block;
}
.visualization-tooltip strong { display: block; margin-bottom: 2px; }
.visualization-action-bar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
canvas[tabindex="0"] { outline: none; }
canvas[tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ======================== visual-refresh-2026 ============================
   Complete visual pass for the Sim2Real workbench.  The workflow and data
   hooks stay unchanged; this layer only clarifies the focal surface, makes
   run evidence easier to scan, and keeps the shell calm at laptop widths.
============================================================================ */

/* The page progress rail is the readable workflow control; the top-bar
   duplicate pipeline was removed (same states, second surface). */

/* The recommendation card has four children. Explicit areas prevent the
   heading from being squeezed into a one-character column by auto-placement. */
body [data-view-section='overview'] .next-card-main {
  grid-template-columns: auto minmax(260px, 1fr) auto;
  grid-template-areas:
    'badge title action'
    'badge copy action';
  align-items: center;
}
body [data-view-section='overview'] .next-card-main .next-badge { grid-area: badge; }
body [data-view-section='overview'] .next-card-main h3 {
  grid-area: title;
  min-width: 0;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}
body [data-view-section='overview'] .next-card-main p {
  grid-area: copy;
  min-width: 0;
}
body [data-view-section='overview'] .next-card-main .button {
  grid-area: action;
  margin-left: 0;
}

/* A quieter shell leaves the central visualization in charge. */
.topbar {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line-strong) 55%, transparent);
}
.sidebar {
  background: color-mix(in srgb, var(--bg) 94%, var(--panel));
}
.nav-item {
  min-height: 42px;
}
.nav-item strong { letter-spacing: -0.01em; }

/* Give each view one clear title and let the content breathe below it. */
body .section-heading-lean {
  min-height: 48px;
  align-items: end;
  margin-bottom: 20px;
}
body .section-heading-lean h2,
body .section-heading h2 {
  letter-spacing: -0.045em;
}
body .section-heading-lean > p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Simulation is the hero surface: make the viewport dominant and keep the
   control/evidence rail readable beside it. */
@media (min-width: 721px) {
  body .sim-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.82fr);
    gap: 20px;
  }
  body .train-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.82fr);
    gap: 20px;
  }
  body .deploy-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
    gap: 20px;
  }
}
body .simulator-panel,
body .model-panel,
body .deploy-preflight-panel {
  overflow: hidden;
}
body .simulator-frame-wrap {
  min-height: clamp(430px, 54vh, 640px);
  border-radius: 14px;
  background: var(--frame-navy);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 50%, transparent), 0 18px 36px color-mix(in srgb, var(--text) 8%, transparent);
}
body .simulator-frame-wrap iframe {
  height: clamp(430px, 54vh, 640px);
}

/* Training is a monitoring surface first; configuration remains available in
   the existing disclosure below the model summary. */
body .train-onboarding {
  border-radius: var(--ui-radius-lg);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel));
}
body .training-controls {
  border-top-color: var(--ui-border-soft);
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
}
body .training-grid select,
body .training-grid input,
body .run-comparison-controls select {
  min-height: 36px;
  border-radius: 9px;
  background: var(--panel);
}

/* Metric cards act as visual anchors instead of four equal text rows. */
body .metric-grid-large {
  gap: 10px;
}
body .metric-grid-large .metric {
  min-height: 108px;
  justify-content: space-between;
  border-radius: 14px;
  border-color: var(--ui-border-soft);
  padding: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, var(--accent-soft)), var(--panel-soft));
}
body .metric-grid-large .metric strong {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.04em;
}
body .metric-grid-large .metric span {
  color: var(--muted);
  font-size:var(--fs-meta);
}
body .comparison-chart {
  min-height: 138px;
  display: grid;
  align-content: center;
  gap: 16px;
}
body .chart-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 52%, transparent);
}
body .chart-bar { border-radius: inherit; }

/* Run comparison and telemetry are the visual evidence layer. */
body .evaluation-evidence {
  align-items: start;
  gap: 20px;
}
body .run-comparison-panel,
body .telemetry-panel {
  min-width: 0;
}
body .run-comparison-chart,
body .run-comparison-parcoords,
body .telemetry-chart-block,
body .replay-player {
  border-radius: 12px;
  border-color: var(--ui-border-soft);
  background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
}
body .run-comparison-chart canvas,
body .run-comparison-parcoords canvas,
body .telemetry-canvas {
  width: 100%;
  height: auto;
  min-height: 180px;
}
body .run-comparison-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
}
body .run-comparison-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}
body .run-comparison-controls .field-label {
  min-width: 118px;
  margin: 0;
}

/* Deployment should read like a release decision, with the device panel as
   the primary object and the evidence gate as a supporting rail. */
body .deploy-device-select {
  min-height: 100%;
}
body .release-step {
  min-height: 62px;
  border-radius: 11px;
}
body .deploy-timeline {
  margin-top: 20px;
  border-top-color: var(--ui-border-soft);
}

/* Tables and lists use a consistent scan rhythm. */
body .record-table th {
  color: var(--muted);
  font-size:var(--fs-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body .record-table td,
body .record-table th {
  padding: 12px;
}
body .workspace-recent-list,
body .run-comparison,
body .telemetry-summary {
  border-radius: 12px;
}

/* Narrow layouts keep the visual priority: title -> primary evidence -> action. */
@media (max-width: 720px) {
  body [data-view-section='overview'] .next-card-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'badge'
      'title'
      'copy'
      'action';
    align-items: start;
  }
  body [data-view-section='overview'] .next-card-main .button {
    justify-self: start;
  }
  body .simulator-frame-wrap,
  body .simulator-frame-wrap iframe {
    min-height: 420px;
    height: 420px;
  }
}

/* 1081–1280px still has a desktop sidebar, but the main rail is too narrow
   for the single-line status strip. Give the context chips a second row so
   the storage state is readable instead of being clipped at the right edge. */
@media (min-width: 1081px) and (max-width: 1280px) {
  html body .app-shell .context-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: stretch;
    gap: 0;
    overflow: visible;
  }
  html body .app-shell .context-strip .context-live {
    display: grid;
    grid-column: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  html body .app-shell .context-strip .context-live-item {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
  }
  html body .app-shell .context-strip .context-health {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    border-left: 1px solid var(--ui-border-soft);
    padding: 6px 10px;
  }
}

/* At drawer and laptop widths the fixed Agent launcher otherwise sits on top
   of decision cards. Keep it discoverable through its accessible label while
   reducing the visible control to an icon-sized affordance. */
@media (max-width: 1280px) {
  html body .agent-floating-toggle {
    width: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 8px;
  }
  html body .agent-floating-toggle .agent-floating-label,
  html body .agent-floating-toggle .agent-floating-pulse {
    display: none;
  }
}
@media (max-width: 560px) {
  body .main-content { padding-inline: 16px; }
  body .panel { padding: 16px; }
  body .metric-grid-large { grid-template-columns: 1fr 1fr; }
  body .metric-grid-large .metric { min-height: 92px; padding: 12px; }
  body .metric-grid-large .metric strong { font-size: 24px; }
  body .simulator-frame-wrap,
  body .simulator-frame-wrap iframe { min-height: 330px; height: 330px; }
  body .run-comparison-controls .field-label { flex: 1 1 140px; }
}

/* Laptop shell: preserve readable context labels instead of squeezing the
   top bar into vertical glyphs. The full context strip below still carries
   the same state, so the top bar can stay intentionally minimal. */
@media (max-width: 1080px) {
  .topbar-context { display: none; }
  .context-strip { overflow: visible; }
  .context-strip .context-live {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }
  .context-strip .context-live-item {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-right: 1px solid var(--ui-border-soft);
  }
  .context-strip .context-live-item:last-child { border-right: 0; }
  .context-strip .context-live-item strong { max-width: none; }
  .context-strip .context-health { display: none; }
}
@media (max-width: 560px) {
  .context-strip .context-live { grid-template-columns: 1fr 1fr; }
  .context-strip .context-live-item:nth-child(3) { border-right: 0; }
}

/* ======================== evaluation-rail-fix-2026 ========================
   Keep the evaluation summary readable at workstation widths. The previous
   three equal columns left the four metric cards with too little width, so
   Chinese labels and the contract result wrapped one character per line. The
   metric panel now uses a compact 2×2 matrix, while the comparison and live
   device panels stay as sibling decision surfaces. */
@media (min-width: 1081px) {
  body .app-shell [data-view-section='evaluate'] .evaluation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  body .app-shell [data-view-section='evaluate'] .evaluation-grid .originbot-compare-panel {
    grid-column: auto;
  }

  body .app-shell [data-view-section='evaluate'] .metric-grid-large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body .app-shell [data-view-section='evaluate'] .metric-grid-large .metric {
    min-width: 0;
    min-height: 96px;
    padding: 16px;
  }

  body .app-shell [data-view-section='evaluate'] .metric-grid-large .metric strong {
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;
    word-break: keep-all;
  }

  body .app-shell [data-view-section='evaluate'] .metric-grid-large .metric span {
    line-height: 1.4;
    word-break: keep-all;
  }
}

@media (min-width: 1081px) and (max-width: 1280px) {
  body .app-shell [data-view-section='evaluate'] .evaluation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body .app-shell [data-view-section='evaluate'] .metric-grid-large .metric strong {
    word-break: keep-all;
  }
}

/* The legacy rule pins the live-device card to grid column 2. That creates an
   implicit 34px column when the evaluation grid collapses to one column on a
   phone, squeezing the metrics panel into a vertical strip. Let normal grid
   flow handle the card at every breakpoint. */
body .app-shell [data-view-section='evaluate'] .evaluation-grid .originbot-compare-panel {
  grid-column: auto;
}

/* ======================== product-clarity pass =========================
   Keep the platform's existing visual language, but make the first decision
   easier to read: low-frequency tools stay collapsed, the object chain is
   visible beside the primary action, and long-running work leaves a safe
   bottom zone for the Agent launcher.  This is intentionally a final layer so
   it wins over the historical skin layers without changing their contracts.
============================================================================ */

.product-clarity-shell .sidebar-nav-group:not([open]) > .workflow-nav {
  display: none;
}

/* Use readable body sizing for explanations while keeping compact badges and
   timestamps compact. This gives Chinese copy enough breathing room without
   turning the data dense surfaces into oversized cards. */
.product-clarity-shell .overview-page-title > p,
.product-clarity-shell .small-note,
.product-clarity-shell .panel-caption,
.product-clarity-shell .workspace-summary-card em,
.product-clarity-shell .workspace-recent-heading > div > span,
.product-clarity-shell .workspace-recent-copy small,
.product-clarity-shell .manifest-explainer span,
.product-clarity-shell .manifest-explainer em {
  font-size:var(--fs-body);
  line-height: 1.6;
}

.product-clarity-shell .workspace-summary-card small,
.product-clarity-shell .workspace-summary-card strong,
.product-clarity-shell .workspace-recent-copy strong,
.product-clarity-shell .status-card p,
.product-clarity-shell .deploy-timeline-item small,
.product-clarity-shell .promotion-stage small {
  font-size:var(--fs-body);
}

/* Secondary state must not compete with the current action. */
.product-clarity-shell .context-live-item {
  background: color-mix(in srgb, var(--panel) 92%, var(--bg-soft));
}

.product-clarity-shell .context-live-item span,
.product-clarity-shell .context-health span {
  font-size:var(--fs-meta);
  letter-spacing: 0.08em;
}

.product-clarity-shell .context-live-item strong,
.product-clarity-shell .context-health strong {
  font-size:var(--fs-body);
}

.product-clarity-shell .workspace-status-banner {
  align-items: flex-start;
}

.product-clarity-shell .workspace-status-copy {
  min-width: 0;
}

.product-clarity-shell .workspace-status-copy strong {
  display: block;
  font-size:var(--fs-body);
}

.product-clarity-shell .workspace-status-copy span {
  display: block;
  margin-top: 2px;
  color: var(--muted-strong);
  font-size:var(--fs-body);
  line-height: 1.5;
}

body .product-clarity-shell .shell-layout > .main-content {
  padding-bottom: 136px;
}

body.agent-chat-open .product-clarity-shell .agent-chat-heading > div:first-child {
  min-width: 0;
}

.product-clarity-shell .agent-chat-role {
  max-width: 620px;
  margin: 4px 0 0;
  color: var(--muted);
}

body.agent-chat-open .product-clarity-shell .agent-chat-heading .workspace-kicker {
  margin-bottom: 2px;
}

@media (max-width: 720px) {
  /* Keyboard shortcut hints are not useful on touch screens and steal room
     from the navigation toggle and the current action. */
  .product-clarity-shell .cmdk-trigger {
    display: none;
  }

  body .product-clarity-shell > .shell-layout .main-content {
    padding-bottom: 104px;
  }

body .product-clarity-shell .agent-chat-role {
    max-width: 48ch;
  }
}

/* ======================== depth pass 2026 ===============================
   The workbench had good spacing but too many surfaces shared the same visual
   weight. This pass establishes four levels: shell, context, hero workbench,
   and supporting controls. Borders are reserved for controls and status; the
   main simulation surface uses elevation and a dark canvas instead.
============================================================================ */

body .product-clarity-shell .main-content {
  background:
    radial-gradient(ellipse 72% 28% at 48% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, var(--panel)), var(--bg) 560px);
}

body .product-clarity-shell .sidebar {
  background: color-mix(in srgb, var(--bg) 90%, var(--panel));
}

body .product-clarity-shell .sidebar-project {
  border-color: transparent;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--text) 7%, transparent);
}

body .product-clarity-shell .nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: inset 4px 0 0 var(--accent), 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

body .product-clarity-shell .context-strip {
  border: 0;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 82%, var(--bg-soft));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--text) 7%, transparent);
}

body .product-clarity-shell .context-strip .context-live-item {
  border-right-color: color-mix(in srgb, var(--line) 70%, transparent);
}

body .product-clarity-shell .workspace-status-banner {
  border: 0;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 5%, transparent);
}

body .product-clarity-shell .workspace-status-banner.is-error {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 72%, var(--panel));
}

body .product-clarity-shell [data-view-section='simulate'] .simulator-panel {
  border-color: transparent;
  background: var(--panel);
  box-shadow: 0 20px 46px color-mix(in srgb, var(--text) 11%, transparent);
}

body .product-clarity-shell [data-view-section='simulate'] .simulator-panel .panel-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-border-soft);
}

body .product-clarity-shell [data-view-section='simulate'] .simulator-frame-wrap {
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 48%, transparent), 0 14px 28px rgba(0, 0, 0, 0.22);
}

body .product-clarity-shell [data-view-section='simulate'] .simulator-footer {
  padding: 12px 4px 0;
  color: var(--muted-strong);
}

body .product-clarity-shell [data-view-section='simulate'] .guide-panel {
  border-color: transparent;
  background: color-mix(in srgb, var(--panel-soft) 88%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .product-clarity-shell [data-view-section='simulate'] .sim-context-panel {
  margin-bottom: 20px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 5%, transparent);
}

body .product-clarity-shell [data-view-section='simulate'] .sim-action-library {
  border-top-color: var(--ui-border-soft);
}

@media (max-width: 720px) {
  body .product-clarity-shell [data-view-section='simulate'] > .sim-layout > .guide-panel {
    box-shadow: inset 0 0 0 1px var(--ui-border-soft), 0 10px 24px color-mix(in srgb, var(--text) 5%, transparent);
  }
}

/* ======================== complete-polish-2026 ==========================
   Final visual pass for the remaining workbench surfaces. The rules below
   only change hierarchy, grouping and responsive behavior; existing data and
   interaction hooks stay untouched. */

/* A blocked simulator still deserves a convincing workspace surface. Keep the
   canvas dark and technical so the empty state reads as “adapter unavailable”
   instead of a blank white iframe. */
body .simulator-frame-wrap:has(.simulator-product-gate:not([hidden])) {
  border-color: color-mix(in srgb, var(--line-strong) 72%, var(--accent));
  background-color: var(--frame-navy);
  background-image:
    linear-gradient(rgba(127, 151, 174, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 151, 174, .07) 1px, transparent 1px),
    radial-gradient(circle at 72% 28%, rgba(255, 145, 65, .15), transparent 32%),
    radial-gradient(circle at 22% 76%, rgba(91, 144, 190, .14), transparent 34%);
  background-size: 32px 32px, 32px 32px, auto, auto;
}
body .simulator-frame-wrap:has(.simulator-product-gate:not([hidden]))::after {
  position: absolute;
  inset: 12% 10%;
  border: 1px solid rgba(164, 188, 212, .12);
  border-radius: 24px;
  content: '';
  pointer-events: none;
  transform: perspective(560px) rotateX(58deg) rotateZ(-4deg);
  transform-origin: center;
}
body .simulator-product-gate {
  z-index: 1;
  align-content: center;
  justify-items: start;
  padding: clamp(24px, 6vw, 64px);
  background: linear-gradient(90deg, rgba(8, 15, 23, .96), rgba(8, 15, 23, .72) 62%, rgba(8, 15, 23, .28));
  color: var(--frost);
}
body .simulator-product-gate > * { position: relative; z-index: 1; }
body .simulator-product-gate .gate-icon {
  border-color: rgba(255, 145, 65, .58);
  background: rgba(255, 145, 65, .12);
  color: var(--accent-pale);
}
body .simulator-product-gate strong { max-width: 520px; color: var(--frost-bright); }
body .simulator-product-gate p,
body .simulator-product-gate li { color: var(--mist-text); }
body .simulator-product-gate li strong { color: var(--frost); }
body .simulator-gate-steps {
  margin-top: 8px;
  margin-bottom: 12px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 145, 65, .3);
}
body .simulator-gate-actions { justify-content: flex-start; }
body .simulator-panel:has(.simulator-product-gate:not([hidden])) .simulator-footer {
  border-top: 1px solid var(--ui-border-soft);
  padding: 12px 4px 0;
}

/* Training: make the model card feel like a run console and keep backend
   readiness visible while the long artifact list scrolls below it. */
@media (min-width: 721px) {
  body .train-layout > #train-module-run-robogo {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}
body #train-module-run-model .model-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border-soft);
}
body #train-module-run-model .run-progress-card {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--ui-border-soft));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
body #train-module-run-model .run-progress-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 62%, transparent);
}
body #train-module-run-model .run-progress-track i {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--peach-bright));
}
body #train-module-run-robogo .backend-choice {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
body #train-module-run-robogo .backend-choice-card {
  min-height: 58px;
  border-radius: 12px;
}

/* Records: turn a sparse list into a quiet experiment ledger with a strong
   filter header, pill-like kinds and a visible row rhythm. */
body [data-view-section='records'] .history-panel {
  overflow: hidden;
  padding: 0;
}
body [data-view-section='records'] .history-panel > .panel-heading {
  margin: 0;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ui-border-soft);
}
body [data-view-section='records'] .records-toolbar {
  margin: 0;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ui-border-soft);
  background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
}
body [data-view-section='records'] .record-tabs {
  gap: 4px;
}
body [data-view-section='records'] .record-tab {
  min-height: 32px;
  border-radius: 999px;
  padding: 6px 12px;
}
body [data-view-section='records'] #record-search {
  min-width: 220px;
  min-height: 36px;
  border-radius: 999px;
}
body [data-view-section='records'] .history-list {
  gap: 0;
  padding: 4px 24px 16px;
}
body [data-view-section='records'] .history-row {
  min-height: 58px;
  border-top-color: var(--ui-border-soft);
  padding: 12px 8px;
  transition: background .16s ease;
}
body [data-view-section='records'] .history-row:hover {
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
body [data-view-section='records'] .history-kind {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--ui-border-soft));
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
body [data-view-section='records'] .history-status {
  min-width: 52px;
  padding: 4px 8px;
  text-align: center;
}

/* Device console: separate connection form, device inventory and status so
   the first screen reads like a control center rather than a long form. */
body [data-view-section='station'] .station-notice {
  border-width: 1px;
  border-left-width: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
}
body [data-view-section='station'] .station-device-manager {
  overflow: hidden;
  padding: 0;
}
body [data-view-section='station'] .station-device-manager > .panel-heading,
body [data-view-section='station'] .station-device-manager > .station-drive-note,
body [data-view-section='station'] .station-device-manager > .station-studio-connect,
body [data-view-section='station'] .station-device-manager > .station-device-add,
body [data-view-section='station'] .station-device-manager > .station-connect-script,
body [data-view-section='station'] .station-device-manager > .station-device-list,
body [data-view-section='station'] .station-device-manager > .station-device-ssh-hint {
  margin-right: 24px;
  margin-left: 24px;
}
body [data-view-section='station'] .station-device-manager > .panel-heading {
  margin-top: 0;
  padding-top: 24px;
}
body [data-view-section='station'] .station-device-add {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--ui-border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
}
body [data-view-section='station'] .station-device-add label {
  min-width: 0;
  align-self: start;
}
body [data-view-section='station'] .station-device-add input,
body [data-view-section='station'] .station-device-add select { width: 100%; min-width: 0; min-height: 38px; }
body [data-view-section='station'] .station-device-add-btn,
body [data-view-section='station'] .station-device-script-btn { min-height: 38px; }
body [data-view-section='station'] .station-device-list {
  margin-top: 16px;
  padding-bottom: 4px;
}
body [data-view-section='station'] .station-device-item {
  min-height: 66px;
  border-color: var(--ui-border-soft);
  background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
}
body [data-view-section='station'] .station-device-item:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--ui-border-soft));
}
body [data-view-section='station'] .station-device-ssh-hint:last-child {
  margin-bottom: 24px;
}

/* Release gate: the side rail is a decision surface, so the current and
   blocked steps should be visually louder than the locked future steps. */
@media (min-width: 721px) {
  body [data-view-section='deploy'] .deploy-flow-panel {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}
body [data-view-section='deploy'] .release-step.is-current,
body [data-view-section='deploy'] .release-step.is-blocked {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--ui-border-soft));
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
body [data-view-section='deploy'] .release-step.is-locked { opacity: .48; }

/* The first-run training path is a sequence of focused screens. Keep one
   step per row so each module reads as its own page-sized handoff instead of
   compressing three actions into a horizontal strip. */
body .train-onboarding-steps {
  grid-template-columns: 1fr;
  gap: 10px;
}

body .train-onboarding-step {
  min-height: 64px;
  padding: 16px;
  align-items: flex-start;
}

body .train-onboarding-step b {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

body .train-onboarding-step strong {
  font-size: 14px;
}

body .train-onboarding-step small {
  line-height: 1.45;
}

/* Final visual system for the hierarchical workspace navigation. The old
   global button reset is intentionally overridden here so nested task links
   never fall back to native browser chrome. */
body .workflow-nav-hierarchical summary.nav-item-parent {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: start;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  appearance: none;
  -webkit-appearance: none;
  list-style: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body .workflow-nav-hierarchical {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body .workflow-nav-hierarchical .sidebar-nav-group {
  display: block;
  margin: 0;
}

body .workflow-nav-hierarchical summary.nav-item-parent .nav-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--muted-strong);
  background: var(--panel-soft);
  font-size:var(--fs-mono-micro);
  font-weight: 700;
}

body .workflow-nav-hierarchical summary.nav-item-parent > span:nth-child(2) {
  min-width: 0;
}

body .workflow-nav-hierarchical summary.nav-item-parent strong {
  display: block;
  color: var(--text);
  font-size:var(--fs-body);
  line-height: 1.25;
}

body .workflow-nav-hierarchical summary.nav-item-parent small {
  display: none;
  margin-top: 4px;
  color: var(--muted);
  font-size:var(--fs-meta);
  line-height: 1.35;
}

body .workflow-nav-hierarchical summary.nav-item-parent > i {
  margin-top: 4px;
  color: var(--muted);
  font-size:var(--fs-body);
  font-style: normal;
  text-align: center;
  transition: transform .18s ease;
}

body .workflow-nav-hierarchical .sidebar-nav-group[open] > summary.nav-item-parent > i {
  transform: rotate(180deg);
  color: var(--accent-text);
}

body .workflow-nav-hierarchical summary.nav-item-parent::-webkit-details-marker {
  display: none;
}

body .workflow-nav-hierarchical summary.nav-item-parent:hover,
body .workflow-nav-hierarchical summary.nav-item-parent:focus-visible {
  border-color: var(--ui-border-soft);
  background: var(--ui-surface-tint);
  color: var(--text);
  outline: none;
}

/* 展开态只保留浅底色、去掉边框盒：三个分组同时展开时，边框盒会叠成
   一面「盒子墙」，视觉重心被吸到导航壳上而不是内容上。悬停/聚焦仍
   保留边框反馈。 */
body .workflow-nav-hierarchical .sidebar-nav-group[open] > summary.nav-item-parent {
  border-color: transparent;
  background: var(--ui-surface-tint);
  color: var(--text);
}

body .workflow-nav-hierarchical .nav-subitems {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0 0 2px 20px;
  padding: 8px 0 4px 16px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}

body .workflow-nav-hierarchical .nav-subitems::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-ring) 18%, var(--accent-ring) 82%, transparent);
}

body .workflow-nav-hierarchical .nav-subitem {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted-strong);
  font: inherit;
  font-size: var(--fs-meta);
  line-height: 1.3;
  text-align: left;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

body .workflow-nav-hierarchical .nav-subitem::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 8px 2px 0;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .48;
  transition: background .18s ease, opacity .18s ease;
}

body .workflow-nav-hierarchical .nav-subitem:hover,
body .workflow-nav-hierarchical .nav-subitem:focus-visible,
body .workflow-nav-hierarchical .nav-subitem.is-active {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, transparent));
  color: var(--accent-text);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
  transform: translateX(2px);
}

body .workflow-nav-hierarchical .nav-subitem.is-active::before {
  border-color: var(--accent);
  background: var(--accent);
  opacity: 1;
}

/* Child modules are real focused screens inside their parent view. A click
   changes the flow state, and the page keeps only the tools needed for that
   task visible instead of presenting the same long canvas every time. */
body[data-flow-child='prepare'] [data-view-section='train'] > .train-onboarding,
body[data-flow-child='prepare'] [data-view-section='train'] > .train-layout,
body[data-flow-child='configure'] [data-view-section='train'] > .train-onboarding,
body[data-flow-child='submit'] [data-view-section='train'] > .train-onboarding {
  display: none;
}

body[data-flow-child='prepare'] [data-view-section='train'] > #contract-fold {
  display: block;
  border-color: var(--accent-ring);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 8%, transparent);
}

body[data-flow-child='configure'] [data-view-section='train'] > .train-layout,
body[data-flow-child='submit'] [data-view-section='train'] > .train-layout {
  display: block;
}

body[data-flow-child='configure'] [data-view-section='train'] > .train-layout .model-details-fold,
body[data-flow-child='configure'] [data-view-section='train'] > .train-layout .model-actions,
body[data-flow-child='submit'] [data-view-section='train'] > .train-layout .model-details-fold,
body[data-flow-child='submit'] [data-view-section='train'] > .train-layout .training-controls {
  display: none;
}

body[data-flow-child='configure'] [data-view-section='train'] .training-controls {
  display: block;
  margin-top: 16px;
  border-color: var(--accent-ring);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 8%, transparent);
}

body[data-flow-child='submit'] [data-view-section='train'] .model-actions {
  display: flex;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border-soft);
}

body[data-flow-child='submit'] [data-view-section='train'] .action-block-hint {
  margin-top: 12px;
}

body[data-flow-child='evaluation-run'] [data-view-section='evaluate'] .evaluation-empty,
body[data-flow-child='comparison'] [data-view-section='evaluate'] .evaluation-empty {
  display: none;
}

body[data-flow-child='comparison'] [data-view-section='evaluate'] .evaluation-banner {
  border-color: var(--accent-ring);
}

body[data-flow-child='preflight'] [data-view-section='deploy'] .deploy-flow-panel,
body[data-flow-child='feedback'] [data-view-section='deploy'] .board-panel {
  display: none;
}

body[data-flow-child='release'] [data-view-section='deploy'] .board-panel {
  display: none;
}

body[data-flow-child='release'] [data-view-section='deploy'] .deploy-flow-panel {
  border-color: var(--accent-ring);
}



body [data-view-section='deploy'] .promotion-stage {
  min-height: 78px;
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
}

@media (max-width: 720px) {
  body [data-view-section='station'] .station-device-manager > .panel-heading,
  body [data-view-section='station'] .station-device-manager > .station-drive-note,
  body [data-view-section='station'] .station-device-manager > .station-studio-connect,
  body [data-view-section='station'] .station-device-manager > .station-device-add,
  body [data-view-section='station'] .station-device-manager > .station-connect-script,
  body [data-view-section='station'] .station-device-manager > .station-device-list,
  body [data-view-section='station'] .station-device-manager > .station-device-ssh-hint {
    margin-right: 16px;
    margin-left: 16px;
  }
  body [data-view-section='station'] .station-device-add {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body [data-view-section='records'] .records-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  body [data-view-section='records'] #record-search { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  body [data-view-section='station'] .station-device-add { grid-template-columns: 1fr; }
  body [data-view-section='records'] .history-list { padding-right: 16px; padding-left: 16px; }
  body [data-view-section='records'] .history-row {
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 8px;
  }
  body [data-view-section='records'] .history-summary { grid-column: 2; }
  body [data-view-section='records'] .history-status { grid-column: 3; grid-row: 1 / span 2; }
}

/* ======================== depth-led final surface ========================
   Final override for the live workbench: use surface contrast and elevation
   to establish a clear focal point. The dedicated shell class keeps this pass
   isolated from the legacy component vocabulary and makes the hierarchy easy
   to tune without growing cross-layer selector debt. */

body .depth-led {
  background: var(--bg);
}

body .depth-led .topbar {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led .sidebar {
  background: color-mix(in srgb, var(--bg-soft) 86%, var(--panel));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led .main-content {
  background: var(--panel);
}

body .depth-led .context-strip {
  border: 0;
  border-left: 0;
  background: color-mix(in srgb, var(--panel) 78%, var(--bg-soft));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led .context-strip .context-live-item {
  border-right-color: color-mix(in srgb, var(--line) 68%, transparent);
}

body .depth-led .workspace-status-banner {
  border: 0;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led .workspace-status-banner.is-error {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 72%, var(--panel));
}

body .depth-led [data-view-section='simulate'] .simulator-panel {
  border: 0;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='simulate'] .simulator-panel .panel-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-border-soft);
}

body .depth-led [data-view-section='simulate'] .simulator-frame-wrap {
  border: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='simulate'] .simulator-footer {
  padding: 16px 4px 0;
}

body .depth-led [data-view-section='simulate'] .guide-panel {
  border: 0;
  background: color-mix(in srgb, var(--panel-soft) 92%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='simulate'] .sim-context-panel {
  margin-bottom: 20px;
  border: 0;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='simulate'] .sim-action-item {
  border-color: transparent;
  background: color-mix(in srgb, var(--panel) 72%, var(--bg-soft));
}

body .depth-led [data-view-section='simulate'] .sim-action-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

@media (max-width: 720px) {
  body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel {
    box-shadow: inset 0 0 0 1px var(--ui-border-soft);
  }
}

/* depth-led component hierarchy: the shell, hero surface and support rail
   need three different weights. Keep the hairline inside the surface so
   cards read as elevated objects rather than a grid of outlined boxes. */
body .depth-led .panel {
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led .panel-heading {
  border-bottom: 1px solid var(--ui-border-soft);
  padding-bottom: 16px;
}

body .depth-led .status-card {
  border: 0;
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--panel) 86%, var(--bg-soft));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led .context-strip,
body .depth-led .workspace-status-banner,
body .depth-led .workspace-notices {
  border-radius: var(--ui-radius-lg);
}

body .depth-led .submodule-tabs {
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--panel) 84%, var(--bg-soft));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='overview'] .project-workspace,
body .depth-led [data-view-section='overview'] .overview-environment,
body .depth-led [data-view-section='train'] .train-onboarding {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='overview'] .workspace-summary-grid {
  border-color: transparent;
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--panel-soft) 86%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='overview'] .workspace-summary-card {
  background: transparent;
}

body .depth-led [data-view-section='train'] .train-onboarding-step,
body .depth-led [data-view-section='deploy'] .release-step {
  border-color: transparent;
  background: color-mix(in srgb, var(--panel) 72%, var(--bg-soft));
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel {
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel .sim-context-panel {
  box-shadow: inset 0 0 0 1px var(--ui-border-soft);
}

@media (max-width: 720px) {
  body .depth-led .panel {
    border-radius: var(--ui-radius-md);
    box-shadow: inset 0 0 0 1px var(--ui-border-soft);
  }
}

/* 移动端产品定位：小屏只承诺"查看状态 / 审批 / 日志 / 评测结果"。
   训练配置与设备控制在 720px 以下给出一行桌面端引导，桌面端不渲染。 */
.mobile-desktop-hint {
  display: none;
}

@media (max-width: 720px) {
  .mobile-desktop-hint {
    display: block;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--ui-border-soft);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    color: var(--muted-strong);
    background: var(--panel-soft);
    font-size: var(--fs-body);
    line-height: 1.5;
  }
}

/* compact-workbench pass: show the decision surface first and keep evidence
   drawers closed until the operator asks for them. */
body .depth-led > .shell-layout > .main-content > .context-strip {
  min-height: 0;
  margin-bottom: 16px;
  padding: 4px 10px;
}

body .depth-led > .shell-layout > .main-content > .context-strip .context-live-item {
  min-height: 44px;
  padding: 4px 10px;
}

body .depth-led > .shell-layout > .main-content > .context-strip .context-live-item strong {
  margin-top: 2px;
  font-size: var(--fs-meta);
}

body .depth-led > .shell-layout > .main-content > .context-strip .context-health {
  padding-inline: 10px;
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel > .sim-action-library {
  margin-top: 12px;
  padding-top: 8px;
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel > .sim-action-library > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  color: var(--muted-strong);
  cursor: pointer;
  list-style: none;
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel > .sim-action-library > summary::-webkit-details-marker {
  display: none;
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel > .sim-action-library > summary small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel > .sim-action-library > summary > span {
  color: var(--muted);
  font-size: var(--fs-meta);
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel > .sim-action-library[open] > summary > span i,
body .depth-led .deploy-detail-fold[open] > summary > span:last-child::after {
  transform: rotate(180deg);
}

body .depth-led [data-view-section='simulate'] > .sim-layout > .guide-panel > .sim-action-library > summary > span i {
  display: inline-block;
  margin-left: 4px;
  transition: transform .16s ease;
}

body .depth-led .deploy-detail-fold {
  margin-top: 12px;
  border-top: 1px solid var(--ui-border-soft);
}

body .depth-led .deploy-detail-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  color: var(--muted-strong);
  cursor: pointer;
  list-style: none;
}

body .depth-led .deploy-detail-fold > summary::-webkit-details-marker {
  display: none;
}

body .depth-led .deploy-detail-fold > summary > span:first-child {
  font-weight: 650;
}

body .depth-led .deploy-detail-fold > summary > span:last-child {
  color: var(--muted);
  font-size: var(--fs-meta);
}

body .depth-led .deploy-detail-fold > summary > span:last-child::after {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  content: '⌄';
  transition: transform .16s ease;
}

body .depth-led .deploy-detail-fold[open] > summary {
  color: var(--accent-text);
}

body .depth-led .deploy-detail-fold .deploy-timeline,
body .depth-led .deploy-detail-fold .promotion-flow {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body .depth-led [data-view-section='deploy'] > .deploy-layout {
  gap: 16px;
}

body .depth-led [data-view-section='deploy'] > .deploy-layout > .deploy-flow-panel .release-steps {
  margin-top: 12px;
}

body .depth-led [data-view-section='deploy'] > .deploy-layout > .deploy-flow-panel .release-step {
  padding: 8px 0 12px;
}

/* Final information-architecture pass: the persistent chrome names only the
   project and stage. Everything else is an on-demand environment drawer. */
body .depth-led > .shell-layout > .main-content > .context-strip {
  align-items: center;
}

body .depth-led > .shell-layout > .main-content > .context-strip .context-live {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  overflow: visible;
}

body .depth-led .context-breadcrumb {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 8px 2px;
  color: var(--text);
  white-space: nowrap;
}

body .depth-led .context-breadcrumb-label {
  color: var(--muted);
  font-size: var(--fs-meta);
  letter-spacing: .08em;
}

body .depth-led .context-breadcrumb strong {
  max-width: min(34vw, 260px);
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .depth-led .context-breadcrumb i {
  color: var(--muted);
  font-style: normal;
}

body .depth-led .context-extra-details {
  min-width: 0;
}

body .depth-led .context-extra-details > summary {
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  background: color-mix(in srgb, var(--panel-soft) 76%, transparent);
  font-size: var(--fs-meta);
}

body .depth-led .context-extra-details > summary small {
  margin-left: 4px;
  color: var(--muted);
  font-size: var(--fs-meta);
}

body .depth-led .context-extra-items {
  grid-template-columns: repeat(3, minmax(132px, 1fr));
  gap: 4px;
}

/* A right rail is an Inspector, not a second permanent canvas. Details keeps
   the summary visible while returning the main work surface to one column. */
body .depth-led .workspace-inspector {
  align-self: start;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

body .depth-led .workspace-inspector > summary.workspace-inspector-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  margin: 0;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

body .depth-led .workspace-inspector > summary.workspace-inspector-summary::-webkit-details-marker {
  display: none;
}

body .depth-led .workspace-inspector > summary.workspace-inspector-summary > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

body .depth-led .workspace-inspector > summary.workspace-inspector-summary small {
  color: var(--accent-text);
  font-size: var(--fs-meta);
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body .depth-led .workspace-inspector > summary.workspace-inspector-summary h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-body-lg);
}

body .depth-led .workspace-inspector-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-meta);
  white-space: nowrap;
}

body .depth-led .workspace-inspector-toggle i {
  display: inline-block;
  font-style: normal;
  transition: transform .16s ease;
}

body .depth-led .workspace-inspector[open] > summary.workspace-inspector-summary {
  border-bottom: 1px solid var(--ui-border-soft);
  color: var(--accent-text);
}

body .depth-led .workspace-inspector[open] .workspace-inspector-toggle i {
  transform: rotate(180deg);
}

body .depth-led .workspace-inspector > :not(summary) {
  margin-inline: 20px;
}

body .depth-led .workspace-inspector > :not(summary):last-child {
  margin-bottom: 20px;
}

body .depth-led [data-view-section='simulate'] > .sim-layout,
body .depth-led [data-view-section='train'] > .train-layout,
body .depth-led [data-view-section='deploy'] > .deploy-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

body .depth-led [data-view-section='evaluate'] .evaluation-grid {
  grid-template-columns: minmax(0, 1fr);
}

body .depth-led [data-view-section='evaluate'] .evaluation-evidence {
  grid-template-columns: minmax(0, 1fr);
}

body .depth-led [data-view-section='overview'] .workflow-progress-strip,
body .depth-led #workflow-progress-strip {
  display: none;
}

@media (max-width: 720px) {
  body .depth-led .context-breadcrumb strong {
    max-width: 36vw;
  }

  body .depth-led .context-extra-details > summary small {
    display: none;
  }

  body .depth-led .context-extra-items {
    right: -8px;
    grid-template-columns: 1fr;
    min-width: 210px;
  }

  body .depth-led .workspace-inspector > summary.workspace-inspector-summary {
    min-height: 58px;
    padding: 12px;
  }

  body .depth-led .workspace-inspector > :not(summary) {
    margin-inline: 12px;
  }
}

/* 账号菜单（对齐 RDK Studio 的 sso-avatar-btn / sso-user-menu 范式）：
   头像按钮 + role=menu 下拉，颜色全部走 token（暗色由 theme-dark 翻转），
   不新增跨层选择器；追加于既有最后一层之内。 */
.account-menu-wrap {
  position: relative;
  display: inline-flex;
}
.account-avatar {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-meta);
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.account-avatar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  margin: 0;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 16%, transparent);
  z-index: var(--z-sticky);
}
.account-menu[hidden] {
  display: none;
}
.account-menu-name {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.account-menu-id {
  margin: 0 0 6px;
  font-size: var(--fs-meta);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.account-menu-sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}
.account-menu-item {
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}
.account-menu-item:hover {
  background: var(--bg-soft);
}

.originman-round-comparison {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Product context is a compact row shared by release-specific course panels. */
body .depth-led .nav-item small { display: none; }
body .depth-led .workspace-product-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px 16px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 16px;
}
.workspace-product-context > h2 { margin: 0; font-size: var(--fs-body-lg); }
.workspace-product-context > p { grid-column: 1; margin: 0; color: var(--muted); font-size: var(--fs-meta); }
.workspace-product-context > .model-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 720px) {
  body .depth-led .workspace-product-context { grid-template-columns: minmax(0, 1fr); }
  .workspace-product-context > .model-actions { grid-column: 1; grid-row: auto; }
}

/* Keep comparison values readable inside the Studio pane and phone viewport.
   Only the table scrolls; short Chinese statuses and numeric values stay whole. */
:is(.originman-case-table, .beginner-contract-table, .table-scroll) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
:is(.originman-case-table, .beginner-contract-table, .table-scroll) table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
:is(.originman-case-table, .beginner-contract-table, .table-scroll):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:is(.originman-case-table, .beginner-contract-table, .table-scroll) :where(th, td) {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}