/* One material and spacing system for radio, queue, history and settings. */
:root { --surface:rgba(29,43,52,.35); --field:rgba(13,27,37,.24); --line:rgba(255,255,255,.17); }
.ambient { background:var(--landscape,url('/static/images/mountain-background.jpg')) center / cover no-repeat; }
html[data-period] .ambient::after,html[data-period].has-cover .ambient::after {
  content:''; position:absolute; inset:0; opacity:1; filter:none;
  background:linear-gradient(180deg,rgba(11,21,33,.13),rgba(9,20,32,.4));
}
html[data-period="night"] { --surface:rgba(17,25,40,.48); --field:rgba(8,16,29,.3); }
html[data-period="evening"] { --surface:rgba(42,33,53,.4); }
.liquid-library .app-shell {
  width:min(1376px,calc(100% - 160px)); height:calc(100dvh - 128px);
  min-height:460px; max-height:850px; margin:36px auto 92px;
  grid-template-columns:248px minmax(0,1fr); transform:translateX(20px);
  background:linear-gradient(125deg,rgba(236,247,247,.14),rgba(211,225,232,.04)),var(--surface);
  border-color:#ffffff38; border-radius:28px;
  box-shadow:inset 0 1px 0 #ffffff35,0 24px 80px #06101c3d;
  backdrop-filter:blur(38px) saturate(125%); -webkit-backdrop-filter:blur(38px) saturate(125%);
}
.liquid-library .sidebar { padding:28px 16px 20px; background:#ffffff05; border-right:1px solid #ffffff10; border-radius:27px 0 0 27px; }
.library-brand { padding:0 10px 28px; align-items:center; }
.library-brand h2 { font-size:23px; font-weight:650; letter-spacing:-.04em; }
.library-brand p { font-size:12px; color:var(--muted); margin-top:5px; }
.library-more { width:30px; height:30px; background:#ffffff18; color:#fff; font-size:15px; }
.library-nav { margin-bottom:28px; gap:6px; }
.library-nav a,.library-nav button,.playlist-nav button { height:44px; padding:0 13px; gap:13px; font-size:14px; border-radius:12px; }
.library-nav svg,.playlist-nav svg { width:20px; height:20px; }
.library-nav .selected,.playlist-nav .selected { color:#fff; background:#ffffff23; box-shadow:inset 0 1px 0 #ffffff17; }
.library-section-heading { padding:0 12px 12px; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#ffffff80; }
.library-section-heading span { display:none; }
.playlist-nav { margin:0; gap:4px; }
.playlist-nav button { color:#ffffffb5; }
.library-account { display:flex; padding:10px 8px; gap:8px; background:none; border:0; border-top:1px solid #ffffff14; border-radius:0; margin-top:auto; }
.library-account .avatar { width:30px; height:30px; font-size:12px; }
.library-account b { font-size:12px; }
.library-account small { font-size:10px; }
.liquid-library .main-area { padding:27px 32px 38px; overflow:hidden; }
.library-content { gap:0; }
.library-heading { position:relative; align-items:center; gap:10px; margin:0 0 21px; }
.library-heading > div { flex:1; min-width:0; }
.library-heading h1 { font-size:28px; font-weight:600; letter-spacing:-.045em; }
.library-heading #radioSummary { color:#ffffff90; font-size:11px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-heading .status { order:1; font-size:10px; background:#ffffff08; border-color:#ffffff14; padding:8px 10px; gap:6px; }
.library-heading .status i { width:6px; height:6px; }
.library-heading .library-sort { order:2; width:31px; height:31px; background:#ffffff15; color:#fff; }
.header-add-station { order:3; flex:none; width:31px; height:31px; border-radius:50%; padding:0; font-size:23px; font-weight:300; background:#ffffff15; border:1px solid #ffffff20; box-shadow:none; }
.workspace-tabs { display:flex; flex:none; align-self:flex-start; gap:4px; margin-bottom:22px; padding:4px; border-radius:13px; border:1px solid #ffffff13; background:#10212c1f; }
.workspace-tabs button { padding:8px 23px; border-radius:9px; color:#ffffffa8; border:0; background:none; box-shadow:none; font-size:12px; font-weight:500; }
.workspace-tabs button.active { background:#ffffff24; color:#fff; box-shadow:inset 0 1px 0 #ffffff18,0 2px 8px #09152512; }
.library-radio-search { margin:0 0 22px; }
.library-radio-search #radioFilter { height:42px; background:var(--field); border:1px solid #ffffff13; box-shadow:inset 0 1px 3px #09172512; border-radius:12px; font-size:13px; }
.library-radio-search .radio-own { font-size:11px; color:#ffffff90; }
.radio-own input,.browser-listening input[type="checkbox"] { accent-color:#c2e0d5; }
.liquid-library .library-radio-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:2px 5px 24px 1px; }
.library-radio-grid .station-artwork { border-radius:15px; padding:21%; border-color:#ffffff14; background:linear-gradient(145deg,#ffffff12,#071a2b18); box-shadow:inset 0 1px 0 #ffffff0a; }
.library-radio-grid .station-play b { font-size:13px; line-height:1.35; }
.library-radio-grid .station-play small { font-size:10px; color:#ffffff80; opacity:1; margin-top:3px; }
.library-radio-grid .station-card:hover { transform:translateY(-2px); }
.library-radio-grid .station-card.selected .station-artwork { background:linear-gradient(145deg,#c2e0d52e,#c2e0d50c); border-color:#d1f0df80; }
.library-radio-grid .station-placeholder { font-size:28px; font-weight:500; letter-spacing:-.04em; }
#radioWarning { color:#ffffff80; font-size:11px; line-height:1.5; }
#radioWarning:not(:empty) { padding:9px 12px; background:#ffffff07; border-radius:9px; }
.library-sheet {
  position:relative; inset:auto; width:100%; padding:0; margin:0;
  min-height:0; overflow:auto; flex:1; border:0; border-radius:0;
  background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.sheet-heading { margin:0 0 12px; justify-content:flex-end; }
.sheet-heading h2 { display:none; }
.sheet-heading .sheet-close { width:auto; height:28px; padding:0 10px; font-size:0; border-radius:8px; background:#ffffff10; }
.sheet-close::after { content:'Назад к радио'; font-size:11px; }
.workspace-is-panel .library-radio-search,.workspace-is-panel #radioPanel,.workspace-is-panel #radioSummary { display:none!important; }
.workspace-is-panel .library-heading .library-sort { display:none; }
.sheet-body { padding:0 5px 18px 0; }
.library-sheet .topbar { display:flex; width:100%; margin:0 0 20px; }
.library-sheet .search-card { width:100%; flex:1; min-width:0; padding:6px 8px 6px 14px; border-radius:13px; background:var(--field); border:1px solid #ffffff18; box-shadow:none; }
.library-sheet .search-card input { font-size:13px; }
.library-sheet .search-card button { padding:9px 16px; font-size:12px; }
.library-sheet #youtubeQueue { border:0; padding:0; margin:0; background:none; box-shadow:none; }
.library-sheet #youtubeQueue .card-head { align-items:center; margin-bottom:20px; }
.library-sheet .card-head h2 { font-size:16px; font-weight:500; }
.library-sheet .card-head p { font-size:11px; color:#ffffff80; }
.library-sheet .queue-list { max-height:none; }
.library-sheet .qitem { border-bottom:1px solid #ffffff0c; border-radius:9px; padding:12px 8px; gap:12px; }
.library-sheet .qitem:hover { background:#ffffff09; }
.library-sheet .qitem img { width:44px; height:44px; border-radius:8px; }
.library-sheet .qitem b { font-size:13px; font-weight:500; }
.library-sheet .qitem small { font-size:11px; }
.library-sheet .stats-grid,.library-sheet .audience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 14px; }
.library-sheet .glass-card,.library-sheet .settings-card { border:1px solid #ffffff12; border-radius:16px; padding:19px; background:#ffffff06; box-shadow:none; }
.library-sheet .stats-grid .glass-card:last-child { grid-column:1/-1; }
.library-sheet .audience-grid .glass-card { padding:19px; }
.library-sheet .empty { padding:24px 12px; color:#ffffff80; font-size:12px; }
.library-sheet .person { font-size:12px; }
.library-sheet .dock-settings { max-width:640px; padding:22px; }
.dock-settings .browser-listening { padding-top:18px; margin-top:12px; }
.dock-settings .browser-listening-toggle { padding:6px 0; font-size:13px; }
.dock-settings .theme-picker { display:flex; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid #ffffff14; }
.dock-settings .theme-picker select { width:150px; border-radius:10px; }
.dock-settings .library-settings-link { display:inline-block; font-size:12px; text-decoration:none; padding:10px 0; }
.station-settings { max-width:680px; }
.station-settings .custom-station summary { font-size:14px; font-weight:500; }
.station-settings .custom-station form { display:grid; grid-template-columns:1fr; gap:13px; margin:20px 0; }
.station-settings .custom-station input { flex:auto; padding:12px 14px; font-size:13px; border-radius:10px; background:var(--field); }
.station-settings .custom-station button { justify-self:start; padding:10px 22px; font-size:12px; }
.station-settings .custom-station p { font-size:11px; line-height:1.6; }
.liquid-library #player.now-card { width:min(820px,85%); bottom:-42px; height:76px; background:linear-gradient(120deg,#d0dcda30,#9cb6b621),var(--surface); border-color:#ffffff30; }
.liquid-library #player .control-group { gap:6px; }
.liquid-library #player .control-btn,.liquid-library #player .control-btn.play-btn { width:34px; }
.liquid-library #player .control-btn.play-btn { width:42px; background:#ffffff18; border-radius:50%; }
.liquid-library.radio-mode #player #shuffleBtn,.liquid-library.radio-mode #player #skipBtn { display:none; }
.liquid-library #player .stop-btn svg { width:17px; height:17px; opacity:.8; }
.liquid-library #player #now { background:#0b1f2b27; padding-right:34px; }
.liquid-library #player .np-title { font-size:13px; }
.liquid-library #player .np-meta { color:#ffffff90; font-size:11px; }
.liquid-library #player .music-progress { left:180px; right:185px; bottom:12px; }
.dock-track-more { right:185px; }
.dock-extras { gap:13px; }
.dock-volume input { background:#233c4be6; padding:8px; border:1px solid #ffffff40; width:116px; height:34px; border-radius:10px; }
.library-rail { width:60px; padding:10px 6px; left:-80px; gap:6px; background:linear-gradient(145deg,#ffffff1a,#ffffff05),var(--surface); }
.library-rail a,.library-rail button { width:46px; height:46px; }
.library-rail svg { width:23px; height:23px; }
.liquid-secondary .main-area { overflow:auto; scrollbar-width:thin; scrollbar-color:#ffffff30 transparent; }
.liquid-secondary .page-wrap { height:auto; padding-bottom:18px; }
.liquid-secondary .welcome-row { margin:0 0 24px; gap:16px; }
.liquid-secondary .welcome-row h1 { font-size:28px; font-weight:600; letter-spacing:-.045em; }
.liquid-secondary .welcome-row p { color:#ffffff90; font-size:12px; margin-top:7px; }
.liquid-secondary .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.liquid-secondary .settings-card,.liquid-secondary .library-card { padding:22px; border:1px solid #ffffff18; border-radius:18px; box-shadow:none; background:#ffffff06; backdrop-filter:none; -webkit-backdrop-filter:none; }
.liquid-secondary .card-title { gap:12px; margin-bottom:23px; }
.liquid-secondary .card-title h2 { font-size:17px; font-weight:500; }
.liquid-secondary .card-title p { font-size:11px; }
.liquid-secondary .title-icon { background:#ffffff12; border-color:#ffffff14; color:#fff; border-radius:12px; }
.liquid-secondary label { font-size:12px; color:#ffffffaf; gap:7px; }
.liquid-secondary input,.liquid-secondary select { background:var(--field); border-color:#ffffff18; border-radius:10px; padding:11px 12px; font-size:13px; }
.liquid-secondary button { font-size:12px; padding:10px 17px; }
.liquid-secondary .history-item { padding:13px 10px; border:0; border-bottom:1px solid #ffffff10; border-radius:10px; background:none; }
.liquid-secondary .history-item:hover { background:#ffffff08; }
.liquid-secondary .history-title { font-size:14px; font-weight:500; }
.liquid-secondary .history-toolbar { gap:14px; }
.liquid-secondary .history-filters { flex-wrap:wrap; }
.liquid-secondary .history-thumb { width:54px; height:54px; border-radius:10px; }
.liquid-secondary .history-actions { gap:6px; }
.liquid-secondary .history-actions button { padding:7px 11px; font-size:11px; }
.liquid-secondary .user-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
.modal { background:#08142355; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.modal-card { background:linear-gradient(135deg,#ffffff12,#ffffff05),rgba(29,41,55,.94); border-color:#ffffff2c; border-radius:23px; padding:26px; }
.modal-head h2 { font-size:20px; font-weight:500; }
.modal-actions button { font-size:13px; }
.toast { background:rgba(30,46,58,.94); border-color:#ffffff28; font-size:13px; border-radius:16px; }
.loginbox { position:relative; background:linear-gradient(135deg,#ffffff17,#ffffff05),var(--surface); border-color:#ffffff3a; border-radius:26px; padding:32px; box-shadow:0 25px 85px #0814233a,inset 0 1px 0 #ffffff27; }
.loginbox h1 { font-size:28px; font-weight:600; }
.loginbox label { font-size:12px; }
.loginbox input { background:var(--field); border-color:#ffffff24; }
.loginbox .login-btn { font-size:14px; padding:12px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #d8f5e8; outline-offset:3px; }
@media(max-width:1200px) {
  .liquid-library .app-shell { grid-template-columns:210px minmax(0,1fr); width:calc(100% - 124px); }
  .liquid-library .sidebar { padding:24px 12px 18px; }
  .liquid-library .main-area { padding:24px 24px 32px; }
  .library-brand h2 { font-size:21px; }
  .library-rail { left:-70px; }
  .liquid-library .library-radio-grid { gap:20px; }
  .library-sheet .stats-grid,.library-sheet .audience-grid { grid-template-columns:1fr; }
  .liquid-secondary .settings-grid { grid-template-columns:1fr; }
}
@media(max-width:900px) {
  .liquid-library .app-shell { display:grid; width:calc(100% - 32px); height:calc(100dvh - 155px); min-height:420px; max-height:none; margin:16px auto 135px; grid-template-columns:190px minmax(0,1fr); transform:none; }
  .liquid-library .main-area { padding:23px 20px 28px; }
  .library-heading .status { display:none; }
  .library-heading h1 { font-size:25px; }
  .library-heading { margin-bottom:17px; }
  .liquid-library .library-radio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
  .library-radio-search { flex-wrap:wrap; gap:10px; margin-bottom:18px; }
  .library-radio-search .radio-own { margin-left:2px; }
  .library-radio-search #radioFilter { flex-basis:100%; }
  .workspace-tabs { margin-bottom:18px; }
  .library-rail { top:auto; bottom:-112px; left:50%; width:auto; transform:translateX(-50%); display:flex; padding:6px 10px; gap:6px; }
  .liquid-library #player.now-card { bottom:-37px; width:calc(100% - 14px); height:68px; padding:9px 12px; gap:12px; }
  .liquid-library #player .music-progress { left:150px; right:170px; bottom:11px; }
  .dock-track-more { right:170px; }
  .dock-extras { gap:6px; }
}
@media(max-width:600px) {
  .liquid-library .app-shell { width:calc(100% - 20px); margin-top:10px; height:calc(100dvh - 150px); grid-template-columns:1fr; border-radius:23px; }
  .liquid-library .sidebar { display:none; }
  .liquid-library .main-area { padding:21px 18px 26px; }
  .library-heading h1 { font-size:25px; }
  .library-heading #radioSummary { font-size:10px; }
  .library-heading .library-sort,.header-add-station { width:29px; height:29px; }
  .library-heading { gap:8px; }
  .workspace-tabs { align-self:stretch; }
  .workspace-tabs button { flex:1; }
  .liquid-library .library-radio-grid { gap:20px 16px; }
  .library-radio-grid .station-artwork { border-radius:13px; padding:20%; }
  .library-radio-grid .station-play b { font-size:12px; }
  .liquid-library #player.now-card { padding:8px; gap:8px; }
  .liquid-library #player .control-group { gap:0; }
  .liquid-library #player .control-btn { width:29px; }
  .liquid-library #player .control-btn.play-btn { width:35px; height:38px; }
  .liquid-library #player .np-title { font-size:11px; }
  .liquid-library #player .np-meta { font-size:10px; }
  .liquid-library #player #now { padding-right:6px; }
  .liquid-library #player .music-progress { left:100px; right:45px; }
  .dock-extras { gap:0; }
  .dock-settings-button { display:grid; }
  .dock-extras .dock-queue-button { display:none; }
  .library-rail { gap:3px; }
  .library-rail button,.library-rail a { width:40px; height:40px; }
  .library-sheet .stats-grid,.library-sheet .audience-grid { grid-template-columns:1fr; }
  .library-sheet .glass-card { padding:16px; }
  .library-sheet .search-card { padding:5px 6px 5px 10px; gap:6px; }
  .library-sheet .search-card input { font-size:12px; }
  .library-sheet .search-card button { padding:9px 11px; }
  .liquid-secondary .user-form { grid-template-columns:1fr; }
  .liquid-secondary .settings-card,.liquid-secondary .library-card { padding:17px; }
  .liquid-secondary .history-item { flex-wrap:wrap; }
  .liquid-secondary .welcome-row { align-items:flex-start; }
  .loginbox { padding:27px 23px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .liquid-library .app-shell,.loginbox { background:#263645f5; } }

.library-heading .status { flex:none; width:auto; max-width:155px; }
.library-heading .status span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-is-panel .stats-grid:not(.sheet-section-hidden) { display:grid; }
.liquid-library:not(.browser-listening-active) #player.is-playing.view-other-mode .ic-play { display:none; }
.liquid-library:not(.browser-listening-active) #player.is-playing.view-other-mode .ic-pause { display:block; }
@media(min-width:1600px) { .liquid-library .library-radio-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }

.liquid-library .library-content .library-sheet .search-card { margin:0; height:auto; min-height:46px; }
.liquid-library .library-content .library-sheet .search-card > button { width:auto; min-width:78px; height:32px; padding:7px 13px; font-size:12px; background:#ffffff24; border:1px solid #ffffff20; border-radius:9px; }
.liquid-library .library-content .library-sheet .search-card > button::after { content:none; }
.library-sheet .queue-list > p { padding:40px 18px; margin:8px 0 0; border:1px dashed #ffffff20; border-radius:16px; background:#ffffff04; color:#ffffffaa; font-size:13px; text-align:center; }
.library-sheet .queue-list > p::before { content:'♫'; display:block; margin-bottom:12px; color:#ffffff80; font-size:32px; line-height:1; }
.library-sheet .queue-list > p::after { content:'Найдите трек выше или вставьте ссылку на YouTube'; display:block; margin-top:9px; font-size:11px; color:#ffffff70; }

/* The viewport and shell stay still; only content lists/panes may scroll. */
html:has(body.liquid-library) { height:100%; overflow:hidden; }
body.liquid-library { height:100dvh; min-height:0; overflow:hidden; }
.liquid-library .app-shell { min-height:0; height:min(850px,calc(100dvh - 128px)); max-height:calc(100dvh - 128px); }
.liquid-library .main-area { min-height:0; min-width:0; }
.liquid-library .library-content { min-height:0; min-width:0; overflow:hidden; }
.liquid-library .library-heading,.liquid-library .workspace-tabs { flex-shrink:0; }
.liquid-library .library-sheet { display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; }
.liquid-library .library-sheet[hidden] { display:none!important; }
.library-sheet .sheet-heading { flex:none; }
.library-sheet .sheet-body { flex:1; min-height:0; min-width:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.library-sheet:has(#youtubeQueue:not(.sheet-section-hidden):not([hidden])) .sheet-body { display:flex; flex-direction:column; overflow:hidden; }
.library-sheet .topbar { flex:none; min-width:0; }
.library-sheet #youtubeQueue { flex:1; min-height:0; max-height:none; min-width:0; overflow:hidden; }
.library-sheet #youtubeQueue .card-head { flex:none; }
.library-sheet #queue.queue-list { flex:1; min-height:0; max-height:none; min-width:0; margin:0; padding:0 7px 8px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.library-sheet .qitem { min-width:0; max-width:100%; }
.liquid-library .library-radio-grid { overflow-x:hidden; overscroll-behavior:contain; }
.liquid-library .main-area,.liquid-library .sidebar,.liquid-library .library-sheet,.liquid-library .sheet-body,.liquid-library .queue-list,.liquid-library .library-radio-grid,.liquid-library .modal-card,.liquid-library #suggestions {
  scrollbar-width:thin; scrollbar-color:rgba(235,244,255,.3) transparent;
}
.liquid-library ::-webkit-scrollbar { width:6px; height:6px; }
.liquid-library ::-webkit-scrollbar-track { background:transparent; }
.liquid-library ::-webkit-scrollbar-thumb { background:rgba(235,244,255,.28); border:1px solid transparent; background-clip:padding-box; border-radius:20px; }
.liquid-library ::-webkit-scrollbar-thumb:hover { background:rgba(235,244,255,.48); }
.liquid-library ::-webkit-scrollbar-corner { background:transparent; }
.liquid-library ::-webkit-scrollbar-button { display:none; width:0; height:0; }
.header-add-station { display:grid; place-items:center; line-height:1; font-size:0; padding:0; }
.header-add-station svg { width:16px; height:16px; display:block; }
@media(max-width:900px) { .liquid-library .app-shell { height:calc(100dvh - 155px); max-height:calc(100dvh - 155px); min-height:0; } }
@media(max-width:600px) { .liquid-library .app-shell { height:calc(100dvh - 150px); max-height:calc(100dvh - 150px); min-height:0; } }

/* Compact floating player: artwork, title, transport and volume. */
.liquid-library #player.now-card { width:min(600px,calc(100% - 32px)); height:64px; padding:9px 16px; gap:16px; border-radius:23px; bottom:-34px; }
.liquid-library #player .player-controls { order:2; }
.liquid-library #player #now { order:1; flex:1; min-width:0; background:none; padding:0; }
.liquid-library #player .dock-extras { order:3; }
.liquid-library #player .dock-track-more,.liquid-library #player .dock-settings-button,.liquid-library #player .dock-queue-button { display:none!important; }
.liquid-library #player .control-group { gap:4px; }
.liquid-library #player .mini-switch { width:31px; height:38px; }
.liquid-library #player .mini-switch svg { width:19px; height:19px; }
#miniPrev svg { transform:rotate(180deg); }
.liquid-library #player .control-btn.play-btn { width:39px; height:39px; }
.liquid-library #player .np-art { width:38px; height:38px; }
.liquid-library #player .np-meta { max-width:100%; font-size:10px; }
.liquid-library #player .music-progress { left:65px; right:168px; bottom:8px; }
.mini-advanced-controls { display:flex; align-items:center; gap:8px; margin-top:20px; }
.mini-advanced-controls .control-btn { width:38px; height:38px; }
@media(max-width:600px) {
  .liquid-library #player.now-card { width:calc(100% - 12px); padding:9px 11px; gap:8px; }
  .liquid-library #player .np-art { width:32px; height:32px; }
  .liquid-library #player .np { gap:7px; }
  .liquid-library #player .np-title { font-size:11px; }
  .liquid-library #player .mini-switch { width:27px; }
  .liquid-library #player .dock-volume { display:none; }
  .liquid-library #player .music-progress { left:50px; right:111px; }
}

/* Radio actions share the same centered icon geometry. */
.library-radio-grid .station-pin,.library-radio-grid .station-remove { position:absolute; z-index:2; top:8px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid #ffffff24; border-radius:9px; line-height:1; background:#1d2b3d99; color:#ffffffbf; box-shadow:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.library-radio-grid .station-pin { left:8px; }
.library-radio-grid .station-remove { right:8px; }
.library-radio-grid .station-pin svg,.library-radio-grid .station-remove svg { display:block; width:16px; height:16px; flex:none; }
.library-radio-grid .station-pin:hover,.library-radio-grid .station-remove:hover { color:#fff; background:#ffffff26; }
.library-radio-grid .station-remove:hover { color:#ffd0db; }
.library-radio-grid .is-favorite .station-pin { color:#ffe6a4; background:#594c537d; border-color:#ffe6a455; }
.library-radio-grid .station-artwork { position:relative; }
.library-radio-grid .is-favorite .station-artwork::after { content:''; position:absolute; inset:0; padding:2px; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg,#8cf3d9,#bda2ff 52%,#ffb4d1); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; }
.recent-playlists { flex:none; min-width:0; margin:0 0 20px; }
.recent-playlists h2 { font-size:13px; font-weight:500; color:#ffffffbd; margin:0 0 12px; }
.recent-playlist-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.recent-playlist { min-width:0; display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #ffffff17; border-radius:12px; text-align:left; background:#ffffff07; box-shadow:none; }
.recent-playlist:hover { background:#ffffff16; border-color:#ffffff32; }
.recent-playlist-art { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:8px; background:#ffffff10; overflow:hidden; }
.recent-playlist-art img { width:100%; height:100%; object-fit:cover; }
.recent-playlist-art svg { width:20px; height:20px; color:#ffffffb5; }
.recent-playlist-info { min-width:0; }
.recent-playlist-info b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:500; }
.recent-playlist-info small { display:block; margin-top:5px; font-size:10px; color:#ffffff80; }
.recent-message { grid-column:1/-1; padding:12px 0; margin:0; color:#ffffff80; font-size:11px; }
@media(max-width:600px) { .recent-playlists { margin-bottom:15px; }.recent-playlist-grid { gap:7px; }.recent-playlist { flex-direction:column; align-items:flex-start; padding:9px; gap:8px; }.recent-playlist-art { width:30px; height:30px; }.recent-playlist-info { max-width:100%; }.recent-playlist-info b { font-size:10px; }.recent-playlist-info small { font-size:9px; margin-top:4px; } }

.navigation-content { min-width:0; min-height:0; }
.navigation-content[hidden] { display:none!important; }
.main-area[aria-busy="true"] { cursor:progress; }

.library-heading .status[role="button"] { cursor:pointer; }
.library-heading .status[role="button"]:hover { background:#ffffff18; }

/* Artwork light spills beyond the glass dock without intercepting controls. */
.liquid-library #player.now-card { isolation:isolate; }
.liquid-library #player.now-card::before { content:''; position:absolute; inset:-8px -12px; z-index:-1; border-radius:inherit; background-image:var(--mini-cover,none); background-position:center; background-size:48px 48px; background-repeat:repeat; filter:blur(24px) saturate(1.7); opacity:0; pointer-events:none; transition:opacity .45s ease; }
.liquid-library #player.now-card.has-cover-glow::before { opacity:.55; }
.liquid-library #player #shuffleBtn:not([hidden]) { display:inline-flex; align-items:center; justify-content:center; width:30px; height:36px; border-radius:11px; flex:none; }
.liquid-library #player #shuffleBtn svg { width:18px; height:18px; }
.liquid-library #player #shuffleBtn.active { color:#dcceff; background:#b298ff2e; box-shadow:inset 0 0 0 1px #d4c1ff55,0 0 12px #b995ff25; }
.liquid-library #player #shuffleBtn.active::after { content:''; position:absolute; bottom:2px; width:3px; height:3px; border-radius:50%; background:currentColor; }
.liquid-library #player #shuffleBtn { position:relative; }
.liquid-library #player .music-progress { right:200px; }
@media(max-width:600px) {
 .liquid-library #player #shuffleBtn:not([hidden]) { width:27px; }
 .liquid-library #player .music-progress { right:142px; }
}
@media(prefers-reduced-motion:reduce) { .liquid-library #player.now-card::before { transition:none; } }

.liquid-library #player #miniRepeat { display:inline-flex; align-items:center; justify-content:center; width:30px; height:36px; border-radius:11px; flex:none; }
.liquid-library #player #miniRepeat svg { width:20px; height:20px; }
.liquid-library #player #miniRepeat.active { color:#dcceff; background:#b298ff2e; box-shadow:inset 0 0 0 1px #d4c1ff55; }
.liquid-library #player .music-progress { right:234px; }
@media(max-width:600px) { .liquid-library #player #miniRepeat { width:27px; } .liquid-library #player .music-progress { right:173px; } }

/* Full immersion: cover tint and continuous alternating diagonal text bands. */
.library-brand .immersion-toggle { display:block; margin-top:10px; padding:0; max-width:180px; border:0; border-radius:0; background:none; box-shadow:none; text-align:left; font-size:10px; line-height:1.5; color:#ffffffa6; cursor:pointer; }
.library-brand .immersion-toggle:hover,.library-brand .immersion-toggle[aria-pressed="true"] { color:#fff; background:none; text-shadow:0 0 12px #ffffff40; }
.immersion-mobile-toggle { margin-top:18px; font-size:12px; }
body.immersion-active .ambient { background:#151824; }
body.immersion-active .ambient-video { display:none!important; }
.immersion-scene { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; background:#151824; }
.immersion-colors { position:absolute; inset:-80px; background-image:var(--immersion-cover,none); background-size:72px 72px; background-repeat:repeat; filter:blur(42px) saturate(1.6) brightness(.65); opacity:.9; }
.immersion-stripes { position:absolute; left:50%; top:50%; width:max(210vw,210vh); height:max(210vw,210vh); transform:translate(-50%,-50%) rotate(-28deg); display:flex; flex-direction:column; justify-content:space-evenly; }
.immersion-lane { flex:none; width:100%; overflow:visible; color:#ffffff28; font-size:clamp(24px,3vw,48px); line-height:1.3; font-weight:700; letter-spacing:.035em; white-space:nowrap; }
.immersion-track { display:flex; width:max-content; animation:immersion-drift 150s linear infinite; will-change:transform; }
.immersion-group { display:flex; flex:none; }
.immersion-group span { flex:none; padding-right:70px; }
.immersion-lane:nth-child(even) .immersion-track { animation-direction:reverse; }
.immersion-scene.is-paused .immersion-track { animation-play-state:paused; }
@keyframes immersion-drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce) { .immersion-track { animation:none; will-change:auto; } }

/* Keep rounded clipping away from the queue heading and normalize rail controls. */
.liquid-library .library-sheet #youtubeQueue { border-radius:0; }
.liquid-library .library-sheet #youtubeQueue .card-head { padding:5px 7px 4px; }
.liquid-library .library-rail button,.liquid-library .library-rail a { display:grid; place-items:center; padding:0; line-height:1; flex:none; }
.liquid-library .library-rail svg { display:block; flex:none; margin:0; }

/* Music effects are confined to full immersion. */
.liquid-library.immersion-active .app-shell { box-shadow:inset 0 1px 0 #ffffff35,0 24px 80px #06101c3d,0 0 calc(12px + var(--audio-strength,0) * 42px) calc(var(--audio-strength,0) * 10px) hsl(var(--audio-hue,240) 85% 72% / calc(.06 + var(--audio-strength,0) * .38)); }
.liquid-library.immersion-active .app-shell::after { content:''; position:absolute; inset:-1px; padding:2px; border-radius:inherit; background:linear-gradient(120deg,#83cfff,#d997ff,#ffb191,#8bf0ce,#83cfff); background-size:300% 300%; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:calc(.18 + var(--audio-strength,0) * .8); animation:immersion-border 12s ease-in-out infinite alternate; pointer-events:none; z-index:25; }
@keyframes immersion-border { from { background-position:0% 50%; } to { background-position:100% 50%; } }
/* Text follows a slower audio envelope; its baseline and size stay steady. */
.immersion-active .immersion-lane { color:rgb(255 255 255 / calc(.13 + var(--text-strength,0) * .18)); text-shadow:0 0 calc(var(--text-strength,0) * 16px) hsl(var(--audio-hue,240) 90% 80% / .5); transform:none; }
/* Compact icon buttons keep their geometry on every workspace page. */
.liquid-library button { line-height:1.25; }
.liquid-library .icon-btn:not(.sheet-close),.liquid-library .history-actions .history-delete,.liquid-library .qitem .icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px; padding:0; flex:none; line-height:1; }
.liquid-library .history-actions .history-delete svg,.liquid-library .qitem .icon svg { display:block; width:17px; height:17px; margin:0; flex:none; }
.liquid-library .history-actions { align-items:center; }
.liquid-library .history-actions button:not(.history-delete) { display:inline-flex; align-items:center; justify-content:center; min-height:34px; line-height:1.2; }
.liquid-library .library-rail button,.liquid-library .library-rail a { padding:0; line-height:1; }
@media(prefers-reduced-motion:reduce) { .liquid-library.immersion-active .app-shell::after { animation:none; } .immersion-active .immersion-lane { transform:none; text-shadow:none; } }

/* Outer shadows naturally exclude the player interior and fade without a mask edge. */
.liquid-library #player.now-card::before { content:none; }
.liquid-library #player.now-card.has-cover-glow { box-shadow:inset 0 1px 0 #ffffff30,0 12px 30px #0a29251a,0 0 32px 7px rgb(var(--mini-glow-rgb,160 140 210) / .42); }

/* The shell outline must not run through the floating mini-player. */
.liquid-library.immersion-active .app-shell { --dock-outline-cut:min(302px,calc(50% - 14px)); border-bottom-color:transparent; }
.liquid-library.immersion-active .app-shell::after { z-index:1; clip-path:polygon(0 0,100% 0,100% 100%,calc(50% + var(--dock-outline-cut)) 100%,calc(50% + var(--dock-outline-cut)) calc(100% - 36px),calc(50% - var(--dock-outline-cut)) calc(100% - 36px),calc(50% - var(--dock-outline-cut)) 100%,0 100%); }
.liquid-library #player.now-card { z-index:30; }
@media(max-width:600px) { .liquid-library.immersion-active .app-shell { --dock-outline-cut:calc(50% - 4px); } }

/* Plain, steady diagonal lettering, independent of audio effects. */
.immersion-active .immersion-lane,.immersion-active .immersion-lane:nth-child(even) { color:#ffffff28; text-shadow:none; transform:none; }