/* Sign-in, plan choice and account panels inside the membership dialog.
   Uses the app's theme variables so every appearance works. */
.plan-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 8px}
.plan-choice{display:grid;gap:4px;text-align:left;padding:14px 16px;min-height:64px;border-radius:12px}
.plan-choice strong{font-family:'Space Grotesk',sans-serif;font-size:1rem}
.plan-choice span{font-size:.78rem;opacity:.85}
.account-form{display:grid;gap:8px;max-width:420px;margin:18px 0}
.account-form label{font-size:.8rem;color:var(--muted)}
.account-form input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 12px;min-height:44px}
.account-form input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.account-or{font-size:.8rem;color:var(--muted);margin:4px 0}
.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.account-notice{border-left:3px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:0 8px 8px 0;font-size:.9rem}
.account-warning{border-left:3px solid var(--secondary,var(--accent));padding:8px 12px;font-size:.9rem}
.account-spinner{color:var(--muted)}
.account-spinner::before{content:'';display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:account-spin 1s linear infinite}
@keyframes account-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.account-spinner::before{animation:none}}
@media(max-width:600px){.plan-choices{grid-template-columns:1fr}}
.membership-dialog .small a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Welcome to Pro */
.welcome-unlocks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 6px;padding:0}
.welcome-unlocks li{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft);opacity:0;transform:translateY(8px);animation:welcome-in .45s ease forwards;animation-delay:calc(.35s + var(--i)*.18s)}
.welcome-unlocks strong{font-family:'Space Grotesk',sans-serif;color:var(--accent)}
.welcome-unlocks span{font-size:.8rem;color:var(--muted)}
.welcome-try-label{margin:18px 0 8px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.welcome-try{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.welcome-try button{display:grid;gap:2px;text-align:left;padding:12px 14px;border-radius:12px;min-height:58px}
.welcome-try span{font-size:.75rem;opacity:.85}
.welcome-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit}
.membership-dialog.is-celebrating{animation:welcome-pop .5s ease}
@keyframes welcome-in{to{opacity:1;transform:none}}
@keyframes welcome-pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.welcome-unlocks li{animation:none;opacity:1;transform:none}.membership-dialog.is-celebrating{animation:none}}
@media(max-width:600px){.welcome-unlocks,.welcome-try{grid-template-columns:1fr}}