:root{--bg:#0b0d10;--panel:#13171c;--panel2:#191e25;--text:#f4f7fb;--muted:#9099a6;--line:#262d36;--accent:#7c5cff;--accent2:#9d87ff;--danger:#ff5d73;--green:#43d17a;--shadow:0 18px 60px rgba(0,0,0,.32)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 10% 0%,#1c2030 0,transparent 26%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{margin:0 0 6px;color:#8c96a4;font-size:11px;letter-spacing:.16em;font-weight:800}.error{min-height:20px;color:#ff8192;font-size:13px;margin:8px 0 0}.error.compact{margin:3px 0 0}.brand-mark{width:125px;border-radius:18px;background:linear-gradient(145deg,var(--accent),#4c8dff);display:grid;place-items:center;font-size:28px;box-shadow:0 14px 40px rgba(124,92,255,.25)}.brand-mark.small{width:125px;border-radius:14px;font-size:24px}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(430px,100%);background:rgba(19,23,28,.9);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.login-card h1{font-size:34px;margin:16px 0 6px}.stack{display:grid;gap:15px;margin-top:26px}label{display:grid;gap:7px;color:#c8ced7;font-size:13px;font-weight:650}input{width:100%;background:#0f1216;border:1px solid #2b323c;color:var(--text);border-radius:12px;padding:13px 14px;outline:none;transition:.18s}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.14)}.btn{border:0;border-radius:11px;padding:11px 15px;color:var(--text);background:#242a33;font-weight:750;transition:.15s}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn.primary{background:linear-gradient(135deg,var(--accent),#5d7dff)}.btn.ghost{background:#171b21;border:1px solid var(--line)}.btn.skip{background:#252a31;border:1px solid #323943}.btn.skip.active{border-color:var(--danger);color:#ff9dab;background:rgba(255,93,115,.08)}.app-shell{max-width:1500px;margin:auto;padding:0 24px 32px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between}.brand-row{display:flex;align-items:center;gap:12px}.brand-row strong{display:block;font-size:18px}.brand-row span{display:block;font-size:12px;color:var(--muted);margin-top:2px}.top-actions{display:flex;gap:8px}.layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(350px,.8fr);gap:18px;align-items:start}.panel{background:rgba(19,23,28,.92);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.now-card{padding:18px}.artwork-wrap,.player-wrap{position:relative;aspect-ratio:16/9;background:#0a0c0f;border-radius:14px;overflow:hidden}.artwork-wrap img{width:100%;height:100%;object-fit:cover;display:block}.player-wrap iframe{width:100%;height:100%;border:0}.empty-overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:rgba(8,10,13,.52);backdrop-filter:blur(3px);color:#c6cdd7}.empty-overlay span{font-size:40px}.empty-overlay p{margin:8px 0 0}.now-meta{witdth:50%;display:flex;justify-content:space-between;gap:18px;align-items:end;padding:18px 4px 8px}.now-copy h1{font-size:clamp(24px,3vw,38px);line-height:1.08;margin:0 0 7px}.now-copy p:last-child{margin:0}.badge{white-space:nowrap;border:1px solid rgba(67,209,122,.35);background:rgba(67,209,122,.09);color:#74e79e;border-radius:99px;padding:7px 10px;font-size:10px;font-weight:900;letter-spacing:.09em}.progress{height:4px;background:#272d34;border-radius:8px;overflow:hidden;margin:14px 4px 18px}.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#72a3ff);transition:width .4s linear}.controls-row{display:flex;justify-content:flex-end;padding:0 4px 2px}.queue-panel{padding:18px;min-height:680px}.queue-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.queue-head h2{margin:0;font-size:25px}.count-pill{min-width:28px;height:28px;padding:0 8px;display:grid;place-items:center;border:1px solid var(--line);border-radius:99px;color:#b5bdc8;font-size:12px}.add-row{display:grid;grid-template-columns:1fr auto;gap:8px}.queue-list{display:grid;gap:8px;margin-top:14px}.queue-item{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid transparent;border-radius:12px;padding:8px;transition:.15s}.queue-item:hover{background:#171c22;border-color:#242b34}.queue-thumb{width:54px;height:40px;object-fit:cover;border-radius:7px;background:#222}.queue-info{min-width:0}.queue-title{font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.queue-actions{display:flex;gap:6px}.icon-btn{min-width:38px;height:36px;border:1px solid #2b323b;background:#1d2229;color:#ccd3dc;border-radius:9px;font-weight:800}.icon-btn.voted{border-color:var(--accent);color:#b8aaff;background:rgba(124,92,255,.1)}.icon-btn.remove{color:#9fa7b2}.queue-empty{text-align:center;color:#78828f;padding:80px 20px}.queue-empty p{color:#adb5c0;font-weight:750;margin:0 0 5px}.queue-empty span{font-size:12px}dialog{border:0;padding:0;background:transparent;color:var(--text)}dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}.dialog-card{position:relative;width:min(430px,calc(100vw - 28px));background:#15191f;border:1px solid #2c333c;border-radius:20px;padding:26px;box-shadow:var(--shadow)}.dialog-card h2{margin:0 0 8px}.dialog-card label{margin-top:20px}.dialog-x{position:absolute;right:14px;top:12px;border:0;background:none;color:#9ba4af;font-size:26px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:900px){.app-shell{padding:0 12px 18px}.layout{grid-template-columns:1fr}.queue-panel{min-height:360px}.topbar{height:66px}.top-actions .btn{padding:9px 10px;font-size:12px}.brand-row strong{font-size:16px}.now-card{padding:10px}.now-meta{padding:14px 4px 6px}.queue-panel{padding:14px}.queue-empty{padding:44px 20px}}
@media(max-width:520px){.brand-row span{display:none}.brand-mark.small{width:41px;height:41px;font-size:22px}.top-actions{gap:5px}.now-copy h1{font-size:22px}.now-meta{align-items:start}.badge{font-size:8px}.add-row{grid-template-columns:1fr}.add-row .btn{width:100%}.queue-item{grid-template-columns:48px minmax(0,1fr) auto}.queue-thumb{width:48px;height:36px}}
.controls-row{gap:8px}.player-wrap{width:200px;height:200px;aspect-ratio:1;margin:0 auto}.player-wrap iframe{min-width:200px;min-height:200px}
.player-controls{display:flex;justify-content:center;gap:10px;margin:0 0 8px}.transport-btn{position:relative;width:54px;height:48px;border:1px solid #323a45;border-radius:12px;background:#1b2027;color:#f4f7fb;font-size:19px;font-weight:900;cursor:pointer}.transport-btn:hover{border-color:#6f61ce;background:#242a34}.transport-btn:disabled{opacity:.42;cursor:not-allowed}.transport-btn.liked{color:#ff7188;border-color:#ff5d73;background:rgba(255,93,115,.12)}.transport-btn.locked{color:#9da6b2}.transport-btn span{position:absolute;right:3px;bottom:2px;font-size:7px;line-height:1;letter-spacing:.02em}.player-status{min-height:18px;margin:0 0 10px;text-align:center;color:var(--muted);font-size:12px}.player-wrap{width:min(480px,100%);height:auto;aspect-ratio:16/9;margin:0 auto 8px}.player-wrap iframe{width:100%;height:100%;min-width:200px;min-height:200px}.current-item{background:rgba(124,92,255,.09);border-color:rgba(124,92,255,.4)}.row-play{color:#a99cff}
.topbar{justify-content:flex-start;gap:26px}.identity-line{display:flex;align-items:center;gap:4px;min-height:22px}.nickname-display{border:0;background:transparent;color:#b9afff;padding:2px 4px;border-radius:5px;font-size:12px;font-weight:750}.nickname-display:hover{background:rgba(124,92,255,.14)}.nickname-input{width:150px;padding:4px 7px;border-radius:6px;font-size:12px}.online-block{display:flex;align-items:center;gap:9px;min-width:0}.online-label{color:#737e8c;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.online-users{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;padding:3px 0}.user-chip{white-space:nowrap;border:1px solid #2d3540;border-radius:99px;padding:5px 9px;color:#b4bdc8;background:#151a20;font-size:11px}.user-chip.me{border-color:rgba(124,92,255,.55);color:#c3baff}.transport-btn.mine{box-shadow:0 0 0 2px rgba(255,93,115,.18)}
.header-search{position:relative;width:min(480px,38vw);margin-left:auto;flex:0 1 480px;z-index:40}.header-search .error{position:absolute;top:100%;left:4px;right:4px;margin-top:3px;pointer-events:none}.header-search .youtube-search-results{z-index:60}
@media(max-width:900px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;gap:7px 18px;padding:10px 0}.header-search{order:3;width:100%;max-width:none;flex-basis:100%;margin-left:0}.online-block{flex:1}}
@media(max-width:700px){.online-block{width:100%;flex-basis:100%;padding-left:46px}.online-users{max-width:calc(100vw - 105px)}}
.lock-notice{text-align:center;margin:0 0 9px;color:#ff5d9e;font-size:20px;line-height:1.2;font-weight:950;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 12px rgba(255,79,216,.72)}.user-chip{border-color:var(--user-color);color:var(--user-color);box-shadow:0 0 9px color-mix(in srgb,var(--user-color) 38%,transparent)}
.pause-notice{text-align:center;margin:0 0 7px;color:var(--pause-color,#00f5ff);font-size:20px;line-height:1.2;font-weight:950;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 12px color-mix(in srgb,var(--pause-color,#00f5ff) 70%,transparent)}
.colored-name{color:var(--user-color,#7df9ff);text-shadow:0 0 11px color-mix(in srgb,var(--user-color,#7df9ff) 72%,transparent);font-weight:950}
.event-notice{ text-align:center;margin:0 0 7px;color:var(--event-color,#7df9ff);font-size:20px;line-height:1.2;font-weight:950;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 12px color-mix(in srgb,var(--event-color,#7df9ff) 72%,transparent)}
@keyframes event-notice-fade{0%,20%{opacity:1}100%{opacity:0}}
.notification-area{height:144px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:visible;margin-bottom:30px;position:relative;z-index:9999;isolation:isolate}
.kayiyorum{width:50%;}
.notification-area>.event-notice,.notification-area>.pause-notice,.notification-area>.lock-notice,.notification-area>.repeat-notice,.notification-area>.shuffle-notice{margin:0;}
.repeat-notice{overflow:visible;text-align:center;color:var(--repeat-color,#00f5ff);font-size:20px;line-height:1.2;font-weight:950;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 12px color-mix(in srgb,var(--repeat-color,#00f5ff) 70%,transparent)}
.shuffle-notice{overflow:visible;text-align:center;color:var(--shuffle-color,#ffe600);font-size:20px;line-height:1.2;font-weight:950;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 12px color-mix(in srgb,var(--shuffle-color,#ffe600) 70%,transparent)}
.activity-console{margin:0 0 18px;padding:12px 13px;border:1px solid #29313b;border-radius:12px;background:#0d1116;box-shadow:inset 0 0 18px rgba(0,0,0,.3)}
.activity-console.playlist-activity{margin:14px 0 0}
.activity-title{display:flex;justify-content:space-between;gap:10px;margin:0 0 8px;color:#717d8b;font:850 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em}
.event-list{display:grid;align-content:start;gap:6px;height:64px;overflow-y:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:#3a4552 #0d1116;font:500 11px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.event-row{display:grid;grid-template-columns:64px minmax(0,1fr) 18px;gap:8px;align-items:start;min-width:0;overflow:hidden}
.event-time{color:#697582;white-space:nowrap}.event-copy{display:block;min-width:0;max-width:100%;overflow:hidden;color:#aab3bf;white-space:nowrap;text-overflow:ellipsis}.event-copy .colored-name{font-weight:850}.event-empty{display:grid;place-items:center;color:#59636f;min-height:61px}
.event-delete{width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:#59636f;font:800 14px/18px sans-serif;cursor:pointer}.event-delete:hover{background:rgba(255,93,115,.12);color:#ff7188}
.vote-score{min-width:24px;align-self:center;text-align:center;color:#9099a6;font-size:11px;font-weight:850}.icon-btn.vote{min-width:34px}.icon-btn.vote.down.voted{border-color:#ff5d73;color:#ff8192;background:rgba(255,93,115,.1)}
.player-wrap{width:100%;max-width:none}
.queue-list{max-height:1522px;overflow-y:auto;align-content:start;padding-right:4px;scrollbar-width:thin;scrollbar-color:#3a4552 transparent}
.queue-item{grid-template-columns:54px minmax(0,1fr);row-gap:6px;padding:6px;cursor:grab;user-select:none}.queue-item:active{cursor:grabbing}.queue-actions{grid-column:1/3;justify-content:center;align-items:center;flex-wrap:wrap}.queue-item.dragging{opacity:.42;border-color:#7c5cff}.current-item{background:rgba(124,92,255,.15);border-color:#8f7cff;box-shadow:inset 3px 0 0 #9d87ff}.queue-next.queued{border-color:#00f5ff;color:#00f5ff;background:rgba(0,245,255,.09);box-shadow:0 0 8px rgba(0,245,255,.2)}.queue-next:disabled{opacity:.75;cursor:not-allowed}
.play-next-panel{margin:0 0 18px;padding:11px 13px;border:1px solid #29313b;border-radius:12px;background:#10151b;box-shadow:inset 0 0 18px rgba(0,0,0,.25)}.play-next-title{display:flex;justify-content:space-between;margin-bottom:7px;color:#84909e;font:850 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em}.play-next-list{display:grid;gap:5px;max-height:150px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#3a4552 transparent}.play-next-row{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(0,92px) 20px;gap:7px;align-items:center;min-width:0;padding:2px 0;border-radius:5px;cursor:grab;font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.play-next-row:active{cursor:grabbing}.play-next-row.dragging{opacity:.42;background:rgba(0,245,255,.08)}.play-next-number{display:grid;place-items:center;width:18px;height:18px;border:1px solid #00f5ff;border-radius:5px;color:#00f5ff}.play-next-song,.play-next-owner{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-next-song{color:#c7cfd9}.play-next-owner{color:#697582;font-size:9px}.play-next-owner .colored-name{font-size:9px}.play-next-remove{width:19px;height:19px;padding:0;border:0;border-radius:4px;background:transparent;color:#788391;font:800 14px/19px sans-serif}.play-next-remove:hover:not(:disabled){background:rgba(255,93,115,.12);color:#ff7188}.play-next-remove:disabled{opacity:.28;cursor:not-allowed}
@media(max-width:520px){.queue-item{grid-template-columns:48px minmax(0,1fr)}.queue-actions{grid-column:1/3}.icon-btn{min-width:34px}.play-next-row{grid-template-columns:20px minmax(0,1fr) 20px}.play-next-owner{grid-column:2}.play-next-remove{grid-column:3;grid-row:1/3}}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}.queue-next:disabled{opacity:.75}
.user-chip.me{color:var(--user-color);border-color:var(--user-color)}


/* Compact unified playlist rows */
.queue-list{max-height:872px}
.queue-item{grid-template-columns:26px 88px minmax(0,1fr);gap:9px;min-height:80px;padding:7px;align-items:center}
.queue-item.newly-added{border-color:rgba(0,245,255,.72);background:linear-gradient(105deg,rgba(0,245,255,.05),rgba(124,92,255,.12),rgba(0,245,255,.05));box-shadow:0 0 8px rgba(0,245,255,.38),inset 0 0 14px rgba(124,92,255,.16);animation:new-song-shine 1.9s ease-in-out infinite alternate}
@keyframes new-song-shine{to{border-color:rgba(157,135,255,.88);box-shadow:0 0 14px rgba(124,92,255,.52),inset 0 0 20px rgba(0,245,255,.16)}}
.playlist-position{grid-column:1;grid-row:1;justify-self:center;color:#707b88;font:850 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.queue-thumb{grid-column:2;grid-row:1;width:88px;height:66px;border-radius:8px}
.queue-info{grid-column:3;grid-row:1;display:grid;grid-template-rows:auto auto;gap:5px;min-width:0;align-content:center}
.queue-title{font-size:13px;line-height:1.25}
.queue-meta-row{display:flex;align-items:center;gap:9px;min-width:0}
.queue-sub{flex:1;min-width:0;margin:0;font-size:13px;font-weight:400;line-height:29px;white-space:nowrap;text-overflow:ellipsis}
.queue-actions{grid-column:auto;justify-content:center;gap:5px;flex-wrap:nowrap;margin:0}
.icon-btn{min-width:31px;width:31px;height:29px;border-radius:7px;font-size:12px;padding:0}
.icon-btn.vote{min-width:31px}
.vote-score{min-width:22px;font-size:10px;cursor:help}
.now-copy h1{font-size:clamp(20px,2.4vw,31px)}
.transport-btn.repeat.active{color:#00f5ff;border-color:#00f5ff;background:rgba(0,245,255,.1);box-shadow:0 0 12px rgba(0,245,255,.2)}
.transport-btn.shuffle.active{color:#ffe600;border-color:#ffe600;background:rgba(255,230,0,.1);box-shadow:0 0 12px rgba(255,230,0,.2)}
.transport-btn.join-required{color:#ff4fd8;border-color:#ff4fd8;background:rgba(255,79,216,.14);box-shadow:0 0 9px rgba(255,79,216,.85),0 0 24px rgba(255,79,216,.45);animation:join-pulse 1.4s ease-in-out infinite}
.transport-btn.join-required:hover{color:#fff;border-color:#ff7ee4;background:rgba(255,79,216,.25)}
.media-panel{border:1px solid #2b333e;border-radius:15px;background:#101419}
.transport-panel{padding:0px 14px 10px;overflow:visible;border:1px solid #2b333e;border-radius:15px;background:#101419 }
.now-card.panel{overflow:visible}
.media-panel{margin-top:14px;padding:12px}
.transport-panel .now-meta{justify-content:center;align-items:center;padding:6px 4px 4px;text-align:center}
.transport-panel .now-copy{width:100%}
.transport-panel .now-copy h1{margin-bottom:5px}
.transport-panel .player-status{margin:2px 0 0}
.media-panel .progress{margin:0 0 12px}
.media-panel .player-wrap{margin-bottom:0}
.player-stage{display:grid;width:100%}
.player-stage>.player-wrap,.player-stage>.artwork-wrap{grid-area:1/1}
.player-wrap.join-locked iframe{pointer-events:none}
@keyframes join-pulse{50%{box-shadow:0 0 14px rgba(255,79,216,1),0 0 34px rgba(255,79,216,.62)}}
.reset-row{display:flex;justify-content:center;align-items:center;gap:8px;padding:15px 0 2px}.reset-locks-btn{border:1px solid rgba(255,93,115,.35);border-radius:8px;background:rgba(255,93,115,.06);color:#a78088;padding:7px 11px;font-size:10px;font-weight:750;letter-spacing:.04em}.reset-locks-btn:hover{border-color:#ff7188;color:#ff91a1;background:rgba(255,93,115,.12)}.help-btn{display:inline-flex;align-items:center;text-decoration:none;border-color:rgba(0,245,255,.3);background:rgba(0,245,255,.05);color:#75aeb4}.help-btn:hover{border-color:#00f5ff;color:#b9fbff;background:rgba(0,245,255,.1)}

/* User manual */
.help-shell{width:min(980px,calc(100% - 32px));margin:0 auto;padding:28px 0 60px}.help-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.help-brand{display:flex;align-items:center;gap:14px}.help-brand .brand-logo{width:105px;height:auto}.help-brand h1{margin:0;font-size:clamp(22px,4vw,34px)}.help-brand p{margin:5px 0 0;color:var(--muted);font-size:12px}.help-back{white-space:nowrap;text-decoration:none}.help-card{padding:24px;margin-bottom:16px}.help-card h2{margin:0 0 14px;color:#ecf5ff;font-size:20px}.help-card h3{margin:22px 0 8px;color:#b9fbff;font-size:14px}.help-card p,.help-card li{color:#b8c1cc;font-size:14px;line-height:1.65}.help-card p{margin:8px 0}.help-card ul,.help-card ol{margin:8px 0;padding-left:22px}.help-card li+li{margin-top:8px}.help-note{border-left:3px solid #ff4fd8;padding:10px 13px;margin:14px 0;background:rgba(255,79,216,.06);color:#d5c4d2;border-radius:0 8px 8px 0}.help-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.help-control{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid #29313b;border-radius:12px;background:#0d1116}.help-symbol{display:grid;place-items:center;width:42px;height:38px;border:1px solid #384250;border-radius:9px;color:#fff;font-size:18px;font-weight:900;background:#1b2027}.help-control strong{display:block;margin-bottom:3px;color:#eef5fb;font-size:13px}.help-control span:last-child{display:block;color:#9da8b5;font-size:12px;line-height:1.5}.help-table{width:100%;border-collapse:collapse}.help-table th,.help-table td{padding:10px;border-bottom:1px solid #29313b;text-align:left;vertical-align:top;font-size:13px;line-height:1.5}.help-table th{width:110px;color:#b9fbff}.help-table td{color:#aeb8c4}.help-kicker{color:#ff70dc;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.help-footer{text-align:center;color:#65717f;font-size:11px;margin-top:24px}@media(max-width:650px){.help-top{align-items:flex-start;flex-direction:column}.help-controls{grid-template-columns:1fr}.help-card{padding:18px}.help-table th{width:82px}.help-brand .brand-logo{width:82px}}

.name-dialog::backdrop{background:rgba(3,5,8,.86);backdrop-filter:blur(8px)}
.name-card{width:min(410px,calc(100vw - 28px));display:grid;justify-items:center;gap:12px;padding:30px;background:#14191f;border:1px solid #313945;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.65);text-align:center}
.name-card h2{margin:2px 0 0;font-size:25px}.name-card p{margin:0;color:var(--muted);font-size:13px}.name-card input{width:100%;margin-top:5px;text-align:center}.name-card .btn{width:100%}.name-card .error{min-height:17px;color:#ff768b}
.brand-logo{display:block;object-fit:contain;background:transparent;border-radius:0;box-shadow:none}

/* Charge-sweep neon treatment adapted from the supplied HIGH VOLTAGE example. */
.lock-notice,.event-notice,.pause-notice,.repeat-notice,.shuffle-notice{
  --charge-color:#ff3fa4;
  --charge-dim:color-mix(in srgb,var(--charge-color) 55%,#ffffff);
  font-family:"Bungee",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-weight:400;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  background:linear-gradient(100deg,var(--charge-dim) 0 22%,#fff 30%,var(--charge-dim) 28% 80%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--charge-color) 63%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--charge-color) 19%,#5b0b49)) brightness(.94);
  animation:lock-charge 3.4s linear infinite;
  position:relative;
  z-index:2;
  overflow:visible;
}
.lock-notice{--charge-color:#ff3fa4}
.event-notice{--charge-color:var(--event-color,#7df9ff)}
.pause-notice{--charge-color:var(--pause-color,#00f5ff)}
.repeat-notice{--charge-color:var(--repeat-color,#00f5ff)}
.shuffle-notice{--charge-color:var(--shuffle-color,#ffe600)}
.notification-area .colored-name{
  --charge-color:var(--user-color,#7df9ff);
  --charge-dim:color-mix(in srgb,var(--user-color,#7df9ff) 25%,#b0adb5);
  display:inline-block;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  background:linear-gradient(100deg,var(--charge-dim) 0 42%,#fff 50%,var(--charge-dim) 58% 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 2.5px color-mix(in srgb,var(--charge-color) 82%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--charge-color) 72%,transparent)) brightness(1.2);
  animation:lock-charge 3.4s linear infinite;
}
@keyframes lock-charge{from{background-position:150% 0}to{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){
  .lock-notice,.event-notice,.pause-notice,.repeat-notice,.shuffle-notice,.notification-area .colored-name{animation:none!important;background-position:50% 0}
}

/* Live sixteen-segment display, matched to the supplied LED reference. */
.segment-display{width:100%;min-width:0;overflow:hidden;white-space:nowrap;background:transparent;border-radius:4px}
.segment-display .segment-track{display:flex;width:max-content;align-items:center;will-change:transform}
.segment-display .segment-copy{display:flex;align-items:center;gap:clamp(3px,.45vw,7px);flex:none;padding-right:42px}
.segment-display:not(.is-scrolling) .segment-copy[aria-hidden="true"]{display:none}
.segment-display svg{display:block;flex:none;width:auto;height:100%}
.segment-display line{stroke:#0d2233;stroke-width:3.4;stroke-linecap:round}
.segment-display line.on{stroke:#39c8ff;filter:brightness(1.5) drop-shadow(0 0 4.5px #39c8ff) drop-shadow(0 0 15px rgba(57,200,255,.6))}
.segment-display.is-scrolling .segment-track{animation:segment-crawl var(--crawl-time,32s) linear infinite}
.segment-title{height:49px;margin:0 0 7px;padding:5px 8px}
.segment-title .segment-track{margin-inline:auto}
.segment-title.is-scrolling .segment-track{margin-inline:0}
.segment-title .segment-copy{height:39px}
.segment-title svg{width:22px}
.segment-uploader{height:28px;margin:0;padding:4px 8px;opacity:.62}
.segment-uploader .segment-track{margin-inline:auto}
.segment-uploader.is-scrolling .segment-track{margin-inline:0}
.segment-uploader .segment-copy{height:20px;gap:3px;padding-right:30px}
.segment-uploader svg{width:11px}
.segment-uploader line.on{filter:brightness(1.5) drop-shadow(0 0 3px #39c8ff) drop-shadow(0 0 9px rgba(57,200,255,.45))}
@keyframes segment-crawl{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.segment-display.is-scrolling .segment-track{animation:none!important}}
.player-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;background:#05070a}
.player-stage::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 20px 6px rgba(3,5,8,.88),inset 0 0 48px 18px rgba(3,5,8,.72),inset 0 0 84px 28px rgba(0,0,0,.38)}
.player-stage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.99;mix-blend-mode:screen;filter:blur(.65px);border-radius:14px;background-image:repeating-radial-gradient(circle at 17% 23%,rgba(255,255,255,.9) 0 .45px,transparent .65px 3px);background-size:5px 5px;animation:video-grain .32s steps(2,end) infinite}
@keyframes video-grain{0%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.player-stage::after{animation:none}}
.search-shell{position:relative;z-index:8}
.youtube-search-results{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;display:grid;gap:2px;max-height:390px;overflow-y:auto;padding:6px;border:1px solid #323b47;border-radius:12px;background:#0d1218;box-shadow:0 18px 45px rgba(0,0,0,.72);scrollbar-width:thin;scrollbar-color:#3a4552 transparent}
.search-state{padding:18px 12px;text-align:center;color:#8994a2;font-size:12px}
.brand-home{display:flex;align-items:center;text-decoration:none}.header-search .add-row{grid-template-columns:minmax(0,1fr) auto auto}.play-once-main{min-width:46px;padding:11px 15px;border:1px solid rgba(255,79,216,.55);background:rgba(255,79,216,.1);color:#ff9bea;white-space:nowrap}.play-once-main:hover{border-color:#ff4fd8;background:rgba(255,79,216,.2);box-shadow:0 0 10px rgba(255,79,216,.25)}
.youtube-result{display:grid;grid-template-columns:72px minmax(0,1fr) 34px 34px;gap:7px;align-items:center;min-height:58px;padding:6px;border-radius:8px}
.youtube-result:hover{background:#171e27}
.youtube-result img{width:72px;height:42px;object-fit:cover;border-radius:6px;background:#202731}
.youtube-result-copy{min-width:0}
.youtube-result-title,.youtube-result-channel{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.youtube-result-title{color:#e7ebf1;font-size:12px;font-weight:750}
.youtube-result-channel{margin-top:4px;color:#7f8b99;font-size:10px}
.youtube-result-add{width:31px;height:31px;padding:0;border:1px solid #00f5ff;border-radius:7px;background:rgba(0,245,255,.08);color:#00f5ff;font-size:18px;font-weight:800}
.youtube-result-add:hover{background:rgba(0,245,255,.18);box-shadow:0 0 9px rgba(0,245,255,.24)}
.youtube-result-play{width:31px;height:31px;padding:0;border:1px solid #ff4fd8;border-radius:7px;background:rgba(255,79,216,.08);color:#ff8ae6;font-size:13px;font-weight:900}.youtube-result-play:hover{background:rgba(255,79,216,.18);box-shadow:0 0 9px rgba(255,79,216,.25)}
@media(min-width:901px){
  .layout{grid-template-columns:minmax(0,2fr) minmax(320px,1fr)}
}

@media(max-width:520px){
  .queue-list{max-height:772px}
  .queue-item{grid-template-columns:22px 72px minmax(0,1fr);gap:7px;min-height:70px;padding:6px}
  .queue-thumb{width:72px;height:54px}
  .queue-actions{grid-column:auto;gap:3px}
  .queue-meta-row{gap:5px}.queue-sub{font-size:12px}
  .icon-btn,.icon-btn.vote{min-width:28px;width:28px;height:27px}
  .vote-score{min-width:18px}
}

/* Activity text is intentionally untruncated. */
.event-row{overflow:visible}
.event-copy{overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
.play-next-song,.play-next-owner{overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}

/* The song-count pill expands into playlist search. */
.count-pill{border:1px solid var(--line);background:transparent;cursor:text}
.count-pill:hover{border-color:#536071;color:#e2e8ef}
.playlist-search-control{display:flex;justify-content:flex-end;align-items:center}
.playlist-search-input{width:170px;height:28px;padding:4px 10px;border-radius:99px;font-size:11px}
.playlist-no-results{grid-column:1/-1;padding:30px 10px;text-align:center;color:#77828f;font-size:12px}