:root{
  --bg:#0a0c10;
  --surf:#12161d;
  --surf-2:#0e1218;
  --line:#242933;
  --ink:#ffffff;
  --muted:#9aa0ad;
  --accent:#f2b705;
  --accent-2:#ffc517;
  --accent-ink:#131313;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
  /* Black canvas with warm yellow light bleeding in from the corners. */
  background:
    radial-gradient(60% 55% at 0% 0%, rgba(242,183,5,.20), transparent 60%),
    radial-gradient(60% 55% at 100% 100%, rgba(242,183,5,.16), transparent 60%),
    radial-gradient(45% 45% at 100% 0%, rgba(242,183,5,.08), transparent 60%),
    radial-gradient(45% 45% at 0% 100%, rgba(242,183,5,.08), transparent 60%),
    var(--bg);
}
.card{
  width:100%;
  max-width:400px;
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 32px 32px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.brand{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;margin-bottom:26px;
}
.brand img{height:26px;filter:brightness(0) invert(1);display:block}
h1{
  font-size:1.35rem;font-weight:800;letter-spacing:-.02em;
  margin:0 0 4px;text-align:center;
}
.hint{color:var(--muted);font-size:.9rem;margin:0 0 24px;text-align:center}
.field{margin-bottom:16px}
.field label{
  display:block;font-size:.82rem;font-weight:600;
  color:var(--muted);margin-bottom:7px;letter-spacing:.01em;
}
.field input{
  width:100%;
  background:var(--surf-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  padding:12px 14px;
  font-size:16px; /* 16px avoids iOS zoom-on-focus */
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{color:#5c626e}
.field input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,.16);
}
button{
  width:100%;
  margin-top:8px;
  background:var(--accent);
  color:var(--accent-ink);
  border:0;
  border-radius:10px;
  padding:13px 16px;
  font-size:.98rem;font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
button:hover{background:var(--accent-2)}
button:active{transform:translateY(1px)}
.alert{
  border-radius:10px;
  padding:11px 14px;
  font-size:.88rem;
  margin-bottom:20px;
  line-height:1.4;
}
.alert.error{
  color:#ffd5d5;
  background:rgba(255,107,107,.10);
  border:1px solid rgba(255,107,107,.35);
}
.alert.info{
  color:#cfe9ff;
  background:rgba(120,180,255,.10);
  border:1px solid rgba(120,180,255,.30);
}