/* Hallmark · v2.0.0 · theme: cobalt (by request) · genre: modern-minimal · shape: app screen · redesign: full (app) · scope: app · built: 2026-11-11 */
/* critique: the event queue becomes a ruled ledger with a severity rail, and the risk counts become its header line; risk: with no data the rail reads as five tinted sticks */
/* reworded "COMPUTE HUB · RISK WATCH" to "Compute Hub Risk Watch" · 63 names the middle-dot meta string */
/* reworded "数据中心集群 · 韶关" to "韶关数据中心集群" · 63 names the middle-dot meta string */
/* Hallmark · dropped the eyebrow spans "RISK INTELLIGENCE / EVENT DETAIL", "ANALYST ACTIONS", "ASSESSMENT", "SOURCE VERIFICATION", "AUDIT TRAIL", "REPORT CENTER" · 54 forbids eyebrows and 63 forbids slash-joined meta; each repeated the Chinese heading directly below it */
/* Hallmark · reworded the 8 clock figures (11:11, 07:11, 02:11, 14:11, 09:11, 00:11, 16:11, 13:11) · they are rendered from Date.now() against a reseeded fixture, so the same row shows a new clock each run; no figure was removed */
/* Hallmark · dropped #fzvoqx1, #fw383rm, #f06wijn, #fg7afcd, #f80ups2, #felv77q, #fgy84r1 · ui.js field() mints a random id on every render, so dialog field ids never repeat; nothing was removed */

/* 层：tokens.css（变量）→ base.css（reset + 外壳）→ theme.css（全部视觉）。
   Cobalt：冷近白纸、发丝规线、切两角的面板、有实体边的键帽、唯一钴蓝信号、石墨暗面。 */

/* ============ 0. 全局排版 ============ */
body { font-size: var(--text-md); caret-color: var(--color-accent); }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); }

/* ============ 1. 顶栏 ============ */
.topbar {
  padding: 0 var(--space-2xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.topbar-title {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  white-space: nowrap;
}
.topbar-context { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-sm); }
.topbar-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ok);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.topbar-signal i {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.topbar-signal i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--color-ok-edge);
  border-radius: 50%;
  animation: ping var(--dur-short) var(--ease-out) infinite;
}
@keyframes ping {
  0% { transform: scale(0.55); opacity: 1; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}
.topbar-user { color: var(--color-ink-2); font-size: var(--text-xs); white-space: nowrap; }
.menu-toggle {
  place-items: center;
  width: 34px;
  height: 34px;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-key-face);
  color: var(--color-ink);
  box-shadow: var(--shadow-key);
}
.menu-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.menu-toggle:active { transform: translateY(1px); box-shadow: var(--shadow-key-press); }

/* ============ 2. 侧栏：工作列 ============ */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--topbar-height);
  padding: 0 var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  flex-shrink: 0;
}
.sidebar-brand-icon,
.login-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
}
/* 标志笔画：暗底上留亮线，避免 M 糊成一块 */
.sidebar-brand-icon svg,
.login-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--color-accent-2);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-brand-copy { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.sidebar-brand-copy strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-brand-copy span { color: var(--color-muted); font-size: var(--text-xs); }

.nav { padding: var(--space-md) 0 var(--space-lg); }
.nav-section { margin-bottom: var(--space-lg); }
.nav-section:last-child { margin-bottom: 0; }
.nav-label {
  padding: 0 var(--space-lg) var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 36px;
  margin: 1px var(--space-sm);
  padding: 0 var(--space-sm);
  border-radius: var(--radius-input);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav-item::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: calc(-1 * var(--space-sm));
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: transparent;
}
.nav-item:hover { background: var(--color-paper-3); color: var(--color-ink); }
.nav-item.active {
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-weight: 600;
}
.nav-item.active::before { background: var(--color-accent); }
.nav-item-icon {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.nav-item.active .nav-item-icon { opacity: 1; }
.nav-item-label { display: flex; align-items: center; flex: 1; min-width: 0; }
.nav-item .count {
  min-width: 20px;
  margin-left: auto;
  padding: 1px var(--space-xs);
  border-radius: var(--radius-chip);
  background: var(--lv-red);
  color: var(--color-on-solid);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-md) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.sidebar-user { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; padding-bottom: var(--space-sm); }
.sidebar-user-mark {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chip);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}
.sidebar-user > div { display: grid; gap: 1px; min-width: 0; }
.sidebar-user strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user span:not(.sidebar-user-mark) { color: var(--color-muted); font-size: var(--text-xs); }
.sidebar-footnote {
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-legal);
}
.sidebar-account-actions { display: none; gap: var(--space-xs); padding-bottom: var(--space-md); }
.sidebar-account-actions .btn { flex: 1; }
.nav-backdrop { background: var(--color-scrim); animation: fade-in var(--dur-micro) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ============ 3. 页头 ============ */
.page-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule-ink);
}
.page-head h1 {
  min-width: 0;
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  overflow-wrap: break-word;
}
.page-head .muted {
  margin-left: auto;
  max-width: 62ch;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.65;
  text-align: right;
}
.page-head > .btn, .page-head > button { flex: 0 0 auto; margin-left: auto; }
.page-head .muted + .btn, .page-head .muted + button { margin-left: 0; }

