/* ============================================================
   枢纽 HUB · 前台路由分发页设计系统 (portal.css)
   方向：全屏壁纸 + 玻璃卡片轮播 + 响应式站点网格
   令牌遵循 brand-guidelines：Poppins / #D97757 / #6A9BCC / #788C5D
   ============================================================ */

/* ---------- 令牌：深色（默认） ---------- */
:root {
  --wall-filter: brightness(.82) saturate(.78);   /* §28.10：浅色壁纸再压暗 + 降饱和，保文字对比 */
  --wall-scrim: linear-gradient(180deg, rgba(7,8,11,.82) 0%, rgba(7,8,11,.68) 42%, rgba(7,8,11,.90) 100%);
  --accent-now: transparent; /* 随当前站点色调联动，由 JS 写入 */

  --bg:        #0B0C0F;
  --surface:   rgba(255,255,255,.036); /* §28.15：卡片透明度 ×0.75（原 .048） */
  --surface-2: rgba(255,255,255,.064);
  --surface-3: rgba(255,255,255,.10);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.20);

  --fg:    #EDEEF1;
  --fg-2:  #A6AAB3;
  --fg-3:  #6E737C;

  --accent: #D97757;
  --blue:   #6A9BCC;

  /* §28.15：近影 + 远影双层散射，卡片从背景中「浮起」更醒目 */
  --shadow: 0 20px 50px -20px rgba(0,0,0,.90), 0 4px 16px -6px rgba(0,0,0,.55);
  --inner:  inset 0 1px 0 rgba(255,255,255,.07);
  /* §28.15：叠壁纸上的主文字阴影（dark 深色压边），增强视觉对比 */
  --t-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.28);

  --r:    14px;

  --font: 'Poppins', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cjk: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ---------- 令牌：浅色 ---------- */
body.light {
  /* §28.15 按用户参数：蒙版不透明度=当前 75%（.42/.37/.46 → .31/.28/.35）+ filter .82→.72 → 背景压到 ~150 */
  --wall-filter: brightness(.72) saturate(.72) contrast(1.03);
  --wall-scrim: linear-gradient(180deg, rgba(240,236,229,.31) 0%, rgba(240,236,229,.28) 45%, rgba(240,236,229,.35) 100%);

  --bg:        #F1EDE5;
  --surface:   rgba(255,253,250,.50); /* §28.15：卡片透明度 ×0.75（原 .66） */
  --surface-2: rgba(255,253,250,.66);
  --surface-3: rgba(255,255,255,.75);
  --line:      rgba(20,20,19,.14);
  --line-2:    rgba(20,20,19,.24);

  --fg:    #141413;
  --fg-2:  #2F2D28; /* §28.13：暖底(220) 对比 ~4.6:1（正文达标） */
  --fg-3:  #5A564E; /* §28.13：次要文字 ~2.6:1 */

  --shadow: 0 18px 46px -20px rgba(20,20,19,.48), 0 4px 14px -8px rgba(20,20,19,.28); /* §28.15：双层散射 */
  --inner:  inset 0 1px 0 rgba(255,255,255,.9);
  /* §28.15：light 深色文字 + 浅色微光晕（浮雕感），叠壁纸时增强对比 */
  --t-shadow: 0 1px 1px rgba(255,255,255,.6);
}
/* §28.13：light 下减弱 accent 彩色光晕（高饱和在暖底上刺眼） */
body.light .wall::after {
  background:
    radial-gradient(130% 105% at 50% 46%, transparent 38%, color-mix(in srgb, var(--bg) 90%, transparent) 100%),
    radial-gradient(1200px 620px at 50% -6%, color-mix(in srgb, var(--accent-now, transparent) 5%, transparent), transparent 72%),
    var(--wall-scrim);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-cjk);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background .4s ease, color .4s ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
svg { display: block; }
.num { font-variant-numeric: tabular-nums; }

/* §28.20 字体预设（系统字体栈，零外网依赖 —— 根治 googleapis/loli 外网 CDN 在国内失效导致「字体显示不出来」）：
   仅调整 font-family 优先顺序，全部为设备自带字体；首选缺字/缺字体时自动回退下一项，100% 可用。
   风格：黑体（几何粗直）/ 楷体（手写圆润）/ 幼圆（圆润现代）/ 仿宋（公文书卷）/ 宋体（传统衬线）/
        魏碑（碑刻风）/ 隶书（扁方典雅），各风格辨识度不因圆润化而降低。 */
body.font-hei      { --font: 'SimHei','黑体','Noto Sans CJK SC','PingFang SC','Microsoft YaHei','微软雅黑',sans-serif; --font-cjk: 'SimHei','黑体','Noto Sans CJK SC','PingFang SC','Microsoft YaHei','微软雅黑',sans-serif; }
body.font-kai      { --font: 'Kaiti SC','KaiTi','楷体','STKaiti','华文楷体','Noto Serif CJK SC',serif; --font-cjk: 'Kaiti SC','KaiTi','楷体','STKaiti','华文楷体','Noto Serif CJK SC',serif; }
body.font-yuan     { --font: 'YouYuan','幼圆','Yuanti SC','华文圆体','STYuanti','PingFang SC','Microsoft YaHei',sans-serif; --font-cjk: 'YouYuan','幼圆','Yuanti SC','华文圆体','STYuanti','PingFang SC','Microsoft YaHei',sans-serif; }
body.font-fangsong { --font: 'FangSong','仿宋','STFangsong','华文仿宋','Noto Serif CJK SC',serif; --font-cjk: 'FangSong','仿宋','STFangsong','华文仿宋','Noto Serif CJK SC',serif; }
body.font-song     { --font: 'SimSun','宋体','Songti SC','STSong','华文宋体','Noto Serif CJK SC',serif; --font-cjk: 'SimSun','宋体','Songti SC','STSong','华文宋体','Noto Serif CJK SC',serif; }
body.font-weibei   { --font: 'STWeibei','华文魏碑','Weibei SC','魏碑','Kaiti SC','楷体','Noto Serif CJK SC',serif; --font-cjk: 'STWeibei','华文魏碑','Weibei SC','魏碑','Kaiti SC','楷体','Noto Serif CJK SC',serif; }
body.font-lishu    { --font: 'LiSu','隶书','SimLi','STLiti','华文隶书','Kaiti SC','楷体','Noto Serif CJK SC',serif; --font-cjk: 'LiSu','隶书','SimLi','STLiti','华文隶书','Kaiti SC','楷体','Noto Serif CJK SC',serif; }

/* ---------- 壁纸层 ---------- */
/* 图片用 <img referrerpolicy="no-referrer"> + object-fit:cover：
   ① 不发 Referer，绕开 CDN 防盗链导致的加载不完整；② 等比铺满，永不出现左右黑边；
   ③ 图片被拦截时下方渐变兜底，页面依然是完整设计。 */
