/* ==========================================================================
   Cloud Control 设计系统（global.css）—— 全站唯一公共样式源
   依据：server/docs/UI改版设计规范-2026-11.md §1–§4（第一轮唯一标准）
         server/docs/UI深化规范-2026-11.md（第二阶段深化唯一标准，冲突时以深化规范为准）
   基调：Linear / Vercel Geist 式深色控制台——近黑底 + 靛蓝→紫渐变唯一强调色，
   层次靠「表面明度 + 1px 发丝边框 + 顶部内嵌高光 + 柔和投影」表达。
   浅色主题：:root[data-theme="light"] 全量覆盖同名令牌（theme.js 驱动，深色为默认）。

   结构：
     1. 设计令牌（:root 深色全量 + 兼容别名 + 衍生 rgba 桥令牌）
     1b. 浅色主题（:root[data-theme="light"] 同名覆盖）
     2. 基础重置与全局元素（滚动条 / 焦点环 / 选区 / 裸表单基线）
     3. 公共组件：.btn / .card(.panel) / .table / .form-* / .badge / .modal
                 / .toast / .notice / .skeleton / .empty-state
     4. 统一顶部导航 .nav
     5. 页面容器与通用工具类（分页 / 响应式触控目标）
     5b. 深化增量（第二阶段）：本地可变字体 + 字号阶梯工具类 + 招牌组件 + 反馈补齐
         （深化规范 §1–§4；新增类均为纯增量装饰钩子，既有类名/令牌一个不改）
     6. 遗留兼容：.hud-btn（device.html 在用）、.capture-fault（control/frame.js 在用）
     7. prefers-reduced-motion 汇总

   兼容性约定（铁律）：
     - 令牌定义行（--xxx: 开头）之外不得出现裸 hex；组件区颜色一律 var() /
       rgba(var(--danger-rgb) 等语义色 rgb 令牌, 透明度) / transparent / currentColor。
     - 滚动条只用 ::-webkit-scrollbar* 自定义；禁止使用会造成 Chrome 121+
       忽略 webkit 滚动条规则（双滚动条）的标准属性简写（上轮已踩坑，此处连注释
       都不写其字面量，避免门禁 grep 误伤）。
     - 旧类名（.hud-btn / .capture-fault / .toast--ok / .badge--muted 等）一个不改；
       新增类（.panel / .skeleton / .empty-state* / .badge--primary / .badge--error）
       均为纯增量装饰钩子。
     - 旧变量别名（--cyan / --magenta / --card-bg / --text-dim / --panel-bg-hover
       / --primary-border 等）全部保留，映射到新令牌——尚未迁移的页面不散架。
     - 新增令牌与规范 §2 的关系：§2 全量照抄；--bg-active / --*-rgb / --backdrop /
       --scrollbar-thumb(-hover) 为本轮衍生桥令牌（供组件区 rgba 引用与深浅覆盖）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 本地可变字体（深化规范 §1）
   Inter 变量字体（字重 100–900，OFL 许可）已就位于 /fonts/，拉丁字符与数字
   命中本地文件，中文自然回退 --font-sans 的系统黑体栈；font-display: swap
   避免首帧文字闪白。全站唯一字体声明，其余页面直接用。
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. 设计令牌（深色为默认）
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ---- 背景：三层深度 ---- */
  --bg-base: #0a0e13;          /* 页面底：深空蓝黑 */
  --bg-sunken: #070a0f;        /* 更深的凹陷区（表格头、代码块、轨道） */
  --bg-elevated: #10161e;      /* 卡片 / 面板 */
  --bg-hover: #161d27;         /* 行悬浮、按钮悬浮底 */
  --bg-input: #0f141c;         /* 输入框底 */
  --bg-active: #1e2836;        /* 按压态表面（衍生，供 --panel-bg-active 别名） */
  --panel-bg: #10131a;         /* 兼容别名 = --bg-elevated */
  --panel-bg-hover: var(--bg-hover);
  --panel-bg-active: var(--bg-active);

  /* ---- 玻璃拟态（导航 / 浮层 / toast） ---- */
  --bg-glass: rgba(13, 18, 26, 0.74);
  --backdrop-blur: 14px;

  /* ---- 边框 ---- */
  --border-faint: rgba(255, 255, 255, 0.06);   /* 发丝内高光/分隔 */
  --panel-border: #1b222d;
  --panel-border-strong: #2a3442;
  --border-glow: var(--panel-border-strong);   /* 兼容别名 */

  /* ---- 文本（三档灰阶 + 高亮） ---- */
  --text-main: #edf2f8;
  --text-regular: #a9b6c7;
  --text-secondary: #8b93a5;   /* 兼容别名（语义同 --text-regular） */
  --text-muted: #6f8199;   /* V2: 4.6:1 on card，修复 3.4:1 对比度不足 */
  --text-strong: var(--text-main);   /* 兼容别名 */
  --text-dim: var(--text-muted);     /* 兼容别名（JS 空态文案在用，勿删） */
  --text-main-legacy: var(--text-main);  /* 兼容别名 */

  /* ---- 强调：信号青（全站唯一彩色系，与移动端品牌统一） ---- */
  --primary: #22d3ee;
  --primary-hover: #5fe3f6;
  --primary-active: #14a8c8;
  --primary-rgb: 34, 211, 238;
  --primary-soft: rgba(34, 211, 238, 0.13);    /* 激活项底色、选中态 */
  --primary-ring: rgba(34, 211, 238, 0.45);
  --primary-border: var(--primary-ring);       /* 兼容别名 */
  --accent-gradient: linear-gradient(180deg, #2ad4f0 0%, #1cb9dd 100%);
  --text-on-primary: #062029;   /* 青底上的深色文字（≈9:1） */

  /* ---- 状态（Linear 系鲜而不艳；块用 -soft 底，文字用 -text） ---- */
  --success: #34d399;
  --success-text: #6ee7b7;
  --success-soft: rgba(52, 211, 153, 0.13);
  --success-rgb: 52, 211, 153;
  --warning: #fbbf24;
  --warning-text: #fcd34d;
  --warning-soft: rgba(251, 191, 36, 0.13);
  --warning-rgb: 251, 191, 36;
  --danger: #f87171;
  --danger-text: #fca5a5;
  --danger-soft: rgba(248, 113, 113, 0.13);
  --danger-rgb: 248, 113, 113;
  --danger-hover: var(--danger-text);   /* 兼容别名（app-nav.css 在用） */
  --info: #60a5fa;
  --info-text: #93c5fd;
  --info-rgb: 96, 165, 250;

  /* ---- 字体（§3）：无外部字体，纯系统栈 ---- */
  --font-sans: "Inter", "SF Pro Display", -apple-system, "Segoe UI Variable Display",
    "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI",
    "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
  --font-display: var(--font-sans);   /* 兼容别名 */
  --font-body: var(--font-sans);      /* 兼容别名 */

  /* ---- 字号（base 14，结构令牌沿用旧值，各页标题层级见规范 §3） ---- */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 26px;

  /* ---- 圆角：控件 8 / 卡片 14 / 大浮层 18 ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---- 投影：柔和多层 + 卡片顶部内嵌高光 ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 40px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 64px -16px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 4px 16px -4px rgba(34, 211, 238, 0.28);
  --card-highlight: inset 0 1px 0 var(--border-faint);   /* 配合 border 用 */

  /* ---- 间距（4 的倍数） / 层级 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- 动效：统一曲线，fast 用于 hover/press，普通用于展开/弹窗 ---- */
  --transition-fast: 0.12s cubic-bezier(0.2, 0, 0, 1);
  --transition: 0.18s cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---- 焦点环：键盘可达性的统一表达（双层：底色断开 + 主色环） ---- */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--primary-ring);

  /* ---- 遮罩 / 滚动条（衍生令牌：深浅两套各自覆盖） ---- */
  --backdrop: rgba(4, 5, 8, 0.6);                 /* 弹窗遮罩 */
  --scrollbar-thumb: rgba(255, 255, 255, 0.14);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.26);

  --topbar-h: 56px; /* 统一导航高度 */
  --z-nav: 100;     /* 导航层级：低于 .modal(1000) 与 .toast-container(9999) */

  /* ---- 兼容旧变量名（旧样式过渡用，新代码禁用） ---- */
  --cyan: var(--primary);
  --magenta: var(--danger);
  --card-bg: var(--panel-bg);
  --card-border: var(--panel-border);
  --accent: var(--success);

  /* ---- 深化增量令牌（第二阶段，深化规范 §1–§3） ---- */
  /* 字号阶梯：全站排版对齐基准（新组件规则一律引用本组，不再散写字号） */
  --fs-display: 26px;      /* 登录标题 / 页面主数字 */
  --lh-display: 1.15;
  --ls-display: -0.02em;
  --fs-h1: 20px;           /* 页面主标题 */
  --lh-h1: 1.25;
  --ls-h1: -0.01em;
  --fs-h2: 16px;           /* 卡片 / 区块标题 */
  --lh-h2: 1.35;
  --ls-h2: -0.01em;
  --fs-h3: 14px;           /* 小节标题 */
  --lh-h3: 1.45;
  --ls-h3: -0.01em;
  --fs-body: 14px;         /* 正文 / 表格 / 按钮 */
  --lh-body: 1.6;
  --fs-secondary: 13px;    /* 辅助说明 */
  --lh-secondary: 1.5;
  --fs-caption: 12px;      /* 徽标 / 时间戳 / 表头 */
  --lh-caption: 1.4;
  --fs-micro: 11px;        /* 大写微标签 */
  --lh-micro: 1.4;
  --ls-micro: 0.08em;

  /* 招牌效果桥令牌：--accent-rgb 为品牌渐变第二色（青→蓝同相）的 rgb 通道 */
  --accent-rgb: 59, 130, 246;
  /* 渐变描边（原紫色装饰弱化为青蓝发丝级，浅色主题换淡，见 1b） */
  --signature-gradient: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.30), rgba(var(--accent-rgb), 0.10), rgba(var(--primary-rgb), 0.20));
  --signature-gradient-soft: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.16), rgba(var(--accent-rgb), 0.06), rgba(var(--primary-rgb), 0.10));
  --signature-fill: var(--bg-elevated);   /* 描边内层填充，消费者可局部改写 */
  /* 外层辉光：hover 细 ring + 轻光晕（控制台克制版） */
  --glow-ring: 0 0 0 1px rgba(var(--primary-rgb), 0.16);
  --glow-halo: 0 12px 32px -8px rgba(var(--primary-rgb), 0.14);
  /* Aurora 底光：V2 设计弃用装饰光斑（令牌保留避免散落引用散架） */
  --aurora-alpha-a: 0;
  --aurora-alpha-b: 0;
}

