:root{
  --g:#42C920;
  --bg:#050505;
  --fg:#eaeaea;
}

*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
}

body{
  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:24px;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(66,201,32,.12),
      transparent 35%
    ),
    #050505;

  color:var(--fg);

  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;

  overflow-x:hidden;
}

.auth-card{
  display:block;

  width:100%;
  max-width:460px;

  margin-left:auto;
  margin-right:auto;

  background:rgba(8,8,8,.96);

  border:1px solid rgba(66,201,32,.6);
  border-radius:18px;

  padding:28px;

  box-shadow:
    0 0 35px rgba(66,201,32,.12);
}

.brand{
  text-align:center;
  font-weight:900;
  font-size:26px;
}

.brand span{
  color:var(--g);
}

h1{
  text-align:center;
  color:var(--g);
  font-size:25px;
  margin:18px 0 8px;
}

.sub{
  text-align:center;
  color:#aaa;
  margin:0 0 22px;
}

.field{
  margin-bottom:14px;
}

label{
  display:block;
  color:#cfcfcf;
  font-size:13px;
  margin-bottom:6px;
}

input{
  display:block;
  width:100%;

  padding:12px 13px;

  border-radius:10px;
  border:1px solid #264c20;

  background:#020202;
  color:#fff;

  outline:none;
}

input:focus{
  border-color:var(--g);

  box-shadow:
    0 0 0 3px rgba(66,201,32,.12);
}

button,
.btn{
  width:100%;
  display:block;

  padding:12px;

  border:1px solid var(--g);
  border-radius:10px;

  background:var(--g);
  color:#000;

  font-weight:800;
  text-align:center;
  text-decoration:none;

  cursor:pointer;
}

.secondary{
  margin-top:10px;

  background:transparent;
  color:var(--g);
}

.msg{
  padding:10px;

  border-radius:9px;

  margin-bottom:14px;

  font-size:14px;
}

.error{
  border:1px solid #4e2222;

  background:#1a0c0c;
  color:#ffb6b6;
}

.ok{
  border:1px solid #245a20;

  background:#0b1a09;
  color:#bfffb8;
}

.small{
  text-align:center;
  margin-top:18px;
}

.small a{
  color:var(--g);
}


/* MOBILE */

@media(max-width:600px){

  body{
    padding:16px;
  }

  .auth-card{
    width:100%;
    max-width:460px;

    margin-left:auto;
    margin-right:auto;

    padding:24px 20px;
  }

}