/* ══════════════════════════════════════════════════════════════════
   PREMIUM CONTROL SKIN — boutique-hardware finish layer
   ══════════════════════════════════════════════════════════════════
   Loaded LAST (after main-styles.css, before the mobile-only
   stylesheet) so it reliably wins the cascade on shared classes
   without needing !important anywhere in this file.

   Scope: visual finish ONLY. No selector here changes layout,
   dimensions that affect touch-target size, or anything JS reads
   (JS only ever reads .value/id on these controls, never parses
   style strings). Builds on the existing --lvl-gold design token
   already used as the "premium" accent throughout the app — this
   is a richer material finish on the existing brand palette, not a
   new color system.

   Covers: selector-btn grid buttons (format/bit-depth/sample-rate/
   platform), range-input fader caps + track groove (reaches the
   Character sliders' bare <input type=range> via the global
   fallback selector), and viz-panel/panel-title chrome (Spectrum/
   Tonal-Balance/Stereo-Field/Goniometer panel frames).
   ══════════════════════════════════════════════════════════════════ */

/* ── Selector grid buttons (Format / Bit Depth / Sample Rate / Platform) ── */
.selector-btn {
    background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.015) 45%, rgba(0,0,0,.12) 100%);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 1px 2px rgba(0,0,0,.3);
}

.selector-btn:hover {
    border-color: rgba(212,169,78,.45);
    background: linear-gradient(180deg, rgba(212,169,78,.14) 0%, rgba(212,169,78,.05) 45%, rgba(0,0,0,.12) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 0 14px rgba(212,169,78,.15);
}

.selector-btn.active {
    border-color: rgba(212,169,78,.55);
    background: linear-gradient(180deg, rgba(212,169,78,.28) 0%, rgba(212,169,78,.12) 45%, rgba(158,122,40,.14) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,224,150,.25),
        inset 0 -1px 0 rgba(0,0,0,.4),
        0 0 16px rgba(212,169,78,.3),
        0 0 30px rgba(212,169,78,.1);
    color: #f0cc6b;
    text-shadow: 0 0 8px rgba(212,169,78,.35);
}

/* ── Range input groove (channel-strip track) — reaches every bare
   <input type=range> in the app, including the 4 Character sliders,
   without touching their markup. Their own inline gradient (the
   cool/warm color-coded fill) is untouched — this only deepens the
   groove behind it. ── */
input[type="range"] {
    box-shadow: inset 0 1px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.03);
}

/* ── Fader cap — brushed-metal channel-strip thumb, same horizontal
   drag interaction as today, richer 3D finish instead of a flat
   circle. ── */
input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,238,200,.9) 0%, rgba(240,204,107,.55) 22%, rgba(212,169,78,1) 55%, rgba(158,122,40,1) 100%);
    border: 1px solid rgba(90,68,20,.9);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.5),
        inset 0 -2px 2px rgba(0,0,0,.35),
        0 1px 3px rgba(0,0,0,.5),
        0 0 8px rgba(212,169,78,.35);
}

input[type="range"]:hover::-webkit-slider-thumb {
    background:
        radial-gradient(circle at 35% 28%, rgba(255,244,215,.95) 0%, rgba(248,214,120,.6) 22%, rgba(224,182,90,1) 55%, rgba(168,130,44,1) 100%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.55),
        inset 0 -2px 2px rgba(0,0,0,.35),
        0 1px 3px rgba(0,0,0,.5),
        0 0 14px rgba(212,169,78,.55);
}

input[type="range"]:active::-webkit-slider-thumb {
    background:
        radial-gradient(circle at 35% 28%, rgba(255,244,215,1) 0%, rgba(250,220,130,.65) 22%, rgba(232,190,96,1) 55%, rgba(176,136,46,1) 100%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.6),
        inset 0 -1px 1px rgba(0,0,0,.3),
        0 0 18px rgba(212,169,78,.65);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,238,200,.9) 0%, rgba(240,204,107,.55) 22%, rgba(212,169,78,1) 55%, rgba(158,122,40,1) 100%);
    border: 1px solid rgba(90,68,20,.9);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.5),
        inset 0 -2px 2px rgba(0,0,0,.35),
        0 1px 3px rgba(0,0,0,.5),
        0 0 8px rgba(212,169,78,.35);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.55),
        inset 0 -2px 2px rgba(0,0,0,.35),
        0 1px 3px rgba(0,0,0,.5),
        0 0 14px rgba(212,169,78,.55);
}

/* ── Viz panel chrome (Spectrum / Tonal Balance / Stereo Field / Goniometer) ── */
.viz-panel {
    background:
        linear-gradient(145deg, rgba(9,9,17,.98) 0%, rgba(16,16,28,.96) 45%, rgba(7,7,15,.98) 100%);
    border-color: rgba(212,169,78,.16);
    box-shadow:
        0 10px 36px rgba(0,0,0,.75),
        0 0 70px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -1px 0 rgba(0,0,0,.55);
}

.panel-title {
    background: linear-gradient(90deg, rgba(212,169,78,.09), transparent 55%, rgba(158,122,40,.09));
    border-bottom-color: rgba(255,255,255,.07);
}