/* ============================================================
   银狐拦截系统 · 页面样式
   基调：编辑排版式——以细线与排版层级建立结构；在克制的前提下
   用适量的线性 SVG 与点缀色（品牌色/语义色）提供识别度。
   ============================================================ */

:root {
  --nav-h: 60px;      /* 顶栏高度，分栏骨架的定位基准 */
  --maxw: 1080px;     /* 内容最大宽度 */
  --gutter: 24px;     /* 左右安全边距 */
}

/* ============================================================
   一、页面骨架
   nav / main / footer 三段纵向排列，撑满视口：
   内容短时页脚落在底部，内容长时正常向下生长（整页滚动）。
   ============================================================ */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.site-nav { flex: none; }
main.wrap { flex: 1 1 auto; }
.site-foot { flex: none; margin-top: auto; }

/* 键盘用户跳过导航 */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); transition: top .16s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }
.skip-link:focus-visible { box-shadow: var(--shadow), var(--ring); }

/* 锚点跳转不被吸顶导航遮住 */
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ============================================================
   二、顶部导航
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h);
  display: flex; align-items: center; gap: 30px;
}
.nav-brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; flex: none; }
.nav-brand:hover { text-decoration: none; }
.nav-brand svg { width: 19px; height: 19px; color: var(--brand); }
.nav-brand b { font-size: 14.5px; font-weight: 650; letter-spacing: -.012em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: 6px; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--text-3); text-decoration: none;
  padding: 3px 0; border-bottom: 1.5px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ============================================================
   三、容器与页头
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 52px var(--gutter) 96px; }
.wrap.narrow { max-width: 580px; }
.wrap.mid { max-width: 760px; }

.page-head { margin-bottom: 32px; }
.page-head h1 {
  font-size: 30px; line-height: 1.28; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); max-width: 30ch;
}
.page-head .lead {
  margin-top: 12px; color: var(--text-2); font-size: 14.5px; line-height: 1.85;
  max-width: 56ch;
}
.page-head .eyebrow { margin-bottom: 14px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .11em;
  color: var(--brand); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--brand); border-radius: 2px; }

/* ============================================================
   四、首屏
   ============================================================ */
.hero { padding: 26px 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 52px; align-items: center; }
.hero-text { max-width: 640px; }
/* 插画底衬：极轻的品牌色晕，画在元素自身盒内（不外溢，避免横向溢出） */
.hero-art {
  width: 100%; max-width: 332px; margin-left: auto;
  background: radial-gradient(closest-side, var(--brand-soft), transparent 74%);
}
.hero-art svg, .split-art svg { display: block; width: 100%; height: auto; }
.hero h1 {
  font-size: 38px; line-height: 1.18; font-weight: 700; letter-spacing: -.018em;
  color: var(--text);
}
.hero .lead { color: var(--text-2); font-size: 15px; line-height: 1.85; margin-top: 18px; max-width: 58ch; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.hero-status { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12.5px; color: var(--text-3); }

/* 首屏自适应（桌面端）
   目标：进入页面后 **Hero 与其下方数据条整块**都落在第一屏内，不被窗口下沿裁掉。
   做法：Hero 高度 = 视口高度 - 顶栏 - 容器上内边距 - 数据条(含上间距)，
        同时把字号/间距/插画尺寸改成随视口高度缩放（clamp + vh），
        因此窗口越矮，整块越小，始终能完整显示。
   注意：用 min-height 而非 height —— 万一内容仍超出，页面正常向下生长（不会裁切）。 */
@media (min-width: 961px) {
  .hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: min(calc(100vh - var(--nav-h) - 266px), 620px);
    padding: 0;
  }
  .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(190px, 48vh, 332px); gap: clamp(24px, 4.5vh, 52px); }
  .eyebrow { margin-bottom: clamp(10px, 1.9vh, 20px); }
  .hero h1 { font-size: clamp(24px, 4.1vh, 38px); }
  .hero .lead { font-size: clamp(13px, 1.72vh, 15px); margin-top: clamp(10px, 2vh, 18px); }
  .hero-actions { margin-top: clamp(16px, 3.2vh, 30px); }
  .hero-status { margin-top: clamp(11px, 2.1vh, 20px); }
}

