:root{color-scheme:dark;--bg:#0b0d10;--panel:#151920;--line:#2a303a;--text:#f5f7f9;--muted:#9ca9b8;--green:#50e3b2;--green2:#22c55e;--yellow:#fbbf24}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}button,input,textarea{font:inherit}button{border:1px solid var(--line);background:#202630;color:var(--text);border-radius:10px;padding:10px 14px;cursor:pointer}button.primary{background:var(--green2);border-color:var(--green2);color:#07110b;font-weight:800}input,textarea{width:100%;background:#0d1116;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px}textarea{min-height:110px;font-family:Consolas,monospace}.topbar{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line)}.topbar h1{margin:0}.topbar p{margin:3px 0;color:var(--muted);font-size:.8rem}.badge{padding:6px 9px;border-radius:999px;font-size:.75rem}.offline{background:#3b2020}.online{background:#123c2c;color:#a7f3d0}.app{max-width:1120px;margin:auto;padding:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}.hidden{display:none!important}.muted{color:var(--muted)}.join{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}.admin{margin-top:18px;color:var(--muted)}.sessionbar,.editor-head,.chart-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}.role{display:block;color:var(--green);font-size:.72rem;font-weight:800}.session-actions{display:flex;gap:10px;align-items:center}.meta-grid{display:grid;grid-template-columns:1fr 130px;gap:12px}.toolbar,.section-buttons,.playback,.sequence-view{display:flex;gap:8px;flex-wrap:wrap}.toolbar,.section-buttons,.playback{margin-top:14px}.learn-status{margin-top:12px;padding:10px;background:#33290d;border:1px solid #806313;border-radius:10px}.seq-chip{padding:5px 8px;border:1px solid var(--line);border-radius:999px;font-size:.8rem}.seq-chip.current{border-color:var(--green);color:var(--green)}.section-edit-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:#0f1318}.section-edit-head{display:grid;grid-template-columns:1fr auto auto auto;gap:7px;margin-bottom:9px}.chart-shell{border:1px solid var(--line);border-radius:16px;overflow:hidden}.chart-meta{padding:14px 16px;border-bottom:1px solid var(--line)}.chart-meta h2{margin:0}.chart-scroller{height:62vh;overflow-y:auto;scroll-behavior:smooth}.chart{max-width:820px;margin:auto;padding:22px 20px 220px;font-size:20px}.song-section{padding:10px 0 34px}.song-section h3{font-size:.72em;color:var(--green);border-bottom:1px solid var(--line);padding-bottom:8px;letter-spacing:.1em}pre{font:inherit;white-space:pre-wrap;line-height:1.75}.chordline{color:var(--yellow);font-weight:800}@media(max-width:620px){.app{padding:10px}.meta-grid{grid-template-columns:1fr 90px}.join{grid-template-columns:1fr}.chart{font-size:18px;padding:16px 13px 180px}.chart-scroller{height:68vh}}

.publish-status{
  margin-top:10px;
  padding:9px 11px;
  border-radius:9px;
  background:#10161d;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.86rem;
}
.publish-status.dirty{
  background:#33290d;
  border-color:#806313;
  color:#ffe7a3;
}
.publish-status.ok{
  background:#123c2c;
  border-color:#235f46;
  color:#b9f6d8;
}

.share-controls{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.qr-wrap{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:center}
#qrImage{width:260px;max-width:100%;height:auto;background:#fff;border-radius:12px;padding:10px}
.qr-link-box input{margin-bottom:10px}
@media(max-width:620px){.qr-wrap{grid-template-columns:1fr}#qrImage{margin:0 auto}}

.button-link{
  display:inline-block;
  border:1px solid var(--line);
  background:#202630;
  color:var(--text);
  border-radius:10px;
  padding:10px 14px;
  text-decoration:none;
}
.button-link:hover{background:#29313d}

.ocr-grid{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(240px,.8fr);
  gap:18px;
  margin:14px 0;
}
.file-drop{
  min-height:120px;
  border:1px dashed #52606f;
  border-radius:14px;
  background:#0d1116;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
  cursor:pointer;
  color:var(--text);
}
.file-drop span{color:var(--muted);font-size:.82rem;margin-top:5px}
.file-drop input{display:none}
.image-preview-wrap{
  margin-top:12px;
  max-height:360px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:#090c10;
}
#imagePreview{display:block;max-width:100%;height:auto;margin:0 auto}
.ocr-side{min-width:0}
.ocr-progress{margin-top:14px}
.ocr-progress-bar{
  height:10px;
  background:#0d1116;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:7px;
}
#ocrProgressFill{
  width:0%;
  height:100%;
  background:var(--green2);
  transition:width .15s ease;
}
.ocr-summary{
  margin-top:12px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#10161d;
  line-height:1.5;
}
.ocr-text{
  min-height:280px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:pre-wrap;
}
.small-note{font-size:.8rem}
@media(max-width:700px){
  .ocr-grid{grid-template-columns:1fr}
  .ocr-text{min-height:240px}
}

.ocr-section-tools{margin:18px 0 10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#10161d}
.section-marker-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.section-marker-buttons button{padding:8px 11px;font-size:.86rem}

.transpose-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#10161d}
.transpose-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.transpose-group select{background:#0d1116;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.sound-toggle{display:flex;align-items:center;gap:7px;color:var(--text);margin:0}.sound-toggle input{width:auto}
.chord-token{color:var(--yellow);font-weight:800;cursor:pointer;border-radius:5px;padding:0 1px}
.chord-token:hover,.chord-token.playing{background:#4b3c0b}.chord-token:active{transform:scale(.97)}
@media(max-width:620px){.transpose-group{width:100%}}

#currentKeyMirror{min-width:32px;display:inline-block;font-size:1.05rem;color:var(--green)}

.setlist-head,.setlist-toolbar,.setlist-livebar,.setlist-row{display:flex;gap:10px;align-items:center}.setlist-head{justify-content:space-between}.setlist-toolbar{margin:12px 0;flex-wrap:wrap}.setlist-toolbar input{flex:1;min-width:200px}#setlistItems{display:grid;gap:8px}.setlist-row{border:1px solid var(--border);padding:9px;border-radius:10px}.setlist-row.active{outline:2px solid var(--green)}.setlist-row .info{flex:1}.setlist-row small{color:var(--muted)}.setlist-livebar{justify-content:center;margin-top:12px;flex-wrap:wrap}.presentation-mode #ocrPanel,.presentation-mode #editorPanel,.presentation-mode .setlist-toolbar,.presentation-mode #setlistItems{display:none!important}@media(max-width:700px){.setlist-head,.setlist-toolbar{flex-direction:column;align-items:stretch}}

.setlist-status{
  margin:8px 0 12px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;color:var(--muted);background:#10161d
}
.setlist-status.ok{color:#b9f6d8;border-color:#235f46;background:#123c2c}
.setlist-status.warn{color:#ffe7a3;border-color:#806313;background:#33290d}

.manual-song-meta{
  display:grid;grid-template-columns:minmax(220px,1fr) 160px;gap:12px;
  margin:12px 0 16px;padding:14px;border:1px solid var(--line);
  border-radius:12px;background:#10161d
}
.manual-entry-actions{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.setlist-name-label{display:flex;flex-direction:column;gap:5px;flex:1;color:var(--muted);font-size:.82rem}
.setlist-name-label input{width:100%}
@media(max-width:700px){.manual-song-meta{grid-template-columns:1fr}}

.presentation-playback{
  display:none;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
  padding:10px;
  border-top:1px solid var(--line);
}
.presentation-mode .presentation-playback{display:flex}
.presentation-mode #setlistPanel{
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.presentation-mode .playback{
  display:none!important;
}
.presentation-mode #presentationStepIndicator{
  color:var(--muted);
  font-size:.92rem;
}
@media(max-width:700px){
  .presentation-playback button{flex:1;min-width:105px}
  #presentationStepIndicator{width:100%;text-align:center}
}

.chart-view-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.app-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;background:#123c2c;color:#c8f7df;border:1px solid #2b7657;border-radius:999px;padding:10px 16px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none}
.app-toast.error{background:#4a2020;color:#ffd0d0;border-color:#8a3a3a}
.lyrics-only .chordline{display:none!important}

/* Compact Learn mode */
.learning-mode #directorControls{padding:10px 14px}
.learning-mode #directorControls .meta-grid,
.learning-mode #directorControls .transpose-bar{display:none!important}
.learning-mode #newSongBtn,
.learning-mode #editSectionsBtn,
.learning-mode #learnBtn{display:none!important}
.learning-mode #directorControls .toolbar,
.learning-mode #directorControls .section-buttons,
.learning-mode #directorControls .playback{margin-top:6px}
.learning-mode #directorControls .learn-status{margin-top:6px;padding:7px 9px}
.learning-mode #directorControls .sequence-view{margin-top:5px;max-height:34px;overflow:auto}
.learning-mode #directorControls .seq-chip{padding:3px 6px;font-size:.72rem}
.learning-mode .chart-scroller{height:72vh}

/* Compact Presentation mode */
.presentation-mode .topbar,
.presentation-mode .sessionbar,
.presentation-mode #directorControls{display:none!important}
.presentation-mode .app{max-width:none;padding:6px 10px 10px}
.presentation-mode #setlistPanel{position:sticky;top:0;z-index:50;margin:0 0 6px;padding:7px 10px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.presentation-mode #setlistPanel .setlist-head{min-height:0;margin:0;justify-content:flex-end}
.presentation-mode #setlistPanel .setlist-head>div{display:none!important}
.presentation-mode #setlistPanel .setlist-status{display:none!important}
.presentation-mode #setlistPanel .setlist-livebar{margin-top:2px;gap:6px}
.presentation-mode #setlistPanel .setlist-livebar button,
.presentation-mode #setlistPanel #presentationBtn{padding:6px 9px;font-size:.82rem}
.presentation-mode .presentation-playback{margin-top:5px;padding:5px 0 0;gap:6px}
.presentation-mode .presentation-playback button{padding:8px 13px}
.presentation-mode .chart-shell{border-radius:10px}
.presentation-mode .chart-meta{padding:7px 12px}
.presentation-mode .chart-meta h2{font-size:1.05rem}
.presentation-mode .chart-meta span{font-size:.78rem}
.presentation-mode .chart-scroller{height:calc(100vh - 155px);min-height:360px}
.presentation-mode .chart{padding-top:10px}

@media(max-width:700px){
  .learning-mode .chart-scroller{height:74vh}
  .presentation-mode .chart-scroller{height:calc(100vh - 185px);min-height:320px}
  .presentation-mode #setlistNow{font-size:.82rem}
  .presentation-mode #presentationStepIndicator{font-size:.76rem}
  .presentation-mode .presentation-playback button{min-width:82px;padding:7px}
}


body.director-view .chordline{display:block!important}
body.director-view #clientViewModeBtn{display:none!important}

.library-head,.library-toolbar,.library-row,.picker-head{display:flex;gap:10px;align-items:center}
.library-head,.picker-head{justify-content:space-between}.library-toolbar{margin:12px 0;flex-wrap:wrap}
#librarySearch,#libraryPickerSearch{flex:1;min-width:220px}.library-items,.library-picker-items{display:grid;gap:8px}
.library-row{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.library-row .lib-info{flex:1}.library-row .lib-title{font-weight:800}.library-row .lib-meta{font-size:.82rem;color:var(--muted)}
.library-status{margin:8px 0 12px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:#10161d}
.library-status.ok{color:#b9f6d8;border-color:#235f46;background:#123c2c}.library-status.warn{color:#ffe7a3;border-color:#806313;background:#33290d}
.library-picker{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px}
.library-picker.hidden{display:none}.library-picker-card{width:min(820px,96vw);max-height:84vh;overflow:auto;background:#111820;border:1px solid var(--line);border-radius:16px;padding:16px}
.presentation-mode #libraryPanel{display:none!important}

.canonical-song-meta{display:none!important}
#directorControls .playback{display:none!important}
.presentation-mode .presentation-playback{display:flex!important}
.library-items{max-height:222px;overflow-y:auto;padding-right:4px}
.library-items::-webkit-scrollbar{width:9px}
.library-items::-webkit-scrollbar-thumb{background:#59606b;border-radius:9px}
.manual-song-meta:not(.hidden){display:grid}

.collapsible-panel{padding:0!important;overflow:hidden}
.collapse-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:transparent;border:0;border-radius:0;font-size:1.05rem;font-weight:800;text-align:left}
.collapse-header:hover{background:#151d26}
.collapse-arrow{transition:transform .18s ease}
.collapse-header[aria-expanded="true"] .collapse-arrow{transform:rotate(90deg)}
.collapse-body{padding:0 16px 16px}
.collapse-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.collapse-intro p{margin:0}
.presentation-mode #setlistPanel .collapse-header{display:none!important}
.presentation-mode #setlistBody{display:block!important;padding:0}
.presentation-mode #libraryPanel{display:none!important}
@media(max-width:700px){.collapse-intro{flex-direction:column;align-items:stretch}}

.library-picker[aria-hidden="true"]{display:none!important}

.mini-group-title{
  margin:10px 0 5px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sequence-label{margin-top:7px}
.empty-chart-message{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  text-align:center;
  padding:30px;
}

/* v0.7.5 */
.presentation-sequence-chips{
  width:100%;
  display:flex;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  margin-top:4px;
}
.presentation-sequence-chips .seq-chip{
  font-size:.72rem;
  padding:3px 7px;
}

/* Render manually aligned chord/lyric pairs using proportional-font measurements. */
.chart-pair{position:relative;margin:0;line-height:1.75}
.chart-pair .aligned-chords{
  position:relative;
  height:1.75em;
  color:var(--yellow);
  font-weight:800;
  white-space:nowrap;
}
.chart-pair .aligned-chords .chord-token{
  position:absolute;
  top:0;
}
.chart-pair .aligned-lyric{
  white-space:pre-wrap;
}

/* v0.7.6 — Learn Sequence controls */
.learning-mode #directorControls .toolbar{display:flex;flex-wrap:wrap}
.learning-mode .learn-order-finish{order:1}
.learning-mode .learn-order-clear{order:2}
.learning-mode .learn-order-save-library{order:3}
.learning-mode .learn-order-save-setlist{order:4}
.learning-mode #saveToLibraryBtn,
.learning-mode #saveSongBtn{opacity:.48;cursor:not-allowed}

/* Give the last sections enough virtual room below them so a selected
   section can actually reach the top of the chart viewport. */
.chart{padding-bottom:max(48vh,380px)}
.presentation-mode .chart{padding-bottom:max(58vh,440px)}

/* v0.7.7 */
.share-link-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.paste-ready{
  outline:2px dashed #2fbe78;
  outline-offset:3px;
}

/* v0.7.8: OCR manual alignment is preserved verbatim during conversion. */

/* v0.7.9 section navigation/learning ID fix */


/* v0.8.0 — mobile stabilization and compact controls */
.client-sequence-info{
  border-top:1px solid var(--line);
  padding:7px 12px 9px;
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
.client-sequence-label{
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.client-sequence-chips{display:flex;gap:5px;flex-wrap:wrap}
.client-sequence-chips .seq-chip{
  font-size:.68rem;
  padding:3px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
}

@media(max-width:700px){
  /* Musician mobile: fixed stable chart size. Zoom controls are intentionally hidden. */
  body:not(.presentation-mode) .chart{font-size:14px}
  #liveView:not(.hidden) .chart-meta{padding:9px 10px}
  #liveView:not(.hidden) .chart-meta h2{font-size:1.12rem;line-height:1.05;margin-bottom:2px}
  #liveView:not(.hidden) .chart-meta span{font-size:.76rem}
  .chart-view-actions{gap:5px;align-items:center}
  body:has(#roleLabel:not(:empty)) #fontDown,
  body:has(#roleLabel:not(:empty)) #fontUp{padding:6px 8px}

  /* Director controls: smaller, denser touch buttons without becoming hard to tap. */
  #directorControls{padding:10px}
  #directorControls .toolbar{gap:6px}
  #directorControls .toolbar button,
  #directorControls .section-buttons button{
    padding:7px 9px;
    font-size:.78rem;
    min-height:34px;
  }
  .transpose-bar{gap:7px}
  .transpose-group{gap:6px}
  .transpose-group button{padding:7px 10px;min-height:34px}
  .sound-toggle{font-size:.78rem}

  .sessionbar{padding:10px 12px}
  .sessionbar button{padding:7px 9px;font-size:.78rem}
  .share-controls{gap:5px}
  .session-actions{gap:6px;font-size:.78rem}

  /* Setlist navigation stays on one horizontal line on phones. */
  .setlist-livebar{
    display:grid;
    grid-template-columns:auto minmax(70px,1fr) auto;
    gap:5px;
    align-items:center;
    flex-wrap:nowrap;
  }
  .setlist-livebar button{
    padding:7px 8px;
    font-size:.72rem;
    min-width:0;
    white-space:nowrap;
  }
  #setlistNow{
    font-size:.72rem;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}


/* v0.8.1 — learned sequence progress */
.seq-chip.completed,
.client-sequence-chips .seq-chip.completed,
#presentationSequenceChips .seq-chip.completed{
  background:#103c2a;
  border-color:#1fbf75;
  color:#72f0ad;
}
.seq-chip.current,
.client-sequence-chips .seq-chip.current,
#presentationSequenceChips .seq-chip.current{
  background:#0d6840;
  border-color:#35e991;
  color:#d6ffe8;
  font-weight:800;
}

/* Explicit in-app gallery shortcut. Android/iOS still chooses the final
   source application according to the apps installed on the device. */
.gallery-image-btn{
  margin-top:9px;
  width:100%;
  padding:9px 12px;
}
@media(max-width:700px){
  .gallery-image-btn{
    min-height:38px;
    font-size:.82rem;
    padding:8px 10px;
  }
}

/* v0.8.3 — compact right-aligned musician controls + safe presentation exit */
@media (max-width:700px){
  /* Musician header: reserve the left side for song title/key and stack compact controls at right. */
  #liveView:not(.hidden) .chart-meta{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    column-gap:8px;
  }
  #liveView:not(.hidden) .chart-meta>div:first-child{
    min-width:0;
    padding-right:0;
  }
  #liveView:not(.hidden) .chart-meta h2{
    overflow-wrap:anywhere;
    word-break:normal;
  }
  #liveView:not(.hidden) .chart-view-actions{
    margin-left:auto;
    width:auto;
    max-width:180px;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-end;
    justify-content:flex-start;
    gap:6px;
  }
  #liveView:not(.hidden) #clientViewModeBtn,
  #liveView:not(.hidden) #followBtn{
    flex:0 0 auto;
    width:auto!important;
    max-width:180px;
    min-width:0;
    min-height:32px;
    padding:6px 10px!important;
    font-size:.78rem!important;
    line-height:1.1;
    white-space:normal;
    text-align:center;
    align-self:flex-end;
  }
  #liveView:not(.hidden) #fontDown,
  #liveView:not(.hidden) #fontUp{
    align-self:flex-end;
  }

  /* Presentation: the exit action must never span the whole panel. */
  .presentation-mode #setlistPanel .collapse-intro{
    display:flex!important;
    flex-direction:column;
    align-items:center!important;
    justify-content:center!important;
    gap:10px;
    margin-bottom:22px;
  }
  .presentation-mode #setlistPanel #presentationBtn{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    align-self:center!important;
    width:fit-content!important;
    min-width:0!important;
    max-width:230px!important;
    min-height:34px;
    padding:7px 13px!important;
    margin:0 auto!important;
    font-size:.82rem!important;
    line-height:1.1;
    white-space:nowrap;
  }
  .presentation-mode #setlistPanel .setlist-livebar{
    margin-top:0;
  }
}


/* v0.8.4 — mobile chart font controls */
.font-size-controls{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.font-size-controls button{flex:0 0 auto}
@media(max-width:700px){
  .chart-meta{align-items:flex-start}
  .chart-view-actions{justify-content:flex-end}
  .font-size-controls{display:flex!important;flex-direction:row!important;gap:6px!important}
  .font-size-controls #fontDown,.font-size-controls #fontUp{display:inline-flex;align-items:center;justify-content:center;width:52px;min-width:52px;height:46px;padding:6px 8px;margin:0}
}


/* v0.8.5 — Room = presentation audience; Presentation is the premium action */
.presentation-entry{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.presentation-trial-info{
  font-size:.72rem;
  color:#8ee7b6;
  border:1px solid #246d49;
  background:#102a1e;
  padding:5px 8px;
  border-radius:999px;
  white-space:nowrap;
}
#presentationBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.viewer-waiting{
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.viewer-waiting-inner{
  max-width:520px;
  padding:34px 22px;
}
.viewer-waiting-icon{
  width:50px;
  height:50px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #2d684d;
  color:#57df9a;
  font-size:1.35rem;
}
.viewer-waiting h2{margin:0 0 8px}
.viewer-waiting p{font-size:1.05rem;margin:0 0 8px}
.viewer-waiting small{color:var(--muted)}

.chart-shell.viewer-hidden{
  display:none!important;
}

/* Connected viewers never see Director's private workspace. */
body.viewer-waiting-mode #libraryPanel,
body.viewer-waiting-mode #setlistPanel,
body.viewer-waiting-mode #directorControls,
body.viewer-waiting-mode #ocrPanel,
body.viewer-waiting-mode #editorPanel{
  display:none!important;
}

@media(max-width:700px){
  .viewer-waiting{min-height:320px}
  .presentation-entry{align-items:stretch}
  .presentation-trial-info{text-align:center}
}


/* v0.8.7 — a Director room must always override stale viewer-only state */
body.director-view #libraryPanel,
body.director-view #setlistPanel,
body.director-view #directorControls{
  display:block;
}
body.director-view #viewerWaiting{
  display:none!important;
}
body.director-view .chart-shell{
  display:block;
}


/* v0.8.8 — fixed room identity and device approval */
.room-access-panel{
  margin-top:10px;
  padding:10px 12px;
}
.room-access-heading{
  font-weight:800;
  font-size:.82rem;
  margin-bottom:7px;
  color:#82edb5;
}
.room-access-panel summary{
  cursor:pointer;
  font-weight:700;
  font-size:.78rem;
  color:var(--muted);
}
.room-access-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:8px;
}
.room-access-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#10161e;
}
.room-access-row>div:first-child{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.room-access-row small{
  color:var(--muted);
  font-size:.66rem;
  overflow:hidden;
  text-overflow:ellipsis;
}
.room-access-actions{
  display:flex!important;
  flex-direction:row!important;
  gap:6px;
}
.room-access-empty{
  color:var(--muted);
  font-size:.73rem;
  padding:5px 1px;
}
button.compact{
  min-height:31px;
  padding:6px 9px;
  font-size:.72rem;
}
#authorizedDeviceCount{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  margin-left:4px;
  border-radius:999px;
  background:#202a36;
  color:#fff;
}
@media(max-width:700px){
  .room-access-panel{padding:8px}
  .room-access-row{padding:7px}
  .room-access-actions{gap:4px}
  button.compact{padding:6px 7px}
}


/* v0.8.9 — 8-character room entry and approval reliability */
#roomInput{
  text-transform:uppercase;
  letter-spacing:.08em;
}
.room-access-row.pending{
  border-color:#3d765a;
}
.room-access-row.pending::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#45e291;
  flex:0 0 auto;
}
@media(max-width:700px){
  #roomInput{
    font-size:16px; /* prevents mobile browser zoom and keeps alphabetic keyboard */
    letter-spacing:.06em;
  }
}

/* v0.8.10 approval card */
#pendingAccessWrap:not(.hidden){display:block!important}
#pendingAccessList .room-access-row.pending{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  margin-top:8px;
  border:1px solid #36c979;
  border-radius:12px;
}
#pendingAccessList .room-access-row.pending small{display:block;opacity:.72;margin-top:4px}
.room-access-actions{display:flex;gap:8px;flex-wrap:wrap}

