/* =========================================================================
   冰山图样式表  ·  暗色档案风格
   站点：moyu15465.top
   -------------------------------------------------------------------------
   整体近黑灰，单一黄铜色点缀，衬线标题。
   版面是一个大框架表格：每层一行，左侧词条卡片格 / 右侧层级叙述。
   想换配色，只改下面 :root 里的变量即可。
   -------------------------------------------------------------------------
   两套主题，靠 <body> 上的类切换：
     （无类）           → Frutiger Aero（默认）
     body.theme-archive → 原来的暗色档案风
   ========================================================================= */

/* =====================================================================
   默认主题 · Frutiger Aero
   ---------------------------------------------------------------------
   2004~2013 那套观感：浅蓝天空、玻璃质感、白色高光边框、圆润光泽。
   和暗色档案风是**镜像**关系 —— 这里是「亮面板浮在更浅的底上」，
   那边是「浅面板浮在更暗的底上」，所以四级台阶的次序一样，整体翻了过来。
   想调深浅：改 --bg-2 / --panel / --panel-2 / --panel-3 四档（同族，一起改）。
   文字对比度都按「落在 --panel-2（纯白）上」算过，注释里标了数值。
   ===================================================================== */
:root {
  /* ---- 四级台阶：天空 → 玻璃面板 → 卡片 → 卡片上端 ---- */
  --bg:        #b9dcf2;   /* 页面底：天空蓝 */
  --bg-2:      #e9f6fe;   /* 大框架表格的底：毛玻璃面板 */
  --bg-2-alpha: rgba(233, 246, 254, .88);   /* 同上带透明 —— 让漂浮语句透上来一丝 */
  --panel:     #f4fbff;   /* 卡片、输入框 */
  --panel-2:   #ffffff;   /* 卡片渐变的上端 */
  --panel-3:   #e2f2fd;   /* 悬停 / 次级面板 */

  /* 玻璃边框：一圈白色高光（Aero 的标志），外面配一层蓝色柔影 */
  --frame-line:  rgba(255, 255, 255, .80);
  --frame-hi:    rgba(255, 255, 255, .95);
  --frame-shadow: 0 18px 44px rgba(32, 84, 126, .22);

  --line:      rgba(86, 138, 176, .20);
  --line-2:    rgba(86, 138, 176, .34);
  --line-3:    rgba(86, 138, 176, .52);

  /* ---- 文字：深蓝系 ----
     正文对比度（on 纯白）：--fg 11.6 · --fg-2 6.3 · --fg-3 5.0（都在 AA 之上）；
     --fg-4 3.4 只用于辅助小字，和暗色主题同一档处理。 */
  --fg:        #0d3a58;
  --fg-2:      #2c6288;
  --fg-3:      #3f7196;
  --fg-4:      #6c9ab5;

  /* ---- 强调色：Aero 蓝 ----
     变量名沿用了 --brass（黄铜）—— 那名字只在暗色主题下名副其实，
     这边它就是整套的主色。 */
  --brass:     #2b8fd6;
  --brass-2:   #4aa8dd;
  --brass-dim: rgba(43, 143, 214, .42);
  --brass-gho: rgba(43, 143, 214, .14);

  --shadow-card: 0 1px 3px rgba(32, 84, 126, .18);

  --shadow-lift: 0 14px 30px rgba(32, 84, 126, .28);

  /* 背景漂浮语句的配色（drift.js 读这 6 个变量再写进 SVG 贴图）：
     Aero 下是一组「水印蓝」—— 比天空略深一点，看得见但不抢眼。 */
  --drift-1: #7fb4d6;
  --drift-2: #9cc4de;
  --drift-3: #6ea8cc;
  --drift-4: #a9cfe6;
  --drift-5: #86bcd9;
  --drift-6: #bcd9ea;

  /* ---- 零散语义色（两套主题各配一组，代码里靠这些变量区分亮/暗）----
     --scrim     顶栏、浮层的底             --glow   数字 / 标题的光晕
     --wash      层级栏、模块块的底          --wash-hi 同上（悬停）
     --code-bg   正文行内代码的底             --ink-accent 落在强调色块上的字
     --scroll    滚动条 */
  --scrim:      rgba(255, 255, 255, .82);
  --glow:       rgba(255, 255, 255, .85);
  --wash:       rgba(255, 255, 255, .62);
  --wash-hi:    rgba(255, 255, 255, .88);
  --code-bg:    rgba(43, 143, 214, .10);
  --ink-accent: #ffffff;
  --scroll:     #9cc4de;
  /* 折角/徽章的亮面与暗面、小浮层底、大浮层阴影、标签的极淡底 */
  --accent-hi:  #ffffff;
  --accent-lo:  #1b6ea8;
  --scrim-2:    rgba(255, 255, 255, .93);
  --shadow-pop: 0 18px 44px rgba(32, 84, 126, .26);
  --hairline:   rgba(13, 58, 88, .05);

  /* Aero 时代的标题字体是无衬线的（Frutiger / Segoe UI 这一路），
     所以这里的「标题字体」也不再是衬线 —— 名字没改，值换了。 */
  --serif: "Segoe UI", Frutiger, "Myriad Pro", "Noto Sans SC",
           "Source Han Sans SC", "Microsoft YaHei", "PingFang SC",
           system-ui, sans-serif;
  --sans:  "Segoe UI", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei",
           "PingFang SC", system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

/* =====================================================================
   可切换主题 · 暗色档案风
   ---------------------------------------------------------------------
   下面这套变量就是原来那一版「暗色档案风」，值一字未改，
   只是从 :root 挪到了 html.theme-archive 下 —— 特异性更高，
   会盖掉上面 Aero 的同名变量。顶栏有切换开关。
   （类挂在 <html> 上而不是 <body>：<head> 里的内联脚本能提前设好，
     刷新时不会先闪一下 Aero 再跳成暗色。）
   ===================================================================== */
html.theme-archive {
  /* ---- 三级台阶：页面（中性炭灰） → 大框架表格（冷调石板蓝） → 卡片（更浅的蓝灰）
     -------------------------------------------------------------------------
     2026-09-15 第二次调整：原来页面 / 表格 / 卡片全是同一族中性灰，彼此只差一两个
     色阶，整块糊成一片、词条和层级都不跳。现在把「表格区」整体换成**冷调石板蓝**
     并提亮一档，卡片再往上提 —— 于是深灰页面上浮起一张偏蓝的档案纸，层级一目了然。
     想再亮/再暗：改下面 --bg-2 / --panel / --panel-2 / --panel-3 四档即可
     （它们同族，一起改才不会失配）。 */
  --bg:        #17181c;   /* 页面底色（中性炭灰，不动） */
  --bg-2:      #232a35;   /* 大框架表格的底（石板蓝，比页面亮一档） */
  --bg-2-alpha: rgba(35, 42, 53, .93);   /* 同上，带一点透明 —— 让背景漂浮语句透上来一丝 */
  --panel:     #2c3542;   /* 卡片、输入框 */
  --panel-2:   #364150;   /* 卡片渐变的上端 */
  --panel-3:   #3f4b5b;   /* 悬停 / 次级面板 */

  /* 框架表格的描边带一点冷色，配合蓝色底；再给上沿一道极淡的高光，让它像「浮起来」 */
  --frame-line:  rgba(150, 190, 235, .20);
  --frame-hi:    rgba(190, 220, 255, .07);
  --frame-shadow: 0 16px 40px rgba(0, 0, 0, .30);

  --line:      rgba(255, 255, 255, .09);
  --line-2:    rgba(255, 255, 255, .16);
  --line-3:    rgba(255, 255, 255, .25);

  /* ---- 文字：暖调灰白 ----
     底色变亮后，原来的 --fg-3 / --fg-4 会掉到 AA 以下，所以各提一档。
     正文对比度：--fg 9.8 · --fg-2 6.7 · --fg-3 4.8（都在 AA 之上）。 */
  --fg:        #e6e4df;
  --fg-2:      #b3b0a9;
  --fg-3:      #96948e;
  --fg-4:      #74736c;

  /* ---- 唯一强调色：暗黄铜 ---- */
  --brass:     #c2a970;
  --brass-2:   #dcc48d;
  --brass-dim: rgba(194, 169, 112, .40);
  --brass-gho: rgba(194, 169, 112, .13);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .38);
  --shadow-lift: 0 12px 28px rgba(0, 0, 0, .48);

  /* 漂浮语句的配色（原来那组暖灰 / 雾色） */
  --drift-1: #cdb27e;
  --drift-2: #b8788a;
  --drift-3: #7f9dc0;
  --drift-4: #6fae9e;
  --drift-5: #9c86c0;
  --drift-6: #b9b4a8;

  /* 零散语义色（值都是原来那些硬编码，只是收进了变量） */
  --scrim:      rgba(23, 24, 28, .84);
  --glow:       rgba(212, 187, 132, .3);
  --wash:       rgba(163, 203, 245, .055);
  --wash-hi:    rgba(163, 203, 245, .11);
  --code-bg:    rgba(0, 0, 0, .30);
  --ink-accent: #241d0e;
  --scroll:     #3b3c44;
  /* 这五个的值就是当初硬编码的那几个，保证暗色主题和改动前完全一致 */
  --accent-hi:  #f2e0ae;
  --accent-lo:  #8d7541;
  --scrim-2:    rgba(12, 13, 16, .93);
  --shadow-pop: 0 20px 48px rgba(0, 0, 0, .62);
  --hairline:   rgba(255, 255, 255, .022);

  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia,
           "Times New Roman", "Microsoft YaHei", serif;
  --sans:  "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei",
           "PingFang SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.iceberg-page {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  background-color: var(--bg);
  /* ---- 氛围层（Aero）：天空 + 顶部天光 + 一道斜射反光 + 地平线亮雾 ----
     想调天空色调，改最下面那条 linear-gradient 的三个停靠色就行。 */
  background-image:
    radial-gradient(120% 56% at 50% -8%, rgba(255, 255, 255, .95), transparent 62%),
    linear-gradient(112deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(1400px 720px at 50% 106%, rgba(255, 255, 255, .62), transparent 70%),
    linear-gradient(180deg, #9ed0ed 0%, #c6e5f8 42%, #eef9ff 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------
   可切换主题 · 暗色档案风的氛围层
     1 胶片颗粒   2/3 极细档案格线   4 顶部暖灯   5 底部冷雾   6 中央微亮
   不想要某一层，把对应的那行删掉、同时删掉 background-size /
   background-repeat 里同位置的项即可。
   ------------------------------------------------------------------ */
html.theme-archive body.iceberg-page {
  background-image:
    /* 1 · 颗粒 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E"),
    /* 2 · 竖格线 */
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 76px),
    /* 3 · 横格线 */
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, .015) 0 1px, transparent 1px 76px),
    /* 4 · 顶上那盏暖灯 */
    radial-gradient(1200px 640px at 50% -12%, rgba(194, 169, 112, .085), transparent 62%),
    /* 5 · 底下的冷雾 */
    radial-gradient(1100px 820px at 50% 106%, rgba(124, 136, 152, .07), transparent 62%),
    /* 6 · 中段稍微托一下 */
    radial-gradient(1600px 1100px at 50% 44%, rgba(255, 255, 255, .022), transparent 72%);
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 76px 76px, 76px 76px, auto, auto, auto;
  overflow-x: hidden;
}

