/* Content-specific and existing surface rules. Shared primitives live in ui-components.css. */
@layer legacy {*{box-sizing:border-box}body{margin:0}input[type=checkbox],input[type=color],input[type=range]{width:auto}textarea{resize:vertical;min-height:100px;line-height:1.6}label{display:block;color:#afbdce;font-size:.875rem;margin:12px 0 7px}h1,h2,h3,p{margin-top:0}h1{font-size:1.8rem;letter-spacing:-.04em;margin-bottom:8px}h2{font-size:1.2rem}h3{font-size:1rem}.muted{color:var(--muted);font-size:.875rem}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.75rem;font-weight:700;color:var(--accent);margin-bottom:14px}.shell{display:grid;grid-template-columns:215px 1fr;min-height:100vh}.sidebar{background:#101822;border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;gap:7px}.brand{font-size:1.2rem;font-weight:750;margin:0 8px 36px;display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:31px;height:31px;background:var(--accent);color:#192414;border-radius:8px}.nav{text-align:left;border:0;background:transparent;color:#9eafc4;padding:13px}.nav.active{background:#26362f;color:#c7f4a7}.sidebar footer{margin-top:auto;padding:24px 10px 0;line-height:1.7}.main{min-width:0}.topbar{height:73px;border-bottom:1px solid var(--line);padding:0 30px;display:flex;justify-content:space-between;align-items:center}.save{font-size:.875rem;color:var(--accent)}.content{padding:30px;max-width:1600px;margin:auto}.heading,.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.heading{margin-bottom:28px}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}.card,.panel{border:1px solid var(--line);background:var(--ui-surface);border-radius:10px;padding:22px}.card{min-width:0}.card h2{margin:18px 0 12px}.card .actions{margin-top:25px}.date{color:var(--ui-accent);font-size:.875rem}.tag{font-size:.75rem;display:inline-block;border:1px solid #364858;color:#afbdd0;border-radius:4px;padding:4px 7px}.split{display:grid;grid-template-columns:minmax(300px, .8fr) minmax(400px,1.2fr);gap:24px}.item{display:flex;align-items:center;gap:10px;padding:13px 10px;border:1px solid var(--line);border-radius:7px;background:#192533;margin-bottom:9px}.item.selected{border-color:var(--accent);background:#24342e}.item .name{flex:1;text-align:left;background:none;border:0;padding:6px;min-width:0;overflow-wrap:anywhere}.item .number{font-size:.8rem;color:#8496ab}.small{padding:6px 9px;font-size:.875rem}.empty{padding:40px 20px;text-align:center;border:1px dashed #354657;border-radius:8px;color:var(--muted);line-height:1.7}.stage{aspect-ratio:16/9;position:relative;overflow:hidden;background:#000;border-radius:7px;container-type:inline-size;display:flex;align-items:center;justify-content:center}.stage .lyrics{width:100%;white-space:pre-wrap;line-height:1.25;overflow-wrap:anywhere}.stage img,.stage video{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.stage .caption{position:absolute;bottom:3%;left:5%;right:5%;font-size:1.1cqw;opacity:.7;text-align:center}.stage-title{display:flex;justify-content:space-between;margin-bottom:12px;font-size:.75rem;letter-spacing:.12em;font-weight:700;color:#9badc1}.live-dot{color:var(--ui-live)}.slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:18px}.slide{padding:5px;background:#131e29}.slide.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.slide .stage{border-radius:3px}.slide-label{font-size:.75rem;display:block;padding:7px 4px 3px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.console{display:grid;grid-template-columns:260px 1fr;gap:24px}.console-stages{display:grid;grid-template-columns:1fr 1fr;gap:20px}.transport{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.statusbar{padding:13px 17px;background:#1b2c26;color:#c4eab0;border:1px solid #354c39;border-radius:7px;margin-bottom:22px;font-size:.875rem}.warning{color:#ffd399;background:#332a20;border-color:#64503a}.search{max-width:380px;margin-bottom:22px}dialog textarea.lyric-input{height:310px;font-family:Consolas,monospace}.loading{padding:50px}.media-thumb{height:150px;background:#080e15;margin:0 0 16px;display:flex;align-items:center;justify-content:center;overflow:hidden}.media-thumb img,.media-thumb video{max-width:100%;max-height:100%}.text-right{text-align:right}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}a{color:var(--accent)}.video-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.video-controls label{margin:0}.video-controls input[type=range]{max-width:170px}#display-root{position:fixed;inset:0;background:#000}#display-root .stage{width:100%;height:100%;border-radius:0;aspect-ratio:auto}.display-body{overflow:hidden;background:#000}@media(max-width:1100px){.shell{grid-template-columns:170px 1fr}.content{padding:22px}.console{grid-template-columns:210px 1fr}.console-stages{grid-template-columns:1fr}.split{grid-template-columns:1fr}.heading{align-items:flex-start}}@media(max-width:700px){.shell{display:block}.sidebar{flex-direction:row;flex-wrap:wrap;padding:12px}.brand{margin:0 12px 0 0}.sidebar footer{display:none}.nav{padding:10px}.topbar{padding:0 16px}.heading{flex-direction:column}.console{display:block}.console-stages{margin-top:20px}.field-grid{grid-template-columns:1fr}}

#display-root{display:flex;align-items:center;justify-content:center}#display-root .song-stage{width:min(100vw,177.7778vh);height:min(100vh,56.25vw);flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.section-chip{--chip-bg:#293b51;--chip-fg:#c6dcfa;--chip-border:#46688d;display:inline-flex;align-items:center;gap:5px;background:var(--chip-bg);color:var(--chip-fg);border:1px solid var(--chip-border);border-radius:7px;padding:7px 10px;font-size:.875rem;font-weight:650}
.section-chip:hover{background:var(--chip-bg);filter:brightness(1.12)}
.section-verse{--chip-bg:#233d57;--chip-fg:#bbdcff;--chip-border:#416789}
.section-chorus{--chip-bg:#254533;--chip-fg:#c0efac;--chip-border:#52794d}
.section-pre{--chip-bg:#254546;--chip-fg:#a6e9e7;--chip-border:#478280}
.section-bridge{--chip-bg:#443054;--chip-fg:#e5c7ff;--chip-border:#785399}
.section-other{--chip-bg:#493923;--chip-fg:#f7d39a;--chip-border:#81633c}
.section-block{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:14px}
.section-block textarea{margin-top:10px;min-height:150px}
.section-heading{width:190px;max-width:70%}
.arrangement-order{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:12px;min-height:72px;border:1px dashed #455568;border-radius:8px}
.arrangement-entry{padding:6px;cursor:grab;max-width:100%}.arrangement-entry.dragging{opacity:.4}
.arrangement-entry button{background:transparent;color:inherit;border:0;padding:5px;font-size:.875rem}.arrangement-entry button:hover{background:#ffffff18}
.order-label{overflow-wrap:anywhere}.drag-grip{font-size:1.2rem}.song-preview{max-height:65vh;overflow:auto;padding-right:6px}.preview-section-label{margin:18px 0 8px}.preview-section-label:first-child{margin-top:0}
.song-editor-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}details{margin-top:18px}summary{cursor:pointer;color:#b5c7dc}.bold-setting{display:flex;gap:9px;align-items:center;margin-top:20px}
.console.three-panel{grid-template-columns:minmax(200px,.65fr) minmax(0,1fr) minmax(0,1fr);align-items:start;gap:18px}
.console-panel{min-width:0;border:1px solid var(--line);border-radius:9px;background:#121c28;padding:16px;min-height:400px}
.schedule-panel select{margin-bottom:16px}.schedule-panel .actions{margin:20px 0 8px}.preview-panel .slides{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-hint{margin-top:14px;line-height:1.5}.live-panel .stage-title{gap:10px}.live-panel #live-label{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:1000px){.shell:has(.three-panel){grid-template-columns:170px 1fr}.content:has(.three-panel){max-width:none;padding:24px}}
@media(max-width:1000px){.console.three-panel{grid-template-columns:190px minmax(230px,1fr) minmax(230px,1fr);overflow-x:auto}.console-panel{padding:12px}}
@media(max-width:700px){.console.three-panel{display:grid;grid-template-columns:1fr;overflow:visible}.console-panel{min-height:0}.song-editor-layout{grid-template-columns:1fr}}
.shell.compact-shell{display:block;grid-template-columns:1fr}.compact-topbar{height:62px;padding:0 24px;border-bottom:0}.app-title{font-weight:700;font-size:1rem}.compact-shell .content:has(.three-panel){padding-top:8px;max-width:none}.compact-shell .console.three-panel{grid-template-columns:minmax(220px,.65fr) minmax(0,1fr) minmax(0,1fr)}.panel-toolbar{min-height:38px;align-items:center;margin-bottom:12px}.panel-toolbar .actions{gap:4px;flex-wrap:nowrap}.panel-toolbar .primary{letter-spacing:normal}.preview-panel .preview-hint{font-size:.8rem}.connection-label{font-size:.8rem;color:#99adbd}.readiness{font-size:.8rem;margin-top:22px;line-height:1.5}.update-note{margin-bottom:12px}.item-type-icon{color:#aecfee}.type-song{color:#b6dd92}.type-image{color:#95c8f1}.type-video{color:#d8a9eb}.type-pptx{color:#eab589}.live-panel #live-label{max-width:none;white-space:normal;margin-top:16px}.logo-preview{margin:16px 0}.logo-preview img{max-width:100%;max-height:150px;object-fit:contain}hr{border:0;border-top:1px solid var(--line);margin:26px 0}
#navigation{display:none;min-height:100vh;padding:22px 16px;background:#121d2a;border-right:1px solid var(--line);flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}.navigation-open #navigation{display:flex}.compact-shell.navigation-open{display:grid;grid-template-columns:250px minmax(0,1fr)}#navigation nav{display:flex;flex-direction:column;gap:6px;margin-top:22px}#navigation .row h2{margin:0}.account-menu{margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}.account-menu .account-email{overflow-wrap:anywhere;margin-bottom:5px}.account-menu .nav{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:12px;text-align:left}
.service-section{margin:18px 0 9px;border:1px solid #3c5267;border-radius:7px;background:#203043;overflow:hidden}.section-row{display:flex;align-items:center;gap:4px}.section-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:left;border:0;border-radius:0;background:transparent;color:#c6def6;padding:12px}.section-toggle span:first-child{flex:1;overflow-wrap:anywhere}.section-edit-actions{display:flex;gap:3px;justify-content:flex-end;border-top:1px solid #34495d;padding:3px 5px}.service-section[draggable=true]{cursor:grab}
.service-section{border:0;border-bottom:1px solid #53687c;border-radius:0;background:transparent;margin:14px 0 9px;overflow:visible}.section-toggle{padding:7px 2px;font-size:.875rem}.section-toggle:hover{background:transparent;color:#e5f1ff}.section-row{min-height:30px}.section-edit-actions{border-top:0}.panel-content-title,.live-panel #live-label{font-size:1rem;font-weight:600;line-height:1.4;min-height:1.4em;margin:0 0 12px;color:#d7e6f2;max-width:none;white-space:normal;overflow-wrap:anywhere}.compact-topbar .brand-mark{width:26px;height:30px;border-radius:8px}.schedule-panel .panel-toolbar .actions{margin:0;gap:5px}
.service-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:8px 10px;margin:0 0 12px;border:1px solid #2e4153;border-radius:4px;background:#152332;color:#d4e3f1;text-align:left;font-size:.78rem;font-weight:600}.service-bar:hover{background:#203348}.service-bar span:first-child{min-width:0;overflow-wrap:anywhere}
.drag-handle{cursor:grab;border:0;background:transparent;color:#8ca2b8;font-size:1.5rem;padding:4px 7px;line-height:1;flex-shrink:0}.drag-handle:active{cursor:grabbing}.service-section:has(.section-edit-actions){position:relative;padding-right:38px}.section-edit-actions{position:absolute;right:0;top:0;padding:0}.section-edit-actions .icon-button{color:var(--ui-danger-text)}
[data-schedule-row]{position:relative}
.add-library-groups{margin-top:20px;max-height:50vh;overflow:auto;padding-right:6px}.add-library-group+ .add-library-group{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.add-library-group h3{display:flex;align-items:center;gap:10px;color:#c4daf0}.add-library-group .name{overflow-wrap:anywhere}
.video-controls.video-player-controls{display:block;margin-top:16px}.video-player-controls input[type=range]{accent-color:var(--ui-accent);padding:0;cursor:pointer}.video-player-controls input.video-timeline{display:block;width:100%;max-width:none;height:20px;margin:0 0 8px}.video-control-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.video-control-row .actions{gap:2px;flex-wrap:nowrap}.video-volume-controls{display:flex;align-items:center;gap:4px;margin-left:auto}.video-volume-controls input[type=range]{width:72px;max-width:72px}.video-clock{font-size:.75rem;white-space:nowrap}.video-control-row .icon-button{width:32px;height:32px;padding:6px}
.muted-preview-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}.muted-preview-controls .preview-seek{flex:1;min-width:80px;width:80px;padding:0;accent-color:var(--ui-accent)}.muted-preview-controls .muted{font-size:.75rem;white-space:nowrap}
.schedule-thumbnail{position:relative;display:grid;place-items:center;width:64px;height:42px;flex-shrink:0;overflow:hidden;border-radius:4px;background:#090f18;color:#9ebbd5;border:1px solid #3a4b5c}.schedule-thumbnail img,.schedule-thumbnail video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.thumbnail-play{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;background:#000b;border-radius:3px;padding:2px;color:white}.thumbnail-play .ui-icon{width:12px;height:12px}
@media(max-width:900px){.compact-shell .console.three-panel{grid-template-columns:190px minmax(240px,1fr) minmax(240px,1fr)}.compact-shell .content{padding:16px}.compact-topbar{padding:0 16px}}
@media(max-width:700px){.compact-shell .console.three-panel{grid-template-columns:1fr}.connection-label{display:none}}
.library-list{display:flex;flex-direction:column;gap:0;border-top:1px solid #304253}.library-list .card{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 4px;border:0;border-bottom:1px solid #304253;border-radius:0;background:transparent}.library-list .card h2{font-size:1rem;min-width:180px;flex:1;margin:0}.library-list .card p{margin:0;font-size:.8rem}.library-list .card .actions{margin-left:auto}.library-list .card .media-thumb{width:64px;height:42px;margin:0;flex-shrink:0}.library-list .card .media-thumb img{width:100%;height:100%;object-fit:cover}.media-tabs{display:flex;gap:4px;border-bottom:1px solid #304253;margin:16px 0}.media-tabs button{border:0;border-radius:0;background:transparent;padding:10px 16px}.media-tabs button[aria-selected=true]{color:var(--ui-accent);border-bottom:2px solid var(--ui-accent)}.console .preview-panel .slides,.console .live-panel .slides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.slide .slide-label .section-chip{font-size:.75rem;padding:3px 7px;display:inline-block}.stage-stack{display:grid;background:#000;overflow:hidden}.stage-stack>.stage{grid-area:1/1;min-width:0}.stage-enter{animation:stage-fade-in .3s ease both}.stage-leave{pointer-events:none;animation:stage-fade-out .3s ease both}@keyframes stage-fade-in{from{opacity:0}to{opacity:1}}@keyframes stage-fade-out{from{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.stage-enter,.stage-leave{animation:none}}
#display-root.stage-stack{display:grid;place-items:center}#display-root.stage-stack>.stage{grid-area:1/1}
.library-list .card>.actions{margin-top:0;margin-bottom:0;align-items:center}.library-list .card>.muted{align-self:center;line-height:1.4;white-space:normal}.library-list .card>.row{margin:0;align-items:center}.library-list .media-thumb video{width:100%;height:100%;object-fit:cover}.previous-services{margin-top:24px}.previous-services>summary{padding:12px 0;cursor:pointer;color:var(--muted)}.section-row{padding-bottom:5px;align-items:center}.section-row>.icon-button{width:28px;height:28px;padding:4px;margin:0 0 0 4px;align-self:center}.section-row>.icon-button svg{width:18px;height:18px}.section-toggle{min-height:28px}.compact-shell .content{max-width:none}.compact-shell .console.three-panel{gap:12px;grid-template-columns:minmax(190px,.6fr) minmax(0,1fr) minmax(0,1fr)}.console-panel{padding:12px}.console .item{padding:10px;min-height:54px}.console .panel-content-title{font-size:.875rem;margin-bottom:8px}.console .stage-title{margin-bottom:10px}.console .preview-panel .slides,.console .live-panel .slides{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.console .slide{padding:4px}.compact-shell .compact-topbar{height:52px}.console .schedule-thumbnail{width:48px;height:32px}@media(min-width:1000px){.compact-shell .content{padding:16px 20px}.console .preview-panel>.stage,.console .preview-panel>.muted-preview-player>.stage,.console #live-stage{max-width:520px;margin-left:auto;margin-right:auto}}@media(max-width:700px){.compact-shell .console.three-panel{grid-template-columns:1fr}.library-list .card>.actions{margin-left:0}.library-list .card h2{min-width:120px}}
#popup-help{position:fixed;inset:100px 24px auto auto;margin:0;width:min(440px,calc(100vw - 32px));overflow:visible;border-color:var(--ui-accent);padding:24px}#popup-help::backdrop{background:#020812aa}#popup-help p,#popup-help li{line-height:1.5}#popup-help ol{padding-left:22px}#popup-help li+li{margin-top:10px}.popup-arrow{position:absolute;right:120px;top:-92px;width:88px;height:88px;pointer-events:none}.popup-arrow svg{width:100%;height:100%;fill:none;stroke:var(--ui-accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}@media(max-height:650px){#popup-help{max-height:calc(100dvh - 120px);overflow-y:auto}.popup-arrow{display:none}}
/* Media children are absolutely positioned, so they cannot size an auto grid track. */
#display-root.stage-stack{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#display-root>.stage:not(.song-stage){width:100vw;height:100vh;min-width:0;min-height:0}

/* Output fullscreen invitation. */
#display-setup{position:fixed;inset:0;z-index:3;display:grid;place-items:center;padding:32px;background:#000;overflow:hidden}
#display-setup[hidden]{display:none}
.display-setup-card{width:min(620px,100%);text-align:center}.display-setup-card h1{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:18px}.display-setup-card>p{font-size:clamp(1rem,2vw,1.2rem);line-height:1.55;margin:0 auto 28px;color:#d7e3ed}.display-setup-card>p.muted{max-width:520px;margin:24px auto 0;font-size:.9rem;color:var(--muted)}
#display-setup #fullscreen{position:relative;padding:24px 40px;max-width:100%;min-width:min(420px,100%);border:2px solid #c9f5ad;border-radius:16px;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:750;color:#13210d;background:var(--ui-accent);box-shadow:0 12px 50px #07371b66}
#display-setup #fullscreen:hover{background:#c3efa3}
#display-setup #fullscreen:focus-visible{outline:4px solid white;outline-offset:7px}
.login-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#0b1119}
.login-card{width:min(420px,calc(100vw - 32px));padding:28px;background:#14202d;border:1px solid #324454;border-radius:12px;box-sizing:border-box}.login-card label{display:block;margin:18px 0}.login-card [hidden]{display:none}.login-card input{box-sizing:border-box;width:100%;margin-top:8px}.login-card .brand{color:var(--ui-accent);font-weight:700}.login-card [role=status]{min-height:24px}.login-card [data-again]{margin-top:12px}
.members-dialog form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.members-dialog .card select{width:auto;margin-left:auto}
@media(max-width:700px){.compact-shell.navigation-open{display:block}.navigation-open #navigation{position:relative;height:auto;min-height:0}}
.console-shell{height:100dvh;min-height:0;overflow:hidden}.console-shell .main{display:flex;min-height:0;height:100dvh;overflow:hidden;flex-direction:column}.console-shell .compact-topbar{flex:0 0 auto}.console-shell .content:has(.three-panel){display:flex;min-height:0;flex:1;overflow:hidden;flex-direction:column}.console-shell .service-bar{flex:0 0 auto}.console-shell .console.three-panel{min-height:0;flex:1;align-items:stretch}.console-shell .console-panel{display:flex;min-height:0;overflow:hidden;flex-direction:column}.console-shell .preview-panel>.stage,.console-shell .preview-panel>.muted-preview-player,.console-shell .live-panel>#live-stage{flex:0 0 auto}.console-shell .schedule-scroll,.console-shell .console-panel>.slides{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px}.console-shell .schedule-scroll{flex:1}.console-shell .console-panel>.slides{flex:1;align-content:start}@media(max-width:700px){.console-shell{height:auto;min-height:100vh;overflow:visible}.console-shell .main{display:block;height:auto;overflow:visible}.console-shell .content:has(.three-panel){display:block;overflow:visible}.console-shell .console-panel{max-height:calc(100dvh - 90px);margin-bottom:14px}.console-shell .schedule-panel{height:calc(100dvh - 90px)}}
.console-shell .panel-stage,.console-shell .live-panel>#live-stage{width:100%;max-width:520px;align-self:center;flex:none}.console-shell .panel-stage>.stage,.console-shell .panel-stage>.muted-preview-player>.stage,.console-shell .live-panel>#live-stage>.stage{width:100%;max-width:none;margin:0}.console-shell .panel-stage>.muted-preview-player{width:100%}.console-shell .slide-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px;margin-top:16px}.console-shell .slide-scroll>.slides{margin-top:0;align-content:start}@media(max-width:700px){.console-shell .slide-scroll{min-height:120px}}
.console-shell,.console-shell .main,.console-shell .content:has(.three-panel),.console-shell .service-bar,.console-shell .console.three-panel{width:100%;max-width:none}.console-shell .content:has(.three-panel){margin-left:0;margin-right:0}
.shell.compact-shell{display:grid;grid-template-columns:62px minmax(0,1fr)}.shell.compact-shell.navigation-open{grid-template-columns:250px minmax(0,1fr)}#navigation{display:flex;width:auto;min-width:0;height:100dvh;min-height:100dvh;padding:12px 8px;overflow-x:hidden}.navigation-header{display:flex;min-height:92px;align-items:center;gap:8px;padding:0 4px;flex-direction:column}.navigation-header .icon-button{flex:0 0 38px}.sidebar-brand{display:flex;min-width:0;align-items:center;gap:9px;font-size:1rem}.sidebar-brand .brand-mark{width:32px;height:32px;flex:0 0 32px}.sidebar-brand strong{overflow:hidden;text-overflow:ellipsis}.navigation-open .navigation-header{align-items:flex-start}.navigation-open .sidebar-brand{padding-left:3px}.compact-topbar{justify-content:flex-end}.nav-entry{display:flex;width:100%;min-width:0;align-items:center;gap:12px;white-space:nowrap;overflow:hidden}.nav-entry .ui-icon{width:22px;height:22px;flex:0 0 22px}.compact-shell:not(.navigation-open) #navigation .nav-label,.compact-shell:not(.navigation-open) #navigation .account-details{display:none}.compact-shell:not(.navigation-open) #navigation .nav-entry{justify-content:center;padding:11px 8px}.navigation-open #navigation .nav-entry{justify-content:flex-start}.navigation-open #navigation .nav-label{overflow:hidden;text-overflow:ellipsis}.account-details{padding:0 8px}.account-menu .nav-entry{margin-top:4px}#navigation [hidden]{display:none}@media(max-width:700px){.shell.compact-shell{display:grid;grid-template-columns:56px minmax(0,1fr)}.shell.compact-shell.navigation-open{display:grid;grid-template-columns:220px minmax(0,1fr)}.navigation-open #navigation{position:sticky;height:100dvh;min-height:100dvh}}
.next-service{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:clamp(24px,4vw,48px);border:1px solid #3c5367;border-radius:12px;background:linear-gradient(135deg,#172635,#111b27);box-shadow:0 18px 50px #0002}.next-service .eyebrow{margin-bottom:8px}.next-service .date{font-size:1rem}.next-service h2{font-size:clamp(1.8rem,4vw,3rem);margin:8px 0 10px}.service-meta{color:#c2d2e1;font-weight:650}.next-service-actions{display:flex;min-width:190px;flex-direction:column;gap:10px}.next-service-actions>button{width:100%}.service-start{min-height:54px;font-size:1.05rem}.service-more{margin:0}.service-more>summary{padding:7px;text-align:center;font-size:.8rem;color:var(--muted)}.service-more .actions{justify-content:center;margin-top:6px}.other-services{margin-top:30px}.service-list{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:18px;padding:16px 4px;border-bottom:1px solid var(--line)}.service-row h2{margin:4px 0;font-size:1rem}.service-row p{margin:0}.previous-services{margin-top:28px}.previous-services>summary{padding:14px 0}.service-empty h2{margin-bottom:8px}.service-empty p{margin-bottom:18px}.service-empty>.actions{justify-content:center}@media(max-width:760px){.next-service{grid-template-columns:1fr;gap:20px}.next-service-actions{min-width:0}.service-row{grid-template-columns:1fr}.service-row>.actions{justify-content:flex-start}.service-row>.service-more{justify-self:start}}
.compact-topbar:has(.output-start-bar){justify-content:stretch}.output-start-bar{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:12px;padding:5px 6px 5px 12px;border:1px solid #557747;border-radius:6px;background:#203424;color:#e4f8d6;font-size:.78rem;font-weight:700}.output-start-bar .primary{min-height:32px;padding:6px 12px;font-size:.78rem}@media(max-width:700px){.compact-topbar:has(.output-start-bar){height:auto;min-height:52px;padding-block:6px}}
.slides.lyric-list{display:flex;flex-direction:column;gap:5px;padding-left:96px}.lyric-row{position:relative;display:block;width:100%;padding:10px 14px;border:1px solid #33475a;border-radius:8px;background:#172331;text-align:left;overflow:visible}.lyric-row:hover{background:#203144}.lyric-row.selected{background:#273b32;border-color:var(--accent)}.lyric-row::before,.song-preview-row::before{content:"";position:absolute;left:-11px;top:7px;bottom:7px;width:6px;border-radius:4px;background:var(--chip-border)}.lyric-row.group-continues-before::before,.song-preview-row.group-continues-before::before{top:-6px}.lyric-row.group-continues-after::before,.song-preview-row.group-continues-after::before{bottom:-6px}.lyric-text{display:block;color:#edf4fb;font-size:.9rem;font-weight:550;line-height:1.35;white-space:pre-line;overflow-wrap:anywhere}.lyric-row .slide-label{position:absolute;right:calc(100% + 8px);top:7px;display:block;width:82px;padding:0;text-align:right;overflow:visible}.lyric-row .section-chip{display:inline-block;max-width:82px;font-size:.7rem;padding:3px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-lyrics-heading{margin-top:24px}.song-lyrics-heading label{margin:0}.song-label-tools{margin:10px 0}.song-lyrics-input{min-height:430px;font-family:inherit;line-height:1.45}.song-output-preview{min-width:0}.song-output-preview #song-preview-stage>.stage{width:100%}.song-slide-heading{margin-top:18px}.song-preview-list{display:flex;max-height:360px;overflow-y:auto;flex-direction:column;gap:5px;padding:0 4px 0 96px}.song-preview-row{position:relative;display:block;width:100%;padding:10px 14px;text-align:left;background:#172331;border-color:#33475a;overflow:visible}.song-preview-row.selected{background:#273b32;border-color:var(--accent)}.song-preview-label{position:absolute;right:calc(100% + 8px);top:7px;display:block;width:82px;text-align:right}.song-preview-text{display:block;white-space:pre-line;line-height:1.35}.song-preview-row .section-chip{display:inline-block;max-width:82px;font-size:.7rem;padding:3px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.save-choice-dialog{width:min(560px,92vw)}.save-choice{display:flex;align-items:flex-start;gap:12px;margin:10px 0;padding:16px;border:1px solid var(--line);border-radius:9px;background:#111b27;cursor:pointer}.save-choice.selected{border-color:var(--accent);background:#203127}.save-choice input{margin-top:3px}.save-choice span{display:grid;gap:5px}.save-choice small{color:var(--muted);line-height:1.4}@media(max-width:700px){.song-lyrics-input{min-height:320px}.song-preview-list{max-height:none}}
.console .item{position:relative;overflow:hidden;padding-bottom:13px}.content-download{position:absolute;left:0;right:0;bottom:0;height:3px;background:#243442}.content-download>span{display:block;height:100%;min-width:2px;background:var(--accent);transition:width .2s ease}.content-download.status-ready{display:none}.content-download.status-loading>span{width:34%;background:#8ee276;animation:local-download 1.2s ease-in-out infinite}.content-download.status-error>span{width:100%;background:#e27373}@keyframes local-download{from{transform:translateX(-105%)}to{transform:translateX(300%)}}.schedule-ready{position:relative;display:flex;min-height:34px;flex:0 0 auto;align-items:center;justify-content:center;gap:7px;overflow:hidden;margin-top:9px;padding:7px 6px;border-top:1px solid #2e4153;color:#aeda91;font-size:.72rem;font-weight:650}.schedule-ready-icon{display:grid;width:17px;height:17px;flex:0 0 17px;place-items:center;border-radius:50%;background:#29452e;color:#c7f1a9;font-size:.7rem}.schedule-ready-icon .ui-icon{width:14px;height:14px}.schedule-ready-text{min-width:0;line-height:1.2}.schedule-ready.status-loading{color:#b9c8d8}.schedule-ready.status-error{color:#ffb9bd}.schedule-ready.status-error .schedule-ready-icon{background:#512d33;color:#ffb9bd}.schedule-ready .small{margin-left:auto;padding:4px 8px;font-size:.68rem}.schedule-ready-progress{position:absolute;right:0;bottom:0;left:0;height:2px;background:#243442}.schedule-ready-progress>span{display:block;height:100%;background:var(--accent);transition:width .2s ease}.schedule-ready.status-error .schedule-ready-progress>span{background:#e27373}.schedule-ready.status-ready .schedule-ready-progress{display:none}
.nav-present{margin-top:8px;background:transparent;color:#bff29d;border:1px solid transparent}.nav-present:hover{background:#263b2b}.nav-present.active{background:var(--accent);color:#172312;border-color:var(--accent)}
.dialog-heading{position:sticky;z-index:2;top:-28px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-28px -28px 20px;padding:20px 28px 14px;background:#141e2af2;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.dialog-heading h2{margin:7px 0 0}.media-preview-dialog{display:flex;min-height:0;height:100%;flex-direction:column}.media-preview-dialog .dialog-heading{position:relative;top:auto;flex:0 0 auto}.media-preview-dialog>.statusbar{flex:0 0 auto}.media-preview-layout{display:grid;min-height:0;flex:1;align-items:start;overflow:hidden}.media-preview-layout.presentation-preview{grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:20px}.media-preview-layout #media-preview-stage{min-width:0;align-self:start}.media-preview-layout #media-preview-stage>.stage{width:100%}.ppt-preview-slides{display:grid;min-height:0;height:100%;grid-template-columns:1fr;align-content:start;gap:10px;padding:2px 6px 2px 2px;overflow-y:auto;overscroll-behavior:contain}.ppt-preview-slides .slide{width:100%}.ppt-preview-slides .slide-label{text-align:center}dialog:has(>.media-preview-dialog){overflow:hidden}dialog:has(>.presentation-preview-dialog){width:min(960px,calc(100vw - 32px));height:min(720px,calc(92vh - 16px))}dialog:has(>.single-preview-dialog){width:min(780px,calc(100vw - 32px));height:auto}.single-preview-dialog .media-preview-layout{display:block}.single-preview-dialog #media-preview-stage{width:100%}@media(max-width:720px){dialog:has(>.presentation-preview-dialog){height:calc(92vh - 16px)}.media-preview-layout.presentation-preview{grid-template-columns:minmax(140px,34%) minmax(0,1fr);gap:12px}.ppt-preview-slides .slide-label{padding-block:5px}}
.settings-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:20px;align-items:start}.settings-main,.settings-side{display:grid;gap:20px}.settings-card{padding:20px}.settings-card h2{margin-bottom:6px}.settings-card h3{margin-top:20px}.settings-card hr{margin:22px 0;border:0;border-top:1px solid var(--line)}.settings-note{margin:16px 0 0}.settings-preview #theme-preview{width:min(100%,360px);margin:auto}.settings-preview .stage-title{margin-bottom:10px}.previous-services{margin-top:30px}.previous-services>h2{margin-bottom:12px}@media(max-width:900px){.settings-layout{grid-template-columns:1fr}.settings-preview #theme-preview{width:min(100%,420px)}}

/* Consistent schedule markers keep every title on the same vertical axis. */
.item-type-icon{display:grid;width:64px;height:42px;flex:0 0 64px;place-items:center}
.console .item-type-icon{width:48px;height:32px;flex-basis:48px}

/* Song rows use a single label gutter, with the chip clear of the section rail. */
.slides.lyric-list{gap:6px;padding-left:116px}
.lyric-row,.song-preview-row{display:flex;width:max-content;min-width:100%;min-height:52px;align-items:flex-start;padding:14px 18px}
.lyric-row::before,.song-preview-row::before{left:-13px;top:6px;bottom:6px;width:7px}
.lyric-row.group-continues-before::before,.song-preview-row.group-continues-before::before{top:-7px}
.lyric-row.group-continues-after::before,.song-preview-row.group-continues-after::before{bottom:-7px}
.lyric-row .slide-label,.song-preview-label{right:calc(100% + 24px);top:14px;width:auto;max-width:none;transform:none;white-space:nowrap}
.lyric-row .section-chip,.song-preview-row .section-chip{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
.lyric-text,.song-preview-text{width:max-content;min-width:max-content;flex:none;white-space:pre;overflow:visible;overflow-wrap:normal;word-break:normal}
.song-preview-list{gap:6px;padding-left:116px}

/* Preview and Live show only a slim scrollbar thumb. */
.console-shell .preview-panel .slide-scroll,.console-shell .live-panel .slide-scroll{scrollbar-width:thin;scrollbar-color:#6f8292 transparent;scrollbar-gutter:auto}
.console-shell .preview-panel .slide-scroll::-webkit-scrollbar,.console-shell .live-panel .slide-scroll::-webkit-scrollbar{width:6px;height:6px}
.console-shell .preview-panel .slide-scroll::-webkit-scrollbar-track,.console-shell .live-panel .slide-scroll::-webkit-scrollbar-track,.console-shell .preview-panel .slide-scroll::-webkit-scrollbar-corner,.console-shell .live-panel .slide-scroll::-webkit-scrollbar-corner{background:transparent}
.console-shell .preview-panel .slide-scroll::-webkit-scrollbar-thumb,.console-shell .live-panel .slide-scroll::-webkit-scrollbar-thumb{border:0;border-radius:999px;background:#6f8292}
.console-shell .preview-panel .slide-scroll::-webkit-scrollbar-button,.console-shell .live-panel .slide-scroll::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Library add feedback. */
.add-source-button{display:inline-grid;width:48px;min-width:48px;place-items:center}
.add-source-button.added{border-color:#6c9657;background:#243b29;color:#baf09b;opacity:1}
.add-source-button.added .ui-icon{width:18px;height:18px}

/* Presentation picker actions stay visible and easy to target. */
.picker-actions{display:grid;min-width:180px;gap:8px}
.picker-actions>.service-start{display:flex;width:100%;min-height:50px;align-items:center;justify-content:center;gap:10px}
.picker-actions>.service-start .ui-icon{width:21px;height:21px}
.picker-actions.featured{min-width:220px}
.picker-actions.featured>.service-start{min-height:88px;font-size:1.18rem}
.picker-icon-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.picker-icon-actions .icon-button{width:100%;height:42px;border-color:#34495c;background:#152231}
.picker-icon-actions .icon-button:hover{background:#26394b}
.picker-icon-actions .icon-button:last-child{color:#ff9b9b}
.service-row{grid-template-columns:minmax(220px,1fr) minmax(180px,220px)}
@media(max-width:760px){.picker-actions,.picker-actions.featured{min-width:0}.picker-actions.featured>.service-start{min-height:64px}}

/* The save destination dialog explains how library and presentation copies differ. */
.save-choice-dialog{width:min(620px,calc(100vw - 32px));padding:28px}
.save-choice-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.save-choice-heading h2{margin:0 0 5px}
.save-choice-heading p{margin:0;line-height:1.45}
.save-choice-mark{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:50%;background:#2e4a32;color:#c7f1a9;font-size:1.2rem;font-weight:800}
.save-choice-options{display:grid;gap:10px}
.save-choice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) 26px;align-items:center;gap:14px;margin:0;padding:18px}
.save-choice input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.save-choice-copy{display:grid;gap:5px}
.save-choice-copy small{color:var(--muted);line-height:1.4}
.save-choice-indicator{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--accent);color:#172312;font-weight:800;opacity:0}
.save-choice.selected .save-choice-indicator{opacity:1}
.save-choice-note{margin-top:14px;padding:11px 13px;border-radius:7px;background:#0e1823;color:var(--muted);font-size:.82rem;line-height:1.45}
.trust-device-dialog{width:min(590px,calc(100vw - 32px));padding:28px}
.trust-device-heading>.ui-icon{width:38px;height:38px;flex:0 0 38px;padding:8px;border-radius:9px;background:#263b2b;color:#bff29d;box-sizing:border-box}
.trust-device-details{padding:16px 18px;border:1px solid var(--line);border-radius:9px;background:#101a25;line-height:1.5}
.trust-device-details p{margin-top:0}.trust-device-details ul{margin-bottom:0;padding-left:20px}.trust-device-details li+li{margin-top:7px}

/* Theme controls sit with their preview; operational settings remain together. */
.settings-layout{grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr)}
.settings-theme-card{padding:22px}
.settings-theme-card #theme-preview{width:min(100%,340px)}
.settings-theme-card hr{margin:24px 0 20px}
@media(max-width:900px){.settings-layout{grid-template-columns:1fr}.settings-theme-card #theme-preview{width:min(100%,380px)}}

/* The song editor needs enough room to show editing and output at useful sizes. */
dialog.song-editor-dialog{width:min(1500px,calc(100vw - 32px))}
.song-editor-dialog .song-editor-layout{grid-template-columns:minmax(430px,.85fr) minmax(600px,1.15fr);gap:26px}
.song-editor-dialog .song-output-preview #song-preview-stage{width:min(100%,720px);margin-inline:auto}
@media(max-width:980px){.song-editor-dialog .song-editor-layout{grid-template-columns:1fr}.song-editor-dialog .song-output-preview #song-preview-stage{width:min(100%,720px)}}

/* Blurred fill preserves the complete image while filling the output frame. */
.stage .media-blur-bg{object-fit:cover;transform:scale(1.08);filter:blur(26px);opacity:.72}
.stage .media-blur-main{object-fit:contain}

.item{width:100%}
.item-leading{padding:0;border-radius:4px}
.item-type-icon.item-leading{border-color:transparent;background:transparent}
.item-type-icon.item-leading:hover{background:#26394b}

.network-offline-bar{display:flex;min-width:0;flex:0 1 auto;align-items:center;justify-content:center;gap:8px;padding:7px 11px;border:1px solid #a87b32;border-radius:7px;background:#402e16;color:#ffe0a2;font-size:.78rem;font-weight:750;white-space:nowrap}
.network-offline-bar .ui-icon{width:20px;height:20px}
.compact-topbar.network-warning-visible{justify-content:space-between;gap:10px}.compact-topbar.network-warning-visible .output-start-bar{width:auto;flex:1}.compact-topbar.network-warning-visible>.actions{margin-left:auto}@media(max-width:700px){.network-offline-bar span{overflow:hidden;text-overflow:ellipsis}.compact-topbar.network-warning-visible{align-items:stretch;flex-direction:column;height:auto;min-height:52px;padding-block:6px}.compact-topbar.network-warning-visible .output-start-bar{width:100%}}

/* Keep featured and previous presentation content on the same column guides. */
.next-service{grid-template-columns:minmax(220px,1fr) minmax(180px,220px);gap:18px;padding:24px 20px}
.next-service .picker-actions.featured{width:100%;min-width:0}
.service-row{padding:16px 20px}
@media(max-width:760px){.next-service{grid-template-columns:1fr;padding:20px 16px}.service-row{padding-inline:16px}}

/* Account identity is read top-to-bottom: workspace, person, then access type. */
.account-details{padding:0 8px 10px}
.account-details p{margin:0;line-height:1.45;overflow-wrap:anywhere}
.account-details .account-org{color:#e4edf6;font-weight:700}
.account-details .account-email{margin-top:3px;color:#b9c8d8;font-size:.78rem}
.account-details .account-email{display:block;max-width:100%;overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}
.account-details .account-role{margin-top:2px;color:var(--muted);font-size:.75rem}

/* Native colour pickers use a large swatch and expose their exact value. */
.colour-setting{margin:12px 0 0}
.colour-control{display:flex;min-height:46px;align-items:center;gap:10px;margin-top:7px;padding:5px 10px 5px 5px;border:1px solid #354252;border-radius:7px;background:var(--ui-surface-subtle)}
.colour-control input[type=color]{width:58px;height:34px;padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer}
.colour-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.colour-control input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.colour-control input[type=color]::-moz-color-swatch{border:0;border-radius:5px}
.colour-control output{color:#d5e0eb;font:600 .8rem Consolas,monospace;letter-spacing:.04em}

/* Uploads stay visible without blocking the rest of the workspace. */
#background-uploads{position:fixed;z-index:120;right:20px;bottom:20px;display:grid;width:min(390px,calc(100vw - 32px));gap:8px}
.background-upload{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;overflow:hidden;padding:12px 12px 13px;border:1px solid #3a4e60;border-radius:9px;background:#15212d;box-shadow:0 12px 34px #0008}
.background-upload-copy{display:grid;min-width:0;gap:3px}.background-upload-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.background-upload-copy span{color:var(--muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.background-upload>button{width:28px;height:28px;padding:0;border:0;background:transparent;color:#9fb0c1;font-size:1.25rem}
.background-upload-progress{position:absolute;right:0;bottom:0;left:0;height:3px;background:#243442}.background-upload-progress>span{display:block;height:100%;min-width:2px;background:var(--accent);transition:width .2s ease}
.background-upload.upload-failed{border-color:#75424a}.background-upload.upload-failed .background-upload-progress>span{width:100%;background:#e27373}.background-upload.upload-failed .background-upload-copy span{color:#ffb9bd;white-space:normal}
.media-library-row{position:relative;overflow:hidden;padding-bottom:14px}.media-library-row .upload-placeholder{display:grid;place-items:center;color:#9fc7e8}.media-library-row .upload-placeholder .ui-icon{width:28px;height:28px}.media-upload-copy{min-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-upload-progress{position:absolute;right:0;bottom:0;left:0;height:3px;background:#243442}.media-upload-progress>span{display:block;height:100%;min-width:2px;background:var(--accent);transition:width .2s ease}.media-library-row.upload-failed{border-color:#75424a}.media-library-row.upload-failed .media-upload-copy{color:#ffb9bd}.media-library-row.upload-failed .media-upload-progress>span{background:#e27373}

/* Upload choices make the accurate presentation formats clear before files are selected. */
.upload-choice-dialog{width:100%}dialog:has(>.upload-choice-dialog){width:min(720px,calc(100vw - 32px))}.upload-choice-dialog>h3{margin:26px 0 10px}.upload-choice-list{display:grid;gap:10px}.upload-choice{display:grid;width:100%;grid-template-columns:1fr;justify-items:start;gap:6px;padding:16px 18px;text-align:left}.upload-choice>strong{display:flex;align-items:center;gap:9px;font-size:1rem}.upload-choice>span{color:var(--muted);font-size:.84rem;line-height:1.45}.upload-choice .tag{color:#c6f1a8}.upload-choice.recommended{border-color:#527348}.upload-choice.warning{border-color:#755e34;background:#211d16}.upload-choice.warning>span{color:#e6c989}
@keyframes upload-indeterminate{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.upload-indeterminate .background-upload-progress>span,.upload-indeterminate .media-upload-progress>span{width:30%;animation:upload-indeterminate 1.15s ease-in-out infinite}
.upload-file-dialog{width:100%}dialog:has(>.upload-file-dialog){width:min(680px,calc(100vw - 32px))}.upload-drop{min-height:190px;margin:22px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:28px;border:2px dashed #486079;border-radius:14px;background:#101c28;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}.upload-drop:hover,.upload-drop:focus-visible,.upload-drop.drag-over{border-color:var(--accent);background:#182a25;outline:none}.upload-drop.drag-over{transform:scale(1.01)}.upload-drop-icon{color:var(--accent)}.upload-drop-icon .ui-icon{width:38px;height:38px}.upload-drop>strong{font-size:1.12rem}.upload-drop>small{color:var(--muted)}.folder-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.conversion-choice{width:100%}dialog:has(>.conversion-choice){width:min(660px,calc(100vw - 32px))}.conversion-choice .statusbar{margin:18px 0}.conversion-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.conversion-choice-actions button{min-height:72px;white-space:normal}

/* The sidebar changes width without rebuilding, keeping every action on the same row. */
.shell.compact-shell{transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1)}
#navigation{width:100%;overflow:hidden;transition:padding .22s cubic-bezier(.2,.8,.2,1)}
.navigation-header{display:grid;min-height:92px;grid-template-rows:32px 38px;align-content:start;justify-items:center;gap:10px;padding:0 4px}
.navigation-open .navigation-header{align-items:initial}
.sidebar-brand{position:relative;width:100%;height:32px;padding:0}
.brand-logo{position:absolute;top:50%;display:block;max-height:32px;transform:translateY(-50%);transition:opacity .16s ease,transform .22s ease}
.brand-logo-compact{left:50%;width:34px;transform:translate(-50%,-50%);opacity:1}
.brand-logo-full{left:4px;width:174px;opacity:0;transform:translate(-6px,-50%);pointer-events:none}
.navigation-open .brand-logo-compact{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.navigation-open .brand-logo-full{opacity:1;transform:translate(0,-50%)}
#navigation nav{margin-top:22px}
.nav-entry{height:46px;min-height:46px;padding:11px 8px;margin:0;flex:none}
.nav-entry .nav-label{display:block;max-width:180px;opacity:1;transform:translateX(0);transition:max-width .22s cubic-bezier(.2,.8,.2,1),opacity .14s ease,transform .22s ease}
.compact-shell:not(.navigation-open) #navigation .nav-label{display:block;max-width:0;opacity:0;transform:translateX(-7px);pointer-events:none}
.compact-shell:not(.navigation-open) #navigation .nav-entry{height:46px;min-height:46px;padding:11px 8px;justify-content:center;gap:0}
.account-menu{display:flex;flex-direction:column}
.account-details{display:block;height:76px;min-height:76px;margin:0;padding:0 8px;overflow:hidden;opacity:1;transition:opacity .14s ease}
.compact-shell:not(.navigation-open) #navigation .account-details{visibility:hidden;opacity:0}
.login-card .brand{height:auto;margin:0 0 28px}
.login-card .brand img{display:block;width:min(210px,75%);height:auto}
.workspace-choice-list{display:flex;max-height:min(330px,45dvh);margin:20px -4px 4px;padding:4px;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;gap:8px}
.workspace-choice{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 15px;text-align:left;background:#192735;border-color:#36495b}
.workspace-choice:hover,.workspace-choice:focus-visible{background:#24382f;border-color:var(--accent)}
.workspace-choice-name{min-width:0;overflow:hidden;color:#edf4fb;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.workspace-choice-role{color:var(--muted);font-size:.78rem;font-weight:500;white-space:nowrap}
.workspace-choice-arrow{color:var(--accent);font-size:1.1rem}
.workspace-choice.opening{border-color:var(--accent);background:#2a402f}
.workspace-choice.current{border-color:#4a6254;background:#1d2d28}
.workspace-switch-dialog{width:min(500px,calc(100vw - 32px))}
.workspace-switch-dialog form{min-width:0}
@media(prefers-reduced-motion:reduce){.shell.compact-shell,#navigation,.brand-logo,.nav-entry .nav-label,.account-details{transition:none}}

/* The expanded rail is sized to the wordmark; its divider disappears in icon-only mode. */
.shell.compact-shell.navigation-open{grid-template-columns:218px minmax(0,1fr)}
.navigation-header{grid-template-rows:38px 38px;padding-inline:0}
.sidebar-brand{height:38px}
.brand-logo{max-height:38px}
.brand-logo-full{left:0;width:100%;max-width:none}
.navigation-header>.icon-button{width:100%;max-width:none}
.navigation-open .brand-logo-full{left:8px;width:calc(100% - 16px);object-fit:contain}
.compact-shell:not(.navigation-open) #navigation .account-menu{border-top-color:transparent}

/* Song-editor rows stay inside their narrower preview column. */
.song-editor-dialog .song-preview-list{overflow-x:hidden}
.song-editor-dialog .song-preview-row{width:100%;min-width:0;max-width:100%;height:auto;flex:0 0 auto;align-self:stretch}
.song-editor-dialog .song-preview-text{width:auto;min-width:0;max-width:100%;flex:1;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere;word-break:normal}
/* Shared thumbnail, progress and navigation polish. */
*{scrollbar-width:thin;scrollbar-color:#6f8292 transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-thumb{background:#6f8292;border-radius:999px;border:0}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
.type-song{--content-colour:#b6dd92}.type-image{--content-colour:#95c8f1}.type-video{--content-colour:#d8a9eb}.type-pptx{--content-colour:#eab589}
.item[class*="type-"]{position:relative;color:inherit;overflow:hidden}
.schedule-thumbnail{color:var(--content-colour,#9ebbd5)}
.schedule-thumbnail.thumbnail-ready>.ui-icon{visibility:hidden}
.schedule-thumbnail img{object-fit:contain}
.schedule-thumbnail img:not([data-thumbnail-ready]){visibility:hidden}
.item-leading>.schedule-thumbnail{width:100%;height:100%;border:0;background:transparent}
.item-leading .schedule-thumbnail:not(.thumbnail-ready){background:transparent}
.media-thumb>.schedule-thumbnail{width:100%;height:100%}
.content-download,.content-type-bar{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden}
.content-type-bar,.content-download.status-ready{display:block;background:var(--content-colour)}
.content-download.status-ready>span{background:var(--content-colour);min-width:100%}
.console .slide.lyric-row{padding:14px 18px}
.console-shell .slide-scroll{padding-top:3px;padding-left:3px}
.slide.selected{box-shadow:inset 0 0 0 1px var(--accent)}
.app-splash{min-height:100dvh;display:grid;place-items:center}
.app-splash img{width:min(320px,65vw);height:auto;animation:splash-pulse 1.8s ease-in-out infinite}
@keyframes splash-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.app-splash img{animation:none}.content-download.status-loading>span{animation:none;width:100%;opacity:.65}}
.single-preview-dialog{height:auto}
dialog:has(>.single-preview-dialog){width:min(640px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 32px))}
.single-preview-dialog .media-preview-layout{flex:none}
.single-preview-dialog #media-preview-stage>.stage{max-height:min(360px,calc(100dvh - 180px))}

/* Keep the library picker stable while each tab's results scroll independently. */
dialog:has(>.add-to-presentation-dialog){height:min(680px,calc(100dvh - 32px));overflow:hidden}
.add-to-presentation-dialog{display:flex;height:100%;min-height:0;flex-direction:column}
.add-to-presentation-dialog #add-tabs,.add-to-presentation-dialog>label,.add-to-presentation-dialog>input,.add-to-presentation-dialog>.footer{flex:0 0 auto}
.add-to-presentation-dialog .add-library-groups{min-height:0;max-height:none;flex:1;overflow-y:auto}
.add-to-presentation-dialog>.footer{margin-top:14px}

/* Loaded content keeps its type colour on the right edge; active downloads stay horizontal. */
.content-type-bar,.content-download.status-ready{top:0;right:0;bottom:0;left:auto;width:3px;height:auto}
.content-download.status-loading,.content-download.status-error{top:auto;right:0;bottom:0;left:0;width:auto;height:3px}
.console .item,.item[data-schedule-row]{padding-right:14px}
.item .name{display:block;overflow:hidden;white-space:nowrap}
.item .name .item-title,.item .name>.muted{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Workspace storage quota and deleted-media states. */
.storage-meter{border:1px solid var(--line);background:var(--ui-surface-subtle);border-radius:9px;padding:14px 16px;margin:0 0 20px}.storage-meter-copy{display:flex;justify-content:space-between;gap:14px;align-items:baseline}.storage-meter-copy strong{font-size:.9rem}.storage-meter-copy span{color:var(--muted);font-size:.8rem;text-align:right}.storage-meter-track{height:7px;margin-top:11px;background:#293543;border-radius:999px;overflow:hidden}.storage-meter-track>span{display:block;height:100%;background:var(--accent);border-radius:inherit}.storage-meter.over-limit{border-color:#71434a}.storage-meter.over-limit .storage-meter-track>span{background:#ff9c9c}.loading-storage{color:var(--muted);font-size:.85rem}.deleted-media{opacity:.68;border-style:dashed}.deleted-media .name:disabled,.deleted-media .item-leading:disabled{opacity:1}.deleted-thumbnail{filter:grayscale(1)}.deleted-thumbnail img{opacity:.55}.media-delete-dialog p{color:var(--muted);line-height:1.5}.media-delete-dialog .statusbar ul{margin:0;padding-left:20px}.media-delete-dialog .statusbar li+li{margin-top:7px}
@media(max-width:700px){.storage-meter-copy{display:block}.storage-meter-copy span{display:block;text-align:left;margin-top:5px}}

}