/* v0.8.11 — robust access handshake */
.room-access-row.pending button:disabled{
  opacity:.55;
  cursor:wait;
}

/* v0.8.12 — Presence-backed approval */
.room-access-row.pending{
  box-shadow:0 0 0 1px rgba(54,201,121,.12) inset;
}

/* v0.8.13 — authorized devices dropdown */
#authorizedDevicesDetails{
  margin-top:2px;
}
#authorizedDevicesDetails summary{
  display:flex;
  align-items:center;
  gap:6px;
  user-select:none;
}
.authorized-device-row.connected{
  border-color:#2ccf7f;
}
.authorized-device-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.authorized-device-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.device-status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 7px;
  font-size:.65rem;
  line-height:1;
}
.device-status.connected{
  background:#123d2b;
  border:1px solid #2ccf7f;
  color:#83f4b8;
}
.device-status.offline{
  background:#202833;
  border:1px solid #394555;
  color:#b9c3cf;
}
button.danger{
  background:#3b1e22;
  border-color:#754049;
  color:#ffd7dc;
}
button.danger:hover{
  background:#51272e;
}
@media(max-width:700px){
  .authorized-device-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .authorized-device-row .room-access-actions{
    width:100%;
  }
  .authorized-device-row .room-access-actions button{
    flex:1 1 auto;
  }
}


