:root{
  --bg:#0b0e13;
  --bg-2:#090c11;
  --card:#0f1420;
  --ink:#e9eef7;
  --muted:#9aa3b2;
  --line:#1f2435;
  --line-2:#1a2234;
  --ring:#355cff;
  --radius:24px;
  --shadow: 0 24px 80px rgba(0,0,0,.55), 0 10px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:500 16px/1.6 "Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:
    radial-gradient(900px 520px at 18% -10%, #12182a 0%, transparent 60%),
    radial-gradient(900px 520px at 110% 0%, #0f1526 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* ====== Card ====== */
.wrap{min-height:100dvh;display:grid;place-items:center;padding:28px}
.container{
  width:min(420px, 92vw);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--card), #0c111b);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:26px 22px 22px;
}

/* ====== Typography ====== */
.title{
  margin:0;
  font:900 clamp(22px, 4vw, 28px)/1.15 "Montserrat", system-ui; /* resiliente em telas menores */
  word-break:break-word;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.hint{
  margin:6px 0 14px 0;
  color:var(--muted);
  font-size:.95rem;
  text-wrap:pretty;
}
.label{font-weight:700;margin:6px 0 8px 8px;color:#cfd6e6;font-size:.9rem}

/* ===== título com logo ===== */
.title-row{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.logo-title{width:28px;height:28px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}

/* ====== Forms ====== */
.auth-form{display:flex;flex-direction:column}
.field-pill{
  position:relative; height:44px;
  border:1px solid var(--line-2);
  background:#0c1220;
  border-radius:999px;
  display:flex; align-items:center;
  padding:0 14px 0 54px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  margin-bottom:12px;
}
.field-pill:focus-within{
  border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(53,92,255,.18);
  background:#0e172b;
}
.field-pill input{
  width:100%; height:100%; border:0; outline:0; background:transparent;
  color:var(--ink); font:600 15px/1 "Nunito Sans",system-ui;
}
.field-pill input::placeholder{color:#9fb0c7}

/* left icon “capsule” */
.addon.left{
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, #151c2d, #0f1726);
  box-shadow:inset 0 0 0 1px #1d2740;
  color:#c6d2ef;
}

/* row under inputs */
.row{display:flex;justify-content:space-between;align-items:center;margin:2px 4px 12px 4px}
.check{display:flex;align-items:center;gap:.55rem;font-size:.93rem;color:#cfd6e6;cursor:pointer}
.check input{accent-color:var(--ring)}

/* primary button */
.btn{
  height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, #ffffff, #e9eef7);
  color:#101522; font-weight:900; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 14px 32px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,0,0,.4) }
.btn:active{ transform:translateY(0) scale(.99) }

/* botão secundário (voltar) */
.btn-secondary{
  margin-top:10px;
  height:44px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;
  background:linear-gradient(180deg,#111827,#0c1220);
  color:#d7e0f4;
  font-weight:800;
  border:1px solid #232c44;
  box-shadow:inset 0 0 0 1px #1b243c, 0 10px 24px rgba(0,0,0,.28);
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-secondary:hover{transform:translateY(-1px);border-color:#2a3a66;box-shadow:inset 0 0 0 1px #27345a, 0 14px 30px rgba(0,0,0,.34)}
.btn-secondary:active{transform:translateY(0) scale(.99)}
.btn-secondary .ico{display:grid;place-items:center}

/* messages — agora com clamp de 2 linhas e quebra de tokens longos */
.msg{
  margin:10px 0 6px;
  min-height:18px;
  text-align:center;
  color:#b7f7c5;
  font-weight:800;
  line-height:1.4;

  /* truncamento elegante */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  max-height:3.0em;         /* fallback sem webkit */

  /* quebra de palavras compridas / URLs */
  word-break:break-word;
  overflow-wrap:anywhere;
}

.muted{color:var(--muted); text-decoration:none}
.muted:hover{color:#d7e0f4; text-decoration:underline}
.go{display:block;text-align:center;margin-top:10px}

/* util */
.hidden{display:none!important}

/* -------- Botão 'voltar para a principal' no painel logado -------- */
#btn-home-logged{
  margin-top:10px;
  height:44px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;
  background:linear-gradient(180deg,#111827,#0c1220);
  color:#d7e0f4;
  font-weight:800;
  border:1px solid #232c44;
  box-shadow:inset 0 0 0 1px #1b243c, 0 10px 24px rgba(0,0,0,.28);
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
#btn-home-logged:hover{transform:translateY(-1px);border-color:#2a3a66;box-shadow:inset 0 0 0 1px #27345a, 0 14px 30px rgba(0,0,0,.34)}
#btn-home-logged:active{transform:translateY(0) scale(.99)}
#btn-home-logged .ico{display:grid;place-items:center}

/* -------- CTA diferente para 'Ir para os Dashboards' -------- */
.btn-dash{
  margin-top:10px;
  height:44px;
  border-radius:999px;
  padding:0 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;
  font-weight:900; letter-spacing:.2px;
  color:#eaf0ff;

  /* borda gradiente + fundo escuro (neutro) */
  background:
    linear-gradient(180deg,#0f1420,#0b101a) padding-box,
    linear-gradient(90deg, #111111, #141414) border-box;
  border:2px solid transparent;

  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 3px rgba(139,157,255,.12) inset;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-dash:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(0,0,0,.4), 0 0 0 4px rgba(139,157,255,.18) inset;
}
.btn-dash:active{ transform:translateY(0) scale(.99) }
.btn-dash .ico-right{ display:grid;place-items:center }


/* ---- Corrige fundo branco do autofill (Chrome/Edge) ---- */
.field-pill input:-webkit-autofill,
.field-pill input:-webkit-autofill:hover,
.field-pill input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important; /* cor do texto */
  caret-color: var(--ink);
  /* pinta o fundo com a mesma cor do input */
  -webkit-box-shadow: 0 0 0 1000px #0c1220 inset !important;
          box-shadow: 0 0 0 1000px #0c1220 inset !important;
  border-radius: 999px;
  transition: background-color 9999s ease-out 0s; /* evita flash */
}

/* quando o campo está focado, usamos a cor de foco do seu input */
.field-pill:focus-within input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0e172b inset !important;
          box-shadow: 0 0 0 1000px #0e172b inset !important;
}



/* =========== Tema monocromático (grayscale) para a tela logada =========== */
:root{
  --mono-1: #ffffff;
  --mono-2: #e9edf3;
  --mono-3: #cfd5df;
  --mono-4: #aeb6c3;
  --mono-5: #8791a1;
  --mono-6: #2a313e;
  --mono-7: #141922;
}

/* halo neutro atrás do card (sem cor) */
.wrap::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(520px 340px at 50% 40%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(680px 420px at 60% 70%, rgba(255,255,255,.06), transparent 65%);
  mix-blend-mode: screen;
  opacity:.9;
}

/* CARD — vidro escuro com borda gradiente cinza */
.container{
  position:relative;
  width:min(520px, 92vw);
  padding:30px 26px 24px;
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(20,24,32,.96), rgba(12,16,24,.98)) padding-box,
    linear-gradient(120deg, rgba(255,255,255,.20), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  backdrop-filter: saturate(130%) blur(6px);
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 10px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  animation: mono-rise .38s ease-out both;
}
@keyframes mono-rise{
  from{ transform: translateY(8px); opacity:0 }
  to  { transform: translateY(0);  opacity:1 }
}

/* anel discreto externo */
.container::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 60px rgba(255,255,255,.10);
  pointer-events:none;
}

/* Título em gradiente branco → cinza claro */
.title{
  letter-spacing:.2px; margin-bottom:4px;
  background: linear-gradient(90deg, var(--mono-1), var(--mono-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Subtítulo/hint neutro */
.hint{ color: var(--mono-4); opacity:.95 }

/* Mensagem (email/estado) como badge neutro */
.msg{
  margin:14px 0 14px; display:inline-block; max-width:100%;
  padding:10px 12px; border-radius:12px; font-weight:900;
  color: var(--mono-2);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 22px rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.25);
  text-align:center;
}

/* ==================== Botões em grayscale ==================== */

/* primário — pill branco com aro cinza */
.btn{
  height:48px; border-radius:999px; font-weight:900; letter-spacing:.2px;
  color:#0f1420;
  background:
    linear-gradient(180deg, var(--mono-1), var(--mono-2)) padding-box,
    linear-gradient(120deg, rgba(255,255,255,.25), rgba(255,255,255,.10)) border-box;
  border:2px solid transparent;
  box-shadow: 0 16px 34px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.08) inset;
  transition: transform .12s ease, box-shadow .25s ease, filter .2s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(0,0,0,.42), 0 0 0 5px rgba(255,255,255,.12) inset;
}

/* secundários — escuros com borda/anel cinza */
.btn-secondary, #btn-home-logged{
  height:46px; border-radius:999px; color: var(--mono-2); font-weight:900;
  background:
    linear-gradient(180deg, #121725, #0e131d) padding-box,
    linear-gradient(90deg, #2a2f3a, #1e232c) border-box;
  border:2px solid transparent;
  box-shadow: 0 12px 28px rgba(0,0,0,.30), 0 0 0 3px rgba(255,255,255,.08) inset;
}
.btn-secondary:hover, #btn-home-logged:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.38), 0 0 0 4px rgba(255,255,255,.12) inset;
}

/* CTA Dashboards — destaque neutro (preto/cinza) */
.btn-dash{
  height:46px; border-radius:999px; padding:0 18px;
  font-weight:900; letter-spacing:.25px; color:#f3f6fb;
  background:
    linear-gradient(180deg,#0f141c,#0b1016) padding-box,
    linear-gradient(90deg, #353a44, #1f242d) border-box;
  border:2px solid transparent;
  box-shadow: 0 14px 30px rgba(0,0,0,.34), 0 0 0 4px rgba(255,255,255,.10) inset;
}
.btn-dash:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(0,0,0,.42), 0 0 0 5px rgba(255,255,255,.14) inset;
}

/* largura total nos botões dentro do card */
.container .btn,
.container .btn-secondary,
.container #btn-home-logged,
.container .btn-dash{ width:100%; }

/* foco acessível em cinza/branco */
.btn:focus-visible,
.btn-secondary:focus-visible,
#btn-home-logged:focus-visible,
.btn-dash:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 0 0 6px rgba(255,255,255,.10);
}