/* ============================================================
   易算阁 · 按 Gemini 建议 0.2 落地（皮肤层，2026-10-31）
   ─────────────────────────────────────────────────────────────
   纪律（承接上一次回滚的教训）：
   1. 只换表面、排版与间距，不动布局栅格、不动引擎逻辑；
   2. 不写死 px 的「高度 / 行高 / 字距」——高度一律 min-height + 内容撑开，
      字号一律 clamp()，间距一律 rem；
   3. 选择器带 body 前缀，稳压 style.css 同权重旧规则；
   4. 夜读主题（data-theme="night"）不吃这层，保持原样。
   回滚：把 index.html 里 <link ... skin-gemini.css> 一行删掉即可。
   ============================================================ */

/* ---------- 第一段：全局 Token（0.3 修订：对比度 / 字号 / 边界拆分） ---------- */
:root {
  --sg-bg: hsl(40, 20%, 98%);          /* #FBFAF9 温暖米白 */
  --sg-surface: #FFFFFF;
  --sg-text: #1A1A1A;
  --sg-text-2: #555555;
  --sg-text-3: #6B6660;                /* 0.3：5.6:1，替掉 3.4:1 的 #888 */
  --sg-accent: #C5A059;                /* 装饰线 / ≥18px 大字 */
  --sg-accent-ink: #8A6A32;            /* 小字用，4.8:1 */
  --sg-border: rgba(138, 106, 50, 0.42);        /* 0.3：控件边界，≥3:1 */
  --sg-border-decor: rgba(197, 160, 89, 0.2);   /* 0.3：纯装饰线 */
  --sg-border-strong: rgba(138, 106, 50, 0.42);

  --sg-shadow-card: 0 10px 30px -10px rgba(0, 0, 0, .03);
  --sg-shadow-hover: 0 20px 40px -15px rgba(197, 160, 89, .12);

  --sg-radius-sm: 0.25rem;   /* 徽章、标签 */
  --sg-radius: 0.5rem;       /* 输入框、按钮 */
  --sg-radius-lg: 1rem;      /* 卡片、弹窗 */

  --sg-space-1: 0.25rem;
  --sg-space-2: 0.5rem;
  --sg-space-3: 1rem;
  --sg-space-4: 1.5rem;
  --sg-space-5: 2.5rem;
  --sg-space-6: 4rem;

  /* 0.3：去掉平台期的单调 clamp */
  --sg-fs-h1: clamp(1.75rem, 2.2vw + 1.1rem, 3.25rem);
  --sg-fs-h2: clamp(1.35rem, 1.5vw + 0.8rem, 2.25rem);
  --sg-fs-h3: clamp(1.125rem, 1vw + 0.5rem, 1.375rem);
  --sg-fs-body: clamp(0.9375rem, 0.3vw + 0.85rem, 1.0625rem);
  --sg-fs-caption: clamp(0.75rem, 0.2vw + 0.7rem, 0.875rem);   /* 0.4 修正：下限 12px */
  --sg-fs-nav: clamp(0.875rem, 0.35vw + 0.78rem, 1rem);
  --sg-container-width: 1440px;   /* 与工具台栅格同宽 */
  --sg-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;

  --sg-lh-tight: 1.2;
  --sg-lh-normal: 1.6;
  --sg-lh-loose: 1.8;

  --sg-nav-h: 4rem;          /* 与站里原导航同高（64px@16px），换皮不把内容往下推 */
}

/* 0.3：键盘焦点必须看得见（两像素深金） */
body :focus-visible {
  outline: 2px solid var(--sg-accent-ink);
  outline-offset: 2px;
}

/* ---------- 主题桥接：把全站既有变量接到 Gemini 色板 ---------- */
body:not([data-theme="night"]) {
  --bg: #FBFAF9;  --bg-rgb: 251, 250, 249;
  --bg-2: #F7F4EF; --bg-3: #F2EDE4;
  --text: var(--sg-text);
  --text-dim: var(--sg-text-2);
  --gold: var(--sg-accent-ink);
  --gold-bright: #9C7838;
  --gold-dim: #7A6136;
  --gold-rgb: 197, 160, 89;
  --gold-bright-rgb: 156, 120, 56;
  --line: var(--sg-border-decor);
  --line-strong: var(--sg-border);
  --shadow-rgb: 26, 26, 26;
  --sf-card: var(--sg-surface);
  --sf-hi: #FEFDFA;
  --sf-page: var(--sg-bg);
  --sf-float-a: #FEFEFC;
  --sf-float-b: #FAF7F0;
  --float-bg: var(--sg-surface);
  --float-shadow: var(--sg-shadow-card);
  /* 站内导航颜色由 --nav-idle 单点控制（style.css 里带 !important 的唯一裁决），
     所以这里改变量，不跟 !important 打架 */
  --nav-idle: var(--sg-text-2) !important;
}

