:root {
            --neon: #0f0;
            --neon-dim: #008F11;
            --glitch-red: #ff003c;
            --glitch-blue: #00f0ff;
            --bg-color: #050505;
            --glass: rgba(0, 15, 0, 0.78);
            --font-main: 'Share Tech Mono', monospace;

               --premium-white: #ffffff;
              --cyan-ringan: #b3ffff;
            --premium-silver: #c7ccd1;
            --premium-silver-dim: #8b9197;
            --premium-platinum: #e4e7eb;
            --premium-gold: #d9c089;
            --premium-glass: rgba(20, 22, 26, 0.78);
            --premium-shadow: rgba(199, 204, 209, 0.25);
            --premium-gradient: linear-gradient(135deg, var(--premium-white) 0%, var(--premium-silver) 50%, var(--premium-platinum) 100%);
        }

        .typing-cursor::after {
            content: '‎ '; 
            display: inline-block;
            margin-left: 2px;
            color: var(--neon);
            animation: blink-cursor 0.4s step-end infinite;
        }
        @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; cursor: crosshair; }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #000; }
        ::-webkit-scrollbar-thumb { background: var(--neon-dim); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--neon); }

        body {
            margin: 0; padding: 0;
            background-color: var(--bg-color);
            color: var(--neon);
            font-family: var(--font-main);
            overflow-x: hidden; 
            min-height: 100vh;
            font-size: 16px;
            transition: color 0.3s ease-in-out;
        }

        canvas#matrix-bg { 
            position: fixed; 
            top: 0; left: 0; width: 100%; height: 100%; 
            z-index: -2; opacity: 0.85; pointer-events: none;
        }
        .scanlines { display: none; } 

        .glitch-wrapper { position: relative; display: inline-block; }
        .glitch {
            position: relative; color: var(--neon); font-size: 2rem; 
            letter-spacing: 3px; font-weight: bold; text-transform: uppercase;
            transition: color 0.5s;
        }
        .glitch::before, .glitch::after {
            content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-color);
        }
        .glitch::before {
            left: 2px; text-shadow: -1px 0 var(--glitch-red); clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }
        .glitch::after {
            left: -2px; text-shadow: -1px 0 var(--glitch-blue); clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2.5s infinite linear alternate-reverse;
        }

        @keyframes glitch-anim {
            0% { clip: rect(10px, 9999px, 30px, 0); transform: skew(0.5deg); }
            20% { clip: rect(80px, 9999px, 100px, 0); transform: skew(0.3deg); }
            40% { clip: rect(10px, 9999px, 80px, 0); transform: skew(0.8deg); }
            60% { clip: rect(50px, 9999px, 20px, 0); transform: skew(0.2deg); }
            80% { clip: rect(20px, 9999px, 90px, 0); transform: skew(0.6deg); }
            100% { clip: rect(90px, 9999px, 10px, 0); transform: skew(0.4deg); }
        }
        @keyframes glitch-anim-2 {
            0% { clip: rect(60px, 9999px, 10px, 0); transform: skew(0.8deg); }
            20% { clip: rect(20px, 9999px, 40px, 0); transform: skew(0.2deg); }
            40% { clip: rect(90px, 9999px, 30px, 0); transform: skew(0.6deg); }
            60% { clip: rect(10px, 9999px, 80px, 0); transform: skew(0.4deg); }
            80% { clip: rect(50px, 9999px, 20px, 0); transform: skew(0.1deg); }
            100% { clip: rect(30px, 9999px, 70px, 0); transform: skew(0.7deg); }
        }

        .critical-error { color: red !important; text-shadow: 2px 2px 0px #000; }

        #overlay {
            position: fixed; inset: 0; background: black; z-index: 100;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: opacity 0.5s ease-out; padding: 20px; text-align: center;
        }
        .lock-icon { font-size: 5rem; margin-bottom: 20px; animation: pulse 1.5s infinite; filter: drop-shadow(0 0 10px var(--neon)); transition: filter 0.5s; }
        
        .btn-enter {
            position: relative; overflow: hidden;
            border: 2px solid var(--neon); background: rgba(0, 255, 65, 0.05); color: var(--neon);
            padding: 15px 40px; font-size: 1.2rem; font-weight: bold; letter-spacing: 2px;
            cursor: pointer; text-transform: uppercase; font-family: var(--font-main);
            transition: 0.2s; margin-top: 30px;
        }
        .btn-enter:hover { background: var(--neon); color: black; box-shadow: 0 0 30px var(--neon); }
        @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }

        .container {
            position: relative; z-index: 10;
            max-width: 900px; margin: 0 auto; padding: 20px;
            display: none; padding-bottom: 100px;
        }

        header {
            text-align: center; border: 1px solid var(--neon-dim);
            padding: 25px; margin-bottom: 25px; background: var(--glass);
            border-radius: 4px; box-shadow: 0 0 20px rgba(0, 255, 65, 0.1);
            transition: border-color 0.5s;

        }
        .subtitle { font-size: 1rem; letter-spacing: 3px; border-top: 1px solid var(--neon-dim); display: block; padding-top: 10px; color: #fff; margin-top: 10px; transition: border-color 0.5s; min-height: 25px; }

        nav { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
        .nav-btn {
            background: #020202; color: var(--neon); border: 1px solid var(--neon-dim);
            padding: 12px 18px; cursor: pointer; font-family: var(--font-main); font-weight: bold; font-size: 1rem;
            transition: 0.2s; letter-spacing: 1px; min-width: 100px;
        }
        .nav-btn:hover { background: rgba(0, 255, 65, 0.15); text-shadow: 0 0 8px var(--neon); }
        .nav-btn.active { background: var(--neon); color: black; box-shadow: 0 0 15px var(--neon); border-color: var(--neon); }
        .nav-btn-secondary {
            text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
            border-style: dashed; opacity: 0.85;
        }
        .nav-btn-secondary:hover { opacity: 1; }

        .school-info-card {
            text-align: center; border: 1px solid var(--neon-dim); border-radius: 6px;
            padding: 12px 16px; margin: 12px 0; background: rgba(0, 20, 0, 0.4);
        }
        .school-info-card p { margin: 4px 0; }
        .school-info-card strong { color: var(--premium-gold); }

        .marquee-container {
            border-top: 2px solid var(--neon); border-bottom: 2px solid var(--neon);
            margin-top: 25px; background: rgba(0, 20, 0, 0.9); overflow: visible;
            padding: 10px 0; transition: border-color 0.5s;
            position: relative;
        }
        .marquee-clip { overflow: hidden; white-space: nowrap; }
        .petir-fx {
            position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
            width: 70%; max-width: 260px; height: 20px;
            display: flex; align-items: flex-start; justify-content: center; gap: 18px;
            pointer-events: none; z-index: 3;
        }
        .petir-bolt {
            width: 4px; height: 100%;
            background: linear-gradient(180deg, transparent, var(--neon) 35%, #fff 55%, var(--neon) 100%);
            clip-path: polygon(50% 0%, 100% 18%, 55% 42%, 100% 58%, 35% 100%, 45% 58%, 0% 42%, 45% 18%);
            filter: drop-shadow(0 0 4px var(--neon)) drop-shadow(0 0 10px var(--neon));
            opacity: 0;
            animation-name: petir-flash;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: var(--petir-dur, 3.2s);
            animation-delay: var(--petir-delay, 0s);
        }
        @keyframes petir-flash {
            0%, 90%, 100% { opacity: 0; }
            91% { opacity: 1; }
            92.5% { opacity: 0.15; }
            94% { opacity: 0.9; }
            96% { opacity: 0; }
        }
        .marquee-content {
            display: inline-block; padding-left: 100%;
            animation: scroll-text 13s linear infinite;
            font-size: 1.1rem; font-weight: bold; letter-spacing: 3px; color: white;
            text-shadow: 0 0 5px var(--neon);
        }
        @keyframes scroll-text { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

        .slide {
            display: none; background: var(--glass); border: 1px solid var(--neon-dim);
            padding: 30px; animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.05); line-height: 1.6; position: relative;
            transition: border-color 0.5s;

        }
        
        .slide-hud {
            position: absolute; top: 5px; right: 10px;
            font-size: 0.6rem; color: var(--neon); opacity: 0.8;
            letter-spacing: 2px; transition: color 0.5s;
        }
        .lat-toggle {
            cursor: pointer; font-size: 0.7rem; margin-right: 3px;
            opacity: 0.9; transition: opacity 0.3s, color 0.3s;
        }
        .lat-toggle.lat-off { opacity: 0.35; color: #888; }

        .slide.active { display: block; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        
        h2 { 
            border-bottom: 2px solid var(--neon); padding-bottom: 10px; 
            margin-top: 0; font-size: 1.5rem; color: white; margin-bottom: 20px;
            text-shadow: 0 0 10px var(--neon-dim);
            transition: border-color 0.5s, text-shadow 0.5s;
        }

        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; margin-top: 20px; }
        .gallery-item {
            border: 1px solid var(--neon-dim); position: relative; height: 180px; overflow: hidden;
            transition: 0.3s; background: #000; cursor: pointer;
        }
        .gallery-item:hover { border-color: var(--neon); transform: scale(1.02); z-index: 2; box-shadow: 0 0 20px var(--neon-dim); }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: 0.3s; filter: grayscale(80%); }
        .gallery-item:hover img { opacity: 1; filter: grayscale(0%); }
        .caption {
            position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.9);
            color: var(--neon); font-size: 0.7rem; padding: 8px; text-align: center; border-top: 1px solid var(--neon-dim);
            font-weight: bold; letter-spacing: 1px; transition: color 0.5s, border-color 0.5s;
        }

        .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .comp-btn {
            padding: 15px; border: 1px solid var(--neon-dim); background: rgba(0,0,0,0.6); 
            color: var(--neon); cursor: pointer; font-family: var(--font-main); font-weight: bold; font-size: 0.9rem;
            transition: 0.2s; text-align: left;
        }
        .comp-btn:hover { background: rgba(0, 255, 65, 0.1); border-color: var(--neon); }
        .comp-btn.active-comp { background: var(--neon); color: black; box-shadow: 0 0 15px var(--neon); }
        .desc-box { 
            border: 1px dashed var(--neon); padding: 20px; 
            background: rgba(0,10,0,0.8); margin-top: 20px; color: #eee; font-size: 1rem;
            min-height: 120px; transition: border-color 0.5s;
        }

        footer {
            text-align: center; margin-top: 60px; padding: 20px; border-top: 1px solid var(--neon-dim);
            color: #666; font-size: 0.8rem; transition: border-color 0.5s;
            width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
            box-sizing: border-box;
        }
        footer > * { max-width: 900px; margin-left: auto; margin-right: auto; }
        @media (min-width: 1300px) {
            footer { padding: 30px 20px; }
            footer > * { max-width: 1100px; }
        }
        @media (max-width: 380px) {
            .author-link { padding: 6px 10px; font-size: 0.7rem; }
        }
        .author-link { 
            color: var(--neon); text-decoration: none; font-weight: bold; 
            border: 1px solid var(--neon); padding: 8px 15px; display: inline-block; margin-bottom: 10px;
            transition: 0.3s; text-transform: uppercase; background: #000;
        }
        .author-link:hover { background: var(--neon); color: black; box-shadow: 0 0 15px var(--neon); transform: translateY(-3px); }
        
        .control-btn {
            position: fixed; bottom: 29px; width: 45px; height: 45px;
            border: 1px solid var(--neon); background: rgba(0, 0, 0, 0.8); color: var(--neon);
            display: none; justify-content: center; align-items: center; border-radius: 50%;
            cursor: pointer; z-index: 1000; box-shadow: 0 0 10px var(--neon-dim); transition: 0.3s; font-size: 1.2rem;
        }
        .control-btn:hover { box-shadow: 0 0 20px var(--neon); transform: scale(1.1); }
        #music-btn { right: 5px; }
        #color-btn { left: 5px; }
        #chat-btn { left: 50%; transform: translateX(-50%); }
        #chat-btn:hover { transform: translateX(-50%) scale(1.1); }
        #chat-btn .chat-dot {
            position: absolute; top: -2px; right: -2px; width: 10px; height: 10px;
            background: var(--glitch-red); border-radius: 50%; box-shadow: 0 0 8px var(--glitch-red);
            display: none;
        }

        #chat-marquee-bar {
            position: fixed; bottom: 0; left: 0; right: 0; height: 28px;
            background: linear-gradient(90deg, rgba(0,0,0,0.95), var(--glass), rgba(0,0,0,0.95));
            border-top: 1px solid var(--neon-dim); border-bottom: 1px solid var(--neon-dim);
            overflow: hidden; z-index: 999; display: none; align-items: center;
            box-shadow: 0 0 12px rgba(0,255,0,0.15) inset;
        }
        #chat-marquee-bar.live { display: flex; }
        #chat-marquee-track {
            display: inline-flex; white-space: nowrap; will-change: transform;
            animation: marquee-scroll 22s linear infinite;
            font-family: var(--font-main); font-size: 0.78rem; color: var(--neon);
            text-shadow: 0 0 6px var(--neon);
        }
        #chat-marquee-track .mq-item { padding: 0 28px; }
        #chat-marquee-track .mq-ip { opacity: 0.6; color: var(--premium-gold); margin-right: 6px; }
        @keyframes marquee-scroll {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }

        /* ── Lite Mode: matiin efek berat (blur, animasi loop) buat device RAM/CPU rendah ── */
        .lite-mode #chat-panel { backdrop-filter: none; background: #0b0f0b; transition: transform 0.15s linear; }
        .lite-mode #chat-panel.expanding { animation: none; }
        .lite-mode #chat-marquee-track { animation: none; transform: none; }
        .lite-mode #chat-headline-text { animation: none !important; }

        #chat-panel {
            position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
            width: min(92vw, 380px); max-height: 70vh; z-index: 1100;
            background: var(--glass); border: 1px solid var(--neon); border-bottom: none;
            border-radius: 14px 14px 0 0; box-shadow: 0 0 30px rgba(0,255,0,0.25);
            display: flex; flex-direction: column;
            transition: transform 0.35s ease, width 0.4s cubic-bezier(.16,.84,.44,1), max-height 0.4s cubic-bezier(.16,.84,.44,1);
            backdrop-filter: blur(6px);
        }
        #chat-panel.open { transform: translateX(-50%) translateY(0%); }
        /* Mode "perlebar layar" — panel melebar & tinggi mentok ke atas (bottom:0 tetap jadi anchor) */
        #chat-panel.wide { width: min(96vw, 720px); max-height: 92vh; }
        @keyframes chat-panel-expand {
            0% { transform: translateX(-50%) translateY(0%) scaleY(1); }
            55% { transform: translateX(-50%) translateY(-1.5%) scaleY(1.015); }
            100% { transform: translateX(-50%) translateY(0%) scaleY(1); }
        }
        #chat-panel.expanding { animation: chat-panel-expand 0.5s ease; transform-origin: bottom center; }
        #chat-panel-head {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 14px; border-bottom: 1px solid var(--neon-dim);
            font-family: var(--font-main); color: var(--neon); letter-spacing: 1px;
        }
        #chat-panel-head .chat-status { font-size: 0.65rem; opacity: 0.7; }
        #chat-panel-head .chat-status .dot {
            display: inline-block; width: 7px; height: 7px; border-radius: 50%;
            background: var(--neon); margin-right: 5px; box-shadow: 0 0 6px var(--neon);
            animation: blink-cursor 1.4s step-end infinite;
        }
        #chat-close { background: none; border: none; color: var(--neon); font-size: 1rem; cursor: pointer; }
        #chat-messages {
            flex: 1; overflow-y: auto; padding: 10px 12px; font-family: var(--font-main);
            font-size: 0.8rem; display: flex; flex-direction: column; gap: 8px; 
            min-height: 100px; /* dikurangi agar list online tidak squish */
            transition: font-size 0.3s ease;
        }
        .chat-msg { border-left: 2px solid var(--neon-dim); padding-left: 8px; }
        #chat-load-history-btn {
            align-self: center; margin-bottom: 2px; padding: 5px 14px; font-size: 0.68rem;
            font-family: var(--font-main); letter-spacing: 0.03em; color: var(--neon-dim);
            background: rgba(0,0,0,0.35); border: 1px solid var(--neon-dim); border-radius: 20px;
            cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
        }
        #chat-load-history-btn:hover:not(:disabled) { color: var(--neon); border-color: var(--neon); }
        #chat-load-history-btn:disabled { cursor: default; opacity: 0.6; }
        .chat-msg .chat-ip {
            color: var(--premium-platinum); font-size: 0.68rem; opacity: 0.75; display: block;
            transition: font-size 0.3s ease;
        }
        .chat-msg .chat-text { color: var(--neon); word-break: break-word; }
        .chat-text .chat-media {
            display: block; max-width: 100%; max-height: 260px; margin-top: 6px;
            border: 1px solid var(--neon-dim); border-radius: 6px; object-fit: contain;
            background: rgba(0, 0, 0, 0.3);
            transition: max-height 0.3s ease, max-width 0.3s ease;
        }
        .chat-text iframe.chat-yt {
            width: 100%; max-width: 260px; height: auto; aspect-ratio: 16 / 9;
            max-height: none; object-fit: initial; border: 1px solid var(--neon-dim);
            transition: max-width 0.3s ease;
        }
        /* Auto-sizing per jenis embed — jangan dipaksa 16:9 semua, tiap tipe beda proporsi asli */
        .chat-text iframe.chat-yt-short { aspect-ratio: 9 / 16; max-width: 200px; transition: max-width 0.3s ease; }
        /* Facade thumbnail YT — dimensi disamain persis sama iframe.chat-yt di atas biar gak ada
           layout shift pas ChatFormat.mountYouTube gantiin facade ini jadi iframe sungguhan. */
        .chat-text .chat-yt-facade {
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            width: 100%; max-width: 260px; height: auto; aspect-ratio: 16 / 9;
            border: 1px solid var(--neon-dim); border-radius: 0; background-color: #000;
            background-size: cover; background-position: center; transition: max-width 0.3s ease;
        }
        .chat-text .chat-yt-facade.chat-yt-short { aspect-ratio: 9 / 16; max-width: 200px; }
        .yt-facade-play {
            width: 44px; height: 44px; border-radius: 50%; border: none; pointer-events: none;
            background: rgba(0,0,0,0.55); color: #ff003c; font-size: 1.1rem;
            display: flex; align-items: center; justify-content: center;
        }
        .chat-text iframe.chat-spotify-track { aspect-ratio: auto; height: 152px; max-width: 300px; transition: max-width 0.3s ease; }
        .chat-text iframe.chat-spotify-list { aspect-ratio: auto; height: 352px; max-width: 300px; transition: max-width 0.3s ease; }
        .chat-text iframe.chat-drive-doc { aspect-ratio: 4 / 3; max-width: 300px; transition: max-width 0.3s ease; }
        /* Drive generik (ekstensi tak diketahui / video) — tanpa aspect-ratio dipaksa spt YT 16:9,
           supaya konten portrait (umum dari HP) tidak dipaksa ke kotak landscape & muncul ruang kosong besar. */
        .chat-text iframe.chat-drive-generic { aspect-ratio: auto; height: min(60vh, 380px); max-width: 300px; transition: max-width 0.3s ease, height 0.3s ease; }
        .chat-text iframe.chat-maps { aspect-ratio: auto; height: 220px; max-width: 300px; transition: max-width 0.3s ease, height 0.3s ease; }
        /* Facade Drive generic — dimensi disamain persis sama iframe.chat-drive-generic di atas.
           Thumbnail Drive (endpoint sama kayak img Drive biasa) ditaruh sbg <img> absolute-fill
           di belakang tombol, bukan background-image, karena endpoint-nya bisa gagal (bukan semua
           tipe file didukung) — onerror di elemen img bisa nge-remove dirinya sendiri kalau gagal,
           nyisain kotak gelap + ikon aja sbg fallback (lihat onerror di toHtml). */
        .chat-text .drive-facade {
            position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer;
            aspect-ratio: auto; height: min(60vh, 380px); max-width: 300px; overflow: hidden;
            border: 1px solid var(--neon-dim); border-radius: 6px; background-color: #000;
            transition: max-width 0.3s ease, height 0.3s ease;
        }
        .drive-facade-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
        /* Facade Maps — gak ada thumbnail statis peta tanpa Static Maps API berbayar,
           jadi placeholder ikon+label aja, dimensi disamain sama iframe.chat-maps di atas. */
        .chat-text .maps-facade {
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
            cursor: pointer; aspect-ratio: auto; height: 220px; max-width: 300px;
            border: 1px solid var(--neon-dim); border-radius: 6px; background: rgba(0, 0, 0, 0.35);
            color: var(--neon-dim); text-align: center; padding: 0 12px;
            transition: max-width 0.3s ease, height 0.3s ease;
        }
        .maps-facade-icon { font-size: 1.8rem; }
        .maps-facade-label { font-size: 0.75rem; letter-spacing: 0.03em; }

        /* ── Wide mode: font & dimensi display media ikut melebar, bukan cuma panelnya.
           Transisi pakai CSS transition yang udah ditempel di rule aslinya di atas (bukan animasi JS
           baru) — jadi tetep ringan & serempak sama animasi width panel yang udah ada. ── */
        #chat-panel.wide #chat-messages { font-size: 0.95rem; }
        #chat-panel.wide .chat-msg .chat-ip { font-size: 0.78rem; }
        #chat-panel.wide .chat-text .chat-media { max-height: 420px; }
        #chat-panel.wide .chat-text iframe.chat-yt { max-width: 480px; }
        #chat-panel.wide .chat-text iframe.chat-yt-short { max-width: 340px; }
        #chat-panel.wide .chat-text .chat-yt-facade { max-width: 480px; }
        #chat-panel.wide .chat-text .chat-yt-facade.chat-yt-short { max-width: 340px; }
        #chat-panel.wide .chat-text iframe.chat-spotify-track { max-width: 420px; }
        #chat-panel.wide .chat-text iframe.chat-spotify-list { max-width: 420px; }
        #chat-panel.wide .chat-text iframe.chat-drive-doc { max-width: 440px; }
        #chat-panel.wide .chat-text iframe.chat-drive-generic { max-width: 460px; height: min(65vh, 520px); }
        #chat-panel.wide .chat-text iframe.chat-maps { max-width: 460px; height: 300px; }
        #chat-panel.wide .chat-text .drive-facade { max-width: 460px; height: min(65vh, 520px); }
        #chat-panel.wide .chat-text .maps-facade { max-width: 460px; height: 300px; }
        .chat-text .chat-quote {
            display: block; border-left: 2px solid var(--neon); padding-left: 8px;
            margin: 3px 0; opacity: 0.8; font-style: italic;
        }
        .chat-text .chat-inline-quote {
            display: block; position: relative; overflow: hidden;
            margin: 4px 0; padding: 6px 10px 6px 12px;
            border-left: 2px solid var(--neon);
            background: rgba(0, 240, 255, 0.06);
            border-radius: 0 4px 4px 0;
            font-style: italic; opacity: 0.9; quotes: none;
        }
        /* Scanline sweep — sama seperti #chat-headline-bar::before, dipakai ulang di bubble kutip */
        .chat-text .chat-inline-quote::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(0,240,255,0.08) 50%, transparent 100%);
            background-size: 200% 100%;
            animation: headline-sweep 3s linear infinite;
            pointer-events: none;
        }
        .chat-text a { color: var(--premium-gold); text-decoration: underline; }
        #chat-input-row {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 10px; border-top: 1px solid var(--neon-dim);
}

