/* ===========================================================================
 * home-wizard.css — visual do wizard do GoTO Factory rodando EMBUTIDO na home.
 *
 * Cópia do <style> de app/Views/layouts/factory.php (extraído em 2026-08-31),
 * com quatro mudanças deliberadas para o bloco conviver dentro do layout
 * `main.php` sem contaminar o resto da página:
 *
 *   1. `color-scheme` (dark/light) foi REMOVIDO das declarações de variáveis —
 *      no layout factory ele vale para a página inteira; aqui pintaria a home
 *      toda com o esquema do wizard.
 *   2. `* { margin/padding/box-sizing }`, `body { ... }` e `a { color: inherit }`
 *      viraram `.gf-embed *`, `.gf-embed` e `.gf-embed a`. Sem isso o reset
 *      global do factory zeraria as margens de TODA a home.
 *   3. As custom properties `--gf-*` continuam em `:root` de propósito: não
 *      colidem com nenhum token do app.css (conferido: zero ocorrências) e
 *      precisam alcançar `.gf-toast`, que o CSS posiciona como overlay fixo.
 *   4. Bloco "Overrides do modo embutido" no fim do arquivo — o principal é o
 *      `.gf-footer`, que no factory é `position: fixed` colado no rodapé da
 *      janela (faz sentido numa página que É só o wizard, mas dentro da home
 *      ficaria flutuando sobre as outras seções).
 *
 * As regras de sidebar/topbar (`.gf-sidebar`, `.gf-menu`, `.gf-brand`, ...)
 * foram mantidas mesmo sem uso: nenhum elemento com essas classes existe aqui,
 * então ficam inertes, e removê-las à mão do meio das media queries daria mais
 * chance de erro do que os poucos KB que economizariam.
 * =========================================================================== */

/* Padrão = escuro (alinhado ao :root do app.css, mesmo esquema usado pelo
   tema "dark" do Perfil). Só o tema "light" do Perfil recebe override
   abaixo. Isso corrige o bug de o GoTO Factory ficar sempre no visual
   claro, ignorando a preferência do Perfil. (O tema "old" existiu no
   Perfil mas foi removido — só "light"/"dark" continuam válidos.) */
:root {
    --gf-sidebar: #0a1122; --gf-sidebar-hover: #16203a;
    --gf-bg: #0f0f11; --gf-card: #17171a; --gf-border: #2a2a30;
    --gf-text: #f1f1f3; --gf-muted: #a1a1aa;
    /* Embutido na home, o wizard herda a paleta do site (app.css) em vez do azul
       #2563eb do layout `factory`: ali ele é a página inteira, aqui é uma seção
       no meio da home e o azul destoava do roxo (escuro) / teal (claro) do resto.
       `--gf-accent` é o par de contraste usado nos gradientes de destaque. */
    --gf-primary: var(--primary, #8b5cf6); --gf-accent: #3b82f6;
    --gf-primary-soft: #241b3d; --gf-primary-brd: #3a2f5c; --gf-radius: 12px;
    /* Largura máxima do wizard (janela + rodapé fixo andam juntos). */
    --gf-wiz-max: 1200px;
    /* Larguras da sidebar. Por padrão ela fica no modo ESTREITO (só ícones);
       o hambúrguer a expande para `--gf-sb-w` com os rótulos. `--gf-sb-off` é
       o quanto o conteúdo se desloca por causa dela — no mobile vira 0, porque
       lá a sidebar é overlay e não reserva espaço. */
    --gf-sb-w: 242px;
    --gf-sb-w-rail: 68px;
    --gf-sb-off: var(--gf-sb-w-rail);
    /* fundos/divisores "sutis" (hover de chip, cabeçalho de tabela, editor de prompt, etc.) */
    --gf-subtle: #1e1e22; --gf-border-hover: #3a4358;
}
html[data-theme="light"] {
    --gf-bg: #f4f6fa; --gf-card: #ffffff; --gf-border: #e4e8f0;
    --gf-text: #1a2233; --gf-muted: #6b7488;
    --gf-accent: #db5a42;
    --gf-primary-soft: #e4f2f3; --gf-primary-brd: #b4dde1;
    --gf-subtle: #f4f6fa; --gf-border-hover: #c9d2e3;
}
.gf-embed * { margin: 0; padding: 0; box-sizing: border-box; }
.gf-embed { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--gf-bg); color: var(--gf-text); font-size: 14px; }
.gf-embed a { color: inherit; }
.gf-app { display: flex; min-height: calc(100vh - 64px); }

/* ── Sidebar ─────────────────────────────────────────── */
/* No desktop (>860px) a sidebar é SEMPRE visível e reserva espaço — nunca sai
   da tela. Ela tem dois tamanhos: "rail" (padrão, só os ícones, ~68px) e
   expandida (242px, com rótulos), alternados pelo hambúrguer via a classe
   .gf-nav-open no <body>; `--gf-sb-off` desloca `.gf-main`/`.gf-footer` na
   medida certa. Abaixo de 860px ela vira gaveta/overlay fechada (ver media
   query). Mesma ideia do estado recolhido da sidebar do Painel do Criador em
   app/Views/creator/nav.php. */
