/* Robust sizing */
:root{ --vpat-bg: rgba(11,20,24,.9); --vpat-ink:#e7eef0; --vpat-line:#244c57; --vpat-acc:#173239; --vpat-radius:10px; --vpat-gap:6px; --vpat-size:13px; }
.vpat-panel{ position:absolute; z-index:3000; top:10px; right:10px; background:var(--vpat-bg); color:var(--vpat-ink); border:1px solid var(--vpat-line); border-radius:var(--vpat-radius); padding:6px; display:flex; flex-wrap:wrap; gap:var(--vpat-gap); max-width:90vw; backdrop-filter: blur(5px); font-family: Arial, system-ui, sans-serif; font-size: var(--vpat-size); }
.vpat-row{display:flex; gap: var(--vpat-gap); width:100%}
.vpat-group{display:flex; gap: var(--vpat-gap); flex-wrap: wrap; align-items:center}
.vpat-label{opacity:.8; padding:4px 6px}
.vpat-btn{ border:1px solid var(--vpat-line); background:#0b1418; color:var(--vpat-ink); padding:4px 8px; border-radius:6px; cursor:pointer; user-select:none; line-height:1; white-space:nowrap; }
.vpat-btn:hover{ background:var(--vpat-acc) } .vpat-btn.is-active{ background:#0f2b33; border-color:#2b6a79 }

/* Always wrap player; wrapper controls height via aspect-ratio */
.vpat-wrap{ position: relative; width:100%; }
.vpat-wrap .video-js, .vpat-wrap .vjs-fluid{ width:100% !important; height:auto !important; aspect-ratio: var(--vpat-aspect, 16 / 9) !important; }
.vpat-wrap .video-js .vjs-tech{ width:100% !important; height:100% !important; object-fit: var(--vpat-fit, cover) !important; background:#000; }

/* Direct player path (safety) */
.video-js.vpat-active{ width:100% !important; height:auto !important; aspect-ratio: var(--vpat-aspect, 16 / 9) !important; }
.video-js.vpat-active .vjs-tech{ width:100% !important; height:100% !important; object-fit: var(--vpat-fit, cover) !important; background:#000; }

.vpat-panel--shortcode{ position: relative; inset: unset; }
@media (max-width:600px){ .vpat-panel{ top:6px; right:6px; padding:4px } .vpat-btn{ padding:3px 6px; font-size:12px } }