:root {
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --solar-ink: #0a0a0a;
    --solar-muted: #888;
    --solar-surface: rgba(0, 0, 0, 0.07);
    --solar-divider: rgba(0, 0, 0, 0.1);
    --solar-white: #fff;
    --solar-accent: #FF3B00;
    --solar-accent-soft: rgba(255, 59, 0, 0.3);
    --solar-accent-glow: rgba(255, 59, 0, 0.5);

    /* Panel z-index tiers. Mirror PANEL_TIER in panel-physics.js. The
       on-screen keyboard sits at z 22 (emerald-v31.css), the dock at 24. */
    --tier-below-keyboard: 18;
    --tier-above-keyboard: 30;
    --tier-above-dock: 60;
}

body,
#emerald-panels-container {
    font-family: var(--font-main);
}

:where(
    .emerald-panel-3d,
    .quartz-panel,
    .knob-panel,
    .sampler-panel,
    .scope-panel
) {
    font-family: var(--font-main) !important;
}

:where(
    .emerald-panel-3d,
    .quartz-panel,
    .knob-panel,
    .sampler-panel,
    .scope-panel
) * {
    font-family: inherit;
}

:where(
    .emerald-panel-3d,
    .quartz-panel,
    .knob-panel,
    .sampler-panel,
    .scope-panel
) :where(button, input, select, textarea, option) {
    font-family: inherit !important;
}

@keyframes solar-panel-in {
    from {
        opacity: 0;
        scale: 0.97;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

.emerald-panel-3d,
.quartz-panel,
.knob-panel,
.sampler-panel,
.scope-panel {
    --solar-accent: #FF3B00;
    --solar-accent-soft: rgba(255, 59, 0, 0.3);
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(40px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    color: var(--solar-ink);
    animation: solar-panel-in 200ms ease-out both;
}

.nexus-global-panel,
.sampler-panel,
.scope-panel {
    background-image: none !important;
}

.emerald-panel-header,
.quartz-panel-header,
.knob-panel-header,
.opal-header,
.sampler-panel .panel-header,
.scope-header {
    border-bottom: 1px solid var(--solar-divider) !important;
}

.emerald-panel-header,
.quartz-panel-header,
.knob-panel-header,
.opal-title,
.scope-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--solar-ink);
}

.opal-title,
.scope-title {
    line-height: 1;
}

:where(
    .emerald-global-body label,
    .opal-label,
    .opal-control-label,
    .opal-section-label,
    .nexus-section-title,
    .nexus-slider-row span:first-child,
    .nexus-blend-label,
    .nexus-morph-label,
    .nexus-meter-label,
    .nexus-routing-count,
    .nexus-toggle-label,
    .patch-slot-name,
    .quartz-global-label,
    .quartz-flow-title,
    .quartz-effect-label,
    .quartz-wafer-section-title,
    .quartz-wafer-slot-label,
    .knob-label,
    .emerald-panel-knob .knob-label,
    .quartz-panel-knob .knob-label,
    .param-label,
    .scope-stat-label,
    .emerald-tile-category,
    .quartz-tile-category
) {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--solar-muted) !important;
}

