/* Base do web (landing + app da família). Só tokens: nenhuma cor fora de var(--okf-*). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--okf-surface);
  color: var(--okf-ink);
  font: var(--okf-font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; }
h1 { font: var(--okf-font-display); letter-spacing: -0.01em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--okf-azul); outline-offset: 2px; }

/* ícones (sprite Lucide) */
.ic { width: 20px; height: 20px; flex: none; stroke-width: 2; vertical-align: -4px; }
.ic-grande { width: 36px; height: 36px; }

/* logo por tema */
.so-escuro { display: none; }
:root[data-tema="escuro"] .so-claro { display: none; }
:root[data-tema="escuro"] .so-escuro { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .so-claro { display: none; }
  :root:not([data-tema]) .so-escuro { display: inline-block; }
}

/* ---------------------------------------------------------------- textos */
.titulo { font: var(--okf-font-title); }
.sobre { margin: 0 0 var(--okf-space-1); font: var(--okf-font-label); color: var(--okf-ink-muted); }
.apoio { margin: 0; color: var(--okf-ink-muted); }
.pequeno { font: var(--okf-font-caption); font-weight: 600; }
.nota { margin: var(--okf-space-4) 0 0; font: var(--okf-font-caption); font-weight: 600; color: var(--okf-ink-muted); }
.erro { margin: 0; padding: var(--okf-space-2) var(--okf-space-3); border-radius: var(--okf-radius-sm);
        background: var(--okf-vermelho-soft); color: var(--okf-ink); font: var(--okf-font-label); font-weight: 700; }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--okf-space-2);
  min-height: 52px; padding: 0 var(--okf-space-6); border: 0; border-radius: var(--okf-radius-md);
  font-family: var(--okf-family-display); font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn.ocupado { cursor: progress; }
.btn-primario { background: var(--okf-petroleo); color: var(--okf-on-petroleo); }
.btn-verde { background: var(--okf-verde-strong); color: var(--okf-on-verde); }
.btn-secundario { background: transparent; color: var(--okf-ink); box-shadow: inset 0 0 0 1.5px var(--okf-line); }
.btn-texto { background: transparent; color: var(--okf-ink); padding: 0 var(--okf-space-3); }
.perigo { color: var(--okf-coral-strong); }
.link { background: none; border: 0; padding: 0; color: var(--okf-azul); font: var(--okf-font-label);
        text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------- cartões e formulários */
.cartao { background: var(--okf-surface-raised); border-radius: var(--okf-radius-lg); box-shadow: var(--okf-shadow-card);
          padding: var(--okf-space-6); }
.form { display: flex; flex-direction: column; gap: var(--okf-space-4); }
.form form { display: flex; flex-direction: column; gap: var(--okf-space-4); }
label, legend { display: flex; flex-direction: column; gap: 6px; font: var(--okf-font-label); color: var(--okf-ink); }
label small, legend small { font: var(--okf-font-caption); color: var(--okf-ink-muted); font-weight: 600; }
/* o "(opcional)" fica na mesma linha do rótulo: campos lado a lado continuam alinhados */
label:not(.linha-chave):has(> small), legend:has(> small) { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
label:not(.linha-chave):has(> small) > :not(small) { flex: 1 0 100%; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--okf-space-2); }
legend { padding: 0; margin-bottom: var(--okf-space-2); }
input, select {
  width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--okf-line); border-radius: var(--okf-radius-sm);
  background: var(--okf-surface-sunken); color: var(--okf-ink); font: var(--okf-font-body);
}
input:focus, select:focus { outline: none; border-color: var(--okf-azul); box-shadow: 0 0 0 1px var(--okf-azul); }
input::placeholder { color: var(--okf-ink-muted); }
input:disabled { opacity: .75; }
.acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--okf-space-3); flex-wrap: wrap; }
.acoes .btn-primario { margin-left: auto; }

/* chips (papel, crianças) */
.chips { display: flex; flex-wrap: wrap; gap: var(--okf-space-2); }
.chip {
  display: inline-flex; flex-direction: row; align-items: center; min-height: 40px; padding: 0 var(--okf-space-4);
  border: 0; border-radius: var(--okf-radius-pill); background: var(--okf-surface-sunken); color: var(--okf-ink);
  font: var(--okf-font-label); cursor: pointer;
}
.chip.ativo { background: var(--okf-petroleo); color: var(--okf-on-petroleo); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:focus-visible) { outline: 2px solid var(--okf-azul); outline-offset: 2px; }
.chip-sol:has(input:checked) { background: var(--okf-sol-soft); box-shadow: inset 0 0 0 2px var(--okf-sol); }

