/* 天枢企业大脑统一控制台 — 设计规格终稿 (议会 D-UI-20261014)
   纯 CSS 实现，无框架。Token 只许取自下方 :root，禁新增色值。 */

:root {
  --bg-canvas: #0B0E14;
  --bg-surface: #121721;
  --bg-surface-elev: #1A2230;
  --border-subtle: #232D3F;
  --primary-blue: #1E5BC6;
  --primary-hover: #2B6DE8;
  --status-normal: #1F8A5B;
  --status-warning: #D97706;
  --alert-vermilion: #C83C23;
  --brand-gold: #D4AF37;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-disabled: #475569;

  --font-zh: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-num: "JetBrains Mono", "Roboto Mono", Consolas, Menlo, monospace;

  --header-h: 48px;
  --col-left: 240px;
  --col-right: 320px;
  --kpi-h: 56px;
  --radius: 2px;
  --motion: 120ms cubic-bezier(0, 0, 0.2, 1);
}

/* 浅色主题（红队 K2 对冲，非默认） */
[data-theme="light"] {
  --bg-canvas: #F7F4ED;
  --bg-surface: #FFFFFF;
  --bg-surface-elev: #F2EFE8;
  --border-subtle: #DDD8CC;
  --primary-blue: #1E5BC6;
  --primary-hover: #2B6DE8;
  --status-normal: #1F8A5B;
  --status-warning: #D97706;
  --alert-vermilion: #C83C23;
  --brand-gold: #8C7322;
  --text-primary: #1A1A1A;
  --text-secondary: #55534C;
  --text-disabled: #A39E90;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-zh);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

.tnum { font-family: var(--font-num); font-feature-settings: "tnum" 1; }

/* ============ 主布局：48px 顶栏 + 三栏 Grid ============ */
.app {
  display: grid;
  grid-template-columns: var(--col-left) minmax(640px, 1fr) var(--col-right);
  grid-template-rows: var(--header-h) calc(100vh - var(--header-h));
  grid-template-areas:
    "header header header"
    "nav main alerts";
  height: 100vh;
}

/* ============ 顶栏 ============ */
.topbar {
  grid-area: header;
  display: flex;
  align-items: center;
  height: var(--header-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 12px;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  display: block;
}

.brand .brand-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

/* 租户切换器 */
.tenant-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-surface-elev);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--motion);
  user-select: none;
}

.tenant-switch:hover, .tenant-switch.active {
  border-color: var(--primary-blue);
  outline: 1px solid var(--primary-blue);
}

.tenant-switch .tenant-code {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.tenant-switch .tenant-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-normal);
  flex: none;
}

.tenant-switch .tenant-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.topbar-spacer { flex: 1; }

/* 主题切换按钮 */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-zh);
  cursor: pointer;
  transition: border-color var(--motion), color var(--motion);
}

.theme-toggle:hover {
  border-color: var(--primary-blue);
  color: var(--text-primary);
}

.topbar .sys-clock {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ============ 左导航 ============ */
.sidenav {
  grid-area: nav;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  padding: 8px;
  overflow-y: auto;
  transition: width var(--motion);
}

.nav-group-label {
  font-size: 11px;
  color: var(--text-disabled);
  padding: 8px 8px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
  white-space: nowrap;
}

.nav-item:hover {
  background: var(--bg-surface-elev);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--bg-surface-elev);
  color: var(--text-primary);
  border-color: var(--primary-blue);
}

.nav-item .nav-ico {
  width: 20px;
  text-align: center;
  flex: none;
  font-size: 14px;
}

.nav-item .nav-badge {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 11px;
  background: var(--alert-vermilion);
  color: #fff;
  border-radius: var(--radius);
  padding: 0 6px;
  line-height: 18px;
}

