/* =====================================================================
   Accesso / Crea account — un passo leggero, non un muro.
   ===================================================================== */

.acc { display: flex; flex-direction: column; gap: var(--space-4); max-width: 460px; margin: 0 auto; padding: var(--space-2) 0 var(--space-7); }
.acc-head { display: flex; flex-direction: column; gap: var(--space-2); }
.acc-head__badge {
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 19px;
    background: linear-gradient(160deg, #F1667A 0%, #C22E44 100%); color: #fff; font-size: 1.5rem;
    box-shadow: 0 16px 30px -16px rgba(194, 46, 68, 0.95);
}
.acc-head__title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem); font-weight: 900; line-height: 1.08; color: var(--color-primary); }
.acc-head__sub { color: var(--color-text-muted); font-weight: var(--fw-bold); }

.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--radius-pill); background: var(--color-surface-alt); box-shadow: inset 0 0 0 1px var(--color-border); }
.acc-tab {
    display: grid; place-items: center; min-height: 46px; border-radius: var(--radius-pill);
    color: var(--color-primary); font-weight: var(--fw-heavy); text-decoration: none;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.acc-tab.is-active { background: #fff; box-shadow: var(--shadow-card); color: var(--color-accent-strong); }

.acc-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border); }
.acc-form .cake-cta { width: 100%; }
.acc-hint { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.acc-pass { position: relative; display: block; }
.acc-pass .cake-input { padding-right: 56px; }
.acc-pass__toggle {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: grid; place-items: center; width: var(--touch-min); height: var(--touch-min);
    border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer;
}
.acc-pass__toggle[aria-pressed="true"] { color: var(--color-accent-strong); }

.acc-link { align-self: center; font-weight: var(--fw-heavy); color: var(--color-accent-strong); }