/* VIDEO service identity: electric violet over the shared archive interface. */
body.video-page {
  --accent: #9b87ff;
  --accent-warm: #ff6bd6;
  --accent-rose: #ff86b7;
  --signal: #b7a8ff;
  --ink-inverse: #090510;
  --line: rgba(198, 186, 255, 0.2);
  --line-strong: rgba(198, 186, 255, 0.52);
  --scrollbar-thumb: rgba(155, 135, 255, 0.72);
  --scrollbar-thumb-hover: #b7a8ff;
  background:
    radial-gradient(circle at 74% 28%, rgba(155, 135, 255, 0.13), transparent 34%),
    radial-gradient(circle at 16% 72%, rgba(255, 107, 214, 0.07), transparent 32%),
    linear-gradient(180deg, #08050d 0%, #030205 100%);
}

body.video-page::before {
  background-image:
    linear-gradient(90deg, rgba(183, 168, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(183, 168, 255, 0.035) 1px, transparent 1px);
}

body.video-page .system-chrome {
  background: rgba(7, 4, 12, 0.86);
  border-bottom-color: rgba(183, 168, 255, 0.22);
}

body.video-page .system-brand-mark,
body.video-page .hero-brand-mark {
  filter: sepia(0.15) saturate(2.4) hue-rotate(204deg) brightness(1.18);
}

body.video-page .system-network i,
body.video-page .system-status i {
  background: var(--accent);
  box-shadow: 0 0 16px rgba(155, 135, 255, 0.8);
}

body.video-page .space-service-nav {
  border-color: rgba(183, 168, 255, 0.22);
  background: rgba(7, 4, 12, 0.97);
}

body.video-page .space-service-nav a {
  min-width: clamp(124px, 14.5vw, 166px);
}

body.video-page .space-service-nav a.is-current {
  background: var(--accent);
  color: var(--ink-inverse);
}

body.video-page .space-service-nav a.is-current::after {
  background: var(--accent-warm);
  box-shadow: 0 0 14px rgba(255, 107, 214, 0.72);
}

body.video-page .search-stage,
body.video-page .library-drawer,
body.video-page dialog {
  border-color: rgba(183, 168, 255, 0.28);
}

body.video-page .module-index,
body.video-page .search-prefix,
body.video-page .eyebrow {
  color: var(--accent);
}

body.video-page .primary-button,
body.video-page .round-button,
body.video-page .tab-button.is-active,
body.video-page .owner-mode-button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
}

body.video-page :focus-visible {
  outline-color: var(--accent);
}

@media (max-width: 680px) {
  body.video-page .space-service-nav a {
    width: 25%;
    min-width: 0;
    padding-inline: 8px;
  }
}

@media (max-width: 430px) {
  body.video-page .space-service-nav a {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 5px;
  }

  body.video-page .space-service-nav svg {
    display: none;
  }
}