:root{
  --graphite:#17191b; --graphite-2:#1f2224; --graphite-3:#292d30;
  --white:#f5f3ef; --muted:#9a958d; --line:#33373a; --signal:#3e949e;
  --font-display:"Anton","Arial Narrow",sans-serif;
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--graphite); color:var(--white);
  font-family:var(--font-body); display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:1.5rem;
}
.auth-card{
  width:100%; max-width:400px; background:var(--graphite-2);
  border:1px solid var(--line); border-radius:10px; padding:2.4rem 2rem;
}
.auth-brand{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem;
}
.auth-brand img{width:34px; height:26px;}
.auth-brand span{
  font-family:var(--font-display); letter-spacing:.02em; font-size:1.05rem;
}
.auth-kicker{
  text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--muted);
  margin:0 0 .3rem;
}
h1{
  font-family:var(--font-display); font-weight:400; font-size:1.6rem;
  margin:0 0 1.4rem; letter-spacing:.01em;
}
label{
  display:block; font-size:.78rem; color:var(--muted); margin-bottom:.35rem;
  text-transform:uppercase; letter-spacing:.04em;
}
input[type="email"], input[type="password"], input[type="text"]{
  width:100%; background:var(--graphite-3); border:1px solid var(--line);
  color:var(--white); border-radius:6px; padding:.75rem .85rem; font-size:1rem;
  margin-bottom:1.1rem; font-family:var(--font-body);
}
input:focus{ outline:2px solid var(--signal); outline-offset:1px; border-color:var(--signal); }
input[name="otp"]{
  letter-spacing:.5em; text-align:center; font-size:1.4rem; font-weight:600;
}
button{
  width:100%; background:var(--signal); color:var(--graphite); border:none;
  border-radius:6px; padding:.85rem; font-size:.95rem; font-weight:600;
  cursor:pointer; transition:opacity .2s var(--ease); font-family:var(--font-body);
}
button:hover{ opacity:.88; }
button:disabled{ opacity:.5; cursor:not-allowed; }
.auth-note{ font-size:.82rem; color:var(--muted); margin-top:1.2rem; line-height:1.5; }
.auth-error{
  background:rgba(217,90,31,.12); border:1px solid #d95a1f;
  color:#f2c9b4; padding:.7rem .85rem; border-radius:6px;
  font-size:.85rem; margin-bottom:1.1rem; line-height:1.4;
}
.auth-success{
  background:rgba(62,148,158,.12); border:1px solid var(--signal);
  color:var(--white); padding:.7rem .85rem; border-radius:6px;
  font-size:.85rem; margin-bottom:1.1rem; line-height:1.4;
}
a{ color:var(--signal); }
.auth-back{ display:inline-block; margin-top:1rem; font-size:.82rem; color:var(--muted); text-decoration:none; }
.auth-back:hover{ color:var(--white); }