/* ============ 中央指挥画布 ============ */
.main {
  grid-area: main;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* KPI 条：56px，首屏 3 秒回答"系统是否正常 / 我该处理什么" */
.kpi-strip {
  display: flex;
  height: var(--kpi-h);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  flex: none;
  overflow-x: auto;
}

.kpi-item {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-right: 1px solid var(--border-subtle);
}

.kpi-item:last-child { border-right: none; }

.kpi-item .kpi-ico {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: none;
  background: var(--bg-surface-elev);
}

.kpi-item .kpi-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.kpi-item .kpi-val {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.kpi-item .kpi-val.ok { color: var(--status-normal); }
.kpi-item .kpi-val.warn { color: var(--status-warning); }
.kpi-item .kpi-val.crit { color: var(--alert-vermilion); }

/* 数据卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.mod-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 12px;
}

.mod-card .mod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mod-card .mod-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.mod-card .mod-status {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.mod-card .mod-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.dot.ok { background: var(--status-normal); }
.dot.warn { background: var(--status-warning); }
.dot.crit { background: var(--alert-vermilion); }
.dot.idle { background: var(--text-disabled); }

.mod-card .mod-metrics {
  display: flex;
  gap: 16px;
}

.mod-card .metric .m-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.mod-card .metric .m-val {
  font-family: var(--font-num);
  font-size: 16px;
  color: var(--text-primary);
}

.mod-card .metric .m-val.up { color: var(--status-normal); }
.mod-card .metric .m-val.down { color: var(--text-secondary); }
/* NEVER: 涨跌禁用朱砂红 — 正向松柏绿，反向次级灰 */

.mod-card .mod-desc {
  font-size: 12px;
  color: var(--text-disabled);
  margin-top: 8px;
}

/* 任务流 */
.task-flow {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.task-flow .tf-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-flow .tf-head .tf-count {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-secondary);
}

.tf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}

.tf-row:last-child { border-bottom: none; }

.tf-row .tf-id {
  font-family: var(--font-num);
  color: var(--text-disabled);
  min-width: 88px;
}

.tf-row .tf-title {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tf-row .tf-stage {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--bg-surface-elev);
  color: var(--text-secondary);
  white-space: nowrap;
}

.tf-row .tf-stage.stage-run { color: var(--primary-blue); }
.tf-row .tf-stage.stage-done { color: var(--status-normal); }
.tf-row .tf-stage.stage-wait { color: var(--status-warning); }

.tf-row .tf-time {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-disabled);
}

/* ============ 右栏告警流 ============ */
.alerts {
  grid-area: alerts;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.alerts-head {
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 500;
}

.alerts-head .alert-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mute-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-zh);
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color var(--motion), color var(--motion);
}

.mute-btn:hover { border-color: var(--primary-blue); color: var(--text-primary); }
.mute-btn.muted { color: var(--status-warning); border-color: var(--status-warning); }

.alerts-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* 4px 细滚动条 */
.alerts-list::-webkit-scrollbar, .sidenav::-webkit-scrollbar, .main::-webkit-scrollbar { width: 4px; height: 4px; }
.alerts-list::-webkit-scrollbar-track, .sidenav::-webkit-scrollbar-track, .main::-webkit-scrollbar-track { background: transparent; }
.alerts-list::-webkit-scrollbar-thumb, .sidenav::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

