.c-void-walker { background: radial-gradient(circle, #0a0a1a, #000); }
        .c-cyber-grid { background: #050505; background-image: linear-gradient(rgba(0,173,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0,173,255,0.2) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(500px) rotateX(60deg) scale(2); transform-origin: top; animation: gridMove 5s linear infinite; } @keyframes gridMove { 100% { background-position: 0 30px; } }
        .c-blood-sacrifice { background: linear-gradient(to bottom, #3a0000, #000); position: relative; } .c-blood-sacrifice::after { content: ''; position: absolute; top: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, rgba(255,0,0,0.1) 2px, transparent 4px); animation: scan 10s linear infinite; }
        .c-neural-network { background: #020510; } .c-inferno-core { background: #1a0500; } .c-abyssal-eye { background: radial-gradient(circle at 50% 50%, #110022, #000); } 
        .c-dragon-breath { background: linear-gradient(90deg, #1a0000, #ff4500, #1a0000); background-size: 200% 200%; animation: breathMove 3s ease infinite; } @keyframes breathMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .c-dimensional-rift { background: #050010; position: relative; } .c-dimensional-rift::before { content:''; position:absolute; top:50%; left:0; width:100%; height:2px; background:#fff; box-shadow: 0 0 20px 10px #bc13fe; transform: scaleY(0.5); animation: riftTear 0.1s infinite alternate; } @keyframes riftTear { 100% { transform: scaleY(2) translateY(2px); box-shadow: 0 0 30px 15px #bc13fe; } }
        .c-neon-tokyo { background: repeating-linear-gradient(45deg, #0f0c29, #302b63, #24243e); animation: bgMove 10s ease infinite alternate; } @keyframes bgMove { 100% { background-position: 100px 100px; } }
        .c-shattered-glass { background: #051015; } .c-time-warp { background: #000; } 
        .c-black-hole { background: #000; position: relative; } .c-black-hole::before { content:''; position:absolute; top:50%; left:50%; width:150px; height:150px; background:#000; box-shadow: 0 0 50px 20px #ff007f, 0 0 100px 40px #00adff; border-radius:50%; transform: translate(-50%, -50%); animation: holePulse 2s infinite alternate; } @keyframes holePulse { 100% { transform: translate(-50%, -50%) scale(1.1) rotate(180deg); filter: hue-rotate(90deg); } }
        .c-lightning-strike { background: #000a15; } .c-golden-emperor { background: linear-gradient(135deg, #2a2000, #b8860b, #ffd700, #2a2000); background-size: 300% 300%; animation: goldShine 5s ease infinite; } @keyframes goldShine { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
        .c-immortal-dragon { background: radial-gradient(circle at 50% 100%, #300, #000); }
        /* 🚀 UPGRADE GOD RAYS (VIP) - BINTANG MENGAMBANG! */
        .b-god-ray { border: 3px solid transparent; box-shadow: 0 0 30px #fff; position: relative; animation: godRayPulse 2s infinite alternate !important; }
        .b-god-ray::before { content:'✨'; position:absolute; top:-35px; font-size:30px; filter: drop-shadow(0 0 10px #fff); z-index:20; animation: float 3s infinite ease-in-out; }
        .b-plasma-storm { border: 4px dashed #00ffcc; animation: spin 5s linear infinite reverse; box-shadow: 0 0 20px #00ffcc, inset 0 0 20px #00ffcc; }
        .b-angelic-halo { border: 2px solid #ffd700; box-shadow: 0 0 20px #ffd700; } .b-angelic-halo::before, .b-angelic-halo::after { content:''; position:absolute; border-radius:50%; border: 2px dashed rgba(255,215,0,0.8); } .b-angelic-halo::before { width: 130%; height: 130%; animation: spin 8s linear infinite; border-top-color: #fff; } .b-angelic-halo::after { width: 150%; height: 150%; animation: spin 12s linear infinite reverse; border-bottom-color: #fff; }
        .b-soul-reaper { border: 3px solid #00adff; box-shadow: 0 10px 30px rgba(0,173,255,0.8); filter: drop-shadow(0 -10px 10px rgba(0,173,255,0.5)); animation: float 3s infinite ease-in-out; }
        .b-mecha-gear { border: 6px dotted #888; animation: spin 8s linear infinite; box-shadow: inset 0 0 10px #000; }
        .b-venom-symbiote { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; border: 4px solid #fff; box-shadow: 0 0 15px #fff; background: #000; animation: symbiote 3s infinite alternate; padding: 4px; } @keyframes symbiote { 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1.05); } }
        .b-crystal-prism { border: 4px solid transparent; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(45deg, #ff007f, #00ffcc, #00adff) border-box; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0; } .b-crystal-prism .avatar-img { border-radius: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
        .b-hellfire-ring { border: 3px solid #ff4500; filter: drop-shadow(0 0 15px #ff0000); animation: fireFlicker 0.1s infinite alternate; } @keyframes fireFlicker { 100% { filter: drop-shadow(0 0 25px #ff4500); transform: scale(1.02); } }
        .b-cyber-scanner { border: 3px solid #00ffcc; position: relative; overflow: hidden; } .b-cyber-scanner::after { content:''; position:absolute; top:-50%; left:0; width:100%; height:20px; background: rgba(0,255,204,0.5); box-shadow: 0 0 15px #00ffcc; animation: scanUpDown 2s infinite alternate; z-index: 20; } @keyframes scanUpDown { 100% { top: 120%; } }
        .b-mystic-portal { border: 4px solid #ff7700; box-shadow: 0 0 20px #ff7700, inset 0 0 20px #ff7700; border-image: repeating-linear-gradient(45deg, #ff7700, #ffdd00 10px, transparent 10px, transparent 20px) 1; animation: spin 10s linear infinite; }
        .b-dark-matter { border: 4px solid #1a0033; box-shadow: 0 0 50px #4a00e0 inset, 0 0 30px #000; animation: pulseDark 2s infinite alternate; } @keyframes pulseDark { 100% { box-shadow: 0 0 80px #8e2de2 inset, 0 0 50px #000; } }
        .b-neon-heartbeat { border: 3px solid #ff007f; box-shadow: 0 0 10px #ff007f; animation: heartbeat 1.5s infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); box-shadow: 0 0 30px #ff007f; } 30% { transform: scale(1); } 45% { transform: scale(1.1); box-shadow: 0 0 30px #ff007f; } }
        .b-ice-nova { border: 3px solid #a0e0ff; box-shadow: 0 0 25px #fff, inset 0 0 25px #a0e0ff; animation: iceGlow 3s infinite alternate; } @keyframes iceGlow { 100% { box-shadow: 0 0 50px #a0e0ff, inset 0 0 10px #fff; } }
        .b-solar-flare { border: 3px solid #fff; box-shadow: 0 0 40px #ffb700, 0 0 80px #ff4500; }
        .b-immortal-crown { border: 4px solid #ffb700; position: relative; box-shadow: 0 0 20px #ffb700; } .b-immortal-crown::before { content:'👑'; position:absolute; top:-35px; font-size:30px; filter: drop-shadow(0 0 10px #ffb700); z-index:20; animation: float 2s infinite ease-in-out; }
        /* ========================================== */
        /* 🚀 5 KOSMETIK DEWA TERBARU (COVER & BORDER) */
        /* ========================================== */
        
        /* 5 COVER BARU */
        .c-phantom-assassin { background: linear-gradient(180deg, #050508, #1a1a2e); }
        .c-celestial-sanctuary { background: linear-gradient(135deg, #fffaf0, #e0f7fa, #fffaf0); background-size: 200% 200%; animation: goldShine 6s ease-in-out infinite; } 
        .c-glitch-matrix { background: #050505; position: relative; } .c-glitch-matrix::before { content: ''; position: absolute; width: 100%; height: 6px; background: rgba(0, 255, 204, 0.5); box-shadow: 0 0 10px #00ffcc; animation: scan 3s infinite linear; } 
        .c-venomous-swamp { background: radial-gradient(circle at 50% 100%, #1a3300, #0a1100, #000); }
        .c-starlight-supernova { background: radial-gradient(circle at 50% 50%, #2a0066, #000); }

        /* 5 BORDER BARU */
        /* 1. Phantom Blade: Aura abu-abu gelap berdenyut */
        .b-phantom-blade { border: 3px solid #2a2a35; box-shadow: 0 0 15px #1a1a2e, inset 0 0 15px #1a1a2e; filter: drop-shadow(0 0 5px #000); animation: phantomPulse 2s infinite alternate; } 
        @keyframes phantomPulse { 100% { border-color: #4a4a6a; box-shadow: 0 0 25px #4a4a6a, inset 0 0 20px #4a4a6a; } }
        
        /* 2. Celestial Wings: Sayap cahaya emas yang mengambang lembut */
        .b-celestial-wings { border: 4px solid #fffaf0; box-shadow: 0 0 30px #ffd700, inset 0 0 20px #ffd700; animation: float 3s ease-in-out infinite; }
        
        /* 3. Glitch Circuit: Bergerak acak patah-patah seperti layar rusak */
        .b-glitch-circuit { border: 3px dashed #ff007f; box-shadow: 0 0 10px #00ffcc; animation: glitchBorder 0.1s infinite; } 
        @keyframes glitchBorder { 0% { border-color: #ff007f; transform: translate(1px, 1px); } 50% { border-color: #00ffcc; transform: translate(-1px, -1px); } 100% { border-color: #ff007f; transform: translate(0); } }
        
        /* 4. Venom Fang: Border oval bergelombang hijau mematikan */
        .b-venom-fang { border: 4px solid #33cc33; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; box-shadow: 0 10px 20px rgba(51, 204, 51, 0.6); animation: venomMorph 4s infinite alternate; } 
        @keyframes venomMorph { 100% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; border-color: #99ff33; box-shadow: 0 -10px 25px rgba(153, 255, 51, 0.8); } }
        
        /* 5. Starlight Orbit: Titik bintang berputar mengelilingi avatar */
        .b-starlight-orbit { border: 2px solid rgba(255,255,255,0.1); position: relative; } 
        .b-starlight-orbit::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px dotted #00adff; border-radius: 50%; animation: spin 6s linear infinite; }
        .bio-text { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin-bottom: 25px; padding: 0 10px; }
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--bg-surface); padding: 15px; border-radius: 15px; border: 1px solid #2a2a35; margin-bottom: 30px; }
        .stat-box { display: flex; flex-direction: column; align-items: center; }
        .stat-value { color: #fff; font-size: 20px; font-weight: 900; }
        .stat-label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; margin-top: 4px; letter-spacing: 2px; }
        
        .link-stack { display: flex; flex-direction: column; gap: 12px; }
        .btn-link { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 12px; background: var(--bg-surface); color: #fff; text-decoration: none; font-size: 15px; font-weight: bold; border: 1px solid #2a2a35; transition: 0.3s; cursor: pointer; }
        .btn-link:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(0,173,255,0.05); }
        .btn-link svg { flex-shrink: 0; fill: currentColor; }
        
        .btn-edit { background: linear-gradient(90deg, var(--accent), var(--mythic)); border: none; }
        .btn-edit:hover { background: linear-gradient(90deg, var(--mythic), var(--accent)); box-shadow: 0 10px 30px rgba(255,0,127,0.3);}
        
        .btn-msg { background: linear-gradient(90deg, #1a1a24, #2a2a35); border-left: 4px solid var(--neon); color: var(--neon); }
        .btn-cancel { background: #2a2a35; border-color: #2a2a35; }
        .btn-cancel:hover { background: var(--mythic) !important; border-color: var(--mythic) !important; box-shadow: 0 10px 20px rgba(255,0,127,0.3); }

        .history-wrapper { margin-top:30px; border-top: 1px dashed #2a2a35; padding-top: 20px; text-align:left;}
        .history-title { font-size:14px; color:#fff; margin-bottom:15px; font-weight:bold; }
        .hist-item { display:flex; justify-content:space-between; align-items:center; background:#111116; padding:12px 15px; border-radius:10px; border:1px solid #2a2a35; margin-bottom:10px; text-decoration:none; color:var(--text-main); transition:0.3s;}
        .hist-item:hover { border-color:var(--accent); background:rgba(0,173,255,0.05);}
        .hist-title { font-size:13px; font-weight:bold; color:var(--accent);}
        .hist-meta { font-size:11px; color:#8b8b99; display:flex; gap:10px;}
        .pagination-bar { display:flex; justify-content:space-between; align-items:center; margin-top:15px;}
        .page-btn { background:#2a2a35; border:none; color:#fff; padding:6px 12px; border-radius:8px; font-size:12px; cursor:pointer; transition:0.3s;}
        .page-btn:hover { background:var(--accent);}
        .page-btn:disabled { background:#111; color:#555; cursor:not-allowed;}

        #edit-section { display: none; padding: 30px; position: relative; z-index: 10; box-sizing: border-box; width: 100%; max-width: 100%;}
        .form-title { color: var(--accent); border-bottom: 2px dashed #2a2a35; padding-bottom: 15px; margin-top: 0; font-size: 20px; }
        .form-group { margin-bottom: 20px; text-align: left; }
        .form-group label { display: block; margin-bottom: 8px; color: #fff; font-size: 12px; font-weight: bold; }
        .form-input { width: 100%; padding: 15px; background: #0b0b10; border: 1px solid #2a2a35; border-radius: 10px; color: white; font-family: inherit; font-size: 14px; box-sizing: border-box; transition: 0.3s; }
        .form-input:focus { border-color: var(--accent); outline: none; }
        .form-input:disabled { background: #111; color: #555; cursor: not-allowed; }
        .warning-text { font-size: 11px; color: #ff007f; margin-top: 8px; display: block; font-weight: bold; }
        
        .file-upload-wrapper { position: relative; width: 100%; height: 60px; border: 2px dashed #2a2a35; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); background: #0b0b10; font-weight: bold; transition: 0.3s;}
        .file-upload-wrapper:hover { border-color: var(--neon); color: var(--neon); background: rgba(0,255,204,0.05); }
        .file-upload-wrapper input[type="file"] { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
        
        .btn-add-link { background: transparent; border: 2px dashed #2a2a35; color: var(--text-dim); }
        .btn-add-link:hover { border-color: var(--neon) !important; color: var(--neon) !important; background: rgba(0,255,204,0.05) !important; transform: translateY(-2px); }
        .btn-remove-link { background: var(--mythic); border: none; border-radius: 10px; color: #fff; padding: 0 15px; cursor: pointer; transition: 0.3s; flex-shrink:0; }
        .btn-remove-link:hover { background: #ff4d4d; transform: scale(1.1); box-shadow: 0 0 10px rgba(255,77,77,0.5); }

        .radio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; max-height: 280px; overflow-y: auto; }
        .radio-card { background: #0b0b10; border: 1px solid #2a2a35; border-radius: 10px; padding: 15px 5px; text-align: center; cursor: pointer; color: var(--text-dim); font-size: 11px; font-weight: bold; position: relative; transition:0.3s;}
        .radio-card input { display: none; }
        .radio-card:has(input:checked) { border-color: var(--accent); color: #fff; background: rgba(0,173,255,0.1); }
        .radio-card:hover { border-color: var(--text-main); color: var(--text-main); }
        .radio-card.locked { opacity: 0.4; cursor: not-allowed; }
        .radio-card.locked:hover { border-color:#2a2a35; color:var(--text-dim); }
        .radio-card.locked::after { content: var(--lock-icon, '🔒'); position: absolute; top:3px; right:4px; font-size:11px; text-shadow: 0 0 5px var(--lock-color, #fff); filter: drop-shadow(0 0 2px var(--lock-color, transparent)); }

        .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 999999; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
        .modal-box { background: var(--bg-surface); padding: 30px; border-radius: 20px; width: 320px; text-align: center; border: 1px solid #2a2a35; position: relative; animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes popUp { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        .close-modal { position: absolute; top: 15px; right: 15px; background: #2a2a35; border: none; color: #fff; width:30px; height:30px; border-radius:50%; font-size: 16px; cursor: pointer; transition:0.3s; display:flex; align-items:center; justify-content:center;}
        .close-modal:hover { background: var(--mythic); transform: rotate(90deg); }
        
        .social-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
        .share-icon-btn { background: #0b0b10; width: 100%; aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; transition: 0.3s; border: 1px solid #2a2a35; }
        .share-icon-btn:hover { transform: translateY(-5px); border-color: currentColor; }
        
        .achv-list-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: #0b0b10; border: 1px solid #2a2a35; border-radius: 15px; margin-bottom: 10px; text-align: left; cursor:pointer; transition:0.3s;}
        .achv-list-item:hover { border-color:var(--accent); background:rgba(0,173,255,0.05);}
        .achv-list-item.locked { filter: grayscale(1); opacity: 0.5; }
        .achv-list-item.locked:hover { filter: grayscale(0.5); opacity: 0.8; }
        .achv-list-icon { font-size: 24px; width: 50px; height: 50px; background: #1a1a24; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--accent); flex-shrink: 0; }
        .achv-list-item.locked .achv-list-icon { border-color: #555; }


        
        .qr-frame { background: #fff; padding: 10px; border-radius: 15px; display: inline-block; box-shadow: 0 10px 20px rgba(0,0,0,0.5); margin-bottom: 20px;}
        .qr-frame img { display: block; width: 140px; height: 140px; }

        .toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #2a2a35; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: var(--accent); }
        input:checked + .slider:before { transform: translateX(26px); }

/* ======================================================= */
        /* 🌟 SISTEM TEMA PANGKAT & VIP NAX V3 (ULTIMATE) 🌟 */
        /* ======================================================= */

        /* 1. BENTUK FISIK UTAMA (RANK & PREVIEW MODAL) */
        .rank-badge-btn {
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            gap: 8px !important; padding: 8px 18px !important; border-radius: 30px !important;
            font-size: 13px !important; font-weight: 800 !important; margin: 15px 0 5px !important;
            text-transform: uppercase !important; cursor: pointer !important;
            border: 2px solid transparent !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; width: fit-content !important;
            position: relative !important; overflow: hidden !important; z-index: 1 !important;
        }
        .rank-badge-btn:hover { transform: translateY(-3px) scale(1.05) !important; }
        
        .mini-rank-preview {
            display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px;
            font-size: 11px; font-weight: 800; text-transform: uppercase; border: 1px solid transparent;
            position: relative !important; overflow: hidden !important; z-index: 1 !important;
        }
        
        .rank-modal-card {
            display: flex; align-items: center; gap: 15px; padding: 15px; margin-bottom: 12px;
            border-radius: 12px; background: #111116; border: 1px solid #2a2a35; transition: all 0.3s ease;
        }

        /* Mengamankan Teks agar Selalu di Atas Animasi */
        .rank-badge-btn > span, .rank-badge-btn > text, 
        .mini-rank-preview > span, .mini-rank-preview > text,
        .achv-badge > *, .achv-list-item > div, .tier-row-item > * {
            position: relative !important; z-index: 5 !important;
        }

        /* --- TEMA KASTA BAWAH (STATIS & ELEGAN) --- */
        .theme-newbie { background: linear-gradient(145deg, #151f15, #1a2a1a) !important; border-color: #2f4f2f !important; color: #8fbc8f !important; box-shadow: 0 0 12px rgba(143, 188, 143, 0.25) !important; text-shadow: 0 0 5px rgba(143, 188, 143, 0.6) !important; }
        .theme-bronze { background: linear-gradient(145deg, #2a1608, #3e2723) !important; border-color: #8b4513 !important; color: #cd7f32 !important; box-shadow: 0 0 12px rgba(205, 127, 50, 0.35) !important; text-shadow: 0 0 5px rgba(205, 127, 50, 0.7) !important; }
        .theme-silver { background: linear-gradient(145deg, #1a1a24, #2d3748) !important; border-color: #718096 !important; color: #e2e8f0 !important; box-shadow: 0 0 15px rgba(226, 232, 240, 0.4) !important; text-shadow: 0 0 8px rgba(226, 232, 240, 0.8) !important; }

        /* --- TEMA KASTA TINGGI (GOLD & DIAMOND) --- */
        .theme-gold { background: linear-gradient(145deg, #332701, #5c4000) !important; border-color: #ffd700 !important; color: #ffd700 !important; box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important; text-shadow: 0 0 10px rgba(255, 215, 0, 1) !important; }
        .theme-gold::after { content: '' !important; position: absolute !important; top: 0 !important; left: -100%; width: 50% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), transparent) !important; animation: rankShine 3s infinite linear !important; z-index: 3 !important; pointer-events:none !important;}

        .theme-diamond { background: #001f3f !important; border: 2px solid transparent !important; color: #00ffff !important; box-shadow: 0 0 25px rgba(0, 255, 255, 0.6) !important; text-shadow: 0 0 12px rgba(0, 255, 255, 1) !important; }
        .theme-diamond::before { content: '' !important; position: absolute !important; top: -150% !important; left: -50% !important; width: 200% !important; height: 400% !important; background: conic-gradient(from 0deg, transparent 10%, #00ffff 20%, #00ffff 25%, transparent 35%) !important; animation: rankSpin 3s linear infinite !important; z-index: -1 !important; }
        .theme-diamond::after { content: '' !important; position: absolute !important; top: 0 !important; left: -100%; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important; animation: rankShine 4s infinite linear !important; z-index: 3 !important; pointer-events:none !important;}

/* --- TEMA RANK: MYTHIC EMPEROR --- */
        .theme-mythic {
            background-image: linear-gradient(#1a0b2e, #1a0b2e), linear-gradient(90deg, #ff007f, #00d2ff, #ff007f) !important;
            background-origin: padding-box, border-box !important; background-clip: padding-box, border-box !important;
            border: 2px solid transparent !important; background-size: 200% 100% !important;
            color: #ffffff !important; text-shadow: 0 0 8px #ff007f, 0 0 15px #7000ff !important;
            box-shadow: 0 0 20px rgba(255, 0, 127, 0.6), 0 0 40px rgba(0, 210, 255, 0.3) !important;
            animation: mythicFlow 3s linear infinite !important;
        }
        
        .theme-mythic::after {
            content: '' !important; position: absolute !important; top: 0 !important; 
            /* 🚀 FIX: Hapus !important pada 'left' agar mesin animasi bisa menariknya! */
            left: -100%; 
            width: 60% !important; height: 100% !important;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent) !important;
            animation: rankShine 3s infinite linear !important; transform: skewX(-20deg) !important;
            pointer-events: none !important; z-index: 3 !important; 
        }

        /* ======================================================= */
        /* 🌈 SOFT NEON GLOW TIER - UNLOCKED & LOCKED (ELEGAN) 🌈 */
        /* ======================================================= */

        .achv-badge, .achv-list-item, .tier-row-item {
            position: relative !important;
            overflow: hidden !important;
            z-index: 1 !important;
            transition: all 0.3s ease !important;
        }

        /* Efek redup khusus untuk item yang masih terkunci (LOCKED) Umum */
        .achv-list-item.locked:not(.tier-mythic):not(.achv-vip-card), 
        .tier-row-item.locked:not(.tier-mythic):not(.achv-vip-card) {
            background: rgba(13, 13, 18, 0.6) !important;
        }
        .achv-list-item.locked:not(.tier-mythic):not(.achv-vip-card) .achv-list-icon, 
        .tier-row-item.locked:not(.tier-mythic):not(.achv-vip-card) .tier-name {
            filter: grayscale(0.5) opacity(0.6) !important;
        }

        /* 1. Misi Tunggal (Unlocked) - Soft Cyan */
        .tier-unlocked { border-color: rgba(0, 255, 204, 0.35) !important; box-shadow: 0 0 10px rgba(0, 255, 204, 0.15) !important; }
        .tier-unlocked .achv-list-icon, .tier-unlocked .tier-name, .tier-unlocked .tier { color: #00ffcc !important; }

        /* 2. Tier: Awakened - Soft Green */
        .tier-awakened { border-color: rgba(0, 250, 154, 0.35) !important; box-shadow: 0 0 10px rgba(0, 250, 154, 0.15) !important; }
        .tier-awakened .achv-list-icon, .tier-awakened .tier-name, .tier-awakened .tier { color: #50c878 !important; }

        /* 3. Tier: Elite - Soft Blue */
        .tier-elite { border-color: rgba(0, 173, 255, 0.35) !important; box-shadow: 0 0 10px rgba(0, 173, 255, 0.15) !important; }
        .tier-elite .achv-list-icon, .tier-elite .tier-name, .tier-elite .tier { color: #00adff !important; }

        /* 4. Tier: Epic - Soft Purple */
        .tier-epic { border-color: rgba(188, 19, 254, 0.35) !important; box-shadow: 0 0 12px rgba(188, 19, 254, 0.15) !important; }
        .tier-epic .achv-list-icon, .tier-epic .tier-name, .tier-epic .tier { color: #bc13fe !important; }

        /* 5. Tier: Legendary - Soft Fire Gold */
        .tier-legendary { border-color: rgba(255, 140, 0, 0.4) !important; box-shadow: 0 0 12px rgba(255, 140, 0, 0.2) !important; }
        .tier-legendary .achv-list-icon, .tier-legendary .tier-name, .tier-legendary .tier { color: #ff8c00 !important; }
        
        .achv-badge.tier-legendary::after, .achv-list-item.tier-legendary::after, .tier-row-item.tier-legendary::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
            transform: skewX(-25deg); animation: rankShine 3s infinite linear; z-index: 3; pointer-events: none;
        }
        .achv-list-item.tier-legendary.locked, .tier-row-item.tier-legendary.locked { 
            opacity: 0.6 !important; filter: grayscale(0.5) !important; 
        }

        /* ======================================================= */
        /* 🐉 6. TIER: MYTHIC (RUBY & AMETHYST - BORDER MENGALIR)   */
        /* ======================================================= */
        .achv-badge.tier-mythic, .achv-list-item.tier-mythic, .tier-row-item.tier-mythic {
            background-image: linear-gradient(#1f000b, #12001f), 
                              linear-gradient(90deg, #ff003c 0%, #9d00ff 25%, #ffffff 50%, #9d00ff 75%, #ff003c 100%) !important;
            background-origin: padding-box, border-box !important; 
            background-clip: padding-box, border-box !important;
            border: 2.5px solid transparent !important; 
            background-size: 100% 100%, 200% 100% !important;
            box-shadow: 0 0 15px rgba(255, 0, 60, 0.3) !important;
            animation: naxBorderFlow 2s linear infinite !important;
        }
        .tier-mythic .achv-list-icon { border-color: #ff003c !important; box-shadow: 0 0 10px rgba(255,0,60,0.4) !important; background: #1f000b !important;}
        .tier-mythic .tier, .tier-mythic .tier-name { color: #fff !important; text-shadow: 0 0 5px #ff003c !important; }

        /* ⚡ FLASH SHINE MYTHIC (TETAP AKTIF WALAU TERKUNCI) */
        .achv-badge.tier-mythic::after, .achv-list-item.tier-mythic::after, .tier-row-item.tier-mythic::after {
            content: ''; position: absolute; top: 0; left: -100%; 
            width: 60%; 
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent);
            transform: skewX(-25deg); 
            animation: rankShine 2.5s infinite linear; z-index: 3; pointer-events: none;
        }

        /* Terkunci tapi animasi border dan shine tetap nyala */
        .achv-list-item.tier-mythic.locked, .tier-row-item.tier-mythic.locked {
            opacity: 0.45 !important; 
            filter: brightness(0.6) !important; 
        }

        /* ======================================================= */
        /* 👑 7. TIER: ROYAL BLOOD (VIP ACHIEVEMENT - TERPADU)     */
        /* ======================================================= */
        .achv-badge.achv-vip, .achv-list-item.achv-vip-card {
            background-image: linear-gradient(#1a0d01, #1a0d01), 
                              linear-gradient(90deg, #ffd700 0%, #ff007f 25%, #ffffff 50%, #ff007f 75%, #ffd700 100%) !important;
            background-origin: padding-box, border-box !important; 
            background-clip: padding-box, border-box !important;
            border: 2.5px solid transparent !important; 
            background-size: 100% 100%, 200% 100% !important;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.3) !important;
            animation: naxBorderFlow 2.5s linear infinite !important; 
            position: relative !important; overflow: hidden !important;
        }
        .achv-list-item.achv-vip-card span { color: #ffd700 !important; text-shadow: 0 0 5px #ff007f !important; }
        .achv-list-item.achv-vip-card .achv-list-icon { border-color: #ffd700 !important; box-shadow: 0 0 10px #ffd700 !important; background: #1a0d01 !important; }

        .achv-badge.achv-vip::after, .achv-list-item.achv-vip-card::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
            transform: skewX(-25deg); animation: rankShine 3s infinite linear; z-index: 3; pointer-events: none;
        }

        .achv-list-item.achv-vip-card.locked {
            opacity: 0.45 !important; 
            filter: brightness(0.6) !important; 
        }

        /* 🚀 PENGATURAN LAYOUT VIP BADGE DI PROFIL (UKURAN NORMAL) */
        .achv-badge.achv-vip { 
            display: inline-flex;
            justify-content: center; 
            align-items: center;
            gap: 6px;
            padding: 6px 16px; /* Dibuat proporsional, tidak melar 100% */
            font-size: 13px;
            margin-bottom: 5px;
        }

        /* ======================================================= */
        /* 🔥 MESIN PENGGERAK ANIMASI (KEYFRAMES MUTLAK) 🔥 */
        /* ======================================================= */
        @keyframes rankSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes mythicFlow { 0% { background-position: 0% 0%, 200% 0%; } 100% { background-position: 0% 0%, -200% 0%; } }
        @keyframes naxBorderFlow { 0% { background-position: 0% 0%, 0% 0%; } 100% { background-position: 0% 0%, 200% 0%; } }
        @keyframes rankShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

        /* 🚀 KEMBALIKAN MESIN ANIMASI YANG HILANG! */
        @keyframes spin { 100% { transform: rotate(360deg); } }
        @keyframes scan { 0% { background-position: 0 0; } 100% { background-position: 0 200px; } }
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
        @keyframes pulseDark { 100% { box-shadow: 0 0 80px #8e2de2 inset, 0 0 50px #000; } }
        @keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); box-shadow: 0 0 30px #ff007f; } 30% { transform: scale(1); } 45% { transform: scale(1.1); box-shadow: 0 0 30px #ff007f; } }
        @keyframes iceGlow { 100% { box-shadow: 0 0 50px #a0e0ff, inset 0 0 10px #fff; } }
        @keyframes fireFlicker { 100% { filter: drop-shadow(0 0 25px #ff4500); transform: scale(1.02); } }
        @keyframes scanUpDown { 100% { top: 120%; } }
        @keyframes symbiote { 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1.05); } }
        @keyframes phantomPulse { 100% { border-color: #4a4a6a; box-shadow: 0 0 25px #4a4a6a, inset 0 0 20px #4a4a6a; } }
        @keyframes glitchBorder { 0% { border-color: #ff007f; transform: translate(1px, 1px); } 50% { border-color: #00ffcc; transform: translate(-1px, -1px); } 100% { border-color: #ff007f; transform: translate(0); } }
        @keyframes venomMorph { 100% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; border-color: #99ff33; box-shadow: 0 -10px 25px rgba(153, 255, 51, 0.8); } }
        @keyframes godRayPulse { 0% { box-shadow: 0 0 15px #fff, inset 0 0 10px #fff; } 100% { box-shadow: 0 0 40px #fff, 0 0 20px #00adff, inset 0 0 20px #fff; } }
        @keyframes solarPulse { 0% { box-shadow: 0 0 30px #ffb700, 0 0 60px #ff4500; } 100% { box-shadow: 0 0 50px #ffb700, 0 0 100px #ff4500, inset 0 0 20px #ffb700; border-color: #ffb700; } }
        @keyframes prismShine { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
        /* ======================================================= */
        /* 👁️ KOTAK HOLOGRAM MINI (RUANG PAS MOBILE) */
        /* ======================================================= */
        #cosmetic-hologram { border-radius: 12px; overflow: hidden; border: 1px solid #2a2a35; margin-bottom: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); position: relative; background: #0b0b12;}
        .cover-area-demo { width: 100%; height: 100px; position: relative; overflow: hidden; background: #000; z-index: 1; }
        .avatar-container-demo { position: relative; margin-top: -35px; margin-left: 15px; width: 65px; height: 65px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; z-index: 10; }
        .avatar-img-demo { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; z-index: 5; background: #1a1a24; position: relative; }
        .demo-info { padding: 10px 15px 15px; background: #0b0b12; margin-top: -40px; padding-left: 95px; position: relative; z-index: 5;}
        /* ======================================================= */
        /* 🛠️ FIX ANIMASI COVER CSS MURNI (TANPA MERUSAK KANVAS) */
        /* ======================================================= */
        
        /* 1. Cyber Grid: Efek 3D dipindah ke ::before agar tidak merusak container */
        .c-cyber-grid { background-color: #050505 !important; position: relative; overflow: hidden; }
        .c-cyber-grid::before {
            content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
            background-image: linear-gradient(rgba(0,173,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0,173,255,0.2) 1px, transparent 1px) !important;
            background-size: 30px 30px !important;
            transform: perspective(500px) rotateX(60deg) scale(1) !important;
            transform-origin: top center !important;
            animation: gridMove 5s linear infinite !important;
            z-index: 0; pointer-events: none;
        }

        /* 2. Blood Moon: Z-index disesuaikan agar selalu tampil di atas kanvas kosong */
        .c-blood-sacrifice { background: linear-gradient(to bottom, #3a0000, #000) !important; position: relative; overflow: hidden; } 
        .c-blood-sacrifice::after { 
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background-image: repeating-linear-gradient(0deg, transparent, rgba(255,0,0,0.15) 2px, transparent 4px) !important; 
            animation: scan 4s linear infinite !important; 
            z-index: 1; pointer-events: none;
        }

        /* 3. Neon Tokyo: Background Size harus 200% agar gradiennya bisa bergerak */
        .c-neon-tokyo { 
            background-image: repeating-linear-gradient(45deg, #0f0c29, #302b63, #24243e) !important; 
            background-size: 200% 200% !important;
            animation: bgMove 5s ease infinite alternate !important; 
        }
        /* ======================================================= */
        /* 💳 VIP PRICING CARDS (DYNAMIC RESPONSIVE & SELECTION)   */
        /* ======================================================= */
        .vip-pricing-container { 
            display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; 
        }
        
        /* Rahasia Full Width: flex: 1 1 140px; (Tumbuh otomatis mengisi ruang kosong!) */
        .vip-card { 
            flex: 1 1 140px; background: #111116; border: 2px solid #2a2a35; border-radius: 12px; 
            padding: 15px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
            cursor: pointer; transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
            position: relative; opacity: 0.6; filter: grayscale(0.8);
        }
        
        /* Efek Hover */
        .vip-card:hover { opacity: 1; filter: grayscale(0); border-color: #555; transform: translateY(-3px); }
        
        /* Efek Terpilih (Active) */
        .vip-card.active { opacity: 1; filter: grayscale(0); transform: translateY(-5px) scale(1.02); }
        .vip-card.active.card-1 { border-color: #00ffcc; box-shadow: 0 10px 25px rgba(0, 255, 204, 0.2); }
        .vip-card.active.card-2 { border-color: #ffd700; box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3); }
        .vip-card.active.card-3 { border-color: #ff007f; box-shadow: 0 10px 25px rgba(255, 0, 127, 0.3); }
        /* ======================================================= */
        /* 🌌 EFEK BACKGROUND HEADER HASHOVER (DEMO VERSION)       */
        /* ======================================================= */
        
        /* Base Setup untuk Kotak Hologram agar rapi */
        #shov-hologram { 
            margin-top: 15px; 
            border-radius: 12px; 
            overflow: hidden; 
            border: 1px solid #2a2a35; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
            display: none; /* Kita sembunyikan dulu, muncul saat dropdown diklik */
        }

        /* Struktur Inti Header Hologram (DENGAN ANIMASI DEFAULT) */
        .hologram-header { 
            position: relative; 
            overflow: hidden; 
            padding: 15px; 
            z-index: 1; 
            display: flex; 
            align-items: center; 
            gap: 12px;
            min-height: 60px; /* Biar ukurannya stabil */
            
            /* 🚀 SUNTIKAN NYAWA DEFAULT: Gradien Ungu Gelap Bernapas! */
            background-color: #0b0b12; 
            background-image: linear-gradient(-45deg, #0b0b12, #240b24, #12121f, #2d142c);
            background-size: 300% 300%;
            animation: naxWaveFluid 6s ease infinite;
        }
        
        /* Mengamankan Avatar, Nama, Lencana agar di atas Background */
        .hologram-header .propic-demo { width: 35px; height: 35px; border-radius: 50%; border: 1px solid #555; position: relative; z-index: 3;}
        .hologram-header .texts-demo { display: flex; flex-direction: column; position: relative; z-index: 3;}
        .hologram-header .texts-demo .name-demo { font-size: 13px; font-weight: bold; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); text-decoration: none;}
        .hologram-header .texts-demo .date-demo { font-size: 10px; color: #8b8b99; margin-top: 2px;}

        /* 👑 LENCANA VIP PREMIUM ANIMATION (Sama persis dengan aslinya!) */
        span.vip-badge-demo {
            display: inline-flex; align-items: center; justify-content: center;
            margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 900;
            text-transform: uppercase; letter-spacing: 0.5px; color: #ffffff; border-radius: 20px; 
            background-image: linear-gradient(90deg, #ff007f, #7000ff, #00d2ff, #ff007f); background-size: 300% 100%;
            border: 1px solid rgba(255, 255, 255, 0.4); position: relative; overflow: hidden; vertical-align: middle;
            animation: naxBadgeFlow 3s linear infinite, naxBadgePulse 2s infinite alternate ease-in-out;
        }
        span.vip-badge-demo::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); animation: naxBadgeShine 4s infinite linear; }

/* --- HASH-OVER FIXES & NEW VISUALS ADDED --- */

/* ========================================== */
/* 15. LOGIN NOTICE BOX                       */
/* ========================================== */
.nax-login-notice {
    background: linear-gradient(145deg, #16161c, #111116);
    padding: 30px;
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(0, 128, 128, 0.3);
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: 0.3s ease;
}

.nax-login-desc {
    color: #8b8b99;
    margin-bottom: 20px;
    font-family: sans-serif;
    font-size: 15px;
}

.nax-login-btn {
    background: linear-gradient(90deg, var(--nc), var(--np));
    color: white;
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-family: sans-serif;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0, 173, 255, 0.3);
}

/* Efek bercahaya saat tombol login disentuh/hover */
.nax-login-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(0, 173, 255, 0.5);
}

/* Mengatur kotak komentar agar bisa di-scroll secara vertikal */
.hashover-sort-section {
  max-height: 500px; 
  overflow-y: auto;
  padding-right:1px; 
  
  /* Dukungan untuk browser Mozilla Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--nc) transparent; 
}

/* --- Kustomisasi Scrollbar (Chrome, Safari, Edge) --- */
.hashover-sort-section::-webkit-scrollbar {
  width:1px; 
}
.hashover-sort-section::-webkit-scrollbar-track {
  background: transparent; 
  border-radius: 4px;
}
.hashover-sort-section::-webkit-scrollbar-thumb {
  background: #008080; 
  border-radius: 4px;
}
.hashover-sort-section::-webkit-scrollbar-thumb:hover {
  background: #00adff; 
}

.hashover .hashover-dashed-title{padding-bottom:0!important}
.hashover .hashover-comment .hashover-likes,.hashover-likes{color:var(--np)!important;font-size:11px!important;vertical-align:bottom!important;float:none!important;position:relative!important;top:5px!important}

/* 1. PEMBERSIHAN ELEMEN (BUG FIX: .hashover-form-links DIHAPUS DARI SINI) */
#hashover .hashover-main-title, #hashover .hashover-email-input, #hashover .hashover-end-links, #hashover .hashover-thread-link,
#hashover .hashover-name-input::before, #hashover .hashover-name-input::after, #hashover .hashover-reply-arrow,
#hashover .hashover-input-cell:has(.hashover-email-input), 
#hashover .hashover-logout, 
#hashover .hashover-formatting, 
#hashover .hashover-reply-cancel,
.hashover-edit-cancel, .hashover-fake-link #hashover .hashover-formatting,
#hashover .hashover-reply-form .hashover-avatar-image, 
#hashover .hashover-reply-form .hashover-name-input, 
#hashover .hashover-edit-form .hashover-avatar-image, 
#hashover .hashover-edit-form .hashover-name-input
{ display: none !important; }

.hashover .hashover-comment-name, .hashover .hashover-ip{margin-left:15px!important}
.hashover-comment-name, .hashover-name-input { background-image: none !important; padding-left: 0 !important; }
.hashover-name-input { margin-bottom: 10px !important; }

/* ========================================== */
/* 2. AREA MERAH: COUNT & DROPDOWN SORTIR     */
/* ========================================== */
#hashover-count-wrapper, .hashover-count-sort {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px dashed #2a2a35 !important;
}
.hashover-count {margin-left:15px;
    color: #d1d1e0 !important;
    font-size: 15px !important;
    font-weight: bold !important;
}
.hashover-select-wrapper { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important;margin-right:15px !important}
#hashover-sort-select {
    background-color: #1a1a24 !important; 
    color: var(--np) !important;
    border: 1px solid #2a2a35 !important; 
    border-radius: 8px !important;
    padding: 8px 12px !important; 
    font-size: 13px !important; 
    font-weight: bold !important;
    outline: none !important; 
    cursor: pointer !important; 
    appearance: auto !important;
    height: auto !important; 
    line-height: normal !important;
}

/* 3. STYLE FORMATTING BOX */
.hashover-formatting-message { 
    background: transparent !important; border: none !important; padding: 0 !important; margin-top: 8px !important; 
}
.hashover-reply-form .hashover-formatting-message,
.hashover-edit-form .hashover-formatting-message {
    display: none !important;
}

.hashover-formatting-table {
    background: #111116 !important; border: 2px dashed var(--nc) !important;
    border-radius: 10px !important; padding: 15px !important; box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important;
}
.hashover-formatting-table p { color: #8b8b99 !important; font-size: 13px !important; line-height: 1.6 !important; }
.hashover-formatting-table .hashover-title { color: var(--np) !important; font-weight: bold !important; margin-bottom: 5px !important; }

/* 4. SEJAJARKAN FOOTER FORM */
.hashover-form-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top:0!important;border-radius:15px!important}
.hashover-form-links { display: flex !important; align-items: center !important; gap:15px !important; }
/* Label agar sejajar */
.hashover-form-links label, .hashover-fake-link { color: #8b8b99 !important; font-size: 13px !important; cursor: pointer !important; transition: 0.3s !important; display: inline-flex !important; align-items: center !important; }
.hashover-fake-link:hover { color: var(--np) !important; }

/* 5. MODERN KOTAK KOMENTAR (Balloons) */
.hashover-balloon, .hashover-comment {
    background: #16161c !important; border: 1px solid #2a2a35 !important;
    border-radius: 14px !important; padding:0!important; position: relative !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}
.hashover-balloon:hover { border-color: var(--np) !important; box-shadow: 0 0 15px rgba(0, 173, 255, 0.1) !important; }
.hashover-balloon::before, .hashover-balloon::after { display: none !important; }
.hashover-content p { color: #d1d1e0 !important; font-size: 14px !important; line-height: 1.7 !important; margin-top: 5px !important;margin:5px 15px!important}

/* ========================================== */
/* 6. AREA KUNING: PERBAIKAN HEADER SEJAJAR   */
/* ========================================== */
.hashover-inputs {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
.hashover-header {border:none!important;border-radius:5px;
    display: flex !important;
    align-items: center !important; 
    gap:0!important;padding:10px!important;margin-top:0!important;
    margin-bottom:0!important;
    flex-wrap: nowrap !important; 
}
.hashover-avatar { 
    display: inline-flex !important; 
    align-items: center !important; 
    margin: 0 !important;
}
.hashover-comment-name { 
    display: inline-flex !important;
    align-items: center !important;
    line-height: normal !important; 
    margin: 0 !important; 
}

/* 7. POSISI TOMBOL ACTION */
.hashover-footer { position: relative !important; margin-top: 10px !important; min-height:10px !important; display: flex !important; align-items: center !important; }
.hashover-date-permalink { color: #555566 !important; font-size: 11px !important; text-decoration: none !important; transition: 0.3s !important;margin:5px 15px!important;vertical-align:top!important;}
.hashover-date-permalink:hover { color: var(--np) !important; }

.hashover-buttons { position: absolute !important; right: 4px !important; bottom:4px !important; display: flex !important; gap: 6px !important;}

/* 8. STYLE TOMBOL ACTION */
.hashover-buttons a, .hashover-like, .hashover-comment-reply, .hashover-comment-edit {
    background-image: none !important; background-color: #1a1a24 !important; color: #8b8b99 !important;
    border: 1px solid #2a2a35 !important; border-radius: 20px !important; padding: 4px 12px !important;
    font-size: 11px !important; font-weight: bold !important; text-decoration: none !important; transition: 0.3s !important;
}
.hashover-buttons a:hover { color: var(--np) !important; border-color: var(--np) !important; background-color: #111116 !important; }
.hashover-like:hover, .hashover-liked { color: #ff007f !important; border-color: #ff007f !important; background-color: #300b1a !important; }

/* 9. NAMA DI FORM INPUT */
#hashover-main-name, .hashover-name-input input[name="name"] {
    background: transparent !important; border: none !important; color: var(--np) !important;
    font-weight: 800 !important; font-size: 16px !important; text-shadow: 0 0 8px rgba(0, 173, 255, 0.3) !important; box-shadow: none !important;
}

/* 10. TEXTAREA UTAMA */
.hashover-textarea {
    background: #0b0b0e !important; border: 1px solid #2a2a35 !important; color: #fff !important;
    border-radius: 10px !important; padding: 12px !important; width: 100% !important;
    box-sizing: border-box !important; transition: 0.3s !important;
    min-height: 100px !important; 
}
.hashover-textarea:focus { border-color: var(--np) !important; background-color: #111116 !important; box-shadow: 0 0 0 3px rgba(0, 173, 255, 0.15) !important; outline: none !important; }

/* 11. TOMBOL POST */
.hashover-submit {
    background: linear-gradient(90deg, var(--nc), var(--np)) !important; border-radius: 30px !important; border: none !important;
    padding: 8px 20px !important; font-weight: bold !important; color: #fff !important; cursor: pointer !important;
    transition: 0.3s !important; box-shadow: 0 4px 15px rgba(0, 173, 255, 0.2) !important;
}
.hashover-submit:hover { filter: brightness(1.1) !important; box-shadow: 0 6px 20px rgba(0, 173, 255, 0.5) !important; }

/* ========================================== */
/* 12. PERBAIKAN 'NO COMMENTS YET' (CENTERING)*/
/* ========================================== */
.hashover-notice .hashover-header { justify-content: center !important; margin-bottom: 5px !important; }
.hashover-notice .hashover-avatar { display: none !important; }
.hashover-notice .hashover-comment-name, .hashover-notice .hashover-comment-name a {
    color: #8b8b99 !important; font-size: 14px !important; font-weight: normal !important;
    text-align: center !important; width: 100% !important; text-shadow: none !important; pointer-events: none !important; cursor: default !important;
}
.hashover-notice .hashover-content { text-align: center !important; color: #8b8b99 !important; border: none !important; }
.hashover-form-section{margin-bottom:10px!important;}

/* ========================================== */
/* 13. FIX UKURAN KOLOM REPLY & EDIT  */
/* ========================================== */
.hashover-reply-form .hashover-balloon, 
.hashover-edit-form .hashover-balloon {
    display: flex !important;
    flex-direction: column !important;
    padding-top:5px!important; 
    padding-bottom:0!important;
}
.hashover-reply-form .hashover-textarea, 
.hashover-edit-form .hashover-textarea {
    margin-top: 5px !important; 
    width: 100% !important;
    display: block !important;
}

.hashover-avatar{padding:0!important}
.hashover .hashover-reply > .hashover-balloon .hashover .hashover-reply-form .hashover-balloon{margin-left:0!important;}

.hashover .hashover-comment form .hashover-avatar-image:before,
.hashover .hashover-comment form .hashover-avatar-image:after,
.hashover .hashover-reply .hashover-avatar:before,
.hashover .hashover-reply .hashover-avatar:after{
    display: none !important;
    content: none !important;border:none!important;
    background-image: none !important;
}

.hashover .hashover-comment .hashover-title{margin-left:10px!important}
.hashover .hashover-inputs input{padding:0!important}

/* ========================================== */
/* 14. MODERN TOGGLE SWITCH BELL (GLOBAL)     */
/* ========================================== */
/* Sembunyikan SEMUA Checkbox Asli Sepenuhnya */
.hashover-form-links input[type="checkbox"] {
    display: none !important;
}

/* Badan Switch (Latar Belakang) */
.nax-toggle-switch {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
    background-color: #2a2a35 !important;
    border-radius: 30px !important;
    transition: 0.4s ease !important;
    margin-right: 8px !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5) !important;
    flex-shrink: 0; 
}

/* Lingkaran / Titik Switch */
.nax-toggle-circle {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #8b8b99 !important;
    border-radius: 50% !important;
    transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

/* Ikon SVG Lonceng di dalam Lingkaran */
.nax-toggle-circle svg {
    width: 12px !important;
    height: 12px !important;
    fill:var(--c2)!important; 
    transition: 0.3s !important;
}

/* Animasi saat Checkbox Dicentang (Aktif) */
.hashover-form-links input[type="checkbox"]:checked + .nax-toggle-switch {
    background-color: var(--np) !important; 
}

.hashover-form-links input[type="checkbox"]:checked + .nax-toggle-switch .nax-toggle-circle {
    left: 22px !important; 
    background-color: var(--nc) !important; 
}

/* Efek Berdering */
.hashover-form-links input[type="checkbox"]:checked + .nax-toggle-switch .nax-toggle-circle svg {
    animation: ring 1s ease 1;
}

@keyframes ring {
    0% { transform: rotate(0); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    85% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}
/* ========================================== */
/* 16. HILANGKAN TOMBOL FORMATTING BAWAAN     */
/* ========================================== */
#hashover-main-formatting,
.hashover-formatting {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ======================================================= */
/* 🌌 EFEK BACKGROUND ANIMASI HEADER HASHOVER 🌌 */
/* ======================================================= */

/* 1. Base Setup (Wajib agar animasi tidak tumpah keluar) */
.hashover .hashover-comment > .hashover-header {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important; /* Ujung atas melengkung */
    padding: 12px 15px !important;
    border: 1px solid #2a2a35 !important;
    border-bottom: none !important;
    background-color: #0d0d12 !important; /* Warna fallback */
    z-index: 1 !important;
}

/* 2. Mengamankan teks, tanggal, dan avatar agar tetap di atas background */
.hashover .hashover-comment > .hashover-header > * {
    position: relative !important;
    z-index: 2 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8) !important; /* Agar teks terbaca di bg apapun */
}

/* ======================================================= */
/* 👑 LENCANA VIP PREMIUM ANIMATION (FIXED) 👑 */
/* ======================================================= */
#hashover span.vip-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    border-radius: 20px !important; 
    
    /* Gunakan background-image agar tidak bentrok dengan background-size */
    background-image: linear-gradient(90deg, #ff007f, #7000ff, #00d2ff, #ff007f) !important;
    background-size: 300% 100% !important;
    
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    vertical-align: middle !important;
    
    /* Animasi Mengalir & Berdenyut */
    animation: naxBadgeFlow 3s linear infinite, naxBadgePulse 2s infinite alternate ease-in-out !important;
}

/* Efek Cahaya Kilap (Shine) */
#hashover span.vip-badge::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    /* 🚀 KUNCI: Jangan pakai !important di sini agar keyframes bisa menggerakkannya! */
    left: -100%; 
    width: 50% !important;
    height: 100% !important;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important;
    animation: naxBadgeShine 4s infinite linear !important;
}

/* --- MESIN ANIMASI LENCANA (Tanpa !important) --- */
@keyframes naxBadgeFlow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes naxBadgePulse {
    0% { box-shadow: 0 0 4px rgba(255, 0, 127, 0.5); }
    100% { box-shadow: 0 0 12px rgba(0, 210, 255, 0.8); }
}

@keyframes naxBadgeShine {
    0% { left: -100%; }
    20% { left: 200%; } /* Melintas sangat cepat */
    100% { left: 200%; } /* Diam menunggu putaran berikutnya */
}

/* ======================================================= */
/* 0. BASE SETUP & ANIMASI DEFAULT (NON-VIP V2.1) */
/* ======================================================= */
#hashover .hashover-comment .hashover-header,
#hashover .hashover-header {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 15px !important;
    border: 1px solid #2a2a35 !important;
    border-bottom: none !important;
    z-index: 1 !important;
    background-color: #0b0b12 !important;
    background-image: linear-gradient(-45deg, #0b0b12, #240b24, #12121f, #2d142c) !important;
    background-size: 300% 300% !important;
    animation: naxWaveFluid 6s ease infinite !important;
}

#hashover .hashover-comment .hashover-header > *,
#hashover .hashover-header > * {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.9) !important;
}

/* Base Teks Name untuk Non-VIP (Putih Bersih) */
#hashover .hashover-header .hashover-name-plain,
#hashover .hashover-header .hashover-name-plain a {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: none !important;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8) !important;
}

/* ========================================================= */
        /* 🚀 20 STYLE VISUAL SHOVS TERLENGKAP (HASHOVER NATIVE FIX) */
        /* Mempengaruhi BG, Border Foto, Text Glow & Animasi Mutlak! */
        /* ========================================================= */

        /* 1. CYBER GRID (Pro Gamer Domain) */
        #hashover .hashover-header.bg-cyber-grid, .hologram-header.bg-cyber-grid { 
            background-color: #050505 !important; 
            background-image: linear-gradient(rgba(0,255,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,0.2) 1px, transparent 1px) !important; 
            background-size: 30px 30px !important; 
            animation: naxCyberScanBg 3s linear infinite !important; 
        }
        #hashover .hashover-header.bg-cyber-grid .hashover-comment-name a, .hologram-header.bg-cyber-grid .name-demo { color: #00ffff !important; text-shadow: 0 0 5px #00aaaa !important; animation: naxCyberText 1s infinite alternate !important; font-family: monospace !important;}
        #hashover .hashover-header.bg-cyber-grid .hashover-avatar div, .hologram-header.bg-cyber-grid .propic-demo { border: 2px dashed #00ffff !important; border-radius: 10% !important; animation: naxCyberAvatar 5s linear infinite !important; }

        /* 2. INFERNO (Fallen Hero Relic) */
        #hashover .hashover-header.bg-inferno, .hologram-header.bg-inferno { 
            background-color: #2b0000 !important; 
            background-image: radial-gradient(#ff4500 2px, transparent 2px) !important; 
            background-size: 40px 40px !important; 
            animation: naxInfernoHeat 1s linear infinite !important; 
        }
        #hashover .hashover-header.bg-inferno .hashover-comment-name a, .hologram-header.bg-inferno .name-demo { color: #ffaa00 !important; text-shadow: 0 -3px 10px #ff0000 !important; animation: naxInfernoText 0.1s infinite alternate !important; }
        #hashover .hashover-header.bg-inferno .hashover-avatar div, .hologram-header.bg-inferno .propic-demo { border-bottom: 4px solid #ff4500 !important; border-top: 1px solid #ff0000 !important; animation: naxInfernoAvatar 1.5s infinite alternate !important; }

        /* 3. NEON TOKYO (Anime Multiverse) */
        #hashover .hashover-header.bg-neon-tokyo, .hologram-header.bg-neon-tokyo { 
            background-color: #1a002a !important; 
            background-image: repeating-linear-gradient(45deg, #1a002a, #30004a 10px, #1a002a 20px) !important; 
            background-size: 200% 200% !important; 
            animation: naxNeonFlash 2s linear infinite !important; 
        }
        #hashover .hashover-header.bg-neon-tokyo .hashover-comment-name a, .hologram-header.bg-neon-tokyo .name-demo { color: #ff007f !important; text-shadow: 2px 2px 0 #00d2ff !important; animation: naxNeonText 1.5s infinite !important; }
        #hashover .hashover-header.bg-neon-tokyo .hashover-avatar div, .hologram-header.bg-neon-tokyo .propic-demo { border: 3px double #00d2ff !important; box-shadow: 0 0 15px #ff007f !important; animation: naxNeonAvatar 0.5s infinite alternate !important; }

        /* 4. VOID WALKER (Astral Traveler) */
        #hashover .hashover-header.bg-void-walker, .hologram-header.bg-void-walker { 
            background-color: #050508 !important; 
            background-image: radial-gradient(circle at center, #2a0845 0%, #050508 100%) !important; 
            background-size: 300% 300% !important;
            animation: naxVoidPull 4s infinite alternate ease-in-out !important; 
        }
        #hashover .hashover-header.bg-void-walker .hashover-comment-name a, .hologram-header.bg-void-walker .name-demo { color: #b388ff !important; text-shadow: 0 0 20px #8e2de2 !important; animation: naxVoidText 3s infinite alternate !important; }
        #hashover .hashover-header.bg-void-walker .hashover-avatar div, .hologram-header.bg-void-walker .propic-demo { border: 1px solid #000 !important; box-shadow: 0 0 30px #4a00e0 inset, 0 0 10px #000 !important; animation: naxVoidAvatar 6s infinite linear !important; }

        /* 5. GOLDEN EMPEROR (Aegis Vanguard) */
        #hashover .hashover-header.bg-golden-emperor, .hologram-header.bg-golden-emperor { 
            background-color: #2a2000 !important; 
            background-image: linear-gradient(135deg, #2a2000, #ffdf00, #2a2000) !important; 
            background-size: 300% 300% !important; 
            animation: naxGoldSweep 3s ease-in-out infinite !important; 
        }
        #hashover .hashover-header.bg-golden-emperor .hashover-comment-name a, .hologram-header.bg-golden-emperor .name-demo { color: #ffd700 !important; font-weight: 900 !important; animation: naxGoldText 2s infinite alternate !important; }
        #hashover .hashover-header.bg-golden-emperor .hashover-avatar div, .hologram-header.bg-golden-emperor .propic-demo { border: 3px solid #ffd700 !important; outline: 1px dashed #ffdf00 !important; outline-offset: 3px !important; animation: naxGoldAvatar 4s infinite alternate !important; }

        /* 6. MATRIX RAIN (Digital Phantom) */
        #hashover .hashover-header.bg-matrix-rain, .hologram-header.bg-matrix-rain { 
            background-color: #000 !important; 
            background-image: repeating-linear-gradient(180deg, #000 0%, #002b00 50%, #000 100%) !important; 
            background-size: 100% 50px !important; 
            animation: naxMatrixFall 1s linear infinite !important; 
        }
        #hashover .hashover-header.bg-matrix-rain .hashover-comment-name a, .hologram-header.bg-matrix-rain .name-demo { color: #00ff00 !important; font-family: monospace !important; border-right: 5px solid #00ff00 !important; animation: naxMatrixTextType 0.8s infinite !important;}
        #hashover .hashover-header.bg-matrix-rain .hashover-avatar div, .hologram-header.bg-matrix-rain .propic-demo { border-radius: 0 !important; border: 2px solid #00ff00 !important; filter: contrast(1.5) sepia(1) hue-rotate(80deg) !important; animation: naxMatrixAvatarConsole 2s infinite !important; }

        /* 7. AURORA (Ethereal Horizon) */
        #hashover .hashover-header.bg-aurora, .hologram-header.bg-aurora { 
            background-color: #00223e !important; 
            background-image: linear-gradient(120deg, #00223e, #1d976c, #0072ff) !important; 
            background-size: 300% 300% !important; 
            animation: naxAuroraWave 5s ease infinite alternate !important; 
        }
        #hashover .hashover-header.bg-aurora .hashover-comment-name a, .hologram-header.bg-aurora .name-demo { color: #fff !important; text-shadow: 0 0 10px #1d976c !important; animation: naxAuroraText 4s infinite alternate !important; }
        #hashover .hashover-header.bg-aurora .hashover-avatar div, .hologram-header.bg-aurora .propic-demo { border: 2px solid transparent !important; box-shadow: 0 0 20px #0072ff !important; animation: naxAuroraAvatar 6s infinite linear !important; }

        /* 8. BLOOD MOON (Scarlet Eclipse) */
        #hashover .hashover-header.bg-blood-moon, .hologram-header.bg-blood-moon { 
            background-color: #1a0000 !important; 
            background-image: radial-gradient(circle at center, #8a0303 0%, #1a0000 100%) !important; 
            background-size: 250% 250% !important;
            animation: naxBloodPulse 2s infinite alternate !important; 
        }
        #hashover .hashover-header.bg-blood-moon .hashover-comment-name a, .hologram-header.bg-blood-moon .name-demo { color: #ff0000 !important; text-shadow: 0 3px 2px #550000 !important; animation: naxBloodText 1.5s infinite !important;}
        #hashover .hashover-header.bg-blood-moon .hashover-avatar div, .hologram-header.bg-blood-moon .propic-demo { border: 2px solid #ff0000 !important; border-bottom-width: 6px !important; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important; animation: naxBloodAvatar 1.5s infinite !important; }

        /* 9. THUNDER STORM (Voltaic Tempest) */
        #hashover .hashover-header.bg-thunder-storm, .hologram-header.bg-thunder-storm { 
            background-color: #0f2027 !important; 
            background-image: repeating-linear-gradient(20deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 11px) !important;
            background-size: 100px 100px !important;
            animation: naxThunderStrobe 3s infinite !important; 
        }
        #hashover .hashover-header.bg-thunder-storm .hashover-comment-name a, .hologram-header.bg-thunder-storm .name-demo { color: #fff !important; font-style: italic !important; animation: naxThunderText 3s infinite !important; }
        #hashover .hashover-header.bg-thunder-storm .hashover-avatar div, .hologram-header.bg-thunder-storm .propic-demo { border: 1px solid #fff !important; animation: naxThunderAvatar 0.1s infinite !important; }

        /* 10. SAKURA FALL (Cherry Blossom Oath) */
        #hashover .hashover-header.bg-sakura-fall, .hologram-header.bg-sakura-fall { 
            background-color: #3b1725 !important; 
            background-image: radial-gradient(ellipse at center, #ff9a9e 3px, transparent 3px) !important; 
            background-size: 40px 40px !important; 
            animation: naxSakuraWind 4s linear infinite !important; 
        }
        #hashover .hashover-header.bg-sakura-fall .hashover-comment-name a, .hologram-header.bg-sakura-fall .name-demo { color: #ffb3c6 !important; animation: naxSakuraText 3s infinite ease-in-out !important; display: inline-block !important; }
        #hashover .hashover-header.bg-sakura-fall .hashover-avatar div, .hologram-header.bg-sakura-fall .propic-demo { border: 3px dashed #ff9a9e !important; animation: naxSakuraAvatar 15s linear infinite !important; }

        /* 11. MECHA CORE (Titan Engine) */
        #hashover .hashover-header.bg-mecha-core, .hologram-header.bg-mecha-core { 
            background-color: #1f1f1f !important; 
            background-image: repeating-linear-gradient(45deg, #1f1f1f, #1f1f1f 10px, #333 10px, #333 20px) !important; 
            background-size: 50px 50px !important; 
            animation: naxMechaPiston 1.5s infinite steps(4) !important; 
        }
        #hashover .hashover-header.bg-mecha-core .hashover-comment-name a, .hologram-header.bg-mecha-core .name-demo { color: #ff4500 !important; font-weight: 900 !important; text-transform: uppercase !important; animation: naxMechaText 2s infinite steps(2) !important; }
        #hashover .hashover-header.bg-mecha-core .hashover-avatar div, .hologram-header.bg-mecha-core .propic-demo { border-radius: 15% !important; border: 4px solid #555 !important; border-top: 4px solid #ff4500 !important; animation: naxMechaAvatar 1s infinite alternate steps(3) !important; }

        /* 12. ABYSSAL DEPTHS (Leviathan Trench) */
        #hashover .hashover-header.bg-abyssal-depths, .hologram-header.bg-abyssal-depths { 
            background-color: #000428 !important; 
            background-image: linear-gradient(180deg, #004e92, #000428) !important; 
            background-size: 100% 300% !important; 
            animation: naxAbyssCurrent 6s ease-in-out infinite alternate !important; 
        }
        #hashover .hashover-header.bg-abyssal-depths .hashover-comment-name a, .hologram-header.bg-abyssal-depths .name-demo { color: #00ffff !important; opacity: 0.8 !important; animation: naxAbyssText 4s infinite ease-in-out !important; display: inline-block !important;}
        #hashover .hashover-header.bg-abyssal-depths .hashover-avatar div, .hologram-header.bg-abyssal-depths .propic-demo { border: 2px solid transparent !important; box-shadow: 0 10px 20px rgba(0,255,255,0.2) !important; animation: naxAbyssAvatar 5s infinite ease-in-out !important; }

        /* 13. HOLY LIGHT (Divine Retribution) */
        #hashover .hashover-header.bg-holy-light, .hologram-header.bg-holy-light { 
            background-color: #f8f9d2 !important; 
            background-image: radial-gradient(circle at center, #fff 0%, #f8f9d2 100%) !important; 
            background-size: 250% 250% !important;
            animation: naxHolyRays 3s infinite alternate !important; 
        }
        #hashover .hashover-header.bg-holy-light .hashover-comment-name a, .hologram-header.bg-holy-light .name-demo { color: #8a6d00 !important; font-weight: 900 !important; animation: naxHolyText 2s infinite alternate !important; }
        #hashover .hashover-header.bg-holy-light .hashover-avatar div, .hologram-header.bg-holy-light .propic-demo { border: 3px solid #fff !important; box-shadow: 0 0 20px #ffd700 !important; animation: naxHolyAvatar 4s infinite alternate ease-in-out !important; }

        /* 14. TOXIC SLUDGE (Corrosive Wasteland) */
        #hashover .hashover-header.bg-toxic-sludge, .hologram-header.bg-toxic-sludge { 
            background-color: #0a1f0a !important; 
            background-image: linear-gradient(0deg, #0a1f0a, #1a3a1a) !important; 
            background-size: 100% 300% !important;
            animation: naxToxicMelt 4s infinite alternate !important; 
            border-bottom: 2px solid #b2ff59 !important;
        }
        #hashover .hashover-header.bg-toxic-sludge .hashover-comment-name a, .hologram-header.bg-toxic-sludge .name-demo { color: #b2ff59 !important; text-shadow: 0 2px 2px #43a047 !important; animation: naxToxicText 2s infinite alternate !important;}
        #hashover .hashover-header.bg-toxic-sludge .hashover-avatar div, .hologram-header.bg-toxic-sludge .propic-demo { border: 2px solid #43a047 !important; animation: naxToxicAvatar 3s infinite alternate ease-in-out !important; }

        /* 15. COSMIC DUST (Nebula Drifter) */
        #hashover .hashover-header.bg-cosmic-dust, .hologram-header.bg-cosmic-dust { 
            background-color: #0b0d17 !important; 
            background-image: radial-gradient(white 1px, transparent 1px) !important; 
            background-size: 50px 50px !important; 
            animation: naxCosmicFloat 15s linear infinite !important; 
        }
        #hashover .hashover-header.bg-cosmic-dust .hashover-comment-name a, .hologram-header.bg-cosmic-dust .name-demo { color: #e2e8f0 !important; letter-spacing: 4px !important; animation: naxCosmicText 5s infinite alternate !important; }
        #hashover .hashover-header.bg-cosmic-dust .hashover-avatar div, .hologram-header.bg-cosmic-dust .propic-demo { border: 1px dotted rgba(255,255,255,0.5) !important; animation: naxCosmicAvatar 8s infinite linear !important; }

        /* 16. PHANTOM ASSASSIN (Rogue Syndicate) - Fokus: DIZZY & GHOSTING */
        #hashover .hashover-header.bg-phantom-assassin, .hologram-header.bg-phantom-assassin { 
            background-color: #020204 !important; 
            background-image: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%) !important; 
            background-size: 250% 250% !important;
            animation: naxDizzyBg 0.15s infinite !important; 
        }
        #hashover .hashover-header.bg-phantom-assassin .hashover-comment-name a, .hologram-header.bg-phantom-assassin .name-demo { color: #8b8b99 !important; text-shadow: 2px 0 0 rgba(255,0,77,0.8), -2px 0 0 rgba(0,255,204,0.8) !important; animation: naxDizzyText 0.1s infinite !important; font-style: italic !important;}
        #hashover .hashover-header.bg-phantom-assassin .hashover-avatar div, .hologram-header.bg-phantom-assassin .propic-demo { border: 2px solid transparent !important; box-shadow: -4px 0 15px rgba(255,0,77,0.9), 4px 0 15px rgba(0,255,204,0.9) !important; filter: grayscale(0.7) blur(0.5px) !important; animation: naxDizzyAvatar 0.15s infinite !important; }

        /* 17. CELESTIAL SANCTUARY (Olympian Zenith) - Fokus: SHINE & DIVINE GLOW */
        #hashover .hashover-header.bg-celestial-sanctuary, .hologram-header.bg-celestial-sanctuary { 
            background-color: #fffaf0 !important;
            background-image: linear-gradient(135deg, #fffaf0 25%, #ffeaa7 50%, #fffaf0 75%) !important; 
            background-size: 300% 300% !important; 
            box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.5) !important; 
            animation: naxDivineShine 3s infinite linear !important; 
        }
        #hashover .hashover-header.bg-celestial-sanctuary .hashover-comment-name a, .hologram-header.bg-celestial-sanctuary .name-demo { color: #d4af37 !important; text-shadow: 0 0 10px #fff, 0 0 20px #ffd700, 0 0 35px #ffdf00 !important; font-weight: 900 !important; letter-spacing: 1px !important; animation: naxDivineGlowText 2s infinite alternate !important; }
        #hashover .hashover-header.bg-celestial-sanctuary .hashover-avatar div, .hologram-header.bg-celestial-sanctuary .propic-demo { border: 3px solid #fff !important; box-shadow: 0 0 30px #ffd700, 0 0 50px #fff !important; animation: naxDivineFloat 4s ease-in-out infinite !important; }

        /* 18. GLITCH MATRIX (Paradox Anomaly) - Fokus: EXTREME GLITCH */
        #hashover .hashover-header.bg-glitch-matrix, .hologram-header.bg-glitch-matrix { 
            background-color: #050508 !important;
            background-image: repeating-linear-gradient(0deg, #050508, #050508 4px, #001f00 5px, #001f00 9px) !important; 
            background-size: 100% 200% !important; 
            animation: naxMatrixJumpBg 0.5s infinite !important; 
        }
        #hashover .hashover-header.bg-glitch-matrix .hashover-comment-name a, .hologram-header.bg-glitch-matrix .name-demo { color: #fff !important; text-shadow: 3px 2px 0 #ff007f, -3px -2px 0 #00ffcc !important; font-family: monospace !important; animation: naxMatrixTextGlitch 0.3s infinite !important; }
        #hashover .hashover-header.bg-glitch-matrix .hashover-avatar div, .hologram-header.bg-glitch-matrix .propic-demo { border-radius: 0 !important; border: 2px solid #00ffcc !important; border-right: 5px solid #ff007f !important; animation: naxMatrixAvatarGlitch 0.4s infinite !important; }

        /* 19. VENOMOUS SWAMP (Basilisk Lair) - Fokus: Pupil Ular & Racun */
        #hashover .hashover-header.bg-venomous-swamp, .hologram-header.bg-venomous-swamp { 
            background-color: #0a1100 !important;
            background-image: radial-gradient(ellipse at center, #1a3300 0%, #0a1100 100%) !important; 
            background-size: 300% 300% !important;
            animation: naxVenomBreathe 4s infinite alternate !important; 
        }
        #hashover .hashover-header.bg-venomous-swamp .hashover-comment-name a, .hologram-header.bg-venomous-swamp .name-demo { color: #33cc33 !important; text-shadow: 0 0 10px #99ff33 !important; animation: naxVenomText 2s infinite alternate !important; }
        #hashover .hashover-header.bg-venomous-swamp .hashover-avatar div, .hologram-header.bg-venomous-swamp .propic-demo { border: 2px solid #33cc33 !important; border-radius: 50% 10% 50% 10% !important; box-shadow: inset 0 0 15px #99ff33 !important; animation: naxVenomAvatar 3s infinite alternate !important; }

        /* 20. STARLIGHT SUPERNOVA (Galactic Burst) - Fokus: Ledakan Bintang Expansi */
        #hashover .hashover-header.bg-starlight-supernova, .hologram-header.bg-starlight-supernova { 
            background-color: #050010 !important;
            background-image: radial-gradient(circle at center, #ff007f 0%, #2a0066 50%, #050010 100%) !important; 
            background-size: 300% 300% !important; 
            animation: naxSupernovaBurst 2s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1) !important; 
        }
        #hashover .hashover-header.bg-starlight-supernova .hashover-comment-name a, .hologram-header.bg-starlight-supernova .name-demo { color: #fff !important; text-shadow: 0 0 10px #00d2ff, 0 0 20px #ff007f !important; animation: naxSupernovaText 0.5s infinite alternate !important; }
        #hashover .hashover-header.bg-starlight-supernova .hashover-avatar div, .hologram-header.bg-starlight-supernova .propic-demo { border: 3px solid #ff007f !important; box-shadow: 0 0 30px #00d2ff !important; animation: naxSupernovaAvatar 1s infinite alternate !important; }

        /* ========================================================= */
        /* ⚙️ 20 MESIN KEYFRAMES MUTLAK (ANTI MATI) ⚙️                */
        /* ========================================================= */
        
        @keyframes naxWaveFluid { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        /* 1. Cyber */
        @keyframes naxCyberScanBg { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }
        @keyframes naxCyberText { 0% { opacity: 0.8; } 100% { opacity: 1; text-shadow: 0 0 15px #00ffff; } }
        @keyframes naxCyberAvatar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* 2. Inferno */
        @keyframes naxInfernoHeat { 0% { background-position: 0 0; } 100% { background-position: 10px 40px; } }
        @keyframes naxInfernoText { 0% { transform: translateY(0); opacity: 0.9; } 100% { transform: translateY(-1px); opacity: 1; } }
        @keyframes naxInfernoAvatar { 0% { box-shadow: 0 5px 10px #ff0000; } 100% { box-shadow: 0 10px 20px #ff4500; } }

        /* 3. Neon Tokyo */
        @keyframes naxNeonFlash { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } }
        @keyframes naxNeonText { 0%, 100% { text-shadow: 2px 2px 0 #00d2ff; } 50% { text-shadow: -2px -2px 0 #ff007f; } }
        @keyframes naxNeonAvatar { 0% { filter: drop-shadow(0 0 5px #00d2ff); } 100% { filter: drop-shadow(0 0 10px #ff007f); } }

        /* 4. Void Walker */
        @keyframes naxVoidPull { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
        @keyframes naxVoidText { 0% { letter-spacing: 0px; } 100% { letter-spacing: 3px; } }
        @keyframes naxVoidAvatar { 0% { transform: scale(1); box-shadow: 0 0 20px #4a00e0 inset; } 50% { transform: scale(0.9); box-shadow: 0 0 40px #8e2de2 inset; } 100% { transform: scale(1); box-shadow: 0 0 20px #4a00e0 inset; } }

        /* 5. Golden Emperor */
        @keyframes naxGoldSweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes naxGoldText { 0% { filter: brightness(1); } 100% { filter: brightness(1.5); text-shadow: 0 0 20px #fff; } }
        @keyframes naxGoldAvatar { 0% { outline-offset: 2px; } 100% { outline-offset: 6px; border-color: #fff; } }

        /* 6. Matrix Rain */
        @keyframes naxMatrixFall { 0% { background-position: 0 0; } 100% { background-position: 0 50px; } }
        @keyframes naxMatrixTextType { 0%, 49% { border-right-color: transparent; } 50%, 100% { border-right-color: #00ff00; } }
        @keyframes naxMatrixAvatarConsole { 0% { box-shadow: inset 0 0 5px #00ff00; } 100% { box-shadow: inset 0 0 20px #00ff00; } }

        /* 7. Aurora */
        @keyframes naxAuroraWave { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
        @keyframes naxAuroraText { 0% { opacity: 0.7; } 100% { opacity: 1; text-shadow: 0 0 15px #1d976c; } }
        @keyframes naxAuroraAvatar { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

        /* 8. Blood Moon */
        @keyframes naxBloodPulse { 0% { background-position: 0% 0%; filter: contrast(1); } 100% { background-position: 100% 100%; filter: contrast(1.5); } }
        @keyframes naxBloodText { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.05); } 30% { transform: scale(1.1); text-shadow: 0 5px 5px #ff0000; } }
        @keyframes naxBloodAvatar { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.02); } 30% { transform: scale(1.08); box-shadow: 0 0 20px #ff0000; } }

        /* 9. Thunder Storm */
        @keyframes naxThunderStrobe { 0%, 93%, 96%, 100% { background-color: #0f2027; filter: brightness(1); } 94%, 98% { background-color: #fff; filter: brightness(2) contrast(1.5) invert(0.2); } }
        @keyframes naxThunderText { 0%, 93%, 100% { transform: translate(0,0); } 94% { transform: translate(-2px, 2px) skewX(10deg); color: #fff; } 98% { transform: translate(2px, -2px) skewX(-10deg); color: #00adff; } }
        @keyframes naxThunderAvatar { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1px); filter: brightness(1.2); } }

        /* 10. Sakura Fall */
        @keyframes naxSakuraWind { 0% { background-position: 0 0; } 100% { background-position: 100px 50px; } }
        @keyframes naxSakuraText { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
        @keyframes naxSakuraAvatar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* 11. Mecha Core */
        @keyframes naxMechaPiston { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }
        @keyframes naxMechaText { 0% { transform: translateY(0); } 100% { transform: translateY(2px); } }
        @keyframes naxMechaAvatar { 0% { transform: translateY(0); border-top-color: #ff4500; } 100% { transform: translateY(3px); border-top-color: #ff0000; } }

        /* 12. Abyssal Depths */
        @keyframes naxAbyssCurrent { 0% { background-position: 50% 0%; } 100% { background-position: 50% 100%; } }
        @keyframes naxAbyssText { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
        @keyframes naxAbyssAvatar { 0%, 100% { transform: translateY(0); border-radius: 50%; } 50% { transform: translateY(-5px); border-radius: 40% 60% 50% 50%; } }

        /* 13. Holy Light */
        @keyframes naxHolyRays { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
        @keyframes naxHolyText { 0% { opacity: 0.8; } 100% { opacity: 1; text-shadow: 0 0 15px #fff; } }
        @keyframes naxHolyAvatar { 0% { box-shadow: 0 0 10px #ffd700; } 100% { box-shadow: 0 0 40px #fff; } }

        /* 14. Toxic Sludge */
        @keyframes naxToxicMelt { 0% { background-position: 50% 0%; } 100% { background-position: 50% 100%; } }
        @keyframes naxToxicText { 0% { transform: scaleY(1); } 100% { transform: scaleY(1.1) translateY(1px); color: #fff; } }
        @keyframes naxToxicAvatar { 0% { border-radius: 50%; } 100% { border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%; box-shadow: 0 10px 10px rgba(178, 255, 89, 0.4); } }

        /* 15. Cosmic Dust */
        @keyframes naxCosmicFloat { 0% { background-position: 0 0; } 100% { background-position: -100px -100px; } }
        @keyframes naxCosmicText { 0% { letter-spacing: 2px; opacity: 0.8; } 100% { letter-spacing: 6px; opacity: 1; } }
        @keyframes naxCosmicAvatar { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.9); } 100% { transform: rotate(360deg) scale(1); } }

        /* 16. Phantom Assassin (DIZZY) */
        @keyframes naxDizzyBg { 0% { background-position: 0% 0%; } 25% { background-position: 2% 2%; } 50% { background-position: -2% -2%; } 75% { background-position: -2% 2%; } 100% { background-position: 2% -2%; } }
        @keyframes naxDizzyText { 0%, 100% { transform: skewX(0deg); opacity: 1; } 50% { transform: skewX(-15deg); opacity: 0.8; text-shadow: -2px 0 0 rgba(255,0,77,1), 2px 0 0 rgba(0,255,204,1) !important; } }
        @keyframes naxDizzyAvatar { 0%, 100% { transform: translate(0, 0); box-shadow: -4px 0 15px rgba(255,0,77,0.9), 4px 0 15px rgba(0,255,204,0.9) !important; } 50% { transform: translate(2px, -2px); box-shadow: 4px 0 15px rgba(255,0,77,0.9), -4px 0 15px rgba(0,255,204,0.9) !important; } }

        /* 17. Celestial Sanctuary (SHINE & GLOW) */
        @keyframes naxDivineShine { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
        @keyframes naxDivineGlowText { 0% { text-shadow: 0 0 10px #fff, 0 0 20px #ffd700; filter: brightness(1); } 100% { text-shadow: 0 0 20px #fff, 0 0 40px #ffd700, 0 0 60px #ffdf00; filter: brightness(1.3); } }
        @keyframes naxDivineFloat { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 30px #ffd700, 0 0 50px #fff !important; } 50% { transform: translateY(-4px) scale(1.05); box-shadow: 0 0 50px #ffd700, 0 0 80px #fff !important; } }

        /* 18. Glitch Matrix (PARADOX GLITCH) */
        @keyframes naxMatrixJumpBg { 0%, 90% { background-position: 0px 0px; filter: hue-rotate(0deg); } 95% { background-position: 0px 50px; filter: hue-rotate(90deg); } 100% { background-position: 0px -50px; filter: hue-rotate(0deg); } }
        @keyframes naxMatrixTextGlitch { 0%, 80%, 100% { transform: translate(0, 0); opacity: 1; } 85% { transform: translate(-3px, 2px); opacity: 0.8; color: #00ffcc !important; } 90% { transform: translate(3px, -2px); opacity: 0.9; color: #ff007f !important; } }
        @keyframes naxMatrixAvatarGlitch { 0%, 100% { transform: scale(1) skewX(0); border-color: #00ffcc !important; border-right-color: #ff007f !important; } 20% { transform: scale(0.95) skewX(10deg); border-color: #ff007f !important; border-top-color: #00ffcc !important; filter: hue-rotate(90deg); } 40% { transform: scale(1.05) skewX(-10deg); border-color: #fff !important; } }

        /* 19. Venomous Swamp */
        @keyframes naxVenomBreathe { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
        @keyframes naxVenomText { 0% { letter-spacing: 0; } 100% { letter-spacing: 1px; color: #fff; text-shadow: 0 0 15px #33cc33; } }
        @keyframes naxVenomAvatar { 0% { border-radius: 50% 10% 50% 10%; transform: scale(1); } 100% { border-radius: 10% 50% 10% 50%; transform: scale(1.05); box-shadow: inset 0 0 30px #99ff33; } }

        /* 20. Starlight Supernova */
        @keyframes naxSupernovaBurst { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
        @keyframes naxSupernovaText { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.05); opacity: 1; text-shadow: 0 0 20px #fff; } }
        @keyframes naxSupernovaAvatar { 0% { box-shadow: 0 0 10px #00d2ff; } 100% { box-shadow: 0 0 40px #ff007f, 0 0 20px #fff inset; } }

/* --- CHAT BUBBLES RESTORED --- */

        .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; background: #111116; padding: 15px; border-radius: 12px; border: 1px solid #2a2a35; }
        
        /* 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; }

        .name-wrapper {
            position: relative;
            display: inline-block;
            z-index: 10;
        }

        /* ========================================== */
        /* ✨ KOSMETIK NAMA PROFIL (TEXT EFFECTS)     */
        /* ========================================== */

        /* 0. DEFAULT STYLE (Simple but Cool) */
        .nc-default {
            background: linear-gradient(110deg, #ffffff 30%, #00e5ff 50%, #ffffff 70%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            letter-spacing: 1px;
            margin: 0;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
            animation: defaultShine 3s linear infinite;
        }
        @keyframes defaultShine {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        /* 1. nc-anime-protagonist (Aura Super Saiyan / MC) */
        .nc-anime-protagonist {
            background: linear-gradient(0deg, #ff9900, #fffa65, #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.6);
            animation: animeAuraPulse 1.5s infinite alternate;
        }
        @keyframes animeAuraPulse {
            0% { filter: drop-shadow(0 0 2px #ffcc00) drop-shadow(0 -5px 15px #ff6600); transform: scale(1); }
            100% { filter: drop-shadow(0 0 8px #ffeeaa) drop-shadow(0 -15px 25px #ff3300); transform: scale(1.02); }
        }

        /* 2. nc-gamer-overdrive (RGB Keyboard Flow) */
        .nc-gamer-overdrive {
            background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            animation: gamerRGB 2.5s linear infinite;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
        }
        @keyframes gamerRGB {
            to { background-position: 200% center; }
        }

        /* 3. nc-demon-lord (Darkness & Blood Pulse) */
        .nc-demon-lord {
            color: #cc0000;
            font-weight: 900;
            letter-spacing: 2px;
            text-shadow: 2px 2px 0px #000, 0 0 10px #ff0000, 0 0 20px #990000;
            animation: demonHeartbeat 1.2s infinite ease-in-out;
        }
        @keyframes demonHeartbeat {
            0%, 100% { text-shadow: 2px 2px 0px #000, 0 0 5px #ff0000, 0 0 15px #660000; transform: scale(1); }
            15% { text-shadow: 3px 3px 0px #000, 0 0 20px #ff0000, 0 0 40px #ff3333; transform: scale(1.05); }
            30% { text-shadow: 2px 2px 0px #000, 0 0 5px #ff0000, 0 0 15px #660000; transform: scale(1); }
            45% { text-shadow: 3px 3px 0px #000, 0 0 15px #ff0000, 0 0 30px #ff3333; transform: scale(1.03); }
        }

        /* 4. nc-space-nebula (Deep Cosmic Flow) */
        .nc-space-nebula {
            background: linear-gradient(270deg, #0f2027, #203a43, #2c5364, #8a2387, #e94057, #f27121);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            animation: nebulaDrift 6s ease infinite;
            filter: drop-shadow(0 0 10px rgba(138, 35, 135, 0.5));
        }
        @keyframes nebulaDrift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 5. nc-sci-fi-hologram (Cyber Flicker) */
        .nc-sci-fi-hologram {
            color: #00f3ff;
            font-weight: 900;
            text-shadow: 0 0 5px #00f3ff, 0 0 10px #00f3ff;
            animation: holoFlicker 2s infinite;
        }
        @keyframes holoFlicker {
            0%, 100% { opacity: 1; text-shadow: 0 0 5px #00f3ff, 0 0 10px #00f3ff; }
            90% { opacity: 1; }
            91% { opacity: 0.6; text-shadow: none; transform: skewX(10deg); }
            92% { opacity: 1; transform: skewX(0deg); }
            95% { opacity: 0.8; transform: skewX(-5deg); }
            96% { opacity: 1; transform: skewX(0deg); }
        }
        /* 6. nc-isekai-traveler (Magical Summoning Glow) */
        .nc-isekai-traveler {
            background: linear-gradient(90deg, #fff, #ffd700, #fff, #ffeb85);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 30px rgba(255, 255, 255, 0.6);
            animation: isekaiSummon 3s linear infinite;
        }
        @keyframes isekaiSummon {
            0% { background-position: 0% center; filter: drop-shadow(0 0 5px #ffd700); }
            50% { filter: drop-shadow(0 0 15px #fff); }
            100% { background-position: 200% center; filter: drop-shadow(0 0 5px #ffd700); }
        }

        /* 7. nc-fantasy-mage (Arcane Energy) */
        .nc-fantasy-mage {
            background: linear-gradient(270deg, #00ffcc, #7b2cbf, #9d4edd, #00ffcc);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            animation: arcaneMagic 4s ease infinite;
            filter: drop-shadow(0 0 8px rgba(123, 44, 191, 0.7));
        }
        @keyframes arcaneMagic {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 8. nc-hero-blade (Holy Silver & Blue Glow) */
        .nc-hero-blade {
            color: #e0eaf5;
            font-weight: 900;
            background: linear-gradient(110deg, #e0eaf5 10%, #ffffff 30%, #a4bada 40%, #e0eaf5 60%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 8px rgba(0, 153, 255, 0.8), 0 0 15px rgba(0, 153, 255, 0.4);
            animation: heroShine 2.5s linear infinite;
        }
        @keyframes heroShine {
            to { background-position: -200% center; }
        }

        /* 9. nc-sun-breather (Solar Flare / Slayer) */
        .nc-sun-breather {
            background: linear-gradient(0deg, #ff0000 0%, #ff7f00 40%, #ffff00 80%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            text-shadow: 0 -3px 8px rgba(255, 69, 0, 0.8);
            animation: solarFlare 2s infinite alternate;
        }
        @keyframes solarFlare {
            0% { filter: drop-shadow(0 -2px 10px #ff0000); transform: translateY(0px); }
            100% { filter: drop-shadow(0 -8px 25px #ffaa00); transform: translateY(-1px); }
        }

        /* 10. nc-mecha-pilot (Steel with Red Visor Sweep) */
        .nc-mecha-pilot {
            background: linear-gradient(90deg, #555 0%, #888 45%, #ff0000 50%, #888 55%, #555 100%);
            background-size: 300% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            text-shadow: 0 0 2px #000;
            animation: mechaScan 3s infinite;
        }
        @keyframes mechaScan {
            0% { background-position: -50% center; filter: drop-shadow(0 0 0px transparent); }
            50% { filter: drop-shadow(0 0 10px #ff0000); }
            100% { background-position: 150% center; filter: drop-shadow(0 0 0px transparent); }
        }
        /* 11. nc-abyssal-lord (Void & Deep Sea/Space) */
        .nc-abyssal-lord {
            color: #0b0c10;
            font-weight: 900;
            text-shadow: 0 0 5px #45a29e, 0 0 15px #66fcf1, 0 0 30px #1f2833;
            animation: abyssBreathe 4s infinite alternate ease-in-out;
        }
        @keyframes abyssBreathe {
            0% { filter: hue-rotate(0deg) drop-shadow(0 0 2px #45a29e); transform: scale(0.98); }
            100% { filter: hue-rotate(45deg) drop-shadow(0 0 15px #66fcf1); transform: scale(1.02); }
        }

        /* 12. nc-valkyrie-wings (Angelic Gold & Pink) */
        .nc-valkyrie-wings {
            background: linear-gradient(135deg, #fff, #ffb6c1, #ffd700, #fff);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            text-shadow: 0 -2px 10px rgba(255, 182, 193, 0.7);
            animation: valkyrieFlap 3s ease infinite;
        }
        @keyframes valkyrieFlap {
            0% { background-position: 0% 50%; filter: drop-shadow(0 -5px 15px #ffd700); }
            50% { background-position: 100% 50%; filter: drop-shadow(0 5px 25px #ffb6c1); }
            100% { background-position: 0% 50%; filter: drop-shadow(0 -5px 15px #ffd700); }
        }

        /* 13. nc-cyber-ninja (Toxic Green Neon Slashes) */
        .nc-cyber-ninja {
            color: #fff;
            font-weight: 900;
            font-style: italic;
            text-shadow: -3px 3px 0px #000, 3px -3px 0px #39ff14, 0 0 10px #39ff14;
            animation: ninjaDash 1.5s infinite steps(2, end);
        }
        @keyframes ninjaDash {
            0%, 100% { transform: skewX(-15deg); text-shadow: -3px 3px 0px #000, 3px -3px 0px #39ff14, 0 0 10px #39ff14; }
            50% { transform: skewX(5deg); text-shadow: 3px -3px 0px #000, -3px 3px 0px #39ff14, 0 0 20px #39ff14; }
        }

        /* 14. nc-pixel-artisan (8-Bit Retro Shift) */
        .nc-pixel-artisan {
            color: #fceea7;
            font-weight: 900;
            text-transform: uppercase;
            text-shadow: 2px 2px 0 #388273, 4px 4px 0 #1f423f, 6px 6px 0 #0f1c1a;
            animation: retroBlink 1s infinite steps(1);
        }
        @keyframes retroBlink {
            0% { color: #fceea7; text-shadow: 2px 2px 0 #388273, 4px 4px 0 #1f423f; }
            25% { color: #ff9999; text-shadow: -2px 2px 0 #cc0000, -4px 4px 0 #660000; }
            50% { color: #99ccff; text-shadow: -2px -2px 0 #0066cc, -4px -4px 0 #003366; }
            75% { color: #99ff99; text-shadow: 2px -2px 0 #00cc00, 4px -4px 0 #006600; }
        }

        /* 15. nc-time-traveler (Chrono Rewind) */
        .nc-time-traveler {
            background: linear-gradient(90deg, #b3cdd1 0%, #9fa4c4 50%, #74ebd5 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            letter-spacing: -1px;
            animation: timeLeap 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        @keyframes timeLeap {
            0%, 100% { background-position: 0% 50%; letter-spacing: -1px; filter: blur(0px) drop-shadow(0 0 2px #74ebd5); }
            50% { background-position: 100% 50%; letter-spacing: 3px; filter: blur(2px) drop-shadow(0 0 15px #9fa4c4); }
        }
        /* 16. nc-ghost-phantom (Ethereal Spirit) */
        .nc-ghost-phantom {
            color: rgba(255, 255, 255, 0.7);
            font-weight: 900;
            text-shadow: 0 -5px 15px rgba(200, 200, 255, 0.4), 0 5px 15px rgba(200, 200, 255, 0.2);
            animation: phantomFloat 4s infinite ease-in-out;
        }
        @keyframes phantomFloat {
            0%, 100% { opacity: 0.7; transform: translateY(0) scale(1); filter: blur(0px); text-shadow: 0 -5px 15px rgba(200, 200, 255, 0.4); }
            50% { opacity: 0.4; transform: translateY(-3px) scale(0.98); filter: blur(1px); text-shadow: 0 -15px 25px rgba(200, 200, 255, 0.8); }
        }

        /* 17. nc-blood-emperor (Liquid Crimson) */
        .nc-blood-emperor {
            color: #4a0000;
            font-weight: 900;
            text-shadow: 0 0 2px #ff0000;
            animation: bloodDrip 2s infinite;
        }
        @keyframes bloodDrip {
            0% { text-shadow: 0 0 2px #ff0000, 0 2px 5px #aa0000; }
            50% { text-shadow: 0 0 2px #ff0000, 0 10px 15px #660000, 0 15px 20px transparent; }
            100% { text-shadow: 0 0 2px #ff0000, 0 2px 5px #aa0000; }
        }

        /* 18. nc-galactic-starburst (Supernova) */
        .nc-galactic-starburst {
            color: #ffffff;
            font-weight: 900;
            text-shadow: 0 0 10px #fff, 0 0 20px #0ff, 0 0 30px #f0f;
            animation: starBurst 1.5s infinite;
        }
        @keyframes starBurst {
            0% { text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 15px #f0f; transform: scale(1); }
            10% { text-shadow: 0 0 20px #fff, 0 0 40px #0ff, 0 0 60px #f0f; transform: scale(1.05); }
            30%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 15px #f0f; transform: scale(1); }
        }

        /* 19. nc-emerald-dragon (Jade Scales) */
        .nc-emerald-dragon {
            background: linear-gradient(135deg, #003300, #00ff00, #009933, #00ff66, #003300);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            text-shadow: 0 2px 2px rgba(0,0,0,0.8);
            animation: dragonSlither 5s infinite linear;
        }
        @keyframes dragonSlither {
            0% { background-position: 0% 0%; }
            100% { background-position: 100% 100%; }
        }

        /* 20. nc-anime-god (Divine Ultimate) */
        .nc-anime-god {
            color: #ffea00;
            font-weight: 900;
            text-transform: uppercase;
            text-shadow: 0 0 10px #ffea00, 0 0 20px #ffaa00, 0 0 40px #ff00aa, 0 0 60px #00aaff;
            animation: godAura 4s infinite alternate ease-in-out;
        }
        @keyframes godAura {
            0% { text-shadow: 0 0 5px #ffea00, 0 0 15px #ffaa00, 0 0 30px #ff00aa, 0 0 45px #00aaff; filter: hue-rotate(0deg); }
            100% { text-shadow: 0 0 15px #ffea00, 0 0 35px #ffaa00, 0 0 60px #ff00aa, 0 0 90px #00aaff; filter: hue-rotate(30deg); }
        }