/* app.css —— Azure 设计系统 · 全部 token 落成 CSS 变量
   @author yan 2026-09-25
   命名规范：yc- 前缀，BEM 风格 */

:root {
  /* 色彩 */
  --yc-bg: #F7F9FC;
  --yc-surface: #FFFFFF;
  --yc-primary: #2563EB;
  --yc-primary-hover: #1D4ED8;
  --yc-primary-light: #EFF6FF;
  --yc-gradient: linear-gradient(135deg, #2563EB, #3B82F6, #06B6D4);
  --yc-accent-purple: #7C3AED;
  --yc-text-primary: #0F172A;
  --yc-text-secondary: #475569;
  --yc-text-muted: #64748B; /* T113-High#1: AA contrast 4.6:1, was #94A3B8=3.5:1 */
  --yc-text-disabled: #94A3B8; /* disabled state text */
  --yc-border: #E2E8F0;
  --yc-success: #10B981;
  --yc-warning: #F59E0B;
  --yc-danger: #EF4444;
  --yc-info: #3B82F6;

  /* 圆角 */
  --yc-radius-card: 16px;
  --yc-radius-node: 12px;
  --yc-radius-btn: 10px;
  --yc-radius-sm: 6px;

  /* 阴影 */
  --yc-shadow: 0 2px 8px rgba(15,23,42,.06);
  --yc-shadow-hover: 0 12px 32px rgba(15,23,42,.12);
  --yc-shadow-sm: 0 1px 3px rgba(15,23,42,.04);

  /* 间距 */
  --yc-space-xs: 4px;
  --yc-space-sm: 8px;
  --yc-space-md: 16px;
  --yc-space-lg: 24px;
  --yc-space-xl: 32px;
  --yc-space-2xl: 48px;

  /* 字体 */
  --yc-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --yc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --yc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* 字号 */
  --yc-text-xs: 0.75rem;
  --yc-text-sm: 0.8125rem;
  --yc-text-base: 0.875rem;
  --yc-text-lg: 1rem;
  --yc-text-xl: 1.25rem;
  --yc-text-2xl: 1.5rem;
  --yc-text-3xl: 2rem;

  /* 布局 */
  --yc-sidebar-w: 240px;
  --yc-topbar-h: 56px;

  /* 过渡 */
  --yc-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* 终端颜色 */
  --yc-terminal-bg: #0F172A;
  --yc-terminal-surface: #1E293B;
  --yc-terminal-text: #E2E8F0;
  --yc-terminal-text-muted: #94A3B8;
  --yc-terminal-border: #334155;
  --yc-terminal-success: #10B981;
  --yc-terminal-warning: #F59E0B;
  --yc-terminal-danger: #EF4444;
  --yc-terminal-info: #3B82F6;
  --yc-terminal-cursor: #60A5FA;

  /* 焦点环 */
  --yc-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* [hidden] 属性重置（修复项 T121-High#1）：
   HTML hidden 属性的 UA 默认 display:none 优先级极低，会被任何带 display 的
   作者样式（如 .yc-voice__alert{display:flex}、.yc-intel__kpis{display:grid}、
   .yc-priv__main{display:flex}）覆盖，导致 JS 以 el.hidden=true 隐藏的元素仍常显。
   全局兜底：凡带 hidden 属性一律 display:none，且 !important 压过组件级 display。
   显示时 JS 移除 hidden 属性（el.hidden=false），组件自身 display 规则即恢复生效。 */
[hidden] { display: none !important; }

/* T141 全局兜底（:where 零特异性，任何组件级显式定尺均可覆盖）：
   控制台按钮内任何内联 SVG 默认 1.2em 见方且 flex 不收缩——
   SVG 无 width/height 属性时无固有尺寸，会把 flex 按钮压窄、标签逐字竖排。 */
:where([class*="yc-"]) :where(button) svg,
:where(.yc-btn) svg {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}

/* === 全局 === */
.yc-app {
  font-family: var(--yc-font-body);
  font-size: var(--yc-text-base);
  color: var(--yc-text-primary);
  background: var(--yc-bg);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* === 布局骨架 === */
.yc-layout {
  display: flex;
  min-height: 100vh;
}

.yc-sidebar {
  width: var(--yc-sidebar-w);
  background: var(--yc-surface);
  border-right: 1px solid var(--yc-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform var(--yc-transition);
}

/* 布局壳宽度收缩兜底（T151）：
   .yc-main / .yc-content 都是 flex 子项，而 flex 子项默认 min-width:auto——
   它表示「不得窄于内容的最小宽度」，等于把内容宽度（如名单表 min-width:600px、
   外呼三列栅格、话术固定宽侧栏）当成主轴下限，父容器再窄也压不下去。
   结果窄屏下 .yc-main 被内部内容顶到 427~618px，远宽于 375px 视口，
   整个文档随之出现横向滚动。显式 min-width:0 解除该下限，让外壳真正允许收缩，
   由内部区域（表格各自的滚动容器）自行消化超出部分。 */
.yc-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--yc-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.yc-topbar {
  height: var(--yc-topbar-h);
  background: var(--yc-surface);
  border-bottom: 1px solid var(--yc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--yc-space-lg);
  position: sticky;
  top: 0;
  z-index: 90;
}

/* 同理：.yc-content 作为 .yc-main 的 flex 子项，默认 min-width:auto 会把顶宽传给自身，
   即使 .yc-main 已可收缩，内容区仍会按最小内容宽撑破外壳。这里一并解除，
   使 .yc-main 的收缩能真正传导到页面内容，实现页面级无横向滚动。 */
.yc-content {
  flex: 1;
  min-width: 0;
  padding: var(--yc-space-lg);
}

/* === 侧边栏 === */
.yc-sidebar__brand {
  padding: var(--yc-space-md) var(--yc-space-lg);
  border-bottom: 1px solid var(--yc-border);
  display: flex;
  align-items: center;
  gap: var(--yc-space-sm);
}

.yc-sidebar__logo {
  width: 32px;
  height: 32px;
  background: var(--yc-gradient);
  border-radius: var(--yc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.yc-sidebar__logo svg { stroke: #fff; width: 18px; height: 18px; }

.yc-sidebar__title {
  font-family: var(--yc-font-display);
  font-size: var(--yc-text-lg);
  font-weight: 700;
  color: var(--yc-text-primary);
}

.yc-sidebar__nav { padding: var(--yc-space-sm) 0; flex: 1; }

.yc-sidebar__group {
  padding: var(--yc-space-sm) var(--yc-space-lg);
  font-size: var(--yc-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yc-text-muted);
  margin-top: var(--yc-space-sm);
}

.yc-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--yc-space-sm);
  padding: 10px var(--yc-space-lg);
  color: var(--yc-text-secondary);
  text-decoration: none;
  font-size: var(--yc-text-base);
  border-radius: 0;
  transition: all var(--yc-transition);
  min-height: 44px;
  position: relative;
}

.yc-sidebar__link:hover {
  background: var(--yc-primary-light);
  color: var(--yc-primary);
}

.yc-sidebar__link:focus-visible {
  outline: none;
  box-shadow: var(--yc-focus-ring);
}

.yc-sidebar__link--active {
  background: var(--yc-primary-light);
  color: var(--yc-primary);
  font-weight: 600;
}

.yc-sidebar__link--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--yc-primary);
  border-radius: 0 3px 3px 0;
}

.yc-sidebar__link--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.yc-sidebar__badge {
  margin-left: auto;
  font-size: var(--yc-text-xs);
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--yc-border);
  color: var(--yc-text-muted);
  font-weight: 500;
}

.yc-sidebar__icon { width: 20px; height: 20px; flex-shrink: 0; }
.yc-sidebar__icon svg { width: 20px; height: 20px; stroke-width: 1.8; }

/* === 顶部栏 === */
.yc-topbar__left { display: flex; align-items: center; gap: var(--yc-space-md); }
.yc-topbar__right { display: flex; align-items: center; gap: var(--yc-space-md); }

.yc-topbar__title {
  font-family: var(--yc-font-display);
  font-size: var(--yc-text-xl);
  font-weight: 700;
}

.yc-topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-space-xs);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--yc-text-xs);
  font-weight: 500;
  background: var(--yc-primary-light);
  color: var(--yc-primary);
}

