*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:grid; place-items:center; padding:24px;
}
.card{
  width:100%; max-width:440px;
  background:var(--card); border:1px solid var(--rule);
  border-radius:14px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 30px 60px -40px rgba(0,0,0,.35);
  overflow:hidden;
}
.card-top{
  padding:28px 32px 20px;
  border-bottom:1px solid var(--rule);
  background:var(--raise);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-bottom:18px}
.logo svg{width:26px;height:26px}
.logo svg rect{fill:var(--brand)}
.logo b{font-size:19px;font-weight:600;letter-spacing:-.035em}
.logo em{font-style:normal;font-size:13px;color:var(--ink3);border-left:1px solid var(--rule);padding-left:10px;margin-left:2px}
.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dept); margin-bottom:8px;
}
h1{
  font-family:"Petrona",Georgia,serif; font-weight:500;
  font-size:28px; line-height:1.08; letter-spacing:-.015em;
}
.lede{margin-top:8px; font-size:14px; color:var(--ink2); max-width:44ch}

.card-body{padding:28px 32px 32px}
form{display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
label{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink3);
}
input[type=text], input[type=password]{
  font-family:inherit; font-size:15px; padding:12px 14px;
  border-radius:8px; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink); width:100%;
  transition:border-color .12s, box-shadow .12s;
}
input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
input[type=text]::placeholder, input[type=password]::placeholder{color:var(--ink3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.row-between{display:flex; justify-content:space-between; align-items:center; gap:12px}
.check{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink2); cursor:pointer}
.check input{flex:0 0 auto; width:16px; height:16px; margin-top:2px; accent-color:var(--brand); cursor:pointer}
.forgot{font-size:13px; color:var(--brand); text-underline-offset:2px}

.btn{
  font-family:inherit; font-size:15px; font-weight:600;
  padding:13px 22px; border-radius:9px; border:none; cursor:pointer;
  background:var(--brand); color:var(--brand-ink);
  transition:opacity .12s, transform .12s;
  width:100%;
}
.btn:hover{opacity:.93; transform:translateY(-1px)}
.btn:disabled{opacity:.55; cursor:default; transform:none}

.msg{
  font-size:13.5px; line-height:1.5;
  padding:12px 14px; border-radius:8px;
  display:none;
}
.msg.show{display:block}
.msg.bad{background:var(--lost-soft); color:var(--lost)}
.msg.good{background:var(--brand-soft); color:var(--ok)}

.divider{
  display:flex; align-items:center; gap:12px;
  margin:22px 0 18px; font-family:"JetBrains Mono",monospace;
  font-size:10px; color:var(--ink3); letter-spacing:.14em; text-transform:uppercase;
}
.divider::before, .divider::after{
  content:""; flex:1; height:1px; background:var(--rule);
}
.alt-row{display:grid; gap:8px}
.alt-row a{
  display:block; padding:11px 14px; text-align:center;
  border:1px solid var(--rule); border-radius:8px;
  color:var(--ink); font-size:13.5px; text-decoration:none;
  transition:background .12s;
}
.alt-row a:hover{background:var(--raise)}
.back{
  margin-top:22px; text-align:center;
  font-size:13px; color:var(--ink3);
}
.back a{color:var(--ink2); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:1px}
.back a:hover{color:var(--ink)}