.gf-sidebar { width: var(--gf-sb-off); background: var(--gf-sidebar); color: #cbd5e1; display: flex; flex-direction: column; position: fixed; top: 64px; bottom: 0; left: 0; z-index: 60; transform: translateX(0); transition: transform .25s ease, width .2s ease; box-shadow: 8px 0 24px rgba(10,17,34,.25); overflow-x: hidden; }
/* Expandida: mostra os rótulos e alarga o offset do conteúdo. */
body.gf-nav-open { --gf-sb-off: var(--gf-sb-w); }
.gf-sidebar.gf-sidebar-open { transform: translateX(0); }

/* ── Modo rail (só ícones) — some tudo que é texto ─────── */
/* Vale sempre que o menu NÃO está expandido. Os seletores usam :not() em vez de
   uma classe própria para o rail, para o padrão (sem classe no body) já ser o
   rail — assim a página nasce estreita mesmo antes do JS rodar. */
body:not(.gf-nav-open) .gf-sidebar .gf-brand > div:not(.gf-brand-icon),
body:not(.gf-nav-open) .gf-sidebar .gf-menu-item span,
body:not(.gf-nav-open) .gf-sidebar .gf-tip,
body:not(.gf-nav-open) .gf-sidebar .gf-user > div:not(.gf-avatar),
body:not(.gf-nav-open) .gf-sidebar .gf-chev,
body:not(.gf-nav-open) .gf-sidebar .gf-sidebar-close { display: none; }
body:not(.gf-nav-open) .gf-sidebar .gf-brand,
body:not(.gf-nav-open) .gf-sidebar .gf-user { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
body:not(.gf-nav-open) .gf-sidebar .gf-menu { padding: 6px 10px; }
body:not(.gf-nav-open) .gf-sidebar .gf-menu-item { justify-content: center; padding: 11px 0; gap: 0; }
/* Empurra o bloco do usuário para o rodapé, papel que o .gf-tip (escondido no
   rail) cumpre no modo expandido via `margin: auto ...`. */
body:not(.gf-nav-open) .gf-sidebar .gf-user { margin-top: auto; }
.gf-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 18px; text-decoration: none; }
.gf-sidebar-close { display: block; margin-left: auto; background: none; border: none; color: #8a94ab; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.gf-sidebar-close:hover { color: #fff; }
.gf-sidebar-toggle { display: inline-flex; align-items: center; background: none; border: none; color: var(--gf-text); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px 4px 0; }
.gf-sidebar-backdrop { display: none; position: fixed; inset: 0; top: 64px; background: rgba(10, 17, 34, .45); z-index: 20; }
.gf-sidebar-backdrop.gf-sidebar-open { display: block; }

/* Mobile: a sidebar volta a ser gaveta/overlay — não reserva espaço (offset 0)
   e nasce fechada. Aqui ela SEMPRE aparece completa (com rótulos): rail de
   ícones não faz sentido numa gaveta que já cobre o conteúdo. O JS espelha
   este breakpoint em GF_DESKTOP_MIN. */
@media (max-width: 860px) {
    :root, body.gf-nav-open { --gf-sb-off: 0px; }
    .gf-sidebar { transform: translateX(-100%); width: min(86vw, var(--gf-sb-w)); }
    /* No mobile quem manda é .gf-sidebar-open (gaveta), não .gf-nav-open. */
    .gf-sidebar.gf-sidebar-open { transform: translateX(0); }
    /* Desfaz o modo rail: na gaveta os rótulos voltam a aparecer. */
    body:not(.gf-nav-open) .gf-sidebar .gf-brand > div:not(.gf-brand-icon),
    body:not(.gf-nav-open) .gf-sidebar .gf-menu-item span,
    body:not(.gf-nav-open) .gf-sidebar .gf-tip,
    body:not(.gf-nav-open) .gf-sidebar .gf-user > div:not(.gf-avatar),
    body:not(.gf-nav-open) .gf-sidebar .gf-chev,
    body:not(.gf-nav-open) .gf-sidebar .gf-sidebar-close { display: block; }
    body:not(.gf-nav-open) .gf-sidebar .gf-brand,
    body:not(.gf-nav-open) .gf-sidebar .gf-user { justify-content: flex-start; gap: 10px; }
    body:not(.gf-nav-open) .gf-sidebar .gf-brand { padding: 20px 18px 18px; }
    body:not(.gf-nav-open) .gf-sidebar .gf-user { padding: 14px 16px; margin-top: 0; }
    body:not(.gf-nav-open) .gf-sidebar .gf-menu { padding: 6px 12px; }
    body:not(.gf-nav-open) .gf-sidebar .gf-menu-item { justify-content: flex-start; padding: 10px 12px; gap: 11px; }
    body:not(.gf-nav-open) .gf-sidebar .gf-tip { display: block; }
}
.gf-brand-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #1e40af); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.gf-brand-name { font-weight: 700; color: #fff; font-size: 15px; line-height: 1.2; }
.gf-brand-sub { font-size: 11.5px; color: #8a94ab; }
.gf-menu { padding: 6px 12px; flex: 0 0 auto; overflow-y: auto; }
.gf-menu-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: #b6c0d4; text-decoration: none; margin-bottom: 3px; font-size: 13.5px; transition: background .15s; }
.gf-menu-item:hover { background: var(--gf-sidebar-hover); color: #fff; }
.gf-menu-item.active { background: var(--gf-primary); color: #fff; font-weight: 600; }
.gf-tip { margin: auto 14px 14px; background: #101b33; border: 1px solid #1d2b4a; border-radius: 12px; padding: 14px; }
.gf-tip-title { display: flex; align-items: center; gap: 8px; color: #60a5fa; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.gf-tip-text { font-size: 12.5px; color: #93a0b8; line-height: 1.5; margin-bottom: 10px; }
.gf-tip-btn { display: inline-block; background: #1d2b4a; color: #93c5fd; font-size: 12px; padding: 6px 12px; border-radius: 8px; text-decoration: none; cursor: pointer; }
.gf-tip-btn:hover { background: #24365c; }
.gf-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid #16203a; text-decoration: none; }
.gf-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.gf-user-name { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.25; }
.gf-user-role { color: #8a94ab; font-size: 11.5px; }
.gf-user .gf-chev { margin-left: auto; color: #8a94ab; }

/* ── Main / header ───────────────────────────────────── */
.gf-main { margin-left: var(--gf-sb-off); flex: 1; padding: 22px 26px 90px; min-width: 0; transition: margin-left .25s ease; }
.gf-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.gf-header-title { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.gf-title { font-size: 24px; font-weight: 700; }
.gf-subtitle { color: var(--gf-muted); margin-top: 3px; font-size: 13.5px; }
.gf-header-actions { display: flex; align-items: center; gap: 16px; padding-top: 6px; }
.gf-header-link { display: flex; align-items: center; gap: 6px; color: var(--gf-text); text-decoration: none; font-size: 13.5px; cursor: pointer; }
.gf-header-link:hover { color: var(--gf-primary); }
.gf-icon-btn { background: none; border: none; cursor: pointer; color: var(--gf-text); display: flex; padding: 4px; }

/* ── Flash ───────────────────────────────────────────── */
.gf-flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 18px; font-weight: 500; }
.gf-flash.success { background: #e7f7ef; color: #15803d; border: 1px solid #bbe9cf; }
.gf-flash.error { background: #fff1f0; color: #b91c1c; border: 1px solid #ffd4d0; }

/* ── Wizard (Novo Projeto) ───────────────────────────── */
.gf-wizard { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: var(--gf-radius); padding: 20px 28px; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gf-step { display: flex; align-items: center; gap: 12px; }
.gf-step-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--gf-subtle); color: var(--gf-muted); flex-shrink: 0; transition: all .2s; }
.gf-step.active .gf-step-num { background: var(--gf-primary); color: #fff; }
.gf-step.done .gf-step-num { background: #16a34a; color: #fff; }
.gf-step-label { font-weight: 600; font-size: 13.5px; color: var(--gf-muted); white-space: nowrap; }
.gf-step.active .gf-step-label { color: var(--gf-primary); }
.gf-step.done .gf-step-label { color: #16a34a; }
.gf-step-desc { font-size: 12px; color: var(--gf-muted); white-space: nowrap; }
.gf-step-line { flex: 1; height: 1.5px; background: var(--gf-border); min-width: 24px; }

/* ── Toolbar / filtros ───────────────────────────────── */
.gf-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.gf-chip { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: 9px; padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--gf-text); transition: all .15s; font-family: inherit; }
.gf-chip:hover { border-color: var(--gf-border-hover); }
.gf-chip.active { border-color: var(--gf-primary); color: var(--gf-primary); background: var(--gf-primary-soft); font-weight: 600; }
.gf-search { margin-left: auto; position: relative; }
.gf-search input { border: 1px solid var(--gf-border); border-radius: 9px; padding: 9px 38px 9px 14px; font-size: 13px; width: 210px; background: var(--gf-card); color: var(--gf-text); outline: none; font-family: inherit; }
.gf-search input:focus { border-color: var(--gf-primary); }
.gf-search svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gf-muted); }
/* Ordenação (tela de Módulos). Fica ao lado da busca — como `.gf-search` tem
   margin-left:auto, tudo que vier depois dele já cai no grupo da direita. */
.gf-sort { display: inline-flex; align-items: center; gap: 8px; }
.gf-sort-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gf-muted); white-space: nowrap; }
.gf-sort select { border: 1px solid var(--gf-border); border-radius: 9px; padding: 9px 12px; font-size: 13px; background: var(--gf-card); color: var(--gf-text); outline: none; font-family: inherit; cursor: pointer; }
.gf-sort select:focus { border-color: var(--gf-primary); }
@media (max-width: 700px) {
    .gf-search { margin-left: 0; }
    .gf-sort { width: 100%; }
    .gf-sort select { flex: 1; }
}

/* ── Views por etapa ─────────────────────────────────── */
.gf-step-view { display: none; }
.gf-step-view.active { display: block; }

/* ── Grid de cards ───────────────────────────────────── */
.gf-content { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.gf-section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.gf-section-sub { color: var(--gf-muted); font-size: 12.5px; line-height: 1.5; margin: -8px 0 14px; }
.gf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gf-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gf-card { position: relative; background: var(--gf-card); border: 1.5px solid var(--gf-border); border-radius: var(--gf-radius); padding: 16px; transition: border-color .15s, box-shadow .15s; }
.gf-card.selectable { cursor: pointer; }
.gf-card.selectable:hover { border-color: #b9c6e2; box-shadow: 0 2px 8px rgba(30, 64, 175, .06); }
.gf-card.selected { border-color: var(--gf-primary); box-shadow: 0 0 0 1px var(--gf-primary) inset; }
.gf-card-check { position: absolute; top: 13px; right: 13px; width: 20px; height: 20px; border: 1.5px solid var(--gf-border-hover); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--gf-card); }
.gf-card.selected .gf-card-check { background: var(--gf-primary); border-color: var(--gf-primary); }
.gf-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 24px; }
.gf-card-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gf-card-name { font-weight: 700; font-size: 13.5px; }
.gf-card-desc { color: var(--gf-muted); font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; min-height: 36px; }
.gf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gf-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.gf-dep-tag { font-size: 10.5px; color: var(--gf-primary); background: var(--gf-primary-soft); padding: 2px 8px; border-radius: 999px; font-weight: 600; display: none; }
.gf-card.dep-locked .gf-dep-tag { display: inline-block; }
.ic-indigo { background: #eef0ff; color: #4f46e5; } .bg-indigo { background: #eef0ff; color: #4f46e5; }
.ic-blue   { background: #e8f1ff; color: #2563eb; } .bg-blue   { background: #e8f1ff; color: #2563eb; }
.ic-green  { background: #e7f7ef; color: #16a34a; } .bg-green  { background: #e7f7ef; color: #16a34a; }
.ic-orange { background: #fff1e4; color: #ea7317; } .bg-orange { background: #fff4e0; color: #d97706; }
.ic-purple { background: #f3edff; color: #7c3aed; } .bg-purple { background: #f3edff; color: #7c3aed; }
.ic-red    { background: #ffeceb; color: #dc2626; } .bg-yellow { background: #fdf6dd; color: #b45309; }
.gf-empty { text-align: center; color: var(--gf-muted); padding: 46px 0; }
.gf-empty-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--gf-subtle); color: var(--gf-muted); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }

/* Botão editar dentro do card de módulo */
.gf-card-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--gf-border); background: var(--gf-card); color: var(--gf-text); cursor: pointer; text-decoration: none; }
.gf-card-btn:hover { border-color: var(--gf-primary); color: var(--gf-primary); background: var(--gf-primary-soft); }
.gf-card-btn.gf-clear-btn { color: #dc2626; border-color: #f0cdcd; }
.gf-card-btn.gf-clear-btn:hover { background: #fdecec; border-color: #dc2626; color: #dc2626; }
.gf-prompt-flag { font-size: 10.5px; font-weight: 700; color: #7c3aed; background: #f3edff; padding: 2px 8px; border-radius: 999px; }
.gf-crud-flag { font-size: 10.5px; font-weight: 700; color: #059669; background: #ecfdf5; padding: 2px 8px; border-radius: 999px; }

/* ── Composição Etapa 1: catálogo (lateral) + Master (centro) + sub-prompts (lateral) ── */
.gf-build-layout { display: grid; grid-template-columns: 1.05fr 1.5fr 1fr; gap: 20px; align-items: start; }
/* Etapa 1 sem Prompt Master (agora é etapa própria): só catálogo + sub-prompts resolvidos. */
.gf-build-layout-modules { grid-template-columns: 1.6fr 1fr; }
.gf-modules-col { min-width: 0; }
.gf-modules-col .gf-toolbar { margin-bottom: 14px; gap: 6px; }
.gf-modules-col .gf-search { margin-left: 0; flex: 1 1 130px; }
.gf-modules-col .gf-search input { width: 100%; }
.gf-grid-compact, .gf-modules-col .gf-grid-compact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: calc(100vh - 250px); overflow-y: auto; padding-right: 6px; align-content: start; }
.gf-grid-compact .gf-card { padding: 9px 10px; }
.gf-grid-compact .gf-card-head { margin-bottom: 5px; padding-right: 18px; gap: 6px; }
.gf-grid-compact .gf-card-icon { width: 24px; height: 24px; border-radius: 7px; }
.gf-grid-compact .gf-card-icon svg { width: 13px; height: 13px; }
.gf-grid-compact .gf-card-name { font-size: 11.5px; line-height: 1.25; }
.gf-grid-compact .gf-card-desc { font-size: 10.5px; line-height: 1.35; min-height: 0; margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gf-grid-compact .gf-card-check { top: 8px; right: 8px; width: 15px; height: 15px; border-radius: 4px; }
.gf-grid-compact .gf-card-foot { gap: 4px; flex-wrap: wrap; }
.gf-grid-compact .gf-card-foot .gf-badge { font-size: 9.5px; padding: 2px 7px; }
.gf-grid-compact .gf-card-foot .gf-dep-tag { font-size: 9px; padding: 1px 6px; }

/* ── Composição Master + sub-prompts (Etapa 1) ───────── */
.gf-master-layout { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 20px; align-items: start; margin-top: 26px; }
.gf-master { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: var(--gf-radius); padding: 22px 24px; box-shadow: 0 6px 22px rgba(37,99,235,.07); border-top: 3px solid var(--gf-primary); }
.gf-master h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.gf-subprompt-col { display: flex; flex-direction: column; gap: 12px; min-height: 60px; padding-top: 6px; }
.gf-subprompt-empty { border: 1.5px dashed var(--gf-border); border-radius: 10px; padding: 18px 14px; text-align: center; color: var(--gf-muted); font-size: 12.5px; line-height: 1.5; }
.gf-subprompt-card { position: relative; background: var(--gf-card); border: 1.5px solid var(--gf-border); border-left: 3px solid var(--gf-primary); border-radius: 10px; padding: 12px 34px 12px 13px; transition: border-color .15s, box-shadow .15s; }
.gf-subprompt-card:hover { box-shadow: 0 4px 14px rgba(10,17,34,.08); }
.gf-subprompt-card.is-auto { border-left-color: #94a3b8; }
.gf-sp-head { display: flex; align-items: center; gap: 9px; }
.gf-sp-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gf-sp-icon svg { width: 17px; height: 17px; }
.gf-sp-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.gf-sp-tag { font-size: 10px; font-weight: 700; color: var(--gf-muted); }
.gf-sp-desc { font-size: 11.5px; color: var(--gf-muted); line-height: 1.45; margin-top: 7px; }
.gf-sp-remove { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: none; background: none; color: var(--gf-muted); font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px; }
.gf-sp-remove:hover { background: #fdecec; color: #dc2626; }

/* ── Resumo ──────────────────────────────────────────── */
.gf-summary { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: var(--gf-radius); padding: 20px; position: sticky; top: 22px; max-height: calc(100vh - 44px); overflow-y: auto; }
.gf-tech-combo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gf-tech-combo .gf-select { margin-bottom: 0; padding: 8px 10px; }
.gf-summary h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 16px; }
.gf-field-label { font-size: 12.5px; color: var(--gf-muted); margin-bottom: 6px; }
.gf-input, .gf-textarea, .gf-select { width: 100%; border: 1px solid var(--gf-border); border-radius: 9px; padding: 9px 12px; font-size: 13px; font-family: inherit; color: var(--gf-text); background: var(--gf-card); outline: none; margin-bottom: 14px; }
.gf-input:focus, .gf-textarea:focus, .gf-select:focus { border-color: var(--gf-primary); }
.gf-textarea { resize: vertical; min-height: 74px; line-height: 1.45; }
/* Campo de prompt "grande": dimensionado para comportar ~500 caracteres sem
   precisar redimensionar. Não há maxlength — o texto pode passar disso. */
.gf-textarea-lg { min-height: 150px; }
.gf-char-count { font-size: 11.5px; font-weight: 600; color: var(--gf-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-char-count.over { color: var(--gf-primary); }
.gf-summary-section { font-size: 13px; font-weight: 700; margin: 4px 0 10px; }
.gf-tech { display: flex; align-items: center; gap: 10px; border: 1px solid var(--gf-border); border-radius: 9px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.gf-tech-logo { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0; }
.gf-config-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; font-size: 13px; color: var(--gf-muted); border-bottom: 1px solid var(--gf-border); }
.gf-config-row:last-child { border-bottom: none; }
.gf-config-val { margin-left: auto; color: var(--gf-text); font-weight: 600; }

/* ── Wizard estilo Monday (janela + abas + widgets) ───── */
/* Largura máxima do wizard — compartilhada pela janela e pelo rodapé fixo,
   para os botões da barra inferior ficarem alinhados com a borda do card. */
.gf-mwin { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: 14px; overflow: hidden; margin: 0 auto 90px; max-width: var(--gf-wiz-max); box-shadow: 0 12px 40px rgba(10,17,34,.18); }
.gf-mwin-bar { display: flex; align-items: flex-end; gap: 14px; padding: 14px 20px 14px; border-bottom: 1px solid var(--gf-border); }
/* O nome do projeto é um CAMPO, não um cabeçalho — por isso rótulo visível,
   borda sempre aparente e marca de obrigatório. Antes era um input "invisível"
   (borda transparente) e os usuários não percebiam que precisavam digitar ali. */
.gf-mwin-field { flex: 1; min-width: 0; }
.gf-mwin-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gf-muted); margin: 0 0 4px 2px; }
.gf-mwin-label .gf-req { color: #e11d48; margin-left: 3px; }
.gf-mwin-title { width: 100%; background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: 9px; color: var(--gf-text); font-size: 21px; font-weight: 800; padding: 9px 13px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
.gf-mwin-title::placeholder { font-weight: 500; color: var(--gf-muted); opacity: .8; }
.gf-mwin-title:hover { border-color: var(--gf-border-hover); }
.gf-mwin-title:focus { border-color: var(--gf-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }
/* Aplicada quando o usuário tenta avançar sem nome (removida ao digitar). */
.gf-mwin-title.missing { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, .13); }
.gf-mwin-bar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.gf-mwin-count { font-size: 12.5px; color: var(--gf-muted); font-weight: 600; white-space: nowrap; }
.gf-mwin-close { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: var(--gf-muted); text-decoration: none; }
.gf-mwin-close:hover { background: var(--gf-subtle); color: var(--gf-text); }

.gf-mtabs { display: flex; align-items: stretch; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--gf-border); overflow-x: auto; }
.gf-mtab { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--gf-muted); font-family: inherit; font-size: 13px; font-weight: 600; padding: 13px 14px; cursor: pointer; white-space: nowrap; }
.gf-mtab:hover { color: var(--gf-text); }
.gf-mtab.active { color: var(--gf-text); border-bottom-color: var(--gf-primary); }
.gf-mtab.done { color: var(--gf-text); }
.gf-mtab-num { width: 22px; height: 22px; border-radius: 50%; background: var(--gf-subtle); color: var(--gf-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.gf-mtab-num svg { width: 12px; height: 12px; }
.gf-mtab.active .gf-mtab-num { background: var(--gf-primary); color: #fff; }
.gf-mtab.done .gf-mtab-num { background: #16a34a; color: #fff; }

.gf-mwin-body { padding: 22px; background: var(--gf-bg); min-height: 380px; }

.gf-mgrid { display: grid; gap: 18px; align-items: start; }
.gf-mgrid-1 { grid-template-columns: minmax(0, 780px); justify-content: center; }
.gf-mgrid-2 { grid-template-columns: 1fr 1.2fr; }
/* Etapa Tecnologias: coluna da stack maior que a do resumo. */
.gf-mgrid-2a { grid-template-columns: 1.5fr 1fr; }

/* Pilha vertical de widgets (Configurações / Revisão). */
.gf-stack { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; margin: 0 auto; }

/* Barra de contexto (Etapas 3-5): mantém nome, contagem e Meta Prompt
   sempre à mão depois que o usuário sai da Etapa 1. */
.gf-ctxbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--gf-card); border: 1px solid var(--gf-border); border-left: 3px solid var(--gf-primary); border-radius: 10px; padding: 11px 16px; margin: 0 auto 18px; max-width: 1100px; }
.gf-ctxbar[hidden] { display: none; }
.gf-ctxbar-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.gf-ctxbar-kicker { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gf-muted); }
.gf-ctxbar-name { font-size: 14px; font-weight: 700; color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-ctxbar-name.empty { color: var(--gf-muted); font-weight: 500; font-style: italic; }
.gf-ctxbar-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gf-ctxbar-chip { font-size: 11.5px; font-weight: 600; color: var(--gf-muted); background: var(--gf-subtle); border: 1px solid var(--gf-border); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.gf-ctxbar-chip.on { color: var(--gf-primary); border-color: rgba(37,99,235,.35); background: var(--gf-primary-soft); }
.gf-ctxbar-actions { display: flex; gap: 6px; margin-left: auto; }

.gf-widget { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; }
.gf-widget-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--gf-border); }
.gf-widget-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.gf-widget-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gf-widget-body { padding: 18px; }

.gf-addmod-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gf-primary); color: #fff; border: none; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer; }
.gf-addmod-btn:hover { filter: brightness(1.08); }

.gf-master-summary-line { margin-bottom: 15px; }
.gf-master-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gf-muted); font-weight: 700; margin-bottom: 5px; }
.gf-master-summary-val { font-size: 13.5px; color: var(--gf-text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.gf-master-summary-val.empty { color: var(--gf-muted); font-style: italic; }

.gf-modal.xwide { width: 960px; }

@media (max-width: 860px) {
    .gf-mgrid-2, .gf-mgrid-2a { grid-template-columns: 1fr; }
    .gf-mwin-title { font-size: 18px; }
    .gf-ctxbar-actions { margin-left: 0; }
}

/* ── Painel genérico ─────────────────────────────────── */
.gf-panel { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: var(--gf-radius); padding: 26px 28px; max-width: 940px; }
.gf-panel.wide { max-width: none; }
.gf-panel h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.gf-panel .gf-panel-sub { color: var(--gf-muted); font-size: 13.5px; margin-bottom: 22px; }
.gf-field-hint { font-size: 12px; color: var(--gf-muted); margin-top: -10px; margin-bottom: 14px; line-height: 1.5; }

/* ── Banner de introdução (Etapa 1, explica o wizard inteiro) ── */
.gf-intro-banner { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, var(--gf-primary-soft), var(--gf-card)); border: 1px solid var(--gf-border); border-left: 3px solid var(--gf-primary); border-radius: var(--gf-radius); padding: 18px 20px; margin-bottom: 20px; position: relative; }
.gf-intro-banner.closed { display: none; }
.gf-intro-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.gf-intro-body h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; color: var(--gf-text); }
.gf-intro-body p { font-size: 13px; color: var(--gf-muted); line-height: 1.6; margin: 0 0 14px; max-width: 780px; }
.gf-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gf-intro-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 20px; line-height: 1; color: var(--gf-muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.gf-intro-close:hover { background: var(--gf-subtle); color: var(--gf-text); }
@media (max-width: 640px) { .gf-intro-banner { flex-direction: column; } }
.gf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.gf-check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--gf-border); border-radius: 9px; cursor: pointer; }
.gf-check-row input { width: 17px; height: 17px; accent-color: var(--gf-primary); cursor: pointer; }
.gf-check-label { font-size: 13px; font-weight: 600; }
.gf-check-desc { font-size: 12px; color: var(--gf-muted); }

/* ── Revisão ─────────────────────────────────────────── */
.gf-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gf-review-box { border: 1px solid var(--gf-border); border-radius: 10px; padding: 16px 18px; }
.gf-review-box h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.gf-review-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--gf-border); }
.gf-review-line:last-child { border-bottom: none; }
.gf-review-line span:first-child { color: var(--gf-muted); }
.gf-review-line span:last-child { font-weight: 600; text-align: right; }
.gf-mod-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--gf-subtle); margin: 0 6px 6px 0; }
.gf-mod-pill.auto { background: var(--gf-primary-soft); color: var(--gf-primary); }
.gf-review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.gf-stat { border: 1px solid var(--gf-border); border-radius: 10px; padding: 16px; text-align: center; }
.gf-stat-num { font-size: 26px; font-weight: 800; color: var(--gf-primary); }
.gf-stat-label { font-size: 12px; color: var(--gf-muted); margin-top: 2px; }
.gf-tech-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--gf-subtle); color: var(--gf-text); margin: 0 6px 6px 0; }
.gf-tech-chip strong { font-weight: 700; color: var(--gf-muted); }
.gf-prompt-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.gf-prompt-preview { width: 100%; max-height: 340px; overflow-y: auto; border: 1px solid var(--gf-border); border-radius: 10px; padding: 14px 16px; font-family: 'Consolas', 'Courier New', monospace; font-size: 12.5px; line-height: 1.6; background: var(--gf-subtle); white-space: pre-wrap; word-break: break-word; color: var(--gf-text); }
.gf-mod-prompt-item { border: 1px solid var(--gf-border); border-radius: 9px; margin-bottom: 8px; overflow: hidden; }
.gf-mod-prompt-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--gf-subtle); }
.gf-mod-prompt-body { display: none; padding: 12px 14px; }
.gf-mod-prompt-body.open { display: block; }

/* ── Monetização (Revisão) ────────────────────────────── */
.gf-price-table-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gf-muted); margin-bottom: 6px; }
.gf-price-table { display: flex; flex-direction: column; gap: 6px; }
.gf-price-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--gf-border); border-radius: 8px; }
.gf-price-name { flex: 1; font-size: 13px; font-weight: 600; }
.gf-price-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gf-muted); cursor: pointer; white-space: nowrap; }
.gf-price-check input { width: 15px; height: 15px; accent-color: var(--gf-primary); cursor: pointer; }
.gf-price-value { width: 100px; text-align: right; }
.gf-price-value:disabled { background: var(--gf-subtle); color: var(--gf-muted); cursor: not-allowed; }
.gf-price-empty { border: 1.5px dashed var(--gf-border); border-radius: 8px; padding: 12px 14px; text-align: center; color: var(--gf-muted); font-size: 12.5px; }

