/* =========================================================
   VIP 页面 · 液态玻璃风格（适配 key.html）
   - 完全复用 main.css 的 CSS 变量体系
   - 覆盖 header、导航、表单卡片、模态框、页脚等所有组件
   - 支持暗色/亮色双主题
   ========================================================= */

/* ---------- 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{width:100%;-webkit-text-size-adjust:100%;}
body{
  width:100%;min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#f3f3f5;background:#0c0c12;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ---------- 主题变量（与 main.css 完全一致） ---------- */
:root{
  --bg:#0c0c12; --fg:#f3f3f5; --muted:rgba(255,255,255,.6);
  --glass-bg:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.15);
  --glass-shadow:0 8px 32px rgba(0,0,0,.45);
  --glass-blur:blur(14px) saturate(160%);
  --panel:var(--glass-bg);
  --border:var(--glass-border);
  --shadow:var(--glass-shadow);
  --accent:#6366f1; --accent2:#38bdf8;
  --card-icon-bg:rgba(255,255,255,.05);
}
body.dark{/* 继承 :root */}

body.light{
  --bg:#eef1f6;--fg:#1a1a22;--muted:rgba(0,0,0,.5);
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(0,0,0,.1);
  --glass-shadow:0 8px 32px rgba(0,0,0,.12);
  --glass-blur:blur(14px) saturate(160%);
  --panel:var(--glass-bg);
  --border:var(--glass-border);
  --shadow:var(--glass-shadow);
  --card-icon-bg:rgba(0,0,0,.04);
}

/* 页面内边距，防止被固定 header 遮挡 */
body{padding-top:78px;}

/* ================= Header（固定顶部胶囊）================= */
header{
  position:fixed!important;top:14px!important;left:50%!important;transform:translateX(-50%)!important;
  width:min(980px,94%);height:56px;z-index:1000!important;
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:999px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),inset 0 1px 2px rgba(255,255,255,0.5);
}
header .logo-link{display:flex;align-items:center;height:100%;padding:6px 10px;border-radius:999px;}
header .logo-img{height:34px;max-width:140px;border-radius:8px;filter:brightness(0) invert(1);}
body.light .logo-img{filter:none;}
.nav-links{display:flex;align-items:center;gap:4px;}
/* 默认导航链接 – 无胶囊效果 */
.nav-links a{
  color:var(--muted);font-size:.9rem;padding:6px 12px;border-radius:0;white-space:nowrap;
  transition:color .2s;
  background:transparent;backdrop-filter:none;border:none;
}
.nav-links a:hover{color:var(--fg);}

/* 只有带 .capsule 的链接才显示胶囊玻璃 */
.nav-links a.capsule{
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);border:1px solid transparent;
  border-radius:999px;padding:6px 12px;
}
.nav-links a.capsule:hover,
.nav-links a.capsule.active{
  color:var(--fg);background:rgba(255,255,255,.15);border-color:var(--glass-border);
}
body.light .nav-links a.capsule:hover,
body.light .nav-links a.capsule.active{
  background:rgba(255,255,255,.86);border-color:rgba(0,0,0,.18);
}
#user_name_gui{
  font-size:.82rem;color:var(--muted);padding:4px 10px;border-radius:999px;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);
}
.theme-toggle{
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);color:var(--fg);border-radius:50%;
  width:34px;height:34px;display:flex!important;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;margin:0 4px;transition:background .2s;
}
.theme-toggle:hover{background:rgba(255,255,255,.16);}

/* ================= 内容区域 ================= */
.content-wrapper{
  max-width:800px;margin:0 auto 60px;padding:0 20px;
  position:relative;z-index:10;
}

.section-title{
  font-size:1.6rem;font-weight:700;color:var(--fg);
  text-align:center;margin:30px 0 24px;
}
.section-title i{color:var(--accent2);margin-right:8px;}

/* ---- 表单卡片（主要玻璃容器）---- */
.form-card{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  padding:28px 24px;margin-bottom:24px;
}

/* 用户信息展示 */
.user-info{
  display:flex;flex-direction:column;gap:12px;
  margin-bottom:24px;padding-bottom:20px;
  border-bottom:1px solid var(--glass-border);
}
.info-item{
  display:flex;align-items:center;gap:8px;
  font-size:.95rem;color:var(--fg);
}
.info-label{color:var(--muted);min-width:90px;}
.info-value{font-weight:500;}

