/* ============================================================
   CidneyAurum の 小窝 · v3
   设计语言：全站一个场景（模糊背景+流萤+草地+像素装饰）
            衬线大标题 / 克制布局 / 暗色玻璃
   ============================================================ */

:root {
  --bg: #0a0b16;
  --card: rgba(17, 18, 36, 0.6);
  --card-deep: rgba(11, 12, 26, 0.72);
  --border: rgba(170, 160, 255, 0.14);
  --text: #eae8f4;
  --text-light: #9a97b4;
  --accent: #8f7bff;
  --accent-2: #5ea2ff;
  --accent-pink: #ff8fb7;
  --gold: #d9b96c;
  --shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
  --nav-bg: rgba(10, 11, 22, 0.55);
  --chip-bg: rgba(143, 123, 255, 0.12);
  --font-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-latin: Georgia, "Times New Roman", serif;
}

body.light {
  --bg: #eceafa;
  --card: rgba(255, 255, 255, 0.66);
  --card-deep: rgba(255, 255, 255, 0.85);
  --border: rgba(80, 60, 160, 0.16);
  --text: #322c50;
  --text-light: #716c92;
  --accent: #6a56e0;
  --accent-2: #3a76d8;
  --accent-pink: #e0609a;
  --gold: #a8801f;
  --shadow: 0 12px 40px rgba(90, 70, 180, 0.18);
  --nav-bg: rgba(240, 238, 252, 0.65);
  --chip-bg: rgba(106, 86, 224, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #fff; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
img { max-width: 100%; }
.serif { font-family: var(--font-serif); }

/* ============ 场景层：背景图 + 遮罩 + 草地 ============ */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) saturate(0.8) hue-rotate(-12deg);
  transform: scale(1.15);
}
body.light .scene-bg { filter: brightness(0.92) saturate(0.85); }
/* 无背景图时的极光兜底 */
.scene.no-bg {
  background:
    radial-gradient(1100px 620px at 85% -8%, #221648 0%, transparent 60%),
    radial-gradient(900px 560px at -12% 18%, #0e1e3d 0%, transparent 58%),
    radial-gradient(800px 600px at 70% 110%, #2a1233 0%, transparent 55%),
    var(--bg);
}
.scene.no-bg .scene-bg { display: none; }
.scene-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(143, 123, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(9, 9, 20, 0.5) 0%, rgba(9, 9, 20, 0.28) 40%, rgba(9, 9, 20, 0.62) 100%);
}
body.light .scene-overlay {
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(240, 238, 252, 0.5), rgba(240, 238, 252, 0.25) 40%, rgba(240, 238, 252, 0.65));
}
.scene-grass {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 110px;
  opacity: 0.55;
}
#firefly-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* 像素小装饰（猫 & 鱼） */
.pixel-deco { position: fixed; z-index: 6; pointer-events: none; image-rendering: pixelated; }
.pixel-deco.cat { right: 118px; bottom: 24px; width: 56px; animation: bob 3.2s ease-in-out infinite; }
.pixel-deco.fish { right: 70px; bottom: 44px; width: 30px; animation: bob 3.2s ease-in-out 1.4s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* 返回顶部 */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-deep);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.35s ease;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { border-color: var(--accent); box-shadow: 0 0 18px rgba(143, 123, 255, 0.4); }

/* ============ 载入动画 ============ */
.page-enter { animation: pageIn 0.9s ease both; }
/* ⚠️ body 不能带 transform：会给所有 position:fixed 子元素
   （看板娘/舞台面板/像素猫）创建包含块，滚动时会跟着页面跑掉 */
body.page-enter { animation: bodyFade 0.8s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bodyFade { from { opacity: 0; } to { opacity: 1; } }

/* ============ 导航 ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 4.5vw, 56px);
  background: linear-gradient(180deg, rgba(8, 8, 18, 0.55), transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.light .nav { background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent); }
.logo {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
}
.logo:hover { color: #fff; }
body.light .logo:hover { color: var(--accent); }
.logo .no { color: var(--accent); font-size: 17px; padding: 0 2px; }
.nav-links { display: flex; align-items: center; gap: clamp(6px, 2.2vw, 30px); }
.nav-link {
  font-family: var(--font-serif);
  font-size: 15.5px;
  letter-spacing: 0.08em;
  color: var(--text-light);
  padding: 6px 2px;
  position: relative;
  transition: color 0.25s;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -5px;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--chip-bg);
  color: var(--text);
  cursor: pointer; font-size: 15px;
  transition: all 0.25s;
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
#hamburger { display: none; }

/* ============ 布局 ============ */
.wrap { width: min(1180px, calc(100% - 44px)); margin: 0 auto; position: relative; z-index: 5; }
section.block { margin-top: clamp(56px, 9vh, 90px); }

/* 页面大标题体系 */
.page-head { padding: 150px 0 8px; text-align: center; }
.page-head.left { text-align: left; }
.page-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 54px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.page-sub {
  margin-top: 14px;
  color: var(--text-light);
  font-size: 13.5px;
  letter-spacing: 0.3em;
}
.page-sub .star { color: var(--accent); margin: 0 10px; }

/* ============ 玻璃卡片 ============ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card:hover { border-color: rgba(143, 123, 255, 0.35); }

/* ============ 首页 Hero ============ */
.hero { padding-top: 128px; }
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }

.profile-card { padding: 30px 32px; display: flex; flex-direction: column; gap: 22px; }
.profile-top { display: flex; align-items: center; gap: 24px; }
.avatar-ring {
  width: 100px; height: 100px;
  border-radius: 26%;
  padding: 3px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 26px rgba(143, 123, 255, 0.45);
}
.avatar-ring img { width: 100%; height: 100%; border-radius: 24%; object-fit: cover; display: block; }
.profile-name { font-family: var(--font-serif); font-size: 32px; font-weight: 700; letter-spacing: 0.05em; }
.profile-desc { margin-top: 10px; color: var(--text-light); font-size: 14.5px; line-height: 1.9; }
.profile-stats { display: flex; border-top: 1px solid var(--border); padding-top: 18px; }
.stat { flex: 1; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.stat .num { font-family: var(--font-serif); font-size: 24px; }
.stat .label { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.social-row { display: flex; gap: 12px; justify-content: flex-end; }
.social-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip-bg); border: 1px solid var(--border);
  color: var(--text); font-size: 16px;
  transition: all 0.25s;
}
.social-btn:hover { transform: translateY(-3px) scale(1.06); border-color: var(--accent); box-shadow: 0 0 16px rgba(143,123,255,0.4); }

/* 播放器卡（环境电台，真的能播） */
.player-card { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.player-head { display: flex; align-items: center; gap: 18px; }
.vinyl {
  width: 82px; height: 82px;
  border-radius: 50%;
  flex-shrink: 0;
  padding: 6px;
  background:
    repeating-radial-gradient(circle at 50% 50%, #141524 0 2px, #1b1c30 2px 4px);
  border: 2px solid rgba(217, 185, 108, 0.4);
  box-shadow: 0 0 22px rgba(143, 123, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
}
.vinyl .disc {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  animation: spin 12s linear infinite;
  animation-play-state: paused;
}
.playing .vinyl .disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.player-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--gold);
  border: 1px solid rgba(217, 185, 108, 0.45);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-family: var(--font-latin);
}
.player-title { font-family: var(--font-serif); font-size: 21px; font-weight: 700; }
.player-sub { font-size: 12.5px; color: var(--text-light); margin-top: 4px; }
.player-quote { font-size: 13px; color: var(--accent); font-family: var(--font-serif); letter-spacing: 0.06em; }
.player-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); overflow: hidden; }
body.light .player-progress { background: rgba(0,0,0,0.07); }
.player-progress .fill {
  height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(143, 123, 255, 0.6);
  transition: width 0.6s linear;
}
.player-times { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-light); font-variant-numeric: tabular-nums; }
.player-controls { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.play-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-serif);
  font-size: 15.5px;
  letter-spacing: 0.12em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px rgba(143, 123, 255, 0.4);
  transition: all 0.25s;
}
.play-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(143, 123, 255, 0.55); }
.player-file {
  font-size: 11px;
  color: var(--text-light);
  max-width: 120px;
  line-height: 1.5;
}
.player-file input { display: none; }
.player-file label {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  cursor: pointer;
  transition: all 0.25s;
}
.player-file label:hover { border-color: var(--accent); color: var(--text); }

