/* Visual da Loja Demo (SaaS falso do ambiente de teste). Não faz parte do SDK. */
:root {
  --laranja: #ec681b;
  --texto: #1f1a17;
  --suave: #6b625c;
  --borda: #ece6e1;
  --fundo: #f7f4f1;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fundo); }

.demo-bar {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 8px 16px; background: #fff7d6; border-bottom: 1px solid #f1df9a; font-size: 13px;
}
.demo-bar__tag { background: #1f1a17; color: #fff; border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.demo-bar button { font: inherit; border: 1px solid #d9c98a; background: #fff; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.demo-bar button[aria-pressed="true"] { background: var(--laranja); color: #fff; border-color: var(--laranja); }
.demo-bar a { color: var(--texto); margin-left: auto; }

.layout { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 41px); }
.sidebar { background: #1f1a17; color: #f5efe9; padding: 22px 14px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; margin-bottom: 28px; }
.marca span { width: 32px; height: 32px; border-radius: 8px; background: var(--laranja); display: grid; place-items: center; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar a { color: #d9cfc6; text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.sidebar a:hover, .sidebar a.ativo { background: #2f2824; color: #fff; }

main { padding: 30px 38px; }
main h1 { margin: 0 0 4px; font-size: 26px; }
.sub { margin: 0 0 24px; color: var(--suave); }

.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 20px; max-width: 760px; }
.grade .cartao { max-width: none; }
.rotulo { color: var(--suave); font-size: 13px; }
.valor { font-size: 24px; font-weight: 700; margin-top: 6px; }

.checklist { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 10px; color: var(--suave); }
.checklist li::before { content: "○  "; }

.campo { display: grid; gap: 6px; max-width: 440px; margin-bottom: 16px; font-weight: 600; font-size: 14px; }
.campo input, .linha input { font: inherit; font-weight: 400; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; }
.linha { display: grid; grid-template-columns: 110px 110px 110px; gap: 10px; align-items: center; margin-bottom: 8px; }

.acoes { display: flex; gap: 10px; margin-top: 8px; }
.acoes.topo { margin: 0 0 16px; }
.botao { font: inherit; font-weight: 600; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--laranja); color: #fff; cursor: pointer; }
.botao.secundario { background: #fff; color: var(--texto); border: 1px solid var(--borda); }
.vazio { text-align: center; padding: 48px 20px; color: var(--suave); }

/* Modo "Mostrar alvos" */
.target-outline { outline: 2px dashed var(--laranja) !important; outline-offset: 3px; }
.target-badge {
  position: fixed; z-index: 2147483000; transform: translateY(-100%);
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; background: var(--laranja);
  border: 0; border-radius: 6px; padding: 2px 6px; cursor: copy; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}