/* ============================================================
   Unity 星辰学院 · 全局主题样式（星空科技风）
   主站与 300 节课程子站共用
   ============================================================ */

:root{
  /* 主色板 —— 深空 + 霓虹科技 */
  --bg-0:#02030a;            /* 最底层深空 */
  --bg-1:#050a1c;            /* 次级背景 */
  --bg-2:#0a1230;            /* 卡片深蓝 */
  --glass:rgba(13,22,58,.55);/* 玻璃拟态底色 */
  --glass-2:rgba(20,32,80,.45);
  --line:rgba(120,170,255,.18);      /* 细分隔线 */
  --line-glow:rgba(90,200,255,.45);  /* 发光分隔线 */

  --cyan:#22d3ee;            /* 主霓虹青 */
  --blue:#60a5fa;            /* 电光蓝 */
  --purple:#a78bfa;          /* 星云紫 */
  --pink:#f472b6;            /* 星尘粉 */
  --gold:#fbbf24;            /* 星核金 */
  --green:#34d399;           /* 完成绿 */
  --red:#fb7185;             /* 警示红 */

  --text-1:#eaf2ff;          /* 主文字 */
  --text-2:#b6c6e8;          /* 次级文字 */
  --text-3:#7f92bf;          /* 弱化文字 */

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(0,0,0,.55);
  --glow-cyan:0 0 24px rgba(34,211,238,.35);
  --glow-blue:0 0 30px rgba(96,165,250,.3);
  --font-body:"Segoe UI","Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Cascadia Code","JetBrains Mono","Consolas","Courier New",monospace;
  --font-display:"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{width:100%}
body{
  font-family:var(--font-body);
  color:var(--text-1);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(96,165,250,.14), transparent 60%),
    radial-gradient(1000px 700px at 10% 20%, rgba(167,139,250,.12), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(34,211,238,.10), transparent 60%),
    var(--bg-0);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 星空画布层（由 stars.js 驱动） ---------- */
#stars-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:transparent;
}
/* 画布上方内容层 */
.main-wrap{position:relative;z-index:1}
/* 星空下再加一层微弱网格，强化科技感 */
.grid-overlay{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(96,165,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:.5px}
a{color:var(--cyan);text-decoration:none;transition:.25s}
a:hover{color:#7df3ff;text-shadow:0 0 12px rgba(34,211,238,.6)}
p{color:var(--text-2)}
strong{color:var(--text-1)}
code,kbd{
  font-family:var(--font-mono);
  background:rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.25);
  color:#7df3ff;
  border-radius:6px;
  padding:1px 7px;
  font-size:.92em;
  white-space:nowrap;
}
pre code{white-space:pre;background:transparent;border:none;padding:0;color:inherit}

/* ---------- 霓虹标题 ---------- */
.neon-title{
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa,#f472b6);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:neonFlow 6s linear infinite;
  filter:drop-shadow(0 0 18px rgba(96,165,250,.35));
}
@keyframes neonFlow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* ---------- 玻璃拟态卡片 ---------- */
.glass-card{
  background:linear-gradient(160deg,var(--glass),var(--glass-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.glass-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-glow);
  box-shadow:var(--shadow),0 0 34px rgba(34,211,238,.22);
}
.glass-card::before{
  content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-20deg);
  transition:left .7s ease;
}
.glass-card:hover::before{left:120%}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;border-radius:999px;cursor:pointer;
  font-weight:700;font-size:15px;border:1px solid var(--line-glow);
  color:var(--text-1);background:rgba(34,211,238,.08);
  transition:.3s;letter-spacing:1px;position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--glow-cyan);color:#fff}