/* selos */
.selo { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0;
        border-radius: var(--okf-radius-pill); font: var(--okf-font-caption); cursor: pointer; }
.selo .ic { width: 16px; height: 16px; vertical-align: 0; }
.selo-neutro { background: var(--okf-surface-sunken); color: var(--okf-ink-muted); }
.selo-ok { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
           background: var(--okf-verde-soft); color: var(--okf-verde-strong); align-self: center; }

/* avatares — cor = papel na família */
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  font: var(--okf-font-heading); font-size: 17px; background: var(--okf-surface-sunken); color: var(--okf-ink);
}
.avatar .ic { width: 24px; height: 24px; }
.av-grande { width: 60px; height: 60px; font-size: 22px; }
.av-azul { background: var(--okf-azul-soft); color: var(--okf-azul); }
.av-coral { background: var(--okf-coral-soft); color: var(--okf-coral-strong); }
.av-verde { background: var(--okf-verde-soft); color: var(--okf-verde-strong); }
.av-sol { background: var(--okf-sol-soft); color: var(--okf-ink); }
.av-anel.av-sol { box-shadow: inset 0 0 0 3px var(--okf-sol); }
/* com foto: a imagem cobre o círculo; o aro do papel (sombra interna) vai por cima dela */
.avatar.tem-foto { position: relative; overflow: hidden; padding: 0; }
.avatar.tem-foto > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; cursor: zoom-in; }
.avatar.tem-foto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inherit; pointer-events: none; }
.modal-zoom { padding: var(--okf-space-4); }
.zoom-foto { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--okf-space-3); }
.zoom-foto img { max-width: 100%; max-height: 78vh; border-radius: var(--okf-radius-md); object-fit: contain; }
.zoom-foto figcaption { font: var(--okf-font-heading); color: var(--okf-ink); }
/* trocar a foto: botão com a câmera no canto do avatar grande */
.foto-bloco { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.foto-editar { position: relative; display: inline-block; flex: none; }
.foto-editar .foto-botao { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: var(--okf-surface-raised); color: var(--okf-ink); cursor: pointer;
  box-shadow: 0 0 0 2px var(--okf-surface), 0 1px 4px rgb(0 0 0 / .18); }
.foto-editar .foto-botao .ic { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- telas soltas (entrar, convite) */
body.solo { min-height: 100vh; display: grid; place-items: center; padding: var(--okf-space-8) var(--okf-space-4); }
.solo-caixa { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--okf-space-6); }
.solo-caixa .cartao { width: 100%; }
.solo-logo { width: 210px; height: auto; }
.solo-rodape { margin: 0; text-align: center; color: var(--okf-ink-muted); font: var(--okf-font-caption); font-size: 13px; }
.lista-escolha { display: flex; flex-direction: column; gap: var(--okf-space-2); }
.escolha { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 var(--okf-space-4);
           border: 1px solid var(--okf-line); border-radius: var(--okf-radius-md); background: var(--okf-surface-raised);
           font: var(--okf-font-heading); cursor: pointer; }

/* ---------------------------------------------------------------- moldura do app */
body.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--okf-space-4);
  padding: var(--okf-space-6) var(--okf-space-4); border-right: 1px solid var(--okf-line); background: var(--okf-surface);
}
.lateral-logo { display: flex; justify-content: center; }
.lateral-logo img { width: 100%; height: auto; }
.menu { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.menu-item {
  display: flex; align-items: center; gap: var(--okf-space-3); min-height: 46px; padding: 0 var(--okf-space-3);
  border-radius: var(--okf-radius-md); text-decoration: none; font: var(--okf-font-label); font-size: 15px; font-weight: 700;
}
.menu-item:hover { background: var(--okf-surface-sunken); }
.menu-item.ativo, .menu-item.ativo:hover { background: var(--okf-petroleo); color: var(--okf-on-petroleo); font-weight: 800; }
.menu-item.em-breve { color: var(--okf-ink-muted); }
.lateral-familia { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--okf-space-4);
                   border-radius: var(--okf-radius-md); background: var(--okf-surface-sunken); }