/* v0.9.0 Cloud — authentication and private workspace */
.auth-shell{
  min-height:calc(100vh - 82px);
  display:grid;
  place-items:center;
  padding:24px;
}
.auth-card{
  width:min(430px,100%);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-sizing:border-box;
}
.auth-brand{text-align:center;margin-bottom:18px}
.auth-brand h2{margin:0;font-size:1.8rem}
.auth-brand p{margin:5px 0 0;color:var(--muted)}
.auth-card h3{margin:8px 0 14px}
.auth-card label{
  display:block;
  margin:10px 0;
  color:var(--muted);
  font-size:.82rem;
}
.auth-card label input{
  display:block;
  width:100%;
  margin-top:5px;
  box-sizing:border-box;
}
.auth-main-btn{width:100%;margin-top:8px}
.link-button{
  background:none!important;
  border:0!important;
  color:#77aaff!important;
  padding:7px!important;
}
.auth-switch{text-align:center;color:var(--muted);font-size:.8rem}

.account-bar{
  max-width:1080px;
  margin:10px auto 0;
  padding:9px 13px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.account-left,.account-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#cloudSyncStatus{
  font-size:.7rem;
  color:var(--muted);
}
.premium-badge{
  border:1px solid #2d9d64;
  background:#113624;
  color:#91efbb;
  border-radius:999px;
  padding:5px 8px;
  font-size:.68rem;
}

