/*
 * Каталог задач SQL (courses/sql/tasks.html).
 * Базовые стили карточек и фильтров берутся из frontend-tasks.css (классы ft-* и task-card*),
 * здесь - только оформление превью SQL-карточек.
 */

.task-card.is-solved {
  border-color: rgba(34, 197, 94, 0.35);
}

.sql-solved-icon {
  color: #4ade80;
}

/* Превью карточки: мини-редактор с кодом и столбцами результата, по центру как у других каталогов */
.task-card--sql .task-card__video {
  justify-content: center;
  padding: 52px 12px 96px;
}

.sql-card-demo {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #151820;
  color: #e2e8f0;
  pointer-events: none;
}

.sql-card-demo__code {
  margin: 0 0 8px;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.sql-card-demo__code b {
  color: #ff79c6;
  font-weight: 600;
}

.sql-card-demo__cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}

.sql-card-demo__arrow {
  color: #64748b;
}

.sql-card-demo__col {
  padding: 1px 8px;
  border-radius: 5px;
  background: rgba(108, 124, 255, 0.2);
  color: #a5b4fc;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 11px;
}