* { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; } 
body { font-family: 'Montserrat', sans-serif; background: #050811; color: #f8fafc; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; scroll-behavior: smooth; }

#page-preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #050811; z-index: 99999999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s; }
#page-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-video { 
    width: 100%; 
    max-width: 150px; 
    height: auto; 
    margin-bottom: 15px;
    pointer-events: none; 
    mix-blend-mode: screen; 
   
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
    mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
    
    animation: plVideoFade 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

@keyframes plVideoFade { 
    0% { opacity: 0; filter: blur(10px); transform: scale(0.9); } 
    100% { opacity: 1; filter: blur(0); transform: scale(1); } 
}

.pl-progress-container { 
    width: 260px; 
    height: 8px; 
    background: rgba(15, 23, 42, 0.8); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 10px; 
    overflow: hidden; 
    margin-top: 15px; 
    position: relative; 
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); 
}

.pl-progress-bar { 
    width: 0%; 
    height: 100%; 
    background: linear-gradient(90deg, #3b82f6, #a855f7, #f59e0b, #3b82f6); 
    background-size: 300% 100%; 
    border-radius: 10px; 
    animation: 
        plLoad 3s cubic-bezier(0.25, 1, 0.5, 1) forwards, 
        gradientShift 3s linear infinite,
        plGlowPulse 2s infinite alternate; 
    position: relative;
}

.pl-progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: plShine 1.5s linear infinite;
}


@keyframes plLoad { 
    0% { width: 0%; } 
    100% { width: 100%; } 
}


@keyframes gradientShift {
    0% { background-position: 100% 0; }
    100% { background-position: -50% 0; }
}


@keyframes plGlowPulse {
    0% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.6); }
    50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.9); }
    100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); }
}

@keyframes plShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}



.bg-orbs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; overflow: hidden; }
.orb-1, .orb-2 { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.35; animation: floatOrb 20s infinite alternate ease-in-out; }
.orb-1 { width: 50vw; height: 50vw; background: #3b82f6; top: -10vh; left: -10vw; }
.orb-2 { width: 40vw; height: 40vw; background: #a855f7; bottom: -10vh; right: -10vw; animation-delay: -5s; }
@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(15vw, 15vh) scale(1.2); } }
.scanlines { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)); background-size: 100% 4px; opacity: 0.4; }
.dust-particle { position: absolute; bottom: -10px; background: #fff; border-radius: 50%; opacity: 0; pointer-events: none; animation: floatDust linear infinite; box-shadow: 0 0 8px #fff; }
@keyframes floatDust { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 0.5; } 80% { opacity: 0.5; } 100% { transform: translateY(-100vh) scale(0.5); opacity: 0; } }

