/* VaultPlayer 3.2 skip controls, marker editor, layout editor */

.vp-skip-policy-btn,
#vpSkipPolicyBtn {
  display: none !important;
}

.vp-skip-policy-btn[hidden],
#vpPreviousEpisodeBtn[hidden],
#vpEditMarkersBtn[hidden],
.vp-skip-overlay[hidden] {
  display: none !important;
}

.vp-skip-overlay {
  position: absolute;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: 15%;
  z-index: 70;
  margin: 0;
  padding: 0.42rem 0.92rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 14, 18, 0.46);
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.vp-skip-overlay:hover {
  background: rgba(12, 14, 18, 0.72);
  border-color: rgba(255, 255, 255, 0.46);
}

.vp-skip-overlay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

body.cinema-mode .player-stage.is-visible .vp-skip-overlay,
body.fullscreen-playback .player-stage.is-visible .vp-skip-overlay,
.tv-player .vp-skip-overlay {
  pointer-events: auto;
}

.vp-marker-pending {
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  color: #fde68a;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
}
.vp-marker-pending ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

[data-vp-layout-hidden="1"] {
  display: none !important;
}

.vp-marker-editor {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: auto;
}

.vp-marker-editor[hidden] {
  display: none !important;
}

.vp-marker-editor__panel {
  width: min(640px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  background: #161a20;
  color: #e8eaed;
  border: 1px solid #2a3140;
  border-radius: 14px;
  padding: 1rem 1.1rem 1.15rem;
}

.vp-marker-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vp-marker-editor__head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.vp-marker-editor__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9aa0a6;
  font-size: 1.5rem;
  cursor: pointer;
}

.vp-marker-editor__meta,
.vp-marker-editor__hint {
  color: #9aa0a6;
  font-size: 0.84rem;
}

.vp-marker-block {
  border-top: 1px solid #2a3140;
  padding: 0.75rem 0;
}

.vp-marker-block h3,
.vp-marker-block h4 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
}

.vp-marker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0.35rem 0;
}

.vp-marker-row span {
  min-width: 4.5rem;
  color: #9aa0a6;
  font-size: 0.82rem;
}

.vp-marker-row strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
}

.vp-marker-editor button,
.vp-layout-editor button,
.vp-layout-editor select {
  appearance: none;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: #0d0f12;
  color: #e8eaed;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.vp-marker-editor__save,
.vp-layout-editor #vpLayoutPublish,
.vp-layout-editor #vpLayoutSaveDraft {
  border-color: #2F80FF;
  background: #2F80FF;
  color: #fff;
}

.vp-marker-editor__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.vp-layout-editor {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--vp-nf-header-h, 68px);
  z-index: 10040;
  background: rgba(13, 15, 18, 0.96);
  border-bottom: 1px solid #2a3140;
  padding: 0.65rem 1rem;
}

.vp-layout-editor[hidden] {
  display: none !important;
}

.vp-layout-editor__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: center;
}

.vp-layout-editor ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vp-layout-item {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  border: 1px solid #2a3140;
  border-radius: 999px;
  padding: 0.2rem 0.35rem 0.2rem 0.7rem;
}

#vpLayoutStatus {
  color: #9aa0a6;
  font-size: 0.82rem;
}