/* ============================================
 * AUTH.CSS — Stili condivisi pagine autenticazione
 * ============================================
 * Usato da: login, registrazione, account,
 * reset-password, verifica-email
 * Segue regola CLAUDE.md #9: no CSS duplicato inline
 */

/* Nelle pagine auth il footer e' di troppo — nascondi */
/* :has() supportato da Safari 15.4+, Chrome 105+, Firefox 121+ */
body:has(.auth-page) .footer {
  display: none;
}
/* Fallback per browser senza :has(): la classe .auth-body va aggiunta al <body> */
body.auth-body .footer {
  display: none;
}

/* Layout pagina auth — centrato verticalmente */
.auth-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

/* Card principale */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  /* Profondita' morbida: la card non e' piu' piatta (4 ott 2026). L'ombra e'
     scura e tenue, non colorata, per non spostarsi verso un viola (regola 5-bis). */
  box-shadow: 0 1px 2px rgba(26, 25, 21, 0.04), 0 12px 32px rgba(26, 25, 21, 0.07);
}
.dark .auth-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Etichetta del campo con il link «Password dimenticata?» accanto. */
.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.label-row .forgot {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-main);
  text-decoration: underline;
  text-decoration-color: #10B981;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

/* Riga di fiducia: chi guarda la foto e' una persona (regola 16). */
.auth-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--text-light);
  text-align: center;
}
.auth-trust svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #047857;
}
.dark .auth-trust svg {
  color: #10B981;
}

