/*
 * BASS-X — HOLOGRAPHX HARDWARE skin (v1)
 * Loaded last. Visual only. Remove the <link> and body class "hx-hw" to return to the previous look.
 */

body.hx-hw {
    --hx-acc: #ffa21a;
    --hx-acc-rgb: 255, 162, 26;
    background: #050506 !important;
}

/* ---------- Chassis ---------- */
body.hx-hw.hx-hw #app {
    background: var(--hx-chassis) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px #1d1d20;
    border-radius: 18px;
    position: relative;
}
body.hx-hw.hx-hw #app::before,
body.hx-hw.hx-hw #app::after {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        linear-gradient(35deg, transparent 44%, #0c0c0e 44% 56%, transparent 56%),
        radial-gradient(circle at 35% 30%, #6a6a70, #2a2a2e 55%, #141416);
    box-shadow: inset 0 -1px 1px #000;
    pointer-events: none;
    z-index: 1;
}
body.hx-hw.hx-hw #app::before { left: 8px; }
body.hx-hw.hx-hw #app::after { right: 8px; }

/* ---------- Header ---------- */
body.hx-hw.hx-hw header {
    margin: 10px 12px 0;
    border-radius: 12px;
    border: 0 !important;
    background: var(--hx-bar-bg) !important;
    box-shadow: var(--hx-bar-shadow) !important;
}
body.hx-hw.hx-hw .logo-section h1 {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    color: #f1efec !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 1px 0 #000 !important;
    display: flex;
    align-items: center;
}
body.hx-hw.hx-hw .logo-section h1::before {
    content: "";
    width: 26px;
    height: 26px;
    margin-right: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #fff 0, var(--hx-acc) 22%, rgba(0,0,0,.6) 40%, #1b1b1e 41% 56%, #0a0a0b 57%);
    box-shadow: inset 0 0 0 2px #2c2c30, 0 0 12px var(--hx-acc-dim);
}
body.hx-hw.hx-hw .logo-section .subtitle {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .3em !important;
    color: var(--hx-acc) !important;
    opacity: .8;
    padding-left: 38px;
}
body.hx-hw.hx-hw :is(.tempo-control, .swing-control, .seq-length-control, .knob-container, .midi-io, .midi-notes-section, .midi-learn-section, .bus-channel, .preset-section, .control-group) > label,
body.hx-hw.hx-hw .section-label {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    color: var(--hx-mute) !important;
    text-shadow: none !important;
}

/* Swing: machined fader */
body.hx-hw.hx-hw #swing {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #0b0b0c !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #202024 !important;
    accent-color: var(--hx-acc);
}
body.hx-hw.hx-hw #swing::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 28px;
    border-radius: 4px;
    background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(0,0,0,.45) 4px 5px), linear-gradient(180deg, #4a4a50, #1c1c1f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.8), 0 0 0 1px #000;
    border: 0;
}
body.hx-hw.hx-hw #swing::-moz-range-thumb {
    width: 16px;
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(180deg, #4a4a50, #1c1c1f);
    border: 0;
}

/* ---------- Wells ---------- */
body.hx-hw.hx-hw :is(.synth-controls, .sequencer-section, .keyboard-section) {
    background: var(--hx-well-bg) !important;
    box-shadow: var(--hx-well-shadow) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-well) !important;
}

/* App-specific keys */
body.hx-hw.hx-hw :is(.wave-btn, .scatter-hold-btn, .settings-mini-btn, .export-option),
body.hx-hw.hx-hw .preset-section button,
body.hx-hw.hx-hw .pattern-save-section button {
    font-family: var(--hx-font) !important;
    font-style: normal !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) !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw :is(.wave-btn, .scatter-hold-btn).active {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}
