/* anyns.io 门面样式(docs/ANYNS.md)。
 *
 * 与论坛完全分离:不引 theme-base.css / style.css。明暗默认跟随 prefers-color-scheme,
 * 2026-08-16 补上手动切换器(header 里的 .an-theme 三态按钮:跟随系统 / 浅色 / 深色)。
 * 选择存本域 localStorage['theme'](与论坛同键名,但 localStorage 按源隔离,两个域各记
 * 各的,不存在「跨域读不到」的老问题);渲染前由 head 里阻塞的 /js/theme-init.js 写成
 * 根元素的 data-theme(已解析成 light|dark)+ data-theme-mode(用户选的档,驱动按钮图标)。
 *
 * 视觉方向「数据即首屏」:首屏重心是一段真的 dig 输出,不是标语;集群结构用按 POP
 * 数成比例的实心条,不是特性卡片格。
 * 色彩结构(2026-08-07 用户拍板,替代旧「单强调色酸绿」口径):主强调 = 鲜橘红,
 * 只用在关键数字/实心块/主 CTA;集群条走暖色阶梯(红/橙/琥珀,按 POP 权重);
 * live 状态点用语义绿。仍然克制:正文/边框/底色全部中性,暖色只出现在数据和动作上。
 */

:root {
  --an-paper: #fbfaf6;
  --an-ink: #131410;
  --an-muted: #6e7264;
  --an-rule: #e4e1d6;
  --an-panel: #f4f2ea;
  /* panel 加深一档(2026-08-25):首页集群卡专用,让卡片相对纸面轮廓更实
     (卡内文字比 hero 缩进 26px,拍板走「加重卡片存在感」而非负外边距对齐)。
     深色模式卡片本来就靠比纸面亮一档分层,不加深,沿用 panel 值。 */
  --an-panel-deep: #ece9da;
  /* 2026-08-07 用户拍板换主色:酸绿 #cdf23f → 鲜橘红(对比稿 C 方向,Oracle/Cloudflare
     一路的暖色但更饱和)。同时把「单强调色」升级成有层次的暖色结构:
     accent 主红 + 集群条阶梯(主红/浅橙/琥珀,色彩权重跟 POP 数据权重一致)+ live 语义绿。 */
  --an-accent: #f04e23;
  --an-accent-ink: #cc3a14; /* 纸面上可读的强调色文字 */
  /* 集群滑条装置色(2026-08-11 用户拍板:七彩分段条退役,换 vps.net 2010 滑条复刻;
     砖体金色两主题共用写死在规则里,这里只放随主题翻转的底板/线框/圆钮件)。 */
  --an-sl-edge: rgba(19, 20, 16, .35); /* 空砖线框主棱 */
  --an-sl-edge2: rgba(19, 20, 16, .14);/* 空砖线框背面棱 */
  --an-sl-knob1: #fffdf7;              /* 圆钮渐变上 */
  --an-sl-knob2: #ddd9cc;              /* 圆钮渐变下 */
  --an-sl-knob-bd: #b3aea0;            /* 圆钮描边 */
  --an-sl-knob-ln: #a8a394;            /* 圆钮中缝刻线 */
  --an-sl-rail-hi: 19, 20, 16;         /* 凹槽轨发丝线基色(rgb) */
  --an-live: #3fae5a; /* live 脉冲点:状态语义用绿,不与主红抢戏 */
  /* 告警琥珀:唯一真相源(2026-08-13 立)。此前散落 #b45309/#fbbf24 硬编码,且退役的
     --an-seg3 还有四处残留引用(渲染成透明,warn 状态点/横幅左条全部隐形),一并收口。 */
  --an-warn: #b45309;
  /* Cloudflare 云朵专用色(2026-08-16 对着官方 dash 取值):代理状态图标是品牌橙
     #F6821F,不是本站主强调色——本站 --an-accent 是鲜橘红 #f04e23,画成云朵偏红,
     和用户在 CF 后台看到的对不上。云朵是「别人家产品的状态指示」,跟着 CF 走,
     所以单独立变量,别改回 --an-accent。仅 DNS 是浅灰实心云(官方 oklch(.87 0 0),
     这里换成与 --an-rule 同调的暖灰)。 */
  --an-cf-orange: #f6821f;
  --an-cf-cloud-off: #d3d0c5;
  /* 终端卡底色:两种模式都是深底(全页唯一深色大块),深色模式只抬一档做分层。
     从 .an-term 局部变量提到根上,是为了让下面两块深色入口能一处切换(局部声明会
     压过根上的值,留在 .an-term 里就得再写第三处覆盖)。 */
  --an-term-bg: #16150f;
  --an-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --an-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;

  /* ── 深色取值:唯一真相源 ──────────────────────────────────────────────
     只有在这里改颜色。下面两块深色入口只做「把这些值赋给通用名」,不放字面值。 */
  --an-dk-paper: #0e100b;
  --an-dk-ink: #f1f0e6;
  --an-dk-muted: #8b9080;
  --an-dk-rule: #262922;
  --an-dk-panel: #161911;
  --an-dk-accent-ink: #ff7a54;
  --an-dk-warn: #fbbf24;
  /* 品牌橙不随主题翻(CF 自己也不翻);仅 DNS 的浅灰云要压暗,否则深底上一朵
     近白的云比橙云还抢眼,状态强弱就反了。 */
  --an-dk-cf-cloud-off: #3e4336;
  /* 滑条装置深色件:线框棱线换米白系;砖体金色是发光体不随主题翻。 */
  --an-dk-sl-edge: rgba(241, 240, 230, .38);
  --an-dk-sl-edge2: rgba(241, 240, 230, .15);
  --an-dk-sl-knob1: #3c4034;
  --an-dk-sl-knob2: #262a1f;
  --an-dk-sl-knob-bd: #4a4e41;
  --an-dk-sl-knob-ln: #6b7060;
  --an-dk-sl-rail-hi: 241, 240, 230;
  --an-dk-term-bg: #191813;
}

/* ── 深色的两个入口(2026-08-16 加手动切换器时拆出来)────────────────────
 * ① @media 块 = 无 JS 兜底:theme-init.js 没跑过,根上就没有 data-theme,明暗跟随系统
 *    (排除 data-theme="light" 是为了让「系统深色 + 用户手选浅色」真的变浅);
 * ② [data-theme="dark"] = 用户选择:theme-init.js 在首帧渲染前写好,auto 档也在这里
 *    落成解析后的结果。
 * 两块的内容必须逐字一致 —— 新增一个随主题翻转的令牌,①②都要补同一行。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --an-paper: var(--an-dk-paper);
    --an-ink: var(--an-dk-ink);
    --an-muted: var(--an-dk-muted);
    --an-rule: var(--an-dk-rule);
    --an-panel: var(--an-dk-panel);
    --an-panel-deep: var(--an-dk-panel);
    --an-accent-ink: var(--an-dk-accent-ink);
    --an-warn: var(--an-dk-warn);
    --an-cf-cloud-off: var(--an-dk-cf-cloud-off);
    --an-sl-edge: var(--an-dk-sl-edge);
    --an-sl-edge2: var(--an-dk-sl-edge2);
    --an-sl-knob1: var(--an-dk-sl-knob1);
    --an-sl-knob2: var(--an-dk-sl-knob2);
    --an-sl-knob-bd: var(--an-dk-sl-knob-bd);
    --an-sl-knob-ln: var(--an-dk-sl-knob-ln);
    --an-sl-rail-hi: var(--an-dk-sl-rail-hi);
    --an-term-bg: var(--an-dk-term-bg);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --an-paper: var(--an-dk-paper);
  --an-ink: var(--an-dk-ink);
  --an-muted: var(--an-dk-muted);
  --an-rule: var(--an-dk-rule);
  --an-panel: var(--an-dk-panel);
  --an-panel-deep: var(--an-dk-panel);
  --an-accent-ink: var(--an-dk-accent-ink);
  --an-warn: var(--an-dk-warn);
  --an-cf-cloud-off: var(--an-dk-cf-cloud-off);
  --an-sl-edge: var(--an-dk-sl-edge);
  --an-sl-edge2: var(--an-dk-sl-edge2);
  --an-sl-knob1: var(--an-dk-sl-knob1);
  --an-sl-knob2: var(--an-dk-sl-knob2);
  --an-sl-knob-bd: var(--an-dk-sl-knob-bd);
  --an-sl-knob-ln: var(--an-dk-sl-knob-ln);
  --an-sl-rail-hi: var(--an-dk-sl-rail-hi);
  --an-term-bg: var(--an-dk-term-bg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--an-paper);
  color: var(--an-ink);
  font-family: var(--an-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 容器宽度对齐论坛(2026-08-07 用户拍板):n.ht vanilla-layout 实测 .content
   max-width 1224px + padding 24px(border-box,内容净宽 1176),此处取同值。 */
