/* =====================================================================
   SYNCROCHECK — pagine senza sessione (accesso, registrazione, recupero)

   Foglio autonomo: qui non si carica ne' Bootstrap ne' syncrocheck.css.
   Sono le pagine piu' viste da chi non e' ancora cliente e da chi arriva
   da un link in un'email: devono aprirsi subito e sembrare la naturale
   continuazione della landing (stesso navy, stesso arancio, stessi font),
   non la schermata di login di un template.

   Struttura:
     1. Font e token        chiaro / scuro, con la stessa logica di theme-init.js
     2. Base
     3. Layout              pannello di marca a sinistra, modulo a destra
     4. Pannello di marca   anteprima del canone, passi, sicurezza
     5. Modulo              campi, bottoni, avvisi, misuratore password
     6. Stati               email inviata, link scaduto, account attivo
     7. Mobile
     8. Movimento ridotto
   ===================================================================== */

/* =====================================================================
   1. FONT E TOKEN
   Serviti dal sito: la CSP (font-src 'self') blocca qualunque CDN.
   ===================================================================== */
@font-face {
    font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/landing/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
    src: url("/assets/landing/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
}

:root {
    color-scheme: light;

    /* Marca: identici alla landing, non si toccano col tema */
    --au-ink:       #0b1224;
    --au-ink-2:     #131c36;
    --au-ink-3:     #1d2848;
    --au-accent:    #e0672b;
    --au-accent-2:  #f39a5b;
    --au-indigo:    #5b5cf0;
    --au-muted-inv: #a9b2c7;
    --au-line-inv:  rgba(255, 255, 255, .12);

    /* Superfici (tema chiaro: la "carta" della landing) */
    --au-bg:          #f7f5f0;
    --au-surface:     #ffffff;
    --au-surface-2:   #f1eee7;
    --au-text:        #0f172a;
    --au-muted:       #5b6475;
    --au-faint:       #8a91a0;
    --au-line:        #e3dfd5;
    --au-field:       #ffffff;
    --au-field-line:  #d9d4c8;
    --au-field-hover: #bdb6a6;

    /* Testo arancio leggibile su carta (contrasto AA), l'arancio pieno resta per gli accenti */
    --au-link:        #b04813;
    --au-focus:       rgba(224, 103, 43, .18);

    --au-ok:          #16854f;
    --au-ok-soft:     #e2f4ea;
    --au-err:         #c02a1b;
    --au-err-soft:    #fdecea;
    --au-err-line:    #f4c7c1;
    --au-warn:        #9a5406;
    --au-warn-soft:   #fdf2dc;
    --au-warn-line:   #f3d9a6;

    --au-btn-bg:      linear-gradient(180deg, #1c2748 0%, #0b1224 100%);
    --au-btn-fg:      #ffffff;
    --au-btn-shadow:  0 14px 30px -14px rgba(11, 18, 36, .75), inset 0 1px 0 rgba(255, 255, 255, .08);

    --au-card-shadow: 0 30px 80px -40px rgba(11, 18, 36, .45), 0 8px 24px -16px rgba(11, 18, 36, .2);

    --au-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --au-sans:  "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --au-r:     14px;
    --au-r-lg:  22px;
    --au-ease:  cubic-bezier(.2, .7, .2, 1);
}

/* Tema scuro: stessa doppia regola di syncrocheck.css, cosi' la scelta
   fatta nel portale (data-theme) vale anche qui. Si ridefiniscono solo i token. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --au-bg:          #080d1a;
        --au-surface:     #0f1729;
        --au-surface-2:   #16203a;
        --au-text:        #eaeef6;
        --au-muted:       #9aa6bd;
        --au-faint:       #6d7a93;
        --au-line:        #1f2a45;
        --au-field:       #0b1222;
        --au-field-line:  #28365a;
        --au-field-hover: #3a4a74;
        --au-link:        #f39a5b;
        --au-focus:       rgba(243, 154, 91, .22);
        --au-ok:          #3fcf8e;
        --au-ok-soft:     #0f2a1f;
        --au-err:         #fb8a80;
        --au-err-soft:    #2c1417;
        --au-err-line:    #5a2328;
        --au-warn:        #f0b45e;
        --au-warn-soft:   #2b2010;
        --au-warn-line:   #584119;
        --au-btn-bg:      linear-gradient(180deg, #ffffff 0%, #ebe7de 100%);
        --au-btn-fg:      #0b1224;
        --au-btn-shadow:  0 14px 30px -14px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(11, 18, 36, .08);
        --au-card-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --au-bg:          #080d1a;
    --au-surface:     #0f1729;
    --au-surface-2:   #16203a;
    --au-text:        #eaeef6;
    --au-muted:       #9aa6bd;
    --au-faint:       #6d7a93;
    --au-line:        #1f2a45;
    --au-field:       #0b1222;
    --au-field-line:  #28365a;
    --au-field-hover: #3a4a74;
    --au-link:        #f39a5b;
    --au-focus:       rgba(243, 154, 91, .22);
    --au-ok:          #3fcf8e;
    --au-ok-soft:     #0f2a1f;
    --au-err:         #fb8a80;
    --au-err-soft:    #2c1417;
    --au-err-line:    #5a2328;
    --au-warn:        #f0b45e;
    --au-warn-soft:   #2b2010;
    --au-warn-line:   #584119;
    --au-btn-bg:      linear-gradient(180deg, #ffffff 0%, #ebe7de 100%);
    --au-btn-fg:      #0b1224;
    --au-btn-shadow:  0 14px 30px -14px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(11, 18, 36, .08);
    --au-card-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.au-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--au-sans);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--au-text);
    background: var(--au-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: var(--au-link); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:where(a, button, input):focus-visible {
    outline: 2px solid var(--au-accent);
    outline-offset: 3px;
    border-radius: 8px;
}

code {
    font-size: .9em;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--au-surface-2);
}

.au-i { width: 18px; height: 18px; flex: none; }

.au-skip {
    position: absolute; left: 16px; top: -60px; z-index: 50;
    padding: 10px 16px; border-radius: 10px;
    background: var(--au-ink); color: #fff;
}
.au-skip:focus { top: 16px; }

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.au-shell {
    display: grid;
    grid-template-columns: minmax(440px, 45%) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.au-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
}

.au-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px clamp(24px, 4vw, 48px);
}

.au-top-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-inline-start: auto;
}

.au-top-link {
    margin: 0;
    font-size: 14px;
    color: var(--au-muted);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.au-theme {
    display: grid; place-items: center;
    inline-size: 40px; block-size: 40px;
    border-radius: 12px;
    border: 1px solid var(--au-line);
    background: var(--au-surface);
    color: var(--au-text);
    cursor: pointer;
    transition: border-color .2s, transform .2s var(--au-ease);
}
.au-theme:hover { border-color: var(--au-field-hover); transform: rotate(-12deg); }
.au-theme-sun { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .au-theme-sun  { display: block; }
    :root:not([data-theme="light"]) .au-theme-moon { display: none; }
}
:root[data-theme="dark"] .au-theme-sun  { display: block; }
:root[data-theme="dark"] .au-theme-moon { display: none; }

.au-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    inline-size: 100%;
    max-inline-size: 460px;
    margin-inline: auto;
    padding: 12px 24px 48px;
    animation: au-rise .7s var(--au-ease) both;
}
.au-page-register .au-panel { max-inline-size: 540px; }

.au-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px clamp(24px, 4vw, 48px) 28px;
    font-size: 13px;
    color: var(--au-faint);
}
.au-legal nav { display: flex; gap: 18px; }
.au-legal a { color: var(--au-muted); font-weight: 500; }

/* =====================================================================
   4. PANNELLO DI MARCA
   ===================================================================== */
.au-aside {
    position: sticky;
    top: 0;
    block-size: 100vh;
    block-size: 100dvh;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 36px clamp(32px, 4vw, 64px) 32px;
    color: #fff;
    background:
        radial-gradient(120% 80% at 100% 0%, var(--au-ink-3) 0%, transparent 55%),
        var(--au-ink);
}

/* Due luci che respirano: arancio in basso, indaco in alto.
   Lente apposta: devono dare profondita', non attirare lo sguardo. */
.au-aside-glow {
    position: absolute; inset: -20%;
    z-index: -1;
    background:
        radial-gradient(38% 34% at 12% 88%, rgba(224, 103, 43, .42), transparent 70%),
        radial-gradient(34% 30% at 88% 12%, rgba(91, 92, 240, .42), transparent 70%),
        radial-gradient(26% 24% at 70% 70%, rgba(63, 193, 201, .14), transparent 70%);
    filter: blur(10px);
    animation: au-drift 22s ease-in-out infinite alternate;
}

.au-aside-grid {
    position: absolute; inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 80%);
            mask-image: radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 80%);
}