/* --------------------------------------------------------------------------
   1b. 浅色主题（同名变量全量覆盖；theme.js 在首帧前置 data-theme="light"）

   配色取向：**暖中性**（warm neutral），不是纯白。
   早先这套是冷灰 #f4f5f8 + 卡片纯白 #ffffff，亮度接近 96–100%，长时间盯屏刺眼；
   同时 --text-muted 用 #8b93a5 压在纯白上只有 3.1:1 对比度（低于 WCAG AA 的 4.5），
   表头 / 时间戳 / 占位符这类小字「看得见但读不出」—— 这就是「字体看不清」的直接原因。

   这一版做两件事：
     1. 整体降亮并加一点暖调 —— 页面底 91%、卡片 96%，不再有纯白面。
        暖调与靛蓝主色同明度互补，不会像米黄那样显旧。
     2. 文字三档统一加深 —— muted 从 3.1:1 提到 5.2:1，正文 8.6:1，小字也读得清。

   所有值仍是令牌定义行，组件区继续只用 var()，换主题不需要改任何组件。
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  /* ---- 背景：暖中性四层（不再出现纯白面） ---- */
  --bg-base: #e9e6e1;          /* 页面底：暖浅灰，亮度 ~91% */
  --bg-sunken: #e8e4dd;        /* 凹陷区（代码块、表头、轨道）：只比卡片深一档，
                                  压太深（原来的 #e0dcd5）会让表头在卡片上显脏 */
  --bg-elevated: #f6f4ef;      /* 卡片 / 面板：象牙白 ~96% */
  --bg-hover: #eeebe5;         /* 行悬浮 */
  --bg-input: #efece6;         /* 输入框底 */
  --bg-active: #e4e1da;        /* 按压态 */
  --panel-bg: #f6f4ef;
  --panel-bg-hover: var(--bg-hover);
  --panel-bg-active: var(--bg-active);

  --bg-glass: rgba(246, 244, 239, 0.82);

  /* ---- 边框：暖灰，避免冷灰压在暖底上发脏 ---- */
  --border-faint: rgba(41, 35, 26, 0.07);
  --panel-border: #d9d4cb;
  --panel-border-strong: #bdb6a9;

  /* ---- 文本：三档全部加深到可读区间（muted 在所有底色上都 ≥ 4.5:1） ---- */
  --text-main: #201d18;        /* 13.9:1 on base */
  --text-regular: #4c473e;     /* 8.4:1 on card */
  --text-secondary: #615c52;
  --text-muted: #615c52;       /* 6.0:1 on card / 4.9:1 on sunken（原 #8b93a5 只有 3.1） */

  /* ---- 主色：信号青的浅色深化档，白字 4.6:1、青字压暖底 4.9:1 ---- */
  --primary: #0e7490;
  --primary-hover: #0c5f73;
  --primary-active: #0a5061;
  --primary-rgb: 14, 116, 144;
  --primary-soft: rgba(14, 116, 144, 0.10);
  --primary-ring: rgba(14, 116, 144, 0.38);
  --text-on-primary: #ffffff;
  --accent-gradient: linear-gradient(180deg, #10809e 0%, #0e7490 100%);   /* 浅色：与主色同相位的深化渐变 */

  /* 状态文字在浅色下用更深的可读变体（都按「压在页面底上也 ≥4.5:1」选值） */
  --success: #157a52;
  --success-text: #126b47;
  --success-soft: rgba(21, 122, 82, 0.12);
  --success-rgb: 21, 122, 82;
  --warning: #a8700c;
  --warning-text: #845409;
  --warning-soft: rgba(168, 112, 12, 0.13);
  --warning-rgb: 168, 112, 12;
  --danger: #bf3038;
  --danger-text: #a0242b;
  --danger-soft: rgba(191, 48, 56, 0.11);
  --danger-rgb: 191, 48, 56;
  --info: #1d5fae;
  --info-text: #18509e;
  --info-rgb: 29, 95, 174;

  /* ---- 投影：暖灰调，压得更实一点（暖底上冷阴影会发灰） ---- */
  --shadow-sm: 0 1px 2px rgba(41, 35, 26, 0.07);
  --shadow: 0 2px 8px rgba(41, 35, 26, 0.08), 0 16px 40px -16px rgba(41, 35, 26, 0.16);
  --shadow-lg: 0 4px 16px rgba(41, 35, 26, 0.11), 0 24px 64px -16px rgba(41, 35, 26, 0.2);
  --shadow-primary: 0 4px 14px -4px rgba(14, 116, 144, 0.35);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.72);

  --backdrop: rgba(35, 30, 22, 0.34);
  --scrollbar-thumb: rgba(41, 35, 26, 0.2);
  --scrollbar-thumb-hover: rgba(41, 35, 26, 0.34);

  /* ---- 深化增量令牌（浅色覆盖）：字号阶梯与主题无关；招牌效果统一换淡 / 减半 ---- */
  --accent-rgb: 3, 105, 161;
  --signature-gradient: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.24), rgba(var(--accent-rgb), 0.08), rgba(var(--primary-rgb), 0.16));
  --signature-gradient-soft: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.14), rgba(var(--accent-rgb), 0.05), rgba(var(--primary-rgb), 0.09));
  --signature-fill: var(--bg-elevated);
  --glow-ring: 0 0 0 1px rgba(var(--primary-rgb), 0.14);
  --glow-halo: 0 12px 32px -8px rgba(var(--primary-rgb), 0.12);
  --aurora-alpha-a: 0;      /* V2 弃用装饰光斑 */
  --aurora-alpha-b: 0;

  /* --focus-ring 公式引用 var(--bg-base)/var(--primary-ring)，随主题自动适配 */
}

