/* ==========================================================================
   DJB 联脑 · 控制台外壳（.cs-*）
   --------------------------------------------------------------------------
   设计源：design/prototypes/product-suite-v1/app/index.html
          （桌面上的应用窗口：titlebar + 双角色侧栏 + 深色 hero 卡 + KPI + 柱图 + 表格 + 状态栏）
   颜色口径：design/15-DJB-Aurora-Signal-配色修订-v1.md §1.1
   动效口径：ops/uta/DESIGN-DUAL-THEME-2026-11-01.md §4（M5/M8/M9/M13）
   规格：reports/DESIGN-FIDELITY-2026-11-03/00-SPEC.md

   约束
   - 只加不改：所有选择器以 .console-layout 为根，不重定义 portal.css / pages.css 的通用类。
   - 无 JavaScript、无 inline style：柱高用 data-h 属性选择器，进度环用 conic-gradient。
   - 双主题：浅色（默认日间工作台）与夜色（[data-theme="night"]）结构完全一致，只换明度与光晕。
   ========================================================================== */

/* 1. 窗口 ---------------------------------------------------------------- */
.console-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  max-width: 1320px;
  margin: 18px auto 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 64px rgba(24, 12, 48, .14);
  overflow: hidden;
}
html:root[data-theme="night"] .console-layout,
html:root:not([data-theme]):not([data-surface="public"]) .console-layout {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 64px rgba(0, 0, 0, .5);
}

/* 2. 侧栏 ---------------------------------------------------------------- */
.console-layout > .subnav {
  position: sticky;
  top: 0;
  align-self: start;
  width: auto;
  min-width: 0;
  padding: 0;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.console-layout > .subnav > .eyebrow,
.console-layout > .subnav > h2 {
  padding-inline: 14px;
}
.console-layout > .subnav > .eyebrow {
  padding-top: 14px;
  font-family: var(--mono, ui-monospace);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.console-layout > .subnav > h2 {
  font-size: 15px;
  letter-spacing: -.02em;
  margin: 2px 0 10px;
  color: var(--ink);
}

/* 双角色切换：两张卡，各自带状态点与一行说明 */
.console-layout .workspace-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 10px 10px;
  padding: 0;
  border: 0;
  background: none;
}
.console-layout .workspace-switch a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.console-layout .workspace-switch .role-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-3);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.console-layout .workspace-switch b { font-size: 12px; font-weight: 600; line-height: 1.2; }
.console-layout .workspace-switch small {
  font-family: var(--mono, ui-monospace);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}
.console-layout .workspace-switch a:hover {
  border-color: var(--violet);
  color: var(--ink);
}
/* 当前角色：按侧栏里哪一组菜单项处于 aria-current 推断，模板不必多传变量 */
.console-layout:has(.workspace-menu a[href^="/console/node/"][aria-current="page"]) .workspace-switch a[href^="/console/node/"],
.console-layout:has(.workspace-menu a[href^="/billing/"][aria-current="page"]) .workspace-switch a[href="/console/overview"],
.console-layout:has(.workspace-menu a[aria-current="page"]:not([href^="/console/node/"])) .workspace-switch a[href="/console/overview"] {
  border-color: var(--mint);
  background: var(--mint-3);
  color: var(--mint-text);
}
.console-layout:has(.workspace-menu a[href^="/console/node/"][aria-current="page"]) .workspace-switch a[href^="/console/node/"] .role-dot,
.console-layout:has(.workspace-menu a[href^="/billing/"][aria-current="page"]) .workspace-switch a[href="/console/overview"] .role-dot,
.console-layout:has(.workspace-menu a[aria-current="page"]:not([href^="/console/node/"])) .workspace-switch a[href="/console/overview"] .role-dot {
  background: var(--mint);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint) 18%, transparent);
  animation: djb-pulse 2s ease-in-out infinite;
}

