/* Kelvera accounts — shared design system (matches the marketing site) */
:root{
  --ink:#0e1a24;--ink-2:#0a141c;--surface:#16242f;--surface-2:#1d2e3b;
  --line:rgba(132,151,164,.16);--line-strong:rgba(132,151,164,.28);
  --paper:#eaf0f4;--muted:#8497a4;--muted-2:#62737f;
  --amber:#f0a53c;--amber-lo:#ffc46b;--amber-glow:rgba(240,165,60,.22);
  --red:#F85149;--green:#3FB950;
  --display:'Space Grotesk',sans-serif;--body:'Inter',sans-serif;--mono:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;background:var(--ink);color:var(--paper);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  position:relative;overflow:hidden;
}
/* subtle backdrop: soft amber glow + a faint grid that fades toward the edges */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% -12%, var(--amber-glow), transparent 60%),
    radial-gradient(760px 620px at 92% 112%, rgba(88,166,255,.06), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(132,151,164,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(132,151,164,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 28%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 38%, #000 28%, transparent 76%);
}

.auth{position:relative;z-index:1;width:100%;max-width:404px;
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both}

.brand{display:flex;align-items:baseline;gap:.55rem;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;margin-bottom:2rem}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 12px var(--amber-glow);align-self:center;position:relative}
.brand .dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--amber);animation:ping 2.8s ease-out infinite}
.brand small{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;font-weight:400}

.card{background:linear-gradient(180deg,var(--surface),#13202a);
  border:1px solid var(--line);border-radius:16px;padding:2rem 1.9rem 1.9rem;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04)}

.kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;
  font-size:.66rem;color:var(--amber);display:block;text-align:center;margin-bottom:.7rem}
h1{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;
  text-align:center;margin-bottom:.4rem}
.sub{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}

.seg{position:relative;display:flex;background:var(--ink-2);border:1px solid var(--line);
  border-radius:10px;padding:.28rem;margin-bottom:1.5rem}
.seg button{flex:1;position:relative;z-index:1;background:none;border:none;cursor:pointer;
  font-family:var(--body);font-weight:500;font-size:.86rem;color:var(--muted);
  padding:.55rem 0;border-radius:7px;transition:color .25s}
.seg button.on{color:var(--ink-2)}
.seg .pill{position:absolute;z-index:0;top:.28rem;bottom:.28rem;left:.28rem;width:calc(50% - .28rem);
  background:var(--amber);border-radius:7px;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.seg.signup .pill{transform:translateX(100%)}

form{display:flex;flex-direction:column;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}
.field input{background:var(--ink-2);border:1px solid var(--line-strong);border-radius:9px;
  padding:.8rem 1rem;color:var(--paper);font-family:var(--body);font-size:.95rem;
  transition:border-color .2s, box-shadow .2s}
.field input::placeholder{color:var(--muted-2)}
.field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-glow)}

.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;width:100%;padding-right:2.8rem}
.pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;
  border:none;cursor:pointer;padding:.35rem;display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);transition:color .2s, background .2s;border-radius:6px}
.pw-toggle:hover{color:var(--amber);background:rgba(132,151,164,.08)}
.pw-toggle:focus-visible{outline:none;color:var(--amber)}
.pw-toggle svg{width:18px;height:18px;display:block}
.pw-toggle .eye-off{display:none}
.pw-toggle.shown .eye{display:none}
.pw-toggle.shown .eye-off{display:block}

.row-between{display:flex;justify-content:space-between;align-items:center}
.link{color:var(--muted);font-size:.8rem;text-decoration:none;transition:color .2s}
.link:hover{color:var(--amber)}
.hint{font-family:var(--mono);font-size:.6rem;color:var(--muted-2);letter-spacing:.04em}
.alt{text-align:center;margin-top:1.3rem}
.alt .link{font-size:.84rem}

.btn{font-family:var(--body);font-weight:600;font-size:.95rem;cursor:pointer;border:none;
  padding:.85rem;border-radius:9px;transition:all .22s ease;margin-top:.3rem;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%}
.btn-primary{background:var(--amber);color:var(--ink-2)}
.btn-primary:hover{background:var(--amber-lo);transform:translateY(-1px);box-shadow:0 10px 28px -8px var(--amber-glow)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);background:rgba(132,151,164,.06)}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.spinner{width:15px;height:15px;border:2px solid rgba(14,26,36,.35);border-top-color:var(--ink-2);
  border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .spinner{display:block}
.btn.loading .btn-label{opacity:.7}

.msg{font-size:.84rem;text-align:center;padding:.7rem .9rem;border-radius:9px;margin-top:.2rem;
  display:none;border:1px solid transparent}
.msg.show{display:block;animation:rise .3s ease both}
.msg.err{color:#ffb4ad;background:rgba(248,81,73,.1);border-color:rgba(248,81,73,.3)}
.msg.ok{color:#9be6ad;background:rgba(63,185,80,.1);border-color:rgba(63,185,80,.3)}

.status-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.3rem;animation:rise .5s .05s cubic-bezier(.2,.7,.2,1) both}
.status-icon svg{width:30px;height:30px}
.status-icon.ok{background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.4);color:var(--green)}
.status-icon.err{background:rgba(240,165,60,.12);border:1px solid rgba(240,165,60,.4);color:var(--amber)}

.foot{text-align:center;margin-top:1.5rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase}

#confirmField{max-height:0;overflow:hidden;opacity:0;margin-top:-1rem;
  transition:max-height .35s ease, opacity .3s ease, margin .35s ease}
form.signup #confirmField{max-height:120px;opacity:1;margin-top:0}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}