:root {
    --verde-naim-100p: rgb(183, 241, 136);
    --verde-naim-50p: rgba(183, 241, 136, 0.5);
    --verde-naim-10p: rgba(183, 241, 136, 0.10);

    --laranja-naim-100p: rgb(255, 102, 0);
    --laranja-naim-50p: rgba(255, 103, 1, 0.50);
    --laranja-naim-10p: rgba(255, 103, 1, 0.10);

    --grafite-naim-100p: #212121;
    --OFFWHITE-NAIM-100P:#EDE5DB;

    --BG-CARD-COLOR-1: #26262A;
    --BORDER-COLOR-1: #86868E;

    --WHITE-COLOR: #ffffff;
    --BLACK-COLOR: #000000;

    --BG-GRADIENT-COLOR: linear-gradient(
        200deg,
        rgba(0, 0, 0, 0.00) 50%, rgba(184, 241, 138, 0.15) 100%
    ),
    linear-gradient(0deg, #212121 0%, #212121 100%);
}

.TEXT-H3-1 {
  color: #FFF;
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.TEXT-PARAGRAGO-1{
  color: var(--OFFWHITE-NAIM-100P);
  font-family: Montserrat;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.LABEL-TEXT-1{
  color: var(--WHITE, #FFF);
  font-family: Montserrat;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.INPUT-TEXT-1{
  color: var(--OFFWHITE-NAIM-100P);
  font-family: Montserrat;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.TEXT-LINE-BTN-1{
color: var(--verde-naim-100p);
text-align: right;

    cursor:pointer;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    min-height:100vh;
    font-family: 'Montserrat', system-ui, Arial, sans-serif;
    background: var(--BG-GRADIENT-COLOR);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color: var(--WHITE-COLOR);
}

/* Logo */
.logo {
    margin-bottom:40px;
}

.logo img {
    width:180px;
}

/* Card */
.card {
    width:100%;
    max-width:460px;
    background: var(--grafite-naim-100p);
    border:1px solid var(--BORDER-COLOR-1);
    border-radius:22px;
    padding:42px 38px;
}

/* Títulos */
.card h1 {
    font-size:1.6rem;
    margin-bottom:8px;
    font-weight:700;
}

.card p {
    color: var(--OFFWHITE-NAIM-100P);
    font-size:1rem;
    margin-bottom:32px;
}

/* Labels */
label {
    font-size:.95rem;
    margin-bottom:8px;
    display:block;
    color: var(--OFFWHITE-NAIM-100P);
}

/* Campo */
.field {
    position:relative;
    margin-bottom:20px;
}

.field input {
    width:100%;
    padding:14px 44px;
    border-radius:12px;
    border:2px solid var(--BORDER-COLOR-1);
    background: var(--grafite-naim-100p);
    color: var(--WHITE-COLOR);
    font-size:1rem;
    font-family: 'Montserrat', sans-serif;
}

.field input::placeholder {
    color: var(--OFFWHITE-NAIM-100P);
    opacity: .6;
}

.field input:focus {
    outline:none;
    border-color: var(--verde-naim-100p);
    background-color: var(--verde-naim-10p);
}

/* Ícones */
.material-symbols-outlined {
    font-size:22px;
    color: var(--OFFWHITE-NAIM-100P);
}

.field .icon {
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    opacity:.7;
}

.field .eye {
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    opacity:.6;
    cursor:pointer;
    transition:.2s;
}

.field .eye:hover {
    opacity:1;
    transform:translateY(-50%) scale(1.1);
}

/* Link */
.link {
    text-align:right;
    margin:10px 0 26px;
}

.link a {
    color: var(--verde-naim-100p);
    font-size:.9rem;
    text-decoration:none;
    font-weight:600;
}

.link a:hover {
    text-decoration:underline;
}

/* Botão */
.btn-primario {
    width:100%;
    padding:16px;
    border:none;
    border-radius:14px;
    background-color: var(--laranja-naim-100p);
    color: var(--WHITE-COLOR);
    font-weight:700;
    font-size:1.05rem;
    font-family: 'Montserrat', sans-serif;
    cursor:pointer;
    letter-spacing:.5px;
    transition:.2s;
}.regras-senha {
    list-style: none;
    padding: 0;
    font-size: 14px;
    margin-top: 8px;
}

.regras-senha li {
    color: #c0392b; /* vermelho */
}

.regras-senha li.ok {
    color: #27ae60; /* verde */
}

@media screen and (max-width: 600px) {

    body{
        transform: scale(0.9)
    }

}