/* 套餐选择 */
.form-item label{
  display:block;font-size:.92rem;color:var(--muted);margin-bottom:10px;font-weight:500;
}
.package-list{
  display:flex;flex-direction:column;gap:10px;
}
.package-list .package-item{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;
  padding:14px 16px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:space-between;
  backdrop-filter:var(--glass-blur);
}
.package-list .package-item:hover{
  border-color:var(--accent2);background:rgba(99,102,241,.06);
}
.package-list .package-item.selected{
  border-color:var(--accent);background:rgba(99,102,241,.12);
  box-shadow:0 0 0 1px var(--accent);
}
.package-name{font-size:.96rem;font-weight:560;color:var(--fg);}
.package-price{font-size:1.1rem;font-weight:700;color:var(--accent2);}
.package-desc{font-size:.83rem;color:var(--muted);margin-top:4px;}

/* 购买按钮 */
.btn-submit{
  width:100%;margin-top:20px;padding:14px 0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border:none;border-radius:14px;
  font-size:1.02rem;font-weight:600;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(99,102,241,.4);
}
.btn-submit:active{transform:scale(.97);}
.btn-submit.loading{pointer-events:none;opacity:.7;}
.btn-submit i{font-size:1.1rem;}

/* 结果提示框 */
.result-box{
  margin-top:18px;padding:14px 18px;border-radius:12px;
  font-size:.91rem;line-height:1.5;
  display:none; /* 默认隐藏，由 JS 控制显示 */
}
.result-box.success{
  display:block;background:rgba(52,211,153,.13);
  border:1px solid rgba(52,211,153,.3);color:#34d399;
}
.result-box.error{
  display:block;background:rgba(248,113,113,.13);
  border:1px solid rgba(248,113,113,.3);color:#f87171;
}

/* 充值入口链接 */
.form-card a[href="buy.html"]{
  display:inline-block;color:var(--accent2);font-size:.89rem;
  padding:6px 14px;border-radius:999px;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);transition:.2s;
}
.form-card a[href="buy.html"]:hover{background:rgba(56,189,248,.12);border-color:var(--accent2);}

/* ================= 未登录模态框 ================= */
.modal-mask{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(6px);
  visibility:hidden;opacity:0;transition:visibility .3s,opacity .3s;
}
.modal-mask.show{visibility:visible;opacity:1;}
.modal-content{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  padding:32px 28px;max-width:380px;width:90%;text-align:center;
  position:relative;
}
.close-modal{
  position:absolute;top:12px;right:18px;
  font-size:1.6rem;color:var(--muted);cursor:pointer;transition:color .2s;
}
.close-modal:hover{color:var(--fg);}
.modal-content h3{font-size:1.2rem;margin-bottom:10px;color:var(--fg);}
.modal-content p{color:var(--muted);margin-bottom:20px;font-size:.93rem;}
.modal-btn{
  display:inline-block;padding:10px 28px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border-radius:999px;font-weight:500;font-size:.95rem;
  transition:transform .2s,box-shadow .2s;
}
.modal-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(99,102,241,.35);}

/* ================= Footer ================= */
footer{
  margin-top:auto;text-align:center;padding:28px 24px;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--glass-border);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);
  position:relative;z-index:10;
}
.footer-links a{
  color:var(--accent);margin:0 10px;                     /* ← 修改点：改为蓝色，与 buy.css 统一 */
  background:transparent;backdrop-filter:none;border:none;padding:2px 0;border-radius:0;display:inline;
  transition:color .2s;
}
.footer-links a:hover{color:var(--accent2);text-decoration:underline;}
.copyright{margin-top:8px;font-size:.77rem;line-height:1.6;}
footer a[style]{color:#9a9797!important;font-size:12px;}

/* ================= 响应式 ================= */
@media(max-width:640px){
  body{padding-top:70px;}
  header{height:50px;padding:0 10px;top:10px;}
  header .logo-img{height:28px;max-width:108px;}
  .nav-links a{font-size:.82rem;padding:5px 8px;}
  .content-wrapper{padding:0 14px;}
  .form-card{padding:20px 16px;}
  .section-title{font-size:1.3rem;}
  .package-list .package-item{padding:12px 14px;flex-wrap:wrap;gap:6px;}
}