:root {
  --bg-main: #101214;
  --bg-card: #1a1d21;
  --text-main: #f4f4f5;
  --text-muted: #9ca3af;
  --accent-red: #c1121f;
  --accent-red-soft: #e5383b;
  --border-color: #2d333b;
}

body {
  background: linear-gradient(180deg, #0d0f10 0%, #16181b 100%);
  color: var(--text-main);
  min-height: 100vh;
}

.bg-dark-red {
  background: linear-gradient(90deg, #141516 0%, #2b1113 100%);
  border-bottom: 1px solid var(--border-color);
}

.dashboard-card,
.stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem;
}

.stats-card {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.stats-title {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.stats-card h2 {
  margin: 0.3rem 0 0;
  font-weight: 700;
}

.section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.table > :not(caption) > * > * {
  border-bottom-color: #2f353d;
}

.preview-table-wrapper {
  max-height: 280px;
}

.btn-danger {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--accent-red-soft);
  border-color: var(--accent-red-soft);
}

.form-control,
.form-select {
  background-color: #111317;
  border: 1px solid #2f353d;
  color: var(--text-main);
}

.form-control:focus,
.form-select:focus {
  background-color: #111317;
  color: var(--text-main);
  border-color: var(--accent-red);
  box-shadow: 0 0 0 0.2rem rgba(193, 18, 31, 0.25);
}

.toast {
  background-color: #21262d;
  color: var(--text-main);
  border: 1px solid #383f47;
}

@media (max-width: 576px) {
  .stats-card {
    min-height: 100px;
  }

  .dashboard-card,
  .stats-card {
    padding: 0.85rem;
  }
}