/*
 * VIDEO MIXER — HOLOGRAPHX HARDWARE skin (v1)
 * Visual only. Preserved: record pulse (#record-btn.recording), MIDI-learn
 * pending pulse, video canvases. No !important box-shadow on buttons that pulse.
 * Remove the <link> and body class "hx-hw" to undo.
 */
body.hx-hw {
    --hx-acc: #2f9bff;
    --hx-acc-rgb: 47, 155, 255;
    background: var(--hx-chassis), #050506 !important;
}
body.hx-hw.hx-hw #app-container { background: transparent !important; }

/* Monitors: bezel around each screen */
body.hx-hw.hx-hw .video-panel {
    background: #030304 !important;
    border: 6px solid #111113 !important;
    box-sizing: border-box;
    border-radius: 12px !important;
    box-shadow: 0 0 0 1px #26262a, inset 0 0 30px rgba(0,0,0,.9) !important;
}
body.hx-hw.hx-hw #output-panel {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hx-acc) 60%, #26262a), inset 0 0 30px rgba(0,0,0,.9) !important;
}
body.hx-hw.hx-hw .source-label {
    font-family: var(--hx-font) !important;
    letter-spacing: .2em;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 8px var(--hx-acc-glow);
}

/* Console */
body.hx-hw.hx-hw :is(#main-controls, .vfx-channel-panel, .source-controls, .channel-strip) {
    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 #app-container :is(label, .vfx-channel-heading, h4) {
    font-family: var(--hx-font) !important;
    letter-spacing: .16em;
    color: var(--hx-mute) !important;
}

/* Keys (box-shadow left non-important so record/learn pulses still animate) */
body.hx-hw.hx-hw .control-btn {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    letter-spacing: .1em !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);
    text-shadow: none !important;
}
body.hx-hw.hx-hw .control-btn.active {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow);
}
body.hx-hw.hx-hw #record-btn.recording {
    color: #fff !important;
    background: linear-gradient(180deg, #ff3030, #9c0e12) !important;
}

/* Fields */
body.hx-hw.hx-hw :is(.control-select, .device-select, .control-input) {
    font-family: var(--hx-font) !important;
    color: var(--hx-ink) !important;
    background-color: #0d0d0f !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024 !important;
}

/* Fader caps (tracks and MIDI-learn outlines untouched) */
body.hx-hw.hx-hw #app-container input[type="range"]::-webkit-slider-thumb {
    background:
        repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.45) 3px 4px),
        linear-gradient(180deg, #5a5a60, #1c1c1f) !important;
    border: 1px solid #000 !important;
    border-radius: 4px !important;
}

/* Dialogs */
body.hx-hw.hx-hw .modal-content {
    background: linear-gradient(180deg, #19191c, #0e0e10) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 30px 60px rgba(0,0,0,.75) !important;
}

.crossfader-container { position: relative; margin-bottom: 34px !important; }
.crossfade-modes { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
body.hx-hw .crossfade-modes .control-btn { min-width: 54px; min-height: 24px; padding: 3px 9px; font-size: 10px !important; }
body.hx-hw .crossfade-modes button[aria-pressed="true"] { color: #8ed0ff !important; box-shadow: inset 0 0 0 1px #2f9bff; }