/* 四周压一层暗角，像只有头顶一盏灯 —— 固定在视口上，不跟着页面滚。
   只有暗色档案风才压：Aero 是亮的，压完整个画面会发脏。 */
html.theme-archive body.iceberg-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(132% 92% at 50% 42%, transparent 54%, rgba(10, 11, 13, .34) 100%);
}

::selection { background: var(--brass-dim); color: #14151a; }

/* =====================================================================
   背景漂浮语句（drift.js 生成三层平铺贴图，这里只管几何与动画）
   ---------------------------------------------------------------------
   三层叠在 .bg-drift-rot 里（旋转挂在容器上，keyframes 里就完全不出现
   var() —— 某些解析器会静默丢掉带自定义属性的整条动画，图案在但不动）。
   距离 420px 必须正好等于一个贴图周期，否则循环接缝会跳；
   420 也写在 drift.js 的 TILE 里，**两边必须一致**（测试会断言）。
   尺寸放到 120% 是为了旋转之后不露出画面外的空白。
   ===================================================================== */
.bg-drift-host {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.bg-drift-rot {
  position: fixed;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  transform: rotate(-2.6deg);
}
.bg-drift {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  background-repeat: repeat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
/* 往右 / 往左两套；方向由 drift.js 加 class 决定 */
.bg-drift.dir-right { animation-name: bg-drift-r; }
.bg-drift.dir-left  { animation-name: bg-drift-l; }
@keyframes bg-drift-r {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(420px, 0, 0); }
}
@keyframes bg-drift-l {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-420px, 0, 0); }
}
/* 小屏少一层、再淡一点：手机上省电，也别糊住正文 */
@media (max-width: 720px) {
  .bg-drift-far { display: none; }
  .bg-drift { opacity: .6 !important; }
}
/* 系统里开了「减少动态效果」就让它静止（图案还在，只是不动了） */
@media (prefers-reduced-motion: reduce) {
  .bg-drift { animation: none !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--scroll) 78%, var(--fg)); }

