/*
 * DJ-X — HOLOGRAPHX HARDWARE skin (v1)
 * Loaded last. Visual only. Deck A keeps cyan, deck B keeps magenta.
 * Preserved animations: vinyl spin (.vinyl.spinning transform), record pulse,
 * loop "waiting" pulse, fader fill gradients. This file never sets transform,
 * opacity or animation on those, and avoids !important box-shadow on them.
 * Remove the <link> and body class "hx-hw" to undo.
 */

body.hx-hw {
    --hx-acc: #b36bff;
    --hx-acc-rgb: 179, 107, 255;
    --djx-a: #1fe3ff;
    --djx-a-rgb: 31, 227, 255;
    --djx-b: #ff38e6;
    --djx-b-rgb: 255, 56, 230;
    background: #050506 !important;
}
body.hx-hw .deck-left { --hx-acc: var(--djx-a); --hx-acc-rgb: var(--djx-a-rgb); }
body.hx-hw .deck-right { --hx-acc: var(--djx-b); --hx-acc-rgb: var(--djx-b-rgb); }
body.hx-hw :is(.deck-left, .deck-right) {
    --hx-acc-glow: rgba(var(--hx-acc-rgb), .55);
    --hx-acc-dim: rgba(var(--hx-acc-rgb), .16);
    --hx-key-on-bg: linear-gradient(180deg, var(--hx-acc), color-mix(in srgb, var(--hx-acc) 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 0 1px var(--hx-acc-dim), 0 2px 0 #000;
    --hx-lcd-bg: linear-gradient(180deg, color-mix(in srgb, var(--hx-acc) 6%, #030405), color-mix(in srgb, var(--hx-acc) 9%, #06080a));
    --hx-lcd-shadow: inset 0 2px 6px #000, inset 0 0 0 1px color-mix(in srgb, var(--hx-acc) 22%, #0a0a0a), 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- Chassis ---------- */
body.hx-hw.hx-hw :is(#app, .app, .dj-app) { background: transparent !important; }
body.hx-hw.hx-hw .dj-console {
    background: var(--hx-chassis) !important;
}
body.hx-hw.hx-hw .dj-header {
    background: var(--hx-bar-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-bar-shadow) !important;
}

/* Decks and mixer become recessed wells */
body.hx-hw.hx-hw :is(.deck, .mixer) {
    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 .mixer :is(.channel-strip, .strip, .phase-section, .crossfader-section) {
    background: linear-gradient(180deg, #121214, #0c0c0e) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1c1c1f !important;
}

/* Track info and waveform: backlit display */
body.hx-hw.hx-hw .waveform-section {
    background: var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}
body.hx-hw.hx-hw .waveform-container {
    background: #050607 !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 4px #000 !important;
}
/* No blurred glow on text the app rewrites every frame (time, BPM). */
body.hx-hw.hx-hw .track-name,
body.hx-hw.hx-hw .time-display {
    font-family: var(--hx-font) !important;
    color: var(--hx-acc) !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw .bpm-display {
    font-family: var(--hx-font) !important;
    color: #ffae3a !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw :is(.pitch-value, .record-time, .library-summary, .channel-label) {
    font-family: var(--hx-font) !important;
}

/* ---------- Turntable: machined platter (vinyl itself untouched so it keeps spinning) ---------- */
body.hx-hw.hx-hw .turntable {
    background:
        radial-gradient(circle at 40% 30%, #3a3a3f, #1a1a1d 55%, #0c0c0e 100%) !important;
    border: 0 !important;
    box-shadow: 0 0 0 6px #0b0b0c, 0 0 0 8px #2a2a2e, 0 12px 24px rgba(0,0,0,.8), inset 0 2px 3px rgba(255,255,255,.12) !important;
}
/* The vinyl is rotated every frame by the app: give it its own compositing
   layer so rotation never repaints the platter or the rest of the deck. */
body.hx-hw.hx-hw .vinyl { will-change: transform; backface-visibility: hidden; }

/* ---------- Keys ---------- */
body.hx-hw.hx-hw :is(.library-open-btn, .header-btn, .bpm-adj-btn, .pad-clear, .keylock-btn,
    .cue-headphone-btn, .load-btn, .video-output-btn, .dj-console .sync-btn, .dj-console .transport-btn) {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    letter-spacing: .12em !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;
}
/* Deck transport keys stay square (shared style makes .transport-btn round) */
body.hx-hw.hx-hw .deck .transport-btn {
    border-radius: 10px !important;
    box-shadow: var(--hx-key-shadow) !important;
}
body.hx-hw.hx-hw .deck .transport-btn.play-btn:is(.active, .playing),
body.hx-hw.hx-hw .deck :is(.sync-btn, .keylock-btn, .cue-headphone-btn, .transform-btn, .loop-btn):is(.active, .in-sync),
body.hx-hw.hx-hw .mixer .cue-headphone-btn.active,
body.hx-hw.hx-hw .deck .transport-btn.cue-btn.active {
    color: #061014 !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}
/* Recording keeps its pulse: colour only, no !important shadow */
body.hx-hw.hx-hw .record-btn.recording {
    background: linear-gradient(180deg, #ff3030, #9c0e12) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,48,48,.5);
}

/* Performance pads: backlit rubber in the deck colour */
body.hx-hw.hx-hw .performance-pad {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: color-mix(in srgb, var(--hx-acc) 60%, #fff) !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--hx-acc) 14%, #26262a), #141416 70%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px color-mix(in srgb, var(--hx-acc) 30%, #0a0a0b), inset 0 -3px 0 color-mix(in srgb, var(--hx-acc) 45%, #000), 0 3px 0 #000;
}
body.hx-hw.hx-hw .performance-pad:is(.active, .flash, .set, .has-cue, :active) {
    color: #061014 !important;
    background: radial-gradient(90% 80% at 50% 45%, #fff 0, var(--hx-acc) 38%, color-mix(in srgb, var(--hx-acc) 45%, #000) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px var(--hx-acc-dim), 0 3px 0 #000;
}

/* ---------- Faders and EQ: machined caps (tracks and fills untouched) ---------- */
body.hx-hw.hx-hw .knob-vertical::-webkit-slider-thumb {
    background:
        linear-gradient(90deg, transparent 45%, #f2f0ec 45% 55%, transparent 55%),
        linear-gradient(180deg, #55555b, #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,.8), 0 0 8px rgba(255,160,40,.35) !important;
}
body.hx-hw.hx-hw .knob-vertical::-moz-range-thumb {
    background: linear-gradient(180deg, #55555b, #1c1c1f) !important;
    border: 1px solid #000 !important;
}
body.hx-hw.hx-hw :is(.volume-fader, .pitch-slider, .crossfader, .master-slider)::-webkit-slider-thumb {
    background:
        repeating-linear-gradient(180deg, 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;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 6px rgba(0,0,0,.85) !important;
}
body.hx-hw.hx-hw :is(.volume-fader, .pitch-slider, .crossfader, .master-slider)::-moz-range-thumb {
    background: linear-gradient(180deg, #5a5a60, #1c1c1f) !important;
    border: 1px solid #000 !important;
    border-radius: 4px !important;
}

/* Meters */
body.hx-hw.hx-hw :is(.vu-meter, .master-meter, .meter-bar) {
    background: #0b0b0c !important;
    border: 0 !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1c1c1f !important;
}

/* Labels */
body.hx-hw.hx-hw :is(.dj-console, .dj-header) :is(label, .strip-control span, .channel-label) {
    font-family: var(--hx-font) !important;
    letter-spacing: .14em;
    color: var(--hx-mute) !important;
}

/* Settings / library panels */
body.hx-hw.hx-hw :is(.settings-panel, .library-panel, .modal-content) {
    background: linear-gradient(180deg, #19191c, #0e0e10) !important;
    border: 0 !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;
}