/* 自检域名两页（线路自检、2FA 验证码）的设计 token —— 这两页唯一的设计规范来源。

   照的是苹果官网自己的网页规范，2026-11-08 从 apple.com.cn 的样式表里取证：
   - 颜色：官网的 --sk-* 设计变量（main.built.css 的 :root 和 .theme-dark），浅色、深色各一套，下面逐个注明对应哪个；
   - 文字：官网的字号档（48 / 40 / 32 标题，28 / 24 小标题，21 / 19 引言，17 正文，14 说明），
     小屏、中屏、大屏逐档放大，和官网一样；中文字体照官网的顺序（SF Pro SC → 苹方），用不了官网的网络字体，改用系统字体；
   - 断点：小屏 ≤734、中屏 735–1068、大屏 ≥1069；内容区宽 692（中屏）、980（大屏），小屏两边各留边距；
   - 导航栏：高 48，吸顶时 rgba(250,250,252,.8) 加 saturate(180%) blur(20px)（官网的 localnav）；
   - 按钮：胶囊形，17px 字，内边距 12×22（官网的 .button-elevated），实心蓝 #0071e3，悬停 #0076df，按下 #006edb；
     次要按钮是蓝色描边（官网的 .button-secondary）。
   这是网页，不照搬 iOS App 的控件（分组列表、44pt 的行、iOS 系统色）：学的是苹果的克制和统一，不是手机的样子。

   规矩（tests/test_dashboard.py 会查）：
   - app.css 只能用这里的 var(--…)，不写死颜色、尺寸、时长，也不定义自己的变量；@media 里只能写上面那两个断点；
   - 深色、增强对比度、屏幕宽度这些分支只覆盖下面默认那组里已有的 token，不另起新名字；
   - 定义了就要有人用，没人用的删掉。 */