/* ============ 4. 键帽控件 ============ */
.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 34px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-key-face);
  color: var(--color-ink);
  box-shadow: var(--shadow-key);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--color-muted); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--shadow-key-press); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn.primary,
.btn-primary {
  border-color: var(--color-accent-edge);
  background: var(--color-accent);
  color: var(--color-on-solid);
  box-shadow: var(--shadow-key-accent);
}
.btn.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  border-color: var(--color-accent-deep);
  background: var(--color-accent-deep);
  color: var(--color-on-solid);
}
.btn.ghost,
.btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--color-ink-2);
}
.btn.ghost:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) { background: var(--color-paper-3); color: var(--color-ink); }
.btn.small { min-height: 32px; padding: 0 var(--space-sm); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn.large { min-height: 40px; padding: 0 var(--space-lg); font-size: var(--text-md); }
.btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  box-shadow: none;
}
.btn-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
.btn svg, .icon-text svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* ============ 5. 表单 ============ */
.field { margin-bottom: var(--space-lg); }
.field label,
.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}
.field .hint, p.hint {
  margin-top: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.field .error { margin-top: var(--space-xs); color: var(--color-error); font-size: var(--text-xs); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
  width: 100%;
  min-height: 34px;
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-field-edge);
  border-radius: var(--radius-input);
  background: var(--color-key-face);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--color-muted); }
input:hover, textarea:hover, select:hover { border-color: var(--color-muted); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
select option { background: var(--color-paper); color: var(--color-ink); }
textarea { resize: vertical; min-height: 84px; }
textarea.editor {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  line-height: 1.75;
}
code.pw {
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
}

/* ============ 6. 看板版面：队列为主，风险摘要为右轨 ============ */
/* 首屏由队列占据；等级与关注问题收进右轨，随滚动吸附。
   窄屏（≤64rem）退回单列，摘要回到顶部。 */
.board-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  grid-template-areas:
    "head head"
    "filters rail"
    "queue rail";
  align-items: start;
  column-gap: var(--space-xl);
}
.board-page > .page-head { grid-area: head; }
.board-page > .filters { grid-area: filters; }
.board-page > .ledger { grid-area: queue; min-width: 0; }

.briefing {
  grid-area: rail;
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-md));
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
  padding-left: var(--space-lg);
  border-left: var(--rule-hair) solid var(--color-rule);
}
.brief-section { min-width: 0; }
.brief-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-ink);
}
.brief-head h2 {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.brief-meta {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-legal);
  font-variant-numeric: tabular-nums;
}

