/* ====== ANY VPN — Green Grid Theme ====== */

html, body {
  background: radial-gradient(circle at center, #065F46, #000000) !important;
  background-attachment: fixed !important;
  color: #e5e7eb !important;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

#app { position: relative; z-index: 1; }

body.bg-gray-50 { background: transparent !important; }
.bg-gray-50 { background: transparent !important; }
.bg-white { background: rgba(0, 0, 0, 0.4) !important; }
.dark\:bg-neutral-800 { background: transparent !important; }
.dark\:bg-neutral-700 { background: rgba(10, 20, 15, 0.9) !important; }
.dark\:bg-neutral-600 { background: rgba(255, 255, 255, 0.05) !important; }

img[src*="logo.png"] { display: none !important; }

h1.text-4xl > span.align-middle {
  background: linear-gradient(to bottom right, #f0fdf4, #6b7280) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.03em !important;
  font-size: 1.1em !important;
}

.vova-vpn-tag {
  -webkit-text-fill-color: rgba(134, 239, 172, 0.5) !important;
  font-weight: 400 !important;
  font-size: 0.5em !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.shadow-md.rounded-lg,
.shadow-md.rounded-lg.bg-white,
div.shadow-md {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

form.shadow,
form.shadow.rounded-md,
form.shadow.rounded-md.bg-white {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.text-gray-900 { color: #f3f4f6 !important; }
.text-gray-700 { color: #e5e7eb !important; }
.text-gray-600 { color: #d1d5db !important; }
.text-gray-500 { color: #9ca3af !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-300 { color: #6b7280 !important; }
.text-gray-200 { color: #d1d5db !important; }
.dark\:text-neutral-200 { color: #e5e7eb !important; }
.dark\:text-neutral-300 { color: #d1d5db !important; }
.dark\:text-neutral-400 { color: #9ca3af !important; }
.dark\:text-neutral-500 { color: #6b7280 !important; }
.dark\:text-neutral-50 { color: #f9fafb !important; }

input[type="password"],
input[type="text"],
input.rounded,
input.rounded-lg {
  background: rgba(3, 18, 7, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb !important;
}
input::placeholder { color: rgba(156, 163, 175, 0.4) !important; }
input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

form .rounded-full.bg-red-800,
.mx-auto.rounded-full.bg-red-800,
div.h-20.w-20.rounded-full.bg-red-800 {
  background: linear-gradient(135deg, #065f46, #059669) !important;
  border: none !important;
}

.bg-red-800 {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}
.bg-red-800:hover,
.hover\:bg-red-800:hover,
.hover\:bg-red-700:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.dark\:bg-red-800 { background: rgba(0, 0, 0, 0.7) !important; }

input[type="submit"] {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: white !important;
}
input[type="submit"]:hover { background: rgba(0, 0, 0, 0.95) !important; }
input[type="submit"].bg-gray-200,
input[type="submit"].cursor-not-allowed {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #4b5563 !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.bg-gray-100 {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #9ca3af !important;
}
.bg-gray-100:hover,
button.bg-gray-100:hover,
a.bg-gray-100:hover {
  background: #065f46 !important;
  color: white !important;
}
.dark\:bg-neutral-600 { background: rgba(255, 255, 255, 0.06) !important; }

div.rounded-full.w-10.h-6.bg-red-800 {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
}

.bg-gray-200.rounded-full.w-10,
.bg-gray-200.cursor-pointer.rounded-full { background: rgba(255, 255, 255, 0.1) !important; }
.dark\:bg-neutral-400.cursor-pointer { background: rgba(255, 255, 255, 0.1) !important; }

.animate-ping { background: rgba(52, 211, 153, 0.25) !important; }
div > .rounded-full.w-2.h-2 { background: #34d399 !important; }

.border-gray-100 { border-color: rgba(255, 255, 255, 0.06) !important; }
.border-gray-200 { border-color: rgba(255, 255, 255, 0.06) !important; }
.border-gray-300 { border-color: rgba(255, 255, 255, 0.1) !important; }
.border-b.border-gray-100 { border-color: rgba(255, 255, 255, 0.06) !important; }
.dark\:border-neutral-600 { border-color: rgba(255, 255, 255, 0.06) !important; }
.dark\:border-neutral-500 { border-color: rgba(255, 255, 255, 0.1) !important; }
.dark\:border-neutral-800 { border-color: rgba(255, 255, 255, 0.06) !important; }
.border-2.border-gray-100 { border-color: rgba(255, 255, 255, 0.08) !important; }

label[class*="border-2"],
a[class*="border-2"],
button[class*="border-2"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #d1d5db !important;
  background: transparent !important;
}
label[class*="border-2"]:hover,
a[class*="border-2"]:hover,
button[class*="border-2"]:hover {
  background: #065f46 !important;
  border-color: #065f46 !important;
  color: white !important;
}

.h-10.w-10.rounded-full.bg-gray-50 { background: rgba(255, 255, 255, 0.05) !important; }
.w-6.m-2.text-gray-300 { color: #4b5563 !important; }

.fixed.inset-0 .bg-gray-500 { background: rgba(0, 0, 0, 0.75) !important; }
.absolute.inset-0.bg-gray-500 { background: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(8px) !important; }

.inline-block.align-bottom.bg-white.rounded-lg,
.inline-block.align-bottom.rounded-lg {
  background: rgba(10, 20, 15, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

.bg-gray-50.px-4.py-3 { background: rgba(0, 0, 0, 0.2) !important; }

.flex-shrink-0.rounded-full.bg-red-800 {
  background: linear-gradient(135deg, #065f46, #10b981) !important;
  border: none !important;
}

.bg-red-100 { background: rgba(239, 68, 68, 0.12) !important; }
.text-red-600 { color: #f87171 !important; }
.bg-red-600 { background: #dc2626 !important; border: none !important; }
button.bg-red-600:hover { background: #ef4444 !important; }

button.bg-white {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e5e7eb !important;
}
button.bg-white:hover { background: rgba(255, 255, 255, 0.1) !important; }

.bg-red-800.p-4 {
  background: linear-gradient(135deg, rgba(6, 95, 70, 0.7), rgba(5, 150, 105, 0.5)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
}

button.bg-red-800.border-none { background: linear-gradient(135deg, #065f46, #10b981) !important; border: none !important; }

.bg-black.bg-opacity-50 { background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(12px) !important; }
.bg-white.rounded-md.shadow-lg.p-8 { background: #fff !important; color: #111 !important; border: none !important; }

span.text-gray-400.cursor-pointer { color: #6b7280 !important; }
span.text-gray-400.cursor-pointer:hover { color: #9ca3af !important; }

p.text-center.m-10 { color: rgba(255, 255, 255, 0.12) !important; }
p.text-center.m-10:hover { color: rgba(255, 255, 255, 0.35) !important; }
p.text-center.m-10 a { color: inherit !important; }

svg.animate-spin { color: rgba(255, 255, 255, 0.2) !important; }

button.rounded-full.bg-gray-200 { background: rgba(255, 255, 255, 0.08) !important; color: #9ca3af !important; }
button.rounded-full.bg-gray-200:hover { background: rgba(255, 255, 255, 0.15) !important; }
.dark\:bg-neutral-700.rounded-full { background: rgba(255, 255, 255, 0.08) !important; }

button, a, input, .rounded-full { transition: all 0.2s ease !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

.focus\:border-red-800:focus,
.dark\:focus\:border-red-800:focus { border-color: #10b981 !important; }
.focus\:border-gray-200:focus { border-color: #10b981 !important; }