/* ==========================================================================
   星辰工具箱 · 全局设计系统
   ==========================================================================

   为什么需要这个文件（而不是继续让每页各写一套）：
     美化前的审计数据：
       字体    3 套（Inter 9 页 / -apple-system 2 页 / PingFang SC 1 页）
       字号    2 套（16px 10 页 / 15px 2 页）
       圆角    每页 4~11 种，全站 20+ 种不同取值
       间距    每页 10~26 种不同 padding
       对比度  122 处低于 WCAG AA（正文需 4.5:1）
       配色    proxy 页是绿色系 rgb(36,59,47)，其余 11 页是赤陶橙色系

     这些不是"不够好看"，而是**没有共同基准**：同一个"次要说明文字"，
     在不同页面用了 3 种灰色；同一个"卡片圆角"，出现了 8px/9px/10px/11px/12px
     五种肉眼难辨却真实存在的差别。视觉上的"不整齐感"正来自这里。

   本文件的作用：
     1. 定义唯一的设计基准（颜色 / 字体 / 圆角 / 间距 / 阴影 / 动效）
     2. 提供跨页面复用的公共组件（面板 / 提示 / 按钮 / 输入 / 徽标 / 表格）
     3. 修正可读性缺陷（对比度全部达到 WCAG AA）
     4. 提供移动端适配

   配色演进（三轮，供后续维护理解取值由来）：
     第一轮：统一设计基准，修好 122 处对比度不足。
             教训是"达标 != 越深越安全"——当时把颜色一路压深求保险，牺牲了观感。
     第二轮：用户反馈"偏深、发蓝"，改为简约浅色调——底色去蓝味、正文换中性灰、
             47 处深色渐变改平色、深色浮层改浅色卡片。
     第三轮（2026-10-17，当前）：用户要求彻底弃用蓝、紫两色系，
             重构为 **赤陶橙 + 奶油白**，风格定位"细腻精致"。
             全站 13 个 CSS 共迁移 190 处色值；严格扫描蓝/紫残留 = 0。

   取色原则（三轮踩坑后固化）：
     **达标 != 越深越安全，正确目标是"最浅且达标"。**
     凡受多约束的令牌（文字色需同时满足 4 种背景、语义色需同时满足白底与
     半透明徽标底、按钮色需承载白字）一律交给求解器扫描取值，不手调：
       docs/measurements/_ui_palette_terracotta.py  （本轮 · 赤陶橙）
       docs/measurements/_ui_palette_solve.py        （上一轮）
     手调必然顾此失彼：要么不达标，要么过深难看。

   接入方式（必须放在各页自身样式**之前**，本文件同时提供逐页覆盖）：
     <link rel="stylesheet" href="/design-system.css" />
     <link rel="stylesheet" href="本页样式.css" />

   命名约定：
     --xc-*   设计令牌（token），只放"基准值"，不放具体组件
     .xc-*    公共组件类
     各页原有 class 一律保留，本文件只做统一与增强，不要求改 HTML 结构。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */
:root {
  /* ---------- 颜色：品牌（赤陶橙）----------
     注意区分「装饰用橙」与「文字用橙」：
       --xc-accent       #de8b54  对白底仅 2.65:1，**只能做背景/边框/图标**，
                                  不可直接当正文或小字颜色用；
       --xc-accent-deep  #9b5127  对奶油底 4.54:1、对白卡 4.85:1，**文字/链接用它**。
     这个区分是配色审计暴露出来的：橙色亮度天然偏高，
     若全站（含徽标、链接）一律用 --xc-accent 上色，必然大面积对比度不足。
     取值由 _ui_palette_terracotta.py 扫描求得（最浅且达标）。 */
  --xc-accent: #de8b54;
  --xc-accent-strong: #dd7c3c;
  --xc-accent-deep: #9b5127;      /* 文字/链接专用，满足 AA */
  --xc-accent-ink: #8d4521;       /* 需要更强对比时（如小字徽标） */
  --xc-accent-soft: rgba(222, 139, 84, 0.10);
  --xc-accent-softer: rgba(222, 139, 84, 0.06);
  --xc-accent-border: rgba(222, 139, 84, 0.30);
  --xc-gradient: linear-gradient(120deg, #e9a06a 0%, #de8b54 100%);
  --xc-gradient-soft: linear-gradient(120deg, rgba(233,160,106,.14), rgba(222,139,84,.08));
  /* 主按钮：**平色**（不用渐变）
     曾有一轮为让白字达 AA 而做深色渐变，结果 47 处引用全变成厚重色块、
     整站观感发沉。平色更干净，且 --gradient 仍指向这里，各页无需改动。
     #b4582a 的白字对比度 4.81（留有余量，避免贴边 4.5 因合成背景而失守）。 */
  --xc-btn: #b4582a;
  --xc-btn-hover: #a34e24;
  --xc-btn-gradient: #b4582a;     /* 兼容旧名：值由渐变改为纯色 */

  /* ---------- 颜色：中性 ----------
     底色去蓝味：原冷蓝底的蓝色分量明显超出红/绿均值，
     改为 #faf7f2 后仅超出 4，接近中性浅灰。
     而且底色变浅会**提升**深色文字对比度，观感与可读性同向改善。 */
  --xc-bg: #faf7f2;
  --xc-bg-deep: #f2ebe0;
  --xc-card: #ffffff;
  --xc-card-alt: #f7f2ea;
  --xc-border: #eae6e1;
  --xc-border-strong: #d5cbc3;

  /* ---------- 颜色：文字（全部满足 WCAG AA 4.5:1）----------
     上一轮的错误：把"达标"当成"越深越安全"，正文一路压到 #443d38
     （13.5:1，AA 只需 4.5），而且它偏墨蓝（蓝分量明显超出红/绿均值），
     整页文字发黑发蓝 —— 这正是"颜色太深"的主要来源之一。

     本轮改为中性冷灰（蓝分量降到 20），并按"最浅且达标"取值：
       正文      9.85 @白底 / 8.77 @最深底   （有分量但不发黑）
       次要文字  5.83 / 5.19
       辅助文字  5.10 / 4.54                 （该档有 4.5 硬下限，无法再浅）
     取值均由 _ui_palette_solve.py 自动扫描求得，非手调。 */
  --xc-text: #443d38;
  --xc-text-2: #665a54;
  --xc-text-3: #756760;
  --xc-text-inv: #ffffff;

  /* ---------- 颜色：语义 ----------
     约束是双重的：既要作白底上的文字达标，又要作 *-soft 半透明徽标底上的
     文字达标（后者背景被抬亮，对比度更低，是真正的瓶颈）。
     下列值由 _ui_palette_solve.py 自动扫描求得"最浅且两个约束都过"：
       成功 #237758  白底 6.07 / soft 底 5.11
       警告 #91600c  白底 5.81 / soft 底 4.90
       错误 #c13c2d  白底 5.55 / soft 底 4.75
     （均留有余量，避免卡在 4.5 边界上因四舍五入而不达标）
     比上一轮（#237758 / #91600c / #c13c2d）略浅，观感柔和但仍达标。 */
  --xc-ok: #237758;
  --xc-ok-soft: rgba(35, 119, 88, 0.12);
  --xc-warn: #91600c;
  --xc-warn-soft: rgba(145, 96, 12, 0.12);
  --xc-err: #c13c2d;
  --xc-err-soft: rgba(193, 60, 45, 0.10);
  --xc-info: #9b5127;
  --xc-info-soft: rgba(222, 139, 84, 0.10);

  /* ---------- 字体 ----------
     统一为单一字体栈：原先 mail/newapick 用 -apple-system、
     proxy 用 PingFang SC 开头，导致同机渲染出的字形并不一致。 */
  --xc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
    Arial, sans-serif;
  --xc-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas,
    "Liberation Mono", monospace;

  /* 字号阶梯：全部页面统一用这一套
     现代化调整：把 2xl/3xl 的跨度拉开（21→23、27→30），并新增 4xl=38px，
     让标题与正文形成**明显的层级对比**——原来 21→27 的差距在大屏上几乎看不出主次。 */
  --xc-fs-xs: 12px;
  --xc-fs-sm: 12.5px;
  --xc-fs-base: 13.5px;
  --xc-fs-md: 14px;
  --xc-fs-lg: 15px;
  --xc-fs-xl: 18px;
  --xc-fs-2xl: 23px;
  --xc-fs-3xl: 30px;
  --xc-fs-4xl: 38px;
  --xc-fs-body: 15px;             /* 正文字号，统一为 15px */

  --xc-lh-tight: 1.3;
  --xc-lh-base: 1.6;
  --xc-lh-loose: 1.75;

  /* 字重：只保留 400/500/600/700 四档。
     原先散落在各页的 550 / 650 属于**非标准中间字重**，
     系统字体没有对应实例时会触发合成，且不同页渲染厚度不一致。 */
  --xc-fw-normal: 400;
  --xc-fw-medium: 500;
  --xc-fw-semi: 600;
  --xc-fw-bold: 700;

  /* ---------- 圆角（现代化：整体放大一档）----------
     原先最大 18px、卡片仅 14px，观感偏"方"。
     现代工具站的圆角普遍更大（卡片 18、大容器 24~28），
     因为更大圆角能在浅色大留白里显得更柔和、更有呼吸感。
     仍只保留 7 档，避免回到"20+ 种取值"的老问题。 */
  --xc-r-xs: 8px;
  --xc-r-sm: 10px;
  --xc-r-md: 12px;
  --xc-r-lg: 18px;
  --xc-r-xl: 24px;
  --xc-r-2xl: 28px;
  --xc-r-full: 999px;

  /* ---------- 间距（4 的倍数）---------- */
  --xc-s1: 4px;
  --xc-s2: 8px;
  --xc-s3: 12px;
  --xc-s4: 16px;
  --xc-s5: 20px;
  --xc-s6: 24px;
  --xc-s7: 32px;
  --xc-s8: 40px;
  --xc-s9: 48px;
  --xc-s10: 64px;

  /* ---------- 阴影：三级层次（细腻双层）----------
     风格目标「细腻精致」，做法与上一轮不同：
       上一轮是**单层**阴影（一个大模糊值），观感偏"贴纸"；
       本轮改为**双层**——一层近处细影勾勒边缘、一层远处大扩散托起层次。
     这是纸质卡片质感的常见做法：近影让元素"贴住"页面，远影给空间关系。
     色调统一用暖深棕 rgba(74,58,44)，与奶油底协调（冷灰阴影会显脏）。 */
  --xc-sh-xs: 0 1px 2px rgba(74, 58, 44, 0.04);
  --xc-sh-sm: 0 1px 2px rgba(74, 58, 44, 0.04), 0 4px 12px rgba(74, 58, 44, 0.05);
  --xc-sh-md: 0 2px 4px rgba(74, 58, 44, 0.04), 0 10px 28px rgba(74, 58, 44, 0.07);
  --xc-sh-lg: 0 4px 10px rgba(74, 58, 44, 0.05), 0 20px 48px rgba(74, 58, 44, 0.10);
  --xc-sh-focus: 0 0 0 3px rgba(222, 139, 84, 0.22);

  /* ---------- 动效（现代化）----------
     原曲线 cubic-bezier(0.4,0,0.2,1) 是 Material 的标准缓动，
     特点是"两头都慢"，连续操作时会觉得拖沓。
     换成 expo-out（快速启动、极慢收尾），交互反馈更**利落**——
     这是现代工具站普遍采用的曲线。
     另备一条轻微回弹曲线，用于按钮这类需要"手感"的小元素。 */
  --xc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --xc-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --xc-dur-fast: 0.14s;
  --xc-dur: 0.24s;
  --xc-dur-slow: 0.4s;

  /* ---------- 层次：现代卡片的两级高度 ----------
     现代做法是"靠阴影而非边框"区分层次：边框尽量淡，
     层次感交给阴影。这里给出两档可直接复用的组合。 */
  --xc-elev-1: 0 1px 2px rgba(74, 58, 44, 0.04), 0 4px 12px rgba(74, 58, 44, 0.05);
  --xc-elev-2: 0 2px 4px rgba(74, 58, 44, 0.04), 0 12px 32px rgba(74, 58, 44, 0.08);
  --xc-elev-3: 0 4px 10px rgba(74, 58, 44, 0.05), 0 24px 56px rgba(74, 58, 44, 0.11);

  /* ---------- 布局 ---------- */
  --xc-wrap: 1180px;
  --xc-topbar-h: 60px;

  /* ---------- 兼容别名 ----------
     各页原有样式大量引用 --bg / --card / --accent / --text 等旧变量名。
     这里把它们指向新的令牌，于是**无需改动各页 CSS 即可整体换色**，
     同时保留逐页覆盖的能力（页面样式在后，仍可覆盖）。

     注意 --gradient：各页把它用作**主按钮背景**（蓝底白字），
     所以必须指向压深后的 --xc-btn-gradient，而不是装饰用的 --xc-gradient；
     否则按钮上的白字只有 2.9:1，不达 AA。 */
  --bg: var(--xc-bg);
  --card: var(--xc-card);
  --card-hover: var(--xc-card);
  --border: var(--xc-border);
  --border-strong: var(--xc-border-strong);
  --text: var(--xc-text);
  --text-2: var(--xc-text-2);
  --text-3: var(--xc-text-3);
  --accent: var(--xc-accent);
  --accent-strong: var(--xc-accent-strong);
  --accent-soft: var(--xc-accent-soft);
  --accent-border: var(--xc-accent-border);
  --gradient: var(--xc-btn-gradient);
  --ok: var(--xc-ok);
  --err: var(--xc-err);
  --warn: var(--xc-warn);
  --radius: var(--xc-r-lg);
  --radius-sm: var(--xc-r-sm);
  --font: var(--xc-font);
  --mono: var(--xc-mono);
  --shadow: var(--xc-sh-md);
  --shadow-sm: var(--xc-sh-sm);
  --shadow-lg: var(--xc-sh-lg);
}

/* ==========================================================================
   2. 基础层
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* ★ hidden 属性必须真的隐藏（2026-10-17 实测缺陷）
 *
 * 浏览器的 `[hidden] { display: none }` 来自 UA 样式表，优先级极低。
 * 页面上任何 `.某类 { display: flex }` 都会覆盖它，导致 hidden **完全失效**。
 *
 * 实测后果：聊天室四个门槛页（未登录 / 设昵称 / 验证 / 被封禁）同时渲染，
 * 用户看到一屏四个区块叠在一起，最后停在"暂时无法使用聊天室"，
 * 误以为账号被封。视频页的 `.vd-status` 有同样问题。
 *
 * 这类缺陷极难被测试发现：JS 逻辑是对的（一次只 removeAttribute 一个），
 * 自动化测试查 hasAttribute('hidden') 也是对的，只有真的渲染出来才看得见。
 *
 * 用 !important 在全局层兜住，避免以后每加一个 display 类都要记得补一条。
 */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--xc-font);
  font-size: var(--xc-fs-body);
  line-height: var(--xc-lh-base);
  color: var(--xc-text);
  background-color: var(--xc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* 超长不可断文本（URL、哈希、邮箱）在窄屏自动换行，
     而不是撑破容器造成横向滚动 */
  overflow-wrap: break-word;
}

