@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@700;900&display=swap");

:root {
  --don-bg: #0b0b0b;
  --don-surface: #171717;
  --don-surface-2: #1f1f1f;
  --don-sidebar: #111111;
  --don-border: #2a2a2a;
  --don-text: #ffffff;
  --don-text-secondary: #b0b0b0;
  --don-text-muted: #808080;
  --don-primary: #6c5ce7;
  --don-primary-hover: #5b4bc2;
  --don-primary-light: #8b7cf4;
  --don-primary-glow: rgba(108, 92, 231, 0.15);
  --don-success: #22c55e;
  --don-warning: #f59e0b;
  --don-danger: #ef4444;
  --don-info: #3b82f6;
  --don-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --don-shadow-soft: 0 0 25px rgba(108, 92, 231, 0.2);
}

* {
  box-sizing: border-box;
}

html, body {
  background: var(--don-bg) !important;
  color: var(--don-text);
  font-family: "Inter", sans-serif;
}

body {
  background:
    radial-gradient(circle at top, rgba(108, 92, 231, 0.09), transparent 34%),
    linear-gradient(180deg, #0b0b0b 0%, #0b0b0b 60%, #090909 100%) !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.header h1,
.page-title,
.modal-title,
.card-subtitle,
.subtitle {
  font-family: "Space Grotesk", sans-serif;
}

a {
  color: var(--don-primary);
}

a:hover {
  color: var(--don-primary-light);
}

header,
.header,
.app-header,
.sidebar,
.sidebar-section,
.support-card,
.login-card,
.register-card,
.forgot-card,
.page-wrapper section,
section,
.container section,
.price-card,
.card,
.modal-content,
.dropdown-menu {
  background: var(--don-surface) !important;
  border-color: var(--don-border) !important;
  box-shadow: var(--don-shadow) !important;
}

.header,
header,
.app-header {
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.98) 0%, rgba(11, 11, 11, 0.92) 100%) !important;
  border-bottom: 1px solid var(--don-border) !important;
}

.sidebar,
.sidebar-section {
  background: var(--don-sidebar) !important;
}

.nav a,
.back-link,
.forgot-password a,
.register-link a,
.header-link,
.dropdown-item,
.sidebar-link,
.btn-link {
  color: var(--don-text-secondary) !important;
}

.nav a:hover,
.back-link:hover,
.forgot-password a:hover,
.register-link a:hover,
.header-link:hover,
.sidebar-link:hover,
.dropdown-item:hover {
  color: var(--don-text) !important;
}

.sidebar-link.active {
  background: rgba(108, 92, 231, 0.15) !important;
  border-left: 4px solid var(--don-primary) !important;
  color: var(--don-text) !important;
}

.btn,
.btn-primary,
.btn-email,
.btn-secondary,
.btn-warning,
.btn-danger,
.btn-info {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  transition: all 0.25s ease !important;
  font-weight: 600 !important;
}

.btn-primary,
.btn-email {
  background: linear-gradient(135deg, var(--don-primary) 0%, var(--don-primary-light) 100%) !important;
  color: var(--don-text) !important;
  box-shadow: var(--don-shadow-soft) !important;
}

.btn-primary:hover,
.btn-email:hover,
.btn-primary:focus,
.btn-email:focus {
  background: var(--don-primary-hover) !important;
  color: var(--don-text) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary,
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--don-primary) !important;
  color: var(--don-primary) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background: rgba(108, 92, 231, 0.12) !important;
  color: var(--don-text) !important;
}

.btn-warning {
  background: var(--don-warning) !important;
  color: var(--don-text) !important;
}

.btn-danger {
  background: var(--don-danger) !important;
  color: var(--don-text) !important;
}

.btn-info {
  background: var(--don-info) !important;
  color: var(--don-text) !important;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
  background: var(--don-surface) !important;
  color: var(--don-text) !important;
  border: 1px solid var(--don-border) !important;
  box-shadow: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--don-text-muted) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
  border-color: var(--don-primary) !important;
  box-shadow: 0 0 0 3px var(--don-primary-glow) !important;
}

.card,
.price-card,
.support-card,
.login-card,
.register-card,
.forgot-card,
.modal-content,
section {
  background: var(--don-surface) !important;
  border: 1px solid var(--don-border) !important;
  border-radius: 12px !important;
}

.price-card .value,
.card h1,
.card h2,
.card h3,
.header h1,
.card-title,
.h1,
.h2,
.h3 {
  color: var(--don-text) !important;
}

.subtitle,
.card-subtitle,
p,
li,
.text-muted,
.text-gray,
.text-secondary,
.description,
header p,
.header p,
.notice p,
.price-card .sublabel {
  color: var(--don-text-secondary) !important;
}

.notice,
.highlight-danger,
.highlight-success {
  background: rgba(108, 92, 231, 0.08) !important;
  border-color: rgba(108, 92, 231, 0.25) !important;
}

.notice-title,
.method-badge,
.sidebar-heading {
  color: var(--don-primary-light) !important;
}

.price-card .value,
.sidebar-link.active,
.method-badge.get {
  color: var(--don-primary-light) !important;
}

.dropdown-menu {
  border: 1px solid var(--don-border) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background: rgba(108, 92, 231, 0.15) !important;
  color: var(--don-text) !important;
}

.wizard-icon.active,
.wizard-step.completed .wizard-icon {
  background: linear-gradient(135deg, var(--don-primary) 0%, var(--don-primary-light) 100%) !important;
  color: var(--don-text) !important;
  box-shadow: var(--don-shadow-soft) !important;
}

.wizard-icon,
.input-icon,
.menu-btn,
.header-link,
.back-link i,
.btn i {
  color: var(--don-text-secondary) !important;
}

.wizard-step:not(.completed)::after,
.wizard-step:not(:last-child)::after {
  background: var(--don-border) !important;
}

.wizard-step.completed:not(:last-child)::after {
  background: var(--don-primary) !important;
}

table,
.table {
  color: var(--don-text) !important;
}

thead,
.table thead th {
  background: var(--don-sidebar) !important;
  border-color: var(--don-border) !important;
  color: var(--don-text) !important;
}

tbody tr,
.table tbody tr {
  background: var(--don-surface) !important;
  border-color: var(--don-border) !important;
}

tbody tr:hover,
.table tbody tr:hover {
  background: var(--don-surface-2) !important;
}

@media (max-width: 768px) {
  .card,
  .support-card,
  .login-card,
  .register-card,
  .forgot-card,
  section {
    box-shadow: none !important;
  }
}