.yc-topbar__badge--warning {
  background: #FEF3C7;
  color: #92400E;
}

.yc-topbar__badge--expired {
  background: #FEE2E2;
  color: #991B1B;
}

/* === O3: 告警铃铛 + 全局横幅（全走 --yc-* token，禁硬编码 hex / emoji） === */
.yc-alert-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--yc-radius-btn);
  background: transparent;
  color: var(--yc-text-secondary);
  cursor: pointer;
  transition: all var(--yc-transition);
}
.yc-alert-bell svg { width: 20px; height: 20px; stroke-width: 1.8; }
.yc-alert-bell:hover { background: var(--yc-primary-light); color: var(--yc-primary); }
.yc-alert-bell:focus-visible { outline: none; box-shadow: var(--yc-focus-ring); }
.yc-alert-bell--active { color: var(--yc-danger); }
.yc-alert-bell__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--yc-danger);
  color: var(--yc-surface);
  font-size: var(--yc-text-xs);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--yc-surface);
}

.yc-alert-banner {
  display: flex;
  align-items: center;
  gap: var(--yc-space-sm);
  padding: var(--yc-space-sm) var(--yc-space-lg);
  font-size: var(--yc-text-sm);
  border-bottom: 1px solid var(--yc-border);
  background: var(--yc-primary-light);
  color: var(--yc-text-primary);
}
.yc-alert-banner__icon { display: inline-flex; flex-shrink: 0; color: var(--yc-info); }
.yc-alert-banner__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.yc-alert-banner__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.yc-alert-banner__ack {
  flex-shrink: 0;
  padding: 6px 14px;
  min-height: 32px;
  border-radius: var(--yc-radius-btn);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: var(--yc-text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--yc-transition);
}
.yc-alert-banner__ack:hover { background: var(--yc-surface); }
.yc-alert-banner__ack:focus-visible { outline: none; box-shadow: var(--yc-focus-ring); }
/* 严重度着色：info 用 primary-light；warning/critical 用 color-mix 从 token 派生淡背景
   （不支持 color-mix 的旧内核自动回退到上面的 primary-light） */
