/* StreamVault Pro MP4 v1.4.3 | maynoe.com */
/* ══════════════════════════════════════════════════
   StreamVault Pro — _01-variables.css
   CSS Custom Properties (Design Tokens)
   All theme colors, sizes, and configurable values
   ══════════════════════════════════════════════════ */

   :root {
    /* ── Progress / Seek Bar ── */
    --svp-progress-color:        #10B981;
    --svp-progress-rgb:          16, 185, 129;
  
    /* ── Buffer Bar ── */
    --svp-buffer-color:          #64748B;
    --svp-buffer-rgb:            100, 116, 139;
  
    /* ── Track (seek background) ── */
    --svp-track-color:           #E2E8F0;
    --svp-track-rgb:             226, 232, 240;
  
    /* ── Volume ── */
    --svp-volume-color:          #10B981;
    --svp-volume-rgb:            16, 185, 129;
  
    /* ── Center Play Button ── */
    --svp-center-bg:             #10B981;
    --svp-center-bg-hover:       #059669;
    --svp-center-icon-color:     #FFFFFF;
  
    /* ── Icon Colors ── */
    --svp-icon-color:            #FFFFFF;
  
    /* ── Controls Gradient ── */
    --svp-gradient-color:        #F8FAFC;
    --svp-gradient-opacity:      0.65;
  
    /* ── Quality Badges ── */
    --svp-badge-hd:              #10B981;
    --svp-badge-fhd:             #059669;
    --svp-badge-auto:            #10B981;
  
    /* ── Admin-configurable sizes (JS sets via inline style) ── */
    --svp-center-size:           54px;
    --svp-center-icon-size:      26px;
    --svp-seek-height:           4px;
    --svp-seek-hover-height:     6px;
  
    /* ── Seek thumb ── */
    --svp-seek-thumb-color:      #fff;
    --svp-seek-thumb-hover:      var(--svp-progress-color);
  
    /* ── Button hover ── */
    --svp-btn-hover-bg:          rgba(255, 255, 255, 0.15);
    --svp-icon-hover-color:      var(--svp-progress-color);
  
    /* ── Volume thumb ── */
    --svp-vol-thumb-color:       #fff;
    --svp-vol-thumb-hover:       var(--svp-volume-color);
  
    /* ── Time display ── */
    --svp-time-color:            var(--svp-icon-color);
  
    /* ── Error overlay ── */
    --svp-error-bg:              rgba(7, 11, 26, 0.93);
    --svp-error-icon-color:      #ef4444;
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _02-wrapper-reset.css
   1. WRAPPER & RESET
   2. RATIO BOX & VIDEO
   ══════════════════════════════════════════════════ */

/* ── 1. WRAPPER & RESET ── */
.svp-wrap {
    width: 100%;
    font-family: "Inter", system-ui, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: svp;
  }
  
  .svp-wrap *,
  .svp-wrap *::before,
  .svp-wrap *::after {
    box-sizing: border-box;
  }
  
  /* ── 2. RATIO BOX & VIDEO ── */
  .svp-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    overflow: hidden;
    border-radius: 0;
  }
  
  .svp-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
