/* Sign-in card and account buttons shared by every page of the platform.
   The page defines the colour variables (--card-bg, --text-dark, ...). */
#signinGate {
  display: none;
  max-width: 420px;
  margin: 40px auto;
  padding: 32px 24px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,.1));
  text-align: center;
}
#signinGate h2 { margin: 0 0 8px; font-size: 20px; color: var(--text-dark, #1e293b); }
#signinGate p { margin: 0 0 20px; font-size: 14px; color: var(--text-muted, #64748b); line-height: 1.5; }
#signinGate .gate-msg { color: #dc2626; font-weight: 600; margin-bottom: 14px; display: none; }
#signinGate button, #signinGate a.gate-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--accent-blue, #2563eb); color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
body.signed-out header .nav-tabs, body.signed-out .stats-bar, body.signed-out #userBanner,
body.signed-out .theme-toggle-btn { display: none !important; }
body.signed-out .view-section, body.signed-out #filterToolbar, body.signed-out #appBody { display: none !important; }
.signout-btn {
  margin-left: 12px; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--border-color, #e2e8f0);
  background: transparent; color: var(--text-dark, #1e293b); font-size: 12px; font-weight: 600; cursor: pointer;
}

/* The full-screen version used by the classic tool pages. */
#signinGate.overlay {
  position: fixed; inset: 0; z-index: 100000; margin: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none;
  background: var(--bg-main, #f8fafc); padding: 24px; align-items: center; justify-content: center;
}
#signinGate .gate-card {
  width: 100%; max-width: 420px; padding: 32px 24px; text-align: center;
  background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px;
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,.1));
}
body.dark-mode #signinGate.overlay { background: #0f172a; }
body.dark-mode #signinGate .gate-card { background: #1e293b; border-color: #334155; }
body.dark-mode #signinGate h2 { color: #e2e8f0; }