@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --bg:#0b0b10; --panel:#15151c; --ink:#f5f3ef; --muted:#92919c; --lime:#d9ff43; --pink:#ff4e88; --line:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
button,input { font:inherit; }
button { color:inherit; }
.tv-background { display:none; position:fixed; inset:-12vmax; z-index:0; overflow:hidden; background:#070711; pointer-events:none; }
.tv-background[data-type="disco"] { background:radial-gradient(circle at 18% 22%,rgba(255,78,136,.48),transparent 26%),radial-gradient(circle at 80% 28%,rgba(109,91,245,.5),transparent 27%),radial-gradient(circle at 48% 82%,rgba(217,255,67,.3),transparent 30%),linear-gradient(135deg,#070711,#130c22 48%,#07151a); animation:discoDrift 12s ease-in-out infinite alternate; }
.tv-background[data-type="disco"]:before { content:""; position:absolute; width:110vmax; height:110vmax; left:50%; top:50%; transform:translate(-50%,-50%); background:conic-gradient(from 0deg,transparent 0 9%,rgba(255,78,136,.2) 10% 13%,transparent 14% 28%,rgba(93,169,255,.22) 29% 32%,transparent 33% 49%,rgba(217,255,67,.18) 50% 53%,transparent 54% 100%); filter:blur(12px); animation:discoSpin 24s linear infinite; }
.tv-background[data-type="disco"]:after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to bottom,transparent,black 28%,black 72%,transparent); transform:perspective(500px) rotateX(62deg) scale(1.5) translateY(22%); }
.tv-background>i { position:absolute; width:18vmax; height:18vmax; border-radius:50%; filter:blur(45px); opacity:.55; animation:discoPulse 7s ease-in-out infinite alternate; }
.tv-background>i:nth-child(1){left:8%;top:18%;background:#ff4e88}.tv-background>i:nth-child(2){right:6%;top:9%;background:#6d5bf5;animation-delay:-2s}.tv-background>i:nth-child(3){left:38%;bottom:4%;background:#d9ff43;animation-delay:-4s}.tv-background>i:nth-child(4){right:24%;bottom:20%;background:#2dd4bf;animation-delay:-5s}
.tv-background[data-type="photo"] { inset:0; background-image:linear-gradient(rgba(5,5,10,.3),rgba(5,5,10,.62)),var(--tv-photo); background-position:center; background-size:cover; }
@keyframes discoDrift { to { filter:hue-rotate(28deg) saturate(1.18); transform:scale(1.04); } }
@keyframes discoSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes discoPulse { to { transform:translate(8vw,5vh) scale(1.35); opacity:.8; } }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.topbar { height:86px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 clamp(24px,5vw,76px); position:relative; z-index:10; }
.brand { border:0; background:none; display:flex; gap:11px; align-items:center; font:800 clamp(15px,2vw,24px) 'Manrope'; cursor:pointer; padding:0; white-space:nowrap; }
.brand-mark { width:29px; height:29px; display:flex; align-items:flex-end; justify-content:center; gap:3px; transform:rotate(-12deg); }
.brand-mark i { width:5px; border-radius:5px; background:var(--lime); animation:pulse 1.2s infinite alternate; }
.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:25px;animation-delay:.2s}.brand-mark i:nth-child(3){height:18px;animation-delay:.4s}
@keyframes pulse { to { transform:scaleY(.55); } }
.live-pill { min-width:max-content; border:1px solid rgba(99,230,146,.22); background:rgba(99,230,146,.07); border-radius:99px; padding:7px 12px 7px 9px; display:flex; gap:8px; align-items:center; box-shadow:inset 0 1px rgba(255,255,255,.04); }
.live-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#63e692; box-shadow:0 0 10px rgba(99,230,146,.8); }
.live-text { display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.live-text b { color:white; font:800 13px 'Manrope'; }
.live-text small { color:#a9b4ad; font-size:10px; letter-spacing:.02em; }
.hidden { display:none!important; }
main { min-height:calc(100vh - 86px); }
.screen { display:none; min-height:calc(100vh - 86px); padding:clamp(35px,6vw,85px) clamp(24px,8vw,120px); position:relative; }
.screen.active { display:block; animation:appear .45s ease; }
@keyframes appear { from { opacity:0; transform:translateY(8px) } }
.landing { overflow:hidden; }
.hero-copy { max-width:750px; position:relative; z-index:2; }
.eyebrow,.section-label { color:var(--lime); font:700 11px 'Manrope'; letter-spacing:.17em; text-transform:uppercase; margin:0 0 18px; }
h1,h2,h3,p { margin-top:0; }
h1 { font:800 clamp(58px,8.2vw,128px)/.85 'Manrope'; letter-spacing:-.075em; margin:0; }
h1 em { font-style:normal; color:var(--lime); }
.lede { color:#b9b7c0; font-size:clamp(16px,1.5vw,21px); max-width:490px; margin:33px 0; line-height:1.55; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { border:1px solid var(--line); background:transparent; min-height:52px; padding:0 23px; border-radius:6px; font-weight:700; cursor:pointer; transition:.2s; }
.btn:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.28); }
.btn.primary { background:var(--lime); color:#10110c; border-color:var(--lime); display:flex; align-items:center; gap:30px; justify-content:space-between; }
.btn.primary b { font-size:20px; }
.btn.secondary { color:var(--ink); }
.hero-visual { position:absolute; width:520px; height:520px; right:-70px; top:50%; transform:translateY(-51%); }
.vinyl { position:absolute; inset:25px; border-radius:50%; background:repeating-radial-gradient(circle,#20202a 0 5px,#111118 6px 9px); box-shadow:-30px 40px 100px #000; animation:spin 16s linear infinite; }
.vinyl:after { content:""; position:absolute; inset:34%; border-radius:50%; background:var(--pink); box-shadow:inset 0 0 0 34px #ff7aa4; }
.vinyl div { position:absolute; inset:48%; z-index:2; background:#111; border-radius:50%; }
@keyframes spin { to { transform:rotate(360deg); } }
.float-card { position:absolute; z-index:4; width:155px; height:120px; border-radius:9px; padding:17px; font:700 12px/1.2 'Manrope'; display:flex; justify-content:space-between; box-shadow:0 22px 50px rgba(0,0,0,.38); }
.card-one { background:var(--lime); color:#141510; left:-25px; top:45px; transform:rotate(-7deg); }
.card-one b { font-size:34px; }
.card-one span { align-self:flex-end; }
.card-two { background:#6d5bf5; right:10px; bottom:50px; transform:rotate(8deg); }
.card-two b { font-size:42px; align-self:flex-end; }
.steps { position:absolute; left:clamp(24px,8vw,120px); bottom:28px; color:#686771; font-size:10px; letter-spacing:.12em; display:flex; gap:30px; text-transform:uppercase; }
.join { background:radial-gradient(circle at 75% 40%,rgba(217,255,67,.13),transparent 32%); }
.back { position:absolute; top:20px; left:clamp(24px,5vw,76px); border:0; background:none; color:var(--muted); cursor:pointer; }
.form-wrap { max-width:530px; margin:4vh auto; }
h2 { font:800 clamp(43px,5vw,72px)/.95 'Manrope'; letter-spacing:-.055em; }
form { display:grid; gap:10px; margin-top:40px; }
label { color:var(--muted); font-size:12px; margin-top:10px; }
input { width:100%; background:#14141a; border:1px solid var(--line); border-radius:6px; padding:17px; color:white; outline:none; font-size:18px; }
input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(217,255,67,.08); }
#partyCode { text-transform:uppercase; font:700 30px 'Manrope'; letter-spacing:.22em; }
form .btn { margin-top:14px; width:100%; }
.error { color:#ff7b9f; min-height:20px; font-size:13px; }
.availability { color:var(--lime); font-size:13px; margin-top:18px; min-height:20px; }
.party { padding-top:30px; }
.party-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; }
.party-head h2 { font-size:clamp(35px,4vw,58px); margin:0; }
.share-box { display:flex; align-items:stretch; gap:9px; }
.party-qr { width:94px; height:94px; padding:6px; border-radius:8px; background:white; object-fit:contain; }
.code-box { width:min(330px,100%); min-width:285px; border:1px solid var(--line); border-radius:10px; padding:13px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:11px 12px; background:linear-gradient(145deg,rgba(22,22,29,.94),rgba(12,12,18,.94)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.invite-title { min-width:0; display:grid; gap:2px; align-content:center; }
.invite-title small { font-size:8px; color:var(--muted); letter-spacing:.16em; }
.invite-title strong { overflow:hidden; text-overflow:ellipsis; font:800 20px 'Manrope'; line-height:1.05; letter-spacing:.12em; white-space:nowrap; }
.code-box button { cursor:pointer; font-family:inherit; transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease; }
.copy-link-button { align-self:center; display:flex; align-items:center; gap:7px; min-height:34px; padding:7px 9px 7px 11px; border:1px solid rgba(217,255,67,.28); border-radius:7px; background:rgba(217,255,67,.07); color:var(--lime); font-size:10px; font-weight:800; white-space:nowrap; }
.copy-link-button b { width:20px; height:20px; display:grid; place-items:center; border-radius:5px; background:var(--lime); color:#111; font-size:12px; }
.copy-link-button:hover { border-color:var(--lime); background:rgba(217,255,67,.12); transform:translateY(-1px); }
.invite-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding-top:10px; border-top:1px solid var(--line); }
.invite-actions button { min-width:0; min-height:36px; display:flex; align-items:center; justify-content:flex-start; gap:7px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:#1b1b23; color:#dedde5; text-align:left; font-size:9px; font-weight:700; white-space:nowrap; }
.invite-actions button span { flex:0 0 21px; width:21px; height:21px; display:grid; place-items:center; border-radius:5px; background:#292932; color:var(--lime); font-size:11px; }
.invite-actions button:hover { border-color:rgba(217,255,67,.55); background:#22222b; color:white; transform:translateY(-1px); }
.party-grid { display:grid; grid-template-columns:minmax(290px,.7fr) minmax(420px,1.3fr); gap:18px; }
.player-panel,.queue-panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:25px; }
.now-art { aspect-ratio:1; max-height:300px; margin:auto; border-radius:9px; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(135deg,#2b2638,#17171e); transition:.4s; }
.now-art:before { content:""; width:57%; height:57%; border:1px solid rgba(255,255,255,.2); border-radius:50%; position:absolute; box-shadow:0 0 0 30px rgba(255,255,255,.04),0 0 0 60px rgba(255,255,255,.03); }
.now-art>span { font-size:60px; z-index:1; }
.now-meta { margin-top:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.now-meta h3,.section-top h3 { font:700 22px 'Manrope'; margin-bottom:5px; }
.now-meta p { color:var(--muted); }
.now-favorite { flex:0 0 auto; display:flex; align-items:center; gap:5px; border:1px solid var(--line); background:#1c1c24; color:#d5d4dc; border-radius:99px; padding:7px 10px; cursor:pointer; font:700 9px 'Manrope'; }
.now-favorite span { color:#ff6e9d; font-size:15px; line-height:1; }
.now-favorite:hover,.now-favorite.active { border-color:#ff6e9d; background:rgba(255,78,136,.09); color:white; }
.now-favorite[hidden] { display:none; }
.progress { height:3px; background:#303039; border-radius:3px; overflow:hidden; }
.progress span { display:block; width:0%; height:100%; background:var(--lime); transition:width .4s linear; }
.progress-time { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:6px; font-variant-numeric:tabular-nums; }
.player-controls { display:flex; gap:10px; justify-content:center; margin-top:20px; }
.round { width:47px; height:47px; border-radius:50%; border:0; background:var(--lime); color:#111; cursor:pointer; }
.round.ghost { background:#272730; color:white; }
.host-badge { text-align:center; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-top:12px; }
.close-party { width:100%; margin-top:10px; border:1px solid rgba(255,92,138,.35); background:transparent; color:#ff7b9f; border-radius:8px; padding:10px; cursor:pointer; }
.spotify-connect { width:100%; margin-top:18px; border:1px solid var(--line); background:#202029; border-radius:8px; padding:11px 13px; display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; text-align:left; cursor:pointer; transition:.2s; }
.spotify-connect:hover { border-color:#1ed760; background:#232c27; }
.spotify-connect.connected { border-color:rgba(30,215,96,.45); background:rgba(30,215,96,.08); cursor:default; }
.spotify-icon { width:28px; height:28px; border-radius:50%; background:#1ed760; color:#111; display:grid; place-items:center; font-size:10px; }
.spotify-connect b,.spotify-connect small { display:block; font-style:normal; }
.spotify-connect b { font-size:12px; }
.spotify-connect small { color:var(--muted); margin-top:2px; }
.spotify-connect i { color:#1ed760; font-style:normal; }
.section-top { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line); }
.section-top .section-label { margin-bottom:7px; }
.queue-summary { display:flex; align-items:center; gap:7px; margin-top:7px; color:var(--muted); font-size:10px; }
.queue-summary i { width:3px; height:3px; border-radius:50%; background:#5d5c67; }
.queue-summary strong { color:var(--lime); font:800 10px 'Manrope'; }
.queue-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.favorites-button { display:flex; align-items:center; gap:6px; border:1px solid rgba(255,78,136,.25); background:rgba(255,78,136,.06); color:white; border-radius:7px; padding:7px 9px; cursor:pointer; font:700 10px 'Manrope'; }
.favorites-button:hover { border-color:#ff6e9d; background:rgba(255,78,136,.11); }
.favorites-button>span { color:#ff6e9d; font-size:13px; }
.favorites-button>i { min-width:19px; height:19px; display:grid; place-items:center; border-radius:99px; background:#ff6e9d; color:#111; font:900 9px 'Manrope'; font-style:normal; }
.auto-styles-button { display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:#202029; color:white; border-radius:7px; padding:7px 9px; cursor:pointer; font:700 10px 'Manrope'; }
.auto-styles-button:hover { border-color:var(--lime); background:rgba(217,255,67,.08); }
.auto-styles-button>span { color:var(--lime); font-size:14px; }
.auto-styles-button>i { min-width:19px; height:19px; display:grid; place-items:center; border-radius:99px; background:var(--lime); color:#111; font:900 9px 'Manrope'; font-style:normal; }
.auto-fill-control { display:flex; align-items:center; gap:8px; color:var(--muted); font:700 10px 'Manrope'; white-space:nowrap; cursor:pointer; }
.auto-fill-control input { position:absolute; opacity:0; pointer-events:none; }
.auto-fill-slider { position:relative; width:40px; height:22px; flex:0 0 40px; border-radius:99px; background:#303039; border:1px solid var(--line); transition:.2s; }
.auto-fill-slider:before { content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background:#a5a4ae; transition:.2s; }
.auto-fill-control input:checked+.auto-fill-slider { background:rgba(217,255,67,.2); border-color:var(--lime); }
.auto-fill-control input:checked+.auto-fill-slider:before { transform:translateX(18px); background:var(--lime); }
.auto-fill-control input:focus-visible+.auto-fill-slider { outline:2px solid white; outline-offset:2px; }
.btn.mini { min-height:39px; padding:0 15px; background:var(--lime); color:#111; }
.queue { display:grid; gap:8px; margin-top:15px; }
.queue-empty { min-height:310px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.queue-empty b { display:block; font:600 17px 'Manrope'; color:#ddd; margin-bottom:7px; }
.queue-item { display:grid; grid-template-columns:48px 1fr auto; gap:13px; align-items:center; padding:10px; border-radius:8px; transition:.2s; }
.queue-item:hover { background:rgba(255,255,255,.035); }
.queue-item.priority { background:rgba(217,255,67,.07); box-shadow:inset 3px 0 0 var(--lime); }
.cover { width:48px; height:48px; border-radius:5px; display:grid; place-items:center; font-size:18px; color:#17171d; }
.track-meta b { display:block; font:600 14px 'Manrope'; }
.track-meta span { color:var(--muted); font-size:12px; }
.added-by { display:flex; align-items:center; gap:5px; margin-top:5px; color:var(--muted); font-size:10px; }
.added-by i { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:#30303a; color:var(--lime); font:800 9px 'Manrope'; font-style:normal; }
.added-by strong { color:#d9d8df; font-weight:600; }
.priority-badge { display:inline-block; margin-left:9px; padding:3px 6px; border-radius:4px; background:var(--lime); color:#111; font:800 8px 'Manrope'; letter-spacing:.1em; vertical-align:2px; }
.auto-badge { display:inline-block; margin-left:9px; padding:3px 6px; border-radius:4px; background:#6d5bf5; color:white; font:800 8px 'Manrope'; letter-spacing:.08em; vertical-align:2px; }
.queue-actions { display:flex; align-items:center; gap:7px; }
.favorite-toggle { width:32px; height:32px; flex:0 0 32px; border:1px solid rgba(255,78,136,.22); background:#1c1c24; color:#a9a7b1; border-radius:50%; cursor:pointer; font-size:17px; line-height:1; }
.favorite-toggle:hover,.favorite-toggle.active { border-color:#ff6e9d; background:rgba(255,78,136,.1); color:#ff6e9d; }
.priority-toggle { width:32px; height:32px; border:1px solid var(--line); background:#1c1c24; color:var(--muted); border-radius:50%; cursor:pointer; font-size:17px; }
.priority-toggle:hover,.priority-toggle.active { border-color:var(--lime); color:var(--lime); }
.remove-track { width:32px; height:32px; border:1px solid rgba(255,78,136,.25); background:#1c1c24; color:#ff7b9f; border-radius:50%; cursor:pointer; font-size:20px; line-height:1; }
.remove-track:hover { border-color:#ff4e88; background:rgba(255,78,136,.1); }
.vote { border:1px solid var(--line); background:#1c1c24; border-radius:99px; padding:6px 10px; cursor:pointer; font-size:12px; min-width:52px; }
.vote:hover { border-color:var(--lime); color:var(--lime); }
.vote.voted { background:var(--lime); border-color:var(--lime); color:#111; }
.tv-votes { display:none; min-width:62px; padding:8px 12px; border-radius:99px; background:var(--lime); color:#111; text-align:center; font:800 16px 'Manrope'; }
dialog { width:min(690px,calc(100% - 28px)); max-height:82vh; color:white; background:#121218; border:1px solid var(--line); border-radius:12px; padding:28px; box-shadow:0 30px 100px #000; }
dialog::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(5px); }
.dialog-head { display:flex; justify-content:space-between; }
.dialog-head h2 { font-size:33px; }
.dialog-head>button { border:0; background:#25252e; border-radius:50%; width:38px; height:38px; font-size:23px; cursor:pointer; }
.search-box { display:flex; gap:10px; align-items:center; background:#1b1b23; padding-left:16px; border-radius:7px; margin:10px 0 18px; }
.search-box input { border:0; background:none; }
.search-hint { color:var(--muted); font-size:12px; margin:0 0 10px; min-height:18px; }
.track-library { overflow:auto; max-height:380px; display:grid; gap:5px; }
.library-item { width:100%; border:0; background:transparent; color:white; display:grid; grid-template-columns:46px 1fr auto; align-items:center; text-align:left; gap:12px; padding:9px; border-radius:7px; }
.library-item:hover { background:#1d1d25; }
.library-actions { display:flex; align-items:center; gap:7px; }
.library-add { min-width:42px; height:32px; border:0; border-radius:7px; background:rgba(217,255,67,.09); color:var(--lime); cursor:pointer; font-size:18px; }
.library-add:hover { background:var(--lime); color:#111; }
.library-add:disabled { min-width:62px; color:var(--muted); background:rgba(217,255,67,.04); cursor:default; font-size:9px; }
.favorites-dialog { width:min(720px,calc(100% - 28px)); }
.favorites-intro { margin:8px 0 17px; color:var(--muted); font-size:12px; }
.favorite-profile-card { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; margin-bottom:10px; padding:11px; border:1px solid rgba(255,78,136,.24); border-radius:8px; background:rgba(255,78,136,.06); }
.favorite-profile-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#ff4e88; color:white; font-size:18px; }
.favorite-profile-details b,.favorite-profile-details small { display:block; }
.favorite-profile-details b { font:800 11px 'Manrope'; }
.favorite-profile-details small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }
.favorite-profile-card>button { border:1px solid rgba(255,78,136,.35); border-radius:7px; background:#24242d; color:#ff8eae; padding:8px 10px; cursor:pointer; font:800 9px 'Manrope'; }
.favorite-profile-card>button:hover { border-color:#ff4e88; background:#ff4e88; color:white; }
.favorite-profile-card.connected { border-color:rgba(217,255,67,.25); background:rgba(217,255,67,.055); }
.favorite-profile-card.connected .favorite-profile-avatar { background:var(--lime); color:#111; }
.favorite-profile-card.connected>button { border-color:rgba(217,255,67,.3); color:var(--lime); }
.favorite-profile-card.connected>button:hover { background:var(--lime); color:#111; }
.favorites-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:#191920; }
.favorites-toolbar>span { color:var(--muted); font-size:10px; }
.favorites-toolbar button { min-height:36px; display:flex; align-items:center; gap:7px; border:1px solid rgba(217,255,67,.3); border-radius:7px; background:rgba(217,255,67,.08); color:var(--lime); padding:7px 11px; cursor:pointer; font:800 10px 'Manrope'; }
.favorites-toolbar button>span { font-size:16px; line-height:1; }
.favorites-toolbar button:hover { border-color:var(--lime); background:var(--lime); color:#111; }
.favorites-toolbar button:disabled { border-color:var(--line); background:#22222a; color:var(--muted); cursor:default; }
.favorites-bulk-status { margin:0 0 10px; padding:8px 10px; border-radius:7px; background:rgba(217,255,67,.07); color:#ddec9e; font-size:10px; }
.favorites-bulk-status[hidden] { display:none; }
.favorites-list { display:grid; gap:7px; max-height:58vh; overflow:auto; }
.favorite-row { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#191920; }
.favorite-actions { display:flex; align-items:center; gap:7px; }
.favorite-add { min-width:72px; height:32px; border:1px solid rgba(217,255,67,.25); border-radius:7px; background:rgba(217,255,67,.07); color:var(--lime); cursor:pointer; font:800 9px 'Manrope'; }
.favorite-add:hover { border-color:var(--lime); background:var(--lime); color:#111; }
.favorite-add:disabled { border-color:var(--line); background:#202028; color:var(--muted); cursor:default; }
.favorites-empty { min-height:240px; display:grid; place-items:center; align-content:center; gap:7px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:9px; }
.favorites-empty>span { color:#ff6e9d; font-size:42px; }
.favorites-empty>b { color:white; font:700 17px 'Manrope'; }
.favorites-empty>p { font-size:11px; }
.compact-dialog { width:min(520px,calc(100% - 28px)); }
.compact-dialog form { margin-top:10px; }
.favorite-profile-dialog { width:min(560px,calc(100% - 28px)); }
.favorite-profile-intro { margin:10px 0 18px; color:var(--muted); font-size:12px; line-height:1.55; }
.favorite-profile-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border-radius:8px; background:#1b1b23; }
.favorite-profile-tabs button { min-height:39px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font:800 10px 'Manrope'; }
.favorite-profile-tabs button.active { border-color:rgba(217,255,67,.25); background:#292932; color:var(--lime); }
.favorite-profile-dialog form { margin-top:13px; }
.favorite-profile-dialog input { padding:13px; font-size:16px; }
.favorite-profile-note { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.favorite-profile-connected { padding:28px 0 3px; text-align:center; }
.favorite-profile-connected-icon { width:64px; height:64px; margin:0 auto 15px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:#111; font-size:28px; }
.favorite-profile-connected h3 { margin:0 0 8px; font:800 24px 'Manrope'; }
.favorite-profile-connected p { max-width:400px; margin:0 auto 22px; color:var(--muted); font-size:12px; line-height:1.55; }
.favorite-profile-connected .btn { width:100%; color:white; }
.members-dialog { width:min(680px,calc(100% - 28px)); }
.members-intro { color:var(--muted); margin:7px 0 18px; }
.members-list { display:grid; gap:8px; max-height:55vh; overflow:auto; }
.member-row { display:grid; grid-template-columns:40px 1fr auto; gap:11px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:9px; background:#1a1a22; }
.member-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#30303a; color:var(--lime); font:900 14px 'Manrope'; }
.member-details b,.member-details small { display:block; }
.member-details small { color:var(--muted); margin-top:3px; font-size:10px; }
.member-details small.blocked { color:#ff8da0; }
.member-online { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#5a5965; }
.member-online.active { background:#52dc91; box-shadow:0 0 8px rgba(82,220,145,.55); }
.member-manage { border:1px solid var(--line); background:#262630; color:white; border-radius:7px; padding:8px 11px; cursor:pointer; font:800 10px 'Manrope'; }
.member-manage:hover { border-color:var(--lime); }
.members-empty { padding:25px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:9px; }
.member-permission-dialog form { display:grid; gap:9px; margin-top:16px; }
.permission-choice { position:relative; display:grid; grid-template-columns:35px 1fr; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:8px; background:#1a1a22; cursor:pointer; }
.permission-choice input { position:absolute; opacity:0; pointer-events:none; }
.permission-choice:has(input:checked) { border-color:var(--lime); background:rgba(217,255,67,.08); }
.permission-choice>span { width:35px; height:35px; display:grid; place-items:center; border-radius:8px; background:#2a2a34; color:var(--muted); font-size:17px; }
.permission-choice:has(input:checked)>span { background:var(--lime); color:#111; }
.permission-choice b,.permission-choice small { display:block; }
.permission-choice b { font:800 11px 'Manrope'; }
.permission-choice small { color:var(--muted); margin-top:3px; font-size:10px; }
.permission-duration { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 11px 5px 56px; }
.permission-duration[hidden] { display:none; }
.permission-duration input,.permission-duration select { width:100%; border:1px solid var(--line); background:#202029; color:white; border-radius:7px; padding:10px; }
.member-permission-dialog .btn { width:100%; margin-top:5px; }
.add-permission-notice { margin:12px 0 2px; padding:10px 12px; border:1px solid rgba(255,78,136,.32); border-radius:8px; background:rgba(255,78,136,.08); color:#ff9ab5; font-size:11px; }
.add-permission-notice[hidden] { display:none; }
#openSearchButton:disabled { opacity:.45; cursor:not-allowed; filter:saturate(.5); }
.auto-styles-dialog { width:min(850px,calc(100% - 28px)); }
.auto-styles-intro { color:var(--muted); margin:8px 0 20px; max-width:650px; }
.auto-source-tabs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.auto-source-tabs label { position:relative; display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; column-gap:11px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:9px; background:#1a1a22; cursor:pointer; }
.auto-source-tabs input { position:absolute; opacity:0; pointer-events:none; }
.auto-source-tabs label:has(input:checked) { border-color:var(--lime); background:rgba(217,255,67,.09); }
.auto-source-tabs label>span { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:#2a2a34; color:var(--lime); font-size:18px; }
.auto-source-tabs label>b { font:800 12px 'Manrope'; }
.auto-source-tabs label>small { color:var(--muted); font-size:10px; margin-top:2px; }
.auto-styles-dialog fieldset { border:0; padding:0; margin:0 0 22px; }
.auto-styles-dialog legend { width:100%; padding:0 0 9px; border-bottom:1px solid var(--line); color:var(--muted); font:800 10px 'Manrope'; letter-spacing:.1em; text-transform:uppercase; }
.auto-styles-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:11px; }
.auto-styles-grid label { position:relative; min-height:56px; display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#1a1a22; cursor:pointer; transition:.2s; }
.auto-styles-grid label:hover { border-color:#5b5a68; transform:translateY(-1px); }
.auto-styles-grid label:has(input:checked) { border-color:var(--lime); background:rgba(217,255,67,.09); box-shadow:inset 0 0 0 1px rgba(217,255,67,.12); }
.auto-styles-grid input { position:absolute; opacity:0; pointer-events:none; }
.auto-styles-grid label>span { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:7px; background:#292933; color:#c8c7d2; font:900 10px 'Manrope'; }
.auto-styles-grid label:has(input:checked)>span { background:var(--lime); color:#111; }
.auto-styles-grid label>b { font:800 11px 'Manrope'; }
.auto-styles-selection { margin:0 0 12px; color:var(--lime); font:700 11px 'Manrope'; }
.auto-styles-selection.invalid { color:#ff758b; }
.auto-styles-dialog .btn { width:100%; }
.auto-playlist-panel[hidden],#autoStylesFields[hidden] { display:none; }
.auto-playlist-panel { display:grid; gap:9px; margin-bottom:15px; padding:16px; border:1px solid var(--line); border-radius:10px; background:#17171f; }
.auto-playlist-panel>label { color:#d7d6df; font:700 11px 'Manrope'; }
.spotify-permission { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:7px; padding:12px; border:1px solid rgba(30,215,96,.32); border-radius:8px; background:rgba(30,215,96,.07); }
.spotify-permission.authorized { border-color:var(--line); background:#1c1c24; }
.spotify-permission b,.spotify-permission small { display:block; }
.spotify-permission small { color:var(--muted); margin-top:3px; font-size:10px; }
.spotify-permission button,.playlist-select-row button { flex:0 0 auto; border:1px solid #1ed760; background:#173921; color:#aaffc3; border-radius:7px; padding:8px 11px; cursor:pointer; font-weight:800; }
.playlist-select-row { display:grid; grid-template-columns:1fr auto; gap:7px; }
.playlist-select-row select,.auto-playlist-panel>input { width:100%; border:1px solid var(--line); background:#202029; color:white; border-radius:7px; padding:11px; }
.playlist-select-row button { width:42px; padding:0; font-size:18px; }
.playlist-or { display:flex; align-items:center; gap:10px; margin:2px 0; color:var(--muted); font-size:9px; text-transform:uppercase; }
.playlist-or:before,.playlist-or:after { content:""; height:1px; flex:1; background:var(--line); }
.selected-playlist { display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:center; margin-top:5px; padding:9px; border:1px solid rgba(217,255,67,.28); border-radius:8px; background:rgba(217,255,67,.06); }
.selected-playlist[hidden] { display:none; }
.selected-playlist img { width:52px; height:52px; object-fit:cover; border-radius:6px; background:#2c2c35; }
.selected-playlist b,.selected-playlist small { display:block; }
.selected-playlist small { color:var(--muted); margin-top:4px; font-size:10px; }
.tv-background-dialog { width:min(620px,calc(100% - 28px)); }
.tv-background-setting { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:18px 0; padding:14px 16px; background:#1a1a22; border:1px solid var(--line); border-radius:9px; }
.tv-background-setting b,.tv-background-setting small { display:block; }
.tv-background-setting small { color:var(--muted); margin-top:3px; font-size:11px; }
.background-switch { position:relative; flex:0 0 48px; height:26px; cursor:pointer; }
.background-switch input { position:absolute; opacity:0; pointer-events:none; }
.background-switch span { display:block; width:48px; height:26px; border-radius:99px; background:#303039; border:1px solid var(--line); transition:.2s; }
.background-switch span:before { content:""; position:absolute; width:18px; height:18px; left:4px; top:4px; border-radius:50%; background:#a5a4ae; transition:.2s; }
.background-switch input:checked+span { background:rgba(217,255,67,.2); border-color:var(--lime); }
.background-switch input:checked+span:before { transform:translateX(22px); background:var(--lime); }
.background-switch input:focus-visible+span { outline:2px solid white; outline-offset:2px; }
.tv-background-types { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tv-background-types button { display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 14px; border-radius:9px; border:1px solid var(--line); background:#191920; text-align:left; cursor:pointer; }
.tv-background-types button>i { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:#292933; color:var(--lime); font-style:normal; font-size:19px; }
.tv-background-types b,.tv-background-types small { display:block; }
.tv-background-types small { color:var(--muted); font-size:10px; margin-top:3px; }
.tv-background-types button.active { border-color:var(--lime); background:rgba(217,255,67,.07); }
.tv-background-types button:disabled { opacity:.42; cursor:not-allowed; }
.tv-background-preview { position:relative; height:190px; margin:14px 0 10px; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:#090910; }
.tv-background-preview[data-type="disco"] { background:radial-gradient(circle at 20% 25%,#ff4e8877,transparent 35%),radial-gradient(circle at 78% 30%,#6d5bf588,transparent 35%),radial-gradient(circle at 50% 90%,#d9ff4355,transparent 40%),#090910; }
.tv-background-preview[data-type="photo"] { background-image:linear-gradient(#05050a33,#05050a88),var(--tv-preview-photo); background-position:center; background-size:cover; }
.tv-background-preview>i { position:absolute; width:110px; height:110px; border-radius:50%; filter:blur(28px); opacity:.65; animation:discoPulse 5s ease-in-out infinite alternate; }
.tv-background-preview>i:nth-child(1){background:#ff4e88;left:4%;top:5%}.tv-background-preview>i:nth-child(2){background:#6d5bf5;right:5%;top:8%;animation-delay:-2s}.tv-background-preview>i:nth-child(3){background:#d9ff43;left:42%;bottom:-45%;animation-delay:-3s}
.tv-background-preview strong { position:absolute; inset:0; display:grid; place-items:center; font:800 13px 'Manrope'; letter-spacing:.18em; text-shadow:0 2px 18px #000; }
.tv-photo-upload { display:flex; min-height:44px; justify-content:center; align-items:center; border:1px dashed rgba(217,255,67,.45); border-radius:8px; color:var(--lime); font-weight:700; cursor:pointer; }
.tv-photo-upload:hover { background:rgba(217,255,67,.06); }
.tv-photo-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.cover { background-size:cover!important; background-position:center!important; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,30px); background:white; color:#111; border-radius:99px; padding:10px 17px; font-size:13px; opacity:0; transition:.3s; z-index:30; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.tv-fullscreen { flex:0 0 auto; border:1px solid var(--line); background:#1c1c24; color:white; border-radius:99px; padding:9px 15px; cursor:pointer; white-space:nowrap; }
.tv-addition { display:none; position:fixed; inset:0; z-index:60; pointer-events:none; align-items:center; justify-content:center; padding:7vw; background:rgba(5,5,9,.72); backdrop-filter:blur(12px); opacity:0; transform:scale(1.03); transition:opacity .35s ease,transform .35s ease; }
.tv-addition-glow { position:absolute; width:55vw; height:55vw; border-radius:50%; background:radial-gradient(circle,rgba(217,255,67,.16),transparent 67%); }
.tv-addition>p { position:absolute; top:12vh; color:var(--lime); font:800 15px 'Manrope'; letter-spacing:.22em; }
.tv-addition-content { width:min(1050px,86vw); position:relative; display:grid; grid-template-columns:minmax(240px,34%) 1fr; gap:clamp(35px,6vw,80px); align-items:center; padding:clamp(28px,4vw,55px); background:linear-gradient(135deg,rgba(28,28,36,.98),rgba(13,13,19,.98)); border:1px solid rgba(217,255,67,.28); border-radius:22px; box-shadow:0 35px 120px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.06); }
.tv-addition-cover { aspect-ratio:1; width:100%; border-radius:14px; display:grid; place-items:center; background:linear-gradient(145deg,#2d2938,#181820); color:#111; font-size:70px; box-shadow:0 25px 70px rgba(0,0,0,.45); background-size:cover!important; background-position:center!important; }
.tv-addition h2 { margin:0 0 14px; font-size:clamp(44px,5.5vw,82px); line-height:.95; }
.tv-addition h3 { margin:0 0 28px; color:#c0bec8; font:500 clamp(22px,2.3vw,34px) 'DM Sans'; }
.tv-addition-content span { display:inline-flex; padding:10px 16px; border-radius:99px; background:var(--lime); color:#111; font:800 14px 'Manrope'; }
body.tv-mode .brand,body.tv-mode .btn.mini,body.tv-mode .vote,body.tv-mode .host-only,body.tv-mode .guest-only { display:none!important; }
body.tv-mode main { position:relative; z-index:1; }
body.tv-mode.tv-background-enabled .tv-background { display:block; }
body.tv-mode.tv-background-enabled .player-panel,body.tv-mode.tv-background-enabled .queue-panel,body.tv-mode.tv-background-enabled .tv-share { background:rgba(15,15,24,.84); border-color:rgba(255,255,255,.16); backdrop-filter:blur(16px); box-shadow:0 22px 70px rgba(0,0,0,.3); }
body.tv-mode .topbar { justify-content:flex-end; align-items:center; gap:12px; }
body.tv-mode .tv-fullscreen { display:block!important; }
body.tv-mode .tv-addition { display:flex; }
body.tv-mode .tv-addition.show { opacity:1; transform:scale(1); }
body.tv-mode .party { width:100%; max-width:1800px; margin:0 auto; padding:20px 4vw 5vw; }
body.tv-mode .party-head { width:100%; justify-content:space-between; align-items:flex-start; gap:32px; }
body.tv-mode .party-grid { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
body.tv-mode .player-panel,body.tv-mode .queue-panel { width:100%; height:100%; min-width:0; }
body.tv-mode .tv-share { flex:0 0 auto; align-items:stretch; gap:9px; }
body.tv-mode .tv-share .party-qr { width:112px; height:112px; }
body.tv-mode .tv-share .code-box { min-width:190px; }
body.tv-mode .tv-share .code-box strong { font-size:20px; }
body.tv-mode .tv-share .code-box button { display:none; }
body.tv-mode .now-art { max-height:42vh; }
body.tv-mode .queue-item { padding:14px; }
body.tv-mode .track-meta b { font-size:17px; }
body.tv-mode .track-meta span { font-size:14px; }
body.tv-mode .added-by { font-size:13px; margin-top:8px; }
body.tv-mode .added-by i { width:24px; height:24px; font-size:11px; }
body.tv-mode .tv-votes { display:inline-block; }
@media (max-width:1100px) { body.tv-mode .party-grid{grid-template-columns:1fr} body.tv-mode .party-head{align-items:flex-start} }
@media (max-width:900px) { .hero-visual{opacity:.28;right:-230px}.party-grid{grid-template-columns:1fr}.player-panel{display:grid;grid-template-columns:170px 1fr;gap:0 20px}.player-panel>.section-label{grid-column:1/-1}.now-art{grid-row:2/7}.queue-panel{min-height:400px}.auto-styles-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px) { .topbar{height:68px;padding:0 18px}.live-pill{padding:6px 9px}.screen{min-height:calc(100vh - 68px);padding:38px 18px}.landing{padding-top:11vh}.hero-visual{width:380px;height:380px;right:-260px}.steps{display:none}.hero-actions{display:grid}.party{padding-top:20px}.party-head{align-items:flex-start;gap:15px;flex-wrap:wrap}.party-head h2{font-size:34px}.share-box{width:100%}.party-qr{width:82px;height:82px}.code-box{min-width:0;flex:1}.code-box strong{font-size:17px}.party-grid{display:block}.player-panel{display:grid;grid-template-columns:110px 1fr;padding:16px;margin-bottom:12px}.now-art{grid-row:2/7}.now-meta h3{font-size:17px}.queue-panel{padding:16px}.section-top{gap:10px}.section-top h3{font-size:17px}.queue-tools{gap:6px;flex-wrap:wrap}.auto-fill-control b,.auto-styles-button b{display:none}.player-controls{justify-content:flex-start}.host-badge{display:none}.queue-item{grid-template-columns:43px 1fr auto}.cover{width:43px;height:43px}.auto-source-tabs{grid-template-columns:1fr}.auto-styles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auto-styles-dialog{padding:20px}.auto-styles-grid label{min-height:51px;padding:8px}.spotify-permission{align-items:flex-start;flex-direction:column}.dialog-head h2{font-size:27px} }
@media (max-width:600px) { .favorites-button b{display:none}.now-favorite{padding:7px}.now-favorite:not(.active){font-size:0}.now-favorite span{font-size:15px}.favorite-row{grid-template-columns:43px 1fr}.favorite-actions{grid-column:1/-1;justify-content:flex-end}.library-item{grid-template-columns:43px 1fr}.library-actions{grid-column:1/-1;justify-content:flex-end} }
@media (max-width:520px) { .favorites-toolbar{align-items:stretch;flex-direction:column}.favorites-toolbar button{justify-content:center;width:100%} }
@media (max-width:520px) { .favorite-profile-card{grid-template-columns:38px 1fr}.favorite-profile-card>button{grid-column:1/-1;width:100%}.favorite-profile-dialog{padding:20px}.favorite-profile-dialog .dialog-head h2{font-size:25px} }
@media (max-width:520px) { .invite-actions{grid-template-columns:1fr}.copy-link-button span{display:none}.code-box{padding:11px}.member-row{grid-template-columns:36px 1fr}.member-avatar{width:36px;height:36px}.member-manage{grid-column:1/-1;width:100%}.permission-duration{padding-left:0}.members-dialog{padding:20px} }
@media (prefers-reduced-motion:reduce) { .tv-background,.tv-background:before,.tv-background>i,.tv-background-preview>i { animation:none!important; } }