/* =========================================================
   暗夜霓虹 (Neon Noir) — 科技感 / 暗色霓虹主题
   加载顺序：在 theme.css 之后；同优先级下本文件覆盖浅色样式。
   纯 CSS，无 JS 依赖。
   ========================================================= */

:root {
  --cream: #08090f;
  --card: rgba(16, 20, 34, 0.72);
  --ink: #e8ecf5;
  --ink-soft: #94a0b6;
  --rose: #22d9ee;
  --rose-deep: #ff4fd2;
  --rose-pale: rgba(0, 214, 240, 0.13);
  --line: rgba(255, 255, 255, 0.10);
  --shadow: 0 0 26px rgba(0, 220, 245, 0.13), 0 10px 30px rgba(0, 0, 0, 0.5);
  --neon-grad: linear-gradient(100deg, #22d9ee 0%, #6ee7ff 42%, #ff4fd2 100%);
  --neon-btn: linear-gradient(100deg, #22d9ee, #ff4fd2);
}

/* ---------- 背景：霓虹光晕 + 网格 ---------- */
body {
  background-color: #08090f;
  color: var(--ink);
}
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 35%, rgba(0, 214, 240, 0.17), transparent 44%),
    radial-gradient(circle at 72% 26%, rgba(255, 79, 210, 0.15), transparent 44%);
  animation: neonDrift 22s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 214, 240, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 214, 240, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, black, transparent 78%);
  mask-image: radial-gradient(circle at 50% 38%, black, transparent 78%);
}
@keyframes neonDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(7%, -6%) scale(1.12); }
}

/* ---------- 全局文字 / 链接 ---------- */
a { color: var(--rose-deep); }
a:hover { color: var(--rose); }

