:root { --bg-body: #050508; --bg-card: #0d0d12; --bg-surface: #15151e; --accent: #00adff; --neon: #00ffcc; --mythic: #ff007f; --text-main: #e0e0e0; --text-dim: #8b8b99; }
        body { margin: 0; padding: 20px 10px; background-color: var(--bg-body); color: var(--text-main); font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; min-height: 100vh; box-sizing: border-box; }
        
        .nax-hybrid-card { width: 100%; max-width: 550px; background: var(--bg-card); border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.05); overflow: hidden; position: relative;}

/* --- CSS FAB --- */
.fab-wrapper { position: fixed; bottom: 30px; left: 50%; transform: translateX(565px); display: flex; flex-direction: column-reverse; align-items: center; gap: 15px; z-index: 99999; pointer-events: none; }
@media (max-width: 1300px) { .fab-wrapper { left: auto; right: 20px; transform: none; bottom: 60px; } }
@media (min-width: 800px) { body.page-user .fab-wrapper, body.page-xchat .fab-wrapper { left: 50%; right: auto; transform: translateX(330px); bottom: 30px; } }
.fab-item { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.5); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes portalSpin { 0% { transform: rotate(0deg) scale(1); filter: hue-rotate(0deg); } 50% { transform: rotate(180deg) scale(1.1); filter: hue-rotate(180deg); } 100% { transform: rotate(360deg) scale(1); filter: hue-rotate(360deg); } }
.fab-main { background: radial-gradient(circle, #050508, #111116); border: 2px solid #00ffcc; z-index: 2; box-shadow: 0 0 15px rgba(0,255,204,0.4); pointer-events: auto; }
.fab-main:hover { transform: scale(1.1); background: #111; border-color: #ff007f; box-shadow: 0 0 25px #ff007f; }
.fab-main #fab-icon-user svg { stroke: #00ffcc; fill: none; width: 26px; height: 26px; animation: portalSpin 4s linear infinite; }
.fab-main:hover #fab-icon-user svg { stroke: #ff007f; animation: portalSpin 1.5s linear infinite; }
.fab-main #fab-icon-close svg { fill: #fff; stroke: none; width: 20px; height: 20px; }
.fab-action { background: #15151e; opacity: 0; transform: translateY(20px) scale(0.5); pointer-events: none; border: 1px solid #555; }
.fab-action svg { fill: #fff; width: 20px; height: 20px; transition: 0.3s; }
.fab-action:hover { background: #2a2a35; border-color: #00adff; transform: scale(1.1) !important; }
.fab-action:hover svg { fill: #00adff; }
.fab-wrapper.active .fab-action { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-wrapper.active .fab-main { background: #ff007f; border-color: #ff007f; box-shadow: 0 0 20px #ff007f; }
#fab-icon-user { display: block; }
#fab-icon-close { display: none; }
.fab-wrapper.active #fab-icon-user { display: none; }
.fab-wrapper.active #fab-icon-close { display: block; }
/* ======================================================= */
/* 👤 NAX PROFILE CORE STRUCTURE (anime_user.php) */
/* ======================================================= */
.cover-area { width: 100%; height: 220px; position: relative; overflow: hidden; background: #000; z-index: 1; border-radius: 20px 20px 0 0;}
#epicCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.avatar-container { position: relative; margin: -70px auto 10px auto; width: 130px; height: 130px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; z-index: 10; }
.avatar-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; z-index: 5; background: #1a1a24; position: relative; }
.profile-content { padding: 0 30px 30px; text-align: center; position: relative; z-index: 10; }
.name-wrapper { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 5px; }
.profile-content h1 { margin: 0; font-size: 26px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.share-btn { background: #2a2a35; border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.share-btn:hover { background: var(--accent); transform: scale(1.1); box-shadow: 0 0 15px var(--accent); }
.username-tag { color: var(--accent); font-size: 15px; font-family: monospace; display: block; margin-top: 2px; }

.achievement-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 15px 0 20px; }
.achv-badge { display: flex; align-items: center; background: rgba(0,0,0,0.6); border: 1px solid #2a2a35; border-radius: 20px; padding: 5px 12px; gap: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); font-size: 12px; font-weight: bold; color: #fff; transition: 0.3s; cursor: pointer; }
.achv-badge:hover { border-color: var(--accent); transform: scale(1.05); background:rgba(0,173,255,0.1); }
.achv-badge .icon { font-size: 15px; }
.achv-badge .tier { color: var(--accent); font-size: 10px; margin-left: 3px; text-transform: uppercase;}
.achv-more { font-size: 12px; color: var(--accent); cursor: pointer; padding: 5px 15px; font-weight: bold; background: rgba(0, 173, 255, 0.1); border: 1px dashed var(--accent); border-radius: 20px; display: inline-block; margin-top: 5px; transition: 0.3s;}
.achv-more:hover { background: var(--accent); color: #fff; }

/* ======================================================= */
/* 💬 NAX XCHAT CORE STRUCTURE (anime_xchat.php) */
/* ======================================================= */
body.page-xchat { padding: 10px 5px; }
body.page-xchat .nax-hybrid-card { max-width: 600px; padding: 15px; padding-bottom: 85px; }
.btn-action-trigger { display: block; width: 100%; padding: 14px; border-radius: 12px; font-weight: 900; font-size: 13px; text-align: center; cursor: pointer; border: none; text-decoration: none; margin-bottom: 10px; box-sizing: border-box; transition: 0.3s; }
.btn-create-dimension { background: #15151e; border: 1px dashed var(--mythic); color: var(--mythic); }
.btn-return-home { background: #1a1a24; color: #fff; border: 1px solid #3a3a45; }

/* ======================================================= */
/* 🚀 GLOBAL VIP OVERLAY TOP FIX (For Profile & XChat) */
/* ======================================================= */
body.page-user #nax-vip-overlay, body.page-xchat #nax-vip-overlay { bottom: auto !important; top: 20px !important; transform: translateX(-50%) translateY(-150px) !important; box-shadow: 0 5px 20px rgba(255,0,127,0.4), 0 0 15px rgba(0,210,255,0.2) !important; }
body.page-user #nax-vip-overlay.show-overlay, body.page-xchat #nax-vip-overlay.show-overlay { transform: translateX(-50%) translateY(0) !important; }
@media (min-width: 768px) { body.page-user #nax-vip-overlay, body.page-xchat #nax-vip-overlay { top: 30px !important; } }

/* ======================================================= */
/* 💬 LORE BOX LOBBY & XCHAT CLASSES */
/* ======================================================= */
        /* LORE BOX LOBBY */
        .nax-lore-block { background: rgba(0, 173, 255, 0.05); border: 1px solid rgba(0, 173, 255, 0.2); border-radius: 12px; padding: 15px; margin-bottom: 20px; font-size: 12px; line-height: 1.6; color: #b1b1c2; text-align: center; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }

        /* FILTER BAR */
        .sorting-bar { display: flex; gap: 5px; margin-bottom: 15px; background: #111116; padding: 5px; border-radius: 10px; border: 1px solid #2a2a35; }
        .sort-tab { flex: 1; text-align: center; padding: 8px 0; font-size: 11px; font-weight: bold; color: var(--text-dim); text-decoration: none; border-radius: 6px; transition: 0.3s; }
        .sort-tab.active { background: rgba(0,173,255,0.1); color: var(--accent); border: 1px solid var(--accent); }

        /* LIST LOBBY VIP */
        .room-row-box { background: #111116; border: 1px solid #2a2a35; padding: 12px; border-radius: 10px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; transition: 0.3s; text-align: left; }
        .room-row-box:hover { border-color: var(--accent); background: rgba(0,173,255,0.05); transform: translateX(3px); }
        .box-title { font-size: 14px; font-weight: bold; color: #fff; margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
        .box-meta { font-size: 10px; color: var(--text-dim); font-family: monospace; display: flex; gap: 10px; }
        .badge-lock { font-size: 14px; color: var(--mythic); text-shadow: 0 0 5px var(--mythic); }
        
        .vip-room { border: 1px solid rgba(255, 215, 0, 0.4); box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.05); }
        .vip-room:hover { border-color: #ffd700 !important; background: rgba(255, 215, 0, 0.1) !important; }
        .vip-title-glow { color: #ffd700 !important; text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); padding-left: 20px; position: relative; }
        .vip-title-glow::before { content: '👑'; position: absolute; left: 0; top: -2px; font-size: 12px; }

        /* ❄️ FROZEN ROOM (EX-VIP) */
        .frozen-room { border: 1px solid rgba(100, 180, 255, 0.3) !important; opacity: 0.55; position: relative; overflow: hidden; }
        .frozen-room::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(100,180,255,0.08), rgba(200,230,255,0.05)); pointer-events: none; }
        .frozen-room:hover { opacity: 0.75; border-color: rgba(100,180,255,0.6) !important; }
        .frozen-room .box-title { color: #7ab8e0 !important; text-shadow: none; }
        .badge-frozen { font-size: 14px; color: #7ab8e0; text-shadow: 0 0 8px rgba(100,180,255,0.8); }

        /* ❄️ FROZEN OVERLAY (SINGLE ROOM PAGE) */
        .frozen-overlay-box { text-align: center; padding: 40px 20px; background: linear-gradient(180deg, rgba(10,20,40,0.95), rgba(5,10,25,0.98)); border: 1px solid rgba(100,180,255,0.3); border-radius: 15px; box-shadow: 0 0 30px rgba(100,180,255,0.1); }
        .frozen-icon { font-size: 60px; margin-bottom: 15px; filter: drop-shadow(0 0 15px rgba(100,180,255,0.8)); animation: frozenPulse 2s ease-in-out infinite alternate; }
        .frozen-title { color: #7ab8e0; font-size: 18px; font-weight: 900; margin: 0 0 12px 0; text-shadow: 0 0 10px rgba(100,180,255,0.5); }
        .frozen-desc { color: #8899aa; font-size: 12.5px; line-height: 1.6; margin: 0 0 25px 0; }
        .frozen-btn-recharge { display: inline-block; background: linear-gradient(90deg, #00adff, #7ab8e0); color: #000; padding: 12px 30px; border-radius: 25px; font-weight: 900; font-size: 13px; text-decoration: none; box-shadow: 0 5px 20px rgba(0,173,255,0.4); transition: 0.3s; }
        .frozen-btn-recharge:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,173,255,0.6); }
        @keyframes frozenPulse { 0% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(100,180,255,0.8)); } 100% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(100,180,255,1)); } }
        .nax-paging-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 10px; border-top: 1px solid #2a2a35; }
        .paging-btn { background: #15151e; border: 1px solid #2a2a35; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 11px; text-decoration: none; }
        .paging-btn.disabled { opacity: 0.3; pointer-events: none; }

        /* ========================================== */
        /* 👑 VIP CROWN & SINGLE PAGE POST DESIGN     */
        /* ========================================== */
        .post-author-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; border-bottom: 1px dashed #2a2a35; padding-bottom: 12px; }
        .avatar-crown-wrapper { position: relative; display: inline-block; }
        .author-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid #555; position: relative; z-index: 2; }
        
        .vip-avatar-glow { border-color: #ffd700; box-shadow: 0 0 15px rgba(255,215,0,0.6); animation: avatarPulse 2s infinite alternate; }
        .vip-crown { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 20px; z-index: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); animation: crownFloat 3s ease-in-out infinite; }
        
        @keyframes crownFloat { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-5deg); } 50% { transform: translateX(-50%) translateY(-6px) rotate(5deg); } }
        @keyframes avatarPulse { 100% { box-shadow: 0 0 25px rgba(255,215,0,0.9); } }

        /* 🚀 VIP BADGE UNIVERSAL (GLOW + SHINE) */
        .nax-badge-vip { 
            background: linear-gradient(90deg, #ff007f, #ffd700); color: #000; font-size: 9px; font-weight: 900; 
            padding: 2px 6px; border-radius: 5px; line-height: 1; position: relative; overflow: hidden; display: inline-block; z-index: 1; 
            box-shadow: 0 0 10px rgba(255, 0, 127, 0.6); animation: vipGlowPulse 2s infinite alternate;
        }
        .nax-badge-vip::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
            transform: skewX(-20deg); animation: vipShineFast 2.5s infinite; z-index: 2;
        }
        @keyframes vipShineFast { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
        @keyframes vipGlowPulse { 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); } }

        .post-main-title { font-size: 18px; font-weight: 900; color: #fff; margin: 0 0 8px 0; }
        .post-main-content { font-size: 13.5px; color: #d1d1e0; line-height: 1.6; margin: 0; }
        
        /* OVERLAY MODAL CHAT & FORMS */
        .nax-overlay-portal { display: none; position: fixed; inset: 0; background: rgba(5, 5, 8, 0.95); z-index: 9999999; flex-direction: column; align-items: center; justify-content: center; padding: 15px; box-sizing: border-box; backdrop-filter: blur(10px); }
        .nax-glass-box { width: 100%; max-width: 800px; height: 90dvh; display: flex; flex-direction: column; background: rgba(15, 18, 25, 0.95); border: 1px solid #2a2a35; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.9); }
        .nax-glass-header { padding: 12px 15px; font-weight: bold; font-size: 14px; color: #fff; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; border-bottom: 1px solid #2a2a35; background: #0b0b12; }
        
        .chat-messages-flow { flex: 1; overflow-y: auto; padding: 15px 10px; display: flex; flex-direction: column; gap: 15px; background: rgba(5,5,8,0.3); scroll-behavior: smooth; }
        .chat-messages-flow::-webkit-scrollbar { width: 4px; }
        .chat-messages-flow::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }
        
        /* ========================================== */
        /* 🚀 ANIMASI SMOOTH MODAL / OVERLAY X-CHAT   */
        /* ========================================== */
        @keyframes portalFadeIn { 
            from { opacity: 0; backdrop-filter: blur(0px); } 
            to { opacity: 1; backdrop-filter: blur(10px); } 
        }
        @keyframes boxPopUp { 
            0% { opacity: 0; transform: scale(0.85) translateY(40px); } 
            100% { opacity: 1; transform: scale(1) translateY(0); } 
        }

        /* Picu animasi secara otomatis saat JS mengubahnya menjadi 'flex' */
        .nax-overlay-portal[style*="display: flex"] {
            animation: portalFadeIn 0.25s ease-out forwards;
        }
        .nax-overlay-portal[style*="display: flex"] .nax-glass-box {
            animation: boxPopUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        /* ========================================== */
        /* 🌈 20 KOSMETIK BALON CHAT FULL ANIMASI     */
        /* ========================================== */
        @keyframes balFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes balFlowVert { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } }
        @keyframes balPulse { 0% { filter: brightness(1); box-shadow: 0 0 2px currentColor; } 100% { filter: brightness(1.3); box-shadow: 0 0 12px currentColor; } }
        @keyframes balFlash { 0%, 95%, 100% { opacity: 1; border-color: transparent; } 96%, 98% { opacity: 0.8; border-color: currentColor; box-shadow: 0 0 20px currentColor; } }
        @keyframes balRage { 0%, 100% { transform: translate(0,0); } 20% { transform: translate(-1px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 1px); } }
        @keyframes balRainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
        @keyframes balBreath { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

        .chat-row { display: flex; width: 100%; align-items: flex-end; gap: 8px; }
        .row-me { justify-content: flex-end; }
        .row-other { justify-content: flex-start; }
        
        .chat-avatar-mini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1.5px solid #3a3a45; flex-shrink: 0; background: #000; }
        .chat-bubble { max-width: 78%; padding: 10px 12px; border-radius: 15px; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.3); font-size: 13px; line-height: 1.4; word-break: break-word;}
        
        .row-me .chat-bubble { border-bottom-right-radius: 2px !important; }
        .row-other .chat-bubble { border-bottom-left-radius: 2px !important; }

        /* Default Style */
        .row-me .chat-bubble:not([class*="o-"]) { background: linear-gradient(135deg, #005f8a, #00adff); color: #fff; border:none; }
        .row-other .chat-bubble:not([class*="o-"]) { background: #1a1a24; color: #e0e0e0; border: 1px solid #2a2a35; }
        .chat-bubble:not([class*="o-"]) .chat-username { color: #00ffcc; }
        .row-me .chat-bubble:not([class*="o-"]) .chat-username { color: #fff; }

        /* --- 20 CLASS KOSMETIK & WARNA NAMA DINAMIS --- */
        .o-ki.chat-bubble { background: linear-gradient(90deg, #001a33, #004080, #001a33); background-size: 200% 200%; animation: balFlow 3s ease infinite; border-left: 2px solid #00adff; color: #cceeff; } 
        .o-ki.chat-avatar-mini { color: #00adff; border-color: #00adff; animation: balPulse 2s infinite alternate; }
        .o-ki .chat-username { color: #00adff !important; text-shadow: 0 0 5px rgba(0,173,255,0.5); }

        .o-ch.chat-bubble { background: linear-gradient(90deg, #003311, #009933, #003311); background-size: 200% 200%; animation: balFlow 2.5s ease infinite; border: 1px solid #00ffcc; color: #ccffcc; } 
        .o-ch.chat-avatar-mini { color: #00ffcc; border-color: #00ffcc; animation: balPulse 1.5s infinite alternate; }
        .o-ch .chat-username { color: #00ffcc !important; text-shadow: 0 0 5px rgba(0,255,204,0.5); }

        .o-np.chat-bubble { background: #1a0033; border: 2px solid #8e2de2; animation: balPulse 1.5s infinite alternate; color: #e8d0ff; } 
        .o-np.chat-avatar-mini { color: #8e2de2; border-color: #8e2de2; animation: balPulse 1.5s infinite alternate; }
        .o-np .chat-username { color: #d6a8ff !important; text-shadow: 0 0 5px rgba(142,45,226,0.8); }

        .o-hw.chat-bubble { background: linear-gradient(135deg, #000, #330000, #000); background-size: 200% 200%; animation: balFlow 2s infinite; border-left: 3px solid #ff0000; color: #ffcccc; } 
        .o-hw.chat-avatar-mini { color: #ff0000; border-color: #ff0000; animation: balPulse 1s infinite alternate; }
        .o-hw .chat-username { color: #ff4d4d !important; text-shadow: 0 0 5px rgba(255,0,0,0.8); }

        .o-rz.chat-bubble { background: rgba(255,255,255,0.05); border: 1px solid #fff; box-shadow: 0 0 10px #00adff inset; animation: balPulse 2s infinite alternate; color: #fff; } 
        .o-rz.chat-avatar-mini { color: #00adff; border-color: #fff; animation: balPulse 2s infinite alternate; }
        .o-rz .chat-username { color: #00adff !important; text-shadow: 0 0 5px #fff; }

        .o-ms.chat-bubble { background: #001a1a; border-left: 3px solid transparent; border-right: 3px solid transparent; animation: balFlash 3s infinite; color: #ccffff; } 
        .o-ms.chat-avatar-mini { color: #00ffff; border-color: #00ffff; animation: balFlash 3s infinite; }
        .o-ms .chat-username { color: #00ffff !important; text-shadow: 0 0 8px #00ffff; }

        .o-fl.chat-bubble { background: linear-gradient(0deg, #330d00, #992600, #330d00); background-size: 100% 200%; animation: balFlowVert 1.5s ease infinite; border-bottom: 2px solid #ff4500; color: #ffddcc; } 
        .o-fl.chat-avatar-mini { color: #ff4500; border-color: #ff4500; box-shadow: 0 -5px 10px #ff4500; }
        .o-fl .chat-username { color: #ffaa00 !important; text-shadow: 0 0 5px #ff4500; }

        .o-th.chat-bubble { background: #1a1a00; border: 1px solid transparent; animation: balFlash 1.5s infinite; color: #fff5cc; } 
        .o-th.chat-avatar-mini { color: #ffd700; border-color: #ffd700; animation: balFlash 1.5s infinite; }
        .o-th .chat-username { color: #ffd700 !important; text-shadow: 0 0 5px #ffd700; }

        .o-ba.chat-bubble { background: #220000; border-bottom: 3px solid #dc143c; animation: balBreath 2s infinite alternate; color: #ff99aa; } 
        .o-ba.chat-avatar-mini { color: #dc143c; border-color: #dc143c; animation: balBreath 2s infinite alternate; }
        .o-ba .chat-username { color: #ff4d4d !important; text-shadow: 0 0 5px #dc143c; }

        .o-sc.chat-bubble { background: #000; border: 1px dashed #555; animation: balPulse 3s infinite alternate; color: #aaa; } 
        .o-sc.chat-avatar-mini { color: #555; border-style: dashed; border-color: #555; animation: balPulse 3s infinite alternate; }
        .o-sc .chat-username { color: #888 !important; text-shadow: 0 0 5px #fff; }

        .o-sn.chat-bubble { background: #111; border: 2px solid #ff007f; animation: balRainbow 4s linear infinite; color: #fff; } 
        .o-sn.chat-avatar-mini { border-color: #ff007f; animation: balRainbow 4s linear infinite; }
        .o-sn .chat-username { color: #fff !important; text-shadow: 0 0 5px #ff007f; animation: balRainbow 4s linear infinite; }

        .o-gz.chat-bubble { background: radial-gradient(circle, #2a0066, #050010); background-size: 150% 150%; animation: balFlow 4s infinite; border: 1px solid #4b0082; color: #d6b3ff; } 
        .o-gz.chat-avatar-mini { color: #4b0082; border-color: #4b0082; animation: balPulse 2s infinite alternate; }
        .o-gz .chat-username { color: #e8ccff !important; text-shadow: 0 0 5px #4b0082; }

        .o-tk.chat-bubble { background: #1a000d; border: 1px solid #ff1493; animation: balPulse 1s infinite alternate; color: #ffb3d9; } 
        .o-tk.chat-avatar-mini { color: #ff1493; border-color: #ff1493; animation: balPulse 1s infinite alternate; }
        .o-tk .chat-username { color: #ff66b3 !important; text-shadow: 0 0 5px #ff1493; }

        .o-bs.chat-bubble { background: #330000; border: 2px solid #ff0000; animation: balRage 0.5s infinite; color: #ffcccc; } 
        .o-bs.chat-avatar-mini { border-color: #ff0000; animation: balRage 0.5s infinite; }
        .o-bs .chat-username { color: #ff4d4d !important; font-weight: 900; text-shadow: 1px 1px 0px #000; }

        .o-sf.chat-bubble { background: #001a00; border: 2px solid #32cd32; border-radius: 20px 5px 20px 5px !important; animation: balBreath 2s infinite alternate; color: #ccffcc; } 
        .o-sf.chat-avatar-mini { border-color: #32cd32; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: balBreath 2s infinite alternate; }
        .o-sf .chat-username { color: #39ff14 !important; text-shadow: 0 0 5px #006600; }

        .o-mo.chat-bubble { background: linear-gradient(45deg, #222, #555, #222); background-size: 200% 200%; animation: balFlow 2s linear infinite; border: 2px solid #ff4500; color: #fff; } 
        .o-mo.chat-avatar-mini { border-radius: 5px; border-color: #ff4500; }
        .o-mo .chat-username { color: #ffaa00 !important; text-shadow: 1px 1px 0px #000; }

        .o-di.chat-bubble { background: repeating-linear-gradient(45deg, #111, #111 10px, #222 10px, #222 20px); background-size: 200% 200%; animation: balFlow 5s linear infinite; border: 1px solid #bc13fe; color: #fff; } 
        .o-di.chat-avatar-mini { border-color: #bc13fe; animation: balRainbow 3s linear infinite; }
        .o-di .chat-username { color: #e8a8ff !important; text-shadow: 0 0 5px #bc13fe; }

        .o-fb.chat-bubble { background: #000a1a; border: 1px solid #00ffff; box-shadow: inset 0 0 15px rgba(0,255,255,0.2); animation: balPulse 3s infinite alternate; color: #ccffff; } 
        .o-fb.chat-avatar-mini { color: #00ffff; border-color: #00ffff; animation: balPulse 3s infinite alternate; }
        .o-fb .chat-username { color: #00ffff !important; text-shadow: 0 0 8px #00bfff; }

        .o-vb.chat-bubble { background: #1a1a00; border-top: 2px solid #ffd700; border-bottom: 2px solid #ffd700; animation: balPulse 2s infinite alternate; color: #fff5cc; } 
        .o-vb.chat-avatar-mini { color: #ffd700; border-color: #ffd700; animation: balPulse 2s infinite alternate; }
        .o-vb .chat-username { color: #ffd700 !important; text-shadow: 0 0 5px #ffaa00; }

        .o-dl.chat-bubble { background: radial-gradient(circle, #330000, #000); background-size: 200% 200%; animation: balFlow 2s infinite alternate; border: 1px solid #ff003c; color: #ff99aa; } 
        .o-dl.chat-avatar-mini { color: #ff003c; border-color: #ff003c; box-shadow: 0 0 15px #ff003c; }
        .o-dl .chat-username { color: #ff4d4d !important; text-shadow: 0 0 8px #ff0000; }

        /* ========================================== */

        .chat-name-area { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
        .row-me .chat-name-area { justify-content: flex-end; }
        
        .chat-username { font-weight: 900; font-size: 11.5px; text-decoration: none; transition: 0.3s; }
        .chat-username:hover { text-decoration: underline; }

        .chat-time { font-size: 9px; opacity: 0.6; margin-top: 5px; text-align: right; }

        /* INPUT AREA */
        .input-bar-area { display: flex; padding: 10px; background: #0b0b10; border-top: 1px solid #2a2a35; gap: 8px; flex-shrink: 0;}
        .input-field-style { flex: 1; background: #15151e; border: 1px solid #3a3a45; padding: 12px 15px; color: #fff; border-radius: 20px; outline: none; font-size: 13px; }
        .input-field-style:focus { border-color: var(--accent); }
        .btn-submit-chat { background: var(--accent); border: none; color: #000; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; flex-shrink: 0;}
        .btn-submit-chat:hover { transform: scale(1.1); }

        .form-input { width: 100%; padding: 14px; background: #050508; border: 1px solid #2a2a35; border-radius: 10px; color: white; margin-bottom: 12px; font-size: 13px; box-sizing: border-box; }
        .form-input:focus { border-color: var(--mythic); outline: none; }
        
        /* FLOAT BUTTONS */
        .btn-float-chat { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 30px); max-width: 400px; z-index: 100; background: linear-gradient(90deg, #00adff, #00ffcc); color: #000; padding: 16px; border-radius: 30px; font-weight: 900; font-size: 14px; text-align: center; cursor: pointer; border: none; box-shadow: 0 10px 25px rgba(0,173,255,0.4); animation: floatUp 0.5s ease-out; }
        .btn-float-chat.vip-color { background: linear-gradient(90deg, #ff007f, #ffd700); color: #000; box-shadow: 0 10px 25px rgba(255,0,127,0.5); }
        .btn-float-chat:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 15px 35px rgba(255,255,255,0.4); }
        @keyframes floatUp { from { bottom: -50px; opacity: 0; } to { bottom: 20px; opacity: 1; } }
/* ========================================== */
        /* 🏆 LEADERBOARD / HALL OF FAME STYLES       */
        /* ========================================== */
        .nax-tabs-container { display: flex; gap: 5px; margin-bottom: 15px; background: #0b0b12; padding: 5px; border-radius: 12px; border: 1px solid #2a2a35; }
        .nax-tab-btn { flex: 1; text-align: center; padding: 10px 0; font-size: 11px; font-weight: bold; color: var(--text-dim); background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: 0.3s; }
        .nax-tab-btn.active { background: rgba(0, 173, 255, 0.15); color: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 10px rgba(0,173,255,0.2); }
        
        /* 🎮 GAME SUB-TABS */
        .nax-sub-tab { flex: 1; min-width: 70px; text-align: center; background: #111116; border: 1px solid #2a2a35; color: var(--text-dim); padding: 8px 10px; border-radius: 10px; font-size: 11px; font-weight: bold; cursor: pointer; transition: 0.3s; }
        .nax-sub-tab.active { background: rgba(0, 255, 204, 0.1); color: #00ffcc; border-color: #00ffcc; box-shadow: 0 0 10px rgba(0,255,204,0.2); transform: translateY(-2px); }
        .nax-sub-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.05); color: #fff; transform: translateY(-1px); }
        
        /* 🚀 FIX: Tambah padding-bottom agar item terbawah lega dan tidak tertutup tombol float */
        .nax-tab-content { display: none; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; padding-right: 5px; padding-bottom: 25px; }
        .nax-tab-content.active { display: flex; }
        
        .nax-tab-content::-webkit-scrollbar { width: 4px; }
        .nax-tab-content::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

        /* 🚀 FIX: Gap dan padding dipersempit sedikit agar layar HP kecil tetap aman */
        .lb-card { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 15px; background: #111116; border: 1px solid #2a2a35; text-decoration: none; position: relative; overflow: hidden; transition: 0.3s; box-sizing: border-box; }
        .lb-card:hover { transform: translateX(4px); border-color: var(--accent); }
        
        /* 🚀 FIX: flex-shrink: 0 mencegah elemen tertekan/gepeng */
        .lb-rank-num { font-size: 15px; font-weight: 900; color: #555; width: 22px; text-align: center; font-style: italic; flex-shrink: 0; }
        .lb-avatar-wrap { position: relative; flex-shrink: 0; }
        .lb-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #2a2a35; }
        
        /* 🚀 FIX: min-width: 0 WAJIB agar teks panjang bisa dipotong (...) */
        .lb-info { flex: 1; text-align: left; overflow: hidden; min-width: 0; padding-right: 5px; }
        .lb-name { font-size: 14px; font-weight: 900; color: #fff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
        .lb-msg { font-size: 10px; color: var(--text-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
        
        /* 🚀 FIX: Jangan biarkan skor terlipat ke bawah (nowrap) */
        .lb-score { font-size: 14px; font-weight: 900; color: var(--accent); text-align: right; flex-shrink: 0; white-space: nowrap; }
        .lb-score span { font-size: 9px; color: #8b8b99; display: block; font-weight: normal; margin-top: 1px;}

        /* 👑 TIER 1: MYTHIC EMPEROR */
        .lb-rank-1 { background: linear-gradient(90deg, #1f000b, #111116); border: 2px solid #ff003c; box-shadow: 0 0 15px rgba(255,0,60,0.3); animation: lbBorderGlow 2s infinite alternate; }
        .lb-rank-1 .lb-rank-num { color: #ffd700; text-shadow: 0 0 10px #ff003c; font-size: 18px; }
        .lb-rank-1 .lb-avatar { border-color: #ffd700; box-shadow: 0 0 10px #ffd700; }
        .lb-rank-1::before { content: '👑'; position: absolute; top: 5px; left: 5px; font-size: 12px; filter: drop-shadow(0 0 5px #ffd700); transform: rotate(-15deg); }
        .lb-rank-1::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transform: skewX(-20deg); animation: lbShine 3s infinite; pointer-events: none; }

        /* 💎 TIER 2: DIAMOND OVERLORD */
        .lb-rank-2 { background: linear-gradient(90deg, #001a1a, #111116); border: 1px solid #00ffcc; box-shadow: 0 0 10px rgba(0,255,204,0.2); }
        .lb-rank-2 .lb-rank-num { color: #e2e8f0; text-shadow: 0 0 8px #00ffcc; font-size: 16px; }
        .lb-rank-2 .lb-avatar { border-color: #00ffcc; }
        .lb-rank-2::before { content: '👑'; position: absolute; top: 5px; left: 5px; font-size: 11px; filter: grayscale(1) brightness(1.5) drop-shadow(0 0 5px #00ffcc); transform: rotate(-15deg); }

        /* ⚔️ TIER 3: GOLD COMMANDER */
        .lb-rank-3 { background: linear-gradient(90deg, #1a1a00, #111116); border: 1px solid #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.15); }
        .lb-rank-3 .lb-rank-num { color: #cd7f32; text-shadow: 0 0 8px #ffd700; font-size: 14px; }
        .lb-rank-3 .lb-avatar { border-color: #ffd700; }
        .lb-rank-3::before { content: '👑'; position: absolute; top: 5px; left: 5px; font-size: 9px; filter: sepia(1) hue-rotate(-30deg) drop-shadow(0 0 5px #cd7f32); transform: rotate(-15deg); }

        @keyframes lbBorderGlow { 100% { box-shadow: 0 0 20px rgba(255,0,60,0.5), inset 0 0 10px rgba(255,0,60,0.2); border-color: #ff007f; } }
        @keyframes lbShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

/* ======================================================= */
/* 📡 NAX PROFILE - RADAR & HASHOVER OVERRIDES (anime_user.php) */
/* ======================================================= */
.page-box-iframe { margin:0; padding:20px; background:#050508; color:#d1d1e0; font-family:sans-serif; display:flex; justify-content:center; }
.page-box-iframe .chat-box { width:100%; max-width:600px; background:#0d0d12; border-radius:20px; padding:25px; border:1px solid #2a2a35; }
.page-box-iframe .chat-item { display:flex; align-items:center; gap:15px; background:#15151e; padding:15px; border-radius:15px; margin-bottom:12px; text-decoration:none; color:#fff; border:1px solid #2a2a35; transition:0.3s; }
.page-box-iframe .chat-item:hover { border-color:#00adff; transform:translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.3);}
.page-box-iframe .badge-new { background:#ff007f; color:#fff; font-size:10px; padding:3px 8px; border-radius:10px; font-weight:bold; letter-spacing:1px; }
.page-box-iframe .propic { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #2a2a35;}

@keyframes pulseRadar {
    0% { border-color: #2a2a35; box-shadow: 0 0 0 rgba(0, 173, 255, 0); }
    100% { border-color: #00adff; box-shadow: 0 0 20px rgba(0, 173, 255, 0.15) inset; }
}

:root { --nc: #008080; --np: #00adff; }

.page-chat-iframe { margin:0; background:#050508; color:#fff; font-family:sans-serif; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 10px; box-sizing: border-box; }
.page-chat-iframe .chat-header { background:#15151e; width:100%; max-width:600px; padding:15px 20px; border-radius:15px; border:1px solid #2a2a35; display:flex; justify-content:space-between; align-items:center; box-sizing:border-box; margin-bottom: 10px; flex-shrink:0; z-index: 1000;}
.page-chat-iframe .chat-container { width:100%; max-width:600px; flex:1; background:#0d0d12; border-radius:15px; border:1px solid #2a2a35; padding:15px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; min-height: 0; opacity: 0; transition: opacity 0.5s ease; margin: 0 auto; }
.page-chat-iframe .chat-container.nax-ready { opacity: 1; }
.page-chat-iframe .hashover { display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; width: 100% !important;}
.page-chat-iframe .hashover-comments-section { order: 1 !important; flex: 1 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; min-height: 0 !important;}
.page-chat-iframe #hashover-sort-section { flex: 1 !important; overflow-y: auto !important; padding-right: 5px !important; min-height: 0 !important; display: flex !important; flex-direction: column-reverse !important; }
.page-chat-iframe #hashover-sort-section::-webkit-scrollbar { width: 4px; }
.page-chat-iframe #hashover-sort-section::-webkit-scrollbar-thumb { background: #2a2a35; border-radius: 10px; }
.page-chat-iframe #hashover-sort-section::-webkit-scrollbar-thumb:hover { background: var(--np); }
.page-chat-iframe .hashover-form-section { order: 2 !important; flex-shrink: 0 !important; width: 100% !important; margin-top: 10px !important;}
.page-chat-iframe .hashover-main-title, .page-chat-iframe .hashover-count-sort, .page-chat-iframe .hashover-comment-name, .page-chat-iframe .hashover-avatar, .page-chat-iframe .hashover-avatar-image, .page-chat-iframe .hashover-logout, .page-chat-iframe .hashover-form-logout, .page-chat-iframe .hashover-balloon::before, .page-chat-iframe .hashover-balloon::after, .page-chat-iframe .hashover-end-links, .page-chat-iframe .hashover-edit-cancel, .page-chat-iframe .hashover-reply-cancel, .page-chat-iframe .hashover-edit-form .hashover-dashed-title, .page-chat-iframe .hashover-edit-form .hashover-inputs, .page-chat-iframe .hashover-form-section .hashover-inputs, .page-chat-iframe .hashover-reply-form .hashover-dashed-title, .page-chat-iframe .hashover-reply-form .hashover-inputs, .page-chat-iframe .hashover-form-links { display: none !important; }
.page-chat-iframe .hashover-comment { margin-bottom: 12px !important; display: flex !important; flex-direction: column !important; border:none !important; width: 100% !important; flex-shrink: 0 !important; align-items: flex-start !important; text-align: left !important;}
.page-chat-iframe .hashover-balloon { padding: 10px 14px !important; border-radius: 18px !important; max-width: 85% !important; width: fit-content !important; font-size: 14px !important; border: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;}
.page-chat-iframe .hashover-comment:not(.hashover-user-owned) > .hashover-balloon { background: #1a1a24 !important; color: #d1d1e0 !important; border-bottom-left-radius: 4px !important; border: 1px solid #2a2a35 !important; }
.page-chat-iframe .hashover-comment.hashover-user-owned { align-items: flex-end !important; text-align: right !important;}
.page-chat-iframe .hashover-comment.hashover-user-owned > .hashover-balloon { background: linear-gradient(135deg, var(--nc), var(--np)) !important; color: #fff !important; border-bottom-right-radius: 4px !important; border-bottom-left-radius: 18px !important;}
.page-chat-iframe .hashover-footer { display: flex !important; gap: 10px !important; margin-top: 4px !important; font-size: 10px !important; color: #555 !important; justify-content: flex-start !important;}
.page-chat-iframe .hashover-comment.hashover-user-owned .hashover-footer { justify-content: flex-end !important; }
.page-chat-iframe .hashover-buttons { display: flex !important; gap: 8px !important; }
.page-chat-iframe .hashover-buttons a, .page-chat-iframe .hashover-buttons span { background: none !important; border: none !important; padding: 0 !important; color: #8b8b99 !important; text-decoration: none !important; font-weight: bold !important; cursor: pointer; transition: 0.3s;}
.page-chat-iframe .hashover-date-permalink { pointer-events: none !important; text-decoration: none !important; cursor: default !important; font-size: 10px !important;}
.page-chat-iframe .hashover-comment.hashover-user-owned .hashover-date-permalink { color: rgba(255,255,255,0.7) !important; }
.page-chat-iframe .hashover-comment.hashover-user-owned .hashover-buttons a { color: rgba(255,255,255,0.85) !important; }
.page-chat-iframe .hashover-comment.hashover-user-owned .hashover-buttons a:hover { color: #fff !important; text-shadow: 0 0 5px rgba(255,255,255,0.8) !important; }
.page-chat-iframe .hashover-comment:not(.hashover-user-owned) .hashover-date-permalink { color: #555 !important; }
.page-chat-iframe .hashover-comment:not(.hashover-user-owned) .hashover-buttons a:hover { color: var(--np) !important; }
.page-chat-iframe .hashover-form, .page-chat-iframe .hashover-reply-form, .page-chat-iframe .hashover-edit-form { width: 100% !important; max-width: 100% !important; background: #050508 !important; border: 1px solid #2a2a35 !important; border-radius: 20px !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; overflow: visible !important; }
.page-chat-iframe .hashover-textarea { background: transparent !important; border: none !important; color: #fff !important; padding: 15px !important; width: 100% !important; box-sizing: border-box !important; min-height: 50px !important; resize: none !important; font-family: inherit !important; outline: none !important; }
.page-chat-iframe .hashover-form-footer { display: flex !important; align-items: center !important; justify-content: space-between !important;border-radius:8px!important; padding: 5px 12px 10px 12px !important; width: 100% !important; box-sizing: border-box !important; }
.page-chat-iframe .hashover .hashover-formatting-table{background:#0F0F0F!important;border-radius:5px!important}
.page-chat-iframe .hashover-formatting-message { display: none !important;}
.page-chat-iframe .hashover-formatting-message.nax-show-fmt { display: block !important; border: 1px dashed #2a2a35 !important; padding:5px !important; border-radius: 10px !important; height: auto !important; max-height: none !important; overflow: visible !important;color:#fff!important; }
.page-chat-iframe .hashover-submit, .page-chat-iframe .hashover-post-button, .page-chat-iframe .hashover-edit-post, .page-chat-iframe .hashover-reply-post { display: none !important; }
.page-chat-iframe .hashover-edit-delete { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 0, 0, 0.1) !important; color: #ff4d4d !important; padding: 6px 12px !important; border-radius: 20px !important; font-weight: bold !important; border: 1px solid #ff4d4d !important; cursor: pointer !important; transition: 0.3s !important; font-size: 11px !important; margin-right: 10px !important; }
.page-chat-iframe .nax-toggle-label { cursor: pointer; display: flex; align-items: center; margin: 0; padding: 0;}
.page-chat-iframe .nax-toggle-label input { display: none !important; }
.page-chat-iframe .nax-toggle { position: relative; width: 34px; height: 18px; background: #2a2a35; border-radius: 10px; transition: 0.3s; box-shadow: inset 0 0 5px #000;}
.page-chat-iframe .nax-circle { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #8b8b99; border-radius: 50%; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.page-chat-iframe .nax-circle svg { width: 9px; height: 9px; fill: #000; }
.page-chat-iframe input:checked + .nax-toggle { background: var(--np); }
.page-chat-iframe input:checked + .nax-toggle .nax-circle { left: 18px; background: #fff; }
.page-chat-iframe .nax-btn-fmt { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin-left: 15px; transition: 0.3s; }
.page-chat-iframe .nax-btn-fmt svg { width: 18px; height: 18px; fill: #8b8b99; transition: 0.3s; flex-shrink:0;}
.page-chat-iframe .nax-btn-fmt:hover svg { fill: var(--np); }
.page-chat-iframe .nax-btn-send { background: var(--np); border: none; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; }
.page-chat-iframe .nax-btn-send:hover { transform: scale(1.1); box-shadow: 0 0 10px var(--np); }
.page-chat-iframe .nax-btn-send svg { width: 16px; height: 16px; fill: #000; margin-right: 2px; flex-shrink:0;}
.page-chat-iframe .hashover-notice { display: none !important; }
@keyframes radarFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
.page-chat-iframe .hashover-thread-link, .page-chat-iframe .hashover-more-link { font-size: 12px !important; color: var(--np) !important; text-align: center !important; display: block !important; padding: 10px !important; cursor: pointer; flex-shrink: 0 !important; border-radius: 10px !important; background: rgba(0, 173, 255, 0.05) !important; margin-bottom: 15px !important; position: sticky !important; top: 0 !important; z-index: 999 !important; }
.page-chat-iframe .hashover-thread-link:hover, .page-chat-iframe .hashover-more-link:hover { background: rgba(0, 173, 255, 0.1) !important; }
.page-chat-iframe .hashover .hashover-comment, .page-chat-iframe .hashover .hashover-comment > .hashover-header{background:none!important;}
.page-chat-iframe .hashover .hashover-comment > .hashover-header{padding:0!important}
.page-chat-iframe .hashover .hashover-message > *, .page-chat-iframe .hashover .hashover-formatting-message > *, .page-chat-iframe .hashover .hashover-comment .hashover-date > * { color:rgba(255, 255, 255, 0.85)!important; }

/* ======================================================= */
/* BROADCAST OVERLAY CSS (Dipindahkan dari overlay_bc.php) */
/* ======================================================= */
#nax-vip-overlay {
    position: fixed; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%) translateY(150px); 
    background: linear-gradient(135deg, #1a0b2e 0%, #050508 100%);
    border: 2px solid transparent; border-radius: 15px; padding: 10px 15px;
    box-shadow: 0 -5px 20px rgba(255, 0, 127, 0.4), 0 0 15px rgba(0, 210, 255, 0.2);
    z-index: 9999999; display: flex; align-items: center; gap: 12px;
    color: #fff; font-family: sans-serif; 
    width: 90vw; max-width: 340px; 
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    opacity: 0; pointer-events: none;
    
    background-image: linear-gradient(#1a0b2e, #1a0b2e), linear-gradient(90deg, #ffd700, #ff007f, #00d2ff, #ffd700);
    background-origin: padding-box, border-box; background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 100%;
    animation: naxOverlayFlow 3s linear infinite;
}

@keyframes naxOverlayFlow {
    0% { background-position: 0% 0%, 200% 0%; }
    100% { background-position: 0% 0%, -200% 0%; }
}

#nax-vip-overlay.show-overlay { 
    transform: translateX(-50%) translateY(0); 
    opacity: 1; 
    pointer-events: auto; 
}

.vip-avatar-box { position: relative; width: 45px; height: 45px; flex-shrink: 0; }

.vip-avatar-img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 2px solid #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    background: #111;
}

.vip-crown-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    font-size: 16px; filter: drop-shadow(0 2px 4px #ff007f);
}

.vip-broad-text-area { display: flex; flex-direction: column; overflow: hidden; flex: 1; text-align: left; }

#vip-broad-user { font-size: 14px; font-weight: 900; line-height: 1.2; }
#vip-broad-tier { font-size: 11px; color: #d1d1e0; margin-top: 2px; line-height: 1.3; }

#vip-broad-msg {
    font-size: 11px; font-style: italic; color: #ffd700; background: rgba(255,215,0,0.1); 
    padding: 4px 8px; border-radius: 6px; margin-top: 4px; border-left: 2px solid #ffd700; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    display: none; width: 100%; box-sizing: border-box; line-height: 1.2;
}

@media (min-width: 768px) {
    #nax-vip-overlay { max-width: 420px; padding: 15px 20px; border-radius: 20px; gap: 15px; bottom: 40px; }
    .vip-avatar-box { width: 55px; height: 55px; }
    .vip-crown-badge { font-size: 20px; top: -10px; }
    #vip-broad-user { font-size: 16px; }
    #vip-broad-tier { font-size: 12px; }
    #vip-broad-msg { font-size: 12px; padding: 6px 10px; margin-top: 6px; }
}

#nax-vip-close {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    z-index: 99999999;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1;
}
#nax-vip-close:hover {
    color: #ff007f;
    transform: scale(1.2);
}