#chat-input-wrap {
    flex: 1;
    min-width: 0; 
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#chat-format-bar {
    display: flex; gap: 6px;
    padding: 0; 
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}
#chat-format-bar::-webkit-scrollbar { display: none; }
              .fmt-btn {
            flex: 0 0 auto; width: 30px; height: 29px; background: #000;
            border: 1px solid var(--neon-dim); color: var(--neon); border-radius: 6px;
            cursor: pointer; font-family: var(--font-main); font-size: 0.8rem;
            display: flex; align-items: center; justify-content: center; transition: 0.15s;
        }
        .fmt-btn:active, .fmt-btn:hover { background: var(--neon); color: #000; border-color: var(--neon); }
        .fmt-btn.on { background: var(--neon); color: #000; border-color: var(--neon); }
        .media-settings-panel {
            display: none; flex-direction: column; gap: 4px; padding: 8px;
            border: 1px solid var(--neon-dim); border-radius: 8px; background: #000;
            font-size: 0.72rem; color: var(--neon);
        }
        .media-settings-panel.open { display: flex; }
        .media-settings-panel label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
        .chat-media-wrap { position: relative; display: inline-block; max-width: 100%; margin-top: 6px; }
        .chat-media-wrap .chat-media { margin-top: 0; }
        .media-mute-btn {
            position: absolute; bottom: 6px; right: 6px; width: 24px; height: 24px;
            border-radius: 50%; border: 1px solid var(--neon-dim); background: rgba(0,0,0,0.75);
            color: var(--neon); font-size: 0.65rem; cursor: pointer; display: flex;
            align-items: center; justify-content: center; z-index: 2;
        }
        .media-mute-btn.muted { color: var(--premium-platinum); opacity: 0.8; }
        .chat-file-link {
            display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px;
            border: 1px solid var(--neon-dim); border-radius: 6px; max-width: 100%;
            width: fit-content; text-decoration: none !important;
        }
        .control-btn.sound-locked { pointer-events: none; opacity: 0.35; filter: grayscale(1); }
        #chat-input {
            flex: 1; background: #000; border: 1px solid var(--neon-dim); color: var(--neon);
            font-family: var(--font-main); padding: 8px 10px; border-radius: 14px; outline: none; font-size: 0.85rem;
            resize: none; overflow-y: auto; max-height: 110px; min-height: 36px; line-height: 1.35;
            white-space: pre-wrap; word-wrap: break-word; transition: border-color 0.2s, box-shadow 0.2s;
        }
        #chat-input:focus { border-color: var(--neon); box-shadow: 0 0 8px var(--neon-dim); }
        #chat-send {
            background: var(--neon-dim); border: none; color: #000; font-weight: bold;
            padding: 0 14px; height: 36px; border-radius: 18px; cursor: pointer; transition: 0.2s; flex-shrink: 0;
        }
        #chat-send:hover { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
        #chat-send:disabled, #chat-send.cooldown {
            background: #222; color: var(--neon-dim); cursor: not-allowed; opacity: 0.6; box-shadow: none;
        }
        #chat-send.cooldown::after {
            content: attr(data-cd); font-size: 0.6rem; margin-left: 4px;
        }

        .privacy-wrap { position: relative; display: inline-block; }
        .privacy-link {
            color: var(--neon); text-decoration: none; font-weight: bold;
            border: 1px solid var(--neon); padding: 8px 15px; display: inline-block; margin-bottom: 10px;
            transition: 0.3s; text-transform: uppercase; background: #000; font-family: var(--font-main);
            cursor: pointer; font-size: 0.8rem;
        }
        .privacy-link:hover { background: var(--neon); color: black; box-shadow: 0 0 15px var(--neon); transform: translateY(-3px); }
        #privacy-board {
            position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
            width: min(86vw, 360px); background: var(--glass); border: 1px solid var(--glitch-blue);
            border-radius: 8px; padding: 16px; text-align: left; font-size: 0.78rem; line-height: 1.5;
            color: #ddd; box-shadow: 0 0 25px rgba(0,240,255,0.25); backdrop-filter: blur(6px);
            opacity: 0; visibility: hidden; pointer-events: none; transition: 0.25s ease; z-index: 50;
        }
        #privacy-board.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        #privacy-board h4 {
            margin: 0 0 10px; color: var(--glitch-blue); font-size: 0.85rem; letter-spacing: 1px;
            border-bottom: 1px solid rgba(0,240,255,0.3); padding-bottom: 6px;
        }
        #privacy-board ol { margin: 0; padding-left: 18px; }
        #privacy-board li { margin-bottom: 8px; }
        #privacy-board::after {
            content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
            border: 7px solid transparent; border-top-color: var(--glitch-blue);
        }

        #chat-head-right { display: flex; align-items: center; gap: 10px; }
        .chat-icon-btn {
            background: none; border: 1px solid var(--neon-dim); color: var(--neon);
            font-size: 0.8rem; cursor: pointer; width: 26px; height: 26px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; transition: 0.2s;
        }
        .chat-icon-btn:hover { border-color: var(--neon); box-shadow: 0 0 8px var(--neon); }
        .chat-icon-btn.notif-on { color: #000; background: var(--neon); box-shadow: 0 0 10px var(--neon); border-color: var(--neon); }

  /* ── HEADLINE SCRAMBLER BAR (pengganti #chat-myip-bar) ── */
  #chat-headline-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 14px;
      border-bottom: 1px solid rgba(0, 240, 255, 0.15);
      background: rgba(0, 240, 255, 0.04);
      font-family: var(--font-main);
      font-size: 0.6rem;
      letter-spacing: 1.5px;
      color: var(--glitch-blue);
      overflow: hidden;
      position: relative;
      min-height: 22px;
      cursor: default;
  }

  /* Scanline geser kiri-kanan di belakang teks */
  #chat-headline-bar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(0, 240, 255, 0.07) 50%,
          transparent 100%
      );
      background-size: 200% 100%;
      animation: headline-sweep 3s linear infinite;
      pointer-events: none;
  }

  #chat-headline-text {
      position: relative;
      z-index: 1;
      text-shadow: 0 0 8px var(--glitch-blue);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
  }

  /* State: sedang scramble → warna campur neon + biru */
  #chat-headline-text.scrambling {
      color: var(--neon);
      text-shadow: 0 0 10px var(--neon);
  }

  /* State: teks baru muncul → fade-in slide dari bawah */
  @keyframes headline-reveal {
      0%   { opacity: 0; transform: translateY(4px); }
      100% { opacity: 1; transform: translateY(0); }
  }

  /* Glow pulse setelah teks settle */
  @keyframes headline-glow-pulse {
      0%, 100% { text-shadow: 0 0 6px var(--glitch-blue); }
      50%       { text-shadow: 0 0 14px var(--glitch-blue), 0 0 28px rgba(0,240,255,0.4); }
  }

  /* Sweep cahaya latar */
  @keyframes headline-sweep {
      0%   { background-position: -100% 0; }
      100% { background-position: 200% 0; }
  }

  /* Glitch micro-shift sesekali */
  @keyframes headline-glitch {
      0%   { clip-path: inset(0 0 100% 0); transform: translateX(0); }
      10%  { clip-path: inset(10% 0 60% 0); transform: translateX(-3px); }
      20%  { clip-path: inset(40% 0 20% 0); transform: translateX(3px); }
      30%  { clip-path: inset(0 0 100% 0); transform: translateX(0); }
      100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
  }

  /* Pseudo-element untuk efek glitch layer kedua */
  #chat-headline-text::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      color: var(--neon);
      opacity: 0;
      pointer-events: none;
  }

  #chat-headline-text.glitch-fire::after {
      opacity: 0.6;
      animation: headline-glitch 0.4s steps(1) forwards;
  }
        #chat-dashboard {
            position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
            padding: 9px 14px; border-bottom: 1px solid var(--neon-dim);
            background: linear-gradient(90deg, rgba(0,255,65,0.07), rgba(0,240,255,0.04), rgba(0,255,65,0.07));
            cursor: pointer; user-select: none; overflow: hidden;
        }
        #chat-dashboard::before {
            content: ''; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
            background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
            background-size: 100% 8px; animation: holo-scan 2.4s linear infinite;
        }
        #chat-dashboard:hover { background: linear-gradient(90deg, rgba(0,255,65,0.12), rgba(0,240,255,0.07), rgba(0,255,65,0.12)); }
        #chat-net-label {
            display: flex; align-items: center; gap: 5px; font-size: 0.58rem;
            letter-spacing: 1px; color: var(--glitch-blue); opacity: 0.85; text-transform: uppercase;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
            transition: color 0.3s, opacity 0.3s;
        }
        #chat-net-label.net-offline { color: #ff4444; opacity: 0.9; }
        #chat-online-left {
            display: flex; align-items: center; gap: 7px; color: var(--neon); position: relative; z-index: 1;
        }
        .dot-online {
            display: inline-block; width: 7px; height: 7px; border-radius: 50%;
            background: var(--neon); box-shadow: 0 0 6px var(--neon); animation: blink-cursor 1.4s step-end infinite;
        }
        #chat-online-count {
            font-weight: bold; font-size: 0.78rem; letter-spacing: 0.5px;
            text-shadow: 0 0 8px rgba(0,255,65,0.6);
        }
        #chat-online-count .num {
            display: inline-block; min-width: 14px; text-align: center;
            transition: transform 0.25s ease;
        }
        #chat-online-count.bump .num { animation: num-bump 0.35s ease; }
        @keyframes num-bump { 0% { transform: scale(1); } 50% { transform: scale(1.5); color: var(--glitch-blue); } 100% { transform: scale(1); } }
        #chat-online-updated { font-size: 0.56rem; opacity: 0.45; margin-left: 4px; letter-spacing: 0.5px; }
        #chat-online-chevron { transition: transform 0.25s; opacity: 0.7; font-size: 0.65rem; position: relative; z-index: 1; }
        #chat-dashboard.expanded #chat-online-chevron { transform: rotate(180deg); }

        #chat-online-list {
            max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
            background:
                radial-gradient(circle at 10% 0%, rgba(0,255,65,0.05), transparent 60%),
                rgba(0,6,0,0.92);
            border-bottom: 1px solid var(--neon-dim);
              }
        #chat-online-list.expanded { 
            max-height: 160px; 
            overflow-y: auto; 
            overflow-x: hidden;
            /* Scrollbar tipis agar tidak makan lebar */
            scrollbar-width: thin;
            scrollbar-color: var(--neon-dim) transparent;
        }
        #chat-online-list.expanded::-webkit-scrollbar { width: 4px; }
        #chat-online-list.expanded::-webkit-scrollbar-track { background: transparent; }
        #chat-online-list.expanded::-webkit-scrollbar-thumb { background: var(--neon-dim); border-radius: 4px; }
        .chat-online-item {
            display: flex; align-items: center; gap: 10px; padding: 7px 14px;
            font-size: 0.74rem; color: var(--neon); border-bottom: 1px solid rgba(0,255,65,0.08);
            animation: online-item-in 0.3s ease;
        }
        @keyframes online-item-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
        .chat-online-avatar {
            width: 24px; height: 24px; min-width: 24px; border-radius: 50%;
            background: rgba(0,255,65,0.08); border: 1px solid var(--neon-dim);
            display: flex; align-items: center; justify-content: center;
            color: var(--glitch-blue); font-size: 0.68rem; position: relative;
        }
        .chat-online-avatar::after {
            content: ''; position: absolute; bottom: -1px; right: -1px; width: 7px; height: 7px;
            border-radius: 50%; background: var(--neon); box-shadow: 0 0 5px var(--neon);
            border: 1px solid #000;
        }
        .chat-online-item .label { display: flex; flex-direction: column; gap: 1px; }
        .chat-online-item .label small { font-size: 0.58rem; opacity: 0.5; letter-spacing: 0.5px; }
        .chat-online-item .you-tag {
            color: #000; background: var(--glitch-red); font-weight: bold; margin-left: auto;
            font-size: 0.58rem; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.5px;
            box-shadow: 0 0 8px rgba(255,0,60,0.5);
        }

        #chat-toast-stack {
            position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
            z-index: 1300; display: flex; flex-direction: column; gap: 8px;
            width: min(92vw, 360px); pointer-events: none;
        }
        .chat-toast {
            background: var(--glass); border: 1px solid var(--neon); border-radius: 8px;
            padding: 10px 14px; box-shadow: 0 0 20px rgba(0,255,65,0.3); backdrop-filter: blur(6px);
            font-family: var(--font-main); color: var(--neon); font-size: 0.78rem;
            animation: toast-in 0.3s ease, toast-out 0.3s ease 3.7s forwards;
            cursor: pointer; pointer-events: auto;
        }
        .chat-toast .t-ip { color: var(--glitch-blue); font-size: 0.68rem; display: block; margin-bottom: 3px; opacity: 0.85; }
        @keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

        @keyframes chat-btn-pulse {
            0%, 100% { box-shadow: 0 0 10px var(--neon-dim); }
            50% { box-shadow: 0 0 25px var(--glitch-red), 0 0 10px var(--neon); }
        }
        #chat-btn.pulse-alert { animation: chat-btn-pulse 0.6s ease 2; }
        @media (max-width: 480px) {
            #chat-panel { width: 100vw; border-radius: 14px 14px 0 0; }
            /* chat-net-label tetap tampil, tapi lebih pendek di HP */
            #chat-net-label { max-width: 80px; font-size: 0.52rem; }
            #chat-net-label .net-label-text { display: none; }
        }


        #chat-online-list {
            flex-shrink: 0 !important;
        }
