:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif;color:#eff2f4;background:#0c1015;--muted:#85939b;--green:var(--green);--line:#ffffff0c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% -15%,#20373177,transparent 58%),#0c1015;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:4px}.shell{max-width:1440px;margin:auto;padding:0 52px}header{height:104px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{color:#f1f4f3;display:flex;align-items:center;gap:14px;font-size:21px;letter-spacing:-.6px;font-weight:650;text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgb(var(--accent-rgb) / 0.267);border-radius:14px;color:var(--green);letter-spacing:-3px;padding-right:3px;font-size:26px;background:rgb(var(--accent-rgb) / 0.031)}.brand small{display:block;font-size:8px;letter-spacing:1.65px;color:var(--muted);margin-top:5px;font-weight:400}.profile{display:flex;align-items:center;gap:12px;font-size:13px}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.avatar{background:#2a4239;color:var(--green);width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-weight:600}main{padding:32px 0}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:600;color:#8aa89b;margin:0}.toolbar{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:28px}h1{font-size:30px;letter-spacing:-1px;font-weight:550;margin:10px 0 0}.connection{display:flex;align-items:center;gap:28px}.server-label{color:var(--muted);font-size:10px}select{border:1px solid #ffffff14;background:#171e23;border-radius:9px;color:#d6dfe1;padding:10px 30px 10px 12px;font-size:12px;max-width:220px;display:block;margin-top:6px}.power-group{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--muted)}.power-switch{position:relative;width:76px;height:36px;flex-shrink:0;border:1px solid #ffffff16;background:#20282d;border-radius:22px;transition:background .3s}.power-switch[aria-checked=true]{background:#295642;border-color:#73c69866}.power-o,.power-i{position:absolute;top:9px;font-size:12px;color:#9caaa5}.power-o{right:14px}.power-i{left:14px}.power-thumb{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#acb8ba;box-shadow:0 2px 7px #0005;transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s}.power-switch[aria-checked=true] .power-thumb{transform:translateX(39px);background:var(--green)}.power-switch.pending .power-thumb{animation:breathe 1s infinite}.grid{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:22px}.card{border:1px solid #ffffff0d;border-radius:20px;background:#141b21}.player{padding:25px 34px 18px;background:radial-gradient(ellipse at 50% 25%,#273a3555,transparent 70%),#141b21;min-width:0}.player-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.channel{font-size:10px;color:#8a9c96;background:#ffffff04;border:1px solid #ffffff08;padding:6px 9px;border-radius:20px;max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.art{width:clamp(210px,24vw,325px);aspect-ratio:1;margin:25px auto 24px;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#33574c,#233232 45%,#19242d);box-shadow:0 24px 55px #0004;display:grid;place-items:center;border:1px solid #ffffff10}.art img{width:100%;height:100%;object-fit:cover}.empty-art{font-size:85px;color:#8ab6a099}.track-info{text-align:center;max-width:650px;margin:auto}.track-status{font-size:9px;letter-spacing:2px;color:var(--green);margin:0 0 10px}.track-info h2{font-size:clamp(20px,2.2vw,30px);line-height:1.25;font-weight:600;letter-spacing:-.7px;margin:0;overflow-wrap:anywhere}#subtitle{font-size:12px;color:var(--muted);margin:10px 0 18px}.transport{display:flex;justify-content:center;align-items:center;gap:25px;margin:22px 0 0}.icon-button{display:grid;place-items:center;background:transparent;border:0;color:#a7b6ba;width:34px;height:34px;border-radius:9px;font-size:24px}.icon-button:hover{background:#ffffff08;color:#fff}svg{width:24px;height:24px;fill:currentColor}.play-button{width:64px;height:64px;display:grid;place-items:center;background:var(--green);color:#183327;border:0;border-radius:50%;box-shadow:0 0 28px rgb(var(--accent-rgb) / 0.071);transition:transform .2s}.play-button:hover{transform:scale(1.06)}.play-button svg{width:27px;height:27px}.play-label{text-align:center;color:#91a49b;font-size:10px;margin:10px 0 25px}.timeline{width:100%;margin-top:18px}input[type=range]{padding:0;accent-color:var(--green);width:100%;height:4px;cursor:pointer;display:block}.times{display:flex;justify-content:space-between;color:#8e9aa1;font-size:10px;font-variant-numeric:tabular-nums;margin-top:12px}.player-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.quiet{background:none;border:0;color:#86979f;font-size:11px;padding:8px 0;white-space:nowrap}.quiet:hover{color:var(--green)}.seek-hint{font-size:9px;color:#677982}.volume-wrap{position:relative}.volume-trigger{border:0;background:transparent;color:#b5c2c3;display:flex;align-items:center;gap:8px;font-size:10px;padding:4px}.volume-trigger svg{width:24px;height:24px}.volume-menu{position:absolute;right:0;bottom:38px;width:190px;padding:20px;background:#243037;border:1px solid #ffffff18;border-radius:12px;box-shadow:0 12px 30px #0006;z-index:2}.volume-menu label{font-size:11px;display:block;margin-bottom:18px}.sidebar{display:flex;flex-direction:column;gap:16px;min-width:0}.search-card{padding:22px}.search-card .eyebrow{margin-bottom:15px}input:not([type=range]){background:#0d1419;border:1px solid #ffffff0e;border-radius:9px;color:#edf2f2;padding:13px 12px;width:100%;font-size:12px;min-width:0}input::placeholder{color:#677d87}.search-actions,.playlist-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}.primary{background:var(--green);color:#193528;font-size:12px;font-weight:600;border:0;border-radius:9px;padding:11px 16px;text-decoration:none;display:inline-block}.primary:hover{background:var(--accent-hover)}.library{padding:0 20px 18px;flex:1;min-height:340px}.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line)}.tab{padding:21px 0 16px;background:none;border:0;border-bottom:2px solid transparent;color:#778b93;font-size:12px}.tab.active{color:var(--green);border-bottom-color:var(--green)}#count{font-size:9px;padding:3px 6px;background:rgb(var(--accent-rgb) / 0.063);border-radius:6px;margin-left:4px}.panel-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#82949c;padding-top:12px}.track-list{padding:0;margin:10px 0 0;list-style:none;max-height:395px;overflow:auto;scrollbar-width:thin}.track-list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:13px 0;font-size:12px;line-height:1.45}.number{font-size:10px;color:#687f88;min-width:15px}.track{flex:1;overflow-wrap:anywhere}.track-list .quiet{font-size:20px;padding:5px}.empty{text-align:center;padding:48px 0}.empty>span{font-size:44px;color:#3c535b}.empty h3{font-size:13px;font-weight:500;color:#b1c0c5;margin:15px 0 9px}.empty p,.hint{font-size:11px;color:#718a94;line-height:1.7}.create-playlist{display:flex;gap:8px;margin:20px 0 12px}.create-playlist button{border:1px solid #ffffff12;flex-shrink:0;height:41px}#playlistSelect{width:100%;max-width:100%;margin:0}.private-note{color:#5d7882;font-size:10px;text-align:center;border-top:1px solid var(--line);padding-top:16px}.room-note{font-size:10px;color:#667d88;display:flex;align-items:center;gap:8px;margin:20px 0 0}.live-dot{width:5px;height:5px;border-radius:50%;background:#789b8d}#notice{font-size:12px;color:var(--green);min-height:18px;margin:12px 0 0}#notice.error{color:#ffb4ac}footer{display:flex;justify-content:space-between;font-size:10px;color:#566c77;padding:24px 0;border-top:1px solid var(--line)}#welcome{padding:70px 0 100px}#welcome h1{font-size:clamp(38px,6vw,75px);margin-top:25px;line-height:1.1;letter-spacing:-3px}.intro{max-width:460px;color:#92a5ad;line-height:1.8;margin:24px 0 30px;font-size:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@keyframes breathe{50%{opacity:.5}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:1050px){.shell{padding:0 28px}.grid{grid-template-columns:minmax(0,1fr) 320px}.connection{gap:15px}.power-group>span{display:none}.player{padding:22px}.seek-hint{display:none}}@media(max-width:760px){.shell{padding:0 18px}header{height:83px}.brand small,.profile small{display:none}.toolbar{align-items:stretch;flex-direction:column;gap:18px}.connection{justify-content:space-between}.power-group>span{display:block}.grid{grid-template-columns:1fr}.art{width:240px}.player{padding:22px}.library{min-height:300px}.profile{gap:8px}.brand{font-size:17px;gap:9px}.brand-mark{width:35px;height:35px;font-size:22px}.profile #username{max-width:100px;overflow:hidden;text-overflow:ellipsis;display:block}.track-info h2{font-size:24px}.toolbar h1{font-size:27px}footer{gap:15px}}
.search-results{max-height:470px;overflow:auto;scrollbar-width:thin}.search-result{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:14px 0;border-top:1px solid var(--line)}.search-result img{width:64px;height:48px;object-fit:cover;border-radius:6px}.result-info a{font-size:12px;line-height:1.5;color:#d9e5e6;text-decoration:none;display:block;overflow-wrap:anywhere}.result-info a:hover{color:var(--green)}.result-info p{font-size:10px;color:var(--muted);margin:5px 0 0}.result-actions{grid-column:2;display:flex;justify-content:space-between;align-items:center;gap:10px}.result-play{background:rgb(var(--accent-rgb) / 0.063);color:var(--green);border:1px solid rgb(var(--accent-rgb) / 0.125);border-radius:7px;padding:7px 10px;font-size:11px}.chosen .result-play{border-color:rgb(var(--accent-rgb) / 0.333)}.search-actions .primary{width:100%}
.grid{align-items:start}.player{padding-bottom:12px}.play-button{width:82px;height:82px}.play-button svg{width:34px;height:34px}.transport{margin-top:16px;gap:28px}.play-label{margin:8px 0 16px}.timeline{margin-top:12px}.player-bottom{margin-top:12px;padding-top:8px}.avatar{overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover}.stop-button svg{width:23px;height:23px}
.grid{height:clamp(720px,calc(100vh - 255px),850px);align-items:stretch}.player{height:100%;display:flex;flex-direction:column;min-height:0}.player-top{flex-shrink:0}.art{width:min(100%,clamp(260px,30vw,405px));flex-shrink:1;min-height:150px;margin:28px auto auto}.track-info{margin:28px auto 0;flex-shrink:0}.track-info h2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.transport{flex-shrink:0}.timeline{margin-top:8px;padding-top:12px;flex-shrink:0}.player-bottom{flex-shrink:0}.sidebar{height:100%;min-height:0;overflow:hidden}.search-card{flex:0 0 auto;padding:18px 20px}.search-results{max-height:255px;overflow:auto}.search-results>.hint{margin:4px 0 7px}.search-result{padding:10px 0}.search-fold{display:block;width:100%;text-align:right;padding:8px 0 4px}.library{min-height:0;display:flex;flex-direction:column;overflow:hidden}.tabs{flex-shrink:0}.library [role=tabpanel]{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}.panel-heading,.create-playlist,#playlistSelect,.playlist-actions,.private-note{flex-shrink:0}.track-list{max-height:none;min-height:0;flex:1;overflow:auto}.empty{margin:auto;padding:24px 0}.import-box{margin-top:14px;flex-shrink:0;font-size:11px;color:var(--green);max-height:210px;overflow:auto}.import-box summary{cursor:pointer;padding:8px 0}.import-box form{display:grid;gap:8px;padding:8px 0}.import-box .hint{margin:0}.create-playlist{margin-top:12px}.private-note{margin-bottom:0}.player-bottom{margin-top:14px}@media(max-width:760px){.grid{height:auto}.player{height:740px}.sidebar{height:740px}.art{width:min(100%,320px)}.search-results{max-height:235px}}
.play-button{width:64px;height:64px;border-radius:50%}.play-button svg{width:40px;height:40px}#playIcon{transform:none}.avatar{width:40px;height:40px}
.playlist-track-play{border:0;background:transparent;color:inherit;text-align:left;padding:0;font-size:12px;line-height:1.45;width:100%;cursor:pointer}.playlist-track-play:hover{color:var(--green)}.playlist-track-play:before{content:"▶ ";font-size:9px;color:#718a94}.shuffle-on{color:var(--green)!important}.playlist-actions{gap:8px;flex-wrap:wrap}.playlist-actions .primary{padding:10px 12px}

.shuffle-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.shuffle-button[aria-pressed=true]{background:rgb(var(--accent-rgb) / 0.071);color:var(--green)}

.library input:focus-visible,.library select:focus-visible,.playlist-picker summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.playlist-picker{flex-shrink:0;min-width:0;border:1px solid #ffffff14;border-radius:12px;background:#171e23;overflow:hidden}
.playlist-picker summary{position:relative;list-style:none;padding:13px 36px 13px 13px;font-size:12px;color:#d6dfe1;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:11px}
.playlist-picker summary::-webkit-details-marker{display:none}.playlist-picker summary:after{content:'⌄';position:absolute;right:14px;color:var(--green)}.playlist-picker[open] summary:after{content:'⌃'}.playlist-picker summary[aria-disabled=true]{pointer-events:none;opacity:.5}
.playlist-options{max-height:170px;overflow:auto;padding:5px;border-top:1px solid var(--line);scrollbar-width:thin}
.playlist-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:0;border-radius:8px;background:transparent;color:#d6dfe1;padding:11px 9px;font-size:12px}.playlist-option span{min-width:0;overflow-wrap:anywhere}.playlist-option small{flex-shrink:0;color:var(--muted);font-size:10px}.playlist-option:hover{background:#ffffff08}.playlist-option[aria-pressed=true]{background:rgb(var(--accent-rgb) / 0.071);color:var(--green)}.playlist-option:focus-visible{outline-offset:-2px}

.brand{gap:10px}.brand-mark{padding:0;letter-spacing:normal;border-radius:50%;background:linear-gradient(145deg,rgb(var(--accent-rgb) / 0.082),rgb(var(--accent-rgb) / 0.012));border-color:rgb(var(--accent-rgb) / 0.188)}.brand-mark svg{width:34px;height:34px}.brand>span:last-child{letter-spacing:-.7px}.brand small{letter-spacing:1.2px}#playlistTracks{margin-top:16px}@media(max-width:760px){.brand-mark svg{width:28px;height:28px}}

:root{--theme-hue:155;--accent-rgb:175 242 204;--green:rgb(var(--accent-rgb));--accent-hover:hsl(var(--theme-hue) 80% 88%)}
:root[data-theme=blue]{--theme-hue:210;--accent-rgb:161 208 255}
:root[data-theme=pink]{--theme-hue:330;--accent-rgb:255 174 214}
:root[data-theme=yellow]{--theme-hue:45;--accent-rgb:246 219 143}
:root[data-theme=purple]{--theme-hue:270;--accent-rgb:209 179 255}
body{background:radial-gradient(ellipse at 30% -15%,hsl(var(--theme-hue) 30% 18% / .47),transparent 58%),hsl(var(--theme-hue) 20% 6%)}
.card{background:hsl(var(--theme-hue) 19% 10%)}.player{background:radial-gradient(ellipse at 50% 25%,hsl(var(--theme-hue) 22% 22% / .33),transparent 70%),hsl(var(--theme-hue) 19% 10%)}
.art{background:linear-gradient(145deg,hsl(var(--theme-hue) 26% 27%),hsl(var(--theme-hue) 18% 17%) 45%,hsl(var(--theme-hue) 22% 13%))}.empty-art{color:rgb(var(--accent-rgb) / .55)}
.primary,.play-button{color:hsl(var(--theme-hue) 35% 14%)}.power-switch[aria-checked=true]{background:hsl(var(--theme-hue) 35% 25%);border-color:rgb(var(--accent-rgb) / .4)}.avatar{background:hsl(var(--theme-hue) 24% 22%)}
.eyebrow,.play-label{color:rgb(var(--accent-rgb) / .65)}.live-dot{background:var(--green)}
select,.playlist-picker{background:hsl(var(--theme-hue) 18% 12%)}input:not([type=range]){background:hsl(var(--theme-hue) 22% 7%)}.volume-menu{background:hsl(var(--theme-hue) 20% 18%)}
.header-tools{display:flex;align-items:center;gap:24px}.theme-control{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.theme-control select{margin:0;padding:8px 26px 8px 10px;max-width:145px}
@media(max-width:760px){header{height:auto;min-height:83px;flex-wrap:wrap;gap:16px;padding:18px 0}.header-tools{gap:12px;flex-wrap:wrap}.theme-control>span{display:none}.theme-control select{max-width:125px}}

:root[data-theme=green]{--theme-hue:125;--accent-rgb:112 244 133}
:root[data-theme=red]{--theme-hue:5;--accent-rgb:255 151 141}
:root[data-theme=navy]{--theme-hue:232;--accent-rgb:153 170 255}
:root[data-theme=brown]{--theme-hue:27;--accent-rgb:219 178 139}
:root[data-theme=mono],:root[data-theme=light]{--theme-hue:0;--accent-rgb:228 228 228;--accent-hover:#fff}
:root[data-theme=mono] body{background:#101010}:root[data-theme=mono] .card,:root[data-theme=mono] .player{background:#191919}
:root[data-theme=mono] .art{background:linear-gradient(145deg,#383838,#202020)}
:root[data-theme=mono] select,:root[data-theme=mono] .playlist-picker,:root[data-theme=mono] .volume-menu{background:#242424}
:root[data-theme=mono] input:not([type=range]){background:#121212}
:root[data-theme=mono] .power-switch[aria-checked=true],:root[data-theme=mono] .avatar{background:#444}
:root[data-theme=light]{color-scheme:light;color:#202020;background:#f3f3f3;--muted:#666;--line:#00000012;--accent-rgb:42 42 42;--accent-hover:#444}
:root[data-theme=light] body{background:#f3f3f3}:root[data-theme=light] .card,:root[data-theme=light] .player{background:#fff;border-color:#00000015}
:root[data-theme=light] .art{background:linear-gradient(145deg,#ddd,#eee);box-shadow:0 20px 45px #0001}
:root[data-theme=light] select,:root[data-theme=light] .playlist-picker,:root[data-theme=light] .volume-menu,:root[data-theme=light] input:not([type=range]){background:#f4f4f4;color:#222;border-color:#0002}
:root[data-theme=light] .primary,:root[data-theme=light] .play-button{color:#fff}
:root[data-theme=light] .brand,:root[data-theme=light] .playlist-option,:root[data-theme=light] .result-info a,:root[data-theme=light] .empty h3{color:#222}
:root[data-theme=light] .icon-button,:root[data-theme=light] .quiet,:root[data-theme=light] .volume-trigger,:root[data-theme=light] .tab,:root[data-theme=light] .hint,:root[data-theme=light] .number,:root[data-theme=light] .times,:root[data-theme=light] .room-note,:root[data-theme=light] footer,:root[data-theme=light] .private-note,:root[data-theme=light] .panel-heading,:root[data-theme=light] .seek-hint{color:#606060}
:root[data-theme=light] .icon-button:hover,:root[data-theme=light] .playlist-option:hover{background:#00000008;color:#111}
:root[data-theme=light] .avatar,:root[data-theme=light] .power-switch[aria-checked=true]{background:#ddd}
:root[data-theme=light] #notice.error{color:#a52222}

:root[data-theme=scarlet]{--theme-hue:357;--accent-rgb:255 48 56;--accent-hover:#ff6066}
:root[data-theme=scarlet] .primary,:root[data-theme=scarlet] .play-button{color:#fff}
.theme-control{position:relative}.theme-swatch-toggle{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff22;border-radius:50%;background:transparent;padding:6px}.theme-swatch-toggle span{width:22px;height:22px;border-radius:50%;background:var(--green)}
.theme-palette{position:absolute;right:0;top:42px;z-index:10;display:grid;grid-template-columns:repeat(4,26px);gap:8px;padding:10px;border:1px solid #ffffff20;border-radius:16px;background:#20252c;box-shadow:0 12px 35px #0005}
.theme-swatch{width:26px;height:26px;border-radius:50%;background:var(--swatch);border:3px solid transparent;background-clip:padding-box;padding:0;position:relative}.theme-swatch[aria-pressed=true]{outline:2px solid #fff;outline-offset:2px}.theme-swatch:hover{transform:scale(1.08)}
.theme-swatch[data-theme=light],.theme-swatch[data-theme=mono]{background:none;box-shadow:none}
:root[data-theme=light] .theme-swatch-toggle{border-color:#0003}:root[data-theme=light] .theme-palette{background:#eee;border-color:#0002}:root[data-theme=light] .theme-swatch[aria-pressed=true]{outline-color:#222}

:root[data-theme=mono] .theme-swatch-toggle span{background:#080808;box-shadow:inset 0 0 0 1px #ffffff40}:root[data-theme=light] .theme-swatch-toggle span{background:#fff;box-shadow:inset 0 0 0 1px #0002}

:root[data-theme=pink-blue]{--theme-hue:330;--second-hue:210;--accent-rgb:255 174 214;--second-rgb:161 208 255}
:root[data-theme=yellow-blue]{--theme-hue:45;--second-hue:210;--accent-rgb:246 219 143;--second-rgb:161 208 255}
:root[data-theme=red-blue]{--theme-hue:357;--second-hue:232;--accent-rgb:255 90 100;--second-rgb:153 170 255}
:root[data-theme=blue-pink]{--theme-hue:210;--second-hue:330;--accent-rgb:161 208 255;--second-rgb:255 174 214}
:root[data-theme*="-"] body{background:radial-gradient(ellipse at 25% 0%,hsl(var(--theme-hue) 55% 24% / .55),transparent 65%),radial-gradient(ellipse at 90% 90%,hsl(var(--second-hue) 55% 22% / .42),transparent 55%),#0c1015}
:root[data-theme*="-"] .player{background:radial-gradient(ellipse at 25% 0%,hsl(var(--theme-hue) 40% 25% / .4),transparent 65%),radial-gradient(ellipse at 95% 100%,hsl(var(--second-hue) 40% 25% / .4),transparent 55%),#141b21}
:root[data-theme*="-"] .art{background:linear-gradient(155deg,hsl(var(--theme-hue) 40% 30%),hsl(var(--second-hue) 40% 23%))}
:root[data-theme*="-"] .player-bottom{color:rgb(var(--second-rgb));border-top-color:rgb(var(--second-rgb) / .15)}
:root[data-theme*="-"] .player-bottom .icon-button,:root[data-theme*="-"] .volume-trigger{color:rgb(var(--second-rgb))}
:root[data-theme*="-"] .timeline input{accent-color:rgb(var(--second-rgb))}
:root[data-theme*="-"] .theme-swatch-toggle span{background:linear-gradient(135deg,rgb(var(--accent-rgb)) 50%,rgb(var(--second-rgb)) 50%)}

.theme-swatch{background:none;isolation:isolate;overflow:hidden;background-clip:border-box}
.theme-swatch::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--swatch);z-index:-1}
.theme-swatch[data-theme=light]::before{background:#fff}.theme-swatch[data-theme=mono]::before{background:#080808;box-shadow:inset 0 0 0 1px #ffffff30}
.theme-swatch[data-theme="pink-blue"]::before{background:linear-gradient(135deg,#ffaed6 0%,#ffaed6 30%,#a1d0ff 70%,#a1d0ff 100%)}
.theme-swatch[data-theme="yellow-blue"]::before{background:linear-gradient(135deg,#f6db8f 0%,#f6db8f 30%,#a1d0ff 70%,#a1d0ff 100%)}
.theme-swatch[data-theme="red-blue"]::before{background:linear-gradient(135deg,#ff3038 0%,#ff3038 30%,#99aaff 70%,#99aaff 100%)}
.theme-swatch[data-theme="blue-pink"]::before{background:linear-gradient(135deg,#a1d0ff 0%,#a1d0ff 30%,#ffaed6 70%,#ffaed6 100%)}
:root[data-theme*="-"] .theme-swatch-toggle span{background:linear-gradient(135deg,rgb(var(--accent-rgb)) 0%,rgb(var(--accent-rgb)) 30%,rgb(var(--second-rgb)) 70%,rgb(var(--second-rgb)) 100%)}

:root[data-theme=orange-pink]{--theme-hue:25;--second-hue:330;--accent-rgb:255 183 112;--second-rgb:255 140 205}
.theme-swatch[data-theme=orange-pink]::before{background:linear-gradient(135deg,rgb(255 183 112) 0%,rgb(255 183 112) 30%,rgb(255 140 205) 70%,rgb(255 140 205) 100%)}

:root[data-theme=green-blue]{--theme-hue:135;--second-hue:205;--accent-rgb:117 240 160;--second-rgb:122 203 255}
.theme-swatch[data-theme=green-blue]::before{background:linear-gradient(135deg,rgb(117 240 160) 0%,rgb(117 240 160) 30%,rgb(122 203 255) 70%,rgb(122 203 255) 100%)}

:root[data-theme=purple-gold]{--theme-hue:275;--second-hue:43;--accent-rgb:211 165 255;--second-rgb:255 209 112}
.theme-swatch[data-theme=purple-gold]::before{background:linear-gradient(135deg,rgb(211 165 255) 0%,rgb(211 165 255) 30%,rgb(255 209 112) 70%,rgb(255 209 112) 100%)}

:root[data-theme=teal-coral]{--theme-hue:175;--second-hue:12;--accent-rgb:110 235 219;--second-rgb:255 157 132}
.theme-swatch[data-theme=teal-coral]::before{background:linear-gradient(135deg,rgb(110 235 219) 0%,rgb(110 235 219) 30%,rgb(255 157 132) 70%,rgb(255 157 132) 100%)}

:root[data-theme=lime-purple]{--theme-hue:85;--second-hue:275;--accent-rgb:204 244 105;--second-rgb:198 150 255}
.theme-swatch[data-theme=lime-purple]::before{background:linear-gradient(135deg,rgb(204 244 105) 0%,rgb(204 244 105) 30%,rgb(198 150 255) 70%,rgb(198 150 255) 100%)}

:root[data-theme=raspberry-blue]{--theme-hue:340;--second-hue:225;--accent-rgb:255 113 164;--second-rgb:133 170 255}
.theme-swatch[data-theme=raspberry-blue]::before{background:linear-gradient(135deg,rgb(255 113 164) 0%,rgb(255 113 164) 30%,rgb(133 170 255) 70%,rgb(133 170 255) 100%)}

:root[data-theme=orange-blue]{--theme-hue:28;--second-hue:225;--accent-rgb:255 179 106;--second-rgb:137 177 255}
.theme-swatch[data-theme=orange-blue]::before{background:linear-gradient(135deg,rgb(255 179 106) 30%,rgb(137 177 255) 70%)}

:root[data-theme=rose-gold]{--theme-hue:335;--second-hue:45;--accent-rgb:255 163 202;--second-rgb:247 216 136}
.theme-swatch[data-theme=rose-gold]::before{background:linear-gradient(135deg,rgb(255 163 202) 30%,rgb(247 216 136) 70%)}

.server-picker{position:relative;margin-top:6px;width:220px;max-width:40vw}.server-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:1px solid #ffffff14;border-radius:10px;background:hsl(var(--theme-hue) 18% 12%);color:#d6dfe1;font-size:12px;text-align:left}.server-toggle #serverName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-toggle>span:last-child{color:var(--green)}
.server-options{position:absolute;left:0;top:calc(100% + 8px);z-index:9;width:100%;max-height:260px;overflow:auto;scrollbar-width:thin;padding:5px;background:hsl(var(--theme-hue) 18% 12%);border:1px solid #ffffff18;border-radius:12px;box-shadow:0 12px 30px #0005}.server-options .playlist-option{white-space:normal;overflow-wrap:anywhere}
:root[data-theme=light] .server-toggle,:root[data-theme=light] .server-options{background:#f4f4f4;color:#222;border-color:#0002}:root[data-theme=mono] .server-toggle,:root[data-theme=mono] .server-options{background:#242424}

.server-toggle{position:relative;padding-right:32px}.server-toggle>span:last-child{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--green);font-size:0}
.playlist-picker summary:after{content:"";top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--green)}.playlist-picker[open] summary:after{content:"";transform:translateY(-50%) rotate(180deg)}
.connection{gap:16px}.server-picker{width:190px}.toolbar{flex-wrap:wrap}.room-select-label .server-picker{width:180px}@media(max-width:760px){.connection{flex-wrap:wrap}.server-picker,.room-select-label .server-picker{width:180px}}

.toolbar{align-items:center}.connection{margin-left:auto;display:grid;grid-template-columns:190px 180px;gap:12px 16px;justify-content:end}.connection .power-group{grid-column:1 / -1;grid-row:1;justify-self:end}.connection .server-label{grid-row:2}.connection .server-picker{max-width:100%}
@media(max-width:760px){.connection{margin-left:0;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.connection .server-picker,.connection .room-select-label .server-picker{width:100%}}

.toolbar{align-items:flex-end}.connection{gap:8px 16px}.connection .power-group{margin-top:-10px}.connection .server-picker{margin-top:4px}@media(max-width:760px){.toolbar{align-items:stretch}.connection .power-group{margin-top:0}}

/* Keep the cover square even when the player flex column runs out of height. */
.art{width:min(100%,clamp(260px,30vw,405px));height:auto;aspect-ratio:1 / 1;flex:none;min-height:0;max-width:100%}
.art img{display:block;min-width:0;min-height:0}.player{overflow:auto;scrollbar-width:thin}
@media(min-width:761px){.art{width:min(100%,clamp(230px,30vw,405px),calc(clamp(720px,100vh - 255px,850px) - 355px))}}
@media(max-width:760px){.art{width:min(100%,320px)}}

.play-button{padding:0;line-height:0;align-items:center;justify-items:center}.play-button svg{display:block;margin:0;transform:none}

.brand-mark .dnd-dice{display:none}
:root[data-theme^="dnd-"] .brand-mark .music-mark{display:none}:root[data-theme^="dnd-"] .brand-mark .dnd-dice{display:block}
.theme-swatch .dnd-dice{width:17px;height:17px;position:absolute;inset:0;margin:auto;fill:none;color:#21180f}
:root[data-theme^="dnd-"]{font-family:Georgia,'Times New Roman',serif}
:root[data-theme^="dnd-"] .card{border-radius:12px;border-color:rgb(var(--accent-rgb) / .2);box-shadow:inset 0 0 0 3px #0002,0 10px 30px #0002}
:root[data-theme^="dnd-"] .player-top{border-bottom:1px solid rgb(var(--accent-rgb) / .18);padding-bottom:12px}
:root[data-theme^="dnd-"] .brand small{font-family:Segoe UI,sans-serif;letter-spacing:1.5px}
:root[data-theme^="dnd-"] .art{border:2px solid rgb(var(--accent-rgb) / .35);border-radius:8px;box-shadow:0 0 0 5px #0002,0 20px 45px #0005}
:root[data-theme^="dnd-"] h1,:root[data-theme^="dnd-"] .track-info h2{font-variant:small-caps;letter-spacing:.3px}
:root[data-theme=dnd-tavern] body{background:repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 80px),radial-gradient(ellipse at 20% 0%,#633c2455,transparent 65%),#17110d}
:root[data-theme=dnd-dungeon] body{background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 55px),radial-gradient(ellipse at 80% 0%,#44406a66,transparent 65%),#0e111a}
:root[data-theme=dnd-forest] body{background:radial-gradient(ellipse at 0% 15%,#365f3655,transparent 60%),radial-gradient(ellipse at 100% 100%,#75622a22,transparent 55%),#0d1710}
:root[data-theme=dnd-dragon] body{background:radial-gradient(ellipse at 35% 0%,#8a302955,transparent 65%),radial-gradient(ellipse at 100% 100%,#87602622,transparent 50%),#1b0c0b}

:root[data-theme=dnd-tavern]{--theme-hue:32;--second-hue:12;--accent-rgb:237 194 125;--second-rgb:195 137 98}

:root[data-theme=dnd-dungeon]{--theme-hue:220;--second-hue:270;--accent-rgb:155 187 225;--second-rgb:191 160 240}

:root[data-theme=dnd-forest]{--theme-hue:145;--second-hue:43;--accent-rgb:151 219 169;--second-rgb:223 200 129}

:root[data-theme=dnd-dragon]{--theme-hue:5;--second-hue:38;--accent-rgb:247 144 131;--second-rgb:242 200 115}

.shuffle-button .shuffle-dnd{display:none}
:root[data-theme^="dnd-"] .shuffle-button .shuffle-standard{display:none}:root[data-theme^="dnd-"] .shuffle-button .shuffle-dnd{display:block;width:25px;height:25px}
:root[data-theme=dnd-tavern]{--accent-rgb:255 190 66;--second-rgb:255 112 57}
:root[data-theme=dnd-dungeon]{--accent-rgb:117 173 255;--second-rgb:184 103 255}
:root[data-theme=dnd-forest]{--accent-rgb:86 239 146;--second-rgb:240 211 79}
:root[data-theme=dnd-dragon]{--accent-rgb:255 104 82;--second-rgb:255 191 62}
:root[data-theme^="dnd-"] .card{background-color:hsl(var(--theme-hue) 35% 10%)}
:root[data-theme^="dnd-"] .player{background:radial-gradient(ellipse at 25% 0%,hsl(var(--theme-hue) 65% 28% / .5),transparent 65%),radial-gradient(ellipse at 95% 100%,hsl(var(--second-hue) 65% 26% / .38),transparent 55%),#14151b}
:root[data-theme^="dnd-"] body{position:relative;isolation:isolate}
:root[data-theme^="dnd-"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('/static/dnd-bestiary.png') center / cover no-repeat;opacity:.2}
:root[data-theme^="dnd-"] .shell{position:relative}
@media(max-width:760px){:root[data-theme^="dnd-"] body::before{opacity:.12;background-size:auto 100%}}

/* Four fantasy settings: colours follow the individual bestiary illustrations. */
:root[data-theme=dnd-tavern]{--theme-hue:31;--second-hue:22;--accent-rgb:218 173 98;--second-rgb:175 124 77;--accent-hover:#ead0a1;--dnd-art:url('/static/dnd-tavern.png');--dnd-base:#19120d;--dnd-glow:#73502c66}
:root[data-theme=dnd-dungeon]{--theme-hue:267;--second-hue:226;--accent-rgb:183 159 207;--second-rgb:137 150 172;--accent-hover:#d3c1e1;--dnd-art:url('/static/dnd-dungeon.png');--dnd-base:#111019;--dnd-glow:#58446966}
:root[data-theme=dnd-forest]{--theme-hue:137;--second-hue:85;--accent-rgb:162 189 150;--second-rgb:201 210 193;--accent-hover:#ccd9c1;--dnd-art:url('/static/dnd-forest.png');--dnd-base:#10160f;--dnd-glow:#46613b66}
:root[data-theme=dnd-dragon]{--theme-hue:12;--second-hue:30;--accent-rgb:210 133 104;--second-rgb:206 167 111;--accent-hover:#e6b7a0;--dnd-art:url('/static/dnd-dragon.png');--dnd-base:#190e0c;--dnd-glow:#74322266}
:root[data-theme^="dnd-"] body{background:radial-gradient(ellipse at 20% 0%,var(--dnd-glow),transparent 65%),var(--dnd-base)}
:root[data-theme^="dnd-"] body::before{background-image:var(--dnd-art);opacity:.32}
:root[data-theme^="dnd-"] .card{background-color:hsl(var(--theme-hue) 20% 10%);border-color:rgb(var(--accent-rgb) / .28)}
:root[data-theme^="dnd-"] .player{background:radial-gradient(ellipse at 25% 0%,rgb(var(--accent-rgb) / .13),transparent 65%),radial-gradient(ellipse at 95% 100%,rgb(var(--second-rgb) / .09),transparent 55%),var(--dnd-base)}
:root[data-theme^="dnd-"] .art{background:linear-gradient(150deg,hsl(var(--theme-hue) 22% 22%),var(--dnd-base));border-color:rgb(var(--accent-rgb) / .4)}

@media(max-width:760px){:root[data-theme^="dnd-"] body::before{opacity:.18}}

.theme-swatch[data-theme=dnd-tavern]::before{background:linear-gradient(135deg,rgb(218 173 98) 30%,rgb(175 124 77) 70%)}

.theme-swatch[data-theme=dnd-dungeon]::before{background:linear-gradient(135deg,rgb(183 159 207) 30%,rgb(137 150 172) 70%)}

.theme-swatch[data-theme=dnd-forest]::before{background:linear-gradient(135deg,rgb(162 189 150) 30%,rgb(201 210 193) 70%)}

.theme-swatch[data-theme=dnd-dragon]::before{background:linear-gradient(135deg,rgb(210 133 104) 30%,rgb(206 167 111) 70%)}

.empty-art svg{display:block;width:120px;height:120px;fill:none}

.art .empty-art{display:grid;place-items:center;width:100%;height:100%}.art .lute-illustration{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 12px 18px #0005)}

/* A subtle colour wash, preserving the original lute artwork and transparency. */
:root[data-theme=dnd-tavern]{--lute-tone:8deg}
:root[data-theme=dnd-dungeon]{--lute-tone:235deg}
:root[data-theme=dnd-forest]{--lute-tone:105deg}
:root[data-theme=dnd-dragon]{--lute-tone:340deg}
.art .lute-illustration{filter:saturate(.65) hue-rotate(var(--lute-tone,0deg)) saturate(.8) drop-shadow(0 12px 18px #0005);transition:filter .25s ease}

/* Anchor the server and room row beside the title independently of its wrapping. */
@media(min-width:761px){
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) 386px;gap:24px;align-items:start;padding-top:30px}
.toolbar>div:first-child{min-width:0}.toolbar h1{line-height:1.2}
.connection{position:relative;margin:0;grid-template-columns:190px 180px;gap:0 16px;align-self:start;padding-top:10px}
.connection .power-group{position:absolute;right:0;bottom:calc(100% + 7px);margin:0;grid-row:auto;grid-column:auto}
.connection .server-label{grid-row:1}.connection .server-picker{margin-top:6px}
}
@media(max-width:760px){.toolbar{padding-top:0}.connection{position:static}.connection .power-group{position:static}}
.bot-invite{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:14px;color:rgb(var(--accent-rgb));text-decoration:none;font-size:13px;white-space:nowrap;transition:background .2s}
.bot-invite:hover{background:rgba(var(--accent-rgb),.12)}
.bot-invite:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.brand-mark{overflow:hidden;flex-shrink:0;padding:0;border:0;background:transparent}
.brand-mark .brand-logo{display:block;width:100%;height:100%;object-fit:cover;filter:hue-rotate(calc((var(--theme-hue) - 170) * 1deg));transition:filter .25s ease}
:root[data-theme=mono] .brand-mark .brand-logo,:root[data-theme=light] .brand-mark .brand-logo{filter:grayscale(1)}
@media(max-width:760px){.header-tools{flex-wrap:wrap;justify-content:flex-end}.bot-invite{font-size:12px;padding:8px 10px}}

/* The player defines the row height; only song lists scroll internally. */
.shell{width:100%;padding-inline:clamp(16px,3.6vw,52px)}
header{height:auto;min-height:104px;padding-block:18px;gap:20px;flex-wrap:wrap}
.brand,.header-tools,.profile{min-width:0}
.header-tools{flex-wrap:wrap;gap:16px;margin-left:auto;justify-content:flex-end}
.profile #username{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.grid{height:auto;grid-template-columns:minmax(0,1fr) minmax(300px,355px);align-items:stretch}
.player{height:auto;min-height:700px;overflow:visible;padding:25px 30px 18px}
.art{width:min(100%,360px);height:auto;aspect-ratio:1;flex:none;margin:24px auto 0}
.track-info{width:100%;margin:24px auto 0;min-height:110px}
.track-info h2{font-size:clamp(20px,2vw,28px);line-height:1.25}
.transport{margin:8px 0 0}
.play-label{margin:8px 0 16px}
.timeline{margin-top:auto;padding-top:16px}
.player-bottom{margin-top:16px}
.sidebar{height:auto;contain:size;min-height:0;overflow:visible}
.library{flex:1;min-height:0}
.search-results{max-height:220px}
.toolbar{grid-template-columns:minmax(0,1fr) 386px;gap:24px}
.connection{min-width:0}
.server-picker,.server-toggle{min-width:0;width:100%}
.player-top .eyebrow{min-width:0;overflow-wrap:anywhere}
@media(max-width:1000px){
  .grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
  .player{padding-inline:22px}
  .toolbar{grid-template-columns:minmax(0,1fr) 340px;gap:16px}
  .connection{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
}
@media(max-width:900px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .player{min-height:0;height:auto;padding:22px}
  .art{width:min(100%,340px);margin-top:20px}
  .track-info{min-height:0;margin-top:22px}
  .timeline{margin-top:0}
  .sidebar{contain:none;height:700px;min-height:0}
  .toolbar{display:flex;flex-direction:column;align-items:stretch;padding-top:0;gap:18px}
  .connection{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;padding:0;margin:0;gap:8px 12px}
  .connection .power-group{position:static;grid-column:1 / -1;grid-row:1;justify-self:end;margin:0}
  .connection .server-label{grid-row:2}
  .seek-hint{display:none}
}
@media(max-width:480px){
  header{gap:14px;padding-block:16px}
  .header-tools{width:100%;margin-left:0;justify-content:space-between;gap:10px}
  .brand{font-size:18px}
  .profile{gap:6px}.profile #username{max-width:90px}
  .bot-invite{white-space:normal;max-width:150px}
  .art{width:min(100%,300px)}
  .player{padding:20px 16px}
  .player-bottom{gap:8px}
  .sidebar{height:680px}
  .search-card,.library{padding-inline:16px}
  .toolbar h1{font-size:26px;overflow-wrap:anywhere}
  footer{flex-wrap:wrap}
}

/* Stable content frame and connection controls at every aspect ratio. */
.shell{max-width:1360px;margin-inline:auto}
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,386px);align-items:end;padding-top:0;gap:20px;margin-bottom:24px}
.toolbar>div:first-child{align-self:center;min-width:0}
.toolbar h1{font-size:clamp(24px,2.4vw,32px);line-height:1.2;margin-top:8px}
.connection{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:36px auto;align-items:end;width:100%;padding:0;margin:0;gap:10px 14px}
.connection .power-group{position:static;grid-column:1 / -1;grid-row:1;justify-self:end;margin:0;min-width:0;gap:10px}
.connection .power-group>span{display:block;max-width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.connection .server-label{grid-row:2;min-width:0}
.connection .server-label:first-child{grid-column:1}
.connection .room-select-label{grid-column:2}
.connection .server-picker,.connection .room-select-label .server-picker{width:100%;max-width:none;margin-top:6px}
.server-toggle{height:42px;min-width:0}
.server-toggle #serverName,.server-toggle #roomName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.player-top{min-height:28px}
.track-info{min-height:112px}
.track-info h2{-webkit-line-clamp:2}
#subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){
  .toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;align-items:center}
  .toolbar>div:first-child{grid-row:1;grid-column:1}
  .toolbar .connection{display:contents}
  .connection .power-group{grid-row:1;grid-column:2;align-self:center}
  .connection .server-label{grid-row:2}
  .toolbar h1{font-size:clamp(19px,3vw,26px);letter-spacing:-.5px}
  .toolbar .eyebrow{font-size:9px;letter-spacing:1px;line-height:1.5}
  .art{width:min(100%,340px)}
  .track-info{min-height:104px}
}
@media(max-width:480px){
  .connection .power-group{display:grid;grid-template-rows:14px 36px;justify-items:end;gap:4px;max-width:150px}
  .connection .power-group>span{font-size:10px;max-width:150px;text-align:right;line-height:14px}
  .connection .server-label{font-size:11px}
  .server-toggle{font-size:12px;padding-left:10px;padding-right:26px}
  .art{width:min(100%,300px)}
}
@media(min-width:1800px){.shell{max-width:1440px}.grid{grid-template-columns:minmax(0,1fr) 386px}.art{width:380px}}
.bot-invite{border:2px solid rgb(var(--accent-rgb) / .75);background:rgb(var(--accent-rgb) / .1);color:var(--green);font-weight:650;line-height:1.35;padding:10px 14px;border-radius:12px;transition:background .2s,border-color .2s}
.bot-invite:hover{border-color:var(--green);background:rgb(var(--accent-rgb) / .2)}
.bot-invite>span{font-size:18px;line-height:1;flex-shrink:0}
:root[data-theme=light] .bot-invite{border-color:#555;background:#00000008;color:#222}
:root[data-theme=light] .bot-invite:hover{background:#00000012;border-color:#222}
@media(max-width:760px){.bot-invite{padding:8px 10px;font-size:12px}}

/* Explicit header slots prevent individual controls wrapping at random. */
.sidebar{contain:none;height:auto;min-height:0;overflow:visible}
.sidebar .search-card{flex:0 0 auto;min-height:0}
.sidebar .search-results{max-height:160px}
.sidebar .library{height:auto;min-height:500px;flex:1 0 500px;overflow:visible}
.library [role=tabpanel]{overflow:visible;min-height:0}
.library .tabs,.library .playlist-actions,.library .playlist-picker,.library .private-note{flex-shrink:0}
.library .playlist-options{max-height:140px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:rgb(var(--accent-rgb) / .65) transparent}
.library .track-list{flex:1 0 160px;min-height:160px;max-height:300px;overflow-y:auto;padding-right:10px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgb(var(--accent-rgb) / .65) transparent}
.library .playlist-actions{margin-block:12px;align-items:center}
.library .private-note{margin-top:16px}
@media(max-width:900px){.sidebar{height:auto;contain:none}.sidebar .library{min-height:540px;flex-basis:540px}.sidebar .search-results{max-height:180px}}
.save-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid rgb(var(--accent-rgb) / .4);border-radius:20px;background:hsl(var(--theme-hue) 18% 10%);color:#eff2f4;box-shadow:0 24px 80px #0008}
.save-dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}
.save-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.save-dialog h2{margin:0;font-size:20px}.save-dialog .hint{overflow-wrap:anywhere;line-height:1.5}
.save-dialog-options{max-height:240px;overflow:auto;margin:16px 0;scrollbar-width:thin;scrollbar-color:var(--green) transparent}
.save-dialog .playlist-option{border:1px solid var(--line);margin:6px 0;padding:12px}
.save-dialog form{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.save-dialog label{font-size:12px;color:var(--muted)}
#saveDialogError{font-size:12px;color:#ffb4ac;margin-bottom:0}
:root[data-theme=light] .save-dialog{background:#fff;color:#222}
.search-results{padding-right:14px;margin-right:-8px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgb(var(--accent-rgb) / .65) transparent}
.search-results::-webkit-scrollbar{width:8px}
.search-results::-webkit-scrollbar-track{background:rgb(var(--accent-rgb) / .06);border-radius:8px}
.search-results::-webkit-scrollbar-thumb{background:rgb(var(--accent-rgb) / .6);border:2px solid transparent;background-clip:padding-box;border-radius:8px}
.search-results::-webkit-scrollbar-thumb:hover{background:rgb(var(--accent-rgb) / .9);background-clip:padding-box}
header{display:grid;grid-template-columns:minmax(220px,1fr) auto 36px auto;align-items:center;gap:16px;min-height:104px}
header>.brand{grid-column:1;grid-row:1;min-width:0}
header>.header-tools{display:contents}
header .bot-invite{grid-column:2;grid-row:1;white-space:nowrap;max-width:none;justify-self:end}
header .theme-control{grid-column:3;grid-row:1;justify-self:center}
header .profile{grid-column:4;grid-row:1;justify-self:end;min-width:0}
header .profile #username{max-width:140px}
header .brand>span:last-child{min-width:0}
@media(max-width:1000px){
  header{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:12px 18px;padding-block:18px}
  header>.brand{grid-column:1;grid-row:1;align-self:center}
  header .bot-invite{grid-column:1;grid-row:2;justify-self:start;max-width:100%;white-space:normal}
  header .profile{grid-column:2;grid-row:1;align-self:center}
  header .theme-control{grid-column:2;grid-row:2;justify-self:end;align-self:center}
  header .brand small{display:none}
}
@media(max-width:480px){
  header{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:12px 10px}
  header .brand{font-size:16px;gap:7px}
  header .brand-mark{width:32px;height:32px}
  header .bot-invite{font-size:11px;padding:8px;gap:4px}
  header .profile{gap:5px;font-size:11px}
  header .profile #username{max-width:70px}
  header .profile .avatar{width:32px;height:32px}
  header .profile #logout{width:26px;height:30px;font-size:20px}
}
/* Playlist sizing must override the earlier responsive sidebar heights. */
.sidebar{height:auto;contain:none;overflow:visible}
.sidebar .library{height:auto;min-height:500px;flex:1 0 500px;overflow:visible}
.sidebar .search-results{max-height:160px}
@media(max-width:900px){.sidebar{height:auto;contain:none}.sidebar .library{min-height:540px;flex-basis:540px}.sidebar .search-results{max-height:180px}}
/* Bound the library and keep scrolling inside its rounded frame. */
.sidebar .library{height:640px;min-height:640px;flex:1 0 640px;overflow:hidden}
.library [role=tabpanel]{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(var(--accent-rgb) / .65) transparent;padding:0 3px 3px}
.library .track-list{flex:1 0 120px;min-height:120px;max-height:260px;overflow-y:auto;overflow-x:hidden;margin-top:12px;margin-bottom:0;padding-right:10px;overscroll-behavior:contain}
.library .playlist-picker{flex:none;min-height:0;overflow:hidden}
.library .playlist-options{max-height:120px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-gutter:stable}
.library .playlist-option{min-width:0}.library .playlist-option span{overflow-wrap:anywhere}
.library .private-note{flex:none;margin:12px 0 0;padding-block:12px}
.library .playlist-actions{flex:none;margin-block:10px}
.library .import-box{flex:none;max-height:170px;overflow:auto}
@media(max-width:900px){.sidebar .library{height:640px;min-height:640px;flex-basis:640px}}
/* Compact library, balanced player spacing. */
.sidebar .library{height:500px;min-height:500px;flex:1 0 500px}
.player{min-height:700px}
.player .track-info{margin-top:32px;min-height:96px}
.player .transport{margin-top:18px}
.player .play-label{margin-bottom:18px}
.player .timeline{margin-top:auto;padding-top:24px}
.library .track-list{flex:1 0 100px;min-height:100px;max-height:220px}
@media(max-width:900px){
  .sidebar .library{height:500px;min-height:500px;flex-basis:500px}
  .player{min-height:0}
  .player .track-info{margin-top:28px;min-height:90px}
  .player .timeline{margin-top:4px;padding-top:16px}
}
/* Center the privacy caption in the card footer. */
.sidebar .library{padding-bottom:0}
.library [role=tabpanel]{padding-bottom:0}
.library .private-note{display:grid;place-items:center;flex:0 0 64px;min-height:64px;margin:0;padding:12px 0;text-align:center;box-sizing:border-box}
/* Matching bottom control/footer bands in the two cards. */
.player{padding-bottom:18px}
.player .player-bottom{box-sizing:border-box;flex:0 0 52px;min-height:52px;padding-top:8px;padding-bottom:0;margin-top:16px}
.sidebar .library{padding-bottom:18px}
.library [role=tabpanel]{padding-bottom:0}
.library .track-list{flex:1 1 auto;min-height:80px;max-height:none;margin-bottom:0}
.library .private-note{box-sizing:border-box;display:grid;place-items:center;flex:0 0 52px;min-height:52px;margin:0;padding:8px 0 0;border-top:1px solid var(--line);text-align:center}
/* Share column widths between the toolbar and the player/search row. */
@media(min-width:901px){
  .shell{--sidebar-width:355px;--column-gap:22px}
  .grid,.toolbar{grid-template-columns:minmax(0,1fr) var(--sidebar-width);column-gap:var(--column-gap)}
  .toolbar .connection{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;justify-self:stretch}
}
@media(min-width:901px) and (max-width:1000px){.shell{--sidebar-width:300px;--column-gap:16px}}
@media(min-width:1800px){.shell{--sidebar-width:386px}}
/* Bot status stays centered directly below its switch. */
.toolbar .connection .power-group{display:grid;grid-template-columns:76px;grid-template-rows:36px auto;justify-items:center;align-items:center;gap:6px;margin:0;max-width:none}
.toolbar .connection .power-group #power{grid-column:1;grid-row:1}
.toolbar .connection .power-group #powerStatus{grid-column:1;grid-row:2;display:block;max-width:none;width:max-content;white-space:nowrap;overflow:visible;text-overflow:clip;text-align:center;font-size:10px;line-height:14px}
@media(min-width:901px){.toolbar .connection{grid-template-rows:56px auto}}
/* Fixed transport slots, without the redundant seek caption. */
.player .player-bottom{display:grid;grid-template-columns:34px 34px minmax(0,1fr) auto;column-gap:12px;align-items:center;justify-content:normal}
.player-bottom #shufflePlayer{grid-column:1;grid-row:1}
.player-bottom .stop-button{grid-column:2;grid-row:1}
.player-bottom #seekHint{display:none}
.player-bottom .volume-wrap{grid-column:4;grid-row:1;justify-self:end}
/* Symmetric side columns keep Stop at the exact player center. */
.player .player-bottom{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}
.player-bottom #shufflePlayer{grid-column:1;justify-self:start}
.player-bottom .stop-button{grid-column:2;justify-self:center}
.player-bottom .volume-wrap{grid-column:3;justify-self:end}
/* D20 branding follows the fantasy theme and inherits its logo color filter. */
.brand-mark .brand-logo-dnd{display:none}
:root[data-theme^="dnd-"] .brand-mark .brand-logo-standard{display:none}
:root[data-theme^="dnd-"] .brand-mark .brand-logo-dnd{display:block}
/* Compact effects selector shares the volume slot without shifting Stop. */
.player-bottom .volume-wrap{display:flex;align-items:center;gap:10px;min-width:0}
#audioEffect{width:110px;max-width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface, #202020);color:var(--green);font:inherit;font-size:12px}
#audioEffect option{background:#202020;color:#eee}
@media(max-width:480px){.player-bottom .volume-wrap{gap:4px}#audioEffect{width:78px;font-size:10px;padding:6px 3px}.player .player-bottom{column-gap:6px}}
/* Theme-aware effects popup stays inside a compact scrolling surface. */
.effect-picker{position:relative;min-width:0}
#effectToggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:110px;max-width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:10px;color:var(--green);background:transparent;font:inherit;font-size:12px}
#effectName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#effectOptions{position:absolute;bottom:calc(100% + 8px);right:0;z-index:30;box-sizing:border-box;width:210px;max-width:calc(100vw - 40px);max-height:min(240px,45dvh);overflow-y:auto;overflow-x:hidden;padding:6px;background:color-mix(in srgb,var(--green) 8%,#161b20);border:1px solid var(--green);border-radius:14px;box-shadow:0 12px 30px #0006;scrollbar-width:thin;scrollbar-color:var(--green) transparent}
.effect-option{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;text-align:left;font:inherit;font-size:13px;color:inherit;background:transparent}
.effect-option:hover,.effect-option[aria-pressed=true]{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}
#effectOptions::-webkit-scrollbar{width:6px}#effectOptions::-webkit-scrollbar-thumb{background:var(--green);border-radius:6px}
@media(max-width:480px){#effectToggle{width:78px;font-size:10px;padding:6px 3px;gap:4px}}

:root[data-theme=light] #effectOptions{background:#f5f7fa;color:#20262b}
/* Match the playlist chevron and align both audio controls on one center line. */
.player-bottom .volume-wrap{align-items:center}
.effect-picker{display:flex;align-items:center;align-self:center}
#effectToggle{min-height:34px;line-height:18px;margin:0;align-items:center}
#effectToggle .effect-arrow{display:block;flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transform:translateY(1px)}
#effectToggle[aria-expanded=true] .effect-arrow{transform:translateY(1px) rotate(180deg)}
.player-bottom .volume-trigger{display:flex;align-items:center;justify-content:center;min-height:34px;margin:0;line-height:18px}
/* Empty fantasy queues show a campfire. */
.empty .empty-queue-campfire{display:none;width:44px;height:44px;margin:0 auto 16px;color:var(--green);opacity:.65}
:root[data-theme^="dnd-"] .empty .empty-queue-waves{display:none}
:root[data-theme^="dnd-"] .empty .empty-queue-campfire{display:block}
.empty .empty-queue-campfire{width:72px;height:72px;object-fit:contain;opacity:1;filter:drop-shadow(0 2px 9px #ff9a3028)}
/* Preserve painted details while tinting the campfire to the fantasy palette. */
:root[data-theme^="dnd-"] .empty .empty-queue-campfire{background:none;filter:grayscale(1) sepia(1) saturate(2) hue-rotate(calc((var(--theme-hue) - 40) * 1deg)) saturate(.65);opacity:.9}