/* ---------- 屏幕自适应：全局安全网 ----------
   嵌入媒体永远不超出容器宽度（等比缩小，不变形）。
   这是"适应各种屏幕"的最后一道保险：即使某页漏写了适配，
   图片/视频也不会把窄屏撑出横向滚动条。 */
img, video, canvas, iframe, embed, object {
  max-width: 100%;
}
/* 表格最小也能缩到容器宽（配合各页 .table-wrap 的 overflow-x:auto，
   宽表格在窄屏变为"容器内横滑"而不是撑破页面） */
table { max-width: 100%; }


::selection {
  background: var(--xc-accent-soft);
  color: var(--xc-accent-deep);
}

/* 键盘可达性：统一焦点环（原先仅 1~3 条 :focus 规则，键盘用户几乎看不见焦点） */
:focus-visible {
  outline: 2px solid var(--xc-accent);
  outline-offset: 2px;
  border-radius: var(--xc-r-xs);
}

/* 尊重系统"减少动效"偏好 —— 前庭功能敏感用户的实际需要。
   但必须区分三类动效，不能一刀切：

     该关掉：位移 / 缩放 / 旋转 / 视差 —— 大范围运动会引起前庭不适；
     该保留：颜色 / 透明度 / 阴影等**无位移过渡** —— 它们提供操作反馈，
             全关掉会让界面"点了没反应"，观感非常生硬；
     必须保留：加载指示器的持续旋转 —— 它是**功能性**的，
             停转会被用户误认为"卡死了"。

   原先的实现把 `*, *::before, *::after` 的 transition-duration 一律压到
   0.01ms（还带 !important），于是在开启"减少动效"的系统上，
   整站交互都变成瞬间跳变 —— 这正是"动画像被阉割、很生硬"的观感来源。 */
@media (prefers-reduced-motion: reduce) {
  /* 1) 装饰性关键帧动画（入场、脉冲、闪烁）：停掉 */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* 2) 加载指示器例外：必须继续转，否则会被误认为卡死 */
  .xc-spinner, .spinner, .state__spin,
  .cap-check--solving .cap-check__box,
  .cap-checkbox--solving .cap-checkbox {
    animation-duration: 0.8s !important;
    animation-iteration-count: infinite !important;
  }
  /* 3) 过渡：只保留不产生位移的属性（颜色/背景/边框/阴影/透明度） */
  *, *::before, *::after {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: 0.18s !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  /* 4) 位移动效明确关掉（即使个别规则单独声明了 transform 过渡） */
  .panel:hover, .tool-card:hover, .admin-card:hover, .card:hover,
  .xc-btn:hover:not(:disabled), .btn-primary:hover:not(:disabled),
  .xc-btn:active:not(:disabled), .btn-primary:active:not(:disabled) {
    transform: none !important;
  }
}

/* 滚动条：与整体风格一致（原先各页默认滚动条，深色突兀）
   现代化：由 10px 收细到 8px，滑块留 2px 透明边距 —— 更"轻"，
   不会在浅色页面里形成一条抢眼的粗线。 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--xc-border-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--xc-border-strong);
  border-radius: var(--xc-r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--xc-accent); }

/* 等宽数字：统计值、时间、代码里的数字用等宽字形，
   避免数字变化时宽度跳动（如计时器从 9→10 时整行抖动）。
   这是现代数据界面很常见的细节处理。 */
.xc-mono, .xc-table td, code, kbd, samp,
.clock, .stat-value, .stat__value, .countdown, .timer {
  font-variant-numeric: tabular-nums;
}

