/* ==========================================================================
   MINGHAO SCIFI / HUD DESIGN SYSTEM
   青色 LED HUD 科幻风格 — 全站视觉基础
   ========================================================================== */

:root {
  --led-cyan: #22d3ee;
  --led-cyan-dim: rgba(34, 211, 238, 0.35);
  --led-cyan-glow: rgba(34, 211, 238, 0.5);
  --led-white: #f0fdff;
  --led-white-glow: rgba(220, 250, 255, 0.8);
  --led-violet: #7C3AED;
  --led-violet-glow: rgba(124, 58, 237, 0.45);
  --led-halo-s: 0 0 6px rgba(34, 211, 238, 0.4);
  --led-halo-m: 0 0 10px rgba(34, 211, 238, 0.5);
  --led-halo-l: 0 0 5px rgba(220, 250, 255, 0.7),
                0 0 12px rgba(220, 250, 255, 0.5),
                0 0 24px rgba(34, 211, 238, 0.4);
  --led-halo-xl: 0 0 8px rgba(255, 255, 255, 0.9),
                 0 0 18px rgba(220, 250, 255, 0.7),
                 0 0 36px rgba(34, 211, 238, 0.5),
                 0 0 60px rgba(34, 211, 238, 0.3);
  --hud-bg: #060e1a;
  --hud-surface: rgba(10, 20, 40, 0.8);
  --hud-border: rgba(34, 211, 238, 0.15);
  --hud-border-strong: rgba(34, 211, 238, 0.4);
}

/* ==========================================================================
   1. GLASSMORPHISM — 毛玻璃卡片
   ========================================================================== */
.scifi-glass{
  background:rgba(10,20,40,0.5);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--hud-border);
  box-shadow:0 4px 24px rgba(0,0,0,0.3),inset 0 1px 0 rgba(220,250,255,0.05);
}
.scifi-glass-strong{
  background:rgba(8,16,32,0.75);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(34,211,238,0.2);
  box-shadow:0 8px 40px rgba(0,0,0,0.4),inset 0 1px 0 rgba(220,250,255,0.06);
}
.scifi-card-lift{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
.scifi-card-lift:hover{transform:translateY(-4px);border-color:var(--led-cyan-dim);box-shadow:0 12px 40px rgba(34,211,238,0.15)}

/* ==========================================================================
   2. HUD CORNERS — 四角装饰
   ========================================================================== */
.hud-corners-4{position:relative}
.hud-corners-4 .corner-tl,.hud-corners-4 .corner-tr,
.hud-corners-4 .corner-bl,.hud-corners-4 .corner-br{
  position:absolute;width:14px;height:14px;pointer-events:none;z-index:2
}
.hud-corners-4 .corner-tl{top:-1px;left:-1px;border-top:2px solid var(--led-cyan);border-left:2px solid var(--led-cyan)}
.hud-corners-4 .corner-tr{top:-1px;right:-1px;border-top:2px solid var(--led-cyan);border-right:2px solid var(--led-cyan)}
.hud-corners-4 .corner-bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--led-cyan);border-left:2px solid var(--led-cyan)}
.hud-corners-4 .corner-br{bottom:-1px;right:-1px;border-bottom:2px solid var(--led-cyan);border-right:2px solid var(--led-cyan)}

/* ==========================================================================
   3. HOLO GRID & SCAN — 全息网格 / 扫描线
   ========================================================================== */
.holo-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(34,211,238,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,0.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
}
.holo-scan{position:relative}
.holo-scan::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent 0%,rgba(34,211,238,0.08) 50%,transparent 100%);
  background-size:100% 8px;opacity:.4;
}
.holo-scan-h{position:relative;overflow:hidden}
.holo-scan-h::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--led-cyan),transparent);
  box-shadow:0 0 8px var(--led-cyan);
  animation:holo-sweep 4s linear infinite;
}
@keyframes holo-sweep{0%{transform:translateY(0)}100%{transform:translateY(400px)}}

/* ==========================================================================
   4. SECTION EYEBROW / TITLE — 章节眉标 / 标题
   ========================================================================== */