/* =====================================================================
   顶部
   ===================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(12px, 3.5vw, 30px);
  background: var(--scrim);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.topbar .brand b { color: var(--brass); font-weight: 700; }

.topbar .tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.topbar .tab {
  padding: 5px 13px;
  border-radius: 3px;
  font-size: 12.5px;
  text-decoration: none;
  color: var(--fg-3);
  border: 1px solid transparent;
  transition: .16s ease;
  white-space: nowrap;
}
.topbar .tab:hover { color: var(--fg); border-color: var(--line-2); }
.topbar .tab.is-active { color: var(--brass-2); border-color: var(--brass-dim); background: var(--brass-gho); }

.topbar .tools { display: flex; align-items: center; gap: 8px; }

.search-box { position: relative; display: flex; align-items: center; }
.search-box .ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--fg-4); pointer-events: none;
}
.search-box input {
  width: clamp(110px, 20vw, 210px);
  padding: 7px 11px 7px 30px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: .16s ease;
}
.search-box input::placeholder { color: var(--fg-4); }
.search-box input:focus { border-color: var(--brass-dim); background: var(--panel-2); }

/* ---------------- 主题切换（顶栏那枚圆钮） ----------------
   默认 Frutiger Aero，点一下切到暗色档案风，选择存在 localStorage。
   全用变量写，所以两种主题下它自己也是协调的。 */
.themebtn {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: .16s ease;
}
.themebtn:hover {
  color: var(--fg);
  border-color: var(--brass-dim);
  background: var(--panel-2);
  transform: translateY(-1px);
}
.themebtn:focus-visible { outline: 2px solid var(--brass-dim); outline-offset: 2px; }

/* =====================================================================
   页头
   ===================================================================== */
.head {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(30px, 5.5vw, 62px) clamp(14px, 3vw, 30px) 26px;
  text-align: center;
}

/* 样式变量：数据里写了 style / st 才会被覆盖，否则全用下面的兜底值（= 当前外观）。
   改动请用编辑器里的「🎨 外观样式」，不要直接改这里。 */
h1.title {
  margin: 0 0 14px;
  font-family: var(--serif);
  /* 字号取用户设定值作为上限，窄屏自动缩到 62%，和原来 clamp 的手感一致 */
  font-size: clamp(calc(var(--st-title-size, 40px) * .62), 4.4vw, var(--st-title-size, 40px));
  font-weight: var(--st-title-weight, 700);
  letter-spacing: var(--st-title-space, .06em);
  line-height: var(--st-title-line, 1.35);
  color: var(--st-title-color, var(--fg));
}

p.desc {
  margin: 0 auto 22px;
  max-width: 860px;
  text-align: justify;
  font-size: 13px;
  line-height: 2;
  color: var(--fg-2);
}
p.desc a { color: var(--brass); }

