/* Login-Overlay, Topbar-User & App-Shell-Sichtbarkeit (CP6/X2) — aus dem inline
 * <style> und den style="display:none"-Attributen von index.html ausgelagert, damit
 * die Style-CSP ohne 'unsafe-inline' auskommt. Inhalt verbatim (inkl. Fallback-Tokens),
 * damit das Aussehen unverändert bleibt. */

/* Login Overlay */
#loginContainer {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-secondary, #f4f5f7);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--bg-primary, #fff);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 380px;
}
.login-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; margin-bottom: 1.5rem;
  font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #1a1a2e);
}
.login-logo span:first-child { font-size: 2rem; }
#loginTitle {
  text-align: center; margin: 0 0 1.5rem;
  font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #1a1a2e);
}
.login-error {
  background: var(--color-danger-light); color: #991b1b;
  border-radius: 6px; padding: 0.6rem 0.8rem;
  font-size: 0.875rem; margin-bottom: 1rem;
}
/* Topbar user info */
#topbarUserArea {
  display: flex; align-items: center; gap: 0.5rem;
}
#topbarUser {
  font-size: 0.875rem; color: var(--text-secondary, #6b7280);
}

/* Initiale/aktive Sichtbarkeit (ehemals inline style="display:none"). login.js
 * schaltet per classList('is-hidden'). ID+Klasse schlägt die display-Regel oben
 * bzw. .app — kein !important nötig. */
#loginContainer.is-hidden,
#appShell.is-hidden { display: none; }