#system-log { 
    color: var(--neon) !important; 
    opacity: 0.65; 
    font-family: var(--font-main); 
    margin: 15px auto; 
    font-size: 0.9rem; 
    font-weight: bold;
    letter-spacing: 1px;
}

#gallery-lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.92);
    justify-content: center; align-items: center;
    flex-direction: column;
    backdrop-filter: blur(6px);
    animation: fadeIn 0.2s ease;
}
#gallery-lightbox.open { display: flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

#lb-img {
    max-width: 90vw; max-height: 75vh;
    border: 1px solid var(--neon-dim);
    box-shadow: 0 0 40px rgba(0,255,65,0.2);
    object-fit: contain;
    transition: opacity 0.2s;
}
#lb-caption {
    margin-top: 16px;
    color: var(--neon);
    font-family: var(--font-main);
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-align: center;
    text-shadow: 0 0 8px var(--neon);
}
#lb-close {
    position: absolute; top: 20px; right: 24px;
    color: var(--neon); font-size: 1.8rem; cursor: pointer;
    background: none; border: none; font-family: var(--font-main);
    transition: 0.2s; line-height: 1;
}
#lb-close:hover { color: #ff003c; text-shadow: 0 0 10px #ff003c; }
#lb-nav {
    display: flex; gap: 20px; margin-top: 20px;
}
.lb-nav-btn {
    background: transparent; border: 1px solid var(--neon-dim);
    color: var(--neon); font-family: var(--font-main);
    padding: 8px 20px; cursor: pointer; font-size: 0.9rem;
    letter-spacing: 2px; transition: 0.2s;
}
.lb-nav-btn:hover { background: var(--neon); color: #000; }
#lb-counter {
    color: var(--neon-dim); font-size: 0.7rem;
    letter-spacing: 2px; margin-top: 10px;
    font-family: var(--font-main);
}

