/* ==========================================================================
   RED STUDIO – DAW Layout (Phase 1)
   CSS-Präfix: rs-
   ========================================================================== */
:root{
    --rs-bg:#0d0f12;
    --rs-panel:#15181d;
    --rs-panel-2:#1b1f26;
    --rs-line:rgba(255,255,255,.07);
    --rs-line-strong:rgba(255,255,255,.14);
    --rs-text:#e7e9ee;
    --rs-muted:#8a8f9a;
    --rs-accent:#BD0D0D;
    --rs-accent-2:#f59e0b;
    --rs-green:#22C55E;
    --rs-head-w:190px;
    --rs-lane-h:96px;
    --rs-ruler-h:34px;
    --rs-side-w:248px;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body.rs-body{
    background:var(--rs-bg); color:var(--rs-text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    overflow:hidden;
}

.rs-app{display:flex; flex-direction:column; height:100vh; width:100vw;}

/* ---------- Topbar ---------- */
.rs-topbar{
    display:flex; align-items:center; gap:18px;
    height:58px; flex:0 0 58px; padding:0 16px;
    background:linear-gradient(180deg,#1a1d23,#121419);
    border-bottom:1px solid var(--rs-line-strong);
    z-index:30;
}
.rs-logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px;}
.rs-logo b{color:#fff;}
.rs-logo .rs-dot{width:11px;height:11px;border-radius:50%;background:var(--rs-accent);box-shadow:0 0 10px var(--rs-accent);}
.rs-logo small{color:var(--rs-muted); font-weight:600; font-size:11px; letter-spacing:1.5px;}

.rs-transport{display:flex; align-items:center; gap:8px;}
.rs-tbtn{
    width:40px;height:40px;border-radius:9px;border:1px solid var(--rs-line-strong);
    background:var(--rs-panel-2); color:var(--rs-text); cursor:pointer; font-size:15px;
    display:flex;align-items:center;justify-content:center; transition:.15s;
}
.rs-tbtn:hover{border-color:var(--rs-accent); color:#fff; background:rgba(189,13,13,.15);}
.rs-tbtn.rs-play.is-playing{background:var(--rs-green); border-color:var(--rs-green); color:#04210f;}
.rs-tbtn.rs-rec{color:#ff6b6b;}

.rs-time{
    font-variant-numeric:tabular-nums; font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
    background:#05070a; border:1px solid var(--rs-line-strong); border-radius:9px;
    padding:7px 14px; min-width:128px; text-align:center; color:#fff; font-size:19px; letter-spacing:1px;
}
.rs-time small{display:block; font-size:9px; color:var(--rs-muted); letter-spacing:2px;}

.rs-meta{display:flex; align-items:center; gap:14px; color:var(--rs-muted); font-size:12px;}
.rs-meta input{
    width:54px; background:#05070a; border:1px solid var(--rs-line-strong); color:#fff;
    border-radius:6px; padding:4px 6px; font-size:12px; text-align:center;
}
.rs-spacer{flex:1;}

.rs-btn{
    border:1px solid var(--rs-line-strong); background:var(--rs-panel-2); color:var(--rs-text);
    border-radius:8px; padding:9px 14px; cursor:pointer; font-size:13px; font-weight:600;
    display:inline-flex; align-items:center; gap:7px; transition:.15s; white-space:nowrap;
}
.rs-btn:hover{border-color:var(--rs-accent); color:#fff;}
.rs-btn.rs-primary{background:linear-gradient(135deg,var(--rs-accent),var(--rs-accent-2)); border:none; color:#fff;}
.rs-btn.rs-primary:hover{filter:brightness(1.08);}
.rs-toggle.is-on{border-color:var(--rs-green); color:var(--rs-green);}

/* ---------- Main 3-column body ---------- */
.rs-main{display:flex; flex:1; min-height:0;}

.rs-sidebar{
    width:var(--rs-side-w); flex:0 0 var(--rs-side-w); background:var(--rs-panel);
    border-right:1px solid var(--rs-line-strong); display:flex; flex-direction:column; min-height:0;
}
.rs-sidebar.rs-right{border-right:none; border-left:1px solid var(--rs-line-strong);}
.rs-side-sec{border-bottom:1px solid var(--rs-line); padding:14px 16px;}
.rs-side-h{
    font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--rs-muted);
    font-weight:700; margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.rs-placeholder{
    color:var(--rs-muted); font-size:12.5px; line-height:1.6;
    border:1px dashed var(--rs-line-strong); border-radius:9px; padding:14px; background:rgba(255,255,255,.02);
}
.rs-tag{display:inline-block; font-size:10px; color:var(--rs-accent-2); border:1px solid rgba(245,158,11,.4);
    border-radius:20px; padding:1px 8px; margin-left:auto; letter-spacing:1px;}

/* Library (Demo-Sounds) */
.rs-lib{display:flex; flex-direction:column; gap:8px;}
.rs-lib-item{
    display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
    background:var(--rs-panel-2); border:1px solid var(--rs-line); cursor:grab; transition:.12s; user-select:none;
}
.rs-lib-item:hover{border-color:var(--rs-accent); transform:translateY(-1px);}
.rs-lib-item:active{cursor:grabbing;}
.rs-lib-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;
    font-size:14px; color:#fff; flex-shrink:0;}
.rs-lib-item b{font-size:13px;}
.rs-lib-item span{display:block;font-size:10.5px;color:var(--rs-muted);}
.rs-hint{font-size:11px;color:var(--rs-muted);margin-top:10px;line-height:1.5;}

/* ---------- FL-Studio-artiger Sound-Browser ---------- */
.rs-browser{display:flex; flex-direction:column; gap:5px;}
.rs-br-loading,.rs-br-empty{font-size:11.5px; color:var(--rs-muted); padding:8px 6px;}

.rs-br-group{border-radius:9px; overflow:hidden;}
.rs-br-cat{
    width:100%; display:flex; align-items:center; gap:9px; cursor:pointer;
    padding:9px 11px; text-align:left; color:var(--rs-text);
    background:var(--rs-panel-2); border:1px solid var(--rs-line);
    border-left:3px solid var(--cat,var(--rs-accent)); border-radius:9px;
    font-family:inherit; transition:.12s;
}
.rs-br-cat:hover{border-color:var(--rs-accent);}
.rs-br-caret{font-size:9px; color:var(--rs-muted); transition:transform .14s ease; width:9px; flex-shrink:0;}
.rs-br-group.is-open .rs-br-caret{transform:rotate(90deg);}
.rs-br-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
    font-size:13px; color:#fff; flex-shrink:0;}
.rs-br-name{flex:1; font-size:13px; font-weight:700;}
.rs-br-count{font-size:10.5px; color:var(--rs-muted); background:#05070a;
    border:1px solid var(--rs-line-strong); border-radius:20px; padding:1px 8px;}

.rs-br-list{display:none; flex-direction:column; gap:3px; padding:5px 4px 4px 10px;}
.rs-br-group.is-open .rs-br-list{display:flex;}

.rs-br-sample{
    display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:7px;
    background:var(--rs-panel); border:1px solid transparent; cursor:grab;
    font-size:12px; user-select:none; transition:.1s;
}
.rs-br-sample:hover{background:var(--rs-panel-2); border-color:var(--rs-line-strong);}
.rs-br-sample:active{cursor:grabbing;}
.rs-br-sample.is-playing{border-color:var(--rs-accent-2); background:rgba(245,158,11,.1);}
.rs-br-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.rs-br-sname{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rs-br-play{font-size:9px; color:var(--rs-muted); opacity:0; transition:.1s;}
.rs-br-sample:hover .rs-br-play{opacity:1; color:var(--rs-accent-2);}

/* ---------- Track Inspector (linke Sidebar) ---------- */
.rs-insp-head{display:flex; align-items:center; gap:9px; margin-bottom:12px;}
.rs-insp-swatch{width:14px; height:14px; border-radius:4px; flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,.15);}
.rs-insp-title{font-size:14px; font-weight:800;}

.rs-insp-row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.rs-insp-lbl{font-size:11px; letter-spacing:.5px; color:var(--rs-muted); text-transform:uppercase; font-weight:700;
    display:flex; justify-content:space-between; align-items:center;}
.rs-insp-lbl b{color:var(--rs-text); font-weight:800;}
.rs-insp-name{font-family:inherit; font-size:13px; color:var(--rs-text); background:var(--rs-panel-2);
    border:1px solid var(--rs-line-strong); border-radius:7px; padding:8px 10px;}
.rs-insp-name:focus{outline:none; border-color:var(--rs-accent-2);}
.rs-insp-gain{width:100%; accent-color:var(--rs-accent);}

.rs-insp-colors{display:flex; flex-wrap:wrap; gap:6px;}
.rs-insp-color{width:22px; height:22px; border-radius:6px; border:2px solid transparent; cursor:pointer; padding:0;}
.rs-insp-color:hover{transform:translateY(-1px);}
.rs-insp-color.is-active{border-color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4);}

.rs-insp-toggles{flex-direction:row; gap:8px;}
.rs-insp-btn{flex:1; font-family:inherit; font-size:12px; font-weight:700; color:var(--rs-muted); cursor:pointer;
    background:var(--rs-panel-2); border:1px solid var(--rs-line-strong); border-radius:7px; padding:8px 0; transition:.12s;}
.rs-insp-btn:hover{color:#fff;}
.rs-insp-mute.is-on{background:var(--rs-accent-2); color:#1a1206; border-color:var(--rs-accent-2);}
.rs-insp-solo.is-on{background:var(--rs-green); color:#04210f; border-color:var(--rs-green);}

.rs-insp-info{display:flex; gap:8px; margin-bottom:14px;}
.rs-insp-info div{flex:1; background:var(--rs-panel-2); border:1px solid var(--rs-line); border-radius:8px;
    padding:8px 10px; display:flex; flex-direction:column; gap:2px;}
.rs-insp-info span{font-size:10px; letter-spacing:.5px; color:var(--rs-muted); text-transform:uppercase;}
.rs-insp-info b{font-size:15px; color:#fff;}

.rs-insp-del{width:100%; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
    background:transparent; color:var(--rs-muted); border:1px solid var(--rs-line-strong); border-radius:7px; padding:8px 0; transition:.12s;}
.rs-insp-del:hover{border-color:#ff6b6b; color:#ff6b6b;}

/* markierter Track-Kopf im Arrangement */
.rs-track-head.is-active{box-shadow:inset 3px 0 0 var(--rs-accent-2);
    background:linear-gradient(0deg, rgba(245,158,11,.07), rgba(245,158,11,.07)), var(--rs-panel);}

/* ---- vertikaler dB-Fader + Pegel-Meter ---- */
.rs-insp-mix{display:flex; gap:14px; margin-bottom:14px;}
.rs-insp-fadercol{display:flex; flex-direction:column; gap:8px; align-items:center;}
.rs-insp-mixright{flex:1; display:flex; flex-direction:column; gap:12px; min-width:0;}
.rs-insp-mixright .rs-insp-toggles{display:flex; gap:8px;}
.rs-insp-mixright .rs-insp-info{margin-bottom:0;}

.rs-fader{display:flex; gap:7px; height:150px; align-items:stretch;}
.rs-fader-meter{
    width:9px; background:#05070a; border:1px solid var(--rs-line-strong); border-radius:5px;
    position:relative; overflow:hidden;
}
.rs-fader-meter-fill{
    position:absolute; bottom:0; left:0; right:0; height:0%;
    background:linear-gradient(0deg,#22C55E 0%, #22C55E 60%, #f59e0b 82%, #ff4d4d 100%);
    transition:height .05s linear;
}
.rs-fader-track{
    position:relative; width:30px; background:var(--rs-panel-2);
    border:1px solid var(--rs-line-strong); border-radius:7px; cursor:ns-resize; touch-action:none;
}
/* Mittellinie (0-dB-Orientierung) */
.rs-fader-track::before{content:""; position:absolute; left:6px; right:6px; top:0; bottom:0;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 12px);}
.rs-fader-fill{position:absolute; bottom:0; left:0; right:0; height:0%;
    background:rgba(189,13,13,.28); border-radius:0 0 6px 6px; pointer-events:none;}
.rs-fader-knob{
    position:absolute; left:-3px; right:-3px; height:16px; bottom:0; margin-bottom:-8px;
    background:linear-gradient(180deg,#fafafa,#c9ccd2); border:1px solid #000; border-radius:4px;
    box-shadow:0 2px 5px rgba(0,0,0,.5); pointer-events:none;
}
.rs-fader-knob::after{content:""; position:absolute; left:4px; right:4px; top:50%; height:2px;
    transform:translateY(-50%); background:rgba(0,0,0,.45); border-radius:1px;}
.rs-fader-db{font-size:11px; font-weight:700; text-align:center; color:var(--rs-text);
    font-variant-numeric:tabular-nums; min-width:54px;}

/* ---- Master-Lane (oberste Spur) ---- */
.rs-master-lane{height:auto; min-height:160px; border-bottom:2px solid var(--rs-line-strong);
    background:linear-gradient(180deg, rgba(245,158,11,.05), transparent);}
.rs-master-head{flex-direction:column; gap:9px; justify-content:flex-start;
    box-shadow:inset 3px 0 0 var(--rs-accent-2);}
.rs-master-top{display:flex; align-items:center; gap:8px; width:100%;}
.rs-master-tag{background:var(--rs-accent-2); color:#1a1206; font-size:9px; font-weight:800;
    letter-spacing:1px; padding:2px 7px; border-radius:4px; flex-shrink:0;}
.rs-master-name{font-weight:800; color:#fff; font-size:13px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
.rs-master-fader{display:flex; flex-direction:column; gap:4px;}
.rs-master-fader .rs-fader{height:104px;}
.rs-master-clips{opacity:.5;}

/* Filter-Leiste im „Samples"-Dropdown (Key + BPM) */
.rs-br-filters{display:flex; gap:6px; padding:2px 2px 6px;}
.rs-br-select{
    flex:1; min-width:0; font-family:inherit; font-size:11.5px; color:var(--rs-text);
    background:var(--rs-panel-2); border:1px solid var(--rs-line-strong); border-radius:6px;
    padding:6px 8px; cursor:pointer;
}
.rs-br-select:hover{border-color:var(--rs-accent);}
.rs-br-select:focus{outline:none; border-color:var(--rs-accent-2);}
.rs-br-results{display:flex; flex-direction:column; gap:3px;}

/* Key/BPM-Badges am Sample */
.rs-br-tag{
    font-size:9.5px; font-weight:700; color:var(--rs-muted); white-space:nowrap;
    background:#05070a; border:1px solid var(--rs-line-strong); border-radius:10px; padding:1px 6px;
}

/* ---------- Arrangement / Timeline ---------- */
.rs-arrange{position:relative; flex:1; min-width:0; overflow:auto; background:var(--rs-bg);}

.rs-ruler-row{position:sticky; top:0; z-index:20; display:flex; height:var(--rs-ruler-h);}
.rs-corner{
    position:sticky; left:0; z-index:21; width:var(--rs-head-w); flex:0 0 var(--rs-head-w);
    background:var(--rs-panel-2); border-right:1px solid var(--rs-line-strong);
    border-bottom:1px solid var(--rs-line-strong);
    display:flex; align-items:center; padding:0 12px;
}
.rs-corner-lbl{ font-size:10px; letter-spacing:1.5px; color:var(--rs-muted); text-transform:uppercase; font-weight:700; }

/* „+ Spur"-Zeile direkt unter der Timeline-Reihe, links angepinnt + immer sichtbar */
.rs-addrow{
    position:sticky; top:var(--rs-ruler-h); left:0; z-index:18; width:var(--rs-head-w);
    height:34px; display:flex; align-items:center; padding:0 8px;
    background:var(--rs-panel-2); border-right:1px solid var(--rs-line-strong); border-bottom:1px solid var(--rs-line);
}
.rs-addrow-btn{
    width:100%; font-family:inherit; font-size:11.5px; font-weight:700; padding:5px 8px; border-radius:7px;
    border:1px solid var(--rs-line-strong); background:var(--rs-panel); color:var(--rs-text); cursor:pointer; transition:.12s;
}
.rs-addrow-btn:hover{ border-color:#980A0A; color:#fff; background:rgba(152,10,10,.18); }

/* Raster-Dropdown (Topbar) */
.rs-btn.rs-select{ -webkit-appearance:none; appearance:none; padding:9px 12px; cursor:pointer; }
.rs-btn.rs-select:hover{ border-color:#AB27E8; color:#fff; }
.rs-btn.rs-select optgroup{ background:#15181d; color:#AB27E8; }
.rs-btn.rs-select option{ background:#15181d; color:var(--rs-text); }
.rs-ruler{
    position:relative; height:var(--rs-ruler-h); background:var(--rs-panel);
    border-bottom:1px solid var(--rs-line-strong); flex:0 0 auto;
}
.rs-ruler-bar{position:absolute; top:0; height:100%; border-left:1px solid var(--rs-line-strong);
    font-size:10px; color:var(--rs-muted); padding:3px 0 0 5px; pointer-events:none;}

/* Lane row = sticky header + scrollable clip area */
.rs-lane{display:flex; height:var(--rs-lane-h); min-height:30px; border-bottom:1px solid var(--rs-line);}
/* Höhen-Anfasser am unteren Rand des Track-Kopfs */
.rs-th-resize{position:absolute; left:0; right:0; bottom:0; height:6px; cursor:ns-resize; z-index:6; touch-action:none;}
.rs-th-resize:hover{background:#980A0A;}
.rs-track-head{
    position:sticky; left:0; z-index:19; width:var(--rs-head-w); flex:0 0 var(--rs-head-w);
    background:var(--rs-panel); border-right:1px solid var(--rs-line-strong);
    padding:9px 11px; display:flex; flex-direction:column; gap:6px;
}
.rs-th-top{display:flex; align-items:center; gap:8px;}
.rs-th-color{width:8px;height:26px;border-radius:3px;flex-shrink:0;}
.rs-th-name{font-size:13px; font-weight:700; flex:1; border:none; background:transparent; color:var(--rs-text);
    padding:2px 4px; border-radius:5px; min-width:0;}
.rs-th-name:focus{outline:none; background:rgba(255,255,255,.06);}
.rs-th-ctrls{display:flex; gap:5px; align-items:center;}
.rs-mini{width:25px;height:22px;border-radius:5px;border:1px solid var(--rs-line-strong);background:var(--rs-panel-2);
    color:var(--rs-muted); font-size:10px; font-weight:800; cursor:pointer; transition:.12s;}
.rs-mini:hover{color:#fff;}
.rs-mini.m.is-on{background:var(--rs-accent-2); color:#1a1206; border-color:var(--rs-accent-2);}
.rs-mini.s.is-on{background:var(--rs-green); color:#04210f; border-color:var(--rs-green);}
.rs-th-vol{width:100%; accent-color:var(--rs-accent);}
.rs-th-del{margin-left:auto; color:var(--rs-muted); background:none; border:none; cursor:pointer; font-size:13px;}
.rs-th-del:hover{color:#ff6b6b;}

.rs-lane-clips{position:relative; flex:0 0 auto; height:100%; background:var(--rs-panel-2);}
.rs-lane-clips.rs-drop{outline:2px dashed var(--rs-accent); outline-offset:-3px; background:rgba(189,13,13,.06);}

/* Audio clip block */
.rs-clip{
    position:absolute; top:6px; bottom:6px; /* füllt die (variable) Lane-Höhe */
    background:linear-gradient(180deg,rgba(189,13,13,.92),rgba(140,8,8,.92));
    border:1px solid rgba(255,255,255,.25); border-radius:7px; overflow:hidden;
    cursor:grab; box-shadow:0 3px 9px rgba(0,0,0,.4); user-select:none;
}
.rs-clip.is-selected{outline:2px solid #fff; outline-offset:-1px; z-index:5;}
.rs-clip:active{cursor:grabbing;}
.rs-clip-label{position:absolute; top:3px; left:7px; right:7px; font-size:10.5px; font-weight:700; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.5); pointer-events:none;}
.rs-clip canvas{position:absolute; left:0; bottom:0; width:100%; height:64%;}

/* Trim-Anfasser an den Clip-Rändern (Clip kürzen/schneiden) */
.rs-clip-handle{position:absolute; top:0; width:9px; height:100%; z-index:4; cursor:ew-resize;}
.rs-clip-handle-l{left:0;}
.rs-clip-handle-r{right:0;}
.rs-clip-handle::after{content:""; position:absolute; top:3px; bottom:3px; width:3px; border-radius:2px;
    background:rgba(255,255,255,0); transition:background .1s;}
.rs-clip-handle-l::after{left:2px;}
.rs-clip-handle-r::after{right:2px;}
.rs-clip:hover .rs-clip-handle::after{background:rgba(255,255,255,.4);}
.rs-clip-handle:hover::after{background:#fff;}

/* Playhead */
.rs-playhead{position:absolute; top:0; width:2px; background:var(--rs-accent-2); z-index:18; pointer-events:none;
    box-shadow:0 0 8px rgba(245,158,11,.8);}
.rs-playhead::before{content:""; position:absolute; top:0; left:-5px; border-left:6px solid transparent;
    border-right:6px solid transparent; border-top:8px solid var(--rs-accent-2);}

/* Loop-Region */
.rs-ruler{cursor:ew-resize;}
.rs-loop-ruler{
    position:absolute; top:0; height:100%; z-index:2; pointer-events:none;
    background:rgba(245,158,11,.32);
    border-left:2px solid var(--rs-accent-2); border-right:2px solid var(--rs-accent-2);
}
.rs-loop-ruler::after{content:"LOOP"; position:absolute; top:2px; left:6px; font-size:9px;
    font-weight:800; letter-spacing:1px; color:#1a1206;}
.rs-loop-band{
    position:absolute; top:0; z-index:4; pointer-events:none; display:none;
    background:rgba(245,158,11,.08);
    border-left:1px solid rgba(245,158,11,.55); border-right:1px solid rgba(245,158,11,.55);
}
.rs-loop-ruler.is-off, .rs-loop-band.is-off{opacity:.35;}

/* Loop-Rand-Anfasser im Lineal (Loop links/rechts ziehen) */
.rs-loop-h{position:absolute; top:0; height:100%; width:11px; z-index:6; pointer-events:auto; cursor:ew-resize;}
.rs-loop-h-l{left:-6px;}
.rs-loop-h-r{right:-6px;}
.rs-loop-h::after{content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
    background:var(--rs-accent-2); box-shadow:0 0 6px rgba(245,158,11,.7);}
.rs-loop-h:hover::after{width:4px;}

/* Rubber-Band-Auswahl (Box) */
.rs-select-box{
    position:fixed; z-index:9500; display:none; pointer-events:none;
    border:1px solid var(--rs-accent-2);
    background:rgba(245,158,11,.12);
    box-shadow:0 0 0 1px rgba(245,158,11,.25) inset;
}

/* Empty state */
.rs-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:var(--rs-muted); font-size:13px; pointer-events:none; text-align:center; padding:20px;}

/* Scrollbars */
.rs-arrange::-webkit-scrollbar{height:13px;width:13px;}
.rs-arrange::-webkit-scrollbar-thumb{background:#2a2f38; border-radius:7px; border:3px solid var(--rs-bg);}
.rs-arrange::-webkit-scrollbar-track{background:transparent;}

/* ---------- Globales Drop-Overlay (Audio-Import per Drag&Drop) ---------- */
.rs-drop-overlay{
    position:fixed; inset:58px 0 0 0; z-index:9000; display:none;
    align-items:center; justify-content:center; pointer-events:none;
    background:rgba(8,9,12,.78); backdrop-filter:blur(3px);
}
.rs-app.rs-dragging .rs-drop-overlay{display:flex;}
.rs-drop-box{
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    padding:40px 56px; border-radius:18px;
    border:2px dashed var(--rs-accent-2); background:rgba(245,158,11,.06);
}
.rs-drop-ic{font-size:46px; color:var(--rs-accent-2); line-height:1;}
.rs-drop-box b{font-size:18px; color:#fff;}
.rs-drop-box span{font-size:12.5px; color:var(--rs-muted);}

@media(max-width:900px){
    :root{--rs-side-w:0px;}
    .rs-sidebar{display:none;}
}

/* ================= GUI-Überarbeitung (2026-05-31) ================= */

/* Zentrum: Toolbar über der Timeline */
.rs-center{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;}
.rs-center .rs-arrange{flex:1; min-height:0;}
.rs-toolbar{display:flex; align-items:center; gap:6px; height:42px; flex:0 0 42px; padding:0 12px;
    background:var(--rs-panel); border-bottom:1px solid var(--rs-line-strong); z-index:25;}
.rs-tool{width:34px; height:30px; border-radius:7px; border:1px solid var(--rs-line-strong);
    background:var(--rs-panel-2); color:var(--rs-muted); cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center; transition:.12s;}
.rs-tool:hover{color:#fff; border-color:var(--rs-accent);}
.rs-tool.is-on{background:var(--rs-accent); color:#fff; border-color:var(--rs-accent);}
.rs-tool-sep{width:1px; height:22px; background:var(--rs-line-strong); margin:0 4px;}
.rs-toolbar-hint{font-size:11px; color:var(--rs-muted); margin-left:8px;}
body.rs-split-mode .rs-clip{cursor:crosshair;}

/* Lanes/Ruler so breit wie ihr Inhalt → Sticky-Köpfe haften über die GANZE
   Scrollbreite (sonst löst sich der Kopf am rechten Rand der Lane-Box). */
.rs-lane, .rs-ruler-row{min-width:max-content;}

/* Track-/Master-Köpfe beim Horizontal-Scrollen IMMER sichtbar + deckend */
.rs-track-head{position:sticky; left:0; z-index:19; background:var(--rs-panel);}
.rs-master-head{cursor:pointer; justify-content:center;}
.rs-master-lane{min-height:var(--rs-lane-h) !important;}
.rs-master-lane.is-active .rs-master-head{box-shadow:inset 3px 0 0 var(--rs-accent-2);
    background:linear-gradient(0deg, rgba(245,158,11,.08), rgba(245,158,11,.08)), var(--rs-panel);}

/* Rechte Sidebar: Umschalter Plugins / Sound Library */
.rs-rt-tabs{display:flex; flex:0 0 auto; gap:6px; padding:10px 12px 0; border-bottom:1px solid var(--rs-line-strong);}
.rs-rt-tab{flex:1; font-family:inherit; font-size:12px; font-weight:700; color:var(--rs-muted); cursor:pointer;
    background:var(--rs-panel-2); border:1px solid var(--rs-line-strong); border-bottom:none;
    border-radius:8px 8px 0 0; padding:9px 0; transition:.12s;}
.rs-rt-tab:hover{color:#fff;}
.rs-rt-tab.is-on{background:var(--rs-accent); color:#fff; border-color:var(--rs-accent);}
.rs-rt-body{flex:1; min-height:0; display:flex;}
.rs-rt-panel{flex:1; min-height:0; display:flex; flex-direction:column; padding:14px 16px; overflow:auto;}
.rs-rt-panel.is-hidden{display:none;}

/* Breite ziehbarer Sidebars (Griff an der Innenkante) */
.rs-resize{position:absolute; top:0; bottom:0; width:7px; z-index:30; cursor:col-resize; touch-action:none;}
.rs-resize-right{right:-1px;}
.rs-resize-left{left:-1px;}
.rs-resize:hover{background:var(--rs-accent);}
body.rs-col-resizing{cursor:col-resize; user-select:none;}
body.rs-col-resizing .rs-resize{background:var(--rs-accent);}
body.rs-col-resizing .rs-sidebar{transition:none;}
.rs-sidebar.is-collapsed .rs-resize{display:none;}

/* Einklappbare Sidebars */
.rs-sidebar{transition:width .16s ease, flex-basis .16s ease;}
.rs-sidebar.is-collapsed{width:0 !important; flex-basis:0 !important; min-width:0; padding:0; border:none; overflow:hidden;}
.rs-sidebar.is-collapsed > *{display:none;}

/* Master-Mini-Stereo-Meter in der Lane */
.rs-master-mini{display:flex; flex-direction:column; gap:3px; width:100%; margin-top:4px;}
.rs-master-mini-ch{position:relative; height:8px; background:#05070a; border:1px solid var(--rs-line-strong); border-radius:3px; overflow:hidden;}
.rs-master-mini-ch span{position:absolute; left:3px; top:-1px; font-size:7px; font-weight:800; color:var(--rs-muted); z-index:2;}
.rs-master-mini-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#22C55E,#f59e0b 82%,#ff4d4d); transition:width .05s linear;}

/* Inspector: Toggles eigenständig (nicht mehr in mixright) */
.rs-insp-toggles{display:flex; flex-direction:row; gap:8px; margin-bottom:14px;}

/* ===== Touch-Drag&Drop (Plugins) ===== */
.rs-dragghost{ position:fixed; z-index:99999; transform:translate(-50%,-150%); pointer-events:none;
    padding:7px 12px; border-radius:9px; background:#980A0A; color:#fff; font-size:11.5px; font-weight:800;
    box-shadow:0 8px 22px rgba(0,0,0,.55), 0 0 14px rgba(152,10,10,.6); white-space:nowrap; }
.rs-pb-card, .rs-sl-slot.is-filled{ touch-action:none; } /* Touch-Drag statt Scroll auf der Quelle */

/* Mono/Stereo-Schalter (Kopf + Mixer) */
.rs-mini.mono{ min-width:26px; font-size:9px; }
.rs-mini.mono.is-on{ background:#AB27E8; color:#fff; border-color:#AB27E8; }
.rs-mx-mono{ width:100%; font-size:9px; font-weight:800; letter-spacing:.5px; padding:4px 0; border-radius:6px;
    border:1px solid var(--rs-line-strong); background:var(--rs-panel-2); color:var(--rs-muted); cursor:pointer; }
.rs-mx-mono:hover{ color:#fff; }
.rs-mx-mono.is-on{ background:#AB27E8; color:#fff; border-color:#AB27E8; box-shadow:0 0 8px rgba(171,39,232,.5); }

/* ===== Track-Reordering (Griff + Dropline) ===== */
#rsLanes{ position:relative; }
.rs-th-drag{ cursor:grab; color:var(--rs-muted); font-size:12px; line-height:1; user-select:none; padding:0 1px; touch-action:none; }
.rs-th-drag:hover{ color:#AB27E8; }
.rs-th-drag:active{ cursor:grabbing; }
.rs-lane.rs-reordering{ opacity:.55; box-shadow:0 10px 24px rgba(0,0,0,.55); }
.rs-dropline{ position:absolute; left:0; right:0; height:3px; background:#AB27E8; box-shadow:0 0 10px #AB27E8; z-index:25; pointer-events:none; }

/* ===== REC: Button-Status, Pegel-Pille, wachsender Clip ===== */
.rs-tbtn.rs-rec.is-rec{ background:#980A0A; border-color:#980A0A; color:#fff; animation:rw-pulse 1s infinite; }
.rs-rec-pill{ position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:9500; display:flex; align-items:center; gap:9px;
    padding:7px 15px; border-radius:30px; background:rgba(152,10,10,.94); color:#fff; font-family:var(--rw-mono,monospace); font-size:12px; font-weight:700;
    box-shadow:0 0 18px rgba(152,10,10,.6), 0 8px 24px rgba(0,0,0,.5); }
.rs-rec-dot{ width:10px; height:10px; border-radius:50%; background:#fff; animation:rw-pulse 1s infinite; }
.rs-rec-time{ font-variant-numeric:tabular-nums; }
.rs-rec-meter{ width:64px; height:6px; background:rgba(0,0,0,.4); border-radius:3px; overflow:hidden; }
.rs-rec-meter i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#22c55e,#f0b32a,#ff4d4d); transition:width .05s linear; }
.rs-rec-clip{ background:linear-gradient(180deg, rgba(152,10,10,.78), rgba(152,10,10,.5)) !important;
    border:1px solid rgba(255,255,255,.45) !important; box-shadow:0 0 14px rgba(152,10,10,.5); }
.rs-rec-clip canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* ===== BOTTOM BAR: Mixer ===== */
.rs-bottom{ flex:0 0 auto; height:0; overflow:hidden; position:relative;
    background:linear-gradient(180deg,#0e1117,#0a0c11); border-top:1px solid var(--rs-line-strong); }
.rs-bottom.is-open{ height:268px; }
.rs-bottom-resize{ position:absolute; top:0; left:0; right:0; height:6px; cursor:row-resize; z-index:6; touch-action:none; }
.rs-bottom-resize:hover, body.rs-col-resizing .rs-bottom-resize{ background:#980A0A; }
.rs-bottom-head{ display:flex; align-items:center; height:30px; padding:0 14px; border-bottom:1px solid var(--rs-line); }
.rs-bottom-title{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--rs-muted); font-weight:800; }
.rs-bottom-close{ margin-left:auto; width:22px; height:22px; border-radius:6px; border:1px solid var(--rs-line-strong);
    background:var(--rs-panel-2); color:var(--rs-muted); cursor:pointer; }
.rs-bottom-close:hover{ color:#fff; border-color:#ff5a5a; }

.rs-mixer{ display:flex; align-items:stretch; height:calc(100% - 30px); overflow-x:auto; overflow-y:hidden; padding:8px 10px; }
.rs-mx-lane{ display:flex; gap:8px; }
.rs-mx-strip{ width:84px; flex:0 0 84px; display:flex; flex-direction:column; gap:6px; padding:8px 6px; border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), #121620; border:1px solid var(--rs-line); }
.rs-mx-master{ margin-left:14px; border-left:3px solid #980A0A; box-shadow:inset 0 0 0 1px rgba(152,10,10,.12); }
.rs-mx-top{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.rs-mx-col{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.rs-mx-name{ font-size:10.5px; font-weight:700; color:var(--rs-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-mx-btns{ display:flex; gap:3px; }
.rs-mx-b{ flex:1; font-size:9px; font-weight:800; padding:3px 0; border-radius:5px; border:1px solid var(--rs-line-strong);
    background:var(--rs-panel-2); color:var(--rs-muted); cursor:pointer; }
.rs-mx-b:hover{ color:#fff; }
.rs-mx-b.m.is-on{ background:var(--rs-accent-2); color:#1a1206; border-color:var(--rs-accent-2); }
.rs-mx-b.s.is-on{ background:var(--rs-green); color:#04210f; border-color:var(--rs-green); }
.rs-mx-b.r.is-on{ background:#980A0A; color:#fff; border-color:#980A0A; box-shadow:0 0 10px rgba(152,10,10,.6); }
.rs-mx-pan{ display:flex; justify-content:center; }
.rs-mx-mst-status{ display:flex; gap:4px; justify-content:center; }
.rs-mx-clip,.rs-mx-lim{ font-size:8px; font-weight:800; letter-spacing:.5px; padding:2px 5px; border-radius:4px;
    background:var(--rs-panel-2); color:var(--rs-muted); border:1px solid var(--rs-line-strong); }
.rs-mx-clip.is-on{ background:#ff4d4d; color:#fff; border-color:#ff4d4d; }
.rs-mx-lim.is-on{ background:#AB27E8; color:#fff; border-color:#AB27E8; }
.rs-mx-body{ flex:1; min-height:0; display:flex; gap:6px; justify-content:center; }
.rs-mx-fader{ height:100%; }
.rs-mx-fader-track{ position:relative; width:26px; height:100%; background:var(--rs-panel-2); border:1px solid var(--rs-line-strong);
    border-radius:6px; cursor:ns-resize; touch-action:none; }
.rs-mx-fader-track::before{ content:""; position:absolute; left:6px; right:6px; top:0; bottom:0;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 14px); }
.rs-mx-fader-fill{ position:absolute; bottom:0; left:0; right:0; height:0%; background:rgba(152,10,10,.32); border-radius:0 0 5px 5px; }
.rs-mx-fader-knob{ position:absolute; left:-2px; right:-2px; height:12px; bottom:0; margin-bottom:-6px;
    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-mx-meter{ display:flex; align-items:flex-end; gap:2px; height:100%; }
.rs-mx-meter i{ width:6px; height:0%; background:linear-gradient(0deg,#22C55E,#22C55E 58%,#f0b32a 82%,#ff4d4d); border-radius:2px; transition:height .05s linear; }
.rs-mx-vals{ display:flex; flex-direction:column; align-items:center; gap:1px; font-family:var(--rw-mono,monospace); font-size:8.5px; color:var(--rs-muted); }
.rs-mx-vals b{ font-size:11px; color:#fff; }

/* Full-Width-Fader mit L/R-Grafik + Peak-Hold */
.rs-fader2{display:flex; flex-direction:column; gap:6px; width:100%;}
.rs-fader2-meters{display:flex; flex-direction:column; gap:3px;}
.rs-fader2-ch{position:relative; height:13px; background:#05070a; border:1px solid var(--rs-line-strong); border-radius:4px; overflow:hidden;}
.rs-fader2-ch span{position:absolute; left:4px; top:50%; transform:translateY(-50%); font-size:8px; font-weight:800; color:var(--rs-muted); z-index:2;}
.rs-fader2-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#22C55E,#22C55E 60%,#f59e0b 82%,#ff4d4d); transition:width .05s linear;}
.rs-fader2-pk{position:absolute; top:0; bottom:0; width:2px; left:0%; background:#fff; box-shadow:0 0 4px rgba(255,255,255,.8);}
.rs-fader2-range{width:100%; accent-color:var(--rs-accent); cursor:pointer;}
.rs-fader2-foot{display:flex; justify-content:space-between; font-size:11px; color:var(--rs-muted); font-variant-numeric:tabular-nums;}
.rs-fader2-foot b{color:#fff;}

/* ===== Clips per Touch verschieben/trimmen (sonst scrollt der Browser) ===== */
.rs-clip{ touch-action:none; }

/* ===== Fade-In / Fade-Out pro Clip ===== */
.rs-fade-vis{ position:absolute; top:0; height:100%; width:0; pointer-events:none; z-index:5; background:rgba(8,9,12,.55); }
.rs-fade-vis-l{ left:0; clip-path:polygon(0 0, 100% 0, 0 100%); }
.rs-fade-vis-r{ right:0; clip-path:polygon(0 0, 100% 0, 100% 100%); }
.rs-clip-fade{ position:absolute; top:0; width:14px; height:14px; margin-left:-7px; z-index:7; cursor:ew-resize; touch-action:none;
    background:#fff; border:1px solid rgba(0,0,0,.5); border-top:none; border-radius:0 0 7px 7px; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.rs-clip-fade:hover{ background:#AB27E8; }

/* ===== Gast-Banner (geteiltes Fremd-Projekt) ===== */
.rs-guest-banner{ position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:9400; max-width:92vw;
    padding:8px 16px; border-radius:24px; font-size:12px; color:#fff; text-align:center;
    background:rgba(171,39,232,.94); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(171,39,232,.55); }
.rs-guest-banner b{ color:#fff; }

/* ===== Transport-Leiste unter der Timeline ===== */
.rs-transportbar{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:20px;
    height:56px; padding:0 16px; background:linear-gradient(180deg,#15181d,#0e1117); border-top:1px solid var(--rs-line-strong); }
@media (max-width:520px){ .rs-transportbar{ height:50px; gap:12px; } }

/* ===== Größere Resize-Griffe auf Touch-Geräten ===== */
@media (pointer:coarse){
    .rs-resize{ width:18px; }
    .rs-resize-right{ right:-9px; }
    .rs-resize-left{ left:-9px; }
    .rs-bottom-resize{ height:16px; }
}

/* ===== Responsive Topbar: am Smartphone mehrzeilig stapeln ===== */
@media (max-width:820px){
    .rs-topbar{ height:auto; flex:0 0 auto; flex-wrap:wrap; gap:6px 7px; padding:8px 10px; }
    .rs-topbar .rs-spacer{ display:none; }
    .rs-logo{ order:0; }
    .rs-transport{ order:1; }
    .rs-time{ order:2; min-width:104px; font-size:16px; padding:5px 10px; }
    .rs-meta{ order:5; flex-wrap:wrap; gap:6px 10px; width:100%; }
    .rs-topbar .rs-btn{ padding:8px 10px; font-size:12px; }
    /* zweite/dritte Etage: Aktionen umbrechen */
    #rsToggleLeft, #rsMixerToggle, #rsToggleRight, #rsImport, #rsAddTrack, #rsSave, .rs-topbar > a.rs-btn{ order:6; }
}
@media (max-width:520px){
    .rs-time{ font-size:14px; min-width:92px; }
    .rs-topbar .rs-btn{ padding:7px 9px; font-size:11px; }
    .rs-tbtn{ width:36px; height:36px; }
    .rs-bottom.is-open{ height:220px; }
}