/* Logged-in workspace without an active room. */
body.account-workspace #liveView{
  display:block!important;
}
body.account-workspace #liveView > .sessionbar.workspace-hidden,
body.account-workspace #roomAccessPanel.workspace-hidden{
  display:none!important;
}
body.account-workspace #libraryPanel,
body.account-workspace #setlistPanel,
body.account-workspace #directorControls{
  display:block!important;
}

/* Presentation remains the only premium surface and still gets priority. */
body.presentation-mode #accountBar,
body.presentation-mode .topbar,
body.presentation-mode #homeView{
  display:none!important;
}

@media(max-width:700px){
  .account-bar{
    margin:7px 8px 0;
    padding:7px 9px;
  }
  .account-right{justify-content:flex-end}
  .premium-badge{
    width:100%;
    text-align:center;
  }
  .auth-shell{padding:14px}
}

/* v0.9.1 — room codes accept A-Z and 0-9, including 0 and 1 */


/* v0.9.2 — Login = Mi Sala */
.own-room-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.own-room-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.own-room-head > div:first-child{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.own-room-connected{
  padding-top:2px;
}
.own-room-join{
  margin-top:2px;
}
#guestSessionbar{
  margin-bottom:14px;
}
@media (max-width:700px){
  .own-room-head{
    flex-direction:column;
  }
  .own-room-connected{
    width:100%;
    justify-content:flex-start;
  }
}

