/* ============================================================
   STELLARIS · 星瀚大学  ——  自定义视觉层 + 5 套主题
   ============================================================ */

/* —— 主题变量（默认=星瀚暗夜） —— */
:root, [data-theme="dark"] {
  --c-base: #070b18;
  --c-surface: #0d1426;
  --c-surface-2: #121a32;
  --c-glass: rgba(255,255,255,.07);
  --c-glass-2: rgba(255,255,255,.02);
  --c-glass-strong: linear-gradient(150deg, rgba(20,28,52,.85), rgba(12,18,38,.78));
  --c-ring-card: linear-gradient(150deg, rgba(18,26,48,.8), rgba(10,16,32,.7));
  --c-text: #cbd5e1;
  --c-text-bright: #ffffff;
  --c-text-muted: #64748b;
  --c-border: rgba(255,255,255,.08);
  --c-input-bg: rgba(255,255,255,.04);
  --c-orb-1: #1e6bff; --c-orb-2: #8b5cf6; --c-orb-3: #06b6d4;
  --c-nav-text: #94a3b8;
  --c-shadow: rgba(0,0,0,.6);
  --aurora-opacity: .55;
}

/* —— 翡翠森林 —— */
[data-theme="emerald"] {
  --c-base: #061410;
  --c-surface: #0a1f18;
  --c-surface-2: #0e2820;
  --c-glass-strong: linear-gradient(150deg, rgba(16,40,32,.85), rgba(8,24,18,.78));
  --c-ring-card: linear-gradient(150deg, rgba(14,36,28,.8), rgba(8,22,16,.7));
  --c-orb-1: #059669; --c-orb-2: #14b8a6; --c-orb-3: #84cc16;
}

/* —— 落日熔金 —— */
[data-theme="sunset"] {
  --c-base: #14080a;
  --c-surface: #1f100e;
  --c-surface-2: #2a1614;
  --c-glass-strong: linear-gradient(150deg, rgba(40,20,18,.85), rgba(28,14,12,.78));
  --c-ring-card: linear-gradient(150deg, rgba(36,18,16,.8), rgba(24,12,10,.7));
  --c-orb-1: #f59e0b; --c-orb-2: #f43f5e; --c-orb-3: #fb923c;
}

/* —— 深海幽蓝 —— */
[data-theme="ocean"] {
  --c-base: #050d1a;
  --c-surface: #0a1628;
  --c-surface-2: #0e1d35;
  --c-glass-strong: linear-gradient(150deg, rgba(14,28,48,.85), rgba(8,18,34,.78));
  --c-ring-card: linear-gradient(150deg, rgba(12,24,42,.8), rgba(8,16,30,.7));
  --c-orb-1: #0ea5e9; --c-orb-2: #3b82f6; --c-orb-3: #06b6d4;
}

/* —— 晨曦浅色 —— */
[data-theme="light"] {
  --c-base: #eef1f6;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-glass: rgba(0,0,0,.03);
  --c-glass-2: rgba(0,0,0,.015);
  --c-glass-strong: linear-gradient(150deg, rgba(255,255,255,.9), rgba(248,250,252,.85));
  --c-ring-card: linear-gradient(150deg, rgba(255,255,255,.95), rgba(248,250,252,.9));
  --c-text: #475569;
  --c-text-bright: #0f172a;
  --c-text-muted: #94a3b8;
  --c-border: rgba(0,0,0,.08);
  --c-input-bg: rgba(0,0,0,.025);
  --c-orb-1: #93c5fd; --c-orb-2: #c4b5fd; --c-orb-3: #a5f3fc;
  --c-nav-text: #64748b;
  --c-shadow: rgba(0,0,0,.1);
  --aurora-opacity: .25;
}

