:root {
  --nf-black: #0b0c10;
  --nf-card: #171a22;
  --nf-red: #e50914;
  --nf-text: #e5e5e5;
  --nf-accent: #b15cff;
}

body {
  background: radial-gradient(circle at top right, #1d2130 0%, #090a0f 50%);
  color: var(--nf-text);
  font-family: Arial, Helvetica, sans-serif;
  transition: opacity .25s ease, transform .25s ease;
}

body.page-leave { opacity: .25; transform: translateY(6px); }
.page-stage { animation: pageEnter .45s ease; min-height: 78vh; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(12px);} to {opacity:1; transform: translateY(0);} }

.netflix-navbar {
  background: rgba(9, 10, 15, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.brand-mark,
.auth-logo-icon {
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(229, 9, 20, .35);
}

.netflix-link {
  color: #fff;
  font-weight: 600;
  padding: .45rem .9rem !important;
  border-radius: 999px;
  transition: all .2s ease;
}

.netflix-link.active,
.netflix-link:hover {
  color: #fff;
  background: linear-gradient(120deg, var(--nf-red), var(--nf-accent));
  box-shadow: 0 8px 18px rgba(229, 9, 20, .35);
}

.netflix-btn {
  background: linear-gradient(120deg, var(--nf-red), #f42f5e);
  color: #fff;
  border: none;
  font-weight: 700;
}

.netflix-btn:hover { color: #fff; transform: translateY(-1px); }
.netflix-btn.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.5); }

.auth-screen {
  min-height: 100vh;
  background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.82)), url('/static/images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
}

.auth-overlay { position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(181,92,255,.18), transparent 55%); }
.auth-content { text-align: center; z-index: 1; }
.auth-logo {
  color: var(--nf-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-size: 4rem;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(229,9,20,.4);
}
.auth-tagline { font-size: 1.1rem; margin-bottom: 1.7rem; }
.auth-actions { display: flex; justify-content: center; gap: 1rem; }
.auth-enter { animation: authEnter .6s ease; }
.auth-leave { animation: authLeave .3s ease forwards; }
@keyframes authEnter { from { opacity: 0; transform: scale(.94) translateY(10px);} to {opacity:1; transform: scale(1) translateY(0);} }
@keyframes authLeave { to { opacity:0; transform: translateY(-10px) scale(.96);} }

.auth-form-wrap { display: flex; justify-content: center; }
.auth-form-card {
  width: min(430px, 92vw);
  text-align: left;
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 2rem;
}
.auth-form-title { text-align: center; margin-bottom: 1.2rem; }

.netflix-input { background: rgba(20,20,20,.85); border: 1px solid #555; color: #fff; }
.netflix-input:focus { border-color: var(--nf-red); box-shadow: 0 0 0 .2rem rgba(229,9,20,.22); background: rgba(20,20,20,.95); color: #fff; }

.netflix-hero {
  padding: 7.5rem 0 5.5rem;
  min-height: 72vh;
  background-image: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.4)), url('https://images.unsplash.com/photo-1440404653325-ab127d49abc1?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
}
.dashboard-hero .hero-content-wrap {
  max-width: 1000px;
}
.hero-intro-block {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-intro-block h1 {
  margin-top: 2rem;
}
.hero-intro-block .netflix-btn {
  width: fit-content;
}
.hero-stats {
  margin-top: 3.5rem !important;
}
.hero-stats .nf-stat {
  background: rgba(26,31,45,.82);
  backdrop-filter: blur(8px);
}
.stat-float {
  animation: statFloat 3s ease-in-out infinite;
}
.stat-delay-1 { animation-delay: .35s; }
.stat-delay-2 { animation-delay: .7s; }

.row-title { font-weight: 800; margin-bottom: 1rem; letter-spacing: .3px; }
.nf-stat { background: #202534; border-left: 4px solid var(--nf-red); border-radius: 10px; padding: 1rem; }
.nf-stat span { display: block; color: #adb5bd; }
.nf-stat strong { font-size: 1.4rem; }

.movie-row, .movie-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.movie-card { background: var(--nf-card); border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.movie-card:hover { transform: translateY(-2px); box-shadow: 0 12px 18px rgba(0,0,0,.35); }
.movie-poster { width: 100%; height: 300px; object-fit: cover; background: #111; }
.movie-info { padding: .8rem; }
.movie-info p { color: #b9b9b9; }


.netflix-modal { background: #131722; color: #fff; border: 1px solid rgba(255,255,255,.12); }
.score-chip { color: #fff; background: #2f3443; display: inline-block; padding: .2rem .5rem; border-radius: 999px; }



.netflix-modal { background: #131722; color: #fff; border: 1px solid rgba(255,255,255,.12); }
.score-chip { color: #fff; background: #2f3443; display: inline-block; padding: .2rem .5rem; border-radius: 999px; }


.trailer-wrap h6 { text-align: center; margin-bottom: .7rem; color: #eecfff; }
.trailer-frame { overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 20px rgba(0,0,0,.35); }

.rating-stars { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.rating-stars input { display: none; }
.rating-stars label { font-size: 1.4rem; color: #666; cursor: pointer; margin: 0; }
.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label { color: #ffd54a; }
.star-action-row { display: flex; justify-content: space-between; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.star-form { margin-bottom: 0; }

.profile-card {
  background: rgba(20,20,20,.8);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 1.25rem;
}

.site-footer {
  border-top: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(to bottom, rgba(14,16,24,.65), rgba(6,7,12,.95));
}
.footer-title { font-weight: 800; text-align: center; margin-bottom: .8rem; }
.footer-text { color: #c7c7c7; }
.footer-list { list-style: none; padding: 0; margin: 0; text-align: center; }
.footer-list li { margin-bottom: .45rem; color: #c7c7c7; }
.footer-list a { color: #fff; text-decoration: none; }
.footer-list a:hover { color: #ff6a8f; }

.social-icon-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(130deg, #252525, #1a1a1a);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
  transition: all .2s ease;
}
.social-pill:hover { transform: translateY(-3px); border-color: var(--nf-red); box-shadow: 0 8px 16px rgba(229,9,20,.25); color: #fff; }

@media (min-width: 768px) {
  .footer-title, .footer-list { text-align: left; }
}

@media (max-width: 576px) {
  .auth-logo { font-size: 2.7rem; }
  .auth-logo-icon { width: 44px; height: 44px; }
  .star-action-row { justify-content: center; }

}


.flash-toast-wrap {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  width: min(420px, calc(100vw - 2rem));
}
.flash-toast {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  animation: flashIn .35s ease;
}
.flash-toast.alert-success {
  background: linear-gradient(120deg, rgba(25,135,84,.9), rgba(34,197,94,.35));
  color: #ebfff4;
}
.flash-toast.alert-danger {
  background: linear-gradient(120deg, rgba(220,53,69,.9), rgba(229,9,20,.3));
  color: #fff1f3;
}
.flash-toast-hide {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease;
}
@keyframes flashIn { from {opacity: 0; transform: translateY(-6px);} to {opacity:1; transform: translateY(0);} }

.movie-info {
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.movie-actions {
  margin-top: auto;
  padding-top: .4rem;
}

.movie-meta {
  min-height: 88px;
}
.movie-meta h5 {
  margin-bottom: .35rem;
}


.profile-card-cool {
  max-width: 860px;
  background: linear-gradient(145deg, rgba(24,28,40,.92), rgba(14,17,26,.95));
  border: 1px solid rgba(177,92,255,.25);
  box-shadow: 0 18px 35px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;

}


.popcorn-nav {
  display: inline-block;
  margin-left: .35rem;
  animation: popcornWiggle 2.2s ease-in-out infinite;
}

.auth-logo {
  animation: beamPulse 2.4s ease-in-out infinite;
}

.popcorn-pop {
  display: inline-block;
  margin-left: .4rem;
  animation: popcornFloat 1.8s ease-in-out infinite;
}

.auth-tagline-swoop {
  animation: taglineSlideIn .7s ease both;
}

.auth-actions-merge {
  animation: actionCenterIn .7s ease .15s both;
}

.auth-btn-left {
  animation: btnFromLeft .75s ease .2s both;
}

.auth-btn-right {
  animation: btnFromRight .75s ease .2s both;
}

.auth-form-card-enter {
  animation: formRiseIn .75s ease both;
}

.optional-note {
  color: #c7ccd7 !important;
}

.profile-card .netflix-input::placeholder {
  color: #b8bec9;
  opacity: 1;
}

@keyframes beamPulse {
  0%, 100% { text-shadow: 0 0 12px rgba(229,9,20,.45), 0 0 24px rgba(177,92,255,.2); }
  50% { text-shadow: 0 0 18px rgba(255,94,133,.75), 0 0 34px rgba(177,92,255,.5); }
}
@keyframes popcornFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-7deg); }
}
@keyframes popcornWiggle {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(7deg); }
}
@keyframes taglineSlideIn {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes actionCenterIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes btnFromLeft {
  from { opacity: 0; transform: translateX(-42px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes btnFromRight {
  from { opacity: 0; transform: translateX(42px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes formRiseIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* UX polish updates */
.netflix-hero {
  min-height: 84vh;
  padding: 8.5rem 0 6.5rem;
}
.hero-intro-block {
  min-height: 70vh;
}
.hero-stats .nf-stat {
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 4px solid var(--nf-red);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.stat-float {
  animation: statFloat 3.4s ease-in-out infinite;
}
@keyframes statFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.movie-card-rate .movie-info {
  min-height: 0;
}
.movie-card-rate .movie-actions {
  margin-top: .25rem;
}
.movie-card-rate .star-form {
  margin-top: .4rem;
}
.movie-card-rate .star-action-row {
  gap: .2rem;
}

.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease;
}
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.auth-switch-copy {
  margin-top: 1rem;
  text-align: center;
  color: #cfd3df;
  font-size: .95rem;
}

.auth-card-switch {
  color: #ff6a8f;
  font-weight: 700;
  text-decoration: none;
  padding: 0 .2rem;
}

.auth-card-switch:hover {
  color: #fff;
  text-decoration: underline;
}

.movie-description {
  text-align: left;
  line-height: 1.6;
  color: inherit;
  margin-bottom: 1rem;
}
.netflix-modal .modal-body p strong {
  color: #ff4a58;
  font-weight: 800;
}

/* refinement updates */
.netflix-hero {
  padding: 4.5rem 0 2.75rem;
  min-height: 56vh;
}
.hero-intro-block {
  min-height: 44vh;
}
.hero-intro-block h1 {
  margin-top: .4rem;
}
.hero-stats {
  margin-top: 1.6rem !important;
}

.movie-filter-form {
  width: min(980px, 100%);
  margin: 0 auto 1.2rem;
  padding: .9rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(17,20,32,.72);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.filter-field {
  flex: 1 1 220px;
  min-width: 180px;
}
.filter-small {
  flex: 0 1 130px;
  min-width: 110px;
}
.movie-filter-form .netflix-input::placeholder {
  color: #c8ceda;
  opacity: 1;
}

.movie-grid,
.movie-row {
  align-items: stretch;
}
.movie-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.movie-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.movie-meta {
  min-height: 96px;
}
.star-form {
  margin-top: auto;
}
.star-action-row {
  margin-top: .55rem;
}

.cool-modal-title {
  width: 100%;
  text-align: center;
  font-weight: 900;
  letter-spacing: .55px;
  color: #ff5169;
  text-shadow: 0 0 10px rgba(229,9,20,.45), 0 0 20px rgba(229,9,20,.28);
}

@media (max-width: 768px) {
  .movie-filter-form {
    padding: .75rem;
  }
}

/* latest UI refinements */
.netflix-hero {
  min-height: 48vh;
  padding: 3.1rem 0 1.45rem;
}
.hero-intro-block {
  min-height: 35vh;
}
.hero-stats {
  margin-top: 1rem !important;
}

/* placeholder tones */
.netflix-input::placeholder {
  color: #bcc3cf;
  opacity: 1;
}
.movie-filter-form .netflix-input::placeholder {
  color: #6c7484;
}

.auth-form-card .netflix-input::placeholder {
  color: #5a5a5a;
  opacity: 1;
}

/* modal metadata row consistency */
.netflix-modal .modal-body p {
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: .55rem;
  text-align: left;
}
.movie-description {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  line-height: 1.55;
  margin-bottom: .65rem;
}
.cool-modal-title {
  color: #ff4f65;
  text-shadow: 0 0 12px rgba(229,9,20,.5), 0 0 24px rgba(229,9,20,.35);
}

/* remove stray spacing under card actions/buttons */
.movie-card .movie-actions,
.movie-card .star-form {
  margin-bottom: 0;
}
.movie-card .star-action-row,
.movie-card .movie-actions .btn,
.movie-card .star-action-row .btn {
  margin-bottom: 0;
}

/* refinement updates */
.netflix-hero {
  padding: 4.5rem 0 2.75rem;
  min-height: 56vh;
}
.hero-intro-block {
  min-height: 44vh;
}
.hero-intro-block h1 {
  margin-top: .4rem;
}
.hero-stats {
  margin-top: 1.6rem !important;
}

.movie-filter-form {
  width: min(980px, 100%);
  margin: 0 auto 1.2rem;
  padding: .9rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(17,20,32,.72);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.filter-field {
  flex: 1 1 220px;
  min-width: 180px;
}
.filter-small {
  flex: 0 1 130px;
  min-width: 110px;
}

.movie-grid,
.movie-row {
  align-items: stretch;
}
.movie-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.movie-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.movie-meta {
  min-height: 96px;
}
.star-form {
  margin-top: auto;
}
.star-action-row {
  margin-top: .55rem;
}

.cool-modal-title {
  width: 100%;
  text-align: center;
  font-weight: 800;
  letter-spacing: .45px;
}
.cool-description {
  text-align: center;
  font-family: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  line-height: 1.65;
  font-size: 1.08rem;
  color: #eff3ff;
}

@media (max-width: 768px) {
  .movie-filter-form {
    padding: .75rem;
  }
}

/* rate page card alignment fix */
.movie-card-rate .movie-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: .45rem;
}
.movie-card-rate .movie-meta {
  flex: 1;
  min-height: 110px;
}
.movie-card-rate .movie-actions {
  margin-top: auto;
  padding-top: .3rem;
}
.movie-card-rate .star-form {
  margin-top: .35rem;
  margin-bottom: 0;
}
.movie-card-rate .star-action-row {
  margin-top: 0;
  align-items: center;
}
.movie-card-rate .rating-stars,
.movie-card-rate .rating-stars label,
.movie-card-rate .star-action-row .btn {
  margin-bottom: 0;
  line-height: 1;
}

.hero-action-buttons {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

.reset-ratings-form {
  margin: 0;
}

.stream-label {
  color: var(--nf-red);
}

.stream-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: .35rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: var(--nf-red);
  box-shadow: 0 0 14px rgba(229, 9, 20, .72);
}

.stream-play-btn:hover {
  color: #fff;
  transform: translateY(-1px);
}

/* mobile-specific layout and nav controls */
@media (max-width: 576px) {
  .movie-grid,
  .movie-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .movie-poster {
    height: 220px;
  }

  .movie-actions {
    display: flex;
    justify-content: center;
  }

  .movie-actions .btn,
  .star-action-row .btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .star-action-row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .45rem;
  }

  .navbar-toggler {
    border-color: rgba(229, 9, 20, .7);
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(229, 9, 20, .28);
  }

  .navbar-toggler-icon {
    background-image: linear-gradient(var(--nf-red), var(--nf-red)), linear-gradient(var(--nf-red), var(--nf-red)), linear-gradient(var(--nf-red), var(--nf-red));
    background-position: center 2px, center 8px, center 14px;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    width: 1.5rem;
    height: 1.5rem;
  }
}