.wbr-shell { width: min(1400px,100%); font-family: system-ui,sans-serif; color: #eeeade; }
.wbr-shell [hidden] { display: none !important; }
.wbr-view { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.wbr-view span { font-size: .8rem; color:#c1c8c2; }
.wbr-shell button,.wbr-shell select,.wbr-shell input[type=number] { min-height:44px; border:1px solid #7e7867; border-radius:8px; background:#222923; color:#f8f2e2; padding:9px 12px; font:inherit; cursor:pointer; }
.wbr-shell button:disabled,.wbr-shell input:disabled { opacity:.5; cursor:default; }
.wbr-shell :is(button,input,select,summary):focus-visible { outline:2px solid #ffce81; outline-offset:3px; }
.wbr-shell button[aria-pressed=true] { background:#536343; border-color:#d3e5a2; }
.workbench-rack-mode > .rack { display:none !important; }
.wbr-transport { position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:#202e24; padding:12px; border:1px solid #6c8069; border-radius:12px; }
.wbr-transport label { display:flex; align-items:center; gap:8px; }
#wbr-bpm { width:86px; }
#wbr-run { color:#142112; background:#c9e9a9; font-weight:750; }
#wbr-stop { border-color:#c38c79; }
#wbr-file { margin-left:auto; }
.wbr-route,.wbr-summary { color:#c0c9b9; font-size:.78rem; line-height:1.6; }
.wbr-actions { display:flex; flex-wrap:wrap; gap:8px; }
.wbr-auto {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding:10px;border:1px solid #596b55;border-radius:10px;background:#1c261f;}
.wbr-auto label {display:flex;align-items:center;gap:8px;font-size:.82rem;}
#wbr-auto-status {font-size:.78rem;color:#c9d7bd;line-height:1.5;}
#wbr-status { min-height:2.8em; font-size:.82rem; line-height:1.5; margin:12px 0; }
.wbr-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.wbr-card { min-width:0; padding:14px; border:1px solid #87744e; border-radius:12px; background:linear-gradient(140deg,#383025,#1b211c); }
.wbr-card-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.wbr-card h2 { margin:0; font:700 1.05rem system-ui,sans-serif; color:#ffe0a3; letter-spacing:0; }
.wbr-card select { width:100%; margin-block:6px; }
.wbr-wave { display:block; font-size:.8rem; }
.wbr-faders { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0; }
.wbr-fader { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; padding:8px 3px; background:#181e18; border:1px solid #575c47; border-radius:8px; text-align:center; }
.wbr-fader span { font-size:.72rem; min-height:2.5em; }
.wbr-fader output { font-size:.78rem; font-variant-numeric:tabular-nums; color:#f7d695; }
.wbr-fader input { writing-mode:vertical-lr; direction:rtl; width:44px; height:88px; touch-action:none; accent-color:#eabe70; cursor:ns-resize; }
.wbr-guide { margin-block:16px; padding:0 14px; border:1px solid #596b55; border-radius:10px; background:#1c261f; font-size:.8rem; line-height:1.65; }
.wbr-guide summary { min-height:44px; padding-block:12px; cursor:pointer; }
.wbr-guide a {color:#f7d695;text-underline-offset:3px;}
@media(max-width:1000px) { .wbr-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.wbr-card:last-child { grid-column:1 / -1; }.wbr-card:last-child .wbr-faders { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:600px) { body.workbench-rack-mode { padding:10px; }.wbr-cards { grid-template-columns:minmax(0,1fr); }.wbr-transport { gap:7px; }.wbr-shell button { font-size:.8rem; }.wbr-view span { width:100%; } }

.wbr-drum-parts {margin:12px 0;}
.wbr-drum-row {display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;margin:8px 0;font-size:.82rem;}
.wbr-drum-row label {display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere;}
.wbr-drum-row button {padding:8px;}
.wbr-drum-row input {width:20px;height:20px;flex-shrink:0;}
.wbr-scenes {margin:14px 0;padding:14px;border:1px solid #697b59;border-radius:12px;background:#20291f;}
.wbr-scenes h2 {margin:0;font-size:1.1rem;color:#eeeade;text-shadow:none;-webkit-text-fill-color:#eeeade;}
.wbr-scene-work {display:grid;grid-template-columns:minmax(200px,.55fr) minmax(0,1fr);gap:16px;align-items:start;}
.wbr-macros {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.wbr-macros .wbr-fader span {font-size:.9rem;min-height:0;}
.wbr-macros .wbr-fader input {height:110px;}
.wbr-macros small {font-size:.72rem;line-height:1.5;color:#cbd5c3;}
.wbr-macro-help {padding:4px 5px 0;max-width:18em;}
.wbr-scene-bank > .wbr-summary {margin-top:0;}
.wbr-scene-slots {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.wbr-scene-slots button {min-width:0;overflow-wrap:anywhere;font-size:.8rem;padding:8px;}
.wbr-scene-edit {display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:10px;}
.wbr-scene-edit label {flex:1;min-width:130px;font-size:.8rem;display:grid;gap:4px;}
.wbr-scene-edit .wbr-scene-target {flex:0 1 160px;}
#wbr-scene-target {width:100%;min-width:0;font-size:16px;}
.wbr-scenes input[type=text],#wbr-scene-name {width:100%;min-height:44px;box-sizing:border-box;border:1px solid #7e7867;border-radius:8px;padding:8px;background:#151e16;color:#f8f2e2;font-size:16px;}
#wbr-scene-status {font-size:.8rem;line-height:1.6;overflow-wrap:anywhere;margin-bottom:0;}
#wbr-scene-confirm {padding:10px;border:1px solid #c8a36a;border-radius:8px;font-size:.85rem;}
#wbr-scene-confirm button {margin:5px;}
@media(max-width:650px){.wbr-scene-work{grid-template-columns:minmax(0,1fr);}.wbr-scenes{padding:10px;}.wbr-macros .wbr-fader input{height:85px;}.wbr-scene-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.wbr-scene-edit label{min-width:0;}.wbr-scene-edit button{grid-column:1 / -1;}.wbr-scene-slots{grid-template-columns:repeat(4,minmax(0,1fr));}}