/* ============ 打字横幅 ============ */
.slogan-bar {
  margin-top: 24px;
  position: relative;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
.slogan-dots { position: absolute; left: 22px; display: flex; gap: 6px; }
.slogan-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.slogan-dots i:first-child { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.slogan-text {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2.6vw, 23px);
  letter-spacing: 0.16em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.slogan-text .caret {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--accent);
  vertical-align: -0.18em;
  margin-left: 4px;
  animation: blink 0.85s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.slogan-cat {
  position: absolute;
  right: 20px;
  bottom: -14px;
  width: 52px;
  image-rendering: pixelated;
  animation: bob 3.2s ease-in-out infinite;
}

/* ============ 首页内容区 ============ */
.home-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.62fr;
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
.featured-card { overflow: hidden; display: flex; flex-direction: column; cursor: pointer; color: var(--text); }
.featured-cover {
  height: 230px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 68px;
  background:
    radial-gradient(420px 190px at 18% 0%, rgba(143, 123, 255, 0.4), transparent 60%),
    radial-gradient(420px 210px at 92% 100%, rgba(94, 162, 255, 0.32), transparent 60%),
    linear-gradient(135deg, #1a1c3a, #241848 55%, #131e38);
}
body.light .featured-cover { background: linear-gradient(135deg, #e8e1ff, #dfe9ff 55%, #ffe6f1); }
.featured-card img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-badges { position: absolute; left: 18px; bottom: 16px; display: flex; gap: 10px; align-items: center; z-index: 2; }
.badge-latest {
  font-family: var(--font-latin);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #fff;
  background: var(--accent);
  padding: 5px 13px;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(143, 123, 255, 0.65);
}
.badge-date { font-size: 11px; color: var(--text-light); background: rgba(8, 8, 18, 0.6); border: 1px solid var(--border); padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(6px); }
.featured-body { padding: 22px 26px 26px; }
.featured-title { font-family: var(--font-serif); font-size: 26px; font-weight: 700; transition: color 0.25s; }
.featured-card:hover .featured-title { color: var(--accent); }
.featured-summary { margin-top: 12px; font-size: 13.5px; color: var(--text-light); line-height: 2; }

.records-card { padding: 22px 24px; }
.records-head {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 4px;
}
.records-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217,185,108,0.5), transparent); }
.record-item { display: block; padding: 15px 4px; border-bottom: 1px dashed var(--border); color: var(--text); }
.record-item:last-child { border-bottom: none; }
.record-meta { font-size: 11px; color: var(--text-light); margin-bottom: 6px; letter-spacing: 0.06em; }
.record-title { font-family: var(--font-serif); font-size: 17.5px; font-weight: 700; transition: color 0.25s; }
.record-item:hover .record-title { color: var(--accent); }
.record-summary { font-size: 12.5px; color: var(--text-light); margin-top: 6px; line-height: 1.8; }

.side-stack { display: flex; flex-direction: column; gap: 24px; }
.mini-card {
  flex: 1;
  padding: 24px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
  cursor: pointer;
  color: var(--text);
}
.mini-ico {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  box-shadow: 0 0 18px rgba(143, 123, 255, 0.35);
}
.mini-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; }
.mini-desc { font-size: 12px; color: var(--text-light); }

/* ============ 时钟条 ============ */
.clock-bar {
  margin: 24px 0 10px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.clock-time {
  font-family: var(--font-latin);
  font-size: 32px;
  letter-spacing: 0.14em;
  padding: 18px 32px;
  color: #fff;
  background: rgba(4, 5, 12, 0.85);
  display: flex; align-items: center;
  font-variant-numeric: tabular-nums;
}
body.light .clock-time { background: rgba(43, 36, 80, 0.9); }
.clock-info { display: flex; align-items: center; gap: 10px; padding: 0 26px; font-size: 13.5px; color: var(--text-light); }
.clock-info .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; flex-shrink: 0; }
.clock-info b { color: var(--text); }

/* ============ 归档页（拾光档案） ============ */
.search-box {
  margin: 34px auto 0;
  max-width: 600px;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 28px;
  border-radius: 999px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.search-box .ico { font-size: 16px; opacity: 0.7; }
.search-box input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: var(--font-body);
}
.search-box input::placeholder { color: var(--text-light); }

.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 26px 0 34px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.toolbar-left { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.25s;
}
.chip:hover { color: var(--text); transform: translateY(-2px); }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 14px rgba(143,123,255,0.5); }
.view-toggle { display: flex; gap: 8px; }
.view-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-light);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-serif);
  transition: all 0.25s;
}
.view-btn.on { color: var(--accent); border-color: var(--accent); background: var(--chip-bg); }

/* 时间轴视图 */
.timeline-view { position: relative; padding: 10px 0 30px; display: none; }
.timeline-view.on { display: block; }
.timeline-view::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent) 8%, var(--accent) 92%, transparent);
  opacity: 0.4;
}
.tl-item { position: relative; width: 50%; padding: 0 44px 36px; }
.tl-item:nth-of-type(odd) { left: 0; text-align: right; }
.tl-item:nth-of-type(even) { left: 50%; }
.tl-item::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
  box-shadow: 0 0 12px rgba(143, 123, 255, 0.7);
  z-index: 2;
}
.tl-item:nth-of-type(odd)::after { right: -7px; }
.tl-item:nth-of-type(even)::after { left: -6px; }
.tl-card { display: block; padding: 20px 24px; color: var(--text); }
.tl-meta { font-size: 11.5px; color: var(--text-light); margin-bottom: 8px; }
.tl-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; transition: color 0.25s; }
.tl-card:hover .tl-title { color: var(--accent); }
.tl-summary { font-size: 12.5px; color: var(--text-light); margin-top: 8px; line-height: 1.8; }
.tl-tags { display: flex; gap: 6px; margin-top: 10px; }
.tl-item:nth-of-type(odd) .tl-tags { justify-content: flex-end; }
.tag-mini { padding: 2px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--accent); border: 1px solid var(--border); font-size: 10.5px; }

