:root{--ink:#0b0b0c;--paper:#f3efe4;--shock:#ff4d00;--acid:#d6ff2e;--ok:#1f9d55;--err:#d6193c;--shadow:8px 8px 0 var(--ink);--shadow-sm:5px 5px 0 var(--ink)}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:var(--paper);color:var(--ink);
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 22px,rgba(11,11,12,.035) 22px,rgba(11,11,12,.035) 24px)}
.brand{font-family:"Archivo Black",sans-serif;font-size:40px;text-transform:lowercase;letter-spacing:-.03em;margin-bottom:26px;display:flex;align-items:center}
.brand .dot{width:14px;height:14px;background:var(--shock);border:3px solid var(--ink);border-radius:50%;margin-left:6px;transform:translateY(-4px)}
.card{width:100%;max-width:440px;background:#fff;border:3px solid var(--ink);box-shadow:var(--shadow);padding:34px 32px}
.card h1{font-size:26px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.card .sub{font-weight:500;font-size:15px;opacity:.7;margin-bottom:26px}
label{display:block;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin:0 0 8px}
input{width:100%;padding:14px;border:3px solid var(--ink);background:var(--paper);font:inherit;font-size:16px;margin-bottom:18px;outline:none}
input:focus{background:#fff;box-shadow:var(--shadow-sm)}
.btn{width:100%;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:16px;border:3px solid var(--ink);
  background:var(--shock);color:#fff;box-shadow:var(--shadow-sm);cursor:pointer;font-size:16px;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn[disabled]{opacity:.5;cursor:wait}
.msg{margin-top:18px;border:3px solid var(--ink);padding:12px 14px;font-weight:600;font-size:14px;display:none}
.msg.err{background:var(--err);color:#fff;display:block}
.msg.ok{background:var(--acid);display:block}
.alt{margin-top:22px;font-weight:600;font-size:14px;text-align:center}
.alt a{border-bottom:3px solid var(--shock)}
.back{margin-top:18px;font-weight:600;font-size:13px;opacity:.8;text-align:center}
.back a{border-bottom:2px solid var(--ink)}