:root {
  color-scheme: light dark;

  /* ---- 颜色：背景 ---- */
  --color-background: rgb(255, 255, 255); /* --sk-fill：页面 */
  --color-surface: rgb(245, 245, 247); /* --sk-fill-tertiary：浅灰的内容块 */
  --color-field: rgb(255, 255, 255); /* 灰块里的输入框是白的 */
  --color-fill: rgba(0, 0, 0, 0.08); /* --sk-fill-gray-quaternary-alpha：步骤编号底、进度条底、不能点的按钮 */
  --color-bar: rgba(250, 250, 252, 0.8); /* 官网 localnav 吸顶时的背景，底下的内容透出来 */

  /* ---- 颜色：文字与线 ---- */
  --color-label: rgb(29, 29, 31); /* --sk-glyph-gray：正文、标题 */
  --color-label-secondary: rgb(110, 110, 115); /* --sk-glyph-gray-secondary：次要文字（白底 5.0:1，灰块上 4.6:1） */
  --color-label-tertiary: rgb(134, 134, 139); /* --sk-glyph-gray-tertiary：只给等待中的图标，不给文字 */
  --color-separator: rgba(0, 0, 0, 0.16); /* --sk-fill-gray-tertiary-alpha：导航栏底线、分隔线 */
  --color-field-border: rgb(134, 134, 139); /* --sk-fill-gray-secondary：输入框的边（够 3:1，看得出是个框） */

  /* ---- 颜色：能点的 ---- */
  --color-link: rgb(0, 102, 204); /* --sk-body-link-color：链接、次要按钮、焦点框 */
  --color-button: rgb(0, 113, 227); /* --sk-fill-blue：实心按钮（白字 4.6:1） */
  --color-button-hover: rgb(0, 118, 223); /* .button 悬停 #0076df */
  --color-button-active: rgb(0, 110, 219); /* .button 按下 #006edb */
  --color-on-button: rgb(255, 255, 255);

  /* ---- 颜色：状态，只上图标（--sk-glyph-green / orange / red） ---- */
  --color-success: rgb(0, 128, 9);
  --color-warning: rgb(182, 68, 0);
  --color-danger: rgb(227, 0, 0);

  /* ---- 字体：苹果设备是 SF + 苹方，Windows 是微软雅黑，安卓是思源 ---- */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;

  /* ---- 文字样式：字重 字号 / 行高。默认是小屏的，中屏、大屏在下面放大 ---- */
  --text-hero: 600 32px / 1.125 var(--font-text); /* 页面大标题：小屏 32，中屏 40，大屏 48 */
  --text-code: 600 48px / 1.0834 var(--font-text); /* 2FA 验证码：小屏 48，中屏以上 64 */
  --text-title: 600 24px / 1.1667 var(--font-text); /* 小节标题、块里的大数值：小屏 24，中屏以上 28 */
  --text-intro: 400 19px / 1.4211 var(--font-text); /* 大标题下的引言：小屏 19，中屏以上 21 */
  --text-nav-title: 600 19px / 1.2105 var(--font-text); /* 导航栏左边的名字：小屏 19，中屏以上 21 */
  --text-headline: 600 17px / 1.4706 var(--font-text); /* 块的标题 */
  --text-body: 400 17px / 1.4706 var(--font-text); /* 正文 */
  --text-caption: 400 14px / 1.4286 var(--font-text); /* 说明、导航链接 */
  --text-caption-emphasized: 600 14px / 1.4286 var(--font-text); /* 步骤编号 */

  /* ---- 间距：4 的倍数 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px; /* 块与块之间 */
  --space-6: 24px;
  --space-8: 32px;
  --space-section: 48px; /* 大段落之间：小屏 48，中屏以上 64 */
  --page-padding-top: 40px; /* 导航栏下到大标题：小屏 40，中屏 56，大屏 72 */
  --page-padding-bottom: 64px;
  --tile-padding: 24px; /* 块的内边距：小屏 24，中屏以上 32 */

  /* ---- 版面 ---- */
  --size-content: 692px; /* 内容区宽：中屏 692，大屏 980；小屏是屏宽减两边边距 */
  --page-gutter: 20px; /* 小屏两边的边距 */
  --size-tool: 692px; /* 2FA 那一块最宽这么宽，大屏上居中 */
  --size-measure: 640px; /* 引言、说明一行最长 */
  --size-nav: 48px; /* 导航栏高，也是导航链接的点击高度 */
  --size-hit: 44px; /* 最小点击区域 */
  --size-field: 48px; /* 输入框高 */
  --size-icon: 20px; /* 线路、网站前面的状态图标 */
  --size-icon-small: 17px; /* 跟在一行字前面的状态图标 */
  --size-icon-chevron: 12px; /* 「重新检测 ›」后面的箭头 */
  --size-icon-hero: 56px; /* 大标题上面的结论图标 */
  --size-badge: 28px; /* 步骤编号的圆 */
  --size-stat-min: 120px; /* 线路、网站每格至少这么宽：大屏上四个网站一行，手机上两个一行 */
  --size-split-min: 240px; /* 块里左右两栏，每栏至少这么宽，不够就上下排 */
  --size-progress: 4px; /* 验证码倒计时条的粗细 */
  --size-progress-width: 240px; /* 倒计时条的长度 */
  --size-visually-hidden: 1px; /* 只给读屏软件看的文字 */
  --hairline: 1px; /* 分隔线；高分屏上是物理像素的一条 */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --button-padding: 12px 22px; /* 官网 .button-elevated */
  --bar-material: saturate(180%) blur(20px); /* 官网 localnav 吸顶时的毛玻璃 */
  --z-nav: 10; /* 导航栏压在内容上面；页面上只有这一层 */

  /* ---- 圆角 ---- */
  --radius-tile: 18px; /* 内容块 */
  --radius-field: 12px; /* 输入框（官网表单的圆角） */
  --radius-capsule: 980px; /* 胶囊形按钮、编号圆点（官网就写 980px） */

  /* ---- 动效：只表达状态变化，减弱动效时关掉 ---- */
  --duration-fast: 150ms; /* 悬停、按下 */
  --duration-base: 250ms; /* 结论换成新的那一下 */
  --duration-tick: 250ms; /* 倒计时条两次刷新之间（和 otp.js 的 TICK_MS 一样，条走得连贯） */
  --duration-spin: 1s; /* 等待图标转一圈 */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
  --scale-enter: 0.85; /* 结论图标出现时从这么大放到原大 */
  --rotate-closed: 90deg; /* 「了解更多」收起时箭头朝下 */
  --rotate-open: -90deg; /* 点开后朝上 */
}

