/* ========================================
   前端样式表
   语言: CSS3
   ======================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#F2F2F7;--card:#FFF;--primary:#007AFF;--danger:#FF3B30;
  --success:#34C759;--warning:#FF9500;--orange:#FF6B35;--purple:#5856D6;
  --text:#1D1D1F;--text_sec:#8E8E93;--text_third:#C7C7CC;
  --line:#E5E5EA;--gold:#FFD700;--card_dark:#14082A
}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
.page{display:none;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.page.active{display:block;min-height:0}
.hidden{display:none!important}
.flex{display:flex}.gap-8{gap:8px}

/* Toast & Loading */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);background:rgba(0,0,0,0.78);color:#fff;padding:14px 24px;border-radius:12px;font-size:14px;z-index:9999;opacity:0;transition:all 0.3s;pointer-events:none;max-width:80%;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* ★ 2026-09-17 新增：成功/失败/警告 Toast 视觉区分，让管理员一眼看清操作结果 */
.toast.toast-success{background:linear-gradient(135deg,#10b981,#059669)}
.toast.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}
.toast.toast-warn{background:linear-gradient(135deg,#f59e0b,#d97706)}
.toast.toast-info{background:rgba(0,0,0,0.78)}
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.35);z-index:9998;display:none;align-items:center;justify-content:center}
.loading-overlay.show{display:flex}
.loading-card{background:#fff;border-radius:16px;padding:28px 32px;text-align:center;min-width:120px}
.loading-spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Buttons */
.btn{border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;padding:10px 18px;transition:opacity 0.2s}
.btn:active{opacity:0.7}
.btn-primary{background:var(--primary);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-warning{background:var(--warning);color:#fff}
.btn-ghost{background:transparent;color:var(--primary)}
.btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn-block{width:100%}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:8px}
.btn-lg{padding:14px;font-size:16px}

/* Inputs */
.input-group{margin-bottom:12px;width:100%}
.input-label{font-size:12px;font-weight:700;color:#3C3C43;margin-bottom:6px;margin-left:2px}
.input{width:100%;height:50px;border:none;border-radius:12px;background:#fff;color:var(--text);font-size:15px;padding:0 16px;outline:none}
.input:focus{box-shadow:0 0 0 2px rgba(0,122,255,0.2)}
.input-sm{height:40px;font-size:13px}

/* Cards */
.card{background:var(--card);border-radius:12px;padding:14px;margin-bottom:12px}
.card-row{display:flex;align-items:center;justify-content:space-between}

/* Splash */
.splash-page{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);height:100%}
.splash-icon-wrap{width:100px;height:100px;border-radius:24px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,0.08);margin-bottom:20px;animation:splashIconIn 0.8s ease both}
.splash-icon-img{width:80px;height:80px;border-radius:20px;object-fit:cover}
@keyframes splashIconIn{0%{transform:scale(0.5) rotate(-10deg);opacity:0}60%{transform:scale(1.05) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.splash-name{font-size:28px;font-weight:800;color:var(--text);animation:splashFadeUp 0.6s 0.3s ease both}
.splash-ver{font-size:12px;color:var(--text_sec);margin-top:4px;animation:splashFadeUp 0.6s 0.5s ease both}
.splash-loading{width:200px;margin-top:32px;animation:splashFadeUp 0.6s 0.7s ease both}
.splash-loading-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.splash-loading-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--purple));border-radius:2px;width:0;transition:width 0.4s ease}
.splash-loading-text{font-size:12px;color:var(--text_sec);text-align:center;margin-top:8px}
@keyframes splashFadeUp{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}

/* ====== LOGIN PAGE ====== */
.login-page{width:100%;height:100%;padding:28px;overflow-y:auto;background:var(--bg)}
.login-logo{width:90px;height:90px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;margin:52px auto 20px;box-shadow:0 4px 20px rgba(0,0,0,0.06);overflow:hidden}
.login-logo-img{width:72px;height:72px;border-radius:18px;object-fit:cover}
.login-title{text-align:center;font-size:26px;font-weight:800;color:var(--text);margin-bottom:4px}
.login-subtitle{text-align:center;font-size:14px;color:var(--text_sec);margin-bottom:28px}
.login-tabs{display:flex;height:44px;margin-bottom:20px;gap:6px}
.login-tab{flex:1;border-radius:10px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s}
.login-tab.pwd{background:var(--primary);color:#fff}
.login-tab.pwd.inactive{background:var(--bg);color:var(--text_sec);font-weight:400}
.login-tab.email{background:var(--bg);color:var(--text_sec);font-weight:400}
.login-tab.email.active{background:var(--primary);color:#fff;font-weight:700}

/* ====== CAPTCHA FLOATING DIALOG ====== */
.captcha-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:10000;display:none;align-items:center;justify-content:center}
.captcha-overlay.show{display:flex}
.captcha-dialog{background:#fff;border-radius:16px;padding:20px 20px 16px;width:320px;max-width:90vw;animation:dialogIn 0.3s ease}
@keyframes dialogIn{from{transform:scale(0.85);opacity:0}to{transform:scale(1);opacity:1}}
.captcha-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.captcha-title{font-size:16px;font-weight:700;color:#333}
.captcha-refresh{font-size:14px;color:var(--primary);cursor:pointer;padding:4px 8px}
.captcha-frame{width:280px;height:155px;max-width:100%;background:#ddd;border-radius:8px;position:relative;overflow:hidden;margin:0 auto}
.captcha-bg{width:100%;height:100%;background-size:cover;background-position:center}
.captcha-piece{position:absolute;width:44px;height:44px;background-size:cover;background-position:center;top:0;left:0}
.captcha-slider-row{margin-top:12px}
.captcha-slider-track{width:100%;height:40px;background:var(--bg);border-radius:10px;position:relative;overflow:hidden}
.captcha-slider-fill{position:absolute;top:0;left:0;height:100%;background:var(--success);opacity:0.5;border-radius:10px;width:0}
.captcha-slider-btn{position:absolute;top:0;left:0;width:44px;height:40px;background:var(--primary);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700;cursor:pointer;user-select:none;touch-action:none;transition:background 0.2s}
.captcha-slider-btn.done{background:var(--success)}
.captcha-slider-btn.fail{background:var(--danger)}
.captcha-status{text-align:center;font-size:13px;color:var(--text_sec);margin-top:10px}
.captcha-status.ok{color:var(--success)}
.captcha-status.err{color:var(--danger)}
.captcha-cancel-btn{width:100%;height:40px;border:none;background:transparent;color:var(--text_sec);font-size:14px;cursor:pointer;margin-top:8px;border-radius:8px}
.captcha-cancel-btn:active{background:var(--bg)}

/* ====== REGISTER PAGE ====== */
.register-page{width:100%;height:100%;position:relative;overflow-y:auto;background:var(--bg)}
.register-bg-deco{position:absolute;border-radius:50%;z-index:0}
.register-bg-deco.a{width:140px;height:140px;background:#FFF3E0;top:-40px;left:-40px}
.register-bg-deco.b{width:100px;height:100px;background:#F8BBD0;top:40px;right:-30px}
.register-bg-deco.c{width:120px;height:120px;background:#B2DFDB;bottom:-30px;right:-30px}
.register-content{position:relative;z-index:1;padding:28px;display:flex;flex-direction:column;align-items:center}
.register-step-header{width:100%;display:flex;justify-content:space-between;align-items:center;height:56px;margin-top:20px}
.register-back-btn{width:40px;height:40px;border-radius:20px;background:#fff;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.register-step-badge{background:#fff;border-radius:16px;padding:6px 14px;font-size:13px;color:var(--primary);font-weight:600}
.register-step-title{font-size:24px;font-weight:800;color:var(--text);margin-top:16px;margin-bottom:4px;align-self:flex-start}
.register-step-desc{font-size:14px;color:var(--text_sec);margin-bottom:24px;align-self:flex-start}
.register-progress{width:160px;height:4px;background:var(--line);border-radius:2px;margin-bottom:24px;overflow:hidden}
.register-progress-fill{height:100%;background:var(--primary);border-radius:2px;transition:width 0.3s;width:20%}
.register-input-wrap{width:100%;padding:0 8px}
.register-input-card{background:#fff;border-radius:10px;height:52px;display:flex;align-items:center;padding:0 16px}
.register-input-card input{width:100%;border:none;outline:none;font-size:16px;color:var(--text);background:transparent}
.register-status{margin-top:8px;margin-left:12px;display:flex;align-items:center;gap:4px;font-size:12px}
.register-status-ok{color:#4CAF50}
.register-status-err{color:#E53935}
.register-status-warn{color:#FF9800}
.register-hint{font-size:11px;color:var(--text_sec);margin-top:4px;margin-left:12px}
.register-strength{margin-top:14px}
.register-strength-bars{display:flex;gap:3px;margin-bottom:6px}
.register-strength-bar{flex:1;height:4px;background:#E0E0E0;border-radius:2px}
.register-email-row{display:flex;gap:10px;margin-top:14px}
.register-email-row .register-input-card{flex:1}
.register-avatar-area{width:90px;height:90px;border-radius:45px;background:#E3F2FD;display:flex;align-items:center;justify-content:center;margin:16px auto 20px;position:relative;cursor:pointer;overflow:hidden}
.register-avatar-area .camera-icon{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:14px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.register-btn-wrap{width:100%;padding:0 8px;margin-top:28px}
.register-btn{width:100%;height:48px;border:none;border-radius:10px;background:var(--primary);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.register-btn.complete{background:var(--success)}

/* ====== MAIN PAGE STRUCTURE ====== */
.main-container{position:absolute;top:0;bottom:60px;left:0;right:0;overflow:hidden;background:var(--bg)}
.main-page{display:none;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.main-page.active{display:block}
.page-scroll{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 0 56px 0}
.forum-scroll{bottom:108px;padding:0}

/* Func Titlebar */
.func-titlebar{height:48px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 16px;border-bottom:1px solid var(--line);flex-shrink:0}

/* Forum Titlebar */
.forum-titlebar{height:48px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 16px;border-bottom:1px solid var(--line);flex-shrink:0}

/* Profile Card (dark + gold border) */
.profile-outer{margin:16px;padding:2px;background:var(--gold);border-radius:18px}
.profile-card{background:var(--card_dark);border-radius:16px;overflow:hidden}
.profile-bg{position:relative;height:200px;background:var(--card_dark)}
.profile-bg-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.53)}
.checkin-btn-card{position:absolute;top:10px;right:10px;background:rgba(255,215,0,0.8);border-radius:14px;padding:6px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.checkin-btn-card span{font-size:12px;color:#1C1C1E;font-weight:600}
.profile-info-area{position:absolute;bottom:0;left:0;right:0;padding:16px;display:flex;align-items:flex-end;gap:14px}
.profile-avatar-wrap{flex-shrink:0}
.profile-avatar-circle{width:66px;height:66px;border-radius:33px;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.profile-detail{flex:1}
.profile-username{font-size:18px;font-weight:700;color:#fff}
.profile-email{font-size:11px;color:#CCC;margin-top:2px}
.profile-meta-row{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
.vip-icon{background:rgba(255,215,0,0.2);color:var(--gold);font-size:10px;padding:2px 6px;border-radius:8px;font-weight:700}
.level-badge{background:rgba(136,136,136,0.5);color:#fff;font-size:11px;padding:4px 9px;border-radius:10px}
.profile-points{font-size:11px;color:#CCC;margin-left:10px}
.profile-expire{font-size:10px;color:#BBB;margin-top:3px}

/* Member Cards */
.member-card{background:#fff;border-radius:16px;padding:16px;margin:14px 16px 0}
.logout-btn{background:var(--bg);border-radius:14px;padding:16px;margin:14px 16px 0;text-align:center;cursor:pointer}
.service-btn{flex:1;text-align:center;padding:8px;cursor:pointer}

/* Banner */
/* ★ 2026-09-21 广告条 → 轮播（中间大 / 两侧小 / 独立边框卡片，可滑动+自动播） */
.banner-outer{margin:16px;padding:2px;background:linear-gradient(135deg,#e6c37a,#c9a24a);border-radius:18px;overflow:hidden;position:relative}
.banner-viewport{position:relative;height:170px;overflow:hidden;border-radius:16px}
.banner-track{position:absolute;inset:0;transition:transform .28s ease}
.banner-track.dragging{transition:none}
/* ★ 2026-09-21 用户要求：图片要贴合外边框、刚好撑满（高度 100% 顶到边框，图片 cover 不留黑边） */
.banner-slide{position:absolute;top:50%;left:50%;width:80%;height:100%;border-radius:16px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.22);box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translate(-50%,-50%);transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .38s ease;will-change:transform,opacity}
.banner-slide img{width:100%;height:100%;object-fit:cover;display:block}
.banner-slide.active{border-color:transparent;box-shadow:none}
.banner-slide.active img{object-fit:cover}
.banner-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:99}
.banner-dot{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,0.5);transition:all 0.3s}
.banner-dot.active{width:18px;background:#fff}

/* Bottom Nav */
.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:60px;background:#fff;display:flex;border-top:1px solid var(--line);z-index:100}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative}
.nav-label{font-size:10px}
.nav-badge{position:absolute;top:4px;left:calc(50% + 14px);background:var(--danger);color:#fff;font-size:9px;min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 4px}

/* Navbar (sub-pages) */
.navbar{height:44px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.navbar-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:600}
.navbar-back{background:none;border:none;font-size:16px;color:var(--primary);cursor:pointer;padding:6px 10px}
.navbar-title{font-size:16px;font-weight:700}

/* Notify */
.notify-item{background:#fff;border-radius:10px;padding:12px;margin-bottom:8px;font-size:13px;color:var(--text);border-left:3px solid var(--primary)}

/* Music */
.music-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:4px 0}
.music-header.open .arrow{transform:rotate(180deg)}
.arrow{transition:transform 0.3s;font-size:12px;color:var(--text_sec)}
.music-panel{margin-top:12px}
.music-platforms{display:flex;gap:6px;margin-bottom:8px}
.music-chip{padding:4px 12px;border-radius:16px;font-size:11px;background:var(--bg);color:var(--text_sec);cursor:pointer}
.music-chip.active{background:var(--primary);color:#fff}
.music-result{max-height:200px;overflow-y:auto}

/* Feature Grid */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.feature-card{background:#fff;border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer}
.feature-icon{width:40px;height:40px;border-radius:12px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700}
.feature-label{font-size:11px;color:var(--text)}

/* Platform Tabs */
.platform-tabs{display:flex;gap:8px;margin-bottom:12px}
.platform-tab{padding:6px 16px;border-radius:18px;font-size:13px;background:#fff;color:var(--text_sec);cursor:pointer;font-weight:500}
.platform-tab.active.bili{background:var(--primary);color:#fff;font-weight:700}
.platform-tab.active.ks{background:var(--orange);color:#fff;font-weight:700}
.platform-tab.active.other{background:var(--purple);color:#fff;font-weight:700}
.platform-tab.active.welfare{background:var(--success);color:#fff;font-weight:700}
.bind-status{text-align:center;padding:20px;font-size:14px;color:var(--text_sec)}

/* Forum */
.forum-post{background:#fff;border-radius:12px;padding:14px;margin-bottom:10px}
.post-header{display:flex;align-items:center;margin-bottom:10px}
.post-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0;position:relative;overflow:hidden}
.post-meta{margin-left:10px}
.post-author{font-size:14px;font-weight:600}
.post-time{font-size:11px;color:var(--text_sec)}
.post-content{font-size:14px;line-height:1.5;margin-bottom:8px;word-break:break-all}
.post-image{width:100%;border-radius:8px;margin-bottom:8px;max-height:200px;object-fit:cover}
.post-actions{display:flex;gap:16px;font-size:12px;color:var(--text_sec)}
.post-action{cursor:pointer}
.post-action:active{color:var(--primary)}

/* Forum Input */
.forum-input-bar{position:absolute;bottom:60px;left:0;right:0;height:48px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 10px;gap:8px;z-index:99}
.forum-input-bar input{flex:1;height:34px;border:1px solid var(--line);border-radius:17px;padding:0 14px;font-size:13px;outline:none}
.forum-reply-bar{position:absolute;bottom:60px;left:0;right:0;height:36px;background:#fff;border-top:1px solid var(--line);display:none;align-items:center;padding:0 10px;gap:8px;z-index:100}
.forum-emoji-panel{position:absolute;bottom:108px;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:150px;overflow-y:auto;z-index:101}
.emoji-item{font-size:22px;text-align:center;cursor:pointer;padding:4px}

/* Admin */
.admin-tabs{display:flex;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);flex-shrink:0;padding:0 8px}
.admin-tab{padding:10px 14px;font-size:12px;color:var(--text_sec);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;flex-shrink:0}
.admin-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}
.admin-panel{display:none;padding:12px;overflow-y:auto;flex:1}
.admin-panel.active{display:block}
.admin-form{margin-bottom:12px}
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:12px}
.admin-table th,.admin-table td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line)}
.admin-table th{background:var(--bg);font-weight:600;color:var(--text_sec);position:sticky;top:0}

/* Photo */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery-item{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg)}
.gallery-item img{width:100%;height:100%;object-fit:cover}

/* QR */
.qr-wrap{width:200px;height:200px;margin:20px auto;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.qr-placeholder{color:var(--text_sec);font-size:14px}
.status-text{text-align:center;font-size:14px;margin:12px 0}
.status-text.waiting{color:var(--warning)}
.status-text.scanned{color:var(--primary)}
.status-text.success{color:var(--success)}
.stats-pill{background:#fff;border-radius:20px;padding:6px 16px;font-size:12px;display:flex;align-items:center;gap:4px}
.stats-pill .count{font-size:16px;font-weight:700}

/* Update Modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:10000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-card{background:#fff;border-radius:16px;padding:24px;width:90%;max-width:400px;max-height:80vh;overflow-y:auto}
.modal-btns{display:flex;gap:10px;justify-content:flex-end}
.update-banner{background:linear-gradient(135deg,var(--primary),var(--purple));padding:24px;text-align:center;color:#fff;border-radius:16px 16px 0 0}
.update-icon{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;font-weight:900}
.update-version{font-size:18px;font-weight:700}
.update-ver-detail{font-size:12px;opacity:0.8;margin-top:4px}
.update-label{font-size:14px;font-weight:700;margin:16px 0 8px}
.update-desc{font-size:13px;color:var(--text_sec);line-height:1.6}
.update-progress{margin-top:16px}
.progress-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:var(--primary);border-radius:3px;width:0;transition:width 0.3s}
.progress-text{font-size:12px;color:var(--text_sec);margin-top:6px;text-align:center}

/* Maintenance */
/* ★ 2026-09-21 维护页 → iOS 风格：全屏高斯模糊背景 + 居中毛玻璃悬浮窗（高度透明） */
.maintenance-page{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;background:#08080a}
.maint-blur{position:absolute;inset:-20%;background:
  radial-gradient(620px 420px at 22% 16%,rgba(120,160,255,.40),transparent 62%),
  radial-gradient(520px 420px at 84% 82%,rgba(255,140,190,.32),transparent 62%),
  radial-gradient(720px 520px at 58% 44%,rgba(90,220,200,.24),transparent 66%);
  filter:blur(64px);animation:maintDrift 24s linear infinite}
.maint-glass{position:relative;z-index:2;width:min(86vw,332px);padding:34px 24px 26px;border-radius:30px;text-align:center;
  background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(44px) saturate(180%);backdrop-filter:blur(44px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 28px 70px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.35);
  animation:maintIn .5s cubic-bezier(.22,.61,.36,1)}
.maint-ico{font-size:52px;line-height:1;margin-bottom:14px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.maint-title{font-size:21px;font-weight:700;letter-spacing:.5px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.maint-sub{margin-top:9px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78)}
.maint-ring{width:34px;height:34px;margin:22px auto 14px;position:relative;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.16)}
.maint-ring:before{content:'';position:absolute;inset:0;border-radius:50%;border:3px solid transparent;
  border-top-color:rgba(255,255,255,.95);border-right-color:rgba(255,255,255,.45);animation:maintSpin .9s linear infinite}
.maint-hint{font-size:12px;color:rgba(255,255,255,.52)}
.maint-btn{margin-top:20px;width:100%;height:46px;border:0;border-radius:23px;font-size:15px;font-weight:600;color:#fff;letter-spacing:.5px;
  background:linear-gradient(135deg,#0a84ff,#0060df);box-shadow:0 10px 24px rgba(10,132,255,.42);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease}
.maint-btn:active{transform:scale(.97);box-shadow:0 6px 16px rgba(10,132,255,.34)}
@keyframes maintIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes maintSpin{to{transform:rotate(360deg)}}
@keyframes maintDrift{from{transform:rotate(0deg) scale(1.05)}to{transform:rotate(360deg) scale(1.05)}}
/* 旧版 WebView 不支持 backdrop-filter 时，给足不透明度保证可读 */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .maint-glass{background:rgba(24,24,28,.88)}
}

/* VIP皇冠 */
.vip-crown{font-size:18px;margin-left:6px;animation:vipPulse 2s infinite}
@keyframes vipPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:0.8}}
.empty-state{text-align:center;padding:40px 20px;color:var(--text_sec);font-size:14px}

/* Post Avatar with image */
.post-avatar-initial{font-size:14px;font-weight:700;color:#fff}
.post-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:none;position:absolute;top:0;left:0}

/* Forum replies */
.forum-replies-box{margin-left:46px;margin-top:6px;padding:8px 10px;background:var(--bg);border-radius:8px}
.forum-reply-item{font-size:12px;color:#444;padding:3px 0;line-height:1.4}
.forum-replies-toggle{display:inline-block;margin-left:46px;margin-top:4px;font-size:12px;color:var(--text_sec);background:#F0F0F0;padding:3px 8px;border-radius:4px;cursor:pointer}

/* Post images row */
.post-images{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto}
.post-images .post-image{width:80px;height:80px;border-radius:6px;object-fit:cover;flex-shrink:0}

/* Function Feature Grid (2-column like old version) */
.func-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.func-feature-btn{background:#fff;border-radius:14px;border:1px solid var(--line);padding:16px 12px;text-align:center;cursor:pointer;transition:all 0.2s}
.func-feature-btn:active{background:var(--feat-color);border-color:var(--feat-color)}
.func-feature-btn:active .func-feature-icon,
.func-feature-btn:active .func-feature-name{color:#fff}
.func-feature-icon{font-size:20px;margin-bottom:6px;color:var(--feat-color)}
.func-feature-name{font-size:12px;color:var(--text);text-align:center}

/* Music item with cover */
.music-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);gap:8px}

/* ========================================
   功能页新样式
   ======================================== */

/* 绑定状态条 */
.bind-status-bar{background:#fff;border-radius:12px;border:1px solid var(--line);padding:12px 14px;font-size:13px;color:var(--text_sec);margin-bottom:12px;cursor:pointer;display:flex;align-items:center;gap:6px}
.bind-status-bar:active{background:#F5F5F5}
.bind-action-btn{font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s}
.bind-action-btn:active{opacity:0.7}

/* 功能网格 - 单列（一排一个长方形） */
.func-grid{display:flex;flex-direction:column;gap:10px}

/* 功能按钮 - 横向长方形（四边椭圆） */
.func-btn{background:#fff;border-radius:16px;border:1px solid var(--line);padding:28px 20px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:16px;min-height:120px}
.func-btn:active{transform:scale(0.98);background:#F8F8F8}
.func-btn-icon{font-size:30px;flex-shrink:0;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:#F5F5F5;border-radius:14px}
.func-btn-name{font-size:17px;color:var(--text);font-weight:600;flex:1}

/* 功能详情页标题栏 */
.func-detail-titlebar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);height:48px}

/* 功能输入卡片 - iOS风格 */
.func-input-card{background:#fff;border-radius:14px;border:1px solid var(--line);padding:16px;margin-bottom:12px}
.func-input-label{font-size:13px;color:#3C3C43;margin-bottom:6px;font-weight:500}
.func-input-field{width:100%;height:46px;border:none;border-radius:10px;background:#F2F2F7;color:var(--text);font-size:14px;padding:0 12px;outline:none;margin-bottom:10px}
.func-input-field:focus{box-shadow:0 0 0 2px rgba(0,122,255,0.15)}
.func-input-field[multiline]{height:auto;min-height:70px;padding:10px 12px;resize:none}
.func-input-sep{height:1px;background:var(--line);margin:12px 0}

/* 选项按钮组 */
.func-option-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.func-option-btn{padding:8px 16px;border-radius:10px;font-size:13px;border:1px solid var(--line);background:#F2F2F7;color:var(--text);cursor:pointer;transition:all 0.15s}
.func-option-btn:active{opacity:0.7}
.func-option-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 评论选择列表 */
.func-comment-list{max-height:200px;overflow-y:auto;margin-bottom:10px}
.func-comment-item{padding:8px 10px;border-radius:8px;font-size:12px;color:var(--text);margin-bottom:4px;cursor:pointer;border:1px solid transparent;background:#F5F5F5}
.func-comment-item:active{opacity:0.7}
.func-comment-item.selected{background:#E3F0FF;border-color:var(--primary)}

/* 执行按钮 */
.func-run-btn{width:100%;height:48px;border:none;border-radius:14px;background:var(--primary);color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-bottom:12px;transition:opacity 0.2s}
.func-run-btn:active{opacity:0.8}
.func-run-btn:disabled{opacity:0.5}

/* 结果卡片 */
.func-result-card{background:#fff;border-radius:14px;border:1px solid var(--line);padding:16px}
.func-result-summary{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px}
.func-result-item{font-size:12px;padding:3px 0;line-height:1.4}
.func-result-item.success{color:var(--success)}
.func-result-item.fail{color:var(--danger)}
.func-result-loading{font-size:13px;color:var(--primary);text-align:center;padding:12px}

/* 绑定悬浮窗 */
.bind-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:8000;display:none;align-items:center;justify-content:center}
.bind-overlay.show{display:flex}
.bind-dialog{background:#fff;border-radius:20px;padding:24px;max-width:320px;width:90%;text-align:center}
.bind-dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.bind-dialog-title{font-size:17px;font-weight:700;color:var(--text)}
.bind-dialog-close{font-size:24px;color:var(--text_sec);cursor:pointer;padding:4px 8px}
.bind-qr-wrap{width:200px;height:200px;margin:0 auto 12px;background:#F5F5F5;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bind-qr-wrap img{width:180px;height:180px;border-radius:12px}
.bind-qr-placeholder{font-size:13px;color:var(--text_sec)}
.bind-status-text{font-size:14px;font-weight:600;margin-bottom:8px}
.bind-status-text.waiting{color:var(--warning)}
.bind-status-text.scanned{color:var(--primary)}
.bind-status-text.success{color:var(--success)}
.bind-status-text.fail{color:var(--danger)}
.bind-hint{font-size:12px;color:var(--text_sec);margin-bottom:16px;line-height:1.5}
.bind-dialog-btns{display:flex;gap:10px;justify-content:center}

/* 上传预览 */
.forum-upload-preview{padding:8px 16px;background:#fff;border-top:1px solid var(--line);display:none}
.forum-upload-preview.show{display:flex;align-items:center;gap:10px}
.forum-upload-preview img,.forum-upload-preview video{max-width:80px;max-height:80px;border-radius:8px;object-fit:cover}

/* ========================================
   功能媒体展示区
   ======================================== */
.func-media-wrap{margin:12px 16px 0;padding:2px;background:var(--gold);border-radius:18px}
.func-media-frame{background:#000;border-radius:16px;overflow:hidden;height:160px;position:relative}

/* ========================================
   公益功能样式
   ======================================== */
.welfare-banner{background:linear-gradient(135deg,#34C759,#30B350);border-radius:16px;padding:20px;text-align:center;color:#fff;margin-bottom:16px;animation:welfareFadeIn 0.5s ease}
.welfare-banner-icon{font-size:36px;margin-bottom:8px}
.welfare-banner-text{font-size:18px;font-weight:700}
@keyframes welfareFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.welfare-section{margin-bottom:16px}
.welfare-section-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.welfare-notice{font-size:13px;color:var(--text_sec);margin-bottom:12px;line-height:1.5}
.welfare-pick-btn{position:relative}
.welfare-pick-btn .welfare-check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:11px;border:2px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;transition:all 0.2s}
.welfare-pick-btn.selected .welfare-check{background:var(--success);border-color:var(--success);color:#fff}
.welfare-free-tag{display:inline-block;background:var(--success);color:#fff;font-size:9px;padding:1px 6px;border-radius:4px;margin-left:6px;font-weight:700}

/* ========================================
   页面过渡动画
   ======================================== */
.page{transition:opacity 0.25s ease}
.main-page{transition:opacity 0.2s ease}
.func-btn{transition:all 0.15s ease}
.func-btn:active{transform:scale(0.97)}

/* ========================================
   管理员功能媒体设置
   ======================================== */
.admin-media-preview{width:100%;height:120px;background:#F5F5F5;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px;position:relative}
.admin-media-preview img,.admin-media-preview video{width:100%;height:100%;object-fit:cover}
.admin-media-preview .placeholder{font-size:13px;color:var(--text_sec)}
.admin-upload-row{display:flex;gap:8px;margin-bottom:12px}

/* ========================================
   极限压测v3 UI
   ======================================== */
.stress-toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stress-toggle{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--bg);border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;border:1px solid var(--line)}
.stress-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.stress-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stress-stat{text-align:center;padding:10px 4px;background:var(--bg);border-radius:8px}
.stress-stat-val{font-size:20px;font-weight:700;color:var(--text);font-family:monospace}
.stress-stat-lbl{font-size:10px;color:var(--text_sec);margin-top:2px}
.stress-progress-bar{width:100%;height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.stress-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#00e5ff);border-radius:4px;transition:width .3s ease;min-width:2px}
/* ========================================
   2026-08-24 第二阶段：管理面板动画与样式统一（App风格 + 动画）
   ======================================== */
.admin-tab{transition:color .2s ease,border-color .2s ease,background .2s ease}
.admin-tab:hover{background:var(--bg);color:var(--text)}
.admin-tab.active{background:linear-gradient(180deg,rgba(0,122,255,0.06),rgba(0,122,255,0.02))}
.admin-panel.active{animation:adminFadeUp .32s cubic-bezier(0.22,1,0.36,1) both}
@keyframes adminFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.admin-card{background:#fff;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,0,0,0.05),0 6px 20px rgba(0,0,0,0.04);animation:adminFadeUp .35s cubic-bezier(0.22,1,0.36,1) both}
.admin-card:nth-child(2){animation-delay:.06s}
.admin-card:nth-child(3){animation-delay:.12s}
.admin-divider{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px}
.admin-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.admin-divider .admin-tag{margin-left:auto}
.admin-tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:var(--primary);color:#fff}
.admin-tag.green{background:var(--success)}
.admin-tag.gray{background:var(--bg);color:var(--text_sec)}
.admin-ck-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:var(--bg);margin-bottom:6px;font-size:12px;transition:transform .15s ease,box-shadow .15s ease}
.admin-ck-row:hover{transform:translateX(2px);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.admin-ck-label{font-weight:600;color:var(--text);flex-shrink:0;font-size:12px;min-width:52px}
.admin-ck-cookie{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text_sec);font-family:monospace;font-size:11px}
.admin-file-input{position:relative;display:flex;align-items:center;gap:8px;padding:11px 12px;border:1.5px dashed var(--line);border-radius:12px;background:var(--bg);cursor:pointer;font-size:13px;color:var(--text_sec);transition:border-color .2s ease,background .2s ease}
.admin-file-input:hover{border-color:var(--primary);background:#fff}
.admin-file-input input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.admin-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-update-status{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:13px;margin-bottom:10px}
.admin-empty{padding:22px 0;text-align:center;font-size:12px;color:var(--text_sec)}
/* ========================================
   2026-08-24 第三阶段：全功能界面动画增强
   ======================================== */
/* 通用按钮动效 */
.btn,.func-option-btn,.navbar-back{transition:transform .18s cubic-bezier(0.22,1,0.36,1),box-shadow .18s ease,opacity .18s ease}
.btn:active,.func-option-btn:active,.navbar-back:active{transform:scale(0.95)}
.btn:hover{box-shadow:0 4px 14px rgba(0,122,255,0.16)}
/* 功能按钮网格：错峰入场 + 悬浮抬升 */
.func-btn{animation:funcBtnIn .4s cubic-bezier(0.22,1,0.36,1) both;transition:transform .18s cubic-bezier(0.22,1,0.36,1),box-shadow .18s ease}
.func-btn:nth-child(2){animation-delay:.04s}
.func-btn:nth-child(3){animation-delay:.08s}
.func-btn:nth-child(4){animation-delay:.12s}
.func-btn:nth-child(5){animation-delay:.16s}
.func-btn:nth-child(6){animation-delay:.20s}
.func-btn:nth-child(7){animation-delay:.24s}
.func-btn:nth-child(8){animation-delay:.28s}
@keyframes funcBtnIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.func-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.10)}
/* 平台切换 Tab 动画 */
.platform-tab{transition:color .2s ease,background .2s ease,transform .2s ease}
.platform-tab.active{animation:tabPop .3s cubic-bezier(0.22,1,0.36,1)}
@keyframes tabPop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
/* 主页面切换入场 */
.main-page.active{animation:pageIn .3s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* 页面组件入场 */
.page-scroll > *{animation:cardIn .35s cubic-bezier(0.22,1,0.36,1) both}
.page-scroll > *:nth-child(2){animation-delay:.05s}
.page-scroll > *:nth-child(3){animation-delay:.10s}
.page-scroll > *:nth-child(4){animation-delay:.15s}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* 输入框聚焦动效 */
.input,.func-input-field{transition:transform .15s ease,box-shadow .15s ease,border-color .2s ease}
.input:focus,.func-input-field:focus{transform:translateY(-1px);box-shadow:0 2px 10px rgba(0,122,255,0.12)}
/* 卡片行按压反馈 */
.card-row{transition:transform .15s ease,box-shadow .15s ease}
.card-row:active{transform:scale(0.985)}
/* 底部导航项动画 */
.tab-item{transition:transform .15s ease,color .2s ease}
.tab-item:active{transform:scale(0.92)}
/* ★ 2026-08-24 第三阶段补充：管理面板 Tab / 皇冠 / 徽章 / 悬浮卡片动效 */
.admin-tab{position:relative;transition:transform .2s cubic-bezier(0.22,1,0.36,1),color .2s ease,background .2s ease}
.admin-tab:active{transform:scale(.93)}
.admin-tab.active{animation:tabPop .35s cubic-bezier(0.22,1,0.36,1)}
.admin-tab.active::after{content:'';position:absolute;left:50%;bottom:2px;width:16px;height:3px;margin-left:-8px;border-radius:2px;background:var(--primary);animation:tabDot .3s cubic-bezier(0.22,1,0.36,1)}
@keyframes tabDot{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
.vip-crown{animation:crownPop 1.2s cubic-bezier(0.22,1,0.36,1) infinite}
@keyframes crownPop{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(1.1) rotate(5deg)}}
.vip-badge,.level-badge{animation:badgeGlow 2.2s ease-in-out infinite}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 0 rgba(184,134,11,0.25)}50%{box-shadow:0 0 0 6px rgba(184,134,11,0.0)}}
/* 管理卡片：入场后轻微悬浮呼吸 */
.admin-card{transition:transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s ease}
.admin-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,0.08)}
/* 更新/发布主按钮：渐变流光 */
.btn-primary.btn-block{position:relative;overflow:hidden;background:linear-gradient(110deg,var(--primary) 0%,#34c759 50%,var(--primary) 100%);background-size:220% 100%;transition:background-position .4s ease,transform .18s ease,box-shadow .2s ease}
.btn-primary.btn-block:hover{background-position:-60% 0;box-shadow:0 6px 18px rgba(0,122,255,0.25);transform:translateY(-1px)}
.btn-primary.btn-block:active{transform:scale(.97)}
/* 平台切换/悬浮按钮按压涟漪反馈 */
.navbar-back,.func-option-btn{position:relative}
.navbar-back::after,.func-option-btn::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,0.5);transform:scale(0);opacity:0;pointer-events:none}
.navbar-back:active::after,.func-option-btn:active::after{animation:ripple .45s ease-out}
@keyframes ripple{to{transform:scale(14);opacity:0}}
/* 直播/功能执行中的状态脉冲 */
.func-btn.running::before{content:'';position:absolute;inset:-3px;border-radius:16px;border:2px solid var(--primary);opacity:.5;animation:ringPulse 1s ease-out infinite}
@keyframes ringPulse{from{transform:scale(1);opacity:.55}to{transform:scale(1.12);opacity:0}}