:root{
  --text:#ffffff;
  --muted:#aaa;
  --line: #353535;
  --focus: #12af71;
  --accent: #0cac00;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: 'Montserrat', sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px;
}

.page-header{
  text-align:center;
  margin-bottom:20px;
}

.page-header h1{
  margin:0;
  font-size:22px;
  font-weight:700;
}

.form{
  width:100%;
  max-width:360px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position: relative;
  top: 170px;
}

.field{display:flex;flex-direction:column;gap:6px}

.label{font-size:13px;color:var(--muted)}

.input{
  height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#2b2b2b;
  color:var(--text);
  font-size:15px;
}

.input:focus{
  border-color:var(--focus);
  outline:none;
}

.error{
  color:#ff6b6b;
  font-size:12px;
}

.btnn{
  height:44px;
  border:none;
  border-radius:8px;
  background:var(--focus);
  color:#ffffff;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition: background .2s;
}

.btnn:hover{background:var(--accent)}

.links{
  text-align:center;
  font-size:14px;
}

.links a{
  color:#b8b8b8;
  text-decoration:none;
}

.links a:hover{text-decoration:none}

@media (max-width:480px){
  body{padding:12px}
  .form{max-width:100%}
}