/* ---------- 第二段：顶部导航 ---------- */
body .nav {
  height: auto;
  min-height: var(--sg-nav-h);
  background: rgba(251, 250, 249, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sg-border-decor);
  box-shadow: none;
}
body .nav-inner {
  height: auto;
  min-height: var(--sg-nav-h);
  max-width: 90rem;
  gap: clamp(0.5rem, 1.2vw, 1.1rem);
  padding: 0 clamp(0.75rem, 2vw, 1.6rem);
}
/* 字标：宋体 + 拉开字距；去掉旧版的立体阴影 */
body .nav .logo-name {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--sg-text);
  text-shadow: none;
  line-height: 1.1;
}
body .nav .logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--sg-text-3);
  text-transform: uppercase;
  margin-top: 0.15rem;
}
body .nav .logo-seal { filter: none; }

/* 入口：纯文字、无底色、hover 从左向右展开一条细线
   0.4 的写法：横向间距交给 gap，字号交给 clamp（13.5→12.5px 平滑降级，不换行） */
body .nav-links { gap: clamp(0.75rem, 1.5vw, 2.25rem); min-width: 0; }
body .nav-side { gap: clamp(0.5rem, 1vw, 1.25rem); min-width: 0; }
body .nav-links a,
body .nav-side a {
  flex: 0 0 auto;                 /* 关键：不许被 flex 压扁（压扁 + nowrap = 文字叠字） */
  position: relative;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--sans);
  font-size: clamp(0.9375rem, 1.15vw, 1.125rem);   /* 导航收项之后字要顶上来，不然整条看着空 */
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--sg-text-2);
  transition: color 0.2s ease;
}
/* 安全底：放不下时整条可滑、且靠左对齐（safe center 放不下会自动退回 start），
   绝不会像居中溢出那样把第一个入口盖到 logo 上 */
body .nav-links {
  flex: 1 1 auto;
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
body .nav-links::-webkit-scrollbar { display: none; }
body .nav-links:has(.nav-more.open) { overflow: visible; }
body .nav-links a:hover,
body .nav-side a:hover { color: var(--sg-text) !important; background: none; border-color: transparent; }
body .nav-links a.active,
body .nav-side a.active {
  color: var(--sg-text) !important;
  background: none !important;
  border: 0;
  box-shadow: none;
}
body .nav-links a::after,
body .nav-side a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sg-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 选中态那条线：样式表里还有一条 2px 的旧金线，这里连几何一起接管 */
body .nav-links > a::after,
body .nav-side > a::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sg-accent) !important;
}
body .nav-links a:hover::after,
body .nav-links > a.active::after,
body .nav-side a:hover::after,
body .nav-side > a.active::after { transform: scaleX(1); }

/* 字标：0.4 的 1.3rem / .25em，副题 .65rem / .15em */
body .nav .logo-name { font-size: 1.4rem; letter-spacing: 0.25em; }
body .nav .logo-sub { font-size: 0.65rem; letter-spacing: 0.15em; }

/* 搜索框：白底 + 一像素控件边 */
body .nav-search input {
  height: auto;
  min-height: 2.25rem;
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  color: var(--sg-text);
  font-size: var(--sg-fs-caption);
  box-shadow: none;
}
body .nav-search input:focus { border-color: var(--sg-accent); box-shadow: 0 0 0 0.1875rem rgba(197, 160, 89, .12); }

/* 0.4：≤1093 隐藏搜索框，把宽度让给 13 个入口 */
@media (max-width: 1093px) {
  body .nav-search { display: none; }
}

