/* ============================================================================
   Aeolith — console layer v2
   ----------------------------------------------------------------------------
   Rebuilt to match the design language the operator actually produced, then
   refined with the rules from the brief:

     · centred rhythm — pill badge, centred title, centred lede, then content;
     · one brand gradient (indigo → violet, the same two colours as the logo)
       used for emphasis, primary actions and icon chips — not for decoration;
     · white cards with a 1px line and a soft shadow; no heavy borders;
     · one dark band in the middle of the page: that is where the "console"
       reads as a console rather than as a claim;
     · #fcfcfd paper with a barely-there grid;
     · a single type scale (11 → 52px), monospace only for machine facts;
     · circular +/− on disclosure rows, rotating and shifting colour on hover.

   Scoped to `body.page-console` so a page opts in with one block.
   ========================================================================== */

.page-console {

  /* 字体变量在本层重新定义。aeolith.css 的 --font-mono 是“系统等宽栈”，
     而 var(--x, 回退值) 里的回退只在变量未定义时才生效 —— 不覆盖这里的变量，
     写再多 var(--font-mono, 'DM Mono') 也仍然是系统等宽。 */
  --font-sans: 'DM Sans', Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', GeistMono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 仅统计区的数字使用 font-mono 系统等宽栈（Tailwind 的 .font-mono 取值）；
     其他等宽元素（栏目标签、轴编号、矩阵计数、终端、页脚）仍走 --font-mono。 */
  --font-num: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-display: 'Space Grotesk', 'DM Sans', sans-serif;
  /* Type scale — the only sizes used on this layer. */




  /* The dark band. */






  --fs-11: 12.5px;
  --fs-12: 12.5px;
  --fs-13: 13.5px;
  --fs-14: 13.5px;
  --fs-16: 15px;
  --fs-18: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-h1: clamp(32px, 2.6vw + 20px, 48px);
  --fs-h2: clamp(24px, 1.6vw + 14px, 38px);
  --brand-1: #7c3aed;
  --brand-2: #4f46e5;
  --brand: #7c3aed;
  --brand-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --brand-soft: #f5f3ff;
  --brand-line: #ddd6fe;
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #1e1b4b;
  --ink-2: #4a4a6a;
  --ink-3: #6b6b85;
  --ink-4: #9a9ab0;
  --line: #ece9f8;
  --line-2: #ddd6fe;
  --pass: #0891b2;
  --pass-soft: #ecfeff;
  --pass-line: #cffafe;
  --warn: #a15c07;
  --warn-soft: #fdf5e6;
  --warn-line: #f0e2bd;
  --dark: #0b0f19;
  --dark-2: #141a28;
  --dark-line: rgba(255, 255, 255, .10);
  --dark-line-2: rgba(255, 255, 255, .16);
  --dark-ink: #f4f6fb;
  --dark-muted: #99a3b8;
  --dark-green: #4ade80;
  --dark-cyan: #67e8f9;
  --dark-violet: #c4b5fd;
  --dark-amber: #fcd34d;
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(10, 10, 11, .04);
  --shadow-2: 0 1px 2px rgba(10, 10, 11, .04), 0 14px 32px -22px rgba(10, 10, 11, .30);
  --shadow-3: 0 2px 4px rgba(10, 10, 11, .05), 0 28px 56px -32px rgba(10, 10, 11, .38);
  --sec-y: clamp(48px, 5.6vw, 80px);
  --sec-y-b: clamp(64px, 7.2vw, 104px);
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;  --paper-alt: #faf5ff;}

/* Faint engineering grid over the whole page. 32px cells at ~2%: texture, not pattern. */
.page-console::before {
  background-image:
    linear-gradient(to right, rgba(10, 10, 11, .015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 11, .015) 1px, transparent 1px);

  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 34px 34px;}
.page-console > * { position: relative; z-index: 1; }

.page-console .wrap { max-width: 1280px; margin-inline: auto;
  padding-inline: clamp(16px, 2.4vw, 32px); }
.page-console .mono, .page-console code {

  font-family: 'DM Mono', GeistMono, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-ligatures: none;}

/* ------------------------------------------------------------------- type */
.page-console h1, .page-console h2, .page-console h3, .page-console h4 {

  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.14;
  margin: 0 0 12px;}
.page-console h1 { font-size: var(--fs-h1); letter-spacing: -.038em; line-height: 1.06; }
.page-console h2 { font-size: var(--fs-h2); letter-spacing: -.032em; }
.page-console h3 { font-size: var(--fs-18); letter-spacing: -.02em; }
.page-console h4 { font-size: var(--fs-16); }
.page-console p { color: var(--ink-2); }
.page-console a { color: var(--ink); }
.page-console .grad {

  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;}
.page-console .fineprint { font-size: var(--fs-13); color: var(--ink-3); }

/* Centred section header: badge, title, lede. The rhythm of the reference design. */
.page-console .sec-head {
 max-width: 720px; margin: 0 auto 40px; text-align: center;
  margin: 0 auto 40px;}
.page-console .sec-head .sec-title {
  margin: 24px 0 16px;}
.page-console .sec-head .sec-lede { font-size: var(--fs-16); color: var(--ink-3); margin: 0 auto; max-width: 62ch; }

/* Pill badge with a dot — the page's only "label" device. */
.page-console .pill {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  color: #4338ca;
  font-size: var(--fs-12);
  font-weight: 500;}
.page-console .pill--warn { border-color: #f7dfd0; background: #fdf1ea; color: #a1430f; }
.page-console .pill--dark { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #c7d2fe; }

/* Breathing dot: the "live" signal, and the only motion outside hovers. */
.page-console .dot {

  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
  animation: pc-pulse 2.8s ease-out infinite;}
@keyframes pc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 75, 255, .45); }
  70%  { box-shadow: 0 0 0 6px rgba(91, 75, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 75, 255, 0); }

/* 而 var(--x, 回退值) 里的回退只在变量未定义时才生效 —— 不覆盖这里的变量，
     写再多 var(--font-mono, 'DM Mono') 也还是系统等宽。 */
}

/* --------------------------------------------------------------- chrome */
.page-console .site-header {

  position: sticky;
  top: 0;
  z-index: 40;
  background: #fcfcfd;
  border-bottom: 1px solid var(--line);}
.page-console .site-header__inner { min-height: 64px; gap: 24px; max-width: 1280px; }
.page-console .brand { gap: 8px; }
.page-console .brand__logo { border-radius: 9px; box-shadow: 0 4px 10px -4px rgba(79, 70, 229, .5); }
.page-console .brand__word { font-size: var(--fs-16); font-weight: 600; letter-spacing: -.025em; }
.page-console .brand__word::after { content: ".com"; color: var(--ink-4); font-weight: 400; }
.page-console .site-nav__list { gap: 4px; }

/* Desktop header: brand left, links centred on the container's own centre, CTA right.
   Centring with `margin: auto` only centres inside whatever space is left after the
   brand — which drifts as the brand width changes. Absolute + translateX is exact. */
@media (min-width: 901px) {   /* 桌面页头；之前被间距吸附脚本误改成 128px */
  .page-console .site-header__inner { position: relative; }
  .page-console .site-nav {
  
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;}
  .page-console .site-nav__list { justify-content: center; }
  /* CTA 在导航之外（见 base.html）：放在 <ul> 里时，绝对定位是相对 .site-nav 计算的，
     按钮会压在居中后的链接上。抽屉里的那个按钮在桌面端隐藏，二者互斥。 */
  .page-console .site-header__cta { margin-left: auto; }
  .page-console .site-nav__cta--drawer { display: none; }
}
.page-console .site-nav a {

  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--ink-3);
  padding: 8px 12px;
  border-radius: var(--r-1);
  text-decoration: none;}
.page-console .site-nav a:hover { color: var(--ink); background: rgba(10, 10, 11, .035); text-decoration: none; }
.page-console .site-nav a[aria-current="page"] { color: var(--ink); background: rgba(10, 10, 11, .05); }
/* 页头 CTA 的显示由断点决定。元素同时带 .btn，所以用类组合（0,3,0）才能压过
   .page-console .btn { display: inline-flex }；桌面端的覆盖放在文件末尾。 */
.page-console .btn.site-header__cta { display: none; }

/* 参考设计里按钮后带箭头；用伪元素加，base.html 不必为某个页面改文案。 */


/* 渐变按钮在浅底上缺一圈焦点环就等于键盘不可用。 */


.page-console .nav-toggle-label span,
.page-console .nav-toggle-label span::before,
.page-console .nav-toggle-label span::after { background: var(--ink); }

/* --------------------------------------------------------------- hero */
.page-console .hero {

  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 6.6vw, 96px) clamp(56px, 7vw, 104px);
  text-align: center;}
/* Aurora: two soft colour fields, blurred, masked so they never read as a blob. */
.page-console .hero::before {
  /* Aurora UI（skill 风格库）：多层径向渐变 + 模糊，只用在 hero 这一块。 */
  background:
    radial-gradient(42% 46% at 30% 46%, rgba(124, 58, 237, .20), transparent 70%),
    radial-gradient(38% 42% at 68% 40%, rgba(79, 70, 229, .16), transparent 72%),
    radial-gradient(30% 36% at 52% 68%, rgba(6, 182, 212, .10), transparent 74%);

  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -300px;
  width: 1180px;
  height: 620px;
  transform: translateX(-50%);
  filter: blur(26px);
  pointer-events: none;}
.page-console .hero > .wrap { position: relative; z-index: 1; }
/* 徽章与标题之间 24px：参考设计就是 24，之前是 0（贴在一起）。 */
.page-console .hero .pill { margin-bottom: 24px; }
.page-console .hero--slim {
  padding-block: clamp(48px, 5vw, 72px) clamp(40px, 4.6vw, 72px);}
.page-console .hero__title { max-width: 21ch; margin: 16px auto 16px;
  max-width: 24ch;
  margin: 0 auto 24px;
  line-height: 1.02;
}
.page-console .hero--slim .hero__title { max-width: 26ch; }
.page-console .hero__lede {

  font-size: var(--fs-18);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto 40px;}

/* The centred domain field: one wide control, one gradient action. */
.page-console .checker {

  max-width: 620px;
  margin: 0 auto;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 4px;
  box-shadow: var(--shadow-3);}
.page-console .checker__label { display: none; }
.page-console .checker__row { display: flex; gap: 8px; }
.page-console .checker__field {

  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--ink-4);}
.page-console .checker__field svg { width: 17px; height: 17px; flex: 0 0 auto; }
.page-console .checker__input {

  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  font-size: var(--fs-16);
  color: var(--ink);
  font-family: var(--font-sans);
  box-shadow: none;}
.page-console .checker__input:focus { outline: none; }
.page-console .checker__input::placeholder { color: var(--ink-4); }

.page-console .checker__note,
.page-console .checker__status {

  font-size: var(--fs-12);
  color: var(--ink-4);
  margin: 8px 4px 4px;
  text-align: center;}
.page-console .checker__status { font-family: var(--font-mono); color: var(--brand); }

.page-console .hero__trust {

  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;}
.page-console .hero__trust li {

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--ink-3);}
.page-console .hero__trust svg { width: 15px; height: 15px; color: var(--pass); flex: 0 0 auto; }

/* --------------------------------------------------------- card systems */
.page-console .section {
  padding-block: var(--sec-y) var(--sec-y-b);}
.page-console .section--tight {
  padding-block: clamp(48px, 5vw, 72px) clamp(64px, 7vw, 104px);}

.page-console .cards {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.page-console .cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.page-console .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-console .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-console .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.page-console .card {

  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  min-width: 0;
  box-shadow: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;}
.page-console .card:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); transform: translateY(-4px); }
.page-console .card--flat:hover { transform: none; box-shadow: var(--shadow-1); }
.page-console .card__top {
 display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
  margin-bottom: 16px;}
.page-console .card h3 {
  margin: 0 0 8px;}
.page-console .card p { margin: 0; font-size: var(--fs-14); color: var(--ink-3); line-height: 1.58; }

/* Tinted icon chip — the reference design's signature detail. */
.page-console .chip {

  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand-1);}
