/* ===================================================================
   🎨 主题配置区
   =================================================================== */
:root {
  --primary: #ff0033;
  --primary-rgb: 255, 0, 51;
  --secondary: #7a0019;
  --secondary-rgb: 122, 0, 25;
  --accent: #00e5ff;
  --accent-rgb: 0, 229, 255;
  --bg-color: #0b0b14;
  --bg-rgb: 11, 11, 20;
  --modal-bg: #151522;
  --text-main: #eaeaf2;
  --text-muted: #a8a8be;
  --text-dim: #8888a0;
  --primary-light: #ff8080;
  /* 按钮渐变的两个端点与前景色。刻意与 --primary/--secondary 解耦：
     主题色用在标题/描边等处可以很亮，但按钮要承载文字，必须保证对比度 >= 4.5:1 */
  --btn-grad-from: #eb002c;
  --btn-grad-to: #b3002a;
  --on-primary: #ffffff;
}

/* ===== 各主题的按钮前景色与渐变端点 =====
   取值按 WCAG 2.1 相对亮度公式实算，渐变两端对前景色的对比度都 >= 4.5:1。
   用属性选择器而非 JS，配合 <head> 中的同步脚本可在首屏绘制前生效，顺带消除主题闪烁。 */
html[data-theme="eva"]     { --btn-grad-from: #eb002c; --btn-grad-to: #b3002a; --on-primary: #ffffff; }
html[data-theme="miku"]    { --btn-grad-from: #39c5bb; --btn-grad-to: #2aa79f; --on-primary: #06282a; }
html[data-theme="genshin"] { --btn-grad-from: #ffcc00; --btn-grad-to: #e6b800; --on-primary: #241c38; }
html[data-theme="sakura"]  { --btn-grad-from: #ff9db5; --btn-grad-to: #f7a8c0; --on-primary: #3a2230; }
html[data-theme="cyber"]   { --btn-grad-from: #fcee0a; --btn-grad-to: #e0d409; --on-primary: #141414; }

/* ===== [hidden] 兜底 =====
   作者样式里的 .btn{display:inline-block} / .debug-output{display:grid} 会盖过 UA 的
   [hidden]{display:none}，导致 #installBtn 与 #devDebugOutput 明明带 hidden 却一直显示、点了没反应。 */
[hidden] { display: none !important; }

/* ===== 基础重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-color);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ===== 背景层 ===== */
.bg-image {
  /* inset 用负值向外扩：blur 会把边缘向内外扩散，如果贴齐视口四边会露出一圈透明"底边" */
  position: fixed; inset: -20px; z-index: -1;
  /* image-set 让支持 WebP 的浏览器（几乎所有现代浏览器）拿到 130KB 的版本，
     不支持时自动回退到 477KB 的 JPEG */
  background-image: url('assets/images/bg.jpg');
  background-image: image-set(
    url('assets/images/bg.webp') type('image/webp'),
    url('assets/images/bg.jpg') type('image/jpeg')
  );
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  opacity: 0.20; filter: blur(3px);
}
.bg-grid {
  position: fixed; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none; z-index: 0;
}
.glow {
  position: fixed; border-radius: 50%;
  filter: blur(120px); opacity: .35;
  pointer-events: none; z-index: 0;
  animation: float 10s ease-in-out infinite alternate;
}
.glow-1 { width: 400px; height: 400px; background: var(--primary); top: -100px; left: -100px; }
.glow-2 { width: 350px; height: 350px; background: var(--secondary); bottom: 10%; right: -50px; animation-delay: -3s; }
.glow-3 { width: 300px; height: 300px; background: var(--accent); top: 40%; left: 30%; animation-delay: -6s; opacity: .2; }
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.1); }
}
#particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* ===== 导航栏 ===== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s, backdrop-filter .3s; }
.nav.scrolled { background: rgba(var(--bg-rgb), .75); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: grid; place-items: center; font-size: 1rem; color: #fff; box-shadow: 0 0 18px rgba(var(--primary-rgb), .6); }
.logo-mark.small { width: 28px; height: 28px; border-radius: 8px; font-size: .85rem; }
.logo-text em { font-style: normal; color: var(--primary); }
.nav-links { display: flex; gap: 28px; font-size: .95rem; font-weight: 500; }
.nav-links a { color: var(--text-muted); transition: color .2s; position: relative; }
.nav-links a:hover { color: #fff; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width .3s; }
.nav-links a:hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* ===== 登录区域 ===== */
.nav-auth { display: flex; align-items: center; gap: 10px; margin-left: 20px; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.user-info { display: flex; align-items: center; gap: 8px; background: rgba(var(--primary-rgb), .15); padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(var(--primary-rgb), .3); }
.user-avatar { font-size: 1.1rem; }
.user-name { font-size: 0.85rem; font-weight: 700; color: var(--primary-light); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-logout { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.8rem; padding: 2px; transition: color .2s; }
.btn-logout:hover { color: var(--primary); }

/* ===== 主题切换器 ===== */
.theme-switcher { position: relative; }
.theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; font-size: 1rem; transition: all .3s; display: grid; place-items: center; }
.theme-toggle:hover { border-color: var(--primary); transform: rotate(30deg); }
.theme-panel { position: absolute; top: 48px; right: 0; width: 180px; padding: 12px; background: var(--modal-bg); border: 1px solid rgba(var(--primary-rgb), .3); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .3s, visibility .3s, transform .3s; z-index: 150; }
.theme-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.theme-panel-title { font-size: .75rem; color: var(--text-dim); margin-bottom: 8px; letter-spacing: 1px; }
.theme-option { display: block; width: 100%; padding: 8px 12px; margin-bottom: 4px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-muted); font-size: .85rem; cursor: pointer; text-align: left; transition: all .2s; }
.theme-option:hover { background: rgba(var(--primary-rgb), .1); color: #fff; }
.theme-option.active { background: rgba(var(--primary-rgb), .2); border-color: var(--primary); color: #fff; }

/* ===== 通用 Section ===== */
.section { position: relative; z-index: 2; padding: 100px 24px; }
.section-alt { background: rgba(255,255,255,.015); }
.container { max-width: 1100px; margin: 0 auto; }
.section-label { text-align: center; font-size: .8rem; letter-spacing: 4px; color: var(--primary); font-weight: 700; margin-bottom: 12px; }
.section-title { text-align: center; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 16px; }
.section-desc { text-align: center; color: var(--text-muted); max-width: 680px; margin: 0 auto 56px; }
.section-desc strong { color: var(--text-main); }
.grad { background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradShift 6s ease infinite; }
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ===== 卡片网格 ===== */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 32px 28px; transition: all .35s; position: relative; overflow: hidden; }
.card:hover { transform: translateY(-6px); background: rgba(255,255,255,.06); border-color: rgba(var(--primary-rgb), .4); box-shadow: 0 20px 40px rgba(0,0,0,.3); }
.card-icon { font-size: 2.2rem; margin-bottom: 18px; }
.card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.card p { font-size: .92rem; color: var(--text-muted); }
.card-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary), var(--secondary)); border-radius: 3px 0 0 3px; }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), .15); color: var(--accent); margin-bottom: 14px; letter-spacing: .5px; }
.dept-card { cursor: pointer; }
.dept-card:hover { transform: translateY(-6px); border-color: rgba(var(--primary-rgb), .6); }

/* ===== 画廊 ===== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.gallery-item { border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 16 / 9; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }

/* ===== 加入区域 ===== */
.join-box { background: linear-gradient(135deg, rgba(var(--primary-rgb), .12), rgba(var(--secondary-rgb), .08)); border: 1px solid rgba(var(--primary-rgb), .25); border-radius: 28px; padding: 64px 32px; text-align: center; }
.join-actions, .social-matrix { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.btn-qq { background: linear-gradient(135deg, #12b7f5, #0099ff); color: #08243a; box-shadow: 0 8px 30px rgba(18,183,245,.4); }
.btn-qq:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(18,183,245,.5); }
.btn-bilibili { background: linear-gradient(135deg, #fb7299, #ff9db5); color: #3a1f2b; box-shadow: 0 8px 30px rgba(251,114,153,.4); }
.btn-bilibili:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(251,114,153,.5); }
.join-note { margin-top: 24px; font-size: .85rem; color: var(--text-dim); }

/* ===== 按钮 ===== */
.btn { display: inline-block; padding: 14px 32px; border-radius: 999px; font-weight: 700; font-size: .95rem; transition: all .3s; cursor: pointer; border: none; }
.btn-primary { background: linear-gradient(135deg, var(--btn-grad-from), var(--btn-grad-to)); color: var(--on-primary); box-shadow: 0 8px 30px rgba(var(--primary-rgb), .45); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(var(--secondary-rgb), .55); }
.btn-ghost { background: rgba(255,255,255,.05); color: var(--text-main); border: 1px solid rgba(255,255,255,.15); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.btn-block { width: 100%; padding: 16px; font-size: 1rem; }

/* ===== Hero ===== */
.hero { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 100px 24px 60px; }
.hero-inner { max-width: 800px; }
.hero-badge { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(var(--primary-rgb), .15); border: 1px solid rgba(var(--primary-rgb), .4); font-size: .85rem; color: var(--primary-light); margin-bottom: 24px; letter-spacing: .5px; }
.hero-title { font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 900; letter-spacing: 2px; margin-bottom: 20px; }
.hero-sub { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 36px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.hero-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.stat { text-align: center; }
.stat strong { display: block; font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { font-size: .85rem; color: var(--text-dim); }

/* ===== 模态框 ===== */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; }
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-card { background: var(--modal-bg); border: 1px solid rgba(var(--primary-rgb), .3); border-radius: 24px; padding: 40px; width: 90%; max-width: 420px; position: relative; transform: translateY(20px) scale(.95); transition: all .3s cubic-bezier(.22,.61,.36,1); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal-overlay.active .modal-card { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-dim); font-size: 1.2rem; cursor: pointer; transition: color .2s; z-index: 10; }
.modal-close:hover { color: #fff; }
.modal-header { text-align: center; margin-bottom: 28px; }
.modal-header h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.modal-subtitle { font-size: .85rem; color: var(--text-dim); }
.input-group { margin-bottom: 20px; text-align: left; }
.input-group label { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }
.input-group input, .input-group select { width: 100%; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 1rem; outline: none; transition: border .2s; font-family: inherit; }
.input-group input:focus, .input-group select:focus { border-color: var(--primary); }
.input-group select option { background: var(--modal-bg); color: #fff; }
.modal-footer { text-align: center; margin-top: 24px; font-size: .85rem; color: var(--text-dim); }
.modal-footer a { color: var(--primary); font-weight: 700; margin-left: 6px; }
.modal-footer a:hover { text-decoration: underline; }

#deptModal .modal-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
#deptModal ul { margin-left: 20px; margin-top: 8px; }
#deptModal li { margin-bottom: 6px; list-style: disc; }

/* ===== 页脚 ===== */
.footer { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.06); padding: 32px 24px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; }
.footer-copy { font-size: .85rem; color: var(--text-dim); }

/* ===== 滚动动画 ===== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.show { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== 灯箱 ===== */
.lightbox-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.9); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; }
.lightbox-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox-overlay img { max-width: 90%; max-height: 85%; border-radius: 12px; box-shadow: 0 10px 40px rgba(var(--primary-rgb), .4); transform: scale(0.9); transition: transform .3s; }
.lightbox-overlay.active img { transform: scale(1); }
.lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; transition: transform .2s; }
.lightbox-close:hover { transform: rotate(90deg); color: var(--primary); }

/* ===== 留言板 ===== */
.giscus-container { background: rgba(255,255,255,.03); border: 1px solid rgba(var(--primary-rgb), .2); border-radius: 20px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.3); min-height: 250px; }
.giscus-container iframe { border-radius: 12px !important; }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; background: rgba(var(--bg-rgb), .96); backdrop-filter: blur(16px); flex-direction: column; padding: 24px; gap: 20px; transform: translateY(-120%); transition: transform .35s; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-links.open { transform: translateY(0); }
  .hero-stats { gap: 28px; }
  .join-box { padding: 48px 20px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .nav-auth { margin-left: auto; margin-right: 12px; gap: 6px; }
  .user-name { max-width: 60px; }
  .nav-links { top: 60px; max-height: calc(100dvh - 60px); overflow-y: auto; }
  .hero { min-height: 92svh; padding-top: 88px; }
  .hero-title { font-size: clamp(2.45rem, 15vw, 4rem); }
  .hero-sub { font-size: 1rem; }
  .section { padding: 76px 18px; }
  .modal-card { padding: 32px 22px; max-height: 88svh; overflow-y: auto; }
}

@media (max-width: 768px) {
  .theme-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); z-index: 300; border: none; border-top: 1px solid rgba(var(--primary-rgb), .3); }
  .theme-panel.open { transform: translateY(0); }
  .theme-option { padding: 14px 16px; font-size: 1rem; margin-bottom: 8px; }
  .theme-panel-title { text-align: center; margin-bottom: 16px; font-size: 0.85rem; }
  .theme-toggle { width: 36px; height: 36px; font-size: 0.95rem; }
}