/* --- Marchio --- */
.au-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--au-text);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.01em;
    text-decoration: none !important;
}
.au-brand-inv { color: #fff; }
.au-brand-mark {
    display: grid; place-items: center;
    inline-size: 38px; block-size: 38px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #7c3aed);
    box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .8);
}
.au-brand-mark .au-i { width: 20px; height: 20px; stroke-width: 2.2; }
.au-brand-name small {
    display: block;
    margin-top: -2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    opacity: .6;
}
.au-brand-mobile { display: none; }

.au-aside-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-inline-size: 520px;
}

.au-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--au-link);
}
.au-eyebrow::before { content: ""; inline-size: 24px; block-size: 1px; background: currentColor; }
.au-eyebrow-inv { color: var(--au-accent-2); }

.au-aside-title {
    margin: 0;
    font-family: var(--au-serif);
    font-weight: 400;
    font-size: clamp(34px, 3.3vw, 52px);
    line-height: 1.04;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.au-aside-title em { font-style: italic; color: var(--au-accent-2); }

/* --- Vetro --- */
.au-glass {
    position: relative;
    margin: 0;
    padding: 22px 24px;
    border-radius: var(--au-r-lg);
    border: 1px solid var(--au-line-inv);
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
    animation: au-rise .9s .15s var(--au-ease) both;
}

/* --- Anteprima del canone (accesso) --- */
.au-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.au-demo-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--au-muted-inv);
}
.au-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--au-muted-inv);
    border: 1px solid var(--au-line-inv);
}
.au-demo-num {
    margin-top: 6px;
    font-family: var(--au-serif);
    font-size: clamp(46px, 4.4vw, 64px);
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.au-demo-num small { margin-inline-start: 8px; font-size: .5em; color: var(--au-muted-inv); }
.au-demo-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 18px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #7ee2b0;
    background: rgba(63, 207, 142, .12);
}
.au-demo-delta .au-i { width: 14px; height: 14px; }
.au-rot { transform: rotate(45deg); }