/* 网格视图 */
.grid-view { display: flex; flex-direction: column; gap: 16px; padding-bottom: 26px; }
.grid-view.on { display: flex; }
.post-item { display: flex; align-items: center; gap: 20px; padding: 20px 24px; color: var(--text); }
.post-item:hover { transform: translateY(-3px); }
.post-cover {
  width: 74px; height: 74px;
  border-radius: 16px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: linear-gradient(135deg, #1c1e3e, #2a1a4a 60%, #16203c);
  border: 1px solid var(--border);
  overflow: hidden;
}
body.light .post-cover { background: linear-gradient(135deg, #e9e2ff, #dde8ff); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-main { flex: 1; min-width: 0; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-light); margin-bottom: 6px; flex-wrap: wrap; }
.post-date { display: inline-flex; gap: 5px; align-items: center; }
.post-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; }
.post-item:hover .post-title { color: var(--accent); }
.post-summary { font-size: 13px; color: var(--text-light); margin-top: 5px; line-height: 1.75; }
.post-arrow { color: var(--accent); font-size: 18px; opacity: 0; transform: translateX(-6px); transition: all 0.3s; }
.post-item:hover .post-arrow { opacity: 1; transform: none; }
.empty-tip { text-align: center; color: var(--text-light); padding: 60px 0; line-height: 2; }

/* ============ 照片墙（拍立得） ============ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
  padding: 30px 0 40px;
}
.polaroid {
  background: #fdfdfa;
  padding: 12px 12px 14px;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.polaroid:nth-child(odd) { --tilt: -2.4deg; }
.polaroid:nth-child(even) { --tilt: 2deg; }
.polaroid:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6); z-index: 3; }
.polaroid .ph {
  aspect-ratio: 3 / 3.4;
  overflow: hidden;
  background: #10121f;
}
.polaroid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid .cap {
  padding: 12px 4px 2px;
  text-align: center;
  color: #3a3550;
  font-family: var(--font-serif);
  font-size: 14.5px;
  letter-spacing: 0.1em;
}
.polaroid .cap small { display: block; color: #9a94b8; font-size: 10.5px; margin-top: 4px; font-family: var(--font-latin); letter-spacing: 0.2em; }
.polaroid .tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 92px;
  height: 26px;
  background: linear-gradient(90deg, rgba(255, 233, 244, 0.6), rgba(226, 220, 255, 0.6));
  border-left: 1px dashed rgba(255,255,255,0.6);
  border-right: 1px dashed rgba(255,255,255,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  backdrop-filter: blur(2px);
}
.photo-note { text-align: center; color: var(--text-light); font-size: 12.5px; letter-spacing: 0.2em; padding-bottom: 30px; }

/* ============ 关于页 ============ */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding-top: 150px;
}
.about-hero .avatar-ring { width: 130px; height: 130px; border-radius: 50%; }
.about-hero .avatar-ring img { border-radius: 50%; }
.about-name { font-family: var(--font-serif); font-size: 34px; font-weight: 900; letter-spacing: 0.1em; }
.about-line { color: var(--text-light); font-size: 14.5px; line-height: 2; max-width: 560px; }

.tl2 { position: relative; max-width: 640px; margin: 44px auto 0; padding-left: 26px; }
.tl2::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0.45;
}
.tl2-item { position: relative; padding: 0 0 30px 22px; }
.tl2-item::before {
  content: "";
  position: absolute;
  left: -27px; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
  box-shadow: 0 0 10px rgba(143,123,255,0.6);
}
.tl2-year { font-family: var(--font-latin); font-size: 12px; letter-spacing: 0.24em; color: var(--gold); }
.tl2-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; margin-top: 6px; }
.tl2-desc { font-size: 13.5px; color: var(--text-light); line-height: 1.9; margin-top: 6px; }

.chips-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 640px; margin: 10px auto 0; }
.contact-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.contact-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s;
}
.contact-pill:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }

/* ============ 文章页 ============ */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 116px 0 26px;
  align-items: start;
}
.article-card { padding: 0 0 40px; overflow: hidden; }
.article-cover {
  height: 250px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  background:
    radial-gradient(460px 200px at 20% 0%, rgba(143,123,255,0.35), transparent 60%),
    linear-gradient(135deg, #1a1c3a, #241848 55%, #131e38);
}
body.light .article-cover { background: linear-gradient(135deg, #e8e1ff, #dfe9ff); }
.article-cover img.coverall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-inner { padding: 30px clamp(22px, 4vw, 46px) 0; }
.back-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  transition: all 0.25s;
}
.back-pill:hover { color: var(--accent); border-color: var(--accent); }
.article-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 22px 0 14px;
  line-height: 1.5;
}
.article-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--text-light);
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px dashed var(--border);
}
.prose { line-height: 2.1; font-size: 15px; }
.prose p { margin: 14px 0; }
.prose h2 { font-family: var(--font-serif); font-size: 22px; margin: 36px 0 14px; padding-left: 14px; border-left: 3px solid var(--accent); line-height: 1.5; }
.prose h3 { font-size: 17.5px; margin: 26px 0 10px; }
.prose ul, .prose ol { padding-left: 24px; margin: 12px 0; }
.prose li { margin: 7px 0; }
.prose strong { color: var(--text); }
.prose code { background: rgba(143,123,255,0.12); border: 1px solid var(--border); padding: 2px 8px; border-radius: 7px; font-size: 13px; font-family: Consolas, "JetBrains Mono", monospace; color: #c9baff; }
body.light .prose code { color: #5a48c9; }
.prose pre { background: rgba(4,5,12,0.68); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; overflow-x: auto; margin: 16px 0; }
body.light .prose pre { background: #2b2450; }
.prose pre code { background: none; border: none; padding: 0; color: #cfc8ef; line-height: 1.9; }
body.light .prose pre code { color: #e6e1ff; }
.prose blockquote { margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--gold); background: rgba(217,185,108,0.08); border-radius: 0 12px 12px 0; color: var(--text-light); }
.prose a { border-bottom: 1px dashed var(--accent); }
.prose img { border-radius: 14px; margin: 14px 0; }
.prose table { border-collapse: collapse; margin: 16px 0; width: 100%; font-size: 13.5px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 14px; text-align: left; }
.prose th { background: var(--chip-bg); }
.article-end { text-align: center; color: var(--text-light); margin-top: 38px; font-size: 13.5px; letter-spacing: 0.2em; }

/* 文章右侧栏 */
.side-card { padding: 24px; margin-bottom: 24px; }
.side-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.side-profile .avatar-ring { width: 84px; height: 84px; border-radius: 50%; }
.side-profile .avatar-ring img { border-radius: 50%; }
.side-name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; }
.side-desc { font-size: 12.5px; color: var(--text-light); line-height: 1.8; }
.side-social { display: flex; gap: 10px; }
.side-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 14px;
}
.side-label::before { content: ""; width: 3px; height: 14px; background: var(--gold); border-radius: 2px; }
.np-row { display: flex; align-items: center; gap: 14px; }
.np-cover {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(217,185,108,0.4);
  animation: spin 12s linear infinite;
  animation-play-state: paused;
}
.playing .np-cover { animation-play-state: running; }
.np-info { flex: 1; min-width: 0; }
.np-title { font-family: var(--font-serif); font-size: 15.5px; font-weight: 700; }
.np-sub { font-size: 11.5px; color: var(--text-light); margin-top: 3px; }
.np-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); overflow: hidden; margin-top: 12px; }
body.light .np-bar { background: rgba(0,0,0,0.07); }
.np-bar .fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.6s linear; }
.np-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(143,123,255,0.45);
  transition: all 0.25s;
}
.np-btn:hover { transform: scale(1.08); }
.side-record { display: block; padding: 11px 2px; border-bottom: 1px dashed var(--border); color: var(--text); }
.side-record:last-child { border-bottom: none; }
.side-record .d { font-size: 10.5px; color: var(--text-light); }
.side-record .t { font-family: var(--font-serif); font-size: 14px; font-weight: 700; margin-top: 3px; transition: color 0.2s; }
.side-record:hover .t { color: var(--accent); }