/* ============================================================
   五、左右分栏
   窄屏：单列，插画在内容下方。
   桌面（>=1001px 且视口够高）：主区高度锁定为「视口 - 顶栏 - 页脚」，
   只有左栏滚动，右侧插画窗格始终不动。
   ============================================================ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 72px; align-items: stretch; }
.split-main, .split-aside { min-width: 0; }
.split-pane {
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  position: sticky; top: calc(var(--nav-h) + 32px);
}
.split-art { width: 100%; }
.split-note {
  padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-3); line-height: 1.75;
}
.split-note b { display: block; font-size: 13px; color: var(--text-2); font-weight: 640; margin-bottom: 5px; }

@media (min-width: 1001px) and (min-height: 620px) {
  .wrap.shell { flex: 1 1 0; min-height: 0; padding: 0 var(--gutter); overflow: hidden; }
  .wrap.shell .split { height: 100%; }
  .wrap.shell .split-main { overflow-y: auto; overscroll-behavior: contain; padding: 44px 14px 56px 0; }
  .wrap.shell .split-aside { padding: 44px 0 56px; }
  .wrap.shell .split-pane { position: static; height: 100%; }
  /* 骨架锁高后页脚紧贴底部：取消外部间距，整体正好一屏 */
  .wrap.shell + .site-foot { margin-top: 0; }
}
@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .split-pane { position: static; }
  .split-art { max-width: 300px; }
}

/* ============================================================
   六、线性插画（三张共用一套 class；配色全部走 CSS 变量）
   ============================================================ */
.a-dot { fill: var(--border-2); }
/* 雷达扫掠 */
.a-ring { fill: none; stroke: var(--brand); stroke-opacity: .20; }
.a-cross { stroke: var(--border-2); }
.a-stop-a { stop-color: var(--brand); stop-opacity: .22; }
.a-stop-b { stop-color: var(--brand); stop-opacity: 0; }
/* 盾牌与勾选 */
.a-shield { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.a-check { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.a-halo { fill: none; stroke: var(--brand); stroke-opacity: .22; stroke-dasharray: 5 9; }
.a-node { fill: var(--brand); fill-opacity: .45; }
/* 红色拦截标记 */
.a-blocked, .a-flag, .a-flagx { fill: none; stroke: var(--danger); stroke-opacity: .9; stroke-width: 1.8; stroke-linecap: round; }
.a-flagx { stroke-width: 2; }
/* 线索表单卡（上报页侧栏） */
.a-card { fill: var(--surface); stroke: var(--border-2); }
.a-bar { fill: var(--brand); fill-opacity: .6; }
.a-line, .a-row { stroke: var(--text-3); stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; }
.a-box { fill: none; stroke: var(--text-3); stroke-opacity: .45; stroke-width: 1.6; }
.a-btn { fill: var(--brand); fill-opacity: .85; }
.a-dash { stroke: var(--brand); stroke-opacity: .5; stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; }
/* 扫描（查询页侧栏） */
.a-hit { stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; }
.a-lens { fill: var(--brand); fill-opacity: .07; }
.a-lens-ring { fill: none; stroke: var(--brand); stroke-width: 2.5; }
.a-handle { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }

/* ============================================================
   七、数据条（hairline 分隔，非卡片）
   ============================================================ */
.rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 随视口高度收缩：配合 Hero 的自适应高度，保证「Hero + 数据条」整块落在第一屏内 */
  margin-top: clamp(30px, 6vh, 58px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.rail .r-item { padding: 22px 24px; border-left: 1px solid var(--border); }
.rail .r-item:first-child { border-left: 0; padding-left: 0; }
.rail .r-value {
  font-size: 22px; font-weight: 680; letter-spacing: -.022em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.rail .r-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-3); margin-top: 7px;
}
.rail .r-label svg { width: 13px; height: 13px; flex: none; color: var(--text-3); }
.rail .r-item.danger .r-label svg { color: var(--danger); }
.rail .r-item.ok .r-label svg { color: var(--ok); }
.rail .r-item.brand .r-label svg { color: var(--brand); }

/* ============================================================
   八、区块 / 行为行 / 编号要点
   ============================================================ */
.section { margin-top: 64px; }
.section.tight { margin-top: 46px; }
.section-title { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; color: var(--text-3); }

/* 行为行（可点击，hairline 分隔） */
.rows { margin-top: 18px; border-top: 1px solid var(--border); }
.row-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--border);
  color: inherit; text-decoration: none;
}
.row-link:hover { text-decoration: none; }
.row-link .rl-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 15.5px; font-weight: 640; letter-spacing: -.012em; color: var(--text);
  transition: color .15s var(--ease);
}
.row-link .rl-title svg { width: 17px; height: 17px; flex: none; color: var(--text-3); transition: color .15s var(--ease); }
.row-link .rl-desc { color: var(--text-3); font-size: 13px; line-height: 1.65; margin-top: 6px; max-width: 62ch; }
.row-link .rl-go { color: var(--text-3); display: inline-flex; transition: transform .18s var(--ease), color .18s var(--ease); }
.row-link .rl-go svg { width: 18px; height: 18px; }
.row-link:hover .rl-title, .row-link:hover .rl-title svg { color: var(--brand); }
.row-link:hover .rl-go { color: var(--brand); transform: translateX(4px); }