/* 列表项统一过渡：会话/邮件/日志这类可点击行，
   各页原本直接切换背景（生硬）。这里只补过渡，不改各页既有配色。 */
.conv-item, .mail-item, .list-item, .log-item, .hist-item,
.result-item, .ip-card, .pending-item {
  transition: background-color var(--xc-dur) var(--xc-ease),
              border-color var(--xc-dur) var(--xc-ease),
              transform var(--xc-dur) var(--xc-ease);
}

/* ==========================================================================
   3. 排版工具类
   ========================================================================== */
/* 标题工具类
   现代化两点：
     1. 用 clamp() 做**流体字号**——标题随视口平滑缩放，
        而不是在断点处突然跳变（原来只在 768/360 硬降档，中间区间偏小）；
     2. 大标题加**负字距**（-0.02em）：字号越大越需要收紧，
        否则字间空隙会把标题"拉散"。这是现代排版最容易被忽略的细节。 */
.xc-t1 { font-size: clamp(var(--xc-fs-2xl), 3.4vw, var(--xc-fs-4xl)); font-weight: var(--xc-fw-bold); line-height: var(--xc-lh-tight); letter-spacing: -0.02em; }
.xc-t2 { font-size: clamp(var(--xc-fs-xl), 2.4vw, var(--xc-fs-3xl)); font-weight: var(--xc-fw-bold); line-height: var(--xc-lh-tight); letter-spacing: -0.015em; }
.xc-t3 { font-size: var(--xc-fs-xl); font-weight: var(--xc-fw-semi); line-height: var(--xc-lh-tight); letter-spacing: -0.01em; }

.xc-muted { color: var(--xc-text-3); }
.xc-muted-2 { color: var(--xc-text-2); }
.xc-mono { font-family: var(--xc-mono); font-size: var(--xc-fs-sm); }

/* ==========================================================================
   4. 公共组件
   ========================================================================== */

/* ---------- 4.1 面板 / 卡片 ----------
   .panel 在 6 个页面重复定义（whois/ping/img/proxy/shua/webadmin），
   每页的圆角与内边距都不一样。此处给出统一基准，页面样式仍可覆盖。

   现代化：层次交给**阴影**而非边框（边框只留极淡一层做边界提示），
   并在 hover 时轻微抬升（translateY(-2px)）——这个 2px 的位移
   是"现代感"里成本最低、效果最明显的一项。 */
.panel {
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-r-lg);
  box-shadow: var(--xc-elev-1);
  transition: box-shadow var(--xc-dur) var(--xc-ease),
              border-color var(--xc-dur) var(--xc-ease),
              transform var(--xc-dur) var(--xc-ease);
}
.panel:hover {
  box-shadow: var(--xc-elev-2);
  transform: translateY(-2px);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xc-s3);
  padding: var(--xc-s5) var(--xc-s6);
  border-bottom: 1px solid var(--xc-border);
  font-weight: var(--xc-fw-semi);
  letter-spacing: -0.01em;
}

/* ---------- 4.2 提示文字 ----------
   .hint 出现在 5 个页面，是本项目最常用的说明文字样式。
   统一后同时修好对比度（原多页用 --text-3，只有 2.52:1）。 */
.hint {
  font-size: var(--xc-fs-sm);
  color: var(--xc-text-3);
  line-height: var(--xc-lh-base);
}

/* ---------- 4.3 按钮 ----------
   现代化三点：
     1. 尺寸更饱满（12px 24px），现代按钮普遍比"刚好包住文字"更宽松；
     2. hover 抬升 1px、按下缩到 0.985 —— 按压的"回弹感"是手感的关键；
     3. 主按钮加**内高光**（inset 白色 1px），避免纯色块显得平板。

   ★ 2026-10-18 补：`.xc-btn` 原先只给了排版与形状，**没给背景色**。
   于是不带变体类的裸 `.xc-btn`（如 /video 页的「粘贴剪贴板」「清空」）
   保持了浏览器默认的系统灰 rgb(240,240,240) —— 在米白卡片上像一块
   没做完的占位。这里补上"次要按钮"的默认外观（白底 + 细描边），
   与 proxy/style.css 里 .btn 的处理方式保持一致：
     - 裸 .xc-btn      = 次要按钮（白底描边）
     - .xc-btn--primary = 主按钮（品牌橙）
     - .btn-primary     = 主按钮的旧类名，保留兼容
   主按钮的规则在后面（特异性相同、顺序靠后），会正确覆盖背景。 */