/* 导航 */
.console-layout .workspace-menu {
  list-style: none;
  margin: 0;
  padding: 4px 8px 10px;
  display: grid;
  gap: 1px;
  overflow: visible;
}
.console-layout .workspace-menu li { margin: 0; }
.console-layout .workspace-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 12.5px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.console-layout .workspace-menu a:hover {
  background: var(--violet-3);
  color: var(--ink);
}
.console-layout .workspace-menu a[aria-current="page"] {
  background: var(--mint-3);
  color: var(--mint-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--mint);
}
.console-layout .workspace-menu .nav-group {
  padding: 12px 9px 5px;
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.console-layout .subnav-support {
  margin: 6px 10px 12px;
  padding: 8px 10px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}
.console-layout .subnav-support summary { cursor: pointer; color: var(--ink-2); }
.console-layout .subnav-support a {
  display: block;
  padding: 4px 0;
  color: var(--mint-text);
  text-decoration: none;
}
.console-layout .subnav-support a:hover { text-decoration: underline; }

/* 3. 内容区 -------------------------------------------------------------- */
.console-layout > .console-content {
  padding: 18px clamp(16px, 2.4vw, 26px) 22px;
  min-width: 0;
}
.console-layout > .console-content > .eyebrow {
  font-family: var(--mono, ui-monospace);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet-text);
}
.console-layout > .console-content > h1 {
  font-size: 26px;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 3px 0 6px;
  color: var(--ink);
}
.console-layout > .console-content > .lead {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 78ch;
}

/* 4. Hero 卡（设计样 .hero：深色渐变 + 指标 + 状态清单） ------------------ */
.cs-hero {
  position: relative;
  margin: 14px 0 16px;
  padding: 22px clamp(18px, 2.6vw, 28px);
  border-radius: 14px;
  overflow: hidden;
  color: #f3fffa;
  background:
    radial-gradient(760px 300px at 88% -30%, rgba(185, 162, 255, .42), transparent 70%),
    radial-gradient(560px 260px at 6% 120%, rgba(244, 166, 215, .22), transparent 72%),
    linear-gradient(135deg, #10453a 0%, #1c6350 46%, #2f7d66 100%);
  box-shadow: 0 14px 38px rgba(16, 69, 58, .28);
  isolation: isolate;
}
html:root[data-theme="night"] .cs-hero {
  background:
    radial-gradient(760px 300px at 88% -30%, rgba(185, 162, 255, .38), transparent 70%),
    radial-gradient(560px 260px at 6% 120%, rgba(244, 166, 215, .18), transparent 72%),
    linear-gradient(135deg, #0d1f2a 0%, #163a44 48%, #1f5b52 100%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
}
/* 网格纹理 + 慢速扫光（M3/M11） */
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(110% 90% at 20% 0%, #000 25%, transparent 85%);
  pointer-events: none;
}
.cs-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.cs-hero-kicker {
  font-family: var(--mono, ui-monospace);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243, 255, 250, .62);
}
.cs-hero h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.14;
  letter-spacing: -.035em;
  margin: 6px 0 8px;
  color: #fff;
}
.cs-hero h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #b4ead6, #f4a6d7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-hero p.cs-hero-lead {
  font-size: 13px;
  line-height: 1.72;
  max-width: 62ch;
  color: rgba(243, 255, 250, .78);
}
.cs-hero .cs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.cs-hero .cs-hero-actions .btn {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #f3fffa;
  font-size: 12.5px;
  min-height: 34px;
  padding: 0 13px;
  backdrop-filter: blur(6px);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cs-hero .cs-hero-actions .btn:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
  transform: translateY(-1px);
}
.cs-hero .cs-hero-actions .btn-primary {
  background: #b4ead6;
  border-color: #b4ead6;
  color: #08322a;
}
.cs-hero .cs-hero-actions .btn-primary:hover { background: #c9f5e5; border-color: #c9f5e5; }

/* Hero 右侧：状态清单（用真实 checklist 状态，不编造数值） */
.cs-hero-side {
  flex: 0 1 300px;
  min-width: 240px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(4px);
}
.cs-hero-side h3 {
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 255, 250, .6);
  margin-bottom: 8px;
}
.cs-hero-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cs-hero-side li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(243, 255, 250, .86);
}
.cs-hero-side li b {
  font-family: var(--mono, ui-monospace);
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.cs-hero-side .cs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  flex: 0 0 auto;
}
.cs-hero-side .cs-dot.ok { background: #8fd9be; box-shadow: 0 0 0 3px rgba(143, 217, 190, .22); animation: djb-pulse 2s ease-in-out infinite; }
.cs-hero-side .cs-dot.wait { background: #f0c56b; }
.cs-hero-side .cs-dot.todo { background: rgba(255, 255, 255, .35); }

/* Hero 底部指标条 */
.cs-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.cs-hero-metrics div { min-width: 88px; }
.cs-hero-metrics span {
  display: block;
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243, 255, 250, .58);
}
.cs-hero-metrics b {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  letter-spacing: -.02em;
  color: #fff;
}
.cs-hero-metrics b small {
  font-size: 10px;
  letter-spacing: 0;
  color: rgba(243, 255, 250, .6);
  font-weight: 400;
  margin-left: 3px;
}

/* 5. KPI 卡 -------------------------------------------------------------- */
.console-layout .metric-grid { gap: 10px; }
.console-layout .metric-grid > .card {
  position: relative;
  min-height: 0;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.console-layout .metric-grid > .card:hover {
  border-color: var(--violet);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px var(--glow-2);
}
.console-layout .metric-grid .stat-label,
.console-layout .metric-grid .cs-kpi-label {
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.console-layout .metric-grid .stat {
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}
.console-layout .metric-grid .meta { font-size: 11.5px; line-height: 1.6; color: var(--muted); margin-top: 5px; }

/* 6. 任务 dock（设计样 role-banner / 入口条） ----------------------------- */
.console-layout .task-dock { gap: 10px; margin: 14px 0 18px; }
.console-layout .task-dock a {
  position: relative;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.console-layout .task-dock a:hover {
  border-color: var(--violet);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px var(--glow-2);
}
.console-layout .task-dock a > span {
  font-family: var(--mono, ui-monospace);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--pink-text);
}
.console-layout .task-dock a > strong { font-size: 13.5px; color: var(--ink); }
.console-layout .task-dock a > small { font-size: 11.5px; color: var(--muted); }

/* 7. 区块标题（设计样 .panel-head） -------------------------------------- */
.console-layout .section-heading {
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin: 18px 0 10px;
}
.console-layout .section-heading h2 {
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.console-layout .section-heading .meta {
  font-family: var(--mono, ui-monospace);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
}

/* 8. 柱状图（设计样 .chart：细柱 + 玉绿渐变 + 圆角顶） ------------------- */
.console-layout .chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 132px;
  padding: 10px 2px 0;
  border-bottom: 1px solid var(--line);
}
.console-layout .chart-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 5px;
}
.console-layout .chart-bar {
  width: 100%;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--mint-2), color-mix(in oklab, var(--mint) 55%, var(--violet)));
  transition: filter 160ms ease;
}
.console-layout .chart-col:hover .chart-bar { filter: brightness(1.12) saturate(1.1); }
.console-layout .chart-bar.state-unknown {
  background: repeating-linear-gradient(135deg, var(--line-2) 0 4px, transparent 4px 8px);
}
.console-layout .chart-x {
  font-family: var(--mono, ui-monospace);
  font-size: 9px;
  letter-spacing: .02em;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 9. 表格（设计样 .task-table） ------------------------------------------ */
.console-layout .table-scroll { border: 1px solid var(--line); border-radius: 9px; overflow-x: auto; }
.console-layout table { font-size: 12.5px; }
.console-layout thead th {
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.console-layout tbody tr { transition: background-color 150ms ease; }
.console-layout tbody tr:hover { background: var(--violet-3); }
.console-layout td.num, .console-layout th.num { font-family: var(--mono, ui-monospace); }

/* 10. 状态栏（设计样窗口底部细条） --------------------------------------- */
.console-layout > .cs-statusbar { grid-column: 1 / -1; }
.cs-statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--muted);
}
.cs-statusbar > span { display: inline-flex; align-items: center; gap: 5px; }
.cs-statusbar .cs-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  animation: djb-pulse 2s ease-in-out infinite;
}
.cs-statusbar .cs-dot.warn { background: var(--amber); animation: none; }
.cs-statusbar .cs-spacer { margin-left: auto; }

/* 11. 响应式 ------------------------------------------------------------- */
@media (max-width: 1040px) {
  .console-layout { grid-template-columns: 1fr; margin: 12px 10px 18px; border-radius: 12px; }
  .console-layout > .subnav {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .console-layout .workspace-menu {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .console-layout .workspace-menu .nav-group { display: none; }
  .console-layout .workspace-menu a { white-space: nowrap; }
  .cs-hero-side { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .console-layout > .console-content { padding: 14px 12px 18px; }
  .console-layout > .console-content > h1 { font-size: 21px; }
  .console-layout .metric-grid { grid-template-columns: 1fr 1fr; }
  .console-layout .chart { height: 104px; }
  .console-layout .chart-x { font-size: 8px; }
  .cs-hero { padding: 16px 14px; border-radius: 12px; }
  .cs-hero-metrics { gap: 16px; }
}

/* 12. 尊重系统偏好 ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .console-layout .workspace-switch .role-dot,
  .cs-hero-side .cs-dot.ok,
  .cs-statusbar .cs-dot { animation: none; }
  .console-layout .metric-grid > .card:hover,
  .console-layout .task-dock a:hover { transform: none; }
  .cs-hero .cs-hero-actions .btn:hover { transform: none; }
}

/* ==========================================================================
   13. 页内通用件（阶段 2b）：面板 / 表单 / 提示条 / 台阶 / 折叠
   设计语言同 app 母版：白面板 + 1px 线 + 10px 圆角 + 灰底表头。
   全部限定在 .console-layout 内，公共站不受影响。
   ========================================================================== */

/* 面板 */
.console-layout .card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 15px;
}
.console-layout .card > .card-head,
.console-layout .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.console-layout .card-head h2 { font-size: 14px; letter-spacing: -.015em; color: var(--ink); }
.console-layout .card-head .meta { font-size: 11.5px; color: var(--muted); }

/* 分区标题（比 card-head 轻一档） */
.console-layout .section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.console-layout .section-heading h2,
.console-layout .section-heading h3 { font-size: 14px; letter-spacing: -.015em; color: var(--ink); }
.console-layout .section-heading .meta { font-size: 11.5px; color: var(--muted); }
.console-layout .section-heading.compact { margin-top: 14px; }

/* 表单：字段自动铺开，按钮沉底对齐 */
.console-layout .inline-form,
.console-layout form.card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 10px 12px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.console-layout .inline-form .field,
.console-layout form.card .field { margin: 0; display: grid; gap: 5px; }
.console-layout .inline-form .field > label,
.console-layout form.card .field > label {
  font-family: var(--mono, ui-monospace);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.console-layout .inline-form button[type="submit"],
.console-layout .inline-form .button { min-height: 36px; }
.console-layout .inline-form .field .hint {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
}
.console-layout .inline-form > .hint { grid-column: 1 / -1; }

/* 输入控件：统一高度 + 焦点环 */
.console-layout input[type="text"],
.console-layout input[type="email"],
.console-layout input[type="password"],
.console-layout input[type="date"],
.console-layout input[type="number"],
.console-layout select,
.console-layout textarea {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  padding: 0 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.console-layout textarea { padding: 8px 10px; min-height: 84px; }
.console-layout input:focus-visible,
.console-layout select:focus-visible,
.console-layout textarea:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet) 22%, transparent);
}
.console-layout button[type="submit"],
.console-layout .button {
  border-radius: 8px;
  font-size: 12.5px;
  min-height: 36px;
  padding: 0 14px;
}
.console-layout .button-secondary { border-color: var(--line-2); }
/* 竖排表单（非筛选器）：限宽，避免 1440 下一行拉到 800px 读不动 */
.console-layout form:not(.inline-form):not(.card) .field,
.console-layout .card form .field { max-width: 560px; }
.console-layout form:not(.inline-form) > button[type="submit"],
.console-layout form:not(.inline-form) > .button {
  margin-top: 4px;
  justify-self: start;
  min-width: 140px;
  max-width: 260px;
}

/* 提示条：左侧色条 + 圆角，比裸 banner 更贴面板 */
.console-layout .banner {
  border-radius: 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.65;
}
.console-layout .banner-ok { border-left-color: var(--mint); background: var(--mint-3); }
.console-layout .banner-warn { border-left-color: var(--amber); }
.console-layout .banner-danger { border-left-color: var(--coral); }
.console-layout .banner-info { border-left-color: var(--violet); }

/* 台阶（三步检查）：编号 + 状态，横向等宽 */
.console-layout .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.console-layout .steps > li {
  position: relative;
  padding: 12px 13px 12px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  transition: border-color 160ms ease, transform 160ms ease;
}
.console-layout .steps > li:hover { border-color: var(--violet); transform: translateY(-1px); }
.console-layout .steps > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--line-2);
}
.console-layout .steps > li.done::before,
.console-layout .steps > li[data-state="done"]::before { background: var(--mint); }
.console-layout .steps > li.todo::before { background: var(--amber); }
.console-layout .steps > li p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.6; }
.console-layout .steps > li p strong { font-size: 13px; color: var(--ink); }
.console-layout .steps > li p.meta { font-size: 11.5px; color: var(--muted); }
.console-layout .steps > li a { font-size: 12px; color: var(--mint-text); }

/* 折叠块 */
.console-layout .console-content details.evidence,
.console-layout .console-content details.inline-drawer {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  overflow: hidden;
}
.console-layout .console-content details > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--ink-2);
  list-style: none;
}
.console-layout .console-content details > summary::-webkit-details-marker { display: none; }
.console-layout .console-content details > summary::after {
  content: "＋";
  float: right;
  font-family: var(--mono, ui-monospace);
  color: var(--muted);
}
.console-layout .console-content details[open] > summary::after { content: "－"; }
.console-layout .console-content details > summary:hover { background: var(--violet-3); }
.console-layout .console-content details > *:not(summary) { padding-inline: 12px; }

/* 代码块 */
.console-layout pre,
.console-layout .code-block {
  border-radius: 9px;
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
  padding: 11px 13px;
  overflow-x: auto;
}

/* 表格斑马纹与行高（仅控制台） */
.console-layout tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-2) 55%, transparent); }
.console-layout tbody tr:nth-child(even):hover { background: var(--violet-3); }

/* 数字列右对齐视觉 */
.console-layout .num { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .console-layout .inline-form,
  .console-layout form.card { grid-template-columns: 1fr; }
}

/* 14. 控制台页的页脚收敛 -----------------------------------------------
   设计样 app 母版是「桌面上的应用窗口」，没有营销页脚；生产模板沿用公共
   footer，这里在控制台页把它压成一条链路线，避免窗口下方突然出现大块品牌区。 */
body:has(.console-layout) .site-footer {
  margin-top: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
body:has(.console-layout) .site-footer .footer-brand { display: none; }
body:has(.console-layout) .footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
}
body:has(.console-layout) .footer-col { display: flex; align-items: baseline; gap: 8px; }
body:has(.console-layout) .footer-col-title {
  font-family: var(--mono, ui-monospace);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
body:has(.console-layout) .footer-col ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
body:has(.console-layout) .footer-col a { font-size: 11.5px; color: var(--ink-2); }

/* 一次性绑定码：明文只显示这一次，等宽大字号便于抄写 */
.binding-code-value{margin:6px 0;font-family:var(--mono);font-size:15px;letter-spacing:.06em;word-break:break-all}
.binding-code-value code{padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.18)}

/* ── UX-20261106 热修复：控制台宽表「操作」列钉右侧 ───────────────────
   1440 下 .table-scroll cw=944 / sw=1052，吊销 Key / 改限额被滚出视野且无提示。
   sticky 让操作列始终可见，左边加一道渐变阴影提示"左侧还有内容"。 */
.console-layout .table-scroll th:last-child,
.console-layout .table-scroll td:last-child {
  position: sticky;
  right: 0;
  background: var(--surface);
  box-shadow: -12px 0 12px -10px rgba(0, 0, 0, .55);
}
body.portal[data-theme="day"] .console-layout .table-scroll th:last-child,
body.portal[data-theme="day"] .console-layout .table-scroll td:last-child {
  background: #ffffff;
  box-shadow: -12px 0 12px -10px rgba(31, 22, 56, .18);
}