/*
 * MEGAPARSEC II — HOLOGRAPHX HARDWARE skin (v1)
 * Loaded last. Visual only. Each part keeps its colour (cyan, magenta, yellow, green).
 * Preserved: MIDI-learn pulse on sliders (no box-shadow/animation set on range inputs),
 * learn-button pulse (opacity only). Remove the <link> and body class "hx-hw" to undo.
 */

body.hx-hw {
    --hx-acc: #00e5ff;
    --hx-acc-rgb: 0, 229, 255;
    --part1: #1fe3ff;
    --part2: #ff38e6;
    --part3: #ffe23a;
    --part4: #2cff9a;
    background: #050506 !important;
}
body.hx-hw .part {
    --hx-acc: var(--part-color);
    --hx-acc-glow: color-mix(in srgb, var(--part-color) 55%, transparent);
    --hx-acc-dim: color-mix(in srgb, var(--part-color) 16%, transparent);
    --hx-key-on-bg: linear-gradient(180deg, var(--part-color), color-mix(in srgb, var(--part-color) 55%, #000));
    --hx-key-on-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(0,0,0,.5), 0 0 14px var(--hx-acc-glow), 0 2px 0 #000;
    --hx-lcd-bg: linear-gradient(180deg, color-mix(in srgb, var(--part-color) 6%, #040405), color-mix(in srgb, var(--part-color) 9%, #070708));
    --hx-lcd-shadow: inset 0 2px 6px #000, inset 0 0 0 1px color-mix(in srgb, var(--part-color) 22%, #0a0a0a);
}

/* ---------- Chassis ---------- */
body.hx-hw.hx-hw :is(#app, .app, main, .container) { background: transparent !important; }
body.hx-hw.hx-hw { background: var(--hx-chassis), #050506 !important; }
body.hx-hw.hx-hw header {
    background: var(--hx-bar-bg) !important;
    border: 0 !important;
    border-radius: 12px;
    box-shadow: var(--hx-bar-shadow) !important;
}
body.hx-hw.hx-hw header :is(h1, .logo, .title) {
    font-style: normal !important;
    letter-spacing: .2em !important;
}

/* Parts: recessed wells with a lit colour edge */
body.hx-hw.hx-hw .part {
    background: var(--hx-well-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-well) !important;
    box-shadow: var(--hx-well-shadow), inset 0 2px 0 color-mix(in srgb, var(--part-color) 70%, transparent) !important;
}
body.hx-hw.hx-hw .part-header {
    border-bottom: 1px solid #1f1f23 !important;
}
body.hx-hw.hx-hw .part-label {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .2em !important;
    color: var(--part-color) !important;
    text-shadow: 0 0 10px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw :is(.osc-section, .filter-section, .env-section, .output-section, .gate-section) {
    background: linear-gradient(180deg, #121214, #0c0c0e) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1c1c1f !important;
}
body.hx-hw.hx-hw .part label {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .12em;
    color: var(--hx-mute) !important;
}

/* Waveform scopes: backlit display */
body.hx-hw.hx-hw .waveform-display {
    background: var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}

/* Keys */
body.hx-hw.hx-hw :is(.mute-btn, .solo-btn, .gate-toggle-btn, .gate-rand-btn, .gate-reset-btn, .preset-save-btn, .pitch-step-btn, .stepper-buttons button, .midi-learn-menu-item) {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: var(--hx-key-shadow) !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw :is(.mute-btn, .solo-btn, .gate-toggle-btn, .pitch-step-btn).active {
    color: #0a0a0a !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}
body.hx-hw.hx-hw .mute-btn.active {
    background: linear-gradient(180deg, #ff4a3a, #8a140c) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px rgba(255,74,58,.55), 0 2px 0 #000 !important;
}

/* Numbers: LCD */
body.hx-hw.hx-hw .part input[type="number"] {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    color: var(--part-color) !important;
    text-shadow: 0 0 8px var(--hx-acc-glow) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}

/* Slider caps: machined (tracks, fills and MIDI-learn glow untouched) */
body.hx-hw.hx-hw .part input[type="range"]::-webkit-slider-thumb {
    background:
        linear-gradient(90deg, transparent 42%, var(--part-color) 42% 58%, transparent 58%),
        linear-gradient(180deg, #5a5a60, #1c1c1f) !important;
    border: 1px solid #000 !important;
    border-radius: 3px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.85) !important;
}
body.hx-hw.hx-hw .part input[type="range"]::-moz-range-thumb {
    background: linear-gradient(180deg, #5a5a60, #1c1c1f) !important;
    border: 1px solid #000 !important;
}

/* ---------- Gate steps: LED keys in the part colour ---------- */
body.hx-hw.hx-hw .gate-step {
    border: 0 !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #232326, #161618) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px #070708, 0 1px 0 #000 !important;
}
body.hx-hw.hx-hw .gate-step.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--part-color) 80%, #fff), color-mix(in srgb, var(--part-color) 60%, #000)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 #000 !important;
}
body.hx-hw.hx-hw .gate-step.tie {
    background: linear-gradient(90deg, color-mix(in srgb, var(--part-color) 70%, #000) 0 55%, #161618 55%) !important;
}
body.hx-hw.hx-hw .gate-step.current {
    outline: 2px solid #f2f0ec;
    outline-offset: 1px;
}
body.hx-hw.hx-hw .part.gate-disabled .gate-step.active { filter: saturate(.3) brightness(.6); }

/* Step indicator LEDs */
body.hx-hw.hx-hw .step-indicator .indicator {
    background: #1e1e21 !important;
    border-radius: 50%;
}
body.hx-hw.hx-hw .step-indicator .indicator.active {
    background: var(--part-color) !important;
    box-shadow: 0 0 8px var(--part-color) !important;
}

/* Header BPM: LCD */
body.hx-hw.hx-hw header input[type="number"] {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 10px var(--hx-acc-glow) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}