.cvpultra-wrapper{
  --cvpultra-bg:#111; --cvpultra-primary:#0ea5e9; --cvpultra-text:#fff; --cvpultra-progress:#0ea5e9; --cvpultra-radius:12px;
  background: var(--cvpultra-bg);
  color: var(--cvpultra-text);
  border-radius: var(--cvpultra-radius);
  padding: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.cvpultra-video{ width:100%; display:block; border-radius: calc(var(--cvpultra-radius) - 2px); background:#000; }
.cvpultra-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px; padding:8px 10px; border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cvpultra-actions{ display:flex; align-items:center; gap:10px; flex:1; justify-content:center; min-height:34px; }
.cvpultra-time{ margin-left:auto; font-family:monospace; opacity:.9; }
.cvpultra-logo{ max-height:28px; width:auto; object-fit:contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.cvpultra-left{ order:0; }
.cvpultra-right{ order:2; }

.cvpultra-btn{
  border:0; background: var(--cvpultra-btn-bg, rgba(255,255,255,.06)); color: var(--cvpultra-btn-fg, var(--cvpultra-text));
  border-radius:12px; padding:8px 12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; min-width:42px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cvpultra-icon img.cvpultra-icon-img, .cvpultra-icon svg{ width:20px; height:20px; display:block; }

/* Toggle icon visibility */
.cvpultra-btn.play .cvpultra-icon-pause{ display:none; }
.cvpultra-playing .cvpultra-btn.play .cvpultra-icon-play{ display:none; }
.cvpultra-playing .cvpultra-btn.play .cvpultra-icon-pause{ display:block; }

.cvpultra-btn.mute .cvpultra-icon-volume{ display:none; }
.cvpultra-muted .cvpultra-btn.mute .cvpultra-icon-mute{ display:none; }
.cvpultra-muted .cvpultra-btn.mute .cvpultra-icon-volume{ display:block; }

.cvpultra-bottombar{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.cvpultra-progress, .cvpultra-volume{
  -webkit-appearance:none; appearance:none;
  height:8px; border-radius:999px; background: rgba(255,255,255,.2);
  flex: 1;
}
.cvpultra-volume{ max-width:220px; }
.cvpultra-progress::-webkit-slider-thumb, .cvpultra-volume::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background: var(--cvpultra-progress); border:none; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* Firefox */
.cvpultra-progress::-moz-range-thumb, .cvpultra-volume::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background: var(--cvpultra-progress); border:none;
}
.cvpultra-progress::-moz-range-track, .cvpultra-volume::-moz-range-track{ background: rgba(255,255,255,.2); height:8px; border-radius:999px; }

@media (max-width:600px){
  .cvpultra-actions{ gap:8px; }
  .cvpultra-time{ font-size:12px; }
}

.cvpultra-btn:hover{ background: var(--cvpultra-btn-bg-hover, rgba(255,255,255,.12)); color: var(--cvpultra-btn-fg-hover, var(--cvpultra-text)); }


/* Strong overrides to avoid theme styles (purple etc.) */
.cvpultra-wrapper .cvpultra-btn{
  background: var(--cvpultra-btn-bg, rgba(255,255,255,.06)) !important;
  color: var(--cvpultra-btn-fg, var(--cvpultra-text)) !important;
  border: 0 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.cvpultra-wrapper .cvpultra-btn:hover,
.cvpultra-wrapper .cvpultra-btn:focus,
.cvpultra-wrapper .cvpultra-btn:active{
  background: var(--cvpultra-btn-bg-hover, rgba(255,255,255,.12)) !important;
  color: var(--cvpultra-btn-fg-hover, var(--cvpultra-text)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
  outline: none !important;
}
.cvpultra-wrapper .cvpultra-btn:focus-visible{
  outline: 2px solid var(--cvpultra-primary) !important;
  outline-offset: 2px;
}