/* Close-Up 后台样式 —— Modern Ops Admin 基线（owner 2026-08-31 拍板 · Linear/Attio 风）
   Light-only（产品明确非目标：Dark Mode 不做，也不假装覆盖）。
   -----------------------------------------------------------------------------
   相对上一版（首版 Light 基线）的取向：中性 12 级灰 + 单一蓝强调 · 无梯度 · 卡片式表格
   （浅阴影 + 圆角）· 状态用「圆点 + 淡背景」表达。
   -----------------------------------------------------------------------------
   ⚠️ 类名一格不改（很多类是产品 AC 承重项的可见落点，模板注释里逐条点了 console-ui.yaml
       和 T-* AC key，改了 = 改判据面）—— 本文件只换视觉，不改结构。 */

:root {
  /* 新设计令牌 */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  --fg: #0a0a0b;
  --fg-muted: #52525b;
  --fg-subtle: #a1a1aa;
  --border: #e5e7eb;
  --border-strong: #d4d4d8;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-border: #dbeafe;

  --success: #059669;
  --success-soft: #ecfdf5;
  --success-border: #a7f3d0;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --warning-border: #fde68a;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --purple: #7c3aed;
  --purple-soft: #f5f3ff;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 12px 24px -8px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.04);

  /* 旧变量别名（模板里旧类名仍可能通过这些间接引用；保留避免任何回归） */
  --muted: var(--fg-muted);
  --line: var(--border);
  --added-bg: var(--success-soft);
  --added-fg: #065f46;
  --removed-bg: var(--danger-soft);
  --removed-fg: #991b1b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 14px/1.5 -apple-system, "Söhne", "Inter", "PingFang SC", "Hiragino Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 当前环境（owner 2026-09-02）：两环境背景色不同 + 顶部醒目横幅 ─────────────
   测试 = 中性冷色（淡蓝），生产 = 醒目暖色（红调）—— 让人一眼知道自己在动生产。 */
body.env-development { background: #f2f6fc; }
body.env-production { background: #fdf3f1; }

.env-banner {
  display: block;
  text-align: center;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
}
.env-banner-development {
  background: var(--accent-soft);
  color: #1e3a8a;
  border-bottom: 1px solid var(--accent-border);
}
/* 生产横幅比测试更扎眼：实色红底白字 */
.env-banner-production {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid #b91c1c;
}
.env-banner-production b { color: #fff; }
.env-banner-unselected {
  background: var(--warning-soft);
  color: #92400e;
  border-bottom: 1px solid var(--warning-border);
}

/* 顶栏账号区那条「切换环境」链接（回选择屏重选，不是内联切换器）—— 刻意低调 */
.env-switch-link { font-size: 12px; color: var(--fg-subtle); }
.env-switch-link:hover { color: var(--fg-muted); text-decoration: underline; }

/* 选择环境屏：两个大按钮。
   ⚠️ 选择器带 .login-card 前缀不是多余：它要压过后文 `.login-card button` 那条通用规则
   （同为 class 级、后者在文件靠后且多一层元素选择器）。 */
.select-environment-card { width: 460px; }
.env-choice-form { margin: 0 0 14px; }
.login-card button.env-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
}
.env-choice-note { font-size: 12px; font-weight: 400; opacity: 0.85; }
.login-card button.env-choice-development {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: #1e3a8a;
}
.login-card button.env-choice-development:hover { background: #e3edfd; border-color: var(--accent); }
.login-card button.env-choice-production {
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  color: #991b1b;
}
.login-card button.env-choice-production:hover { background: #fde5e3; border-color: var(--danger); }

/* ── 顶栏（.topbar / .brand / .topnav / .session-box） ─────────────────────── */
.topbar {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: var(--fg);
  padding: 0;
}
.brand::before {
  content: "C";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--fg);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 12px;
}

.topnav { display: flex; gap: 2px; align-items: center; flex: 1; }
.topnav a {
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.topnav a:hover { color: var(--fg); background: var(--surface-soft); text-decoration: none; }

.session-box { display: flex; align-items: center; gap: 12px; }
/* 🔴 2026-09-01（`close-up#1217`）：`.role-badge` / `.role-badge::before` 两条规则随顶导身份
   标签一并删除（它们只服务那一枚 span，见 base.html 那段注释）。 */
.session-email { color: var(--fg-muted); font-size: 13px; }
.inline-form { display: inline; margin: 0; }
.inline-form button {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
}
.inline-form button:hover { color: var(--fg); border-color: var(--border-strong); }

/* ── 页面主体 ────────────────────────────────────────────────────────────── */
main { padding: 24px 32px 64px; max-width: 1200px; margin: 0 auto; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── 表单原生元素基线 ─────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
textarea, select {
  font: inherit;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { line-height: 1.6; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 13px; }

button {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
}
button:hover { background: var(--surface-soft); }
button[type=submit], .btn-primary {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
}
button[type=submit]:hover, .btn-primary:hover { background: #1c1c1e; border-color: #1c1c1e; }
.linklike {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}

.screen-intro { color: var(--fg-muted); max-width: 720px; margin: 0 0 20px; }

/* Flash 与错误提示 */
.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  color: #065f46;
  font-size: 13px;
  margin: 0 0 16px;
}
.saved-hint {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #1e3a8a;
}
.error, .field-error, .moment-error {
  color: #991b1b;
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.empty, .empty-inline { color: var(--fg-muted); }
.hint { color: var(--fg-muted); font-size: 13px; }
.byline { color: var(--fg-muted); font-size: 13px; }
.crumbs { font-size: 12px; color: var(--fg-subtle); margin: 0 0 6px; }
.crumbs a { color: var(--fg-subtle); }
.crumbs a:hover { color: var(--fg-muted); }

/* ── 过滤器（.filters）：卡片化 ───────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.filters fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 12px 8px;
  margin: 0;
}
.filters fieldset legend { color: var(--fg-muted); font-size: 12px; font-weight: 500; padding: 0 4px; }
.filters > label { color: var(--fg-muted); font-size: 12px; font-weight: 500; }
.env-option {
  display: inline-block;
  margin-right: 12px;
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
}
.env-option-selected { color: var(--fg); font-weight: 600; }

/* ── 表格通用（.asset-table / .moment-table / .bundle-table / .variable-table）
   卡片式表格：外框圆角 + 浅阴影 + 首行灰底 + 悬停行淡蓝 */
.asset-table, .moment-table, .bundle-table, .variable-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.asset-table th, .moment-table th, .bundle-table th, .variable-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.asset-table td, .moment-table td, .bundle-table td, .variable-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 14px;
}
.asset-table tbody tr:last-child td,
.moment-table tbody tr:last-child td,
.bundle-table tbody tr:last-child td,
.variable-table tbody tr:last-child td { border-bottom: none; }
.asset-table tbody tr:hover, .moment-table tbody tr:hover,
.bundle-table tbody tr:hover, .variable-table tbody tr:hover { background: var(--surface-soft); }

.asset-table a, .moment-table a { color: var(--fg); font-weight: 500; }
.asset-table a:hover, .moment-table a:hover { color: var(--accent); }

/* 变量目录列表用更紧的行高 */
.variable-table th, .variable-table td { padding: 8px 12px; }
.variable-table td { vertical-align: top; }

/* ── 环境徽章：圆点 + 淡背景（内容资产 · 详情 · 发布包共用） ─────────────── */
.asset-meta, .asset-provenance, .bundle-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--fg-muted);
  font-size: 13px;
  margin: 4px 0 8px;
}
.env-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--fg);
  background: var(--surface);
  font-weight: 500;
  font-size: 12px;
}
.env-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fg-subtle);
}
.env-badge-development { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.env-badge-development::before { background: var(--accent); }
.env-badge-staging { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.env-badge-staging::before { background: var(--warning); }
.env-badge-production { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.env-badge-production::before { background: var(--success); }

.kind-badge, .slug, .version-badge, .locale-badge, .locale-code,
.audience-badge, .status-badge {
  font-size: 12px;
}
.locale-code, .slug {
  display: inline-block;
  padding: 2px 8px;
  background: #f4f4f5;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--fg-muted);
}
.version-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--fg);
  font-weight: 500;
}
.kind-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
}

/* provenance / test-receipt / status pills */
.provenance-badge, .test-receipt-badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 12px;
}
.status-badge-published { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.status-badge-paused, .status-badge-retired { background: #f3f3f5; color: var(--fg-muted); }
.provenance-badge-historical_benchmark {
  background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border);
}
.test-receipt-badge-passed { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.test-receipt-badge-failed { background: var(--danger-soft); color: #991b1b; border-color: var(--danger-border); }
.test-receipt-badge-never_run { background: #f3f3f5; color: var(--fg-muted); }
.audience-badge { background: var(--purple-soft); color: var(--purple); border-color: transparent; }

/* ── 内容资产详情：正文视图 / 三层 / 影响面 / 编辑表单 / 版本列表 ─────────── */
.production-status {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.prod-label { font-weight: 600; }
.prod-unpublished { color: var(--fg-muted); }
.prod-meta { color: var(--fg-muted); font-size: 13px; }

/* 正文视图 —— mono、稍紧、卡片包起来 */
.body-view {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
}

/* 编辑表单卡片化 */
form#content-asset-edit-form,
form#moment-form,
.moment-edit form,
.add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
form#content-asset-edit-form label,
.moment-edit label,
.add-form label { color: var(--fg-muted); font-size: 12px; font-weight: 500; margin-top: 4px; }
.add-form .checkbox-label { display: flex; gap: 8px; align-items: center; color: var(--fg); font-size: 14px; margin-top: 8px; }
.add-form button { align-self: flex-start; margin-top: 10px; }
.moment-edit .pair { display: flex; gap: 8px; }

/* 版本列表 → 时间线卡片 */
.version-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.version-item {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.version-list li.version-item:last-child { border-bottom: none; }
.version-no { font-weight: 600; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
.version-author, .version-time, .version-status, .version-note { color: var(--fg-muted); font-size: 13px; }
.version-rollback-trace {
  background: var(--purple-soft);
  color: var(--purple);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}
.rollback-form { display: flex; gap: 6px; align-items: center; }
.actor-inline { width: 120px; }

/* Diff 视图 */
.diff-view {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.diff-line { display: flex; gap: 8px; padding: 3px 12px; white-space: pre-wrap; }
.diff-added { background: var(--success-soft); color: #065f46; }
.diff-removed { background: var(--danger-soft); color: #991b1b; }
.diff-unchanged { color: var(--fg-muted); }
.diff-mark { width: 1em; flex: none; }
.diff-legend { display: flex; gap: 12px; }
.diff-legend .diff-line { border-radius: var(--radius-sm); }

/* ── 时刻与触发 —— 保留承重项含义（判据落点） ────────────────────────────── */
.moment-row td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }

/* 开关：模板里 `.switch-label` 里包着「开着」/「关着」的文字。
   视觉改造 —— 把 span 变成一个 34×20 的圆角滑块，文字用 :has() 挂在 .switch::before 上，
   不动 HTML 结构。 */
.switch {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}
.switch::before {
  content: "关着";
  color: var(--fg-subtle);
  font-size: 12px;
  font-weight: 500;
}
.switch:has(input[type=checkbox]:checked)::before {
  content: "开着";
  color: var(--success);
}
.switch input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch .switch-label {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.15s ease;
  font-size: 0;
  color: transparent;
  vertical-align: middle;
  overflow: hidden;
}
.switch .switch-label::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease;
}
.switch:has(input[type=checkbox]:checked) .switch-label { background: var(--success); }
.switch:has(input[type=checkbox]:checked) .switch-label::after { left: 16px; }

/* 应用按钮：给「没 JS 兜底」用的表单提交按钮，视觉上收窄不喧宾夺主 */
.switch-apply {
  font-size: 12px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}

/* 四条最近状态：四个各自独立的格子（刻意不合成一个总态 —— 那正是判据的反面形状）。 */
.moment-cells .cell { border-top: 1px solid var(--border); padding: 10px 0; }
.moment-cells h3 { margin: 0 0 4px; font-size: 14px; color: var(--fg-muted); }
.run-status-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.run-stage {
  flex: 1 1 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
}
.run-stage h3 { margin: 0 0 4px; font-size: 12px; color: var(--fg-subtle); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.run-stage-value { margin: 0; font-weight: 600; font-size: 14px; }
.run-stage-value .at { display: block; font-weight: 400; font-size: 12px; color: var(--fg-muted); margin-top: 2px; }

.unset { color: var(--fg-muted); font-style: italic; }

.moment-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0 8px;
}
.moment-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
  margin-top: 10px;
}
.moment-result h2 { margin-top: 8px; font-size: 15px; }
.moment-result-head { margin: 4px 0 8px; color: var(--fg-muted); font-size: 13px; }
.moment-variable-list { list-style: none; padding: 0; margin: 0; }
.moment-variable-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
.moment-variable-item:last-child { border-bottom: none; }

/* ── 变量目录 ──────────────────────────────────────────────────────────── */
.variable-group { margin: 22px 0; }
.variable-group-title { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
.variable-group-title code { color: var(--fg-muted); font-weight: 400; font-size: 13px; }
.sample-flag { border-radius: 999px; padding: 2px 10px; font-size: 12px; white-space: nowrap; font-weight: 500; }
.sample-synthetic { background: var(--purple-soft); color: var(--purple); }
.sample-real { background: var(--success-soft); color: var(--success); }

/* ── 发布包 ────────────────────────────────────────────────────────────── */
.created-by, .published-at, .source-bundle { font-size: 13px; color: var(--fg-muted); }

.pins-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.pin-item { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pin-item:last-child { border-bottom: none; }
.pin-kind { color: var(--fg-muted); font-size: 13px; min-width: 140px; }
.pin-version { margin-left: auto; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }

.compat-check-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
}
.compat-check-idle { color: var(--fg-muted); margin: 0; }
.compat-check-passed { color: var(--success); }
.compat-check-failed { color: #991b1b; font-weight: 600; }
.compat-check-list { list-style: none; padding: 0; margin: 8px 0 0; }
.compat-check-item { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.compat-check-item-ok { background: var(--success-soft); }
.compat-check-item-fail { background: var(--danger-soft); }
.compat-check-name { min-width: 200px; font-weight: 600; }
.compat-check-detail { color: var(--fg-muted); }

.bundle-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 12px 0; }
.action-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── 内容资产的三层 + 影响面（#228 · T-console-asset-layering-and-deps①） ──
   🔴 承重项：判的是「屏上分得出哪几段是哪一层」，判据原话「三段混排成一整块正文 = FAIL；
   分区、标注、折叠、配色都算数」。三层各自一个左边条颜色 —— 只用来区分「这是第几层」，
   不承载状态语义。 */
.asset-layers { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.asset-layer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
}
.asset-layer h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.asset-layer-shared-rule { border-left-color: var(--accent); }
.asset-layer-capability { border-left-color: var(--fg); }
.asset-layer-variables { border-left-color: var(--warning); }
.layer-hint { color: var(--fg-muted); font-size: 13px; margin: 0 0 10px; }
.asset-layer .body-view { margin: 0; }
.shared-rule-list, .used-variable-list, .dependents-list { list-style: none; padding: 0; margin: 0; }
.shared-rule-item, .used-variable-item, .dependents-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  flex-wrap: wrap;
}
.shared-rule-ref, .used-variable-what {
  color: var(--fg-muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  background: #f4f4f5;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
}

/* 影响面：与编辑表单同屏、排在它之前。⚠️ 只呈现不拦截 —— 这里刻意不用警告色，
   染成红的会读成「系统在阻止你」，而这一档判的是看得到，不判拦不拦。 */
.dependents-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 20px 0;
  box-shadow: var(--shadow-card);
}
.dependents-view h2 { margin-top: 0; }
.dependents-block { border-top: 1px solid var(--border); padding: 10px 0; }
.dependents-block h3 { margin: 0 0 6px; font-size: 13px; color: var(--fg-muted); font-weight: 500; }

/* ── 登录（.login-page / .login-card） ───────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  background-image: radial-gradient(ellipse 800px 500px at 50% 40%, rgba(37, 99, 235, 0.03), transparent);
  margin: 0;
}
.login-card {
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 36px 36px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
}
.login-card h1 {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.login-card h1::before {
  content: "C";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--fg);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
}
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { font-size: 12px; font-weight: 500; color: var(--fg-muted); }
.login-card input {
  padding: 10px 12px;
  border-radius: var(--radius-md);
}
.login-card button {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--fg);
  border: 1px solid var(--fg);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 500;
}
.login-card button:hover { background: #1c1c1e; }
.login-card .error {
  margin-top: 16px;
  font-size: 13px;
}
/* 谷歌登录 = 主入口（owner 2026-09-02：放最显眼位置）；密码表单降为次要入口 */
.google-login-button {
  display: block;
  padding: 12px;
  background: var(--fg);
  border: 1px solid var(--fg);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}
.google-login-button:hover { background: #1c1c1e; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--fg-muted);
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}
/* 有谷歌入口时，密码提交键从主色降为描边次要键（无谷歌入口时它仍是唯一主键，样式不变） */
.google-login-button ~ form button {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
}
.google-login-button ~ form button:hover { background: var(--bg); }

/* ── 使用手册（/admin/manual，owner 2026-09-02）——选择器全部收窄在 .manual-* 下，不外溢 ── */
.manual-link { font-size: 12px; color: var(--fg-subtle); }
.manual-link:hover { color: var(--fg-muted); text-decoration: underline; }
.manual-body { max-width: 780px; line-height: 1.8; }
.manual-body .manual-sub { color: var(--fg-muted); font-size: 13px; margin: 0 0 24px; }
.manual-body h2 { margin: 36px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.manual-body h3 { margin: 18px 0 6px; }
.manual-body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.manual-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
  margin: 10px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.manual-note {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
}
.manual-tablewrap { overflow-x: auto; margin: 12px 0; }
.manual-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-size: 13px;
}
.manual-table th {
  text-align: left;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.manual-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.manual-table tbody tr:last-child td { border-bottom: none; }