.page-console .chip svg { width: 20px; height: 20px; }
.page-console .chip--red { background: #fdf0ee; border-color: #f8dcd7; color: #c2410c; }
.page-console .chip--amber { background: #fdf6e7; border-color: #f2e3c2; color: #a16207; }
.page-console .chip--green { background: #ecf8f1; border-color: #d3ecdd; color: #15803d; }
.page-console .chip--slate { background: #f2f4f8; border-color: #e2e6ee; color: #475569; }

/* Small coloured tag pill (Access / Rendering / Schema …). */
.page-console .tag {

  font-size: var(--fs-11);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: 1px solid transparent;}
.page-console .tag--brand { background: var(--brand-soft); color: #4338ca; border-color: var(--brand-line); }
.page-console .tag--blue { background: #eef4ff; color: #1d4ed8; border-color: #dbe6ff; }
.page-console .tag--green { background: #ecf8f1; color: #15803d; border-color: #d3ecdd; }
.page-console .tag--amber { background: #fdf6e7; color: #a16207; border-color: #f2e3c2; }
.page-console .tag--slate { background: #f2f4f8; color: #475569; border-color: #e2e6ee; }

/* Small cards for the standards strip. */
.page-console .std-card {

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: border-color .16s ease, box-shadow .16s ease;}
.page-console .std-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); text-decoration: none; }
.page-console .std-card__ico {

  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-1);
  flex: 0 0 auto;}
.page-console .std-card__ico svg { width: 17px; height: 17px; }
.page-console .std-card b { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.page-console .std-card span { display: block; font-size: var(--fs-11); color: var(--ink-4); font-family: var(--font-mono); }

/* ------------------------------------------------------------- dark band */
.page-console .band {

  position: relative;
  overflow: clip   /* clip 不创建滚动容器：sticky 面板才能相对视口吸附（hidden 会把它困在 .band 里） */;
  background: var(--dark);
  color: var(--dark-ink);
  padding-block: var(--sec-y) var(--sec-y-b);
  isolation: isolate;}
.page-console .band::before {

  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -420px;
  width: 1200px;
  height: 800px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .07), transparent 62%);
  filter: blur(20px);}
.page-console .band::after {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);

  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: 48px 48px;
  mask-image: radial-gradient(90% 70% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 0%, transparent 78%);}
.page-console .band h2, .page-console .band h3 { color: var(--dark-ink); }
.page-console .band .sec-lede, .page-console .band p { color: var(--dark-muted); }
.page-console .band .card {

  background: rgba(255, 255, 255, .04);
  border-color: var(--dark-line);
  box-shadow: none;}
.page-console .band .card:hover { border-color: var(--dark-line-2); box-shadow: none; }
.page-console .band .chip { background: rgba(255, 255, 255, .07); border-color: var(--dark-line-2); color: var(--dark-violet); }

/* Terminal window: the one place the console metaphor is literal. */
.page-console .term {

  margin: 48px auto 0;
  max-width: 980px;
  border: 1px solid var(--dark-line-2);
  border-radius: var(--r-3);
  background: #05070f;
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .95);}
.page-console .term__bar {

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--dark-line);
  background: rgba(255, 255, 255, .03);}
.page-console .term__dots { display: inline-flex; gap: 4px; }
.page-console .term__dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.page-console .term__dots i:nth-child(1) { background: #ff5f57; }
.page-console .term__dots i:nth-child(2) { background: #febc2e; }
.page-console .term__dots i:nth-child(3) { background: #28c840; }
.page-console .term__name { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--dark-muted); }
.page-console .term__live {

  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--dark-green);
  border: 1px solid rgba(74, 222, 128, .28);
  background: rgba(74, 222, 128, .08);
  padding: 4px 8px;
  border-radius: var(--r-pill);}
.page-console .term__body { padding: 16px 16px 16px; font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.75; }
.page-console .term__cmd { color: var(--dark-ink); margin: 0 0 12px; }
.page-console .term__cmd i { color: var(--dark-cyan); font-style: normal; }
.page-console .term__line { display: flex; gap: 12px; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .07); }
.page-console .term__line:last-of-type { border-bottom: 0; }
.page-console .term__line span:first-child { color: var(--dark-muted); }
.page-console .term__line span:last-child { color: var(--dark-green); text-align: right; }
.page-console .term__line--warn span:last-child { color: var(--dark-amber); }
.page-console .term__code {

  margin: 12px 0 0;
  padding: 12px 12px;
  border: 1px solid var(--dark-line);
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, .025);
  color: var(--dark-muted);
  white-space: pre;
  overflow-x: auto;}
.page-console .term__code b { color: var(--dark-violet); font-weight: 500; }
.page-console .term__code em { color: var(--dark-green); font-style: normal; }
.page-console .term__foot {

  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--dark-line);
  background: rgba(255, 255, 255, .02);
  font-size: var(--fs-11);
  color: var(--dark-muted);
  font-family: var(--font-mono);}

/* --------------------------------------------------------- 15-point matrix */
.page-console .matrix {
 display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  gap: 32px;}
.page-console .group {

  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  min-width: 0;
  box-shadow: var(--shadow-1);}
.page-console .group__head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.page-console .group__badge {

  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--brand-1);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: 600;
  flex: 0 0 auto;}
.page-console .group__title { font-size: var(--fs-16); margin: 0; }
.page-console .group__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-4); }
.page-console .items { list-style: none; margin: 0; padding: 0; }
.page-console .item {

  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 15px;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-13);
  color: var(--ink-2);
  line-height: 1.5;}
.page-console .item:last-child { border-bottom: 0; }
.page-console .item__code { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-4); padding-top: 4px; }
.page-console .item__ico { width: 14px; height: 14px; margin-top: 4px; color: var(--brand); }

/* ----------------------------------------------------------------- steps */
.page-console .steps {
 display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0;
  gap: 32px;}
.page-console .step {

  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-1);}
.page-console .step__num {

  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: #4338ca;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  margin-bottom: 12px;}
.page-console .step__title { font-size: var(--fs-16); margin: 0 0 4px; }
.page-console .step p { margin: 0; font-size: var(--fs-13); color: var(--ink-3); }

/* ------------------------------------------------ check rows (features page) */
.page-console .rows { border-top: 1px solid var(--line); }
.page-console .row-item {

  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);}
.page-console .row-item__num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-4); padding-top: 4px; }
.page-console .row-item h3 { margin: 0; font-size: var(--fs-16); }
.page-console .row-item p { margin: 0; font-size: var(--fs-14); color: var(--ink-3); }

/* ------------------------------------------------------------------ blog */
.page-console .posts {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
  gap: 32px;}
.page-console .post-card {

  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;}
.page-console .post-card:hover { text-decoration: none; }
.page-console .post-card__meta { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-4); letter-spacing: .06em; }
.page-console .post-card__title { font-size: var(--fs-18); font-weight: 600; letter-spacing: -.02em; }
.page-console .post-card__text { font-size: var(--fs-13); color: var(--ink-3); margin: 0; }

/* ------------------------------------------------------------------- FAQ */
.page-console .faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.page-console .faq details { border-bottom: 1px solid var(--line); }
.page-console .faq summary {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;}
.page-console .faq summary::-webkit-details-marker { display: none; }
/* Circular +/−: two bars, the vertical one collapses; colour and rotation on hover. */
.page-console .faq__body {
  padding: 0 48px 24px 4px;}
.page-console .faq__body p { margin: 0; font-size: var(--fs-14); color: var(--ink-3); }

/* -------------------------------------------------------------- final CTA */
.page-console .cta {

  border: 1px solid var(--brand-line);
  border-radius: 20px;
  background: var(--surface);
  padding: clamp(32px, 4.4vw, 64px);
  text-align: center;
  box-shadow: var(--shadow-2);}
.page-console .cta .sec-title { margin: 12px auto 8px; max-width: 26ch; }
.page-console .cta p { color: var(--ink-3); max-width: 56ch; margin: 0 auto 24px; }

/* ------------------------------------------------------- footer (this layer) */
.page-console .site-footer {

  margin-top: 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding-block: clamp(48px, 5vw, 64px) clamp(24px, 3vw, 40px);
  color: var(--ink-3);}
.page-console .site-footer__grid { gap: 32px; }
.page-console .site-footer__tagline { font-size: var(--fs-13); color: var(--ink-3); max-width: 34ch; }
.page-console .site-footer__status { font-size: var(--fs-12); color: var(--ink-4); }
.page-console .site-footer__dot { background: var(--brand); }
.page-console .site-footer h3 {

  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin: 0 0 12px;}
.page-console .site-footer__col ul { display: grid; gap: 8px; }
.page-console .site-footer a { font-size: var(--fs-13); color: var(--ink-3); text-decoration: none; }
.page-console .site-footer a:hover { color: var(--ink); text-decoration: none; }
.page-console .site-footer__meta {

  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 16px;
  font-size: var(--fs-12);
  color: var(--ink-4);}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .page-console .cards--5, .page-console .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-console .matrix { grid-template-columns: minmax(0, 1fr); }
  .page-console .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-console .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-console .cards--2, .page-console .cards--3 { grid-template-columns: minmax(0, 1fr); }
  .page-console .row-item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .page-console .row-item p { grid-column: 2; margin-top: 8px; }
  .page-console .term__body { font-size: var(--fs-11); }
}
@media (max-width: 620px) {
  .page-console .checker__row { flex-direction: column; }
  .page-console .checker__field { padding: 0 8px; }
  
  .page-console .steps, .page-console .cards--5, .page-console .cards--4 { grid-template-columns: minmax(0, 1fr); }
  .page-console .faq__body { padding-right: 4px; }
  .page-console .term__line { flex-direction: column; gap: 4px; }
  .page-console .term__line span:last-child { text-align: left; }
  .page-console .hero { padding-block: 40px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-console .dot { animation: none; }
  .page-console .faq summary::after,
  .page-console .card,
  .page-console .post-card { transition: none; }
}

/* ---------------------------------------------------------------- icons
   Remixicon subset (static/vendor/remixicon/icons.css). One size per context, so a
   page never mixes 14px and 20px glyphs in the same row. */
.page-console .chip i { font-size: 20px; line-height: 1; }
.page-console .std-card__ico i { font-size: 18px; line-height: 1; }
.page-console .hero__trust i { font-size: 15px; line-height: 1; color: var(--pass); }
.page-console .checker__field i { font-size: 18px; line-height: 1; color: var(--ink-4); }
.page-console .item__ico { font-size: 14px; line-height: 1; color: var(--brand-1); }


/* ------------------------------------------------------------ height control
   Before this the page ran 8,189px on desktop and 12,761px on a 390px phone;
   most of the excess was stacked cards and a 712px terminal. These rules keep
   the hierarchy and cut the repeated space. */
@media (max-width: 620px) {
  /* Six capability cards stacked were 1,326px of the dark band. */
  .page-console .band .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-console .band .card { padding: 20px; }
  .page-console .band .card h3 { font-size: var(--fs-14); }
  .page-console .band .card p { font-size: var(--fs-12); }
  .page-console .term__body { font-size: 11px; padding: 12px; }
  .page-console .term__line { padding: 4px 0; }
  .page-console .term__code { padding: 12px; font-size: 11px; }
  .page-console .term__foot { flex-direction: column; gap: 4px; }
  /* 32px padding is desktop comfort; 20px is phone comfort. */
  .page-console .card, .page-console .group, .page-console .step, .page-console .post-card { padding: 20px; }
}

/* 案例区的统计数字：等宽字体对齐（skill：数字用等宽） */
.page-console .stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-30);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.page-console .stat__value span { font-size: var(--fs-14); color: var(--ink-3); font-weight: 400; }
.page-console .chip--amber { background: var(--warn-soft); color: var(--warn); }
.page-console .chip--slate { background: #f4f4f8; color: var(--ink-3); }
.page-console .tag--slate { background: #f4f4f8; color: var(--ink-3); }
.page-console .tag--amber { background: var(--warn-soft); color: var(--warn); }
.page-console .tag--red { background: #fef2f2; color: #b91c1c; }

/* ============================================================== batch fixes
   1) 顶部那条"页眉"：全局层(aeolith.css)的 .skip-link 虽然移出屏幕，但页头本身
      与页面网格之间的空隙会被看成一截多余的条。这里让页头紧贴顶部并给不透明底。 */
.page-console .site-header { top: 0; margin-top: 0; border-top: 0; background: var(--paper); }
.page-console .skip-link { position: fixed; left: -9999px; top: 0; }
.page-console .skip-link:focus { left: 16px; top: 16px; }

/* 6) 矩阵卡：全局层给 .group::before 画了一条彩色顶条 —— 去掉它，
   改成鼠标悬停时整圈彩色边框。 */
.page-console .group::before { display: none; content: none; }
.page-console .group { --group-accent: var(--brand-1); transition: border-color .18s ease, box-shadow .18s ease; }
.page-console .group--b { --group-accent: #0891b2; }
.page-console .group--c { --group-accent: #7c3aed; }
.page-console .group:hover { border-color: var(--group-accent); box-shadow: 0 0 0 1px var(--group-accent), var(--shadow-2); }

/* 7) 步骤编号重复：全局层给 .steps 加了 counter 生成的 1/2/3/4，
   与我们的 01/02/03/04 徽章重复。去掉全局那条。 */
.page-console .steps { counter-reset: none; }
.page-console .steps > li::before { content: none; display: none; }

/* 2)+12) 搜索框：高度、内边距、聚焦环、按钮对齐 */
.page-console .checker {
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.page-console .checker { position: relative; }
.page-console .checker:focus-within { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--brand-soft); }
.page-console .checker__row { display: flex; align-items: center; gap: 8px; }
.page-console .checker__field { padding: 0 16px; gap: 12px; }
.page-console .checker__field i { font-size: 18px; color: var(--ink-4); }
.page-console .checker__input { height: 52px; font-size: var(--fs-16); }


/* 提示行放在盒子"外面"（绝对定位到下方）：盒子高度恒定 70px，无论有没有提示都不会
   出现内部空白；之前提示在盒内，出现时盒子从 70px 涨到 99px，看着空一大片。 */
.page-console .checker__status {
  position: absolute;
  top: calc(100% + 8px);
  left: 8px;
  right: 8px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-12);
  line-height: 1.4;
  text-align: left;
}
.page-console .checker__status--error { color: #b91c1c; }
.page-console .checker__status--ok { color: var(--pass); }
.page-console .checker__status:empty { display: none; }
.page-console .checker__note { display: none; }

/* 3) 标准条：pill 去掉后，改成单条细线分隔的横排 */
.page-console .std-row__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 24px;
}
.page-console .std-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.page-console .std-item {
  display: flex; align-items: center; gap: 12px;
  padding: 20px;
  border-left: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .18s ease;
}
.page-console .std-item:first-child { border-left: 0; }
.page-console .std-item:hover { background: var(--brand-soft); text-decoration: none; }
.page-console .std-item i { font-size: 20px; color: var(--brand-1); }
.page-console .std-item b { display: block; font-size: var(--fs-14); color: var(--ink); }
.page-console .std-item span span { display: block; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-4); }

/* 4) 卡片底部操作行：等高 + 细线上沿 + 箭头按钮 */
.page-console .card { display: flex; flex-direction: column; }
.page-console .card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
}
.page-console .card__foot-code { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-4); }
.page-console .link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-13); font-weight: 600; color: var(--brand-1); text-decoration: none;
}
.page-console .link-arrow i { font-size: 14px; transition: transform .18s ease; }
.page-console .link-arrow:hover { color: var(--brand-2); text-decoration: none; }
.page-console .link-arrow:hover i { transform: translateX(3px); }

