/*
 * V-MIDI — HOLOGRAPHX HARDWARE control styles (pairs with hx-vmidi-hw.js).
 * Only controls with class .hw (control.hwStyle set) are affected; older layouts keep their look.
 * Values arrive as CSS variables: --v (0..1), --x/--y (XY), --a (encoder angle).
 * Performance: no transitions on value-driven parts, rotations on composited layers,
 * no blurred glows on anything that updates while dragging.
 */

/* ---------- All controls: no easing lag on value parts (look unchanged) ---------- */
.knob-arc, .fader-fill { transition: none !important; }

/* ---------- Shared frame ---------- */
.control.hw { --v: 0; --x: .5; --y: .5; --a: 0deg; --ink: #d9d6d1; --mute: #8f8c88; }
.control.hw:not(.no-border) > .control-inner-border {
    background: linear-gradient(180deg, #17171b, #0e0e11) !important;
    border: 1px solid #26262b !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.5) !important;
}
body:not(.performance-mode) .control.hw:not(.no-border):hover > .control-inner-border { border-color: #3b3b42 !important; }
.control.hw.selected > .control-inner-border { border-color: var(--hx-acc, #1fe3ff) !important; box-shadow: 0 0 0 1px var(--hx-acc, #1fe3ff) !important; }
.control.hw .control-label {
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    font-weight: 700;
    letter-spacing: .14em;
    color: color-mix(in srgb, var(--acc) 30%, #a9a6a2) !important;
}
.control.hw .control-value {
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    color: var(--acc) !important;
    background: #070809 !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1e1e22;
    border-radius: 4px !important;
}
.control.hw .note-info { color: var(--mute) !important; background: none !important; box-shadow: none; }

/* ================= KNOB ================= */
.control.hw .knob > :is(.knob-svg, .knob-pointer) { display: none !important; }
.control.hw .knob { cursor: ns-resize; }
.hw-knob { position: absolute; inset: 0; pointer-events: none; }
.hw-knob > * { position: absolute; border-radius: 50%; }
.hw-scale { inset: 0; }
.hw-tick, .hw-led { position: absolute; left: 50%; top: 0; width: 0; height: 50%; transform-origin: 50% 100%; transform: rotate(var(--t)); }
.hw-tick::before { content: ''; position: absolute; left: -1px; top: 1%; width: 2px; height: 7%; border-radius: 1px; background: #4a4a50; }
.hw-ring {
    inset: 9%;
    background: conic-gradient(from -135deg, var(--acc) 0deg calc(var(--v) * 270deg), #2a2a2f 0deg 270deg, transparent 0deg);
    -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 83.5%);
            mask: radial-gradient(closest-side, transparent 82%, #000 83.5%);
}
.hw-cap {
    inset: 21%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(0,0,0,.28) 62%, transparent 66%),
        conic-gradient(from 10deg, #dedee2, #9c9ca2, #e8e8ec, #8e8e94, #dcdce0, #a1a1a7, #e4e4e8, #95959b, #dedee2);
    box-shadow: 0 0 0 3px #111114, 0 0 0 4px #2d2d33, 0 6px 10px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.6);
}
.hw-ind { position: absolute; inset: 0; border-radius: 50%; transform: rotate(calc(var(--v) * 270deg - 135deg)); will-change: transform; }
.hw-ind::before { content: ''; position: absolute; left: 50%; top: 5%; width: 7%; height: 36%; margin-left: -3.5%; border-radius: 3px; background: #141416; }

/* LED ring: 15 LEDs lit up to the value (pure CSS, one variable) */
.control.hw[data-hw="ledring"] .hw-ring { display: none; }
.control.hw[data-hw="ledring"] .hw-scale { display: none; }
.hw-leds { inset: 0; }
.hw-led::before {
    content: ''; position: absolute; left: -3.2cqw; top: 3%; width: 6.4cqw; height: 6.4cqw; border-radius: 50%;
    background: var(--acc);
    opacity: clamp(.13, calc((var(--v) * 14 - var(--i) + 1) * 1), 1);
}
.control.hw[data-hw="ledring"] .hw-cap {
    inset: 19%;
    background: radial-gradient(circle at 50% 30%, #3a3a40, #1b1b1e 62%, #121214);
    box-shadow: 0 0 0 2px #0b0b0c, 0 5px 9px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
.control.hw[data-hw="ledring"] .hw-ind::before { top: 9%; width: 9%; height: 9%; margin-left: -4.5%; border-radius: 50%; background: #f2f0ec; }

/* Soft touch: big matte cap, thin arc, accent dot */
.control.hw[data-hw="soft"] .hw-ring { inset: 3%; -webkit-mask: radial-gradient(closest-side, transparent 91%, #000 92.5%); mask: radial-gradient(closest-side, transparent 91%, #000 92.5%); }
.control.hw[data-hw="soft"] .hw-scale { display: none; }
.control.hw[data-hw="soft"] .hw-cap {
    inset: 12%;
    background: radial-gradient(circle at 50% 28%, #34343a, #202024 55%, #161619);
    box-shadow: 0 8px 14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.5);
}
.control.hw[data-hw="soft"] .hw-ind::before { top: 8%; width: 8%; height: 8%; margin-left: -4%; border-radius: 50%; background: var(--acc); }

/* Chicken head: vintage pointer over a tick scale, no arc */
.control.hw[data-hw="chicken"] .hw-ring { display: none; }
.control.hw[data-hw="chicken"] .hw-tick::before { height: 9%; width: 2px; background: #9a978f; }
.control.hw[data-hw="chicken"] .hw-cap {
    inset: 22%;
    background: radial-gradient(circle at 50% 35%, #2f2f33, #141416 70%);
    box-shadow: 0 0 0 2px #0b0b0c, 0 6px 10px rgba(0,0,0,.7);
}
.control.hw[data-hw="chicken"] .hw-ind::before {
    top: -22%; width: 30%; height: 72%; margin-left: -15%; border-radius: 45% 45% 30% 30%;
    background: linear-gradient(90deg, #cfc9bb, #f1ece0 45%, #d8d2c4);
    box-shadow: 0 4px 6px rgba(0,0,0,.6);
    clip-path: polygon(50% 0, 88% 62%, 80% 100%, 20% 100%, 12% 62%);
}
.control.hw[data-hw="chicken"] .hw-ind::after { content: ''; position: absolute; left: 50%; top: -18%; width: 2px; height: 26%; margin-left: -1px; background: #141416; }

/* Rotary switch mode: bigger detent marks, no arc */
.control.hw[data-hw-mode="switch"] .hw-ring { display: none; }
.control.hw[data-hw-mode="switch"] .hw-scale { display: block; }
.control.hw[data-hw-mode="switch"] .hw-tick::before { top: 0; width: 4px; left: -2px; height: 8%; background: #b9b5b0; }

/* Encoder mode: knurled endless cap turned by --a, no scale or arc */
.control.hw[data-hw-mode="encoder"] :is(.hw-ring, .hw-scale, .hw-leds) { display: none; }
.control.hw[data-hw-mode="encoder"] .hw-cap {
    inset: 12%;
    background:
        radial-gradient(circle, #2a2a2e 0 58%, transparent 59%),
        repeating-conic-gradient(#46464c 0 5deg, #232326 5deg 10deg);
    box-shadow: 0 0 0 2px #0b0b0c, 0 6px 10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);
    transform: rotate(var(--a)); will-change: transform;
}
.control.hw[data-hw-mode="encoder"] .hw-ind { transform: none; }
.control.hw[data-hw-mode="encoder"] .hw-ind::before { top: 12%; width: 7%; height: 18%; margin-left: -3.5%; background: var(--acc); border-radius: 3px; }

/* ================= FADER ================= */
.control.hw .fader-container { padding-left: 8px; padding-right: 8px; }
.control.hw .fader-track {
    --cap: clamp(20px, 13%, 34px);
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    cursor: ns-resize;
}
.control.hw .fader-track::before {
    content: ''; position: absolute; left: 50%; top: calc(var(--cap) / 2 - 3px); bottom: calc(var(--cap) / 2 - 3px); width: 8px; margin-left: -4px;
    border-radius: 4px; background: #060607; box-shadow: inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.06);
}
.control.hw .fader-fill {
    left: 50% !important; right: auto !important; bottom: calc(var(--cap) / 2) !important; top: auto !important;
    width: 3px !important; margin-left: -1.5px;
    height: calc(var(--v) * (100% - var(--cap))) !important;
    background: var(--acc) !important; border-radius: 2px !important;
}
.control.hw .fader-handle {
    position: absolute !important;
    left: 50% !important;
    top: calc((1 - var(--v)) * (100% - var(--cap))) !important;
    width: min(64%, 70px) !important; height: var(--cap) !important;
    transform: translateX(-50%) !important;
    border: 0 !important; border-radius: 3px !important;
    background: linear-gradient(180deg, #74747a, #45454b 44%, #2c2c30 50%, #4e4e54 56%, #3a3a3f) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.28) !important;
    will-change: top;
}
.hw-grip { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; margin-top: -1px; background: var(--acc); border-radius: 1px; }
.hw-scale:is(.fader-track > .hw-scale) {
    position: absolute; inset: calc(var(--cap) / 2) 0; border-radius: 0;
    background:
        repeating-linear-gradient(180deg, #3a3a40 0 1px, transparent 1px 10%) left 18% top 0 / 10% 100% no-repeat,
        repeating-linear-gradient(180deg, #3a3a40 0 1px, transparent 1px 10%) right 18% top 0 / 10% 100% no-repeat;
}

/* LED column / meter */
.hw-segs { position: absolute; left: 50%; top: calc(var(--cap) / 2); bottom: calc(var(--cap) / 2); width: 34%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 2px; }
.hw-seg { flex: 1; border-radius: 1px; background: var(--acc); opacity: clamp(.12, calc((var(--v) * 16 - var(--i)) * 1), 1); }
.hw-seg[data-z="g"] { background: #3cf07a; }
.hw-seg[data-z="y"] { background: #ffc62e; }
.hw-seg[data-z="r"] { background: #ff3b3b; }
.control.hw[data-hw="led"] .fader-track::before, .control.hw[data-hw="led"] .fader-fill, .control.hw[data-hw="led"] .hw-scale { display: none; }
.control.hw[data-hw="led"] .fader-handle { width: min(78%, 80px) !important; height: 8px !important; --cap: 8px; top: calc((1 - var(--v)) * (100% - 8px)) !important; background: #d9d6d1 !important; opacity: .9; }
.control.hw[data-hw="led"] .fader-track { --cap: 8px; }
.control.hw[data-hw="led"] .hw-grip { display: none; }
.control.hw[data-hw-mode="meter"] :is(.fader-handle, .fader-fill, .hw-scale) { display: none !important; }
.control.hw[data-hw-mode="meter"] .fader-track::before { display: none; }
.control.hw[data-hw-mode="meter"] :is(.fader-track, .knob) { cursor: default; }
.control.hw[data-hw-mode="meter"] .hw-segs { width: 46%; }

/* Slim */
.control.hw[data-hw="slim"] .fader-track::before { width: 3px; margin-left: -1.5px; background: #2a2a2f; box-shadow: none; }
.control.hw[data-hw="slim"] .hw-scale { display: none; }
.control.hw[data-hw="slim"] .fader-track { --cap: 22px; }
.control.hw[data-hw="slim"] .fader-handle {
    width: 22px !important; border-radius: 50% !important;
    background: radial-gradient(circle at 50% 35%, #4a4a50, #1b1b1e 70%) !important;
    box-shadow: 0 0 0 2px var(--acc), 0 3px 6px rgba(0,0,0,.7) !important;
}
.control.hw[data-hw="slim"] .hw-grip { display: none; }

/* Touch strip: capless glowing strip */
.control.hw[data-hw="touch"] .fader-track { --cap: 2px; }
.control.hw[data-hw="touch"] .fader-track::before { width: 46%; margin-left: -23%; top: 0; bottom: 0; border-radius: 10px; }
.control.hw[data-hw="touch"] .fader-fill { width: 46% !important; margin-left: -23%; bottom: 0 !important; height: calc(var(--v) * 100%) !important; border-radius: 10px !important; background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 35%, #000), var(--acc)) !important; }
.control.hw[data-hw="touch"] :is(.fader-handle, .hw-scale) { opacity: 0 !important; }

/* Horizontal (crossfader) */
.control.hw[data-hw-orient="h"] .fader-container { padding-top: 26px; padding-bottom: 24px; }
.control.hw[data-hw-orient="h"] .fader-track { cursor: ew-resize; }
.control.hw[data-hw-orient="h"] .fader-track::before { left: calc(var(--cap) / 2 - 3px); right: calc(var(--cap) / 2 - 3px); top: 50%; bottom: auto; width: auto; height: 8px; margin: -4px 0 0; }
.control.hw[data-hw-orient="h"] .fader-fill { left: calc(var(--cap) / 2) !important; top: 50% !important; bottom: auto !important; height: 3px !important; margin: -1.5px 0 0; width: calc(var(--v) * (100% - var(--cap))) !important; }
.control.hw[data-hw-orient="h"] .fader-handle {
    left: calc(var(--v) * (100% - var(--cap))) !important; top: 50% !important;
    width: var(--cap) !important; height: min(70%, 60px) !important; transform: translateY(-50%) !important;
    background: linear-gradient(90deg, #74747a, #45454b 44%, #2c2c30 50%, #4e4e54 56%, #3a3a3f) !important;
    will-change: left;
}
.control.hw[data-hw-orient="h"] .hw-grip { left: 50%; right: auto; top: 14%; bottom: 14%; width: 2px; height: auto; margin: 0 0 0 -1px; }
.control.hw[data-hw-orient="h"] .fader-track > .hw-scale {
    inset: 0 calc(var(--cap) / 2);
    background:
        linear-gradient(90deg, #6a6a70, #6a6a70) 50% 8% / 2px 18% no-repeat,
        repeating-linear-gradient(90deg, #3a3a40 0 1px, transparent 1px 10%) left 0 top 12% / 100% 12% no-repeat,
        repeating-linear-gradient(90deg, #3a3a40 0 1px, transparent 1px 10%) left 0 bottom 12% / 100% 12% no-repeat;
}
.control.hw[data-hw-orient="h"] .hw-segs { left: calc(var(--cap) / 2); right: calc(var(--cap) / 2); top: 50%; bottom: auto; width: auto; height: 30%; transform: translateY(-50%); flex-direction: row; }
.control.hw[data-hw-orient="h"][data-hw="led"] .fader-handle { width: 8px !important; height: min(80%, 60px) !important; left: calc(var(--v) * (100% - 8px)) !important; }
.control.hw[data-hw-orient="h"][data-hw="touch"] .fader-track::before { left: 0; right: 0; top: 50%; height: 46%; margin-top: -23%; width: auto; margin-left: 0; }
.control.hw[data-hw-orient="h"][data-hw="touch"] .fader-fill { height: 46% !important; margin: 0; top: 27% !important; left: 0 !important; width: calc(var(--v) * 100%) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 35%, #000), var(--acc)) !important; }
.control.hw[data-hw-orient="h"][data-hw="slim"] .fader-handle { width: 22px !important; height: 22px !important; }

/* ================= BUTTON ================= */
.control.hw .button-pad { transition: transform .05s !important; position: relative; overflow: hidden; }
.control.hw:not(.hw-img) .button-pad {
    border: 0 !important; border-radius: 10px !important;
    background: linear-gradient(180deg, #2f2f34, #1c1c1f) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px #0a0a0b, 0 3px 0 #000, 0 5px 10px rgba(0,0,0,.5) !important;
}
.control.hw:not(.hw-img) .button-pad:is(.active, .toggle-on) {
    background: linear-gradient(180deg, var(--lit), color-mix(in srgb, var(--lit) 55%, #000)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(0,0,0,.4), 0 2px 0 #000, 0 0 14px color-mix(in srgb, var(--lit) 45%, transparent) !important;
}
.control.hw .button-pad.active { transform: translateY(1px) !important; }

/* Backlit: LED strip on top */
.control.hw:not(.hw-img)[data-hw="backlit"] .button-pad { border-radius: 6px !important; background: linear-gradient(180deg, #232327, #121214) !important; }
.hw-led-strip { position: absolute; left: 14%; right: 14%; top: 12%; height: 9%; min-height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--lit) 22%, #111); box-shadow: inset 0 1px 2px #000; }
.control.hw[data-hw="backlit"] .button-pad:is(.active, .toggle-on) .hw-led-strip { background: var(--lit); box-shadow: 0 0 10px var(--lit); }
.control.hw:not(.hw-img)[data-hw="backlit"] .button-pad:is(.active, .toggle-on) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--lit) 22%, #1d1d21), #121214) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lit) 60%, #000), 0 2px 0 #000 !important;
}

/* Round cap */
.control.hw[data-hw="round"] .button-pad { width: auto !important; height: 100% !important; max-width: 100%; aspect-ratio: 1; border-radius: 50% !important; }
.control.hw:not(.hw-img)[data-hw="round"] .button-pad {
    background: radial-gradient(circle at 50% 35%, #3b3b41, #1b1b1e 65%) !important;
    box-shadow: 0 0 0 3px #0c0c0d, 0 0 0 5px color-mix(in srgb, var(--acc) 55%, #1c1c1f), 0 5px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.control.hw:not(.hw-img)[data-hw="round"] .button-pad:is(.active, .toggle-on) {
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--lit) 60%, #fff), var(--lit) 45%, color-mix(in srgb, var(--lit) 50%, #000)) !important;
    box-shadow: 0 0 0 3px #0c0c0d, 0 0 0 5px var(--lit), 0 0 14px color-mix(in srgb, var(--lit) 45%, transparent) !important;
}

/* Toggle switch: lever flips with state */
.control.hw:not(.hw-img)[data-hw="toggle"] .button-pad,
.control.hw:not(.hw-img)[data-hw="toggle"] .button-pad:is(.active, .toggle-on) {
    background: transparent !important; box-shadow: none !important; transform: none !important;
}
.hw-lever {
    position: absolute; left: 50%; top: 50%; width: min(46%, 70px); aspect-ratio: 1; transform: translate(-50%, -40%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #6a6a70, #2a2a2e 60%, #151517);
    box-shadow: 0 0 0 3px #0c0c0d, 0 0 0 4px #34343a, 0 4px 8px rgba(0,0,0,.7);
}
.hw-lever > i {
    position: absolute; left: 50%; bottom: 50%; width: 26%; height: 120%; margin-left: -13%;
    border-radius: 40% 40% 20% 20%;
    background: linear-gradient(90deg, #8a8a90, #eeeef2 45%, #9d9da3);
    box-shadow: 0 3px 5px rgba(0,0,0,.6);
    transform-origin: 50% 100%; transform: rotate(180deg);
}
.control.hw[data-hw="toggle"] .button-pad:is(.toggle-on, .active) .hw-lever > i { transform: rotate(0deg); }
.hw-toggle-led { position: absolute; left: 50%; top: 6%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #2a1414; box-shadow: inset 0 1px 2px #000; }
.control.hw[data-hw="toggle"] .button-pad:is(.toggle-on, .active) .hw-toggle-led { background: var(--lit); box-shadow: 0 0 8px var(--lit); }

/* ================= PAD ================= */
.control.hw .note-pad { transition: transform .05s !important; }
.control.hw .note-pad-glow { display: none !important; }
.control.hw:not(.hw-img) .note-pad {
    border: 0 !important; border-radius: 9px !important;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 14%, #29292e), #151518 70%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, #0a0a0b), inset 0 -3px 0 color-mix(in srgb, var(--acc) 40%, #000), 0 3px 0 #000 !important;
}
.control.hw:not(.hw-img) .note-pad.active {
    background: radial-gradient(90% 80% at 50% 45%, #fff 0, var(--lit) 36%, color-mix(in srgb, var(--lit) 45%, #000) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px color-mix(in srgb, var(--lit) 45%, transparent), 0 2px 0 #000 !important;
}
.control.hw:not(.hw-img)[data-hw="grey"] .note-pad {
    background: linear-gradient(180deg, #c9c7c2, #aeaca7) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 #8e8c87, 0 3px 0 #000 !important;
}
.control.hw:not(.hw-img)[data-hw="grey"] .note-pad.active {
    background: radial-gradient(90% 80% at 50% 45%, #fff, color-mix(in srgb, var(--lit) 70%, #c9c7c2)) !important;
    box-shadow: inset 0 0 0 2px var(--lit), 0 0 14px color-mix(in srgb, var(--lit) 45%, transparent), 0 2px 0 #000 !important;
}
.control.hw[data-hw="grey"] .control-label { color: #3a3a3e !important; }
.control.hw:not(.hw-img)[data-hw="flat"] .note-pad { border-radius: 4px !important; background: #19191c !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 50%, #19191c) !important; }
.control.hw:not(.hw-img)[data-hw="flat"] .note-pad.active { background: var(--lit) !important; box-shadow: inset 0 0 0 2px var(--lit) !important; }

/* ================= XY ================= */
.control.hw .xypad-container {
    border: 0 !important; border-radius: 8px !important; cursor: crosshair;
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--acc) 18%, transparent) calc(50% - .5px) calc(50% + .5px), transparent 0),
        linear-gradient(0deg, transparent calc(50% - .5px), color-mix(in srgb, var(--acc) 18%, transparent) calc(50% - .5px) calc(50% + .5px), transparent 0),
        linear-gradient(90deg, color-mix(in srgb, var(--acc) 9%, transparent) 1px, transparent 1px) 0 0 / 25% 25%,
        linear-gradient(0deg, color-mix(in srgb, var(--acc) 9%, transparent) 1px, transparent 1px) 0 0 / 25% 25%,
        linear-gradient(180deg, color-mix(in srgb, var(--acc) 6%, #050606), color-mix(in srgb, var(--acc) 10%, #0a0b0c)) !important;
    box-shadow: inset 0 2px 8px #000, inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, #0a0a0a) !important;
}
.control.hw[data-hw="surface"] .xypad-container {
    background: radial-gradient(circle, #2b2b30 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(180deg, #1d1d21, #131316) !important;
    box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px #2a2a2f !important;
}
.control.hw .xypad-cursor {
    width: 22px !important; height: 22px !important; box-sizing: border-box;
    left: calc(11px + var(--x) * (100% - 22px)) !important; top: calc(11px + var(--y) * (100% - 22px)) !important;
    border: 2px solid var(--acc) !important; background: radial-gradient(circle, var(--acc) 0 3px, #0b0c0d 3.5px) !important;
    box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.7) !important;
}
.control.hw[data-hw="surface"] .xypad-cursor { width: 26px !important; height: 26px !important; left: calc(13px + var(--x) * (100% - 26px)) !important; top: calc(13px + var(--y) * (100% - 26px)) !important; border-color: #d9d6d1 !important; background: radial-gradient(circle at 50% 35%, #5a5a60, #1b1b1e 70%) !important; }
.control.hw .xypad-crosshair-h { top: calc(11px + var(--y) * (100% - 22px)) !important; background: color-mix(in srgb, var(--acc) 40%, transparent) !important; }
.control.hw .xypad-crosshair-v { left: calc(11px + var(--x) * (100% - 22px)) !important; background: color-mix(in srgb, var(--acc) 40%, transparent) !important; }
.control.hw[data-hw="surface"] .xypad-crosshair-h { top: calc(13px + var(--y) * (100% - 26px)) !important; }
.control.hw[data-hw="surface"] .xypad-crosshair-v { left: calc(13px + var(--x) * (100% - 26px)) !important; }

/* ================= KEYBOARD ================= */
.control.hw .white-key {
    background: linear-gradient(180deg, #f4f2ee, #dedad3) !important;
    border: 1px solid #0c0c0d !important; border-top: 0 !important; border-radius: 0 0 5px 5px !important;
    box-shadow: inset 0 -6px 0 #cbc7bf, inset 0 1px 0 #fff !important; transition: none !important;
}
.control.hw .white-key.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--lit) 45%, #fff), color-mix(in srgb, var(--lit) 65%, #ccc)) !important;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--lit) 60%, #999) !important;
}
.control.hw .black-key {
    background: linear-gradient(180deg, #3b3b40, #0f0f11 85%, #26262a) !important;
    border: 1px solid #000 !important; border-radius: 0 0 4px 4px !important;
    box-shadow: inset 0 -4px 0 #1b1b1e, inset 1px 0 0 rgba(255,255,255,.1), 0 3px 4px rgba(0,0,0,.5) !important; transition: none !important;
}
.control.hw .black-key.active { background: linear-gradient(180deg, color-mix(in srgb, var(--lit) 70%, #333), color-mix(in srgb, var(--lit) 40%, #000)) !important; box-shadow: inset 0 -1px 0 #000 !important; }
.control.hw[data-hw="flat"] .white-key { background: #e9e7e2 !important; box-shadow: none !important; border-radius: 0 !important; border-color: #1a1a1d !important; }
.control.hw[data-hw="flat"] .white-key.active { background: var(--lit) !important; }
.control.hw[data-hw="flat"] .black-key { background: #1a1a1d !important; box-shadow: none !important; border-radius: 0 !important; }
.control.hw[data-hw="flat"] .black-key.active { background: var(--lit) !important; }
.control.hw .keyboard-octave-label { font-family: 'Orbitron', sans-serif; color: var(--mute) !important; letter-spacing: .14em; }

/* ================= LABEL ================= */
.label-plate { position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.label-plate-text { font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96%; }
.control.hw[data-type="label"] .label-plate { border-radius: 6px; background: linear-gradient(180deg, #1c1c20, #121214); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #26262b; }
.control.hw[data-type="label"] .label-plate-text { font-family: 'Orbitron', sans-serif; color: color-mix(in srgb, var(--acc) 30%, #d9d6d1) !important; text-shadow: 0 1px 0 #000; }
.control.hw[data-hw="lcd"][data-type="label"] .label-plate { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 6%, #050606), color-mix(in srgb, var(--acc) 10%, #0a0b0c)); box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, #0a0a0a); }
.control.hw[data-hw="lcd"][data-type="label"] .label-plate-text { color: var(--acc) !important; text-shadow: 0 0 6px color-mix(in srgb, var(--acc) 45%, transparent); }

/* ================= ADD picker ================= */
.hw-add-btn span { font-weight: 800; }
.hw-add-panel {
    position: fixed; z-index: 3000; width: min(640px, calc(100vw - 16px)); max-height: min(72vh, 640px);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #1a1a1d, #0e0e10); border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 24px 60px rgba(0,0,0,.75);
    font-family: 'Orbitron', 'Rajdhani', sans-serif; color: #d9d6d1;
}
.hw-add-panel[hidden] { display: none; }
.hw-add-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; font-size: 12px; font-weight: 800; letter-spacing: .22em; color: var(--hx-acc, #1fe3ff); }
.hw-add-close { background: none; border: 0; color: #8f8c88; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.hw-add-body { overflow: auto; padding: 0 14px 14px; }
.hw-add-group h4 { margin: 10px 0 8px; font-size: 10px; letter-spacing: .24em; color: #8f8c88; font-weight: 700; }
.hw-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.hw-add-tile, .hw-style-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px;
    border: 0; border-radius: 9px; cursor: pointer; color: #b9b5b0;
    background: linear-gradient(180deg, #202024, #151518);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px #0a0a0b, 0 2px 0 #000;
    font: 700 9px/1.2 'Orbitron', 'Rajdhani', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.hw-add-tile:hover, .hw-style-tile:hover { filter: brightness(1.18); }
.hw-add-tile:focus-visible, .hw-style-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hw-add-preview, .hw-style-preview { position: relative; width: 84px; height: 60px; pointer-events: none; overflow: hidden; }
.hw-add-preview > .control, .hw-style-preview > .control { position: absolute !important; left: 50%; top: 50%; transform-origin: 50% 50%; }
.hw-grid-preview { display: grid; grid-template-columns: repeat(4, 13px); grid-auto-rows: 13px; gap: 2px; place-content: center; }
.hw-grid-preview > .control { position: relative !important; left: 0; top: 0; transform: scale(.2167); transform-origin: 0 0; }
.hw-preview-control .control-inner-border .resize-handle { display: none; }

/* ================= Inspector STYLE section ================= */
.hw-style-section { margin: 0 0 12px; padding: 10px; border-radius: 10px; background: #0f0f11; box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1d1d21; }
.hw-style-section[hidden] { display: none; }
.hw-sec-title { font: 800 10px/1 'Orbitron', sans-serif; letter-spacing: .24em; color: var(--hx-acc, #1fe3ff); margin-bottom: 8px; }
.hw-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hw-style-tile { padding: 6px 4px; font-size: 8px; }
.hw-style-preview { width: 58px; height: 46px; }
#inspector .hw-style-tile.active, .hw-style-tile.active { color: #fff !important; box-shadow: inset 0 0 0 2px var(--hx-acc, #1fe3ff), 0 2px 0 #000 !important; }
.hw-text-tile { justify-content: center; min-height: 40px; }
.hw-mode-row { display: flex; gap: 8px; margin-top: 10px; }
.hw-mode-row[hidden], .hw-hint[hidden], .hw-positions[hidden] { display: none; }
.hw-mode-row label { display: flex; flex-direction: column; gap: 4px; font: 700 9px/1 'Orbitron', sans-serif; letter-spacing: .14em; color: #8f8c88; flex: 1; }
.hw-mode-row select, .hw-mode-row input { width: 100%; }
.hw-hint { margin: 8px 0 0; font: 700 8px/1.4 'Orbitron', sans-serif; letter-spacing: .12em; color: #6f6c68; }
#inspector[data-hw-type="label"] .inspector-row.cc-row { display: none; }

@media (prefers-reduced-motion: reduce) {
    .control.hw :is(.button-pad, .note-pad) { transition: none !important; }
}