.stats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 24px;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--fg-3);
}
.stats .s {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
/* 数字：黄铜色 + 加粗 + 放大 —— 这一行是「做了多少」的门面 */
.stats b {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--brass-2);
  text-shadow: 0 0 14px var(--glow);
}
/* 「更新 日期」那颗：可悬停 / 可点，会跳出最近改过的词条 */
.stats .upd.is-live {
  padding: 4px 11px 4px 12px;
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  background: var(--brass-gho);
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.stats .upd.is-live:hover,
.stats .upd.is-live:focus-visible {
  background: color-mix(in srgb, var(--brass) 26%, transparent);
  border-color: var(--brass);
  outline: none;
}
.stats .upd.is-live b { font-size: 13px; text-shadow: none; }
.stats .upd .caret {
  font-style: normal;
  font-size: 8px;
  margin-left: 4px;
  color: var(--brass);
  opacity: .85;
}

/* ---------------- 最近更新：悬停面板 ---------------- */
.recent-pop {
  position: fixed;
  left: 0;
  top: -9999px;
  z-index: 70;
  display: none;
  width: min(430px, calc(100vw - 24px));
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  text-align: left;
}
.recent-pop.is-on { display: block; }
.recent-pop .rhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 11px 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--brass);
  border-bottom: 1px solid var(--line);
}
.recent-pop .rhead .rn { color: var(--fg-4); letter-spacing: .06em; }
.recent-pop .rlist { padding: 4px; }
.recent-pop .rrow {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 8px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.recent-pop .rrow:hover {
  background: color-mix(in srgb, var(--brass) 10%, transparent);
  border-left-color: var(--brass);
}
.recent-pop .rno {
  flex: none;
  width: 15px;
  padding-top: 1px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg-4);
  text-align: center;
}
.recent-pop .rmain { flex: 1 1 auto; min-width: 0; }
.recent-pop .rname {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--fg);
}
.recent-pop .rrow:hover .rname { color: var(--brass-2); }
.recent-pop .rnote {
  display: block;
  margin-top: 1px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-4);
}
.recent-pop .rprev {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg-3);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.recent-pop .rprev.is-none { color: var(--fg-4); font-style: italic; }
.recent-pop .rat {
  flex: none;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--fg-4);
}
.recent-pop .rempty {
  padding: 12px 12px 4px;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--fg-3);
}
.recent-pop .rempty .rhint { display: block; margin-top: 2px; color: var(--fg-4); }
.recent-pop .rfoot {
  padding: 7px 11px 8px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg-4);
}
@media (max-width: 560px) {
  .stats { gap: 8px 16px; }
  .stats b { font-size: 15px; }
  .recent-pop .rat { display: none; }
}

/* =====================================================================
   标签图例
   ===================================================================== */
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  max-width: 1000px;
  margin: 0 auto 30px;
}
.tags .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 11.5px;
  cursor: pointer;
  user-select: none;
  /* 文字比正文次级色再亮一档 + 一点点底：整排药丸才有存在感 */
  color: var(--fg-2);
  background: var(--hairline);
  border: 1px solid var(--line-2);
  transition: .15s ease;
  white-space: nowrap;
}
.tags .tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tc, #888);
  opacity: 1;
}
.tags .tag:hover { color: var(--fg); border-color: var(--line-3); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.tags .tag.is-on { color: var(--bg); background: var(--tc, #ccc); border-color: var(--tc, #ccc); font-weight: 700; }
.tags .tag.is-on::before { background: var(--bg); opacity: .55; }
/* 只有「正在筛选、且它一条都筛不出来」才压暗（整图还没词条时不压，见 paintTags） */
.tags .tag.is-empty { opacity: .5; }
.tags .tag .n { font-family: var(--mono); font-size: 10.5px; opacity: .75; }

/* 多选标签时出现的「同时满足 N 个 · 清空标签」 */
.tags .tag.tag-clear { border-style: dashed; border-color: var(--brass-dim); color: var(--brass); }
.tags .tag.tag-clear::before { display: none; }
.tags .tag.tag-clear:hover { background: var(--brass-gho); border-color: var(--brass); }
.tags .tag.tag-clear .t { font-weight: 600; }

/* =====================================================================
   大框架表格
   ===================================================================== */
.frame {
  max-width: 1240px;
  margin: 0 auto 60px;
  padding: 0 clamp(10px, 2vw, 24px);
}
.frame-inner {
  border: 1px solid var(--frame-line);
  border-radius: 3px;
  /* 用带一点透明的底：背后的漂浮语句会极淡地透上来。
     想让它完全不透，把这行换回 `var(--bg-2)` 即可。 */
  background: var(--bg-2-alpha);
  /* 上沿一道极淡的高光 + 一圈落影：让这块「档案纸」从深灰页面里浮出来 */
  box-shadow: inset 0 1px 0 var(--frame-hi), var(--frame-shadow);
  overflow: hidden;
}

.tier-row {
  display: grid;
  /* 层级在左（固定 288px）、词条在右（自适应）。
     DOM 里层级也已经排在前面，所以窄屏切成竖向堆叠时顺序天然正确。 */
  grid-template-columns: 288px minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.tier-row:last-child { border-bottom: 0; }
.tier-row.is-hidden { display: none; }

/* ---- 右：词条卡片 ---- */
.tier-entries { padding: 20px 22px 24px; min-width: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 7px;
}

/* 空层级的占位。层级不会因为词条被删光而消失，这里给个看得过去的空位，
   免得那一行看起来像坏掉了。（层级只会在手动删除时才真的消失） */
.tier-empty {
  padding: 20px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  font-size: 12px;
  color: var(--fg-4);
  text-align: center;
  letter-spacing: .1em;
}

.card {
  position: relative;
  display: block;
  padding: 10px 22px 11px 14px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--fg);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  min-width: 0;
  cursor: pointer;
}
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--ac, var(--line-3));
  opacity: .8;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--brass-dim);
  box-shadow: var(--shadow-lift);
}
.card:hover::before { opacity: 1; background: var(--brass); }

.card .ct {
  /* 最多两行，超出打省略号。卡片宽度只有 160px 上下，长名字不限行会被撑成
     四五行的"文字墙"，同一行里其它卡片也被迫跟着长高。
     完整名称放在卡片的 title 属性上，鼠标停一下就能看到。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--st-card-size, 12.8px);
  font-weight: var(--st-card-weight, 600);
  line-height: var(--st-card-line, 1.5);
  letter-spacing: var(--st-card-space, normal);
  color: var(--st-card-color, var(--fg));
  word-break: break-word;
}
/* 名称里 ※ 后面摘出来的副标：比主名小一档、比备注亮一点，层次一眼分得开 */
.card .csub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: calc(var(--st-card-size, 12.8px) * .84);
  line-height: 1.45;
  color: var(--fg-3);
  word-break: break-word;
}
.card .cs {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--st-card-note-size, 10.5px);
  line-height: var(--st-card-note-line, 1.5);
  letter-spacing: var(--st-card-note-space, normal);
  color: var(--st-card-note-color, var(--fg-4));
  word-break: break-word;
}

