:root {
  color-scheme: light;
  --h-primary: #0a59f7;
  --h-primary-hover: #0649d8;
  --h-primary-text: #ffffff;
  --h-primary-container: #cedefe;
  --h-background: #f1f3f5;
  --h-background-text: #182431;
  --h-surface: #ffffff;
  --h-surface-text: #182431;
  --h-surface-variant: #f1f3f5;
  --h-surface-variant-text: #59636c;
  --h-surface-high: #e5e5ea;
  --h-outline: #c7cbd0;
  --h-success: #087a45;
  --h-warning: #a34c00;
  --h-error: #c91f23;
  --h-shadow: rgb(24 36 49 / 16%);
  --h-logo-plate: #ffffff;
  --h-logo-outline: #d8d8d8;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --h-primary: #5291ff;
  --h-primary-hover: #76a8ff;
  --h-primary-text: #0d0d0d;
  --h-primary-container: #1d3f74;
  --h-background: #18181a;
  --h-background-text: #e5e5e5;
  --h-surface: #202224;
  --h-surface-text: #e5e5e5;
  --h-surface-variant: #303336;
  --h-surface-variant-text: #c2c6ca;
  --h-surface-high: #3f4246;
  --h-outline: #666666;
  --h-success: #5bd69a;
  --h-warning: #ffad66;
  --h-error: #ff7477;
  --h-shadow: rgb(0 0 0 / 40%);
  --h-logo-plate: #f7f8fa;
  --h-logo-outline: #8b9198;
}

html,
body {
  height: 100%;
  height: 100dvh;
  background: var(--h-background) !important;
  color: var(--h-background-text) !important;
  font-family: "HarmonyOS Sans", "HarmonyOS Sans SC", "HarmonyOS Sans TC",
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

main {
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Mobile search/catalog use the page's one dependable scroll container.
   Nested flex scrollers can collapse when Android Chrome changes its visual
   viewport for the address bar, keyboard, or an orientation change. */
@media (max-width: 1023px) {
  #search-page,
  #catalog-app {
    height: auto !important;
    min-height: 100% !important;
  }

  #search-results-scroll,
  #catalog-results-scroll {
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #catalog-layout {
    display: block !important;
  }

  #catalog-results-section {
    margin-top: 0.75rem;
  }
}

body,
button,
input,
select,
textarea {
  font-size: 14px;
}

/* Captions are video content, not themed secondary UI text. Keep browser-native
   and Vidstack text tracks fully legible over every frame in both site themes. */
video::cue {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: rgb(0 0 0 / 82%) !important;
  text-shadow: 0 1px 2px #000000 !important;
}

.vds-captions {
  --media-user-text-color: #ffffff !important;
  --media-cue-color: #ffffff !important;
  --media-user-text-bg: rgb(0 0 0 / 82%) !important;
  --media-cue-bg: rgb(0 0 0 / 82%) !important;
}

.vds-captions [data-part="cue"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: rgb(0 0 0 / 82%) !important;
  text-shadow: 0 1px 2px #000000 !important;
}

/* HarmonyOS-derived neutral surface mapping for the existing Tailwind markup. */
.bg-gray-950,
.bg-gray-900 {
  background-color: var(--h-background) !important;
}

.bg-gray-800,
.bg-gray-900\/50,
.bg-black\/50,
.bg-black\/70 {
  background-color: var(--h-surface) !important;
}

.bg-gray-700,
.bg-gray-700\/50 {
  background-color: var(--h-surface-variant) !important;
}

.bg-gray-600 {
  background-color: var(--h-surface-high) !important;
}

.text-white,
.text-gray-100,
.text-gray-200 {
  color: var(--h-surface-text) !important;
}

.text-gray-300,
.text-gray-400,
.text-gray-500 {
  color: var(--h-surface-variant-text) !important;
}

.border-gray-600,
.border-gray-700,
.border-gray-800 {
  border-color: var(--h-outline) !important;
}

