/* ============================================
 * Theme Switcher Panel
 * ============================================ */
#theme-switcher-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  display: none;
}
#theme-switcher-overlay.active { display: block; }

#theme-switcher-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 9999;
  width: 520px;
  max-width: 92vw;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  padding: 24px 28px 28px;
  display: none;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#theme-switcher-panel.active {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
}
.ts-close {
  cursor: pointer;
  font-size: 20px;
  color: #999;
  transition: color 0.2s;
}
.ts-close:hover { color: #333; }

.ts-options {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.ts-card {
  flex: 1;
  cursor: pointer;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 14px 10px 16px;
  text-align: center;
  transition: all 0.25s ease;
  background: #fafafa;
}
.ts-card:hover {
  border-color: #bbb;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}
.ts-card.selected {
  border-color: #666;
  box-shadow: 0 0 0 2px rgba(102,102,102,0.3);
}

.ts-preview {
  height: 80px;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}

/* Mini preview mockups */
.ts-mini-header {
  height: 16px;
  background: #555;
  margin: 6px 6px 0;
  border-radius: 3px;
}
.ts-mini-lines {
  padding: 4px 6px;
}
.ts-mini-line {
  height: 5px;
  background: #ddd;
  border-radius: 2px;
  margin: 4px 0;
}
.w70 { width: 70%; }
.w50 { width: 50%; }
.w60 { width: 60%; }

.ts-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}
.ts-desc {
  font-size: 12px;
  color: #888;
}

/* Preview styles */
.ts-preview-simple { background: #f5f5f5; }
.ts-preview-simple .ts-mini-header { background: #333; }

.ts-preview-anime { background: #fff0f5; }
.ts-preview-anime .ts-mini-header.pink { background: #ff69b4; }
.ts-preview-anime .ts-mini-line.pink { background: #ffb6c1; }

.ts-preview-cool { background: #03151d; }
.ts-preview-cool .ts-mini-header.neon { background: linear-gradient(90deg, #00E5FF, #6C63FF); }
.ts-preview-cool .ts-mini-line.neon { background: #00E5FF; opacity: 0.5; }

/* Nav theme button */
#theme-nav-btn {
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
  transition: opacity 0.2s;
}
#theme-nav-btn:hover { opacity: 1; }

/* ============================================
 * 动漫风 — Pink + Video Background
 * ============================================ */
body.theme-anime {
  position: relative;
  /* 视频/poster 尚未就绪时的兜底底色，避免出现纯白背景 */
  background: linear-gradient(135deg, #ffe4ef 0%, #ffd9ec 45%, #ffeef6 100%);
}

body.theme-anime #anime-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -3;
  opacity: 0.55;
  pointer-events: none;
}

/* 视频就绪前先动起来的 poster 层（纯 CSS 缓慢推拉） */
body.theme-anime #anime-bg-poster-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  background: url('/assets/anime-bg-poster.jpg') center / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
  animation: anime-bg-drift 9s ease-in-out infinite alternate;
  transition: opacity 0.6s ease;
}

body.theme-anime #anime-bg-poster-layer.is-hidden {
  opacity: 0;
}

@keyframes anime-bg-drift {
  from {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.14) translate3d(-2%, -1.5%, 0);
  }
}

body.theme-anime::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,182,193,0.06), rgba(255,105,180,0.04));
  z-index: -1;
  pointer-events: none;
}

body.theme-anime .header {
  background: rgba(255,240,245,0.35) !important;
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,105,180,0.15);
}

body.theme-anime .footer {
  background: rgba(255,240,245,0.35);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,105,180,0.15);
}

body.theme-anime .sidebar-inner {
  background: rgba(255,240,245,0.4);
  backdrop-filter: blur(6px);
  border-radius: 8px;
}

body.theme-anime .post-block {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(255,105,180,0.08);
}

body.theme-anime .posts-expand .post-body,
body.theme-anime .category-list,
body.theme-anime .tag-cloud,
body.theme-anime .collection-card {
  background: transparent;
}

body.theme-anime .search-popup,
body.theme-anime #theme-switcher-panel {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
}

body.theme-anime .main {
  background: transparent !important;
}

body.theme-anime .main-inner {
  background: transparent !important;
}

body.theme-anime .column {
  background: transparent !important;
}

body.theme-anime .container {
  background: transparent !important;
}

body.theme-anime a.brand,
body.theme-anime .site-title {
  color: #d63384;
}

body.theme-anime .menu .btn-bar,
body.theme-anime .menu a {
  color: #c04080;
}

body.theme-anime .menu a:hover,
body.theme-anime .menu .active a {
  color: #ff1493;
}

body.theme-anime .post-title,
body.theme-anime .post-title-link {
  color: #c2185b;
}

body.theme-anime .post-meta,
body.theme-anime .post-nav-item,
body.theme-anime .post-nav-title {
  color: #e91e63;
}

body.theme-anime .sidebar .sidebar-nav,
body.theme-anime .sidebar .site-overview {
  color: #ad1457;
}

body.theme-anime .site-author-name,
body.theme-anime .site-state-item .site-state-item-name {
  color: #c2185b;
}

body.theme-anime .posts-expand .post-more-link a {
  background: #ff69b4;
  color: #fff;
  border-color: #ff69b4;
}

body.theme-anime .post-more-link a:hover {
  background: #ff1493;
  border-color: #ff1493;
}

body.theme-anime .comments .comment-plugin-wrapper,
body.theme-anime #twikoo {
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 12px;
}