.alert-item {
  min-height: 36px;
  max-height: 44px;
  padding: 6px 12px 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 2px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  animation: alert-in 100ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes alert-in {
  from { transform: translateY(-4px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.alert-item.p0 {
  border-left-color: var(--alert-vermilion);
  background: rgba(200, 60, 35, 0.12);
}

.alert-item.p1 { border-left-color: var(--status-warning); background: rgba(217, 119, 6, 0.08); }
.alert-item.p2 { border-left-color: transparent; }

.alert-item .a-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-item .a-time {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-disabled);
  flex: none;
}

.alert-item .a-src {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-secondary);
  flex: none;
}

.alert-item .a-desc {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-item .a-goto {
  margin-left: auto;
  font-size: 11px;
  color: var(--primary-blue);
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}

.alert-item .a-goto:hover { color: var(--primary-hover); }

/* P0 脉冲（可静音） */
.alert-item.p0.pulse { animation: p0-pulse 2s infinite; }
@keyframes p0-pulse {
  0%, 100% { background: rgba(200, 60, 35, 0.12); }
  50% { background: rgba(200, 60, 35, 0.22); }
}
body.muted .alert-item.p0.pulse { animation: none; }

/* 危险操作确认按钮（朱砂红唯一允许的按钮场景） */
.btn-danger {
  background: var(--alert-vermilion);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 6px 16px;
  font-size: 13px;
  font-family: var(--font-zh);
  cursor: pointer;
  transition: filter var(--motion);
}

.btn-danger:hover { filter: brightness(1.12); }

.btn-primary {
  background: var(--primary-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 6px 16px;
  font-size: 13px;
  font-family: var(--font-zh);
  cursor: pointer;
  transition: background var(--motion);
}

.btn-primary:hover { background: var(--primary-hover); }

/* ============ 登录页 ============ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-canvas);
  padding: 16px;
}

.login-card {
  width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 40px 36px;
  text-align: center;
}

.login-card .login-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  margin: 0 auto 16px;
  display: block;
}

.login-card .login-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.login-card .login-slogan {
  font-size: 13px;
  color: var(--brand-gold);
  margin-bottom: 28px;
  letter-spacing: 2px;
}

.login-card .login-field { margin-bottom: 12px; text-align: left; }

.login-card .login-field label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.login-card .login-field input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-surface-elev);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-zh);
  transition: border-color var(--motion);
}

.login-card .login-field input:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.login-card .btn-primary { width: 100%; height: 40px; margin-top: 8px; }

.login-card .login-foot {
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-disabled);
}

/* ============ 移动端降级 ============ */
/* ≤1024px：右栏闭合，左栏图标态 */
@media (max-width: 1024px) {
  .app {
    grid-template-columns: 56px minmax(0, 1fr) 0px;
  }
  .sidenav { padding: 8px 4px; }
  .sidenav .nav-group-label,
  .sidenav .nav-item .nav-text,
  .sidenav .nav-item .nav-badge { display: none; }
  .sidenav .nav-item { justify-content: center; padding: 0; }
  .alerts { display: none; }
  .brand .brand-title { display: none; }
  .tenant-switch .tenant-name { display: none; }
}

/* ≤768px：单列流式 + 底部告警悬浮条 */
@media (max-width: 768px) {
  body { overflow: auto; }
  .app {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .topbar { position: sticky; top: 0; z-index: 999; height: 40px; }
  .sidenav { display: none; }
  .main { overflow: visible; padding: 8px; }
  .kpi-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kpi-item { min-width: 160px; }
  .alerts { display: none; }

  .mobile-alert-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    z-index: 1000;
    cursor: pointer;
  }
  .mobile-alert-bar .m-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alert-vermilion);
  }
  .mobile-alert-bar .m-count {
    font-family: var(--font-num);
    color: var(--text-primary);
  }
}

.mobile-alert-bar { display: none; }

/* ============ 视图切换 ============ */
.view.hidden { display: none !important; }

/* ============ 工作流模块 ============ */
.wf-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.wf-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-head .wf-count {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-secondary);
}

.kpi-item .kpi-val.blue { color: var(--primary-blue); }

/* 流程列表表 */
.wf-table-wrap { overflow-x: auto; }

.wf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 640px;
}

.wf-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-disabled);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.wf-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.wf-table tbody tr.wf-row { cursor: pointer; transition: background var(--motion); }
.wf-table tbody tr.wf-row:hover { background: var(--bg-surface-elev); }

.wf-table .wf-name { font-weight: 500; }
.wf-table .wf-tenant { font-family: var(--font-num); font-size: 11px; color: var(--text-secondary); }
.wf-table .wf-node { color: var(--text-secondary); white-space: nowrap; }
.wf-table .wf-time { font-family: var(--font-num); font-size: 11px; color: var(--text-disabled); white-space: nowrap; }