:where(
    .opal-bpm-display,
    .opal-swing-val,
    .opal-value-display,
    .opal-velocity-val,
    .opal-probability-val,
    .nexus-slider-row span:last-child,
    .nexus-meter-db,
    .nexus-meter-peak,
    .quartz-panel-knob .knob-value,
    .emerald-panel-knob .knob-value,
    .knob-value,
    .scope-stat-value,
    .scope-stat-db,
    .time-display,
    .sampler-pitch-value,
    .sampler-speed-value,
    .quartz-eff-val,
    .patch-slot-number,
    .quartz-global-mix-val,
    .quartz-global-in-val,
    .quartz-global-out-val,
    .quartz-global-drive-val,
    .quartz-global-output-val,
    .quartz-global-bias-val,
    .quartz-global-tone-val,
    .emerald-global-master-val
) {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: var(--solar-ink) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

:where(
    .emerald-panel-close,
    .quartz-panel-close,
    .opal-panel-close,
    .knob-panel-close,
    .sampler-panel-close,
    .scope-close
) {
    background: transparent !important;
    border: none !important;
    color: var(--solar-muted) !important;
    border-radius: 4px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    z-index: 5;
}

:where(
    .emerald-panel-close,
    .quartz-panel-close,
    .opal-panel-close,
    .knob-panel-close,
    .sampler-panel-close,
    .scope-close
):hover {
    color: var(--solar-ink) !important;
    background: var(--solar-surface) !important;
}

:where(
    .opal-input,
    .opal-select,
    .sampler-url-input,
    .select-input,
    .nexus-opal-step-select,
    .morph-patch-select,
    .quartz-routing,
    .quartz-wafer-slot-select,
    .emerald-global-body input[type='number']
) {
    border: 1px solid var(--solar-divider) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    color: var(--solar-ink) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

:where(
    .emerald-panel-actions button,
    .emerald-global-actions button,
    .quartz-panel-actions button,
    .quartz-global-actions button,
    .quartz-wafer-preset-actions button,
    .quartz-wafer-footer-actions button,
    .quartz-wafer-slot-edit,
    .quartz-effect-actions button,
    .opal-step-btn,
    .opal-text-btn,
    .opal-length-opt,
    .sampler-panel .btn,
    .nexus-actions button,
    .nexus-patch-actions button,
    .scope-mode-btn,
    .scope-palette-btn,
    .knob-power-btn,
    .knob-adv-btn
) {
    border: 1px solid var(--solar-divider) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--solar-ink) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

:where(
    .emerald-panel-actions .primary,
    .quartz-panel-actions .primary,
    .quartz-wafer-footer-actions .primary,
    .quartz-eff-apply.primary,
    .sampler-panel .btn-primary,
    .sampler-panel .sampler-load-btn,
    .opal-text-btn.primary
) {
    background: var(--solar-accent) !important;
    border-color: var(--solar-accent) !important;
    color: var(--solar-white) !important;
    box-shadow: 0 4px 15px rgba(255, 59, 0, 0.3) !important;
}

:where(
    .emerald-panel-actions .primary,
    .quartz-panel-actions .primary,
    .quartz-wafer-footer-actions .primary,
    .quartz-eff-apply.primary,
    .sampler-panel .btn-primary,
    .sampler-panel .sampler-load-btn,
    .opal-text-btn.primary
):active {
    background: var(--solar-ink) !important;
    border-color: var(--solar-ink) !important;
    color: var(--solar-white) !important;
}

.opal-enable-btn,
.knob-power-btn {
    border-radius: 999px !important;
}

.opal-enable-btn.on,
.knob-power-btn.on,
.sampler-panel .transport-btn.sampler-loop.active {
    background: var(--solar-accent) !important;
    border-color: var(--solar-accent) !important;
    color: var(--solar-white) !important;
    box-shadow: 0 2px 12px var(--solar-accent-glow) !important;
}

.opal-icon-btn,
.sampler-panel .transport-btn {
    border-radius: 4px !important;
    background: transparent !important;
    border: 1px solid var(--solar-divider) !important;
    color: var(--solar-ink) !important;
}

.opal-icon-btn.active,
.opal-icon-btn.primary,
.sampler-panel .transport-btn.transport-play {
    background: var(--solar-accent) !important;
    border-color: var(--solar-accent) !important;
    color: var(--solar-white) !important;
    box-shadow: 0 2px 12px var(--solar-accent-glow) !important;
}

.sampler-panel.is-playing .transport-btn.transport-play {
    background: var(--solar-ink) !important;
    border-color: var(--solar-ink) !important;
}

:where(
    .emerald-global-body input[type='range'],
    .opal-range,
    .nexus-slider-row input[type='range'],
    .blend-slider,
    .sampler-panel input[type='range'],
    .quartz-global-body input[type='range'],
    .quartz-effect-row input[type='range']
) {
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--solar-accent);
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 1px !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(
    .emerald-global-body input[type='range'],
    .opal-range,
    .nexus-slider-row input[type='range'],
    .blend-slider,
    .sampler-panel input[type='range'],
    .quartz-global-body input[type='range'],
    .quartz-effect-row input[type='range']
)::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px !important;
    height: 14px !important;
    margin-top: -6px !important;
    border-radius: 50% !important;
    background: var(--solar-white) !important;
    border: 1px solid var(--solar-accent) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

:where(
    .emerald-global-body input[type='range'],
    .opal-range,
    .nexus-slider-row input[type='range'],
    .blend-slider,
    .sampler-panel input[type='range'],
    .quartz-global-body input[type='range'],
    .quartz-effect-row input[type='range']
)::-webkit-slider-runnable-track {
    height: 2px !important;
    border-radius: 1px !important;
    background: rgba(255, 59, 0, 0.3) !important;
}

:where(
    .emerald-global-body input[type='range'],
    .opal-range,
    .nexus-slider-row input[type='range'],
    .blend-slider,
    .sampler-panel input[type='range'],
    .quartz-global-body input[type='range'],
    .quartz-effect-row input[type='range']
)::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: var(--solar-white) !important;
    border: 1px solid var(--solar-accent) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

:where(
    .emerald-global-body input[type='range'],
    .opal-range,
    .nexus-slider-row input[type='range'],
    .blend-slider,
    .sampler-panel input[type='range'],
    .quartz-global-body input[type='range'],
    .quartz-effect-row input[type='range']
)::-moz-range-track {
    height: 2px !important;
    border-radius: 1px !important;
    background: rgba(255, 59, 0, 0.3) !important;
}

.emerald-global-panel .emerald-global-body,
.quartz-global-body,
.nexus-global-panel .nexus-section,
.sampler-panel .params-row {
    padding: 24px !important;
}

.emerald-global-panel .emerald-global-body,
.quartz-global-body,
.nexus-global-panel .nexus-global-body,
.sampler-panel,
.scope-panel {
    gap: 20px !important;
}

.nexus-separator {
    background: var(--solar-divider) !important;
    border-top-color: var(--solar-divider) !important;
}

.nexus-slider-row,
.quartz-global-row,
.quartz-global-body > label,
.emerald-global-panel .emerald-global-body label {
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.emerald-tile,
.quartz-tile {
    border: 1px solid var(--solar-divider) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--solar-ink) !important;
}

.emerald-tile.selected,
.quartz-tile.selected {
    border-color: rgba(255, 59, 0, 0.35) !important;
    background: rgba(255, 59, 0, 0.08) !important;
    box-shadow: inset 3px 0 0 var(--solar-accent);
}

.knob-panel .rotary-knob circle,
.quartz-panel .rotary-knob circle,
.emerald-panel-3d .rotary-knob circle {
    stroke: var(--solar-surface) !important;
}

.knob-panel .knob-arc,
.quartz-panel .knob-arc {
    stroke: var(--solar-accent) !important;
}

.knob-panel .rotary-knob line,
.quartz-panel .rotary-knob line {
    stroke: var(--solar-ink) !important;
}

.opal-length-pill {
    background: var(--solar-surface) !important;
    border-radius: 999px !important;
    padding: 3px !important;
}

.opal-length-opt.selected {
    background: var(--solar-accent) !important;
    color: var(--solar-white) !important;
    border-color: var(--solar-accent) !important;
}

.opal-text-btn.danger {
    color: var(--solar-ink) !important;
    border-color: var(--solar-divider) !important;
    background: transparent !important;
}

.nexus-global-panel {
    width: 550px;
}

.nexus-global-panel .nexus-global-body {
    padding: 24px !important;
}

.nexus-global-panel .nexus-section {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--solar-divider) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.nexus-global-panel .emerald-panel-header::before {
    background: var(--solar-accent) !important;
    box-shadow: 0 0 14px var(--solar-accent-soft) !important;
}

.nexus-global-panel .nexus-routing-list {
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

.nexus-global-panel .nexus-routing-row,
.nexus-global-panel .nexus-routing-empty {
    color: var(--solar-white) !important;
    font-family: inherit !important;
}

.nexus-global-panel .nexus-routing-row:hover {
    background: rgba(255, 59, 0, 0.16) !important;
}

.nexus-global-panel .nexus-meter-row {
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nexus-global-panel .nexus-meter-label,
.nexus-global-panel .nexus-meter-db,
.nexus-global-panel .nexus-meter-peak {
    color: rgba(255, 255, 255, 0.9) !important;
}

.nexus-global-panel .nexus-meter-bar {
    height: 2px !important;
    border-radius: 1px !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

.nexus-global-panel .nexus-meter-fill,
.nexus-global-panel .nexus-meter-fill-out {
    background: var(--solar-accent) !important;
}

.nexus-billboard-panel {
    overflow: visible !important;
    max-height: calc(100vh - 96px) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    animation: solar-panel-in 200ms ease-out both;
    will-change: left, top, transform;
}

.nexus-billboard-frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 14px;
    background: #111;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 18px 44px rgba(8, 10, 18, 0.16);
}

.opal-billboard-panel {
    overflow: hidden !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    animation: solar-panel-in 200ms ease-out both;
}

.opal-billboard-frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 14px;
    background: transparent;
    overflow: hidden;
    display: block;
}

.emerald-billboard-panel {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    animation: solar-panel-in 200ms ease-out both;
    will-change: left, top, transform;
}

.emerald-billboard-panel--global {
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-radius: 22px !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

body.eclipse-mode .emerald-billboard-panel.emerald-billboard-panel--global {
    box-shadow: none !important;
}

.emerald-billboard-panel--global::before {
    content: none;
}

/* NOVA-style frosted-glass layer for EMERALD's global panel. This
   has to live as a SIBLING of the panel host (not a child), because
   the host has position:fixed which creates a stacking context that
   prevents any descendant's backdrop-filter from sampling the
   parent document's rendered content (the 3D scene). Diagnosed by
   showing that a child pseudo-element's solid color composited
   correctly through the iframe gap, but its backdrop-filter showed
   nothing — confirmed again with a viewport-pinned pseudo that
   still rendered sharp content behind it. The shim sits at the
   document level next to the host inside #emerald-panels-container,
   so its backdrop-filter samples the 3D scene unimpeded.

   Position/size of the shim is mirrored from the host via a
   MutationObserver wired up in emeraldCreateBillboardPanel — every
   left/top/width/height/transform write on the host fires the
   observer and the shim copies the values. clip-path shapes the
   visible blur silhouette to the panel area only (32px top, 28px
   sides, 52px bottom — derived from iframe overscan + #host
   padding + flex-center slack), so the blur doesn't bleed into the
   overscan margin reserved for the .emerald-flip eclipse glow +
   3D-flip animation. Clipping the shim is safe because the shim
   contains NOTHING but its own backdrop-filter — no children to
   clip, no flip, no glow. pointer-events:none so clicks pass to
   the panel above it. */
.emerald-billboard-blur-shim {
    position: fixed;
    pointer-events: none;
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    clip-path: inset(32px 28px 52px 28px round 22px);
    transform-origin: top left;
    /* z-index is set inline by JS to host_z - 1 so the shim sits
       directly behind the panel without any other layer between. */
}

/* Hide the blur shim during the 600ms 3D flip animation. The shim
   sits BEHIND the panel-face; mid-rotation the face turns edge-on
   and the static blur underneath becomes visible as a flat
   rectangle. iframe posts emerald:flipState {flipping: true} when
   the flip starts and {flipping: false} ~520ms later.

   Parabolic opacity curve (1 -> 0 -> 1) instead of a hard hide.
   With instant display:none the shim pops in/out, which reads as
   a flicker at the start + end of the flip. Animating opacity
   across the same 520ms window with ease easing gives a smooth
   fade out + fade in, with the shim at fully hidden ~50% through
   (~260ms in, which lines up with the panel's edge-on moment in
   the 600ms rotation). visibility:hidden at 50% prevents any
   sub-pixel blur artifacts from being composited during the dip. */
.emerald-billboard-blur-shim.is-flipping {
    animation: emerald-blur-flip-fade 520ms ease both;
}
@keyframes emerald-blur-flip-fade {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.emerald-billboard-panel--slot,
.emerald-billboard-panel--knob {
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.14),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.emerald-billboard-panel--slot {
    border-radius: 12px !important;
    background: rgba(248, 250, 250, 0.07) !important;
    backdrop-filter: blur(40px) saturate(1.6) brightness(1.12) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.6) brightness(1.12) !important;
    box-shadow:
        0 26px 70px rgba(18, 24, 40, 0.18),
        0 8px 24px rgba(18, 24, 40, 0.10) !important;
}

.emerald-billboard-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    overflow: visible;
}

.emerald-billboard-panel--global .emerald-billboard-frame {
    position: relative;
    z-index: 1;
    border-radius: 22px;
}

.emerald-billboard-panel--slot .emerald-billboard-frame,
.emerald-billboard-panel--knob .emerald-billboard-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.emerald-billboard-panel--slot .emerald-billboard-frame {
    border-radius: 12px;
    background: rgba(248, 250, 250, 0.05);
    backdrop-filter: blur(36px) saturate(1.5);
    -webkit-backdrop-filter: blur(36px) saturate(1.5);
}

.quartz-billboard-panel {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    animation: solar-panel-in 200ms ease-out both;
    will-change: left, top, transform;
}

.quartz-billboard-panel--global {
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.quartz-billboard-panel--global::before {
    content: none;
}

/* QUARTZ host element is a rectangle, but the visible QUARTZ shape is
   the chamfered octagon inside the iframe. Any host-level box-shadow
   draws a giant rectangular halo around that bounding box, well
   outside the chamfered silhouette. The eclipse glow MUST stay on
   the iframe-internal .quartz-flip (filter:drop-shadow) so it hugs
   the chamfered shape correctly — these neutralizers prevent the
   bulk eclipse-glow rule in emerald-v31.css from leaking onto the
   host rectangle. */
body.eclipse-mode .quartz-billboard-panel,
body.eclipse-mode .quartz-billboard-panel--global,
body.eclipse-mode .quartz-billboard-panel--module,
body.eclipse-mode .quartz-billboard-frame {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

body.eclipse-mode .quartz-billboard-panel::before,
body.eclipse-mode .quartz-billboard-panel::after {
    content: none !important;
}

.quartz-billboard-panel--module {
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.14),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.quartz-billboard-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    overflow: visible;
}

.quartz-billboard-panel--global .quartz-billboard-frame {
    position: relative;
    z-index: 1;
    border-radius: 0;
    overflow: visible;
}

.quartz-billboard-panel--module .quartz-billboard-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.quartz-global-body .quartz-global-row {
    display: grid !important;
    grid-template-columns: 112px 1fr auto;
    align-items: center;
    gap: 10px !important;
}

.quartz-global-body .quartz-global-routing-row {
    grid-template-columns: 112px minmax(140px, 1fr);
}

.nexus-mix-mode-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.nexus-radio-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--solar-divider) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--solar-ink) !important;
    cursor: pointer;
    user-select: none;
}

.nexus-radio-row input[type='radio'] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.nexus-radio-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: inherit !important;
    line-height: 1;
}

