.videoWrap{position:relative; background:#000; flex:0 0 auto; overflow:hidden;}
video{width:100%; height:auto; display:block; background:#000; aspect-ratio:16/9; outline:none; cursor:pointer;}
video::cue{
  background:transparent;
  color:#fff;
  font-family:var(--sans);
  font-size:1.1em;
  font-weight:600;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    -2px 0 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    0 2px 0 #000;
}

.videoOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:5;
}
.overlayIcon{
  position:relative;
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.8s var(--ease-spring), transform .3s var(--ease-bounce);
  border-radius:50%;
  background:rgba(15,17,23,.55);
  border:none;
}
.overlayIcon.show{
  opacity:1;
}
.overlayIcon.pulse{
  animation:overlayPulse 0.4s var(--ease-bounce);
}
@keyframes overlayPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.18);}
  100%{transform:scale(1);}
}
.overlayIcon::before{display:none;}
.overlayIcon.show:hover{
  background:rgba(15,17,23,.65);
  transform:scale(1.08);
}
.overlayIcon i{
  font-size:36px;
  color:rgba(255,255,255,.92)!important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
  position:relative;
  z-index:2;
  transition:transform 0.3s var(--ease-bounce), color 0.3s ease;
  margin-left:4px;
}
.overlayIcon.pause i{
  margin-left:0;
}
.overlayIcon.show:hover i{
  transform:scale(1.15);
  color:rgba(255,255,255,1)!important;
}

.controls{display:flex; flex-direction:column; gap:10px; padding:12px; border-top:1px solid rgba(140,160,210,.04); flex:0 0 auto; position:relative; z-index:10;}
.controlsStrip{
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  padding:5px 6px;
  border:none;
  background:transparent;
}
.controlsStrip::after{display:none;}
.stripDivider{width:1px; height:22px; background:rgba(140,160,210,.06); flex:0 0 auto; transition:background .2s ease, height .2s ease;}
.controlsStrip:hover .stripDivider{height:24px;}
.group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.controlsStrip .iconBtn{box-shadow:none;}
.controlsStrip .miniCtl{box-shadow:none;}
.controlsStrip .timeChip{box-shadow:none;}

.iconBtn{
  width:40px; height:36px;
  border-radius:var(--r2);
  border:none;
  background:var(--surface-2);
  box-shadow:var(--shadow3);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  transition:all .2s var(--ease-bounce);
}
.iconBtn:hover{
  background:var(--surface-3);
  transform:translateY(-2px);
}
.iconBtn:active{
  transform:scale(.9) translateY(0);
  transition-duration:.08s;
}
.iconBtn.primary{
  background:rgba(136,164,196,.10);
}
.iconBtn.primary:hover{
  background:rgba(136,164,196,.16);
  box-shadow:0 0 12px rgba(136,164,196,.10);
}
.iconBtn .fa{font-size:15px; color:var(--iconStrong)!important; opacity:.9; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
.iconBtn:hover .fa{transform:scale(1.15); opacity:1;}

.timeChip{display:inline-flex; align-items:center; gap:8px; padding:6px 9px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); font-family:var(--mono); font-size:12px; color:var(--text); letter-spacing:.02em; font-variant-numeric:tabular-nums; transition:background .2s ease;}
.timeChip:hover{background:var(--surface-3);}
.timeDot{width:8px; height:8px; border-radius:999px; background:rgba(136,164,196,.60); opacity:.95; transition:transform .3s ease, background .3s ease; animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.95;} 50%{transform:scale(1.2);opacity:1;}}

.seekWrap{display:flex; align-items:center; gap:10px; width:100%; position:relative;}
.seekTrack{
  position:absolute;
  left:0; right:0; top:50%;
  height:10px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(140,165,220,.04);
  border:1px solid rgba(140,165,220,.06);
  box-shadow:var(--shadowInset);
  overflow:hidden;
  pointer-events:none;
  transition:height .2s var(--ease-bounce), border-color .2s ease;
}
.seekWrap:hover .seekTrack{height:12px; border-color:rgba(140,165,220,.09);}
.seekFill{
  height:100%;
  width:0%;
  background:rgba(136,164,196,.50);
  border-radius:999px 0 0 999px;
  transition:width .1s linear, background .2s ease;
}
.seekWrap:hover .seekFill{background:rgba(136,164,196,.62);}
.seek{-webkit-appearance:none; appearance:none; width:100%; height:18px; border-radius:999px; background:transparent; border:none; box-shadow:none; outline:none; position:relative; z-index:2; cursor:pointer; margin:0;}
.seek::-webkit-slider-runnable-track{background:transparent; height:18px;}
.seek::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 2px 6px rgba(0,0,0,.30); cursor:pointer; transition:transform .2s var(--ease-bounce), box-shadow .2s ease, border-color .2s ease; margin-top:0;}
.seek:hover::-webkit-slider-thumb{transform:scale(1.2); box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 10px rgba(136,164,196,.15); border-color:rgba(200,210,230,.40);}
.seek:active::-webkit-slider-thumb{transform:scale(1.05); transition-duration:.08s;}
.seek::-moz-range-track{background:transparent; height:18px;}
.seek::-moz-range-thumb{width:16px; height:16px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 2px 6px rgba(0,0,0,.30); cursor:pointer;}