/* ---------- 顶栏 ---------- */
.site-header {
  background: rgba(8, 9, 15, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 214, 240, 0.14);
}
.nav-toggle span { background: var(--rose); }
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover,
.site-nav a.is-on { color: var(--rose); text-shadow: 0 0 12px rgba(0, 214, 240, 0.4); }
h1.logo a { color: var(--ink); }
h1.logo a:hover { color: var(--rose); }
.brand { color: var(--ink-soft); }
.site-search input {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid var(--line);
}
.site-search input::placeholder { color: var(--ink-soft); }
.site-search button {
  background: var(--neon-btn);
  color: #041019;
  border-color: transparent;
}
.wechat-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid var(--line);
}
.wechat-btn:hover { background: rgba(0, 214, 240, 0.16); border-color: rgba(0, 214, 240, 0.4); }
.wechat-pop { background: #12172a; color: var(--ink); }

/* ---------- 首页轮播 ---------- */
.hero-slider .slide-caption.hero-empty {
  background: linear-gradient(135deg, #0b1226, #141033 60%, #241033);
}
.slider-btn {
  background: rgba(10, 12, 22, 0.55);
  border-color: rgba(0, 214, 240, 0.3);
  color: #eaf6ff;
  backdrop-filter: blur(10px);
}
.slider-btn:hover { background: rgba(0, 214, 240, 0.22); border-color: var(--rose); }
.slider-dots .slider-dot { background: rgba(255, 255, 255, 0.35); }
.slider-dots .slider-dot.is-on { background: var(--rose); box-shadow: 0 0 10px rgba(0, 214, 240, 0.6); }

/* ---------- 区块标题 ---------- */
.sec-title { color: var(--ink); }
.sec-title > a { color: var(--ink); }
.sec-title a:hover { color: var(--rose); }
.sec-more { color: var(--rose); }
.sec-more:hover { color: var(--ink); }
.home-empty { color: var(--ink-soft); }

/* ---------- 首页卡片 ---------- */
.post-card {
  background: var(--card);
  border: 1px solid rgba(0, 214, 240, 0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 214, 240, 0.5);
  box-shadow: 0 0 34px rgba(0, 214, 240, 0.22), 0 14px 36px rgba(0, 0, 0, 0.55);
}
.card-thumb-ph {
  background: linear-gradient(145deg, #101a2e, #1c1230 60%, #1c1a38);
  color: var(--rose);
}
.post-card .card-title { color: var(--ink); }
.post-card .card-title:hover { color: var(--rose); }
.post-card .card-meta { color: var(--ink-soft); }
.cat-title {
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-title small { -webkit-text-fill-color: var(--ink-soft); background: none; }
.cat-title .q-word { -webkit-text-fill-color: var(--rose-deep); }
.home-sub .sub-title { color: var(--rose); }
.home-sub .sub-title a { color: var(--ink); }
.home-sub .sub-title a:hover { color: var(--rose); }

/* ---------- 分类 / 分页 / 搜索 ---------- */
.cat-chips .chip {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.cat-chips .chip:hover { color: var(--ink); border-color: rgba(0, 214, 240, 0.4); }
.cat-chips .chip.is-on {
  background: linear-gradient(100deg, rgba(0, 214, 240, 0.28), rgba(255, 79, 210, 0.28));
  color: #ffffff;
  border-color: rgba(0, 214, 240, 0.5);
}
.cat-back {
  background: var(--neon-btn);
  color: #041019;
  border-color: transparent;
}
.pager-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.pager-btn:hover { color: var(--ink); border-color: rgba(0, 214, 240, 0.4); }
.pager-btn.is-on {
  background: var(--neon-btn);
  color: #041019;
  border-color: transparent;
}
.search-box input {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid var(--line);
}
.search-box input::placeholder { color: var(--ink-soft); }
.search-box button {
  background: var(--neon-btn);
  color: #041019;
  border-color: transparent;
}
.search-box button:hover { filter: brightness(1.1); }
.search-list { background: rgba(16, 20, 34, 0.72); border: 1px solid var(--line); }
.search-list li { border-color: var(--line); }
.search-list li a { color: var(--ink); }
.search-list li a:hover { color: var(--rose); }
.search-list li .tag {
  background: rgba(0, 214, 240, 0.16);
  color: var(--rose);
}

/* ---------- 文章页 ---------- */
.article {
  background: var(--card);
  border: 1px solid rgba(0, 214, 240, 0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.article-cat a { color: var(--rose); }
.article-cat a:hover { color: var(--ink); }
.article-meta { color: var(--ink-soft); }
.article-title,
.page-title {
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.article-body h2,
.article-body h3 {
  color: var(--rose);
  border-color: rgba(0, 214, 240, 0.24);
}
.article-body a { color: var(--rose); }
.article-body a:hover { color: #ffffff; text-shadow: 0 0 12px rgba(0, 214, 240, 0.5); }
.article-nav .nav-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.article-nav .nav-btn:hover {
  color: #ffffff;
  border-color: rgba(0, 214, 240, 0.5);
  background: rgba(0, 214, 240, 0.14);
}
.related { background: rgba(16, 20, 34, 0.5); border: 1px solid var(--line); }
.related-title { color: var(--ink); }
.related ul li a { color: var(--ink-soft); }
.related ul li a:hover { color: var(--rose); }
.related ul li a::before { color: var(--rose); }
.related ul li .r-date { color: var(--ink-soft); }

/* ---------- 相册 ---------- */
.album-hero {
  background: linear-gradient(135deg, #0b1226, #141033 60%, #241033);
  color: var(--ink);
}
.album-back,
.photo-back {
  background: rgba(16, 20, 34, 0.8);
  color: var(--ink);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.album-back:hover,
.photo-back:hover { background: rgba(0, 214, 240, 0.2); border-color: var(--rose); }
.album-card {
  background: var(--card);
  border: 1px solid rgba(0, 214, 240, 0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.album-card:hover {
  border-color: rgba(0, 214, 240, 0.5);
  box-shadow: 0 0 30px rgba(0, 214, 240, 0.2), 0 12px 30px rgba(0, 0, 0, 0.5);
}
.album-card-img,
.album-card-ph {
  background: linear-gradient(145deg, #101a2e, #1c1230 60%, #1c1a38);
}
.album-card-body h3 { color: var(--ink); }
.album-card-body h3:hover { color: var(--rose); }
.album-card-body p { color: var(--ink-soft); }
.album-card-body .album-count { color: var(--rose); background: rgba(0, 214, 240, 0.14); }
.photo-cell { background: rgba(255, 255, 255, 0.04); }
.photo-cell.is-on {
  border-color: var(--rose);
  box-shadow: 0 0 18px rgba(0, 214, 240, 0.35);
}
.photo-main { background: rgba(16, 20, 34, 0.6); border-color: var(--line); }
.photo-main figcaption { color: var(--ink); }
.photo-strip-item.is-on img { outline-color: var(--rose); }

/* ---------- 音乐 ---------- */
.music-title,
.videos-title {
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.music-sub { color: var(--ink-soft); }
.song-list { background: rgba(16, 20, 34, 0.72); border: 1px solid var(--line); }
.song-row { border-color: var(--line); }
.song-row:hover { background: rgba(0, 214, 240, 0.08); }
.song-row.playing { background: rgba(0, 214, 240, 0.14); }
.song-cover {
  background: linear-gradient(145deg, #101a2e, #1c1230);
  color: var(--rose);
}
.song-info .song-name { color: var(--ink); }
.song-info .song-artist { color: var(--ink-soft); }
.song-dur { color: var(--ink-soft); }
.song-play { color: var(--rose); }
.song-play:hover { color: #ffffff; transform: scale(1.08); }
.music-player {
  background: rgba(10, 13, 24, 0.92);
  border: 1px solid rgba(0, 214, 240, 0.24);
  backdrop-filter: blur(16px);
  box-shadow: 0 -2px 30px rgba(0, 214, 240, 0.18);
}
.player-cover { background: linear-gradient(145deg, #101a2e, #1c1230); }
.player-btn { color: var(--ink-soft); }
.player-btn:hover { color: var(--rose); transform: scale(1.1); }
.player-play {
  background: var(--neon-btn);
  color: #041019;
}
.player-play:hover { transform: scale(1.08); }
.music-player input[type="range"],
.player-panel input[type="range"] { accent-color: var(--rose); }

/* ---------- 视频 ---------- */
.video-card {
  background: var(--card);
  border: 1px solid rgba(0, 214, 240, 0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.video-card:hover {
  border-color: rgba(0, 214, 240, 0.5);
  box-shadow: 0 0 30px rgba(0, 214, 240, 0.2), 0 12px 30px rgba(0, 0, 0, 0.5);
}
.video-meta { color: var(--ink-soft); }
.video-title,
.video-title a { color: var(--ink); }
.video-title a:hover { color: var(--rose); }
.videos-empty { color: var(--ink-soft); }
.video-player { border-color: rgba(0, 214, 240, 0.3); }

/* ---------- 微信浮动 ---------- */
.wechat-float img {
  background: rgba(16, 20, 34, 0.9);
  border: 1px solid var(--line);
}

/* ---------- 页脚 ---------- */
.site-footer {
  background: #0a0c16;
  color: var(--ink-soft);
  border-top: 1px solid rgba(0, 214, 240, 0.14);
}
.site-footer .fic-num {
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 404 / 空状态 ---------- */
.empty-page { color: var(--ink); }

/* ---------- 知识库 ---------- */
.kb-hero {
  background: linear-gradient(135deg, #0b1226, #141033 60%, #241033);
  color: var(--ink);
}
.kb-hero-title {
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kb-card {
  background: var(--card);
  border: 1px solid rgba(0, 214, 240, 0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.kb-card:hover { border-color: rgba(0, 214, 240, 0.5); box-shadow: 0 0 28px rgba(0, 214, 240, 0.2); }
.kb-card-name { color: var(--ink); }
.kb-card-count { color: var(--rose); background: rgba(0, 214, 240, 0.14); }
.kb-sec {
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 回到顶部 / 悬浮 ---------- */
.back-btn,
.top-btn {
  background: var(--neon-btn);
  color: #041019;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(0, 214, 240, 0.35);
}
.back-btn:hover,
.top-btn:hover { filter: brightness(1.12); }
.home-top-fab { background-color: rgba(226, 230, 240, 0.72); border: 1px solid var(--line); }

/* ---------- 评论 ---------- */
.comments-wrap { background: rgba(16, 20, 34, 0.72); border: 1px solid var(--line); }
.comments-title {
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: var(--ink);
}
.comments-title::before { color: var(--rose); }
.comment-msg-err {
  background: rgba(255, 79, 210, 0.14);
  color: #ff9ce6;
  border-color: rgba(255, 79, 210, 0.3);
}
.comment-msg-ok {
  background: rgba(55, 230, 160, 0.12);
  color: #8ff0cf;
  border-color: rgba(55, 230, 160, 0.3);
}
.comment-item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.comment-head .comment-name { color: var(--rose); }
.comment-head .comment-date { color: var(--ink-soft); }
.comment-text { color: var(--ink); }
.comment-field input,
.comment-field textarea {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid var(--line);
}
.comment-field input::placeholder,
.comment-field textarea::placeholder { color: var(--ink-soft); }
.btn-submit {
  background: var(--neon-btn);
  color: #041019;
  border-color: transparent;
}
.btn-submit:hover { filter: brightness(1.12); }

/* ---------- 留言板 ---------- */
.gb-hero {
  background: linear-gradient(135deg, #0b1226, #141033 60%, #241033);
  color: var(--ink);
}
.gb-title {
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gb-subtitle { color: var(--ink-soft); }
.gb-closed { color: var(--ink-soft); }
.gb-bubble {
  background: var(--card);
  border: 1px solid rgba(0, 214, 240, 0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.gb-bubble:hover { border-color: rgba(0, 214, 240, 0.5); }
.gb-name { color: var(--rose); }
.gb-date { color: var(--ink-soft); }
.gb-text { color: var(--ink); }
.gb-empty { color: var(--ink-soft); }
.gb-form { background: rgba(16, 20, 34, 0.72); border: 1px solid var(--line); }
.gb-page {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.gb-page:hover { color: var(--ink); border-color: rgba(0, 214, 240, 0.4); }
.gb-page.is-on {
  background: var(--neon-btn);
  color: #041019;
  border-color: transparent;
}