/* ════════════════════════════════════════════════════════════════
   JMOS 界面稿 · 共享组件样式（只使用 tokens.css 变量，不写 hex）
   新增的扩展令牌集中在本文件最上方，便于回收进规范
   ════════════════════════════════════════════════════════════════ */
:root, [data-theme] {
  /* 扩展令牌（规范 v0.1 中没有，见《设计说明》第 5 节）*/
  --jmx-sec-bar-w: 24px;          /* 区块标题分隔线左侧品牌短条宽度 */
  --jmx-sec-title: var(--jm-fs-18);
  --jmx-kv-key: var(--jm-fs-12);
  --jmx-kv-val: var(--jm-fs-14);
  --jmx-viewer-bg: var(--jm-bg-sunken); /* 3D 视窗底色 */
  /* 主题同步（见《设计说明》「主题同步」）：所有界面、看板、孪生、3D、图表随全局主题一起切换，统一 450ms */
  --jmx-theme-dur: 450ms;
  --jmx-theme-ease: cubic-bezier(.4, 0, .2, 1);
}
[data-density='display'] { --jmx-sec-title: var(--jm-fs-24); --jmx-kv-val: var(--jm-fs-16); }
/* ==JMX-THEME-TOKENS:BEGIN==
   随主题变化的扩展令牌（浅色 / 深色各一组值）。页面里不再各自写 hex，统一在这里取。
   这一段会被 _build/sync_mvp.py 原样注入 MVP 页面用的 assets/mvp.css（MVP 页面不引 base.css），保证只有这一个来源 */
