:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-height: 100dvh;
  --keyboard-inset: 0px;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Managed client themes only override the shared color tokens. The default
 * Uno Player Glass theme deliberately has no override, so its existing UI stays
 * pixel-for-pixel unchanged. These tokens are used by home, library/player,
 * and settings surfaces, making an admin theme change visible without
 * replacing page layouts or component styling.
 */
html[data-theme="netflix-dark"] {
  --accent: #e50914;
  --accent-glow: rgba(229, 9, 20, 0.38);
  --yellow: #e50914;
  --yellow-soft: rgba(229, 9, 20, 0.17);
  --yellow-accent: #e50914;
  --yellow-glow: rgba(229, 9, 20, 0.68);
  --yellow-glow-subtle: rgba(229, 9, 20, 0.28);
  --card-border-active: rgba(229, 9, 20, 0.9);
  --blue: #f05b62;
  --teal: #f05b62;
  --cyan: #f05b62;
}

html[data-theme="midnight"] {
  --accent: #70B8A5;
  --accent-glow: rgba(112, 184, 165, 0.38);
  --yellow: #70B8A5;
  --yellow-soft: rgba(112, 184, 165, 0.18);
  --yellow-accent: #70B8A5;
  --yellow-glow: rgba(112, 184, 165, 0.68);
  --yellow-glow-subtle: rgba(112, 184, 165, 0.28);
  --card-border-active: rgba(112, 184, 165, 0.9);
  --blue: #70B8A5;
  --teal: #70B8A5;
  --cyan: #70B8A5;
  --teal-glass-top: rgba(18, 23, 23, 0.74);
  --teal-glass-bottom: rgba(18, 23, 23, 0.88);
  --surface: rgba(18, 23, 23, 0.78);
  --surface-strong: rgba(18, 23, 23, 0.94);
  --surface-hover: rgba(18, 23, 23, 0.86);
}

html[data-theme="zen-minimal"] {
  --accent: #70B8A5;
  --accent-glow: rgba(112, 184, 165, 0.3);
  --yellow: #70B8A5;
  --yellow-soft: rgba(112, 184, 165, 0.15);
  --yellow-accent: #70B8A5;
  --yellow-glow: rgba(112, 184, 165, 0.55);
  --yellow-glow-subtle: rgba(112, 184, 165, 0.22);
  --card-border-active: rgba(112, 184, 165, 0.84);
  --blue: #70B8A5;
  --teal: #70B8A5;
  --cyan: #70B8A5;
  --teal-glass-top: rgba(18, 23, 23, 0.62);
  --teal-glass-bottom: rgba(18, 23, 23, 0.82);
  --surface: rgba(18, 23, 23, 0.7);
  --surface-strong: rgba(18, 23, 23, 0.9);
  --surface-hover: rgba(18, 23, 23, 0.78);
}

html[data-theme="cinema-gold"] {
  --accent: #70B8A5;
  --accent-glow: rgba(112, 184, 165, 0.38);
  --yellow: #70B8A5;
  --yellow-soft: rgba(112, 184, 165, 0.17);
  --yellow-accent: #70B8A5;
  --yellow-glow: rgba(112, 184, 165, 0.66);
  --yellow-glow-subtle: rgba(112, 184, 165, 0.27);
  --card-border-active: rgba(112, 184, 165, 0.9);
  --blue: #70B8A5;
  --teal: #70B8A5;
  --cyan: #70B8A5;
  --teal-glass-top: rgba(18, 23, 23, 0.72);
  --teal-glass-bottom: rgba(18, 23, 23, 0.88);
  --surface: rgba(18, 23, 23, 0.76);
  --surface-strong: rgba(18, 23, 23, 0.92);
  --surface-hover: rgba(18, 23, 23, 0.84);
}

html {
  min-height: 100%;
  background: #121717;
  touch-action: manipulation;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
[role="button"],
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

video {
  background: #000;
}

:where(html[data-pointer="coarse"] button,
html[data-pointer="coarse"] [role="button"],
html[data-pointer="coarse"] a[aria-label]) {
  min-width: 46px;
  min-height: 46px;
}

html[data-pointer="coarse"] a.primary-btn,
html[data-pointer="coarse"] a.secondary-btn {
  min-height: 46px;
}

html[data-pointer="coarse"] input:not([type="checkbox"]):not([type="radio"]),
html[data-pointer="coarse"] select,
html[data-pointer="coarse"] textarea {
  min-height: 46px;
}

html[data-pointer="coarse"] input,
html[data-pointer="coarse"] select,
html[data-pointer="coarse"] textarea {
  font-size: max(16px, 1em);
}

html[data-pointer="coarse"] .zen-toggle {
  width: 48px;
  height: 46px;
}

html[data-pointer="coarse"] .zen-toggle > span {
  inset: 11px 3px;
}

html[data-device-family="phone"] body,
html[data-device-family="tablet"] body {
  min-height: var(--app-height);
}

html[data-device-family="tv"] {
  scroll-behavior: smooth;
}

html[data-device-family="tv"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #70B8A5;
  outline-offset: 4px;
}

html[data-device-family="tv"] :where(a, button, [tabindex]) {
  scroll-margin: 12vh 8vw;
}

html[data-display-mode="standalone"] body {
  min-height: var(--app-height);
}

@media (hover: none) and (pointer: coarse) {
  * {
    scrollbar-width: none;
  }

  *::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  html {
    --compact-landscape: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}