/* ============================================================================
   content.css — 内容页 / 工具页 / 文章页的视觉系统(v6 亮色母站同源)

   2026-09-13:本文件取代 assets/blog.css。blog.css 是 08-31 v6 亮色改版**之前**的
   暗色终端系统("glass-term"),改版只动了母站与六条产品线首页,219 张内容页留在旧系统里,
   而 09-02 建的 family.html.mjs 又把 blog.css 写进了新页骨架 —— 于是每建一批新页就
   多一批暗色页。统一到 v6 的办法是把这一层换成亮色,而不是逐页重做。

   设计取值全部来自 design/site/index.html 的 v6 母站 :root,不新造色。
   类名与 blog.css 完全一致(.glass / .tbar / .btn / .navlink / .prose / .glow-* …),
   所以页面结构不用改,只改这一层 + 页面内联色值(见 design/relight.mjs)。

   一条核心规则:**页面是亮的,终端是暗的。**
   v6 母站自己就是这么做的(index.html 的 .win-code / .step pre 都是 #1d2433 暗块
   嵌在奶油底上)。所以 <pre> 仍然是暗色终端块,其余一切走亮色。
   ========================================================================== */

:root {
  /* —— v6 母站 token(与 index.html :root 逐字一致)—— */
  --bg: #fdf9f2; --card: #fff; --ink: #2b3040; --ink2: #6b7280; --ink3: #9aa0ad;
  --teal: #0e7490; --teal-deep: #0b5c73; --teal-soft: #e0f2f6;
  --coral: #e8836b; --coral-soft: #fdeae4; --butter: #f7c948; --butter-soft: #fdf3d7;
  --sage-soft: #e8f2e4; --line: #f0e9dc; --line-s: #e7ddca;
  --shadow: 0 2px 4px rgba(43,48,64,0.05), 0 12px 32px rgba(43,48,64,0.07);
  --shadow-s: 0 1px 2px rgba(43,48,64,0.04), 0 6px 18px rgba(43,48,64,0.05);

  /* 产品色(与 index.html 产品卡 border-top-color 一致) */
  --p-inbox: #0e7490; --p-storefront: #b8860b; --p-sites: #7c5cbf;
  --p-domains: #15a370; --p-seo: #c2437f; --p-media: #e07856;

  /* 终端块内部(v6 的 .win-code / .step pre) */
  --term-bg: #1d2433; --term-bar: #161c29; --term-fg: #d7dce6;
  --term-dim: #9aa5b8; --term-cmt: #7c8698; --term-cmd: #5ef38c; --term-ref: #7ee0ff;

  /* 语义色 */
  --warn: #b8860b; --err: #c0392b; --ok: #15a370;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative;
}
h1, h2, h3, h4, .brand, .btn, .btn-solid { font-family: "Nunito", "Inter", sans-serif; }
h1 { font-weight: 900; letter-spacing: -0.02em; }
h2, h3, h4 { font-weight: 800; letter-spacing: -0.015em; }
code, pre, kbd, samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
a { color: var(--teal); text-decoration: none; }
img { max-width: 100%; }

/* 暗色系里的两件装置在亮色下没有意义:CRT 扫描线退役,发光改为无操作(类名仍在页面上) */
.scanlines { display: none !important; }
.glow-g, .glow-c, .glow-m, .glow-y, .glow-fg { text-shadow: none; }
.rel { position: relative; z-index: 1; }