.card .cmark {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 10px;
  line-height: 1;
  color: var(--brass);
  opacity: 0;
  transition: opacity .16s ease;
}
.card:hover .cmark { opacity: .9; }
.card.has-detail .cmark { opacity: .42; }

.card .cthumb {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 8px;
  background: var(--panel-3);
  filter: saturate(.72) brightness(.88);
}
.card:hover .cthumb { filter: saturate(.95) brightness(1); }

.card .cdots {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}
.card .cdots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: block;
  opacity: .8;
}

/* 「已复活」折角：卡片右上角像被折起一角，折面上印着字。
   三角形用 clip-path 切出来，文字沿斜边排 45°。
   够显眼，但不至于把标题的注意力抢走。 */
.card .revived {
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 58px;
  pointer-events: none;
  z-index: 2;
}
.card .revived::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 折面：亮 → 暗，看起来像一张有厚度的纸被翻起来 */
  background: linear-gradient(225deg, var(--accent-hi) 0%, var(--brass) 48%, var(--accent-lo) 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  -webkit-filter: drop-shadow(-2px 2px 5px rgba(0, 0, 0, .5));
  filter: drop-shadow(-2px 2px 5px rgba(0, 0, 0, .5));
}
.card .revived i {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(5px, -5px) rotate(45deg);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-accent);
}

.card.is-hidden { display: none; }

/* ---- 同作者分支：悬浮卡片时从右边「长」出来的一排 ----
   列表本身不变，每部作品各占一张卡；这里只是悬浮时牵出去的一支。
   位置由 JS 计算（贴卡片右侧，放不下就翻到左边），连线画在下面那个 svg 里。 */
.apeek {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 58;
  width: max-content;
  max-width: 302px;
  padding: 10px 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateX(-7px);
  pointer-events: none;
  transition: opacity .17s ease, transform .17s ease;
}
.apeek.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.apeek.is-on.is-flip { transform: none; }

.apeek-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1px 4px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 7px;
}
.apeek-au {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 196px;
}
.apeek-n {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--fg-4);
}
.apeek-list { display: grid; gap: 5px; }
.apeek-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 9px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  border-left: 2px solid var(--brass-dim);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--fg);
  text-decoration: none;
  transition: background .14s ease, border-color .14s ease;
}
/* 挂在这一页下面的「子作品」：左线改成点状，跟跨层牵来的区分开 */
.apeek-item.is-sub { border-left-style: dotted; }
.apeek-thumb {
  flex: none;
  width: 46px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
}
.apeek-thumb.is-none { /* 没图就留一块安静的底，别让文字跳位 */ }
.apeek-body { flex: 1 1 auto; min-width: 0; }
.apeek-item:hover {
  background: color-mix(in srgb, var(--brass) 16%, transparent);
  border-left-color: var(--brass);
}
/* 出场：从卡片那边崩过来，错开一点点，先过曝一下再落到本色
   —— 就是「啪」地散开又立刻合上的那一下。克制版，不做真碎片。 */