.yc-alert-banner--warning { background: color-mix(in srgb, var(--yc-warning) 16%, var(--yc-surface)); }
.yc-alert-banner--warning .yc-alert-banner__icon { color: var(--yc-warning); }
.yc-alert-banner--critical { background: color-mix(in srgb, var(--yc-danger) 14%, var(--yc-surface)); }
.yc-alert-banner--critical .yc-alert-banner__icon { color: var(--yc-danger); }

/* === O3: 开关组件（设置页告警配置卡使用；全走 token） === */
.yc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
}
.yc-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.yc-switch__slider {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: var(--yc-border);
  transition: background var(--yc-transition);
  pointer-events: none;
}
.yc-switch__slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yc-surface);
  box-shadow: var(--yc-shadow-sm);
  transition: transform var(--yc-transition);
}
.yc-switch input:checked + .yc-switch__slider { background: var(--yc-primary); }
.yc-switch input:checked + .yc-switch__slider::before { transform: translateX(18px); }
.yc-switch input:focus-visible + .yc-switch__slider { box-shadow: var(--yc-focus-ring); }

/* === O3: 设置页告警中心配置卡（.yc-alertcfg__*） === */
.yc-alertcfg__group {
  display: flex;
  flex-direction: column;
  gap: var(--yc-space-xs);
}

.yc-alertcfg__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-space-md);
  padding: 10px var(--yc-space-md);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-node);
  background: var(--yc-surface);
  cursor: pointer;
  transition: border-color var(--yc-transition), background var(--yc-transition);
}
.yc-alertcfg__row:hover { border-color: var(--yc-primary); background: var(--yc-primary-light); }

.yc-alertcfg__rowlabel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--yc-text-sm);
  font-weight: 500;
  color: var(--yc-text-primary);
  min-width: 0;
}

.yc-alertcfg__hint {
  font-size: var(--yc-text-xs);
  font-weight: 400;
  color: var(--yc-text-muted);
  line-height: 1.4;
}

.yc-alertcfg__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-space-sm);
  font-size: var(--yc-text-sm);
  color: var(--yc-text-secondary);
}
.yc-alertcfg__field > span {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

/* 组内独立数值行（如巡检间隔）：与开关行同款卡片化 */
.yc-alertcfg__group > .yc-alertcfg__field {
  padding: 10px var(--yc-space-md);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-node);
  background: var(--yc-surface);
}

.yc-alertcfg__num {
  flex: 0 0 96px;
  width: 96px;
  padding: 6px 10px;
  min-height: 36px;
  font-variant-numeric: tabular-nums;
}

.yc-alertcfg__subhead {
  margin: var(--yc-space-lg) 0 var(--yc-space-sm);
  font-family: var(--yc-font-display);
  font-size: var(--yc-text-sm);
  font-weight: 600;
  color: var(--yc-text-primary);
}

/* 规则卡：settings.js 用同一 class 作卡容器(div)与列表内规则名(span)，
   卡样式限定在配置区 .yc-alertcfg__config 内，避免串样 */