.lateral-familia strong { font: var(--okf-font-heading); font-size: 15px; }
.lateral-familia > span { font: var(--okf-font-caption); color: var(--okf-ink-muted); }
.lateral-acoes { display: flex; flex-wrap: wrap; gap: var(--okf-space-3); margin-top: var(--okf-space-2);
                 font: var(--okf-font-caption); }
.lateral-acoes a, .lateral-acoes .link { color: var(--okf-ink-muted); text-decoration: none; font: var(--okf-font-caption); }
.lateral-acoes .ic { width: 14px; height: 14px; vertical-align: -2px; }
.conteudo { padding: var(--okf-space-8) 40px; min-width: 0; }
.cabeca { margin-bottom: var(--okf-space-6); }
.vazio { display: flex; flex-direction: column; align-items: center; gap: var(--okf-space-3); text-align: center;
         padding: 64px var(--okf-space-6); color: var(--okf-ink-muted); }
.vazio h2 { font: var(--okf-font-title); color: var(--okf-ink); }
.vazio p { max-width: 32rem; margin: 0; }

/* ---------------------------------------------------------------- Família e acessos (web 05) */
.faixa-criancas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--okf-space-4);
                  margin-bottom: var(--okf-space-6); }
.pessoa { display: flex; align-items: center; gap: var(--okf-space-3); padding: var(--okf-space-4) var(--okf-space-4);
          border: 0; text-align: left; cursor: pointer; border-radius: var(--okf-radius-md); }
.pessoa:disabled { cursor: default; }
.pessoa strong { display: block; font: var(--okf-font-heading); }
.pessoa small { display: block; font: var(--okf-font-caption); font-weight: 600; color: var(--okf-ink-muted); }
.pessoa.adicionar { justify-content: center; gap: var(--okf-space-2); background: transparent; box-shadow: none;
                    border: 2px dashed var(--okf-line); font: var(--okf-font-label); font-size: 16px; min-height: 92px; }

.grade-familia { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--okf-space-6); align-items: start; }
.grade-familia.so-leitura { grid-template-columns: minmax(0, 1fr); }
.tabela-rolagem { overflow-x: auto; }
.matriz { width: 100%; border-collapse: collapse; min-width: 600px; }
.matriz thead th:not(:first-child), .matriz td { width: 68px; }
.matriz thead th { padding: 0 2px var(--okf-space-3); font: var(--okf-font-caption); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
                   color: var(--okf-ink-muted); text-align: center; border-bottom: 1px solid var(--okf-line); }
.matriz thead th:first-child { text-align: left; }
.matriz td, .matriz tbody th { padding: var(--okf-space-3) 0; border-bottom: 1px solid var(--okf-line); text-align: center; }
.matriz tbody th { text-align: left; font-weight: inherit; }
.matriz tr.pendente .quem strong { color: var(--okf-ink-muted); }
.quem { display: inline-flex; align-items: center; gap: var(--okf-space-3); border: 0; background: none; padding: 0;
        text-align: left; cursor: pointer; }
.quem:disabled { cursor: default; }
.quem strong { display: block; font: var(--okf-font-heading); font-size: 16px; }
.quem small { display: block; font: var(--okf-font-caption); font-weight: 600; color: var(--okf-ink-muted); }
.matriz tbody th > .selo { display: flex; width: max-content; margin: 6px 0 0 56px; }

/* interruptor (verde = ligado) */
.chave { display: inline-flex; position: relative; cursor: pointer; }
.chave input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.chave span { width: 46px; height: 28px; border-radius: 999px; background: var(--okf-line); transition: background .15s; position: relative; }
.chave span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
                     background: var(--okf-surface-raised); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.chave input:checked + span { background: var(--okf-verde-strong); }
.chave input:checked + span::after { transform: translateX(18px); }
.chave input:focus-visible + span { outline: 2px solid var(--okf-azul); outline-offset: 2px; }
.chave input:disabled { cursor: default; }
.chave input:disabled + span { opacity: .55; }
.chave input:disabled:checked + span { opacity: .85; }

.linha-chave { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--okf-space-3);
               padding: var(--okf-space-3); border-radius: var(--okf-radius-md); background: var(--okf-surface-sunken); }
.linha-chave > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.linha-chave strong { font: var(--okf-font-label); }
.linha-chave .chave { flex: none; }
.convidar .btn-verde { width: 100%; padding: 0 var(--okf-space-3); font-size: 16px; white-space: nowrap; }
.lista-quem { list-style: none; margin: 0; padding: 0; }
.lista-quem li { display: flex; align-items: center; gap: var(--okf-space-3); padding: var(--okf-space-3) 0;
                 border-bottom: 1px solid var(--okf-line); flex-wrap: wrap; }
