/* Sistema visual das telas de acesso e administração.
   As variáveis são as mesmas do dashboard, para as telas serem lidas como um produto só. */
:root{
  --void:#0A1019; --deck:#101B2B; --deck2:#16243A;
  --line:#233650; --line-soft:#1B2A42;
  --ink:#E7EEF9; --ink-2:#B6C6DC; --mute:#7A8EAC; --faint:#4A5D7A;
  --amber:#E9A23B; --jade:#35C79A; --coral:#F0555F; --ice:#58A6E8;
  --r:14px; --r-s:9px;
  --shadow:0 18px 44px -26px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--void); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 520px at 12% -12%, rgba(233,162,59,.10), transparent 62%),
    radial-gradient(900px 480px at 92% 4%, rgba(88,166,232,.09), transparent 60%);
  background-attachment:fixed;
}
a{color:var(--ice); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- tela de entrada ---------- */
.entrada{display:grid; place-items:center; min-height:100vh; padding:24px}
.cartao{
  width:100%; max-width:420px; background:var(--deck); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:34px 30px;
}
.marca{
  font-family:'Bricolage Grotesque',Georgia,serif; font-weight:800;
  font-size:26px; letter-spacing:-.02em; margin:0 0 4px;
}
.marca em{color:var(--amber); font-style:normal}
.sub{color:var(--mute); font-size:13.5px; margin:0 0 26px}

/* ---------- formulário ---------- */
.campo{margin-bottom:16px}
.campo label{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:7px}
.campo input, .campo select{
  width:100%; padding:11px 13px; background:var(--void); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-s);
  font-family:inherit; font-size:15px; transition:border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus{
  outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(233,162,59,.16);
}
.dica{font-size:12.5px; color:var(--faint); margin-top:6px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border:1px solid transparent; border-radius:var(--r-s);
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:filter .15s, background .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn-principal{width:100%; background:var(--amber); color:#221602}
.btn-neutro{background:var(--deck2); color:var(--ink); border-color:var(--line)}
.btn-risco{background:transparent; color:var(--coral); border-color:rgba(240,85,95,.4)}
.btn-pequeno{padding:6px 11px; font-size:13px}

/* ---------- avisos ---------- */
.aviso{padding:11px 14px; border-radius:var(--r-s); font-size:14px; margin-bottom:18px; border:1px solid}
.aviso-erro{background:rgba(240,85,95,.10); border-color:rgba(240,85,95,.35); color:#FFC2C6}
.aviso-ok{background:rgba(53,199,154,.10); border-color:rgba(53,199,154,.35); color:#A8F0D8}

/* ---------- área interna ---------- */
.topo{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:14px 22px; background:rgba(16,27,43,.86); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
}
.topo .quem{font-size:13.5px; color:var(--ink-2)}
.topo .quem strong{color:var(--ink)}
.topo nav{display:flex; align-items:center; gap:10px}
.selo{
  font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
  padding:3px 8px; border-radius:999px; background:rgba(233,162,59,.14);
  color:var(--amber); border:1px solid rgba(233,162,59,.3);
}
.conteudo{max-width:1080px; margin:0 auto; padding:34px 22px 60px}
.titulo{font-family:'Bricolage Grotesque',Georgia,serif; font-size:28px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px}
.legenda{color:var(--mute); margin:0 0 28px}

.painel{background:var(--deck); border:1px solid var(--line); border-radius:var(--r); padding:24px; margin-bottom:22px}
.painel h2{font-family:'Bricolage Grotesque',Georgia,serif; font-size:18px; margin:0 0 16px; font-weight:600}

/* ---------- tabela ---------- */
.tabela-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
th{
  text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute); font-weight:600; padding:0 12px 10px; border-bottom:1px solid var(--line);
}
td{padding:13px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(22,36,58,.5)}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; font-size:13px; color:var(--ink-2)}
.estado{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; display:inline-block}
.estado-ativo{background:rgba(53,199,154,.13); color:var(--jade)}
.estado-inativo{background:rgba(122,142,172,.14); color:var(--mute)}
.acoes{display:flex; gap:7px; flex-wrap:wrap}

.grade-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
@media (max-width:640px){
  .conteudo{padding:24px 16px 48px}
  .painel{padding:18px}
}