.au-bar {
    display: flex;
    gap: 3px;
    block-size: 10px;
    border-radius: 999px;
    overflow: hidden;
}
.au-bar span {
    inline-size: var(--w);
    background: var(--c);
    border-radius: 3px;
    transform-origin: left center;
    animation: au-grow 1.1s .5s var(--au-ease) both;
}
.au-bar span:nth-child(2) { animation-delay: .62s; }
.au-bar span:nth-child(3) { animation-delay: .74s; }
.au-bar span:nth-child(4) { animation-delay: .86s; }

.au-legend {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    font-size: 13px;
    color: var(--au-muted-inv);
}
.au-legend li { display: flex; align-items: center; gap: 8px; }
.au-legend li::before {
    content: ""; inline-size: 8px; block-size: 8px; border-radius: 3px; background: var(--c);
}
.au-legend b { margin-inline-start: auto; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

.au-demo-sep { block-size: 1px; margin: 18px 0 14px; background: var(--au-line-inv); }
.au-demo-sub {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--au-muted-inv);
}

.au-renew { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.au-renew li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-inline: -10px;
    border-radius: 12px;
    font-size: 14px;
    animation: au-rise .6s calc(var(--d) * 110ms + .6s) var(--au-ease) both;
    transition: background .2s;
}
.au-renew li:hover { background: rgba(255, 255, 255, .05); }
.au-renew b { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.au-renew em {
    min-inline-size: 64px;
    text-align: center;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--au-accent-2);
    background: rgba(243, 154, 91, .12);
}
.au-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }

/* --- Passi (registrazione) --- */
.au-steps {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    position: relative;
}
.au-step {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 12px 0;
    animation: au-rise .6s calc(var(--d) * 120ms + .25s) var(--au-ease) both;
}
.au-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px; top: 50px; bottom: -8px;
    inline-size: 1px;
    background: linear-gradient(var(--au-line-inv), transparent);
}
.au-step-n {
    display: grid; place-items: center;
    flex: none;
    inline-size: 35px; block-size: 35px;
    border-radius: 50%;
    font-family: var(--au-serif);
    font-size: 19px;
    color: var(--au-accent-2);
    border: 1px solid rgba(243, 154, 91, .45);
    background: rgba(243, 154, 91, .08);
}
.au-step strong { display: block; font-size: 15.5px; font-weight: 700; }
.au-step div > span { display: block; margin-top: 2px; font-size: 14px; color: var(--au-muted-inv); }

