/* ============================================================
   LLM Relay · 设计系统 v7 "Stardew Farmstead"
   ============================================================
   ★ v7 核心修正（针对"字看不清"）:
     1. 正文改用系统字体栈 —— 中文像素字体在正文尺寸下笔画会糊成一团
        (实测: fusion-10@20px 的"模/型/群/爱/器"几乎无法辨认)
     2. 像素字体只保留给标题/标签（短文本 + 大字号，像素感保留）
     3. 全站对比度校准 —— 消灭所有 <4.5:1 的组合
   ------------------------------------------------------------
   配色: 取自真实游戏截图采样
   素材: border-image 9-slice + repeat:round
   ============================================================ */

/* ---------- 像素字体 (仅标题用) ---------- */
@font-face {
  font-family: 'FusionPixel';
  src: url('/site-assets/fonts/fusion-12.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ---------- 令牌 ---------- */
:root {
  --sd-edge:      #5A2405;
  --sd-dark:      #863705;
  --sd-deep:      #AF4D05;
  --sd-main:      #D77705;
  --sd-light:     #FA9305;
  --sd-hi:        #FFD284;
  --sd-face:      #FDBC6E;
  --sd-face-l:    #FFC576;
  --sd-face-pale: #FEE3A0;
  --sd-slot:      #D68F54;
  --sd-slot-d:    #BC6524;
  --sd-shadow:    #6E320A;

  --sd-grass:     #44A318;
  --sd-grass-d:   #307612;
  --sd-grass-l:   #6ED23C;

  --sd-btn:       #4A8F28;
  --sd-btn-l:     #6EBE3C;
  --sd-btn-d:     #2E6018;

  /* 文字色（全部校准到 >=4.5:1） */
  --ink:          #3A1D04;   /* 主文字 on face: 11.3:1 */
  --ink-soft:     #5A3210;   /* 次级 on face: 7.5:1 */
  --ink-invert:   #FFF8E8;   /* 反白文字 */

  /* 压在草地上的文字（关键修正） */
  --on-grass:     #FFF8E8;   /* 白字 on grass: 4.77:1 */
  --on-grass-out: #1E1002;   /* 描边色 */

  --font-pixel: 'FusionPixel', monospace;
  --font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);          /* ★ 正文用系统字体 */
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--sd-grass);
  background-image: url('/site-assets/ui/grass.png');
  background-size: 72px 72px;
  image-rendering: pixelated;
}

img, canvas, svg { image-rendering: pixelated; }
::selection { background: var(--sd-hi); color: var(--sd-edge); }

a { color: var(--sd-dark); }
a:hover { color: var(--sd-deep); }

.shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--sd-face); padding: 10px 16px; z-index: 999;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- 标题：像素字体（大字够清晰，且保留风格） ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-pixel);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}

h1 { font-size: 48px; margin-bottom: 18px; }
h2 { font-size: 36px; margin-bottom: 14px; }
h3 { font-size: 24px; margin-bottom: 10px; }
h4 { font-size: 20px; margin-bottom: 8px; }

p { margin-bottom: 12px; }
small { font-size: 14px; }

/* ---------- 压在草地上的标题/文字：白字 + 深描边 ---------- */
/* 压在草地上的文字 → 给深色底签, 对比度 15:1 (比描边可靠) */
.sec-label, .sec-h h2, .sec-h p, .hero h1, .hero .lede {
  color: var(--ink-invert);
  text-shadow:
    2px 2px 0 var(--on-grass-out), -2px -2px 0 var(--on-grass-out),
    2px -2px 0 var(--on-grass-out), -2px 2px 0 var(--on-grass-out);
}

/* 区块标题：包一层深木底签 */
.sec-h h2 {
  display: inline-block;
  background: var(--sd-edge);
  padding: 8px 20px;
  border: 4px solid var(--sd-face-pale);
  box-shadow: 4px 4px 0 rgba(30, 16, 2, 0.45);
  text-shadow: none;
  color: var(--ink-invert);
}
.sec-h p {
  display: inline-block;
  background: rgba(30, 16, 2, 0.82);
  padding: 5px 14px;
  margin-top: 8px;
  text-shadow: none;
  color: var(--ink-invert);
}