/* v0.9.3 — own-room connection status + Library Cloud deletion fix */


/* =========================================================
   v0.9.4 — Presentation Focus
   In presentation mode, Director sees presentation controls
   immediately followed by the chart. Editing/admin UI is hidden.
   ========================================================= */

body.presentation-focus #accountBar,
body.presentation-focus #homeView,
body.presentation-focus #roomAccessPanel,
body.presentation-focus #libraryPanel,
body.presentation-focus #directorControls,
body.presentation-focus #learnStatus,
body.presentation-focus #learnHint,
body.presentation-focus #viewerWaiting,
body.presentation-focus #guestSessionbar {
  display:none !important;
}

/* Setlist remains only as the presentation controller. Hide its normal
   management/editor portions while preserving presentation controls. */
body.presentation-focus #setlistPanel .setlist-head > :not(.presentation-actions),
body.presentation-focus #setlistPanel .setlist-editor,
body.presentation-focus #setlistPanel .setlist-list,
body.presentation-focus #setlistPanel .setlist-toolbar,
body.presentation-focus #setlistPanel input,
body.presentation-focus #setlistPanel label:not(.presentation-trial),
body.presentation-focus #setlistPanel .muted:not(.presentation-status) {
  display:none !important;
}

/* Remove unnecessary outer spacing so the chart rises immediately. */
body.presentation-focus main,
body.presentation-focus .app,
body.presentation-focus #liveView {
  padding-top:0 !important;
  margin-top:0 !important;
}

body.presentation-focus #setlistPanel {
  margin-top:0 !important;
  margin-bottom:8px !important;
}

body.presentation-focus .chart-shell,
body.presentation-focus #chartPanel,
body.presentation-focus #chartWrap {
  margin-top:0 !important;
}

/* Mobile: presentation controls + chart should dominate the viewport. */
@media (max-width:700px){
  body.presentation-focus #setlistPanel{
    padding:8px !important;
  }

  body.presentation-focus .presentation-controls,
  body.presentation-focus .presentation-actions{
    gap:6px !important;
  }

  body.presentation-focus .chart-shell{
    min-height:calc(100dvh - 190px);
  }
}

/* v0.9.5 — Biblioteca is the only normal-mode song opener */


/* ==========================================================
   v0.9.6 — status/labels cleanup
   ========================================================== */

/* The connection badge now lives beside the signed-in user. */
.account-left{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

/* Only the actual sync word turns blue/cyan when synchronization succeeded. */
#cloudSyncStatus{
  font-size:12px;
  font-weight:500;
}
#cloudSyncStatus.cloud-synced{
  color:#62c7ff;
}
#cloudSyncStatus.cloud-working{
  color:var(--muted);
}
#cloudSyncStatus.cloud-pending{
  color:#c7cbd3;
}

/* We preserve the legacy room role node for JS compatibility but hide the
   duplicate "MI SALA" label from the Director UI. */
#roleLabel.own-room-redundant-label{
  display:none !important;
}

/* The own-room statusBox remains available for errors/join feedback, but
   successful Director connection messages are suppressed by JS. */
.own-room-panel #statusBox.hidden{
  display:none !important;
}

@media (max-width:700px){
  .account-left{
    gap:5px;
  }
  #connectionBadge{
    margin-left:2px;
  }
}

/* v0.9.7 — email-only login, username join identity, guest URL cleanup */


/* =========================================================
   v0.9.8 — Collapsible authorized devices + compact mobile UI
   ========================================================= */

/* Authorized devices panel behaves like a compact disclosure. */
#authorizedDevicesPanel .authorized-devices-header{
  cursor:pointer;
  user-select:none;
}

#authorizedDevicesPanel:not(.devices-expanded) #authorizedDevicesList{
  display:none !important;
}

#authorizedDevicesPanel.devices-expanded #authorizedDevicesList{
  display:block;
}

