/* ==========================================================================
   见月导航 — 站点样式表
   这一份就是最终实现的 CSS，改样式只需要改这一处。

   2026-09-25 二轮移植（阿墨）：把 nav-preview.html 的【方案 D 天光玻璃】
   整套布局落进来，不是只换配色 ——
     · 背景：浅蓝渐变 + 三颗固定光斑（.blobs），暗色切深空版
     · 所有面板半透明玻璃（--card rgba 白 .58）+ backdrop-filter:blur(12px)
     · 顶栏：毛玻璃 sticky，logo 标记 + 双模式搜索（5 引擎）+ 动作按钮
     · 首页：无 hero 大搜索框，细带 heroband + 分类 chips + 单列分组墙
     · 分组头：色条 gbar（--gc + 光晕）+ 计数 + 二级分类 tab + 更多
     · 卡片：横向结构（图标 | 标题/描述/收录行），静止玻璃边，hover 蓝边
     · 原右侧栏整体降级到卡片墙底部，一行自动分栏
   选中态仍是「豆包式渐变胶囊 + 白字 + 同色光晕」；图标规则不变
   （有 favicon 裸图、无 favicon 首字色块）；卡片 hover 无左侧色条。
   暗色继续走 prefers-color-scheme，前台依然接近 0 JS（顶栏搜索脚本内联）。
   ========================================================================== */

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

:root {
  --bg: #e9f3ff;            /* 兜底底色，主背景是 body 上的渐变 */
  --card: rgba(255, 255, 255, .58);   /* 玻璃面板 */
  --card-solid: #ffffff;    /* 需要不透明的地方（下拉菜单等） */
  --line: #dfe6f2;          /* 面板内部的分隔线：要看得见 */
  --line-2: #ccd8ec;        /* 输入框描边 */
  --edge: rgba(255, 255, 255, .78);   /* 玻璃面板外沿（方案 D 的白边） */

  --ink: #1b1f27;
  --ink-2: #5b6472;
  --ink-3: #8b94a3;

  --brand: #2f6bff;        /* 装饰用主色：光晕、进度条、边框 */
  --brand-ink: #2159d8;    /* 主色文字：白底上 6:1，可读 */
  --brand-solid: #2f6bff;  /* 压白字的色块底（选中态药丸、按钮） */
  --brand-soft: #eaf1ff;   /* 主色浅底：hover 底色 */
  --brand-glow: rgba(47, 107, 255, .30); /* 选中态光晕 */

  --tag-bg: rgba(255, 255, 255, .62);
  --tag-ink: #5b6472;
  --chip: #f0f2f5;
  --hover: rgba(255, 255, 255, .72);

  --prose-ink: #3d434c;
  --code-ink: #b8483d;
  --code-bg-ink: #33415c;

  --rec-bg: rgba(47, 107, 255, .06);
  --rec-line: rgba(47, 107, 255, .20);

  --ann-bg: rgba(255, 255, 255, .66); --ann-line: #dceaff;   --ann-ink: #3c5a8f;
  --warn-bg: #fff8f0;  --warn-line: #ffe4c7;  --warn-ink: #a8642a;
  --ok-bg: #eaf6ee;    --ok-line: #cfe8d9;    --ok-ink: #2f6b48;
  --bad: #e5484d;
  --bad-soft: #fdeaec;

  --r-card: 14px;
  --r-tag: 6px;
  --r-sm: 10px;
  /* 方案 D 的浮影：静止就是一层柔蓝浮空，hover 加深 */
  --shadow: 0 16px 34px rgba(61, 155, 255, .22);
  --shadow-rest: 0 8px 24px rgba(61, 155, 255, .10);
  --grid-min: 238px;
  --gap: 16px;
  --card-pad: 16px;

  --hero-glow: rgba(47, 107, 255, .14);
  --blur: blur(12px);
}

/* 跟随系统暗色。深空版：变量覆盖 + 深蓝径向背景，其余规则不动。 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #071c3a;
    --card: rgba(22, 42, 74, .55);
    --card-solid: #16223a;
    --line: rgba(255, 255, 255, .10);
    --line-2: rgba(140, 190, 255, .22);
    --edge: rgba(140, 190, 255, .16);

    --ink: #e8eaee;
    --ink-2: #a2abb8;
    --ink-3: #6d7787;

    --brand-ink: #7aa7ff;
    --brand-soft: #1b2740;
    --brand-glow: rgba(80, 140, 255, .35);

    --tag-bg: rgba(255, 255, 255, .07);
    --tag-ink: #a2abb8;
    --chip: #20242b;
    --hover: rgba(255, 255, 255, .07);

    --prose-ink: #c9d1da;
    --code-ink: #ff9b8f;
    --code-bg-ink: #c3cbd6;

    --hero-glow: rgba(80, 140, 255, .22);
    --rec-bg: rgba(80, 140, 255, .08);
    --rec-line: rgba(124, 196, 255, .24);

    --ann-bg: rgba(20, 32, 46, .72); --ann-line: #24374f;   --ann-ink: #a8c2ea;
    --warn-bg: #241b16;  --warn-line: #3b2a1f;  --warn-ink: #e2b48f;
    --ok-bg: #16211a;    --ok-line: #24382c;    --ok-ink: #93c2a6;
    --bad: #ff8f85;
    --bad-soft: #3a1f1e;

    --shadow: 0 16px 34px rgba(0, 0, 0, .5);
    --shadow-rest: 0 8px 24px rgba(0, 0, 0, .35);
  }
}

html { background: #e6f5ff; }
html, body {
  color: var(--ink);
  font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei",
               -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* 方案 D 的天光底：浅蓝渐变铺满视口、不随滚动跑 */