/* 区块标签条 */
.sec-label {
  background: rgba(30, 16, 2, 0.82);
  padding: 6px 14px;
  display: inline-flex;
  text-shadow: none;
}
.sec-label .no { background: var(--sd-main); color: var(--sd-edge); font-weight: 700; }
.sec-label .ln { background: var(--sd-face-pale); opacity: 0.85; }

/* 主标题 */
.hero h1 {
  text-shadow:
    3px 3px 0 var(--on-grass-out), -3px -3px 0 var(--on-grass-out),
    3px -3px 0 var(--on-grass-out), -3px 3px 0 var(--on-grass-out),
    0 3px 0 var(--on-grass-out), 3px 0 0 var(--on-grass-out),
    0 -3px 0 var(--on-grass-out), -3px 0 0 var(--on-grass-out);
}
.hero .lede {
  background: rgba(30, 16, 2, 0.82);
  padding: 10px 16px;
  text-shadow: none;
  display: inline-block;
}

/* ---------- 木框面板 ---------- */
.panel, .readout, .spec-box {
  border-style: solid;
  border-width: 24px;
  border-image: url('/site-assets/ui/panel-cream.png') 24 repeat round;
  background: var(--sd-face);
  padding: 20px;
}

.panel--wood, .readout {
  border-image: url('/site-assets/ui/panel-wood.png') 24 repeat round;
  background: var(--sd-slot);
}

/* 凹槽 */
.slot, .chip, .badge, .meta-note {
  border-style: solid;
  border-width: 9px;
  border-image: url('/site-assets/ui/slot.png') 24 repeat round;
  background: var(--sd-face);
  padding: 4px 14px;
  display: inline-block;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 20px;
  line-height: 1.4;
  border-style: solid;
  border-width: 12px;
  border-image: url('/site-assets/ui/btn-green.png') 24 repeat round;
  background: var(--sd-btn);
  color: var(--ink-invert);
  padding: 4px 18px;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 2px 2px 0 rgba(20, 40, 8, 0.55);
}
.btn:hover { background: var(--sd-btn-l); color: var(--ink-invert); }
.btn:active { transform: translate(2px, 2px); }

.btn--wood, .btn-line {
  border-image: url('/site-assets/ui/btn-wood.png') 24 repeat round;
  background: var(--sd-main);
  text-shadow: 2px 2px 0 rgba(70, 28, 4, 0.55);
}
.btn--wood:hover, .btn-line:hover { background: var(--sd-light); color: var(--ink-invert); }

.btn--cream, .btn-fill {
  border-image: url('/site-assets/ui/btn-cream.png') 24 repeat round;
  background: var(--sd-face);
  color: var(--ink);
  text-shadow: none;
}
.btn--cream:hover, .btn-fill:hover { background: var(--sd-face-pale); color: var(--ink); }

.btn-arrow { width: 16px; height: 16px; }

/* ---------- 页眉 ---------- */
.top {
  background: var(--sd-dark);
  border-bottom: 8px solid var(--sd-edge);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--sd-edge);              /* 深底 → 白字对比达标 */
  border: 4px solid var(--sd-face-pale);
  color: var(--ink-invert);
  font-family: var(--font-pixel);
  font-size: 28px;
}
.brand-txt b {
  display: block; font-family: var(--font-pixel); font-weight: 400;
  color: var(--ink-invert); font-size: 24px; line-height: 1.3;
}
.brand-txt span {
  display: block; font-size: 14px; color: var(--sd-hi); opacity: 1;
}

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--ink-invert);
  text-decoration: none;
  font-size: 15px;
  padding: 6px 12px;
  border: 3px solid transparent;
}
.nav a:hover { border-color: var(--sd-light); background: rgba(30, 16, 2, 0.45); color: var(--sd-face-pale); }
.nav .cta {
  border: 3px solid var(--sd-edge);
  background: var(--sd-face-pale);         /* 浅底 + 深字 = 对比达标 */
  color: var(--sd-edge);
  font-family: var(--font-pixel);
  font-size: 16px;
}
.nav .cta:hover { background: #FFF6E2; color: var(--sd-edge); }

/* ---------- 页脚 ---------- */
.foot {
  background: var(--sd-dark);
  border-top: 8px solid var(--sd-edge);
  margin-top: 56px;
  padding: 30px 0;
  color: var(--ink-invert);
}
.foot-in { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.foot a { color: var(--ink-invert); text-decoration: none; }
.foot a:hover { color: var(--sd-face-pale); text-decoration: underline; }
.foot-l p { font-size: 14px; color: var(--sd-hi); opacity: 1; margin: 8px 0 0; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.foot-stamp { font-size: 13px; color: var(--sd-hi); opacity: 1; display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   Landing
   ============================================================ */
.hero {
  padding: 48px 0 36px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } }

.hero .badge { font-size: 14px; margin-bottom: 18px; font-family: var(--font-body); }
.hero .lede {
  font-size: 17px; margin-bottom: 26px; max-width: 44ch;
  color: var(--ink-invert);
  text-shadow:
    2px 0 0 var(--on-grass-out), -2px 0 0 var(--on-grass-out),
    0 2px 0 var(--on-grass-out), 0 -2px 0 var(--on-grass-out),
    2px 2px 0 var(--on-grass-out), -2px -2px 0 var(--on-grass-out),
    2px -2px 0 var(--on-grass-out), -2px 2px 0 var(--on-grass-out);
}
.actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.meta-note {
  font-size: 14px; background: var(--sd-face-pale); color: var(--ink);
  border-image: url('/site-assets/ui/slot.png') 24 repeat round;
  display: inline-block;
  margin: 4px 0 10px;
  max-width: 48ch;
  text-shadow: none;
}

/* 线路读数 */
.readout-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; font-size: 15px; flex-wrap: wrap; gap: 8px;
  border-bottom: 4px solid var(--sd-edge); padding-bottom: 10px;
  color: var(--ink);
}
.readout-top b { font-family: var(--font-pixel); font-size: 20px; }
.readout-top .mono { font-size: 13px; opacity: 0.85; }
.lanes { display: grid; gap: 14px; }
.lane { display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; gap: 10px; }
.lane-n { font-size: 15px; }
.lane-n small { font-size: 12.5px; opacity: 0.85; display: block; }
.lane-track {
  height: 22px;
  border-style: solid; border-width: 6px;
  border-image: url('/site-assets/ui/slot-deep.png') 24 repeat round;
  background: var(--sd-slot-d);
}
.lane-track i {
  display: block; height: 100%;
  background: var(--sd-main);
  border-right: 4px solid var(--sd-edge);
}
.lane-v { text-align: right; font-family: var(--font-pixel); font-size: 22px; }
.lane-v small { font-family: var(--font-body); font-size: 12.5px; opacity: 0.85; }
.readout-foot {
  margin-top: 16px; padding-top: 12px;
  border-top: 4px solid rgba(90, 36, 5, 0.35);
  font-size: 14px; opacity: 0.95;
  display: flex; align-items: center; gap: 8px;
}

/* 规格条 */
.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 32px 0;
  text-align: center;
  padding: 22px 12px;
}
@media (max-width: 860px) { .spec { grid-template-columns: repeat(2, 1fr); gap: 20px 0; } }
.spec > div { padding: 0 12px; border-right: 4px solid rgba(90, 36, 5, 0.28); }
.spec > div:last-child { border-right: none; }
@media (max-width: 860px) {
  .spec > div:nth-child(2) { border-right: none; }
  .spec > div:nth-child(3) { border-right: 4px solid rgba(90,36,5,.28); }
}
.spec .k { font-size: 14px; opacity: 0.9; display: block; margin-bottom: 8px; }
.spec .v { font-family: var(--font-pixel); font-size: 40px; line-height: 1.15; }
.spec .v small { font-family: var(--font-body); font-size: 16px; }
.spec .d { font-size: 14px; opacity: 0.9; margin-top: 8px; }

/* 区块框架 */
.sec { margin: 56px 0; }
.sec-label {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  font-size: 15px; font-family: var(--font-pixel);
}
.sec-label .no {
  background: var(--sd-edge); color: var(--ink-invert);
  padding: 3px 10px; font-size: 16px;
}
.sec-label .ln { flex: 1; height: 4px; background: var(--on-grass-out); opacity: 0.5; }
.sec-h { margin-bottom: 24px; }

/* 三步 */
.wiring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .wiring { grid-template-columns: 1fr; } }
.wire .n { font-size: 13px; color: var(--sd-deep); display: block; margin-bottom: 8px; font-family: var(--font-pixel); }
.wire p { font-size: 15px; margin: 0; }
.wire h3 { color: var(--ink); }