@keyframes peekShardIn {
  0% {
    opacity: 0;
    transform: translate(var(--dx, -22px), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(.84);
    filter: brightness(2.6) saturate(.35);
  }
  52% { opacity: 1; filter: brightness(1.45) saturate(.9); }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
.apeek.is-on .apeek-item {
  animation: peekShardIn .36s cubic-bezier(.18, .86, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}
.apeek-t { display: block; font-size: 12px; font-weight: 600; line-height: 1.35; }
.apeek-s { display: block; margin-top: 1px; font-size: 10.5px; color: var(--fg-3); }
.apeek-lv {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--fg-4);
}

/* 连线：几条从卡片牵到每一条的曲线。
   出场是「被拉出来」——dashoffset 从整条长度收到 0，看着像电流窜过去。 */
.apeek-lines {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 57;
  overflow: visible;
  pointer-events: none;
}
.apeek-line {
  fill: none;
  stroke: var(--brass-dim);
  stroke-width: 1;
  opacity: .9;
  stroke-dasharray: var(--len, 220);
  stroke-dashoffset: var(--len, 220);
  animation: peekDraw .30s cubic-bezier(.2, .9, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}
@keyframes peekDraw {
  to { stroke-dashoffset: 0; }
}
.apeek-dot {
  fill: var(--brass);
  animation: peekDot .16s ease backwards;
  animation-delay: calc(var(--i, 0) * 42ms + 250ms);
}
@keyframes peekDot {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .apeek.is-on .apeek-item,
  .apeek-dot { animation: none !important; }
  .apeek-line {
    animation: none !important;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* Aero 下让它也带一层玻璃（跟框架、顶栏一个路子） */
html:not(.theme-archive) .apeek {
  background: color-mix(in srgb, var(--glass) 86%, #ffffff);
  border-color: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

/* ---- 左：层级（罗马数字 + 名称 + 这一层的叙述） ---- */
.tier-note {
  padding: 20px 20px 22px;
  border-right: 1px solid var(--line);
  /* 比右边再亮一点点（冷色水洗），两列结构一眼就分得开 */
  background: var(--wash);
  min-width: 0;
}

.tier-note .lv {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 10px;
}
.tier-note .lv .num {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  color: var(--st-tier-num-color, var(--brass));
  letter-spacing: .04em;
}
.tier-note .lv .nm {
  font-family: var(--serif);
  font-size: var(--st-tier-size, 14.5px);
  font-weight: var(--st-tier-weight, 700);
  letter-spacing: var(--st-tier-space, .06em);
  color: var(--st-tier-color, var(--fg));
  line-height: var(--st-tier-line, 1.4);
}
.tier-note .lv .cnt {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-4);
}

.tier-note .nar {
  margin: 0;
  font-size: var(--st-tier-nar-size, 12.2px);
  line-height: var(--st-tier-nar-line, 1.95);
  letter-spacing: var(--st-tier-nar-space, normal);
  color: var(--st-tier-nar-color, var(--fg-3));
  text-align: justify;
}
.tier-note .nar:empty::before {
  content: "（这一层的叙述还没写）";
  color: var(--fg-4);
}

/* ---------------- 层级折叠 ---------------- */
.tier-note .lv .tier-toggle {
  flex: none;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg-3);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.7;
  cursor: pointer;
  white-space: nowrap;
  transition: .15s ease;
}
.tier-note .lv .tier-toggle:hover {
  color: var(--brass-2);
  border-color: var(--brass-dim);
  background: var(--brass-gho);
}

.tier-row.is-collapsed .cards,
.tier-row.is-collapsed .tier-empty { display: none; }

.tier-folded {
  display: none;
  padding: 15px 12px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  font-size: 12px;
  color: var(--fg-4);
  letter-spacing: .1em;
}
.tier-row.is-collapsed .tier-folded { display: block; }

/* 正在搜索 / 按标签筛选时忽略折叠，否则搜到了却看不见 */
body.is-filtering .tier-row.is-collapsed .cards { display: grid; }
body.is-filtering .tier-row.is-collapsed .tier-empty { display: block; }
body.is-filtering .tier-row.is-collapsed .tier-folded { display: none; }

/* =====================================================================
   词条详情页
   ===================================================================== */
.detail { display: none; }
body.is-detail .chart { display: none; }
body.is-detail .detail { display: block; }

.detail-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px clamp(12px, 3vw, 30px) 90px;
}

/* ---- 档案卡：整篇文章的容器 ----
   和「大框架表格」用同一族石板蓝表面，所以详情页看起来像从表格里抽出来的一页纸，
   而不是几段裸文字浮在深色背景上。 */
.dcard {
  --dg: clamp(14px, 2.6vw, 24px);   /* 卡内左右留白 */
  position: relative;
  border: 1px solid var(--frame-line);
  border-radius: 4px;
  background: var(--bg-2-alpha);
  box-shadow: inset 0 1px 0 var(--frame-hi), var(--frame-shadow);
  padding-bottom: clamp(16px, 2.6vw, 22px);
  overflow: hidden;
}
/* 顶端一道黄铜横线，像档案夹的书脊标 */
.dcard::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass) 0%, color-mix(in srgb, var(--brass) 30%, transparent) 38%, transparent 76%);
  pointer-events: none;
}

.dcard .dhead { padding: 24px var(--dg) 0; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 26px;
  padding: 5px 13px;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--fg-3);
  background: transparent;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: .16s ease;
}
.back:hover { color: var(--brass-2); border-color: var(--brass-dim); }

/* 面包屑：从图表一路到当前页，中间每一段都能点回去 —— 这是「返回」的正解，
   不用去够浏览器那个返回键。段落多了会自动换行。 */
.detail .dpath {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--fg-4);
  margin-bottom: 10px;
}
.detail .dpath a {
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .14s ease;
}
.detail .dpath a:hover { color: var(--brass-2); border-bottom-color: var(--brass-dim); }
.detail .dpath .sep { color: var(--fg-4); opacity: .55; }
.detail .dpath .cur { color: var(--fg-2); }
.detail h2.dtitle {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(21px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--fg);
}
/* 详情页的「已复活」：卡片上是折角，这里换成一块小牌子 */
.detail .drevived {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-accent);
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--brass) 100%);
  border-radius: 2px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
/* 名称里 ※ 后面的别名 / 补充说明。夹在主名和备注之间：
   比主名小一档、比备注大一点，读者一眼能分出"哪个才是标题"。 */
.detail .dalias {
  margin: -4px 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-3);
}
.detail .dsub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 16px;
}
.detail .dtags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0; }
.detail .dtags span {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
}
.detail .dtags span::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tc, #888);
  margin-right: 6px;
  vertical-align: middle;
}

/* 题图：卡内满宽出血（不带左右留白），上下各一道细线把它和正文分开 */
.dcard .dhero {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 20px 0 0;
  background: var(--panel);
}

/* 正文里插的图 —— 编辑器「🖼 插入图片」写出来的就是这一类。
   ![说明](地址) 默认铺满；![说明](地址 =60) 会按百分比收窄并居中。 */
.dcard .dimg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--panel);
}

/* ---- 正文面板：比卡片再亮一档，所以正文「浮」在卡片上 ----
   这就是用户要的「给正文一个框 / 一块底色」，不再和背景贴在一起。 */
.dcard .dbody {
  margin: 20px var(--dg) 0;
  padding: clamp(18px, 3vw, 26px) clamp(16px, 3vw, 26px);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  line-height: 2.1;
  color: var(--fg-2);
}
.detail .dbody p { margin: 0 0 1.15em; }
.detail .dbody h3 {
  margin: 1.7em 0 .7em;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--fg);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-2);
}
.detail .dbody > :first-child { margin-top: 0; }
.detail .dbody ul { margin: 0 0 1.15em; padding-left: 1.3em; }
.detail .dbody li { margin-bottom: .4em; }
.detail .dbody blockquote {
  margin: 0 0 1.15em;
  padding: 2px 0 2px 15px;
  border-left: 2px solid var(--brass-dim);
  /* 正文面板比卡片亮，--fg-3 在上面只有 4.1:1（低于 AA），所以用 --fg-2 */
  color: var(--fg-2);
  font-style: italic;
}
.detail .dbody a { color: var(--brass); text-decoration: none; border-bottom: 1px solid var(--brass-dim); }
.detail .dbody a:hover { color: var(--brass-2); }
.detail .dbody strong { color: var(--fg); font-weight: 700; }
.detail .dbody code {
  font-family: var(--mono);
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 2px;
  /* 面板底已经是浅色，代码块改成「往内凹」的暗底才分得出来 */
  background: var(--code-bg);
  color: var(--brass-2);
}
.detail .dbody img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  border-radius: 3px;
  border: 1px solid var(--line-2);
  margin: 0 0 1.15em;
}
.detail .dbody .empty {
  color: var(--fg-4);
  font-style: italic;
  padding: 20px 6px;
  text-align: center;
}
/* ---- 模块（子页面）：详情页正文下面挂的"下一层"入口 ----
   每个模块自己也是一个完整页面，点进去就是更深一层，可以无限往下挂。
   模块排在一个 12 列的网格里：宽度不满 12 列的模块，后面的会自己补上来
   并排成一行。编辑器拖四角改的就是「占几列」和高度。 */