/* ── Seleção de agentes/skills (Etapa 2) ─────────────── */
.gf-agents-pick { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--gf-border); }
.gf-agents-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.gf-agents-pick-head h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin: 0; }
.gf-agents-pick-actions { display: flex; gap: 8px; }
.gf-agents-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gf-mod-prompt-body pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; font-family: 'Consolas', 'Courier New', monospace; background: var(--gf-subtle); border: 1px solid var(--gf-border); border-radius: 8px; padding: 10px 12px; max-height: 220px; overflow-y: auto; margin: 0; color: var(--gf-text); }

/* ── Score do projeto ────────────────────────────────── */
.gf-score-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gf-score-badge { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-shrink: 0; font-weight: 800; border: 3px solid; }
.gf-score-badge .gf-score-num { font-size: 20px; line-height: 1; }
.gf-score-badge .gf-score-max { font-size: 9px; font-weight: 600; opacity: .7; }
.gf-score-body { flex: 1; min-width: 200px; }
.gf-score-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gf-score-label { font-weight: 700; font-size: 14px; }
.gf-score-bar-track { height: 8px; border-radius: 999px; background: var(--gf-subtle); overflow: hidden; }
.gf-score-bar-fill { height: 100%; border-radius: 999px; transition: width .4s; }
.gf-score-info-btn { background: none; border: 1px solid var(--gf-border); border-radius: 999px; color: var(--gf-muted); font-size: 11px; font-weight: 700; cursor: pointer; width: 20px; height: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gf-score-info-btn:hover { border-color: var(--gf-primary); color: var(--gf-primary); background: var(--gf-primary-soft); }
.gf-score-popup-wrap { position: relative; display: inline-block; }
.gf-score-popup { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,30,60,.18); padding: 16px 18px; width: 320px; max-width: 82vw; }
.gf-score-popup.open { display: block; }
.gf-score-popup h5 { font-size: 12.5px; font-weight: 700; margin-bottom: 10px; color: var(--gf-text); }
.gf-score-crit { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--gf-border); }
.gf-score-crit:last-child { border-bottom: none; }
.gf-score-crit-label { color: var(--gf-text); font-weight: 600; }
.gf-score-crit-note { color: var(--gf-muted); font-size: 11.5px; margin-top: 1px; }
.gf-score-crit-pts { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.gf-score-fix-link { background: none; border: none; padding: 0; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--gf-primary); cursor: pointer; display: inline-block; }
.gf-score-fix-link:hover { text-decoration: underline; }

