/* Cores e fonte do Meu Quiz: ver Design/Design System.md */
@font-face { font-family:Figtree; src:url(/ui/Figtree.ttf) format("truetype"); font-weight:300 900; font-display:swap; }
:root { --p:#D81B6E; --p2:#C2185B; --rosa:#FF2E88; --rosa-c:#FBEAF3; --tx:#2B0A1C; --mud:#6E5363; --bd:#F1DCE6; --bg:#FFF8FB; --card:#fff; --ok:#15803D; --err:#B91C1C; }
html,body { height:100%; }
body { background:var(--bg); color:var(--tx); font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.45; min-height:0; }
#app { height:100%; }
h2,h3,h4,h5 { margin:0 0 8px; } h5 { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mud); margin:12px 0 6px; }
a { color:var(--p); text-decoration:none; }
input,select,textarea { font:inherit; color:var(--tx); background:#fff; border:1px solid var(--bd); border-radius:8px; padding:8px 10px; width:100%; outline:none; min-width:0; }
input[type=checkbox] { width:auto; accent-color:var(--p); } input[type=color] { width:38px; height:36px; padding:2px; flex:none; }
input:focus,select:focus,textarea:focus { border-color:var(--p); box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 15%, transparent); }
textarea { resize:vertical; } .mono { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border:1px solid var(--bd); background:#fff; border-radius:8px; font:inherit; font-weight:600; color:var(--tx); cursor:pointer; white-space:nowrap; }
.btn:hover:not(:disabled) { background:#f4f4f5; } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.p { padding:5px 10px; font-size:.82rem; } .btn.primario { background:var(--p); border-color:var(--p); color:#fff; } .btn.primario:hover:not(:disabled) { background:var(--p2); border-color:var(--p2); } .btn.perigo { background:var(--err); border-color:var(--err); color:#fff; } .btn.perigo:hover:not(:disabled) { background:var(--err); filter:brightness(1.08); } .btn.largo { width:100%; }
.icone { background:none; border:0; cursor:pointer; padding:4px 7px; border-radius:6px; font-size:15px; color:inherit; line-height:1; display:inline-flex; align-items:center; justify-content:center; } .icone:hover:not(:disabled) { background:#0000000d; } .icone:disabled { opacity:.3; cursor:default; }
.ic { display:inline-flex; align-items:center; justify-content:center; vertical-align:-0.2em; flex:none; } .ic svg { display:block; }
.paleta-ic { color:var(--p); display:flex; } .camada-ic { color:var(--mud); display:flex; } .props-h b { display:inline-flex; align-items:center; gap:6px; }
.link { background:none; border:0; color:var(--p); cursor:pointer; font:inherit; padding:0; }
.mudo { color:var(--mud); } .centro { text-align:center; } .espaco { flex:1; }
.linha { display:flex; gap:8px; align-items:center; } .linha > input { flex:1; } .duas { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.campo { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; } .campo > span { font-weight:600; font-size:.82rem; } .campo small { color:var(--mud); }
.chave { display:flex; align-items:center; gap:8px; margin-bottom:10px; cursor:pointer; }
.seg { display:inline-flex; background:#f4f4f5; border-radius:8px; padding:3px; gap:2px; } .seg button { border:0; background:none; font:inherit; font-size:.82rem; padding:5px 11px; border-radius:6px; cursor:pointer; color:var(--mud); white-space:nowrap; } .seg button.on { background:#fff; color:var(--tx); font-weight:600; box-shadow:0 1px 2px #0002; }
.carregando { padding:40px; text-align:center; color:var(--mud); }
.toasts { position:fixed; bottom:16px; right:16px; display:grid; gap:8px; z-index:200; } .toast { background:#18181b; color:#fff; padding:10px 14px; border-radius:8px; max-width:360px; box-shadow:0 8px 24px #0004; } .toast.erro { background:var(--err); }
.fundo-modal { position:fixed; inset:0; background:#0006; display:grid; place-items:center; z-index:100; padding:16px; } .modal { background:#fff; border-radius:12px; width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column; } .modal header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--bd); } .modal h3 { margin:0; } .modal-corpo { padding:16px 18px; overflow:auto; } .acoes { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.auth { min-height:100%; display:grid; place-items:center; padding:16px; } .auth-c { background:#fff; border:1px solid var(--bd); border-radius:12px; padding:28px; width:100%; max-width:380px; } .auth .btn.largo { margin-top:6px; } .auth-l { text-align:center; margin:14px 0 0; }
.marca { display:inline-flex; align-items:center; gap:.4em; font-weight:900; color:var(--tx); font-size:1.15rem; letter-spacing:-.012em; } .marca img { width:1.75em; height:1.75em; flex:none; } .auth .marca { font-size:1.5rem; margin-bottom:14px; }
.topo { display:flex; align-items:center; gap:18px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--bd); } .topo nav { display:flex; gap:14px; flex:1; } .topo nav a { color:var(--tx); font-weight:500; }
.pagina { max-width:1100px; margin:0 auto; padding:20px; } .pagina.estreita { max-width:680px; }
.barra { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; } .barra h2,.barra h4 { margin:0; } .busca { max-width:220px; } .uso { color:var(--mud); font-size:.85rem; } .barra select { width:auto; }
.vazio { text-align:center; padding:60px 20px; background:#fff; border:1px dashed var(--bd); border-radius:12px; }
.funis { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; } .funil { background:#fff; border:1px solid var(--bd); border-radius:12px; padding:16px; cursor:pointer; transition:border-color .15s; } .funil:hover { border-color:var(--p); } .funil-t { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; } .funil-t h4 { margin:0; font-size:1rem; }
.funil-m { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0; } .funil-m b { display:block; font-size:1.05rem; } .funil-m small { color:var(--mud); font-size:.72rem; } .funil-a { display:flex; gap:6px; }
.tag { font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:99px; background:color-mix(in srgb, var(--p) 12%, transparent); color:var(--p); white-space:nowrap; } .tag.ok { background:#dcfce7; color:#166534; } .tag.leve { background:#f4f4f5; color:var(--mud); }
.grade-modelos { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-top:12px; } .modelo { text-align:left; background:#fff; border:1px solid var(--bd); border-radius:10px; padding:12px; cursor:pointer; font:inherit; display:flex; flex-direction:column; gap:3px; } .modelo:hover { border-color:var(--p); } .modelo small { color:var(--mud); } .modelo em { font-style:normal; font-size:.72rem; color:var(--p); }
.caixa { background:#fff; border:1px solid var(--bd); border-radius:10px; padding:14px; margin-bottom:14px; } .token { display:block; background:#f4f4f5; padding:8px 10px; border-radius:6px; font-size:12px; word-break:break-all; margin:6px 0; }
.linha-lista { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f4f4f5; }
.planos { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } .plano { background:#fff; border:1px solid var(--bd); border-radius:12px; padding:18px; } .plano.atual { border-color:var(--p); } .preco { font-size:1.8rem; font-weight:800; } .preco small { font-size:.85rem; color:var(--mud); font-weight:400; } .plano ul { padding-left:18px; }
.tabela-box { overflow:auto; background:#fff; border:1px solid var(--bd); border-radius:10px; } .tabela { width:100%; border-collapse:collapse; font-size:.85rem; } .tabela th { text-align:left; padding:9px 12px; background:#fafafa; color:var(--mud); font-weight:600; white-space:nowrap; border-bottom:1px solid var(--bd); } .tabela td { padding:9px 12px; border-top:1px solid #f4f4f5; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } tbody tr[data-lead] { cursor:pointer; } tbody tr[data-lead]:hover { background:#fafafa; }
.paginas { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:12px; } .detalhes { display:grid; grid-template-columns:minmax(120px,1fr) 2fr; gap:6px 12px; margin:0; } .detalhes dt { color:var(--mud); } .detalhes dd { margin:0; overflow-wrap:anywhere; }
.editor { height:100%; display:flex; flex-direction:column; overflow:hidden; } .ed-top { display:flex; align-items:center; gap:10px; padding:7px 12px; background:#fff; border-bottom:1px solid var(--bd); } .ed-titulo { width:180px; border-color:transparent; font-weight:600; } .ed-abas { display:flex; gap:2px; flex:1; justify-content:center; } .ed-abas button { background:none; border:0; font:inherit; font-weight:500; padding:7px 11px; border-radius:7px; cursor:pointer; color:var(--mud); } .ed-abas button.on { background:color-mix(in srgb, var(--p) 11%, transparent); color:var(--p); font-weight:600; } .ed-acoes { display:flex; align-items:center; gap:6px; } .status { font-size:.76rem; color:var(--mud); min-width:62px; text-align:right; } .status.erro { color:var(--err); }
.faixa { background:#fef9c3; color:#713f12; padding:7px 14px; display:flex; gap:10px; align-items:center; font-size:.85rem; } .ed-corpo { flex:1; display:flex; min-height:0; } .ed-corpo.travado { pointer-events:none; opacity:.55; }
.etapas { width:210px; flex:none; background:#fff; border-right:1px solid var(--bd); display:flex; flex-direction:column; min-height:0; } .etapas-h { display:flex; justify-content:space-between; align-items:center; padding:10px; } .etapas-l { flex:1; overflow:auto; padding:0 6px 8px; } .etapa-i { display:flex; align-items:center; gap:7px; padding:8px; border-radius:8px; cursor:pointer; } .etapa-i:hover { background:#f4f4f5; } .etapa-i.on { background:color-mix(in srgb, var(--p) 11%, transparent); } .etapa-i .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .n { width:20px; height:20px; border-radius:6px; background:#e4e4e7; font-size:.7rem; display:grid; place-items:center; font-weight:700; flex:none; } .etapa-a { display:none; } .etapa-i:hover .etapa-a { display:flex; }
.etapas > .link { padding:8px; }
.paleta { width:176px; flex:none; background:#fff; border-right:1px solid var(--bd); overflow:auto; padding:10px; } .paleta-g { display:grid; grid-template-columns:1fr 1fr; gap:5px; } .paleta-i { display:flex; flex-direction:column; align-items:center; gap:2px; background:#fafafa; border:1px solid var(--bd); border-radius:8px; padding:7px 3px; font:inherit; font-size:.7rem; cursor:grab; color:var(--tx); } .paleta-i:hover { border-color:var(--p); } .paleta-i span { font-size:1rem; line-height:1.2; }
.canvas-area { flex:1; min-width:0; overflow:auto; padding:20px; display:flex; justify-content:center; background:#f4f4f5; }
.canvas { width:100%; max-width:390px; min-height:640px; align-self:flex-start; background:var(--fundo); border-radius:14px; box-shadow:0 8px 28px #0002; padding:0 16px 24px; color:var(--texto); font-family:var(--fonte-c); font-size:var(--texto-tam); transition:max-width .2s; } .canvas.d-tablet { max-width:640px; } .canvas.d-desktop { max-width:960px; } .canvas-topo { padding:12px 0; display:flex; flex-direction:column; gap:8px; align-items:center; } .canvas-topo .qz-prog { width:100%; } .canvas-lista { display:flex; flex-wrap:wrap; column-gap:6px; }
.camada-box { min-width:0; } .camada { position:relative; border-radius:8px; outline:1px dashed transparent; outline-offset:2px; cursor:pointer; } .camada:hover { outline-color:#a1a1aa; } .camada.sel { outline:2px solid var(--p); } .camada-tag { position:absolute; top:-9px; left:6px; background:var(--p); color:#fff; font-size:.62rem; padding:0 6px; border-radius:4px; z-index:3; display:none; font-family:Figtree,system-ui; } .camada:hover .camada-tag,.camada.sel .camada-tag { display:block; } .visual { pointer-events:none; } .visual .qz-input,.visual .qz-op { pointer-events:none; }
.zona { height:10px; border-radius:4px; width:100%; transition:height .1s; } .zona.on { height:30px; background:color-mix(in srgb, var(--p) 22%, transparent); outline:2px dashed var(--p); } .vazio-drop { width:100%; border:2px dashed var(--bd); border-radius:10px; padding:50px 16px; text-align:center; color:var(--mud); }
.props { width:310px; flex:none; background:#fff; border-left:1px solid var(--bd); overflow:auto; } .props-h { display:flex; justify-content:space-between; align-items:center; padding:11px 14px 6px; } .props-c { padding:8px 14px 20px; } .abas-p { margin:0 14px; display:flex; } .abas-p button { flex:1; } .grupo-campos { border-top:1px solid #f4f4f5; padding-top:6px; margin-bottom:10px; }
.camadas-lista { padding:0 14px 16px; } .camada-l { display:flex; align-items:center; gap:7px; padding:5px 6px; border-radius:6px; cursor:pointer; } .camada-l:hover,.camada-l.on { background:#f4f4f5; } .camada-l .t { flex:1; }
.lista { margin-bottom:12px; } .lista-t { font-weight:600; font-size:.82rem; display:block; margin-bottom:5px; } .lista-i { border:1px solid var(--bd); border-radius:8px; margin-bottom:6px; } .lista-h { display:flex; align-items:center; } .lista-tit { flex:1; min-width:0; text-align:left; background:none; border:0; font:inherit; padding:7px 8px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .alca { color:#a1a1aa; margin-right:5px; } .lista-c { padding:8px; border-top:1px solid #f4f4f5; }
.rico { border:1px solid var(--bd); border-radius:8px; } .rico-bar { display:flex; flex-wrap:wrap; gap:1px; padding:3px; border-bottom:1px solid var(--bd); background:#fafafa; border-radius:8px 8px 0 0; } .rico-bar button { background:none; border:0; padding:3px 6px; font-size:.76rem; cursor:pointer; border-radius:4px; min-width:24px; } .rico-bar button:hover { background:#e4e4e7; } .rico-cor { position:relative; font-weight:700; padding:3px 6px; cursor:pointer; font-size:.76rem; } .rico-cor input { position:absolute; inset:0; opacity:0; width:100%; height:100%; padding:0; } .rico-ed { padding:8px 10px; min-height:70px; outline:none; color:var(--tx); } .rico-ed h1,.rico-ed h2,.rico-ed h3 { color:var(--tx); } .rico-vars { display:grid; padding:4px; border-bottom:1px solid var(--bd); max-height:150px; overflow:auto; } .rico-vars button { text-align:left; background:none; border:0; padding:4px 6px; cursor:pointer; font:inherit; font-size:.78rem; }
.cor-l { display:flex; gap:6px; align-items:center; } .cor-p { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; } .cor-p button { width:20px; height:20px; border-radius:5px; border:1px solid #0002; cursor:pointer; padding:0; }
.emoji-campo { position:relative; display:flex; gap:6px; flex-wrap:wrap; } .emoji-v { width:60px; text-align:center; font-size:1.1rem; } .emoji-grade { position:absolute; z-index:30; top:100%; left:0; width:270px; background:#fff; border:1px solid var(--bd); border-radius:8px; padding:6px; display:grid; grid-template-columns:repeat(8,1fr); box-shadow:0 8px 24px #0003; max-height:200px; overflow:auto; } .emoji-grade button { background:none; border:0; font-size:1.05rem; cursor:pointer; padding:2px; }
.imagem-campo { display:grid; gap:6px; } .mini { width:100%; max-height:110px; object-fit:contain; background:#f4f4f5; border-radius:6px; } .bib { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; } .bib-i { position:relative; } .bib-i > button:first-child { width:100%; height:100px; border:1px solid var(--bd); border-radius:8px; background:#fafafa; cursor:pointer; overflow:hidden; padding:0; } .bib-i img { width:100%; height:100%; object-fit:cover; } .bib-i .icone { position:absolute; top:2px; right:2px; background:#fff; }
.regra { display:grid; gap:4px; border:1px solid var(--bd); padding:7px; border-radius:7px; margin-bottom:5px; } .regra-g { margin-bottom:8px; } .regra-ou { text-align:center; font-weight:700; font-size:.72rem; color:var(--mud); margin:4px 0; }
.ia-box { border-top:1px solid #f4f4f5; padding-top:6px; display:grid; gap:6px; } .ia-box h5 { margin-bottom:0; } .sugestoes { display:flex; flex-wrap:wrap; gap:4px; } .sugestoes button { background:#f4f4f5; border:0; border-radius:99px; font-size:.72rem; padding:3px 9px; cursor:pointer; }
.efeito-box { display:grid; gap:5px; border:1px solid var(--bd); border-radius:7px; padding:8px; margin-bottom:6px; } .efeito-box label { display:grid; grid-template-columns:1fr 80px; align-items:center; gap:6px; font-size:.8rem; }
.tela-design { flex:1; display:flex; min-height:0; } .design-p { width:330px; flex:none; background:#fff; border-right:1px solid var(--bd); overflow:auto; padding:14px; } .design-p h4 { margin-top:14px; } .design-v { flex:1; min-width:0; display:flex; } .paletas { display:flex; gap:6px; margin-bottom:10px; } .paletas button { width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--bd); cursor:pointer; }
.fluxo { flex:1; display:flex; flex-direction:column; min-width:0; } .fluxo-bar { display:flex; gap:10px; align-items:center; padding:8px 12px; background:#fff; border-bottom:1px solid var(--bd); } .fluxo-area { flex:1; overflow:auto; background:#f4f4f5 radial-gradient(#d4d4d8 1px, transparent 1px); background-size:20px 20px; } .fluxo-plano { position:relative; } .fluxo-plano svg { position:absolute; inset:0; pointer-events:none; }
.no { position:absolute; background:#fff; border:1px solid var(--bd); border-radius:10px; box-shadow:0 2px 8px #0001; cursor:grab; user-select:none; touch-action:none; } .no-t { display:flex; gap:7px; align-items:center; padding:9px 10px; font-weight:600; border-bottom:1px solid #f4f4f5; white-space:nowrap; overflow:hidden; } .no-p { padding:6px 0 8px; } .no-p small { padding:0 10px; } .no-s { position:relative; display:flex; align-items:center; height:24px; padding:0 18px 0 10px; font-size:.76rem; } .no-s span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .no-s i { position:absolute; right:-7px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--p); border:2px solid #fff; cursor:crosshair; box-shadow:0 0 0 1px var(--p); }
.pagina-dados { flex:1; overflow:auto; padding:18px; max-width:1180px; margin:0 auto; width:100%; } .cartoes { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:14px; } .cartao { background:#fff; border:1px solid var(--bd); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:2px; } .cartao strong { font-size:1.45rem; } .cartao small { color:var(--mud); } .sobe { color:var(--ok); font-size:.78rem; } .desce { color:var(--err); font-size:.78rem; }
.painel-b { background:#fff; border:1px solid var(--bd); border-radius:10px; padding:14px; margin-bottom:14px; } .serie { width:100%; height:auto; } .legenda { display:flex; gap:14px; font-size:.8rem; color:var(--mud); } .legenda i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; }
.etapa-r { display:flex; gap:10px; align-items:center; padding:6px 0; } .etapa-b { flex:1; min-width:0; } .barra-t { display:flex; justify-content:space-between; gap:10px; font-size:.84rem; } .barra-t em { color:var(--err); font-style:normal; } .barra-f { height:8px; background:#f4f4f5; border-radius:8px; overflow:hidden; margin-top:3px; } .barra-f i { display:block; height:100%; background:var(--p); border-radius:8px; } .barra-r { margin:8px 0; } .resposta-b { margin-bottom:16px; }
.mapa { display:grid; grid-template-columns:34px repeat(8,1fr); gap:3px; align-items:center; } .mapa small { color:var(--mud); font-size:.68rem; text-align:center; } .mapa i { height:18px; border-radius:3px; display:block; }
.horas { display:flex; align-items:flex-end; gap:3px; height:90px; } .horas i { flex:1; background:var(--p); border-radius:3px 3px 0 0; opacity:.75; } .saude { color:var(--mud); }
.config { flex:1; display:flex; min-height:0; } .config-nav { width:200px; flex:none; background:#fff; border-right:1px solid var(--bd); padding:10px; display:grid; align-content:start; gap:2px; } .config-nav button { text-align:left; background:none; border:0; font:inherit; padding:8px 10px; border-radius:7px; cursor:pointer; } .config-nav button.on { background:color-mix(in srgb, var(--p) 11%, transparent); color:var(--p); font-weight:600; } .config-c { flex:1; overflow:auto; padding:20px; max-width:760px; } .config-c h4 { margin-top:18px; } .config-c .btn { margin-top:2px; }
.problemas { border-radius:8px; padding:10px 12px; margin-bottom:10px; } .erro-l { background:#fee2e2; color:#991b1b; } .aviso-l { background:#fef9c3; color:#713f12; } .publicado { text-align:center; } .tour { position:fixed; z-index:90; width:290px; background:#18181b; color:#fff; padding:14px; border-radius:10px; box-shadow:0 12px 32px #0006; } .tour p { margin:6px 0 10px; } .tour .link { color:#d4d4d8; } .tour .linha { justify-content:space-between; }
@media (max-width:760px) { .topo { flex-wrap:wrap; } .topo nav { order:3; flex-basis:100%; overflow:auto; } .ed-top { flex-wrap:wrap; } .ed-abas { order:3; flex-basis:100%; overflow:auto; justify-content:flex-start; } .paleta { display:none; } .etapas { width:110px; } .props { position:fixed; right:0; bottom:0; top:auto; width:100%; max-height:45%; border-top:1px solid var(--bd); z-index:20; } .config { flex-direction:column; } .config-nav { width:auto; display:flex; overflow:auto; } .duas { grid-template-columns:1fr; } .tela-design { flex-direction:column; } .design-p { width:auto; max-height:50%; } }

.aviso-config { background:#f4f4f5; border-radius:8px; padding:8px 12px; color:var(--mud); font-size:.82rem; margin:0 0 14px; }
.pagina > .faixa { border-radius:8px; margin-bottom:12px; }
.icone-grade { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-height:180px; overflow:auto; } .icone-grade button { border:1px solid var(--bd); border-radius:6px; padding:4px; background:#fff; cursor:pointer; aspect-ratio:1; } .icone-grade button.on { border-color:#6d28d9; } .icone-grade svg { width:100%; height:100%; }
.canvas { padding:12px; display:flex; flex-direction:column; gap:1rem; } .canvas-lista { display:flex; flex-wrap:wrap; margin-inline:calc(var(--gap) * -1); } .camada-box { padding:var(--gap); min-width:0; position:relative; } .canvas .qz-topo { max-width:none; }
.canvas.d-tablet { max-width:none; width:768px; flex:none; } .canvas.d-desktop { max-width:none; width:1100px; flex:none; }
.canvas-vazio { flex:1; display:grid; place-items:center; color:#71717a; padding:40px; text-align:center; }
.config > :last-child { min-width:0; flex:1; }
@media (max-width:760px) {
  .ed-acoes { flex-wrap:wrap; }
  .config { flex-direction:column; overflow:auto; min-width:0; } .config-nav { width:auto; display:flex; overflow-x:auto; flex:none; }
}
@media (hover:none) { .etapa-a { opacity:1 !important; visibility:visible !important; } }
.canvas.main-content { min-height:640px; padding:12px; }
.emoji-pop { border:1px solid var(--bd); border-radius:8px; padding:8px; margin-top:6px; max-height:300px; overflow:auto; background:#fff; display:grid; gap:6px; width:100%; } .emoji-pop h6 { margin:6px 0 2px; font-size:.75rem; color:#71717a; } .emoji-tom { display:flex; gap:2px; } .emoji-tom button { background:none; border:1px solid transparent; border-radius:6px; cursor:pointer; padding:2px; } .emoji-tom button.on { border-color:#6d28d9; }
.regra-filtro { flex-wrap:wrap; } .regra-filtro input,.regra-filtro select { flex:1 1 130px; min-width:110px; width:auto; }
.btn-paleta { display:none; }
@media (max-width:760px) {
  .btn-paleta { display:inline-flex; }
  .paleta.aberta { display:block !important; position:fixed; inset:48px 0 0 0; width:auto; z-index:60; }
  .admin-plano,.tabela select { min-width:96px; }
}
@media (max-width:760px) {
  .etapas { width:124px; } .etapas-h { flex-wrap:wrap; gap:4px; }
  .props { max-height:38%; overflow:auto; }
  .btn-paleta { position:fixed; left:132px; bottom:calc(38vh + 8px); z-index:30; }
}
@media (max-width:760px) {
  .ed-corpo { flex-direction:column; position:relative; }
  .etapas { width:100%; flex:none; max-height:96px; border-right:0; border-bottom:1px solid var(--bd); }
  .etapas-h { padding:4px 8px; flex-wrap:nowrap; } .etapas-l { display:flex; gap:4px; overflow-x:auto; padding:0 8px 6px; } .etapas-l .etapa-i { flex:0 0 auto; max-width:150px; }
  .canvas-area { padding:8px; min-height:0; } .canvas { max-width:100%; }
  .btn-paleta { left:8px; bottom:calc(38vh + 8px); }
}
*,*::before,*::after { box-sizing:border-box; } body { margin:0; }
.canvas { position:relative; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-weight:var(--texto-peso); line-height:var(--texto-lh); }
.canvas > * { position:relative; z-index:1; } .canvas > .fx-fundo-etapa { position:absolute; inset:0; width:auto; height:auto; z-index:0; }
.canvas-area { justify-content:safe center; }
.canvas .p-fixedTop .qz-prog { position:absolute; }
.canvas .qz-rodape { padding-block:1rem; }
@media (max-width:760px) { .etapa-a { display:flex !important; } .paleta.aberta { padding-bottom:64px; } .btn-paleta { z-index:70; } }
.guia { margin:6px 0; } .guia summary { cursor:pointer; font-size:.9rem; } .guia ol { list-style:decimal; padding-left:1.2rem; margin:4px 0 8px; } .guia li { margin:2px 0; } .guia code { font-size:.8rem; word-break:break-all; }
.com-ic { display:flex; align-items:center; gap:8px; } .com-ic .ic { color:var(--ok); }
button > .ic:first-child:not(:last-child) { margin-right:5px; }
.aviso-compra { background:var(--rosa-c); border:1px solid var(--bd); border-radius:10px; padding:10px 12px; font-size:.9rem; margin-bottom:12px; line-height:1.45; }