/* ===== 设计变量 ===== */
:root {
  --mx: 0;              /* 鼠标视差：横向 -1 ~ 1，由 scene3d.js 实时写入 */
  --my: 0;              /* 鼠标视差：纵向 -1 ~ 1 */
  --accent: #6d8bff;
  --accent-2: #b98bff;
  --accent-3: #33e6c0;
  --radius: 18px;
  font-synthesis: none;

  /* ===== 深色主题（默认，纯黑背景）===== */
  --bg: #000000;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.10);
  --stroke: rgba(255, 255, 255, 0.12);
  --stroke-soft: rgba(255, 255, 255, 0.07);
  --text: #e8ecf6;
  --text-dim: #97a0be;
  --text-faint: #6b7597;
  --sidebar-bg: transparent;               /* 左侧栏透明，让背景图穿透显示 */
  --card-bg: rgba(26, 28, 40, 0.55);       /* 卡片 55% 不透明 */
  --fav-bg: rgba(255, 255, 255, 0.06);
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --bg-scrim: rgba(0, 0, 0, 0.08);      /* 背景图上的薄纱（极轻，保持图片清晰）*/
  --nav-label: #97a0be;                 /* 左侧类目文字（深色背景保持不变）*/
  --nav-label-active: #ffffff;
}

/* ===== 浅色主题（谷歌浏览器同款白色背景）===== */
[data-theme="light"] {
  --bg: #ffffff;
  --panel: rgba(0, 0, 0, 0.045);
  --panel-strong: rgba(0, 0, 0, 0.08);
  --stroke: rgba(0, 0, 0, 0.10);
  --stroke-soft: rgba(0, 0, 0, 0.06);
  --text: #1f2430;
  --text-dim: #566079;
  --text-faint: #8a93a8;
  --sidebar-bg: transparent;
  --card-bg: rgba(255, 255, 255, 0.55);
  --fav-bg: rgba(0, 0, 0, 0.05);
  --shadow: 0 18px 44px -20px rgba(60, 70, 110, 0.35);
  --bg-scrim: rgba(255, 255, 255, 0.08);
  --nav-label: #5b83ff;                 /* 浅色背景时类目文字用淡蓝色，清晰可读 */
  --nav-label-active: #3a5bd0;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: "LXGW WenKai Screen", "LXGW WenKai", "霞鹜文楷", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

/* 背景 Canvas（漂浮粒子）与光晕 */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* 彩色光晕层：垫在纯色背景之上、内容与背景图之下。
   几团柔和的彩色光随鼠标大幅漂移，纯色背景下也能清晰感知 3D 视差。 */
#bg-glow {
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 22% 24%, rgba(109, 139, 255, 0.32), transparent 70%),
    radial-gradient(36% 34% at 78% 18%, rgba(185, 139, 255, 0.26), transparent 70%),
    radial-gradient(40% 40% at 70% 82%, rgba(51, 230, 192, 0.18), transparent 70%),
    radial-gradient(30% 30% at 30% 78%, rgba(109, 139, 255, 0.16), transparent 70%);
  transform:
    perspective(1200px)
    rotateX(calc(var(--my) * 3deg))
    rotateY(calc(var(--mx) * -3deg))
    translateX(calc(var(--mx) * -46px))
    translateY(calc(var(--my) * -46px))
    scale(1.05);
  will-change: transform;
  transition: opacity 0.6s ease;
}
/* 浅色主题下光晕更淡，保持清爽 */
[data-theme="light"] #bg-glow {
  background:
    radial-gradient(42% 38% at 22% 24%, rgba(109, 139, 255, 0.20), transparent 70%),
    radial-gradient(36% 34% at 78% 18%, rgba(185, 139, 255, 0.16), transparent 70%),
    radial-gradient(40% 40% at 70% 82%, rgba(51, 230, 192, 0.13), transparent 70%),
    radial-gradient(30% 30% at 30% 78%, rgba(109, 139, 255, 0.10), transparent 70%);
}
/* 深色主题：背景保持纯黑宇宙，不叠彩色光晕（光晕仅用于浅色主题）*/
[data-theme="dark"] #bg-glow { display: none; }
/* 设置了背景图片时隐藏光晕，避免和图片叠色 */
body:has(#bg-image.show) #bg-glow { opacity: 0; }

/* 宇宙画布：3D 星空粒子 + 太阳系（solar.js 绘制，仅深色主题显示）*/
#space-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
[data-theme="light"] #space-canvas { display: none; }
body:has(#bg-image.show) #space-canvas { opacity: 0; }

/* ===== 行星聚焦模式 =====
   点击行星后：页面内容淡出让位给全屏行星，右侧滑出信息面板 */
.app { transition: opacity 0.55s ease, filter 0.55s ease; }
body.planet-focus .app {
  opacity: 0.04;
  filter: blur(3px);
  pointer-events: none;
}
body.planet-hover { cursor: pointer; }

#planet-panel {
  position: fixed;
  right: 44px;
  top: 50%;
  translate: 24px -50%;
  z-index: 6;
  width: 296px;
  padding: 22px 24px 16px;
  background: rgba(14, 16, 26, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, translate 0.45s cubic-bezier(.2,.8,.2,1), visibility 0.45s;
}
#planet-panel.show { opacity: 1; visibility: visible; translate: 0 -50%; }

#planet-panel .pp-close {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px;
  border: none; border-radius: 9px;
  background: var(--panel); color: var(--text-dim);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#planet-panel .pp-close:hover { background: var(--panel-strong); color: var(--text); }

#planet-panel .pp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#planet-panel .pp-dot {
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
#planet-panel .pp-name { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
#planet-panel .pp-en { font-size: 12px; color: var(--text-faint); letter-spacing: 2px; text-transform: uppercase; }

#planet-panel .pp-live {
  margin-bottom: 12px; padding: 12px 14px;
  background: rgba(109, 139, 255, 0.08);
  border: 1px solid rgba(109, 139, 255, 0.22);
  border-radius: 12px;
}
#planet-panel .pp-live-title {
  font-size: 11px; color: var(--accent); letter-spacing: 2px; margin-bottom: 8px;
}
#planet-panel .pp-live-title::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-3); margin-right: 6px;
  animation: pulse 1.4s ease-in-out infinite;
}
#planet-panel .pp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; font-size: 12.5px;
}
#planet-panel .pp-row span { color: var(--text-dim); }
#planet-panel .pp-row b { font-weight: 600; color: var(--text); text-align: right; }
#planet-panel .pp-facts { padding: 2px 14px 4px; }
#planet-panel .pp-tip {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--stroke-soft);
  font-size: 11px; color: var(--text-faint); text-align: center;
}