.gallery-toolbar {
    display: flex; justify-content: flex-end; align-items: center;
    margin: -10px 0 15px 0;
}

#hologram-upload-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 22px;
    background: rgba(0, 10, 5, 0.55);
    border: 1px solid var(--neon);
    color: var(--neon);
    font-family: var(--font-main);
    font-weight: bold; font-size: 0.85rem;
    letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; overflow: hidden;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    transition: 0.3s;
    animation: holo-rainbow-pulse 4s linear infinite, holo-float 3s ease-in-out infinite;
}
#hologram-upload-btn i { animation: holo-icon-spin 6s linear infinite; }
#hologram-upload-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 25px var(--neon), 0 0 50px rgba(0,255,65,0.3);
}

#hologram-upload-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
    background-size: 100% 6px;
    animation: holo-scan 1.8s linear infinite;
    pointer-events: none;
}

#hologram-upload-btn::after {
    content: '';
    position: absolute; top: -50%; left: -60%;
    width: 40%; height: 200%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: rotate(20deg);
    animation: holo-sweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes holo-scan {
    0% { background-position: 0 0; }
    100% { background-position: 0 60px; }
}
@keyframes holo-sweep {
    0%   { left: -60%; }
    50%  { left: 130%; }
    100% { left: 130%; }
}
@keyframes holo-float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-4px); }
}
@keyframes holo-icon-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes holo-rainbow-pulse {
    0%   { border-color: var(--neon);     box-shadow: 0 0 10px var(--neon), inset 0 0 10px rgba(0,255,65,0.08); }
    25%  { border-color: var(--glitch-blue); box-shadow: 0 0 14px var(--glitch-blue), inset 0 0 10px rgba(0,240,255,0.08); }
    50%  { border-color: var(--glitch-red); box-shadow: 0 0 14px var(--glitch-red), inset 0 0 10px rgba(255,0,60,0.08); }
    75%  { border-color: #bf00ff;          box-shadow: 0 0 14px #bf00ff, inset 0 0 10px rgba(191,0,255,0.08); }
    100% { border-color: var(--premium-platinum);      box-shadow: 0 0 10px var(--premium-white), inset 0 0 10px rgba(0,255,65,0.08); }
}

#upload-modal {
    display: none;
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.85);
    justify-content: center; align-items: center;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.25s ease;
    padding: 16px;
}
#upload-modal.open { display: flex; }