.scifi-section-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--led-cyan);font-family:"JetBrains Mono",monospace;
  padding:.25rem .75rem;border:1px solid var(--hud-border);border-radius:.25rem;
  background:rgba(34,211,238,0.05);text-shadow:var(--led-halo-s);
}
.scifi-section-title{
  font-family:"Rajdhani","Noto Sans SC",sans-serif;font-weight:700;
  color:var(--led-white);text-shadow:var(--led-halo-s);
}
.hero-title-glow{
  background:linear-gradient(135deg,#22d3ee 0%,#7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 12px rgba(34,211,238,0.3));
}

/* ==========================================================================
   5. NEON / LED TEXT
   ========================================================================== */
.neon-cyan{color:var(--led-cyan);text-shadow:var(--led-halo-m)}
.led-text{color:var(--led-white);text-shadow:var(--led-halo-s)}
.neon-border{
  border:1px solid var(--led-cyan-dim);
  box-shadow:0 0 8px rgba(34,211,238,0.2),inset 0 0 8px rgba(34,211,238,0.05);
}
.neon-flicker{animation:neon-flicker 3s infinite}
@keyframes neon-flicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1;text-shadow:var(--led-halo-l)}
  20%,24%,55%{opacity:.6;text-shadow:var(--led-halo-s)}
}
.holo-flicker{animation:holo-flicker 5s infinite}
@keyframes holo-flicker{0%,100%{opacity:.5}50%{opacity:.85}}

/* ==========================================================================
   6. LED DOTS / STATUS — 指示点 / 状态条
   ========================================================================== */
.led-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--led-cyan);box-shadow:0 0 6px var(--led-cyan);
  animation:led-blink 2s ease-in-out infinite;
}
.led-dot.active{background:#10B981;box-shadow:0 0 6px #10B981}
.hud-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--led-cyan);box-shadow:0 0 4px var(--led-cyan)}
@keyframes led-blink{0%,100%{opacity:1}50%{opacity:.4}}
.hud-status-bar{
  display:inline-flex;align-items:center;gap:1.25rem;
  padding:.35rem .85rem;border-radius:.375rem;
  background:rgba(10,20,40,0.6);border:1px solid var(--hud-border);
  color:var(--led-cyan);font-family:"JetBrains Mono",monospace;
  text-shadow:var(--led-halo-s);
}
.hud-status-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#10B981;box-shadow:0 0 5px #10B981;
  animation:led-blink 1.6s ease-in-out infinite;
}

/* ==========================================================================
   7. HUD ANIMATE — 脉冲动画
   ========================================================================== */
.animate-hud-pulse{animation:hud-pulse 2.5s ease-in-out infinite}
@keyframes hud-pulse{
  0%,100%{box-shadow:0 0 8px rgba(220,250,255,0.4),0 0 16px rgba(34,211,238,0.3)}
  50%{box-shadow:0 0 12px rgba(220,250,255,0.6),0 0 28px rgba(34,211,238,0.5)}
}

/* ==========================================================================
   8. HUD FORM — 输入框 / 标签 / 错误框
   ========================================================================== */
