/* AppForze v2.16.62 - superfici pubbliche condivise
 * Accesso, recupero credenziali e presentazione mantengono la stessa identita
 * azzurro, blu e bianco dell'area riservata (allineata a premium-surfaces).
 */

:root {
  --public-ink: #082f58;
  --public-muted: #5d7188;
  --public-blue: #075fae;
  --public-blue-bright: #0878cf;
  --public-cyan: #30a3d8;
  --public-line: rgba(174, 202, 222, .9);
  --public-line-strong: #91b5cf;
  --public-surface: #fff;
  --public-surface-soft: #f5f9fc;
  --public-radius: 8px;
  --login-card-radius: 8px;
  --login-control-radius: 7px;
  --public-shadow: 0 26px 70px rgba(16, 53, 94, .16);
  --public-shadow-soft: 0 5px 16px rgba(8, 47, 88, .055);
  --public-focus: 0 0 0 3px rgba(7, 95, 174, .13);
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:is(.login-page, .reset-page, .landing-page) :is(a, button, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

:is(.login-page, .reset-page, .landing-page) :is(a, button):focus-visible {
  outline: 3px solid rgba(7, 95, 174, .22);
  outline-offset: 3px;
}

:is(.login-page, .reset-page) :is(input, select, textarea) {
  border-color: #b7cad8;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

:is(.login-page, .reset-page) :is(input, select, textarea):hover:not(:disabled) {
  border-color: #91b5cf;
}

:is(.login-page, .reset-page) :is(input, select, textarea):focus {
  border-color: var(--public-blue) !important;
  background: #fff !important;
  box-shadow: var(--public-focus) !important;
  outline: 0;
}

/* Accesso — regole condivise (dettaglio card nel blocco unificato sotto) */
.login-page {
  isolation: isolate;
}

.login-page .login-btn,
.reset-page .login-btn {
  border: 1px solid #075aa4 !important;
  border-radius: var(--login-control-radius) !important;
  background: linear-gradient(135deg, #075aa4, #0878cf) !important;
  box-shadow: 0 8px 18px rgba(7, 95, 174, .18) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.reset-page .login-btn {
  border-radius: var(--public-radius) !important;
}

@media (hover: hover) {
  .login-page .login-btn:hover:not(:disabled),
  .reset-page .login-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(7, 95, 174, .22);
  }
}

/* Recupero, reset e conferma amministratore */
.reset-page {
  padding: 24px !important;
  background:
    radial-gradient(760px 320px at 10% 0%, rgba(9, 104, 216, .1), transparent 58%),
    radial-gradient(680px 300px at 90% 100%, rgba(48, 163, 216, .08), transparent 56%),
    linear-gradient(180deg, #e8f0f7, #f7fafc 58%, #fff) !important;
}

.reset-page .reset-card {
  position: relative;
  width: min(100%, 460px) !important;
  overflow: hidden;
  border: 1px solid var(--public-line) !important;
  border-radius: var(--public-radius) !important;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%) !important;
  box-shadow: var(--public-shadow) !important;
}

.reset-page .reset-card.admin-reauth-card {
  width: min(100%, 420px) !important;
}

.reset-page .reset-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--public-blue), var(--public-cyan));
}

.reset-page .reset-card img {
  max-width: 176px;
}

.reset-page .reset-card h1 {
  color: var(--public-ink);
  letter-spacing: 0;
}

.reset-page .reset-card > p {
  color: var(--public-muted);
  line-height: 1.55;
}

.reset-page .reset-card label {
  display: grid;
  gap: 7px;
  color: #173b5d;
  font-weight: 800;
}

.reset-page .reset-card input {
  min-height: 46px;
  border-radius: var(--public-radius) !important;
}

.reset-page .reset-actions {
  gap: 10px;
}

.reset-page .reset-actions :is(a, button) {
  min-height: 44px;
  border-radius: var(--public-radius) !important;
}

.reset-page .reset-actions a {
  border-color: #b4cad9 !important;
  background: rgba(255, 255, 255, .92) !important;
  color: var(--public-ink) !important;
}

.reset-page :is(.reset-alert, .alert) {
  border-radius: var(--public-radius);
  box-shadow: var(--public-shadow-soft);
}

/* Presentazione */
.landing-page .landing-top {
  border: 1px solid var(--public-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--public-shadow-soft);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.landing-page :is(.top-login, .cta-primary, .cta-secondary) {
  min-height: 44px;
  letter-spacing: 0;
}

.landing-page .video-frame {
  border-radius: 16px !important;
  border-color: var(--public-line) !important;
  box-shadow: var(--public-shadow) !important;
}

.landing-page .flow-step {
  border-radius: 14px;
  border-color: var(--public-line);
}

.landing-page .security-band,
.landing-page .landing-final {
  border-radius: 18px;
  border-color: var(--public-line);
}

.landing-page .security-list li {
  border-radius: 12px;
}

.landing-page .landing-footer {
  border-top-color: rgba(174, 202, 222, .3);
}

@media (hover: hover) {
  .landing-page .flow-step:hover {
    transform: translateY(-2px);
    border-color: rgba(48, 163, 216, .65);
    box-shadow: 0 18px 38px rgba(2, 18, 37, .28);
  }
}

@media (max-width: 700px) {
  .reset-page {
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  }

  .reset-page .reset-card {
    padding: 20px 18px !important;
  }

  .reset-page .reset-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .reset-page .reset-actions :is(a, button) {
    width: 100%;
  }

  .landing-page .landing-top {
    padding: 10px 12px;
  }

  .landing-page .landing-top img {
    width: 132px;
  }

  .landing-page .flow-step {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  :is(.login-page, .reset-page, .landing-page) *,
  :is(.login-page, .reset-page, .landing-page) *::before,
  :is(.login-page, .reset-page, .landing-page) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
 * Login 2.16.62 — atmosfera premium soft + card tondeggiante
 * Layout centrato invariato (logo sopra + card). Niente glass,
 * niente bande navy, niente split panel.
 * Niente radiali bianchi opachi: in 2.16.61 sbiancavano lo sfondo.
 * ============================================================ */

html:has(.login-page),
body:has(.login-page) {
  background: #e3eef7 !important;
  background-color: #e3eef7 !important;
}

.login-page {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(20px, 4vw, 40px) 18px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  /* Atmosfera istituzionale soft, leggibile a pieno viewport (no wash bianco) */
  background-color: #e3eef7 !important;
  background-image:
    radial-gradient(980px 440px at 88% -6%, rgba(48, 163, 216, .16), transparent 58%),
    radial-gradient(860px 400px at 6% 0%, rgba(7, 95, 174, .15), transparent 56%),
    radial-gradient(720px 520px at 50% 110%, rgba(9, 104, 216, .10), transparent 62%),
    linear-gradient(180deg, #d7e6f3 0%, #e3eef7 28%, #ebf3f9 62%, #f0f6fb 100%) !important;
  background-repeat: no-repeat !important;
}

.login-page::before,
.login-page::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  display: block !important;
}

/* Accenti geometrici sottili (tratti blu istituzionali, non muri navy) */
.login-page::before {
  background-color: transparent !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23075fae' stroke-opacity='.08' stroke-width='1.15'%3E%3Cpath d='M-40 140H280L370 290 220 560H-40z'/%3E%3Cpath d='M1640 720H1280L1190 870 1340 1120H1640z'/%3E%3Cpath d='M1120 -50H1490L1620 150 1360 330H1120z'/%3E%3Cpath d='M40 980H360L430 820 280 640'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.login-page::after {
  background-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(8, 47, 88, .035), transparent 22%, transparent 78%, rgba(8, 47, 88, .05)) !important;
  background-repeat: no-repeat !important;
}

.login-page .dot-band {
  display: none !important;
}

.login-page .soft-shape {
  display: none !important;
}

.login-page .login-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(400px, 100%) !important;
  display: grid !important;
  gap: 16px !important;
  justify-items: center !important;
  transform: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.login-page .login-shell::before {
  content: none !important;
  display: none !important;
}

.login-page .brand-panel {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
}

.login-page .af-mark {
  width: min(228px, 70vw) !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 8px 18px rgba(8, 47, 88, .1)) !important;
}

/* Card = pannello premium bianco, tondeggiante (18px), accent sx */
.login-page .login-card {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: none !important;
  padding: 26px 28px 22px !important;
  border: 1px solid var(--public-line) !important;
  border-radius: var(--login-card-radius) !important;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%) !important;
  box-shadow: var(--public-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.login-page .login-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  height: auto !important;
  background: linear-gradient(180deg, var(--public-blue), var(--public-cyan)) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.login-page .login-card h2 {
  margin: 0 0 6px !important;
  color: var(--public-ink) !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.login-page .login-copy {
  display: block !important;
  max-width: 34ch !important;
  margin: 0 auto 18px !important;
  color: var(--public-muted) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.login-page .alert {
  margin: 0 0 14px !important;
  padding: 11px 13px !important;
  border-radius: var(--login-control-radius) !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.login-page .field {
  position: relative !important;
  margin-bottom: 14px !important;
}

/* Label come form-grid area riservata: leggibili, non micro-uppercase */
.login-page .field label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #173b5d !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.login-page .field input {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 44px !important;
  border: 1px solid #b7cad8 !important;
  border-radius: var(--login-control-radius) !important;
  background: #fff !important;
  color: var(--public-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

.login-page .field input::placeholder {
  color: #8aa0b5 !important;
  font-weight: 500 !important;
}

.login-page .field input:hover:not(:disabled) {
  border-color: #9ebbcf !important;
  background: #fff !important;
}

.login-page .field input:focus {
  border-color: var(--public-blue) !important;
  background: #fff !important;
  box-shadow: var(--public-focus) !important;
  outline: 0 !important;
}

.login-page .field-icon {
  position: absolute !important;
  left: 13px !important;
  bottom: 14px !important;
  width: 17px !important;
  height: 17px !important;
  color: #7a90a8 !important;
  opacity: .85 !important;
  transition: color .16s ease, opacity .16s ease !important;
  pointer-events: none !important;
}

.login-page .field:focus-within .field-icon {
  color: var(--public-blue) !important;
  opacity: 1 !important;
}

.login-page .password-eye {
  position: absolute !important;
  right: 3px !important;
  bottom: 2px !important;
  width: 42px !important;
  height: 42px !important;
  color: #7a90a8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: color .16s ease, background-color .16s ease !important;
}

.login-page .password-eye:hover {
  color: var(--public-ink) !important;
  background: rgba(7, 95, 174, .06) !important;
}

/* CTA = btn.primary area riservata, raggio armonizzato alla card */
.login-page .login-btn {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin-top: 4px !important;
  border: 1px solid #075aa4 !important;
  border-radius: var(--login-control-radius) !important;
  background: linear-gradient(135deg, #075aa4, #0878cf) !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 8px 18px rgba(7, 95, 174, .18) !important;
  filter: none !important;
}

@media (hover: hover) {
  .login-page .login-btn:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 24px rgba(7, 95, 174, .22) !important;
    filter: none !important;
  }
}

.login-page .login-btn:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 6px 14px rgba(7, 95, 174, .16) !important;
}

.login-page .login-btn:disabled {
  opacity: .55 !important;
  filter: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.login-page .login-recovery {
  margin: 12px 0 0 !important;
  text-align: center !important;
  font-size: .84rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.login-page .login-recovery a {
  color: var(--public-blue) !important;
  text-decoration: none !important;
  transition: color .16s ease !important;
}

.login-page .login-recovery a:hover {
  color: var(--public-blue-bright) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Strip sicurezza: quiet, senza vetro / linee decorative */
.login-page .login-security {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 16px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(145, 181, 207, .55) !important;
  border-radius: 12px !important;
  background: var(--public-surface-soft) !important;
  color: #0a6b4c !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.login-page .login-security::before,
.login-page .login-security::after {
  content: none !important;
  display: none !important;
}

.login-page .login-security svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  color: #0a7a54 !important;
  opacity: .9 !important;
}

.login-page .login-meta {
  margin: 12px 0 0 !important;
  max-width: none !important;
  color: var(--public-muted) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.login-page .login-presentation {
  margin-top: 4px !important;
  font-size: .8rem !important;
  font-weight: 650 !important;
}

@media (max-width: 560px) {
  .login-page {
    padding: 16px 14px !important;
  }

  .login-page .login-shell {
    width: min(100%, 360px) !important;
    gap: 12px !important;
  }

  .login-page .af-mark {
    width: min(196px, 66vw) !important;
  }

  .login-page .login-card {
    padding: 22px 20px 18px !important;
  }

  .login-page .field input,
  .login-page .login-btn {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

@media (max-height: 680px) {
  .login-page {
    align-items: start !important;
    padding-block: 14px !important;
  }

  .login-page .af-mark {
    width: min(176px, 56vw) !important;
  }

  .login-page .login-card {
    padding: 20px 22px 16px !important;
  }

  .login-page .login-copy {
    margin-bottom: 14px !important;
  }

  .login-page .field {
    margin-bottom: 12px !important;
  }
}

/* ============================================================
 * Login 2.16.65 — rifinitura di coerenza con l'area riservata
 * Stessa famiglia tipografica dell'app (prima il login forzava
 * "Segoe UI"/Arial anche su Mac) e alert nello schema app-shell
 * (bordo 1px + accento sinistro 4px, colori --af-red/--af-amber).
 * Nessuna variazione di layout, colori card o atmosfera.
 * ============================================================ */

body:has(.login-page),
body:has(.reset-page),
.login-page .login-card,
.reset-page .reset-card,
.login-page .login-card :is(input, button),
.reset-page .reset-card :is(input, button) {
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif) !important;
}

/* Alert di accesso = alert app-shell (filetto + barra sinistra) */
.login-page .alert {
  border: 1px solid #bdccda !important;
  border-left-width: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.login-page .alert.error {
  border-left-color: #a8333a !important;
  background: #fff0f1 !important;
  color: #7b2228 !important;
}

.login-page .alert.warning {
  border-left-color: #9a5b00 !important;
  background: #fff7e7 !important;
  color: #704000 !important;
}

/* ============================================================
 * Login 2.16.66 — "Aurora Adriatica": palcoscenico crepuscolare
 * istituzionale (blu #075fae / ciano #30a3d8, mai navy, mai viola).
 * Strati: base blu profonda con nucleo luminoso dietro la card,
 * tre raggi aurora lenti, isoline da carta nautica, lame di luce
 * diagonali, grana filmica e vignettatura. La card resta l'ancora
 * visiva: alone ciano e ombra profonda la sollevano dallo sfondo.
 * Logo su piastra bianca (il marchio e navy: su blu scuro sparirebbe).
 * Animazioni solo transform/opacity; parallasse lieve via rAF,
 * disattivato con prefers-reduced-motion e su dispositivi touch.
 * ============================================================ */

html:has(.login-page),
body:has(.login-page) {
  background: #08417c !important;
  background-color: #08417c !important;
}

.login-page {
  background-color: #08417c !important;
  background-image:
    radial-gradient(1050px 640px at 50% 40%, rgba(76, 178, 238, .42), transparent 68%),
    radial-gradient(1500px 900px at 84% -12%, rgba(48, 163, 216, .30), transparent 62%),
    radial-gradient(1400px 1000px at 6% 112%, rgba(8, 120, 207, .28), transparent 60%),
    linear-gradient(178deg, #0f5ca8 0%, #0b4b8d 46%, #073560 100%) !important;
  background-repeat: no-repeat !important;
}

/* ::before eredita un reset !important (opacity/transform bloccati):
 * le lame di luce vivono sullo span .rays, animabile liberamente. */
.login-page::before {
  background-image: none !important;
}

/* Vignettatura: guida lo sguardo verso la card */
.login-page::after {
  background-image:
    radial-gradient(125% 95% at 50% 42%, transparent 54%, rgba(3, 22, 46, .40) 100%) !important;
}

/* Scena decorativa: contenitore unico per il parallasse */
.login-page .login-scene {
  position: absolute !important;
  inset: -6% !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

.login-page .beam {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.login-page .beam-1 {
  top: 2%;
  left: -16%;
  width: 88vw;
  height: 300px;
  background: linear-gradient(90deg, transparent 4%, rgba(48, 163, 216, .55) 38%, rgba(172, 219, 255, .42) 55%, rgba(48, 163, 216, .38) 72%, transparent 96%);
  filter: blur(52px);
  transform: rotate(-13deg);
  animation: login-beam-1 27s ease-in-out infinite alternate;
}

.login-page .beam-2 {
  top: 34%;
  right: -20%;
  width: 72vw;
  height: 260px;
  background: linear-gradient(90deg, transparent 6%, rgba(9, 116, 196, .5) 40%, rgba(72, 178, 232, .34) 62%, transparent 94%);
  filter: blur(58px);
  transform: rotate(15deg);
  animation: login-beam-2 34s ease-in-out infinite alternate;
}

.login-page .beam-3 {
  bottom: -10%;
  left: -10%;
  width: 96vw;
  height: 320px;
  background: linear-gradient(90deg, transparent 8%, rgba(140, 205, 250, .28) 42%, rgba(255, 255, 255, .18) 58%, transparent 92%);
  filter: blur(64px);
  animation: login-beam-3 41s ease-in-out infinite alternate;
}

/* Lame di luce diagonali: respirano lentissime (solo opacity) */
.login-page .rays {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    linear-gradient(112deg, transparent 44%, rgba(148, 208, 255, .055) 50%, transparent 56%),
    linear-gradient(112deg, transparent 60%, rgba(148, 208, 255, .04) 66%, transparent 72%);
  animation: login-rays 12s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Isoline batimetriche: firma nautico-portuale, quasi impercettibile */
.login-page .chart {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='1.1'%3E%3Cpath d='M330 90C455 90 545 165 545 255 545 350 445 430 330 430 215 430 115 350 115 255 115 165 205 90 330 90Z'/%3E%3Cpath d='M330 20C490 20 625 130 625 255 625 385 480 505 330 505 180 505 35 385 35 255 35 130 170 20 330 20Z'/%3E%3Cpath d='M330 -60C525 -60 705 105 705 255 705 420 515 590 330 590 145 590 -45 420 -45 255 -45 105 135 -60 330 -60Z'/%3E%3Cpath d='M1330 640C1435 640 1520 710 1520 800 1520 895 1425 965 1330 965 1235 965 1140 895 1140 800 1140 710 1225 640 1330 640Z'/%3E%3Cpath d='M1330 555C1470 555 1610 665 1610 800 1610 940 1460 1055 1330 1055 1200 1055 1050 940 1050 800 1050 665 1190 555 1330 555Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-60 690C260 630 520 780 860 705 1180 635 1420 600 1680 665'/%3E%3Cpath d='M-60 800C300 745 560 890 920 815 1240 750 1470 720 1680 775'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .55;
  pointer-events: none;
}

/* Grana filmica: toglie il banding ai gradienti, texture premium */
.login-page .grain {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes login-beam-1 {
  from { transform: rotate(-14deg) translate3d(-4%, -10px, 0) scaleX(1); }
  to { transform: rotate(-10deg) translate3d(5%, 26px, 0) scaleX(1.06); }
}

@keyframes login-beam-2 {
  from { transform: rotate(16deg) translate3d(3%, 12px, 0); }
  to { transform: rotate(12deg) translate3d(-5%, -22px, 0); }
}

@keyframes login-beam-3 {
  from { transform: translate3d(-3%, 0, 0) rotate(2deg); }
  to { transform: translate3d(4%, -30px, 0) rotate(-1deg); }
}

@keyframes login-rays {
  from { opacity: .65; }
  to { opacity: 1; }
}

@keyframes login-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ingresso scenico: shell in dissolvenza (transform e bloccato !important
 * dal reset 2.16.62), piastra logo e card salgono con lieve sfasamento. */
.login-page .login-shell {
  animation: login-fade .55s ease-out both !important;
}

.login-page .brand-panel {
  animation: login-rise .7s cubic-bezier(.2, .75, .25, 1) .04s both !important;
}

.login-page .login-card {
  animation: login-rise .7s cubic-bezier(.2, .75, .25, 1) .12s both !important;
}

/* Marchio su piastra bianca: il logo navy resta leggibile sul blu */
.login-page .brand-core {
  position: relative;
  padding: 13px 26px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow:
    0 24px 55px -16px rgba(2, 18, 40, .5),
    0 4px 14px rgba(2, 18, 40, .28),
    0 0 60px -8px rgba(48, 163, 216, .4);
}

.login-page .af-mark {
  width: min(196px, 62vw) !important;
  filter: none !important;
}

/* Card elevata: ombra profonda + alone ciano che la lega alla scena */
.login-page .login-card {
  border-color: rgba(214, 235, 249, .95) !important;
  box-shadow:
    0 42px 90px -22px rgba(2, 18, 40, .55),
    0 14px 34px -10px rgba(2, 18, 40, .42),
    0 0 120px -12px rgba(48, 163, 216, .45) !important;
}

/* Mobile: meno strati, blur piu economico, stessa atmosfera */
@media (max-width: 700px) {
  .login-page .beam {
    filter: blur(38px);
  }

  .login-page .beam-2 {
    display: none;
  }

  .login-page .beam-1 {
    height: 220px;
  }

  .login-page .beam-3 {
    height: 240px;
  }

  .login-page .chart {
    opacity: .4;
  }
}

/* Movimento ridotto: scena congelata, niente ingresso animato */
@media (prefers-reduced-motion: reduce) {
  .login-page :is(.beam, .rays) {
    animation: none !important;
  }

  .login-page :is(.login-shell, .brand-panel, .login-card) {
    animation: none !important;
  }
}