.yc-alertcfg__config .yc-alertcfg__rule {
  display: block;
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-node);
  background: var(--yc-bg);
  margin-bottom: var(--yc-space-sm);
  overflow: hidden;
}

.yc-alertcfg__rulehead {
  display: flex;
  align-items: center;
  gap: var(--yc-space-sm);
  padding: 10px var(--yc-space-md);
  border-bottom: 1px solid var(--yc-border);
  background: var(--yc-surface);
}

.yc-alertcfg__rulename {
  flex: 1;
  min-width: 0;
  font-size: var(--yc-text-sm);
  font-weight: 600;
  color: var(--yc-text-primary);
  overflow-wrap: anywhere;
}

.yc-alertcfg__sev {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-space-xs);
  font-size: var(--yc-text-xs);
  color: var(--yc-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.yc-alertcfg__select {
  width: auto;
  min-height: 32px;
  padding: 4px 8px;
  font-size: var(--yc-text-xs);
}

.yc-alertcfg__rulebody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--yc-space-sm) var(--yc-space-md);
  padding: var(--yc-space-sm) var(--yc-space-md);
}

.yc-alertcfg__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--yc-space-md);
}

/* 严重度徽章（背景用 color-mix 从 token 派生，旧内核回退 primary-light） */
.yc-alertcfg__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: var(--yc-text-xs);
  font-weight: 600;
  line-height: 16px;
  background: var(--yc-primary-light);
  color: var(--yc-primary);
  flex-shrink: 0;
}
.yc-alertcfg__badge--info { background: var(--yc-primary-light); color: var(--yc-primary); }
.yc-alertcfg__badge--warning {
  background: color-mix(in srgb, var(--yc-warning) 16%, var(--yc-surface));
  color: var(--yc-warning);
}
.yc-alertcfg__badge--critical {
  background: color-mix(in srgb, var(--yc-danger) 14%, var(--yc-surface));
  color: var(--yc-danger);
}

/* 最近告警列表 */
.yc-alertcfg__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--yc-space-sm);
}

.yc-alertcfg__item {
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-node);
  background: var(--yc-bg);
  padding: var(--yc-space-sm) var(--yc-space-md);
}

.yc-alertcfg__itemhead {
  display: flex;
  align-items: center;
  gap: var(--yc-space-sm);
  flex-wrap: wrap;
}

.yc-alertcfg__rule {
  font-size: var(--yc-text-sm);
  font-weight: 500;
  color: var(--yc-text-primary);
}
.yc-alertcfg__itemhead .yc-alertcfg__rule { flex: 1; min-width: 120px; }

.yc-alertcfg__state {
  font-size: var(--yc-text-xs);
  color: var(--yc-text-secondary);
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  padding: 1px 8px;
  border-radius: 10px;
}

.yc-alertcfg__time {
  margin-left: auto;
  font-size: var(--yc-text-xs);
  color: var(--yc-text-muted);
  font-variant-numeric: tabular-nums;
}

.yc-alertcfg__msg {
  margin-top: var(--yc-space-xs);
  font-size: var(--yc-text-sm);
  color: var(--yc-text-secondary);
  overflow-wrap: anywhere;
}

/* 用户下拉 */
.yc-user-menu { position: relative; }

.yc-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--yc-space-sm);
  padding: 6px 12px;
  border-radius: var(--yc-radius-btn);
  border: 1px solid var(--yc-border);
  background: var(--yc-surface);
  cursor: pointer;
  font-size: var(--yc-text-sm);
  min-height: 44px;
  white-space: nowrap;
  transition: all var(--yc-transition);
}

.yc-user-menu__trigger:hover { border-color: var(--yc-primary); }
.yc-user-menu__trigger svg { width: 16px; height: 16px; flex: 0 0 auto; }
.yc-user-menu__trigger:focus-visible { outline: none; box-shadow: var(--yc-focus-ring); }

.yc-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-node);
  box-shadow: var(--yc-shadow-hover);
  min-width: 180px;
  padding: var(--yc-space-xs) 0;
  display: none;
  z-index: 200;
}

.yc-user-menu__dropdown--open { display: block; }

.yc-user-menu__item {
  display: block;
  width: 100%;
  padding: 10px var(--yc-space-md);
  border: none;
  background: none;
  text-align: left;
  font-size: var(--yc-text-sm);
  color: var(--yc-text-secondary);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--yc-transition);
}