.hud-input-field{
  width:100%;padding:.65rem .85rem;
  background:rgba(8,16,32,0.7);border:1px solid var(--hud-border);border-radius:.5rem;
  color:var(--led-white);font-family:Inter,sans-serif;font-size:14px;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.hud-input-field::placeholder{color:rgba(110,128,160,0.7)}
.hud-input-field:focus{
  outline:none;border-color:var(--led-cyan);
  box-shadow:0 0 0 2px rgba(34,211,238,0.15),inset 0 0 8px rgba(34,211,238,0.08);
}
.hud-label{display:block;font-size:13px;font-weight:500;color:var(--led-cyan);
  margin-bottom:.4rem;font-family:"Rajdhani",sans-serif;letter-spacing:.03em}
.hud-error-box{
  padding:.65rem .85rem;border-radius:.5rem;font-size:13px;
  background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;
}
.hud-glass-card{
  background:rgba(10,20,40,0.6);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid var(--hud-border);border-radius:.75rem;
}
.hud-password-toggle{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  color:var(--led-cyan);background:none;border:none;cursor:pointer;padding:.25rem;
  display:flex;align-items:center;justify-content:center;
}
.hud-password-toggle:hover{color:var(--led-white)}

/* ==========================================================================
   9. HUD THEME / PANEL / NAV — 主题容器 / 面板 / 导航
   ========================================================================== */
.hud-theme{background:var(--hud-bg);color:var(--led-white)}
.hud-panel{background:var(--hud-surface);border:1px solid var(--hud-border);border-radius:.75rem;padding:1rem}
.hud-panel-light{background:rgba(10,20,40,0.5);border:1px solid var(--hud-border);border-radius:.75rem}
.hud-nav-link{color:rgba(224,232,255,0.6);transition:color .2s ease,background .2s ease}
.hud-nav-link:hover{color:var(--led-cyan)}
.hud-nav-link.active{color:var(--led-cyan);background:rgba(34,211,238,0.08)}
.hud-logo-text{font-family:"Rajdhani",sans-serif;font-weight:700;color:var(--led-white);text-shadow:var(--led-halo-s)}

/* ==========================================================================
   10. HUD STAT / DATA CARDS — 数据卡
   ========================================================================== */
.hud-stat-card,.hud-data-card{
  background:var(--hud-surface);border:1px solid var(--hud-border);border-radius:.75rem;padding:1rem;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.hud-stat-card:hover,.hud-data-card:hover{border-color:var(--led-cyan-dim);transform:translateY(-2px)}
.hud-stat-label,.hud-data-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(110,128,160,1);font-family:"JetBrains Mono",monospace}
.hud-stat-value,.hud-data-value{font-family:"Rajdhani",sans-serif;font-weight:700;
  font-size:1.5rem;color:var(--led-white);text-shadow:var(--led-halo-s)}
.hud-stat-sub{font-size:11px;color:rgba(138,154,181,1)}
.hud-data-unit{font-size:11px;color:rgba(110,128,160,1);font-family:"JetBrains Mono",monospace}
.hud-activity-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;
  border-bottom:1px solid rgba(34,211,238,0.06)}
.hud-activity-item:last-child{border-bottom:none}
.hud-body{font-family:Inter,sans-serif;color:var(--led-white)}

/* ==========================================================================
   11. HUD BUTTONS (后台用) — 与 scifi-btn 区分
   ========================================================================== */
.hud-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.65rem 1.5rem;font-family:"Rajdhani",sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.04em;color:var(--hud-bg);
  background:linear-gradient(135deg,var(--led-cyan),#06B6D4);border:none;border-radius:.5rem;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:0 0 12px rgba(34,211,238,0.3);
}
.hud-btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 20px rgba(34,211,238,0.5)}
.hud-btn-primary:active{transform:translateY(0)}
.hud-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.65rem 1.5rem;font-family:"Rajdhani",sans-serif;font-weight:600;
  font-size:14px;color:var(--led-cyan);background:transparent;
  border:1px solid var(--led-cyan-dim);border-radius:.5rem;cursor:pointer;
  transition:all .2s ease;
}
.hud-btn-ghost:hover{border-color:var(--led-cyan);background:rgba(34,211,238,0.08);color:var(--led-white)}

/* ==========================================================================
   12. SCIFI BUTTONS — 前台按钮
   ========================================================================== */
/* Primary — 描边发光款：透明底+青色描边，hover 青光从底部泛起 */
.scifi-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 2rem;font-family:"Rajdhani","Noto Sans SC",sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--led-cyan);background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.4);border-radius:.5rem;cursor:pointer;
  position:relative;overflow:hidden;transition:all .3s cubic-bezier(.16,1,.3,1);
  text-shadow:var(--led-halo-s);
}
.scifi-btn-primary::before{
  content:"";position:absolute;bottom:0;left:0;right:0;height:0;
  background:linear-gradient(0deg,rgba(34,211,238,.2) 0%,transparent 100%);
  transition:height .4s ease;pointer-events:none;
}
.scifi-btn-primary:hover{
  color:var(--led-white);background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.7);
  box-shadow:0 0 12px rgba(34,211,238,.3),inset 0 0 12px rgba(34,211,238,.08);
  text-shadow:var(--led-halo-m);transform:translateY(-2px);
}
.scifi-btn-primary:hover::before{height:100%}
.scifi-btn-primary:active{transform:translateY(0)}

/* Ghost — 静态青色框，hover 框变白发光 */
.scifi-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;font-family:"Rajdhani","Noto Sans SC",sans-serif;
  font-size:15px;font-weight:600;color:var(--led-cyan);
  background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.25);
  border-radius:.5rem;cursor:pointer;transition:all .3s ease;text-shadow:var(--led-halo-s);
}
.scifi-btn-ghost:hover{
  color:var(--led-white);background:rgba(220,250,255,.08);border-color:rgba(220,250,255,.5);
  box-shadow:0 0 12px rgba(34,211,238,.25);transform:translateY(-2px);
}
.scifi-btn-ghost:active{transform:translateY(0)}

/* ==========================================================================
   13. HERO SECTION
   ========================================================================== */
.hero-section{position:relative;min-height:90vh;display:flex;align-items:center}
.hero-content{position:relative;z-index:10}

/* ==========================================================================
   14. LAUNCH BUTTON — HUD 启动款 (登录/注册主按钮专用)
   切角造型 + 能量扫描条 + 双色渐变 + 悬停全亮扫描线
   独立于 scifi-btn-primary, 不影响其他页面
   ========================================================================== */
.scifi-btn-launch{
  --lb-cyan:#22d3ee;
  --lb-violet:#7C3AED;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;padding:.95rem 2rem;
  font-family:"Rajdhani","Noto Sans SC",sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--led-white);
  background:
    linear-gradient(135deg,rgba(34,211,238,.18) 0%,rgba(124,58,237,.18) 100%),
    rgba(8,16,32,.85);
  border:none;cursor:pointer;position:relative;overflow:hidden;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  text-shadow:var(--led-halo-s);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .3s ease,box-shadow .3s ease,text-shadow .25s ease;
  isolation:isolate;
}
.scifi-btn-launch::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(135deg,var(--lb-cyan),var(--lb-violet));
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.scifi-btn-launch::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;z-index:1;
  background:linear-gradient(180deg,transparent,var(--led-white),var(--lb-cyan),transparent);
  background-size:100% 50%;
  animation:lb-scan 2.2s linear infinite;
  box-shadow:0 0 8px var(--lb-cyan),0 0 16px var(--lb-cyan);
}
@keyframes lb-scan{0%{background-position:0 -50%}100%{background-position:0 150%}}
.scifi-btn-launch:hover{
  color:var(--led-white);text-shadow:var(--led-halo-xl);transform:translateY(-2px);
  background:
    linear-gradient(135deg,rgba(34,211,238,.35) 0%,rgba(124,58,237,.35) 100%),
    rgba(8,16,32,.85);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.4),
    0 0 18px rgba(34,211,238,.45),
    0 0 36px rgba(124,58,237,.25),
    inset 0 0 18px rgba(34,211,238,.15);
}
.scifi-btn-launch:active{transform:translateY(0) scale(.99)}
.scifi-btn-launch:focus-visible{outline:2px solid var(--led-white);outline-offset:3px}
.scifi-btn-launch .lb-arrow{transition:transform .25s ease}
.scifi-btn-launch:hover .lb-arrow{transform:translateX(3px)}

/* ==========================================================================
   15. ACCESSIBILITY — 尊重减少动效偏好
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .scifi-btn-launch::before,.holo-scan-h::before,.led-dot,.hud-status-dot,
  .animate-hud-pulse,.neon-flicker,.holo-flicker{animation:none!important}
  .scifi-glass:hover,.hud-data-card:hover,.hud-stat-card:hover,.scifi-card-lift:hover{transform:none!important}
}