/* ============================================================
   强度研究院（Genshin Impact SRI）— 全局样式表
   设计风格：深色背景 + 液态玻璃效果 + 响应式布局
   参考：DeepSeek 网页版字体排版风格
   UI 基准缩放：150%（html font-size: 24px）
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS 自定义变量（设计令牌）
   ---------------------------------------------------------- */
:root {
  /* 背景色系 */
  --bg-primary: #0a0a10;
  --bg-secondary: #12121a;

  /* 文字色系 */
  --text-primary: #f0f0f5;
  --text-secondary: rgba(240, 240, 245, 0.55);
  /* 描述文字提亮，更明显可见 */
  --text-tertiary: rgba(240, 240, 245, 0.5);

  /* 强调色 */
  --accent: #6ea8fe;
  --accent-hover: #8db9ff;

  /* 液态玻璃效果 */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* 模糊量 */
  --blur-amount: 14px;

  /* 间距（使用 rem，随根字号缩放） */
  --navbar-height: 3.5rem;

  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* ----------------------------------------------------------
   2. 全局重置与基础样式
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 180% UI 缩放基准（默认 16px → 28.8px，150% × 1.20） */
  font-size: 28.8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  /* 统一字体栈：Noto Sans SC 作为主字体，确保所有平台与 Windows 端一致 */
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
  /* 禁止 emoji 字体渲染 */
  font-variant-emoji: text;
}

/* 链接重置 */
a {
  color: inherit;
  text-decoration: none;
}

/* 图片重置 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 按钮重置 */
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

/* ----------------------------------------------------------
   3. 液态玻璃效果工具类
   ---------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  transition: background var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

/* 导航栏专用玻璃效果（更透明） */
.glass-nav {
  background: rgba(10, 10, 18, 0.4);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border-bottom: 1px solid var(--glass-border);
}

/* ----------------------------------------------------------
   4. 背景图片层
   ---------------------------------------------------------- */
.background-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* 桌面端背景 */
.background-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("png/index-background-7.1.1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 背景图片在浏览器缩放时保持固定 */
  background-attachment: fixed;
  opacity: 0.32;
}

/* 半透明遮罩层，增强文字对比度（2026-10-19 加深，背景太亮影响阅读） */
.background-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 13, 0.55);
}

/* ----------------------------------------------------------
   5. 导航栏（电脑端显示，手机端隐藏）
   ---------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  padding: 0 1.5rem;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 导航链接通用样式 */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.44rem 0.88rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast),
    background var(--transition-fast);
  user-select: none;
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.nav-link:active {
  background: rgba(255, 255, 255, 0.03);
}

/* 主页链接在主页时的禁用状态 */
.nav-link.disabled {
  color: var(--text-tertiary);
  pointer-events: none;
  cursor: default;
}

/* 当前页面对应的导航链接高亮 */
.nav-link.active {
  color: var(--accent);
}

/* ----------------------------------------------------------
   6. 主内容区（垂直居中偏上）
   ---------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: calc(var(--navbar-height) + 2.5rem) 1.5rem 2.5rem;
  /* 视觉上偏上约 5% */
  padding-bottom: 10vh;
}

/* ----------------------------------------------------------
   7. 标题区域
   ---------------------------------------------------------- */
.title-area {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* 网站图标 */
.gensri-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* 标题文字容器 */
.title-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 主标题 */
.title-main {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* 副标题 */
.title-sub {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

/* ----------------------------------------------------------
   8. QQ 交流群板块
   ---------------------------------------------------------- */
.qq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.qq-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
}

.qq-cards {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.qq-card {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.qq-card:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-1px);
}

.qq-card i {
  color: #12B7F5;
  font-size: 1rem;
  flex-shrink: 0;
}

/* 二维码图片 */
.qq-qr {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  z-index: 20;
  background: #fff;
  padding: 6px;
}

/* 桌面端：hover 显示二维码 */
@media (hover: hover) {
  .qq-card:hover .qq-qr { display: block; }
}

/* 手机端：点击显示二维码 */
.qq-card .qq-qr.show { display: block; }

/* ----------------------------------------------------------
   9. 版本信息区域（同一行横向排列，玻璃边框包裹）
   ---------------------------------------------------------- */
.version-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  padding: 0.6rem 1.5rem;
  /* 统一字号和字体样式 */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* 分隔符 */
.version-separator {
  color: var(--glass-border);
  user-select: none;
}

/* 版本信息内的动态值 */
.version-info .version-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* ----------------------------------------------------------
   9. 跳转按钮区域（电脑端 3列×2行，手机端垂直排列）
   ---------------------------------------------------------- */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: 1600px;
}

/* 单个跳转按钮卡片：电脑端 3列布局 */
.btn-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 calc((100% - 2rem) / 3);
  padding: 1.5rem 1.25rem;
  cursor: pointer;
}

.btn-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25),
    var(--glass-inner-shadow);
  transform: translateY(-3px);
}

.btn-card:active {
  transform: translateY(0);
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

/* 按钮图标（放大） */
/* ---- 图标底衬：液态玻璃圆角矩形，边框取图标主题色 + 轻微呼吸发光 ---- */
.btn-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  /* --ico 由 HTML 内联给出（RGB 分量），兜底用站内 accent 蓝 */
  border: 1px solid rgba(var(--ico, 110, 168, 254), 0.42);
  background: rgba(var(--ico, 110, 168, 254), 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 9px -2px rgba(var(--ico, 110, 168, 254), 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
  animation: btnIconGlow 3.4s ease-in-out infinite;
  transition: border-color .25s, background-color .25s;
}

/* 图标本体在底衬里缩小一圈 */
.btn-icon-wrap .btn-icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0;
  flex-shrink: 0;
}

@keyframes btnIconGlow {
  0%, 100% {
    box-shadow: 0 0 8px -2px rgba(var(--ico, 110, 168, 254), 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  50% {
    box-shadow: 0 0 17px 1px rgba(var(--ico, 110, 168, 254), 0.46),
                inset 0 1px 0 rgba(255, 255, 255, 0.11);
  }
}

/* 悬停时底衬提亮 */
.btn-card:hover .btn-icon-wrap {
  border-color: rgba(var(--ico, 110, 168, 254), 0.72);
  background: rgba(var(--ico, 110, 168, 254), 0.14);
}

/* 尊重系统的「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn-icon-wrap { animation: none; }
}

/* 按钮文字容器 */
.btn-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* 按钮标题 */
.btn-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

/* 按钮描述（颜色更明显） */
.btn-desc {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--text-tertiary);
  /* 防止过长文字溢出 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   10. 子页面占位样式
   ---------------------------------------------------------- */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: calc(var(--navbar-height) + 2.5rem) 1.5rem 2.5rem;
}

.glass-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2.5rem;
  text-align: center;
}

/* 占位图标 */
.glass-card .placeholder-icon {
  font-size: 2.5rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

/* 占位标题 */
.glass-card .placeholder-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* 占位描述 */
.glass-card .placeholder-desc {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------
   11. 页脚（子页面底部）
   ---------------------------------------------------------- */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* 页脚两项之间的分隔点（仅桌面端单行模式） */
.site-footer span:first-child::after {
  content: "·";
  margin-left: 0.5rem;
  color: var(--text-tertiary);
  user-select: none;
}

/* ----------------------------------------------------------
   12. 响应式：平板端 (768px - 1024px)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --navbar-height: 3.25rem;
  }

  .title-main {
    font-size: 2.2rem;
  }

  .btn-group {
    max-width: 900px;
    gap: 0.75rem;
  }

  .btn-card {
    flex: 0 0 calc(50% - 0.375rem);
    padding: 1.25rem;
    gap: 0.75rem;
  }

  .btn-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
  }

  .btn-icon-wrap .btn-icon {
    width: 1.58rem;
    height: 1.58rem;
  }

  .btn-title {
    font-size: 0.95rem;
  }

  .btn-desc {
    font-size: 0.8rem;
  }
}

/* ----------------------------------------------------------
   13. 响应式：手机端 (< 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --navbar-height: 3rem;
    --blur-amount: 10px;
  }

  /* 手机端整体缩小字号（基准 28.8px → 20px） */
  html {
    font-size: 20px;
  }

  /* 手机端导航：不再隐藏，改为紧凑吸顶条 + 右侧横向滚动（见文末「移动端导航」段） */

  /* 手机端使用竖版背景图 */
  .background-layer::before {
    background-image: url("png/index-background-7.1.1(phone).jpg");
    background-attachment: scroll;
  }

  /* 主内容区：手机端有导航条了，顶部留出导航高度 */
  .hero {
    padding: calc(var(--navbar-height) + 1.25rem) 1rem 2rem;
  }

  /* 子页面占位区同样调整 */
  .placeholder {
    padding: calc(var(--navbar-height) + 1.25rem) 1rem 2rem;
  }

  /* 标题图标缩小 */
  .gensri-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
  }

  .title-area {
    gap: 0.875rem;
  }

  .title-main {
    font-size: 1.8rem;
  }

  .title-sub {
    font-size: 0.9rem;
  }

  /* 版本信息 */
  .version-info {
    margin-bottom: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  /* 按钮组：手机端恢复垂直排列 */
  .btn-group {
    flex-direction: column;
    max-width: 400px;
    gap: 0.75rem;
  }

  /* 手机端按钮恢复全宽 */
  .btn-card {
    flex: 1;
    padding: 1.25rem 1.25rem;
  }

  .btn-icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
  }

  .btn-icon-wrap .btn-icon {
    width: 1.74rem;
    height: 1.74rem;
  }

  .btn-title {
    font-size: 0.95rem;
  }

  .btn-desc {
    font-size: 0.8rem;
  }

  /* 子页面占位卡片 */
  .glass-card {
    padding: 2.25rem 1.75rem;
  }

  /* 手机端页脚恢复两行显示 */
  .site-footer {
    flex-direction: column;
    gap: 0.15rem;
  }

  .site-footer span:first-child::after {
    content: none;
  }
}

/* 小屏手机优化 (< 400px) */
@media (max-width: 400px) {
  .title-main {
    font-size: 1.5rem;
  }

  .title-sub {
    font-size: 0.8rem;
  }

  .gensri-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .btn-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .btn-icon-wrap {
    width: 2.375rem;
    height: 2.375rem;
  }

  .btn-icon-wrap .btn-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .btn-title {
    font-size: 0.9rem;
  }

  .version-info {
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
  }
}

/* ----------------------------------------------------------
   14. 辅助工具类
   ---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   15. 管理员登录入口 + 模态框
   ---------------------------------------------------------- */
.admin-login-entry {
  text-align: center;
  padding: 0.5rem 0 1.5rem 0;
}
.admin-login-entry a {
  font-size: 0.75rem; color: var(--text-tertiary); text-decoration: none;
  transition: color var(--transition-fast);
}
.admin-login-entry a:hover { color: var(--text-secondary); }
.admin-login-entry i { margin-right: 0.25rem; }

/* 模态框遮罩 */
.admin-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: adminFadeIn 0.2s ease-out;
}
.admin-modal {
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: 2rem 1.75rem; width: 360px; max-width: 90vw;
  background: rgba(18,18,26,0.96); position: relative;
}
/* 顶部圆形锁图标 */
.admin-modal-icon {
  width: 56px; height: 56px; margin: 0 auto 0.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(110,168,254,0.12);
  color: var(--accent); font-size: 1.4rem;
}
.admin-modal h3 {
  font-size: 1.05rem; font-weight: 600; color: var(--text-primary);
  text-align: center; margin-bottom: 0.35rem;
}
/* 输入框（含左侧图标） */
.admin-modal-field {
  position: relative; display: flex; align-items: center;
}
.admin-modal-field i {
  position: absolute; left: 0.85rem; color: var(--text-tertiary); font-size: 0.85rem;
  pointer-events: none;
}
.admin-modal-field input {
  width: 100%; padding: 0.6rem 0.9rem 0.6rem 2.4rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); background: rgba(255,255,255,0.05);
  color: #fff; font-family: inherit; font-size: 0.9rem;
}
.admin-modal-field input:focus { outline: none; border-color: var(--accent); }
.admin-modal-field:focus-within i { color: var(--accent); }
.admin-modal-close {
  position: absolute; top: 0.75rem; right: 1rem;
  background: none; border: none; font-size: 1.5rem; color: var(--text-tertiary);
  cursor: pointer; line-height: 1;
}
.admin-modal-close:hover { color: var(--text-primary); }
.admin-modal-error { font-size: 0.8rem; color: #ff6b6b; text-align: center; min-height: 1.2em; }
.admin-modal-login-btn {
  padding: 0.6rem; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-family: inherit;
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast);
}
.admin-modal-login-btn:hover { background: var(--accent-hover); }
.admin-modal-login-btn:disabled { opacity: 0.6; cursor: not-allowed; }