/* 兜底：再窄就整条横滑（右缘淡出提示还有入口），且绝不换行下推内容 */
@media (max-width: 1180px) {
  body .nav-links {
    justify-content: flex-start;
    gap: clamp(0.25rem, 0.55vw, 0.5rem);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.25rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.25rem), transparent 100%);
  }
  body .nav-links > a,
  body .nav-links > .nav-more { scroll-snap-align: start; }
  body .nav-links:has(.nav-more.open) { overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* 2026-11-03：1041–1180 段左右两组间距与主链同比例。
   1440/1280 的「更多」→搜索 = 28px、主链 gap = 23.04/20.48px（比例 1.22/1.37）；
   本段主链 gap 随视口收到 17.5–18.9px，右侧组却仍被 p1.css 钉在 28px（比例 1.48–1.60，
   视觉上「组间比组内松」）。这里按 1440 的 1.22 倍回落，且用更高的选择器优先级
   （p1.css 在后加载，body .nav-links 同权重会覆盖）。搜索↔右侧组已由 p1 的
   clamp(1rem,1.6vw,1.75rem) 与主链同档，保持不动。 */
@media (min-width: 1041px) and (max-width: 1180px) {
  body .nav-inner .nav-links {
    margin-right: clamp(1.25rem, 1.95vw, 2.1rem);
  }
}

/* ---------- 第四段：卡片语言（白底 / 一号圆角 / 一像素边 / 轻阴影 / 上浮 2px） ---------- */
body .float-panel,
body .gen-form,
body .card,
body .hist-item,
body .safety-box,
body .legal-box,
body .acct-menu,
body .drawer {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-decor);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-card);
}
body .hist-item:hover,
body .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-hover);
  border-color: var(--sg-accent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body .hist-item { border-radius: var(--sg-radius); }

/* 按钮：主操作仍是站里的朱红（Gemini 的「深炭灰主按钮」在纸本+朱批的
   品牌里会变成一块黑，实测抢走罗盘的视觉重量 —— 只在预览页保留它的原设计） */
body .btn-cast,
body .pay-confirm {
  background: var(--cinnabar);
  color: #FFFDF8;
  border: 0;
  border-radius: var(--sg-radius);
  box-shadow: none;
  text-shadow: none;
}
body .btn-cast:hover,
body .pay-confirm:hover { background: var(--cinnabar-dark); filter: none; }
body .btn-cast:active,
body .pay-confirm:active { transform: translateY(1px) scale(0.99); }

/* 输入控件：一像素边 + 聚焦琥珀 */
body .inp,
body .q-area,
body textarea,
body select {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-strong);
  border-radius: var(--sg-radius);
  color: var(--sg-text);
  box-shadow: none;
}
body .inp:focus,
body .q-area:focus,
body textarea:focus,
body select:focus { border-color: var(--sg-accent); box-shadow: none; outline: none; }

/* ---------- 第七段：页脚（保留固定底栏，只换排版；改静态会破坏一屏栅格） ---------- */
body .footer {
  padding: 0.75rem clamp(0.75rem, 3vw, 1.5rem);
  gap: 0.4rem 1rem;
  border-top: 1px solid var(--sg-border-decor);
  background: rgba(251, 250, 249, 0.94);
  font-family: var(--sans);
  font-size: var(--sg-fs-caption);
  letter-spacing: 0.04em;
  color: var(--sg-text-3);
}
body .footer .legal-link { color: var(--sg-text-3); border-bottom: 1px dotted var(--sg-border-strong); }
body .footer .legal-link:hover { color: var(--sg-accent-ink); border-color: var(--sg-accent); }
body .footer .legal-sep { color: var(--sg-border-strong); }

/* ---------- 第六段：付费解锁（真模糊 + 遮罩上写「解锁查看」） ---------- */
body .pay-panel {
  width: min(26.25rem, 92vw);
  max-height: min(92vh, 46rem);
  overflow-y: auto;
  border-radius: var(--sg-radius-lg);
  border: 1px solid var(--sg-border-decor);
  background: var(--sg-surface);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .08);
}
body .pay-panel h3 { color: var(--sg-text); text-shadow: none; letter-spacing: 0.2em; font-weight: 600; }
body .pay-sub { color: var(--sg-text-3); }

.sg-pay-peek {
  position: relative;
  margin: 0 0 var(--sg-space-3);
  padding: var(--sg-space-2) var(--sg-space-3) calc(var(--sg-space-2) + 1.2rem);
  border: 1px solid var(--sg-border-decor);
  border-radius: var(--sg-radius);
  background: var(--sg-bg);
  overflow: hidden;
}
.sg-pay-peek p {
  font-size: var(--sg-fs-caption);
  line-height: var(--sg-lh-normal);
  color: var(--sg-text-2);
  margin: 0 0 0.35em;
}
/* 第 2、3 行真模糊；第 1 行清楚，用来交代上下文 */
.sg-pay-peek p:nth-child(n + 2) {
  filter: blur(4px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  opacity: 0.85;
}
.sg-pay-peek .sg-pay-mask {
  position: absolute;
  inset: 45% 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.86));
}
.sg-pay-peek .sg-pay-mask b {
  font-family: var(--serif);
  font-size: var(--sg-fs-h3);
  font-weight: 500;
  color: var(--sg-text);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* ---------- 第五段：折叠面板（原生 details 的正确写法） ----------
   坑：details 关闭时子内容 display:none，grid-template-rows 0fr→1fr 根本不会过渡
   （Gemini 0.2 原文如此）。这里用 ::details-content + interpolate-size 做真动画，
   不支持时降级为直接展开——绝不写 max-height 猜值。 */
.sg-details { border-bottom: 1px solid var(--sg-border-decor); }
.sg-details:last-child { border-bottom: 0; }
.sg-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-3);
  padding: var(--sg-space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: var(--sg-fs-h3);
  color: var(--sg-text);
  user-select: none;
}
.sg-details > summary::-webkit-details-marker { display: none; }
.sg-details > summary::marker { content: ""; }   /* Firefox：否则会多一个三角 */
.sg-details > summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--sg-text-3);
  transition: transform 0.2s ease;
}
.sg-details[open] > summary::after { content: "−"; }
.sg-details > summary:hover { background: rgba(197, 160, 89, 0.05); }
.sg-details .sg-details-body {
  padding: 0 var(--sg-space-4) var(--sg-space-4);
  color: var(--sg-text-2);
  line-height: var(--sg-lh-normal);
}
/* 0.3：动画只在支持的浏览器里开，避免旧内核把内容锁成 0 高（关键：@supports 包起来） */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .sg-details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.25s ease-out, content-visibility 0.25s allow-discrete;
  }
  .sg-details[open]::details-content { block-size: auto; }
}

