:root {
  /* Palette EU + DeepFin */
  --eu-navy: #000b26;
  --eu-blue: #003399;
  --eu-blue-soft: #0b3f96;
  --eu-gold: #ffcc00;
  --eu-gold-soft: #ffde66;

  --accent-cyan: #00f5ff;

  --c-bg: #030614;
  --c-fg: #f9fafb;

  --glass: rgba(5, 10, 26, .88);
  --stroke: rgba(255, 255, 255, .16);
  --input: rgba(7, 13, 30, .95);
  --input-focus: rgba(10, 20, 48, 1);
  --shadow: 0 26px 90px rgba(0, 0, 0, .85);
  --radius: 24px;
}

html,
body {
  height: 100%
}

/* ==================== BODY / SFONDO ==================== */
body {
  margin: 0;
  color: var(--c-fg);
  background:
    radial-gradient(circle at 15% 12%, rgba(0, 245, 255, .18), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(255, 204, 0, .22), transparent 60%),
    radial-gradient(circle at 60% -10%, rgba(0, 26, 77, .9), transparent 60%),
    #020515 url("../../images/sfondonuovo2.png") center/cover no-repeat fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Inter", system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .2px;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, .75);
  position: relative;
}

/* Velo dinamico tipo aurora */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:
    conic-gradient(from 120deg,
      rgba(0, 51, 153, .16),
      rgba(0, 245, 255, .22),
      rgba(255, 204, 0, .18),
      rgba(0, 51, 153, .16));
  opacity: .65;
  mix-blend-mode: soft-light;
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
  animation: auroraShift 26s linear infinite;
}

/* Filo diagonale luminoso stile "bandiera UE tech" */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(135deg,
      transparent 15%,
      rgba(0, 51, 153, .3) 26%,
      rgba(0, 245, 255, .12) 32%,
      transparent 40%,
      transparent 60%,
      rgba(255, 204, 0, .18) 70%,
      transparent 82%);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

/* ==================== EU STARS CIRCLE ==================== */
.eu-stars-circle {
  position: fixed;
  width: 680px;
  height: 680px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: rotateStars 90s linear infinite;
}

.eu-stars-circle .star {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  transform: rotate(calc(360deg / 12 * var(--i))) translate(340px) rotate(calc(-360deg / 12 * var(--i)));
}

.eu-stars-circle .star::before {
  content: "★";
  position: absolute;
  font-size: 22px;
  color: var(--eu-gold);
  text-shadow:
    0 0 16px var(--eu-gold),
    0 0 30px rgba(255, 204, 0, .6),
    0 0 50px rgba(255, 204, 0, .3);
  animation: starPulse calc(2s + var(--i) * 0.15s) ease-in-out infinite;
}

/* ==================== FLOATING PARTICLES ==================== */
.floating-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-particles .particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 255, .8), rgba(0, 51, 153, .4));
  box-shadow:
    0 0 12px rgba(0, 245, 255, .7),
    0 0 24px rgba(0, 245, 255, .4);
  animation: floatParticle var(--duration) var(--delay) ease-in-out infinite;
  mix-blend-mode: screen;
}

.floating-particles .particle:nth-child(even) {
  background: radial-gradient(circle, rgba(255, 204, 0, .8), rgba(255, 204, 0, .4));
  box-shadow:
    0 0 12px rgba(255, 204, 0, .7),
    0 0 24px rgba(255, 204, 0, .4);
}

/* ==================== CARD LOGIN ==================== */
.login-container {
  position: relative;
  width: min(470px, 94vw);
  padding: 34px 30px 26px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 245, 255, .16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255, 204, 0, .22), transparent 55%),
    linear-gradient(145deg, rgba(0, 8, 38, .98), rgba(2, 5, 22, .98));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  text-align: center;
  z-index: 1;
  overflow: visible;

  opacity: 0;
  transform: translateY(18px) scale(.95);
  animation: cardIn .9s cubic-bezier(.18, .82, .25, 1) forwards;
}

/* Cornice animata EU - Più vivace */
.login-container::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background:
    linear-gradient(120deg,
      var(--eu-blue),
      var(--accent-cyan),
      var(--eu-gold),
      var(--accent-cyan),
      var(--eu-blue));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: borderFlow 5s linear infinite;
  filter: brightness(1.3);
}

/* Alone esterno più pronunciato */
.login-container::after {
  content: "";
  position: absolute;
  inset: -36px;
  border-radius: inherit;
  z-index: -1;
  background:
    radial-gradient(70% 80% at 20% 0%, rgba(0, 245, 255, .32), transparent 60%),
    radial-gradient(70% 80% at 90% 100%, rgba(255, 204, 0, .36), transparent 65%);
  filter: blur(36px);
  animation: glowPulse 4s ease-in-out infinite;
}

/* ==================== LOGO WRAPPER CON EFFETTO 3D ==================== */
.logo-wrapper {
  position: relative;
  margin-bottom: 22px;
}