.lista-quem strong { display: block; font: var(--okf-font-heading); font-size: 16px; }
.lista-quem small { display: block; font: var(--okf-font-caption); font-weight: 600; color: var(--okf-ink-muted); }
.lista-quem .selo { margin-left: auto; cursor: default; }

/* ---------------------------------------------------------------- modal e avisos */
dialog.modal { width: calc(100% - 32px); border: 0; padding: var(--okf-space-6); border-radius: var(--okf-radius-lg);
               background: var(--okf-surface-raised); color: var(--okf-ink); box-shadow: var(--okf-shadow-card); }
dialog.modal::backdrop { background: rgba(10, 37, 48, .45); }
dialog.modal > .titulo, dialog.modal > .modal-cabeca, dialog.modal > .apoio { margin-bottom: var(--okf-space-4); }
.modal-fechar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%;
                background: var(--okf-surface-sunken); cursor: pointer; display: grid; place-items: center; }
.modal-cabeca { display: flex; gap: var(--okf-space-3); align-items: center; padding-right: 48px; }
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
          gap: 8px; z-index: 1000; }
.toast { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: var(--okf-radius-md);
         background: var(--okf-petroleo); color: var(--okf-on-petroleo); font: var(--okf-font-label); font-weight: 700;
         box-shadow: var(--okf-shadow-card); max-width: min(560px, calc(100vw - 32px)); }
.toast-erro { background: var(--okf-vermelho-soft); color: var(--okf-ink); }

/* ---------------------------------------------------------------- instalar, testers */
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--okf-space-2); }
.testers { max-width: 1200px; margin-inline: auto; }
.testers-logo { display: inline-block; margin-bottom: var(--okf-space-4); }
.testers-logo img { width: 200px; height: auto; }
.testers #busca { min-height: 44px; min-width: 280px; padding: 0 14px; border: 1px solid var(--okf-line);
                  border-radius: var(--okf-radius-md); background: var(--okf-surface-raised); color: var(--okf-ink);
                  font: var(--okf-font-body); }

/* ---------------------------------------------------------------- telas estreitas */
@media (max-width: 1100px) {
  .grade-familia { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  body.app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--okf-line); gap: var(--okf-space-3); }
  .menu { flex-direction: row; overflow-x: auto; }
  .menu-item { white-space: nowrap; }
  .lateral-logo img { width: min(100%, 260px); }
  .lateral-familia { margin-top: 0; }
  .conteudo { padding: var(--okf-space-6) var(--okf-space-4); }
}

/* amiguinho da criança (Fase 15) */
.amigo-titulo { font: var(--okf-font-heading); color: var(--okf-ink); margin-top: var(--okf-space-6); }
.amigo-poses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--okf-space-3); margin-top: var(--okf-space-3); }
.amigo-pose { display: flex; flex-direction: column; gap: 4px; padding: var(--okf-space-3); border-radius: var(--okf-radius-md);
  background: var(--okf-surface-raised); box-shadow: var(--okf-shadow-card); }
.amigo-pose img, .amigo-pose .amigo-vazio { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--okf-radius-md);
  background: var(--okf-sol-soft); display: grid; place-items: center; color: var(--okf-ink); }
.amigo-pose.reserva img { opacity: .45; }
.amigo-pose strong { font: var(--okf-font-heading); color: var(--okf-ink); }
.amigo-pose small { font: var(--okf-font-caption); color: var(--okf-ink-muted); min-height: 2.6em; }
.amigo-acoes { display: flex; flex-wrap: wrap; gap: var(--okf-space-2); }
/* imagem de identificação e álbum de eventos (Fase 18a) */
.amigo-perfil { display: flex; align-items: center; gap: var(--okf-space-4); margin: var(--okf-space-3) 0; }
.amigo-perfil img, .amigo-perfil .amigo-vazio { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; cursor: zoom-in;
  background: var(--okf-sol-soft); display: grid; place-items: center; color: var(--okf-ink); flex: none; }
