:root{
  --primary-600:#ff6600;   /* Laranja principal */
  --primary-700:#e65c00;   /* Laranja mais escuro */
  --primary-800:#cc5200;   /* Laranja ainda mais escuro */

  --secondary-900:#001b60; /* Azul marinho forte */
  --secondary-600:#24356d; /* Azul marinho médio */

  --border:#e5e7eb;
  --card:#ffffff;
  --bg-1:#fff7f0;          /* Fundo suave com tom do laranja */
  --bg-2:#f9f5ff;          /* Fundo alternativo com leve tom do azul */
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--secondary-900);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background: radial-gradient(1200px 700px at 20% -10%, var(--bg-2), transparent 70%),
              radial-gradient(900px 600px at 120% 10%, var(--bg-2), transparent 60%),
              linear-gradient(180deg, var(--bg-1), #fff 70%);
}

.card{
  width:100%;
  max-width:520px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 8px 30px rgba(15, 23, 42, .06);
  padding:32px 36px 28px;
}

.header{
  text-align:center;
  margin-bottom:22px;
}

.avatar{
  width:84px;height:84px;margin:0 auto 12px;
  border-radius:50%;
  display:grid;place-items:center;
  background: radial-gradient(circle, var(--primary-600) 0 100%);
  box-shadow:0 6px 16px rgba(255,102,0,.25), inset 0 0 0 6px #fff7f0;
}
.avatar img.casa-do-agente-logo{
  width:84px;height:84px;object-fit:contain;border-radius:50%;display:block;background:#fff;
}

h1{
  font-size:28px;line-height:1.2;font-weight:700;
  letter-spacing:.2px;margin-bottom:6px;
  color:var(--secondary-900);
}
.subtitle{
  font-size:14px;color:var(--secondary-600);
}

.form{margin-top:18px;}
.group{margin-bottom:16px;}
.label{
  font-size:13px;font-weight:600;color:var(--secondary-900);margin-bottom:8px;
}

.field{position:relative;}
.field input{
  width:100%;
  height:48px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:0 14px 0 44px;
  font-size:15px;color:var(--secondary-900);background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{color:#9aa5b1}
.field input:focus{
  outline:none;border-color:var(--primary-600);
  box-shadow:0 0 0 4px rgba(255,102,0,.15);
}

.left-icon, .right-icon{
  position:absolute;top:50%;transform:translateY(-50%);
  width:22px;height:22px;color:#94a3b8;
  pointer-events:none;
}
.left-icon{left:12px}
.right-icon{right:12px;pointer-events:auto;cursor:pointer}

.help{text-align:right;margin-top:8px;}
.help a{
  color:var(--primary-700);text-decoration:none;font-weight:600;font-size:14px;
}
.help a:hover{color:var(--primary-800);text-decoration:underline}

.btn{
  margin-top:18px;
  width:100%;height:50px;border:0;border-radius:10px;
  background:linear-gradient(180deg, var(--primary-600), var(--primary-700));
  color:#fff;font-weight:700;font-size:16px;cursor:pointer;
  box-shadow:0 8px 18px rgba(255,102,0,.35);
  transition:transform .06s ease, filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:hover{filter:brightness(0.98)}

@media (max-width:520px){
  .card{margin:18px;padding:26px 22px}
  h1{font-size:24px}
}