/* Scoped adaptations: only explicitly styled controls are affected. */
.control.hw[data-app-style] { --app-face:#242429; --app-radius:7px; }
.control.hw[data-app-finish="warm"] { --app-face:#292520; --app-radius:8px; }
.control.hw[data-app-finish="dark"] { --app-face:#16191e; --app-radius:4px; }
.control.hw[data-app-finish="modular"] { --app-face:#34343a; --app-radius:3px; }
.control.hw[data-app-finish="gamepad"] { --app-face:#28212b; --app-radius:18px; }
.control.hw[data-app-style]:not(.no-border) > .control-inner-border {
    background:linear-gradient(180deg,var(--app-face),#0c0c0f) !important;
    border-radius:var(--app-radius) !important;
}
.control.hw[data-app-style] .control-value { background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),#08090b !important; }
.control.hw[data-app-style]:not(.hw-img) .button-pad:not(.active):not(.toggle-on) {
    background:linear-gradient(180deg,var(--app-face),#101114) !important;
}
.control.hw[data-app-finish="warm"] .hw-cap {
    background:radial-gradient(circle,#ffffff0f 0 52%,transparent 53%),linear-gradient(#222224,#0c0c0e);
    box-shadow:inset 0 1px 0 #ffffff1a,inset 0 -8px 14px #0005,0 5px 10px #0006;
}
.control.hw[data-app-finish="warm"] .hw-ind::before { top:10%;width:5%;height:34%;margin-left:-2.5%;background:linear-gradient(#fff7e8,var(--acc));border-radius:3px; }
.control.hw[data-app-finish="warm"] .hw-ring { display:block;inset:3%; }
.control.hw[data-app-finish="step"]:not(.hw-img) .note-pad {
    position:relative; border-radius:7px !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 80%,#fff),var(--acc) 35%,color-mix(in srgb,var(--acc) 55%,#000)) !important;
    color:#17120d !important;
}
.control.hw[data-app-finish="step"] .note-pad::before {
    content:'';position:absolute;left:25%;right:25%;top:7%;height:4px;border-radius:3px;background:#211609;box-shadow:inset 0 1px 2px #000;
}
.control.hw[data-app-finish="step"] .note-pad.active::before {background:#fff;box-shadow:0 0 8px #fff;}
.control.hw[data-app-finish="mixer"] .fader-handle {
    border:2px solid #080809 !important;box-sizing:border-box;border-radius:3px !important;
    background:linear-gradient(#b8b8bf,#53535c 48%,#303039 52%,#777780) !important;
}
.control.hw[data-app-finish="mixer"] .hw-grip {height:6px;background:repeating-linear-gradient(0deg,#131318 0 1px,transparent 1px 3px);}
.control.hw[data-app-finish="mixer"][data-hw-orient="h"] .hw-grip {height:auto;width:6px;background:repeating-linear-gradient(90deg,#131318 0 1px,transparent 1px 3px);}
.control.hw[data-app-style="dj-x"] .fader-fill {width:30% !important;margin-left:-15%;background:linear-gradient(0deg,#07101b,var(--acc)) !important;}
.control.hw[data-app-style="dj-x"][data-hw-orient="h"] .fader-fill {width:calc(var(--v) * (100% - var(--cap))) !important;height:30% !important;margin:0;top:35% !important;}
.control.hw[data-app-finish="dark"] .hw-cap {background:radial-gradient(circle at 50% 25%,#383d48,#111319 72%);}
.control.hw[data-app-finish="gamepad"]:not(.hw-img) .button-pad {border:2px solid var(--acc) !important;background:color-mix(in srgb,var(--acc) 40%,#18101b) !important;}
.control.hw[data-app-finish="gamepad"]:not(.hw-img) .button-pad:is(.active,.toggle-on) {background:var(--lit) !important;}
.hw-app-choice {display:grid;gap:6px;margin:10px 0;font-size:11px;color:#c7cbd5;}
.hw-app-choice select {width:100%;min-width:0;min-height:36px;background:#08090c;color:#eee;border:1px solid #3a3e48;border-radius:5px;padding:6px;font:inherit;}
.hw-app-choice option {background:#08090c;color:#eee;}
.hw-app-actions {display:flex;flex-wrap:wrap;gap:6px;}
.hw-app-actions button,.hw-app-page {flex:1;min-height:36px;background:#242832;color:#eee;border:1px solid #434955;border-radius:5px;padding:7px;font-size:10px;cursor:pointer;}
.hw-app-actions button:disabled {opacity:.4;cursor:default;}
.hw-app-library {padding-bottom:16px;border-bottom:1px solid #333843;margin-bottom:14px;}
.hw-app-page {width:100%;margin-top:10px;}
.hw-add-panel {max-width:calc(100vw - 16px);z-index:12010;}

/* Source control ports. Percentages replace fixed pixels so the face retains
   its proportions inside the V-MIDI grid. Existing --v drives every value. */
/* NIGHT TRAIN: style-2d.css .nt-knob__face / indicator / ring. */
.control.hw[data-app-style="night-train"] .hw-scale {display:none;}
.control.hw[data-app-style="night-train"] .hw-cap {
    inset:14%;border:1px solid #ffffff14;
    background:radial-gradient(circle,#ffffff0f 0 52%,transparent 53%),linear-gradient(#222224f5,#0c0c0efa);
    box-shadow:inset 0 1px 0 #ffffff1a,inset 0 -8px 14px #0005,0 8px 16px #0004;
}
.control.hw[data-app-style="night-train"] .hw-cap::before {
    content:'';position:absolute;inset:11%;border-radius:50%;
    background:radial-gradient(circle at 36% 32%,#ffffff2e,#ffffff14 18%,#141416f5 58%,#08080a);
    box-shadow:inset 0 1px 0 #ffffff24,inset 0 -8px 12px #0007;
}
.control.hw[data-app-style="night-train"] .hw-cap::after {content:'';position:absolute;inset:4%;border-radius:50%;border:1px solid #ffffff14;pointer-events:none;}
.control.hw[data-app-style="night-train"] .hw-ring {inset:5%;display:block;mask:radial-gradient(closest-side,transparent 88%,#000 89%);-webkit-mask:radial-gradient(closest-side,transparent 88%,#000 89%);}
.control.hw[data-app-style="night-train"] .hw-ind {z-index:2;}
.control.hw[data-app-style="night-train"] .hw-ind::before {top:22%;height:27%;width:5%;margin-left:-2.5%;background:linear-gradient(#fff7e8,var(--acc));box-shadow:0 0 6px #f2d29b2e;}

/* BASS-X: hx-hardware-bassx.css .knob::before and .step-note. */
.control.hw[data-app-style="bass-x"] .hw-scale {display:none;}
.control.hw[data-app-style="bass-x"] .hw-knob {background:#0b0b0c;border-radius:50%;box-shadow:0 0 0 1px #000;}
.control.hw[data-app-style="bass-x"] .hw-cap {inset:18%;background:radial-gradient(circle at 38% 28%,#58585e,#2a2a2e 38%,#141416 72%);box-shadow:0 4px 8px #000c,inset 0 1px 1px #ffffff2e,inset 0 -2px 3px #0009;}
.control.hw[data-app-style="bass-x"] .hw-ring {inset:4%;}
.control.hw[data-app-style="bass-x"] .hw-ind::before {width:5%;height:25%;top:8%;margin-left:-2.5%;background:#f2f0ec;}
.control.hw[data-app-style="bass-x"]:not(.hw-img) .note-pad {border-radius:7px!important;box-shadow:inset 0 1px 0 #ffffff55,inset 0 -3px 0 #0006,0 3px 0 #000!important;}

/* ROBODRUM: drum-pad rubber cap, rather than a sequencer step slot. */
.control.hw[data-app-style="robodrum"]:not(.hw-img) .note-pad {
    border-radius:10px!important;
    background:linear-gradient(180deg,#ffffff47 0%,#ffffff0f 38%,transparent 60%,#00000038 100%),var(--acc)!important;
    box-shadow:inset 0 1px 0 #ffffff8c,inset 0 0 0 1px #0004,inset 0 -4px 0 color-mix(in srgb,var(--acc) 55%,#000),0 3px 0 #000,0 6px 12px #0008!important;
}
.control.hw[data-app-style="robodrum"] .note-pad::before {display:none;}
.control.hw[data-app-style="robodrum"]:not(.hw-img) .note-pad.active {filter:brightness(1.3);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 0 #0005,0 0 12px var(--lit)!important;}

/* DJ-X channel fader: wide illuminated track, short ribbed rectangular cap. */
.control.hw[data-app-style="dj-x"] .fader-track {--cap:18px;}
.control.hw[data-app-style="dj-x"] .fader-track > .hw-scale {display:none;}
.control.hw[data-app-style="dj-x"] .fader-track::before {width:38%;margin-left:-19%;border:1px solid #667779;box-sizing:border-box;background:linear-gradient(#0b1216,#040708);border-radius:4px;}
.control.hw[data-app-style="dj-x"] .fader-fill {width:36%!important;margin-left:-18%;border-radius:2px!important;}
.control.hw[data-app-style="dj-x"] .fader-handle {width:62%!important;height:var(--cap)!important;background:repeating-linear-gradient(0deg,transparent 0 3px,#0007 3px 4px),linear-gradient(#5a5a60,#1c1c1f)!important;border:1px solid #000!important;box-shadow:inset 0 1px 0 #ffffff40,0 3px 6px #000d!important;}
.control.hw[data-app-style="dj-x"] .hw-grip {display:none;}
.control.hw[data-app-style="dj-x"][data-hw-orient="h"] .fader-track::before {width:auto;height:38%;margin:0;top:31%;}
.control.hw[data-app-style="dj-x"][data-hw-orient="h"] .fader-fill {width:calc(var(--v) * (100% - var(--cap)))!important;height:36%!important;top:32%!important;margin:0;}
.control.hw[data-app-style="dj-x"][data-hw-orient="h"] .fader-handle {width:var(--cap)!important;height:62%!important;background:repeating-linear-gradient(90deg,transparent 0 3px,#0007 3px 4px),linear-gradient(90deg,#5a5a60,#1c1c1f)!important;}

/* MEGAPARSEC parameter slider: compact cap with a colored center stripe. */
.control.hw[data-app-style="megaparsec"] .fader-track {--cap:16px;}
.control.hw[data-app-style="megaparsec"] .fader-track > .hw-scale {display:none;}
.control.hw[data-app-style="megaparsec"] .fader-track::before {width:6px;margin-left:-3px;background:#111;border:1px solid #39393e;box-sizing:border-box;}
.control.hw[data-app-style="megaparsec"] .fader-fill {width:4px!important;margin-left:-2px;}
.control.hw[data-app-style="megaparsec"] .fader-handle {width:60%!important;height:var(--cap)!important;border:1px solid #000!important;border-radius:3px!important;background:linear-gradient(0deg,transparent 42%,var(--acc) 42% 58%,transparent 58%),linear-gradient(#5a5a60,#1c1c1f)!important;box-shadow:inset 0 1px 0 #ffffff40,0 2px 4px #000d!important;}
.control.hw[data-app-style="megaparsec"] .hw-grip {display:none;}
.control.hw[data-app-style="megaparsec"][data-hw-orient="h"] .fader-track::before {width:auto;height:6px;margin:-3px 0 0;}
.control.hw[data-app-style="megaparsec"][data-hw-orient="h"] .fader-fill {height:4px!important;width:calc(var(--v) * (100% - var(--cap)))!important;margin:-2px 0 0;}
.control.hw[data-app-style="megaparsec"][data-hw-orient="h"] .fader-handle {width:var(--cap)!important;height:60%!important;background:linear-gradient(90deg,transparent 42%,var(--acc) 42% 58%,transparent 58%),linear-gradient(#5a5a60,#1c1c1f)!important;}