.au-toast-demo {
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
    padding: 14px 18px 14px 14px;
    border-radius: 16px;
    border: 1px solid var(--au-line-inv);
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
    animation:
        au-rise .7s calc(var(--d) * 120ms + .25s) var(--au-ease) both,
        au-float 6s 1.6s ease-in-out infinite;
}
.au-toast-ico {
    display: grid; place-items: center;
    inline-size: 38px; block-size: 38px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--au-accent), var(--au-accent-2));
}
.au-toast-demo strong { display: block; font-size: 14px; }
.au-toast-demo div > span { font-size: 13px; color: var(--au-muted-inv); }

.au-trial {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1b0f06;
    background: linear-gradient(135deg, var(--au-accent-2), #ffd2ad);
}
.au-trial .au-i { width: 16px; height: 16px; }

/* --- Sicurezza (recupero) --- */
.au-secure { display: flex; gap: 24px; align-items: center; padding: 26px; }
.au-secure-seal {
    position: relative;
    display: grid; place-items: center;
    flex: none;
    inline-size: 84px; block-size: 84px;
    border-radius: 50%;
    color: #7ee2b0;
    background: radial-gradient(circle at 30% 30%, rgba(63, 207, 142, .28), rgba(63, 207, 142, .06));
    border: 1px solid rgba(63, 207, 142, .35);
}
.au-secure-ico { width: 38px; height: 38px; stroke-width: 1.6; }
.au-secure-ring {
    position: absolute; inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(63, 207, 142, .5);
    animation: au-ping 2.8s ease-out infinite;
}
.au-secure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.au-secure-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: #dfe5f1;
    animation: au-rise .6s calc(var(--d) * 120ms + .4s) var(--au-ease) both;
}
.au-secure-list .au-i { margin-top: 2px; color: var(--au-accent-2); }

/* --- Rassicurazioni in fondo --- */
.au-trust {
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    border-top: 1px solid var(--au-line-inv);
    font-size: 13px;
    color: var(--au-muted-inv);
}
.au-trust li { display: inline-flex; align-items: center; gap: 8px; }
.au-trust .au-i { width: 16px; height: 16px; color: var(--au-accent-2); }

/* =====================================================================
   5. MODULO
   ===================================================================== */
.au-head { margin-bottom: 28px; }
.au-title {
    margin: 12px 0 10px;
    font-family: var(--au-serif);
    font-weight: 400;
    font-size: clamp(36px, 3.6vw, 48px);
    line-height: 1.04;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.au-sub { margin: 0; font-size: 16px; color: var(--au-muted); text-wrap: pretty; }

.au-form { display: grid; gap: 18px; }

.au-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }

.au-field { display: grid; gap: 7px; min-width: 0; }

.au-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au-label { font-size: 13.5px; font-weight: 700; letter-spacing: .005em; }
.au-link-sm { font-size: 13px; }

.au-control { position: relative; display: flex; align-items: center; }

.au-control-ico {
    position: absolute;
    left: 15px;
    color: var(--au-faint);
    pointer-events: none;
    transition: color .2s;
}

.au-input {
    inline-size: 100%;
    block-size: 52px;
    padding: 0 48px 0 46px;
    border-radius: var(--au-r);
    border: 1.5px solid var(--au-field-line);
    background: var(--au-field);
    color: var(--au-text);
    /* 16px: sotto questa misura iOS ingrandisce la pagina al tocco */
    font: 500 16px/1.2 var(--au-sans);
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
            appearance: none;
}
.au-control-plain .au-input { padding-inline-start: 16px; }
.au-control:not(:has(.au-reveal, .au-match)) .au-input { padding-inline-end: 16px; }

.au-input::placeholder { color: var(--au-faint); opacity: .75; font-weight: 400; }
.au-input:hover { border-color: var(--au-field-hover); }
.au-input:focus {
    outline: none;
    border-color: var(--au-accent);
    box-shadow: 0 0 0 4px var(--au-focus);
}
.au-control:focus-within .au-control-ico { color: var(--au-accent); }