/* 深色：官网 .theme-dark 的那一套 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: rgb(0, 0, 0); /* --sk-fill */
    --color-surface: rgb(29, 29, 31); /* --sk-fill-tertiary */
    --color-field: rgb(0, 0, 0);
    --color-fill: rgba(255, 255, 255, 0.2); /* --sk-fill-gray-quaternary-alpha */
    --color-bar: rgba(22, 22, 23, 0.8); /* localnav 深色吸顶 */
    --color-label: rgb(245, 245, 247); /* --sk-glyph-gray */
    --color-label-secondary: rgb(134, 134, 139); /* --sk-glyph-gray-secondary */
    --color-label-tertiary: rgb(110, 110, 115); /* --sk-glyph-gray-tertiary */
    --color-separator: rgba(255, 255, 255, 0.24); /* --sk-fill-gray-tertiary-alpha */
    --color-field-border: rgb(110, 110, 115); /* --sk-fill-gray-secondary */
    --color-link: rgb(41, 151, 255); /* --sk-body-link-color */
    --color-success: rgb(3, 161, 14); /* --sk-glyph-green */
    --color-warning: rgb(255, 121, 27); /* --sk-glyph-orange */
    --color-danger: rgb(255, 48, 55); /* --sk-glyph-red */
  }
}

/* 系统里开了「增强对比度」：次要文字直接用主文字色，分隔线加深 */
@media (prefers-contrast: more) {
  :root {
    --color-label-secondary: var(--color-label);
    --color-separator: var(--color-field-border);
  }
}

/* 高分屏：分隔线用一个物理像素 */
@media (min-resolution: 2dppx) {
  :root {
    --hairline: 0.5px;
  }
}

/* 中屏（735–1068，竖着的平板、窄窗口） */
@media (min-width: 735px) {
  :root {
    --text-hero: 600 40px / 1.1 var(--font-text);
    --text-code: 600 64px / 1.0625 var(--font-text);
    --text-title: 600 28px / 1.1429 var(--font-text);
    --text-intro: 400 21px / 1.381 var(--font-text);
    --text-nav-title: 600 21px / 1.1429 var(--font-text);
    --space-section: 64px;
    --page-padding-top: 56px;
    --page-padding-bottom: 80px;
    --tile-padding: 32px;
  }
}

/* 大屏（≥1069，电脑） */
@media (min-width: 1069px) {
  :root {
    --text-hero: 600 48px / 1.0834 var(--font-text);
    --size-content: 980px;
    --page-padding-top: 72px;
  }
}

