:root{
  --bg:#090909;
  --panel:#171717;
  --text:#ffffff;
  --muted:#b8b8b8;
  --red:#e50914;
}

html,body{
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  color-scheme:dark;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

vaadin-app-layout{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  background:#090909;
  color:#ffffff;
  --lumo-base-color:#090909;
  --lumo-body-text-color:#ffffff;
  --lumo-header-text-color:#ffffff;
  --lumo-secondary-text-color:#c7c7c7;
  --lumo-tertiary-text-color:#a9a9a9;
  --lumo-primary-color:#e50914;
  --lumo-primary-text-color:#ff4650;
  --vaadin-input-field-background:#181818;
}

.topbar{
  box-sizing:border-box;
  width:100%;
  min-width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4vw;
  margin:0;
  background:#080808!important;
}
.brand{color:#fff!important;text-decoration:none;font-weight:900;letter-spacing:.05em}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:#eeeeee!important;text-decoration:none}

.home,.browse,.detail,.admin-view{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
  background:#090909!important;
  color:#ffffff!important;
  min-height:100vh;
  --lumo-body-text-color:#ffffff;
  --lumo-header-text-color:#ffffff;
  --lumo-secondary-text-color:#c7c7c7;
  --lumo-tertiary-text-color:#a9a9a9;
  --vaadin-input-field-background:#181818;
}

.home h1,.home h2,.home h3,
.browse h1,.browse h2,.browse h3,
.detail h1,.detail h2,.detail h3,
.admin-view h1,.admin-view h2,.admin-view h3{
  color:#ffffff!important;
}

.hero{
  box-sizing:border-box;
  margin:0!important;
  position:relative;
  display:flex;
  align-items:flex-end;
  width:100%;
  min-height:min(68vh,680px);
  padding:72px 4vw 56px;
  background:#111;
  color:#fff!important;
  overflow:hidden;
}
.hero-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  z-index:0;
}
.hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.76) 37%,rgba(5,5,5,.22) 68%,rgba(5,5,5,.55) 100%),
    linear-gradient(0deg,#090909 0%,transparent 42%);
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:2;
  width:min(620px,92vw);
  padding-top:120px;
}
.hero-eyebrow{
  display:block;
  margin-bottom:10px;
  color:#f0f0f0!important;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-title{
  margin:0!important;
  color:#ffffff!important;
  font-size:clamp(2.5rem,7vw,6.5rem)!important;
  line-height:.96;
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.hero-meta{
  display:flex;
  gap:10px;
  margin-top:16px;
  color:#e7e7e7!important;
  font-weight:700;
}
.hero-meta span{
  color:#e7e7e7!important;
}
.hero-description{
  max-width:620px;
  margin:14px 0 18px;
  color:#f1f1f1!important;
  font-size:1rem;
  line-height:1.5;
  text-shadow:0 1px 8px rgba(0,0,0,.95);
}
.hero-play{
  min-width:140px;
  min-height:46px;
  background:#ffffff!important;
  color:#111111!important;
  font-weight:900!important;
  border-radius:6px!important;
}

.search{
  box-sizing:border-box;
  margin:18px 4vw 4px;
  width:min(720px,92vw);
  color:#ffffff!important;
  --lumo-body-text-color:#ffffff;
  --lumo-secondary-text-color:#d0d0d0;
  --vaadin-input-field-background:#181818;
  --vaadin-input-field-value-color:#ffffff;
  --vaadin-input-field-placeholder-color:#bdbdbd;
}
.search::part(input-field){
  background:#181818!important;
  border:1px solid #4b4b4b;
  color:#ffffff!important;
}
.search::part(input){
  color:#ffffff!important;
}
.search::part(input)::placeholder{
  color:#bdbdbd!important;
  opacity:1;
}

.home>div:not(.hero){
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  padding-left:4vw;
  padding-right:4vw;
}
.home h2{
  margin-top:18px;
  margin-bottom:4px;
  color:#ffffff!important;
  font-weight:800;
}

.movie-rail{
  box-sizing:border-box;
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px 0 24px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.movie-rail::-webkit-scrollbar{display:none}

.movie-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.movie-link{
  flex:0 0 180px;
  min-width:180px;
  max-width:180px;
  text-decoration:none!important;
  color:#ffffff!important;
  scroll-snap-align:start;
}
.movie-card{
  position:relative;
  aspect-ratio:2/3;
  background:#202020;
  border-radius:8px;
  overflow:hidden;
  transition:.18s;
}
.movie-card:hover{transform:scale(1.04)}
.movie-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.poster-placeholder{
  height:100%;
  display:grid;
  place-items:center;
  color:#ffffff!important;
  font-size:3rem;
}
.card-shade{
  position:absolute;
  inset:auto 0 0;
  padding:65px 10px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.96));
}
.card-shade h3{
  margin:0;
  color:#ffffff!important;
  font-size:.9rem;
  line-height:1.2;
  text-shadow:0 1px 4px #000;
}
.card-shade span{
  color:#d7d7d7!important;
  font-size:.74rem;
}

.player-wrap{
  width:100%;
  background:#000;
}
.player-status{
  box-sizing:border-box;
  min-height:24px;
  padding:8px 4vw;
  background:#111;
  color:#eeeeee!important;
  font-size:.9rem;
}
.detail-header{
  display:flex;
  gap:30px;
  align-items:flex-start;
  padding:24px 4vw;
}
.detail-header img{
  width:min(280px,35vw);
  border-radius:8px;
}
.detail p{
  color:#eeeeee!important;
  line-height:1.6;
  max-width:900px;
}