.wf-st {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--bg-surface-elev);
  white-space: nowrap;
}
.wf-st.st-run { color: var(--primary-blue); }
.wf-st.st-wait { color: var(--status-warning); }
.wf-st.st-err { color: var(--alert-vermilion); }
.wf-st.st-done { color: var(--status-normal); }

.wf-view-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--primary-blue);
  font-size: 11px;
  font-family: var(--font-zh);
  padding: 2px 10px;
  cursor: pointer;
  transition: border-color var(--motion);
  white-space: nowrap;
}
.wf-view-btn:hover { border-color: var(--primary-blue); }

/* 流程图展开行 */
.wf-detail td {
  background: var(--bg-canvas);
  padding: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.flowchain {
  display: flex;
  align-items: flex-start;
  padding: 16px 12px;
  overflow-x: auto;
  min-width: 0;
}

.fnode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  flex: none;
}

.fdot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface-elev);
  color: var(--text-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--motion), color var(--motion);
}

.fnode.done .fdot { border-color: var(--status-normal); color: var(--status-normal); }
.fnode.current .fdot { border-color: var(--primary-blue); color: var(--primary-blue); }
.fnode.error .fdot { border-color: var(--alert-vermilion); color: var(--alert-vermilion); }

.flabel { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.fnode.current .flabel { color: var(--text-primary); font-weight: 500; }
.fnode.error .flabel { color: var(--alert-vermilion); }

.flink {
  flex: 1;
  min-width: 24px;
  height: 2px;
  background: var(--border-subtle);
  margin-top: 13px;
}
.flink.done { background: var(--status-normal); }

.wf-detail-note {
  font-size: 11px;
  color: var(--text-disabled);
  padding: 0 12px 12px;
}

/* 待办审批卡片 */
.appr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
  padding: 12px;
}