/* ===== 无障碍 ===== */
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 1000; transform: translateY(-160%); padding: 10px 14px; border-radius: 10px; background: var(--modal-bg); color: var(--text-main); border: 1px solid var(--primary); }
.skip-link:focus { transform: translateY(0); }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-item { padding: 0; border: 1px solid rgba(255,255,255,.1); cursor: pointer; color: inherit; font: inherit; }
.gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ===== 活动中心 ===== */
.activity-toolbar, .gallery-toolbar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:28px 0 32px; }
.filter-btn { border:1px solid rgba(var(--primary-rgb),.25); background:rgba(255,255,255,.03); color:var(--text-muted); padding:9px 16px; border-radius:999px; cursor:pointer; transition:.2s; }
.filter-btn:hover, .filter-btn.active { color:var(--text-main); border-color:var(--primary); background:rgba(var(--primary-rgb),.14); }
.activity-list { max-width:900px; margin:0 auto; position:relative; }
.activity-list::before { content:""; position:absolute; left:76px; top:18px; bottom:18px; width:2px; background:linear-gradient(var(--primary), transparent); opacity:.5; }
.activity-item { display:grid; grid-template-columns:76px 44px 1fr; gap:18px; align-items:start; padding:18px 0; }
.activity-date { text-align:right; color:var(--text-dim); padding-top:4px; }
.activity-date strong { display:block; color:var(--text-main); font-size:1.1rem; }
.activity-date span { font-size:.75rem; }
.activity-dot { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--modal-bg); border:1px solid rgba(var(--primary-rgb),.45); z-index:1; }
.activity-body { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:18px 20px; transition:.25s; }
.activity-body:hover { transform:translateY(-3px); border-color:rgba(var(--primary-rgb),.3); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.activity-meta { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.status { font-size:.72rem; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:var(--text-muted); }
.status-进行中 { color:#7fffd4; border-color:rgba(127,255,212,.35); }
.status-计划中 { color:var(--primary-light); border-color:rgba(var(--primary-rgb),.35); }
.status-已结束 { color:var(--text-dim); }
.activity-body h3 { margin-bottom:5px; }
.activity-body p { color:var(--text-muted); font-size:.92rem; }
.gallery-item { position:relative; overflow:hidden; border-radius:16px; background:var(--modal-bg); }
/* <picture> 只是候选源容器，本身不参与布局；必须显式撑满，
   否则 <img> 的 height:100% 会失去可解析的父高度 */
.gallery-item picture { display:block; width:100%; height:100%; }
.gallery-item img { transition:transform .45s ease; width:100%; height:100%; object-fit:cover; }
.gallery-item span { position:absolute; left:0; right:0; bottom:0; padding:12px 14px; background:linear-gradient(transparent,rgba(0,0,0,.85)); color:#fff; text-align:left; font-size:.85rem; }
.gallery-item:hover img { transform:scale(1.06); }
.empty-state { text-align:center; color:var(--text-dim); padding:30px; border:1px dashed rgba(255,255,255,.1); border-radius:16px; }
.tool-card { display:flex; flex-direction:column; align-items:flex-start; }
.tool-card p { flex:1; margin-bottom:18px; }
.tool-card .btn { align-self:stretch; }
.scroll-progress { position:fixed; left:0; top:0; height:3px; width:100%; z-index:1001; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--primary),var(--accent)); pointer-events:none; }
.back-top { position:fixed; right:22px; bottom:24px; z-index:90; width:44px; height:44px; border:1px solid rgba(var(--primary-rgb),.35); border-radius:50%; background:rgba(var(--modal-bg),.9); color:var(--text-main); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(15px); pointer-events:none; transition:opacity .25s, visibility .25s, transform .25s, color .2s, border-color .2s; backdrop-filter:blur(10px); }
.back-top.show { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.back-top:hover { color:var(--primary); border-color:var(--primary); }
@media (max-width:768px) {
  .activity-list::before { left:21px; }
  .activity-item { grid-template-columns:44px 1fr; gap:12px; }
  .activity-date { grid-column:2; grid-row:1; text-align:left; position:absolute; margin-left:56px; margin-top:3px; display:flex; gap:6px; }
  .activity-dot { grid-column:1; grid-row:1 / span 2; }
  .activity-body { grid-column:2; grid-row:2; margin-top:4px; }
  .back-top { right:16px; bottom:18px; }
}

/* 网站贡献者 */
.developer-btn{white-space:nowrap;}
.developer-card{max-width:760px;}
.developer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;}
.developer-role{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid rgba(var(--primary-rgb),.22);border-radius:16px;background:rgba(255,255,255,.035);}
.developer-avatar{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:12px;background:rgba(var(--primary-rgb),.12);font-size:1.35rem;}
.developer-role span{font-size:.78rem;color:var(--primary);font-weight:700;}
.developer-role h3{margin:4px 0 5px;font-size:1rem;color:var(--text-main);}
.developer-role p{margin:0;color:var(--text-dim);font-size:.78rem;line-height:1.55;}
.developer-note{margin:22px 0 0;text-align:center;color:var(--text-dim);font-size:.78rem;}
@media (max-width:900px){
  .developer-grid{grid-template-columns:1fr;}
  .developer-btn{ padding: 8px 10px; font-size: 0; }
  .developer-btn::before{ content: '🛠️'; font-size: 1rem; }
}
@media (min-width:901px) and (max-width:1100px){.developer-btn{font-size:.78rem;padding:8px 10px;}}

/* ===== 隐藏式网站开发者中心 ===== */
.version-link{border:0;background:none;color:var(--text-dim);font:inherit;font-size:.78rem;cursor:pointer;padding:0 3px;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;transition:.2s}
.version-link:hover{color:var(--primary)}
.footer-dot{opacity:.5;margin:0 4px}
.dev-center-card{max-width:900px;max-height:min(88vh,900px);overflow:auto}
.dev-center-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.dev-panel{padding:18px;border:1px solid rgba(var(--primary-rgb),.2);border-radius:16px;background:rgba(255,255,255,.035)}
.dev-panel-wide{grid-column:1/-1}
.dev-panel-title{font-weight:800;color:var(--text-main);margin-bottom:12px}
.dev-panel p{margin:0 0 12px;color:var(--text-dim);font-size:.85rem;line-height:1.7}
.tech-tags{display:flex;flex-wrap:wrap;gap:8px}
.tech-tags span{padding:7px 10px;border-radius:999px;background:rgba(var(--primary-rgb),.1);border:1px solid rgba(var(--primary-rgb),.18);font-size:.78rem;color:var(--text-main)}
.changelog{display:grid;gap:12px}
.changelog-item{display:grid;grid-template-columns:90px 1fr;gap:10px;line-height:1.6;font-size:.8rem}
.changelog-item strong{color:var(--primary)}
.changelog-item span{color:var(--text-dim)}
.status-list{display:grid;gap:9px}
.status-list div,.debug-output div{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025)}
.status-list span,.debug-output span{color:var(--text-dim);font-size:.8rem}
.status-list strong{font-size:.78rem;color:var(--primary);text-align:right}
.dev-link{display:inline-flex}
.easter-panel p{margin-bottom:6px}
kbd{padding:3px 7px;border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;border-radius:6px;background:rgba(0,0,0,.25);color:var(--text-main);font-size:.78rem}
.dev-hint{font-size:.75rem!important;opacity:.7}
.debug-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.debug-output{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.debug-output code{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--primary);font-size:.72rem;text-align:right}
@media (max-width:900px){.dev-center-grid{grid-template-columns:1fr}.dev-panel-wide{grid-column:auto}.debug-output{grid-template-columns:1fr}.dev-center-card{max-height:82vh}}
@media (max-width:600px){.version-link{font-size:.72rem}.changelog-item{grid-template-columns:1fr;gap:2px}.dev-center-card{padding:20px 16px}.debug-toolbar .btn{width:100%}}

/* 修复手机端活动时间轴定位 */
@media (max-width: 768px) {
  .activity-item {
    position: relative;
  }
}

/* ===================================================================
   📱 手机端首屏舒适度优化
   =================================================================== */
@media (max-width: 768px) {
  .hero { min-height: auto; padding: 96px 18px 48px; align-items: flex-start; }
  .hero-badge { padding: 5px 12px; font-size: 0.72rem; margin-bottom: 16px; letter-spacing: 0.3px; }
  .hero-title { font-size: clamp(2.2rem, 11vw, 3rem); letter-spacing: 1px; margin-bottom: 14px; line-height: 1.15; }
  .hero-sub { font-size: 0.9rem; line-height: 1.7; margin-bottom: 24px; padding: 0 6px; }
  .hero-actions { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 32px; }
  .hero-actions .btn { width: 100%; max-width: 260px; padding: 13px 24px; font-size: 0.92rem; }
  .hero-stats { gap: 22px; padding-top: 4px; }
  .stat strong { font-size: 1.5rem; letter-spacing: 0.5px; }
  .stat span { font-size: 0.72rem; margin-top: 2px; display: inline-block; }
  .nav-inner { padding: 12px 16px; }
  .logo { font-size: 1.05rem; gap: 8px; }
  .logo-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 0.9rem; }
  .logo-text em { font-size: 1.05rem; }
  .nav-auth { gap: 6px; margin-right: 4px; }
  .nav-auth .btn-sm { padding: 7px 12px; font-size: 0.78rem; }
  .theme-toggle { width: 32px; height: 32px; font-size: 0.9rem; }
  .section-title { font-size: clamp(1.5rem, 6vw, 1.9rem); margin-bottom: 12px; }
  .section-desc { font-size: 0.88rem; margin-bottom: 36px; padding: 0 6px; }
  .card { padding: 24px 20px; border-radius: 16px; }
  .card-icon { font-size: 1.8rem; margin-bottom: 12px; }
  .card h3 { font-size: 1.05rem; margin-bottom: 8px; }
  .card p { font-size: 0.86rem; line-height: 1.65; }
}

/* ===================================================================
   🎵 音乐侧边栏（简洁稳定版）
   =================================================================== */
.music-side {
  --ms-drawer-w: 280px;
  --ms-tab-w: 46px;
  position: fixed;
  right: 0;
  top: 50%;
  display: flex;
  align-items: stretch;
  z-index: 110;
  transform: translateY(-50%) translateX(var(--ms-drawer-w));
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.music-side.open {
  transform: translateY(-50%) translateX(0);
}
.music-side > * { pointer-events: auto; }

.ms-tab {
  width: var(--ms-tab-w);
  height: var(--ms-tab-w);
  align-self: center;
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  border-right: none;
  border-radius: 50% 0 0 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  cursor: pointer;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
  padding: 0;
}
.ms-tab:hover { filter: brightness(1.1); }
.ms-tab-icon { display: block; line-height: 1; }

.ms-drawer {
  width: var(--ms-drawer-w);
  padding: 16px;
  background: var(--modal-bg);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-right: none;
  border-radius: 18px 0 0 18px;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.5);
  color: var(--text-main);
}

.ms-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
}
.ms-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1;
}
.ms-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

.ms-cover {
  width: 100%;
  aspect-ratio: 1;
  max-width: 180px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.22), rgba(var(--secondary-rgb), 0.3));
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  display: grid;
  place-items: center;
  font-size: 2.6rem;
}

.ms-meta { text-align: center; margin-bottom: 12px; }
.ms-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-artist { font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; }

.ms-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.68rem;
  color: var(--text-dim);
}
.ms-seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
}
.ms-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
}
.ms-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
}

.ms-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.ms-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-main);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  padding: 0;
}
.ms-btn:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.4);
}
.ms-play {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  color: #fff;
  font-size: 1rem;
}
.music-side.playing .ms-tab-icon { color: var(--accent); }

@media (max-width: 768px) {
  .music-side {
    --ms-drawer-w: 250px;
    --ms-tab-w: 40px;
  }
  .ms-cover { max-width: 150px; font-size: 2.2rem; }
                  }

/* ===================================================================
   🔍 页面缩放控件
   =================================================================== */
.zoom-controls {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 109;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--modal-bg);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  user-select: none;
  /* 原先常驻 0.5 透明度，把 0.72rem 的百分比文字压到约 2.8:1 对比度。
     改为默认 0.75，悬停/键盘聚焦时完全不透明。 */
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.zoom-controls:hover,
.zoom-controls:focus-within {
  opacity: 1;
}

.zoom-controls button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.zoom-controls button:hover {
  background: rgba(var(--primary-rgb), 0.22);
  color: var(--primary-light);
}
.zoom-controls button:active {
  transform: scale(0.92);
}
.zoom-controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.zoom-value {
  min-width: 44px;
  padding: 0 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .zoom-controls {
    left: 16px;
    bottom: 16px;
  }
  .zoom-controls button {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

/* ===================================================================
   🌊 Lenis 平滑滚动（仅 Lenis 成功启用时才会生效；不启用时这三行无任何影响）
   =================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===================================================================
   🚨 暴走模式彩蛋（连点 Logo 5 次触发；整段删除即可完全回滚）
   =================================================================== */
.logo { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

#berserkFx {
  position: fixed; inset: 0; z-index: 950; pointer-events: none;
  display: none; overflow: hidden; opacity: 1; transition: opacity .45s ease;
}
#berserkFx.on { display: block; }
#berserkFx.out { opacity: 0; }

/* 红色警报洗屏 + 视口红色内发光 */
.bzk-tint {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,0,51,.10) 0%, rgba(255,0,51,.30) 100%);
}
#berserkFx.on .bzk-tint { animation: bzkPulse .55s ease-in-out 5; }
.bzk-frame {
  position: absolute; inset: 0; opacity: 0;
  box-shadow: inset 0 0 140px rgba(255,0,51,.55), inset 0 0 36px rgba(255,0,51,.38);
}
#berserkFx.on .bzk-frame { animation: bzkPulse .55s ease-in-out 5; }
@keyframes bzkPulse { 0%, 100% { opacity: .12; } 50% { opacity: .85; } }

/* 扫过屏幕的光带 */
.bzk-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 96px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.13), transparent);
}
#berserkFx.on .bzk-scan { animation: bzkScan 1.05s linear 3; }
@keyframes bzkScan { 0% { transform: translateY(-120px); opacity: 1; } 100% { transform: translateY(105vh); opacity: 1; } }

/* 上下危险条纹带（红黑斜纹，固定红色不受主题影响） */
.bzk-bar {
  position: absolute; left: -20%; right: -20%; height: 54px;
  background: repeating-linear-gradient(45deg, #0d0d12 0 22px, #ff0033 22px 44px);
  box-shadow: 0 0 30px rgba(255,0,51,.55);
}
.bzk-bar.top { top: 12%; transform: translateX(-110%); }
.bzk-bar.bottom { bottom: 12%; transform: translateX(110%); }
#berserkFx.on .bzk-bar.top { animation: bzkSlide .45s cubic-bezier(.2,.8,.2,1) forwards; }
#berserkFx.on .bzk-bar.bottom { animation: bzkSlide .45s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bzkSlide { to { transform: translateX(0); } }

/* 中央警告文字（带 RGB 撕裂抖动） */
.bzk-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 0 16px; }
.bzk-kicker { font-size: .8rem; letter-spacing: 8px; color: #ff4d6d; margin-bottom: 10px; text-shadow: 0 0 12px rgba(255,0,51,.85); }
.bzk-main {
  font-size: clamp(2rem, 7vw, 4.2rem); font-weight: 900; letter-spacing: 6px; color: #fff;
  text-shadow: 3px 0 rgba(0,229,255,.85), -3px 0 rgba(255,0,51,.9), 0 0 34px rgba(255,0,51,.75);
  animation: bzkGlitch .22s steps(2, end) infinite;
}
.bzk-sub { margin-top: 14px; font-size: clamp(.85rem, 2.6vw, 1.05rem); color: #ffd9e0; letter-spacing: 2px; }
.bzk-sub b { color: #fff; }
@keyframes bzkGlitch {
  0% { transform: translate(0, 0) skewX(0); }
  25% { transform: translate(-3px, 2px) skewX(-2deg); }
  50% { transform: translate(3px, -2px) skewX(2deg); }
  75% { transform: translate(-2px, -2px) skewX(-1deg); }
  100% { transform: translate(2px, 2px) skewX(1deg); }
}

/* 页面震动 + 标题撕裂 */
#main-content.berserk-shake { animation: bzkShake .13s linear 10; will-change: transform; }
.nav-inner.berserk-shake { animation: bzkShake .13s linear 10; will-change: transform; }
@keyframes bzkShake {
  0% { transform: translate(-5px, 2px); }
  25% { transform: translate(5px, -3px); }
  50% { transform: translate(-4px, -2px); }
  75% { transform: translate(4px, 3px); }
  100% { transform: translate(0, 0); }
}
.hero-title.berserk-title { animation: bzkTitleJit .22s steps(2, end) 9; }
@keyframes bzkTitleJit {
  0% { transform: translate(-4px, 1px) skewX(-3deg); }
  50% { transform: translate(4px, -1px) skewX(3deg); }
  100% { transform: translate(0, 0) skewX(0); }
}

/* 粒子集体“转红”（用滤镜给画布上色，不改粒子系统本身） */
#particles { transition: filter .35s ease; }
html.berserk-mode #particles { filter: sepia(1) saturate(7) hue-rotate(-38deg) brightness(1.15); }

@media (max-width: 768px) {
  .bzk-bar { height: 40px; }
  .bzk-kicker { letter-spacing: 5px; font-size: .68rem; }
  .bzk-main { letter-spacing: 3px; }
}

/* ===================================================================
   ⚡ 启动序列 · 技术档案版（黑幕 → 过曝洗白 → 暖白底板 → 五步授权 → 色散故障揭幕）
   风格参考 Hypergryph 式开机序列；整段连 main.js 第 25 节一起删除即可完全回滚。
   改主色只需改下面的 --acgb-accent。
   =================================================================== */
#acgBoot {
  /* —— 配色：暖白技术档案（浅色阶段） —— */
  --acgb-accent: #ff0033;          /* 强调色（本站主题红；想更接近参考可改 #ff7500） */
  --acgb-bg: #e5e3df;
  --acgb-ink: #0a0a0a;
  --acgb-ink-soft: #3a3936;
  --acgb-muted: #7a7873;
  --acgb-hair: rgba(10, 10, 10, .16);
  --acgb-hair-soft: rgba(10, 10, 10, .07);
  --acgb-glitch-a: #ff3b30;
  --acgb-glitch-b: #2971b8;
  --acgb-box-bg: #0a0a0a;
  --acgb-box-ink: #f2f1ee;

  /* 字体全部取系统自带，零网络依赖、启动不抖动 */
  --acgb-din: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Archivo", "Oswald",
    "Arial Narrow", "Liberation Sans Narrow", "Ubuntu Condensed", "Roboto Condensed",
    "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --acgb-mono: "Cascadia Mono", "SFMono-Regular", "Consolas", "Menlo", "DejaVu Sans Mono",
    "Liberation Mono", "Noto Sans Mono", ui-monospace, monospace;
  --acgb-zh: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "HarmonyOS Sans SC",
    "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;

  position: fixed; inset: 0; z-index: 1200;
  overflow: hidden; background: #000; color: var(--acgb-ink);
  font-family: var(--acgb-din);
  cursor: default; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  contain: layout paint style;
}
#acgBoot.acgb-out { opacity: 0; transition: opacity .45s ease; }
html.acg-boot-lock, html.acg-boot-lock body { overflow: hidden !important; }

/* —— 幕 1：黑幕标识 —— */
.acgb-scene { position: absolute; inset: 0; }
.acgb-s1 { display: flex; align-items: center; justify-content: center; background: #000; }
.acgb-s1-logo {
  display: flex; align-items: center; gap: 16px;
  color: #f4f3f0; opacity: 0; transform: translateY(10px);
  animation: acgbLogoIn .75s cubic-bezier(.2, .7, .3, 1) .18s forwards;
}
.acgb-s1-mark {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--acgb-accent); color: #fff;
  font-family: var(--acgb-zh); font-size: 1.6rem; font-weight: 900;
}
.acgb-s1-text {
  font-size: clamp(.95rem, 2.6vw, 1.15rem); font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase;
}
@keyframes acgbLogoIn { to { opacity: 1; transform: none; } }

/* —— 幕 2：过曝洗白 —— */
.acgb-s2 { background: #fff; opacity: 0; pointer-events: none; }
.acgb-s2.on { animation: acgbFlash 1s ease-out forwards; }
@keyframes acgbFlash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 1; }
}

/* —— 幕 3：暖白「技术档案」底板 —— */
.acgb-s3 { background: var(--v9-bg, #f7f4ec); }
/* 极淡的方格网，给底板一点"档案纸"的质感 */
.acgb-s3::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, var(--acgb-hair-soft) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--acgb-hair-soft) 0 1px, transparent 1px 64px);
}

