.media-test-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start; }
.media-side { display:grid; gap:12px; }
#mediaVideo {
    display:block;
    width:100%;
    max-width:100%;
    aspect-ratio:16 / 9;
    min-height:220px;
    height:auto;
    object-fit:cover;
    background:#05070a;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
}
#mediaVideo.is-waiting { background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
#mediaVideo.is-live { background:#05070a; }
#mediaVideo.is-error { background:repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px); }
.meter-fill { height:100%; min-height:18px; width:0; background:linear-gradient(90deg, #62d4ff, #7effb4); border-radius:999px; transition:width .12s linear; }
@media (max-width: 900px) { .media-test-grid { grid-template-columns:1fr; } #mediaVideo { min-height:180px; } }