.yc-user-menu__item:hover { background: var(--yc-primary-light); color: var(--yc-primary); }
.yc-user-menu__item:focus-visible { outline: none; box-shadow: var(--yc-focus-ring); }

/* === 卡片 === */
.yc-card {
  background: var(--yc-surface);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-card);
  box-shadow: var(--yc-shadow);
  padding: var(--yc-space-lg);
  transition: box-shadow var(--yc-transition);
}

.yc-card:hover { box-shadow: var(--yc-shadow-hover); }

.yc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yc-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--yc-space-md);
}

/* T141：卡片头动作区兜底——头部按钮不参与 flex 收缩（配合 header 自身 wrap+gap）。 */
.yc-card__header .yc-btn { flex: 0 0 auto; }

.yc-card__title {
  font-family: var(--yc-font-display);
  font-size: var(--yc-text-lg);
  font-weight: 600;
}

/* === 按钮 === */
/* T141：组件级防竖排换行——图标显式定尺且不收缩（见下方 .yc-btn > svg），
   标签 nowrap（CJK 逐字断行即由此杜绝），宽度随内容自适应；
   作为 flex 子项时 min-width:fit-content 保证不被父容器压到内容宽度以下。 */
.yc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yc-space-sm);
  padding: 10px 20px;
  border-radius: var(--yc-radius-btn);
  font-size: var(--yc-text-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--yc-transition);
  min-height: 44px;
  width: auto;
  min-width: fit-content;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

/* T141：按钮内联 SVG 以 em 相对定尺（随按钮字号缩放）+ 不收缩；
   icon-only 按钮保持方形（.yc-btn--icon 另覆 min-width）。 */
.yc-btn > svg {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}

/* T141：标签显式 span（匿名 flex 文本项更易被挤压），nowrap 杜绝 CJK 逐字竖排。 */
.yc-btn__label { white-space: nowrap; }

.yc-btn:focus-visible { outline: none; box-shadow: var(--yc-focus-ring); }
.yc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.yc-btn--primary {
  background: var(--yc-primary);
  color: #fff;
}
.yc-btn--primary:hover:not(:disabled) { background: var(--yc-primary-hover); }

.yc-btn--secondary {
  background: var(--yc-surface);
  color: var(--yc-text-secondary);
  border: 1px solid var(--yc-border);
}
.yc-btn--secondary:hover:not(:disabled) { border-color: var(--yc-primary); color: var(--yc-primary); }

.yc-btn--danger { background: var(--yc-danger); color: #fff; }
.yc-btn--danger:hover:not(:disabled) { background: #DC2626; }

.yc-btn--ghost {
  background: transparent;
  color: var(--yc-text-secondary);
}
.yc-btn--ghost:hover:not(:disabled) { background: var(--yc-primary-light); color: var(--yc-primary); }

.yc-btn--sm { padding: 6px 12px; font-size: var(--yc-text-xs); min-height: 36px; min-width: 44px; }
.yc-btn--icon { padding: 10px; min-width: 44px; }

/* === 表单 === */
.yc-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-btn);
  font-size: var(--yc-text-base);
  color: var(--yc-text-primary);
  background: var(--yc-surface);
  transition: border-color var(--yc-transition), box-shadow var(--yc-transition);
  min-height: 44px;
}

.yc-input:focus {
  outline: none;
  border-color: var(--yc-primary);
  box-shadow: var(--yc-focus-ring);
}

.yc-input:disabled { background: var(--yc-bg); opacity: 0.6; cursor: not-allowed; }
.yc-input--error { border-color: var(--yc-danger); }

.yc-label {
  display: block;
  font-size: var(--yc-text-sm);
  font-weight: 500;
  color: var(--yc-text-secondary);
  margin-bottom: var(--yc-space-xs);
}

.yc-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-btn);
  font-size: var(--yc-text-base);
  color: var(--yc-text-primary);
  background: var(--yc-surface);
  min-height: 44px;
  cursor: pointer;
}

.yc-select:focus { outline: none; border-color: var(--yc-primary); box-shadow: var(--yc-focus-ring); }
.yc-select:disabled { background: var(--yc-bg); opacity: 0.6; cursor: not-allowed; }

/* === 模态框 === */
.yc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--yc-space-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--yc-transition);
}

.yc-modal-overlay--open { opacity: 1; visibility: visible; }

.yc-modal {
  background: var(--yc-surface);
  border-radius: var(--yc-radius-card);
  box-shadow: var(--yc-shadow-hover);
  width: 100%;
  max-width: 440px;
  padding: var(--yc-space-xl);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--yc-transition);
}

