:root {
  --bg: #0f172a;
  --card: #1e293b;
  --border: #334155;
  --text: #f8fafc;
  --muted: #94a3b8;
  --primary: #38bdf8;
  --accent: #10b981;
}

html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  background: radial-gradient(circle at top, #0f172a 0%, #020617 100%);
  background-attachment: fixed;
  color: var(--text);
}

a,
.nav-link,
.navbar-brand {
  color: var(--primary) !important;
}

.text-dark {
  color: var(--text) !important;
}

.text-muted,
.text-secondary {
  color: var(--muted) !important;
}

.navbar,
.footer,
.card,
.table,
.modal-content,
.dropdown-menu {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.table th,
.table td {
  color: var(--text);
  border-color: var(--border);
}

.form-control,
.form-select,
textarea {
  background-color: #0b1220;
  color: var(--text);
  border-color: var(--border);
}

.form-control::placeholder,
textarea::placeholder {
  color: var(--muted);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #0b1220 !important;
  font-weight: 600;
}

.btn-outline-light {
  color: #f8fafc !important;
  border-color: #f8fafc;
}

.btn-outline-light:hover {
  background-color: #f8fafc;
  color: #0b1220 !important;
}

.btn-success {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #0b1220 !important;
  font-weight: 600;
}

pre {
  background: #000;
  color: #10b981;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.75rem;
  overflow-x: auto;
}