/* 等级：行式台账——色块、名称、提示、计数 */
.sev-list { display: grid; }
.sev-row {
  --lv: var(--lv-lead);
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.sev-row.lv-red { --lv: var(--lv-red); }
.sev-row.lv-orange { --lv: var(--lv-orange); }
.sev-row.lv-yellow { --lv: var(--lv-yellow); }
.sev-row.lv-blue { --lv: var(--lv-blue); }
.sev-row.lv-lead { --lv: var(--lv-lead); }
.sev-row:hover { background: var(--color-paper-2); }
.sev-swatch { align-self: center; width: 10px; height: 10px; border-radius: 1px; background: var(--lv); }
.sev-name { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.sev-hint {
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-legal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sev-count {
  color: var(--lv);
  font-family: var(--font-outlier);
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sev-row.lv-red .sev-count { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.sev-row:hover .sev-count { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.sev-meter {
  display: flex;
  gap: var(--space-3xs);
  height: 6px;
  margin-top: var(--space-sm);
  border-radius: 2px;
  overflow: hidden;
  animation: meter-in var(--dur-short) var(--ease-out) both;
}
.sev-meter .seg { min-width: 2px; flex-basis: 0; background: var(--lv-lead); }
.sev-meter .seg.lv-red { background: var(--lv-red); }
.sev-meter .seg.lv-orange { background: var(--lv-orange); }
.sev-meter .seg.lv-yellow { background: var(--lv-yellow); }
.sev-meter .seg.lv-blue { background: var(--lv-blue); }
@keyframes meter-in { from { opacity: 0; transform: scaleX(0.96); } to { opacity: 1; transform: none; } }

/* 关注问题：轨内单列索引 */
.pir-list { display: grid; }
.pir-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.pir-row:hover { background: var(--color-accent-wash); }
.pir-code {
  padding: 0 var(--space-2xs);
  border: var(--rule-hair) solid var(--color-accent-2);
  border-radius: var(--radius-chip);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-family: var(--font-outlier);
  font-size: var(--text-legal);
}
.pir-name {
  overflow: hidden;
  color: var(--color-ink-2);
  font-size: var(--text-legal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pir-count {
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pir-count i { margin-left: var(--space-3xs); color: var(--color-muted); font-size: var(--text-legal); font-style: normal; }

/* ============ 7. 筛选条：贴在队列表头之上的一行工具 ============ */
.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: 0;
  padding: 0 0 var(--space-sm);
  border-bottom: 0;
}
.filters select,
.filters input[type="search"] {
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-field-edge);
  border-radius: var(--radius-input);
  background: var(--color-key-face);
  color: var(--color-ink);
  font-size: var(--text-xs);
  box-shadow: none;
}
.filters input[type="search"] { flex: 1 1 160px; min-width: 130px; }
.filters select:focus-visible,
.filters input[type="search"]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.filters .btn { min-height: 32px; font-size: var(--text-xs); }

/* ============ 8. 面板与表格 ============ */
.panel,
.card {
  padding: var(--space-lg) var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
}
.panel.report { padding: var(--space-xl) var(--space-2xl); }
.card-header { padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.card-body { padding: var(--space-lg); }

.table-wrapper,
table.table {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-paper);
}
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
}
tbody td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.6;
}
tbody th[scope="row"] {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
}
tbody tr:hover td, tbody tr:hover th[scope="row"] { background: var(--color-paper-2); }
tbody tr:last-child td, tbody tr:last-child th[scope="row"] { border-bottom: 0; }
td.small, td .small { color: var(--color-ink-2); font-size: var(--text-xs); }
td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============ 9. 徽章 / 标签 / 状态 ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.badge.lv-red { border-color: var(--lv-red-line); background: var(--lv-red-wash); color: var(--lv-red-ink); }
.badge.lv-orange { border-color: var(--lv-orange-line); background: var(--lv-orange-wash); color: var(--lv-orange-ink); }
.badge.lv-yellow { border-color: var(--lv-yellow-line); background: var(--lv-yellow-wash); color: var(--lv-yellow-ink); }
.badge.lv-blue { border-color: var(--lv-blue-line); background: var(--lv-blue-wash); color: var(--lv-blue-ink); }
.badge.lv-lead { border-color: var(--lv-lead-line); background: var(--lv-lead-wash); color: var(--lv-lead-ink); }
.badge-gray { border-color: var(--color-rule-2); background: var(--color-paper-3); color: var(--color-ink-2); }
.badge-red { border-color: var(--lv-red-line); background: var(--lv-red-wash); color: var(--lv-red-ink); }
.badge-yellow { border-color: var(--lv-yellow-line); background: var(--lv-yellow-wash); color: var(--lv-yellow-ink); }
.badge-green { border-color: var(--color-ok-edge); background: var(--color-ok-wash); color: var(--color-ok); }
.badge-blue { border-color: var(--lv-blue-line); background: var(--lv-blue-wash); color: var(--lv-blue-ink); }

.tag {
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chip);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.tag.pir-tag { border-color: var(--color-accent-2); background: var(--color-accent-wash); color: var(--color-accent-deep); }
.tag.impact-high { border-color: var(--lv-red-line); background: var(--lv-red-wash); color: var(--lv-red-ink); }
.tag.impact-medium { border-color: var(--lv-orange-line); background: var(--lv-orange-wash); color: var(--lv-orange-ink); }
.tag.impact-low, .tag.impact-unknown { border-color: var(--color-rule-2); color: var(--color-muted); }
.tag.warn { border-color: var(--lv-yellow-line); background: var(--lv-yellow-wash); color: var(--lv-yellow-ink); }
.tag.st-draft { border-color: var(--lv-yellow-line); background: var(--lv-yellow-wash); color: var(--lv-yellow-ink); }
.tag.st-final { border-color: var(--color-ok-edge); background: var(--color-ok-wash); color: var(--color-ok); }
.tag.source-reliability { font-family: var(--font-outlier); font-size: var(--text-xs); }

.rating {
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chip);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.signal-score { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }

.review-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chip);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.review-state.rv-pending { border-color: var(--lv-yellow-line); background: var(--lv-yellow-wash); color: var(--lv-yellow-ink); }
.review-state.rv-confirmed { border-color: var(--color-ok-edge); background: var(--color-ok-wash); color: var(--color-ok); }
.review-state.rv-rejected { border-color: var(--lv-red-line); background: var(--lv-red-wash); color: var(--lv-red-ink); }
.review-state.rv-ignored { border-color: var(--color-rule-2); background: var(--color-paper-2); color: var(--color-muted); }
.status-dot { display: none; }  /* 状态文字已在，圆点是纯装饰（Floor 10） */

.dot { display: inline-block; width: 7px; height: 7px; margin-right: var(--space-xs); border-radius: 50%; }
.dot.good { background: var(--color-ok); }
.dot.wait { background: var(--lv-yellow); }
.dot.bad { background: var(--lv-red); }
span.error, p.error { color: var(--color-error); font-size: var(--text-xs); }

/* ============ 10. 事件台账（签名）：三栏行 + 表头 ============ */
/* 行 = 等级刻度 3px | 事件主体 | 右侧锚点（时间 / 状态 / 处置）
   版式上更像一张运维登记表：标题是行首，标签是注解，操作常驻但不喧哗。 */
.ledger { min-width: 0; }
.ledger-head {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) 196px;
  align-items: center;
  padding: 0 var(--space-lg) var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-legal);
}
.ledger-head span:first-child { grid-column: 1 / 3; padding-left: var(--space-lg); }
.ledger-head span:last-child { grid-column: 3; padding-left: var(--space-lg); }

.list { display: grid; }

.ev-row {
  --severity: var(--lv-lead);
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) 196px;
  align-items: stretch;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.ev-row:hover { background: var(--color-paper-2); }
.ev-row.lv-red { --severity: var(--lv-red); }
.ev-row.lv-orange { --severity: var(--lv-orange); }
.ev-row.lv-yellow { --severity: var(--lv-yellow); }
.ev-row.lv-blue { --severity: var(--lv-blue); }
.ev-row.lv-lead { --severity: var(--lv-lead); }
.ev-tick { grid-column: 1; grid-row: 1; background: var(--severity); }

.ev-main { grid-column: 2; grid-row: 1; min-width: 0; padding: var(--space-md) var(--space-lg) var(--space-sm); }
.ev-title {
  margin: 0;
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
}
.ev-title a { color: inherit; }
.ev-row:hover .ev-title a { color: var(--color-accent-deep); }
.ev-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.ev-summary {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
}
/* 影响说明：只留左侧一道钴蓝，不再套底色块（去卡片里的卡片） */
.ev-reason {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-accent-2);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  line-height: 1.65;
}
.ev-reason strong { color: var(--color-accent-deep); font-size: var(--text-legal); font-weight: 600; white-space: nowrap; }
.reason-label { padding-left: 0; }
.ev-row .suspicious,
.ev-row .note {
  margin-top: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--lv-yellow);
  color: var(--lv-yellow-ink);
  font-size: var(--text-legal);
  line-height: 1.6;
}
.ev-row .note { border-left-color: var(--color-rule-2); color: var(--color-ink-2); }
.ev-footer { display: flex; align-items: center; padding-top: var(--space-xs); }
.ev-source-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.icon-text { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); font-size: var(--text-legal); }
.ev-row .icon-text { font-size: var(--text-legal); }