.btn-cyan{background:linear-gradient(135deg,rgba(34,211,238,.9),rgba(96,165,250,.9));color:#04121f;border:none}
.btn-cyan:hover{box-shadow:0 0 30px rgba(34,211,238,.6)}
.btn-ghost{border-color:var(--line);background:transparent}
.btn-ghost:hover{border-color:var(--line-glow);background:rgba(34,211,238,.06)}
.btn-sm{padding:7px 16px;font-size:13px}

/* ---------- 顶栏导航 ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 4%;
  background:rgba(2,4,14,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:.35s;
}
.navbar.scrolled{background:rgba(2,4,14,.82);box-shadow:0 6px 30px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:var(--text-1)}
.brand .logo{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#22d3ee,#a78bfa);
  color:#03121f;font-weight:900;font-size:20px;
  box-shadow:var(--glow-cyan);
}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  color:var(--text-2);padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;
}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(34,211,238,.12)}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav-burger span{width:24px;height:2px;background:var(--text-1);border-radius:2px;transition:.3s}

/* ---------- 区块容器 ---------- */
.section{padding:90px 6% 40px;max-width:1280px;margin:0 auto}
.section-head{text-align:center;margin-bottom:46px}
.section-tag{
  display:inline-block;font-size:13px;letter-spacing:4px;color:var(--cyan);
  border:1px solid var(--line-glow);padding:5px 18px;border-radius:999px;
  background:rgba(34,211,238,.06);margin-bottom:16px;text-transform:uppercase;
}
.section-head h2{font-size:clamp(28px,4vw,44px);margin-bottom:14px}
.section-head p{max-width:640px;margin:0 auto;color:var(--text-2)}

/* ---------- 滚动显现动画 ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- 徽章/标签 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;
  border:1px solid var(--line);
}
.badge-cyan{color:var(--cyan);border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.08)}
.badge-purple{color:var(--purple);border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.08)}
.badge-green{color:var(--green);border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.badge-gold{color:var(--gold);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.badge-red{color:var(--red);border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.08)}

/* ---------- 进度条 ---------- */
.progress-track{height:10px;border-radius:999px;background:rgba(120,170,255,.14);overflow:hidden;border:1px solid var(--line)}
.progress-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa);
  background-size:200% 100%;animation:neonFlow 4s linear infinite;
  transition:width .8s cubic-bezier(.4,0,.2,1);
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#22d3ee,#a78bfa);border-radius:999px;
  border:2px solid var(--bg-1);
}

/* ---------- 页脚 ---------- */
.footer{
  position:relative;z-index:1;margin-top:80px;padding:50px 6% 30px;
  border-top:1px solid var(--line);
  background:rgba(2,4,14,.6);backdrop-filter:blur(10px);
  text-align:center;
}
.footer .f-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:18px 0}
.footer .f-links a{color:var(--text-2);font-size:14px}
.footer p{font-size:13px;color:var(--text-3)}

/* ---------- 顶部进度指示 ---------- */
.top-bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa,#f472b6);
  background-size:200% 100%;animation:neonFlow 5s linear infinite;
  box-shadow:0 0 12px rgba(34,211,238,.8);
}

/* ---------- 返回顶部 ---------- */
.to-top{
  position:fixed;right:26px;bottom:30px;z-index:150;
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(34,211,238,.85),rgba(167,139,250,.85));
  color:#03121f;font-size:22px;cursor:pointer;border:none;
  box-shadow:var(--glow-cyan);opacity:0;pointer-events:none;transition:.3s;
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-4px)}

/* ---------- 鼠标光晕跟随 ---------- */
.cursor-glow{
  position:fixed;width:360px;height:360px;border-radius:50%;z-index:0;
  pointer-events:none;left:-180px;top:-180px;
  background:radial-gradient(circle,rgba(34,211,238,.10),transparent 65%);
  transition:transform .12s linear;
}

/* ---------- 通用小工具 ---------- */
.mono{font-family:var(--font-mono)}
.center{text-align:center}
.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:30px}.mt-4{margin-top:40px}
.mb-2{margin-bottom:20px}
.grid{display:grid;gap:22px}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .nav-links{position:fixed;top:68px;right:0;flex-direction:column;align-items:stretch;
    background:rgba(2,4,14,.95);border:1px solid var(--line);border-radius:14px;
    padding:14px;gap:8px;width:220px;transform:translateX(130%);transition:.35s;backdrop-filter:blur(16px)}
  .nav-links.open{transform:none}
  .nav-burger{display:flex}
  .section{padding:70px 5% 30px}
}