/* ── "Ver tudo" — visão consolidada de todos os prompts (estilo print) ─ */
.gf-modal.wide { width: 820px; }
.gf-viewall-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gf-muted); margin: 22px 0 12px; }
.gf-viewall-section-title:first-child { margin-top: 0; }
.gf-viewall-block { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gf-border); }
.gf-viewall-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.gf-viewall-block h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 4px; }
.gf-viewall-sub { font-size: 12px; color: var(--gf-muted); margin-bottom: 10px; }
.gf-viewall-field { margin-bottom: 10px; }
.gf-viewall-field-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gf-primary); margin-bottom: 3px; }
.gf-viewall-field-value { font-size: 12.5px; color: var(--gf-text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* ── Modal (Configurar Meta Prompt) ──────────────────── */
.gf-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,17,34,.55); z-index: 100; align-items: center; justify-content: center; padding: 24px; }
.gf-modal-overlay.open { display: flex; }
.gf-modal { background: var(--gf-card); border-radius: 14px; width: 640px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(10,17,34,.35); }
.gf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--gf-border); }
.gf-modal-header h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.gf-modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--gf-muted); cursor: pointer; padding: 0 4px; }
.gf-modal-close:hover { color: var(--gf-text); }
.gf-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.gf-modal-sub { font-size: 12.5px; color: var(--gf-muted); margin-bottom: 16px; line-height: 1.5; }
.gf-modal-field-label { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.gf-modal-field-help { font-size: 11px; color: var(--gf-muted); margin-bottom: 6px; }
.gf-modal-field textarea { width: 100%; min-height: 96px; border: 1px solid var(--gf-border); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; font-family: inherit; color: var(--gf-text); background: var(--gf-card); outline: none; resize: vertical; margin-bottom: 14px; line-height: 1.5; }
.gf-modal-field textarea:focus { border-color: var(--gf-primary); }
.gf-modal-footer { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--gf-border); }