.logo-wrapper::before {
  content: "";
  position: absolute;
  inset: -8px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 245, 255, .3), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255, 204, 0, .3), transparent 50%);
  border-radius: 18px;
  filter: blur(20px);
  z-index: -1;
  animation: logoBgPulse 3s ease-in-out infinite;
}

.login-container img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 4px auto 0;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 8px 20px rgba(0, 0, 0, .6),
    0 16px 40px rgba(0, 0, 0, .8),
    0 0 60px rgba(0, 245, 255, .15),
    0 0 80px rgba(255, 204, 0, .1);
  position: relative;
  z-index: 1;
  animation: pulseLogo 3.8s ease-in-out infinite;
  transform-style: preserve-3d;
  transition: transform .3s ease;
}

.login-container img:hover {
  transform: translateY(-4px) scale(1.02) rotateX(2deg);
}

/* ==================== INPUT CON ICONE ANIMATE ==================== */
.input-with-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(148, 163, 184, .7);
  font-size: 16px;
  z-index: 2;
  pointer-events: none;
  transition: all .3s ease;
}

.input-with-icon .form-control {
  padding-left: 46px;
}

.input-with-icon:has(.form-control:focus) .input-icon {
  color: var(--accent-cyan);
  transform: translateY(-50%) scale(1.15);
  filter: drop-shadow(0 0 8px var(--accent-cyan));
  animation: iconBounce .6s ease;
}

/* ==================== INPUT ==================== */
.form-control {
  background: var(--input);
  border: 1px solid rgba(148, 163, 184, .6);
  color: var(--c-fg) !important;
  caret-color: var(--accent-cyan);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 15px;
  line-height: 1.4;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .1s;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .55);
}

.form-control::placeholder {
  color: rgba(148, 163, 184, .85);
}

.form-control:focus {
  outline: none;
  background: var(--input-focus);
  border-color: var(--accent-cyan);
  box-shadow:
    0 0 0 1px rgba(0, 245, 255, .75),
    0 0 0 4px rgba(0, 51, 153, .65),
    0 0 20px rgba(0, 245, 255, .4),
    0 18px 40px rgba(0, 0, 0, .95);
  transform: translateY(-1px);
}

/* Fix autofill giallo */
input.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--input) inset !important;
  -webkit-text-fill-color: var(--c-fg) !important;
  caret-color: var(--accent-cyan);
}

/* ==================== BUTTON CON WAVE EFFECT ==================== */
.btn-primary {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  width: 100%;
  padding: 13px 16px;
  margin-top: 10px;
  color: #020617;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background:
    linear-gradient(90deg,
      var(--eu-blue),
      var(--accent-cyan),
      var(--eu-gold));
  background-size: 200% 100%;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(15, 23, 42, .8),
    0 0 30px rgba(0, 245, 255, .2);
  transition: transform .16s, filter .18s, box-shadow .2s, background-position .35s;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      transparent 0%,
      rgba(255, 255, 255, .46) 18%,
      transparent 36%) no-repeat;
  background-size: 220% 100%;
  mix-blend-mode: screen;
  animation: shimmer 2.7s ease-in-out infinite;
}

.btn-wave {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  background-position: -40% 0;
  filter: brightness(1.05);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, .98),
    0 0 0 1px rgba(37, 99, 235, .9),
    0 0 40px rgba(0, 245, 255, .3);
}

.btn-primary:active .btn-wave {
  animation: waveRipple .6s ease-out;
}

.btn-primary:active {
  transform: translateY(0) scale(.99);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .9);
}

#spin {
  margin-left: 8px
}

/* ==================== DECORATIVE SEPARATOR ==================== */
.login-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 20px;
  position: relative;
}

.separator-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,
      transparent,
      var(--eu-blue) 20%,
      var(--accent-cyan) 50%,
      var(--eu-gold) 80%,
      transparent);
  position: relative;
  overflow: hidden;
}

.separator-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .8) 50%,
      transparent);
  animation: lineFlow 3s linear infinite;
}

.separator-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(148, 163, 184, .8);
  text-shadow: 0 0 10px rgba(0, 245, 255, .3);
  padding: 0 8px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--eu-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s ease-in-out infinite;
}

/* ==================== SOCIAL ==================== */
.social-login {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.social-login a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(145deg, #020617, #020819);
  border: 1px solid rgba(148, 163, 184, .7);
  color: #e5e7eb;
  text-decoration: none;
  transition: transform .16s, box-shadow .25s, border-color .22s, background .25s, color .2s;
  font-size: 20px;
  position: relative;
  overflow: hidden;
}

.social-login a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--eu-blue), var(--eu-gold));
  opacity: 0;
  transition: opacity .3s;
}

.social-login a i {
  position: relative;
  z-index: 1;
}

.social-login a:hover::before {
  opacity: 1;
}

.social-login a:hover {
  transform: scale(1.18) translateY(-2px) rotate(5deg);
  border-color: rgba(59, 130, 246, 1);
  color: #020617;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, .9),
    0 0 40px rgba(0, 245, 255, .4);
}

