/* Editor follows VRSR's palette, controls and rectangular panel layout. */
.stream-overlays{--so-accent:var(--cyan,#18d9e8);max-width:1560px}
.stream-overlays .so-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.stream-overlays h2{margin:4px 0 8px}.stream-overlays h3{margin:0 0 16px;font-size:14px}
.stream-overlays p{color:var(--muted,#748391);line-height:1.6;font-size:12px}
.stream-overlays small{color:var(--so-accent);font-size:10px;letter-spacing:1px}
.stream-overlays .so-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;align-items:start}
.stream-overlays .so-nav{display:grid;gap:4px;position:sticky;top:16px;padding:8px;border:1px solid var(--line,#24303b)}
.stream-overlays button{padding:10px 12px;border:1px solid #24747b;background:#102c32;color:var(--so-accent);font-size:11px;cursor:pointer;text-align:left}
.stream-overlays button:disabled{opacity:.4;cursor:default}.stream-overlays button:hover:not(:disabled){border-color:var(--so-accent)}
.stream-overlays .so-nav button{background:transparent;border-color:transparent;color:var(--muted)}
.stream-overlays .so-nav button[aria-current=true]{background:#122a32;color:var(--so-accent);border-left:2px solid var(--so-accent)}
.stream-overlays .so-panel{background:var(--panel,#101720);border:1px solid var(--line,#24303b);padding:22px;margin-bottom:18px;min-width:0}
.stream-overlays .so-columns{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.stream-overlays .so-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stream-overlays .so-row h3{margin:0;flex:1}
.stream-overlays label{display:block;color:var(--muted);font-size:11px;margin:12px 0 6px}
.stream-overlays input:not([type=checkbox]),.stream-overlays select{width:100%;background:#080f15;color:var(--text,#f3f7fa);border:1px solid var(--line,#24303b);padding:10px;font:inherit}
.stream-overlays input[type=checkbox]{accent-color:var(--so-accent)}
.stream-overlays .so-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stream-overlays .so-preview{position:relative;aspect-ratio:16/9;overflow:hidden;background-color:#090f16;background-image:linear-gradient(45deg,#15202b 25%,transparent 25%),linear-gradient(-45deg,#15202b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#15202b 75%),linear-gradient(-45deg,transparent 75%,#15202b 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;border:1px solid var(--line)}
.stream-overlays .so-preview-render{position:absolute;inset:0;pointer-events:none}.stream-overlays .so-drag{position:absolute;border:1px dashed #18d9e899;touch-action:none;cursor:move;min-width:10px;min-height:10px;user-select:none}
.stream-overlays .so-drag.selected{border:2px solid var(--so-accent);background:#18d9e80a}.stream-overlays .so-drag>span{position:absolute;top:0;left:0;background:#0c202c;color:var(--so-accent);font-size:9px;padding:3px;max-width:100%;overflow:hidden;white-space:nowrap}
.stream-overlays .so-drag button{position:absolute;bottom:0;right:0;padding:0 4px;cursor:nwse-resize}
.stream-overlays .so-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.stream-overlays .so-tabs button.active{background:#17414a;border-color:var(--so-accent)}
.stream-overlays .so-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:18px}
.stream-overlays .so-logo{padding:12px;border:1px solid var(--line);overflow:hidden}.stream-overlays .so-logo img{height:70px;width:100%;object-fit:contain}.stream-overlays .so-logo strong{display:block;font-size:12px;overflow-wrap:anywhere;margin:8px 0}
.stream-overlays .so-message{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:12px}
.stream-overlays .so-message label{margin:0}.stream-overlays .so-notice{font-size:12px;min-height:18px;color:var(--so-accent);margin:10px 0}
.stream-overlays .so-error{color:var(--red,#ff6170)}.stream-overlays .so-url{display:block;overflow-wrap:anywhere;white-space:pre-wrap;background:#080f15;padding:14px;border:1px solid var(--line);font-size:11px;user-select:all;margin:14px 0}
.stream-overlays .so-access{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.stream-overlays [hidden]{display:none!important}
.so-canvas{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none;color:white;font-family:Segoe UI,sans-serif}
.so-zone{position:absolute}.so-zone-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:calc(var(--so-height)*.005)}
.so-zone-content img{width:100%;max-height:85%;min-height:0;flex:1;object-fit:contain;filter:drop-shadow(0 2px 6px #0006)}
.so-zone-content small{font-size:calc(var(--so-width)*.011);letter-spacing:calc(var(--so-width)*.001);color:white;text-shadow:0 1px 4px #000}
.so-ticker{position:absolute;bottom:0;width:100%;overflow:hidden;background:#091820ed;color:#f3f7fa;padding:calc(var(--so-height)*.01) 0;font-size:calc(var(--so-height)*.023);white-space:nowrap}
.so-ticker[hidden]{display:none}.so-ticker-track{display:flex;width:max-content;will-change:transform}.so-ticker-group{display:flex;align-items:center;justify-content:space-around;flex-shrink:0;min-width:var(--so-width)}
.so-ticker-group>span{display:block;flex-shrink:0;padding:0 2em}.so-ticker-group>.so-separator{padding:0 1em;color:#18d9e8}
@keyframes so-news-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html:has(.so-output){background:transparent!important}.so-output{background:transparent!important;margin:0;overflow:hidden}.so-output #overlay-output{position:fixed;inset:0}
@media(max-width:1100px){.stream-overlays .so-columns{grid-template-columns:1fr}.stream-overlays .so-layout{grid-template-columns:145px minmax(0,1fr)}}
@media(max-width:700px){.stream-overlays .so-layout{grid-template-columns:1fr}.stream-overlays .so-nav{position:static;grid-template-columns:repeat(2,1fr)}.stream-overlays .so-panel{padding:14px}.stream-overlays .so-heading{display:block}}

.so-lineup{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;padding:1.05em 1.2em;border:1px solid #18d9e866;border-radius:.65em;background:linear-gradient(145deg,#091722ed,#102331eb);box-shadow:0 .3em 1.4em #0005;overflow:hidden;color:#ecf5fb}.so-lineup[hidden]{display:none!important}.so-lineup header{display:block!important;flex:none;margin-bottom:.9em}.so-lineup header>small{font-size:.7em;letter-spacing:.2em;color:#18d9e8}.so-lineup h3{font-size:1.5em;line-height:1.2;margin:.3em 0!important;color:#fff}.so-lineup-sub{font-size:.7em;color:#8ee9e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so-lineup-list{display:flex;flex-direction:column;flex:1;min-height:0;gap:.3em}.so-lineup-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:.5em;flex:1;min-height:0;padding:.4em .65em .4em 1.3em;border-radius:.3em;background:#152732aa;overflow:hidden}.so-lineup-row>small{grid-column:1/-1;color:#9caebd;font-size:.7em;line-height:1.2}.so-lineup-row>strong{font-size:1em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so-lineup-phase{align-self:center;font-size:.5em;letter-spacing:.06em;color:#b3bfd0}.so-lineup-rail{position:absolute;left:.3em;top:0;bottom:0;width:.18em;background:#41525d}.so-lineup-rail:before{content:"";position:absolute;inset:0;background:#18d9e8;transform:scaleY(var(--slot-progress,0));transform-origin:top}.so-lineup-row[data-phase=current]{background:#153f48;border:1px solid #18d9e888}.so-lineup-row[data-phase=current] .so-lineup-phase{color:#62f4cc}.so-lineup-row[data-phase=current] .so-lineup-rail:after{content:"";position:absolute;width:.6em;height:.6em;border-radius:50%;background:#56efbf;left:-.2em;top:calc(var(--slot-progress,0)*100% - .3em);box-shadow:0 0 .7em #56efbf}.so-lineup-row[data-phase=past]{opacity:.5}.so-lineup footer{flex:none;padding-top:.8em}.so-lineup-total{height:.22em;background:#425664;border-radius:1em;overflow:hidden}.so-lineup-total span{display:block;height:100%;background:linear-gradient(90deg,#18d9e8,#70f0bb)}.so-lineup-total-label{display:block;font-size:.6em;text-align:right;color:#a6bdcd;margin-top:.5em}.so-lineup-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.so-lineup-settings label{min-width:0}.so-lineup-settings input{width:100%}

/* Keep overlay typography proportional in the editor as well as OBS. */
.vrsr-ui .stream-overlays .so-lineup h3{font-size:1.5em;line-height:1.2}

.so-lineup-subtitle{grid-column:1/-1;font-size:.7em;line-height:1.25;color:#b3c6d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}