/* L'autocompilazione del browser colora il campo di giallo/azzurro: lo si riporta al tema */
.au-input:-webkit-autofill,
.au-input:-webkit-autofill:hover,
.au-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--au-text);
    -webkit-box-shadow: 0 0 0 100px var(--au-field) inset;
    caret-color: var(--au-text);
    transition: background-color 9999s;
}

.au-field.is-invalid .au-input,
.au-input[aria-invalid="true"] {
    border-color: var(--au-err);
    background: color-mix(in srgb, var(--au-err-soft) 45%, var(--au-field));
}
.au-field.is-invalid .au-input:focus,
.au-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--au-err) 18%, transparent); }
.au-field.is-invalid .au-control-ico { color: var(--au-err); }

.au-hint { margin: 0; font-size: 12.5px; color: var(--au-muted); }
.au-hint:empty { display: none; }
.au-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--au-err);
    animation: au-shake .4s;
}
.au-error::before {
    content: "";
    inline-size: 5px; block-size: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.au-caps {
    display: flex; align-items: center; gap: 6px;
    margin: 0;
    font-size: 12.5px; font-weight: 600;
    color: var(--au-warn);
}
.au-caps .au-i { width: 15px; height: 15px; }
.au-caps[hidden] { display: none; }

/* Suggerimento sul dominio dell'email ("intendevi gmail.com?"), creato da auth.js */
.au-suggest {
    margin: 0;
    font-size: 13px;
    color: var(--au-muted);
    animation: au-rise .3s var(--au-ease) both;
}
.au-suggest button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--au-link);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Mostra password --- */
.au-reveal {
    position: absolute;
    right: 6px;
    display: grid; place-items: center;
    inline-size: 40px; block-size: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--au-faint);
    cursor: pointer;
    transition: color .2s, background .2s;
}
.au-reveal:hover { color: var(--au-text); background: var(--au-surface-2); }
.au-reveal-hide { display: none; }
.au-reveal[aria-pressed="true"] .au-reveal-show { display: none; }
.au-reveal[aria-pressed="true"] .au-reveal-hide { display: block; }

/* --- Coincidenza della seconda password --- */
.au-match {
    position: absolute;
    right: 14px;
    display: grid; place-items: center;
    inline-size: 24px; block-size: 24px;
    border-radius: 50%;
    color: #fff;
    background: var(--au-ok);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.au-match .au-i { width: 14px; height: 14px; stroke-width: 2.6; }
.au-control.is-match .au-match { opacity: 1; transform: scale(1); }
.au-control.is-match .au-input { border-color: color-mix(in srgb, var(--au-ok) 60%, var(--au-field-line)); }
.au-match-hint.is-bad  { color: var(--au-err); font-weight: 600; }
.au-match-hint.is-good { color: var(--au-ok);  font-weight: 600; }

/* --- Misuratore della password --- */
.au-meter { display: grid; gap: 8px; margin-top: 4px; }
.au-meter-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.au-meter-bars span {
    block-size: 5px;
    border-radius: 999px;
    background: var(--au-line);
    transition: background .3s, transform .3s var(--au-ease);
}
.au-meter-label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--au-muted); }