.upload-panel {
    position: relative;
    width: 100%; max-width: 420px;
    background: rgba(0, 12, 6, 0.7);
    border: 1px solid var(--neon);
    border-radius: 6px;
    padding: 28px 24px;
    box-shadow: 0 0 40px rgba(0,255,65,0.25), inset 0 0 30px rgba(0,255,65,0.04);
    animation: holo-rainbow-pulse 4s linear infinite, slideUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.upload-panel::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    background-size: 100% 8px;
    animation: holo-scan 2.2s linear infinite;
    pointer-events: none;
}

.upload-panel h3 {
    margin: 0 0 6px 0; font-size: 1.1rem; letter-spacing: 3px; color: #fff;
    text-shadow: 0 0 10px var(--neon);
    display: flex; align-items: center; gap: 10px;
}
.upload-panel .upload-sub {
    font-size: 0.7rem; opacity: 0.65; letter-spacing: 1px; margin-bottom: 18px; display: block;
}

#upload-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--neon);
    font-size: 1.4rem; cursor: pointer; font-family: var(--font-main);
    transition: 0.2s; line-height: 1; z-index: 2;
}
#upload-close:hover { color: var(--glitch-red); text-shadow: 0 0 10px var(--glitch-red); }

.upload-field { margin-bottom: 16px; position: relative; z-index: 1; }
.upload-field label {
    display: block; font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 6px;
    color: var(--neon); opacity: 0.85; text-transform: uppercase;
}
.upload-field input[type="password"],
.upload-field input[type="text"] {
    width: 100%; padding: 10px 12px;
    background: rgba(0,0,0,0.6); border: 1px solid var(--neon-dim);
    color: var(--neon); font-family: var(--font-main); font-size: 0.9rem;
    letter-spacing: 2px; border-radius: 3px; outline: none;
    transition: 0.2s;
}
.upload-field input:focus { border-color: var(--neon); box-shadow: 0 0 12px rgba(0,255,65,0.3); }