/* 右侧锚点：时间在上、状态居中、操作在下 */
.ev-side {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg) var(--space-sm) 0;
  border-left: var(--rule-hair) solid var(--color-rule);
}
.ev-when { display: grid; justify-items: end; gap: 1px; }
.ev-when strong {
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ev-ago { color: var(--color-muted); font-size: var(--text-legal); }

.review-state {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chip);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-size: var(--text-legal);
  white-space: nowrap;
}
.review-state.rv-pending { border-color: var(--lv-yellow-line); background: var(--lv-yellow-wash); color: var(--lv-yellow-ink); }
.review-state.rv-confirmed { border-color: var(--color-ok-edge); background: var(--color-ok-wash); color: var(--color-ok); }
.review-state.rv-rejected { border-color: var(--lv-red-line); background: var(--lv-red-wash); color: var(--lv-red-ink); }
.review-state.rv-ignored { border-color: var(--color-rule-2); background: var(--color-paper-2); color: var(--color-muted); }

/* 操作：静息无边框，行悬停或键盘聚焦时才显形，避免每行三颗实心按钮 */
.ev-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}
.ev-actions .btn.small {
  min-height: 30px;
  padding: 0 var(--space-sm);
  border-color: var(--color-rule-2);
  background: var(--color-paper);
  box-shadow: none;
  color: var(--color-ink-2);
  font-size: var(--text-legal);
}
.ev-row:hover .ev-actions .btn.small,
.ev-row:focus-within .ev-actions .btn.small {
  background: var(--color-key-face);
  box-shadow: var(--shadow-key);
}
.ev-actions .btn.small:hover:not(:disabled) { transform: translateY(-1px); }
.ev-actions .btn.small.btn-confirm { color: var(--color-ok); }
.ev-actions .btn.small.btn-confirm:hover:not(:disabled) { background: var(--color-ok); border-color: var(--color-ok); color: var(--color-on-solid); }
.ev-actions .btn.small.btn-reject { color: var(--lv-red-ink); }
.ev-actions .btn.small.btn-reject:hover:not(:disabled) { background: var(--lv-red); border-color: var(--lv-red); color: var(--color-on-solid); }
.ev-actions .btn.small.btn-detail { border-color: transparent; background: transparent; color: var(--color-accent); }
.ev-actions .btn.small.btn-detail:hover:not(:disabled) { background: var(--color-accent-wash); color: var(--color-accent-deep); }

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-xs);
}
.page-total { margin-right: auto; color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-range { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.btn.page-button { min-height: 32px; font-size: var(--text-xs); }
.empty {
  margin: 0;
  padding: var(--space-3xl) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* ============ 11. 事件详情 ============ */
.event-detail-page { max-width: 1180px; margin: 0 auto; }
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.back-link:hover { color: var(--color-accent-deep); }
.event-hero {
  margin-bottom: var(--space-md);
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-top: 2px solid var(--color-rule-ink);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.event-hero-copy { min-width: 0; }
/* 档位标签：源码里已有的英文小标（如 assessment），保留内容但压成注释性标签，
   不占标题位置、不做大写跟踪（Floor 9） */
.review-kicker,
.section-eyebrow {
  display: block;
  margin-bottom: var(--space-3xs);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-legal);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}
.review-kicker { color: var(--color-accent-deep); }
.event-hero h1 {
  max-width: 72ch;
  margin: var(--space-xs) 0 var(--space-md);
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.event-hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
.event-hero-summary {
  max-width: 90ch;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.8;
}
.event-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.72fr);
  align-items: start;
  gap: var(--space-md);
}
.event-main-column { display: grid; gap: var(--space-md); min-width: 0; }
.detail-section {
  min-width: 0;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.section-heading h2, .review-panel-heading h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-count {
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-chip);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}
.meta { display: grid; grid-template-columns: 92px minmax(0, 1fr); width: 100%; font-size: var(--text-xs); }
.meta dt, .meta dd {
  margin: 0;
  padding: var(--space-sm) var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
  line-height: 1.7;
}
.meta dt { color: var(--color-muted); font-size: var(--text-xs); }
.meta dd { color: var(--color-ink); overflow-wrap: break-word; }
.meta dt:first-child, .meta dt:first-child + dd { border-top: 0; }
.meta dd.suspicious { color: var(--lv-yellow-ink); }

.review-panel {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-md));
  min-width: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent-2);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-accent-wash);
}
.review-panel-heading { margin-bottom: var(--space-md); }
.review-panel-heading p { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-xs); }
.review-panel .btn-row { margin-bottom: var(--space-xs); }
.review-panel .btn { flex: 1 1 auto; min-height: 36px; }
.btn.primary.review-confirm { background: var(--color-ok); border-color: var(--color-ok); color: var(--color-on-solid); box-shadow: var(--shadow-key); }
.btn.primary.review-confirm:hover:not(:disabled) { background: var(--color-ok); border-color: var(--color-ok); }
.btn.review-reject { border-color: var(--lv-red-line); color: var(--lv-red-ink); background: var(--color-paper); }
.btn.review-reject:hover:not(:disabled) { background: var(--lv-red); border-color: var(--lv-red); color: var(--color-on-solid); }
.btn.review-ignore { background: var(--color-paper); }
.review-divider { height: var(--rule-hair); margin: var(--space-md) 0; background: var(--color-accent-2); }
.review-label {
  display: block;
  margin: var(--space-sm) 0 var(--space-2xs);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}