@media (max-width: 860px) {
  #planet-panel {
    right: 16px; left: 16px; width: auto;
    top: auto; bottom: 16px; translate: 0 24px;
  }
  #planet-panel.show { translate: 0 0; }
}

/* 自定义图片背景层：等比铺满、居中裁剪、不重复、不变形
   3D 化：图片放大出血 6%，随鼠标做透视旋转 + 反向位移，形成有纵深的立体幕布 */
#bg-image {
  position: fixed;
  inset: -6%;
  z-index: 0;
  background-size: cover;         /* 填满整个页面，保持比例，不拉伸 */
  background-position: center center;
  background-repeat: no-repeat;   /* 单张，不平铺 */
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  transform:
    perspective(1200px)
    rotateX(calc(var(--my) * 2.4deg))
    rotateY(calc(var(--mx) * -2.4deg))
    translateX(calc(var(--mx) * -22px))
    translateY(calc(var(--my) * -22px))
    scale(1.06);
  will-change: transform;
}
#bg-image.show { opacity: 1; }
/* 图片上叠一层薄纱，保证前景文字/卡片可读 */
#bg-image.show::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-scrim);
}

/* ===== 布局 ===== */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}

/* ===== 3D 悬浮场景 =====
   页面分为若干深度层，随鼠标产生不同幅度的视差；
   入场时元素从深处浮入，之后持续轻微漂浮。
   漂浮/入场动画用独立的 translate 属性，不占用 transform，
   避免与卡片的鼠标 3D 倾斜（内联 transform）冲突。 */