/* --------------------------------------------------------------------------
   2. 基础重置与全局元素
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  background: var(--bg-base);
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.6;
  /* 深化规范 §1：数字一律 tabular-nums（设备号 / 统计 / 表格 / 时间戳 / 日志）——
     在 body 上全局继承一份，这是数据控制台的排版灵魂；Inter 命中 tnum 特性 */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}

.hidden {
  display: none !important;
}

::selection {
  background: var(--primary-soft);
  color: var(--text-main);
}

/* ---- 滚动条：细、圆、悬停加深（只用 webkit 伪元素；禁用标准简写防 Chrome 121+ 双滚动条） ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---- 焦点可见性（无障碍）：统一主色双环 ---- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- 裸表单控件全局基线（类名版见 .form-input 等三件套） ---- */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-height: 36px;
  transition: border-color var(--transition), box-shadow var(--transition),
    background var(--transition);
  width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--panel-border-strong);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

/* --------------------------------------------------------------------------
   3.1 按钮 .btn（主 / 次 / 危险 / ghost / 小号）
   主按钮：靛蓝→紫渐变底，hover 亮度提升 + 抬升 + 品牌光晕；
   全部按钮三态齐全，focus-visible 统一焦点环，禁用降透明去投影。
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 550;
  line-height: 1;
  color: var(--text-main);
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast), filter var(--transition-fast);
}

/* 次要按钮（.btn 基类默认形态）：hover 换亮边框 + 悬浮底 */
.btn:hover {
  background: var(--bg-hover);
  border-color: var(--panel-border-strong);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

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

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* 主操作：靛蓝→紫渐变 + hover 抬升 + 品牌光晕 */
.btn--primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--text-on-primary);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  filter: brightness(1.08);
  /* 深化规范 §3.2：主按钮辉光「更收敛」——1px 主色外圈 ring + 品牌投影 */
  box-shadow: var(--glow-ring), var(--shadow-primary);
  transform: translateY(-1px);
}