@keyframes adminFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .admin-modal { padding: 1.5rem; width: 320px; }
}

/* ----------------------------------------------------------
   16. 语言切换（导航栏，手机端随导航栏一起隐藏）
   视觉参考 db 角色详情页「版本差异模式」的深色液态玻璃下拉
   ---------------------------------------------------------- */
.lang-switch {
  position: relative;
  flex: 0 0 auto;
}

/* 触发按钮：与导航链接同色的玻璃胶囊 */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.72rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--transition-normal), border-color var(--transition-normal),
    background var(--transition-normal);
}

.lang-btn:hover,
.lang-switch.open .lang-btn {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.07);
}

.lang-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
}

/* 下拉箭头：展开时柔和翻转 */
.lang-caret {
  font-size: 0.6rem;
  color: var(--text-tertiary);
  transition: transform var(--transition-normal), color var(--transition-normal);
}

.lang-switch.open .lang-caret {
  transform: rotate(180deg);
  color: var(--accent);
}

/* 国旗图标（SVG 文件，不使用 emoji） */
.lang-flag {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 0.8rem;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.lang-flag-cn { background-image: url("/png/flags/cn.svg"); }
.lang-flag-en { background-image: url("/png/flags/us.svg"); }

/* 下拉列表：深色液态玻璃面板，展开/收起为柔和过渡 */
.lang-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 8.5rem;
  padding: 0.3rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border-hover);
  background: rgba(18, 20, 28, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-0.3rem) scale(0.98);
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.lang-switch.open .lang-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 单个语言选项 */
.lang-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.42rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.lang-opt:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.lang-opt.active {
  color: #FFD780;
  background: rgba(255, 215, 128, 0.12);
}

.lang-opt-code {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.lang-opt.active .lang-opt-code {
  color: #FFD780;
}

/* ----------------------------------------------------------
   17. 直播倒计时卡片（主页：跳转入口下方、网站介绍上方）
   ----------------------------------------------------------
   左右宽度与网站介绍卡片一致。
   数据来自站点根 config.json 的 live 字段；三种状态由 script.js 的
   initLive() 每秒判断：
     有预告未开播 → 四位数字倒计时（每秒跳动动效）
     已到开播时间 → 绿色发光点 + 正在直播中
     没有预告     → 黄色发光点 + 最近无直播预告
   ---------------------------------------------------------- */

/* hidden 必须真的隐藏：下面这些类都设了 display，会盖掉浏览器对 [hidden] 的默认样式 */
[hidden] { display: none !important; }

.live-card {
  width: 100%;
  max-width: 1600px;
  margin-top: 1.25rem;
  padding: 1.6rem 1.9rem;
  /* 抖音二维码向上弹出、要盖住上方的跳转按钮：.btn-card 悬停时带 transform
     （会创建层叠上下文），不在这里抬高整块就会被压住 */
  position: relative;
  z-index: 30;
}

.live-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.01em;
}

/* 标题图标：抖音图标，圆角处理 */
.live-title-icon {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* 第一行：本场直播内容 */
.live-content {
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  word-break: break-word;
}

/* ---- 倒计时：四位数字各占一个小玻璃方块 ---- */
.live-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.2rem 0 0.9rem;
}

.live-unit {
  display: flex;
  align-items: baseline;
  gap: 0.18rem;
}

