/* Página pública "Veja o seu site" (modelos/criar). Arquivo à parte porque a CSP não aceita <style> embutido. */
.cr-grade{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;align-items:start;margin:22px 0}
@media (max-width:860px){.cr-grade{grid-template-columns:minmax(0,1fr)}}
.cr-grade>*{min-width:0}
.cr-topo .botao{white-space:normal;max-width:100%}
.cr-form,.cr-form label{min-width:0}
.cr-form{grid-template-columns:minmax(0,1fr);background:#0C1324;border:1px solid rgba(128,128,128,.35);border-radius:16px;padding:20px;display:grid;gap:14px}
.cr-form label{display:grid;gap:6px;font-weight:600;font-size:16px}
.cr-form small{font-weight:400;color:#98A3B8;font-size:14px}
.cr-form input,.cr-form select{width:100%;min-width:0;min-height:48px;padding:0 14px;border-radius:10px;border:1px solid rgba(128,128,128,.55);background:#03050C;color:#EEF2F9;font:inherit}
.cr-form input:focus-visible,.cr-form select:focus-visible{outline:3px solid #5C95FF;outline-offset:2px}
.cr-erro{color:#ffb4b4;margin:0;font-size:15px}
.cr-res{display:grid;gap:12px}
.cr-topo{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cr-topo button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(128,128,128,.55);background:transparent;color:inherit;font:inherit;cursor:pointer}
.cr-topo button[aria-pressed=true]{background:#5C95FF;border-color:#5C95FF;color:#03050C;font-weight:700}
.cr-frame{width:100%;height:640px;border:1px solid rgba(128,128,128,.45);border-radius:14px;background:#fff}
.cr-frame.cel{max-width:390px;margin-inline:auto;display:block}
.cr-vazio{padding:40px 20px;text-align:center;color:#98A3B8;border:1px dashed rgba(128,128,128,.45);border-radius:14px}
.cr-nota{color:#98A3B8;font-size:15px}

/* V16: o atributo hidden perdia para display:grid/flex e mostrava a moldura branca vazia */
.cr-res[hidden],.cr-vazio[hidden],.cr-erro[hidden],#cr-zap[hidden]{display:none}