/* ── Geração ─────────────────────────────────────────── */
.gf-gen-steps { margin: 8px 0 4px; }
.gf-gen-step { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; margin-bottom: 8px; background: var(--gf-subtle); opacity: .5; transition: opacity .25s; }
.gf-gen-step.shown { opacity: 1; }
.gf-gen-ico { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--gf-subtle); color: var(--gf-muted); }
.gf-gen-step.done .gf-gen-ico { background: #16a34a; color: #fff; }
.gf-gen-step.running .gf-gen-ico { background: var(--gf-primary); color: #fff; }
.gf-gen-body { flex: 1; }
.gf-gen-label { font-size: 13px; font-weight: 600; }
.gf-gen-detail { font-size: 12px; color: var(--gf-muted); }
.gf-gen-count { font-size: 12px; font-weight: 700; color: var(--gf-primary); }
.gf-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gf-spin .7s linear infinite; }
@keyframes gf-spin { to { transform: rotate(360deg); } }
.gf-gen-done { text-align: center; padding: 10px 0 4px; }
.gf-gen-done-ico { width: 64px; height: 64px; border-radius: 50%; background: #e7f7ef; color: #16a34a; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.gf-gen-error { background: #fff1f0; border: 1px solid #ffd4d0; color: #b91c1c; padding: 14px 16px; border-radius: 10px; font-size: 13px; display: flex; align-items: center; gap: 10px; }

/* ── Editor de prompt (Módulo) ───────────────────────── */
.gf-backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--gf-muted); text-decoration: none; font-size: 13px; margin-bottom: 16px; }
.gf-backlink:hover { color: var(--gf-primary); }
.gf-edit-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.gf-prompt-editor { width: 100%; min-height: 420px; border: 1px solid var(--gf-border); border-radius: 10px; padding: 16px; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; line-height: 1.6; color: var(--gf-text); background: var(--gf-subtle); outline: none; resize: vertical; }
.gf-prompt-editor:focus { border-color: var(--gf-primary); }
.gf-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gf-field-label-row span { display: flex; align-items: center; gap: 6px; }
.gf-field-import-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--gf-primary); cursor: pointer; white-space: nowrap; }
.gf-field-import-btn:hover { text-decoration: underline; }
.gf-side-box { background: var(--gf-card); border: 1px solid var(--gf-border); border-radius: var(--gf-radius); padding: 18px; margin-bottom: 16px; }
.gf-side-box h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.gf-side-list { list-style: none; }
.gf-side-list li { font-size: 12.5px; padding: 5px 0; color: var(--gf-muted); border-bottom: 1px solid var(--gf-border); display: flex; align-items: center; gap: 7px; }
.gf-side-list li:last-child { border-bottom: none; }
.gf-code { font-family: 'Consolas', monospace; font-size: 12px; background: var(--gf-subtle); padding: 1px 6px; border-radius: 5px; }