/* 四角定位角标 */
.acgb-corners { position: absolute; inset: 0; pointer-events: none; }
.acgb-c {
  position: absolute; width: 26px; height: 26px;
  border: 1px solid var(--acgb-hair);
}
.acgb-c.tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.acgb-c.tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.acgb-c.bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.acgb-c.br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }

/* 左上品牌块：三行窄体大字，第三行带强调色 */
.acgb-brand {
  position: absolute; top: clamp(46px, 9vh, 84px); left: clamp(30px, 5vw, 68px);
  opacity: 0; transform: translateY(10px);
  animation: acgbRise .7s cubic-bezier(.2, .7, .3, 1) .1s forwards;
}
.acgb-brand-line {
  font-size: clamp(1.5rem, 4.6vw, 2.6rem);
  font-weight: 800; line-height: 1.12; letter-spacing: .01em;
  text-transform: uppercase;
}
.acgb-brand-line.accent { color: var(--acgb-accent); }

/* 品牌块下方的版本行 + 一段短横线 */
/* 注意：位置不再硬编码，改为跟着品牌块自然排版——品牌块三行字号是 clamp 的，
   硬编码 top 在小屏必然重叠（这是早先版本踩过的坑） */
.acgb-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(10px, 2vh, 18px);
  font-family: var(--acgb-mono);
  font-size: clamp(.58rem, 1.5vw, .72rem);
  letter-spacing: .22em; color: var(--acgb-muted); text-transform: uppercase;
  opacity: 0; animation: acgbRise .7s ease .5s forwards;
}
.acgb-meta b { color: var(--acgb-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.acgb-meta-rule { width: clamp(40px, 7vw, 76px); height: 1px; background: var(--acgb-hair); }

/* 底部左右两处状态 */
.acgb-steps, .acgb-foot {
  position: absolute; bottom: clamp(26px, 5vh, 48px);
  font-family: var(--acgb-mono);
  font-size: clamp(.58rem, 1.5vw, .72rem);
  letter-spacing: .22em; color: var(--acgb-muted); text-transform: uppercase;
  opacity: 0; animation: acgbRise .7s ease .6s forwards;
}
.acgb-steps { left: clamp(30px, 5vw, 68px); }
.acgb-steps b { color: var(--acgb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.acgb-foot { right: clamp(30px, 5vw, 68px); }
.acgb-foot-sq {
  display: inline-block; width: 26px; height: 10px;
  background: var(--acgb-ink); margin-left: 8px; vertical-align: -1px;
}
@keyframes acgbRise { to { opacity: 1; transform: none; } }

/* 舞台中央：环形准星 + 状态行 */
.acgb-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 26px;   /* 视觉重心略高于几何中心 */
}
/* 准星与文字块同心叠放：环在文字外侧，不把文字推下去 */
.acgb-cross { --acgb-ring: clamp(260px, 34vw, 360px); position: relative; width: var(--acgb-ring); aspect-ratio: 1; flex: none; }
.acgb-copy {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* 宽度给足：不跟环宽绑定。副标题保持单行居中，最长的那条也能完整显示；
     中文主字本来就短，居中后仍在环内。 */
  width: max(320px, calc(var(--acgb-ring) * 1.15));
}
.acgb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--acgb-hair);
  /* 缺口留在正下方，转起来时不会挡住底部文字 */
  mask-image: conic-gradient(from 0deg, #000 0deg 300deg, transparent 300deg 360deg);
  -webkit-mask-image: conic-gradient(from 0deg, #000 0deg 300deg, transparent 300deg 360deg);
  animation: acgbSpin 14s linear infinite;
}
.acgb-ring--in {
  inset: 13%;
  border-color: var(--acgb-accent); opacity: .55;
  animation-duration: 9s; animation-direction: reverse;
}
.acgb-ring--mid { inset: 6%; }
@keyframes acgbSpin { to { transform: rotate(360deg); } }
.acgb-cross-dot {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--acgb-ink);
}
.acgb-cross-plus {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 1px; background: var(--acgb-hair); transform: translate(-50%, -50%);
}
.acgb-cross-plus.v { width: 1px; height: 22px; }

/* 逐字渐显：用不透明度而非截断，居中排版不会左右抖动 */
.acgb-sub, .acgb-status { text-align: center; }
.acgb-sub {
  font-family: var(--acgb-mono);
  /* 字号按"最长副标题一行放得下"定：26 字符 × ~0.62em + 字距 ≈ 环宽的 0.9 倍 */
  font-size: clamp(.5rem, 1.15vw, .6rem);
  letter-spacing: clamp(.04em, .28vw, .12em);
  color: var(--acgb-ink-soft); text-transform: uppercase;
  margin-bottom: 10px; min-height: 1.3em;
  white-space: nowrap;   /* 单行：这一档字号下最长的副标题也能完整放下 */
}
.acgb-status {
  font-family: var(--acgb-zh);
  font-size: clamp(.86rem, 2.4vw, 1.05rem);
  letter-spacing: .16em; color: var(--acgb-ink); font-weight: 600;
}
/* 逐字渐显的单元。注意必须显式写 white-space:pre：
   字符被包进 inline-block 的 span 后，HTML 里的空格会被折叠掉，
   英文副标题会粘成一整串（这是实现逐字动画时最容易踩的坑）。 */
.acgb-ch { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.16em); }
.acgb-sub.on .acgb-ch { animation: acgbCh .34s ease forwards; }
.acgb-status.on .acgb-ch { animation: acgbCh .34s ease forwards; }
@keyframes acgbCh { to { opacity: 1; transform: none; } }

/* 需要人工确认时的提示与按钮 */
.acgb-ask { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.acgb-ask[hidden] { display: none !important; }
.acgb-ask-hint {
  font-family: var(--acgb-mono); font-size: .66rem; letter-spacing: .2em;
  color: var(--acgb-muted); text-transform: uppercase;
}
.acgb-ask-btn {
  font-family: var(--acgb-zh); font-size: .84rem; letter-spacing: .16em;
  padding: 11px 30px; cursor: pointer;
  background: var(--acgb-ink); color: var(--acgb-box-ink);
  border: 1px solid var(--acgb-ink);
  transition: background .2s ease, color .2s ease;
}
.acgb-ask-btn:hover { background: var(--acgb-accent); border-color: var(--acgb-accent); color: #fff; }
.acgb-ask-btn:focus-visible { outline: 2px solid var(--acgb-accent); outline-offset: 3px; }

/* 右上角跳过 */
.acgb-skip {
  position: absolute; top: clamp(18px, 3.5vh, 30px); right: clamp(18px, 3vw, 30px);
  font-family: var(--acgb-mono); font-size: .64rem; letter-spacing: .24em;
  padding: 8px 14px; cursor: pointer; text-transform: uppercase;
  background: transparent; color: var(--acgb-muted);
  border: 1px solid var(--acgb-hair);
  transition: color .2s ease, border-color .2s ease;
}
.acgb-skip:hover { color: var(--acgb-ink); border-color: var(--acgb-ink); }
.acgb-skip:focus-visible { outline: 2px solid var(--acgb-accent); outline-offset: 2px; }

/* 底边进度条 */
.acgb-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--acgb-hair-soft);
}
.acgb-progress i {
  display: block; height: 100%; width: 0;
  background: var(--acgb-accent);
  transition: width .55s cubic-bezier(.3, .7, .3, 1);
}

/* —— 幕 4：色散故障揭幕 —— */
.acgb-glitch { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.acgb-glitch.on { animation: acgbGlitch .62s steps(2, end) forwards; }
@keyframes acgbGlitch {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: .9; transform: translate(-7px, 2px); }
  22%  { opacity: .7; transform: translate(6px, -3px); }
  36%  { opacity: .85; transform: translate(-4px, 0); }
  52%  { opacity: .5; transform: translate(3px, 2px); }
  70%  { opacity: .6; transform: translate(-2px, -1px); }
  100% { opacity: 0; transform: translate(0, 0); }
}
.acgb-gbar { position: absolute; left: 0; right: 0; height: 3px; mix-blend-mode: multiply; }
.acgb-gbar.a { background: var(--acgb-glitch-a); }
.acgb-gbar.b { background: var(--acgb-glitch-b); }

/* 终幕：黑底白字方框 */
.acgb-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96);
  padding: clamp(18px, 4vw, 30px) clamp(26px, 7vw, 54px);
  background: var(--acgb-box-bg); color: var(--acgb-box-ink);
  font-family: var(--acgb-mono);
  font-size: clamp(.74rem, 2.4vw, 1rem); letter-spacing: .3em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
.acgb-box.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 减少动态效果：不播开屏（main.js 已提前退出），这里再兜一层 */
@media (prefers-reduced-motion: reduce) {
  .acgb-ring, .acgb-ring--in { animation: none; }
}

/* 窄屏：品牌块缩一档，避免和中央准星挤在一起 */
@media (max-width: 560px) {
  .acgb-brand-line { font-size: 1.35rem; }
  .acgb-meta { position: static; margin-top: 12px; }
  .acgb-foot { display: none; }
  .acgb-cross { --acgb-ring: min(80vw, 300px); }
}

/* ===================================================================
   📊 电台频谱（放歌时音乐侧边栏出现的频谱条；整段删除即可完全回滚）
   =================================================================== */
.ms-spectrum {
  display: block; width: 100%; height: 34px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(var(--primary-rgb), .16);
}
.ms-spectrum.off { display: none; }
@media (max-width: 768px) {
  .ms-spectrum { height: 28px; margin-bottom: 10px; }
}

/* ===================================================================
   🎨 视觉方案 v0.8 · 暗夜画廊 × 技术档案（A 80% + B 20%）
   -------------------------------------------------------------------
   这是追加在文件末尾的覆盖层，不动前面的启动动画与频谱模块。
   融合原则：
     · A（80%）—— 深色实底、全出血插画、卡片描边、画廊拼贴、交错节奏
     · B（20%）—— 暖白细线、四角定位角标、等宽字距标签、区段编号、档案条目
   想整体回滚：删掉本段即可（末尾有明确标记）。
   =================================================================== */
:root {
  /* 深色层（A 的骨架） */
  --v8-bg: #0d0d15;
  --v8-bg-elev: #14141d;
  --v8-card: #1a1a25;
  --v8-card-hover: #1f1f2c;
  --v8-line: rgba(255, 255, 255, .10);
  --v8-line-strong: rgba(255, 255, 255, .18);

  /* 暖白层（B 的档案感） */
  --v8-paper: #e5e3df;
  --v8-paper-ink: #0a0a0a;
  --v8-paper-ink-2: #3a3936;
  --v8-paper-line: rgba(10, 10, 10, .16);
  --v8-paper-line-soft: rgba(10, 10, 10, .08);

  /* 排版 */
  --v8-zh: "Microsoft YaHei", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --v8-din: "Bahnschrift", "DIN Alternate", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --v8-mono: "Cascadia Mono", "SFMono-Regular", Consolas, Menlo, ui-monospace, monospace;

  /* 节奏 */
  --v8-sec-y: clamp(66px, 8.5vw, 118px);
  --v8-ease: cubic-bezier(.22, .61, .36, 1);
  --v8-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ===================================================================
   1 · 背景层：去掉糊在各处的插画与光斑，只留一层极淡网格
   =================================================================== */
.bg-image { display: none !important; }          /* 人像不再全站透出（A 的核心修正） */
.glow { display: none !important; }              /* 三个 blur 光斑：掉帧源，去掉 */
#particles { opacity: .35 !important; }          /* 粒子降权，不抢内容 */
.bg-grid {
  opacity: .5 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 72px) !important;
  background-size: auto !important;
}
body { background: var(--v8-bg); }

/* ===================================================================
   2 · 导航栏：实底 + 细线，菜单带"档案编号"式等宽标签
   =================================================================== */