.yc-modal-overlay--open .yc-modal { transform: scale(1) translateY(0); }

.yc-modal__title {
  font-family: var(--yc-font-display);
  font-size: var(--yc-text-xl);
  font-weight: 700;
  margin-bottom: var(--yc-space-sm);
}

.yc-modal__body { color: var(--yc-text-secondary); margin-bottom: var(--yc-space-lg); }

.yc-modal__actions {
  display: flex;
  gap: var(--yc-space-sm);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* === 空状态 / 加载 / 错误 === */
.yc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--yc-space-2xl);
  color: var(--yc-text-muted);
  text-align: center;
  gap: var(--yc-space-md);
}

.yc-empty__icon { width: 48px; height: 48px; opacity: 0.4; }
.yc-empty__text { font-size: var(--yc-text-sm); }

.yc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--yc-space-xl);
}

.yc-loading__spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--yc-border);
  border-top-color: var(--yc-primary);
  border-radius: 50%;
  animation: yc-spin 0.8s linear infinite;
}

@keyframes yc-spin { to { transform: rotate(360deg); } }

.yc-error-box {
  padding: var(--yc-space-md);
  border-radius: var(--yc-radius-node);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  font-size: var(--yc-text-sm);
}

.yc-success-box {
  padding: var(--yc-space-md);
  border-radius: var(--yc-radius-node);
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-size: var(--yc-text-sm);
}

/* === 表格 === */
.yc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--yc-text-sm);
}

.yc-table th {
  text-align: left;
  padding: 12px var(--yc-space-md);
  border-bottom: 2px solid var(--yc-border);
  font-weight: 600;
  color: var(--yc-text-secondary);
  font-size: var(--yc-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.yc-table td {
  padding: 12px var(--yc-space-md);
  border-bottom: 1px solid var(--yc-border);
  color: var(--yc-text-primary);
}

.yc-table tr:hover td { background: var(--yc-primary-light); }

/* === 标签/状态 === */
.yc-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--yc-text-xs);
  font-weight: 500;
}

