body{display:flow-root}.live-layout{display:grid;gap:12px;padding:16px 24px 22px}.live-context{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:10px;border-bottom:3px solid var(--navy)}.live-context>div>span,.player-head,.connection-state small,.quality-control>span{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em}.live-context h1{margin:3px 0 0;font-size:28px;letter-spacing:-.04em}.live-context>strong{display:flex;align-items:center;gap:7px;color:var(--green);font-size:10px;letter-spacing:.08em}.live-context>strong i{width:8px;height:8px;background:currentColor;border-radius:50%}.live-context>strong.connecting{color:var(--amber)}.live-context>strong.down{color:var(--red)}.player-window{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line)}.player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:34px;padding:0 12px;border-bottom:1px solid var(--line)}.player-head strong{color:var(--muted);font-size:9px}.video-stage{height:clamp(280px,calc(100vh - 260px),760px);min-height:0;background:#000}.video-stage video{display:block;width:100%;height:100%;background:#000;object-fit:contain}.player-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:50px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--line)}.connection-state small,.connection-state strong{display:block}.connection-state strong{margin-top:3px;font-size:11px;letter-spacing:.03em}.connection-state strong.live{color:var(--green)}.connection-state strong.reconnecting{color:var(--amber)}.connection-state strong.error{color:var(--red)}.quality-control{display:flex;align-items:center;gap:10px}.quality{display:flex;gap:1px;padding:1px;background:var(--line)}.quality button{min-width:68px;height:30px;padding:0 13px;color:var(--muted);background:var(--surface);border:0;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.05em}.quality button:hover,.quality button:focus-visible{color:var(--ink);background:var(--soft);outline:none}.quality button.active{color:#fff;background:var(--blue)}html[data-theme="dark"] .quality button.active{color:#081725}
@media(min-width:901px) and (max-height:900px){.live-layout{gap:9px;padding:12px 20px 14px}.live-context{padding-bottom:7px}.live-context h1{font-size:26px}.video-stage{height:calc(100vh - 250px)}.player-controls{min-height:44px;padding:6px 10px}.quality button{height:28px}}
@media(max-width:900px){.live-layout{padding:14px}.video-stage{height:auto;min-height:260px;aspect-ratio:16/9}}
@media(max-width:680px){.live-layout{gap:10px;padding:10px}.live-context{align-items:flex-start;flex-direction:column;gap:8px}.live-context h1{font-size:24px}.video-stage{min-height:210px}.player-controls{align-items:stretch;flex-direction:column}.quality-control{align-items:stretch;flex-direction:column;gap:6px}.quality{display:grid;grid-template-columns:repeat(3,1fr)}.quality button{min-width:0;width:100%}}
@media(max-width:420px){.video-stage{min-height:190px}.player-head{padding:0 8px}.player-head span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.player-head strong{display:none}}