.review-panel select { min-height: 34px; border-color: var(--color-field-edge); background: var(--color-key-face); }
.review-panel textarea { min-height: 78px; border-color: var(--color-field-edge); background: var(--color-key-face); }
.review-panel .level-actions .btn { flex: 1; }
.btn.note-save { width: 100%; margin-top: var(--space-xs); }
.feedback-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-accent-2);
}
.feedback-row .review-label { margin: 0 auto 0 0; }
.feedback-button[aria-pressed="true"] { background: var(--color-paper); border-color: var(--color-accent); color: var(--color-accent-deep); }

.source-section, .history-section { grid-column: 1 / -1; }
.source-list { display: grid; gap: var(--space-sm); }
.source-card {
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-left: 2px solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-paper);
}
.source-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.source-identity { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.source-monogram {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-chip);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}
.source-identity > div { display: grid; gap: 1px; min-width: 0; }
.source-identity strong {
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-date { color: var(--color-muted); font-size: var(--text-legal); font-variant-numeric: tabular-nums; }
.source-reliability { flex: 0 0 auto; }
.source-title {
  margin-top: var(--space-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.source-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 2px; }
.source-title a:hover { color: var(--color-accent-deep); text-decoration-color: var(--color-accent); }
.original-title { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-legal); }
.source-summary { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.75; }
.source-analysis {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-accent);
  background: var(--color-paper-2);
}
.source-analysis.opinions { border-left-color: var(--lv-yellow); background: var(--lv-yellow-wash); }
.analysis-label { color: var(--color-accent-deep); font-size: var(--text-xs); font-weight: 600; }
.source-analysis.opinions .analysis-label { color: var(--lv-yellow-ink); }
.source-analysis ul { margin-top: var(--space-2xs); padding-left: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.7; }
.source-footnote { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-legal); line-height: 1.6; }
.source-original { margin-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-xs); }
.source-original summary { padding-top: var(--space-sm); cursor: pointer; color: var(--color-muted); }
.source-original summary:hover { color: var(--color-accent-deep); }
.source-original pre { overflow: auto; margin-top: var(--space-xs); white-space: pre-wrap; color: var(--color-ink-2); font-family: var(--font-outlier); font-size: var(--text-xs); }
.history { display: grid; margin: 0; padding: 0; list-style: none; }
.history li {
  padding: var(--space-sm) var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
}
.history li:first-child { border-top: 0; }