.an-wrap { max-width: 1224px; margin: 0 auto; padding: 0 24px; }
.an-page a { color: inherit; text-decoration: none; }

/* ── 文案占位 ───────────────────────────────────────────────────────────
 * 需要用户逐字原文的位置(定位/说明/署名)。承诺、品牌来历、产品阶段定位一律
 * 不由代码代笔(feedback_user_copy_voice)。总闸 anyns.enabled 保持 0,直到原文到位。 */
.an-ph {
  background: linear-gradient(transparent 62%, var(--an-accent) 62%);
  padding: 0 2px;
}
.an-ph::after {
  content: attr(data-ph-note);
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--an-accent-ink);
  vertical-align: super;
  margin-left: 4px;
  opacity: 0.75;
}

/* ── header ─────────────────────────────────────────────────────────── */
.an-header { border-bottom: 1px solid var(--an-rule); }
.an-hrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  flex-wrap: wrap;
}
/* 标志 = 带尾点的 FQDN。尾点是 DNS 原生记号,也正是 Host 归一化必须砍掉的那一刀。
   .an-dot 按 2026-08-07 方案 A 稿包住「.io.」整段(不只是两个点),整段强调色。 */
.an-mark {
  font-family: var(--an-mono);
  /* 2026-08-25 用户拍板 19px→23px(对着首屏 40px 的 h1,19px 字标压不住场;
     候选 21/23 两档截图比选定 23)。环图标同步 17→21px 等比放大。 */
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  /* 标志图标字形(2026-08-18 用户拍板方案②):favicon 里那个「@ 眼幽灵」搬进头部,
     但只留环、去掉白盘——那个圈同时就是 @ 的外弧,拆盘留环才还认得出 @;拆了环只剩
     一个圆点,@ 就没了。白实心盘留着的话在深色头部上会发光成一颗按钮。
     几何比 web/anyns-favicon.svg 单独调过:内圈 r 14→14.5、描边 8→8.5,否则 17px 上
     中间那个洞会糊成一团(512 的图直接缩不能用)。改形状只动这一条。 */
  --an-mark-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='8.5' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='43'/%3E%3Ccircle cx='46.5' cy='50' r='14.5'/%3E%3Cpath d='M61 35L61 56Q61 64.5 68 64.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* 图标画在 ::before 上,不往 15 个页面各插一个 span:形状/颜色/间距全在 CSS 一处改,
   也不怕将来 i18n 往 .an-mark 上写 textContent 把子元素抹掉(角标那次的坑)。
   颜色走 currentColor = 跟字标同色、两种主题自动翻;favicon 的深紫 #2e1065 不在本站
   调色板里(板上只有橘红 + 中性),搬进来会跟 .io. 的橘红打架,所以头部这版不用紫。 */
.an-mark::before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-right: 8px;
  /* 字标全小写,圆环按 x-height 居中而不是按基线坐地(基线对齐会显得整个图标下坠)。
     19px 版 4 倍图实测:-3px 时环心比「a」的 x-height 中线高 0.375px → 真中线
     ≈基线上 0.27em(SF Mono/Consolas 的 x-height 比例都落在这附近)。
     23px/21px 环按同锚点换算:0.27em×23≈6.2,10.5-6.2≈4.3,4 倍图复验过。
     要再动这个值,重新量别凭感觉推。 */
  vertical-align: -4.3px;
  background-color: currentColor;
  -webkit-mask: var(--an-mark-glyph) center / contain no-repeat;
  mask: var(--an-mark-glyph) center / contain no-repeat;
}
.an-mark .an-dot { color: var(--an-accent-ink); }
.an-nav {
  display: flex;
  gap: 26px;
  font-family: var(--an-mono);
  font-size: 13px;
  color: var(--an-muted);
}
/* 中英切换(2026-08-11):pill 状与内容链接区分;文案本身就是 i18n key
   anyns.lang_switch(中文页显示 EN / 英文页显示 中文),交互在 anyns-lang.js。 */
.an-lang {
  border: 1px solid var(--an-rule);
  padding: 1px 9px;
  border-radius: 999px;
}
.an-lang:hover { border-color: var(--an-muted); }
/* 主题切换(2026-08-16):与中英切换同一枚 pill,只是装图标不装字。三态循环
   跟随系统 → 浅色 → 深色,交互在 anyns-theme.js。button 不继承 nav 的字体/字色,
   font/color 要显式接回来,否则药丸高度与相邻 .an-lang 对不齐、字色变系统默认。 */
.an-theme {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--an-rule);
  padding: 1px 9px;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.an-theme:hover { border-color: var(--an-muted); color: var(--an-ink); }
.an-theme svg { display: block; }
/* 三图标只显示当前档那个,纯 CSS 按 html[data-theme-mode] 判(theme-init.js 在 head
   阻塞阶段就写好了该属性,首帧即正确,没有 hydrate 时的图标跳变);没有属性 =
   无 JS/旧存量,按「跟随系统」显示。同论坛 .theme-toggle 的做法。 */
.an-ticon { display: none; }
html[data-theme-mode="auto"] .an-ticon-auto,
html:not([data-theme-mode]) .an-ticon-auto,
html[data-theme-mode="light"] .an-ticon-sun,
html[data-theme-mode="dark"] .an-ticon-moon { display: inline-flex; }

/* ── hero:方案 A 两栏(2026-08-07 用户拍板;打字机同日移除,勿再加回)──────
 * 左=文案(标题/卖点行/说明/CTA/内联数字),右=深色终端卡(.an-term)。
 * 窄屏 flex-wrap,终端卡整卡落到文案下方。 */
.an-hero { padding: 40px 0 36px; }
.an-hero-cols {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.an-hero-main { flex: 1 1 380px; min-width: 0; }
.an-hero h1 {
  font-family: var(--an-mono);
  font-weight: 500;
  /* 两栏后左栏约 480px,字号比单栏版收一档;「权威 DNS 托管」单行约 13ch,
     40px 时 ~350px 放得下。改标题文案要重新量断行。 */
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}
/* 卖点行:全部为已上线能力的事实名词,强调色文字。 */
.an-tagline {
  margin-top: 12px;
  font-family: var(--an-mono);
  font-size: 15px;
  color: var(--an-accent-ink);
}
.an-sub { margin-top: 14px; max-width: 52ch; font-size: 15.5px; color: var(--an-muted); }
/* 内联关键数字(替代旧四格 an-stats):数字墨色,红色留给大面积块。 */
.an-hstats {
  margin-top: 24px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--an-mono);
  font-size: 12px;
  color: var(--an-muted);
}
.an-hstats b { font-size: 17px; font-weight: 500; color: var(--an-ink); margin-right: 2px; }
.an-cta {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--an-mono);
  font-size: 13.5px;
}
/* 必须带 .an-page 前缀:上面 `.an-page a { color: inherit }` 权重 0-1-1,
   裸 `.an-btn`(0-1-0)压不住,实心按钮会变成同色字同色底(明暗模式都隐形)。
   两条要同进同退——只给第一条提权重,ghost(0-2-0)反过来被压,轮到它隐形。 */
/* 按钮黑白主调(2026-08-07 用户按 Oracle 样式拍板):主=墨底反色字,副=透明底墨字墨边,
   同圆角;红色不进按钮,留给数据元素(终端卡/集群条/logo)。暗色模式变量自动反转
   (主按钮变浅底深字,与 Oracle 暗色站同路)。 */
.an-page .an-btn {
  padding: 11px 20px;
  border: 1px solid var(--an-ink);
  background: var(--an-ink);
  color: var(--an-paper);
  border-radius: 6px;
}
.an-page .an-btn.an-ghost { background: transparent; color: var(--an-ink); }

/* ── 终端卡:首屏主视觉(方案 A)──────────────────────────────────────
 * 两种模式都是深底——亮色页面里它是全页唯一的深色大块,给首屏一个重心。
 * 前景两色不随主题翻,留在这里;底色 --an-term-bg 在根令牌里(深色模式抬一档)。 */
.an-term {
  --an-term-fg: #edecdf;
  --an-term-mut: #8a8f7c;
  flex: 1 1 400px;
  min-width: 0;
  background: var(--an-term-bg);
  color: var(--an-term-fg);
  border-radius: 6px;
  font-family: var(--an-mono);
}
.an-term-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--an-term-mut);
}
.an-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--an-live);
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.an-term pre {
  font-family: var(--an-mono);
  font-size: 13px;
  line-height: 1.85;
  padding: 14px 16px;
  overflow-x: auto;
}
.an-tp { color: var(--an-accent); }
.an-tdim { color: var(--an-term-mut); }
/* 终端尾部静止光标:等待输入的记号,不闪(打字机已移除,别再加动画)。 */
.an-tcur {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: var(--an-term-fg);
  vertical-align: -2px;
}
.an-dim { color: var(--an-muted); }
/* 红底配白字;明暗同值,深浅底上都成立。 */
.an-hit { background: var(--an-accent); color: #fff; padding: 0 3px; }
/* 终端卡底栏:四组 NS 的实测延迟 + 一行说明(SSR 直出、无 JS,docs/ANYNS.md §12.10)。
 * 与卡头同一套字号/字距语言;数字用前景色,组名与说明用暗色,不抢 pre 里的主红高亮。 */
.an-term-ft {
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.an-term-ns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 12px;
  color: var(--an-term-fg);
}
.an-term-ns b { font-weight: 500; color: var(--an-term-mut); margin-right: 2px; }
.an-term-ns em { font-style: normal; color: var(--an-term-mut); }
.an-term-note {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--an-term-mut);
}

/* ── section ────────────────────────────────────────────────────────── */
/* 节间不再画横贯线(2026-08-07 减线拍板):区块少,an-shd 小节标题+留白即分区;
   全页只保留 header/footer 两条框架线。 */
.an-sec { padding: 64px 0; }
/* 首页集群节单独收紧(2026-08-07 一屏化):hero 与卡片间隔靠这里控制。 */
#cluster.an-sec { padding: 16px 0 48px; }
.an-shd {
  font-family: var(--an-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--an-muted);
  text-transform: uppercase;
  margin-bottom: 34px;
}

/* ── 数据卡片(2026-08-07 卡片化方案 A):浅 panel 底,与深色终端卡一浅一深。
 * 通用容器,目前用于首页集群结构;新数据面板可复用。 */
.an-card {
  background: var(--an-panel);
  border: 1px solid var(--an-rule);
  border-radius: 8px;
  padding: 22px 26px;
}
.an-card .an-shd { margin-bottom: 14px; }
.an-card .an-sub { margin-top: 18px; font-size: 13.5px; }
/* 只深首页集群这一张卡:an-card 还被登录/注册那批账号页复用,不整类加深。 */
#cluster .an-card { background: var(--an-panel-deep); }

/* ── 集群结构:节点滑条(2026-08-11 用户拍板,替代七彩分段条) ──────────
 * vps.net 2010 订购页滑条纯 CSS 复刻(考古规格:等距 3D 砖、空线框、37px 步距咬合、
 * 累积点亮、波浪 stagger)。烘焙参数(用户逐项试选):饱和 saturate(.8)、整体 zoom 1.2、
 * 10 格轨道、亮格上限 7(= ns2 实际 POP 数;8~10 恒为空线框 = 扩容余量,POP 扩容后
 * 改 anyns-slider.js 的 MAX 即可点亮更远)。砖块 DOM 由 anyns-slider.js 生成。 */
/* 不再垫底板(2026-08-11 用户点出卡中卡):轨道与砖带直接坐在 an-card 卡面上,
   顶部留出圆钮伸头的空间;左对齐与下方信息行同一起点(同日用户拍板,勿改回居中)。 */
.an-slider { filter: saturate(.8); zoom: 1.2; width: max-content; margin: 12px 0 2px; }
.an-srail {
  width: 370px; height: 5px; border-radius: 2.5px; margin: 10px 0 17px;
  background:
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(var(--an-sl-rail-hi), .12) 36px 37px),
    linear-gradient(180deg,
      rgba(var(--an-sl-rail-hi), .38) 0 1px, rgba(var(--an-sl-rail-hi), .32) 1px 2px,
      rgba(var(--an-sl-rail-hi), .26) 2px 3px, rgba(var(--an-sl-rail-hi), .20) 3px 4px,
      rgba(var(--an-sl-rail-hi), .16) 4px 5px);
}
.an-sband {
  position: relative; width: 370px; height: 37px; /* 27 盒体 + 10 倒影 */
  touch-action: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; outline: none;
}
.an-sband:focus-visible { outline: 2px dashed var(--an-accent-ink); outline-offset: 8px; }
.an-scell { position: absolute; top: 0; width: 42px; height: 37px; }
/* 空砖 = 零填充线框立方(能看穿背景;背面棱低透明度是线框立方的辨识点)。 */
.an-sln { position: absolute; background: var(--an-sl-edge); }
.an-sln.f { background: var(--an-sl-edge2); }
.an-sln.s { height: 1px; transform: rotate(-45deg); transform-origin: 0 0; }
/* 点亮层:三面 clip-path + 编号 + 倒影;色值全部来自原版精灵图逐像素采样。 */
.an-slit { position: absolute; inset: 0; opacity: 0; transition: opacity .15s ease; }
.an-scell.on .an-slit { opacity: 1; }
.an-sface { position: absolute; left: 0; top: 0; width: 42px; height: 27px; }
.an-sfe { clip-path: polygon(8px 0, 42px 0, 34px 8px, 0 8px); background: #f39e00; }
.an-sft {
  clip-path: polygon(8.4px 1px, 39.6px 1px, 33.6px 7px, 2.4px 7px);
  background:
    linear-gradient(0deg, #fffbf1 0 1.5px, transparent 1.5px),
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%),
    linear-gradient(110deg, #f2c264, #fde091 52%, #face6f);
}
.an-sff {
  clip-path: polygon(0 8px, 34px 8px, 34px 27px, 0 27px);
  background:
    linear-gradient(0deg, #ff8c00 0 1px, transparent 1px),
    linear-gradient(115deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #ffe385 8px, #ffdb78 40%, #ffc129 78%, #ffd656);
}
.an-sfs {
  clip-path: polygon(34px 8px, 42px 0, 42px 19px, 34px 27px);
  background: linear-gradient(180deg, #e48f1d, #cf7a00 35%, #cd5a00 70%, #bb3600);
}
.an-snum {
  position: absolute; left: 0; top: 12px; width: 34px;
  font: 700 10px/1 var(--an-mono);
  color: #fff; text-align: center;
  text-shadow: 0 1px 1px rgba(187, 54, 0, .55);
  pointer-events: none;
}
.an-srefl {
  position: absolute; left: 0; top: 27px; width: 42px; height: 10px;
  clip-path: polygon(0 0, 34px 0, 42px 8px, 42px 10px, 0 10px);
  background: linear-gradient(180deg, rgba(250, 158, 35, .38), rgba(250, 158, 35, 0));
}
/* 把手:小号浅色圆钮骑凹槽轨(2026-08-11 用户拍板弃原版黑玻璃电源牌),按住描边泛暖。 */
.an-sknob {
  position: absolute; top: -29px; width: 14px; height: 20px; margin-left: -7px;
  z-index: 60; cursor: grab;
  transition: left .18s cubic-bezier(.22, 1, .36, 1);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--an-sl-knob1), var(--an-sl-knob2));
  border: 1px solid var(--an-sl-knob-bd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .16);
}
.an-sknob::before {
  content: ""; position: absolute; left: 50%; top: 6px; width: 1px; height: 8px;
  margin-left: -0.5px; background: var(--an-sl-knob-ln);
}
.an-sknob.grab {
  cursor: grabbing; border-color: #d99a2b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 4px rgba(217, 154, 43, .4);
}
.an-sknob.grab::before { background: #c9963f; }

/* 档位信息行:四组全部静态渲染(SEO/i18n/无 JS 兜底);JS 就绪后卡片加 .an-live,
   只显示当前档那行。首列宽度按组名「ns1.anyns.io」(12 字符等宽)量出来的,改组名要重量。 */
.an-ginfo {
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 11px 0 0;
  font-family: var(--an-mono);
  font-size: 13.5px;
}
.an-live .an-ginfo { display: none; }
.an-live .an-ginfo.on { display: flex; }
.an-gname { font-weight: 600; width: 104px; flex: none; }
/* 组名前缀 nsX 用强调色,与首屏卖点行(.an-tagline)同色(2026-08-11 用户拍板)。 */
.an-gns { color: var(--an-accent-ink); }
.an-gtxt { font-size: 12px; color: var(--an-muted); }
.an-gmeta { color: var(--an-muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .an-slit, .an-sknob { transition: none !important; }
}

/* ── 能力表 ─────────────────────────────────────────────────────────── */
.an-cap { font-family: var(--an-mono); font-size: 13.5px; border-top: 1px solid var(--an-rule); }
.an-caprow {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--an-rule);
}
.an-capk { color: var(--an-ink); font-weight: 500; } /* 关键字列=扫读锚点,墨色立起来(2026-08-13 标题分离规范);值列保持默认 */
.an-tag {
  font-size: 10.5px;
  border: 1px solid var(--an-rule);
  padding: 1px 6px;
  margin-left: 8px;
  color: var(--an-muted);
  white-space: nowrap;
}

/* ── 文档页:传统侧栏布局(2026-08-07 用户拍板,替代单页长拉 + 锚点条)────
 * 左=章节导航(sticky,当前章红字+左红条),右=单章内容;每章独立路由,
 * 换章即换页。零 JS,普通 <a> 切换。窄屏侧栏收成顶部横排。 */
.an-doclayout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 44px;
  padding: 44px 0 72px;
}
.an-snav {
  position: sticky;
  top: 28px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--an-mono);
  font-size: 13px;
}
/* 写在 .an-page a { color: inherit }(0-1-1)之后,同权重后声明生效——勿上移。 */
.an-snav a {
  padding: 7px 12px;
  color: var(--an-muted);
  border-left: 2px solid transparent;
}
.an-snav a:hover { color: var(--an-ink); }
.an-snav a.an-son {
  color: var(--an-accent-ink);
  border-left-color: var(--an-accent);
  font-weight: 600;
}
.an-dmain { min-width: 0; }
.an-dmain h1 {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em;
}
.an-dmain > .an-sub { margin-top: 12px; font-size: 14.5px; }
/* 文档正文一律跟随内容列宽:全局 .an-sub 52ch / .an-note 68ch / .an-step p 62ch 这些
 * 写死度量放在 952px 的文档列里只占一半宽,读起来像被截断,且与同列满宽的
 * .an-code/.an-cap 左右边不齐(2026-08-13 用户提出)。文档页去掉上限,窄屏由列宽收。 */
.an-dmain > .an-sub, .an-dmain .an-note, .an-dmain .an-step p { max-width: none; }
/* 能力表里的章节链接(DDNS/ACME 行跳对应文档)。同为 0-1-1 靠声明顺序压 inherit。 */
.an-cap a { color: var(--an-accent-ink); }

/* 步骤列表(快速开始):分隔靠留白+红色编号,不用横线(2026-08-07 减线拍板)。 */
.an-steps { counter-reset: anstep; margin-top: 30px; }
.an-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 16px 0;
}
.an-step::before {
  counter-increment: anstep;
  content: counter(anstep, decimal-leading-zero);
  font-family: var(--an-mono);
  font-size: 21px;
  color: var(--an-accent-ink);
  line-height: 1.3;
}
.an-step b { display: block; font-family: var(--an-mono); font-size: 14.5px; font-weight: 600; }
.an-step p { margin-top: 6px; font-size: 14px; color: var(--an-muted); max-width: 62ch; }

/* 代码块:与首屏 dig 块同一视觉语言 */
.an-code {
  border: 1px solid var(--an-rule);
  background: var(--an-panel);
  margin: 18px 0;
}
.an-code pre {
  font-family: var(--an-mono);
  font-size: 12.5px;
  line-height: 1.8;
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--an-ink);
}
.an-code-hd {
  padding: 8px 16px;
  border-bottom: 1px solid var(--an-rule);
  font-family: var(--an-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--an-muted);
  text-transform: uppercase;
}

/* 行内代码 */
.an-doc code {
  font-family: var(--an-mono);
  font-size: 0.92em;
  background: var(--an-panel);
  border: 1px solid var(--an-rule);
  padding: 0 4px;
}
.an-doc .an-code code, .an-doc pre code { border: 0; background: transparent; padding: 0; }

/* 说明段 */
.an-note { font-size: 14px; color: var(--an-muted); max-width: 68ch; margin: 14px 0; }
.an-note + .an-note { margin-top: 8px; }

.an-dmain .an-cap { margin-top: 26px; }

@media (max-width: 640px) {
  .an-step { grid-template-columns: 34px 1fr; gap: 12px; }
  /* 侧栏收成顶部横排:去 sticky 去左条,当前章只靠红字标记。 */
  .an-doclayout { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; }
  .an-snav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
    border-bottom: 1px solid var(--an-rule);
    padding-bottom: 14px;
  }
  .an-snav a { padding: 4px 0; border-left: 0; }
}

/* ── 账号动线(阶段 2 第一刀):注册 / 登录 / 验证页 ─────────────────────
 * 注册页复用首页两栏骨架(左文案+步骤条,右表单收 an-card);登录/验证是
 * 单栏窄版(.an-auth-one)。输入框是本节唯一新组件;按钮沿用 .an-page .an-btn
 * 墨底反色,红不进按钮,焦点态边框用主红(2026-08-08 视觉稿用户拍板)。 */
.an-auth {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 44px 0 72px;
}
.an-auth-side { flex: 1 1 380px; min-width: 0; }
.an-auth-side h1, .an-auth-one h1 {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em;
}
.an-auth-side .an-sub, .an-auth-one .an-sub { margin-top: 12px; font-size: 14.5px; }
.an-auth-side code { font-family: var(--an-mono); font-size: 0.92em; color: var(--an-ink); }
.an-auth-card { flex: 1 1 340px; max-width: 432px; }
.an-auth-one { max-width: 432px; margin: 0 auto; padding: 44px 0 72px; }
.an-auth-one .an-card { margin-top: 24px; }

.an-field { margin-top: 18px; }
.an-auth-card form .an-field:first-child, .an-auth-one form .an-field:first-child { margin-top: 2px; }
.an-field label {
  display: block;
  font-family: var(--an-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--an-muted);
  margin-bottom: 8px;
}
/* label 行右端的辅助链接(登录页「忘记密码?」)。 */
.an-lrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-family: var(--an-mono);
  font-size: 12px;
}
.an-lrow label { margin-bottom: 0; }
.an-page .an-lrow a { color: var(--an-muted); }
.an-page .an-lrow a:hover { color: var(--an-accent-ink); }
.an-input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--an-sans);
  font-size: 14.5px;
  color: var(--an-ink);
  background: var(--an-paper);
  border: 1px solid var(--an-rule);
  border-radius: 6px;
}
.an-input:focus { outline: none; border-color: var(--an-accent); }
.an-hint { margin-top: 6px; font-family: var(--an-mono); font-size: 11.5px; color: var(--an-muted); }
.an-hint.an-ok { color: var(--an-live); }
.an-hint.an-err { color: var(--an-accent-ink); }

/* 表单主按钮全宽;button 元素要补 font/cursor(.an-page .an-btn 只定义了盒与配色)。 */
.an-auth-card .an-btn, .an-auth-one .an-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  font-family: var(--an-mono);
  font-size: 13.5px;
  text-align: center;
  cursor: pointer;
}
.an-page .an-btn[disabled] { opacity: 0.55; cursor: default; }
.an-legal { margin-top: 16px; font-size: 12px; color: var(--an-muted); line-height: 1.7; }
/* 权重 0-2-1:压过 .an-page a { color:inherit }(0-1-1);修饰态同段提权(样式雷①,
 * 见 anyns.css:46 注释——只提基础态会反过来把 hover 压没)。 */
.an-page .an-legal a { color: var(--an-accent-ink); }
.an-page .an-legal a:hover { text-decoration: underline; }
.an-alt {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--an-rule);
  font-family: var(--an-mono);
  font-size: 13px;
  color: var(--an-muted);
}
.an-page .an-alt a { color: var(--an-accent-ink); }
.an-page .an-alt a:hover { text-decoration: underline; }
/* 登录态显示(§13):有 anyns 会话时隐藏全部「登录」入口,nav 只剩「控制台」。
 * 标记由 head 内联脚本按 anyns_session 指示灯 cookie 在渲染前打上,零闪变。 */
.an-authed .an-nav-login { display: none; }
/* 首页 CTA 不分登录态(2026-08-25 拍板):两态同为「进入控制台」+「文档」,切换规则已删。 */
/* !important:后文多处容器(.an-md-two/.an-kpis/.an-dohgrid 等)以同权重 display:grid/flex
   声明在本条之后,会把 display:none 压掉(实测:管理令牌下域名行照样露出)。统一在此根治,
   免得每加一个带 display 的容器都要记得补组合兜底。 */
.an-hide { display: none !important; }
.an-banner-recycle { margin-top: 8px; }
/* 列表空状态:一句话 + 三步提示 + 动作按钮(2026-08-23) */
.an-empty { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.an-empty .an-sub { margin: 0; }
.an-empty .an-btn { margin-top: 6px; }

/* ── 登录页左右两栏(2026-08-23 用户点名照 n.ht 登录页):左原生账号密码 / 右第三方登录
 * (NodeLoc、GitHub),中间竖线。机制抄 auth-form.css 的 .auth-split:按卡片实际宽度的
 * container query 切换,宽卡左右两栏 + 竖线,窄卡(手机)自动堆叠成上下 + 水平分割线。 */
.an-auth-one--split { max-width: 720px; }
.an-auth-card--split { container-type: inline-size; }
.an-auth-split { display: flex; flex-direction: column; }
.an-auth-split-native { min-width: 0; }
.an-auth-split-third {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--an-rule);
}
/* 右栏按钮:英文「Sign in with NodeLoc」在 220px 栏里会折行,收窄左右内距并禁止折行。 */
.an-auth-one .an-auth-split-third .an-btn { margin-top: 0; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
@container (min-width: 520px) {
  .an-auth-split { flex-direction: row; align-items: stretch; }
  .an-auth-split-native { flex: 1; }
  .an-auth-split-third {
    flex: 0 0 232px;
    margin: 0 0 0 26px;
    padding: 0 0 0 26px;
    border-top: none;
    border-left: 1px solid var(--an-rule);
  }
}

/* ── DNS 控制台(第二刀):面板布局 / 数据行 / modal / toast ─────────────
 * 视觉稿 2026-08-08 用户拍板:数据行 mono+底线,「中国大陆」等分线徽章红色强调,
 * 主 CTA 墨底;告警=panel 底+琥珀左条;DNSSEC 卡配自绘墨色开关。 */
.an-panel { padding: 36px 0 72px; }
.an-panel h1 {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.02em;
}
.an-hnav-user b { font-weight: 600; color: var(--an-ink); }
.an-panel .an-code { margin: 20px 0 0; }
.an-code-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.an-page .an-copy { color: var(--an-accent-ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.an-page .an-copy:hover { text-decoration: underline; }
.an-page .an-md-link { color: var(--an-accent-ink); cursor: pointer; }
.an-page .an-md-link:hover { text-decoration: underline; }

.an-ptool { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.an-ptool-meta { font-family: var(--an-mono); font-size: 12px; color: var(--an-muted); }
.an-ptool-btns { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--an-mono); font-size: 12.5px; }
.an-page .an-btn.an-sm { padding: 8px 14px; width: auto; margin-top: 0; display: inline-block; }
.an-page .an-btn.an-danger { border-color: var(--an-accent); background: var(--an-accent); color: #fff; }

.an-zlist { margin-top: 10px; }
.an-zrow {
  display: grid;
  grid-template-columns: 14px 1fr auto 150px;
  gap: 14px;
  align-items: center;
  padding: 13px 2px;
  border-bottom: 1px solid var(--an-rule);
  font-family: var(--an-mono);
  font-size: 13.5px;
  cursor: pointer;
}
.an-zrow:hover { background: var(--an-panel); }
.an-zdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.an-zdot.ok { background: var(--an-live); }
.an-zdot.warn { background: var(--an-warn); }
.an-zdot.off { background: var(--an-accent); }
.an-zname { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-zmeta { color: var(--an-muted); font-size: 12px; }
.an-zstate { color: var(--an-muted); font-size: 12px; text-align: right; }
.an-zstate.warn { color: var(--an-warn); }

.an-back { font-family: var(--an-mono); font-size: 13px; }
.an-page .an-back a { color: var(--an-accent-ink); }
.an-page .an-back a:hover { text-decoration: underline; }
.an-panel .an-ztitle { margin-top: 10px; }

.an-banner {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--an-panel);
  border-left: 3px solid var(--an-warn);
  font-size: 13px;
  color: var(--an-muted);
  line-height: 1.7;
}
.an-banner-err { border-left-color: var(--an-accent); }
.an-banner .an-code { margin: 10px 0 0; }
.an-banner-actions { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--an-mono); font-size: 12.5px; }
.an-page .an-banner-actions a { color: var(--an-accent-ink); cursor: pointer; }
.an-page .an-banner-actions a:hover { text-decoration: underline; }

.an-rtable { margin-top: 10px; font-family: var(--an-mono); font-size: 13px; }
.an-rhead, .an-rrow {
  display: grid;
  grid-template-columns: 170px 56px 92px minmax(0, 1fr) 64px 76px;
  gap: 14px;
  align-items: center;
  padding: 11px 2px;
  border-bottom: 1px solid var(--an-rule);
}
/* 云朵可用时记录表多一列「代理状态」(学 CF:实心云图标 + 文字标签,插在 TTL 与操作列之间)。 */
/* 代理列 108px:英文最长态「Provisioning」+ 22px 云朵 + 6px 间距要 115px,96px 时会
   顶到操作列上。异常态还会多一个「重试」链接,靠 an-rproxy 换行消化,不挤别的列。 */
.an-rt-cloud .an-rhead, .an-rt-cloud .an-rrow { grid-template-columns: 170px 56px 92px minmax(0, 1fr) 64px 108px 76px; }
.an-rproxy { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.an-cloudico { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--an-muted); user-select: none; white-space: nowrap; }
/* 云朵与标签分开上色(学 CF 官方 dash):颜色信号只由云朵承担,标签保持正常文字色,
   一列里不会出现一片彩字。svg 是 fill=currentColor,所以直接给 svg 设 color。 */
.an-cloudico svg { flex: none; color: var(--an-cf-cloud-off); }
.an-cloudico em { font-style: normal; }
.an-cloudico.on { color: var(--an-ink); }
.an-cloudico.on svg { color: var(--an-cf-orange); }
.an-cloudico.an-cloud-pending { animation: anCloudPulse 1.2s ease-in-out infinite; }
/* 异常是要人处理的告警,这一条整体转琥珀(含标签),压过上面的 .on 规则——同权重靠
   后声明取胜,勿把这两行上移。 */
.an-cloudico.an-cloud-err, .an-cloudico.an-cloud-err svg { color: var(--an-warn); }
.an-cloud-retry { margin-left: 6px; font-size: 12px; cursor: pointer; text-decoration: underline; white-space: nowrap; }
/* 绑定卡健康告警行(worker 复查结论;琥珀与云朵列 err 同色,--an-seg3 已退役勿用) */
.an-cloudhealth { font-size: 12.5px; margin: 6px 0 0; color: var(--an-warn); }
/* 自定义主机名用量行:与告警行同排版、平时走 muted;逼近免费额度时 JS 叠
   .an-dwarn 转琥珀——.an-dwarn 声明在本行之后,同权重靠后声明压过来,勿把它上移。 */
.an-cloudquota { font-size: 12.5px; margin: 6px 0 0; color: var(--an-muted); }
@keyframes anCloudPulse { 50% { opacity: 0.3; } }
/* 记录备注:记录名下的小字灰行,单行截断(悬停看全文)。 */
.an-rrow .an-rmk { display: block; font-style: normal; font-size: 11px; font-weight: 400; color: var(--an-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-rhead {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--an-muted);
  border-bottom-color: var(--an-ink);
}
.an-rrow:hover { background: var(--an-panel); }
.an-rrow-off { opacity: 0.55; }
.an-rname { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-rval { color: var(--an-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-rttl { color: var(--an-muted); font-size: 12px; }
.an-rops { display: flex; gap: 10px; justify-content: flex-end; font-size: 12px; white-space: nowrap; }
.an-page .an-rops a { color: var(--an-muted); cursor: pointer; }
.an-page .an-rops a:hover { color: var(--an-accent-ink); }
/* 分线徽章红色强调:自定义分线是核心差异化(2026-08-08 视觉稿拍板)。 */
.an-tag.an-line-cn { color: var(--an-accent-ink); border-color: var(--an-accent-ink); }

.an-dnssec { margin-top: 32px; }
.an-dnssec-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.an-switch { width: 40px; height: 22px; border: 1px solid var(--an-ink); border-radius: 11px; position: relative; cursor: pointer; flex: none; }
.an-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--an-ink); }
.an-switch.on { background: var(--an-ink); }
.an-switch.on i { left: auto; right: 2px; background: var(--an-paper); }
.an-switch.busy { opacity: 0.5; cursor: default; }
.an-zone-danger { margin-top: 26px; font-family: var(--an-mono); font-size: 12.5px; }
.an-page .an-zone-danger a { color: var(--an-muted); cursor: pointer; }
.an-page .an-zone-danger a:hover { color: var(--an-accent-ink); }

/* modal:遮罩 + an-card 浮层 */
.an-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 20px;
  z-index: 50;
  overflow-y: auto;
}
.an-modal { width: 100%; max-width: 520px; }
.an-md-msg { font-size: 14px; line-height: 1.7; }
.an-md-body { margin-top: 4px; }
.an-md-body .an-field:first-child { margin-top: 4px; }
/* 上面的 4px 特例本意是「弹窗首字段贴标题」,但 :first-child 会命中 .an-md-two 两列行的
   第一列,造成两列上沿错位(实测 4px vs 18px,云朵高级区 4px vs 12px)。这里按容器
   把第一列拉回与第二列同值,两列同高。 */
.an-md-body .an-md-two .an-field:first-child { margin-top: 18px; }
.an-cloudadv .an-md-two .an-field:first-child { margin-top: 12px; }
.an-md-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; font-family: var(--an-mono); font-size: 12.5px; }
.an-md-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 线路选择器(§19):分组默认折叠(原生 details),选中项在折叠态缀进组标题。
   盒样式对齐 .an-input;层级缩进只靠 padding,不引新变量。 */
.an-linepick { border: 1px solid var(--an-rule); border-radius: 6px; background: var(--an-paper); font-size: 14px; overflow: hidden; }
.an-lp-opt { padding: 9px 12px; cursor: pointer; }
.an-lp-opt:hover { background: var(--an-panel); }
.an-lp-opt.sel { color: var(--an-accent-ink); }
.an-lp-opt.sel::after { content: " ✓"; font-family: var(--an-mono); }
.an-lp-group { border-top: 1px solid var(--an-rule); }
.an-lp-group > summary { padding: 9px 12px; cursor: pointer; list-style: none; color: var(--an-muted); font-size: 13px; }
.an-lp-group > summary::-webkit-details-marker { display: none; }
.an-lp-group > summary::before { content: "▸ "; font-family: var(--an-mono); font-size: 11px; }
.an-lp-group[open] > summary::before { content: "▾ "; }
.an-lp-group .an-lp-opts { padding-bottom: 4px; }
.an-lp-group .an-lp-opt { padding-left: 28px; }
.an-lp-cur { float: right; color: var(--an-accent-ink); font-size: 12.5px; }
.an-textarea { min-height: 96px; resize: vertical; font-family: var(--an-mono); font-size: 13px; }
.an-select { appearance: auto; }
/* 开云朵弹窗的「高级回源」折叠区(docs/CF_CLOUD.md §7.14):原生 details,默认收起 */
.an-cloudadv { margin-top: 14px; }
.an-cloudadv summary { cursor: pointer; font-size: 13px; color: var(--an-muted); user-select: none; }
.an-cloudadv summary:hover { color: var(--an-ink); }
.an-cloudadv .an-field { margin-top: 12px; }

/* toast:右下角浮条,左侧 3px 语义色条 */
.an-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 340px;
  padding: 10px 14px;
  background: var(--an-ink);
  color: var(--an-paper);
  border-left: 3px solid var(--an-live);
  font-family: var(--an-mono);
  font-size: 12.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  z-index: 60;
}
.an-toast.on { opacity: 1; transform: none; }
.an-toast-error { border-left-color: var(--an-accent); }
.an-toast-warning { border-left-color: var(--an-warn); }

/* CF 导入预览 / 跳过列表 */
.an-cfi-all { display: block; margin-top: 12px; font-family: var(--an-mono); font-size: 12.5px; }
.an-cfi-list { margin-top: 8px; max-height: 260px; overflow: auto; border-top: 1px solid var(--an-rule); }
.an-cfi-row, .an-cfi-skip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--an-rule);
  font-family: var(--an-mono);
  font-size: 12px;
}
.an-cfi-name { font-weight: 600; flex: 0 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-cfi-value { color: var(--an-muted); flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-cfi-ttl { color: var(--an-muted); flex: none; }
.an-cfi-skiphd { margin-top: 12px; font-family: var(--an-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--an-muted); }
.an-cline-list { border-top: 1px solid var(--an-rule); }
.an-cline-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--an-rule); font-family: var(--an-mono); font-size: 12.5px; }

/* access 页:tab 横排 / 域名 chips / radio 药丸 / 令牌行 */
.an-tabnav {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 18px;
  border-bottom: 1px solid var(--an-rule);
  padding-bottom: 12px;
  margin-top: 22px;
}
.an-tabnav a { padding: 4px 0; border-left: 0; cursor: pointer; }
.an-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.an-chip {
  font-family: var(--an-mono);
  font-size: 11.5px;
  border: 1px solid var(--an-rule);
  padding: 2px 8px;
  cursor: pointer;
  color: var(--an-muted);
}
.an-chip:hover { color: var(--an-accent-ink); border-color: var(--an-accent-ink); }
.an-chip.off { opacity: 0.5; cursor: default; }
.an-chip.off:hover { color: var(--an-muted); border-color: var(--an-rule); }
.an-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.an-choice {
  font-family: var(--an-mono);
  font-size: 12.5px;
  border: 1px solid var(--an-rule);
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--an-muted);
}
.an-choice input { display: none; }
.an-choice.on { border-color: var(--an-ink); background: var(--an-ink); color: var(--an-paper); }
.an-ack { display: flex; gap: 8px; align-items: baseline; margin-top: 16px; font-size: 13px; color: var(--an-muted); }
.an-tkrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--an-rule);
  font-family: var(--an-mono);
  font-size: 13px;
}
.an-tkmain { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.an-page .an-tkrow .an-rops a { cursor: pointer; }

@media (max-width: 640px) {
  .an-zrow { grid-template-columns: 14px 1fr auto; }
  .an-zstate { grid-column: 2 / -1; text-align: left; }
  .an-rhead { display: none; }
  /* 开了云朵的记录表(.an-rt-cloud 七列固定宽)也要塌成两列:选择器带前缀才压得过
     上面那条 0-2-0 的规则(2026-08-23 体检 C10,手机上 375px 被撑破)。 */
  .an-rrow, .an-rt-cloud .an-rrow { grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 2px; }
  .an-rname, .an-rval { grid-column: 1 / -1; }
  .an-md-two { grid-template-columns: 1fr; }
}

/* ── footer ─────────────────────────────────────────────────────────── */
.an-footer {
  padding: 30px 0 38px;
  border-top: 1px solid var(--an-rule);
  font-family: var(--an-mono);
  font-size: 12px;
  color: var(--an-muted);
}
.an-frow { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .an-wrap { padding: 0 20px; }
  .an-hero { padding: 56px 0 40px; }
  .an-sec { padding: 56px 0; }
  .an-slider { zoom: 1; }
  /* 导航项 2026-08-11 增至六项(信任/关于迁入 + 中英切换)。窄屏收紧间距;
     放不下时整项换行,而不是把 "Log in" 从词中间折断(英文是 anyns 默认语言,
     360px 屏上必然溢出)。 */
  .an-nav { gap: 14px; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
  .an-nav a { white-space: nowrap; }
  .an-caprow { grid-template-columns: 1fr; gap: 4px; }
}

/* 极窄屏:滑条装置整体再收一档(370px 轨 + 底板边距在 375 宽手机上放不下)。 */
@media (max-width: 430px) {
  .an-slider { zoom: .8; }
}

/* footer 链接组(信任 / 关于 / 署名) */
.an-flinks { display: flex; gap: 18px; }
.an-flinks a:hover { color: var(--an-ink); }

/* 教程截图(/docs/cloud):嵌在步骤行内,方角+细描边与 an-code 同语言 */
.an-shotwrap { margin: 12px 0 2px; }
.an-shot { display: block; width: 100%; max-width: 760px; border: 1px solid var(--an-rule); }
.an-shotcap { margin-top: 6px; font-size: 11px; letter-spacing: .04em; color: var(--an-muted); }

/* 节标题(2026-08-13 拍板「标题必须与正文分离可扫读」,规格=trust .an-step b 同款):
   墨色加粗 mono;正文/提示/数据行保持 muted——an-ptool-meta 从此只放数据行不放标题。 */
.an-stitle { font-family: var(--an-mono); font-size: 14.5px; font-weight: 600; color: var(--an-ink); }
.an-stitle.sm { font-size: 13px; }

/* ── DoH 控制台页(/panel/doh):组件全复用家族(ptool/tkrow/banner/code/hint),
   这里只补表格与状态色两件事。表格字号/表头/内边距逐项对齐 .an-rtable/.an-rhead。 */
.an-page .an-dohcode .an-code-hd { text-transform: none; } /* 保「DoH」术语拼写 */
/* 表格栅格(2026-08-18 用户点名返工:「所有表格样式不统一,左边距离一会儿大一会儿小」)。
   三个真因,一次收口:
   ① 列间距:原来抄了 .an-rrow 的 padding: 11px 2px,却没抄它的 gap: 14px——家族那张表
      是 CSS grid、列间距由 gap 提供,而 <table> 没有 gap,于是列与列之间只剩 4px,
      右对齐的数字与右邻一列粘成一坨(「1,425 CN」「96,210 2分钟前」)。这里改成左右
      各 7px = 家族同样的 14px 列间距,首末列贴页面边(padding 归零)。
   ② 列宽:原来 width:100% 由浏览器自动分配,每张表各算一套,数字列一张在 896、一张在
      858、一张在 800,上下几张表没有共同竖线。现在列宽写死像素(=家族 .an-rrow 的
      170px 56px 92px … 口径)并且**所有表共用同一套骨架**:第一列 300 左对齐标签、
      第二列 92 数字,于是五张表的左边缘与数字列都落在同一条竖线上。
   ③ 表宽:表不再拉满整页(2~6 行短值横跨 1176px 读不成一行),width:auto 由列宽决定;
      两区各自收到自己表格的宽度,让节标题右侧的时段切换正好落在表格右缘。
   骨架是共用的,所以变体类只负责改「第三列以后」的宽度,别在变体里重定义前两列。 */
.an-dtable { width: auto; table-layout: fixed; border-collapse: collapse; margin-top: 10px; font-family: var(--an-mono); font-size: 13px; }
.an-dtable th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--an-muted); font-weight: 400; text-align: left; }
.an-dtable th, .an-dtable td { padding: 11px 7px; border-bottom: 1px solid var(--an-rule); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-dtable th:first-child, .an-dtable td:first-child { padding-left: 0; }
.an-dtable th:last-child, .an-dtable td:last-child { padding-right: 0; }
.an-dtable .num { text-align: right; }
.an-dtable th:nth-child(1) { width: 300px; }
.an-dtable th:nth-child(2) { width: 92px; }
/* 限制与配额表(docs/limits):说明列要换行,列宽按内容;窄屏横向滚动在 .an-tblwrap 内 */
.an-tblwrap { overflow-x: auto; }
.an-dtable-limits { width: 100%; min-width: 560px; table-layout: fixed; }
.an-dtable-limits th:nth-child(1), .an-dtable-limits td:nth-child(1) { width: 180px; white-space: nowrap; }
.an-dtable-limits th:nth-child(2), .an-dtable-limits td:nth-child(2) { width: 80px; white-space: nowrap; }
.an-dtable.an-dtable-limits th:nth-child(3) { width: auto; } /* 盖掉下方 .an-dtable 第三列 92px 的默认(它排在后面,得提权重),说明列吃掉剩余宽度 */
.an-dtable-limits td:nth-child(3) { white-space: normal; font-family: inherit; font-size: 13.5px; line-height: 1.6; color: var(--an-muted); }
.an-dtable th:nth-child(3) { width: 92px; }
/* 连接来源:最近活跃/首次出现两列 100(96 时英文表头 LAST ACTIVE 会挤,借宽 3px 把
   数字列推歪,英文页数字列就和上面几张表差 3px);主要路线 88 收尾 */
.an-dt-conn th:nth-child(3), .an-dt-conn th:nth-child(4) { width: 100px; }
.an-dt-conn th:nth-child(5) { width: 88px; }
/* 被封锁:剩余封锁列按英文表头 REMAINING BLOCK(约 115px)给 130,否则英文页会截断 */
.an-dt-blk th:nth-child(3) { width: 130px; }
.an-dt-blk th:nth-child(4) { width: 88px; }
/* 热门域名的排名:并进域名单元格,不单独占一列——独立的 # 列会把整张表的内容往右推,
   左边缘就跟其它表不齐(正是这次返工的那条)。左对齐所以行首永远咬着表格左边缘。 */
.an-didx { display: inline-block; width: 26px; margin-right: 10px; font-style: normal; color: var(--an-muted); }
/* 2026-08-18 控制台改版:统计区改网格格子(见文件尾 .an-dohgrid/.an-dcellx),
   旧的 #dohStatsSec/#dohConnSec max-width 收宽规则随单列平铺一起退役——
   现在表格宽度由格子约束(半格首列自适应,全宽格保持上面的列骨架)。 */
/* 窄屏:写死像素装不下,退回自适应并允许换行(nowrap 会撑出横向滚动) */
@media (max-width: 640px) {
  .an-dtable { width: 100%; table-layout: auto; }
  .an-dtable th { width: auto !important; }
  .an-dtable th, .an-dtable td { white-space: normal; word-break: break-all; }
}
.an-dcn { color: var(--an-accent-ink); }
.an-dwarn { color: var(--an-warn); }
.an-dpager { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; font-family: var(--an-mono); }
.an-page .an-dpager a { cursor: pointer; color: var(--an-accent-ink); }
.an-page .an-dpager a.off { color: var(--an-muted); pointer-events: none; }

/* ── AUP 内容政策块(trust 第三条展开 + /panel 卡,同一份文本两处渲染)────── */
.an-page .an-aup-t { display: block; margin-top: 18px; font-family: inherit; font-size: 13.5px; font-weight: 700; }
.an-page .an-auplead { margin-top: 6px; font-size: 14px; color: var(--an-muted); max-width: 62ch; }
.an-page .an-auplist { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--an-muted); max-width: 62ch; }
.an-page .an-auplist li { margin: 4px 0; }