/* ── 卡片 ──────────────────────────────────────────────────────────────── */
.glass {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-s); overflow: hidden;
}
/* 粘性头部 / 底部那层壳:奶油底 + 毛玻璃,不是白卡片 */
.glass-s {
  background: rgba(253,249,242,0.92); border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.card-hover { transition: border-color .15s, box-shadow .15s, transform .15s; }
.card-hover:hover { border-color: var(--line-s); box-shadow: var(--shadow); transform: translateY(-2px); }

/* 卡片标题条(原终端标题栏)。三个圆点保留 —— v6 母站的 .win-bar 也有 */
.tbar {
  border-bottom: 1px solid var(--line); background: #faf6ee;
  padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; color: var(--ink2);
}
.dot-r, .dot-y, .dot-g { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-r { background: #ff5f57; } .dot-y { background: #febc2e; } .dot-g { background: #28c840; }

/* ── 终端块:页面唯一保留暗色的地方 ──────────────────────────────────────── */
pre {
  max-width: 100%; overflow-x: auto;
  background: var(--term-bg); color: var(--term-fg);
  border-radius: 12px; padding: 0.85rem 1rem; line-height: 1.7;
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
/* 少数页面把 .glass 直接挂在 <pre> 上(卡片式命令块)—— 类选择器会压过元素选择器,显式顶回来 */
pre.glass { background: var(--term-bg); color: var(--term-fg); border-color: #2c3546; }
/* 标题条正下方的终端块与卡片贴合(工具页/CTA 卡的惯用结构) */
.tbar + pre, .tbar + div > pre:first-child { border-radius: 0 0 12px 12px; }

/* ── 页面外壳:与 v6 产品页(index.html / seo/index.html)逐条同值 ─────────── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(253,249,242,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* height→min-height:族页的 nav 带十几条兄弟工具时会折行,固定高度会把它裁掉 */
.nav-in { max-width: 68rem; margin: 0 auto; padding: 0.55rem 1.5rem; min-height: 4.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 0.4rem; font-weight: 900; font-size: 1.15rem; color: var(--ink); white-space: nowrap; }
.brand .co { color: #a8adba; font-weight: 800; }
.nav-r { display: flex; align-items: center; gap: 1.4rem; font-size: 0.92rem; font-weight: 600; flex-wrap: wrap; }
.nav-r a { color: var(--ink2); }
.nav-r a:hover { color: var(--ink); }
.nav-r a[aria-current] { color: var(--teal); }
/* 族页的 nav 会带上同 hub 的兄弟工具(最多十来条),密一档才放得下;母站的 nav 不受影响 */
.nav-r.dense { gap: 0.95rem; font-size: 0.82rem; row-gap: 0.35rem; }
.nav-r.dense .btn, .nav-r.dense .btn-solid { padding: 0.42rem 0.95rem; font-size: 0.8rem; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
footer { border-top: 1px solid var(--line); background: #faf6ee; padding: 2.2rem 0; margin-top: 4rem; }
.foot { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: #9aa0ad; }
.foot a { color: #9aa0ad; margin-left: 1.1rem; }
.foot a:hover { color: var(--ink); }
@media (max-width: 640px) { .foot a { margin: 0 1.1rem 0 0; } }

/* ── 按钮(v6:.btn 实心药丸 / .btn-ghost 描边;.btn-solid 是暗色系遗留别名)── */
.btn, .btn-solid {
  display: inline-block; border: 0; background: var(--teal); color: #fff !important;
  font-family: "Nunito", "Inter", sans-serif; font-weight: 800;
  padding: 0.65rem 1.4rem; border-radius: 999px; font-size: 0.95rem;
  text-decoration: none; text-align: center; white-space: nowrap;
  box-shadow: 0 4px 0 var(--teal-deep); transition: transform .08s, box-shadow .08s;
}
.btn:active, .btn-solid:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--teal-deep); }
.btn:focus-visible, .btn-solid:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.btn-ghost {
  display: inline-block; color: var(--ink); background: #fff; border: 2px solid var(--ink);
  font-family: "Nunito", "Inter", sans-serif; font-weight: 800;
  padding: 0.65rem 1.4rem; border-radius: 999px; font-size: 0.95rem; text-decoration: none; white-space: nowrap;
}
/* nav 里的 CTA 比正文的小一号 */
.nav-r .btn, .nav-r .btn-solid { padding: 0.5rem 1.1rem; font-size: 0.88rem; box-shadow: 0 3px 0 var(--teal-deep); }

.navlink { color: var(--ink2); text-decoration: none; font-weight: 600; transition: color .12s; }
.navlink:hover { color: var(--ink); }
.navlink[aria-current] { color: var(--teal); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
::selection { background: var(--teal-soft); color: var(--ink); }

/* 暗色系的分隔线是一整行 ── 字符。亮色下收成一条真的细线,字符本身藏起来(不动 HTML)。 */
.sep { display: block; height: 0; font-size: 0; line-height: 0; color: transparent; overflow: hidden; border-top: 1px solid var(--line); }
.cursor {
  display: inline-block; width: 0.58em; height: 1em; background: var(--teal);
  vertical-align: -0.14em; margin-left: 0.1em; animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* ── 正文 ──────────────────────────────────────────────────────────────── */
.prose { color: var(--ink); font-size: 1.02rem; line-height: 1.8; }
.prose p { margin: 1.15em 0; }
.prose h2 {
  font-family: "Nunito", "Inter", sans-serif; font-weight: 800;
  color: var(--ink); font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.015em;
  margin: 2.4em 0 0.7em; padding-top: 1.1em; border-top: 1px solid var(--line);
}
.prose h3 {
  font-family: "Nunito", "Inter", sans-serif; font-weight: 800;
  color: var(--ink); font-size: 1.14rem; margin: 1.9em 0 0.5em;
}
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { color: var(--teal-deep); font-style: normal; font-weight: 600; }
.prose ul, .prose ol { margin: 1.15em 0; padding-left: 1.5em; }
.prose ul { list-style: none; }
.prose li { margin: 0.5em 0; position: relative; }
.prose ul > li::before {
  content: "▪"; color: var(--teal); position: absolute; left: -1.15em; top: -0.02em; font-size: 0.9em;
}
.prose blockquote {
  margin: 1.6em 0; padding: 0.9em 1.2em; border-left: 3px solid var(--teal);
  background: var(--teal-soft); border-radius: 0 12px 12px 0; color: var(--ink);
}
.prose blockquote p { margin: 0.3em 0; }
.prose code {
  color: var(--teal-deep); background: #f4efe4; border: 1px solid var(--line);
  padding: 0.08em 0.4em; border-radius: 5px; font-size: 0.88em;
}
.prose pre { margin: 1.5em 0; font-size: 0.86rem; }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--teal-deep); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 1.6em 0; }
.prose th {
  font-family: "Nunito", sans-serif; font-weight: 800; color: var(--teal-deep);
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: left;
  padding: 0.5rem 0.6rem; border-bottom: 2px solid var(--line);
}
.prose td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* ── 滚动条 ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-s); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink3); }
pre::-webkit-scrollbar-track { background: var(--term-bar); }
pre::-webkit-scrollbar-thumb { background: #3a4356; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; opacity: 1; }
  .card-hover:hover { transform: none; }
}

/* 窄屏:粘性 nav 的 min-content 宽度曾把整页撑过 375px(2026-09-02 根因),让它折行。
   !important 是必要的 —— 多数页面把 nav 的 height/display 写成内联样式。 */
@media (max-width: 640px) {
  header nav { height: auto !important; min-height: 3.4rem; flex-wrap: wrap !important; row-gap: 0.25rem; padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; }
  header nav > div { flex-wrap: wrap !important; gap: 0.3rem 0.85rem !important; }
  header nav .btn, header nav .btn-solid { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
  .prose h2 { font-size: 1.32rem; }
}