/* =============================================================================
   sf-auth.css — styles for the shared email one-time-code sign-in modal.
   Extracted from qr-code-generator.css so every tool on the site can load the
   same sign-in dialog without pulling in a generator-specific stylesheet.
   ============================================================================= */

/* ----- Sign-in modal ----- */
.sfa-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(23,18,43,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}

.sfa-overlay.show{opacity:1;visibility:visible}

.sfa-modal{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;border-radius:var(--rl);padding:34px 30px 28px;box-shadow:0 40px 90px -30px rgba(23,18,43,.7);
  transform:translateY(18px) scale(.98);transition:transform .32s cubic-bezier(.22,.8,.24,1);text-align:center}

.sfa-overlay.show .sfa-modal{transform:none}

.sfa-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;color:var(--ink4);transition:background .25s,color .25s}

.sfa-close:hover{background:rgba(91,61,245,.08);color:var(--ink)}

.sfa-close svg{width:16px;height:16px}

.sfa-mark{width:50px;height:50px;border-radius:15px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--pl),var(--pd));color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--fd);font-weight:800;font-size:1.15rem;
  box-shadow:0 10px 24px -8px rgba(91,61,245,.6)}

.sfa-title{font-family:var(--fd);font-weight:600;font-size:1.45rem;color:var(--ink);line-height:1.25;margin-bottom:8px}

.sfa-lede{font-size:.86rem;color:var(--ink3);line-height:1.6;margin-bottom:22px}

.sfa-step{display:flex;flex-direction:column;gap:8px;text-align:left}

.sfa-step[hidden]{display:none}

.sfa-label{font-family:var(--fu);font-size:.75rem;font-weight:600;color:var(--ink2)}

.sfa-input{width:100%;padding:13px 15px;border-radius:12px;border:1.5px solid rgba(91,61,245,.18);
  background:#fff;font-family:var(--fb);font-size:.92rem;color:var(--ink);transition:border-color .25s,box-shadow .25s}

.sfa-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(91,61,245,.14)}

.sfa-code{text-align:center;font-family:var(--fu);font-size:1.6rem;font-weight:700;letter-spacing:.5em;
  padding-left:.5em;text-indent:.5em}

.sfa-err{min-height:1.1em;font-family:var(--fu);font-size:.74rem;font-weight:600;color:var(--red);line-height:1.4}

.sfa-btn{margin-top:4px;width:100%;padding:14px 24px;border-radius:999px;font-family:var(--fu);font-weight:600;
  font-size:.88rem;color:#fff;background:linear-gradient(120deg,var(--pl),var(--purple) 55%,var(--pd));
  box-shadow:0 14px 30px -12px rgba(91,61,245,.6);transition:transform .3s,box-shadow .3s,opacity .3s}

.sfa-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(91,61,245,.75)}

.sfa-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.sfa-sentto{font-size:.82rem;color:var(--ink3);line-height:1.5;margin-bottom:4px;word-break:break-word}

.sfa-foot{display:flex;justify-content:space-between;gap:12px;margin-top:4px;flex-wrap:wrap}

.sfa-link{font-family:var(--fu);font-size:.76rem;font-weight:600;color:var(--purple);padding:4px 0;
  background:none;border:none;transition:color .25s}

.sfa-link:hover:not(:disabled){color:var(--pd);text-decoration:underline}

.sfa-link:disabled{color:var(--ink4);cursor:default}

.sfa-privacy{margin-top:20px;padding-top:16px;border-top:1px solid rgba(91,61,245,.1);
  font-size:.73rem;color:var(--ink3);line-height:1.6;text-align:left}

.sfa-privacy strong{color:var(--ink2);font-weight:600}

.dash-gate .sfa-mark{margin-bottom:18px}