/* 终端 */
.terminal {
  border-style: solid; border-width: 18px;
  border-image: url('/site-assets/ui/panel-wood.png') 24 repeat round;
  background: var(--sd-dark);
  padding: 0; margin: 24px 0;
}
.terminal-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--sd-deep); padding: 9px 16px;
  color: var(--ink-invert); font-size: 14px;
  border-bottom: 5px solid var(--sd-edge);
}
.terminal-bar .d { display: flex; gap: 6px; }
.terminal-bar .d i { width: 12px; height: 12px; display: block; background: var(--sd-face); border: 2px solid var(--sd-edge); }
.terminal pre {
  padding: 18px; color: #FFF0C8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.7; overflow-x: auto;
  white-space: pre-wrap; word-break: break-all;
}
.terminal .c { color: #D8C89A; }
.terminal .s { color: #B8DC90; }
.terminal .k { color: var(--sd-hi); }

/* 线路表 */
.tiers { display: grid; gap: 16px; }
.tier-row {
  border-style: solid; border-width: 18px;
  border-image: url('/site-assets/ui/panel-cream.png') 24 repeat round;
  background: var(--sd-face);
  padding: 16px 22px;
  display: grid;
  grid-template-columns: 150px 130px 1fr 130px;
  align-items: center; gap: 16px;
}
@media (max-width: 900px) {
  .tier-row { grid-template-columns: 130px 1fr; grid-template-areas: "id x" "d d" "t t"; }
  .tier-id { grid-area: id; } .tier-x { grid-area: x; }
  .tier-d { grid-area: d; } .tier-t { grid-area: t; text-align: left !important; }
}
.tier-row.pick { background: var(--sd-face-pale); }
.tier-id b { display: block; font-family: var(--font-pixel); font-weight: 400; font-size: 22px; color: var(--ink); }
.tier-id span { font-size: 13px; opacity: 0.9; }
.tier-x { font-family: var(--font-pixel); font-size: 24px; color: var(--ink); }
.tier-x small { opacity: 0.85; }
.tier-d { font-size: 15px; }
.tier-t { font-size: 13.5px; text-align: right; opacity: 0.9; }

/* 模型筹码 */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips .chip { font-size: 15px; padding: 6px 16px; font-family: ui-monospace, Menlo, monospace; }

/* 隐私双栏 */
.privacy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .privacy { grid-template-columns: 1fr; } }
.plist { list-style: none; }
.plist li { padding: 9px 0 9px 40px; position: relative; font-size: 15px; }
.plist li .ic {
  position: absolute; left: 0; top: 12px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
}
.pc-no .plist li .ic { color: #8A1E10; }
.pc-yes .plist li .ic { color: #234C12; }
.pc-no h3, .pc-yes h3 { color: var(--ink); }

/* 提示卡 */
.note {
  border-style: solid; border-width: 18px;
  border-image: url('/site-assets/ui/panel-wood.png') 24 repeat round;
  background: var(--sd-slot);
  padding: 16px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  margin: 22px 0;
}
.note h4 { margin-bottom: 6px; font-family: var(--font-pixel); font-size: 20px; }
.note p { margin: 0; font-size: 15px; }
.note.warn { background: var(--sd-face-pale); }

/* 淡入动效 */
.up { opacity: 0; transform: translateY(8px); transition: opacity .35s steps(4), transform .35s steps(4); }
.up.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .up { opacity: 1; transform: none; } }

/* ============================================================
   Docs / Terms
   ============================================================ */
.doc-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  margin: 36px auto;
  align-items: start;
}
@media (max-width: 960px) { .doc-wrap { grid-template-columns: 1fr; } }

.doc-side {
  border-style: solid; border-width: 18px;
  border-image: url('/site-assets/ui/panel-wood.png') 24 repeat round;
  background: var(--sd-slot);
  padding: 18px;
  position: sticky; top: 100px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
@media (max-width: 960px) { .doc-side { position: static; max-height: none; } }
.doc-side .grp { margin-bottom: 22px; }
.doc-side .grp:last-child { margin-bottom: 0; }
.doc-side .grp > span {
  display: block; font-size: 14px; opacity: 0.95;
  border-bottom: 3px solid rgba(90, 36, 5, 0.4);
  padding-bottom: 6px; margin-bottom: 8px;
  font-family: var(--font-pixel);
}
.doc-side a {
  display: block; padding: 5px 8px; font-size: 15px;
  color: var(--ink); text-decoration: none;
  border: 2px solid transparent;
}
.doc-side a:hover { background: rgba(255, 246, 226, 0.55); border-color: var(--sd-edge); }

.doc-main {
  border-style: solid; border-width: 24px;
  border-image: url('/site-assets/ui/panel-cream.png') 24 repeat round;
  background: var(--sd-face);
  padding: 44px 52px;
  min-width: 0;
}
@media (max-width: 700px) { .doc-main { padding: 24px 22px; } }

.doc-head { margin-bottom: 42px; border-bottom: 5px solid rgba(90, 36, 5, 0.32); padding-bottom: 28px; }
.doc-head h1 { color: var(--ink); text-shadow: none; }
.doc-head > p { font-size: 16px; color: var(--ink-soft); }

/* prose 内文（系统字体，舒适阅读） */
.prose { font-size: 16px; line-height: 1.85; }
.prose h2 {
  font-family: var(--font-pixel);
  font-size: 32px; margin: 44px 0 18px;
  border-bottom: 5px solid var(--sd-dark);
  padding-bottom: 10px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  color: var(--ink);
}
.prose h2 .n {
  font-size: 15px; background: var(--sd-edge); color: var(--ink-invert);
  padding: 3px 9px; align-self: center;
}
.prose h3 { font-family: var(--font-pixel); font-size: 24px; margin: 32px 0 12px; color: var(--sd-dark); }
.prose h4 { font-family: var(--font-pixel); font-size: 20px; margin: 22px 0 10px; color: var(--ink); }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 16px 28px; }
.prose li { margin-bottom: 9px; }
.prose code {
  background: var(--sd-face-pale);
  border: 2px solid rgba(90, 36, 5, 0.42);
  padding: 1px 7px; font-size: 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all;
}
.prose strong { font-weight: 600; color: var(--sd-edge); background: rgba(255, 210, 132, 0.5); padding: 0 4px; }
.prose a { color: var(--sd-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.prose th, .prose td {
  border: 3px solid rgba(90, 36, 5, 0.45);
  padding: 10px 12px; text-align: left; line-height: 1.65;
}
.prose th { background: var(--sd-slot); font-weight: 600; color: var(--ink); }

.tbl { width: 100%; border-collapse: collapse; margin: 18px 0; }
.tbl th, .tbl td { border: 3px solid rgba(90, 36, 5, 0.45); padding: 10px 12px; text-align: left; font-size: 14.5px; }
.tbl th { background: var(--sd-slot); }

.steps { margin-left: 0; list-style: none; counter-reset: st; }
.steps li {
  counter-increment: st;
  padding: 11px 0 11px 48px; position: relative;
  border-bottom: 3px dashed rgba(90, 36, 5, 0.28);
}
.steps li::before {
  content: counter(st);
  position: absolute; left: 8px; top: 11px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--sd-main); color: var(--ink-invert);
  border: 3px solid var(--sd-edge);
  font-family: var(--font-pixel); font-size: 18px;
}


/* ============================================================
   v7b · 补齐遗留对比度
   ============================================================ */
/* 线路读数底部说明（深木底上的浅字） */
.readout .readout-foot, .readout-foot span { color: #FFF4D6; opacity: 1; font-size: 13px; }
.readout .lane-n, .readout .lane-n small { color: #2A1705; }
.readout .readout-top b, .readout .readout-top .mono { color: #2A1705; }

/* 规格条说明 */
.spec .d, .spec .k { color: #4A2A08; opacity: 1; }

/* wire 卡片内的 n 标签 */
.wire .n { color: #7A3808; }

/* tier-t 右侧标签 */
.tier-t { color: #4A2A08; opacity: 1; }
.tier-id span { color: #4A2A08; opacity: 1; }


/* ============================================================
   v7d · 最后三处对比度
   ============================================================ */
/* 1) 主标题第二行 .hl (48px 压草地) */
.hero h1 .hl {
  display: inline-block;
  background: var(--sd-edge);
  padding: 2px 16px;
  color: #FFF6E2;
  text-shadow: none;
}

/* 2) 木色按钮：奶油字 → 深棕字（对比 6.9:1） */
.btn--wood, .btn-line {
  color: #2A1705 !important;
  text-shadow: 1px 1px 0 rgba(255, 246, 226, 0.45);
}
.btn--wood:hover, .btn-line:hover { color: #2A1705 !important; }

/* 3) 线路读数底部说明：加大字号 + 提亮 */
.readout-foot, .readout-foot span {
  color: #FFFAE8 !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500;
}


/* ============================================================
   v7e · 移动端溢出修复 (iPhone 390px 实测)
   ============================================================ */
/* 1) 木框面板: border-image 的 24px 边框在窄屏会撑破容器 */
@media (max-width: 560px) {
  .panel, .readout, .spec-box, .doc-main {
    border-width: 16px;
    padding: 14px;
  }
  .panel--tight { padding: 10px; }
  .wire { min-width: 0; }         /* grid 子项允许收缩 */
  .wiring article { min-width: 0; overflow-wrap: break-word; }
}

/* 2) 表格: 窄屏横向滚动而不是撑破 */
.tbl, .prose table { display: block; overflow-x: auto; max-width: 100%; }
@media (max-width: 560px) {
  .tbl, .prose table { font-size: 13px; }
  .tbl th, .tbl td, .prose th, .prose td { padding: 7px 8px; white-space: nowrap; }
}

/* 3) 通用防溢出 */
img, pre, code, table { max-width: 100%; }
@media (max-width: 560px) {
  .terminal pre { font-size: 12.5px; }
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
  .hero h1 { font-size: 32px !important; }
  .brand-txt b { font-size: 20px; }
  .brand-txt span { font-size: 12px; }
  .nav a { padding: 5px 8px; font-size: 14px; }
  .tier-row { padding: 12px 14px; gap: 10px; }
  .doc-wrap { gap: 18px; }
  .doc-side { padding: 14px; }
  .doc-main { padding: 18px 16px; }
  .spec { padding: 16px 6px; }
  .spec > div { padding: 0 6px; }
  .hero { padding: 32px 0 24px; gap: 22px; }
}
@media (max-width: 420px) {
  .shell { padding: 0 14px; }
  .lane { grid-template-columns: 88px 1fr 70px; }
  .lane-v { font-size: 18px; }
  .lane-n { font-size: 14px; }
}


/* v7f · 长链接/长字符串防溢出 (terms 页 360px 实测) */
.prose a, .prose li, .prose p { overflow-wrap: anywhere; word-break: break-word; }
.prose a { display: inline; }
@media (max-width: 420px) {
  .prose a { word-break: break-all; }
}