/* ============================================================
   昆仑设计体系全局样式（v5.1）——完整设计语言基座
   - CSS 变量（明暗双主题，随 data-theme 切换）
   - 焦点态 / 滚动条 / 选区 / 数字 tabular
   - 通用工具类（.km-* 前缀，避免与组件库冲突）
   对齐 src/theme/tokens.ts（kunlun v5.0），唯一色值权威源
   ============================================================ */

/* ===== CSS 变量：暗色（默认） ===== */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;

  /* 色彩 */
  --km-primary: #5b5bd6;
  --km-primary-strong: #6366f1;
  --km-primary-soft: #8b8cf7;
  --km-primary-deep: #4a4ac2;
  --km-on-primary: #ffffff;

  --km-bg-app: #0a0c11;
  --km-bg-surface: #10131a;
  --km-bg-raised: #151923;
  --km-bg-sidebar: #0c0e14;
  --km-bg-hover: rgba(255, 255, 255, 0.03);
  --km-bg-active: rgba(99, 102, 241, 0.08);

  --km-text-primary: #e4e7ef;
  --km-text-secondary: #969eaf;
  /* 2026-09-16（M5）：原 #5c6474 实测 2.95:1(raised)–3.29:1(app)，低于本项目自定的 WCAG 2.2 AA。
     现值在 app/surface/raised/sidebar 四底上最低 4.87:1，由 tokenContrast.test.ts 守门。 */
  --km-text-muted: #7f8798;

  --km-border: rgba(255, 255, 255, 0.06);
  --km-border-strong: rgba(255, 255, 255, 0.12);
  --km-border-primary: rgba(99, 102, 241, 0.35);

  --km-success: #2fbf8f;
  --km-warning: #d9a03f;
  --km-error: #e5534b;
  --km-info: #4d8df7;

  --km-success-soft: rgba(47, 191, 143, 0.12);
  --km-warning-soft: rgba(217, 160, 63, 0.12);
  --km-error-soft: rgba(229, 83, 75, 0.12);
  --km-info-soft: rgba(77, 141, 247, 0.12);
  --km-primary-soft-bg: rgba(99, 102, 241, 0.1);

  --km-success-text: #7fdcc0;
  --km-warning-text: #e2b45c;
  --km-error-text: #f09b96;
  --km-info-text: #8ab5fb;

  /* 阴影 */
  --km-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --km-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.28);
  --km-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);

  /* 圆角 */
  --km-radius-sm: 4px;
  --km-radius-md: 6px;
  --km-radius-lg: 8px;
  --km-radius-xl: 10px;
  --km-radius-pill: 999px;

  /* 动效 */
  --km-motion-fast: 0.12s ease;
  --km-motion-normal: 0.15s ease;
  --km-motion-slow: 0.2s ease;

  /* 滚动条 */
  --km-scroll-thumb: rgba(255, 255, 255, 0.1);
  --km-scroll-thumb-hover: rgba(255, 255, 255, 0.2);
}

