/* ElytraNode shared surface system.
   Loaded after generated page CSS to normalize the static website with the panel. */
:root {
  --en-bg: #0a0f12;
  --en-surface: #121a22;
  --en-surface-soft: #121a22;
  --en-surface-hover: #16212b;
  --en-border: rgba(255, 255, 255, 0.07);
  --en-border-strong: rgba(255, 255, 255, 0.12);
  --en-text: #e8eef2;
  --en-muted: #9ca9b6;
  --en-faint: #6f7d8c;
  --en-primary: #00a896;
  --en-primary-hover: #008f82;
  --en-danger: #ef4444;
  --en-radius: 8px;
  --en-radius-sm: 6px;
  --en-transition: 160ms ease;
}

html,
body {
  background: var(--en-bg) !important;
  color: var(--en-text);
}

body,
button,
input,
select,
textarea {
  font-family: Poppins, Montserrat, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

:focus-visible {
  outline: 2px solid var(--en-primary) !important;
  outline-offset: 2px;
  border-radius: var(--en-radius-sm);
}

/* Keep brand green/teal consistent. Older pages used mint/lime and cyan variants. */
.bg-\[\#56E39F\],
.bg-\[\#02C39A\],
.bg-wgreen,
.bg-lightblue,
.bg-blue-500,
.bg-\[\#00A896\] {
  background-color: var(--en-primary) !important;
}

.hover\:bg-\[\#008F82\]:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-wgreen:hover,
.hover\:bg-wblue:hover {
  background-color: var(--en-primary-hover) !important;
}

.text-\[\#56E39F\],
.text-\[\#02C39A\],
.text-\[\#5CE0D0\],
.text-wgreen,
.text-lightblue,
.text-blue-400,
.text-blue-500,
.text-\[\#00A896\] {
  color: var(--en-primary) !important;
}

.border-\[\#56E39F\],
.border-\[\#02C39A\],
.border-\[\#5CE0D0\],
.border-wgreen,
.border-lightblue,
.border-blue-400,
.border-blue-500,
.border-\[\#00A896\] {
  border-color: var(--en-primary) !important;
}

.from-\[\#56E39F\],
.from-\[\#02C39A\],
.from-\[\#5CE0D0\],
.from-wgreen,
.from-wblue,
.from-\[\#00A896\] {
  --tw-gradient-from: var(--en-primary) var(--tw-gradient-from-position) !important;
}

.to-\[\#56E39F\],
.to-\[\#02C39A\],
.to-\[\#5CE0D0\],
.to-wgreen,
.to-wblue,
.to-\[\#00A896\] {
  --tw-gradient-to: var(--en-primary) var(--tw-gradient-to-position) !important;
}

[class*="from-[#00A896]"],
[class*="from-[#02C39A]"],
[class*="from-[#56E39F]"],
[class*="from-[#5CE0D0]"] {
  --tw-gradient-from: var(--en-primary) var(--tw-gradient-from-position) !important;
}

[class*="to-[#00A896]"],
[class*="to-[#02C39A]"],
[class*="to-[#56E39F]"],
[class*="to-[#5CE0D0]"] {
  --tw-gradient-to: var(--en-primary) var(--tw-gradient-to-position) !important;
}

.text-\[\#9CA3AF\],
.text-\[\#ACA9B4\],
.text-\[\#A0AEC0\],
.text-gray-400,
.text-white\/70,
.text-white\/80 {
  color: var(--en-muted) !important;
}

[style*="color: #56E39F"],
[style*="color:#56E39F"],
[style*="color: #00A896"],
[style*="color:#00A896"],
[style*="color: #A0AEC0"],
[style*="color:#A0AEC0"] {
  color: var(--en-primary) !important;
}

a[style*="color: #A0AEC0"],
a[style*="color:#A0AEC0"],
footer a[style*="color"] {
  color: var(--en-muted) !important;
}

body[style*="background-color: #121A22"],
[style*="background-color: #121A22"],
[style*="background: #1a2332"],
[style*="background:#1a2332"] {
  background: var(--en-surface) !important;
}

/* Product UI controls. */
a[class*="bg-[#00A896]"],
button[class*="bg-[#00A896]"],
.header-panel-login,
#cookiescript_accept,
#cookiescript_save {
  min-height: 42px;
  border-radius: var(--en-radius) !important;
  background: var(--en-primary) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: background-color var(--en-transition), border-color var(--en-transition), color var(--en-transition);
}

a[class*="bg-[#00A896]"]:hover,
button[class*="bg-[#00A896]"]:hover,
.header-panel-login:hover,
#cookiescript_accept:hover,
#cookiescript_save:hover {
  background: var(--en-primary-hover) !important;
  box-shadow: none !important;
}

button,
a,
input,
select,
textarea {
  transition-duration: 160ms !important;
  transition-timing-function: ease !important;
}

input,
select,
textarea,
.floating-label {
  border-radius: var(--en-radius) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background-color: var(--en-surface) !important;
  border: 1px solid var(--en-border) !important;
  color: var(--en-text) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--en-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--en-primary) !important;
  box-shadow: 0 0 0 1px rgba(0, 168, 150, 0.18) !important;
}

input[type="checkbox"],
input[type="radio"] {
  color: var(--en-primary) !important;
  border-color: var(--en-border-strong) !important;
  background-color: var(--en-surface-soft) !important;
}

/* Cards, panels, dropdowns, and menus. */
.elytra-card,
[class*="bg-[#121A22]"],
[class*="bg-[#121a22]"],
[class*="bg-secondary"],
[class*="bg-lightpurple"] {
  background: var(--en-surface) !important;
  border-color: var(--en-border) !important;
}

.rounded-3xl,
.rounded-\[30px\],
.rounded-2xl,
.rounded-xl {
  border-radius: var(--en-radius) !important;
}

[style*="box-shadow: 0 25px 60px"],
[style*="box-shadow:0 25px 60px"],
.shadow-lg,
.shadow-xl,
.shadow-2xl,
[class*="hover:shadow"],
[class*="shadow-[0_0"],
[class*="shadow-[0_18px"],
[class*="shadow-[0_22px"] {
  box-shadow: none !important;
}

.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md,
[class*="backdrop-blur"],
.blur-sm,
[class*="blur-["] {
  filter: none !important;
  backdrop-filter: none !important;
}

[x-show][class*="absolute"],
[class*="dropdown"],
[role="menu"] {
  background: var(--en-surface) !important;
  border: 1px solid var(--en-border) !important;
  border-radius: var(--en-radius) !important;
  box-shadow: none !important;
}

.kicker {
  border-color: rgba(0, 168, 150, 0.28) !important;
  background: rgba(0, 168, 150, 0.08) !important;
  color: var(--en-primary) !important;
}

footer,
nav,
header {
  border-color: var(--en-border) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}