/* ============ 全站迷你播放器 ============ */
.mini-player {
  position: fixed;
  right: 84px;
  bottom: 24px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all 0.4s ease;
}
.mini-player.show { opacity: 1; pointer-events: auto; transform: none; }
.mini-cover { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; animation: spin 10s linear infinite; animation-play-state: paused; }
.playing .mini-cover { animation-play-state: running; }
.mini-title { font-size: 12px; color: var(--text); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { font-size: 10px; color: var(--text-light); }
.mini-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.2s;
}
.mini-btn:hover { transform: scale(1.1); }

/* ============ Limbus 页 ============ */
.stage {
  margin-top: 116px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(217, 185, 108, 0.25);
  background: #050507;
  min-height: 430px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 120px rgba(120,20,20,0.12);
}
.stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(75% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.75));
  pointer-events: none;
  z-index: 3;
}
.stage-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  z-index: 5;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(217, 185, 108, 0.55);
  font-family: var(--font-latin);
}
.stage-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,185,108,0.35), transparent); }
.lyric-area {
  position: relative;
  z-index: 4;
  min-height: 430px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 60px 40px;
  overflow: hidden;
}
.lyric-line {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(26px, 4.6vw, 52px);
  color: #ece5d3;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 2px 0 rgba(0,0,0,0.8), 0 0 26px rgba(212,69,58,0.35);
  white-space: pre-wrap;
  max-width: 100%;
}
.lyric-line.prev { position: absolute; opacity: 0; }
.lyric-line .char { display: inline-block; will-change: transform; }
.char.in-left { animation: charInL 0.42s cubic-bezier(0.16,1,0.3,1) both; }
.char.in-right { animation: charInR 0.42s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes charInL { from { transform: translateX(-110px) skewX(-14deg); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes charInR { from { transform: translateX(110px) skewX(14deg); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
.lyric-line.shake { animation: lineShake 0.3s linear 0.4s both; }
@keyframes lineShake { 0% { transform: translate(0,0); } 20% { transform: translate(-3px,2px); } 40% { transform: translate(3px,-2px); } 60% { transform: translate(-2px,-1px); } 80% { transform: translate(2px,1px); } 100% { transform: translate(0,0); } }
.stage.slam { animation: stageShake 0.28s linear 0.4s both; }
@keyframes stageShake { 0% { transform: translate(0,0); } 25% { transform: translate(-4px,3px); } 50% { transform: translate(4px,-3px); } 75% { transform: translate(-2px,1px); } 100% { transform: translate(0,0); } }
.slash {
  position: absolute;
  z-index: 5;
  height: 3px;
  width: 40%;
  left: 30%;
  top: 50%;
  background: linear-gradient(90deg, transparent, #d4453a 30%, #ff6a5e 50%, #d4453a 70%, transparent);
  box-shadow: 0 0 18px rgba(212,69,58,0.8);
  transform: scaleX(0) rotate(-2.5deg);
  pointer-events: none;
}
.slash.go { animation: slashGo 0.55s cubic-bezier(0.16,1,0.3,1) 0.38s both; }
@keyframes slashGo { 0% { transform: scaleX(0) rotate(-2.5deg); opacity: 1; } 55% { transform: scaleX(1) rotate(-2.5deg); opacity: 1; } 100% { transform: scaleX(1) rotate(-2.5deg); opacity: 0; } }
.stage-idle { z-index: 4; text-align: center; color: rgba(236,229,211,0.4); font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.4em; }
.console-card { padding: 24px 26px; margin-top: 24px; }
.console-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.console-left textarea {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(4,5,12,0.55);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.9;
  padding: 14px 16px;
  outline: none;
}
body.light .console-left textarea { background: rgba(255,255,255,0.6); }
.console-left textarea:focus { border-color: var(--accent); }
.console-hint { font-size: 12px; color: var(--text-light); margin-top: 8px; line-height: 1.8; }
.console-right { display: flex; flex-direction: column; gap: 12px; }
.ctrl-label { font-size: 12px; letter-spacing: 0.16em; color: var(--text-light); }
.ctrl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mode-btn {
  flex: 1;
  min-width: 86px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text-light);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-serif);
  transition: all 0.2s;
}
.mode-btn.on { background: linear-gradient(120deg, #8e1f1f, #b03a30); color: #f3e9d7; border-color: rgba(217,185,108,0.5); }
.ctrl-btn {
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(217,185,108,0.4);
  background: linear-gradient(120deg, #8e1f1f, #b03a30 55%, #8e1f1f);
  color: #f3e9d7;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s;
}
.ctrl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212,69,58,0.4); }
.ctrl-btn.ghost { background: var(--chip-bg); border: 1px solid var(--border); color: var(--text); }
.ctrl-btn.ghost:hover { box-shadow: var(--shadow); }
input[type="range"].speed { width: 100%; accent-color: #d4453a; }
.console-right input[type="file"] { font-size: 12px; color: var(--text-light); max-width: 100%; }
.audio-state { font-size: 12px; color: var(--text-light); line-height: 1.7; }
.project-card { padding: 26px 28px; margin-top: 24px; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 16px; }
.project-card ul { list-style: none; }
.project-card li { padding: 7px 0 7px 24px; position: relative; font-size: 14px; color: var(--text-light); line-height: 1.7; }
.project-card li::before { content: "◆"; position: absolute; left: 2px; color: var(--gold); font-size: 10px; top: 12px; }
.credit { font-size: 12.5px; color: var(--text-light); line-height: 2; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }

/* ============ 页脚 ============ */
footer {
  text-align: center;
  padding: 60px 16px 90px;
  color: var(--text-light);
  font-size: 13px;
  position: relative;
  z-index: 5;
}
footer .heart { color: var(--accent-pink); display: inline-block; animation: heartbeat 1.4s ease infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 24% { transform: scale(1); } }

/* ============ 404 ============ */
.lost-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px; position: relative; z-index: 5; }
.lost-code { font-family: var(--font-latin); font-size: 110px; line-height: 1.1; font-weight: 700; background: linear-gradient(92deg, #d4453a, #d9b96c, #8b7bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ============ 响应式 ============ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr 1fr; }
  .side-stack { grid-column: span 2; flex-direction: row; }
  .mini-card { padding: 18px; }
  .article-layout { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .console-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .home-grid { grid-template-columns: 1fr; }
  .side-stack { grid-column: span 1; flex-direction: column; }
  .clock-time { font-size: 22px; padding: 12px 18px; }
  .profile-top { flex-direction: column; text-align: center; }
  .social-row { justify-content: center; }
  .photo-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .post-item { flex-direction: column; align-items: flex-start; }
  .post-arrow { display: none; }
  .timeline-view::before { left: 8px; }
  .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 30px 34px; }
  .tl-item::after { left: 2px !important; right: auto !important; }
  .tl-item:nth-of-type(odd) .tl-tags { justify-content: flex-start; }
  .mini-player { right: 20px; bottom: 78px; }
  .pixel-deco.cat { right: 78px; bottom: 96px; }
  .pixel-deco.fish { right: 40px; bottom: 118px; }
  #hamburger { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 14px; left: 14px;
    display: none;
    flex-direction: column;
    gap: 4px;
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 10px; text-align: center; }
  .nav-link.active::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ============ v4：文章目录 / 上下篇 / 复制 / 灯箱 / 年份 ============ */
.toc-card { position: sticky; top: 86px; }
.toc-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.toc-list a { font-size: 12.5px; color: var(--text-light); padding: 6px 10px; border-left: 2px solid transparent; line-height: 1.5; transition: all .2s; }
.toc-list a.toc-l3 { padding-left: 24px; }
.toc-list a:hover { color: var(--text); }
.toc-list a.on { color: var(--accent); border-left-color: var(--accent); background: var(--chip-bg); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; padding-top: 24px; border-top: 1px dashed var(--border); }
.pn-cell { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--chip-bg); color: var(--text); min-width: 0; transition: all .25s; }
.pn-cell:hover { border-color: var(--accent); transform: translateY(-2px); }
.pn-cell:nth-child(2) { text-align: right; }
.pn-label { font-size: 11px; color: var(--text-light); letter-spacing: .12em; }
.pn-title { font-family: var(--font-serif); font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-empty { opacity: .45; cursor: default; }

.prose pre { position: relative; }
.copy-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 4px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(10, 11, 22, 0.72); color: var(--text-light);
  font-size: 11.5px; cursor: pointer; opacity: 0; transition: opacity .25s;
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
}
body.light .copy-btn { background: rgba(255, 255, 255, 0.85); }
.prose pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--text); border-color: var(--accent); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(4, 5, 12, 0.9);
  backdrop-filter: blur(10px);
  cursor: zoom-out; padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); animation: pageIn .3s ease both; }
.lightbox .cap { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--text-light); font-size: 13px; letter-spacing: .1em; }

.tl-year {
  position: relative; z-index: 2;
  width: fit-content; margin: 4px auto 28px;
  padding: 5px 22px;
  border-radius: 999px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  font-family: var(--font-latin);
  font-size: 15px; letter-spacing: .22em;
  color: var(--accent);
  box-shadow: var(--shadow);
}

/* ============ v4：看板娘 ============ */
.kb-anchor {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 90;
}
.kanban {
  position: fixed;      /* 固定视口左侧，不随文档流/滚动走位 */
  pointer-events: none; /* 盒身不拦截鼠标，只有实际控件可点 */
  width: max-content;   /* 盒子收缩到内容大小，不横占整页 */
  left: 14px; top: 140px;
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform .3s ease;
}
.kanban.hidden { transform: translateY(110%); pointer-events: none; }
.kb-bubble {
  max-width: 240px;
  margin: 0 0 8px 12px;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: all .3s ease;
  pointer-events: none;
}
.kb-bubble.show { opacity: 1; transform: none; }
.kb-stage {
  width: 250px; height: 350px;
  position: relative;
  cursor: grab;
  touch-action: none;
}
.kb-stage:active { cursor: grabbing; }
.kb-stage canvas { display: block; }
.kb-loading {
  position: absolute; inset: auto 0 40% 0;
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 2;
}
.kb-loading .spin { font-size: 22px; display: inline-block; animation: spin 1.6s linear infinite; }
.kb-bar {
  display: flex; gap: 8px;
  margin: 2px 0 10px 10px;
}
.kb-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-deep);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all .25s;
}
.kb-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.kb-chat {
  position: absolute;
  left: 250px; bottom: 40px;
  width: 300px;
  max-height: 430px;
  display: none;
  flex-direction: column;
  border-radius: 16px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.kb-chat.open { display: flex; }
.kb-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif);
  font-size: 14px;
}
.kb-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.kb-msg { max-width: 86%; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.kb-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 12px 12px 4px 12px; }
.kb-msg.ai { align-self: flex-start; background: var(--chip-bg); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; }
.kb-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.kb-input-row input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(4,5,12,.45);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
body.light .kb-input-row input { background: rgba(255,255,255,.6); }
.kb-input-row button {
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}
.kb-set {
  position: absolute;
  left: 250px; bottom: 40px;
  width: 300px;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.kb-set.open { display: flex; }
.kb-set .field { gap: 4px; }
.kb-set input {
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(4,5,12,.45);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
}
body.light .kb-set input { background: rgba(255,255,255,.6); }
.kb-set .hint { margin-top: 0; font-size: 11.5px; line-height: 1.5; min-height: 1.2em; color: var(--text-light); }
.kb-set label { font-size: 12px; color: var(--text-light); letter-spacing: .04em; }
.kb-set select {
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(4,5,12,.45);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
  cursor: pointer;
}
body.light .kb-set select { background: rgba(255,255,255,.6); }
.kb-model-row { display: flex; gap: 8px; align-items: center; }
.kb-model-row input { flex: 1; min-width: 0; }
.kb-model-row .kb-btn { flex: 0 0 34px; border-radius: 9px; }
.kb-check { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text) !important; }
.kanban-min {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 90;
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-deep);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  align-items: center; justify-content: center;
}
.kanban-min.show { display: flex; }

