:root {
  --bg:#090b10; --panel:#11151d; --panel2:#171d27; --line:#303847; --text:#f4f6fb;
  --muted:#9ca7b7; --purple:#a546ff; --blue:#1fa7ff; --green:#20b53b; --amber:#e58a00; --red:#d62222;
}
*{box-sizing:border-box} html,body{height:100%;margin:0;background:radial-gradient(circle at 50% -20%,#242939 0,#0b0e14 45%,#06080c 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit}.app-shell{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:14px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 18px}.brand{font-family:Georgia,serif;font-size:clamp(24px,3vw,46px);letter-spacing:.05em;color:#f2cf75;text-shadow:0 2px 0 #6c4c08,0 0 18px #f2cf7540}.diamond{margin-right:14px}.top-actions{display:flex;gap:12px;align-items:center}.status-pill{padding:10px 14px;border-radius:999px;background:#111a14;border:1px solid #296d33;color:#78ef86;font-weight:800;letter-spacing:.04em}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#54ff6a;box-shadow:0 0 10px #54ff6a;margin-right:8px}.show-tabs{display:flex;gap:8px;padding:0 14px}.show-tab{border:1px solid #343b49;background:linear-gradient(#202630,#10141a);color:#d9dde5;padding:14px 30px;border-radius:12px;font-size:18px;font-weight:900;box-shadow:inset 0 1px #ffffff1a,0 4px 10px #0008}.show-tab.active{background:linear-gradient(#7c35b8,#43126d);border-color:#c669ff;box-shadow:inset 0 2px 4px #ffffff40,0 0 16px #a546ff66}.show-tab.disabled{opacity:.45}.workspace{min-height:0;display:grid;grid-template-columns:minmax(290px,24vw) 1fr;gap:12px}.panel{background:linear-gradient(145deg,#171c25,#0d1117);border:1px solid #303845;border-radius:16px;box-shadow:inset 0 1px #ffffff12,0 10px 28px #0008}.sidebar{min-height:0;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);color:#f0c767;font-weight:900;letter-spacing:.08em}.icon-btn,.close-btn{border:0;background:transparent;color:white;font-size:24px;cursor:pointer}.cue-list{overflow:auto;padding:6px}.cue-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:10px;border:1px solid transparent;border-radius:10px;color:#dfe4ed;cursor:pointer}.cue-row:hover{background:#ffffff0b}.cue-row.active{background:linear-gradient(90deg,#7026a9,#3d165f);border-color:#c25cff;box-shadow:0 0 14px #9b3cff66}.cue-row.disabled-cue{opacity:.4;text-decoration:line-through}.cue-number{font-weight:900;color:#aeb7c5}.cue-name{font-weight:750}.cue-badge{font-size:11px;padding:4px 7px;border-radius:999px;background:#273040;color:#b9c5d5}.sidebar-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-top:1px solid var(--line)}.metal-btn{border:1px solid #3a4657;color:#e8edf5;background:linear-gradient(#29313d,#11161d);border-radius:10px;padding:11px 14px;font-weight:900;box-shadow:inset 0 1px #ffffff22,0 4px 8px #0008;cursor:pointer}.metal-btn:active{transform:translateY(1px)}.metal-btn.small{padding:9px 14px}.main-panel{min-width:0;display:grid;grid-template-rows:minmax(0,1.1fr) minmax(0,.75fr) auto;gap:12px}.cue-card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px;min-height:0}.eyebrow{font-size:clamp(18px,2vw,30px);font-weight:950;letter-spacing:.08em}.purple{color:#c26bff}.blue{color:#27b6ff}.cue-card h1{font-size:clamp(38px,6vw,92px);line-height:.95;margin:18px 0 12px;font-weight:1000;letter-spacing:.015em;text-shadow:0 4px 12px #000}.cue-card h2{font-size:clamp(32px,5vw,70px);line-height:1;margin:16px 0;font-weight:1000}.status-text{font-size:clamp(18px,2vw,30px);color:#c172ff;font-weight:800}.progress-shell{width:92%;height:30px;margin-top:18px;border-radius:16px;border:3px solid #3c4351;background:#05070a;box-shadow:inset 0 3px 8px #000}.progress-bar{width:0;height:100%;border-radius:12px;background:linear-gradient(90deg,#8d28e6,#d15cff);box-shadow:0 0 18px #a546ff}.time-row{display:flex;justify-content:space-between;width:92%;color:#aeb7c6;margin-top:6px}.ready-message{color:#25aeff;font-size:clamp(20px,2.4vw,36px);font-weight:950;letter-spacing:.08em}.transport-panel{display:grid;grid-template-columns:1fr 1.4fr 1fr;grid-template-areas:"pause go fade" "back forward stop" "voldown mute volup" "volread volread volread";gap:12px;padding:14px}.hardware-btn{position:relative;border:4px solid #091017;border-radius:20px;color:white;min-height:86px;font-weight:1000;font-size:clamp(22px,2.5vw,38px);letter-spacing:.04em;text-shadow:0 2px 2px #0008;box-shadow:inset 0 2px 0 #ffffff66,inset 0 -7px 12px #0008,0 5px 0 #05070a,0 10px 18px #000a;cursor:pointer}.hardware-btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 #ffffff33,inset 0 -4px 8px #0008,0 2px 0 #05070a,0 5px 10px #000a}.hardware-btn.blue{grid-area:pause;background:linear-gradient(#2899ff,#0754ad)}.hardware-btn.green{grid-area:go;background:linear-gradient(#35d24d,#087c1b)}.hardware-btn.amber{grid-area:fade;background:linear-gradient(#ffb21b,#bb5d00)}.hardware-btn.purple{grid-area:back;background:linear-gradient(#a05bec,#4c1a7e)}.hardware-btn.cyan{grid-area:forward;background:linear-gradient(#25cbe8,#08778e)}.hardware-btn.red{grid-area:stop;background:linear-gradient(#ff3939,#9e0909)}.hardware-btn.slate{background:linear-gradient(#566274,#232a35)}.volume-btn:first-of-type{grid-area:voldown}.mute-btn{grid-area:mute}.volume-btn:nth-of-type(8){grid-area:volup}.mute-btn.muted{background:linear-gradient(#d04a4a,#791616);box-shadow:inset 0 2px 0 #ffffff66,inset 0 -7px 12px #0008,0 5px 0 #05070a,0 0 20px #ff393966}.stage-volume-readout{grid-area:volread;text-align:center;color:#d9e0ea;font-size:clamp(18px,2vw,28px);font-weight:950;letter-spacing:.08em;padding:2px 0 0}.cue-volume-editor{display:grid;grid-template-columns:1fr 70px;gap:12px;align-items:center}.cue-volume-editor strong{text-align:right;color:#82dbff}.dialog label small{font-weight:500;color:#8f9caf}.hardware-btn.hero{font-size:clamp(48px,6vw,88px);min-height:112px}.hardware-btn.wide{grid-area:stop}.button-icon{margin-right:12px}.button-icon.trailing{margin-right:0;margin-left:12px}.footerbar{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;color:#b5becb;border-top:1px solid #2a313d;background:#0b0f15;border-radius:12px}.volume-control{display:flex;gap:10px;align-items:center;color:#c06bff;font-weight:800}.dialog{width:min(760px,92vw);max-height:85vh;color:white;background:#111722;border:1px solid #3b4656;border-radius:18px;box-shadow:0 24px 80px #000;padding:0}.wide-dialog{width:min(900px,94vw)}.dialog::backdrop{background:#000b}.dialog form{padding:18px}.dialog-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #35404f}.dialog-help{color:#aeb8c6}.edit-cue-list,.library-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}.edit-row,.library-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px;border:1px solid #334050;border-radius:10px;background:#18202b}.drag-handle{cursor:grab;color:#9da8b6;font-size:22px}.dialog label:not(.drop-zone){display:grid;gap:6px;margin:12px 0;color:#c7d0dd;font-weight:750}.dialog input,.dialog select,.dialog textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #445168;background:#0b1017;color:white}.dialog-actions{display:flex;justify-content:flex-end;margin-top:16px}.hardware-btn.compact{min-height:52px;padding:0 22px;font-size:18px}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;border:2px dashed #7650a5;border-radius:16px;background:#1a1224;color:#d4a7ff;cursor:pointer;margin:16px 0}.drop-zone.dragover{background:#29193a;border-color:#c16cff}.library-row button,.edit-row button{padding:7px 10px}.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(120px);background:#171e28;border:1px solid #49586d;color:white;padding:12px 18px;border-radius:10px;transition:.25s;z-index:20}.toast.show{transform:translateX(-50%) translateY(0)}body.stage-mode .sidebar,body.stage-mode .show-tabs,body.stage-mode .footerbar{display:none}body.stage-mode .app-shell{grid-template-rows:auto 1fr}body.stage-mode .workspace{grid-template-columns:1fr}body.stage-mode .topbar{padding:4px 12px}body.stage-mode .main-panel{grid-template-rows:minmax(0,1.05fr) minmax(0,.65fr) auto}body.stage-mode .cue-card h1{font-size:clamp(60px,8vw,130px)}body.stage-mode .cue-card h2{font-size:clamp(48px,7vw,105px)}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.sidebar{display:none}.transport-panel{grid-template-columns:1fr 1fr;grid-template-areas:"go go" "pause fade" "back forward" "stop stop" "voldown volup" "mute mute" "volread volread"}.show-tab{padding:10px 14px;font-size:14px}}
/* v1.2 editable shows */
:root{--active-show:#a546ff}.show-tabs{overflow-x:auto;scrollbar-width:thin}.show-tab{white-space:nowrap}.show-tab.active{background:linear-gradient(color-mix(in srgb,var(--show-accent) 78%,#fff 8%),color-mix(in srgb,var(--show-accent) 60%,#000 30%));border-color:var(--show-accent);box-shadow:inset 0 2px 4px #ffffff40,0 0 16px color-mix(in srgb,var(--show-accent) 55%,transparent)}.add-show-tab{min-width:58px;padding-inline:18px;font-size:26px}.cue-row.active{background:linear-gradient(90deg,color-mix(in srgb,var(--active-show) 72%,#111),color-mix(in srgb,var(--active-show) 35%,#111));border-color:var(--active-show);box-shadow:0 0 14px color-mix(in srgb,var(--active-show) 55%,transparent)}.progress-bar{background:linear-gradient(90deg,color-mix(in srgb,var(--active-show) 80%,#111),color-mix(in srgb,var(--active-show) 70%,#fff));box-shadow:0 0 18px var(--active-show)}.show-manager-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto}.show-manager-row{display:grid;grid-template-columns:minmax(220px,1fr) repeat(4,auto);gap:8px;align-items:center;padding:12px;border:1px solid #334050;border-left:6px solid var(--row-accent);border-radius:12px;background:#18202b}.show-manager-row.selected{box-shadow:0 0 14px color-mix(in srgb,var(--row-accent) 45%,transparent)}.show-identity{display:flex;gap:12px;align-items:center}.show-identity small{display:block;color:#9eabbc;margin-top:4px}.show-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:12px;background:#0c1118;font-size:26px;border:1px solid #3a4657}.danger{border-color:#7b3030;color:#ffaaaa}.split-actions{justify-content:space-between}.empty-state{padding:28px 14px;text-align:center;color:#9ca7b7;line-height:1.6}.dialog input[type="color"]{height:48px;padding:4px}.top-actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:1050px){.show-manager-row{grid-template-columns:1fr 1fr 1fr}.show-identity{grid-column:1/-1}.show-manager-row .delete{grid-column:auto}.topbar{align-items:flex-start}.status-pill{display:none}}

/* v1.5 portable backup */
.backup-panel{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:16px;padding:14px;border:1px solid #3e4c60;border-radius:12px;background:linear-gradient(145deg,#1b2431,#10161f)}
.backup-panel strong{color:#f0c767;letter-spacing:.06em}.backup-panel p{margin:5px 0 0;color:#aeb8c6;font-size:13px}.backup-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.backup-actions .metal-btn{white-space:nowrap}
@media(max-width:760px){.backup-panel{align-items:stretch;flex-direction:column}.backup-actions{justify-content:stretch}.backup-actions .metal-btn{flex:1}}

#volumeDownBtn{grid-area:voldown}#muteBtn{grid-area:mute}#volumeUpBtn{grid-area:volup}

/* v1.8 compact Stage View for laptop-height displays */
@media (max-height: 940px) and (min-width: 901px){
  body.stage-mode .app-shell{gap:6px;padding:8px 10px}
  body.stage-mode .topbar{padding:2px 10px;min-height:48px}
  body.stage-mode .brand{font-size:clamp(22px,2.4vw,34px)}
  body.stage-mode .top-actions{gap:8px}
  body.stage-mode .metal-btn.small{padding:7px 11px;font-size:13px}
  body.stage-mode .main-panel{grid-template-rows:minmax(0,.95fr) minmax(0,.55fr) auto;gap:7px}
  body.stage-mode .cue-card{padding:8px 14px}
  body.stage-mode .eyebrow{font-size:clamp(15px,1.5vw,22px)}
  body.stage-mode .cue-card h1{font-size:clamp(46px,6.6vw,88px);margin:8px 0 6px}
  body.stage-mode .cue-card h2{font-size:clamp(36px,5.5vw,70px);margin:7px 0}
  body.stage-mode .status-text{font-size:clamp(15px,1.6vw,22px)}
  body.stage-mode .progress-shell{height:20px;margin-top:8px}
  body.stage-mode .time-row{margin-top:2px;font-size:13px}
  body.stage-mode .ready-message{font-size:clamp(16px,1.7vw,24px)}
  body.stage-mode .transport-panel{
    grid-template-columns:1fr 1fr 1.35fr 1fr 1fr;
    grid-template-areas:
      "pause go go fade stop"
      "back forward voldown mute volup"
      "volread volread volread volread volread";
    gap:7px;padding:8px 10px;
  }
  body.stage-mode .hardware-btn{min-height:58px;border-width:3px;border-radius:15px;font-size:clamp(16px,1.7vw,25px);box-shadow:inset 0 2px 0 #ffffff66,inset 0 -5px 9px #0008,0 3px 0 #05070a,0 6px 12px #000a}
  body.stage-mode .hardware-btn.hero{min-height:72px;font-size:clamp(38px,4.3vw,60px)}
  body.stage-mode .button-icon{margin-right:7px}
  body.stage-mode .stage-volume-readout{font-size:15px;padding:0;line-height:1.1}
}

@media (max-height: 760px) and (min-width: 901px){
  body.stage-mode .topbar{min-height:40px}
  body.stage-mode .brand{font-size:22px}
  body.stage-mode .cue-card h1{font-size:clamp(38px,5.6vw,72px)}
  body.stage-mode .cue-card h2{font-size:clamp(30px,4.6vw,56px)}
  body.stage-mode .progress-shell{height:16px;margin-top:5px}
  body.stage-mode .transport-panel{gap:5px;padding:6px 8px}
  body.stage-mode .hardware-btn{min-height:50px;font-size:clamp(14px,1.45vw,21px)}
  body.stage-mode .hardware-btn.hero{min-height:62px;font-size:clamp(32px,3.8vw,52px)}
}

/* v1.9 Stage View: fit controls to the actual Safari viewport, including 1728x1117 MacBook Pro scaling */
body.stage-mode{height:100dvh;max-height:100dvh;overflow:hidden}
body.stage-mode .app-shell{
  height:100dvh;
  max-height:100dvh;
  min-height:0;
  overflow:hidden;
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(4px,.7vh,8px);
  padding:clamp(6px,.8vh,10px);
}
body.stage-mode .workspace,
body.stage-mode .main-panel{min-height:0;overflow:hidden}
body.stage-mode .topbar{
  min-height:0;
  padding:clamp(2px,.4vh,5px) 10px;
}
body.stage-mode .brand{font-size:clamp(22px,2.15vw,34px)}
body.stage-mode .top-actions{gap:7px}
body.stage-mode .metal-btn.small{padding:6px 10px;font-size:13px}
body.stage-mode .main-panel{
  height:100%;
  grid-template-rows:minmax(0,1fr) minmax(0,.58fr) auto;
  gap:clamp(4px,.65vh,8px);
}
body.stage-mode .cue-card{padding:clamp(5px,.8vh,10px) 14px;overflow:hidden}
body.stage-mode .eyebrow{font-size:clamp(14px,1.25vw,21px)}
body.stage-mode .cue-card h1{
  font-size:clamp(42px,min(6vw,7.4vh),92px);
  line-height:.92;
  margin:clamp(4px,.7vh,8px) 0;
}
body.stage-mode .cue-card h2{
  font-size:clamp(32px,min(5vw,6vh),70px);
  line-height:.94;
  margin:clamp(3px,.6vh,7px) 0;
}
body.stage-mode .status-text{font-size:clamp(15px,min(1.55vw,2.1vh),23px)}
body.stage-mode .progress-shell{height:clamp(14px,1.8vh,20px);margin-top:clamp(4px,.7vh,8px)}
body.stage-mode .time-row{margin-top:2px;font-size:clamp(11px,1.3vh,14px)}
body.stage-mode .ready-message{font-size:clamp(15px,min(1.5vw,2.1vh),24px)}
body.stage-mode .transport-panel{
  grid-template-columns:1fr 1fr 1.35fr 1fr 1fr;
  grid-template-areas:
    "pause go go fade stop"
    "back forward voldown mute volup"
    "volread volread volread volread volread";
  gap:clamp(4px,.65vh,7px);
  padding:clamp(5px,.75vh,8px) 9px;
  flex-shrink:0;
}
body.stage-mode .hardware-btn{
  min-height:clamp(46px,6.1vh,64px);
  max-height:64px;
  border-width:3px;
  border-radius:14px;
  font-size:clamp(14px,min(1.45vw,2.05vh),23px);
  box-shadow:inset 0 2px 0 #ffffff66,inset 0 -5px 9px #0008,0 3px 0 #05070a,0 5px 10px #000a;
}
body.stage-mode .hardware-btn.hero{
  min-height:clamp(54px,7.4vh,76px);
  max-height:76px;
  font-size:clamp(32px,min(4vw,5.6vh),58px);
}
body.stage-mode .button-icon{margin-right:6px}
body.stage-mode .stage-volume-readout{
  font-size:clamp(12px,1.55vh,16px);
  line-height:1;
  padding:0;
  min-height:14px;
}

/* Extra safeguard for Safari windows with unusually short usable height. */
@media (max-height: 850px){
  body.stage-mode .brand{font-size:20px}
  body.stage-mode .status-pill{display:none}
  body.stage-mode .cue-card h1{font-size:clamp(34px,min(5vw,6.3vh),68px)}
  body.stage-mode .cue-card h2{font-size:clamp(28px,min(4.3vw,5vh),52px)}
  body.stage-mode .hardware-btn{min-height:42px;max-height:48px}
  body.stage-mode .hardware-btn.hero{min-height:50px;max-height:58px}
}

/* v2.0 rebrandable app identity */
:root{--brand-accent:#d5ad4f;--brand-text:#f5e6b3}
.brand-display{min-width:0;gap:10px}
.brand-display .diamond{color:var(--brand-accent)}
.brand-logo{display:block;max-width:min(720px,64vw);height:clamp(68px,9.2vw,116px);object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 5px #0008)}
.brand-display.logo-only .diamond,.brand-display.logo-only #brandText{display:none}
.brand-display.text-only .brand-logo{display:none!important}
.brand-display.both .diamond{display:none}
.brand-display.logo-only{min-height:96px}
.branding-dialog{width:min(720px,94vw)}
.branding-logo-panel{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:16px;align-items:center;margin:16px 0;padding:14px;border:1px solid #3e4c60;border-radius:14px;background:#10161f}
.branding-logo-preview{display:grid;place-items:center;min-height:120px;border-radius:12px;border:1px dashed #516075;background:#090d13;overflow:hidden;color:#748196;font-weight:800;letter-spacing:.08em}
.branding-logo-preview img{max-width:100%;max-height:130px;object-fit:contain;padding:10px}
.branding-logo-actions{display:flex;flex-direction:column;gap:9px;align-items:flex-start}.branding-logo-actions small{color:#9ca8b7;line-height:1.35}
.branding-logo-actions .metal-btn{width:100%}
body.stage-mode .brand-logo{height:clamp(60px,8.6vh,96px);max-width:min(660px,60vw)}
@media(max-width:760px){.branding-logo-panel{grid-template-columns:1fr}.brand-logo{max-width:72vw;height:clamp(54px,12vw,92px)}.brand-display #brandText{font-size:clamp(16px,4vw,26px)}}

.brand-display #brandText{color:var(--brand-text)}

/* v2.3 branding balance + edit-screen viewport fit */
.brand-display{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  max-width:min(900px,62vw);
  overflow:hidden;
}
.brand-display .brand-logo{flex:0 1 auto}
.brand-display #brandText{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-display.both{gap:18px}
.brand-display.both #brandText{
  font-size:clamp(18px,1.55vw,28px);
  line-height:1.05;
  letter-spacing:.035em;
  text-shadow:0 2px 0 #0008,0 0 12px color-mix(in srgb,var(--brand-text) 28%,transparent);
}
.brand-display.both .brand-logo{
  max-width:min(520px,38vw);
  height:clamp(72px,7.4vw,110px);
}
.topbar{min-width:0;gap:16px}
.top-actions{flex:0 0 auto}
.workspace,.main-panel{min-height:0}
.main-panel{overflow:hidden}

/* Keep the full edit/normal screen inside the actual browser viewport. */
@media (max-height:1200px) and (min-width:901px){
  body:not(.stage-mode) .app-shell{gap:7px;padding:9px 11px}
  body:not(.stage-mode) .topbar{padding:4px 12px}
  body:not(.stage-mode) .show-tab{padding:10px 20px;font-size:16px}
  body:not(.stage-mode) .main-panel{grid-template-rows:minmax(0,1fr) minmax(0,.58fr) auto;gap:8px}
  body:not(.stage-mode) .cue-card{padding:10px 14px}
  body:not(.stage-mode) .cue-card h1{font-size:clamp(34px,4.6vw,70px);margin:10px 0 7px}
  body:not(.stage-mode) .cue-card h2{font-size:clamp(28px,3.8vw,54px);margin:8px 0}
  body:not(.stage-mode) .eyebrow{font-size:clamp(15px,1.45vw,22px)}
  body:not(.stage-mode) .status-text{font-size:clamp(15px,1.45vw,22px)}
  body:not(.stage-mode) .progress-shell{height:22px;margin-top:10px}
  body:not(.stage-mode) .transport-panel{gap:7px;padding:8px}
  body:not(.stage-mode) .hardware-btn{min-height:55px;border-radius:15px;border-width:3px;font-size:clamp(16px,1.55vw,24px)}
  body:not(.stage-mode) .hardware-btn.hero{min-height:68px;font-size:clamp(34px,4vw,58px)}
  body:not(.stage-mode) .stage-volume-readout{font-size:16px;padding:0}
  body:not(.stage-mode) .footerbar{padding:5px 14px;font-size:13px}
  body:not(.stage-mode) .brand-display.both .brand-logo{height:clamp(64px,6.2vw,92px);max-width:min(460px,34vw)}
  body:not(.stage-mode) .brand-display.both #brandText{font-size:clamp(17px,1.35vw,24px)}
}

@media (max-width:1250px){
  .brand-display{max-width:48vw}
  .brand-display.both{gap:10px}
  .brand-display.both .brand-logo{max-width:30vw;height:clamp(58px,6vw,84px)}
  .brand-display.both #brandText{font-size:clamp(15px,1.5vw,22px)}
}

/* v2.4 scalable show navigation: scrollable tabs + All Shows jump menu */
.show-tabs-shell{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  gap:8px;
  align-items:center;
  padding:0 14px;
  min-width:0;
}
.show-tabs-shell .show-tabs{
  padding:0;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.show-tabs-shell .show-tabs::-webkit-scrollbar{display:none}
.tab-scroll-btn{
  width:42px;height:48px;border-radius:11px;border:1px solid #3a4657;
  color:#e8edf5;background:linear-gradient(#29313d,#11161d);
  font-size:30px;font-weight:900;line-height:1;cursor:pointer;
  box-shadow:inset 0 1px #ffffff22,0 4px 8px #0008;
  opacity:.42;
}
.tab-scroll-btn.needed{opacity:1}
.tab-scroll-btn:disabled{opacity:.22;cursor:default}
.all-shows-picker{
  display:grid;grid-template-columns:auto minmax(145px,220px);gap:8px;align-items:center;
  padding:6px 8px 6px 12px;border:1px solid #3a4657;border-radius:11px;
  background:linear-gradient(#202630,#10141a);box-shadow:inset 0 1px #ffffff1a,0 4px 10px #0008;
  color:#9fabbb;font-size:11px;font-weight:950;letter-spacing:.08em;white-space:nowrap;
}
.all-shows-picker select{
  min-width:0;max-width:220px;border:0;outline:0;background:#0c1118;color:#f4f7fb;
  border-radius:8px;padding:8px 30px 8px 10px;font-weight:850;font-size:14px;
}
.fixed-add-show{min-width:52px;padding:8px 15px;height:48px}
body.stage-mode .show-tabs-shell{display:none}
@media(max-width:1200px){
  .all-shows-picker{grid-template-columns:1fr;padding:5px 7px}.all-shows-picker span{display:none}
  .all-shows-picker select{max-width:170px}
}
@media(max-width:900px){
  .show-tabs-shell{grid-template-columns:auto minmax(0,1fr) auto auto;padding:0 8px}
  .all-shows-picker{grid-column:1/-1;grid-row:2;width:100%}
  .all-shows-picker select{max-width:none;width:100%}
}

/* v2.5 live current-time display */
.live-clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:126px;padding:6px 12px;border-radius:12px;border:1px solid #3a4657;background:linear-gradient(#171e28,#0b1017);box-shadow:inset 0 1px #ffffff18,0 3px 9px #0007;color:#eaf2ff;line-height:1.05}
.live-clock-label{font-size:10px;font-weight:900;letter-spacing:.12em;color:#8fa2b8}
.live-clock strong{font-size:clamp(22px,2vw,32px);font-variant-numeric:tabular-nums;letter-spacing:.03em;text-shadow:0 0 12px #4fb8ff55}
body.stage-mode .live-clock{min-width:190px;padding:6px 16px;border-color:#4b6076;background:linear-gradient(#1a2430,#090f16);box-shadow:inset 0 1px #ffffff22,0 0 16px #3aa9ff33}
body.stage-mode .live-clock-label{font-size:clamp(10px,1.1vw,15px)}
body.stage-mode .live-clock strong{font-size:clamp(30px,min(3.3vw,4.2vh),48px)}
@media (max-height:820px){body.stage-mode .live-clock{min-width:150px;padding:4px 10px}body.stage-mode .live-clock strong{font-size:clamp(25px,3vh,36px)}body.stage-mode .live-clock-label{font-size:9px}}
\n\n/* v2.6 compact control menu + expanded clock */\n.topbar{position:relative}\n.top-actions{flex:1 1 420px;min-width:280px;display:flex;align-items:center;justify-content:flex-end;gap:10px}\n.live-clock{flex:1 1 320px;max-width:640px;min-width:240px;align-items:center;text-align:center;padding-inline:22px}\n.live-clock-label{width:100%;text-align:center}\n.live-clock strong{width:100%;text-align:center;font-size:clamp(28px,2.8vw,44px)}\n.control-menu{position:relative;flex:0 0 auto}\n.control-menu summary{list-style:none;user-select:none;white-space:nowrap}\n.control-menu summary::-webkit-details-marker{display:none}\n.control-menu-summary{display:flex;align-items:center;gap:8px;cursor:pointer}\n.control-menu[open] .control-menu-summary{border-color:#6a7b92;box-shadow:inset 0 1px #ffffff2c,0 0 14px #4aa8ff33}\n.control-menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;display:grid;gap:8px;min-width:230px;padding:10px;border:1px solid #3a4657;border-radius:13px;background:linear-gradient(#171e28,#0a0f16);box-shadow:0 18px 42px #000c,inset 0 1px #ffffff16}\n.control-menu-panel .status-pill{border-radius:10px;text-align:center;padding:10px 12px;white-space:nowrap}\n.control-menu-panel .metal-btn{width:100%;text-align:left}\nbody.stage-mode .top-actions{flex:1 1 auto}\nbody.stage-mode .live-clock{max-width:none;min-width:300px;flex:1 1 auto;padding-inline:28px}\nbody.stage-mode .live-clock strong{font-size:clamp(36px,min(4.2vw,5.3vh),62px)}\nbody.stage-mode .control-menu-panel{min-width:250px}\n@media (max-width:1180px){\n  .topbar{gap:10px}\n  .brand-display{max-width:46vw}\n  .top-actions{min-width:250px}\n  .live-clock{min-width:200px;padding-inline:14px}\n  .live-clock strong{font-size:clamp(24px,2.5vw,36px)}\n}\n@media (max-width:900px){\n  .topbar{flex-wrap:wrap}\n  .brand-display{max-width:100%;width:100%}\n  .top-actions{width:100%;flex-basis:100%}\n  .live-clock{max-width:none}\n}\n
/* v2.7 oversized performance clock */
.topbar{
  display:grid;
  grid-template-columns:minmax(180px,30vw) minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.brand-display{
  min-width:0;
  max-width:30vw;
  overflow:hidden;
}
.brand-display.both .brand-logo{max-width:min(320px,18vw);height:clamp(48px,5.4vw,78px)}
.brand-display.both #brandText{font-size:clamp(14px,1.05vw,20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{
  min-width:0;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.live-clock{
  width:100%;
  max-width:none;
  min-width:0;
  padding:8px 28px;
  min-height:82px;
  align-items:center;
  text-align:center;
}
.live-clock-label{font-size:clamp(11px,.9vw,15px)}
.live-clock strong{
  font-size:clamp(46px,5vw,78px);
  line-height:.92;
  letter-spacing:.025em;
}
body.stage-mode .topbar{
  grid-template-columns:minmax(150px,24vw) minmax(0,1fr);
}
body.stage-mode .brand-display{max-width:24vw}
body.stage-mode .brand-display.both .brand-logo{max-width:min(260px,15vw);height:clamp(42px,5vh,64px)}
body.stage-mode .brand-display.both #brandText{font-size:clamp(12px,.9vw,17px)}
body.stage-mode .top-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0}
body.stage-mode .live-clock{
  width:100%;
  max-width:none;
  min-width:0;
  min-height:88px;
  padding:6px 30px;
}
body.stage-mode .live-clock strong{
  font-size:clamp(54px,min(6.2vw,8vh),92px);
  line-height:.9;
}
body.stage-mode .live-clock-label{font-size:clamp(11px,1vw,16px)}
@media (max-height:900px){
  .live-clock{min-height:68px;padding-block:5px}
  .live-clock strong{font-size:clamp(40px,4.3vw,66px)}
  body.stage-mode .live-clock{min-height:70px;padding-block:4px}
  body.stage-mode .live-clock strong{font-size:clamp(46px,min(5.5vw,6.8vh),78px)}
}
@media (max-width:1180px){
  .topbar{grid-template-columns:minmax(150px,26vw) minmax(0,1fr)}
  .brand-display{max-width:26vw}
  .live-clock strong{font-size:clamp(38px,4.4vw,62px)}
}
@media (max-width:900px){
  .topbar{grid-template-columns:1fr;gap:7px}
  .brand-display{max-width:100%;width:100%}
  .top-actions{width:100%}
  .live-clock{min-height:64px}
}

/* v2.8 restore full branding footprint while keeping oversized clock */
.topbar{
  grid-template-columns:minmax(420px,44vw) minmax(0,1fr);
  gap:14px;
}
.brand-display{
  max-width:44vw;
  overflow:visible;
}
.brand-display.both .brand-logo{
  max-width:min(460px,34vw);
  height:clamp(64px,6.2vw,92px);
}
.brand-display.both #brandText{
  font-size:clamp(17px,1.35vw,24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-clock{
  min-height:94px;
  padding:8px 20px;
}
.live-clock strong{
  font-size:clamp(52px,5.2vw,82px);
  line-height:.9;
}
body.stage-mode .topbar{
  grid-template-columns:minmax(390px,40vw) minmax(0,1fr);
}
body.stage-mode .brand-display{
  max-width:40vw;
}
body.stage-mode .brand-display.both .brand-logo{
  max-width:min(430px,31vw);
  height:clamp(60px,7.5vh,88px);
}
body.stage-mode .brand-display.both #brandText{
  font-size:clamp(16px,1.2vw,22px);
}
body.stage-mode .live-clock{
  min-height:100px;
  padding:6px 20px;
}
body.stage-mode .live-clock strong{
  font-size:clamp(58px,min(5.8vw,8vh),88px);
}
@media (max-height:900px){
  .live-clock{min-height:76px;padding-block:4px}
  .live-clock strong{font-size:clamp(44px,4.6vw,68px)}
  body.stage-mode .live-clock{min-height:80px;padding-block:3px}
  body.stage-mode .live-clock strong{font-size:clamp(50px,min(5.2vw,6.7vh),76px)}
}
@media (max-width:1180px){
  .topbar{grid-template-columns:minmax(340px,42vw) minmax(0,1fr)}
  .brand-display{max-width:42vw}
  .brand-display.both .brand-logo{max-width:min(390px,30vw);height:clamp(56px,6vw,82px)}
  .live-clock strong{font-size:clamp(42px,4.5vw,66px)}
}
@media (max-width:900px){
  .topbar{grid-template-columns:1fr;gap:7px}
  .brand-display{max-width:100%;width:100%}
  .top-actions{width:100%}
}

/* v2.9: guarantee full Logo + Text branding visibility without sacrificing the clock */
@media (min-width:901px){
  .topbar{
    grid-template-columns:minmax(700px,48vw) minmax(0,1fr);
    gap:14px;
  }
  .brand-display{
    width:100%;
    max-width:none;
    min-width:0;
    overflow:visible;
  }
  .brand-display.both{
    display:grid;
    grid-template-columns:minmax(260px,46%) minmax(0,54%);
    align-items:center;
    gap:18px;
  }
  .brand-display.both .brand-logo{
    width:100%;
    max-width:100%;
    height:clamp(64px,6.2vw,92px);
    object-fit:contain;
    object-position:left center;
    min-width:0;
  }
  .brand-display.both #brandText{
    display:block;
    width:100%;
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    font-size:clamp(17px,1.32vw,23px);
    line-height:1.06;
    text-align:left;
  }
  .brand-display.text-only #brandText{
    overflow:visible;
    white-space:normal;
  }
  .top-actions{min-width:0}
  .live-clock{min-width:0}

  body.stage-mode .topbar{
    grid-template-columns:minmax(640px,45vw) minmax(0,1fr);
  }
  body.stage-mode .brand-display{max-width:none;width:100%}
  body.stage-mode .brand-display.both{
    grid-template-columns:minmax(240px,45%) minmax(0,55%);
    gap:16px;
  }
  body.stage-mode .brand-display.both .brand-logo{
    max-width:100%;
    height:clamp(58px,7vh,84px);
  }
  body.stage-mode .brand-display.both #brandText{
    font-size:clamp(15px,1.15vw,21px);
    overflow:visible;
    white-space:normal;
  }
}

@media (min-width:901px) and (max-width:1450px){
  .topbar{grid-template-columns:minmax(600px,50vw) minmax(0,1fr)}
  .brand-display.both{grid-template-columns:minmax(220px,43%) minmax(0,57%)}
  .brand-display.both #brandText{font-size:clamp(15px,1.25vw,20px)}
  body.stage-mode .topbar{grid-template-columns:minmax(560px,48vw) minmax(0,1fr)}
}

/* v3.0: strict non-overlapping header columns: Branding | Clock | Controls */
@media (min-width:901px){
  .topbar{
    display:grid !important;
    grid-template-columns:minmax(620px,680px) minmax(360px,1fr) auto !important;
    align-items:center !important;
    column-gap:16px !important;
    overflow:visible;
  }
  .brand-display{
    grid-column:1;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    overflow:hidden !important;
    position:relative;
    z-index:2;
  }
  .brand-display.both{
    display:grid !important;
    grid-template-columns:minmax(300px,360px) minmax(220px,1fr) !important;
    gap:18px !important;
    align-items:center !important;
  }
  .brand-display.both .brand-logo{
    width:100% !important;
    max-width:360px !important;
    height:clamp(68px,6vw,96px) !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .brand-display.both #brandText{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    color:var(--brand-text) !important;
    font-size:clamp(17px,1.28vw,23px) !important;
    line-height:1.08 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    text-align:left !important;
  }
  .top-actions{
    display:contents !important;
  }
  .live-clock{
    grid-column:2;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:92px;
    position:relative;
    z-index:1;
    box-sizing:border-box;
  }
  .control-menu{
    grid-column:3;
    justify-self:end;
    position:relative;
    z-index:5;
  }
  body.stage-mode .topbar{
    grid-template-columns:minmax(580px,640px) minmax(340px,1fr) auto !important;
  }
  body.stage-mode .brand-display.both{
    grid-template-columns:minmax(280px,340px) minmax(210px,1fr) !important;
  }
  body.stage-mode .brand-display.both .brand-logo{
    max-width:340px !important;
    height:clamp(62px,7vh,90px) !important;
  }
  body.stage-mode .brand-display.both #brandText{
    font-size:clamp(16px,1.16vw,21px) !important;
  }
  body.stage-mode .live-clock{min-height:96px}
}

@media (min-width:901px) and (max-width:1500px){
  .topbar{
    grid-template-columns:minmax(540px,590px) minmax(300px,1fr) auto !important;
  }
  .brand-display.both{
    grid-template-columns:minmax(250px,300px) minmax(200px,1fr) !important;
    gap:14px !important;
  }
  .brand-display.both .brand-logo{max-width:300px !important;height:clamp(60px,5.6vw,84px) !important}
  .brand-display.both #brandText{font-size:clamp(15px,1.2vw,20px) !important}
  body.stage-mode .topbar{
    grid-template-columns:minmax(520px,565px) minmax(290px,1fr) auto !important;
  }
}

.confirm-dialog{width:min(560px,90vw)}.confirm-message{font-size:18px;line-height:1.5;padding:12px 2px}.confirm-actions{gap:12px}.confirm-actions .hardware-btn.red{grid-area:auto}.confirm-actions button{min-width:145px}


/* v1.7 Safety & Reliability */
.performance-lock-banner{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:120;background:#151b22;border:2px solid #e0b33f;border-radius:999px;padding:8px 18px;color:#ffe49a;font-weight:950;letter-spacing:.05em;box-shadow:0 8px 24px #000b,0 0 16px #e0b33f44;pointer-events:none}
body.performance-locked #editModeBtn,body.performance-locked #addCueBtn,body.performance-locked #libraryBtn,body.performance-locked #quickAddShowBtn{opacity:.35;filter:grayscale(.6)}
.backup-status{grid-column:1/-1;padding:8px 10px;border-radius:9px;background:#0b1118;border:1px solid #2f3c4b;color:#aebdce;font-size:12px;line-height:1.35}
.cue-secondary-actions{display:flex;gap:8px;flex-wrap:wrap}
.status-pill.warning{border-color:#86651d!important;color:#ffd978!important;background:#2b210d!important}
.status-pill.error{border-color:#8d3030!important;color:#ffaaaa!important;background:#2d1010!important}
body.performance-locked .control-menu-panel #showManagerBtn,body.performance-locked .control-menu-panel #brandingBtn{opacity:.4}

/* v1.7.1 — Stage View uses a small lock icon only */
body.stage-mode .performance-lock-banner{
  top:auto;
  right:12px;
  bottom:12px;
  left:auto;
  transform:none;
  width:30px;
  height:30px;
  padding:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-width:1px;
  border-radius:8px;
  box-shadow:0 4px 12px #0009,0 0 8px #e0b33f2e;
  opacity:.88;
  font-size:0;
  letter-spacing:0;
}
body.stage-mode .performance-lock-banner::before{
  content:'🔒';
  font-size:18px;
  line-height:1;
}


/* v1.7.2 — force compact lock badge in Stage View */
body.stage-mode #performanceLockBanner.stage-lock-compact{
  position:fixed !important;
  top:auto !important;
  right:12px !important;
  bottom:12px !important;
  left:auto !important;
  transform:none !important;
  width:32px !important;
  height:32px !important;
  min-width:0 !important;
  max-width:32px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  border:1px solid #e0b33f !important;
  border-radius:8px !important;
  box-shadow:0 4px 12px #0009,0 0 8px #e0b33f2e !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  color:#ffe49a !important;
}
body.stage-mode #performanceLockBanner.stage-lock-compact::before{content:none !important;}


/* v1.7.3 Stage View: lock icon directly to the left of clock; no CURRENT TIME label */
.stage-lock-icon{display:none}
body.stage-mode .live-clock{flex-direction:row;align-items:center;justify-content:center;gap:18px}
body.stage-mode .live-clock-label{display:none!important}
body.stage-mode .stage-lock-icon:not([hidden]){display:inline-flex;align-items:center;justify-content:center;font-size:clamp(32px,min(3.6vw,4.8vh),58px);line-height:1;flex:0 0 auto;filter:drop-shadow(0 0 9px rgba(255,210,80,.32))}
body.stage-mode .live-clock strong{width:auto;flex:0 0 auto;text-align:center}


/* v1.7.4 — definitive Stage View lock/clock layout */
body.stage-mode #performanceLockBanner{display:none !important;}
body.stage-mode .live-clock{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:16px !important;}
body.stage-mode .live-clock-label{display:none !important;}
body.stage-mode #stageLockIcon[hidden]{display:none !important;}
body.stage-mode #stageLockIcon:not([hidden]){display:inline-flex !important;align-items:center !important;justify-content:center !important;font-size:clamp(34px,min(3.8vw,5vh),60px) !important;line-height:1 !important;flex:0 0 auto !important;}
body.stage-mode #liveClockTime{width:auto !important;flex:0 0 auto !important;text-align:center !important;}


/* v1.7.5 direct Stage header safeguard */
body.stage-mode #performanceLockBanner{display:none !important;}
body.stage-mode .live-clock-label{display:none !important;}


/* v1.7.6 — fresh asset filename prevents WebKit cache reuse. */
body.stage-mode #performanceLockBanner{display:none !important;visibility:hidden !important;}
body.stage-mode .live-clock-label{display:none !important;visibility:hidden !important;}
body.stage-mode #liveClock{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:18px !important;}
body.stage-mode #stageLockIcon:not([hidden]){display:inline-flex !important;visibility:visible !important;align-items:center !important;justify-content:center !important;font-size:clamp(34px,min(3.8vw,5vh),60px) !important;line-height:1 !important;flex:0 0 auto !important;}
body.stage-mode #stageLockIcon[hidden]{display:none !important;}
body.stage-mode #liveClockTime{display:inline-block !important;width:auto !important;flex:0 0 auto !important;}


/* v1.7.7 structural Stage Lock fix: no large banner element exists. */
#stageLockIcon{display:none}
body.stage-mode #liveClock{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:18px !important;}
body.stage-mode #stageLockIcon:not([hidden]){display:inline-flex !important;align-items:center !important;justify-content:center !important;font-size:clamp(34px,min(3.8vw,5vh),60px) !important;line-height:1 !important;flex:0 0 auto !important;filter:drop-shadow(0 0 9px rgba(255,210,80,.32));}
body.stage-mode #stageLockIcon[hidden]{display:none !important;}
body.stage-mode #liveClockTime{display:inline-block !important;width:auto !important;flex:0 0 auto !important;text-align:center !important;}

/* v1.7.8 — show Performance Lock icon beside the clock in all views */
.live-clock{
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
}
.stage-lock-icon:not([hidden]){
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-size:clamp(22px,2.2vw,34px);
  line-height:1;
  flex:0 0 auto;
  filter:drop-shadow(0 0 7px rgba(255,210,80,.28));
}
.live-clock strong{
  width:auto !important;
  flex:0 0 auto;
  text-align:center;
}
body.stage-mode .stage-lock-icon:not([hidden]){
  font-size:clamp(32px,min(3.6vw,4.8vh),58px);
}


/* Clean distribution first-run onboarding */
.onboarding-dialog{width:min(680px,94vw);border-color:#53657d;background:linear-gradient(160deg,#151d28,#080d13);box-shadow:0 28px 90px #000e,0 0 40px #529cff22}
.onboarding-dialog::backdrop{background:rgba(0,0,0,.84);backdrop-filter:blur(6px)}
.onboarding-dialog form{display:grid;gap:15px;padding:6px}
.onboarding-kicker{font-size:12px;font-weight:950;letter-spacing:.22em;color:#82c9ff;text-align:center}
.onboarding-dialog h2{margin:0;text-align:center;font-size:clamp(28px,4vw,46px);letter-spacing:.055em;color:#f7fbff;text-shadow:0 0 20px #3ba7ff44}
.onboarding-copy{text-align:center;margin:0 auto 4px;max-width:570px;font-size:15px;line-height:1.5}
.onboarding-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.onboarding-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;margin-top:4px}
.onboarding-note{margin:0;text-align:center;color:#8796a9;font-size:12px}
@media(max-width:620px){.onboarding-row,.onboarding-actions{grid-template-columns:1fr}}


/* v1.8 — automatic manual trigger button beneath every enabled cue */
.cue-item{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.cue-item .cue-row{margin:0}
.cue-trigger-btn{width:100%;min-height:48px;border:2px solid #68707b;border-radius:10px;padding:6px 10px;font-size:14px;font-weight:950;letter-spacing:.035em;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff88,0 3px 0 #080b0f,0 5px 10px #0008;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.cue-trigger-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff66,0 1px 0 #080b0f,0 3px 7px #0008}
.cue-trigger-btn.playing{outline:3px solid #55ff73;outline-offset:1px;box-shadow:inset 0 1px 0 #ffffff88,0 3px 0 #080b0f,0 0 16px #55ff7388}
body.performance-locked .cue-trigger-btn{pointer-events:auto}


/* v1.8 refinement — clearer separation between each cue/button pair */
.cue-item{margin-bottom:30px}

/* v1.8 Button Mode — full performance button board above the existing transport controls */
.view-mode-btn{white-space:nowrap}
.button-board{display:none;min-height:0;overflow:auto;padding:14px;align-content:start}
body.button-view .workspace{grid-template-columns:1fr;min-height:0}
body.button-view .sidebar{display:none}
body.button-view .current-card,
body.button-view .next-card{display:none}
body.button-view .button-board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  grid-auto-rows:minmax(82px,auto);
  gap:12px;
}
body.button-view .main-panel{
  min-height:0;
  grid-template-rows:minmax(0,1fr) auto;
}
.manual-board-btn{
  width:100%;
  min-width:0;
  min-height:82px;
  border:3px solid #68707b;
  border-radius:14px;
  padding:10px 12px;
  font-size:clamp(17px,1.55vw,25px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:.02em;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:inset 0 2px 0 #ffffff88,inset 0 -4px 7px #0004,0 4px 0 #07090d,0 7px 14px #0008;
}
.manual-board-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff66,inset 0 -3px 6px #0004,0 2px 0 #07090d,0 4px 9px #0008}
.manual-board-btn.playing{outline:4px solid #55ff73;outline-offset:1px;box-shadow:inset 0 2px 0 #ffffff88,0 4px 0 #07090d,0 0 20px #55ff7399}
.manual-board-btn.sequence-current:not(.playing){outline:3px solid var(--active-show);outline-offset:1px}
.button-board-empty{grid-column:1/-1;align-self:start}
body.performance-locked .manual-board-btn{pointer-events:auto}

/* Button Mode also works in Stage View while keeping the transport controls at the bottom. */
body.stage-mode.button-view .main-panel{grid-template-rows:minmax(0,1fr) auto}
body.stage-mode.button-view .button-board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  grid-auto-rows:minmax(76px,auto);
  gap:clamp(8px,1vh,12px);
  padding:clamp(8px,1vh,12px);
}
body.stage-mode.button-view .manual-board-btn{
  min-height:76px;
  font-size:clamp(16px,min(1.5vw,2.2vh),24px);
}
@media(max-width:900px){
  body.button-view .button-board{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-auto-rows:minmax(72px,auto)}
  .manual-board-btn{min-height:72px;font-size:16px}
}


/* v1.8.2 — reliable Mac pointer-based cue reordering */
.drag-handle{
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  padding:8px 10px;
  margin:-8px -4px -8px -8px;
}
.drag-handle:active,
body.cue-reordering .drag-handle{cursor:grabbing}
.edit-row.pointer-dragging{
  opacity:.82;
  transform:scale(.995);
  border-color:#7aa7d8;
  box-shadow:0 8px 22px #0009, inset 0 0 0 1px #7aa7d855;
  position:relative;
  z-index:5;
}
body.cue-reordering{
  user-select:none;
  -webkit-user-select:none;
}


/* v1.8.3 — free one-motion cue dragging with a placeholder */
.edit-row.reorder-placeholder{
  border:2px dashed #6fa9e8;
  background:#172231;
  box-shadow:inset 0 0 0 2px #6fa9e822;
  min-height:70px;
}
.edit-row.pointer-dragging{
  position:fixed !important;
  margin:0 !important;
  z-index:100000 !important;
  pointer-events:none;
  opacity:.94;
  transform:scale(1.01);
  border-color:#82b7ef;
  box-shadow:0 18px 36px #000c, inset 0 0 0 1px #82b7ef66;
}
body.cue-reordering,
body.cue-reordering *{
  cursor:grabbing !important;
}


/* v1.9 — Saved Show Library, folders, and open-tab workspace */
.show-tab{display:inline-flex;align-items:center;gap:8px}
.show-tab-name{pointer-events:none}
.show-tab-close{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:5px;border-radius:999px;color:#aeb8c6;font-size:18px;line-height:1}
.show-tab-close:hover{background:#ffffff1a;color:#fff}
.show-library-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 14px;padding:11px 12px;border:1px solid #334050;border-radius:12px;background:#0d131b;color:#9eabbc;font-size:13px}
.show-library-toolbar span{line-height:1.4;flex:1 1 260px}
.show-manager-list{gap:14px}
.show-folder-group{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #2f3b4c;border-radius:14px;background:#0c1219}
.show-folder-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 4px 9px;border-bottom:1px solid #293545}
.show-folder-header>div:first-child{display:flex;align-items:center;gap:9px}
.show-folder-header strong{color:#f0c767;letter-spacing:.035em}
.show-folder-header small{color:#7f8da0}
.folder-icon{font-size:21px}
.folder-actions{display:flex;gap:7px}
.folder-actions .metal-btn{padding:7px 9px;font-size:11px}
.folder-empty{padding:13px;color:#758397;text-align:center;font-style:italic}
.show-manager-row{grid-template-columns:minmax(220px,1fr) repeat(6,auto)}
.compact-dialog{width:min(540px,92vw)}
.compact-dialog .dialog-actions{gap:10px;align-items:center}
.compact-dialog .dialog-actions .metal-btn{min-width:110px}
button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:1150px){
  .show-manager-row{grid-template-columns:1fr 1fr 1fr}
  .show-identity{grid-column:1/-1}
  .show-library-toolbar{align-items:stretch;flex-direction:column}
}


/* Diamond Audio Cue Product Branding */

.brand-hero-logo {
    width: min(340px, 55vw);
    margin: 4px auto 6px;
    text-align:center;
    filter:
        drop-shadow(0 0 12px rgba(0,160,255,.35))
        drop-shadow(0 0 25px rgba(0,80,255,.2));
    animation: brandFloat 5s ease-in-out infinite;
}

.brand-hero-logo img {
    width:100%;
    height:auto;
}

@keyframes brandFloat {
    0%,100% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(-8px);
    }
}


/* Compact Performance Layout */

.brand-hero-logo img {
    display:block;
    width:100%;
    height:auto;
}

.brand-hero-logo + * {
    margin-top:0;
}



/* ===== Diamond Audio Cue integrated header ===== */
.brand-hero-logo { display:none !important; }

@media (min-width: 901px) {
  .topbar {
    display:grid !important;
    grid-template-columns:minmax(380px, 1fr) minmax(230px, 300px) minmax(520px, 1.35fr) !important;
    gap:16px !important;
    align-items:center !important;
    padding:6px 14px !important;
  }

  .brand-display {
    grid-column:1 !important;
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
  }

  .dac-product-logo {
    grid-column:2 !important;
    justify-self:center !important;
    width:min(270px, 100%) !important;
    margin:0 !important;
    padding:0 !important;
    filter:drop-shadow(0 0 10px rgba(0,160,255,.28));
  }

  .dac-product-logo img {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:82px !important;
    object-fit:contain !important;
  }

  .top-actions {
    grid-column:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    min-width:0 !important;
  }
}

@media (max-height: 900px) and (min-width: 901px) {
  .topbar {
    padding-top:3px !important;
    padding-bottom:3px !important;
  }

  .dac-product-logo {
    width:min(235px, 100%) !important;
  }

  .dac-product-logo img {
    max-height:68px !important;
  }

  .live-clock {
    min-height:64px !important;
  }

  .live-clock strong {
    font-size:clamp(38px, 4vw, 58px) !important;
  }
}

@media (max-width: 900px) {
  .dac-product-logo {
    width:min(230px, 62vw);
    margin:4px auto;
  }

  .dac-product-logo img {
    display:block;
    width:100%;
    height:auto;
  }
}


/* ===== Diamond Audio Cue header polish =====
   Slightly larger product logo and one-row View / Clock / Controls cluster. */

@media (min-width: 901px) {
  .topbar {
    grid-template-columns:minmax(380px, 1fr) minmax(275px, 330px) minmax(610px, 1.45fr) !important;
    gap:18px !important;
  }

  .dac-product-logo {
    width:min(320px, 100%) !important;
  }

  .dac-product-logo img {
    max-height:92px !important;
  }

  .top-actions {
    display:grid !important;
    grid-template-columns:auto minmax(330px, 1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    justify-content:stretch !important;
  }

  .view-mode-btn {
    position:static !important;
    inset:auto !important;
    transform:none !important;
    margin:0 !important;
    justify-self:start !important;
    align-self:center !important;
    white-space:nowrap !important;
  }

  .live-clock {
    position:static !important;
    inset:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    justify-self:stretch !important;
  }

  .control-menu {
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    margin:0 !important;
    justify-self:end !important;
    align-self:center !important;
  }
}

@media (max-height: 900px) and (min-width: 901px) {
  .dac-product-logo {
    width:min(280px, 100%) !important;
  }

  .dac-product-logo img {
    max-height:78px !important;
  }

  .top-actions {
    grid-template-columns:auto minmax(300px, 1fr) auto !important;
  }
}


/* ===== Equal-size branding boxes =====
   Both the performer/user logo and Diamond Audio Cue logo use the same
   fixed display box. Uploaded branding for new users is automatically
   constrained to this box with object-fit: contain, so images never stretch
   or push the header taller. */

@media (min-width: 901px) {
  .brand-logo,
  .dac-product-logo {
    width: 320px !important;
    height: 92px !important;
    max-width: 320px !important;
    max-height: 92px !important;
    flex: 0 0 320px !important;
  }

  .brand-logo {
    object-fit: contain !important;
    object-position: center center !important;
  }

  .dac-product-logo {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .dac-product-logo img {
    width:100% !important;
    height:100% !important;
    max-width:320px !important;
    max-height:92px !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}

@media (max-height: 900px) and (min-width: 901px) {
  .brand-logo,
  .dac-product-logo {
    width: 280px !important;
    height: 78px !important;
    max-width: 280px !important;
    max-height: 78px !important;
    flex-basis: 280px !important;
  }

  .dac-product-logo img {
    max-width:280px !important;
    max-height:78px !important;
  }
}

@media (max-width: 900px) {
  .brand-logo,
  .dac-product-logo {
    width:min(250px, 70vw) !important;
    height:72px !important;
    max-width:min(250px, 70vw) !important;
    max-height:72px !important;
  }

  .brand-logo {
    object-fit:contain !important;
    object-position:center center !important;
  }

  .dac-product-logo {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:4px auto !important;
  }

  .dac-product-logo img {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
}

.license-dialog{border:0;padding:0;background:transparent;color:#eef7ff;max-width:min(620px,92vw);width:100%;}
.license-dialog::backdrop{background:rgba(2,8,20,.88);backdrop-filter:blur(8px);}
.license-card{background:linear-gradient(180deg,#071a35 0%,#061426 100%);border:1px solid rgba(65,190,255,.45);border-radius:24px;padding:30px;box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 42px rgba(0,163,255,.16);}
.license-kicker{font-weight:900;letter-spacing:.18em;font-size:.78rem;color:#61cfff;margin-bottom:8px;}
.license-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px;}
.license-header .license-kicker{margin-bottom:0;padding-top:5px;}
.license-close-btn{appearance:none;border:0!important;background:transparent!important;color:#fff!important;font-size:30px!important;line-height:1!important;min-height:0!important;width:36px;height:36px;padding:0!important;margin:-8px -8px 0 0!important;border-radius:8px!important;cursor:pointer;opacity:.9;}
.license-close-btn:hover{background:rgba(255,255,255,.08)!important;opacity:1;}
.license-close-btn[hidden]{display:none!important;}
.license-card h2{margin:0 0 10px;font-size:1.75rem;color:#f4fbff;}.license-card p{color:#bad4e9;margin:0 0 20px;line-height:1.5;}
.license-card label{display:block;font-weight:800;color:#c9e4f6;margin:14px 0 0;}.license-card input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:13px 14px;border-radius:12px;border:1px solid #24577a;background:#020b15;color:#fff;font:inherit;}
.license-message{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:#07101c;border:1px solid #183e58;color:#c4deef;line-height:1.4}.license-message.success{border-color:#198650;background:#062317;color:#bdf7d8}.license-message.error{border-color:#b83b4b;background:#30090f;color:#ffd0d6}
.license-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.license-links{margin-top:17px;font-size:.9rem}.license-links a{color:#63cfff}.license-dialog button{min-height:44px}


/* Diamond Audio Cue 7-Day Demo development */
.demo-banner{margin:0 14px;padding:8px 14px;border:1px solid #d3a62d;border-radius:10px;background:linear-gradient(90deg,#33270b,#171205);color:#ffe08a;text-align:center;font-weight:950;letter-spacing:.09em;box-shadow:inset 0 1px #ffffff18,0 0 16px #d3a62d22}
.demo-banner.expired{border-color:#b84a4a;background:linear-gradient(90deg,#321212,#170707);color:#ffb1b1}
.demo-start-row{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}.demo-start-btn{width:100%}.demo-divider{display:flex;align-items:center;gap:10px;color:#8e98a8;font-size:12px;font-weight:900;letter-spacing:.08em;margin:8px 0}.demo-divider:before,.demo-divider:after{content:'';height:1px;background:#303845;flex:1}.purchase-demo-btn{width:100%;margin-top:8px}


/* v1.9.6 clock/timer performance display */
.display-mode-controls{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:0 0 auto;
}
.display-mode-controls .metal-btn{width:100%;}
.clock-timer-toggle{white-space:nowrap;}
.live-clock.timer-mode{
  color:#ffbf45;
  border-color:#9b681e;
  background:linear-gradient(#241b0d,#100d08);
  box-shadow:inset 0 1px #fff1c722,0 0 18px #ffad2430;
  flex-direction:column !important;
  gap:2px !important;
}
.live-clock.timer-mode strong{
  color:#ffc04a;
  text-shadow:0 0 16px #ffae2f66;
}
.timer-mode-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  color:#d99b32;
  line-height:1;
}
.timer-running-indicator{
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  color:#ffc04a;
  line-height:1;
  text-shadow:0 0 10px #ffae2f66;
  opacity:.92;
}
.timer-running-indicator[hidden]{display:none !important;}
.timer-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:4px;
}
.timer-controls[hidden],.timer-mode-label[hidden]{display:none !important;}
.timer-control-btn{
  min-width:68px;
  min-height:28px;
  padding:4px 10px;
  border-radius:7px;
  border:1px solid #875b1b;
  background:linear-gradient(#3a2c17,#20170c);
  color:#ffd58b;
  font:800 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.05em;
  cursor:pointer;
  box-shadow:inset 0 1px #ffffff1c,0 2px 5px #0007;
}
.timer-control-btn:active{transform:translateY(1px);}
.timer-control-btn:focus-visible{outline:2px solid #ffc04a;outline-offset:2px;}
body.stage-mode .live-clock.timer-mode{
  flex-direction:column !important;
  gap:2px !important;
}
body.stage-mode .live-clock.timer-mode #stageLockIcon{
  position:absolute;
  left:14px;
}
body.stage-mode .timer-mode-label{font-size:11px;}
body.stage-mode .timer-running-indicator{font-size:10px;}
body.stage-mode .timer-control-btn{min-width:78px;min-height:30px;font-size:12px;}
@media (max-width:1180px){
  .display-mode-controls{gap:4px;}
  .timer-control-btn{min-width:58px;padding-inline:7px;}
}
@media (max-width:900px){
  .display-mode-controls{flex:0 0 auto;}
}

/* v1.9.6 iPad landscape header containment fix.
   Keeps Branding | DAC logo | View/Timer + Clock + Controls inside the viewport,
   including Stage View, without changing timer/cue/licensing behavior. */
@media (min-width:901px) and (max-width:1400px){
  .app-shell{padding-left:8px !important;padding-right:8px !important;}
  .topbar{
    grid-template-columns:minmax(250px,1.05fr) minmax(180px,225px) minmax(400px,1.6fr) !important;
    column-gap:8px !important;
    padding-left:8px !important;
    padding-right:8px !important;
    min-width:0 !important;
    width:100% !important;
  }
  .brand-display{
    min-width:0 !important;
    overflow:hidden !important;
  }
  .brand-display #brandText{
    font-size:clamp(16px,2.05vw,28px) !important;
    line-height:1.03 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .brand-display.both{
    grid-template-columns:minmax(120px,46%) minmax(0,54%) !important;
    gap:8px !important;
  }
  .brand-display.both .brand-logo{
    width:100% !important;
    height:64px !important;
    max-width:220px !important;
    max-height:64px !important;
  }
  .brand-display.both #brandText{font-size:clamp(13px,1.45vw,19px) !important;}
  .dac-product-logo{
    width:210px !important;
    height:64px !important;
    max-width:100% !important;
    max-height:64px !important;
  }
  .dac-product-logo img{max-width:210px !important;max-height:64px !important;}
  .top-actions{
    display:grid !important;
    grid-template-columns:minmax(98px,112px) minmax(220px,1fr) minmax(76px,92px) !important;
    gap:6px !important;
    min-width:0 !important;
    width:100% !important;
  }
  .display-mode-controls{min-width:0 !important;width:100% !important;gap:4px !important;}
  .display-mode-controls .metal-btn,
  .control-menu-summary{
    min-width:0 !important;
    width:100% !important;
    padding:6px 6px !important;
    font-size:11px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }
  .control-menu{min-width:0 !important;width:100% !important;justify-self:stretch !important;}
  .control-menu-summary{justify-content:center !important;gap:3px !important;}
  .control-menu-panel{right:0 !important;min-width:220px !important;}
  .live-clock{
    min-width:0 !important;
    min-height:66px !important;
    padding:4px 7px !important;
    gap:7px !important;
    overflow:hidden !important;
  }
  .live-clock strong{
    font-size:clamp(36px,4.5vw,54px) !important;
    white-space:nowrap !important;
    line-height:.92 !important;
  }
  .stage-lock-icon:not([hidden]){font-size:24px !important;}
  .timer-mode-label{font-size:8px !important;letter-spacing:.1em !important;}
  .timer-running-indicator{font-size:8px !important;letter-spacing:.09em !important;}
  .timer-controls{gap:4px !important;}
  .timer-control-btn{min-width:48px !important;min-height:25px !important;padding:3px 5px !important;font-size:10px !important;}

  body.stage-mode .topbar{
    grid-template-columns:minmax(250px,1.05fr) minmax(180px,225px) minmax(400px,1.6fr) !important;
    column-gap:8px !important;
    padding-left:8px !important;
    padding-right:8px !important;
    width:100% !important;
  }
  body.stage-mode .brand-display{min-width:0 !important;max-width:none !important;overflow:hidden !important;}
  body.stage-mode .brand-display #brandText{font-size:clamp(16px,2.05vw,28px) !important;white-space:nowrap !important;text-overflow:ellipsis !important;overflow:hidden !important;}
  body.stage-mode .brand-display.both{grid-template-columns:minmax(120px,46%) minmax(0,54%) !important;gap:8px !important;}
  body.stage-mode .brand-display.both .brand-logo{width:100% !important;height:60px !important;max-width:210px !important;max-height:60px !important;}
  body.stage-mode .brand-display.both #brandText{font-size:clamp(13px,1.4vw,18px) !important;white-space:normal !important;}
  body.stage-mode .top-actions{
    display:grid !important;
    grid-template-columns:minmax(98px,112px) minmax(220px,1fr) minmax(76px,92px) !important;
    gap:6px !important;
    min-width:0 !important;
    width:100% !important;
  }
  body.stage-mode .live-clock{
    min-width:0 !important;
    min-height:68px !important;
    padding:4px 7px !important;
    gap:7px !important;
    overflow:hidden !important;
  }
  body.stage-mode .live-clock strong{font-size:clamp(38px,4.8vw,58px) !important;white-space:nowrap !important;}
  body.stage-mode .stage-lock-icon:not([hidden]){font-size:25px !important;}
  body.stage-mode .control-menu{display:block !important;min-width:0 !important;width:100% !important;justify-self:stretch !important;}
  body.stage-mode .control-menu-summary{display:flex !important;width:100% !important;justify-content:center !important;}
}

/* Extra safety for narrower landscape iPads / split-view widths. */
@media (min-width:901px) and (max-width:1100px){
  .topbar,
  body.stage-mode .topbar{
    grid-template-columns:minmax(210px,1fr) minmax(150px,185px) minmax(365px,1.55fr) !important;
    column-gap:6px !important;
  }
  .dac-product-logo{width:175px !important;height:58px !important;}
  .dac-product-logo img{max-width:175px !important;max-height:58px !important;}
  .top-actions,
  body.stage-mode .top-actions{
    grid-template-columns:minmax(88px,100px) minmax(205px,1fr) minmax(70px,82px) !important;
    gap:4px !important;
  }
  .display-mode-controls .metal-btn,.control-menu-summary{font-size:10px !important;padding:5px 4px !important;}
  .live-clock strong,body.stage-mode .live-clock strong{font-size:clamp(32px,4.3vw,46px) !important;}
}

/* v1.9.6 iPad landscape Controls-menu containment fix.
   Only affects the open Controls overlay at tablet landscape widths. */
@media (min-width:901px) and (max-width:1400px){
  .control-menu-panel{
    box-sizing:border-box !important;
    right:0 !important;
    left:auto !important;
    width:min(330px, calc(100vw - 24px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 24px) !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:6px !important;
    padding:8px !important;
    overflow:hidden !important;
  }
  .control-menu-panel .status-pill{
    grid-column:1 / -1 !important;
    min-width:0 !important;
    padding:7px 8px !important;
    font-size:10px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .control-menu-panel #performanceLockBtn,
  .control-menu-panel #stageViewBtn{
    grid-column:1 / -1 !important;
  }
  .control-menu-panel .metal-btn{
    min-width:0 !important;
    width:100% !important;
    padding:7px 6px !important;
    font-size:10px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    text-align:center !important;
  }
}


/* v1.9.6 Controls visual-viewport safeguard.
   JS calculates exact fixed placement; these rules keep the open panel compact. */
.control-menu[open] .control-menu-panel{
  box-sizing:border-box !important;
  width:min(300px, calc(100vw - 20px)) !important;
  min-width:0 !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:6px !important;
  padding:8px !important;
  z-index:1000 !important;
}
.control-menu[open] .control-menu-panel .status-pill{
  grid-column:1 / -1 !important;
  min-width:0 !important;
  white-space:normal !important;
  padding:7px 8px !important;
  font-size:10px !important;
  line-height:1.1 !important;
  text-align:center !important;
}
.control-menu[open] .control-menu-panel #performanceLockBtn,
.control-menu[open] .control-menu-panel #stageViewBtn{grid-column:1 / -1 !important;}
.control-menu[open] .control-menu-panel .metal-btn{
  width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  padding:7px 6px !important;
  font-size:10px !important;
  line-height:1.1 !important;
  text-align:center !important;
}


/* v2.7 Stage View show tabs — keep show navigation available during performance */
body.stage-mode .app-shell{
  grid-template-rows:auto auto minmax(0,1fr) !important;
}
body.stage-mode .show-tabs-shell{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  gap:6px !important;
  padding:0 8px !important;
  min-height:0 !important;
}
body.stage-mode .show-tabs-shell .show-tabs{
  display:flex !important;
  min-width:0 !important;
  padding:0 !important;
  gap:6px !important;
  overflow-x:auto !important;
}
body.stage-mode .show-tabs-shell .show-tab{
  flex:0 0 auto !important;
  min-height:40px !important;
  padding:7px 16px !important;
  border-radius:10px !important;
  font-size:clamp(13px,1.35vw,18px) !important;
}
body.stage-mode .show-tab-close{display:none !important;}
body.stage-mode .show-tabs-shell .all-shows-picker,
body.stage-mode .show-tabs-shell .fixed-add-show{display:none !important;}
body.stage-mode .tab-scroll-btn{
  display:block !important;
  width:36px !important;
  height:40px !important;
  font-size:26px !important;
}


/* Demo activation dialog: neutralize Stage/transport grid-area assignments. */
.demo-start-row > .hardware-btn,
.demo-start-row > .metal-btn {
  grid-area: auto !important;
  width: 100% !important;
}
.demo-start-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}