/* Shared glass treatment matches the broker gallery: neutral tint, thin rim, 14px blur. */
.vb-player { --vb-player-accent:#85ebd1; position:relative; isolation:isolate; container-type:inline-size; display:block; width:100%; min-width:0; overflow:hidden; border-radius:14px; background:#101318; color:#fff; }
.vb-player>video { display:block; width:100%; height:100%; max-height:inherit; margin:0; object-fit:contain; border-radius:inherit; }
.vb-player[hidden],.vb-player [hidden] { display:none!important; }
.vb-player::after { content:""; position:absolute; z-index:0; pointer-events:none; inset:55% 0 0; background:linear-gradient(transparent,rgba(5,15,20,.56)); transition:opacity .16s; }
.vb-player .vb-player-controls { --vb-control-size:36px; --vb-volume-height:132px; position:absolute; z-index:2; bottom:12px; left:14px; right:14px; height:72px; color:white; transition:opacity .16s; }
.vb-player .vb-player-timeline { position:absolute; inset:0; display:flex; align-items:flex-end; color:white; font-size:12px; line-height:1.3; font-weight:500; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px #0008; pointer-events:none; }
.vb-player-clock { position:absolute; top:0; left:0; white-space:nowrap; }
.vb-player-clock [data-player-duration] { opacity:.7; }
.vb-player .vb-player-actions { position:absolute; display:flex; align-items:center; justify-content:flex-end; gap:7px; bottom:24px; right:0; left:0; pointer-events:none; }
.vb-player .vb-player-button,.vb-player .vb-player-center { box-sizing:border-box; display:grid; place-items:center; flex-shrink:0; padding:0; margin:0; min-height:0; color:#fff; font-family:inherit; font-size:13px; font-weight:500; line-height:1; cursor:pointer; text-decoration:none; pointer-events:auto; border:1px solid rgb(255 255 255 / 25%); background:rgb(35 38 42 / 35%); box-shadow:none; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:background .16s,border-color .16s; }
.vb-player .vb-player-button { width:var(--vb-control-size); height:var(--vb-control-size); border-radius:50%; font-family:inherit; font-size:13px; font-weight:500; }
.vb-player .vb-player-button svg { width:20px; height:20px; }
.vb-player .vb-player-button:hover,.vb-player .vb-player-center:hover { background:rgb(35 38 42 / 55%); color:#fff; border-color:rgb(255 255 255 / 45%); }
.vb-player .vb-player-button:disabled { opacity:.35; cursor:default; }
.vb-player .vb-player-button:focus-visible,.vb-player .vb-player-center:focus-visible { outline:2px solid white; outline-offset:3px; }
.vb-player .vb-player-center { position:absolute; z-index:1; top:clamp(42px,45%,calc(100% - 116px)); left:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; overflow:hidden; }
.vb-player .vb-player-center svg { width:44px; height:44px; }
.vb-player--compact-landscape:has(.vb-player-audio.is-open) .vb-player-center { visibility:hidden; }
/* The sound button stays in the toolbar. Its capsule grows upward without moving neighbours. */
.vb-player .vb-player-audio { position:relative; isolation:isolate; flex:none; width:var(--vb-control-size); height:var(--vb-control-size); pointer-events:auto; }
.vb-player .vb-player-audio::before { content:""; position:absolute; z-index:-1; bottom:0; left:0; width:100%; height:100%; box-sizing:border-box; border:1px solid rgb(255 255 255 / 25%); border-radius:calc(var(--vb-control-size) / 2); background:rgb(35 38 42 / 35%); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:height .2s ease,background .16s; }
.vb-player .vb-player-audio.is-open::before { height:calc(100% + var(--vb-volume-height)); }
.vb-player .vb-player-audio>.vb-player-button { border-color:transparent; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.vb-player .vb-player-audio>.vb-player-button:hover { background:rgb(255 255 255 / 10%); }
.vb-player .vb-player-volume-panel { position:absolute; bottom:100%; left:0; width:100%; height:var(--vb-volume-height); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px 0 6px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .16s,transform .2s,visibility .2s; }
.vb-player .vb-player-audio.is-open .vb-player-volume-panel { opacity:1; visibility:visible; transform:translateY(0); }
.vb-player .vb-player-mute { width:26px; height:26px; border:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.vb-player .vb-player-mute svg { width:18px; height:18px; }
.vb-player input.vb-player-range { --vb-progress:0%; appearance:none; -webkit-appearance:none; display:block; width:100%; min-width:0; height:22px; min-height:0; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:pointer; pointer-events:auto; }
.vb-player input.vb-player-volume { writing-mode:vertical-lr; direction:rtl; width:22px; height:80px; flex:1; min-height:24px; }
.vb-player input.vb-player-range::-webkit-slider-runnable-track { height:4px; border-radius:6px; background:linear-gradient(to right,var(--vb-player-accent) 0%,#d1fff0 var(--vb-progress),#ffffff40 var(--vb-progress)); }
.vb-player input.vb-player-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 12px #85ebd150; }
.vb-player input.vb-player-range::-moz-range-track { height:4px; background:#ffffff40; border-radius:6px; }
.vb-player input.vb-player-range::-moz-range-progress { height:4px; background:var(--vb-player-accent); border-radius:6px; }
.vb-player input.vb-player-range::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 12px #85ebd150; }
.vb-player input.vb-player-volume::-webkit-slider-runnable-track { width:4px; height:100%; background:linear-gradient(to top,#fff var(--vb-progress),#ffffff40 var(--vb-progress)); }
.vb-player input.vb-player-volume::-webkit-slider-thumb { margin-top:0; margin-left:-5px; }
.vb-player input.vb-player-volume::-moz-range-track { width:4px; height:100%; }
.vb-player input.vb-player-volume::-moz-range-progress { width:4px; background:#fff; }
.vb-player input.vb-player-range:focus-visible { outline:2px solid white; outline-offset:3px; }
.vb-player .vb-player-speed { display:none; }
.vb-player .vb-player-message { position:absolute; z-index:3; top:12px; left:12px; right:12px; margin:0; padding:10px 12px; border-radius:8px; background:#11131be6; color:#fff; font:400 13px/1.5 Arial,sans-serif; }
.vb-player--quiet:not(:has(:focus-visible)) .vb-player-controls,.vb-player--quiet:not(:has(:focus-visible))::after { opacity:0; pointer-events:none; }
.vb-player--quiet:not(:has(:focus-visible)) .vb-player-controls * { pointer-events:none; }
.vb-player:fullscreen { width:100vw!important; height:100dvh!important; max-height:none!important; border-radius:0; aspect-ratio:auto!important; }
.vb-player:fullscreen>video { width:100%; height:100%; max-height:none!important; }
@container(max-width:299px) {
  .vb-player .vb-player-controls { --vb-control-size:32px; left:10px; right:10px; }
  .vb-player .vb-player-actions { gap:5px; }
  .vb-player .vb-player-center { width:66px; height:66px; top:36%; }
  .vb-player .vb-player-center svg { width:36px; height:36px; }
}
@container(min-width:340px) {
  .vb-player .vb-player-controls { --vb-control-size:40px; bottom:18px; left:20px; right:20px; height:78px; }
  .vb-player .vb-player-actions { bottom:26px; gap:8px; }
  .vb-player .vb-player-button { font-size:14px; }
  .vb-player .vb-player-button svg { width:22px; height:22px; }
  .vb-player .vb-player-mute svg { width:18px; height:18px; }
  .vb-player .vb-player-speed { display:grid; }
  .vb-player .vb-player-timeline { font-size:13px; }
}
@container(min-width:560px) {
  .vb-player .vb-player-controls { --vb-control-size:44px; bottom:22px; left:30px; right:30px; height:58px; }
  .vb-player .vb-player-clock { top:0; line-height:34px; }
  .vb-player .vb-player-actions { top:-8px; bottom:auto; left:140px; }
  .vb-player .vb-player-button svg { width:24px; height:24px; }
  .vb-player .vb-player-mute svg { width:18px; height:18px; }
  .vb-player .vb-player-center { width:96px; height:96px; top:48%; }
  .vb-player .vb-player-center svg { width:50px; height:50px; }
  .vb-player input.vb-player-range::-webkit-slider-thumb { width:18px; height:18px; margin-top:-7px; }
  .vb-player input.vb-player-volume::-webkit-slider-thumb { margin-top:0; margin-left:-7px; }
  .vb-player input.vb-player-range::-moz-range-thumb { width:18px; height:18px; }
}
.vb-player--compact-landscape .vb-player-controls { --vb-volume-height:78px; }
.vb-player--compact-landscape .vb-player-volume-panel { gap:4px; padding-top:8px; }
.vb-player--compact-landscape .vb-player-center { top:36%; width:66px; height:66px; }
.vb-player--compact-landscape .vb-player-center svg { width:36px; height:36px; }
@media(prefers-reduced-motion:reduce) {
  .vb-player .vb-player-controls,.vb-player .vb-player-audio::before,.vb-player .vb-player-volume-panel,.vb-player .vb-player-button,.vb-player .vb-player-center,.vb-player::after { transition:none; }
}