body.theme-anime ::-webkit-scrollbar-thumb {
  background: #ffb6c1;
}

/* ============================================
 * 炫酷风 — Dark + Neon + Canvas Background
 * ============================================ */
body.theme-cool {
  position: relative;
  background: #03151d !important;
}

body.theme-cool #cool-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  opacity: 0.7;
}

body.theme-cool::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(3,21,29,0.3), rgba(7,51,71,0.2));
  z-index: -1;
  pointer-events: none;
}

body.theme-cool .header {
  background: rgba(3,21,29,0.4) !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,229,255,0.15);
}

body.theme-cool .footer {
  background: rgba(3,21,29,0.4);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,229,255,0.15);
  color: #8BB8CF;
}

body.theme-cool .sidebar-inner {
  background: rgba(7,33,46,0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: 8px;
}

body.theme-cool .post-block {
  background: rgba(7,33,46,0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(0,229,255,0.06), inset 0 0 1px rgba(0,229,255,0.1);
}

body.theme-cool .collection-card {
  background: rgba(7,33,46,0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,229,255,0.1);
}

body.theme-cool .search-popup,
body.theme-cool #theme-switcher-panel {
  background: rgba(7,33,46,0.95);
  backdrop-filter: blur(12px);
}

body.theme-cool .main {
  background: transparent !important;
}

body.theme-cool .main-inner {
  background: transparent !important;
}

body.theme-cool .column {
  background: transparent !important;
}

body.theme-cool .container {
  background: transparent !important;
}

body.theme-cool .header { border-bottom-color: rgba(0,229,255,0.15); }
body.theme-cool .footer { border-top-color: rgba(0,229,255,0.15); }

body.theme-cool,
body.theme-cool .post-body,
body.theme-cool .post-title,
body.theme-cool .post-title-link,
body.theme-cool .site-title,
body.theme-cool .brand {
  color: #EAF8FF;
}

body.theme-cool .post-meta,
body.theme-cool .post-nav-item {
  color: #6A97AC;
}

body.theme-cool .menu .btn-bar,
body.theme-cool .menu a {
  color: #8BB8CF;
}

body.theme-cool .menu a:hover,
body.theme-cool .menu .active a {
  color: #00E5FF;
  text-shadow: 0 0 8px rgba(0,229,255,0.6);
}

body.theme-cool .site-author-name,
body.theme-cool .site-state-item .site-state-item-name {
  color: #00E5FF;
  text-shadow: 0 0 6px rgba(0,229,255,0.4);
}

body.theme-cool .posts-expand .post-more-link a {
  background: transparent;
  color: #00E5FF;
  border: none;
  box-shadow: none;
}

body.theme-cool .post-more-link a:hover {
  background: transparent;
  color: #6C63FF;
  box-shadow: none;
}

body.theme-cool .post-title-link:hover {
  color: #6C63FF;
  text-shadow: 0 0 10px rgba(108,99,255,0.6);
}

body.theme-cool .menu-item-badge {
  background: #FF3D9A;
}

body.theme-cool .comments .comment-plugin-wrapper,
body.theme-cool #twikoo {
  background: rgba(7,33,46,0.9);
  border-radius: 8px;
  padding: 12px;
}

body.theme-cool .post-block {
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(0,229,255,0.08), inset 0 0 1px rgba(0,229,255,0.12);
}

body.theme-cool .sidebar {
  background: transparent;
}

body.theme-cool ::-webkit-scrollbar-track {
  background: #03151d;
}

body.theme-cool ::-webkit-scrollbar-thumb {
  background: #00E5FF;
  opacity: 0.5;
}

body.theme-cool .back-to-top {
  background: rgba(0,229,255,0.15);
  border-color: rgba(0,229,255,0.3);
}

body.theme-cool .back-to-top:hover {
  box-shadow: 0 0 16px rgba(0,229,255,0.4);
}

/* === 炫酷风：所有文字可读性 === */
body.theme-cool .post-body p,
body.theme-cool .post-body li,
body.theme-cool .post-body span,
body.theme-cool .post-body td,
body.theme-cool .post-body th {
  color: #D0E8F0;
}

