:root{
  --azul:#0b2d55;         /* botão/título */
  --azul-escuro:#082642;  /* hover */
  --borda:#cfd8e3;
  --borda-card:#666;
  --texto:#0f172a;
  --placeholder:#9ca3af;
}

/* Reseta e base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--texto);
  background:#fff;
  /* SEM env() aqui para evitar erro no cPanel */
}

/* ===== Layout principal (compat) ===== */
.wrap{
  min-height: 100vh;               /* fallback clássico */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;          /* centraliza verticalmente (compat) */
  padding: 8vh 20px 24px;          /* respiro simples, sem env()/max() */
}

/* Branding */
.top{margin:8px 0 14px}
.brand{
  width:230px;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Título */
.app-title{
  margin:6px 0 18px;
  font-size:28px;
  line-height:1.15;
  font-weight:800;
  color:var(--azul);
  text-align:center;
}

/* Formulário */
.login-box{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:center;
  margin-top:2px;
}

/* Acessibilidade */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Input */
.plate-input{
  width:100%;
  height:56px;
  padding:0 16px;
  border:2px solid var(--borda);
  border-radius:16px;
  font-size:18px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.plate-input::placeholder{ color:var(--placeholder); }
.plate-input:focus{
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(11,45,85,.12);
}

/* Botão */
.cta{
  width:100%;
  height:56px;
  border:none;
  border-radius:16px;
  background:var(--azul);
  color:#fff;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, transform .02s;
}
.cta:hover{ background:var(--azul-escuro); }
.cta:active{ transform:translateY(1px); }

/* Mensagem de erro */
.msg-erro{
  background:#ffe2e2;
  border:1px solid #ffb3b3;
  color:#9b1c1c;
  padding:8px 12px;
  border-radius:8px;
  font-size:14px;
  text-align:center;
}

/* Rodapé */
.footer{
  margin-top:6px;
  font-size:10px;
  font-weight:300;
  color:#94a3b8;
  line-height:1.2;
}

/* Ajustes de escala */
@media (min-width:768px){
  .brand{ width:260px; }
  .app-title{ font-size:32px; }
}

/* ===== Melhorias opcionais (só onde o browser suporta) ===== */
@supports (padding: env(safe-area-inset-top)) {
  body{
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
  .wrap{
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-top: calc(8vh + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .footer{
    padding-bottom: env(safe-area-inset-bottom);
  }
}