.btn--primary:active {
  filter: brightness(0.97);
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* 危险操作：语义软底 + 状态文字，hover 加深 */
.btn--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger-text);
}

.btn--danger:hover {
  background: rgba(var(--danger-rgb), 0.22);
  color: var(--danger-text);
}

.btn--danger:active {
  background: rgba(var(--danger-rgb), 0.28);
}

/* ghost（文字按钮）：无边框，hover 才出现悬浮底 */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-regular);
}

.btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

/* 小号：表格行内 / 工具条 */
.btn--sm {
  height: 30px;
  padding: 0 12px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3.2 卡片 .card / .panel
   面板三件套：面板底 + 1px 边框 + 顶部内嵌高光 + 柔和小投影。
   .card--hover 为纯增量钩子：需要悬浮抬升的卡片自行加挂。
   -------------------------------------------------------------------------- */
.card,
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm), var(--card-highlight);
  transition: border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}

.card--hover:hover {
  border-color: var(--panel-border-strong);
  transform: translateY(-2px);
  /* 深化规范 §3.2 / §4 反馈目录：可悬浮卡片 hover = 抬升 + 外层辉光 */
  box-shadow: var(--glow-ring), var(--glow-halo), var(--card-highlight);
}

/* 深化规范 §4 反馈目录：可点卡片按下 scale(.995)，键盘聚焦外圈 ring */
.card--hover:active {
  transform: translateY(0) scale(0.995);
}

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

.card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-faint);
}

/* 区块标题：16px / 650 / 收紧字距（规范 §3） */
.card__header h2,
.card__header h3 {
  font-size: var(--font-size-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin: 0;
}

.card__body {
  /* 卡片内容区：默认无额外装饰，供表格/表单等内容直接填充 */
}

.subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* --------------------------------------------------------------------------
   3.3 数据表 .table（外层必须套 .table-wrap 以支持窄屏横滚）
   表头 micro 大写刻度（11px/600/+0.08em，深化评审 #7 全站唯一口径，
   与 scheduler/adb/node-inspector 一致）+ 凹陷底；行间发丝线；行 hover 悬浮底。
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table th,
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-faint);
  text-align: left;
  vertical-align: middle;
}

