/* ====== 统一导航样式 ====== */
.site-header { background: linear-gradient(180deg, rgba(21,36,56,0.95) 0%, rgba(14,26,44,0.9) 100%); border-bottom: 1px solid #4a3820; padding: 0 40px; display: flex; align-items: center; height: 64px; position: relative; z-index: 10; }
.site-header .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.site-header .logo .logo-icon { width: 36px; height: 36px; border: 2px solid #c9a44b; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(201,164,75,0.1); }
.site-header .logo .logo-text { font-size: 22px; font-weight: 900; letter-spacing: 4px; background: linear-gradient(180deg, #ffe08a 0%, #d4a030 30%, #8b6914 70%, #5c3d0e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(212,160,48,0.3)); }
.site-header .logo .logo-sub { font-size: 9px; color: #c9a44b; letter-spacing: 3px; text-transform: uppercase; margin-top: 2px; }
.site-header .nav-center { display: flex; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); }
.site-header .nav-center a { color: #c9a44b; text-decoration: none; font-size: 14px; padding: 10px 22px; border: 1px solid #4a3820; transition: all 0.25s; font-weight: 600; letter-spacing: 1px; position: relative; background: rgba(0,0,0,0.3); cursor: pointer; white-space: nowrap; }
.site-header .nav-center a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #c9a44b; transform: scaleX(0); transition: transform 0.25s; }
.site-header .nav-center a:hover { color: #ffe08a; border-color: #c9a44b; background: rgba(201,164,75,0.1); }
.site-header .nav-center a:hover::after { transform: scaleX(1); }
.site-header .nav-center a.active { color: #ffe08a; border-color: #c9a44b; background: rgba(201,164,75,0.12); }
.site-header .nav-center a.active::after { transform: scaleX(1); }
.site-header .header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.site-header .header-right .user-tag { color: #7a6a4a; font-size: 13px; }
.site-header .header-right .user-tag strong { color: #e8d48d; }
.site-header .header-right .btn-login { color: #c9a44b; text-decoration: none; font-size: 14px; padding: 8px 20px; border: 1px solid #c9a44b; font-weight: 600; transition: all 0.25s; letter-spacing: 1px; cursor: pointer; background: transparent; }
.site-header .header-right .btn-login:hover { background: rgba(201,164,75,0.15); color: #ffe08a; }
.site-header .header-right .btn-logout { color: #5a4a3a; text-decoration: none; font-size: 13px; padding: 8px 16px; border: 1px solid #3a3020; transition: all 0.25s; }
.site-header .header-right .btn-logout:hover { color: #d44; border-color: #d44; }

/* QQ群 */
.site-header .qq-block { display: flex; align-items: center; flex-direction: row-reverse; text-decoration: none; margin-left: 10px; flex-shrink: 0; }
.site-header .qq-icon { width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; transition: 0.2s; }
.site-header .qq-label { font-size: 20px; color: #fff; letter-spacing: 0.5px; margin-right: 6px; }

/* 登录/注册弹窗 */
.auth-overlay { display:none; position:fixed; top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9999;justify-content:center;align-items:center; }
.auth-overlay.show { display:flex; }
.auth-card { background:linear-gradient(180deg,#1a2a3c,#0f1b2c);border:1px solid #4a3820;border-radius:8px;width:420px;max-width:92%;box-shadow:0 0 60px rgba(0,0,0,0.6);animation:popIn 0.3s ease; overflow:hidden;position:relative; }
@keyframes popIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
.auth-tabs { display:flex; border-bottom:1px solid #2a4050; padding-right:36px; }
.auth-tabs .tab { flex:1; padding:16px; text-align:center; font-size:16px; font-weight:700; color:#607d8b; cursor:pointer; transition:all 0.2s; letter-spacing:2px; background:rgba(0,0,0,0.2); border:none; }
.auth-tabs .tab:hover { color:#c9a44b; }
.auth-tabs .tab.active { color:#ffe08a; background:transparent; border-bottom:2px solid #c9a44b; margin-bottom:-1px; }
.auth-body { padding:36px 36px 28px; }
.auth-body .field { margin-bottom:18px; text-align:left; }
.auth-body .field label { display:block; color:#8a7a6a; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.auth-body .field input { width:100%; padding:12px 14px; background:#0d141a; border:1px solid #2a4050; color:#fff; border-radius:4px; font-size:15px; outline:none; transition:border 0.2s; }
.auth-body .field input:focus { border-color:#c9a44b; }
.auth-body .btn-submit { width:100%; padding:13px; background:linear-gradient(180deg,#c9a44b,#8b6914); color:#fff; border:none; border-radius:4px; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; text-transform:uppercase; letter-spacing:2px; }
.auth-body .btn-submit:hover { filter:brightness(1.15); }
.btn-send { padding:12px 16px; background:#4a3820; color:#c9a44b; border:1px solid #4a3820; border-radius:4px; cursor:pointer; font-size:13px; white-space:nowrap; transition:0.2s; }
.btn-send:hover { background:rgba(201,164,75,0.15); color:#ffe08a; }
.btn-send:disabled { background:#1a1a14; color:#4a3820; cursor:not-allowed; }
.auth-close { position:absolute; top:4px; right:8px; color:#607d8b; font-size:50px; cursor:pointer; transition:color 0.2s; background:none; border:none; line-height:1; }
.auth-close:hover { color:#fff; }

/* 通用模态框（购买、提示等） */
.modal-overlay { display:none; position:fixed; top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9999;justify-content:center;align-items:center; }
.modal-overlay.show { display:flex; }
.modal-dialog { background:linear-gradient(180deg,#1a2a3c,#0f1b2c);border:1px solid #4a3820;border-radius:8px;padding:48px 40px 40px;text-align:center;max-width:420px;width:90%;box-shadow:0 0 60px rgba(0,0,0,0.6);animation:popIn 0.3s ease;position:relative;overflow:hidden; }
.modal-dialog .md-close { position:absolute;top:14px;right:18px;color:#607d8b;font-size:24px;cursor:pointer;transition:color 0.2s;background:none;border:none;line-height:1; }
.modal-dialog .md-close:hover { color:#fff; }
.modal-dialog .md-icon { font-size:52px;margin-bottom:16px; }
.modal-dialog .md-title { font-size:22px;font-weight:700;color:#ffe08a;margin-bottom:10px; }
.modal-dialog .md-text { font-size:14px;color:#8a7a6a;margin-bottom:32px;line-height:1.6; }
.modal-dialog .md-btns { display:flex;justify-content:center; }
.modal-dialog .md-btn { background:linear-gradient(180deg,#c9a44b,#8b6914);color:#fff;border:none;padding:12px 52px;font-size:15px;border-radius:4px;cursor:pointer;font-weight:700;letter-spacing:1px;transition:0.2s; }
.modal-dialog .md-btn:hover { filter:brightness(1.15); }
.modal-dialog .md-btn-sponsor { text-decoration:none;display:inline-flex;align-items:center;justify-content:center; }
.modal-dialog .md-btn-cancel { background:transparent;color:#8a7a6a;border:1px solid #4a3820;padding:12px 52px;font-size:15px;border-radius:4px;cursor:pointer;font-weight:600;letter-spacing:1px;transition:0.2s; }
.modal-dialog .md-btn-cancel:hover { color:#fff;border-color:#c9a44b; }
.modal-dialog .md-btn:hover { filter:brightness(1.15); }

/* Slider verification */
.slider-box { position:relative; width:100%; height:48px; background:#1a1814; border:1px solid #4a3820; border-radius:4px; overflow:hidden; user-select:none; }
.slider-gap { position:absolute; top:0; width:48px; height:46px; border:2px dashed #c9a44b; background:rgba(201,164,75,0.08); }
.slider-thumb { position:absolute; top:0; left:0; width:48px; height:46px; background:linear-gradient(180deg,#c9a44b,#8b6914); border-radius:3px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:bold; z-index:1; }
.slider-box .slider-hint { position:absolute; top:50%; transform:translateY(-50%); color:#4a3820; font-size:12px; pointer-events:none; width:100%; text-align:center; }
.slider-box.verified { border-color:#66bb6a; }
.slider-box.verified .slider-thumb { background:linear-gradient(180deg,#66bb6a,#388e3c); }
.slider-box.verified .slider-gap { border-color:#66bb6a; background:rgba(102,187,106,0.08); }

@media (max-width: 1100px) {
    .site-header { padding: 0 12px; height: auto; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
    .site-header .nav-center { position: static; transform: none; width: 100%; justify-content: center; order: 3; margin-top: 6px; }
    .site-header .nav-center a { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
    .site-header .logo .logo-text { font-size: 16px; letter-spacing: 1px; }
    .site-header .logo .logo-sub { font-size: 7px; }
    .site-header .logo .logo-icon { width: 28px; height: 28px; font-size: 16px; }
    .site-header .qq-icon { width: 22px; height: 22px; }
    .site-header .qq-label { font-size: 13px; margin-right: 2px; }
    .header-right .user-tag { font-size: 11px; }
    .header-right .btn-logout, .header-right .btn-login { font-size: 12px; padding: 4px 8px; }
    .header-right { gap: 6px; }
}
@media (max-width: 900px) {
    .site-header { padding: 0 12px; flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; }
    .site-header .nav-center { position: static; transform: none; order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2px; }
    .site-header .nav-center a { font-size: 11px; padding: 4px 8px; white-space: nowrap; }
    .site-header .logo { font-size: 14px; gap: 6px; }
    .site-header .logo .logo-text { font-size: 15px; letter-spacing: 1px; }
    .site-header .logo .logo-sub { font-size: 7px; letter-spacing: 1px; }
    .site-header .logo .logo-icon { width: 28px; height: 28px; font-size: 16px; }
    .site-header .qq-block { font-size: 11px; padding: 4px 8px; margin-left: 4px; }
    .site-header .qq-icon { width: 20px; height: 20px; }
    .site-header .qq-label { font-size: 13px; margin-right: 4px; }
    .header-right .user-tag { font-size: 11px; }
    .header-right .btn-logout, .header-right .btn-login { font-size: 11px; padding: 4px 10px; }
}
@media (max-width: 500px) {
    body { overflow-x: hidden; }
    .site-header .nav-center a { font-size: 11px; padding: 4px 7px; }
    .site-header .logo .logo-text { font-size: 14px; letter-spacing: 0; }
    .site-header .logo .logo-sub { display: none; }
    .site-header .logo .logo-icon { width: 24px; height: 24px; font-size: 14px; }
    .site-header .qq-label { font-size: 11px; }
    .site-header .qq-icon { width: 16px; height: 16px; }
    .site-header .qq-block { margin-left: 2px; }
    .header-right .user-tag { font-size: 10px; }
    .header-right .btn-logout, .header-right .btn-login { font-size: 11px; padding: 3px 7px; }
    .header-right { gap: 4px; }
    .auth-card { width: 96%; max-width: none; }
    .auth-close { font-size: 36px; top: 2px; right: 6px; }
    .auth-body { padding: 20px; }
    .auth-tabs { padding-right: 0; }
    .auth-tabs .tab { font-size: 12px; padding: 10px 2px; letter-spacing: 0; flex: 1; min-width: 0; }
    .auth-body .field input { font-size: 16px; } /* 防iOS缩放 */
    .auth-body { padding: 12px; }
    .modal-dialog { padding: 24px; width: 90%; }
}