/* 8) 统计区：数据表式的四栏（顶部一条通栏细线 + 栏间竖细线），
   每栏：等宽小标签 → 大号数字 → 标题 → 说明；悬停时数字与顶部短线变品牌色。 */
.page-console .stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.page-console .stat {
  position: relative;
  padding: 32px 32px 8px;
  border-left: 1px solid var(--line);
}
.page-console .stat:first-child { border-left: 0; padding-left: 0; }
.page-console .stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-grad);
  transition: width .25s cubic-bezier(.2, .7, .3, 1);
}
.page-console .stat:first-child::before { left: 0; }
.page-console .stat:hover::before { width: 48px; }
.page-console .stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 16px;
}
.page-console .stat__value {
  /* 统计数字用 font-mono 系统等宽栈（Tailwind 默认值）：Mac→SF Mono/Menlo，
     Windows→Consolas，Linux→Liberation Mono。等宽数字天然对齐，宽度一致。
     系统栈随平台不同，所以不做字体子集/自托管，也就不占下载体积。 */
  font-family: var(--font-num);
  font-size: clamp(36px, 3.2vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 12px;
  transition: color .2s ease;
}
.page-console .stat:hover .stat__value { color: var(--brand-1); }
.page-console .stat__value span {
  font-family: var(--font-num);               /* 单位同属这组数字 */
  font-size: var(--fs-16); color: var(--ink-4); font-weight: 400; margin-left: 6px;
  letter-spacing: 0;
}
.page-console .stat__title { font-size: var(--fs-15, 15px); margin: 0 0 8px; }
.page-console .stat__note { font-size: var(--fs-14); color: var(--ink-3); margin: 0; line-height: 1.65; }

@media (max-width: 1080px) {
  .page-console .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-console .stat { padding: 28px 24px 8px; }
  .page-console .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .page-console .stat:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 28px; }
}
@media (max-width: 620px) {
  .page-console .stat-row { grid-template-columns: minmax(0, 1fr); }
  .page-console .stat { border-left: 0; padding: 24px 0 8px; }
  .page-console .stat:not(:first-child) { border-top: 1px solid var(--line); }
}
/* 9) 交付物：分隔线行 + 大号序号 */
.page-console .rows--big { border-top: 1px solid var(--line); }
.page-console .row-item--big { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 32px 4px; }
.page-console .row-item--big .row-item__num { font-size: var(--fs-24); color: var(--brand-line); padding-top: 0; }
.page-console .row-item--big h3 { font-size: var(--fs-20); margin: 0 0 8px; }
.page-console .row-item--big p { font-size: var(--fs-14); color: var(--ink-3); margin: 0; }

/* 11) FAQ：无边框。用留白 + 极浅底色分区（悬停/展开时着色），圆形 +/− 保留。
   之前是"顶部一条线 + 每项底部一条线"，按要求全部去掉。 */
.page-console .faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line);
  display: block; }   /* 全局层是 display:grid; gap:16px —— 那 16px 会夹在每条分割线之间，去掉 */
.page-console .faq details {
  border: 0;                                   /* 全局层的 details 有上边框，这里清掉 */
  border-bottom: 1px solid var(--line);        /* 每一项下方一条分割线 */
  border-radius: 0;
  transition: background .18s ease;
}
.page-console .faq details + details { margin-top: 0; }   /* 上下等距：分割线上下的留白都是 16px */
.page-console .faq details:hover { background: transparent; }   /* 悬停不加底色，反馈只靠图标变色 */
.page-console .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border: 0;
  border-radius: 12px;
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.page-console .faq summary::-webkit-details-marker { display: none; }
.page-console .faq summary::after {
  content: "\ea13";                    /* ri-add-line：纯 +，无圆圈、无底色 */
  font-family: 'remixicon';
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
  transition: color .18s ease;
}
.page-console .faq summary:hover::after { color: var(--brand-1); }
.page-console .faq details[open] summary::after {
  content: "\f1af";                    /* ri-subtract-line：展开时是纯 − */
  color: var(--brand-1);
}

.page-console .faq details[open] summary { color: var(--brand-1); }
.page-console .faq__body { padding: 0 64px 24px 20px; }
.page-console .faq__body p { margin: 0; font-size: var(--fs-15); line-height: 1.5; color: var(--ink-2); }

/* 12) 结尾 CTA：通栏、无边框、居中、渐变 */
.page-console .cta-full {
  position: relative;
  padding: clamp(64px, 8vw, 112px) 0;
  text-align: center;
  background: linear-gradient(180deg, #f7f3ff 0%, #fdfbff 55%, #ffffff 100%);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.page-console .cta-full::before {
  content: "";
  position: absolute; inset: -20% 10% 40% 10%;
  background: radial-gradient(40% 55% at 50% 40%, rgba(124, 58, 237, .18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.page-console .cta-full > .wrap { position: relative; z-index: 1; }
.page-console .cta-full .sec-title { margin: 20px auto 16px; max-width: 26ch; }
.page-console .cta-full p { color: var(--ink-2); max-width: 58ch; margin: 0 auto 40px; }
.page-console .cta-full .checker { max-width: 620px; margin: 0 auto; }

/* 13) 页脚：版权与联系左右分栏 */
.page-console .site-footer__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--line); margin-top: 32px; padding-top: 16px;
  font-size: var(--fs-12); color: var(--ink-4);
}
.page-console .site-footer__contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.page-console .site-footer__copy { margin: 0; }

@media (max-width: 1080px) {
  .page-console .std-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-console .std-item { border-top: 1px solid var(--line); }
  .page-console .std-item:nth-child(odd) { border-left: 0; }
  .page-console .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .page-console .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .page-console .stat:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 32px; }
  .page-console .row-item--big { grid-template-columns: 56px minmax(0, 1fr); }
  .page-console .row-item--big .link-arrow { grid-column: 2; }
}
@media (max-width: 620px) {
  .page-console .std-row { grid-template-columns: minmax(0, 1fr); }
  .page-console .stat-row { grid-template-columns: 1fr; }
  .page-console .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .page-console .stat:first-child { border-top: 0; padding-top: 0; }
  .page-console .site-footer__meta { flex-direction: column; align-items: flex-start; }
  .page-console .faq__body { padding-right: 0; }
}

/* 5) 深色带：左右分栏，左列可点击/滚动切换，右列吸附 */
.page-console .band__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}
.page-console .band__list { display: grid; gap: 8px; }
.page-console .cap {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 20px;
  text-align: left;
  border: 1px solid var(--dark-line);
  border-radius: 12px;
  background: transparent;
  color: var(--dark-ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.page-console .cap:hover { background: rgba(255, 255, 255, .05); border-color: var(--dark-line-2); }
.page-console .cap.is-active { background: rgba(255, 255, 255, .06); border-color: rgba(124, 58, 237, .55); }
.page-console .cap__chip {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: var(--dark-violet);
  font-size: 20px;
}
.page-console .cap.is-active .cap__chip { background: var(--brand-1); color: #fff; }
.page-console .cap__body b {
  display: block;
  font-size: var(--fs-16);
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
.page-console .cap__body span { display: block; margin-top: 4px; font-size: var(--fs-13); color: var(--dark-muted); line-height: 1.6; }
.page-console .tag--dark { background: rgba(255, 255, 255, .08); color: var(--dark-cyan); }
.page-console .band__panel { position: sticky; top: 88px; }

/* 10) 文章轮播：Swiper 3 / 2 / 1 列 */
.page-console .blog-swiper { padding-bottom: 4px; }
.page-console .blog-swiper .swiper-slide { height: auto; }
.page-console .blog-swiper .post-card { height: 100%; }
.page-console .blog-swiper__bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.page-console .blog-swiper__pagination { display: flex; align-items: center; gap: 6px; }
.page-console .blog-swiper__pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 !important; border-radius: 50%; background: var(--line-2); opacity: 1; }
.page-console .blog-swiper__pagination .swiper-pagination-bullet-active { width: 18px; border-radius: 3px; background: var(--brand-1); }
.page-console .blog-swiper__nav { display: flex; gap: 8px; }
.page-console .blog-swiper__nav button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
  min-width: 0;
}
.page-console .blog-swiper__nav button:hover { border-color: var(--brand-1); color: var(--brand-1); }
.page-console .blog-swiper__nav button i { font-size: 18px; }

/* 4) 卡片底部：代码与链接不再互相挤（允许换行，链接不折行） */
.page-console .card__foot { flex-wrap: wrap; gap: 8px 16px; }
.page-console .card__foot-code { flex: 1 1 auto; min-width: 0; }
.page-console .link-arrow { white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 1080px) {
  .page-console .band__split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-console .band__panel { position: static; }
}

/* 5) 深色带的滚动联动：左列是时间轴（轨道 + 圆环节点 + 进度填充），右列是吸附面板。
   对齐算式：容器 padding-left 40px ⇒ 卡片左边缘在 x=40；轨道 left:0 宽 4px ⇒ 圆心 x=2；
   节点 12px 要圆心落在 x=2 ⇒ 相对卡片 left = 2 - 6 - 40 = -44px。 */
.page-console .band__split { align-items: start; }
.page-console .band__list-wrap {
  /* 时间轴的三个尺寸令牌。改线宽或圆径时下面的 calc() 会自动重算，不必手调偏移。
     规则：圆心 = 线中心 ⇒ 圆的 left = w/2 − D/2；描边 b 取偶数且 = 线宽 ⇒ 左右对称。 */
  --rail-w: 1px;      /* 线宽。1px 线占第 0 列，中心在 0.5 */
  --node-d: 13px;     /* 圆直径。奇数 13px ⇒ 圆心也在 0.5，正好压在 1px 线中心 */
  --indent: 40px;     /* 卡片相对轨道左沿的缩进 */
  --card-bw: 1px;     /* 卡片边框：绝对定位的坐标原点是"内边距盒"，必须把这 1px 补回来 */
  position: relative;
  padding-left: var(--indent);
  min-width: 0;   /* grid 子项默认 min-width:auto，会被内容撑开 */
}
.page-console .band__rail {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: var(--rail-w);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.page-console .band__rail-fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand-1));
  transition: height .18s cubic-bezier(.2, .7, .3, 1);
}
.page-console .band__list { display: grid; gap: 16px; }
.page-console .cap {
  min-height: 180px;   /* 6 张 ⇒ 左列 ~1,150px：吸附窗口约 620px */
  padding: 32px 24px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  position: relative;
}
.page-console .cap > .tag { position: absolute; top: 20px; right: 20px; }
.page-console .cap__body span { max-width: 44ch; }

/* 时间轴节点：默认空心圆环，落在轨道正中；当前项填充品牌色 + 外发光。 */
.page-console .cap::after {
  content: "";
  position: absolute;
  left: -44px;
  top: 50%;
  box-sizing: border-box;
  /* 节点 12px + 2px 描边：与 2px 轨道等宽，圆环左右各 2px 对称（1.5px 描边会被
     浏览器按设备像素取整成 1px/2px，看起来就像偏心）。圆心必须落在轨道中心：
     容器 padding-left 40px ⇒ 卡片左边缘 x=40；轨道宽 2px ⇒ 线中心 x=1；
     节点 12px 要让圆心 = 1 ⇒ 相对卡片 left = 1 - 6 - 40 = -45px。 */
  width: var(--node-d);
  height: var(--node-d);
  /* 圆心落在轨道中心：
       圆左沿 = 线中心(0.5) − 半径(6.5) = −6px（相对线左沿）
       再减卡片缩进(--indent) 与卡片边框(--card-bw)——绝对定位原点在边框之内，
       漏掉这 1px 就是"线看起来偏左"的真正原因。 */
  left: calc(var(--rail-w) / 2 - var(--node-d) / 2 - var(--indent) - var(--card-bw));
  margin-top: calc(var(--node-d) / -2);
  border-radius: 50%;
  /* 不透明底（盖住线）+ 用背景再画一段"圆上沿 → 圆心"的线头：
     背景画在圆之上，所以这段线看得见；圆以下仍然遮住线。 */
  background:
    linear-gradient(var(--track-line), var(--track-line)) center top / var(--rail-w) 50% no-repeat,
    var(--dark);
  border: calc(var(--rail-w)) solid rgba(255, 255, 255, .30);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.page-console .cap:hover::after { border-color: rgba(255, 255, 255, .55); }

.page-console .cap.is-passed::after {
  background:
    linear-gradient(var(--brand-1), var(--brand-1)) center top / var(--rail-w) 50% no-repeat,
    var(--brand-1);
}
.page-console .cap.is-active::after {
  background:
    linear-gradient(var(--brand-1), var(--brand-1)) center top / var(--rail-w) 50% no-repeat,
    var(--brand-1);                 /* 已走到这里：线头与圆心同色 */
  border-color: #fff;
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .32);
  transform: scale(1.1);
}