.upload-dropzone {
    border: 1.5px dashed var(--neon-dim); border-radius: 4px;
    padding: 22px 10px; text-align: center; cursor: pointer;
    background: rgba(0,0,0,0.3); transition: 0.2s; position: relative; z-index: 1;
}
.upload-dropzone:hover, .upload-dropzone.dragover {
    border-color: var(--neon); background: rgba(0,255,65,0.06);
    box-shadow: 0 0 15px rgba(0,255,65,0.15);
}
.upload-dropzone i { font-size: 1.8rem; display: block; margin-bottom: 8px; animation: pulse 2s infinite; }
.upload-dropzone span { font-size: 0.75rem; letter-spacing: 1px; opacity: 0.8; }
#upload-filename {
    margin-top: 8px; font-size: 0.7rem; color: #fff; letter-spacing: 1px; word-break: break-all;
}

.upload-caption-field { margin-top: 16px; }

#upload-submit {
    width: 100%; margin-top: 20px; padding: 12px;
    background: rgba(0,255,65,0.08); border: 1px solid var(--neon);
    color: var(--neon); font-family: var(--font-main); font-weight: bold;
    letter-spacing: 3px; text-transform: uppercase; font-size: 0.9rem;
    cursor: pointer; border-radius: 3px; transition: 0.2s; position: relative; z-index: 1;
}
#upload-submit:hover { background: var(--neon); color: #000; box-shadow: 0 0 25px var(--neon); }
#upload-submit:disabled { opacity: 0.4; cursor: not-allowed; }

