/* Login screen styling. Scoped to #login so the app itself is unchanged. */
#login { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: auto;
  background:
    radial-gradient(circle at 15% 10%, rgba(37,99,235,.55) 0, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(124,58,237,.5) 0, transparent 40%),
    #0b1020; }
#login.hidden { display: none !important; }
#login .card { width: 100%; max-width: 400px; box-sizing: border-box; background: rgba(255,255,255,.97);
  border-radius: 18px; padding: 32px 28px; text-align: center; color: #111;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: cc-in .5s ease both; }
@keyframes cc-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
#login h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.2;
  background: linear-gradient(90deg, #2563eb, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
#login p { color: #4b5563; line-height: 1.5; margin: 0 0 18px; font-size: 15px; }
#login .cc-login-features { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; color: #374151; font-size: 14px; }
#login .cc-login-features li { padding: 6px 0; }
#login .cc-login-features li::before { content: "\2713"; color: #16a34a; font-weight: 700; margin-right: 8px; }
#login .gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 13px 16px; border-radius: 12px; border: 1px solid #d1d5db; background: #fff; color: #111;
  font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease; }
#login .gbtn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.15); }
#login .gbtn:active { transform: translateY(0); }
#login .gbtn svg { width: 20px; height: 20px; flex: 0 0 20px; }
#login .err { color: #dc2626; margin-top: 12px; font-size: 14px; }
@media (max-width: 480px) {
  #login .card { padding: 24px 20px; }
  #login h1 { font-size: 24px; }
}