/*
 * Camada do tema morto-vivo, por cima do tema central. O que é próprio do Dead Alive fica em variáveis --alive-*;
 * os componentes abaixo só usam var(--...).
 */
:root {
  --alive-font-title: var(--font-head);
  --alive-font-alert: 'Creepster', var(--font-head);
  --alive-glow: #8dff6a;
  --alive-glow-rgb: 141, 255, 106;
  --alive-blood: #c01f3c;
  --alive-night: #07090c;
  --alive-fog: rgba(141, 255, 106, .06);
  --alive-alert-bg: rgba(7, 9, 12, .86);
  --alive-alert-text: #f4ffef;
  --alive-space: 16px;
  --alive-max: 760px;
  --alive-qr-bg: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, var(--alive-fog), transparent 70%), var(--bg);
  color: var(--text);
  font-family: var(--font-interface);
  line-height: 1.5;
  min-height: 100vh;
}
h1, h2, h3 { font-family: var(--alive-font-title); line-height: 1.2; margin: 0 0 .5em; }
h1 .vivo { color: var(--alive-glow); text-shadow: 0 0 18px rgba(var(--alive-glow-rgb), .45); }
a { color: var(--accent-soft); }
.pagina { max-width: var(--alive-max); margin: 0 auto; padding: calc(var(--alive-space) * 2) var(--alive-space) calc(var(--alive-space) * 4); }
.topo { display: flex; justify-content: space-between; align-items: center; gap: var(--alive-space); margin-bottom: calc(var(--alive-space) * 1.5); flex-wrap: wrap; }
.marca { font-family: var(--alive-font-title); font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.marca .vivo { color: var(--alive-glow); }
.cartao {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: calc(var(--alive-space) * 1.25);
  margin-bottom: var(--alive-space);
}
.sub { color: var(--text-soft); margin: 0 0 var(--alive-space); }
.mudo { color: var(--muted); font-size: .9rem; }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--alive-space); }
@media (max-width: 620px) { .grade { grid-template-columns: 1fr; } }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--text-soft); }
.campo { margin-bottom: var(--alive-space); }
input[type=text], input[type=number], textarea, select {
  width: 100%;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font: inherit;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--alive-glow); outline-offset: 1px; }
.marcar { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--text); }
.marcar input { margin-top: 4px; accent-color: var(--alive-glow); }
.botoes { display: flex; gap: 10px; flex-wrap: wrap; }
button, .botao {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  border: 1px solid var(--control-line);
  background: var(--control);
  color: var(--control-text);
  padding: 10px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
button:hover, .botao:hover { background: var(--control-hover); }
button.primario, .botao.primario {
  background: var(--alive-glow);
  border-color: var(--alive-glow);
  color: var(--alive-night);
  box-shadow: 0 0 22px rgba(var(--alive-glow-rgb), .25);
}
button.primario:hover { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: wait; }
.aviso {
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  color: var(--text-soft);
  font-size: .9rem;
  margin: 8px 0 var(--alive-space);
}
.aviso.forte { border-color: var(--yellow); }
.erro { color: var(--red); font-weight: 600; min-height: 1.5em; }
.ok { color: var(--green); font-weight: 600; }
.linha-link { display: flex; gap: 8px; align-items: center; margin-bottom: var(--alive-space); }
.linha-link input { flex: 1; min-width: 0; }
.qr { background: var(--alive-qr-bg); border-radius: var(--radius-md); padding: 8px; width: 180px; height: 180px; display: block; }
.escondido { display: none !important; }
.contador { float: right; color: var(--muted); font-weight: 400; }
.lingua { background: none; border: 1px solid var(--line); padding: 6px 10px; font-size: .85rem; }
.estado { font-family: var(--alive-font-title); font-size: 1.4rem; }