/* 自检域名两页（线路自检、2FA 验证码）的组件样式。照苹果官网的网页做法，不是 iOS App 的样子：
   - 顶上一条吸顶的导航栏（左边名字、右边两页的链接，半透明）；
   - 每页先是居中的大标题和一句引言，要做的事（按钮、链接）紧跟在下面；
   - 明细是白底上的浅灰圆角块，按网页栅格排：小屏一列、中屏两列、大屏三列（断点和官网一样，735 / 1069）；
   - 最底下是「了解更多」：要解释的都折叠在这里，点开才看，页面上只留短词短句。
   这里只能用 tokens.css 里的 var(--…)：不写死颜色、尺寸、时长，也不定义自己的变量；@media 里只能写那两个断点
   （tests/test_dashboard.py 会查）。状态色只上图标，文字一律用文字色，保证读得清。 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-label);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  width: min(var(--size-content), 100% - 2 * var(--page-gutter));
  margin: 0 auto;
  padding-bottom: var(--page-padding-bottom);
}

.visually-hidden {
  position: absolute;
  width: var(--size-visually-hidden);
  height: var(--size-visually-hidden);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 导航栏：吸顶，半透明，内容从底下滑过去时透出来 ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
  border-bottom: var(--hairline) solid var(--color-separator);
  background: var(--color-bar);
  -webkit-backdrop-filter: var(--bar-material);
  backdrop-filter: var(--bar-material);
}

.nav-content {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  width: min(var(--size-content), 100% - 2 * var(--page-gutter));
  min-height: var(--size-nav);
  margin: 0 auto;
}

.nav-title {
  min-width: 0;
  overflow: hidden;
  color: var(--color-label);
  font: var(--text-nav-title);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex: none;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 链接撑满导航栏的高度，好点；当前这一页是灰的、不再是链接的样子（和官网一样） */
.nav-link {
  display: flex;
  align-items: center;
  min-height: var(--size-nav);
  color: var(--color-label);
  font: var(--text-caption);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-link[aria-current="page"] {
  color: var(--color-label-secondary);
  cursor: default;
}

@media (hover: hover) {
  .nav-link:not([aria-current="page"]):hover {
    color: var(--color-link);
  }
}

/* ---- 大标题区：居中，结论或这一页是干什么的，要做的事紧跟在下面 ---- */

.hero {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding-top: var(--page-padding-top);
  text-align: center;
}

.verdict {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}

.verdict-icon {
  width: var(--size-icon-hero);
  height: var(--size-icon-hero);
}

.verdict-icon.is-new {
  animation: enter var(--duration-base) var(--ease-out);
}

@keyframes enter {
  from {
    opacity: 0;
    transform: scale(var(--scale-enter));
  }
}

.verdict-text {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.hero-title {
  margin: 0;
  font: var(--text-hero);
  text-wrap: balance;
}

.hero-intro {
  max-width: var(--size-measure);
  margin: 0;
  color: var(--color-label-secondary);
  font: var(--text-intro);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
}

.hero-status,
.hero-meta,
.hero-note {
  max-width: var(--size-measure);
  margin: 0;
  color: var(--color-label-secondary);
  font: var(--text-caption);
  text-wrap: pretty;
}

.hero-status:empty {
  display: none;
}

/* ---- 段落：居中的小节标题 ---- */

.section {
  margin-top: var(--space-section);
}

.section-title {
  margin: 0 0 var(--space-6);
  font: var(--text-title);
  text-align: center;
  text-wrap: balance;
}

.section-note {
  margin: var(--space-3) 0 0;
  color: var(--color-label-secondary);
  font: var(--text-caption);
  text-align: center;
}

/* 自查步骤：真的有先后，所以编号；一块浅灰底，居中，不比引言宽 */
.steps {
  max-width: var(--size-measure);
  margin: 0 auto;
  padding: var(--space-2) var(--tile-padding);
  border-radius: var(--radius-tile);
  background: var(--color-surface);
  list-style: none;
  counter-reset: step;
}

.step {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  counter-increment: step;
}

.step + .step {
  border-top: var(--hairline) solid var(--color-separator);
}

.step::before {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--size-badge);
  height: var(--size-badge);
  border-radius: var(--radius-capsule);
  background: var(--color-background);
  font: var(--text-caption-emphasized);
  content: counter(step);
}

/* ---- 明细：浅灰圆角块，按栅格排 ---- */

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.tile {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
  padding: var(--tile-padding);
  border-radius: var(--radius-tile);
  background: var(--color-surface);
}

/* 大屏三列：线路 | 出口（两格）；常用网站、账号各占一行。中屏以下一块一行 */
@media (min-width: 1069px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tile-wide {
    grid-column: span 2;
  }

  .tile-full {
    grid-column: 1 / -1;
  }
}

/* 块里左右两栏（出口：左边 IP 和归属，右边 IP 类型和风险分），放不下就上下排 */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-split-min), 1fr));
  gap: var(--space-5) var(--space-8);
}

