@charset "UTF-8";
/* ============================================================================
   ZVBoard —— 主题层（深色模式 + 切换控件）
   2026-10-12 新增，作为独立文件而非追加进 style.css：
     · style.css 已经 1945 行 / 110KB，再塞 120 行只会更难维护；
     · 切换控件的样式在**明暗两态都要有**，混进主表反而看不清边界；
     · 新建文件对 style.css 是零风险的（比追加更安全）。

   ── 为什么深色模式能靠「只覆盖令牌」实现 ──────────────────────────────────
   style.css 的令牌化程度很高：473 处 var() 引用 vs 84 处硬编码颜色，
   约 85% 走令牌。所以深色模式只需要在 :root 上换一组值，组件规则一行不改。

   ── 配色是算出来的，不是估的 ──────────────────────────────────────────────
   每一组的对比度都按 WCAG 相对亮度公式核对过（正文 AA 需 ≥ 4.5:1）：

     --ink    #e8ebee / --surface #16191d  → 14.6 : 1  ✓✓
     --ink-2  #c5cbd1 / --surface #16191d  → 10.9 : 1  ✓✓
     --mute   #98a1a9 / --surface #16191d  →  7.0 : 1  ✓
     --faint  #7b838b / --surface #16191d  →  4.9 : 1  ✓
     --brand  #4ecb91 / --surface #16191d  →  8.8 : 1  ✓（当文字用）
     #0d1113 文字 / --brand #4ecb91 底     →  9.2 : 1  ✓（填充块上的字）

   ── 一个必须处理的矛盾：品牌绿不能只提亮 ──────────────────────────────────
   `--brand` 在 style.css 里有两类用法，方向相反：
     ① 当**文字/描边**用（43 处）→ 在深底上要够亮，L ≥ 0.215
     ② 当**填充底 + 白字**用（9 处）→ 要够暗让白字可读，L ≤ 0.183
   一个颜色无法同时满足。若直接把 --brand 提亮到 #4ecb91，
   按钮上的白字对比度会掉到 2.35:1 —— 这是典型的「深色模式一开，按钮全瞎」。

   解法：**深色下把 --brand 定为亮绿（供文字/描边用），并逐条把那 9 条
   填充规则的字色改成深墨**（见第 ③ 节）。这是唯一能同时过两头的做法。

   ── 无 JS 的取舍（明确记录，不假装覆盖了） ────────────────────────────────
   深色由 <head> 里那段内联脚本给 <html> 加 data-theme 驱动。
   本站本来就有多处依赖 JS（搜索框快捷键、Cookie 条），不再额外背一个
   「无 JS 也要深色」的维护负担 —— 那意味着令牌要写两遍，改一边忘另一边
   是这类样式表最常见的慢性病。无 JS 时页面保持浅色，`color-scheme:light`
   让表单控件与滚动条也不跳色，行为是**一致可读**而不是半深半浅。
   ========================================================================= */

/* ── ① 切换控件（明暗两态都要有样式，所以不放在 dark 块里）────────────── */
:root { color-scheme: light; }

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 auto;
  padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--ink-2);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.theme-toggle:hover{ background:var(--chip); color:var(--ink); border-color:var(--line-2); }
.theme-toggle:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.theme-toggle svg{ width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }

/* 浅色下显示月亮（点它去深色），深色下显示太阳（点它回浅色） */
.theme-toggle .tt-moon{ display:block; }
.theme-toggle .tt-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .tt-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display:block; }

/* ── ② 深色调色板 ──────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  color-scheme: dark;

  /* 背景三层：由浅到深递进，卡片靠这一层与页面底色分离 */
  --bg:#101317;
  --surface:#16191d;
  --surface-2:#1d2126;

  /* 文字四层 */
  --ink:#e8ebee;      /* 14.6:1 */
  --ink-2:#c5cbd1;    /* 10.9:1 */
  --mute:#98a1a9;     /*  7.0:1 */
  --faint:#7b838b;    /*  4.9:1 */

  /* 描边两层 */
  --line:#252a30;
  --line-2:#343a41;

  /* 填充两层 */
  --chip:#1e2227;
  --soft:#1e2227;
  --soft-2:#282e34;

  /* 品牌绿：亮色档，供「文字/描边/图标」使用 */
  --brand:#4ecb91;
  --brand-deep:#7adcae;
  --brand-weak:rgba(78,203,145,.14);
  --brand-line:rgba(78,203,145,.40);

  --gold:#e0aa4d;
  --gold-weak:rgba(224,170,77,.16);
  --danger:#f28074;

  /* 阴影：深色下要更实，否则卡片边界会消失 */
  --sh-card:0 1px 2px rgba(0,0,0,.45);
  --sh-sm:0 1px 2px rgba(0,0,0,.50);
  --sh-pop:0 12px 28px -6px rgba(0,0,0,.65), 0 4px 10px -4px rgba(0,0,0,.55);
}

/* ── ③ 逐条覆盖（每条都写明为什么不能靠令牌解决）───────────────────────── */

/* ③-1 品牌绿填充块上的白字 → 改成深墨
      style.css 里这 9 处都是 `background:var(--brand); color:#fff`。
      深色下 --brand 变亮，白字对比度只剩 2.35:1，必须改字色。 */
:root[data-theme="dark"] .chips .on a,
:root[data-theme="dark"] .chips a.on,
:root[data-theme="dark"] body:not(.admin) .btn,
:root[data-theme="dark"] .period-switch a.on,
:root[data-theme="dark"] .cycle-switch a.on,
:root[data-theme="dark"] .lvl-3,
:root[data-theme="dark"] .lvl-3 em,
:root[data-theme="dark"] .tag-sponsor,
:root[data-theme="dark"] .ok-msg,
:root[data-theme="dark"] .ok-msg a,
:root[data-theme="dark"] .inline-form button,
:root[data-theme="dark"] .filters button,
:root[data-theme="dark"] .pager .on{ color:#0d1113; }
:root[data-theme="dark"] .ok-msg a{ border-bottom-color:rgba(13,17,19,.55); }
:root[data-theme="dark"] .ok-msg a:hover{ border-bottom-color:#0d1113; }

/* ③-2 .skip 跳转链接 —— 「白字 + background:var(--ink)」在深色下会反色成隐形。
      深色下 --ink 变亮，底变亮而字还是白，等于白底白字。 */
:root[data-theme="dark"] .skip{ color:#101317; }

/* ③-3 后台默认按钮 .btn —— 同上，`background:var(--ink)` + 白字。
      （前台按钮是 .btn 覆盖成 --brand 底，已在 ③-1 处理）*/
:root[data-theme="dark"] .btn{ color:#101317; }

/* ③-4 图标预览占位：原为 #fff，深色下白块会突兀，改用面板色 */
:root[data-theme="dark"] .hub-preview img{ background:var(--surface-2); }

/* ③-5 Cookie 条的阴影：style.css 里硬编码 rgba(0,0,0,.06)，
      深色下几乎不可见，条会和页面糊在一起。 */
:root[data-theme="dark"] .cc-bar{ box-shadow:0 -6px 20px rgba(0,0,0,.45); }

/* ③-6 截图预览 .shot-modal img 刻意**保持白底**：
      产品官网截图绝大多数是浅色的，白色相纸垫比深色垫更贴近真实观感。
      这里特意不覆盖，免得将来有人「顺手统一」把它改掉。 */