.dblocks { margin: 20px var(--dg) 0; }

/* 这行只给编辑者看，访客端不显示（编辑模式在 admin.css 里放开） */
.dblk-head {
  display: none;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--fg-3);
}
.dblk-head .n { color: var(--brass-2); font-weight: 700; font-size: 12px; letter-spacing: 0; }
.dblk-head .dblk-tip {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--fg-4);
}

/* 12 列网格：--w = 占几列（1..12，不写 = 整行），--h = 高度（不写 = 跟内容） */
.dblk-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px;
}
.dblk-row {
  position: relative;
  grid-column: span var(--w, 12);
  min-height: var(--h, 0);
}

/* 窄屏挤不下 12 列，退回单列堆叠（并排的模块自动上下排） */
@media (max-width: 640px) {
  .dblk-list { grid-template-columns: 1fr; }
  .dblk-row { grid-column: span 1; }
}

.dblk {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* 块被拉高时，内容在块里垂直居中 */
  height: 100%;
  padding: 11px 30px 11px 15px;
  border-radius: 3px;
  border: 1px solid var(--line-2);
  background: var(--wash);
  color: var(--fg);
  text-decoration: none;
  transition: .16s ease;
}
/* 左侧一道黄铜细条：和词条卡片同一套语言，但用黄铜色区分"这是模块不是词条" */
.dblk::before {
  content: "";
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--brass);
  opacity: .7;
}
.dblk:hover {
  background: var(--wash-hi);
  border-color: var(--brass-dim);
  transform: translateY(-1px);
}
.dblk:hover::before { opacity: 1; }
.dblk .bt {
  display: block;
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: .02em;
  word-break: break-word;
}
.dblk .bs {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-4);
  word-break: break-word;
}
.dblk .bm {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brass);
  opacity: .5;
  font-size: 13px;
  line-height: 1;
}
.dblk:hover .bm { opacity: 1; }

.dcard .dfoot { padding: 18px var(--dg) 0; }
.detail .dlink {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 3px;
  border: 1px solid var(--brass-dim);
  background: var(--brass-gho);
  color: var(--brass-2);
  font-size: 13px;
  text-decoration: none;
}
.detail .dlink:hover { background: color-mix(in srgb, var(--brass) 22%, transparent); }

/* =====================================================================
   空结果 / 页脚
   ===================================================================== */
.no-result {
  display: none;
  margin: 60px auto;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}
.no-result.is-on { display: block; }

.foot {
  padding: 26px 20px 46px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--fg-4);
  line-height: 2.2;
  border-top: 1px solid var(--line);
}
.foot a { color: var(--fg-3); text-decoration: none; }
.foot a:hover { color: var(--brass); }

/* =====================================================================
   门户页
   ===================================================================== */
.boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.board {
  display: block;
  padding: 24px 24px 22px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--fg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.board:hover { transform: translateY(-3px); border-color: var(--brass-dim); box-shadow: var(--shadow-lift); }
.board .idx {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--fg-4);
  margin-bottom: 12px;
}
.board h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.45;
}
.board p { margin: 0; font-size: 12.6px; line-height: 1.9; color: var(--fg-3); }
.board .go {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--brass);
}

/* =====================================================================
   图片灯箱
   ===================================================================== */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim-2);
  backdrop-filter: blur(6px);
}
.lb.is-on { display: flex; }
.lb-inner { max-width: min(920px, 94vw); max-height: 90vh; overflow: auto; text-align: center; }
.lb-inner > img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 3px;
  border: 1px solid var(--line-2);
}

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width: 900px) {
  /* 窄屏堆叠：层级在 DOM 里已经排在前面，顺着排就是「层级在上、词条在下」 */
  .tier-row { display: flex; flex-direction: column; }
  .tier-note {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 18px 18px;
  }
  .tier-row:last-child .tier-note { border-bottom: 0; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
  p.desc { text-align: left; }
}
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar .tabs { order: 3; width: 100%; margin-left: 0; justify-content: center; }
  .topbar .tools { margin-left: auto; }
  .cards { grid-template-columns: 1fr 1fr; gap: 6px; }
  .tier-entries { padding: 14px 12px 18px; }
  .card { padding: 9px 20px 9px 12px; }
  .card .ct { font-size: 12.2px; }
}

