@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500&display=swap');

:root{
  --ink:#0D0D0D;
  --gallery:#F5F5F7;
  --steel:#8A8A8E;
  --steel-dark:#5F5E5A;
  --line:#2C2C2A;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--ink);
  color:var(--gallery);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
h1,h2,.logo{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;}
.auth-wrap{width:100%;max-width:420px;}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:36px;text-decoration:none;}
.auth-logo img{height:36px;width:36px;object-fit:cover;border-radius:4px;}
.auth-logo span{font-size:18px;letter-spacing:4px;font-weight:600;}
.auth-card{
  background:rgba(20,20,20,0.6);
  border:0.5px solid var(--line);
  border-radius:10px;
  padding:40px 36px;
}
.auth-card h1{font-size:22px;font-weight:500;margin-bottom:8px;text-align:center;}
.auth-sub{font-size:13px;color:var(--steel);text-align:center;margin-bottom:28px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:12px;color:var(--steel);margin-bottom:6px;letter-spacing:0.3px;}
.form-group input{
  width:100%;background:#141414;border:0.5px solid var(--line);
  color:var(--gallery);padding:12px 14px;border-radius:4px;font-size:14px;font-family:inherit;
}
.form-group input:focus{outline:none;border-color:var(--steel);}
.btn{
  width:100%;padding:13px;font-size:13px;letter-spacing:0.5px;
  border-radius:4px;cursor:pointer;border:none;
  background:var(--gallery);color:var(--ink);font-family:inherit;font-weight:500;
}
.btn:hover{background:#d8d8da;}
.auth-links{display:flex;justify-content:space-between;margin-top:20px;font-size:12px;color:var(--steel);}
.auth-links a{color:var(--steel);text-decoration:none;}
.auth-links a:hover{color:var(--gallery);}
.flash{
  padding:12px 16px;border-radius:4px;font-size:13px;margin-bottom:20px;
  border:0.5px solid var(--line);
}
.flash.success{background:rgba(90,140,90,0.12);color:#a9d8a9;border-color:rgba(90,140,90,0.3);}
.flash.error{background:rgba(160,70,70,0.12);color:#e3a9a9;border-color:rgba(160,70,70,0.3);}
.auth-footer{margin-top:28px;text-align:center;font-size:12px;color:var(--steel-dark);}
.auth-footer a{text-decoration:underline;}