:root {
  --site-bg:#070b12;
  --site-panel:#0f1621;
  --site-panel-2:#121b27;
  --site-border:rgba(255,255,255,.09);
  --site-text:#f4f7fb;
  --site-muted:#92a0b3;
  --site-accent:#68e4a2;
  --site-accent-strong:#45d993;

  /* Shared aliases used by the three original modules. */
  --bg:var(--site-bg);
  --bg-soft:var(--site-panel);
  --panel:var(--site-panel);
  --panel2:var(--site-panel-2);
  --card:var(--site-panel);
  --card2:var(--site-panel-2);
  --border:var(--site-border);
  --line:var(--site-border);
  --text:var(--site-text);
  --muted:var(--site-muted);
  --accent:var(--site-accent);
  --accent2:var(--site-accent);
  --accent-strong:var(--site-accent-strong);
  --accent-dark:rgba(104,228,162,.12);
}

html {
  color-scheme:dark;
  background:#070b12 !important;
}
body {
  margin:0;
  min-height:100vh;
  color:var(--site-text);
  /*
   * Belangrijk: de gradient heeft altijd de VIEWPORT als canvas.
   * Zonder expliciete background-size werd hij op lange pagina's (zoals Releases)
   * berekend over de volledige documenthoogte en daardoor veel groter/lichtblauwer.
   */
  background-color:var(--site-bg) !important;
  background-image:
    radial-gradient(circle at 12% -8%,rgba(57,104,190,.14),transparent 32%),
    radial-gradient(circle at 92% -4%,rgba(104,228,162,.09),transparent 28%) !important;
  background-repeat:no-repeat !important;
  background-size:100vw 100vh,100vw 100vh !important;
  background-attachment:fixed,fixed !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:500;
}

/* Eén identieke basiskleur voor Home en alle modules. */
html, body {
  background-color:var(--site-bg) !important;
}

/* De modules hadden vroeger elk hun eigen grote achtergrond-orbs. De globale site-shell bezit nu de achtergrond. */
.bg-orb,.hub-orb { display:none !important; }

/* Zelfde contentbreedte op alle modules. */
.app-shell {
  width:min(1180px,calc(100% - 32px)) !important;
  margin:0 auto !important;
  padding:0 0 56px !important;
}

.site-header {
  min-height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.site-brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-width:max-content;
  justify-self:start;
  color:var(--site-text);
  text-decoration:none;
}
.site-brand-mark {
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:10px;
  background:var(--site-accent);
  color:#07110c;
  font-size:11px;
  font-weight:950;
  letter-spacing:-.04em;
  box-shadow:0 10px 30px rgba(69,217,147,.12);
}
.site-brand-copy strong,.site-brand-copy small { display:block; }
.site-brand-copy strong {
  font-size:17px;
  line-height:1.05;
  letter-spacing:-.025em;
}
.site-brand-copy small {
  margin-top:3px;
  color:var(--site-muted);
  font-size:10px;
  line-height:1.1;
  font-weight:650;
}

.site-primary-nav {
  justify-self:center;
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:13px;
  background:rgba(12,18,27,.74);
  backdrop-filter:blur(14px);
  overflow-x:auto;
  scrollbar-width:none;
}
.site-primary-nav::-webkit-scrollbar { display:none; }
.site-primary-nav a {
  flex:0 0 auto;
  padding:8px 11px;
  border-radius:9px;
  color:var(--site-muted);
  text-decoration:none;
  font-size:12px;
  line-height:1;
  font-weight:760;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.site-primary-nav a:hover {
  color:var(--site-text);
  background:rgba(255,255,255,.05);
}
.site-primary-nav a.active {
  color:#07110c;
  background:var(--site-accent);
}

.site-header-actions {
  min-width:0;
  justify-self:end;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.site-header .profile-button {
  margin:0;
  white-space:nowrap;
}

/* Module-content begint overal op dezelfde afstand van de globale navigatie. */
.app-shell > .site-header + .hero-card { margin-top:10px; }
.app-shell > .site-header + main { padding-top:10px; }

@media (max-width:760px) {
  .app-shell { width:min(100% - 22px,1180px) !important; }
  .site-header {
    grid-template-columns:1fr auto;
    gap:10px 14px;
    padding:10px 0 9px;
  }
  .site-brand-copy small { display:none; }
  .site-primary-nav {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    justify-self:stretch;
    justify-content:flex-start;
  }
  .site-header-actions { min-width:0; }
}

@media (max-width:420px) {
  .site-brand-mark { width:33px;height:33px; }
  .site-brand-copy strong { font-size:16px; }
  .site-primary-nav a { padding:8px 10px;font-size:11px; }
}


/* Screenbase palette normalization: every module uses the home palette. */
.hero-card {
  border-color:var(--site-border) !important;
}
.primary {
  background:linear-gradient(135deg,var(--site-accent),var(--site-accent-strong)) !important;
  color:#07110c !important;
  box-shadow:0 14px 35px rgba(69,217,147,.16) !important;
}
.eyebrow,.mini-label { color:var(--site-accent) !important; }
.primary-chip,
.filter-chip input:checked + span,
.view-switch button.active,
.provider-mode-switch button.active,
.provider-choice:has(input:checked) {
  background:rgba(104,228,162,.14) !important;
  border-color:rgba(104,228,162,.34) !important;
  color:var(--site-text) !important;
}
.card:hover,.release-card:hover,.provider-choice:hover {
  border-color:rgba(104,228,162,.34) !important;
}
.type-badge,.type-badge.movie,.streaming-only-badge {
  background:rgba(104,228,162,.10) !important;
  color:var(--site-accent) !important;
  border-color:rgba(104,228,162,.20) !important;
}
.month-day.selected { outline-color:rgba(104,228,162,.55) !important; }
.month-more,.text-btn,.similarity-reasons { color:var(--site-accent) !important; }
.spinner { border-top-color:var(--site-accent) !important; }