/* ══════════════════════════════════════════════════════════
   StreamVault Pro — _03-overlay.css
   3-STATE SMART OVERLAY SYSTEM — Premium v2

   State A: svp-ov-switching — Glassy pill + spinning arc (immediate)
   State B: svp-ov-loading   — Dual-ring + breathing label (800ms+)
   State C: svp-ov-error     — Dark glass card, spring in (timeout/fatal)
   ══════════════════════════════════════════════════════════ */

   .svp-overlay {
    position: absolute;
    inset: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 16px;
  }
  
  .svp-overlay-state { display: none; }
  
  .svp-ratio.svp-ov-switching .svp-state-switching,
  .svp-ratio.svp-ov-loading   .svp-state-loading,
  .svp-ratio.svp-ov-error     .svp-state-error {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* ── Server button locking — iPhone Safari Fix ── */
  .svp-server-btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }
  
  .svp-wrap.is-switching .svp-server-btn,
  .svp-wrap.is-buffering .svp-server-btn {
    pointer-events: auto !important;
    opacity: 0.55;
    transform: scale(0.97);
    transition: opacity 0.2s, transform 0.2s;
  }
  
  .svp-wrap.is-error .svp-server-btn {
    pointer-events: auto !important;
    opacity: 1;
    transform: scale(1);
  }
  
  /* ── Fade controls during switch/load ── */
  .svp-ratio.svp-ov-switching .svp-controls,
  .svp-ratio.svp-ov-loading   .svp-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  
  .svp-ratio.svp-ov-switching .svp-center-btn,
  .svp-ratio.svp-ov-loading   .svp-center-btn {
    opacity: 0;
    pointer-events: none;
  }
  
  /* ── STATE A: SWITCHING PILL ── */
  .svp-ratio.svp-ov-switching .svp-state-switching {
    animation: svpFadeScaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  .svp-ov-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 14px;
    border-radius: 999px;
    background: rgba(6, 10, 24, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.40),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
    max-width: calc(100% - 32px);
  }
  
  .svp-ov-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-right-color: var(--svp-progress-color, #10b981);
    animation: svpSpin 0.65s linear infinite;
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px var(--svp-progress-color, #10b981));
  }
  
  .svp-ov-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }
  
  /* ── STATE B: LOADING RING ── */
  .svp-ratio.svp-ov-loading .svp-state-loading {
    animation: svpFadeScaleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  /* Fix #8: compact horizontal pill */
  .svp-ov-pill--loading {
    flex-direction: row;
    gap: 9px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    background: rgba(5, 9, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.40),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    align-items: center;
    width: auto !important;
    max-width: none !important;
  }
  
  .svp-ov-ring {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  
  .svp-ov-ring svg {
    width: 18px;
    height: 18px;
    animation: svpRingSpin 1.5s linear infinite;
  }
  
  .svp-ov-ring::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    box-shadow: 0 0 16px 3px rgba(16, 185, 129, 0.18);
    animation: svpRingGlow 1.5s ease-in-out infinite;
    pointer-events: none;
  }
  
  .svp-ring-track { stroke: rgba(255, 255, 255, 0.08); stroke-width: 2.5; }
  
  .svp-ring-spin {
    stroke: var(--svp-progress-color, #10b981);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 64 32;
    filter: drop-shadow(0 0 4px var(--svp-progress-color, #10b981));
  }
  
  .svp-ov-loading-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }
  
  .svp-ov-loading-text .svp-ov-label {
    font-size: 12px;
    animation: svpTextBreath 2.2s ease-in-out infinite;
  }
  
  .svp-ov-sub {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: 0.01em;
    display: none;
  }
  
  /* Safety: always hidden until JS activates */
  .svp-state-loading                          { display: none !important; }
  .svp-ratio.svp-ov-loading .svp-state-loading { display: flex !important; }
  
  /* ── STATE C: ERROR CARD ── */
  .svp-state-error {
    width: 100%;
    pointer-events: all;
  }
  
  .svp-ov-error-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 40px 15px 15px;
    background: var(--svp-error-bg, rgba(7, 11, 26, 0.93));
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-top-color: rgba(239, 68, 68, 0.38);
    border-radius: 17px;
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.58),
      0 2px 0 rgba(255, 255, 255, 0.04) inset,
      0 0 0 1px rgba(239, 68, 68, 0.08) inset;
    max-width: min(360px, calc(100% - 24px));
    position: relative;
    animation: svpErrorIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  
  .svp-ov-error-card::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1.5px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--svp-error-icon-color, #ef4444) 30%,
      var(--svp-error-icon-color, #ef4444) 70%,
      transparent 100%
    );
    border-radius: 999px;
    opacity: 0.55;
  }
  
  .svp-ov-error-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.10);
    border: 1.5px solid rgba(239, 68, 68, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--svp-error-icon-color, #ef4444);
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.18);
  }
  
  .svp-ov-error-body { flex: 1; min-width: 0; }
  
  .svp-ov-error-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 5px;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }
  
  .svp-ov-error-msg {
    margin: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.55;
    font-weight: 400;
  }
  
  .svp-ov-error-dismiss {
    position: absolute;
    top: 11px; right: 11px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
    padding: 0;
  }
  
  .svp-ov-error-dismiss:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.32);
    transform: rotate(90deg) scale(1.1);
  }
  
  /* ── Server button loading state ── */
  .svp-server-btn.loading {
    animation: svpServerPulse 1.05s ease-in-out infinite;
    pointer-events: none !important;
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _04-animations.css
   All @keyframes Animations
   ══════════════════════════════════════════════════ */

   @keyframes svpSpin      { to { transform: rotate(360deg); } }
   @keyframes svpRingSpin  { to { transform: rotate(360deg); } }
   
   @keyframes svpRingGlow {
     0%, 100% { opacity: 0.5; }
     50%       { opacity: 1.0; }
   }
   
   @keyframes svpFadeScaleIn {
     from { opacity: 0; transform: scale(0.88); filter: blur(4px); }
     to   { opacity: 1; transform: scale(1);    filter: blur(0px); }
   }
   
   @keyframes svpErrorIn {
     from { opacity: 0; transform: translateY(16px) scale(0.93); filter: blur(5px); }
     to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0px); }
   }
   
   @keyframes svpTextBreath {
     0%, 100% { opacity: 1.0; }
     50%       { opacity: 0.58; }
   }
   
   @keyframes svpServerPulse {
     0%, 100% { opacity: 1; }
     50%       { opacity: 0.6; }
   }
   
   @keyframes gearOpenSpin  { from { transform: rotate(0deg);   } to { transform: rotate(90deg);  } }
   @keyframes gearCloseSpin { from { transform: rotate(90deg);  } to { transform: rotate(0deg);   } }
   
   @keyframes slideIn {
     from { opacity: 0; transform: translateX(20px); }
     to   { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes pulse {
     0%   { transform: scale(1);   opacity: 1; }
     50%  { transform: scale(1.4); opacity: 0.5; }
     100% { transform: scale(1);   opacity: 1; }
   }
   
   @keyframes premiumPulseRight {
     0%, 100% { transform: translateX(0); }
     50%       { transform: translateX(4px); }
   }
   
   @keyframes premiumPulseLeft {
     0%, 100% { transform: translateX(0); }
     50%       { transform: translateX(-4px); }
   }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _05-controls.css
   3. CONTROLS OVERLAY  |  4. CONTROL BAR
   ══════════════════════════════════════════════════ */

   .svp-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: transparent;
    padding: 18px 6px 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
    overflow: visible !important;
  }
  
  /* Admin-driven gradient overlay */
  .svp-controls {
    background: linear-gradient(
      to top,
      rgba(0,0,0, var(--svp-gradient-opacity, 0.65)) 0%,
      rgba(0,0,0, calc(var(--svp-gradient-opacity, 0.65) * 0.45)) 60%,
      rgba(0,0,0,0) 100%
    ) !important;
  }
  
  .svp-ratio.svp-show   .svp-controls,
  .svp-ratio.svp-active .svp-controls { transition: opacity 0.15s ease; }
  
  .svp-ratio:not(.svp-show):not(.svp-active):not(:hover) .svp-controls {
    transition: opacity 0.45s ease 0.8s;
  }
  
  .svp-ratio:hover      .svp-controls,
  .svp-ratio.svp-show   .svp-controls,
  .svp-ratio.svp-active .svp-controls {
    opacity: 1;
    pointer-events: all;
  }
  
  .svp-controls::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.28) 60%, transparent 100%);
    pointer-events: none;
    z-index: -1;
  }
  
  .svp-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _06-seekbar.css
   5. SEEKBAR — progress, buffer, thumb, tooltip, preview
   ══════════════════════════════════════════════════ */

   .svp-seekbar-wrap {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    height: 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0 4px 0 0;
  }
  
  /* Track background */
  .svp-seekbar-wrap::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: var(--svp-seek-height, 4px);
    border-radius: 4px;
    background: var(--svp-track-color, rgba(var(--svp-track-rgb), 0.4)) !important;
    pointer-events: none;
    transition: height 0.12s;
  }
  
  .svp-seekbar-wrap:hover::before { height: var(--svp-seek-hover-height, 6px); }
  
  /* Admin-driven height via CSS vars */
  .svp-seekbar-wrap::before,
  .svp-buf,
  .svp-prog { height: var(--svp-seek-height, 4px) !important; }
  
  .svp-seekbar-wrap:hover::before,
  .svp-seekbar-wrap:hover .svp-buf,
  .svp-seekbar-wrap:hover .svp-prog { height: var(--svp-seek-hover-height, 6px) !important; }
  
  /* Buffer & progress bars */
  .svp-buf,
  .svp-prog {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    height: 5px;
    border-radius: 4px;
    pointer-events: none;
    transition: height 0.12s;
    max-width: 100%;
  }
  
  .svp-seekbar-wrap:hover .svp-buf,
  .svp-seekbar-wrap:hover .svp-prog { height: 6px; }
  
  .svp-buf  { background: var(--svp-buffer-color, rgba(var(--svp-buffer-rgb), 0.5)) !important; width: 0%; }
  .svp-prog { background: var(--svp-progress-color) !important; width: 0%; }
  
  /* Thumb */
  .svp-thumb {
    position: absolute;
    top: 50%; left: 0;
    transform: translate(-50%, -50%);
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--svp-seek-thumb-color, #fff) !important;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.12s, transform 0.12s, background 0.12s;
  }
  
  /* Admin-driven thumb positioning */
  .svp-thumb {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .svp-seekbar-wrap:hover .svp-thumb {
    opacity: 1;
    background: var(--svp-seek-thumb-hover, var(--svp-progress-color)) !important;
    box-shadow: 0 0 0 3px rgba(var(--svp-progress-rgb, 16,185,129), 0.45) !important;
    transform: translate(-50%, -50%) scale(1.2);
  }
  
  /* Hidden range input (interactive area) */
  .svp-seek {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0; padding: 0;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
  }
  
  /* ── Seek Tooltip — positioned relative to .svp-ratio via JS ── */
  .svp-tooltip {
    position: absolute;
    bottom: 60px;
    left: 0;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 60;
    box-shadow: 0 8px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.08) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      opacity 0.2s cubic-bezier(0.4,0,0.2,1),
      transform 0.2s cubic-bezier(0.4,0,0.2,1);
  }
  
  .svp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(15,23,42,0.95) transparent transparent transparent;
  }
  
  .svp-seekbar-wrap:hover .svp-tooltip,
  .svp-seekbar-wrap.svp-tooltip-active .svp-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  
  .svp-tooltip.svp-tt-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
  
  /* ── Seek Preview Thumbnail ── */
  .svp-seek-preview {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 0;
    transform: translateX(-50%);
    width: 120px; height: 68px;
    border-radius: 5px;
    overflow: hidden;
    background: #111;
    border: 2px solid rgba(255,255,255,0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 61;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  }
  
  .svp-seek-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .svp-seekbar-wrap:hover .svp-seek-preview,
  .svp-seekbar-wrap.svp-tooltip-active .svp-seek-preview { opacity: 1; }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _07-buttons.css
   6. CONTROL BUTTONS
   ══════════════════════════════════════════════════ */

   .svp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    color: var(--svp-icon-color);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.14s, color 0.14s;
  }
  
  .svp-btn:hover {
    background: var(--svp-btn-hover-bg, rgba(255,255,255,0.15));
    color: var(--svp-icon-hover-color, var(--svp-progress-color));
  }
  
  .svp-btn:active {
    background: var(--svp-btn-hover-bg, rgba(255,255,255,0.15));
  }
  
  .svp-btn:hover svg {
    fill: var(--svp-icon-hover-color, var(--svp-progress-color));
  }
  
  /* Skip forward — face the correct direction */
  .svp-skipf svg,
  .svp-skipf .ico-skipf { transform: none !important; -webkit-transform: none !important; }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _08-time.css
   7. TIME DISPLAY
   ══════════════════════════════════════════════════ */

   .svp-time {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  .svp-cur,
  .svp-dur {
    font-size: 12px;
    font-weight: 500;
    color: var(--svp-time-color, var(--svp-icon-color));
    font-variant-numeric: tabular-nums;
  }
  
  .svp-sep {
    font-size: 12px;
    color: var(--svp-time-color, var(--svp-icon-color));
    font-weight: 600;
  }
  
  /* ── Visibility rules by breakpoint ── */
  
  /* Tablet and above: always show duration */
  @media (min-width: 601px) {
    .svp-dur, .svp-sep { display: inline !important; }
    .svp-cur            { display: inline !important; }
  }
  
  /* Phone portrait only: hide duration */
  @media (max-width: 600px) and (orientation: portrait) {
    .svp-dur, .svp-sep { display: none !important; }
    .svp-cur            { display: block !important; }
  }
  
  /* Phone landscape: show both times */
  @media (max-width: 600px) and (orientation: landscape) {
    .svp-dur, .svp-sep { display: inline !important; }
    .svp-cur            { display: inline !important; }
  }
  
  /* Fullscreen: always show both */
  .svp-ratio.svp-in-fs .svp-dur,
  .svp-ratio.svp-in-fs .svp-sep { display: inline !important; }
  .svp-ratio.svp-in-fs .svp-cur { display: inline !important; }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _09-volume.css
   8. VOLUME POPUP
   ══════════════════════════════════════════════════ */

   .svp-vol-wrap { position: relative; }

   .svp-vol-popup {
     position: absolute;
     bottom: calc(100% + 2px);
     left: 50%;
     transform: translateX(-50%) translateY(6px);
     background: transparent;
     padding: 10px 10px 12px 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
     width: 36px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.17s ease, transform 0.17s ease;
     z-index: 350;
     box-shadow: 0 8px 24px rgba(0,0,0,0.12);
   }
   
   .svp-vol-popup.open {
     opacity: 1;
     pointer-events: all;
     transform: translateX(-50%) translateY(0);
   }
   
   .svp-vol-pct {
     font-size: 10px;
     font-weight: 700;
     color: #ffffff !important;
     font-variant-numeric: tabular-nums;
     line-height: 1;
     min-width: 24px;
     text-align: center;
   }
   
   .svp-vol-track {
     position: relative;
     width: 5px; height: 90px;
     background: rgba(255,255,255,0.18);
     border-radius: 2px;
     cursor: pointer;
   }
   
   .svp-vol-fill {
     position: absolute;
     bottom: 0; left: 0;
     width: 100%; height: 100%;
     background: var(--svp-volume-color) !important;
     border-radius: 2px;
     pointer-events: none;
   }
   
   .svp-vol-knob {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 12px; height: 12px;
     border-radius: 50%;
     background: var(--svp-vol-thumb-color, #fff) !important;
     box-shadow: 0 0 0 2px rgba(var(--svp-volume-rgb, 16,185,129), 0.5) !important;
     pointer-events: none;
     bottom: 100%;
     margin-bottom: -6px;
     transition: background 0.12s;
   }
   
   .svp-vol-track:hover .svp-vol-knob {
     background: var(--svp-vol-thumb-hover, var(--svp-volume-color)) !important;
   }
   
   .svp-vol-slider {
     position: absolute;
     top: -8px; left: -12px;
     width: 28px; height: 126px;
     opacity: 0;
     cursor: pointer;
     margin: 0;
     -webkit-appearance: slider-vertical;
     appearance: slider-vertical;
     writing-mode: vertical-lr;
     direction: rtl;
     background: transparent;
     z-index: 3;
   }
   
   .svp-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; }
   .svp-vol-slider::-moz-range-thumb     { border: none; background: transparent; }

   /* ── Anchored mode (all devices): popup reparented to .svp-ratio by JS ── */
   .svp-vol-popup--anchored {
     position: absolute;
     /* left/bottom set by JS _positionVolPopup() */
     transform: none;
     z-index: 500;
     background: transparent;
     border-radius: 0;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     box-shadow: none;
   }

   .svp-vol-popup--anchored.open {
     transform: none;
   }

   /* ── Responsive: larger players get a taller track ── */
   @container hvp (min-width: 600px) {
     .svp-vol-track  { height: 110px; }
     .svp-vol-slider { height: 146px; }
   }

   @container hvp (min-width: 900px) {
     .svp-vol-track  { height: 130px; }
     .svp-vol-slider { height: 166px; }
   }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _10-quality-menu.css
   9. QUALITY / GEAR BUTTON + MENU POPUP
   ══════════════════════════════════════════════════ */

/* ── Gear button wrapper ── */
.svp-qual-wrap {
    position: relative;
    flex-shrink: 0;
    overflow: visible !important;
    z-index: 300;
  }
  
  .svp-qualbtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--svp-icon-color);
    padding: 0;
    border-radius: 4px;
    transition: background 0.14s, color 0.14s;
  }
  
  .svp-qualbtn:hover {
    background: var(--svp-btn-hover-bg, rgba(255,255,255,0.15));
    color: var(--svp-icon-hover-color, var(--svp-progress-color));
  }
  
  .svp-qualbtn svg {
    width: 32px; height: 32px;
    fill: #ffffff;
    stroke: #ffffff;
    transition: fill 0.2s, stroke 0.2s;
    transform-origin: center;
    transform: rotate(0deg);
  }
  
  .svp-qualbtn:hover svg,
  .svp-qual-wrap.open .svp-qualbtn svg {
    fill: var(--svp-icon-hover-color, var(--svp-progress-color));
    stroke: var(--svp-icon-hover-color, var(--svp-progress-color));
  }
  
  /* Gear spin animations */
  .svp-qualbtn.gear-open  svg { animation: gearOpenSpin  350ms cubic-bezier(0.4,0,0.2,1) forwards; }
  .svp-qualbtn.gear-close svg { animation: gearCloseSpin 350ms cubic-bezier(0.4,0,0.2,1) forwards; }
  
  /* Quality badge above gear */
  .svp-qual-badge {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 500;
    color: #ffffff;
    background: var(--svp-progress-color);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  }
  
  /* ── Menu caret hidden (absolute menu, no caret needed) ── */
  .svp-menu-caret { display: none; }
  
  /* ── Quality Menu Popup (position:fixed — JS viewport coords) ── */
  .svp-qual-menu {
    display: none;
    position: fixed;
    bottom: auto; top: auto; left: auto; right: auto;
    background: rgba(255,255,255,0.98);
    border-radius: 12px;
    overflow: hidden;
    min-width: 170px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    z-index: 99999;
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transform-origin: bottom right;
    transition:
      opacity 0.22s cubic-bezier(0.4,0,0.2,1),
      transform 0.22s cubic-bezier(0.4,0,0.2,1);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  
  .svp-qual-menu::-webkit-scrollbar { display: none; }
  
  .svp-qual-menu.open {
    display: block;
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  
  /* ── Main options ── */
  .svp-main-opt {
    padding: 5px 10px;
    font-size: 14px;
    color: #1f2937;
    background: #ffffff;
    border-radius: 10px;
    margin: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    border: 1px solid #f1f5f9;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  }
  
  .svp-main-opt:hover {
    background: #f8fafc;
    box-shadow: 0 5px 14px rgba(var(--svp-progress-rgb, 16,185,129), 0.18);
    transform: translateY(-1px);
  }
  
  .svp-main-opt .left-label   { color: #64748b; font-weight: 500; margin-right: 16px; }
  
  .svp-main-opt .right-value,
  .svp-main-opt .right-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 6px;
    background: var(--svp-progress-color);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--svp-progress-rgb, 16,185,129), 0.35);
    transition: all 0.2s;
  }
  
  .svp-main-opt.active .right-value,
  .svp-main-opt.active .right-tag {
    background: var(--svp-center-bg-hover, #059669);
    box-shadow: 0 3px 10px rgba(var(--svp-progress-rgb, 16,185,129), 0.5);
  }
  
  .svp-main-opt .right-arrow {
    color: var(--svp-progress-color);
    font-size: 18px;
    font-weight: 700;
    margin-left: 10px;
    transition: transform 0.2s;
  }
  
  .svp-main-opt:hover .right-arrow { transform: translateX(3px); }
  
  /* ── Sub-menu header bar ── */
  .svp-sub-header {
    display: flex;
    align-items: center;
    background: linear-gradient(
      135deg,
      var(--svp-progress-color, #10b981) 0%,
      var(--svp-center-bg-hover, #059669) 100%
    );
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 9px 12px;
    border-radius: 12px 12px 0 0;
    user-select: none;
    gap: 6px;
  }
  
  .svp-sub-header .back-btn {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: opacity 0.15s;
    margin-right: 2px;
  }
  
  .svp-sub-header .back-btn:hover { opacity: 0.7; }
  
  /* ── Quality option rows ── */
  .svp-qual-opt {
    padding: 5px 10px;
    font-size: 12px;
    color: #1f2937;
    background: #ffffff;
    border-radius: 10px;
    margin: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f1f5f9;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  }
  
  .svp-qual-opt:hover {
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(var(--svp-progress-rgb, 16,185,129), 0.15);
    transform: translateY(-1px);
  }
  
  .svp-qual-opt .left-label   { color: #64748b; font-weight: 500; margin-right: 14px; }
  
  .svp-qual-opt .right-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 5px;
    transition: all 0.2s;
  }
  
  /* Quality tag color variants */
  .svp-qual-opt .right-tag.auto { background: rgba(var(--svp-progress-rgb, 16,185,129), 0.15); color: var(--svp-progress-color); }
  .svp-qual-opt .right-tag.hd   { background: rgba(239,68,68,0.15);    color: #e41818; }
  .svp-qual-opt .right-tag.fhd  { background: rgba(249,115,22,0.15);   color: #eb9a0d; }
  .svp-qual-opt .right-tag.uhd  { background: rgba(139,92,246,0.15);   color: #a16aed; }
  .svp-qual-opt .right-tag.sd   { background: rgba(148,163,184,0.15);  color: #777; }
  
  /* Active state */
  .svp-qual-opt.active {
    background: #ecfdf5;
    border: 2px solid var(--svp-progress-color);
    box-shadow: 0 4px 14px rgba(var(--svp-progress-rgb, 16,185,129), 0.25);
  }
  
  .svp-qual-opt.active .left-label  { color: var(--svp-center-bg-hover, #059669); font-weight: 700; }
  .svp-qual-opt.active .right-tag   { background: var(--svp-progress-color); color: #fff; box-shadow: 0 2px 8px rgba(var(--svp-progress-rgb, 16,185,129), 0.4); }
  
  /* Radio dot */
  .svp-qual-opt::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    margin-right: 8px;
    transition: all 0.2s;
  }
  
  .svp-qual-opt.active::before {
    background: var(--svp-progress-color);
    border-color: var(--svp-progress-color);
    box-shadow: 0 0 0 2px rgba(var(--svp-progress-rgb, 16,185,129), 0.2);
  }
  
  /* Container-query height guard */
  @container svp (max-height: 340px) {
    .svp-qual-menu {
      max-height: calc(100cqh - 60px) !important;
      overflow-y: auto !important;
    }
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _11-center-btn.css
   10. CENTER PLAY BUTTON
   ══════════════════════════════════════════════════ */

   .svp-center-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--svp-center-size, 54px);
    height: var(--svp-center-size, 54px);
    border-radius: 50%;
    background: var(--svp-center-bg) !important;
    color: var(--svp-center-icon-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0s, transform 0.18s ease, background 0.14s;
    box-shadow: 0 2px 14px rgba(0,0,0,0.45);
    border: none;
  }
  
  .svp-center-btn svg {
    width: var(--svp-center-icon-size, 26px) !important;
    height: var(--svp-center-icon-size, 26px) !important;
  }
  
  .svp-center-play { margin-left: 3px; }
  
  .svp-ratio.svp-centered .svp-center-btn {
    opacity: 1;
    pointer-events: auto;
  }
  
  .svp-center-btn:hover {
    background: var(--svp-center-bg-hover) !important;
    transform: translate(-50%, -50%) scale(1.1);
  }
  
  .svp-center-btn:active { transform: translate(-50%, -50%) scale(0.95); }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _12-fullscreen.css
   11. FULLSCREEN (JS class .svp-in-fs — cross-browser reliable)
   ══════════════════════════════════════════════════ */

/* ── Container fills entire screen ── */
.svp-ratio.svp-in-fs {
    border-radius: 0 !important;
    padding-top: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    z-index: 9999 !important;
    background: #000 !important;
  }

  /* ── Video letterbox — position:fixed, sized to small viewport (svh/svw)
     so it never extends behind Android nav bar or iOS home indicator.
     object-fit:contain letterboxes without cropping in any orientation. ── */
  .svp-ratio.svp-in-fs .svp-video {
    object-fit: contain !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
    background: #000 !important;
    z-index: 1 !important;
  }
  
  /* ── Controls overlay at bottom ── */
  .svp-ratio.svp-in-fs .svp-controls {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100dvw !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    pointer-events: all !important;
    overflow: visible !important;
    padding: 20px 10px env(safe-area-inset-bottom, 8px) !important;
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 60%, transparent 100%) !important;
  }
  
  /* ── Hide controls during playback ── */
  .svp-ratio.svp-in-fs.svp-fs-hidden .svp-controls {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.45s ease 0.8s !important;
  }
  
  /* ── Show controls on interaction ── */
  .svp-ratio.svp-in-fs.svp-active   .svp-controls,
  .svp-ratio.svp-in-fs.svp-centered .svp-controls {
    opacity: 1 !important;
    pointer-events: all !important;
    transition: opacity 0.15s ease !important;
  }
  
  /* ── Center button in fullscreen ── */
  .svp-ratio.svp-in-fs .svp-center-btn        { pointer-events: auto !important; }
  .svp-ratio.svp-in-fs.svp-centered .svp-center-btn { opacity: 1 !important; }
  
  /* ── PiP hidden in fullscreen on touch/mobile only ── */
  @media (hover: none) and (pointer: coarse) {
    .svp-ratio.svp-in-fs .svp-pip { display: none !important; }
  }

  /* ── Volume popup must float above controls bar in fullscreen ── */
  .svp-ratio.svp-in-fs .svp-vol-popup {
    z-index: 10000 !important;
  }
  
  /* ── FULLSCREEN LANDSCAPE — compact controls (mobile/touch only) ── */
  @media screen and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .svp-ratio.svp-in-fs .svp-controls {
      padding: 12px 12px env(safe-area-inset-bottom, 4px) !important;
      opacity: 1 !important;
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.20) 55%, transparent 100%) !important;
    }

    /* Re-enable time duration in fullscreen landscape */
    .svp-ratio.svp-in-fs .svp-dur,
    .svp-ratio.svp-in-fs .svp-sep,
    .svp-ratio.svp-in-fs .svp-cur { display: inline !important; }

    /* Compact buttons — small screen landscape */
    .svp-ratio.svp-in-fs .svp-btn svg,
    .svp-ratio.svp-in-fs .svp-qualbtn svg { width: 22px !important; height: 22px !important; }

    .svp-ratio.svp-in-fs .svp-btn,
    .svp-ratio.svp-in-fs .svp-qualbtn { width: 28px !important; height: 28px !important; }

    .svp-ratio.svp-in-fs .svp-center-btn { width: 42px !important; height: 42px !important; }
    .svp-ratio.svp-in-fs .svp-center-btn svg { width: 20px !important; height: 20px !important; }
    .svp-ratio.svp-in-fs .svp-qual-badge { font-size: 5px !important; }

    /* Gear menu clamped to viewport */
    .svp-ratio.svp-in-fs .svp-qual-menu {
      max-height: calc(100dvh - 56px) !important;
      overflow-y: auto !important;
    }

    /* Seekbar reset */
    .svp-ratio.svp-in-fs .svp-seekbar-wrap {
      position: relative !important;
      bottom: auto !important; left: auto !important; right: auto !important;
      width: auto !important;
      flex: 1 1 0 !important;
      margin: 0 !important; padding: 0 !important;
    }
  }

  /* ── DESKTOP FULLSCREEN — larger controls (mouse/trackpad users) ── */
  @media screen and (hover: hover) and (pointer: fine) {
    /* Base desktop fullscreen: comfortably sized buttons */
    .svp-ratio.svp-in-fs .svp-pip { display: flex !important; }

    .svp-ratio.svp-in-fs .svp-controls {
      padding: 32px 24px 20px !important;
    }

    .svp-ratio.svp-in-fs .svp-btn,
    .svp-ratio.svp-in-fs .svp-qualbtn { width: 44px !important; height: 44px !important; }

    .svp-ratio.svp-in-fs .svp-btn svg,
    .svp-ratio.svp-in-fs .svp-qualbtn svg { width: 28px !important; height: 28px !important; }

    .svp-ratio.svp-in-fs .svp-center-btn { width: 72px !important; height: 72px !important; }
    .svp-ratio.svp-in-fs .svp-center-btn svg { width: 34px !important; height: 34px !important; }

    .svp-ratio.svp-in-fs .svp-qual-badge { font-size: 8px !important; }

    .svp-ratio.svp-in-fs .svp-dur,
    .svp-ratio.svp-in-fs .svp-sep,
    .svp-ratio.svp-in-fs .svp-cur { display: inline !important; font-size: 14px !important; }

    .svp-ratio.svp-in-fs .svp-qual-menu {
      max-height: calc(100dvh - 80px) !important;
      overflow-y: auto !important;
    }

    .svp-ratio.svp-in-fs .svp-seekbar-wrap {
      position: relative !important;
      bottom: auto !important; left: auto !important; right: auto !important;
      width: auto !important;
      flex: 1 1 0 !important;
      margin: 0 !important; padding: 0 !important;
    }

    /* ── TV / large screen (≥ 900px tall, e.g. 1080p/4K/TV) ── */
    @media screen and (min-height: 900px) {
      .svp-ratio.svp-in-fs .svp-controls {
        padding: 48px 40px 32px !important;
      }

      .svp-ratio.svp-in-fs .svp-btn,
      .svp-ratio.svp-in-fs .svp-qualbtn { width: 56px !important; height: 56px !important; }

      .svp-ratio.svp-in-fs .svp-btn svg,
      .svp-ratio.svp-in-fs .svp-qualbtn svg { width: 36px !important; height: 36px !important; }

      .svp-ratio.svp-in-fs .svp-center-btn { width: 96px !important; height: 96px !important; }
      .svp-ratio.svp-in-fs .svp-center-btn svg { width: 44px !important; height: 44px !important; }

      .svp-ratio.svp-in-fs .svp-qual-badge { font-size: 10px !important; }

      .svp-ratio.svp-in-fs .svp-dur,
      .svp-ratio.svp-in-fs .svp-sep,
      .svp-ratio.svp-in-fs .svp-cur { font-size: 16px !important; }
    }
  }
  
  /* ── Belt-and-suspenders: native :fullscreen pseudo-class ── */
  .svp-ratio:fullscreen,
  .svp-ratio:-webkit-full-screen {
    border-radius: 0 !important;
    padding-top: 0 !important;
    width: 100dvw !important; height: 100dvh !important;
    max-width: 100dvw !important; max-height: 100dvh !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .svp-ratio:fullscreen .svp-video,
  .svp-ratio:-webkit-full-screen .svp-video {
    object-fit: contain !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100dvw !important; height: 100dvh !important;
    max-width: 100dvw !important; max-height: 100dvh !important;
    background: #000 !important;
    z-index: 1 !important;
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _13-accessibility.css
   12. FOCUS RESET
   13. TAP HIGHLIGHT REMOVAL (mobile)
   ══════════════════════════════════════════════════ */

/* ── Focus reset — intentional (player manages its own focus UX) ── */
.svp-wrap *:focus,
.svp-wrap *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.svp-wrap button:focus,
.svp-wrap button:focus-visible,
.svp-wrap .svp-center-btn:focus,
.svp-wrap .svp-center-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Tap highlight removal ── */
.svp-wrap *,
.svp-wrap button,
.svp-wrap input,
.svp-btn,
.svp-center-btn,
.svp-qualbtn,
.svp-volbtn,
.svp-pip,
.svp-fs,
.svp-seek,
.svp-vol-slider {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}
/* ══════════════════════════════════════════════════
   StreamVault Pro — _14-server-buttons.css
   18. SMART SCROLL SERVER BUTTONS (WITH ARROWS)
   ══════════════════════════════════════════════════ */

/* ── Scroll container ── */
.svp-server-container {
    position: relative;
    width: 100%;
    padding: 5px 0;
    overflow: hidden;
    background: transparent;
    transition: mask-image 0.3s, -webkit-mask-image 0.3s;
  }
  
  /* Fade edges when scrollable */
  .svp-server-container.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, black 85%, rgba(0,0,0,0.4) 100%);
    mask-image:         linear-gradient(to right, black 85%, rgba(0,0,0,0.4) 100%);
  }
  
  .svp-server-container.can-scroll-left {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%, black 15%);
    mask-image:         linear-gradient(to right, rgba(0,0,0,0.4) 0%, black 15%);
  }
  
  .svp-server-container.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%, black 15%, black 85%, rgba(0,0,0,0.4) 100%);
    mask-image:         linear-gradient(to right, rgba(0,0,0,0.4) 0%, black 15%, black 85%, rgba(0,0,0,0.4) 100%);
  }
  
  /* ── Scroll arrow buttons ── */
  .svp-scroll-btn {
    position: absolute;
    top: 50%;
    width: 32px; height: 32px;
    margin-top: -16px;
    z-index: 20;
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  
  .svp-scroll-btn:active { transform: scale(0.9); }
  
  /* Colored arrow icon via CSS mask */
  .svp-scroll-btn::before {
    content: "";
    display: block;
    width: 18px; height: 18px;
    margin: 0 auto;
    background-color: var(--svp-progress-color);
    -webkit-mask-size: contain;    mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
  }
  
  /* Left arrow — visible + animated when can scroll left */
  .svp-server-container.can-scroll-left .svp-scroll-left {
    opacity: 1; pointer-events: auto; left: 5px;
    animation: premiumPulseLeft 2s ease-in-out infinite;
  }
  
  .svp-server-container.can-scroll-left .svp-scroll-left::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
  }
  
  /* Right arrow */
  .svp-server-container.can-scroll-right .svp-scroll-right {
    opacity: 1; pointer-events: auto; right: 5px;
    animation: premiumPulseRight 2s ease-in-out infinite;
  }
  
  .svp-server-container.can-scroll-right .svp-scroll-right::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  }
  
  /* ── Scrollable row ── */
  .svp-server-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 26px 6px 26px;
    background: transparent;
    scrollbar-width: none;
    justify-content: flex-start;
    align-items: center;
  }
  
  .svp-server-buttons::-webkit-scrollbar { display: none; }
  
  /* ── Individual server button ── */
  .svp-server-btn {
    all: unset;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.18);
    color: #1e293b;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    white-space: nowrap;
  }
  
  .svp-server-btn.active {
    background: var(--svp-progress-color);
    color: #ffffff;
    border-color: var(--svp-progress-color);
    box-shadow: 0 2px 8px rgba(var(--svp-progress-rgb, 16,185,129), 0.40);
    transform: scale(1.04);
  }
  
  .svp-server-btn:hover:not(.active) {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }
  
  /* Status dot */
  .svp-server-btn::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #94a3b8;
    margin-right: 5px;
    flex-shrink: 0;
  }
  
  .svp-server-btn.active::before {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 4px rgba(255,255,255,0.7);
    animation: pulse 1.5s infinite;
  }
  
  .svp-server-btn.loading { pointer-events: auto !important; }
  
  .svp-wrap.is-switching .svp-server-btn,
  .svp-wrap.is-buffering .svp-server-btn,
  .svp-wrap.is-error     .svp-server-btn { pointer-events: auto !important; }

  /* ── Responsive sizing via @container ── */
  @container svp (min-width: 600px) {
    .svp-server-btn     { font-size: 10.5px !important; padding: 3px 11px !important; }
    .svp-server-buttons { gap: 5px !important;          padding: 4px 26px 6px 26px !important; }
    .svp-scroll-btn     { width: 26px !important; height: 26px !important; margin-top: -13px !important; }
  }
  
  @container svp (min-width: 480px) and (max-width: 599px) {
    .svp-server-btn     { font-size: 10px !important;   padding: 3px 9px !important; }
    .svp-server-buttons { gap: 4px !important;          padding: 4px 24px 6px 24px !important; }
    .svp-scroll-btn     { width: 24px !important; height: 24px !important; margin-top: -12px !important; }
  }
  
  @container svp (max-width: 479px) {
    .svp-server-btn             { font-size: 9.5px !important;  padding: 2px 8px !important; }
    .svp-server-buttons         { gap: 4px !important;          padding: 3px 22px 5px 22px !important; }
    .svp-server-btn::before     { width: 4px !important; height: 4px !important; margin-right: 4px !important; }
    .svp-scroll-btn             { width: 22px !important; height: 22px !important; margin-top: -11px !important; }
  }
  
  /* Fallback for browsers without @container support */
  @media (max-width: 479px) {
    .svp-server-btn     { font-size: 9.5px; padding: 2px 8px; }
    .svp-server-buttons { gap: 4px;         padding: 3px 22px 5px 22px; }
  }