@keyframes float-in {
  from { opacity: 0; translate: 0 46px; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}
@keyframes hover-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
@keyframes hover-bob-soft {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* 近景层：随鼠标轻微转动（幅度大 = 离屏幕近）*/
.topbar, .section-head {
  transform:
    perspective(1200px)
    rotateX(calc(var(--my) * -1.6deg))
    rotateY(calc(var(--mx) * 1.6deg))
    translateX(calc(var(--mx) * 8px));
  transform-style: preserve-3d;
}
/* 中景层：侧边栏，幅度小一些 */
.sidebar {
  transform:
    perspective(1200px)
    rotateY(calc(var(--mx) * 1deg))
    translateX(calc(var(--mx) * 4px));
}

/* 入场浮入：各层错峰出现 */
.brand        { animation: float-in 0.8s cubic-bezier(.2,.8,.2,1) backwards; }
.nav-item     { animation: float-in 0.7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: var(--d, 0s); }
.sidebar-foot { animation: float-in 0.8s cubic-bezier(.2,.8,.2,1) 0.5s backwards; }
.section-head { animation: float-in 0.8s cubic-bezier(.2,.8,.2,1) 0.15s backwards; }
.topbar > *   { animation: float-in 0.8s cubic-bezier(.2,.8,.2,1) 0.05s backwards; }

/* 常驻悬浮：标题与 logo 轻轻上下浮动 */
.hero-title { animation: hover-bob-soft 5s ease-in-out 1s infinite; }
.brand .logo { animation: hover-bob-soft 4s ease-in-out 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .brand, .nav-item, .sidebar-foot, .section-head, .topbar > *,
  .hero-title, .brand .logo, .card { animation: none !important; }
  .topbar, .section-head, .sidebar, #bg-image, #bg-glow, .grid { transform: none !important; }
}

/* ===== 侧边栏 ===== */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--sidebar-bg);
  border-right: none;
  transition: background 0.4s ease;
}
/* 左右分隔线：淡蓝→淡紫的纵向渐变 */
.sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(109,139,255,0) 0%,
    rgba(109,139,255,0.55) 22%,
    rgba(185,139,255,0.7) 50%,
    rgba(109,139,255,0.55) 78%,
    rgba(109,139,255,0) 100%);
  pointer-events: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 20px;
}
/* 圆形透明 logo：渐变描边圆环 + 渐变 "Bs" 字母，无底色 */
.brand .logo {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700; letter-spacing: 0.5px;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  box-shadow: 0 8px 24px -8px rgba(109,139,255,0.5);
}
/* 渐变圆环（中间镂空保持透明）*/
.brand .logo::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.brand .title { font-weight: 700; font-size: 36px; letter-spacing: 0.3px; }
.brand .sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; text-align: center; }

.nav-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--nav-label);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.22s cubic-bezier(.2,.8,.2,1);
  user-select: none;
}
.nav-item .ic { font-size: 20px; width: 24px; text-align: center; }
.nav-item .label { font-size: 16.8px; font-weight: 500; flex: 1; } /* 类目字体较原来放大 20% */
.nav-item .count {
  font-size: 11px; color: var(--text-faint);
  background: var(--panel); padding: 2px 8px; border-radius: 999px;
}
.nav-item:hover { color: var(--nav-label-active); background: var(--panel); border-color: var(--stroke-soft); transform: translateX(3px); }
.nav-item.active {
  color: var(--nav-label-active);
  background: linear-gradient(90deg, rgba(109,139,255,0.22), rgba(185,139,255,0.10));
  border-color: rgba(109,139,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(109,139,255,0.15), 0 10px 30px -12px rgba(109,139,255,0.5);
}

.sidebar-foot { padding-top: 14px; border-top: 1px solid var(--stroke-soft); font-size: 11px; color: var(--text-faint); }
/* 隐藏的管理员入口：不可见的小圆点，点击进入后台 */
.admin-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
  opacity: 0.18;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}
