:root {
  --vpn-bg: #24140d;
  --vpn-bg-2: #3a2115;
  --vpn-card: rgba(129, 75, 40, 0.92);
  --vpn-card-2: rgba(96, 52, 29, 0.94);
  --vpn-card-light: rgba(255, 244, 221, 0.08);
  --vpn-gold: #f6b73c;
  --vpn-gold-2: #ffd36a;
  --vpn-text: #fff4dc;
  --vpn-muted: rgba(255, 236, 200, 0.78);
  --vpn-line: rgba(255, 211, 106, 0.24);
  --vpn-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

html {
  background: var(--vpn-bg);
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 198, 83, 0.18), transparent 34%),
    radial-gradient(circle at 10% 15%, rgba(255, 211, 106, 0.10), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(116, 59, 31, 0.42), transparent 36%),
    linear-gradient(180deg, #6e3d23 0%, var(--vpn-bg) 62%, #150c08 100%) !important;
  color: var(--vpn-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 211, 106, 0.12) 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 211, 106, 0.08) 23px);
  mask-image: radial-gradient(circle at top, #000 0%, transparent 72%);
}

a {
  color: var(--vpn-gold-2);
}

h1, h2, h3 {
  color: var(--vpn-text) !important;
}

p, .hint, .muted, .note p {
  color: var(--vpn-muted) !important;
}

.badge {
  color: #1b100a !important;
  background: linear-gradient(135deg, var(--vpn-gold), var(--vpn-gold-2)) !important;
  border: 1px solid rgba(255, 230, 150, 0.55) !important;
  box-shadow: 0 10px 28px rgba(246, 183, 60, 0.18);
}

.card,
.note,
.quote-box,
section.card,
main .card {
  background:
    linear-gradient(180deg, rgba(143, 83, 43, 0.94), rgba(79, 42, 24, 0.96)) !important;
  border: 1px solid var(--vpn-line) !important;
  box-shadow: var(--vpn-shadow) !important;
  color: var(--vpn-text) !important;
}

input,
textarea,
select {
  background: rgba(28, 16, 10, 0.34) !important;
  border: 1px solid rgba(255, 211, 106, 0.22) !important;
  color: var(--vpn-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 236, 200, 0.54) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(255, 211, 106, 0.70) !important;
  box-shadow: 0 0 0 4px rgba(246, 183, 60, 0.14) !important;
}

.btn,
button,
a.btn,
.footer-link,
.copy-btn {
  background: linear-gradient(135deg, var(--vpn-gold), var(--vpn-gold-2)) !important;
  color: #1b100a !important;
  border: 1px solid rgba(255, 230, 150, 0.45) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(246, 183, 60, 0.16) !important;
}

.btn:hover,
button:hover,
a.btn:hover,
.footer-link:hover,
.copy-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn:active,
button:active,
a.btn:active,
.footer-link:active,
.copy-btn:active {
  transform: translateY(1px) scale(0.995);
}

code,
pre {
  background: rgba(24, 13, 8, 0.38) !important;
  color: var(--vpn-gold-2) !important;
  border-color: rgba(255, 211, 106, 0.20) !important;
}

.progress {
  background: rgba(255, 244, 221, 0.12) !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--vpn-gold), var(--vpn-gold-2)) !important;
}

.footer-links {
  gap: 12px !important;
}

.footer-link {
  border-radius: 999px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

@media (max-width: 640px) {
  .footer-link {
    width: min(100%, 260px);
  }
}

/* Request page final typography overrides */
#request-form label {
  color: var(--vpn-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

#request-form .field-status {
  display: block !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

#request-form .field-status.muted {
  color: var(--vpn-text) !important;
}

#request-form .field-status.ok {
  color: #6ee7a8 !important;
}

#request-form .field-status.bad {
  color: #ff6b8a !important;
}

#request-form .hint {
  color: var(--vpn-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.note h2 {
  color: var(--vpn-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  margin: 0 0 14px !important;
}

.note p {
  color: rgba(255, 236, 200, 0.54) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}


/* Request form username status as field label */
.field-status {
  display: block;
  color: var(--vpn-text) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.field-status.muted {
  color: var(--vpn-text) !important;
}

.field-status.ok {
  color: var(--vpn-gold-2) !important;
}

.field-status.bad {
  color: #ffb4a8 !important;
}