/* =========================
   ✅ 全站背景图（性能优化版）
   - 用 body::before 承载背景
   - 移动端降级 fixed
   ========================= */

body.bg-light{
  background: #0b1220;     /* 兜底色：背景未加载时不白屏 */
  position: relative;
}

/* 背景层：伪元素承载，比 body background 更不容易卡 */
body.bg-light::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  background: center/cover no-repeat;
  background-image: url("/static/bg.webp?v=231");

  transform: translateZ(0);
  will-change: transform;
}

/* 移动端：fixed + 大图 + blur 容易卡，降级成 absolute */
@media (max-width: 576px){
  body.bg-light::before{
    position: absolute;
    min-height: 100%;
  }
}


/* =========================
   ✅ 主体内容：白色磨砂（降低 blur 成本）
   ========================= */

.site-glass{
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* =========================
   ✅ 顶部导航：淡蓝磨砂（blur 更低）
   ========================= */

.glass-nav{
  background: rgba(30, 136, 229, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.glass-nav .navbar-brand,
.glass-nav .nav-link,
.glass-nav .navbar-text{
  color: rgba(255,255,255,0.92) !important;
}

.glass-nav .nav-link:hover{
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.15);
}

.glass-nav .nav-link.active{
  color: #fff !important;
  font-weight: 700;
}


/* =========================
   ✅ 移动端：禁用 backdrop-filter（提升很大）
   ========================= */
@media (max-width: 576px){
  .site-glass{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.90);
  }
  .glass-nav{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(30,136,229,0.75);
  }
}


/* =========================
   ✅ 兼容：不支持磨砂就更实一点
   ========================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-glass{ background: rgba(255, 255, 255, 0.92); }
  .glass-nav{ background: rgba(30, 136, 229, 0.75); }
}


/* =========================
   ✅ 玻璃按钮（登录/注册页会用到）
   ========================= */

.btn-glass{
  background: rgba(30,136,229,0.38);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover{
  background: rgba(30,136,229,0.55);
  color: #fff;
}

.btn-glass-outline{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.45);
  color: rgba(0,0,0,0.75);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass-outline:hover{
  background: rgba(255,255,255,0.55);
  color: rgba(0,0,0,0.85);
}