:root{
  --bg: #05060f;

  /* accents */
  --p: rgba(168, 85, 247, 0.46);
  --b: rgba(56, 189, 248, 0.44);
  --pk: rgba(236, 72, 153, 0.32);

  /* glass + text */
  --border: rgba(255,255,255,0.20);
  --borderSoft: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.94);
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.56);

  /* spacing + radii */
  --r-lg: 24px;
  --r-md: 18px;

  /* depth */
  --shadow: 0 22px 60px rgba(0,0,0,0.62);
  --shadowSoft: 0 12px 34px rgba(0,0,0,0.46);

  --ease: cubic-bezier(.2,.9,.2,1);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* ===== Background (wallpaper + overlay) ===== */
body::before{
  content:"";
  position: fixed;
  inset:0;
  background: url("./images/bg.jpg") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.06);
  transform: scale(1.03);
  z-index:-3;
}
body::after{
  content:"";
  position: fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(168,85,247,0.26), transparent 60%),
    radial-gradient(800px 520px at 110% 10%, rgba(56,189,248,0.24), transparent 55%),
    radial-gradient(700px 560px at 50% 110%, rgba(236,72,153,0.16), transparent 60%),
    rgba(5,6,15,0.76);
  z-index:-2;
}

/* blobs (slow, subtle) */
.bg-blobs{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.blob{
  position:absolute;
  width: 420px; height: 420px;
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.50;
  animation: floaty 14s var(--ease) infinite;
}
.blob.purple{ background: radial-gradient(circle at 30% 30%, rgba(168,85,247,0.9), transparent 60%); left:-160px; top:60px; }
.blob.blue{ background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.9), transparent 60%); right:-180px; top:170px; animation-delay:-4s; }
.blob.pink{ background: radial-gradient(circle at 30% 30%, rgba(236,72,153,0.85), transparent 60%); left:30%; bottom:-240px; animation-delay:-7s; }
@keyframes floaty{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(18px,-14px) scale(1.05); }
  100%{ transform: translate(0,0) scale(1); }
}

/* noise */
.noise{
  position: fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.05;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 2px, transparent 6px);
  mix-blend-mode: overlay;
  animation: drift 7s linear infinite;
}
@keyframes drift{ from{ transform: translateY(0);} to{ transform: translateY(26px);} }

/* ===== Header ===== */
.top{
  padding: 16px 16px 12px;
  position: sticky;
  top:0;
  z-index: 20;

  background: linear-gradient(to bottom, rgba(10,12,30,0.82), rgba(10,12,30,0.34));
  border-bottom: 1px solid var(--borderSoft);
  backdrop-filter: blur(18px);
}

/* hero spotlight animation (subtle) */
.top::before{
  content:"";
  position:absolute;
  inset:-18px -18px -14px -18px;
  background:
    radial-gradient(520px 170px at 18% 20%, rgba(168,85,247,0.18), transparent 68%),
    radial-gradient(520px 170px at 82% 30%, rgba(56,189,248,0.15), transparent 68%);
  animation: heroShift 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroShift{
  0%{ transform: translateY(0); opacity: .75; }
  50%{ transform: translateY(6px); opacity: 1; }
  100%{ transform: translateY(0); opacity: .75; }
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 12px;
  position: relative;
}
.logo{
  width: 44px; height:44px;
  border-radius: 18px;
  flex: 0 0 44px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 0 26px rgba(168,85,247,.28), 0 0 30px rgba(56,189,248,.14), var(--shadowSoft);
  background: rgba(255,255,255,0.10);
}
.brandText{ display:flex; flex-direction:column; gap:2px; }
.title{ font-weight: 950; font-size: 19px; letter-spacing:.2px; }
.subtitle{ font-size: 12px; color: var(--muted); }
.version{ font-size: 11px; color: rgba(255,255,255,0.44); }

/* ===== animated border helper ===== */
@keyframes borderShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ===== Search ===== */
.searchWrap{ margin-bottom: 12px; }
.search{
  width:100%;
  padding: 14px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.10);
  outline: none;
  font-size: 14px;
  color: var(--text);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 1;
}
.search::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: calc(var(--r-md) + 2px);
  padding: 1px;

  background: linear-gradient(135deg, rgba(168,85,247,0.85), rgba(56,189,248,0.85), rgba(236,72,153,0.70));
  background-size: 240% 240%;
  animation: borderShift 7s ease-in-out infinite;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0.50;
  pointer-events:none;
  z-index:-1;
}
.search:focus::before{ opacity: .85; filter: drop-shadow(0 0 12px rgba(56,189,248,0.22)); }
.search::placeholder{ color: var(--muted2); }

/* ===== Chips ===== */
.chips{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar{ height: 0; }

.chip{
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor:pointer;
  user-select:none;
  border: 1px solid var(--borderSoft);
  backdrop-filter: blur(14px);
  transition: transform 160ms var(--ease), filter 160ms var(--ease);
}
.chip::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 999px;
  padding: 1px;

  background: linear-gradient(135deg, rgba(168,85,247,0.75), rgba(56,189,248,0.75), rgba(236,72,153,0.55));
  background-size: 240% 240%;
  animation: borderShift 10s ease-in-out infinite;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0.16;
  pointer-events:none;
}
.chip:active{ transform: scale(0.98); }

.chip.on{
  color:#fff;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 18px rgba(168,85,247,0.22);
}
.chip.on::before{ opacity: .65; }