body.hx-hw.hx-hw .export-menu {
    background: linear-gradient(180deg, #1a1a1d, #0e0e10) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px #26262a, 0 18px 40px rgba(0,0,0,.7) !important;
}

/* ---------- Knobs: machined cap inside the accent ring ---------- */
body.hx-hw.hx-hw .knob {
    background: #0b0b0c !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px #000, 0 0 10px var(--hx-acc-dim) !important;
}
body.hx-hw.hx-hw .knob::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 28%, #58585e 0, #2a2a2e 38%, #141416 72%);
    box-shadow: 0 4px 8px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.6);
    pointer-events: none;
}
body.hx-hw.hx-hw .knob-track { stroke: #232326 !important; }
body.hx-hw.hx-hw .knob-arc {
    stroke: var(--hx-acc) !important;
}
body.hx-hw.hx-hw .knob.midi-learning .knob-arc { stroke: #39e27a !important; }
body.hx-hw.hx-hw .knob-value {
    z-index: 1;
    font-family: var(--hx-mono) !important;
    font-weight: 700 !important;
    color: #f2f0ec !important;
    text-shadow: 0 1px 1px #000 !important;
}

/* Level meter LEDs */
body.hx-hw.hx-hw .vu-meter-vertical {
    background: #0b0b0c !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px #1c1c1f !important;
}
body.hx-hw.hx-hw .vu-led { background: #1e1e21 !important; box-shadow: none !important; border-radius: 1px; }
body.hx-hw.hx-hw .vu-led.active[data-level="1"], body.hx-hw.hx-hw .vu-led.active[data-level="2"], body.hx-hw.hx-hw .vu-led.active[data-level="3"],
body.hx-hw.hx-hw .vu-led.active[data-level="4"], body.hx-hw.hx-hw .vu-led.active[data-level="5"] { background: #35d46f !important; box-shadow: 0 0 6px rgba(53,212,111,.7) !important; }
body.hx-hw.hx-hw .vu-led.active[data-level="6"], body.hx-hw.hx-hw .vu-led.active[data-level="7"] { background: #ffc53d !important; box-shadow: 0 0 6px rgba(255,197,61,.7) !important; }
body.hx-hw.hx-hw .vu-led.active[data-level="8"] { background: #ff3a3a !important; box-shadow: 0 0 6px rgba(255,58,58,.7) !important; }

/* ---------- Step keys ---------- */
body.hx-hw.hx-hw .step-num {
    font-family: var(--hx-mono) !important;
    color: var(--hx-mute) !important;
}
body.hx-hw.hx-hw .step-note {
    position: relative;
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #6f6c68 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, #232326, #161618) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #070708, 0 2px 0 #000 !important;
}
body.hx-hw.hx-hw .step:nth-child(4n+1) .step-note:not(.active) {
    background: linear-gradient(180deg, #2b2b2f, #1c1c1f) !important;
}
body.hx-hw.hx-hw .step-note::before {
    content: "";
    position: absolute;
    left: 24%;
    right: 24%;
    top: 7px;
    height: 4px;
    border-radius: 2px;
    background: #2a1a08;
    box-shadow: inset 0 1px 1px #000;
}
body.hx-hw.hx-hw .step-note.active {
    color: #1c1004 !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hx-acc) 88%, #fff), color-mix(in srgb, var(--hx-acc) 58%, #000)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 16px rgba(0,0,0,.2), 0 0 8px var(--hx-acc-dim), 0 2px 0 #000 !important;
}
body.hx-hw.hx-hw .step-note.playing::before { background: #fff; box-shadow: 0 0 8px #fff; }
body.hx-hw.hx-hw .step-note.rest { color: #4a4845 !important; }
body.hx-hw.hx-hw .step-note.playing {
    outline: 2px solid #f2f0ec !important;
    outline-offset: -2px;
    box-shadow: 0 0 16px rgba(255,255,255,.35), 0 2px 0 #000 !important;
}
body.hx-hw.hx-hw .step-indicator {
    border: 0 !important;
    border-radius: 50% !important;
    background: #2a2a2e !important;
    box-shadow: inset 0 1px 1px #000 !important;
}
body.hx-hw.hx-hw .step-indicator.active {
    background: var(--hx-acc) !important;
    box-shadow: 0 0 8px var(--hx-acc) !important;
}
body.hx-hw.hx-hw .step-indicator.slide.active {
    background: #f2f0ec !important;
    box-shadow: 0 0 8px #fff !important;
}
body.hx-hw.hx-hw .scatter-pad {
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #232326, #161618) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #070708, 0 2px 0 #000 !important;
    font-family: var(--hx-font) !important;
}
body.hx-hw.hx-hw :is(.scatter-zone.active, .scatter-zone.playing) .scatter-pad {
    color: #1c1004 !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}

/* ---------- Keyboard: ivory and ebony ---------- */
body.hx-hw.hx-hw .keyboard {
    background: linear-gradient(180deg, #0a0a0b, #18181b) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 6px #000 !important;
    border: 0 !important;
}
body.hx-hw.hx-hw .white-key {
    font-family: var(--hx-font) !important;
    color: #555 !important;
    border: 0 !important;
    border-radius: 0 0 7px 7px !important;
    background: linear-gradient(180deg, #d9d6d0 0, #fbfaf7 12%, #f2f0ec 85%, #d4d1cb 100%) !important;
    box-shadow: inset 0 -6px 0 #c9c5be, inset -1px 0 0 #bdb9b2, 0 3px 4px rgba(0,0,0,.6) !important;
}
body.hx-hw.hx-hw .black-key {
    font-family: var(--hx-font) !important;
    color: #8a8884 !important;
    border: 0 !important;
    border-radius: 0 0 5px 5px !important;
    background: linear-gradient(180deg, #000 0, #2a2a2e 70%, #141416 100%) !important;
    box-shadow: inset 0 -5px 0 #050505, inset 1px 0 0 #3a3a3e, 0 3px 5px rgba(0,0,0,.7) !important;
}
body.hx-hw.hx-hw :is(.white-key, .black-key):is(.active, .armed) {
    box-shadow: inset 0 0 0 2px var(--hx-acc), 0 0 16px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw .white-key:is(.active, .armed) { color: #7a4a00 !important; }
body.hx-hw.hx-hw .black-key:is(.active, .armed) { color: var(--hx-acc) !important; }

/* Chain slots */
body.hx-hw.hx-hw .chain-slot {
    font-family: var(--hx-font) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    color: var(--hx-acc) !important;
    border: 0 !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}

/* Knob captions stay compact so the patch section keeps its place */
body.hx-hw.hx-hw .knob-container > label {
    letter-spacing: .08em !important;
    white-space: nowrap;
}
body.hx-hw.hx-hw .synth-controls { flex-wrap: nowrap !important; }
/* Palette editor bridge. Default keeps the original hardware finish. */
body.hx-hw.bass-custom-palette { background:var(--bg-dark)!important; }
body.hx-hw.bass-custom-palette :is(.logo-section h1,.section-title,.knob-value) {color:var(--text)!important;}
body.hx-hw.bass-custom-palette :is(label,.control-group label,.knob-container > label) {color:var(--text-dim)!important;}
body.hx-hw.bass-custom-palette .knob::before {background:radial-gradient(circle at 38% 28%,var(--silver),var(--bg-control) 38%,color-mix(in srgb,var(--silver-dark) 35%,#000) 72%)!important;}
body.hx-hw.bass-custom-palette .knob-arc {stroke:var(--accent-cyan)!important;}
body.hx-hw.bass-custom-palette .knob-track {stroke:var(--border)!important;}
body.hx-hw.hx-hw.bass-custom-palette .step:nth-child(n) .step-note:not(.active) {background:linear-gradient(180deg,var(--bg-control),color-mix(in srgb,var(--bg-control) 65%,#000))!important;color:var(--text-dim)!important;}
body.hx-hw.bass-custom-palette :is(select,input[type="number"],input[type="text"]) {border-color:var(--border)!important;}