:root {
  --euphile-eu-blue: #003399;
  --euphile-eu-gold: #ffcc00;
  --euphile-ink: #172033;
  --euphile-surface: rgba(255, 255, 255, 0.9);
  --euphile-border: rgba(0, 51, 153, 0.14);
  --euphile-keycloak-background:
    radial-gradient(circle at 12% 18%, rgba(0, 51, 153, 0.16) 0, rgba(0, 51, 153, 0.1) 13%, rgba(0, 51, 153, 0) 31%),
    radial-gradient(circle at 88% 16%, rgba(255, 204, 0, 0.22) 0, rgba(255, 204, 0, 0.12) 12%, rgba(255, 204, 0, 0) 28%),
    radial-gradient(circle at 78% 84%, rgba(0, 51, 153, 0.11) 0, rgba(0, 51, 153, 0.06) 14%, rgba(0, 51, 153, 0) 32%),
    radial-gradient(circle at 18% 86%, rgba(255, 204, 0, 0.14) 0, rgba(255, 204, 0, 0.08) 10%, rgba(255, 204, 0, 0) 26%),
    linear-gradient(135deg, #ffffff 0%, #ffffff 42%, #f8fbff 62%, #fff9df 82%, #eef4ff 100%);
}

html,
body,
#root,
.pf-v5-c-page,
.pf-c-page {
  min-height: 100%;
  color: var(--euphile-ink);
  background: var(--euphile-keycloak-background) fixed !important;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(115deg, rgba(0, 51, 153, 0.08), rgba(0, 51, 153, 0) 24%),
    linear-gradient(295deg, rgba(255, 204, 0, 0.12), rgba(255, 204, 0, 0) 22%);
}

.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-c-page__main,
.pf-c-page__main-section {
  background: transparent !important;
}

.pf-v5-c-card,
.pf-c-card {
  background: var(--euphile-surface);
  border: 1px solid var(--euphile-border);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(23, 32, 51, 0.12);
}

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--euphile-eu-blue), #2459c6);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus {
  background: linear-gradient(135deg, #002b80, var(--euphile-eu-blue));
}