/* ============================================================
   搜剧AI · 玻璃拟态（Glassmorphism）覆盖层
   仅做视觉增强，不影响业务/布局逻辑。加载顺序在 style.css 之后。
   设计语言：深空底色 + 极光光晕 + 磨砂玻璃面板 + 高光描边。
   ============================================================ */

/* ---------- 1. 玻璃设计令牌（覆盖 :root 中的半透明变量） ---------- */
:root {
  --glass-blur: 22px;
  --glass-blur-soft: 14px;
  --glass-sat: 165%;

  /* 更深的基底，让玻璃更通透 */
  --bg-primary: #070b15;
  /* 半透明玻璃填充（取代原来的实色面板） */
  --bg-secondary: rgba(20, 28, 44, 0.55);
  --bg-card: rgba(255, 255, 255, 0.055);
  --bg-card-hover: rgba(255, 255, 255, 0.11);
  --bg-nav: rgba(16, 24, 38, 0.5);
  --bg-input: rgba(255, 255, 255, 0.06);
  --bg-input-focus: rgba(255, 255, 255, 0.10);
  --bg-modal: rgba(7, 11, 21, 0.55);
  --bg-tag: rgba(127, 231, 245, 0.10);
  --bg-surface: rgba(255, 255, 255, 0.055);
  --bg-surface-strong: rgba(255, 255, 255, 0.085);

  /* 更亮一点的文字，配合玻璃对比 */
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(226, 234, 245, 0.64);
  --text-muted: rgba(214, 224, 240, 0.44);
  --text-title: rgba(255, 255, 255, 0.97);

  /* 玻璃描边：冷调亮边，取代灰边 */
  --border-color: rgba(255, 255, 255, 0.14);
  --border-light: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.08);

  /* 品牌强调色微调，更通透 */
  --accent: #7fe7f5;
  --accent-hover: #9ff2fb;
  --accent-gold: #f4cf72;

  /* 柔和的彩色投影，取代纯黑阴影 */
  --shadow: 0 22px 50px -22px rgba(2, 8, 23, 0.7);
  --shadow-glass: 0 18px 40px -20px rgba(4, 10, 28, 0.65),
                  inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

/* ---------- 2. 极光背景（让玻璃的模糊有内容可“磨”） ---------- */
html { overflow-x: hidden; }

body {
  background-color: #070b15;
  background-image:
    radial-gradient(48vw 48vw at 12% -8%, rgba(56, 189, 248, 0.30), transparent 60%),
    radial-gradient(42vw 42vw at 92% 8%, rgba(124, 58, 237, 0.28), transparent 62%),
    radial-gradient(50vw 50vw at 78% 96%, rgba(16, 185, 129, 0.20), transparent 60%),
    radial-gradient(40vw 40vw at 8% 92%, rgba(236, 72, 153, 0.16), transparent 62%),
    linear-gradient(165deg, #0a1020 0%, #0b1322 48%, #060912 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* 漂浮光斑：slow drift，给玻璃背后持续流动的色彩 */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}
body::before {
  width: 46vw; height: 46vw;
  top: -6vw; left: -4vw;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.55), rgba(56, 189, 248, 0.10) 55%, transparent 72%);
  animation: glassFloatA 26s ease-in-out infinite;
}
body::after {
  width: 40vw; height: 40vw;
  right: -6vw; bottom: -8vw;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.50), rgba(124, 58, 237, 0.10) 55%, transparent 72%);
  animation: glassFloatB 32s ease-in-out infinite;
}
@keyframes glassFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(8vw, 6vh, 0) scale(1.12); }
}
@keyframes glassFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7vw, -5vh, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* ---------- 3. 玻璃工具类（高光描边 + 磨砂） ---------- */
.glass,
.sidebar,
.topbar-tabs,
.search-box,
.hot-tag,
.recommend-tag,
.site-group-link,
.week-day,
.calendar-category,
.stat-item,
.side-item,
.icon-btn,
.level-card,
.topbar-cat-menu,
.topbar-cat-item,
.scroll-btn,
.capability-menu,
.capability-item,
.speed-mode-btn,
.search-mode-btn,
.form-input,
.modal,
.mobile-bottom-nav,
.mobile-menu-btn,
.movie-card-poster,
.download-card,
.collapsed-icons .icon-btn {
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat));
}

/* ---------- 4. 关键面板：强玻璃 + 顶部高光 ---------- */
/* 侧边栏 */
.sidebar {
  background: var(--bg-secondary) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  border-right: 1px solid var(--border-light) !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06),
              12px 0 50px -28px rgba(0, 0, 0, 0.7) !important;
}

/* 顶栏胶囊导航 */
.topbar-tabs {
  background: var(--bg-nav) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-glass) !important;
}
.topbar-tab { border-radius: 999px; }
.topbar-tab.is-active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 6px 18px -10px rgba(127, 231, 245, 0.6) !important;
}