.amigo-perfil .amigo-vazio { cursor: default; }
.amigo-perfil .amigo-acoes { flex-direction: column; align-items: flex-start; }
.album-lista { display: flex; flex-direction: column; gap: var(--okf-space-3); margin-top: var(--okf-space-4); }
.album-evento { padding: var(--okf-space-4); border-radius: var(--okf-radius-md); background: var(--okf-surface-raised);
  box-shadow: var(--okf-shadow-card); display: flex; flex-direction: column; gap: var(--okf-space-2); }
.album-evento header { display: flex; flex-direction: column; }
.album-evento header strong { font: var(--okf-font-heading); color: var(--okf-ink); }
.album-evento header small { font: var(--okf-font-caption); color: var(--okf-ink-muted); }
.album-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--okf-space-2); }
.album-foto { padding: 0; border: 0; border-radius: var(--okf-radius-md); overflow: hidden; aspect-ratio: 1; cursor: zoom-in;
  background: var(--okf-sol-soft); display: grid; place-items: center; color: var(--okf-ink); }
.album-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-vazio { padding: var(--okf-space-4) 0; }
.acoes-inicio { justify-content: flex-start; margin-top: var(--okf-space-3); }
/* criar as poses com IA (Fase 18b) */
.escolha-ia { background: var(--okf-sol-soft); border-color: transparent; margin-top: var(--okf-space-3); width: 100%; color: var(--okf-ink); }
.escolha-ia span { flex: 1; display: flex; flex-direction: column; align-items: flex-start; margin-left: var(--okf-space-3); text-align: left; }
.escolha-ia small { font: var(--okf-font-caption); color: var(--okf-ink-muted); }
.ia-credito { display: flex; align-items: center; flex-wrap: wrap; gap: var(--okf-space-2); padding: var(--okf-space-3) var(--okf-space-4);
  border-radius: var(--okf-radius-md); background: var(--okf-verde-soft); color: var(--okf-verde-strong); font: var(--okf-font-label); }
.ia-credito span { flex: 1; min-width: 180px; }
.ia-credito.sem { background: var(--okf-sol-soft); color: var(--okf-ink); }
.aviso-faixa { padding: var(--okf-space-3) var(--okf-space-4); border-radius: var(--okf-radius-md); background: var(--okf-coral-soft);
  color: var(--okf-coral-strong); font: var(--okf-font-label); }
.ia-base { display: flex; flex-wrap: wrap; gap: var(--okf-space-3); }
.ia-escolher { width: 132px; display: flex; flex-direction: column; align-items: center; gap: var(--okf-space-2); padding: var(--okf-space-3);
  border: 2px dashed var(--okf-line); border-radius: var(--okf-radius-md); background: var(--okf-surface-raised); color: var(--okf-ink);
  font: var(--okf-font-caption); cursor: pointer; }
.ia-escolher img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--okf-radius-sm); }
.ia-escolher .ic { width: 40px; height: 40px; margin: 28px 0; color: var(--okf-ink-muted); }
.ia-escolher.marcado, .ia-escolher:has(img[src^="blob:"]) { border-style: solid; border-color: var(--okf-sol); background: var(--okf-sol-soft); }
.ia-estilos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--okf-space-2); }
.ia-estilo { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--okf-space-3); border: 1.5px solid var(--okf-line);
  border-radius: var(--okf-radius-md); cursor: pointer; }
.ia-estilo input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ia-estilo:has(input:checked) { border-color: var(--okf-sol); background: var(--okf-sol-soft); }
.ia-estilo strong { font: var(--okf-font-heading); color: var(--okf-ink); }
.ia-estilo small { font: var(--okf-font-caption); color: var(--okf-ink-muted); }
.ia-confirma { flex-direction: row !important; align-items: flex-start; gap: var(--okf-space-2); font: var(--okf-font-body); }
.ia-confirma input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; }
.ia-gerando { display: flex; flex-direction: column; align-items: center; gap: var(--okf-space-3); padding: var(--okf-space-8) 0; text-align: center; }
.ia-gerando strong { font: var(--okf-font-title); color: var(--okf-ink); }
.girando { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--okf-sol-soft); border-top-color: var(--okf-sol);
  animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }
.ia-previa .amigo-pose { margin: 0; }
.ia-previa img { cursor: zoom-in; }
/* equipe · pacotes de amiguinhos (Fase 18b) */
.admin-lancar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--okf-space-2); }
.admin-lancar input, .admin-lancar select { width: auto; min-height: 40px; }
.admin-lancar input[name=creditos] { width: 72px; }
.admin-lancar input[name=nota] { width: 190px; }
.admin-lancar .btn { min-height: 40px; }