/* 状态表：动作列贴右，不被正文拉宽 */
table.table.status td:last-child { white-space: nowrap; text-align: right; }
table.table.status td:last-child:not(:empty) { width: 1%; }
table.table.status td:nth-child(2) { white-space: nowrap; }
table.table.status td:nth-child(4) { color: var(--color-muted); }

/* ============ 12. 系统状态 ============ */
.status-page > .page-head { align-items: center; }
.status-page > .hint { margin: var(--space-sm) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.status-reports {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.status-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.status-section-heading h2 { margin: 0; color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; }
.status-report-note { color: var(--color-muted); font-size: var(--text-xs); }
.status-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.status-report-kind {
  min-width: 0;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
}
.status-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.status-report-head > div { display: grid; gap: var(--space-3xs); }
.report-kind-label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.report-schedule { color: var(--color-muted); font-size: var(--text-legal); }
.btn.report-generate { min-height: 32px; font-size: var(--text-xs); border-color: var(--color-accent); color: var(--color-accent-deep); }
.btn.report-generate:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-solid); }
.status-latest-report {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-sm);
}
.latest-report-copy { display: grid; gap: var(--space-2xs); min-width: 0; }
.latest-report-title {
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-report-title:hover { color: var(--color-accent-deep); }
.latest-report-meta { color: var(--color-muted); font-size: var(--text-legal); }
.report-status {
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--lv-yellow-line);
  border-radius: var(--radius-chip);
  background: var(--lv-yellow-wash);
  color: var(--lv-yellow-ink);
  font-size: var(--text-legal);
  white-space: nowrap;
}
.report-status.st-final { border-color: var(--color-ok-edge); background: var(--color-ok-wash); color: var(--color-ok); }
.latest-report-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.latest-report-actions .btn { min-height: 32px; font-size: var(--text-xs); }
.report-empty { display: grid; gap: var(--space-2xs); padding-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.report-history { margin-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-xs); }
.report-history summary { padding-top: var(--space-sm); cursor: pointer; color: var(--color-muted); }
.report-history summary:hover { color: var(--color-accent-deep); }
.report-history ul { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); padding: 0; list-style: none; }
.report-history li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.report-history li span { margin-left: auto; color: var(--color-muted); font-size: var(--text-legal); }
.history-export { color: var(--color-accent); }

/* ============ 13. 流程页：唯一石墨带 ============ */
.flow-page { max-width: 960px; margin: 0 auto; }
.flow-page > h1 { margin-bottom: var(--space-xs); color: var(--color-ink); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-display); }
.flow-page > .lead { color: var(--color-ink-2); font-size: var(--text-sm); }
.flow-svg-wrap {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-graphite-2);
  border-radius: var(--radius-card);
  background: var(--color-graphite);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.flow-svg { display: block; width: 100%; height: auto; max-height: 670px; }
.flow-hint { display: none; margin: 0 0 var(--space-sm); color: var(--color-graphite-muted); font-size: var(--text-xs); }
.flow-node { fill: var(--color-graphite-2); stroke: var(--color-graphite-muted); stroke-opacity: 0.5; }
.flow-node-0 { fill: var(--color-graphite-3); stroke: var(--color-accent-2); }
.flow-node-2 { stroke: var(--color-ok); }
.flow-node-3 { stroke: var(--lv-yellow); }
.flow-node-title { fill: var(--color-on-solid); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.flow-node-subtitle { fill: var(--color-graphite-ink); font-size: 11px; opacity: 0.72; }
.flow-connector { stroke: var(--color-graphite-muted); stroke-width: 1.2; }
.flow-arrow-head { fill: var(--color-graphite-muted); }
.flow-stage {
  margin-top: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper);
}
.flow-stage .stage-num {
  display: grid;
  place-items: center;
  float: left;
  width: 24px;
  height: 24px;
  margin-right: var(--space-sm);
  border-radius: var(--radius-chip);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}
