:root{
  --bg:#070815;
  --card:rgba(12,14,28,.82);
  --card-border:rgba(255,255,255,.14);
  --text:#f7f5ff;
  --muted:#b9b3d6;
  --accent:#7c3aed;
  --accent2:#b366ff;
  --danger:#ff5f6d;
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:48px 7vw;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);

  background:
    linear-gradient(
      90deg,
      rgba(4,5,13,.35) 0%,
      rgba(4,5,13,.55) 45%,
      rgba(4,5,13,.96) 100%
    ),
    url("../../login-bg-desktop.png") center/cover no-repeat,
    radial-gradient(circle at 20% 20%,#1d1245 0%,#070815 60%);
}

/* CARD DE LOGIN */
.login-card{
  width:100%;
  max-width:520px;
  min-height:560px;
  padding:44px 42px;
  border:1px solid var(--card-border);
  border-radius:32px;

  background:linear-gradient(
    180deg,
    rgba(20,22,42,.82),
    rgba(10,11,23,.76)
  );

  box-shadow:0 28px 90px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-card h1{
  margin:0 0 12px;
  font-size:44px;
  line-height:1;
  letter-spacing:-.04em;
}

.login-card p{
  margin:0 0 32px;
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
}

/* FORMULÁRIO */
label{
  display:block;
  margin:18px 0 8px;
  color:#d9d3f8;
  font-weight:700;
  font-size:14px;
}

input{
  width:100%;
  height:54px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(5,7,17,.7);
  color:var(--text);
  padding:0 16px;
  outline:none;
  font:inherit;
}

input:focus{
  border-color:rgba(179,102,255,.85);
  box-shadow:0 0 0 4px rgba(124,58,237,.18);
}

button{
  width:100%;
  margin-top:24px;
  height:56px;
  border:0;
  border-radius:18px;
  cursor:pointer;
  font:inherit;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 16px 34px rgba(124,58,237,.36);
}

button:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* MENSAGENS */
.msg,
.hint{
  margin-top:16px;
  min-height:18px;
  color:#ffd1d6;
  font-size:14px;
}

.hint{
  color:rgba(247,245,255,.68);
  line-height:1.45;
}

/* MOBILE / TABLET */
@media(max-width:900px){
  body{
    min-height:100dvh;
    align-items:flex-start;
    justify-content:center;

    /*
      NÃO mexer no primeiro número.
      Ele mantém a posição da foto e do card.
    */
    padding:330px 22px 28px;

    background:
      linear-gradient(
        180deg,
        rgba(4,5,13,.05) 0%,
        rgba(4,5,13,.18) 28%,
        rgba(4,5,13,.72) 58%,
        rgba(4,5,13,.96) 100%
      ),
      url("../../login-bg-mobile.jpg") left top / cover no-repeat,
      #070815;
  }

  .login-card{
    width:100%;
    max-width:520px;
    min-height:auto;
    padding:28px 22px;
    border-radius:26px;
  }

  .login-card h1{
    font-size:34px;
    margin-bottom:10px;
  }

  .login-card p{
    font-size:15px;
    line-height:1.45;
    margin-bottom:22px;
  }

  label{
    margin:13px 0 6px;
    font-size:13px;
  }

  input{
    height:51px;
    border-radius:16px;
  }

  button{
    height:53px;
    margin-top:18px;
    border-radius:16px;
  }

  .msg,
  .hint{
    margin-top:10px;
    font-size:13px;
    line-height:1.35;
  }
}

/* CELULAR MENOR */
@media(max-width:430px){
  body{
    /*
      NÃO mexer no 310px.
      Ele mantém a foto onde está.
    */
    padding:310px 16px 24px;

    background:
      linear-gradient(
        180deg,
        rgba(4,5,13,.03) 0%,
        rgba(4,5,13,.16) 26%,
        rgba(4,5,13,.72) 58%,
        rgba(4,5,13,.96) 100%
      ),
      url("../../login-bg-mobile.jpg") left top / cover no-repeat,
      #070815;
  }

  .login-card{
    padding:24px 20px;
    border-radius:24px;
  }

  .login-card h1{
    font-size:31px;
    margin-bottom:9px;
  }

  .login-card p{
    font-size:14.5px;
    line-height:1.4;
    margin-bottom:18px;
  }

  label{
    margin:10px 0 5px;
    font-size:13px;
  }

  input{
    height:48px;
    border-radius:15px;
  }

  button{
    height:50px;
    margin-top:16px;
    border-radius:15px;
  }

  .msg,
  .hint{
    margin-top:8px;
    font-size:12.5px;
    line-height:1.3;
  }
}