:root {
      --yellow: #ffff00;
      --red: #8b0000;
      --black: #000000;
    }

    

    



  .panel-login-cadastro{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; display: none;
    font-family: 'Poppins', sans-serif;  background: radial-gradient(circle at center, #0c0c0c, #1a1a1a); overflow: hidden;
    display: flex; align-items: center; justify-content: center; 

  }
      
  .wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px;flex-direction: column;}

  .circle-efeito-container { position: relative; width: 340px; height: 340px; max-width: 100%;}
  
  .login-box { position: relative; background: #101c2c; padding: 35px 28px; border-radius: 18px; text-align: center;
    z-index: 1; max-width: 300px; width: 100%; margin: 0 auto; box-shadow: 0 0 25px rgba(255, 255, 0, 0.2);
  }
  
  .login-box h2 { color: var(--yellow); margin-bottom: 25px; font-size: 1.5em; }

  .login-box input { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: none;
      background: #0f1a28; color: #fff; outline: 1px solid var(--yellow);
    
  }

  .login-box input:focus { outline: 2px solid var(--yellow);}

  .login-box input::placeholder { color: #aaa;}

  .login-box a { color: #aaa; font-size: 12px; text-decoration: none; display: block; margin-top: 5px;}

  .login-box button { width: 100%; padding: 12px; margin-top: 15px; background: linear-gradient(135deg, var(--yellow), var(--red));
    border: none; color: #000; border-radius: 25px; font-weight: bold; cursor: pointer; transition: 0.3s;
  }

  .login-box button:hover { filter: brightness(1.1); }

  .login-box .signup { margin-top: 15px; font-size: 13px; color: var(--yellow);  cursor: pointer;
    }

    @media (max-width: 400px) {
      .circle-efeito-container {
        transform: scale(0.9);
      }
    }

    .login-box .signup-wcode{color: #ccc; font-size: 13px; text-align: left; width: 100%;}
    .group{width: 100%; display: flex;}

    .group .junt{padding-left: 10px; width: 100%; display: flex; flex-direction: column;}
    .group .junt label{margin-left: 4px;}
    .group .junt input{margin-top: 0;}

    .group .junt:nth-of-type(1){padding-left: 0px;}

     .login-box label{text-align: left; width: 100%;}

     .group2{width: 100%; display: flex; flex-direction: column;}
     .group2 label{margin-left: 4px; margin-bottom: 2px;}
     .group2 input{margin-top: 0;}