.xc-btn, .btn-primary {
  font-family: var(--xc-font);
  font-size: var(--xc-fs-md);
  font-weight: var(--xc-fw-semi);
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 12px var(--xc-s6);
  /* 默认按"次要按钮"渲染：白底 + 细描边 + 正文色。
     主按钮变体（.xc-btn--primary / .btn-primary）在下方覆盖这三项。
     这样裸 .xc-btn 不会再落回浏览器默认的系统灰。 */
  color: var(--xc-text-2);
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-r-md);
  cursor: pointer;
  transition: box-shadow var(--xc-dur) var(--xc-ease),
              transform var(--xc-dur) var(--xc-ease),
              opacity var(--xc-dur) var(--xc-ease),
              background-color var(--xc-dur) var(--xc-ease),
              border-color var(--xc-dur) var(--xc-ease),
              color var(--xc-dur) var(--xc-ease);
}
/* 次要按钮悬浮：强调色描边 + 极浅底色，与 .btn--ghost 一致 */
.xc-btn:hover:not(:disabled), .btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.xc-btn:not(.xc-btn--primary):not(.xc-btn--danger):hover:not(:disabled) {
  color: var(--xc-accent-deep);
  border-color: var(--xc-accent-border);
  background: var(--xc-accent-softer);
}
.xc-btn:active:not(:disabled), .btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}
.xc-btn:disabled, .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* 主按钮：平色 + 内高光 + 悬浮抬升 */
.xc-btn--primary, .btn-primary {
  color: #fff;
  background: var(--xc-btn-gradient);
  /* 覆盖基类的描边：主按钮是纯色块，加边会显脏 */
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(74, 58, 44, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.xc-btn--primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(180, 88, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.xc-btn--primary:active:not(:disabled) {
  box-shadow: 0 1px 2px rgba(74, 58, 44, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* 次要按钮 */
.xc-btn--ghost, .btn-ghost {
  color: var(--xc-text-2);
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
}
.xc-btn--ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
  color: var(--xc-accent-deep);
  border-color: var(--xc-accent-border);
  background: var(--xc-accent-softer);
}

/* 危险按钮 */
.xc-btn--danger {
  color: #fff;
  background: var(--xc-err);
}
.xc-btn--danger:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(193, 60, 45, 0.3); }

/* 小号按钮 */
.xc-btn--sm {
  font-size: var(--xc-fs-sm);
  padding: 7px var(--xc-s3);
  border-radius: var(--xc-r-sm);
}

/* ---------- 4.3b .btn 系列别名（2026-10-18 修复）----------
   ★ 为什么需要这一段：
   全站 15 个页面里有 13 个用了 `class="btn btn--primary"` 这套命名，
   但 design-system.css 只定义了 `.xc-btn` / `.btn-primary`（单连字符）。
   类名对不上 → 那些按钮**完全没有样式**，退化成浏览器原生的
   灰色方角按钮（实测 computed style: background rgb(240,240,240)、
   font-size 13.33px、padding 1px 6px）。

   最明显的受害者是 /ssh 页：连接按钮是页面的主要操作，却显示成
   一个灰色小方块，整页看起来像未完成品。

   为什么在这里补别名而不是逐页改 HTML：
     - 一处修复，全站生效，不会再漏；
     - HTML 不用动，避免大批量改动引入新问题；
     - proxy / ping 两个页面自己定义了 .btn，它们的选择器
       （`.btn {}`）与这里特异性相同，但它们的 style.css 在
       design-system.css **之后**加载，所以仍会覆盖这里 —— 不会打架。

   注意：`[class~="btn"]` 等价于 `.btn`，但这样写能与
   `.btn--primary` 这类变体区分开（后者不是 class 词 "btn"）。
   这里直接用 .btn 即可，因为 HTML 里都是独立词。 */
.btn {
  font-family: var(--xc-font);
  font-size: var(--xc-fs-md);
  font-weight: var(--xc-fw-semi);
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 12px var(--xc-s6);
  color: var(--xc-text-2);
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-r-md);
  cursor: pointer;
  transition: box-shadow var(--xc-dur) var(--xc-ease),
              transform var(--xc-dur) var(--xc-ease),
              opacity var(--xc-dur) var(--xc-ease),
              background-color var(--xc-dur) var(--xc-ease);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:not(.btn--primary):not(.btn--danger):hover:not(:disabled) {
  color: var(--xc-accent-deep);
  border-color: var(--xc-accent-border);
  background: var(--xc-accent-softer);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* 主按钮变体 */
.btn--primary {
  color: #fff;
  background: var(--xc-btn-gradient);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(74, 58, 44, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(180, 88, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:active:not(:disabled) {
  box-shadow: 0 1px 2px rgba(74, 58, 44, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* 次要/幽灵按钮变体 */
.btn--ghost {
  color: var(--xc-text-2);
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
}
.btn--ghost:hover:not(:disabled) {
  color: var(--xc-accent-deep);
  border-color: var(--xc-accent-border);
  background: var(--xc-accent-softer);
}

/* 危险按钮变体 */
.btn--danger {
  color: #fff;
  background: var(--xc-err);
}
.btn--danger:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(193, 60, 45, 0.3); }

/* 小号变体 */
.btn--sm {
  font-size: var(--xc-fs-sm);
  padding: 7px var(--xc-s3);
  border-radius: var(--xc-r-sm);
}

/* ---------- 4.4 表单 ----------
   现代化：输入框内边距加大（10px→12px），在浅色大留白里更显从容；
   焦点态保持"边框变色 + 柔和光晕"，光晕颜色与强调色同族。 */
.xc-input, .field input, .auth-field input {
  font-family: var(--xc-font);
  font-size: var(--xc-fs-md);
  color: var(--xc-text);
  width: 100%;
  padding: 12px var(--xc-s4);
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-r-md);
  outline: none;
  transition: border-color var(--xc-dur) var(--xc-ease),
              box-shadow var(--xc-dur) var(--xc-ease),
              background-color var(--xc-dur) var(--xc-ease);
}
.xc-input::placeholder, .field input::placeholder, .auth-field input::placeholder {
  /* 占位符也需可读：原多页用极浅灰，对比度不足 2:1 */
  color: var(--xc-text-3);
  opacity: 0.75;
}
.xc-input:focus, .field input:focus, .auth-field input:focus {
  border-color: var(--xc-accent-strong);
  background: var(--xc-card);
  box-shadow: var(--xc-sh-focus);
}
.xc-input:disabled { background: var(--xc-card-alt); color: var(--xc-text-3); cursor: not-allowed; }

/* 统一前后台焦点样式 —— 美化前前台只有 border-color、后台有 box-shadow，
   同一个"登录框"在两端观感不一致。 */
.auth-field input:focus { box-shadow: var(--xc-sh-focus); }

.xc-label, .field > span:first-child {
  display: block;
  font-size: var(--xc-fs-sm);
  font-weight: var(--xc-fw-medium);
  color: var(--xc-text-2);
  margin-bottom: var(--xc-s2);
}

/* ---------- 4.5 徽标 / 状态 ---------- */
.xc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--xc-s1);
  font-size: var(--xc-fs-xs);
  font-weight: var(--xc-fw-semi);
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--xc-r-full);
  background: var(--xc-accent-soft);
  color: var(--xc-accent-deep);
  white-space: nowrap;
}
.xc-badge--ok { background: var(--xc-ok-soft); color: var(--xc-ok); }
.xc-badge--warn { background: var(--xc-warn-soft); color: var(--xc-warn); }
.xc-badge--err { background: var(--xc-err-soft); color: var(--xc-err); }
.xc-badge--muted { background: rgba(117, 103, 96, 0.12); color: var(--xc-text-3); }

/* ---------- 4.6 表格 ---------- */
.xc-table, .admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--xc-fs-md);
}
.xc-table th, .admin-table th {
  font-size: var(--xc-fs-xs);
  font-weight: var(--xc-fw-semi);
  color: var(--xc-text-3);
  text-align: left;
  padding: var(--xc-s3) var(--xc-s4);
  background: var(--xc-card-alt);
  border-bottom: 1px solid var(--xc-border);
  white-space: nowrap;
}
.xc-table td, .admin-table td {
  padding: var(--xc-s3) var(--xc-s4);
  border-bottom: 1px solid var(--xc-border);
  color: var(--xc-text-2);
}
.xc-table tbody tr:last-child td, .admin-table tbody tr:last-child td { border-bottom: none; }
.xc-table tbody tr { transition: background-color var(--xc-dur-fast) var(--xc-ease); }
.xc-table tbody tr:hover, .admin-table tbody tr:hover { background: var(--xc-accent-softer); }

/* ---------- 4.7 提示条 ---------- */
.xc-note {
  display: flex;
  gap: var(--xc-s3);
  padding: var(--xc-s3) var(--xc-s4);
  border-radius: var(--xc-r-md);
  font-size: var(--xc-fs-sm);
  line-height: var(--xc-lh-base);
  background: var(--xc-info-soft);
  color: var(--xc-text-2);
  border-left: 3px solid var(--xc-info);
}
.xc-note--ok { background: var(--xc-ok-soft); border-left-color: var(--xc-ok); }
.xc-note--warn { background: var(--xc-warn-soft); border-left-color: var(--xc-warn); }
.xc-note--err { background: var(--xc-err-soft); border-left-color: var(--xc-err); }

/* ---------- 4.8 加载态 ---------- */
.xc-spinner {
  width: 15px; height: 15px;
  border: 2px solid var(--xc-accent-soft);
  border-top-color: var(--xc-accent);
  border-radius: 50%;
  animation: xcSpin 0.65s linear infinite;
  display: inline-block;
}
@keyframes xcSpin { to { transform: rotate(360deg); } }

/* ---------- 4.9 人机验证框（前后台共用，3 页出现）----------
   美化前该组件在 主页 / captcha / webadmin 三处各写一遍，
   尺寸与配色有细微差异。这里给出唯一基准。 */
.cap-check {
  display: flex;
  align-items: center;
  gap: var(--xc-s3);
  padding: var(--xc-s3) var(--xc-s4);
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-r-md);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--xc-dur) var(--xc-ease),
              box-shadow var(--xc-dur) var(--xc-ease),
              background-color var(--xc-dur) var(--xc-ease);
}
.cap-check:hover {
  border-color: var(--xc-accent-border);
  box-shadow: var(--xc-sh-sm);
}
.cap-check__box {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--xc-border-strong);
  border-radius: var(--xc-r-xs);
  background: var(--xc-card);
  position: relative;
  transition: color var(--xc-dur) var(--xc-ease), background-color var(--xc-dur) var(--xc-ease), border-color var(--xc-dur) var(--xc-ease), box-shadow var(--xc-dur) var(--xc-ease), transform var(--xc-dur) var(--xc-ease), opacity var(--xc-dur) var(--xc-ease);
}
.cap-check__label {
  font-size: var(--xc-fs-md);
  color: var(--xc-text-2);
  flex: 1;
}
.cap-check__brand {
  font-size: var(--xc-fs-xs);
  color: var(--xc-text-3);
}
.cap-check--solving { cursor: progress; }
.cap-check--solving .cap-check__box {
  border-color: var(--xc-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: xcSpin 0.65s linear infinite;
}
.cap-check--done {
  border-color: rgba(35, 119, 88, 0.35);
  background: rgba(35, 119, 88, 0.05);
}
.cap-check--done .cap-check__box {
  border-color: var(--xc-ok);
  background: var(--xc-ok);
}
.cap-check--done .cap-check__box::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cap-check--done .cap-check__label { color: var(--xc-ok); }

/* ---------- 4.10 Toast ----------
   改为**浅色卡片 + 细描边**，不再是深色底。
   深色浮层在浅底页面上会形成很重的一块，是"整体偏深"的观感来源之一；
   浅色卡片同样醒目，但轻得多。文字用 --xc-text 保证可读（9.3:1）。 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(10px);
  background: var(--xc-card);
  color: var(--xc-text);
  border: 1px solid var(--xc-border-strong);
  font-size: var(--xc-fs-md);
  padding: var(--xc-s3) var(--xc-s5);
  border-radius: var(--xc-r-md);
  box-shadow: var(--xc-sh-md);
  opacity: 0;
  transition: opacity var(--xc-dur-slow) var(--xc-ease),
              transform var(--xc-dur-slow) var(--xc-ease);
  z-index: 9999;
  pointer-events: none;
  max-width: min(90vw, 480px);
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 4.11 顶栏毛玻璃（现代化统一）----------
   为什么统一：美化前只有 6 个页面给顶栏加了毛玻璃，且规格不一
   （blur 12px / 14px，底色有的是纯白、有的是不透明卡片色）。
   结果是逐页浏览时"顶栏质感"时有时无，这是最容易被察觉的不一致。

   两点设计决定：
     1. 半透明底色用**暖白**（页面底色的透明版），不用纯白——
        纯白叠在奶油底上会显冷，与整站暖调打架；
     2. blur 之外加 saturate(180%)：透过来的内容颜色更饱和，
        避免毛玻璃常见的"灰蒙蒙"观感。这是现代 glassmorphism 的标准做法。

   用 !important 是因为各页 CSS 在本文件之后加载，否则会被覆盖。 */
.topbar,
.px-head, .uc-head, .cap-svc-head, .dash-head,
.img-head, .wh-head, .ping-head, .shua-head, .chat-head {
  /* 统一常驻顶部：mail 等页原先顶栏会随页面滚走，毛玻璃也就失去意义。
     z-index 取 100，低于各页弹窗（1000+），不会遮挡对话框。 */
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.78) !important;
  /* 毛玻璃是 GPU 密集操作，而顶栏 sticky 意味着**滚动时每帧都要重新模糊**。
     这里做了两处降本：
       - blur 16px -> 12px：模糊半径直接决定采样开销，约省三成；
       - 去掉 saturate(180%)：它是叠在模糊之上的额外色彩矩阵运算，
         在当前配色下肉眼几乎看不出差别，却实打实增加每帧成本。
     底色不透明度由 0.72 提到 0.78，模糊更弱时仍能保证顶栏文字清晰可读。 */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--xc-border) !important;
}
/* 不支持 backdrop-filter 的浏览器退化为接近不透明，避免文字压在内容上看不清 */
@supports not (backdrop-filter: blur(1px)) {
  .topbar, .px-head, .uc-head, .cap-svc-head,
  .dash-head, .img-head, .wh-head, .ping-head, .shua-head, .chat-head {
    background: rgba(250, 247, 242, 0.96) !important;
  }
}