.miniCtl{display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); position:relative; z-index:3; transition:all .2s var(--ease-bounce);}
.miniCtl:hover{background:var(--surface-3); transform:translateY(-1px);}
.miniCtl:active{transform:scale(.97) translateY(0); transition-duration:.08s;}
.miniCtl .fa{font-size:14px; color:var(--iconStrong)!important; opacity:.95; flex:0 0 auto; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
.miniCtl:hover .fa{transform:scale(1.1); opacity:1;}

.volWrap{position:relative; width:120px; height:14px; display:flex; align-items:center;}
.volTrack{
  position:absolute;
  left:0; right:0; top:50%;
  height:6px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(140,165,220,.04);
  border:1px solid rgba(140,165,220,.06);
  overflow:hidden;
  pointer-events:none;
  transition:height .2s var(--ease-bounce), border-color .2s ease;
}
.volWrap:hover .volTrack{height:8px; border-color:rgba(140,165,220,.09);}
.volFill{
  height:100%;
  width:100%;
  background:rgba(136,164,196,.40);
  border-radius:999px 0 0 999px;
  transition:width .05s linear, background .2s ease;
}
.volWrap:hover .volFill{background:rgba(136,164,196,.55);}
.vol{-webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:999px; background:transparent; border:none; outline:none; position:relative; z-index:2; cursor:pointer; margin:0;}
.vol::-webkit-slider-runnable-track{background:transparent; height:14px;}
.vol::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer; transition:transform .2s var(--ease-bounce), box-shadow .2s ease;}
.vol:hover::-webkit-slider-thumb{transform:scale(1.25); box-shadow:0 1px 6px rgba(0,0,0,.30), 0 0 8px rgba(136,164,196,.12);}
.vol::-moz-range-track{background:transparent; height:14px;}
.vol::-moz-range-thumb{width:14px; height:14px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer;}

.volTooltip{
  position:absolute;
  bottom:calc(100% + 12px);
  left:0;
  padding:8px 12px;
  border-radius:var(--r2);
  background:rgba(18,21,30,.95);
  border:1px solid rgba(140,160,210,.10);
  color:#fff;
  font-family:var(--mono);
  font-size:13px;
  font-weight:400;
  letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateX(-50%) translateY(4px) scale(.95);
  transition:opacity .2s ease, transform .25s var(--ease-bounce), left .05s linear;
  box-shadow:var(--shadow2);
  z-index:100;
}
.volTooltip::before{display:none;}
.volTooltip::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:rgba(18,21,30,.95);
}
.volTooltip.show{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}

.speedBox{display:flex; align-items:center; gap:10px; position:relative;}
.speedBtn{border:none; outline:none; background:transparent; color:var(--text); font-family:var(--mono); font-size:12px; letter-spacing:0; padding:0 2px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; gap:8px; transition:color .15s ease, transform .15s ease;}
.speedBtn span:first-child{min-width:3.5ch; text-align:right; transition:transform .15s var(--ease-bounce);}
.speedBtn:hover{color:rgba(235,240,250,1);}
.speedBtn:hover span:first-child{transform:scale(1.05);}
.speedBtn:active{transform:scale(.95); transition-duration:.08s;}
.speedCaret .fa{font-size:12px; opacity:.85; color:var(--icon)!important; transition:transform .25s var(--ease-bounce);}
.speedBtn:hover .speedCaret .fa{transform:translateY(3px) rotate(180deg);}

.progressPill{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); min-width:220px; transition:background .2s ease;}
.progressPill:hover{background:var(--surface-3);}
.progressLabel{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--textMuted); margin-right:2px; transition:color .2s ease;}
.progressPill:hover .progressLabel{color:var(--textMuted);}
.progressBar{width:120px; height:8px; border-radius:999px; border:none; background:rgba(140,165,220,.04); overflow:hidden; transition:height .2s var(--ease-bounce);}
.progressPill:hover .progressBar{height:10px;}
.progressBar>div{height:100%; width:0%; background:rgba(136,164,196,.75); transition:width .4s var(--ease-spring);}
.progressPct{font-family:var(--mono); font-size:12px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:.02em; min-width:58px; text-align:right; transition:color .2s ease;}
.progressPill:hover .progressPct{color:rgba(235,240,252,.98);}

.timeSep{color:rgba(175,185,210,.78);}
.seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 2px 6px rgba(0,0,0,.30);}
.vol:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 1px 4px rgba(0,0,0,.25);}
.seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 2px 6px rgba(0,0,0,.30);}
.vol:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 1px 4px rgba(0,0,0,.25);}

/* Mute button */
.volMuteBtn{border:none; background:transparent; padding:0; margin:0; cursor:pointer; display:flex; align-items:center; justify-content:center; width:14px; height:14px; flex:0 0 auto;}
.volMuteBtn .fa{font-size:14px; color:var(--iconStrong)!important; opacity:.95; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
.volMuteBtn:hover .fa{transform:scale(1.15); opacity:1;}
.volMuteBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:2px; border-radius:3px;}
.miniCtl.muted{opacity:.5;}
.miniCtl.muted .volFill{opacity:.3;}

/* Seek feedback overlay */
.seekFeedback{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--mono);
  font-size:28px;
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  opacity:0;
  transition:opacity .15s ease;
  pointer-events:none;
  z-index:6;
}
.seekFeedback.show{opacity:1;}

/* Error overlay */
.errorOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:rgba(15,17,23,.88);
  z-index:10;
}
.errorOverlay>.fa{font-size:42px; color:rgba(255,180,100,.85);}
.errorMsg{font-size:14px; color:rgba(218,225,240,.85); text-align:center; line-height:1.5; max-width:320px;}
.errorNextBtn{
  border:none;
  background:var(--surface-3);
  color:var(--text);
  padding:10px 20px;
  border-radius:var(--r2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  min-width:44px;
  min-height:44px;
  transition:background .2s ease;
}
.errorNextBtn:hover{background:var(--surface-4);}
.errorNextBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:2px;}