/* Pagine fuori dalla chat (accesso, profilo, testi legali) e parti comuni. Colori da theme.css. */
body { background: var(--wc-bg); }

/* Marchio: quadrato col colore d'accento del tema e fumetto bianco, accanto al nome dell'app. */
.auth-card .brand, .navbar-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-card .brand::before, .navbar-brand::before { content: ""; width: 2.1rem; height: 2.1rem; border-radius: 12px; flex: 0 0 auto; background: url(/img/bubble.svg) center / 58% no-repeat, var(--wc-accent); }
.auth-card .brand::before { width: 2.5rem; height: 2.5rem; border-radius: 14px; }

/* Barre in alto delle pagine semplici: niente fascia bianca, il marchio sta sullo sfondo. */
.navbar.bg-body { background-color: transparent !important; }
.navbar.border-bottom { border-bottom: 0 !important; }

/* Accesso e registrazione: scheda arrotondata su uno sfondo con sfumature leggere dell'accento. */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(40rem 30rem at 12% 8%, rgba(var(--wc-accent-rgb), .16), transparent 60%),
              radial-gradient(36rem 28rem at 92% 92%, rgba(var(--wc-accent-rgb), .12), transparent 60%); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card.card, .page-narrow .card { border: 0; border-radius: var(--wc-radius); }
.auth-card.shadow-sm, .page-narrow .card.shadow-sm { box-shadow: var(--wc-shadow) !important; }
.auth-card .form-control { border-radius: 14px; padding: .6rem .9rem; }
.auth-card .btn { border-radius: 14px; padding: .6rem 1rem; font-weight: 700; }
.divider { display: flex; align-items: center; gap: .75rem; color: var(--wc-muted); font-size: .875rem; margin: 1.25rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--wc-border); }
.page-narrow { max-width: 640px; }
.page-narrow .card.border-danger { border: 1px solid var(--wc-danger) !important; }

/* Foto profilo nella pagina Profilo. */
.profile-avatar { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--wc-accent-soft); color: var(--wc-accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 800; overflow: hidden; flex: 0 0 auto; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }