:root{
  --gp-bg: #0b1020;
  --gp-surface: rgba(255,255,255,0.06);
  --gp-surface-2: rgba(255,255,255,0.10);
  --gp-border: rgba(255,255,255,0.10);
  --gp-text: rgba(255,255,255,0.92);
  --gp-muted: rgba(255,255,255,0.72);
  --gp-accent: #4f8cff;

  /* Bootstrap color bridge (чтобы text-muted/links были читаемыми на тёмной теме) */
  --bs-body-bg: var(--gp-bg);
  --bs-body-color: var(--gp-text);
  --bs-secondary-color: var(--gp-muted);
  --bs-border-color: var(--gp-border);
  --bs-link-color: #8ab4ff;
  --bs-link-hover-color: #b2ccff;

  /* Подсказываем браузеру, что сайт в тёмной схеме (влияет на нативные dropdown у <select> и т.п.) */
  color-scheme: dark;
}

.gp-body{
  background: radial-gradient(1200px 800px at 10% 10%, rgba(79,140,255,0.25), transparent 60%),
              radial-gradient(900px 600px at 90% 30%, rgba(142,80,255,0.18), transparent 60%),
              var(--gp-bg);
  color: var(--gp-text);
  color-scheme: dark;
}

/* Bootstrap helpers (глобально) */
.text-muted{ color: var(--gp-muted) !important; }
.border-secondary{ border-color: var(--gp-border) !important; }

.form-control,
.form-select{
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--gp-border) !important;
  color: var(--gp-text) !important;
}

/* Где браузер позволяет — красим опции нативного select, чтобы не было белого фона */
select option{
  background-color: rgba(10,14,30,0.98);
  color: rgba(255,255,255,0.92);
}
.form-control::placeholder{ color: rgba(255,255,255,0.55) !important; }
.form-control:focus,
.form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(79,140,255,0.20) !important;
  border-color: rgba(79,140,255,0.55) !important;
}

/* Dropdowns (Bootstrap): убираем белый фон, приводим к тёмной теме */
.dropdown-menu{
  --bs-dropdown-bg: rgba(10,14,30,0.92);
  --bs-dropdown-color: var(--gp-text);
  --bs-dropdown-link-color: var(--gp-text);
  --bs-dropdown-link-hover-color: rgba(255,255,255,0.96);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.08);
  --bs-dropdown-link-active-color: rgba(255,255,255,0.98);
  --bs-dropdown-link-active-bg: rgba(79,140,255,0.22);
  --bs-dropdown-border-color: var(--gp-border);
  --bs-dropdown-divider-bg: var(--gp-border);
  --bs-dropdown-header-color: var(--gp-muted);

  background: var(--bs-dropdown-bg) !important;
  color: var(--bs-dropdown-color) !important;
  border: 1px solid var(--bs-dropdown-border-color) !important;
  backdrop-filter: blur(10px);
}

.dropdown-item{ color: var(--bs-dropdown-link-color) !important; }
.dropdown-item:hover,
.dropdown-item:focus{ background: var(--bs-dropdown-link-hover-bg) !important; color: var(--bs-dropdown-link-hover-color) !important; }
.dropdown-item.active,
.dropdown-item:active{ background: var(--bs-dropdown-link-active-bg) !important; color: var(--bs-dropdown-link-active-color) !important; }
.dropdown-header{ color: var(--bs-dropdown-header-color) !important; }
.dropdown-divider{ border-top-color: var(--bs-dropdown-divider-bg) !important; }

.btn.dropdown-toggle{
  border-color: var(--gp-border);
}

.gp-sidebar{
  width: 280px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  background: rgba(10,14,30,0.75);
  border-right: 1px solid var(--gp-border);
  backdrop-filter: blur(10px);
}

.gp-brand{ border-bottom: 1px solid var(--gp-border); }

.gp-nav-link{
  display:block;
  padding: 10px 12px;
  margin: 4px 0;
  color: var(--gp-text);
  text-decoration:none;
  border-radius: 10px;
}
.gp-nav-link:hover{ background: var(--gp-surface); }

.gp-main{ min-width: 0; }

.gp-topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background:
    radial-gradient(900px 180px at 15% 0%, rgba(79,140,255,0.22), transparent 55%),
    radial-gradient(700px 180px at 85% 0%, rgba(142,80,255,0.18), transparent 55%),
    rgba(10,14,30,0.70);
  border-bottom: 1px solid var(--gp-border);
  backdrop-filter: blur(10px);
  padding: 10px 0;
}

.gp-topbar-brand{ line-height: 1.05; }
.gp-topbar-title{
  font-weight: 800;
  letter-spacing: .3px;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.gp-topbar-subtitle{
  font-size: 12px;
  color: var(--gp-muted);
}

.gp-topbar-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  font-size: 12px;
}
.gp-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(79,140,255,0.95);
  box-shadow: 0 0 0 3px rgba(79,140,255,0.20);
}

.gp-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--gp-border);
  border-radius: 16px;
  overflow: hidden;
}

.gp-cover{
  height: 180px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--gp-border);
}

.gp-rating{
  min-width: 48px;
  text-align:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(79,140,255,0.20);
  border: 1px solid rgba(79,140,255,0.35);
  font-weight: 700;
}

.gp-kv{ border-top: 1px solid var(--gp-border); padding-top: 10px; }
.gp-kv-row{ display:flex; justify-content:space-between; padding: 6px 0; }

.gp-embed-frame-wrap{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #060815;
  border: 1px solid var(--gp-border);
  border-radius: 14px;
  overflow: hidden;
}
.gp-embed-frame{ width: 100%; height: 100%; border: 0; }

.gp-modal{ background: rgba(10,14,30,0.92); border: 1px solid var(--gp-border); }

@media (max-width: 992px){
  .gp-sidebar{ position: fixed; left: 0; transform: translateX(0); }
}