@media (max-width: 900px) {
  .kb-stage { width: 190px; height: 260px; }
  .kb-chat, .kb-set { left: 190px; width: min(300px, calc(100vw - 210px)); }
}

/* ============ v5：音乐卡标签 / 点播状态行 ============ */
.card-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ctab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text-light);
  font-size: 12.5px;
  cursor: pointer;
  font-family: var(--font-serif);
  transition: all .25s;
}
.ctab.on { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(143,123,255,.4); }
.music-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-light);
}
.music-line .icon-btn { width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; }
.music-line .js-mm-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ v6：暗色歌单列表 ============ */
.track-list { display: flex; flex-direction: column; gap: 3px; max-height: 200px; overflow-y: auto; }
.track-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: background .2s;
}
.track-item:hover { background: var(--chip-bg); }
.track-item.on { background: var(--chip-bg); color: var(--accent); }
.track-item .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-item .a { font-size: 11px; color: var(--text-light); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.track-item .eq { font-size: 10px; color: var(--accent); width: 16px; text-align: center; }

.lyric-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  background: #050507;
  overflow: hidden;
}
.lyric-overlay.open { display: block; }
.lyric-overlay .lo-head {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  z-index: 5;
  font-family: var(--font-latin, Georgia, serif);
  font-size: 11px; letter-spacing: .3em;
  color: rgba(217, 185, 108, 0.55);
}
.lyric-overlay .lo-stage {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 140px rgba(120, 20, 20, 0.14);
}
.lyric-overlay .lo-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(75% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.75));
  pointer-events: none; z-index: 3;
}
.lyric-overlay .lo-stage.slam { animation: stageShake 0.28s linear 0.4s both; }
.lyric-overlay .lo-close {
  position: absolute; right: 24px; bottom: 24px; z-index: 6;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 108, 0.4);
  background: rgba(10, 10, 18, 0.7);
  color: rgba(236, 229, 211, 0.85);
  font-family: var(--font-serif);
  font-size: 13.5px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: all .25s;
}
.lyric-overlay .lo-close:hover { border-color: #d4453a; color: #fff; box-shadow: 0 6px 20px rgba(212, 69, 58, .35); }

/* 看板娘画布：强制独立合成层，防滚动时丢帧 */
.kanban {
  isolation: isolate;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.kb-stage canvas {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.kb-stage, .kb-bar, .kb-chat, .kb-set { pointer-events: auto; }

/* ============ 边狱巴士 · 横幅歌词舞台（播放时接管打字横幅） ============ */
.slogan-bar.limbus-on {
  background: rgba(5, 5, 7, 0.92);
  border-color: rgba(217, 185, 108, 0.42);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 0 70px rgba(120, 20, 20, 0.14);
}
.slogan-bar.limbus-on .slogan-dots,
.slogan-bar.limbus-on .slogan-cat,
.slogan-bar.limbus-on .slogan-text { visibility: hidden; }
.slogan-bar.limbus-on .slogan-text { display: none; }
.lyric-takeover { width: 100%; text-align: center; position: relative; min-height: 1.5em; }
.lyric-takeover .lyric-line {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(20px, 3vw, 32px);
  color: #ece5d3;
  letter-spacing: 0.06em;
  white-space: pre-wrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 24px rgba(212, 69, 58, 0.4);
}
.lyric-takeover .stage-idle { color: rgba(236, 229, 211, 0.45); font-size: 15px; letter-spacing: 0.3em; }
.slogan-bar .slash { top: 50%; left: 20%; width: 60%; }
.slogan-bar.slam { animation: stageShake 0.28s linear 0.4s both; }

/* ============ 边狱巴士 · 主界面歌词舞台 ============ */
.desk-stage {
  position: fixed;
  right: 24px; bottom: 96px;
  z-index: 110;
  width: 420px; height: 170px;
  display: none;
  background: #050507;
  border: 1px solid rgba(217, 185, 108, 0.3);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 90px rgba(120, 20, 20, 0.12);
}
.desk-stage.show { display: block; animation: pageIn 0.35s ease both; }
.desk-stage .ds-head {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  z-index: 5;
  font-family: var(--font-latin, Georgia, serif);
  font-size: 10px; letter-spacing: .28em;
  color: rgba(217, 185, 108, 0.55);
}
.desk-stage .ds-close {
  background: none; border: none;
  color: rgba(236, 229, 211, 0.5);
  cursor: pointer; font-size: 12px;
}
.desk-stage .ds-close:hover { color: #fff; }
.desk-stage .lyric-area { position: absolute; inset: 0; padding: 30px 24px; }
.desk-stage .lyric-line { font-size: clamp(18px, 2.4vw, 27px); }
.desk-stage.slam { animation: stageShake 0.28s linear 0.4s both; }
.desk-stage .slash { top: 58%; }

/* ============ 桌面歌词条（主界面常驻歌词） ============ */
.d-lyric {
  position: fixed;
  left: 50%; bottom: 88px;
  transform: translateX(-50%);
  z-index: 120;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 14px;
  background: rgba(5, 5, 7, 0.78);
  border: 1px solid rgba(217, 185, 108, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  max-width: 72vw;
}
.d-lyric.show { display: flex; }
.d-lyric .d-text {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 20px;
  color: #ece5d3;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 18px rgba(212, 69, 58, 0.35);
}
.d-char { display: inline-block; animation: dIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes dIn { from { transform: translateX(26px) skewX(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.d-lyric .d-close {
  background: none; border: none;
  color: rgba(236, 229, 211, 0.5);
  cursor: pointer; font-size: 12px;
  flex-shrink: 0;
}
.d-lyric .d-close:hover { color: #fff; }
@media (max-width: 680px) {
  .d-lyric { bottom: auto; top: 74px; max-width: 90vw; }
  .d-lyric .d-text { font-size: 15px; }
}
@media (max-width: 680px) {
  .desk-stage { left: auto; right: 12px; bottom: 140px; width: min(420px, calc(100vw - 220px)); height: 150px; }
}

/* ============ 歌词横幅（参考站布局） ============ */
.lyric-bar {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  border-radius: 12px;
  background: rgba(10, 14, 30, 0.88);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 5;
}
.eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; flex-shrink: 0; }
.eq i { width: 3px; background: var(--accent); border-radius: 2px; height: 35%; opacity: 0.55; }
.lyric-bar.playing .eq i { animation: eqBounce 0.9s ease-in-out infinite; opacity: 1; }
.eq i:nth-child(1) { height: 45%; }
.eq i:nth-child(2) { animation-delay: 0.15s; }
.eq i:nth-child(3) { height: 70%; animation-delay: 0.3s; }
.eq i:nth-child(4) { animation-delay: 0.1s; }
.eq i:nth-child(5) { height: 55%; animation-delay: 0.22s; }
@keyframes eqBounce { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.lyric-bar .lb-text {
  flex: 1;
  min-height: 1.5em;
  font-size: 19px;
  color: #f2eee2;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lyric-bar .lb-note { color: var(--text-light); flex-shrink: 0; }
@media (max-width: 680px) {
  .lyric-bar { padding: 12px 16px; }
  .lyric-bar .lb-text { font-size: 15px; }
}

/* ============ 边狱巴士 · 弹出式大字歌词 ============ */
.lyric-pop-host {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.lyric-pop {
  position: absolute;
  color: #fffeef;                                    /* 原版暖白 */
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: 4px;                               /* 原版 spacing 5 */
  white-space: nowrap;
  text-shadow: 3px 3px 0 #d8a523;                    /* 原版金色描边（+3,+3 阴影） */
  transform: rotate(var(--tilt, 0deg));              /* 整行斜排 */
  transition: opacity 0.9s ease, translate 0.9s ease, top 0.9s ease;
}
.lyric-pop.fading { opacity: 0; translate: 0 -30px; } /* 旧句上飘淡出 */
@keyframes popIn { from { opacity: 0; transform: translateY(-22px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 680px) {
  .lyric-pop { font-size: 20px; letter-spacing: 2px; }
}

/* 弹出歌词：每个字持续抖动（原版 effect.py 标志性效果） */
.lyric-pop .lch {
  display: inline-block;
  animation: lchJitter 0.15s infinite;
}
@keyframes lchJitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1.3px, -1.1px); }
  50%  { transform: translate(-1.1px, 1.2px); }
  75%  { transform: translate(0.9px, 0.9px); }
  100% { transform: translate(-1px, -1.2px); }
}

/* ============ v8：胶囊导航 ============ */
.nav {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1020px, calc(100% - 28px));
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--nav-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 10px 26px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
body.light .nav { box-shadow: 0 8px 32px rgba(90, 70, 180, 0.15); }
.nav-post {
  color: var(--gold) !important;
  border: 1px solid rgba(217, 185, 108, 0.45);
  border-radius: 999px !important;
  padding: 4px 14px !important;
}
.nav-post::after { display: none !important; }
.nav-post:hover { border-color: var(--accent); }
@media (max-width: 680px) {
  .nav {
    left: 10px;
    width: calc(100% - 20px);
    transform: none;
    border-radius: 18px;
    padding: 10px 14px;
  }
}

/* ============ v8：滚动渐入 ============ */
.rv { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.rv.in { opacity: 1; transform: none; }

/* ============ v8：音乐卡封面 ============ */
.tk-pic {
  width: 38px; height: 38px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  transition: transform 0.25s;
}
.track-item { padding: 12px 16px; }
.track-item:hover .tk-pic { transform: scale(1.12) rotate(-3deg); }
.tk-no {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a2148, #1a2a48);
  color: var(--accent);
  font-size: 15px;
}

/* ============ v8：说说卡片（朋友圈时间轴） ============ */
.says-list { display: flex; flex-direction: column; gap: 18px; padding: 26px 0 40px; max-width: 760px; margin: 0 auto; }
.says-card { display: flex; gap: 16px; padding: 22px 24px; }
.says-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(139, 123, 255, 0.4);
}
.says-main { flex: 1; min-width: 0; }
.says-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.says-meta b { font-family: var(--font-serif); font-size: 15.5px; color: var(--accent); }
.says-time { font-size: 11.5px; color: var(--text-light); }
.says-text { font-size: 14.5px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
.says-grid { display: grid; gap: 6px; margin-top: 10px; }
.says-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  aspect-ratio: 1;
  transition: transform 0.3s;
}
.says-grid img:hover { transform: scale(1.03); }
.says-grid.one img { aspect-ratio: 16 / 10; border-radius: 12px; }
.says-grid.two { grid-template-columns: 1fr 1fr; }
.says-grid.grid3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 680px) {
  .says-grid.grid3 { grid-template-columns: 1fr 1fr; }
}

/* ============ v9：细节打磨 ============ */
/* 全站滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(143, 123, 255, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(143, 123, 255, 0.6); }
.track-list::-webkit-scrollbar, .kb-msgs::-webkit-scrollbar { width: 6px; }
.track-list::-webkit-scrollbar-thumb { background: rgba(143, 123, 255, 0.45); }

/* 导航悬停下划线滑入 */
.nav-link::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.25s ease, left 0.25s ease;
}
.nav-link:hover::before { left: 15%; width: 70%; }
.nav-link.active::before { width: 0; }

/* hero 入场交错 + 歌词条入场 */
.hero .profile-card { animation: pageIn 0.7s ease 0.05s both; }
.hero .player-card { animation: pageIn 0.7s ease 0.18s both; }
.slogan-bar { animation: pageIn 0.7s ease 0.3s both; }
.lyric-bar { animation: pageIn 0.7s ease 0.42s both; }

/* 时钟状态点脉动 */
.clock-info .dot { animation: dotPulse 2.2s ease infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}

/* 当前播放行：三点跳动音浪 */
.teq { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 13px; width: 15px; flex-shrink: 0; }
.teq i { width: 3px; border-radius: 1.5px; background: var(--accent); height: 40%; animation: eqBounce 0.8s ease-in-out infinite; }
.teq i:nth-child(2) { animation-delay: 0.18s; }
.teq i:nth-child(3) { animation-delay: 0.36s; }

/* 说说页顶部发布入口 */
.says-top { display: flex; justify-content: center; margin: 18px 0 0; }

/* ============ v11：首页搜索胶囊 + 悬浮按钮组 + 播放联动 ============ */
.home-search {
  position: relative;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 26px;
  border-radius: 999px;
  background: rgba(10, 14, 30, 0.85);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  z-index: 6;
}
.home-search .hs-ico { font-size: 15px; opacity: 0.75; }
.home-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14.5px;
  font-family: var(--font-body);
}
.home-search input::placeholder { color: var(--text-light); }
.hs-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  border-radius: 16px;
  background: rgba(10, 14, 30, 0.96);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 50;
}
.hs-item {
  display: block;
  padding: 12px 22px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.hs-item:last-child { border-bottom: none; }
.hs-item:hover { background: var(--chip-bg); }
.hs-item b { display: block; font-family: var(--font-serif); font-size: 14.5px; }
.hs-item span { display: block; font-size: 11.5px; color: var(--text-light); margin-top: 3px; }
.hs-item.hs-none { color: var(--text-light); cursor: default; }

.fab-group {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-deep);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.25s;
}
.fab:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(143, 123, 255, 0.4); }
#fab-music { color: var(--gold); }
.fab-group .to-top { position: static; opacity: 1; pointer-events: auto; transform: none; }

/* ============ 阅读进度条 + 说说头部 ============ */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-pink));
  z-index: 300;
  transition: width 0.08s linear;
  pointer-events: none;
}
.says-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  margin-top: 130px;
}
.says-hero .says-avatar { width: 64px; height: 64px; }
.says-hero-main { flex: 1; min-width: 0; }
.says-hero-name { font-size: 22px; font-weight: 900; color: var(--text); }
.says-hero-desc { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.says-hero-desc b { color: var(--accent); }
@media (max-width: 680px) {
  .says-hero { flex-wrap: wrap; margin-top: 110px; }
}

/* ============================================================
   全站常驻播放条（MikuMusic 中枢）· 玻璃拟态
   ============================================================ */
.gplayer {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 24px));
  z-index: 130;
  animation: gpIn .4s ease both;
}
@keyframes gpIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } }
.gp-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.gp-left { display: flex; align-items: center; gap: 12px; min-width: 0; width: 26%; }
.gp-cover-wrap {
  position: relative;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.gp-cover-note { color: #fff; font-size: 20px; opacity: .9; }
.gp-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: gpSpin 14s linear infinite;
  animation-play-state: paused;
}
.gp-cover.no { display: none; }
.gplayer.playing .gp-cover { animation-play-state: running; }
@keyframes gpSpin { to { transform: rotate(360deg); } }
.gp-info { min-width: 0; }
.gp-name {
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-artist {
  font-size: 11.5px; color: var(--text-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.gp-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gp-btns { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gp-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all .22s;
  display: inline-flex; align-items: center; justify-content: center;
}
.gp-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.gp-btn.on { color: var(--accent); border-color: var(--accent); }
.gp-btn.gp-big { width: 34px; height: 34px; font-size: 14px; }
.gp-btn.gp-play {
  width: 40px; height: 40px;
  font-size: 15px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(120, 100, 255, .35);
}
.gp-progress-row { display: flex; align-items: center; gap: 10px; }
.gp-time { font-size: 10.5px; color: var(--text-light); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.gp-progress {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  cursor: pointer;
  touch-action: none;
}
.gp-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.gp-knob {
  position: absolute; top: 50%; left: 0%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .2s;
}
.gp-progress:hover .gp-knob, .gplayer.playing .gp-knob { opacity: 1; }
.gp-right { display: flex; align-items: center; gap: 8px; }
.gp-vol { display: flex; align-items: center; gap: 6px; }
.gp-vol input[type="range"] {
  width: 74px;
  accent-color: var(--accent);
  cursor: pointer;
  height: 4px;
}
/* 歌词面板（播放条上方展开） */
.gp-lyric {
  position: absolute;
  left: 0; right: 0; bottom: calc(100% + 10px);
  max-height: 230px;
  overflow-y: auto;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.gp-lrc-line {
  text-align: center;
  padding: 7px 0;
  font-size: 14px;
  color: var(--text-light);
  cursor: pointer;
  transition: all .25s;
  border-radius: 8px;
}
.gp-lrc-line:hover { color: var(--text); }
.gp-lrc-line.on {
  color: var(--accent);
  font-size: 16.5px;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(140, 120, 255, .35);
}
.gp-lrc-empty { text-align: center; padding: 26px 0; color: var(--text-light); font-size: 13px; }
/* 队列抽屉 */
.gp-drawer {
  position: fixed;
  right: 14px; bottom: 84px;
  width: min(340px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 200px));
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: gpIn .3s ease both;
}
.gp-drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.gp-drawer-head span { color: var(--text-light); font-size: 11.5px; flex: 1; }
.gp-drawer-close {
  border: none; background: none; color: var(--text-light);
  cursor: pointer; font-size: 12px;
}
.gp-drawer-close:hover { color: var(--text); }
.gp-search { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.gp-search input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(4,5,12,.45);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
}
body.light .gp-search input { background: rgba(255,255,255,.6); }
.gp-qlist { flex: 1; overflow-y: auto; padding: 6px; }
.gp-qrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s;
}
.gp-qrow:hover { background: var(--chip-bg); }
.gp-qrow.on { background: var(--chip-bg); }
.gp-qrow.on .gp-q-main b { color: var(--accent); }
.gp-q-idx { flex: 0 0 22px; text-align: center; font-size: 11px; color: var(--text-light); }
.gp-q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gp-q-main b {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-q-main small {
  font-size: 10.5px; color: var(--text-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-q-del {
  border: none; background: none;
  color: var(--text-light);
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  padding: 4px;
}
.gp-qrow:hover .gp-q-del { opacity: 1; }
.gp-q-del:hover { color: #ff7b7b; }
/* toast */
#gp-toast {
  position: fixed;
  top: 76px; left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 200;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  max-width: min(480px, 90vw);
}
#gp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 播放条与页面底部内容的距离 */
body { padding-bottom: 86px; }
/* 移动端 */
@media (max-width: 680px) {
  .gplayer { bottom: 10px; }
  .gp-bar { gap: 10px; padding: 9px 12px; border-radius: 15px; }
  .gp-left { width: auto; flex: 1; min-width: 0; }
  .gp-info { display: none; }
  .gp-vol { display: none; }
  .gp-btn { width: 26px; height: 26px; font-size: 11px; }
  .gp-btn.gp-big { width: 30px; height: 30px; font-size: 12px; }
  .gp-btn.gp-play { width: 36px; height: 36px; font-size: 14px; }
  .gp-cover-wrap { width: 40px; height: 40px; flex-basis: 40px; }
  .gp-drawer { right: 8px; left: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-cover { animation: none; }
}
/* 滚动条 */
.gp-qlist::-webkit-scrollbar, .gp-lyric::-webkit-scrollbar { width: 6px; }
.gp-qlist::-webkit-scrollbar-thumb, .gp-lyric::-webkit-scrollbar-thumb {
  background: var(--chip-bg); border-radius: 99px;
}

/* ============================================================
   阶段四 · 视觉与交互样式
   ============================================================ */
/* View Transitions（主题圆扩散 / PJAX 过渡） */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* 进站加载遮罩 */
.boot-veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(1200px 700px at 50% 20%, #171332 0%, #07060f 70%);
  transition: opacity .55s ease, visibility .55s;
}
.boot-veil .bv-mark {
  font-size: 40px;
  color: #c4b5ff;
  animation: bvSpin 1.6s ease-in-out infinite;
  text-shadow: 0 0 26px rgba(140, 120, 255, .7);
}
.boot-veil .bv-name {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .3em;
  color: rgba(232, 229, 242, .8);
}
@keyframes bvSpin { 0%, 100% { transform: rotate(0) scale(1); opacity: .7; } 50% { transform: rotate(180deg) scale(1.15); opacity: 1; } }
.boot-veil.off { opacity: 0; visibility: hidden; pointer-events: none; }

/* 导航自动隐藏 */
.nav { transition: transform .32s ease; }
.nav.nav-hide { transform: translateX(-50%) translateY(-160%) !important; }

/* 卡片 3D tilt 光晕 */
.card { position: relative; }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(160, 140, 255, .12), transparent 42%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* 快捷键提示条 */
.hotkey-bar {
  position: fixed;
  left: 50%; top: 76px;
  transform: translateX(-50%) translateY(-10px);
  z-index: 190;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 16px;
  padding: 10px 20px;
  border-radius: 14px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
}
.hotkey-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hotkey-bar span { font-size: 11.5px; color: var(--text-light); display: inline-flex; align-items: center; gap: 6px; }
.hotkey-bar kbd {
  font-family: inherit;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

/* 自定义右键菜单 */
.ctx-menu {
  position: fixed;
  z-index: 195;
  min-width: 172px;
  padding: 6px;
  border-radius: 14px;
  background: var(--card-deep);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.ctx-menu.open { display: flex; animation: ctxIn .16s ease both; }
@keyframes ctxIn { from { opacity: 0; transform: scale(.94); } }
.ctx-menu button {
  border: none;
  background: none;
  text-align: left;
  padding: 9px 13px;
  border-radius: 9px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background .18s;
}
.ctx-menu button:hover { background: var(--chip-bg); }

/* ============================================================
   阶段五 · 评论区 / 说说点赞
   ============================================================ */
.comments-card { padding: 22px; margin: 26px 0 10px; }
.comments-head {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--text-light);
  margin-bottom: 14px;
}
.says-actions { margin-top: 8px; display: flex; }
.like-btn {
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text-light);
  border-radius: 999px;
  font-size: 11.5px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .22s;
}
.like-btn:hover { border-color: #ff8fb7; color: #ff8fb7; transform: translateY(-1px); }
.like-btn.on { color: #ff5c8a; border-color: rgba(255, 92, 138, .5); background: rgba(255, 92, 138, .08); }
#giscus-slot { min-height: 60px; }

/* 相关文章推荐（构建时生成） */
.related { margin-top: 26px; }
.related-head {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--text-light);
  margin-bottom: 12px;
}
.related-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--chip-bg);
  margin-bottom: 9px;
  transition: all .22s;
}
.related-item:hover { border-color: var(--accent); transform: translateX(3px); }
.related-item .r-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.related-item:hover .r-title { color: var(--accent); }
.related-item .r-meta { font-size: 11px; color: var(--text-light); }

/* ============================================================
   v2.1 · 星梦式玻璃精致化（通透高光 / 金色点缀 / 胶囊播放条）
   ============================================================ */
/* 统一玻璃顶部高光 */
.card, .gplayer .gp-bar, .gp-drawer, .hotkey-bar, .ctx-menu, .kb-chat, .kb-set {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%);
}
.gplayer .gp-bar, .gp-drawer, .ctx-menu, .hotkey-bar {
  border-color: rgba(255, 255, 255, 0.12);
}
/* 卡片光晕减淡，更含蓄 */
.card::after {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(160, 140, 255, 0.08), transparent 40%);
}
.card:hover::after { opacity: 0.9; }

/* —— 桌面端播放条：胶囊化 + 精致化 —— */
@media (min-width: 681px) {
  .gp-bar { padding: 8px 14px; border-radius: 999px; gap: 12px; }
  .gp-cover-wrap { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; }
  .gp-btn { width: 28px; height: 28px; font-size: 11.5px; }
  .gp-btn.gp-big { width: 32px; height: 32px; font-size: 13px; }
  .gp-btn.gp-play {
    width: 38px; height: 38px; font-size: 14px;
    background: linear-gradient(120deg, var(--accent) 15%, var(--gold) 115%);
    box-shadow: 0 6px 20px rgba(143, 123, 255, 0.28), 0 2px 12px rgba(217, 185, 108, 0.18);
  }
  .gp-progress { height: 4px; transition: height 0.18s ease; }
  .gp-progress:hover { height: 7px; }
}
/* 进度与歌词的金色点缀（星梦金） */
.gp-knob { border-color: var(--gold); }
.gp-fill { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.gp-lrc-line.on {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(217, 185, 108, 0.35);
}
.gp-lyric, .gp-search input { border-color: rgba(255, 255, 255, 0.1); }

/* 区块标题：金色装饰线 */
.related-head, .comments-head {
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
}
.related-head::before, .comments-head::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.related-item { border-radius: 14px; }
.related-item:hover { border-color: rgba(217, 185, 108, 0.45); transform: translateY(-2px); }
.related-item:hover .r-title { color: var(--gold); }

/* 进站遮罩：加星点 */
.boot-veil {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 22%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(2px 2px at 82% 64%, rgba(217, 185, 108, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 74%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1200px 700px at 50% 20%, #171332 0%, #07060f 70%);
}
.boot-veil .bv-name { letter-spacing: 0.42em; }

/* 快捷键 kbd：金色微光 */
.hotkey-bar kbd {
  border-color: rgba(217, 185, 108, 0.28);
  color: var(--gold);
}

/* hidden 属性永远生效（修复 display:flex 等声明覆盖 hidden 的 bug） */
[hidden] { display: none !important; }