.au-meter[data-level="1"] .au-meter-bars span:nth-child(-n+1) { background: var(--au-err); }
.au-meter[data-level="2"] .au-meter-bars span:nth-child(-n+2) { background: var(--au-accent); }
.au-meter[data-level="3"] .au-meter-bars span:nth-child(-n+3) { background: #d4a017; }
.au-meter[data-level="4"] .au-meter-bars span:nth-child(-n+4) { background: var(--au-ok); }
.au-meter[data-level="1"] .au-meter-label { color: var(--au-err); }
.au-meter[data-level="4"] .au-meter-label { color: var(--au-ok); }

.au-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: var(--au-faint);
}
.au-rules li { display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.au-rules li::before {
    content: "";
    inline-size: 14px; block-size: 14px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    transition: background .2s, border-color .2s;
}
.au-rules li.is-ok { color: var(--au-ok); font-weight: 600; }
.au-rules li.is-ok::before {
    border-color: var(--au-ok);
    background: var(--au-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* --- Bottoni --- */
.au-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    inline-size: 100%;
    min-block-size: 52px;
    padding: 12px 22px;
    border-radius: var(--au-r);
    border: 1.5px solid transparent;
    font: 700 15.5px/1.2 var(--au-sans);
    letter-spacing: .005em;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .2s var(--au-ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.au-btn .au-i { width: 18px; height: 18px; }

.au-btn-primary {
    margin-top: 6px;
    color: var(--au-btn-fg);
    background: var(--au-btn-bg);
    box-shadow: var(--au-btn-shadow);
}
/* Riflesso che attraversa il bottone al passaggio: l'unico vezzo del modulo */
.au-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    inline-size: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: skewX(-18deg);
    transition: left .7s var(--au-ease);
    pointer-events: none;
}
.au-btn-primary:hover { transform: translateY(-1px); color: var(--au-btn-fg); }
.au-btn-primary:hover::after { left: 130%; }
.au-btn-primary:active { transform: translateY(0); }
.au-btn-arrow { transition: transform .25s var(--au-ease); }
.au-btn:hover .au-btn-arrow { transform: translateX(4px); }

.au-btn-line {
    color: var(--au-text);
    background: var(--au-surface);
    border-color: var(--au-line);
}
.au-btn-line:hover { border-color: var(--au-field-hover); color: var(--au-text); transform: translateY(-1px); }

/* Stato di invio: niente doppio clic, e si capisce che qualcosa sta succedendo */
.au-btn-busy, .au-spinner { display: none; }
.au-btn.is-loading { pointer-events: none; }
.au-btn.is-loading .au-btn-label,
.au-btn.is-loading .au-btn-arrow { display: none; }
.au-btn.is-loading .au-btn-busy { display: inline; }
.au-btn.is-loading .au-spinner {
    display: block;
    inline-size: 18px; block-size: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: au-spin .7s linear infinite;
}

.au-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--au-faint);
}
.au-divider::before, .au-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--au-line); }

.au-foot {
    margin: 28px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--au-muted);
}
.au-foot-back { display: inline-flex; align-items: center; gap: 8px; }
.au-foot-back .au-i { width: 16px; height: 16px; }

.au-fineprint { margin: 2px 0 0; text-align: center; font-size: 12.5px; color: var(--au-faint); }

/* --- Avvisi --- */
.au-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: var(--au-r);
    border: 1px solid;
    font-size: 14px;
    font-weight: 500;
    animation: au-rise .4s var(--au-ease) both;
}
.au-alert .au-i { margin-top: 1px; }
.au-alert-err  { color: var(--au-err);  background: var(--au-err-soft);  border-color: var(--au-err-line); }
.au-alert-warn { color: var(--au-warn); background: var(--au-warn-soft); border-color: var(--au-warn-line); text-align: start; }
.au-alert a { color: inherit; text-decoration: underline; }

/* =====================================================================
   6. STATI  (email inviata, link scaduto, account attivato)
   ===================================================================== */
.au-state { text-align: center; }

/* Negli stati il titolo si centra con il resto: un'intestazione a sinistra
   sopra un'icona centrata sembra un errore di impaginazione. */
.au-panel:has(.au-state) .au-head { text-align: center; margin-bottom: 38px; }
.au-state-ico {
    position: relative;
    display: grid; place-items: center;
    inline-size: 84px; block-size: 84px;
    margin: 0 auto 22px;
    border-radius: 26px;
    animation: au-pop .6s cubic-bezier(.3, 1.5, .5, 1) both;
}
.au-state-ico::before {
    content: "";
    position: absolute; inset: -10px;
    border-radius: 32px;
    border: 1.5px solid currentColor;
    opacity: .18;
    animation: au-ping 2.8s 1s ease-out infinite;
}
.au-state-ico .au-i { width: 38px; height: 38px; stroke-width: 1.8; }
/* Il segno si "disegna": 100 copre la lunghezza di tutte le icone usate qui */
.au-state-ico .au-i > * {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: au-draw .9s .35s ease-out forwards;
}
.au-state-ok  .au-state-ico { color: var(--au-ok);  background: var(--au-ok-soft); }
.au-state-err .au-state-ico { color: var(--au-err); background: var(--au-err-soft); }

.au-state-text { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; }
.au-state-mail {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 10px;
    background: var(--au-surface-2);
    border: 1px solid var(--au-line);
    word-break: break-all;
}
.au-state-note { margin: 0 auto; max-inline-size: 38ch; font-size: 14px; color: var(--au-muted); }
.au-state .au-alert { margin: 20px 0 0; }