body.theme-cool .post-body a,
body.theme-cool .post-copyright a,
body.theme-cool .post-nav a,
body.theme-cool .post-meta a,
body.theme-cool .category-list a,
body.theme-cool .tag-cloud a {
  color: #00E5FF;
}

body.theme-cool .post-body a:hover,
body.theme-cool .post-copyright a:hover,
body.theme-cool .post-nav a:hover,
body.theme-cool .post-meta a:hover {
  color: #6C63FF;
  text-shadow: 0 0 6px rgba(108,99,255,0.4);
}

body.theme-cool .post-copyright,
body.theme-cool .post-copyright li,
body.theme-cool .post-copyright strong {
  color: #B0C8D4;
}

body.theme-cool .post-copyright {
  background: rgba(0,229,255,0.06);
  border-left: 3px solid rgba(0,229,255,0.4);
}

body.theme-cool .post-meta-item-text,
body.theme-cool .post-meta-item {
  color: #6A97AC;
}

body.theme-cool .post-nav-item .nav-label,
body.theme-cool .post-nav-title {
  color: #8BB8CF;
}

body.theme-cool .site-state-item-count {
  color: #00E5FF;
}

body.theme-cool .site-description {
  color: #8BB8CF;
}

body.theme-cool .sidebar-nav li {
  color: #6A97AC;
}

body.theme-cool .sidebar-nav li:hover {
  color: #00E5FF;
}

body.theme-cool .footer {
  color: #8BB8CF;
}

body.theme-cool .footer a {
  color: #00E5FF;
}

body.theme-cool .footer .copyright {
  color: #B0C8D4;
}

body.theme-cool .post-button .btn {
  color: #00E5FF;
}

body.theme-cool blockquote {
  border-left-color: rgba(0,229,255,0.4);
  color: #8BB8CF;
}

body.theme-cool code,
body.theme-cool pre,
body.theme-cool .highlight pre,
body.theme-cool .highlight table,
body.theme-cool .table-container,
body.theme-cool .highlight .gutter,
body.theme-cool .highlight .code,
body.theme-cool .highlight .gutter pre,
body.theme-cool .highlight .code pre {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}

body.theme-cool .highlight,
body.theme-cool .highlight tr,
body.theme-cool .highlight td {
  background: #1a1a1a !important;
  border: none !important;
}

body.theme-cool .highlight .line,
body.theme-cool .highlight span,
body.theme-cool .hljs-string,
body.theme-cool .hljs-keyword,
body.theme-cool .hljs-comment,
body.theme-cool .hljs-number,
body.theme-cool .hljs-title,
body.theme-cool .hljs-built_in,
body.theme-cool .highlight .string,
body.theme-cool .highlight .keyword,
body.theme-cool .highlight .comment,
body.theme-cool .highlight .number,
body.theme-cool .highlight .title,
body.theme-cool .highlight .built_in {
  color: #e0e0e0 !important;
  text-shadow: none !important;
}
body.theme-cool .highlight .keyword {
  color: #e0e0e0 !important;
}

body.theme-cool .highlight .hljs-comment,
body.theme-cool .highlight .comment {
  color: #888 !important;
}

body.theme-cool .highlight .hljs-number,
body.theme-cool .highlight .number {
  color: #e0e0e0 !important;
}

body.theme-cool .highlight .hljs-title,
body.theme-cool .highlight .title,
body.theme-cool .highlight .hljs-function {
  color: #e0e0e0 !important;
}

body.theme-cool .highlight .hljs-built_in,
body.theme-cool .highlight .built_in {
  color: #e0e0e0 !important;
}

body.theme-cool pre code {
  background: transparent !important;
  color: #e0e0e0 !important;
  text-shadow: none !important;
}

body.theme-cool .post-copyright a,
body.theme-cool .post-body a,
body.theme-cool .post-meta a,
body.theme-cool .post-nav a,
body.theme-cool .category-list a,
body.theme-cool .tag-cloud a,
body.theme-cool .footer a,
body.theme-cool .posts-expand .post-more-link a,
body.theme-cool .post-button .btn,
body.theme-cool .collection-card a,
body.theme-cool .search-result a,
body.theme-cool .post-toc a {
  color: #00E5FF;
  font-weight: 500;
  text-shadow: 0 0 4px rgba(0,229,255,0.3);
}

body.theme-cool .post-copyright a:hover,
body.theme-cool .post-body a:hover,
body.theme-cool .post-meta a:hover,
body.theme-cool .post-nav a:hover,
body.theme-cool .category-list a:hover,
body.theme-cool .tag-cloud a:hover,
body.theme-cool .footer a:hover,
body.theme-cool .post-button .btn:hover {
  color: #6C63FF;
  text-shadow: 0 0 8px rgba(108,99,255,0.5);
}