/* Mobile-specific sizing requested by user. */
@media (max-width:700px){

  /* Setlist row: keep title/info dominant and controls to ~30% width. */
  #setlistPanel .set-row,
  #setlistPanel .setlist-row,
  #setlistPanel .song-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:8px !important;
  }

  #setlistPanel .set-row .info,
  #setlistPanel .setlist-row .info,
  #setlistPanel .song-row .info{
    min-width:0 !important;
  }

  #setlistPanel .set-row > button,
  #setlistPanel .setlist-row > button,
  #setlistPanel .song-row > button{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    padding:0 !important;
    font-size:15px !important;
  }

  /* When buttons are direct siblings, keep them tight on the right. */
  #setlistPanel .set-row,
  #setlistPanel .setlist-row,
  #setlistPanel .song-row{
    justify-items:stretch;
  }

  /* Compact room action buttons: same text size, ~20% less button chrome. */
  #copyLinkBtn,
  #showQrBtn,
  #joinRoomBtn{
    min-height:36px !important;
    padding:7px 11px !important;
    font-size:inherit !important;
    line-height:1.15 !important;
  }

  #copyLinkBtn,
  #showQrBtn{
    width:auto !important;
  }

  #joinRoomBtn{
    min-width:0 !important;
  }

  .own-room-join{
    gap:8px !important;
  }

  .share-controls{
    gap:8px !important;
  }

  /* Devices panel stays compact on mobile when collapsed. */
  #authorizedDevicesPanel{
    padding:8px 10px !important;
  }

  #authorizedDevicesPanel .authorized-devices-header{
    min-height:28px !important;
    display:flex !important;
    align-items:center !important;
  }

  #authorizedDevicesPanel.devices-expanded{
    padding-bottom:10px !important;
  }
}


/* v0.9.9 — mobile layout repair + client focus */
body.guest-room-mode #accountUserLabel,
body.guest-room-mode #cloudSyncStatus,
body.guest-room-mode #roomStatusBadge,
body.guest-room-mode #accountBtn,
body.guest-room-mode #logoutBtn{display:none!important}

body.guest-room-mode #accountBar{
  min-height:0!important;padding:5px 10px!important;
  display:flex!important;justify-content:flex-end!important
}

@media(max-width:700px){
  body:not(.guest-room-mode) #accountBar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-areas:"identity premium premium" "identity account logout"!important;
    gap:6px!important;align-items:center!important;padding:8px 10px!important
  }
  body:not(.guest-room-mode) #accountUserLabel{grid-area:identity!important}
  body:not(.guest-room-mode) #presentationTrialBadge{
    grid-area:premium!important;justify-self:end!important;width:auto!important;
    padding:4px 9px!important
  }
  body:not(.guest-room-mode) #accountBtn{grid-area:account!important}
  body:not(.guest-room-mode) #logoutBtn{grid-area:logout!important}
  body:not(.guest-room-mode) #accountBtn,
  body:not(.guest-room-mode) #logoutBtn{
    width:auto!important;min-width:0!important;min-height:32px!important;
    padding:5px 9px!important;font-size:14px!important
  }

  body.guest-room-mode #presentationTrialBadge{
    width:auto!important;min-width:0!important;padding:4px 9px!important
  }

  #roomPanel{padding:9px 11px!important}
  #copyLinkBtn,#showQrBtn{min-height:31px!important;padding:4px 8px!important}
  #roomInput{min-height:36px!important;padding-top:5px!important;padding-bottom:5px!important}
  #joinRoomBtn{min-height:32px!important;padding:5px 9px!important}

  /* Undo v0.9.8 grid that stacked Setlist action buttons. */
  #setlistPanel .set-row,
  #setlistPanel .setlist-row,
  #setlistPanel .song-row{
    display:flex!important;flex-direction:row!important;align-items:center!important;
    gap:5px!important;min-height:50px!important;padding:6px 7px!important
  }
  #setlistPanel .set-row .info,
  #setlistPanel .setlist-row .info,
  #setlistPanel .song-row .info{flex:1 1 auto!important;min-width:0!important}

  #setlistPanel .set-row>button,
  #setlistPanel .setlist-row>button,
  #setlistPanel .song-row>button{
    flex:0 0 30px!important;width:30px!important;min-width:30px!important;
    max-width:30px!important;height:30px!important;min-height:30px!important;
    padding:0!important;margin:0!important;font-size:13px!important
  }

  #setlistPanel .row-actions,
  #setlistPanel .set-actions,
  #setlistPanel .song-actions{
    flex:0 0 auto!important;width:auto!important;max-width:34%!important;
    display:flex!important;flex-direction:row!important;justify-content:flex-end!important;
    align-items:center!important;gap:5px!important;margin-left:auto!important
  }
  #setlistPanel .row-actions button,
  #setlistPanel .set-actions button,
  #setlistPanel .song-actions button{
    width:30px!important;min-width:30px!important;height:30px!important;
    min-height:30px!important;padding:0!important
  }
}


/* =========================================================
   v0.10.0 — UI / Presentation / Devices fixes
   ========================================================= */

.tools-title{
  font-weight:800;
  font-size:1rem;
  margin:0 0 12px;
}

/* The native details element is the authorized-devices disclosure. */
#authorizedDevicesDetails > summary{
  cursor:pointer;
  user-select:none;
}
#authorizedDevicesDetails:not([open]) #authorizedDevicesList{
  display:none!important;
}

/* PC presentation: Exit + trial badge aligned to the right on one line. */
@media (min-width:701px){
  body.presentation-focus #setlistPanel .collapse-intro{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }

  body.presentation-focus #setlistPanel .collapse-intro > p{
    display:none!important;
  }

  body.presentation-focus #setlistPanel .presentation-entry{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
  }

  body.presentation-focus #presentationBtn{
    margin:0!important;
  }
}

/* Presentation must always beat later account/mobile rules. */
body.presentation-focus #accountBar,
body.presentation-focus #homeView,
body.presentation-focus #roomAccessPanel,
body.presentation-focus #libraryPanel,
body.presentation-focus #directorControls,
body.presentation-focus #guestSessionbar{
  display:none!important;
}

/* Client mode outside presentation: hide personal account controls exactly as requested. */
body.guest-room-mode #accountUsername,
body.guest-room-mode #cloudSyncStatus,
body.guest-room-mode #connectionBadge,
body.guest-room-mode #accountBtn,
body.guest-room-mode #logoutBtn{
  display:none!important;
}

@media(max-width:700px){

  /* Library: information gets ~60%; three controls together stay near 40%. */
  .library-row{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:8px!important;
  }

  .library-row .lib-info{
    flex:1 1 60%!important;
    min-width:0!important;
  }

  .library-row .library-actions{
    flex:0 1 40%!important;
    max-width:40%!important;
    margin-left:auto!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:5px!important;
  }

  .library-row .library-actions button{
    min-height:32px!important;
    height:32px!important;
    padding:4px 7px!important;
    font-size:.82rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .library-row .library-actions [data-a="del"]{
    flex:0 0 32px!important;
    width:32px!important;
    min-width:32px!important;
    padding:0!important;
  }

  /* Presentation mobile: only controls + chart; account bar must never leak back in. */
  body.presentation-focus #accountBar{
    display:none!important;
  }

  body.presentation-focus #setlistPanel{
    margin-top:0!important;
  }

  body.presentation-focus #setlistPanel .collapse-intro{
    margin-bottom:6px!important;
  }

  body.presentation-focus .chart-shell{
    margin-top:6px!important;
  }
}


