/* ===== Auth System - Shared Styles ===== */

/* ===== Nav Account Button (3 states) ===== */
.nav-account-btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.82rem;white-space:nowrap;padding:3px 12px;border-radius:4px;cursor:pointer;transition:.3s;line-height:1.6}
.nav-account-btn:hover{opacity:.85}

/* 未登录 - 红底白字"登录" */
.nav-account-login{background:#ff4d4d;color:#fff;border:1px solid #ff4d4d}
.nav-account-login:hover{background:#e60000;border-color:#e60000;color:#fff;opacity:1}

/* 已登录免费版 */
.nav-account-free{background:transparent;color:#e0e0e0;border:1px solid rgba(255,255,255,.2);font-weight:500}
.nav-account-free:hover{border-color:rgba(255,255,255,.4);color:#fff;opacity:1}

/* 已登录会员 - 金色 */
.nav-account-vip{background:transparent;color:#ffd700;border:1px solid rgba(255,215,0,.4);font-weight:600}
.nav-account-vip:hover{background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.6);color:#ffd700;opacity:1}

/* ===== Legacy (keep for backward compat) ===== */
.user-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,77,77,.1);border:1px solid rgba(255,77,77,.3);border-radius:14px;padding:2px 10px;font-size:.72rem;color:#ff4d4d;cursor:pointer;transition:.3s;white-space:nowrap}
.user-badge:hover{background:rgba(255,77,77,.2)}
.user-badge .level{font-weight:600}
.nav-login{color:#e0e0e0;text-decoration:none;font-weight:500;cursor:pointer;transition:.3s;font-size:inherit;white-space:nowrap}
.nav-login:hover{color:#ff4d4d}
.nav-vip{display:inline-flex;align-items:center;gap:3px;color:#ff4d4d;font-weight:600;font-size:.78rem;text-decoration:none;white-space:nowrap;padding:2px 8px;border-radius:12px;border:1px solid rgba(255,77,77,.25);background:rgba(255,77,77,.06);transition:.3s;cursor:pointer}
.nav-vip:hover{background:rgba(255,77,77,.15);border-color:rgba(255,77,77,.4)}

/* ===== Modal Overlay (shared base) ===== */
@keyframes authSlideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.auth-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;padding:20px}
.auth-modal-overlay.visible{display:flex}

/* Auth Modal Card */
.auth-modal-card{background:#1a1a1a;border-radius:20px;max-width:400px;width:100%;border:1px solid rgba(255,77,77,.2);overflow:hidden;animation:authSlideUp .3s ease;position:relative}
.auth-modal-header{background:linear-gradient(135deg,#1a0000,#2a0a0a);padding:1.5rem;text-align:center}
.auth-modal-header h2{font-size:1.3rem;color:#fff}

/* Auth Form */
.auth-form{padding:1.5rem}
.auth-form .form-group{margin-bottom:1rem}
.auth-form label{display:block;font-size:.75rem;color:#888;margin-bottom:.3rem}
.auth-form input{width:100%;background:#111;border:1px solid rgba(255,255,255,.1);color:#ddd;padding:10px 14px;border-radius:8px;font-size:.88rem;outline:none;transition:.3s;box-sizing:border-box}
.auth-form input:focus{border-color:rgba(255,77,77,.5)}
.auth-form .auth-btn{width:100%;background:#ff4d4d;color:#fff;border:none;padding:12px;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:.3s;margin-top:.5rem}
.auth-form .auth-btn:hover{background:#e60000}
.auth-form .switch-link{text-align:center;margin-top:.8rem;font-size:.78rem;color:#777}
.auth-form .switch-link a{color:#ff4d4d;cursor:pointer}

/* Auth Modal Close Button */
.auth-modal-close{position:absolute;top:12px;right:16px;color:#666;font-size:1.5rem;cursor:pointer;background:none;border:none}
.auth-modal-close:hover{color:#fff}

/* ===== Mobile responsive ===== */
@media(max-width:768px){
    .nav-account-btn{font-size:.8rem;padding:3px 10px;line-height:1.5}
}
@media(max-width:480px){
    .nav-account-btn{font-size:.75rem;padding:2px 8px;line-height:1.4}
}