.header{background:var(--gradient-header);color:var(--text);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:100%;box-shadow:var(--shadow-md);border-bottom:1px solid var(--border);z-index:var(--z-sticky);transition:box-shadow var(--transition-normal);justify-content:space-between;align-items:center;padding:12px 20px;display:flex;position:sticky;top:0}.header .logo{color:var(--text);letter-spacing:1px;text-transform:uppercase;transition:color var(--transition-normal);align-items:center;gap:8px;font-size:24px;font-weight:800;text-decoration:none;display:flex}.header .logo img{border-radius:var(--radius-md);border:2px solid var(--primary);object-fit:cover;width:48px;height:48px;transition:transform var(--transition-normal),border-color var(--transition-normal)}.header .logo:hover img{border-color:var(--primary-light);transform:scale(1.05)}.header .logo:hover{color:var(--primary-light)}.header nav{align-items:center;gap:24px;display:flex;position:relative}.animate-fadeIn{animation:.3s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.header nav .search-box{background:var(--card-hover);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border-light);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:var(--z-dropdown);align-items:center;gap:8px;min-width:300px;padding:12px;display:flex;position:absolute;top:60px;right:0}.header nav .search-box form{align-items:center;gap:8px;width:100%;display:flex}.header nav .search-box input{color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-normal);background:#ffffff0d;outline:none;flex:1;padding:10px 14px;font-size:14px}.header nav .search-box input:focus{border-color:var(--primary);background:#ffffff14;box-shadow:0 0 0 3px #3b82f61a}.header nav .search-box input::placeholder{color:var(--text-muted)}.header nav .search-box button{color:var(--primary-light);background:var(--overlay);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);flex-shrink:0;justify-content:center;align-items:center;padding:8px 10px;display:flex}.header nav .search-box button:hover:not(:disabled){background:var(--primary);color:#fff;transform:scale(1.05)}.header nav .search-box button:disabled{opacity:.5;cursor:not-allowed}.header nav .dropdown{background:var(--card-hover);border-radius:var(--radius-lg);min-width:200px;box-shadow:var(--shadow-xl);border:1px solid var(--border-light);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:var(--z-dropdown);padding:8px;position:absolute;top:60px;right:0;overflow:hidden}.header nav .dropdown a,.header nav .dropdown button{text-align:left;border-radius:var(--radius-md);width:100%;color:var(--text);cursor:pointer;transition:all var(--transition-normal);align-items:center;gap:8px;padding:10px 14px;font-size:14px;font-weight:500;text-decoration:none;display:flex;position:relative;box-shadow:none!important;background:0 0!important;border:none!important;transform:none!important}.header nav .dropdown a:before,.header nav .dropdown button:before{display:none}.header nav .dropdown a:after,.header nav .dropdown button:after{content:"";background:var(--gradient-primary);width:3px;height:0;transition:height var(--transition-normal);border-radius:2px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.header nav .dropdown a:hover,.header nav .dropdown button:hover{color:var(--primary-light);padding-left:18px;background:var(--overlay-hover)!important;transform:none!important}.header nav .dropdown a:hover:after,.header nav .dropdown button:hover:after{height:60%}.user-menu-content{flex-direction:column;gap:4px;display:flex}.user-header{border-bottom:1px solid var(--border);background:var(--overlay);align-items:center;gap:10px;margin:-8px -8px 4px;padding:8px 14px;display:flex}.username{color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;font-weight:600;overflow:hidden}.loading-text{color:var(--text-muted);text-align:center;padding:10px 14px;font-size:14px}.user-type{background:var(--overlay);border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-direction:row;align-items:center;gap:8px;margin:0 -8px 4px;padding:8px 14px;display:flex}.user-type .label{color:var(--text);font-size:13px;font-weight:600}.vip-info{color:var(--warning);flex-direction:row;align-items:center;gap:6px;font-size:13px;display:flex}.vip-info small{color:var(--text-muted);margin-left:4px;font-size:11px}.normal-user{color:var(--text-muted);font-size:13px}.header nav>button,.header .auth-btn{border-radius:var(--radius-md);color:var(--text);cursor:pointer;transition:all var(--transition-normal);background:0 0;border:none;justify-content:center;align-items:center;padding:8px;font-size:20px;display:flex}.header nav>button:hover,.header .auth-btn:hover{color:var(--primary-light);background:var(--overlay-hover);transform:scale(1.1)}.header nav>button:active,.header .auth-btn:active{transform:scale(1)}.user-btn-wrapper{justify-content:center;align-items:center;display:flex}.avatar-button{cursor:pointer;transition:transform var(--transition-normal);background:0 0;border:none;padding:0}.avatar-button:hover{transform:scale(1.05)}.avatar{border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--primary);width:32px;height:32px;transition:all var(--transition-normal)}.avatar.placeholder{background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-secondary));color:var(--text);justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.avatar:hover{border-color:var(--primary-light);box-shadow:0 0 0 3px #3b82f61a}.vip-badge{border-radius:var(--radius-full);color:#0c1232;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,#fbbf24,#f59e0b);align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:800;display:inline-flex;box-shadow:0 2px 8px #fbbf2466}@media (max-width:780px){.header{padding:10px 16px}.header .logo{font-size:20px}.header .logo img{width:40px;height:40px}.header nav{gap:12px}.header nav>button,.header .auth-btn{flex-shrink:0;padding:6px;font-size:18px}.header nav .search-box{width:auto;min-width:auto;max-width:none;position:fixed;top:70px;left:16px;right:16px}.header nav .search-box input{flex:1;width:100%;min-width:0}.header nav .dropdown{min-width:200px;max-width:calc(100vw - 32px);position:fixed;left:auto;right:16px}}@media (max-width:480px){.header{padding:8px 12px}.header .logo{font-size:18px}.header .logo img{width:36px;height:36px}.header nav{gap:8px}.header nav>button,.header .auth-btn{padding:6px;font-size:16px}.header nav .search-box{position:fixed;top:65px;left:12px;right:12px}.header nav .dropdown{min-width:180px;max-width:calc(100vw - 24px);position:fixed;right:12px}.vip-badge{padding:3px 8px;font-size:10px}.avatar{width:28px;height:28px}}.header nav button:focus-visible,.header .logo:focus-visible,.header nav .search-box input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.header nav .dropdown a:focus-visible,.header nav .dropdown button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}