:root{
  --bg:#0f1115;              /* mantém o fundo geral */
  --panel:#1b2635;           /* era #121720  → +claro */
  --surface:#172233;         /* era #0f131b  → +claro (cards/inputs) */
  --border:#334055;          /* era #1f2634  → borda mais visível */
  --ink:#eef2f6;             /* texto principal levemente mais claro */
  --muted:#b1bccb;           /* textos secundários mais legíveis */
  --brand:#00b7c3;           /* mantém a cor da marca */
  --brand2:#66e0e6;         /* gradiente do botão */
  --danger:#ff6b6b;         /* mensagens de erro */
}

*{box-sizing:border-box} html,body{height:100%}

body{margin:0;
    background:radial-gradient(1200px 600px at 10% -10%,#0b0e13 30%,#0f1115 70%),linear-gradient(180deg,#0f1115,#0b0e13);
    color:var(--ink);
    font:16px/1.4 system-ui,Segoe UI,Roboto,Arial
}

.login-wrap{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:24px
}

.card{
    width:100%;
    max-width:450px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:28px 26px;
    box-shadow:0 10px 40px rgba(0,0,0,.35)
}

.logo{
    width:200px;
    height:200px;
    object-fit:contain;
    display:block;
    margin:-30px auto -40px
}

.title{
    text-align:center;
    margin:-2px 0 18px;
    font-size:22px;
    font-weight:600
}

.field{
    display:block;
    margin-bottom:14px
}

.field>span{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px
}

.input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid #2a3142;
    background:#0f1218;
    color:var(--ink);
    outline:none
}

.input:focus{
    border-color:var(--brand)
}

.passbox{
    display:flex;
    gap:8px;
    align-items:center
}

.eye{
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    border-radius:10px;
    padding:10px 12px;
    cursor:pointer
}

.row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:6px 0 14px
}

.check{
    display:flex;
    gap:8px;
    align-items:center;
    color:var(--muted);
    font-size:13px}

.link{
    color:var(--brand);
    text-decoration:none;
    font-size:13px
}

.link:hover{
    text-decoration:underline
}

.btn{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    background:linear-gradient(90deg,var(--brand),var(--brand2));
    color:#051217;
    font-weight:700
}

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

.msg{min-height:20px;
    margin:10px 0 0;
    font-size:14px;
    color:var(--danger);
    text-align:center
}

.foot{
    margin-top:16px;
    color:var(--muted);
    text-align:center;
    font-size:12px
}