.divide-gray-600 > :not([hidden]) ~ :not([hidden]),
.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--h-outline) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.nav-link.active,
.nav-link:focus {
  background-color: var(--h-primary) !important;
  color: var(--h-primary-text) !important;
}

.text-blue-300,
.text-blue-400,
.text-blue-500,
.text-sky-300,
.text-sky-400 {
  color: var(--h-primary) !important;
}

.text-emerald-300,
.text-green-300,
.text-green-400 {
  color: var(--h-success) !important;
}

.text-amber-300,
.text-amber-400,
.text-orange-300 {
  color: var(--h-warning) !important;
}

.text-red-300,
.text-red-400,
.text-red-500 {
  color: var(--h-error) !important;
}

.hover\:bg-gray-600:hover,
.hover\:bg-gray-700:hover,
.hover\:bg-gray-800:hover {
  background-color: var(--h-surface-high) !important;
}

.hover\:bg-blue-700:hover {
  background-color: var(--h-primary-hover) !important;
}

.hover\:text-white:hover {
  color: var(--h-surface-text) !important;
}

input,
select,
textarea {
  background: var(--h-surface) !important;
  border-color: var(--h-outline) !important;
  color: var(--h-surface-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--h-surface-variant-text) !important;
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--h-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.focusable:focus-visible {
  outline: 2px solid var(--h-primary) !important;
  outline-offset: 2px;
}

nav {
  background: var(--h-surface) !important;
  border-right: 1px solid var(--h-outline);
  box-shadow: 2px 0 12px var(--h-shadow);
}

nav .nav-link,
nav a,
nav button {
  color: var(--h-surface-variant-text);
}

nav svg:not([fill="none"]),
nav svg:not([fill="none"]) path,
nav svg:not([fill="none"]) rect {
  fill: currentColor !important;
}

nav svg[fill="none"],
nav svg[fill="none"] path,
nav svg[fill="none"] rect,
nav svg[fill="none"] line {
  fill: none !important;
  stroke: currentColor !important;
}

.bg-red-900\/50 {
  background-color: color-mix(in srgb, var(--h-error) 14%, var(--h-surface)) !important;
}

.rounded-lg {
  border-radius: 8px !important;
}

.rounded-xl,
.rounded-2xl {
  border-radius: 16px !important;
}

.shadow,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: 0 8px 24px var(--h-shadow) !important;
}

/* P0 logo legibility: every transparent mark crosses both a light and a dark
   neutral, so neither dark nor white artwork can disappear into its plate. */
img.object-contain,
img[data-netv-logo] {
  box-sizing: border-box;
  padding: 4px;
  background:
    linear-gradient(135deg, var(--h-logo-plate) 0 48%, #4b535c 52% 100%) !important;
  border: 1px solid var(--h-logo-outline);
  border-radius: 8px;
  filter:
    drop-shadow(0 0 1px rgb(0 0 0 / 100%))
    drop-shadow(0 1px 2px rgb(0 0 0 / 86%));
}

.netv-channel-logo-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border: 1px solid var(--h-logo-outline);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--h-logo-plate) 0 48%, #4b535c 52% 100%);
}

.netv-channel-logo-frame .netv-channel-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  filter:
    drop-shadow(0 0 1px rgb(0 0 0 / 100%))
    drop-shadow(0 1px 2px rgb(0 0 0 / 86%));
}

.netv-channel-logo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 2px #000000;
  opacity: 0;
}

.netv-channel-logo-frame.is-fallback .netv-channel-logo-fallback {
  opacity: 1;
}

#netv-theme-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  border: 1px solid var(--h-outline);
  border-radius: 16px;
  background: var(--h-surface-variant);
  color: var(--h-surface-text);
  font-size: 16px;
  line-height: 1;
}

#netv-theme-toggle:hover {
  background: var(--h-primary-container);
  color: var(--h-surface-text);
}

.netv-theme-toggle-login {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
}

@media (prefers-reduced-motion: no-preference) {
  body,
  nav,
  .bg-gray-900,
  .bg-gray-800,
  .bg-gray-700 {
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  }
}