/* Schermata login simulata + nascondi l'app finché non si accede */
body.pre-login #topbar,
body.pre-login #view { display: none; }

.login-screen {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
}
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-7);
  width: 420px; max-width: 92vw;
  text-align: center;
}
.login-brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-xl); color: var(--coop-red); letter-spacing: .5px; margin-bottom: var(--sp-6); }
.login-title { font-size: var(--fs-2xl); color: var(--ink-1); margin-bottom: var(--sp-2); }
.login-sub { font-size: var(--fs-md); color: var(--ink-3); margin-bottom: var(--sp-6); }
.login-roster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.login-persona {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-soft); border: 1px solid var(--border-mid); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font: inherit; cursor: pointer; text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.login-persona:hover { border-color: var(--coop-red); background: #fff; }
.login-persona:focus-visible { outline: 2px solid var(--coop-red); outline-offset: 2px; }
.login-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--cc, #888); color: #fff; font-size: var(--fs-sm); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.login-name { font-weight: 600; color: var(--ink-1); font-size: var(--fs-base); }