.nav {
  background: rgba(13, 13, 21, .88) !important;
  border-bottom: 1px solid var(--v8-line) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav.scrolled { background: rgba(13, 13, 21, .97) !important; border-bottom-color: var(--v8-line-strong) !important; }
.nav-links a {
  position: relative; letter-spacing: .02em;
  color: var(--text-muted); transition: color .2s var(--v8-ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--primary); transition: right .28s var(--v8-ease);
}
.nav-links a:hover { color: var(--text-main); }
.nav-links a:hover::after { right: 0; }

/* ===================================================================
   3 · Hero：全出血插画 + 暗渐变，文字左对齐（A 的主视觉）
   =================================================================== */
.hero {
  min-height: 92vh; align-items: center; justify-content: flex-start;
  padding: clamp(96px, 13vh, 150px) 0 clamp(56px, 8vh, 92px);
  position: relative; isolation: isolate; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -3%; z-index: -2;
  background: url('assets/images/bg.jpg') center 32% / cover no-repeat;
  /* 聚焦手法：入场时从模糊到清晰（参考站的招牌） */
  animation: v8Focus 1.5s var(--v8-ease-out) both;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(9,9,15,.96) 0%, rgba(9,9,15,.80) 40%, rgba(9,9,15,.34) 100%),
    linear-gradient(0deg, var(--v8-bg) 1%, transparent 46%);
}
@keyframes v8Focus {
  from { filter: blur(12px) saturate(.7); transform: scale(1.06); }
  to   { filter: blur(0) saturate(1);     transform: scale(1); }
}
.hero-inner { max-width: 1180px; width: 100%; margin-inline: auto; padding-inline: var(--gutter, clamp(18px, 4vw, 40px)); text-align: left; }
.hero-badge {
  background: transparent !important; border: 1px solid var(--v8-line-strong) !important;
  color: var(--text-muted) !important; letter-spacing: .12em !important;
  font-family: var(--v8-mono); font-size: .74rem !important;
  padding: 6px 14px !important; margin-bottom: 26px !important;
}
.hero-title {
  font-family: var(--v8-din);
  font-size: clamp(2.3rem, 6.4vw, 4.6rem) !important;
  line-height: 1.03 !important; letter-spacing: -.015em !important;
  margin-bottom: 22px !important; max-width: 15em;
}
/* 标题不再用三色渐变（原来混进 --accent 会发青），改成实色 + 单点强调 */
.hero-title .grad {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--text-main); animation: none !important;
}
.hero-sub {
  font-size: clamp(.98rem, 1.6vw, 1.16rem) !important;
  color: var(--text-muted) !important; max-width: 34em; margin-bottom: 34px !important;
  line-height: 1.8;
}
.hero-actions { justify-content: flex-start !important; margin-bottom: 46px !important; }
.hero-stats {
  justify-content: flex-start !important; gap: 0 !important;
  border-top: 1px solid var(--v8-line); padding-top: 26px; max-width: 640px;
}
.hero-stats .stat {
  flex: 1 1 130px; text-align: left !important;
  padding-right: 26px; border-right: 1px solid var(--v8-line);
}
.hero-stats .stat:last-child { border-right: 0; }
.hero-stats .stat strong {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--text-main); font-family: var(--v8-din);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem) !important; display: block; line-height: 1.1;
}
.hero-stats .stat span { font-size: .78rem !important; color: var(--text-dim) !important; letter-spacing: .06em; }

/* ===================================================================
   4 · 区段：实底分层 + 细线分隔 + 编号抬头（B 的档案感）
   =================================================================== */
.section { padding: var(--v8-sec-y) 0 !important; background: var(--v8-bg); position: relative; }
.section-alt { background: var(--v8-bg-elev) !important; }
.section-alt::before, .section-alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--v8-line);
}
.section-alt::before { top: 0; }
.section-alt::after { bottom: 0; }

/* 抬头：左对齐 + 等宽小标签 + 编号 */
.section-label, .section-title, .section-desc { text-align: left !important; }
.section .container { max-width: 1180px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.section-label {
  font-family: var(--v8-mono) !important; font-size: .7rem !important;
  letter-spacing: .26em !important; color: var(--primary) !important;
  margin-bottom: 14px !important; display: flex; align-items: center; gap: 12px;
}
.section-label::after {
  content: ""; flex: 0 0 64px; height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
}
.section-title {
  font-family: var(--v8-din); font-size: clamp(1.55rem, 3.5vw, 2.5rem) !important;
  line-height: 1.18 !important; letter-spacing: -.012em;
  margin-bottom: 16px !important; max-width: 24em;
}
.section-title .grad {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--text-main); animation: none !important;
}
.section-desc {
  color: var(--text-muted) !important; max-width: 46em !important;
  margin: 0 0 clamp(30px, 4vw, 48px) !important; line-height: 1.8;
}
/* 交错节奏：偶数区段抬头靠右，打破"每段一样" */
.section-alt .section-label,
.section-alt .section-title,
.section-alt .section-desc { margin-left: auto !important; text-align: right !important; }
.section-alt .section-label { flex-direction: row-reverse; }
.section-alt .section-label::after { background: linear-gradient(270deg, var(--primary), transparent); }
.section-alt .section-title, .section-alt .section-desc { margin-right: 0 !important; }

/* ===================================================================
   5 · 卡片：实底 + 细线，悬停只做描边与位移（去掉发光）
   =================================================================== */
.card {
  background: var(--v8-card) !important;
  border: 1px solid var(--v8-line) !important;
  border-radius: 16px !important; padding: 28px 26px !important;
  transition: transform .3s var(--v8-ease), border-color .3s var(--v8-ease), background .3s var(--v8-ease) !important;
  box-shadow: none !important;
}
.card:hover {
  transform: translateY(-4px) !important;
  background: var(--v8-card-hover) !important;
  border-color: var(--v8-line-strong) !important;
  box-shadow: none !important;
}
.card-icon { font-size: 1.7rem !important; margin-bottom: 16px !important; }
.card h3 { font-size: 1.08rem !important; font-weight: 750; margin-bottom: 10px !important; }
.card p { color: var(--text-muted) !important; font-size: .9rem !important; line-height: 1.78; }
.dept-card::after {
  content: "查看详情 →"; display: block; margin-top: 16px;
  font-family: var(--v8-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--primary); opacity: .85;
}
.grid { gap: 16px !important; }

/* ===================================================================
   6 · 画廊：不等高拼贴，竖幅完整呈现（不再 16:9 裁掉作品）
   =================================================================== */
.gallery-grid {
  display: grid !important; gap: 14px !important;
  grid-template-columns: repeat(6, 1fr) !important;
}
.gallery-item {
  aspect-ratio: 3 / 4 !important; border-radius: 14px !important;
  border: 1px solid var(--v8-line) !important;
  grid-column: span 2;
}
/* 拼贴节奏：前两张并列偏大、第三张略小，但都控制在 1.2 屏以内 */
.gallery-item:nth-child(1) { grid-column: span 3; aspect-ratio: 1 / 1 !important; }
.gallery-item:nth-child(2) { grid-column: span 3; aspect-ratio: 1 / 1 !important; }
.gallery-item:nth-child(3) { grid-column: span 2; }
.gallery-item:nth-child(4) { grid-column: span 2; }
.gallery-item:nth-child(5) { grid-column: span 2; }
.gallery-item picture { display: block; width: 100%; height: 100%; }
.gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .5s var(--v8-ease) !important; }
.gallery-item:hover img { transform: scale(1.04) !important; }
/* 图注：轻量胶囊式，不再用一条厚重的黑色渐变压住作品 */
.gallery-item span {
  left: auto !important; right: 10px !important; bottom: 10px !important;
  padding: 6px 12px !important; border-radius: 999px !important;
  font-size: .76rem !important; letter-spacing: .04em;
  background: rgba(10, 10, 14, .78) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  width: auto !important; text-align: left;
}
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-item, .gallery-item:nth-child(n) { grid-column: span 1 !important; aspect-ratio: 3 / 4 !important; }
  .gallery-item:nth-child(1), .gallery-item:nth-child(2) { aspect-ratio: 3 / 4 !important; }
}

/* ===================================================================
   7 · 活动：档案条目（细线行 + 等宽日期 + 状态胶囊），不用卡片墙
   =================================================================== */
.activity-toolbar { justify-content: flex-start !important; margin: 0 0 26px !important; }
.filter-btn {
  border: 1px solid var(--v8-line) !important; background: transparent !important;
  font-family: var(--v8-mono); font-size: .74rem; letter-spacing: .1em;
  padding: 8px 15px !important;
}
.filter-btn.active {
  border-color: var(--primary) !important; background: rgba(var(--primary-rgb), .12) !important;
  color: var(--text-main) !important;
}
.activity-list { border-top: 1px solid var(--v8-line); margin: 0 !important; max-width: none !important; position: static !important; }
.activity-list::before { display: none !important; }        /* 去掉原来的竖时间轴光带 */
/* 条目改为网格。这里踩过两个坑，注释留作警示：
   坑 1：圆点必须用 visibility:hidden 而不是 display:none —— 后者不占 grid 槽位，
        后面的元素会自动补位，整个布局错位。
   坑 2：条目有 3 个直接子元素（日期/圆点/内容）却只定义 2 列时，
        第 3 个元素会被挤到第二行、落进第一列的窄格里，文字被迫逐字竖排。
        所以内容列显式跨列（grid-column: 1 / -1），不再依赖自动放置。
   坑 3：.activity-date strong 的选择器要写到 (0,2,1)，否则压不过原规则的 display:block。 */
.activity-item {
  display: grid !important;
  grid-template-columns: 92px 1fr !important;
  gap: 22px !important; align-items: start !important; padding: 0 !important;
}
.activity-item .activity-dot {
  grid-row: 1 !important; grid-column: 2 !important;
  visibility: hidden !important; width: 0 !important; height: 0 !important;
  padding: 0 !important; border: 0 !important;
}
.activity-date {
  grid-row: 1 !important; grid-column: 1 !important;
  display: flex !important; align-items: baseline !important; gap: 6px !important;
  justify-content: flex-start !important; text-align: left !important; padding-top: 24px !important;
  font-family: var(--v8-mono); color: var(--text-dim);
}
.activity-date strong { display: inline !important; font-size: .95rem !important; letter-spacing: .04em; color: var(--text-main); }
.activity-date span { font-size: .78rem !important; color: var(--text-dim); }
.activity-body {
  grid-row: 2 !important; grid-column: 1 / -1 !important;   /* 内容跨满两列 */
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--v8-line) !important; border-radius: 0 !important;
  padding: 6px 4px 22px !important;
  width: 100% !important; min-width: 0 !important;
  transition: background .25s var(--v8-ease), padding-left .25s var(--v8-ease) !important;
}
.activity-list, .activity-item, .activity-item .activity-body { max-width: none !important; }
.activity-body h3, .activity-body p { word-break: normal !important; overflow-wrap: break-word !important; }
.activity-body:hover { transform: none !important; background: rgba(255,255,255,.03) !important; padding-left: 10px !important; box-shadow: none !important; }
.activity-meta { gap: 10px !important; }
.status { font-family: var(--v8-mono); font-size: .68rem !important; letter-spacing: .1em; padding: 4px 11px !important; }
.card-line::before { display: none; }
.empty-state { text-align: left !important; border-style: solid !important; padding: 26px 4px !important; border-width: 1px 0 0 !important; }

/* ===================================================================
   8 · 工具 / 加入 / 每日：统一到同一条语言
   =================================================================== */
.tool-card { border-radius: 16px !important; }
.tool-card .btn { align-self: flex-start !important; }
.zoom-controls {
  opacity: .55 !important; border-color: var(--v8-line) !important;
  background: rgba(20,20,29,.92) !important;
}
.zoom-controls:hover, .zoom-controls:focus-within { opacity: 1 !important; }