/* ── Tabela ──────────────────────────────────────────── */
.gf-table-wrap { overflow-x: auto; border: 1px solid var(--gf-border); border-radius: 10px; }
.gf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gf-table th { text-align: left; padding: 12px 16px; background: var(--gf-subtle); color: var(--gf-muted); font-weight: 600; border-bottom: 1px solid var(--gf-border); white-space: nowrap; }
.gf-table td { padding: 12px 16px; border-bottom: 1px solid var(--gf-border); }
.gf-table tr:last-child td { border-bottom: none; }
.gf-table tr:hover td { background: var(--gf-subtle); }

/* ── Prosa (Documentação) ────────────────────────────── */
.gf-prose { max-width: 820px; line-height: 1.7; }
.gf-prose h3 { font-size: 16px; font-weight: 700; margin: 24px 0 10px; }
.gf-prose h3:first-child { margin-top: 0; }
.gf-prose p { margin-bottom: 12px; color: var(--gf-muted); }
.gf-prose ul { margin: 0 0 14px 20px; color: var(--gf-muted); }
.gf-prose li { margin-bottom: 5px; }

/* ── Footer bar ──────────────────────────────────────── */
/* Barra sempre full-bleed; o conteúdo interno é limitado à mesma largura da
   janela, para Cancelar/Próximo alinharem com as bordas do card. */