/* ==========================================================================
   5. 移动端适配
   ==========================================================================
   重要说明：本段规则使用的是**本项目实际存在的类名**。
   最初我按通用框架的习惯写了 .grid / .cards / .layout / .sidebar 等，
   经 _ui_layout_scan.py 核对，这些类在本项目里**一个都不存在**，
   整段媒体查询等于是死代码、完全没起作用。
   下面按各页真实的布局类重写，覆盖主页/whois/ping/img/mail/proxy/shua/
   chat/newapick/captcha/uc/webadmin 全部 12 个页面。

   各页真实容器类（扫描得出）：
     主页      .topbar__inner .tools .footer__inner
     whois     .wh-main .row .quick-row
     ping      .ping-main .ip-grid .chips .ctrl .opt-row
     img       .img-main .result-list .query-result .ctrl .opt-row
     mail      .mail-wrap .topbar-inner
     proxy     .stats-row .filter-row .ops .panel__head
     shua      .shua-main .stats-row .chip-row .settings-row
     chat      .chat-messages .chat-input .suggest
     newapick  .wrap .topbar-inner
     captcha   .cap-svc-main .cap-svc-stats .cap-svc-form .cap-svc-kv
     uc        .uc-main .uc-head
     webadmin  .dash-main .stats .tool-list .cfg-grid .admin-cards
   ========================================================================== */