.live-num {
  display: inline-block;
  min-width: 2.2ch;
  padding: 0.12rem 0.3rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  text-align: center;
  /* 等宽数字：跳动时宽度不抖 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-shadow: 0 2px 12px rgba(254, 44, 85, 0.45);
}

/* 数字变化动效：从上方滑入 + 淡入 */
.live-num.tick {
  animation: liveTick 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes liveTick {
  0%   { transform: translateY(-0.34em); opacity: 0.2; }
  65%  { transform: translateY(0.03em);  opacity: 1; }
  100% { transform: translateY(0);       opacity: 1; }
}

.live-unit i {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ---- 状态徽标：发光点 + 文案 ---- */
.live-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.3rem 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
}

.live-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 正在直播中：绿色发光点（呼吸式外扩） */
.live-badge.is-live .live-dot {
  background: #34d399;
  animation: livePulse 1.5s ease-out infinite;
}

/* 最近无直播预告：黄色发光点 */
.live-badge.is-idle .live-dot {
  background: #fbbf24;
  animation: livePulseIdle 2.2s ease-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.75); }
  70%  { box-shadow: 0 0 0 0.55rem rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@keyframes livePulseIdle {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
  70%  { box-shadow: 0 0 0 0.45rem rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

/* ---- 提示内容（字体偏小，后端调控） ---- */
.live-tip {
  margin: 0 auto 1rem;
  max-width: 52rem;
  font-size: 0.72rem;
  line-height: 1.75;
  color: var(--text-secondary);
  text-align: center;
  word-break: break-word;
}

/* ---- 抖音主页二维码 ---- */

/* 按钮固定在模块右上角，与标题同一水平线 */
.live-qr-card {
  position: absolute;
  top: 1.6rem;                 /* = .live-card 的 padding-top，与标题顶边对齐 */
  right: 1.9rem;               /* = .live-card 的 padding-right */
}

/* 二维码：只限宽度，高度按原图比例。
   这张抖音码是竖版（高 > 宽），不能套用 QQ 二维码的 140×140 正方形尺寸，
   否则会被压扁；另外卡片在右上角，二维码改为向右对齐弹出，避免越出右边界。 */
.live-qr-card .qq-qr {
  width: 170px;
  height: auto;
  left: auto;
  right: 0;
  transform: none;
}

/* 手机端：跟着 .live-card 收窄的内边距一起挪，二维码也小一号 */
@media (max-width: 768px) {
  .live-qr-card {
    top: 1.25rem;
    right: 1.25rem;
  }
  .live-qr-card .qq-qr { width: 140px; }
}

/* 手机端：倒计时数字明显缩小，保证一行放得下 */
@media (max-width: 768px) {
  .live-card {
    max-width: 400px;
    margin-top: 1rem;
    padding: 1.25rem 1.25rem;
  }

  .live-title {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
  }

  .live-content {
    font-size: 0.8rem;
  }

  .live-countdown {
    gap: 0.32rem;
    margin-bottom: 0.75rem;
  }

  .live-num {
    min-width: 2ch;
    padding: 0.1rem 0.2rem;
    font-size: 1.15rem;
  }

  .live-unit i {
    font-size: 0.68rem;
  }

  .live-badge {
    font-size: 0.92rem;
  }

  .live-tip {
    font-size: 0.68rem;
  }
}

@media (max-width: 400px) {
  .live-card {
    padding: 1rem;
  }

  .live-num {
    min-width: 1.9ch;
    font-size: 1rem;
  }
}

/* ----------------------------------------------------------
   18. 网站介绍卡片（主页：跳转列表下方、管理员登录上方）
   ----------------------------------------------------------
   正文不写死在这里，而是由后台「网站介绍」页面维护的
   站点根 config.json 的 intro 字段提供，前台 script.js 的
   renderIntroFromConfig() 负责填充；主页 HTML 里那段是默认文字
   （没开 JS 也能看到）。
   文字按需求用醒目的白色，并加一点文字阴影，保证在玻璃/背景图上都清晰。
   正文字号 0.85rem（主页 html 基准 28.8px，约 24.5px）——
   原来是 1rem(28.8px)，放在卡片里明显偏大，已按要求收小。
   ---------------------------------------------------------- */
.intro-card {
  width: 100%;
  max-width: 1600px;
  margin-top: 1.25rem;
  padding: 1.6rem 1.9rem;
}

.intro-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.01em;
}

/* 标题前的图标：直接用小尺寸网站图标（png/gensri.png），做圆角处理 */
.intro-title-icon {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: block;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.intro-body p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  word-break: break-word;
}

/* 段与段之间留出间距（后台用空行分段） */
.intro-body p + p {
  margin-top: 0.8rem;
}

/* 平板端：与跳转列表同宽 */
@media (max-width: 1024px) {
  .intro-card {
    max-width: 900px;
    padding: 1.4rem 1.5rem;
  }
}

/* 手机端：与跳转列表同宽、内边距收紧 */
@media (max-width: 768px) {
  .intro-card {
    max-width: 400px;
    margin-top: 1rem;
    padding: 1.25rem 1.25rem;
  }

  .intro-title {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
  }

  .intro-body p {
    font-size: 0.82rem;
    line-height: 1.75;
  }
}

@media (max-width: 400px) {
  .intro-card {
    padding: 1rem;
  }

  .intro-body p {
    font-size: 0.8rem;
  }
}
/* ----------------------------------------------------------
   19. 主页「最后更新」展开面板
   ----------------------------------------------------------
   「最后更新」旁边一个小标签提示可展开；鼠标悬停或点击都能展开明细。
   面板放在这一项内部（绝对定位），所以鼠标移到面板上时不会收起。
   JS 会把内容填好并给这一项加上 updates-ready 类，标签才显示
   （没 JS / 没数据时不会出现空面板）。
   ---------------------------------------------------------- */

/* 注意 z-index 不能省：.version-info 带 .glass（backdrop-filter 会创建层叠上下文），
   它本身没有 z-index 时，整个子树会按 DOM 顺序绘制 —— 位置在它下面的跳转按钮
   （.btn-group）在后面，就会盖住展开面板。抬高层级后画面板才不会被遮挡。 */
.version-info { position: relative; z-index: 80; }

.version-item-updates {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  outline: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.version-item-updates:focus-visible {
  box-shadow: 0 0 0 2px rgba(110, 168, 254, 0.5);
}

/* 提示标签：默认隐藏，内容准备好了才出现 */
.updates-hint {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast);
}
.version-item-updates.updates-ready .updates-hint { display: inline-flex; }
.version-item-updates:hover .updates-hint,
.version-item-updates.open .updates-hint {
  color: var(--accent);
  border-color: rgba(110, 168, 254, 0.45);
  background: rgba(110, 168, 254, 0.12);
}
.updates-hint i { font-size: 0.62rem; }

/* 展开面板 */
.updates-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 60;
  width: max-content;
  max-width: min(90vw, 44rem);
  padding: 0.9rem 1.1rem;
  text-align: left;
  background: rgba(18, 18, 26, 0.97);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* 悬停展开只在支持悬停的设备上生效：
   触屏设备上 :hover 容易"粘住"（手指移开后仍保持展开），
   所以触屏统一走点击展开 + 点空白/按 Esc 收起（JS 里的 .open 类）。 */
@media (hover: hover) {
  .version-item-updates:hover .updates-panel { display: block; }
}
.version-item-updates.open .updates-panel { display: block; }

.updates-title {
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.updates-row {
  display: grid;
  grid-template-columns: 6.5rem 6rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.updates-row:first-of-type { border-top: 0; }

.updates-name { color: #ffffff; font-weight: 500; }
.updates-date { color: var(--accent); font-variant-numeric: tabular-nums; }
.updates-note { color: var(--text-secondary); line-height: 1.6; }
.updates-note-empty { color: var(--text-tertiary); }

/* 手机端：面板窄一点、每行改成上下两行 */
@media (max-width: 768px) {
  .updates-panel {
    max-width: 92vw;
    padding: 0.8rem 0.9rem;
  }
  .updates-row {
    grid-template-columns: 5.5rem 1fr;
    row-gap: 0.15rem;
  }
  .updates-note { grid-column: 1 / -1; }
}
/* ----------------------------------------------------------
   18.1 手机端：「当前版本」与「最后更新」分两行显示
   ----------------------------------------------------------
   窄屏（尤其手机端 20px 根字号）下这两项挤在一行会把文字压扁，
   所以窄屏改成竖排：各自一行，中间那根「|」隐藏。
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .version-info {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
  }

  .version-separator { display: none; }

  /* 「最后更新」那一项：提示标签换行时也保持居中 */
  .version-item-updates {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
}
/* ==========================================================
   20. 移动端导航（2026-10-24）
   ----------------------------------------------------------
   原来手机端直接 display:none，导致手机上没有任何页面间导航。
   现在改为「紧凑吸顶条 + 右侧横向滚动」：
     · 高度收到 2.75rem，比桌面端矮，不占太多纵向空间
     · 左侧「主页」和语言切换固定不动
     · 右侧 5 个子页面链接可横向滑动，滚动条隐藏
     · 右缘加渐隐遮罩，暗示「还能往右滑」
   ========================================================== */
@media (max-width: 768px) {
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    height: 2.75rem;
    padding: 0 0.6rem;
    overflow: hidden;                    /* 滚动只发生在 .nav-right 内部 */
    position: relative;
  }

  /* 右缘渐隐 + 小箭头：明确告诉用户「还能往右滑」 */
  .navbar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.4rem;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(10, 10, 16, 0) 0%,
      rgba(10, 10, 16, 0.72) 55%,
      rgba(10, 10, 16, 0.92) 100%
    );
  }

  /* 箭头本体（用一个 chevron 字符，避免动图/图片） */
  .navbar::before {
    content: "";
    position: absolute;
    right: 0.42rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid rgba(240, 240, 245, 0.8);
    border-top: 2px solid rgba(240, 240, 245, 0.8);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    z-index: 2;
    animation: sriNudge 2.6s ease-in-out infinite;
  }

  /* 箭头轻轻右移，提示可滑动 */
  @keyframes sriNudge {
    0%, 100% { opacity: 0.35; transform: translateY(-50%) rotate(45deg) translate(0, 0); }
    50%      { opacity: 0.85; transform: translateY(-50%) rotate(45deg) translate(0.12rem, 0); }
  }

  .nav-left {
    flex: 0 0 auto;
    gap: 0.35rem;
    min-width: 0;
  }

  .nav-left .nav-link {
    padding: 0.32rem 0.5rem;
    font-size: 0.76rem;
    gap: 0.28rem;
  }

  /* 语言切换：手机端缩成小按钮，省地方 */
  .lang-switch { margin: 0; }
  .lang-btn {
    padding: 0.3rem 0.45rem;
    gap: 0.25rem;
    font-size: 0.72rem;
  }
  .lang-btn .lang-code { display: none; }      /* 只留国旗 + 箭头 */
  .lang-flag { width: 1rem; height: 0.72rem; }

  /* 右侧：横向可滚动 */
  .nav-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;               /* Firefox */
    -ms-overflow-style: none;            /* 旧 Edge */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* 右缘留白给渐隐遮罩 + 箭头（遮罩由 .navbar::after 实现） */
    padding-right: 2.2rem;
  }
  .nav-right::-webkit-scrollbar { display: none; }

  .nav-right .nav-link {
    flex: 0 0 auto;
    padding: 0.32rem 0.55rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  /* 小屏再收一点 */
  @media (max-width: 400px) {
    .navbar { height: 2.5rem; padding: 0 0.45rem; }
    .nav-left .nav-link,
    .nav-right .nav-link { font-size: 0.72rem; padding: 0.28rem 0.45rem; }
  }
}

/* ==========================================================
   21. 页面进入动效（轻量，不花哨）
   ----------------------------------------------------------
   只做三件事：内容淡入上移、卡片依次浮现、骨架屏淡出。
   全部在 prefers-reduced-motion 下自动关闭。
   ========================================================== */

/* 内容淡入上移 */
@keyframes sriRiseIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 卡片浮现（配合 stagger 用） */
@keyframes sriCardIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 骨架屏呼吸 */
@keyframes sriSkelPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* 骨架屏扫光 */
@keyframes sriSkelShine {
  from { background-position: -160% 0; }
  to   { background-position: 260% 0; }
}

/* 页面主体（hero / 容器）进入 */
.hero,
.placeholder,
.admin-main {
  animation: sriRiseIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 按钮 / 卡片依次浮现 */
.btn-card,
.glass-card,
.live-card,
.intro-card {
  animation: sriCardIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.btn-card:nth-child(1) { animation-delay: 0.04s; }
.btn-card:nth-child(2) { animation-delay: 0.09s; }
.btn-card:nth-child(3) { animation-delay: 0.14s; }
.btn-card:nth-child(4) { animation-delay: 0.19s; }
.btn-card:nth-child(5) { animation-delay: 0.24s; }
.btn-card:nth-child(6) { animation-delay: 0.29s; }

/* ==========================================================
   22. 骨架屏
   ----------------------------------------------------------
   由 script.js 在 DOM 就绪时动态注入（见 initSkeleton），
   这样几百个页面不用逐个改 HTML。加载完成后整层淡出。
   ========================================================== */
.sri-skeleton {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--bg-primary, #0a0a10);
  overflow: hidden;
  transition: opacity 0.38s ease, visibility 0.38s ease;
}

/* 淡出后不再拦截点击 */
.sri-skeleton.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 骨架块通用样式：深色底 + 扫光 */
.sri-sk {
  border-radius: var(--radius-md, 12px);
  background-color: rgba(255, 255, 255, 0.045);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.075) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 160% 100%;
  background-repeat: no-repeat;
  animation: sriSkelShine 1.5s linear infinite, sriSkelPulse 2.4s ease-in-out infinite;
}

/* 顶部导航条占位 */
.sri-sk-nav {
  height: 3.5rem;
  flex: none;
}

/* 标题区占位 */
.sri-sk-hero {
  height: 9rem;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.sri-sk-hero::before,
.sri-sk-hero::after {
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
}
.sri-sk-hero::before { width: 46%; height: 1.6rem; }
.sri-sk-hero::after  { width: 30%; height: 0.8rem; }

/* 卡片网格占位 */
.sri-sk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  flex: 1;
}
.sri-sk-grid .sri-sk { min-height: 5.5rem; }

@media (max-width: 768px) {
  .sri-sk-nav  { height: 2.75rem; }
  .sri-sk-hero { height: 7.5rem; }
  .sri-sk-grid { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* 尊重「减少动态效果」：全部关掉 */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .placeholder,
  .admin-main,
  .btn-card,
  .glass-card,
  .live-card,
  .intro-card {
    animation: none;
  }
  .sri-sk {
    animation: none;
  }
  .sri-skeleton {
    transition: none;
  }
  .navbar::before {
    animation: none;
  }
}
/* ==========================================================
   23. 手机端细节修补（2026-10-24）
   ----------------------------------------------------------
   1) QQ 群两张卡片原来横向并排，390px 宽度下第二张会被截断 → 改纵向
   2) 版本信息容器被压得很窄 → 撑开并居中
   3) 跳转按钮卡片在窄屏留白偏多 → 收紧
   ========================================================== */
@media (max-width: 768px) {
  /* QQ 群：纵向排列，避免溢出 */
  .qq-cards {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }

  .qq-card {
    justify-content: center;
    width: 100%;
  }

  /* 版本信息：手机端压成单行（原来纵向排列 + 隐藏面板占位，把容器撑得很高） */
  .version-info {
    width: 100%;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  /* 分隔符保留（单行时有用），稍微收窄 */
  .version-separator { display: inline; opacity: 0.45; }

  /* 「查看各页更新」：手机端只留小图标，文字隐藏，省空间 */
  .updates-hint { font-size: 0; gap: 0; }
  .updates-hint i { font-size: 0.8rem; }

  /* 主内容区左右留白收紧，给卡片更多宽度 */
  .hero { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* ==========================================================
   导航改版（2026-10-24 第2版）
   ----------------------------------------------------------
   需求：手机端顶部导航左侧放「主页 + 返回上一页」，右侧放「菜单」按钮，
         点开是下拉列表，里面放各页面跳转。
   电脑端：保持左侧「主页 + 返回」，右侧仍是原来的横排链接（不下拉）。

   实现上返回按钮与菜单按钮都由 JS 注入（见 script），
   HTML 一行都不用改 —— 主站 24 页、db 451 页、cs 5 页自动生效。
   ========================================================== */

/* ---- 返回按钮：所有屏幕尺寸都显示 ---- */
.nav-back {
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-back i { font-size: 0.86em; }
.nav-back:active { transform: scale(0.96); }

/* ---- 菜单按钮：默认隐藏，只在手机端出现 ---- */
.nav-menu-btn {
  display: none;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  align-items: center;
  gap: 0.3rem;
}

/* ---- 下拉面板：默认隐藏 ---- */
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0.55rem;
  min-width: 9.5rem;
  max-height: 62vh;
  overflow-y: auto;
  padding: 0.32rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.14));
  background: rgba(14, 14, 22, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.62);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 60;
}
.navbar.is-menu-open .nav-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu-item {
  display: block;
  padding: 0.52rem 0.72rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.85rem;
  color: var(--text-secondary, rgba(240,240,245,0.7));
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.14s, color 0.14s;
}
.nav-menu-item:hover,
.nav-menu-item:active {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.nav-menu-item.is-active {
  background: rgba(var(--accent-rgb, 110, 168, 254), 0.18);
  color: var(--accent, #6ea8fe);
  font-weight: 600;
}

@media (max-width: 768px) {
  /* 手机端：隐藏原横排链接，改由下拉菜单承载 */
  .navbar .nav-right {
    display: none !important;
  }

  .navbar .nav-menu-btn {
    display: inline-flex;
    padding: 0.32rem 0.55rem;
    font-size: 0.76rem;
    flex: 0 0 auto;
  }

  /* 左侧那组（主页 + 返回）收一点 */
  .navbar .nav-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.3rem;
  }
  .navbar .nav-left .nav-link,
  .navbar .nav-left .nav-back {
    padding: 0.32rem 0.5rem;
    font-size: 0.76rem;
  }

  /* 语言切换：只留国旗，进一步省位 */
  .navbar .lang-btn .lang-code { display: none; }
  .navbar .lang-flag { width: 1rem; height: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-panel { transition: none; }
}

/* ---------- 修正：菜单按钮被 .nav-left 挤出（2026-10-24）----------
   .nav-left 之前设了 flex: 1 1 auto，会占满整行，把右侧菜单按钮推到
   overflow:hidden 外面。改成按内容宽度，并让菜单按钮靠右。 */
@media (max-width: 768px) {
  .navbar .nav-left {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  /* 左侧内容过多时自身可横滑，不影响右侧菜单按钮 */
  .navbar .nav-left {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .navbar .nav-left::-webkit-scrollbar { display: none; }

  .navbar .nav-menu-btn {
    margin-left: auto;
    flex: 0 0 auto;
  }
}

/* ==========================================================
   导航修复（2026-10-24 第3版）
   ----------------------------------------------------------
   修的问题：
   ① 手机端点「菜单」没反应 —— .navbar 是 overflow:hidden，下拉面板在它外面被裁掉
   ② 返回按钮位置 —— 要紧跟「主页」右侧，而不是排在语言切换后面
   ③ 手机端不展示语言切换
   ========================================================== */

/* 返回按钮：做成与 nav-link 完全一致的胶囊，位置由 JS 保证紧跟主页 */
.nav-back {
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.nav-back i { font-size: 0.86em; }
.nav-back:active { transform: scale(0.96); }
/* 没有上一级时（如主页）自动隐藏 */
.nav-back[hidden] { display: none !important; }

/* 菜单按钮：默认隐藏 */
.nav-menu-btn {
  display: none;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  align-items: center;
  gap: 0.3rem;
}

/* 下拉面板 */
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0.55rem;
  min-width: 9.5rem;
  max-height: 62vh;
  overflow-y: auto;
  padding: 0.32rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.14));
  background: rgba(14, 14, 22, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.62);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 90;
}
.navbar.is-menu-open .nav-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu-item {
  display: block;
  padding: 0.52rem 0.72rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.85rem;
  color: var(--text-secondary, rgba(240,240,245,0.7));
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.14s, color 0.14s;
}
.nav-menu-item:hover,
.nav-menu-item:active {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.nav-menu-item.is-active {
  background: rgba(var(--accent-rgb, 110, 168, 254), 0.18);
  color: var(--accent, #6ea8fe);
  font-weight: 600;
}

@media (max-width: 768px) {
  /* ★ 关键修复①：navbar 不能裁剪下拉面板 */
  .navbar {
    overflow: visible !important;
  }

  /* ★ 修复③：手机端不展示语言切换 */
  .navbar .lang-switch {
    display: none !important;
  }

  /* 隐藏原横排链接，改由下拉菜单承载 */
  .navbar .nav-right {
    display: none !important;
  }

  .navbar .nav-menu-btn {
    display: inline-flex;
    padding: 0.32rem 0.55rem;
    font-size: 0.76rem;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* 左侧（主页 + 返回）按内容宽度，不抢空间 */
  .navbar .nav-left {
    flex: 0 1 auto;
    min-width: 0;
    overflow: visible;
    gap: 0.3rem;
  }
  .navbar .nav-left .nav-link,
  .navbar .nav-left .nav-back {
    padding: 0.32rem 0.5rem;
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-panel { transition: none; }
}

/* ---------- 强制生效：下拉面板展开（2026-10-24 第4版）----------
   前面写的 .navbar.is-menu-open .nav-menu-panel 实测未生效（computed 仍为
   visibility:hidden / opacity:0），这里用 !important 强制覆盖，确保点开可见。 */
.navbar.is-menu-open .nav-menu-panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  display: block !important;
}
.nav-menu-panel {
  display: block;
}
/* 收起状态用透明度+可见性控制，display 保持 block 以便过渡 */
.navbar:not(.is-menu-open) .nav-menu-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ============================================================
   保留卡片毛玻璃，移除 transform（2026-10-25）
   Chromium 在 backdrop-filter + transform 叠加时会把模糊层裁成
   亮色矩形；卡片不再做 hover 位移/缩放，改用阴影与边框反馈。
   静态面板、导航栏不受影响。
   ============================================================ */
.btn-card:hover,
.btn-card:active,
.wiki-card:hover,
.db-card:hover,
.db-card:active,
.cs-card:hover,
.cs-card:active,
.data-card:hover,
.data-card:active,
.char-card:hover,
.weapon-card:hover,
.artifact-card:hover,
.glass-card:hover {
  transform: none !important;
}
.db-card:hover,
.cs-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* 补充：这些毛玻璃元素同样不能参与 transform 合成 */
.qq-card:hover,
.cs-entry:hover,
.cs-entry:active {
  transform: none !important;
}
.lang-menu,
.lang-switch.open .lang-menu,
.nav-menu-panel,
.navbar.is-menu-open .nav-menu-panel,
.navbar:not(.is-menu-open) .nav-menu-panel {
  transform: none !important;
}

/* 图标本身也是毛玻璃，悬停不能再缩放/位移 */
.cs-entry:hover .cs-entry-icon,
.cs-entry:active .cs-entry-icon {
  transform: none !important;
}

/* ============================================================
   毛玻璃修复（2026-10-26）
   opacity/transform 动画会形成 backdrop root，导致卡片内的
   backdrop-filter 只能取到容器内部背景，看起来像没有毛玻璃。
   含毛玻璃的页面容器和卡片不再做入场动画；淡入改用覆盖层。
   ============================================================ */
.db-main,
.hero,
.cs-shell,
.btn-card,
.glass-card,
.live-card,
.intro-card,
.char-card,
.weapon-card,
.artifact-card,
.cs-card,
.data-card {
  animation: none !important;
}


/* ============================================================
   24. 响应式体系（2026-10-26）
   ------------------------------------------------------------
   目标设备：
     手机 360–430 ｜ 平板竖屏 768–834 ｜ 平板横屏 1024–1180
     笔记本 1280–1600 ｜ 桌面 1920 ｜ 超宽 2560
   做法：
     ① 根字号改成 clamp()，全站 rem 尺寸随视口平滑缩放；
     ② 导航在 769–1199 使用「紧凑密度」，并在所有尺寸禁止换行；
     ③ 首页栅格 3 列（≥1024）/ 2 列（769–1023）/ 1 列（≤768）；
     ④ 内容容器封顶 1600px，超宽屏只增加留白不拉宽内容。
   ============================================================ */

/* ---------- 24.1 流式根字号 ---------- */
/* 兜底：极旧浏览器不支持 clamp 时按 16px 排版 */
html { font-size: 16px; }

@media (max-width: 768px) {
  /* 手机 + 平板竖屏：16 → 19px 平滑放大 */
  html { font-size: clamp(16px, 4.5vw, 19px); }
}

@media (min-width: 769px) and (max-width: 1023px) {
  /* 平板：19 → 21px */
  html { font-size: clamp(19px, 2.05vw, 21px); }
}

@media (min-width: 1024px) {
  /* 桌面：21px 起步，1920 宽时正好 28.8px（与旧版观感一致） */
  html { font-size: clamp(21px, 1.5vw, 28.8px); }
}

/* iOS 横竖屏切换时不要自动放大字号 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 24.2 内容容器与留白 ---------- */
:root {
  --page-max: 1600px;
  --page-gutter: clamp(1rem, 2.6vw, 3rem);
}

.hero {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  /* 手机地址栏收缩时用动态视口高度，避免底部被裁 */
  min-height: 100vh;
  min-height: 100dvh;
}

.btn-group,
.live-card,
.intro-card {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 24.3 导航栏：任何宽度都不换行 ---------- */
.nav-link,
.nav-back,
.nav-menu-btn,
.nav-immersive,
.lang-btn {
  white-space: nowrap;
}

.nav-right {
  flex-wrap: nowrap;
  min-width: 0;
}

.navbar {
  column-gap: 0.75rem;
}

/* 平板横屏 / 小笔记本（769–1199）：紧凑密度，保证 6 个链接 + 主页 + 返回 + 语言同排 */
@media (min-width: 769px) and (max-width: 1199px) {
  .navbar {
    padding: 0 1.1rem;
  }

  .nav-left,
  .nav-right {
    gap: 0.1rem;
  }

  .nav-link {
    padding: 0.38rem 0.6rem;
    font-size: 0.8rem;
    gap: 0.3rem;
  }

  .lang-btn {
    padding: 0.38rem 0.55rem;
    font-size: 0.8rem;
    gap: 0.3rem;
  }

  /* 语言切换只留国旗 + 箭头 */
  .lang-btn .lang-code {
    display: none;
  }

  /* db 站「沉浸式」收成纯图标 */
  .nav-immersive {
    padding: 0.38rem 0.5rem;
    font-size: 0.8rem;
  }

  .nav-immersive span {
    display: none;
  }
}

/* 大屏以上：留白随视口增大，内容宽度仍封顶 1600px */
@media (min-width: 1600px) {
  .navbar {
    padding: 0 clamp(1.5rem, 2.4vw, 3rem);
  }

  .btn-group {
    gap: 1.15rem;
  }

  /* 间距变大后 3 列的基准也要同步扣掉两个 gap，否则第 3 张会被挤到下一行 */
  .btn-card {
    flex: 0 0 calc((100% - 2.3rem) / 3);
  }
}

/* ---------- 24.4 首页跳转卡片栅格 ---------- */
/* 桌面：3 列（沿用原有 flex-basis，这里只补 2 列档） */
@media (min-width: 769px) and (max-width: 1023px) {
  .btn-card {
    flex: 0 0 calc((100% - 1rem) / 2);
    padding: 1.15rem 1rem;
    gap: 0.85rem;
  }

  .btn-icon-wrap {
    width: 2.85rem;
    height: 2.85rem;
  }

  .btn-icon-wrap .btn-icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .btn-title {
    font-size: 1rem;
  }

  .btn-desc {
    font-size: 0.82rem;
  }
}

/* ---------- 24.5 平板竖屏（769–1023）通用收敛 ---------- */
@media (min-width: 769px) and (max-width: 1023px) {
  .hero {
    padding-top: calc(var(--navbar-height) + 1.8rem);
    padding-bottom: 3rem;
  }

  .title-main {
    font-size: 2.1rem;
  }

  .title-sub {
    font-size: 0.95rem;
  }

  .gensri-icon {
    width: 3.4rem;
    height: 3.4rem;
  }

  .version-info {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
    row-gap: 0.35rem;
  }

  .qq-cards {
    gap: 0.6rem;
  }
}

/* ---------- 24.6 手机端（≤768）补充 ---------- */
@media (max-width: 768px) {
  /* 直播卡右上角的抖音按钮：绝对定位在窄屏会压住标题，改为卡片内居中一行 */
  .live-qr-card {
    position: static;
    margin: 0.7rem auto 0;
    padding: 0.42rem 0.85rem;
    font-size: 0.75rem;
  }

  .live-qr-card .qq-qr {
    left: 50%;
    right: auto;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: 150px;
  }

  /* 标题字号跟随根字号，避免 430px 与 360px 观感差异过大 */
  .title-main {
    font-size: clamp(1.7rem, 7.4vw, 2rem);
  }

  .title-sub {
    font-size: clamp(0.82rem, 3.4vw, 0.95rem);
  }

  /* 版本条：窄屏允许换行，避免「当前版本 / 最后更新 / 展开提示」挤成两截 */
  .version-info {
    flex-wrap: wrap;
    white-space: normal;
    gap: 0.35rem 0.6rem;
    width: auto;
    max-width: 100%;
    font-size: 0.76rem;
    padding: 0.5rem 0.9rem;
  }

  .version-separator {
    display: none;
  }

  .version-item-updates {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.15rem;
  }

  /* 手机会把 3 列按钮压成单列（原有规则已处理），这里只收敛间距 */
  .btn-group {
    gap: 0.7rem;
  }
}

/* 大屏手机 / 小平板（481–768）：两列，别让单列卡片拉得太宽 */
@media (min-width: 481px) and (max-width: 768px) {
  .btn-group {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 46rem;
    gap: 0.7rem;
  }

  .btn-card {
    flex: 0 0 calc((100% - 0.7rem) / 2);
    padding: 1rem 1rem;
  }

  .btn-icon-wrap {
    width: 2.6rem;
    height: 2.6rem;
  }

  .btn-icon-wrap .btn-icon {
    width: 1.65rem;
    height: 1.65rem;
  }

  .btn-title {
    font-size: 0.95rem;
  }

  .btn-desc {
    font-size: 0.78rem;
  }
}

/* ---------- 24.7 横屏手机（高度很矮） ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    justify-content: flex-start;
    min-height: auto;
    padding-top: calc(var(--navbar-height) + 1rem);
    padding-bottom: 2rem;
  }

  .title-area {
    margin-bottom: 0.8rem;
  }

  .title-main {
    font-size: 1.6rem;
  }
}

/* ---------- 24.8 超窄屏兜底（<360） ---------- */
@media (max-width: 359px) {
  .navbar {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .version-info {
    font-size: 0.72rem;
    padding: 0.4rem 0.6rem;
  }
}


/* ============================================================
   25. 主页改版：功能概览 + 最近更新（2026-10-26）
   ------------------------------------------------------------
   结构：
     .overview   功能概览（含直播条 + 6 张子页面卡片）
     .updates    最近更新（时间线 + 各页更新日期）
   动效：
     ① data-reveal 进入视口时淡入上移，逐个错开（IntersectionObserver）
     ② 卡片悬停：主题色描边 + 上浮 + 图标发光 + 箭头右移
     ③ 概览区背景光斑随滚动轻微视差（仅桌面端、尊重减少动效设置）
   注意：新卡片**不使用 backdrop-filter**（Chromium 下模糊层 + transform
         会裁出亮色矩形），改用分层渐变模拟玻璃质感，保证动效稳定。
   ============================================================ */

/* ---------- 25.1 区块通用 ---------- */
.home-block {
  width: 100%;
  max-width: var(--page-max, 1600px);
  margin: 0 auto;
  padding: 0;
}

/* 进入视口的统一动效（JS 加 .is-in；html.js 由页首内联脚本打上，无 JS 时内容照常显示） */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- 25.2 区块标题 ---------- */
.overview {
  margin-top: 3.4rem;
}

.ov-head {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 auto 1.9rem;
  text-align: center;
}

/* 标题背后的柔和暗色衬底：背景图较亮时也能读清 */
.ov-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(46rem, 92vw);
  height: 11rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(8, 8, 13, 0.66), rgba(8, 8, 13, 0) 78%);
  pointer-events: none;
}

.ov-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: rgba(110, 168, 254, 0.75);
}

.ov-title {
  position: relative;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.3;
}

.ov-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.55rem;
  width: 2.2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-50%) scaleX(0.25);
  opacity: 0.35;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s,
    opacity 0.8s ease 0.15s;
}

.ov-head.is-in .ov-title::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 0.9;
}

.ov-sub {
  margin-top: 0.55rem;
  max-width: 46rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ---------- 25.3 直播条（并入概览区） ---------- */
.live-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
  padding: 1.05rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(254, 44, 85, 0.16), transparent 58%),
    linear-gradient(90deg, rgba(24, 24, 34, 0.97), rgba(15, 15, 23, 0.95));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* 不能 overflow:hidden：右侧「抖音主页」的二维码浮层要探出这条卡片 */
  overflow: visible;
}

.live-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(254, 44, 85, 0.5), transparent 22%);
  width: 2px;
  pointer-events: none;
}

.live-strip-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.15rem;
}

.live-strip-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
}

.live-strip-label img {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.3rem;
  object-fit: cover;
}

.live-strip .live-content {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: none;
}

.live-strip .live-countdown {
  margin: 0;
  justify-content: flex-start;
  gap: 0.4rem;
}

.live-strip .live-num {
  min-width: 1.9ch;
  padding: 0.06rem 0.28rem;
  font-size: 1.05rem;
  line-height: 1.25;
  border-radius: var(--radius-sm);
  text-shadow: none;
  box-shadow: none;
}

.live-strip .live-unit i {
  font-size: 0.7rem;
}

.live-strip .live-badge {
  margin: 0;
  font-size: 0.86rem;
  justify-content: flex-start;
}

.live-strip .live-tip {
  margin: 0;
  max-width: none;
  font-size: 0.74rem;
  text-align: left;
  color: var(--text-secondary);
}

/* 抖音主页二维码：条内右侧按钮 */
.live-qr-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.live-qr-btn:hover {
  color: #fff;
  border-color: rgba(254, 44, 85, 0.5);
  background: rgba(254, 44, 85, 0.12);
}

.live-qr-btn .qq-qr {
  position: absolute;
  right: 1rem;
  bottom: calc(100% + 0.5rem);
  top: auto;
  left: auto;
  transform: none;
  width: 150px;
  height: auto;
  z-index: 40;
}

/* ---------- 25.4 六张功能卡片 ---------- */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ov-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.3rem 1.25rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--ico, 110, 168, 254), 0.1), transparent 62%),
    linear-gradient(180deg, rgba(25, 25, 36, 0.975), rgba(13, 13, 21, 0.955));
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* 主题色描边光：悬停时从顶部铺开 */
.ov-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(var(--ico, 110, 168, 254), 0.55),
    transparent 42%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ov-card:hover::before,
.ov-card:focus-visible::before {
  opacity: 1;
}

.ov-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--ico, 110, 168, 254), 0.35);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.42),
    0 0 34px -14px rgba(var(--ico, 110, 168, 254), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ov-card:focus-visible {
  outline: 2px solid rgba(var(--ico, 110, 168, 254), 0.7);
  outline-offset: 2px;
}

/* 顶部：图标 + 序号 */
.ov-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.ov-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--ico, 110, 168, 254), 0.42);
  background: rgba(var(--ico, 110, 168, 254), 0.1);
  box-shadow: 0 0 16px -6px rgba(var(--ico, 110, 168, 254), 0.7);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s ease, background 0.35s ease;
}

.ov-icon img {
  width: 1.65rem;
  height: 1.65rem;
}

.ov-card:hover .ov-icon {
  transform: translateY(-2px) rotate(-4deg);
  background: rgba(var(--ico, 110, 168, 254), 0.18);
  box-shadow: 0 0 26px -4px rgba(var(--ico, 110, 168, 254), 0.85);
}

.ov-index {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.07);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s ease;
}

.ov-card:hover .ov-index {
  color: rgba(var(--ico, 110, 168, 254), 0.5);
}

/* 标题 */
.ov-name {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin-top: 0.15rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.35;
}

.ov-en {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
}

/* 用途 */
.ov-purpose {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(240, 240, 245, 0.72);
}

/* 核心功能列表 */
.ov-points {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin: 0.15rem 0 0.35rem;
  padding: 0;
  list-style: none;
}

.ov-points li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ov-points li::before {
  content: "";
  position: absolute;
  left: 0.12rem;
  top: 0.62em;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 2px;
  transform: rotate(45deg);
  background: rgba(var(--ico, 110, 168, 254), 0.75);
  box-shadow: 0 0 8px rgba(var(--ico, 110, 168, 254), 0.5);
}

/* 底部：适用场景 + 进入 */
.ov-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ov-scene {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(240, 240, 245, 0.55);
}

.ov-scene i {
  margin-top: 0.18em;
  font-size: 0.68rem;
  color: rgba(var(--ico, 110, 168, 254), 0.85);
}

.ov-go {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(var(--ico, 110, 168, 254), 0.95);
  transition: gap 0.3s ease, color 0.3s ease;
}

.ov-go i {
  font-size: 0.7rem;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ov-card:hover .ov-go {
  gap: 0.5rem;
}

.ov-card:hover .ov-go i {
  transform: translateX(3px);
}

/* ---------- 25.5 最近更新（时间线） ---------- */
.updates {
  margin-top: 4rem;
}

.up-timeline {
  position: relative;
  width: 100%;
  max-width: 47rem;
  margin: 0 auto;
  padding-left: 2.1rem;
}

/* 竖线：随滚动“生长” */
.up-timeline::before {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(110, 168, 254, 0.05),
    rgba(110, 168, 254, 0.4) 12%,
    rgba(110, 168, 254, 0.16) 88%,
    rgba(110, 168, 254, 0.03)
  );
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.up-timeline.is-in::before {
  transform: scaleY(1);
}

.up-item {
  position: relative;
  padding: 0.55rem 0 1.15rem;
}

/* 逐条错开出现（--d 由 JS 按顺序写入） */
.js .up-item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--d, 0) * 90ms + 120ms);
}

.js .up-timeline.is-in .up-item {
  opacity: 1;
  transform: none;
}

.up-item::before {
  content: "";
  position: absolute;
  left: -1.83rem;
  top: 1.05rem;
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  background: rgba(15, 15, 23, 1);
  border: 2px solid rgba(110, 168, 254, 0.5);
  box-shadow: 0 0 0 4px rgba(110, 168, 254, 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.up-item:hover::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(110, 168, 254, 0.14);
}

.up-date {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(110, 168, 254, 0.9);
  font-variant-numeric: tabular-nums;
}

.up-date::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(110, 168, 254, 0.28), transparent);
}

.up-body {
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(24, 24, 34, 0.88), rgba(14, 14, 22, 0.84));
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.up-item:hover .up-body {
  border-color: rgba(110, 168, 254, 0.28);
  background: linear-gradient(180deg, rgba(29, 29, 42, 0.94), rgba(17, 17, 26, 0.9));
}

.up-body p {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.up-body p + p {
  margin-top: 0.5rem;
}

/* 首段（没有日期的导读）弱化处理 */
.up-item.is-lead .up-body {
  background: none;
  border: 0;
  padding: 0 0 0.2rem;
}

.up-item.is-lead .up-body p {
  color: rgba(240, 240, 245, 0.5);
  font-size: 0.8rem;
}

/* 各页更新日期 */
.up-pages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 47rem;
  margin: 1.6rem auto 0;
}

.up-page {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(22, 22, 32, 0.82);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.up-page:hover {
  border-color: rgba(110, 168, 254, 0.28);
  background: rgba(29, 29, 42, 0.92);
}

.up-page-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
}

.up-page-date {
  font-size: 0.74rem;
  color: rgba(110, 168, 254, 0.9);
  font-variant-numeric: tabular-nums;
}

.up-page-note {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 25.6 概览区背后的光斑（视差） ---------- */
.overview {
  position: relative;
  isolation: isolate;
}

.overview::before,
.overview::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  transform: translate3d(0, var(--ov-shift, 0px), 0);
  will-change: transform;
}

.overview::before {
  top: -6rem;
  left: -10rem;
  background: radial-gradient(circle, rgba(110, 168, 254, 0.16), transparent 68%);
}

.overview::after {
  right: -12rem;
  bottom: -8rem;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.13), transparent 68%);
}

/* ---------- 25.7 响应式 ---------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .ov-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .up-pages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ov-head {
    margin-bottom: 1.4rem;
  }

  .ov-title {
    font-size: 1.55rem;
  }

  .ov-sub {
    font-size: 0.8rem;
  }

  .ov-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .ov-card {
    padding: 1.05rem 1rem 0.95rem;
  }

  .ov-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .ov-icon img {
    width: 1.45rem;
    height: 1.45rem;
  }

  .ov-index {
    font-size: 1.25rem;
  }

  .ov-name {
    font-size: 1.02rem;
  }

  .ov-purpose {
    font-size: 0.8rem;
  }

  .ov-points li {
    font-size: 0.75rem;
  }

  /* 直播条：纵向排布 */
  .live-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.95rem 1rem;
  }

  .live-strip-main {
    gap: 0.4rem 0.8rem;
  }

  .live-qr-btn {
    align-self: stretch;
    justify-content: center;
  }

  .live-qr-btn .qq-qr {
    right: 0.5rem;
    bottom: calc(100% + 0.4rem);
  }

  /* 时间线：缩进收窄 */
  .up-timeline {
    padding-left: 1.55rem;
  }

  .up-timeline::before {
    left: 0.4rem;
  }

  .up-item::before {
    left: -1.42rem;
    top: 0.95rem;
    width: 0.56rem;
    height: 0.56rem;
  }

  .up-body {
    padding: 0.75rem 0.85rem;
  }

  .up-body p {
    font-size: 0.78rem;
  }

  .up-pages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

@media (max-width: 400px) {
  .up-pages {
    grid-template-columns: 1fr;
  }
}

/* ---------- 25.8 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .up-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ov-card,
  .ov-icon,
  .ov-go i,
  .up-body {
    transform: none !important;
    transition: none !important;
  }

  .up-timeline::before {
    transform: scaleY(1);
    transition: none;
  }

  .overview::before,
  .overview::after {
    transform: none;
    will-change: auto;
  }
}


/* ============================================================
   26. 外观设置：主题 / 背景 / 设置面板（2026-10-26）
   ------------------------------------------------------------
   html[data-theme="dark|light"]     配色
   html[data-bg="image|immersive"]   背景
   两个属性由 theme-boot.js 在首屏前写到 <html> 上，设置面板里切换即时生效。
   默认（没有属性）就是深色 + 图片，与改版前完全一致。
   ============================================================ */

/* ---------- 26.1 设置入口 ---------- */
.sri-set {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sri-set-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.44rem 0.78rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.sri-set-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.sri-set.is-open .sri-set-btn {
  color: var(--accent);
  border-color: rgba(110, 168, 254, 0.42);
  background: rgba(110, 168, 254, 0.12);
}

.sri-set-btn i {
  font-size: 0.86em;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sri-set.is-open .sri-set-btn i {
  transform: rotate(90deg);
}

/* ---------- 26.2 设置面板 ---------- */
.sri-set-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 140;
  width: 20.5rem;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border-hover);
  background: rgba(18, 18, 26, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
  animation: sriSetIn 0.18s ease;
}

@keyframes sriSetIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.sri-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sri-set-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 0.9rem;
}

.sri-set-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.sri-set-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

.sri-set-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sri-seg {
  display: inline-flex;
  padding: 0.18rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
}

.sri-seg button {
  padding: 0.3rem 0.78rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}

.sri-seg button:hover {
  color: var(--text-primary);
}

.sri-seg button.is-on {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(110, 168, 254, 0.35);
}

.sri-set-note {
  margin: 0.5rem 0 0.8rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-tertiary);
}

.sri-set-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--glass-border);
}

.sri-set-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.05);
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.sri-set-refresh:hover {
  color: #fff;
  border-color: rgba(110, 168, 254, 0.5);
  background: rgba(110, 168, 254, 0.14);
}

.sri-set-saved {
  font-size: 0.68rem;
  color: var(--text-tertiary);
}

/* 没有导航栏的页面（如计算页）：浮在右下角 */
.sri-set-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 130;
}

.sri-set-float .sri-set-btn {
  padding: 0.6rem;
  border-radius: 50%;
  border-color: var(--glass-border-hover);
  background: rgba(18, 18, 26, 0.86);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sri-set-float .sri-set-btn span {
  display: none;
}

html[data-theme="light"] .sri-set-float .sri-set-btn {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(23, 25, 31, 0.12);
  color: var(--text-primary);
  box-shadow: 0 10px 26px rgba(23, 25, 31, 0.14);
}

.sri-set-float .sri-set-panel {
  left: auto;
  right: 0;
  top: auto;
  bottom: calc(100% + 0.6rem);
}

/* 手机端：面板贴着导航居中，别溢出 */
@media (max-width: 768px) {
  .sri-set-panel {
    position: fixed;
    top: 3.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(21rem, calc(100vw - 1.6rem));
  }

  @keyframes sriSetIn {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translateX(-50%); }
  }

  .sri-set-float .sri-set-panel {
    top: auto;
    bottom: calc(100% + 0.6rem);
    left: auto;
    right: 0;
    transform: none;
  }
}

/* ---------- 26.3 浅色配色 ---------- */
html[data-theme="light"] {
  color-scheme: light;

  --bg-primary: #f2f4f9;
  --bg-secondary: #ffffff;

  --text-primary: #17191f;
  --text-secondary: rgba(23, 25, 31, 0.66);
  --text-tertiary: rgba(23, 25, 31, 0.5);

  --accent: #2f6fe4;
  --accent-hover: #4a84ef;
  --accent-rgb: 47, 111, 228;

  --glass-bg: rgba(255, 255, 255, 0.84);
  --glass-bg-hover: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(23, 25, 31, 0.09);
  --glass-border-hover: rgba(23, 25, 31, 0.16);
  --glass-shadow: 0 10px 28px rgba(23, 25, 31, 0.08);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* 背景图在浅色下退得更淡，上面盖一层浅色纱 */
html[data-theme="light"] .background-layer::before {
  opacity: 0.16;
}

html[data-theme="light"] .background-layer::after {
  background: rgba(246, 247, 251, 0.88);
}

/* 导航与菜单 */
html[data-theme="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(23, 25, 31, 0.08);
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-menu-item:hover {
  background: rgba(23, 25, 31, 0.055);
  color: var(--text-primary);
}

html[data-theme="light"] .nav-menu-panel,
html[data-theme="light"] .updates-panel,
html[data-theme="light"] .lang-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(23, 25, 31, 0.1);
  box-shadow: 0 20px 46px rgba(23, 25, 31, 0.16);
}

html[data-theme="light"] .nav-menu-item {
  color: var(--text-secondary);
}

html[data-theme="light"] .sri-set-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(23, 25, 31, 0.1);
  box-shadow: 0 22px 54px rgba(23, 25, 31, 0.18);
}

html[data-theme="light"] .sri-set-btn:hover,
html[data-theme="light"] .sri-set-close:hover {
  background: rgba(23, 25, 31, 0.06);
}

html[data-theme="light"] .sri-seg {
  background: rgba(23, 25, 31, 0.05);
}

html[data-theme="light"] .sri-seg button.is-on {
  color: #fff;
}

html[data-theme="light"] .sri-set-refresh {
  background: rgba(23, 25, 31, 0.04);
}

html[data-theme="light"] .sri-set-refresh:hover {
  color: var(--accent);
  background: rgba(47, 111, 228, 0.1);
}

/* 版本条与展开面板 */
html[data-theme="light"] .updates-row {
  border-top-color: rgba(23, 25, 31, 0.07);
}

html[data-theme="light"] .updates-title,
html[data-theme="light"] .updates-name {
  color: var(--text-primary);
}

html[data-theme="light"] .updates-panel {
  background: rgba(255, 255, 255, 0.985);
}

html[data-theme="light"] .updates-hint {
  background: rgba(23, 25, 31, 0.04);
}

/* 首页 QQ 群 / 版本条 */
html[data-theme="light"] .qq-title,
html[data-theme="light"] .qq-card {
  color: var(--text-primary);
}

/* 跳转按钮卡（.glass 已经走变量，这里补图标底衬与悬停） */
html[data-theme="light"] .btn-icon-wrap {
  background: rgba(var(--ico, 110, 168, 254), 0.1);
}

html[data-theme="light"] .btn-card:hover {
  box-shadow: 0 14px 34px rgba(23, 25, 31, 0.12), var(--glass-inner-shadow);
}

/* 功能概览卡片 */
html[data-theme="light"] .ov-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--ico, 110, 168, 254), 0.13), transparent 62%),
    linear-gradient(180deg, #ffffff, #f6f7fb);
  border-color: rgba(23, 25, 31, 0.08);
  box-shadow: 0 10px 26px rgba(23, 25, 31, 0.07), inset 0 1px 0 #fff;
}

html[data-theme="light"] .ov-card:hover {
  border-color: rgba(var(--ico, 110, 168, 254), 0.42);
  box-shadow:
    0 20px 40px rgba(23, 25, 31, 0.12),
    0 0 30px -14px rgba(var(--ico, 110, 168, 254), 0.55),
    inset 0 1px 0 #fff;
}

html[data-theme="light"] .ov-title,
html[data-theme="light"] .ov-name {
  color: var(--text-primary);
}

html[data-theme="light"] .ov-kicker {
  color: rgba(47, 111, 228, 0.85);
}

html[data-theme="light"] .ov-en,
html[data-theme="light"] .ov-index {
  color: rgba(23, 25, 31, 0.22);
}

html[data-theme="light"] .ov-card:hover .ov-index {
  color: rgba(var(--ico, 110, 168, 254), 0.55);
}

html[data-theme="light"] .ov-purpose {
  color: rgba(23, 25, 31, 0.72);
}

html[data-theme="light"] .ov-points li {
  color: rgba(23, 25, 31, 0.66);
}

html[data-theme="light"] .ov-foot {
  border-top-color: rgba(23, 25, 31, 0.07);
}

html[data-theme="light"] .ov-scene {
  color: rgba(23, 25, 31, 0.52);
}

html[data-theme="light"] .ov-head::before {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 78%);
}

/* 直播条 */
html[data-theme="light"] .live-strip {
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(254, 44, 85, 0.1), transparent 58%),
    linear-gradient(90deg, #ffffff, #f7f8fc);
  border-color: rgba(23, 25, 31, 0.08);
  box-shadow: 0 10px 26px rgba(23, 25, 31, 0.08);
}

html[data-theme="light"] .live-strip-label,
html[data-theme="light"] .live-badge,
html[data-theme="light"] .live-num {
  color: var(--text-primary);
}

html[data-theme="light"] .live-content {
  color: rgba(23, 25, 31, 0.8);
  text-shadow: none;
}

html[data-theme="light"] .live-num {
  border-color: rgba(23, 25, 31, 0.1);
  background: rgba(23, 25, 31, 0.04);
  text-shadow: none;
}

html[data-theme="light"] .live-qr-btn {
  border-color: rgba(23, 25, 31, 0.12);
  background: rgba(23, 25, 31, 0.04);
  color: var(--text-secondary);
}

/* 最近更新时间线 */
html[data-theme="light"] .up-title,
html[data-theme="light"] .up-date {
  color: var(--accent);
}

html[data-theme="light"] .up-timeline::before {
  background: linear-gradient(180deg,
    rgba(47, 111, 228, 0.06),
    rgba(47, 111, 228, 0.42) 12%,
    rgba(47, 111, 228, 0.16) 88%,
    rgba(47, 111, 228, 0.04));
}

html[data-theme="light"] .up-item::before {
  background: #fff;
  border-color: rgba(47, 111, 228, 0.45);
}

html[data-theme="light"] .up-body {
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  border-color: rgba(23, 25, 31, 0.07);
}

html[data-theme="light"] .up-item:hover .up-body {
  border-color: rgba(47, 111, 228, 0.28);
  background: #fff;
}

/* 管理员登录入口与弹窗 */
html[data-theme="light"] .admin-login-entry a {
  color: rgba(23, 25, 31, 0.45);
}

html[data-theme="light"] .admin-modal {
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  border-color: rgba(23, 25, 31, 0.1);
  box-shadow: 0 26px 70px rgba(23, 25, 31, 0.22);
}

html[data-theme="light"] .admin-modal h3 {
  color: var(--text-primary);
}

html[data-theme="light"] .admin-modal-field {
  background: rgba(23, 25, 31, 0.04);
  border-color: rgba(23, 25, 31, 0.1);
}

html[data-theme="light"] .admin-modal-field input {
  color: var(--text-primary);
}

html[data-theme="light"] .admin-modal-overlay {
  background: rgba(23, 25, 31, 0.4);
}

/* 骨架屏 */
html[data-theme="light"] .sri-sk {
  background: linear-gradient(90deg, rgba(23, 25, 31, 0.05), rgba(23, 25, 31, 0.1), rgba(23, 25, 31, 0.05));
}

html[data-theme="light"] .sri-skeleton {
  background: var(--bg-primary);
}

/* 页脚 */
html[data-theme="light"] .site-footer {
  color: var(--text-tertiary);
}

/* ---------- 26.4 沉浸式背景 ---------- */
html[data-bg="immersive"] .background-layer::before {
  background-image: none !important;
  opacity: 0;
}

html[data-bg="immersive"] .background-layer::after {
  background: none;
}

html[data-bg="immersive"] .background-layer {
  background:
    radial-gradient(1100px 620px at 12% 6%, rgba(110, 168, 254, 0.16), transparent 62%),
    radial-gradient(900px 520px at 88% 14%, rgba(167, 139, 250, 0.14), transparent 64%),
    radial-gradient(1200px 700px at 50% 108%, rgba(74, 222, 128, 0.07), transparent 62%),
    linear-gradient(180deg, #0b0c13 0%, #0e1019 48%, #0a0b11 100%);
}

/* 沉浸式 + 深色：卡片略提亮，边界更清楚 */
html[data-bg="immersive"][data-theme="dark"] .ov-card,
html[data-bg="immersive"][data-theme="dark"] .up-body {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--ico, 110, 168, 254), 0.1), transparent 62%),
    linear-gradient(180deg, rgba(30, 32, 45, 0.94), rgba(18, 20, 30, 0.92));
}

html[data-bg="immersive"][data-theme="dark"] .live-strip {
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(254, 44, 85, 0.14), transparent 58%),
    linear-gradient(90deg, rgba(30, 32, 45, 0.94), rgba(18, 20, 30, 0.92));
}

html[data-bg="immersive"][data-theme="dark"] .glass {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 沉浸式 + 浅色：柔和的白底 + 蓝紫雾 */
html[data-bg="immersive"][data-theme="light"] .background-layer {
  background:
    radial-gradient(1000px 560px at 10% 4%, rgba(110, 168, 254, 0.18), transparent 62%),
    radial-gradient(860px 500px at 90% 12%, rgba(167, 139, 250, 0.15), transparent 64%),
    linear-gradient(180deg, #f8f9fd 0%, #eef1f8 52%, #f4f6fb 100%);
}

html[data-bg="immersive"][data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(23, 25, 31, 0.08);
}

/* 设置面板内部也跟随沉浸式 */
html[data-bg="immersive"][data-theme="dark"] .sri-set-panel {
  background: rgba(22, 24, 34, 0.97);
}


/* ---------- 26.6 通用表单控件（浅色） ---------- */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  border-color: rgba(23, 25, 31, 0.16);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(23, 25, 31, 0.42);
}

/* ---------- 26.7 游戏机制（wiki） ---------- */
html[data-theme="light"] .wiki-card {
  color: var(--text-primary);
}

html[data-theme="light"] .wiki-tabs {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(23, 25, 31, 0.08);
}

html[data-theme="light"] .wiki-tab {
  color: var(--text-secondary);
}

html[data-theme="light"] .wiki-tab:hover {
  background: rgba(23, 25, 31, 0.05);
}

html[data-theme="light"] .wiki-tab.active {
  background: rgba(47, 111, 228, 0.12);
}

html[data-theme="light"] .formula-line {
  color: var(--text-primary);
  background: rgba(23, 25, 31, 0.035);
}

html[data-theme="light"] .formula-label,
html[data-theme="light"] .formula-op,
html[data-theme="light"] .multiplier-ref,
html[data-theme="light"] .formula-note,
html[data-theme="light"] .multiplier-expand,
html[data-theme="light"] .multiplier-expand .expand-subtitle,
html[data-theme="light"] .multiplier-expand .expand-note,
html[data-theme="light"] .em-sub h4,
html[data-theme="light"] .ec-contrib-name {
  color: var(--text-primary);
}

html[data-theme="light"] .multiplier-ref:hover,
html[data-theme="light"] .multiplier-ref.expanded {
  color: var(--accent);
  background: rgba(47, 111, 228, 0.1);
}

html[data-theme="light"] .multiplier-expand {
  background: rgba(47, 111, 228, 0.05);
}

html[data-theme="light"] .wiki-table thead th {
  background: rgba(47, 111, 228, 0.07);
}

html[data-theme="light"] .wiki-table tbody tr:hover {
  background: rgba(23, 25, 31, 0.03);
}

html[data-theme="light"] .wiki-details,
html[data-theme="light"] .wiki-summary {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(23, 25, 31, 0.08);
}

html[data-theme="light"] .aura-filter-btn,
html[data-theme="light"] .ec-reset,
html[data-theme="light"] .ec-spin-btn {
  background: rgba(23, 25, 31, 0.05);
  border-color: rgba(23, 25, 31, 0.12);
  color: var(--text-secondary);
}

html[data-theme="light"] .ec-table .ec-th-particle {
  color: #2f6fe4;
}

html[data-theme="light"] .ec-table .ec-th-orb {
  color: #a8760a;
}


/* ---------- 26.8 幽境危战（985） ---------- */
html[data-theme="light"] .endgame-card,
html[data-theme="light"] .enemy-card {
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  border-color: rgba(23, 25, 31, 0.09);
  box-shadow: 0 10px 26px rgba(23, 25, 31, 0.07);
}

html[data-theme="light"] .endgame-card:hover,
html[data-theme="light"] .enemy-card:hover {
  background: #ffffff;
  border-color: rgba(47, 111, 228, 0.32);
  box-shadow: 0 16px 34px rgba(23, 25, 31, 0.12);
}

html[data-theme="light"] .endgame-card-status.status-ended {
  background: rgba(23, 25, 31, 0.06);
}

html[data-theme="light"] .diff-toggle {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(23, 25, 31, 0.09);
}

html[data-theme="light"] .diff-btn:hover {
  background: rgba(23, 25, 31, 0.05);
}

html[data-theme="light"] .diff-btn.active {
  color: var(--accent);
  background: rgba(47, 111, 228, 0.12);
}

html[data-theme="light"] .enemy-card-mechanism {
  color: var(--text-secondary);
}

html[data-theme="light"] .st-header-line {
  background: rgba(23, 25, 31, 0.12);
}

/* ---------- 26.9 催更日历 ---------- */
html[data-theme="light"] .cal-day {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(23, 25, 31, 0.08);
  color: var(--text-secondary);
}

html[data-theme="light"] .cal-day:hover {
  background: #ffffff;
  border-color: rgba(47, 111, 228, 0.3);
}

html[data-theme="light"] .cal-day.is-today,
html[data-theme="light"] .cal-day.is-selected {
  background: rgba(47, 111, 228, 0.1);
}

html[data-theme="light"] .calendar-divider {
  background: rgba(23, 25, 31, 0.08);
}

html[data-theme="light"] .cal-item {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(23, 25, 31, 0.08);
}

html[data-theme="light"] .cal-reply-box {
  background: rgba(47, 111, 228, 0.07);
}

html[data-theme="light"] .cal-modal {
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  border-color: rgba(23, 25, 31, 0.1);
  box-shadow: 0 26px 60px rgba(23, 25, 31, 0.22);
}

html[data-theme="light"] .cal-modal textarea {
  color: var(--text-primary);
}


/* ---------- 26.10 幽境「通关参考线」外围（line 模块） ---------- */
html[data-theme="light"] .st-line-badge {
  background: linear-gradient(180deg, #ffffff, #f6f7fb);
  border-color: rgba(23, 25, 31, 0.1);
  box-shadow: 0 8px 22px rgba(23, 25, 31, 0.1);
}

html[data-theme="light"] .st-filter,
html[data-theme="light"] .st-sorts,
html[data-theme="light"] .st-search,
html[data-theme="light"] .st-select-btn,
html[data-theme="light"] .st-select-panel,
html[data-theme="light"] .st-select-search,
html[data-theme="light"] .st-check,
html[data-theme="light"] .st-line-tip,
html[data-theme="light"] .st-sub,
html[data-theme="light"] .st-sub-stage,
html[data-theme="light"] .st-input,
html[data-theme="light"] .st-sub-foot,
html[data-theme="light"] .st-pick,
html[data-theme="light"] .st-pick-search,
html[data-theme="light"] .st-motto,
html[data-theme="light"] .st-steps-close {
  background: #ffffff;
  border-color: rgba(23, 25, 31, 0.1);
  box-shadow: 0 10px 28px rgba(23, 25, 31, 0.12);
}

html[data-theme="light"] .st-row {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(23, 25, 31, 0.08);
}

html[data-theme="light"] .st-row.is-open {
  background: #f7f8fc;
}

html[data-theme="light"] .st-sub-mask,
html[data-theme="light"] .st-pick-mask,
html[data-theme="light"] .st-motto-mask,
html[data-theme="light"] .st-steps-mask {
  background: rgba(238, 241, 247, 0.86);
}

html[data-theme="light"] .st-video a {
  background: #f2f4f9;
  color: var(--accent);
}

html[data-theme="light"] .st-mlegend,
html[data-theme="light"] .st-pickbtn,
html[data-theme="light"] .st-motto-btn,
html[data-theme="light"] .st-steps-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(23, 25, 31, 0.1);
}

html[data-theme="light"] .st-motto-btn:hover {
  background: #ffffff;
}

html[data-theme="light"] .st-enemy-tab {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(23, 25, 31, 0.1);
}

html[data-theme="light"] .cal-modal-overlay {
  background: rgba(238, 241, 247, 0.78);
}


/* 浅色下的日历格子：过去日期别压得太淡 */
html[data-theme="light"] .cal-day {
  background: rgba(23, 25, 31, 0.035);
  border-color: transparent;
}

html[data-theme="light"] .cal-day.past {
  color: rgba(23, 25, 31, 0.55);
  opacity: 0.72;
}

html[data-theme="light"] .cal-day.near {
  color: rgba(23, 25, 31, 0.68);
  opacity: 0.92;
}

html[data-theme="light"] .cal-day.selected {
  background: rgba(47, 111, 228, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

html[data-theme="light"] .cal-day.future:hover {
  background: #ffffff;
}

/* 参考线里「白字 + 半透明主题色」的按钮：浅色下改成实色或主题色文字 */
html[data-theme="light"] .st-sort-btn.is-active {
  color: var(--accent);
  background: rgba(47, 111, 228, 0.12);
  border-color: rgba(47, 111, 228, 0.42);
}

html[data-theme="light"] .st-submit-btn {
  color: #ffffff;
  background: linear-gradient(180deg, #3f7ce8, #2f6fe4);
  border-color: #2f6fe4;
}

html[data-theme="light"] .st-chip {
  color: var(--accent);
  background: rgba(47, 111, 228, 0.1);
}

html[data-theme="light"] .st-btn.is-primary {
  color: #ffffff;
  background: linear-gradient(180deg, #3f7ce8, #2f6fe4);
  border-color: #2f6fe4;
}

/* ---------- 26.5 语言切换下线 ---------- */
.lang-switch {
  display: none !important;
}

/* ============================================================
   28. 细节修正 + 浅色补漏（2026-10-26）
   ------------------------------------------------------------
   ① 背景图在浅色下更清楚（白色遮罩减淡）
   ② 直播条抖音图标不再被裁切
   ③ 「最近更新」正文改成正文色、容器换成轻卡片
   ④ 机制 / 计算数据 / 幽境危战 / 日历 的浅色文字补漏
   ============================================================ */

/* ① 背景：图片更透出来 */
html[data-theme="light"] .background-layer::before { opacity: 0.34; }
html[data-theme="light"] .background-layer::after  { background: rgba(246, 247, 251, 0.66); }

/* ② 抖音图标：完整显示，不裁切 */
.live-strip-label img {
  object-fit: contain;
  background: #0d0d12;
  padding: 0.08rem;
}

/* ③ 最近更新：正文不再用灰字，容器改成轻卡片 */
.up-body {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.up-item:hover .up-body {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(110, 168, 254, 0.26);
  transform: translateX(2px);
}

.up-body p {
  font-size: 0.84rem;
  line-height: 1.85;
  color: rgba(238, 240, 247, 0.94);
}

.up-item.is-lead .up-body p { color: rgba(238, 240, 247, 0.8); }

html[data-theme="light"] .up-body {
  background: #ffffff;
  border-color: rgba(23, 25, 31, 0.09);
  box-shadow: 0 2px 12px rgba(23, 25, 31, 0.05);
}

html[data-theme="light"] .up-item:hover .up-body {
  background: #ffffff;
  border-color: rgba(47, 111, 228, 0.3);
  box-shadow: 0 4px 16px rgba(47, 111, 228, 0.1);
}

html[data-theme="light"] .up-body p { color: #17191f; }
html[data-theme="light"] .up-item.is-lead .up-body p { color: #3c4149; }

/* ④-a 游戏机制：公式 / 倍率 / 附着表 / 充能计算器 */
html[data-theme="light"] .wiki-card,
html[data-theme="light"] .formula-line,
html[data-theme="light"] .formula-label,
html[data-theme="light"] .formula-op,
html[data-theme="light"] .formula-note,
html[data-theme="light"] .multiplier-expand,
html[data-theme="light"] .multiplier-expand .expand-subtitle,
html[data-theme="light"] .multiplier-expand .expand-note,
html[data-theme="light"] .em-sub h4,
html[data-theme="light"] .aura-char-table tbody td,
html[data-theme="light"] .ec-contrib-name,
html[data-theme="light"] .ec-table thead th,
html[data-theme="light"] .ec-table tbody th[scope="row"],
html[data-theme="light"] .ec-slider-value,
html[data-theme="light"] .ec-row-value,
html[data-theme="light"] .card-title {
  color: var(--text-primary);
}

html[data-theme="light"] .multiplier-ref {
  color: var(--accent);
  background: rgba(47, 111, 228, 0.08);
  border-color: rgba(47, 111, 228, 0.28);
}

html[data-theme="light"] .multiplier-ref:hover,
html[data-theme="light"] .multiplier-ref.expanded {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

html[data-theme="light"] .section-gold .multiplier-ref,
html[data-theme="light"] .section-gold .card-title {
  color: #8a6512;
}

html[data-theme="light"] .section-gold .multiplier-ref:hover,
html[data-theme="light"] .section-gold .multiplier-ref.expanded {
  color: #fff;
  background: #b8860b;
  border-color: #b8860b;
}

html[data-theme="light"] .ec-table input[type="number"],
html[data-theme="light"] .ec-field-ctrl select {
  color: var(--text-primary);
  background: #ffffff;
  border-color: rgba(23, 25, 31, 0.14);
}

html[data-theme="light"] .ec-field-ctrl select option {
  color: #17191f;
  background: #ffffff;
}

html[data-theme="light"] .ec-spin-btn:hover,
html[data-theme="light"] .ec-reset:hover {
  color: var(--accent);
  border-color: rgba(47, 111, 228, 0.35);
  background: rgba(47, 111, 228, 0.08);
}

/* ④-b 计算数据详情：标签、资源按钮 */
html[data-theme="light"] .detail-tag {
  color: var(--text-secondary);
  background: rgba(23, 25, 31, 0.045);
  border-color: rgba(23, 25, 31, 0.1);
}

html[data-theme="light"] .detail-tag b {
  color: var(--text-primary);
}

html[data-theme="light"] .detail-resource-btn .detail-size {
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .data-card-icon-fallback {
  color: rgba(23, 25, 31, 0.35);
}

/* ④-c 幽境危战：敌人机制、成绩列表、投稿弹窗 */
html[data-theme="light"] .enemy-card-mechanism {
  color: var(--text-primary);
}

html[data-theme="light"] .enemy-card-mechanism p span {
  color: #a35b00;
}

html[data-theme="light"] .st-row,
html[data-theme="light"] .st-input,
html[data-theme="light"] .st-textarea,
html[data-theme="light"] .st-mlegend,
html[data-theme="light"] .st-motto-body,
html[data-theme="light"] .st-ecard,
html[data-theme="light"] .st-pcard,
html[data-theme="light"] .st-select-item,
html[data-theme="light"] .st-num small,
html[data-theme="light"] .st-sub-close,
html[data-theme="light"] .st-pick-close,
html[data-theme="light"] .st-motto-close,
html[data-theme="light"] .st-steps-close {
  color: var(--text-primary);
}

html[data-theme="light"] .st-input,
html[data-theme="light"] .st-textarea {
  background: #ffffff;
  border-color: rgba(23, 25, 31, 0.14);
}

html[data-theme="light"] .st-select-item {
  background: #ffffff;
}

html[data-theme="light"] .st-select-item:hover,
html[data-theme="light"] .st-select-item.is-active {
  background: rgba(47, 111, 228, 0.08);
  color: var(--text-primary);
}

html[data-theme="light"] .st-enemy-tab:hover {
  color: var(--text-primary);
  background: rgba(47, 111, 228, 0.08);
}

html[data-theme="light"] .st-motto-body {
  background: #ffffff;
  border-color: rgba(23, 25, 31, 0.1);
}

html[data-theme="light"] .st-textarea {
  color: var(--text-primary);
}

/* ④-d 催更日历：弹窗输入 */
html[data-theme="light"] .cal-modal textarea {
  color: var(--text-primary);
  background: #ffffff;
  border-color: rgba(23, 25, 31, 0.14);
}

/* 幽境危战：敌人机制描述里的行内彩色字 */
html[data-theme="light"] .enemy-card-mechanism span,
html[data-theme="light"] .enemy-card-mechanism b,
html[data-theme="light"] .enemy-card-mechanism strong {
  filter: brightness(0.55) saturate(1.15);
}

/* ============================================================
   30. 直播条「抖音主页」二维码浮层（2026-10-26）
   ------------------------------------------------------------
   之前 .live-strip 是 overflow:hidden，二维码被卡片边缘裁掉；
   现在允许溢出，并给浮层补上白边与阴影，任何主题下都完整显示。
   ============================================================ */
.live-strip { overflow: visible; }

.live-strip .live-qr-btn { position: relative; }

.live-strip .live-qr-btn .qq-qr {
  right: 0;
  bottom: calc(100% + 0.6rem);
  width: 150px;
  height: auto;
  max-width: none;
  padding: 6px;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  object-fit: contain;
}

html[data-theme="light"] .live-strip .live-qr-btn .qq-qr {
  border-color: rgba(23, 25, 31, 0.1);
  box-shadow: 0 14px 34px rgba(23, 25, 31, 0.18);
}

/* ============================================================
   31. 站点通告横幅（2026-10-28）
   ------------------------------------------------------------
   主页最上方的一条横幅，后台「主页信息 → 顶部通告」控制开关与文案。
   颜色跟随 深色 / 浅色 主题自动切换；配合「沉浸式」背景也成立。
   ============================================================ */
.site-notice {
  position: relative;
  width: 100%;
  max-width: 62rem;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 auto 1.5rem;
  padding: 0.82rem 1.15rem 0.82rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(110, 168, 254, 0.32);
  background:
    linear-gradient(90deg, rgba(110, 168, 254, 0.22), rgba(18, 20, 30, 0.72) 46%, rgba(18, 20, 30, 0.5));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--text-primary);
  overflow: hidden;
}

/* 左侧强调条 */
.site-notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(110, 168, 254, 0.25));
}

.site-notice[hidden] { display: none; }

.site-notice i {
  color: #9dc4ff;
  font-size: 0.95rem;
  line-height: 1.7;
  flex: 0 0 auto;
}

.site-notice-text {
  margin: 0;
  white-space: pre-line;
  word-break: break-word;
}

/* 浅色：白底蓝调 */
html[data-theme="light"] .site-notice {
  border-color: rgba(47, 111, 228, 0.24);
  background:
    linear-gradient(90deg, rgba(47, 111, 228, 0.14), rgba(255, 255, 255, 0.92) 46%, rgba(255, 255, 255, 0.86));
  box-shadow: 0 8px 24px rgba(23, 25, 31, 0.08), inset 0 1px 0 #ffffff;
  color: #17191f;
}

html[data-theme="light"] .site-notice i { color: var(--accent); }

/* 手机端：字号略小、内边距收紧 */
@media (max-width: 768px) {
  .site-notice {
    margin-bottom: 1.1rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.82rem;
    border-radius: var(--radius-md);
  }
}