/* ===== Content ===== */
.content{
  padding: 14px 16px 118px;
  position: relative;
  z-index: 1;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 460px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

/* ===== Card ===== */
.card{
  border-radius: var(--r-lg);
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  position: relative;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

/* hover shimmer (subtle) */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.12) 35%, transparent 55%);
  transform: translateX(-90%);
  opacity: 0;
  pointer-events:none;
}
.card:hover::before{
  opacity: 1;
  transform: translateX(90%);
  transition: transform 750ms var(--ease), opacity 750ms var(--ease);
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 30px 82px rgba(0,0,0,0.62);
  border-color: rgba(255,255,255,0.26);
}

.card:active{
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
}

/* locked overlay */
.card.locked{
  filter: saturate(0.92);
}
.lockOverlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding: 10px;
  pointer-events:none;
}
.lockPill{
  font-size: 11px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
}

.cardTop{
  padding: 14px;
  display:flex;
  gap: 14px;
}

/* posters */
.posterFrame{
  width: 58px; height: 78px;
  border-radius: 18px;
  overflow:hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 22px rgba(168,85,247,.18), 0 0 18px rgba(56,189,248,.10);
  position: relative;
}
.posterFrame::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(50px 50px at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events:none;
}
.posterImg{ width:100%; height:100%; object-fit: cover; display:block; }

.poster{
  width: 58px; height:78px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(236,72,153,0.85), rgba(168,85,247,0.85));
  display:flex; align-items:center; justify-content:center;
  font-size: 22px;
  box-shadow: 0 0 24px rgba(236,72,153,.18);
}

.cardMeta{ flex:1; min-width: 0; }
.nameRow{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.name{ font-weight: 950; font-size: 16px; line-height:1.15; margin:0; }
.desc{ margin-top:6px; font-size: 13px; color: var(--muted); line-height:1.35; }

/* season/episode line */
.previewLine{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

/* badges */
.badges{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.badge{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  font-weight: 900;
}
.badge-new{
  background: linear-gradient(135deg, rgba(34,197,94,0.50), rgba(16,185,129,0.42));
  border-color: rgba(34,197,94,0.40);
}
.badge-trending{
  background: linear-gradient(135deg, rgba(236,72,153,0.48), rgba(168,85,247,0.40));
  border-color: rgba(236,72,153,0.36);
}

/* actions */
.actions{
  display:flex;
  gap:10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

/* buttons */
.btn, .btnGhost{
  flex:1;
  padding: 13px;
  border-radius: 18px;
  cursor:pointer;
  font-size: 13px;
  font-weight: 950;
  transition: transform 160ms var(--ease), filter 160ms var(--ease), opacity 160ms var(--ease);
}

@keyframes glowPulse{
  0%{ box-shadow: 0 0 16px rgba(34,197,94,0.20); }
  50%{ box-shadow: 0 0 26px rgba(34,197,94,0.38); }
  100%{ box-shadow: 0 0 16px rgba(34,197,94,0.20); }
}

.btn{
  border:none;
  background: linear-gradient(135deg,#22c55e,#10b981);
  color:#fff;
  animation: glowPulse 3.2s ease-in-out infinite;
}
.btn:active{ transform: scale(0.985); filter: brightness(1.08); }

.btnGhost{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--text);
  backdrop-filter: blur(16px);
}
.btnGhost:active{ transform: scale(0.985); filter: brightness(1.08); }

.btn[disabled], .btnGhost[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
  animation: none;
}

.iconBtn{
  width: 46px;
  flex: 0 0 46px;
  border-radius: 16px;
  border:none;
  cursor:pointer;
  background: linear-gradient(135deg, rgba(168,85,247,0.85), rgba(56,189,248,0.85));
  color:#fff;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(168,85,247,.22);
}
.iconBtn:active{ transform: scale(0.97); filter: brightness(1.08); }

/* footer */
.footer{
  position: fixed;
  bottom:0; left:0; right:0;
  padding: 12px 16px 16px;
  display:flex;
  gap: 12px;
  background: linear-gradient(to top, rgba(10,12,30,0.88), rgba(10,12,30,0.44));
  border-top: 1px solid var(--borderSoft);
  backdrop-filter: blur(20px);
  z-index: 20;
}

/* empty */
.empty{ text-align:center; padding: 40px 16px; color: var(--muted); }
.emptyTitle{ font-weight: 950; font-size: 18px; margin-bottom:6px; }
.emptyText{ color: var(--muted); }

/* ===== Modal ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
}
.modalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.modalSheet{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.18);

  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  box-shadow: 0 40px 120px rgba(0,0,0,0.78);
  backdrop-filter: blur(22px);

  transform: translateY(14px);
  opacity: 0;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.modal.show .modalSheet{
  transform: translateY(0);
  opacity: 1;
}

.modalTop{
  display:flex;
  gap: 12px;
  padding: 14px;
  align-items: flex-start;
}
.modalPoster{
  width: 78px;
  height: 104px;
  border-radius: 22px;
  overflow:hidden;
  flex: 0 0 78px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 22px rgba(56,189,248,0.14);
}
.modalPoster img{ width:100%; height:100%; object-fit: cover; display:block; }

.modalHead{ flex:1; min-width:0; }
.modalTitle{ font-weight: 950; font-size: 18px; line-height:1.15; }
.modalMeta{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.68); }
.modalBadges{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }

.modalClose{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 16px;
  cursor:pointer;
}

.modalBody{ padding: 0 14px 14px; }
.modalIntro{
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.modalActions{
  display:flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.16);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}