.appr-card {
  background: var(--bg-surface-elev);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appr-card .appr-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.appr-card .appr-meta {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.appr-card .appr-meta .tnum { font-family: var(--font-num); }

.appr-card .appr-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.appr-card .appr-result {
  font-size: 12px;
  padding: 6px 0;
}
.appr-card .appr-result.ok { color: var(--status-normal); }
.appr-card .appr-result.no { color: var(--alert-vermilion); }

.appr-card.done .appr-actions { display: none; }

/* 占位视图 */
.wf-panel.placeholder {
  text-align: center;
  padding: 64px 16px;
}
.placeholder .ph-ico { font-size: 32px; color: var(--border-subtle); margin-bottom: 12px; }
.placeholder .ph-title { font-size: 15px; color: var(--text-primary); margin-bottom: 8px; }
.placeholder .ph-desc { font-size: 12px; color: var(--text-disabled); }

/* ============ 打印：强制白底黑字（红队 K2 对冲） ============ */
@media print {
  :root, [data-theme="light"] {
    --bg-canvas: #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-surface-elev: #F5F5F5;
    --border-subtle: #CCCCCC;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-disabled: #666666;
    --primary-blue: #1E5BC6;
    --status-normal: #1F8A5B;
    --status-warning: #D97706;
    --alert-vermilion: #C83C23;
  }
  body { background: #FFFFFF; color: #000000; overflow: visible; }
  .app { display: block; height: auto; }
  .sidenav, .alerts, .theme-toggle, .mobile-alert-bar { display: none; }
  .topbar { position: static; border-bottom: 2px solid #000; }
  .main { overflow: visible; }
  .alert-item.p0 { background: #FFFFFF; border: 2px solid #C83C23; }
  * { animation: none !important; transition: none !important; }
}

/* ---- 文档导入栏 ---- */
.import-bar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; flex-wrap: wrap; }
.import-bar input[type="text"] { flex: 1; min-width: 200px; height: 34px; padding: 0 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.import-bar input[type="file"] { color: var(--text-dim); font-size: 13px; }
.import-result { padding: 0 16px 14px; font-size: 13px; }
.import-result .ok { color: var(--ok); }
.import-result .err { color: var(--crit); }

/* ---- 作战指挥图 ---- */
.battle-map { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.battle-lane { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--bg-card); }
.battle-lane-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; }
.battle-lane-name { font-size: 15px; font-weight: 600; }
.battle-lane-count { font-size: 12px; color: var(--text-dim); }
.battle-nodes { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.battle-node { min-width: 150px; flex: 1; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; background: var(--bg); position: relative; }
.battle-node + .battle-node { margin-left: 26px; }
.battle-node + .battle-node::before { content: '→'; position: absolute; left: -24px; top: 38%;
  width: 22px; text-align: center; color: var(--text-dim); }
.battle-node-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.battle-node.bottleneck { border-color: var(--warn); }
.battle-node.bottleneck .battle-node-name::after { content: ' 最堵'; font-size: 11px; color: var(--warn); }
.battle-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.battle-chip { font-size: 12px; padding: 3px 8px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card); white-space: nowrap; }
.battle-chip.st-running { border-color: var(--primary); color: var(--primary); }
.battle-chip.st-pending_approval { border-color: var(--warn); color: var(--warn);
  animation: chip-pulse 1.6s infinite; }
.battle-chip.st-failed { border-color: var(--crit); color: var(--crit);
  animation: chip-pulse 1.2s infinite; }
.battle-chip.st-completed { opacity: .45; }
@keyframes chip-pulse { 0%,100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 6px 1px currentColor; } }
.battle-empty { font-size: 12px; color: var(--text-dim); }
.bt-detail { padding: 12px 16px; }
.bt-detail .kv { display: flex; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.bt-detail .kv b { min-width: 90px; color: var(--text-dim); font-weight: 400; }
.bt-cmds { display: flex; gap: 10px; margin-top: 12px; }

/* ---- 变量别名（兼容新组件） ---- */
:root {
  --primary: var(--primary-blue);
  --warn: var(--status-warning);
  --crit: var(--alert-vermilion);
  --ok: var(--status-normal);
  --bg-card: var(--bg-surface);
  --bg: var(--bg-canvas);
  --border: var(--border-subtle);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
}

/* ===== 作战指挥图 · Palantir 科技风（动态实时） ===== */
.battle-kpis .battle-kpi { position: relative; }
.battle-kpi::before, .battle-kpi::after,
.battle-kpi .kpi-ico::before { content: ''; position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--primary-blue); opacity: .7; pointer-events: none; }
.battle-kpi::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.battle-kpi::after { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-normal); margin-left: 4px; vertical-align: middle;
  animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; box-shadow: 0 0 6px var(--status-normal); }
  50% { opacity: .35; box-shadow: none; } }
.live-tag { font-size: 12px; letter-spacing: 2px; color: var(--status-normal);
  border: 1px solid var(--status-normal); padding: 2px 8px; border-radius: 3px;
  animation: livePulse 1.6s ease-in-out infinite; font-family: var(--font-num); }

/* KPI 数字变化：闪烁 + 增量徽标 */
.kpi-val.flash-up { animation: kpiFlashUp .9s ease; }
.kpi-val.flash-down { animation: kpiFlashDown .9s ease; }
@keyframes kpiFlashUp { 0% { transform: scale(1); } 30% { transform: scale(1.25);
  text-shadow: 0 0 18px var(--status-warning); } 100% { transform: scale(1); } }
@keyframes kpiFlashDown { 0% { transform: scale(1); } 30% { transform: scale(1.25);
  text-shadow: 0 0 18px var(--status-normal); } 100% { transform: scale(1); } }
.kpi-delta { font-size: 11px; margin-left: 6px; font-family: var(--font-num);
  opacity: 0; transition: opacity .3s; }
.kpi-delta.show { opacity: 1; }
.kpi-delta.up { color: var(--status-warning); }
.kpi-delta.down { color: var(--status-normal); }

/* 实时变更 ticker */
.battle-ticker { display: flex; align-items: center; gap: 10px; margin: 0 16px 10px;
  padding: 6px 12px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); font-size: 12px; overflow: hidden; }