.page-console .band__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.page-console .band__counter {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .08em;
  color: var(--dark-muted);
}
.page-console .band__counter b { color: var(--dark-ink); font-weight: 600; }
.page-console .band__progress {
  flex: 1 1 auto;
  max-width: 180px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.page-console .band__progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--brand-1);
}
.page-console .band__panel {
  position: sticky;
  top: 96px;
  will-change: transform;
  transition: transform .1s linear;
}
.page-console #cap-rows { transition: opacity .14s ease; }

@media (max-width: 1080px) {
  .page-console .band__split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .page-console .band__panel { position: static; transform: none !important; }
  .page-console .band__list-wrap { padding-left: 0; }
  .page-console .band__rail { display: none; }
  .page-console .cap { min-height: 0; padding: 20px; }
  .page-console .cap::after { display: none; }
}

/* ------------------------------------------------------- steps as an axis
   全宽轴线：线从容器左沿通到右沿（两边都露出来），4 个节点均分在轴上并居中；
   纵向对齐规则不变：13px 圆 ⇒ 圆心 6.5，1px 线放在 top:6px（占第 6 列 ⇒ 中心 6.5）。 */
.page-console .steps-axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-console .steps-axis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;                 /* 圆心 6.5 ⇒ 1px 线占第 6 列 */
  height: 1px;
  background: var(--line-2);
}
.page-console .axis-item { position: relative; padding-top: 44px; text-align: center; }
.page-console .axis-item__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.page-console .axis-item:hover .axis-item__dot,
.page-console .axis-item:focus-within .axis-item__dot {
  background: var(--brand-1);
  border-color: var(--brand-1);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.page-console .axis-item__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .08em;
  color: var(--brand-1);
  margin-bottom: 8px;
}
.page-console .axis-item__title { font-size: var(--fs-16); margin: 0 0 8px; }
.page-console .axis-item p { font-size: var(--fs-14); color: var(--ink-3); margin: 0 auto; line-height: 1.7; max-width: 30ch; }

/* 窄屏：轴线转纵向，同样贯穿两端（首节点之上、末节点之下都露线） */
@media (max-width: 900px) {
  .page-console .steps-axis { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-console .steps-axis::before {
    left: 6px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
  }
  .page-console .axis-item { padding-top: 0; padding-left: 32px; text-align: left; }
  .page-console .axis-item__dot { top: 3px; left: 0; transform: none; }
  .page-console .axis-item p { margin: 0; max-width: none; }
}

/* ================================================================= buttons
   一套系统，不再各写各的。
   变体：primary 渐变 / secondary 白底描边 / ghost 无底 / icon 纯图标 / link-arrow 文字+箭头
   尺寸：sm 32px · md 40px（默认）· lg 52px
   圆角：统一 8px（输入框 16px 减去 8px 内边距 = 8px，内外同心）
   状态：hover / active 按下 / focus-visible / disabled
   注意：页头 CTA 同时带 .btn 与 .site-header__cta，显示规则用类组合（0,3,0）压过 .btn。
*/
.page-console .btn,
.page-console .site-nav__cta a,
.page-console .site-header__cta {
  --btn-h: 40px;
  --btn-px: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, filter .18s ease;
}
.page-console .btn i,
.page-console .site-header__cta i { font-size: 15px; line-height: 1; transition: transform .18s ease; }
.page-console .btn:hover i,
.page-console .site-header__cta:hover i { transform: translateX(2px); }
.page-console .btn--block { width: 100%; }
.page-console .checker .btn { --btn-h: 52px; --btn-px: 28px; font-size: var(--fs-16); }

/* 主操作 */
.page-console .btn--primary,
.page-console .site-nav__cta a,
.page-console .site-header__cta {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 1px 2px rgba(30, 27, 75, .18);
}
.page-console .btn--primary:hover,
.page-console .site-nav__cta a:hover,
.page-console .site-header__cta:hover {
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .75);
  filter: brightness(1.06);
}
.page-console .btn--primary:active,
.page-console .site-nav__cta a:active,
.page-console .site-header__cta:active {
  filter: brightness(.95);
  box-shadow: 0 1px 2px rgba(30, 27, 75, .2);
}

/* 次操作 */
.page-console .btn--secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.page-console .btn--secondary:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-1); }
.page-console .btn--secondary:active { background: var(--brand-line); }

/* 无底 */
.page-console .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.page-console .btn--ghost:hover { background: var(--paper-alt); color: var(--ink); }
.page-console .btn--ghost:active { background: var(--brand-soft); }

/* 尺寸修饰 */
.page-console .btn--sm { --btn-h: 32px; --btn-px: 14px; font-size: var(--fs-13); }
.page-console .btn--lg { --btn-h: 52px; --btn-px: 28px; font-size: var(--fs-16); }

/* 纯图标按钮（轮播左右箭头等） */
.page-console .icon-btn,
.page-console .blog-swiper__nav button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.page-console .icon-btn:hover,
.page-console .blog-swiper__nav button:hover { border-color: var(--brand-1); color: var(--brand-1); background: var(--brand-soft); }
.page-console .icon-btn:active,
.page-console .blog-swiper__nav button:active { background: var(--brand-line); }
.page-console .icon-btn i,
.page-console .blog-swiper__nav button i { font-size: 18px; }

/* 禁用 */
.page-console .btn[disabled],
.page-console .btn[aria-disabled="true"],
.page-console .icon-btn[disabled],
.page-console .blog-swiper__nav button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

/* 键盘焦点 */
.page-console .btn:focus-visible,
.page-console .site-nav__cta a:focus-visible,
.page-console .site-header__cta:focus-visible,
.page-console .icon-btn:focus-visible,
.page-console .blog-swiper__nav button:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
}

/* 文字箭头 */
.page-console .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--brand-1);
  text-decoration: none;
}
.page-console .link-arrow i { font-size: 14px; transition: transform .18s ease; }
.page-console .link-arrow:hover { color: var(--brand-2); text-decoration: none; }
.page-console .link-arrow:hover i { transform: translateX(3px); }
.page-console .link-arrow:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; border-radius: 4px; }

/* 页头 CTA：窄屏隐藏（用抽屉里那个），桌面显示 */
.page-console .btn.site-header__cta { display: none; }

/* 文字箭头（交付物行）/ 页头 CTA 的桌面覆盖都放在最后，
   与窄屏那条同权重，靠"位置在后"取胜。 */
@media (min-width: 901px) {
  .page-console .btn.site-header__cta { display: inline-flex; }
}

/* ================================================================= mobile polish
   移动端（≤620px）的实际使用场景：单手、拇指、可能只有 360px 宽。 */
@media (max-width: 620px) {
  /* 触控目标：品牌链接、汉堡按钮、页脚与独立链接 ≥44px */
  .page-console .brand { min-height: 44px; }
  .page-console .nav-toggle-label { width: 44px; height: 44px; }
  .page-console .posts__more, .page-console .faq__more { min-height: 44px; display: inline-flex; align-items: center; }
  /* 截图里"All articles"这类独立文字链接同样给足触控高度 */
  .page-console .sec-lede a { min-height: 44px; display: inline-flex; align-items: center; }

  /* 手机：隐藏左右切换按钮，只留分页点，轮播交给自动播放 */
  .page-console .blog-swiper__bar { justify-content: center; margin-top: 16px; }
  /* 终端里的长行改为可横向滚动，而不是被 .term 的 overflow:hidden 裁掉 */
  .page-console .term__body { overflow-x: auto; font-size: 12px; -webkit-overflow-scrolling: touch; }
  .page-console .term__code { overflow-x: auto; }
  .page-console .term__line { white-space: nowrap; }

  /* 触控目标：正文里的链接/次要操作不低于 44px */
  .page-console .link-arrow { min-height: 44px; }
  .page-console .card__foot { padding-top: 12px; }
  .page-console .site-footer a { min-height: 40px; display: flex; align-items: center; }

  /* FAQ：问题行内边距收紧，问题字号 17→16，减掉多余的上下留白 */
  .page-console .faq summary { padding: 16px 16px 16px; font-size: var(--fs-16); }
  .page-console .faq__body { padding: 0 16px 20px; }

  /* 交付物大行、统计栏：减少上下内边距 */
  .page-console .row-item--big { padding: 24px 0; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .page-console .stat { padding: 24px 0 4px; }

  /* 轴：窄屏纵向时把左缩进收到 28px，给正文更多宽度 */
  .page-console .axis-item { padding-left: 28px; }

  /* 标题与正文的移动端字号（可读性下限 15px） */
  .page-console .hero p, .page-console .sec-head .sec-sub { font-size: var(--fs-15); }
}

/* ================================================================= mobile bottom bar
   手机专属：固定底部操作栏。桌面不渲染（display:none），滚动过首屏后浮起。
   高度 64px + 安全区；页面在移动端预留同高 padding，避免遮住页脚最后一行。 */
.page-console .mobile-bar { display: none; }

@media (max-width: 900px) {
  .page-console .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;                     /* 低于页头(40)与抽屉，抽屉打开时覆盖它 */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 28px -20px rgba(30, 27, 75, .45);
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), opacity .22s ease;
  }
  .page-console .mobile-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .page-console .mobile-bar__cta { flex: 1 1 auto; height: 48px; }
  .page-console .mobile-bar__top {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
  }
  .page-console .mobile-bar__top:hover { border-color: var(--brand-1); color: var(--brand-1); background: var(--brand-soft); }
  .page-console .mobile-bar__top i { font-size: 20px; }

  /* 抽屉（复选框 hack）打开时收起底栏，避免同时出现两个主按钮。
     用 :has() 选择体外的复选框；不支持 :has() 的旧浏览器只是继续显示底栏，不影响功能。 */
  body:has(.nav-toggle:checked) .mobile-bar {   /* body 本身就是 .page-console，别再套一层 */
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }

  /* 给底栏留位置（含 iPhone 安全区） */
  .page-console { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ================================================================ compact mobile footer
   手机/平板（≤900px，与页头抽屉的断点一致）只保留"品牌行 + 版权行"：
   移动端顶部导航已收进抽屉，页脚四列链接让页脚高达 1065px（约 1.3 屏），
   改为精简两行后约 140px。链接仍完整保留在 HTML（仅视觉隐藏），
   爬虫与 sitemap.xml / llms.txt 照常可达。PC 端页脚保持完整。 */
@media (max-width: 900px) {
  .page-console .site-footer { padding-block: 28px 20px; }
  .page-console .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
  }
  .page-console .site-footer__col { display: none; }
  /* 一行对齐：左品牌 / 右标准状态；下方版权行。 */
  .page-console .site-footer__brand {
    display: flex;
    flex-direction: row;          /* 基类是 column，不覆盖的话 space-between 不起作用 */
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .page-console .site-footer__brand .brand { flex: 0 0 auto; }
  .page-console .site-footer__tagline { display: none; }   /* 与各页 hero 的文案重复 */
  .page-console .site-footer__status { margin: 0; flex: 0 0 auto; }
  .page-console .site-footer__meta { margin-top: 20px; padding-top: 16px; }
}

/* 手机上品牌行太窄会把"Standard v1.2 · last updated 24 Sep 2026"挤断，
   让状态行单独占一行。 */
@media (max-width: 620px) {
  .page-console .site-footer__brand { flex-wrap: wrap; }
  .page-console .site-footer__status { flex: 1 1 100%; margin-top: 8px; }
}

/* 文章卡片：悬停只改边框与标题颜色，不做位移（更安静，也不会把整行推歪）。 */
.page-console .post-card:hover { transform: none; border-color: var(--brand-line); }
.page-console .post-card:hover .post-card__title { color: var(--brand-1); }

/* 轮播自动滚动，不再显示进度条（分页点）。 */
.page-console .blog-swiper__pagination { display: none; }
.page-console .blog-swiper__bar { margin-top: 0; }

/* 首页各板块标题左侧的呼吸小圆点：标题与 pill 各一个，
   已经自带 .dot 的 pill（CTA 那条）不重复加。 */
.page-console .pill.dot-heading::before {
  content: "";
  flex: none;
  width: 6px;                        /* 与 Free · no account 的圆点同尺寸 */
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;          /* 跟随该小标题自己的字体颜色 */
  position: relative;
  top: -1px;                         /* 字母光学中心略高于行盒中心 */
  animation: aeolith-ring 2.8s ease-out infinite;   /* 与 .dot 的 pc-pulse 同一套节奏 */
}
/* 照 Free · no account 的 .dot：向外扩散一圈淡出的光环，圆点本体不缩放。 */
@keyframes aeolith-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .page-console .pill.dot-heading::before { animation: none; opacity: .85; }
}

/* ---------------------------------------------------------------- pill 规格
   小标题胶囊（9 个 dot-heading 与 hero/CTA 两个自带圆点的）统一为：
   左右内边距对称 12px、上下 5px、行高 1.4 ⇒ 高度约 28px；
   圆点与文字的距离交给 flex 的 gap，不再用 margin + vertical-align 拼。
   这样无论圆点动画缩放到多大，它始终垂直居中，也不会把文字推歪。 */
.page-console .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: var(--fs-12);
  line-height: 1;                    /* 行盒贴合字形：圆点与文字的光学中心才能对齐 */
}
.page-console .pill .dot {          /* CTA 与 hero 胶囊里的圆点是真实元素，不是伪元素 */
  margin-right: 0;
  flex: none;
  position: relative;
  top: -1px;                       /* 与 .pill.dot-heading::before 用同一套光学居中 */
}
.page-console .pill.dot-heading::before {
  margin-right: 0;
  position: relative;
  top: -1px;                       /* 字母光学中心略高于行盒中心，圆点微调上移 */
}