.join-box {
  position: relative; overflow: hidden;
  background: var(--v8-bg-elev) !important;
  border: 1px solid var(--v8-line) !important;
  border-radius: 18px !important;
  background-image: linear-gradient(0deg, rgba(9,9,15,.94), rgba(9,9,15,.80)),
                    url('assets/images/gallery3.jpg') !important;
  background-size: cover !important; background-position: center 42% !important;
}
.join-box .section-label, .join-box .section-title, .join-box .section-desc { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.join-box .section-label { justify-content: center; }
.join-box .section-label::after { display: none; }
.social-matrix { gap: 12px !important; }
.join-note { font-family: var(--v8-mono); font-size: .74rem !important; letter-spacing: .08em; color: var(--text-dim) !important; }
.daily-acg-box, #daily-acg-box { border-style: solid !important; border-color: var(--v8-line) !important; }

/* ===================================================================
   9 · 底部两处暖白"档案条"，把 B 的语言点进来（占比约 20%）
   =================================================================== */
.v8-plate {
  background: var(--v8-paper); color: var(--v8-paper-ink);
  position: relative; padding: clamp(34px, 5vw, 58px) 0;
}
.v8-plate .container { max-width: 1180px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.v8-plate-inner { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: baseline; justify-content: space-between; }
.v8-plate-kicker {
  font-family: var(--v8-mono); font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--v8-paper-line-strong, #7a7873); display: block; margin-bottom: 10px;
}
.v8-plate h3 { font-family: var(--v8-din); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; }
.v8-plate p { color: var(--v8-paper-ink-2); font-size: .92rem; line-height: 1.8; max-width: 40em; margin-top: 10px; }
.v8-plate-corners i { position: absolute; width: 20px; height: 20px; border: 1px solid var(--v8-paper-line); pointer-events: none; }
.v8-plate-corners i:nth-child(1) { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.v8-plate-corners i:nth-child(2) { top: 20px; right: 20px; border-left: 0; border-bottom: 0; }
.v8-plate-corners i:nth-child(3) { bottom: 20px; left: 20px; border-right: 0; border-top: 0; }
.v8-plate-corners i:nth-child(4) { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }

/* ===================================================================
   10 · 页脚：深色 + 细线 + 等宽
   =================================================================== */
.footer { border-top: 1px solid var(--v8-line) !important; background: var(--v8-bg) !important; padding: 34px 0 !important; }
.footer-copy { font-size: .8rem !important; color: var(--text-dim) !important; }
.version-link { font-family: var(--v8-mono); }

/* ===================================================================
   11 · 丝滑动画：入场用 blur + 位移，全部走 transform/opacity/filter
   =================================================================== */
.reveal {
  opacity: 0; transform: translateY(22px); filter: blur(6px);
  transition: opacity .7s var(--v8-ease-out), transform .7s var(--v8-ease-out), filter .7s var(--v8-ease-out);
  will-change: opacity, transform;
}
.reveal.show, .reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* 卡片错峰入场 */
.grid .reveal:nth-child(2), .activity-list .reveal:nth-child(2) { transition-delay: .07s; }
.grid .reveal:nth-child(3), .activity-list .reveal:nth-child(3) { transition-delay: .14s; }
.grid .reveal:nth-child(4) { transition-delay: .21s; }
.grid .reveal:nth-child(5) { transition-delay: .28s; }
.grid .reveal:nth-child(6) { transition-delay: .35s; }
/* 首屏三次闪烁再常亮（参考站 flashing 的节奏） */
@keyframes v8Flash {
  0% { opacity: 0; } 10% { opacity: .5; } 11% { opacity: 0; }
  20% { opacity: .5; } 21% { opacity: 0; } 40% { opacity: .5; } 41% { opacity: 0; }
  100% { opacity: 1; }
}
.reveal.flash { animation: v8Flash .9s steps(1, end) both; }
.reveal.flash.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero::before { animation: none !important; }
}

/* ===================================================================
   12 · 响应式补齐
   =================================================================== */
@media (max-width: 900px) {
  .hero { min-height: 82vh; }
  .hero-stats .stat { border-right: 0; padding-right: 0; padding-bottom: 16px; }
  .section-alt .section-label, .section-alt .section-title, .section-alt .section-desc {
    text-align: left !important; margin-left: 0 !important;
  }
  .section-alt .section-label { flex-direction: row; }
}
@media (max-width: 620px) {
  .hero::before { background-position: center 26%; }
  .v8-plate-inner { flex-direction: column; gap: 14px; }
}

/* Hero 里的强调词：实色，不用三色渐变（避免混进 --accent 发青） */
.hero-title .hero-em { color: var(--primary); font-style: normal; }

/* ===================================================================
   13 · 首屏"揭幕即浮现"
   -------------------------------------------------------------------
   之前首屏 GSAP 动画在页面加载时就跑完了，全程被开屏遮住 ——
   等幕布拉开，主界面只剩一个裸淡入，看起来就是"直接跳出来"。
   现在改成声明式：首屏元素默认隐藏，只有在 <html> 出现 data-acg-loaded
   时才错峰浮现（main.js 第 25 节的 reveal() 在色散揭幕那一刻写入这个属性）。
   不依赖 GSAP 是否加载成功，路径唯一，不会两处争状态。
   =================================================================== */
.hero-inner > * { opacity: 0; }
.hero-inner > * { transition: opacity .62s var(--v8-ease-out), transform .62s var(--v8-ease-out); transform: translateY(20px); }
html[data-acg-loaded="1"] .hero-inner > * { opacity: 1; transform: none; }
html[data-acg-loaded="1"] .hero-inner > *:nth-child(1) { transition-delay: .06s; }
html[data-acg-loaded="1"] .hero-inner > *:nth-child(2) { transition-delay: .16s; }
html[data-acg-loaded="1"] .hero-inner > *:nth-child(3) { transition-delay: .28s; }
html[data-acg-loaded="1"] .hero-inner > *:nth-child(4) { transition-delay: .38s; }
html[data-acg-loaded="1"] .hero-inner > *:nth-child(5) { transition-delay: .48s; }
/* 入场层不播时（减少动态效果 / 同会话已播过）直接显示，否则首屏会一直空着 */
html[data-acg-immediate] .hero-inner > * { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-inner > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== 视觉方案 v0.8 覆盖层结束 ===== */

/* ===================================================================
   ☀️ 视觉方案 v0.9 · 暖白 · 手机优先
   -------------------------------------------------------------------
   这是文件的最后一层，权威覆盖前面的深色方案（v0.8 覆盖层保留在文件里，
   但被本层按优先级压过去；想整体回到深色只需删掉本段）。

   两个根本改变：
     1. 配色从"深色底 + 铺满暗插画 + 大量灰字"改成暖白底 + 墨色正文 + 红色强调
        —— 之前显得沉闷，主要是灰字太多、暗图铺满、缺少亮面。
     2. 手机优先：先按 390px 定好所有规则，再用 min-width 往上加。
        之前是先做桌面再补 max-width，手机上处处将就，才会出现导航塞爆、
        按钮过胖、数据行换行、正文满宽贴边这些问题。

   断点：默认 = 手机；>=560 大屏手机；>=820 平板；>=1100 桌面
   =================================================================== */
:root {
  --v9-bg: #f7f4ec;          /* 暖白底 */
  --v9-surface: #fffdf8;     /* 卡片面 */
  --v9-band: #efe9dc;        /* 分区带 */
  --v9-ink: #14110f;         /* 正文墨色 */
  --v9-ink-2: #4a443d;       /* 次级文字 */
  --v9-ink-3: #6f6659;       /* 说明文字 */
  --v9-line: rgba(20, 17, 15, .14);
  --v9-line-2: rgba(20, 17, 15, .08);
  /* ⚠️ 强调色必须跟随主题，不能写死：
     主题只定义了 --btn-grad-from/to 和 --on-primary，
     若这里固定成 #e8122f，换主题就完全没有视觉变化，那个按钮形同虚设。 */
  --v9-accent: var(--btn-grad-from, #e8122f);
  --v9-accent-2: var(--btn-grad-to, #b3002a);
  /* 红色文字要压深才够对比度；用 color-mix 从强调色派生，主题一换自动跟着变 */
  --v9-accent-ink: color-mix(in srgb, var(--v9-accent) 50%, #14110f);
  --v9-accent-soft: color-mix(in srgb, var(--v9-accent) 14%, #ffffff);
  --v9-mint: #d7ebe4;
  --v9-pink: var(--v9-accent-soft);
  --v9-sun: #fdf1cf;
  --v9-radius: 16px;
  --v9-shadow: 0 1px 2px rgba(20,17,15,.05), 0 8px 24px rgba(20,17,15,.06);
  --v9-din: "Bahnschrift", "DIN Alternate", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --v9-mono: "Cascadia Mono", "SFMono-Regular", Consolas, Menlo, ui-monospace, monospace;
}

/* ---------- 基础 ---------- */
body {
  background: var(--v9-bg) !important;
  color: var(--v9-ink) !important;
  font-family: "Microsoft YaHei", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", system-ui, sans-serif;
}
.bg-image, .bg-grid, .glow { display: none !important; }
#particles { display: none !important; }   /* 手机再省点电，粒子也让位给亮底 */
::selection { background: var(--v9-accent); color: #fff; }

/* ---------- 导航：手机只留 3 件东西 ---------- */
.nav {
  background: rgba(247, 244, 236, .92) !important;
  border-bottom: 1px solid var(--v9-line-2) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.nav.scrolled { background: rgba(247, 244, 236, .98) !important; border-bottom-color: var(--v9-line) !important; }
.nav-inner {
  max-width: 1180px !important;
  padding: 10px 16px !important;
  min-height: 56px;
}
.logo { font-size: 1.02rem !important; gap: 8px !important; color: var(--v9-ink) !important; }
.logo-mark {
  width: 30px !important; height: 30px !important; border-radius: 9px !important;
  background: var(--v9-accent) !important; box-shadow: none !important;
  font-size: .92rem !important;
}
.logo-text em { color: var(--v9-ink) !important; }

/* 手机：把"主题钮 / 网站贡献者"从顶栏收进抽屉底部，顶栏只留 logo + 名片 + 汉堡 */
.nav-toggle { display: flex !important; }
.nav-toggle span { background: var(--v9-ink) !important; }

.nav-auth {
  margin-left: auto !important; margin-right: 8px !important;
  gap: 6px !important;
}

/* ⚠️ 换色按钮：原来的样式是深色版留下的
     border: 1px solid rgba(255,255,255,.15) + background: rgba(255,255,255,.05)
   在暖白底上等于全透明，按钮"看不见"而不是"不存在"。这里改成实心描边按钮。 */
.theme-toggle {
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid var(--v9-line) !important;
  background: var(--v9-surface) !important;
  color: var(--v9-ink) !important;
  box-shadow: var(--v9-shadow);
  font-size: .95rem !important;
  display: grid !important; place-items: center !important;
  cursor: pointer;
  transition: border-color .18s, transform .18s, background .18s;
}
.theme-toggle:hover { border-color: var(--v9-accent) !important; transform: rotate(20deg); background: var(--v9-pink) !important; }

/* 主题面板：深色弹层在亮底上很跳，改成亮色 */
.theme-panel {
  background: var(--v9-surface) !important;
  border: 1px solid var(--v9-line) !important;
  box-shadow: 0 12px 32px rgba(20,17,15,.14) !important;
  border-radius: 14px !important;
}
.theme-panel-title { color: var(--v9-ink-3) !important; }
.theme-option {
  color: var(--v9-ink-2) !important;
  border-radius: 8px !important;
}
.theme-option:hover { background: var(--v9-band) !important; color: var(--v9-ink) !important; }
.theme-option.active {
  background: var(--v9-pink) !important;
  border-color: var(--v9-accent) !important;
  color: var(--v9-accent-ink) !important;
}

/* 网站贡献者：手机上收成图标，和换色按钮同尺寸 */
.developer-btn {
  width: 34px !important; height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid var(--v9-line) !important;
  background: var(--v9-surface) !important;
  color: var(--v9-ink) !important;
  box-shadow: var(--v9-shadow);
  font-size: 0 !important;
  display: grid !important; place-items: center !important;
  flex: none;
}
.developer-btn::before { content: '🛠️'; font-size: .95rem; }
.developer-btn:hover { border-color: var(--v9-accent) !important; background: var(--v9-pink) !important; }
.user-info { background: var(--v9-pink) !important; border-color: var(--v9-line) !important; color: var(--v9-ink) !important; }
.user-name { color: var(--v9-ink) !important; max-width: 72px; }
.btn-logout { color: var(--v9-ink-3) !important; }

/* 抽屉：导航链接 + 底部两个收纳项 */
.nav-links {
  position: fixed !important;
  top: 56px !important; left: 0 !important; right: 0 !important;
  background: var(--v9-bg) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--v9-line) !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 8px 16px 20px !important;
  transform: translateY(-130%) !important;
  transition: transform .32s cubic-bezier(.22,.61,.36,1) !important;
  max-height: calc(100dvh - 56px) !important;
  overflow-y: auto !important;
  display: flex !important;
}
.nav-links.open { transform: translateY(0) !important; }
.nav-links a {
  color: var(--v9-ink) !important;
  padding: 14px 4px !important;
  border-bottom: 1px solid var(--v9-line-2);
  font-size: 1rem !important;
  font-weight: 600;
}
.nav-links a::after { display: none !important; }
.nav-links a:last-child { border-bottom: 0; }

/* 抽屉打开时，在链接下方追加"主题 / 贡献者"两个入口（用顶层导航里的元素就位） */


/* ---------- Hero：亮底 + 图片做成"卡片式主视觉" ---------- */
.hero {
  min-height: auto !important;
  display: block !important;
  padding: 76px 0 34px !important;
  background: var(--v9-bg) !important;
  isolation: auto !important;
  overflow: visible !important;
}
.hero::before { display: none !important; }   /* 去掉全屏暗图 */
.hero::after { display: none !important; }

/* 主视觉图：圆角大卡，手机上也一眼看到，但不压住文字 */
.hero-inner {
  max-width: 1180px !important;
  padding-inline: 16px !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: start;      /* grid 默认 stretch，会把徽章和按钮都拉成满宽 */
  text-align: left !important;
}
.hero-badge { justify-self: start !important; }
.hero-actions { justify-self: start !important; }
.hero-actions .btn { width: auto !important; }
.hero-badge {
  order: 0;
  justify-self: start;
  background: var(--v9-pink) !important;
  border: 1px solid var(--v9-line) !important;
  color: var(--v9-accent-ink) !important;
  font-family: var(--v9-mono) !important;
  font-size: .7rem !important;
  letter-spacing: .08em !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 0 !important;
}
.hero-title {
  order: 1;
  font-family: var(--v9-din) !important;
  font-size: clamp(1.75rem, 8.4vw, 3.6rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -.02em !important;
  color: var(--v9-ink) !important;
  margin: 0 !important;
  max-width: 20em;
}
/* 强调词是正文级文字，必须用压深后的 accent-ink；
   直接上 --v9-accent 的话，金色/黄色主题对比度只有 1.1~1.4，几乎看不清。 */
.hero-title .hero-em { color: var(--v9-accent-ink) !important; }
.hero-sub {
  order: 2;
  font-size: .96rem !important;
  line-height: 1.75 !important;
  color: var(--v9-ink-2) !important;
  max-width: 34em !important;
  margin: 0 !important;
}
/* CTA：手机上门板不做"两块大馒头"，并排且高度收敛 */
.hero-actions {
  order: 3;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 2px 0 0 !important;
  justify-content: flex-start !important;
}
.hero-actions .btn { flex: 0 1 auto; }
/* 主视觉图（用伪元素挂在最后，避免动 HTML） */
.hero-inner::after {
  content: "";
  order: 4;
  justify-self: stretch;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: 4px;
  border-radius: 20px;
  border: 1px solid var(--v9-line);
  box-shadow: var(--v9-shadow);
  background: url('assets/images/bg.webp') center 30% / cover no-repeat, #d9d3c6;
}
/* 数据行：手机两列，数值和标签同一格，不再折行 */
.hero-stats {
  order: 5;
  justify-self: stretch !important;   /* 数据行要通栏，不接受 start */
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid var(--v9-line) !important;
  border-bottom: 1px solid var(--v9-line) !important;
  padding: 0 !important;
  max-width: none !important;
  margin-top: 18px;
}
.hero-stats .stat {
  border-right: 1px solid var(--v9-line) !important;
  border-bottom: 1px solid var(--v9-line) !important;
  padding: 14px 12px !important;
  text-align: left !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hero-stats .stat:nth-child(2n) { border-right: 0 !important; }
.hero-stats .stat:nth-last-child(-n+2) { border-bottom: 0 !important; }
.hero-stats .stat strong {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--v9-accent-ink) !important;   /* 文字用压深版；金色主题上亮金几乎看不见 */
  font-family: var(--v9-din) !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  display: inline !important;
}
.hero-stats .stat span {
  color: var(--v9-ink-3) !important;
  font-size: .76rem !important;
  letter-spacing: .02em;
  display: inline !important;
}

/* ---------- 按钮：手机不铺满，高度收敛 ---------- */
.btn {
  padding: 11px 20px !important;
  font-size: .9rem !important;
  font-weight: 700;
  border-radius: 999px !important;
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.btn-primary {
  /* 保留各主题原本的渐变与文字色（--on-primary 已按主题调好对比度） */
  background: linear-gradient(135deg, var(--btn-grad-from), var(--btn-grad-to)) !important;
  color: var(--on-primary, #fff) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--v9-accent) 30%, transparent) !important;
}
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--v9-surface) !important;
  color: var(--v9-ink) !important;
  border: 1px solid var(--v9-line) !important;
}
.btn-ghost:hover { border-color: var(--v9-ink-3) !important; }
.btn-block { width: 100% !important; }

/* ---------- 区段：亮底 + 留白 ---------- */
.section { padding: 46px 0 !important; background: var(--v9-bg) !important; }
.section-alt { background: var(--v9-band) !important; }
.section-alt::before, .section-alt::after { display: none !important; }
.container { max-width: 1180px !important; padding-inline: 16px !important; margin-inline: auto !important; }

.section-label {
  font-family: var(--v9-mono) !important;
  font-size: .68rem !important;
  letter-spacing: .2em !important;
  color: var(--v9-accent-ink) !important;
  text-align: left !important;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px !important;
}
.section-label::after {
  content: ""; flex: 0 0 40px; height: 1px;
  background: linear-gradient(90deg, var(--v9-accent), transparent);
}
.section-title {
  font-family: var(--v9-din) !important;
  font-size: clamp(1.35rem, 5.6vw, 2.1rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -.015em;
  color: var(--v9-ink) !important;
  text-align: left !important;
  margin: 0 0 10px !important;
  max-width: 22em;
}
.section-title .grad {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--v9-ink) !important; animation: none !important;
}
.section-desc {
  color: var(--v9-ink-2) !important;
  font-size: .92rem !important;
  line-height: 1.78 !important;
  text-align: left !important;
  max-width: 36em !important;      /* 手机上限制行宽，不再满宽贴边 */
  margin: 0 0 26px !important;
}
.section-desc strong { color: var(--v9-accent-ink) !important; }
/* 交错：桌面才右对齐，手机一律左对齐（手机右对齐会很难读） */
@media (min-width: 820px) {
  .section-alt .section-label { flex-direction: row-reverse; }
  .section-alt .section-label::after { background: linear-gradient(270deg, var(--v9-accent), transparent); }
  .section-alt .section-label,
  .section-alt .section-title,
  .section-alt .section-desc { text-align: right !important; margin-left: auto !important; margin-right: 0 !important; }
}

/* ---------- 卡片：白面 + 细线，手机单列 ---------- */
.grid { display: grid !important; gap: 12px !important; grid-template-columns: 1fr !important; }
.card {
  background: var(--v9-surface) !important;
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius) !important;
  padding: 20px 18px !important;
  box-shadow: var(--v9-shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,17,15,.06), 0 12px 28px rgba(20,17,15,.09); border-color: var(--v9-line) !important; }
.card-icon { font-size: 1.4rem !important; margin-bottom: 10px !important; }
.card h3 { font-size: 1rem !important; font-weight: 750; color: var(--v9-ink) !important; margin-bottom: 6px !important; }
.card p { color: var(--v9-ink-2) !important; font-size: .88rem !important; line-height: 1.72 !important; }
.dept-card::after { color: var(--v9-accent-ink) !important; font-family: var(--v9-mono); font-size: .7rem; }

/* ---------- 活动：手机上下堆叠的条目 ---------- */
.activity-toolbar, .gallery-toolbar {
  justify-content: flex-start !important;
  margin: 0 0 18px !important;
  gap: 8px !important;
}
.filter-btn {
  padding: 7px 14px !important;
  font-size: .8rem !important;
  border: 1px solid var(--v9-line) !important;
  background: var(--v9-surface) !important;
  color: var(--v9-ink-2) !important;
  border-radius: 999px !important;
}
.filter-btn.active {
  background: var(--v9-accent) !important;
  border-color: var(--v9-accent) !important;
  color: var(--on-primary, #fff) !important;
}
.activity-list { border-top: 1px solid var(--v9-line); display: flex; flex-direction: column; }
.activity-item {
  display: flex !important; flex-direction: column !important;
  position: static !important; padding: 0 !important;
}
.activity-item .activity-dot { display: none !important; }
/* 日期回到文档流并排到条目末尾当脚注：
   原规则是 position:absolute + margin-left:56px，手机上会浮到标签胶囊上面重叠。 */
.activity-date {
  order: 3;
  display: flex !important;
  position: static !important;
  margin: 0 !important;
  top: auto !important; left: auto !important; right: auto !important;
  align-items: baseline; gap: 6px !important;
  font-family: var(--v9-mono); color: var(--v9-ink-3) !important;
  padding: 0 2px 16px !important;
  text-align: left !important;
}
.activity-date strong { display: inline !important; color: var(--v9-ink) !important; font-size: .9rem !important; }
.activity-date span { font-size: .76rem !important; }
.activity-body {
  grid-column: auto !important;
  position: static !important;
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--v9-line-2) !important;
  border-radius: 0 !important;
  padding: 8px 2px 18px !important;
}
.activity-meta {
  display: flex !important;
  flex-wrap: nowrap !important;   /* 标签 + 状态尽量同一行；放不下时允许标签内部省略 */
  gap: 6px !important;
  align-items: center;
  margin-bottom: 8px !important;
  overflow: hidden;
}
.tag, .status {
  font-size: .72rem !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--v9-line) !important;
  background: var(--v9-surface) !important;
  color: var(--v9-ink-2) !important;
  white-space: nowrap;
  display: inline-block !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.tag {
  /* 标签可能很长（如"网站搭建与更新"），允许收缩并省略，给状态胶囊让位 */
  flex: 0 1 auto !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}
.status-进行中 { color: #0f7a5a !important; border-color: rgba(15,122,90,.3) !important; background: var(--v9-mint) !important; }
.status-计划中 { color: #8a5a0a !important; border-color: rgba(138,90,10,.28) !important; background: var(--v9-sun) !important; }
.status-已结束 { color: var(--v9-ink-3) !important; }
.activity-body h3 { font-size: 1rem !important; color: var(--v9-ink) !important; margin-bottom: 4px !important; }
.activity-body p { color: var(--v9-ink-2) !important; font-size: .88rem !important; line-height: 1.75 !important; }
.empty-state { border: 1px solid var(--v9-line) !important; color: var(--v9-ink-3) !important; text-align: left !important; padding: 22px 16px !important; border-radius: var(--v9-radius) !important; }

/* ---------- 画廊：手机两列等高，不再错位 ---------- */
.gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.gallery-item {
  grid-column: auto !important;
  position: relative !important;   /* 图注是 absolute，必须有定位基准 */
  overflow: hidden;                /* 圆角裁切，图片不出界 */
  /* 关键：卡片本身是 <button>，会被上面的 .btn 规则加上 11px 20px 内边距，
     内边距一挤内容区就没了，图片自然不加载/不显示。这里全部清零。 */
  padding: 0 !important;
  font: inherit !important;
  line-height: 0 !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;      /* 统一比例 => 两列等高 */
  border-radius: 12px !important;
  border: 1px solid var(--v9-line) !important;
  box-shadow: var(--v9-shadow);
  margin: 0 !important;
  background: var(--v9-band) !important;
  cursor: pointer;
}
.gallery-item:nth-child(n) { grid-column: auto !important; aspect-ratio: 3 / 4 !important; margin: 0 !important; }
/* <picture> 只当候选源容器：不设 height:100%，
   否则 <img> 的 height:100% 会失去可解析的父高度（图片塌成 0 不加载）。
   改为让 picture 绝对定位铺满卡片，img 再撑满 picture。 */
.gallery-item picture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.gallery-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  line-height: 0;
}
.gallery-item span {
  position: absolute !important;   /* 不写这条会退回文档流，图注浮在图片中间 */
  left: 8px !important; right: 8px !important; bottom: 8px !important;
  padding: 6px 10px !important;
  font-size: .7rem !important;
  line-height: 1.4 !important;     /* 父级 line-height:0 会传到图注，压扁并贴底被裁 */
  border-radius: 8px !important;
  background: rgba(20, 17, 15, .78) !important;
  backdrop-filter: blur(6px);
  text-align: left !important;
  display: block !important;
  z-index: 2;
}

/* ---------- 工具 / 每日 / 加入 ---------- */
.tool-card .btn { align-self: stretch !important; margin-top: 4px; }
#daily-acg-box, .join-box {
  border: 1px solid var(--v9-line) !important;
  border-radius: var(--v9-radius) !important;
}
.join-box {
  background: var(--v9-surface) !important;
  background-image: none !important;
  padding: 28px 18px !important;
  box-shadow: var(--v9-shadow);
}
.join-box .section-label, .join-box .section-label::after { justify-content: flex-start; display: none; }
.join-box .section-title, .join-box .section-desc { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
.social-matrix { display: grid !important; gap: 10px !important; grid-template-columns: 1fr; }
.join-note {
  font-family: var(--v9-mono) !important;
  font-size: .74rem !important;
  color: var(--v9-ink-3) !important;
  margin-top: 16px !important;
}
#daily-acg-box { background: var(--v9-surface) !important; border-style: solid !important; }

/* ---------- 档案条：亮色版本 ---------- */
.v8-plate { background: var(--v9-band) !important; color: var(--v9-ink) !important; padding: 30px 0 !important; }
.v8-plate h3 { color: var(--v9-ink) !important; font-size: 1.05rem; }
.v8-plate p { color: var(--v9-ink-2) !important; font-size: .88rem !important; }
.v8-plate-kicker { color: var(--v9-ink-3) !important; }
.v8-plate-inner { flex-direction: column !important; gap: 16px !important; }
.v8-plate-corners i { border-color: var(--v9-line) !important; }

/* ---------- 页脚 ---------- */
.footer { background: var(--v9-ink) !important; color: #e9e4da !important; border-top: 0 !important; padding: 26px 0 !important; }
.footer-brand { color: #f3efe6 !important; font-size: .92rem; }
.footer-copy { color: #a9a29a !important; font-size: .76rem !important; }
.version-link { color: #a9a29a !important; }

/* ---------- 缩放控件：手机上直接隐藏 ---------- */
/* 手机上双指缩放是系统原生操作，这一排按钮既多余、又会压住正文和卡片。
   桌面端保留（那里没有手势缩放）。 */
.zoom-controls { display: none !important; }
@media (min-width: 820px) {
  .zoom-controls {
    display: flex !important;
    left: 14px !important; bottom: 14px !important;
    padding: 3px !important;
    background: var(--v9-surface) !important;
    border: 1px solid var(--v9-line) !important;
    box-shadow: var(--v9-shadow);
    opacity: .85 !important;
    z-index: 60 !important;
  }
  .zoom-controls:hover, .zoom-controls:focus-within { opacity: 1 !important; }
  .zoom-controls button { width: 26px !important; height: 26px !important; color: var(--v9-ink) !important; background: transparent !important; }
  .zoom-value { color: var(--v9-ink-2) !important; font-size: .68rem !important; min-width: 38px !important; }
}
.back-top {
  background: var(--v9-surface) !important; color: var(--v9-ink) !important;
  border: 1px solid var(--v9-line) !important; box-shadow: var(--v9-shadow);
  /* 手机：返回顶部挪到右下角，音乐页签在其上方，两者不再叠 */
  right: 12px !important; bottom: 12px !important;
  width: 38px !important; height: 38px !important;
  z-index: 60 !important;
}
.scroll-progress { background: var(--v9-accent) !important; }

/* 页面底部留出空间，避免固定控件压住最后一段内容 */
main { padding-bottom: 8px; }

/* ---------- 音乐侧栏：手机重排为右下角悬浮按钮 ---------- */
.music-side { z-index: 70 !important; }
@media (max-width: 819px) {
  /* 原始实现靠 transform: translateX(280px) 把整个容器推到屏幕外，只露一个页签。
     手机上这样会让页签跟着容器跑到可视区外（实测 left=390, right=590）。
     这里改成：容器留在屏幕内、抽屉自己 fixed 滑入滑出。 */
  .music-side {
    position: fixed !important;
    right: 12px !important;
    bottom: 58px !important;   /* 让开右下角的"返回顶部"按钮 */
    top: auto !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    max-width: calc(100vw - 24px) !important;
  }
  .music-side.open { transform: none !important; }
  /* 折叠态：缩成半透明小圆点，尽量不遮正文；展开后恢复完整按钮 */
  .ms-tab {
    position: static !important;
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important;
    opacity: .42 !important;
    z-index: 72 !important;
    transition: opacity .2s, width .2s, height .2s, border-radius .2s !important;
  }
  .music-side:not(.open) .ms-tab:hover,
  .music-side:not(.open) .ms-tab:active { opacity: 1 !important; }
  .music-side.open .ms-tab {
    width: 42px !important; height: 42px !important;
    border-radius: 12px !important;
    opacity: 1 !important;
  }
  .ms-drawer {
    position: fixed !important;
    right: 0 !important; left: auto !important;
    bottom: 0 !important; top: auto !important;
    width: min(300px, 88vw) !important;
    max-width: none !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateX(105%) !important;
    transition: transform .32s cubic-bezier(.22,.61,.36,1) !important;
    z-index: 71 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .music-side.open .ms-drawer { transform: translateX(0) !important; }
}
.ms-tab { background: var(--v9-accent) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(232,18,47,.3) !important; }
.ms-drawer {
  background: var(--v9-surface) !important;
  border: 1px solid var(--v9-line) !important;
  color: var(--v9-ink) !important;
  box-shadow: var(--v9-shadow);
  max-width: calc(100vw - 24px) !important;   /* 关键：不超出视口 */
}
.ms-name { color: var(--v9-ink) !important; }
.ms-artist, .ms-head span { color: var(--v9-ink-3) !important; }
.ms-bar span { color: var(--v9-ink-3) !important; }
.ms-btn { background: var(--v9-band) !important; color: var(--v9-ink) !important; border: 1px solid var(--v9-line) !important; }
.ms-play { background: var(--v9-accent) !important; color: var(--on-primary, #fff) !important; border-color: transparent !important; }
.ms-seek { accent-color: var(--v9-accent); }
.ms-spectrum { background: var(--v9-band) !important; border-color: var(--v9-line) !important; }
.ms-close { color: var(--v9-ink-3) !important; }

/* ---------- 弹窗：亮色 ---------- */
.modal-overlay { background: rgba(20, 17, 15, .45) !important; backdrop-filter: blur(6px) !important; }
.modal-card {
  background: var(--v9-bg) !important;
  border: 1px solid var(--v9-line) !important;
  color: var(--v9-ink) !important;
  box-shadow: 0 20px 60px rgba(20,17,15,.22) !important;
  border-radius: 18px !important;
  padding: 26px 20px !important;
}
.modal-close { color: var(--v9-ink-3) !important; }
.modal-header h2 { color: var(--v9-ink) !important; }
.modal-subtitle { color: var(--v9-ink-3) !important; }
.input-group label { color: var(--v9-ink-2) !important; }
.input-group input, .input-group select {
  background: var(--v9-surface) !important;
  border: 1px solid var(--v9-line) !important;
  color: var(--v9-ink) !important;
  font-size: 16px !important;   /* 防 iOS 聚焦自动放大 */
}
.input-group select option { background: var(--v9-surface) !important; color: var(--v9-ink) !important; }
.modal-footer span { color: var(--v9-ink-3) !important; }
.dev-panel, .developer-role { background: var(--v9-surface) !important; border-color: var(--v9-line) !important; color: var(--v9-ink) !important; }
.dev-panel-title, .developer-role h3 { color: var(--v9-ink) !important; }
.dev-panel p, .developer-role p { color: var(--v9-ink-2) !important; }
.tech-tags span { background: var(--v9-band) !important; border-color: var(--v9-line) !important; color: var(--v9-ink-2) !important; }
.status-list span, .debug-output span { color: var(--v9-ink-3) !important; }
.status-list strong { color: var(--v9-accent-ink) !important; }
.debug-output code { color: var(--v9-accent-ink) !important; }
.changelog-item { color: var(--v9-ink-2) !important; }
.changelog-item strong { color: var(--v9-ink) !important; }
kbd { background: var(--v9-band) !important; border-color: var(--v9-line) !important; color: var(--v9-ink) !important; }
.dept-detail-content, #deptModalContent { color: var(--v9-ink-2) !important; }
.lightbox-overlay { background: rgba(12, 10, 8, .92) !important; }
.giscus-container { background: var(--v9-surface) !important; border-color: var(--v9-line) !important; }

/* ---------- 入场：亮色下轻微上浮，不做模糊 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  filter: none !important;
}
.reveal.show, .reveal.in { opacity: 1; transform: none; filter: none !important; }

/* ========== 大屏手机 ========== */
@media (min-width: 560px) {
  .nav-inner { padding: 12px 24px !important; }
  .hero-inner { padding-inline: 24px !important; }
  .container { padding-inline: 24px !important; }
  .grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stats { grid-template-columns: repeat(4, 1fr) !important; }
  .hero-stats .stat { border-bottom: 0 !important; }
  .hero-stats .stat:nth-child(2n) { border-right: 1px solid var(--v9-line) !important; }
  .hero-stats .stat:last-child { border-right: 0 !important; }
  .social-matrix { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .v9-lead { font-size: 1rem; }
}

/* ========== 平板 ========== */
@media (min-width: 820px) {
  .nav-inner { min-height: 64px; }
  .nav-toggle { display: none !important; }
  .nav-links {
    position: static !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-left: auto;
  }
  .nav-links a { border-bottom: 0; padding: 6px 0 !important; font-size: .92rem !important; color: var(--v9-ink-2) !important; }
  .nav-links a:hover { color: var(--v9-ink) !important; }
  .nav-auth .theme-switcher, .nav-auth .developer-btn { display: flex !important; }
  .nav-auth { margin-left: 20px !important; margin-right: 0 !important; }
  

  .hero { padding: 88px 0 40px !important; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: start; gap: 22px 36px; }
  .hero-badge { grid-column: 1; }
  .hero-title { grid-column: 1; }
  .hero-sub { grid-column: 1; }
  .hero-actions { grid-column: 1; }
  .hero-inner::after {
    grid-column: 2; grid-row: 1 / span 5;
    aspect-ratio: auto;
    height: clamp(300px, 38vw, 430px);   /* 用固定高度收敛，避免图太高把整行撑出空洞 */
    align-self: start;
    margin-top: 0;
    min-height: 0;
  }
  /* 左栏行距略松一点，让文字自然填满图的高度 */
  .hero-title { line-height: 1.16 !important; }
  .hero-sub { margin-bottom: 4px !important; }
  .hero-actions { margin-top: 18px !important; margin-bottom: 0 !important; }
  .hero-stats { grid-column: 1 / -1; order: 6; justify-self: stretch !important; }
  .grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
  .section { padding: 64px 0 !important; }
  .section-desc { font-size: .98rem !important; margin-bottom: 34px !important; }
  .modal-card { padding: 34px 30px !important; }
}

/* ========== 桌面 ========== */
@media (min-width: 1100px) {
  .hero { padding: 96px 0 44px !important; }
  .hero-inner::after { aspect-ratio: 5 / 6; }
  .section { padding: 76px 0 !important; }
  .social-matrix { grid-template-columns: repeat(2, max-content); justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===================================================================
   导航栏两个图标按钮的最终尺寸（放在最末尾，保证压过后面的 .btn 规则）
   -------------------------------------------------------------------
   之前踩过的坑：.developer-btn 的 padding/font-size 写在 .btn 规则之前，
   同优先级同 !important 时后者胜出，导致
     · width:34px 被 40px padding 撑成 42.5px
     · font-size:0 失效，文字"网站贡献者"溢出到导航栏外
   这里用 .nav-auth 前缀提高优先级，并加 overflow:hidden 兜底。
   =================================================================== */
.nav-auth .theme-toggle,
.nav-auth .developer-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid var(--v9-line) !important;
  background: var(--v9-surface) !important;
  color: var(--v9-ink) !important;
  box-shadow: var(--v9-shadow);
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex: none !important;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s !important;
}
.nav-auth .theme-toggle { font-size: .95rem !important; }
.nav-auth .developer-btn { font-size: 0 !important; }          /* 只显示 ::before 的图标 */
.nav-auth .developer-btn::before { content: '🛠️'; font-size: .95rem; }
.nav-auth .theme-toggle:hover,
.nav-auth .developer-btn:hover {
  border-color: var(--v9-accent) !important;
  background: var(--v9-pink) !important;
}
/* 「我的名片」跟图标按钮等高，一行才整齐 */
.nav-auth #loginBtn {
  height: 34px !important;
  padding: 0 14px !important;
  font-size: .82rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ===================================================================
   主题面板：改成 🎨 按钮下方的下拉菜单
   -------------------------------------------------------------------
   原来 @media 里把它写成了"底部抽屉"：position: fixed; bottom: 0; width: 100%。
   但 .nav 上有 backdrop-filter，它会让 fixed 子元素以「导航栏」为定位基准，
   于是抽屉被顶到屏幕外（实测 top: -275px），点了按钮像没反应。
   现在改回锚定在按钮下方的绝对定位下拉，绕开这个坑。
   =================================================================== */
.nav-auth .theme-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: min(76vw, 232px) !important;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px !important;
  border-radius: 14px !important;
  background: var(--v9-surface) !important;
  border: 1px solid var(--v9-line) !important;
  border-top: 1px solid var(--v9-line) !important;
  box-shadow: 0 14px 36px rgba(20,17,15,.16) !important;
  transform: translateY(-8px) !important;
  z-index: 200;
}
.nav-auth .theme-panel.open { transform: translateY(0) !important; }
.nav-auth .theme-panel-title {
  text-align: left !important;
  margin-bottom: 8px !important;
  font-size: .72rem !important;
  letter-spacing: .14em;
}
.nav-auth .theme-option {
  text-align: left !important;
  padding: 9px 12px !important;
  margin-bottom: 4px !important;
  font-size: .84rem !important;
}
/* 窄屏时别顶到屏幕右边外面 */
@media (max-width: 400px) {
  .nav-auth .theme-panel { right: -46px !important; }
}

body.scroll-locked { overflow: hidden !important; }

/* 金色/黄色主题的文字色需要压得更深才够对比度（50% 混合实测仅 3.82 与 4.51）。
   这两个主题单独收到 38%，其余主题保持 50% 以留住色彩。 */
html[data-theme="genshin"] { --v9-accent-ink: color-mix(in srgb, var(--v9-accent) 38%, #14110f); }
html[data-theme="cyber"]   { --v9-accent-ink: color-mix(in srgb, var(--v9-accent) 38%, #14110f); }

/* ===================================================================
   🐞 修复：画廊筛选失效
   -------------------------------------------------------------------
   筛选逻辑是 item.hidden = !show，但 .gallery-item 上写了
   display: block !important（为了抵消 .btn 的规则），
   于是 [hidden] 的 display:none 被覆盖，点了筛选永远显示全部。
   这里用「类+属性」把它明确压回去。
   =================================================================== */
.gallery-item[hidden] { display: none !important; }

/* 🐞 修复：今日运势文字与背景同色
   --text-main 是 #eaeaf2（近白），而盒子底色被换成了 #fffdf8（近白），
   文字等于隐身。这里把文字改成墨色，并给盒子一个像样的浅色卡片外观。 */
#daily-acg-box {
  background: var(--v9-band) !important;
  border: 1px solid var(--v9-line) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
#daily-acg-text,
#daily-acg-box p {
  color: var(--v9-ink) !important;
  line-height: 1.7 !important;
}
#daily-acg-box strong,
#daily-acg-box em { color: var(--v9-accent-ink) !important; }
#daily-acg-box small,
#daily-acg-box .daily-meta { color: var(--v9-ink-3) !important; }


/* ===================================================================
   ✨ v0.9 视觉增强：渐变文字 + 动效
   -------------------------------------------------------------------
   之前为了修「标题渐变混进 --accent 发青」，我把渐变整个关掉了，
   结果标题变成纯黑，确实单调。这里加回来，但改成从主题色派生：
     --v9-grad-1  = accent-ink（已压深，保证对比度）
     --v9-grad-2  = accent-ink 与墨色混合（更深）
   所以金色/黄色主题也不会出现浅到看不清的渐变。
   =================================================================== */
:root {
  /* 渐变两端都用主题色派生：亮端 45%、暗端 18%，
     既看得出颜色变化，又保证在暖白底上 ≥4.5:1（标题是大字，阈值 3:1，留足余量） */
  --v9-grad-1: color-mix(in srgb, var(--v9-accent) 45%, #14110f);
  --v9-grad-2: color-mix(in srgb, var(--v9-accent) 16%, #14110f);
}

@keyframes v9GradFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 标题里的彩色词 + 首屏强调词，都用流动渐变 */
.section-title .grad,
.hero-title .hero-em {
  background-image: linear-gradient(100deg,
      var(--v9-grad-1) 0%,
      var(--v9-grad-2) 28%,
      var(--v9-grad-1) 55%,
      var(--v9-grad-2) 82%,
      var(--v9-grad-1) 100%) !important;
  background-size: 260% 100% !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: v9GradFlow 11s ease-in-out infinite !important;
}
/* 极少数不支持 background-clip:text 的环境下退回实色，避免文字消失 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-title .grad,
  .hero-title .hero-em {
    -webkit-text-fill-color: currentColor !important;
    color: var(--v9-accent-ink) !important;
    background: none !important;
    animation: none !important;
  }
}

/* ---------- 按钮：hover 时一道高光扫过 ---------- */
.btn { position: relative !important; overflow: hidden !important; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn-ghost::after {
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--v9-accent) 22%, transparent) 50%, transparent 70%);
}

/* ---------- 卡片：hover 抬升 + 图标轻弹 + 跟随指针的光晕 ---------- */
.card {
  --mx: 50%; --my: 50%;
  position: relative !important;
  isolation: isolate;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx) var(--my),
              color-mix(in srgb, var(--v9-accent) 14%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 0;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: color-mix(in srgb, var(--v9-accent) 42%, var(--v9-line)) !important; }
.card > * { position: relative; z-index: 1; }
.card:hover .card-icon { transform: translateY(-2px) scale(1.1); }
.card-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); }

/* ---------- 画廊：hover 放大 + 主题色描边 ---------- */
.gallery-item { transition: border-color .25s, box-shadow .25s, transform .25s; }
.gallery-item:hover {
  border-color: color-mix(in srgb, var(--v9-accent) 45%, var(--v9-line)) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--v9-accent) 16%, transparent) !important;
  transform: translateY(-2px);
}
.gallery-item:hover img { transform: scale(1.05) !important; }

/* ---------- 首屏主视觉：轻微悬浮 + hover 光边 ---------- */
@keyframes v9Float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero-inner::after {
  animation: v9Float 9s ease-in-out infinite;
  transition: box-shadow .35s, border-color .35s;
}
.hero-inner:hover::after {
  border-color: color-mix(in srgb, var(--v9-accent) 40%, var(--v9-line)) !important;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--v9-accent) 20%, transparent) !important;
}

/* ---------- 交替分区：两团很淡的主题色光晕，避免大片纯色 ---------- */
.section-alt {
  background-image:
    radial-gradient(620px 300px at 12% 0%, color-mix(in srgb, var(--v9-accent) 7%, transparent), transparent 70%),
    radial-gradient(520px 280px at 88% 100%, color-mix(in srgb, var(--v9-accent) 5%, transparent), transparent 72%) !important;
}

/* ---------- 区段标签：短线改为渐隐光条 ---------- */
.section-label::after {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--v9-accent) 70%, transparent),
      transparent) !important;
}

/* ---------- 数据数字：和标题同一套渐变 ---------- */
.hero-stats .stat strong {
  background-image: linear-gradient(100deg, var(--v9-grad-1), var(--v9-grad-2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-stats .stat strong {
    -webkit-text-fill-color: currentColor !important;
    color: var(--v9-accent-ink) !important;
    background: none !important;
  }
}

/* ---------- 尊重「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  .section-title .grad,
  .hero-title .hero-em,
  .hero-inner::after { animation: none !important; }
  .section-title .grad,
  .hero-title .hero-em { background-position: 0% 50% !important; }
  .btn::after { display: none; }
  .card:hover, .gallery-item:hover { transform: none; }
}

/* 运势出处：《书名》那一行原来是 --text-dim(#8888a0)，在米色底上只有约 3.2:1，
   和不透明的背景几乎融在一起。改成墨色次级色，仍保留字号层级。 */
#daily-acg-author {
  color: var(--v9-ink-2) !important;
  font-size: .82rem !important;
}

/* ===================================================================
   ♿ 对比度修正（全站文字审计发现）
   -------------------------------------------------------------------
   1. logo 方块与音乐页签：底色是主题强调色，文字却写死 #fff。
      金色(#ffcc00)/黄色(#fcee0a)主题下白字对比度只有 1.2~1.5，几乎看不见。
      → 改用主题自带的 --on-primary（各主题已按对比度配好）。
   2. 活动年份沿用了 --text-dim(#8888a0)，在暖白底上仅 3.14。
   3. 「进行中」绿字在淡青底上 4.27，「社团档案」小字 3.8，均差一点。
   =================================================================== */
.logo-mark { color: var(--on-primary, #fff) !important; }
.ms-tab { color: var(--on-primary, #fff) !important; }

.activity-date span { color: var(--v9-ink-3) !important; }
.activity-date strong { color: var(--v9-ink) !important; }

.status-进行中 {
  color: #0d6b4f !important;
  border-color: rgba(13,107,79,.32) !important;
}
.status-计划中 { color: #7a4e06 !important; }
.status-已结束 { color: var(--v9-ink-3) !important; }

.v8-plate-kicker { color: var(--v9-ink-2) !important; }

/* ===================================================================
   🏷️ 品牌标记：整 → ACG 矢量（跟随主题色）
   -------------------------------------------------------------------
   原来 logo-mark 里是一个汉字"整"，和新的 ACG 图标不一致。
   现在换成同一套字形轮廓的内联 SVG：底色仍是主题色（跟随换肤），
   字形用 currentColor（也就是 --on-primary），保证对比度。
   =================================================================== */
.logo-mark svg,
.acgb-s1-mark svg {
  display: block;
  overflow: visible;
}
/* 导航里的标记只有 24~30px，字形要占满一点才认得出 */
.logo-mark svg { width: 88%; height: 88%; }
/* 开屏里的标记 52px，留点内边距更好看 */
.acgb-s1-mark svg { width: 72%; height: 72%; }
.logo-mark { padding: 0 !important; }
.logo-mark svg .acg-glyph { fill: currentColor; }

/* 开屏：强调色跟随当前主题，不再是写死的 #ff0033 */
#acgBoot { --acgb-accent: var(--v9-accent); --acgb-bar: var(--v9-accent); }


/* ===================================================================
   🎵 音乐播放器 v2
   -------------------------------------------------------------------
   这一层覆盖前面的深色版播放器样式。要点：
     · 桌面：贴在右侧、加宽到 300px，白卡片 + 细边 + 柔和阴影
     · 手机：从底部上滑的半屏抽屉（带拖拽把手），触控目标 ≥ 40px
     · 封面：主题色渐变 + 播放时缓慢旋转的光环
     · 进度：自绘进度条（原生 range 只当交互层），拖动时不再被 timeupdate 拽回
   =================================================================== */
.music-side {
  --ms-w: 300px;
  --ms-tab: 44px;
  z-index: 88 !important;
}

/* ---------- 收起时的页签 ---------- */
.ms-tab {
  width: var(--ms-tab) !important;
  height: var(--ms-tab) !important;
  border-radius: 14px 0 0 14px !important;
  background: var(--v9-accent) !important;
  color: var(--on-primary, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--v9-accent) 55%, #000) !important;
  box-shadow: -6px 6px 20px color-mix(in srgb, var(--v9-accent) 24%, transparent) !important;
  display: grid !important;
  place-items: center !important;
  position: relative;
}
.ms-tab-icon { font-size: 1.05rem; line-height: 1; transition: opacity .2s; }

/* 播放中的小均衡器：四根跳动的柱子 */
.ms-eq {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding-bottom: 12px;
}
.ms-eq.on { display: flex; }
.ms-eq.on + .ms-tab-icon { opacity: 0; }
.ms-eq i {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  animation: msEq .9s ease-in-out infinite;
  opacity: .95;
}
.ms-eq i:nth-child(2) { animation-delay: .15s; }
.ms-eq i:nth-child(3) { animation-delay: .3s; }
.ms-eq i:nth-child(4) { animation-delay: .45s; }
@keyframes msEq {
  0%, 100% { height: 5px; }
  50%      { height: 15px; }
}

/* ---------- 抽屉主体 ---------- */
.ms-drawer {
  width: var(--ms-w) !important;
  max-width: calc(100vw - 20px) !important;
  padding: 14px 16px 16px !important;
  background: var(--v9-surface) !important;
  border: 1px solid var(--v9-line) !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: -18px 14px 46px rgba(20,17,15,.16) !important;
  color: var(--v9-ink) !important;
}
.ms-grab { display: none; }

.ms-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--v9-line-2);
  margin-bottom: 12px;
}
.ms-head-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--v9-mono, monospace);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v9-ink-2) !important;
}
.ms-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--v9-ink-3);
  transition: background .2s, box-shadow .2s;
}
.music-side.is-playing .ms-live {
  background: var(--v9-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--v9-accent) 60%, transparent);
  animation: msPulse 1.6s ease-out infinite;
}
@keyframes msPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v9-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.ms-close {
  width: 26px !important; height: 26px !important;
  border-radius: 8px !important;
  display: grid; place-items: center;
  color: var(--v9-ink-3) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: .8rem !important;
  cursor: pointer;
  transition: .18s;
}
.ms-close:hover { background: var(--v9-band) !important; color: var(--v9-ink) !important; border-color: var(--v9-line) !important; }

/* ---------- 封面 ---------- */
.ms-cover {
  position: relative;
  width: 100% !important;
  height: 132px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--v9-accent) 26%, #fff) 0%, transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--v9-accent) 16%, #fff) 0%,
      color-mix(in srgb, var(--v9-accent) 8%, #fff) 100%) !important;
  border: 1px solid var(--v9-line-2) !important;
  margin-bottom: 12px;
}
.ms-cover-emoji {
  font-size: 2.8rem !important;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(20,17,15,.18));
  transition: transform .3s;
}
.music-side.is-playing .ms-cover-emoji { animation: msBob 2.6s ease-in-out infinite; }
@keyframes msBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.04); }
}
/* 播放时缓慢旋转的光环 */
.ms-cover-ring {
  position: absolute;
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--v9-accent) 34%, transparent);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.music-side.is-playing .ms-cover-ring {
  opacity: 1;
  animation: msSpin 14s linear infinite;
}
@keyframes msSpin { to { transform: rotate(360deg); } }

/* ---------- 曲目信息 ---------- */
.ms-meta { text-align: center !important; margin-bottom: 10px !important; }
.ms-name {
  font-size: .95rem !important; font-weight: 700;
  color: var(--v9-ink) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-artist {
  font-size: .72rem !important;
  color: var(--v9-ink-3) !important;
  margin-top: 2px !important;
  font-family: var(--v9-mono, monospace);
  letter-spacing: .04em;
}

/* ---------- 进度 ---------- */
.ms-bar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 9px !important;
  margin-bottom: 12px !important;
}
.ms-time {
  font-family: var(--v9-mono, monospace);
  font-size: .66rem !important;
  color: var(--v9-ink-3) !important;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
}
.ms-track { position: relative; height: 18px; display: flex; align-items: center; }
/* 自绘轨道 */
.ms-track::before {
  content: "";
  position: absolute; left: 0; right: 0; height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v9-ink) 10%, transparent);
}
.ms-progress {
  position: absolute; left: 0; top: 50%;
  height: 5px; width: 0;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--v9-accent) 70%, #14110f),
    var(--v9-accent));
  pointer-events: none;
  z-index: 1;
}
/* 原生 range 当交互层：透明轨道，只留滑块 */
.ms-seek {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 2;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  background: transparent !important;
  cursor: pointer;
}
.ms-seek::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.ms-seek::-moz-range-track { height: 18px; background: transparent; }
.ms-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--v9-accent);
  box-shadow: 0 1px 4px rgba(20,17,15,.3);
  margin-top: 3px;
  transition: transform .15s;
}
.ms-seek:hover::-webkit-slider-thumb { transform: scale(1.18); }
.ms-seek::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--v9-accent);
  box-shadow: 0 1px 4px rgba(20,17,15,.3);
}
.ms-seek:focus-visible { outline: 2px solid var(--v9-accent); outline-offset: 3px; border-radius: 8px; }

