/* ==========================================================================
   电竞俱乐部授权系统 · 前台样式（白色背景版）
   ★ 已按用户要求：去掉花瓣飘落、去掉背景音乐播放器
   ★ 白色/浅灰底 + 蓝紫主色，干净简洁
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#f5f7fa}

body{
    font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
    background:#f5f7fa;
    min-height:100vh;
    padding:1rem;
    padding-top:68px;
    padding-bottom:32px;
    color:#1f2937;
    font-size:15px;
    line-height:1.6;
}

/* ---------- 顶部栏 ---------- */
.topbar{
    position:fixed;top:0;left:0;right:0;z-index:10000;
    background:#fff;
    border-bottom:1px solid #e8ecf2;
    box-shadow:0 1px 6px rgba(16,24,40,.05)
}
.topbar-in{max-width:520px;margin:0 auto;height:52px;padding:0 14px;
    display:flex;align-items:center;justify-content:space-between}
.brand-t{
    font-size:16px;font-weight:700;letter-spacing:.5px;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    -webkit-background-clip:text;background-clip:text;color:transparent
}
.topbar-right{display:flex;align-items:center;gap:12px}
.uavatar{width:30px;height:30px;border-radius:50%;object-fit:cover;cursor:pointer;
    border:1px solid #d6dbe4}
.menubtn{width:34px;height:34px;border:0;background:transparent;cursor:pointer;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0}
.menubtn span{display:block;width:18px;height:2px;background:#4b5563;border-radius:2px}

/* ---------- 下拉菜单（覆盖式） ---------- */
.dropdown{
    position:absolute;left:0;right:0;top:52px;z-index:9999;
    background:#fff;border-bottom:1px solid #e8ecf2;
    box-shadow:0 8px 20px rgba(16,24,40,.1);
    max-height:0;overflow:hidden;transition:max-height .26s ease
}
.dropdown.open{max-height:460px}
.dropdown a{display:block;max-width:520px;margin:0 auto;padding:12px 18px;
    color:#374151;font-size:15px;text-decoration:none;
    border-bottom:1px solid #f0f3f8}
.dropdown a:last-child{border-bottom:0}
.dropdown a:active{background:#f5f7fa}
.dropdown a.on{color:#2563eb;font-weight:600;background:#eff6ff}
.dd-split{height:6px;background:#f5f7fa}

/* ---------- 主体 ---------- */
.main{max-width:520px;margin:0 auto}

/* ---------- 卡片 ---------- */
.glass-card,.card{
    background:#fff;
    border:1px solid #e8ecf2;
    border-radius:16px;
    padding:20px 18px;
    margin:0 auto 14px;
    box-shadow:0 2px 10px rgba(16,24,40,.06)
}
.card-t{
    font-size:16px;font-weight:600;color:#111827;
    margin-bottom:14px;letter-spacing:.5px
}
.card-title{font-size:22px;font-weight:700;text-align:center;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    -webkit-background-clip:text;background-clip:text;color:transparent}
.card-sub{color:#6b7280;font-size:14px;margin-top:6px;text-align:center}

/* ---------- 标签 / 输入框 ---------- */
.form-label,.lbl{display:block;font-size:13.5px;color:#4b5563;margin:12px 0 6px}
.input-group{position:relative;margin-bottom:4px}
.input-neon,.inp,textarea.inp,select.inp{
    width:100%;height:44px;padding:0 12px;
    background:#fff !important;
    border:1px solid #d6dbe4 !important;
    color:#111827 !important;
    border-radius:10px !important;
    font-size:15px;outline:none;
    font-family:inherit
}
textarea.inp{height:auto;padding:10px 12px;resize:vertical}
.inp::placeholder,.input-neon::placeholder{color:#9ca3af}
.inp:focus,.input-neon:focus{border-color:#2563eb !important;box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* ---------- 按钮 ---------- */
.btn-neon,.btn{
    width:100%;height:46px;border:0;border-radius:10px;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    color:#fff;font-size:16px;font-weight:600;cursor:pointer;margin-top:16px;
    box-shadow:0 2px 8px rgba(37,99,235,.25)
}
.btn:disabled{opacity:.55}
.btn.ghost,.btn.gray{background:#fff;color:#2563eb;border:1px solid #2563eb;box-shadow:none}
.btn.gray{color:#4b5563;border-color:#d6dbe4}

/* ---------- 提示文本 ---------- */
.text-muted,.muted,.tip{color:#6b7280;font-size:12.5px;line-height:1.7}
.tip-box{background:#eff6ff;border:1px solid #c7ddff;border-radius:10px;
    padding:12px;font-size:13px;color:#1e40af;margin-bottom:14px;line-height:1.8}
.err{color:#dc2626;font-size:13.5px;min-height:20px;margin-top:8px}
.ok{color:#059669;font-size:13.5px}
.error-box{background:#fef2f2;border-left:4px solid #dc2626;border-radius:8px;
    padding:12px;color:#b91c1c;margin-bottom:12px;font-size:13.5px}

/* ---------- 公告盒 ---------- */
.announce-box{background:#f9fafb;border:1px solid #e8ecf2;border-radius:12px;
    padding:14px;margin-top:16px}
.announce-box .content{font-size:13.5px;line-height:1.8;color:#4b5563}
.announce-box .content strong{color:#2563eb}

/* ---------- 页脚 ---------- */
.footer-text,.foot{text-align:center;color:#9ca3af;font-size:12.5px;padding:16px 0}

/* ---------- 套餐 ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.plan{border:1.5px solid #e2e6ee;border-radius:12px;padding:12px;
    cursor:pointer;background:#fff;text-align:center;transition:all .2s}
.plan.sel{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.plan .t{font-size:14.5px;color:#111827;font-weight:600}
.plan .p{font-size:17px;color:#dc2626;font-weight:700;margin-top:4px}
.plan .d{font-size:12px;color:#6b7280;margin-top:2px}

/* ---------- 表格 ---------- */
.tb{width:100%;border-collapse:collapse;font-size:14px}
.tb td{padding:11px 8px;border-bottom:1px solid #f0f3f8}
.tb td:first-child{color:#6b7280;width:38%}
.tb td:last-child{text-align:right;color:#111827}

/* ---------- 头像 ---------- */
.avatar-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0}
.avatar-img{width:80px;height:80px;border-radius:50%;object-fit:cover;
    border:2px solid #d6dbe4;background:#f3f4f6}
.avatar-pick{font-size:13.5px;color:#2563eb;cursor:pointer}

/* ---------- 状态 ---------- */
.st-ok{color:#059669;font-weight:700}
.st-bad{color:#dc2626;font-weight:700}
.st-warn{color:#d97706;font-weight:700}

/* ---------- 转圈：全屏白色 + 正中间旋转圈 ---------- */
#authAnim{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;
  background:#fff;display:flex;align-items:center;justify-content:center}
.aa-ring{width:52px;height:52px;margin:0 auto;border-radius:50%;
  border:3px solid #ececf1;border-top-color:#c9ced9;border-right-color:#dfe3ea;
  animation:aaSpin .9s linear infinite}
@keyframes aaSpin{to{transform:rotate(360deg)}}
.aa-txt{margin-top:16px;color:#8b91a1;font-size:14px;letter-spacing:1px;text-align:center}

a{color:#2563eb;text-decoration:none}
h1,h3{color:#111827}
input[type=checkbox]{accent-color:#2563eb}
pre{background:#f3f4f6;color:#065f46;padding:12px;border-radius:8px;overflow:auto;font-size:12px}
.row{display:flex;gap:8px;align-items:center}
.row .inp{flex:1}
.row .btn{width:auto;margin:0;padding:0 16px;height:44px;font-size:14px;white-space:nowrap}

@media(max-width:400px){
    .plans{grid-template-columns:1fr}
    .brand-t{font-size:15px}
}

/* ---------- 启动转圈（聚付通同款：蓝紫旋转环） ---------- */
#bootLoading{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99998;
  background:rgba(255,255,255,.96);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;transition:opacity .22s}
.bl-ring{width:46px;height:46px;border-radius:50%;
  border:3px solid #e5e7eb;border-top-color:#2563eb;
  animation:blSpin .8s linear infinite}
@keyframes blSpin{to{transform:rotate(360deg)}}
.bl-txt{color:#2563eb;font-size:14px;letter-spacing:1px}

/* 顶栏登录/注册 */
.topbar-login{font-size:13px;color:#2563eb;text-decoration:none;padding:4px 8px;
  border:1px solid #dbe4f5;border-radius:12px;background:#fff;line-height:1}
.uavatar-name{max-font-size:13px;font-size:13px;color:#374151;max-width:90px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}