:root {
  --fundo: #07141d;
  --painel: rgba(10, 29, 41, .94);
  --painel-forte: rgba(7, 25, 35, .88);
  --borda: rgba(176, 212, 229, .18);
  --texto: #f4fbff;
  --suave: #a8c4d2;
  --destaque: #58d39b;
  --azul: #62bcff;
  --amarelo: #ffd36f;
  --vermelho: #ff9b9b;
  --sombra: 0 24px 60px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(98, 188, 255, .18), transparent 28rem),
    linear-gradient(180deg, #06131c 0%, #091b28 100%);
  color: var(--texto);
  font-family: "Segoe UI", Arial, sans-serif;
}

a {
  color: inherit;
}

.pagina-manual {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

.hero-manual,
.bloco-manual,
.passo-fluxo,
.card-resumo {
  border: 1px solid var(--borda);
  border-radius: 24px;
  background: var(--painel);
  box-shadow: var(--sombra);
  backdrop-filter: blur(12px);
}

.hero-manual {
  display: grid;
  gap: 18px;
  padding: 24px;
  margin-bottom: 20px;
}

.hero-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hero-topo a,
.atalhos-manual a,
.botao-manual-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
}

.hero-topo a {
  background: transparent;
  border: 1px solid rgba(176, 212, 229, .22);
}

.manual-logo {
  width: min(100%, 320px);
  height: auto;
}

.rotulo-manual {
  margin: 0 0 6px;
  color: var(--azul);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-manual h1,
.bloco-manual h2,
.manual-admin-card h3 {
  margin: 0;
}

.hero-manual p,
.bloco-manual p,
.bloco-manual li,
.passo-fluxo p,
.card-resumo p {
  color: var(--suave);
  line-height: 1.6;
}

.grade-resumo,
.grade-fluxo,
.grade-checklist,
.grade-manuais-admin {
  display: grid;
  gap: 16px;
}

.grade-resumo {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-resumo {
  padding: 18px;
}

.bloco-manual {
  padding: 22px;
  margin-bottom: 18px;
}

.grade-fluxo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.passo-fluxo {
  position: relative;
  padding: 18px 18px 18px 72px;
}

.passo-numero {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(88, 211, 155, .18);
  color: var(--destaque);
  font-weight: 900;
}

.grade-checklist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checklist,
.atalhos-manual {
  display: grid;
  gap: 10px;
}

.checklist {
  padding-left: 18px;
}

.checklist li::marker {
  color: var(--destaque);
}

.atalhos-manual a,
.botao-manual-admin {
  background: var(--destaque);
  color: #052117;
}

.grade-manuais-admin {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.manual-admin-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(176, 212, 229, .12);
  border-radius: 18px;
  background: var(--painel-forte);
}

.manual-admin-card p {
  margin: 0;
}

.fluxo-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul);
  font-size: 1.6rem;
  font-weight: 900;
}

.destaque-alerta {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 211, 111, .35);
  background: rgba(255, 211, 111, .08);
}

.destaque-alerta strong {
  color: #ffe9a0;
}

@media (max-width: 900px) {
  .grade-resumo,
  .grade-fluxo,
  .grade-checklist,
  .grade-manuais-admin {
    grid-template-columns: 1fr;
  }
}