/* ═══════════════════════════════════════════════════════════════
   龙慧云 H5 统一设计系统 v3 — 科技蓝 + 纯白文字 + 萤火虫粒子
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS 变量 ── */
:root {
  --c-bg:        #0B1E3E;
  --c-bg2:       #0F2A5E;
  --c-bg3:       #133370;
  --c-bg4:       #0B2040;
  --c-card:      rgba(255,255,255,0.07);
  --c-card-border: rgba(0,180,216,0.20);
  --c-primary:   #165DFF;
  --c-primary2:  #2979FF;
  --c-accent:   #00E5FF;
  --c-accent2:  #00B4D8;
  --c-text:     #FFFFFF;
  --c-text2:    rgba(255,255,255,0.70);
  --c-text3:    rgba(255,255,255,0.45);
  --c-surface:  rgba(255,255,255,0.08);
  --c-surface-hover: rgba(255,255,255,0.13);
  --c-border:   rgba(0,180,216,0.22);
  --c-shadow:   0 4px 20px rgba(0,100,200,0.20);
  --c-shadow-lg:0 8px 40px rgba(0,100,200,0.30);
  --c-btn-grad: linear-gradient(135deg,#165DFF,#2979FF);
  --c-glow:     0 0 16px rgba(0,229,255,0.55);
  --radius:     8px;
  --radius-lg:  12px;
  --radius-sm:  6px;
}

/* ── 2. 全局重置 ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100vh;overflow-x:hidden}
body{
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  -webkit-font-smoothing:antialiased;
}

/* ── 3. 科技蓝渐变背景 ── */
.lh-bg-tech{
  background: linear-gradient(160deg,#0B1E3E 0%,#0F2A5E 45%,#133370 100%);
  position:relative;
}
/* 科技网格 */
.lh-bg-tech::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,180,216,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,180,216,0.05) 1px,transparent 1px);
  background-size:40px 40px;
}
/* 顶部光晕 */
.lh-bg-tech::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 70% 50% at 50% -10%,
    rgba(0,180,216,0.18) 0%,transparent 70%);
  animation:lh-bg-breathe 8s ease-in-out infinite;
}
@keyframes lh-bg-breathe{
  0%,100%{opacity:0.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}

/* ── 4. 萤火虫粒子画布 ── */
#lh-firefly-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}

/* ── 5. 文字特效 ── */
.lh-brand{
  background:linear-gradient(135deg,#165DFF 0%,#00E5FF 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;font-weight:700;
}
.lh-glow-title{
  color:var(--c-accent);
  text-shadow:0 0 20px rgba(0,229,255,0.8),0 0 40px rgba(0,229,255,0.4);
}
.lh-accent-text{
  background:linear-gradient(135deg,#00E5FF,#00B4D8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── 6. 按钮系统 ── */
.lh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 28px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:600;cursor:pointer;
  border:none;transition:all 0.25s ease;
  text-decoration:none;white-space:nowrap;
}
.lh-btn-primary{
  background:var(--c-btn-grad);color:#fff;
  box-shadow:0 2px 12px rgba(22,93,255,0.40);
}
.lh-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(22,93,255,0.60),0 0 20px rgba(0,229,255,0.40);
}
.lh-btn-primary:active{transform:translateY(0)}
.lh-btn-secondary{
  background:var(--c-surface);color:var(--c-text);
  border:1px solid var(--c-border);
}
.lh-btn-secondary:hover{background:var(--c-surface-hover)}
.lh-btn-ghost{
  background:transparent;color:var(--c-text2);
  border:1px solid var(--c-border);
}
.lh-btn-ghost:hover{color:var(--c-accent);border-color:var(--c-accent)}

/* ── 7. 卡片系统 ── */
.lh-card{
  background:var(--c-card);
  border:1px solid var(--c-card-border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--c-shadow);
  transition:all 0.25s ease;
}
.lh-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--c-shadow-lg);
  border-color:rgba(0,180,216,0.38);
}

