:root {
  --accent: #34d0ff;
  --accent-secondary: #ec4899;
  --accent-tertiary: #22c55e;
  --accent-warm: #f59e0b;
  --button-accent: #34d0ff;
  --particles-opacity: 0.28;
  --accent-soft: rgba(52, 208, 255, 0.18);
  --accent-glow: rgba(52, 208, 255, 0.45);
  --accent-strong: rgba(52, 208, 255, 0.72);
  --text-primary: #e9f5ff;
  --text-muted: #9db4c7;
  --text-subtle: #778a9e;
  --text-inverse: #0a1420;
  --border: rgba(137, 179, 211, 0.3);
  --surface-1: rgba(11, 20, 32, 0.93);
  --surface-2: rgba(15, 27, 43, 0.94);
  --surface-3: rgba(7, 14, 24, 0.96);
  --surface-glass: color-mix(in srgb, var(--surface-1) 78%, transparent);
  --surface-raised: color-mix(in srgb, var(--surface-2) 92%, #ffffff 4%);
  --surface-sunken: color-mix(in srgb, var(--surface-3) 88%, #000000 12%);
  --shadow-sm: 0 10px 24px rgba(2, 8, 16, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow-md: 0 18px 38px rgba(2, 8, 16, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --shadow-lg: 0 28px 56px rgba(1, 6, 13, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.065);
  --shadow-glow: 0 0 20px var(--accent-glow);
  --shadow-cinematic: 0 22px 60px rgba(0, 0, 0, 0.48), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --bg-deep: #050b13;
  --bg-midnight: #020710;
  --bg-velvet: #140918;
  --bg-aurora: #052329;
  --bg-slate: #111827;
  --bg-sunset: #151826;
  --bg-cinema: #070911;
  --bg-neon: #080817;
  --bg-ember: #170b10;
  --bg-custom: #050b13;
  --bg-main: var(--bg-deep);
  --bg-tint: rgba(7, 17, 30, 0.72);
  --surface-input: color-mix(in srgb, var(--surface-2) 88%, #ffffff 6%);
  --surface-input-soft: color-mix(in srgb, var(--surface-2) 76%, transparent);
  --surface-overlay: color-mix(in srgb, var(--bg-main) 76%, transparent);
  --navbar-bg: rgba(8, 14, 23, 0.98);
  --dropdown-bg: color-mix(in srgb, var(--surface-2) 97%, transparent);
  --dropdown-border: color-mix(in srgb, var(--accent) 32%, var(--border));
  --dropdown-item-bg: color-mix(in srgb, var(--surface-3) 72%, transparent);
  --dropdown-item-hover: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  --dropdown-item-active: color-mix(in srgb, var(--accent) 82%, #ffffff 18%);
  --dropdown-shadow: 0 16px 34px color-mix(in srgb, var(--bg-main) 58%, transparent);
  --surface-player: color-mix(in srgb, var(--surface-2) 94%, transparent);
  --surface-player-header-start: color-mix(in srgb, var(--surface-2) 96%, transparent);
  --surface-player-header-end: color-mix(in srgb, var(--surface-1) 86%, var(--accent-soft));
  --ring-accent: color-mix(in srgb, var(--accent) 24%, transparent);
  --control-border: color-mix(in srgb, var(--border) 86%, transparent);
  --control-hover: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  --media-card-width: 142px;
  --media-card-height: 250px;
  --media-card-image-height: 190px;
  --section-density-gap: 28px;
  --image-theme-brightness: 78%;
  --image-theme-saturation: 110%;
  --image-theme-blur: 0px;
  --image-theme-overlay: 0.48;
  --image-theme-glass: 0.64;
  --image-theme-refraction: 18px;
  --image-theme-zoom: 100%;
  --image-theme-scale: 1;
  --image-theme-position: center;
}

html[data-image-theme='on'] body {
  background: #03070d !important;
  isolation: isolate;
  position: relative;
}

html[data-image-theme='on'] body::before,
html[data-image-theme='on'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

html[data-image-theme='on'] body::before {
  z-index: 0;
  background-image: var(--image-theme-url);
  background-position: var(--image-theme-position);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #03070d;
  filter: brightness(var(--image-theme-brightness)) saturate(var(--image-theme-saturation)) blur(var(--image-theme-blur));
  transform: scale(var(--image-theme-scale));
}

html[data-image-theme='on'] body::after {
  z-index: 0;
  background:
    radial-gradient(circle at 18% 5%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    linear-gradient(rgba(2, 7, 13, var(--image-theme-overlay)), rgba(2, 7, 13, min(0.94, calc(var(--image-theme-overlay) + 0.18))));
}

html[data-image-theme='on'] body > :not(script):not(style) {
  position: relative;
  z-index: 1;
}

html[data-image-theme='on'] {
  --surface-1: rgba(10, 18, 28, var(--image-theme-glass));
  --surface-2: rgba(15, 26, 39, min(0.94, calc(var(--image-theme-glass) + 0.08)));
  --surface-3: rgba(7, 13, 22, min(0.96, calc(var(--image-theme-glass) + 0.14)));
  --navbar-bg: rgba(6, 12, 20, min(0.94, calc(var(--image-theme-glass) + 0.12)));
  --surface-glass: rgba(10, 18, 28, var(--image-theme-glass));
  --border: rgba(220, 239, 255, 0.2);
}

html[data-image-theme='on'] :where(button, .btn, .card, .media-card, .settings-panel, .quick-control, .settings-control, .row-link, .dropdown-menu) {
  backdrop-filter: blur(var(--image-theme-refraction)) saturate(1.18);
  -webkit-backdrop-filter: blur(var(--image-theme-refraction)) saturate(1.18);
}

html[data-image-theme-motion='on'][data-image-theme='on'] body::before {
  animation: bilm-image-theme-drift 28s ease-in-out infinite alternate;
}

@keyframes bilm-image-theme-drift {
  from { transform: scale(var(--image-theme-scale)) translate3d(-0.5%, -0.4%, 0); }
  to { transform: scale(var(--image-theme-scale)) translate3d(0.7%, 0.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-image-theme='on'] body::before { animation: none !important; }
}

html[data-control-high-contrast='on'] {
  --text-muted: #d7e7f4;
  --text-subtle: #bdcfde;
  --border: rgba(235, 247, 255, 0.42);
}

html[data-control-large-text='on'],
html[data-interface-scale='110'] { font-size: 110%; }
html[data-interface-scale='120'] { font-size: 120%; }
html[data-control-large-text='on'][data-interface-scale='110'] { font-size: 118%; }
html[data-control-large-text='on'][data-interface-scale='120'] { font-size: 128%; }

html[data-control-visible-focus='on'] :focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
}

html[data-control-reduce-transparency='on'] {
  --image-theme-glass: 0.92 !important;
  --surface-1: rgba(10, 18, 28, 0.94);
  --surface-2: rgba(15, 26, 39, 0.96);
}

[data-watch-access-link][hidden],
.watch-access-locked,
.watch-access-pending {
  display: none !important;
}

:root[data-poster-size='small'] {
  --media-card-width: 126px;
  --media-card-height: 226px;
  --media-card-image-height: 170px;
}

:root[data-poster-size='large'] {
  --media-card-width: 160px;
  --media-card-height: 282px;
  --media-card-image-height: 216px;
}

:root[data-density='comfortable'] {
  --section-density-gap: 34px;
}

:root[data-density='dense'] {
  --section-density-gap: 20px;
}

:root[data-background='deep'] {
  --bg-main: var(--bg-deep);
  --bg-tint: rgba(7, 17, 30, 0.72);
  --surface-1: rgba(13, 22, 34, 0.92);
  --surface-2: rgba(17, 29, 44, 0.92);
  --surface-3: rgba(10, 17, 27, 0.94);
}

:root[data-background='midnight'] {
  --bg-main: var(--bg-midnight);
  --bg-tint: rgba(4, 10, 21, 0.74);
  --surface-1: rgba(10, 17, 29, 0.94);
  --surface-2: rgba(14, 24, 38, 0.94);
  --surface-3: rgba(8, 14, 23, 0.95);
}

:root[data-background='velvet'] {
  --bg-main: var(--bg-velvet);
  --bg-tint: rgba(27, 12, 33, 0.72);
  --surface-1: rgba(31, 15, 40, 0.92);
  --surface-2: rgba(39, 19, 47, 0.94);
  --surface-3: rgba(24, 12, 30, 0.94);
}

:root[data-background='aurora'] {
  --bg-main: var(--bg-aurora);
  --bg-tint: rgba(5, 35, 41, 0.72);
  --surface-1: rgba(8, 45, 52, 0.9);
  --surface-2: rgba(11, 56, 64, 0.92);
  --surface-3: rgba(8, 36, 42, 0.93);
}

:root[data-background='slate'] {
  --bg-main: var(--bg-slate);
  --bg-tint: rgba(17, 24, 39, 0.72);
  --surface-1: rgba(20, 33, 54, 0.9);
  --surface-2: rgba(27, 42, 68, 0.92);
  --surface-3: rgba(19, 30, 49, 0.93);
}

:root[data-background='sunset'] {
  --bg-main: var(--bg-sunset);
  --bg-tint: rgba(27, 33, 54, 0.72);
  --surface-1: rgba(29, 35, 58, 0.9);
  --surface-2: rgba(38, 46, 74, 0.92);
  --surface-3: rgba(24, 30, 48, 0.93);
}

:root[data-background='cinema'] {
  --bg-main: var(--bg-cinema);
  --bg-tint: rgba(7, 9, 17, 0.76);
  --surface-1: rgba(14, 18, 30, 0.91);
  --surface-2: rgba(22, 27, 43, 0.92);
  --surface-3: rgba(9, 12, 21, 0.94);
  --accent-secondary: #e879f9;
  --accent-tertiary: #4ade80;
}

:root[data-background='neon'] {
  --bg-main: var(--bg-neon);
  --bg-tint: rgba(8, 8, 23, 0.74);
  --surface-1: rgba(16, 18, 42, 0.9);
  --surface-2: rgba(23, 24, 55, 0.92);
  --surface-3: rgba(10, 11, 31, 0.94);
  --accent-secondary: #fb7185;
  --accent-tertiary: #a3e635;
}

:root[data-background='ember'] {
  --bg-main: var(--bg-ember);
  --bg-tint: rgba(31, 13, 19, 0.72);
  --surface-1: rgba(37, 18, 27, 0.9);
  --surface-2: rgba(50, 25, 36, 0.92);
  --surface-3: rgba(25, 12, 19, 0.94);
  --accent-secondary: #f472b6;
  --accent-tertiary: #facc15;
}

:root[data-background='custom'] {
  --bg-main: var(--bg-custom);
  --bg-tint: color-mix(in srgb, var(--bg-custom) 78%, transparent);
  --surface-1: color-mix(in srgb, var(--bg-custom) 72%, #ffffff 8%);
  --surface-2: color-mix(in srgb, var(--bg-custom) 68%, #ffffff 12%);
  --surface-3: color-mix(in srgb, var(--bg-custom) 76%, #000000 24%);
}

html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  background-color: var(--bg-main);
  color: var(--text-primary);
  color-scheme: dark;
  overflow-x: hidden;
  overscroll-behavior: none;
}

html {
  min-height: 100vh;
  min-height: 100dvh;
  background: #000000;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

select {
  color-scheme: dark;
  max-width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 8px;
  color: var(--text-primary);
  background:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%) right 16px center / 6px 6px no-repeat,
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) right 10px center / 6px 6px no-repeat,
    var(--surface-input);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) !important;
  background-position:
    right 16px center,
    right 10px center !important;
  background-repeat: no-repeat !important;
  background-size:
    6px 6px,
    6px 6px !important;
  caret-color: var(--accent);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
}

select:focus,
select:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
  outline: 2px solid var(--ring-accent);
  outline-offset: 2px;
}

select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

select option,
select optgroup {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--surface-3) 96%, #000000 4%);
}

select option:checked {
  color: var(--text-inverse);
  background-color: var(--dropdown-item-active);
}

select option:hover {
  color: var(--text-primary);
  background-color: var(--dropdown-item-hover);
}

#bilmGlobalParticlesCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  opacity: var(--particles-opacity);
}

body {
  background-image:
    radial-gradient(circle at 48% -18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 92%, #111827 8%) 0%, var(--bg-main) 52%, color-mix(in srgb, var(--bg-main) 88%, #020617 12%) 100%);
  background-size: auto, auto;
  background-position: center, center;
  background-attachment: fixed;
}

body.has-fixed-navbar #navbar-placeholder,
body.has-fixed-navbar #navbarContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

@media (min-width: 769px) {
  body.has-fixed-navbar:not(.bilm-watch-viewer-page) main {
    height: 100vh !important;
    padding-top: calc(64px + 20px) !important;
  }
}

@media (max-width: 768px), (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  html:not([data-image-theme='on']) body.has-fixed-navbar:not(.bilm-watch-viewer-page)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #080e17;
    z-index: 998;
    pointer-events: none;
  }

  html[data-image-theme='on'] body.has-fixed-navbar:not(.bilm-watch-viewer-page) #navbar-placeholder::before,
  html[data-image-theme='on'] body.has-fixed-navbar:not(.bilm-watch-viewer-page) #navbarContainer::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #080e17;
    z-index: 998;
    pointer-events: none;
  }

  body.has-fixed-navbar #navbar-placeholder,
  body.has-fixed-navbar #navbarContainer {
    top: env(safe-area-inset-top, 0px);
  }

  body.has-fixed-navbar:not(.bilm-watch-viewer-page) main {
    padding-top: calc(60px + env(safe-area-inset-top, 0px) + 12px) !important;
  }
}

html[data-motion='off'] * {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 78%, #ffffff 6%) rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

*::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--accent) 78%, #ffffff 8%);
  border-radius: 10px;
}

.type-badge-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-inverse);
  background: color-mix(in srgb, #0f172a 82%, var(--accent) 18%);
  padding: 2px 6px;
  border-radius: 999px;
  pointer-events: none;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-card {
  width: var(--media-card-width) !important;
  height: var(--media-card-height) !important;
}

.movie-card img {
  width: 100% !important;
  height: var(--media-card-image-height) !important;
}

.results-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--media-card-width), var(--media-card-width))) !important;
}

