:root{
  --bg:#0f1115;
  --card:#171922;
  --text:#e8eaf0;
  --muted:#a8adc2;
  --accent:#5e8bff;
  --accent-2:#43d9a3;
  --danger:#ff5e7a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0d12, var(--bg));
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.header{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  position:sticky; top:0; z-index:10;
  background:rgba(15,17,21,0.85);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid #232635;
}
.brand{display:flex; align-items:center; gap:.6rem}
.logo{font-size:1.4rem}
.brand h1{margin:0; font-size:1.2rem; letter-spacing:.3px}
.controls{
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.controls input, .controls select{
  background:var(--card);
  color:var(--text);
  border:1px solid #2a2e3f;
  padding:.6rem .7rem;
  border-radius:.6rem;
  outline:none;
}
.controls input::placeholder{color:var(--muted)}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:1rem;
  padding:1.25rem;
}
.card{
  background:var(--card);
  border:1px solid #232635;
  border-radius:.9rem;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35)}
.poster{
  width:100%; aspect-ratio:2/3; object-fit:cover; background:#10131a;
}
.card-body{padding:.8rem}
.title{
  margin:.1rem 0 .2rem 0;
  font-size:.98rem; font-weight:600; line-height:1.3;
}
.meta{
  color:var(--muted); font-size:.86rem; margin:.2rem 0 .4rem 0;
}
.tags{display:flex; flex-wrap:wrap; gap:.3rem}
.tag{
  font-size:.72rem; color:#cbd1e6;
  background:#1f2332; border:1px solid #2e3346;
  padding:.16rem .44rem; border-radius:.5rem;
}

/* Empty */
.empty{
  text-align:center; color:var(--muted);
  padding:2rem 1.25rem;
}

/* Footer */
.footer{
  padding:1rem 1.25rem; color:var(--muted);
  border-top:1px solid #232635;
}

/* Modal */
.modal{
  width:min(900px, 96vw);
  border:none; border-radius:1rem; padding:0;
  background:var(--card);
  color:var(--text);
}
.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-inner{padding:0; margin:0}
.close{
  position:absolute; right:.8rem; top:.8rem;
  border:none; background:#232635; color:#cbd1e6;
  border-radius:.6rem; padding:.4rem .6rem; cursor:pointer;
}
.modal-content{
  display:grid; grid-template-columns:220px 1fr; gap:1rem;
  padding:1.2rem;
}
.modal-content img{
  width:100%; border-radius:.8rem; aspect-ratio:2/3; object-fit:cover;
}
.modal-info h2{margin:.2rem 0 .3rem 0}
.modal-info p{margin:.3rem 0; color:#cfd5ea}
.modal-actions{display:flex; gap:.6rem; margin-top:.6rem}
.btn{
  background:var(--accent);
  border:none; color:white; padding:.6rem .9rem;
  border-radius:.6rem; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn.secondary{background:#2a2e3f}
.btn.small{padding:.4rem .6rem; font-size:.86rem}

/* Watchlist */
.watchlist{
  position:fixed; right:1rem; bottom:1rem;
  width:280px; max-height:60vh; overflow:auto;
  background:var(--card); border:1px solid #232635;
  border-radius:.9rem; padding:.8rem; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.watchlist-header{display:flex; align-items:center; justify-content:space-between}
.watchlist ul{list-style:none; margin:.6rem 0 0 0; padding:0}
.watchlist li{
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem 0; border-bottom:1px dashed #2a2e3f;
}
.watchlist img{width:36px; height:54px; border-radius:.3rem; object-fit:cover}
.watchlist .remove{margin-left:auto; background:var(--danger)}

/* Responsive */
@media (max-width:700px){
  .modal-content{grid-template-columns:1fr}
}

/* Responsive Enhancements */

/* Small devices (phones) */
@media (max-width: 480px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }

  .controls {
    width: 100%;
    flex-direction: column;
  }

  .controls input, .controls select {
    width: 100%;
  }

  .grid {
    grid-template-columns: 1fr; /* single column */
  }

  .card {
    border-radius: .6rem;
  }

  .watchlist {
    width: 100%;
    right: 0;
    bottom: 0;
    max-height: 40vh;
    border-radius: .6rem .6rem 0 0;
  }
}

/* Medium devices (tablets) */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .modal-content {
    grid-template-columns: 1fr; /* stack image and info */
  }

  .watchlist {
    width: 90%;
    right: .5rem;
    bottom: .5rem;
  }
}

/* Large devices (desktops) */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .modal-content {
    grid-template-columns: 220px 1fr;
  }
}