body {
  background: linear-gradient(160deg, #e6f5ff 0%, #f2faff 42%, #dff0ff 100%) fixed;
}
@media (prefers-color-scheme: dark) {
  html { background: #071c3a; }
  body {
    background: radial-gradient(1200px 800px at 20% -10%, #14417f 0%, #0b2b57 45%, #071c3a 100%) fixed;
  }
}

/* 背景光斑：三颗大模糊圆，固定在内容后面 */
.blobs {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob.b1 { width: 520px; height: 520px; background: #a6d4ff; top: -160px; left: -120px; }
.blob.b2 { width: 420px; height: 420px; background: #c9e8ff; top: 30%; right: -140px; }
.blob.b3 { width: 380px; height: 380px; background: #e0f3ff; bottom: -120px; left: 30%; }
@media (prefers-color-scheme: dark) {
  .blob.b1 { background: #123a72; opacity: .55; }
  .blob.b2 { background: #164a8f; opacity: .5; }
  .blob.b3 { background: #0f2f5e; opacity: .5; }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }


/* ---------------- 顶栏（方案 D：毛玻璃 sticky，logo | 双模式搜索 | 动作） ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--edge);
}
.top-in {
  max-width: 1280px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.topbar .logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; white-space: nowrap;
}
.topbar .logo .mark {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--brand-solid); color: #fff; font-size: 15px;
  box-shadow: 0 4px 12px var(--brand-glow);
}
/* 后台填了 LOGO 就用图片替掉那个方块。
   高度锁 28px 和 .mark 对齐，宽度自适应 —— 横版透明 PNG 最常见，
   固定宽度会把字挤变形。 */
.topbar .logo .mark-img {
  height: 28px; width: auto; max-width: 120px;
  object-fit: contain; border-radius: 8px;
}

/* 搜索块：引擎行 + 圆角搜索条，竖排居中。
   2026-09-25 定稿：模式切换（搜网页 / 站内筛选）从独立一行并进搜索条本体
   （左前缀 + 竖分隔线），右上角「可见 N / M」计数按要求删除。 */
.search {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  max-width: 640px; margin: 0 auto; min-width: 0;
}
.smodes { display: flex; align-items: center; gap: 6px; }
.smode, .engine {
  font-size: 12px; padding: 3px 11px; border-radius: 99px;
  color: var(--ink-2); border: 1px solid transparent;
  background: none; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.smode:hover, .engine:hover { background: var(--hover); color: var(--ink); }
.smode.on, .engine.on {
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px var(--brand-glow);
}
/* 搜索条内的模式切换：收紧间距 + 右侧竖分隔线，跟放大镜划开 */
.sbar .smodes {
  flex: none; gap: 4px;
  padding-right: 8px; border-right: 1px solid var(--line);
}
/* 药丸自带的 12px 光晕塞进玻璃条会糊到条外 —— 收成条内一圈柔光 */
.sbar .smode.on { box-shadow: 0 2px 6px var(--brand-glow); }
.engines { display: flex; gap: 4px; flex-wrap: wrap; }
.sbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--edge);
  border-radius: 99px; padding: 6px;
  box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: border-color .15s, box-shadow .15s;
}
.sbar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 107, 255, .18); }
.sbar svg { flex: none; opacity: .5; color: var(--ink); }
.sbar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink);
}
.sbar input::placeholder { color: var(--ink-3); }
.sbar .go {
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--brand-solid); color: #fff;
  border-radius: 99px; padding: 6px 16px; font-size: 13px; font-weight: 600;
  transition: filter .15s;
}
.sbar .go:hover { filter: brightness(1.08); }

/* 右侧动作：幽灵导航 + 实心「申请收录」。
   margin-left:auto 是给手机端留的 —— ≤860px 时 .search 整行换到第二行，
   第一行只剩 logo 和这坨，没有 auto 就会全挤在 logo 右边。 */
.top-act { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.top-act nav.desk { display: flex; gap: 8px; }
.top-act nav.desk a {
  font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--edge); background: var(--card);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: background .15s, color .15s;
}
.top-act nav.desk a:hover { background: var(--hover); color: var(--ink); }
/* 三个动作按钮统一 13.5px / 7×14 / 1px 边框 —— 等高对齐（btn-main 的边框透明占位） */
.btn-main {
  font-size: 13.5px; padding: 7px 14px; border-radius: 9px;
  border: 1px solid transparent;
  background: var(--brand-solid); color: #fff; font-weight: 600;
  white-space: nowrap; transition: filter .15s;
}
.btn-main:hover { filter: brightness(1.08); }

/* 手机端汉堡菜单：details/summary 实现。
   桌面端隐藏，≤860px 时替换 .desk 导航。 */
.mnav { display: none; position: relative; }
.mnav > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: var(--card);
  transition: background .18s, color .18s;
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary:hover { background: var(--hover); color: var(--brand-ink); }
.mnav[open] > summary { background: var(--brand-soft); color: var(--brand-ink); }
.mnav > nav {
  position: absolute;
  right: 0;
  top: 46px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  background: var(--card-solid);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
}
.mnav > nav a {
  font-size: 13.5px;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 6px;
}
.mnav > nav a:hover { background: var(--hover); color: var(--brand-ink); }

/* ---------------- 分类 chips（方案 D：通栏胶囊行，带分组色圆点） ---------------- */
.quick {
  max-width: 1280px; margin: 0 auto; padding: 18px 24px 2px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.quick a {
  font-size: 13px; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--edge);
  padding: 6px 15px; border-radius: 99px;
  display: flex; align-items: center; gap: 7px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: color .15s, background .15s, border-color .15s;
}
.quick a .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.quick a:hover { background: var(--hover); color: var(--ink); }
/* 选中态 = 定稿的豆包式渐变胶囊 + 白字 + 同色光晕 */
.quick a.on {
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  border-color: transparent;
  color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px var(--brand-glow);
}
.quick a.on .dot { background: #fff !important; }
/* 首页把 chips 渲染在 .wrap 里（heroband 之后），去掉重复的容器边距；
   底部留 16px —— 预览页 chips 行下间距是 20，贴太紧下面的精选带会连成一片 */
.wrap .quick { max-width: none; margin: 0; padding: 0 0 16px; }

/* ---------------- 内容区 ---------------- */
/* 容器宽度。方案 D 的 shell 上限 1280，顶栏与内容对齐同一根轴。 */
.wrap { max-width: 1280px; margin: 0 auto; padding: 24px 24px 60px; }
.body { padding: 26px 30px 34px; }

.block { margin-bottom: 26px; }
.block:last-child { margin-bottom: 0; }
.block-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.block-hd h3 { font-size: 16px; font-weight: 600; }
.block-hd .n {
  font-size: 12px; color: var(--ink-3); background: var(--card);
  padding: 1px 9px; border-radius: 10px;
}
.block-hd .ln { flex: 1; height: 1px; background: var(--line); }
.block-hd .more { font-size: 12.5px; color: var(--ink-3); }
.block-hd .more:hover { color: var(--brand-ink); }

/* ---------------- 分组头（方案 D：色条 + 计数 + 二级 tab + 更多） ---------------- */
.groups { display: block; }
.group { margin-bottom: 30px; }
.ghead { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; flex-wrap: wrap; }
.gbar {
  width: 7px; height: 20px; border-radius: 4px; flex: none;
  background: var(--gc, var(--brand));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gc, var(--brand)) 14%, transparent);
}
.gname { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.gcount { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gmore { margin-left: auto; font-size: 12.5px; color: var(--ink-3); transition: color .15s; }
.gmore:hover { color: var(--brand-ink); }
.subs { display: flex; gap: 5px; flex-wrap: wrap; }
.sub {
  font-size: 11.5px; padding: 3px 10px; border-radius: 99px;
  color: var(--ink-3); border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.sub:hover { background: var(--hover); color: var(--ink-2); }
.sub .c { opacity: .65; font-size: 10.5px; }

/* ---------------- 卡片（方案 D 横向结构） ---------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
  gap: var(--gap);
}
.card {
  display: flex; gap: 12px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--edge);       /* 静止 = 玻璃白边（方案 D） */
  border-radius: var(--r-card);
  padding: var(--card-pad);
  box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover {
  transform: translateY(-2px);
  border-color: #bcdfff;               /* 方案 D 的 hover 浅蓝边 */
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) {
  .card:hover { border-color: rgba(124, 196, 255, .5); }
}
.card .ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: #fff;
  overflow: hidden; background: none;   /* 有 favicon = 裸图，不加底色盒子 */
}
/* 22px 图标浮在 38px 透明格里，四周留呼吸位（预览页同款） */
.card .ico img { width: 22px; height: 22px; object-fit: contain; background: none; }
.card .cbody { min-width: 0; flex: 1; }
.card .ttl {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 18px;                 /* 给 hover 出现的 ↗ 让位 */
  transition: color .18s;
}
.card:hover .ttl { color: var(--gc, var(--brand-ink)); }
.card .desc {
  font-size: 12.3px; color: var(--ink-2); line-height: 1.55; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 底部 meta 行：只剩热度（收录时间 2026-09-25 已去掉）。
   没热度的卡片不渲染这行，所以别给它留 padding —— 会白顶一块。 */
.card .cmeta {
  display: block; margin-top: 5px; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* 右上角 ↗：静止藏起来，hover 才滑出来 */
.card .arrow {
  position: absolute; right: 12px; top: 12px;
  font-size: 12px; line-height: 1; color: var(--ink-3);
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity .18s, transform .18s, color .18s;
}
.card:hover .arrow {
  opacity: 1; transform: none;
  color: var(--gc, var(--brand));
}

/* 中转页的元信息行 */
.meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 16px;
}
.meta span {
  font-size: 12.5px; color: var(--ink-3);
  background: var(--card); border: 1px solid var(--edge);
  padding: 4px 12px; border-radius: 100px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.meta span.host { color: var(--ink-2); }
.meta span.host b { color: var(--brand-ink); font-weight: 600; }

/* 二级分类标签（分类页内筛选用） */
.subcats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.subcats a {
  font-size: 13px; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--edge);
  padding: 6px 15px; border-radius: 99px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: color .15s, background .15s;
}
.subcats a:hover { color: var(--brand-ink); }
.subcats a.on {
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px var(--brand-glow);
}
.subcats a em {
  font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-left: 5px;
}
.subcats a.on em { color: rgba(255,255,255,.78); }

/* ---------------- 内页 ---------------- */
.page { padding: 26px 30px 38px; }
.crumb { font-size: 12.5px; color: var(--ink-3); margin-bottom: 18px; }
.crumb span { margin: 0 7px; opacity: .5; }
.crumb a:hover { color: var(--brand-ink); }
.page h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.page .lead {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.85;
  max-width: 720px; margin-bottom: 24px;
}

.panel {
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-card);
  padding: 26px 28px; box-shadow: var(--shadow-rest); margin-bottom: 30px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.panel h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 10px; }
.panel p { font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  color: #fff; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 11px 26px; border-radius: 22px; margin-top: 20px;
  box-shadow: 0 4px 12px var(--brand-glow);
  transition: filter .18s, transform .18s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* 失效条目的明确提示，不留死胡同 */
.notice {
  background: var(--card); border-left: 3px solid var(--brand);
  border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 26px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.8;
}

/* ---------------- 空状态 ---------------- */
.empty {
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-card);
  padding: 56px 30px; text-align: center; box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.empty p { font-size: 13.5px; color: var(--ink-2); }
.empty .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

/* ---------------- 页脚 ---------------- */
.foot {
  background: var(--card); border-top: 1px solid var(--line);
  padding: 22px 30px; margin-top: 40px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-3);
}
.foot nav { display: flex; gap: 20px; }
.foot a:hover { color: var(--brand-ink); }

/* ---------------- 首屏 ----------------
   方案 D 取消了 hero 大搜索框（搜索在顶栏）。
   .hero 只剩提交页那种小头图用；首页改用 .heroband 细带。 */
.hero {
  background: var(--card);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--edge);
  padding: 40px 24px 34px; text-align: center;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -80px; top: -110px;
  width: 300px; height: 300px; pointer-events: none;
  background: radial-gradient(circle, var(--hero-glow), transparent 68%);
}
.hero h1 {
  font-size: 30px; font-weight: 700; letter-spacing: -.035em;
  color: var(--ink); margin-bottom: 8px; position: relative;
}
.hero p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 22px; position: relative; }

/* 首页细带：站名 h1 + 口号 | 一言右对齐，一行玻璃 */
.heroband {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 13px 20px;
  box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  position: relative; overflow: hidden; margin-bottom: 14px;
}
.heroband::after {
  content: ""; position: absolute; right: -70px; top: -90px;
  width: 240px; height: 240px; pointer-events: none;
  background: radial-gradient(circle, var(--hero-glow), transparent 68%);
}
.heroband h1 {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.3;
}
.heroband .hb-txt p { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

/* 一言：替换掉原来的统计数字块（2026-09-25 定）。
   靠右贴边、最多铺两行，出处小一号另起一行 —— 不跟站名抢视线。
   句子长度不可控，所以给 max-width 兜住换行，别把细带撑成一大块。 */
.hbyiyan {
  position: relative; margin-left: auto;
  max-width: 520px; text-align: right;
}
.hbyiyan .yy { font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.hbyiyan .yy-from {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 11.5px; color: var(--ink-3);
}

/* 精选推荐带：填补首屏与分类卡片之间的断层 */
.featured {
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-card);
  padding: 15px 18px 13px; box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  margin-bottom: 18px;
}
.featured h4 {
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 11px; display: flex; align-items: center; gap: 7px;
}
.featured h4 em { font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.fitem {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; min-width: 0;
  transition: background .15s;
}
.fitem:hover { background: var(--hover); }
.fitem .ico {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-size: 11.5px; font-weight: 700; overflow: hidden;
  background: none;   /* 有 favicon = 裸图；无 favicon 的兜底色走行内 style */
}
.fitem .ico img { width: 100%; height: 100%; object-fit: contain; background: none; }
.fitem .t {
  font-size: 13px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fitem:hover .t { color: var(--brand-ink); }

.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tagcloud a {
  font-size: 11.5px; color: var(--ink-2); background: var(--tag-bg);
  padding: 3px 10px; border-radius: 100px; transition: color .15s, background .15s;
}
.tagcloud a:hover { color: #fff; background: var(--brand-solid); }

/* 公告条 */
.anns { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.ann {
  background: var(--ann-bg); border: 1px solid var(--ann-line); border-radius: var(--r-card);
  padding: 11px 16px; font-size: 13px; color: var(--ann-ink);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.ann.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.ann b { color: inherit; font-weight: 600; }
.ann span { color: inherit; opacity: .9; }
.ann a { margin-left: auto; color: inherit; border-bottom: 1px solid currentColor; }

/* 推荐位那一带用主色浅底，和「精选推荐」区分开 */
.featured.rec { background: var(--rec-bg); border: 1px solid var(--rec-line); }
.featured.rec h4 { color: var(--brand-ink); }

/* 友情链接 */
.friends {
  margin-top: 22px; background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 15px 18px 13px; box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.friends h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 11px; }

/* 提交收录表单 */
.hero-sm { padding: 34px 24px 28px; }
.hero-sm h1 { font-size: 24px; }
.submit-wrap { max-width: 620px; margin: 0 auto; }
.form-card {
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-card);
  padding: 24px 26px;
  box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.form-card .field { margin-bottom: 16px; }
.form-card .field > label {
  display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px;
}
.form-card .field > label b { color: var(--brand-ink); font-weight: 400; }
.form-card input[type=text], .form-card input[type=url], .form-card select {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 10px 13px; background: var(--card);
}
.form-card input:focus, .form-card select:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,107,255,.18);
}
.form-card .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.form-card .form-foot {
  display: flex; gap: 10px; align-items: center; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.form-card .btn {
  display: inline-flex; align-items: center; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  padding: 10px 22px; border-radius: var(--r-sm); border: 1px solid transparent;
}
.form-card .btn.primary { background: var(--brand-solid); color: #fff; }
.form-card .btn.ghost { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.form-card .btn.ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.notice.ok {
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink);
  border-radius: var(--r-card); padding: 16px 20px; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.8;
}
.submit-note {
  margin-top: 20px; background: var(--card); border-radius: var(--r-card);
  padding: 18px 22px; box-shadow: var(--shadow-rest);
  font-size: 13px; color: var(--ink-2); line-height: 1.85;
}
.submit-note b { color: var(--ink); display: block; margin-bottom: 8px; }
.submit-note ul { padding-left: 20px; margin-bottom: 10px; }
.submit-note li { margin-bottom: 4px; }

/* 底部信息区：方案 D 是通栏单列，原右侧栏六块降级到这里，
   一行自动分栏（≥1100px 排 4 栏，窄屏逐级收到 1 栏）。 */
.sidecol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 13px; align-items: start; margin-top: 30px;
}

/* ---------------- 首页两栏：左主列 + 右侧栏 ---------------- */
/* 2026-09-26 旧梦：六个侧栏面板从卡片墙下面搬回右侧。
   左列 = 推荐带 + 精选 + 分组卡片墙，右列 = 六个面板竖排。

   minmax(0, 1fr) 而不是 1fr：卡片标题很长时，1fr 的「最小内容宽度」
   会把网格撑破、横向溢出（min-width:auto 是 grid 子项的默认值），
   minmax(0,…) 才允许它正常收缩。 */
.homecols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
/* 300px 是量出来的，不是随手填的：这段宽度下主列留 912px，
   卡片网格正好 3 列、每张 293px，和改版前的 296px 几乎一样
   （每个分组首页只展示 6 张，3 列和 4 列都是 2 行，所以页面总高不变）。
   再窄会把主列挤到每行 2 张，再宽则右栏里「最新收录」的
   图标 + 标题 + 日期会被挤成两行。 */
.homecols > .sidecol {
  grid-template-columns: 1fr;
  margin-top: 0;  /* 那 30px 原本是给它「在卡片墙下面」用的，进右栏要归零 */
}
.homemain { min-width: 0; }

@media (max-width: 1140px) {
  /* 放不下两栏：右栏回到卡片墙下面，恢复原来的一行自动分栏。
     1140 这个点也是量出来的 —— 1141 时主列还有 773px，卡片正好 3 列。 */
  .homecols { grid-template-columns: 1fr; }
  .homecols > .sidecol {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 30px;
  }
}
.side-panel {
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-card);
  padding: 15px 16px 13px; box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  margin-bottom: 0;
}
.side-panel h4 {
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
}
.side-panel h4 em {
  font-style: normal; font-size: 11px; color: var(--ink-3);
  font-weight: 400; margin-left: auto;
}
.side-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.75; }

.rank, .latest { list-style: none; }
.rank li, .latest li { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.rank li + li, .latest li + li { border-top: 1px solid var(--line); }
.rank .no {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--chip); color: var(--ink-2);
}
.rank li:nth-child(1) .no {
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  color: #fff; box-shadow: 0 3px 8px var(--brand-glow);
}
.rank li:nth-child(2) .no { background: var(--warn-bg); color: var(--warn-ink); }
.rank li:nth-child(3) .no { background: var(--chip); color: var(--ink-2); }
.rank .t, .latest .t {
  font-size: 13px; color: var(--ink); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank .t:hover, .latest .t:hover { color: var(--brand-ink); }
.rank .c { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.latest .ico {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-size: 11px; font-weight: 700; overflow: hidden;
  background: none;   /* 有 favicon = 裸图；无 favicon 的兜底色走行内 style */
}
.latest .ico img { width: 100%; height: 100%; object-fit: contain; background: none; }
.latest .d { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.kwlist { display: flex; flex-direction: column; gap: 2px; }
.kwrow {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 6px; border-radius: 6px; font-size: 12.5px;
}
.kwrow:hover { background: var(--hover); }
.kwrow .w {
  color: var(--ink-2); min-width: 56px; max-width: 88px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kwrow .bar { flex: 1; height: 5px; background: var(--chip); border-radius: 3px; overflow: hidden; }
.kwrow .bar i { display: block; height: 100%; background: var(--brand); opacity: .78; border-radius: 3px; }
.kwrow .c { font-size: 11px; color: var(--ink-3); min-width: 26px; text-align: right; }

/* 窄屏分组头：二级 tab 强制独占一行，「更多 →」用 order 提回第一行行尾 ——
   否则 subs 一换行，gmore 就一个人吊在第二行（手机截图上就是这个毛病）。 */
@media (max-width: 700px) {
  .ghead .gmore { order: 1; }
  .ghead .subs { order: 2; flex-basis: 100%; }
}

@media (max-width: 860px) {
  .hero { padding: 30px 18px 26px; }
  .hero h1 { font-size: 23px; }
  .heroband { padding: 12px 16px; }
  .heroband h1 { font-size: 17px; }
  /* 一言掉到口号下面后，用一条分隔线把它钉住，不然发飘；改左对齐，手机上好读 */
  .heroband .hbyiyan {
    width: 100%; max-width: none; margin-left: 0;
    border-top: 1px solid var(--line); padding-top: 10px;
    text-align: left;
  }
  .heroband .hbyiyan .yy { font-size: 12.5px; }
}

@media (max-width: 860px) {
  /* 顶栏三段式手机排布：logo | 动作一行，搜索整行换到第二行（预览页同款） */
  .top-in { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .search { max-width: none; order: 3; flex-basis: 100%; margin: 0; }
  .top-act nav.desk { display: none; }
  .mnav { display: block; }
  .quick { padding: 14px 16px 2px; }
  .body, .page, .foot { padding-left: 16px; padding-right: 16px; }
  .wrap { padding: 20px 14px 50px; }
  .page h1 { font-size: 22px; }
  .post h1 { font-size: 23px; }
  .prose { font-size: 14.5px; }
  /* 写成 .homecols > .sidecol 而不是 .sidecol：上面 1140 那段用的是
     两段选择器，单段的 .sidecol 比不过它，手机上就收不成一列了。 */
  .homecols > .sidecol { grid-template-columns: 1fr; }
}

/* ==========================================================================
   博客
   ========================================================================== */

/* ---------------- 文章列表 ---------------- */
.postcats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.postcats a {
  font-size: 13px; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--edge);
  padding: 6px 15px; border-radius: 99px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: color .18s, background .18s;
}
.postcats a:hover { color: var(--brand-ink); }
.postcats a.on {
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px var(--brand-glow);
}
.postcats a em { font-style: normal; color: var(--ink-3); font-size: 11.5px; margin-left: 4px; }
.postcats a.on em { color: var(--card); opacity: .7; }

.plist { display: flex; flex-direction: column; gap: 12px; }
.pitem {
  display: block; background: var(--card);
  border: 1px solid var(--edge); border-radius: var(--r-card);
  padding: 20px 22px; box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pitem:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #bcdfff; }
@media (prefers-color-scheme: dark) {
  .pitem:hover { border-color: rgba(124, 196, 255, .5); }
}
.pitem .pt {
  font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.015em;
  margin-bottom: 7px; transition: color .18s;
}
.pitem:hover .pt { color: var(--brand-ink); }
.pitem .pd { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.pitem .pm { font-size: 12px; color: var(--ink-3); margin-top: 11px; }

/* ---------------- 文章页 ---------------- */
.post { max-width: 760px; margin: 0 auto; padding: 28px 0 6px; }
.post h1 {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.32; margin-bottom: 14px;
}
.pmeta {
  font-size: 12.5px; color: var(--ink-3);
  padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}

/* Markdown 正文。这一块是文章可读性的全部，值得写细。 */
.prose { font-size: 15px; line-height: 1.85; color: var(--prose-ink); }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-size: 21px; font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; margin-top: 40px; padding-top: 6px;
}
.prose h3 { font-size: 17.5px; font-weight: 600; color: var(--ink); margin-top: 30px; }
.prose h4 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-top: 24px; }
.prose a { color: var(--brand-ink); border-bottom: 1px solid var(--rec-line); }
.prose a:hover { border-bottom-color: var(--brand-ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 7px; }
.prose blockquote {
  border-left: 3px solid var(--line-2); padding: 2px 0 2px 18px;
  color: var(--ink-2); font-size: 14.5px;
}
.prose blockquote p + p { margin-top: 10px; }
.prose code {
  background: var(--chip); padding: 2px 6px; border-radius: 4px;
  font-family: Consolas, Menlo, monospace; font-size: 13.5px; color: var(--code-ink);
}
.prose pre {
  background: var(--hover); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px 18px;
  overflow-x: auto; font-size: 13px; line-height: 1.72;
}
.prose pre code {
  background: none; padding: 0; color: var(--code-bg-ink); font-size: 13px;
}
.prose img { border-radius: var(--r-card); margin: 4px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td {
  border: 1px solid var(--line); padding: 9px 13px; text-align: left;
}
.prose th { background: var(--chip); font-weight: 600; color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* 正文里 [[slug]] 展开出来的工具卡片 */
.prose .embed { margin: 24px 0; max-width: 430px; }
.prose .embed-miss {
  color: var(--bad); font-size: 13px; background: var(--bad-soft);
  padding: 2px 8px; border-radius: 5px;
}

.ptags {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.ptags a {
  font-size: 12.5px; color: var(--ink-2); background: var(--chip);
  padding: 4px 12px; border-radius: 100px; transition: color .18s;
}
.ptags a:hover { color: var(--brand-ink); }

/* ==========================================================================
   渐变背景防边缘杂色 —— 必须放在文件最末，见下面的原因，别往上挪

   background-origin 的初值是 padding-box，background-clip 的初值是 border-box。
   元素一旦带 1px 边框，两者就不重合：渐变按 padding-box 定位、却要画到
   border-box，边框带那一圈拿到的是错位色值 —— 实测会画出一条比内侧填充更暗的
   暗边（RGB 总和差最大 274），肉眼就是沿胶囊边缘一圈发暗的杂色，暗色模式更明显。
   隔离复现（_edge_fix.cjs）：纯渐变 0 暗边 → 加 1px 透明边 25 行暗边
   → 加 background-origin:border-box 归 0，盒子尺寸全程 48 x 27.19 不变。
   .btn-main 是纯色背景（无渐变图，origin 不参与）→ 天然 0 暗边，可作对照。

   为什么放末尾：下面这些规则里 `background:` 是简写，简写会把 background-origin
   一并重置回 padding-box；声明必须写在它们之后才不会被冲掉
   （第一版放进 :root 旁边，computed style 实测仍是 padding-box，就是踩的这个坑）。
   ========================================================================== */
body,
.smode.on, .engine.on,
.quick a.on,
.subcats a.on,
.btn,
.hero::after, .heroband::after,
.rank li:nth-child(1) .no,
.postcats a.on {
  background-origin: border-box;
}

/* ---------------- 访问密码解锁页 ----------------
   2026-09-26：参考六零导航页的「加密管理」做的，但有两处刻意不同 ——
   密码在库里只存 PBKDF2 哈希（后台也只能看到「已设置 / 未设置」），
   而且解锁页就地渲染在原 URL 上，不跳 /pwd?back=… 那种带参数的页面。 */
.pwdbox {
  max-width: 420px; margin: 64px auto 40px;
  padding: 38px 34px 30px; text-align: center;
  background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--r-card); box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.pwdico {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 20px;
  border-radius: 50%; color: var(--brand-ink);
  background: var(--brand-soft);
  box-shadow: 0 6px 18px -6px var(--brand-glow);
}
.pwdbox h1 { font-size: 19px; font-weight: 650; letter-spacing: .2px; }
.pwdsub {
  margin-top: 9px; font-size: 13px; line-height: 1.75;
  color: var(--ink-3);
}
.pwderr {
  margin-top: 16px; padding: 9px 14px;
  font-size: 12.5px; color: #a0423b;
  background: #fdf1f0; border: 1px solid #f2d4d1;
  border-radius: var(--r-sm);
}
.pwdform {
  display: flex; gap: 9px; margin-top: 22px;
}
.pwdform input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 11px 15px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line-2); border-radius: 22px;
}
.pwdform input:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* .btn 自带 margin-top:20px，在并排的表单里会把按钮顶歪 */
.pwdform .btn { margin-top: 0; padding: 11px 24px; flex: none; }
.pwdhint { margin-top: 16px; font-size: 11.5px; color: var(--ink-3); }

/* 列表里的锁标记。和「热度」同一行，用同一套灰阶，不抢标题。 */
.lock-mark {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ink-3);
}
.lock-mark svg { display: block; }
.catlock {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 4px;
  vertical-align: -2px; color: var(--ink-3);
}

@media (max-width: 560px) {
  .pwdbox { margin: 34px 14px 26px; padding: 30px 22px 24px; }
  .pwdform { flex-direction: column; }
  .pwdform .btn { justify-content: center; }
}

/* =========================================================================
   收藏体系（方案 A 顶部条带，2026-09-26 定稿）—— 与预览页 nav-fav-preview.html
   同一份样式：由 _fav_preview.src.html 抽出「通用 + 方案 A」段原样落到这里，
   预览页靠 _build_fav_preview.py 把本文件注入到「下划线包起来的 STYLE 占位标记」里来共用。
   （这里不能写字面的斜杠星号标记 —— 里面的星号斜杠会把本注释提前闭合，
     后面的中文全变成选择器，浏览器解析失败，会连带把下一条 .favbtn 规则整条丢掉。）
   方案 B/C 与预览控制台的样式只在预览源里，不进站点。
   ========================================================================= */


/* ---- 通用：卡片右上角的收藏星（方案 A/B/C 共用） ----
   .arrow 占了 right:12/top:12，所以卡片挂了收藏按钮时把 ↗ 往左推 26px。
   用 .favable 这个 class 标记，不用 :has() —— 少一个浏览器兼容坑。 */
.favbtn {
  position: absolute; right: 9px; top: 8px;
  width: 24px; height: 24px; border: 0; padding: 0;
  background: transparent; color: var(--ink-3);
  font-size: 15px; line-height: 1; cursor: pointer;
  border-radius: 7px; opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .18s, transform .18s, color .15s, background .15s;
}
.card:hover .favbtn { opacity: 1; transform: none; }
.favbtn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.favbtn.on { opacity: 1; transform: none; color: #f5a524; }
.card.favable .arrow { right: 38px; }
/* 拨杆：收藏按钮常驻（不只 hover 出现） */
body.star-always .favbtn, body.star-always .favlist .fstar { opacity: 1; transform: none; }
/* 手机上没有 hover：按钮必须常驻，否则收藏功能等于不存在 */
@media (hover: none) { .favbtn { opacity: 1; transform: none; } }

/* ---- 通用：收藏/最近 用的列表与网格标题条 ---- */
.favwrap { margin-bottom: 20px; }
.favhead {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.favtabs { display: flex; gap: 6px; }
.favtab {
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  background: var(--card); border: 1px solid var(--edge);
  padding: 5px 13px; border-radius: 99px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: .15s;
}
.favtab:hover { background: var(--hover); color: var(--ink); }
/* 选中态沿用 chips 那套豆包渐变胶囊，别自己发明淡色 tint */
.favtab.on {
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px var(--brand-glow);
}
.favtab .n {
  font-variant-numeric: tabular-nums; opacity: .85; margin-left: 3px;
}
.favops { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.favop {
  font-size: 12px; color: var(--ink-2); cursor: pointer;
  background: transparent; border: 1px dashed var(--line-2);
  padding: 5px 11px; border-radius: 8px; transition: .15s;
}
.favop:hover { background: var(--hover); color: var(--ink); border-style: solid; }

/* 空态：只有一行字，不画大图标 —— 一堆卡片墙里插个大插画会很吵 */
.favempty {
  font-size: 13px; color: var(--ink-2);
  background: var(--card); border: 1px dashed var(--line-2);
  border-radius: var(--r-card); padding: 18px 16px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.favempty b { color: var(--brand-ink); font-weight: 600; }

/* 添加自定义网址：一行三段，展开/收起用 hidden 控制 */
.favadd {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 12px; margin-bottom: 12px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.favadd input {
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--card-solid); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 7px 10px; min-width: 0;
}
.favadd input.i-name { width: 160px; }
.favadd input.i-url { flex: 1; min-width: 220px; }
/* .favadd 是 display:flex，会盖掉 [hidden] 的 display:none ——
   不补这条的话表单永远张着收不起来。 */
.favadd[hidden] { display: none; }
.favadd .go {
  font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
  background: var(--brand-solid); border: 0;
  border-radius: 8px; padding: 8px 16px;
}
.favadd .go:hover { filter: brightness(1.08); }
.favadd .note { font-size: 11.5px; color: var(--ink-3); width: 100%; }

/* 自定义网址卡片右上角的删除叉（只有自定义条目才有） */
.favdel {
  position: absolute; right: 8px; bottom: 8px;
  border: 0; background: transparent; color: var(--ink-3);
  font-size: 14px; line-height: 1; cursor: pointer;
  width: 22px; height: 22px; border-radius: 6px; opacity: 0;
  transition: .15s;
}
.card:hover .favdel { opacity: 1; }
.favdel:hover { background: var(--bad-soft); color: var(--bad); }
.card.is-custom .arrow { display: none; }

/* ---- 方案 A：chips 之后的通栏「我的」条带 ---- */
#favband {
  background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 14px 16px;
  box-shadow: var(--shadow-rest);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  margin-bottom: 20px;
}
#favband .favgrid { margin-top: 4px; }
body.band-hide-empty #favband.is-empty { display: none; }

/* ==========================================================================
   中转页（.page.tp）—— 2026-09-26 按 Ardot「中转页 V2」设计稿落地

   模块顺序：面包屑 / 用途说明 / 标题区(Logo) / 中转卡片(P0) / 关于 /
             数据评估 / 打不开排查 / 相关推荐 / 页脚句。

   两条实现约定：
     · 所有选择器带 .tp- 前缀，作用域锁在本页；不动上面任何全局 token，
       首页与其它内页的样式一个字节都不受影响。
     · 设计稿是独立页定的值，这里把语义相同的部分映射到站点既有 token
       （主色 → --brand 一族、玻璃 → --card/--edge、圆角 → --r-card），
       这样暗色模式跟着 prefers-color-scheme 自动生效；只有站点原本没有的
       几块「面」（更实的玻璃、地址条、用途条）才新开 --tp-* 变量，各配一份暗色。
   内容列 760px 是设计稿唯一的对齐锚点，面包屑到页脚全部在这根轴上。
   ========================================================================== */
.page.tp {
  --tp-glass: rgba(255, 255, 255, .48);
  --tp-glass-strong: rgba(255, 255, 255, .72);
  --tp-glass-solid: rgba(255, 255, 255, .62);
  --tp-edge: rgba(255, 255, 255, .78);
  --tp-fill: rgba(255, 255, 255, .5);
  --tp-addr-bg: rgba(16, 24, 40, .045);
  --tp-addr-line: rgba(16, 24, 40, .06);
  --tp-purpose-bg: rgba(47, 107, 255, .10);
  --tp-purpose-line: rgba(47, 107, 255, .20);
  --tp-purpose-ink: #2a4e86;
  --tp-r-xl: 20px; --tp-r-lg: 16px; --tp-r-md: 14px; --tp-r-sm: 10px; --tp-r-xs: 8px;
  --tp-sh-card: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -16px rgba(16, 24, 40, .16);
  --tp-sh-lift: 0 2px 6px rgba(16, 24, 40, .06), 0 26px 46px -24px rgba(16, 24, 40, .28);

  max-width: 760px;
  margin: 0 auto;
  padding: 6px 0 44px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (prefers-color-scheme: dark) {
  .page.tp {
    --tp-glass: rgba(22, 42, 74, .48);
    --tp-glass-strong: rgba(22, 42, 74, .68);
    --tp-glass-solid: rgba(22, 42, 74, .56);
    --tp-edge: rgba(140, 190, 255, .16);
    --tp-fill: rgba(255, 255, 255, .06);
    --tp-addr-bg: rgba(255, 255, 255, .05);
    --tp-addr-line: rgba(255, 255, 255, .08);
    --tp-purpose-bg: rgba(47, 107, 255, .16);
    --tp-purpose-line: rgba(124, 196, 255, .26);
    --tp-purpose-ink: #bcd6ff;
    --tp-sh-card: 0 1px 2px rgba(0, 0, 0, .30), 0 14px 34px -16px rgba(0, 0, 0, .50);
    --tp-sh-lift: 0 2px 6px rgba(0, 0, 0, .36), 0 26px 46px -24px rgba(0, 0, 0, .60);
  }
}

/* --- 面包屑 --- */
.tp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.tp-crumbs a { color: var(--ink-3); }
.tp-crumbs a:hover { color: var(--brand-ink); }
.tp-crumbs span { opacity: .5; }
.tp-crumbs em { font-style: normal; color: var(--ink-2); }

/* --- 用途说明条（合规信号一） --- */
.tp-purpose {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--tp-r-md);
  background: var(--tp-purpose-bg); border: 1px solid var(--tp-purpose-line);
  font-size: 13px; line-height: 1.7; color: var(--tp-purpose-ink);
}
.tp-purpose svg { margin-top: 3px; flex: none; }
.tp-purpose p { margin: 0; }
.tp-purpose strong { font-weight: 600; }

/* --- 标题区（模块 A · Logo 进标题区，不单独开卡） --- */
.tp-title { display: flex; gap: 16px; align-items: flex-start; }
.tp-logo {
  width: 56px; height: 56px; flex: none; border-radius: var(--tp-r-lg);
  background: #fff; border: 1px solid var(--tp-edge); box-shadow: var(--tp-sh-card);
  display: grid; place-items: center; overflow: hidden;
}
@media (prefers-color-scheme: dark) { .tp-logo { background: var(--card-solid); } }
.tp-logo__glyph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.tp-logo__img { width: 60%; height: 60%; object-fit: contain; }
.tp-titlemain { min-width: 0; flex: 1; }
.tp-titlemain h1 { font-size: 32px; line-height: 1.28; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.tp-lede { margin: 8px 0 0; font-size: 15px; line-height: 1.78; color: var(--ink-2); }
.tp-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-3); }
.tp-meta b { font-weight: 600; color: var(--ink-2); }
.tp-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chip {
  font-size: 12px; line-height: 1; padding: 7px 12px; border-radius: 999px;
  background: var(--tp-glass-solid); border: 1px solid var(--line);
  color: var(--ink-2); transition: border-color .18s, color .18s, background .18s;
}
.tp-chip:hover { border-color: var(--tp-purpose-line); color: var(--brand-ink); background: var(--card-solid); }

/* --- 中转卡片（P0：全页动作核心） --- */
.tp-transfer {
  background: var(--tp-glass-strong);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--tp-edge); border-radius: var(--tp-r-xl);
  box-shadow: var(--tp-sh-card); padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.tp-tlabel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink-3);
}
.tp-https {
  font-size: 10.5px; letter-spacing: .06em; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(46, 196, 142, .14); color: #0e9a6b; border: 1px solid rgba(46, 196, 142, .28);
}
.tp-addr {
  display: flex; align-items: center; gap: 10px;
  background: var(--tp-addr-bg); border: 1px solid var(--tp-addr-line);
  border-radius: var(--tp-r-sm); padding: 11px 12px;
}
.tp-addrtxt {
  flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 域名之后的路径用主色加粗（设计稿 .addr__txt b）。
   作用是把「去哪台主机的哪个页面」这半截钉进视线 —— 用户点之前
   最该看清的就是它，而它也正是被截断时最先牺牲的部分。 */
.tp-addrtxt b { color: var(--brand-ink); font-weight: 600; }
.tp-iconbtn {
  flex: none; width: 32px; height: 32px; border-radius: var(--tp-r-xs);
  display: grid; place-items: center; color: var(--ink-3);
  background: none; border: 1px solid transparent; cursor: pointer; font: inherit;
  transition: background .18s, color .18s, border-color .18s;
}
.tp-iconbtn:hover { background: var(--tp-addr-bg); color: var(--ink-2); border-color: var(--line); }
.tp-iconbtn:active { transform: scale(.94); }
.tp-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.tp-actions { display: flex; gap: 12px; }
.tp-btn {
  height: 52px; border-radius: var(--tp-r-md); font-size: 15.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 22px; cursor: pointer; border: 0; text-decoration: none;
  font-family: inherit;
  transition: transform .16s, box-shadow .2s, background .2s, border-color .2s, filter .2s, opacity .2s;
}
.tp-btn--go {
  flex: 1; color: #fff;
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 55%, #fff));
  box-shadow: 0 8px 20px -8px var(--brand-glow);
}
.tp-btn--go:hover { filter: brightness(.94); transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(47, 107, 255, .62); }
.tp-btn--go:active { transform: translateY(1px); box-shadow: 0 3px 8px -3px rgba(47, 107, 255, .5); }
.tp-arr { transition: transform .2s; }
.tp-btn--go:hover .tp-arr { transform: translateX(3px); }
.tp-btn--go.is-off { opacity: .45; pointer-events: none; box-shadow: none; }
.tp-btn--back {
  flex: none; padding-inline: 20px; font-weight: 600; font-size: 14.5px; color: var(--ink-2);
  background: var(--hover); border: 1px solid var(--line);
}
.tp-btn--back:hover { background: var(--card-solid); border-color: var(--line-2); color: var(--ink); }
.tp-btn--back:active { transform: translateY(1px); }

.tp-note {
  margin: 0; padding: 12px 14px; border-radius: var(--tp-r-sm);
  font-size: 12.5px; line-height: 1.8; color: var(--ink-3);
  background: var(--tp-fill); border: 1px solid var(--tp-addr-line);
}
.tp-note--warn { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }

/* --- 区块骨架与通用玻璃卡 --- */
.tp-block { display: flex; flex-direction: column; gap: 12px; }
.tp-blockhd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tp-blockt { font-size: 15px; font-weight: 700; letter-spacing: .01em; margin: 0; }
.tp-blockt i { font-style: normal; color: var(--brand-ink); margin-right: 7px; }
.tp-blocksub { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.tp-card {
  background: var(--tp-glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--tp-edge); border-radius: var(--tp-r-lg); box-shadow: var(--tp-sh-card);
}

/* --- 网站快照（模块 B） ---
   数据源是本地文件 data/snaps/<slug>.webp，服务端取不到就不渲染这段 DOM，
   所以这里没有「加载失败占位」之类的空态样式 —— 不显示就是不显示。 */
.tp-snap { overflow: hidden; }
.tp-snapchrome {
  height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--tp-glass-solid); border-bottom: 1px solid var(--tp-addr-line);
}
.tp-snapdots { display: flex; gap: 6px; flex: none; }
.tp-snapdots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(140, 150, 165, .45); }
.tp-snapurl {
  flex: 1; min-width: 0; height: 22px; border-radius: var(--tp-r-xs);
  background: var(--tp-addr-bg); padding: 0 9px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-3);
}
.tp-snapurl svg { flex: none; opacity: .7; }
/* 文字要真能出省略号：text-overflow 只对本元素的行内内容生效，
   flex 容器里的匿名文本项吃不到它 —— 所以这层单独包一个 span。 */
.tp-snapurltxt {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-snapimg {
  display: block; width: 100%;
  /* height:auto 必须写：img 上的 height="810" 是呈现提示，优先级高于
     aspect-ratio，漏了它图会被钉成 810px 高（758 列宽下比例 0.94 而不是 16:9）。 */
  height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: top center;
  background: var(--tp-fill);
}
.tp-snapcap {
  padding: 10px 14px; font-size: 11.5px; color: var(--ink-3);
  background: var(--tp-glass-solid); border-top: 1px solid var(--tp-addr-line);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.tp-snapcap a { color: var(--brand-ink); font-weight: 600; }

/* --- 关于（用条目自己的详情字段，空则整块不渲染） --- */
.tp-about { padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; }
.tp-aboutlogo {
  width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
  border: 1px solid var(--tp-edge);
}
.tp-aboutbody { min-width: 0; flex: 1; }
.tp-abouthd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tp-aboutname { font-size: 15.5px; font-weight: 700; }
.tp-abouttype {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: var(--tp-purpose-bg); color: var(--brand-ink); border: 1px solid var(--tp-purpose-line);
}
.tp-aboutp { margin: 8px 0 0; font-size: 14px; line-height: 1.85; color: var(--ink-2); }

/* --- 数据评估 --- */
/* 设计稿是 repeat(4,1fr)；这里用 auto-fit 让「评分」缺席时三格也能撑满，
   等评分体系上线补回第四格，视觉与设计稿一致。 */
.tp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tp-stat {
  background: var(--tp-glass-solid); border: 1px solid var(--line);
  border-radius: var(--tp-r-md); padding: 15px 16px;
}
.tp-stat b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tp-stat b em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.tp-stat span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* --- 打不开排查（中转页最高频的问题） --- */
.tp-help { padding: 18px 22px; }
.tp-helphd { display: flex; align-items: center; gap: 10px; }
.tp-helpq {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--tp-purpose-bg); color: var(--brand-ink);
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
}
.tp-helpt { font-size: 15px; font-weight: 700; margin: 0; }
.tp-helplist { margin: 6px 0 0; padding: 0; list-style: none; }
.tp-helplist li {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 0;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  border-bottom: 1px solid var(--tp-addr-line);
}
.tp-helplist li:last-child { border-bottom: 0; padding-bottom: 0; }
.tp-helpn {
  flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--card-solid); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ink-3);
}
.tp-helplist a { font-weight: 600; color: var(--brand-ink); }

/* --- 相关推荐（内链 + 长尾分发） --- */
.tp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; }
.tp-rel {
  position: relative; display: block; padding: 14px 16px;
  border-radius: var(--tp-r-md); background: var(--tp-glass);
  border: 1px solid var(--tp-edge); box-shadow: var(--tp-sh-card);
  color: inherit; text-decoration: none;
  transition: transform .18s, box-shadow .2s, border-color .2s;
}
/* 设计稿点名：hover 只上浮 + 主色描边 + 箭头淡入，不要左侧色条 */
.tp-rel:hover { transform: translateY(-3px); box-shadow: var(--tp-sh-lift); border-color: #bcdfff; text-decoration: none; }
@media (prefers-color-scheme: dark) { .tp-rel:hover { border-color: rgba(124, 196, 255, .5); } }
.tp-relt { display: block; font-size: 14px; font-weight: 700; color: var(--ink); padding-right: 18px; }
.tp-reld {
  margin-top: 5px; font-size: 12px; line-height: 1.65; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tp-relarr {
  position: absolute; top: 14px; right: 14px; color: var(--brand-ink);
  opacity: 0; transform: translate(-4px, 4px); transition: .2s;
}
.tp-rel:hover .tp-relarr { opacity: 1; transform: none; }

/* --- 页脚句（合规信号三） --- */
/* 站名 / ICP / 页脚菜单由 base.html 的全局 .foot 负责，这里只放合规声明，
   不重复站名，免得页面底部出现两行几乎一样的字。 */
.tp-foot {
  margin: 0; padding: 18px 0 0; border-top: 1px solid var(--tp-addr-line);
  text-align: center; font-size: 12px; line-height: 1.9; color: var(--ink-3);
}
.tp-foot span { display: block; }

/* --- 键盘可达性 / 减少动效 --- */
.tp-btn:focus-visible, .tp-iconbtn:focus-visible, .tp-rel:focus-visible {
  outline: 3px solid rgba(47, 107, 255, .35); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tp-btn, .tp-btn--go .tp-arr, .tp-rel, .tp-relarr, .tp-chip, .tp-iconbtn { transition: none !important; }
  .tp-btn--go:hover, .tp-rel:hover { transform: none; }
}

/* --- 响应式：860 收窄、640 单列、380 收字号 --- */
@media (max-width: 860px) {
  .page.tp { gap: 18px; }
  .tp-titlemain h1 { font-size: 28px; }
  .tp-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page.tp { padding: 4px 0 32px; gap: 16px; }
  .tp-title { gap: 12px; }
  .tp-logo { width: 44px; height: 44px; border-radius: 13px; }
  .tp-logo__glyph { font-size: 19px; }
  .tp-titlemain h1 { font-size: 26px; }
  .tp-lede { font-size: 14px; margin-top: 6px; }
  .tp-transfer { padding: 18px; gap: 14px; border-radius: 18px; }
  /* 按钮纵排。宽度 100% 一定要限定在 .tp-actions 里 ——
     写成通用 .tp-btn 会连顶栏「返回」一起撑满，那是一条踩过的坑。 */
  .tp-actions { flex-direction: column; gap: 10px; }
  .tp-actions .tp-btn { height: 50px; width: 100%; }
  .tp-actions .tp-btn--back { height: 46px; }
  .tp-about { flex-direction: column; gap: 12px; padding: 18px; }
  .tp-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tp-stat { padding: 13px 14px; }
  .tp-stat b { font-size: 20px; }
  .tp-help { padding: 16px 18px; }
  .tp-snapcap { font-size: 11px; }
  .tp-related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .tp-titlemain h1 { font-size: 23px; }
  .tp-stats { grid-template-columns: 1fr 1fr; }
}