/* Studio finish: surface styling only; layout and per-control themes stay authoritative. */
:root {
    --studio-edge: #343b45;
    --studio-muted: #aab3c0;
    --studio-face: linear-gradient(180deg, #2b3039, #1b1f27);
}
body { background-color: #090b0e; }
button, input, select, .toolbar-menu summary {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
}
.header {
    background: linear-gradient(180deg, #20252c, #13171d);
    border-bottom-color: #414955;
    box-shadow: 0 4px 16px #0005, inset 0 1px #ffffff0d;
}
.header .header-section { background: transparent; box-shadow: none; }
.header-row-1 { border-bottom-color: #ffffff0a; }
.header-row-2 { background: #10141a; box-shadow: inset 0 1px #0008; }
.app-title { letter-spacing: .06em; text-shadow: 0 1px 1px #000; }
.mode-indicator {
    background: #0c1015; border: 1px solid #3b424c;
    color: var(--studio-muted); box-shadow: inset 0 1px 4px #0008;
}
.header .edit-actions { background: #080b104d; border-color: #303741; box-shadow: inset 0 1px 3px #0006; }
.action-btn, .control-btn, .mode-btn, .style-action-btn, .midi-toggle-button,
.modal-actions button, .inspector button:not(.color-picker-btn),
.vmidi-uniform-fit .toolbar-menu summary {
    background: var(--studio-face); border-color: var(--studio-edge);
    color: #e1e7ef; border-radius: 5px;
    box-shadow: inset 0 1px #ffffff0e, 0 2px 3px #0006;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.studio-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.action-btn { display: inline-flex; align-items: center; justify-content: center; }
.action-btn:hover, .control-btn:hover, .mode-btn:hover {
    border-color: var(--accent-cyan); color: #fff;
    box-shadow: inset 0 1px #ffffff17, 0 2px 5px #0008;
}
button:active:not(:disabled) { box-shadow: inset 0 2px 5px #0008; }
button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent-cyan); outline-offset: 2px;
}
button:disabled { opacity: .4; }
.action-btn.danger:hover { border-color: #ed6976; color: #ff9aa4; }
.mode-btn { border-color: #657d86; }
.vmidi-uniform-fit .toolbar-menu-panel, .inspector, .modal-content, .color-picker-popup {
    background: linear-gradient(145deg, #21262e, #12161c);
    border: 1px solid #414a57;
    box-shadow: inset 0 1px #ffffff0c, 0 12px 32px #0009;
}
.inspector-header, .modal-header {
    background: #ffffff03; border-bottom-color: #ffffff10;
}
.inspector label, .modal-body label { color: var(--studio-muted); letter-spacing: .04em; }
.inspector input, .inspector select, .modal input, .modal select,
.header input:not([type=range]), .header select {
    background: #0b0f14; color: #e7edf5; border-color: #39414c;
    box-shadow: inset 0 2px 4px #0006; border-radius: 4px;
}
.control-value { background: #090c11c9; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.control-label { text-shadow: 0 1px 2px #000; letter-spacing: .045em; }
.control.selected .control-inner-border {
    outline: 1px solid var(--accent-cyan); outline-offset: -1px;
    box-shadow: inset 0 0 0 2px #0005, 0 0 9px #0005;
}
.resize-handle { border: 1px solid #070a0e; box-shadow: 0 1px 3px #0008; }
.knob { box-shadow: inset 0 1px 2px #ffffff12, 0 3px 7px #0007; }
.fader-track { box-shadow: inset 0 2px 6px #000a, 0 1px #ffffff08; }
.fader-handle { box-shadow: inset 0 1px #ffffff55, inset 0 -1px #0006, 0 2px 5px #000b; }
.xypad-area { box-shadow: inset 0 2px 8px #0008; }
.modal-header h2, .inspector-header h3 { letter-spacing: .055em; }
@media (prefers-reduced-motion: reduce) {
    button, input, select, .toolbar-menu summary { transition: none !important; }
}

/* Opt-in visual layer. Legacy controls have no designed-control class. */
.designed-control .knob {
    background: linear-gradient(180deg, #ffffff10, #0009), var(--designer-face);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #ffffff24, inset 0 -5px 8px #0006, 0 4px 9px rgb(0 0 0 / var(--designer-depth));
}
.designed-control .knob::before {
    content: ''; position: absolute; inset: 15%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 36% 32%, #ffffff30 0%, #ffffff14 18%, #0007 58%, #000d 100%),var(--designer-face);
    border: 1px solid #ffffff20;
    box-shadow: inset 0 1px #ffffff24, inset 0 -8px 12px rgb(0 0 0 / var(--designer-depth)), 0 2px 4px #0008;
    z-index: 2;
}
.designed-control .knob-svg { position: relative; z-index: 1; }
.designed-control .knob-pointer { z-index: 3; }
.designed-control[data-indicator=line] .knob-pointer { top: 26%; left: 50%; width: 3%; height: 24%; border-radius: 2px; transform-origin: center bottom; }
.designed-control[data-indicator=dot] .knob-pointer { top: 50%; left: 50%; width: 7%; height: 7%; border-radius: 50%; transform-origin: center; }
.designer-ticks { stroke: #b5c0cf; stroke-width: 1; opacity: .65; pointer-events: none; }
.designed-control .fader-handle {
    background: linear-gradient(180deg,#ffffff28,#0005),var(--designer-face) !important;
    border-color: #080b10 !important; border-radius: 3px;
    box-shadow: inset 0 1px #ffffff66, inset 0 -1px #ffffff15, 0 3px 6px rgb(0 0 0 / var(--designer-depth));
}
.designed-control .fader-handle::after { content: ''; position: absolute; top: 48%; left: 12%; right: 12%; height: 2px; background: currentColor; pointer-events: none; }
.designed-control[data-cap=round] .fader-handle { border-radius: 20px; }
.designed-control[data-cap=slim] .fader-handle { border-radius: 0; box-shadow: inset 0 0 0 2px #ffffff30; }
.designed-control .button-pad, .designed-control .note-pad {
    box-shadow: inset 0 2px #ffffff28, inset 0 -5px #0004, 0 3px 6px rgb(0 0 0 / var(--designer-depth));
}
.designed-control .button-pad:not(.toggle-on):not(:active), .designed-control .note-pad:not(.active):not(:active) {
    background-color: var(--designer-face);
}
.designed-control .xypad-container {
    background-color: var(--designer-face);
    background-image: linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);
    background-size: var(--designer-grid) var(--designer-grid);
    box-shadow: inset 0 2px 9px rgb(0 0 0 / var(--designer-depth));
}
.designed-control .white-key { box-shadow: inset 0 -5px rgb(0 0 0 / var(--designer-depth)), inset 1px 0 #fff8; }
.designed-control .black-key { box-shadow: inset 0 1px #ffffff35, inset 0 -4px #0008, 1px 3px 4px rgb(0 0 0 / var(--designer-depth)); }
.designed-control[data-finish=flat] :is(.knob,.fader-handle,.button-pad,.note-pad,.xypad-container,.white-key,.black-key) { box-shadow: none; }
.designed-control[data-finish=flat] .knob::before { box-shadow: none; background: var(--designer-face); }
.designed-control[data-finish=glass] :is(.knob,.button-pad,.note-pad) { box-shadow: inset 0 12px 16px #ffffff20, inset 0 1px #ffffff70, 0 3px 8px #0008; }
.control-designer { border: 1px solid #414a57; border-radius: 6px; padding: 9px; margin-bottom: 16px; background: #0b101680; }
.control-designer summary { cursor: pointer; font-size: 12px; letter-spacing: .04em; padding: 5px 0; color: #d5e7ef; }
.control-designer label { display: grid; gap: 6px; margin: 12px 0; font-size: 11px; }
.control-designer label[hidden] { display: none; }
.control-designer :is(select,input,button) { width: 100%; min-width: 0; }
.control-designer button { padding: 8px 4px; font-size: 10px; margin-top: 7px; }
.designer-preview { position: relative; height: 155px; margin: 12px 0; background: #080b10; border-radius: 5px; overflow: hidden; pointer-events: none; }
.designer-preview .control { pointer-events: none; }
.designer-status { font-size: 9px; color: #aab3c0; line-height: 1.6; }
.designer-actions { display: flex; gap: 5px; }