.au-state-actions { display: grid; gap: 10px; margin-top: 26px; }

.au-checklist {
    list-style: none;
    display: inline-grid;
    gap: 10px;
    margin: 18px auto 0;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--au-line);
    background: var(--au-surface);
    text-align: start;
    font-size: 14px;
    color: var(--au-muted);
}
.au-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.au-checklist .au-i { width: 16px; height: 16px; margin-top: 3px; color: var(--au-ok); stroke-width: 2.4; }

.au-resend { margin: 20px 0 0; font-size: 13px; color: var(--au-faint); }
.au-resend b { color: var(--au-text); font-variant-numeric: tabular-nums; }
.au-resend [hidden] { display: none; }

/* =====================================================================
   7. MOBILE E TABLET
   Il pannello di marca sparisce, ma il navy resta: una fascia in alto
   con il marchio, e il modulo come una scheda appoggiata sopra.
   ===================================================================== */
@media (max-width: 1100px) {
    .au-shell { grid-template-columns: minmax(380px, 42%) minmax(0, 1fr); }
    .au-demo-num { font-size: 48px; }
    .au-secure { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 991.98px) {
    .au-shell { display: block; }
    .au-aside { display: none; }

    .au-main { min-height: 100dvh; }

    .au-top {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 18px 20px 104px;
        color: #fff;
        background:
            radial-gradient(60% 120% at 0% 100%, rgba(224, 103, 43, .38), transparent 60%),
            radial-gradient(50% 110% at 100% 0%, rgba(91, 92, 240, .45), transparent 60%),
            var(--au-ink);
    }
    .au-top::after {
        content: "";
        position: absolute; inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
        background-size: 40px 40px;
        -webkit-mask-image: linear-gradient(#000, transparent);
                mask-image: linear-gradient(#000, transparent);
    }

    .au-brand-mobile { display: inline-flex; color: #fff; font-size: 17px; }
    .au-brand-mobile .au-brand-mark { inline-size: 34px; block-size: 34px; }

    .au-top-link { color: var(--au-muted-inv); font-size: 13.5px; }
    .au-top-link a { color: #fff; }

    .au-theme {
        color: #fff;
        background: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .16);
    }

    .au-panel {
        flex: 0 0 auto;
        justify-content: flex-start;
        inline-size: calc(100% - 24px);
        max-inline-size: 560px;
        margin: -76px auto 0;
        padding: 30px 26px 28px;
        border-radius: 26px;
        background: var(--au-surface);
        border: 1px solid var(--au-line);
        box-shadow: var(--au-card-shadow);
    }
    .au-page-register .au-panel { max-inline-size: 600px; }

    .au-legal { flex-direction: column; justify-content: center; padding: 26px 20px 32px; }
}

@media (max-width: 520px) {
    .au-top-link span { display: none; }
    .au-panel { padding: 26px 20px 24px; border-radius: 22px; }
    .au-grid-2 { grid-template-columns: 1fr; }
    .au-title { font-size: 34px; }
    .au-sub { font-size: 15px; }
    .au-head { margin-bottom: 22px; }
    .au-checklist { display: grid; }
}

@media (min-width: 992px) and (max-height: 760px) {
    /* Portatili bassi: l'anteprima si accorcia prima di tagliare il fondo */
    .au-aside { gap: 20px; padding-block: 28px 24px; }
    .au-aside-title { font-size: 36px; }
    .au-demo-sep, .au-demo-sub, .au-renew { display: none; }
    .au-legend { margin-top: 10px; }
}

/* =====================================================================
   ANIMAZIONI
   ===================================================================== */
@keyframes au-rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes au-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes au-pop   { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes au-draw  { to { stroke-dashoffset: 0; } }
@keyframes au-spin  { to { transform: rotate(360deg); } }
@keyframes au-ping  { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes au-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes au-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { transform: translate3d(3%, -4%, 0) rotate(6deg); }
}
@keyframes au-shake {
    0%, 100% { transform: none; }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* =====================================================================
   8. MOVIMENTO RIDOTTO
   Chi l'ha chiesto al sistema vede tutto subito, fermo.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .au-state-ico .au-i > * { stroke-dashoffset: 0; }
}