.ticker-label { color: var(--status-normal); white-space: nowrap; font-family: var(--font-num); }
.ticker-body { color: var(--text-secondary); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-family: var(--font-num); }
.ticker-body.hot { color: var(--status-warning); }

/* 沙盘面板：雷达网格底 */
.battle-panel { position: relative; overflow: hidden; }
.battle-map.palantir { position: relative; padding: 12px 16px 24px;
  background:
    linear-gradient(rgba(30,91,198,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,91,198,.05) 1px, transparent 1px);
  background-size: 32px 32px; min-height: 320px; }
.battle-map.palantir::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(30,91,198,.10), transparent 60%); }
.battle-lane { position: relative; border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 10px 14px 6px; margin-bottom: 14px;
  background: rgba(18,23,33,.72); backdrop-filter: blur(2px); }
.battle-lane::before, .battle-lane::after { content: ''; position: absolute; width: 8px; height: 8px;
  border: 1px solid var(--primary-blue); opacity: .55; }
.battle-lane::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.battle-lane::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.battle-lane-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.battle-lane-name { font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.battle-lane-name::before { content: '▸ '; color: var(--primary-blue); }
.battle-lane-count { font-size: 11px; color: var(--text-secondary); font-family: var(--font-num); }
.battle-lane-count.hot { color: var(--status-warning); }

/* SVG 沙盘 */
.battle-svg { display: block; width: 100%; height: auto; }
.battle-svg .flow-line { stroke: var(--primary-blue); stroke-width: 1.5; opacity: .55; fill: none;
  stroke-dasharray: 8 6; animation: flowDash 1.2s linear infinite; }
@keyframes flowDash { to { stroke-dashoffset: -14; } }
.battle-svg .node-ring { fill: var(--bg-surface-elev); stroke: var(--primary-blue);
  stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(30,91,198,.8)); }
.battle-svg .node-ring.bottleneck { stroke: var(--status-warning); filter: drop-shadow(0 0 10px rgba(217,119,6,.9)); }
.battle-svg .node-pulse { fill: none; stroke: var(--status-warning); stroke-width: 1;
  opacity: 0; transform-origin: center; transform-box: fill-box; }
.battle-svg .node-ring.bottleneck + .node-pulse { animation: nodePulse 1.8s ease-out infinite; }
@keyframes nodePulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
.battle-svg .node-label { fill: var(--text-primary); font-size: 12px; text-anchor: middle;
  font-family: var(--font-zh); }
.battle-svg .node-sub { fill: var(--text-disabled); font-size: 10px; text-anchor: middle;
  font-family: var(--font-num); }
.battle-svg .inst-dot { cursor: pointer; }
.battle-svg .inst-dot circle.core { stroke-width: 1.5; }
.battle-svg .inst-dot.st-running circle.core { fill: var(--primary-blue); stroke: #9CC2FF;
  filter: drop-shadow(0 0 5px rgba(30,91,198,.9)); }
.battle-svg .inst-dot.st-pending_approval circle.core { fill: var(--status-warning); stroke: #FFD9A0;
  filter: drop-shadow(0 0 7px rgba(217,119,6,.95)); }
.battle-svg .inst-dot.st-failed circle.core { fill: var(--alert-vermilion); stroke: #FFB3A3;
  filter: drop-shadow(0 0 7px rgba(200,60,35,.95)); }
