*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root { --brand: #1e40af; --brand-light: #3b82f6; --text: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --radius: 8px; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f4f8; color: var(--text); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
  .signin-card { background: white; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.1); padding: 2.5rem; width: 100%; max-width: 420px; text-align: center; }
  .signin-card h1 { font-size: 1.5rem; margin-bottom: .25rem; }
  .signin-card p { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; }
  .signin-card .logo { font-size: 2rem; margin-bottom: .5rem; }
  .social-btn { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: white; font-size: .95rem; font-weight: 600; cursor: pointer; transition: all .15s; margin-bottom: .75rem; text-decoration: none; color: var(--text); }
  .social-btn:hover { background: #f8fafc; border-color: var(--brand-light); box-shadow: 0 2px 8px rgba(59,130,246,.15); }
  .social-btn svg { width: 20px; height: 20px; }
  .divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--text-muted); font-size: .8rem; }
  .divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
  .error-msg { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: var(--radius); padding: .5rem .75rem; font-size: .85rem; margin-bottom: 1rem; }
  .pending-msg { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; border-radius: var(--radius); padding: .75rem; font-size: .85rem; margin-bottom: 1rem; }
  .success-msg { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: .5rem .75rem; font-size: .85rem; margin-bottom: 1rem; }
  .form-input { width: 100%; padding: .6rem .75rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .9rem; font-family: inherit; margin-bottom: .6rem; outline: none; transition: border-color .15s, box-shadow .15s; }
  .form-input:focus { border-color: var(--brand-light); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
  .submit-btn { width: 100%; padding: .7rem 1rem; background: var(--brand); color: white; border: none; border-radius: var(--radius); font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s; }
  .submit-btn:hover { background: var(--brand-light); }
  .submit-btn:disabled { opacity: .6; cursor: not-allowed; }
  .link { color: var(--brand); text-decoration: none; font-weight: 500; }
  .link:hover { text-decoration: underline; }
  .footer-text { margin-top: 1.25rem; font-size: .85rem; color: var(--text-muted); }
  .pending-card { padding: 3rem; max-width: 480px; }
  .pending-card h1 { font-size: 1.3rem; margin-bottom: .5rem; }
  .pending-card p { color: #64748b; font-size: .9rem; line-height: 1.6; margin-bottom: 1rem; }
  .pending-icon { font-size: 3rem; margin-bottom: 1rem; }
  .pending-back-link { color: #1e40af; }