:root { --bg:#0b0d12; --fg:#e9eef7; --muted:#9aa7bf; --card:#121826; --line:#23304a; --accent:#6ea8ff; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--fg); }
.top { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(11,13,18,.9); backdrop-filter: blur(8px); }
.nav-group { display:flex; gap:16px; align-items:center; flex:1; justify-content:center; }
.brand { font-weight:700; }
.nav { display:flex; gap:8px; }
.tab { background:transparent; color:var(--fg); border:1px solid var(--line); padding:8px 10px; border-radius:10px; cursor:pointer; }
.tab.active { border-color: var(--accent); }
.api { color: var(--muted); font-size: 12px; }
.api code { color: var(--fg); }


.container { max-width: 1800px; margin: 20px auto; padding: 0 16px 40px; display:flex; flex-direction:column; gap:16px; }
.card { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.hidden { display:none; }

label { display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
input, select, textarea { width:100%; border:1px solid var(--line); background:#0f1422; color:var(--fg); padding:10px; border-radius:12px; }
textarea { resize: vertical; }

.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display:grid; grid-template-columns: 140px 1fr 1fr; gap: 12px; }
.span2 { grid-column: span 2; }

.actions { display:flex; gap:10px; margin-top: 10px; }
.actions.align-end { align-items:end; justify-content:flex-end; }
button { border:1px solid var(--line); background: var(--accent); color:#07101f; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:600; }
button.secondary { background: transparent; color: var(--fg); }
button:disabled,
button.is-complete {
  background: #4c5569;
  border-color: #616d85;
  color: #d7deec;
  cursor: not-allowed;
  opacity: 0.9;
}
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.out { margin-top: 12px; background:#0f1422; border:1px solid var(--line); border-radius:12px; padding:12px; overflow:auto; max-height:500px; }

.gallery { display:flex; gap:12px; overflow-x:auto; padding:40px 0; scrollbar-width:none; overflow-y: visible; }
.gallery::-webkit-scrollbar { display:none; }
.gallery img { width:220px; border-radius:10px; cursor:pointer; transition:transform .2s; flex-shrink:0; }
.gallery img:hover { transform:scale(1.2); }

.btn-sm { padding:6px 10px; font-size:12px; }
.login-card { max-width:440px; margin:80px auto 0; }
.user { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
.user code { color:var(--fg); }

.results { width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; }
.results thead th { text-align:left; padding:10px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:1px solid var(--line); }
.results tbody tr { border-bottom:1px solid var(--line); transition:background .15s; }
.results tbody tr:last-child { border-bottom:none; }
.results tbody tr:hover { background:rgba(110,168,255,.06); }
.results td { padding:10px 14px; color:var(--fg); vertical-align:middle; }
.results td.muted { color:var(--muted); font-size:12px; }

/* Film Detail Overlay */
.movie-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.movie-overlay.hidden { display:none; }
.movie-overlay-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); cursor:pointer; }
.movie-overlay-content { position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; max-width:860px; width:calc(100% - 32px); max-height:90vh; overflow-y:auto; padding:24px; z-index:1; }
.movie-overlay-close { position:absolute; top:12px; right:12px; padding:6px 10px; font-size:14px; }
.movie-overlay-body { display:flex; gap:24px; }
.movie-overlay-poster {
  width: min(32vw, 260px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  align-self: flex-start;
}
.movie-overlay-info { flex:1; display:flex; flex-direction:column; gap:12px; }
.movie-overlay-info h2 { margin:0; }
.movie-overlay-providers { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
@media (max-width:600px) {
  .movie-overlay-body { flex-direction:column; }
  .movie-overlay-poster {
    width: min(100%, 260px);
    max-height: none;
    margin: 0 auto;
  }
}

/* Hamburger Drawer */
.hamburger { font-size:18px; line-height:1; }
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; }
.drawer { position:fixed; top:0; right:0; height:100%; width:220px; background:var(--card); border-left:1px solid var(--line); z-index:101; padding:16px; display:flex; flex-direction:column; gap:16px; transform:translateX(110%); transition:transform .25s ease; }
.drawer.open { transform:translateX(0); }
.drawer-header { display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.drawer-nav { display:flex; flex-direction:column; gap:8px; }
.drawer-nav .tab { width:100%; text-align:left; }