/* 编号要点 / 分栏说明
   分隔线两侧必须留**等量**内边距（各 24px）：先前写成 `padding: 22px 26px 4px 0`
   （左侧 0），分隔线右侧的文字会紧贴竖线，看起来像"压线"。 */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--border); }
.point { padding: 22px 24px 6px; border-right: 1px solid var(--border); }
.point:first-child { padding-left: 0; }   /* 首列文字与容器左边缘对齐 */
.point:last-child { border-right: 0; padding-right: 0; }   /* 末列文字与容器右边缘对齐 */
.point .p-num {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  color: var(--brand); letter-spacing: .04em;
  padding-bottom: 3px; border-bottom: 1.5px solid var(--brand);
}
.point b { display: block; font-size: 14px; font-weight: 640; letter-spacing: -.01em; margin: 12px 0 7px; }
.point p { font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
/* 图例标签：用于解释语义（不是可点的页签，故不用品牌色下划线） */
.p-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
}
.p-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.p-tag.danger { color: var(--danger); }
.p-tag.ok { color: var(--ok); }
.p-tag.none { color: var(--text-3); }

/* ============================================================
   九、常见问题（原生 details，无 JS）
   ============================================================ */
.faq { margin-top: 18px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 0; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 640; letter-spacing: -.01em; color: var(--text);
  transition: color .15s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary svg {
  width: 16px; height: 16px; flex: none; color: var(--text-3); margin-right: 3px;
  transform: rotate(90deg); transition: transform .2s var(--ease), color .15s var(--ease);
}
.faq summary:hover svg { color: var(--brand); }
.faq details[open] > summary svg { transform: rotate(-90deg); }
.faq .faq-body { padding: 0 0 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.9; max-width: 68ch; }
.faq .faq-body + .faq-body { padding-top: 0; }

/* ============================================================
   十、提示条（左侧细线 + 线性图标）
   ============================================================ */
.callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding-left: 15px; border-left: 2px solid var(--border-2);
  font-size: 13px; line-height: 1.75; color: var(--text-3); margin-bottom: 28px;
}
.callout > svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--text-3); }
.callout.ok { border-left-color: var(--ok); color: var(--text-2); }
.callout.ok > svg { color: var(--ok); }
.callout.err { border-left-color: var(--danger); color: var(--danger); }
.callout.err > svg { color: var(--danger); }
.callout > div { min-width: 0; }
.callout b { color: var(--text); font-weight: 650; }

/* 人机验证（Cloudflare Turnstile）容器 —— 可选功能，未启用时整块不会渲染。
   widget 用 flexible 尺寸自适应可用宽度，窄屏下不要溢出容器。 */
.ts-box { margin: 16px 0 4px; }
.ts-box .cf-turnstile { max-width: 100%; }

/* ============================================================
   十一、表单与查询结果
   ============================================================ */
.form-flat { margin-top: 4px; }

.result { margin-top: 34px; border-top: 1px solid var(--border); padding-top: 26px; }
.result-domain { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.result-domain .dom { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.status { font-size: 11.5px; font-weight: 650; letter-spacing: .07em; }
.status.danger { color: var(--danger); }
.status.ok { color: var(--ok); }
.status.muted { color: var(--text-3); }
.verdict {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding-left: 15px; border-left: 2px solid var(--border-2); max-width: 62ch;
}
.verdict .v-ico { flex: none; margin-top: 2px; color: var(--text-3); }
.verdict .v-ico svg { width: 19px; height: 19px; }
.verdict.danger { border-left-color: var(--danger); }
.verdict.danger .v-ico { color: var(--danger); }
.verdict.danger b { color: var(--danger); }
.verdict.ok { border-left-color: var(--ok); }
.verdict.ok .v-ico { color: var(--ok); }
.verdict.ok b { color: var(--ok); }
.verdict b { display: block; font-size: 14.5px; font-weight: 640; letter-spacing: -.01em; margin-bottom: 5px; color: var(--text); }
.verdict p { font-size: 13px; color: var(--text-2); line-height: 1.75; }
.verdict > div { min-width: 0; }

/* ============================================================
   十二、页脚（单行 hairline）
   ============================================================ */
.site-foot { border-top: 1px solid var(--border); }
.foot-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 10px 26px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3);
}
.foot-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.foot-brand svg { width: 15px; height: 15px; flex: none; color: var(--brand); }
.foot-brand b { font-size: 12.5px; font-weight: 620; color: var(--text-2); white-space: nowrap; }
.foot-note { display: flex; align-items: center; gap: 6px; }
.foot-note svg { width: 13px; height: 13px; flex: none; }
.foot-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-nav a { color: var(--text-3); }
.foot-nav a:hover { color: var(--text); }