/* Piede della card (es. «Non hai un account? Registrati») con separatore. */
.auth-foot {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.auth-foot a {
  color: var(--text-main);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #10B981;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.auth-card h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.auth-card .auth-subtitle {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Form elements */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 0.375rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.form-input:focus {
  border-color: #10B981;
  outline: 2px solid #10B981;
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.form-input:focus:not(:focus-visible) {
  outline: none;
}

.form-input::placeholder {
  color: var(--text-light);
}

/* Select styling */
.form-select {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8985' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  transition: border-color 0.2s;
}

.form-select:focus {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Input con toggle password */
.input-password-wrap {
  position: relative;
}

.input-password-wrap .form-input {
  padding-right: 3rem;
  background: #fff;
  color: #1a1915 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-text-fill-color: #1a1915;
}

.dark .input-password-wrap .form-input {
  background: var(--bg-card, #2d2c28);
  color: #EEECE7 !important;
  -webkit-text-fill-color: #EEECE7;
}

/* Il colore forzato qui sopra (serve a far vedere i pallini) copriva anche il
   segnaposto: «La tua password» sembrava una password gia' scritta. Il
   segnaposto torna grigio come quello dell'email. Chiaro: #6e6b68 su #fff
   5.3:1; scuro: #999791 su #2d2c28, il fondo per cui quel grigio e' scelto. */
.input-password-wrap .form-input::placeholder {
  color: var(--text-light);
  -webkit-text-fill-color: var(--text-light);
  opacity: 1;
}

.password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 2;
}

.password-toggle:hover {
  color: var(--text-main);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

/* Indicatore forza password */
.password-strength {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.password-strength-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.3s;
}

.password-strength-bar.active.weak { background: #EF4444; }
.password-strength-bar.active.medium { background: #F59E0B; }
.password-strength-bar.active.strong { background: #10B981; }

.password-strength-label {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}

/* Riga inline (nome + cognome, ecc.) */
.form-row {
  display: flex;
  gap: 0.75rem;
}

.form-row .form-group {
  flex: 1;
}

/* Bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  /* 48px come i bottoni della home: il dito ci sta anche col guanto */
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Nero dal 30 settembre 2026, come il bottone principale della home, di
   /account e di /convenzione/attiva: un solo bottone principale in tutto il
   sito (15.99:1 nel chiaro, 16.34:1 nello scuro). Dal 12 settembre era verde
   scuro #047857 (5,5:1), prima ancora bianco su #10B981 (2,5:1). */
.btn-primary {
  background: var(--text-main);
  color: var(--bg-main);
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.85;
}

.btn-google {
  background: var(--bg-main);
  color: var(--text-main);
  border: 1.5px solid var(--border);
}

.btn-google:hover:not(:disabled) {
  background: var(--bg-alt);
}

.btn-google svg {
  width: 20px;
  height: 20px;
}

/* Il segnaposto del bottone Google (login, registrazione, risposta-foto; 4 ott
   2026) NON si vede: tiene solo il posto, alto 40px come il bottone ufficiale,
   finche' Google non disegna il suo. Prima per ~0,6 s si vedeva il nostro (48px,
   altro stile) che poi cambiava aspetto e si accorciava: «un altro pulsante» per
   qualche fotogramma, e un piccolo salto della pagina. Non ha un clic suo:
   setupGoogleButton lo nasconde sempre (Google acceso o spento).
   Dal 6 ott 2026 46px: il bottone ufficiale e' ingrandito del 15% (sotto). */
.btn-google.google-segnaposto {
  visibility: hidden;
  min-height: 46px;
  height: 46px;
  padding: 0;
}

/* Il bottone ufficiale Google piu' grande del 15% (scelta di Marco, 6 ott 2026):
   Google non ha una misura sopra «large» (40px). setupGoogleButton lo disegna
   largo quanto lo spazio diviso 1.15, e qui `zoom` lo riporta alla larghezza
   piena: 46px d'altezza, testo nitido (zoom ridisegna, non stira un'immagine). */
.google-grande > * {
  zoom: 1.15;
}

/* Il bottone Google si fa notare come «Esci» nelle demo e la P della home
   (4 ott 2026): un bordo verde che si disegna tutto intorno, resta un attimo e
   sfuma, due volte all'arrivo e poi basta. E' un SVG messo dallo script di
   login.html FUORI dal pulsante ufficiale di Google (che non si tocca: regole del
   marchio), in posizione assoluta: nessun salto di pagina, nessuna richiesta in
   piu'. Niente per chi chiede meno movimento. */
.google-box {
  position: relative;
}
.google-giro {
  position: absolute;
  left: -4px;
  top: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
  overflow: visible;
  display: none;
}
.google-giro rect {
  fill: none;
  stroke: #10B981;
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
@keyframes googleGiro {
  0% { stroke-dashoffset: 100; opacity: 1; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .google-box.richiamo .google-giro { display: block; }
  .google-box.richiamo .google-giro rect { animation: googleGiro 2.4s ease-in-out 2 forwards; }
}

.btn-outline {
  background: none;
  color: var(--text-main);
  /* Bordo VERDE da 2px, come i bottoni secondari della home (30 set 2026).
     Il testo resta scuro: e' lui che si deve leggere. Il valore di riserva
     serve alle pagine che non dichiarano --success (consenso-foto). */
  border: 2px solid var(--success, #10B981);
}

/* Si riempie solo dove c'e' un mouse: sul telefono il tocco lasciava il
   bottone «sotto il puntatore» e restava pieno. */
@media (hover: hover) {
  .btn-outline:hover:not(:disabled) {
    background: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-main);
  }
}

/* Fuoco da tastiera come in home: contorno verde di 2px staccato di 3px,
   al posto dell'anello blu sottile del browser. Solo :focus-visible: il dito
   e il mouse non lo accendono. */
/* .password-toggle ha outline:none per il clic: da tastiera il fuoco si deve
   vedere lo stesso (30 set 2026). */
.btn:focus-visible,
.password-toggle:focus-visible,
.quick-action-btn:focus-visible,
.auth-links a:focus-visible,
.auth-foot a:focus-visible,
.label-row .forgot:focus-visible,
.role-card:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: 3px;
}

.btn-danger-outline {
  background: none;
  color: #EF4444;
  border: 1.5px solid #EF4444;
}

.btn-danger-outline:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.05);
}

/* Divider "oppure" */
.form-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--text-light);
  font-size: 0.8125rem;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Messaggi inline */
.form-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #DC2626;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: none;
}

.form-error.visible {
  display: block;
}

/* Banner errore con azioni (es. email gia' registrata) */
.form-error .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.form-error .btn-primary {
  color: var(--bg-main);
}

.form-error .btn-outline {
  color: var(--text-main);
}

.form-success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #059669;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: none;
}

.form-success.visible {
  display: block;
}

/* Link sotto il form */
.auth-links {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.auth-links a {
  color: var(--text-main);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #10B981;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.auth-links a:hover {
  /* Era #10B981: 2.33:1 sulla card chiara. Resta scuro, e il segno del
     passaggio del mouse e' gia' la sottolineatura verde. */
  color: var(--text-main);
}

/* Badge ruolo */
.role-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.role-badge-genitore { background: #DBEAFE; color: #1D4ED8; }
.role-badge-operatore,
.role-badge-operatore_centro { background: #D1FAE5; color: #065F46; }
.role-badge-dermatologo { background: #FEF3C7; color: #92400E; }
.role-badge-fornitore { background: #E0E7FF; color: #3730A3; }
.role-badge-insegnante { background: #FCE7F3; color: #9D174D; }
.role-badge-dirigente { background: #FDE68A; color: #78350F; }
.role-badge-utente { background: var(--bg-alt); color: var(--text-muted); }

.dark .role-badge-genitore { background: rgba(59, 130, 246, 0.15); color: #93C5FD; }
.dark .role-badge-operatore,
.dark .role-badge-operatore_centro { background: rgba(16, 185, 129, 0.15); color: #6EE7B7; }
.dark .role-badge-dermatologo { background: rgba(245, 158, 11, 0.15); color: #FCD34D; }
.dark .role-badge-fornitore { background: rgba(99, 102, 241, 0.15); color: #A5B4FC; }
.dark .role-badge-insegnante { background: rgba(236, 72, 153, 0.15); color: #F9A8D4; }
.dark .role-badge-dirigente { background: rgba(245, 158, 11, 0.15); color: #FDE68A; }
.dark .role-badge-utente { background: var(--bg-alt); color: var(--text-light); }

/* Profilo account */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-main);
}

.profile-email {
  font-size: 0.875rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sezione sicurezza */
.security-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.security-section h2 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--text-main);
}

.security-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Spinner caricamento */
.auth-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.auth-spinner::after {
  content: '';
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: #10B981;
  border-radius: 50%;
  animation: auth-spin 0.6s linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* Stato centrato (verifica email successo/errore) */
.auth-status {
  text-align: center;
  padding: 1rem 0;
}

.auth-status-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.auth-status-icon.success {
  background: rgba(16, 185, 129, 0.1);
  /* #10B981 faceva 2.13:1 sul chiaro; nello scuro resta il verde chiaro */
  color: #047857;
}

.dark .auth-status-icon.success {
  color: #10B981;
}

.auth-status-icon.error {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.auth-status-icon svg {
  width: 28px;
  height: 28px;
}

/* L'intestazione di stato e' un h1: e' il titolo della pagina, e chi naviga
   con lo screen reader per intestazioni deve trovarlo. L'h1 e' elencato qui
   INSIEME all'h2 perche' `.auth-card h1` lo renderebbe a 1.5rem: senza questa
   riga il tag corretto cambierebbe l'aspetto della pagina. L'h2 resta per le
   pagine che lo usano ancora. */
.auth-card .auth-status h1,
.auth-status h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.auth-status p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

/* Desktop nav auth link */
.nav-auth-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
  text-decoration: none;
}

.nav-auth-link:hover {
  color: var(--text-main);
}

.nav-auth-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #10B981;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--bg-main);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s;
}

.nav-auth-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* Role grid — big touch cards */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.role-card {
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-main);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.role-card:hover {
  border-color: var(--text-light);
}

.role-card.selected {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.06);
}

.role-card-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.3;
}

.role-card.selected .role-card-label {
  /* Era #059669 sul fondo verdino: 3.28:1 in chiaro, 3.39:1 in scuro. La
     scelta la segnano gia' il bordo e il fondo verdi: il nome resta scuro. */
  color: var(--text-main);
}

.role-card-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 0.125rem;
  line-height: 1.3;
}

/* Sulla card scelta il fondo verdino abbassa il contrasto: in scuro #999791
   faceva 4.38:1. Il grigio medio regge nei due temi. */
.role-card.selected .role-card-desc {
  color: var(--text-muted);
}

/* Autocomplete input (citta/regione) */
.autocomplete-wrap {
  position: relative;
}

.autocomplete-wrap .form-input {
  padding-right: 2.5rem;
}

.autocomplete-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
}

.autocomplete-icon svg {
  width: 16px;
  height: 16px;
}

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 50;
  display: none;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
  animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.autocomplete-dropdown.open {
  display: block;
}

.autocomplete-item {
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--text-main);
  transition: background 0.15s;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
  background: var(--bg-alt);
}

.autocomplete-empty {
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-light);
  text-align: center;
}

/* Responsive — card full-width sotto 480px */
@media (max-width: 480px) {
  .auth-page {
    padding: 1.5rem 1rem;
    align-items: flex-start;
    min-height: auto;
    padding-top: 2rem;
  }

  .auth-card {
    border-radius: 14px;
    padding: 1.5rem;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ============================================
 * ACCOUNT PAGE — Layout a tab stile big-tech
 * ============================================ */

/* Pagina account: larghezza standard del sito */
.auth-page.account-page {
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
  min-height: auto;
  padding: 2rem 1.5rem 3rem;
}

/* Card account piu' larga */
.auth-page.account-page .auth-card {
  max-width: 100%;
  width: 100%;
}

/* Header profilo grande */
/* Testata compatta (4 ottobre 2026, Marco: «troppo spazio»): una riga sola.
   Avatar piccolo, ruolo ACCANTO al nome (non sotto), email sotto il nome, poco
   margine: le schede salgono subito. L'avatar e' il verde del sito: bianco su
   #10B981 faceva 2,5:1; su #047857 fa 5,5:1 (al buio #10B981 con testo scuro). */
.account-hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}

.account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.dark .account-avatar { background: #10B981; color: #0f0e0c; }

.account-hero-info {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  column-gap: 0.5rem;
  align-items: center;
}

.account-hero-name {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-hero-email {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.875rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-hero-info .role-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-top: 0;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}
.account-hero-info .role-badge:empty { display: none; }

/* Tab navigation */
.account-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.account-tabs::-webkit-scrollbar {
  display: none;
}

.account-tab:first-child {
  padding-left: 0;
}

.account-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.account-tab:hover {
  color: var(--text-main);
}

.account-tab:focus:not(:focus-visible) {
  outline: none;
}
.account-tab:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: -2px;
}

/* La linguetta attiva ha il colore del TESTO e la linea verde sotto, come i
   titoli delle card della home: #10B981 come colore di un testo sul fondo
   chiaro fa 2.33:1, come linea no (30 settembre 2026). */
.account-tab.active {
  color: var(--text-main);
  border-bottom-color: #10B981;
}
.dark .account-tab.active {
  color: var(--text-main);
  border-bottom-color: #10b981;
}

/* Tab content */
.account-tab-content {
  display: none;
}

.account-tab-content.active {
  display: block;
}

/* Form card raggruppate nel tab profilo */
.form-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.form-card .form-group:last-child {
  margin-bottom: 0;
}

/* Dashboard grid di card */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.dash-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.dash-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-color: var(--text-light);
}

.dark .dash-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.dash-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.dash-card-icon {
  color: var(--text-muted);
  line-height: 0;
  flex-shrink: 0;
}

.dash-card-icon svg {
  width: 18px;
  height: 18px;
}

.dash-card-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-main);
}

.dash-card-value {
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.dash-card-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.dash-card-soon {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* Card cliccabile */
.dash-card.clickable {
  cursor: pointer;
}

.dash-card.clickable .dash-card-link {
  font-size: 0.75rem;
  color: #10B981;
  margin-top: 0.375rem;
  font-weight: 500;
}

/* Storico analisi foto */
.photo-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e5e3);
  border-radius: 14px;
  margin-bottom: 0.625rem;
  transition: box-shadow 0.15s;
}

.photo-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.photo-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-item-thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
}

.photo-item-thumb-empty {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-light);
}

.photo-item-dot {
  display: none;
}

.photo-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border-radius: 6px;
  text-transform: capitalize;
}

.photo-item-badge.positivo { background: #FEE2E2; color: #DC2626; }
.photo-item-badge.negativo { background: #D1FAE5; color: #059669; }
.photo-item-badge.dubbio   { background: #FEF3C7; color: #D97706; }
.photo-item-badge.forfora  { background: #E0F2FE; color: #0369A1; }

.photo-item-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Una foto dello storico che si apre a pagina intera (/risposta-foto):
   l'intera parte di testo e' il link, senza sembrare un link di testo. */
a.photo-item-info {
  color: inherit;
  text-decoration: none;
}
a.photo-item-info:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 2px;
  border-radius: 6px;
}

.photo-item-info {
  flex: 1;
  min-width: 0;
}

.photo-item-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.photo-item-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.photo-item-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
  border-bottom: 2px solid #10B981;
  padding-bottom: 1px;
}

.photo-history-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-light);
  font-size: 0.875rem;
}

/* Sezione sicurezza nel tab */
.security-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.security-card-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.security-card-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.security-card .btn {
  width: auto;
  padding: 0.625rem 1.5rem;
}

/* Badge ruolo colori aggiuntivi */
.role-badge-operatore_sportivo { background: #FEF3C7; color: #92400E; }
.role-badge-operatore_colonie  { background: #FEF3C7; color: #92400E; }
.role-badge-admin { background: #FEE2E2; color: #991B1B; }

.dark .role-badge-operatore_sportivo { background: rgba(245,158,11,0.15); color: #FCD34D; }
.dark .role-badge-operatore_colonie  { background: rgba(245,158,11,0.15); color: #FCD34D; }
.dark .role-badge-admin { background: rgba(239,68,68,0.15); color: #FCA5A5; }

/* ============================================
 * QUICK ACTIONS — Bottoni CTA in cima alla dashboard
 * ============================================ */
.quick-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.quick-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.quick-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.quick-action-primary {
  background: var(--text-main);
  color: var(--bg-main);
  border: none;
  transition: opacity 0.2s;
}

.quick-action-primary:hover {
  opacity: 0.85;
}

.quick-action-secondary {
  background: none;
  color: var(--text-main);
  border: 2px solid var(--success, #10B981);
}

.quick-action-secondary svg {
  color: var(--success, #10B981);
}

@media (hover: hover) {
  .quick-action-secondary:hover {
    background: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-main);
  }
  .quick-action-secondary:hover svg {
    color: inherit;
  }
}

.quick-action-upgrade {
  background: linear-gradient(135deg, #1a1915 0%, #2d2b26 100%);
  color: #fff;
  border: none;
}

.quick-action-upgrade:hover {
  background: linear-gradient(135deg, #2d2b26 0%, #3d3b36 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 25, 21, 0.25);
}

.quick-action-upgrade svg {
  color: #fff;
}

/* ============================================
 * PLAN BANNER — Stato piano e quota
 * ============================================ */
.plan-banner {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.plan-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.plan-banner-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-main);
}

.plan-banner-status {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.875rem;
  border-radius: 20px;
  white-space: nowrap;
}

.plan-banner-status.active {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.plan-banner-status.free {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

.plan-banner-status.expired {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
}

.plan-banner-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.plan-quota-info {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

.plan-quota-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-alt);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.plan-quota-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.plan-quota-fill.green { background: #10B981; }
.plan-quota-fill.yellow { background: #F59E0B; }
.plan-quota-fill.red { background: #EF4444; }

.plan-freemium-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.plan-step {
  padding: 0.875rem 0.75rem;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.15s;
}

.plan-step-label {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.plan-step-desc {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}

.plan-step.current {
  background: rgba(16, 185, 129, 0.06);
  border: 2px solid #10B981;
  color: #059669;
}

.plan-step.next {
  background: var(--bg-main);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
}

.plan-step.next:hover {
  border-color: var(--text-light);
  transform: translateY(-1px);
}

.plan-banner-actions {
  display: flex;
  gap: 0.5rem;
}

.plan-banner-actions .btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ============================================
 * DASH SECTION — Sezione storico analisi
 * ============================================ */
.dash-section {
  margin-bottom: 1.5rem;
}

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.dash-section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-main);
  display: inline-block;
  background: linear-gradient(90deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0) 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  border-radius: 6px;
  animation: highlightSlide 0.8s ease-out 0.3s forwards;
}
@keyframes highlightSlide {
  to { background-size: 100% 100%; }
}

.dash-section-action {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #10B981;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.25rem 0.5rem;
}

.dash-section-action:hover {
  text-decoration: underline;
}

/* Icona download PDF inline nella riga analisi */
.photo-item-pdf {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s;
}

.photo-item-pdf:hover {
  color: #10B981;
}

.photo-item-pdf svg {
  width: 16px;
  height: 16px;
}

/* Confidenza badge */
.photo-item-confidence {
  font-size: 0.6875rem;
  color: var(--text-light);
  margin-left: 0.375rem;
}

/* ============================================
 * STORICO DOMANDE — Conversation items
 * ============================================ */
.conv-list {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.conv-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-left: 3px solid #10B981;
  transition: background 0.15s;
}

.conv-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.conv-item:hover {
  background: rgba(16,185,129,0.04);
}

.conv-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #D1FAE5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dark .conv-item-icon {
  background: rgba(16,185,129,0.15);
  color: #10B981;
}

.conv-item-body {
  flex: 1;
  min-width: 0;
}

.conv-item-text {
  font-size: 0.875rem;
  color: var(--text-main);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.conv-item-date {
  font-size: 0.6875rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}

.conv-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-light);
  font-size: 0.875rem;
}

.conv-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.conv-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #10B981;
  background: none;
  border: 1px solid #10B981;
  border-radius: 8px;
  padding: 0.375rem 0.875rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.conv-cta-btn:hover {
  background: #10B981;
  color: #fff;
}

/* ============================================
 * VERIFY BANNER — Banner verifica email
 * ============================================ */
.verify-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #92400E;
}

.dark .verify-banner {
  color: #FCD34D;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
}

.verify-banner-icon {
  flex-shrink: 0;
  line-height: 0;
}

.verify-banner-icon svg {
  width: 20px;
  height: 20px;
}

.verify-banner-text {
  flex: 1;
}

.verify-banner .btn {
  width: auto;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.15);
  color: #92400E;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.dark .verify-banner .btn {
  color: #FCD34D;
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
}

/* ============================================
 * PAYMENT SUMMARY — Storico pagamenti
 * ============================================ */
.payment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.payment-summary-label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.payment-summary-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
}

.payment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

.payment-item-info {
  flex: 1;
  min-width: 0;
}

.payment-item-desc {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-main);
}

.payment-item-type {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.payment-item-amount {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
}

.payment-item-date {
  font-size: 0.75rem;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

.payment-item-status {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  flex-shrink: 0;
}

.payment-item-status.succeeded {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.payment-item-status.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #92400E;
}

.payment-item-status.failed {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

/* ============================================
 * PLAN GRID — Griglia piani per upgrade
 * ============================================ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

.plan-card {
  background: var(--bg-main);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: center;
}

.plan-card:hover {
  border-color: #10B981;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.1);
}

.plan-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.plan-card-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #10B981;
  margin-bottom: 0.5rem;
}

.plan-card-price span {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
}

.plan-card-features {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.plan-card-hint {
  font-size: 0.6875rem;
  color: var(--text-light);
  margin-top: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.plan-card.expanded .plan-card-hint {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.plan-card-chevron {
  opacity: 0.4;
  transition: transform 0.25s ease, opacity 0.2s;
  flex-shrink: 0;
}

.plan-card.expanded .plan-card-chevron {
  transform: rotate(180deg);
  opacity: 0.7;
}

.plan-card-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
  margin-top: 0;
}

.plan-card.expanded .plan-card-details {
  max-height: 300px;
  opacity: 1;
  margin-top: 0.75rem;
}

.plan-trial-badge {
  display: inline-block;
  background: #ECFDF5;
  color: #059669;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

.dark .plan-trial-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
}

.plan-detail-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.plan-detail-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
  text-align: left;
}

.plan-detail-list li {
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 0.2rem 0;
  line-height: 1.5;
}

.plan-detail-list li::before {
  content: '\2713';
  color: #10B981;
  font-weight: 700;
  margin-right: 0.4rem;
}

.plan-upgrade-btn {
  width: 100%;
  padding: 0.6rem 1rem;
  background: #10B981;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.plan-upgrade-btn:hover {
  background: #059669;
}

/* ============================================
 * PASSWORD CHANGE — Form nel tab sicurezza
 * ============================================ */
.pwd-strength {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.pwd-strength-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.3s;
}

.pwd-strength-bar.active.s1 { background: #EF4444; }
.pwd-strength-bar.active.s2 { background: #F59E0B; }
.pwd-strength-bar.active.s3 { background: #10B981; }
.pwd-strength-bar.active.s4 { background: #059669; }

.pwd-strength-label {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}

/* Responsive account */
@media (max-width: 640px) {
  .auth-page.account-page {
    padding: 1.25rem 1rem 2rem;
  }

  .account-hero {
    gap: 0.625rem;
    margin-bottom: 1rem;
  }

  .account-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.9375rem;
  }

  .account-hero-name {
    font-size: 1rem;
  }

  .dash-grid {
    grid-template-columns: 1fr;
  }

  .account-tab {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }

  .form-card {
    padding: 1rem;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .quick-actions {
    flex-direction: column;
  }

  .plan-banner-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .plan-banner-actions {
    flex-direction: column;
  }

  .plan-banner-actions .btn {
    width: 100%;
  }

  .plan-freemium-steps {
    grid-template-columns: 1fr;
  }

  .verify-banner {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .payment-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }
}

/* L'informativa sotto i pulsanti che creano un account (3 ottobre 2026, art. 13
   GDPR). Colore del testo secondario, link come gli altri della pagina. */
.auth-legale {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.auth-legale a {
  color: var(--text-main);
  text-decoration: underline;
  text-decoration-color: #10B981;
  text-underline-offset: 3px;
}