/* Shared frosted material: decorative backdrops, never audio artwork. */
:root {
 --frost-base:#07110d;
 --frost-backdrop:radial-gradient(ellipse at 8% 12%,rgba(32,255,66,.13),transparent 45%),radial-gradient(ellipse at 92% 65%,rgba(133,157,146,.13),transparent 48%),linear-gradient(135deg,#09120e,#162019 52%,#080e0b);
 --frost-panel:rgba(13,22,17,.76);
 --frost-chrome:rgba(10,18,13,.86);
 --frost-border:rgba(185,217,196,.19);
 --frost-shine:rgba(233,255,241,.09);
 --frost-shadow:0 12px 36px rgba(0,0,0,.16);
}
:host {
 --frost-base:#07110d;
 --frost-backdrop:radial-gradient(ellipse at 8% 12%,rgba(32,255,66,.13),transparent 45%),radial-gradient(ellipse at 92% 65%,rgba(133,157,146,.13),transparent 48%),linear-gradient(135deg,#09120e,#162019 52%,#080e0b);
 --frost-panel:rgba(13,22,17,.76);
 --frost-chrome:rgba(10,18,13,.86);
 --frost-border:rgba(185,217,196,.19);
 --frost-shine:rgba(233,255,241,.09);
 --frost-shadow:0 12px 36px rgba(0,0,0,.16);
}
:root[data-theme="light"] {
 --frost-base:#edf1ef;
 --frost-backdrop:radial-gradient(ellipse at 8% 10%,rgba(255,255,255,.98),transparent 48%),radial-gradient(ellipse at 88% 45%,rgba(203,220,208,.55),transparent 46%),linear-gradient(135deg,#e7ede9,#f9fbfa 48%,#e5ece7);
 --frost-panel:rgba(255,255,255,.64);
 --frost-chrome:rgba(255,255,255,.82);
 --frost-border:rgba(128,148,135,.25);
 --frost-shine:rgba(255,255,255,.95);
 --frost-shadow:0 12px 36px rgba(31,52,39,.07);
}
:host([data-theme="light"]) {
 --frost-base:#edf1ef;
 --frost-backdrop:radial-gradient(ellipse at 8% 10%,rgba(255,255,255,.98),transparent 48%),radial-gradient(ellipse at 88% 45%,rgba(203,220,208,.55),transparent 46%),linear-gradient(135deg,#e7ede9,#f9fbfa 48%,#e5ece7);
 --frost-panel:rgba(255,255,255,.64);
 --frost-chrome:rgba(255,255,255,.82);
 --frost-border:rgba(128,148,135,.25);
 --frost-shine:rgba(255,255,255,.95);
 --frost-shadow:0 12px 36px rgba(31,52,39,.07);
}
:root[data-theme] body {
 background-color:var(--frost-base)!important;
 background-image:var(--frost-backdrop)!important;
 background-size:cover!important;
 background-attachment:fixed;
 background-blend-mode:normal!important;
}
:root[data-theme] body::before { display:none; }
:host { background:transparent!important; }
:root[data-theme] :is(.auth-screen,.shared-screen) {
 background-color:var(--frost-base)!important;
 background-image:var(--frost-backdrop)!important;
}
:root[data-theme] {
 --panel:var(--frost-panel);--panel2:var(--frost-panel);
 --app-background:var(--frost-base);--app-card:var(--frost-panel);
 --app-card-alpha:var(--frost-panel);--app-surface-alpha:var(--frost-panel);
 --app-surface-overlay:var(--frost-chrome);--app-bg-image:var(--frost-backdrop);
}
:host([data-theme]) {
 --panel:var(--frost-panel);--panel2:var(--frost-panel);
 --app-background:var(--frost-base);--app-card:var(--frost-panel);
 --app-card-alpha:var(--frost-panel);--app-surface-alpha:var(--frost-panel);
 --app-surface-overlay:var(--frost-chrome);--app-bg-image:var(--frost-backdrop);
}
:root[data-theme] :is(.card,.public-feature,.public-preview,.public-price,.library-panel,.profile-card,.public-card,.auth-card,.site-tool-grid button,.set-generator,.studio-command,.studio-source,.studio-mixer,.daw-browser,.ll-pad,.ll-transport,.ll-sessions,.glass-card,.glass-surface),
:root[data-theme] #bulk-upload,
#vault-tool-content :is(.glass-card,.glass-surface) {
 background-color:var(--frost-panel)!important;
 background-image:none!important;
 border-color:var(--frost-border)!important;
 box-shadow:inset 0 1px 0 var(--frost-shine),var(--frost-shadow)!important;
 backdrop-filter:blur(18px) saturate(115%);
 -webkit-backdrop-filter:blur(18px) saturate(115%);
}
:host([data-theme]) :is(.glass-card,.glass-surface) {
 background-color:var(--frost-panel)!important;
 background-image:none!important;
 border-color:var(--frost-border)!important;
 box-shadow:inset 0 1px 0 var(--frost-shine),var(--frost-shadow)!important;
 backdrop-filter:blur(18px) saturate(115%);
 -webkit-backdrop-filter:blur(18px) saturate(115%);
}
:root[data-theme] :is(.topbar,.playerbar,.account-menu,.detail,.mini-dialog,.glass-nav),
#vault-tool-content .glass-nav {
 background-color:var(--frost-chrome)!important;
 background-image:none!important;
 border-color:var(--frost-border)!important;
 backdrop-filter:blur(24px) saturate(115%);
 -webkit-backdrop-filter:blur(24px) saturate(115%);
 box-shadow:inset 0 1px 0 var(--frost-shine),var(--frost-shadow)!important;
}
:root[data-theme] :is(.app-window-page,.min-h-screen),
#vault-tool-content :is(.app-window-page,.min-h-screen) { background:transparent!important; }
/* Cover images and touch controls retain their own material and visibility. */
:root[data-theme] .cover-actions,
#vault-tool-content .vault-cover-actions { backdrop-filter:none!important;-webkit-backdrop-filter:none!important; }
@media(max-width:720px) {
 :root[data-theme] body { background-attachment:scroll; }
 :root[data-theme] :is(.card,.ll-pad),#vault-tool-content .glass-card {
  backdrop-filter:none;-webkit-backdrop-filter:none;
 }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 :root { --frost-panel:#111c15;--frost-chrome:#101a13; }
 :host { --frost-panel:#111c15;--frost-chrome:#101a13; }
 :root[data-theme="light"] { --frost-panel:#f6f9f7;--frost-chrome:#f9fbfa; }
 :host([data-theme="light"]) { --frost-panel:#f6f9f7;--frost-chrome:#f9fbfa; }
}
/* Text sits directly on the shared glass, without opaque plates. */
:root {
 --reading-surface:transparent;
 --reading-field:transparent;
 --reading-text:#eef4ef;
 --reading-muted:#b3c2b7;
}
:host {
 --reading-surface:transparent;
 --reading-field:transparent;
 --reading-text:#eef4ef;
 --reading-muted:#b3c2b7;
}
:root[data-theme="light"] {
 --reading-surface:transparent;
 --reading-field:transparent;
 --reading-text:#000;
 --reading-muted:#000;
}
:host([data-theme="light"]) {
 --reading-surface:transparent;
 --reading-field:transparent;
 --reading-text:#000;
 --reading-muted:#000;
}
:root[data-theme] :is(.card .body,.vault-track-info) {
 background:var(--reading-surface)!important;
 border-top:0!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 padding:18px!important;
}
:host([data-theme]) .vault-track-info {
 background:var(--reading-surface)!important;
 border-top:0!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 padding:18px!important;
}
:root[data-theme] :is(.card .title,.vault-track-info h3),
:root[data-theme] #root .vault-track-info h3 {
 font-family:var(--vault-font-ui,'Space Mono',monospace)!important;
 font-size:15px!important;line-height:1.5!important;font-weight:700!important;
 letter-spacing:-.025em!important;color:var(--reading-text)!important;
 white-space:normal!important;overflow-wrap:anywhere;
 -webkit-text-stroke:0!important;text-shadow:none!important;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
 min-height:3em;
}
:host([data-theme]) .vault-track-info h3 {
 font-family:var(--vault-font-ui,'Space Mono',monospace)!important;
 font-size:15px!important;line-height:1.5!important;font-weight:700!important;
 letter-spacing:-.025em!important;color:var(--reading-text)!important;
 white-space:normal!important;overflow-wrap:anywhere;
 -webkit-text-stroke:0!important;text-shadow:none!important;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
 min-height:3em;
}
:root[data-theme] :is(.card .artist,.card .meta,.card .meta *,.vault-track-info p,.vault-track-info span) {
 color:var(--reading-muted)!important;
 -webkit-text-stroke:0!important;text-shadow:none!important;
 font-size:12px!important;line-height:1.65!important;font-weight:400!important;
}
:host([data-theme]) .vault-track-info :is(p,span) {
 color:var(--reading-muted)!important;
 -webkit-text-stroke:0!important;text-shadow:none!important;
 font-size:12px!important;line-height:1.65!important;font-weight:400!important;
}
:root[data-theme] :is(.pill,.vault-track-info span[title]) {
 background:var(--reading-field)!important;
 border:0!important;border-radius:0;
 padding:0;
}
:root[data-theme] :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea) {
 background:var(--reading-field)!important;color:var(--reading-text)!important;
 border-color:var(--frost-border)!important;
 -webkit-text-stroke:0!important;text-shadow:none!important;
 box-shadow:none!important;
}
:host([data-theme]) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea) {
 background:var(--reading-field)!important;color:var(--reading-text)!important;
 border-color:var(--frost-border)!important;
 -webkit-text-stroke:0!important;text-shadow:none!important;
 box-shadow:none!important;
}
:root[data-theme] :is(p,label,input,select,textarea,button,.nav-link,.playerbar *) {
 -webkit-text-stroke:0!important;text-shadow:none!important;
}
:host([data-theme]) :is(p,label,input,select,textarea,button) {
 -webkit-text-stroke:0!important;text-shadow:none!important;
}
:root[data-theme] :is(input,textarea)::placeholder {color:var(--reading-muted)!important;opacity:.7}
@media(max-width:720px){
 :root[data-theme] :is(.card .body,.vault-track-info){padding:13px!important}
 :root[data-theme] :is(.card .title,.vault-track-info h3){font-size:14px!important}
}

/* Navigation, labels and metadata inherit the glass instead of drawing boxes. */
:root[data-theme] :is(.tab,.theme-toggle,.account-btn,.account-menu button,.library-sections button,.fav,.auth-link,.playlist-track-main,.pill,.detail-kicker,.radio-tag,.sync),
:root[data-theme] :is(h1,h2,h3,h4,p,label,.title,.artist,.meta),
:root[data-theme] .vault-track-info :is(span,a) {
 background:transparent!important;
 box-shadow:none!important;
}
:host([data-theme]) :is(h1,h2,h3,h4,p,label,.vault-track-info span,.vault-track-info a) {
 background:transparent!important;
 box-shadow:none!important;
}
:root[data-theme] .library-sections button[aria-pressed="true"] {
 box-shadow:inset 0 -2px var(--acid)!important;
}
:root[data-theme] .card .meta {gap:6px 12px}
:root[data-theme] .playerbar :is(.now,.now-title,.now-sub,.time) {color:var(--reading-text)!important;background:transparent!important}
:root[data-theme] :is(button,input,select,textarea):focus-visible {outline:2px solid var(--acid);outline-offset:3px}
:root[data-theme] option {background:var(--frost-base);color:var(--reading-text)}