:root[data-density='dense'] .section,
:root[data-density='dense'] section {
  margin-bottom: var(--section-density-gap);
}

:root[data-density='comfortable'] .scroll-row {
  gap: 18px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:not(:disabled),
a[href] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, #ffffff 8%);
  outline-offset: 3px;
}

.movie-card,
.show-more-card,
.row-load-more-button,
.section,
.settings-panel,
.catalog-hero,
.search-container,
.filters-drawer,
.command-palette-panel,
.mobile-search-item,
.desktop-search-suggest,
.home-search-suggest {
  backdrop-filter: blur(14px);
}

:where(
  .section,
  .settings-panel,
  .catalog-hero,
  .filters-drawer,
  .command-palette-panel,
  .legal-card,
  .account-panel,
  .history-panel,
  .maintenance-panel,
  .music-panel,
  .details-card,
  .random-card,
  .chat-shell
) {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border)) !important;
  box-shadow:
    0 20px 44px rgba(1, 7, 15, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 32px color-mix(in srgb, var(--accent) 3%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

:where(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -10px 24px rgba(0, 0, 0, 0.08);
}

.movie-card {
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, #ffffff 3%), color-mix(in srgb, var(--surface-3) 90%, #000000 10%)) !important;
  border-color: color-mix(in srgb, var(--border) 82%, transparent) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34) !important;
}

.movie-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 54%, rgba(2, 8, 16, 0.62) 100%),
    linear-gradient(118deg, color-mix(in srgb, var(--accent) 0%, transparent), color-mix(in srgb, var(--accent) 16%, transparent) 42%, transparent 64%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.movie-card img {
  transition: transform var(--transition-base), filter var(--transition-base);
}

.movie-card:hover,
.movie-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border)) !important;
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.46),
    0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