.table th {
  color: var(--text-muted);
  font-weight: 600;
  /* 表头统一 micro 大写刻度（深化评审 #7：11px/600/+0.08em；中文表头无
     大小写形态，大写变换为空操作，正字距带来的「刻度感」不受影响） */
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--bg-sunken);
  border-bottom-color: var(--panel-border);
}

.table tbody tr {
  transition: background var(--transition-fast);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.text-muted {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   3.4 表单 .form-group / .form-label / .form-input / .form-select / .form-textarea
   输入井：--bg-input 底，focus 主色边框 + 外圈 ring；label 一律 500。
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-regular);
}

.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-height: 36px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--panel-border-strong);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.form-textarea {
  min-height: 88px;
  resize: vertical;
}

/* 表单说明文字 / 勾选行 / 双列栅格 */
.form-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.form-check {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.form-check label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
}

.half-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   3.5 状态标签 .badge
   规范：*-soft 底 + *-text 字、药丸圆角、12px/600、内边距 2px 10px。
   修饰类全集（JS 字符串拼接契约，缺一不可）：
     .badge--muted / --success / --warning / --danger   （旧有）
     .badge--primary（dashboard.js 运行态）/ --error（workspace-dock.js 会话失效）
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  /* 深化规范 §4 反馈目录「徽标」行：hover 亮度 +5% 的过渡载体 */
  transition: filter var(--transition-fast);
}

.badge--muted {
  /* 与基类一致的灰色态，显式命名便于语义化 */
}

.badge--success {
  color: var(--success-text);
  background: var(--success-soft);
}

.badge--warning {
  color: var(--warning-text);
  background: var(--warning-soft);
}

.badge--danger {
  color: var(--danger-text);
  background: var(--danger-soft);
}

/* 增量补充：主色强调态（dashboard.js "运行中"） */
.badge--primary {
  color: var(--primary);
  background: var(--primary-soft);
}

/* 增量补充：error 与 danger 同语义（workspace-dock.js "会话被顶替/登录失效"） */
.badge--error {
  color: var(--danger-text);
  background: var(--danger-soft);
}

/* 深化规范 §4 反馈目录「徽标」行：hover 亮度 +5%（深化评审 #8：一处定义
   全站生效——global.css 被 8 页全部引用，:hover 规则不受 app-nav.css 的
   .badge 基类覆盖影响；index.css / logs.html 的同名 :hover 与此同值） */
.badge:hover {
  filter: brightness(1.05);
}

/* --------------------------------------------------------------------------
   3.6 弹窗 .modal（全站唯一弹窗实现）
   遮罩加深加模糊，面板 scale(.97)→1 + fade，180ms 弹性曲线。
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg), var(--card-highlight);
  animation: modal-in 0.18s var(--ease-spring);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-panel--sm {
  width: min(420px, 100%);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2); /* 关闭符号 × 字号走令牌（深化评审 #9，同 app-nav.css） */
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast), transform var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-main);
  border-color: var(--panel-border-strong);
  background: var(--bg-hover);
}

.modal-close:active {
  transform: scale(0.92);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.confirm-message {
  font-size: var(--font-size-md);
  color: var(--text-main);
}

/* --------------------------------------------------------------------------
   3.7 反馈 .toast（容器节点由各页面自带，如 index.html 的 #toastContainer）
   玻璃底 + 状态色左边条，slide-up + fade；成功/失败按语义。
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 9999;
  pointer-events: none;
}

.toast {
  padding: 10px 16px;
  font-size: var(--font-size-sm);
  color: var(--text-main);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--panel-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in 0.18s var(--ease-spring);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.toast--error {
  border-left-color: var(--danger);
  color: var(--danger-text);
}

/* 成功态：.toast--ok（users.js/app.js 旧口径）与 .toast--success
   （app-nav.js appToast 的默认类型）两种拼写都覆盖，避免成功提示退化成中性样式 */
.toast--ok,
.toast--success {
  border-left-color: var(--success);
  color: var(--success-text);
}

/* 增量补充：警告 / 信息态（纯增量装饰钩子，供页面语义化选用） */
.toast--warning {
  border-left-color: var(--warning);
  color: var(--warning-text);
}

.toast--info {
  border-left-color: var(--info);
  color: var(--info-text);
}

/* --------------------------------------------------------------------------
   3.8 通知条 .notice（soft 底 + 语义文字 + 同族淡边框）
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: var(--bg-elevated);
  color: var(--text-regular);
}

.notice--warn {
  border-color: rgba(var(--warning-rgb), 0.28);
  background: var(--warning-soft);
  color: var(--warning-text);
}

.notice--danger {
  border-color: rgba(var(--danger-rgb), 0.28);
  background: var(--danger-soft);
  color: var(--danger-text);
}

.notice--ok {
  border-color: rgba(var(--success-rgb), 0.28);
  background: var(--success-soft);
  color: var(--success-text);
}

/* --------------------------------------------------------------------------
   3.9 加载态 .skeleton（shimmer 扫光）与空状态 .empty-state（规范 §4）
   均为本轮新增的纯增量类，不影响既有 DOM。
   -------------------------------------------------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  min-height: 14px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.07), transparent);
  transform: translateX(-100%);
  /* 深化规范 §4：shimmer 扫光 1.2s 循环 */
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* 空状态：居中灰字 + 48px 内联 SVG 插图位（图标颜色走 currentColor） */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.empty-state svg,
.empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--panel-border-strong);
}

