/* ==========================================================================
   洌泉服务器 / Crystalfount Server — 设计系统
   风格：深蓝背景 + 青蓝发光 + 像素风 / 方块元素
   主题：固定深色（PRD 首版不提供浅色模式）
   目录：
     01 变量与重置      02 排版      03 布局容器      04 顶部导航
     05 按钮            06 卡片      07 徽章与标签    08 首页 Hero
     09 列表与网格      10 搜索      11 分页          12 状态（空/错/加载）
     13 弹窗与 Toast    14 页脚      15 动效          16 响应式      17 可访问性
   ========================================================================== */

/* ---------- 01 变量与重置 ---------- */
:root {
  /* 背景层次 */
  --bg-0: #050b18;
  --bg-1: #08122a;
  --bg-2: #0b1730;
  --panel: #0e1e3c;
  --panel-2: #12244a;

  /* 线条 */
  --line: #1c3358;
  --line-soft: #142647;
  --line-glow: rgba(77, 227, 255, 0.35);

  /* 青蓝主色 */
  --cyan: #4de3ff;
  --cyan-deep: #2ab6d8;
  --cyan-dim: #17789b;
  --cyan-fade: rgba(77, 227, 255, 0.12);
  --cyan-fade-2: rgba(77, 227, 255, 0.22);

  /* 文字 */
  --text: #dce9ff;
  --text-2: #9db3d4;
  --text-3: #6c82a6;

  /* 语义色（不单独依赖颜色表达状态，均配文字/图标） */
  --ok: #52e0a8;
  --warn: #ffc861;
  --danger: #ff7a7a;
  --info: #8fb8ff;

  /* 字体：无外链字体，使用系统字体；像素感由边框、阴影、字距和图形承担 */
  --font-pixel: "Zpix", "Fusion Pixel 12px", "Silkscreen", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
  --font-mono: "Consolas", "Cascadia Mono", "SFMono-Regular", monospace;

  /* 尺寸 */
  --nav-h: 64px;
  --radius: 2px;
  --wrap: 1200px;
  --gap: 20px;

  /* 发光 */
  --glow-sm: 0 0 8px rgba(77, 227, 255, 0.28);
  --glow: 0 0 16px rgba(77, 227, 255, 0.35);
  --glow-lg: 0 0 28px rgba(77, 227, 255, 0.45);

  /* 动效时长：短促，不阻塞操作 */
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 320ms;

  /* 毛玻璃（backdrop-filter）
     注意：毛玻璃模糊的是元素"背后"的内容，背后是纯色时几乎看不出效果。
     所以只用在背后确实有内容的浮层上（顶栏、下拉菜单、Toast、压在 Hero 画面上的卡片），
     列表里那些背后只有纯色背景的卡片只做半透明，不加模糊，省 GPU。 */
  --glass-blur: blur(14px) saturate(150%);
  --glass-bg: rgba(12, 26, 52, 0.55);
  --glass-bg-strong: rgba(8, 18, 38, 0.72);
  --glass-border: rgba(77, 227, 255, 0.18);
  --glass-hi: rgba(157, 241, 255, 0.07);
}

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

/* 作者样式里的 display 会盖掉 UA 的 [hidden]，这里显式保证 hidden 生效 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-0);
  /* 像素网格底纹 + 两处青蓝辉光 */
  background-image:
    radial-gradient(900px 520px at 50% -12%, rgba(23, 120, 155, 0.30), transparent 70%),
    radial-gradient(600px 400px at 88% 8%, rgba(77, 227, 255, 0.10), transparent 70%),
    linear-gradient(rgba(28, 51, 88, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 51, 88, 0.22) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: #9df1ff; }
button { font: inherit; color: inherit; }

/* 像素图不插值，保持方块边缘 */
.pixelated { image-rendering: pixelated; image-rendering: -moz-crisp-edges; }

/* ---------- 02 排版 ---------- */
h1, h2, h3, h4 {
  margin: 0 0 12px;
  font-family: var(--font-pixel);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
h1 { font-size: clamp(24px, 4.4vw, 40px); }
h2 { font-size: clamp(20px, 3vw, 28px); }
h3 { font-size: clamp(17px, 2.2vw, 20px); }
p { margin: 0 0 12px; color: var(--text-2); }
strong { color: var(--text); }
code, kbd { font-family: var(--font-mono); }

.muted { color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 标题装饰：左侧青蓝方块 */
.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.section-head h2 { margin: 0; }
.section-head::before {
  content: "";
  width: 8px;
  height: 26px;
  background: var(--cyan);
  box-shadow: var(--glow);
  flex: none;
}
.section-head .more { margin-left: auto; font-size: 14px; }

/* ---------- 03 布局容器 ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
.page-main { padding: 0 0 64px; min-height: 60vh; }
.stack > * + * { margin-top: var(--gap); }
.section { margin-top: 44px; }

/* 面包屑 / 返回按钮行 */
.page-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ---------- 04 顶部导航 ---------- */
/* 首页 Hero 是整幅像素画，顶栏默认透明浮在画面上，滚动后变毛玻璃；
   其他页面没有 Hero，一直保持毛玻璃（靠 <html data-hero> 区分） */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: background var(--t), box-shadow var(--t), border-color var(--t);
}
html[data-hero] .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 滚动后变实一些的毛玻璃。注意这条必须带上 html[data-hero] 前缀：
   否则 html[data-hero] .site-header（0,2,1）会盖过 .site-header.is-scrolled（0,2,0），
   首页滚动后顶栏就一直是透明的。 */
.site-header.is-scrolled,
html[data-hero] .site-header.is-scrolled {
  background: var(--glass-bg);
  border-bottom-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 1px 0 var(--line-glow);
}
.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--nav-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--text);
}
.brand:hover { color: var(--cyan); }
.brand img {
  width: 38px;
  height: 38px;
  /* Logo 是去背透明图，直接悬浮即可，不再套深色方块 */
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(77, 227, 255, 0.35));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-zh { font-family: var(--font-pixel); font-weight: 700; letter-spacing: 0.1em; font-size: 17px; }
.brand-en { font-size: 10px; color: var(--text-3); letter-spacing: 0.14em; text-transform: uppercase; }

.nav-links {
  /* 导航居中：品牌与右侧工具区都不参与拉伸 */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  list-style: none;
  padding: 0;
}
.nav-links a {
  position: relative;
  display: block;
  padding: 8px 14px;
  color: var(--text-2);
  font-size: 14px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
/* 悬停用下划横线，保持顶栏干净（选中态仍用青蓝发光方块，PRD 25） */
.nav-links a::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 6px;
  background: transparent;
  transition: background var(--t-fast);
}
.nav-links a:hover { color: var(--cyan); background: transparent; border-color: transparent; }
.nav-links a:hover::after { background: var(--cyan); }
/* 当前页高亮：青蓝发光 + 像素边框 */
.nav-links a.is-active {
  color: #061020;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: var(--glow);
  font-weight: 700;
}
.nav-links a.is-active::after { background: transparent; }

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

/* 图标按钮（导航里的搜索入口等） */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.icon-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-sm); }
/* 顶栏工具按钮的当前页高亮（服务器状态 / 玩家门户图标按钮） */
.icon-btn.is-active { color: var(--cyan); border-color: var(--line-glow); background: var(--cyan-fade); }

/* 导航右侧主按钮（描边款，带箭头） */
.nav-cta { white-space: nowrap; }

/* 语言切换 */
.lang { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.lang-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  padding: 6px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  display: none;
  z-index: 70;
}
.lang.is-open .lang-menu { display: block; }
.lang-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: none;
  border: 0;
  color: var(--text-2);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.lang-menu button:hover { background: var(--cyan-fade); color: var(--cyan); }
.lang-menu button[aria-current="true"] { color: var(--cyan); font-weight: 700; }
.lang-menu .flag { font-size: 15px; }

/* 手机端菜单按钮 */
.menu-btn {
  display: none;
  width: 42px; height: 38px;
  align-items: center;
  justify-content: center;
  background: var(--bg-1);
  border: 1px solid var(--line);
  cursor: pointer;
}
.menu-btn:hover { border-color: var(--cyan); }
/* 像素风汉堡：三条方块 */
.menu-btn i {
  display: block;
  width: 18px;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 6px 0 var(--cyan), 0 -6px 0 var(--cyan);
  transition: transform var(--t), box-shadow var(--t);
}
.menu-btn[aria-expanded="true"] i { transform: rotate(45deg); box-shadow: 0 0 0 var(--cyan), 0 0 0 var(--cyan); }
.menu-btn[aria-expanded="true"] i::after {
  content: "";
  display: block;
  width: 18px; height: 3px;
  background: var(--cyan);
  transform: rotate(-90deg);
}

