/* ════════════════════════════════════════════════════════════════════════
   Pagine auth (allauth) — design "Modern Minimal — dark": card centrata su
   sfondo scuro, indipendente dal tema chiaro dell'app. Usata da login, signup,
   reset password, ecc. Richiede deepforge.css (font + --df-*).
   ════════════════════════════════════════════════════════════════════════ */

html.login-dark, .login-page {
    --lg-bg: oklch(0.2046 0 0);
    --lg-card: oklch(0.2686 0 0);
    --lg-fg: oklch(0.9219 0 0);
    --lg-muted: oklch(0.7155 0 0);
    --lg-border: oklch(0.3715 0 0);
    --lg-input: oklch(0.2393 0 0);
    --lg-primary: oklch(0.6231 0.1880 259.8145);
    --lg-primary-fg: oklch(1 0 0);
    --lg-danger: oklch(0.7040 0.1900 25.3313);
}
.login-page {
    margin: 0; min-height: 100vh; display: flex; align-items: center;
    justify-content: center; padding: 1.5rem; position: relative; overflow: hidden;
    background: var(--lg-bg); color: var(--lg-fg); font-family: var(--df-font);
}
/* Sfondo animato (Vanta FOG): dietro alla card, copre tutta la viewport. */
#vanta-bg { position: fixed; inset: 0; z-index: 0; }
.login-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 400px; background: var(--lg-card);
    border: 1px solid var(--lg-border); border-radius: 12px;
    padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* ─── Variante "glass" + split (logo a destra) — usata dalla login ──────── */
.login-card.glass {
    background: rgba(40, 40, 46, 0.45);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
}
.login-brand { display: flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
    color: var(--lg-primary); margin-bottom: 1.25rem; }
.login-brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.login-brand .brand-name { color: var(--lg-primary); }
.login-brand .brand-tagline {
    font-family: "Public Sans", sans-serif; font-weight: 500; font-size: 8px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--lg-muted);
    margin-top: .2rem;
}
.login-brand .brand-logo { height: 48px; width: auto; margin-left: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.login-card h1 { margin: 0 0 .35rem; font-size: 1.5rem; }
.login-sub { margin: 0 0 1.5rem; color: var(--lg-muted); font-size: .9rem; }
.login-field { margin-bottom: 1rem; }
.login-field label { display: block; font-size: .8125rem; font-weight: 500;
    margin-bottom: .4rem; color: var(--lg-fg); }
.login-card input[type=text], .login-card input[type=email],
.login-card input[type=password] {
    width: 100%; padding: .6rem .75rem; border-radius: var(--df-radius);
    /* Glass translucido, un filo più scuro della card (lascia intravedere il fog). */
    background: rgba(8, 10, 18, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--lg-fg); font-size: .9rem; font-family: inherit;
}
.login-card input:focus { outline: none; border-color: var(--lg-primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--lg-primary), transparent 75%); }
.login-row { display: flex; align-items: center; justify-content: space-between; }
.login-row a { color: var(--lg-primary); font-size: .8125rem; text-decoration: none; }
.login-row a:hover { text-decoration: underline; }
.login-remember { display: flex; align-items: center; gap: .45rem;
    color: var(--lg-muted); font-size: .85rem; margin: .25rem 0 1.25rem; }
.login-remember input { accent-color: var(--lg-primary); }
.login-btn {
    width: 100%; padding: .65rem 1rem; border: 0; border-radius: var(--df-radius);
    background: var(--lg-primary); color: var(--lg-primary-fg);
    font-weight: 600; font-size: .95rem; cursor: pointer; font-family: inherit;
}
.login-btn:hover { background: color-mix(in oklch, var(--lg-primary), black 12%); }
.login-foot { margin-top: 1.5rem; text-align: center; color: var(--lg-muted);
    font-size: .85rem; }
.login-foot a { color: var(--lg-primary); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }
.login-errors { background: color-mix(in oklch, var(--lg-danger), transparent 85%);
    border: 1px solid var(--lg-danger); color: var(--lg-danger);
    border-radius: var(--df-radius); padding: .6rem .75rem; margin-bottom: 1rem;
    font-size: .85rem; }
.login-errors ul { margin: 0; padding-left: 1.1rem; }
.login-help { color: var(--lg-muted); font-size: .9rem; margin: 0 0 1.25rem; }