/* header 产品并列入口(DNS | DoH)的当前项标记;选择器 ≥0-1-1 防 .an-page a 压色 */
.an-page .an-nav a.an-cur { color: var(--an-accent-ink); }
/* 危险操作链接(吊销):家族危险色=主题红文字档,access/doh 两页 tk-revoke 同吃 */
.an-page .an-rops a.tk-revoke { color: var(--an-accent-ink); }

/* 云朵卡的 Cloudflare 标识:图标跨状态+额度两行,与文字块左右并排 */
.an-cfhd { display: flex; align-items: center; gap: 14px; min-width: 0; }
.an-cflogo { flex: none; height: 38px; width: auto; }
@media (max-width: 640px) { .an-cflogo { height: 30px; } }

/* 云朵绑定状态行:状态点 + 域名 + 状态文字(点的档位同域名列表 an-zdot)。
   ⚠ 必须带 .an-card 前缀(0-2-0)才压得过 `.an-card .an-sub`(本文件 275 行) ——
   裸 .an-cfstate 是 0-1-0,此前 margin:0 与 font-size 两条声明其实从未生效过。
   2026-08-14 标题并入本行后,.an-sub 那 18px margin-top 就成了卡片顶部的多余留白
   (实测上 31px / 下 15px 头重脚轻),必须真的归零。字号跟随 .an-card .an-sub 的
   13.5px,不再另设——免得又写一条压不过去的假声明。 */
.an-card .an-cfstate { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.an-cfdim { color: var(--an-rule); }

/* ── 控制台壳(2026-08-18 改版拍板:顶栏+左侧导航+有界内容区,弃单列长滑)────
 * 四屏(/panel、/panel/zone/:name、/panel/doh、/panel/access)共用:侧栏由
 * anyns-shell.js 单点渲染,菜单视觉全走 docs 页 .an-snav 既有语言(当前项红字+左红条)。
 * 骨架参数对齐 .an-doclayout(180px 侧栏),padding 上沿收紧(控制台首屏要装 KPI+表)。 */
.an-conlayout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 40px;
  padding: 28px 0 64px;
}
/* 外层 aside 整体 sticky(菜单+NS 块一起跟随);内层 .an-snav 的 sticky 要卸掉,
   否则两层 sticky 各滚各的。 */
.an-side { position: sticky; top: 24px; align-self: start; }
.an-side .an-snav { position: static; }
.an-connav a { font-size: 13.5px; }
/* 权威 NS 块:常驻侧栏底,数据由 anyns-shell.js 从 public_ns 填(前端绝不写死 NS)。 */
.an-sidens {
  margin: 22px 0 0 14px;
  padding: 11px 12px 9px;
  border: 1px solid var(--an-rule);
  background: var(--an-panel);
}
.an-sidens-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--an-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-sidens-hd .an-copy { font-size: 11px; }
.an-sidens pre { margin-top: 5px; font-family: var(--an-mono); font-size: 12px; line-height: 1.8; color: var(--an-ink); }
/* .an-sideaup(侧栏底部「内容政策」链接)已于 2026-08-18 随该入口撤销一并删除:
   那是门面 header 的菜单项,不进控制台侧栏。 */
.an-cmain { min-width: 0; }
.an-cmain > h1, .an-cmain .an-ztitle {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.02em;
}

