:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef4ff;background:#091226}
*{box-sizing:border-box}
body{margin:0}
main{max-width:1500px;margin:auto}
header{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-wrap:wrap}
h1{font-size:15px;margin:0;flex:1}
.live-mark{height:8px;width:8px;border-radius:50%;background:#f34b62;box-shadow:0 0 12px #f34b6288}
#state{font-size:12px;color:#aabedc}
#player-layout{display:grid;grid-template-columns:1fr;align-items:start;background:#040a16;gap:10px;padding:0}
#player-layout.has-previews{grid-template-columns:minmax(0,1fr) minmax(180px,25%);padding:10px}
#stage{position:relative;aspect-ratio:16/9;background:#040a16;overflow:hidden;display:grid;place-items:center;min-width:0}
#placeholder{text-align:center;padding:20px;z-index:1}
#placeholder>span{font-size:32px;color:#74a7ff}
h2{font-size:20px;margin:10px 0}
p{font-size:13px;line-height:1.5;color:#b3c4dd}
#thumbnails{display:grid;gap:10px;align-content:start;min-width:0;max-height:calc(100vh - 130px);overflow-y:auto}
.stream-card{position:relative;display:block;background:#0b1730;border:1px solid #31486a;border-radius:10px;overflow:hidden;aspect-ratio:16/9;min-width:0}
.stream-card.is-primary{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0}
.stream-media,.stream-media video{position:absolute;inset:0;width:100%;height:100%}
.stream-media video{object-fit:cover}
.stream-card.is-primary .stream-media video{object-fit:contain}
.stream-media audio{display:none}
.stream-caption{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.85));padding:22px 10px 8px;display:grid;gap:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stream-caption strong{font-size:13px;overflow:hidden;text-overflow:ellipsis}
.stream-caption small{font-size:11px;color:#dde8fb;overflow:hidden;text-overflow:ellipsis}
.stream-card.is-primary .stream-caption{padding:44px 18px 14px}
.stream-card.is-primary .stream-caption strong{font-size:clamp(16px,2vw,23px)}
.stream-pick{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;border-radius:0;background:transparent;color:transparent;font-size:0;padding:0;cursor:pointer}
.stream-pick:hover,.stream-pick:focus-visible{background:#387ae122;outline:2px solid #74a7ff;outline-offset:-2px}
.stream-card:not(.has-video) .stream-media::after{content:'Conectando…';position:absolute;inset:0;display:grid;place-items:center;color:#b3c4dd;font-size:12px}
.controls{padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
button,a{font:inherit;font-size:13px;border:1px solid #3d587c;border-radius:8px;padding:10px 13px;background:#142b4b;color:#eef4ff;text-decoration:none;cursor:pointer}
button:hover,a:hover{background:#20436c}
#notice{margin:0;padding:0 16px 12px}
#notice:empty{display:none}
[hidden]{display:none!important}
@media(max-width:650px){
 header{padding:10px 12px}h1{font-size:13px}#state{font-size:11px}
 #player-layout.has-previews{display:flex;flex-direction:column;gap:0;padding:0}
 #stage{width:100%;min-height:190px}
 #thumbnails{width:100%;display:flex;gap:8px;overflow-x:auto;max-height:none;padding:9px 12px;background:#0d1d35}
 #thumbnails .stream-card{flex:0 0 155px;max-width:155px;min-height:95px}
 .stream-caption strong{font-size:11px}.stream-caption small{font-size:9px}
 .controls{padding:10px 12px;gap:7px}
 .controls button,.controls a{font-size:12px;padding:9px 10px}
}