/* ==========================================================================
   style.css — 哪煮米前台唯一样式表
   JS 逻辑钩子类（btn-* / is-main / is-hidden / is-active / is-success /
   is-danger / is-focuscolor / api-tabs / api-panel / dropdown / modal /
   delete / promo-code / feedback-*）与 main.js 绑定，严禁改名。
   分区：1 重置 → 2 工具类 → 3 布局 → 4 排版 → 5 元素 → 6 组件 → 7 站点区块 → 8 响应式
   主题：--main-color / --main-image / --main-angle 由后台「自定义 CSS」注入（见站点设置）；
   暗黑：语义色变量（--bg/--ink/--line…）定义于 :root，html.dark 整套换暗档
   （页头齿轮「暗黑模式」开关，localStorage 记忆，head 内联脚本首屏前挂类防闪烁）。
   ========================================================================== */

/* ---------- 1. 重置与基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 全站语义色变量：亮色即原硬编码值，html.dark 换暗档；规则内一律引用变量，禁止再写死颜色 */
:root {
  --bg: #fff;             /* 页面/卡片/弹窗正文底 */
  --bg-alt: #f5f5f5;      /* 次级底：页脚、带状区、悬停、行内代码 */
  --bg-soft: #fafafa;     /* 最浅一档：斑马纹、表头、文档速览 */
  --ink: #363636;         /* 主文字：标题/表头/强调 */
  --ink-body: #4a4a4a;    /* 正文默认 */
  --ink-muted: #9aa0a6;   /* 弱灰：辅助说明、n/a、页脚 */
  --ink-faint: #b5b5b5;   /* placeholder */
  --ink-disable: #7a7a7a; /* 禁用态文字（分页首末页） */
  --line: #dbdbdb;        /* 主边框：输入框/按钮/表格外框 */
  --line-strong: #b5b5b5; /* 悬停边框 */
  --line-soft: #e5e5e5;   /* 细分隔线：页脚顶线、文档表格框 */
  --line-faint: #f0f0f0;  /* 个性化菜单项分隔 */
  --link: #485fc7;        /* 链接 */
  --link-hover: #363636;  /* 链接悬停 */
  --code-bg: #f5f5f5; --code-ink: #f14668;
  --warn-bg: #fffaeb; --warn-ink: #946c00;
  --danger-bg: #feecf0; --danger-ink: #cc0f35;
  --veil: rgba(255, 255, 255, .86); /* 弹窗遮罩 */
  --thead-veil: rgba(0, 0, 0, .03); /* 比价表头压暗层 */
  --shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02); /* 浮层阴影（下拉/弹窗） */
}
html.dark {
  --bg: #17191d; --bg-alt: #1e2127; --bg-soft: #232730;
  --ink: #e6e8ec; --ink-body: #c8ccd4; --ink-muted: #8b919c; --ink-faint: #5f6673; --ink-disable: #6b7280;
  --line: #3a4049; --line-strong: #565e6b; --line-soft: #2c313a; --line-faint: #262b33;
  --link: #8fa2f5; --link-hover: #b6c2fa;
  --code-bg: #262b33; --code-ink: #ff8098;
  --warn-bg: #322b17; --warn-ink: #e3c368;
  --danger-bg: #3a2129; --danger-ink: #ff8ba2;
  --veil: rgba(10, 12, 17, .72);
  --thead-veil: rgba(255, 255, 255, .05);
  --shadow: 0 .5em 1em -.125em rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .3);
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Lucida Grande", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-body);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-decoration: none; background-color: transparent; }
a:hover { color: var(--link-hover); }
img { border-style: none; max-width: 100%; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button { overflow: visible; text-transform: none; -webkit-appearance: button; }
table { border-collapse: collapse; border-spacing: 0; }
code { font-family: monospace; font-size: .875em; background-color: var(--code-bg); color: var(--code-ink); padding: .15em .3em; border-radius: 3px; }
/* 键盘可达性与品牌感：链接/页签等键盘聚焦有主题色描边（按钮/输入框已有 box-shadow 聚焦环，特异性更高自动覆盖）；文本选中为主题色 */
:focus-visible { outline: 2px solid var(--main-color, #10a0ea); outline-offset: 2px; }
::selection { background-color: var(--main-color, #10a0ea); color: #fff; }

/* ---------- 2. 工具类（仅保留跨场景原子能力；间距/对齐/色彩均已折入语义类） ---------- */
/* is-hidden 由 main.js 页签与表格切换动态使用 */
.is-hidden { display: none !important; }
/* is-hidden-mobile 用于 API 文档参考表在窄屏隐藏「官网」列 */
@media screen and (max-width: 768px) { .is-hidden-mobile { display: none !important; } }
/* 文本居中：比价表格 / 弹窗正文 / 提示条 / 下拉清单共用 */
.has-text-centered { text-align: center !important; }

/* ---------- 3. 布局 ---------- */
/* 页面色带：全宽背景层（背景必须铺满视口宽），内部再套 *-container 限宽容器 */
.band-light { background-color: var(--bg-alt); }
.band-white { background-color: var(--bg); }
/* 内容宽度统一 1080px：13px 正文密度配 1152/1344 会显得空旷，收窄改善阅读行长与表格密度 */
.header-container, .search-container, .main-container, .footer-container { margin: 0 auto; max-width: 1080px; width: 100%; }

/* ---------- 4. 排版 ---------- */
/* 弹窗富文本正文（API 文档 / 关于本站 / 优惠信息）：由 main.js modalShell 与 apidocs 模板生成；
   h4/ul/ol/table 规则服务于后台注入的 about_html 富文本 */
.prose { line-height: 1.6; }
.prose p { margin-bottom: 1em; }
.prose h4 { font-size: 1.25em; font-weight: 600; margin: 1.4em 0 .7em; color: var(--ink); }
.prose ul { list-style: disc outside; margin: 0 0 1em 2em; }
.prose ol { list-style: decimal outside; margin: 0 0 1em 2em; }
.prose table { width: 100%; margin-bottom: 1em; }
/* 示例代码块（API 文档的请求/响应示例）：浅灰底、横向可滚；pre 内 code 去掉行内样式 */
.prose pre { background-color: var(--bg-alt); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8125em; line-height: 1.55; margin: 0 0 1em; overflow-x: auto; padding: .75em 1em; }
.prose pre code { background: none; border-radius: 0; color: var(--ink); font-size: 1em; padding: 0; }
/* 提示条内的末段不吃 .prose p 的 1em 下边距，否则提示框内部底部被撑出大空隙（API 弹窗顶部提示） */
.prose .notice p:last-child { margin-bottom: 0; }
/* One More Thing：引导提示词代码框（长中文句自动换行，避免手机端横向滚动） */
.copy-box pre { white-space: pre-wrap; word-break: break-all; }
/* 404 页 */
.error-hero { padding: 3rem 1.5rem; text-align: center; }
@media screen and (min-width: 1024px) { .error-hero { padding: 6rem 3rem; } }
.error-title { color: var(--ink); font-size: 1.5rem; font-weight: 600; line-height: 1.125; margin-bottom: 1rem; }
.error-subtitle { color: var(--ink-body); font-size: 1.25rem; font-weight: 400; line-height: 1.25; }
.error-back { margin-top: 1rem; }

/* ---------- 5. 元素 ---------- */
/* 按钮底座（is-main 主题色主按钮、is-success/is-danger 为 JS 提交/复制反馈态，勿改名） */
.button {
  align-items: center; appearance: none; background-color: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; color: var(--ink); cursor: pointer; display: inline-flex; font-size: 1rem;
  height: 2.5em; justify-content: center; line-height: 1.5; padding: calc(.5em - 1px) 1em;
  position: relative; text-align: center; vertical-align: top; white-space: nowrap; user-select: none;
}
.button:hover { border-color: var(--line-strong); color: var(--ink); }
.button:focus, .input:focus { border-color: var(--link); outline: none; box-shadow: 0 0 0 .125em rgba(72, 95, 199, .25); }
/* 前往官网小按钮：与分页、订单切换同为 .8125rem(13px) 小控件档，高度一律 2.5em=32.5px 保持对齐 */
.visit-btn { border-radius: 2px; font-size: .8125rem; }
.button.is-success { background-color: #48c78e; border-color: transparent; color: #fff; }
.button.is-danger { background-color: #f14668; border-color: transparent; color: #fff; }
.button.is-main { border-color: transparent; background-color: var(--main-color, #10a0ea); color: #fff; }
.button.is-main:hover { opacity: .8; }
/* 弹窗关闭 × */
.delete {
  appearance: none; background-color: rgba(10, 10, 10, .2); border: none; border-radius: 9999px;
  cursor: pointer; display: inline-block; flex-grow: 0; flex-shrink: 0; font-size: 0;
  height: 20px; width: 20px; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px;
  outline: none; position: relative;
}
.delete::before, .delete::after {
  background-color: #fff; content: ""; display: block; left: 50%; position: absolute; top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center;
}
.delete::before { height: 2px; width: 50%; }
.delete::after { height: 50%; width: 2px; }
.delete:hover { background-color: rgba(10, 10, 10, .3); }
/* 输入框底座（搜索框 / 优惠码 / 反馈表单共用） */
.input {
  align-items: center; appearance: none; background-color: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; box-shadow: none; color: var(--ink); display: inline-flex; font-size: 1rem;
  height: 2.5em; justify-content: flex-start; line-height: 1.5;
  padding: calc(.5em - 1px) calc(.75em - 1px); position: relative; vertical-align: top; width: 100%;
}
/* placeholder 用浅灰：与已输入正文拉开明显差距，一眼可辨是提示而非内容；opacity:1 统一 Firefox 默认半透明 */
.input::placeholder { color: var(--ink-faint); opacity: 1; }
/* is-success/is-danger 为 main.js 复制优惠码成功/失败的输入框描边反馈 */
.input.is-success { border-color: #48c78e; }
.input.is-danger { border-color: #f14668; }

/* ---------- 6. 组件 ---------- */
/* 页头主题色 Hero：全站顶部横幅。底色走 --main-color（后台「主题工坊」生成，暗黑轨由
   custom_css 的 html.dark 块覆盖，无则沿用亮色）；纹理画在超大伪元素画布上再物理旋转 ——
   CSS background 无法旋转平铺坐标系，conic 系纹理的 from 角只会让每个平铺瓦片自转，
   故画布级整体旋转（--main-angle）由 transform 承担；120vmax 正方形旋转任意角度后
   内切圆（≈85vmax）仍罩住 hero 对角线。裁剪放在专用纹理层 .hero-tex 上而非 hero 本体
   （hero 设 overflow 会连带裁掉齿轮下拉等伸出 hero 的绝对定位菜单）；底色留本体供
   JS 取色（is-focuscolor 列高亮）。--main-image 缺省(unset)时纹理层不渲染，不影响任何现有主题 */
.site-hero {
  background-color: var(--main-color, #10a0ea);
  color: #fff; position: relative; text-align: center;
}
/* 纹理裁剪层：铺满 hero 的透明容器（partials header 首子元素），只裁自己的伪元素画布 */
.hero-tex { inset: 0; overflow: hidden; pointer-events: none; position: absolute; }
.hero-tex::before {
  background-image: var(--main-image, unset);
  background-position: var(--main-pos, 0 0);
  background-size: var(--main-size, auto);
  content: ""; height: 120vmax; left: 50%; pointer-events: none;
  position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(var(--main-angle, 0deg));
  width: 120vmax;
}
/* 公告条与页头内容压回纹理层之上 */
.site-hero .site-notice, .site-hero .header-container { position: relative; }
/* Hero 顶部全站公告条 */
.site-notice { background-color: rgba(0, 0, 0, .1); font-size: .875rem; padding: .5rem 0; }
/* 页头栏：品牌居左、导航居右（窄屏改为均匀分布） */
.header-bar { align-items: center; display: flex; justify-content: space-between; padding: 1.5rem; }
/* 顶部有公告条时收紧上下内边距，避免 Hero 过高 */
.header-bar.has-notice { padding: 1rem; }
.header-logo { align-items: center; display: flex; }
.brand-name { color: #fff; font-size: 1.6rem; font-weight: 600; }
/* 品牌旁的版本/口号小徽标：透明底白字，融入 Hero */
.brand-tag {
  align-items: center; border-radius: 4px; color: #fff; display: inline-flex; font-size: .75rem;
  height: 2em; justify-content: center; line-height: 1.5; padding: 0 .75em; white-space: nowrap;
}
.header-nav { align-items: center; display: flex; }
/* 页头导航按钮：饱满的胶囊尺寸（14px 字 + 上下 8px 内边距，高约 37px），撑起头部高度不显空窄 */
.header-nav-btn {
  background-color: rgba(0, 0, 0, .1); border: unset; border-radius: 4px; color: #fff;
  cursor: pointer; font-size: .875rem; margin: .5rem; padding: .5rem 1.25rem;
}
.header-nav-btn:hover { opacity: .8; }
/* 页头个性化设置下拉（dropdown-prefs / pref-cny / pref-pin 为模板与 main.js 钩子）：
   齿轮按钮复用 header-nav-btn 同款视觉，但仅图标 —— 四边等宽 padding 成正方形
   （覆盖文字按钮的横向大内边距）；菜单右对齐防溢出视口；清单 padding 归零改由开关行自带 */
.dropdown-prefs .header-nav-btn { padding: .5rem; }
/* 菜单宽度随内容（覆盖 dropdown 基础 12rem；文案精简后不再两侧留白），pref-item 的 nowrap 保证文案不折行 */
.dropdown-prefs .dropdown-menu { left: auto; right: 0; min-width: auto; }
.dropdown-prefs .dropdown-content { padding: 0; }
.prefs-gear { height: 1.25em; width: 1.25em; }
.pref-item { align-items: center; color: var(--ink-body); cursor: pointer; display: flex; font-size: .875rem; gap: .5em; padding: .6rem 1rem; white-space: nowrap; }
.pref-item:hover { background-color: var(--bg-alt); }
.pref-item + .pref-item { border-top: 1px solid var(--line-faint); }

/* 搜索面板：各页通用（手机全宽 → 平板半宽 → 桌面三分之一，居中） */
.search-panel { margin: 0 auto; width: 100%; }
@media screen and (min-width: 769px) { .search-panel { width: 50%; } }
@media screen and (min-width: 1024px) { .search-panel { width: 33.3333%; } }
/* 搜索栏：输入框 + 查询按钮拼接，清除相接处圆角、压边框重叠融为一体（与下方切换组的间距统一由 .btn-order 的 margin-top 提供；
   拼接方向与 promo-copy / btn-order 一致：左元素清右角、右元素清左角） */
.search-bar { display: flex; }
.search-input { border-bottom-right-radius: 0; border-top-right-radius: 0; flex: 1 1 auto; font-weight: 600; min-width: 0; text-align: center; }
.search-go { border-bottom-left-radius: 0; border-top-left-radius: 0; }
/* 订单切换（btn-order 为 main.js 钩子）：三枚 13px 小按钮拼接均分；与上方搜索栏/下拉隔开一档 */
.btn-order { display: flex; flex-wrap: wrap; margin-top: .75rem; }
.btn-order .button { border-radius: 2px; flex: 1 1 auto; font-size: .8125rem; min-width: 0; }
.btn-order .button:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -1px; }
.btn-order .button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; }

/* 下拉（注册商切换；dropdown/dropdown-trigger/is-active 为 main.js 钩子） */
.dropdown { display: inline-flex; position: relative; vertical-align: top; }
.dropdown-trigger { display: flex; }
.dropdown-menu { display: none; left: 0; min-width: 12rem; padding-top: 4px; position: absolute; top: 100%; z-index: 20; }
.dropdown.is-hoverable:hover .dropdown-menu,
.dropdown.is-hoverable:focus-within .dropdown-menu,
.dropdown.is-active .dropdown-menu { display: block; }
.dropdown-content { background-color: var(--bg); border-radius: 4px; box-shadow: var(--shadow); padding-bottom: .5rem; padding-top: .5rem; }
/* 下拉项：行高由 icon 撑起（24px 图标 + 上下 .5rem 内边距 = 40px），
   与订单切换按钮的触屏 40px 最小高度同档，紧凑清单不再层叠内边距 */
.dropdown-item { color: var(--ink-body); display: block; font-size: .875rem; line-height: 1.5; padding: .5rem 1rem; position: relative; }
a.dropdown-item:hover { background-color: var(--bg-alt); color: var(--ink); }
/* 下拉触发按钮：通栏全宽、注册商名加粗 */
.dropdown-toggle { display: flex; font-weight: 600; width: 100%; }
.dropdown-toggle .icon { margin-right: 1rem; }
/* 搜索区内的下拉定制：通栏清单、限高滚动、项间细分隔线（去圆角阴影对齐输入框） */
.search .dropdown, .search .dropdown-trigger { width: 100%; }
.search .dropdown .dropdown-menu { border: 1px solid var(--line); max-height: min(60vh, 480px); overflow: auto; overflow-x: hidden; padding-top: 0; width: 100%; }
.search .dropdown .dropdown-content { border-radius: 0; box-shadow: none; padding: 0; text-align: center; }
.search .dropdown a.dropdown-item { padding-right: 1rem; }
.search .dropdown a.dropdown-item:not(:first-child) { border-top: 1px solid var(--line); }
/* 下拉项两栏：图标贴中缝右侧、名称贴中缝左侧，所有名称纵向对齐（垂直间距由 .dropdown-item 统一承担） */
.dropdown-row { align-items: center; display: flex; }
.dropdown-row-icon, .dropdown-row-name { flex: 1 1 0; min-width: 0; }
.dropdown-row-icon { text-align: right; }
.dropdown-row-name { text-align: left; }

/* API 文档页签（api-tabs/api-panel/data-tab 为 main.js 钩子） */
.api-tabs { display: block; margin-bottom: 1rem; }
.api-tabs ul { align-items: flex-end; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.api-tabs li { display: block; margin: 0; }
.api-tabs li a { border: 1px solid transparent; border-radius: 4px 4px 0 0; color: var(--ink-body); cursor: pointer; display: block; font-size: .8125rem; line-height: 1.4; margin-bottom: -1px; padding: .45em .9em; text-decoration: none; }
.api-tabs li a:hover { background-color: var(--bg-alt); border-bottom-color: var(--line); }
.api-tabs li.is-active a { background-color: var(--bg); border-color: var(--line); border-bottom-color: var(--bg); color: var(--main-color, #10a0ea); font-weight: 600; }

/* 弹窗（modal/is-active/delete 为 main.js 钩子；HTML 由 main.js 与 apidocs 模板生成） */
.modal {
  align-items: center; bottom: 0; display: none; flex-direction: column; justify-content: center;
  left: 0; overflow: hidden; position: fixed; right: 0; top: 0; z-index: 40;
}
.modal.is-active { display: flex; }
.modal-background { background-color: var(--veil); bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
.modal-card {
  border-radius: 4px; box-shadow: var(--shadow); color: var(--ink);
  display: flex; flex-direction: column; margin: 0 auto; max-height: 85vh; max-width: calc(100vw - 40px);
  overflow: hidden; position: relative; width: 560px;
}
/* API 文档弹窗用宽版（apidocs 模板根节点挂 is-wide）；关于本站/优惠信息用默认窄版 */
.modal-card.is-wide { width: 860px; }
/* 弹窗头部为主题色横条 */
.modal-card-head {
  align-items: center; background-color: var(--main-color, #10a0ea); display: flex; flex-shrink: 0;
  font-weight: 700; justify-content: space-between; line-height: 1.25; padding: .75em 1em; position: relative;
}
.modal-card-title { color: #fff; flex-grow: 1; flex-shrink: 0; font-size: 1.05rem; line-height: unset; text-align: center; z-index: 50; }
.modal-card-head .delete { z-index: 55; }
.modal-card-body { background-color: var(--bg); flex-grow: 1; flex-shrink: 1; font-size: .875rem; overflow: auto; padding: 20px; word-break: break-word; }
.modal-card-body table td, .modal-card-body table th { font-size: .8125rem; padding: .4rem .5rem; }
/* API 文档弹窗内部：顶部快览条 / 面板标题行 / 参数与输出定义表 */
.api-brief { background-color: var(--bg-soft); border-radius: 4px; font-size: .75rem; line-height: 1.7; margin-bottom: 1rem; padding: .6rem .8rem; }
.api-brief p { margin-bottom: .2em; }
.api-brief p:last-child { margin-bottom: 0; }
.api-lead { color: var(--ink); font-size: .875rem; font-weight: 600; }
/* 小节标题：深色加粗同正文大小，左侧主题色竖条提供层级（用于 API 文档分区与关于弹窗双小节） */
.api-sec { align-items: center; color: var(--ink); display: flex; font-size: .875rem; font-weight: 600; margin: 1rem 0 .4rem; }
.api-sec::before { background-color: var(--main-color, #10a0ea); border-radius: 2px; content: ""; display: inline-block; height: .9em; margin-right: .45em; width: 3px; }
/* 弹窗正文的首个小节标题不需要顶部大间隙 */
.modal .prose > .api-sec:first-child { margin-top: 0; }
.modal .api-sec { margin: 1rem 0 .5rem; }
/* 文档页脚注：与弹窗正文同色同号（inherit = 14px），不再用突兀的灰色小字 */
.api-note { color: inherit; }
/* 优惠信息弹窗：内容限宽居中；优惠码等宽居中；元信息行标题左/值右；无分割线 */
.promo-wrap { margin: 0 auto; max-width: 300px; }
.promo-title { margin-bottom: .5rem; }
/* 优惠码 + 复制按钮拼接（与搜索栏同构：清相接圆角融为一体） */
.promo-copy { display: flex; justify-content: center; margin-bottom: .5rem; }
.promo-copy .input { border-bottom-right-radius: 0; border-top-right-radius: 0; flex: 1 1 auto; min-width: 0; }
.promo-copy .button { border-bottom-left-radius: 0; border-top-left-radius: 0; }
.modal .input.promo-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; letter-spacing: .04em; text-align: center; }
.promo-meta { margin: 0 0 .5rem; }
.promo-meta > div { display: flex; gap: .75rem; justify-content: space-between; padding: .35rem 0; }
.promo-meta dt { color: var(--ink-muted); flex-shrink: 0; font-size: .75rem; }
.promo-meta dd { margin: 0; }
/* 收集声明与元信息标题同为 12px 弱灰档，不再用 11px 极浅灰自成一档 */
.promo-foot { color: var(--ink-muted); font-size: .75rem; text-align: center; }
/* 反馈表单（关于本站弹窗，main.js 生成）：textarea 可纵向拉伸；弹窗内输入框与按钮统一 14px（高 35px） */
.hint-text { color: inherit; font-size: .875rem; margin-bottom: .75rem; }
/* 步骤列表（提示词页签「三步」）：主题色数字序号更醒目 */
.hint-list { color: inherit; font-size: .875rem; margin: 0 0 .75rem; padding-left: 1.5rem; }
.hint-list li { margin-bottom: .25rem; }
.hint-list li::marker { color: var(--main-color, #10a0ea); font-weight: 600; }
.modal .input, .modal .button { font-size: .875rem; }
.feedback-content { height: auto; min-height: 4.5em; resize: vertical; }
.feedback-contact, .feedback-submit { margin-top: 1rem; }
.feedback-submit { width: 100%; }
/* API 文档参数/字段表：正式三列表格（参数/字段 | 类型 | 说明），带边框、斑马纹与灰底表头，
   与全站表格风格一致；等宽字体仅限字段名 */
.api-params { background: transparent; border-collapse: collapse; margin-bottom: .75rem; width: 100%; }
.api-params th { background-color: var(--bg-soft); border: 1px solid var(--line-soft); color: var(--ink); font-size: .75rem; font-weight: 600; padding: .4rem .5rem; text-align: left; }
.api-params td { border: 1px solid var(--line-soft); font-size: .8125rem; padding: .45rem .5rem; vertical-align: top; }
.api-params tbody tr:nth-child(even) { background-color: var(--bg-soft); }
.api-params .api-key { white-space: nowrap; }
.api-params .api-key span { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; }
.api-params .api-type { color: var(--ink-muted); font-size: .75rem; white-space: nowrap; }
/* 表格与示例 pre 的底部间距一致，小节标题上下节奏固定，
   避免「请求参数 / 响应字段 / 示例」三块之间忽紧忽松 */
.modal .prose pre { margin-bottom: .75rem; }
/* API 文档参考表（注册商代码 / 货币代码页签）：全边框、斑马纹、行悬停 */
.api-ref-table { background-color: var(--bg); border-collapse: collapse; margin-bottom: 1rem; width: 100%; }
.api-ref-table td, .api-ref-table th { border: 1px solid var(--line); padding: .5em .75em; vertical-align: top; }
.api-ref-table th { font-weight: 600; text-align: inherit; }
.api-ref-table tbody tr:nth-child(2n) { background-color: var(--bg-soft); }
.api-ref-table tbody tr:hover { background-color: var(--bg-soft); }
/* 参考表首列为代码列：加粗突出 */
.api-ref-table td:first-child { font-weight: 600; }
/* 已停用注册商的「已停用」徽标 */
.tag-offline {
  align-items: center; background-color: var(--danger-bg); border-radius: 4px; color: var(--danger-ink); display: inline-flex;
  font-size: .75rem; height: 2em; justify-content: center; line-height: 1.5; margin-left: .5em;
  padding: 0 .75em; white-space: nowrap;
}
/* 提示条（noteBox 生成：域名页转入提醒 / 注册商页停用与小众货币提醒 / API 弹窗顶部公告）
   字号对齐全局正文体系（13px），紧凑内边距，并与下方列表拉开间距 */
.notice { border-radius: 4px; font-size: .8125rem; margin-bottom: 1rem; padding: .65rem 1rem; position: relative; }
.notice-warning { background-color: var(--warn-bg); color: var(--warn-ink); }
.notice-danger { background-color: var(--danger-bg); color: var(--danger-ink); }
/* 分页：上一页在左、页码居中、下一页在右（模板源码顺序为 prev/next/list，用 order 重排） */
.pagination { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1rem; text-align: center; }
.pagination-previous { order: 1; }
.pagination-next { order: 3; }
.pagination-list { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; order: 2; padding: 0; }
.pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis {
  align-items: center; border: 1px solid transparent; border-radius: 4px; display: inline-flex;
  font-size: .8125rem; height: 2.5em; justify-content: center; line-height: 1.5; margin: .25rem;
  min-width: 2.5em; padding: calc(.5em - 1px) .5em; text-align: center; vertical-align: top;
}
.pagination-previous, .pagination-next, .pagination-link { border-color: var(--line); color: var(--ink); cursor: pointer; }
.pagination-previous:hover, .pagination-next:hover, .pagination-link:hover { border-color: var(--line-strong); color: var(--ink); }
/* 首末页禁用态：灰底不可点 */
.pagination-previous[disabled], .pagination-next[disabled] { background-color: var(--bg-alt); border-color: var(--line); color: var(--ink-disable); cursor: default; pointer-events: none; }
.pagination-link.is-current { background-color: var(--bg); border-color: var(--main-color, #10a0ea); color: var(--main-color, #10a0ea); }
.pagination-link.is-current:hover { opacity: .8; }
.pagination-ellipsis { color: var(--ink-muted); pointer-events: none; }

/* ---------- 7. 站点区块 ---------- */
/* 搜索区 / 主内容区容器 */
.search { padding: 1.5rem; }
.main { padding: 1.5rem; }
/* 比价列表（数据密集型：正文 13px、行高宽松、横向紧凑；is-focuscolor 列高亮由 JS 内联设置） */
.list {
  max-width: 100%; overflow: auto; overflow-y: hidden; padding-bottom: 1.5rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.list::-webkit-scrollbar { display: none; height: 0; }
/* 比价表格：通栏居中、无竖线、奇偶行浅灰/白相间、行悬停加深 */
.price-table { background-color: transparent; border-collapse: collapse; font-size: .8125rem; margin-bottom: 1.5rem; max-width: 100%; text-align: center; width: 100%; }
.price-table td, .price-table th { border: 0; color: var(--ink); padding: .78rem .6rem; vertical-align: middle; white-space: nowrap; }
.price-table th { font-weight: 600; }
.price-table thead th { background-color: var(--thead-veil); }
.price-table thead tr th[colspan] { font-size: .875rem; font-weight: 600; }
.price-table tbody tr:nth-child(odd) { background-color: var(--bg-soft); }
.price-table tbody tr:hover { background-color: var(--bg-alt); }
/* 跨列占位行（「暂无数据」等纯文本行）弱化为灰色 */
.price-table tbody td[colspan]:not(:has(a)) { color: var(--ink-muted); }
/* 首列（注册商/后缀名）允许换行，长名字不撑破表格 */
.price-table td:first-child, .price-table th:first-child { white-space: normal; }
.price-table a { color: var(--ink); }
/* 首列后缀名：加粗放大一档 */
.price-table .cell-tld { font-size: .875rem; font-weight: 600; }
/* 首页/全部后缀 Top3 单元格：仿旧版三列——每组限宽居中（min/max-width 控制列宽），
   组内名字贴左、价格贴右（space-between）；组内空隙被组宽上限锁住，
   恒小于组与组之间的剩余空隙（组内距 < 组间距的分组原则），无需边框也不会误读 */
.price-table td.top3-cell { padding-left: .5rem; padding-right: .5rem; }
.top3-item { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 12rem; min-width: 10rem; }
.top3-name, .top3-price { flex: 0 1 auto; }
.top3-name { text-align: left; }
.top3-price { text-align: right; }
/* 行内价格展示：换算标签“≈ x 元”独立成行防超宽；优惠按钮独立成行收窄价格列 */
.approx-cny { color: var(--ink-muted); display: block; font-size: .75rem; line-height: 1.2; }
/* 用户关闭换算（hide-cny 由 head 内联脚本/main.js 挂 <html>）：全站隐藏换算行，不动 SSR 与 ETag */
.hide-cny .approx-cny { display: none; }
/* 价格 n/a（该类型不出售）的占位横杠弱化为灰色 */
.price-na { color: var(--ink-muted); }
/* 优惠信息按钮（btn-promocode 为 main.js 钩子）：红底胶囊小标签 */
.btn-promocode {
  align-items: center; background-color: #f14668; border: 0; border-radius: 4px; color: #fff;
  cursor: pointer; display: block; font-size: .75rem; height: 2em; line-height: 1.5;
  margin: .3rem auto 0; padding: 0 .5em; white-space: nowrap; width: max-content;
}
.btn-promocode:hover { opacity: .8; }
/* Top3 价格列（top3-price）内的优惠按钮靠右与价格对齐；详情页单元格内仍居中 */
.top3-price .btn-promocode { margin-left: auto; margin-right: 0; }
/* 图标：24×24 基类；注册商图标为后台上传的 <img>；地球图标为内联 SVG；middle 使图标与同行文字视觉居中 */
.icon { background-repeat: no-repeat; display: inline-block; height: 24px; margin-right: .75rem; vertical-align: middle; width: 24px; }
img.icon { object-fit: contain; }
/* 含图标的链接用 flex 精确居中：vertical-align:middle 对齐的是基线+x高度一半，
   中文字形视觉中心更高，会显得名字偏上；flex 居中不受字体度量影响。
   覆盖：Top3 条目、详情页首列、页底“更多域名后缀”；不支持 :has 的浏览器退回上一行 middle 方案 */
.price-table a:has(.icon) { align-items: center; display: inline-flex; }
/* 页脚：顶部细分隔线让页面收尾更清晰 */
.site-footer { background-color: var(--bg-alt); border-top: 1px solid var(--line-soft); }
/* 左右同款弱灰 14px；flex 两端对齐：桌面文案左、更新时间右同行（float 方案在 DOM 调序后无法上浮同行，故改 flex）；
   DOM 顺序即触屏堆叠顺序（上文案、下时间） */
.footer-container { display: flex; justify-content: space-between; padding: 1.5rem; }
.footer-updated { color: var(--ink-muted); font-size: .875rem; }
.footer-text { color: var(--ink-muted); font-size: .875rem; }
.footer-text a { color: var(--ink-muted); margin: 0 .25rem; }
.footer-text a:first-child { margin-left: 0; }
.footer-text a:last-child { margin-right: 0; }
.footer-text a:hover { color: var(--link-hover); text-decoration: underline; }
/* 触屏：两行堆叠各自居中，行间留半档间距 */
@media screen and (max-width: 1023px) {
  .footer-container { flex-direction: column; align-items: center; gap: .25rem; }
}

/* ---------- 8. 响应式与无障碍 ---------- */
/* 触屏/桌面分界绕一为 1023/1024（与 footer-updated 同族），消除 1024px 双命中窗口 */
@media screen and (max-width: 1023px) {
  /* 页头改均匀分布，窄屏两端不留大空白 */
  .header-bar { justify-content: space-around; }
  .header-nav-btn { margin: .25rem .5rem; }
}
@media screen and (max-width: 768px) {
  /* 页头瘦身：首屏留给内容；导航按钮回归紧凑尺寸（窄屏一行放不下桌面版大按钮） */
  .header-bar { padding: .75rem 1rem; }
  .brand-name { font-size: 1.35rem; }
  .header-nav-btn { font-size: .8125rem; margin: .25rem; padding: .35rem .8rem; }
  /* 齿轮图标按钮同步收窄为紧凑正方形 */
  .dropdown-prefs .header-nav-btn { padding: .35rem; }
  /* 搜索区/主内容区/页脚容器同步收紧，给表格腾空间，四大区块移动端内边距统一 1rem */
  .search, .main, .footer-container { padding: 1rem; }
  /* 表格：垂直保持宽松行高，横向收紧；手机列窄，Top3 组取消限宽改为铺满（组内空隙自然小于组间） */
  .price-table td, .price-table th { padding: .62rem .4rem; }
  .top3-item { max-width: none; min-width: 0; }
  /* 弹窗占满小屏宽度（含 API 文档 is-wide：其 860px 特异性高于普通 mobile 覆盖，需一并声明）；文档表字段名允许换行防撑宽 */
  .modal-card, .modal-card.is-wide { max-width: 640px; width: calc(100vw - 1.5rem); }
  /* API 文档参数/字段表窄屏卡片化：隐藏表头，每行一块——字段名与类型同行、说明另起一行，
     三列并排在窄屏会挤压换行难读 */
  .api-params thead { display: none; }
  .api-params, .api-params tbody { display: block; }
  .api-params tr { border-bottom: 1px solid var(--line-soft); display: block; padding: .5rem 0; }
  .api-params tbody tr:last-child { border-bottom: 0; }
  .api-params td { border: 0; display: block; padding: .1rem 0; }
  .api-params td.api-key, .api-params td.api-type { display: inline-block; }
  .api-params td.api-key { margin-right: .5rem; }
  /* 触屏可达性：订单切换小按钮提到 40px 高 */
  .btn-order .button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}