/* 手机端下拉导航（从顶部向下展开） */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-slow) ease;
}
.mobile-nav.is-open { max-height: 560px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 0 14px; }
.mobile-nav a {
  display: block;
  padding: 12px 20px;
  color: var(--text-2);
  border-left: 3px solid transparent;
}
.mobile-nav a:hover { background: var(--cyan-fade); color: var(--cyan); }
.mobile-nav a.is-active {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: var(--cyan-fade);
  font-weight: 700;
}
.mobile-nav .mobile-lang { padding: 10px 20px 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.mobile-nav .mobile-lang button {
  padding: 5px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
}
.mobile-nav .mobile-lang button[aria-current="true"] { border-color: var(--cyan); color: var(--cyan); }

/* ---------- 05 按钮 ---------- */
.btn {
  --btn-bg: var(--bg-1);
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-pixel);
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* 像素缺角：右下切一格 */
.btn::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 6px; height: 6px;
  background: var(--bg-0);
  box-shadow: -1px -1px 0 0 var(--line);
  pointer-events: none;
}
.btn-primary {
  --btn-bg: var(--cyan);
  --btn-fg: #04121d;
  --btn-bd: var(--cyan);
  font-weight: 700;
  box-shadow: var(--glow-sm);
}
.btn-primary:hover { color: #04121d; box-shadow: var(--glow-lg); }
.btn-primary::after { background: var(--bg-0); box-shadow: -1px -1px 0 0 var(--cyan); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-2); }
.btn-ghost:hover { --btn-fg: var(--cyan); --btn-bd: var(--cyan); box-shadow: var(--glow-sm); }
/* 描边款：导航主按钮与 Hero 主按钮使用（对应参考图的描边 CTA） */
.btn-outline { --btn-bg: transparent; --btn-fg: var(--cyan); --btn-bd: var(--cyan); }
.btn-outline:hover { --btn-fg: var(--cyan); --btn-bg: var(--cyan-fade); box-shadow: var(--glow); }
/* 按钮里的箭头：悬停时向右轻移 */
.btn-arrow { display: inline-block; transition: transform var(--t-fast); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- 06 卡片 ---------- */
.card {
  position: relative;
  /* 半透明卡片：让页面背景的青蓝辉光透上来，形成层次。
     列表里的卡片背后大多是纯色，所以不在这里加 backdrop-filter（省 GPU）；
     真正有内容可模糊的浮层（顶栏、下拉菜单、Toast、压在 Hero 画面上的卡片）另行单独加。 */
  background:
    linear-gradient(180deg, var(--glass-hi), transparent 42%),
    linear-gradient(180deg, rgba(18, 36, 74, 0.62), rgba(11, 23, 48, 0.48));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
/* 卡片四角像素装饰 */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--cyan);
  border-style: solid;
  opacity: 0.5;
  transition: opacity var(--t);
  pointer-events: none;
}
.card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.card-hover:hover {
  border-color: var(--cyan);
  box-shadow: var(--glow), 0 10px 26px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px);
}
.card-hover:hover::before,
.card-hover:hover::after { opacity: 1; }
.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; }
.card-title { margin: 0 0 8px; font-size: 17px; }

/* 图片占位区 */
.thumb {
  position: relative;
  flex: none;
  width: 200px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-placeholder img { object-fit: contain; padding: 14px; opacity: 0.85; }

/* 横向信息卡片（公告用，PRD 47/52） */
.row-card { display: flex; gap: 18px; align-items: stretch; }
.row-card .row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-card .row-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-3);
}

/* 活动卡片（独立样式，PRD 48/51）：缩略图 + 内容，突出名称与参与方式 */
.event-card .row-body { gap: 6px; }
.event-card .event-name { font-size: 19px; margin: 0; color: var(--text); }
.event-card .event-join {
  font-size: 14px;
  color: var(--cyan);
  border-left: 3px solid var(--cyan-dim);
  padding-left: 10px;
}
.event-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

/* ---------- 07 徽章与标签 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; background: var(--text-3); flex: none; }
.badge-type-maintenance { color: var(--warn); border-color: rgba(255, 200, 97, 0.42); }
.badge-type-maintenance::before { background: var(--warn); }
.badge-type-update { color: var(--cyan); border-color: var(--line-glow); }
.badge-type-update::before { background: var(--cyan); }
.badge-type-event { color: #c8a6ff; border-color: rgba(200, 166, 255, 0.42); }
.badge-type-event::before { background: #c8a6ff; }
.badge-type-rule { color: var(--info); border-color: rgba(143, 184, 255, 0.42); }
.badge-type-rule::before { background: var(--info); }
.badge-type-notice::before { background: var(--text-3); }

.badge-pinned { color: var(--warn); border-color: rgba(255, 200, 97, 0.5); background: rgba(255, 200, 97, 0.08); }
.badge-pinned::before { background: var(--warn); }

.badge-required { color: var(--danger); border-color: rgba(255, 122, 122, 0.45); }
.badge-required::before { background: var(--danger); }
.badge-optional { color: var(--text-3); }
.badge-optional::before { background: var(--text-3); }

.badge-status-upcoming { color: var(--info); border-color: rgba(143, 184, 255, 0.45); }
.badge-status-upcoming::before { background: var(--info); }
.badge-status-running { color: var(--ok); border-color: rgba(82, 224, 168, 0.45); }
.badge-status-running::before { background: var(--ok); animation: blink 1.6s steps(2, end) infinite; }
.badge-status-ended { color: var(--text-3); }
.badge-status-ended::before { background: var(--text-3); }

.badge-disabled { color: var(--danger); border-color: rgba(255, 122, 122, 0.4); }
.badge-disabled::before { background: var(--danger); }
.badge-pending-update { color: var(--warn); border-color: rgba(255, 200, 97, 0.4); }
.badge-pending-update::before { background: var(--warn); }

/* 筛选标签组（公告类型） */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.filter-bar button {
  padding: 6px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.filter-bar button:hover { border-color: var(--cyan); color: var(--cyan); }
.filter-bar button.is-active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04121d;
  font-weight: 700;
  box-shadow: var(--glow-sm);
}

/* ---------- 08 首页 Hero ---------- */
/* 布局：整幅像素风背景 + 左右分栏（左侧名称与主按钮，右侧 Logo 晶体井）
   PRD 20/37/38：只展示 Logo 与名称，不写简介和宣传口号 */
.hero {
  position: relative;
  overflow: hidden;
  /* 向上顶一个导航高度，让顶栏浮在画面上而不是压在画面上方 */
  margin-top: calc(-1 * var(--nav-h));
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../img/hero-bg.png") center / cover no-repeat;
}
/* 左侧压暗保证标题可读，右侧留出 Logo 与辉光；
   底部在最后一段快速收成接近纯色，避免 Hero 与页面背景之间出现一条接缝
   （卡片压住的是 88%~100% 这一带，此时画面仍有约四成可见度，够毛玻璃糊出质感） */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(5, 11, 24, 0.95) 0%,
      rgba(5, 11, 24, 0.80) 32%,
      rgba(5, 11, 24, 0.26) 58%,
      rgba(5, 11, 24, 0.52) 100%),
    linear-gradient(180deg,
      rgba(5, 11, 24, 0.92) 0%,
      rgba(5, 11, 24, 0) 24%,
      rgba(5, 11, 24, 0) 66%,
      rgba(5, 11, 24, 0.5) 88%,
      rgba(5, 11, 24, 0.95) 100%);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 24px;
  padding-top: calc(var(--nav-h) + 64px);
  padding-bottom: 88px;
  min-height: min(76vh, 660px);
}
.hero-text { text-align: left; }
.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 6.2vw, 64px);
  letter-spacing: 0.1em;
  text-shadow: 0 0 22px rgba(77, 227, 255, 0.5), 0 0 52px rgba(77, 227, 255, 0.22);
}
.hero .hero-en {
  margin: 0 0 30px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.6vw, 16px);
  letter-spacing: 0.32em;
  color: var(--cyan-deep);
  text-transform: uppercase;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-art img {
  width: clamp(200px, 27vw, 330px);
  filter: drop-shadow(0 0 34px rgba(77, 227, 255, 0.52));
  animation: float 6s ease-in-out infinite;
}

