/* ── Design System do Builder (v2.6.0) ─────────────────────────
     Tokens semânticos --lpb-ui-* EXCLUSIVOS da interface do Builder.
     Este <style> nunca entra no HTML exportado (a exportação monta o
     próprio documento em buildLandingDoc) — zero impacto na LP. */
  :root {
    /* backgrounds (5 níveis de surface) */
    --lpb-ui-bg-app: #eef1f5;
    --lpb-ui-bg-panel: #ffffff;
    --lpb-ui-bg-section: #f5f6f8;
    --lpb-ui-bg-group: #ffffff;
    --lpb-ui-bg-field: #f9fafb;
    --lpb-ui-bg-hover: #f1f4f8;
    --lpb-ui-bg-selected: #e8efff;
    --lpb-ui-bg-disabled: #f3f4f6;
    /* borders — v2.20.0: mais claras e dessaturadas. Borda escura "desenha"
       a caixa e achata a tela; a separação passa a vir da elevação. */
    --lpb-ui-border-subtle: #f0f2f5;
    --lpb-ui-border-default: #e5e8ee;
    --lpb-ui-border-strong: #cfd5de;
    --lpb-ui-border-focus: #2563eb;
    /* texto */
    --lpb-ui-text-primary: #111827;
    --lpb-ui-text-secondary: #4b5563;
    --lpb-ui-text-muted: #616e80;      /* ≥4.7:1 em todas as surfaces do builder */
    --lpb-ui-text-disabled: #8b93a2;   /* 3.1:1 — disabled e interativos discretos */
    /* accent único + semânticas */
    --lpb-ui-accent: #2563eb;
    --lpb-ui-accent-soft: #e8efff;
    --lpb-ui-danger: #b91c1c;
    --lpb-ui-danger-soft: #fef2f2;
    --lpb-ui-warning: #92400e;
    --lpb-ui-warning-soft: #fffbeb;
    --lpb-ui-success: #15803d;
    --lpb-ui-success-soft: #f0fdf4;
    /* elevação — v2.20.0: escala de 4 níveis. Sombras em duas camadas
       (contato curto + difusa longa), como superfícies reais. */
    --lpb-ui-shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
    --lpb-ui-shadow-sm: 0 1px 3px rgba(16,24,40,0.07), 0 1px 2px rgba(16,24,40,0.04);
    --lpb-ui-shadow-md: 0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.04);
    --lpb-ui-shadow-float: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
    --lpb-ui-shadow-modal: 0 24px 48px -12px rgba(16,24,40,0.18);

    /* tipografia — v2.20.0: escala fechada. Antes existiam 18 tamanhos,
       incluindo meias-medidas (10.5/11.5/12.5/13.5/14.5) que são ajuste
       ad-hoc, não decisão de design. */
    --lpb-ui-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lpb-ui-text-xs: 11px;
    --lpb-ui-text-sm: 12px;
    --lpb-ui-text-base: 13px;
    --lpb-ui-text-md: 14px;
    --lpb-ui-text-lg: 16px;
    --lpb-ui-text-xl: 20px;

    /* raio — v2.20.0: 6/7/8/9/10/14 viraram 3 degraus perceptíveis */
    --lpb-ui-radius-sm: 6px;
    --lpb-ui-radius-md: 8px;
    --lpb-ui-radius-lg: 12px;
    --lpb-ui-radius-pill: 999px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    /* v2.20.0: Inter (já carregada para as LPs) no lugar da fonte de
       sistema. Segoe UI no Windows tem cor e espacejamento irregulares em
       tamanhos pequenos — é o que mais faz uma UI densa parecer amadora. */
    font-family: var(--lpb-ui-font-sans);
    background: var(--lpb-ui-bg-app);
    color: var(--lpb-ui-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "cv08" 1;  /* l e 1 distinguíveis */
  }
  /* A UI do Builder é toda estilo inline (regra do AGENTS.md), então o
     refino tipográfico e a elevação entram por seletor de elemento dentro
     de #root — sem classes, sem tocar em React, e reversível apagando
     este bloco. Estilo inline sempre vence, então nada aqui sobrescreve
     uma decisão explícita de componente. */
  #root, #root button, #root input, #root select, #root textarea {
    font-family: var(--lpb-ui-font-sans);
  }
  #root button, #root input, #root select, #root textarea {
    letter-spacing: -0.006em;
  }
  /* A Inter é ~3% mais larga que a Segoe UI em texto pequeno, e os botões
     da barra têm largura definida pelo conteúdo: sem isto, rótulos como
     "Configurar IA" e "Meus projetos" quebram em duas linhas. */
  #root button { white-space: nowrap; }
  /* v2.21.1 — a regra acima protege rótulos de UMA linha, mas alcançava
     também os cards da tela inicial, que são <button> com <div> de título
     e descrição dentro. Em telas estreitas a descrição não quebrava e sua
     largura natural (450px) vazava até o <html>, dando rolagem lateral.
     Medido: 320/375/390/414/430 estouravam; com esta regra, scrollWidth
     volta a igualar clientWidth. Corrige-se o produtor da largura, não se
     mascara com overflow-x no body — que deixaria scrollWidth em 450 e
     ainda cortaria o texto. Os botões de rótulo simples (sem <div>) não
     casam com o seletor e seguem em nowrap. */
  #root button:has(div) { white-space: normal; }
  /* v2.20.1 — botão com ícone SVG: alinha glifo e texto pela linha base
     óptica. Só afeta botões que REALMENTE têm <svg> dentro, então botões
     de texto puro seguem exatamente como estavam. */
  #root button:has(> svg) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  /* Onde o emoji era o único filho de um contêiner, o alinhamento vinha
     do fluxo de texto (fontSize/line-height). Um <svg display:block> não
     participa desse fluxo, então o contêiner precisa centralizar sozinho.
     Alcança só quem tem o SVG como filho ÚNICO — contêiner com ícone
     + texto continua governado pelo próprio layout. */
  #root span:has(> svg:only-child),
  #root div:has(> svg:only-child) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Números tabulares nos campos: dígitos com a mesma largura não
     "dançam" enquanto o usuário arrasta um slider ou digita. */
  #root input[type="number"] { font-variant-numeric: tabular-nums; }

  /* Elevação (v2.20.0) — o achado central: 74 elementos tinham
     `1px solid` e NENHUMA sombra. Borda sozinha achata; uma sombra de
     contato de 1px já cria o plano. Só onde não há sombra inline. */
  #root button:not([style*="boxShadow"]):not([style*="box-shadow"]) {
    box-shadow: var(--lpb-ui-shadow-xs);
  }
  #root button { transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
  #root button:hover:not(:disabled) { box-shadow: var(--lpb-ui-shadow-sm); }
  #root button:active:not(:disabled) { box-shadow: none; }
  #root button:disabled { box-shadow: none; }

  /* Campos: foco com halo, em vez de só trocar a cor da borda. */
  #root input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  #root select, #root textarea {
    transition: box-shadow .15s ease, border-color .15s ease;
  }
  #root input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
  #root select:focus, #root textarea:focus {
    outline: none;
    border-color: var(--lpb-ui-border-focus);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  }
  #root input[type="checkbox"], #root input[type="radio"] { accent-color: var(--lpb-ui-accent); }
  a { text-decoration: none; }
  /* Scrollbar discreta: aparece no hover do painel, some em repouso. */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: #d5dae1;
    border-radius: var(--lpb-ui-radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: #b6bec9; background-clip: content-box; }
  /* Focus ring universal do Builder (v2.6.0): visível por teclado em todo
     elemento focável, sem mudar layout. O hover editorial do canvas v2.5.0
     usa outline INLINE (vence esta regra) — sem conflito. */
  #root :focus-visible {
    outline: 2px solid var(--lpb-ui-border-focus);
    outline-offset: 1px;
  }
  /* Sliders do Builder unificados no accent (inline accentColor legado
     foi removido; esta regra cobre todos). */
  #root input[type="range"] { accent-color: var(--lpb-ui-accent); }