/* Log in and sign up: the app's own tokens, field and pop-up button, on one card. */
:root{
  --bg2:#F7FBFD;--card:#ffffff;--ink:#14181D;--sub:#4F6573;--muted:#5B7280;--dim:#5C7686;
  --tan:#7FA6B8;--tan-lt:rgba(127,166,184,.14);--border:rgba(42,62,75,.1);
  --band:color-mix(in srgb,var(--muted) 6%,var(--card));--track:color-mix(in srgb,var(--ink) 3.5%,transparent);
  --up:#3a6a52;--down:#9e2f2f;--pri:#4f6275;
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-press:cubic-bezier(.3,.5,.2,1);--ease-panel:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@property --press{syntax:'<number>';inherits:false;initial-value:1;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{background:var(--bg2);color:var(--ink);font:400 14px 'Fira Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 16px;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;color:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.brand{display:flex;align-items:center;gap:11px;margin-bottom:28px;font:700 21px 'Outfit',sans-serif;letter-spacing:.01em;color:var(--ink);text-decoration:none;}
.brand svg{width:34px;height:34px;flex-shrink:0;}

.card{width:min(440px,100%);background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,24,29,.03),0 12px 32px rgba(20,24,29,.05);animation:cardIn .5s var(--ease-panel);}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hd{padding:26px 28px 22px;border-bottom:1px solid var(--border);}
.hd h1{font:600 26px/1.15 'Lora',Georgia,serif;letter-spacing:.01em;}
.hd p{margin-top:8px;font:400 14.5px/1.45 'Fira Sans',sans-serif;color:var(--sub);}

form{display:flex;flex-direction:column;gap:18px;padding:24px 28px 28px;}
.f{display:flex;flex-direction:column;gap:7px;}
.f > span:first-child{font:500 13.5px 'Fira Sans',sans-serif;color:var(--sub);}
.in{position:relative;display:block;}
.field{display:block;width:100%;height:46px;padding:0 14px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:9px;background:var(--card);outline:none;
  font:400 15.5px/20px 'Outfit',sans-serif;color:var(--ink);caret-color:var(--ink);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);}
.field::placeholder{color:var(--dim);}
.field:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);}
.field:focus{border-color:var(--tan);box-shadow:0 0 0 3px var(--tan-lt);}
.field[aria-invalid="true"]{border-color:color-mix(in srgb,var(--down) 55%,transparent);}
.at i{position:absolute;left:14px;top:50%;translate:0 -50%;font:500 15.5px 'Outfit',sans-serif;font-style:normal;color:var(--dim);pointer-events:none;}
.at .field{padding-left:31px;}
.pw .field{padding-right:64px;}
.show{position:absolute;right:6px;top:50%;translate:0 -50%;height:34px;padding:0 10px;border-radius:7px;font:600 13px 'Outfit',sans-serif;color:var(--sub);
  transition:background .2s var(--ease-out),color .2s var(--ease-out);}
.show:hover{background:var(--band);color:var(--ink);}
.hint{font:400 12.5px 'Fira Sans',sans-serif;color:var(--muted);}
.err{min-height:20px;font:500 13.5px/20px 'Fira Sans',sans-serif;color:var(--down);}
.err:empty{min-height:0;}

/* the pop-up button, filled */
.fbw{position:relative;display:flex;margin-top:4px;}
.fb{width:100%;height:48px;padding:0 18px;border-radius:9px;background:var(--pri);border:1px solid transparent;color:#fff;cursor:pointer;
  font:600 16px 'Outfit',sans-serif;transition:background .15s var(--ease-out),--press .19s var(--ease-press);}
.fb:not(:disabled):hover{scale:var(--press);background:color-mix(in srgb,var(--pri) 90%,#000);}
.fb:not(:disabled):active:hover{--press:.985;}
.fb-sz{visibility:hidden;white-space:nowrap;}
.fb-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;pointer-events:none;font:600 16px 'Outfit',sans-serif;color:#fff;padding-bottom:.7px;}
.fb-grp{display:inline-flex;align-items:baseline;}
.fb-st{font-size:16px;}
.fb-tx{font-size:calc(16px * var(--press));transition:--press .19s var(--ease-press);}
.fb:not(:disabled):active:hover + .fb-in .fb-tx{--press:.985;}
.fb:disabled{cursor:default;opacity:.6;}

.ft{display:flex;align-items:center;justify-content:center;gap:6px;height:58px;border-top:1px solid var(--border);background:var(--band);font:400 14px 'Fira Sans',sans-serif;color:var(--sub);}
.ft a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 25%,transparent);text-underline-offset:3px;
  transition:text-decoration-color .2s var(--ease-out);}
.ft a:hover{text-decoration-color:var(--ink);}
.note{margin-top:22px;max-width:440px;text-align:center;font:400 13px/1.5 'Fira Sans',sans-serif;color:var(--muted);}

@media (prefers-reduced-motion: reduce){ .card{animation:none;} }