/* ==========================================================================
   RED STUDIO – audio/plugins.css
   ███ REDWEB PLUGIN SUITE - KOMPONENTEN & CHROME ███
   Verbraucht die Design-Tokens aus design.css (--rw-*). Vereinheitlicht
   Fenster-Chrome (Header/Body/Footer), Knobs, Meter, Graphen, Browser, Slots.
   Primär #980A0A · Sekundär #AB27E8 (Hover/Modulation/Spektral).
   ========================================================================== */

/* ============================ FLOATING WINDOW ============================ */
.rw-plw {
    position:fixed; min-width:320px;
    background:linear-gradient(180deg, rgba(18,22,30,.92), rgba(10,13,19,.96));
    border:1px solid var(--rw-stroke-2); border-radius:var(--rw-r); overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(152,10,10,.08), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(14px); color:var(--rw-text); font-family:var(--rw-font); z-index:1000;
}
.rw-plw.is-bypassed{ opacity:.6; filter:saturate(.4); }

/* ---- Header ---- */
.rw-plw-head{
    display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:move; user-select:none;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 65%), linear-gradient(180deg,#171b24,#11151d);
    border-bottom:1px solid var(--rw-stroke-2);
    box-shadow:inset 0 -2px 0 rgba(152,10,10,.55);
}
.rw-plw-ic{
    width:30px; height:30px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:900; letter-spacing:.5px; color:#fff;
    background:linear-gradient(140deg,var(--rw-primary-hi),var(--rw-primary)); box-shadow:var(--rw-glow-p), inset 0 0 0 1px rgba(255,255,255,.18);
}
.rw-plw-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rw-plw-eyebrow{ font-size:7.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--rw-primary-hi); font-weight:800; }
.rw-plw-name{ font-size:14px; font-weight:800; letter-spacing:.3px; line-height:1.05; }
.rw-plw-head .rw-badge{ flex-shrink:0; }
.rw-plw-tools{ margin-left:auto; display:flex; align-items:center; gap:7px; }
.rw-plw-mix{ width:40px; }
.rw-plw-mode{
    font-family:var(--rw-font); font-size:9.5px; font-weight:800; letter-spacing:1px; cursor:pointer;
    padding:6px 10px; border-radius:7px; color:var(--rw-muted);
    background:var(--rw-panel-2); border:1px solid var(--rw-stroke-2); transition:var(--rw-dur) var(--rw-ease);
}
.rw-plw-mode:hover{ color:#fff; border-color:var(--rw-line-s); }
.rw-plw-mode.is-adv{ color:#fff; background:linear-gradient(140deg,var(--rw-secondary),var(--rw-secondary-hi)); border-color:transparent; box-shadow:var(--rw-glow-s); }
.rw-plw-preset{
    font-family:var(--rw-font); font-size:11px; color:var(--rw-text); cursor:pointer; max-width:130px;
    background:var(--rw-inset); border:1px solid var(--rw-stroke-2); border-radius:7px; padding:5px 7px;
}
.rw-plw-preset:hover{ border-color:var(--rw-line-s); }
.rw-plw-ic-btn{
    width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:13px; line-height:1;
    display:flex; align-items:center; justify-content:center; color:var(--rw-text);
    background:var(--rw-panel-2); border:1px solid var(--rw-stroke-2); transition:var(--rw-dur) var(--rw-ease);
}
.rw-plw-ic-btn:hover{ color:#fff; border-color:var(--rw-line-p); box-shadow:var(--rw-glow-p); }
.rw-plw-bypass.is-off{ color:#ff7676; border-color:#ff7676; box-shadow:none; }
.rw-plw-help.is-on,.rw-plw.rw-help-on .rw-plw-help{ background:var(--rw-secondary); color:#fff; }
.rw-plw-close:hover{ color:#fff; border-color:#ff5a5a; box-shadow:0 0 14px rgba(255,90,90,.5); }

/* ---- Body ---- */
.rw-plw-body{ padding:14px; display:flex; gap:14px; align-items:stretch; }
.rw-plw-stage{ flex:1; min-width:0; }
.rw-plw.is-min .rw-plw-body, .rw-plw.is-min .rw-plw-foot{ display:none; }

/* ---- Footer (Telemetrie) ---- */
.rw-plw-foot{
    display:flex; align-items:center; gap:16px; padding:8px 12px;
    border-top:1px solid var(--rw-stroke); background:rgba(0,0,0,.28);
    font-family:var(--rw-mono); font-size:9.5px; color:var(--rw-muted); letter-spacing:.5px;
}
.rw-foot-meters{ display:flex; gap:14px; flex:1; }
.rw-foot-m{ display:flex; align-items:center; gap:6px; flex:1; max-width:180px; }
.rw-foot-m > span{ font-weight:800; color:var(--rw-dim); width:24px; }
.rw-foot-bar{ flex:1; height:7px; background:var(--rw-inset); border:1px solid var(--rw-stroke); border-radius:4px; overflow:hidden; }
.rw-foot-bar.sm{ width:46px; flex:none; }
.rw-foot-bar i{ display:block; height:100%; width:0%;
    background:linear-gradient(90deg,#22c55e,#22c55e 60%,#f0b32a 82%,#ff4d4d); transition:width .06s linear; }
.rw-foot-stats{ display:flex; align-items:center; gap:14px; }
.rw-foot-cpu{ display:flex; align-items:center; gap:6px; }
.rw-foot-cpu .rw-foot-bar i{ background:linear-gradient(90deg,var(--rw-secondary),var(--rw-secondary-hi)); }
.rw-foot-stats b{ color:var(--rw-text); }

/* ---- Hilfe-Popover ---- */
.rw-plw-help-pop{
    position:absolute; right:12px; top:52px; width:240px; padding:12px 14px; z-index:5; display:none;
    background:var(--rw-panel); border:1px solid var(--rw-line-s); border-radius:var(--rw-r-sm);
    box-shadow:var(--rw-glow-s), 0 14px 30px rgba(0,0,0,.5); font-size:11.5px; line-height:1.5;
}
.rw-plw.rw-help-on .rw-plw-help-pop{ display:block; animation:rw-rise .16s var(--rw-ease); }
.rw-plw-help-pop b{ color:#fff; display:block; margin-bottom:5px; }
.rw-plw-help-pop p{ margin:0; color:var(--rw-muted); }

/* ---- Advanced-Sektionen (nur sichtbar im Advanced-Modus) ---- */
.rw-plw:not(.rw-adv-on) .rw-adv{ display:none; }
.rw-adv{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--rw-line-s); animation:rw-rise .16s var(--rw-ease); }
.rw-adv-lbl{ font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--rw-secondary-hi); font-weight:800; margin-bottom:8px; }
.rw-tip{ margin-top:10px; padding:9px 12px; border-radius:9px; font-size:11px; line-height:1.55; color:var(--rw-muted);
    background:rgba(171,39,232,.09); border:1px solid var(--rw-line-s);
    max-width:520px; box-sizing:border-box; }   /* deckt sich mit der EQ-Breite (.rs-eqg) → Fenster bleibt kohärent */
.rw-tip b{ color:#fff; }

/* Eingebetteter EQ-Graph (Reverb/Delay/Limiter Advanced) – eigene Größe */
.rs-eqg{ width:520px; max-width:84vw; display:block; }
.rs-eqg .rs-pl-eq-graph{ height:200px; }
.rs-eqg .rs-pl-eq-bar{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }

/* Delay-Sync-Dropdown (BPM: Regular/Punktiert/Triolen × 1/1..1/32) */
.rs-pl-delay-sync{ justify-content:center; gap:8px; }
.rs-pl-synclbl{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--rw-muted); font-weight:800; }
.rs-pl-select{ font-family:var(--rw-font); font-size:12px; color:var(--rw-text); cursor:pointer;
    background:var(--rw-inset); border:1px solid var(--rw-stroke-2); border-radius:7px; padding:6px 9px; }
.rs-pl-select:hover{ border-color:var(--rw-line-s); }
.rs-pl-select optgroup{ background:#15181d; color:var(--rw-secondary-hi); }
.rs-pl-select option{ background:#15181d; color:var(--rw-text); }

/* ============================ KNOBS (auf abgesenkter Control-Bar) ============================ */
.rs-pl-knobs{ display:flex; flex-wrap:wrap; gap:14px 4px; justify-content:center; align-items:flex-start;
    padding:14px 12px 11px; border-radius:13px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.20));
    border:1px solid var(--rw-stroke); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 34px rgba(0,0,0,.4); }
.rs-pl-knob{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; width:66px; padding:0 3px; cursor:ns-resize; touch-action:none; }
/* dunkler, leicht gewölbter Knob-Körper hinter dem SVG-Bogen */
.rs-pl-knob::before{ content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:42px; height:42px; border-radius:50%;
    background:radial-gradient(circle at 50% 32%, #313845, #11151d 72%);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.65), inset 0 -1px 2px rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.05); }
.rs-pl-knob svg{ overflow:visible; position:relative; z-index:1; }
.rs-pl-knob-bg{ stroke:rgba(255,255,255,.09); stroke-width:4.5; }
.rs-pl-knob-val{ stroke:var(--rw-primary-hi); stroke-width:4.5; filter:drop-shadow(0 0 6px rgba(152,10,10,.7)); transition:stroke .15s; }
.rs-pl-knob:hover .rs-pl-knob-val{ stroke:var(--rw-secondary-hi); filter:drop-shadow(0 0 7px rgba(171,39,232,.7)); }
.rs-pl-knob-ind{ stroke:#fff; filter:drop-shadow(0 0 2px rgba(255,255,255,.5)); }
.rs-pl-knob-val-txt{ font-family:var(--rw-mono); font-size:10.5px; font-weight:800; color:#fff; position:relative; z-index:1;
    background:var(--rw-inset); border:1px solid var(--rw-stroke); border-radius:5px; padding:1px 6px; min-width:38px; text-align:center; }
.rs-pl-knob-lbl{ font-size:9px; letter-spacing:.8px; text-transform:uppercase; color:var(--rw-muted); font-weight:800; }

/* Lite-Slider-Knob (Multiband etc.) */
.rs-pl-knob-lite{ display:flex; flex-direction:column; align-items:center; gap:4px; width:88px; }
.rs-pl-knob-lite input[type=range]{ width:100%; accent-color:var(--rw-primary); }
.rs-pl-klite-v{ font-family:var(--rw-mono); font-size:10.5px; font-weight:800; color:#fff; }

/* ============================ METER ============================ */
.rs-pl-meters{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; }
.rs-pl-meter{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.rs-pl-meter-bar{ width:11px; height:120px; background:var(--rw-inset); border:1px solid var(--rw-stroke-2); border-radius:6px; position:relative; overflow:hidden; }
.rs-pl-meter-fill{ position:absolute; bottom:0; left:0; right:0; height:0%;
    background:linear-gradient(0deg,#22C55E,#22C55E 58%,#f0b32a 82%,#ff4d4d); transition:height .05s linear; }
.rs-pl-meter.is-gr .rs-pl-meter-fill{ top:0; bottom:auto; background:linear-gradient(180deg,var(--rw-secondary),var(--rw-secondary-hi)); }
.rs-pl-meter-lbl{ font-family:var(--rw-mono); font-size:9px; letter-spacing:1px; color:var(--rw-muted); font-weight:800; }

/* ============================ SEGMENTE / CHECKS / ROWS ============================ */
.rs-pl-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.rs-pl-seg{ display:inline-flex; border:1px solid var(--rw-stroke-2); border-radius:8px; overflow:hidden; }
.rs-pl-seg button{ font-family:var(--rw-font); font-size:10.5px; font-weight:800; letter-spacing:.5px; color:var(--rw-muted); background:var(--rw-panel-2); border:none; padding:7px 13px; cursor:pointer; }
.rs-pl-seg button.is-on{ background:linear-gradient(140deg,var(--rw-primary-hi),var(--rw-primary)); color:#fff; }
.rs-pl-chk{ display:inline-flex; align-items:center; gap:7px; font-family:var(--rw-font); font-size:11px; font-weight:700; color:var(--rw-muted);
    background:var(--rw-panel-2); border:1px solid var(--rw-stroke-2); border-radius:8px; padding:7px 11px; cursor:pointer; }
.rs-pl-chk span{ width:10px; height:10px; border-radius:3px; border:1px solid var(--rw-stroke-2); }
.rs-pl-chk.is-on{ color:#fff; border-color:var(--rw-line-s); }
.rs-pl-chk.is-on span{ background:var(--rw-secondary); border-color:var(--rw-secondary); box-shadow:var(--rw-glow-s); }

.rs-pl-comp,.rs-pl-lim,.rs-pl-fx{ min-width:320px; }
.rs-pl-comp-foot,.rs-pl-lim-foot{ justify-content:space-between; }
.rs-pl-lufs{ font-family:var(--rw-mono); font-size:11px; color:var(--rw-muted); }
.rs-pl-lufs b{ color:#fff; }

/* ============================ GRAPHEN (EQ / Dyn-EQ / Multiband) ============================ */
.rs-pl-eq{ width:700px; max-width:92vw; }   /* 25% breiter */
.rs-pl-eq-main{ display:flex; gap:14px; align-items:stretch; }
.rs-pl-eq-left{ flex:1; min-width:0; display:flex; flex-direction:column; }
.rs-pl-eq-gains{ flex:0 0 auto; display:flex; gap:12px; padding-left:2px; }

/* Vertikaler dB-Fader + STEREO-Pegelmeter (L/R) mit Skala + Peak-Hold (Channel-Strip-Stil) */
.rs-vf{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.rs-vf-body{ display:flex; gap:3px; align-items:stretch; height:240px; }
.rs-vf-scale{ position:relative; width:15px; }
.rs-vf-scale span{ position:absolute; right:1px; transform:translateY(-50%); font-family:var(--rw-mono); font-size:7px; color:var(--rw-dim); letter-spacing:.3px; }
.rs-vf-meter{ position:relative; width:8px; background:var(--rw-inset); border:1px solid var(--rw-stroke-2); border-radius:3px; overflow:hidden; }
/* Pegel-Verlauf: Violett (leise) → Rot (laut) */
.rs-vf-fill-m{ position:absolute; bottom:0; left:0; right:0; height:0%; background:linear-gradient(0deg,#AB27E8,#7a2bd4 42%,#c01616 78%,#980A0A); transition:height .05s linear; }
.rs-vf-peak{ position:absolute; left:0; right:0; bottom:0; height:2px; background:#fff; box-shadow:0 0 4px rgba(255,255,255,.7); }
.rs-vf-track{ position:relative; width:22px; margin-left:3px; background:var(--rw-panel-2); border:1px solid var(--rw-stroke-2); border-radius:6px; cursor:ns-resize; touch-action:none; }
.rs-vf-track::before{ content:""; position:absolute; left:6px; right:6px; top:0; bottom:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px); }
.rs-vf-fill{ position:absolute; bottom:0; left:0; right:0; height:50%; background:rgba(152,10,10,.30); border-radius:0 0 5px 5px; pointer-events:none; }
.rs-vf-knob{ position:absolute; left:-3px; right:-3px; height:14px; bottom:50%; margin-bottom:-7px; background:linear-gradient(180deg,#fafafa,#c9ccd2); border:1px solid #000; border-radius:3px; box-shadow:0 2px 5px rgba(0,0,0,.5); pointer-events:none; }
.rs-vf-knob::after{ content:""; position:absolute; left:3px; right:3px; top:50%; height:2px; transform:translateY(-50%); background:rgba(0,0,0,.5); border-radius:1px; }
.rs-vf-chl{ display:flex; gap:10px; }
.rs-vf-chl span{ font-family:var(--rw-mono); font-size:7px; font-weight:800; color:var(--rw-dim); width:8px; text-align:center; letter-spacing:.5px; }
.rs-vf-db{ font-family:var(--rw-mono,monospace); font-size:10px; font-weight:800; color:#fff; }
.rs-vf-lbl{ font-size:8.5px; letter-spacing:1px; color:var(--rw-muted); font-weight:800; }

/* Reines Stereo-Pegelmeter (IN/OUT-Streifen, ohne Fader) */
.rs-sm{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.rs-sm-body{ display:flex; gap:3px; align-items:stretch; flex:1; min-height:120px; }

/* Universeller IN/OUT-Meter-Streifen (alle Plugins ohne eigene Fader) */
.rw-plw-meterrail{ flex:0 0 auto; display:flex; flex-direction:column; gap:8px; padding-left:13px; border-left:1px solid var(--rw-stroke); }
.rw-mr-cap{ font-size:8px; letter-spacing:1.6px; text-transform:uppercase; color:var(--rw-secondary-hi); font-weight:800; text-align:center; }
.rw-mr-row{ display:flex; gap:12px; flex:1; min-height:140px; }
.rs-pl-eq-graph,.rs-pl-mb-graph{ position:relative; width:100%;
    background:radial-gradient(130% 120% at 50% -10%, rgba(152,10,10,.06), transparent 55%), linear-gradient(180deg,#0a0d13,#070a0f);
    border:1px solid var(--rw-stroke-2); border-radius:var(--rw-r-sm); overflow:hidden;
    box-shadow:inset 0 0 40px rgba(0,0,0,.5); }
.rs-pl-eq-graph{ height:240px; }
.rs-pl-mb-graph{ height:200px; margin-bottom:12px; }
.rs-pl-eq-canvas,.rs-pl-mb-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.rs-pl-eq-handles{ position:absolute; inset:0; }
.rs-pl-eq-handle{ position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:2px solid #fff; cursor:grab;
    display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.85); box-shadow:0 1px 6px rgba(0,0,0,.6), var(--rw-glow-p); touch-action:none; }
.rs-pl-eq-handle.is-sel{ width:22px; height:22px; margin:-11px 0 0 -11px; box-shadow:0 0 0 3px rgba(171,39,232,.45), var(--rw-glow-s); }
.rs-pl-eq-bar{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.rs-pl-eq-readout{ font-family:var(--rw-mono); font-size:11px; color:var(--rw-muted); }
.rs-pl-eq-types{ display:flex; flex-wrap:wrap; gap:5px; }
.rs-pl-eq-type{ font-family:var(--rw-font); font-size:10.5px; font-weight:700; text-transform:capitalize; color:var(--rw-muted);
    background:var(--rw-panel-2); border:1px solid var(--rw-stroke-2); border-radius:7px; padding:5px 10px; cursor:pointer; }
.rs-pl-eq-type:hover{ color:#fff; border-color:var(--rw-line-s); }
.rs-pl-eq-type.is-on{ background:linear-gradient(140deg,var(--rw-primary-hi),var(--rw-primary)); color:#fff; border-color:transparent; }
.rs-pl-eq-hint{ font-size:10.5px; color:var(--rw-muted); font-style:italic; }

.rs-pl-deq-dyn{ border-top:1px solid var(--rw-stroke); padding-top:10px; display:flex; flex-direction:column; gap:8px; }
.rs-pl-deq-head{ display:flex; align-items:center; gap:12px; }
.rs-pl-deq-info{ font-family:var(--rw-mono); font-size:11px; color:var(--rw-muted); }
.rs-pl-deq-info b{ color:#fff; }
.rs-pl-deq-knobs{ justify-content:flex-start; }
.rs-pl-mb{ width:560px; max-width:80vw; }

/* ============================ GENERISCHE VIZ-CANVAS (Reverb/Delay/Sat/Gate/Imager) ============================ */
.rw-viz{ position:relative; width:100%; height:170px; margin-bottom:14px; border-radius:var(--rw-r-sm);
    background:radial-gradient(120% 140% at 50% 0%, rgba(171,39,232,.08), transparent 60%), var(--rw-inset);
    border:1px solid var(--rw-stroke-2); overflow:hidden; }
.rw-viz canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* ============================ PLUGIN-BROWSER (rechte Sidebar) ============================ */
.rs-pb{ display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; }
.rs-pb-search{ position:sticky; top:0; }
.rs-pb-input{ width:100%; font-family:var(--rw-font); font-size:12.5px; color:var(--rw-text);
    background:var(--rw-inset); border:1px solid var(--rw-stroke-2); border-radius:9px; padding:9px 12px; }
.rs-pb-input:focus{ outline:none; border-color:var(--rw-line-s); box-shadow:var(--rw-glow-s); }
.rs-pb-list{ display:flex; flex-direction:column; gap:12px; overflow:auto; flex:1; min-height:0; padding-right:2px; }
.rs-pb-group{ display:flex; flex-direction:column; gap:6px; }
.rs-pb-cat{ font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--rw-secondary-hi); font-weight:800; }
.rs-pb-card{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:11px; cursor:grab;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--rw-panel);
    border:1px solid var(--rw-stroke); border-left:3px solid var(--rw-primary); transition:var(--rw-dur) var(--rw-ease); user-select:none; }
.rs-pb-card:hover{ transform:translateY(-1px); border-left-color:var(--rw-secondary); border-color:var(--rw-line-s); box-shadow:0 8px 22px rgba(0,0,0,.4), var(--rw-glow-s); }
.rs-pb-card:active{ cursor:grabbing; }
.rs-pb-card.is-dragging{ opacity:.5; }
.rs-pb-ic{ width:34px; height:34px; border-radius:9px; flex-shrink:0; color:#fff; font-weight:900; font-size:10px; letter-spacing:.5px;
    display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--rw-primary-hi),var(--rw-primary)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.rs-pb-meta{ display:flex; flex-direction:column; min-width:0; }
.rs-pb-meta b{ font-size:13px; color:#fff; }
.rs-pb-meta small{ font-size:10.5px; color:var(--rw-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-pb-empty{ font-size:12px; color:var(--rw-muted); padding:8px; }

/* ============================ PLUGIN-SLOTS (Inspector) ============================ */
.rs-insp-plugins{ margin-bottom:14px; }
.rs-insp-sub{ margin-left:auto; font-size:9px; color:var(--rw-secondary-hi); letter-spacing:1px; }
.rs-sl-slots{ display:flex; flex-direction:column; gap:5px; }
.rs-sl-slot{ display:flex; align-items:center; gap:8px; min-height:34px; padding:5px 8px; border-radius:9px;
    background:var(--rw-inset); border:1px dashed var(--rw-stroke-2); transition:var(--rw-dur) var(--rw-ease); }
.rs-sl-slot.is-filled{ background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--rw-panel); border-style:solid;
    border-left:3px solid var(--rw-primary); cursor:grab; }
.rs-sl-slot.is-over{ border-color:var(--rw-secondary); box-shadow:0 0 0 2px rgba(171,39,232,.3), var(--rw-glow-s); }
.rs-sl-slot.is-dragging{ opacity:.45; }
.rs-sl-num{ font-family:var(--rw-mono); font-size:9px; color:var(--rw-dim); font-weight:800; width:12px; text-align:center; flex-shrink:0; }
.rs-sl-empty{ font-size:11px; color:var(--rw-muted); font-style:italic; }
.rs-sl-ic{ width:22px; height:22px; border-radius:6px; color:#fff; font-weight:900; font-size:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:linear-gradient(140deg,var(--rw-primary-hi),var(--rw-primary)); }
.rs-sl-name{ flex:1; font-size:12px; font-weight:600; color:var(--rw-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-sl-by,.rs-sl-x{ border:none; background:transparent; color:var(--rw-muted); cursor:pointer; font-size:13px; width:20px; height:20px; border-radius:5px; flex-shrink:0; line-height:1; }
.rs-sl-by:hover,.rs-sl-x:hover{ background:rgba(255,255,255,.08); color:#fff; }
.rs-sl-by.is-off{ color:#ff7676; }
.rs-sl-x:hover{ color:#ff5a5a; }

/* ══════════════════════════════════════════════════════════════════════════
   VSTi - Instrumente (2026-08-13)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── MPC 16 Pads ─────────────────────────────────────────────────────────── */
/* PADGROESSE und FENSTERBREITE haengen zusammen (User-Vorgabe 2026-08-13:
   "das gesamte Fenster soll an die Pads angepasst werden"). Beides leitet sich
   aus EINEM Wert ab: aendert man die Kachel, folgt die Breite von selbst.
   Ohne die feste Breite zieht der Hinweistext darunter das Fenster in die
   Laenge, und die Pads sitzen verloren in einer breiten Flaeche. */
.rs-mpc {
    --rs-mpc-pad: 72px;
    --rs-mpc-gap: 5px;
    width: calc(4 * var(--rs-mpc-pad) + 3 * var(--rs-mpc-gap));
    min-width: 250px;
    display: flex; flex-direction: column; gap: 8px;
}
/* PADGROESSE an EINER Stelle (User-Vorgabe 2026-08-13: deutlich kleiner).
   Die Pads waren vorher fluid (aspect-ratio in einem 4-Spalten-Raster) und
   wuchsen mit der Fensterbreite auf rund 100 px. Jetzt eine feste, kleine
   Kachel - dadurch wird das ganze MPC-Fenster schmal, statt sich zu strecken.
   Wer sie anders will, aendert NUR diesen Wert. */
.rs-mpc-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--rs-mpc-pad));
    gap: var(--rs-mpc-gap);
    justify-content: start;
}
.rs-mpc-pad {
    position: relative;
    width: var(--rs-mpc-pad);
    height: var(--rs-mpc-pad);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
    border-radius: 7px;
    border: 1px solid var(--rw-line, rgba(255,255,255,.14));
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    color: #e8e8ee; cursor: pointer; user-select: none;
    transition: transform .06s, background .12s, border-color .12s, box-shadow .12s;
}
.rs-mpc-pad:hover { border-color: var(--rw-primary, #980a0a); }
.rs-mpc-pad:focus-visible { outline: 2px solid var(--rw-secondary, #ab27e8); outline-offset: 1px; }
/* Belegte Pads heben sich deutlich ab - sonst sieht ein volles Gitter aus wie
   ein leeres. */
.rs-mpc-pad.is-loaded {
    background: linear-gradient(180deg, rgba(152,10,10,.38), rgba(152,10,10,.16));
    border-color: rgba(152,10,10,.75);
}
.rs-mpc-pad.is-over { border-color: var(--rw-secondary, #ab27e8); box-shadow: 0 0 0 2px rgba(171,39,232,.35); }
.rs-mpc-pad.is-error { border-color: #d0762f; }
/* ROTES AUFLEUCHTEN beim Anschlag - per Klick UND per MIDI (beides laeuft
   durch trigger(), also durch dieselbe Stelle). Kurz und kraeftig: es soll
   im Augenwinkel erkennbar sein, welches Pad gerade gespielt hat. */
.rs-mpc-pad.is-hit {
    background: linear-gradient(180deg, #ff2d2d, #b30d0d);
    border-color: #ff5a5a;
    transform: scale(.94);
    box-shadow: 0 0 18px rgba(255,45,45,.85), inset 0 0 12px rgba(255,120,120,.5);
}
.rs-mpc-num { font-size: 10px; font-weight: 700; opacity: .6; line-height: 1; }
.rs-mpc-note { font-size: 8px; letter-spacing: .04em; opacity: .45; line-height: 1; }
/* Der Name passt auf ein kleines Pad nicht - er steht im Tooltip. */
.rs-mpc-name { display: none; }
/* Die zwei Ecken: links laden, rechts Sound Library. Klein, aber immer da -
   ein Erscheinen erst bei Hover waere auf Touch nicht erreichbar. */
.rs-mpc-btn {
    position: absolute; bottom: 1px;
    width: 15px; height: 15px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 4px;
    background: rgba(0,0,0,.42); color: rgba(255,255,255,.75);
    font-size: 10px; line-height: 1; cursor: pointer;
}
.rs-mpc-btn:hover { background: var(--rw-primary, #980a0a); color: #fff; }
.rs-mpc-up { left: 1px; }
.rs-mpc-lib { right: 1px; }
.rs-mpc-clear {
    position: absolute; top: 1px; right: 3px;
    font-size: 11px; line-height: 1; opacity: .5; cursor: pointer;
}
.rs-mpc-clear:hover { opacity: 1; color: #ff6b6b; }
.rs-mpc-hint { font-size: 11px; opacity: .55; line-height: 1.4; margin: 0; }

/* Sample-Waehler am Pad */
.rs-mpc-picker {
    position: fixed; z-index: 9700; width: 260px; max-height: 300px;
    display: flex; flex-direction: column;
    border-radius: 9px; border: 1px solid var(--rw-line, rgba(255,255,255,.16));
    background: #16161b; box-shadow: 0 18px 44px rgba(0,0,0,.55);
    overflow: hidden;
}
.rs-mpc-picker-head { padding: 7px 10px; font-size: 11px; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.08); }
.rs-mpc-picker-body { overflow: auto; padding: 4px; font-size: 12px; }
.rs-mpc-picker-cat { padding: 6px 6px 2px; font-size: 10px; text-transform: uppercase;
    letter-spacing: .06em; opacity: .45; }
.rs-mpc-picker-item { display: block; width: 100%; text-align: left;
    padding: 5px 8px; border: 0; border-radius: 5px; background: transparent;
    color: #e8e8ee; font-size: 12px; cursor: pointer; }
.rs-mpc-picker-item:hover { background: rgba(152,10,10,.35); }
.rs-mpc-picker-empty { padding: 12px; opacity: .5; font-size: 12px; }

/* ── Piano Synth ─────────────────────────────────────────────────────────── */
.rs-synth { display: flex; flex-direction: column; gap: 10px; min-width: 520px; }
/* Auswahlfelder des Synth (Wellenformen, LFO-Ziel). Sie stehen ueber den
   Reglern, weil sie den Charakter bestimmen und die Regler ihn nur formen.
   Die Klaviatur im Fenster ist entfallen (2026-08-13) - gespielt wird ueber
   MIDI, das virtuelle Keyboard oder den Noteneditor. */
.rs-syn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.rs-syn-sel {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--rw-muted, #8a8a95); font-weight: 800;
}
.rs-syn-sel select {
    font-family: var(--rw-font, inherit); font-size: 12px; text-transform: none; letter-spacing: 0;
    color: var(--rw-text, #e8e8ee); cursor: pointer;
    background: var(--rw-inset, #101014); border: 1px solid var(--rw-stroke-2, rgba(255,255,255,.14));
    border-radius: 7px; padding: 5px 8px;
}
.rs-syn-sel select:hover { border-color: var(--rw-line-s, #ab27e8); }
/* Weisse Tasten in der Reihe, schwarze sitzen absolut darueber und
   ueberlappen je zur Haelfte die Nachbarn. */
.rs-synth-keys {
    position: relative;
    display: flex;
    height: 120px;
    padding: 0 2px;
    user-select: none;
    touch-action: none;
}
.rs-synth-key {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid rgba(0,0,0,.55);
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, #f6f6f8, #d9d9e0);
    cursor: pointer;
    padding: 0;
}
/* Gespielte Tasten leuchten rot - dieselbe Sprache wie die MPC-Pads. */
.rs-synth-key.is-down { background: linear-gradient(180deg, #ff5a5a, #c01616); box-shadow: 0 0 14px rgba(255,45,45,.6); }
.rs-synth-key.is-black {
    position: absolute;
    top: 0;
    width: 26px;
    height: 62%;
    margin-left: -13px;
    z-index: 2;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(180deg, #2a2a31, #101014);
    flex: 0 0 auto;
}
.rs-synth-key.is-black.is-down { background: linear-gradient(180deg, #c01616, #7a0d0d); box-shadow: 0 0 12px rgba(255,45,45,.55); }

/* ── Spurart-Menue am „+ Spur"-Knopf (2026-08-13) ───────────────────────── */
.rs-addmenu {
    position: fixed;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: 6px;
    gap: 2px;
    border-radius: 10px;
    border: 1px solid var(--rw-line, rgba(255,255,255,.16));
    background: #16161b;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.rs-addmenu button {
    display: flex; flex-direction: column; gap: 1px;
    text-align: left; padding: 8px 10px;
    border: 0; border-radius: 7px; background: transparent;
    color: #e8e8ee; cursor: pointer;
}
.rs-addmenu button:hover { background: rgba(152,10,10,.28); }
.rs-addmenu strong { font-size: 13px; font-weight: 600; }
.rs-addmenu small { font-size: 11px; opacity: .55; }

/* ── VSTi-Auswahl im Track-Inspector ────────────────────────────────────── */
.rs-insp-vsti { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.rs-insp-select {
    background: #1c1c22; color: #e8e8ee;
    border: 1px solid var(--rw-line, rgba(255,255,255,.14));
    border-radius: 6px; padding: 6px 8px; font-size: 12px;
}
.rs-insp-vsti-open:disabled { opacity: .4; cursor: default; }

/* ── REC im Spurkopf ────────────────────────────────────────────────────── */
/* Rot leuchtend = HIER wird aufgenommen, unabhaengig von der Auswahl. */
.rs-mini.rec { color: #ff8a8a; }
.rs-mini.rec.is-on {
    background: #c01616; border-color: #ff4d4d; color: #fff;
    box-shadow: 0 0 10px rgba(255,60,60,.65);
}

/* ── MIDI-Editor als Bottom-Bar (2026-08-13) ────────────────────────────── */
/* Die Bottom-Bar schaltet ueber die HOEHE (.rs-bottom / .is-open in studio.css),
   nicht ueber display. Ein display:flex hier haette Kopf und Editor
   nebeneinander gelegt statt untereinander. */
#rsPianoRoll { height: calc(100% - 30px); overflow: hidden; }
.rs-pr { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rs-pr-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 10px; font-size: 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.rs-pr-title { font-weight: 600; }
.rs-pr-spacer { flex: 1; }
.rs-pr-hint { opacity: .45; }
.rs-pr-zoomlbl { display: flex; align-items: center; gap: 6px; opacity: .7; }
.rs-pr-zoom { width: 120px; }
/* Raster, Swing, Quantisieren (2026-08-13) */
.rs-pr-lbl { display: flex; align-items: center; gap: 5px; opacity: .7; }
.rs-pr-grid, .rs-pr-swing {
    background: #16161c; color: #e8e8ee; font-size: 11px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 2px 4px;
}
.rs-pr-quant {
    background: #16161c; color: #e8e8ee; font-size: 11px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 3px 9px;
}
.rs-pr-quant:hover { background: var(--rw-secondary, #ab27e8); border-color: transparent; }
/* Der Editor scrollt in BEIDE Richtungen: die Klaviatur ist hoeher als der
   Balken, und ein Pattern ist meist breiter. */
.rs-pr-main { flex: 1; min-height: 0; display: flex; }
/* Lineal und Notenflaeche stehen untereinander und teilen sich die Breite.
   Das Lineal scrollt NICHT mit: die Notenflaeche ist immer genau so breit wie
   das Fenster, gezoomt wird ueber den Massstab. */
.rs-pr-edit { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.rs-pr-ruler { flex: 0 0 18px; height: 18px; overflow: hidden; cursor: ew-resize; }
.rs-pr-rulercv { display: block; }
.rs-pr-body { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.rs-pr-canvas { display: block; cursor: crosshair; }

/* Werkzeuge fuer die Noten (Ausschneiden, Kopieren, Einfuegen ...) */
.rs-pr-tools { display: flex; align-items: center; gap: 2px; }
.rs-pr-tool {
    background: #16161c; color: #e8e8ee; font-size: 11px; line-height: 1; cursor: pointer;
    border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 4px 7px;
}
.rs-pr-tool:hover { border-color: var(--rw-secondary, #ab27e8); background: #1e1e26; }
.rs-pr-tool:active { background: var(--rw-secondary, #ab27e8); }

/* Trennlinie zum RedAI-Bereich: nur sichtbar, wenn dieser offen ist. */
.rs-pr-split { display: none; }
.rs-pr.is-ai .rs-pr-split {
    display: block; flex: 0 0 6px; cursor: col-resize;
    background: rgba(255,255,255,.07); touch-action: none;
}
.rs-pr.is-ai .rs-pr-split:hover { background: var(--rw-secondary, #ab27e8); }

/* ── Mit RedAI produzieren (2026-08-13) ─────────────────────────────────────
   Der Bereich teilt sich erst auf Knopfdruck. Geschaltet wird ueber die
   Klasse am Wurzelelement, damit die Notenflaeche ihre Breite sofort
   zurueckbekommt, wenn man das Panel wieder schliesst. */
.rs-pr-ai { display: none; }
.rs-pr.is-ai .rs-pr-ai {
    display: flex; flex-direction: column; gap: 8px;
    width: 320px; flex: 0 0 320px; padding: 10px;
    overflow: auto; border-left: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
}
.rs-pr-ai-toggle {
    background: #16161c; color: #e8e8ee; font-size: 11px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 3px 9px;
}
.rs-pr-ai-toggle:hover { border-color: var(--rw-secondary, #ab27e8); }
.rs-pr-ai-toggle.is-on {
    background: linear-gradient(135deg, #980a0a, #ab27e8); border-color: transparent; color: #fff;
}
.rs-pr-ai-head { font-weight: 600; font-size: 12px; }
.rs-pr-ai-wish {
    background: #101014; color: #e8e8ee; font-size: 12px; font-family: inherit;
    border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 6px; resize: vertical;
}
.rs-pr-ai-row { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; }
.rs-pr-ai-scale {
    width: 110px; background: #16161c; color: #e8e8ee; font-size: 11px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 2px 5px;
}
.rs-pr-ai-bars, .rs-pr-ai-mode {
    background: #16161c; color: #e8e8ee; font-size: 11px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 2px 4px;
}
.rs-pr-ai-go {
    background: linear-gradient(135deg, #980a0a, #ab27e8); color: #fff; border: none;
    border-radius: 4px; padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.rs-pr-ai-go:hover { filter: brightness(1.1); }
.rs-pr-ai-go:disabled { opacity: .5; cursor: default; filter: none; }
.rs-pr-ai-status { font-size: 11px; min-height: 14px; opacity: .8; }
.rs-pr-ai-status.is-error { color: #ff7676; opacity: 1; }
.rs-pr-ai-note { font-size: 10px; opacity: .45; line-height: 1.4; }

/* ── VSTi in den Arranger ziehen (2026-08-13) ──────────────────────────── */
.rs-vsti-drop { outline: 2px dashed var(--rw-secondary, #ab27e8); outline-offset: -4px; }

/* ── Computertastatur als MIDI-Keyboard (Strg+K) ───────────────────────── */
.rs-vkb {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 9500;
    padding: 10px 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--rw-line, rgba(255,255,255,.16));
    background: #16161b;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    user-select: none;
}
.rs-vkb[hidden] { display: none; }
/* Die Kopfzeile ist der Griff zum Verschieben - deshalb ein Greifzeiger und
   kein Textmarkieren, das beim Ziehen sonst mitliefe. */
.rs-vkb-head { display: flex; align-items: center; gap: 14px; font-size: 11px; margin-bottom: 8px;
    cursor: grab; touch-action: none; }
.rs-vkb-head:active { cursor: grabbing; }
.rs-vkb-head strong { font-size: 12px; }
.rs-vkb-oct { opacity: .8; }
.rs-vkb-hint { opacity: .45; }
.rs-vkb-x { margin-left: auto; border: 0; background: transparent; color: #e8e8ee; font-size: 16px; cursor: pointer; }
.rs-vkb-rows { display: flex; flex-direction: column; gap: 5px; }
.rs-vkb-row { display: flex; gap: 5px; }
/* Die obere Reihe sitzt eingerueckt, damit die Staffelung der beiden Reihen
   wie auf einer echten Tastatur aussieht. */
.rs-vkb-row[data-row="upper"] { margin-left: 16px; }
.rs-vkb-key {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 42px; height: 44px; gap: 2px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.rs-vkb-key b { font-size: 12px; }
.rs-vkb-key small { font-size: 9px; opacity: .5; }
.rs-vkb-key.is-down {
    background: linear-gradient(180deg, #ab27e8, #7a1cb0);
    border-color: #ab27e8;
}

/* ── Kurzhinweis (2026-08-13) ───────────────────────────────────────────── */
/* Ersetzt lautloses Nichtstun. Bewusst nicht modal: er darf die Arbeit nicht
   unterbrechen, nur erklaeren. */
.rs-hint {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
    z-index: 9600; max-width: 560px;
    padding: 10px 16px; border-radius: 9px;
    border: 1px solid rgba(152,10,10,.7);
    background: #1b1116; color: #f0e8ea; font-size: 12px; line-height: 1.45;
    box-shadow: 0 14px 36px rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.rs-hint.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Take-Stapel in derselben Spur (2026-08-13, wie in Cubase).
   Nur der oberste Take klingt; die darunter liegenden bleiben sichtbar, damit
   erkennbar ist, dass es sie gibt, und ein Klick holt einen zurueck. */
.rs-clip.is-take-under {
    opacity: .32;
    filter: saturate(.35);
    z-index: 0;
    border-bottom: 2px solid rgba(255,255,255,.25);
}
.rs-clip.is-take-under:hover { opacity: .6; cursor: pointer; }