/* ============================================================================
 * sf-auth-ui.css — login modal. Uses SnapForge's existing CSS variables
 * (--ink, --paper, --surface, --lime, --line, --muted, --disp, --font),
 * so it automatically matches the current theme, including dark mode.
 * ========================================================================== */
#sf-auth-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; }
#sf-auth-modal.show { display: flex; }
#sf-auth-modal .sfa-backdrop { position: absolute; inset: 0; background: rgba(10,10,14,.55); backdrop-filter: blur(6px); }

#sf-auth-modal .sfa-card {
  position: relative; z-index: 1; width: min(92vw, 400px);
  background: var(--surface, #fff); color: var(--ink, #15150f);
  border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 22px;
  padding: 30px 26px 24px; text-align: center;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.55);
  font-family: var(--font, system-ui, sans-serif);
  animation: sfaIn .26s cubic-bezier(.22,1,.36,1);
}
@keyframes sfaIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

#sf-auth-modal .sfa-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line, rgba(0,0,0,.1)); background: transparent; color: var(--muted, #888);
  cursor: pointer; font-size: 13px; line-height: 1; transition: .15s;
}
#sf-auth-modal .sfa-close:hover { background: var(--ink, #15150f); color: var(--paper, #fff); border-color: var(--ink, #15150f); }

#sf-auth-modal .sfa-mark { width: 46px; height: 46px; margin: 2px auto 14px; border-radius: 14px; background: var(--lime, #c6ff8f); display: grid; place-items: center; }
#sf-auth-modal .sfa-mark span { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #15150f; }

#sf-auth-modal h3 { font-family: var(--disp, var(--font)); font-weight: 700; font-size: 22px; margin: 0 0 6px; color: var(--ink, #15150f); }
#sf-auth-modal .sfa-sub { margin: 0 0 20px; font-size: 13.5px; color: var(--muted, #777); line-height: 1.5; }

#sf-auth-modal .sfa-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--surface, #fff); color: var(--ink, #15150f);
  transition: .15s; margin-bottom: 10px; font-family: inherit;
}
#sf-auth-modal .sfa-btn:hover { transform: translateY(-1px); }
#sf-auth-modal .sfa-google { background: #fff; color: #1f1f1f; border-color: rgba(0,0,0,.15); }
#sf-auth-modal .sfa-dark { background: var(--ink, #15150f); color: var(--paper, #fff); border-color: var(--ink, #15150f); }
#sf-auth-modal .sfa-ghost { background: transparent; color: var(--muted, #777); }
#sf-auth-modal .sfa-ghost:hover { color: var(--ink, #15150f); border-color: var(--ink, #15150f); }

#sf-auth-modal .sfa-or { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; color: var(--muted, #aaa); font-size: 12px; }
#sf-auth-modal .sfa-or::before, #sf-auth-modal .sfa-or::after { content: ""; flex: 1; height: 1px; background: var(--line, rgba(0,0,0,.1)); }

#sf-auth-modal .sfa-input {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 10px;
  border: 1px solid var(--line, rgba(0,0,0,.15)); background: var(--paper-2, var(--paper, #f7f7f5)); color: var(--ink, #15150f);
  outline: none; transition: border-color .15s; font-family: inherit;
}
#sf-auth-modal .sfa-input:focus { border-color: var(--ink, #15150f); }

#sf-auth-modal .sfa-msg { margin: -2px 0 10px; font-size: 12.5px; color: #c0392b; min-height: 1em; }
#sf-auth-modal .sfa-msg.ok { color: #2e7d32; }
#sf-auth-modal .sfa-fine { margin: 6px 0 0; font-size: 11.5px; color: var(--muted, #999); line-height: 1.45; }