/* Shared edge-to-edge Settings layout. */
html body.uno-settings[data-setting-page] .detail-app { grid-template-columns:clamp(210px,20vw,350px) minmax(0,1fr)!important; gap:0; padding:0; max-width:none; }
html[data-appearance] body.uno-settings .uno-settings-menu { position:sticky; top:0; height:100dvh; max-height:100dvh; border:0!important; border-radius:0; padding:20px 12px; background:rgba(255,255,255,.025)!important; box-shadow:none!important; }
.settings-sidebar-brand { padding:0 24px 22px; }
.settings-sidebar-brand .uno-logo { width:clamp(110px,10vw,175px); height:82px; }
html body.uno-settings .uno-settings-menu a { min-height:54px; margin:4px 0; padding:12px 18px; gap:20px; font-size:clamp(15px,1.35vw,23px); }
html[data-appearance] body.uno-settings .uno-settings-menu a[aria-current] { border-color:transparent!important; box-shadow:none; background:rgba(112,184,165,.17)!important; }
html body.uno-settings .uno-settings-brand { display:none; }
html body.uno-settings .uno-settings-content { padding:clamp(95px,10vh,130px) clamp(24px,3vw,60px) 40px; }
html body.uno-settings .uno-settings-heading h1 { font-size:clamp(30px,3.2vw,54px); }
html body.uno-settings .uno-settings-heading p { font-size:clamp(16px,1.65vw,28px); }
html body.uno-settings .uno-settings-heading { padding:0 0 28px; }
html[data-appearance] body.player-app-shell .app-settings-header { left:clamp(210px,20vw,350px); justify-content:flex-end; background:transparent!important; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; pointer-events:none!important; }
.app-settings-header .app-settings-header-right { pointer-events:auto; }
.app-settings-header :is(.app-settings-header-left,.app-settings-title) { display:none; }
.player-app-shell .player-content-frame.is-settings-frame { top:0; height:100%; }
/* MultiScreen uses landscape previews, with controls over the picture. */
html body.uno-settings[data-setting-page="multiscreen"] .group-label { display:none; }
html body.uno-settings[data-setting-page="multiscreen"] .segmented { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0; background:transparent!important; border:0; }
html body.uno-settings[data-setting-page="multiscreen"] .chip-btn { display:flex; align-items:center; justify-content:center; gap:14px; min-height:64px; border-radius:14px; background:rgba(112,184,165,.08); border:1px solid rgba(112,184,165,.18); font-size:clamp(16px,1.5vw,24px); }
html body.uno-settings[data-setting-page="multiscreen"] .chip-btn svg { width:30px; height:30px; }
html[data-appearance] body.uno-settings[data-setting-page="multiscreen"] .chip-btn.active,
html[data-appearance] body.uno-settings .multiscreen-watch { background:#098f7d!important; color:#fff!important; }
html[data-appearance] body.uno-settings .multiscreen-card:not(.is-fullscreen) { background:transparent!important; padding:0; border:0; }
html body.uno-settings .multiscreen-card:not(.is-fullscreen) .multiscreen-preview { min-height:0; padding:0; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
html body.uno-settings .multiscreen-card:not(.is-fullscreen) .screen { aspect-ratio:16/9; min-height:0; height:auto; border-radius:16px; box-shadow:none; }
html body.uno-settings .multiscreen-card:not(.is-fullscreen) .multiscreen-preview[data-count="3"] .screen:first-child { grid-row:span 2; aspect-ratio:auto; }
html body.uno-settings .screen-copy { top:18px; bottom:auto; left:20px; right:100px; pointer-events:none; }
html body.uno-settings .screen-copy strong { font-size:clamp(16px,1.6vw,26px); color:#fff!important; }
html body.uno-settings .screen-copy small { display:none; }
html body.uno-settings .screen-zone-number { top:18px; right:18px; left:auto; width:auto; padding:6px 12px; border-radius:30px; background:#111c; color:white; }
html body.uno-settings .screen-live-state { top:58px; left:20px; font-size:10px; }
html body.uno-settings :is(.screen-change,.screen-audio) { position:absolute; z-index:6; top:auto; bottom:16px; border:1px solid #ffffff40; border-radius:30px; background:#101b1be0!important; color:white!important; padding:10px 16px; min-height:42px; display:flex; align-items:center; gap:10px; font:inherit; font-size:clamp(14px,1.2vw,20px); cursor:pointer; }
html body.uno-settings .screen-change { right:16px; }
html body.uno-settings .screen-audio { left:16px; }
html body.uno-settings :is(.screen-change,.screen-audio) svg { width:22px; height:22px; }
html body.uno-settings .screen.has-audio { outline:3px solid #35b29d; outline-offset:3px; }
html body.uno-settings .screen-audio[aria-pressed="false"] svg { opacity:.55; }
html body.uno-settings .multiscreen-watch { min-width:300px; min-height:64px; font-size:22px; margin:32px auto 0; border-radius:14px; }
html body.uno-settings .multiscreen-help { margin-top:20px; font-size:13px; opacity:.7; }
html body.uno-settings .multiscreen-card.is-fullscreen .screen-audio { pointer-events:auto; }
html body.uno-settings .multiscreen-card.is-fullscreen .screen-change { display:none; }
@media(max-width:700px) {
 html body.uno-settings[data-setting-page] .detail-app { grid-template-columns:150px minmax(0,1fr)!important; }
 html body.uno-settings .uno-settings-menu { padding:12px 5px; }
 html body.uno-settings .uno-settings-menu a { font-size:12px; gap:8px; padding:10px 7px; }
 .settings-sidebar-brand { padding:0 6px 12px; }
 .settings-sidebar-brand .uno-logo { width:100px; }
 html body.uno-settings .uno-settings-content { padding:90px 14px 24px; }
 html[data-appearance] body.player-app-shell .app-settings-header { left:150px; }
 html body.uno-settings .multiscreen-card:not(.is-fullscreen) .multiscreen-preview { grid-template-columns:1fr; }
 html body.uno-settings .multiscreen-watch { min-width:0; width:100%; font-size:16px; }
 html body.uno-settings[data-setting-page="multiscreen"] .chip-btn { font-size:12px; gap:5px; }
 html body.uno-settings[data-setting-page="multiscreen"] .chip-btn svg { width:18px; }
}
html[data-appearance="light"] body.uno-settings[data-setting-page="multiscreen"] .chip-btn:not(.active) { color:#142630!important; }
html[data-appearance="dark"] body.uno-settings[data-setting-page="multiscreen"] .chip-btn:not(.active) { color:#f2f4f1!important; }
/* Native modal keeps keyboard focus inside the confirmation. */
html[data-appearance] body .logout-dialog { position:fixed; inset:0; margin:auto; width:min(840px,90vw); height:fit-content; max-height:90dvh; overflow:auto; padding:34px clamp(24px,4vw,65px); border:1px solid #314541; border-radius:24px; background:#14201e!important; color:#f2f4f1!important; box-shadow:0 24px 90px #0005; text-align:center; display:none; }
html[data-appearance] body .logout-dialog[open] { display:block; }
.logout-dialog::backdrop { background:rgba(13,25,32,.58); backdrop-filter:blur(3px); }
html[data-appearance="light"] body .logout-dialog { background:#fafcfc!important; color:#142630!important; border-color:#dae4e0; }
.logout-symbol { display:grid; place-items:center; width:120px; height:120px; margin:0 auto 24px; border-radius:50%; background:#70b8a525; color:#258e7f; }
.logout-symbol svg { width:60px; height:60px; }
.logout-dialog h2 { margin:0 0 18px; font-size:clamp(25px,2.5vw,38px); line-height:1.2; }
.logout-dialog p { margin:0; font-size:clamp(16px,1.5vw,23px); line-height:1.5; color:#afc0ba; }
html[data-appearance="light"] body .logout-dialog p,html[data-appearance="light"] body .logout-reassurance { color:#586b77; }
.logout-dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:38px 0 28px; }
html[data-appearance] body .logout-dialog-actions button { min-height:64px; border-radius:14px; font:inherit; font-size:22px; font-weight:600; cursor:pointer; }
html[data-appearance] body .logout-cancel { background:#70b8a525!important; color:inherit!important; border:2px solid #258e7f!important; }
html[data-appearance] body .logout-confirm { background:#de53530a!important; color:#dc4c4c!important; border:2px solid #dc4c4c55!important; }
.logout-reassurance { display:flex; justify-content:center; align-items:center; gap:14px; color:#afc0ba; font-size:18px; }
.logout-reassurance svg { width:30px; height:30px; color:#258e7f; }
@media(max-width:600px) { .logout-symbol { width:80px;height:80px; } .logout-dialog-actions { gap:12px; } html[data-appearance] body .logout-dialog-actions button { font-size:17px; } }
html[data-appearance] body .logout-dialog .logout-dialog-actions { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
html[data-appearance] body .logout-dialog-actions button { width:100%; }