/* ---------- 徽章 ---------- */
.sg-badge {
  font-size: var(--sg-fs-caption);
  padding: 0.2em 0.6em;
  border-radius: var(--sg-radius-sm);
  background: rgba(197, 160, 89, 0.14);
  color: var(--sg-accent-ink);       /* 原文用 #C5A059，对比度 2.4:1 不合格 */
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 缩放/矮屏兜底（2026-10-31 补，直击「缩一起还是挤」） ----------
   实测 1366×768@150%（911×512）时：页脚换行后高 71px，而 .stage 只按 46px 预留，
   左侧「起卦」按钮被固定页脚压住一半；横滑导航又和右侧入口贴在一起。
   两条都在这里收口：① 窄屏给入口一条分隔线；② 矮屏按真实页脚高度让位。 */
@media (min-width: 48.8rem) and (max-width: 1180px) {
  body .nav-side {
    padding-left: 0.6rem;
    border-left: 1px solid var(--sg-border-decor);
  }
  body .stage { height: calc(100vh - 3.2rem); }
}

@media (min-width: 48.8rem) and (max-height: 44rem) {
  body .stage {
    height: calc(100vh - 4.5rem);
    padding-top: 4.25rem;
  }
  body .side-col { gap: 0.5rem; padding-top: 0; }
  body .footer {
    padding: 0.3rem clamp(0.5rem, 2vw, 1rem);
    gap: 0.15rem 0.55rem;
    font-size: 0.6875rem;
  }
  body #inputCol .q-input,
  body #inputCol textarea { min-height: 3.25rem; }
  body .btn-cast { padding: 0.6rem 0; }

  /* 矮屏的支付面板：把「确认支付」挤进第一屏，不让它藏在滚动里（滚动条全站隐藏） */
  body .pay-panel { padding: 1rem 1.25rem 0.75rem; }
  body .pay-panel h3 { font-size: 1rem; letter-spacing: 0.12em; margin-bottom: 0.15rem; }
  body .pay-sub { font-size: 0.7rem; margin-bottom: 0.5rem; }
  .sg-pay-peek { padding: 0.4rem 0.6rem 0.9rem; margin-bottom: 0.6rem; }
  .sg-pay-peek p { font-size: 0.66rem; line-height: 1.35; margin: 0 0 0.15em; }
  body .pay-plans { gap: 0.4rem; margin-bottom: 0.6rem; }
  body .pay-plan { padding: 0.5rem 0.2rem; }
  body .pay-plan .pp-name,
  body .pay-plan .pp-note { font-size: 0.66rem; }
  body .pay-plan .pp-price { font-size: 1.25rem; margin: 0.15rem 0; }
  body .pay-methods { gap: 0.35rem; margin-bottom: 0.6rem; }
  body .pay-method { padding: 0.45rem 0.1rem; font-size: 0.66rem; }
  body .pm-ico { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 0.7rem; margin-bottom: 0.2rem; }
  body .pay-confirm { padding: 0.6rem 0; font-size: 0.95rem; letter-spacing: 0.3em; }
  body .pay-invite { margin-top: 0.5rem; }
}

/* 极矮视口（如 1366×768@200%）：模糊预览先让位给支付按钮；
   面板自身给一条细滚动条——全站隐藏滚动条的规矩在这里必须破一次，
   否则「确认支付」藏在看不见的滚动区里。 */
@media (max-height: 30rem) {
  .sg-pay-peek { display: none; }
  body .pay-panel { max-height: calc(100vh - 0.75rem); }
}
body .pay-panel { scrollbar-width: thin; scrollbar-color: var(--sg-border) transparent; }
body .pay-panel::-webkit-scrollbar { width: 0.375rem; height: 0; display: block; }
body .pay-panel::-webkit-scrollbar-thumb { background: var(--sg-border); border-radius: 0.1875rem; }

/* ---------- 6. 状态表（0.4 第六节）：hover / focus / active / disabled ---------- */
body .btn-cast:hover,
body .pay-confirm:hover,
body .btn-primary:hover { opacity: 0.94; }
body .btn-cast:active,
body .pay-confirm:active { transform: scale(0.99); }
body .btn-cast:disabled,
body .pay-confirm:disabled,
body button:disabled,
body input:disabled,
body select:disabled,
body textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- 页面容器（0.4 统一：Hero 与导航左右对齐，不再各写一套 padding） ---------- */
.sg-container {
  width: 100%;
  max-width: var(--sg-container-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 2vw, 1.625rem);
  box-sizing: border-box;
}

/* ============================================================
   静态页共用件（首页 / 词典 / 关于 都吃这套，0.4 第五、六节）
   —— 这些类只出现在 sg- 页面里，不会命中工具台
   ============================================================ */
.sg-header {
  position: sticky; top: 0; z-index: 20;
  min-height: clamp(3.5rem, 6vh, 4.5rem);
  background: hsla(40, 20%, 98%, .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sg-border-decor);
  display: flex; align-items: center;
}
.sg-header-inner {
  max-width: var(--sg-container-width); margin: 0 auto; width: 100%;
  padding: 0 clamp(1rem, 2vw, 1.625rem);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sg-space-3);
}
.sg-brand { display: flex; flex-direction: column; flex-shrink: 0; text-decoration: none; color: inherit; }
.sg-brand-title { font-family: var(--sg-serif); font-weight: 600; font-size: 1.3rem; letter-spacing: .25em; line-height: 1.1; color: var(--sg-text); }
.sg-brand-sub { font-size: .65rem; color: var(--sg-text-3); letter-spacing: .15em; }
.sg-nav { min-width: 0; }
.sg-nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.sg-nav-links a {
  flex: 0 0 auto; position: relative; text-decoration: none;
  color: var(--sg-text-2); font-size: var(--sg-fs-body);
  padding: var(--sg-space-1) 0; transition: color .2s ease;
}
.sg-nav-links a::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--sg-accent); transition: width .25s cubic-bezier(.4, 0, .2, 1);
}
.sg-nav-links a:hover, .sg-nav-links a[aria-current="page"] { color: var(--sg-text); }
.sg-nav-links a:hover::after, .sg-nav-links a[aria-current="page"]::after { width: 100%; }
@media (max-width: 46rem) {
  .sg-nav { overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .sg-nav::-webkit-scrollbar { display: none; }
}

.sg-footer {
  border-top: 1px solid var(--sg-border-decor);
  padding: clamp(1rem, 4vh, 1.75rem) 0;
  text-align: center; font-size: var(--sg-fs-caption); color: var(--sg-text-3);
}

/* 静态页统一 border-box（这些页不加载 style.css，没有全局 reset） */
.sg-container, .sg-header, .sg-header-inner, .sg-content-page, .sg-sidebar, .sg-article-body,
.sg-hero-section, .sg-cards-wrapper, .sg-result-layout, .sg-modal-card { box-sizing: border-box; }

/* 词典 / 关于：左目录 + 右正文 */
.sg-content-page {
  display: flex; gap: var(--sg-space-5);
  padding-top: var(--sg-space-6); padding-bottom: var(--sg-space-6);
  align-items: flex-start;
}
.sg-sidebar {
  width: 16rem; flex-shrink: 0;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-decor);
  border-radius: var(--sg-radius-lg);
  padding: var(--sg-space-4);
}
.sg-sidebar-title { font-family: var(--sg-serif); font-size: var(--sg-fs-h3); color: var(--sg-text); margin: 0 0 var(--sg-space-3); font-weight: 500; }
.sg-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sg-sidebar-list a { text-decoration: none; color: var(--sg-text-2); font-size: var(--sg-fs-body); transition: color .2s; }
.sg-sidebar-list a:hover, .sg-sidebar-list a[aria-current="page"] { color: var(--sg-accent-ink); font-weight: 500; }
.sg-article-body {
  flex: 1; min-width: 0;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-decor);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-card);
  padding: clamp(var(--sg-space-4), 5vw, var(--sg-space-6));
}
.sg-article-title { font-family: var(--sg-serif); font-size: var(--sg-fs-h2); color: var(--sg-text); margin: 0 0 var(--sg-space-3); font-weight: 500; }
.sg-article-p { font-size: var(--sg-fs-body); color: var(--sg-text-2); line-height: var(--sg-lh-loose); margin: 0 0 var(--sg-space-3); }
@media (max-width: 48rem) {
  .sg-content-page { flex-direction: column; }
  .sg-sidebar { width: 100%; }
}
/* ---------- 工具台：一屏一焦点（0.1 第六节：整页只留一个视觉焦点，周围大量留白） ----------
   不要给左右两栏加卡片底：左栏是表单、右栏是竖排卦辞，
   套上白卡会变成两块空盒子，反而抢焦。卡片语言只用在「结果面板」上。 ---------- */