:root, [data-theme='light'] {
  /* 插画（等轴示意插画；不用品牌色，状态点用状态 solid） */
  --jmx-ill-top: #ffffff; --jmx-ill-left: #e8ebf0; --jmx-ill-right: #d3d8e0; --jmx-ill-line: #8d96a5; --jmx-ill-ground: #eceef2;
  --jmx-ill-screen: #d9eaff; --jmx-ill-accent: var(--jm-text-3); --jmx-ill-bad: var(--jm-bad-solid); --jmx-ill-idle: var(--jm-idle-solid); --jmx-ill-info: var(--jm-info-solid);
  /* 07 工作台舞台：墙面渐变、窗口描边与投影、顶栏底、遮罩、托盘底 */
  --jmx-wall-a: #ffffff; --jmx-wall-b: #eef0f4; --jmx-wall-c: #e6e9ef;
  --jmx-win-bd: rgba(16,24,40,.10); --jmx-win-sh: rgba(16,24,40,.16); --jmx-win-sh2: rgba(16,24,40,.06);
  --jmx-tb-bg: rgba(255,255,255,.72); --jmx-stage-scrim: rgba(230,233,239,.62); --jmx-plate: #f4f5f8;
  --jmx-lift-sh: rgba(16,24,40,.10);   /* 05 当前卡下方的落地投影 */
  /* MVP：骨架屏、弹层遮罩 */
  --jmx-skel-a: var(--jm-bg-sunken); --jmx-skel-b: var(--jm-bg-hover); --jmx-scrim: rgba(16,24,40,.32);
  /* 3D 场景（孪生）：材质颜色、地面、灯光颜色。粗糙度、金属度、透明度、强度等数值参数留在场景代码里 */
  --jmx-3d-housing: #c4cad3; --jmx-3d-housing-dark: #596272; --jmx-3d-graphite: #2b3139; --jmx-3d-alu: #7d8796; --jmx-3d-steel: #55606f;
  --jmx-3d-belt: #30353d; --jmx-3d-glass: #8fb0d6; --jmx-3d-glass-tint: #46566c; --jmx-3d-screen: #1b2f45; --jmx-3d-screen-glow: #0f1c2b;
  --jmx-3d-uv-window: #4f6fa8; --jmx-3d-cell: #9ba5b3; --jmx-3d-cell-top: #c3c9d2; --jmx-3d-terminal: #aab0b8; --jmx-3d-tray: #475263;
  --jmx-3d-rubber: #1f2329; --jmx-3d-cable: #3a414c; --jmx-3d-brand: var(--jm-brand);
  --jmx-3d-floor: #e9ecf0; --jmx-3d-floor-mark: #c3c9d2; --jmx-3d-zone: #dde1e7; --jmx-3d-lamp-off: #a1a9b5; --jmx-3d-grid: #cfd5dd; --jmx-3d-edge: #2f3640;
  --jmx-3d-select: var(--jm-brand-text); --jmx-3d-hover: #3d5a80;
  --jmx-3d-sky: #ffffff; --jmx-3d-ground: #c4cad3; --jmx-3d-sun: #ffffff; --jmx-3d-rim: #ffffff;
}
[data-theme='dark'] {
  --jmx-ill-top: #3a4250; --jmx-ill-left: #2a303c; --jmx-ill-right: #20252e; --jmx-ill-line: #6a7384; --jmx-ill-ground: #1b2029;
  --jmx-ill-screen: #19487f; --jmx-ill-accent: var(--jm-text-3); --jmx-ill-bad: var(--jm-bad-solid); --jmx-ill-idle: var(--jm-idle-solid); --jmx-ill-info: var(--jm-info-solid);
  --jmx-wall-a: #1a1f29; --jmx-wall-b: #10141b; --jmx-wall-c: #0b0e13;
  --jmx-win-bd: rgba(255,255,255,.10); --jmx-win-sh: rgba(0,0,0,.55); --jmx-win-sh2: rgba(0,0,0,.35);
  --jmx-tb-bg: rgba(22,26,34,.78); --jmx-stage-scrim: rgba(8,10,14,.62); --jmx-plate: #1a1f28;
  --jmx-lift-sh: rgba(0,0,0,.45);
  --jmx-skel-a: #1b2029; --jmx-skel-b: #262c38; --jmx-scrim: rgba(0,0,0,.5);
  --jmx-3d-housing: #b4bcc8; --jmx-3d-housing-dark: #454d5c; --jmx-3d-graphite: #23282f; --jmx-3d-alu: #9aa3b1; --jmx-3d-steel: #6c7484;
  --jmx-3d-belt: #1a1d23; --jmx-3d-glass: #a9c6e6; --jmx-3d-glass-tint: #3a4a5e; --jmx-3d-screen: #1b2f45; --jmx-3d-screen-glow: #1d3956;
  --jmx-3d-uv-window: #4f6fa8; --jmx-3d-cell: #a7b0bd; --jmx-3d-cell-top: #d2d7df; --jmx-3d-terminal: #c9ccd1; --jmx-3d-tray: #2e3746;
  --jmx-3d-rubber: #121418; --jmx-3d-cable: #2b313b; --jmx-3d-brand: var(--jm-brand);
  --jmx-3d-floor: #0c0f14; --jmx-3d-floor-mark: #2f3643; --jmx-3d-zone: #141820; --jmx-3d-lamp-off: #3a4150; --jmx-3d-grid: #2a313d; --jmx-3d-edge: #2f3640;
  --jmx-3d-select: var(--jm-brand); --jmx-3d-hover: #24344a;
  --jmx-3d-sky: #dfe6f2; --jmx-3d-ground: #1a1e26; --jmx-3d-sun: #fff6ec; --jmx-3d-rim: #9db8e8;
}
/* ==JMX-THEME-TOKENS:END== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1920px; height: 1080px; overflow: hidden; }
/* 无级自适应（设计规范 §12）：页面在 <html data-display="auto"> 上启用后不再锁 1920×1080，随视口铺满；1920 以上由 --jm-display-zoom 整页放大（tokens.css）。
   未启用的页面保持原来的固定画布（被 07 舞台按 1920×1080 缩放显示）。 */
html[data-display='auto'], html[data-display='auto'] > body { width: 100%; height: 100%; }
body { font-family: var(--jm-font-sans); font-size: var(--jm-font-size-body); line-height: var(--jm-lh-normal);
  color: var(--jm-text-1); background: var(--jm-bg-canvas); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.num, .jm-num { font-family: var(--jm-font-num); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.mono { font-family: var(--jm-font-mono); font-size: 12px; color: var(--jm-text-2); }
.t1 { color: var(--jm-text-1); } .t2 { color: var(--jm-text-2); } .t3 { color: var(--jm-text-3); }
.unit { font-family: var(--jm-font-sans); color: var(--jm-text-2); font-weight: 400; }
.ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.ic.s14 { width: 14px; height: 14px; } .ic.s18 { width: 18px; height: 18px; } .ic.s20 { width: 20px; height: 20px; }
.ic.s24 { width: 24px; height: 24px; } .ic.s12 { width: 12px; height: 12px; }
.row { display: flex; align-items: center; }
.gap4 { gap: 4px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.grow { flex: 1; min-width: 0; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 区块标题：中文语境行 + 标题 + 通栏分隔线（左端 2px 品牌短条）── */
.sec-head { position: relative; padding-bottom: 12px; margin-bottom: 16px; }
.sec-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--jm-border); }
.sec-head::before { content: ''; position: absolute; left: 0; bottom: 0; width: var(--jmx-sec-bar-w); height: 2px; background: var(--jm-brand); z-index: 1; }
.sec-head .ctx { font-size: 12px; line-height: 16px; color: var(--jm-text-3); margin-bottom: 4px; }
.sec-head .ttl { font-size: var(--jmx-sec-title); font-weight: 600; line-height: 1.3; color: var(--jm-text-1); }
.sec-head .side { position: absolute; right: 0; bottom: 12px; display: flex; white-space: nowrap; align-items: center; gap: 12px; font-size: 12px; color: var(--jm-text-3); }
[data-density='display'] .sec-head .ctx { font-size: 14px; line-height: 20px; }
[data-density='display'] .sec-head .side { font-size: 14px; }

/* ── 卡片 ── */
.card { background: var(--jm-bg-surface); border: 1px solid var(--jm-border); border-radius: var(--jm-radius-card); box-shadow: var(--jm-shadow-1); padding: var(--jm-card-pad); }

/* ── 状态胶囊：图标 + 文字 + 淡底 + 描边 ── */
.st { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--jm-radius-full);
  font-size: 12px; font-weight: 500; line-height: 1; border: 1px solid; white-space: nowrap; }
.st .ic { width: 14px; height: 14px; }
.st.ok { color: var(--jm-ok-fg); background: var(--jm-ok-bg); border-color: var(--jm-ok-border); }
.st.warn { color: var(--jm-warn-fg); background: var(--jm-warn-bg); border-color: var(--jm-warn-border); }
.st.bad { color: var(--jm-bad-fg); background: var(--jm-bad-bg); border-color: var(--jm-bad-border); }
.st.info { color: var(--jm-info-fg); background: var(--jm-info-bg); border-color: var(--jm-info-border); }
.st.idle { color: var(--jm-idle-fg); background: var(--jm-idle-bg); border-color: var(--jm-idle-border); }
.st.neutral { color: var(--jm-text-2); background: var(--jm-bg-sunken); border-color: var(--jm-border); }
[data-density='display'] .st { height: 26px; font-size: 14px; padding: 0 10px 0 8px; }
[data-density='display'] .st .ic { width: 16px; height: 16px; }

/* ── 严重度标签（方角 4px）：严重 = 实心红白字，其余淡底 ── */
.sev { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 20px; min-width: 36px; padding: 0 6px;
  border-radius: var(--jm-radius-sm); font-size: 12px; font-weight: 500; border: 1px solid; white-space: nowrap; line-height: 1; }
.sev .ic { width: 12px; height: 12px; }
.sev.critical { background: var(--jm-bad-strong); border-color: var(--jm-bad-strong); color: var(--jm-bad-on-strong); }  /* 规范 §3.3：两套主题都是 实心红底 + 白字（浅 5.9:1 / 深 5.1:1） */
.sev.high { color: var(--jm-bad-fg); background: var(--jm-bad-bg); border-color: var(--jm-bad-border); }
.sev.medium { color: var(--jm-warn-fg); background: var(--jm-warn-bg); border-color: var(--jm-warn-border); }
.sev.low { color: var(--jm-info-fg); background: var(--jm-info-bg); border-color: var(--jm-info-border); }
[data-density='display'] .sev { height: 24px; min-width: 44px; font-size: 14px; }

/* ── 按钮 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--jm-control-h); padding: 0 14px;
  border-radius: var(--jm-radius-control); font-size: 14px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.btn.primary { background: var(--jm-brand-solid); color: var(--jm-brand-on); }
.btn.secondary { background: var(--jm-bg-surface); border-color: var(--jm-border-strong); color: var(--jm-text-1); }
.btn.ghost { color: var(--jm-text-2); padding: 0 8px; }
.btn.text { color: var(--jm-brand-text); padding: 0 4px; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.icon { width: var(--jm-control-h); padding: 0; }
.btn.sm.icon { width: 28px; }
.link { color: var(--jm-link); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }

/* ── 分段控件 ── */
.seg { display: inline-flex; padding: 2px; border-radius: var(--jm-radius-control); background: var(--jm-bg-sunken); border: 1px solid var(--jm-border); }
.seg > * { height: 26px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--jm-radius-xs); font-size: 13px; color: var(--jm-text-2); }
.seg > .on { background: var(--jm-bg-surface); color: var(--jm-text-1); font-weight: 500; box-shadow: var(--jm-shadow-1), 0 0 0 1px var(--jm-border-strong); }

/* ── 键值元信息栅格 ── */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; }
.kv.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv .k { font-size: var(--jmx-kv-key); line-height: 16px; color: var(--jm-text-3); margin-bottom: 4px; }
.kv .v { font-size: var(--jmx-kv-val); line-height: 22px; color: var(--jm-text-1); }
.kv .v .num { font-size: inherit; font-weight: 500; }  /* 与所在文字同号（规范字号表） */
.kv .span2 { grid-column: span 2; }

/* ── 进度条 ── */
.bar { height: 6px; border-radius: var(--jm-radius-xs); background: var(--jm-bg-hover); position: relative; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--jm-radius-xs); background: var(--jm-text-2); }

/* ── 空 / 错误 / 过期 状态 ── */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.empty .em-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--jm-bg-hover); color: var(--jm-text-3); display: grid; place-items: center; }
.empty .em-t { font-size: 14px; font-weight: 600; } .empty .em-d { font-size: 13px; color: var(--jm-text-3); }

/* ── 头像 ── */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }

/* ── JMOS 标识（正式标识：mvp-assets/icons/logo，文字已转曲，颜色跟随主题）── */
.logo { display: flex; align-items: center; gap: 10px; }
.logo .jlogo { display: block; height: 28px; width: auto; color: var(--jm-text-1); }   /* 标识（mvp-assets/icons/logo，文字已转曲，颜色跟随主题） */

/* ── 主题同步：切换瞬间给 <html> 加 .jm-theming，所有颜色（含 SVG 图表的 fill / stroke、伪元素）在 450ms 内一起过渡；
      平时不挂过渡，避免影响悬停等交互；系统「减少动态效果」时直接切换。由 assets/theme-sync.js 控制 ── */
html.jm-theming, html.jm-theming *, html.jm-theming *::before, html.jm-theming *::after {
  transition-property: background-color, border-color, color, fill, stroke, outline-color, box-shadow, text-decoration-color, stop-color !important;
  transition-duration: var(--jmx-theme-dur) !important; transition-timing-function: var(--jmx-theme-ease) !important; transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) { html.jm-theming, html.jm-theming *, html.jm-theming *::before, html.jm-theming *::after { transition: none !important; } }
/* 主题切换按钮：浅色时显示月亮（点了变深色），深色时显示太阳 */
[data-theme='light'] .jm-theme-btn .to-light, [data-theme='dark'] .jm-theme-btn .to-dark { display: none; }