/* ---------- 平板：900px 以下 ---------- */
@media (max-width: 900px) {
  /* 顶栏（前台 3 页各有自己的顶栏类名） */
  .topbar, .px-head, .uc-head, .cap-svc-head {
    padding: var(--xc-s3) var(--xc-s4) !important;
  }
  .topbar__inner, .topbar-inner {
    gap: var(--xc-s3) !important;
    max-width: 100% !important;
  }

  /* 主要内容区：去掉过大的左右留白 */
  .ping-main, .img-main, .wh-main, .shua-main, .mail-wrap,
  .wrap, .chat-messages, .chat-input, .suggest,
  .dash-main, .cap-svc-main {
    padding-left: var(--xc-s4) !important;
    padding-right: var(--xc-s4) !important;
    max-width: 100% !important;
  }

  /* 两列配置网格降为单列（webadmin 的 .cfg-grid） */
  .cfg-grid { grid-template-columns: 1fr !important; }

  /* whois 的 190px + 1fr 两列（标签/值），窄屏改为上下堆叠 */
  .row { grid-template-columns: 1fr !important; gap: var(--xc-s1) !important; }
}

/* ---------- 手机：768px 以下 ---------- */
@media (max-width: 768px) {
  /* 自适应网格：缩小最小列宽，让窄屏能排下 2 列而非溢出 */
  .tools {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: var(--xc-s3) !important;
  }
  .result-list, .query-result {
    grid-template-columns: 1fr !important;
    gap: var(--xc-s3) !important;
  }
  .ip-grid { grid-template-columns: 1fr !important; }
  .tool-list, .admin-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
  .stats-row, .stats {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: var(--xc-s3) !important;
  }

  /* 工具栏 / 过滤行 / 操作行：允许换行，避免横向溢出 */
  .ctrl, .opt-row, .filter-row, .ops, .filters,
  .chip-row, .chips, .settings-row, .quick-row, .panel__head {
    flex-wrap: wrap !important;
    gap: var(--xc-s2) !important;
  }

  /* captcha 页的统计与键值对 */
  .cap-svc-stats { flex-wrap: wrap !important; }
  .cap-svc-stat { flex: 1 1 45% !important; }
  .cap-svc-kv > span { width: auto !important; }
  .cap-svc-form { flex-direction: column !important; align-items: stretch !important; }

  /* uc 页 */
  .uc-main { margin-top: var(--xc-s5) !important; padding: 0 var(--xc-s4) !important; }

  /* 表格允许横向滚动而不是撑破容器 */
  .table-wrap, .cap-svc-tablewrap, .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 表单控件避免 iOS 聚焦时自动放大页面（字号 <16px 会触发） */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ---------- 触控目标：最小 44px ----------
     手机上手指点击精度远低于鼠标。WCAG 2.5.5 / Apple HIG 都要求
     可点击目标 >= 44x44px。审计发现全站大量按钮/输入框只有 28~39px 高，
     在触屏上容易误触。这里统一抬高（只限表单控件与按钮，
     行内文字链接不在此列——它们靠间距而非自身尺寸保证可点）。
     checkbox/radio 保持原生尺寸，但放大其 label 的点击区。 */
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea,
  .xc-btn, .btn-primary, .btn-blue, .uc-btn, .cap-svc-btn,
  .btn-run, .btn-upload, .btn-new, .btn-raw, .btn-gray,
  .tab, .chip, .seg__item, .mode-tab, .mode-tag, .ip-chip,
  .auth-tab, .back-home, .pw-toggle {
    min-height: 44px;
  }
  /* 复选/单选：扩大 label 点击区（原生控件太小，但视觉尺寸不宜强改） */
  label { padding: 6px 0; }

  /* 标题降一档，避免窄屏换行难看 */
  .xc-t1 { font-size: var(--xc-fs-2xl); }
  .xc-t2 { font-size: var(--xc-fs-xl); }
}

/* ---------- 小屏手机：480px 以下 ---------- */
@media (max-width: 480px) {
  /* 全宽按钮，便于拇指点击 */
  .xc-btn, .btn-primary, .cap-svc-btn, .btn-blue, .uc-btn { width: 100%; }

  /* 主页工具卡在小屏排成一列，避免文字被挤成两三行 */
  .tools { grid-template-columns: 1fr !important; }

  /* 统计卡单列 */
  .stats-row, .stats, .cap-svc-stat { grid-template-columns: 1fr !important; flex: 1 1 100% !important; }

  /* 徽标/标签允许换行 */
  .chip-row, .chips { gap: var(--xc-s1) !important; }

  .cap-check { padding: var(--xc-s3); }
  .toast { left: var(--xc-s3); right: var(--xc-s3); transform: none; max-width: none; }
  .toast.is-show { transform: translateY(0); }

  /* ---------- 刘海屏安全区 ----------
     配合各页 viewport 的 viewport-fit=cover：横屏/全屏时内容
     避开刘海与手势条区域（env() 在无刘海设备上为 0，无副作用）。 */
  .topbar, .topbar__inner, .px-head, .uc-head, .cap-svc-head,
  .img-head, .wh-head, .ping-head, .shua-head,
  .chat-head, .dash-head {
    padding-left: max(var(--xc-s4), env(safe-area-inset-left)) !important;
    padding-right: max(var(--xc-s4), env(safe-area-inset-right)) !important;
  }
}