.yc-tag--success { background: #ECFDF5; color: #065F46; }
.yc-tag--warning { background: #FFFBEB; color: #92400E; }
.yc-tag--danger { background: #FEF2F2; color: #991B1B; }
.yc-tag--info { background: var(--yc-primary-light); color: var(--yc-primary); }
.yc-tag--muted { background: #F1F5F9; color: var(--yc-text-muted); }

/* === KPI 数字 === */
.yc-kpi {
  font-family: var(--yc-font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--yc-text-3xl);
  font-weight: 700;
  color: var(--yc-text-primary);
}

/* === 移动端汉堡菜单 === */
.yc-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--yc-radius-sm);
}

.yc-mobile-toggle:focus-visible { box-shadow: var(--yc-focus-ring); }
.yc-mobile-toggle svg { width: 24px; height: 24px; }

/* === 响应式 === */
@media (max-width: 1280px) {
  :root { --yc-sidebar-w: 220px; }
}

@media (max-width: 768px) {
  .yc-sidebar {
    transform: translateX(-100%);
    width: 280px;
    box-shadow: var(--yc-shadow-hover);
  }
  .yc-sidebar--open { transform: translateX(0); }
  .yc-main { margin-left: 0; }
  .yc-mobile-toggle { display: flex; }
  .yc-content { padding: var(--yc-space-md); }
  .yc-topbar { padding: 0 var(--yc-space-md); }
  .yc-alert-banner { padding: var(--yc-space-sm) var(--yc-space-md); gap: var(--yc-space-xs); }
  .yc-alert-banner__ack { padding: 6px 10px; }
  .yc-alertcfg__rulehead { flex-wrap: wrap; }
  .yc-alertcfg__time { margin-left: 0; width: 100%; }
  .yc-alertcfg__rulebody { grid-template-columns: 1fr; }
}

/* T141：窄屏顶栏防挤兑——标题/徽章省略号收缩，用户按钮收为图标（aria-label 兜底），
   杜绝触发器标签逐字竖排；不裁切任何按钮本体。 */
@media (max-width: 480px) {
  .yc-topbar__left, .yc-topbar__right { min-width: 0; }
  .yc-topbar__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .yc-topbar__badge {
    min-width: 0;
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .yc-user-menu__trigger { padding: 6px 10px; min-width: 44px; justify-content: center; }
  .yc-user-menu__trigger span { display: none; }
}

@media (max-width: 375px) {
  :root {
    --yc-text-3xl: 1.5rem;
    --yc-text-2xl: 1.25rem;
    --yc-text-xl: 1.125rem;
  }
  .yc-content { padding: var(--yc-space-sm); }
  .yc-card { padding: var(--yc-space-md); border-radius: var(--yc-radius-node); }
  .yc-modal { padding: var(--yc-space-lg); }
}

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

.yc-login__card {
  width: 100%;
  max-width: 400px;
  background: var(--yc-surface);
  border-radius: var(--yc-radius-card);
  box-shadow: var(--yc-shadow-hover);
  padding: var(--yc-space-2xl);
}

.yc-login__brand {
  text-align: center;
  margin-bottom: var(--yc-space-xl);
}

.yc-login__logo {
  width: 48px;
  height: 48px;
  background: var(--yc-gradient);
  border-radius: var(--yc-radius-node);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--yc-space-md);
}

.yc-login__logo svg { stroke: #fff; width: 24px; height: 24px; }

.yc-login__title {
  font-family: var(--yc-font-display);
  font-size: var(--yc-text-2xl);
  font-weight: 700;
}

.yc-login__subtitle {
  font-size: var(--yc-text-sm);
  color: var(--yc-text-muted);
  margin-top: var(--yc-space-xs);
}

.yc-login__form { display: flex; flex-direction: column; gap: var(--yc-space-md); }

.yc-login__error {
  padding: var(--yc-space-sm) var(--yc-space-md);
  border-radius: var(--yc-radius-sm);
  background: #FEF2F2;
  color: #991B1B;
  font-size: var(--yc-text-sm);
  display: none;
}

.yc-login__error--show { display: block; }

/* === 开发中占位 === */
.yc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: var(--yc-space-md);
  color: var(--yc-text-muted);
}

.yc-placeholder__icon { width: 64px; height: 64px; opacity: 0.3; }
.yc-placeholder__title { font-size: var(--yc-text-xl); font-weight: 600; color: var(--yc-text-secondary); }
.yc-placeholder__desc { font-size: var(--yc-text-sm); max-width: 400px; text-align: center; }

/* === 通知条 === */
.yc-toast {
  position: fixed;
  top: var(--yc-space-lg);
  right: var(--yc-space-lg);
  z-index: 2000;
  padding: var(--yc-space-md) var(--yc-space-lg);
  border-radius: var(--yc-radius-node);
  box-shadow: var(--yc-shadow-hover);
  font-size: var(--yc-text-sm);
  transform: translateX(120%);
  transition: transform 0.3s ease;
}

.yc-toast--show { transform: translateX(0); }
.yc-toast--success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.yc-toast--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.yc-toast--info { background: var(--yc-primary-light); color: var(--yc-primary); border: 1px solid #BFDBFE; }

/* === 可访问性 === */
/* T113-High#5: Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--yc-primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  border-radius: 0 0 var(--yc-radius-sm) 0;
  font-weight: 500;
  transition: top var(--yc-transition);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--yc-primary);
  outline-offset: -3px;
}

.skip-link:focus-visible {
  outline: 3px solid var(--yc-primary);
  outline-offset: -3px;
}
.yc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--yc-primary); outline-offset: 2px; }

/* T113-Medium#6: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 横向滚动防护 === */
html, body { overflow-x: hidden; max-width: 100vw; }

/* === T126-Kim-M5: admin 页 inline style 抽象 class（禁 inline，全走 token） === */
.yc-admin__layout { display: flex; flex-direction: column; gap: var(--yc-space-lg); }
.yc-admin__form-group { display: flex; flex-direction: column; gap: 12px; }
.yc-admin__hint { font-size: var(--yc-text-xs); color: var(--yc-text-muted); margin-top: var(--yc-space-xs); }
.yc-admin__code { font-size: var(--yc-text-xs); }
.yc-admin__nowrap { white-space: nowrap; }
/* === T126-Kim-C1: 死信队列卡片 === */
.yc-admin__dl-actions { display: flex; gap: var(--yc-space-sm); }
.yc-admin__dl-error { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===========================================================================
   ★T143：第三方开户向导 / 交接卡 / 口令揭示 / 凭证分段录入
   铁律：只用已有 token，不新造色板；按钮一律沿用 .yc-btn 体系（#141 规范）。
   =========================================================================== */

/* 宽模态（交接卡/凭证表单内容较长） */
.yc-modal--wide { max-width: 620px; }

/* 表格行内多按钮：允许换行但每个按钮自身不换行（沿用 #141） */
.yc-admin__row-actions { display: flex; flex-wrap: wrap; gap: var(--yc-space-sm); }

/* --- 向导步骤条 --- */
.yc-admin__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc-space-sm);
  list-style: none;
  margin: 0 0 var(--yc-space-md);
  padding: 0;
}
.yc-admin__step {
  display: inline-flex;
  align-items: center;
  gap: var(--yc-space-xs);
  padding: 4px 10px;
  border: 1px solid var(--yc-border);
  border-radius: 999px;
  background: var(--yc-surface);
  color: var(--yc-text-muted);
  font-size: var(--yc-text-xs);
}
.yc-admin__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yc-border);
  color: var(--yc-text-secondary);
  font-size: var(--yc-text-xs);
  font-weight: 600;
  flex: 0 0 auto;
}
.yc-admin__step-name { white-space: nowrap; }
.yc-admin__step.is-active {
  border-color: var(--yc-primary);
  background: var(--yc-primary-light);
  color: var(--yc-primary);
  font-weight: 600;
}
.yc-admin__step.is-active .yc-admin__step-num { background: var(--yc-primary); color: #fff; }
.yc-admin__step.is-done { border-color: var(--yc-success); color: #065F46; background: #ECFDF5; }
.yc-admin__step.is-done .yc-admin__step-num { background: var(--yc-success); color: #fff; }

/* --- 向导面板 --- */
.yc-admin__wiz-pane { display: flex; flex-direction: column; gap: var(--yc-space-md); }
.yc-admin__wiz-actions { display: flex; flex-wrap: wrap; gap: var(--yc-space-sm); justify-content: flex-end; }
.yc-admin__wiz-created { font-size: var(--yc-text-sm); color: var(--yc-text-secondary); margin: 0; }
.yc-admin__req { color: var(--yc-danger); font-size: var(--yc-text-xs); }
.yc-admin__opt { color: var(--yc-text-muted); font-size: var(--yc-text-xs); }

/* --- 凭证分段字段 --- */
.yc-admin__cred-fields { display: flex; flex-direction: column; gap: 12px; }
.yc-admin__field { display: flex; flex-direction: column; gap: var(--yc-space-xs); }

/* --- 交接卡键值表 --- */
.yc-admin__kv { margin: 0; }
.yc-admin__kv-row {
  display: grid;
  grid-template-columns: minmax(88px, 132px) 1fr;
  gap: var(--yc-space-sm);
  padding: 6px 0;
  border-bottom: 1px dashed var(--yc-border);
}
.yc-admin__kv-row:last-child { border-bottom: 0; }
.yc-admin__kv-row dt { color: var(--yc-text-muted); font-size: var(--yc-text-sm); }
.yc-admin__kv-row dd {
  margin: 0;
  color: var(--yc-text-primary);
  font-size: var(--yc-text-sm);
  overflow-wrap: anywhere;
}

/* --- 口令揭示（交接卡内 / 独立揭示模态共用）--- */
.yc-admin__pwd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yc-space-sm);
  margin-top: var(--yc-space-md);
  padding: var(--yc-space-sm) var(--yc-space-md);
  background: var(--yc-primary-light);
  border: 1px solid var(--yc-border);
  border-radius: var(--yc-radius-sm);
}
.yc-admin__pwd {
  font-family: var(--yc-font-mono);
  font-size: var(--yc-text-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--yc-text-primary);
  overflow-wrap: anywhere;
  user-select: all;
}
.yc-admin__reveal-user { font-size: var(--yc-text-sm); color: var(--yc-text-secondary); margin: 0 0 var(--yc-space-sm); }
/* 仅显示一次的红字提示：不用内联 style，走 class + token */
.yc-admin__danger-note {
  margin: 0 0 var(--yc-space-sm);
  padding: var(--yc-space-sm) var(--yc-space-md);
  border-left: 3px solid var(--yc-danger);
  background: #FEF2F2;
  color: #991B1B;
  font-size: var(--yc-text-sm);
  font-weight: 600;
}

/* 窄屏：键值表转单列，按钮组左对齐，避免挤压换行 */
@media (max-width: 640px) {
  .yc-modal--wide { max-width: 100%; }
  .yc-admin__kv-row { grid-template-columns: 1fr; gap: 2px; }
  .yc-admin__wiz-actions { justify-content: flex-start; }
  .yc-admin__step-name { font-size: var(--yc-text-xs); }
}