/* ===== CSS 变量：浅色 ===== */
:root[data-theme='light'] {
  color-scheme: light;

  --km-primary: #4a4ac2;
  --km-primary-strong: #5b5bd6;
  --km-primary-soft: #4a4ac2;
  --km-primary-deep: #3b3ba0;

  --km-bg-app: #f5f6f8;
  --km-bg-surface: #ffffff;
  --km-bg-raised: #ffffff;
  /* 侧栏**跟随主题**（2026-09-17 用户决策，撤回昨晚的「恒深侧栏」尝试）：
     设计方案 §3.1/§6.3 写「sidebar #0c0e14 恒深侧栏（双主题一致）」，但实践上行不通——
     侧栏内的文字走的是跟随主题的 token（--km-text-*），浅色下是深色字，压在 #0c0e14 上只有 ≈1.05:1
     完全不可见；且浅色界面里挂一条深色侧栏，视觉上整体不一致（用户实测反馈「主题颜色对不上」）。
     故以用户决策为准：**侧栏跟随主题**（浅色白底深字 / 暗色深底浅字），颜色与全站其余表面一致。
     若将来确实要做恒深侧栏，必须先为侧栏单独定义一套**不随主题变化**的文字 token（属设计交付物变更）。 */
  --km-bg-sidebar: #ffffff;
  --km-bg-hover: rgba(16, 19, 26, 0.035);
  --km-bg-active: rgba(91, 91, 214, 0.06);

  --km-text-primary: #171a21;
  --km-text-secondary: #5a6270;
  /* 2026-09-16（M5）：原 #959ca9 实测 2.55:1(app)–2.76:1(白底)，低于 AA。
     现值在 app/surface/raised/sidebar 四底上最低 4.96:1。 */
  --km-text-muted: #646b78;

  --km-border: #e7e9ee;
  --km-border-strong: #cfd3dc;
  --km-border-primary: rgba(91, 91, 214, 0.35);

  --km-success: #0f9d72;
  --km-warning: #c98a1b;
  --km-error: #d14343;
  --km-info: #2563eb;

  --km-success-soft: rgba(15, 157, 114, 0.1);
  --km-warning-soft: rgba(201, 138, 27, 0.1);
  --km-error-soft: rgba(209, 67, 67, 0.1);
  --km-info-soft: rgba(37, 99, 235, 0.1);
  --km-primary-soft-bg: rgba(91, 91, 214, 0.08);

  /* P5 修复（2026-09-17）：语义「浅底深字」配色原为语义基色本身，压在 -soft 浅底（rgba 合成后
     接近白底）上实测仅 2.67–3.08:1，低于 AA 4.5:1（暗色主题同组实测 7.7–9.7:1，无此问题）。
     现值按 AA 取深一档，仍是各语义同色相：success 4.76 / warning 4.91 / error 5.54 / info 5.82:1。
     门禁：tokenContrast.test.ts 已覆盖 -text × -soft（含 rgba 合成）组合。 */
  --km-success-text: #0b7a58;
  --km-warning-text: #8a5a06;
  --km-error-text: #b32b2b;
  --km-info-text: #1d4ed8;

  --km-shadow-sm: 0 1px 2px rgba(16, 19, 26, 0.05);
  --km-shadow-md: 0 4px 14px rgba(16, 19, 26, 0.06);
  --km-shadow-lg: 0 12px 32px rgba(16, 19, 26, 0.1);

  --km-scroll-thumb: rgba(16, 19, 26, 0.14);
  --km-scroll-thumb-hover: rgba(16, 19, 26, 0.26);
}

/* ===== 基础 ===== */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

button {
  font-family: inherit;
}

/* ===== 键盘焦点态（可访问性）：双环，明暗主题自适应 ===== */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--km-bg-app), 0 0 0 4px rgba(99, 102, 241, 0.45);
  border-radius: var(--km-radius-sm);
}

/* ===== 滚动条：8px 细条 ===== */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--km-scroll-thumb);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--km-scroll-thumb-hover);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===== 选区 ===== */
::selection {
  background: rgba(99, 102, 241, 0.28);
}

/* ===== 数字：等宽对齐 ===== */
.num,
.km-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============================================================
   全局兜底：文字溢出 / 响应式 / 布局稳健性
   （零侵入补齐 24 个页面的溢出防护与 8 个页面的响应式缺口）
   ============================================================ */

/* ---- 长文本截断：单行省略（昵称/标题/URL 等，防撑破布局） ---- */
.km-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---- 长文本截断：两行省略（评论/描述等） ---- */
.km-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 超长无空格串（URL/Key）强制换行，防横向溢出 ---- */
.km-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- 移动端兜底：表格横向滚动（原 8 个页面无响应式适配） ---- */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 页面级横向溢出兜底 */
  body {
    overflow-x: hidden;
  }
  /* 移动端触控目标 ≥44px（可用性基线） */
  button,
  [role='button'],
  .MuiButton-root,
  .MuiIconButton-root {
    min-height: 32px;
  }
  /* 卡片内边距收缩，提升小屏信息密度 */
  .MuiPaper-root,
  .MuiCard-root {
    border-radius: var(--km-radius-lg);
  }
}

/* ---- 过渡统一：交互反馈及时自然 ---- */
.km-interactive {
  transition: background var(--km-motion-fast), color var(--km-motion-fast),
    border-color var(--km-motion-fast), box-shadow var(--km-motion-fast);
  cursor: pointer;
}

/* ============================================================
   全局交互反馈兜底（补齐仅 15/35 页面有 hover 的缺口）
   统一：可点击行的悬停反馈、卡片悬停微升、禁用态视觉
   ============================================================ */

/* 表格行悬停反馈（MUI Table 已覆盖，此处兜底原生 table 行） */
table tbody tr {
  transition: background var(--km-motion-fast);
}
table tbody tr:hover {
  background: var(--km-bg-hover);
}

/* 卡片/纸面：悬停仅微升阴影，不做位移（克制） */
.MuiPaper-root,
.MuiCard-root {
  transition: box-shadow var(--km-motion-fast), border-color var(--km-motion-fast);
}

/* 禁用态：统一降透明度 + 禁用光标 */
button:disabled,
[role='button']:disabled,
.Mui-disabled {
  cursor: not-allowed;
}