body #mainPanel {
  border-radius: var(--sg-radius-lg);
}
/* ============================================================
   按 Gemini 建议 0.1（回应 0.7 四问）落地
   —— 问题 3：≤683 导航横滑、高度锁 65px，不换行、不下推
   —— 问题 4：左栏 ≤210px 时三切换改竖排、输入 38px、起卦按钮 ≥44px
   ============================================================ */
@media (max-width: 48.8rem) {
  body .nav { height: var(--sg-nav-h); min-height: var(--sg-nav-h); }
  body .nav-inner {
    height: var(--sg-nav-h);
    flex-wrap: nowrap;
    padding: 0 0.6rem;
    gap: 0.4rem;
  }
  body .nav-links { order: 0; flex: 1 1 auto; height: auto; margin: 0; border-top: 0; }
  body .nav .logo-sub { display: none; }
  /* 站内移动端原来把内容顶到 156px，导航改回 65px 后这段空白要收掉 */
  body .stage { padding-top: 4.75rem; }
}

/* 左栏窄态（911×512 时实测 206px） */
@media (max-width: 61rem) {
  body #inputCol .seg-wrap { padding: 0; background: none; border: 0; box-shadow: none; margin-bottom: 0.5rem; }
  body #inputCol .seg-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: none;
  }
  body #inputCol .seg-btn {
    width: 100%;
    text-align: left;
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    letter-spacing: 0.08em;
    background: var(--sg-bg);
    border: 1px solid var(--sg-border-decor);
    border-radius: var(--sg-radius-sm);
    color: var(--sg-text-2);
    box-shadow: none;
  }
  body #inputCol .seg-btn.active {
    background: var(--cinnabar, #B23A2E);
    border-color: var(--cinnabar, #B23A2E);
    color: #FFFFFF;
  }
  body #inputCol .q-input,
  body #inputCol textarea,
  body #inputCol .btn-input {
    min-height: 2.375rem;
  }
  body #inputCol .btn-cast {
    min-height: 2.75rem;
    padding: 0.6rem 0;
    font-size: 0.9375rem;
    letter-spacing: 0.3em;
  }
  body #inputCol .side-label,
  body #inputCol .daily-value { font-size: 0.6875rem; }
}

