:root{
  --ink:#121212;
  --paper:#1B1B1F;
  --paper-alt:#232327;
  --text:#F2F1EC;
  --text-soft:#A8A6A0;
  --gold:#D4A017;
  --gold-dim:#A87C10;
  --red:#C81D25;
  --line: rgba(242,241,236,0.1);
  --disp:'Bebas Neue', sans-serif;
  --body:'Inter', sans-serif;
  --maxw:1180px;
  --radius:8px;
}

*{margin:0; padding:0; box-sizing:border-box;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; border:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Header */
.site-header{ padding:34px 0 24px; border-bottom:1px solid var(--line); }
.header-inner{ text-align:center; }
.logo{
  font-family:var(--disp); font-size:40px; letter-spacing:0.04em; text-decoration:none; color:var(--text);
}
.logo span{ color:var(--gold); }
.tagline{ color:var(--text-soft); font-size:14.5px; margin-top:6px; }

main{ padding:40px 0 60px; min-height:60vh; }

/* Search bar */
.search-bar{
  display:flex; gap:12px; max-width:560px; margin:0 auto 36px;
}
.search-bar input{
  flex:1; padding:13px 16px; border-radius:var(--radius); border:1.5px solid var(--line);
  background:var(--paper); color:var(--text); font-size:15px;
}
.search-bar input:focus{ outline:none; border-color:var(--gold); }
.search-bar input::placeholder{ color:var(--text-soft); }
.btn-search{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius);
  background:var(--gold); color:#1a1400; font-weight:700; font-size:15px; transition:background .15s ease;
  white-space:nowrap;
}
.btn-search:hover{ background:#e6b52c; }
.btn-search:disabled{ opacity:.6; cursor:not-allowed; }

/* States */
#state-area{ text-align:center; margin-bottom:20px; min-height:24px; }
.hint-state{ color:var(--text-soft); font-size:15px; }
.error-state{
  color:#FFD1D1; background:rgba(200,29,37,0.14); border:1px solid rgba(200,29,37,0.35);
  display:inline-block; padding:12px 20px; border-radius:var(--radius); font-size:14.5px; max-width:480px;
}
.loading-state{
  display:inline-flex; align-items:center; gap:10px; color:var(--text-soft); font-size:14.5px;
}
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--gold);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Results grid */
.results-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:22px;
}
.movie-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; transition:transform .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
}
.movie-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.movie-poster{
  width:100%; aspect-ratio:2/3; object-fit:cover; background:var(--paper-alt);
}
.movie-poster.placeholder{
  display:flex; align-items:center; justify-content:center; color:var(--text-soft); font-size:13px; text-align:center; padding:10px;
}
.movie-info{ padding:12px 14px 16px; }
.movie-title{ font-size:15px; font-weight:600; margin-bottom:4px; line-height:1.3; }
.movie-year{ color:var(--text-soft); font-size:13px; }

/* Skeleton loading cards */
.skeleton-card{
  background:var(--paper); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
}
.skeleton-poster{ width:100%; aspect-ratio:2/3; background:linear-gradient(90deg, var(--paper) 25%, var(--paper-alt) 50%, var(--paper) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
.skeleton-line{ height:12px; margin:12px 14px 0; border-radius:4px; background:var(--paper-alt); }
.skeleton-line.short{ width:60%; margin-bottom:14px; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* Modal */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200;
  align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop.open{ display:flex; }
.modal-card{
  background:var(--paper); border-radius:12px; max-width:760px; width:100%; max-height:88vh; overflow-y:auto;
  position:relative; border:1px solid var(--line);
}
.modal-close{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,0.5); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background:var(--red); }
.modal-grid{ display:grid; grid-template-columns:220px 1fr; gap:0; }
.modal-poster{ width:100%; height:100%; object-fit:cover; border-radius:12px 0 0 12px; }
.modal-poster.placeholder{ display:flex; align-items:center; justify-content:center; background:var(--paper-alt); color:var(--text-soft); border-radius:12px 0 0 12px; }
.modal-details{ padding:28px 26px; }
.modal-details h2{ font-family:var(--disp); font-size:30px; letter-spacing:0.02em; margin-bottom:4px; }
.modal-meta{ display:flex; flex-wrap:wrap; gap:10px 16px; color:var(--text-soft); font-size:13.5px; margin-bottom:16px; }
.rating-badge{
  display:inline-flex; align-items:center; gap:6px; background:rgba(212,160,23,0.14); color:var(--gold);
  padding:5px 12px; border-radius:20px; font-weight:700; font-size:13.5px; margin-bottom:16px;
}
.modal-plot{ font-size:14.5px; color:var(--text); margin-bottom:16px; line-height:1.65; }
.modal-extra{ font-size:13.5px; color:var(--text-soft); }
.modal-extra p{ margin-bottom:6px; }
.modal-extra b{ color:var(--text); }

footer{ border-top:1px solid var(--line); padding:22px 0; text-align:center; }
footer span{ color:var(--text-soft); font-size:13px; }
footer a{ color:var(--gold); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

@media (max-width: 640px){
  .search-bar{ flex-direction:column; }
  .btn-search{ justify-content:center; }
  .results-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:14px; }
  .modal-grid{ grid-template-columns:1fr; }
  .modal-poster, .modal-poster.placeholder{ border-radius:12px 12px 0 0; max-height:280px; }
  .modal-details{ padding:22px 20px; }
}