/*
 * Fábrica Nerd — ASSISTENTE PASSO A PASSO (camada por cima do editor, sem mexer no motor de desenho).
 * Traz: barra de etapas colorida, etiquetas (tags) de cor, dicas do momento por aba, modo Simples/Avançado,
 * convite grande para enviar a foto, resumo antes de comprar e o "Como funciona". Tudo com prefixo bng-.
 *
 * Cores por assunto (as mesmas em todo lugar, para a pessoa aprender "cor = assunto"):
 *   azul = Produto · verde = Sua arte · âmbar = Texto · magenta = Enfeites · ciano = Códigos · laranja = Conferir/comprar
 * Etiquetas: ESSENCIAL (verde) · OPCIONAL (azul) · CRIATIVO (magenta) · AVANÇADO (roxo) · IA (rosa) · DICA (amarelo)
 */

:root {
    --bng-produto: #4169e1;
    --bng-arte: #22c55e;
    --bng-texto: #f59e0b;
    --bng-enfeite: #d946ef;
    --bng-codigo: #06b6d4;
    --bng-conferir: #f97316;
    --bng-bg: rgba(255, 255, 255, .055);
    --bng-borda: rgba(255, 255, 255, .12);
    --bng-texto-fraco: #a8a396;
}

/* ===================================================== etiquetas */
.bng-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    line-height: 1.5; white-space: nowrap; border: 1px solid transparent; vertical-align: middle;
}
.bng-chip i { font-size: .6rem; }
.bng-c-essencial { background: rgba(34, 197, 94, .16); color: #86efac; border-color: rgba(34, 197, 94, .5); }
.bng-c-opcional { background: rgba(96, 165, 250, .16); color: #93c5fd; border-color: rgba(96, 165, 250, .5); }
.bng-c-criativo { background: rgba(217, 70, 239, .16); color: #f0abfc; border-color: rgba(217, 70, 239, .5); }
.bng-c-avancado { background: rgba(139, 92, 246, .18); color: #c4b5fd; border-color: rgba(139, 92, 246, .55); }
.bng-c-ia { background: linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(217, 70, 239, .22)); color: #fda4af; border-color: rgba(244, 63, 94, .55); }
.bng-c-dica { background: rgba(250, 204, 21, .15); color: #fde047; border-color: rgba(250, 204, 21, .5); }
.bng-c-novo { background: rgba(249, 115, 22, .18); color: #fdba74; border-color: rgba(249, 115, 22, .55); }
.bng-c-rapido { background: rgba(34, 197, 94, .16); color: #86efac; border-color: rgba(34, 197, 94, .5); }

/* ===================================================== barra de etapas */
.bng-steps {
    display: flex; align-items: stretch; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 18px; flex: 0 0 auto;
    background: var(--bng-bg); border: 1px solid var(--bng-borda); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: relative;
}
.bng-steps-list { display: flex; flex: 1 1 auto; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bng-steps-list::-webkit-scrollbar { display: none; }
.bng-step {
    --c: var(--bng-produto);
    flex: 1 1 0; min-width: 118px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; cursor: pointer; position: relative;
    background: transparent; border: 1px solid transparent; color: inherit; text-align: left; font: inherit;
    transition: background .25s, border-color .25s, transform .15s, box-shadow .25s;
}
.bng-step:hover { background: rgba(255, 255, 255, .06); transform: translateY(-1px); }
.bng-step:active { transform: scale(.98); }
.bng-step:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.bng-step[data-step="1"] { --c: var(--bng-produto); }
.bng-step[data-step="2"] { --c: var(--bng-arte); }
.bng-step[data-step="3"] { --c: var(--bng-texto); }
.bng-step[data-step="4"] { --c: var(--bng-enfeite); }
.bng-step[data-step="5"] { --c: var(--bng-codigo); }
.bng-step[data-step="6"] { --c: var(--bng-conferir); }
.bng-num {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem;
    background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
    transition: background .3s, color .3s, transform .3s;
}
.bng-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bng-txt b { font-size: .8rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bng-txt small { font-size: .66rem; color: var(--bng-texto-fraco); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bng-step.is-current { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 6px 20px color-mix(in srgb, var(--c) 28%, transparent); }
.bng-step.is-current .bng-num { background: var(--c); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.bng-step.is-done .bng-num { background: var(--c); color: #fff; }
.bng-step.is-done .bng-num span { display: none; }
.bng-step.is-done .bng-num::after { content: "\2713"; animation: bng-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.bng-step.is-ready .bng-num { animation: bng-pulse 1.6s ease-in-out infinite; }
.bng-step[data-step="6"] .bng-num { background: var(--c); color: #fff; }
.bng-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bng-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bng-borda); background: rgba(255, 255, 255, .07);
    color: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; font-family: inherit; white-space: nowrap; transition: transform .15s, background .2s, border-color .2s;
}
.bng-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
.bng-btn:active { transform: scale(.96); }
.bng-btn.is-primary { background: linear-gradient(135deg, #6f94ff, #4169e1 55%, #2b49c9); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(65, 105, 225, .4); }
.bng-btn.is-conferir { background: linear-gradient(135deg, #fb923c, #f97316 55%, #ea580c); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(249, 115, 22, .4); }
.bng-mode { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--bng-borda); }
.bng-mode button { border: 0; background: transparent; color: var(--bng-texto-fraco); font-weight: 800; font-size: .72rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background .2s, color .2s; }
.bng-mode button.on { background: linear-gradient(135deg, #6f94ff, #4169e1); color: #fff; box-shadow: 0 4px 12px rgba(65, 105, 225, .4); }
.bng-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 8px; padding: 0 4px; font-size: .7rem; color: var(--bng-texto-fraco); }
.bng-legend[hidden] { display: none; }

/* ===================================================== abas coloridas (a coluna de ferramentas) */
.bn-rail-tab { position: relative; }
.bn-rail-tab[data-rail-tab="produto"] { --c: var(--bng-produto); }
.bn-rail-tab[data-rail-tab="imagem"] { --c: var(--bng-arte); }
.bn-rail-tab[data-rail-tab="texto"] { --c: var(--bng-texto); }
.bn-rail-tab[data-rail-tab="studio"] { --c: var(--bng-enfeite); }
.bn-rail-tab[data-rail-tab="codigos"] { --c: var(--bng-codigo); }
.bn-rail-tab[data-rail-tab] i { color: var(--c); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.bn-rail-tab[data-rail-tab].active { box-shadow: inset 0 -3px 0 var(--c); }
.bn-rail-tab[data-rail-tab].active i { transform: scale(1.15); }
.bn-rail-tab .bng-dot { position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); transform: scale(0); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.bn-rail-tab.has-content .bng-dot { transform: scale(1); }
[data-rail-pane] > .bn-panel, [data-rail-pane] > .bn-panel-fold { border-left: 3px solid var(--bng-pane, transparent); }
[data-rail-pane="produto"] { --bng-pane: var(--bng-produto); }
[data-rail-pane="imagem"] { --bng-pane: var(--bng-arte); }
[data-rail-pane="texto"] { --bng-pane: var(--bng-texto); }
[data-rail-pane="studio"] { --bng-pane: var(--bng-enfeite); }
[data-rail-pane="codigos"] { --bng-pane: var(--bng-codigo); }
[data-rail-pane]:not([hidden]) { animation: bng-slide .35s cubic-bezier(.2, .8, .2, 1) both; }

/* ===================================================== dica do momento (coach) */
.bng-coach {
    --c: var(--bng-pane, var(--bng-produto)); margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, transparent), color-mix(in srgb, var(--c) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.bng-coach-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.bng-coach-pass { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.bng-coach b { display: block; font-size: .92rem; line-height: 1.3; margin-bottom: 3px; }
.bng-coach p { margin: 0; font-size: .78rem; line-height: 1.5; color: #d8d3c5; }
.bng-coach-nav { display: flex; gap: 8px; margin-top: 10px; }
.bng-coach-nav .bng-btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
.bng-coach-nav .bng-btn.is-next { background: var(--c); border-color: transparent; color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent); }

/* ===================================================== modo simples: esconde o avançado */
body.bng-simple .bng-adv { display: none !important; }
.bng-adv-bar { margin: 8px 0 14px; padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(139, 92, 246, .5); background: rgba(139, 92, 246, .08); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: #d8d3c5; }
.bng-adv-bar .bng-btn { min-height: 34px; padding: 0 12px; font-size: .72rem; }
body:not(.bng-simple) .bng-adv-bar { display: none; }
body:not(.bng-simple) .bng-adv { box-shadow: -3px 0 0 rgba(139, 92, 246, .55); padding-left: 6px; border-radius: 6px; }

/* ===================================================== convite grande para enviar a foto */
.bng-empty {
    position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; pointer-events: none;
}
.bng-empty[hidden] { display: none; }
.bng-empty .bng-cta {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 1rem; color: #fff;
    background: linear-gradient(135deg, #4ade80, #22c55e 55%, #16a34a); box-shadow: 0 14px 36px rgba(34, 197, 94, .5), inset 0 1px 0 rgba(255, 255, 255, .4); animation: bng-float 2.4s ease-in-out infinite;
}
.bng-empty .bng-cta:active { transform: scale(.96); }
.bng-empty .bng-sub { pointer-events: auto; font-size: .78rem; color: #e5e1d4; background: rgba(0, 0, 0, .55); padding: 6px 12px; border-radius: 999px; }
.bng-empty .bng-sub button { background: none; border: 0; color: #86efac; font-weight: 800; cursor: pointer; text-decoration: underline; font-family: inherit; }

/* ===================================================== resumo antes de comprar (dentro da janela de aceite) */
.bng-resumo { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: rgba(249, 115, 22, .09); border: 1px solid rgba(249, 115, 22, .45); }
.bng-resumo h4 { margin: 0 0 10px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.bng-resumo-grid { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.bng-resumo-img { width: 96px; height: 96px; border-radius: 14px; object-fit: contain; background: rgba(0, 0, 0, .35); border: 1px solid var(--bng-borda); }
.bng-resumo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .82rem; }
.bng-resumo dt { color: var(--bng-texto-fraco); }
.bng-resumo dd { margin: 0; font-weight: 700; }
.bng-resumo ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: .78rem; }
.bng-resumo li { display: flex; gap: 8px; align-items: flex-start; }
.bng-resumo li::before { content: "\2713"; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .65rem; font-weight: 800; background: rgba(34, 197, 94, .25); color: #86efac; }
.bng-resumo li.is-aviso::before { content: "!"; background: rgba(250, 204, 21, .25); color: #fde047; }

/* ===================================================== Como funciona */
.bng-tour { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 4, 12, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: bng-fade .25s both; }
.bng-tour[hidden] { display: none; }
.bng-tour-card { width: min(520px, 100%); max-height: 92vh; overflow: auto; border-radius: 26px; padding: 22px; background: color-mix(in srgb, #14141d 94%, transparent); border: 1px solid var(--bng-borda); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1); animation: bng-pop-card .4s cubic-bezier(.2, 1.2, .3, 1) both; position: relative; }
.bng-tour-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.2rem; cursor: pointer; }
.bng-tour-slide { display: none; text-align: center; }
.bng-tour-slide.on { display: block; animation: bng-slide .35s both; }
.bng-tour-ic { width: 84px; height: 84px; margin: 6px auto 12px; border-radius: 26px; display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: var(--c, var(--bng-produto)); box-shadow: 0 14px 36px color-mix(in srgb, var(--c, #4169e1) 50%, transparent); }
.bng-tour-slide h3 { margin: 0 0 6px; font-size: 1.25rem; }
.bng-tour-slide p { margin: 0 auto 8px; max-width: 40ch; color: #d8d3c5; line-height: 1.55; font-size: .92rem; }
.bng-tour-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0; }
.bng-tour-dots i { width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .2); transition: width .3s, background .3s; }
.bng-tour-dots i.on { width: 24px; background: #4169e1; }
.bng-tour-nav { display: flex; gap: 10px; }
.bng-tour-nav .bng-btn { flex: 1 1 0; justify-content: center; min-height: 48px; }

/* ===================================================== vitrine (Prontos) e escolha do modo */
.bn-mode-card { position: relative; }
.bn-mode-card .bng-chip { position: absolute; top: 10px; right: 10px; }
.bn-mode-card[data-mode="ready"] { --c: var(--bng-arte); }
.bn-mode-card[data-mode="custom"] { --c: var(--bng-enfeite); }
.bn-mode-card.active { border-color: var(--c, var(--bng-produto)); box-shadow: 0 10px 30px color-mix(in srgb, var(--c, #4169e1) 30%, transparent); }
.bn-mode-card:hover { transform: translateY(-3px); }
.bng-flow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; margin: 10px 0 0; font-size: .78rem; color: var(--bng-texto-fraco); }
.bng-flow span { display: inline-flex; align-items: center; gap: 6px; }
.bng-flow b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: color-mix(in srgb, var(--c, #4169e1) 25%, transparent); color: var(--c, #93c5fd); border: 1.5px solid var(--c, #4169e1); }
.bn-ready-card[data-kind="botton"] .bng-kindtag, .bng-kindtag[data-kind="botton"] { --k: #4169e1; }
.bng-kindtag { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 10px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--k, #4169e1); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.bng-kindtag[data-kind="quadro"] { --k: #f97316; }
.bng-kindtag[data-kind="polaroid"] { --k: #ec4899; }
.bng-kindtag[data-kind="photocard"] { --k: #8b5cf6; }
.bng-kindtag[data-kind="community"] { --k: #06b6d4; }

/* ===================================================== animações */
@keyframes bng-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bng-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 0%, transparent); } }
@keyframes bng-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bng-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bng-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bng-pop-card { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
#bnCheckout.bng-ready { animation: bng-buy-pulse 1.8s ease-in-out infinite; }
@keyframes bng-buy-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) {
    .bng-step.is-ready .bng-num, .bng-empty .bng-cta, #bnCheckout.bng-ready, [data-rail-pane]:not([hidden]), .bng-tour-slide.on, .bng-tour-card { animation: none !important; }
}

/* ===================================================== celular */
@media (max-width: 900px) {
    .bng-steps { padding: 8px; gap: 8px; border-radius: 16px; margin-bottom: 6px; flex-wrap: wrap; }
    .bng-steps-list { flex: 1 1 100%; scroll-snap-type: x proximity; }
    .bng-step { min-width: 108px; scroll-snap-align: start; padding: 6px 8px; }
    .bng-txt small { display: none; }
    .bng-tools { flex: 1 1 100%; justify-content: space-between; }
    .bng-coach { margin-bottom: 10px; padding: 10px 12px; }
    .bng-resumo-grid { grid-template-columns: 1fr; justify-items: center; }
    .bng-empty .bng-cta { min-height: 52px; font-size: .95rem; padding: 0 20px; }
}

/* bolinha de nível nas abas do Studio */
.bn-studio-nav button[data-bng]::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--k, #60a5fa); vertical-align: middle; }
.bn-studio-nav button[data-bng="essencial"] { --k: #22c55e; }
.bn-studio-nav button[data-bng="opcional"] { --k: #60a5fa; }
.bn-studio-nav button[data-bng="avancado"] { --k: #8b5cf6; }
.bn-studio-nav button[data-bng="ia"] { --k: #f43f5e; }
.bng-studio-legend { margin: 6px 0 10px; line-height: 2; }
.bn-app-fit > .bng-steps, .bn-app-fit > .bng-legend { flex: 0 0 auto; margin-bottom: 0; }

/* telas médias: cabem as 6 etapas sem cortar */
@media (min-width: 901px) and (max-width: 1599px) {
    .bng-step { min-width: 0; padding: 6px 8px; gap: 7px; }
    .bng-txt small { display: none; }
    .bng-num { width: 26px; height: 26px; font-size: .78rem; }
    #bngTourBtn span { display: none; }
}
@media (max-width: 900px) { .bng-legend { display: none; } }

/* ===================================================== "Como você quer começar?" — escolha grande e amigável */
.botons-page .bn-mode-pick.is-compact, .bn-mode-pick.is-compact {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; padding: 0;
}
.botons-page .bn-mode-pick.is-compact .bn-mode-card, .bn-mode-pick.is-compact .bn-mode-card {
    --c: var(--bng-produto); display: grid; grid-template-columns: 54px 1fr; grid-template-areas: "ic tt" "ic ds"; column-gap: 14px; row-gap: 2px; align-items: center; width: 100%;
    min-height: 84px; padding: 14px 18px; border-radius: 20px; text-align: left; justify-content: stretch;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, transparent), rgba(12, 12, 22, .85)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.bn-mode-pick.is-compact .bn-mode-card[data-mode="ready"] { --c: var(--bng-arte); }
.bn-mode-pick.is-compact .bn-mode-card[data-mode="custom"] { --c: var(--bng-enfeite); }
.bn-mode-pick.is-compact .bn-mode-card .bn-mode-icon { grid-area: ic; width: 54px; height: 54px; border-radius: 16px; font-size: 1.4rem; background: var(--c); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 45%, transparent); margin: 0; }
.bn-mode-pick.is-compact .bn-mode-card strong { grid-area: tt; font-size: 1.05rem; align-self: end; }
.bn-mode-pick.is-compact .bn-mode-card > span:last-child { grid-area: ds; display: block; font-size: .8rem; color: #c9c4b6; line-height: 1.35; align-self: start; }
.bn-mode-pick.is-compact .bn-mode-card .bng-chip { display: inline-flex; }
.bn-mode-pick.is-compact .bn-mode-card.active { box-shadow: 0 12px 34px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); }
@media (max-width: 700px) {
    .botons-page .bn-mode-pick.is-compact, .bn-mode-pick.is-compact { grid-template-columns: 1fr; gap: 10px; }
    .bn-mode-pick.is-compact .bn-mode-card { min-height: 72px; padding: 12px 14px; }
}

/* dica recolhível */
.bng-coach-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .25); color: #e5e1d4; cursor: pointer; display: grid; place-items: center; font-size: .7rem; }
.bng-coach-x i { transition: transform .25s; }
.bng-coach-mini { display: none; font-size: .8rem; font-weight: 700; color: #f5f2ea; }
.bng-coach.is-min { padding: 9px 44px 9px 12px; }
.bng-coach.is-min .bng-coach-top { margin: 0; }
.bng-coach.is-min > b, .bng-coach.is-min > p, .bng-coach.is-min .bng-coach-nav, .bng-coach.is-min .bng-chip { display: none; }
.bng-coach.is-min .bng-coach-mini { display: inline; }
.bng-coach.is-min .bng-coach-x i { transform: rotate(180deg); }
.bng-coach:not(.is-min) .bng-coach-top { padding-right: 34px; }

/* com a arte vazia, o convite grande substitui a faixa de instrução de cima (mesma mensagem) */
body.bng-vazio #bnGuide { display: none !important; }

/* números das seções nas cores das etapas */
[data-rail-pane] .bn-panel .bn-step, [data-rail-pane] .bn-panel-fold .bn-step { background: var(--bng-pane, var(--bng-produto)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--bng-pane, #4169e1) 45%, transparent); }

/* celular: barra Salvar/Carrinho colada no fim da gaveta (sem conteúdo vazando por baixo) e botão Fechar no padrão */
@media (max-width: 991px) {
  body.bn-sheet-on .bn-tools .bn-actions-sticky { bottom: -18px; margin-bottom: -18px; padding-bottom: 26px; background: linear-gradient(0deg, rgb(18, 18, 32) 75%, rgba(18, 18, 32, 0)); }
  body.bn-sheet-on .bn-sheet-close { border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); padding: 7px 14px; font-size: .85rem; }
}
/* campo + botão/cor ao lado sempre na mesma linha (no celular o botão caía sozinho embaixo) */
.bn-inline:has(> .bn-input.bn-grow):not(:has(> :nth-child(3))) { flex-wrap: nowrap; }
.bn-inline:has(> .bn-input.bn-grow):not(:has(> :nth-child(3))) > .bn-input.bn-grow { min-width: 0; flex: 1 1 0; }
.bn-inline:has(> .bn-input.bn-grow):not(:has(> :nth-child(3))) > :not(.bn-input) { flex: 0 0 auto; }

/* ============ MODO APP: na tela de criação só fica o editor (sem cabeçalho, menu, categorias e rodapé do site) ============ */
.bn-appbar-title, .bn-appbar-cart { display: none; }
body.bn-editor-active #siteHeader,
body.bn-editor-active .site-header,
body.bn-editor-active .bottom-nav,
body.bn-editor-active .site-footer,
body.bn-editor-active #floatStack,
body.bn-editor-active .botons-hero,
body.bn-editor-active #bnModePick,
body.bn-editor-active .bn-seo-block { display: none !important; }
body.bn-editor-active { padding-top: 0 !important; padding-bottom: 0 !important; }
body.bn-editor-active #siteContent, body.bn-editor-active .site-content { padding-top: 0 !important; margin-top: 0 !important; }
body.bn-editor-active .botons-page { padding-top: 0 !important; margin-top: 0 !important; }
body.bn-editor-active .bn-appbar {
  position: sticky; top: 0; z-index: 60; margin: 0 0 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top));
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
  background: rgba(12, 12, 24, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 16px 16px;
}
body.bn-editor-active .bn-appbar-back { min-height: 38px; padding: 6px 12px; border-radius: 999px; }
body.bn-editor-active .bn-appbar-title { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800; color: #f5f2ea; white-space: nowrap; }
body.bn-editor-active .bn-appbar-title i { color: #7f9dff; }
body.bn-editor-active .bn-appbar .bn-note { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.bn-editor-active .bn-appbar .bn-note ~ .bn-note { margin-left: 0; }
body.bn-editor-active .bn-appbar-cart {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; min-height: 38px; padding: 6px 12px; border-radius: 999px;
  background: rgba(65, 105, 225, .18); border: 1px solid rgba(127, 157, 255, .35); color: #e8eeff; text-decoration: none; font-weight: 800; font-size: .85rem;
}
body.bn-editor-active .bn-appbar .bn-note + .bn-appbar-cart, body.bn-editor-active .bn-appbar .bn-note ~ .bn-appbar-cart { margin-left: 0; }
body.bn-editor-active .bn-appbar-cart-n { min-width: 18px; text-align: center; }
@media (max-width: 991px) {
  body.bn-editor-active .bn-appbar { border-radius: 0; margin: 0 calc(-1 * var(--bn-gutter, 0px)) 6px; }
  body.bn-editor-active .bn-appbar #bnDeadlineNote { display: none; }
  body.bn-editor-active .bn-appbar .bn-aff small { display: none; }
}
@media (max-width: 420px) {
  body.bn-editor-active .bn-appbar-title { font-size: .85rem; }
  body.bn-editor-active .bn-appbar .bn-note-attn { font-size: .7rem; white-space: normal; line-height: 1.2; }
}
body.bn-editor-active .bng-flow { display: none !important; }

/* modo app no celular: topo enxuto para a arte aparecer logo */
body.bn-editor-active .bn-appbar-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.bn-editor-active .bn-appbar-cart { margin-left: 0 !important; }
@media (max-width: 991px) {
  body.bn-editor-active .bng-legend { display: none; }
  body.bn-editor-active .bng-steps { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; flex-wrap: nowrap; }
  body.bn-editor-active .bng-steps-list { flex: 1 1 auto; min-width: 0; margin: 0; padding-bottom: 0; }
  body.bn-editor-active .bng-tools { flex: 0 0 auto; gap: 6px; margin: 0; padding: 0; border: 0; }
  body.bn-editor-active .bng-mode button { padding: 5px 9px; font-size: .7rem; min-height: 30px; }
  body.bn-editor-active #bngTourBtn { width: 32px; height: 32px; min-height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
  body.bn-editor-active #bngTourBtn span { display: none; }
  body.bn-editor-active .bng-step { padding: 4px 8px 4px 4px; }
  body.bn-editor-active .bng-step .bng-num { width: 26px; height: 26px; font-size: .8rem; }
  body.bn-editor-active .bng-step .bng-txt b { font-size: .78rem; }
  body.bn-editor-active #bnSlotsHint { display: none; }
  body.bn-editor-active .bn-slots-top { padding: 8px 10px; margin-bottom: 6px; }
  body.bn-editor-active .bn-slots-top-head { margin-bottom: 4px; }
  body.bn-editor-active .bn-slots-top-head h3 { font-size: .85rem; }
  body.bn-editor-active .bn-admin-actor { padding: 8px 10px; margin-bottom: 6px; }
}
@media (max-width: 991px) {
  /* no celular a barra de baixo já é o passo a passo: aqui fica só Simples/Avançado e a ajuda */
  body.bn-editor-active .bng-steps-list { display: none; }
  body.bn-editor-active .bng-steps { justify-content: space-between; background: transparent; border: 0; box-shadow: none; padding: 0 2px; }
  body.bn-editor-active .bng-steps::before { content: "Opções:"; font-size: .72rem; font-weight: 700; color: #9aa3b5; }
  body.bn-editor-active .bng-tools { margin-left: auto; }
}
@media (max-width: 991px) {
  /* barra de cima da arte numa linha só (Imagem, desfazer/refazer, zoom) */
  body.bn-editor-active .bn-tb-top { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  body.bn-editor-active .bn-tb-top::-webkit-scrollbar { display: none; }
  body.bn-editor-active .bn-tb-top .bn-tb-group { flex: 0 0 auto; padding: 3px; gap: 2px; }
  body.bn-editor-active .bn-tb-top .bn-tb-btn { min-width: 34px; min-height: 34px; padding: 4px 8px; }
}