.flow-stage h2, .flow-footer h2 { margin: 0 0 var(--space-3xs); color: var(--color-ink); font-size: var(--text-md); font-weight: 600; }
.flow-stage .subtitle { margin: 0 0 var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.stage-content { min-width: 0; }
.flow-stage ul { display: grid; gap: var(--space-2xs); margin: var(--space-sm) 0; padding-left: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.7; }
.flow-stage li::marker { color: var(--color-accent); }
.flow-stage .output {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-accent);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
}
.flow-footer {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper);
}
.flow-footer .metrics { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: var(--space-sm) 0 0; font-size: var(--text-xs); }
.flow-footer .metrics dt, .flow-footer .metrics dd { margin: 0; padding: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.flow-footer .metrics dt { color: var(--color-muted); font-size: var(--text-xs); }
.flow-footer .metrics dd { color: var(--color-ink); }

/* ============ 14. 报告正文（Markdown） ============ */
.md { max-width: var(--measure-prose); color: var(--color-ink); line-height: 1.75; }
.md h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.md h3 { margin: var(--space-lg) 0 var(--space-xs); color: var(--color-ink); font-size: var(--text-md); font-weight: 600; }
.md p, .md li { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.9; overflow-wrap: break-word; }
.md p { margin-bottom: var(--space-md); }
.md ul, .md ol { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.md li { margin-bottom: var(--space-2xs); }
.md li::marker { color: var(--color-accent); }
.md .sub { color: var(--color-muted); font-size: var(--text-xs); }
.md a { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.md blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-lg);
  border-left: 2px solid var(--color-accent);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.md code {
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}
.md pre {
  margin-bottom: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-input);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  overflow: auto;
}
.md pre code {
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--text-xs);
  line-height: 1.7;
}
.md hr { margin: var(--space-lg) 0; border: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.md strong { color: var(--color-ink); }

/* ============ 15. Tabs ============ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.tabs a {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.tabs a:hover { color: var(--color-ink); }
.tabs a[aria-current="page"] { border-bottom-color: var(--color-accent); color: var(--color-accent-deep); font-weight: 600; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }

/* ============ 16. Toast / Dialog ============ */
.toast {
  position: fixed;
  right: var(--space-xl);
  bottom: var(--space-xl);
  z-index: 1000;
  max-width: 420px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-input);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast.error { background: var(--color-error); color: var(--color-on-solid); }
dialog[open] .toast {
  position: static;
  max-width: none;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  opacity: 1;
  transform: none;
  pointer-events: auto;
  box-shadow: none;
}

dialog {
  width: 100%;
  max-width: 540px;
  max-height: calc(100dvh - var(--space-3xl));
  margin: auto;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  color: var(--color-ink);
}
dialog::backdrop { background: var(--color-scrim); }
dialog form.dialog { padding: var(--space-xl); }
dialog form.dialog h2 { margin-bottom: var(--space-lg); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; }
dialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* ============ 17. 登录：Cobalt 的点阵页 ============ */
body.login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-lg);
  background-color: var(--color-paper);
  background-image: radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
  background-size: 16px 16px;
}
.login-container { width: 100%; max-width: 400px; }
.login-card {
  position: relative;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
}
.login-header { display: grid; justify-items: start; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.login-mark { width: 34px; height: 34px; }
.login-mark svg { width: 21px; height: 21px; }
.login-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
}
.login-subtitle { margin: 0; color: var(--color-muted); font-size: var(--text-xs); }
.login-card .form-group { margin-bottom: var(--space-md); }
.login-card input {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-field-edge);
  border-radius: var(--radius-input);
  background: var(--color-key-face);
  font-size: var(--text-md);
}
.login-card input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.btn-submit {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: var(--space-xs);
  border: var(--rule-hair) solid var(--color-accent-edge);
  border-radius: var(--radius-input);
  background: var(--color-accent);
  color: var(--color-on-solid);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  box-shadow: var(--shadow-key-accent);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
.btn-submit:hover:not(:disabled) { transform: translateY(-1px); background: var(--color-accent-deep); }
.btn-submit:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--shadow-key-press); }
.btn-submit:disabled { background: var(--color-paper-3); border-color: var(--color-rule-2); color: var(--color-muted); opacity: 1; cursor: not-allowed; box-shadow: none; }
.login-card .error {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-error-edge);
  border-left: 2px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-error-wash);
  color: var(--color-danger-ink);
  font-size: var(--text-xs);
}
.login-card .error.show { display: flex; }
.login-footnote { margin-top: var(--space-lg); color: var(--color-muted); font-family: var(--font-outlier); font-size: var(--text-legal); text-align: center; }

