:root{--bg:#050607;--panel:#0b0e10;--line:#30363a;--muted:#81898d;--white:#f2f3ee;--acid:#d8ff35;--red:#ff3b2f;--cyan:#45e9dc;--mono:"SFMono-Regular",Menlo,Consolas,monospace;--sans:"Arial Narrow","Avenir Next Condensed","PingFang SC","Microsoft YaHei",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:var(--white)}body{font-family:var(--sans);overflow-x:hidden}.broadcast{width:100%;min-height:100vh;background:var(--bg)}.topbar{height:64px;padding:0 22px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;border-bottom:1px solid var(--line);background:#090b0c}.brand{color:#fff;text-decoration:none;font:900 31px/.9 var(--sans);letter-spacing:-.065em}.brand i{font-style:normal;color:var(--acid)}.channel{justify-self:center;display:flex;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:.12em}.channel small{color:#70777a;font-size:8px}.on-air{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(255,59,47,.13);animation:pulse 1.5s infinite}.top-actions{display:flex;align-items:center;gap:10px}.top-actions a,.top-actions button{border:1px solid #42484c;background:transparent;color:#c3c8c9;text-decoration:none;padding:8px 10px;font:8px var(--mono);letter-spacing:.08em}.top-actions button{cursor:pointer;background:var(--acid);border-color:var(--acid);color:#080a0b;font-weight:800}.stage{position:relative;width:100%;aspect-ratio:16/8.15;max-height:calc(100vh - 330px);min-height:420px;background:#000;overflow:hidden}.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.stage-label{position:absolute;top:18px;left:20px;z-index:2;padding:8px 10px;background:rgba(4,6,7,.78);backdrop-filter:blur(8px);display:flex;gap:10px;align-items:center;font:8px var(--mono);letter-spacing:.12em;pointer-events:none}.stage-label span{color:var(--red);font-weight:900}.stage-label b{font-weight:500}.signal{position:absolute;right:20px;top:18px;z-index:2;padding:8px 10px;background:rgba(4,6,7,.78);backdrop-filter:blur(8px);color:#a9afb1;font:8px var(--mono);letter-spacing:.08em;pointer-events:none}.signal span{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#e2b52a}.signal.online span{background:#37d86d}.signal.error span{background:var(--red)}.telemetry{min-height:250px;display:grid;grid-template-columns:1.2fr .95fr .72fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}.telemetry article{min-width:0;border-right:1px solid var(--line)}.telemetry article:last-child{border-right:0}.panel-head{height:55px;padding:11px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;border-bottom:1px solid var(--line)}.panel-head span,.panel-head small{color:#727a7e;font:7px var(--mono);letter-spacing:.1em}.panel-head b{font-size:14px}.panel-head small{text-align:right}.map-wrap{height:194px;position:relative;overflow:hidden;background:#0a1418}.map-wrap canvas{width:100%;height:100%;display:block}.map-key{position:absolute;left:11px;bottom:9px;padding:5px 7px;background:rgba(1,3,4,.78);font:7px var(--mono);letter-spacing:.08em}.map-key i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 3px rgba(216,255,53,.2)}.map-key span{margin-left:12px;color:#7b8387}.coordinates{height:90px;padding:13px 16px;display:grid;grid-template-columns:1fr 1fr;gap:20px;border-bottom:1px solid var(--line)}.coordinates div{min-width:0}.coordinates small,.metrics small,.clock small{display:block;color:#727a7e;font:7px var(--mono);letter-spacing:.1em}.coordinates strong{display:block;margin-top:6px;font:900 clamp(25px,2.2vw,38px)/1 var(--sans);letter-spacing:-.04em;white-space:nowrap}.metrics{height:104px;padding:13px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metrics>div{border-left:1px solid #262b2e;padding-left:10px}.metrics>div:first-child{border-left:0;padding-left:0}.metrics b{display:block;margin-top:8px;font:900 clamp(19px,1.7vw,28px)/1 var(--sans)}.metrics span{color:#727a7e;font:7px var(--mono)}.clock-panel{padding-bottom:12px}.clock{margin:14px 16px 0;padding-bottom:11px;border-bottom:1px solid #272c2f}.clock time{display:block;margin-top:5px;font:900 clamp(32px,3vw,50px)/.95 var(--mono);letter-spacing:-.08em}.clock b{display:block;margin-top:5px;color:#888f92;font:7px var(--mono);letter-spacing:.08em}.clock.secondary{border:0;margin-top:8px}.clock.secondary time{font-size:clamp(22px,2vw,31px);color:var(--cyan)}footer{min-height:52px;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:30px;color:#60676a;background:#070809;font:7px/1.5 var(--mono);letter-spacing:.04em}footer p{margin:0}footer a{color:#81898d;text-decoration:none}@keyframes pulse{50%{opacity:.45;box-shadow:0 0 0 8px rgba(255,59,47,0)}}
@media(min-width:1500px){.stage{aspect-ratio:16/7.7}.telemetry{grid-template-columns:1.25fr .85fr .65fr}}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.channel{justify-self:end}.top-actions a{display:none}.stage{min-height:0;max-height:none;aspect-ratio:16/9}.telemetry{grid-template-columns:1fr 1fr}.map-panel{grid-column:1/-1}.clock-panel{border-top:1px solid var(--line)}.map-wrap{height:260px}}
@media(max-width:620px){.topbar{height:58px;padding:0 12px;grid-template-columns:auto 1fr auto}.brand{font-size:27px}.channel{justify-self:center}.channel small{display:none}.top-actions{justify-self:end}.top-actions button{padding:7px 8px}.stage-label,.signal{top:9px}.stage-label{left:9px}.signal{right:9px}.telemetry{display:block}.telemetry article{border-right:0;border-bottom:1px solid var(--line)}.map-wrap{height:210px}.coordinates strong{font-size:31px}.metrics b{font-size:25px}.clock time{font-size:45px}footer{display:block;padding:16px 12px}footer p+ p{margin-top:8px}}