/*
 * VOCODER (ROVOCODE) — HOLOGRAPHX HARDWARE skin (v1)
 * Visual only. Preserved: the animated gradient ROVOCODE title (not touched)
 * and the pulsing connection LED (.status-indicator not touched).
 * Remove the <link> and body class "hx-hw" to undo.
 */
body.hx-hw {
    --hx-acc: #1fe3ff;
    --hx-acc-rgb: 31, 227, 255;
    background: var(--hx-chassis), #050506 !important;
}
body.hx-hw.hx-hw .main-container { background: transparent !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 :is(.left-panel, .center-panel, .right-panel, .waveform-panel, .output-panel) {
    background: var(--hx-well-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-well) !important;
    box-shadow: var(--hx-well-shadow) !important;
}
body.hx-hw.hx-hw :is(.device-section, .control-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 :is(.device-title, .control-title) {
    font-family: var(--hx-font) !important;
    letter-spacing: .2em !important;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 8px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw :is(.control-name, .info-text, .status-item) {
    font-family: var(--hx-font) !important;
    color: var(--hx-mute) !important;
}
body.hx-hw.hx-hw .control-value {
    font-family: var(--hx-font) !important;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 6px var(--hx-acc-glow);
}
body.hx-hw.hx-hw :is(.device-button, .preset-button, .help-button, .browser-fullscreen) {
    font-family: var(--hx-font) !important;
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: var(--hx-key-shadow) !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw :is(.device-button, .preset-button):is(.active, .scale-active) {
    color: #061014 !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}
body.hx-hw.hx-hw .device-select {
    font-family: var(--hx-font) !important;
    color: var(--hx-ink) !important;
    background-color: #0d0d0f !important;
    border: 0 !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024 !important;
}
body.hx-hw.hx-hw .control-slider::-webkit-slider-thumb {
    background: linear-gradient(90deg, transparent 42%, var(--hx-acc) 42% 58%, transparent 58%), linear-gradient(180deg, #5a5a60, #1c1c1f) !important;
    border: 1px solid #000 !important;
    border-radius: 3px !important;
}
body.hx-hw.hx-hw canvas { border-radius: 6px; }
body.hx-hw.hx-hw .piano-key.white-key {
    background: linear-gradient(180deg, #d9d6d0 0, #fbfaf7 12%, #f2f0ec 85%, #d4d1cb 100%) !important;
    box-shadow: inset 0 -5px 0 #c9c5be, 0 2px 3px rgba(0,0,0,.6) !important;
}
body.hx-hw.hx-hw .piano-key.black-key {
    background: linear-gradient(180deg, #000 0, #2a2a2e 70%, #141416 100%) !important;
    box-shadow: inset 0 -4px 0 #050505, 0 2px 4px rgba(0,0,0,.7) !important;
}
body.hx-hw.hx-hw .piano-key.active {
    box-shadow: inset 0 0 0 2px var(--hx-acc), 0 0 14px var(--hx-acc-glow) !important;
}