/* ============================================================
   朱峰社区 · 星空科技风 · 全站覆盖样式 (v1)
   加载顺序：在 style.css 之后，确保 CSS 变量覆盖生效
   设计语言：深空蓝紫底 + 青蓝霓辉 + 玻璃拟态 + 渐变描边
   ============================================================ */

:root {
  /* —— 主色系：深空蓝紫 — */
  --bg: #04081f;
  --bg-grad: radial-gradient(ellipse at 20% 0%, #1a0b3d 0%, #0a0727 35%, #04081f 70%, #02030f 100%);
  --bg-solid: #04081f;

  /* —— 主题色：青蓝科技感 — */
  --primary: #00d4ff;
  --primary-2: #5b8cff;
  --primary-3: #a855f7;
  --primary-grad: linear-gradient(135deg, #00d4ff 0%, #5b8cff 50%, #a855f7 100%);
  --primary-glow: 0 0 24px rgba(0, 212, 255, 0.45), 0 0 60px rgba(91, 140, 255, 0.25);

  /* —— 文字：更高对比度的星空白 — */
  --text: #e8efff;
  --text-2: #b8c5e0;
  --text-3: #7a8aab;
  --text-grad: linear-gradient(90deg, #00d4ff 0%, #a855f7 100%);

  /* —— 边框/分割线：半透光霓虹边 — */
  --border: rgba(120, 180, 255, 0.18);
  --border-strong: rgba(0, 212, 255, 0.45);
  --border-grad: linear-gradient(135deg, rgba(0,212,255,.6), rgba(168,85,247,.4), rgba(0,212,255,.2));

  /* —— 玻璃面板 — */
  --glass: rgba(10, 18, 50, 0.55);
  --glass-strong: rgba(15, 25, 65, 0.72);
  --glass-blur: saturate(160%) blur(14px);
}

/* —— 1. 全局背景：星空底层 + 极光晕 + 网格扫描线 — */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body {
  background:
    /* 顶部极光晕 */
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(91, 140, 255, 0.28) 0%, transparent 60%),
    /* 左下紫光 */
    radial-gradient(ellipse 800px 500px at 10% 100%, rgba(168, 85, 247, 0.22) 0%, transparent 55%),
    /* 右下青光 */
    radial-gradient(ellipse 700px 450px at 95% 90%, rgba(0, 212, 255, 0.18) 0%, transparent 55%),
    var(--bg-grad) !important;
  background-attachment: fixed !important;
  position: relative;
  min-height: 100vh;
}

/* 网格扫描线（科技感） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* 顶部高光横线 */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,.7) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.5);
}

/* Canvas 星空 */
#starfield-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* 让所有内容浮在星空之上 */
#app, #preloader, header, footer, main, .container, section {
  position: relative;
  z-index: 2;
}

/* —— 2. 滚动条：科技感 — */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: rgba(4, 8, 31, 0.6);
  border-left: 1px solid var(--border);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d4ff 0%, #5b8cff 50%, #a855f7 100%);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5b8cff 0%, #a855f7 50%, #00d4ff 100%);
}

/* —— 3. 选中文本 — */
::selection {
  background: rgba(0, 212, 255, 0.35);
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

/* —— 4. 链接：霓虹下划线 — */
a {
  color: var(--primary) !important;
  transition: color .2s ease, text-shadow .2s ease;
}
a:hover {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
}

/* —— 5. 标题：渐变霓辉 — */
h1, h2, h3, h4, h5, h6, .title, .heading, [class*="title"], [class*="heading"] {
  color: var(--text) !important;
  letter-spacing: 0.02em;
}

h1, .h1, [class*="title-1"], [class*="hero-title"] {
  background: var(--text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(91, 140, 255, 0.35));
  font-weight: 800 !important;
}

/* —— 6. 按钮：主色渐变光晕 — */
button, .btn, [class*="btn-"], [class*="button"] {
  position: relative;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}

button:not([class*="ghost"]):not([class*="outline"]):not([class*="link"]):not(.close),
.btn-primary, [class*="primary"] {
  background: var(--primary-grad) !important;
  color: #fff !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--primary-glow) !important;
  text-shadow: 0 0 6px rgba(255,255,255,.4);
}
button:not([class*="ghost"]):not([class*="outline"]):hover,
.btn-primary:hover, [class*="primary"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.7), 0 0 80px rgba(91, 140, 255, 0.45) !important;
}

/* —— 7. 卡片/面板：玻璃拟态 + 渐变描边 — */
.card, .panel, .box, [class*="card"], [class*="panel"], [class*="box"]:not([class*="checkbox"]) {
  background: var(--glass) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card:hover, [class*="card"]:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--border-strong),
    0 0 30px rgba(0, 212, 255, 0.15) !important;
}

/* —— 8. 表单输入：暗色霓辉 — */
input, textarea, select {
  background: rgba(4, 8, 31, 0.6) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15), 0 0 18px rgba(0, 212, 255, 0.25) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-3) !important;
}

/* —— 9. 顶部导航：玻璃栏 + 底边霓虹线 — */
header, nav, .header, .navbar, [class*="header"]:not([class*="home"]), [class*="nav"] {
  background: rgba(4, 8, 31, 0.65) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
  position: sticky !important;
  top: 0;
  z-index: 100;
}

/* —— 10. 底部：星空辉光渐变 — */
footer, .footer, [class*="footer"] {
  background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 31, 0.92) 30%, #02030f 100%) !important;
  border-top: 1px solid var(--border) !important;
  position: relative;
}
footer::before, .footer::before, [class*="footer"]::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 1px;
  background: var(--border-grad);
  pointer-events: none;
}

/* —— 11. 分割线 — */
hr, [class*="divider"] {
  border: none !important;
  height: 1px !important;
  background: var(--border-grad) !important;
  margin: 28px 0 !important;
}

/* —— 12. 标签/Badge：胶囊霓辉 — */
.tag, .badge, [class*="tag"], [class*="badge"]:not([class*="new"]) {
  background: rgba(0, 212, 255, 0.12) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
  border-radius: 999px !important;
  padding: 2px 12px !important;
  font-size: 12px !important;
  text-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
}

/* —— 13. 关键视觉：辉光文字工具类 — */
.glow-text {
  background: var(--text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(91, 140, 255, 0.4));
}

/* —— 14. 关键视觉：渐变描边按钮 — */
.cta-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--primary-grad) !important;
  color: #fff !important;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: var(--primary-glow);
  transition: transform .25s ease, box-shadow .25s ease;
  text-shadow: 0 0 6px rgba(255,255,255,.3);
}
.cta-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 32px rgba(0, 212, 255, 0.75), 0 0 80px rgba(91, 140, 255, 0.5) !important;
  color: #fff !important;
}

/* —— 15. 段落/正文 — */
p, li, span, td, th, label {
  color: var(--text-2);
}
strong, b { color: var(--text) !important; }

/* —— 16. 表格：暗色辉光 — */
table {
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  overflow: hidden;
}
th {
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--primary) !important;
  text-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
  border-bottom: 1px solid var(--border) !important;
}
td {
  border-bottom: 1px solid rgba(120, 180, 255, 0.08) !important;
}

/* —— 17. 减少动效偏好 — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* —— 18. 移动端微调 — */
@media (max-width: 768px) {
  body::before { background-size: 40px 40px; }
  h1 { font-size: clamp(28px, 7vw, 44px) !important; }
}