/* =========================================================
   v0.10.1 — UI cleanup
   ========================================================= */

/* 1) Setlist: remove ONLY the green selection rectangle.
   Keep all active-song logic intact. */
#setlistPanel .set-row.active,
#setlistPanel .setlist-row.active,
#setlistPanel .song-row.active,
#setlistPanel .active-song,
#setlistPanel [data-active="true"]{
  outline:none!important;
  box-shadow:none!important;
  border-color:var(--border)!important;
}

/* 2) Herramientas collapsible. */
#toolsHeader{
  cursor:pointer;
  user-select:none;
  margin-bottom:0!important;
}

#toolsHeader[aria-expanded="true"]{
  margin-bottom:12px!important;
}

#toolsBody.hidden{
  display:none!important;
}

#toolsBody{
  display:block;
}

/* 3) The presentation-trial indicator belongs to Setlist / Presentation,
   not to the main account header. Keep the node for logic, hide only the top one. */

/* Mobile spacing for collapsed Herramientas. */
@media(max-width:700px){
  #directorControls{
    padding:10px!important;
  }

  #toolsHeader{
    min-height:28px!important;
    display:flex!important;
    align-items:center!important;
  }
}


/* =========================================================
   v0.10.2 — duplicate trial badge + Herramientas arrow
   ========================================================= */

/* The duplicated trial badge in the account/header bar is #premiumBadge.
   Hide ONLY that copy. The Setlist/presentation badge remains untouched. */
#accountBar #premiumBadge{
  display:none!important;
}

/* Herramientas gets the same disclosure affordance as Biblioteca/Setlist. */
#toolsHeader{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
}

#toolsHeader .tools-arrow{
  margin-left:auto!important;
  transition:transform .16s ease;
}

#toolsHeader[aria-expanded="true"] .tools-arrow{
  transform:rotate(90deg);
}


/* v0.10.3 — distinguish Cloud and Realtime states clearly */
#cloudSyncStatus.cloud-synced::before{
  content:"Nube: ";
}
#connectionBadge{
  white-space:nowrap;
}

/* v0.10.4 — restored withTimeout helper required by Auth */

/* v0.10.5 — internal recovery only; no automatic page reload */

/* v0.10.6 — Realtime starts immediately from cached room code */

/* v0.10.7 — explicit logout has priority over all recovery loops */

/* v0.10.8 — missing showSignedOutUi restored */

/* v0.10.9 — precise Auth endpoint diagnostics */


/* =========================================================
   v0.11.0 — remember login + compact room + sticky requests
   ========================================================= */

.remember-login{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:8px!important;
  margin:2px 0 12px!important;
  font-size:.9rem;
}

.remember-login input{
  width:auto!important;
  margin:0!important;
}

/* Slightly more compact own-room block without rearranging controls. */
.own-room-panel{
  padding-top:12px!important;
  padding-bottom:12px!important;
}

.own-room-head{
  gap:8px!important;
}

.share-controls{
  margin-top:7px!important;
  margin-bottom:4px!important;
}

.own-room-join{
  margin-top:8px!important;
}

#roomAccessPanel #pendingAccessWrap:not(.hidden){
  /* Request must remain visually prominent until Accept/Reject. */
  display:block!important;
}

@media(max-width:700px){
  .own-room-panel{
    padding:9px 11px!important;
  }

  .own-room-head{
    gap:6px!important;
  }

  .share-controls{
    margin-top:5px!important;
    margin-bottom:3px!important;
  }

  .own-room-join{
    margin-top:6px!important;
  }

  #copyLinkBtn,
  #showQrBtn{
    min-height:30px!important;
    padding:4px 8px!important;
  }

  #roomInput{
    min-height:34px!important;
  }

  #joinRoomBtn{
    min-height:31px!important;
  }
}

/* v0.11.1 — parallel Auth race, no sequential long waits */


/* v0.11.2 — devices arrow + stable reject + mobile presentation header */
#authorizedDevicesDetails > summary{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  list-style:none!important;
}
#authorizedDevicesDetails > summary::-webkit-details-marker{display:none}
#authorizedDevicesDetails .authorized-arrow{
  margin-left:auto!important;
  transition:transform .16s ease;
}
#authorizedDevicesDetails[open] .authorized-arrow{transform:rotate(90deg)}

@media(max-width:700px){
  body.presentation-focus #setlistPanel .presentation-entry{
    position:relative!important;
    width:100%!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.presentation-focus #presentationBtn{
    margin:0 auto!important;
    position:relative!important;
    z-index:1;
  }

  body.presentation-focus #presentationTrialInfo{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    font-size:.64rem!important;
    line-height:1!important;
    padding:4px 6px!important;
    white-space:nowrap!important;
    max-width:40%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}


/* =========================================================
   v0.11.3 — manual join approval + 2-line mobile trial badge
   ========================================================= */

@media(max-width:700px){
  body.presentation-focus #presentationTrialInfo{
    right:4px!important;
    max-width:32%!important;
    min-width:74px!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1.08!important;
    font-size:.62rem!important;
    padding:4px 6px!important;
  }

  /* Turn the existing text into a compact two-line badge without moving other controls. */
  body.presentation-focus #presentationTrialInfo{
    color:transparent!important;
  }

  body.presentation-focus #presentationTrialInfo::before{
    content:"Presentación\A30 días de prueba";
    white-space:pre-line;
    color:var(--success-text, #9ff6c9);
    display:block;
    text-align:center;
  }
}


/* =========================================================
   v0.11.6 — mobile trial badge: exactly two independent lines
   ========================================================= */
@media(max-width:700px){
  body.presentation-focus #presentationTrialInfo{
    right:4px!important;
    min-width:88px!important;
    max-width:88px!important;
    padding:5px 6px!important;
    height:auto!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    text-align:center!important;
    line-height:1!important;
    color:transparent!important;
  }

  body.presentation-focus #presentationTrialInfo::before{
    content:"Presentación";
    display:block!important;
    white-space:nowrap!important;
    color:var(--success-text, #9ff6c9)!important;
    font-size:.62rem!important;
    line-height:1.05!important;
    text-align:center!important;
  }

  body.presentation-focus #presentationTrialInfo::after{
    content:"30 días de prueba";
    display:block!important;
    white-space:nowrap!important;
    color:var(--success-text, #9ff6c9)!important;
    font-size:.56rem!important;
    line-height:1.05!important;
    margin-top:3px!important;
    text-align:center!important;
  }
}