.movie-card:hover::before,
.movie-card:focus-visible::before {
  opacity: 1;
}

.movie-card:hover img,
.movie-card:focus-visible img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.card-badge-stack,
.card-meta,
.card-action,
.card-resume-chip,
.card-reason-chip,
.type-badge-overlay,
.card-new-season-badge {
  z-index: 2;
}

.source-badge-overlay,
.type-badge-overlay,
.card-new-season-badge {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.rating-badge-overlay {
  backdrop-filter: blur(8px);
}

.filter-chip,
.type-filter-btn,
.sort-button,
.filter-button,
.section-btn,
.mode-toggle-button,
.filters-action,
.btn,
.row-link,
.account-menu-item,
.settings-menu-item,
.notification-menu-item {
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.filter-chip:hover,
.type-filter-btn:hover,
.sort-button:hover,
.filter-button:hover,
.section-btn:hover:not(:disabled),
.mode-toggle-button:hover,
.filters-action:hover:not(:disabled),
.btn:hover:not(:disabled),
.row-link:hover,
.account-menu-item:hover,
.settings-menu-item:hover,
.notification-menu-item:hover {
  transform: translateY(-1px);
}

@keyframes bilmPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bilmSoftPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent);
  }
}

html[data-motion='off'] .movie-card img,
html[data-motion='off'] .movie-card::before {
  transition: none !important;
}