screen.html

<style>
    /* v3-integration polish, custom (non-utility) rules only. The Tailwind
       utility classes this plugin uses ship via assets/rb.css (loaded by
       screen.js, built by tools/build_tailwind.sh) so the look is correct even
       when the host skips its JIT rebuild. Safe in legacy desktop + v3. */
    /* Kill the white UA focus box the v3 web shell shows on click (buttons/tabs
       and the interactive pedal <canvas>, which Safari outlines). */
    #rb-root button:focus,
    #rb-root a:focus,
    #rb-root [onclick]:focus,
    #rb-root input:focus,
    #rb-root select:focus,
    #rb-root textarea:focus,
    #rb-root canvas:focus,
    #rb-root [tabindex]:focus,
    #rb-root button:focus-visible,
    #rb-root a:focus-visible,
    #rb-root [onclick]:focus-visible,
    #rb-root canvas:focus-visible { outline: none !important; box-shadow: none !important; }
    /* pt-24 clears the legacy fixed navbar; in v3 that navbar is hidden, so trim
       the gap ONLY inside #v3-main. The legacy desktop keeps pt-24. */
    /* v3: the host topbar is hidden in Studio (rbSetImmersiveTopbar), so drop
       the top padding entirely — the plugin's own floating tab bar sits flush
       at the very top and the room fills everything below it. */
    #v3-main #rb-root { padding-top: 0; }
    /* v3: sidebar + Plugins page own navigation, so hide the legacy "< Back". */
    #v3-main #rb-root .rb-back{display:none!important}
    #rb-root.rb-wide { max-width: min(1400px, calc(100vw - 3rem)); }
    /* Studio runs edge-to-edge: full viewport width, no horizontal padding, so
       the room + the right-docked swap rail reach the screen edges. */
    #rb-root.rb-studio-bleed { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
    @media (max-width: 1023px) {
        #rb-root .rb-gear-browser { grid-template-columns: 1fr !important; }
        #rb-root.rb-wide { max-width: 100%; }
    }

    /* ── Immersive shell: Studio is the permanent backdrop; the top bar floats
       (translucent blue) and the other tabs float over the room as panels ── */
    #rb-root.rb-immersive{ max-width:none !important; padding-left:0 !important;
        padding-right:0 !important; padding-bottom:0 !important; position:relative; }
    #rb-root.rb-immersive > .rb-back{ display:none; }
    .rb-topbar{ position:relative; z-index:50; display:flex; align-items:center; gap:5px;
        padding:11px 18px;
        background:linear-gradient(180deg, rgba(54,82,146,.34), rgba(26,46,90,.15));
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
        border-bottom:1px solid rgba(120,165,225,.18); }
    .rb-topbar .rb-tab{ border:none; border-radius:9px; padding:7px 14px; font-size:13px; color:#aab7cf;
        background:transparent; cursor:pointer; transition:background .15s, color .15s; white-space:nowrap; }
    .rb-topbar .rb-tab:hover{ color:#fff; background:rgba(255,255,255,.07); }
    .rb-topbar .rb-tab.rb-tab-active{ color:#fff; background:rgba(120,160,220,.24);
        box-shadow:inset 0 0 0 1px rgba(120,170,240,.32); }
    .rb-topbar-back{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; margin-right:4px; cursor:pointer;
        font-size:18px; line-height:1; color:#aab7cf; background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.1); }
    /* Advanced entry point, floating inside the Studio room (top-right) */
    .rb-studio-adv-btn{ position:absolute; top:14px; right:16px; z-index:20; cursor:pointer;
        padding:7px 13px; border-radius:9px; font-size:13px; font-weight:500; color:#cfe0ff;
        background:rgba(30,46,76,.62); border:1px solid rgba(120,170,240,.34);
        box-shadow:0 6px 18px rgba(0,0,0,.4); backdrop-filter:blur(6px);
        transition:background .15s, color .15s, transform .12s; }
    .rb-studio-adv-btn:hover{ background:rgba(48,72,118,.8); color:#fff; transform:translateY(-1px); }
    /* Restore/Remove-tone action, floating just LEFT of ⚙ Advanced. */
    .rb-studio-tone-action{ right:140px !important; }
    .rb-studio-tone-action.hidden{ display:none; }
    /* Replace-with-preset action, floating just LEFT of Restore/Remove.
       Offset clears the widest Restore/Remove label ("↺ Restore to original"). */
    .rb-studio-tone-replace{ right:316px !important; }
    .rb-studio-tone-replace.hidden{ display:none; }
    /* When a song's tonebar is shown it covers the top strip — drop the Advanced
       button below it so it stays reachable while a song is loaded. */
    #rb-stage-wrap.rb-songbar-on .rb-studio-adv-btn{ top:58px; }
    /* Full-chain NAM loader: fixed bottom-left, always present (song or not). */
    .rb-studio-fullchain-btn{ position:absolute; bottom:16px; left:16px; z-index:20; cursor:pointer;
        padding:7px 13px; border-radius:9px; font-size:13px; font-weight:500; color:#d8ffe6;
        background:rgba(20,58,40,.62); border:1px solid rgba(90,220,150,.34);
        box-shadow:0 6px 18px rgba(0,0,0,.4); backdrop-filter:blur(6px);
        transition:background .15s, color .15s, transform .12s; }
    .rb-studio-fullchain-btn:hover{ background:rgba(28,84,58,.85); color:#fff; transform:translateY(-1px); }
    /* Full-chain override: grey the board when active + a banner with a toggle.
       A `filter`/`opacity` on the 3D stage FLATTENS the room (breaks translateZ/
       rotateY → gear changes size/position), so only disable interaction here and
       grey the 2D leaf FACES below. */
    #rb-studio-room.rb-fullchain-active .rb-studio-stage{ pointer-events:none; }
    #rb-studio-room.rb-fullchain-active .rb-amp-face img,
    #rb-studio-room.rb-fullchain-active .rb-amp-head,
    #rb-studio-room.rb-fullchain-active .rb-amp-cab img,
    #rb-studio-room.rb-fullchain-active .rb-pedal img,
    #rb-studio-room.rb-fullchain-active .rb-pedal-fallback,
    #rb-studio-room.rb-fullchain-active .rb-rack img,
    #rb-studio-room.rb-fullchain-active .rb-rack-fallback{ filter:grayscale(1) brightness(.7); transition:filter .2s; }
    .rb-fc-banner{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:30; display:flex; align-items:center;
        gap:10px; padding:8px 12px; border-radius:11px; font-size:13px; color:#eaf1ff; backdrop-filter:blur(6px);
        box-shadow:0 8px 22px rgba(0,0,0,.45); }
    #rb-stage-wrap.rb-songbar-on #rb-studio-room .rb-fc-banner{ top:58px; }
    .rb-fc-banner.on{ background:rgba(24,84,54,.82); border:1px solid rgba(90,220,150,.5); }
    .rb-fc-banner.off{ background:rgba(40,46,60,.82); border:1px solid rgba(255,255,255,.16); color:#b9c4d6; }
    .rb-fc-banner b{ color:#fff; }
    .rb-fc-banner-btn{ cursor:pointer; font-size:12px; padding:4px 11px; border-radius:8px; color:#fff;
        background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); }
    .rb-fc-banner-btn:hover{ background:rgba(255,255,255,.24); }
    .rb-fc-banner-x{ cursor:pointer; color:inherit; background:none; border:none; font-size:14px; padding:2px 5px; border-radius:6px; opacity:.75; }
    .rb-fc-banner-x:hover{ opacity:1; background:rgba(255,255,255,.14); }
    /* Hide it in gear/pedal focus edit (same as the Advanced button). */
    #rb-stage-wrap:has(#rb-studio-room.rb-focus-active) .rb-studio-fullchain-btn,
    #rb-stage-wrap:has(#rb-studio-room.rb-pfocus) .rb-studio-fullchain-btn{ display:none !important; }

    /* ── Full-chain NAM chooser modal ─────────────────────────────────────── */
    .rb-fc-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center;
        justify-content:center; background:rgba(6,10,16,.62); backdrop-filter:blur(3px); }
    .rb-fc-modal.hidden{ display:none; }
    .rb-fc-card{ width:min(460px,92vw); max-height:86vh; overflow:hidden; display:flex; flex-direction:column;
        background:#141a24; border:1px solid rgba(120,170,240,.22); border-radius:14px;
        box-shadow:0 24px 70px rgba(0,0,0,.6); }
    .rb-fc-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px;
        font-size:14px; font-weight:600; color:#eaf1ff; border-bottom:1px solid rgba(255,255,255,.07); }
    .rb-fc-x{ cursor:pointer; color:#9fb0c8; background:none; border:none; font-size:15px; padding:2px 6px; border-radius:6px; }
    .rb-fc-x:hover{ color:#fff; background:rgba(255,255,255,.1); }
    .rb-fc-body{ padding:14px 16px; overflow-y:auto; }
    .rb-fc-scope{ font-size:12px; color:#9fb0c8; margin-bottom:12px; }
    .rb-fc-scope b{ color:#d8ffe6; font-weight:600; }
    .rb-fc-dir{ width:100%; cursor:pointer; padding:10px 12px; border-radius:9px; font-size:13px; font-weight:500;
        color:#d8ffe6; background:rgba(20,58,40,.6); border:1px solid rgba(90,220,150,.34); transition:background .15s; }
    .rb-fc-dir:hover{ background:rgba(28,84,58,.85); color:#fff; }
    .rb-fc-or{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
        color:#6b7a90; margin:13px 0 10px; }
    .rb-fc-search{ display:flex; gap:6px; }
    .rb-fc-search input{ flex:1; min-width:0; background:#0e131b; border:1px solid rgba(255,255,255,.1);
        border-radius:8px; color:#e6edf7; font-size:13px; padding:8px 10px; }
    .rb-fc-search button{ cursor:pointer; padding:8px 14px; border-radius:8px; font-size:13px; color:#cfe0ff;
        background:rgba(30,46,76,.7); border:1px solid rgba(120,170,240,.34); }
    .rb-fc-search button:hover{ background:rgba(48,72,118,.85); color:#fff; }
    .rb-fc-results{ margin-top:10px; display:flex; flex-direction:column; gap:3px; max-height:340px; overflow-y:auto; }
    .rb-fc-hint{ font-size:12px; color:#8a98ad; padding:8px 2px; }
    .rb-fc-hint.rb-fc-warn{ color:#ffcf7a; }
    .rb-fc-row{ display:flex; align-items:center; gap:9px; padding:6px 7px; border-radius:8px; }
    .rb-fc-row:hover{ background:rgba(255,255,255,.05); }
    .rb-fc-thumb{ width:36px; height:36px; object-fit:cover; border-radius:6px; background:#0e131b; flex:0 0 auto; }
    .rb-fc-thumb-empty{ display:flex; align-items:center; justify-content:center; font-size:9px; color:#4b5568; }
    .rb-fc-row-main{ flex:1; min-width:0; text-decoration:none; }
    .rb-fc-row-title{ font-size:12px; color:#dbe4f2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rb-fc-row-main:hover .rb-fc-row-title{ color:#fff; }
    .rb-fc-row-sub{ font-size:10px; color:#6b7a90; }
    .rb-fc-use{ cursor:pointer; white-space:nowrap; flex:0 0 auto; font-size:11px; padding:5px 9px; border-radius:7px;
        color:#d8ffe6; background:rgba(24,96,60,.8); border:1px solid rgba(90,220,150,.4); }
    .rb-fc-use:hover{ background:rgba(30,120,74,.95); color:#fff; }
    .rb-fc-use:disabled{ opacity:.6; cursor:default; }
    /* Shared tone3000 browser: category chips + per-tone capture list. */
    .rb-t3k-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
    .rb-t3k-chip{ cursor:pointer; font-size:11px; padding:3px 9px; border-radius:999px; color:#9fb0c8;
        background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); transition:background .12s, color .12s; }
    .rb-t3k-chip:hover{ background:rgba(255,255,255,.1); color:#e6edf7; }
    .rb-t3k-chip.on{ background:rgba(48,72,118,.85); border-color:rgba(120,170,240,.5); color:#fff; }
    .rb-t3k-cand{ align-items:center; }
    .rb-t3k-exp{ cursor:pointer; flex:0 0 auto; width:20px; text-align:center; color:#8a98ad; background:none;
        border:none; font-size:12px; padding:2px; border-radius:5px; }
    .rb-t3k-exp:hover{ color:#fff; background:rgba(255,255,255,.1); }
    .rb-t3k-caps{ margin:1px 0 8px 30px; border-left:2px solid rgba(120,170,240,.2); padding-left:8px; }
    .rb-t3k-caplist{ display:flex; flex-direction:column; gap:2px; max-height:230px; overflow-y:auto; }
    .rb-t3k-capsearch input{ width:100%; box-sizing:border-box; margin:2px 0 5px; background:#0e131b;
        border:1px solid rgba(255,255,255,.1); border-radius:7px; color:#e6edf7; font-size:11px; padding:5px 8px; }
    .rb-t3k-cap{ display:flex; align-items:center; gap:8px; padding:3px 4px; border-radius:6px; }
    .rb-t3k-cap:hover{ background:rgba(255,255,255,.04); }
    .rb-t3k-cap-name{ flex:1; min-width:0; font-size:11px; color:#cdd7e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rb-t3k-cap-size{ flex:0 0 auto; font-size:9px; text-transform:uppercase; color:#6b7a90; }
    /* Whole-row expander: the candidate row is clickable; the pill on the right
       makes "there's more inside" obvious (no separate download button here). */
    .rb-t3k-cand{ cursor:pointer; }
    .rb-t3k-cand:hover{ background:rgba(255,255,255,.05); }
    .rb-t3k-more{ flex:0 0 auto; font-size:11px; color:#9fb0c8; white-space:nowrap; padding:3px 10px; border-radius:999px;
        background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
    .rb-t3k-cand:hover .rb-t3k-more{ color:#fff; background:rgba(48,72,118,.7); border-color:rgba(120,170,240,.4); }
    .rb-t3k-cand.open .rb-t3k-more{ color:#fff; background:rgba(48,72,118,.9); border-color:rgba(120,170,240,.5); }
    .rb-t3k-link{ color:#8fb3ef; text-decoration:none; }
    .rb-t3k-link:hover{ color:#cfe0ff; text-decoration:underline; }
    /* Add-gear source selector: pick ONE of tone3000 / directory / downloaded. */
    .rb-cg-srcsegs{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-bottom:9px; }
    .rb-cg-srcseg{ cursor:pointer; font-size:12px; padding:5px 11px; border-radius:8px; color:#9fb0c8;
        background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); transition:background .12s, color .12s; }
    .rb-cg-srcseg:hover{ background:rgba(255,255,255,.1); color:#e6edf7; }
    .rb-cg-srcseg.on{ background:rgba(48,72,118,.85); border-color:rgba(120,170,240,.5); color:#fff; }
    /* Amp gain-variant rows (clean/crunch/dist → downloaded NAM). */
    .rb-cg-varrow{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
    .rb-cg-varlvl{ flex:0 0 46px; font-size:11px; font-weight:600; text-transform:capitalize; color:#cdd7e6; }
    .rb-cg-varrange{ flex:0 0 74px; font-size:10px; color:#6b7a90; white-space:nowrap; }
    .rb-cg-varsel{ flex:1; min-width:0; background:#0e131b; border:1px solid rgba(255,255,255,.12); border-radius:7px;
        color:#e6edf7; font-size:11px; padding:5px 7px; }
    /* Gear focus (amp/pedal/rack editor open, catalog on the right): hide the
       floating "⚙ Advanced" button AND the song-tones bar. The focus bar's
       "← Room" back button sits at top:0/z-index:7, but the tonebar is at
       top:0/z-index:25 and was covering it. Both auto-restore on close — the
       focus class drops off #rb-studio-room, so no JS teardown needed. */
    #rb-stage-wrap:has(#rb-studio-room.rb-focus-active) .rb-studio-adv-btn,
    #rb-stage-wrap:has(#rb-studio-room.rb-pfocus) .rb-studio-adv-btn,
    #rb-stage-wrap:has(#rb-studio-room.rb-focus-active) .rb-song-tonebar,
    #rb-stage-wrap:has(#rb-studio-room.rb-pfocus) .rb-song-tonebar{ display:none !important; }
    .rb-topbar-back:hover{ color:#fff; background:rgba(255,255,255,.12); }
    .rb-mute-btn{ margin-left:auto; flex:0 0 auto; border:1px solid rgba(120,170,240,.3); border-radius:9px; padding:7px 11px;
        font-size:14px; line-height:1; color:#dbe4f2; background:rgba(120,160,220,.14); cursor:pointer;
        transition:background .15s, color .15s, border-color .15s; }
    .rb-mute-btn:hover{ background:rgba(120,160,220,.24); }
    .rb-mute-btn.rb-mute-on{ color:#ffd7d7; background:rgba(200,60,60,.34); border-color:rgba(220,90,90,.6); }
    .rb-songbtn{ flex:0 0 auto; border:1px solid rgba(120,170,240,.3); border-radius:9px;
        padding:7px 13px; font-size:13px; color:#dbe4f2; background:rgba(120,160,220,.16); cursor:pointer;
        white-space:nowrap; transition:background .15s, color .15s; }
    .rb-songbtn:hover{ color:#fff; background:rgba(120,160,220,.28); }
    .rb-songbtn.rb-songbtn-on{ color:#fff; background:rgba(120,160,220,.34); box-shadow:inset 0 0 0 1px rgba(140,180,250,.5); }
    /* tone selector (single bar): current tone + a searchable dropdown */
    .rb-toneselect{ position:relative; flex:0 0 auto; }
    .rb-tone-btn{ border:1px solid rgba(120,170,240,.3); border-radius:9px; padding:7px 13px; font-size:13px;
        color:#dbe4f2; background:rgba(120,160,220,.16); cursor:pointer; white-space:nowrap; max-width:240px;
        overflow:hidden; text-overflow:ellipsis; transition:background .15s, color .15s; }
    .rb-tone-btn:hover{ color:#fff; background:rgba(120,160,220,.28); }
    .rb-tone-menu{ position:absolute; top:calc(100% + 8px); right:0; width:min(300px,80vw); z-index:60;
        display:flex; flex-direction:column; max-height:60vh; border-radius:12px; overflow:hidden;
        background:linear-gradient(180deg, rgba(20,30,52,.96), rgba(12,18,32,.97));
        -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
        border:1px solid rgba(120,165,225,.22); box-shadow:0 18px 44px rgba(0,0,0,.55); }
    .rb-tone-menu.hidden{ display:none; }
    .rb-tone-search{ padding:10px; border-bottom:1px solid rgba(255,255,255,.06); }
    .rb-tone-search input{ width:100%; background:rgba(8,14,28,.6); border:1px solid rgba(120,160,220,.22);
        border-radius:9px; padding:8px 11px; font-size:13px; color:#dbe4f2; outline:none; }
    .rb-tone-search input::placeholder{ color:#7e8aa3; }
    .rb-tone-list{ overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
    .rb-tone-grouphdr{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#7e8aa3;
        padding:8px 8px 4px; }
    .rb-tone-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer;
        color:#cdd6e6; font-size:13px; }
    .rb-tone-row:hover{ background:rgba(120,160,220,.16); color:#fff; }
    .rb-tone-row-on{ background:rgba(120,160,220,.24); color:#fff; box-shadow:inset 0 0 0 1px rgba(140,180,250,.4); }
    .rb-tone-row-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .rb-tone-row-del{ flex:0 0 auto; border:none; background:transparent; cursor:pointer; font-size:13px; opacity:.6; }
    .rb-tone-row-del:hover{ opacity:1; }
    .rb-tone-foot{ padding:8px; border-top:1px solid rgba(255,255,255,.06); }
    .rb-tone-save{ width:100%; border:1px solid rgba(74,210,150,.4); border-radius:9px; padding:9px;
        color:#bff0d6; background:rgba(52,180,120,.16); cursor:pointer; font-size:13px; }
    .rb-tone-save:hover{ color:#fff; background:rgba(52,180,120,.3); }
    .rb-tone-saveinput{ display:flex; align-items:center; gap:6px; }
    .rb-tone-saveinput input{ flex:1; background:rgba(8,14,28,.6); border:1px solid rgba(120,160,220,.3);
        border-radius:8px; padding:8px 10px; font-size:13px; color:#dbe4f2; outline:none; }
    .rb-tone-saveok, .rb-tone-savecancel{ border:1px solid rgba(255,255,255,.14); border-radius:8px;
        padding:8px 11px; font-size:13px; cursor:pointer; background:rgba(255,255,255,.06); color:#dbe2ee; }
    .rb-tone-saveok{ background:rgba(52,180,120,.22); border-color:rgba(74,210,150,.42); color:#bff0d6; }
    .rb-tone-saveok:hover{ background:rgba(52,180,120,.34); color:#fff; }
    .rb-tone-savecancel:hover{ background:rgba(255,255,255,.14); color:#fff; }
    #rb-stage-wrap{ position:relative; }
    /* song-tones bar — its own strip over the top of the room, only with a song */
    .rb-song-tonebar{ position:absolute; top:0; left:0; right:0; z-index:25; display:flex; gap:6px;
        align-items:center; padding:8px 16px; overflow-x:auto; white-space:nowrap;
        background:linear-gradient(180deg, rgba(40,62,112,.4), rgba(20,36,72,.18));
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
        border-bottom:1px solid rgba(120,165,225,.14); }
    .rb-song-tonebar.hidden{ display:none; }
    .rb-song-tonebar::-webkit-scrollbar{ height:0; }
    .rb-song-tonebar-name{ font-size:12.5px; color:#d2dcec; font-weight:500; max-width:340px;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:8px; flex:0 0 auto; }
    .rb-song-tonebar-x{ margin-left:auto; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); border-radius:8px;
        width:28px; height:28px; cursor:pointer; color:#cdd6e6; background:rgba(255,255,255,.05); font-size:13px; }
    .rb-song-tonebar-x:hover{ color:#fff; background:rgba(255,255,255,.14); }
    #rb-root.rb-immersive #rb-tab-studio{ display:block; }
    #rb-root.rb-immersive #rb-studio-room{ height:calc(100vh - 158px); border-radius:0; }
    /* In the v3 shell the host topbar is hidden while Studio is open (see
       rbSetImmersiveTopbar in screen.js) and #rb-root's top padding is 0, so the
       room fills the whole main area: 100vh minus only the plugin's own floating
       tab bar (~59px). Scoped to #v3-main so the legacy v2 shell (which still
       shows its own chrome) keeps 158px. */
    #v3-main #rb-root.rb-immersive #rb-studio-room{ height:calc(100vh - 59px); }
    .rb-overlay{ position:absolute; inset:0; z-index:30; overflow-y:auto;
        padding:24px clamp(16px,5vw,72px) 60px;
        background:linear-gradient(180deg, rgba(8,12,22,.72), rgba(6,9,16,.82));
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
    .rb-overlay.hidden{ display:none; }

    /* Songs = a bottom search dock that does NOT cover the studio room */
    .rb-songdock{ position:absolute; left:0; right:0; bottom:0; z-index:35; pointer-events:none; }
    .rb-songdock.hidden{ display:none; }
    .rb-songdock-inner{ pointer-events:auto; margin:0 auto; width:min(660px,94%);
        display:flex; flex-direction:column; }
    .rb-songdock-list{ max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding:8px;
        background:linear-gradient(180deg, rgba(12,18,32,.6), rgba(10,14,26,.82));
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
        border:1px solid rgba(120,160,220,.16); border-bottom:none; border-radius:14px 14px 0 0; }
    .rb-songdock-list:empty{ display:none; }
    .rb-songdock-search{ display:flex; gap:8px; align-items:center; padding:12px 14px;
        background:linear-gradient(180deg, rgba(48,74,134,.34), rgba(26,46,90,.42));
        -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
        border:1px solid rgba(120,165,225,.2); }
    .rb-songdock-search input{ flex:1; background:rgba(8,14,28,.6); border:1px solid rgba(120,160,220,.22);
        border-radius:10px; padding:10px 14px; font-size:13px; color:#dbe4f2; outline:none; }
    .rb-songdock-search input::placeholder{ color:#7e8aa3; }
    .rb-songdock-search input:focus{ border-color:rgba(120,170,240,.5); }
    .rb-songdock-search button{ background:rgba(120,160,220,.22); border:1px solid rgba(120,170,240,.34);
        color:#eaf1fb; padding:10px 16px; border-radius:10px; font-size:13px; cursor:pointer; }
    .rb-songdock-search button:hover{ background:rgba(120,160,220,.34); }

    /* top-bar tone chips (the loaded song's tones, left→right) */
    .rb-tone-chip{ border:1px solid rgba(120,170,240,.22); border-radius:9px; padding:6px 12px; font-size:12.5px;
        color:#bcc8de; background:rgba(120,160,220,.1); cursor:pointer; white-space:nowrap;
        transition:background .15s, color .15s; }
    .rb-tone-chip:hover{ color:#fff; background:rgba(120,160,220,.2); }
    .rb-tone-chip.rb-tone-chip-on{ color:#fff; background:rgba(120,160,220,.34);
        box-shadow:inset 0 0 0 1px rgba(140,180,250,.5); }
    .rb-song-reset-btn{ border-color:rgba(240,180,90,.42) !important; color:#e8c48a !important;
        background:rgba(240,180,90,.1) !important; }
    .rb-song-reset-btn:hover{ color:#fff !important; background:rgba(240,170,70,.28) !important; }
    .rb-tone-sep{ width:1px; align-self:stretch; margin:2px 2px; background:rgba(160,180,220,.22); }
    .rb-tone-save{ border:1px solid rgba(74,210,150,.4); border-radius:9px; padding:6px 12px; font-size:12.5px;
        color:#bff0d6; background:rgba(52,180,120,.16); cursor:pointer; white-space:nowrap; }
    .rb-tone-save:hover{ color:#fff; background:rgba(52,180,120,.3); }
    .rb-tone-del{ border:1px solid rgba(220,95,95,.4); border-radius:9px; padding:6px 10px; font-size:12.5px;
        color:#f4d4d4; background:rgba(200,70,70,.16); cursor:pointer; }
    .rb-tone-del:hover{ color:#fff; background:rgba(212,72,72,.3); }

    /* ── Studio room (premium dark + perspective) — Phase 1 ───────────── */
    #rb-studio-room{
        --rb-accent:#34d3c0;
        position:relative; border-radius:1.25rem; overflow:hidden;
        min-height:0; height:calc(100vh - 210px);
        background:#070809;
        border:1px solid rgba(255,255,255,.06);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    /* warm light pools spilling from the ceiling fixtures */
    #rb-studio-room::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
        background:
            radial-gradient(38% 32% at 31% 6%, rgba(255,246,222,.20), transparent 72%),
            radial-gradient(38% 32% at 69% 6%, rgba(255,246,222,.18), transparent 72%),
            radial-gradient(70% 50% at 50% -4%, rgba(255,250,236,.12), transparent 78%); }
    /* soft atmosphere vignette over the whole scene */
    #rb-studio-room::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
        background:radial-gradient(88% 72% at 50% 40%, transparent 56%, rgba(0,0,0,.46) 100%); }
    /* hide the room header while focused so the ← Room button isn't crowded */
    #rb-studio-room.rb-focus-active .rb-studio-head{ opacity:0; pointer-events:none; }

    /* ── 3D control room: black walls w/ mounted grey acoustic panels (3D) ── */
    .rb-room-3d{ position:absolute; inset:0; transform-style:preserve-3d;
        transition:transform .55s cubic-bezier(.33,0,.2,1), opacity .5s ease, filter .5s ease; }
    .rb-wall{ position:absolute; overflow:hidden;
        background:linear-gradient(180deg,#111317,#070809); }
    .rb-wall::before{ content:""; position:absolute; inset:0;
        background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px);
        box-shadow:inset 0 0 130px rgba(0,0,0,.6); }
    .rb-wall-back{ inset:0; transform:translateZ(-760px); filter:brightness(1.06); }
    .rb-wall-left{ top:0; bottom:0; left:0; width:760px; transform-origin:left center;
        transform:rotateY(90deg); filter:brightness(.8); }
    .rb-wall-right{ top:0; bottom:0; right:0; width:760px; transform-origin:right center;
        transform:rotateY(-90deg); filter:brightness(.9); }
    /* grey fabric acoustic panel — raised off the wall with a SUBTLE depth face.
       The face direction depends on which side of the room the panel sits
       (modifier -l / -r) so every panel's depth points toward the camera and the
       perspective stays consistent. */
    .rb-acpanel{ position:absolute; border-radius:3px; z-index:1;
        background:
            repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 5px),
            linear-gradient(155deg,#666d74,#454c53);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.3),
            5px 9px 18px rgba(0,0,0,.5); }
    /* bottom face (very subtle) — skews toward the panel's lit side */
    .rb-acpanel-r::after{ content:""; position:absolute; left:0; top:100%; width:100%; height:3px;
        background:#3a4046; transform:skewX(45deg); transform-origin:top left; border-radius:0 0 3px 3px; }
    .rb-acpanel-l::after{ content:""; position:absolute; left:0; top:100%; width:100%; height:3px;
        background:#3a4046; transform:skewX(-45deg); transform-origin:top right; border-radius:0 0 3px 3px; }
    /* side face (very subtle, darker) — RIGHT side for left-of-centre panels, LEFT
       for right-of-centre, so it always faces the room centre / camera */
    .rb-acpanel-r::before{ content:""; position:absolute; top:0; left:100%; width:4px; height:100%;
        background:#2f353a; transform:skewY(45deg); transform-origin:top left; border-radius:0 3px 3px 0; }
    .rb-acpanel-l::before{ content:""; position:absolute; top:0; right:100%; width:4px; height:100%;
        background:#2f353a; transform:skewY(-45deg); transform-origin:top right; border-radius:3px 0 0 3px; }
    /* side-wall panels read at a grazing angle, so their side face needs more
       depth than the head-on back-wall panels to look right */
    .rb-wall-left .rb-acpanel-l::before,
    .rb-wall-right .rb-acpanel-r::before{ width:12px; }
    /* full-height warm wood-slat panel (back wall centre) — head-on, no side face */
    .rb-woodpanel{ position:absolute; z-index:1; border-radius:2px;
        background:
            repeating-linear-gradient(90deg, #714e2c 0 10px, #2c1d0f 10px 12px, #5e4124 12px 22px, #3a2614 22px 24px),
            linear-gradient(180deg,#5e4124,#34220f);
        box-shadow:
            inset 0 0 60px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,220,170,.12),
            0 0 0 5px #0b0c0f, 0 12px 26px rgba(0,0,0,.5); }
    .rb-floor3d{ position:absolute; left:0; right:0; bottom:0; height:760px;
        transform-origin:bottom center; transform:rotateX(90deg); background-color:#4a3018;
        background-image:
            repeating-linear-gradient(90deg, rgba(0,0,0,.40) 0 2px, rgba(0,0,0,0) 2px 116px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 58px, rgba(0,0,0,.04) 58px 116px),
            linear-gradient(180deg,#33200f 0%,#5c3d20 45%,#74502c 100%);
        box-shadow:inset 0 70px 120px -55px rgba(0,0,0,.7); }
    /* ceiling with recessed light panels — lifts the whole room's lighting */
    .rb-ceil3d{ position:absolute; left:0; right:0; top:0; height:760px;
        transform-origin:top center; transform:rotateX(-90deg);
        background:linear-gradient(180deg,#202329,#111316); }
    .rb-ceil3d::before{ content:""; position:absolute; left:14%; right:14%; top:18%; bottom:16%;
        border-radius:6px; background:
            repeating-linear-gradient(90deg, transparent 0 74px,
                rgba(255,248,228,.9) 74px 150px, transparent 150px 224px);
        box-shadow:0 0 70px rgba(255,244,214,.5), inset 0 0 0 2px rgba(255,248,228,.25); }
    /* red carpet centred on the wood floor */
    .rb-carpet{ position:absolute; left:16%; right:16%; top:24%; bottom:4%; border-radius:8px;
        background-color:#6e1019;
        background-image:
            repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
            radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.06), transparent 55%),
            linear-gradient(180deg,#7c1320,#540c15);
        box-shadow:0 0 0 5px rgba(38,6,10,.7), inset 0 0 50px rgba(0,0,0,.45);
        border:2px solid rgba(150,40,52,.5); }

    /* gear layer — preserve-3d so the amp can sit ANGLED in the room corner */
    .rb-studio-stage{ position:absolute; inset:0; z-index:1; pointer-events:none; transform-style:preserve-3d; }
    .rb-studio-stage > *{ pointer-events:auto; }

    /* amp head + cab stack (left) */
    /* amp + cab tucked into the back-left corner, ANGLED into the room (3D —
       not facing the camera flat), with an extruded side panel for real box
       depth. On focus it straightens out, steps forward + the side disappears. */
    /* anchored by the BOTTOM so the cab always sits on the same floor line — a
       shorter amp head grows upward instead of leaving the stack floating. */
    .rb-amp-stack{ position:absolute; left:28%; top:auto; bottom:14%; width:calc(168px * var(--rb-scale,1)); cursor:pointer;
        transform-style:preserve-3d; transform:translateX(-50%) rotateY(32deg) translateZ(-140px);
        transition:left .55s cubic-bezier(.33,0,.2,1), top .55s cubic-bezier(.33,0,.2,1),
            bottom .55s cubic-bezier(.33,0,.2,1), width .55s cubic-bezier(.33,0,.2,1),
            transform .55s cubic-bezier(.33,0,.2,1), filter .2s ease, opacity .35s ease; will-change:transform; }
    .rb-amp-stack:hover{ transform:translateX(-50%) rotateY(32deg) translateZ(-140px); }
    .rb-amp-stack:hover .rb-amp-face{ filter:brightness(1.13); }
    /* Empty-amp placeholder — reuses the amp stack + cabinet visual (so it
       matches the room, like the empty pedalboard/rack), with a "＋ amp" head
       prompt. Clicking the cabinet opens the add-amp flow. */
    .rb-amp-stack-empty{ cursor:pointer; }
    .rb-amp-face-empty{ height:calc(56px * var(--rb-scale,1)); display:flex; align-items:center; justify-content:center;
        color:#9fb4d6; font-size:calc(14px * var(--rb-scale,1)); font-weight:700; letter-spacing:.03em;
        border:2px dashed rgba(120,170,240,.45); border-radius:6px; background:rgba(30,46,76,.32);
        transition:color .15s, border-color .15s, background .15s; }
    .rb-amp-stack-empty:hover .rb-amp-face-empty{ color:var(--rb-accent); border-color:var(--rb-accent); background:rgba(48,72,118,.45); }
    /* extruded side panel = box depth for the amp + cab (hidden when flat) */
    .rb-amp-stack::before{ content:''; position:absolute; top:1%; bottom:0; left:0; width:calc(54px * var(--rb-scale,1));
        transform-origin:left center; transform:rotateY(90deg);
        background:linear-gradient(90deg,#1d2026,#090a0c);
        box-shadow:inset 0 0 55px rgba(0,0,0,.6); border-radius:2px 0 0 2px;
        transition:opacity .35s ease; }
    #rb-studio-room.rb-focus-active .rb-amp-stack::before{ opacity:0; }
    /* top face = the box's roof; lies back from the top edge (rotateX -90) so the
       slightly-elevated camera sees the amp's top. Opaque (no transparent stop)
       or it looks see-through. Hidden when an amp is focused/flat. */
    .rb-amp-stack::after{ content:''; position:absolute; top:2px; left:0; width:100%; height:calc(60px * var(--rb-scale,1));
        transform-origin:top center; transform:rotateX(-90deg);
        background:linear-gradient(180deg,#363b44,#23272e); border-radius:3px 3px 0 0;
        box-shadow:inset 0 0 30px rgba(0,0,0,.45); transition:opacity .35s ease; }
    #rb-studio-room.rb-focus-active .rb-amp-stack::after{ opacity:0; }
    /* contact shadow on the floor so the amp reads as grounded, not floating */
    .rb-amp-ground{ position:absolute; left:28%; top:78%; width:calc(178px * var(--rb-scale,1)); height:calc(40px * var(--rb-scale,1)); pointer-events:none;
        transform:translateX(-50%) rotateX(66deg);
        background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.62), transparent 72%);
        filter:blur(8px); transition:opacity .4s ease; }
    #rb-studio-room.rb-focus-active .rb-amp-ground{ opacity:0; }
    .rb-amp-head{ border-radius:11px 11px 5px 5px; padding:11px 13px 13px;
        background:linear-gradient(180deg,#262a31,#171a1f);
        border:1px solid rgba(255,255,255,.09);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 10px 22px rgba(0,0,0,.55); }
    .rb-amp-name{ font-size:calc(10px * var(--rb-scale,1)); letter-spacing:.12em; text-transform:uppercase; color:#cbd2dc;
        text-align:center; margin-bottom:9px; text-shadow:0 1px 0 rgba(0,0,0,.6);
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rb-amp-knobs{ display:flex; justify-content:center; gap:calc(13px * var(--rb-scale,1)); }
    .rb-knob{ width:calc(24px * var(--rb-scale,1)); height:calc(24px * var(--rb-scale,1)); border-radius:50%; position:relative;
        background:radial-gradient(circle at 36% 30%,#444a54,#15171a);
        border:1px solid rgba(255,255,255,.14);
        box-shadow:0 2px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
    .rb-knob::after{ content:""; position:absolute; left:calc(50% - 1px * var(--rb-scale,1)); top:calc(3px * var(--rb-scale,1));
        width:calc(2px * var(--rb-scale,1)); height:calc(9px * var(--rb-scale,1)); background:var(--rb-accent); border-radius:1px;
        transform-origin:50% calc(9px * var(--rb-scale,1)); transform:rotate(var(--rb-knob-rot,0deg)); }
    .rb-amp-stack:hover .rb-knob{ box-shadow:0 2px 5px rgba(0,0,0,.55), 0 0 10px rgba(52,211,192,.45); }
    .rb-amp-cab{ aspect-ratio:1.04; margin-top:-3px; border-radius:7px; position:relative;
        background:linear-gradient(180deg,#1b1d22,#0f1012);
        border:1px solid rgba(255,255,255,.06);
        box-shadow:inset 0 0 50px rgba(0,0,0,.65), 0 12px 26px rgba(0,0,0,.6); }
    .rb-amp-cab::before{ content:""; position:absolute; inset:10px; border-radius:4px;
        background:
            repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px),
            repeating-linear-gradient(-45deg, rgba(0,0,0,.22) 0 2px, transparent 2px 5px);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
    /* Recreated cab artwork present → drop the generic grille + let the SVG show
       on a dark backdrop (it fits inside, letterboxed for non-square cabs). */
    /* Recreated cab in the room: no generic grille/backdrop, no fixed shadow —
       the cab art (sized to the cab's real aspect inline) is the whole face, and
       it rides the amp stack's 3D transform so depth is preserved. */
    .rb-amp-cab.has-art{ background:transparent; box-shadow:none; border:0; overflow:visible; }
    .rb-amp-cab.has-art::before{ display:none; }
    .rb-amp-cab.has-art > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
    /* Mic on a boom stand over the room cab (position/model from the Cab Room). The
       stand SVG extends below the cab to the floor; the mic sits at the boom tip. */
    .rb-amp-cab .rb-room-stand{ position:absolute; left:0; top:0; width:100%; height:122%;
        overflow:visible; pointer-events:none; z-index:1; }
    /* Mic sits capsule-UP (natural). Anchored by its BODY clip point (~55% down the
       art) at the boom tip; the capsule then sticks up above it. The 45° option
       rotates around that SAME clip point so the mic stays on the boom. */
    .rb-room-mic{ position:absolute; width:13%; aspect-ratio:120/320; transform-origin:50% 55%;
        transform:translate(-50%,-55%); z-index:2; pointer-events:none;
        filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
    .rb-room-mic.rb-cabmic-ang{ transform:translate(-50%,-55%) rotate(38deg); }
    .rb-room-mic svg{ width:100%; height:100%; display:block; }

    /* camera = perspective viewport. On focus the viewpoint re-aims toward the
       amp's corner (perspective-origin shifts there) so it reads as the camera
       travelling to the amp. */
    .rb-room-camera{ position:absolute; inset:0; perspective:1300px; perspective-origin:50% 41%;
        transition:perspective-origin .55s cubic-bezier(.33,0,.2,1); }

    /* focus mode — the amp grows by layout (canvas stays crisp + editable). The
       3D room stays centred and full-frame, just gently pushed back + dimmed +
       blurred behind the amp (left) and the swap rail (right). No perspective
       shift / big scale — that left a black void behind the translucent rail. */
    #rb-studio-room.rb-focus-active .rb-room-3d{ transform:scale(1.12); opacity:.5; filter:blur(1.5px); }
    #rb-studio-room.rb-focus-active .rb-pedalboard{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
    /* straightens out (rotateY → 0) + frames the AMP HEAD only: the head fills
       the view BIG (knob names read) and the cab runs off the bottom (cut off,
       not the focus — cab switching comes later). */
    /* sits LEFT of centre so the swap rail (always shown in focus) fits on the
       right; head fills the frame, cab runs off the bottom. */
    /* multi-amp: only the FOCUSED stack centres + grows; siblings fade out so
       the room reads as one amp being edited (default 1-amp rig: this IS the
       amp, so behaviour is unchanged). */
    /* !important so a FOCUSED extra amp beats its own inline corner-position
       style (left/bottom/width/transform) — without it the new amp stayed small
       in the corner on focus and you couldn't edit its knobs. On close the rule
       stops applying and the inline style returns it to the corner. */
    #rb-studio-room.rb-focus-active .rb-amp-stack.rb-amp-focused{
        left:37% !important; top:20% !important; bottom:auto !important;
        width:min(calc(820px * var(--rb-scale,1)),63%) !important; z-index:6; cursor:default;
        transform:translateX(-50%) rotateY(0deg) !important; }
    #rb-studio-room.rb-focus-active .rb-amp-stack.rb-amp-focused:hover{ transform:translateX(-50%) rotateY(0deg); filter:none; }
    #rb-studio-room.rb-focus-active .rb-amp-stack:not(.rb-amp-focused){ opacity:0 !important; pointer-events:none; }
    /* NB: do NOT put `filter` on .rb-amp-extra — a filter on a preserve-3d
       element FLATTENS its 3D faces, collapsing the side-depth panel to an
       invisible line (the amp looked like a flat photo). The extra amp is a true
       MIRROR of the primary, so it needs no dimming anyway. */
    /* the right-side amps face INWARD (negative rotateY), so their solid depth
       panel must be on the RIGHT edge — the default ::before sits on the left
       (correct for the primary amp) and would hide behind a right-facing amp. */
    .rb-amp-extra::before{ left:auto; right:0; width:64px;
        transform-origin:right center; transform:rotateY(-90deg);
        background:linear-gradient(90deg,#090a0c,#22262e); }
    .rb-amp-face-canvas{ border-radius:6px; }

    /* swap rail — right-docked, translucent-blue carousel of alternative amps */
    .rb-swap-panel{ position:absolute; top:0; right:0; bottom:0; width:min(320px,30%); z-index:8;
        display:flex; flex-direction:column; gap:12px; padding:16px 14px;
        background:linear-gradient(180deg, rgba(48,74,134,.15), rgba(30,52,100,.20));
        -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        border-left:1px solid rgba(120,160,220,.14);
        transform:translateX(100%); opacity:0;
        transition:transform .35s cubic-bezier(.33,0,.2,1), opacity .3s ease; }
    .rb-swap-panel.rb-swap-open{ transform:none; opacity:1; }
    .rb-swap-head{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
    .rb-swap-head input{ flex:1; background:rgba(8,14,28,.55); border:1px solid rgba(120,160,220,.22);
        border-radius:10px; padding:9px 12px; font-size:12px; color:#dbe4f2; outline:none; }
    .rb-swap-head input::placeholder{ color:#7e8aa3; }
    .rb-swap-head input:focus{ border-color:rgba(120,170,240,.5); }
    .rb-swap-close{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; cursor:pointer;
        background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#aeb8cc; font-size:14px; }
    .rb-swap-close:hover{ background:rgba(255,255,255,.12); color:#fff; }
    .rb-swap-list{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
        display:flex; flex-direction:column; gap:8px; padding:44% 4px; scroll-snap-type:y proximity;
        -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
        mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
    .rb-swap-list::-webkit-scrollbar{ width:0; height:0; }
    .rb-swap-item{ flex:0 0 auto; scroll-snap-align:center; cursor:pointer; transform-origin:center;
        display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:13px;
        background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
        transition:background .15s, border-color .15s, box-shadow .2s; will-change:transform, opacity; }
    .rb-swap-item:hover{ background:rgba(120,160,220,.12); }
    .rb-swap-item.rb-swap-current{ border-color:rgba(120,170,240,.55);
        background:rgba(120,160,220,.15); box-shadow:0 0 22px rgba(80,130,220,.28); }
    .rb-swap-thumb{ flex:0 0 auto; width:92px; height:56px; border-radius:8px; overflow:hidden;
        background:#0b0d12; display:flex; align-items:center; justify-content:center; }
    .rb-swap-thumb img{ width:100%; height:100%; object-fit:contain; }
    .rb-swap-name{ flex:1 1 auto; min-width:0; font-size:12.5px; color:#e8eef8; font-weight:500; line-height:1.25;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* Studio Cab Room: LEFT mic rail — same look/size as the right cab rail. */
    .rb-mic-rail{ position:absolute; top:0; left:0; bottom:0; width:min(320px,30%); z-index:8;
        display:flex; flex-direction:column; gap:12px; padding:16px 14px;
        background:linear-gradient(180deg, rgba(48,74,134,.15), rgba(30,52,100,.20));
        -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        border-right:1px solid rgba(120,160,220,.14);
        transform:translateX(-100%); opacity:0;
        transition:transform .35s cubic-bezier(.33,0,.2,1), opacity .3s ease; }
    .rb-mic-rail.rb-swap-open{ transform:none; opacity:1; }
    .rb-mic-list{ flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:2px; }
    .rb-mic-list::-webkit-scrollbar{ width:0; }
    .rb-mic-foot{ flex:0 0 auto; display:flex; flex-direction:column; gap:10px;
        border-top:1px solid rgba(120,160,220,.14); padding-top:12px; }
    .rb-mic-sec{ display:flex; flex-direction:column; gap:6px; }
    .rb-mic-h{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8a97b0; font-weight:700; }
    .rb-mic-btns{ display:flex; flex-wrap:wrap; gap:5px; }
    /* Studio cab centre: transparent, fills the middle at the cab's real aspect. */
    .rb-cab-center{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    .rb-cab-fit{ position:relative; max-width:100%; cursor:crosshair; touch-action:none; isolation:isolate; }
    .rb-cab-fit > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
    /* Speaker-cone silhouettes faintly visible through the grille — never block the mic drag.
       Two blended layers self-adapt to grille colour: light(screen)=more on dark cabs,
       dark(multiply)=subtle on light cabs (see rbCabSpeakerSilhouettesSvg). */
    .rb-cab-spk{ pointer-events:none; z-index:2; }
    .rb-spk-lite{ mix-blend-mode:screen; }
    /* The chosen mic recreated as SVG art, sitting capsule-at-the-point over the
       cone. transform-origin near the capsule so the 45° toggle pivots on it. */
    .rb-cabmic{ position:absolute; width:34px; height:96px; transform:translate(-50%,-16%);
        transform-origin:50% 10%; z-index:3; pointer-events:none;
        filter:drop-shadow(0 6px 11px rgba(0,0,0,.6)); transition:transform .18s ease; }
    .rb-cabmic svg{ width:100%; height:100%; display:block; }
    .rb-cabmic-ang{ transform:translate(-50%,-16%) rotate(38deg); }
    /* Mic rail thumbnail: reuse the portrait art laid diagonally like a product shot. */
    .rb-mic-swap-thumb{ overflow:hidden; }
    .rb-mic-thumb{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    .rb-mic-thumb svg{ height:158%; width:auto; transform:rotate(50deg); }

    /* floating control bar shown in focus mode */
    .rb-focus-bar2{ position:absolute; top:0; left:0; right:0; z-index:7; display:flex; align-items:center;
        justify-content:space-between; gap:10px; padding:24px 52px; opacity:0; pointer-events:none;
        transition:opacity .25s ease; }
    .rb-focus-bar2.rb-focus-open{ opacity:1; }
    .rb-focus-bar2 > *{ pointer-events:auto; }
    .rb-focus-bar2 .rb-focus-title{ flex:1; text-align:center; }
    .rb-focus-bar2 button{ font-size:12.5px; padding:8px 14px; border-radius:9px; color:#dbe2ee; cursor:pointer;
        background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); transition:.15s; white-space:nowrap; }
    .rb-focus-bar2 button:hover{ background:rgba(255,255,255,.16); color:#fff; }
    .rb-focus-bar2 .rb-focus-back{ background:rgba(120,160,220,.16); border-color:rgba(120,170,240,.4); color:#eaf1fb; }
    .rb-focus-bar2 .rb-focus-remove{ background:rgba(200,70,70,.16); border-color:rgba(220,95,95,.42); color:#f4d4d4; }
    .rb-focus-bar2 .rb-focus-remove:hover{ background:rgba(212,72,72,.30); color:#fff; }

    /* "Open the plugin's real window" chip, top-centre of the focused gear. Uses
       the SAME visual language as .rb-studio-adv-btn so it reads as part of the
       game's UI, not a bolted-on overlay. Only shown for gear ADDED as a VST
       (a plugin the user brought in — not the game's bundled gear). */
    .rb-studio-realui-btn{ position:absolute; top:14px; left:50%; transform:translateX(-50%);
        z-index:21; cursor:pointer; white-space:nowrap;
        padding:7px 13px; border-radius:9px; font-size:13px; font-weight:500; color:#cfe0ff;
        background:rgba(30,46,76,.62); border:1px solid rgba(120,170,240,.34);
        box-shadow:0 6px 18px rgba(0,0,0,.4); backdrop-filter:blur(6px);
        transition:background .15s, color .15s, transform .12s; }
    .rb-studio-realui-btn:hover{ background:rgba(48,72,118,.8); color:#fff; transform:translateX(-50%) translateY(-1px); }
    #rb-stage-wrap.rb-songbar-on .rb-studio-realui-btn{ top:58px; }

    /* amp face = the VST's own canvas UI render, sitting on the cab */
    .rb-amp-face{ border-radius:8px 8px 4px 4px; overflow:hidden;
        border:1px solid rgba(255,255,255,.09); background:#0e0f12;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.55); }
    .rb-amp-face img{ width:100%; display:block; }

    /* ── Rack tower on a table — set back against the RIGHT WALL, on the wood
       floor, angled almost to the left (faces into the room) ── */
    .rb-rack-zone{ position:absolute; right:11%; bottom:6%; width:min(calc(280px * var(--rb-scale,1)),26%); cursor:pointer;
        transform-style:preserve-3d; transform:translateZ(150px) rotateY(-88deg);
        transform-origin:bottom right; transition:opacity .4s ease, filter .2s; }
    /* highlight only the placeholder on hover — a filter on the preserve-3d zone
       would flatten it and make the table's 3D faces vanish */
    .rb-rack-zone.rb-rack-empty:hover .rb-rack-placeholder{ color:var(--rb-accent); border-color:var(--rb-accent); }
    /* a long WOODEN desk: a top slab (front edge + horizontal top surface) on legs */
    .rb-rack-table{ position:absolute; left:0; right:0; bottom:0; height:calc(92px * var(--rb-scale,1)); transform-style:preserve-3d; }
    /* front edge of the top (the thickness seen straight on) — wood */
    .rb-rack-tabletop{ position:absolute; left:-4%; right:-4%; bottom:calc(76px * var(--rb-scale,1)); height:calc(14px * var(--rb-scale,1)); transform-style:preserve-3d;
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 26px),
            linear-gradient(180deg,#5e4124,#3a2614);
        border-radius:2px; box-shadow:0 14px 26px rgba(0,0,0,.5); }
    /* the horizontal TOP surface (wood planks), lying flat, extending back */
    .rb-rack-tabletop::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:calc(64px * var(--rb-scale,1));
        transform-origin:bottom center; transform:rotateX(90deg);
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 2px, transparent 2px 30px),
            linear-gradient(180deg,#6e4c2b,#49301a);
        box-shadow:inset 0 0 44px rgba(0,0,0,.3); }
    /* thin dark underside */
    .rb-rack-tabletop::after{ content:""; position:absolute; left:0; right:0; top:100%; height:5px;
        background:#241809; }
    .rb-rack-leg{ position:absolute; bottom:0; height:calc(78px * var(--rb-scale,1)); width:calc(13px * var(--rb-scale,1));
        background:linear-gradient(90deg,#5a3d22,#2a1c0e);
        border-radius:0 0 2px 2px; box-shadow:2px 7px 11px rgba(0,0,0,.5); }
    .rb-rack-leg-back{ transform:translateZ(calc(-60px * var(--rb-scale,1))); filter:brightness(.6); }
    /* rack tower sits on the FAR end of the desk (near end left open) */
    .rb-rack-stack{ position:absolute; left:4%; width:56%; bottom:calc(90px * var(--rb-scale,1)); display:flex; flex-direction:column-reverse;
        align-items:center; gap:2px; transform-style:preserve-3d; }
    /* each rack is its own 3D box: a right SIDE face + a TOP face give it depth.
       The box hugs its image (capped height) so a tall/portrait rack like the
       G-550 EQ stays a thin, short unit instead of towering. */
    .rb-rack{ max-width:100%; cursor:pointer; position:relative; border-radius:2px;
        transform-style:preserve-3d; transition:filter .2s; box-shadow:0 2px 7px rgba(0,0,0,.55); }
    .rb-rack::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:calc(44px * var(--rb-scale,1));
        transform-origin:right center; transform:rotateY(-90deg);
        background:linear-gradient(90deg,#2b2f35,#0a0b0d);
        box-shadow:inset 0 0 16px rgba(0,0,0,.5); }
    .rb-rack::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:calc(44px * var(--rb-scale,1));
        transform-origin:bottom center; transform:rotateX(90deg);
        background:linear-gradient(180deg,#3a3f47,#16191d); }
    /* hover brightens the FACES only — a filter on the preserve-3d .rb-rack would
       flatten it and make the depth faces vanish */
    .rb-rack:hover > img, .rb-rack:hover::after, .rb-rack:hover::before{ filter:brightness(1.18); }
    .rb-rack img{ display:block; width:auto; height:auto; max-width:100%; max-height:calc(66px * var(--rb-scale,1)); border-radius:2px; }
    .rb-rack-fallback{ height:42px; display:flex; align-items:center; justify-content:center; text-align:center;
        padding:4px; font-size:11px; color:#9aa3af; border-radius:2px;
        background:linear-gradient(180deg,#1c1f24,#101114); border:1px solid rgba(255,255,255,.06); }
    .rb-rack-bypassed{ opacity:.45; filter:grayscale(.6); }
    .rb-rack-placeholder{ height:calc(78px * var(--rb-scale,1)); min-width:calc(96px * var(--rb-scale,1));
        display:flex; align-items:center; justify-content:center;
        color:#9fb4d6; font-size:calc(15px * var(--rb-scale,1)); font-weight:700; letter-spacing:.03em;
        border-radius:7px; border:2px dashed rgba(120,170,240,.42); background:rgba(30,46,76,.3);
        transition:color .15s, border-color .15s, background .15s; }
    /* contact shadow under the rack table */
    .rb-rack-ground{ position:absolute; right:12%; bottom:4%; width:calc(230px * var(--rb-scale,1)); height:calc(30px * var(--rb-scale,1)); pointer-events:none;
        transform:translateZ(-35px) rotateX(66deg) rotateZ(-12deg); transform-origin:bottom right;
        background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.6), transparent 72%);
        filter:blur(8px); transition:opacity .4s ease; }
    #rb-studio-room.rb-focus-active .rb-rack-zone,
    #rb-studio-room.rb-focus-active .rb-rack-ground{ opacity:0; pointer-events:none; transition:opacity .4s ease; }

    /* ── Room props (decorative) — hidden while focused ── */
    #rb-studio-room.rb-focus-active .rb-ceil-cloud{ opacity:0; pointer-events:none; transition:opacity .4s ease; }

    /* acoustic cloud panel hanging from the ceiling (centre) */
    .rb-ceil-cloud{ position:absolute; top:8%; left:35%; right:35%; height:24px; z-index:1; pointer-events:none;
        transform:rotateX(34deg); transform-origin:top center; border-radius:5px;
        background:linear-gradient(180deg,#3c424a,#22262c);
        box-shadow:0 16px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
    .rb-ceil-cloud::before, .rb-ceil-cloud::after{ content:""; position:absolute; bottom:100%; width:2px; height:30px;
        background:linear-gradient(180deg,rgba(180,185,195,.5), rgba(180,185,195,.15)); }
    .rb-ceil-cloud::before{ left:20%; }
    .rb-ceil-cloud::after{ right:20%; }

    /* pedalboard = a SLIM angled platform on the floor; pedals stand proud of it.
       Width grows with the pedals (each sized by HEIGHT so landscape pedals like
       Q-Trix read big), capped so it never spans the whole floor. */
    .rb-pedalboard{ position:absolute; left:50%; bottom:6%; width:fit-content;
        min-width:min(170px,17%); max-width:74%; min-height:26px; cursor:pointer;
        transform:translateX(-50%) rotateX(40deg);
        transform-origin:bottom center; transform-style:preserve-3d;
        display:flex; gap:calc(18px * var(--rb-scale,1)); align-items:flex-end; justify-content:center;
        padding:calc(8px * var(--rb-scale,1)) calc(18px * var(--rb-scale,1)) calc(6px * var(--rb-scale,1)); border-radius:9px; transition:opacity .4s ease, filter .2s; }
    .rb-pedalboard-empty:hover{ filter:brightness(1.25); }
    /* "＋ pedals" prompt on the empty pedalboard (matches the ＋amp / ＋rack). */
    .rb-pedal-placeholder{ height:calc(46px * var(--rb-scale,1)); min-width:calc(104px * var(--rb-scale,1));
        display:flex; align-items:center; justify-content:center;
        color:#9fb4d6; font-size:calc(13px * var(--rb-scale,1)); font-weight:700; letter-spacing:.03em;
        border:2px dashed rgba(120,170,240,.42); border-radius:8px; background:rgba(30,46,76,.28);
        transition:color .15s, border-color .15s, background .15s; }
    .rb-pedalboard-empty:hover .rb-pedal-placeholder{ color:var(--rb-accent); border-color:var(--rb-accent); background:rgba(48,72,118,.42); }
    .rb-pedalboard{
        background:
            repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 3px, transparent 3px 27px),
            linear-gradient(180deg,#1b1d22,#0c0d0f);
        border:1px solid rgba(255,255,255,.07);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -8px 20px rgba(0,0,0,.55); }
    /* short extruded front lip = a thin platform edge (no longer a thick block) */
    .rb-pedalboard::after{ content:''; position:absolute; left:-1px; right:-1px; bottom:0; height:11px;
        transform-origin:bottom center; transform:rotateX(-90deg);
        background:linear-gradient(180deg,#26282d,#0f1012);
        border-radius:0 0 9px 9px; box-shadow:inset 0 0 14px rgba(0,0,0,.55); }
    /* contact shadow under the board */
    .rb-pedalboard::before{ content:''; position:absolute; inset:-8% -4% -22% -4%; z-index:-1;
        background:radial-gradient(ellipse 60% 60% at 50% 62%, rgba(0,0,0,.6), transparent 72%); filter:blur(8px); }
    /* pedals STAND PROUD of the board (translateZ so the edge can't cover them),
       facing front + tilted up; extruded side + front faces give the 3D box.
       Hover only brightens (no resize — like the amp). */
    /* contain pedals in a small box: landscape (Q-Trix) fills width, portrait
       fills height — consistent, not giant. --rb-d = extrusion depth. The two
       skewed pseudo faces (bottom-front + right side) form a real 3D box, each
       shaded differently and tinted with the pedal's own colour (--rb-edge). */
    .rb-pedal{ flex:0 0 auto; cursor:pointer; position:relative; transform:translateZ(calc(8px * var(--rb-scale,1))) rotateX(2deg);
        transition:filter .2s; --rb-d:calc(5px * var(--rb-scale,1)); }
    .rb-pedal:hover{ filter:brightness(1.16); }
    .rb-pedal img{ max-width:calc(94px * var(--rb-scale,1)); max-height:calc(66px * var(--rb-scale,1)); width:auto; height:auto; display:block;
        border-radius:6px 6px 2px 2px; position:relative; z-index:1;
        box-shadow:0 0 0 1px rgba(255,255,255,.07), 14px 30px 24px rgba(0,0,0,.55); }
    /* bottom-front face (lighter) */
    .rb-pedal::after{ content:''; position:absolute; left:0; top:100%; width:100%; height:var(--rb-d);
        background:var(--rb-edge,#15171b); filter:brightness(.74);
        transform:skewX(45deg); transform-origin:top left; z-index:0; border-radius:0 0 2px 2px; }
    /* right side face (darker) */
    .rb-pedal::before{ content:''; position:absolute; top:0; left:100%; width:var(--rb-d); height:100%;
        background:var(--rb-edge,#15171b); filter:brightness(.5);
        transform:skewY(45deg); transform-origin:top left; z-index:0; border-radius:0 3px 2px 0; }
    .rb-pedal > .rb-pedal-fallback{ width:calc(60px * var(--rb-scale,1)); height:calc(66px * var(--rb-scale,1)); }
    .rb-pedal-fallback{ height:calc(116px * var(--rb-scale,1)); border-radius:8px; display:flex; align-items:center;
        justify-content:center; text-align:center; padding:8px; font-size:10px; color:#9aa3af;
        background:linear-gradient(180deg,#1c1f24,#101114); border:1px solid rgba(255,255,255,.07); }
    .rb-pedal-bypassed{ opacity:.4; filter:grayscale(.7) drop-shadow(0 14px 11px rgba(0,0,0,.5)); }
    .rb-pedal-add{ width:calc(92px * var(--rb-scale,1)); height:calc(112px * var(--rb-scale,1)); border-radius:8px; cursor:pointer; transform:rotateX(-20deg);
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
        color:#7c848f; font-size:11px; background:rgba(255,255,255,.015);
        border:1.5px dashed rgba(255,255,255,.12); transition:border-color .2s, color .2s; }
    .rb-pedal-add:hover{ border-color:var(--rb-accent); color:var(--rb-accent); }

    /* ── Pedal focus (Phase 3): one pedal large + chain nav + swap rail ── */
    /* hide the amp + its depth while editing a pedal */
    #rb-studio-room.rb-pfocus .rb-amp-stack,
    #rb-studio-room.rb-pfocus .rb-amp-stack::before,
    #rb-studio-room.rb-pfocus .rb-amp-ground{ opacity:0 !important; pointer-events:none; }

    /* ── Pedal / rack focus — NO amp grow (that's amp-focus / rb-focus-active
       only). The backdrop is the surface the focused gear actually lives on,
       blurred: PEDALS sit on the FLOOR → the wood floor + carpet fill the frame;
       RACKS stand against the RIGHT WALL → that wall fills the frame. The group's
       own piece of furniture (pedalboard / rack desk) stays as a blurred, EMPTIED
       prop; the units being swapped are shown big up top (coverflow + right
       rail). Blur lives on .rb-room-camera so the whole 3D backdrop softens
       together while the big focused unit (a sibling OUTSIDE the camera) stays
       sharp. NB: .rb-pedalboard/.rb-rack-zone are preserve-3d → only fully hide
       (opacity:0) or fully show (opacity:1) them, never partial. ── */
    #rb-studio-room.rb-pfocus .rb-room-camera{ filter:blur(2px); will-change:filter;
        transition:filter .45s ease, perspective-origin .5s cubic-bezier(.33,0,.2,1); }
    #rb-studio-room.rb-pfocus .rb-room-3d{ transform:none; opacity:1; filter:none; }
    #rb-studio-room.rb-pfocus .rb-ceil3d,
    #rb-studio-room.rb-pfocus .rb-ceil-cloud{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
    /* hide ALL stage gear; each group re-shows only its own (emptied) furniture */
    #rb-studio-room.rb-pfocus .rb-studio-stage > *{ opacity:0 !important; pointer-events:none; }

    /* PEDAL: aim down at the floor — hide every wall, stand the wood floor up so
       the carpet backs the frame, show the (emptied) enlarged pedalboard. */
    #rb-studio-room.rb-pfocus.rb-gfocus-pedal .rb-room-camera{ perspective-origin:50% 60%; }
    #rb-studio-room.rb-pfocus.rb-gfocus-pedal .rb-wall{ opacity:0; transition:opacity .4s ease; }
    #rb-studio-room.rb-pfocus.rb-gfocus-pedal .rb-floor3d{ transform:rotateX(28deg) scale(1.2);
        transition:transform .5s cubic-bezier(.33,0,.2,1); }
    #rb-studio-room.rb-pfocus.rb-gfocus-pedal .rb-pedalboard{ opacity:1 !important;
        transform:translateX(-50%) rotateX(40deg) scale(1.85);
        transition:transform .5s cubic-bezier(.33,0,.2,1), opacity .4s ease; }
    #rb-studio-room.rb-pfocus.rb-gfocus-pedal .rb-pedalboard .rb-pedal,
    #rb-studio-room.rb-pfocus.rb-gfocus-pedal .rb-pedalboard .rb-pedal-add{ opacity:0 !important; }

    /* RACK: the LATERAL (right) wall — where the racks live — swung flat to face
       the camera FRONTALLY and stretched to fill the frame. NOT the centre/back
       wall (no wood panel). Hide the back + left walls + floor + ceiling; the
       rack desk drops to FRONTAL, low + large, reading as the table the (big,
       up-top) rack sits on. */
    #rb-studio-room.rb-pfocus.rb-gfocus-rack .rb-room-camera{ perspective-origin:50% 50%; }
    #rb-studio-room.rb-pfocus.rb-gfocus-rack .rb-wall-back,
    #rb-studio-room.rb-pfocus.rb-gfocus-rack .rb-wall-left,
    #rb-studio-room.rb-pfocus.rb-gfocus-rack .rb-floor3d{ opacity:0; transition:opacity .4s ease; }
    /* uniform scale (NOT a full-width stretch) so the acoustic panels keep their
       tall, long proportions instead of squashing wide + compact */
    #rb-studio-room.rb-pfocus.rb-gfocus-rack .rb-wall-right{
        transform:rotateY(0deg) scale(1.7); transform-origin:right center;
        filter:brightness(.92); transition:transform .5s cubic-bezier(.33,0,.2,1); }
    #rb-studio-room.rb-pfocus.rb-gfocus-rack .rb-rack-zone{ opacity:1 !important;
        left:50%; right:auto; bottom:-3%; width:min(560px,54%);
        transform:translateX(-50%) rotateY(0deg) scale(1.6); transform-origin:bottom center;
        transition:transform .5s cubic-bezier(.33,0,.2,1), opacity .4s ease; }
    #rb-studio-room.rb-pfocus.rb-gfocus-rack .rb-rack-zone .rb-rack{ opacity:0 !important; }

    #rb-studio-room.rb-focus-active .rb-room-3d{ will-change:transform, opacity, filter; }
    #rb-studio-room.rb-pfocus .rb-pf-stage{ will-change:transform; }
    /* focus layer sits LEFT of centre (right swap rail has room); column =
       coverflow row on top, dots + Add/Remove buttons underneath. */
    .rb-pedal-focus{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
        align-items:center; justify-content:center; gap:18px; padding-right:32%;
        opacity:0; pointer-events:none; transition:opacity .3s ease; }
    .rb-pedal-focus.rb-pf-open{ opacity:1; }
    .rb-pedal-focus > *, .rb-pedal-focus .rb-pf-side, .rb-pedal-focus button{ pointer-events:auto; }
    /* coverflow row: prev (small/blur) · current (big) · next (small/blur) */
    .rb-pf-row{ display:flex; align-items:center; justify-content:center; gap:20px; width:100%; }
    /* zoom-in: the big pedal grows small → full as focus opens ("se acerque") */
    .rb-pf-stage{ flex:0 0 auto; width:min(calc(320px * var(--rb-scale,1)),34%); transform:scale(.78);
        transition:transform .38s cubic-bezier(.33,0,.2,1); }
    .rb-pedal-focus.rb-pf-open .rb-pf-stage{ transform:scale(1); }
    .rb-pf-pedal{ width:100%; border-radius:12px; overflow:hidden;
        box-shadow:0 30px 70px -20px rgba(0,0,0,.85); }
    .rb-pf-pedal img, .rb-pf-pedal canvas{ width:100%; display:block; }
    .rb-pf-empty{ aspect-ratio:1/1.05; display:flex; align-items:center; justify-content:center;
        text-align:center; padding:22px; font-size:13px; color:#9fb0cc; line-height:1.5;
        background:linear-gradient(180deg,#1c2026,#101318); border:1.5px dashed rgba(120,160,220,.32); }
    /* neighbour pedals — smaller, faded + blurred, click to slide along */
    .rb-pf-side{ flex:0 0 auto; width:min(calc(132px * var(--rb-scale,1)),14%); cursor:pointer; opacity:.42;
        filter:blur(2.4px); transform:scale(.9); transition:opacity .2s, filter .2s, transform .2s; }
    .rb-pf-side:hover{ opacity:.72; filter:blur(1.1px); transform:scale(.96); }
    .rb-pf-side img{ width:100%; display:block; border-radius:10px;
        box-shadow:0 18px 40px -16px rgba(0,0,0,.8); }
    .rb-pf-side-empty{ visibility:hidden; pointer-events:none; }
    /* "＋" add tile to the right of the last pedal (replaces the Add button) */
    .rb-pf-side-add{ flex:0 0 auto; width:min(calc(96px * var(--rb-scale,1)),11%); aspect-ratio:1/1.05; cursor:pointer;
        display:flex; align-items:center; justify-content:center; font-size:34px; line-height:1;
        color:#8fa0bd; border:2px dashed rgba(120,160,220,.32); border-radius:12px;
        background:rgba(120,160,220,.06); transition:color .15s, border-color .15s, background .15s; }
    .rb-pf-side-add:hover{ color:#fff; border-color:rgba(140,180,250,.6); background:rgba(120,160,220,.16); }
    .rb-pf-bottom{ display:flex; flex-direction:column; align-items:center; gap:13px; }
    .rb-pf-dots{ display:flex; gap:7px; justify-content:center; }
    .rb-pf-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22);
        transition:background .15s; }
    .rb-pf-dots span.on{ background:var(--rb-accent); box-shadow:0 0 8px var(--rb-accent); }
    .rb-pf-actions{ display:flex; gap:16px; align-items:center; justify-content:center; }
    /* centre column: Pre/Post on top, Remove underneath it */
    .rb-pf-center{ display:flex; flex-direction:column; gap:8px; align-items:center; }
    .rb-pf-actions button{ font-size:12.5px; padding:8px 16px; border-radius:9px; color:#dbe2ee; cursor:pointer;
        background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); transition:.15s; }
    .rb-pf-actions button:hover{ background:rgba(255,255,255,.16); color:#fff; }
    .rb-pf-actions button:disabled{ opacity:.32; cursor:default; background:rgba(255,255,255,.04); }
    .rb-pf-actions button:disabled:hover{ color:#dbe2ee; background:rgba(255,255,255,.04); }
    .rb-pf-actions .rb-focus-remove{ background:rgba(200,70,70,.16); border-color:rgba(220,95,95,.42); color:#f4d4d4; }
    .rb-pf-actions .rb-focus-remove:hover{ background:rgba(212,72,72,.30); color:#fff; }
    /* pre/post-amp toggle: green = before the amp, cyan = after it */
    .rb-pf-actions .rb-pf-slot-pre{ background:rgba(52,180,120,.18); border-color:rgba(74,210,150,.4); color:#bff0d6; }
    .rb-pf-actions .rb-pf-slot-pre:hover{ background:rgba(52,180,120,.3); color:#fff; }
    .rb-pf-actions .rb-pf-slot-post{ background:rgba(56,150,210,.18); border-color:rgba(90,180,240,.4); color:#cfe6f8; }
    .rb-pf-actions .rb-pf-slot-post:hover{ background:rgba(56,150,210,.3); color:#fff; }

    /* room header overlay */
    .rb-studio-head{ position:absolute; top:0; left:0; right:0; z-index:3;
        display:flex; align-items:center; justify-content:space-between;
        padding:14px 18px; pointer-events:none; }
    .rb-studio-head > *{ pointer-events:auto; }
    .rb-studio-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8b929c; }
    .rb-studio-label b{ color:#e6e9ee; font-weight:600; }

    /* amp focus overlay (Phase 2 — zoom to real knobs) */
    .rb-studio-focus{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
        background:radial-gradient(60% 60% at 50% 45%, rgba(10,11,14,.55), rgba(7,8,10,.92));
        -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
        opacity:0; transition:opacity .22s ease; }
    .rb-studio-focus.rb-focus-open{ opacity:1; }
    .rb-focus-panel{ width:min(880px,94%); border-radius:16px; padding:18px 22px 26px;
        background:linear-gradient(180deg,#23272e,#15171b);
        border:1px solid rgba(255,255,255,.09);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 30px 70px -20px rgba(0,0,0,.8);
        transform:translateY(10px) scale(.96); transition:transform .22s ease; }
    .rb-studio-focus.rb-focus-open .rb-focus-panel{ transform:none; }
    .rb-focus-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
    .rb-focus-title{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#e6e9ee; font-weight:600;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; text-align:center; }
    .rb-focus-bar button{ font-size:11px; padding:6px 10px; border-radius:8px; color:#cbd2dc; cursor:pointer;
        background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition:.15s; white-space:nowrap; }
    .rb-focus-bar button:hover{ background:rgba(255,255,255,.09); color:#fff; }
    .rb-focus-back{ color:#8b929c !important; }
    .rb-focus-actions{ display:flex; gap:7px; }
    .rb-focus-knobs{ display:flex; flex-wrap:wrap; gap:16px 24px; justify-content:center; align-items:flex-start;
        padding:8px 4px 4px; min-height:108px; }
    .rb-focus-knob{ display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; }
    .rb-focus-knob-label{ font-size:10px; letter-spacing:.03em; color:#9aa3af; text-align:center; max-width:84px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* ── Advanced: node-graph routing editor ─────────────────────────────── */
    #rb-tab-advanced.rb-adv{ padding:0; overflow:hidden; }
    .rb-adv-wrap{ position:absolute; inset:0; display:flex; }
    /* left gear palette (like Gear) */
    .rb-adv-palette{ flex:0 0 232px; display:flex; flex-direction:column; min-height:0;
        background:linear-gradient(180deg, rgba(40,62,112,.22), rgba(20,36,72,.26));
        border-right:1px solid rgba(120,165,225,.16); }
    .rb-adv-pal-head{ flex:0 0 auto; padding:12px 12px 8px; display:flex; flex-direction:column; gap:8px;
        border-bottom:1px solid rgba(120,165,225,.12); }
    .rb-adv-pal-filters{ display:flex; gap:4px; flex-wrap:wrap; }
    .rb-adv-pal-chip{ border:1px solid rgba(120,170,240,.24); border-radius:8px; padding:5px 9px; font-size:12px;
        color:#bcc8de; background:rgba(120,160,220,.1); cursor:pointer; transition:background .15s, color .15s; }
    .rb-adv-pal-chip:hover{ color:#fff; background:rgba(120,160,220,.2); }
    .rb-adv-pal-chip.rb-adv-pal-on{ color:#fff; background:rgba(120,160,220,.34); box-shadow:inset 0 0 0 1px rgba(140,180,250,.5); }
    .rb-adv-pal-head input{ background:rgba(8,14,28,.55); border:1px solid rgba(120,160,220,.22); border-radius:9px;
        padding:8px 11px; font-size:12.5px; color:#dbe4f2; outline:none; }
    .rb-adv-pal-head input::placeholder{ color:#7e8aa3; }
    .rb-adv-palette-list{ flex:1 1 auto; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; }
    .rb-adv-pal-item{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:10px; cursor:grab;
        background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); transition:background .15s, border-color .15s; }
    .rb-adv-pal-item:active{ cursor:grabbing; }
    /* ghost that follows the cursor while dragging a palette gear onto the canvas */
    .rb-adv-drag-ghost{ position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%);
        padding:6px 12px; border-radius:9px; font-size:12.5px; font-weight:600; color:#eaf1fb; white-space:nowrap;
        background:rgba(48,72,118,.94); border:1px solid rgba(120,170,240,.6); box-shadow:0 6px 18px rgba(0,0,0,.5); }
    .rb-adv-pal-item:hover{ background:rgba(120,160,220,.14); border-color:rgba(120,170,240,.4); }
    .rb-adv-pal-item:active{ cursor:grabbing; }
    .rb-adv-pal-thumb{ flex:0 0 auto; width:52px; height:34px; border-radius:6px; overflow:hidden; background:#0b0d12;
        display:flex; align-items:center; justify-content:center; }
    .rb-adv-pal-thumb img{ width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; user-select:none; }
    .rb-adv-pal-ph{ font-size:11px; font-weight:600; letter-spacing:.06em; color:#6f7a88; }
    .rb-adv-pal-name{ flex:1 1 auto; min-width:0; font-size:12px; color:#dbe4f2; line-height:1.2;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .rb-adv-pal-empty{ color:#7e8aa3; font-size:12px; padding:14px 8px; text-align:center; }

    /* main canvas area */
    .rb-adv-main{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; position:relative; }
    .rb-adv-toolbar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
        padding:10px 16px; border-bottom:1px solid rgba(120,165,225,.12); }
    .rb-adv-hint{ font-size:12px; color:#8b96ad; }
    .rb-adv-actions{ display:flex; gap:7px; }
    .rb-adv-btn{ font-size:12px; padding:6px 12px; border-radius:8px; color:#dbe2ee; cursor:pointer;
        background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:.15s; }
    .rb-adv-btn:hover{ background:rgba(120,160,220,.2); color:#fff; }
    .rb-adv-canvas{ flex:1 1 auto; position:relative; overflow:auto;
        background:
            radial-gradient(circle at 18px 18px, rgba(120,160,220,.10) 1.4px, transparent 1.6px) 0 0 / 34px 34px,
            linear-gradient(180deg, rgba(8,12,22,.30), rgba(6,9,16,.42)); }
    /* sizer wrapper: holds the scroll size (w*zoom); the two layers inside are
       transform:scale'd so scrolling works at any zoom. */
    .rb-adv-zoom{ position:relative; }
    .rb-adv-cables{ position:absolute; top:0; left:0; pointer-events:none; z-index:1; overflow:visible; }
    /* the nodes layer is ON TOP of the cables (z-index:2); make its EMPTY area
       click-through (pointer-events:none) so the cables below get hover/click —
       the node boxes re-enable pointer-events so they stay interactive. */
    .rb-adv-nodes{ position:absolute; top:0; left:0; z-index:2; pointer-events:none; }

    /* a node = a gear box with an input jack (left) + output jack (right) */
    .rb-adv-node{ position:absolute; width:128px; border-radius:12px; cursor:grab; user-select:none;
        pointer-events:auto;
        background:linear-gradient(180deg, rgba(30,42,66,.96), rgba(18,26,44,.97));
        border:1px solid rgba(120,165,225,.28); box-shadow:0 10px 26px rgba(0,0,0,.5);
        transition:box-shadow .15s, border-color .15s; }
    .rb-adv-node:hover{ border-color:rgba(140,180,250,.6); box-shadow:0 12px 30px rgba(40,80,160,.4); }
    .rb-adv-node.rb-adv-sel{ border-color:var(--rb-accent); box-shadow:0 0 0 1px var(--rb-accent), 0 12px 30px rgba(0,0,0,.55); }
    .rb-adv-node:active{ cursor:grabbing; }
    /* bypassed gear = passthrough; greyed out (saturation 0) */
    .rb-adv-node-bypassed{ filter:saturate(0) brightness(.88); opacity:.78; }
    /* graph-inactive: not on a complete Input→Output path → makes no sound */
    .rb-adv-node-inactive{ opacity:.4; border-style:dashed; }
    /* armed for delete while dragged off the canvas */
    .rb-adv-node-trashing{ opacity:.45; filter:grayscale(.7) brightness(.8);
        border-color:rgba(220,80,80,.8) !important; box-shadow:0 0 0 2px rgba(220,80,80,.45), 0 12px 30px rgba(0,0,0,.5) !important; }
    .rb-adv-node-del{ position:absolute; top:-9px; right:-9px; width:20px; height:20px; border-radius:50%;
        border:1px solid rgba(255,120,120,.5); background:rgba(40,16,16,.95); color:#ff9a9a; font-size:11px;
        line-height:1; cursor:pointer; opacity:0; transition:opacity .12s ease; z-index:4; }
    .rb-adv-node:hover .rb-adv-node-del{ opacity:1; }
    .rb-adv-node-del:hover{ background:rgba(120,30,30,.95); color:#fff; }
    .rb-adv-node-edit{ position:absolute; top:-9px; left:-9px; width:20px; height:20px; border-radius:50%;
        border:1px solid rgba(120,170,240,.5); background:rgba(16,24,40,.95); color:#bcd2f5; font-size:10px;
        line-height:1; cursor:pointer; opacity:0; transition:opacity .12s ease; z-index:4; padding:0; }
    .rb-adv-node:hover .rb-adv-node-edit{ opacity:1; }
    .rb-adv-node-edit:hover{ background:rgba(40,80,150,.95); color:#fff; }
    /* zoom controls */
    .rb-adv-btn-icon{ min-width:26px; padding:4px 0; font-size:15px; line-height:1; text-align:center; }
    .rb-adv-zoom-label{ font-size:11px; color:#9fb0c8; min-width:38px; text-align:center; font-variant-numeric:tabular-nums; }
    /* in-canvas VST editor card */
    .rb-adv-editor{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:30;
        width:min(620px,92%); background:rgba(14,18,26,.97); border:1px solid rgba(120,160,220,.35);
        border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.6); overflow:hidden; }
    .rb-adv-editor-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px;
        padding:9px 12px; background:rgba(30,46,76,.6); border-bottom:1px solid rgba(120,160,220,.25); }
    .rb-adv-editor-name{ font-size:12px; letter-spacing:.05em; color:#dbe4f2; font-weight:600; }
    .rb-adv-editor-close{ width:24px; height:24px; border-radius:6px; border:1px solid rgba(255,255,255,.15);
        background:rgba(255,255,255,.06); color:#cfd8e6; cursor:pointer; font-size:12px; line-height:1; }
    .rb-adv-editor-close:hover{ background:rgba(255,255,255,.14); }
    /* "🪟 Plugin window" chip in the node-editor card bar — matches the bar's
       blue-glass language; margin-left:auto groups it with the ✕ on the right. */
    .rb-adv-editor-realui{ margin-left:auto; padding:5px 11px; border-radius:7px;
        border:1px solid rgba(120,170,240,.34); background:rgba(30,46,76,.62); color:#cfe0ff;
        cursor:pointer; font-size:12px; line-height:1; white-space:nowrap;
        transition:background .15s, color .15s; }
    .rb-adv-editor-realui:hover{ background:rgba(48,72,118,.8); color:#fff; }
    .rb-adv-editor-face{ padding:14px; }
    /* The card width is sized per-gear in rbAdvEditNode (height-aware) so the
       canvas opens at its own proportions, not the amp's full face. Safety cap so
       it never spills past the card. */
    .rb-adv-editor-face .rb-amp-face-canvas{ max-width:100%; }
    .rb-adv-editor-empty{ padding:22px 16px; text-align:center; color:#8893a5; font-size:12px; }
    .rb-adv-node-thumb{ height:56px; border-radius:11px 11px 0 0; overflow:hidden; background:#0b0d12;
        display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,.06); }
    .rb-adv-node-thumb img{ width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; user-select:none; }
    .rb-adv-node-label{ padding:6px 8px; font-size:11px; color:#dbe4f2; text-align:center; line-height:1.2;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rb-adv-node-kind{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#7e8aa3; text-align:center; padding:0 0 6px; }
    /* stereo pan slider on a gear node (St-1): L —●— R + a value chip */
    .rb-adv-node-pan{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 8px 6px; box-sizing:border-box; width:100%; }
    .rb-adv-pan-slider{ -webkit-appearance:none; appearance:none; min-width:0; width:100%; height:3px; border-radius:2px;
        background:linear-gradient(90deg,#3d6bbf,#2a2f3a 50%,#bf6b3d); cursor:ew-resize; outline:none; margin:0; }
    .rb-adv-pan-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:11px; height:11px;
        border-radius:50%; background:#dbe4f2; border:1px solid rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.5); }
    .rb-adv-pan-val{ text-align:center; font-size:9px; font-variant-numeric:tabular-nums; color:#9fb0c8; letter-spacing:.02em; }
    /* terminal nodes (Input / Output) read as small rounded pills */
    .rb-adv-node.rb-adv-term{ width:96px; background:linear-gradient(180deg, rgba(52,180,120,.18), rgba(30,90,60,.22));
        border-color:rgba(74,210,150,.4); }
    .rb-adv-node.rb-adv-term.rb-adv-term-out{ background:linear-gradient(180deg, rgba(120,160,220,.2), rgba(40,70,130,.24));
        border-color:rgba(120,170,240,.5); }
    .rb-adv-term-label{ padding:12px 8px; font-size:12px; font-weight:600; color:#e6edf6; text-align:center; }
    /* cable jacks — guitar 1/4" plug feel: a metal ring with a dark centre */
    .rb-adv-jack{ position:absolute; top:50%; width:16px; height:16px; border-radius:50%; transform:translateY(-50%);
        background:radial-gradient(circle at 38% 32%, #c9d3e2, #6c7689 60%, #2a3142);
        border:1px solid rgba(0,0,0,.5); box-shadow:0 1px 3px rgba(0,0,0,.6); cursor:crosshair; z-index:3; }
    .rb-adv-jack::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:#11151f; }
    .rb-adv-jack:hover{ box-shadow:0 0 10px rgba(140,180,250,.8); }
    .rb-adv-jack-in{ left:-9px; }
    .rb-adv-jack-out{ right:-9px; }
    /* optional stereo source jacks: mono stays centred/default, L/R sit above
       and below it so they can feed separate branches without replacing mono. */
    .rb-adv-jack-l{ top:28%; background:radial-gradient(circle at 38% 32%, #bcd2ff, #4f78c8 60%, #22314e); }
    .rb-adv-jack-r{ top:72%; background:radial-gradient(circle at 38% 32%, #ffd4bc, #c8784f 60%, #4e3122); }
    .rb-adv-jack-mono{ background:radial-gradient(circle at 38% 32%, #d7e0ee, #748096 60%, #2a3142); }
    .rb-adv-jack-l::before, .rb-adv-jack-r::before, .rb-adv-jack-mono::before{ position:absolute; right:18px; top:50%; transform:translateY(-50%);
        font-size:8px; font-weight:700; color:#9fb0c8; letter-spacing:.04em; }
    .rb-adv-jack-l::before{ content:"L"; }
    .rb-adv-jack-r::before{ content:"R"; }
    .rb-adv-jack-mono::before{ content:"M"; }
    /* a cable path */
    /* solid stroke (NOT a url(#gradient) ref): an SVG gradient reference rebuilt
       via innerHTML doesn't repaint until a reflow, so gradient cables only
       appeared after the user nudged a node. Solid paints on first render. */
    .rb-adv-cable{ fill:none; stroke:#6f93d6; stroke-width:4; stroke-linecap:round;
        filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); pointer-events:none; }
    .rb-adv-cable.rb-adv-cable-temp{ stroke:rgba(150,190,255,.7); stroke-dasharray:6 5; }
    .rb-adv-cable.rb-adv-cable-l{ stroke:#5b8be0; }   /* split L output cable */
    .rb-adv-cable.rb-adv-cable-r{ stroke:#e0915b; }   /* split R output cable */
    /* wide invisible click target so a thin cable is easy to grab; a faint red
       tube on hover signals "click to disconnect". */
    .rb-adv-cable-hit{ fill:none; stroke:transparent; stroke-width:20; stroke-linecap:round;
        pointer-events:stroke; cursor:pointer; }
    /* (no colour change on hover — just the pointer cursor on the hit path) */
</style>
<div id="rb-root" class="rb-immersive max-w-5xl mx-auto px-6 pt-24 pb-16">
    <button onclick="showScreen('home')" class="rb-back text-gray-500 hover:text-white text-sm mb-6 flex items-center gap-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg> Back
    </button>
    <h2 class="text-3xl font-bold text-white mb-2" style="display:none">Rig Builder</h2>
    <p class="text-gray-500 mb-6" style="display:none">Map song tones to NAM captures + VST3/AU plugins, persisted as nam_tone presets.</p>

    <!-- Setup status -->
    <div id="rb-status" class="mb-6" style="display:none"></div>

    <!-- Floating translucent-blue top bar (immersive shell) -->
    <div class="rb-topbar">
        <!-- No in-plugin back button: the host's left nav already returns home. -->
        <button data-rb-tab="studio" onclick="rbShowTab('studio')" class="rb-tab">Studio</button>
        <button data-rb-tab="gear" onclick="rbShowTab('gear')" class="rb-tab">Gear</button>
        <button data-rb-tab="master" onclick="rbShowTab('master')" class="rb-tab">Master chain</button>
        <button data-rb-tab="settings" onclick="rbShowTab('settings')" class="rb-tab">Setup</button>
        <!-- Mute the output (also the 'm' key) — handy when a tone loads and you
             don't know what you're in for. Sits at the left of the right-hand group. -->
        <button id="rb-mute-btn" class="rb-mute-btn" onclick="rbToggleMute()" title="Mute output (m)">🔊</button>
        <!-- Song search is an action (opens the bottom dock), not a tab -->
        <button id="rb-song-btn" class="rb-songbtn" onclick="rbToggleSongSearch()" title="Load a song's tones">🔎 Song</button>
        <!-- Tone selector: current tone + a searchable dropdown to switch / save -->
        <div class="rb-toneselect">
            <button id="rb-tone-btn" class="rb-tone-btn" onclick="rbStudioToggleToneMenu()">🎵 <span id="rb-tone-current">Default</span> ▾</button>
            <div id="rb-tone-menu" class="rb-tone-menu hidden"></div>
        </div>
    </div>

    <!-- Stage: Studio room is the permanent backdrop; other tabs float over it -->
    <div id="rb-stage-wrap">
    <!-- The loaded song's tones live in their own bar (shown only with a song) -->
    <div id="rb-song-tonebar" class="rb-song-tonebar hidden"></div>
    <!-- Studio (main view — the Default tone visualised as a 3D control room) -->
    <div id="rb-tab-studio" class="rb-tab-panel">
        <div id="rb-studio-room"></div>
        <!-- Per-song-tone action: Restore (song's own tone) or Remove (a tone you
             added). Floats just left of ⚙ Advanced; shown only on a song tone.
             Reuses .rb-studio-adv-btn so it inherits the songbar-drop + focus-hide. -->
        <button id="rb-studio-tone-action" class="rb-studio-adv-btn rb-studio-tone-action hidden"
                onclick="rbStudioToneActionClick()"></button>
        <!-- Replace this song tone's whole chain with one of the user's saved
             presets (no rebuilding from scratch). Shown on any active song tone;
             persists through the normal per-song path, so Restore still undoes it. -->
        <button id="rb-studio-tone-replace" class="rb-studio-adv-btn rb-studio-tone-replace hidden"
                onclick="rbStudioReplaceSongToneWithPreset()"
                title="Swap this tone's gear for one of your saved presets">🔁 Replace with preset…</button>
        <!-- Advanced (node-graph chain editor) lives INSIDE Studio, not in the top tab bar -->
        <button class="rb-studio-adv-btn" onclick="rbShowTab('advanced')" title="Open the advanced node-graph chain editor">
            ⚙ Advanced
        </button>
        <!-- Full-chain NAM loader: always docked bottom-left (with or without a song).
             Replaces the CURRENT tone (Default / saved / song) with a single baked .nam. -->
        <button class="rb-studio-fullchain-btn" onclick="rbStudioLoadFullChainNam()"
                title="Replace the current tone with a full-chain .nam (amp+pedals+cab baked in one capture) — from a directory or tone3000">
            🎛 Full-chain NAM
        </button>
    </div>

    <!-- Full-chain NAM chooser (directory or tone3000). Overlays the whole shell. -->
    <div id="rb-fullchain-modal" class="rb-fc-modal hidden" onclick="if(event.target===this)rbFcClose()">
        <div class="rb-fc-card">
            <div class="rb-fc-head">
                <span>🎛 Load full-chain NAM</span>
                <button class="rb-fc-x" onclick="rbFcClose()" title="Close">✕</button>
            </div>
            <div id="rb-fullchain-body" class="rb-fc-body"></div>
        </div>
    </div>

    <!-- Songs — a bottom search dock that doesn't cover the studio room -->
    <div id="rb-tab-song" class="rb-tab-panel rb-songdock hidden">
        <div class="rb-songdock-inner">
            <div id="rb-song-list" class="rb-songdock-list"></div>
            <div class="rb-songdock-search">
                <select id="rb-library-provider" onchange="rbSetLibraryProvider(this.value)"
                        aria-label="Library source" title="Library source"
                        class="bg-dark-700 border border-gray-800 rounded-xl px-3 py-2.5 text-sm text-gray-300 outline-none hidden">
                    <option value="local">My Library</option>
                </select>
                <input type="text" id="rb-song-search" placeholder="Search a song…"
                       oninput="rbOnSongSearchInput()"
                       onfocus="rbShowSongList()"
                       onkeydown="if(event.key==='Enter')rbListSongs()">
                <button onclick="rbShowSongList(); rbListSongs()">Search</button>
            </div>
        </div>
        <!-- legacy per-song editor (kept for data flow; hidden in the immersive shell) -->
        <div id="rb-song-tones" style="display:none"></div>
    </div>

    <!-- Gear (catalog + Pending + Files merged with chip filter) -->
    <div id="rb-tab-gear" class="rb-tab-panel rb-overlay hidden">
        <div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
            <div class="inline-flex gap-1 bg-dark-800/50 border border-gray-800/50 rounded-lg p-1">
                <button onclick="rbGearFilter('all')" data-rb-gear-filter="all"
                        class="rb-gear-filter-btn px-3 py-1.5 rounded text-xs text-gray-300 transition">
                    All gear
                </button>
                <button onclick="rbShowTab('advanced')" title="Open the node-graph chain editor"
                        class="rb-gear-filter-btn px-3 py-1.5 rounded text-xs text-cyan-300 transition">
                    ⚙ Advanced
                </button>
            </div>
        </div>

        <!-- View: All gear (catalog browser). -->
        <div id="rb-gear-view-all" class="rb-gear-view">
            <div class="rb-gear-browser grid grid-cols-1 lg:grid-cols-2 gap-4" style="grid-template-columns:minmax(260px,320px) minmax(0,1fr)">
                <aside class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-3 space-y-3">
                    <input id="rb-gear-search" type="text"
                           placeholder="Search gear by name, make, model, codename…"
                           oninput="rbDebouncedGearFilter()"
                           class="w-full bg-dark-800 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:border-accent/50 outline-none">
                    <select id="rb-gear-instrument-filter"
                            onchange="rbSelectGearInstrument(this.value)"
                            class="w-full bg-dark-800 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-200 focus:border-accent/50 outline-none">
                        <option value="all">All instruments</option>
                        <option value="guitar">Guitar</option>
                        <option value="bass">Bass</option>
                    </select>
                    <div id="rb-gear-category-menu" class="grid grid-cols-2 gap-2"></div>
                    <!-- Backing-type filter: show gear by what powers it. Multi-
                         select — pick any combination (all off = show everything). -->
                    <div class="flex items-center gap-1.5" title="Filter by what backs each gear">
                        <button type="button" data-rb-backing="nam" onclick="rbToggleBackingFilter('nam')"
                                class="rb-backing-btn flex-1 px-2 py-1 rounded text-xs text-gray-400 border border-gray-800 bg-dark-800 transition">NAM</button>
                        <button type="button" data-rb-backing="vst" onclick="rbToggleBackingFilter('vst')"
                                class="rb-backing-btn flex-1 px-2 py-1 rounded text-xs text-gray-400 border border-gray-800 bg-dark-800 transition">VST</button>
                        <button type="button" data-rb-backing="ir" onclick="rbToggleBackingFilter('ir')"
                                class="rb-backing-btn flex-1 px-2 py-1 rounded text-xs text-gray-400 border border-gray-800 bg-dark-800 transition">IR</button>
                    </div>
                    <label class="text-xs text-gray-400 flex items-center gap-1.5 whitespace-nowrap cursor-pointer hover:text-gray-200 transition">
                        <input type="checkbox" id="rb-gear-only-unassigned" onchange="rbApplyGearFilters()" class="rounded">
                        Only unassigned
                    </label>
                    <div id="rb-gear-list-summary" class="text-xs text-gray-500"></div>
                    <div id="rb-gear-add-btn"></div>
                    <div id="rb-catalog" class="space-y-1 text-sm max-h-[80vh] overflow-y-auto pr-1">Loading…</div>
                </aside>
                <section id="rb-gear-detail" class="min-w-0">Loading…</section>
            </div>
        </div>

        <!-- View: Default tone (the idle rig — plays when no song is active) -->
        <div id="rb-gear-view-default" class="rb-gear-view hidden">
            <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
                <div class="flex items-baseline justify-between mb-2">
                    <h3 class="text-white font-semibold">Default tone</h3>
                    <span id="rb-master-default-count" class="text-xs text-gray-500"></span>
                </div>
                <p class="text-gray-500 text-sm mb-3">
                    Build a rig from your gear (pedals → amp → cab) that plays whenever
                    no song is loaded — at startup, and again when you leave a song or
                    stop a Listen preview. Without it, the engine just keeps whatever
                    tone loaded last. Same Library / VST / Bypass / reorder controls as a
                    song chain; the cab is placed at the end automatically.
                </p>
                <label class="flex items-center gap-2 text-sm text-gray-300 mb-3 cursor-pointer">
                    <input type="checkbox" id="rb-default-tone-enabled"
                           onchange="rbSetDefaultToneEnabled(this.checked)" class="rounded">
                    Play this default tone when idle
                </label>
                <div id="rb-default-tone-status" class="text-xs text-gray-500 mb-3">Loading…</div>
                <div id="rb-master-default-chain" class="space-y-3"></div>
                <div class="flex items-center gap-2 mt-3">
                    <button onclick="rbOpenMasterAddPiecePicker('default')"
                            class="bg-cyan-900/30 hover:bg-cyan-900/50 text-cyan-300 border border-cyan-800/40 px-3 py-1.5 rounded text-xs transition">
                        ＋ Add piece
                    </button>
                    <button onclick="rbPreviewDefaultTone(this)"
                            class="bg-dark-600 hover:bg-dark-500 text-gray-200 border border-gray-700/50 px-3 py-1.5 rounded text-xs transition">
                        ▶ Test
                    </button>
                </div>
                <div id="rb-master-default-picker" class="hidden mt-2 bg-cyan-900/10 border border-cyan-800/30 rounded p-3"></div>
            </div>
        </div>

    </div>

    <!-- Master chain — global pre/post FX wrapper -->
    <div id="rb-tab-master" class="rb-tab-panel rb-overlay hidden">
        <div id="rb-master-status" class="text-xs text-gray-500 mb-4" style="display:none">Loading…</div>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
                <div class="flex items-baseline justify-between mb-2">
                    <h3 class="text-emerald-300 font-semibold">Pre (before pedals/amp/racks)</h3>
                    <span id="rb-master-pre-count" class="text-xs text-gray-500"></span>
                </div>
                <div id="rb-master-pre-chain" class="space-y-3"></div>
                <button onclick="rbOpenMasterAddPiecePicker('pre')"
                        class="mt-3 bg-emerald-900/30 hover:bg-emerald-900/50 text-emerald-300 border border-emerald-800/40 px-3 py-1.5 rounded text-xs transition">
                    ＋ Add pre piece
                </button>
                <div id="rb-master-pre-picker" class="hidden mt-2 bg-emerald-900/10 border border-emerald-800/30 rounded p-3"></div>
            </div>
            <div>
                <div class="flex items-baseline justify-between mb-2">
                    <h3 class="text-cyan-300 font-semibold">Post (after pedals/amp/racks)</h3>
                    <span id="rb-master-post-count" class="text-xs text-gray-500"></span>
                </div>
                <div id="rb-master-post-chain" class="space-y-3"></div>
                <button onclick="rbOpenMasterAddPiecePicker('post')"
                        class="mt-3 bg-cyan-900/30 hover:bg-cyan-900/50 text-cyan-300 border border-cyan-800/40 px-3 py-1.5 rounded text-xs transition">
                    ＋ Add post piece
                </button>
                <div id="rb-master-post-picker" class="hidden mt-2 bg-cyan-900/10 border border-cyan-800/30 rounded p-3"></div>
            </div>
        </div>
    </div>

    <!-- Advanced — node-graph routing editor (overlay over the Studio, same
         translucent-blue panel as Gear/Master). Left = gear palette to drag
         from; right = the node canvas with guitar-cable links; supports parallel
         branches (the chain output is the sum of all sink nodes). -->
    <div id="rb-tab-advanced" class="rb-tab-panel rb-overlay rb-adv hidden">
        <div class="rb-adv-wrap">
            <aside class="rb-adv-palette">
                <div class="rb-adv-pal-head">
                    <div class="rb-adv-pal-filters">
                        <button class="rb-adv-pal-chip rb-adv-pal-on" data-rb-adv-pal="amp" onclick="rbAdvPaletteFilter('amp')">Amps</button>
                        <button class="rb-adv-pal-chip" data-rb-adv-pal="cab" onclick="rbAdvPaletteFilter('cab')">Cabs</button>
                        <button class="rb-adv-pal-chip" data-rb-adv-pal="pedal" onclick="rbAdvPaletteFilter('pedal')">Pedals</button>
                        <button class="rb-adv-pal-chip" data-rb-adv-pal="rack" onclick="rbAdvPaletteFilter('rack')">Racks</button>
                    </div>
                    <input id="rb-adv-pal-search" type="text" placeholder="Search gear…" oninput="rbAdvPaletteRender()">
                </div>
                <div id="rb-adv-palette-list" class="rb-adv-palette-list"></div>
            </aside>
            <div class="rb-adv-main">
                <div class="rb-adv-toolbar">
                    <span class="rb-adv-hint">Click or drag gear in · wire M by default · stereo pedals also expose L/R outs · double-click a cable to disconnect</span>
                    <div class="rb-adv-actions">
                        <button onclick="rbAdvZoom(-0.15)" class="rb-adv-btn rb-adv-btn-icon" title="Zoom out">−</button>
                        <span id="rb-adv-zoom-label" class="rb-adv-zoom-label">100%</span>
                        <button onclick="rbAdvZoom(0.15)" class="rb-adv-btn rb-adv-btn-icon" title="Zoom in">+</button>
                        <button onclick="rbAdvAutoLayout()" class="rb-adv-btn">Tidy</button>
                        <button onclick="rbAdvResetToChain()" class="rb-adv-btn">Reset to chain</button>
                        <button onclick="rbAdvExportTone()" class="rb-adv-btn" title="Export this tone's configuration to a file">⬆ Export tone</button>
                        <button onclick="document.getElementById('rb-adv-import-tone').click()" class="rb-adv-btn" title="Import a tone file — replaces this tone's configuration">⬇ Import tone</button>
                        <input type="file" id="rb-adv-import-tone" accept=".json,application/json" style="display:none" onchange="rbAdvImportToneFile(this)">
                        <button onclick="rbToggleToneHotkeysPanel()" class="rb-adv-btn" title="Bind number keys to tones for live switching while a song plays">⌨ Hotkeys</button>
                    </div>
                </div>
                <!-- Tone hotkeys — floating panel. Bind number keys to the song's
                     own tones (per-section) or to saved/Default presets. Toggled
                     from the toolbar; populated by rbRenderToneHotkeysUI(). -->
                <div id="rb-adv-hotkeys-panel" class="hidden" style="position:absolute;top:96px;right:12px;z-index:40;width:330px;max-height:72%;overflow-y:auto;background:rgba(12,16,26,.97);border:1px solid rgba(120,165,225,.28);border-radius:12px;padding:14px;box-shadow:0 10px 40px rgba(0,0,0,.5);">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                        <h3 style="color:#fff;font-weight:600;font-size:14px;margin:0;">Tone hotkeys</h3>
                        <button onclick="rbToggleToneHotkeysPanel(false)" style="color:#9fb0cc;font-size:18px;line-height:1;background:none;border:none;cursor:pointer;">✕</button>
                    </div>
                    <p style="color:#7e8aa3;font-size:11.5px;margin:0 0 10px;">Press a bound number key while a song plays. "Song tone N" jumps between THIS song's own sections; the presets load a saved/Default tone over any song. Back-to-built-in undoes both.</p>
                    <div id="rb-tone-hotkeys-list" class="space-y-2"></div>
                </div>
                <!-- Per-tone noise gate — saved WITH this tone (distinct from the
                     app-wide gate in audio settings). Applied to the engine when
                     the tone loads; edits save to the tone. -->
                <div class="rb-adv-gate-bar" style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid rgba(120,165,225,.12);">
                    <label style="display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;color:#dbe4f2;font-weight:500;">
                        <input type="checkbox" id="rb-adv-gate-enable" onchange="rbAdvGateChange()" style="accent-color:#78a0dc;width:15px;height:15px;">
                        🔇 Noise gate <span style="color:#7e8aa3;font-weight:400;">(this tone)</span>
                    </label>
                    <div id="rb-adv-gate-params" style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;opacity:.45;">
                        <label style="display:flex;align-items:center;gap:6px;font-size:11.5px;color:#9fb0cc;">Threshold
                            <input type="range" id="rb-adv-gate-threshold" min="-96" max="0" step="1" value="-60" oninput="rbAdvGateChange()" style="width:96px;accent-color:#78a0dc;">
                            <span id="rb-adv-gate-threshold-label" style="min-width:46px;color:#cdd6e6;">-60 dB</span></label>
                        <label style="display:flex;align-items:center;gap:6px;font-size:11.5px;color:#9fb0cc;">Release
                            <input type="range" id="rb-adv-gate-release" min="5" max="2000" step="5" value="100" oninput="rbAdvGateChange()" style="width:84px;accent-color:#78a0dc;">
                            <span id="rb-adv-gate-release-label" style="min-width:48px;color:#cdd6e6;">100 ms</span></label>
                        <label style="display:flex;align-items:center;gap:6px;font-size:11.5px;color:#9fb0cc;">Depth
                            <input type="range" id="rb-adv-gate-depth" min="-100" max="0" step="1" value="-60" oninput="rbAdvGateChange()" style="width:84px;accent-color:#78a0dc;">
                            <span id="rb-adv-gate-depth-label" style="min-width:46px;color:#cdd6e6;">-60 dB</span></label>
                    </div>
                </div>
                <div id="rb-adv-canvas" class="rb-adv-canvas">
                    <div id="rb-adv-zoom" class="rb-adv-zoom">
                        <svg id="rb-adv-cables" class="rb-adv-cables" preserveAspectRatio="none"></svg>
                        <div id="rb-adv-nodes" class="rb-adv-nodes"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Setup (was Dashboard + Settings merged). Top half = library-
         wide batch ops + coverage stats; bottom half = tone3000 + VST
         scan + preferences + export defaults. Same
         DOM ids used by JS — only the layout was reorganised. -->
    <div id="rb-tab-settings" class="rb-tab-panel rb-overlay hidden">

        <!-- Setup sub-tabs: General settings (library-wide + preferences) and
             tone3000 (account, downloads, Files). -->
        <div class="inline-flex gap-1 bg-dark-800/50 border border-gray-800/50 rounded-lg p-1 mb-6">
            <button id="rb-setup-sub-general" onclick="rbSetupSubtab('general')"
                    class="rb-setup-sub-btn px-4 py-1.5 rounded text-sm text-gray-300 transition">General settings</button>
            <button id="rb-setup-sub-tone3000" onclick="rbSetupSubtab('tone3000')"
                    class="rb-setup-sub-btn px-4 py-1.5 rounded text-sm text-gray-300 transition">tone3000</button>
        </div>

        <!-- ════════════════ GENERAL SETTINGS ════════════════ -->
        <div id="rb-setup-general">

        <!-- Rig Builder master ON/OFF — turn the whole thing off if you don't use it. -->
        <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
            <h3 class="text-white font-semibold mb-2">Rig Builder</h3>
            <p class="text-gray-500 text-sm mb-3">
                When off, Rig Builder loads nothing into the audio engine — no per-song
                tone, no idle default tone, no preview — and your own Audio-menu signal
                chain is left completely untouched. Turn it off if you don't use Rig Builder.
            </p>
            <label class="flex items-center gap-2 cursor-pointer select-none">
                <input type="checkbox" id="rb-enabled-toggle" checked
                       onchange="rbSetRigBuilderEnabled(this.checked)"
                       class="accent-emerald-500 w-4 h-4">
                <span class="text-sm text-gray-200">Use Rig Builder (load its tones into the audio engine)</span>
            </label>
        </div>

        <!-- Levels — kept at the very top for quick access. -->
        <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
            <h3 class="text-white font-semibold mb-3">Levels</h3>
            <p class="text-gray-500 text-sm mb-3">
                These are the same two faders you see in the in-game mixer while
                playing — edits here and in-game stay in sync and are saved.
            </p>
            <div class="mt-2 flex justify-center gap-24">
                <div class="flex flex-col items-center select-none">
                    <div id="rb-amp-drive-knob" title="Input — input level into the chain · drag up/down · double-click to reset to 0 dB"></div>
                    <span id="rb-amp-drive-val" class="text-xs text-purple-300 mt-1">0.0 dB</span>
                    <span class="text-sm text-gray-300 mt-1">Input</span>
                </div>
                <div class="flex flex-col items-center select-none">
                    <div id="rb-chain-makeup-knob" title="AMP — output level · drag up/down · double-click to reset to 0 dB"></div>
                    <span id="rb-chain-makeup-val" class="text-xs text-purple-300 mt-1">0.0 dB</span>
                    <span class="text-sm text-gray-300 mt-1">AMP</span>
                </div>
            </div>
        </div>

        <!-- Play a specific tone — override the song's tone with a chosen user tone. -->
        <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
            <h3 class="text-white font-semibold mb-3">Play a specific tone</h3>
            <p class="text-gray-500 text-sm mb-3">
                Ignore each song's own tone and always play with one tone you choose
                (your Default tone or a saved Studio tone). Turn this off to go back
                to the song's tones.
            </p>
            <label class="flex items-center gap-2 mb-3 cursor-pointer select-none">
                <input type="checkbox" id="rb-tone-override-enabled" class="accent-purple-500 w-4 h-4">
                <span class="text-sm text-gray-200">Use a specific tone for all songs</span>
            </label>
            <select id="rb-tone-override-name"
                    class="w-full bg-dark-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 disabled:opacity-40"
                    disabled>
                <option value="">Default tone</option>
            </select>
        </div>

        <!-- Original Settings panels below -->
        <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
            <h3 class="text-white font-semibold mb-3">VST / Audio Unit plugins</h3>
            <p class="text-gray-500 text-sm mb-3">
                Scan your installed VST3 / Audio Unit plugins once here — the
                results feed the 📚 Library picker that appears on every gear.
                Scanning instantiates each plugin to validate it, so it can take
                up to a minute; a broken plugin may make it time out (check the
                console for the offending path).
            </p>
            <div class="flex gap-3 items-center">
                <button id="rb-settings-scan-btn" onclick="rbScanFromSettings()"
                        class="bg-accent hover:bg-accent/80 text-white px-4 py-2 rounded-lg text-sm transition">
                    Scan for plugins
                </button>
                <span id="rb-settings-scan-status" class="text-xs text-gray-500"></span>
            </div>
        </div>

        <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5">
            <h3 class="text-white font-semibold mb-3">Export my mappings as defaults</h3>
            <p class="text-gray-500 text-sm mb-3">
                Snapshot your current gear → tone3000 capture choices into
                <code class="bg-dark-800 px-1 rounded">default_captures.json</code> (shipped
                with the plugin). A fresh install then auto-downloads these exact
                captures during batch / auto-download instead of searching tone3000.
            </p>
            <button onclick="rbExportDefaults()" class="bg-dark-600 hover:bg-dark-500 text-gray-300 px-4 py-2 rounded-lg text-sm transition">Export defaults</button>
            <div id="rb-export-defaults-status" class="text-xs text-gray-500 mt-2"></div>
        </div>

        <!-- Plugin updates — kept last so it sits at the very bottom of Setup. -->
        <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mt-6">
            <h3 class="text-white font-semibold mb-3">Rig Builder version</h3>
            <p class="text-gray-500 text-sm mb-3">
                Check GitHub for a newer release of this plugin and update it in place.
            </p>
            <div class="flex items-center gap-3 flex-wrap">
                <button id="rb-plugin-update-check" onclick="rbCheckPluginUpdate()"
                        class="bg-dark-600 hover:bg-dark-500 text-gray-300 px-4 py-2 rounded-lg text-sm transition">Check for updates</button>
                <button id="rb-plugin-update-apply" onclick="rbApplyPluginUpdate()"
                        class="bg-accent hover:bg-accent/80 text-white px-4 py-2 rounded-lg text-sm transition hidden">Update now</button>
                <span id="rb-plugin-update-status" class="text-xs text-gray-400"></span>
            </div>
            <div id="rb-plugin-update-version" class="text-xs text-gray-500 mt-2"></div>
        </div>

        <!-- Reset to factory — kept at the VERY bottom: takes the whole plugin
             back to its default (factory) state. -->
        <div class="bg-dark-700/50 border border-red-900/40 rounded-xl p-5 mt-6">
            <h3 class="text-white font-semibold mb-2">Reset to factory</h3>
            <p class="text-gray-500 text-sm mb-3">
                Takes everything back to the default plugin: every tone is
                re-resolved to its default bundled VST / capture / IR, and all gear
                redirects (custom + auto tone3000 mappings) are cleared so gear plays
                its own native VST again. Your manual gear swaps are <strong>discarded</strong>;
                per-tone bypass is kept. This cannot be undone.
            </p>
            <button class="rb-batch-btn bg-red-700 hover:bg-red-600 text-white px-5 py-2 rounded-xl text-sm transition"
                    onclick="rbFactoryReset()"
                    title="Reset the whole plugin to factory defaults. Clears gear redirects and re-resolves every tone. Cannot be undone.">
                Reset to factory
            </button>
            <div class="rb-batch-progress hidden mt-4">
                <div class="flex items-center gap-3 mb-2 text-sm text-gray-400">
                    <span class="rb-batch-pct">0%</span>
                    <span class="rb-batch-count">0 / 0</span>
                    <span class="rb-batch-assigned text-green-400 hidden"></span>
                </div>
                <div class="h-2 bg-dark-800 rounded-full overflow-hidden">
                    <div class="rb-batch-bar h-full bg-accent transition-all" style="width:0%"></div>
                </div>
                <pre class="rb-batch-log mt-3 text-xs text-gray-500 max-h-48 overflow-auto bg-dark-900/50 p-2 rounded"></pre>
            </div>
        </div>

        </div><!-- /#rb-setup-general -->

        <!-- ════════════════ TONE3000 ════════════════ -->
        <div id="rb-setup-tone3000" class="hidden">

            <!-- Connect tone3000 — prerequisite for listing candidates + downloads. -->
            <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
                <h3 class="text-white font-semibold mb-3">Connect tone3000 account</h3>
                <p class="text-gray-500 text-sm mb-3">
                    Sign in to tone3000 to list candidates in-app and unlock
                    automatic downloads — <strong>no API key to paste</strong>.
                    This opens tone3000 in your browser; you approve once and come
                    back. The plugin only receives a temporary, revocable token.
                </p>
                <div class="flex gap-3 items-center">
                    <button id="rb-oauth-btn" onclick="rbOauthConnect()" class="bg-accent hover:bg-accent/80 text-white px-4 py-2 rounded-lg text-sm transition">Connect with tone3000</button>
                    <button id="rb-oauth-disconnect" onclick="rbOauthDisconnect()" class="hidden bg-dark-600 hover:bg-dark-500 text-gray-300 px-4 py-2 rounded-lg text-sm transition">Disconnect</button>
                    <span id="rb-oauth-status" class="text-xs text-gray-500"></span>
                </div>
            </div>

            <!-- Fuzzy fallback — placed ABOVE the download/map actions so its
                 warning ("this can pull bad NAMs") is seen BEFORE you download. -->
            <div class="bg-dark-700/50 border border-amber-900/40 rounded-xl p-5 mb-6">
                <label class="flex items-start gap-2 text-sm cursor-pointer">
                    <input type="checkbox" id="rb-allow-tone3000-fallback"
                           onchange="rbSetAllowTone3000Fallback(this.checked)"
                           class="mt-1 accent-amber-500">
                    <span class="text-gray-300">
                        <span class="font-medium text-amber-300">⚠ Allow tone3000 fuzzy fallback</span>
                        <span class="text-gray-500 ml-1">(opt-out from curated-only)</span>
                        <div class="text-gray-500 mt-1 leading-snug">
                            Heads-up: with this ON, downloads/maps may pull a
                            <strong class="text-amber-300">"best guess" capture that sounds wrong</strong>
                            for gear without a curated match. Leave it
                            <strong class="text-gray-400">unchecked</strong> (recommended) and the plugin
                            only uses the curated 1-to-1 mappings in
                            <code class="bg-dark-800 px-1 rounded">rs_to_real.json</code> +
                            <code class="bg-dark-800 px-1 rounded">default_captures.json</code>;
                            gear without a curated default lands in
                            <span class="text-amber-300">pending</span> instead.
                        </div>
                        <div class="text-gray-500 mt-1 leading-snug">
                            Check this only if your library has lots of uncurated gear
                            and you want the plugin to fuzzy-search tone3000 and
                            auto-download a guess for each.
                        </div>
                    </span>
                </label>
            </div>

            <!-- Download tone3000 tones as NEW gain-variant gear (clean/crunch/dist
                 in one gear, auto-switched by the song's mapped volume). Does NOT
                 touch existing gear — it only builds your library; Map gear to songs
                 then maps songs to them. -->
            <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
                <h3 class="text-white font-semibold mb-2">Download automatic tone3000 tones</h3>
                <p class="text-gray-500 text-sm mb-3">
                    Downloads each curated amp's clean / crunch / dist captures from
                    tone3000 and creates <strong>one new gear per amp</strong> that
                    holds all three — auto-selected by the song's mapped volume, with
                    editable switch levels. It only builds your gear library (the new
                    gears start <span class="text-gray-400">unassigned</span>); use
                    <span class="text-gray-400">Map gear to songs</span> below to map
                    your songs onto them.
                </p>
                <button onclick="rbDownloadTone3000Gears()"
                        class="bg-emerald-900/30 hover:bg-emerald-900/60 text-emerald-300 border border-emerald-800/40 px-4 py-2 rounded-lg text-sm transition">
                    ⬇ Download automatic tone3000 tones
                </button>
            </div>

            <!-- Map the song library onto gear (redirects amp slots onto the auto
                 tone3000 gears; preserves manual swaps). -->
            <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-5 mb-6">
                <h3 class="text-white font-semibold mb-2">Map library to gear</h3>
                <p class="text-gray-500 text-sm mb-3">
                    Walks every song and, for each gear in each tone, resolves a
                    NAM / IR / VST — reusing an assignment you already made, then your
                    curated picks, then (optionally) a fresh tone3000 search. Also
                    redirects amp slots onto the auto tone3000 gears you downloaded.
                    Preserves per-tone bypass + your manual swaps.
                </p>
                <button class="rb-batch-btn bg-accent hover:bg-accent/80 text-white px-5 py-2 rounded-xl text-sm transition"
                        onclick="rbOpenMapModal()"
                        title="Pick which gear categories to map onto your songs.">
                    Map gear to songs
                </button>
                <div class="rb-batch-progress hidden mt-4">
                    <div class="flex items-center gap-3 mb-2 text-sm text-gray-400">
                        <span class="rb-batch-pct">0%</span>
                        <span class="rb-batch-count">0 / 0</span>
                        <span class="rb-batch-assigned text-green-400 hidden"></span>
                    </div>
                    <div class="h-2 bg-dark-800 rounded-full overflow-hidden">
                        <div class="rb-batch-bar h-full bg-accent transition-all" style="width:0%"></div>
                    </div>
                    <pre class="rb-batch-log mt-3 text-xs text-gray-500 max-h-48 overflow-auto bg-dark-900/50 p-2 rounded"></pre>
                </div>
            </div>

            <!-- Files: downloaded NAM/IR inventory (moved here from the Gear tab). -->
            <div class="bg-dark-700/50 border border-gray-800/50 rounded-xl p-4 mb-4">
                <div class="flex items-center justify-between gap-3 flex-wrap">
                    <div>
                        <h3 class="text-white font-semibold text-sm">Files · downloaded captures</h3>
                        <p class="text-gray-500 text-xs mt-1" id="rb-manage-summary">Loading inventory…</p>
                    </div>
                    <div class="flex gap-2">
                        <button onclick="rbLoadManageTab()"
                                class="bg-dark-600 hover:bg-dark-500 text-gray-200 px-3 py-1.5 rounded text-xs transition">
                            ↻ Refresh
                        </button>
                        <button onclick="rbPurgeNams({}, 'EVERYTHING — every NAM and IR')"
                                class="bg-red-900/30 hover:bg-red-900/60 text-red-300 border border-red-800/40 px-3 py-1.5 rounded text-xs transition">
                            🗑 Purge all
                        </button>
                    </div>
                </div>
            </div>
            <div id="rb-manage-buckets" class="space-y-4"></div>

        </div><!-- /#rb-setup-tone3000 -->

    </div>
    </div><!-- /#rb-stage-wrap -->
</div>