/* ---------- 超窄屏手机：360px 以下（iPhone SE 一代、小屏安卓）---------- */
@media (max-width: 360px) {
  /* 各页主容器留白再收窄一档，把空间让给内容 */
  .ping-main, .img-main, .wh-main, .shua-main, .mail-wrap,
  .wrap, .cap-svc-main, .uc-main, .dash-main {
    padding-left: var(--xc-s3) !important;
    padding-right: var(--xc-s3) !important;
  }
  /* 大标题再降一档，避免 3~4 行换行 */
  .xc-t1, .hero__title { font-size: var(--xc-fs-xl) !important; }
  .xc-t2 { font-size: var(--xc-fs-lg) !important; }
  /* 顶栏品牌名过长时允许收缩 */
  .brand__name, .ping-brand__name, .img-brand__name, .wh-brand__name,
  .shua-brand__name, .chat-brand__name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 面板内边距收窄 */
  .panel { border-radius: var(--xc-r-md); }
  .panel__head { padding: var(--xc-s3) var(--xc-s4); }
}

/* 触屏设备：去掉依赖 hover 的效果（触屏无 hover，会造成"点了没反应"） */
@media (hover: none) {
  .panel:hover { box-shadow: var(--xc-sh-sm); }
  .cap-check:hover { border-color: var(--xc-border); box-shadow: none; }
}

/* 打印：去掉装饰，保留内容 */
@media print {
  .topbar, .px-head, .uc-head, .cap-svc-head,
  .cap-check, .toast, .bg-glow { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; border-color: #ccc; }
}

/* ---------- 4.9 网页弹窗（替代原生 alert / confirm）----------
   由 /xcui.js 动态创建节点，类名以 xc-modal 开头。
   与站点设计令牌共用，自动跟随主题；不依赖任何第三方库。

   层级说明：z-index 1000 高于页面所有内容（含顶栏 100、toast 900），
   但低于极端情况下的调试面板。 */
.xc-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(48, 40, 34, 0.42);
  /* backdrop-filter 让背景轻微失焦，视觉上把弹窗"抬"起来。
     注意：这要求背后有实际渲染内容，否则看不到效果（页脚曾踩过这个坑）。 */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: xcModalMaskIn 160ms var(--xc-ease) both;
}
.xc-modal-mask.is-closing { animation: xcModalMaskOut 140ms var(--xc-ease) both; }

@keyframes xcModalMaskIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes xcModalMaskOut { from { opacity: 1; } to { opacity: 0; } }

.xc-modal {
  width: min(440px, 100%);
  background: var(--xc-card);
  border-radius: var(--xc-r-lg);
  box-shadow: 0 24px 60px -12px rgba(60, 44, 30, 0.32),
              0 0 0 1px rgba(234, 230, 225, 0.9);
  overflow: hidden;
  animation: xcModalIn 180ms var(--xc-ease) both;
}
.xc-modal-mask.is-closing .xc-modal { animation: xcModalOut 140ms var(--xc-ease) both; }

@keyframes xcModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xcModalOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(6px) scale(0.99); }
}

/* 危险操作（删除类）：顶部一条细色带做视觉提示，不整块变红 */
.xc-modal--danger { box-shadow: 0 24px 60px -12px rgba(193, 60, 45, 0.26),
                                0 0 0 1px rgba(234, 230, 225, 0.9); }
.xc-modal--danger .xc-modal__head { border-bottom-color: rgba(193, 60, 45, 0.16); }
.xc-modal--danger .xc-modal__title { color: var(--xc-err); }

.xc-modal__head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--xc-border);
}
.xc-modal__title {
  margin: 0;
  font-family: var(--xc-font);
  font-size: var(--xc-fs-lg);
  font-weight: var(--xc-fw-semi);
  color: var(--xc-text);
  line-height: 1.35;
}

.xc-modal__body {
  padding: 18px 24px;
  font-family: var(--xc-font);
  font-size: var(--xc-fs-md);
  color: var(--xc-text-2, #756760);
  line-height: 1.65;
}
.xc-modal__line { margin: 0; }
.xc-modal__line + .xc-modal__line { margin-top: 6px; }
/* 空行（正文里的 \n\n）用一个小间距表示 */
.xc-modal__gap { height: 8px; }

.xc-modal__input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--xc-font);
  font-size: var(--xc-fs-md);
  color: var(--xc-text);
  padding: 11px 14px;
  background: var(--xc-card);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-r-sm);
  outline: none;
  transition: border-color var(--xc-dur) var(--xc-ease),
              box-shadow var(--xc-dur) var(--xc-ease);
}
.xc-modal__input:focus {
  border-color: var(--xc-accent);
  box-shadow: 0 0 0 3px rgba(222, 139, 84, 0.16);
}

.xc-modal__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 4px 24px 20px;
}
.xc-modal__foot .xc-btn { min-width: 88px; }

/* 弹窗打开时禁止背景滚动（避免移动端背景跟着滑） */
body.xc-modal-open { overflow: hidden; }

/* 小屏：按钮改为等宽两列，更易点击 */
@media (max-width: 480px) {
  .xc-modal-mask { padding: 16px; align-items: flex-end; }
  .xc-modal { width: 100%; border-radius: var(--xc-r-lg) var(--xc-r-lg) 0 0; }
  .xc-modal__foot { padding: 4px 18px 18px; }
  .xc-modal__foot .xc-btn { flex: 1 1 0; min-width: 0; }
  .xc-modal__head { padding: 18px 18px 12px; }
  .xc-modal__body { padding: 16px 18px; }
}

/* 尊重"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  .xc-modal-mask, .xc-modal,
  .xc-modal-mask.is-closing, .xc-modal-mask.is-closing .xc-modal { animation: none; }
}

/* 打印时弹窗不该出现 */
@media print {
  .xc-modal-mask { display: none !important; }
}