/* V2 增量：图标圆容器 + 主/副文案 + 行动区（页面按需叠加，不影响旧结构） */
.empty-state .es-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-hover);
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
}

.empty-state .es-icon svg {
  width: 24px;
  height: 24px;
}

.empty-state .es-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.empty-state .es-sub {
  font-size: var(--fs-secondary);
  color: var(--text-muted);
  margin: 0;
}

.empty-state .es-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   3.10 深化：字号阶梯工具类（深化规范 §2）
   层级三件套 = 字号 × 字重 × 灰阶，禁用下划线 / 彩色正文；标题负字距；
   .t-micro / .micro-label 是「仪表盘刻度感」大写微标签（11px/600/+0.08em），
   用于面板名、分组刻度等小标题位。
   -------------------------------------------------------------------------- */
.t-display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.t-h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: 650;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* 辅助说明口径（secondary）：13px + --text-regular */
.t-secondary {
  font-size: var(--fs-secondary);
  line-height: var(--lh-secondary);
  color: var(--text-regular);
}

/* 徽标 / 时间戳 / 表头口径（caption）：12px + --text-muted */
.t-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

/* 大写微标签：.micro-label 为语义别名（与 .t-micro 等价，按语境选用） */
.t-micro,
.micro-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   3.11 深化：招牌视觉组件（深化规范 §3）
   全站统一手法、克制使用——每页招牌效果 ≤3 处；全部走令牌，浅色主题有对应变体。
   -------------------------------------------------------------------------- */

/* ---- 3.11.1 渐变描边（§3.1，Linear 招牌技法）----
   双层背景实现 1px 渐变描边：padding-box 铺内层填充、border-box 铺边层渐变，
   不用 ::before 叠层、不占布局。直接挂在 .card / .modal-panel 等已有圆角元素上；
   内层填充默认 --bg-elevated，需要玻璃 / 软底时局部改写 --signature-fill。 */
.signature-border {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--signature-fill), var(--signature-fill)) padding-box,
    var(--signature-gradient) border-box;
}

/* 低饱和版：导航 active 药丸等小面积位置（§3.1「低饱和版」） */
.signature-border--soft {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--signature-fill), var(--signature-fill)) padding-box,
    var(--signature-gradient-soft) border-box;
}

/* ---- 3.11.2 外层辉光（§3.2）----
   可交互卡片 hover = 抬升 + 1px 主色 ring + 品牌光晕；浅色主题透明度降低。 */
.glow-hover {
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}

.glow-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-ring), var(--glow-halo);
}

.glow-hover:active {
  transform: translateY(0) scale(0.995);
}

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

/* ---- 3.11.3 Aurora 底光（§3.3）----
   登录页 / hero 区专用，严禁铺满业务区。用法：父容器 position:relative，
   .aurora 作为其首个子元素（记得 aria-hidden="true"），内容元素加
   position:relative 即可盖过光斑；两团 radial 光斑 60s 超慢漂移，
   浅色主题透明度减半（--aurora-alpha-*）。 */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;   /* 仅这两团长驻装饰动画，值得常驻合成层 */
}

/* 左上：靛蓝光斑（基础规范 §5 登录页口径） */
.aurora::before {
  top: -18%;
  left: -12%;
  background: radial-gradient(circle closest-side, rgba(var(--primary-rgb), var(--aurora-alpha-a)), transparent 72%);
  animation: aurora-drift-a 60s ease-in-out infinite alternate;
}

/* 右下：紫光斑 */
.aurora::after {
  right: -14%;
  bottom: -20%;
  background: radial-gradient(circle closest-side, rgba(var(--accent-rgb), var(--aurora-alpha-b)), transparent 72%);
  animation: aurora-drift-b 60s ease-in-out infinite alternate;
}

@keyframes aurora-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(5%, 7%, 0) scale(1.12);
  }
}

@keyframes aurora-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  to {
    transform: translate3d(-6%, -5%, 0) scale(1);
  }
}

/* ---- 3.11.4 入场动画（深化规范 §4）----
   .rise-in 挂在列表 / 卡片容器上，直接子项依次上浮入场：
   时长 260ms、stagger 递进 40ms、6 档封顶（≤240ms 上限），第 7 项起不再等待。
   纯 CSS 写死 nth-child 延迟，无需 JS 注入序号。 */
.rise-in > * {
  animation: rise-in 0.26s var(--ease-spring) both;
}

.rise-in > :nth-child(1) {
  animation-delay: 0ms;
}

.rise-in > :nth-child(2) {
  animation-delay: 40ms;
}

.rise-in > :nth-child(3) {
  animation-delay: 80ms;
}

.rise-in > :nth-child(4) {
  animation-delay: 120ms;
}

.rise-in > :nth-child(5) {
  animation-delay: 160ms;
}

