/* =========================================================
   VIIA Bio Link — editor (área logada).
   Usa os tokens, os botões e os campos do site (assets/site/site.css);
   aqui ficam só os componentes próprios do editor.
   ========================================================= */
.app-main{padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(3rem,6vw,5rem);min-height:60vh}
/* Cor do glow dos botões e das caixas de widget na pré-visualização (RGB, usada em rgba(var(--glow),x)). */
:root{--glow:109,91,255}

/* cartões */
.app-card{margin-bottom:1.1rem;padding:clamp(1.1rem,2.5vw,1.6rem);background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.app-card h2{margin-bottom:1rem;font:700 1.25rem/1.2 var(--display);letter-spacing:-.02em}
.app-card--danger{border-color:#F0B8B8}
.app-card--danger h2{color:#991B1B}
.app-help{margin:0 0 1rem;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.app-help a{color:var(--brand);text-decoration:underline;text-underline-offset:.2em}
/* Aviso do teste grátis: colado à esquerda, logo acima do botão de cookies (40px) e abaixo do aviso de cookies aberto. */
.app-steps{margin:0 0 1.2rem;padding-left:1.2rem;display:grid;gap:.6rem;color:var(--ink-2);line-height:1.5}
.app-steps strong{color:var(--ink)}
.trial-badge{position:fixed;z-index:99988;left:0;bottom:48px;max-width:calc(100vw - 16px);padding:.6rem 1rem .6rem .8rem;background:var(--brand);color:#fff;border-radius:0 999px 999px 0;box-shadow:0 4px 16px rgba(13,13,18,.18);font:600 .85rem/1.2 var(--display);text-decoration:none}
.trial-badge:hover,.trial-badge:focus-visible{background:var(--brand-2,var(--brand));text-decoration:underline;outline-offset:2px}
.app-card .field small{display:block;color:var(--ink-3);font-size:.82rem;line-height:1.4}
/* =========================================================
   Seletor de cor padronizado (Color Picker)
   ========================================================= */
.color-picker{display:inline-flex;align-items:center;gap:.5rem}
.field .color-picker__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.color-picker__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:2px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .1s}
.color-picker__btn:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);transform:scale(1.02)}
.color-picker__btn:focus-visible{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 4px var(--brand-tint)}
.color-picker__swatch{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.color-picker__label{font:600 .85rem/1 var(--display);color:var(--ink);white-space:nowrap}

/* Fallback para input[type=color] nativo (quando não usar o componente) */
.app-card .field input[type=color]{min-height:52px;padding:.3rem;cursor:pointer}
.app-card .field input[type=file]{padding:.6rem 1rem}
.btn--danger{--bg:#B91C1C}
.btn--danger:hover{--bg:#991B1B}

/* abas */
.app-tabs{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1.1rem;padding:.35rem;background:#fff;border:1px solid var(--line);border-radius:22px}
.app-tabs::-webkit-scrollbar{display:none}
.app-tab{flex:none;min-height:40px;padding:0 1rem;border:0;border-radius:999px;background:none;color:var(--ink-3);font:600 .92rem/1 var(--display);white-space:nowrap;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.app-tab:hover{color:var(--ink)}
.app-tab.is-on{background:var(--ink);color:#fff}
.app-panel{display:none}
.app-panel.is-on{display:block}

/* listas de links e redes (arrastar para reordenar) */

/* modelos visuais e pré-visualização */
.app-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-bottom:1.1rem}
.app-model{padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:left;cursor:pointer;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.app-model:hover{border-color:var(--ink-3)}
.app-model.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.app-model__label{display:block;padding:.55rem .8rem;background:var(--paper);font:600 .85rem/1 var(--display)}
.app-swatch{display:grid;place-items:center;height:72px;color:#fff}
.app-swatch span{width:18px;height:18px;border-radius:4px}
.app-swatch .ico{width:22px;height:22px}
.app-preview{display:flex;justify-content:center;position:relative;width:100%;padding:40px 18px;overflow:hidden;border:1px solid var(--line);border-radius:12px}

/* analytics */
.app-toolbar{margin-bottom:.5rem}
.app-period{max-width:16rem}
.app-period select{width:100%;min-height:48px;padding:0 .9rem;background:var(--paper);border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink)}
.app-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.app-stat{padding:1rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink-2);font-size:.9rem}
.app-stat small{color:var(--ink-3);font-size:.8rem}
.app-stat strong{display:block;margin-top:.25rem;color:var(--ink);font:700 1.8rem/1.1 var(--display);letter-spacing:-.03em}
.app-top{margin-top:1.25rem}
.app-top h3{margin-bottom:.5rem;font:700 1rem/1.2 var(--display)}
.app-top__row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.app-top__row strong{font-family:var(--display)}

/* prévia de compartilhamento */
.app-share-intro{margin-top:1.25rem}
.app-share-group{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.25rem}
.app-share-label{margin:0 0 .4rem;color:var(--ink-3);font:600 .78rem/1 var(--display);letter-spacing:.04em}
.app-share{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px}
.app-share.desktop{width:320px;max-width:100%}
.app-share.mobile{width:220px;max-width:100%}
.app-share img,.app-share-noimg{display:block;width:100%;aspect-ratio:1.91/1;object-fit:cover;background:var(--surface)}
.app-share-body{padding:.65rem .8rem}
.app-share-title{font:600 .85rem/1.3 var(--display);color:var(--ink)}
.app-share-desc{display:-webkit-box;margin-top:.25rem;overflow:hidden;color:var(--ink-2);font-size:.8rem;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.app-share-domain{margin-top:.4rem;color:var(--ink-3);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase}

/* acordeão da Análise: fechado por padrão */

/* domínio próprio */
.app-domain{margin:0 0 .5rem;font-size:1.1rem}
.app-pill{display:inline-block;margin-left:.5rem;padding:.2rem .65rem;border-radius:999px;background:var(--surface);color:var(--ink-2);font:600 .78rem/1.4 var(--display);vertical-align:.1em}
.app-pill--verified{background:var(--brand-tint);color:var(--brand)}

.app-pill--error{background:#FEF2F2;color:#991B1B}
.app-sub{margin:1.25rem 0 .5rem;font:700 1rem/1.2 var(--display)}
.app-table-wrap{overflow-x:auto;margin-bottom:.75rem}
.app-table{width:100%;min-width:26rem;border-collapse:collapse;font-size:.92rem}
.app-table th,.app-table td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.app-table th{color:var(--ink-3);font:600 .78rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.app-table code,.app-help code{padding:.1em .35em;border-radius:6px;background:var(--surface);color:var(--ink);font-size:.9em;overflow-wrap:anywhere}
.app-check{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:.92rem}
.app-check .is-ok{color:#166534}
.app-check .is-bad{color:#991B1B}
.app-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}

/* painel admin */
.app-h1{margin:0 0 1.25rem;font:700 clamp(1.6rem,3vw,2.1rem)/1.1 var(--display);letter-spacing:-.03em}
.app-stats.adm-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:1.1rem}
.adm-filter{display:grid;grid-template-columns:1fr 180px auto;gap:.75rem;align-items:end;margin-bottom:1rem}
.adm-filter .field{margin:0}
.adm-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.adm-main{flex:1 1 18rem;min-width:0}
.adm-sub{margin-top:.2rem;color:var(--ink-3);font-size:.85rem;overflow-wrap:anywhere}
.adm-sub code{padding:.05em .3em;border-radius:5px;background:var(--surface);color:var(--ink)}
.adm-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.adm-actions select{min-height:40px;padding:0 .6rem;background:#fff;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.9rem;color:var(--ink)}
.adm-btn{min-height:40px;padding:.5rem .9rem;font-size:.88rem}
#admMore{margin-top:1rem}
.adm-dialog{width:min(92vw,28rem);padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.adm-dialog::backdrop{background:rgba(13,13,18,.45)}
.adm-dialog h2{margin-bottom:.75rem;font:700 1.25rem/1.2 var(--display)}
@media (max-width:640px){.adm-filter{grid-template-columns:1fr}}
.field select{width:100%;min-height:52px;padding:.7rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit}
.field select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 4px var(--brand-tint)}

/* financeiro */
.adm-fin-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:.75rem}
.adm-fin-filter .field{margin:0}
.adm-small{font-size:1.1rem !important;line-height:1.3}
.adm-fin-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.adm-fin-wrap{border:1px solid var(--line);border-radius:12px}
.adm-fin-table{min-width:46rem;margin:0}
.adm-fin-table th{background:var(--paper);white-space:nowrap}
.adm-fin-table tbody tr:nth-child(even){background:var(--paper)}
.adm-fin-table td{vertical-align:middle}
.adm-fin-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.adm-fin-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;align-items:end}
.adm-fin-form .field{margin:0}
.adm-fin-note{grid-column:1/-1}

/* tutoriais de DNS na aba Domínio */
.app-tut-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1rem}
.app-tut-card{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.app-tut-card:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.app-tut-card strong{font:700 1rem/1.2 var(--display)}
.app-tut-card span{color:var(--ink-3);font-size:.88rem}
.app-help a{color:var(--brand);text-decoration:underline;text-underline-offset:.2em}

/* aba Subir plano */
.app-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0 1.25rem}
.app-plan{padding:1.25rem;background:#fff;border:1px solid var(--line);border-radius:14px}
.app-plan--pro{border:2px solid var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.app-plan h3{margin:0 0 .25rem;font:700 1.15rem/1.2 var(--display)}
.app-plan__price{margin:0 0 .75rem;font:700 1.8rem/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.app-plan__price span{font-size:.95rem;font-weight:600;color:var(--ink-3)}
.app-plan ul{margin:0;padding-left:1.1rem;color:var(--ink-2);font-size:.92rem;line-height:1.6}
.app-plan--pro li::marker{color:var(--brand)}
.app-plan__test{margin-top:1rem;padding:.6rem .8rem;background:#FFF7E6;border-radius:10px;color:#7A4B00}

.app-addr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .75rem}
.app-addr__street{grid-column:span 2}
.app-addr__note{margin-top:-.25rem}
@media (max-width:640px){.app-addr{grid-template-columns:1fr}.app-addr__street{grid-column:auto}}

/* =========================================================
   Editor Drag & Drop e Layout em 2 colunas
   ========================================================= */
.editor-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem;align-items:start}

.editor-left{min-width:0}
.editor-right{min-width:0}
.editor-right.is-hidden{display:none}
.editor-sticky{position:sticky;top:88px;display:flex;flex-direction:column;gap:1.1rem}

@media (max-width:960px){
  .editor-layout{grid-template-columns:1fr;gap:1.1rem}
  .editor-sticky{position:static}
}

/* Canvas de Widgets */

/* Card do Widget */

/* Dropzone estilo Elementor (Foto elementor: media_1791903015831.png) */
.wc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:96px;padding:1.5rem 1rem;border:2px dashed #D3D5DE;border-radius:16px;background:rgba(251,251,249,.6);cursor:pointer;transition:all .25s var(--ease);user-select:none}
.wc-drop:hover,.wc-drop.drag-over{border-color:var(--brand);background:var(--brand-tint)}
.wc-drop__btn{width:44px;height:44px;border-radius:50%;background:#E5E7EB;color:#374151;display:grid;place-items:center;font-size:1.55rem;font-weight:300;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:transform .2s ease,background .2s ease,color .2s ease}
.wc-drop:hover .wc-drop__btn,.wc-drop.drag-over .wc-drop__btn{transform:scale(1.1);background:var(--brand);color:#fff}
.wc-drop__text{font-size:.82rem;color:var(--ink-3);font-style:italic}

/* Modal / Drawer dos Widgets (Foto widgets: media_1791903081041.png) */
.wc-panel{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:wcFadeIn .2s ease-out}
@keyframes wcFadeIn{from{opacity:0}to{opacity:1}}
.wc-panel__backdrop{position:absolute;inset:0;background:rgba(13,13,18,.65);backdrop-filter:blur(4px)}
.wc-panel__box{position:relative;width:min(92vw,360px);background:#18191E;border:1px solid #2B2D35;border-radius:16px;padding:1.25rem;box-shadow:0 20px 40px rgba(0,0,0,.45);color:#fff;animation:wcSlideUp .25s var(--ease)}
@keyframes wcSlideUp{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.wc-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #272932}
.wc-panel__title{display:flex;align-items:center;gap:.4rem;margin:0;font:700 .95rem/1.2 var(--display);color:#fff;letter-spacing:-.01em}
.wc-panel__chev{font-size:.75rem;color:#9CA3AF}
.wc-panel__close{width:28px;height:28px;border:0;background:transparent;color:#8C90A0;font-size:1.3rem;cursor:pointer;display:grid;place-items:center;border-radius:6px;transition:color .2s,background .2s}
.wc-panel__close:hover{color:#fff;background:#272932}
.wc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}
.wc-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;padding:1.2rem .75rem;background:#23252C;border:1px solid #333640;border-radius:10px;color:#DDE0E7;cursor:pointer;transition:all .2s ease;font:600 .88rem/1.2 var(--display);text-align:center}
.wc-item__icon svg{width:30px;height:30px;color:#E6E8EE;transition:transform .2s ease}
.wc-item:hover{background:#2B2E37;border-color:#4F5565;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.wc-item:hover .wc-item__icon svg{transform:scale(1.08)}

/* =========================================================
   Pré-visualização interativa, cartão/popup de Perfil e temas Pro
   ========================================================= */
.preview-editor-section{width:min(100%,680px);container-type:inline-size}
.preview-profile-clickable{position:relative;cursor:pointer;border-radius:16px;padding:6px 6px 2px;outline:2px dashed transparent;outline-offset:2px;transition:outline-color .2s var(--ease),box-shadow .18s var(--ease)}
.preview-profile-clickable:hover,.preview-profile-clickable:focus-visible{outline-color:var(--brand);box-shadow:0 0 0 1px rgba(var(--glow),.35),0 0 18px rgba(var(--glow),.28)}

/* Lista de blocos do editor: mesma grade da página no ar (.pub-links), só com o cursor de arrastar.
   O gap maior dá espaço para os botões ↑/↓, que ficam centrados na borda de baixo de cada bloco. */
.preview-links-interactive{gap:26px}
/* Link, WhatsApp e Como chegar: a marcação é a mesma da página no ar (.pub-link / .pub-link--card),
   então aqui só entra o cursor de arrastar. */
.preview-widget-item{cursor:grab}
.preview-widget-item.dragging{opacity:.35}
.preview-widget-item.drag-over{outline:2px dashed var(--brand);outline-offset:3px}
/* Botões do bloco: × flutua na borda direita; ↑/↓ ficam na borda de baixo, alinhados à esquerda.
   O wrapper cobre o bloco inteiro, mas só os botões recebem clique (pointer-events no CSS). */
.preview-widget-btns{position:absolute;inset:0;pointer-events:none;z-index:3}
.preview-widget-btn{pointer-events:auto;position:absolute;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;height:30px;padding:0 .75rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:#0b0b10;color:#fff;font:600 .78rem/1 var(--display);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:box-shadow .18s var(--ease),background .18s var(--ease)}
.preview-widget-btn:hover,.preview-widget-btn:focus-visible{background:#15151d;box-shadow:0 0 0 1px rgba(var(--glow),.6),0 0 14px rgba(var(--glow),.6),0 4px 14px rgba(0,0,0,.35)}
/* ×: centrado na linha da borda direita (metade dentro, metade fora). */
.preview-btn-del{top:50%;right:8px;width:36px;height:36px;padding:0;transform:translate(50%,-50%);font-size:1.2rem;border-radius:50%}
/* ↑/↓: centrados na linha da borda de baixo, alinhados à esquerda, sempre visíveis.
   O centro vertical fica na borda inferior do bloco (bottom: -18px = metade do botão de 36px). */
.preview-btn-move{width:36px;height:36px;padding:0;font-size:1rem;border-radius:50%}
.preview-btn-up{left:10px;bottom:-18px}
.preview-btn-down{left:56px;bottom:-18px}
.preview-btn-move[disabled]{opacity:.3;cursor:default;pointer-events:none}
.preview-widget-btn svg{width:14px;height:14px}
.preview-editor-section .wc-drop{margin:14px 16px 0;min-height:72px;padding:1rem}

/* Mobile: preview do editor full-width, sem borda arredondada e sem margens laterais */
@media (max-width:480px){
  .preview-editor-section{width:100%;border-radius:0}
  .preview-profile-clickable{border-radius:0;padding:12px 16px 8px}
  .preview-links-interactive{gap:20px;padding:0 16px}
  .preview-block{border-radius:0}
  .app-preview{padding:0 !important;border-radius:0 !important;border:0 !important;overflow:visible !important}
}

/* Cartão do Perfil na lista de blocos (abre o popup) */

/* Popup do Perfil: formulário no mesmo painel escuro do "adicionar bloco" */
.wc-panel__box--form{width:min(92vw,420px)}
.wc-form{display:flex;flex-direction:column;gap:.9rem}
.wc-form .field{margin:0}
.wc-form label{display:block;margin-bottom:.35rem;font:600 .82rem/1 var(--display);color:#C9CCD6}
.wc-form input[type=text],.wc-form input:not([type]),.wc-form textarea{width:100%;min-height:44px;padding:.55rem .8rem;background:#23252C;border:1px solid #333640;border-radius:10px;color:#fff;font:inherit;font-size:.92rem}
.wc-form .wc-check{display:flex;align-items:flex-start;gap:.55rem;margin:0;color:#DDE0E7;font:400 .9rem/1.4 var(--text);cursor:pointer}
.wc-form .wc-check input{width:18px;height:18px;flex:none;margin:.1rem 0 0;accent-color:var(--brand-soft)}
.wc-form textarea{resize:vertical}
.wc-form input:focus,.wc-form textarea:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(109,91,255,.25)}
.wc-form__avatar{display:flex;align-items:center;gap:.8rem}
.wc-form__avatar img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#2B2D35;flex:none}
.wc-form__avatar input[type=file]{width:100%;color:#C9CCD6;font-size:.85rem}

/* Temas Pro bloqueados: aparecem esmaecidos e levam para "Subir plano" */
.app-model.is-locked{opacity:.55}
.app-model.is-locked:hover{opacity:.8}
.app-model__pro{display:inline-block;margin-left:.3rem;padding:.12rem .4rem;border-radius:999px;background:var(--brand);color:#fff;font-size:.65rem;vertical-align:1px}

/* Bloco como linha compacta (edição no popup) */

.wc-form select{width:100%;min-height:44px;padding:.55rem .8rem;background:#23252C;border:1px solid #333640;border-radius:10px;color:#fff;font:inherit;font-size:.92rem}
.wc-form small{display:block;margin-top:.3rem;color:#8C90A0;font-size:.78rem}

/* =========================================================
   v22.2b: abas na coluna esquerda; a pré-visualização é o editor
   ========================================================= */
.editor-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
.editor-left{position:sticky;top:84px;align-self:start}
.editor-sticky{position:static}
.editor-left .app-tabs{margin-bottom:1rem}
.editor-sticky{top:84px}
.app-card--content .app-preview{min-height:calc(100vh - 300px);align-items:flex-start}
.app-card--content .app-help{margin:-.25rem 0 .9rem}
@media (max-width:960px){
  .editor-layout{grid-template-columns:1fr}
  .editor-left{position:static}
  .editor-right{order:-1} /* celular: conteúdo em cima, menu embaixo */
  .app-card--content .app-preview{min-height:0}
}
@media (max-width:480px){
  .editor-right{width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter))}
  .app-card--content{padding:0;border:0;border-radius:0;background:transparent}
  .app-card--content .app-card__head,.app-card--content .app-dirty,
  .app-card--content>[data-act="publish"]{margin-inline:var(--gutter)}
}

/* Editor mobile: preview como primeira aba, navegação presa sob o menu e ação fixa no rodapé. */
.mobile-publish-bar{display:none}
.app-tab--preview{display:none}
@media (max-width:600px){
  #header{position:relative;z-index:100}
  #header .nav__panel{z-index:101}
  .app-main{padding-bottom:30px}
  .editor-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:calc(-1 * clamp(1.5rem,4vw,2.5rem))}
  .editor-left{display:contents}
  .editor-left .app-tabs{position:sticky;top:0;z-index:30;grid-row:1;order:0;margin:0 calc(-1 * var(--gutter)) 1rem;padding:.35rem var(--gutter);border-radius:0;border-inline:0;box-shadow:0 4px 12px rgba(13,13,18,.08)}
  .app-tab--preview{display:block}
  .editor-right{order:1;width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter))}
  .app-card--content .app-card__head{margin-inline:0;padding-inline:20px}
  .editor-left>.app-panel{order:2}
  .editor-layout.mobile-editor-active .editor-left>.app-panel{display:none}
  .editor-layout:not(.mobile-editor-active) .editor-right{display:none}
  .editor-layout.mobile-editor-active #tabbar .app-tab--preview,
  .editor-layout.mobile-editor-active #tabbar [data-tab="aparencia"]{background:var(--ink);color:#fff}
  .editor-layout.mobile-editor-active #tabbar [data-tab="aparencia"]{background:none;color:var(--ink-3)}
  .editor-layout [data-act="publish"]{display:none}
  .mobile-publish-bar{position:fixed;inset:auto 0 0;z-index:60;display:block;padding:12px var(--gutter) calc(20px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(13,13,18,.12);backdrop-filter:blur(12px)}
  .mobile-publish-bar .btn{width:100%}
  .app-dirty:not([hidden]){position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(96px + env(safe-area-inset-bottom));z-index:61;margin:0;box-shadow:0 4px 16px rgba(13,13,18,.12)}
  #toast.toast{bottom:calc(96px + env(safe-area-inset-bottom));z-index:70}
  .preview-btn-del{right:8px;transform:translate(50%,-50%)}
  .preview-editor-section .wc-drop{margin-bottom:16px}
  .app-card.app-card--content{margin-bottom:0}
}
/* Rótulo "Editar" do perfil: flutua no meio da altura, sobre a foto/hero (mesma regra dos blocos grandes) */
.preview-edit-tag{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:999px;background:rgba(13,13,18,.85);color:#fff;font:600 .78rem/1 var(--display);pointer-events:none;transition:box-shadow .18s var(--ease),background .18s var(--ease)}
.preview-profile-clickable:hover .preview-edit-tag,.preview-profile-clickable:focus-visible .preview-edit-tag{background:#15151d;box-shadow:0 0 0 1px rgba(var(--glow),.6),0 0 14px rgba(var(--glow),.6),0 4px 14px rgba(0,0,0,.35)}
.preview-edit-tag svg,.preview-btn-edit svg{width:13px;height:13px}
.preview-profile-clickable{display:block;position:relative;padding:34px 6px 4px}
.preview-btn-edit{display:inline-flex;align-items:center}
.preview-block{cursor:grab}
.preview-block.dragging{opacity:.35}
.preview-block.drag-over{outline:2px dashed var(--brand);outline-offset:3px}
.preview-socials-item{position:relative;display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:12px;border:1px dashed rgba(127,127,127,.55)}
.preview-socials-dots{flex:1;min-width:0;margin:0!important;justify-content:center;flex-wrap:wrap}
.preview-empty{font-size:.8rem;opacity:.75}
/* popup das redes */
.wc-form__hint{margin:0;color:#9CA3AF;font-size:.82rem;line-height:1.4}
.wc-soc-rows{display:flex;flex-direction:column;gap:.85rem}
.wc-soc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;align-items:center}
.wc-form .wc-soc-row input{min-width:0;width:100%}
.wc-soc-link{grid-column:span 2;display:flex;align-items:stretch;min-width:0;height:44px;background:#23252C;border:1px solid #333640;border-radius:10px;overflow:hidden}
.wc-soc-link:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(109,91,255,.25)}
.wc-soc-prefix{display:flex;align-items:center;flex:none;max-width:55%;padding:0 .5rem;background:#2E3139;color:#AEB2C0;font:600 .75rem/1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #333640}
.wc-soc-prefix[hidden]{display:none}
.wc-form .wc-soc-link input{height:100%;min-height:0;flex:1 1 auto;padding:.55rem .5rem;border:0;border-radius:0;background:transparent;box-shadow:none}
.wc-form .wc-soc-link input:focus{box-shadow:none}
/* Os três controles ocupam a segunda linha em partes iguais. */
.wc-soc-move{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%}
.wc-soc-btn{width:100%;height:40px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#0b0b10;color:#fff;font:600 1rem/1 var(--display);cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:box-shadow .18s,background .18s,opacity .18s}
.wc-soc-btn:hover{background:#15151d;box-shadow:0 0 0 1px rgba(var(--glow),.6),0 0 14px rgba(var(--glow),.6),0 4px 14px rgba(0,0,0,.35)}
.wc-soc-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.wc-soc-del{background:#3a1f24;color:#fca5a5;font-size:1.2rem}
.wc-soc-del:hover{background:#51272e}
.wc-soc-add{border:1px dashed #4F5565;border-radius:10px;background:transparent;color:#DDE0E7;min-height:42px;cursor:pointer;font:600 .88rem var(--display)}
.wc-soc-add:hover{background:#23252C}
@media (max-width:420px){
  .wc-soc-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .wc-soc-row select{min-width:0;width:100%;padding-inline:.35rem}
  .wc-soc-prefix{max-width:48%;padding-inline:.35rem;font-size:.68rem}
}

/* v22.2c: botões Editar iguais ao do perfil (pílula, bem escuros); blocos arrastáveis por toque */
.preview-edit-tag,.preview-widget-btn{background:#0b0b10;color:#fff;border-radius:999px;border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 8px rgba(0,0,0,.28)}
.preview-block{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}
.preview-block.dragging{opacity:.9;z-index:5;cursor:grabbing;box-shadow:0 12px 28px rgba(0,0,0,.35);transition:none}
.preview-block *{-webkit-user-drag:none}

/* v22.3: menu do editor = menu da home + itens do editor; páginas dedicadas */
.nav__links--app>li>a[aria-current=page],.nav__panel a[aria-current=page]{color:var(--brand);font-weight:700}
.app-page{max-width:760px;margin:0 auto}
@media (max-width:1180px) and (min-width:901px){.nav__links--app{gap:.9rem}.nav__links--app a,.nav__drop-btn{font-size:.9rem}}

/* Domínio no menu para quem não tem o recurso: esmaecido, leva ao Subir plano */
.nav__links a.nav__locked,.nav__panel a.nav__locked{opacity:.5}
.nav__links a.nav__locked:hover,.nav__panel a.nav__locked:hover{opacity:.8}

.app-plans--single{grid-template-columns:minmax(0,420px)}

/* Sugestões de endereço (Como chegar) */
.wc-sug{margin-top:.4rem;border:1px solid #333640;border-radius:10px;background:#1d1f26;overflow:hidden}
.wc-sug__item{display:flex;align-items:flex-start;gap:.55rem;width:100%;padding:.65rem .8rem;border:0;border-bottom:1px solid #2B2D35;background:transparent;color:#E6E8EE;text-align:left;font:inherit;font-size:.88rem;line-height:1.35;cursor:pointer}
.wc-sug__item:last-child{border-bottom:0}
.wc-sug__item:hover,.wc-sug__item:focus-visible{background:#2B2E37;outline:none}
.wc-sug__item svg{width:16px;height:16px;flex:none;margin-top:2px;color:#9CA3AF}
.wc-sug__empty{padding:.7rem .8rem;color:#9CA3AF;font-size:.85rem}
.wc-addr-state{margin-top:.35rem;font-size:.8rem;min-height:1em}
.wc-addr-state.is-ok{color:#6EE7B7}
.wc-addr-state.is-warn{color:#FCD34D}

.wc-maps-open{display:inline-flex;align-items:center;gap:.35rem;margin-top:.45rem;color:#A5B4FC;font-size:.84rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wc-maps-open:hover{color:#fff}
.wc-maps-open svg{width:14px;height:14px}

.wc-sug.is-loading{opacity:.45;pointer-events:none}

/* Modelo hero no editor */
.preview-profile-clickable--hero{padding:0;border-radius:0;outline-offset:0}
.preview-profile-clickable--hero .preview-edit-tag{right:12px}
.preview-editor-section.profile--hero .hero{max-height:none}
.preview-editor-section.profile--hero h1{margin-top:-52px}

/* Botão "Escolher arquivo" do popup do Perfil: sem fundo */
.wc-form__avatar input[type=file]::file-selector-button{background:transparent;color:#fff;border:1px solid #4F5565;border-radius:999px;padding:.4rem .9rem;margin-right:.7rem;font:600 .82rem var(--display);cursor:pointer}
.wc-form__avatar input[type=file]::file-selector-button:hover{background:rgba(255,255,255,.08)}
.wc-form .wc-form__avatar input[type=file]{background:transparent;border:0;box-shadow:none;padding:0;min-height:0;width:auto;flex:1;min-width:0;color:#C9CCD6;font-size:.8rem}

/* seletor de dois estados (estilo dos botões) */
.app-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff;gap:2px}
.app-seg button{border:0;background:transparent;border-radius:999px;padding:.5rem 1rem;font:600 .88rem var(--display);color:var(--ink-2);cursor:pointer}
.app-seg button.is-on{background:var(--ink);color:#fff}

/* seletor de dois/três estados dentro do popup escuro */
.wc-form .app-seg{background:#23252C;border-color:#333640;flex-wrap:wrap}
.wc-form .app-seg button{color:#C9CCD6;padding:.45rem .85rem}
.wc-form .app-seg button.is-on{background:#fff;color:#0d0d12}
.wc-form .app-seg button.is-off{opacity:.5}

/* título do conteúdo com o botão de compartilhar a página à direita */
.app-card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.app-card__head h2{margin:0}
.app-share-btn{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(13,13,18,.08);transition:background .2s,color .2s,border-color .2s}
.app-share-btn:hover,.app-share-btn:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}

/* botão Salvar no fim dos cards de Aparência e Compartilhar */
.app-save{display:flex;width:100%;margin-top:1.1rem}

/* opções do modelo escolhido ficam entre os temas gratuitos e os Pro */
.app-options{margin:.25rem 0 1.25rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.app-options .field:last-child{margin-bottom:0}

/* Conteúdo da página sem o card ao redor: só o título com o botão e a pré-visualização */
.app-card.app-card--content{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;margin-bottom:1.5rem}
.app-card--content .app-card__head{margin:0 .15rem .75rem}

/* "Link: endereço" à esquerda do botão de compartilhar */
.app-card__share{display:flex;align-items:center;gap:.6rem;min-width:0}
.app-pagelink{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font:500 .88rem/1.2 var(--display);text-decoration:none}
.app-pagelink span{font-weight:700;color:var(--ink)}
.app-pagelink:hover{color:var(--brand);text-decoration:underline}
.app-card__head h2{white-space:nowrap}
@media (max-width:420px){.app-card__head h2{font-size:1.05rem}}

/* aba QR Code */
.app-qr{display:flex;justify-content:center;margin:.5rem 0 .5rem}
.app-qr svg{width:min(100%,320px);height:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.app-qr__url{text-align:center;word-break:break-all}

/* celular: as abas ficam sempre numa linha só (fonte e espaçamento acompanham a largura da tela) */
@media (max-width:600px){
  .app-tabs{flex-wrap:nowrap;gap:0;padding:.25rem;border-radius:18px}
  .app-tab{flex:1 1 auto;min-width:0;min-height:38px;padding:0 .3rem;font-size:clamp(.66rem,3.4vw,.86rem);text-align:center}
}

/* v22.7c: botões do editor (Editar do perfil, Editar e × dos blocos, compartilhar) sempre iguais:
   mesma cor, altura e tamanho de ícone em qualquer modelo, estilo ou cor de fundo */
.preview-edit-tag,.preview-widget-btn,.app-share-btn{background:#0b0b10;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 8px rgba(0,0,0,.28);text-shadow:none;opacity:1}
.preview-widget-btn:hover,.preview-widget-btn:focus-visible,.app-share-btn:hover,.app-share-btn:focus-visible{background:#15151d;color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(var(--glow),.6),0 0 14px rgba(var(--glow),.6),0 4px 14px rgba(0,0,0,.35)}
.preview-edit-tag{height:30px;padding:0 .75rem;display:inline-flex;align-items:center;gap:.35rem;font:600 .78rem/1 var(--display)}
.preview-edit-tag .ico,.preview-widget-btn .ico,.pub-link .preview-widget-btn .ico{width:13px;height:13px;font-size:13px}
.app-share-btn{width:42px;height:42px;border-radius:999px}
.app-share-btn .ico{width:20px;height:20px}

/* Como usar: lista de tutoriais (um por widget/recurso) */
.app-tuts{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.app-tut{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.app-tut[open]{border-color:var(--ink-3)}
.app-tut summary{display:flex;align-items:center;gap:.85rem;padding:.8rem 1rem;cursor:pointer;list-style:none}
.app-tut summary::-webkit-details-marker{display:none}
.app-tut summary::after{content:"+";margin-left:auto;font:400 1.4rem/1 var(--display);color:var(--ink-3)}
.app-tut[open] summary::after{content:"\2212"}
.app-tut__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand-tint);color:var(--brand);flex:none;font-size:20px}
.app-tut__txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.app-tut__txt strong{font:700 1rem/1.2 var(--display)}
.app-tut__txt small{color:var(--ink-3);font-size:.85rem;line-height:1.3}
.app-tut__body{padding:.2rem 1.1rem 1.1rem 1.1rem;border-top:1px solid var(--line)}
.app-tut__body ol{margin:.9rem 0 0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.55rem;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.app-tut__body ol li::marker{font-weight:700;color:var(--brand)}
.app-tut__tip{display:flex;gap:.55rem;align-items:flex-start;margin:1rem 0 0;padding:.7rem .85rem;border-radius:10px;background:var(--surface,#F4F4F0);color:var(--ink-2);font-size:.9rem;line-height:1.45}
.app-tut__tip .ico{flex:none;margin-top:.15rem;color:var(--brand)}

.app-tut__body ol li>span{display:block}
.app-tut__shot{display:block;width:min(100%,340px);height:auto;margin:.65rem 0 .25rem;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(13,13,18,.08)}

/* popups altos (redes sociais, como chegar) rolam por dentro em vez de cortar no celular */
.wc-panel__box{max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto}

/* tutorial aberto: a página rola uma vez para o título ficar logo abaixo do menu (feito em app.js); depois rola normal */
.app-tut{overflow:visible;overflow:clip}
.app-tut{scroll-margin-top:calc(var(--hdr,72px) + 10px)}

/* Como usar: sem fundo nem cartões; lista simples separada por linhas, imagens centralizadas */
#panel-como-usar>.app-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.app-tuts{gap:0;margin-top:.75rem;border-top:1px solid var(--line)}
.app-tut{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.app-tut[open]{border-color:var(--line)}
.app-tut summary{padding:1rem .15rem}
.app-tut__body{border-top:0;padding:0 .15rem 1.4rem}
.app-tut__body ol{margin-top:.2rem}
.app-tut__shot{margin:.75rem auto .3rem}
.app-tut__tip{background:transparent;border-radius:0;border-left:3px solid var(--brand);padding:.15rem 0 .15rem .8rem}
/* passos em largura total: o número fica em linha com o texto e o print centraliza na coluna inteira */
.app-tut__body ol{padding-left:0;list-style-position:inside}
.app-tut__body ol li>span{display:inline}

/* aviso de alterações não publicadas */
.app-dirty{margin:.9rem 0 0;padding:.55rem .8rem;border-radius:10px;background:#FFF7E6;color:#7A4B00;font:600 .86rem/1.3 var(--display)}
.app-dirty span{color:#E08A00;margin-right:.35rem}

/* subir/descer bloco: ficam sempre visíveis, centrados na borda de baixo do bloco (regras no topo do arquivo) */
.wc-panel__box :focus-visible{outline:2px solid #A5B4FC;outline-offset:2px}
/* Alinhamento escolhido no editor (Título guarda em `content`, Texto em `url`). Sem escolha, vale o padrão do modelo. */
.preview-heading-block[data-align="left"] .pub-heading,.preview-text-block[data-align="left"] .pub-text{text-align:left}
.preview-heading-block[data-align="center"] .pub-heading,.preview-text-block[data-align="center"] .pub-text{text-align:center}
.preview-heading-block[data-align="right"] .pub-heading,.preview-text-block[data-align="right"] .pub-text{text-align:right}

/* Preview estreito (celular ou coluna apertada no desktop): os botões de mover mantêm o tamanho 36x36. */
@container (max-width:420px){
  .preview-btn-move{width:36px;height:36px;font-size:1rem}
  .preview-btn-up{left:8px;bottom:-18px}
  .preview-btn_down{left:54px;bottom:-18px}
}
@media (max-width:480px){
  .preview-btn-move{width:36px;height:36px;font-size:1rem}
  .preview-btn-up{left:8px;bottom:-18px}
  .preview-btn-down{left:54px;bottom:-18px}
}

/* Campos com o título dentro (padrão do formulário de briefing da agência). Montados por floatFields() no editor.js:
   input antes do label; o título sobe e encolhe ao focar ou quando há texto (:placeholder-shown, preenchimento automático). */
html .field.field--float{position:relative;gap:0}
html .field.field--float>input{min-height:64px;padding:1.6rem 1rem .55rem;font-size:1rem;transition:border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
html .field.field--float>label{position:absolute;z-index:1;top:0;right:1rem;left:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(calc(32px - .6rem));transform-origin:left top;will-change:transform;pointer-events:none;font:600 .96rem/1.25 var(--display);color:var(--ink);transition:transform .3s cubic-bezier(.4,0,.2,1)}
/* o título sobe e encolhe só por transform (escala 0,75 = 11,5 px): anima na placa de vídeo, sem refazer o texto a cada quadro */
html .field.field--float:focus-within>label,html .field.field--float>input:not(:placeholder-shown)~label{transform:translateY(.6rem) scale(.75)}
html .field.field--float>input:-webkit-autofill~label{transform:translateY(.6rem) scale(.75)}
html .field.field--float>small{margin-top:.45rem}
@media (prefers-reduced-motion:reduce){html .field.field--float>input,html .field.field--float>label{transition:none}}

/* =========================================================
   Widgets Pro no Editor: seletor, badges, preview e toolbar
   ========================================================= */
.wc-panel__box--picker{width:min(94vw,440px)}
.wc-section-head{display:flex;align-items:center;justify-content:space-between;margin:1.1rem 0 .5rem;padding:0 .2rem}
.wc-section-head:first-child{margin-top:0}
.wc-section-tag{font:700 .75rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#9CA3AF}
.wc-section-tag--pro{color:#A78BFA;display:flex;align-items:center;gap:.3rem}

.wc-item{position:relative}
.wc-item__badge{position:absolute;top:7px;right:7px;padding:.15rem .45rem;border-radius:999px;background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;font:700 .62rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 2px 6px rgba(124,58,237,.35)}
.wc-item.is-pro-locked{opacity:.85;border-color:rgba(167,139,250,.35)}
.wc-item.is-pro-locked:hover{border-color:#A78BFA;background:#2A2638}

/* Toolbar simples do editor de texto formatado */
.wc-editor-toolbar{display:flex;align-items:center;gap:.35rem;background:#18191E;border:1px solid #333640;border-bottom:0;border-radius:10px 10px 0 0;padding:.35rem .5rem}
.wc-tb-btn{min-width:30px;height:30px;padding:0 .45rem;border:0;border-radius:6px;background:transparent;color:#C9CCD6;font:600 .86rem/1 var(--display);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.wc-tb-btn:hover{background:#2B2E37;color:#fff}
.wc-tb-btn.is-active{background:var(--brand);color:#fff}
.wc-editor-textarea{border-top-left-radius:0 !important;border-top-right-radius:0 !important}

/* Pré-visualização dos novos widgets no editor: os blocos aparecem exatamente como no site no ar.
   A marcação do bloco usa `outline` (não ocupa espaço), então nada empurra o texto e o alinhamento
   fica igual ao da página publicada. */
.preview-block{position:relative;transition:box-shadow .18s var(--ease)}
.preview-block.dragging{opacity:.4}
.preview-block.drag-over{outline:2px dashed var(--brand);outline-offset:4px}
/* Glow da caixa do widget no hover (o mesmo dos botões) */
.preview-block:hover,.preview-block:focus-within{box-shadow:0 0 0 1px rgba(var(--glow),.35),0 0 18px rgba(var(--glow),.28)}

.preview-heading-block{display:flow-root;outline:1px dashed rgba(255,255,255,.2);outline-offset:6px;cursor:grab}

.preview-text-block{display:flow-root;outline:1px dashed rgba(255,255,255,.2);outline-offset:6px;cursor:grab}

.preview-image-block{display:flow-root;outline:1px dashed rgba(255,255,255,.2);outline-offset:6px;cursor:grab}
.preview-widget-block{display:flow-root;outline:1px dashed rgba(255,255,255,.2);outline-offset:6px;cursor:grab}
.preview-widget-block a,.preview-widget-block .pub-prod,.preview-widget-block .pub-banner{pointer-events:none}
.preview-image-block .pub-image-card img{max-height:480px}
.preview-image-empty{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:22px 12px;border-radius:12px;background:rgba(255,255,255,.05);color:#C9CCD6;font-size:.85rem}

/* Player de vídeo/áudio dentro do editor: é só prévia, o clique fica com o bloco (a alça de arrastar). */
.preview-player-block{position:relative;display:flow-root;padding:0;outline:1px dashed rgba(255,255,255,.25);outline-offset:6px;border-radius:16px;background:rgba(255,255,255,.05);cursor:grab}
.preview-map-widget{display:grid;gap:10px;position:relative;cursor:grab}
.preview-map-widget iframe{pointer-events:none}
.preview-player-block .pub-video-wrap,.preview-player-block .pub-audio-wrap{margin:0}
.preview-player-block .preview-player{pointer-events:none}
.preview-card-block{display:flex;flex-direction:column;gap:.4rem;padding:8px;border-radius:16px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.25);cursor:grab}
.preview-card-block__top{display:flex;align-items:center;justify-content:space-between;width:100%}
.preview-card-block__badge{display:inline-flex;align-items:center;gap:.35rem;font:600 .75rem/1 var(--display);padding:.25rem .55rem;border-radius:6px;background:rgba(0,0,0,.4);color:#fff}

/* Modal de convite ao Pro (quando usuário free clica em item Pro) */
.wc-pro-modal{text-align:center;padding:.5rem 0 .2rem}
.wc-pro-modal__icon{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(168,85,247,.3));color:#A78BFA;font-size:26px;margin:0 auto 1rem}
.wc-pro-modal__title{font:700 1.25rem/1.2 var(--display);color:#fff;margin:0 0 .5rem}
.wc-pro-modal__desc{color:#C9CCD6;font-size:.92rem;line-height:1.5;margin:0 0 1.25rem}
.wc-pro-modal__actions{display:flex;flex-direction:column;gap:.6rem}

/* Editor do widget Produto: foto com miniatura */
.wc-prod__foto{display:flex;align-items:center;gap:.85rem}
.wc-prod__foto>div:last-child{flex:1;min-width:0}
.wc-prod__foto input[type=file]{color:#C9CCD6;font-size:.85rem;width:100%}
.wc-prod__thumb{width:68px;height:68px;flex:none;border-radius:12px;background:#23252C;border:1px solid #333640;overflow:hidden;display:grid;place-items:center}
.wc-prod__thumb img{width:100%;height:100%;object-fit:cover}

/* Campos com o título dentro também nos popups dos widgets (fundo escuro). Montados por floatFields() no editor.js,
   que passou a incluir .wc-form .field. Mesmo comportamento dos campos de fora: o título sobe ao focar ou preencher. */
.wc-form .field.field--float{position:relative;gap:0}
.wc-form .field.field--float>input{min-height:58px;padding:1.5rem .85rem .5rem;font-size:.95rem}
.wc-form .field.field--float>label{position:absolute;z-index:1;top:0;right:.85rem;left:.85rem;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(calc(29px - .55rem));transform-origin:left top;will-change:transform;pointer-events:none;font:600 .9rem/1.25 var(--display);color:#9CA3AF;transition:transform .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1)}
.wc-form .field.field--float:focus-within>label,.wc-form .field.field--float>input:not(:placeholder-shown)~label{transform:translateY(.5rem) scale(.75);color:#C9CCD6}
.wc-form .field.field--float>small{margin-top:.4rem}
@media (prefers-reduced-motion:reduce){.wc-form .field.field--float>label{transition:none}}

/* Aviso (toast) sempre acima dos popups do editor (z-index 1000): sem isso o erro de validação ficava escondido atrás do popup. */
#toast.toast{z-index:1100}

/* Editor genérico dos widgets de lista (Preços, Depoimentos, Perguntas) */
.wc-lista{display:grid;gap:.9rem}
.wc-lista__row{display:grid;gap:.6rem;padding:.8rem;border:1px solid #333640;border-radius:12px;background:#1B1D23}
.wc-lista__head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:.92rem}
.wc-lista__btns{display:flex;gap:.3rem}
.wc-lista__btns button{width:36px;height:36px;border:1px solid #333640;border-radius:8px;background:#23252C;color:#fff;font-size:1rem;cursor:pointer}
.wc-lista__btns button:disabled{opacity:.35;cursor:default}
.wc-lista__btns button[data-act=del]{color:#FCA5A5}
.wc-lista__count{margin:.4rem 0 .5rem;font-size:.82rem;color:#9AA0AE}
.wc-lista__add{width:100%}
.wc-lista__sug{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem;align-items:center;font-size:.85rem;color:#9AA0AE}
.wc-lista__chip{padding:.45rem .8rem;border:1px solid #333640;border-radius:999px;background:#23252C;color:#DDE0E7;font:inherit;cursor:pointer}
.wc-lista__chip:hover{border-color:var(--brand-soft)}
.wc-more{margin-top:1rem;color:#DDE0E7}
.wc-more summary{cursor:pointer;font-weight:600;padding:.4rem 0}
.wc-more .field{margin-top:.6rem}
.wc-form .wc-lista__add{color:#fff;border-color:#333640;background:#23252C}
.wc-form .wc-lista__add:hover{border-color:var(--brand-soft)}

/* Horário e Pix */
.wc-dias{display:grid;gap:.5rem;margin-bottom:.6rem}
.wc-dia{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem;padding:.5rem .7rem;border:1px solid #333640;border-radius:10px;background:#1B1D23}
.wc-dia.is-off{opacity:.6}
.wc-dia__horas{display:inline-flex;align-items:center;gap:.4rem;color:#9AA0AE}
.wc-form input[type=time]{min-height:40px;padding:.3rem .5rem;background:#23252C;border:1px solid #333640;border-radius:8px;color:#fff;font:inherit;font-size:.92rem;color-scheme:dark}
.wc-aviso{margin:0 0 1rem;padding:.7rem .8rem;border-radius:10px;background:#23252C;color:#DDE0E7;font-size:.85rem;line-height:1.45}
/* Galeria: miniatura ao lado da legenda */
.wc-gal__foto{display:flex;gap:.7rem;align-items:flex-start}
.wc-gal__foto .field{flex:1;min-width:0}
.wc-gal__foto .wc-prod__thumb{flex:none;width:64px;height:64px}
.wc-gal__dica{display:block;margin:.4rem 0 0;color:#9AA0AE}

/* Pix: confirmação ao vivo do código colado */
.wc-pix__status{margin:.2rem 0 1rem;padding:.6rem .8rem;border-radius:10px;font-size:.88rem;line-height:1.45;color:#DDE0E7}
.wc-pix__status:empty{display:none}
.wc-pix__status.is-ok{background:#12301F;color:#A7F3C4}
.wc-pix__status.is-erro{background:#3B1D1D;color:#FCA5A5}
.wc-pix__passos{margin:.4rem 0 0;padding-left:1.2rem;color:#DDE0E7;font-size:.88rem;line-height:1.55}
.wc-form textarea[id=px_codigo]{font-family:ui-monospace,monospace;font-size:.8rem;word-break:break-all}
.wc-pix__nota{margin:.4rem 0 0;color:#9AA0AE;font-size:.82rem;line-height:1.45}

/* Aviso de bloco de exemplo na prévia do editor */
.preview-exemplo{display:block;margin:.3rem 0 0;padding:.3rem .6rem;border-radius:8px;background:rgba(245,166,35,.18);color:#F5C16C;font-size:.78rem;line-height:1.35;text-align:left}
/* "Mais opções": botão bem visível (antes era só um texto pequeno) */
.wc-more{margin-top:1rem}
.wc-more summary{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:46px;padding:.65rem 1rem;border:1px solid #4B5060;border-radius:12px;background:#23252C;color:#fff;font:600 .95rem/1.2 var(--display);cursor:pointer;list-style:none;transition:border-color .2s,background .2s}
.wc-more summary::-webkit-details-marker{display:none}
.wc-more summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.wc-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.wc-more summary:hover{border-color:var(--brand-soft);background:#2A2D36}
.wc-more summary:focus-visible{outline:3px solid var(--brand-soft);outline-offset:2px}
.wc-more[open] summary{border-color:var(--brand-soft)}
.wc-more>:not(summary){margin-top:.8rem}
.wc-tb-btn--txt{width:auto;padding:0 .7rem;font-size:.85rem;font-weight:600}

/* Painel "Adicionar bloco": 3 cartões por linha, menores */
.wc-panel__box--picker .wc-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}
.wc-panel__box--picker .wc-item{padding:.85rem .35rem .7rem;gap:.4rem;min-height:88px}
.wc-panel__box--picker .wc-item__icon svg{width:26px;height:26px}
.wc-panel__box--picker .wc-item__label{font-size:.8rem;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.wc-panel__box--picker .wc-item__badge{top:5px;right:5px;padding:.12rem .38rem;font-size:.56rem}

/* Aparência > Botões: preenchimento e forma (a forma é do plano Pro) */
.app-protag{display:inline-block;margin-left:.3rem;padding:.1rem .4rem;border-radius:999px;background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;font:700 .62rem/1.3 var(--display);letter-spacing:.04em;vertical-align:middle}
.app-seg.is-off{opacity:.45}
.app-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media (min-width:520px){.app-shapes{grid-template-columns:repeat(5,1fr)}}
.app-shape{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem .3rem;border:1px solid var(--line);border-radius:12px;background:#fff;font:600 .8rem/1.2 var(--display);color:var(--ink-2);cursor:pointer;position:relative}
.app-shape.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);color:var(--ink)}
.app-shape.is-locked{opacity:.7}
.app-shape.is-locked::after{content:"PRO";position:absolute;top:4px;right:4px;padding:.08rem .3rem;border-radius:999px;background:linear-gradient(135deg,#7C3AED,#A855F7);color:#fff;font:700 .55rem/1.3 var(--display)}
.app-shape__sample{display:grid;place-items:center;width:100%;max-width:70px;height:28px;font:700 .8rem/1 var(--display);color:#fff;background:#171612}
.app-shape__sample--round{border-radius:8px}
.app-shape__sample--pill{border-radius:99px}
.app-shape__sample--square{border-radius:0}
.app-shape__sample--lines{background:transparent;color:#171612;border-top:2px solid #171612;border-bottom:2px solid #171612;border-radius:0}
.app-shape__sample--plain{background:transparent;color:#171612;text-decoration:underline}

/* Aba Configurações */
.cfg-item{margin-bottom:1.4rem}
.cfg-check{display:flex;gap:.6rem;align-items:flex-start;margin:.3rem 0;cursor:pointer;font-size:.95rem;line-height:1.4;color:var(--ink)}
.cfg-check input{flex:none;width:20px;height:20px;margin-top:.1rem;accent-color:var(--brand)}
#cfgMapKeyBox{margin-top:.8rem}

/* Etiqueta "Falta terminar" no preview e botão dentro do aviso (Desfazer, Copiar link) */
.preview-block{position:relative}
.preview-falta{position:absolute;top:-9px;left:12px;z-index:2;padding:2px 9px;border-radius:999px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font:600 .7rem/1.5 var(--display);pointer-events:none;white-space:nowrap}
.toast__acao{flex:none;margin-left:6px;padding:4px 12px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.toast__acao:hover,.toast__acao:focus-visible{background:rgba(0,0,0,.08)}
/* Promoção: o cartão que fica no lugar quando a data passa */
.pub-promo--fim .pub-promo__texto{margin-bottom:0}
.wc-form__intro{margin:0 0 .95rem;font-size:.86rem;line-height:1.45;color:#C9CCD6}
.wc-form [hidden]{display:none!important}
/* Painel "Adicionar bloco" no plano Grátis: aviso de que os blocos Pro podem ser montados, mas só publicam com o plano */
.wc-panel__nota{display:flex;gap:.5rem;align-items:flex-start;margin:1.1rem 0 0;padding:.7rem .85rem;border-radius:12px;background:rgba(255,255,255,.06);color:#C9CCD6;font-size:.84rem;line-height:1.45}
.wc-panel__nota svg{flex:none;width:15px;height:15px;margin-top:.15rem}
.wc-pro-modal__actions .btn--ghost{color:#E6E8EF;border:1px solid rgba(255,255,255,.3);background:transparent}
.wc-pro-modal__actions .btn--ghost:hover,.wc-pro-modal__actions .btn--ghost:focus-visible{background:rgba(255,255,255,.08)}

/* Revisão dos widgets (C7): Preços com Nome e Valor lado a lado; Horário com as horas sempre na linha de baixo no celular */
.wc-lista__duo{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;gap:.6rem;align-items:start}
.wc-dia__horas{flex:1 1 100%}
@media(min-width:520px){.wc-dia__horas{flex:0 0 auto}}

.cfg-aviso{display:block;margin:.2rem 0 .7rem;padding:.55rem .7rem;border-radius:10px;background:#FEF3C7;color:#92400E;line-height:1.4}
.app-site-cta{margin-top:1rem}
.app-site-cta .btn{margin-top:.3rem}

/* =========================================================
   Fase 1 (25/10/2026): editor com o preview sempre à vista.
   Celular (base): preview fixo em cima, painel embaixo; popups e "Adicionar bloco" viram folha na metade de baixo.
   Computador (min-width:961px): painel à esquerda, preview à direita; os popups ocupam o lugar das abas.
   ========================================================= */
.app-tab--preview{display:none}
.editor-layout{display:flex;flex-direction:column;gap:0;height:calc(100vh - var(--editor-top,120px));height:calc(100dvh - var(--editor-top,120px));min-height:420px;margin-top:calc(-1 * clamp(1.5rem,4vw,2.5rem))}
.editor-right{order:0;flex:0 0 var(--preview-h,44%);min-height:0;overflow-y:auto;overscroll-behavior:contain;width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter))}
.editor-right .app-card--content{margin-bottom:0}
.editor-right .app-card__head{margin:0;padding:.5rem var(--gutter)}
.editor-right .app-card__head h2{display:none}
.editor-left{order:1;display:block;position:static;flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 110px}
.editor-left .app-tabs{position:sticky;top:0;z-index:30;margin:0 calc(-1 * var(--gutter)) .75rem;padding:.35rem var(--gutter);border-radius:0;border-inline:0;box-shadow:0 4px 12px rgba(13,13,18,.08)}
.editor-layout.mobile-editor-active .editor-left>.app-panel.is-on{display:block}
.editor-layout.mobile-editor-active #tabbar [data-tab="aparencia"]{background:none}
.editor-layout.mobile-editor-active #tabbar .app-tab.is-on{background:var(--ink);color:#fff}

/* Painéis encaixados (não cobrem o preview) */
.wc-panel--dock{position:fixed;z-index:900;inset:var(--dock-top,50%) 0 0 0;display:block;padding:0;animation:none;pointer-events:none}
.wc-panel--dock .wc-panel__backdrop{display:none}
.wc-panel--dock .wc-panel__box{pointer-events:auto;box-sizing:border-box;width:100%;height:100%;max-height:none;margin:0;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -10px 30px rgba(0,0,0,.35);animation:wcDockUp .25s var(--ease)}
.wc-panel--dock .wc-panel__box::before{content:"";display:block;width:40px;height:4px;margin:-.4rem auto .7rem;border-radius:2px;background:#3A3D48}
@keyframes wcDockUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.wc-panel--dock .wc-panel__box{animation:none}}

@media (min-width:961px){
  .editor-layout{display:grid;height:auto;min-height:0;gap:1.5rem;margin-top:0}
  .editor-right{flex:none;overflow:visible;width:auto;margin-inline:0;order:1}
  .editor-right .app-card__head{padding:0;margin:0 .15rem .75rem}
  .editor-right .app-card__head h2{display:block}
  .editor-left{order:0;overflow:visible;position:sticky;top:84px;width:auto;margin-inline:0;padding:0;flex:none}
  .editor-left .app-tabs{position:static;margin:0 0 1rem;padding:.35rem;border-radius:22px;border:1px solid var(--line);box-shadow:none}
  .wc-panel--dock{inset:var(--dock-top,96px) auto 16px var(--dock-left,0);width:var(--dock-width,440px)}
  .wc-panel--dock .wc-panel__box{border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
  .wc-panel--dock .wc-panel__box::before{display:none}
  body:has(.wc-panel--dock) .editor-left>*{visibility:hidden} /* o painel encaixado ocupa o lugar das abas */
}

/* =========================================================
   Fase 2 (25/10/2026): cabeçalho, fonte, alinhamento e assistente de primeiros passos
   ========================================================= */
.app-hdrs,.app-fonts,.onb-botoes{--c-ink:var(--ink);--c-bg:#fff;--c-line:var(--line);--c-on:var(--ink)}
.wc-onb{--c-ink:#fff;--c-bg:#23252C;--c-line:#3A3D48;--c-on:#fff}
.app-hdrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-bottom:1rem}
.app-hdr{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.55rem .4rem .7rem;border:1.5px solid var(--c-line);border-radius:14px;background:var(--c-bg);color:var(--c-ink);font:600 .82rem var(--display);cursor:pointer}
.app-hdr.is-on,.app-font.is-on,.onb-botao.is-on,.onb-tipo.is-on{border-color:var(--c-on);box-shadow:0 0 0 1px var(--c-on)}
.app-hdr__thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:10px;background:rgba(127,127,127,.18)}
.app-hdr__thumb i{position:absolute;display:block;background:#8a8f99}
.app-hdr__thumb--classic i{left:50%;top:22%;width:46%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%)}
.app-hdr__thumb--highlight i{inset:0 0 28%;border-radius:0;background:linear-gradient(to bottom,#8a8f99 55%,transparent)}
.app-hdr__thumb--burst i{left:50%;top:20%;width:54%;aspect-ratio:1;transform:translateX(-50%);clip-path:polygon(50% 0,60% 8%,72% 6%,76% 18%,88% 22%,86% 34%,96% 42%,90% 54%,96% 66%,86% 72%,86% 84%,74% 86%,68% 96%,56% 92%,44% 96%,38% 88%,26% 90%,22% 78%,10% 74%,12% 62%,2% 54%,8% 42%,2% 32%,14% 28%,16% 16%,28% 14%,34% 4%,44% 8%)}
.app-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.app-font{padding:.7rem .6rem;border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-bg);color:var(--c-ink);font-size:.98rem;cursor:pointer;text-align:center}
#alignSeg{margin-bottom:.4rem}
.app-protag{font:700 .6rem/1 var(--display);padding:.15rem .35rem;border-radius:6px;background:var(--brand-2,#6d5bff);color:#fff;vertical-align:middle}

/* Assistente: folha encaixada, com barra de progresso, corpo que rola e rodapé fixo */
.wc-onb .wc-onb__box{display:flex;flex-direction:column;padding:0;overflow:hidden}
.wc-onb .wc-panel__box::before{margin:.5rem auto .2rem}
.wc-onb__top{display:flex;align-items:center;gap:.75rem;padding:.4rem 1.1rem .2rem}
.wc-onb__bar{flex:1;height:6px;border-radius:3px;background:#2b2d35;overflow:hidden}
.wc-onb__bar span{display:block;height:100%;width:33%;border-radius:3px;background:#2fe38a;transition:width .3s var(--ease)}
.wc-onb__later{border:0;background:none;color:#9aa0b0;font:600 .8rem var(--display);cursor:pointer;text-decoration:underline}
.wc-onb__body{flex:1;min-height:0;overflow-y:auto;padding:.6rem 1.1rem 1rem}
.wc-onb__titulo{margin:.2rem 0 .3rem;font:700 1.1rem/1.25 var(--display);color:#fff}
.wc-onb__foot{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));border-top:1px solid #272932;background:#18191E}
.wc-onb__sp{flex:1}
.wc-onb__foot .btn[hidden]{display:none}
.wc-onb__foot .btn--ghost{color:#c9ccd6;border-color:#3a3d48}
.wc-onb .app-seg{margin:.6rem 0 .8rem;display:flex;flex-wrap:wrap}
.onb-tipos{display:grid;gap:.5rem;margin:.6rem 0 1rem}
.onb-tipo{display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;border:1.5px solid var(--c-line);border-radius:14px;background:var(--c-bg);color:var(--c-ink);text-align:left;cursor:pointer}
.onb-tipo svg{width:24px;height:24px;flex:none}
.onb-tipo strong{display:block;font:700 .95rem var(--display)}
.onb-tipo small{margin:0;color:#9aa0b0}
.onb-cores{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;max-width:20rem}
.onb-cor{aspect-ratio:1;border-radius:50%;border:2px solid #3a3d48;cursor:pointer}
.onb-cor.is-on{outline:2px solid #fff;outline-offset:2px}
.onb-botoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.onb-botao{padding:.8rem .6rem;border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-bg);color:var(--c-ink);font:600 .9rem var(--display);cursor:pointer}
@media (min-width:961px){.wc-onb__body{padding:.8rem 1.4rem 1rem}.wc-onb__top{padding:.9rem 1.4rem .2rem}.wc-onb__foot{padding-inline:1.4rem}}

/* Fase 3: ícone ou miniatura no botão de Link (Pro) */
.li-icons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin-top:.5rem}
.li-ico{display:grid;place-items:center;aspect-ratio:1;border:1.5px solid #3a3d48;border-radius:10px;background:#23252C;color:#dde0e7;cursor:pointer}
.li-ico svg{width:22px;height:22px}
.li-ico.is-on{border-color:#fff;box-shadow:0 0 0 1px #fff;color:#fff}
.wc-form .app-seg button:disabled{opacity:.45;cursor:not-allowed}

/* Fase 4: popup do Banner (prévia, modelos e cores) */
.bn-previa{padding:40px 6px 6px;margin-bottom:.4rem}
.bn-previa .pub-banner{margin-top:0}
.bn-modelos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.bn-modelos button{padding:.7rem .3rem;border:2px solid transparent;border-radius:10px;font:700 .82rem var(--display);cursor:pointer}
.bn-modelos button.is-on{border-color:#fff;box-shadow:0 0 0 1px #fff}
.bn-paletas{display:flex;gap:.5rem}
.bn-paletas button{position:relative;width:52px;height:36px;border:2px solid transparent;border-radius:10px;cursor:pointer}
.bn-paletas button i{position:absolute;right:5px;bottom:5px;width:12px;height:12px;border-radius:50%}
.bn-paletas button.is-on{border-color:#fff;box-shadow:0 0 0 1px #fff}