/* ============================================================
   十三、辅助
   ============================================================ */
/* 反机器人诱饵字段：1px 裁切隐藏（不参与布局，也不产生离屏滚动区） */
.hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
form.form-flat { position: relative; }

.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.back-link:hover { color: var(--brand); text-decoration: none; }
.back-link svg { width: 15px; height: 15px; }
.mono-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   十四、服务状态页（只表达「服务是否可用」）
   ============================================================ */
.status-band {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.status-band .sb-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: var(--ok); }
.status-band .sb-ico svg { width: 26px; height: 26px; }
.status-band.warn .sb-ico { color: var(--warn); }
.status-band.fail .sb-ico { color: var(--danger); }
.status-band .sb-text { min-width: 0; }
.status-band .sb-text b { display: block; font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
.status-band .sb-text span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.6; }
.status-band .sb-time {
  margin-left: auto; font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.svc-list { margin-top: 30px; border-top: 1px solid var(--border); }
.svc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.svc .svc-name {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 640; letter-spacing: -.01em;
}
.svc .svc-state { font-size: 12.5px; font-weight: 650; text-align: right; }
.svc .svc-state.ok { color: var(--ok); }
.svc .svc-state.warn { color: var(--warn-2); }
.svc .svc-state.fail { color: var(--danger); }
/* 说明与上一行的标题文字对齐（标题前有 8px 状态点 + 9px 间距） */
.svc .svc-desc { grid-column: 1 / -1; padding-left: 17px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

/* ============================================================
   十五、窄屏
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero-art { max-width: 268px; margin: 0; }
  .hero-text { max-width: none; }
  .points { grid-template-columns: 1fr; }
  .point { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .point:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  /* 导航：品牌行 + 可横向滚动的链接行 */
  .nav-inner { flex-wrap: wrap; gap: 6px 10px; height: auto; padding: 12px 18px; row-gap: 4px; }
  .nav-brand { flex: 1 1 auto; min-width: 0; }
  .nav-actions { margin-left: auto; }
  .nav-links {
    order: 3; flex: 1 0 100%; gap: 18px; margin-left: 0;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; flex: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 34px 18px 72px; }
  .page-head { margin-bottom: 24px; }
  .page-head h1 { font-size: 24px; }
  .page-head .lead { font-size: 14px; margin-top: 10px; }

  .hero { padding: 10px 0 0; }
  .hero-art { max-width: 208px; }
  .hero h1 { font-size: 27px; letter-spacing: -.012em; }
  .hero .lead { font-size: 14px; margin-top: 14px; }
  .hero-actions { gap: 10px; margin-top: 24px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .split { gap: 36px; }
  .split-art { max-width: 232px; }

  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .rail .r-item { padding: 16px 16px; }
  .rail .r-item:first-child { padding-left: 0; }
  .rail .r-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rail .r-item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .rail .r-value { font-size: 19px; }

  .section { margin-top: 48px; }
  .row-link { padding: 18px 0; gap: 14px; }
  .row-link .rl-title { font-size: 15px; }
  .faq summary { font-size: 14px; padding: 15px 0; }

  .verdict { padding-left: 13px; }

  /* 服务状态页 */
  .status-band { padding: 16px 0; gap: 12px; }
  .status-band .sb-text b { font-size: 15.5px; }
  .status-band .sb-time { margin-left: 0; width: 100%; }
  .svc-list { margin-top: 24px; }
  .svc { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 14px 0; }
  .svc .svc-state { text-align: left; }

  /* 行内控件组：输入框占满一行，按钮在下一行等宽平分 */
  .finline > input { flex: 1 1 100%; }
  .finline > .btn { flex: 1 1 0; }

  .foot-inner { padding: 16px 18px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-nav { gap: 16px; }
  code { font-size: 11.5px; }
}