.stp-video-player { display:grid; gap:var(--sp-4); }
.stp-video-screen-meter { width:240px; height:48px; border-radius:8px; overflow:hidden; background:#0b1220; }
.stp-video-screen-meter canvas { display:block; width:240px; height:48px; }
.stp-video-frame { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--radius-lg); background:#05070b; box-shadow:var(--shadow-lg); }
.stp-video-frame video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.stp-video-quality, .stp-video-ratios { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.stp-video-pill { min-height:40px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--bg-alt); color:var(--text); font-weight:700; cursor:pointer; }
.stp-video-pill[aria-pressed="true"] { background:var(--accent-oled); border-color:var(--accent-oled); color:#fff; }
.stp-video-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); }
.stp-video-stat { padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-alt); }
.stp-video-stat span { display:block; color:var(--text-muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; }
.stp-video-stat strong { display:block; margin-top:3px; overflow-wrap:anywhere; }
.stp-video-error { padding:var(--sp-3) var(--sp-4); border:1px solid #ef4444; border-radius:var(--radius-md); background:#fff1f2; color:#991b1b; }
.stp-video-error[hidden] { display:none; }
@media (max-width:700px) { .stp-video-stats { grid-template-columns:1fr; } }