/* Fit the four requested workspaces to CSS viewport space, including browser zoom.
   Long collections and expanded tools keep natural scrolling and keyboard access. */
/* Empty collections need room for their message, rather than a scrolling thumbnail.
   The outer workspace scrolls when its content exceeds a short viewport. */
.main.workbench-page{overflow:auto;scroll-padding-block:12px}
.sunset-workbench .playlist{min-height:0;max-height:none;overflow-y:auto}
.sunset-workbench .song-scroll{min-height:144px;scroll-padding:8px}
.sunset-workbench .song-scroll:has(>.compact-empty){display:flex;flex-direction:column;flex:1 0 144px;min-height:144px;max-height:none;overflow:visible}
.sunset-workbench .song-scroll>.compact-empty{flex:1 0 auto;min-height:144px;width:100%;padding:14px 8px;gap:8px}
.sunset-workbench .playlist>.tabs{flex-shrink:0}
.main,.settings-content,.modal-content,.sidebar .nav-list{scroll-padding-block:12px}
.versions-page .lyric-edit-table{max-width:100%;overflow:auto}
.versions-page .lyric-edit-table table{min-width:520px;table-layout:auto}
.versions-page .lyric-edit-table th:nth-child(2){min-width:110px}
.versions-page .lyric-edit-table th:nth-child(3){min-width:220px}
.versions-page .lyric-edit-table input[type=checkbox]{width:17px!important;height:17px;min-height:17px!important;padding:0!important;margin:0}
.recording-sunset .record-control{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
@media(min-width:700px) and (max-width:900px){
 .recording-sunset .record-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1101px){
 .sunset-workbench{grid-template-rows:minmax(0,1fr);height:100%;min-height:500px;flex:1 0 auto}
}
@media(min-width:551px) and (max-width:1100px){
 .sunset-workbench{display:grid;height:auto;min-height:100%;flex:1 0 auto;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);grid-template-rows:max(500px,calc(100dvh - 100px)) auto}
}
@media(min-width:551px) and (max-height:700px){
 .sunset-workbench .playlist{padding:16px 12px 12px}
 .sunset-workbench .current-track{padding-bottom:12px;margin-bottom:12px}
 
 
 .sunset-workbench .current-track-info{display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px}
 .sunset-workbench .current-track-info .hero-cover{width:68px;height:76px}
 .sunset-workbench .current-track-info h3{font-size:1rem}
 .sunset-workbench .current-track-info p{margin:3px 0;font-size:0.785714rem}
 .sunset-workbench .current-track-info small{margin-top:4px}
 .sunset-workbench .playlist .tabs{margin-top:4px}
 .sunset-workbench .playlist .tabs button{min-height:36px;padding-block:8px}
 .sunset-workbench .song-scroll{margin-block:8px}
}
@media(max-width:550px){
 .create-page .creation-song{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px}
 .create-page .creation-song>.cover{width:48px;height:54px}
 .create-page .creation-song>.btn{grid-column:1/-1;justify-self:start}
 .compare-page .compact-hero{flex-wrap:wrap;padding-right:0;margin-inline:0}
 .compare-page .compact-hero>div{flex:1 1 100px}
 .compare-page .hero-actions .badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .reference-split>.playlist{max-height:none;overflow:visible;flex:none}
 .reference-split .playlist .current-track{padding-bottom:10px;margin-bottom:10px}
 
 .reference-split .playlist .current-track-info{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px}
 .reference-split .playlist .current-track-info .hero-cover{width:64px;height:70px}
 .reference-split .playlist .current-track-info h3{font-size:1rem}
 .reference-split .playlist-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:8px;min-width:0}
 .reference-split .playlist-toolbar .playlist-heading{font-size:0.928571rem;white-space:nowrap;margin:0;flex-shrink:0}
 .reference-split .playlist-toolbar .search{flex:1;min-width:0;width:0;margin:0;padding-inline:6px}
 .reference-split .playlist-toolbar .search input{width:100%;min-width:0}
 .reference-split .song-scroll{display:block;flex:0 0 auto;min-height:144px;max-height:220px;overflow:auto}
 .reference-split .song-scroll:has(>.compact-empty){max-height:none;overflow:visible}
 .sync-page .pair-device>div:nth-child(2){min-width:0;flex:1 1 100%}
 .sync-page .pair-device .btn{white-space:normal}
 .sync-page .tablet-preview{padding:12px;border-width:6px;max-width:100%}
 .sync-page .tablet-transport{gap:6px;flex-wrap:wrap}
 .sunset-workbench .playlist{overflow:visible}
 .recording-sunset .ruler>span:nth-child(2n){display:none}
 .sunset-workbench .current-track{padding-bottom:10px;margin-bottom:10px}
 
 
 .sunset-workbench .song-scroll{display:block;flex:0 0 auto;max-height:clamp(180px,32dvh,300px);overflow:auto}
 .sunset-workbench .song-row{width:100%;max-height:none;margin:4px 0}
 .sunset-workbench .song-scroll:has(>.compact-empty){flex:0 0 auto}
}
.main[data-page=voices]>.page-panel,
.main[data-page=recording]>.page-panel,
.main[data-page=service]>.online-catalog-page{padding:clamp(12px,1.4vw,22px)}
.main[data-page=voices] .voice-workspace{margin-top:12px;grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);align-items:start}
.main[data-page=voices] .voice-upload{position:static;padding:16px;gap:4px}
.main[data-page=voices] .voice-upload>img{width:clamp(100px,22dvh,230px);max-width:100%;margin:0}
.main[data-page=voices] .voice-upload h2{font-size:clamp(18px,1.65vw,24px);margin:0}
.main[data-page=voices] .voice-upload p{margin:4px 0;font-size:0.857143rem}
.main[data-page=voices] .voice-upload>.btn{margin:3px 0}
.main[data-page=voices] .voice-upload>small{margin-top:5px;font-size:0.785714rem}
.main[data-page=voices] .voice-workspace .voice-layout{gap:10px}
.main[data-page=voices] .voice-workspace .voice-row{padding:10px 12px;margin-bottom:8px;flex-wrap:nowrap;gap:8px}
.main[data-page=voices] .voice-workspace .voice-select-main{gap:10px;min-width:0}
.main[data-page=voices] .voice-workspace .voice-select-main strong{font-size:1.071429rem}
.main[data-page=voices] .voice-workspace .voice-row .cover{width:48px;height:54px}
.main[data-page=voices] .voice-workspace .voice-row>.btn{margin-left:0;flex-shrink:0}
.main[data-page=voices] .voice-workspace .inspector{padding:14px}
.main[data-page=voices] .inspector-song{margin-bottom:10px}
.main[data-page=voices] .inspector h4{margin:10px 0}
.main[data-page=voices] .asset-row{padding:8px 0}
.main[data-page=voices] .empty.tall{min-height:170px;padding:16px}
.recording-sunset .recording-clock{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:4px 0 12px}
.recording-sunset .recording-clock>strong{font-size:clamp(32px,5dvh,52px);letter-spacing:-1px}
.recording-sunset .recording-clock .capture-state{margin:0}
.recording-sunset .recording-clock>p{font-size:0.857143rem;margin:0}
.recording-sunset .editor-layout{gap:18px;align-items:start}
.recording-sunset .editor-layout>div{min-width:0}
.recording-sunset .section-title{margin:0 0 8px;gap:8px}
.recording-sunset .editor-wave{height:clamp(90px,21dvh,210px);min-height:0;display:block}
.recording-sunset .editor-waveform{height:calc(100% - 38px)}
.recording-sunset .editor-time{margin:6px 0;gap:8px;flex-wrap:wrap}
.recording-sunset .editor-time strong{font-size:0.857143rem}
.recording-sunset .record-controls{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));padding:10px 8px;gap:6px;margin:10px 0;border-radius:20px}
.recording-sunset .record-control{min-width:0;padding:0;font-size:0.785714rem;gap:5px}
.recording-sunset .record-control>span{width:36px;height:36px}
.recording-sunset .record-control.record-start>span{width:40px;height:40px}
.recording-sunset .record-control svg{width:20px;height:20px}
.recording-sunset .range-editor{padding:8px 10px;gap:8px;margin:8px 0}
.recording-sunset .range-editor input{width:70px;min-height:34px;padding:5px}
.recording-sunset .quality-summary{padding:10px;margin-top:8px}
.recording-sunset .quality-summary h3{font-size:0.928571rem;margin:0 0 6px}
.recording-sunset .quality-summary .stats-row{grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0;gap:6px}
.recording-sunset .stats-row>div{padding:6px}
.recording-sunset .stats-row strong{font-size:1.071429rem}
.recording-sunset .stats-row small{font-size:0.714286rem}
.recording-sunset .quality-summary .notice{padding:7px;font-size:0.785714rem;margin:6px 0 0}
.recording-sunset .record-empty{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:8px;flex-wrap:wrap}
.recording-sunset .record-empty>svg{width:22px;height:22px}
.recording-sunset .record-empty p{font-size:0.857143rem;margin:0}
.recording-sunset .inspector{padding:0 0 0 16px}
.recording-sunset .inspector h3{margin:0 0 8px;font-size:1.071429rem}
.recording-sunset .inspector .field{margin:8px 0}
.recording-sunset .inspector .notice{padding:8px;font-size:0.785714rem;margin:8px 0}
.recording-sunset .inspector>p{font-size:0.785714rem;margin:6px 0;line-height:1.6}
.recording-sunset .inspector>h4{margin:10px 0 4px}
.recording-sunset .inspector>.btn{margin-top:6px}
.recording-sunset .recording-advanced{margin-top:8px;padding:2px 0 0}
.recording-sunset .recording-advanced>summary{padding:7px 0;font-size:0.857143rem}
.recording-sunset .recording-format{margin:8px 0;font-size:0.857143rem;color:var(--muted)}
.recording-sunset .recording-format p{font-size:0.785714rem;line-height:1.6}
.recording-sunset .inspector .recording-format{padding:4px 0;border:0}
.recording-sunset .recording-safety-hint{font-size:0.785714rem;color:var(--muted);margin:6px 0}
.recording-sunset>.editor-layout>.inspector{padding-top:4px}
.recording-sunset .editor-layout>div>p.muted{font-size:0.785714rem;margin:5px 0}
/* Settings overview: compact cards preserve all controls and their labels. */
[data-settings-section=appearance] .appearance-column{gap:10px}
[data-settings-section=appearance] .appearance-grid{gap:10px;align-items:start}
[data-settings-section=appearance] .appearance-card{padding:14px;border-radius:16px}
[data-settings-section=appearance] .appearance-card h3{font-size:1.071429rem;margin-bottom:10px}
[data-settings-section=appearance] .appearance-card .setting-slider{grid-template-columns:minmax(0,1fr) 55px;padding:8px 0;gap:4px 8px}
[data-settings-section=appearance] .appearance-card .setting-slider>span{grid-column:1/-1}
[data-settings-section=appearance] .appearance-card .setting-row{padding:8px 0;gap:10px}
[data-settings-section=appearance] .appearance-card .setting-row strong{font-size:0.857143rem}
[data-settings-section=appearance] .appearance-card .setting-row p{font-size:0.785714rem;line-height:1.5}
[data-settings-section=appearance] .appearance-card .actions{margin-top:6px;gap:6px}
[data-settings-section=appearance] .appearance-card .btn{min-height:34px;padding:6px 10px;font-size:0.857143rem;border-radius:10px}
[data-settings-section=appearance] .appearance-card .field{margin:8px 0;gap:4px}
[data-settings-section=appearance] .appearance-card select{min-height:34px;padding:5px 8px;font-size:0.857143rem}
[data-settings-section=appearance] .theme-choice{min-height:58px;padding:8px;margin:8px 0}
[data-settings-section=appearance] .theme-choice>span{width:36px;height:36px}
[data-settings-section=appearance] .appearance-device-status{padding:8px 0;margin:10px 0}
[data-settings-section=appearance] .appearance-audio .muted{font-size:0.785714rem;line-height:1.5}
[data-settings-section=appearance] .appearance-preview-card .lyric-preview{min-height:100px;aspect-ratio:3;padding:14px;margin-bottom:5px}
[data-settings-section=appearance] .appearance-shortcuts .shortcut-row{grid-template-columns:minmax(0,1fr) minmax(60px,auto) 44px;font-size:0.857143rem;padding:5px 0;gap:6px}
[data-settings-section=appearance] .shortcut-row kbd{min-width:0;min-height:26px;padding:3px 5px;font-size:0.785714rem;overflow-wrap:anywhere}
[data-settings-section=appearance] .appearance-shortcuts .shortcut-status{margin:6px 0;min-height:0;font-size:0.785714rem}
[data-settings-section=appearance] .settings-footer{padding:8px 0;margin-top:6px;font-size:0.785714rem}
[data-settings-section=appearance] .appearance-lyrics>summary{font-weight:600;font-size:1rem}
[data-settings-section=appearance] .appearance-lyrics[open]>summary{margin-bottom:10px}
[data-settings-section=appearance] .appearance-device-more,
[data-settings-section=appearance] .appearance-global-keys{font-size:0.785714rem;line-height:1.7;color:var(--muted);margin-top:8px}
@media(min-width:900px) and (max-height:750px){
 .main[data-page=voices] .voice-workspace .voice-list{gap:6px}
 .main[data-page=voices] .voice-workspace .voice-row{margin-bottom:0;padding:7px 10px}
 .main[data-page=voices] .voice-workspace .voice-row .cover{width:38px;height:42px}
 .main[data-page=voices] .voice-workspace .voice-select-main small{font-size:0.714286rem;line-height:1.45}
 .main[data-page=voices] .voice-workspace .inspector{padding:10px}
 .main[data-page=voices] .voice-workspace .inspector .notice{padding:6px;margin-top:7px;font-size:0.714286rem}
 .main[data-page=voices] .voice-workspace .inspector .btn{min-height:32px;padding:5px 10px;font-size:0.857143rem}
 .main[data-page=voices] .voice-workspace .inspector-song .cover{width:42px;height:42px}
 .main[data-page=voices] .voice-workspace .asset-row{padding:5px 0}
 .online-catalog-page .catalog-demo-tools{margin:6px 0;padding-block:5px}
 .online-catalog-page .catalog-results>h2{margin-bottom:5px;font-size:1.142857rem}
 .online-catalog-page .catalog-results>p{margin:4px 0;font-size:0.785714rem}
 .online-catalog-page .catalog-task-empty{min-height:120px;gap:8px}
 .online-catalog-page .catalog-task-empty>svg{width:26px;height:26px}
 .online-catalog-page .catalog-task-empty p{margin:4px 0}
}
.online-catalog-page .catalog-heading{padding-bottom:10px;margin-bottom:12px}
.online-catalog-page .sunset-catalog-layout{grid-template-columns:minmax(0,1fr)}
.online-catalog-page .catalog-list-title{font-size:1.214286rem;margin:0 0 10px}
.online-catalog-page .catalog-song,
.online-catalog-page .catalog-results>.svc-catalog:not(.catalog-published) .catalog-song{padding:10px;margin-bottom:8px;grid-template-columns:54px minmax(0,1fr) auto;gap:3px 10px}
.online-catalog-page .catalog-song>.cover,
.online-catalog-page .catalog-results>.svc-catalog:not(.catalog-published) .catalog-song>.cover{width:54px;height:60px;margin:0}
.online-catalog-page .catalog-song h2{font-size:1.071429rem}
.online-catalog-page .catalog-song-title{overflow-wrap:anywhere}
.online-catalog-page .catalog-duration{display:inline-block;margin-inline-start:6px;font-size:0.785714rem;font-weight:400;color:var(--text-muted,#7b91a6);white-space:nowrap}
.online-catalog-page .catalog-song p{line-height:1.5}
.online-catalog-page .catalog-song .btn{padding:7px 12px;white-space:normal;max-width:148px;font-size:0.785714rem}
.online-catalog-page .catalog-task{padding:12px;margin-bottom:8px}
.online-catalog-page .catalog-task-heading>.cover{width:44px;height:50px}
.online-catalog-page .catalog-task-progress{margin:10px 0}
.online-catalog-page .catalog-task-empty{min-height:180px;padding:20px 10px}
.catalog-load-status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:0.857143rem}
.online-catalog-page [hidden]{display:none!important}
@media(min-width:1000px){
 .online-catalog-page .catalog-results>.svc-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
 .online-catalog-page .catalog-results>.svc-catalog .catalog-song{grid-template-columns:44px minmax(0,1fr)}
 .online-catalog-page .catalog-results>.svc-catalog .catalog-song>.cover{width:44px;height:50px;grid-row:1/4}
 .online-catalog-page .catalog-results>.svc-catalog .catalog-song .btn{grid-column:1/-1;grid-row:auto;justify-self:start;max-width:100%;margin-top:5px}
}
@media(min-width:1000px){
 [data-settings-section=appearance] .appearance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 [data-settings-section=appearance] .appearance-card .setting-slider{grid-template-columns:minmax(0,1fr) minmax(60px,.8fr) 55px;padding:6px 0}
 [data-settings-section=appearance] .appearance-card .setting-slider>span{grid-column:auto;font-size:0.857143rem}
 [data-settings-section=appearance] .appearance-preview-card .lyric-preview{min-height:85px}
 [data-settings-section=appearance] .appearance-card .field span{font-size:0.857143rem}
 [data-settings-section=appearance] .appearance-card h3{margin-bottom:8px}
 [data-settings-section=appearance] .appearance-shortcuts .shortcut-row{padding:3px 0}
}
@media(min-width:900px){
 .online-catalog-page .sunset-catalog-layout.is-empty{display:block}
}
@media(min-width:700px){
 .recording-sunset .editor-layout{grid-template-columns:minmax(0,1fr) clamp(210px,21vw,240px)}
}
@media(min-width:1600px){
 .online-catalog-page .catalog-results>.svc-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
}
@media(min-width:900px) and (max-height:800px){
 .main[data-page=voices] .page-title,.online-catalog-page .page-title{margin-bottom:10px}
 .main[data-page=voices] .voice-upload>img{width:clamp(80px,17dvh,140px)}
 .recording-sunset .editor-wave{height:clamp(82px,17dvh,130px)}
 .recording-sunset .inspector .btn{min-height:34px;padding:6px 10px;font-size:0.857143rem}
 .recording-sunset .inspector select{min-height:34px;padding:5px 8px;font-size:0.857143rem}
 .recording-sunset .recording-clock{margin-bottom:6px}
 .recording-sunset .page-title p{font-size:0.857143rem;margin-top:3px}
 .recording-sunset .recording-clock>strong{font-size:2.142857rem}
 .recording-sunset .editor-wave{height:clamp(72px,12dvh,96px)}
 .recording-sunset .section-title input{min-height:34px;padding-block:5px}
 .recording-sunset .record-controls{margin:6px 0;padding:6px}
 .recording-sunset .editor-time{font-size:0.785714rem;margin:4px 0}
 .recording-sunset .range-editor{margin:5px 0;padding:5px 8px}
 .recording-sunset .quality-summary{padding:7px;margin-top:5px}
 .recording-sunset .quality-summary .stats-row{margin:4px 0}
 .recording-sunset .quality-summary .notice{padding:5px;margin-top:4px}
 [data-settings-section=appearance] .appearance-card{padding:10px}
 [data-settings-section=appearance] .appearance-card .field{margin:6px 0}
 [data-settings-section=appearance] .appearance-device-status{display:flex;align-items:center;gap:8px;padding:6px 0;margin:6px 0}
 [data-settings-section=appearance] .appearance-device-status p{margin:0;font-size:0.714286rem;line-height:1.5}
 [data-settings-section=appearance] .appearance-card .setting-row{padding:6px 0}
 [data-settings-section=appearance] .appearance-card .setting-slider{padding:4px 0}
 [data-settings-section=appearance] .appearance-shortcuts .shortcut-row{padding:2px 0}
 [data-settings-section=appearance] .appearance-preview-card .lyric-preview{min-height:70px;aspect-ratio:3.8}
 [data-settings-section=appearance] .appearance-card h3{margin-bottom:6px}
 [data-settings-section=appearance] .appearance-card .btn{min-height:32px;padding:5px 8px}
 [data-settings-section=appearance] .appearance-card select{min-height:32px}
 [data-settings-section=appearance] .appearance-device-more,
 [data-settings-section=appearance] .appearance-global-keys{padding:4px 0;margin-top:4px}
}
@media(max-width:999px) and (min-width:650px){
 [data-settings-section=appearance] .appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:899px){
 .online-catalog-page .sunset-catalog-layout{grid-template-columns:minmax(0,1fr)}
 .main[data-page=voices] .voice-workspace{grid-template-columns:minmax(0,1fr)}
 .main[data-page=voices] .voice-upload{display:grid;grid-template-columns:100px minmax(0,1fr);gap:6px 14px;text-align:left;align-items:center}
 .main[data-page=voices] .voice-upload>img{grid-column:1;grid-row:1/6;width:100px}
 .main[data-page=voices] .voice-upload>:not(img){grid-column:2;margin:0;min-width:0}
 .main[data-page=voices] .voice-upload>.btn{min-width:0;justify-self:start;font-size:0.857143rem;min-height:34px;padding:6px 10px}
}
@media(max-width:699px){
 .recording-sunset .editor-layout{grid-template-columns:minmax(0,1fr);gap:12px}
 .recording-sunset .inspector{border-left:0;border-top:1px solid var(--border);padding:12px 0 0}
 .recording-sunset .record-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:550px){
 .main[data-page=voices] .page-title .actions{width:100%}
 .main[data-page=voices] .voice-upload{grid-template-columns:60px minmax(0,1fr);gap:6px 10px;padding:12px}
 .main[data-page=voices] .voice-upload>img{width:60px}
 .main[data-page=voices] .voice-upload h2{font-size:1.214286rem}
 .main[data-page=voices] .voice-workspace .voice-row{flex-wrap:wrap}
 .main[data-page=voices] .voice-workspace .voice-select-main{flex-basis:100%}
 .recording-sunset .recording-clock{gap:6px 10px}
 .recording-sunset .recording-clock>p{width:100%;font-size:0.785714rem}
 .recording-sunset .record-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 4px}
 .recording-sunset .range-editor{flex-wrap:wrap}
 .recording-sunset .quality-summary .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .recording-sunset .inspector{display:block}
 .recording-sunset .inspector .field,.recording-sunset .inspector .notice{margin:8px 0}
 .recording-sunset .inspector>.btn{margin-top:6px}
 .online-catalog-page .catalog-heading .actions,.online-catalog-page .catalog-heading .search{width:100%;min-width:0}
 .online-catalog-page .catalog-heading input{width:100%}
 .online-catalog-page .catalog-song,
 .online-catalog-page .catalog-results>.svc-catalog:not(.catalog-published) .catalog-song{grid-template-columns:48px minmax(0,1fr)}
 .online-catalog-page .catalog-song>.cover{width:48px;height:54px;grid-row:1/4}
 .online-catalog-page .catalog-song .btn{grid-column:2;grid-row:auto;justify-self:start;max-width:100%;margin-top:5px}
 [data-settings-section=appearance] .appearance-grid{grid-template-columns:minmax(0,1fr)}
 [data-settings-section]>.settings-sidebar{flex-wrap:wrap;gap:4px;overflow:visible}
 [data-settings-section]>.settings-sidebar button{padding:7px 9px;min-height:34px;font-size:0.785714rem}
}
/* Keep the soundboard above the current performance, with a fixed close bar. */
/* Expanded lyrics use the window; controls stay outside the lyric scroll area. */
.modal.lyrics-dialog{width:calc(100vw - 32px);max-width:calc(100vw - 32px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)}
.lyrics-dialog .modal-titlebar{padding:8px 16px;min-width:0}
.lyrics-dialog .modal-titlebar h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lyrics-window-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lyrics-window-actions .icon-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
.modal.lyrics-dialog>.modal-content{display:flex;flex:1;min-width:0;padding:0;overflow:hidden;scrollbar-gutter:auto}
.lyrics-dialog .lyrics-modal{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.lyrics-dialog .lyric-viewport{flex:1;height:auto;min-height:0}
.lyrics-dialog .plain-lyrics,.lyrics-dialog .empty{flex:1;min-height:0;overflow:auto;overflow-wrap:anywhere}
.lyrics-dialog .lyric-line{overflow-wrap:anywhere}
.lyrics-dialog .lyrics-modal>footer{flex:0 0 auto;flex-wrap:wrap;gap:6px 20px;padding:8px 16px}
.lyrics-dialog .lyrics-modal>footer label{display:flex;align-items:center;gap:10px;max-width:100%}
.lyrics-dialog .lyrics-modal>footer input{width:clamp(100px,20vw,220px);max-width:100%}
.modal.lyrics-dialog:fullscreen,:root:fullscreen .modal.lyrics-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;margin:0}
@media(max-width:550px){
  .modal.lyrics-dialog{width:calc(100vw - 12px);max-width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);border-radius:14px}
  .lyrics-dialog .modal-titlebar{padding:6px 10px}
  .lyrics-dialog .lyrics-modal>footer{font-size:0.714286rem;padding:6px 10px}
}
.modal.effects-dialog{width:1120px;max-width:calc(100vw - 32px)}
.effects-dialog .effects-page{padding:0;border:0;box-shadow:none;background:transparent}
.effects-dialog .effects-page .page-heading{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.effects-dialog .page-heading>div{flex:1 0 100%}
.effects-dialog .effects-layout{grid-template-columns:minmax(0,1fr) 260px;gap:18px}
.effects-dialog .effects-layout>*,.effects-dialog .effect-name{min-width:0}
.effects-dialog .effect-name{overflow-wrap:anywhere}
.effects-dialog .effects-layout input,.effects-dialog .effects-layout select{max-width:100%;min-width:0}
@media(max-width:700px){
  .modal.effects-dialog{max-width:calc(100vw - 16px)}
  .effects-dialog .effects-layout{grid-template-columns:minmax(0,1fr)}
  .effects-dialog .effects-toolbar>.btn,.effects-dialog .page-heading>.btn{flex:1 1 130px}
  .effects-dialog .effect-row{gap:6px;padding:10px 4px;flex-wrap:wrap}
  .effects-dialog .effect-name{flex:1 1 100px}
}

/* Legacy broadcaster workflow within the current application theme. */
.legacy-effects{display:flex;flex-direction:column;gap:10px;min-width:0}
.legacy-effects .page-heading:empty{display:none}
.effect-management,.effect-categories,.effect-primary-actions{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.effect-categories,.effect-primary-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
.legacy-effects>input{width:100%;box-sizing:border-box;min-width:0}
.effect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;align-content:start;min-height:220px;max-height:360px;overflow:auto;padding:8px 2px}
.effect-grid .empty{grid-column:1/-1}
.legacy-effects .effect-tile{display:flex;align-items:center;gap:6px;padding:0;border:1px solid var(--border);border-radius:10px;min-width:0;background:var(--surface);box-shadow:none;transition:background-color .15s}
/* Local sound tiles have a 42px body at every supported font scale (90–125%).
   Keep their full DOM and scroll extent while skipping offscreen child layout.
   Cloud descriptions and shortcut rows have variable heights and are excluded. */
.legacy-effects[data-effects-mode=sounds] .effect-grid>[data-effect-tile]{content-visibility:auto;contain-intrinsic-block-size:auto 42px}
.legacy-effects .effect-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;display:block;padding:10px 8px;min-height:42px;border:0;border-radius:9px;background:transparent;box-shadow:none;color:var(--text)}
.legacy-effects .effect-name:hover:not(:disabled){background:transparent;border-color:transparent}
.legacy-effects .effect-tile:hover{background:color-mix(in srgb,var(--selection) 45%,var(--surface))}
.legacy-effects .effect-tile.selected,.legacy-effects .effect-tile.batch-selected{background:var(--selection);border-color:var(--border);box-shadow:none}
.legacy-effects .effect-tile>input[type=checkbox]{margin-left:10px;flex-shrink:0}
.legacy-effects .effect-name:focus-visible{outline:2px solid var(--primary);outline-offset:-3px}
.effect-name small,.effect-name kbd{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.legacy-effects .effect-name kbd{background:var(--surface);border-color:var(--border);color:var(--muted)}
.effect-footer{display:grid;gap:10px;border-top:1px solid var(--line,#e8e2df);padding-top:10px}
.effect-catalog-status{font-size:12px;color:var(--muted,#777)}
.effect-catalog-status span{margin-left:10px}
.effect-output{display:flex;gap:12px;align-items:center}.effect-output select{flex:1;min-width:0}
.effect-transport{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.effect-transport label{display:flex;align-items:center;gap:9px;flex:1;min-width:220px;font-size:13px}
.effect-transport input,.effect-transport progress{flex:1;min-width:30px;width:100px;accent-color:var(--accent,#ed654c)}
.effect-transport span{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}
.effect-settings{border:1px solid var(--line,#e8e2df);border-radius:12px;padding:14px}
.effect-settings form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.effect-settings form h2,.effect-settings form p{grid-column:1/-1;margin:0}
.effect-settings label{display:flex;flex-direction:column;gap:4px;min-width:0}
.effect-settings input,.effect-settings select{min-width:0;width:100%;box-sizing:border-box}
.effect-settings input[type=checkbox]{width:auto;align-self:start}
.effect-keyboard>div{display:flex;gap:4px;margin-top:5px}.effect-keyboard .btn{flex:1;min-width:0;padding:5px 1px;font-size:11px}
.effect-library-tools summary,.effect-keyboard summary{cursor:pointer;font-size:12px;color:var(--muted,#777)}
@media(max-width:650px){.effect-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:300px;min-height:150px}.effect-categories{grid-template-columns:repeat(3,minmax(0,1fr))}.effect-primary-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.effect-settings form{grid-template-columns:minmax(0,1fr)}.effect-output{align-items:stretch;flex-direction:column;gap:4px}.effect-management{gap:4px}.effect-management .btn{padding:8px 3px;font-size:12px}}

.effect-waveform{grid-column:1/-1;min-width:0}.effect-waveform canvas{display:block;width:100%;height:100px;touch-action:none;border-radius:6px;background:#faf6f3}.effect-waveform small{color:var(--muted,#777)}

.effects-function-keys{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.effects-function-keys label{display:grid;gap:4px;flex:1;min-width:180px;font-size:12px}
.effect-footer{grid-template-columns:minmax(0,1fr)}.effect-footer>*{min-width:0}.effect-output select{width:100%;max-width:100%}.effect-footer .effects-toolbar{flex-wrap:wrap}

.effect-upload{display:flex;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--line,#eadfe8);border-radius:12px;background:rgba(255,255,255,.65)}
.effect-upload-info{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
.effect-upload-info>span{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.effect-upload progress{width:100%;height:8px;align-self:center;accent-color:#ed477c;border:0;border-radius:8px;overflow:hidden}
.effect-upload progress::-webkit-progress-bar{background:#f5e5ed;border-radius:8px}
.effect-upload progress::-webkit-progress-value{background:linear-gradient(90deg,#ff995a,#ed3d85);border-radius:8px}
.effect-upload small{font-variant-numeric:tabular-nums;font-size:12px}
.effect-upload>.btn{flex-shrink:0}
@media(max-width:650px){.effect-upload{padding:10px;gap:8px}.effect-upload>.btn{padding:8px}}

/* The selected effect and its controls share the application's current theme. */
.effect-quick-edit{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(160px,26%) 36px;align-items:end;gap:18px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.effect-quick-name{min-width:0;display:grid;gap:6px;font-size:13px}
.effect-name-controls{display:flex;align-items:center;gap:10px;min-width:0}
.effect-name-controls input{flex:1;width:0;min-width:0;box-shadow:none}
.effect-quick-edit .btn{min-height:42px;white-space:nowrap;border-radius:10px;box-shadow:none}
.effect-quick-edit .effect-save-name{background:var(--selection);border-color:var(--border);color:var(--text);flex-shrink:0}
.effect-quick-edit .effect-save-name:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 18%,var(--surface));border-color:var(--border)}
.effect-quick-edit .effect-favorite{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border-color:var(--border)}
.effect-favorite[aria-pressed=true]{color:var(--primary)}
.effect-favorite[aria-pressed=true] svg{fill:var(--selection)}
.effect-quick-volume{display:grid;grid-template-columns:1fr auto;gap:6px 10px;min-width:0;margin:0;padding-left:18px;border-left:1px solid var(--border);font-size:13px}
.effect-quick-volume output{color:var(--text);font-variant-numeric:tabular-nums}
.effect-quick-volume input[type=range]{grid-column:1/-1;appearance:none;-webkit-appearance:none;width:100%;height:42px;margin:0;border:0;border-radius:0;padding:0;box-shadow:none;background:transparent;accent-color:var(--primary)}
.effect-quick-volume input::-webkit-slider-runnable-track{height:5px;border-radius:8px;background:linear-gradient(to right,var(--primary) 0 var(--effect-gain),var(--border) var(--effect-gain) 100%)}
.effect-quick-volume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-4.5px;border:2px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px var(--border)}
.effect-quick-volume input::-moz-range-track{height:5px;border-radius:8px;background:var(--border)}
.effect-quick-volume input::-moz-range-progress{height:5px;border-radius:8px;background:var(--primary)}
.effect-quick-volume input::-moz-range-thumb{width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--primary)}
.effect-quick-edit .effect-close-editor{width:36px;padding:0;display:grid;place-items:center;background:transparent;border-color:transparent;color:var(--muted)}
.effect-quick-edit .effect-close-editor:hover:not(:disabled){background:var(--selection);color:var(--text);border-color:transparent}
.effect-quick-edit button:focus-visible,.effect-quick-edit input[type=range]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.effect-quick-edit input:not([type=range]):focus{border-color:var(--primary)}
@media(max-width:900px){.effect-quick-edit{grid-template-columns:auto minmax(0,1fr) 36px;gap:12px}.effect-quick-name{grid-column:1/-1}.effect-quick-volume{padding-left:12px}}
@media(max-width:450px){.effect-quick-edit{grid-template-columns:minmax(0,1fr) 36px;padding:12px;gap:10px}.effect-quick-name{grid-row:1}.effect-quick-edit .effect-favorite{grid-row:2;justify-self:start}.effect-close-editor{grid-row:2;grid-column:2}.effect-quick-volume{grid-column:1/-1;grid-row:3;border:0;padding:0}.effect-name-controls{gap:6px}.effect-quick-edit .effect-save-name{padding:8px 10px}.effect-quick-volume input[type=range]{height:32px}}

/* Management and categories share one desktop row. */
.effect-navigation{display:flex;gap:12px;min-width:0;flex-shrink:0}
.effect-navigation .effect-management{flex:3;min-width:0;gap:6px}
.effect-navigation .effect-categories{flex:5;min-width:0;gap:6px;grid-template-columns:repeat(5,minmax(0,1fr));padding-left:12px;border-left:1px solid var(--border)}
.effect-navigation .btn{min-width:0;white-space:nowrap;padding:7px 4px;min-height:36px;font-size:12px}
.effect-quick-actions{display:flex;align-items:center;gap:8px;min-width:0}
.effect-quick-edit .effect-pause{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--selection);border-color:var(--border);min-width:106px}
.effect-quick-edit .effect-pause:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 18%,var(--surface))}

/* Keep shortcut controls in view; only the growing collection scrolls. */
.legacy-effects[data-effects-mode=shortcuts]{flex:1 1 0;padding:16px;overflow:auto}
.effect-shortcut-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,34%);gap:16px;flex:1;min-height:120px;min-width:0}
.effect-shortcut-list{display:flex;flex-direction:column;min-height:0;min-width:0;gap:8px}
.effect-shortcut-workspace .effects-toolbar{margin:0;padding:8px;gap:6px;background:var(--surface);border-color:var(--border);font-size:12px;flex-shrink:0}
.effect-shortcut-list>.effects-toolbar>span{flex:1 1 160px;color:var(--muted)}
.effect-shortcut-list>.effect-grid{flex:1;min-height:70px;max-height:none;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;overscroll-behavior:contain}
.effect-shortcut-controls{display:flex;flex-direction:column;min-width:0;min-height:0;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:auto}
.effect-shortcut-controls .effects-toolbar{padding:0;border:0}
.effect-shortcut-controls .effects-function-keys{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.effect-shortcut-controls .effects-function-keys label{min-width:0;gap:3px}
.effect-shortcut-controls .effects-function-keys input{width:100%;min-height:34px;padding:6px 8px;font-size:12px}
.effect-shortcut-controls .effects-function-keys>.btn{min-height:34px;padding:6px 8px}
.effect-shortcut-controls .effect-keyboard{min-width:0;margin:0;padding:0;border:0;background:transparent}
.effect-shortcut-controls .effect-keyboard summary{line-height:1.6;margin:0;padding:0}
.effect-shortcut-controls .effect-keyboard .btn{min-height:26px;padding:3px 0;font-size:10px;border-radius:5px}
.effect-shortcut-controls .effect-keyboard .btn.primary{background:var(--selection);border-color:var(--border);color:var(--text);box-shadow:none}
.effect-shortcut-controls .effect-keyboard>p{font-size:11px;max-height:64px;overflow:auto;overflow-wrap:anywhere;margin:6px 0 0}
.legacy-effects[data-effects-mode=shortcuts]>.effect-quick-edit{flex-shrink:0;padding:10px;gap:10px}
@media(max-width:1100px){
 .effect-shortcut-workspace{grid-template-columns:minmax(0,1fr) minmax(270px,40%);gap:10px}
}
@media(max-width:750px){
 .effect-navigation{flex-wrap:wrap;gap:6px}
 .effect-navigation .effect-management,.effect-navigation .effect-categories{flex:1 0 100%;border:0;padding:0}
 .legacy-effects[data-effects-mode=shortcuts]{padding:10px;gap:8px}
 .effect-shortcut-workspace{display:flex;flex-direction:column;gap:8px;min-height:180px}
 .effect-shortcut-controls{order:-1;flex-shrink:0;padding:8px;gap:8px;overflow:visible}
 .effect-shortcut-list{flex:1;min-height:70px}
 .effect-shortcut-controls .effects-function-keys{grid-template-columns:repeat(2,minmax(0,1fr))}
 .effect-shortcut-controls .effects-function-keys>.btn{grid-column:1/-1}
 .effect-shortcut-controls .effect-keyboard .btn{min-height:24px}
 .effect-shortcut-list>.effects-toolbar>span{flex-basis:100%}
 .effect-shortcut-list>.effects-toolbar>.btn{flex:1;min-height:32px;padding:5px}
}
@media(max-width:450px){
 .effect-shortcut-controls .effect-keyboard>p{display:none}
 .effect-shortcut-list>.effects-toolbar>span{display:none}
 .effect-quick-actions{grid-row:2;gap:6px}
 .effect-quick-edit .effect-pause{min-width:0;padding:8px;gap:4px}
 .effect-quick-edit .effect-favorite{padding:8px;gap:4px}
 .legacy-effects[data-effects-mode=shortcuts]>.effect-quick-edit{grid-template-columns:minmax(0,1fr) 30px}
}
@media(max-height:650px) and (min-width:751px){
 .legacy-effects[data-effects-mode=shortcuts]{padding:10px;gap:8px}
 .effect-shortcut-controls{gap:8px;padding:8px}
 .effect-shortcut-controls .effects-function-keys{grid-template-columns:repeat(2,minmax(0,1fr))}
 .effect-shortcut-controls .effects-function-keys>.btn{grid-column:1/-1}
 .effect-shortcut-controls .effects-function-keys input:not([type=range]):not([type=checkbox]){min-height:34px;padding:6px 8px}
 .effect-shortcut-controls .effect-keyboard>div{margin-top:3px}
 .effect-shortcut-controls .effect-keyboard .btn{min-height:23px;padding:2px 0}
 .effect-shortcut-controls .effect-keyboard>p{max-height:24px}
}

/* Real file fetch, integrity verification and audio decode share one pending state. */
.effect-loading-spinner{display:inline-block;box-sizing:border-box;width:16px;height:16px;flex-shrink:0;border:2px solid var(--primary);border-right-color:transparent;border-radius:50%;animation:effect-loading-spin .8s linear infinite}
.legacy-effects .effect-tile[aria-busy=true] .effect-name{position:relative;padding-right:32px}
.effect-tile-spinner{position:absolute;right:10px;top:calc(50% - 8px);pointer-events:none}
.effect-quick-edit .effect-pause[aria-busy=true]{opacity:1;color:var(--text);cursor:wait}
@keyframes effect-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.effect-loading-spinner{animation:none}}