*{box-sizing:border-box}html,body{margin:0;padding:0}body{
font-family:Arial,Helvetica,sans-serif;color:#fff;min-height:100vh;overflow-x:hidden;
background:
radial-gradient(circle at 20% 0%, rgba(255,16,24,.24), transparent 28%),
radial-gradient(circle at 80% 20%, rgba(255,16,24,.12), transparent 24%),
linear-gradient(180deg,#020304,#07080d 35%,#05060a)}
.grid-bg{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);background-size:44px 44px}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:radial-gradient(rgba(255,255,255,.85) .7px, transparent .8px);background-size:24px 24px}
.mini-layout{width:min(700px,calc(100% - 24px));margin:28px auto}
.player-panel.only{padding:0;background:none;border:none;box-shadow:none}
.player-shell{padding:18px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 50px rgba(0,0,0,.35),0 0 38px rgba(255,16,24,.08)}
.status-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.live-chip,.queue-type{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff1b23;box-shadow:0 0 14px rgba(255,0,0,.85);margin-right:8px}
.cover-card{position:relative;padding:18px;border-radius:24px;background:
radial-gradient(circle at center, rgba(255,40,48,.16), transparent 42%),
linear-gradient(135deg, rgba(255,16,24,.18), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);display:flex;justify-content:center;align-items:center;min-height:320px;overflow:hidden}
.cover-logo{position:relative;z-index:2;max-width:62%;filter:drop-shadow(0 0 28px rgba(255,0,0,.28))}
.glow-ring{position:absolute;width:340px;height:340px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 50px rgba(255,0,0,.18), inset 0 0 50px rgba(255,0,0,.1);animation:spin 12s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.visualizer{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;height:70px;align-items:end;margin:18px 0}
.visualizer span{display:block;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#ff565d,#880008);height:18px;animation:bars 1.25s ease-in-out infinite}
.visualizer span:nth-child(2){animation-delay:.1s}.visualizer span:nth-child(3){animation-delay:.2s}.visualizer span:nth-child(4){animation-delay:.3s}.visualizer span:nth-child(5){animation-delay:.4s}.visualizer span:nth-child(6){animation-delay:.5s}.visualizer span:nth-child(7){animation-delay:.6s}.visualizer span:nth-child(8){animation-delay:.7s}.visualizer span:nth-child(9){animation-delay:.8s}.visualizer span:nth-child(10){animation-delay:.9s}.visualizer span:nth-child(11){animation-delay:1s}.visualizer span:nth-child(12){animation-delay:1.1s}
@keyframes bars{0%,100%{height:18px}50%{height:64px}}
.meta-card,.controls-card,.queue-preview{margin-top:16px;padding:18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.meta-label{text-transform:uppercase;letter-spacing:.12em;color:#ff8186;font-size:.74rem;margin-bottom:8px}
.track-title{font-size:1.45rem;font-weight:800;margin-bottom:8px}.track-sub{color:#cfd2d9}
.controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.control{border:0;border-radius:16px;padding:14px 18px;font-size:1.15rem;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease}
.control:hover{transform:translateY(-1px)}.control.primary{background:linear-gradient(180deg,#ff3037,#cf000a);color:#fff;min-width:96px;box-shadow:0 0 24px rgba(255,0,0,.25)}
.control.ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.09)}
.control.small{font-size:.92rem;padding:12px 14px}.control.active{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 20px rgba(255,0,0,.18)}
.progress-wrap,.volume-wrap{display:grid;grid-template-columns:58px 1fr 58px;align-items:center;gap:10px;color:#d0d3da}
.volume-wrap{grid-template-columns:60px 1fr;margin-top:12px}
input[type=range]{width:100%;accent-color:#ff2630}
@media (max-width:760px){.mini-layout{width:min(100%,calc(100% - 16px))}.cover-card{min-height:240px}}

.stats-box{margin-top:16px}
.stat-line{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.stat-line:first-of-type{border-top:0;padding-top:0}
.stat-line strong{font-size:1.1rem}

.public-comments{width:min(700px,calc(100% - 24px));margin:0 auto 28px}
.comments-shell{padding:18px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 50px rgba(0,0,0,.35),0 0 38px rgba(255,16,24,.08)}
.comments-title{margin:0 0 14px;font-size:1.4rem;text-transform:uppercase}
.comment-public-grid{display:grid;grid-template-columns:1fr;gap:14px}
.comment-public-item{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.comment-public-item p{margin:10px 0 0;line-height:1.6;color:#d0d3da}

.public-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;background:linear-gradient(180deg,#ff3037,#cf000a);color:#fff;text-decoration:none;border:0;font-weight:700;cursor:pointer}
.public-form{display:grid;gap:12px}
.public-form label{display:block;color:#d0d3da}
.public-form input,.public-form select,.public-form textarea{width:100%;margin-top:6px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff}
.public-form textarea{min-height:130px;resize:vertical}
.public-flash{padding:14px 16px;border-radius:14px;background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.28);margin-bottom:14px}

.stats-box.compact{padding:14px 18px}
.compact-audience{display:flex;gap:10px;flex-wrap:wrap}
.audience-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.92rem;color:#d0d3da}
.review-modal{position:fixed;inset:0;display:none;z-index:50}
.review-modal.is-open{display:block}
.review-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(4px)}
.review-modal-dialog{position:relative;width:min(620px,calc(100% - 24px));max-height:calc(100vh - 40px);overflow:auto;margin:20px auto;padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(22,23,34,.98),rgba(14,15,24,.98));border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 30px rgba(255,16,24,.12)}
.review-modal-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:1.4rem;cursor:pointer}
.public-comments{margin-top:22px}

.playlist-count-card{margin-bottom:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#d0d3da;text-align:center}
.playlist-count-card strong{font-size:1.45rem;color:#fff}
.maxx-reply{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.24);color:#dcefe2;line-height:1.55}
.like-comment-btn{margin-top:12px;display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-weight:700}
.like-comment-btn:hover{transform:translateY(-1px)}
.like-comment-btn.already-liked{opacity:.75}
.like-comment-btn:disabled{cursor:wait;opacity:.7}