/* home.css v5.3 — Nebula 首页/学期页样式 */

:root {
  --bg: #f1f5f9;
  --card-bg: #ffffff;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --border: #e2e8f0;
  --glass: rgba(255,255,255,.4);
  --accent: #6366f1;
  --radius: 18px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{min-width:320px;overflow-x:auto;
  font-family:"Inter",system-ui,-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 30%,#f1f5f9 60%,#f8fafc 100%);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:48px 20px 60px;
  position:relative;
}
.home-hero,.home-cards,.home-bar,.user-bar,.guest-bar{position:relative;z-index:1}

/* === HERO === */
.home-hero{
  --hero-block-h:72px;
  text-align:center;padding:0;margin:0;
}
.home-title-row{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  text-align:center;margin:0;min-height:var(--hero-block-h);
}
.home-hero h1{
  font-size:2.6rem;font-weight:900;letter-spacing:-.03em;
  color:#6366f1;
  text-shadow:0 1px 0 var(--glass),0 2px 4px rgba(99,102,241,.12);
  margin:0;
}
.home-version{
  color:var(--text-3);font-size:.82rem;font-weight:600;
  white-space:nowrap;user-select:none;
}

/* === USER BAR === */
.user-bar{max-width:860px;width:100%}

/* === CARDS GRID === */
.home-cards{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;max-width:880px;width:100%;
}
.home-card{
  display:block;text-decoration:none;
  width:100%;min-height:200px;
  background:var(--glass);border:1px solid var(--border);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:var(--radius);padding:40px 36px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.home-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  transition:opacity .3s,height .3s;opacity:.5;
}
.home-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px color-mix(in srgb,var(--card-color,#6366f1) 12%,transparent);
  border-color:var(--card-color,var(--accent));
}
.home-card:hover::before{opacity:1;height:5px}

/* Card color variants */
.card-dsp::before{background:linear-gradient(90deg,#6366f1,#818cf8)}
.card-sensor::before{background:linear-gradient(90deg,#3b82f6,#60a5fa)}

/* Placeholder cards */
.card-placeholder{opacity:.55;margin:0}
.card-placeholder:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);opacity:.75}
.card-stm32::before{background:linear-gradient(90deg,#06b6d4,#22d3ee)}
.card-ds::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.card-cpp::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.card-em::before{background:linear-gradient(90deg,#14b8a6,#2dd4bf)}
.card-dip::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.card-sp::before{background:linear-gradient(90deg,#06b6d4,#22d3ee)}
.card-bookshelf::before{background:linear-gradient(90deg,#6366f1,#a78bfa)}

.card-stm32 .card-icon{background:rgba(6,182,212,.1);color:#06b6d4}
.card-ds .card-icon{background:rgba(245,158,11,.1);color:#f59e0b}
.card-cpp .card-icon{background:rgba(139,92,246,.1);color:#8b5cf6}
.card-em .card-icon{background:rgba(20,184,166,.1);color:#14b8a6}
.card-dip .card-icon{background:rgba(139,92,246,.1);color:#8b5cf6}
.card-sp .card-icon{background:rgba(6,182,212,.1);color:#06b6d4}
.card-bookshelf .card-icon{background:rgba(99,102,241,.12);color:#818cf8}

.card-icon{
  width:60px;height:60px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;font-size:1.4rem;
}
.card-dsp .card-icon{background:rgba(99,102,241,.1);color:#6366f1}
.card-sensor .card-icon{background:rgba(59,130,246,.1);color:#3b82f6}

.home-card h2{
  font-size:1.4rem;font-weight:800;color:var(--text);
  margin-bottom:8px;letter-spacing:-.01em;
}
.home-card .card-desc{
  font-size:.85rem;color:var(--text-3);margin-bottom:10px;
}
.home-card .card-meta{
  font-size:.84rem;color:var(--text-2);margin-bottom:16px;line-height:1.6;
}

/* Badges */
.card-badge{
  display:inline-block;font-size:.72rem;font-weight:600;
  padding:4px 12px;border-radius:20px;margin-right:6px;margin-bottom:6px;
  color:var(--card-color,#6366f1);
  background:var(--card-color-bg,rgba(99,102,241,.1));
}
.dsp-badge{background:rgba(99,102,241,.1);color:#6366f1}
.sensor-badge{background:rgba(59,130,246,.1);color:#3b82f6}
.cpp-badge{background:rgba(139,92,246,.12);color:#8b5cf6}
.stm32-badge{background:rgba(6,182,212,.12);color:#06b6d4}
.ds-badge{background:rgba(245,158,11,.12);color:#f59e0b}
.em-badge{background:rgba(20,184,166,.12);color:#14b8a6}
.dip-badge{background:rgba(139,92,246,.12);color:#8b5cf6}
.sp-badge{background:rgba(6,182,212,.12);color:#06b6d4}
.bs-badge{background:rgba(129,140,248,.15);color:#818cf8}
.soon-badge{background:rgba(0,0,0,.04);color:var(--text-3);border:1px dashed var(--border)}

/* API dynamic card colors */
.api-cards .home-card::before{background:linear-gradient(90deg,var(--card-color),var(--card-color))}
.api-cards .home-card .card-icon{background:var(--card-color-bg);color:var(--card-color)}

/* === LOGIN PAGE === */
.login-box{
  max-width:420px;width:100%;
  background:var(--glass);border:1px solid var(--border);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:18px;padding:44px 40px;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}
.login-box h2{
  text-align:center;font-size:1.6rem;font-weight:800;
  color:#000;margin-bottom:32px;
}
.form-group{margin-bottom:20px}
.form-group label{
  display:block;font-size:.85rem;color:var(--text-2);
  margin-bottom:8px;font-weight:600;
}
.form-group input{
  width:100%;padding:14px 18px;
  background:var(--glass);border:2px solid var(--border);
  border-radius:12px;color:var(--text);font-size:.95rem;
  outline:none;font-family:inherit;transition:all .2s;
}
.form-group input:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.15)}
.btn-primary{
  width:100%;padding:15px;border:none;border-radius:12px;
  background:linear-gradient(135deg,#818cf8,#6366f1);
  color:#fff;font-size:1rem;font-weight:700;cursor:pointer;
  margin-top:10px;font-family:inherit;
  box-shadow:0 4px 14px rgba(99,102,241,.25);
  transition:all .2s ease;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.3)}
.btn-primary:active{transform:translateY(0)}
.switch-link{text-align:center;margin-top:20px;font-size:.85rem;color:var(--text-3)}
.switch-link a{color:#818cf8;cursor:pointer;text-decoration:none;font-weight:700}
.switch-link a:hover{text-decoration:underline}
.error-msg{background:rgba(248,113,113,.1);color:#ef4444;padding:12px 18px;border-radius:10px;font-size:.85rem;margin-bottom:18px;display:none}
.error-msg.show{display:block}
.success-msg{background:rgba(52,211,153,.1);color:#10b981;padding:12px 18px;border-radius:10px;font-size:.85rem;margin-bottom:18px;display:none}
.success-msg.show{display:block}

/* === FOOTER === */
.home-footer{
  margin-top:8px;padding:6px 0 8px;text-align:center;
  font-size:.78rem;color:var(--text-3);opacity:.6;
}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
html{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* === RESPONSIVE === */
@media(max-width:640px){
  .home-cards{grid-template-columns:1fr;max-width:100%;gap:18px}
  .home-hero h1{font-size:1.8rem}
  .home-version{font-size:.72rem}
  .home-card{padding:28px 24px}
  .user-bar{padding:0 0 28px}
  body{padding:32px 16px 48px}
  .login-box{padding:32px 24px}
}



/* 非科目页：取消侧边栏遮罩毛玻璃 */
.user-sidebar-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ===================== AURORA BACKGROUND ===================== */
body::before{
  content:"";position:fixed;top:-6vmax;left:-6vmax;right:-6vmax;bottom:-6vmax;z-index:0;pointer-events:none;
  background:
    /* 16层光斑 — 每层对应调色板一个颜色，全页流光溢彩 */
    radial-gradient(ellipse 45% 40% at 5% 10%,rgba(99,102,241,.06),transparent 60%),
    radial-gradient(ellipse 40% 35% at 25% 5%,rgba(6,182,212,.05),transparent 55%),
    radial-gradient(ellipse 50% 45% at 55% 8%,rgba(245,158,11,.04),transparent 60%),
    radial-gradient(ellipse 35% 40% at 85% 15%,rgba(16,185,129,.05),transparent 55%),
    radial-gradient(ellipse 45% 35% at 95% 45%,rgba(139,92,246,.05),transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 80%,rgba(239,68,68,.04),transparent 55%),
    radial-gradient(ellipse 50% 50% at 75% 95%,rgba(59,130,246,.05),transparent 60%),
    radial-gradient(ellipse 35% 35% at 50% 92%,rgba(236,72,153,.04),transparent 55%),
    radial-gradient(ellipse 45% 40% at 20% 90%,rgba(20,184,166,.05),transparent 60%),
    radial-gradient(ellipse 40% 35% at 5% 65%,rgba(249,115,22,.04),transparent 55%),
    radial-gradient(ellipse 35% 40% at 15% 45%,rgba(168,85,247,.05),transparent 60%),
    radial-gradient(ellipse 50% 45% at 45% 50%,rgba(244,63,94,.03),transparent 60%),
    radial-gradient(ellipse 40% 35% at 65% 55%,rgba(14,165,233,.04),transparent 55%),
    radial-gradient(ellipse 35% 40% at 80% 35%,rgba(234,179,8,.04),transparent 55%),
    radial-gradient(ellipse 40% 30% at 35% 70%,rgba(34,197,94,.04),transparent 55%),
    radial-gradient(ellipse 45% 40% at 60% 25%,rgba(100,116,139,.03),transparent 60%);
  animation:aurora-home 30s ease-in-out infinite alternate;
  will-change:transform;
  transform:translate3d(0,0,0) scale(1.02);
}
@keyframes aurora-home{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1.02) rotate(-.25deg)}
  25%{transform:translate3d(1%,1.5%,0) scale(1.035) rotate(.2deg)}
  50%{transform:translate3d(-.5%,1%,0) scale(1.025) rotate(-.15deg)}
  75%{transform:translate3d(1.5%,-.5%,0) scale(1.04) rotate(.25deg)}
  100%{transform:translate3d(-1.5%,-1%,0) scale(1.02) rotate(-.25deg)}
}



/* ===== 深色模式（纯变量驱动） ===== */
[data-theme="dark"] {
  --bg: #0f172a;
  --card-bg: #1e293b;
  --text: #e2e8f0;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --border: #334155;
  --glass: rgba(30,41,55,.45);
  --uo-overlay: rgba(0,0,0,.45);
  --uo-card: var(--card-bg);
}
[data-theme="dark"] body {
  background: linear-gradient(135deg,#0f172a 0%,#1a2332 30%,#1a2332 60%,#0f172a 100%) !important;
  background-attachment: fixed !important;
}
[data-theme="dark"] .home-hero h1 {
  text-shadow: 0 1px 0 rgba(0,0,0,.25),0 2px 4px rgba(99,102,241,.08) !important;
}
[data-theme="dark"] .home-card {
  background: var(--glass) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .card-btn {
  color: var(--text) !important;
}

/* ===== 加载页深色适配 ===== */
/* 加载页基础样式（首页/学期/登录共用；登录页不加载 engine.css，故在此提供）
 * 镜像副本：此块与 lib/engine/engine-global.css 的 loader 深色值必须保持一致，
 * 改一处须同步另一处（v6.0.4.11 曾因本文件缺 border-top-color 导致深色转圈纯灰）。 */
#global-loader{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .5s ease;background:#fafaf9}
#global-loader.hide{opacity:0;pointer-events:none}
#global-loader .spinner{width:40px;height:40px;border:3px solid #e5e5e5;border-top-color:#3b82f6;border-radius:50%;animation:ld-spin .7s linear infinite}
@keyframes ld-spin{to{transform:rotate(360deg)}}
.loader-text{color:#94a3b8;font-size:.85rem;font-weight:500}
.loader-dots{display:inline-block;width:24px;text-align:left}
[data-theme="dark"] #global-loader {
  background: #0f172a !important;
}
[data-theme="dark"] #global-loader .spinner {
  border-color: #475569 !important;
  border-top-color: #a5b4fc !important;
  filter: drop-shadow(0 0 6px rgba(165,180,252,.65));
}
[data-theme="dark"] .loader-text {
  color: #94a3b8 !important;
}

/* ===== 登录页深色适配 ===== */
[data-theme="dark"] .login-box {
  background: var(--glass) !important;
}
[data-theme="dark"] .login-box h2 {
  color: var(--text) !important;
}
[data-theme="dark"] .switch-link a {
  color: #a5b4fc !important;
}

/* ===== 声明弹窗深色适配 ===== */
[data-theme="dark"] .disclaimer-overlay {
  background: rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .disclaimer-card {
  background: var(--glass) !important;
}

/* ===== 更新/重启弹窗深色适配（登录页仅加载 home.css） ===== */
[data-theme="dark"] #update-overlay {
  background: rgba(0,0,0,.45) !important;
}
[data-theme="dark"] #update-overlay > div:first-of-type {
  background: var(--card-bg) !important;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }
  body::before {
    background-attachment: scroll !important;
  }
}


/* === 非科目页面操作行：用户卡片按钮 + 返回按钮（实底） === */
.home-hero-actions{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:0;min-height:var(--hero-block-h);flex-wrap:wrap;
}
.home-hero-actions .home-act-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:999px;
  font-size:.84rem;font-weight:600;text-decoration:none;cursor:pointer;
  font-family:inherit;line-height:1;white-space:nowrap;
  min-height:36px;
  border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(15,23,42,.08);
  transition:all .2s ease;
  -webkit-appearance:none;appearance:none;
}
.home-hero-actions .home-act-btn{
  color:var(--text);background:var(--card-bg);
}
.home-hero-actions .home-act-btn:link,
.home-hero-actions .home-act-btn:visited{color:var(--text)}
.home-hero-actions .home-act-btn:hover{
  background:var(--accent-light);color:var(--accent);border-color:var(--accent)
}
.home-hero-actions .lucide-icon{width:16px;height:16px;flex-shrink:0}
@media(max-width:768px){
  .home-hero{--hero-block-h:52px}
  .home-hero-actions{gap:8px;margin-top:0}
  .home-hero-actions .home-act-btn{min-height:32px;padding:7px 14px;font-size:.8rem}
}
