:root {
  --page: #080b16;
  --surface: #1a2030;
  --surface-raised: #242837;
  --line: rgba(255, 235, 232, .22);
  --text: #fff9f5;
  --muted: #e0d7dc;
  --accent: #ffac97;
  --accent-light: #ffd2bc;
  --gold: #f6c5a7;
  --ambient-poster: url('/mountain-sunset.jpg');
}

body { background: #080b16; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--ambient-poster) center / cover no-repeat;
  pointer-events: none;
  animation: mountain-drift 45s ease-in-out infinite alternate;
}
@keyframes mountain-drift { from { transform: scale(1.03) translateX(-.5%); } to { transform: scale(1.1) translateX(.5%); } }
body::before {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 9, 25, .18) 0%, rgba(8, 9, 25, .46) 45%, rgba(7, 9, 21, .84) 100%),
    linear-gradient(90deg, rgba(9, 10, 29, .3), transparent 72%);
  pointer-events: none;
}
.app-shell { position: relative; z-index: 2; }

.site-intro {
  background:
    linear-gradient(155deg, rgba(7, 8, 23, .68), rgba(10, 10, 25, .88)),
    var(--ambient-poster) center / cover;
  animation: glass-intro-out .9s 1.55s cubic-bezier(.28,.8,.2,1) both;
}
.site-intro::before { opacity: .75; }
.intro-orbit { border-color: #ffe1d2a3; box-shadow: 0 0 0 70px #ffffff0a, 0 0 0 145px #ffffff08, inset 0 0 65px #ffe8df4d; }
.intro-mark { border-color: #ffffffc9; background: linear-gradient(145deg,#ffe9dc99,#ffb7a876 60%,#9a799489); box-shadow: 0 18px 55px #040413bb,inset 0 2px 1px #fff9; backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); color: #fff7f0; text-shadow: 0 3px 18px #612537; }
.intro-caption { color: #ffe5db; }
@keyframes glass-intro-out { to { opacity: 0; visibility: hidden; transform: scale(1.1); filter: blur(16px); } }

.topbar { top: 12px; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar-inner {
  max-width: min(calc(100% - 36px), 1552px);
  min-height: 72px;
  margin: 0 auto;
  padding: 0 23px;
  gap: clamp(18px, 2.4vw, 38px);
  border: 1px solid #ffece843;
  border-radius: 23px;
  background: linear-gradient(125deg, #ffffff26, #d9d6ec16 48%, #ffffff13);
  box-shadow: inset 0 1px 0 #fff7, inset 0 -1px 0 #ffffff16, 0 18px 55px #0405199c;
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
}
.brand { color: #fff8f2; text-shadow: 0 2px 14px #0008; }
.brand-mark { color: #fff; border: 1px solid #ffebeab9; background: linear-gradient(145deg,#ffd4c796,#fc9f967e,#8a6dba72); box-shadow: inset 0 1px 0 #fff9,0 7px 25px #230c3975; }
.main-nav { height: 72px; gap: clamp(14px, 1.7vw, 25px); }
.nav-link { color: #e2d9e4; text-shadow: 0 1px 9px #0008; }
.nav-link.active::after { bottom: 12px; background: #ffe3d7; box-shadow: 0 0 12px #ffb7a5; }
.nav-count { background: #ffffff30; color: #fff; border-radius: 99px; }
.search-box, .filter-group, .recommendation-tabs, .tracker-input-wrap { border-color: #fff6; background: #ffffff17; box-shadow: inset 0 1px 0 #ffffff2b; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.search-box input::placeholder { color: #ded2dd; }
.button { border-radius: 13px; }
.button-primary { color: #241c31; border-color: #fff8; background: linear-gradient(135deg,#fff0df,#f8bcae 52%,#ed9aaa); box-shadow: inset 0 1px 0 #fff, 0 12px 30px #11091b66; }
.button-primary:not(:disabled):hover { background: linear-gradient(135deg,#fff8eb,#ffcfbd 54%,#f4a4b1); box-shadow: inset 0 1px 0 #fff,0 16px 35px #11091b8c; }
.button-secondary, .button-ghost, .hero.featured #add-hero {
  color: #fff9f5 !important;
  -webkit-text-fill-color: #fff9f5 !important;
  border-color: #ffffff74 !important;
  background: linear-gradient(135deg,#ffffff36,#ffffff16) !important;
  box-shadow: inset 0 1px 0 #ffffff7d,0 8px 24px #02030c40;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.button-secondary:not(:disabled):hover, .button-ghost:not(:disabled):hover { background: #ffffff47 !important; }

.hero {
  width: min(calc(100% - 36px), 1552px);
  min-height: clamp(570px, 47vw, 710px);
  margin-top: 28px;
  border: 1px solid #fff8;
  border-radius: 31px;
  background: linear-gradient(105deg, rgba(7, 10, 25, .48), rgba(28, 20, 46, .05) 77%);
  box-shadow: inset 0 1px 0 #fff8, 0 36px 110px #020311b3;
}
.hero::before { background: linear-gradient(90deg,#080b1a99 0%,#0a0d1c4d 42%,#1111260d 77%),linear-gradient(0deg,#090a1966,transparent 46%); }
.hero::after { opacity: .12; }
.hero-image-wrap { display: none; }
.hero.has-poster .hero-image-wrap {
  display: block;
  inset: 14% 4.5% auto auto;
  z-index: 2;
  width: 42%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid #fff9;
  border-radius: 22px;
  background: #151525;
  box-shadow: inset 0 1px 0 #fffc, 0 36px 90px #080913b3, 0 0 0 10px #ffffff0d;
  animation: hero-art-drift 15s ease-in-out infinite alternate;
}
.hero-image-wrap img { display: block; object-position: center; filter: saturate(1.12) contrast(1.05); }
@keyframes hero-art-drift { from { transform: translateY(4px) rotate(1.3deg); } to { transform: translateY(-9px) rotate(-.8deg); } }
.hero-content {
  max-width: min(670px, 64%);
  margin: 45px 0 45px clamp(28px, 5vw, 80px);
  padding: clamp(34px, 4vw, 58px);
  border: 1px solid #fff6;
  border-radius: 27px;
  background: linear-gradient(135deg,#ffffff2b,#ffffff12 55%,#91779619);
  box-shadow: inset 0 1px 0 #fff6,0 22px 68px #0809177d;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}
.hero h1 { font-size: clamp(48px, 5.6vw, 84px); line-height: 1.01; text-shadow: 0 6px 34px #071021cc; }
.hero h1 em { color: #ffe3d7; }
.hero p { color: #fff0ea; font-size: 15px; text-shadow: 0 2px 13px #000b; }
.hero-kicker, .section-kicker, .modal-kicker { color: #ffdac8; }
.hero-corner { padding: 8px 12px; border: 1px solid #ffffff52; border-radius: 99px; background: #ffffff1f; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.hero-art { display: none; }

.overview-strip {
  width: min(calc(100% - 74px), 1488px);
  min-height: 72px;
  margin-top: 13px;
  padding: 0 24px;
  border: 1px solid #ffffff45;
  border-radius: 17px;
  background: linear-gradient(110deg,#ffffff29,#ffffff0c);
  box-shadow: inset 0 1px 0 #ffffff55,0 14px 38px #0304115e;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  color: #f6edf1;
}
.overview-stats strong { color: #ffe7d7; }
.library-section, .recommendations-section {
  width: min(calc(100% - 48px), 1552px);
  max-width: none;
  margin: 34px auto 58px;
  padding: 22px clamp(12px, 2.2vw, 34px) 52px;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.recommendations-section::before { display: none; }
.section-heading h2 { color: #fff9f6; text-shadow: 0 5px 25px #0007; }
.section-heading h2 em { color: #ffe0cf; }
.section-heading p { color: #e5dce5; }
.filter.active, .recommendation-tab.active { color: #fff; background: #ffffff38; box-shadow: inset 0 1px 0 #fff7,0 5px 16px #080a1938; }
.filter, .recommendation-tab { color: #eee3e9; }
.empty-state { background: #ffffff14; border-color: #ffffff65; }
.movie-card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.poster {
  border-color: #ffffff75;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #ffffff55,0 16px 42px #03040eb8;
}
.card-info { padding: 14px 2px 0; }
.poster::before { background: linear-gradient(0deg,#090c1af2,#0b102076 52%,transparent 83%); }
.movie-card:hover .poster, .movie-card:focus-within .poster { border-color: #fff3e0; box-shadow: 0 25px 60px #03040ee6,0 0 25px #ffe5ce51; }
.poster-play { border-color: #fffb; background: #ffffff3d; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #fff9; }
.poster-status, .poster-watch-label { border-color: #ffffff73; background: #263049b8; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card-name { color: #fff8f5; }
.card-meta { color: #d7cbd6; }
.download-details { border-color: #ffffff49; background: #ffffff17; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.recommendation-card {
  border-color: #ffffff62;
  background: linear-gradient(135deg,#ffffff34,#ffffff12 65%);
  box-shadow: inset 0 1px 0 #ffffff66,0 18px 45px #03040d8c;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.recommendation-card:hover { border-color: #fff0de; box-shadow: inset 0 1px 0 #fff9,0 27px 60px #03040cb8; }
.recommendation-body p, .recommendation-body small { color: #e8dfe6; }
.recommendation-meta { color: #ffe1ca; }
.recommendation-art::after { background: linear-gradient(90deg,transparent 65%,#2a263d72); }
.discovery-section {
  width: min(calc(100% - 48px), 1552px);
  border-color: #ffffff67;
  border-radius: 29px;
  background: linear-gradient(110deg,#10192ac9,#51344f6e),var(--ambient-poster) center 65% / cover;
  box-shadow: inset 0 1px 0 #fff7,0 26px 76px #03041197;
}
.discovery-section::before { background: linear-gradient(90deg,#0a1020a6,transparent); }
.discovery-content p { color: #f3e9ed; }
.tracker-result { border-color: #ffffff50; background: #ffffff1b; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
footer { color: #ebdfe8; border-top-color: #ffffff3f; background: #090d1c70; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

.modal, .series-modal, .player-shell {
  border: 1px solid #ffffff73;
  background: linear-gradient(145deg,#333348ed,#1a1e32f2 76%);
  box-shadow: inset 0 1px 0 #fff6,0 30px 100px #000c;
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
}
.details-modal {
  width: min(980px, calc(100vw - 28px));
  max-height: min(88vh, 700px);
  overflow: hidden;
  border: 1px solid #ffffff80;
  border-radius: 28px;
  background: linear-gradient(135deg,#49435bdd,#161d32ee);
  box-shadow: inset 0 1px 0 #fff8,0 40px 130px #01020de6;
  backdrop-filter: blur(32px) saturate(1.35);
  -webkit-backdrop-filter: blur(32px) saturate(1.35);
}
.details-modal[open] { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); animation: details-in .35s cubic-bezier(.16,1,.3,1) both; }
.details-art { position: relative; min-height: 530px; background: var(--ambient-poster) center / cover; }
.details-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 35%,#1a1b34a3),linear-gradient(0deg,#11182d90,transparent 65%); pointer-events: none; }
.details-art img { width: 100%; height: 100%; object-fit: cover; }
.details-content { position: relative; min-width: 0; max-height: min(88vh, 700px); overflow-y: auto; padding: clamp(32px, 4vw, 62px); }
.details-close { top: 20px; right: 22px; width: 38px; height: 38px; z-index: 2; }
.details-content h2 { margin: 16px 0 7px; color: #fff9f4; font-size: clamp(32px, 4vw, 58px); letter-spacing: -.06em; line-height: 1.03; overflow-wrap: anywhere; }
.details-meta { color: #f5d4c9; font-size: 12px; font-weight: 750; letter-spacing: .05em; }
.details-rule { width: 46px; height: 2px; margin: 28px 0; background: #ffcfbb; box-shadow: 0 0 16px #ffc0a9; }
.details-content h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.025em; }
.details-synopsis { max-width: 520px; min-height: 72px; margin: 0; color: #f0e5e8; font-size: 15px; line-height: 1.68; }
.details-credit { margin-top: 12px; color: #cfc6d2; font-size: 11px; }
.details-credit a { color: #ffe0ce; text-decoration: underline; text-underline-offset: 3px; }
.details-status { margin: 28px 0 16px; color: #e4d5e2; font-size: 12px; }
.details-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes details-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 1150px) {
  .topbar-inner { gap: 18px; padding-inline: 18px; }
  .main-nav { gap: 13px; }
  .nav-link { font-size: 11px; }
}
@media (max-width: 850px) {
  .topbar { top: 8px; }
  .topbar-inner { max-width: calc(100% - 20px); padding-top: 10px; }
  .main-nav { height: 42px; }
  .nav-link.active::after { bottom: 1px; }
  .hero-content { max-width: 76%; margin-left: 25px; padding: 35px; }
  .library-section, .recommendations-section { width: calc(100% - 28px); padding: 30px; }
  .library-section { padding: 18px 10px 40px; }
}
@media (max-width: 600px) {
  body::after { background-position: 62% center; }
  .topbar-inner { border-radius: 19px; padding: 10px 13px 0; }
  .hero { width: calc(100% - 20px); min-height: 700px; margin-top: 19px; padding-top: 245px; border-radius: 24px; align-items: end; }
  .hero::before { background: linear-gradient(0deg,#0b0d1dea 0%,#0c1020b8 55%,#0c10204a 100%); }
  .hero.has-poster .hero-image-wrap { inset: 25px 20px auto; width: calc(100% - 40px); aspect-ratio: 16 / 9; border-radius: 16px; }
  .hero-content { max-width: none; width: calc(100% - 26px); margin: 0 13px 48px; padding: 27px 22px; border-radius: 21px; }
  .hero h1 { font-size: clamp(43px, 11vw, 60px); }
  .hero-corner { right: 18px; bottom: 13px; font-size: 8px; }
  .overview-strip { width: calc(100% - 28px); padding: 0 16px; }
  .library-section, .recommendations-section { width: calc(100% - 20px); padding: 27px 17px; margin: 25px auto 35px; border-radius: 23px; }
  .library-section { padding: 18px 5px 35px; }
  .discovery-section { width: calc(100% - 20px); border-radius: 23px; }
  .details-modal { max-height: 90vh; border-radius: 22px; }
  .details-modal[open] { display: block; overflow-y: auto; }
  .details-art { min-height: 160px; height: 160px; }
  .details-art::after { background: linear-gradient(0deg,#1a1d34 0%,transparent 70%); }
  .details-content { max-height: none; overflow: visible; padding: 23px 23px 27px; }
  .details-close { position: fixed; top: 16px; right: 16px; }
  .details-content h2 { font-size: clamp(32px, 9vw, 46px); }
  .details-rule { margin: 21px 0; }
  .details-synopsis { font-size: 14px; line-height: 1.55; }
  .details-status { margin: 18px 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .hero.has-poster .hero-image-wrap { animation: none; }
  .site-intro { display: none; }
  .details-modal[open] { animation: none; }
}