#upload-status {
    margin-top: 14px; font-size: 0.75rem; letter-spacing: 1px;
    text-align: center; min-height: 18px; position: relative; z-index: 1;
}
#upload-status.error { color: var(--glitch-red); text-shadow: 0 0 8px var(--glitch-red); }
#upload-status.success { color: var(--neon); text-shadow: 0 0 8px var(--neon); }
#upload-status.loading { color: var(--glitch-blue); text-shadow: 0 0 8px var(--glitch-blue); }

#upload-progress-wrap {
    width: 100%; height: 4px; background: rgba(255,255,255,0.08);
    border-radius: 2px; margin-top: 10px; overflow: hidden; display: none; position: relative; z-index: 1;
}
#upload-progress-bar {
    height: 100%; width: 0%; background: var(--neon);
    box-shadow: 0 0 10px var(--neon); transition: width 0.3s ease;
}

@media (max-width: 480px) {
    .upload-panel { padding: 22px 16px; }
    #hologram-upload-btn { padding: 8px 16px; font-size: 0.75rem; }
}

.chat-msg {
    border-left: 2px solid var(--neon-dim);
    padding-left: 8px;
    margin-bottom: 4px;
}
.chat-msg .chat-ip {
    color: var(--premium-platinum);
    font-size: 0.68rem;
    opacity: 0.75;
    display: block;
    margin-bottom: 2px; 
}

.bumi-muter-3d {
  display: inline-block !important;
  transform-style: preserve-3d;
  animation: spin3d 4s linear infinite;
}

@keyframes spin3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}


    .property-credit {
        font-size: 12px;
        color: #888888;
        margin-top: 10px;
        text-align: center;
        font-style: italic;
    }

    .property-credit a {
        color: #0088cc;
        text-decoration: none;
        font-style: normal;
        font-weight: bold;
        transition: color .25s var(--ease);
    }

    .property-credit a:hover {
        text-decoration: underline;
    }