/* Translucent cover material, shared by cards, details and player thumbnails.
   The source artwork is composited as a translucent layer so the live page
   remains visible through its formerly opaque background. */
:root, :host {
 --cover-image:url('/artwork/circuit-plate-night-v1.png');
 --cover-surface:rgba(213,241,227,.10);
 --cover-frame:rgba(225,255,238,.36);

 --cover-finish:linear-gradient(130deg,rgba(240,255,247,.08),rgba(230,255,240,.01) 42%,transparent 68%,rgba(240,255,247,.04));
 --cover-edge-shadow:inset 0 1px 0 rgba(245,255,250,.52),inset 0 -1px 0 rgba(205,245,222,.16);
 --cover-radius:12px;
}
:root[data-theme="light"], :host([data-theme="light"]) {
 --cover-image:url('/artwork/circuit-plate-day-v1.png');
 --cover-surface:rgba(250,255,252,.17);
 --cover-frame:rgba(255,255,255,.72);

 --cover-finish:linear-gradient(130deg,rgba(255,255,255,.34),rgba(255,255,255,.025) 42%,transparent 68%,rgba(255,255,255,.15));
 --cover-edge-shadow:inset 0 1px 0 rgba(255,255,255,.84),inset 0 -1px 0 rgba(48,87,63,.12);
}
:root[data-theme="dark"], :host([data-theme="dark"]) {
 --cover-image:url('/artwork/circuit-plate-night-v1.png');
}
.vault-artwork {
 display:block;position:relative;width:100%;height:100%;min-height:inherit;
 overflow:hidden;isolation:isolate;background:var(--cover-surface);
 border-radius:var(--cover-radius);
 -webkit-backdrop-filter:blur(10px) saturate(115%);
 backdrop-filter:blur(10px) saturate(115%);
}
/* Reference-matched artwork: retain the complete waveform and fine circuitry. */
.vault-artwork::before {content:none}
.vault-artwork > img.vault-wave-image {
 display:block;position:absolute;inset:0;z-index:1;
 width:100%;height:100%;max-width:none;object-fit:contain;
 transform:none;transform-origin:center;
 filter:none;
 opacity:.96;pointer-events:none;
 -webkit-mask-image:none;
 mask-image:none;
}
.vault-artwork > img.vault-wave-day {display:none}
[data-theme="light"] .vault-artwork > img.vault-wave-night,
:host([data-theme="light"]) .vault-artwork > img.vault-wave-night {display:none}
[data-theme="light"] .vault-artwork > img.vault-wave-day,
:host([data-theme="light"]) .vault-artwork > img.vault-wave-day {display:block}
.vault-artwork::after {
 content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--cover-frame);
 border-radius:inherit;background:var(--cover-finish);
 box-shadow:var(--cover-edge-shadow);pointer-events:none;
}
/* Remove opaque backing plates; keep the controls above the glass clickable. */
html body :is(.cover,.detail-art,.thumb):has(>.vault-artwork),
html:root[data-theme][data-theme] body .vault-cover-frame:has(>.vault-artwork),
#vault-tool-content#vault-tool-content .vault-cover-frame:has(>.vault-artwork) {
 background:transparent!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.cover>.vault-artwork,.detail-art>.vault-artwork {position:absolute;inset:0}
.detail-art {position:relative}
.thumb .vault-artwork {min-height:0;border-radius:inherit}
/* Square framing retains every waveform peak without cropping. */
.card>.cover,.track-card-glass>.vault-cover-frame {
 aspect-ratio:1/1;width:100%;height:auto;min-height:0;border-radius:0;overflow:hidden;
}
.card>.cover>.vault-artwork,.track-card-glass>.vault-cover-frame>.vault-artwork {
 border-radius:0;min-height:0;
}
.card>.cover>.vault-artwork::after,.track-card-glass>.vault-cover-frame>.vault-artwork::after {
 border-left:0;border-right:0;
}
.thumb {overflow:hidden;border-radius:8px;flex-shrink:0}
@media(max-width:767px){
 .vault-artwork {-webkit-backdrop-filter:blur(7px) saturate(115%);backdrop-filter:blur(7px) saturate(115%)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .vault-artwork {background:rgba(120,151,134,.28)}
}

/* Independent foreground; nothing on the plate is transformed per track. */
.vault-artwork .vault-waveform-layer {display:contents}
.vault-artwork svg.vault-waveform {
 position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;
 overflow:visible;filter:drop-shadow(0 0 3px #30ff35) drop-shadow(0 0 9px #20ff4280);
}
.vault-artwork svg.vault-waveform path {fill:none!important;stroke:#9dff91!important;stroke-width:1.45;stroke-linejoin:round;stroke-linecap:round}