@import url('../shared/lab.css');
.tv-page{display:grid;gap:16px}.tv-top{display:flex;justify-content:space-between;align-items:center;padding:4px 10px}.tv-brand{font-size:22px;font-weight:1000;letter-spacing:.08em}.tv-brand b{color:var(--blue)}.tv-place{font-size:28px;font-weight:1000}.tv-layout{display:grid;grid-template-columns:1fr 390px;gap:18px}.tv-video,.tv-qr,.tv-up,.tv-band{padding:18px}.video-stage{height:680px;border-radius:28px;background:linear-gradient(180deg,#04070f,#000);border:2px solid rgba(53,183,255,.65);display:grid;place-items:center}.video-placeholder{font-size:42px;font-weight:1000;color:#1f345f;letter-spacing:.16em}.tv-side{display:grid;gap:18px}.tv-qr h2,.tv-up h2{margin:0 0 16px;font-size:18px;letter-spacing:.08em;color:#bfe8ff;text-align:center}.qr-box{height:310px;border-radius:20px;background:linear-gradient(135deg,#fff,#dbe8ff);position:relative;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}.qr-box:before{content:"";position:absolute;inset:24px;background:repeating-linear-gradient(90deg,#000 0 10px,#fff 10px 20px),repeating-linear-gradient(#000 0 10px,#fff 10px 20px);mix-blend-mode:multiply;opacity:.86}.tv-qr p{text-align:center;color:#d6e2ff;font-size:26px;line-height:1.25;margin:18px 0 0}.up-row{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);margin-top:10px}.pos{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:1000}.pos.one{background:rgba(255,202,66,.18);color:#ffd15a}.pos.two{background:rgba(53,183,255,.18);color:#9fe1ff}.pos.three{background:rgba(177,76,255,.18);color:#d6b2ff}.up-row b{display:block;font-size:28px}.up-row small{color:#bad0fb;font-size:22px}.tv-band{display:grid;grid-template-columns:90px 1fr 38%;align-items:center;gap:18px}.song-mini{width:90px;height:90px;border-radius:22px;background:linear-gradient(135deg,#ff745e,#5344ff)}.tv-meta .label{color:#59ccff;font-size:22px;font-weight:900;letter-spacing:.12em}.tv-meta .title{font-size:58px;font-weight:1000;line-height:1.02}.tv-meta .artist{font-size:34px;color:#cfddff}.tv-progress{display:grid;gap:16px}.line{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.line i{display:block;height:100%;width:58%;background:linear-gradient(90deg,#38b8ff,#b358ff)}.time{justify-self:end;font-size:44px;font-weight:1000}
@media (max-width:1400px){.tv-layout{grid-template-columns:1fr 330px}.video-stage{height:540px}.tv-meta .title{font-size:42px}.tv-meta .artist{font-size:26px}.tv-progress .time{font-size:34px}.up-row b{font-size:22px}.up-row small,.tv-qr p{font-size:18px}}
@media (max-width:1100px){.tv-layout{grid-template-columns:1fr}.tv-band{grid-template-columns:70px 1fr}.tv-progress{grid-column:1/-1}.video-stage{height:420px}}