/* 搜索大框：主视觉玻璃 */
.search-box {
  background: rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-glass),
              0 0 0 1px rgba(127, 231, 245, 0.05) !important;
}
.search-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(127, 231, 245, 0.18),
              var(--shadow-glass) !important;
}
.search-title {
  background: linear-gradient(120deg, #ffffff 0%, #9ff2fb 55%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 通用小玻璃面：高光描边 + 柔和投影 */
.hot-tag,
.recommend-tag,
.site-group-link,
.week-day,
.stat-item,
.side-item,
.icon-btn,
.level-card,
.topbar-cat-item,
.scroll-btn,
.capability-item,
.speed-mode-btn,
.search-mode-btn,
.form-input,
.download-card,
.movie-card-poster {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-glass) !important;
  transition: var(--transition), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.hot-tag:hover,
.recommend-tag:hover,
.site-group-link:hover,
.week-day:hover,
.stat-item:hover,
.side-item:hover,
.icon-btn:hover,
.level-card:hover,
.scroll-btn:hover,
.capability-item:hover,
.speed-mode-btn:hover {
  border-color: rgba(127, 231, 245, 0.5) !important;
  transform: translateY(-2px);
}

/* 分类下拉菜单 */
.topbar-cat-menu {
  background: rgba(16, 24, 38, 0.7) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glass) !important;
}

/* 追剧日历 */
.calendar-category {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glass) !important;
  padding: 16px !important;
}
.week-day {
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)) !important;
  border-radius: var(--radius) !important;
}
.week-day.active {
  background: var(--bg-tag) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 8px 22px -12px rgba(127, 231, 245, 0.7) !important;
}

/* ---------- 5. 影片卡片：磨砂玻璃海报框 + 悬浮发光 ---------- */
.movie-card-poster {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glass) !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.movie-card:hover .movie-card-poster {
  transform: translateY(-6px);
  border-color: rgba(127, 231, 245, 0.55) !important;
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(127, 231, 245, 0.35),
              0 0 28px -6px rgba(127, 231, 245, 0.5) !important;
}
/* 角标也玻璃化 */
.movie-card-badge,
.movie-card-heat {
  background: rgba(10, 16, 28, 0.55) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* ---------- 6. 弹窗：磨砂玻璃主体 + 模糊遮罩 ---------- */
.modal-overlay {
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(10px) saturate(var(--glass-sat)) !important;
  background: var(--bg-modal) !important;
}
.modal {
  background: rgba(18, 26, 42, 0.62) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-glass),
              0 40px 90px -40px rgba(0, 0, 0, 0.8) !important;
}
.form-input {
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: var(--radius) !important;
}
.form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(127, 231, 245, 0.16) !important;
}
.modal-submit {
  background: linear-gradient(120deg, var(--accent) 0%, #6ee7f5 100%) !important;
  color: #06212a !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 10px 26px -12px rgba(127, 231, 245, 0.7) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.modal-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(127, 231, 245, 0.9) !important; }

/* ---------- 7. 移动端底部导航 + 悬浮按钮：玻璃条 ---------- */
.mobile-bottom-nav {
  background: rgba(14, 21, 35, 0.6) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -10px 40px -20px rgba(0, 0, 0, 0.7) !important;
}
.mobile-menu-btn {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) !important;
  backdrop-filter: blur(var(--glass-blur-soft)) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-glass) !important;
}
.mobile-nav-item.active {
  color: var(--accent) !important;
  text-shadow: 0 0 18px rgba(127, 231, 245, 0.5);
}

/* 通用聚焦可见性（a11y） */
a:focus-visible,
button:focus-visible,
.topbar-tab:focus-visible,
.hot-tag:focus-visible,
.movie-card:focus-visible .movie-card-poster {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 浅色主题：玻璃依然成立，但背景改为明亮极光，避免深底配浅面板的违和 */
body.light-theme {
  background-color: #eef2f9 !important;
  background-image:
    radial-gradient(50vw 50vw at 10% -8%, rgba(56, 189, 248, 0.22), transparent 60%),
    radial-gradient(46vw 46vw at 94% 8%, rgba(167, 139, 250, 0.20), transparent 62%),
    radial-gradient(52vw 52vw at 82% 98%, rgba(45, 212, 191, 0.16), transparent 60%),
    linear-gradient(165deg, #f4f7fc 0%, #eaeef6 50%, #e6ebf4 100%) !important;
}
body.light-theme::before { background: radial-gradient(circle, rgba(56,189,248,0.35), transparent 70%); opacity: 0.5; }
body.light-theme::after  { background: radial-gradient(circle, rgba(167,139,250,0.32), transparent 70%); opacity: 0.5; }
body.light-theme .sidebar,
body.light-theme .topbar-tabs,
body.light-theme .search-box,
body.light-theme .modal {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 18px 40px -22px rgba(31, 45, 70, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
body.light-theme .movie-card-poster { border-color: rgba(255, 255, 255, 0.6) !important; }

/* ---------- 8. 友好降级：不支持 backdrop-filter 时回退为更实的玻璃色 ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .sidebar { background: rgba(12, 18, 30, 0.92) !important; }
  .search-box { background: rgba(20, 28, 44, 0.9) !important; }
  .topbar-tabs { background: rgba(14, 21, 35, 0.9) !important; }
  .modal { background: rgba(14, 21, 35, 0.95) !important; }
  .movie-card-poster { background: rgba(20, 28, 44, 0.85) !important; }
  .mobile-bottom-nav { background: rgba(10, 16, 28, 0.94) !important; }
}