.top-nav { position: relative; z-index: 999999; height: 70px; background: linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(10, 15, 30, 0.85)); backdrop-filter: blur(25px); border-bottom: 1px solid rgba(59, 130, 246, 0.2); display: flex; justify-content: space-between; align-items: center; padding: 0 30px; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.9); flex-shrink: 0; transition: all 0.3s ease; }
.brand-wrapper { justify-self: start; }
.brand { font-weight: 900; font-size: 1.5rem; letter-spacing: 3px; color: #fff; text-transform: uppercase; text-shadow: 0 0 15px rgba(59, 130, 246, 0.6); display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; position: relative; transition: all 0.3s; text-decoration: none; animation: brandBreathe 4s infinite alternate ease-in-out; }
@keyframes brandBreathe { 0% { transform: scale(1); } 100% { transform: scale(1.03); } }
.brand-logo-img { height: 48px; width: 48px; object-fit: contain; border-radius: 50%; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4)); animation: coinFloat 3s infinite alternate ease-in-out; }
@keyframes coinFloat { 0% { transform: translateY(0); filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.3)); } 100% { transform: translateY(-2px); filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.7)); } }
.brand:hover .brand-logo-img { animation: none; transform: scale(1.7); filter: drop-shadow(0 0 35px rgba(245, 158, 11, 1)); position: relative; z-index: 10; }
.brand:active .brand-logo-img { animation: none; transform: scale(2.0); filter: drop-shadow(0 0 45px rgba(245, 158, 11, 1)); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.brand span { background: linear-gradient(90deg, #f59e0b, #fef08a, #f59e0b); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shineText 3s linear infinite, neonPulseGold 2s infinite alternate; }
@keyframes shineText { to { background-position: 200% center; } }
@keyframes neonPulseGold { 0% { text-shadow: 0 0 10px rgba(245, 158, 11, 0.4); } 100% { text-shadow: 0 0 20px rgba(245, 158, 11, 0.8); } }
.brand::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #f59e0b, #fcd34d, transparent); background-size: 200% 100%; animation: brandScan 3s linear infinite; opacity: 0.7; }
@keyframes brandScan { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.quick-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
.q-link { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-weight: 800; font-size: 0.75rem; text-decoration: none; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid transparent; letter-spacing: 1px; position: relative; overflow: hidden; }
.q-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); transition: all 0.5s ease; z-index: 1; pointer-events: none; }
.q-link:hover::before { left: 150%; }
.q-link span { position: relative; z-index: 2; } .q-link svg { position: relative; z-index: 2; transition: transform 0.3s; flex-shrink: 0; } .q-link:hover svg { transform: scale(1.15) rotate(5deg); }

.ql-kick { background: rgba(83, 252, 24, 0.05); color: #53fc18; border-color: rgba(83, 252, 24, 0.2); } .ql-kick:hover { background: rgba(83, 252, 24, 0.15); border-color: #53fc18; box-shadow: 0 0 15px rgba(83, 252, 24, 0.4); transform: translateY(-2px); }
.ql-tg { background: rgba(14, 165, 233, 0.05); color: #38bdf8; border-color: rgba(14, 165, 233, 0.2); } .ql-tg:hover { background: rgba(14, 165, 233, 0.15); border-color: #0ea5e9; box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); transform: translateY(-2px); }
.ql-donate { background: rgba(245, 158, 11, 0.05); color: #fbbf24; border-color: rgba(245, 158, 11, 0.2); } .ql-donate:hover { background: rgba(245, 158, 11, 0.15); border-color: #f59e0b; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); transform: translateY(-2px); }
.ql-casinos { background: rgba(236, 72, 153, 0.05); color: #ec4899; border-color: rgba(236, 72, 153, 0.2); } .ql-casinos:hover { background: rgba(236, 72, 153, 0.15); border-color: #ec4899; box-shadow: 0 0 15px rgba(236, 72, 153, 0.4); transform: translateY(-2px); }
.ql-rules { background: rgba(168, 85, 247, 0.05); color: #a855f7; border-color: rgba(168, 85, 247, 0.2); } .ql-rules:hover { background: rgba(168, 85, 247, 0.15); border-color: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); transform: translateY(-2px); }

.menu-container { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1000000; }
.btn-auth, .burger-btn, .mobile-info-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.8rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-transform: uppercase; border-radius: 10px; padding: 10px 18px; }
.btn-auth svg, .burger-btn svg { transition: transform 0.3s; flex-shrink: 0; } .btn-auth:hover svg, .burger-btn:hover svg { transform: scale(1.15); }
.btn-auth { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.5); color: #fff; } .btn-auth:hover { background: rgba(59, 130, 246, 0.3); border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); transform: translateY(-2px); }
.btn-auth.profile-btn { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.5); } .btn-auth.profile-btn:hover { background: rgba(168, 85, 247, 0.3); border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); }
.burger-btn { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255,255,255,0.1); color: #fff; } .burger-btn:hover, .burger-btn.active { background: rgba(255, 255, 255, 0.1); border-color: #fff; transform: translateY(-2px); }

.dropdown-menu { position: fixed; top: 70px; right: 30px; background: rgba(15, 23, 42, 0.98); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 16px; width: 260px; display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 15px 50px rgba(0,0,0,0.9), 0 0 20px rgba(59, 130, 246, 0.2); z-index: 1000000; }
.dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.dropdown-menu a.menu-item { color: #cbd5e1; text-decoration: none; padding: 14px 20px; font-weight: 700; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.03); transition: all 0.25s ease; display: flex; align-items: center; gap: 14px; }
.dropdown-menu a.menu-item:hover { background: rgba(59, 130, 246, 0.12); color: #fff; padding-left: 25px; border-left: 4px solid #3b82f6; }
.dd-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; transition: transform 0.3s;}
.dropdown-menu a.menu-item:hover .dd-icon { transform: scale(1.1); }
.icon-info { background: rgba(56, 189, 248, 0.1); color: #38bdf8; } .icon-collab { background: rgba(168, 85, 247, 0.1); color: #a855f7; }

.mobile-only-menu-item { display: none !important; }

.stream-layout { position: relative; z-index: 10; display: flex; flex: 1; overflow: hidden; transition: all 0.4s ease; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; position: relative; scrollbar-width: thin; scrollbar-color: rgba(59, 130, 246, 0.3) transparent; transition: all 0.4s ease; }
.main-content::-webkit-scrollbar { width: 6px; } .main-content::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.4); border-radius: 3px; }

.player-section { flex-shrink: 0; padding: 15px 25px; display: flex; flex-direction: column; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.5s ease; width: 100%; }
.player-toolbar { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px; width: 100%; transition: all 0.5s ease; z-index: 5; }
.btn-resize { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(59, 130, 246, 0.3); color: #94a3b8; padding: 6px 14px; border-radius: 8px; font-family: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: all 0.3s; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.btn-resize:hover { color: #fff; border-color: #3b82f6; background: rgba(59, 130, 246, 0.3); box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }

.video-container { display: flex; justify-content: center; align-items: center; width: 100%; position: relative; transition: all 0.5s ease; }
.mentions-popup.active { display: block !important; }

@media (min-width: 951px) {
.video-container { padding: 0; width: 100%; }
.video-wrapper { height: auto !important; width: 100% !important; max-height: 76vh !important; max-width: 100% !important; margin: 0 auto; }
.video-wrapper.shrunk { max-height: 45vh !important; max-width: calc(45vh * 16 / 9) !important; }
}

.stream-layout.theater-mode .chat-sidebar { display: none !important; }
.stream-layout.theater-mode .video-wrapper { max-height: 85vh !important; }

.video-wrapper { width: 100%; aspect-ratio: 16 / 9; position: relative; box-shadow: 0 15px 50px rgba(0,0,0,0.8); border-radius: 12px; overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid rgba(255,255,255,0.08); background: #000; margin: 0 auto; }
.video-wrapper.live-glow { animation: livePlayerGlow 3s infinite alternate; }
@keyframes livePlayerGlow { 0% { box-shadow: 0 0 20px rgba(59,130,246,0.3); border-color: rgba(59,130,246,0.3); } 100% { box-shadow: 0 0 40px rgba(168,85,247,0.5); border-color: rgba(168,85,247,0.6); } }
@keyframes moviePlayerGlow { 0% { box-shadow: 0 0 20px rgba(139,92,246,0.3); border-color: rgba(139,92,246,0.3); } 100% { box-shadow: 0 0 40px rgba(168,85,247,0.6); border-color: rgba(168,85,247,0.8); } }

.mobile-fs-btn { display: none; position: absolute; top: 15px; left: 15px; z-index: 20; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); padding: 5px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); color: #fff; cursor: pointer; transition: 0.3s; }
.mobile-fs-btn:hover { background: rgba(59, 130, 246, 0.6); border-color: #3b82f6; }

.player-overlay-stats { position: absolute; top: 15px; right: 15px; left: auto; z-index: 20; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; font-weight: bold; color: #fff; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.4s; }
.video-wrapper.live-glow .player-overlay-stats { opacity: 1; }

.sympathy-canvas { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events: none; z-index: 15; overflow: hidden; }
.sympathy-controls { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 20; opacity: 0.3; transition: 0.3s; }
.video-wrapper:hover .sympathy-controls { opacity: 1; }
.sympathy-controls button { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; transition: 0.2s; backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; padding: 0; }
.sympathy-controls button:hover { transform: scale(1.2); border-color: #ef4444; background: rgba(239, 68, 68, 0.2); box-shadow: 0 0 15px rgba(239,68,68,0.5); }

.flying-emoji { position: absolute; bottom: 20px; right: 5%; font-size: 2.5rem; animation: flyUpAndFade 2.5s ease-out forwards; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)); z-index: 100; pointer-events: none; }
@keyframes flyUpAndFade { 0% { transform: translateY(0) scale(0.5) rotate(-15deg); opacity: 0; } 20% { opacity: 1; transform: translateY(-30px) scale(1.3) rotate(15deg); } 50% { transform: translateY(-100px) scale(1) rotate(-10deg); } 100% { transform: translateY(-250px) scale(0.8) rotate(10deg); opacity: 0; } }

.video-js { width: 100%; height: 100%; border-radius: inherit; }
.vjs-error-display { display: none !important; }
.video-js .vjs-big-play-button { display: none !important; }
.video-js.autoplay-failed .vjs-big-play-button { display: flex !important; }

.vjs-custom-theme.video-js { background-color: transparent; border-radius: 12px; }
.vjs-custom-theme .vjs-control-bar { background: rgba(15, 23, 42, 0.4) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; width: 96% !important; left: 2% !important; bottom: 15px !important; height: 45px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex !important; align-items: center; padding: 0 10px; transition: opacity 0.3s ease, bottom 0.3s ease; box-sizing: border-box !important; z-index: 10; flex-wrap: nowrap !important; }
.vjs-custom-theme.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 0; bottom: -10px; }
.vjs-custom-theme .vjs-big-play-button { background: rgba(59, 130, 246, 0.6) !important; backdrop-filter: blur(5px); border: 2px solid rgba(255, 255, 255, 0.2) !important; border-radius: 50% !important; width: 80px !important; height: 80px !important; line-height: 75px !important; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s !important; }
.vjs-custom-theme:hover .vjs-big-play-button { background: rgba(168, 85, 247, 0.8) !important; transform: scale(1.1); }
.vjs-custom-theme .vjs-play-progress { background: linear-gradient(90deg, #3b82f6, #a855f7) !important; border-radius: 4px; }
.vjs-custom-theme .vjs-slider { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
.vjs-custom-theme .vjs-progress-control { display: none !important; }
.vjs-custom-theme.vjs-vod-mode .vjs-progress-control { display: flex !important; flex: 1 1 auto; align-items: center; justify-content: center; margin: 0 12px; }
.vjs-custom-theme .vjs-progress-holder { display: flex !important; align-items: center; width: 100%; height: 6px; border-radius: 3px; margin: 0; position: relative; }
.vjs-custom-theme .vjs-slider { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.vjs-custom-theme .vjs-play-progress { background: linear-gradient(90deg, #3b82f6, #a855f7) !important; border-radius: 4px; box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); position: absolute; height: 100%; left: 0; top: 0; }
.vjs-custom-theme .vjs-play-progress:before { font-size: 1.2rem !important; color: #fff; text-shadow: 0 0 8px #a855f7; top: 50% !important; transform: translateY(-50%); position: absolute; right: -0.5em; }
.vjs-custom-theme .vjs-load-progress { background: rgba(255, 255, 255, 0.1); border-radius: 4px; height: 100%; position: absolute; top: 0; left: 0; }
.vjs-custom-theme .vjs-load-progress div { background: rgba(255, 255, 255, 0.2); border-radius: 4px; height: 100%; }

.vjs-custom-theme .vjs-time-control { display: none !important; }
.vjs-custom-theme.vjs-vod-mode .vjs-time-control { 
    display: flex !important; 
    align-items: center; 
    justify-content: center; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 0.85rem; 
    font-weight: 800; 
    color: #cbd5e1; 
    flex-shrink: 0; 
    height: 100%; 
    margin: 0; 
    padding: 0 3px; 
}
.vjs-custom-theme.vjs-vod-mode .vjs-remaining-time,
.vjs-custom-theme.vjs-vod-mode .custom-stream-timer,
.vjs-custom-theme.vjs-vod-mode .vjs-live-control { display: none !important; }

#offline-message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; background: #020409; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.8s; overflow: hidden; }
#offline-message.active { opacity: 1; visibility: visible; }
#cosmicCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: grab; touch-action: none; }
#cosmicCanvas:active { cursor: grabbing; }

.offline-content-wrapper { position: relative; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 12px; background: rgba(5, 8, 17, 0.5); padding: 25px 40px; border-radius: 20px; backdrop-filter: blur(12px); border: 1px solid rgba(168, 85, 247, 0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(168, 85, 247, 0.2); pointer-events: none; user-select: none; text-align: center; width: 90%; max-width: 400px; }
.offline-text { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.2rem; color: #f8fafc; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 15px rgba(59, 130, 246, 0.8); }
.offline-icon-wrapper { position: relative; display: flex; align-items: center; justify-content: center; color: #3b82f6; }
.offline-icon-wrapper svg { filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)); animation: floatingOffline 3s alternate infinite ease-in-out; }
@keyframes floatingOffline { 0% { transform: translateY(3px) scale(0.95); } 100% { transform: translateY(-5px) scale(1.05); } }

.space-stars { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 1; background: transparent; background-image: radial-gradient(1px 1px at 10% 20%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 30% 40%, #cbd5e1 100%, transparent), radial-gradient(2px 2px at 50% 60%, #fff 100%, transparent), radial-gradient(1px 1px at 70% 80%, #a855f7 100%, transparent), radial-gradient(2px 2px at 90% 10%, #3b82f6 100%, transparent); background-size: 120px 120px; animation: rotateSpace 120s linear infinite; opacity: 0.6; }

.planet { position: absolute; border-radius: 50%; z-index: 10; }
.cosa-nostra-planet { width: 320px; height: 320px; background: radial-gradient(circle at 35% 35%, #4c1d95, #0f172a 75%, #000); box-shadow: inset -25px -25px 60px rgba(0,0,0,0.9), inset 10px 10px 30px rgba(168, 85, 247, 0.4), 0 0 80px rgba(168, 85, 247, 0.6), 0 0 140px rgba(59, 130, 246, 0.3); display: flex; align-items: center; justify-content: center; animation: floatCosaNostra 14s ease-in-out infinite alternate; }
.planet-ring { position: absolute; width: 480px; height: 130px; border-radius: 50%; border: 18px solid rgba(168, 85, 247, 0.5); border-top-color: transparent; border-bottom-color: rgba(59, 130, 246, 0.8); transform: rotate(25deg); box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), inset 0 0 25px rgba(59, 130, 246, 0.6); animation: pulseRing 5s infinite alternate; }
.planet-text { position: absolute; z-index: 15; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 2.2rem; color: #fff; text-transform: uppercase; letter-spacing: 8px; text-align: center; text-shadow: 0 0 20px #a855f7, 0 0 40px #3b82f6, 0 0 60px #fff; transform: rotate(-10deg); }

.small-planet-1 { width: 110px; height: 110px; top: 8%; right: 12%; background: radial-gradient(circle at 30% 30%, #38bdf8, #0369a1 70%, #000); box-shadow: inset -12px -12px 25px rgba(0,0,0,0.9), 0 0 35px rgba(56, 189, 248, 0.5); animation: orbitSlow 45s linear infinite; }
.small-planet-2 { width: 65px; height: 65px; bottom: 12%; left: 10%; background: radial-gradient(circle at 30% 30%, #ef4444, #7f1d1d 70%, #000); box-shadow: inset -8px -8px 20px rgba(0,0,0,0.9), 0 0 25px rgba(239, 68, 68, 0.5); animation: floatSmall 9s ease-in-out infinite alternate; }

@keyframes rotateSpace { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes floatCosaNostra { 0% { transform: scale(1) translateY(0) rotate(0deg); } 100% { transform: scale(1.03) translateY(-25px) rotate(2deg); } }
@keyframes pulseRing { 0% { opacity: 0.8; transform: rotate(25deg) scale(0.95); } 100% { opacity: 1; transform: rotate(25deg) scale(1.02); } }
@keyframes orbitSlow { from { transform: rotate(0deg) translateX(100px) rotate(0deg); } to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } }
@keyframes floatSmall { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-40px) translateX(30px); } }

.stream-alert-banner { flex-shrink: 0; background: linear-gradient(90deg, rgba(15,23,42,0.4) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(15,23,42,0.4) 100%); border-top: 1px solid rgba(139, 92, 246, 0.2); border-bottom: 1px solid rgba(139, 92, 246, 0.2); padding: 8px 15px; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 800; font-size: 0.8rem; letter-spacing: 2px; color: #cbd5e1; text-transform: uppercase; position: relative; overflow: hidden; transition: background 0.5s ease; }
.stream-alert-banner.live-mode { background: linear-gradient(90deg, rgba(15,23,42,0.6) 0%, rgba(239, 68, 68, 0.15) 50%, rgba(15,23,42,0.6) 100%); border-color: rgba(239, 68, 68, 0.4); color: #fff; text-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
.alert-number { color: #a855f7; text-shadow: 0 0 10px rgba(168, 85, 247, 0.6); font-size: 0.85rem;} .live-mode .alert-number { color: #ef4444; }
.alert-pulse { inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; transition: all 0.3s ease; }

.other-streams-section { padding: 25px; background: rgba(5, 8, 17, 0.8); border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; }
.other-streams-section h3 { font-size: 1.1rem; color: #fff; font-weight: 900; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; }

.other-streams-section h3 { 
    cursor: pointer; 
    user-select: none; 
    justify-content: space-between; 
}
.other-streams-section h3 .toggle-icon { 
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.other-streams-section h3.active .toggle-icon { 
    transform: rotate(180deg); 
}

.other-streams-section .streams-grid {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: -20px; 
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.other-streams-section .streams-grid.active {
    max-height: 2000px; 
    opacity: 1;
    margin-top: 0;
}


.streams-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.stream-card { flex: 1 1 calc(33.333% - 20px); min-width: 250px; background: rgba(15,23,42,0.8); border-radius: 12px; overflow: hidden; border: 1px solid rgba(59,130,246,0.2); transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; text-decoration: none; display: block; }
.stream-card:hover { transform: translateY(-5px); border-color: #3b82f6; box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3); }
.stream-thumb { width: 100%; aspect-ratio: 16/9; background: #0f172a; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.stream-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: 0.3s; }
.stream-card:hover .stream-thumb img { opacity: 1; transform: scale(1.05); }
.stream-badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 2; transition: all 0.3s ease; }
.badge-live { background: #ef4444; border: 1px solid rgba(255,255,255,0.3); animation: liveBlink 2s infinite alternate; }
.stream-info { padding: 15px; display: flex; flex-direction: column; gap: 5px; }
.stream-title { font-size: 0.95rem; font-weight: 800; color: #f8fafc; line-height: 1.3; }
.stream-author { font-size: 0.8rem; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.create-stream-card { border: 2px dashed rgba(59,130,246,0.4) !important; background: rgba(15,23,42,0.4) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.create-stream-card:hover { border-color: #3b82f6 !important; background: rgba(59,130,246,0.1) !important; box-shadow: 0 0 20px rgba(59,130,246,0.3) !important; transform: translateY(-5px); }
.create-stream-card .plus-icon { font-size: 3rem; color: #3b82f6; margin-bottom: 10px; transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.create-stream-card:hover .plus-icon { transform: scale(1.2) rotate(90deg); color: #60a5fa; text-shadow: 0 0 15px rgba(59,130,246,0.8); }

.site-footer { flex-shrink: 0; padding: 15px 20px; text-align: center; font-size: 0.65rem; color: #64748b; letter-spacing: 6px; font-weight: 800; user-select: none; opacity: 0.4; transition: 0.4s; } .site-footer:hover { opacity: 1; color: #94a3b8; }

.chat-sidebar { position: relative; z-index: 10; width: 350px; background: rgba(15, 23, 42, 0.6); border-left: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; flex-shrink: 0; box-shadow: -10px 0 30px rgba(0,0,0,0.5); backdrop-filter: blur(10px); transition: all 0.3s ease; }

.chat-header { padding: 12px 15px; background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.chat-title { margin: 0; font-weight: 900; font-size: 0.9rem; color: #d8b4fe; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.chat-header-stats { display: flex; align-items: center; gap: 10px; }

.channel-points { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4); color: #fcd34d; padding: 4px 8px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: 0.3s; box-shadow: inset 0 0 10px rgba(245,158,11,0.1); }
.channel-points:hover { background: rgba(245, 158, 11, 0.25); color: #fff; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), inset 0 0 10px rgba(245,158,11,0.2); transform: translateY(-1px); }
.cp-icon { font-size: 0.9rem; }
@keyframes pointEarned { 0% { transform: scale(1); color: #fcd34d; } 50% { transform: scale(1.4); color: #10b981; } 100% { transform: scale(1); color: #fcd34d; } }
.point-up { animation: pointEarned 0.8s ease-out; }

.online-toggle { font-size: 0.75rem; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; border-radius: 6px; transition: 0.3s; font-weight: 700; text-transform: uppercase; border: 1px solid transparent; }
.online-toggle:hover { background: rgba(255,255,255,0.05); color: #fff; border-color: rgba(255,255,255,0.1); }
.online-indicator-dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; box-shadow: 0 0 5px #10b981; animation: blink 2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }


.music-player-inline { 
    display: none !important; 
    position: absolute; 
    top: 60px; 
    right: 15px; 
    width: calc(100% - 30px); 
    max-width: 320px;
    background: rgba(15, 23, 42, 0.98); 
    border: 1px solid rgba(59, 130, 246, 0.4); 
    border-radius: 12px; 
    padding: 10px 15px; 
    align-items: center; 
    gap: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.9); 
    z-index: 1000; 
    backdrop-filter: blur(10px);
}
.music-player-inline.show-mobile-player { display: flex !important; animation: slideDownFade 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.mobile-music-toggle { display: flex !important; }
.music-player-inline:has(.mp-icon-inline.playing) { border-bottom: 1px solid rgba(59, 130, 246, 0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(168, 85, 247, 0.2); }
.mp-info-inline { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mp-title-inline { font-weight: 800; font-size: 0.7rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-status-inline { font-size: 0.6rem; color: #94a3b8; font-weight: 600; }
.mp-controls-inline { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mp-btn-inline { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 0.7rem;}
.mp-btn-inline:hover { background: #3b82f6; border-color: #3b82f6; transform: scale(1.1); }
.mp-vol-inline { width: 45px; accent-color: #a855f7; cursor: pointer; }

.chat-messages-container { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(168, 85, 247, 0.3) transparent; scroll-behavior: smooth; }
.chat-messages::-webkit-scrollbar { width: 6px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.4); border-radius: 3px; }

.chat-scroll-btn { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: rgba(59, 130, 246, 0.95); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; cursor: pointer; z-index: 15; box-shadow: 0 4px 15px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 6px; transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid #60a5fa;}
.chat-scroll-btn:hover { background: #2563eb; transform: translateX(-50%) scale(1.05); }
.chat-scroll-btn.hidden { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(20px); pointer-events: none; }
.new-msg-badge { background: #ef4444; color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 900; }
.chat-load-more { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; width: 100%; padding: 8px; text-align: center; border-radius: 8px; font-size: 0.75rem; font-weight: bold; cursor: pointer; transition: 0.3s; font-family: inherit; margin-bottom: 10px; }
.chat-load-more:hover { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; color: #fff; }
.chat-load-more:disabled { opacity: 0.5; cursor: not-allowed; }

@keyframes messageSlideInBounce { 0% { opacity: 0; transform: translateX(30px) scale(0.95); } 50% { opacity: 1; transform: translateX(-4px) scale(1.01); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes avatarPop { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(15deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes popReaction { 0% { transform: scale(0); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } }


.message { 
    position: relative; 
    background: rgba(30, 41, 59, 0.4); 
    padding: 12px 15px; 
    border-radius: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.02);
    word-wrap: break-word; 
    font-size: var(--chat-font-size, 0.85rem);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    animation: messageSlideInBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
    transform-origin: left center; 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 6px;
}

.message:hover { 
    transform: scale(1.01) translateY(-2px); 
    background: rgba(30, 58, 138, 0.3) !important; 
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(59, 130, 246, 0.1) !important; 
    z-index: 2; 
}

.message.mentioned-msg { 
    border-color: rgba(239, 68, 68, 0.3) !important; 
    box-shadow: inset 4px 0 20px -5px rgba(239, 68, 68, 0.4), 0 4px 15px rgba(0,0,0,0.2) !important; 
}
.message.role-admin { 
    border-color: rgba(239, 68, 68, 0.2) !important; 
    box-shadow: inset 4px 0 20px -5px rgba(239, 68, 68, 0.3), 0 4px 15px rgba(0,0,0,0.2) !important; 
}
.message.role-vip { 
    border-color: rgba(245, 158, 11, 0.2) !important; 
    box-shadow: inset 4px 0 20px -5px rgba(245, 158, 11, 0.3), 0 4px 15px rgba(0,0,0,0.2) !important; 
}
.message.role-admin:hover { box-shadow: -5px 0 25px rgba(239, 68, 68, 0.3) !important; }
.message.role-vip:hover { box-shadow: -5px 0 25px rgba(245, 158, 11, 0.3) !important; }
.message.system-msg { border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.05); text-align: center; color: #d8b4fe; font-size: 0.75rem; font-weight:bold; box-shadow: none;}
.message.system-error { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); text-align: center; color: #fca5a5; font-size: 0.75rem; font-weight: bold; box-shadow: none;}

.msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 0.75rem; gap: 8px; }
.msg-author-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.msg-avatar, .msg-avatar-placeholder { 
    width: 20px; 
    height: 20px; 
    min-width: 20px;
    min-height: 20px; 
    flex-shrink: 0; 
    border-radius: 50%; 
    border: 1px solid rgba(255,255,255,0.2); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    position: relative; 
}
.msg-avatar { object-fit: cover; }
.msg-avatar-placeholder { background: #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 900; color: #fff; text-transform: uppercase; }
.msg-avatar:hover, .msg-avatar-placeholder:hover { animation: avatarPop 0.5s ease forwards; border-color: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.8); z-index: 10; }

.msg-author { font-weight: 800; color: #94a3b8; transition: 0.3s;} .msg-author:hover { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.role-admin .msg-author { color: #fca5a5; } .role-vip .msg-author { color: #fcd34d; }
.msg-time { color: #64748b; font-size: 0.65rem; }
.msg-text { color: #cbd5e1; line-height: 1.4; font-weight: 500; }
.msg-image { max-width: 100%; border-radius: 8px; margin-top: 5px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: 0.3s;}

.rank-badge { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1); color: #cbd5e1; font-weight: 800; }
.role-badge { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; font-weight: 900; letter-spacing: 1px; }
.badge-admin { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.5); }
.badge-vip { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.5); }
.mention-me { color: #3b82f6; font-weight: 800; background: rgba(59, 130, 246, 0.2); padding: 0 4px; border-radius: 4px; border: 1px solid #3b82f6; text-shadow: 0 0 5px #3b82f6;}
.mention-other { color: #a855f7; font-weight: 800; }

.chat-actions { position: absolute; top: -10px; right: 5px; display: none; gap: 5px; background: #0f172a; padding: 4px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.8); border: 1px solid rgba(59,130,246,0.3); z-index: 5; }
.message:hover .chat-actions { display: flex; }
.action-btn { background: none; border: none; color: #94a3b8; font-size: 14px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px;}
.action-btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform: scale(1.1); }
.action-btn.del:hover { background: #ef4444; color: #fff; }
.mod-quick-btn { background: none; border: none; font-size: 14px; cursor: pointer; filter: grayscale(1); transition: 0.2s; display: flex; align-items: center; justify-content: center; border-radius: 4px; padding: 2px;}
.mod-quick-btn:hover { filter: grayscale(0); background: rgba(255,255,255,0.1); transform: scale(1.2); }

.msg-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.reaction-badge { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 2px 8px; font-size: 0.75rem; color: #fff; cursor: pointer; transition: all 0.2s ease; animation: popReaction 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.reaction-badge:hover { background: rgba(59, 130, 246, 0.3); border-color: #3b82f6; transform: scale(1.05); }
.reaction-badge.reacted { background: rgba(59, 130, 246, 0.4); border-color: #3b82f6; box-shadow: 0 0 10px rgba(59,130,246,0.3); }

.typing-indicator { font-size: 0.7rem; color: #a855f7; padding: 0 15px 5px; height: 15px; opacity: 0; transition: opacity 0.3s; font-weight: bold; }

.mod-panel-header { background: rgba(239, 68, 68, 0.15); color: #fca5a5; text-align: center; font-size: 0.7rem; font-weight: bold; padding: 6px; cursor: pointer; border-top: 1px solid rgba(239, 68, 68, 0.3); border-bottom: 1px solid rgba(239, 68, 68, 0.3); transition: 0.3s; }
.mod-panel-header:hover { background: rgba(239, 68, 68, 0.3); color: #fff; }
.mod-panel { background: rgba(15, 23, 42, 0.9); padding: 10px 15px; display: none; gap: 5px; justify-content: center; flex-wrap: wrap; flex-shrink: 0; border-bottom: 1px solid #ef4444; }
.mod-panel.active { display: flex; }
.mod-btn { background: rgba(15,23,42,0.8); border: 1px solid #ef4444; color: #fca5a5; padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; cursor: pointer; font-weight: bold; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.mod-btn:hover { background: #ef4444; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(239,68,68,0.4); }

.chat-input-area { padding: 10px 15px 15px; background: rgba(0,0,0,0.6); border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; position: relative; transition: all 0.3s ease; }
.input-row { display: flex; gap: 6px; align-items: center; width: 100%; }
.chat-input { 
    flex: 1 1 auto; 
    min-width: 0; 
    background: rgba(15, 23, 42, 0.5); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 20px; 
    padding: 12px 18px; 
    color: #fff; 
    font-family: inherit; 
    font-size: 0.85rem; 
    outline: none; 
    transition: all 0.3s ease; 
    backdrop-filter: blur(10px);
}
.chat-input:focus { 
    border-color: #3b82f6; 
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); 
    transform: translateY(-1px); 
}
.chat-input[readonly] { opacity: 0.7; cursor: not-allowed; }

.tool-btn { flex-shrink: 0; background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 4px; transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: grayscale(1); display: flex; align-items: center; justify-content: center; }
.tool-btn:hover { filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.8)) grayscale(0); transform: scale(1.25) translateY(-2px); }
.send-btn { flex-shrink: 0; background: rgba(59, 130, 246, 0.15); border: 1px solid #3b82f6; color: #93c5fd; border-radius: 10px; padding: 0 14px; font-weight: 800; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; align-items: center; justify-content: center; height: 42px;}
.send-btn:hover { background: #3b82f6; color: #fff; box-shadow: 0 0 25px rgba(59, 130, 246, 0.8); transform: scale(1.08); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.emoji-picker { display: none; position: absolute; bottom: 65px; left: 15px; background: rgba(15,23,42,0.95); border: 1px solid rgba(59, 130, 246, 0.3); padding: 10px; border-radius: 12px; gap: 5px; box-shadow: 0 -5px 20px rgba(0,0,0,0.5); z-index: 20; grid-template-columns: repeat(6, 1fr); }
.emoji-picker.active { display: grid; }
.emoji-item { cursor: pointer; font-size: 1.2rem; text-align: center; transition: 0.2s; padding: 5px; border-radius: 6px; }
.emoji-item:hover { background: rgba(255,255,255,0.1); transform: scale(1.2); }
.guest-mode .emoji-item.premium { opacity: 0.3; filter: grayscale(1); cursor: not-allowed; }

.friend-tag { display: inline-block; padding: 4px 10px; background: rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.5); color: #d8b4fe; border-radius: 15px; font-size: 0.75rem; margin-right: 5px; margin-bottom: 5px; font-weight: bold; transition: all 0.3s ease; }

.casino-list { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.casino-card { display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 12px; border-radius: 12px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.casino-card:hover { transform: translateY(-5px); border-color: #ec4899; background: rgba(236, 72, 153, 0.05); box-shadow: 0 10px 20px rgba(236, 72, 153, 0.2); }
.casino-avatar { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.casino-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.casino-name { font-weight: 900; color: #fff; font-size: 1.1rem; }
.casino-desc { font-size: 0.75rem; color: #94a3b8; font-weight: 600; line-height: 1.3; }
.casino-btn { background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 8px; font-weight: 800; font-size: 0.8rem; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; display: inline-block;}
.casino-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6); color: #fff;}

.rules-nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.rule-tab { 
    flex: 1 1 auto; 
    background: rgba(15,23,42,0.6); 
    border: 1px solid rgba(255,255,255,0.05); 
    color: #94a3b8; 
    font-weight: 800; 
    font-family: inherit; 
    font-size: 0.75rem; 
    padding: 10px 14px; 
    cursor: pointer; 
    transition: 0.3s; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}
.rule-tab:hover { background: rgba(255,255,255,0.05); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.rule-tab.active { background: rgba(168,85,247,0.15); border-color: #a855f7; color: #d8b4fe; box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.2); }

.rule-content { display: none; flex-direction: column; gap: 8px; color: #cbd5e1; font-size: 0.85rem; line-height: 1.5; }
.rule-content.active { display: flex; animation: fadeIn 0.3s ease; }
.rule-content b { color: #fff; }
.rule-content .highlight { color: #a855f7; font-weight: 800; }
.rule-item-box { display: flex; align-items: flex-start; gap: 15px; background: rgba(30,41,59,0.5); border: 1px solid rgba(255,255,255,0.05); border-left: 4px solid #3b82f6; padding: 15px; border-radius: 10px; transition: 0.3s; margin-bottom:0; }
.rule-item-box:hover { background: rgba(59,130,246,0.1); border-left-color: #a855f7; box-shadow: 0 4px 15px rgba(168,85,247,0.1); transform: translateX(4px); }
.rule-item-num { font-size: 1.4rem; font-weight: 900; color: #3b82f6; opacity: 0.4; transition: 0.3s; margin-top: -3px; }
.rule-item-box:hover .rule-item-num { color: #a855f7; opacity: 1; transform: scale(1.1); }

.info-card { display: flex; align-items: center; gap: 15px; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(59, 130, 246, 0.3); padding: 15px; border-radius: 12px; margin-bottom: 12px; transition: 0.3s; }
.info-card:hover { transform: translateY(-3px); border-color: #a855f7; box-shadow: 0 5px 20px rgba(168, 85, 247, 0.2); background: rgba(30, 41, 59, 0.8); }
.info-card-icon { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); transition: 0.3s; }
.info-card:hover .info-card-icon { transform: scale(1.1) rotate(5deg); }
.info-card-text { display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; line-height: 1.5; color: #cbd5e1; justify-content: center; }
.info-card-text p { margin: 0; }
.contact-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.contact-btn { background: rgba(14, 165, 233, 0.1); border: 1px solid #0ea5e9; color: #38bdf8; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 800; font-size: 0.75rem; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; }
.contact-btn:hover { background: #0ea5e9; color: #fff; box-shadow: 0 0 15px rgba(14, 165, 233, 0.5); transform: translateY(-2px); }

.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-bottom: 20px; }
.reward-card { border-radius: 16px; padding: 20px 15px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-align: center; gap: 12px; min-height: 150px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.reward-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%); z-index: 1; pointer-events: none; }
.reward-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.3); }
.reward-card.disabled { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; border-color: transparent;}
.reward-card > * { position: relative; z-index: 2; }
.reward-icon { font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); transition: transform 0.3s ease; }
.reward-card:hover .reward-icon { transform: scale(1.15) rotate(5deg); }
.reward-cost { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); color: #fcd34d; padding: 4px 12px; border-radius: 12px; font-weight: 900; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 4px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); border: 1px solid rgba(245, 158, 11, 0.3); }
.reward-cost::before { content: '🪙'; font-size: 0.8rem; }
.reward-title { font-size: 0.8rem; font-weight: 800; line-height: 1.3; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.pinned-rewards-container { 
    position: absolute; top: 0; left: 0; width: 100%; z-index: 20; 
    display: flex; flex-direction: column; gap: 5px; padding: 10px; 
    pointer-events: none; 
    max-height: 50vh; 
    overflow-y: auto; 
    scrollbar-width: none; 
}
.pinned-rewards-container::-webkit-scrollbar { 
    display: none; 
}
.pinned-reward { 
    flex-shrink: 0; 
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.85), rgba(139, 92, 246, 0.85)); 
    backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.4); 
    border-radius: 10px; padding: 8px 12px; color: #fff; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.2); 
    display: flex; justify-content: space-between; align-items: center; 
    font-size: 0.8rem; pointer-events: auto; 
    animation: slideDownFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
@keyframes slideDownFade { from { transform: translateY(-20px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.pinned-reward-info { display: flex; flex-direction: column; gap: 3px; }
.pinned-reward-title { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pinned-reward-user { font-weight: 600; font-size: 0.7rem; color: #fdf2f8; display: flex; align-items: center; gap: 5px; }
.pinned-reward-close { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2); color: #4ade80; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: 0.2s; }
.pinned-reward-close:hover { background: #22c55e; border-color: #4ade80; color: #fff; transform: scale(1.1) rotate(5deg); box-shadow: 0 0 10px #22c55e; }

.widget-overlay, .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(0,0,0,0.85); z-index: 2000000; opacity: 0; visibility: hidden; transition: 0.4s ease; backdrop-filter: blur(8px); }
.widget-overlay.active, .modal-overlay.active { opacity: 1; visibility: visible; }

.floating-widget, .modal-content { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 95%; max-width: 1200px; height: 85vh; max-height: 95dvh; background: #0f172a; border: 1px solid rgba(59, 130, 246, 0.4); border-radius: 16px; z-index: 2000001; display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(0.95); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 0 20px rgba(59, 130, 246, 0.2); }
.floating-widget.active, .modal-overlay.active .modal-content { opacity: 1; visibility: visible; transform: scale(1); }

.auth-modal-content, .modal-content { 
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) scale(0.95) !important;
    height: auto !important; 
    max-height: 85dvh !important; 
    max-width: 450px !important; 
    margin: 0 auto !important; 
}

.floating-widget.active.auth-modal-content, .modal-overlay.active .modal-content { 
    transform: translateY(-50%) scale(1) !important; 
}
.auth-modal-content .widget-body, .modal-content .modal-body { flex: 0 1 auto !important; }

.widget-header, .modal-header { padding: 15px 20px; background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.widget-header h3, .modal-header span { color: #fff; font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 10px; margin:0;}
.widget-close, .modal-close { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; font-size: 1.2rem; cursor: pointer; transition: all 0.3s; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.widget-close:hover, .modal-close:hover { color: #ef4444; background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); transform: scale(1.1) rotate(90deg); }
.widget-body, .modal-body { flex: 1 1 auto; position: relative; overflow-y: auto; overflow-x: hidden; padding: 25px; line-height: 1.6; color: #cbd5e1; -webkit-overflow-scrolling: touch; }
.widget-body iframe { width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0; }

.msg-context-menu { position: fixed; display: none; z-index: 2000005; width: 280px; padding: 2px; background: linear-gradient(135deg, #3b82f6, #a855f7); border-radius: 14px; box-shadow: 0 15px 40px rgba(0,0,0,0.9); transform-origin: top left; }
.msg-context-menu-inner { background: #1e293b; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.context-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; margin-bottom: 4px; }
.context-author { font-weight: bold; color: #d8b4fe; font-size: 0.9rem; }
.context-close-btn { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.context-btn { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: none; padding: 10px 15px; border-radius: 8px; color: #fff; cursor: pointer; font-size: 0.9rem; font-family: inherit; font-weight: 600; transition: all 0.2s ease; }
.context-btn:hover { background: rgba(59, 130, 246, 0.3); transform: translateX(5px); }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 5px; }
.context-emoji { background: none; border: none; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: all 0.2s;}
.context-emoji:hover { background: rgba(255,255,255,0.1); transform: scale(1.2); }

.auth-tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.auth-tab { flex: 1; background: transparent; border: none; color: #94a3b8; font-weight: 800; font-family: inherit; font-size: 0.8rem; padding: 10px 5px; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.auth-tab.active { color: #3b82f6; border-bottom: 2px solid #3b82f6; }
.auth-form { display: none; flex-direction: column; } .auth-form.active { display: flex; }
.forgot-pass-link { font-size: 0.75rem; color: #94a3b8; text-align: center; margin-top: 15px; cursor: pointer; text-decoration: underline; transition: 0.3s; }
.forgot-pass-link:hover { color: #fff; }
.profile-container { display: flex; flex-direction: column;}
.profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;}
.profile-avatar { 
    width: 100px; 
    height: 100px; 
    min-width: 100px; 
    min-height: 100px; 
    flex-shrink: 0; 
    border-radius: 50%; 
    border: 3px solid #3b82f6; 
    object-fit: cover; 
    background: #000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 2rem; 
    color: #3b82f6; 
    text-transform: uppercase; 
    animation: profileAvatarEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, profileAvatarPulse 3s infinite alternate 0.8s; 
}
@keyframes profileAvatarEntrance { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes profileAvatarPulse { 0% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); transform: scale(1); border-color: #3b82f6; } 100% { box-shadow: 0 0 35px rgba(168, 85, 247, 0.6); transform: scale(1.05); border-color: #a855f7; color: #a855f7; } }
.profile-info h2 { font-size: 1.8rem; margin-bottom: 5px; animation: slideDownFade 0.6s ease-out forwards; }
.profile-container > div:not(.profile-header) { animation: slideInRightItem 0.5s ease-out backwards; animation-delay: 0.2s; }
.profile-form { display: flex; flex-direction: column; gap: 15px; animation: slideInRightItem 0.5s ease-out backwards; animation-delay: 0.4s; }
.profile-container > button { animation: fadeIn 0.5s ease-out backwards; animation-delay: 0.6s; }
.profile-form label { font-size: 0.8rem; color: #94a3b8; font-weight: bold; }
.tool-btn.recording-active { color: #ef4444 !important; filter: none !important; animation: pulseRecord 1s infinite alternate; }
@keyframes pulseRecord { 0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.5)); } 100% { transform: scale(1.2); filter: drop-shadow(0 0 15px rgba(239, 68, 68, 1)); } }

.custom-voice-player { display: flex; align-items: center; gap: 12px; background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 5px 12px 5px 5px; width: 280px; max-width: 100%; margin-top: 5px; }
.voice-play-btn { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #60a5fa); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); position: relative; padding: 0; }
.voice-play-btn:hover { transform: scale(1.08); box-shadow: 0 6px 15px rgba(59, 130, 246, 0.5); }
.voice-play-btn:active { transform: scale(0.95); }
.voice-play-btn::before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 3px; transition: 0.2s ease; }
.voice-play-btn.is-playing::before { border-style: double; border-width: 0 0 0 10px; height: 12px; margin-left: 0; }
.voice-play-btn.is-playing { animation: voicePulse 1.5s infinite; }
@keyframes voicePulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }

.voice-progress-wrapper { flex: 1; position: relative; height: 24px; display: flex; align-items: center; cursor: pointer; }
.voice-progress-bg { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; position: relative; }
.voice-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #3b82f6; border-radius: 2px; }
.voice-progress-thumb { position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.5); pointer-events: none; }
.voice-time { font-size: 0.75rem; color: #94a3b8; min-width: 35px; text-align: right; font-weight: 600; }

.tools-wrapper { position: relative; display: flex; align-items: center; }
.toggle-tools-btn { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.toggle-tools-btn.active { transform: rotate(45deg); color: #3b82f6; filter: grayscale(0); }
.tools-menu { position: absolute; bottom: calc(100% + 15px); left: -5px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 12px; padding: 5px 10px; display: flex; gap: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.95); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 20; backdrop-filter: blur(10px); }
.tools-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.tools-menu::after { content: ''; position: absolute; bottom: -6px; left: 14px; width: 10px; height: 10px; background: rgba(15, 23, 42, 0.95); border-bottom: 1px solid rgba(59, 130, 246, 0.3); border-right: 1px solid rgba(59, 130, 246, 0.3); transform: rotate(45deg); }

.chat-input.recording-active-input { color: #ef4444 !important; font-weight: 800; background: rgba(239, 68, 68, 0.1) !important; border-color: #ef4444 !important; letter-spacing: 1px; }

.music-player-inline { transition: all 0.4s ease; }
.music-player-inline:has(.mp-icon-inline.playing) { background: rgba(15, 23, 42, 0.95); border-bottom: 1px solid #a855f7; box-shadow: inset 0 -10px 20px rgba(168, 85, 247, 0.15); }
.mp-icon-inline { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #a855f7); display: flex; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); transition: 0.3s; }
.mp-icon-inline.playing { box-shadow: 0 0 15px #a855f7, 0 0 5px #fff; }
.eq-bar { width: 3px; height: 4px; background: #fff; border-radius: 2px; transition: height 0.2s; }
.mp-icon-inline.playing .eq-bar { animation: eqPulse linear infinite alternate; }
.mp-icon-inline.playing .eq-bar:nth-child(1) { animation-duration: 0.4s; }
.mp-icon-inline.playing .eq-bar:nth-child(2) { animation-duration: 0.6s; height: 10px; }
.mp-icon-inline.playing .eq-bar:nth-child(3) { animation-duration: 0.5s; }
@keyframes eqPulse { 0% { height: 4px; background: #fff; } 100% { height: 16px; background: #fcd34d; } }
.mp-icon-inline:not(.playing) { animation: playerIdleGlow 3s ease-in-out infinite; }
@keyframes playerIdleGlow { 0% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); transform: scale(1.05); } 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); transform: scale(1); } }
.mp-icon-inline:not(.playing) .eq-bar { animation: eqIdleWave 2s ease-in-out infinite alternate; background: #cbd5e1; }
.mp-icon-inline:not(.playing) .eq-bar:nth-child(1) { animation-delay: 0s; }
.mp-icon-inline:not(.playing) .eq-bar:nth-child(2) { animation-delay: 0.5s; }
.mp-icon-inline:not(.playing) .eq-bar:nth-child(3) { animation-delay: 0.2s; }
@keyframes eqIdleWave { 0% { height: 3px; opacity: 0.4; } 100% { height: 7px; opacity: 1; } }

.voice-delete-timer { font-size: 0.65rem; color: #ef4444; text-align: right; margin-top: 6px; font-weight: 700; letter-spacing: 0.5px; animation: pulseVoiceTimer 2s infinite alternate; }
@keyframes pulseVoiceTimer { 0% { opacity: 0.5; } 100% { opacity: 1; text-shadow: 0 0 8px rgba(239, 68, 68, 0.4); } }

.chat-scroll-btn { position: absolute; bottom: 20px; right: 20px; left: auto; transform: none; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); color: #38bdf8; width: 45px; height: 45px; padding: 0; border-radius: 50%; cursor: pointer; z-index: 15; box-shadow: 0 5px 20px rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid rgba(56, 189, 248, 0.4); }
.chat-scroll-btn:hover { background: #38bdf8; color: #fff; transform: scale(1.1); box-shadow: 0 0 20px rgba(56, 189, 248, 0.6); }
.chat-scroll-btn.hidden { opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; }
.new-msg-badge { position: absolute; top: -5px; right: -5px; background: #ef4444; color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 900; border: 2px solid #0f172a; animation: bounceBadge 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes bounceBadge { 0% { transform: scale(0); } 80% { transform: scale(1.3); } 100% { transform: scale(1); } }

.store-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: rgba(0,0,0,0.4); padding: 12px 20px; border-radius: 14px; border: 1px solid rgba(245, 158, 11, 0.2); box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }
.store-balance-box { display: flex; align-items: center; gap: 10px; }
.store-points-text { color: #fcd34d; font-weight: 900; font-size: 1.4rem; letter-spacing: 1px; text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);}
.animated-coin { font-size: 1.5rem; animation: spinCoin 3s infinite linear; display: inline-block; }
@keyframes spinCoin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

.buy-points-btn { background: linear-gradient(135deg, #a855f7, #ec4899); border: none; padding: 10px 18px; border-radius: 12px; color: #fff; font-weight: 900; font-size: 0.85rem; cursor: pointer; transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; animation: pulseBuyBtn 2s infinite alternate; }
.buy-points-btn:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 8px 25px rgba(236, 72, 153, 0.7); color: #fff; }
.buy-points-btn svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
@keyframes pulseBuyBtn { 0% { box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3); } 100% { box-shadow: 0 4px 25px rgba(236, 72, 153, 0.8); } }

#dailyBonusBtn { padding: 6px 12px; font-size: 0.75rem; border-radius: 8px; min-width: 140px; justify-content: center; }
#dailyBonusBtn svg { width: 14px; height: 14px; }
#dailyBonusBtn:disabled { cursor: not-allowed; transform: none; background: linear-gradient(270deg, #1e293b, #334155, #0f172a); background-size: 200% 200%; animation: timerBreathe 4s ease infinite; color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); display: flex; align-items: center; }
@keyframes timerBreathe { 0% { background-position: 0% 50%; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); } 50% { background-position: 100% 50%; box-shadow: inset 0 2px 15px rgba(0,0,0,0.8); color: #fff; } 100% { background-position: 0% 50%; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); } }

.reply-preview { display: flex; justify-content: space-between; align-items: center; background: rgba(59, 130, 246, 0.1); border-left: 3px solid #3b82f6; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 0.8rem; transition: all 0.3s ease; }
.reply-preview.hidden { display: none; }
.reply-preview-content { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.reply-preview-author { font-weight: 800; color: #60a5fa; }
.reply-preview-text { color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.reply-preview-close { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1rem; transition: 0.2s; }
.reply-preview-close:hover { color: #ef4444; transform: scale(1.2); }

.msg-quote { background: rgba(0, 0, 0, 0.25); border-left: 3px solid #3b82f6; padding: 6px 10px; margin-bottom: 8px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: background 0.2s; }
.msg-quote:hover { background: rgba(59, 130, 246, 0.15); }
.msg-quote-author { font-weight: bold; color: #60a5fa; margin-bottom: 2px; }
.msg-quote-text { color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.beta-badge { color: #ef4444 !important; font-size: 0.45em; border: 1px solid rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.15); padding: 3px 6px; border-radius: 6px; margin-left: 8px; letter-spacing: 1px; vertical-align: middle; line-height: 1; }

.pl-beta-text { 
    font-size: 1.0rem; 
    font-weight: 900; 
    margin-bottom: 5px; 
    text-transform: uppercase; 
    color: #fcd34d; 
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 0 25px rgba(245, 158, 11, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; 
    animation: betaTextFadeIn 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pl-beta-text span { 
    font-size: 0.65rem; 
    color: #fff; 
    background: rgba(239, 68, 68, 0.15);
    padding: 4px 10px;
    border-radius: 8px;
    letter-spacing: 2px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.8); 
    animation: betaBadgePulse 2s infinite alternate;
	text-transform: lowercase;
}

@keyframes betaTextFadeIn {
    0% { opacity: 0; transform: translateY(15px); letter-spacing: 0px; }
    100% { opacity: 1; transform: translateY(0); letter-spacing: 6px; }
}

@keyframes betaBadgePulse {
    0% { 
        border-color: rgba(239, 68, 68, 0.4); 
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.2), inset 0 0 5px rgba(239, 68, 68, 0.2); 
    }
    100% { 
        border-color: rgba(239, 68, 68, 1); 
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 15px rgba(239, 68, 68, 0.5); 
        transform: scale(1.05) rotate(2deg); /* Легкое увеличение и наклон */
    }
}

.stream-alert-popup { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); background: rgba(15, 23, 42, 0.85); border: 2px solid #a855f7; padding: 15px 30px; border-radius: 12px; color: #fff; text-align: center; z-index: 50; box-shadow: 0 0 30px rgba(168, 85, 247, 0.6); animation: popAlert 5s cubic-bezier(0.25, 1, 0.5, 1) forwards; pointer-events: none; }
.stream-alert-user { font-weight: 900; color: #fcd34d; font-size: 1.3rem; text-transform: uppercase; margin-bottom: 5px; text-shadow: 0 0 10px rgba(245, 158, 11, 0.8); }
.stream-alert-text { font-size: 1rem; color: #cbd5e1; }
@keyframes popAlert { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.8); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 15% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -20px) scale(0.8); } }

.admin-pinned-msg { 
    position: absolute; top: 0; left: 0; width: 100%; 
    background: linear-gradient(270deg, rgba(15,23,42,0.95), rgba(30,58,138,0.9), rgba(15,23,42,0.95)); 
    background-size: 200% 200%; 
    animation: pinnedBreathe 5s ease infinite, slideDownFade 0.4s ease forwards; 
    border-bottom: 1px solid rgba(59, 130, 246, 0.4); 
    border-left: 3px solid #3b82f6; 
    padding: 6px 12px; 
    font-size: 0.75rem;
    color: #fff; display: flex; align-items: center; gap: 12px; z-index: 15; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 15px rgba(59, 130, 246, 0.2); 
    backdrop-filter: blur(8px); overflow: hidden; 
    cursor: pointer; transition: background 0.3s;
}
.admin-pinned-msg.hidden { display: none; }
.admin-pinned-msg::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform: skewX(-20deg); animation: pinnedShine 6s infinite; pointer-events: none; }
.admin-pinned-icon { font-size: 1.1rem; animation: pinPulse 1.5s infinite alternate; }

.admin-pinned-text { 
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 
    color: #e2e8f0; font-weight: 500; font-size: 0.75rem; transition: all 0.3s ease;
}

.admin-pinned-msg.expanded { align-items: flex-start; z-index: 100; }
.admin-pinned-msg.expanded .admin-pinned-text { white-space: normal; word-break: break-word; }

.admin-pinned-author { font-size: 0.65rem; color: #60a5fa; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px;}


.admin-pinned-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.pin-arrow { font-size: 0.6rem; color: #94a3b8; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.05); }
.admin-pinned-msg.expanded .pin-arrow { transform: rotate(180deg); background: rgba(59,130,246,0.3); color: #fff; }
.pin-hide-btn { font-size: 1rem; color: #94a3b8; cursor: pointer; transition: 0.2s; padding: 2px; }
.pin-hide-btn:hover { color: #ef4444; transform: scale(1.1); }

.admin-pinned-msg.hidden-by-user { display: none !important; }

@keyframes pinnedBreathe { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4), inset 0 0 25px rgba(59, 130, 246, 0.3); } 100% { background-position: 0% 50%; } }
@keyframes pinnedShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
@keyframes pinPulse { 0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 5px #3b82f6); } 100% { transform: scale(1.2) rotate(15deg); filter: drop-shadow(0 0 15px #60a5fa); } }

.mentions-popup { position: absolute; bottom: calc(100% + 5px); left: 15px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(59, 130, 246, 0.4); border-radius: 8px; max-height: 160px; overflow-y: auto; width: 220px; z-index: 50; box-shadow: 0 -5px 25px rgba(0,0,0,0.8); backdrop-filter: blur(10px); }
.mentions-popup.hidden { display: none; }
.mention-item { padding: 10px 12px; color: #cbd5e1; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mention-item:last-child { border-bottom: none; }
.mention-item:hover, .mention-item.active { background: rgba(59, 130, 246, 0.25); color: #fff; border-left: 3px solid #3b82f6; padding-left: 9px; }
.mention-item-role { font-size: 0.6rem; padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,0.1); font-weight: 900; }

.bot-verified-badge { background: #38bdf8; color: #fff; font-size: 0.6rem; padding: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; box-shadow: 0 0 8px #38bdf8; vertical-align: middle; }
.message.role-bot { border-color: rgba(56, 189, 248, 0.2) !important; box-shadow: inset 4px 0 20px -5px rgba(56, 189, 248, 0.3), 0 4px 15px rgba(0,0,0,0.2) !important; }

.widget-body::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 6px; }
.widget-body::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.4); border-radius: 3px; }
.widget-body::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track { background: transparent; }

.rank-progress-bg { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.rank-progress-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #a855f7); border-radius: 3px; transition: width 0.5s ease; box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
.rank-progress-text { font-size: 0.65rem; color: #94a3b8; text-align: right; margin-top: 4px; display: block; font-style: italic; }

.friends-dropdown-btn { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: #fff; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: bold; transition: 0.3s; }
.friends-dropdown-btn:hover { background: rgba(59, 130, 246, 0.2); }
.friends-dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; display: flex; flex-wrap: wrap; gap: 6px; }
.friends-dropdown-content.open { max-height: 300px; overflow-y: auto; padding-top: 10px; }
.friend-tag-removable { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.4); color: #d8b4fe; border-radius: 15px; font-size: 0.75rem; font-weight: bold; }
.friend-remove-btn { background: rgba(239, 68, 68, 0.2); border: none; color: #fca5a5; cursor: pointer; font-size: 0.7rem; line-height: 1; padding: 2px 5px; border-radius: 50%; transition: 0.2s; display: flex; align-items: center; justify-content: center; margin-left: 2px; }
.friend-remove-btn:hover { background: #ef4444; color: #fff; transform: scale(1.1); }

.setting-toggle { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.02); padding: 10px 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.05); }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #94a3b8; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
input:checked + .slider:before { transform: translateX(20px); background-color: #fff; }

#onlineListBox { padding: 5px; }
.online-group-title { font-size: 0.65rem; color: #94a3b8; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 6px 2px; border: none; padding: 0;}
.online-group-title:first-child { margin-top: 0; }
.online-user-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #f8fafc; font-weight: 700; padding: 8px 12px; border-radius: 8px; transition: 0.2s ease; font-size: 0.85rem; margin-bottom: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); }
.online-user-item > div { display: flex; align-items: center; gap: 8px; }
.online-user-item:hover { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; color: #fff; transform: translateX(4px); }
.online-time-badge { font-size: 0.65rem; color: #64748b; font-weight: 600; }

.notifications-toggle { position: relative; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px; transition: 0.3s; margin-right: 5px; }
.notifications-toggle:hover { color: #fff; transform: scale(1.1); }
.notif-badge { position: absolute; top: -2px; right: -4px; background: #ef4444; color: #fff; font-size: 0.55rem; font-weight: 900; padding: 2px 5px; border-radius: 10px; border: 2px solid rgba(15, 23, 42, 0.9); pointer-events: none; }
.notif-badge.hidden { display: none; }
.notif-badge.pulse { animation: bellPulse 1.5s infinite; }
@keyframes bellPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

.notifications-box { display: none; position: absolute; top: 55px; right: 15px; width: 280px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); z-index: 100; backdrop-filter: blur(10px); flex-direction: column; overflow: hidden; animation: fadeIn 0.2s ease; }
.notifications-box.active { display: flex; }
.notif-header { padding: 10px 15px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: bold; color: #fff; }
.notif-header button { background: none; border: none; color: #94a3b8; font-size: 0.7rem; cursor: pointer; transition: 0.2s;}
.notif-header button:hover { color: #ef4444; }
.notif-list { max-height: 300px; overflow-y: auto; padding: 5px; }
.notif-item { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255,255,255,0.05); transition: all 0.2s ease; }
.notif-item:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); background: rgba(30, 41, 59, 0.9); }

.notif-item.info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }
.notif-item.success { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
.notif-item.error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.notif-item.mention { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.3); }

.notif-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.notif-title { font-size: 0.75rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 4px; }
.notif-text { font-size: 0.65rem; color: #cbd5e1; line-height: 1.3; word-break: break-word; }
.notif-time { font-size: 0.55rem; color: #94a3b8; opacity: 0.8; white-space: nowrap; }
.notif-empty { padding: 20px; text-align: center; color: #64748b; font-size: 0.8rem; }

.name-gold { color: #fcd34d !important; text-shadow: 0 0 10px #f59e0b, 0 0 20px #b45309 !important; font-weight: 900 !important; }
.name-neon { color: #fdf4ff !important; text-shadow: 0 0 10px #e879f9, 0 0 20px #c026d3, 0 0 30px #86198f !important; font-weight: 900 !important; }

.corner-pred-widget { position: absolute; bottom: 20px; left: 20px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 14px; padding: 15px; z-index: 50; width: 300px; max-width: 90%; box-shadow: 0 15px 35px rgba(0,0,0,0.9), inset 0 0 15px rgba(59, 130, 246, 0.2); animation: messageSlideInBounce 0.5s forwards; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; display: flex; flex-direction: column; }
.corner-pred-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; width: 100%; }
.corner-pred-title { font-size: 0.85rem; font-weight: 900; color: #fff; line-height: 1.3; text-shadow: 0 2px 4px rgba(0,0,0,0.8); margin: 0; flex: 1; text-align: center; }
.corner-pred-timer { background: #ef4444; color: #fff; padding: 4px 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 900; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); white-space: nowrap; flex-shrink: 0; border: 1px solid #fca5a5; }
.corner-pred-timer.pulse-fast { animation: pulseVoiceTimer 0.5s infinite alternate; }
.corner-pred-bar-bg { width: 100%; min-height: 26px; background: rgba(0,0,0,0.6); border-radius: 8px; margin-bottom: 8px; position: relative; overflow: hidden; box-shadow: inset 0 0 5px rgba(0,0,0,0.8); display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.05); }
.corner-pred-bar-bg:last-child { margin-bottom: 0; }
.corner-pred-bar-fill { position: absolute; top: 0; left: 0; height: 100%; transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; }
.corner-pred-bar-text { position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; gap: 8px; font-size: 0.75rem; font-weight: 800; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }
.pred-opt-name { flex: 1; white-space: normal; word-break: break-word; line-height: 1.2; text-align: left; }
.pred-opt-pct { flex-shrink: 0; font-size: 0.8rem; }
.pred-toggle-btn { background: rgba(15,23,42,0.95); border: 1px solid rgba(59,130,246,0.5); width: 24px; height: 24px; border-radius: 6px; color: #94a3b8; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.pred-toggle-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; transform: scale(1.1); }
.pred-collapsed-icon { display: none; font-size: 1.6rem; animation: plPulse 2s infinite alternate; margin: auto; }
.corner-pred-widget.collapsed { width: 50px; height: 50px; padding: 0; border-radius: 50%; justify-content: center; border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); background: rgba(15, 23, 42, 0.95); }
.corner-pred-widget.collapsed .corner-pred-header,
.corner-pred-widget.collapsed .corner-pred-bar-bg { display: none !important; }
.corner-pred-widget.collapsed .pred-collapsed-icon { display: block; }

.compact-online-stack { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: middle; }
.compact-avatar { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #0f172a; margin-left: -8px; background: linear-gradient(135deg, #3b82f6, #a855f7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.6); transition: 0.2s; cursor: help; }
.compact-avatar:hover { transform: translateY(-3px); z-index: 10 !important; }
.compact-avatar:first-child { margin-left: 0; }
.compact-more { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #0f172a; margin-left: -8px; background: rgba(15, 23, 42, 0.8); color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 900; backdrop-filter: blur(2px); cursor: pointer; transition: 0.2s; }
.compact-more:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; z-index: 10; }

@keyframes progressStripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } }
.corner-pred-bar-fill::after, .pred-modal-bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); background-size: 30px 30px; animation: progressStripes 1s linear infinite; z-index: 1; pointer-events: none; }
.pred-modal-bar-fill { position: relative; }

@keyframes avatarFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.compact-avatar { animation: avatarFloat 3s ease-in-out infinite; }
.compact-avatar:nth-child(1) { animation-delay: 0s; }
.compact-avatar:nth-child(2) { animation-delay: 0.3s; }
.compact-avatar:nth-child(3) { animation-delay: 0.6s; }
.compact-avatar:nth-child(4) { animation-delay: 0.9s; }

@keyframes slideInRightItem { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.animated-item { opacity: 0; animation: slideInRightItem 0.3s ease-out forwards; }

.online-user-item { position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
.online-user-item::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); transform: skewX(-20deg); animation: onlineShimmer 4s infinite; pointer-events: none; }
.online-user-item:nth-child(even)::after { animation-delay: 2s; }
.online-user-item:nth-child(3n)::after { animation-delay: 1s; }
@keyframes onlineShimmer { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
.online-user-item:hover { background: rgba(59, 130, 246, 0.15) !important; border-color: #3b82f6 !important; color: #fff; transform: scale(1.02) translateX(4px) !important; box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3), inset 0 0 10px rgba(59, 130, 246, 0.1) !important; }
.online-time-badge { transition: color 0.3s, text-shadow 0.3s; }
.online-user-item:hover .online-time-badge { color: #93c5fd; text-shadow: 0 0 8px rgba(147, 197, 253, 0.6); }

.online-group-title { display: flex; align-items: center; gap: 6px; }
.live-title-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: pulseTitleDot 1.5s infinite alternate; }
@keyframes pulseTitleDot { 0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 2px #10b981; } 100% { transform: scale(1.5); opacity: 1; box-shadow: 0 0 10px #10b981; } }

.mobile-app-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: calc(60px + env(safe-area-inset-bottom)); background: rgba(10, 15, 30, 0.95); backdrop-filter: blur(15px); border-top: 1px solid rgba(59, 130, 246, 0.3); z-index: 100000; justify-content: space-around; align-items: center; padding: 0 10px; padding-bottom: env(safe-area-inset-bottom); }
.mobile-app-bar a { color: #94a3b8; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; transition: 0.3s; position: relative; }
.mobile-app-bar a:hover, .mobile-app-bar a.active { color: #3b82f6; transform: translateY(-2px); }
.mobile-app-bar svg { width: 22px; height: 22px; fill: currentColor; }

.mentions-popup::-webkit-scrollbar { width: 4px; }
.mentions-popup::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.6); border-radius: 2px; }
.mentions-popup::-webkit-scrollbar-track { background: transparent; }

#chatSettingsPopup { max-height: 450px !important; }

#chatSettingsPopup .mod-btn.active-setting {
    border-color: #3b82f6 !important;
    color: #fff !important;
    background: rgba(59,130,246,0.4) !important;
    box-shadow: 0 0 15px rgba(59,130,246,0.6) !important;
}

#chatSidebar.bg-none { background: rgba(15, 23, 42, 0.6) !important; }
#chatSidebar.bg-pattern { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 2px, rgba(15, 23, 42, 0.9) 2px) !important; background-size: 20px 20px !important; }
#chatSidebar.bg-dark { background: rgba(0,0,0,0.85) !important; border-left: 1px solid rgba(255,255,255,0.05) !important; }
#chatSidebar.bg-neon-blue { background: radial-gradient(circle at 50% 0%, rgba(30, 58, 138, 0.6) 0%, rgba(15, 23, 42, 0.9) 100%) !important; }
#chatSidebar.bg-neon-purple { background: radial-gradient(circle at 50% 0%, rgba(88, 28, 135, 0.6) 0%, rgba(15, 23, 42, 0.9) 100%) !important; }
#chatSidebar.bg-warm { background: linear-gradient(180deg, rgba(153, 27, 27, 0.4) 0%, rgba(15, 23, 42, 0.9) 100%) !important; }
#chatSidebar.bg-glass { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(25px) !important; border-left: 1px solid rgba(255,255,255,0.2) !important; box-shadow: inset 5px 0 30px rgba(255,255,255,0.05) !important; }

.chat-messages.hide-avatars .msg-avatar, 
.chat-messages.hide-avatars .msg-avatar-placeholder { display: none !important; }
.chat-messages.no-animations .message { animation: none !important; transition: none !important; }
.chat-messages.no-animations .message:hover { transform: none !important; }

#widget-other-streams .widget-body { padding: 20px 15px 30px 15px !important; }
#widget-other-streams .streams-grid { gap: 15px; padding-bottom: 10px; }

#widget-other-streams .widget-header h3,
.other-streams-section h3 > span:first-child {
    background: linear-gradient(90deg, #ffffff 0%, #93c5fd 50%, #ffffff 100%);
    background-size: 200% auto; color: transparent;
    -webkit-background-clip: text; background-clip: text;
    animation: textShimmerMove 3s linear infinite, softGlowPulse 2.5s infinite alternate ease-in-out;
}
@keyframes textShimmerMove { to { background-position: 200% center; } }
@keyframes softGlowPulse { 0% { filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.4)); } 100% { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.9)); } }

@media (max-width: 900px) {
    .mobile-only-menu-item { display: flex !important; }
    .mp-vol-inline { display: none; }
    .top-nav { display: flex !important; justify-content: center !important; padding: 0; height: 50px !important; min-height: 50px !important; }
    .brand { font-size: 1.1rem; gap: 5px; }
    .brand-logo-img { width: 28px !important; height: 28px !important; }
    .quick-links, .menu-container { display: none !important; }
    .mobile-app-bar { display: flex; }
    body { padding-bottom: 0 !important; } 
    .stream-layout { flex-direction: column !important; overflow: hidden; flex: 1; min-height: 0; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .dropdown-menu { top: auto !important; bottom: 70px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) scale(0.95); transform-origin: bottom center; }
    .dropdown-menu.open { transform: translateX(-50%) scale(1); }
    .main-content { flex: 0 0 auto; overflow: visible; display: flex; flex-direction: column; width: 100%; }
    .other-streams-section { display: none !important; }
    .player-section { padding: 0 !important; border: none; display: block; flex-shrink: 0; } 
    .player-toolbar { display: none; } 
    .video-container { 
    display: flex !important; 
    justify-content: center !important; 
    width: 100% !important; 
}

.video-wrapper { 
    max-width: 100% !important; 
    max-height: none !important; 
    width: 100% !important; 
    height: auto; 
    aspect-ratio: 16 / 9; 
    border-radius: 0 !important; 
    border: none !important; 
    box-shadow: none !important; 
    margin: 0 auto !important;
}
    .mobile-fs-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; left: 15px; right: auto; }
    .player-overlay-stats { left: auto; right: 15px; }
    .stream-alert-banner { display: none; }
    .site-footer { display: none; } 
    .corner-pred-widget { bottom: 10px; left: 10px; width: calc(100% - 20px); padding: 12px; }
    .corner-pred-widget.collapsed { width: 45px; height: 45px; }
    .vjs-custom-theme .vjs-control-bar { width: 100% !important; left: 0 !important; bottom: 0 !important; border-radius: 0 !important; border: none !important; background: rgba(15, 23, 42, 0.95) !important; box-sizing: border-box !important; padding: 0 8px !important; flex-wrap: nowrap !important; height: 50px !important; }
    .vjs-custom-theme .vjs-live-control, .custom-stream-timer { margin-left: 5px !important; font-size: 0.7rem !important; }
    .vjs-custom-theme.vjs-vod-mode .vjs-time-control { font-size: 0.65rem !important; margin: 0 4px !important; }
    .vjs-custom-theme.vjs-vod-mode .vjs-progress-control { min-width: auto !important; margin: 0 8px !important; }
    .vjs-custom-theme .vjs-volume-panel { margin-right: 2px !important; }
    .vjs-custom-theme button.vjs-control { width: 32px !important; }
    .sympathy-controls { opacity: 0.85 !important; top: auto !important; bottom: 60px !important; right: 15px !important; transform: none !important; gap: 10px !important; flex-direction: column !important; z-index: 25 !important; }
    .sympathy-controls button { width: 36px !important; height: 36px !important; font-size: 1.2rem !important; }
    .chat-sidebar { flex: 1 1 0%; min-height: 0; height: 100%; width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; overflow: visible; }
    .chat-header { padding: 10px; flex-direction: row; justify-content: space-between; align-items: center; flex-shrink: 0; } 
    .chat-title { margin: 0; font-size: 0.8rem; }
    .chat-messages { flex: 1 1 0%; min-height: 0; padding: 6px 4px; gap: 4px; }
    .message { padding: 6px 10px; font-size: 0.8rem; border-radius: 10px; }
    .chat-input-area { padding: 6px 8px 8px; gap: 6px; flex-shrink: 0; } 
    .chat-input { padding: 8px; font-size: 16px !important; }
    .send-btn { height: 36px; padding: 0 12px; }
    .emoji-picker { bottom: 50px; }
    body:has(.chat-input:focus) .mobile-app-bar { display: none !important; }
    body:has(.chat-input:focus) .stream-layout { 
    padding-bottom: 0 !important; 
    flex-direction: column !important; 
}

    .video-wrapper { transition: height 0.3s ease, aspect-ratio 0.3s ease; }
    .video-wrapper.v-step-0 { aspect-ratio: 16 / 9 !important; height: auto !important; }
    .video-wrapper.v-step-1 { aspect-ratio: auto !important; height: 40vh !important; }
    .video-wrapper.v-step-2 { aspect-ratio: auto !important; height: 55vh !important; }
    .video-wrapper.v-step-3 { aspect-ratio: auto !important; height: 70vh !important; }
    .video-wrapper.v-step-4 { aspect-ratio: auto !important; height: 85vh !important; }
    
    .video-js .vjs-tech { object-fit: contain; }
}

@media (max-height: 600px) and (min-width: 500px) and (orientation: landscape) {
    .top-nav, .mobile-app-bar, .stream-alert-banner, .other-streams-section, .site-footer, .player-toolbar { 
        display: none !important; 
    }
    body { padding-bottom: 0 !important; }
    .stream-layout { 
        flex-direction: row !important; 
        height: 100dvh !important; 
        padding-bottom: 0 !important; 
    }
	body:has(.chat-input:focus) .stream-layout { 
        flex-direction: row !important; 
    }
    .main-content { 
        flex: 1 !important; 
        min-width: 0 !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        background: #000 !important; 
        padding: 0 !important;
    }
    .player-section { 
        width: 100% !important; 
        height: 100% !important; 
        padding: 0 !important; 
        border: none !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
    }
    .video-container { 
        height: 100% !important; 
        width: 100% !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
    }
    .video-wrapper { 
        height: 100% !important; 
        width: 100% !important; 
        max-width: 100% !important; 
        max-height: 100% !important; 
        border-radius: 0 !important; 
        border: none !important; 
        box-shadow: none !important; 
        margin: 0 auto !important; 
        aspect-ratio: auto !important; 
    }
    .chat-sidebar { 
        flex: 0 0 320px !important; 
        width: 320px !important; 
        height: 100dvh !important; 
        border-left: 1px solid rgba(255,255,255,0.1) !important; 
        border-top: none !important; 
        display: flex !important; 
        flex-direction: column !important; 
    }

    .video-wrapper[class*="v-step-"] {
        height: 100% !important;
    }
}
.chat-sidebar {z-index: 150 !important;}
#chatSettingsPopup {z-index: 200 !important;}

.slot-machine {
    display: inline-flex;
    gap: 10px;
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid #f59e0b;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 10px rgba(245, 158, 11, 0.4);
    margin: 10px auto;
}
.slot-reel {
    height: 40px;
    width: 40px;
    overflow: hidden;
    position: relative;
    background: rgba(0,0,0,0.5);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
.slot-reel-inner {
    display: flex;
    flex-direction: column;
    animation: slotSpin forwards cubic-bezier(0.1, 0.7, 0.1, 1);
}
.slot-reel-inner > div {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.slot-reel:nth-child(1) .slot-reel-inner { animation-duration: 1.5s; }
.slot-reel:nth-child(2) .slot-reel-inner { animation-duration: 2.0s; }
.slot-reel:nth-child(3) .slot-reel-inner { animation-duration: 2.5s; }

@keyframes slotSpin {
    0% { transform: translateY(calc(-100% + 40px)); filter: blur(2px); }
    100% { transform: translateY(0); filter: blur(0); }
}

.coin-flip-anim {
    display: inline-block;
    font-size: 2.5rem;
    animation: flipCoin 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes flipCoin {
    0% { transform: scale(1) rotateY(0deg) translateY(0); }
    50% { transform: scale(1.5) rotateY(1800deg) translateY(-20px); }
    100% { transform: scale(1) rotateY(3600deg) translateY(0); }
}

.clan-tag {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 1px;
    border: 1px solid rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
    margin-right: 4px;
    cursor: help;
}

.clan-tag-gold {
    background: linear-gradient(135deg, #b45309, #f59e0b);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 1px;
    border: 1px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    margin-right: 4px;
    cursor: help;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.achievements-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.achievement-badge {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.achievement-badge:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(245, 158, 11, 0.3);
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
    border-color: #f59e0b;
}

.message.clan-secret-msg {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px dashed #3b82f6 !important;
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.2) !important;
}
.message.clan-secret-msg::before {
    content: '🤫 СЕКРЕТНЫЙ ЧАТ';
    display: block;
    font-size: 0.6rem;
    color: #60a5fa;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.maintenance-mode {
    display: block; 
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.stub-container { 
   
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 10; 
    padding: 50px 40px; 
    width: 90%; 
    max-width: 600px;
    background: rgba(15, 23, 42, 0.8); 
    border: 1px solid rgba(59, 130, 246, 0.4); 
    border-radius: 24px; 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.9), inset 0 0 30px rgba(168, 85, 247, 0.15); 
    text-align: center; 
}

.stub-container h1 { 
    font-size: 2.4rem; 
    margin: 0 0 15px 0; 
    background: linear-gradient(90deg, #f59e0b, #fef08a, #f59e0b); 
    background-size: 200% auto; 
    color: transparent; 
    -webkit-background-clip: text; 
    background-clip: text; 
    text-transform: uppercase; 
    letter-spacing: 3px;
    animation: shineText 3s linear infinite, neonPulseGold 2s infinite alternate;
}

.stub-container p { 
    color: #cbd5e1; 
    font-size: 1.1rem; 
    line-height: 1.6; 
    margin: 0 0 35px 0; 
    font-weight: 500; 
}

.stub-container .highlight { 
    color: #38bdf8; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.6); 
}

.loader-wrapper {
    position: relative;
    width: 90px; 
    height: 90px;
    margin: 0 auto;
}
.loader-circle {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 4px solid transparent; border-top-color: #3b82f6; border-bottom-color: #a855f7;
    border-radius: 50%;
    animation: spin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.loader-circle.inner {
    top: 15px; left: 15px; width: 60px; height: 60px;
    border-top-color: transparent; border-bottom-color: transparent;
    border-left-color: #f59e0b; border-right-color: #ef4444;
    animation: spinReverse 1.5s linear infinite;
}
.loader-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.6rem; 
    animation: pulseIcon 2s infinite alternate;
}

@keyframes spinReverse { 100% { transform: rotate(-360deg); } }
@keyframes pulseIcon { 
    0% { filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); transform: translate(-50%, -50%) scale(0.9); } 
    100% { filter: drop-shadow(0 0 15px #fcd34d); transform: translate(-50%, -50%) scale(1.15); } 
}

@media (max-width: 600px) { 
    .stub-container h1 { font-size: 1.7rem; letter-spacing: 1px; } 
    .stub-container p { font-size: 0.95rem; } 
    .stub-container { padding: 40px 20px; } 
}

.maintenance-timer-wrap {
    margin: 30px auto 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px 25px;
    display: inline-block;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.maintenance-timer-title {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-bottom: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.maintenance-timer-title span {
    color: #fcd34d;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.maintenance-countdown {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.maintenance-countdown div {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    padding: 10px 15px;
    min-width: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.maintenance-countdown span {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
    line-height: 1;
}

.maintenance-countdown small {
    font-size: 0.65rem;
    color: #93c5fd;
    text-transform: uppercase;
    margin-top: 6px;
    font-weight: 800;
}

@media (max-width: 600px) {
    .maintenance-countdown div { min-width: 55px; padding: 8px 10px; }
    .maintenance-countdown span { font-size: 1.3rem; }
    .maintenance-timer-wrap { padding: 15px; }
}


.social-icon-btn {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.social-icon-btn svg {
    transition: transform 0.3s ease;
}

.social-icon-btn:hover {
    transform: translateY(-4px) scale(1.05);
    color: #fff !important;
}

.social-icon-btn:hover svg {
    transform: scale(1.15);
}

.social-icon-btn.vk { 
    background: rgba(0, 119, 255, 0.15); 
    border-color: rgba(0, 119, 255, 0.5); 
    color: #0077FF; 
}
.social-icon-btn.vk:hover { 
    background: #0077FF; 
    border-color: #0077FF; 
    box-shadow: 0 6px 20px rgba(0, 119, 255, 0.5); 
}

.social-icon-btn.ya { 
    background: rgba(255, 0, 0, 0.15); 
    border-color: rgba(255, 0, 0, 0.5); 
    color: #FF0000; 
}
.social-icon-btn.ya:hover { 
    background: #FF0000; 
    border-color: #FF0000; 
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5); 
}

.social-icon-btn.tg { 
    background: rgba(56, 189, 248, 0.15); 
    border-color: rgba(56, 189, 248, 0.5); 
    color: #38bdf8; 
}
.social-icon-btn.tg:hover { 
    background: #38bdf8; 
    border-color: #38bdf8; 
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5); 
}

.profile-container.widget-body.bg-cyber {
    background: linear-gradient(135deg, #0f172a 0%, #310a31 50%, #061b40 100%) !important;
}
.profile-container.widget-body.bg-hell {
    background: linear-gradient(135deg, #2a0808 0%, #450a0a 50%, #000000 100%) !important;
}