:root{
      --bg:#f3f5f7;
      --card:#ffffff;
      --primary:#0d6efd;
      --danger:#dc3545;
      --text:#1f2a37;
      --muted:#6b7280;
      --radius:12px;
      --shadow:0 4px 18px rgba(28,39,51,.08);
      --gap-sm:8px;
      --gap:12px;
      --gap-lg:16px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
      color:var(--text);
      background:var(--bg);
    }

    .login-container{
      min-height:100dvh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
    }

    .login-box{
      width:clamp(320px, 92vw, 420px);
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px;
    }

    .logo{display:flex; justify-content:center; margin-bottom:var(--gap)}
    .logo img{max-width:260px; width:60%; height:auto; display:block}

    h2{
      margin:0 0 var(--gap);
      font-size:1.15rem;
      text-align:center;
      font-weight:700;
      letter-spacing:.2px;
    }

    form{display:flex; flex-direction:column; gap:var(--gap)}

    .input-group{display:flex; flex-direction:column; gap:6px}
    .input-group label{font-size:.9rem; font-weight:600}

    /* Wrapper para inputs com ícone à direita */
    .input-with-icon{
      position:relative;
      display:flex;
      align-items:center;
      width:100%;
    }

    .input-with-icon input,
    .input-group select{
      width:100%;
      height:40px;
      padding:0 10px;
      border:1px solid #d1d5db;
      border-radius:8px;
      outline:none;
      transition:.15s ease;
      background:#fff;
    }

    /* espaço extra para o ícone à direita */
    .input-with-icon input{
      padding-right:40px;
    }

    .input-with-icon input:focus,
    .input-group select:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 3px rgba(13,110,253,.12);
    }

    .input-icon-right{
      position:absolute;
      right:12px;
      top:50%;
      transform:translateY(-50%);
      font-size:1rem;
      color:var(--muted);
      pointer-events:none;
    }

    .input-icon-clickable{
      cursor:pointer;
      pointer-events:auto;
    }

    .remember-me{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:-4px;
    }
    .remember-me label{font-size:.9rem; color:var(--muted)}

    .links{
      display:flex;
      justify-content:flex-end;
      margin-top:-6px;
    }
    .links a{
      font-size:.88rem;
      color:var(--primary);
      text-decoration:none;
    }
    .links a:hover{text-decoration:underline}

    .buttons-container{
      display:flex;
      gap:var(--gap);
      margin-top:2px;
    }

    .btn{
      appearance:none;
      border:0;
      border-radius:10px;
      padding:12px 16px;
      font-weight:700;
      line-height:1;
      color:#fff;
      cursor:pointer;
      transition:transform .06s ease, filter .15s ease;
      flex:1 1 0;
      min-width:160px;
      text-align:center;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      user-select:none;
    }
    .btn:active{transform:translateY(1px)}
    .btn-primary{background:var(--primary)}
    .btn-danger{background:var(--danger)}
    .btn:hover{filter:brightness(.96)}

    .footer{
      margin-top:14px;
      text-align:center;
      color:var(--muted);
    }
    .footer img{width: 350px; height:auto; display:block; margin:0 auto 6px}
    .footer p{margin:2px 0; font-size:.92rem}
    .footer a{color:#3b5998; text-decoration:none}
    .footer a:hover{text-decoration:underline}

    @media (max-width: 420px){
      .buttons-container{flex-direction:column}
      .btn{min-width:100%}
      .logo img{width:86%}
    }