.stack {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.tile-header {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}

.tile-label {
  margin: 0;
  font: var(--text-headline);
}

.tile-accessory {
  color: var(--color-label-secondary);
  font: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

/* 块里最要紧的那个数：只在空格处换行（「家宽 / 运营商」不拆成「运营 / 商」），整串放不下才硬断（比如 IPv6） */
.tile-value {
  margin: 0;
  font: var(--text-title);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tile-group {
  display: grid;
  gap: var(--space-1);
}

.tile-text {
  margin: 0;
  font: var(--text-body);
  overflow-wrap: anywhere;
}

.tile-text-secondary {
  color: var(--color-label-secondary);
}

.tile-caption {
  margin: 0;
  color: var(--color-label-secondary);
  font: var(--text-caption);
  text-wrap: pretty;
}

/* IP 类型、风险分：小字的名字，下面是值 */
.facts {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}

.fact {
  display: grid;
  gap: var(--space-1);
}

.fact dd {
  margin: 0;
}

.fact-value {
  font: var(--text-headline);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 分数后面的「/ 100」：小一号、灰色，不和分数抢 */
.value-unit {
  color: var(--color-label-secondary);
  font: var(--text-caption);
}

/* 线路、网站：一格一项，图标在左，名字下面一行小字；格子按宽度自己排几列 */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-stat-min), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 线路只有两三台，一台一行，说明不会被挤成两截 */
.stats-list {
  grid-template-columns: minmax(0, 1fr);
}

/* 中屏线路块独占一行，两台服务器并排；大屏线路块只占一格，又回到一列 */
@media (min-width: 735px) {
  .stats-list {
    grid-template-columns: repeat(auto-fit, minmax(var(--size-stat-min), 1fr));
  }
}

@media (min-width: 1069px) {
  .stats-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stat {
  display: grid;
  grid-template-columns: var(--size-icon) minmax(0, 1fr);
  column-gap: var(--space-2);
  align-content: start;
  align-items: center;
}

.stat-icon {
  width: var(--size-icon);
  height: var(--size-icon);
}

.stat-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.stat-caption {
  grid-column: 2;
  color: var(--color-label-secondary);
  font: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

/* 一句前面带状态图标的话（「经过……」「没有代理标记」「这台设备的时间是准的」） */
.status {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.icon-small {
  flex: none;
  width: var(--size-icon-small);
  height: var(--size-icon-small);
}

/* ---- 状态图标：只有图标带颜色 ---- */

.tone-ok {
  color: var(--color-success);
}

.tone-warn {
  color: var(--color-warning);
}

.tone-bad {
  color: var(--color-danger);
}

.tone-wait {
  color: var(--color-label-tertiary);
  animation: spin var(--duration-spin) linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* ---- 输入框：白底、灰边、圆角（官网表单的样子），按钮跟在右边 ---- */

.field-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.field {
  flex: 1;
  min-width: 0;
  height: var(--size-field);
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--color-field-border);
  border-radius: var(--radius-field);
  background: var(--color-field);
  color: var(--color-label);
  font: var(--text-body);
}

.field::placeholder {
  color: var(--color-label-secondary);
}

.field:focus {
  border-color: var(--color-link);
  outline: var(--focus-ring-width) solid var(--color-link);
  outline-offset: 0;
}

.field[aria-invalid="true"] {
  border-color: var(--color-danger);
}

/* ---- 按钮：胶囊形；实心是这一页最该点的，描边的是次要的，「重新检测 ›」这种是链接 ---- */

.button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-capsule);
  font: var(--text-body);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.button-primary {
  background: var(--color-button);
  color: var(--color-on-button);
}

.button-secondary {
  border-color: var(--color-link);
  background: transparent;
  color: var(--color-link);
}

@media (hover: hover) {
  .button-primary:not(:disabled):hover,
  .button-secondary:not(:disabled):hover {
    border-color: var(--color-button-hover);
    background: var(--color-button-hover);
    color: var(--color-on-button);
  }
}

.button-primary:not(:disabled):active,
.button-secondary:not(:disabled):active {
  border-color: var(--color-button-active);
  background: var(--color-button-active);
  color: var(--color-on-button);
}

.button:disabled {
  border-color: transparent;
  background: var(--color-fill);
  color: var(--color-label-secondary);
  cursor: default;
}

.link {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-height: var(--size-hit);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: var(--text-body);
  cursor: pointer;
}

@media (hover: hover) {
  .link:not(:disabled):hover {
    text-decoration: underline;
  }
}

.link:disabled {
  color: var(--color-label-secondary);
  cursor: default;
}

.icon-chevron {
  width: var(--size-icon-chevron);
  height: var(--size-icon-chevron);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-link);
  outline-offset: var(--focus-ring-offset);
}

/* ---- 2FA：一块居中的工具，粘密钥、看验证码、复制 ---- */

.tool {
  display: grid;
  gap: var(--space-4);
  max-width: var(--size-tool);
  margin: var(--space-section) auto 0;
  padding: var(--tile-padding);
  border-radius: var(--radius-tile);
  background: var(--color-surface);
}

.tool-error {
  margin: 0;
  font: var(--text-caption);
}

.tool-empty {
  margin: 0;
  padding: var(--space-8) 0;
  color: var(--color-label-secondary);
  font: var(--text-caption);
  text-align: center;
  text-wrap: balance;
}

/* 时间提示可能有两三行：整块居中，字左对齐，图标对着第一行 */
.tool-clock {
  justify-self: center;
  align-items: flex-start;
  max-width: var(--size-measure);
}

.otp {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-4) 0;
  text-align: center;
}

.otp-code {
  margin: 0;
  font: var(--text-code);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 倒计时条：剩下的比例，脚本每 250ms 改一次 scaleX，过渡把两次之间补连贯；最后 5 秒变橙 */
.progress {
  width: min(100%, var(--size-progress-width));
  height: var(--size-progress);
  overflow: hidden;
  border-radius: var(--radius-capsule);
  background: var(--color-fill);
}

.progress-bar {
  height: 100%;
  background: var(--color-link);
  transform-origin: left;
  transition: transform var(--duration-tick) linear;
}

.progress-bar.is-ending {
  background: var(--color-warning);
}

.otp .button {
  margin-top: var(--space-2);
}

/* ---- 了解更多：要解释的放这里，点开才看（官网常见问题的折叠样式：上下细线、右边的箭头点开转向） ---- */

.disclosures {
  max-width: var(--size-measure);
  margin: 0 auto;
  border-top: var(--hairline) solid var(--color-separator);
}

.disclosure {
  border-bottom: var(--hairline) solid var(--color-separator);
}

.disclosure summary {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  min-height: var(--size-hit);
  padding: var(--space-4) 0;
  font: var(--text-headline);
  list-style: none;
  cursor: pointer;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure-icon {
  flex: none;
  width: var(--size-icon-chevron);
  height: var(--size-icon-chevron);
  color: var(--color-label-secondary);
  transform: rotate(var(--rotate-closed));
  transition: transform var(--duration-fast) var(--ease-out);
}

.disclosure[open] .disclosure-icon {
  transform: rotate(var(--rotate-open));
}

.disclosure-body {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  color: var(--color-label-secondary);
  font: var(--text-body);
}

.disclosure-body p {
  margin: 0;
  text-wrap: pretty;
}

.disclosure-body strong {
  color: var(--color-label);
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tone-wait,
  .verdict-icon.is-new {
    animation: none;
  }

  .button,
  .nav-link,
  .progress-bar,
  .disclosure-icon {
    transition: none;
  }
}