body.theme-cool .post-tags a,
body.theme-cool .post-tags .post-tag {
  background: transparent;
  border: none;
  color: #00E5FF;
  text-shadow: none;
}

body.theme-cool .post-tags a:hover {
  background: transparent;
  color: #6C63FF;
}

body.theme-cool #twikoo,
body.theme-cool #twikoo .tk-comment,
body.theme-cool #twikoo .tk-comments,
body.theme-cool #twikoo .tk-meta,
body.theme-cool #twikoo .tk-extras,
body.theme-cool #twikoo .tk-row {
  background: rgba(7,33,46,0.85) !important;
  color: #D0E8F0 !important;
}

body.theme-cool #twikoo .tk-nick,
body.theme-cool #twikoo .tk-nick-link,
body.theme-cool #twikoo .tk-ruser {
  color: #00E5FF !important;
  font-weight: 500;
  text-shadow: 0 0 4px rgba(0,229,255,0.3);
}

body.theme-cool #twikoo .tk-time,
body.theme-cool #twikoo .tk-meta {
  color: #6A97AC !important;
}

body.theme-cool #twikoo .tk-content,
body.theme-cool #twikoo .tk-content p {
  color: #EAF8FF !important;
}

body.theme-cool #twikoo input,
body.theme-cool #twikoo textarea,
body.theme-cool #twikoo .tk-input {
  background: rgba(0,0,0,0.3) !important;
  color: #EAF8FF !important;
  border: 1px solid rgba(0,229,255,0.2) !important;
  border-radius: 6px;
}

body.theme-cool #twikoo .tk-submit button,
body.theme-cool #twikoo button,
body.theme-cool #twikoo .tk-sort-item,
body.theme-cool #twikoo .tk-action-icon,
body.theme-cool #twikoo .tk-icon {
  background: transparent !important;
  color: #00E5FF !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.theme-cool #twikoo .tk-submit button:hover,
body.theme-cool #twikoo button:hover {
  background: rgba(0,229,255,0.12) !important;
  box-shadow: none !important;
}

body.theme-cool .post-toc .nav-item,
body.theme-cool .post-toc a {
  color: #6A97AC;
}

body.theme-cool .post-toc a:hover {
  color: #00E5FF;
}

body.theme-cool .collection-card a,
body.theme-cool .collection .collection-header {
  color: #00E5FF;
}

body.theme-cool .tag-cloud a {
  color: #8BB8CF;
}

body.theme-cool .tag-cloud a:hover {
  color: #00E5FF;
  text-shadow: 0 0 6px rgba(0,229,255,0.5);
}

body.theme-cool .posts-expand .post-more-link a {
  color: #00E5FF;
}

body.theme-cool .search-popup .search-result a,
body.theme-cool .search-popup input {
  color: #EAF8FF;
}

body.theme-cool .search-popup {
  background: rgba(7,33,46,0.95);
}

/* === 动漫风：补充文字可读性 === */
body.theme-anime .post-body p,
body.theme-anime .post-body li,
body.theme-anime .post-body span,
body.theme-anime .post-body td,
body.theme-anime .post-body th {
  color: #4a154b;
}

body.theme-anime .post-body a,
body.theme-anime .post-copyright a,
body.theme-anime .post-nav a {
  color: #e91e63;
}

body.theme-anime .post-copyright,
body.theme-anime .post-copyright li,
body.theme-anime .post-copyright strong {
  color: #6a1b4d;
}

body.theme-anime .post-copyright {
  background: rgba(255,105,180,0.08);
  border-left: 3px solid rgba(255,105,180,0.4);
}

body.theme-anime .footer {
  color: #880e4f;
}

body.theme-anime .footer a {
  color: #e91e63;
}

body.theme-anime .footer .copyright {
  color: #ad1457;
}

body.theme-anime .site-description {
  color: #c2185b;
}

body.theme-anime blockquote {
  border-left-color: rgba(255,105,180,0.4);
}

body.theme-anime code,
body.theme-anime pre {
  background: rgba(255,182,193,0.15);
}

/* ============================================
 * Article Navigation (prev/next)
 * ============================================ */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

.post-nav-item {
  flex: 1;
  max-width: 48%;
}

.post-nav-item a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.post-nav-item .nav-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.post-nav-item .post-nav-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.post-nav-next { text-align: right; }
.post-nav-next .nav-label::before { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; opacity: 0.5; }
.post-nav-prev .nav-label::before { content: "\f060"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; opacity: 0.5; }

/* ============================================
 * 打赏文案点击后才显示
 * ============================================ */
.reward-container > div:first-child {
  display: none;
}
.post-reward.active ~ div,
.reward-container:has(.post-reward.active) > div:first-child {
  display: block;
}