/* ══════════════════════════════════════════════════════════
   StreamVault Pro — _15-double-tap.css
   PREMIUM: Double-tap seek overlays (mobile)
   ══════════════════════════════════════════════════════════ */

   .svp-dt-overlay {
    position: absolute;
    top: 0; bottom: 0;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.18) 0%, transparent 70%);
    border-radius: 50%;
  }
  
  .svp-dt-left  { left: 0;  border-radius: 0 50% 50% 0; }
  .svp-dt-right { right: 0; border-radius: 50% 0 0 50%; }
  
  .svp-dt-overlay.svp-dt-show { opacity: 1; }
  
  .svp-dt-icon {
    font-size: 22px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    line-height: 1;
  }
  
  .svp-dt-label {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    letter-spacing: .5px;
  }
  
  /* Double-tap overlays above fixed video in fullscreen */
  @media screen and (orientation: landscape) {
    .svp-ratio.svp-in-fs .svp-dt-overlay {
      position: fixed !important;
      top: 0 !important; bottom: 0 !important;
      z-index: 10000 !important;
    }
  
    .svp-ratio.svp-in-fs .svp-dt-left  { left: 0 !important;  right: auto !important; }
    .svp-ratio.svp-in-fs .svp-dt-right { right: 0 !important; left: auto !important; }
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _16-error-locked.css
   R7/R8 ADDITIONS — Error-locked state
   ══════════════════════════════════════════════════ */

/* Fix #3 (R7): Error-locked state — disable play controls */
.svp-ratio.svp-error-locked .svp-center-btn {
    opacity: 0.25 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    filter: grayscale(1);
  }
  
  .svp-ratio.svp-error-locked .svp-play {
    opacity: 0.25 !important;
    pointer-events: none !important;
  }
  
  .svp-ratio.svp-error-locked .svp-video {
    pointer-events: none !important;
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _17-thumbnail-tooltip.css
   R8/R9: Thumbnail sprite tooltip & time label
   ══════════════════════════════════════════════════ */

/* When JS sets backgroundImage, tooltip switches to thumbnail mode */
.svp-tooltip.svp-tt-has-thumb {
    display: block !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }
  
  /* Frame border overlay on thumbnail */
  .svp-tooltip.svp-tt-has-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.22);
    box-shadow:
      0 0 0 1px rgba(16,185,129, 0.25),
      0 8px 24px rgba(0,0,0,0.55);
    pointer-events: none;
    z-index: 1;
  }
  
  /* Arrow hidden in thumbnail mode */
  .svp-tooltip.svp-tt-has-thumb::after {
    display: none !important;
    content: '' !important;
  }
  
  /* ── Time label below thumbnail — positioned by JS relative to ratio ── */
  .svp-tt-time {
    display: none;
    position: absolute;
    bottom: 60px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 62;
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  
  .svp-tt-time.svp-tt-time-visible { display: block; }
  
  /* Visibility controlled by JS via svp-tt-time-visible class */
  .svp-tt-time:not(.svp-tt-time-visible) {
    display: none !important;
  }
/* ══════════════════════════════════════════════════
   StreamVault Pro — _18-responsive.css
   16. MOBILE RESPONSIVE — Container Queries + Media Queries
   17. VIEWPORT FALLBACK (no container query support)
   ══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   LARGE PLAYER / TV — container > 900px
   ───────────────────────────────────────────────── */
@container hvp (min-width: 900px) {
  .svp-btn      { width: 42px; height: 42px; }
  .svp-btn svg  { width: 28px; height: 28px; }
  .svp-qualbtn  { width: 42px; height: 42px; }
  .svp-qualbtn svg { width: 28px; height: 28px; }
  .svp-center-btn     { width: 72px; height: 72px; }
  .svp-center-btn svg { width: 32px; height: 32px; }
  .svp-qual-badge { font-size: 8px; padding: 2px 5px; }
  .svp-seekbar-wrap { height: 28px; }
  .svp-seekbar-wrap::before,
  .svp-buf, .svp-prog { height: 5px; }
  .svp-thumb { width: 15px; height: 15px; }
  .svp-dur { font-size: 14px; }
}

/* ─────────────────────────────────────────────────
   CONTAINER QUERIES (player-width aware)
   Container name: hvp  ← used by seekbar/overlay
   ───────────────────────────────────────────────── */

/* ── 600px: First compact trigger ── */
@container hvp (max-width: 600px) {
    .svp-controls {
      padding: 14px 6px 8px;
      background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 65%, transparent 100%);
    }
  
    /* Turn off universal gap — per-button margins below take over */
    .svp-bar { gap: 0 !important; }
  
    /* Per-button exact spacing */
    .svp-skipb  { margin-right: 2px !important; }
    .svp-play   { margin-right: 2px !important; }
    .svp-skipf  { margin-right: 2px !important; }
    .svp-time   { margin-right: 2px !important; }
    .svp-vol-wrap  { margin-right: 2px !important; }
    .svp-qual-wrap { margin-right: 2px !important; }
    .svp-fs        { margin-left: 0px !important; }
  
    .svp-dur, .svp-sep { display: none !important; }
    .svp-cur { display: block !important; font-size: 11px; font-weight: 600; }
    .svp-time { padding: 0; }
  
    .svp-btn      { width: 32px; height: 32px; }
    .svp-btn svg  { width: 26px; height: 26px; }
    .svp-qualbtn  { width: 32px; height: 32px; }
    .svp-qualbtn svg { width: 28px; height: 28px; }
  
    .svp-qual-badge { font-size: 4px; padding: 1px 3px; top: -3px; }
  
    .svp-seekbar-wrap {
      flex: 1 1 0% !important;
      min-width: 0 !important;
      height: 22px;
      margin: 0;
    }
  
    .svp-center-btn     { width: 46px; height: 46px; }
    .svp-center-btn svg { width: 22px; height: 22px; }
  
    .svp-qual-menu  { min-width: 150px; border-radius: 10px; }
    .svp-main-opt   { padding: 5px 9px; font-size: 13px; margin: 4px 7px; }
    .svp-qual-opt   { padding: 5px 9px; font-size: 11px; margin: 4px 7px; }
    .svp-sub-header { font-size: 13px; padding: 6px 10px; }
  
    .svp-qual-menu .svp-main-opt .right-value,
    .svp-qual-menu .svp-main-opt .right-tag,
    .svp-qual-menu .svp-qual-opt .right-tag { margin-right: -2px; }
  }
  
  /* ── 480px: Perfect Mobile Row (Large Icons) ── */
  @container hvp (max-width: 480px) {
    .svp-pip { display: none !important; }
  
    .svp-controls { padding: 10px 4px 6px !important; }
  
    .svp-bar { gap: 0 !important; }
  
    /* Per-button exact spacing */
    .svp-skipb  { margin-right: 2px !important; }
    .svp-play   { margin-right: 2px !important; }
    .svp-skipf  { margin-right: 2px !important; }
    .svp-time   { margin-right: 6px !important; }
    .svp-vol-wrap  { margin-right: 6px !important; }
    .svp-qual-wrap { margin-right: 4px !important; }
    .svp-fs        { margin-left: 0px !important; }
  
    .svp-btn,
    .svp-qualbtn { width: 36px !important; height: 36px !important; padding: 0 !important; }
  
    .svp-btn svg,
    .svp-qualbtn svg { width: 28px !important; height: 28px !important; }
  
    .svp-qual-badge { font-size: 6.5px; top: -6px; padding: 1px 3px; }
  
    .svp-seekbar-wrap {
      flex: 1 1 0% !important;
      min-width: 0 !important;
      height: 24px !important;
      margin: 0 !important;
    }
  
    .svp-seekbar-wrap::before { height: 4px; }
    .svp-buf, .svp-prog       { height: 4px; }
    .svp-thumb                { width: 12px; height: 12px; }
  
    .svp-time { padding: 0 !important; }
    .svp-dur  { font-size: 10.5px !important; }
  
    .svp-center-btn     { width: 44px !important; height: 44px !important; }
    .svp-center-btn svg { width: 22px !important; height: 22px !important; }
  
    .svp-qual-menu  { min-width: 130px; max-height: 230px; border-radius: 9px; }
    .svp-main-opt   { padding: 5px 8px; font-size: 12px; margin: 3px 6px; }
    .svp-qual-opt   { padding: 5px 8px; font-size: 10.5px; margin: 3px 6px; }
    .svp-sub-header { font-size: 12px; padding: 6px 9px; }
  
    .svp-main-opt .right-value,
    .svp-main-opt .right-tag { font-size: 8px; padding: 2px 8px; }
    .svp-qual-opt .right-tag  { font-size: 9px; padding: 2px 7px; }
  }
  
  /* ── 380px: Small devices ── */
  @container hvp (max-width: 380px) {
    .svp-bar { gap: 4px !important; }
    .svp-btn, .svp-qualbtn     { width: 34px !important; height: 34px !important; }
    .svp-btn svg, .svp-qualbtn svg { width: 24px !important; height: 24px !important; }
  
    .svp-dur       { font-size: 10px !important; }
    .svp-qual-menu { min-width: 118px; max-height: 210px; }
    .svp-qual-opt  { font-size: 10px;  padding: 4px 7px; margin: 3px 5px; }
    .svp-main-opt  { font-size: 11px;  padding: 4px 7px; margin: 3px 5px; }
    .svp-sub-header { font-size: 11px; padding: 5px 8px; }
  }
  
/* ─────────────────────────────────────────────────
   TABLET / iPAD — media query (screen-size aware)
   Covers both portrait and landscape iPad layouts
   ───────────────────────────────────────────────── */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* Tablet / iPad: slightly larger buttons than phone */
  .svp-btn      { width: 40px !important; height: 40px !important; }
  .svp-btn svg  { width: 26px !important; height: 26px !important; }
  .svp-qualbtn  { width: 40px !important; height: 40px !important; }
  .svp-qualbtn svg { width: 26px !important; height: 26px !important; }
  .svp-center-btn     { width: 60px !important; height: 60px !important; }
  .svp-center-btn svg { width: 26px !important; height: 26px !important; }
  .svp-qual-badge { font-size: 7px !important; padding: 1px 4px !important; }

  /* Fullscreen on tablet — larger tap targets */
  .svp-ratio.svp-in-fs .svp-btn      { width: 52px !important; height: 52px !important; }
  .svp-ratio.svp-in-fs .svp-btn svg  { width: 32px !important; height: 32px !important; }
  .svp-ratio.svp-in-fs .svp-qualbtn  { width: 52px !important; height: 52px !important; }
  .svp-ratio.svp-in-fs .svp-qualbtn svg { width: 32px !important; height: 32px !important; }
  .svp-ratio.svp-in-fs .svp-center-btn     { width: 80px !important; height: 80px !important; }
  .svp-ratio.svp-in-fs .svp-center-btn svg { width: 36px !important; height: 36px !important; }
  .svp-ratio.svp-in-fs .svp-controls { padding: 24px 16px env(safe-area-inset-bottom, 12px) !important; }
  .svp-ratio.svp-in-fs .svp-seekbar-wrap { height: 28px !important; }
  .svp-ratio.svp-in-fs .svp-seekbar-wrap::before,
  .svp-ratio.svp-in-fs .svp-buf,
  .svp-ratio.svp-in-fs .svp-prog { height: 5px !important; }
  .svp-ratio.svp-in-fs .svp-thumb { width: 16px !important; height: 16px !important; }
  .svp-ratio.svp-in-fs .svp-dur,
  .svp-ratio.svp-in-fs .svp-cur { font-size: 14px !important; }
}

  /* ── Overlay adjustments at 480px ── */
  @container hvp (max-width: 480px) {
    .svp-ov-pill         { padding: 6px 12px 6px 9px; gap: 8px; }
    .svp-ov-spinner      { width: 13px; height: 13px; border-width: 2px; }
    .svp-ov-label        { font-size: 11px; }
    .svp-ov-pill--loading { padding: 6px 12px 6px 9px; gap: 8px; border-radius: 999px; }
    .svp-ov-ring         { width: 15px; height: 15px; }
    .svp-ov-ring svg     { width: 15px; height: 15px; }
    .svp-ov-sub          { display: none; }
  
    /* Mobile 480px: very compact error card */
    .svp-ov-error-card    { gap: 8px; padding: 9px 28px 9px 9px; border-radius: 10px; max-width: min(230px, calc(100% - 12px)); }
    .svp-ov-error-icon    { width: 24px; height: 24px; }
    .svp-ov-error-icon svg { width: 12px; height: 12px; }
    .svp-ov-error-title   { font-size: 10.5px; margin-bottom: 2px; }
    .svp-ov-error-msg     { font-size: 8.5px; line-height: 1.4; }
    .svp-ov-error-dismiss { width: 18px; height: 18px; top: 7px; right: 7px; }
    .svp-ov-error-dismiss svg { width: 8px; height: 8px; }
  }
  
  /* ── Overlay adjustments at 600px ── */
  @container hvp (max-width: 600px) {
    .svp-ov-pill          { padding: 6px 12px 6px 9px; gap: 8px; }
    .svp-ov-spinner       { width: 13px; height: 13px; border-width: 2px; }
    .svp-ov-label         { font-size: 11px; }
    .svp-ov-pill--loading { padding: 6px 12px 6px 9px; gap: 8px; border-radius: 999px; }
    .svp-ov-ring          { width: 15px; height: 15px; }
    .svp-ov-ring svg      { width: 15px; height: 15px; }
    .svp-ov-sub           { display: none; }
  
    /* Mobile 600px: compact error card */
    .svp-ov-error-card    { gap: 9px; padding: 10px 30px 10px 10px; border-radius: 12px; max-width: min(260px, calc(100% - 16px)); }
    .svp-ov-error-icon    { width: 28px; height: 28px; }
    .svp-ov-error-icon svg { width: 14px; height: 14px; }
    .svp-ov-error-title   { font-size: 11.5px; margin-bottom: 3px; }
    .svp-ov-error-msg     { font-size: 9.5px; line-height: 1.45; }
    .svp-ov-error-dismiss { width: 20px; height: 20px; top: 8px; right: 8px; }
    .svp-ov-error-dismiss svg { width: 9px; height: 9px; }
  }
  
  /* ─────────────────────────────────────────────────
     LANDSCAPE — rotated phone
     ───────────────────────────────────────────────── */
  @media screen and (orientation: landscape) and (max-height: 500px) {
    .svp-ratio:not(.svp-in-fs) {
      padding-top: 0 !important;
      height: min(56.25vw, 100dvh) !important;
      max-height: 100dvh !important;
    }
  
    .svp-ratio:not(.svp-in-fs) .svp-video {
      object-fit: contain !important;
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important; height: 100% !important;
    }
  
    .svp-controls { padding: 12px 8px 4px !important; }
    .svp-btn svg, .svp-qualbtn svg { width: 22px !important; height: 22px !important; }
    .svp-btn, .svp-qualbtn         { width: 28px !important; height: 28px !important; }
    .svp-center-btn                { width: 42px !important; height: 42px !important; }
    .svp-center-btn svg            { width: 20px !important; height: 20px !important; }
    .svp-qual-badge                { font-size: 5px !important; }
    .svp-pip                       { display: none !important; }
  
    .svp-dur, .svp-sep { display: inline !important; }
    .svp-cur           { display: inline !important; }
    .svp-time          { padding: 0 2px !important; font-size: 10px !important; }
  
    .svp-qual-menu {
      max-height: calc(100dvh - 60px) !important;
      overflow-y: auto !important;
    }
  
    /* Seekbar: reset mobile inline styles */
    .svp-ratio.svp-in-fs .svp-seekbar-wrap {
      position: relative !important;
      bottom: auto !important; left: auto !important; right: auto !important;
      width: auto !important; margin: 0 !important; padding: 0 !important;
      flex: 1 1 0 !important;
    }
  }
  
  /* ── Landscape vol popup height guard ── */
  @media screen and (orientation: landscape) and (max-height: 500px) {
    .svp-vol-popup {
      max-height: calc(100dvh - 50px) !important;
      overflow: hidden !important;
    }
    .svp-bar {
      width: 100% !important;
      flex-wrap: nowrap !important;
    }
  }
  
  /* ─────────────────────────────────────────────────
     17. VIEWPORT FALLBACK (@supports not container-type)
     ───────────────────────────────────────────────── */
  @supports not (container-type: inline-size) {
    @media (max-width: 600px) and (orientation: portrait) {
      .svp-dur, .svp-sep { display: none !important; }
      .svp-cur { display: block !important; font-size: 11px; font-weight: 600; }
      .svp-bar { gap: 4px; }
      .svp-time { padding: 0; }
      .svp-btn, .svp-qualbtn     { width: 34px; height: 34px; }
      .svp-btn svg, .svp-qualbtn svg { width: 26px; height: 26px; }
      .svp-seekbar-wrap { flex: 1 1 0%; margin: 0; }
    }
  
    @media (max-width: 480px) {
      .svp-pip { display: none; }
      .svp-bar { gap: 6px; }
      .svp-btn, .svp-qualbtn     { width: 36px; height: 36px; }
      .svp-btn svg, .svp-qualbtn svg { width: 28px; height: 28px; }
      .svp-seekbar-wrap { flex: 1 1 0%; margin: 0; }
      .svp-controls { padding: 10px 4px 6px; }
    }
  
    @media (max-width: 380px) {
      .svp-bar { gap: 4px; }
      .svp-btn, .svp-qualbtn     { width: 34px; height: 34px; }
      .svp-btn svg, .svp-qualbtn svg { width: 24px; height: 24px; }
    }
  }
/* ══════════════════════════════════════════════════════════
   StreamVault Pro — _19-touch-fixes.css
   CROSS-DEVICE TOUCH FIXES — hover:none / pointer:coarse
   Mobile sticky hover/focus disable + touch button states
   ══════════════════════════════════════════════════════════ */

/* ── Disable sticky hover reveal on touch devices ── */
@media (hover: none) and (pointer: coarse) {

    /* Normal player: hover must NOT reveal controls (JS handles it) */
    .svp-ratio:hover .svp-controls {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  
    /* JS class still shows controls */
    .svp-ratio.svp-active   .svp-controls,
    .svp-ratio.svp-show     .svp-controls,
    .svp-ratio.svp-centered .svp-controls {
      opacity: 1 !important;
      pointer-events: all !important;
    }
  
    /* Fullscreen: visible by default, hidden only when svp-fs-hidden present */
    .svp-ratio.svp-in-fs.svp-fs-hidden .svp-controls {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  
    .svp-ratio.svp-in-fs:not(.svp-fs-hidden) .svp-controls {
      opacity: 1 !important;
      pointer-events: all !important;
    }
  
    /* Center button */
    .svp-ratio.svp-centered .svp-center-btn {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
  
    .svp-ratio.svp-in-fs .svp-center-btn { pointer-events: auto !important; }
  
    /* Touch button hover states — reset visual hover on touch */
    .svp-btn:hover,
    .svp-qualbtn:hover,
    .svp-volbtn:hover,
    .svp-pip:hover,
    .svp-fs:hover {
      background: var(--svp-btn-hover-bg, rgba(255,255,255,0.15)) !important;
      color: var(--svp-icon-hover-color, var(--svp-progress-color)) !important;
    }
  
    .svp-btn:hover svg,
    .svp-qualbtn:hover svg,
    .svp-volbtn:hover svg,
    .svp-pip:hover svg,
    .svp-fs:hover svg {
      fill: var(--svp-icon-hover-color, var(--svp-progress-color)) !important;
    }
  
    /* Center button: no scale on touch hover */
    .svp-center-btn:hover {
      background: var(--svp-center-bg) !important;
      transform: translate(-50%, -50%) !important;
    }
  
    /* Tooltip: only show when actively seeking */
    .svp-seekbar-wrap.svp-tooltip-active .svp-tooltip {
      opacity: 1 !important;
      visibility: visible !important;
    }
  
    .svp-seekbar-wrap:not(.svp-tooltip-active):hover .svp-tooltip {
      opacity: 0 !important;
    }
  
    /* Seekbar: no hover height growth on touch */
    .svp-seekbar-wrap:hover::before { height: 5px !important; }
    .svp-seekbar-wrap:hover .svp-buf,
    .svp-seekbar-wrap:hover .svp-prog { height: 5px !important; }
  
    /* Thumb: no scale on touch hover */
    .svp-seekbar-wrap:hover .svp-thumb {
      opacity: 1 !important;
      box-shadow: none !important;
      transform: translate(-50%, -50%) !important;
    }
  
    /* Focus/active: no outline on touch */
    .svp-wrap *:focus,
    .svp-wrap *:active,
    .svp-wrap *:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }
  
    /* Volume popup — compact for mobile */
    .svp-vol-popup {
      width: 32px;
      padding: 6px 6px 8px 6px;
      gap: 5px;
    }
  
    .svp-vol-track  { height: 72px; width: 5px; }
    .svp-vol-knob   { width: 12px; height: 12px; margin-bottom: -6px; }
    .svp-vol-pct    { font-size: 11px; }
  
    .svp-vol-slider {
      width: 32px; height: 100px;
      top: -10px; left: -14px;
    }
  
    /* All control buttons: no tap delay + visual press feedback */
    .svp-btn, .svp-center-btn, .svp-qualbtn,
    .svp-volbtn, .svp-pip, .svp-fs {
      touch-action: manipulation !important;
      -webkit-tap-highlight-color: transparent !important;
      transition: transform 0.08s ease, opacity 0.08s ease !important;
    }

    /* Visual press state on touch */
    .svp-btn:active,
    .svp-qualbtn:active,
    .svp-volbtn:active,
    .svp-pip:active,
    .svp-fs:active {
      transform: scale(0.88) !important;
      opacity: 0.75 !important;
    }

    .svp-center-btn:active {
      transform: translate(-50%, -50%) scale(0.88) !important;
      opacity: 0.75 !important;
    }

    /* Seekbar thumb: larger touch target on mobile */
    .svp-thumb {
      width: 14px !important;
      height: 14px !important;
      touch-action: none !important;
    }

    /* Ratio / video area: no tap delay */
    .svp-ratio {
      touch-action: manipulation !important;
      -webkit-tap-highlight-color: transparent !important;
    }
  
    /* Fullscreen: all interactive elements tappable */
    .svp-ratio.svp-in-fs .svp-server-btn,
    .svp-ratio.svp-in-fs .svp-btn,
    .svp-ratio.svp-in-fs .svp-center-btn {
      pointer-events: auto !important;
      touch-action: manipulation !important;
    }
  
    /* Scroll arrows */
    .svp-scroll-btn {
      touch-action: manipulation !important;
      -webkit-tap-highlight-color: transparent !important;
      pointer-events: auto !important;
    }
  
    /* Remove mask-image that blocks iOS Safari touch hit-testing */
    .svp-server-container {
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }
  }
/* ══════════════════════════════════════════════════════════
   StreamVault Pro — _20-ios-native.css
   iOS NATIVE PLAYER — missav.ws-style fullscreen-on-tap
   Applies when ratio.svp-ios-native is set (iPhone + iPad,
   both HLS and MP4 formats).
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper: clean black box, no overflow ── */
.svp-ios-native-wrap {
  position: relative;
  display: block;
  background: #000;
  border-radius: inherit;
  overflow: hidden;
}

/* ── Ratio container: hide the native <video> controls chrome
   until the tap overlay is dismissed ── */
.svp-ratio.svp-ios-native {
  background: #000;
  cursor: pointer;
}

/* Hide the <video> element visually until overlay is tapped —
   the poster is shown by the browser on the video element itself */
.svp-ratio.svp-ios-native video.svp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  opacity: 1;
}

/* ── Tap overlay: sits above video, shows poster + play button ── */
.svp-ios-tap-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  /* Let the video poster show through */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Play button circle — matches missav.ws aesthetic ── */
.svp-ios-play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.15s ease, transform 0.1s ease;
  pointer-events: none; /* clicks pass to parent overlay */
  flex-shrink: 0;
}

.svp-ios-tap-overlay:active .svp-ios-play-btn {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(0.92);
}

.svp-ios-play-btn svg {
  width: 30px;
  height: 30px;
  margin-left: 4px; /* visual center for play triangle */
}

/* ── iPad: slightly larger play button ── */
@media (min-width: 768px) {
  .svp-ios-play-btn {
    width: 88px;
    height: 88px;
  }
  .svp-ios-play-btn svg {
    width: 36px;
    height: 36px;
  }
}

/* ── Server switch container: keep visible below player on iOS ── */
.svp-ios-native-wrap .svp-server-container {
  display: block;
}

/* ── Hide all custom player controls in iOS native mode ── */
.svp-ratio.svp-ios-native .svp-controls,
.svp-ratio.svp-ios-native .svp-center-btn,
.svp-ratio.svp-ios-native .svp-overlay {
  display: none !important;
}