@media print {
  .topbar { display: none; }
  .recent-pop { display: none !important; }
  .bg-drift-host { display: none !important; }
  body.iceberg-page { background: #fff; color: #000; }
  /* 打印时把详情卡片翻成白纸黑字，否则会印出两个深色块 */
  .dcard { background: #fff; border-color: #bbb; box-shadow: none; }
  .dcard::before { display: none; }
  .dcard .dbody { background: #fff; border-color: #ccc; box-shadow: none; color: #000; }
  .dcard .dbody blockquote { color: #333; }
  .dcard .dbody code { background: #eee; color: #000; }
  .dcard .dbody h3 { color: #000; border-bottom-color: #ccc; }
}

/* =====================================================================
   Frutiger Aero 专属视觉
   ---------------------------------------------------------------------
   2026-09-17 第二版：第一版只换了配色，反馈是「偏蓝一点、没有 FA 的元素」。
   这里补上真正属于那个年代的东西：

     · Aero Glass —— 半透明面板 + backdrop-filter 模糊 + 一圈白色高光边
     · 光泽（Gloss）—— 面板顶上那道"果冻"反光，中间一条分明暗分界
     · Aurora 光带 —— 底部两道柔光弧 + 顶部天光
     · 气泡 —— 一张 520×520 的贴图平铺，大小不一、极淡
     · 大圆角 —— 那个年代的塑料面板都是圆的

   ⚠️ 整段包在 html:not(.theme-archive) 里 —— 切到暗色档案风时完全不参与，
      那边保持和改动前 100% 一致。
   ⚠️ backdrop-filter 只给「大面板」（框架、顶栏、详情卡）用，
      几十张卡片逐个模糊会拖垮滚动。
   ===================================================================== */
html:not(.theme-archive) {
  --r: 12px;                            /* Aero 的圆角尺度 */
  --glass: rgba(255, 255, 255, .58);    /* 玻璃面板的底 */
  --glass-hi: rgba(255, 255, 255, .95); /* 玻璃上沿那道高光边 */
}

/* ---- 1. 天空之上再叠 Aurora 光带 + 气泡 ---- */
html:not(.theme-archive) body.iceberg-page {
  background-image:
    /* 气泡贴图：一张 520×520 里放六颗大小不一的圆，平铺出去 */
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .62) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 9%,  rgba(255, 255, 255, .45) 0 4px, transparent 5px),
    radial-gradient(circle at 85% 41%, rgba(255, 255, 255, .52) 0 10px, transparent 11px),
    radial-gradient(circle at 27% 61%, rgba(255, 255, 255, .38) 0 5px, transparent 6px),
    radial-gradient(circle at 71% 77%, rgba(255, 255, 255, .46) 0 8px, transparent 9px),
    radial-gradient(circle at 43% 93%, rgba(255, 255, 255, .34) 0 4px, transparent 5px),
    /* Aurora：底部两道柔光弧 */
    radial-gradient(78% 42% at 16% 92%, rgba(122, 226, 172, .46), transparent 62%),
    radial-gradient(70% 38% at 84% 95%, rgba(126, 198, 244, .52), transparent 64%),
    /* 顶部天光 */
    radial-gradient(120% 56% at 50% -8%, rgba(255, 255, 255, .95), transparent 62%),
    /* 一道斜射反光 */
    linear-gradient(112deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0) 44%),
    /* 天空本体 */
    linear-gradient(180deg, #9ed0ed 0%, #c6e5f8 42%, #eef9ff 100%);
  background-repeat:
    repeat, repeat, repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment:
    fixed, fixed, fixed, fixed, fixed, fixed,
    fixed, fixed, fixed, fixed, fixed;
}

/* ---- 2. 大面板：Aero Glass ---- */
html:not(.theme-archive) .frame-inner,
html:not(.theme-archive) .topbar,
html:not(.theme-archive) .dcard {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

html:not(.theme-archive) .frame-inner {
  border-radius: 18px;
  border: 1px solid var(--glass-hi);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .74) 0%,
    rgba(255, 255, 255, .52) 52%,
    rgba(255, 255, 255, .62) 100%);
  box-shadow:
    0 22px 54px rgba(32, 84, 126, .20),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(255, 255, 255, .45);
}

html:not(.theme-archive) .topbar {
  border-radius: 0 0 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .70);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .80) 0%,
    rgba(255, 255, 255, .52) 62%,
    rgba(255, 255, 255, .44) 100%);
  box-shadow: 0 8px 26px rgba(32, 84, 126, .16), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* ---- 3. 词条卡片：半透明 + 光泽 ---- */
html:not(.theme-archive) .card {
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .78);
  /* 底还是 --panel-2，上面盖一层"果冻"光泽：上亮下暗、中间一条分界 */
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .62) 0%,
    rgba(255, 255, 255, .20) 47%,
    rgba(255, 255, 255, .02) 48%,
    rgba(255, 255, 255, .26) 100%);
  box-shadow:
    0 6px 18px rgba(32, 84, 126, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
html:not(.theme-archive) .card:hover {
  border-color: #ffffff;
  box-shadow:
    0 12px 28px rgba(32, 84, 126, .26),
    inset 0 1px 0 #ffffff;
}

/* ---- 4. 模块块、详情正文面板：一起圆起来 ---- */
html:not(.theme-archive) .dblk,
html:not(.theme-archive) .dbody,
html:not(.theme-archive) .dblocks {
  border-radius: var(--r);
}
html:not(.theme-archive) .dblk {
  border-color: rgba(255, 255, 255, .70);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .10));
}

/* ---- 5. 输入框、搜索框、切换钮：塑料光泽 ---- */
html:not(.theme-archive) .search-box input,
html:not(.theme-archive) .themebtn,
html:not(.theme-archive) .tag {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12));
  border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 3px 10px rgba(32, 84, 126, .14), inset 0 1px 0 #fff;
}
html:not(.theme-archive) .search-box input { border-radius: 999px; }
html:not(.theme-archive) .search-box input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(43, 143, 214, .22), inset 0 1px 0 #fff;
}

/* ---- 6. 详情页题图：上下加一道玻璃边 ---- */
html:not(.theme-archive) .dhero {
  border-top-color: rgba(255, 255, 255, .80);
  border-bottom-color: rgba(255, 255, 255, .60);
}

/* ---- 7. 横向滚动条也圆润一点 ---- */
html:not(.theme-archive) ::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border-color: transparent;
}