/* Compact PERFORMANCE-only repair. No global layout or audio changes. */
#performance{color:#f0f8fc}
body:has(#performance.active) main{max-width:1100px}
#performance .pf-shell{max-width:1020px;margin:0 auto 12px;padding:12px 18px 18px;background:#142b3b;border-radius:10px;box-sizing:border-box;position:relative}
#performance .pf-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
#performance .pf-heading h2{margin:0}
#performance .pf-mode{display:flex;gap:5px}
#performance button{min-width:0;min-height:0;margin:0;border:0;border-radius:5px;font-size:12px;padding:7px 10px;line-height:1.15}
#performance .pf-mode button.active{background:#ff9d35;color:#142a38}
#performance .pf-toolbar{position:absolute;right:19px;top:60px;z-index:9;margin:0;padding:0}
#performance .pf-set-more{position:relative}
#performance .pf-set-more summary{cursor:pointer;font-size:12px;font-weight:800;color:#fff;background:#355468;padding:8px 10px;border-radius:5px;list-style:none}
#performance .pf-set-more summary::-webkit-details-marker{display:none}
#performance .pf-set-menu{position:absolute;right:0;top:33px;width:240px;padding:12px;background:#244457;border:1px solid #7290a0;border-radius:8px;display:grid;gap:8px;box-shadow:0 9px 20px #0008}
#performance .pf-set-menu label{display:grid;gap:3px;font-size:12px}
#performance .pf-transport{display:flex;align-items:center;gap:9px;margin:0 68px 9px 0;padding:0;min-height:39px;flex-wrap:wrap}
#performance .pf-transport label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800;white-space:nowrap}
#performance .pf-transport input,#performance .pf-transport select,#performance .pf-set-menu select{min-height:31px;padding:4px 6px;font-size:13px;border:1px solid #6e8fa1;border-radius:4px;max-width:145px}
#performance .pf-set-label input{width:140px}
#performance #pf-bpm{width:59px}
#performance #pf-master{width:70px;min-height:16px;padding:0}
#performance #pf-quant{width:103px}
#performance #pf-save{background:#2b976a;color:white}
#performance #pf-stop{background:#d4494b;color:white;font-weight:900;padding:9px 11px}
#performance .pf-clock{display:flex;flex-direction:column;font-size:10px;line-height:1.2;color:#c7dce7}
#performance .pf-clock strong{color:#ffba65;font-size:12px}
#performance .pf-stage{display:block;margin:0}
#performance .pf-pad-area{width:min(100%,min(520px,calc(100vh - 275px)));min-width:0;margin:0 auto}
#performance .pf-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;width:100%;height:auto;aspect-ratio:1;align-items:stretch;justify-items:stretch}
#performance .pf-pad{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:100%!important;height:auto!important;min-height:0!important;min-width:0!important;max-width:none!important;aspect-ratio:1!important;padding:8px!important;overflow:hidden;border:2px solid #ffffff36;border-bottom:4px solid #0b243388;border-radius:8px;background:var(--pad-colour);color:#102938;box-shadow:none;gap:4px;touch-action:manipulation}
#performance .pf-pad[data-state=EMPTY]{background:color-mix(in srgb,var(--pad-colour) 68%,#193447);color:#112a36}
#performance .pf-pad[data-state=EMPTY] .pf-pad-name{font-size:30px;font-weight:500}
#performance .pf-pad[data-state=EMPTY] .pf-pad-name::first-letter{font-size:30px}
#performance .pf-pad-name{font-size:clamp(12px,1.25vw,16px);font-weight:900;line-height:1.15;overflow-wrap:anywhere;text-align:center;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#performance .pf-shortcut{position:absolute;right:5px;top:5px;font-size:11px;background:#122b3bbd;color:white;border-radius:4px;padding:2px 5px}
#performance .pf-pad-type{position:absolute;left:6px;top:5px;font-size:14px}
#performance .pf-pad-state{font-size:10px;font-weight:900;line-height:1.1}
#performance .pf-progress{position:absolute;bottom:0;left:0;height:5px;width:0;background:#fff8b0;pointer-events:none}
#performance .pf-pad[data-state=PLAYING]{border:3px solid #fff3a6;box-shadow:0 0 0 2px #ffce69}
#performance .pf-pad[data-state^=QUEUED]{border:3px dashed #fff;color:#132a38}
#performance .pf-pad[data-state=MUTED]{filter:grayscale(.85) brightness(.75)}
#performance .pf-pad[data-state=MISSING]{background:#81505a;color:#fff}
#performance .pf-pad.pf-selected{outline:3px solid #ffe266;outline-offset:2px}
#performance .pf-pad:focus-visible{outline:4px solid white;outline-offset:2px}
#performance .pf-pad:active{filter:brightness(1.2)}
#performance .pf-grid-caption{margin:5px 0 0;text-align:center;font-size:11px;color:#c4d8e2}
#performance .pf-feedback{margin:5px auto 0;max-width:520px;text-align:center;font-size:11px;color:#f8c98c;min-height:14px}
#performance .pf-perform-info{display:none!important}
#performance .pf-context{display:none}
#performance .pf-drawer-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#06151bb3;z-index:59}
#performance .pf-context:not([hidden]){display:flex;flex-direction:column;position:fixed;right:0;top:0;bottom:0;width:min(420px,100vw);max-height:100dvh;z-index:60;overflow:hidden;background:#1b3648;color:#fff;padding:0;box-shadow:-10px 0 40px #0008;box-sizing:border-box}
#performance .pf-drawer-header{flex:none;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 18px;background:#102b3b;border-bottom:1px solid #64869a}
#performance .pf-drawer-header strong{font-size:16px;color:#ffba65;line-height:1.3;overflow-wrap:anywhere}
#performance #pf-drawer-close{flex:none;min-height:44px;padding:10px 15px;background:#f4a54b;color:#132a39;font-size:15px;font-weight:900;cursor:pointer}
#performance #pf-drawer-close:focus-visible{outline:3px solid white;outline-offset:2px}
#performance .pf-drawer-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 28px}
#performance .pf-drawer-backdrop[hidden],#performance .pf-context[hidden]{display:none!important}
#performance .pf-editor{background:transparent;border:0;padding:0}
#performance .pf-editor h3{color:#ffba65;font-size:19px;margin:4px 0 15px}
#performance .pf-editor-grid{display:grid;grid-template-columns:1fr;gap:10px}
#performance .pf-editor-grid label{display:grid;gap:5px;font-size:13px;font-weight:800;color:#e6f2f8}
#performance .pf-editor-grid input,#performance .pf-editor-grid select{width:100%;max-width:100%;min-height:36px;color:#122c3b;background:#fff;border-radius:5px}
#performance .pf-editor-grid input[type=range]{min-height:22px}
#performance .pf-editor-grid .pf-check{display:flex;align-items:center;gap:8px}
#performance .pf-editor-grid .pf-check input{width:auto;min-height:0}
#performance .pf-editor-grid button{min-height:39px;font-size:13px}
#performance .pf-editor[data-playmode=shot] .pf-loop-only{display:none!important}
#performance .pf-trim-wave canvas{width:100%;height:70px;display:block}
#performance .pf-editor .hint{font-size:12px;color:#c5d8e3}
#performance [hidden]{display:none!important}
@media(max-width:740px){#performance .pf-shell{padding:10px}#performance .pf-transport{margin-right:0;padding-right:0}#performance .pf-toolbar{position:static;margin:5px 0}#performance .pf-pad-area{width:min(100%,520px)}#performance .pf-transport .pf-secondary{display:flex;flex:1 1 145px}#performance .pf-pad-name{font-size:clamp(11px,2.6vw,15px)}}
@media(max-width:430px){#performance .pf-grid{gap:6px}#performance .pf-pad{padding:4px!important;border-radius:5px}#performance .pf-shortcut{font-size:9px}#performance .pf-mode button{padding:6px;font-size:11px}#performance .pf-transport{gap:5px}#performance .pf-set-label input{width:110px}}
@media(prefers-reduced-motion:reduce){#performance .pf-pad{transition:none!important;animation:none!important}}

/* PERFORMANCE-only optional quick-start instructions; no audio or mode changes. */
#performance .pf-quick-help{margin:3px 0 7px;border:1px solid #47637a;border-radius:7px;background:#172c3e;color:#eaf5ff;font-size:14px}
#performance .pf-quick-help>summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 11px;font-weight:750;min-height:34px;list-style:revert;color:#fff}
#performance .pf-quick-help>summary:focus-visible{outline:3px solid #ffa43c;outline-offset:2px}
#performance .pf-help-state{font-weight:500;font-size:12px;color:#bed8e8}
#performance .pf-quick-help-body{padding:0 12px 9px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 15px}
#performance .pf-quick-help-body p{margin:4px 0;line-height:1.4;color:#f0f7ff}
#performance .pf-quick-help-body strong{color:#ffba65}
@media(max-width:700px){#performance .pf-quick-help-body{grid-template-columns:1fr}}

/* PERFORMANCE recording controls — no changes to other tabs. */
#performance #pf-record,#performance #pf-record-stop{font-size:12px;font-weight:800;padding:7px 10px;min-height:33px;border-radius:5px}
#performance #pf-record{background:#b93c57;color:white;border:1px solid #ec879b}
#performance #pf-record[aria-pressed="true"]{background:#802239;color:white}
#performance #pf-record-stop{background:#264f60;color:#fff;border:1px solid #6492a3}
#performance #pf-record:disabled,#performance #pf-record-stop:disabled{opacity:.55;cursor:not-allowed}
#performance .pf-record-message{margin:0 0 8px;font-size:13px;color:#fff4d0;background:#244454;padding:7px 10px;border-radius:5px}

/* Audit: secondary controls remain reachable on small screens. */
#performance .pf-mobile-more{display:none}
@media(max-width:740px){#performance .pf-transport{flex-wrap:wrap}#performance .pf-transport .pf-secondary{min-width:0}#performance .pf-transport .pf-secondary input[type=range]{max-width:130px}}

/* Performance toolbar: clear clusters without moving/removing any controls. */
#performance .pf-toolbar{position:static!important;right:auto!important;top:auto!important;margin:8px 0!important}
#performance .pf-set-more summary{min-height:44px;display:inline-flex;align-items:center;border:1px solid #86a5b6}
#performance .pf-set-menu{z-index:15}
#performance .pf-transport{margin:8px 0 12px!important;padding:10px!important;background:#213f50;border:1px solid #52788c;border-radius:10px;gap:10px!important}
#performance .pf-transport button{min-height:44px}
#performance .pf-transport label{min-height:40px}
#performance .pf-mode button{min-height:44px}
#performance :is(button,summary,input,select):focus-visible{outline:3px solid #ffc66e;outline-offset:3px}
@media(max-width:600px){#performance .pf-transport{gap:8px!important}#performance .pf-transport label{white-space:normal}#performance .pf-toolbar{margin:8px 0!important}#performance .pf-set-menu{position:static;width:min(100%,320px)}#performance .pf-heading{flex-wrap:wrap}}

/* Two-row Performance controller — scoped; pads and other pages untouched. */
#performance .pf-controller{display:grid;gap:7px;margin:8px 0 10px}
#performance .pf-controller-row{display:flex;align-items:center;justify-content:space-between;gap:9px 15px;flex-wrap:wrap;padding:8px 10px;background:#213f50;border:1px solid #52788c;border-radius:9px}
#performance .pf-control-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
#performance .pf-controller label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#f1f8fb;white-space:nowrap}
#performance .pf-controller input:not([type=checkbox]):not([type=range]),#performance .pf-controller select{height:36px;min-height:36px;box-sizing:border-box;padding:5px 7px;border:1px solid #7797a8;border-radius:5px;font-size:13px}
#performance .pf-controller button,#performance .pf-controller .pf-set-more summary{min-height:36px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;font-size:12px;font-weight:800}
#performance .pf-set-group{flex:1 1 270px}
#performance .pf-set-label input{width:clamp(115px,13vw,185px)}
#performance .pf-tempo-group{flex:0 1 auto}
#performance #pf-bpm{width:62px}
#performance #pf-quant{width:112px}
#performance .pf-master-group{flex:0 1 auto}
#performance #pf-master{width:88px;min-height:22px;padding:0}
#performance #pf-master-val{min-width:33px;text-align:right}
#performance .pf-set-more{position:relative}
#performance .pf-set-more summary{background:#355468;color:#fff;border:1px solid #86a5b6;border-radius:5px;cursor:pointer}
#performance .pf-set-menu{position:absolute;top:calc(100% + 5px);left:0;right:auto;z-index:25;width:240px}
#performance .pf-transport-row{gap:9px}
#performance .pf-playback-group{flex:1 1 410px}
#performance #pf-play{background:#26846f;color:#fff;border:1px solid #5ab99e}
#performance #pf-play[aria-pressed=true]{background:#176653;box-shadow:inset 0 0 0 2px #b2f3cf}
#performance #pf-play:disabled{opacity:.7;cursor:wait}
#performance .pf-monitor-group{margin-left:auto;gap:12px}
#performance .pf-monitor-group .pf-check{gap:5px}
#performance .pf-clock{min-width:96px}
#performance .pf-controller :is(button,summary,input,select):focus-visible{outline:3px solid #ffc66e;outline-offset:3px}
@media(max-width:700px){#performance .pf-controller-row{align-items:stretch;padding:8px}#performance .pf-control-group{flex:1 1 100%;justify-content:flex-start}#performance .pf-playback-group{flex:1 1 100%}#performance .pf-monitor-group{margin-left:0;justify-content:space-between}#performance .pf-set-menu{position:static;width:min(100%,240px)}#performance .pf-set-group{flex-wrap:wrap}}
@media(max-width:400px){#performance .pf-controller label{white-space:normal}#performance .pf-playback-group button{flex:1 1 auto}#performance .pf-set-label input{width:130px}#performance .pf-monitor-group{gap:7px}}

/* Focused mode switch and recovery feedback; existing grid/panels are unchanged. */
#performance .pf-mode{gap:0;border:2px solid #7da2b5;border-radius:8px;overflow:hidden;flex-shrink:0}
#performance .pf-mode button{border-radius:0;min-height:44px;padding:8px 10px;background:#25475d;color:#fff;font-size:12px;white-space:nowrap}
#performance .pf-mode button+button{border-left:1px solid #7da2b5}
#performance .pf-mode button[aria-pressed="true"]{background:#ffad49;color:#112b3b;font-weight:900;box-shadow:inset 0 -4px #fff}
#performance .pf-mode button:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.pf-recovery{max-width:980px;margin:10px auto;padding:12px;background:#244457;border:2px solid #8bd8ef;border-radius:8px;color:white}
.pf-recovery[hidden]{display:none}.pf-recovery button,.pf-replace-dialog button{min-height:44px;margin:5px;padding:10px 14px}
.pf-replace-dialog{max-width:min(440px,85vw);background:#173548;color:white;border:2px solid #8bd8ef;border-radius:12px;padding:20px}
.pf-replace-dialog::backdrop{background:#071b2bd9}.pf-replace-dialog form{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:600px){#performance .pf-mode{margin-left:auto}#performance .pf-mode button{font-size:11px;padding:8px}}