/* ================================================================ 内容页骨架
   全部内容型页面（doc / category / articles）共用这一套，视觉属性**只在这里定义**：
   字体、字号阶梯、间距节奏、圆点、代码块、表格 —— 与首页同一套变量与组件类。
   页面模板只负责内容结构，不再各自写死数值；改一处，75 条收录页一起变。 */
.page-console .doc { padding-block: 72px 96px; }
.page-console .doc__crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px; font-size: var(--fs-13); color: var(--ink-3);
}
.page-console .doc__crumbs a { color: var(--ink-3); text-decoration: none; }
.page-console .doc__crumbs a:hover { color: var(--brand-1); }
.page-console .doc__crumbs .sep { color: var(--ink-4); }
.page-console .doc > .wrap > h1 {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -.02em;
  margin: 14px 0 14px; color: var(--ink);
}
.page-console .doc > .wrap > .doc__meta { margin: 0 0 34px; font-size: var(--fs-13); color: var(--ink-3); }
.page-console .doc .doc__body { font-size: var(--fs-17, 17px); line-height: 1.72; color: var(--ink-2); }
.page-console .doc .doc__body > * + * { margin-top: 20px; }
.page-console .doc .doc__body h2 {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.26; letter-spacing: -.01em;
  margin-top: 48px; color: var(--ink);
}
.page-console .doc .doc__body h3 { margin-top: 32px; font-size: var(--fs-19, 19px); color: var(--ink); }
.page-console .doc .doc__body ul, .page-console .doc .doc__body ol { padding-left: 22px; display: grid; gap: 8px; }
.page-console .doc__body li::marker { color: var(--brand-1); }
.page-console .doc .doc__body a { color: var(--brand-1); text-underline-offset: 3px; }
.page-console .doc .doc__body code {
  font-family: var(--font-mono); font-size: .92em;
  background: rgba(91, 75, 255, .07); padding: 2px 6px; border-radius: 6px;
}
.page-console .doc .doc__body pre {
  margin: 0; padding: 18px 20px; border-radius: 14px; overflow-x: auto;
  background: var(--dark, #17123a); color: #e9e6ff;
  font-size: 13px; line-height: 1.62;
}
.page-console .doc .doc__body pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }
.page-console .doc .doc__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.page-console .doc .doc__body th, .page-console .doc .doc__body td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line);
}
.page-console .doc .doc__body th {
  font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); font-weight: 500;
}
.page-console .doc .doc__body blockquote {
  margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--brand-line, var(--brand-1));
  color: var(--ink-2);
}
.page-console .doc__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line);
}
.page-console .doc__cta .btn { --btn-h: 52px; --btn-px: 26px; font-size: var(--fs-16); }
@media (max-width: 620px) {
  .page-console .doc { padding-block: 40px 72px; }
  .page-console .doc__body h2 { margin-top: 32px; }
  .page-console .doc__cta { margin-top: 40px; padding-top: 24px; }
}

/* ================================================================ 列表页骨架
   category / articles 共用（它们只有一套 docs-index 词汇）。区块入口是收录与内链的
   关键路径，所以卡片规范直接沿用首页的 post-card：边框 + 14px 圆角 + 悬停只改边框与
   标题色（不位移），字号与留白全部取自首页变量。 */
.page-console .docs-index { padding-block: 72px 96px; }
.page-console .docs-index .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(91, 75, 255, .08); color: var(--brand-1);
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: .06em; text-transform: uppercase;
}
.page-console .docs-index .eyebrow::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; position: relative; top: -1px;
  animation: aeolith-ring 2.8s ease-out infinite;
}
.page-console .docs-index h1 {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -.02em;
  margin: 14px 0 12px; color: var(--ink);
}
.page-console .docs-index .report__positioning {
  /* 列表/分类页的引导句铺满主体宽度：62ch 会把它切成两行并在右侧留出一块空白。 */
  margin: 0 0 40px; max-width: none;
  font-size: var(--fs-17, 17px); line-height: 1.7; color: var(--ink-2);
}
.page-console .docs-index__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}
.page-console .docs-index__item {
  padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper, #fff);
  transition: border-color .18s ease;
}
.page-console .docs-index__item:hover { border-color: var(--brand-line, var(--brand-1)); }
.page-console .docs-index__item h2, .page-console .docs-index__item h3 {
  margin: 0 0 8px; font-size: var(--fs-17, 17px); line-height: 1.35;
}
.page-console .docs-index__item a { color: var(--ink); text-decoration: none; }
.page-console .docs-index__item:hover a { color: var(--brand-1); }
.page-console .docs-index__summary { margin: 0; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2); }
.page-console .docs-index__meta { margin: 12px 0 0; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); }
.page-console .docs-index__empty { margin: 0; font-size: var(--fs-15); color: var(--ink-3); }
.page-console .doc__back { margin-top: 40px; }
@media (max-width: 620px) {
  .page-console .docs-index { padding-block: 40px 72px; }
  .page-console .docs-index .report__positioning { margin-bottom: 28px; font-size: var(--fs-16); }
  .page-console .docs-index__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .page-console .docs-index__item { padding: 18px; }
}

/* ================================================================ 报告页骨架
   /report/<slug>：8 份报告，是转化的落点（分数 → 15 项明细 → 证据 → 修复）。
   这些类此前在 console 层零覆盖，全部来自 legacy，所以报告页是整站里最"旧"的一页。
   分数用首页统计区的等宽数字字体，通过/不通过用站点既有的 pass / 告警色，
   条目卡片沿用列表页规范（14px 圆角、悬停只改边框）。 */
.page-console .report { padding-block: 64px 96px; }
.page-console .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(91, 75, 255, .08); color: var(--brand-1);
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: .06em; text-transform: uppercase;
}
.page-console .report__host {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -.02em;
  margin: 14px 0 8px; color: var(--ink); word-break: break-all;
}
.page-console .report__meta { margin: 0 0 32px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); }
.page-console .report__score {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; color: var(--ink);
}
.page-console .report__number {
  font-family: var(--font-mono); font-size: clamp(44px, 5.6vw, 72px);
  font-weight: 500; letter-spacing: -.03em; line-height: 1;
}
.page-console .report__of { font-family: var(--font-mono); font-size: var(--fs-17, 17px); color: var(--ink-3); }
.page-console .report__grade { font-size: var(--fs-17, 17px); color: var(--ink-2); }
.page-console .report__delta { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--ink-3); }
.page-console .report__chart { margin: 28px 0 8px; }
.page-console .report__chartnote, .page-console .report__groupnote, .page-console .report__fixpacknote {
  margin: 8px 0 0; font-size: var(--fs-13); line-height: 1.6; color: var(--ink-3);
}
.page-console .report__group {
  margin: 44px 0 14px; font-family: var(--font-display, var(--font-sans));
  font-size: clamp(20px, 2vw, 26px); line-height: 1.25; color: var(--ink);
}
.page-console .report__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.page-console .ritem {
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper, #fff); transition: border-color .18s ease;
}
.page-console .ritem:hover { border-color: var(--brand-line, var(--brand-1)); }
.page-console .ritem--fail { border-left: 3px solid #d97706; }
.page-console .ritem--pass { border-left: 3px solid var(--pass, #16a34a); }
.page-console .ritem__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.page-console .ritem__code {
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: rgba(91, 75, 255, .10); color: var(--brand-1);
}
.page-console .ritem__title { flex: 1 1 240px; min-width: 0; font-size: var(--fs-16); color: var(--ink); }
.page-console .ritem__state { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); }
.page-console .ritem__confidence { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-4); }
.page-console .ritem__evidence {
  margin: 10px 0 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(23, 18, 58, .035);
  font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.6; color: var(--ink-2);
  overflow-x: auto;
}
.page-console .ritem__fix { margin: 10px 0 0; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2); }
.page-console .report__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
/* 提示/通告不画框：层级靠**细线 + 间距**表达，不靠容器。
   原来这里是一个左侧 4px 边框 + 整块浅底色的方框，它和"卡片"看起来是同一种东西，
   读者会以为可以点开；报告页的条目已经改成分割线，提示块再画框就自相矛盾。
   统一写法：上细线 + 左侧 20px 语义色段（与报告条目同一套标记语言）。 */
.page-console .notice {
  position: relative;
  margin: 0 0 32px; padding: 16px 0 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink-2);
  font-size: var(--fs-14, 14px); line-height: 1.65;
}
.page-console .notice::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 20px; height: 2px; background: var(--brand-1);
}
.page-console .notice--danger { color: #7c2d12; }
.page-console .notice--danger::before { background: #d97706; }
.page-console .listing-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--ink-2); }
@media (max-width: 620px) {
  .page-console .report { padding-block: 36px 72px; }
  .page-console .ritem { padding: 16px; }
  .page-console .ritem__evidence { font-size: 11.5px; }
  .page-console .report__actions { margin-top: 28px; }
}

/* 内容列宽：17px 正文在 760–860px 之间最舒服（约 75–85 字符/行）。
   原来的 wrap--narrow 偏窄，长句断行过密；同时给手机保证 20px 边距。 */
body.page-console .doc .wrap.wrap--narrow,
body.page-console .docs-index .wrap.wrap--narrow,
body.page-console article.doc > .wrap {
  max-width: 880px;
}
@media (max-width: 620px) {
  .page-console .doc > .wrap, .page-console .doc .wrap--narrow { max-width: 100%; padding-inline: 20px; }
}

/* 外层 article.doc 自己带了更窄的 max-width，内层放宽到 880 也没用 —— 一起放宽。 */
body.page-console article.doc { max-width: 880px; margin-inline: auto; }

/* 版面放宽到 880px 后每行约 96 字符，长于正文最佳阅读宽度（60–80）。
   做法不是把版面再收窄，而是**正文测宽**：段落与列表限 78ch，
   标题、代码块、表格继续占满 880px —— 版面显得舒展，读起来仍是舒适行长。 */
body.page-console .doc .doc__body > p,
body.page-console .doc .doc__body > ul,
body.page-console .doc .doc__body > ol,
body.page-console .doc .doc__body > blockquote { max-width: 42rem; }

/* 锚点跳转要避开吸顶导航：header 高 65px 且 position:sticky，
   而锚点默认 scroll-margin-top:0 —— 于是点导航的 "Check a site"（/#check）后，
   目标正好被压在导航条下面，看起来"没跳到位置"。所有带 id 的锚点统一留出导航高度。 */
