:root {
  --ch-bg: #0f1115;
  --ch-card: #161a22;
  --ch-border: #262b36;
  --ch-accent: #52b54b;
}

body {
  background-color: var(--ch-bg);
  background-image: radial-gradient(circle at top right, #1a1f2b 0%, #0f1115 55%);
  min-height: 100vh;
  color: #e9edf1;
}

.navbar-brand { font-weight: 700; }

.app-navbar {
  background-color: #10131a;
  border-bottom: 1px solid var(--ch-border);
}

.card, .poster-card {
  background-color: var(--ch-card);
  border: 1px solid var(--ch-border);
  border-radius: .6rem;
}

.poster-card {
  overflow: hidden;
  transition: transform .15s ease;
  height: 100%;
}
.poster-card:hover { transform: translateY(-4px); border-color: var(--ch-accent); }
.poster-card img { aspect-ratio: 2/3; object-fit: cover; width: 100%; }
.poster-card .poster-body { padding: .6rem .7rem; }
.poster-card .poster-title {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-vip {
  background: linear-gradient(45deg, #b8860b, #ffd700);
  color: #1b1b1b;
  font-weight: 700;
}

.hero-backdrop {
  background-size: cover;
  background-position: center 20%;
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
}
.hero-backdrop::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,17,21,1) 0%, rgba(15,17,21,.4) 60%, rgba(15,17,21,.1) 100%);
}
.hero-content { position: relative; z-index: 2; }

.dropdown-menu-dark { --bs-dropdown-bg: #161a22; }

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 100%; max-width: 420px; }
.brand-icon { font-size: 2.5rem; color: var(--ch-accent); }

.installer-wrapper { max-width: 720px; margin: 40px auto; }
.step-indicator .step { opacity: .4; }
.step-indicator .step.active { opacity: 1; font-weight: 600; color: var(--ch-accent); }

.vip-locked {
  background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #14110a 10px, #14110a 20px);
  border: 1px dashed #b8860b;
}