:root{color-scheme:dark;--background:#0c0e10;--panel:#141719;--panel-hover:#22272a;--text:#eef1ed;--text-secondary:#939c98;--border:#292f2e;--accent:#8ab4f8;font-family:Inter,"Segoe UI","Yu Gothic UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--text);font-size:14px;min-width:1100px}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:transparent;border-radius:9px;padding:10px 13px}button:hover{background:var(--panel-hover)}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,select{color:var(--text);background:#202526;border:1px solid var(--border);border-radius:9px;padding:12px}input[type=range]{padding:0;accent-color:var(--accent);width:100%;height:4px;cursor:pointer}h1,h2,h3,p{margin-top:0}h1{font-size:30px;letter-spacing:-.8px}h2{font-size:19px}h3{font-size:15px}.top{height:88px;display:flex;align-items:center;gap:20px;padding:0 26px}.brand{width:202px;display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-size:27px;font-weight:700;letter-spacing:-1px}.brand img{width:31px}.dot{color:var(--accent)}.icon{font-size:24px;padding:5px 11px}.top>.icon{background:#202526;width:44px;height:44px}.search{max-width:600px;width:44%;display:flex;align-items:center;border:1px solid var(--border);background:#1c2022;border-radius:30px;padding:5px 9px 5px 18px;gap:12px}.search>span{font-size:27px;color:var(--text-secondary)}.search input{border:0;background:transparent;flex:1;min-width:0;padding:8px 0;outline:none}.search button{border-left:1px solid #3c4440;border-radius:0;font-size:24px;padding:0 13px}.personal{margin-left:auto;font-size:9px;letter-spacing:1.5px;color:var(--text-secondary)}.profile{width:36px;height:36px;border-radius:50%}.layout{height:calc(100vh - 100px);min-height:620px;display:grid;grid-template-columns:240px minmax(440px,1fr) 320px;gap:10px;padding:0 12px 12px}.panel{background:var(--panel);border-radius:12px}.left{padding:24px 16px 16px;display:flex;flex-direction:column;overflow:hidden}.left nav{display:grid;gap:5px}.left nav button{text-align:left;font-size:20px;padding:12px 16px;color:var(--text-secondary)}.left nav span{font-size:14px;margin-left:14px}.active{background:var(--panel-hover)!important;color:var(--accent)!important}.library-heading{display:flex;align-items:center;justify-content:space-between;margin-top:0}.library-heading h2{font-size:15px;margin:0 0 0 8px}.filters{display:flex;flex-wrap:nowrap;gap:5px;margin:16px 0 22px}.filters button{font-size:11px;padding:7px 6px;background:#222728;border-radius:16px}#library{overflow:auto;flex:1}.library-item{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:9px 6px}.library-item img,.library-item .cover{width:42px;height:42px;flex-shrink:0;border-radius:7px}.library-item small{display:block;color:var(--text-secondary);margin-top:5px}.library-item strong{font-size:12px;display:block;overflow-wrap:anywhere}.sidebar-foot{border-top:1px solid var(--border);padding:18px 0 0;font-size:10px;color:var(--text-secondary)}.status-dot{display:inline-block;background:var(--accent);width:5px;height:5px;border-radius:50%;margin-right:7px}.center{padding:34px 30px;overflow:auto;background:var(--panel)}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--text-secondary)}.welcome{margin:0 0 8px;line-height:1}.subtitle{color:var(--text-secondary);margin-bottom:36px;font-size:13px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 18px;gap:10px}.section-head h2{margin:0}.section-head button{font-size:12px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:20px}.card{text-align:left;min-width:0;padding:10px;background:#191e1c}.cover{background:#2b3930;display:grid;place-items:center;color:#a9c39d;font-size:42px;border-radius:9px}.card .cover,.card img{aspect-ratio:1;width:100%;object-fit:cover;margin-bottom:14px;border-radius:8px}.card strong{display:block;overflow-wrap:anywhere;margin-bottom:6px}.card small{color:var(--text-secondary)}.empty{border:1px dashed #39443c;border-radius:12px;padding:40px 24px;text-align:center;color:var(--text-secondary);margin-top:24px}.empty .note{font-size:40px;color:var(--accent);margin-bottom:12px}.empty h2{color:var(--text);font-size:18px}.primary{background:var(--accent);color:#152338;font-weight:600}.primary:hover{background:#a8c8fb}.empty button{margin-top:14px}.playlist-hero{display:flex;gap:25px;align-items:center;margin-bottom:28px}.playlist-hero>.cover,.playlist-hero>img{width:135px;height:135px;border-radius:10px;object-fit:cover}.playlist-hero h1{margin:12px 0}.playlist-hero p{color:var(--text-secondary)}table{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}th{font-size:10px;letter-spacing:1px;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);padding:13px 7px}td{padding:15px 7px;font-size:12px;overflow-wrap:anywhere}th:first-child{width:35px}th:nth-child(3){width:22%}th:nth-child(4){width:62px}th:last-child{width:100px}tbody tr:hover{background:var(--panel-hover)}td button{padding:4px 6px}td .song-title{text-align:left;width:100%;font-weight:600}.right{padding:25px 22px;overflow:auto}.section-label{font-size:11px;letter-spacing:1.5px;font-weight:600;display:flex;justify-content:space-between;margin-bottom:28px}.section-label span{color:var(--accent)}.player-frame{width:200px;height:200px;margin:0 auto 27px;background:#202924;border-radius:3px;overflow:hidden}#player{width:200px;height:200px}.player-placeholder{height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent);font-size:44px}.player-placeholder small{font-size:11px;line-height:1.8;color:var(--text-secondary);text-align:center;margin-top:14px}.track-info h2{margin:10px 0 7px;font-size:20px;overflow-wrap:anywhere}.track-info p{font-size:12px;color:var(--text-secondary);margin-bottom:24px}.times{display:flex;justify-content:space-between;font-size:10px;color:var(--text-secondary);margin-top:10px}.transport{display:flex;align-items:center;justify-content:center;gap:20px;margin:20px 0}.transport .play{background:var(--accent);color:#152338;border-radius:50%;width:52px;height:52px;font-size:20px}.volume{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:10px}.volume input{flex:1}.secondary-controls{display:flex;justify-content:space-around;margin-top:20px;font-size:23px}.up-next{border-top:1px solid var(--border);padding-top:22px;margin-top:22px}.up-next p{font-size:12px;margin-top:12px;color:var(--text-secondary)}.muted{color:var(--text-secondary);font-size:11px;line-height:1.8}.menu{background:#262e29;padding:6px;border-radius:9px}.menu button{display:block;width:100%;text-align:left;font-size:12px}dialog{color:var(--text);background:#1b211e;border:1px solid #38453b;border-radius:16px;padding:28px;width:440px;max-height:90vh}dialog::backdrop{background:#000a}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialog-heading h2{margin:0}.dialog-heading button{font-size:24px}.field{display:block;font-size:12px;color:var(--text-secondary);margin:15px 0}.field input,.field select{display:block;width:100%;margin-top:8px}dialog footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}#form-message{font-size:12px;color:#e1c6a4;line-height:1.7}#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);max-width:600px;background:#344136;border:1px solid #5d705e;padding:14px 22px;border-radius:10px;box-shadow:0 8px 30px #0005;z-index:20}.text-small{font-size:12px;color:var(--text-secondary)}

.top>.icon{width:48px;height:48px;border-radius:50%;background:#1c2022;border:1px solid var(--border)}.top>.icon:hover{background:var(--panel-hover)}.profile{margin-left:auto}.search button{border:0;border-radius:50%;width:36px;height:36px;padding:0;flex-shrink:0}.search:focus-within{border-color:var(--accent)}.filters{gap:3px}.filters button{white-space:nowrap;flex:1}.cover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;overflow:hidden;background:#202832}.cover-grid img,.card .cover-grid img,.library-item .cover-grid img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;aspect-ratio:auto;margin:0;border-radius:0}.thumbnail-fallback{background:#26313f;width:100%;height:100%}.song-thumbnail{object-fit:cover;aspect-ratio:1}.song-title{display:flex;align-items:center;gap:12px}.song-title img,.song-title .thumbnail-fallback{width:42px;height:42px;flex-shrink:0;border-radius:5px}.song-title span{overflow-wrap:anywhere}.playlist-hero>div:last-child{min-width:0}.playlist-hero h1{margin:0 0 12px;overflow-wrap:anywhere}.playlist-hero p{margin:0}.playlist-hero>.cover{flex-shrink:0}.playlist-controls{position:relative}.playlist-menu{position:absolute;right:0;top:100%;z-index:2;min-width:200px;border:1px solid var(--border);background:#20262e}.playlist-controls>button:last-of-type{font-size:24px;line-height:20px}.right{padding-top:24px}.track-info h2{margin-top:0}.player-frame{margin-bottom:20px}.up-next h2{font-size:13px;margin-bottom:12px}.queue-song{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 4px}.queue-song img,.queue-song .thumbnail-fallback{width:44px;height:44px;flex-shrink:0;border-radius:5px}.queue-song>span{min-width:0}.queue-song strong,.queue-song small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-song strong{font-size:12px}.queue-song small{font-size:11px;color:var(--text-secondary);margin-top:5px}#player-message:empty{display:none}td:first-child{width:30px}td:nth-child(3){width:22%}td:nth-child(4){width:60px}td:last-child{width:100px}.card{background:#191d22}.cover{color:var(--accent)}dialog{background:#1b2027;border-color:var(--border)}#toast{background:#273449;border-color:#465f83}

.player-frame{background:#20262e}.search{position:relative}.search button{position:relative}.search button::before{content:"";position:absolute;left:-7px;top:8px;height:20px;width:1px;background:var(--border);pointer-events:none}.library-heading>.icon{border-radius:50%}

/* Align the home greeting with the library heading at 34px from the panel top. */
.library-heading{min-height:40px}.library-heading h2{line-height:20px}

/* Fixed desktop regions: only library/content/queue scroll. */
:root{--background:#101112;--panel:#18191b;--panel-hover:#27282b;--border:#303136;--text:#f1f1f3;--text-secondary:#a1a2a8}
body{height:100dvh;overflow:hidden}.top{position:relative;height:76px}.brand{width:auto}.top>.icon{position:absolute;left:calc(50% - min(300px,27vw) - 64px)}.search{position:absolute;left:50%;transform:translateX(-50%);width:54vw;max-width:600px;background:#202124}.layout{height:calc(100dvh - 76px);min-height:0;grid-template-columns:240px minmax(440px,1fr) 320px}.panel{min-height:0;min-width:0}.left{padding-top:24px}.center{padding-top:24px}.library-heading{height:30px;min-height:30px;align-items:flex-start}.library-heading h2{line-height:30px}.library-heading>.icon{height:30px;line-height:30px;padding:0 8px}.welcome{font-size:30px;line-height:30px;margin:0 0 8px}.section-head .add-only{font-size:19px;font-weight:600;line-height:24px;width:34px;height:34px;padding:5px;border-radius:50%}.section-head h2{font-size:19px;line-height:24px}.add-only{border-radius:50%}
.right{display:flex;flex-direction:column;padding:12px 20px;overflow:hidden;gap:0}.right>*{flex-shrink:0}.player-frame{margin:0 auto 10px;width:200px;height:200px}.track-info h2{font-size:18px;line-height:24px;margin:0 0 3px}.track-info p{line-height:18px;height:18px;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.times{margin-top:0;line-height:16px}.transport{margin:6px 0;gap:20px}.transport .play{width:44px;height:44px}.volume{height:24px}.secondary-controls{margin:2px 0 0;height:34px;align-items:center}.secondary-controls button{padding:3px 12px}.up-next{flex:1 1 0;min-height:0;overflow:auto;margin-top:8px;padding-top:8px}.up-next h2{margin:0 0 4px}.up-next p{margin:8px 0}.right #player-message{max-height:38px;overflow:auto;margin:4px 0 0;line-height:16px}
.library-item>div:last-child{min-width:0;flex:1}.library-item>img,.library-item>.cover{width:56px;height:56px}.song-title>img,.song-title>.thumbnail-fallback{width:60px;height:60px}.queue-song>img,.queue-song>.thumbnail-fallback{width:56px;height:56px}.queue-song>span{flex:1}.cards{grid-template-columns:repeat(auto-fill,180px)}.playlist-hero>.cover,.playlist-hero>img{width:160px;height:160px}.thumbnail-fallback{background:#282a2e}.card{background:#202124}.filters button{background:#27282b}
.marquee{display:block;min-width:0;overflow:hidden;white-space:nowrap!important;text-overflow:clip!important;position:relative}.marquee-text{display:inline-block;white-space:nowrap!important;overflow-wrap:normal!important;vertical-align:top}.marquee-copy{position:absolute;left:var(--travel);top:0}.is-scrolling>.marquee-text{animation:title-scroll var(--speed) linear infinite}.song-title>.marquee{flex:1}.track-info .marquee{width:100%}@keyframes title-scroll{0%,12%{transform:translateX(0)}100%{transform:translateX(calc(-1 * var(--travel)))}}
input[type=range]{appearance:none;-webkit-appearance:none;height:16px;border:0;border-radius:0;background:transparent;outline-offset:2px}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#c7c9ce 0 var(--fill,0%),#45464b var(--fill,0%) 100%)}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:0;height:0;border:0}input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:#45464b}input[type=range]::-moz-range-progress{height:3px;border-radius:3px;background:#c7c9ce}input[type=range]::-moz-range-thumb{width:0;height:0;border:0;background:transparent}
dialog{background:#1c1d20;border:1px solid #37383d;padding:22px;max-height:calc(100dvh - 32px);overflow:hidden}dialog form{display:flex;flex-direction:column;max-height:calc(100dvh - 78px)}#fields{min-height:0;overflow:auto;padding:0 3px}.dialog-heading{margin-bottom:10px;flex-shrink:0}.field{margin:10px 0;color:#b0b1b7}.field input,.field select{background:#26272b;border-color:#3a3b41;margin-top:6px;padding:10px}.field input:focus,.field select:focus{border-color:var(--accent)}dialog footer{flex-shrink:0;margin-top:14px}#form-message{flex-shrink:0;margin:6px 0 0;color:#bfc8db}.search input{background:transparent}

/* Align visible letter tops despite the headings using different font sizes. */
.library-heading h2{line-height:15px;margin-top:2px}
/* Compact lists and full-width square player. */
.welcome{font-size:22px;line-height:26px;letter-spacing:-.3px}
.player-frame{width:100%;height:auto;aspect-ratio:1;margin:0 0 6px}#player,.player-placeholder{width:100%;height:100%;aspect-ratio:1}.player-frame iframe{display:block;width:100%;height:100%}
.marquee:not(#now-title .marquee){text-overflow:ellipsis!important}.marquee:not(#now-title .marquee)>.marquee-text{display:inline;animation:none}
table{border-collapse:separate;border-spacing:0 2px}td{padding:4px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}tbody tr:hover{background:transparent}tbody tr:hover td{background:var(--panel-hover)}tbody tr.active{background:transparent!important}tbody tr.active td{background:var(--panel-hover)}tbody tr td:first-child{border-radius:8px 0 0 8px}tbody tr td:last-child{border-radius:0 8px 8px 0}.song-title>img,.song-title>.thumbnail-fallback{width:36px;height:36px}.song-title{gap:10px}.song-title:hover{background:transparent}.library-item{padding:6px}.library-item>img,.library-item>.cover{width:40px;height:40px}.queue-song{padding:6px;border-radius:8px}.queue-song>img,.queue-song>.thumbnail-fallback{width:36px;height:36px}
.right{position:relative;padding:8px 20px}.track-info h2{font-size:17px;line-height:22px;margin:0 0 2px}.track-info p{height:16px;line-height:16px;margin:0 0 2px}.right input[type=range]{height:12px}.times{line-height:14px}.transport{margin:2px 0}.transport .play{width:36px;height:36px;font-size:17px}.volume{height:18px}.secondary-controls{height:24px;margin:0;font-size:20px}.secondary-controls button{padding:0 12px}.up-next{flex:0 0 auto;overflow:visible;margin-top:4px;padding-top:0}.up-next summary{list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:26px;cursor:pointer;border-radius:6px}.up-next summary::-webkit-details-marker{display:none}.up-next summary:hover{background:var(--panel-hover)}.queue-chevron{font-size:22px;margin-right:8px}.up-next[open] .queue-chevron{transform:rotate(90deg)}.up-next #up-next{position:absolute;bottom:38px;left:12px;right:12px;max-height:230px;overflow:auto;padding:8px;background:#202124;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0006;z-index:3}.up-next:not([open]) #up-next{display:none}

/* Balanced now-playing spacing. */
.right{padding:20px;border-radius:16px}.player-frame{border-radius:8px;margin-bottom:16px}.track-info h2{margin-bottom:7px}.track-info p{margin-bottom:10px}.library-item.active{background:#293444!important;color:var(--accent)}

/* Supplied PNG alpha masks: original assets preserved, white UI rendering. */
.asset-icon{display:inline-block;width:22px;height:22px;flex-shrink:0;background:#fff;mask:var(--icon-source) center/contain no-repeat;-webkit-mask:var(--icon-source) center/contain no-repeat;vertical-align:middle;pointer-events:none}
.icon-home{--icon-source:url("assets/icons/home.png")}
.icon-play{--icon-source:url("assets/icons/play.png")}
.icon-pause{--icon-source:url("assets/icons/pause.png")}
.icon-next{--icon-source:url("assets/icons/next.png")}
.icon-previous{--icon-source:url("assets/icons/previous.png")}
.icon-volume-low{--icon-source:url("assets/icons/volume-low.png")}
.icon-volume-medium{--icon-source:url("assets/icons/volume-medium.png")}
.icon-volume-muted{--icon-source:url("assets/icons/volume-muted.png")}
.icon-volume-zero{--icon-source:url("assets/icons/volume-zero.png")}
.icon-volume-high{--icon-source:url("assets/icons/volume-high.png")}
.icon-repeat-one{--icon-source:url("assets/icons/repeat-one.png")}
.icon-repeat{--icon-source:url("assets/icons/repeat.png")}
.icon-repeat-one-alt{--icon-source:url("assets/icons/repeat-one-alt.png")}
.icon-shuffle{--icon-source:url("assets/icons/shuffle.png")}
.icon-shuffle-off{--icon-source:url("assets/icons/shuffle-off.png")}
button.with-icon{display:inline-flex;align-items:center;gap:5px}.with-icon .asset-icon,td>.asset-icon{width:15px;height:15px}.top #home{display:grid;place-items:center;padding:0}.top #home .asset-icon{width:25px;height:25px}.transport button{display:grid;place-items:center}.transport .play .asset-icon{width:21px;height:21px}.secondary-controls button{display:grid;place-items:center;height:26px}.secondary-controls button.active .asset-icon{background:var(--accent)}#mute{padding:0;width:22px;height:22px;display:grid;place-items:center;border-radius:5px}#mute .asset-icon{width:20px;height:20px}.brand img{width:40px;height:40px;object-fit:contain}

.icon-repeat-off{--icon-source:url("assets/icons/repeat-off.png")}
/* Filled transport icons and evenly spaced controls. */
.icon-play{--icon-source:url("assets/icons/play-filled.svg")}
.icon-pause{--icon-source:url("assets/icons/pause-filled.svg")}
.icon-next{--icon-source:url("assets/icons/next-filled.svg")}
.icon-previous{--icon-source:url("assets/icons/previous-filled.svg")}
.transport{display:grid;grid-template-columns:44px 44px 44px;justify-content:center;align-items:center;column-gap:24px;margin:10px 0 12px}
.transport button,.transport .play{display:flex;align-items:center;justify-content:center;width:44px;height:40px;min-width:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text)}
.transport button:hover,.transport .play:hover{background:transparent;opacity:.75}
.transport .play .asset-icon{width:28px;height:28px}.transport .play .icon-play{transform:translateX(-1px)}
.transport #previous .asset-icon,.transport #next .asset-icon{width:26px;height:24px}
.volume{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;gap:12px;height:26px;margin:0}
#volume-value{text-align:right;font-variant-numeric:tabular-nums}
.secondary-controls{display:grid;grid-template-columns:44px 44px 44px;justify-content:space-between;align-items:center;margin:12px 0 0;height:32px}
.secondary-controls button{width:44px;height:32px;padding:0;border-radius:8px}.secondary-controls .asset-icon{width:21px;height:21px}
.right{overflow-y:auto;scrollbar-width:thin}.track-info p{margin-bottom:12px}.times{font-variant-numeric:tabular-nums}
@media (max-height:650px){.transport{margin:4px 0;column-gap:24px}.secondary-controls{margin-top:6px}.track-info p{margin-bottom:6px}}

/* Orpheus control alignment and interaction states. */
.with-icon .asset-icon{background:currentColor}tbody tr.active td>.asset-icon{background:var(--accent)}
.secondary-controls button.active{background:transparent!important}.secondary-controls button.active:hover{background:var(--panel-hover)!important}
td:first-child{padding-left:12px;padding-right:2px}
.dialog-heading #close{width:32px;height:32px;display:grid;place-items:center;padding:0;line-height:1;font-size:23px;border-radius:50%}
dialog footer:has(#save[hidden]):has(#cancel[hidden]){display:none}
.search{height:50px;gap:12px;padding:6px 9px 6px 15px;align-items:center}.search input{height:36px;line-height:20px;padding:8px 0}.search-symbol{display:block;width:20px;height:20px;position:relative;flex-shrink:0}.search-symbol::before{content:'';position:absolute;left:1px;top:1px;width:11px;height:11px;border:1.8px solid currentColor;border-radius:50%}.search-symbol::after{content:'';position:absolute;width:8px;height:1.8px;background:currentColor;left:12px;top:13px;transform:rotate(45deg);transform-origin:left center}.search #add{display:grid;place-items:center;line-height:1;padding:0;font-size:24px}
#mute .asset-icon{width:16px;height:16px}.brand img{width:48px;height:48px}.profile{object-fit:cover;border-radius:50%;width:36px;height:36px}
/* Shared center for one/two-digit track numbers and the current-track icon. */
tbody td:first-child{text-align:center;vertical-align:middle;font-variant-numeric:tabular-nums;line-height:20px}
tbody td:first-child>.asset-icon{display:block;margin-inline:auto;transform:translateX(-1px)}
/* Neutral surfaces sampled from the supplied reference. Accent is unchanged. */
:root{--background:#000000;--panel:#121212;--panel-hover:#1f1f1f;--surface-raised:#1f1f1f;--border:#303030}
body,.top{background:var(--background)}
.panel,.center{background:var(--panel)}
.card,.search,.top>#home,.filters button,.menu,.playlist-menu,dialog,.field input,.field select{background:var(--surface-raised)}
.cover,.cover-grid,.thumbnail-fallback,.player-frame{background:var(--surface-raised)}
.card:hover,.top>#home:hover,.filters button:hover{background:#2a2a2a}
#toast{background:var(--surface-raised);border-color:var(--border)}

/* Secondary blue sampled from the supplied palette. */
:root{--accent:#528BFF}
.primary{color:#ffffff}.primary:hover{background:var(--accent);filter:brightness(1.1)}

/* Login uses a native form so browsers can offer password saving. */
body.login-page{min-width:0;min-height:100dvh;height:auto;display:grid;place-items:center;padding:32px;background:#000}
.login-card{width:min(100%,360px);padding:32px;background:var(--panel);border-radius:16px}
.login-card>img{display:block;margin:0 auto 20px}
.login-card h1{text-align:center;font-size:24px;margin:0 0 28px}
.login-card .field{margin-bottom:18px}
.login-card input{width:100%;box-sizing:border-box}
.login-card input[readonly]{color:var(--text-secondary)}
.login-card .primary{width:100%;min-height:44px}
#login-message{font-size:13px;line-height:1.6;color:#ffb4b4}
#login-message:empty{display:none}
.top>.profile-button{margin-left:auto;padding:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.profile-button .profile{margin:0}