:root{
    --azul:#0F2F87; --azul2:#1A4FD6; --amar:#FFD559; --amar-dk:#D97706;
    --tinta:#0B1B3B; --papel:#F4F6FB; --branco:#fff;
    --erro:#DC2626; --verde:#16A34A; --borda:#D8E0F0;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(26,79,214,.18), transparent 55%),
      radial-gradient(900px 500px at 110% 120%, rgba(255,213,89,.16), transparent 55%),
      linear-gradient(160deg, #0B1B3B 0%, #12266b 55%, #0F2F87 100%);
    display:flex; align-items:center; justify-content:center;
    padding:20px; color:var(--tinta);
  }
  /* Blueprint grid overlay — remete a projeto/planta de obra */
  body::before{
    content:''; position:fixed; inset:0; pointer-events:none; opacity:.25;
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:38px 38px;
  }

  .card{
    position:relative; width:100%; max-width:420px;
    background:var(--branco); border-radius:20px;
    box-shadow:0 30px 80px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.4) inset;
    overflow:hidden;
    animation:sobe .5s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* Faixa superior com a marca */
  .topo{
    background:linear-gradient(135deg, var(--azul) 0%, var(--azul2) 100%);
    padding:30px 30px 26px; text-align:center; position:relative;
  }
  .topo::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
    background:linear-gradient(90deg, var(--amar), #ffe89a, var(--amar));
  }
  .logo{
    width:96px; height:96px; margin:0 auto 12px; display:block;
    background:#fff; border-radius:18px; padding:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .marca-nome{color:#fff; font-size:22px; font-weight:800; letter-spacing:.3px}
  .marca-sub{color:#cfe0ff; font-size:12.5px; margin-top:3px; font-weight:500}

  /* Corpo do formulário */
  .corpo{padding:28px 30px 30px}
  .titulo{
    font-size:15px; font-weight:700; color:var(--azul);
    text-transform:uppercase; letter-spacing:.8px; margin-bottom:20px;
    display:flex; align-items:center; gap:10px;
  }
  .titulo::after{content:''; flex:1; height:2px; background:var(--borda)}

  .campo{margin-bottom:16px}
  .campo label{
    display:block; font-size:12px; font-weight:700; color:#5a6786;
    text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;
  }
  .campo input{
    width:100%; padding:14px 16px; font-size:16px;
    border:2px solid var(--borda); border-radius:12px; background:#FBFCFF;
    transition:border-color .15s, box-shadow .15s; color:var(--tinta);
  }
  .campo input:focus{
    outline:none; border-color:var(--azul2);
    box-shadow:0 0 0 4px rgba(26,79,214,.14);
  }
  .campo input::placeholder{color:#9aa6c2}

  .btn-entrar{
    width:100%; padding:15px; font-size:16px; font-weight:800;
    color:#fff; background:linear-gradient(135deg, var(--azul2), var(--azul));
    border:none; border-radius:12px; cursor:pointer; margin-top:6px;
    letter-spacing:.4px; text-transform:uppercase;
    transition:transform .1s, box-shadow .2s, opacity .2s;
    box-shadow:0 10px 24px rgba(15,47,135,.35);
  }
  .btn-entrar:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 14px 30px rgba(15,47,135,.45)}
  .btn-entrar:active:not(:disabled){transform:translateY(0)}
  .btn-entrar:disabled{opacity:.6; cursor:default}

  .aviso{
    margin-top:16px; padding:12px 14px; border-radius:10px;
    font-size:13.5px; font-weight:600; display:none; line-height:1.4;
  }
  .aviso.erro{display:block; background:#FEECEC; color:var(--erro); border:1px solid #F5C2C2}
  .aviso.ok{display:block; background:#E9F9EF; color:var(--verde); border:1px solid #B7E7C7}

  .rodape{
    text-align:center; margin-top:22px; font-size:11.5px; color:#8b97b5; line-height:1.6;
  }
  .rodape strong{color:#5a6786}

  /* Spinner */
  .spin{
    display:inline-block; width:16px; height:16px; vertical-align:-3px;
    border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
    border-radius:50%; animation:girar .7s linear infinite; margin-right:8px;
  }
  @keyframes girar{to{transform:rotate(360deg)}}

  @media (max-width:440px){
    .topo{padding:26px 22px 22px}
    .corpo{padding:24px 22px 26px}
    .logo{width:82px;height:82px}
  }