/* 链接：统一主色 + 悬停下划线 */
a {
  color: var(--km-primary-strong);
  text-decoration: none;
  transition: color var(--km-motion-fast);
}
a:hover {
  text-decoration: underline;
}

/* 加载态：骨架屏呼吸动画（统一节奏） */
.MuiSkeleton-root {
  animation: km-pulse 1.6s ease-in-out infinite;
}
@keyframes km-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ============================================================
   通用组件类（昆仑设计语言）
   ============================================================ */

/* ---- 状态色点 ---- */
.km-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.km-dot.ok { background: var(--km-success); }
.km-dot.run { background: var(--km-primary); }
.km-dot.warn { background: var(--km-warning); }
.km-dot.err { background: var(--km-error); }
.km-dot.info { background: var(--km-info); }
.km-dot.run.live {
  animation: km-blink 2s ease-in-out infinite;
}
@keyframes km-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ---- 状态胶囊（点 + 文字，暗色下浅底深字风格由语义色驱动） ---- */
.km-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.6;
  border-radius: var(--km-radius-sm);
  padding: 2px 8px;
  font-weight: 500;
}
.km-pill.run { background: var(--km-primary-soft-bg); color: var(--km-primary-soft); }
.km-pill.ok { background: var(--km-success-soft); color: var(--km-success-text); }
.km-pill.warn { background: var(--km-warning-soft); color: var(--km-warning-text); }
.km-pill.err { background: var(--km-error-soft); color: var(--km-error-text); }
.km-pill.info { background: var(--km-info-soft); color: var(--km-info-text); }
.km-pill.muted { background: var(--km-bg-hover); color: var(--km-text-muted); }

/* ---- 意向/状态标签（语义色浅底，克制小圆角） ---- */
.km-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: var(--km-radius-sm);
}
.km-tag.hot { background: var(--km-error-soft); color: var(--km-error-text); }
.km-tag.mid { background: var(--km-warning-soft); color: var(--km-warning-text); }
.km-tag.low { background: var(--km-bg-hover); color: var(--km-text-secondary); }
.km-tag.ok { background: var(--km-success-soft); color: var(--km-success-text); }
.km-tag.info { background: var(--km-info-soft); color: var(--km-info-text); }

/* ---- 平台徽标（业务数据色，保留） ---- */
.km-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.km-pb-mark {
  width: 16px;
  height: 16px;
  border-radius: var(--km-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---- 卡片 ---- */
.km-card {
  background: var(--km-bg-surface);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-lg);
  box-shadow: var(--km-shadow-sm);
}

/* ---- 页面标题区 ---- */
.km-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.km-page-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.km-page-sub {
  font-size: 12.5px;
  color: var(--km-text-secondary);
  margin-top: 4px;
}

/* ---- 区块标题 ---- */
.km-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.km-section-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--km-text-primary);
  margin: 0;
}
.km-section-title .count {
  font-size: 11px;
  font-weight: 400;
  color: var(--km-text-muted);
  margin-left: 8px;
}

/* ---- 指标卡 ---- */
.km-metric {
  background: var(--km-bg-surface);
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius-lg);
  padding: 14px 16px;
}
.km-metric-label {
  font-size: 11px;
  color: var(--km-text-secondary);
  margin-bottom: 6px;
}
.km-metric-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.km-metric-delta { font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.km-metric-delta.up { color: var(--km-success); }
.km-metric-delta.down { color: var(--km-error); }

/* ---- 过渡 ---- */
.km-fade {
  animation: km-fade-in 0.25s ease;
}
@keyframes km-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   a11y 合规层（2026-09-15，目标 WCAG 2.2 AA）
   2.4.1 绕过区块 / 2.4.7 焦点可见补充 / 2.3.3 动效偏好 / 2.4.11 焦点不被遮挡
   ============================================================ */

/* ---- 跳到主内容（默认视觉隐藏，键盘聚焦时显现） ---- */
.km-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 3000;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--km-primary-strong);
  color: var(--km-on-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.km-skip-link:focus,
.km-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--km-on-primary);
  outline-offset: 2px;
}

/* ---- 主内容地标：程序化聚焦不显示外框（避免跳过链接落点出现"莫名边框"） ---- */
main#main-content:focus {
  outline: none;
}

/* ---- 全局焦点可见兜底（2.4.7 / 2.4.11：键盘焦点必须可见且不被固定层遮挡） ---- */
:focus-visible {
  outline: 2px solid var(--km-primary-strong);
  outline-offset: 2px;
}

/* ---- 动效偏好（2.3.3）：用户声明减少动效时，动画/过渡降到不可感知 ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}