/* ---------- 按钮组 ---------- */
.ms-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.ms-btn {
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  background: var(--v9-band) !important;
  color: var(--v9-ink) !important;
  border: 1px solid var(--v9-line) !important;
  display: grid; place-items: center;
  font-size: .9rem !important;
  cursor: pointer;
  transition: .16s;
}
.ms-btn:hover { border-color: var(--v9-accent) !important; background: var(--v9-pink) !important; }
.ms-play {
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: var(--v9-accent) !important;
  color: var(--on-primary, #fff) !important;
  border-color: transparent !important;
  font-size: 1rem !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--v9-accent) 34%, transparent) !important;
}
.ms-play:hover { filter: brightness(1.06); background: var(--v9-accent) !important; }

/* 音量 */
.ms-vol {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--v9-line-2);
}
.ms-mute { width: 30px !important; height: 30px !important; font-size: .78rem !important; }
.ms-vol-range {
  -webkit-appearance: none; appearance: none;
  width: 62px; height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v9-ink) 14%, transparent);
  cursor: pointer;
}
.ms-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--v9-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(20,17,15,.28);
}
.ms-vol-range::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--v9-accent); border: 2px solid #fff;
}

/* ---------- 播放列表 ---------- */
.ms-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--v9-line-2);
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ms-list::-webkit-scrollbar { width: 5px; }
.ms-list::-webkit-scrollbar-thumb { background: var(--v9-line); border-radius: 999px; }
.ms-item {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--v9-line-2);
  color: var(--v9-ink-2);
  font: inherit;
  font-size: .8rem;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.ms-item:hover { background: var(--v9-band); color: var(--v9-ink); }
.ms-item.active { color: var(--v9-accent-ink); font-weight: 700; background: var(--v9-pink); }
.ms-item-emoji { font-size: .95rem; flex: none; }
.ms-item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ms-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-item-artist {
  font-size: .68rem; color: var(--v9-ink-3);
  font-family: var(--v9-mono, monospace);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-item.active .ms-item-artist { color: color-mix(in srgb, var(--v9-accent) 55%, var(--v9-ink)); }
.ms-item-state {
  flex: none; width: 14px; text-align: center;
  font-size: .6rem; color: var(--v9-accent);
  font-family: var(--v9-mono, monospace);
}

/* 频谱：放进封面下方，稍高一点 */
.ms-spectrum {
  height: 30px !important;
  margin: -4px 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ---------- 手机：底部上滑半屏 ---------- */
@media (max-width: 819px) {
  .music-side {
    --ms-w: 100%;
    position: fixed !important;
    right: 0 !important; left: auto !important;
    bottom: 0 !important; top: auto !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    max-width: 100vw !important;
  }
  .ms-tab {
    margin: 0 12px 76px 0 !important;   /* 让开 back-top 与底部安全区 */
    border-radius: 14px !important;
    width: 42px !important; height: 42px !important;
    opacity: .55 !important;
  }
  .ms-tab:active, .music-side.open .ms-tab { opacity: 1 !important; }

  .ms-drawer {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 86dvh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0 !important;
    border-width: 1px 0 0 !important;
    padding: 8px 18px calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translateY(102%) !important;
    transition: transform .34s cubic-bezier(.22,.61,.36,1) !important;
    box-shadow: 0 -14px 40px rgba(20,17,15,.18) !important;
    z-index: 90 !important;
  }
  .music-side.open .ms-drawer { transform: translateY(0) !important; }

  /* 拖拽把手 */
  .ms-grab {
    display: block;
    width: 42px; height: 4px;
    border-radius: 999px;
    background: var(--v9-line);
    margin: 2px auto 10px;
  }
  .ms-cover { height: 150px !important; }
  .ms-btn { width: 40px !important; height: 40px !important; }
  .ms-play { width: 54px !important; height: 54px !important; }
  .ms-mute { width: 36px !important; height: 36px !important; }
  .ms-vol-range { width: 84px; height: 6px; }
  .ms-item { padding: 11px 6px; font-size: .84rem; }
  .ms-list { max-height: 34dvh; }
}

/* 尊重减少动态效果 */
@media (prefers-reduced-motion: reduce) {
  .ms-eq i, .ms-cover-ring, .music-side.is-playing .ms-cover-emoji, .ms-live { animation: none !important; }
}

/* ---------- 播放器收尾微调 ---------- */
/* 列表默认能完整放下 3 首，不出现半截行 */
.ms-list { max-height: 224px; }

/* 抽屉展开时把右侧页签淡出，避免留一条红色残边 */
@media (min-width: 820px) {
  .music-side.open .ms-tab { opacity: 0 !important; pointer-events: none !important; }
  .ms-tab { transition: opacity .2s, transform .18s !important; }
}

/* 手机端列表留够高度，但不超过抽屉 */
@media (max-width: 819px) {
  .ms-list { max-height: 38dvh; }
  .ms-cover { height: 136px !important; }
  .ms-meta { margin-bottom: 8px !important; }
  .ms-bar { margin-bottom: 10px !important; }
  .ms-controls { margin-bottom: 10px !important; }
}

/* ---------- 歌单计数 / 错误条 / 坏曲标记 ---------- */
.ms-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--v9-band);
  border: 1px solid var(--v9-line);
  color: var(--v9-ink-3);
  font-size: .62rem;
  letter-spacing: 0;
}
.ms-error {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, #d93025 8%, #fff);
  border: 1px solid color-mix(in srgb, #d93025 32%, #fff);
  color: #8c1d18;
  font-size: .72rem;
  line-height: 1.5;
  word-break: break-word;
}
.ms-error[hidden] { display: none !important; }

.ms-item.bad .ms-item-title { color: #8c1d18; }
.ms-item.bad .ms-item-state::before { content: '!'; color: #d93025; font-weight: 700; }
.ms-item.bad .ms-item-state { color: #d93025; }


/* ===================================================================
   📱 手机端弹层滚动修复
   -------------------------------------------------------------------
   旧结构：居中卡片 + max-height:88vh + 卡片自己 overflow:auto。
   手机上 vh 取"大视口"，卡片常比可见区域高；上下两端都被切，
   手指一旦滑到卡片外的遮罩上（那里不滚），就表现为「滑不动」。

   现在：
     · 所有弹层：卡片可滚、overscroll 不传染、touch-action 明确允许纵向拖动
     · 开发者中心 / 开发者名单（内容长）：做成整屏面板，关闭按钮 sticky 常驻
     · 部门介绍、登录等短弹层：保持居中卡片，不会变成一大片空白
   =================================================================== */
@media (max-width: 819px) {
  .modal-overlay {
    align-items: center !important;
    padding: 14px !important;
  }

  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    margin: auto !important;
    border-radius: 18px !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .modal-overlay.active .modal-card { transform: none !important; }

  /* 关闭按钮常驻，滚动时也点得到 */
  .modal-close {
    position: sticky !important;
    top: 0 !important;
    float: right;
    margin: -10px -8px 0 0 !important;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--v9-surface, #fff) !important;
    border: 1px solid var(--v9-line, #e6e0d4) !important;
    z-index: 30;
  }

  /* ---- 内容长的两个弹层：整屏面板 ---- */
  #devCenterModal,
  #developerModal {
    align-items: stretch !important;
    padding: 0 !important;
  }
  #devCenterModal .modal-card,
  #developerModal .modal-card {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 22px 18px calc(28px + env(safe-area-inset-bottom)) !important;
  }

  /* 开发者中心内部：单列排布 */
  .dev-center-card { max-width: 100% !important; max-height: none !important; }
  .dev-center-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 18px !important; }
  .dev-panel { padding: 15px !important; }
  .dev-panel-wide { grid-column: auto !important; }
  .changelog-item { grid-template-columns: 1fr !important; gap: 3px !important; }
  .changelog-item strong { font-size: .74rem; letter-spacing: .04em; }
  .debug-output { grid-template-columns: 1fr !important; }

  /* 开发者名单 */
  .developer-card { max-width: 100% !important; }
  .developer-grid { grid-template-columns: 1fr !important; }
}

/* ===== 视觉方案 v0.9 结束 ===== */

/* ===================================================================
   ⚡ 开屏 · 融合终末地机制（2026-10-20）
   -------------------------------------------------------------------
   在原有「黑幕 → 洗白 → 技术档案底板 → 五步授权 → 色散揭幕」上，
   并入 endfield-ui 的三处机械动效：
     1. 幕 1 通电：一条强调色横线把屏幕点亮 + 扫描线扫过
     2. 副标题乱码落定（JS 里 scrambleIn）
     3. 退场快门：两块纸色面板合上再上下分开，露出首屏
   曲线沿用终末地的 mech / snap，不用弹跳。
   =================================================================== */

:root {
  --acgb-mech: cubic-bezier(.7, 0, .2, 1);
  --acgb-snap: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 幕 1：通电 ---------- */
/* 用 scaleX 而不是 width：不动布局属性，曲线也更顺 */
.acgb-pw {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  width: min(46%, 520px);
  background: var(--acgb-accent);
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: 50% 50%;
  box-shadow: 0 0 18px color-mix(in srgb, var(--acgb-accent) 65%, transparent);
  animation: acgbPw 430ms var(--acgb-mech) forwards, acgbPwOut 260ms var(--acgb-mech) 1150ms forwards;
}
@keyframes acgbPw {
  0%   { transform: translate(-50%, -50%) scaleX(0); }
  100% { transform: translate(-50%, -50%) scaleX(1); }
}
@keyframes acgbPwOut {
  to { opacity: 0; }
}

/* 通电后那条缝留在原地，作为后面内容的中轴 */
.acgb-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: 50%;
  background: linear-gradient(90deg, transparent, var(--acgb-accent), transparent);
  opacity: 0;
  animation: acgbScan 620ms var(--acgb-mech) 260ms forwards;
}
@keyframes acgbScan {
  0%   { top: 50%; opacity: 0; }
  15%  { opacity: .85; }
  100% { top: 0; opacity: 0; }
}

/* 幕 1 的标识改为「被通电点亮」：更快、更硬，不再软软地飘上来 */
.acgb-s1-logo {
  animation: acgbLogoIn .44s var(--acgb-snap) .30s forwards !important;
  /* 垫一层纯黑遮住通电线，形成"线撞到标识就停"的观感 */
  background: #000;
  padding: 0 20px;
}

/* ---------- 退场：快门 ---------- */
.acgb-shutter {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  display: none;
}
.acgb-shutter.go { display: block; }
.acgb-shutter i {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: var(--v9-bg, #f7f4ec);
  display: block;
}
.acgb-shutter i:nth-child(1) { top: 0; }
.acgb-shutter i:nth-child(2) { bottom: 0; }
/* 中缝一道强调色细线，分开瞬间收掉 */
.acgb-shutter::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--acgb-accent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
}
.acgb-shutter.go::after {
  animation: acgbSeam 380ms var(--acgb-snap) forwards;
}
.acgb-shutter.go i:nth-child(1) {
  animation: acgbShutterUp 420ms var(--acgb-mech) 60ms forwards;
}
.acgb-shutter.go i:nth-child(2) {
  animation: acgbShutterDown 420ms var(--acgb-mech) 60ms forwards;
}
@keyframes acgbSeam {
  0%   { transform: scaleX(0); }
  45%  { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes acgbShutterUp { to { transform: translateY(-101%); } }
@keyframes acgbShutterDown { to { transform: translateY(101%); } }

/* ---------- 步骤编号：等宽数字，计数时不跳动 ---------- */
.acgb-stepnow {
  font-variant-numeric: tabular-nums;
}

/* ---------- 减少动态效果：一律不播，直接显示终态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .acgb-pw,
  .acgb-scan,
  .acgb-shutter,
  .acgb-shutter i,
  .acgb-shutter::after { display: none !important; animation: none !important; }
  .acgb-s1-logo { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- 右上角：实时数据 + SKIP ---------- */
.acgb-topright {
  position: absolute;
  top: clamp(18px, 3.5vh, 30px);
  right: clamp(18px, 3vw, 30px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* 包进 flex 后，SKIP 不再自己绝对定位 */
.acgb-topright .acgb-skip {
  position: static;
  top: auto;
  right: auto;
}

.acgb-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 黑幕阶段先不显示：深色字压黑底等于看不见，等底板亮起再淡入 */
  opacity: 0;
  transition: opacity .42s ease;
}
.acgb-hud.on { opacity: 1; }
.acgb-hud-i {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.acgb-hud-i b {
  font-family: var(--acgb-din);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--acgb-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.acgb-hud-i i {
  font-style: normal;
  font-family: var(--acgb-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--acgb-muted);
  line-height: 1;
}
.acgb-hud-sep {
  width: 1px;
  height: 13px;
  background: var(--acgb-hair);
  flex: none;
}

/* 窄屏：标签缩一号，避免和 SKIP 挤在一起 */
@media (max-width: 620px) {
  .acgb-topright { gap: 12px; }
  .acgb-hud { gap: 8px; }
  .acgb-hud-i { gap: 4px; }
  .acgb-hud-i b { font-size: .9rem; }
  .acgb-hud-i i { font-size: .52rem; letter-spacing: .1em; }
}
@media (max-width: 420px) {
  /* 再窄就只留数字，标签让位给 SKIP */
  .acgb-hud-i i { display: none; }
  .acgb-hud-sep { height: 11px; }
}