:root{
  --bg:#071221;
  --panel:#0b1a2e;
  --panel2:#0e223c;
  --border:#163458;
  --text:#dbe7ff;
  --muted:#9fb3d6;
  --accent:#3b82f6;
  --hover-text:#ffd84d; /* жёлтый при наведении */
}

html, body { height:100%; }
body{
  background: var(--bg);
  color: var(--text);
}

.navbar{
  background: #010205 !important;
  border-bottom:1px solid var(--border);
}

.nav-pills .nav-link{
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--panel);
  margin-right: .5rem;
}
.nav-pills .nav-link.active{
  background: var(--panel2);
  border-color: var(--accent);
}

.table{
  --bs-table-bg: var(--panel);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
}
.table-hover tbody tr:hover{
  background-color: var(--panel2);
  cursor: pointer;
}
.table-hover tbody tr:hover td{
  color: var(--hover-text); /* <- жёлтый текст при наведении */
}

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  height: 100%;
}
.card .card-title{ color: var(--text); }
.text-muted{ color: var(--muted) !important; }

.modal-content{
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline-light{
  border-color: var(--border);
  color: var(--text);
}
.btn-outline-light:hover{
  background: var(--panel2);
}

.cover-img{
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.modal-cover{
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: .5rem;
}

a { color: #9fc5ff; }
a:hover { color: #cfe3ff; }
/* Квадратные обложки в карточках */
.cover-img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* всегда квадрат */
  object-fit: cover;     /* аккуратная обрезка */
  border-radius: 0.75rem;
  background-color: #0b1a2e;
}

/* Квадратная обложка в модальном окне */
.modal-cover {
  max-width: 420px;
  width: 100%;
  aspect-ratio: 1 / 1;   /* квадрат */
  object-fit: cover;
  border-radius: 1rem;
  background-color: #0b1a2e;
}