/* `left` acompanha a sidebar para o rodapé fixo do wizard não passar por baixo dela. */
.gf-footer { position: fixed; bottom: 0; left: var(--gf-sb-off); right: 0; background: var(--gf-card); border-top: 1px solid var(--gf-border); padding: 14px 26px; z-index: 9; transition: left .25s ease; }
.gf-footer-inner { display: flex; align-items: center; gap: 12px; max-width: var(--gf-wiz-max); margin: 0 auto; }
.gf-count { color: var(--gf-primary); font-weight: 600; font-size: 13.5px; margin: 0 auto; }
.gf-btn { border-radius: 10px; padding: 11px 20px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--gf-border); background: var(--gf-card); color: var(--gf-text); font-family: inherit; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.gf-btn:hover { border-color: var(--gf-border-hover); }
.gf-btn:disabled { opacity: .5; cursor: not-allowed; }
.gf-btn-primary { background: var(--gf-primary); border-color: var(--gf-primary); color: #fff; }
.gf-btn-primary:hover { background: #1d4fd8; border-color: #1d4fd8; }
.gf-btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.gf-btn-success:hover { background: #15803d; }
.gf-btn-ghost { background: transparent; }
.gf-ml-auto { margin-left: auto; }

/* ── Toast ───────────────────────────────────────────── */
.gf-toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(16px); background: #101b33; color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 90vw; }
.gf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1280px) { .gf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .gf-content, .gf-edit-grid { grid-template-columns: 1fr; } .gf-summary { position: static; }
    .gf-master-layout { grid-template-columns: 1fr; } .gf-master { order: -1; }
    .gf-subprompt-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .gf-build-layout { grid-template-columns: 1fr; } .gf-master { order: -1; }
    .gf-grid-compact { max-height: none; overflow: visible; padding-right: 0; } }
@media (max-width: 900px)  { .gf-grid, .gf-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .gf-step-desc { display: none; } .gf-form-grid, .gf-review-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .gf-grid, .gf-grid.cols-3 { grid-template-columns: 1fr; } .gf-review-stats { grid-template-columns: 1fr; } }

/* ===========================================================================
 * Overrides do modo embutido
 * =========================================================================== */

/* O bloco inteiro do wizard na home. SEM `isolation`/`transform`: um contexto de
   empilhamento aqui aprisionaria os modais (que são `position: fixed`) dentro do
   bloco e os deixaria por baixo da navbar sticky (z-index 100). Em vez disso, os
   z-index de modal/toast são elevados acima de 100 nos overrides abaixo. */
.gf-embed { display: block; box-sizing: border-box; border-radius: 16px; padding: 22px 20px 8px; border: 1px solid var(--gf-border); }

/* Modais e toast do wizard precisam passar por cima da navbar (.navbar, z-index
   100 em app.css). No layout `factory` original não havia navbar sticky, então
   z-index 100 bastava. */
/* Todos os overlays do wizard (config de meta prompt, picker de módulos, ver
   tudo, protótipo) usam a mesma classe .gf-modal-overlay. */
.gf-embed .gf-modal-overlay { z-index: 1000; }
.gf-embed .gf-toast { z-index: 1001; }

/* No factory o rodapé de navegação é fixo na janela (`position: fixed`, deslocado
   pela sidebar). Embutido, ele precisa ser só a última faixa do bloco — senão
   ficaria sobreposto às seções seguintes da home o tempo todo. Fica `sticky` para
   continuar visível enquanto o usuário rola uma etapa longa, mas preso ao bloco. */
.gf-embed .gf-footer { position: sticky; bottom: 12px; left: auto; right: auto; border: 1px solid var(--gf-border); border-radius: 12px; margin-top: 16px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(10, 17, 34, .18); }

/* `margin-bottom: 90px` no factory era a folga para o rodapé fixo — sem ele aqui. */
.gf-embed .gf-mwin { margin-bottom: 0; box-shadow: none; }

/* Alturas presas à viewport (`100vh`) assumem que o wizard ocupa a tela inteira.
   Dentro da home ele é uma seção entre outras, então viram alturas fixas. */
.gf-embed .gf-grid-compact, .gf-embed .gf-modules-col .gf-grid-compact { max-height: 420px; }
.gf-embed .gf-summary { position: static; max-height: none; }

/* ── Gate de login (etapa 6) ──────────────────────────────────────────────── */
.gf-lock { text-align: center; padding: 26px 18px; }
.gf-lock-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--gf-primary-soft); color: var(--gf-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.gf-lock h2 { font-size: 21px; margin-bottom: 6px; }
.gf-lock-sub { color: var(--gf-muted); font-size: 13.5px; line-height: 1.55; max-width: 460px; margin: 0 auto; }
.gf-lock-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.gf-lock-note { font-size: 12px; color: var(--gf-muted); margin-top: 14px; }

/* Faixa de chamada acima do wizard, na home. */
.gf-embed-intro { text-align: center; margin-bottom: 22px; }
.gf-embed-intro h2 { font-size: 32px; font-weight: 800; color: var(--gf-text); margin-bottom: 8px; line-height: 1.15; }
/* O <em> destaca a promessa central ("prompt completo") sem virar itálico. */
.gf-embed-intro h2 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--gf-primary), var(--gf-accent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.gf-embed-intro p { color: var(--gf-muted); font-size: 15px; max-width: 660px; margin: 0 auto; line-height: 1.55; }
.gf-embed-intro p strong { color: var(--gf-text); font-weight: 700; }

/* Selo de objeção-zero ("grátis, sem cartão") — a primeira coisa que o
   visitante lê, antes mesmo do título. */
.gf-embed-badge {
    display: inline-block; margin-bottom: 12px;
    padding: 5px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    color: var(--gf-primary);
    background: var(--gf-primary-soft);
    border: 1px solid var(--gf-primary-brd);
}

/* Os 3 passos: promessa de esforço baixo, lida antes de o visitante clicar. */
.gf-embed-steps {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin: 16px 0 0; padding: 0;
}
.gf-embed-steps li {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 15px 8px 8px; border-radius: 999px;
    background: var(--gf-card); border: 1px solid var(--gf-border);
    font-size: 13.5px; font-weight: 600; color: var(--gf-text);
}
.gf-embed-steps li span {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
    background: linear-gradient(135deg, var(--gf-primary), var(--gf-accent));
    color: #fff; font-size: 12px; font-weight: 800;
}
.gf-embed-proof { margin-top: 14px !important; font-size: 12.5px !important; opacity: .85; }

@media (max-width: 700px) {
    .gf-embed { padding: 16px 12px 8px; }
    .gf-embed-intro h2 { font-size: 23px; }
    .gf-embed-steps li { font-size: 12.5px; padding: 6px 12px 6px 6px; }
}