/* ---------- 付费弹窗（0.2 第八段：单次尝鲜优先，会员退到第二层） ---------- */
body .pay-plans {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
body .pay-plan[data-plan="单次"] {
  padding: 0.9rem 0.75rem;
  background: linear-gradient(180deg, rgba(197, 160, 89, .10), rgba(197, 160, 89, .03));
}
body .pay-plan[data-plan="单次"] .pp-price { font-size: 2rem; }
body .pay-member-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
body .pay-member-wrap[hidden] { display: none; }
body .pay-more-plans {
  display: block;
  width: 100%;
  margin: -0.35rem 0 0.9rem;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--sg-fs-caption);
  color: var(--sg-accent-ink);
  letter-spacing: 0.06em;
}
body .pay-more-plans:hover { color: var(--sg-text); }
/* 单次解锁卡：去掉站内旧的发光描边，只留一圈琥珀细边 */
body .pay-plans .pay-plan:not(:focus-visible) { outline: none; }
body .pay-plan.selected {
  border-color: var(--sg-accent-ink);
  background: rgba(197, 160, 89, .08);
  box-shadow: none;
}
body .pay-plan[data-plan="单次"].selected {
  background: linear-gradient(180deg, rgba(197, 160, 89, .14), rgba(197, 160, 89, .04));
}
/* 面板整体再收一点，让「演示环境」那行也进得来 */
body .pay-panel { max-height: min(94vh, 50rem); padding: 1.25rem 1.5rem 1rem; }
body .pay-panel h3 { margin-bottom: 0.25rem; }
body .pay-sub { margin-bottom: 0.75rem; }
.sg-pay-peek { padding: 0.5rem 0.75rem 1rem; margin-bottom: 0.75rem; }
body .pay-methods { margin-bottom: 0.75rem; }
body .pay-plans { margin-bottom: 0.5rem; }
body .pay-invite { margin-top: 0.5rem; }
/* 回流提醒定位到的那条记录：闪两下朱砂描边，让人一眼看到 */
body .hist-item.hist-flash { box-shadow: 0 0 0 2px var(--cinnabar), var(--sg-shadow-card); transition: box-shadow .2s ease; }
/* ---------- 语言切换按钮（导航右侧，纯文字，跟随导航字号） ---------- */
body .lang-btn {
  flex: 0 0 auto;
  padding: 0.25rem 0.4rem;
  margin-right: 0.25rem;
  border: 1px solid var(--sg-border-decor);
  border-radius: var(--sg-radius-sm);
  background: transparent;
  color: var(--sg-text-2);
  font-family: var(--sans);
  font-size: clamp(0.78rem, 0.95vw, 0.9375rem);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body .lang-btn:hover { color: var(--sg-text); border-color: var(--sg-accent); }
/* ---------- 免责/隐私正文：中文排版首行缩进两字 ---------- */
body .legal-body p,
body .legal-p {
  text-indent: 2em;
  margin: 0 0 0.6em;
  line-height: var(--sg-lh-loose);
}
body .legal-body h3 { text-indent: 0; }
body .sg-footer-link { color: var(--sg-text-3); text-decoration: none; border-bottom: 1px dotted var(--sg-border-decor); }
body .sg-footer-link:hover { color: var(--sg-accent-ink); border-color: var(--sg-accent); }

/* E01 浅灰文字加深：占位符、辅助小字、免责小字统一到 4.5:1 以上 */
body ::placeholder { color: #6B6660; opacity: 1; }
body .sg-hero-sub, body .sg-card-desc, body .sg-footer, body .sg-footer-copy,
body .pay-sub, body .pay-note, body .sg-legal-meta, body .legal-p {
  color: #6B6660;
}
body .sg-watermark, body .sg-bg-mark { color: #8A8A8A; }

/* ===== B05 英文排版（只在 data-locale="en" 生效；中文版一行不动） =====
   依据 Desktop\易算阁风格\回帖-B05（Gemini），选择器按实站类名校正：
   合规页正文是 .sg-legal-p（不是 .legal-page p），价格是 .pp-price（不是 .price）。
   2026-11-01 实测修正：本站字号是 em 链（.stage-sub 14.5px、.pay-sub 12.5px…），
   `calc(1em + 0.0625rem)` 会把 36px 主标题压成 18px，所以**不改字号**，
   只换字体栈 / 行高 / 行宽 / 断词——英文变好看，中文一个字不动。 */
html[data-locale="en"] {
  --font-en-serif: Georgia, "Source Serif Pro", "Noto Serif", serif;
  --font-en-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[data-locale="en"] body { font-family: var(--font-en-sans); }

/* 标题：衬线栈 + 行高 1.15 + 字距收紧 + 24ch 换行 */
html[data-locale="en"] h1,
html[data-locale="en"] h2,
html[data-locale="en"] h3,
html[data-locale="en"] .stage-title,
html[data-locale="en"] .sg-legal-title,
html[data-locale="en"] .sg-legal-h2,
html[data-locale="en"] .pay-panel h3 {
  font-family: var(--font-en-serif);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 24ch;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 正文：西文无衬线栈 + 行高 1.7 + 68ch + 断词 */
html[data-locale="en"] p,
html[data-locale="en"] li,
html[data-locale="en"] .stage-sub,
html[data-locale="en"] .sg-card-desc,
html[data-locale="en"] .pay-sub,
html[data-locale="en"] .text-body {
  font-family: var(--font-en-sans);
  line-height: 1.7;
  max-width: 68ch;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 合规 / 条款正文放宽到 72ch */
html[data-locale="en"] .sg-legal-p { max-width: 72ch; }

/* 辅助小标签：只展字距，不改字号（字号走 em 链，改了会缩水） */
html[data-locale="en"] .sg-legal-meta,
html[data-locale="en"] .pay-hint,
html[data-locale="en"] .pp-note,
html[data-locale="en"] .caption,
html[data-locale="en"] .badge { letter-spacing: 0.08em; }

/* 价格：等宽数字 + 不折行（$9.9 不会被拆两行） */
html[data-locale="en"] .pp-price,
html[data-locale="en"] [data-i18n-price] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 导航英文比中文长，去掉额外字距，避免挤压换行 */
html[data-locale="en"] .nav-links a,
html[data-locale="en"] .nav-side a,
html[data-locale="en"] .nav-more-btn { letter-spacing: 0; }
/* 中文的字距是为方块字调的（0.3em~0.6em），英文照抄会变成「B i r t h  t i m e」。
   英文下把三个操作区的字距全部复位，中栏大标题的字距由上面的标题规则另行处理。 */
html[data-locale="en"] #inputCol,
html[data-locale="en"] #inputCol *,
html[data-locale="en"] #mainPanel,
html[data-locale="en"] #mainPanel *,
html[data-locale="en"] #resultPanel,
html[data-locale="en"] #resultPanel * { letter-spacing: normal; word-spacing: normal; }

/* ============================================================
   2026-11-02 · P0 收口（只在末尾追加，上面任何原规则一行未改）
   ─────────────────────────────────────────────────────────────
   P0-1 整页发白：
     · body 背景里那条 radial-gradient(1100px 300px at 50% 103%,
       rgba(255,255,255,.7), …) 与整条晨雾白带一并去掉；
     · 宽/高超过 600px 的白色渐变不再出现（不透明度 < 0.1 即等同去掉）；
     · 纸底三段压成近色，避免首尾亮度差过大。
   P0-2 顶部导航：主链左起，右侧功能区由 margin-left:auto 顶到右缘，
       主链与右侧之间保底 48px；≤1280 搜索收成图标；≤480 只留 EN + 登录。
   P0-3 右栏：用 ID 特异性压过 p1.css 的 dashed 占位框，不参与高度计算。
       2026-11-03 第二轮：按用户要求删掉顶部那行灰字占位文案，
       空态统一由正文负责，不再用 ::before 补字。
   ============================================================ */

/* ---------- P0-1：去掉白色渐变层，纸底压平 ---------- */
body:not([data-theme]) {
  background-color: #FAF6EE;
  background-image:
    radial-gradient(900px 560px at 86% -12%, rgba(204, 213, 174, .08), rgba(204, 213, 174, 0) 64%),
    radial-gradient(820px 520px at 2% 110%, rgba(212, 163, 115, .04), rgba(212, 163, 115, 0) 62%),
    linear-gradient(162deg, #FCFAF5 0%, #FBF9F3 52%, #FAF7F1 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body[data-theme="heal"] {
  background-color: #FAF6EE;
  background-image:
    radial-gradient(900px 560px at 86% -12%, rgba(204, 213, 174, .08), rgba(204, 213, 174, 0) 64%),
    radial-gradient(820px 520px at 2% 110%, rgba(212, 163, 115, .04), rgba(212, 163, 115, 0) 62%),
    linear-gradient(162deg, #FCFAF5 0%, #FBF9F3 52%, #FAF7F1 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---------- P0-2：导航重新分配宽度 ---------- */
body .nav-inner {
  flex-wrap: nowrap;
  column-gap: 0;
}
body .nav-links {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: clamp(16px, 1.6vw, 28px);
  margin-left: clamp(16px, 1.6vw, 28px);
  margin-right: 48px;          /* 与右侧功能区的最小间距，auto 外边距只会加不会减 */
  min-width: 0;
}
body .nav-search {
  flex: 0 0 clamp(150px, 14vw, 220px);
  width: clamp(150px, 14vw, 220px);
  margin-left: auto;           /* 右侧功能区整体顶到右缘 */
  margin-right: clamp(12px, 1.2vw, 20px);
}
body .nav-side {
  flex: 0 0 auto;
  gap: clamp(12px, 1.2vw, 20px);
}

/* ≤1280：搜索框收成图标（聚焦时再展开，能看见输入内容） */
@media (max-width: 1280px) {
  body .nav-search {
    display: block;            /* 压过 style.css ≤1200 的 display:none */
    flex: 0 0 2.75rem;
    width: 2.75rem;
    margin-right: clamp(12px, 1.2vw, 20px);
  }
  body .nav-search input {
    width: 100%;
    padding: 0;
    text-indent: -9999px;
    border-radius: 999px;
    background: var(--sg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6660' stroke-width='1.7'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat;
    cursor: pointer;
  }
  body .nav-search:focus-within {
    flex: 0 0 clamp(150px, 14vw, 220px);
    width: clamp(150px, 14vw, 220px);
  }
  body .nav-search:focus-within input {
    text-indent: 0;
    padding: 0 12px 0 34px;
    border-radius: var(--sg-radius);
    background-image: none;
    cursor: text;
  }
}

/* ≤480：主链横向可滚，右侧只留 EN + 登录 */
@media (max-width: 480px) {
  body .nav-search { display: none; }
  body .nav-links {
    flex: 1 1 auto;
    margin-right: 48px;
    overflow-x: auto;
  }
  body .nav-side { margin-left: auto; }
  body .nav-side > :not(#langToggle):not(#navAccount) { display: none !important; }
}

/* ---------- P0-3：右栏虚线占位框 → 去边框，不再补灰字 ---------- */
@media (min-width: 912px) {
  body .side-col:last-child #resultPanel {
    border: 0 !important;
    border-radius: 0;
  }
  /* 2026-11-03 用户：「叁」下面那句灰字占位文案删掉，与整体不搭。 */
}

/* ============================================================
   全站下拉箭头（2026-11-03 第四轮 · 对照组：全站 select 清单）
   根因：m05.css `body #inputCol select{background:#FFFFFF}` 用 background
   简写把 `.btn-input select` 的箭头背景图整条覆盖 → 工具台各模块 select
   虽然 appearance:none，实测 background-image=none（没有箭头）；
   落地页 `.sg-calc-input` 又是原生 appearance，三档箭头形态不一致。
   修法：只补 background-image（带 !important，压过简写），底色/渐变仍归
   原规则管；左右 28px 给箭头留安全区，文字仍居中、不压字。
   ============================================================ */
body select:not([multiple]):not([size]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23A8894E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 8px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
/* 焦点态：箭头随边框一起变朱红（键盘 Tab 聚焦同样生效） */
body select:not([multiple]):not([size]):focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23B23A2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
/* 禁用态：箭头退成中性灰，避免「看着还能点」 */
body select:not([multiple]):not([size]):disabled {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%238A8A8A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  opacity: .62;
  cursor: not-allowed;
}
/* 通用模块旧实现是 .gi-row::after 的 ▾ 字符三角，已统一成背景箭头 → 去重 */
body .gi-row:has(> select)::after { content: none !important; }