:root {
  --kv-accent: #11A968;
  --kv-accent-2: #4ebcff;
  --kv-bg: #071421;
  --kv-panel: rgba(8, 15, 24, .86);
  --kv-text: #f7fbff;
  --kv-muted: #90a5b7;
  --kv-danger: #ff5b67;
}

.kv-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  overflow: hidden;
  border-radius: 14px;
  background: #05090e;
  color: var(--kv-text);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .34);
  isolation: isolate;
  outline: none;
  user-select: none;
}

.kv-player * { box-sizing: border-box; }

.kv-player video,
.kv-backdrop,
.kv-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kv-player video {
  z-index: 1;
  object-fit: contain;
  background: #000;
}

.kv-backdrop {
  z-index: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.015);
  filter: saturate(.9) brightness(.72);
}

.kv-shade {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,8,13,.67) 0%, rgba(3,8,13,.05) 28%, rgba(3,8,13,.05) 55%, rgba(3,8,13,.82) 100%),
    linear-gradient(90deg, rgba(3,8,13,.30), transparent 34%, transparent 70%, rgba(3,8,13,.18));
  opacity: 1;
  transition: opacity .2s ease;
}

.kv-player.is-playing .kv-backdrop { opacity: 0; }
.kv-player.is-playing .kv-shade { opacity: .72; }

.kv-topbar,
.kv-controls,
.kv-center,
.kv-resume,
.kv-message {
  position: absolute;
  z-index: 5;
}

.kv-topbar {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 30px;
  background: linear-gradient(180deg, rgba(5,10,16,.76), transparent);
  transition: opacity .2s ease, transform .2s ease;
}

.kv-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}

.kv-selects {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.kv-select {
  appearance: none;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 9px;
  color: #fff;
  background: rgba(14,23,34,.88);
  padding: 8px 30px 8px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #dce7ef 50%),
    linear-gradient(135deg, #dce7ef 50%, transparent 50%);
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 9px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.kv-select option { color: #eaf2f8; background: #101923; }
.kv-select[hidden] { display: none !important; }

.kv-center {
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.kv-bigplay {
  pointer-events: auto;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #071018;
  background: linear-gradient(145deg, #35D98D, var(--kv-accent));
  box-shadow: 0 16px 40px rgba(79, 190, 72, .36), 0 3px 0 rgba(255,255,255,.18) inset;
  cursor: pointer;
  transition: transform .16s ease, opacity .2s ease, box-shadow .16s ease;
}

.kv-bigplay:hover { transform: scale(1.08); box-shadow: 0 18px 46px rgba(79,190,72,.47); }
.kv-player.is-playing .kv-bigplay { opacity: 0; pointer-events: none; }
.kv-bigplay svg { width: 31px; height: 31px; margin-left: 4px; fill: currentColor; }

.kv-controls {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(0deg, rgba(2,7,11,.92), rgba(2,7,11,.06));
  transition: opacity .2s ease, transform .2s ease;
}

.kv-player.controls-hidden .kv-controls,
.kv-player.controls-hidden .kv-topbar {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.kv-player.controls-hidden .kv-topbar { transform: translateY(-8px); }

.kv-progress-wrap { position: relative; width: 100%; margin-bottom: 10px; }
.kv-range {
  width: 100%;
  height: 5px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--kv-accent-2) 0 var(--kv-progress,0%), rgba(255,255,255,.22) var(--kv-progress,0%) 100%);
}
.kv-range::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.kv-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}


.kv-select--control {
  flex: 0 0 auto;
  min-width: 82px;
  height: 34px;
  padding: 6px 28px 6px 10px;
  border-color: rgba(255,255,255,.18);
  background-color: rgba(8,15,24,.72);
  font-size: 12px;
}

.kv-controls-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kv-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #f5f9fc;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.kv-btn:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.kv-btn.is-active { color: var(--kv-accent); background: rgba(17,169,104,.14); }
.kv-btn svg { width: 21px; height: 21px; fill: currentColor; }

.kv-time {
  flex: 0 0 auto;
  min-width: 110px;
  color: #e6eef4;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.kv-volume {
  width: 88px;
  max-width: 12vw;
  height: 4px;
  appearance: none;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  cursor: pointer;
}
.kv-volume::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.kv-volume::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

.kv-spacer { flex: 1; }

.kv-resume {
  left: 50%;
  top: 50%;
  width: min(420px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(8,16,24,.95);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  text-align: center;
}
.kv-resume[hidden] { display: none; }
.kv-resume strong { display:block; margin-bottom:5px; font-size:19px; }
.kv-resume p { margin:0 0 16px; color:var(--kv-muted); }
.kv-resume-actions { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; }
.kv-action {
  border: 0;
  border-radius: 9px;
  padding: 10px 15px;
  color: #071018;
  background: var(--kv-accent);
  font-weight: 700;
  cursor: pointer;
}
.kv-action.secondary { color:#fff; background:rgba(255,255,255,.11); }

.kv-message {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 34px));
  text-align: center;
  padding: 20px;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.95);
}
.kv-message .kv-film-icon { display:block; font-size:44px; line-height:1; margin-bottom:12px; }
.kv-message h3 { margin:0 0 7px; color:#fff; font-size:24px; }
.kv-message p { margin:0; color:#a9bbc9; }
.kv-message.is-error h3 { color:#ffb4ba; }

.kv-buffering {
  position:absolute;
  z-index:6;
  left:50%; top:50%;
  width:44px; height:44px;
  margin:-22px 0 0 -22px;
  border:4px solid rgba(255,255,255,.22);
  border-top-color:var(--kv-accent);
  border-radius:50%;
  animation:kvspin .8s linear infinite;
}
.kv-buffering[hidden] { display:none; }
@keyframes kvspin { to { transform:rotate(360deg); } }

.kv-player--empty .kv-shade { opacity:.88; }
.kv-player--empty .kv-controls,
.kv-player--empty .kv-topbar { display:none; }

@media (max-width: 760px) {
  .kv-player { min-height: 230px; border-radius: 10px; }
  .kv-topbar { padding: 11px 11px 26px; }
  .kv-title { display:none; }
  .kv-selects { width:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .kv-selects::-webkit-scrollbar { display:none; }
  .kv-select { flex:0 0 auto; max-width:180px; padding-top:7px; padding-bottom:7px; }
  .kv-bigplay { width:62px; height:62px; }
  .kv-controls { padding:22px 9px 9px; }
  .kv-btn { width:34px; height:34px; flex-basis:34px; }
  .kv-time { min-width:88px; font-size:11px; }
  .kv-volume { display:none; }
  .kv-controls-row { gap:2px; }
  .kv-select--control { min-width:68px; max-width:82px; height:32px; padding-left:8px; font-size:11px; }
}