/* ============ 18. 入场：只一次，不编排 ============ */
.content > section { animation: rise var(--dur-short) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============ 19. 响应式 ============ */
@media (max-width: 76rem) {
  .content { padding: var(--space-xl) var(--space-xl) var(--space-3xl); }
  .topbar { padding: 0 var(--space-xl); }
  .board-page { grid-template-columns: minmax(0, 1fr) 272px; column-gap: var(--space-lg); }
  .ev-row, .ledger-head { grid-template-columns: 3px minmax(0, 1fr) 176px; }
  .ev-side, .ev-main { padding-left: var(--space-md); }
  .ev-side { padding-right: var(--space-md); }
}
/* 双栏回收：风险摘要回到队列上方，两列并排 */
@media (max-width: 64rem) {
  .board-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "rail"
      "filters"
      "queue";
  }
  .briefing {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
    padding-left: 0;
    border-left: 0;
    padding-bottom: var(--space-md);
    border-bottom: var(--rule-hair) solid var(--color-rule-2);
  }
  .sev-row { grid-template-columns: 8px auto minmax(0, 1fr) auto; }
}
@media (max-width: 56rem) {
  .event-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .review-panel { position: static; grid-row: 1; }
  .ev-row, .ledger-head { grid-template-columns: 3px minmax(0, 1fr) auto; }
  .ledger-head span:last-child { padding-left: var(--space-sm); }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  :root { --topbar-height: 52px; }
  .topbar { gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
  .topbar-context { display: none; }
  /* button.btn 的特异性高于单类，故用 .topbar-actions 前缀压过 */
  .topbar-actions .topbar-user,
  .topbar-actions .btn.topbar-pw { display: none; }
  .sidebar-account-actions { display: flex; }
  .content { padding: var(--space-lg) var(--space-md) calc(var(--space-3xl) + env(safe-area-inset-bottom)); overflow-x: clip; }
  .page-head { align-items: flex-start; margin-bottom: var(--space-lg); }
  .page-head h1 { font-size: var(--text-lg); }
  .page-head .muted { max-width: none; text-align: left; }
  /* 手机上队列优先：摘要让位到队列之后 */
  .board-page {
    grid-template-areas:
      "head"
      "filters"
      "queue"
      "rail";
  }
  .briefing {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    padding-bottom: 0;
    border-top: var(--rule-hair) solid var(--color-rule-2);
    border-bottom: 0;
  }
  /* 筛选收成一条横滑工具带，不再吃掉半屏 */
  .filters {
    flex-wrap: nowrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters select, .filters input[type="search"], .filters .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
  }
  .filters input[type="search"] { flex: 0 0 11rem; min-width: 11rem; }
  /* 台账行在手机上堆成两段：主体在上，锚点在下横排 */
  .ev-row, .ledger-head { grid-template-columns: 3px minmax(0, 1fr); }
  .ledger-head span:last-child { display: none; }
  .ev-side {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-items: start;
    gap: var(--space-xs);
    padding: 0 var(--space-md) var(--space-sm);
    border-left: 0;
  }
  .ev-when { justify-items: start; grid-auto-flow: column; align-items: baseline; gap: var(--space-xs); }
  .ev-actions { margin-top: 0; margin-left: auto; }
  /* 触控：主要控件不低于 40px；输入 16px 防 iOS 聚焦放大 */
  .btn { min-height: 40px; }
  .btn.small { min-height: 36px; }
  .ev-actions .btn.small { min-height: 34px; border-color: var(--color-key-edge); background: var(--color-key-face); box-shadow: var(--shadow-key); }
  .btn.page-button { min-height: 38px; }
  .review-panel .btn, .review-panel textarea { min-height: 38px; }
  .nav-item { min-height: 44px; font-size: var(--text-md); }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="url"], textarea, select { font-size: 16px; }
  .filters select, .filters input[type="search"] { min-height: 42px; font-size: 16px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; white-space: nowrap; padding: var(--space-md) var(--space-sm); }
  .ev-main { padding: var(--space-md) var(--space-md) var(--space-xs); }
  .ev-title { font-size: var(--text-md); }
  .page-range { display: none; }
  .event-hero { padding: var(--space-md); }
  .event-hero h1 { font-size: var(--text-lg); }
  .detail-section, .review-panel { padding: var(--space-md); }
  .source-card { padding: var(--space-md); }
  .flow-hint { display: block; }
  .flow-svg { min-width: 720px; min-height: 360px; }
  .status-report-grid { grid-template-columns: minmax(0, 1fr); }
  .status-reports { padding: var(--space-md); }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .login-card { padding: var(--space-lg); }
  .toast { left: var(--space-md); right: var(--space-md); bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); max-width: none; }
  dialog { max-width: none; max-height: calc(100dvh - var(--space-2xl) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  dialog form.dialog { padding: var(--space-lg); }
  dialog .actions .btn { flex: 1; min-height: 40px; }
}
/* 表格 → 堆叠行卡 */
@media (max-width: 40rem) {
  table.table { display: block; overflow: hidden; }
  table.table thead { display: none; }
  table.table tbody { display: block; }
  table.table tr { display: grid; gap: var(--space-3xs); padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
  table.table tr:last-child { border-bottom: 0; }
  table.table th[scope="row"] { padding: 0 0 var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md); font-weight: 600; }
  table.table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); align-items: baseline; padding: var(--space-2xs) 0; border-bottom: 0; background: transparent; }
  table.table td[data-label]::before { content: attr(data-label); color: var(--color-muted); font-size: var(--text-xs); }
  table.table td:not([data-label]) { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-top: var(--space-sm); }
  table.table td:empty { display: none; }
  table.table td .btn { min-height: 38px; }
}
@media (max-width: 35rem) {
  .sev-count, .sev-row.lv-red .sev-count { font-size: var(--text-xl); }
}
@media (max-width: 27.5rem) {
  .ev-reason { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .meta { grid-template-columns: 78px minmax(0, 1fr); }
  .page-head { flex-direction: column; }
  .page-head .muted { margin-left: 0; }
  .filters input[type="search"] { flex-basis: 100%; }
  .ev-actions { margin-left: 0; width: 100%; }
}