/* Authentication pages use a deliberately light, high-contrast surface. */
.auth-page{
  color-scheme:light;
  box-sizing:border-box;
  min-height:100vh;
  padding:24px!important;
  background:#f3f4f6!important;
  color:#111827!important;
  --lumo-base-color:#ffffff;
  --lumo-body-text-color:#111827;
  --lumo-header-text-color:#111827;
  --lumo-secondary-text-color:#374151;
  --lumo-tertiary-text-color:#4b5563;
  --lumo-primary-color:#e50914;
  --lumo-primary-text-color:#b20710;
  --lumo-contrast-5pct:#f9fafb;
  --lumo-contrast-10pct:#f3f4f6;
  --lumo-contrast-20pct:#d1d5db;
  --lumo-contrast-30pct:#9ca3af;
  --lumo-contrast-60pct:#4b5563;
  --vaadin-input-field-background:#ffffff;
}
.auth-card{
  box-sizing:border-box;
  width:min(440px,100%);
  padding:30px 26px;
  border:1px solid #d1d5db;
  border-radius:18px;
  background:#ffffff;
  color:#111827;
  box-shadow:0 18px 55px rgba(0,0,0,.16);
}
.auth-title{
  margin:0 0 8px!important;
  color:#111827!important;
  font-size:clamp(2rem,9vw,3rem);
  line-height:1.05;
}
.auth-subtitle{
  margin:0 0 18px;
  color:#4b5563!important;
  line-height:1.45;
}
.auth-card vaadin-text-field,
.auth-card vaadin-password-field{
  width:100%;
  color:#111827;
  --vaadin-input-field-background:#ffffff;
  --vaadin-input-field-label-color:#1f2937;
  --vaadin-input-field-value-color:#111827;
}
.auth-card vaadin-text-field::part(input-field),
.auth-card vaadin-password-field::part(input-field){
  min-height:50px;
  background:#ffffff;
  color:#111827;
  border:1px solid #9ca3af;
  border-radius:9px;
  box-shadow:none;
}
.auth-card vaadin-text-field::part(label),
.auth-card vaadin-password-field::part(label){
  color:#1f2937;
  font-weight:700;
}
.auth-card vaadin-button.auth-primary{
  width:100%;
  min-height:48px;
  margin-top:12px;
  background:#e50914;
  color:#ffffff;
  font-weight:800;
  border-radius:9px;
}
.auth-login-form{
  width:100%;
  color:#111827;
  --lumo-primary-color:#e50914;
  --lumo-primary-text-color:#b20710;
  --lumo-body-text-color:#111827;
  --lumo-secondary-text-color:#374151;
  --vaadin-input-field-background:#ffffff;
}
.auth-link{
  display:inline-block;
  margin-top:18px;
  color:#b20710!important;
  font-weight:800;
  text-decoration:none;
}
.auth-link:hover{text-decoration:underline}

.brand-logo{
  display:block;
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:10px;
}

@media(max-width:700px){
  .topbar{
    height:58px;
    padding:0 12px;
  }
  .nav-links{
    gap:10px;
    font-size:.82rem;
  }
  .brand-logo{
    width:38px;
    height:38px;
    border-radius:9px;
  }
  .hero{
    min-height:62vh;
    padding:56px 20px 32px;
  }
  .hero-backdrop{
    object-position:center 18%;
  }
  .hero-copy{
    width:100%;
    padding-top:150px;
  }
  .hero-title{
    font-size:clamp(2.25rem,11vw,4rem)!important;
  }
  .hero-description{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .search{
    margin:14px 16px 2px;
    width:calc(100% - 32px);
  }
  .home>div:not(.hero){
    padding-left:16px;
    padding-right:16px;
  }
  .movie-link{
    flex-basis:135px;
    min-width:135px;
    max-width:135px;
  }
  .movie-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .detail-header{
    flex-direction:column;
  }
  .detail-header img{
    width:min(260px,75vw);
  }
  .auth-page{
    padding:16px!important;
  }
  .auth-card{
    padding:24px 20px;
    border-radius:14px;
  }
}


/* AppLayout navbar: no white strip, no extra spacing before the hero. */
vaadin-app-layout::part(navbar){
  width:100%!important;
  padding:0!important;
  margin:0!important;
  background:#080808!important;
  border:0!important;
  box-shadow:none!important;
}
vaadin-app-layout::part(content){
  padding:0!important;
  margin:0!important;
  background:#090909!important;
}
vaadin-app-layout [slot="navbar"]{
  width:100%!important;
  max-width:none!important;
}
.home{
  padding:0!important;
  gap:0!important;
  margin:0!important;
}
.home>.hero:first-child{
  margin-top:0!important;
}

/* Full viewport movie playback. CSS fallback works even when native fullscreen is unavailable. */
.movie-player-page{
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-width:none!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  background:#000!important;
}
.player-wrap{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  padding:0!important;
  margin:0!important;
  background:#000!important;
  overflow:hidden!important;
}
.player-host{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#000;
}
.player-host video{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#000!important;
}
.player-back{
  position:fixed!important;
  z-index:2147483640!important;
  top:max(12px,env(safe-area-inset-top))!important;
  left:max(12px,env(safe-area-inset-left))!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  padding:0!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  font-size:1.6rem!important;
}
.player-status{
  position:absolute!important;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:10;
  width:auto;
  max-width:90vw;
  min-height:0;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  text-align:center;
  pointer-events:none;
}
.player-unavailable{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  margin:0!important;
  color:#fff!important;
  background:#000!important;
  text-align:center;
  padding:24px;
  box-sizing:border-box;
}

@media(max-width:700px){
  vaadin-app-layout::part(navbar){
    min-height:58px!important;
  }
  .topbar{
    width:100%;
    min-width:100%;
  }
  .hero{
    margin-top:0!important;
  }
}