/* Casamento Pronto · gerador online: só o que a camada online acrescenta (os tokens --vinho, --ouro etc. vêm da
   página aprovada do estilo). Letra >= 15 px, alvo >= 44 px, contraste >= 4,5 (o mesmo acessa.js do gerador). */
.cp-pill-l{display:flex;justify-content:center;margin:2px 0 4px}
.cp-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:0 16px;border-radius:999px;
  border:1px solid rgba(228,200,147,.5);background:rgba(255,255,255,.04);color:#EEE2DB;font:500 15px/1.2 var(--sans);cursor:pointer}
.cp-pill b{color:var(--ouro-cl);font-weight:700}
.cp-pill .cp-troca{color:var(--ouro-cl);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cp-pill .cp-troca::before{content:"·";display:inline-block;margin-right:8px;text-decoration:none;color:#B8A8A6}
.cp-pill>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-pill:active{background:rgba(255,255,255,.1)}

.cp-regra{margin:-4px 0 14px;font-size:15px;line-height:1.45;color:var(--suave)}
.cp-regra.aviso{color:#7A4A12;background:#FBF1DF;border:1px solid #E9CF9D;border-radius:10px;padding:10px 12px}
.cp-regra.erro{color:var(--erro);background:var(--erro-bg);border:1px solid var(--erro-cl);border-radius:10px;padding:10px 12px}

.cp-botoes{display:grid;gap:10px;margin-top:16px}
.cp-botoes .lnk{justify-self:center}
.cp-ajuda{margin:4px 0 10px}
.cp-casal{margin:6px 0 8px;font:400 30px/1.15 var(--serif);font-style:italic;color:var(--vinho);text-align:center}
.cp-regras{margin:8px 0 0;padding-left:20px;font-size:16px;line-height:1.45;color:var(--texto)}
.cp-regras li{margin:0 0 6px}
#cp-folha .miud{color:var(--suave)}
#cp-folha{max-height:88vh;overflow:auto}
.cp-qr{display:flex;justify-content:center;margin:6px 0 4px}
.cp-qr svg{width:220px;height:220px;display:block;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--linha)}

.cp-form{margin:4px 16px 0}
/* a mensagem de erro das telas online (e-mail + CPF, link de outro aparelho): .msg-erro da página aprovada é flex (ícone +
   texto); o texto vem num <span> (online.js, msgErro) e ocupa o resto da linha. Só dentro de #cp-erro: o resto da página
   aprovada não muda. Antes (06/11) o texto e o <b> do e-mail viravam itens flex e o texto saía uma palavra por linha. */
#cp-erro .msg-erro>span{flex:1 1 auto;min-width:0}
.cp-form .btn{margin-top:4px}
.cp-aviso{margin:4px 16px 14px;padding:12px 14px;border-radius:12px;background:#FBF1DF;border:1px solid #E9CF9D;color:#5E3A0E;font-size:16px;line-height:1.45}
.cp-dica{font-size:16px;line-height:1.45}
.cp-dica p{margin:0 0 10px}
.cp-dica p:last-child{margin:0}
.cp-pad{padding:0 16px}
.cp-nowrap{white-space:nowrap}

.cp-lista{margin:4px 16px 24px}
#cp-folha .cp-lista{margin:8px 0 0}
.cp-estilos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cp-est{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px;border-radius:14px;
  border:1.5px solid var(--borda);background:#fff;color:var(--tinta);font:600 17px/1.2 var(--sans);text-align:left;cursor:pointer}
.cp-est.at{border:2px solid var(--vinho);box-shadow:0 0 0 4px rgba(168,134,79,.22)}
.cp-est-s{font:500 15px/1.2 var(--sans);color:var(--ouro-tx)}
.cp-est[disabled]{background:var(--papel-2);color:var(--suave);cursor:default;border-style:dashed}
.cp-est[disabled] .cp-est-s{color:var(--suave)}

.cp-aparelhos{list-style:none;margin:6px 0 0;padding:0}
.cp-aparelhos li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--linha);font-size:16px;color:var(--tinta)}
.cp-aparelhos li .miud{display:block;margin:2px 0 0}
.cp-aparelhos .lnk{min-width:64px;padding:0 10px;flex:none}
.cp-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--papel-2);color:var(--ouro-tx);font:600 15px/1.3 var(--sans)}
.cp-site{margin:10px 0 0;font-size:16px;line-height:1.45}
.escura .cp-site{color:#E3D5CE}
/* tela 'pronto': sem a lista do convite com fotos (06/11), a linha do site vem logo depois do título do passo 2 */
.prox h2+.cp-site{margin-top:0}
/* /bem-vinda sem token: o e-mail do suporte no pé */
.cp-rodape{padding:14px 24px 28px}
/* as folhas são brancas também nas telas escuras (vídeo pronto, montando): o link volta à cor das telas claras
   (o '.escura .lnk' da página deixava 'Fechar', 'Sair' e 'Desconectar' em dourado claro no branco, contraste 1,6) */
.escura .folha .lnk{color:var(--vinho)}