/* ---------- 08c 内页顶部标题带 ---------- */
/* 与首页 Hero 同源：同一张像素画做底，尺寸收小，让内页和首页是一套语言 */
.page-band {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
  border-bottom: 1px solid var(--line);
}
.page-band-bg {
  position: absolute;
  inset: 0;
  background: url("../img/hero-bg.png") center 32% / cover no-repeat;
  opacity: 0.5;
}
.page-band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 11, 24, 0.88) 0%,
    rgba(5, 11, 24, 0.93) 55%,
    var(--bg-0) 100%);
}
.page-band-inner {
  position: relative;
  padding-top: calc(var(--nav-h) + 42px);
  padding-bottom: 30px;
}
.page-band h1 { margin: 0 0 8px; }
.page-band p { margin: 0; max-width: 760px; }
/* 跟在标题带后面的内容统一留出上间距 */
.page-band + * { margin-top: 30px; }
/* 详情页的窄版：只放返回按钮 */
.page-band-sm .page-band-inner {
  padding-top: calc(var(--nav-h) + 22px);
  padding-bottom: 20px;
}
.page-band .page-bar { margin: 0; }

/* 404 用同一套背景，保持全站一致 */
.error-band {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
}
.error-band .page-band-bg { opacity: 0.45; }
.error-band > .wrap {
  position: relative;
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: 30px;
}

/* ---------- 08a 首页视频区（PRD 6.13） ---------- */
/* 视频区上移压住 Hero 画面底部：毛玻璃需要有内容可模糊，同时让首屏更有层次。
   手机端 Hero 是单列（文字在下），不做重叠以免压到文字。 */
@media (min-width: 721px) {
  html[data-hero] .video-section {
    margin-top: -60px;
    position: relative;
    z-index: 3;
  }
}
html[data-hero] .video-section { position: relative; z-index: 3; }

.video-card {
  padding: 14px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.video-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.video-head h2 { margin: 0; font-size: 18px; }
.video-stage {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.video-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) ease;
}
.video-stage:hover img { transform: scale(1.03); }
.video-stage.is-player, .video-stage.is-embed { cursor: default; }
.video-stage.is-player video, .video-stage.is-embed iframe {
  display: block; width: 100%; height: 100%; border: 0; background: #000;
}
.video-stage:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* 播放按钮：像素方框 + CSS 画的三角，不放图里，缩放到任何尺寸都清晰 */
.video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  background: rgba(8, 18, 38, 0.58);
  border: 2px solid var(--cyan);
  box-shadow: var(--glow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast), box-shadow var(--t), transform var(--t-fast);
}
.video-play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 13px 0 13px 20px;
  border-color: transparent transparent transparent var(--cyan);
  transition: border-left-color var(--t-fast);
}
.video-stage:hover .video-play {
  background: var(--cyan);
  box-shadow: var(--glow-lg);
  transform: translate(-50%, -50%) scale(1.06);
}
.video-stage:hover .video-play::after { border-left-color: #04121d; }
.video-title { margin: 14px 0 6px; font-size: 17px; }
.video-desc { margin: 0; font-size: 14px; }

/* ---------- 08b 首页三卡（最新公告 / 最新活动 / 社区入口） ---------- */
html[data-hero] .feature-section { position: relative; z-index: 2; }

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.feature-card {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 16px;
}
.feature-thumb {
  flex: none;
  width: 42%;
  align-self: stretch;
  min-height: 128px;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
}
.feature-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feature-thumb.is-placeholder img { object-fit: contain; padding: 12px; }
.feature-thumb.is-qr { background: #fff; padding: 6px; cursor: zoom-in; }
.feature-thumb.is-qr img { object-fit: contain; }
.feature-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.feature-label {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.feature-title { margin: 6px 0 0; font-size: 16px; line-height: 1.5; }
.feature-rule { width: 34px; height: 2px; background: var(--line-glow); margin: 10px 0; }
.feature-desc { margin: 0; font-size: 13px; }
.feature-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.feature-arrow {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-glow);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 15px;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.feature-card:hover .feature-arrow { background: var(--cyan); color: #04121d; box-shadow: var(--glow); transform: translateX(3px); }

/* ---------- 09 列表与网格 ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.list > * + * { margin-top: 16px; }

/* MOD 卡片（PRD 43~46：卡片网格，只展示信息、不可点击） */
.mods-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* 适用环境信息条（PRD 42） */
.env-strip {
  display: flex;
  gap: 10px 28px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 18px;
  background:
    linear-gradient(90deg, var(--cyan-fade), transparent 72%),
    linear-gradient(180deg, rgba(18, 36, 74, 0.5), rgba(11, 23, 48, 0.4));
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
}
.env-strip .env-item { display: flex; gap: 8px; align-items: baseline; }
.env-strip .env-label { color: var(--text-3); font-size: 13px; }
.env-strip .env-value { color: var(--cyan); font-family: var(--font-mono); font-size: 14px; }
.env-strip .env-value.is-plain { color: var(--text); }

/* 需要突出说明的提示卡（整合包获取方式等） */
.notice-card {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  border-color: var(--line-glow);
  background:
    linear-gradient(180deg, rgba(77, 227, 255, 0.07), transparent 65%),
    linear-gradient(180deg, rgba(18, 36, 74, 0.62), rgba(11, 23, 48, 0.48));
}
.notice-card .notice-body { flex: 1; min-width: 220px; }
.notice-card p { margin: 0; font-size: 14px; }

.mod-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  /* 只读卡片：不加 hover 位移，避免被误认为可点击 */
}
.mod-card .mod-icon {
  width: 56px; height: 56px;
  flex: none;
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mod-card .mod-icon img { width: 100%; height: 100%; object-fit: contain; }
.mod-card .mod-icon.is-fallback {
  font-family: var(--font-pixel);
  font-size: 22px;
  color: var(--cyan);
  text-shadow: var(--glow-sm);
}
.mod-card h3 { margin: 0 0 4px; font-size: 16px; }
.mod-card .mod-desc { margin: 0 0 8px; font-size: 14px; }
.mod-card .mod-meta { font-size: 12px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.mod-card .mod-source { word-break: break-all; font-family: var(--font-mono); font-size: 12px; }
.mod-card .mod-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mod-card.is-outdated { opacity: 0.72; }

/* 加入方式二维码 */
.qr-box {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.qr-thumb {
  width: 148px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: box-shadow var(--t), transform var(--t-fast);
}
.qr-thumb:hover { box-shadow: var(--glow); transform: translateY(-2px); }
.qq-number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: clamp(20px, 4vw, 26px);
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: var(--glow-sm);
}

/* 键值信息表 */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); }

/* 公告/活动详情正文 */
.detail-card { padding: 26px; }
.prose { max-width: 780px; }
.prose h2 { margin-top: 30px; }
.prose ul, .prose ol { color: var(--text-2); padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose img { border: 1px solid var(--line); margin: 16px 0; }
.banner {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg-1);
  cursor: zoom-in;
  margin-bottom: 22px;
}
.banner.is-placeholder { display: flex; align-items: center; justify-content: center; padding: 30px; }
.banner.is-placeholder img { width: min(180px, 40%); }

/* 时间线（更新记录/公告时间） */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 18px 16px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -23px; top: 8px;
  width: 8px; height: 8px;
  background: var(--cyan);
  box-shadow: var(--glow-sm);
}

/* ---------- 10 搜索 ---------- */
.search-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.search-form input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-form input[type="search"]:focus { border-color: var(--cyan); box-shadow: var(--glow-sm); }
.search-form input::placeholder { color: var(--text-3); }
/* 分类筛选按钮：显示各分类命中数，选中项用主色实底 */
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.search-filters:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--line-glow); color: var(--text); }
.chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.chip.is-active { background: var(--cyan); border-color: var(--cyan); color: #04121d; font-weight: 600; }
.chip-count { font-size: 11px; opacity: 0.7; font-family: var(--font-mono); }
/* 搜索结果：左边缩略图 + 右侧简介 */
.result-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-left: 3px solid var(--line);
}
.result-item:hover { border-left-color: var(--cyan); }
.result-thumb {
  flex: 0 0 104px;
  width: 104px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
}
.result-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* MOD 官方图标是方图，用 contain 不裁切 */
.result-thumb.is-contain img { object-fit: contain; padding: 6px; }
/* 没有配图时回落到站点 Logo，按占位处理（和公告/活动卡片一致） */
.result-thumb.is-placeholder img { object-fit: contain; padding: 12px; opacity: 0.85; }
.result-thumb.is-glyph { font-size: 26px; font-weight: 700; color: var(--cyan); }
.result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.result-type { font-size: 12px; color: var(--text-3); }
.result-title { margin: 0; font-size: 16px; }
.result-summary {
  margin: 0;
  font-size: 13px;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .result-item { gap: 10px; padding: 12px; }
  .result-thumb { flex-basis: 84px; width: 84px; }
  .result-title { font-size: 15px; }
}
/* 命中词只在正文里时补充的上下文片段 */
.result-snippet {
  margin: 3px 0 0;
  padding-left: 8px;
  border-left: 2px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}
mark.hit {
  background: rgba(77, 227, 255, 0.2);
  color: #eafcff;
  padding: 0 2px;
  box-shadow: inset 0 -1px 0 var(--cyan);
}

/* ---------- 10b 实时地图（PRD 6.11） ---------- */
.map-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.map-frame {
  position: relative;
  height: min(72vh, 760px);
  min-height: 360px;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-1);
}
/* 全屏时铺满，去掉边框（地图本身是亮色，深色边框在全屏下反而碍事） */
.map-frame:fullscreen { height: 100vh; border: 0; }
.map-frame:-webkit-full-screen { height: 100vh; border: 0; }
.map-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  text-align: center;
  background: var(--bg-1);
  color: var(--text-3);
  font-size: 14px;
}
.map-loading.is-done { display: none; }
/* 未接入时的占位：和全站空状态同一套语言 */
.panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(45deg, var(--bg-1), var(--bg-1) 10px, var(--bg-2) 10px, var(--bg-2) 20px);
}
.panel-placeholder h2 { margin: 0; font-size: 18px; }
.panel-icon {
  font-family: var(--font-pixel);
  font-size: 15px;
  letter-spacing: 0.24em;
  color: var(--cyan-dim);
}
.panel-note { margin: 12px 0 0; font-size: 13px; color: var(--text-3); }

/* 皮肤站：站内模型陈列（PRD 6.12） */
.skin-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background:
    linear-gradient(90deg, var(--cyan-fade), transparent 72%),
    linear-gradient(180deg, rgba(18, 36, 74, 0.5), rgba(11, 23, 48, 0.4));
}
.skin-bar-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.skin-bar-text .muted { font-size: 13px; }
.skin-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* 卡片是一个按钮（点开详情浮层，站内不放任何下载链接），所以要清掉按钮默认样式 */
.skin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.skin-card:hover,
.skin-card:focus-visible { border-color: var(--line-glow); box-shadow: var(--glow); }
.skin-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.skin-card.is-outdated { opacity: 0.72; }
.skin-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
}
.skin-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.skin-title { margin: 0; font-size: 16px; font-weight: 600; }
.skin-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.skin-tags:empty { display: none; }
.skin-desc { margin: 0; font-size: 13px; }
.skin-meta {
  margin-top: auto;
  display: flex;
  gap: 6px 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}
/* "查看详情"提示：手机端才显示（桌面端卡片信息已经全了） */
.skin-more { display: none; align-items: center; gap: 5px; font-size: 12px; color: var(--cyan); }

/* ---------- 皮肤站详情浮层（PRD 6.12） ---------- */
/* 手机端卡片是紧凑网格，点开才看放大预览与完整信息 */
.skin-detail {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(3, 8, 18, 0.84);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.skin-detail.is-open { display: flex; }
body.is-no-scroll { overflow: hidden; }
.skin-detail-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 18px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 40%),
              linear-gradient(180deg, rgba(18, 36, 74, 0.92), rgba(11, 23, 48, 0.92));
  border: 1px solid var(--line-glow);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.skin-detail-close {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(8, 18, 38, 0.78);
  border: 1px solid var(--line-glow);
  color: var(--cyan);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.skin-detail-close:hover { background: var(--cyan); color: #04121d; }
.skin-detail-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.skin-detail-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skin-detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.skin-detail-head h2 { margin: 0; font-size: 20px; }
.skin-detail-desc { margin: 0 0 14px; font-size: 14px; }
.skin-detail-meta { margin: 0 0 14px; display: grid; gap: 7px; }
.skin-detail-meta > div { display: flex; gap: 12px; font-size: 13px; }
.skin-detail-meta dt { flex: 0 0 84px; margin: 0; color: var(--text-3); }
.skin-detail-meta dd { margin: 0; }
.skin-detail-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--cyan);
  border-left: 3px solid var(--cyan);
  background: var(--cyan-fade);
}
.skin-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 手机端：两列紧凑网格，一眼能看到多排；完整信息在详情浮层里看 */
@media (max-width: 720px) {
  .skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .skin-card { padding: 8px; gap: 7px; }
  .skin-thumb { aspect-ratio: 4 / 3; }
  .skin-head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .skin-title { font-size: 14px; line-height: 1.35; }
  .skin-head .badge { font-size: 11px; padding: 1px 6px; }
  .skin-desc,
  .skin-meta { display: none; }
  .skin-more { display: inline-flex; }
  .skin-detail { padding: 12px; align-items: flex-start; }
  .skin-detail-panel { max-height: none; margin: 8px 0; }
}

/* 入口型卡片（皮肤站这类只做"入口"的页面）：内容居中，按钮是唯一动作 */
.entry-card { text-align: center; padding: 44px 24px; }
.entry-card h2 { margin: 0 0 10px; }

/* ---------- 08f 社区页：支持我们（爱发电入口框架） ---------- */
.support-card { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.support-mark {
  flex: 0 0 120px;
  width: 120px;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
}
.support-mark img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.support-body { flex: 1; min-width: 240px; }
.support-body h2 { margin: 0 0 10px; }
.support-desc { margin: 0 0 14px; }
.support-account { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; }
.support-actions { margin: 0 0 10px; }
.support-note { font-size: 13px; margin: 8px 0 0; }

@media (max-width: 720px) {
  .support-mark { flex-basis: 96px; width: 96px; }
}

/* ---------- 08g 管理页（内部维护页 /admin/，PRD 6.15） ---------- */
.admin-body { background: var(--bg-0); }
.admin-wrap { padding-top: 28px; padding-bottom: 40px; }
.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-head h1 { margin: 0; font-size: 24px; }
.admin-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-glow);
  background: linear-gradient(90deg, var(--cyan-fade), transparent 70%);
}
.admin-status.is-online { border-left-color: var(--ok); background: linear-gradient(90deg, rgba(82, 224, 168, 0.12), transparent 70%); }
.admin-status.is-offline { border-left-color: var(--warn); background: linear-gradient(90deg, rgba(255, 200, 97, 0.12), transparent 70%); }
.admin-status strong { font-size: 14px; }
.admin-status.is-online strong { color: var(--ok); }
.admin-status.is-offline strong { color: var(--warn); }
.admin-status span { color: var(--text-2); }
.admin-connect {
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.admin-connect summary { cursor: pointer; font-size: 14px; }
.admin-connect code { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); }
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-hint { font-size: 12px; color: var(--text-3); }
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.admin-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--line);
}
.admin-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  flex-wrap: wrap;
}
.admin-avatar {
  flex: 0 0 150px;
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-avatar img,
.admin-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 188px;                 /* 4:5 */
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: 28px;
}
.admin-avatar-note {
  display: block;
  margin-top: -4px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}
.admin-upload {
  display: block;
  text-align: center;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-2);
}
.admin-upload:hover { border-color: var(--line-glow); color: var(--text); }
.admin-upload input { display: none; }
.admin-fields { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.admin-row { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-row .admin-field { flex: 1; min-width: 140px; }
.admin-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-3); }
.admin-field input[type="text"],
.admin-field select,
.admin-field textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-0);
  border: 1px solid var(--line);
}
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow-sm); }
.admin-field textarea { resize: vertical; line-height: 1.5; }
.admin-item-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.admin-mini {
  display: inline-block;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.admin-mini:hover { border-color: var(--line-glow); color: var(--text); }
.admin-mini[disabled] { opacity: 0.35; cursor: default; }
.admin-mini.is-danger { color: var(--danger); border-color: rgba(255, 122, 122, 0.35); }
.admin-mini.is-danger:hover { background: rgba(255, 122, 122, 0.12); }
.admin-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 18px;
  font-size: 13px;
  color: var(--text);
  background: rgba(8, 18, 38, 0.95);
  border: 1px solid var(--line-glow);
  box-shadow: var(--glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  z-index: 80;
}
.admin-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.admin-toast.is-error { border-color: var(--danger); color: #ffd9d9; }

/* ---------- 08h 玩家展示：气泡展板（PRD 6.16） ---------- */
/* 毛玻璃要"背后有东西可模糊"才看得出来：这层光斑就在玻璃板背后，被 backdrop-filter 糊开 */
.players-section { position: relative; }
.players-glow {
  position: absolute;
  inset: 30px 0 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 26%, rgba(77, 227, 255, 0.30), transparent 42%),
    radial-gradient(circle at 84% 72%, rgba(143, 184, 255, 0.26), transparent 46%),
    radial-gradient(circle at 58% 12%, rgba(42, 182, 216, 0.22), transparent 38%),
    radial-gradient(circle at 34% 88%, rgba(82, 224, 168, 0.14), transparent 40%);
  filter: blur(16px) saturate(120%);
}
.players-section > *:not(.players-glow) { position: relative; z-index: 1; }
/* 外框是毛玻璃面板：让页面背景的像素纹理透上来、被模糊，形成"玻璃板"的观感 */
/* 毛玻璃板。背后放了一层已经 blur 过的彩色光斑（.players-glow），
   板子再把页面背景一起糊开，玻璃感更实在。
   ★ 注意：介绍卡（.bubble-pop）必须挂在 body 上、不能放在板子里面——
     带 backdrop-filter 的元素会形成 backdrop-root，内部元素无视 z-index
     压到板子外的高层浮层之上，之前就因此被气泡盖住过。 */
.bubble-board {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(77, 227, 255, 0.22);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 22%),
    linear-gradient(180deg, rgba(18, 36, 74, 0.34), rgba(8, 18, 42, 0.22));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 46px rgba(77, 227, 255, 0.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* 不支持毛玻璃的浏览器：把底色加厚一点，保证可读 */
  .bubble-board { background: linear-gradient(180deg, rgba(14, 30, 60, 0.86), rgba(8, 18, 42, 0.9)); }
}
.bubble-stage {
  position: relative;
  height: 560px;                      /* 做大：桌面留足空间让气泡散开 */
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 46%, rgba(77, 227, 255, 0.14), transparent 58%),
    radial-gradient(circle at 15% 85%, rgba(42, 182, 216, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(12, 26, 54, 0.55), rgba(5, 11, 24, 0.72));
}
/* 细微网格，让空的地方也有质感 */
.bubble-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(28, 51, 88, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 51, 88, 0.5) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* 中心引力点的视觉参照 */
.bubble-stage::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 227, 255, 0.12), transparent 68%);
  pointer-events: none;
}
/* 悬停聚焦：整块压暗，形成景深。
   ★ 这里刻意不用 backdrop-filter：毛玻璃板内部再嵌一层 backdrop-filter，
   Chromium 会把后绘制的内容（介绍卡）也一起糊掉/压暗。景深主要靠
   "其余气泡自己 blur" 实现（见下面 .bubble:not(.is-active)），压暗层只需做暗角。 */
.bubble-focus {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
  background: radial-gradient(circle at 50% 46%, rgba(3, 8, 18, 0.30), rgba(3, 8, 18, 0.78));
}
.bubble-stage.is-focus .bubble-focus { opacity: 1; }

/* 气泡：正圆，头像填满，外层一圈玻璃高光 */
.bubble {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(77, 227, 255, 0.35);
  background: var(--bg-1);
  cursor: pointer;
  /* 外发光 + 内圈高光，做出玻璃球的立体感 */
  box-shadow:
    0 6px 22px rgba(3, 8, 18, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 10px 24px rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--t), border-color var(--t), filter var(--t);
  will-change: transform;
}
/* 玻璃反光：左上角一片柔和的高光 */
.bubble::after {
  content: "";
  position: absolute;
  left: 12%; top: 8%;
  width: 46%; height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.30), transparent 70%);
  pointer-events: none;
  transition: opacity var(--t);
}
.bubble img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;                  /* 皮肤头像填满气泡 */
  border-radius: 50%;
  transition: transform var(--t);
}
.bubble-name {
  position: absolute;
  left: 50%; bottom: 10%;
  z-index: 2;
  transform: translateX(-50%);
  max-width: 88%;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  /* 名字牌也是毛玻璃 */
  background: rgba(3, 8, 18, 0.72);
  border: 1px solid rgba(77, 227, 255, 0.28);
  border-radius: 999px;
}
/* 非悬停气泡虚化：景深 */
.bubble-stage.is-focus .bubble:not(.is-active) {
  filter: blur(4px) saturate(0.7) brightness(0.66);
}
.bubble:hover,
.bubble.is-active {
  border-color: var(--cyan);
  box-shadow:
    0 0 0 1px rgba(77, 227, 255, 0.4),
    0 10px 40px rgba(77, 227, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 5;
}
.bubble.is-active { filter: none; }
.bubble.is-active img { transform: scale(1.14); }
.bubble:hover .bubble-name { border-color: var(--cyan); }
.bubble:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* 人物介绍卡：不要再嵌一层毛玻璃（毛玻璃套毛玻璃会互相干扰、显示发虚），
   用不透明底色 + 描边 + 外发光，保证在玻璃板上清晰可读 */
.bubble-pop {
  position: fixed;          /* 挂在 body 上，用视口坐标，保证盖在毛玻璃板之上 */
  z-index: 200;
  width: 290px;
  max-width: calc(100% - 20px);
  padding: 16px;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity var(--t), transform var(--t);
  background: linear-gradient(180deg, #16294f, #0c1a35);
  border: 1px solid var(--line-glow);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(77, 227, 255, 0.12), var(--glow-sm);
}
.bubble-pop.is-open { opacity: 1; transform: translateY(0) scale(1); }
.bubble-pop-close {
  position: absolute;
  right: 8px; top: 8px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--cyan);
  background: rgba(3, 8, 18, 0.4);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.bubble-pop-close:hover { background: var(--cyan); color: #04121d; }
.bubble-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bubble-pop-head img {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-glow);
  object-fit: cover;
  box-shadow: var(--glow-sm);
}
.bubble-pop-head strong { display: block; font-size: 16px; margin-bottom: 5px; }
.bubble-pop-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.bubble-pop-stats { display: flex; flex-direction: column; gap: 8px; }
.bubble-stat { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-3); }
.bubble-stat-label { flex: 0 0 58px; }
.bubble-stat-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(3, 8, 18, 0.5);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.bubble-stat-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  box-shadow: 0 0 10px rgba(77, 227, 255, 0.5);
}
.bubble-stat-value { flex: 0 0 26px; text-align: right; font-family: var(--font-mono); }
/* 数据来源提示（本机草稿 / 后端读取失败） */
.h-notice {
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: 12px;
  border-left: 3px solid var(--warn);
  background: rgba(255, 200, 97, 0.08);
}

@media (max-width: 720px) {
  .bubble-board { padding: 10px; }
  .bubble-stage { height: 460px; }
  .bubble-name { font-size: 11px; bottom: 8%; padding: 2px 8px; }
  .bubble-pop { width: auto; left: 12px !important; right: 12px; }   /* 手机上整宽，更容易点关闭 */
}
/* ==========================================================================
   以下章节（11 分页 / 12 状态 / 13 弹窗与 Toast / 14 页脚 / 15 动效 /
   16 响应式 / 17 可访问性）为重建版本。
   原因：一次误用字符串截断删除气泡样式时，把位于其后的这些章节一并截掉了。
   重建依据：页面/脚本里的真实类名、既有设计令牌、以及此前验证过的手机端断点。
   ========================================================================== */

/* ---------- 11 分页 ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 28px 0 8px;
}
.pagination:empty { display: none; }
.pagination button {
  min-width: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg-1);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.pagination button:hover { border-color: var(--line-glow); color: var(--text); }
.pagination button.is-active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04121d;
  font-weight: 600;
}
.pagination button[disabled] { opacity: 0.35; cursor: default; }

/* ---------- 12 状态：空 / 错 / 加载 ---------- */
.empty-state {
  padding: 46px 24px;
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--line);
  background: linear-gradient(180deg, rgba(18, 36, 74, 0.3), transparent);
}
.empty-state p { margin: 10px 0 0; }
.empty-icon {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.3em;
  color: var(--cyan-dim);
}
.error-state { border-color: rgba(255, 122, 122, 0.4); color: var(--danger); }
.error-state .empty-icon { color: var(--danger); }

/* 行内加载提示（列表/卡片占位用） */
.loading-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 0;
  font-size: 14px;
  color: var(--text-3);
}
.dot {
  width: 9px; height: 9px;
  flex: none;
  background: var(--cyan);
  box-shadow: var(--glow-sm);
  animation: dotPulse 1.1s steps(2, end) infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* 全屏像素风加载动画（PRD 27）：加载完成由 JS 加 .is-done 淡出；
   同时给一个纯 CSS 的兜底动画，避免脚本异常时一直盖着页面 */
.loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg-0);
  animation: loaderAutoHide 400ms ease 2600ms forwards;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 320ms ease;
}
@keyframes loaderAutoHide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.loader-blocks {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  grid-auto-rows: 14px;
  gap: 4px;
}
.loader-blocks i { display: block; background: var(--cyan-dim); animation: blockPulse 1.2s ease-in-out infinite; }
.loader-blocks i:nth-child(1) { animation-delay: 0ms; }
.loader-blocks i:nth-child(2) { animation-delay: 90ms; }
.loader-blocks i:nth-child(3) { animation-delay: 180ms; }
.loader-blocks i:nth-child(4) { animation-delay: 270ms; }
.loader-blocks i:nth-child(5) { animation-delay: 360ms; }
.loader-blocks i:nth-child(6) { animation-delay: 450ms; }
.loader-blocks i:nth-child(7) { animation-delay: 540ms; }
.loader-blocks i:nth-child(8) { animation-delay: 630ms; }
.loader-blocks i:nth-child(9) { animation-delay: 720ms; }
@keyframes blockPulse {
  0%, 100% { background: var(--cyan-dim); box-shadow: none; }
  50% { background: var(--cyan); box-shadow: var(--glow-sm); }
}
.loader-text { font-size: 14px; color: var(--text-3); letter-spacing: 0.08em; }

/* 404 / 错误页 */
.error-page { text-align: center; padding: 40px 0 60px; }
.error-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.error-logo img { width: min(42vw, 190px); height: auto; }
.error-page h1 { margin: 0 0 12px; }
.error-desc { margin: 0 auto 26px; max-width: 520px; color: var(--text-2); }

/* ---------- 13 弹窗与 Toast ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 8, 18, 0.86);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(92vw, 1000px);
  max-height: 78vh;
  border: 1px solid var(--line-glow);
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute;
  right: 20px; top: 20px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 18px;
  color: var(--cyan);
  background: rgba(8, 18, 38, 0.8);
  border: 1px solid var(--line-glow);
  cursor: pointer;
}
.lightbox-close:hover { background: var(--cyan); color: #04121d; }
.lightbox-hint {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 140;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text);
  background: rgba(8, 18, 38, 0.95);
  border: 1px solid var(--line-glow);
  box-shadow: var(--glow);
  animation: toastIn 220ms ease;
}
.toast.is-error { border-color: var(--danger); color: #ffd9d9; }
.toast-mark { color: var(--cyan); font-family: var(--font-mono); }
.toast.is-error .toast-mark { color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 14 页脚 ---------- */
.site-footer {
  margin-top: 60px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(8, 18, 42, 0.6));
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 40px; height: 40px; }
.footer-name { display: flex; flex-direction: column; font-size: 15px; }
.footer-name small { font-size: 11px; letter-spacing: 0.14em; color: var(--text-3); }
.footer-copy { margin: 0; font-size: 12px; color: var(--text-3); }
.footer-domain { margin-left: 10px; }
.footer-domain::before { content: '·'; margin-right: 10px; opacity: .55; }
.footer-domain a { color: var(--text-3); text-decoration: none; transition: color .18s; }
.footer-domain a:hover { color: var(--cyan); }

/* ---------- 15 动效 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.in { opacity: 1; transform: none; }
/* 搜索结果跳转定位到的条目：闪一下边框 */
.is-target { border-color: var(--cyan) !important; box-shadow: var(--glow-lg) !important; }
@keyframes targetFlash {
  0%, 100% { box-shadow: var(--glow-sm); }
  50% { box-shadow: var(--glow-lg); }
}
.is-target { animation: targetFlash 900ms ease 2; }

/* ---------- 16 响应式 ---------- */
/* 平板：导航收紧，7 项刚好放下 */
@media (max-width: 1024px) {
  .nav-links { gap: 4px; }
  .nav-links a { padding: 6px 8px; font-size: 14px; }
  .nav-cta { display: none; }
  .brand-en { display: none; }
}
/* 手机/窄屏：导航收进汉堡菜单 */
@media (max-width: 860px) {
  :root { --nav-h: 58px; }
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .brand-en { display: none; }
  .nav-tools .lang-btn span:last-child { display: none; }
  /* Hero 是 grid 布局（不是 flex），手机上必须覆盖 grid-template-columns 才会变单列 */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    text-align: center;
    padding-top: calc(var(--nav-h) + 34px);
    padding-bottom: 56px;
    min-height: 0;
  }
  .hero-art { order: -1; }
  .hero-art img { width: min(58vw, 220px); }
  .hero-text { text-align: center; }
  .hero-text h1 { font-size: 30px; }
  .hero-actions { justify-content: center; }
  .section-head { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 720px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-card { flex-direction: column; }
  .feature-card .thumb { width: 100%; }
  .row-card { flex-direction: column; }
  .row-card .thumb { width: 100%; aspect-ratio: 16 / 9; }
  .detail-card { padding: 18px 16px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .pagination button { min-width: 36px; padding: 7px 10px; }
  .lightbox { padding: 14px; }
  .lightbox-close { right: 12px; top: 12px; }
}
@media (max-width: 400px) {
  /* 只改左右内边距，不要用 padding 简写：
     简写会把 top/bottom 一起置 0，而这条规则在文件末尾，
     会覆盖 .hero-inner / .page-band-inner 单独设置的 padding-top，
     导致小屏手机上 Hero 内容与内页标题被顶栏压住（实测 390px 下 h1 的 top 变成 2px）。 */
  .wrap { padding-left: 14px; padding-right: 14px; }
  .btn { padding: 10px 16px; font-size: 14px; }
}

/* ---------- 17 可访问性与降级 ---------- */
/* 不支持毛玻璃时，把靠它撑可读性的元素换成实底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .lang-menu,
  .mobile-nav,
  .video-card,
  .skin-detail-panel,
  .bubble-board { background-color: rgba(8, 18, 42, 0.96); }
}
/* 系统要求减少透明度 */
@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .lang-menu,
  .mobile-nav,
  .video-card { background-color: var(--bg-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* 系统要求减少动态效果：不播放持续动画，淡入直接到位 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .loader { animation: none; }
  .loader-blocks i { animation: none; }
  .dot { animation: none; }
  .toast { animation: none; }
  .is-target { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* ---------- 18 管理页补充：清空头像按钮 ---------- */
.admin-clear {
  display: block;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--danger);
  background: var(--bg-2);
  border: 1px solid rgba(255, 122, 122, 0.35);
  cursor: pointer;
}
.admin-clear:hover { background: rgba(255, 122, 122, 0.12); }

/* ==========================================================================
   服务器公告弹层（app.js 的 openAnnounce）
   服务器侧公告（/api/announcements）没有静态详情页，
   点列表里的卡片就在当前页弹层展示正文，不做跳转（跳转会 404）。
   ========================================================================== */
.ann-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ann-modal[hidden] { display: none; }
.ann-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 18, 0.78);
  backdrop-filter: blur(3px);
}
.ann-modal-card {
  position: relative;
  width: min(680px, 100%);
  max-height: min(76vh, 720px);
  overflow: auto;
  padding: 26px 26px 30px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line-glow);
}
.ann-modal-card h2 { margin: 0; font-size: 20px; }
.ann-modal-card p { line-height: 1.8; }
.ann-modal-card ul, .ann-modal-card ol { padding-left: 22px; }
.ann-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  font: inherit;
  font-size: 15px;
  color: var(--text-2);
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.ann-modal-close:hover { background: var(--cyan); color: #04121d; }
/* ==========================================================================
   v2 组件：服务器状态 / YSM 模型库 / 玩家门户
   --------------------------------------------------------------------------
   沿用本文件顶部的同一套设计令牌（--panel / --line / --cyan / --ok 等），
   不引入新配色、不内联样式，保证与既有页面视觉一致。
   ========================================================================== */

/* —— 统计卡片 —— */
.stat-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card {
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.stat-card .k { font-size: 12px; color: var(--text-3); letter-spacing: 0.06em; }
.stat-card .v { margin-top: 6px; font-size: 26px; font-weight: 700; line-height: 1.1; font-family: var(--font-mono); }
.stat-card .s { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.stat-card.is-ok .v { color: var(--ok); }
.stat-card.is-cyan .v { color: var(--cyan); }
.stat-card.is-warn .v { color: var(--warn); }
.stat-card.is-danger .v { color: var(--danger); }

/* —— 图表（自绘 SVG，无外部依赖） —— */
.chart-box { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.chart-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-head h2, .chart-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.chart-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); }
.chart-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-empty { padding: 44px 0; text-align: center; color: var(--text-3); font-size: 13px; }

/* —— 键值表 —— */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); }

/* —— 进度 / 占用条 —— */
.meter { height: 8px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-deep), var(--cyan)); }
.meter.is-warn > i { background: linear-gradient(90deg, #d99b3a, var(--warn)); }
.meter.is-danger > i { background: linear-gradient(90deg, #d05353, var(--danger)); }

/* —— 状态徽章（沿用 .badge 基线，仅换语义色） —— */
.badge-pending { color: var(--warn); border-color: rgba(255, 200, 97, 0.45); background: rgba(255, 200, 97, 0.08); }
.badge-approved { color: var(--ok); border-color: rgba(82, 224, 168, 0.45); background: rgba(82, 224, 168, 0.08); }
.badge-rejected { color: var(--danger); border-color: rgba(255, 122, 122, 0.45); background: rgba(255, 122, 122, 0.08); }
.badge-pg13 { color: #c8a6ff; border-color: rgba(200, 166, 255, 0.45); background: rgba(200, 166, 255, 0.08); }

/* —— 标签页 —— */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--gap); border-bottom: 1px solid var(--line); }
.tabs button {
  padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--text-3); background: transparent; border: 0; border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs button:hover { color: var(--text); }
.tabs button.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.tabs .tab-note { margin-left: auto; align-self: center; font-size: 12px; color: var(--text-3); }

/* —— 表单控件（像素风，与 .chip / .btn 同一语汇） —— */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; }
.input, .select, .textarea {
  padding: 9px 12px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: var(--glow-sm);
}
.textarea { min-height: 76px; resize: vertical; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }

/* —— 模型库 —— */
.model-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.model-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.model-card:hover { border-color: var(--line-glow); box-shadow: var(--glow); transform: translateY(-2px); }
.model-cover {
  position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); overflow: hidden;
}
.model-cover img { width: 100%; height: 100%; object-fit: contain; }
/* 预览图是正方形居中的整只模型，卡片是 4:5 —— 用 cover 会把两侧（也就是手臂）裁掉，
   所以这里必须 contain，宁可留点边也不能切模型 */
/* 上传时的「公开 / 私有」二选一：整块可点，选中高亮 */
.vis-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .vis-picker { grid-template-columns: 1fr; } }
.vis-opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.vis-opt:hover { border-color: var(--line-2, var(--line)); background: rgba(255,255,255,.02); }
.vis-opt:has(input:checked) { border-color: var(--cyan); background: rgba(56,217,230,.07); }
.vis-opt input { margin-top: 3px; accent-color: var(--cyan); flex: none; }
.vis-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vis-body b { font-size: 13px; font-weight: 600; }
.vis-body em { font-style: normal; font-size: 12px; line-height: 1.55; color: var(--text-3); }

.model-cover .ph { font-family: var(--font-pixel); font-size: 30px; color: var(--line); letter-spacing: 0.08em; }
.model-cover[data-ph]::after {
  content: 'YSM';
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-pixel); font-size: 26px; letter-spacing: 0.1em; color: var(--line);
}
.model-flags { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.model-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; }
.model-name { margin: 0; font-size: 15px; font-weight: 600; }
.model-meta { font-size: 12px; color: var(--text-3); }
.model-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
/* 「我的模型」卡片里的操作行：改可见性 / 删除 */
.model-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.model-actions .btn { flex: 1; justify-content: center; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); background: rgba(255,122,122,.1); border-color: rgba(255,122,122,.35); }
.model-foot .grow { margin-left: auto; }

/* —— 审核预览台 —— */
.stage { display: grid; gap: var(--gap); grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
.stage-view {
  aspect-ratio: 1 / 1.2; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.stage-view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stage-side { display: flex; flex-direction: column; gap: 14px; }
.angle-row, .anim-list { display: flex; gap: 8px; flex-wrap: wrap; }
.angle-row button, .anim-list button {
  padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer;
  color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.angle-row button:hover, .anim-list button:hover { color: var(--text); border-color: var(--line-glow); }
.angle-row button.is-active, .anim-list button.is-active { color: #04121d; background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.anim-list { flex-direction: column; max-height: 220px; overflow: auto; }
.anim-list button { text-align: left; }
.strip { display: flex; gap: 6px; padding: 8px 0; overflow-x: auto; }
.strip img { flex: none; width: 58px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }

/* —— 拖拽上传 —— */
.drop {
  padding: 30px; text-align: center; font-size: 13px; color: var(--text-3); cursor: pointer;
  background: var(--bg-1); border: 1.5px dashed var(--line); border-radius: var(--radius);
  transition: border-color var(--t), background var(--t), color var(--t);
}
.drop:hover, .drop.is-over { color: var(--cyan); background: var(--cyan-fade); border-color: var(--cyan); }

/* —— 表格 —— */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tbl th { font-size: 12px; font-weight: 600; color: var(--text-3); }
.tbl tbody tr:hover { background: var(--panel-2); }
.tbl-wrap { overflow-x: auto; }

/* —— 玩家门户 —— */
.portal { display: grid; gap: var(--gap); grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.skin-stage {
  aspect-ratio: 1 / 1.4; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.skin-stage canvas, .skin-stage img { max-width: 100%; max-height: 100%; }
/* 管理入口红点：未处理申请数 */
.icon-btn { position: relative; }
.nav-dot {
  position: absolute; top: -4px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: #e5484d; color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg-1, #0b1220);
}

/* 账号绑定：一个角色一行 */
.bind-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-soft); }
.bind-row:last-of-type { border-bottom: 0; }
.bind-main { flex: 1; min-width: 0; }
.bind-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.bind-sub { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }

/* 称号颜色：下拉右边实时显示对应色块 */
/* 称号颜色：自定义下拉。原生 <select> 的 option 里塞不进色块，所以自己画一个 */
.tt-dd { position: relative; max-width: 280px; }
.tt-dd-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03);
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.tt-dd-btn:hover { border-color: rgba(77,227,255,.45); background: rgba(77,227,255,.06); }
.tt-dd-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tt-dd.is-open .tt-dd-btn { border-color: rgba(77,227,255,.6); }
.tt-dd-text { flex: 1; text-align: left; }
.tt-dd-caret { color: var(--text-3); font-size: 11px; transition: transform .16s ease; }
.tt-dd.is-open .tt-dd-caret { transform: rotate(180deg); }
.tt-sw { width: 18px; height: 18px; border-radius: 5px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.35); }
.tt-dd-menu { position: absolute; z-index: 90; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 5px; list-style: none; max-height: 280px; overflow: auto;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2);
  box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.tt-dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  font-size: 14px; color: var(--text-2); cursor: pointer; }
.tt-dd-item:hover { background: rgba(255,255,255,.07); color: var(--text); }
.tt-dd-item[aria-selected="true"] { background: rgba(77,227,255,.13); color: var(--text); }
.tt-dd-item[aria-selected="true"] .tt-dd-name::after { content: "✓"; margin-left: 8px; color: var(--cyan); font-size: 12px; }

/* 服务器公告详情：发布者头像 + 管理员操作条 */
.ann-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; }
.ann-author { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
.ann-avatar { width: 22px; height: 22px; border-radius: 50%; display: block; object-fit: cover;
  border: 1px solid var(--line); background: rgba(255,255,255,.06); }
.ann-admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 10px 12px; border: 1px dashed rgba(77,227,255,.35); border-radius: 10px;
  background: rgba(77,227,255,.06); }
.ann-admin-tag { font-size: 12px; letter-spacing: 1px; color: var(--cyan); padding-right: 4px; }
.ann-admin-bar .btn.is-danger { border-color: rgba(255,122,122,.5); color: var(--danger); }
.ann-admin-bar .btn.is-danger:hover { background: rgba(255,122,122,.12); }

/* 3D 外观：两块画布并排（正面 / 背面），背景交给 canvas 自己，去掉卡片的边框感 */
.skin-stage.is-3d { aspect-ratio: auto; border: 0; background: transparent; overflow: visible; }
.skin-3d { display: flex; gap: 2px; align-items: flex-end; justify-content: center; width: 100%; }
.skin-3d .skin-cv { width: 50%; max-width: 150px; height: auto; display: block; }
.adv-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--line-soft); }
.adv-item:last-child { border-bottom: 0; }
.adv-item .ic { width: 18px; text-align: center; color: var(--text-3); }
.adv-item.is-done .ic { color: var(--ok); }
.adv-item .nm { color: var(--text-2); }
.adv-item.is-done .nm { color: var(--text); }
.adv-item .tm { margin-left: auto; font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }
.adv-scroll { max-height: 260px; overflow: auto; }

/* —— 合规提示 —— */
.compliance {
  padding: 14px 16px; font-size: 13px; line-height: 1.8;
  color: #ffd9d9; background: rgba(255, 122, 122, 0.07);
  border: 1px solid rgba(255, 122, 122, 0.35); border-radius: var(--radius);
}
.compliance b { color: #ff9c94; }
.compliance h3 { margin: 0 0 6px; font-size: 14px; color: #ff9c94; }
.note-line { font-size: 12px; color: var(--text-3); }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .portal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}
.ann-modal-card.is-wide { width: min(1000px, 100%); }
.ph { color: var(--line); font-family: var(--font-pixel); letter-spacing: 0.08em; }

/* ---------- 服务器总览（多服务器卡片） ---------- */
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gap);
}
.server-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.server-top { display: flex; align-items: center; gap: 14px; }
.server-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--cyan) 6%, var(--panel));
}
.server-icon {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.server-meta { min-width: 0; flex: 1; }
.server-name { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.server-sub { font-size: 12px; color: var(--text-3); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.server-players { font-size: 12px; color: var(--text-2); }
.server-go { flex: none; font-size: 13px; color: var(--cyan); white-space: nowrap; }

/* ---------- 资源占用（CPU / 内存 / 磁盘） ---------- */
.res-inline {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}
.res-inline .ri-t {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 11px; line-height: 1.3; color: var(--text-3); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden;
}
.res-inline .ri-t span { overflow: hidden; text-overflow: ellipsis; }
.res-inline .ri-t b { color: var(--text-2); font-weight: 600; }
.res-inline .meter { height: 4px; }
.res-grid { display: grid; gap: 14px; }
.res-item-t {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--text-2); margin-bottom: 6px;
}
.res-item-t .mono { margin-left: auto; font-size: 12px; color: var(--text-3); }
.res-net { margin-top: 14px; font-size: 12px; color: var(--text-3); }

/* ---------- 上传免责声明 / 材质切换 ---------- */
.compliance-warn {
  border: 1px solid #ff9c94;
  border-radius: var(--radius);
  background: rgba(255, 120, 120, .08);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
}
.compliance-warn strong { display: block; margin-bottom: 6px; color: #ff9c94; }
.agree-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.agree-line input { margin-top: 3px; }
.mat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mat-btn {
  padding: 0; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--panel); cursor: pointer;
}
.mat-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-btn.is-active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.mat-btn.is-anim { display: grid; place-items: center; color: var(--cyan); font-size: 16px; }

/* ---------- 服务器封面 ---------- */
.server-cover {
  margin: 0 0 var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.server-cover img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
}

/* ---------- 曲线悬停提示 ---------- */
.chart-stage { position: relative; }
.chart-stage .chart-svg { display: block; width: 100%; touch-action: pan-y; }
.ch-tip {
  position: absolute; z-index: 6; display: none; pointer-events: none;
  min-width: 128px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(8, 16, 30, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font-size: 12px; color: var(--text-1); white-space: nowrap;
}
.ch-tip-t { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.ch-tip-r { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.ch-tip-r i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ch-tip-r b { margin-left: auto; padding-left: 14px; font-family: var(--font-mono); color: var(--text-1); }
.ch-tip-sum { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; color: var(--text-2); }

/* ---------- 在线玩家名单 ---------- */
.player-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.player-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); font-size: 13px; color: var(--text-1);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-chip.is-bot { color: var(--text-3); border-style: dashed; }
.player-chip .bot-tag { font-size: 9px; font-family: var(--font-pixel); letter-spacing: .06em; color: #ffc861; }
.player-chip .player-prefix { font-size: 12px; margin-right: 4px; }

/* 玩家头像（mc-heads 皮肤头，失败回退彩色首字母） */
.player-avatar {
  position: relative; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  flex: none; display: inline-grid; place-items: center;
  background: hsl(var(--h, 200) 55% 42%); color: #fff;
  font-family: var(--font-pixel); font-size: 11px; line-height: 1;
}
.player-avatar::after { content: attr(data-initial); }
.player-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 曲线提示里的在线名单 */
.ch-tip { max-width: 240px; }
.ch-tip-names { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); white-space: normal; max-width: 216px; }
.ch-tip-nl { display: block; font-size: 10px; color: var(--text-3); margin-bottom: 4px; }
.ch-tip-nm {
  display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); font-size: 11px; color: var(--text-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}


/* ---------- 模型实时 3D 预览（WebGL） ---------- */
.ysm-modal { width: min(1080px, 96vw); max-height: 92vh; overflow-y: auto; }
.ysm-side { max-height: 78vh; overflow-y: auto; padding-right: 4px; }
.ysm-wrap { display: grid; grid-template-columns: minmax(240px, 1fr) 300px; gap: var(--gap); }
.ysm-stage {
  position: relative; min-height: 460px; border: 1px solid var(--line);
  border-radius: 2px; background:
    radial-gradient(circle at 50% 62%, rgba(56, 217, 230, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(11, 18, 30, 0.9), rgba(8, 13, 22, 0.98));
  overflow: hidden; touch-action: none;
}
.ysm-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
.ysm-stage canvas:active { cursor: grabbing; }
.ysm-stage .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ysm-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ysm-row { display: flex; flex-direction: column; gap: 6px; }
.ysm-row .k { font-size: 12px; color: var(--text-3); }
.ysm-play { flex-direction: row; align-items: center; gap: 8px; }
.ysm-play input[type="range"] { flex: 1; min-width: 0; accent-color: var(--cyan); }
.ysm-play .muted { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.ysm-hint { font-size: 12px; color: var(--text-3); margin: 0; }
.ysm-fallback-img { width: 100%; max-height: 60vh; object-fit: contain; }
.ysm-fallback { padding: 24px; color: var(--text-3); font-size: 13px; }
@media (max-width: 820px) {
  .ysm-wrap { grid-template-columns: 1fr; }
  .ysm-stage { min-height: 320px; }
}

.ysm-settings { gap: 8px; }
.ysm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ysm-check input { accent-color: var(--cyan); width: 15px; height: 15px; }
.ysm-range { display: flex; flex-direction: column; gap: 4px; }
.ysm-range-t { font-size: 12px; color: var(--text-3); }
.ysm-range input, .ysm-radio-btns input { accent-color: var(--cyan); }
.ysm-radio { display: flex; flex-direction: column; gap: 5px; }
.ysm-radio-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ysm-radio-btns button {
  font-size: 12px; padding: 4px 9px; border: 1px solid var(--line); background: transparent;
  color: var(--text-2); border-radius: 2px; cursor: pointer; line-height: 1.4;
}
.ysm-radio-btns button:hover { border-color: var(--line-soft); color: var(--text); }
.ysm-radio-btns button.is-active { border-color: var(--cyan); color: var(--cyan); }