/* KPI 数字条:一屏首行,格=panel 底轻卡;数字 mono,主强调只给「已托管」一格。 */
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.an-kpi {
  border: 1px solid var(--an-rule);
  background: var(--an-panel);
  border-radius: 8px;
  padding: 12px 14px 11px;
  min-width: 0;
}
.an-kpi i {
  display: block;
  font-style: normal;
  font-family: var(--an-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--an-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.an-kpi b {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--an-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--an-ink);
  white-space: nowrap;
  overflow: hidden;
}
.an-kpi b .an-zdot { align-self: center; }
.an-kq { font-size: 12px; color: var(--an-muted); font-weight: 400; }
.an-ktext { font-size: 14.5px; }
.an-kacc { color: var(--an-accent-ink); }
.an-kwarn { color: var(--an-warn); }
/* 可点的 KPI 格(CF 代理=绑定/管理入口,自定义线路=开管理弹窗)。 */
.an-kpi-btn { cursor: pointer; }
.an-kpi-btn:hover { border-color: var(--an-muted); }

/* 域名表格:an-zrow 家族加表头、换列(点|域名|DNSSEC|状态|管理),
   表头视觉 = 记录表 .an-rhead 同款。 */
.an-ztable { margin-top: 10px; font-family: var(--an-mono); font-size: 13px; }
.an-zhead, .an-ztable .an-zrow {
  display: grid;
  grid-template-columns: 14px minmax(0, 2fr) 88px minmax(0, 1.3fr) 96px 56px;
  gap: 14px;
  align-items: center;
  padding: 11px 2px;
  border-bottom: 1px solid var(--an-rule);
}
.an-zhead {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--an-muted);
  border-bottom-color: var(--an-ink);
  padding: 6px 2px;
}
.an-ztable .an-zstate { text-align: left; }
.an-zgo { text-align: right; font-size: 12px; color: var(--an-muted); }
.an-zrow:hover .an-zgo { color: var(--an-accent-ink); }
/* 添加时间列:muted 小字,不跟域名抢视线;它在这儿的意义是让「默认按添加顺序排」
   这件事看得见——排一个看不见的字段是 Linode 的坑(UI 在按 updated 排,而它 API
   文档的 domain 对象里根本没有 updated 这个字段)。 */
.an-zadded { color: var(--an-muted); font-size: 12px; }

/* 可排序表头:整格是按钮,同一列再点反转方向(两态,不做「升→降→无」三态循环)。
   按钮要把 .an-zhead 的字号/字距/大写全继承下来,视觉上和不可排序的列头一模一样,
   只在 hover / 激活时用箭头和墨色区分。 */
.an-zhead .an-zsort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.an-zhead .an-zsort:hover, .an-zhead .an-zsort.on { color: var(--an-ink); }
.an-zhead .an-zsort:focus-visible { outline: 2px solid var(--an-accent-ink); outline-offset: 3px; }
/* 箭头常驻:未激活列显淡 ↕(告诉人「这列能点」,Cloudflare 实测也是常驻双箭头),
   hover 加深,激活列换成 ↑/↓ 全显。常驻还顺手免了列头在 hover 时左右跳。 */
.an-zsort-ar { font-style: normal; font-size: 9px; opacity: .32; transition: opacity .12s ease; }
.an-zhead .an-zsort:hover .an-zsort-ar { opacity: .6; }
.an-zhead .an-zsort.on .an-zsort-ar { opacity: 1; }

/* 工具行里的搜索框:窄行内联,不撑高按钮行。 */
.an-zsearch {
  width: 168px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: var(--an-mono);
}

/* 排序下拉只服务窄屏:桌面有可点表头,五列表格再摆个下拉是白占一行版面
   (Gandi 也只在简易视图给下拉)。窄屏规则在 ≤640 段里开。 */
.an-zsortsel { display: none; }

/* 列表底部内容政策:原三条正文一字不动,常态收成一行(details 原生折叠)。 */
.an-aupfold { margin-top: 34px; border-top: 1px solid var(--an-rule); padding-top: 12px; }
.an-aupfold summary {
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: var(--an-muted);
}
.an-aupfold summary::-webkit-details-marker { display: none; }
.an-aupfold summary::before { content: "▸ "; font-family: var(--an-mono); font-size: 11px; }
.an-aupfold[open] summary::before { content: "▾ "; }
.an-aupfold summary b { font-weight: 600; color: var(--an-ink); font-size: 12.5px; margin-right: 6px; }
.an-aupfold .an-auplist { font-size: 13px; }

/* 详情屏:面包屑 + 状态胶囊行(NS 状态/DNSSEC 开关/CF 代理台账)。 */
.an-crumb { font-family: var(--an-mono); font-size: 12.5px; color: var(--an-muted); }
.an-page .an-crumb a { color: var(--an-accent-ink); }
.an-page .an-crumb a:hover { text-decoration: underline; }
.an-pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-family: var(--an-mono); font-size: 12px; }
.an-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--an-rule);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--an-muted);
  white-space: nowrap;
}
.an-pill .an-zdot { width: 7px; height: 7px; }
.an-pill b { color: var(--an-ink); font-weight: 500; }
.an-pill.warn { color: var(--an-warn); border-color: var(--an-warn); }
.an-page .an-pill a { color: var(--an-accent-ink); cursor: pointer; }
.an-page .an-pill a:hover { text-decoration: underline; }
/* 胶囊内迷你开关(DNSSEC):.an-switch 缩号。 */
.an-pill .an-switch { width: 30px; height: 17px; border-radius: 9px; }
.an-pill .an-switch i { width: 11px; height: 11px; }

/* DoH 统计网格:线路|类型两半格并排,Top 域名与连接区全宽格。
   半格里首列改自适应(全局 .an-dtable 首列 300px 是全宽口径,半格 ~430 放不下);
   全宽格保持全局列骨架(2026-08-18 五表共用骨架的口径原样成立)。 */
.an-dohgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.an-dcellx {
  border: 1px solid var(--an-rule);
  background: var(--an-panel);
  border-radius: 8px;
  padding: 12px 16px 6px;
  min-width: 0;
}
.an-dcellx .an-ptool { margin-top: 0; }
.an-dcellx .an-dtable { width: 100%; }
.an-dcellx .an-dtable tr:last-child td { border-bottom: 0; }
.an-span2 { grid-column: 1 / -1; }
.an-dhalf .an-dtable th:nth-child(1) { width: auto; }
.an-dhalf .an-dtable th:nth-child(2) { width: 84px; }
.an-dhalf .an-dtable th:nth-child(3) { width: 84px; }

/* 窄屏回退:侧栏塌成顶部横向菜单,KPI 两列,DoH 网格单列。 */
@media (max-width: 900px) {
  .an-conlayout { grid-template-columns: 1fr; gap: 22px; padding-top: 20px; }
  .an-side { position: static; }
  .an-side .an-snav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
    border-bottom: 1px solid var(--an-rule);
    padding-bottom: 12px;
  }
  .an-side .an-snav a { padding: 4px 0; border-left: 0; }
  /* 权威 NS 块窄屏不再隐藏(2026-08-23:手机上加完域名找不到 ns1~ns4),
     跟在横向菜单下面、去掉左缩进。 */
  .an-sidens { margin: 14px 0 0; }
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .an-dohgrid { grid-template-columns: 1fr; }
  .an-zhead { display: none; }
  .an-ztable .an-zrow { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .an-ztable .an-zrow .an-zmeta { display: none; }
  .an-ztable .an-zrow .an-zstate { grid-column: 2 / -1; }
  .an-ztable .an-zrow .an-zadded { display: none; }
  .an-ztable .an-zrow .an-zgo { display: none; }
  .an-zsearch { width: 128px; }
  /* 表头没了 = 点不到排序,这里把下拉放出来顶上(唯一的窄屏排序入口)。 */
  .an-zsortsel {
    display: inline-block;
    width: auto;
    max-width: 46vw;
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: var(--an-mono);
  }
}

/* 自定义线路页(/panel/lines,2026-08-18 从 /panel 弹窗升级):三列行
   (名称|IP 段|操作),无表头(表单 label 当列头太长,行内容自解释);
   行是 div 非链接,盖掉 an-zrow 的手型;首行补上沿分隔线(表头缺位时的顶边)。 */
.an-linetable { border-top: 1px solid var(--an-ink); }
.an-ztable .an-linerow { grid-template-columns: 170px minmax(0, 1fr) 96px; }
.an-linerow { cursor: default; }
.an-linecidrs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-linepeek { color: var(--an-muted); font-size: 12px; margin-left: 6px; }
@media (max-width: 640px) {
  .an-ztable .an-linerow { grid-template-columns: minmax(0, 1fr) 96px; }
  .an-linerow .an-linecidrs { grid-column: 1 / -1; display: block; }
  .an-ztable .an-linerow .an-zmeta { display: inline; }
}

/* 跨账号子域(docs/DNS_HOSTING.md §8.3):上级详情页列出本站其他账号托管的子域 */
.an-subzones { margin-top: 22px; }
.an-subzones > .an-hint { margin-top: 4px; }
.an-subzone-reseller { margin-top: 10px; }
.an-subzone-list { margin-top: 10px; border-top: 1px solid var(--an-rule); }
.an-subzone-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--an-rule); font-family: var(--an-mono); font-size: 12.5px; }
.an-subzone-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.an-subzone-state { color: var(--an-muted); }
.an-subzone-active { color: var(--an-live); }
.an-subzone-waiting, .an-subzone-unconsented, .an-subzone-at_risk { color: var(--an-accent-ink); }