.wall {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 90% at 16% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
    radial-gradient(100% 85% at 88% 94%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 56%),
    linear-gradient(158deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, #2C3240) 100%);
}
.wall img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: var(--wall-filter);
  transition: filter .5s ease, opacity .5s ease;
  opacity: 0; /* §28.16：防「兜底亮度 → 壁纸亮度」跳变闪烁，加载完成淡入 */
}
.wall img.loaded { opacity: 1; }
.wall img[hidden] { display: none; }
/* §28.22 自动轮换马赛克渐显层：10×6 格 cover 精确取像素 + 随机渐显 → 落定换源。
   · z-index 0：盖住主图 img（static）、被 ::after 蒙版(scrim) 压住 —— 马赛克在蒙版**下方**进行，全程不变量；
   · 格子继承主图 --wall-filter；无砖缝（用户反馈拼接痕迹严重）改微圆角柔化；transition .45s 更丝滑。 */
.wall-swap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wall-swap span {
  position: absolute; display: block; opacity: 0;
  transition: opacity .7s cubic-bezier(.25,.8,.3,1); will-change: opacity;
  filter: var(--wall-filter, none);
  border-radius: 2px;
}
.wall-swap span.show { opacity: 1; }
/* §28.16：light 兜底压暗至最终壁纸亮度（≈150），加载跳变不可见 */
body.light .wall {
  background-color: #B1A68D;
  background-image:
    radial-gradient(120% 90% at 16% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
    radial-gradient(100% 85% at 88% 94%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 56%),
    linear-gradient(158deg, #C6BA9F 0%, #9C9077 100%);
}
.wall::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* 边缘柔和收边：图片自带的暗角会被融进底色，不会被看成两条黑边 */
    radial-gradient(130% 105% at 50% 46%, transparent 38%, color-mix(in srgb, var(--bg) 88%, transparent) 100%),
    radial-gradient(1200px 620px at 50% -6%, color-mix(in srgb, var(--accent-now, transparent) 10%, transparent), transparent 72%),
    var(--wall-scrim);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .40;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body.light .grain { opacity: .22; mix-blend-mode: multiply; }

/* ---------- 骨架屏（§28.10） ----------
   首屏 SSR 占位：品牌区 / 公告 / 目录 / 说明条由内联 JS 填充前的 shimmer 骨架，
   防止「空壳 → 注入」造成的刷新抖动。JS 填充（textContent / innerHTML）会整体替换掉骨架。 */
.sk {
  position: relative; display: inline-block; vertical-align: middle;
  border-radius: 8px; overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fg-2) 9%, transparent) 25%,
    color-mix(in srgb, var(--fg-2) 19%, transparent) 50%,
    color-mix(in srgb, var(--fg-2) 9%, transparent) 75%);
  background-size: 200% 100%;
  animation: skShift 1.4s ease-in-out infinite;
}
@keyframes skShift { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* 屏幕阅读器专用文本（当前站点播报） */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shell { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }

/* ============================================================
   顶栏
   ============================================================ */
.top {
  position: sticky; top: 0; z-index: 60;
  height: 62px; display: flex; align-items: center; gap: 26px;
  padding: 0 clamp(16px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
}
/* §28.37 窄屏：压缩顶栏高度（62→52），把纵向空间让给轮播卡片 */
@media (max-width: 560px) {
  .top { height: 52px; gap: 14px; }
  .mark svg { width: 17px; height: 17px; }
  .mark-name { font-size: 13.5px; letter-spacing: .12em; }
}

.mark { display: flex; align-items: center; gap: 10px; }
.mark svg { width: 19px; height: 19px; color: var(--accent); }
.mark-name {
  font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: .16em;
  /* §28.26 超长品牌名兜底省略，防止挤压顶栏右侧按钮组 */
  max-width: min(40vw, 200px); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mark-sub { font-family: var(--font); font-weight: 500; font-size: 9px; letter-spacing: .28em; color: var(--fg-3); text-transform: uppercase; }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-2);
  transition: all .2s;
}
.icon-btn:hover { color: var(--fg); background: var(--surface-2); border-color: var(--line-2); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn svg { width: 15px; height: 15px; }

/* ============================================================
   入场动效
   ============================================================ */
@keyframes rise { from { opacity: 0; } }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(95,169,122,.5); } 50% { opacity: .45; box-shadow: 0 0 0 5px rgba(95,169,122,0); } }

/* ============================================================
   品牌区：slug 品牌名 + 次级标题（对应后台「站点设置」的 siteMeta）
   ============================================================ */
.brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; text-align: center;
  animation: rise .55s cubic-bezier(.2,.7,.3,1) backwards;
}
.brand-name {
  font-family: var(--font-cjk);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700; line-height: 1.04;
  letter-spacing: .22em;
  text-indent: .22em; /* 抵消末字后的字距，让标题视觉居中 */
}
.brand-sub {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
}
.brand-slug { color: var(--accent); font-weight: 600; letter-spacing: .1em; }
.brand-sep { width: 14px; height: 1px; background: var(--line-2); }

/* ============================================================
   路由分发页 · 轮播舞台
   纵向节奏：40 / 26 / 26 / 44；内容整体垂直居中，
   宽屏多出来的高度均匀分到上下，避免出现「下方一大片空白」。
   ============================================================ */
.router-stage {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 3vw, 40px) 0 clamp(28px, 3.6vw, 44px);
  gap: clamp(18px, 2.2vw, 26px);
}

/* ============================================================
   公告：默认收起为细条，悬浮 0.5s 向下滑出抽屉
   ============================================================ */
.notice {
  position: relative; z-index: 40;
  width: min(920px, calc(100vw - 32px));
  padding-bottom: 8px; /* 把这 8px 空隙纳入命中区，鼠标可以顺利从触发条移进抽屉 */
  /* §28.17：移除 rise 淡入动画（首帧透明 → 半透明闪烁源），公告常显不闪 */
}

.notice-trigger {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px; text-align: left;
  border: 1px solid var(--line);
  /* §28.17：固定 10% 透明度（fg 色 10% 混合，dark=白 10%、light=黑 10%），不再由主题变量/动画造成透明→半透明闪烁 */
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  font-size: 12.5px; color: var(--fg-2);
  transition: border-color .24s, border-radius .3s;
}
.notice-trigger:hover { background: color-mix(in srgb, var(--fg) 16%, transparent); }
.notice-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nb-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 8px -1px var(--accent);
  animation: pulse 2.2s ease-in-out infinite;
}
.nt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-text b { color: var(--fg); font-weight: 500; }

/* §28.22 自定义光标（浏览器原生 cursor → 等于是内嵌 CUR 图形）：移出窗口浏览器原生隐藏、加载即显示、零延迟。
   `*` 全元素覆盖（含 a/button/input/.icon-btn/.c-nav-item 等），杜绝局部回退系统默认箭头/手型；
   trail 在此基础上再挂 JS 拖尾粒子（.hub-cur-t）。SVG 套主色随 accent 主题色。 */
body.cur-pointer, body.cur-pointer *,
body.cur-trail,   body.cur-trail   * { cursor: url('data:image/svg+xml;utf8,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M1%201v19l6.2-5.6L11%2021.8%2013.4%2020.6%209.6%2013.7%2018%2012.6Z%27%20fill=%27%23D97757%27%20stroke=%27%230B0C0F%27%20stroke-width=%271.2%27/></svg>') 1 1, auto !important; }
body.cur-dot, body.cur-dot *        { cursor: url('data:image/svg+xml;utf8,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><circle%20cx=%2712%27%20cy=%2712%27%20r=%276.4%27%20fill=%27%23D97757%27%20stroke=%27%230B0C0F%27%20stroke-width=%271.4%27/></svg>') 12 12, auto !important; }
body.cur-ring, body.cur-ring *      { cursor: url('data:image/svg+xml;utf8,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><circle%20cx=%2712%27%20cy=%2712%27%20r=%279.4%27%20fill=%27none%27%20stroke=%27%23D97757%27%20stroke-width=%272.2%27/><circle%20cx=%2712%27%20cy=%2712%27%20r=%272.2%27%20fill=%27%23D97757%27%20stroke=%27%230B0C0F%27%20stroke-width=%270.9%27/></svg>') 12 12, auto !important; }
body.cur-halo, body.cur-halo *      { cursor: url('data:image/svg+xml;utf8,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><circle%20cx=%2712%27%20cy=%2712%27%20r=%2711%27%20fill=%27%23D97757%27%20fill-opacity=%27.14%27%20stroke=%27%23D97757%27%20stroke-opacity=%27.8%27%20stroke-width=%271.8%27/><circle%20cx=%2712%27%20cy=%2712%27%20r=%272.4%27%20fill=%27%23D97757%27/></svg>') 12 12, auto !important; }
/* §28.24 四套主题指针（.cur 文件·内嵌热点）：PNG 光标在 Chrome/Windows 高 DPI 下热点不可靠（实践案例），
   改用 .cur 将热点写入文件头（abby 14,9 / furina 17,8 / liying 15,10 / nian 16,9），浏览器直接使用无 CSS 坐标偏差；
   `*` 全元素覆盖（修局部回退系统手型）。 */
body.cur-abby,   body.cur-abby   *   { cursor: url('/assets/cur/abby.cur') 0 0, auto !important; }
body.cur-furina, body.cur-furina *   { cursor: url('/assets/cur/furina.cur') 0 0, auto !important; }
body.cur-liying, body.cur-liying *   { cursor: url('/assets/cur/liying.cur') 0 0, auto !important; }
body.cur-nian,   body.cur-nian   *   { cursor: url('/assets/cur/nian.cur') 0 0, auto !important; }
/* §28.25 像素级跟随光标（终极方案）：cursor.js 注入 body.js-cur → 全站 cursor:none，
   改为 DOM 元素 #hub-cur 以「鼠标坐标 − 热点」1:1 定位 —— 视觉尖端与点击判定点物理重合，杜绝 DPI/CSS 热点偏移。
   JS 加载失败时无 js-cur，自动回退上面 .cur 原生光标（双保险不丢光标）。 */
body.js-cur, body.js-cur * { cursor: none !important; }
#hub-cur {
  position: fixed; left: 0; top: 0; z-index: 2147483001; pointer-events: none;
  will-change: transform; opacity: 0; transition: opacity .18s;
}
body.cur-dot   #hub-cur, body.cur-ring #hub-cur, body.cur-halo #hub-cur,
body.cur-abby  #hub-cur, body.cur-furina  #hub-cur, body.cur-liying #hub-cur,
body.cur-nian  #hub-cur, body.cur-trail   #hub-cur, body.cur-pointer #hub-cur { opacity: 1; }
body.cur-dot  #hub-cur { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px -1px var(--accent); }
body.cur-ring #hub-cur { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 12px -2px var(--accent), inset 0 0 8px -2px var(--accent); }
body.cur-halo #hub-cur { width: 52px; height: 52px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%); }
body.cur-pointer #hub-cur, body.cur-trail #hub-cur {
  width: 24px; height: 24px; background-image: url("data:image/svg+xml;utf8,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27><path%20d=%27M1%201v19l6.2-5.6L11%2021.8%2013.4%2020.6%209.6%2013.7%2018%2012.6Z%27%20fill=%27%23D97757%27%20stroke=%27%230B0C0F%27%20stroke-width=%271.2%27/></svg>");
  background-size: 20px 20px; background-position: 0 0; background-repeat: no-repeat;
}
body.cur-abby   #hub-cur { width: 32px; height: 32px; background: url('/assets/cur/abby.png') 0 0 / 32px 32px no-repeat; }
body.cur-furina #hub-cur { width: 32px; height: 32px; background: url('/assets/cur/furina.png') 0 0 / 32px 32px no-repeat; }
body.cur-liying #hub-cur { width: 32px; height: 32px; background: url('/assets/cur/liying.png') 0 0 / 32px 32px no-repeat; }
body.cur-nian   #hub-cur { width: 32px; height: 32px; background: url('/assets/cur/nian.png') 0 0 / 32px 32px no-repeat; }
body.cur-dot #hub-cur::after, body.cur-halo #hub-cur::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--accent);
}
.hub-cur-t {
  position: fixed; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%;
  z-index: 2147483000; pointer-events: none; will-change: transform, opacity;
  background: color-mix(in srgb, var(--accent) 70%, transparent); transition: opacity .15s;
}

/* §28.17：nt-more 常显（不再悬浮才渐显），可读性优先 */
.nt-more {
  flex: none;
  font-family: var(--font); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--accent); white-space: nowrap;
  opacity: 1; transform: none;
}

/* 展开时只提亮触发条，不再切角，抽屉作为独立浮层出现 */
.notice.open .notice-trigger {
  background: color-mix(in srgb, var(--fg) 16%, transparent); border-color: var(--line-2);
}

/* 窄幅浮层：避免整宽遮挡下方卡片，保留两侧可交互区域 */
.notice-drawer {
  position: absolute; left: 50%; top: 100%;
  /* UI/UX 终审 · 需求3：宽度与唤出触发条强对齐（两端各留 10px）；
     上限 800px 保证小屏不越界 */
  width: min(800px, calc(100% - 20px));
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface-2);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: var(--shadow), var(--inner);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity .26s ease, transform .36s cubic-bezier(.22,.75,.28,1), visibility .36s;
}
.notice.open .notice-drawer { opacity: 1; visibility: visible; transform: translateX(-50%); }

.nd-list { max-height: min(44vh, 320px); overflow-y: auto; }
.nd-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
  transition: background .18s;
}
.nd-row:hover { background: var(--surface-3); }
.nd-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nd-kind {
  flex: none; width: 58px;
  font-family: var(--font); font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.nd-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg-2); }
.nd-text b { color: var(--fg); font-weight: 500; }
.nd-time { flex: none; font-family: var(--font); font-size: 10.5px; letter-spacing: .06em; color: var(--fg-3); }
.nd-foot { display: flex; justify-content: center; padding: 12px 18px; }
.nd-foot a { font-family: var(--font-cjk); font-size: 12px; letter-spacing: .06em; color: var(--accent); }
.nd-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   轮播：容器与浏览器窗口等宽，幻灯片居中
   ============================================================ */
.carousel {
  position: relative; width: 100%;
  margin-bottom: clamp(16px, 2vw, 26px); /* 给进度条留出呼吸位 */
}

.c-viewport {
  position: relative;
  /* 上限与上下间距联动：常见桌面高度一屏放得下，矮屏自动收缩不整页滚动；
     下限 290px 是「悬浮时图标不被裁切 + 按钮不压到信息面板」的安全高度 */
  height: clamp(290px, 35vh, 380px);
  overflow: hidden; /* 裁掉平移出窗口的幻灯片，避免撑宽文档产生横向滚动 */
}
/* §28.37 窄屏：整页纵向预算收紧（顶栏 52 + 品牌 26 + 公告 40 + viewport + 目录 96 + 说明条 + 页脚），
   轮播区按 42vh 自适应——保证主卡与预播放侧卡完整落在可视区域内（原固定 420-460px 撑爆一屏）；
   vh 驱动：568 高→239px、812 高→341px、896 高→376px，卡片高度随屏等比。 */
@media (max-width: 560px) { .c-viewport { height: clamp(230px, 42vh, 380px); } }

/* 矮屏（如 1366×768 笔记本）：收紧纵向节奏，保证一屏放得下 */
@media (max-height: 820px) {
  .router-stage { padding: 20px 0 24px; gap: 16px; }
  .brand { gap: 4px; }
  .brand-name { font-size: clamp(22px, 3vw, 30px); }
  .carousel { margin-bottom: 14px; }
}

.c-slide {
  position: absolute; left: 50%; top: 0;
  width: min(660px, calc(100vw - 44px));
  height: 100%;
  margin-left: calc(min(660px, calc(100vw - 44px)) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border-radius: clamp(20px, 2.4vw, 26px);
  padding: clamp(22px, 3vw, 38px) clamp(20px, 4vw, 46px);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 62%);
  border: 1px solid color-mix(in srgb, var(--line-2) 55%, var(--line)); /* §28.15：边框提亮，卡片更醒目 */
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  box-shadow: var(--shadow), var(--inner);
  overflow: hidden;
  /* 位移与缩放由 JS 每帧写入 --tx / --sc（见 frontend-router.html 的 step()），
     CSS 在此合成 transform：悬浮上浮动效可以在「JS 已定位好的位置」上叠加，
     若改回行内 transform 会把一切 hover 变换盖掉，卡片会完全静止。 */
  transform: translate(var(--tx, 0), 0) scale(var(--sc, 1));
  transition: transform .55s cubic-bezier(.22,.75,.28,1), opacity .45s ease;
  will-change: transform, opacity;
}
/* 全卡片通用微动效：悬浮时轻微上浮 + 放大。
   侧卡不承载「正位效果」（信息面板 / 展开按钮 / 延迟角标只在主卡出现），
   这个上浮就是侧卡唯一的悬浮反馈；位移沿用 --tx、缩放基于 --sc 叠加，互不干扰。 */
.c-slide:hover:not(.is-cur) {
  transform: translate(var(--tx, 0), -8px) scale(calc(var(--sc, 1) * 1.03));
}
.c-slide::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* §28.15：高光（灯影）增强 —— 顶部 26%→34%、角落 12%→17%，卡片更醒目 */
  background:
    radial-gradient(420px 190px at 50% -10%, color-mix(in srgb, var(--cat) 34%, transparent), transparent 70%),
    radial-gradient(340px 200px at 110% 110%, color-mix(in srgb, var(--cat) 17%, transparent), transparent 72%);
}
.c-slide:focus-within { border-color: var(--accent); }
/* 首帧禁用过渡：避免加载时 11 张卡片从中心向外飞出的抖动画 */
body.preload .c-slide { transition: none !important; }

/* 侧卡可点击：点一下就切到该站点（当前卡不显示手型，卡内链接自己带手型） */
.c-slide:not(.is-cur) { cursor: pointer; }

/* 装饰性内容不吃事件；只有悬浮（或触摸端展开）时，面板里的线路链接才可点。
   注意：pointer-events 会继承，所以子元素一律不写 auto —— 否则侧卡里
   那些看不见的链接也会成为点击目标。 */
.c-status, .c-lat, .c-main, .c-extra, .c-num { pointer-events: none; }

/* 卡片主体：主卡悬浮时整体上移，为下方渐显的信息让位。
   正位效果（信息面板 / 展开按钮 / 延迟角标）只属于主卡：侧卡悬浮只有通用上浮动效，
   避免「没切到主卡时，主卡才该有的信息已经提前露出来」的错位感。 */
.c-main {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 1.5vh, 16px); /* 用 vh 让卡片在矮屏自动收紧，保证悬浮上移后仍不被裁切 */
  transition: transform .44s cubic-bezier(.22,.75,.28,1);
}
.c-slide.is-cur:hover .c-main,
.c-slide.is-cur:focus-within .c-main,
.c-slide.is-cur.is-open .c-main { transform: translateY(-30px); }

.c-ic {
  width: clamp(54px, 7.5vh, 72px); height: clamp(54px, 7.5vh, 72px);
  border-radius: clamp(15px, 1.8vw, 19px);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cat) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat) 34%, transparent);
  color: var(--cat);
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--cat) 70%, transparent), var(--inner);
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.c-slide.is-cur:hover .c-ic { transform: translateY(-4px) scale(1.04); }
.c-ic svg { width: clamp(26px, 3.4vh, 33px); height: clamp(26px, 3.4vh, 33px); }
/* UI/UX 终审 · 问题5：上传图标（img:URL 协议）以图片渲染，等比覆盖不拉伸 */
.c-ic .c-ic-img { width: clamp(26px, 3.4vh, 33px); height: clamp(26px, 3.4vh, 33px); border-radius: 10px; object-fit: cover; }

.c-name { font-family: var(--font-cjk); font-size: clamp(23px, 2.6vw, 30px); font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.c-sub { font-family: var(--font); font-size: 10.5px; font-weight: 600; letter-spacing: .34em; color: var(--cat); text-transform: uppercase; margin-top: -8px; }
.c-desc { font-size: clamp(12.5px, 1.2vw, 13.5px); color: var(--fg-2); max-width: 40ch; line-height: 1.7; }

/* 悬浮渐显的站点属性（主线路 / 备用线路 / 维护窗口 / 当前延迟）
   这里就是入口：卡片正面不再放「进入站点」按钮，避免与侧卡点击切换抢事件 */
.c-extra {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px clamp(14px, 3vw, 26px);
  padding: 16px clamp(20px, 4vw, 46px);
  text-align: left;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 84%, transparent) 40%);
  opacity: 0; transform: translateY(26px); pointer-events: none;
  transition: opacity .32s ease, transform .44s cubic-bezier(.22,.75,.28,1);
}
/* 面板浮上来时才接管指针事件：里面的主线路 / 备用线路 / 展开按钮随之可点。
   .is-open = 抽屉展开后的持久化显示（点击抽屉内即收回，见 frontend-router.html）。 */
.c-slide.is-cur:hover .c-extra,
.c-slide.is-cur:focus-within .c-extra,
.c-slide.is-cur.is-open .c-extra { opacity: 1; transform: none; pointer-events: auto; }
.ce-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ce-row b {
  flex: none; width: 54px;
  font-family: var(--font); font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.ce-row span {
  flex: 1; min-width: 0; color: var(--fg-2);
  font-family: var(--font); font-size: 11.5px; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 线路链接 = 真正入口（主线路 / 备用线路）：可点击、可聚焦、新窗口打开 */
.ce-link {
  display: inline-block;
  color: var(--fg-2);
  border-bottom: 1px dashed color-mix(in srgb, var(--fg-3) 65%, transparent);
  transition: color .2s, border-color .2s;
}
.ce-link:hover { color: var(--cat); border-bottom-color: var(--cat); }
.ce-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.ce-link svg { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; }
/* 主线路是首选入口：亮一档，并把虚线下划线染成站点色 */
.ce-row-main .ce-link {
  color: var(--fg); font-weight: 500;
  border-bottom-color: color-mix(in srgb, var(--cat) 55%, transparent);
}

/* --- 站点更新摘要（WP 数据源）：悬浮面板只留一行，清单在下方抽屉里 --- */
/* .c-extra 是两列网格，摘要行用 grid-column: 1 / -1 占满整行 */
.ce-feed {
  grid-column: 1 / -1; align-items: center;
  padding-top: 8px; margin-top: 2px;
  border-top: 1px dashed color-mix(in srgb, var(--fg-3) 26%, transparent);
}
.ce-feed .fs-txt { color: var(--fg-3); }
.ce-feed .fs-txt b { color: var(--fg); font-weight: 600; }
.ce-feed .fs-btn {
  cursor: pointer; flex: none;
  font-family: var(--font); font-size: 10px; letter-spacing: .08em;
  color: var(--fg-2); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px;
  transition: color .18s, background .18s, border-color .18s;
}
.ce-feed .fs-btn:hover { color: var(--fg); background: var(--surface-2); }
.ce-feed .fs-btn[aria-expanded="true"] { color: var(--fg); background: var(--surface-3); }
.ce-feed .fs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   站点更新抽屉：点「展开」后从卡片下方滑出的独立浮层
   ────────────────────────────────────────────────────────────
   为什么不放在卡片里：放在卡片里会和轮播一起位移、并撑高卡片导致跳动。
   这里挂在与幻灯片同级的位置（.carousel 内），因此
   ① 轮播切换不影响清单；② 卡片外观不因展开改变。
   清单恒定一屏 3 条（.fd-list 高 = 3×行高，永不出现滚动条），
   翻页交给下方 ▲ / ▼ 按钮。
   ============================================================ */
.feed-drawer {
  /* +26px：让开卡片下方那条进度条（画在卡片下方 15~17px 处），互不遮挡 */
  position: absolute; left: 50%; top: calc(100% + 26px);
  width: min(660px, calc(100vw - 44px));
  z-index: 30;
  border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--surface-2);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: var(--shadow), var(--inner);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-12px);
  transition: opacity .26s ease, transform .4s cubic-bezier(.22,.75,.28,1), visibility .4s;
}
.feed-drawer.is-open { opacity: 1; visibility: visible; transform: translateX(-50%); }

.fd-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--line);
}
.fd-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 500; color: var(--fg-2); white-space: nowrap;
}
.fd-title b { color: var(--fg); font-weight: 600; }
.fd-sep { width: 12px; height: 1px; background: var(--line-2); }
.fd-meta { flex: 1; min-width: 0; font-size: 11px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-meta b { color: var(--fg-2); font-weight: 600; }
.fd-x {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-3);
  transition: color .18s, background .18s, border-color .18s;
}
.fd-x:hover { color: var(--fg); background: var(--surface-2); border-color: var(--line-2); }
.fd-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-x svg { width: 12px; height: 12px; }

.fd-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 6px; }
.fd-cat {
  cursor: pointer;
  font-family: var(--font); font-size: 10.5px; letter-spacing: .06em;
  color: var(--fg-3); background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 3px 10px; transition: color .16s, background .16s, border-color .16s;
}
.fd-cat:hover { color: var(--fg-2); }
.fd-cat.is-on {
  color: var(--fg); background: color-mix(in srgb, var(--cat) 20%, transparent);
  border-color: color-mix(in srgb, var(--cat) 46%, transparent);
}
.fd-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 一屏恒定 3 条：行高 34px × 3 = 102px，条目不足 3 条也占满同样的高度 */
.fd-list { display: block; min-height: 102px; padding: 0 16px; overflow: hidden; }
.fd-list li { height: 34px; }
.fd-item {
  display: flex; align-items: center; gap: 10px; height: 100%;
  color: var(--fg-2); font-size: 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--fg-3) 20%, transparent);
  transition: color .16s;
}
.fd-list li:last-child .fd-item { border-bottom: none; }
.fd-item:hover { color: var(--cat); }
.fd-item .fd-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-item .fd-time { flex: none; font-family: var(--font); font-size: 10.5px; color: var(--fg-3); }
.fd-item svg { flex: none; width: 9px; height: 9px; opacity: .65; }
.fd-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.fd-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 12px;
}
.fd-page { font-family: var(--font); font-size: 10.5px; letter-spacing: .08em; color: var(--fg-3); }
.fd-pg {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-2);
  transition: color .18s, background .18s, border-color .18s, opacity .18s;
}
.fd-pg:hover:not(:disabled) { color: var(--fg); background: var(--surface-3); border-color: var(--line-2); }
.fd-pg:disabled { opacity: .35; cursor: default; }
.fd-pg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-pg svg { width: 12px; height: 12px; }
.fd-foot .spacer { flex: 1; }
.fd-all {
  font-size: 11.5px; color: var(--accent);
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  transition: border-bottom-style .18s;
}
.fd-all:hover { border-bottom-style: solid; }

/* 矮屏（如 1366×768 笔记本）：抽屉整体上提并收紧内距，
   保证展开后仍然落在首屏内（这一段必须写在抽屉样式之后，否则会被上面的规则盖掉） */
@media (max-height: 820px) {
  .feed-drawer { top: calc(100% + 18px); }
  .fd-head { padding: 10px 16px 9px; }
  .fd-cats { padding: 8px 16px 5px; }
  .fd-foot { padding: 6px 16px 10px; }
}

/* 触摸端（无悬浮）：卡片角标 + 点主卡展开信息面板（用 .is-open 承载展开态） */
.c-feed-badge {
  display: none; position: absolute; left: clamp(16px, 2.4vw, 22px); top: 18px;
  pointer-events: auto; cursor: pointer;
  font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--fg-3); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px;
}
.c-feed-badge b { color: var(--fg); }
/* §28.36 触屏（无悬浮）端：
   ① 主卡站点详情（主/备用线路/延迟）默认恒显——无需点击，切到主卡即展开、切走自动收起；
   ② 延迟角标/序号隐藏（与信息面板同区，避免重叠）；
   ③ 隐藏自定义光标（#hub-cur）并恢复系统指针——手机等触屏不需要图形指针。 */
@media (hover: none) {
  .c-feed-badge { display: inline-flex; align-items: center; gap: 5px; }
  .c-slide:not(.is-cur) .c-feed-badge { display: none; } /* 侧卡只负责「点一下切过来」 */
  .c-slide.is-cur .c-main { transform: translateY(-30px); }
  .c-slide.is-cur .c-extra { opacity: 1; transform: none; pointer-events: auto; }
  .c-slide.is-cur .c-lat, .c-slide.is-cur .c-num { opacity: 0; }
  /* 触屏无指针概念：无论是否注入 js-cur（cursor.js 已在 JS 侧跳过），
     一律恢复系统指针。必须按同特异性（body.cur-* 0,2,0 + !important）列举覆盖，
     且本块位于文件后部（685 行 > 290 行），同特异性后声明优先。 */
  #hub-cur { display: none !important; }
  body.cur-pointer, body.cur-pointer *,
  body.cur-dot,     body.cur-dot     *,
  body.cur-ring,    body.cur-ring    *,
  body.cur-halo,    body.cur-halo    *,
  body.cur-trail,   body.cur-trail   *,
  body.cur-abby,    body.cur-abby    *,
  body.cur-furina,  body.cur-furina  *,
  body.cur-liying,  body.cur-liying  *,
  body.cur-nian,    body.cur-nian    *,
  body.js-cur,      body.js-cur      * { cursor: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-drawer { transition: none; }
}
@media (max-width: 560px) {
  .ce-row b { width: 40px; }
  /* 窄屏字宽紧张，长值换行显示，不撑破单元格 */
  .ce-row span { white-space: normal; line-height: 1.4; }
  /* UI/UX 终审 · 需求6：窄屏顶栏隐藏在线计数，给语言切换按钮腾位 */
  .top-right .foot-status { display: none; }
  /* §28.26 窄屏公告：正文最多两行 + 字号收紧，避免长标题被单行截断成半个字；
     .nt-more 保持 flex:none 不参与收缩，正文再长也不会被「更多」挤压 */
  .notice-trigger { font-size: 11.5px; gap: 8px; padding: 8px 12px; border-radius: 16px; }
  .nt-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.4; }
  /* §28.36 窄屏轮播卡宽：露边 44px/侧，预播放的侧卡能被看到更多；
     同时收紧卡内字号/内距，避免 287px 小卡内容溢出 */
  .c-slide { width: calc(100vw - 88px); margin-left: calc((100vw - 88px) / -2); padding: 14px clamp(14px, 4vw, 22px); }
  .c-slide .c-ic { width: 46px; height: 46px; border-radius: 13px; }
  .c-slide .c-ic svg, .c-slide .c-ic .c-ic-img { width: 23px; height: 23px; }
  .c-slide .c-name { font-size: clamp(17px, 4.6vw, 21px); }
  .c-slide .c-desc { font-size: 11.5px; max-width: 30ch; line-height: 1.5; }
  .c-slide .c-extra { padding: 8px clamp(14px, 4vw, 22px); gap: 3px 10px; }
  .c-slide .c-main { gap: 8px; }
  /* §28.37 窄屏整页纵向收紧：品牌/公告/说明条压缩，让 42vh 轮播区+目录落进一屏 */
  .router-stage { padding: 6px 0 10px; gap: 10px; }
  .brand { gap: 3px; }
  .brand-name { font-size: clamp(18px, 4.8vw, 26px); letter-spacing: .16em; text-indent: .16em; }
  .brand-sub { font-size: 9.5px; gap: 6px; }
  .notice { padding-bottom: 3px; }
  .notice-trigger { padding: 7px 12px; font-size: 11px; gap: 8px; }
  .feed-drawer { width: calc(100vw - 88px); }
  .stage-note { padding: 0 8px; gap: 8px; }
  .sn-text { font-size: 10.5px; line-height: 1.4; }
  /* 触屏信息面板恒显时上移量同步收紧，避免小卡内裁切 */
  .c-slide.is-cur .c-main { transform: translateY(-20px); }
  /* 页脚收紧 */
  .foot-in { padding: 8px 12px; }
  /* §28.37 极小屏（≤360px，如 320×568）：隐藏语录区、目录行高 50→46，
     整页压缩到一屏——语录非核心信息，手机上让位给卡片 */
  @media (max-width: 360px) {
    .router-stage { gap: 6px; }
    .brand-name { font-size: 19px; }
    .stage-quote { display: none; }
    .c-nav { height: calc(var(--rows) * 46px + (var(--rows) - 1) * 8px) !important; }
  }
}
/* 矮屏：卡片更矮，信息面板同步收薄，给悬浮时的按钮留出余量 */
@media (max-height: 820px) {
  .c-extra { padding: 12px clamp(20px, 4vw, 46px); }
}

/* 状态徽章 */
.c-status {
  position: absolute; right: clamp(16px, 2.4vw, 22px); top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--fg-2);
}
.c-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #5FA97A; }
.c-status.warn::before { background: #C9A24B; }
.c-status.off::before { background: var(--fg-3); }

/* 延迟探测结果 */
.c-lat {
  position: absolute; right: clamp(16px, 2.4vw, 22px); bottom: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.c-lat i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); transition: background .3s, box-shadow .3s; }
.c-lat b { color: var(--fg-3); font-weight: 600; letter-spacing: .06em; }
.c-lat.good i { background: #5FA97A; box-shadow: 0 0 8px -1px #5FA97A; }
.c-lat.good b { color: #5FA97A; }
.c-lat.mid i { background: #C9A24B; box-shadow: 0 0 8px -1px #C9A24B; }
.c-lat.mid b { color: #C9A24B; }
.c-lat.bad i { background: #D9534F; box-shadow: 0 0 8px -1px #D9534F; }
.c-lat.bad b { color: #D9534F; }

.c-num {
  position: absolute; left: clamp(16px, 2.4vw, 22px); bottom: 18px;
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--fg-3);
}
.c-num b { color: var(--cat); font-weight: 700; }

/* 主卡悬浮时徽章让位给信息面板（延迟数值已并入面板） */
.c-lat, .c-num { transition: opacity .24s ease; }
.c-slide.is-cur:hover .c-lat, .c-slide.is-cur:hover .c-num,
.c-slide.is-cur:focus-within .c-lat, .c-slide.is-cur:focus-within .c-num,
.c-slide.is-cur.is-open .c-lat, .c-slide.is-cur.is-open .c-num { opacity: 0; }

/* --- 箭头：贴在窗口两侧，窄屏交给滑动操作 --- */
.c-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  color: var(--fg-2);
  /* z-index 必须高于幻灯片（9/10）：侧卡现在可点击，否则箭头会被侧卡盖住点不到 */
  z-index: 20;
  transition: all .22s;
}
.c-arrow:hover { color: var(--fg); background: var(--surface-3); border-color: var(--line-2); transform: translateY(-50%) scale(1.06); }
.c-arrow:active { transform: translateY(-50%) scale(.96); }
.c-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-arrow svg { width: 19px; height: 19px; }
.c-arrow.prev { left: clamp(10px, 2.4vw, 42px); }
.c-arrow.next { right: clamp(10px, 2.4vw, 42px); }
@media (max-width: 860px) { .c-arrow { display: none; } }

/* --- 自动轮播进度 --- */
.c-progress {
  position: absolute; left: 50%; bottom: -15px;
  transform: translateX(-50%);
  width: min(660px, calc(100vw - 44px));
  height: 2px; border-radius: 2px; overflow: hidden;
  background: var(--line);
}
.c-progress i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
}
/* 悬浮卡片 / 更新抽屉展开时，进度条停在原地。
   这里必须用 !important：JS 每次重启动画都用 animation 简写赋值，
   简写会把 animation-play-state 重置回 running，普通声明压不住行内样式。 */
.carousel:hover .c-progress i,
.carousel.is-hold .c-progress i { animation-play-state: paused !important; }
@keyframes prog { to { width: 100%; } }

/* ============================================================
   站点目录：列数由 JS 按「卡片总数」计算（§28.6 定版），卡片高度统一 50
   ============================================================ */
.c-nav {
  width: 100%;
  max-width: 1000px; /* UI/UX 终审 · 需求1：容器宽度阈值 1000 */
  padding: 0 clamp(14px, 2.6vw, 28px);
  display: grid;
  /* UI/UX 终审 · §28.6：列/行由 JS 计算（--cols/--rows），卡片高度统一 50，
     容器高 = 行数 × 50（JS 覆盖此默认值）；≥7 奇数首卡 .is-lead 占满两行 100 高 */
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
  height: 50px;
  gap: 8px;
}

.c-nav-item {
  /* UI/UX 终审 · 需求2：图标与站名同行显示（row），水平垂直居中 */
  display: flex; align-items: center; justify-content: center;
  gap: 10px; min-width: 0; text-align: left;
  padding: 4px 10px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--line-2) 40%, var(--line)); /* §28.15：边框提亮 */
  background: var(--surface);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.45), var(--inner); /* §28.15：轻散射阴影，卡片浮起 */
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: background .24s, border-color .24s, transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s;
  animation: riseNav .5s cubic-bezier(.2,.7,.3,1) backwards;
}
/* UI/UX 终审 · §28.6：奇数（≥7）首卡占满两行（100 高）实现 1+(n-1) 异形；内容保持居中 */
/* §28.7 饱满化：主卡 108 高，图标/文字差异化放大，避免主卡内容空荡 */
.c-nav-item.is-lead { grid-row: 1 / 3; gap: 12px; }
@keyframes riseNav { from { opacity: 0; } }
.c-nav-item:hover { background: var(--surface-2); transform: translateY(-2px); }
.c-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-nav-item.on {
  background: var(--surface-3); border-color: color-mix(in srgb, var(--cat) 55%, transparent);
  box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--cat) 90%, transparent);
}
.ni-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cat) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent);
  color: var(--cat);
}
.ni-ic svg { width: 16px; height: 16px; }
.ni-ic img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.ni-name { font-size: 13px; font-weight: 600; letter-spacing: .02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* §28.7 饱满化：主卡差异化放大（图标 40 / 图形 20 / 文字 14） */
.c-nav-item.is-lead .ni-ic { width: 40px; height: 40px; border-radius: 12px; }
.c-nav-item.is-lead .ni-ic svg { width: 20px; height: 20px; }
.c-nav-item.is-lead .ni-ic img { width: 40px; height: 40px; border-radius: 12px; }
.c-nav-item.is-lead .ni-name { font-size: 14px; }

/* §28.26 窄屏站点目录：改纵向排布（图标在上 / 站名在下），站名独占整卡宽度；
   375px(每列 63px) 下 .ni-name 可用约 57px、320px(每列 52px) 下约 46px，
   11px 字号 4 字站名（≈45px）单行完整放下，超长名自然换行兜底；
   缩小图标 30→22px 后单行卡高 22+4+13.2+6≈45px，仍在 50px 行高内 */
@media (max-width: 560px) {
  .c-nav-item { flex-direction: column; gap: 4px; padding: 3px 3px; text-align: center; }
  .c-nav-item .ni-ic { width: 22px; height: 22px; border-radius: 7px; }
  .c-nav-item .ni-ic svg { width: 12px; height: 12px; }
  .c-nav-item .ni-ic img { width: 22px; height: 22px; border-radius: 7px; }
  .c-nav-item .ni-name { font-size: 11px; line-height: 1.2; letter-spacing: .01em; white-space: normal; text-align: center; }
  .c-nav-item.is-lead { gap: 5px; }
  .c-nav-item.is-lead .ni-ic { width: 26px; height: 26px; border-radius: 8px; }
  .c-nav-item.is-lead .ni-ic svg { width: 14px; height: 14px; }
  .c-nav-item.is-lead .ni-ic img { width: 26px; height: 26px; border-radius: 8px; }
  .c-nav-item.is-lead .ni-name { font-size: 12px; }
}

/* ============================================================
   底部说明条：可自定义文案区，填补宽屏留白并交代业务上下文
   ============================================================ */
.stage-note {
  width: 100%; max-width: 1320px;
  padding: 0 clamp(16px, 3vw, 34px);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px);
  animation: rise .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.sn-rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.sn-text {
  /* §28.17：字号 12.5→13.5px、颜色 fg-3→fg-2 —— light 下可读性达标 */
  font-size: 13.5px; color: var(--fg-2); letter-spacing: .04em;
  text-align: center; line-height: 1.8;
  max-width: min(920px, 100%); /* 桌面一行放得下，窄屏自然换行 */
}
.sn-text b { color: var(--fg-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.sn-text a { color: var(--accent); border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.sn-text a:hover { border-bottom-style: solid; }
@media (max-width: 620px) {
  .sn-rule { display: none; }
  /* §28.26 窄屏说明条：字号 13.5→11.5px、行高 1.8→1.5、内边距/间距收紧，长文案不再拥挤折行 */
  .stage-note { padding: 0 12px; gap: 12px; }
  .sn-text { font-size: 11.5px; line-height: 1.5; letter-spacing: .02em; }
}

/* 页面语录（§28.8）：纯文本区，宽 80%（左右各 10% 留白），底部说明条下方 */
.stage-quote {
  width: 80%;
  margin: 10px auto 0;
  text-align: center;
  min-height: 1.6em; /* §28.16：yiyan 模式 SSR 即占位，防刷新时内容区高度跳变（foot 下移闪烁） */
}
/* §28.9：移除 max-width 行宽限制 —— 长文本占满 80% 区域自然换行，与区域宽度严格对齐 */
.stage-quote p {
  /* §28.17：字号 13→14px、颜色 fg-3→fg-2 —— light 下可读性达标 */
  font-size: 14px; color: var(--fg-2); letter-spacing: .06em; line-height: 1.8;
}
.stage-quote[hidden] { display: none; }

/* §28.15：叠壁纸上的主文字统一加 --t-shadow（dark 深色压边 / light 浅色光晕），增强视觉对比 */
.mark-name, .brand-name, .brand-sub, .c-name, .c-sub,
.sn-text, .sn-text a, .stage-quote p, .foot-status {
  text-shadow: var(--t-shadow);
}

/* §28.17 10 套配色方案（后台 theme.palette → body.pal-N；pal-0 幸存橙 = :root 默认，无需覆盖） */
body.pal-1 { --accent:#2E9E9B; --blue:#5FA9C9; }
body.pal-2 { --accent:#7C6FA8; --blue:#4F8A8A; }
body.pal-3 { --accent:#5FA97A; --blue:#C9A24B; }
body.pal-4 { --accent:#E2684A; --blue:#6A8FBB; }
body.pal-5 { --accent:#3E7CB1; --blue:#7FA98F; }
body.pal-6 { --accent:#D5657E; --blue:#7A8AC4; }
body.pal-7 { --accent:#C29A4B; --blue:#6F9A8C; }
body.pal-8 { --accent:#8A5FA8; --blue:#B8896C; }
body.pal-9 { --accent:#4C6B8A; --blue:#C46A45; }

/* ============================================================
   单站点色
   ============================================================ */
.n0{--cat:var(--accent)} .n1{--cat:#6A9BCC} .n2{--cat:#788C5D} .n3{--cat:#C9A24B}
.n4{--cat:#7C6FA8} .n5{--cat:#5FA97A} .n6{--cat:#D08A4E} .n7{--cat:#6F8FAF}
.n8{--cat:#A8A0B8} .n9{--cat:#4F8A8A} .n10{--cat:#B8896C}
/* §28.16：站点色扩至 n0-n39（与 40 图标同源；修 n27+ 站点 --cat 缺失致图标盒无背景/边框色） */
.n11{--cat:#C6786C} .n12{--cat:#7A5FA8} .n13{--cat:#4FA3B8} .n14{--cat:#B8914A}
.n15{--cat:#6FB36F} .n16{--cat:#C25B7C} .n17{--cat:#5E7BC4} .n18{--cat:#A98C45}
.n19{--cat:#4FA48F} .n20{--cat:#B0715A} .n21{--cat:#8A6BBA} .n22{--cat:#4E8FB5}
.n23{--cat:#C29A55} .n24{--cat:#61A481} .n25{--cat:#BF6A93} .n26{--cat:#6B7FC0}
.n27{--cat:#A86F3F} .n28{--cat:#4E9C8E} .n29{--cat:#C55F5F} .n30{--cat:#7F6FBF}
.n31{--cat:#5588B8} .n32{--cat:#B59B5A} .n33{--cat:#5FA96F} .n34{--cat:#C172B0}
.n35{--cat:#6685C2} .n36{--cat:#B0875C} .n37{--cat:#4F9FA6} .n38{--cat:#C46A45}
.n39{--cat:#735FA8}

/* ============================================================
   底栏
   ============================================================ */
.foot {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  /* UI/UX 终审 · 需求2：内容不足一屏时页脚吸附窗口底部（.shell 为 flex column） */
  margin-top: auto;
}
.foot-in {
  max-width: 1360px; margin: 0 auto; padding: 16px clamp(16px, 3vw, 34px);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  font-family: var(--font); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; color: var(--fg-3); text-transform: uppercase;
}
.foot-in .sp { margin-left: auto; }
.foot-in a:hover { color: var(--fg-2); }
.foot-status { display: flex; align-items: center; gap: 7px; }
.foot-status b { color: var(--fg-2); font-weight: 600; }
.pulse { width: 5px; height: 5px; border-radius: 50%; background: #5FA97A; animation: pulse 2.2s ease-in-out infinite; }

/* §28.26 窄屏底栏：字号 10.5→9px、间距/内距收紧、行高 1.4；
   状态文字单行省略（.foot-status 内文字 span），版权不再被挤成两行；
   flex-wrap 保留做兜底，极端文案仍强制换行而非溢出 */
@media (max-width: 560px) {
  .foot-in { font-size: 9px; gap: 8px 10px; padding: 9px 12px; letter-spacing: .05em; line-height: 1.4; }
  .foot-status { min-width: 0; }
  .foot-status > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .c-slide, .c-arrow, .c-nav-item, .c-cta, .c-main, .c-extra, .notice-drawer { transition-duration: .01ms !important; }
  .notice, .c-nav-item, .nb-dot, .pulse { animation: none !important; }
  .c-progress { display: none; }
}