*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#06080e;color:#f6f7ff;font-family:Inter,Arial,sans-serif;--a:#6e7cff;--b:#aa6cff;--soft:rgba(110,124,255,.15);--glow:rgba(110,124,255,.35);transition:background .35s,color .35s;min-height:100vh}
body[data-theme=cyber]{--a:#e25cff;--b:#4bdcff;--soft:rgba(226,92,255,.16);--glow:rgba(226,92,255,.38);background:#0b0610}
body[data-theme=techno]{--a:#ff3f60;--b:#ff8a4d;--soft:rgba(255,63,96,.15);--glow:rgba(255,63,96,.36);background:#0e0608}
body[data-theme=acid]{--a:#8cff65;--b:#46ffd0;--soft:rgba(140,255,101,.13);--glow:rgba(140,255,101,.32);background:#050c07}
.ambient{position:fixed;width:42vw;height:42vw;border-radius:50%;filter:blur(90px);opacity:.13;pointer-events:none;background:var(--a);transition:background .35s}.a1{left:-18vw;top:-12vw}.a2{right:-20vw;top:18vh;background:var(--b)}
header{height:70px;max-width:1160px;margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:950;font-size:23px;letter-spacing:-2px;color:white;text-decoration:none}.brand span{color:var(--a)}nav{display:flex;gap:25px}nav a{color:#798298;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:1.4px}
main{max-width:1160px;margin:auto;padding:35px 20px 120px}.card{border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.035),var(--soft));box-shadow:0 25px 90px rgba(0,0,0,.25);transition:background .35s,box-shadow .35s}
.hero{padding:55px;position:relative;overflow:hidden}.live-row{display:flex;align-items:center;gap:9px;color:#b7bfd1;font-size:10px;letter-spacing:1.4px}.live-row #listeners{margin-left:auto}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff405f;box-shadow:0 0 12px #ff405f}
h1{font-size:clamp(48px,8vw,94px);line-height:.88;letter-spacing:-6px;margin:28px 0 15px}h1 em{font-style:normal;color:var(--a);text-shadow:0 0 35px var(--glow);transition:color .35s}.lead{color:#858fa5}
.viz-wrap{height:150px;margin:30px 0 15px}canvas{display:block;width:100%;height:100%}.controls{display:flex;align-items:center;gap:14px;max-width:650px}.play{width:54px;height:54px;border:0;border-radius:50%;background:white;color:#070910;font-size:18px;cursor:pointer}.control-copy{flex:1}.control-copy strong,.control-copy small{display:block}.control-copy strong{font-size:12px}.control-copy small{font-size:10px;color:#6f788c;margin-top:4px}input{width:120px;accent-color:var(--a)}
.visual-picker{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:22px}.visual-picker b{font-size:9px;color:#727c92;letter-spacing:1.3px;margin-right:5px}.visual,.full-btn,.theme-btn{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#8993a8;border-radius:999px;padding:9px 12px;font-size:9px;font-weight:900;letter-spacing:.8px;cursor:pointer}.visual.active,.theme-btn.active{color:white;background:var(--soft);border-color:var(--a);box-shadow:0 0 20px var(--glow)}.full-btn{margin-top:12px;border-radius:11px;color:#cbd2e2}
.now{margin-top:25px;padding:28px;display:flex;align-items:center;gap:25px}.record{width:105px;height:105px;border-radius:50%;flex:none;background:repeating-radial-gradient(#111 0 4px,#171717 5px 7px);display:grid;place-items:center;box-shadow:0 0 35px var(--glow);animation:spin 7s linear infinite;animation-play-state:paused}.playing .record{animation-play-state:running}.record div{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--a),var(--b));font-size:8px;font-weight:950}@keyframes spin{to{transform:rotate(360deg)}}.eyebrow{font-size:9px;font-weight:900;letter-spacing:1.5px;color:var(--a)}.now h2,.theme h2,#recent h2{margin:7px 0;font-size:27px;letter-spacing:-1px}.now p,.theme p{margin:0;color:#9aa4b8}.now small{color:#687287}
.theme{margin-top:25px;padding:25px;display:flex;align-items:center;justify-content:space-between;gap:20px}.themes{display:flex;gap:7px;flex-wrap:wrap}.theme-btn{display:flex;align-items:center;gap:7px}.theme-btn i{width:8px;height:8px;border-radius:50%;background:var(--a)}
#recent{padding-top:45px}.recent-list{display:grid;gap:8px;margin-top:18px}.track,.empty{padding:14px 16px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025)}.track{display:flex;justify-content:space-between;gap:15px}.track small,.empty{color:#6e788e}
.mini{position:fixed;z-index:30;bottom:15px;left:50%;width:min(560px,calc(100% - 20px));transform:translate(-50%,120px);transition:.3s;display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:rgba(7,9,15,.92);backdrop-filter:blur(18px)}.mini.show{transform:translate(-50%,0)}.mini div{flex:1;min-width:0}.mini strong,.mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini strong{font-size:11px}.mini small{font-size:9px;color:#758096}.mini button{width:38px;height:38px;border:0;border-radius:50%;cursor:pointer}
.fullscreen{display:none;position:fixed;z-index:9999;inset:0;background:#030409;color:white;overflow:hidden}.fullscreen.open{display:block}.fullscreen canvas{position:absolute;inset:0}.close{position:absolute;z-index:4;right:22px;top:20px;width:45px;height:45px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.06);color:white;font-size:25px;cursor:pointer}.full-brand{position:absolute;z-index:3;left:27px;top:25px;font-size:22px;font-weight:950}.full-center{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}.full-center small{margin-top:22px;color:#707a90;font-size:10px;font-weight:900;letter-spacing:2px}.full-center h2{font-size:clamp(42px,8vw,105px);line-height:.9;letter-spacing:-6px;margin:12px 0;text-shadow:0 0 50px var(--glow)}.full-center p{color:#a3adc0}.full-bottom{position:absolute;z-index:3;left:0;right:0;bottom:25px;display:flex;justify-content:center;gap:30px;color:#687287;font-size:9px;font-weight:900;letter-spacing:1.2px}
@media(max-width:650px){nav{display:none}.hero{padding:32px 22px}h1{letter-spacing:-3px}.theme{align-items:flex-start;flex-direction:column}.now{align-items:flex-start}.record{width:80px;height:80px}.controls input{width:70px}.full-center h2{letter-spacing:-3px}}
/* Snow background */
#snowCanvas{
position:fixed;
inset:0;
width:100%;
height:100%;
z-index:-1;
pointer-events:none;
opacity:.72;
}
body{isolation:isolate}
.ambient{z-index:-2}
/* V6 VISUAL REVAMP */
.hero-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:.78;margin:32px 0 20px}
.hero-stack>span,.hero-stack>em{display:block}
.hero-stack>em{margin-top:16px}
.viz-wrap{
height:300px!important;
margin:34px -15px 22px!important;
border-top:1px solid rgba(255,255,255,.04);
border-bottom:1px solid rgba(255,255,255,.04);
background:radial-gradient(ellipse at center,var(--soft),transparent 66%);
position:relative;
}
.viz-wrap:before{content:"";position:absolute;left:50%;top:50%;width:76%;height:1px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,var(--a),var(--b),transparent);opacity:.15;box-shadow:0 0 25px var(--glow)}
.fx-panels{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin-top:22px}
.fx-group{margin:0!important;padding:12px;border:1px solid rgba(255,255,255,.065);border-radius:14px;background:rgba(0,0,0,.12)}
.background-picker{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.background-picker b{font-size:9px;color:#727c92;letter-spacing:1.3px;margin-right:5px}
.bgfx{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#8993a8;border-radius:999px;padding:9px 12px;font-size:9px;font-weight:900;letter-spacing:.8px;cursor:pointer}
.bgfx.active{color:white;background:var(--soft);border-color:var(--a);box-shadow:0 0 20px var(--glow)}
#snowCanvas{z-index:-1!important}
@media(max-width:760px){.viz-wrap{height:220px!important;margin-left:-8px!important;margin-right:-8px!important}.fx-panels{grid-template-columns:1fr}.hero-stack>em{margin-top:11px}}
/* V8 INTERACTIVE FEATURES */
.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.action-row .full-btn{margin-top:0}.hype-btn{color:#fff;border-color:var(--a);background:linear-gradient(135deg,var(--soft),rgba(255,255,255,.05));box-shadow:0 0 20px var(--glow)}
.chat-section{margin-top:25px;padding:25px}.chat-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.chat-head h2{margin:6px 0}.chat-head p{margin:0;color:#7d879b;font-size:12px}.chat-online{font-size:9px;font-weight:900;letter-spacing:1px;display:flex;align-items:center;gap:7px}.chat-messages{height:250px;overflow:auto;margin:20px 0 12px;padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:15px;background:rgba(0,0,0,.18)}.chat-msg{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.045);font-size:12px}.chat-msg b{color:var(--a);margin-right:8px}.chat-msg time{float:right;color:#566075;font-size:9px}.chat-system{color:#697389;font-size:11px;padding:8px}.chat-form{display:grid;grid-template-columns:130px 1fr auto;gap:8px}.chat-form input{width:auto;min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.035);color:#fff;padding:11px 12px;outline:none}.chat-form input:focus{border-color:var(--a)}.chat-form button{border:0;border-radius:11px;background:var(--a);color:#070910;font-weight:950;padding:0 17px;cursor:pointer}.chat-note{display:block;color:#555f73;margin-top:9px;font-size:9px}
.toast{position:fixed;z-index:10001;left:50%;bottom:25px;transform:translate(-50%,90px);opacity:0;background:#10141f;border:1px solid rgba(255,255,255,.12);padding:11px 16px;border-radius:999px;font-size:11px;font-weight:800;transition:.3s}.toast.show{transform:translate(-50%,0);opacity:1}
.hype-burst{position:fixed;z-index:10000;inset:0;display:none;place-items:center;pointer-events:none;background:radial-gradient(circle,var(--glow),transparent 55%)}.hype-burst.go{display:grid;animation:hypefade 1.15s ease forwards}.hype-burst div{position:absolute;font-size:clamp(90px,20vw,250px);filter:drop-shadow(0 0 45px var(--a));animation:hypespin 1s ease}.hype-burst strong{font-size:clamp(55px,13vw,160px);font-style:italic;letter-spacing:-6px;color:white;text-shadow:0 0 30px var(--a),0 0 80px var(--b);animation:hypescale .8s cubic-bezier(.2,.8,.2,1)}@keyframes hypefade{0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}}@keyframes hypescale{0%{transform:scale(.2) rotate(-8deg)}60%{transform:scale(1.18) rotate(2deg)}100%{transform:scale(1)}}@keyframes hypespin{to{transform:rotate(180deg) scale(1.4);opacity:.1}}
.booth{display:none;position:fixed;z-index:9998;inset:0;background:#030409;overflow:hidden}.booth.open{display:block}.booth canvas{position:absolute;inset:0}.booth-logo{position:absolute;z-index:2;left:35px;top:28px;font-size:25px;font-weight:950;letter-spacing:-2px}.booth-logo span{color:var(--a)}.booth-track{position:absolute;z-index:2;left:7vw;right:7vw;bottom:13vh}.booth-track small{color:var(--a);font-size:10px;font-weight:900;letter-spacing:2px}.booth-track h2{font-size:clamp(45px,8vw,110px);line-height:.85;letter-spacing:-6px;margin:12px 0;text-shadow:0 0 45px var(--glow)}.booth-track p{font-size:18px;color:#9ca7bb}.booth-footer{position:absolute;z-index:2;left:7vw;right:7vw;bottom:5vh;display:flex;gap:28px;color:#7c879c;font-size:10px;font-weight:900;letter-spacing:1.2px}.booth-footer span:first-child{display:flex;align-items:center;gap:7px;color:#fff}
body[data-bg=aurora] .ambient{opacity:.27;filter:blur(65px);animation:auroraMove 6s ease-in-out infinite alternate}@keyframes auroraMove{to{transform:translate(14vw,12vh) scale(1.25)}}
body[data-bg=space]{background:#030610}body[data-bg=matrix]{background:#020805}body[data-bg=grid]{background:#040511}body[data-bg=club]{background:#070308}
@media(max-width:650px){.chat-form{grid-template-columns:1fr auto}.chat-form #chatName{grid-column:1/-1}.booth-track h2{letter-spacing:-3px}.booth-footer{gap:12px;flex-wrap:wrap}}
/* V9 SIDE CHAT LAYOUT */
.live-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:stretch}
.player-column{min-width:0}.live-layout .hero{height:100%}
.live-layout .chat-section{margin-top:0;min-width:0;height:100%;display:flex;flex-direction:column;padding:20px}
.live-layout .chat-head{display:block}.live-layout .chat-head .chat-online{margin-top:10px}.live-layout .chat-head h2{font-size:21px}.live-layout .chat-head p{font-size:10px}
.live-layout .chat-messages{flex:1;height:auto;min-height:390px;margin:15px 0 10px}
.live-layout .chat-form{grid-template-columns:1fr auto}.live-layout .chat-form #chatName{grid-column:1/-1}
.live-layout .chat-note{font-size:8px;line-height:1.4}
.live-layout .hero h1{font-size:clamp(45px,6.5vw,84px)}
.live-layout .viz-wrap{height:275px!important}
@media(max-width:980px){
.live-layout{grid-template-columns:1fr}
.live-layout .chat-section{height:auto}
.live-layout .chat-messages{height:250px;min-height:250px}
.live-layout .hero h1{font-size:clamp(48px,8vw,94px)}
}
/* V10 COMPACT SIDE CHAT */
.live-layout{grid-template-columns:minmax(0,1fr) 310px!important;align-items:start!important}
.live-layout .chat-section{
height:auto!important;
min-height:0!important;
align-self:start!important;
padding:17px!important;
}
.live-layout .chat-messages{
flex:none!important;
height:285px!important;
min-height:285px!important;
max-height:285px!important;
}
.live-layout .chat-head h2{font-size:19px!important;margin-bottom:3px}
.live-layout .chat-head p{font-size:9px!important;line-height:1.4}
.live-layout .chat-form input{padding:9px 10px!important;font-size:10px}
.live-layout .chat-form button{padding:0 12px!important;font-size:9px}
.live-layout .chat-note{font-size:7.5px!important}
@media(max-width:980px){
.live-layout{grid-template-columns:1fr!important}
.live-layout .chat-section{width:100%}
.live-layout .chat-messages{height:230px!important;min-height:230px!important;max-height:230px!important}
}
/* V11 WIDER VISUAL EXPERIENCE */
.wrap{max-width:1540px!important;padding-left:22px!important;padding-right:22px!important}
.live-layout{grid-template-columns:minmax(0,1fr) 300px!important;gap:14px!important}
.live-layout .hero{overflow:visible}
.live-layout .viz-wrap{
width:calc(100% + 46px)!important;
margin-left:-23px!important;
margin-right:-23px!important;
height:315px!important;
border-radius:0!important;
}
.fx-panels{
width:calc(100% + 24px)!important;
margin-left:-12px!important;
grid-template-columns:1.2fr 1fr!important;
}
#snowCanvas{width:100vw!important;height:100vh!important;inset:0!important}
@media(min-width:1600px){
.wrap{max-width:1680px!important}
.live-layout{grid-template-columns:minmax(0,1fr) 310px!important}
.live-layout .viz-wrap{height:345px!important}
}
@media(max-width:980px){
.wrap{padding-left:14px!important;padding-right:14px!important}
.live-layout{grid-template-columns:1fr!important}
.live-layout .viz-wrap{width:calc(100% + 30px)!important;margin-left:-15px!important;margin-right:-15px!important;height:260px!important}
.fx-panels{width:100%!important;margin-left:0!important;grid-template-columns:1fr!important}
}
/* V14 AUTOPLAY FALLBACK */
.autoplay-gate{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,4,10,.82);backdrop-filter:blur(14px)}
.autoplay-gate[hidden]{display:none!important}.autoplay-gate-card{width:min(430px,100%);padding:30px;text-align:center;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(14,19,31,.97),rgba(5,7,13,.97));box-shadow:0 25px 100px #000,0 0 70px var(--glow)}
.autoplay-gate-card h2{font-size:28px;margin:9px 0}.autoplay-gate-card p{color:#8994a8;font-size:12px;line-height:1.6;margin:0 0 20px}.autoplay-gate-card button{border:1px solid var(--a);border-radius:999px;padding:14px 22px;background:var(--soft);color:#fff;font-weight:950;letter-spacing:.8px;cursor:pointer;box-shadow:0 0 28px var(--glow)}
/* V16 CHAT PLUS */
.chat-msg{position:relative;padding-right:58px}.chat-msg:hover .msg-actions{opacity:1}.msg-actions{position:absolute;right:0;top:5px;display:flex;gap:3px;opacity:.25;transition:.2s}.msg-actions button{border:0;background:transparent;color:#68748a;cursor:pointer;font-size:11px;padding:3px}.msg-actions button:hover{color:var(--a)}
.owner-badge{display:inline-block!important;margin:0 6px 0 0!important;padding:2px 5px;border-radius:4px;background:linear-gradient(90deg,var(--a),var(--b));color:#05070c!important;font-size:7px!important;font-weight:950;letter-spacing:.7px;vertical-align:2px}
.chat-msg.owner b{color:#fff;text-shadow:0 0 12px var(--a)}.chat-msg.owner{background:linear-gradient(90deg,var(--soft),transparent);margin:0 -7px;padding-left:7px;border-radius:6px}
.reply-preview{display:block;margin:2px 0 5px;padding:5px 7px;border-left:2px solid var(--a);background:rgba(255,255,255,.025);color:#69758b;font-size:9px}.reply-preview b{font-size:9px!important}
.reply-bar{display:flex;align-items:center;justify-content:space-between;margin:0 0 7px;padding:7px 10px;border-radius:8px;background:var(--soft);font-size:9px;color:#8d99ae}.reply-bar button{border:0;background:none;color:#fff;cursor:pointer;font-size:15px}
.emote-row{display:flex;gap:4px;align-items:center;margin-bottom:7px}.emote-row>button:not(.owner-login-btn){border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);border-radius:7px;padding:5px 6px;cursor:pointer}.emote-row>button:hover{border-color:var(--a);transform:translateY(-1px)}
.owner-login-btn{margin-left:auto;border:1px solid rgba(255,255,255,.08);background:transparent;color:#657087;border-radius:7px;padding:6px 8px;font-size:7px;font-weight:900;letter-spacing:.6px;cursor:pointer}.owner-login-btn.logged{color:#fff;border-color:var(--a);box-shadow:0 0 12px var(--glow)}
.hype-react{display:inline-flex;align-items:center;gap:3px;margin-left:7px;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:2px 6px;color:#8994aa;font-size:8px;cursor:pointer}.hype-react.hot{color:#fff;border-color:var(--a);background:var(--soft)}
/* V17: wider side chat + owner login polish */
.live-layout{grid-template-columns:minmax(0,1fr) 365px!important}
@media(min-width:1500px){.live-layout{grid-template-columns:minmax(0,1fr) 390px!important}}
@media(max-width:980px){.live-layout{grid-template-columns:1fr!important}}
.owner-login-btn{white-space:nowrap}
/* V18 ROLE LOGIN */
.role-modal{position:fixed;z-index:13000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,4,10,.84);backdrop-filter:blur(14px)}.role-modal[hidden]{display:none!important}
.role-modal-card{position:relative;width:min(430px,100%);padding:30px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(14,19,31,.98),rgba(5,7,13,.98));box-shadow:0 25px 100px #000,0 0 65px var(--glow)}
.role-modal-card h2{font-size:28px;margin:8px 0}.role-modal-card>p{color:#7f899e;font-size:11px;line-height:1.5;margin-bottom:20px}.role-modal-close{position:absolute;right:15px;top:13px;border:0;background:none;color:#8c96a8;font-size:24px;cursor:pointer}
#roleLoginForm{display:grid;gap:12px}#roleLoginForm label{display:grid;gap:6px;color:#69758b;font-size:8px;font-weight:900;letter-spacing:1px}#roleLoginForm input{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#fff;border-radius:11px;padding:12px;outline:none}#roleLoginForm input:focus{border-color:var(--a)}
#roleLoginForm button{border:1px solid var(--a);background:var(--soft);color:#fff;border-radius:11px;padding:12px;font-weight:950;cursor:pointer}.role-login-status{min-height:15px;margin-top:10px;color:#ff8f9c;font-size:9px;text-align:center}
.role-badge{display:inline-block!important;margin:0 6px 0 0!important;padding:2px 5px;border-radius:4px;font-size:7px!important;font-weight:950;letter-spacing:.7px;vertical-align:2px}.role-owner{background:linear-gradient(90deg,var(--a),var(--b));color:#05070c!important}.role-dj{background:#8c5cff;color:#fff!important}.role-vip{background:#e8bf54;color:#181103!important}.role-mod{background:#48d79b;color:#04130d!important}
.chat-msg.role-dj{background:linear-gradient(90deg,rgba(140,92,255,.08),transparent)}.chat-msg.role-vip{background:linear-gradient(90deg,rgba(232,191,84,.07),transparent)}.chat-msg.role-mod{background:linear-gradient(90deg,rgba(72,215,155,.07),transparent)}
/* V19 REGISTER */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:15px 0}.auth-tabs button{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#667188;border-radius:9px;padding:9px;font-size:8px;font-weight:950;letter-spacing:1px;cursor:pointer}.auth-tabs button.active{color:#fff;border-color:var(--a);background:var(--soft)}
#registerForm{display:grid;gap:12px}#registerForm[hidden]{display:none!important}#registerForm label{display:grid;gap:6px;color:#69758b;font-size:8px;font-weight:900;letter-spacing:1px}#registerForm input{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#fff;border-radius:11px;padding:12px;outline:none}#registerForm input:focus{border-color:var(--a)}#registerForm button{border:1px solid var(--a);background:var(--soft);color:#fff;border-radius:11px;padding:12px;font-weight:950;cursor:pointer}
.role-member{background:#33415b;color:#dbe6ff!important}
/* V20 ADMIN */
.admin-open{color:#fff!important;border-color:var(--a)!important}.admin-card{width:min(720px,96vw);max-height:86vh;display:flex;flex-direction:column}.admin-toolbar{display:flex;justify-content:space-between;align-items:center;margin:5px 0 12px}.admin-toolbar button{border:1px solid var(--a);background:var(--soft);color:#fff;border-radius:8px;padding:7px 10px;font-size:8px;font-weight:900;cursor:pointer}.admin-toolbar span{font-size:9px;color:#7d899f}.admin-users{overflow:auto;display:grid;gap:7px;padding-right:3px}.admin-user{display:grid;grid-template-columns:minmax(110px,1fr) 100px 92px 70px;gap:7px;align-items:center;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.025)}.admin-user-info b{display:block;color:#fff;font-size:10px}.admin-user-info small{color:#667188;font-size:7px}.admin-user select,.admin-user button{border:1px solid rgba(255,255,255,.09);background:#0b101b;color:#cbd5e7;border-radius:7px;padding:7px;font-size:8px}.admin-user button{cursor:pointer}.admin-user .ban-btn{color:#ffb36a}.admin-user .delete-user{color:#ff7f91}.admin-user.banned{opacity:.55}.admin-empty{text-align:center;color:#657087;padding:25px;font-size:10px}@media(max-width:650px){.admin-user{grid-template-columns:1fr 1fr}.admin-user-info{grid-column:1/-1}}
/* V22 CHAT VISUAL RESTORE */
.chat-msg.role-owner,.chat-msg.role-dj,.chat-msg.role-vip,.chat-msg.role-mod,.chat-msg.role-member,
.chat-msg.owner{background:transparent!important;border-radius:0!important;margin-left:0!important;margin-right:0!important;padding-left:0!important}
.chat-msg.role-owner b,.chat-msg.owner b{color:#f2f5fb!important;text-shadow:none!important}
.role-badge{box-shadow:none!important}
.role-owner{background:rgba(141,104,255,.16)!important;border:1px solid rgba(141,104,255,.38)!important;color:#cbbdff!important}
.role-dj{background:rgba(140,92,255,.13)!important;color:#c9baff!important}
.role-vip{background:rgba(232,191,84,.12)!important;color:#e8c96f!important}
.role-mod{background:rgba(72,215,155,.12)!important;color:#72ddb2!important}
.role-member{background:rgba(255,255,255,.055)!important;color:#9da8ba!important}
#registerBtn{white-space:nowrap}
/* V23 ADMIN CLEAR CHAT */
.admin-toolbar-actions{display:flex;gap:6px;flex-wrap:wrap}
.admin-toolbar .danger-admin{border-color:rgba(255,91,112,.45)!important;background:rgba(255,91,112,.08)!important;color:#ff91a0!important}
/* V24 — CLEAN RANK CHAT */
.chat-msg,
.chat-msg.owner,
.chat-msg.role-owner,
.chat-msg.role-dj,
.chat-msg.role-vip,
.chat-msg.role-mod,
.chat-msg.role-member{
background:transparent!important;
border:0!important;
border-top:0!important;
border-bottom:0!important;
outline:0!important;
box-shadow:none!important;
border-radius:0!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
}
.chat-msg::before,.chat-msg::after{display:none!important}
.chat-msg.role-owner b,.chat-msg.owner b{
color:#f5f6fb!important;
text-shadow:none!important;
}
/* Flowing OWNER gradient badge */
.role-badge.role-owner,.owner-badge{
position:relative;
overflow:hidden;
color:#fff!important;
border:1px solid transparent!important;
background:
linear-gradient(#111326,#111326) padding-box,
linear-gradient(110deg,#ff42d0,#9c52ff,#39bfff,#ff42d0) border-box!important;
background-size:100% 100%,300% 300%!important;
box-shadow:0 0 10px rgba(157,82,255,.22)!important;
animation:jxrdyOwnerFlow 4s linear infinite!important;
}
.role-badge.role-owner::after,.owner-badge::after{
content:"";position:absolute;inset:0;
background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.17) 42%,transparent 68%);
transform:translateX(-130%);
animation:jxrdyOwnerShine 3s ease-in-out infinite;
pointer-events:none;
}
@keyframes jxrdyOwnerFlow{
0%{background-position:0 0,0% 50%}
50%{background-position:0 0,100% 50%}
100%{background-position:0 0,0% 50%}
}
@keyframes jxrdyOwnerShine{
0%,35%{transform:translateX(-130%)}
70%,100%{transform:translateX(130%)}
}
/* V26 OWNER !alert */
.site-alert{position:sticky;top:0;z-index:11500;padding:7px 12px;background:linear-gradient(90deg,rgba(128,55,255,.96),rgba(220,52,193,.96),rgba(55,154,255,.96));background-size:250% 250%;animation:siteAlertFlow 6s linear infinite;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.site-alert[hidden]{display:none!important}.site-alert-inner{max-width:1500px;margin:auto;display:flex;align-items:center;gap:10px;color:#fff;font-size:11px;font-weight:700}.site-alert-label{flex:0 0 auto;padding:3px 6px;border:1px solid rgba(255,255,255,.38);border-radius:5px;background:rgba(0,0,0,.18);font-size:7px;font-weight:950;letter-spacing:1px}.site-alert-inner button{margin-left:auto;border:0;background:transparent;color:#fff;opacity:.75;font-size:17px;cursor:pointer}.site-alert-inner button:hover{opacity:1}
@keyframes siteAlertFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* V27 FULLSCREEN + POPOUT CHAT */
.chat-head-actions{display:flex;gap:5px;margin-left:auto}.chat-head-actions button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#768299;border-radius:7px;padding:5px 7px;font-size:7px;font-weight:900;letter-spacing:.45px;cursor:pointer}.chat-head-actions button:hover{color:#fff;border-color:var(--a);background:var(--soft)}
body.chat-fullscreen-active{overflow:hidden}
body.chat-fullscreen-active .chat-card{position:fixed!important;inset:0!important;z-index:12500!important;width:100vw!important;height:100dvh!important;max-width:none!important;border-radius:0!important;margin:0!important;display:flex!important;flex-direction:column!important;background:#070a12!important}
body.chat-fullscreen-active .chat-messages{flex:1!important;max-height:none!important;height:auto!important}
body.chat-fullscreen-active .chat-form{flex:0 0 auto}
body.chat-fullscreen-active .chat-head-actions #chatFullscreenBtn{border-color:var(--a);color:#fff;background:var(--soft)}
body.chat-popout-mode{margin:0!important;padding:0!important;overflow:hidden!important;background:#070a12!important}
body.chat-popout-mode > *:not(.live-layout):not(#siteAlert):not(#autoplayGate):not(#roleLoginModal):not(#registerModal):not(#adminModal){display:none!important}
body.chat-popout-mode .live-layout{display:block!important;margin:0!important;padding:0!important;width:100vw!important;height:100dvh!important;max-width:none!important}
body.chat-popout-mode .live-layout > *:not(.chat-card){display:none!important}
body.chat-popout-mode .chat-card{display:flex!important;flex-direction:column!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;border-radius:0!important;background:#070a12!important}
body.chat-popout-mode .chat-messages{flex:1!important;max-height:none!important;height:auto!important}
body.chat-popout-mode #chatPopoutBtn{display:none!important}
@media(max-width:650px){.chat-head-actions button span{display:none}.chat-head-actions button{font-size:12px;padding:4px 7px}}
/* V28 — stronger OWNER identity */
.chat-msg.role-owner b,
.chat-msg.owner b{
font-weight:900!important;
letter-spacing:.15px;
}
.role-badge.role-owner,
.owner-badge{
font-weight:950!important;
}
/* V29 — OWNER MESSAGE EMPHASIS */
.chat-msg.role-owner,
.chat-msg.owner{
font-weight:800!important;
}
.chat-msg.role-owner > b,
.chat-msg.owner > b{
font-weight:400!important;
letter-spacing:normal!important;
}
.chat-msg.role-owner .role-badge,
.chat-msg.owner .owner-badge,
.chat-msg.role-owner time,
.chat-msg.owner time,
.chat-msg.role-owner .msg-actions,
.chat-msg.owner .msg-actions,
.chat-msg.role-owner .reply-preview,
.chat-msg.owner .reply-preview{
font-weight:400!important;
}
.chat-msg.role-owner .role-badge,
.chat-msg.owner .owner-badge{
font-weight:950!important;
}
/* V29 — ADMIN COMMAND LIST */
.admin-command-box{
margin:0 0 12px;
padding:12px;
border:1px solid rgba(255,255,255,.07);
border-radius:11px;
background:rgba(255,255,255,.025);
}
.admin-command-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.admin-command-title span{font-size:9px;font-weight:950;letter-spacing:1px;color:#fff}
.admin-command-title small{font-size:7px;color:#657087}
.admin-command-list{display:grid;gap:6px}
.admin-command-list>div{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;padding:8px;border-radius:8px;background:rgba(0,0,0,.15)}
.admin-command-list code{color:#c8b6ff;font-size:9px;font-weight:900}
.admin-command-list span{color:#8792a7;font-size:8px;line-height:1.4}
.admin-command-note{margin-top:8px;color:#566176;font-size:7px}
@media(max-width:650px){.admin-command-list>div{grid-template-columns:1fr;gap:4px}.admin-command-title{align-items:flex-start;flex-direction:column}}
/* V30 — FULLSCREEN CHAT SCROLL FIX */
body.chat-fullscreen-active{
overflow:hidden!important;
}
body.chat-fullscreen-active .chat-card,
.chat-card:fullscreen{
min-height:0!important;
overflow:hidden!important;
}
body.chat-fullscreen-active .chat-messages,
.chat-card:fullscreen .chat-messages{
flex:1 1 auto!important;
min-height:0!important;
height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain;
scrollbar-gutter:stable;
-webkit-overflow-scrolling:touch;
}
body.chat-fullscreen-active .chat-form,
body.chat-fullscreen-active .emote-row,
body.chat-fullscreen-active .reply-bar,
.chat-card:fullscreen .chat-form,
.chat-card:fullscreen .emote-row,
.chat-card:fullscreen .reply-bar{
flex:0 0 auto!important;
}
body.chat-popout-mode .chat-messages{
min-height:0!important;
height:0!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch;
}
/* V31 — ADMIN COMMAND ACTION BUTTONS */
.admin-command-list .admin-command-row{
grid-template-columns:150px minmax(0,1fr) 58px!important;
}
.command-run-btn{
border:1px solid var(--a)!important;
background:var(--soft)!important;
color:#fff!important;
border-radius:7px!important;
padding:7px 8px!important;
font-size:7px!important;
font-weight:950!important;
letter-spacing:.6px;
cursor:pointer;
}
.command-run-btn:hover{box-shadow:0 0 14px var(--glow)}
@media(max-width:650px){
.admin-command-list .admin-command-row{grid-template-columns:1fr!important}
.command-run-btn{justify-self:start}
}
/* V32 — ROBUST CHAT VIEW MODES
Fullscreen is implemented as a fixed overlay instead of relying on the browser
Fullscreen API, so it works consistently on desktop/mobile and remains scrollable. */
html.chat-view-open,body.chat-view-open{overflow:hidden!important}
#chatPanel.chat-expanded{
position:fixed!important;
inset:0!important;
z-index:30000!important;
width:100vw!important;
height:100dvh!important;
max-width:none!important;
max-height:none!important;
margin:0!important;
border-radius:0!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
background:#070a12!important;
}
#chatPanel.chat-expanded .chat-messages{
flex:1 1 0!important;
min-height:0!important;
height:auto!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
}
#chatPanel.chat-expanded .chat-form,
#chatPanel.chat-expanded .emote-row,
#chatPanel.chat-expanded .reply-bar{flex:0 0 auto!important}
#chatPanel.chat-expanded #chatFullscreenBtn{color:#fff!important;border-color:var(--a)!important;background:var(--soft)!important}
/* Dedicated popout page mode. */
html.chat-popout-page,body.chat-popout-page{
margin:0!important;padding:0!important;width:100%!important;height:100%!important;
min-height:100%!important;overflow:hidden!important;background:#070a12!important;
}
body.chat-popout-page > *{display:none!important}
body.chat-popout-page #siteAlert,
body.chat-popout-page #roleLoginModal,
body.chat-popout-page #registerModal,
body.chat-popout-page #adminModal{display:none!important}
body.chat-popout-page .live-layout{
display:block!important;position:fixed!important;inset:0!important;width:100vw!important;
height:100dvh!important;max-width:none!important;margin:0!important;padding:0!important;
}
body.chat-popout-page .live-layout > *{display:none!important}
body.chat-popout-page #chatPanel{
display:flex!important;position:absolute!important;inset:0!important;width:100%!important;
height:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;
flex-direction:column!important;overflow:hidden!important;background:#070a12!important;
}
body.chat-popout-page #chatPanel .chat-messages{
display:block!important;flex:1 1 0!important;min-height:0!important;height:auto!important;
max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
}
body.chat-popout-page #chatPopoutBtn{display:none!important}
body.chat-popout-page #chatFullscreenBtn span{display:inline!important}
/* V33 — FULLSCREEN CHAT REBUILD */
#chatPanel.chat-expanded{
position:fixed!important;left:0!important;top:0!important;right:0!important;bottom:0!important;
width:100%!important;height:100vh!important;height:100dvh!important;
min-width:100%!important;max-width:none!important;min-height:100%!important;max-height:none!important;
margin:0!important;padding:0!important;z-index:50000!important;border-radius:0!important;
display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto auto!important;
background:#070a12!important;transform:none!important;
}
#chatPanel.chat-expanded .chat-messages{
width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
overflow-y:auto!important;overflow-x:hidden!important;padding:12px 16px!important;
}
#chatPanel.chat-expanded .chat-head,#chatPanel.chat-expanded .chat-header{width:100%!important}
html.chat-view-open,body.chat-view-open{overflow:hidden!important;width:100%!important;height:100%!important}
body.chat-popout-page,html.chat-popout-page{all:unset}
/* V33 COMMAND CENTER */
.admin-command-launch{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.025)}
.admin-command-launch button,.command-display-row button{border:1px solid var(--a);background:var(--soft);color:#fff;border-radius:8px;padding:8px 11px;font-size:8px;font-weight:950;letter-spacing:.7px;cursor:pointer}
.admin-command-launch small{color:#69758b;font-size:8px}.commands-card{width:min(620px,95vw)}
.commands-display{display:grid;gap:8px;margin-top:15px}.command-display-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.025)}
.command-display-row>div{display:grid;gap:5px}.command-display-row code{color:#c9b9ff;font-size:10px;font-weight:900}.command-display-row span{color:#7d899f;font-size:8px}
/* V34 FUN COMMANDS */
.pinned-notice{position:sticky;top:0;z-index:11450;display:flex;align-items:center;gap:9px;padding:8px 14px;background:rgba(9,12,21,.97);border-bottom:1px solid rgba(169,112,255,.3);box-shadow:0 6px 22px rgba(0,0,0,.25);color:#d9ddea;font-size:10px}.pinned-notice[hidden]{display:none!important}.pinned-notice>span{color:#c9b5ff;font-size:8px;font-weight:950;letter-spacing:.8px}.pinned-notice>b{font-weight:650}.pinned-notice button{margin-left:auto;border:0;background:none;color:#7d8799;cursor:pointer}
.hype-train{position:fixed;z-index:40000;inset:0;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(137,60,255,.18),transparent 55%)}.hype-train[hidden]{display:none!important}.hype-train>div{padding:25px 36px;text-align:center;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(6,8,15,.9);box-shadow:0 0 80px rgba(145,67,255,.38);animation:hypePulse .65s ease-in-out infinite alternate}.hype-train strong{display:block;font-size:24px;letter-spacing:1.5px;background:linear-gradient(90deg,#ff4ed7,#a66cff,#4bc8ff,#ff4ed7);background-size:250% 100%;-webkit-background-clip:text;color:transparent;animation:hypeFlow 2s linear infinite}.hype-train span{display:block;margin-top:8px;color:#fff;font-size:11px;font-weight:800}
@keyframes hypePulse{to{transform:scale(1.045)}}@keyframes hypeFlow{to{background-position:250% 0}}
.chat-msg.action-message{font-style:italic;color:#b9a7ed!important}.chat-msg.bot-message{color:#a9b4c7!important}
/* V35 — EXTEND CHAT (replaces fullscreen) */
html.chat-view-open,body.chat-view-open{overflow:auto!important;width:auto!important;height:auto!important}
#chatPanel.chat-expanded{
position:relative!important;inset:auto!important;
width:100%!important;height:auto!important;min-width:0!important;max-width:none!important;
min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;
z-index:auto!important;border-radius:inherit!important;display:flex!important;flex-direction:column!important;
background:inherit!important;transform:none!important;
}
#chatPanel.chat-expanded .chat-messages{
height:620px!important;min-height:620px!important;max-height:620px!important;
overflow-y:auto!important;overflow-x:hidden!important;
}
#chatPanel #chatExtendBtn{white-space:nowrap}
#chatPanel.chat-expanded #chatExtendBtn{color:#fff!important;border-color:var(--a)!important;background:var(--soft)!important}
/* Pin now belongs to the chat box, not the website */
.pinned-notice{display:none!important}
.chat-pinned-notice{
flex:0 0 auto;display:flex;align-items:center;gap:8px;
margin:0 10px 7px;padding:8px 10px;
border:1px solid rgba(169,112,255,.25);border-radius:8px;
background:rgba(145,75,255,.07);color:#dce1eb;font-size:9px;
}
.chat-pinned-notice[hidden]{display:none!important}
.chat-pinned-notice>span{color:#c9b5ff;font-size:7px;font-weight:950;letter-spacing:.7px}
.chat-pinned-notice>b{font-weight:650;line-height:1.35}
.chat-pinned-notice button{margin-left:auto;border:0;background:transparent;color:#7f899b;cursor:pointer;font-size:14px}
@media(max-width:650px){
#chatPanel.chat-expanded .chat-messages{height:70vh!important;min-height:70vh!important;max-height:70vh!important}
}
/* V36 — WORKING EXTEND + PIN SPACING */
#chatPanel.chat-extended-v36{
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:visible!important;
}
#chatPanel.chat-extended-v36 .chat-messages{
height:650px!important;
min-height:650px!important;
max-height:650px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
}
#chatPanel.chat-extended-v36 #chatExtendBtn{
color:#fff!important;
border-color:var(--a)!important;
background:var(--soft)!important;
}
/* Give the pin its own row below the header/EXTEND controls. */
#chatPanel .chat-pinned-notice{
position:relative!important;
order:2!important;
margin:10px 12px 8px!important;
padding:10px 12px!important;
clear:both!important;
z-index:1!important;
background:rgba(145,75,255,.075)!important;
border:1px solid rgba(169,112,255,.24)!important;
border-radius:9px!important;
}
#chatPanel .chat-messages{order:3!important}
#chatPanel .chat-pinned-notice>b{
font-weight:800!important;
color:#eef0f6!important;
}
#chatPanel .chat-pinned-notice>span{
font-weight:950!important;
}
/* Make normal chat message text bold without making usernames/rank/time heavy. */
#chatPanel .chat-msg{
font-weight:700!important;
}
#chatPanel .chat-msg>b,
#chatPanel .chat-msg .role-badge,
#chatPanel .chat-msg .owner-badge,
#chatPanel .chat-msg time,
#chatPanel .chat-msg .msg-actions,
#chatPanel .chat-msg .reply-preview{
font-weight:400!important;
}
#chatPanel .chat-msg .role-badge,
#chatPanel .chat-msg .owner-badge{
font-weight:950!important;
}
@media(max-width:650px){
#chatPanel.chat-extended-v36 .chat-messages{
height:68vh!important;
min-height:68vh!important;
max-height:68vh!important;
}
}
/* V37 — extend button visual only; sizing is applied directly by JS */
#chatGrowBtn.is-extended{
color:#fff!important;
border-color:var(--a)!important;
background:var(--soft)!important;
}
@media(max-width:650px){
#chatPanel .chat-messages[style*="650px"]{
height:68vh!important;min-height:68vh!important;max-height:68vh!important;
}
}
/* V38 — ACTUAL EXTEND FIX */
#chat.chat-section{
height:auto!important;
max-height:none!important;
}
#chat.chat-section.chat-is-extended #chatMessages{
height:650px!important;
min-height:650px!important;
max-height:650px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
}
#chat.chat-section #chatGrowBtn.is-extended{
color:#fff!important;
border-color:var(--a)!important;
background:var(--soft)!important;
}
@media(max-width:650px){
#chat.chat-section.chat-is-extended #chatMessages{
height:68vh!important;
min-height:68vh!important;
max-height:68vh!important;
}
}
/* V38.1 — EXTEND BUTTON SPACING
Give the ONLINE row and EXTEND control breathing room. */
#chat #chatGrowBtn{
margin-top:7px!important;
position:relative!important;
top:2px!important;
}
/* V38.2 — PIN SPACING
Keep the pinned notice clearly below the ONLINE / EXTEND-COLLAPSE controls. */
#chat .chat-pinned-notice{
margin-top:22px!important;
margin-bottom:10px!important;
}
#chat.chat-is-extended .chat-pinned-notice{
margin-top:22px!important;
}
/* V38.3 — REPLY BAR CLEANUP */
#replyBar[hidden],
.reply-bar[hidden]{
display:none!important;
}
/* V39 LIVE EXPERIENCE */
.chat-live-status{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.onair-badge{padding:4px 7px;border:1px solid rgba(255,80,105,.35);border-radius:999px;background:rgba(255,60,90,.08);color:#ff8194;font-size:7px;font-weight:950;letter-spacing:.65px}.onair-badge b{color:#fff}
.tune-rating{display:flex;align-items:center;gap:10px;margin-top:10px}.tune-rating button{border:1px solid rgba(255,115,80,.3);background:rgba(255,100,70,.07);color:#ff9d7c;border-radius:9px;padding:8px 11px;font-size:8px;font-weight:950;cursor:pointer}.tune-rating button.voted{color:#fff;background:rgba(255,100,70,.17);box-shadow:0 0 16px rgba(255,100,70,.15)}.tune-rating strong{font-size:11px;color:#fff}.tune-rating span{font-size:7px;color:#657087}
.community-hype{margin-top:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.02)}.community-hype>div:first-child{display:flex;justify-content:space-between;font-size:7px;font-weight:900;color:#778399;letter-spacing:.7px}.community-hype b{color:#fff}.hype-track{height:5px;margin-top:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.hype-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8c62ff,#ff4fcf,#4cc9ff);transition:width .35s ease}
.love-burst{position:fixed;inset:0;z-index:45000;pointer-events:none;display:grid;place-items:center;background:radial-gradient(circle,rgba(142,72,255,.13),transparent 55%)}.love-burst[hidden]{display:none!important}.love-burst div{position:absolute;font-size:70px;animation:loveFloat 2.6s ease-out forwards}.love-burst div:nth-child(1){transform:translate(-120px,80px)}.love-burst div:nth-child(2){transform:translate(110px,30px);animation-delay:.12s}.love-burst div:nth-child(3){transform:translate(0,-70px);animation-delay:.22s}.love-burst strong{font-size:clamp(34px,8vw,88px);color:#fff;text-shadow:0 0 35px var(--a);animation:lovePop 2.5s ease forwards}@keyframes loveFloat{0%{opacity:0}20%{opacity:1}100%{opacity:0;translate:0 -220px;scale:1.7}}@keyframes lovePop{0%{opacity:0;scale:.5}25%,70%{opacity:1;scale:1}100%{opacity:0;scale:1.1}}
.admin-live-controls{margin:0 0 12px;padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}.admin-live-title{display:flex;justify-content:space-between;margin-bottom:9px}.admin-live-title span{font-size:9px;font-weight:950;letter-spacing:1px;color:#fff}.admin-live-title small{font-size:7px;color:#667188}.admin-live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.admin-live-grid button{border:1px solid rgba(255,255,255,.09);background:#0b101b;color:#d7deeb;border-radius:8px;padding:9px;font-size:8px;font-weight:900;cursor:pointer}.admin-live-grid button:hover{border-color:var(--a);background:var(--soft)}
@media(max-width:650px){.chat-live-status{align-items:flex-end}.admin-live-grid{grid-template-columns:1fr}.tune-rating{align-items:flex-start;flex-direction:column}}
/* V39.1 — COMMAND CENTER MODAL */
#commandsModal{
z-index:65000!important;
}
#commandsModal .commands-card{
width:min(680px,94vw)!important;
max-height:min(78vh,720px)!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
box-shadow:0 30px 100px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04)!important;
}
#commandsModal .commands-display{
flex:1 1 auto!important;
min-height:0!important;
max-height:430px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding-right:5px!important;
scrollbar-gutter:stable;
}
#commandsModal .commands-display::-webkit-scrollbar{width:7px}
#commandsModal .commands-display::-webkit-scrollbar-track{background:rgba(255,255,255,.025);border-radius:10px}
#commandsModal .commands-display::-webkit-scrollbar-thumb{background:rgba(166,108,255,.28);border-radius:10px}
.command-search-wrap{
flex:0 0 auto;
display:flex;align-items:center;gap:7px;
margin:12px 0 9px;padding:0 9px;
border:1px solid rgba(255,255,255,.08);
border-radius:9px;background:rgba(0,0,0,.18);
}
.command-search-wrap>span{color:#8d78bd;font-size:15px}
.command-search-wrap input{
flex:1;min-width:0;padding:10px 2px;border:0!important;outline:0!important;
background:transparent!important;color:#eef1f7!important;font-size:9px;
}
.command-search-wrap input::placeholder{color:#566176}
.command-search-wrap button{
border:0;background:transparent;color:#657087;font-size:15px;cursor:pointer;padding:4px;
}
.command-search-wrap button:hover{color:#fff}
.command-search-empty{
padding:16px;text-align:center;color:#68748a;font-size:9px;
}
.command-display-row.command-filter-hidden{display:none!important}
/* Commands must always sit above the Admin modal. */
#adminModal{z-index:60000!important}
/* V39.3 — SAFE COMMAND SCROLL FIX */
#commandsModal .commands-card{
overflow:hidden!important;
}
#commandsModal .commands-display{
display:block!important;
max-height:430px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
scroll-behavior:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch!important;
padding-right:6px!important;
}
#commandsModal .command-display-row{
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
transform:none!important;
will-change:auto!important;
}
#commandsModal .command-display-row button{
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* V40.1 LISTENER PROFILE */
.profile-btn{border-color:rgba(116,200,255,.25)!important;color:#9bdcff!important}
.listener-profile-card{width:min(520px,94vw)!important}
.profile-hero{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}
.profile-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--a),#4cc9ff);color:#fff;font-size:20px;font-weight:950}
.profile-hero>div:nth-child(2){display:grid;gap:4px;flex:1}.profile-hero strong{font-size:15px;color:#fff}.profile-hero span{font-size:7px;font-weight:950;letter-spacing:1px;color:#a994df}.profile-hero>b{font-size:10px;color:#fff;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#0a0e18}
.profile-xp{margin-top:12px;padding:11px;border:1px solid rgba(255,255,255,.06);border-radius:10px}.profile-xp>div:first-child{display:flex;justify-content:space-between;font-size:7px;color:#778399;font-weight:900}.profile-xp b{color:#dce3ef}.profile-xp-track{height:7px;margin-top:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.profile-xp-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#805dff,#d14fff,#4bc8ff);transition:width .4s ease}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.profile-stats div{text-align:center;padding:11px 5px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.02)}.profile-stats b{display:block;color:#fff;font-size:14px}.profile-stats span{display:block;margin-top:3px;color:#657087;font-size:6px;font-weight:900}
.profile-ranks{margin-top:12px}.profile-ranks>span{font-size:7px;font-weight:950;color:#727e94}.profile-ranks>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.profile-ranks i{font-style:normal;font-size:7px;padding:5px 7px;border:1px solid rgba(255,255,255,.06);border-radius:99px;color:#5f6a7d}.profile-ranks i.earned{color:#d9ccff;border-color:rgba(160,111,255,.3);background:rgba(150,90,255,.07)}.profile-note{display:block;margin-top:12px;color:#596579;font-size:7px}
/* V40.2 — PROFILE beside EXTEND */
#chat #chatGrowBtn + #listenerProfileBtn{
margin-top:7px!important;
margin-left:6px!important;
position:relative!important;
top:2px!important;
vertical-align:middle!important;
}
#chat #listenerProfileBtn{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto!important;
}
#chat #listenerProfileBtn[hidden]{display:none!important}
/* V40.3 — COMPACT CHAT XP BAR */
#chatXPBar{
clear:both;
margin:11px 12px 5px;
padding:8px 10px;
border:1px solid rgba(139,102,255,.16);
border-radius:9px;
background:rgba(115,74,210,.035);
}
#chatXPBar[hidden]{display:none!important}
.chat-xp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;font-size:7px}
.chat-xp-head>span{color:#7c879a;font-weight:800}.chat-xp-head b{color:#fff;font-size:8px}.chat-xp-head i{font-style:normal;color:#a997dc;font-weight:950;letter-spacing:.5px}.chat-xp-head strong{color:#69758a;font-size:7px}
.chat-xp-track{height:5px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden}
.chat-xp-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7658ff,#ca4fff,#4bc8ff);transition:width .45s ease}
/* V40.4 — CENTERED OWNER ALERT */
#siteAlert{
text-align:center!important;
justify-content:center!important;
align-items:center!important;
}
#siteAlertText{
display:block!important;
width:100%!important;
text-align:center!important;
font-weight:900!important;
letter-spacing:.35px!important;
}
#siteAlertClose{
position:absolute!important;
right:12px!important;
}
.site-alert,.global-alert{
text-align:center!important;
justify-content:center!important;
}
.site-alert #siteAlertText,.global-alert #siteAlertText{
font-weight:900!important;
text-align:center!important;
}
/* V40.5 — CENTERED JXRDY ALERT + FLOWING GRADIENT */
#siteAlert,
.site-alert,
.global-alert{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
#siteAlert .alert-inner,
.site-alert .alert-inner,
.global-alert .alert-inner{
width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
text-align:center!important;
}
#siteAlertText,
#siteAlertLabel,
.site-alert-text,
.site-alert-label,
.global-alert-text,
.global-alert-label{
text-align:center!important;
font-weight:950!important;
}
#siteAlertLabel,
.site-alert-label,
.global-alert-label{
background:linear-gradient(90deg,#8c62ff,#ff55cf,#4cc9ff,#8c62ff)!important;
background-size:300% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
color:transparent!important;
animation:jxrdyAlertFlow 4s linear infinite!important;
}
#siteAlertText,
.site-alert-text,
.global-alert-text{
background:linear-gradient(90deg,#ffffff,#c7a9ff,#70d8ff,#ff8cda,#ffffff)!important;
background-size:300% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
color:transparent!important;
animation:jxrdyAlertFlow 5s linear infinite!important;
}
#siteAlertClose,
.site-alert-close,
.global-alert-close{
position:absolute!important;
right:12px!important;
top:50%!important;
transform:translateY(-50%)!important;
}
@keyframes jxrdyAlertFlow{
0%{background-position:0% 50%}
100%{background-position:300% 50%}
}
/* V40.6 — ALERT LABEL PLAIN, MESSAGE DARK GRADIENT */
#siteAlert .site-alert-inner{
width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:9px!important;
text-align:center!important;
}
#siteAlert .site-alert-label{
background:none!important;
-webkit-background-clip:border-box!important;
background-clip:border-box!important;
-webkit-text-fill-color:currentColor!important;
color:#d7dce7!important;
animation:none!important;
font-weight:900!important;
}
#siteAlertText{
display:inline-block!important;
width:auto!important;
text-align:center!important;
font-weight:950!important;
background:linear-gradient(90deg,#6f5a94,#3f6680,#75536f,#4f456d,#6f5a94)!important;
background-size:300% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
color:transparent!important;
animation:jxrdyDarkAlertFlow 6s linear infinite!important;
}
@keyframes jxrdyDarkAlertFlow{
0%{background-position:0% 50%}
100%{background-position:300% 50%}
}
/* V40.7 — SEMI-TRANSPARENT ALERT BACKGROUND */
#siteAlert,
.site-alert,
.global-alert{
background:rgba(7,10,17,.70)!important;
backdrop-filter:blur(8px)!important;
-webkit-backdrop-filter:blur(8px)!important;
}
/* V41 — LISTENER PROGRESSION */
.xp-toast{position:fixed;right:24px;bottom:26px;z-index:70000;padding:9px 13px;border:1px solid rgba(145,102,255,.3);border-radius:10px;background:rgba(9,12,21,.9);color:#c9b9ff;font-size:10px;font-weight:950;box-shadow:0 10px 35px rgba(0,0,0,.35);animation:xpToast 1.8s ease forwards}.xp-toast[hidden]{display:none!important}@keyframes xpToast{0%{opacity:0;transform:translateY(12px)}15%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
.level-up-overlay{position:fixed;inset:0;z-index:75000;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(121,71,230,.17),transparent 52%)}.level-up-overlay[hidden]{display:none!important}.level-up-card{text-align:center;padding:28px 42px;border:1px solid rgba(174,132,255,.28);border-radius:18px;background:rgba(7,10,18,.93);box-shadow:0 0 70px rgba(132,78,255,.24);animation:levelPop 3s ease forwards}.level-up-card small,.level-up-card span,.level-up-card b{display:block}.level-up-card small{font-size:7px;letter-spacing:2px;color:#6d788d}.level-up-card strong{display:block;margin:6px 0;font-size:32px;background:linear-gradient(90deg,#8c62ff,#ff55cf,#4cc9ff);-webkit-background-clip:text;background-clip:text;color:transparent}.level-up-card span{font-size:10px;color:#fff}.level-up-card b{margin-top:5px;font-size:8px;letter-spacing:1.5px;color:#bdaaff}@keyframes levelPop{0%{opacity:0;transform:scale(.7)}15%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
.profile-tabs{display:flex;gap:5px;margin-top:10px}.profile-tabs button{flex:1;padding:8px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:#090e18;color:#657087;font-size:7px;font-weight:950;cursor:pointer}.profile-tabs button.active{color:#fff;border-color:rgba(144,97,255,.3);background:rgba(128,77,230,.08)}
.achievement-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px}.achievement-card{padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.02);opacity:.42}.achievement-card.unlocked{opacity:1;border-color:rgba(155,112,255,.22);background:rgba(126,77,225,.055)}.achievement-card b,.achievement-card span{display:block}.achievement-card b{font-size:8px;color:#e7e1f5}.achievement-card span{margin-top:3px;font-size:6px;line-height:1.4;color:#667287}.achievement-card i{float:right;font-style:normal}.achievement-grid.compact{grid-template-columns:1fr 1fr}
.public-profile-level{display:flex;align-items:center;gap:7px;margin:10px 0}.public-profile-level b{padding:6px 8px;border-radius:7px;background:#0a0f19;color:#fff}.public-profile-level span{font-size:8px;font-weight:950;color:#ac97df;letter-spacing:1px}
.leaderboard-btn{margin-left:6px!important;color:#e7c67b!important}.leaderboard-list{margin-top:12px;max-height:430px;overflow-y:auto}.leaderboard-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:9px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}.leaderboard-row:hover{background:rgba(255,255,255,.025)}.leaderboard-pos{font-size:10px;font-weight:950;color:#7d899d}.leaderboard-row:nth-child(1) .leaderboard-pos{color:#f1cc67}.leaderboard-name b,.leaderboard-name span{display:block}.leaderboard-name b{font-size:9px;color:#eef1f6}.leaderboard-name span{font-size:6px;color:#776b98}.leaderboard-xp{text-align:right}.leaderboard-xp b,.leaderboard-xp span{display:block}.leaderboard-xp b{font-size:8px;color:#b8a4eb}.leaderboard-xp span{font-size:6px;color:#5e697c}
.chat-level-badge{display:inline-block;margin-right:4px;padding:2px 4px;border:1px solid rgba(140,100,230,.2);border-radius:4px;background:rgba(120,75,215,.06);color:#9d8ac9;font-size:5px;font-weight:950;vertical-align:middle}
.chat-name-clickable{cursor:pointer}.chat-name-clickable:hover{text-decoration:underline}
@media(max-width:650px){.achievement-grid{grid-template-columns:1fr}.xp-toast{right:12px;bottom:14px}}
/* V41.1 — LARGER PROFILE / ACHIEVEMENTS */
.listener-profile-card{
width:min(720px,96vw)!important;
max-height:88vh!important;
overflow-y:auto!important;
padding:22px!important;
}
.profile-tabs button{padding:11px!important;font-size:9px!important}
.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.achievement-card{padding:14px!important;min-height:72px!important;border-radius:11px!important}
.achievement-card b{font-size:10px!important;line-height:1.35!important}
.achievement-card span{font-size:8px!important;line-height:1.55!important;margin-top:5px!important}
.profile-ranks>span,.profile-note{font-size:8px!important}
.public-profile-card{width:min(620px,95vw)!important}
.chat-level-badge{
display:inline-flex!important;align-items:center!important;
margin-right:5px!important;padding:2px 5px!important;
font-size:6px!important;line-height:1.2!important;
}
.chat-name-clickable{cursor:pointer!important;position:relative;z-index:2}
@media(max-width:650px){
.listener-profile-card{padding:16px!important}
.achievement-grid{grid-template-columns:1fr!important}
}
/* V41.2 — LEADERBOARD + OWNER XP MANAGER */
.admin-xp-manager{margin:12px 0;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02)}
.admin-section-title{margin-bottom:8px;font-size:7px;font-weight:950;letter-spacing:1px;color:#8b97aa}
.admin-xp-row{display:grid;grid-template-columns:1.4fr .7fr;gap:6px}.admin-xp-row input{min-width:0;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#080d16;color:#e9edf5;font-size:8px;outline:none}.admin-xp-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}.admin-xp-actions button{padding:8px 4px;border:1px solid rgba(140,98,240,.2);border-radius:7px;background:rgba(117,72,215,.07);color:#bca9e9;font-size:7px;font-weight:950;cursor:pointer}.admin-xp-actions button:hover{background:rgba(117,72,215,.14);color:#fff}#adminXPStatus{display:block;min-height:11px;margin-top:7px;color:#778399;font-size:7px}
.leaderboard-list{min-height:100px}.leaderboard-loading{text-align:center;padding:22px;color:#68748a;font-size:8px}
/* V41.3 — PROFILE / LEADERBOARD HOTFIX */
.chat-name-clickable{
cursor:pointer!important;
pointer-events:auto!important;
text-decoration:none;
}
.chat-name-clickable:hover{
text-decoration:underline!important;
text-underline-offset:2px;
}
#leaderboardBtn{pointer-events:auto!important;cursor:pointer!important}
.leaderboard-row{pointer-events:auto!important}
/* V41.4 — PROFILE/LEADERBOARD FIX */
.chat-name-clickable{cursor:pointer!important;pointer-events:auto!important}
.chat-name-clickable:hover>span:last-child{text-decoration:underline;text-underline-offset:2px}
.chat-level-badge{display:inline-block!important;margin-right:5px!important;padding:2px 5px!important;border:1px solid rgba(151,112,255,.3)!important;border-radius:4px!important;color:#ad99df!important;font-size:6px!important;font-weight:950!important}
#leaderboardModal:not([hidden]),#publicProfileModal:not([hidden]){z-index:66000!important}
#leaderboardBtn{cursor:pointer!important;pointer-events:auto!important}
/* V41.5 — BIGGER TOP BOARD + PROFILE OWNER XP */
.leaderboard-card{width:min(760px,96vw)!important;max-height:88vh!important;padding:22px!important}
.leaderboard-card h2{font-size:22px!important;margin-bottom:8px!important}
.leaderboard-list{max-height:560px!important;margin-top:15px!important}
.leaderboard-row{grid-template-columns:48px 1fr 100px!important;gap:13px!important;padding:14px 12px!important;border-radius:9px!important;margin-bottom:4px!important}
.leaderboard-row:hover{background:rgba(133,88,226,.07)!important}
.leaderboard-pos{font-size:14px!important;text-align:center!important}
.leaderboard-name b{font-size:12px!important;line-height:1.35!important}
.leaderboard-name span{font-size:8px!important;margin-top:4px!important}
.leaderboard-xp b{font-size:11px!important}
.leaderboard-xp span{font-size:7px!important;margin-top:3px!important}
.leaderboard-row:nth-child(1){border:1px solid rgba(238,197,90,.18)!important;background:rgba(238,197,90,.025)}
.leaderboard-row:nth-child(2){border:1px solid rgba(190,199,215,.12)!important}
.leaderboard-row:nth-child(3){border:1px solid rgba(190,131,88,.12)!important}
.public-profile-card{width:min(680px,95vw)!important;max-height:88vh!important;overflow-y:auto!important;padding:22px!important}
.public-profile-card h2{font-size:20px!important}
.public-owner-xp{margin-top:16px;padding:13px;border:1px solid rgba(158,111,255,.2);border-radius:10px;background:rgba(123,74,218,.045)}
.public-owner-xp-title{margin-bottom:9px;font-size:7px;font-weight:950;letter-spacing:1px;color:#a993dc}
.public-owner-xp-controls{display:grid;grid-template-columns:110px repeat(3,1fr);gap:6px}
.public-owner-xp-controls input{min-width:0;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#080d16;color:#fff;font-size:9px}
.public-owner-xp-controls button{padding:9px 5px;border:1px solid rgba(149,105,246,.2);border-radius:7px;background:rgba(122,76,218,.08);color:#c0afe8;font-size:7px;font-weight:950;cursor:pointer}
.public-owner-xp-controls button:hover{background:rgba(122,76,218,.16);color:#fff}
#publicXPStatus{display:block;min-height:12px;margin-top:8px;color:#78849a;font-size:7px}
@media(max-width:600px){.leaderboard-card{padding:15px!important}.leaderboard-row{grid-template-columns:35px 1fr 70px!important;padding:11px 7px!important}.public-owner-xp-controls{grid-template-columns:1fr 1fr}.public-owner-xp-controls input{grid-column:1/-1}}
/* V42 — UNLOCKABLE LISTENER COSMETICS */
.profile-cosmetics{margin-top:18px}.profile-cosmetics>span{font-size:8px;font-weight:950;letter-spacing:1px;color:#8e9aae}
.cosmetic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:9px}
.cosmetic-option{padding:11px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.02);cursor:pointer;text-align:left}
.cosmetic-option b,.cosmetic-option span{display:block}.cosmetic-option b{font-size:9px}.cosmetic-option span{margin-top:4px;font-size:7px;color:#6f7a8e}.cosmetic-option.locked{opacity:.38;cursor:not-allowed}.cosmetic-option.equipped{border-color:rgba(150,105,245,.35);background:rgba(127,77,220,.08)}
.name-style-violet{background:linear-gradient(90deg,#8f6cff,#d45cff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.name-style-neon{background:linear-gradient(90deg,#5ee7ff,#8b72ff,#ef6bdc);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nameFlow 5s linear infinite}
.name-style-sunset{background:linear-gradient(90deg,#ff9c68,#e964a8,#8c6fff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nameFlow 5s linear infinite}
.name-style-elite{background:linear-gradient(90deg,#68e8ff,#a677ff,#ff70ca,#f0c969,#68e8ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:nameFlow 4s linear infinite;font-weight:950!important}
@keyframes nameFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media(max-width:650px){.cosmetic-grid{grid-template-columns:1fr}}
/* V43 — COMMUNITY REWARDS */
.achievement-toast{position:fixed;top:82px;left:50%;transform:translateX(-50%);z-index:72000;display:flex;align-items:center;gap:11px;width:min(390px,92vw);padding:13px 15px;border:1px solid rgba(234,193,91,.25);border-radius:12px;background:rgba(8,11,18,.94);box-shadow:0 16px 50px rgba(0,0,0,.42);animation:achPop 4.2s ease forwards}.achievement-toast[hidden]{display:none!important}.achievement-toast-icon{font-size:22px}.achievement-toast small,.achievement-toast strong,.achievement-toast span{display:block}.achievement-toast small{font-size:6px;letter-spacing:1.5px;color:#b69a58}.achievement-toast strong{margin-top:2px;font-size:11px;color:#f0e4c4}.achievement-toast span{margin-top:3px;font-size:7px;color:#768197}@keyframes achPop{0%{opacity:0;transform:translate(-50%,-12px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.badge-option{padding:10px 6px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.02);color:#dfe4ed;cursor:pointer}.badge-option i,.badge-option b,.badge-option span{display:block}.badge-option i{font-style:normal;font-size:15px}.badge-option b{margin-top:4px;font-size:7px}.badge-option span{margin-top:3px;font-size:5px;color:#657086}.badge-option.locked{opacity:.35;cursor:not-allowed}.badge-option.equipped{border-color:rgba(231,193,92,.3);background:rgba(231,193,92,.04)}
.chat-profile-badge{display:inline-block;margin-right:4px;color:#e2c36d;font-size:8px;vertical-align:middle}
.admin-community-tools{margin:12px 0;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02)}.admin-community-row{display:grid;grid-template-columns:1fr auto;gap:6px}.admin-community-row input{min-width:0;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#080d16;color:#fff;font-size:8px}.admin-community-row button{padding:8px 10px;border:1px solid rgba(145,102,240,.2);border-radius:7px;background:rgba(120,76,215,.07);color:#baa7e6;font-size:7px;font-weight:950;cursor:pointer}.admin-community-tools small{display:block;margin-top:6px;color:#667287;font-size:6px}
@media(max-width:650px){.badge-grid{grid-template-columns:repeat(2,1fr)}}
/* V43.1 — CLEANER OWNER ADMIN */
.admin-community-tools,
.admin-xp-manager{
box-sizing:border-box!important;
width:100%!important;
min-height:132px!important;
margin:10px 0!important;
padding:12px!important;
border:1px solid rgba(255,255,255,.07)!important;
border-radius:10px!important;
background:rgba(255,255,255,.02)!important;
}
.admin-main-actions{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
margin:10px 0 12px!important;
}
.admin-main-actions button{
width:100%!important;
min-height:34px!important;
margin:0!important;
padding:8px 6px!important;
border:1px solid rgba(145,102,240,.18)!important;
border-radius:8px!important;
background:rgba(120,76,215,.06)!important;
color:#a99acb!important;
font-size:7px!important;
font-weight:950!important;
letter-spacing:.35px!important;
cursor:pointer!important;
}
.admin-main-actions button:hover{background:rgba(120,76,215,.13)!important;color:#fff!important}
.admin-users-card{width:min(700px,95vw)!important;max-height:86vh!important;padding:20px!important}
.admin-users-search input{box-sizing:border-box;width:100%;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#080d16;color:#fff;font-size:9px;outline:none}
.admin-users-list{margin-top:10px;max-height:520px;overflow-y:auto}
.admin-user-row{display:grid;grid-template-columns:1fr auto;gap:12px;width:100%;padding:11px 10px;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;color:#fff;text-align:left;cursor:pointer}
.admin-user-row:hover{background:rgba(126,80,220,.06)}
.admin-user-row>div:last-child{text-align:right}.admin-user-row b,.admin-user-row span{display:block}.admin-user-row b{font-size:9px}.admin-user-row span{margin-top:3px;color:#707c90;font-size:6px}.admin-users-empty{padding:24px;text-align:center;color:#707c90;font-size:8px}
@media(max-width:560px){.admin-main-actions{grid-template-columns:1fr!important}.admin-community-tools,.admin-xp-manager{min-height:0!important}}
/* V43.2 — ADMIN POLISH */
.admin-main-actions{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.admin-community-row{
grid-template-columns:minmax(0,1fr) auto auto!important;
}
.admin-users-modal{
position:fixed!important;
inset:0!important;
z-index:90000!important;
}
.admin-users-modal .admin-users-card{
position:relative!important;
z-index:90001!important;
}
@media(max-width:560px){
.admin-main-actions{grid-template-columns:1fr!important}
.admin-community-row{grid-template-columns:1fr 1fr!important}
.admin-community-row input{grid-column:1/-1!important}
}
/* V43.3 — FINAL ADMIN USER CLEANUP */
.admin-main-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.admin-community-row{grid-template-columns:minmax(0,1fr) auto!important}
#adminModal .admin-users{display:none!important}
@media(max-width:560px){
.admin-main-actions{grid-template-columns:1fr!important}
.admin-community-row{grid-template-columns:1fr auto!important}
.admin-community-row input{grid-column:auto!important}
}
/* V43.4 — REGISTERED USERS READABILITY */
.admin-users-modal{
position:fixed!important;
inset:0!important;
z-index:90000!important;
padding:24px!important;
}
.admin-users-modal .admin-users-card{
box-sizing:border-box!important;
width:min(900px,96vw)!important;
height:min(760px,90vh)!important;
max-height:90vh!important;
padding:26px!important;
display:flex!important;
flex-direction:column!important;
}
.admin-users-card .eyebrow{font-size:8px!important;letter-spacing:1.5px!important}
.admin-users-card h2{font-size:25px!important;line-height:1.2!important;margin:5px 0 16px!important}
.admin-users-search{flex:0 0 auto!important}
.admin-users-search input{
width:100%!important;
min-height:44px!important;
padding:11px 13px!important;
font-size:11px!important;
border-radius:9px!important;
}
.admin-users-list{
flex:1 1 auto!important;
min-height:0!important;
max-height:none!important;
overflow-y:auto!important;
overflow-x:hidden!important;
margin-top:13px!important;
padding-right:7px!important;
overscroll-behavior:contain!important;
scrollbar-gutter:stable!important;
}
.admin-users-list::-webkit-scrollbar{width:9px}
.admin-users-list::-webkit-scrollbar-track{background:rgba(255,255,255,.025);border-radius:9px}
.admin-users-list::-webkit-scrollbar-thumb{background:rgba(139,103,216,.28);border-radius:9px}
.admin-user-row{
min-height:68px!important;
padding:14px 15px!important;
margin-bottom:6px!important;
border:1px solid rgba(255,255,255,.06)!important;
border-radius:10px!important;
background:rgba(255,255,255,.018)!important;
}
.admin-user-row:hover{background:rgba(126,80,220,.075)!important;border-color:rgba(143,102,230,.16)!important}
.admin-user-row b{font-size:11px!important;line-height:1.35!important}
.admin-user-row span{margin-top:5px!important;font-size:8px!important;line-height:1.4!important}
.admin-users-empty{padding:38px!important;font-size:10px!important}
#adminModal #adminUsers,
#adminModal .admin-users:not(#adminUsersList),
#adminModal .admin-user-management,
#adminModal .user-management{
display:none!important;
}
@media(max-width:600px){
.admin-users-modal{padding:10px!important}
.admin-users-modal .admin-users-card{width:98vw!important;height:92vh!important;max-height:92vh!important;padding:17px!important}
.admin-users-card h2{font-size:20px!important}
.admin-user-row{grid-template-columns:1fr!important;gap:5px!important}
.admin-user-row>div:last-child{text-align:left!important}
}
/* V43.5 — PUBLIC PROFILE ABOVE REGISTERED USERS */
.public-profile-modal{
position:fixed!important;
inset:0!important;
z-index:95000!important;
}
.public-profile-modal .public-profile-card{
position:relative!important;
z-index:95001!important;
}
/* V43.6 — PROFILE DIRECTLY OVER REGISTERED USERS */
body.profile-from-users .public-profile-modal{
position:fixed!important;inset:0!important;z-index:95000!important;
background:rgba(0,0,0,.18)!important;
display:flex!important;align-items:center!important;justify-content:center!important;
padding:28px!important;
}
body.profile-from-users .public-profile-modal[hidden]{display:none!important}
body.profile-from-users .public-profile-card{
position:relative!important;z-index:95001!important;
width:min(680px,80vw)!important;max-height:76vh!important;
box-shadow:0 28px 90px rgba(0,0,0,.78)!important;
}
body.profile-from-users .admin-users-modal{z-index:90000!important}
body.profile-from-users .admin-users-card{filter:brightness(.72)!important}
/* V43.7 — TRUE TOP-LAYER PROFILE FIX
publicProfileModal is portaled to BODY by JS, so these values are no longer
limited by the Admin/Registered Users stacking contexts. */
#publicProfileModal.public-profile-modal{
position:fixed!important;
inset:0!important;
z-index:2147483000!important;
isolation:isolate!important;
transform:none!important;
}
#publicProfileModal.public-profile-modal .public-profile-card{
position:relative!important;
z-index:1!important;
}
#adminUsersModal.admin-users-modal{z-index:90000!important}
body.profile-from-users #publicProfileModal.public-profile-modal{
z-index:2147483000!important;
}
/* V44 — POLLS, MODERATION, ADMIN LOG */
.admin-main-actions{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.v44-front-modal{z-index:97000!important}.v44-panel-card{width:min(760px,95vw)!important;max-height:88vh!important;padding:23px!important}
.poll-create input,.admin-log-toolbar input{box-sizing:border-box;width:100%;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#080d16;color:#fff}
.poll-option-inputs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.poll-actions{display:flex;gap:7px;margin-top:10px}.poll-actions button,.admin-log-toolbar button{padding:10px;border:1px solid rgba(145,102,240,.2);border-radius:8px;background:rgba(120,76,215,.08);color:#c0afe8;font-size:7px;font-weight:950;cursor:pointer}
.live-poll-bar{margin:0 0 10px;padding:11px;border:1px solid rgba(144,102,235,.18);border-radius:10px;background:rgba(86,55,145,.07)}.poll-head span,.poll-head b{display:block}.poll-head span{font-size:6px;font-weight:950;letter-spacing:1.4px;color:#9f85dc}.poll-head b{margin-top:3px;font-size:10px}.poll-votes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}.poll-votes button{position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:8px;padding:9px;border:1px solid rgba(255,255,255,.06);border-radius:7px;background:#090e17;color:#fff;cursor:pointer}.poll-votes button span,.poll-votes button i{position:relative;z-index:2;font-size:7px;font-style:normal}.poll-votes button em{position:absolute;z-index:1;left:0;top:0;bottom:0;background:rgba(129,82,220,.15)}
.profile-mod-tools{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.06)}.profile-mod-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.profile-mod-buttons button{padding:8px 4px;border:1px solid rgba(145,102,240,.18);border-radius:7px;background:rgba(120,76,215,.06);color:#bca9e5;font-size:6px;font-weight:950;cursor:pointer}.profile-mod-buttons .danger{border-color:rgba(220,77,92,.25);color:#e6909b}.profile-mod-tools small{display:block;min-height:12px;margin-top:7px;color:#778399;font-size:7px}
.admin-log-toolbar{display:grid;grid-template-columns:1fr auto;gap:7px}.admin-log-list{margin-top:12px;max-height:570px;overflow-y:auto;padding-right:6px}.admin-log-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.055)}.admin-log-row time{font-size:7px;color:#6f7b8e}.admin-log-row b,.admin-log-row span,.admin-log-row small{display:block}.admin-log-row b{font-size:9px}.admin-log-row span{margin-top:3px;font-size:7px;color:#a997d1}.admin-log-row small{margin-top:4px;font-size:7px;color:#6e798c}
@media(max-width:750px){.admin-main-actions{grid-template-columns:1fr 1fr!important}.poll-option-inputs,.poll-votes{grid-template-columns:1fr}.profile-mod-buttons{grid-template-columns:1fr 1fr}.admin-log-row{grid-template-columns:1fr}.admin-log-row time{margin-bottom:2px}}
/* V44.1 — NONE OPTIONS */
.name-style-none{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:inherit!important;animation:none!important;font-weight:inherit!important}
.cosmetic-option[data-cosmetic="none"] b{color:#dfe4ed!important;background:none!important;-webkit-text-fill-color:initial!important}
.badge-option[data-badge="none"] i{color:#657086!important}
/* V44.4 — CLEAN LIVE POLL */
.live-poll-bar{
box-sizing:border-box!important;
width:100%!important;
margin:10px 0 14px!important;
padding:14px 15px 15px!important;
border:1px solid rgba(145,102,235,.22)!important;
border-radius:12px!important;
background:rgba(65,42,112,.10)!important;
overflow:hidden!important;
}
.poll-head{
display:block!important;
margin-bottom:11px!important;
}
.poll-head span{
display:block!important;
margin:0 0 5px!important;
font-size:7px!important;
line-height:1!important;
font-weight:950!important;
letter-spacing:1.5px!important;
color:#a88be7!important;
}
.poll-head b{
display:block!important;
max-width:100%!important;
font-size:12px!important;
line-height:1.4!important;
color:#f2f3f8!important;
overflow-wrap:anywhere!important;
}
.poll-votes{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
margin:0!important;
}
.poll-votes .poll-choice{
position:relative!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-rows:auto 4px!important;
align-items:center!important;
column-gap:12px!important;
row-gap:8px!important;
min-width:0!important;
min-height:50px!important;
padding:10px 11px!important;
border:1px solid rgba(255,255,255,.065)!important;
border-radius:9px!important;
background:rgba(6,10,17,.82)!important;
color:#fff!important;
text-align:left!important;
cursor:pointer!important;
overflow:hidden!important;
}
.poll-votes .poll-choice:hover{
border-color:rgba(154,112,239,.25)!important;
background:rgba(15,17,28,.94)!important;
}
.poll-choice-label{
min-width:0!important;
font-size:8px!important;
line-height:1.35!important;
font-weight:800!important;
color:#e7e9f0!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
}
.poll-choice-stats{
font-size:8px!important;
line-height:1!important;
font-weight:950!important;
color:#c7b5ed!important;
white-space:nowrap!important;
}
.poll-choice-stats small{
font-size:6px!important;
font-weight:700!important;
color:#717b8e!important;
}
.poll-choice-track{
grid-column:1/-1!important;
position:relative!important;
display:block!important;
width:100%!important;
height:4px!important;
border-radius:99px!important;
background:rgba(255,255,255,.055)!important;
overflow:hidden!important;
}
.poll-choice-track>span{
display:block!important;
height:100%!important;
border-radius:99px!important;
background:rgba(143,94,231,.55)!important;
transition:width .25s ease!important;
}
/* Neutralize old poll fill element rules if cached/left over. */
.poll-votes button>em{display:none!important}
@media(max-width:620px){
.poll-votes{grid-template-columns:1fr!important}
.live-poll-bar{padding:12px!important}
}
/* V44.5 — 5 MINUTE LIVE POLL TIMER */
.poll-head-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.poll-head-top>span{margin:0!important}
#pollCountdown{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
min-width:46px!important;padding:4px 7px!important;border:1px solid rgba(151,111,236,.22)!important;
border-radius:6px!important;background:rgba(7,10,17,.7)!important;color:#cdbcf0!important;
font-size:8px!important;font-weight:950!important;letter-spacing:.7px!important;font-variant-numeric:tabular-nums!important
}
#pollCountdown.ending{color:#ef9ca6!important;border-color:rgba(224,87,103,.28)!important}
/* V44.8 — POLL DOM PERSISTENCE
Poll is a stable sibling of the frequently-rendered messages container. */
#livePollBar{
flex:0 0 auto!important;
position:relative!important;
z-index:4!important;
}
/* V45 — MOD STATUS, XP SETTINGS, MILESTONES */
.admin-main-actions{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.mod-banned{color:#ef7e8d!important;font-size:6px!important}.mod-muted{color:#e9b96e!important;font-size:6px!important}
.v45-settings-card{width:min(650px,94vw)!important;padding:24px!important}.v45-help{margin:-5px 0 14px;color:#768196;font-size:8px}
.xp-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.xp-settings-grid label{display:flex;flex-direction:column;gap:5px;color:#9ca7b8;font-size:7px;font-weight:900}.xp-settings-grid input{box-sizing:border-box;width:100%;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#080d16;color:#fff;font-size:10px}
.v45-save{width:100%;margin-top:12px;padding:11px;border:1px solid rgba(145,102,240,.2);border-radius:8px;background:rgba(120,76,215,.1);color:#c4b1ed;font-size:8px;font-weight:950;cursor:pointer}#xpSettingsStatus{display:block;min-height:15px;margin-top:8px;color:#8793a7;font-size:7px}
.chat-message.system,.message.system{border:1px solid rgba(145,102,240,.14)!important;border-radius:8px!important;background:rgba(109,72,183,.06)!important;text-align:center!important;font-weight:900!important}
@media(max-width:850px){.admin-main-actions{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:560px){.xp-settings-grid{grid-template-columns:1fr}}
/* V45.1 — GUEST NAME FIELD */
.guest-name-field{width:100%}
.guest-name-field>input{box-sizing:border-box;width:100%}
.guest-name-field[hidden],.guest-name-field.is-authenticated{display:none!important}
/* V45.2 — AZURACAST RECENTLY PLAYED */
.az-recent-card{margin:10px 0 12px;padding:12px 13px;border:1px solid rgba(145,102,235,.13);border-radius:11px;background:rgba(9,13,22,.72)}
.az-recent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.az-recent-head .eyebrow{display:block;font-size:5px;letter-spacing:1.2px;color:#8f77c9;font-weight:950}.az-recent-head h3{margin:3px 0 0;font-size:10px;color:#edf0f5}.az-recent-head>span{font-size:5px;font-weight:950;letter-spacing:.8px;color:#8068b7}
.az-recent-list{display:grid;grid-template-columns:1fr 1fr;gap:5px}.az-track{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:6px;border:1px solid rgba(255,255,255,.04);border-radius:7px;background:rgba(4,8,14,.46)}.az-track-art{width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:5px;background:#101522;color:#8d72c7}.az-track-art img{width:100%;height:100%;object-fit:cover}.az-track-info{min-width:0}.az-track-info b,.az-track-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.az-track-info b{font-size:7px;color:#dfe3ea}.az-track-info span{margin-top:2px;font-size:6px;color:#6e798c}.az-track time{font-size:5px;color:#596577}.az-recent-loading{grid-column:1/-1;padding:10px 3px;font-size:6px;color:#667286}
@media(max-width:650px){.az-recent-list{grid-template-columns:1fr}}
/* V45.3 — AzuraCast Now Playing */
.az-now-playing{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center;margin:10px 0 9px;padding:10px;border:1px solid rgba(145,102,235,.11);border-radius:9px;background:rgba(6,10,17,.58)}
.az-now-art{width:62px;height:62px;display:grid;place-items:center;border-radius:8px;overflow:hidden;background:linear-gradient(145deg,#171126,#0b101b);color:#987bdb;font-size:17px}.az-now-art img{width:100%;height:100%;object-fit:cover}
.az-now-copy{min-width:0}.az-now-copy>span{display:block;margin-bottom:4px;font-size:5px;font-weight:950;letter-spacing:1.2px;color:#8f73cf}.az-now-copy b,.az-now-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.az-now-copy b{font-size:10px;color:#edf0f5}.az-now-copy small{margin-top:3px;font-size:7px;color:#778397}
.az-now-badge{display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid rgba(151,112,228,.15);border-radius:99px;color:#a68cde;font-size:5px;font-weight:950}.az-now-badge i{width:5px;height:5px;border-radius:50%;background:#9a74e3;box-shadow:0 0 8px rgba(154,116,227,.6)}
.az-history-label{margin:8px 0 2px;font-size:5px;font-weight:950;letter-spacing:1px;color:#596578}
@media(max-width:520px){.az-now-playing{grid-template-columns:50px minmax(0,1fr)}.az-now-art{width:50px;height:50px}.az-now-badge{display:none}}
/* V45.4 — AzuraCast Recently Played in footer area */
.azura-recent-footer{width:100%;margin-top:28px;border-top:1px solid rgba(139,101,232,.16);background:linear-gradient(180deg,rgba(8,11,18,.72),rgba(5,8,14,.96))}
.az-footer-inner{box-sizing:border-box;width:min(1180px,calc(100% - 32px));margin:0 auto;padding:20px 0 22px}.az-footer-heading{margin-bottom:12px}.az-footer-heading .eyebrow{display:block;font-size:5px;font-weight:950;letter-spacing:1.4px;color:#826bd4}.az-footer-heading h2{margin:4px 0 0;font-size:17px;color:#eef0f5}
.az-footer-tracks{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px 18px!important}
.az-footer-tracks>div:not(.azura-recent-empty){min-width:0!important;margin:0!important;padding:7px 0!important;border:0!important;background:transparent!important}
.az-footer-tracks img{width:42px!important;height:42px!important;object-fit:cover!important;border-radius:6px!important}.az-footer-tracks b{font-size:7px!important;color:#e0e4eb!important}.az-footer-tracks span,.az-footer-tracks time{font-size:6px!important;color:#707c8f!important}.az-footer-tracks .azura-recent-empty{grid-column:1/-1;padding:13px;border:1px solid rgba(255,255,255,.045);border-radius:8px;text-align:center;font-size:7px;color:#697588}
@media(max-width:1000px){.az-footer-tracks{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media(max-width:650px){.az-footer-tracks{grid-template-columns:1fr!important}.az-footer-inner{width:calc(100% - 20px)}}
.az-existing-recent{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 16px;width:100%}.az-existing-recent img{width:42px!important;height:42px!important;object-fit:cover;border-radius:6px}.az-existing-recent b{font-size:7px!important;color:#e0e4eb!important}.az-existing-recent span,.az-existing-recent time{font-size:6px!important;color:#707c8f!important}.az-existing-recent .azura-recent-empty{grid-column:1/-1;padding:10px 0;color:#697588;font-size:7px}@media(max-width:950px){.az-existing-recent{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.az-existing-recent{grid-template-columns:1fr}}
/* V45.6 — larger readable ORIGINAL Recently Played */
#recent{margin-top:28px!important;padding-top:22px!important}
#recentList{width:100%!important}
#recent #azRecentList,.az-existing-recent{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:12px!important;
width:100%!important;
}
#recent #azRecentList>div,.az-existing-recent>div{
box-sizing:border-box!important;
min-width:0!important;
min-height:92px!important;
padding:12px!important;
border:1px solid rgba(255,255,255,.065)!important;
border-radius:10px!important;
background:rgba(12,16,27,.72)!important;
}
#recent #azRecentList img,.az-existing-recent img{
width:64px!important;height:64px!important;
object-fit:cover!important;border-radius:8px!important;
}
#recent #azRecentList b,.az-existing-recent b{
font-size:11px!important;line-height:1.3!important;
color:#eef1f6!important;font-weight:850!important;
}
#recent #azRecentList span,.az-existing-recent span{
margin-top:4px!important;font-size:9px!important;
line-height:1.3!important;color:#9aa7ba!important;
}
#recent #azRecentList time,.az-existing-recent time{
font-size:8px!important;color:#78859a!important;font-weight:800!important;
}
#recent .azura-recent-empty{grid-column:1/-1!important;min-height:auto!important;font-size:9px!important;color:#7d899c!important}
@media(max-width:1050px){#recent #azRecentList,.az-existing-recent{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:650px){#recent #azRecentList,.az-existing-recent{grid-template-columns:1fr!important}}
/* V45.7 — 3 wider Recently Played cards */
#recent #azRecentList,.az-existing-recent{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:16px!important;
}
#recent #azRecentList>div,.az-existing-recent>div{
min-height:112px!important;
padding:14px 16px!important;
}
#recent #azRecentList img,.az-existing-recent img{
width:76px!important;height:76px!important;
}
#recent #azRecentList b,.az-existing-recent b{
font-size:12px!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
#recent #azRecentList span,.az-existing-recent span{
font-size:10px!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
#recent #azRecentList time,.az-existing-recent time{font-size:9px!important}
@media(max-width:850px){#recent #azRecentList,.az-existing-recent{grid-template-columns:1fr!important}}
/* V45.9 — expanded visualizer selector */
.visual-picker{align-content:start!important;gap:8px!important}
.visual-picker .visual{min-width:58px}
html[data-visual-fx="pulse"] canvas{filter:saturate(1.15) brightness(1.08);animation:fxPulse 1.25s ease-in-out infinite}
html[data-visual-fx="neon"] canvas{filter:saturate(1.55) brightness(1.16) contrast(1.08);text-shadow:0 0 8px currentColor}
html[data-visual-fx="strobe"] canvas{animation:fxStrobe .42s steps(2,end) infinite}
html[data-visual-fx="tunnel"] canvas{filter:contrast(1.18) saturate(1.25);animation:fxTunnel 2.4s ease-in-out infinite}
html[data-visual-fx="particles"] canvas{filter:saturate(1.35) brightness(1.12);animation:fxParticles 1.8s ease-in-out infinite}
@keyframes fxPulse{50%{filter:saturate(1.35) brightness(1.3)}}
@keyframes fxStrobe{50%{filter:brightness(1.45) contrast(1.18)}}
@keyframes fxTunnel{50%{transform:scale(.985);filter:contrast(1.28) saturate(1.45)}}
@keyframes fxParticles{50%{filter:saturate(1.6) brightness(1.25)}}