/* css/instalar.css — o cartão "Instalar o Kobalski" / "Põe o Kobalski na Tela de Início" (js/instalar.js), no app
   (index.html: tela Entrar e Início) e na página do convite (convite.html). Usa as cores de cada página quando
   existem (var(--texto) etc.) e tem as suas de reserva. Celular primeiro: nada mais largo que a tela (360 px). */

.instalar-lugar[hidden] { display: none !important; }

.instalar-cartao {
  margin: 14px 0 4px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(217, 178, 74, 0.45);
  background: rgba(217, 178, 74, 0.07);
  color: var(--texto, #f3eef8);
  text-align: left;
  overflow-wrap: anywhere;
}
.instalar-titulo { margin: 0 0 4px; font-weight: 800; font-size: 1.02rem; line-height: 1.3; color: #f0cf6b; }
.instalar-sub { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.45; color: var(--texto-2, var(--suave, #c9c3d6)); }
.instalar-sub b { color: var(--texto, #f3eef8); }

.instalar-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: passo; }
.instalar-passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 22px 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--texto-2, var(--suave, #c9c3d6));
}
.instalar-passos li::before {
  content: counter(passo);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #1a1200;
  background: #d9b24a;
}
.instalar-passos b { color: var(--texto, #f3eef8); }
.instalar-fig {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.instalar-fig svg { width: 22px; height: 22px; fill: none; stroke: #4da3ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.instalar-fig img { width: 28px; height: 28px; border-radius: 7px; display: block; }

.instalar-codigo {
  margin: 12px 0 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f0cf6b;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  user-select: all;
  -webkit-user-select: all;
}

.instalar-botao { width: 100%; min-height: 48px; margin-top: 2px; }
.instalar-depois {
  display: block;
  margin: 8px auto 0;
  padding: 8px 14px;
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--texto-3, var(--fraco, #9a90a8));
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}