/* Dark glass surfaces. Palette variables also drive the audio waveform. */
:root{color-scheme:dark;--ink:#eceaf5;--muted:#9a96aa;--line:rgba(224,216,255,.08);--surface:rgba(30,28,41,.72);--accent:#af9bef;--accent-strong:#9278df;--accent-text:#181322;--accent-rgb:175,155,239;--hero-a:#1e1930;--hero-b:#35284b;--ribbon-light:#e3d6ff;--ribbon-mid:#9c82d0;--ribbon-dark:#493662;--wave-base:#4e465f;--wave-played:#ae97ea;--wave-cursor:#e3d7ff}
:root[data-palette=cobalt]{--accent:#87a9f2;--accent-strong:#628adc;--accent-rgb:135,169,242;--hero-a:#141e31;--hero-b:#253a55;--ribbon-light:#d1e4ff;--ribbon-mid:#7298d7;--ribbon-dark:#2e496d;--wave-base:#354961;--wave-played:#87a9f2;--wave-cursor:#d1e4ff}
:root[data-palette=coral]{--accent:#e6a18d;--accent-strong:#c98472;--accent-rgb:230,161,141;--hero-a:#281b22;--hero-b:#483039;--ribbon-light:#ffdfca;--ribbon-mid:#cc907f;--ribbon-dark:#69444d;--wave-base:#5b444b;--wave-played:#e6a18d;--wave-cursor:#ffe0d3}
body{background:#111015;background-image:radial-gradient(ellipse at 15% 0,rgba(var(--accent-rgb),.045),transparent 55%),radial-gradient(ellipse at 100% 75%,rgba(var(--accent-rgb),.025),transparent 55%);color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline-color:var(--accent)}
.glass{background:rgba(28,27,35,.76);border:1px solid rgba(231,224,255,.08);box-shadow:0 12px 40px #0002,inset 0 1px 0 #ffffff05;backdrop-filter:blur(34px) saturate(120%);-webkit-backdrop-filter:blur(34px) saturate(120%)}
.brand-dot,.brand-mark{color:var(--accent)}.traffic i{background:#c57d78}.traffic i:nth-child(2){background:#bba16d}.traffic i:nth-child(3){background:#8e90ac}.nav-label{color:#716b81}.nav-item{color:#a29caf}.nav-item:hover{background:#ffffff05;color:#d6cfeb}.nav-item.active{background:rgba(var(--accent-rgb),.11);color:var(--accent);box-shadow:inset 0 1px 0 rgba(var(--accent-rgb),.06)}.nav-count{color:#7f778f}.connection-note{background:#ffffff03}.connection-note small,.sidebar-footer{color:#797386}.status-dot{background:#a68b78}.connected .status-dot{background:var(--accent)}
.breadcrumb,.date-badge{color:#817a91}.breadcrumb span{color:#4f485e}.breadcrumb strong{color:#b4a9c7}.search-box{background:#ffffff03;border-color:#ffffff07;color:#8c839f}.search-box input{color:var(--ink)}.search-box input::placeholder{color:#837b93}.search-box kbd{border-color:#ffffff12;color:#777083}.avatar{background:rgba(var(--accent-rgb),.09);border-color:rgba(var(--accent-rgb),.16);color:var(--accent)}.eyebrow{color:var(--accent)}.greeting p{color:#9a91a7}
.hero{background:var(--hero-a);border-color:rgba(var(--accent-rgb),.10);box-shadow:0 18px 45px #0002;color:#f1ecfa}.hero:before{background:radial-gradient(ellipse at 72% 40%,rgba(var(--accent-rgb),.09),transparent 55%),linear-gradient(130deg,var(--hero-a),var(--hero-b))}.hero .eyebrow{color:#b7a7d1}.hero p{color:#b0a3bf}.hero-bottom small,.hero-index{color:#9988af}.live-dot{background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.45)}.primary-button{background:var(--accent);color:var(--accent-text);box-shadow:inset 0 1px 0 #ffffff21}.primary-button:hover{background:var(--ribbon-light)}.wave-art:before{background:radial-gradient(ellipse,rgba(var(--accent-rgb),.12),transparent 68%)}.ribbon{background:conic-gradient(from 35deg,var(--ribbon-light),var(--ribbon-mid),var(--accent),var(--ribbon-dark),var(--ribbon-light),var(--ribbon-mid),var(--accent));box-shadow:inset -28px -23px 24px #120d239e,inset 24px 13px 27px #f1e4ff21,0 20px 50px #0004}.ribbon:after{background:radial-gradient(ellipse at 30% 25%,var(--ribbon-dark),var(--hero-a) 65%);box-shadow:inset 6px 7px 13px #0d0a19,inset -5px -7px 7px rgba(var(--accent-rgb),.3);border-color:rgba(var(--accent-rgb),.2)}.orbit{border-color:rgba(var(--accent-rgb),.065)}.art-caption{color:#b29fc9}
.section-heading p,.album-card p,.mode-card small{color:#968da5}.text-button{color:#b1a2cd}.mode-card{background:#ffffff03;border-color:#ffffff09}.mode-card:hover,.album-card:hover{box-shadow:0 10px 24px #0002}.mode-card .mode-icon{background:#9980ce18;color:#b49fe5}.mode-card:nth-child(2) .mode-icon{background:#d1959c14;color:#cd9eac}.mode-card:nth-child(3) .mode-icon{background:#7e9abb16;color:#99afcc}.mode-card:nth-child(4) .mode-icon{background:#9483c31a;color:#a69ac9}.mode-card:nth-child(5) .mode-icon{background:#c0a17915;color:#cab18a}.mode-arrow{color:#686074}.album-image{box-shadow:0 5px 18px #0002}.album-tag{background:#191321ad;color:#dbcfeb;border-color:#ffffff12}.album-play{background:#c8b6ebeb;color:#20182e;box-shadow:0 2px 16px #0005}.bottom-note{background:rgba(var(--accent-rgb),.035);border-color:rgba(var(--accent-rgb),.07)}.bottom-note svg{color:var(--accent)}.bottom-note strong{color:#c0b6d1}.bottom-note small{color:#8f839f}.page-bottom{color:#655d72}
.player{background:rgba(27,25,34,.91);box-shadow:0 8px 40px #0004,inset 0 1px 0 #ffffff05}.now-meta>span{color:#a095b0}.now-art span{background:#19132699}.icon-button{color:#a89ab9}.icon-button:hover{background:rgba(var(--accent-rgb),.08);color:var(--accent)}.icon-button.active{color:var(--accent);background:rgba(var(--accent-rgb),.11)}.play-button{background:var(--accent);color:#1b1525;box-shadow:0 2px 8px #0002}.play-button:hover{background:var(--ribbon-light)}.seek-row span{color:#8d809e}input[type=range]{background:#3c3548;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{background:var(--accent)}input[type=range]::-moz-range-thumb{background:var(--accent)}
.player-rating{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex-shrink:0;margin-left:14px;margin-right:7px}.player-rating-label{font-size:7px;color:#857990;letter-spacing:1.4px}.player-rating .iem-rating{gap:4px}.player-rating .iem-rating svg{width:19px;height:19px}.player-rating .iem-rating button{padding:0}.player-rating .reset-rating{font-size:9px!important;width:12px;justify-content:center}.iem-rating button{color:#50465f}.iem-rating button.selected{color:var(--accent)}.iem-rating button:hover{color:var(--ribbon-light)}
.filter-chip{background:#ffffff04;border-color:#ffffff09;color:#b7aaca}.filter-chip.active{background:rgba(var(--accent-rgb),.16);color:var(--accent);border-color:rgba(var(--accent-rgb),.14)}.toolbar select,.eq-toolbar select,.mood-label select{background:#211d2b;border-color:#ffffff0d;color:#b8a8cd}.track-table th{color:#7f718e}.track-table td{border-color:#ffffff06}.track-table tr:hover td{background:#ffffff03}.track-table tr.playing td{background:rgba(var(--accent-rgb),.06)}.track-table .index{color:#7a6e8b}.track-table .album-col,.track-name small,.duration-col{color:#9c8eac}.genre-card{background:linear-gradient(135deg,#272032,#30243f);border-color:#ffffff07}.genre-card:nth-child(3n+2){background:linear-gradient(135deg,#212635,#283046)}.genre-card:nth-child(3n+3){background:linear-gradient(135deg,#312329,#3c2b33)}.genre-card small,.genre-card svg{color:#a999bc}.empty-state{border-color:#463853;color:#b6a3ce}.secondary-button{background:#ffffff05;border-color:#ffffff0d;color:#c8b8dd}.secondary-button:hover{background:#ffffff0a}.muted{color:#9988ad}.wave-explanation{background:#ffffff02;border-color:#ffffff07;color:#a18eB7}.wave-explanation strong{color:#c9b1e7}.wave-symbol{background:rgba(var(--accent-rgb),.12);color:var(--accent)}.wave-heading p{color:#9e8aad}.pagination span{color:#9c8baa}
dialog::backdrop{background:#08060b9e;backdrop-filter:blur(9px)}.modal{background:#211c2bf2;box-shadow:0 30px 100px #0008;border:1px solid #ffffff0b}.modal p,.modal label:not(.switch-label){color:#ae99c3}.modal input:not([type=range]):not([type=checkbox]),.modal #add-playlist-select{background:#16121f;border-color:#ffffff0c;color:#eee5fa}.modal input[readonly]{color:#9b88ac!important}.modal small{color:#94809f}.modal .form-error{color:#d997a1}.eq-band,.modal .fine-print{color:#a792bb}.switch-label input{accent-color:var(--accent)}.toast{background:#292134f5;border-color:#ffffff10;color:#dfcdec;box-shadow:0 10px 50px #0005}.queue-panel{background:#201a2bf2;border-color:#ffffff0b}.queue-song small{color:#a18bb5}.queue-song.active{color:var(--accent)}
.full-player{background:radial-gradient(ellipse at 30% 30%,var(--hero-a),#141019 65%);color:var(--ink)}.full-top>span:nth-child(2){color:#a38db8}.full-art-wrap:before{background:var(--accent);opacity:.15}.full-art-wrap img{border-color:#ffffff09;box-shadow:0 20px 65px #0005}.full-info p{color:#b39dc9}.mood-label,.audio-quality,.waveform-caption,.full-times,.full-volume{color:#a68fb8}.palette-trigger{width:32px;height:32px;border:1px solid rgba(var(--accent-rgb),.15);border-radius:11px;background:rgba(var(--accent-rgb),.05);color:var(--accent)}.palette-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px}.palette-option{display:flex;flex-direction:column;align-items:center;gap:13px;padding:22px 8px;border-radius:15px;border:1px solid #ffffff08;background:#ffffff03;font-size:11px;color:#c5b6d5}.palette-option.active{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.07)}.palette-swatch{height:30px;width:30px;border-radius:50%;box-shadow:inset 0 1px 2px #fff4,0 5px 15px #0003}
@media(max-width:1100px){.player-rating{margin-left:4px;margin-right:0}.player-rating .iem-rating{gap:3px}.player-rating .iem-rating svg{width:16px;height:16px}.transport{width:260px}.now-meta{width:125px}.player-tools input{width:45px}}
@media(max-width:800px){.player-rating-label{display:none}.player-rating .iem-rating{gap:1px}.player-rating .iem-rating svg{width:15px;height:15px}.player-rating{margin:0}.player-tools [data-action=eq]{display:none}.topbar-right{gap:10px}.now-meta{width:90px}.transport{min-width:120px}}
@media(max-width:540px){.player-rating .iem-rating svg{width:13px;height:13px}.player-rating .reset-rating{display:none}.player-rating .iem-rating{gap:1px}.now-meta{width:65px}.player{gap:7px}.transport{min-width:0;width:91px}.transport-buttons{gap:0}.transport-buttons .icon-button{width:26px}.player-rating-label{display:none}.topbar-right{gap:6px}.palette-trigger{flex-shrink:0;width:28px;height:28px}.avatar{width:27px;height:27px}}
@media(max-height:850px){.sidebar{padding-top:20px;padding-bottom:15px}.sidebar .brand{margin:18px 14px 22px}.sidebar .nav-item{padding-top:9px;padding-bottom:9px}.sidebar .nav-label{margin-bottom:8px}.sidebar-divider{margin-top:14px;margin-bottom:15px}.sidebar-spacer{min-height:0}.sidebar-footer{display:none}.connection-note{padding:10px;margin-bottom:3px}.connection-note small{margin-top:3px}}
@media(max-width:800px) and (max-height:850px){.sidebar .brand{margin:24px 0 28px}}