/* =========================================================
   v0.11.12 — Base v0.11.6 preserved + visual polish only
   ========================================================= */

#authorizedDevicesDetails > summary{
  cursor:pointer!important;
  user-select:none!important;
}

/* Mobile presentation badge:
   larger readable text, very tight two-line spacing, compact rectangle. */
@media(max-width:700px){
  body.presentation-focus #presentationTrialInfo{
    width:98px!important;
    min-width:98px!important;
    max-width:98px!important;
    height:26px!important;
    min-height:26px!important;
    max-height:26px!important;
    border-radius:6px!important;
    padding:1px 4px!important;
    display:grid!important;
    grid-template-rows:11px 9px!important;
    align-content:center!important;
    justify-items:center!important;
    row-gap:0!important;
    overflow:hidden!important;
    color:transparent!important;
  }

  body.presentation-focus #presentationTrialInfo::before{
    content:"Presentación"!important;
    display:block!important;
    font-size:.66rem!important;
    line-height:10px!important;
    height:10px!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    color:var(--success-text, #9ff6c9)!important;
  }

  body.presentation-focus #presentationTrialInfo::after{
    content:"30 días de prueba"!important;
    display:block!important;
    font-size:.58rem!important;
    line-height:8px!important;
    height:8px!important;
    margin:-2px 0 0 0!important;
    padding:0!important;
    white-space:nowrap!important;
    color:var(--success-text, #9ff6c9)!important;
  }
}


/* v0.11.13 — same banner size, tighter vertical text spacing */
@media(max-width:700px){
  body.presentation-focus #presentationTrialInfo{
    grid-template-rows:9px 7px!important;
    row-gap:0!important;
  }
  body.presentation-focus #presentationTrialInfo::before{
    line-height:8px!important;
    height:8px!important;
    margin:0!important;
  }
  body.presentation-focus #presentationTrialInfo::after{
    line-height:6px!important;
    height:6px!important;
    margin:-3px 0 0 0!important;
  }
}




/* =========================================================
   v0.11.18 — Tonalidad selector + Editor help
   ========================================================= */

.key-selector{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}

.key-minor-toggle{
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  font-weight:800;
  font-size:1rem;
}
.key-minor-toggle.active{
  outline:2px solid #22c55e;
  background:#173625;
}

.section-help-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  min-width:24px;
  padding:0;
  margin-left:6px;
  border-radius:50%;
  font-weight:800;
  font-size:.8rem;
  vertical-align:middle;
}

.section-help-popover{
  position:relative;
  margin:8px 0 12px;
  padding:12px 14px;
  border:1px solid #334155;
  border-radius:10px;
  background:#111827;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  max-width:680px;
  font-size:.86rem;
  line-height:1.45;
}
.section-help-popover.hidden{display:none!important;}
.section-help-popover strong{
  display:block;
  margin-bottom:6px;
}
.section-help-popover p{
  margin:5px 0;
}

@media(max-width:700px){
  .key-minor-toggle{
    flex-basis:42px;
    width:42px;
    min-width:42px;
  }
  .section-help-popover{
    font-size:.8rem;
    padding:10px 12px;
  }
}


/* =========================================================
   v0.11.19 — compact custom tonalidad selector + preview
   ========================================================= */
.key-selector-custom{
  position:relative;
  display:grid;
  grid-template-columns:minmax(92px,140px) 44px;
  grid-template-areas:
    "root minor"
    "preview preview";
  align-items:center;
  justify-content:end;
  gap:6px 8px;
  width:auto;
  max-width:205px;
}
.key-root-button{
  grid-area:root;
  width:100%;
  min-width:92px;
  height:38px;
  padding:6px 10px;
  text-align:left;
  font-size:.88rem;
  white-space:nowrap;
}
.key-minor-toggle{
  grid-area:minor;
  width:44px;
  min-width:44px;
  height:38px;
  padding:0;
}
.key-selection-preview{
  grid-area:preview;
  min-height:24px;
  padding:4px 8px;
  border:1px solid #2f3b4d;
  border-radius:7px;
  background:#0d1219;
  color:#94a3b8;
  font-size:.72rem;
  text-align:center;
  white-space:nowrap;
}
.key-selection-preview.selected{
  color:#d8f7e6;
  border-color:#276a49;
  background:#10291d;
}
.key-root-menu{
  position:absolute;
  z-index:10050;
  top:42px;
  left:0;
  width:112px;
  max-height:240px;
  overflow-y:auto;
  padding:4px;
  border:1px solid #344154;
  border-radius:9px;
  background:#151b24;
  box-shadow:0 12px 28px rgba(0,0,0,.42);
}
.key-root-menu.hidden{display:none!important;}
.key-root-menu button{
  display:block;
  width:100%;
  padding:6px 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  text-align:left;
  font-size:.78rem;
  line-height:1.15;
}
.key-root-menu button:hover,
.key-root-menu button.selected{
  background:#253044;
}

@media(max-width:700px){
  .key-selector-custom{
    grid-template-columns:88px 38px;
    gap:5px 6px;
    max-width:138px;
  }
  .key-root-button{
    min-width:88px;
    width:88px;
    height:34px;
    padding:5px 8px;
    font-size:.76rem;
  }
  .key-minor-toggle{
    width:38px;
    min-width:38px;
    height:34px;
    font-size:.86rem;
  }
  .key-selection-preview{
    min-height:20px;
    padding:3px 5px;
    font-size:.62rem;
  }
  .key-root-menu{
    top:38px;
    width:94px;
    max-height:190px;
    padding:3px;
  }
  .key-root-menu button{
    padding:5px 6px;
    font-size:.68rem;
  }
}


/* =========================================================
   v0.11.20 — required tonalidad + mobile one-line steps
   ========================================================= */

#saveSectionsBtn.key-required-disabled,
#saveSectionsBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
  filter:saturate(.55);
}

/* Director mobile presentation:
   learned sequence stays one horizontal strip instead of increasing height. */
@media(max-width:700px){
  body.presentation-mode #presentationSequenceChips{
    width:100%;
    max-width:100%;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    padding:2px 4px 4px!important;
    margin-top:3px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }

  body.presentation-mode #presentationSequenceChips::-webkit-scrollbar{
    display:none;
  }

  body.presentation-mode #presentationSequenceChips .seq-chip{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
}