/**
 * 深色模式主题 - 镂空科技风格
 * 玻璃拟态 + 描边设计 + 科技紫强调色
 *
 * 重构版：仅定义 CSS 变量，HTML 使用语义化类名
 * 所有页面元素使用 theme-* 类名，自动适配主题
 */

[data-theme="dark"] {
  /* ========== 基础色板（半透明玻璃效果） ========== */
  --bg-primary: rgba(24, 25, 28, 0.8);
  --bg-secondary: rgba(33, 34, 44, 0.6);
  --bg-tertiary: rgba(45, 46, 53, 0.5);
  --bg-elevated: rgba(58, 59, 66, 0.4);
  --bg-gradient-from: #0d0d10;
  --bg-gradient-via: #121218;
  --bg-gradient-to: #0d0d10;

  /* ========== 文字颜色 ========== */
  --text-primary: #e8e8ec;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  /* ========== 强调色（科技紫 - 镂空风格） ========== */
  --accent-primary: #a78bfa;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #c4b5fd;
  --accent-glow: rgba(167, 139, 250, 0.4);

  /* ========== 边框颜色（强调边框） ========== */
  --border-color: rgba(167, 139, 250, 0.2);
  --border-hover: rgba(167, 139, 250, 0.5);
  --border-light: rgba(255, 255, 255, 0.06);

  /* ========== 卡片样式（玻璃拟态） ========== */
  --card-bg: rgba(24, 25, 28, 0.6);
  --card-shadow: rgba(0, 0, 0, 0.3);
  --card-hover-shadow: rgba(167, 139, 250, 0.15);
  --card-hover-border: #a78bfa;

  /* ========== 头部导航（毛玻璃） ========== */
  --header-bg: rgba(13, 13, 16, 0.7);
  --header-border: rgba(167, 139, 250, 0.15);

  /* ========== 按钮样式（镂空/描边） ========== */
  --btn-primary-bg: transparent;
  --btn-primary-text: #a78bfa;
  --btn-primary-border: #a78bfa;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #9ca3af;
  --btn-hover-glow: rgba(167, 139, 250, 0.2);

  /* ========== 输入框样式（镂空） ========== */
  --input-bg: rgba(24, 25, 28, 0.4);
  --input-border: rgba(167, 139, 250, 0.3);
  --input-focus-border: #a78bfa;
  --input-focus-glow: rgba(167, 139, 250, 0.25);

  /* ========== 滚动条样式 ========== */
  --scrollbar-track: rgba(24, 25, 28, 0.5);
  --scrollbar-thumb: rgba(167, 139, 250, 0.3);
  --scrollbar-thumb-hover: #a78bfa;

  /* ========== 标签样式（镂空） ========== */
  --tag-bg: transparent;
  --tag-text: #a78bfa;
  --tag-border: rgba(167, 139, 250, 0.5);

  /* ========== 骨架屏样式 ========== */
  --skeleton-bg: rgba(45, 46, 53, 0.5);
  --skeleton-shine: rgba(167, 139, 250, 0.1);

  /* ========== 状态颜色 ========== */
  --success-bg: transparent;
  --success-text: #4ade80;
  --success-border: rgba(74, 222, 128, 0.5);
  --warning-bg: transparent;
  --warning-text: #fbbf24;
  --warning-border: rgba(251, 191, 36, 0.5);
  --error-bg: transparent;
  --error-text: #f87171;
  --error-border: rgba(248, 113, 113, 0.5);

  /* ========== 配色方案 ========== */
  color-scheme: dark;
}

/* ========== 必要的全局样式 ========== */

/* html 根元素背景 */
html[data-theme="dark"] {
  background: #0d0d10 !important;
  color-scheme: dark;
}

/* body 背景 - 深色渐变 + 微光效果 */
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #0d0d10 0%, #121218 50%, #0d0d10 100%) !important;
  color: var(--text-primary);
}

/* ========== 镂空卡片样式 ========== */
[data-theme="dark"] .video-card,
[data-theme="dark"] .card-hover {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .video-card:hover,
[data-theme="dark"] .card-hover:hover {
  border-color: var(--card-hover-border) !important;
  box-shadow:
    0 0 20px var(--card-hover-shadow),
    inset 0 0 20px rgba(167, 139, 250, 0.05) !important;
}

/* ========== 镂空按钮样式 ========== */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .episode-toggle-btn,
[data-theme="dark"] .copy-btn {
  background: transparent !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  box-shadow: 0 0 10px var(--btn-hover-glow);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .filter-btn.active:hover,
[data-theme="dark"] .episode-toggle-btn:hover,
[data-theme="dark"] .copy-btn:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  box-shadow: 0 0 20px var(--accent-glow);
}

/* ========== 镂空输入框 ========== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 15px var(--input-focus-glow) !important;
}

/* ========== 镂空标签/徽章 ========== */
[data-theme="dark"] .badge,
[data-theme="dark"] .video-tag,
[data-theme="dark"] .tag {
  background: transparent !important;
  border: 1px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

/* ========== 头部毛玻璃效果 ========== */
[data-theme="dark"] header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ========== 模态框玻璃效果 ========== */
[data-theme="dark"] #modal > div,
[data-theme="dark"] .settings-panel,
[data-theme="dark"] .history-panel {
  background: rgba(13, 13, 16, 0.85) !important;
  border: 1px solid var(--border-color) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ========== 集数按钮镂空 ========== */
[data-theme="dark"] .episode-btn,
[data-theme="dark"] #episodesGrid button {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .episode-btn:hover,
[data-theme="dark"] #episodesGrid button:hover {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  box-shadow: 0 0 10px var(--btn-hover-glow);
}

[data-theme="dark"] .episode-active {
  background: transparent !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  box-shadow: 0 0 15px var(--accent-glow);
}

/* ========== 滚动条样式 ========== */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ========== 分类筛选镂空 ========== */
[data-theme="dark"] .filter-btn {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .filter-btn:hover {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

/* ========== Logo 发光效果 ========== */
[data-theme="dark"] h1.bg-clip-text {
  background: linear-gradient(135deg, #a78bfa, #c4b5fd, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.5));
}

/* ========== 返回顶部按钮镂空 ========== */
[data-theme="dark"] .back-to-top-btn,
[data-theme="dark"] #backToTopBtn {
  background: transparent !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  box-shadow: 0 0 15px var(--accent-glow) !important;
}

[data-theme="dark"] .back-to-top-btn:hover,
[data-theme="dark"] #backToTopBtn:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  box-shadow: 0 0 25px var(--accent-glow) !important;
}

/* ========== 加载更多按钮镂空 ========== */
[data-theme="dark"] .load-more-btn,
[data-theme="dark"] #recentLoadMoreBtn button {
  background: transparent !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  box-shadow: 0 0 15px var(--accent-glow) !important;
}

[data-theme="dark"] .load-more-btn:hover,
[data-theme="dark"] #recentLoadMoreBtn button:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  box-shadow: 0 0 25px var(--accent-glow) !important;
}