/* ==================== EU FOOTER BADGE ==================== */
.eu-badge {
  margin-top: 22px;
  padding: 10px 18px;
  background:
    linear-gradient(135deg,
      rgba(0, 51, 153, .15),
      rgba(0, 51, 153, .08));
  border: 1px solid rgba(0, 51, 153, .4);
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(191, 219, 254, .95);
  text-transform: uppercase;
  letter-spacing: .8px;
  box-shadow:
    0 4px 12px rgba(0, 51, 153, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: badgeGlow 3s ease-in-out infinite;
}

.eu-badge i {
  font-size: 16px;
  color: var(--eu-gold);
  filter: drop-shadow(0 0 8px var(--eu-gold));
  animation: badgeIconPulse 2s ease-in-out infinite;
}

/* ==================== ERRORI ==================== */
.error-message {
  display: none;
  margin: 10px 0 6px;
  font-weight: 700;
  color: #ff6b81 !important;
  text-shadow: 0 0 14px rgba(255, 107, 129, .5);
}

.shake {
  animation: shake .36s linear
}

/* ==================== ANIMAZIONI ==================== */
@keyframes cardIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(.94)
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

@keyframes pulseLogo {

  0%,
  100% {
    transform: translateY(0) scale(1)
  }

  50% {
    transform: translateY(-2px) scale(1.03)
  }
}

@keyframes logoBgPulse {

  0%,
  100% {
    opacity: .6;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.1)
  }
}

@keyframes shimmer {
  0% {
    background-position: -220% 0
  }

  100% {
    background-position: 220% 0
  }
}

@keyframes borderFlow {
  0% {
    background-position: 0 0
  }

  100% {
    background-position: 300% 0
  }
}

@keyframes auroraShift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg)
  }

  50% {
    transform: translate3d(-4%, 2%, 0) rotate(1deg)
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg)
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0)
  }

  20% {
    transform: translateX(-6px)
  }

  40% {
    transform: translateX(6px)
  }

  60% {
    transform: translateX(-4px)
  }

  80% {
    transform: translateX(4px)
  }
}

@keyframes rotateStars {
  0% {
    transform: translate(-50%, -50%) rotate(0deg)
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg)
  }
}

@keyframes starPulse {

  0%,
  100% {
    opacity: .7;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.2)
  }
}

@keyframes floatParticle {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: .6;
  }

  33% {
    transform: translate(20px, -30px) scale(1.3);
    opacity: 1;
  }

  66% {
    transform: translate(-15px, 25px) scale(.8);
    opacity: .4;
  }
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: .7;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.05)
  }
}

@keyframes iconBounce {

  0%,
  100% {
    transform: translateY(-50%) scale(1.15)
  }

  50% {
    transform: translateY(-50%) scale(1.25)
  }
}

@keyframes waveRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 245, 255, .8);
  }

  100% {
    box-shadow: 0 0 0 40px rgba(0, 245, 255, 0);
  }
}

@keyframes lineFlow {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(200%)
  }
}

@keyframes textShimmer {

  0%,
  100% {
    opacity: .8
  }

  50% {
    opacity: 1;
    filter: brightness(1.3)
  }
}

@keyframes badgeGlow {

  0%,
  100% {
    box-shadow:
      0 4px 12px rgba(0, 51, 153, .3),
      inset 0 1px 0 rgba(255, 255, 255, .1);
  }

  50% {
    box-shadow:
      0 4px 20px rgba(0, 51, 153, .5),
      0 0 30px rgba(0, 245, 255, .2),
      inset 0 1px 0 rgba(255, 255, 255, .15);
  }
}

@keyframes badgeIconPulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px var(--eu-gold))
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 14px var(--eu-gold))
  }
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px) {
  .login-container {
    width: clamp(310px, 94vw, 470px);
    padding: 26px 20px 22px;
  }

  .login-container img {
    max-width: 260px;
    margin-bottom: 18px;
  }

  .eu-stars-circle {
    width: 500px;
    height: 500px;
  }

  .eu-stars-circle .star {
    transform: rotate(calc(360deg / 12 * var(--i))) translate(250px) rotate(calc(-360deg / 12 * var(--i)));
  }

  .eu-stars-circle .star::before {
    font-size: 18px;
  }

  .floating-particles .particle {
    width: 6px;
    height: 6px;
  }

  .separator-text {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
}

@media(max-width:480px) {
  .eu-stars-circle {
    width: 380px;
    height: 380px;
  }

  .eu-stars-circle .star {
    transform: rotate(calc(360deg / 12 * var(--i))) translate(190px) rotate(calc(-360deg / 12 * var(--i)));
  }

  .eu-stars-circle .star::before {
    font-size: 14px;
  }

  .eu-badge {
    font-size: 10px;
    padding: 8px 14px;
  }

  .eu-badge i {
    font-size: 14px;
  }
}