:root{
  --bg:#fbfbfb; --ink:#0f0f0f; --muted:#6b6b6b; --card:#ffffff; --border:#ececec;
  --focus:#111111; --shadow:0 20px 60px rgba(0,0,0,.06); --radius:22px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--ink);
     background:linear-gradient(180deg,#ffffff,#f7f7f7 30%,#f5f5f5);min-height:100dvh;display:grid;place-items:center;}
.wrap{width:100%;max-width:440px;padding:28px}
.logo{display:flex;justify-content:center;margin-bottom:18px}
.logo img{height:46px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
h1{margin:0 0 8px;font-size:26px;letter-spacing:-.2px;text-align:center}
p.sub{margin:0 0 18px;color:var(--muted);text-align:center;font-size:14px}
.form{display:grid;gap:12px}
label{font-weight:700;font-size:14px}
.input{position:relative}
input{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:14px;font-size:16px;background:#fff;outline:none;
      transition:border-color .15s ease, box-shadow .15s ease}
input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.btn{width:100%;appearance:none;border:none;cursor:pointer;padding:13px 16px;border-radius:999px;font-weight:900;letter-spacing:.3px;
     background:#0f0f0f;color:#fff;transition:transform .04s ease, opacity .15s ease}
.btn:hover{opacity:.92} .btn:active{transform:translateY(1px)}
.links{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
a:hover{text-decoration:underline}
.footer{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
@media (max-width:520px){.logo img{height:40px}.card{padding:22px}}