.rise-in > :nth-child(6) {
  animation-delay: 200ms;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   4. 统一顶部导航 .nav（HTML 片段每页原样拷贝）
   玻璃底 + 发丝下边线，sticky；链接为药丸（hover 悬浮底），active 低饱和
   渐变描边，品牌位 36px 渐变小方标。
   深化评审 #1：方标 / 药丸描边 / 13px-500 链接口径收编进本文件——users 与
   index 两页（未引 app-nav.css）由此获得与五页一致的完整导航皮肤，消除
   「全站两套导航」；以下取值与 app-nav.css 同名规则逐字一致（五页按加载序
   以后者覆盖，值同不漂移，两处必须同步修改）。
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--topbar-h);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border-bottom: 1px solid var(--border-faint);
}

.nav-inner {
  position: relative; /* 抽屉式 .nav-links 相对它定位 */
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ---- 品牌位（深化规范 §3.5）：h2 档 16px/700 负字距 + 36px 渐变小方标 ----
   方标用 ::before 纯 CSS 绘制（不新增 DOM 节点、不动结构）；content 先给
   普通字符串兜底，再以 "/ """ 空替代文本让读屏跳过装饰字、只念品牌名
   （不支持替代文本语法的引擎自动回退上一条声明）。 */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}

/* 渐变小方标：--accent-gradient 底 + 白色「云」字 + 顶部内嵌高光；
   全站唯一「图标位」，圆角与卡片同源 */
.nav-brand::before {
  content: "云";
  content: "云" / "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--text-on-primary);
  background: var(--accent-gradient);
  border-radius: var(--radius);
  box-shadow: var(--card-highlight), var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.nav-brand:hover {
  color: var(--primary);
}

/* hover：方标 1px 主色外圈 ring + 品牌投影（深化规范 §3.2 收敛版辉光），
   克制不位移 */
.nav-brand:hover::before {
  box-shadow: var(--glow-ring), var(--shadow-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* ---- 链接药丸：secondary 档 13px/500，三态齐全（深化评审 #1 统一口径） ----
   hover = 主文案色 + --bg-hover 悬浮药丸底（深化规范 §4 交互目录
   「链接/文字按钮」行，覆盖第一轮「hover 只换文字色」口径） */
.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition),
    box-shadow var(--transition);
}

.nav-links a:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

/* 当前页高亮（V2）：主色软底药丸 + 文字底部 2px 指示线（替换旧渐变描边药丸）。
   仍排在 :hover 之后——特异性相同，靠源顺序保证悬停当前页时不丢底色。 */
.nav-links a.is-active {
  background: var(--primary-soft);
  box-shadow: inset 0 -2px 0 var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* 键盘焦点：主色双环，并保住药丸圆角（全局 :focus-visible 默认 radius-sm） */
.nav-links a:focus-visible {
  outline: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--focus-ring);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex: 0 0 auto;
}

.nav-user {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ---- 云控版本号（app-nav.js 注入到 .nav-right 的 navUser 之前） ----
   药丸样式与 .badge--primary 同族，字号对齐 nav-user；≤640px 随 nav-user 一并隐藏 */
.nav-ver {
  padding: 1px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: var(--radius-pill);
  user-select: all;
}

/* ---- 主题切换按钮（app-nav.js 注入到 .nav-right）：圆形 ghost ----
   字号取 --fs-h2 令牌（深化评审 #9：消除 15px 表外字号导致的跨页不一致） */
.nav-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast), transform var(--transition-fast);
}

.nav-theme-btn:hover {
  color: var(--text-main);
  background: var(--bg-hover);
  /* 深化规范 §4 主题钮行：hover 圆底 + 轻微旋转缩放 */
  transform: rotate(12deg) scale(1.05);
}

.nav-theme-btn:active {
  transform: scale(0.92);
}

/* 移动端：≤640px 折叠为纵向抽屉，由 app-nav.js 切换 .is-open
   三态与字号对齐 app-nav.css 同名规则（深化评审 #1/#9：折叠钮在 users/index
   等未引 app-nav.css 的页也要有完整三态，符号字号走 --fs-h2 令牌） */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--text-main);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    transform var(--transition);
}

.nav-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--panel-border-strong);
}

.nav-toggle:active {
  transform: scale(0.92);
}

.nav-toggle:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

@media (max-width: 640px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--topbar-h);
    left: calc(-1 * var(--space-4));
    right: calc(-1 * var(--space-4));
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--space-2) var(--space-3) var(--space-3);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
  }

  /* 兼容 app-nav.js 可能使用的展开类名 */
  .nav-links.is-open,
  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    height: 40px;
  }

  .nav-user,
  .nav-ver {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. 页面容器 / 分页 / 响应式触控目标
   -------------------------------------------------------------------------- */
.page-wrap {
  position: relative;   /* 锚定 .aurora 底光（深化规范 §3.3），不影响 flex 居中 */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 分页条（users.js 等生成） */
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
  width: 100%;
  flex-wrap: wrap;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text-main);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    transform var(--transition-fast);
}

.pager-btn:hover:not(:disabled) {
  border-color: var(--panel-border-strong);
  background: var(--bg-hover);
}

.pager-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pager-info {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* 375px 基线：触控目标 ≥40px（小号按钮放宽到 32px 以适配表格行内） */
@media (max-width: 640px) {
  .btn:not(.btn--sm) {
    min-height: 40px;
  }

  .btn--sm {
    min-height: 32px;
  }

  .half-grid {
    grid-template-columns: 1fr;
  }

  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
  }

  .toast {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   6. 遗留兼容（device.html / control 模块仍在引用，勿删类名）
   -------------------------------------------------------------------------- */

/* ---- .hud-btn 按钮（device.html 的 UI 巡检 / 剪贴板面板在用） ---- */
.hud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-main);
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast), filter var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
}

.hud-btn:hover {
  background: var(--bg-hover);
  border-color: var(--panel-border-strong);
}

.hud-btn:active {
  background: var(--bg-active);
  transform: scale(0.98);
}

.hud-btn:disabled,
.hud-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.hud-btn.active,
.hud-btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.hud-btn--danger {
  color: var(--danger-text);
  border-color: rgba(var(--danger-rgb), 0.4);
}

.hud-btn--danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger-text);
}

.hud-btn--primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--text-on-primary);
  box-shadow: var(--shadow-sm);
}

.hud-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-primary);
}

/* ---- 采集故障态：control/frame.js 在流停摆时挂 .capture-fault ---- */
.capture-fault,
.capture-fault.warn,
.capture-fault.bad {
  color: var(--danger-text) !important;
  background: rgba(var(--danger-rgb), 0.18) !important;
  border-radius: 3px;
  animation: capture-fault-pulse 1.6s ease-in-out infinite;
}

@keyframes capture-fault-pulse {
  0%,
  100% {
    background-color: rgba(var(--danger-rgb), 0.14);
  }
  50% {
    background-color: rgba(var(--danger-rgb), 0.32);
  }
}

/* --------------------------------------------------------------------------
   7. 动效降级：prefers-reduced-motion（全部动画与位移关闭——
   弹窗 / toast / 扫光 / 故障脉冲 / 入场 stagger / Aurora 漂移一并停用）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .modal-panel,
  .toast,
  .skeleton::after,
  .capture-fault,
  .capture-fault.warn,
  .capture-fault.bad,
  .rise-in > *,
  .aurora::before,
  .aurora::after {
    animation: none;
  }

  /* 深化评审 #1：导航皮肤收编进 global.css 后，主题钮/折叠钮的悬停旋转与
     按压缩放在此同步关闭（铁律 9「位移关闭」；与 app-nav.css 同名降级一致） */
  .nav-theme-btn:hover,
  .nav-theme-btn:active,
  .nav-toggle:hover,
  .nav-toggle:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   8. V2 增量：图标工具类（配合 /icons.svg sprite 的 <use> 引用）
   用法：<svg class="ic" aria-hidden="true"><use href="/icons.svg#i-plus"/></svg>
   尺寸变体：.ic--sm 14px / .ic--lg 20px；颜色随 currentColor 继承文字色
   -------------------------------------------------------------------------- */
.ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic--sm { width: 14px; height: 14px; vertical-align: -2px; }
.ic--lg { width: 20px; height: 20px; vertical-align: -5px; }

@media (prefers-reduced-motion: reduce) {
  .ic { transition: none; }
}

/* --------------------------------------------------------------------------
   9. 上传文件弹窗（.upl-*，upload-dialog.js 专属；index / device 两页共用）
   结构：拖拽区（.upl-dropzone）→ 打开文件夹按钮 → 逐台设备状态行（.upl-row）
   全部走设计令牌，不引入新色值；旧 /api/upload 通道已由 app_cmd 取代。
   -------------------------------------------------------------------------- */
.upl-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border: 1.5px dashed var(--panel-border-strong);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.upl-dropzone svg {
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  transition: color 0.15s;
}

.upl-dropzone:hover,
.upl-dropzone:focus-visible {
  border-color: var(--primary-ring);
  color: var(--text-regular);
  outline: none;
}

.upl-dropzone:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.upl-dropzone.is-dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.upl-dropzone.is-dragover svg {
  color: var(--primary);
}

.upl-dropzone p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.upl-drop-file {
  font-size: var(--fs-caption);
  color: var(--primary);
  word-break: break-all;
}

.upl-dropzone.has-file {
  border-color: var(--primary-ring);
  border-style: solid;
}

.upl-browse {
  margin-top: var(--space-3);
  width: 100%;
  justify-content: center;
}

/* 按钮内图标限尺寸（svg 无宽高时会撑满按钮） */
.upl-browse svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.upl-summary {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--panel-border);
  border-radius: var(--radius-sm);
  margin-top: var(--space-3);
}

.upl-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-height: 40vh;
  overflow-y: auto;
}

.upl-rows-empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-3) 0;
}

.upl-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) minmax(140px, 1.4fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.upl-row-name {
  font-size: var(--font-size-sm);
  font-weight: 550;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upl-status {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.upl-status.is-wait {
  color: var(--text-muted);
}

.upl-status.is-run {
  color: var(--primary);
}

.upl-status.is-ok {
  color: var(--success-text);
}

/* 需手机上确认（安装过程态：系统弹窗等人工点击） */
.upl-status.is-warn {
  color: var(--warning-text);
}

.upl-status.is-fail {
  color: var(--danger-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .upl-row {
    grid-template-columns: 1fr auto;
  }
  .upl-row .upl-retry {
    grid-column: 2;
  }
}