/* —— 浅色主题：关键元素翻转 —— */
[data-theme="light"] .text-white { color: #0f172a !important; }
[data-theme="light"] .text-slate-200 { color: #334155 !important; }
[data-theme="light"] .text-slate-300 { color: #475569 !important; }
[data-theme="light"] .text-slate-400 { color: #64748b !important; }
[data-theme="light"] .text-slate-500 { color: #94a3b8 !important; }
[data-theme="light"] .text-slate-600 { color: #cbd5e1 !important; }
[data-theme="light"] .bg-white\/5 { background-color: rgba(0,0,0,.03) !important; }
[data-theme="light"] .bg-white\/8 { background-color: rgba(0,0,0,.05) !important; }
[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,.02) !important; }
[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,.06) !important; }
[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .divide-white\/5 > * { border-color: rgba(0,0,0,.06) !important; }
[data-theme="light"] .ring-surface { --tw-ring-color: #fff !important; }
[data-theme="light"] .input-field { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .input-field:focus { border-color: rgba(99,102,241,.4); box-shadow: 0 0 0 4px rgba(99,102,241,.1); }
[data-theme="light"] .btn-primary { color: #fff !important; }
[data-theme="light"] .btn-primary span { color: #fff !important; }
[data-theme="light"] .nav-item { color: var(--c-nav-text); }
[data-theme="light"] .text-gradient { background: linear-gradient(100deg,#0ea5e9,#6366f1,#c026d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .glass { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .glass-strong { border-color: rgba(0,0,0,.08); box-shadow: 0 8px 30px -8px rgba(0,0,0,.08); }
[data-theme="light"] .ring-card::before { background: linear-gradient(135deg, rgba(99,102,241,.3), transparent 40%, rgba(217,70,239,.25)); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(99,102,241,.3), rgba(139,92,246,.3)); }
[data-theme="light"] .divider-line { background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent); }

:root {
  --c-cyan: #22d3ee;
  --c-blue: #3b82f6;
  --c-indigo: #6366f1;
  --c-violet: #8b5cf6;
  --c-fuchsia: #d946ef;
}

/* —— 基础 —— */
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--c-base);
  color: var(--c-text);
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(139, 92, 246, .35); color: #fff; }

/* 自定义滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,.5), rgba(139,92,246,.5));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99,102,241,.8), rgba(217,70,239,.8));
  background-clip: padding-box;
}

/* ============================================================
   极光 / 光斑背景
   ============================================================ */
.aurora {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: strict;            /* 完全隔离极光层，子元素动画不影响外部 */
  isolation: isolate;
}
.aurora::before { /* 细网格叠层 */
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--aurora-opacity);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: floatOrb 18s ease-in-out infinite;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.12); }
  66%      { transform: translate(-30px, 25px) scale(.92); }
}

/* ============================================================
   毛玻璃 / 玻璃面板
   ============================================================ */
.glass {
  background: linear-gradient(150deg, var(--c-glass), var(--c-glass-2));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 40px -12px var(--c-shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-strong {
  background: var(--c-glass-strong);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--c-border);
  box-shadow: 0 20px 60px -20px var(--c-shadow), inset 0 1px 0 rgba(255,255,255,.07);
}

/* 渐变描边卡片（hover 时点亮） */
.ring-card {
  position: relative;
  border-radius: 1.25rem;
  background: var(--c-ring-card);
  border: 1px solid var(--c-border);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.ring-card::before { /* 渐变边光 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,.5), rgba(139,92,246,.0) 40%, rgba(217,70,239,.45));
  -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 .35s;
  pointer-events: none; /* 关键：边光不可拦截卡片内按钮/链接的点击 */
}
.ring-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.25);
  box-shadow: 0 24px 60px -24px rgba(99,102,241,.55);
}
.ring-card:hover::before { opacity: 1; }

/* ============================================================
   渐变文字 / 标题
   ============================================================ */
.text-gradient {
  background: linear-gradient(100deg, #67e8f9, #818cf8 45%, #e879f9);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ============================================================
   导航激活态
   ============================================================ */
.nav-item {
  position: relative;
  transition: background .25s, color .25s;
}
.nav-item .nav-glow {
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #8b5cf6);
  transform: translateY(-50%);
  transition: height .3s;
  box-shadow: 0 0 12px rgba(34,211,238,.8);
}
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--c-text-bright); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(99,102,241,.22), rgba(99,102,241,.02));
  color: var(--c-text-bright);
}
.nav-item.active .nav-glow { height: 60%; }

/* ============================================================
   动效关键帧
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.anim-fade-up { animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) both; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
}
.pulse-glow { animation: pulseGlow 2.4s ease-out infinite; }

@keyframes spinSlow { to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 8s linear infinite; }

@keyframes gradientMove {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.animated-gradient {
  background-size: 220% 220%;
  animation: gradientMove 9s ease infinite;
  transform: translateZ(0);   /* 独立合成层，避免连续动画触发主内容重绘 */
}

/* 登录失败抖动 */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.shake { animation: shakeX .45s cubic-bezier(.36,.07,.19,.97) both; }

/* ============================================================
   热力图
   ============================================================ */
.heat {
  width: 13px; height: 13px;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  transition: transform .15s;
}
.heat:hover { transform: scale(1.4); }
.heat[data-level="1"] { background: rgba(34,211,238,.28); }
.heat[data-level="2"] { background: rgba(34,211,238,.5); }
.heat[data-level="3"] { background: rgba(99,102,241,.7); }
.heat[data-level="4"] { background: linear-gradient(135deg,#22d3ee,#d946ef); box-shadow: 0 0 8px rgba(139,92,246,.7); }

/* 学习日历（带日期数字） */
.heat-0 { background: rgba(255,255,255,.04); color: #64748b; }
.heat-1 { background: rgba(34,211,238,.25); color: #cffafe; }
.heat-2 { background: rgba(34,211,238,.5); color: #ecfeff; }
.heat-3 { background: rgba(99,102,241,.7); color: #eef2ff; }
.heat-4 { background: linear-gradient(135deg,#22d3ee,#d946ef); color:#fff; box-shadow: 0 0 8px rgba(139,92,246,.6); }

/* ============================================================
   杂项工具
   ============================================================ */
.input-field {
  background: var(--c-input-bg);
  border: 1px solid var(--c-border);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.input-field:focus {
  outline: none;
  border-color: rgba(139,92,246,.6);
  background: var(--c-input-bg);
  box-shadow: 0 0 0 4px rgba(139,92,246,.15);
}

/* select 下拉选项：跟随主题（修复白色背景看不清字） */
select option {
  background: var(--c-surface);
  color: var(--c-text);
}
select option:checked {
  background: var(--c-surface-2);
  color: var(--c-text-bright);
}

.btn-primary {
  background: linear-gradient(100deg, #22d3ee, #6366f1 50%, #d946ef);
  background-size: 180% 180%;
  transition: background-position .4s, box-shadow .3s, transform .15s;
  box-shadow: 0 10px 30px -10px rgba(99,102,241,.7);
}
.btn-primary:hover { background-position: 100% 50%; box-shadow: 0 14px 36px -10px rgba(217,70,239,.7); }
.btn-primary:active { transform: translateY(1px); }

.divider-line {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; }

/* 顶部 SPA 导航进度条 */
#nav-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #22d3ee, #6366f1, #d946ef);
  box-shadow: 0 0 12px rgba(139,92,246,.8);
  z-index: 9999;
  opacity: 0;
  transition: width .25s ease, opacity .3s ease;
  pointer-events: none;
}
#nav-progress.show { opacity: 1; }