/* ==========================================================================
   SKEUOMORPHIC HARDWARE CONTROLS & DIGITAL READOUTS
   ========================================================================== */

/* --- Potentiometer / Knob SVGs --- */
.potentiometer-svg {
    overflow: visible;
}

.knob-base-shadow {
    fill: #08080d;
    opacity: 0.6;
}

.knob-base {
    fill: url(#knob-base-gradient);
    fill: #1c1d22;
    stroke: #0a0a0d;
    stroke-width: 1px;
}

.knob-fluting {
    fill: #22232a;
    stroke: #14151a;
    stroke-width: 1px;
}

.knob-cap-shadow {
    fill: #0d0e12;
    opacity: 0.5;
}

/* --- Ticks, Arcs & Decorative SVG Marks --- */
.deco-tick {
    stroke: #444855;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.deco-tick {
    stroke: #444855;
    stroke-width: 2.5; /* Increased from 1.5 */
    stroke-linecap: round;
}

.deco-tick-bold {
    stroke: #888d9d;
    stroke-width: 3.5; /* Increased from 2 */
    stroke-linecap: round;
}

.deco-text, .fader-text {
    fill: #7a7e8e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 26px; /* <-- Adjust this value (e.g., 24px - 30px) for SVG viewBox scaling */
    text-anchor: middle;
    dominant-baseline: central;
    user-select: none;
}

.fader-text-right {
    text-anchor: end;
}

.fader-text-center {
    text-anchor: middle;
}

/* --- Fader SVGs --- */
.fader-track-bg {
    fill: #121317;
    stroke: #252830;
    stroke-width: 1;
}

.fader-track-slot {
    fill: #050507;
    stroke: #000000;
    stroke-width: 1;
}

.fader-tick {
    stroke: #3a3d4a;
    stroke-width: 1;
}

.fader-tick-bold {
    stroke: #6b7082;
    stroke-width: 1.5;
}

.fader-thumb-shadow {
    fill: #000000;
    opacity: 0.45;
}

.fader-thumb-base {
    fill: linear-gradient(180deg, #3a3d48 0%, #1e2027 100%);
    fill: #2a2c35;
    stroke: #111216;
    stroke-width: 1;
}

.fader-thumb-grip {
    stroke: #17181f;
    stroke-width: 1;
}