/* ── 8. 导航栏 ── */
.lh-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(11,30,62,0.92);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,180,216,0.28);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-around;align-items:center;
  z-index:100;
}
.lh-nav-item{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;color:var(--c-text2);font-size:11px;
  text-decoration:none;transition:all 0.2s;
}
.lh-nav-item.active,.lh-nav-item:hover{color:var(--c-accent)}
.lh-nav-icon{font-size:20px}

/* ── 9. 弹窗系统 ── */
.lh-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:200;opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
}
.lh-modal-overlay.active{opacity:1;pointer-events:auto}
.lh-modal{
  background:linear-gradient(180deg,rgba(15,42,94,0.98) 0%,rgba(11,30,62,0.98) 100%);
  border:1px solid rgba(0,180,216,0.30);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;max-width:480px;max-height:85vh;
  padding:20px;transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.lh-modal-overlay.active .lh-modal{transform:translateY(0)}
.lh-modal-title{font-size:18px;font-weight:600;color:var(--c-text);margin-bottom:16px;text-align:center}
.lh-modal-close{
  position:absolute;top:12px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:var(--c-surface);border:none;
  color:var(--c-text2);font-size:18px;cursor:pointer;
}
.lh-modal-btn{
  display:block;width:100%;padding:14px;
  background:var(--c-btn-grad);color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:15px;font-weight:600;
  cursor:pointer;text-align:center;margin-top:12px;
  transition:all 0.2s;
}
.lh-modal-btn:hover{opacity:0.9;transform:translateY(-1px)}

/* ── 10. 输入框 ── */
.lh-input{
  width:100%;padding:12px 16px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-sm);
  color:var(--c-text);font-size:15px;
  transition:all 0.2s;
}
.lh-input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(22,93,255,0.15)}
.lh-input::placeholder{color:var(--c-text3)}

/* ── 11. 加载动画 ── */
.lh-spinner{
  width:40px;height:40px;
  border:3px solid rgba(0,180,216,0.20);
  border-top-color:var(--c-accent);
  border-radius:50%;
  animation:lh-spin 0.8s linear infinite;
}
@keyframes lh-spin{to{transform:rotate(360deg)}}

/* ── 12. Toast ── */
.lh-toast{
  position:fixed;top:20px;left:50%;
  transform:translateX(-50%) translateY(-20px);
  background:rgba(11,30,62,0.96);
  border:1px solid rgba(0,180,216,0.40);
  padding:12px 24px;border-radius:var(--radius);
  color:var(--c-text);font-size:14px;
  opacity:0;pointer-events:none;
  transition:all 0.3s ease;z-index:300;
}
.lh-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 13. 页面进入动画 ── */
@keyframes lh-fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.lh-fade-in{animation:lh-fadeInUp 0.5s ease forwards}

/* ── 14. 辅助工具 ── */
.lh-flex{display:flex;align-items:center}
.lh-flex-col{display:flex;flex-direction:column}
.lh-center{display:flex;align-items:center;justify-content:center}
.lh-gap-8{gap:8px}.lh-gap-12{gap:12px}.lh-gap-16{gap:16px}
.lh-mt-8{margin-top:8px}.lh-mt-12{margin-top:12px}.lh-mt-16{margin-top:16px}
.lh-mb-8{margin-bottom:8px}.lh-mb-12{margin-bottom:12px}.lh-mb-16{margin-bottom:16px}
.lh-text-center{text-align:center}
.lh-text-primary{color:var(--c-primary)}
.lh-text-accent{color:var(--c-accent)}

/* ── 15. 遮罩模糊层 ── */
.blurred-card{
  filter:blur(6px);
  opacity:0.55;
  pointer-events:none;
}
.trait-lock-overlay{
  position:absolute;inset:0;
  background:rgba(11,30,62,0.5);
  border-radius:inherit;
  backdrop-filter:blur(2px);
}