:root {
  --lp-bg: #070b16;
  --lp-bg-2: #0d1326;
  --lp-surface: #121a31;
  --lp-surface-2: #1a2440;
  --lp-primary: #7c3aed;
  --lp-primary-2: #5b8cff;
  --lp-accent: #22d3ee;
  --lp-text: #eef3ff;
  --lp-muted: #aeb8d0;
  --lp-border: rgba(124, 58, 237, .28);
  --lp-success: #22c55e;
  --lp-warning: #f59e0b;
  --lp-danger: #ef4444;
  --lp-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, .24), transparent 35%),
    radial-gradient(circle at 100% 20%, rgba(34, 211, 238, .12), transparent 30%),
    linear-gradient(180deg, var(--lp-bg), var(--lp-bg-2));
  color: var(--lp-text);
}

body,
.layout-page,
.content-wrapper,
.layout-navbar,
.bg-navbar-theme,
.bg-menu-theme,
.menu-vertical,
.container-xxl {
  background-color: transparent !important;
}

/* Header + sidebar */
.layout-navbar,
.bg-navbar-theme,
.custom-header-section {
  background: rgba(12, 18, 34, .92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lp-border) !important;
}

.menu-vertical {
  background: linear-gradient(180deg, rgba(18, 26, 49, .95), rgba(13, 19, 38, .95)) !important;
  border-right: 1px solid var(--lp-border);
}

.menu-vertical .menu-link,
.menu-vertical .menu-icon,
.menu-vertical .menu-text {
  color: var(--lp-muted) !important;
}

.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item.open > .menu-link,
.menu-vertical .menu-item .menu-link:hover {
  color: var(--lp-text) !important;
  background: linear-gradient(90deg, rgba(124, 58, 237, .25), rgba(91, 140, 255, .18)) !important;
  border: 1px solid rgba(124, 58, 237, .35);
  border-radius: 12px;
}

/* Cards + containers */
.card,
.invoice-card,
.confirm-card,
.my-card,
.feature-card,
.pricing-card,
.faq-item,
.contact-card {
  background: linear-gradient(180deg, rgba(26, 36, 64, .94), rgba(18, 26, 49, .94)) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 16px !important;
  color: var(--lp-text) !important;
  box-shadow: var(--lp-shadow);
}

.card-header,
.card-body,
.card-title,
.form-label,
.table,
.table th,
.table td,
.text-muted,
small,
label,
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--lp-text) !important;
}

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

/* Form controls */
.form-control,
.form-select,
.input-group-text,
select,
textarea,
.bootstrap-select .dropdown-toggle {
  background: rgba(255, 255, 255, .04) !important;
  color: var(--lp-text) !important;
  border: 1px solid rgba(124, 58, 237, .35) !important;
  border-radius: 12px !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus {
  border-color: var(--lp-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .14) !important;
}

.form-control::placeholder {
  color: #97a4c4 !important;
}

/* Buttons */
.btn-primary,
.launch-btn,
.copy-button,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--lp-primary), var(--lp-primary-2)) !important;
  border: 1px solid rgba(170, 145, 255, .35) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
  border-radius: 12px !important;
}

.btn-primary:hover,
.launch-btn:hover,
.copy-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124, 58, 237, .45);
}

/* Tables */
.table {
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(124, 58, 237, .08) !important;
}

.table thead th {
  border-bottom: 1px solid rgba(124, 58, 237, .4) !important;
}

.table td,
.table th {
  border-color: rgba(124, 58, 237, .22) !important;
}

/* Footer */
.luxe-footer {
  margin-top: 18px;
  background: rgba(12, 18, 34, .86);
  border-top: 1px solid var(--lp-border);
  color: var(--lp-muted);
}

/* Dropdowns */
.dropdown-menu,
.custom-header-dropdown {
  background: linear-gradient(180deg, rgba(26, 36, 64, .98), rgba(18, 26, 49, .98)) !important;
  border: 1px solid var(--lp-border) !important;
  border-radius: 14px !important;
}

.dropdown-item {
  color: var(--lp-text) !important;
}

.dropdown-item:hover {
  background: rgba(124, 58, 237, .22) !important;
}