.battle-svg .inst-dot.st-completed circle.core { fill: var(--text-disabled); stroke: none; opacity: .5; }
.battle-svg .inst-dot .halo { fill: none; stroke-width: 1; opacity: 0; }
.battle-svg .inst-dot.st-pending_approval .halo { stroke: var(--status-warning); animation: dotHalo 1.6s ease-out infinite; }
.battle-svg .inst-dot.st-failed .halo { stroke: var(--alert-vermilion); animation: dotHalo 1.2s ease-out infinite; }
@keyframes dotHalo { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.4); } }
.battle-svg .inst-dot .halo, .battle-svg .node-pulse { transform-origin: center; transform-box: fill-box; }
.battle-svg .inst-dot:hover circle.core { stroke-width: 3; }
.battle-svg .inst-tag { fill: var(--text-secondary); font-size: 9px; text-anchor: middle; font-family: var(--font-num); }
.battle-svg .lane-scan { stroke: var(--primary-blue); stroke-width: 1; opacity: .25; }

/* 变更 toast */
.battle-toasts { position: fixed; right: 336px; top: 120px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.battle-toast { background: var(--bg-surface-elev); border: 1px solid var(--primary-blue);
  border-left: 3px solid var(--primary-blue); border-radius: var(--radius);
  padding: 8px 14px; font-size: 12px; max-width: 300px; color: var(--text-primary);
  box-shadow: 0 4px 18px rgba(0,0,0,.5); animation: toastIn .3s ease, toastOut .4s ease 4.6s forwards; }
.battle-toast.warn { border-color: var(--status-warning); border-left-color: var(--status-warning); }
.battle-toast.crit { border-color: var(--alert-vermilion); border-left-color: var(--alert-vermilion); }
.battle-toast.ok { border-color: var(--status-normal); border-left-color: var(--status-normal); }
.battle-toast .tt { font-family: var(--font-num); font-size: 10px; color: var(--text-disabled); }
@keyframes toastIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(30px); opacity: 0; } }

/* 新实例高亮 */
.battle-svg .inst-dot.fresh circle.core { animation: freshPop 1.2s ease 3; }
@keyframes freshPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.6); } }
.battle-svg .inst-dot.fresh circle.core { transform-origin: center; transform-box: fill-box; }

/* 节点可点击 + 节点业务页面 */
.battle-svg .node-ring.node-clickable { transition: stroke-width .15s; }
.battle-svg .node-ring.node-clickable:hover { stroke-width: 3.5;
  filter: drop-shadow(0 0 12px rgba(30,91,198,1)); }
.node-inst-list { margin-top: 10px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius); overflow: hidden; }
.node-inst-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.node-inst-row:last-child { border-bottom: none; }
.node-inst-row:hover { background: var(--bg-surface-elev); }
.inst-dot-mini { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.inst-dot-mini.st-running { background: var(--primary-blue); box-shadow: 0 0 6px var(--primary-blue); }
.inst-dot-mini.st-pending_approval { background: var(--status-warning); box-shadow: 0 0 6px var(--status-warning); }
.inst-dot-mini.st-failed { background: var(--alert-vermilion); box-shadow: 0 0 6px var(--alert-vermilion); }
.inst-dot-mini.st-completed { background: var(--text-disabled); }
.node-inst-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-inst-id { color: var(--text-secondary); font-size: 11px; }
.node-inst-time { color: var(--text-disabled); font-size: 11px; }
.battle-svg .node-label.node-clickable:hover { fill: var(--primary-hover); text-decoration: underline; }
.battle-kpi[data-kpi] { transition: border-color .15s, transform .15s; }
.battle-kpi[data-kpi]:hover { border-color: var(--primary-blue); transform: translateY(-1px); }
.battle-kpi[data-kpi]:hover .kpi-label { color: var(--primary-hover); }
.tenant-list, .plugin-list { display: grid; gap: 12px; padding: 12px; }
.tenant-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.tenant-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tenant-id { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.tenant-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.tenant-desc { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.settings-list { padding: 8px 16px 16px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: none; }
.setting-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.setting-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }