:root {
      --brand: #dc2626;
      --brand-700: #b91c1c;
      --bg: #1a1a1b;
      --page: #0b0b0c;
      --text: #f5f5f5;
      --muted: #a1a1aa;
      --border: #27272a;
      --ghost: #111214;
      --track: #26262a;
      --buffer: #3f3f46;
      --shadow-1: 0 10px 25px rgba(0,0,0,.12);
      --shadow-2: 0 3px 8px rgba(0,0,0,.10);
    }
    * { box-sizing: border-box; }
    html,body{ margin:0; background:var(--page); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; }

    /* Use svh for stable height outside fullscreen */
    .shell{ min-height:100svh; padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); display:flex; align-items:center; justify-content:center; }

    .player{ width:100%; max-width:960px; background:var(--bg); border-radius:20px; box-shadow:var(--shadow-1); position:relative; overflow:clip; }
    .title{ position:absolute; left:10px; top:10px; background:rgba(0,0,0,.55); color:#fff; border-radius:9999px; padding:4px 10px; font-weight:600; font-size:12px; z-index:5; }

    .video-wrap{ position:relative; aspect-ratio:16/9; }
    video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

    /* Double-tap grid */
    .taps{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; z-index:9; pointer-events:none; }
    .tap-zone{ -webkit-tap-highlight-color:transparent; pointer-events:auto; }

    /* Controls */
    .controls{ position:absolute; left:0; right:0; bottom:0; padding:12px; transition:opacity .2s ease; z-index:999; pointer-events:auto; }
    .controls.hide{ opacity:0; }

    /* Toolbar now contains the seek row at the top */
    .toolbar{
      background:rgba(24,24,27,.72);
      border-radius:16px;
      padding:10px;
      box-shadow:var(--shadow-2);
      backdrop-filter:blur(6px);
      pointer-events:auto;
      position:relative;

      display:grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap:10px; /* فاصله بین نوار پیشرفت و ردیف دکمه‌ها */
    }

    .seek-row{ display:block; }
    .seek-row .range{ width:100%; }

    .row{ display:flex; align-items:center; gap:6px; flex:1 1 100%; }
    .row-inline{ flex-wrap:nowrap; }

    /* Buttons a bit compact */
    .btn{ -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:9999px; border:1px solid rgba(255,255,255,.06); background:var(--ghost); color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.08); cursor:pointer; touch-action:manipulation; pointer-events:auto; }
    .btn svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .btn-primary{ background: radial-gradient(120% 120% at 50% 10%, var(--brand) 0%, var(--brand-700) 80%); color:#fff; border:0; }

    .badge{ position:absolute; right:-2px; bottom:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:9999px; background:var(--brand); color:#fff; font-weight:800; font-size:10px; line-height:18px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.35); }

    .time{ font-size:11px; font-weight:600; color:#e5e7eb; opacity:.95; white-space:nowrap; }
    .ml-8{ margin-inline-start:8px; }
    .grow{ flex:1 1 auto; }

    /* Range (seek/volume) */
    .range{ width:100%; height:28px; appearance:none; background:transparent; direction:ltr; touch-action:pan-x; }
    .range::-webkit-slider-runnable-track{ height:10px; border-radius:9999px; background:var(--track); }
    .range::-moz-range-track{ height:10px; border-radius:9999px; background:var(--track); }
    .range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:9999px; background:var(--brand); border:3px solid #0b0b0c; margin-top:-3px; box-shadow:0 1px 2px rgba(0,0,0,.25); }
    .range::-moz-range-thumb{ width:16px; height:16px; border-radius:9999px; background:var(--brand); border:3px solid #0b0b0c; }

    .range--seek{ background:
      linear-gradient(to right, var(--brand) 0 0) left/calc(var(--progressPct,0)*1%) 6px no-repeat,
      linear-gradient(to right, var(--buffer,#3f3f46) 0 0) left/calc(var(--bufferPct,0)*1%) 6px no-repeat,
      linear-gradient(to right, var(--track,#26262a) 0 0) left/100% 6px no-repeat; background-repeat:no-repeat; background-position:left center,left center,left center; border-radius:9999px; }

    .range--vol{ max-width:160px; background:
      linear-gradient(to right, var(--brand) 0 0) left/calc(var(--volPct,0)*1%) 10px no-repeat,
      linear-gradient(to right, var(--track,#26262a) 0 0) left/100% 10px no-repeat; background-repeat:no-repeat; background-position:left center,left center; border-radius:9999px; }

    .bigplay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; }
    .bigplay .disk{ display:flex; align-items:center; justify-content:center; color:#fff; border-radius:9999px; width:80px; height:80px; background: radial-gradient(120% 120% at 50% 10%, var(--brand) 0%, var(--brand-700) 80%); box-shadow:0 18px 40px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.25); }
    .bigplay svg{ width:50px; height:50px; fill:currentColor; stroke:none; }

    @media (orientation:landscape) and (max-height:500px){ .player{ border-radius:0; } .row{ flex:0 0 auto; } .range--vol{ max-width:120px; } }
    @media (min-width:768px){
      .btn{ width:40px; height:40px; }
      .btn svg{ width:18px; height:18px; }
      .bigplay .disk{ width:88px; height:88px; }
      .range--vol{ max-width:200px; }
    }
    @media (prefers-reduced-motion:reduce){ .controls{ transition:none; } }

    /* Mobile-only (non-fullscreen) */
    @media (max-width:640px){
      .btn{ width:clamp(24px,6vw,32px); height:clamp(24px,6vw,32px); }
      .btn svg{ width:16px; height:16px; }
      .bigplay .disk{ width:clamp(52px,13vw,68px); height:clamp(52px,13vw,68px); }

      .toolbar{ gap:8px; padding:10px 10px 10px; }
      /* روی موبایل هم نوار داخل تولبار است، پس ذاتاً پایین‌تر از قبل قرار می‌گیرد */
      #settingsMenu{ bottom:58px; } /* کمی بیشتر چون ارتفاع تولبار بیشتر شده */
      /* Thinner seek for mobile */
      .range--seek::-webkit-slider-runnable-track{ height:3px; }
      .range--seek::-moz-range-track{ height:3px; }
      .range::-webkit-slider-thumb{ width:12px; height:12px; margin-top:-5px; }
      .range::-moz-range-thumb{ width:12px; height:12px; }

      /* Hide skip ±10 and volume slider when not fullscreen */
      .player:not(.is-fs) #btnBack,
      .player:not(.is-fs) #btnFwd,
      .player:not(.is-fs) #vol{ display:none !important; }
      .controls .range--seek{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
    }

    /* Fullscreen/mobile layout fixes */
    .player.is-fs .video-wrap{ aspect-ratio:auto; min-height:100dvh; }
    .player.is-fs .controls{ padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); padding-bottom:env(safe-area-inset-bottom); }
  
    .player.is-fs{ border-radius:0; } /* remove rounded corners in FS to avoid bleed/black corners */
    .player.is-fs .toolbar{ margin-bottom:0; }
    

/* === Inject: Pure red progress & volume tracks (remove grey overlay) === */
:root { --hg-brand: #dc2626; } /* Tailwind red-600 */
#player .range,
#player input[type="range"] {
  background: transparent !important;
}

/* Progress bar: use only the red progress fill via background-size */
#player .range--seek {
  /* Red progress only; no grey layer */
  background:
    linear-gradient(to right, var(--hg-brand) 0 0) left/ calc(var(--progressPct, 0) * 1%) 6px no-repeat !important;
}
/* Volume bar: same logic using --volumePct (fallback if theme sets it differently) */
#player .range--vol,
#player input[type="range"].range--vol {
  background:
    linear-gradient(to right, var(--hg-brand) 0 0) left/ calc(var(--volumePct, 0) * 1%) 6px no-repeat !important;
}

/* Normalize WebKit track to be fully transparent, removing grey default */
#player input[type="range"]::-webkit-slider-runnable-track {
  background: transparent !important;
}
#player input[type="range"]::-moz-range-track {
  background: transparent !important;
}
#player input[type="range"]::-ms-track {
  background: transparent !important;
  color: transparent;
}

/* Ensure the base bar isn't painted by other rules */
#player .range,
#player .range--seek,
#player .range--vol {
  box-shadow: none !important;
}



/* === Inject v7: visible base red track (no grey), plus red fill === */
:root { --hg-brand: #dc2626; --hg-brand-weak: rgba(220,38,38,.25); }

#player input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: 
    linear-gradient(var(--hg-brand) 0 0) left/ calc(var(--progressPct, 0) * 1%) 3px no-repeat,
    linear-gradient(var(--hg-brand-weak) 0 0) left/ 100% 3px no-repeat !important;
  height: 3px; /* for Firefox */
  border: 0;
}

/* Volume uses --volumePct (fallback to progressPct if theme code hasn't set it yet) */
#player input[type="range"].range--vol {
  background:
    linear-gradient(var(--hg-brand) 0 0) left/ calc(var(--volumePct, var(--progressPct, 0)) * 1%) 3px no-repeat,
    linear-gradient(var(--hg-brand-weak) 0 0) left/ 100% 3px no-repeat !important;
}

/* WebKit track/thumb */
#player input[type="range"]::-webkit-slider-runnable-track { height:3px; background: transparent !important; border:0; }
#player input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width:14px; height:14px; border-radius:50%; background: var(--hg-brand); margin-top:-5.5px; border:0; }

/* Firefox track/thumb */
#player input[type="range"]::-moz-range-track { height:3px; background: transparent !important; border:0; }
#player input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background: var(--hg-brand); border:0; }

/* Edge/IE */
#player input[type="range"]::-ms-track { height:3px; background: transparent !important; color: transparent; border:0; }
#player input[type="range"]::-ms-fill-lower { background: var(--hg-brand-weak) !important; }
#player input[type="range"]::-ms-fill-upper { background: var(--hg-brand-weak) !important; }
#player input[type="range"]::-ms-thumb { width:14px; height:14px; border-radius:50%; background: var(--hg-brand); border:0; }

/* Ensure progress bar (seek) and volume share same visual */
#player .range--seek,
#player .range--vol {
  box-shadow: none !important;
}



/* === Inject v8: robust volume track selectors (red with base track) === */
#player input[type="range"][id*="vol"],
#player input[type="range"][class*="vol"],
#player .range--vol {
  -webkit-appearance: none;
  appearance: none;
  background:
    linear-gradient(var(--hg-brand) 0 0) left/ calc(var(--volumePct, var(--progressPct, 0)) * 1%) 3px no-repeat,
    linear-gradient(var(--hg-brand-weak) 0 0) left/ 100% 3px no-repeat !important;
  height: 3px;
  border: 0;
}
#player input[type="range"][id*="vol"]::-webkit-slider-runnable-track,
#player input[type="range"][class*="vol"]::-webkit-slider-runnable-track,
#player .range--vol::-webkit-slider-runnable-track { height:3px; background: transparent !important; }
#player input[type="range"][id*="vol"]::-moz-range-track,
#player input[type="range"][class*="vol"]::-moz-range-track,
#player .range--vol::-moz-range-track { height:3px; background: transparent !important; }
#player input[type="range"][id*="vol"]::-webkit-slider-thumb,
#player input[type="range"][class*="vol"]::-webkit-slider-thumb,
#player .range--vol::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background: var(--hg-brand); margin-top:-5.5px; border:0; }
#player input[type="range"][id*="vol"]::-moz-range-thumb,
#player input[type="range"][class*="vol"]::-moz-range-thumb,
#player .range--vol::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background: var(--hg-brand); border:0; }



/* === Inject v8: mobile compact UI === */
@media (max-width: 480px){
  #player .controls,
  #player .hg-controls,
  #player .hg-toolbar { padding: 6px 8px !important; gap: 6px !important; }

  #player .btn { height: 36px !important; min-width: 36px !important; padding: 0 8px !important; border-radius: 10px !important; }
  #player .btn svg { width: 16px !important; height: 16px !important; }

  #player .title { font-size: 14px !important; }

  /* Seek/Volume thumbs smaller */
  #player input[type="range"]::-webkit-slider-thumb { width: 12px !important; height: 12px !important; margin-top:-4.5px !important; }
  #player input[type="range"]::-moz-range-thumb    { width: 12px !important; height: 12px !important; }

  /* Blur/backdrop area smaller (if used) */
  #player .controls,
  #player .toolbar { backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }

  /* Reduce spacing rows */
  #player .seek-row { margin: 6px 6px 8px !important; }
}