:root {
  --bg: #0f0f0f;
  --panel: #141416;
  --text: #f8f5ef;
  --muted: #c8c2b6;
  --accent: #4a9d8f;
  --accent-2: #6bbcb0;
  --border: #2a2a2a;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Inter", "Instrument Serif", "Segoe UI", sans-serif !important;
}

.modal-container,
.auth-container,
.logout-container,
.profile-card,
.header,
.auth-container,
.profile-card,
.redirect-info {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.logo h1,
.logout-title,
.header h1 {
  color: var(--text) !important;
}

.logo p,
.logout-message,
.info-label {
  color: var(--muted) !important;
}

.auth-tabs {
  background: #101014 !important;
  border-color: var(--border) !important;
}

.tab.active {
  background: var(--accent) !important;
  color: #07110e !important;
}

.form-group input,
.remember-option,
.btn-secondary {
  border-color: var(--border) !important;
  color: var(--text) !important;
  background: #0f0f12 !important;
}

.form-group label,
.remember-option label,
.auth-tabs .tab,
.auth-container p,
.profile-card p,
.redirect-info,
.info-label,
.logout-message {
  color: var(--muted) !important;
}

.form-group input::placeholder {
  color: #8f8a80 !important;
}

.form-group input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(74, 157, 143, 0.25) !important;
}

.btn,
.btn-primary {
  background: var(--accent) !important;
  color: #06110d !important;
  border-color: var(--accent) !important;
  font-weight: 600 !important;
}

.btn:hover,
.btn-primary:hover {
  background: #5bb0a2 !important;
}

.link,
.back-link a {
  color: var(--accent-2) !important;
}