.admin-dot:hover { opacity: 0.9; transform: scale(1.5); box-shadow: 0 0 10px var(--accent); }

/* ===== 主内容 ===== */
.main { padding: 34px 40px 60px; perspective: 1600px; }
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.hero-wrap { flex: 1; display: flex; justify-content: center; }
.hero-title { font-size: 26px; font-weight: 700; letter-spacing: 0.4px; }
.hero-title .grad {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.search-wrap { position: relative; width: 340px; max-width: 40vw; }
.search-wrap input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 13px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.search-wrap input::placeholder { color: var(--text-faint); }
.search-wrap input:focus { border-color: rgba(109,139,255,0.55); box-shadow: 0 0 0 4px rgba(109,139,255,0.12); background: var(--panel-strong); }
.search-wrap .si { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }

/* 深浅背景切换按钮 */
.theme-toggle {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-size: 19px;
  cursor: pointer;
  transition: transform 0.18s, background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: var(--panel-strong); transform: translateY(-2px) rotate(-8deg); border-color: rgba(109,139,255,0.4); }

.section-head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 20px; }
.section-head h2 { font-size: 19px; margin: 0; font-weight: 650; }
.section-head .desc { font-size: 13px; color: var(--text-faint); }

/* ===== 卡片网格 ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 20px;
  perspective: 1000px;
  /* 整个卡片平面随鼠标微微转动，卡片仿佛悬浮在同一块 3D 面板上 */
  transform:
    rotateX(calc(var(--my) * -2.2deg))
    rotateY(calc(var(--mx) * 2.2deg));
  transform-style: preserve-3d;
}

/* 倒角卡片 */
.card {
  position: relative;
  padding: 20px;
  min-height: 128px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--stroke);
  /* 四个角统一为相同的圆角 */
  border-radius: var(--radius);
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, border-color 0.3s, background 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
  /* 悬浮态：底部拉出立体投影，看起来离开了页面平面 */
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.55);
  /* 入场浮入（--d 为 JS 写入的错峰延迟）+ 之后持续轻微漂浮
     漂浮用 translate 属性，与鼠标倾斜的内联 transform 互不干扰 */
  animation: float-in 0.7s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards,
             hover-bob 6s ease-in-out calc(var(--d, 0s) + var(--bob-d, 0s) + 0.9s) infinite;
}
.card:hover { animation-play-state: running, paused; }
/* 悬浮发光边 + 上浮 */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(140deg, rgba(109,139,255,0.6), rgba(185,139,255,0.35), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.card:hover {
  box-shadow: 0 26px 50px -18px rgba(0,0,0,0.75), 0 0 40px -18px rgba(109,139,255,0.6);
  border-color: rgba(109,139,255,0.4);
}
.card:hover::before { opacity: 1; }

.card-top { display: flex; align-items: center; gap: 12px; transform: translateZ(30px); }
.card .fav {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--fav-bg);
  border: 1px solid var(--stroke-soft);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.card .fav img { width: 26px; height: 26px; display: block; }
.card .fav .letter { font-weight: 700; font-size: 18px; color: var(--accent); }
.card h3 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: 0.2px; }
.card .host { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.card p {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  transform: translateZ(18px);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .go {
  position: absolute; right: 16px; bottom: 14px;
  font-size: 12px; color: var(--text-faint);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.25s, transform 0.25s, color 0.25s;
}
.card:hover .go { opacity: 1; transform: translateX(0); color: var(--accent); }

/* 空态 */
.empty { text-align: center; color: var(--text-faint); padding: 80px 20px; font-size: 14px; }

/* 加载骨架 */
.skeleton { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:0.9} }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: content-box; }

/* 响应式 */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nav-list { flex-direction: row; flex-wrap: wrap; }
  .nav-item .count { display: none; }
  .main { padding: 24px 18px 50px; }
  .search-wrap { max-width: none; width: 100%; }
}