.nexus-radio-row:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

.nexus-radio-row:has(input[type='radio']:checked) {
    background: #0a0a0a !important;
    border-color: #0a0a0a !important;
    color: var(--solar-white) !important;
    box-shadow: none !important;
}

.nexus-radio-row:has(input[type='radio']:checked):hover {
    background: #0a0a0a !important;
}

.nexus-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nexus-toggle-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--solar-divider);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.nexus-toggle-row:last-child {
    border-bottom: 1px solid var(--solar-divider);
}

.nexus-toggle-row input[type='checkbox'] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.nexus-toggle-label {
    order: 1;
    color: rgba(0, 0, 0, 0.82) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

.nexus-toggle-control {
    order: 0;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.45);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.nexus-toggle-control::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: transparent;
    opacity: 1;
}

.nexus-toggle-row:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

.nexus-toggle-row:has(input[type='checkbox']:checked) .nexus-toggle-control {
    border-color: var(--solar-white) !important;
}

.nexus-toggle-row:has(input[type='checkbox']:checked) .nexus-toggle-control::after {
    background: var(--solar-white);
}

.nexus-toggle-row:has(input[type='checkbox']:checked) {
    background: var(--solar-accent) !important;
    border-color: var(--solar-accent) !important;
    box-shadow: 0 2px 12px rgba(255, 59, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nexus-toggle-row:has(input[type='checkbox']:checked):hover {
    background: var(--solar-accent) !important;
}

.nexus-toggle-row:has(input[type='checkbox']:checked) .nexus-toggle-label {
    color: var(--solar-white) !important;
}

.nexus-actions,
.nexus-patch-actions {
    gap: 8px !important;
}

.nexus-actions button,
.nexus-patch-actions button,
.nexus-global-panel .save-patch-btn,
.nexus-global-panel .morph-go-btn {
    background: transparent !important;
    border: 1px solid var(--solar-divider) !important;
    color: var(--solar-ink) !important;
}

.nexus-global-panel .nexus-patch-memory-section {
    padding: 24px !important;
    flex: 0 0 auto;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.nexus-global-panel .nexus-patch-memory-section .patch-grid,
.nexus-global-panel .nexus-patch-memory-section .patch-grid * {
    font-family: inherit !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 0 !important;
    box-sizing: border-box;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 8px 8px !important;
    border: 1px solid var(--solar-divider) !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.07) !important;
    color: var(--solar-ink) !important;
    box-shadow: none !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.filled {
    background: rgba(0, 0, 0, 0.07) !important;
    border-color: var(--solar-divider) !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.empty {
    background: rgba(0, 0, 0, 0.07) !important;
    border-color: var(--solar-divider) !important;
    color: var(--solar-muted) !important;
    opacity: 1;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.active {
    background: var(--solar-accent) !important;
    border-color: var(--solar-accent) !important;
    color: var(--solar-white) !important;
    box-shadow: 0 2px 12px rgba(255, 59, 0, 0.5) !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-number {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center;
    color: rgba(0, 0, 0, 0.12) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-number.patch-slot-number--double {
    letter-spacing: -0.04em !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-name {
    display: flex;
    align-items: center;
    column-gap: 2px;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0 !important;
    margin-top: auto;
    padding: 0 2px 4px;
    text-align: center;
    font-size: 7px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: #888 !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-name-main {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-name-bpm {
    flex: 0 0 auto;
    white-space: nowrap;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-name.has-bpm .patch-slot-name-main {
    max-width: calc(100% - 40px);
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.empty .patch-slot-number {
    color: rgba(0, 0, 0, 0.1) !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.active .patch-slot-number {
    color: rgba(255, 255, 255, 0.35) !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.active .patch-slot-name {
    color: rgba(255, 255, 255, 0.8) !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-delete {
    width: 20px;
    height: 20px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0.9) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: opacity 0.12s ease, color 0.12s ease !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot-delete:hover {
    background: transparent !important;
    color: rgba(0, 0, 0, 0.98) !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.active .patch-slot-delete {
    color: rgba(255, 255, 255, 0.96) !important;
}

.nexus-global-panel .nexus-patch-memory-section .patch-slot.active .patch-slot-delete:hover {
    color: rgba(255, 255, 255, 1) !important;
}

.nexus-global-panel .nexus-patch-memory-section .nexus-patch-actions {
    width: 100%;
    min-width: 0;
    margin-top: 8px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px !important;
}

.nexus-global-panel .nexus-patch-memory-section .nexus-patch-actions > * {
    min-width: 0 !important;
    max-width: 100%;
}

.sampler-panel {
    width: 680px !important;
    padding: 24px !important;
    gap: 12px !important;
    color: var(--solar-ink) !important;
}

.sampler-panel .panel-header {
    cursor: default;
    user-select: none;
}

.sampler-panel .sampler-drag-handle {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: var(--solar-divider);
    margin: 0;
    cursor: grab;
}

.sampler-panel .sampler-drag-handle:active {
    cursor: grabbing;
}

.sampler-panel .sampler-url-row {
    gap: 12px !important;
}

.sampler-panel .sampler-url-note {
    color: var(--solar-muted) !important;
}

.sampler-panel .visual-stage {
    background: #0a0a0a !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.sampler-panel .vinyl-label,
.sampler-panel .playhead::before,
.sampler-panel .playhead::after,
.sampler-panel .trim-handle.dragging .trim-line,
.sampler-panel .trim-handle.dragging .trim-knob,
.sampler-panel .scrub-progress {
    background: var(--solar-accent) !important;
    border-top-color: var(--solar-accent) !important;
    box-shadow: 0 0 12px var(--solar-accent-soft) !important;
}

.sampler-panel .controls-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.sampler-panel .transport-group {
    padding-left: 0 !important;
    gap: 8px !important;
}

.sampler-panel .transport-btn {
    width: 38px !important;
    height: 34px !important;
    min-width: 38px !important;
    min-height: 34px !important;
}

.sampler-panel .transport-btn.transport-play {
    width: 48px !important;
}

.sampler-panel .scrub-track {
    height: 2px !important;
    background: rgba(255, 59, 0, 0.22) !important;
}

.sampler-panel .params-row {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--solar-divider) !important;
    border-radius: 8px !important;
}

.sampler-panel .param-label {
    color: var(--solar-muted) !important;
}

.sampler-panel .sampler-time-total {
    color: var(--solar-muted) !important;
}

.sampler-panel .panel-footer {
    border-top: 1px solid var(--solar-divider) !important;
    padding-top: 14px !important;
}

.scope-panel {
    width: 500px !important;
    padding: 0 !important;
}

.scope-header {
    padding: 14px 16px 12px !important;
    gap: 10px !important;
}

.scope-accent {
    background: var(--solar-accent) !important;
}

.scope-mode-btn.active {
    background: var(--solar-accent) !important;
    border-color: var(--solar-accent) !important;
    color: var(--solar-white) !important;
}

#oscilloscope-canvas {
    background: #0a0a0a !important;
    border-radius: 8px;
}

.scope-stats {
    border-top: 1px solid var(--solar-divider) !important;
}

.scope-stat-value.accent {
    color: var(--solar-accent) !important;
}

@keyframes ss-dialog-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ss-dialog-card-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ss-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: ss-dialog-overlay-in 140ms ease;
}

.ss-dialog-card {
    /* Solid one-line pill: message + pill buttons on a single row. */
    display: flex;
    align-items: center;
    gap: 18px;
    width: fit-content;
    max-width: calc(100vw - 48px);
    padding: 9px 9px 9px 24px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
    /* NEXUS-like: clean Helvetica (light), set here so message + buttons inherit. */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--solar-ink);
    animation: ss-dialog-card-in 180ms ease both;
}

/* Prompt variant (has a text input) keeps a block card, not a one-line pill. */
.ss-dialog-card-prompt {
    display: block;
    width: min(400px, calc(100vw - 48px));
    padding: 24px 26px;
    border-radius: 18px;
}
.ss-dialog-card-prompt .ss-dialog-message {
    white-space: normal;
    font-size: 18px;
}
.ss-dialog-card-prompt .ss-dialog-actions {
    margin-top: 18px;
}

.ss-dialog-message {
    margin: 0;
    flex: 0 1 auto;
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    font-weight: 300;            /* Helvetica light/thin */
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;         /* one line — confirm messages are short */
}

.ss-dialog-input {
    width: 100%;
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--solar-divider);
    background: rgba(255, 255, 255, 0.92);
    color: var(--solar-ink);
    font: 300 16px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ss-dialog-input:focus {
    border-color: var(--solar-accent);
    box-shadow: 0 0 0 2px rgba(255, 59, 0, 0.2);
}

.ss-dialog-actions {
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ss-dialog-actions-single {
    justify-content: flex-end;
}

.ss-dialog-btn {
    height: 38px;
    padding: 0 20px;
    border-radius: 999px;        /* pill buttons */
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;            /* light, matches the message */
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.ss-dialog-btn:hover {
    transform: translateY(-1px);
}

.ss-dialog-btn:active {
    transform: translateY(0);
}

.ss-dialog-btn:focus-visible {
    outline: 2px solid rgba(255, 59, 0, 0.5);
    outline-offset: 2px;
}

/* Alternate-colour pill buttons (light): Cancel = soft grey, action = solid ink. */
.ss-dialog-btn-secondary {
    background: rgba(0, 0, 0, 0.06);
    border-color: transparent;
    color: var(--solar-ink);
}

.ss-dialog-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.10);
}

.ss-dialog-btn-primary {
    background: var(--solar-accent);
    border-color: var(--solar-accent);
    color: var(--solar-white);
}

.ss-dialog-btn-primary:hover {
    opacity: 0.9;
}

.ss-dialog-btn-danger {
    background: var(--solar-ink);
    border-color: var(--solar-ink);
    color: var(--solar-white);
}

/* Eclipse mode — solid BLACK pill, inverted text + alternate buttons (matches the
   white<->black convention used elsewhere; DOM overlay, never thermal-shaded). */
body[data-theme="dark"] .ss-dialog-card {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f4f4f4;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
body[data-theme="dark"] .ss-dialog-btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    border-color: transparent;
    color: #f4f4f4;
}
body[data-theme="dark"] .ss-dialog-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.20);
}
body[data-theme="dark"] .ss-dialog-btn-danger {
    background: #f4f4f4;
    border-color: #f4f4f4;
    color: #0a0a0a;
}
body[data-theme="dark"] .ss-dialog-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f4f4f4;
}

/* (Tier 3a-A) Removed the viewport @media that resized the Sampler at
   <=1024px. Panels use one canonical scale (uniform zoom handles small
   screens), and these targeted legacy .controls-row/.panel-footer/
   .dropdown-container classes the v31 sampler doesn't use anyway — its width
   was already overridden by #sampler-panel.sampler-panel. */

@media (max-width: 760px) {
    .ss-dialog-overlay {
        padding: 14px;
    }

    .ss-dialog-card {
        width: min(calc(100vw - 28px), 640px);
        min-height: 210px;
        padding: 26px 22px;
        border-radius: 24px;
    }

    .ss-dialog-card-prompt {
        min-height: 244px;
    }

    .ss-dialog-message {
        font-size: clamp(20px, 6vw, 30px);
    }

    .ss-dialog-btn {
        height: 54px;
        min-width: 90px;
        padding: 0 20px;
        font-size: clamp(18px, 4.6vw, 24px);
    }

    .ss-dialog-input {
        margin-top: 16px;
        padding: 12px 14px;
        font-size: 15px;
    }

    /* (Tier 3a-A) This @media now scopes ONLY to the save/confirm modal
       (.ss-dialog-*), which is a transient centered dialog, not a floating
       panel — modals adapting on phone widths is fine. The former panel rules
       here (emerald/quartz/knob-panel-header + .opal-title/.scope-title font
       shrink, and legacy .sampler-panel .visual-stage/.vinyl-zone/.params-row)
       were removed: floating panels use one canonical scale at every width. */
}