:root { --header-h: 65px; }
body.page-console [id] { scroll-margin-top: calc(var(--header-h) + 28px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 900px) { body.page-console [id] { scroll-margin-top: calc(var(--header-h) + 20px); } }

/* ================================================================ 三个独立页骨架
   pricing 见下方专门的设计块；contact / leaderboard 在此定义。 */
.page-console .contact-form { display: grid; gap: 18px; max-width: 640px; }
.page-console .contact-form__field { display: grid; gap: 8px; }
.page-console .contact-form__label {
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.page-console .contact-form__input, .page-console .contact-form__textarea {
  width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper, #fff); color: var(--ink);
  font-family: inherit; font-size: var(--fs-15); line-height: 1.5;
}
.page-console .contact-form__textarea { min-height: 150px; resize: vertical; }
.page-console .contact-form__input:focus, .page-console .contact-form__textarea:focus {
  outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(91, 75, 255, .16);
}
.page-console .contact-form__note { font-size: var(--fs-13); line-height: 1.6; color: var(--ink-3); }
.page-console .contact-form__hp { position: absolute; left: -9999px; }
.page-console .contact-status { font-size: var(--fs-14, 14px); line-height: 1.6; color: var(--ink-2); }
.page-console .contact-status--error { color: #b91c1c; }
.page-console .contact-status--ok { color: var(--pass, #16a34a); }
/* 榜单：与首页统计区同一种数据表观感（细线 + 等宽数字）*/
.page-console .leaderboard { padding-block: 72px 96px; }
.page-console .leaderboard__table { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.page-console .leaderboard__table th, .page-console .leaderboard__table td {
  padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line);
}
.page-console .leaderboard__table th {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.page-console .leaderboard__rank, .page-console .leaderboard__score { font-family: var(--font-mono); }
.page-console .leaderboard__rank { color: var(--ink-3); }
.page-console .leaderboard__score { color: var(--ink); }
.page-console .leaderboard__host { color: var(--ink); word-break: break-all; }
.page-console .leaderboard__caption, .page-console .leaderboard__note {
  margin: 14px 0 0; font-size: var(--fs-13); line-height: 1.6; color: var(--ink-3);
}
@media (max-width: 620px) {
  /* 手机上改为**换行堆叠**（运营方反馈：四列挤在一行不好读）：
     第一行 = 排名 + 域名，第二行 = 分数（含刻度条） + 等级。
     用 grid 重排会让隐式表格语义消失，故模板里同时补了 role="table/row/cell"。 */
  .page-console .leaderboard__table thead { display: none; }
  /* 表格在窄屏是 display:block，<caption> 的宽度计算会异常 —— 实测那句统计文案
     在 390px 下被排成 8 行（146px 高）。显式给整行宽度与左对齐。 */
  .page-console .leaderboard__table caption {
    display: block; width: 100%; text-align: left; white-space: normal;
  }
  .page-console .leaderboard__table,
  .page-console .leaderboard__table tbody { display: block; }
  .page-console .leaderboard__table tr {
    display: grid;
    /* 三列：第 2 行让分数跨前两列 —— 否则分数会落进只有 30px 宽的排名列里竖向折行
       （实测行高被撑到 187px）。 */
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rank host host"
      "score score verdict";
    align-items: baseline;
    gap: 6px 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .page-console .leaderboard__table td { display: block; padding: 0; border: 0; }
  .page-console .leaderboard__rank { grid-area: rank; font-size: var(--fs-18, 18px); }
  .page-console .leaderboard__host { grid-area: host; min-width: 0; }
  .page-console .leaderboard__host a { word-break: break-word; overflow-wrap: anywhere; }
  .page-console .leaderboard__score { grid-area: score; }
  .page-console .leaderboard__score-num { font-size: var(--fs-14, 14px); color: var(--ink-2); }
  .page-console .leaderboard__bar { display: inline-block; vertical-align: middle; width: 64px; margin: 0 0 0 8px; }
  .page-console .leaderboard__verdict { grid-area: verdict; justify-self: end; }
  .page-console .leaderboard__grade { font-size: 11px; padding: 2px 7px; }
  /* 特异性必须高于上面的 td{display:block}（0,2,1），否则隐藏被覆盖 ——
     实测那会让隐式 grid 多出第 3 行，行高从 ~90px 涨到 116px。 */
  .page-console .leaderboard__table td.leaderboard__measured { display: none; }
}

/* cta-full 里不放表单时（pricing/contact/leaderboard 等页）用链接按钮组：
   效果与首页 CTA 的按钮一致，但不依赖域名检测表单的 JS。 */
.page-console .cta-full__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  margin-top: 8px;
}
@media (max-width: 620px) { .page-console .cta-full__actions .btn { width: 100%; justify-content: center; } }

/* ---------------------------------------------------------------- 定价页设计
   高级感的来源不是更多装饰，而是：一个强调色 + 大留白 + 精确的细线 +
   等宽大数字 + 唯一一处柔和景深（推荐方案）。其余元素一律安静。 */
.page-console .pricing { padding-block: 88px 104px; }
.page-console .pricing__hero { max-width: none; margin-bottom: 56px; }
.page-console .pricing__title {
  font-family: var(--font-display, var(--font-sans));
  /* 不强制断行：字号按容器宽度收敛，宽屏一行放得下，窄屏自然折行。 */
  font-size: clamp(30px, 3.35vw, 46px); line-height: 1.1; letter-spacing: -.03em;
  margin: 18px 0 0; color: var(--ink); text-wrap: balance;
}
.page-console .pricing__lede {
  /* 不设测宽上限：这句话是整句陈述，人为限宽会把它折成两行。 */
  margin: 20px 0 0; max-width: none;
  font-size: var(--fs-17, 17px); line-height: 1.65; color: var(--ink-2);
}
.page-console .pricing__plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px;
  align-items: start;
}
/* 共有 4 个方案（免费 + 3 个付费）：>=1180px 时排成一行，避免最后一张单独换行
   留下一个孤立的空位（这种"差一张"的版式最显廉价）。 */
@media (min-width: 1180px) {
  /* 三个价格 = 三张卡：列数必须跟着内容走。留一个空列会让整行左倾、右边空一块。 */
  .page-console .pricing__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .page-console .pricing__plan { padding: 30px 28px 28px; }
}
.page-console .pricing__plan {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 30px 28px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper, #fff);
}
.page-console .pricing__plan--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--paper, #fff), var(--paper, #fff)) padding-box,
    linear-gradient(135deg, var(--brand-1), #a78bfa 60%, var(--brand-1)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 48px -28px rgba(91, 75, 255, .55);
}
.page-console .pricing__badge {
  position: absolute; top: -11px; left: 30px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--brand-1); color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.page-console .pricing__plan-name {
  margin: 0; font-family: var(--font-display, var(--font-sans));
  font-size: var(--fs-19, 19px); letter-spacing: -.01em; color: var(--ink);
}
.page-console .pricing__amount {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.page-console .pricing__amount strong {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -.03em; line-height: 1; color: var(--ink);
}
.page-console .pricing__interval {
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3);
}
.page-console .pricing__summary {
  margin: 16px 0 0; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2);
}
.page-console .pricing__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.page-console .pricing__list li {
  position: relative; padding-left: 24px;
  font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2);
}
.page-console .pricing__list li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 9px; height: 5px; border-left: 1.6px solid var(--brand-1); border-bottom: 1.6px solid var(--brand-1);
  transform: rotate(-45deg);
}
.page-console .pricing__limits, .page-console .pricing__fineprint {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: var(--fs-13); line-height: 1.6; color: var(--ink-3);
}
.page-console .pricing__limits-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}
.page-console .pricing__cta { margin-top: 24px; align-self: flex-start; }
.page-console .pricing__banner {
  margin: 34px 0 0; padding: 18px 22px; border-radius: 14px;
  background: rgba(91, 75, 255, .055); color: var(--ink-2);
  font-size: var(--fs-14, 14px); line-height: 1.65;
}
.page-console .pricing__prose {
  /* 与主体内容同宽（和方案卡对齐，不再缩在左边一窄条）；
     整宽下文字行会过长，所以拆成「标题左 / 正文右」两栏编辑式排版，
     正文自身保持 42rem 的舒适测宽。 */
  margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px 56px;
  align-items: start;
}
.page-console .pricing__prose-body { max-width: 46rem; }
@media (max-width: 900px) {
  .page-console .pricing__prose { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .page-console .pricing__prose-body { max-width: none; }
}
.page-console .pricing__prose-title {
  margin: 0 0 18px; font-family: var(--font-display, var(--font-sans));
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.01em; color: var(--ink);
}
.page-console .pricing__prose p { margin: 0 0 16px; font-size: var(--fs-17, 17px); line-height: 1.72; color: var(--ink-2); }
@media (max-width: 620px) {
  .page-console .pricing { padding-block: 44px 72px; }
  .page-console .pricing__hero { margin-bottom: 36px; }
  .page-console .pricing__plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .page-console .pricing__plan { padding: 24px 20px 22px; }
  .page-console .pricing__prose { margin-top: 48px; padding-top: 28px; }
}

/* 月付/年付切换：纯 CSS（radio + :has()），不依赖 JS —— 定价页是转化页，
   任何一处依赖脚本都可能因为脚本没加载而"点了没反应"。 */
.page-console .pricing__billing { margin-top: 16px; }
.page-console .pricing__billing input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.page-console .pricing__billing label {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 4px 0 0; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper, #fff);
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.page-console .pricing__billing label:hover { color: var(--ink); border-color: var(--ink-4); }
.page-console .pricing__billing input:checked + label {
  border-color: var(--brand-1); color: var(--brand-1); background: rgba(91, 75, 255, .07);
}
.page-console .pricing__billing input:focus-visible + label { box-shadow: 0 0 0 3px rgba(91, 75, 255, .22); }
.page-console .pricing__save { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.page-console .pricing__amount[data-when] { display: none; }
.page-console .pricing__billing:has(#pricing-billing-monthly:checked) .pricing__amount[data-when="monthly"],
.page-console .pricing__billing:has(#pricing-billing-yearly:checked) .pricing__amount[data-when="yearly"] {
  display: flex;
}
.page-console .pricing__list-bonus::before { border-color: var(--brand-1); }
.page-console .pricing__list-bonus { color: var(--ink); }

/* 尾段左栏的署名块：标题在上，品牌与标准信息落到栏底，
   让两栏在视觉上等高收口（左栏不再是一句话加一片空白）。 */
.page-console .pricing__prose-lead {
  display: flex; flex-direction: column; gap: 32px; min-height: 100%;
}
.page-console .pricing__prose-brand {
  /* 收紧在标题下方，不再压到栏底（栏底对齐会让它离标题太远）。 */
  margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--line);
}
.page-console .pricing__prose-brand .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.page-console .pricing__prose-brand .brand__logo { display: block; border-radius: 9px; }
.page-console .pricing__prose-brand .brand__word {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--fs-17, 17px); letter-spacing: -.01em; color: var(--ink);
}
.page-console .pricing__prose-bylaw {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin: 14px 0 0; font-family: var(--font-mono);
  font-size: var(--fs-12); color: var(--ink-3);
}
.page-console .pricing__prose-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-1);
  position: relative; top: -1px; animation: aeolith-ring 2.8s ease-out infinite;
}
@media (max-width: 900px) {
  .page-console .pricing__prose-lead { min-height: 0; gap: 22px; }
  .page-console .pricing__prose-brand { margin-top: 0; }
}

/* 列表分页：与折叠/按钮同一套观感 —— 等宽小字、胶囊、当前页是品牌色实心。 */
.page-console .docs-index__pager {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.page-console .docs-index__pager-pages { display: inline-flex; align-items: center; gap: 6px; }
.page-console .docs-index__pager-page, .page-console .docs-index__pager-step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper, #fff);
  font-family: var(--font-mono); font-size: var(--fs-13); color: var(--ink-3); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.page-console .docs-index__pager-page:hover, .page-console .docs-index__pager-step:hover { border-color: var(--ink-4); color: var(--ink); }
.page-console .docs-index__pager-page.is-current { border-color: transparent; background: var(--brand-1); color: #fff; }
.page-console .docs-index__pager-step.is-disabled { opacity: .4; }
@media (max-width: 620px) {
  .page-console .docs-index__pager { justify-content: center; }
  /* 触控目标：分页按钮 34px 偏小（实测），手机上提到 44px —— 它们是按钮，不适用
     WCAG 对"行内文字链接"的豁免。 */
  .page-console .docs-index__pager-page,
  .page-console .docs-index__pager-step { min-width: 44px; height: 44px; padding: 0 14px; }
}

/* ---------------------------------------------------------------- 报告页版式（二）
   一屏要能回答三件事：得了多少分、哪些项目没过、接下来做什么。
   所以：分数独占一行并与元信息分层；分组之间用细线切开；PASS/FAIL 做成标签而不是裸文字；
   Positioning 那一句是报告的前提条件，单独做成提示框，不能当普通正文放过。 */
.page-console .report__score { align-items: center; row-gap: 6px; }
.page-console .report__grade {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-13); color: var(--ink-2);
}
.page-console .report__meta { flex-basis: 100%; margin: 10px 0 0; }
.page-console .report__positioning {
  /* 这是分类/列表页的引导句，铺满主体宽度；不设测宽上限（一句话被限宽会留出右侧空白）。 */
  margin: 26px 0 0; padding: 16px 18px; border-radius: 14px; max-width: none;
  background: rgba(91, 75, 255, .05); color: var(--ink-2);
  font-size: var(--fs-14, 14px); line-height: 1.65;
}
.page-console .report__group {
  margin: 56px 0 8px; padding-top: 30px; border-top: 1px solid var(--line);
  font-size: clamp(20px, 2vw, 24px); letter-spacing: -.015em;
}
.page-console .report__group:first-of-type { border-top: 0; padding-top: 0; }
.page-console .report__groupnote { margin: 0 0 22px; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2); }
.page-console .ritem__state {
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.page-console .ritem--pass .ritem__state { background: rgba(22, 163, 74, .10); color: #15803d; }
.page-console .ritem--fail .ritem__state { background: rgba(217, 119, 6, .14); color: #92400e; }
.page-console .ritem__confidence { margin-left: auto; }
.page-console .ritem__fix {
  padding: 12px 14px; border-radius: 10px; background: rgba(91, 75, 255, .045);
  color: var(--ink-2);
}
@media (max-width: 620px) {
  .page-console .report__group { margin-top: 40px; padding-top: 22px; }
  .page-console .report__meta { margin-top: 8px; }
}

/* 分类页：分类是内容的目录，不是文章列表 —— 整宽三列，两个列表各有标题，
   子分类卡与内容页卡外观不同。 */
.page-console .docs-index__heading {
  margin: 40px 0 16px; padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.page-console .docs-index__heading:first-of-type { margin-top: 28px; border-top: 0; padding-top: 0; }
.page-console .docs-index__item--child {
  background: rgba(91, 75, 255, .045);
  border-color: rgba(91, 75, 255, .18);
}
.page-console .docs-index__item--child h2 a { color: var(--brand-1); }
@media (min-width: 1100px) {
  .page-console .docs-index__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* ---------------------------------------------------------------- 报告页检查项（三）
   去掉卡片框，改用分割线：一屏 15 项，外包一个框反而让人分不清"一组里有几项"。
   每条之间的分割线左端留 20px 的色段，颜色按组别（A/B/C）区分 —— 用颜色分组，
   不用再给每组套一个容器。 */
.page-console .report__items { list-style: none; margin: 0; padding: 0; }
/* base 层给 li 留了 12px 外边距，会让"分割线到下一条"变成 12px、与"上一条到分割线"的 22px 不一致。
   统一由 .ritem 的上下内边距控制间距，li 自身不再留白。 */
.page-console .report__items > li { margin: 0; }

/* 左右都必须贴齐主体：左边留内边距会凭空多出一条空白，看着像缩进错位。 */
.page-console .ritem {
  position: relative; display: block;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  padding: 22px 0;                       /* 上下各 22px：分割线到上一条末行、到下一条标题距离相同 */
  border-bottom: 1px solid var(--line);
}
.page-console .ritem:last-child { border-bottom: 0; }
/* 分割线左端的 20px 色段：从主体左边界起算，与正文同一竖线；颜色继承所在组。 */
.page-console .ritem::before {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 20px; height: 2px; background: var(--group-accent, var(--line));
}
/* 最后一条下方没有分割线，也就不该有色段（原先会多出一小段孤立的色块）。 */
.page-console .ritem:last-child::before { display: none; }
.page-console .ritem__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.page-console .ritem:first-child { padding-top: 0; }  /* 首项不再叠加 22px，避免与组说明之间出现双倍间距 */
.page-console .ritem__code {
  min-width: 30px; font-family: var(--font-mono); font-size: var(--fs-13);
  color: var(--group-accent, var(--brand-1));
}
.page-console .ritem__title { font-size: var(--fs-16, 16px); color: var(--ink); }
/* 证据与修复建议**不画框**（前端设计标准：层级靠细线与间距，不靠容器）。
   原来每条一个灰底方框，15 项 = 30 个框，整页像一堆贴纸；改成左侧细线 + 缩进，
   读起来是一份连续的文件。 */
.page-console .ritem__evidence {
  margin: 12px 0 0; padding: 0 0 0 14px;
  border-left: 1px solid var(--line); background: none;
}
.page-console .ritem__fix, .page-console .ritem__confidence {
  margin: 12px 0 0; padding: 0 0 0 14px;
  border-left: 2px solid var(--brand-1); background: none; border-radius: 0;
}

/* 分组配色：A（可达）/ B（可理解）/ C（可引用）三组各一色，其余区段保持中性线色。 */
.page-console .report__group:has(.report__items):nth-of-type(1) { --group-accent: #7c3aed; }
.page-console .report__group:has(.report__items):nth-of-type(2) { --group-accent: #2563eb; }
.page-console .report__group:has(.report__items):nth-of-type(3) { --group-accent: #0d9488; }
.page-console .report__group:has(.report__items):nth-of-type(4) { --group-accent: #c026d3; }
.page-console .report__group:has(.report__items):nth-of-type(5) { --group-accent: #ea580c; }
.page-console .report__group:has(.report__items) h2 { display: flex; align-items: center; gap: 10px; }

/* 下载修复包：默认就用"触发态"的底色（浅品牌底 + 品牌字色），不需要先悬停才看得出来可点。 */
.page-console .report__actions .btn:not(.btn--primary):not(.btn--secondary) {
  background: rgba(91, 75, 255, .12); border-color: transparent; color: var(--brand-1);
}
.page-console .report__actions .btn:not(.btn--primary):not(.btn--secondary):hover {
  background: rgba(91, 75, 255, .18);
}
@media (max-width: 620px) {
  .page-console .ritem { padding: 18px 0 18px 18px; }
}

/* AI 增值内容的标识：必须与"实测"在视觉上分开，否则读者会把建议当成测量结果。 */
.page-console .report__ai {
  margin: 40px 0 0; padding: 20px 22px; border-radius: 14px;
  border: 1px solid rgba(91, 75, 255, .22); background: rgba(91, 75, 255, .04);
}
.page-console .report__ai-label {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand-1);
}
.page-console .report__ai-body { margin: 0; font-size: var(--fs-16, 16px); line-height: 1.7; color: var(--ink-2); }
.page-console .report__ai-note { margin: 32px 0 0; font-size: var(--fs-14, 14px); color: var(--ink-3); }
.page-console .ritem__ai-tag {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(91, 75, 255, .12); color: var(--brand-1);
}

/* 业主还没选择时的催办条：这是一条"需要行动"的信息，不该长得像普通正文。 */
.page-console .report__owner-pending {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 12px;
  background: rgba(217, 119, 6, .08); color: #92400e;
  font-size: var(--fs-15); line-height: 1.6;
}
.page-console .report__owner-pending strong { color: #7c2d12; }

/* 分享块：这是报告页的主要用途（发给客户/同事/搜索引擎），所以给它正式的分区。 */
.page-console .report__share {
  margin: 32px 0 0; padding: 22px 24px; border-radius: 14px;
  border: 1px solid rgba(91, 75, 255, .22); background: rgba(91, 75, 255, .04);
}
.page-console .report__share-title {
  margin: 0 0 8px; font-family: var(--font-display, var(--font-sans));
  font-size: var(--fs-17, 17px); letter-spacing: -.01em; color: var(--ink);
}
.page-console .report__share-lede { margin: 0 0 16px; font-size: var(--fs-14, 14px); line-height: 1.6; color: var(--ink-2); }
.page-console .report__share-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* 修复验证区块：与报告条目同一套标记语言（上细线 + 20px 色段），不画框。 */
.page-console .report__verify { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--line); position: relative; }
.page-console .report__verify::before { content: ""; position: absolute; top: -1px; left: 0; width: 20px; height: 2px; background: var(--brand-1); }
.page-console .report__verify-title { margin: 0 0 8px; font-family: var(--font-display, var(--font-sans)); font-size: var(--fs-17, 17px); color: var(--ink); }
.page-console .report__verify-lede, .page-console .report__verify-scope { margin: 0 0 10px; font-size: var(--fs-14, 14px); line-height: 1.65; color: var(--ink-2); }
.page-console .report__verify-scope { color: var(--ink-3); }
.page-console .report__verify-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.page-console .report__verify-summary { margin: 18px 0 10px; font-size: var(--fs-15, 15px); color: var(--ink); }
.page-console .report__verify-list { margin: 0; padding: 0; list-style: none; }
.page-console .report__verify-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.page-console .report__verify-item:last-child { border-bottom: 0; }
.page-console .report__verify-head { margin: 0 0 8px; font-size: var(--fs-14, 14px); color: var(--ink); }
.page-console .report__verify-state { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.page-console .report__verify-state--fixed { background: rgba(22, 163, 74, .12); color: #15803d; }
.page-console .report__verify-state--regressed { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.page-console .report__verify-state--unchanged { background: rgba(100, 116, 139, .14); color: var(--ink-2); }
.page-console .report__verify-auto { font-size: 11px; color: var(--ink-3); }
.page-console .report__verify-ev { margin: 6px 0 0; padding-left: 14px; border-left: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.page-console .report__verify-ev span { display: inline-block; min-width: 52px; color: var(--ink-3); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.page-console .report__verify-human { margin: 16px 0 0; font-size: var(--fs-14, 14px); color: #92400e; }
.page-console .is-bad { color: #b91c1c; }

/* 联系页：两栏（左=发出去之后会发生什么，右=表单）。
   遵守 docs/DESIGN-SYSTEM.md：层级靠细线与间距，不画框。 */
.page-console .contact-hero { max-width: 46rem; margin-bottom: 40px; }
.page-console .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .page-console .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.page-console .contact-side__title {
  margin: 0 0 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.page-console .contact-steps { margin: 0 0 32px; padding: 0; list-style: none; }
.page-console .contact-step { position: relative; padding: 18px 0 18px 0; border-top: 1px solid var(--line); }
.page-console .contact-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 20px; height: 2px; background: var(--brand-1); }
.page-console .contact-step__head { display: flex; align-items: baseline; gap: 10px; }
.page-console .contact-step__n { font-family: var(--font-mono); font-size: 12px; color: var(--brand-1); }
.page-console .contact-step h3 { margin: 0; font-size: var(--fs-15, 15px); font-weight: 600; color: var(--ink); }
.page-console .contact-step p { margin: 6px 0 0 22px; font-size: var(--fs-14, 14px); line-height: 1.65; color: var(--ink-2); }
.page-console .contact-alt { padding-top: 18px; border-top: 1px solid var(--line); max-width: 42rem; }
.page-console .contact-alt p { margin: 0 0 10px; font-size: var(--fs-14, 14px); line-height: 1.65; color: var(--ink-2); }
.page-console .contact-alt a { color: var(--brand-1); }
.page-console .contact-form__help { margin: 6px 0 0; font-size: var(--fs-13, 13px); color: var(--ink-3); }
.page-console .contact-main .contact-form { margin: 0; }
.page-console .contact-main .contact-status { margin-bottom: 20px; }

/* 排行榜版式：把"能读"提升到"一眼能扫"。刻度条 + 等级胶囊 + 等宽数字，
   仍然只用细线表达分层（前端设计标准），不画卡片。 */
.page-console .leaderboard__caption {
  caption-side: top; text-align: left; margin-bottom: 18px;
  /* 12px 原本来自 legacy.css；实测删掉 legacy 后这里会变 0，故并入。 */
  padding-bottom: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3);
}
.page-console .leaderboard__table thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--line-strong);
}
.page-console .leaderboard__table tbody tr { border-bottom: 1px solid var(--line); }
.page-console .leaderboard__table tbody tr:hover { background: rgba(91, 75, 255, .04); }
.page-console .leaderboard__rank { font-size: var(--fs-18, 18px); font-weight: 600; }
.page-console .leaderboard__host a { font-weight: 600; text-decoration: none; }
.page-console .leaderboard__host a:hover { text-decoration: underline; }
.page-console .leaderboard__score { white-space: nowrap; }
.page-console .leaderboard__score-num { font-size: var(--fs-15, 15px); }
.page-console .leaderboard__bar {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  width: 72px; height: 4px; border-radius: 999px; background: rgba(91, 75, 255, .14); overflow: hidden;
}
.page-console .leaderboard__bar-fill { display: block; height: 100%; background: var(--brand-1); border-radius: 999px; }
.page-console .leaderboard__grade {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; line-height: 1.3; background: rgba(100, 116, 139, .12); color: var(--ink-2);
}
.page-console .leaderboard__measured { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
.page-console .mv { margin-left: 6px; font-size: 11px; }
.page-console .mv--up { color: #15803d; } .page-console .mv--down { color: #b91c1c; }
.page-console .mv--new { color: var(--brand-1); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }


/* 错误页（404 / 500 / 维护）：与联系页、报告页同一套标记语言 —— 上细线 + 20px 色段，
   不画卡片。这类页面只有一个任务：告诉读者发生了什么、并按有用程度给出下一步。 */
.page-console .errpage { padding-block: 88px 96px; }
.page-console .errpage__next { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.page-console .errpage__next-title {
  margin: 0 0 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.page-console .errpage__list { margin: 0; padding: 0; list-style: none; }
.page-console .errpage__list li { position: relative; padding: 16px 0 16px 0; border-top: 1px solid var(--line); }
.page-console .errpage__list li::before { content: ""; position: absolute; top: -1px; left: 0; width: 20px; height: 2px; background: var(--brand-1); }
.page-console .errpage__list a, .page-console .errpage__term { display: block; font-size: var(--fs-15, 15px); font-weight: 600; color: var(--ink); }
.page-console .errpage__list a { text-decoration: none; }
.page-console .errpage__list a:hover { text-decoration: underline; }
.page-console .errpage__list span { display: block; margin-top: 4px; font-size: var(--fs-14, 14px); line-height: 1.6; color: var(--ink-2); }
.page-console .errpage__list--plain span { margin-top: 4px; }
.page-console .errpage__ref {
  margin: 24px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-13, 13px); color: var(--ink-2);
}
.page-console .errpage__ref code { font-size: 13px; color: var(--ink); user-select: all; }
.page-console .errpage__ref-hint { display: block; margin-top: 6px; font-family: var(--font-sans); color: var(--ink-3); }
@media (max-width: 620px) { .page-console .errpage { padding-block: 48px 72px; } }

/* 徽章嵌入代码在手机上改为换行：横滚虽然不破版（整页溢出为 0），但没有滚动提示，
   看起来像被截断。换行后仍可完整复制，复制粘贴的目标（一段 HTML）不受影响。 */
@media (max-width: 620px) {
}

/* ---------------------------------------------------------------- legacy 收尾
   以下 5 条是 legacy.css 里**仍在生效**的最后一批规则，全部按实测值补到新表末尾。
   console.css 在 base.html 中最后加载（legacy → aeolith → console），所以生效顺序与
   删除 legacy 之前完全一致。删掉 legacy.css 之后，这些值仍由本表提供。 */
.page-console .ritem__state { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.page-console .contact-form__label { font-weight: 600; margin-bottom: 4px; }
/* 蜜罐：必须对人和对机器人同样"不可见但可填"，故保留 1px 尺寸与 overflow:hidden。 */
.page-console .contact-form__hp { overflow: hidden; width: 1px; height: 1px; }
.page-console .doc__back { font-weight: 600; }
/* 表格单元格不换行原本来自 legacy；限定 >=621px —— 手机端要用固定列宽 + 换行，
   两条规则不能同时生效。 */
@media (min-width: 621px) {
  .page-console .leaderboard__table th, .page-console .leaderboard__table td { white-space: nowrap; }
}

/* ---------------------------------------------------------------- 移动端抽屉导航
   实测（390px）发现三个问题，全部在此修正：
   1. 链接在桌面是 inline-flex，抽屉里没改成整行 —— 可点区域只有文字宽度（66–104px），
      点行内空白无反应。改为 block + 整行宽。
   2. 触控目标 39px < 推荐的 44px；统一到 48px。
   3. 抽屉 z-index: auto，可能被页面内容盖住；并补不透明底、细线分隔与滚动上限。 */
@media (max-width: 900px) {
  .page-console .site-nav {
    z-index: 60;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-console .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .page-console .site-nav__list li { width: 100%; }
  .page-console .site-nav__list a {
    display: block; width: 100%; box-sizing: border-box;
    min-height: 48px; padding: 14px 20px;
    font-size: var(--fs-16); text-align: left; border-radius: 0;
  }
  /* 行间用细线分隔（与全站标记语言一致），最后一行不画 */
  .page-console .site-nav__list li + li { border-top: 1px solid var(--line); }
  .page-console .site-nav__cta--drawer { border-top: 1px solid var(--line); padding: 14px 20px 4px; }
  .page-console .site-nav__cta--drawer .btn { display: flex; width: 100%; justify-content: center; min-height: 48px; }
  /* 抽屉打开时锁定背景滚动：否则在菜单上滑动会滚到下面的页面。
     底栏已在既有规则里收起，这里不重复处理。 */
  body:has(.nav-toggle:checked) { overflow: hidden; }
}

/* ---------------------------------------------------------------- 报告页移动端优化
   实测（390px / 360px）发现：①复检历史表 5 列，360px 下比视口宽 29px（整页横向溢出）
   ②报告内按钮高 40px，低于推荐的 44px。
   注：曾以为"修复建议文字 20px 是被覆盖"，实测桌面 24px / 手机 20px —— 这是既有设计刻意定的
   字号，不是缺陷，故不动它（我加过的覆盖规则已撤除，不留死代码）。 */
@media (max-width: 620px) {
  /* 复检历史：手机上只保留 日期 / 分数 / 变化 三列，其余两列（修复数、新增失败）
     在本次报告条目里已经能看到，属于冗余；同时保证 thead 与 tbody 一致隐藏。 */
  .page-console .report__rechecks th:nth-child(4),
  .page-console .report__rechecks td:nth-child(4),
  .page-console .report__rechecks th:nth-child(5),
  .page-console .report__rechecks td:nth-child(5) { display: none; }
  .page-console .report__rechecks { table-layout: fixed; width: 100%; }

  /* 触控目标：报告里的按钮统一到 44px 以上 */
  .page-console .report .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding-inline: 16px;
  }
}

/* ---------------------------------------------------------------- 缺失的设计 token（仅移动端补齐）
   根因：:root 里的字号档只有 12/13/14/16/18/20/24，**跳过了 15 和 17**，而 console.css 里
   有 17 处 var(--fs-15) 与 10 处 var(--fs-17)。CSS 变量未定义时该声明在计算值阶段失效，
   font-size 会**回落到继承**父级字号 —— 例如报告页的"修复建议"本应 15px，实际继承了分组标题的
   clamp(20px, 2vw, 24px)，手机上变成 20px（每行只有 34 个字符，页面被撑到 8 屏）。
   按"移动端只改移动端、PC 端不动"的要求，这里只在窄屏补上这两个 token；
   桌面端的现状（含上面这处继承）保持完全不变，是否在 :root 全局修正另行决定。 */
@media (max-width: 620px) {
  :root {
    --fs-15: .9375rem;   /* 15px */
    --fs-17: 1.0625rem;  /* 17px */
  }
}

/* ---------------------------------------------------------------- 恢复被我漏迁移的 legacy 规则
   删除 legacy.css 时，我的"删前删后计算样式对比"只采样了当时能命中的元素，漏掉了
   ①只在"≥2 次测量"时才渲染的图表（.chart__*）②.fgroups/.report__refresh 等少数类。
   后果：SVG <polyline> 失去 fill:none，按 SVG 默认被填成黑色 —— 报告页的分数折线变成
   一块黑色楔形；.groups 失去 list-style:none，首页/特性页的列表冒出项目符号。
   这 5 条按 legacy 原值恢复（它们原本对所有宽度生效，恢复即回到删除前的状态）。
   .site-footer__legal / .site-footer__links 模板已不再使用，无需恢复。 */
.page-console .chart__axis { stroke: var(--line); stroke-width: 1; }
.page-console .chart__line { fill: none; stroke: var(--accent, #1A4FD6); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.page-console .chart__dot { fill: var(--accent, #1A4FD6); }
.page-console .groups { list-style: none; margin: 0; padding: 0; }
.page-console .report__refresh { color: var(--muted); font-size: .88rem; }

/* ---------------------------------------------------------------- 复检历史表（重做）
   原样做得很差：单元格没有内边距（表头 x 520–582 与 584–731 之间只剩 2px，视觉上贴在一起）、
   没有行分隔线、日期是 22 字符的原始 ISO（2026-09-23T09:42:27）把表挤到 628px。
   现改为与排行榜同一套表格语言：等宽大写表头 + 表头下细线 + 行细线 + 数值右对齐等宽数字。
   日期在模板里经 day_label 过滤器变成 "23 Sep, 09:42"（当年省略年份）。 */
.page-console .report__rechecks { width: 100%; border-collapse: collapse; margin: 16px 0 0; font-size: var(--fs-14, 14px); }
.page-console .report__rechecks th {
  padding: 0 18px 10px 0; text-align: left; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--line-strong);
}
.page-console .report__rechecks td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.page-console .report__rechecks th:last-child, .page-console .report__rechecks td:last-child { padding-right: 0; }
.page-console .report__rechecks-when { font-family: var(--font-mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.page-console .report__rechecks-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.page-console .report__rechecks-code { font-family: var(--font-mono); font-size: 13px; color: var(--group-accent, var(--brand-1)); white-space: nowrap; }
/* 桌面用独立的 Fixed / Newly failing 两列表达变更，故明细行只在窄屏显示 */
.page-console .report__rechecks-detail { display: none; }

@media (max-width: 620px) {
  /* 窄屏保留 日期 / 分数 / 变化 三列（Fixed 与 Newly failing 已在上面按现有规则隐藏），
     变更明细改在日期下方以一行小字呈现，信息不丢。列宽写在 th 上 ——
     table-layout: fixed 下列宽由第一行决定，写在 td 上无效（此前踩过）。 */
  .page-console .report__rechecks { table-layout: fixed; }
  .page-console .report__rechecks thead th:nth-child(1) { width: 50%; }
  .page-console .report__rechecks thead th:nth-child(2) { width: 25%; }
  .page-console .report__rechecks thead th:nth-child(3) { width: 25%; }
  .page-console .report__rechecks th { padding-right: 10px; white-space: normal; }
  .page-console .report__rechecks td { padding: 12px 10px 12px 0; }
  .page-console .report__rechecks-when { white-space: normal; }
  .page-console .report__rechecks-detail {
    display: block; margin-top: 5px; font-family: var(--font-sans); font-size: 11.5px;
    line-height: 1.45; color: var(--ink-3); white-space: normal;
  }
}

/* 首页"一手数据"区块：数字用等宽并与说明分行，行间细线 —— 与全站标记语言一致。
   窄屏时数字在上、说明在下，避免长句被挤成窄列。 */
.page-console .home-stats__list { margin: 0; padding: 0; }
.page-console .home-stats__list li {
  padding: 16px 0; border-top: 1px solid var(--line);
}
.page-console .home-stats__list li:last-child { border-bottom: 1px solid var(--line); }
.page-console .home-stats__num {
  display: block; font-family: var(--font-mono); font-size: var(--fs-24);
  color: var(--ink); letter-spacing: -.01em;
}
.page-console .home-stats__label { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--fs-16); }
@media (max-width: 620px) {
  .page-console .home-stats__num { font-size: var(--fs-20); }
  .page-console .home-stats__label { font-size: var(--fs-15); }
}

/* 报告页监控区块：与验证/分享区块同一套语言（上细线 + 20px 色段），不画卡片。
   手机端数字在上、说明在下，避免长句被挤成窄列。 */
.page-console .report__monitor { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--line); position: relative; }
.page-console .report__monitor::before { content: ""; position: absolute; top: -1px; left: 0; width: 20px; height: 2px; background: var(--brand-1); }
.page-console .report__monitor-title { margin: 0 0 8px; font-family: var(--font-display, var(--font-sans)); font-size: var(--fs-17, 17px); color: var(--ink); }
.page-console .report__monitor-lede { margin: 0 0 14px; font-size: var(--fs-14, 14px); line-height: 1.65; color: var(--ink-2); }
.page-console .report__monitor-file { margin: 0 0 14px; font-size: var(--fs-14, 14px); color: var(--ink-2); }
.page-console .report__monitor-file code { font-family: var(--font-mono); font-size: var(--fs-13, 13px); color: var(--ink); user-select: all; }
.page-console .report__monitor-hint { display: block; margin-top: 4px; color: var(--ink-3); }
.page-console .report__monitor-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.page-console .report__monitor-list { margin: 0 0 16px; padding: 0; }
.page-console .report__monitor-list li { padding: 14px 0; border-top: 1px solid var(--line); }
.page-console .report__monitor-list li:last-child { border-bottom: 1px solid var(--line); }
.page-console .report__monitor-num { display: block; font-family: var(--font-mono); font-size: var(--fs-20); color: var(--ink); }
.page-console .report__monitor-label { display: block; margin-top: 4px; font-size: var(--fs-14, 14px); color: var(--ink-2); }
@media (max-width: 620px) {
  .page-console .report__monitor-num { font-size: var(--fs-18); }
  .page-console .report__monitor-label { font-size: var(--fs-15); }
  .page-console .report__monitor-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------- 数据页（/research）
   与排行榜同一套表格语言（等宽大写表头、表头下细线、行细线、数值等宽），
   不画卡片；比率用细条表达，数字仍以文本给出（条对辅助技术隐藏）。 */
.page-console .research__finding { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.page-console .research__finding h2 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.page-console .research__finding p { margin: 0; font-size: var(--fs-17, 17px); line-height: 1.7; color: var(--ink-2); max-width: 52rem; }
.page-console .research-table { width: 100%; border-collapse: collapse; margin: 4px 0 0; font-size: var(--fs-15); }
.page-console .research-table__caption { caption-side: top; text-align: left; padding-bottom: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.page-console .research-table th { padding: 0 16px 10px 0; text-align: left; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--line-strong); }
.page-console .research-table td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.page-console .research-table th:last-child, .page-console .research-table td:last-child { padding-right: 0; }
.page-console .research-table__code { font-family: var(--font-mono); font-size: 13px; color: var(--brand-1); white-space: nowrap; }
.page-console .research-table__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.page-console .research-table__rate { white-space: nowrap; }
.page-console .research-table__bar { display: inline-block; vertical-align: middle; width: 64px; height: 4px; border-radius: 999px; background: rgba(91, 75, 255, .14); overflow: hidden; }
.page-console .research-table__bar-fill { display: block; height: 100%; background: var(--brand-1); border-radius: 999px; }
.page-console .research-table__pct { display: inline-block; min-width: 3.2em; margin-left: 10px; font-family: var(--font-mono); color: var(--ink); }
.page-console .research__notes { margin: 0; padding: 0; }
.page-console .research__notes li { padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--fs-15); line-height: 1.65; color: var(--ink-2); }
.page-console .research__notes li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 620px) {
  /* 手机上表格只留 检查项 / 说明 / 比率 —— 数量那列（x/y）已在比率里体现，先舍它 */
  .page-console .research-table th:nth-child(3), .page-console .research-table td:nth-child(3) { display: none; }
  .page-console .research-table { table-layout: fixed; }
  .page-console .research-table thead th:nth-child(1) { width: 46px; }
  .page-console .research-table thead th:nth-child(4) { width: 104px; }
  .page-console .research-table th, .page-console .research-table td { padding-right: 8px; }
  .page-console .research-table th { white-space: normal; }
  /* 实测（360/390）：条 40px + 百分比 min-width 3.2em 在 96px 列里放不下，
     27 个单元格出现内部横向滚动。收窄条与百分比、允许换行后才为 0。 */
  .page-console .research-table__rate { white-space: normal; }
  .page-console .research-table__bar { width: 32px; }
  .page-console .research-table__pct { min-width: 2.6em; margin-left: 6px; }
  .page-console .research__finding p { font-size: var(--fs-16); }
}

/* 报告页手机端：默认只显示"要修的"，已通过项折叠在开关后面。 */
/* 桌面端绝不显示这个开关 —— 第一版把 display:block 写在媒体查询里、基础样式没设，
   结果桌面也冒出了开关（实测抓到），等于把移动端改动落到了 PC 上。 */
.page-console .report__passed-toggle { display: none; }

/* 以下规则只在窄屏生效：桌面端既不显示开关，也不隐藏任何项。
   用 :has() 表达"开关未勾选"，老浏览器不支持 :has() 时退回"全部展开"，是安全降级。 */
@media (max-width: 620px) {
  .page-console .report__passed-toggle { display: block; margin: 16px 0 4px; }
  .page-console .report__passed-toggle label {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px;
    font-size: var(--fs-15); color: var(--ink); cursor: pointer;
  }
  .page-console .report__passed-toggle label::before {
    content: "＋"; font-family: var(--font-mono); color: var(--brand-1);
  }
  .page-console .report__passed-toggle input:checked + label::before { content: "－"; }
  /* :has(.ritem--fail) 很关键：满分报告没有失败项，若照旧折叠会只剩一个空段落
     （实测自家 15/15 报告在手机上整段检查项消失）。 */
  .page-console .report:has(.ritem--fail):not(:has(.report__passed-toggle input:checked)) .ritem--pass { display: none; }
}

/* 报告页"先修哪个"：与监控/验证区块同一套语言（上细线 + 20px 色段），不画卡片。
   手机端代码与说明分两行，说明字号用手机端的 --fs-15。 */
.page-console .report__priority { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--line); position: relative; }
.page-console .report__priority::before { content: ""; position: absolute; top: -1px; left: 0; width: 20px; height: 2px; background: var(--brand-1); }
.page-console .report__priority-title { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.page-console .report__priority-list { margin: 0; padding: 0; }
.page-console .report__priority-item { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.page-console .report__priority-item:last-child { border-bottom: 1px solid var(--line); }
.page-console .report__priority-code { flex: 0 0 40px; font-family: var(--font-mono); font-size: 13px; color: var(--brand-1); }
.page-console .report__priority-body { display: block; min-width: 0; }
.page-console .report__priority-name { display: block; font-size: var(--fs-15); color: var(--ink); }
.page-console .report__priority-reason { display: block; margin-top: 3px; font-size: var(--fs-14); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 620px) {
  .page-console .report__priority-item { flex-direction: column; gap: 4px; }
  .page-console .report__priority-code { flex: none; }
  .page-console .report__priority-reason { font-size: var(--fs-15); }
}