/* fix-attr — ajustes de 26/09. Carregado depois do styles.css, então vence por ordem. */

/* ==========================================================================
   1. ATRIBUIÇÃO — o rodapé da tabela de campanhas e a aba Atribuição
   Camada de vidro/luz (26/09, nível Zouti): o painel é vidro com anel, molde
   e véu sobre uma luz de marca; a venda pendente em foco é o ÚNICO glow.
   Layout (grids, áreas, paddings) é o do trabalho anterior, intacto.
   ========================================================================== */

/* tokens locais do fragmento (derivados dos do fix-base) */
#atribuicao {
    --attr-line:   rgba(255, 255, 255, .06);            /* divisória interna */
    --attr-well:   rgba(0, 0, 0, .26);                  /* campo rebaixado */
    --attr-well-in: 0 0 #0000;
    --attr-pill-ring: 0 0 0 1px rgba(255, 255, 255, .08);
}

/* ---------- a luz atrás do painel: o vidro só existe se houver o que desfocar ---------- */
#atribuicao .feat { position: relative; isolation: isolate; }
#atribuicao .feat::before,
#atribuicao .feat::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
}
/* brilho de marca: nasce e morre em transparente, sem aresta
   (cada elipse termina DENTRO da caixa do pseudo: centro ± 0,72 × raio fica em 0–100%) */
#atribuicao .feat::before {
    inset: -12% -6% -12% -10%;
    background:
        radial-gradient(34% 38% at 36% 30%, rgba(60, 230, 160, .20), transparent 72%),
        radial-gradient(20% 24% at 22% 72%, rgba(47, 214, 147, .09), transparent 70%),
        radial-gradient(22% 22% at 46% 80%, rgba(28, 138, 99, .12), transparent 70%);
}
/* grade de pontos: nítida fora do painel, desfocada através dele */
#atribuicao .feat::after {
    inset: -8% 46% -8% -8%;
    background-image: radial-gradient(rgba(255, 255, 255, .17) 1.1px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
            mask-image: radial-gradient(closest-side, #000 50%, transparent);
}

/* ---------- o painel: vidro grande ---------- */
#frag-attr {
    position: relative;
    border: 0;
    border-radius: var(--r-box);
    background-color: rgba(255, 255, 255, .03);
    background-image:
        var(--veil),
        radial-gradient(90% 55% at 0% 0%, rgba(60, 230, 160, .075), transparent 70%),
        var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur) saturate(1.3);
            backdrop-filter: var(--glass-blur) saturate(1.3);
    box-shadow: var(--ring-strong), var(--mold), var(--drop);
}
/* fio de luz no topo do vidro */
#frag-attr::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    pointer-events: none; z-index: 1;
}
#frag-attr .frag-bar {
    background: transparent;
    border-bottom: 1px solid var(--attr-line);
}
#frag-attr .frag-title { font-family: var(--display); letter-spacing: -.02em; }
#frag-attr .frag-demo {
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: 9.5px; color: var(--text-2);
    background: rgba(255, 255, 255, .05); box-shadow: var(--attr-pill-ring);
}

/* faixa de contexto: é o rodapé da OUTRA tela, então fica rebaixada */
#frag-attr .attr-synth {
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 10px;
    padding: 13px 18px 14px;
    border: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .12));
    box-shadow: none;
}
#frag-attr .attr-synth-caret { font-size: 13px; color: var(--text-3); line-height: 1.4; }
#frag-attr .attr-synth-t {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
    font-size: 13px; line-height: 1.35;
}
#frag-attr .attr-synth-t b { flex: 1 0 100%; margin-bottom: 3px; color: var(--text); font-weight: 600; }
#frag-attr .attr-synth-t i {
    font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
    padding: 2px 9px; border-radius: var(--r-pill); border: 0;
    background: rgba(255, 255, 255, .055);
    box-shadow: var(--attr-pill-ring);
}
#frag-attr .attr-synth small { margin-top: 5px; font-size: 11.5px; }

/* a aba Atribuição começa aqui: cabeçalho de tela, não outra faixa igual */
#frag-attr .attr-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 13px 18px 0;
    border-top: 1px solid var(--attr-line);
    background: radial-gradient(70% 140% at 12% 0%, rgba(60, 230, 160, .07), transparent 70%);
}
#frag-attr .attr-app {
    font-family: var(--display);
    font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.02em;
}
#frag-attr .attr-app::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand); vertical-align: 1px; margin-right: 9px;
    box-shadow: none;
}
#frag-attr .attr-tabs { display: flex; align-items: center; gap: 2px; margin-left: auto; }
#frag-attr .attr-tabs b {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 500; color: var(--text-3);
    padding: 6px 10px 8px; border-bottom: 2px solid transparent;
}
#frag-attr .attr-tabs b.on { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
#frag-attr .attr-tabs b i {
    font-style: normal; font-family: var(--mono); font-size: 10.5px;
    padding: 1px 7px; border-radius: var(--r-pill); border: 0;
    color: var(--text-2); background: rgba(255, 255, 255, .06); box-shadow: var(--attr-pill-ring);
}
#frag-attr .attr-tabs b.on i {
    color: var(--brand); font-weight: 600;
    background: rgba(60, 230, 160, .14);
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .34);
}

/* barra de lote: card interno de vidro, duas linhas, nada espremido */
#frag-attr .attr-bulk {
    display: grid; gap: 8px 10px;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "sel  sel  btn"
        "lbl  camp set";
    align-items: center;
    margin: 12px 18px 0; padding: 11px 12px;
    border: 0;
    border-radius: var(--r-card);
    background-color: var(--surface-2);
    background-image: var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur-2);
            backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring), var(--mold-soft);
    transition: box-shadow .35s var(--ease);
}
#frag-attr .attr-bulk.hot { box-shadow: var(--ring-brand), var(--mold-soft); }
#frag-attr [data-attr-sel] {
    grid-area: sel; font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
    display: inline-flex; align-items: center; gap: 7px; transition: color .3s var(--ease);
}
#frag-attr [data-attr-sel]::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); transition: background .3s var(--ease);
}
#frag-attr .attr-bulk.hot [data-attr-sel] { color: var(--text); }
#frag-attr .attr-bulk.hot [data-attr-sel]::before { background: var(--brand); box-shadow: none; }
#frag-attr .attr-lbl { grid-area: lbl; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
#frag-attr [data-attr-camp] { grid-area: camp; }
#frag-attr [data-attr-set]  { grid-area: set; }
/* campos: poço rebaixado dentro do vidro */
#frag-attr .attr-select {
    max-width: none; width: 100%; padding: 6px 11px;
    font-size: 11.5px; border-radius: var(--r-card); border: 0;
    background: var(--attr-well);
    box-shadow: var(--ring), var(--attr-well-in);
    transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
#frag-attr .attr-select.set {
    background: rgba(255, 255, 255, .06);
    box-shadow: var(--ring-strong);
}
#frag-attr .attr-btn {
    grid-area: btn; margin-left: 0; justify-self: end;
    padding: 6px 17px; font-size: 12px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .05); color: var(--text-3);
    box-shadow: var(--ring);
    transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
#frag-attr .attr-btn.go {
    background: var(--brand-grad-lit); color: #EFFFF7;
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .45), var(--mold-soft);
}

/* tabela: quatro colunas que cabem, e o destino numa linha própria */
#frag-attr .attr-table,
#frag-attr .attr-table thead,
#frag-attr .attr-table tbody { display: block; }
#frag-attr .attr-table { margin-top: 14px; }
#frag-attr .attr-table thead tr,
#frag-attr .attr-table tbody tr {
    display: grid; align-items: center; column-gap: 10px;
    grid-template-columns: 16px minmax(0, 1fr) auto 78px;
    grid-template-areas: "chk venda origem valor";
    padding: 0 18px;
}
/* a fila: linhas de vidro leve com divisória suave, recuadas 8px do painel */
#frag-attr .attr-table tbody { padding: 6px 8px 8px; }
#frag-attr .attr-table tbody tr {
    grid-template-areas:
        "chk venda origem valor"
        "chk chain chain chain";
    row-gap: 5px; padding: 10px 10px 11px;
    position: relative;
    border-radius: var(--r-card);
    border-bottom: 0;
    transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
/* divisória suave, reta, que não acompanha o arredondado da linha */
#frag-attr .attr-table tbody tr::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
    background: var(--attr-line); pointer-events: none;
}
#frag-attr .attr-table tbody tr:first-child::after,
#frag-attr .attr-table tbody tr:last-child::after { display: none; }
#frag-attr .attr-table th,
#frag-attr .attr-table td { padding: 0; border: 0; background: none; }
#frag-attr .attr-table thead tr {
    padding-top: 9px; padding-bottom: 9px;
    border-bottom: 1px solid var(--attr-line);
    background: transparent;
}
#frag-attr .attr-table th:nth-child(1), #frag-attr .attr-table td:nth-child(1) { grid-area: chk; }
#frag-attr .attr-table th:nth-child(2), #frag-attr .attr-table td:nth-child(2) { grid-area: venda; }
#frag-attr .attr-table th:nth-child(3), #frag-attr .attr-table td:nth-child(3) { grid-area: origem; justify-self: end; }
#frag-attr .attr-table th:nth-child(4), #frag-attr .attr-table td:nth-child(4) { grid-area: valor; }
#frag-attr .attr-table th:nth-child(5) { display: none; }
#frag-attr .attr-table td:nth-child(5) { grid-area: chain; }
#frag-attr .attr-table th { font-size: 10px; letter-spacing: .07em; background: none; border: 0; }
#frag-attr .attr-table th:nth-child(3) { justify-self: end; }
#frag-attr .attr-table td { font-size: 12.5px; line-height: 1.3; }
#frag-attr .attr-table td small {
    margin-top: 3px; font-size: 10.5px; color: var(--text-3);
    font-family: var(--mono); letter-spacing: -.01em;
}
#frag-attr .attr-table td code { color: var(--text-3); }
/* o pisca por célula virava retalho dentro da linha arredondada: some */
#frag-attr .attr-table tr.sel td,
#frag-attr .attr-table tr.flash td { background: none; animation: none; }
#frag-attr .attr-table tbody tr.sel { background: rgba(60, 230, 160, .03); }

/* O FOCO DA SEÇÃO: a venda pendente que você resolve. Vidro erguido, anel de
   marca e o único glow do fragmento. */
#frag-attr .attr-table tbody tr:first-child {
    margin-bottom: 6px;
    background-color: var(--surface-2);
    background-image:
        radial-gradient(80% 120% at 0% 0%, rgba(60, 230, 160, .10), transparent 70%),
        var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur-2);
            backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring-brand), var(--mold-soft), var(--glow);
}
#frag-attr .attr-table tbody tr:first-child.sel {
    background-color: rgba(60, 230, 160, .07);
}
#frag-attr .attr-table tbody tr:first-child td:nth-child(2) { color: #fff; }

/* checkbox: círculo de vidro que enche de marca */
#frag-attr .attr-chk {
    width: 15px; height: 15px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
    transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
#frag-attr .attr-table tr.sel .attr-chk {
    background: var(--brand-grad-lit);
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .55);
}
#frag-attr .attr-chk::after {
    content: ''; width: 7px; height: 4px; margin-top: -2px;
    border: 1.8px solid #EFFFF7; border-top: 0; border-right: 0;
    transform: rotate(-45deg) scale(.4); opacity: 0;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}
#frag-attr .attr-table tr.sel .attr-chk::after { transform: rotate(-45deg) scale(1); opacity: 1; }

/* origem: pill com fundo translúcido da cor semântica, anel no lugar da borda */
#frag-attr .attr-origin {
    padding: 3px 10px; font-size: 10.5px; font-weight: 600;
    letter-spacing: .01em; border: 0; border-radius: var(--r-pill);
    color: var(--text-2); background: rgba(255, 255, 255, .05);
    box-shadow: var(--attr-pill-ring);
}
#frag-attr .attr-origin.macro {
    color: #E8BE5E;
    background: rgba(207, 161, 62, .13);
    box-shadow: 0 0 0 1px rgba(207, 161, 62, .30);
}
#frag-attr .attr-origin.semmatch {
    color: #F08A85;
    background: rgba(229, 112, 107, .13);
    box-shadow: 0 0 0 1px rgba(229, 112, 107, .30);
}

/* destino: cotovelo desenhado (a seta ↳ caía por cima do texto) */
#frag-attr .attr-table td.attr-chain {
    font-size: 11px; color: var(--text-2); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; min-height: 15px;
    padding-left: 16px; position: relative;
}
#frag-attr .attr-chain::before {
    content: ''; position: absolute; left: 2px; top: 0; width: 7px; height: 7px;
    border-left: 1.5px solid rgba(255, 255, 255, .18);
    border-bottom: 1.5px solid rgba(255, 255, 255, .18);
    transition: border-color .3s var(--ease);
}
#frag-attr .attr-chain em { font-size: 11px; color: var(--text-3); }
#frag-attr .attr-chain .sep { margin: 0 5px; color: var(--text-3); }
#frag-attr .attr-chain .manual {
    display: inline-block; margin-left: 7px; padding: 0 7px; border-radius: var(--r-pill);
    font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
    color: #cbb8ff; background: rgba(124, 92, 255, .15); border: 0;
    box-shadow: 0 0 0 1px rgba(124, 92, 255, .34);
}
@keyframes attr-chain-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
#frag-attr .attr-table tr.flash .attr-chain { animation: attr-chain-in .5s var(--ease) both; color: var(--text); }
#frag-attr .attr-table tr.flash .attr-chain::before { border-color: var(--brand); }

/* rodapé da aba: o total pendente fica sempre; o aviso entra quando salva */
#frag-attr .attr-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--attr-line);
    background: transparent;
}
#frag-attr .attr-foot-l { font-size: 11.5px; color: var(--text-3); }
#frag-attr .attr-foot-l b { color: var(--text-2); font-weight: 600; }
#frag-attr .attr-toast {
    margin: 0 0 0 auto; padding: 5px 12px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 600; color: var(--brand);
    background: rgba(60, 230, 160, .12); border: 0;
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .32);
}

@media (max-width: 899px) {
    /* no celular a luz não passa da calha de 16px: nada de rolagem lateral */
    /* painel ocupa a largura toda: a grade de pontos não teria onde aparecer */
    #atribuicao .feat::after { display: none; }
    #atribuicao .feat::before {
        inset: 20% -14px -8% -14px;
        background:
            radial-gradient(46% 30% at 50% 45%, rgba(60, 230, 160, .18), transparent 72%),
            radial-gradient(24% 18% at 26% 78%, rgba(28, 138, 99, .12), transparent 70%);
    }
}

/* ==========================================================================
   2. ANALYTICS — criativos e teste A/B
   ========================================================================== */

#analytics .an-grid { gap: 16px; align-items: stretch; }
#analytics .frag { display: flex; flex-direction: column; }
#analytics .frag-body { flex: 1; display: flex; flex-direction: column; padding: 18px; }
#analytics .frag .caption { margin-top: auto; padding-top: 14px; font-size: 11px; }

/* faixa de números do topo */
.cre-sum {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px;
}
.cre-sum > span {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px; background: var(--surface);
}
.cre-sum small {
    font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
}
.cre-sum b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); }
.cre-sum b.pos { color: var(--pos); }

#analytics .an-legend { margin-bottom: 12px; font-size: 11px; }

/* lista de criativos: uma linha por criativo, com a barra e os números juntos */
.cre-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cre-list li {
    padding: 11px 13px 12px; border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(255,255,255,.014), transparent), var(--bg-soft);
    border: 1px solid var(--border);
}
.cre-list li.win {
    border-color: color-mix(in srgb, var(--pos) 34%, var(--border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 7%, transparent), transparent), var(--bg-soft);
}
.cre-list li.bad { border-color: color-mix(in srgb, var(--neg) 26%, var(--border)); }
.cre-top { display: flex; align-items: center; gap: 10px; }
.cre-name {
    display: inline-flex; align-items: baseline; gap: 8px; min-width: 0;
    font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -.01em;
}
.cre-name em {
    font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--text-3);
    white-space: nowrap;
}
.cre-rank {
    flex: none; width: 19px; height: 19px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10.5px; font-style: normal; font-weight: 600;
    color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
    align-self: center;
}
.cre-list li.win .cre-rank {
    color: #06130C; background: var(--brand); border-color: var(--brand); font-size: 11px;
}
.cre-top .an-pill { margin-left: auto; flex: none; font-family: var(--mono); }
.cre-bar {
    display: block; height: 7px; border-radius: 4px; margin: 10px 0 9px;
    background: var(--surface-hover); position: relative; overflow: hidden;
}
.cre-bar::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px;
    background: var(--text-3); transition: width 1s var(--ease);
}
.cre-bar.win::after { background: linear-gradient(90deg, var(--brand-dim), var(--brand)); }
.cre-bar.ok::after  { background: var(--text-2); }
.cre-bar.bad::after { background: var(--neg); }
.js .rv:not(.in) .cre-bar::after { width: 0; }
.cre-facts {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px;
    font-size: 11px; color: var(--text-3);
}
.cre-facts b { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.cre-facts i { font-style: normal; color: var(--border-strong); }
.cre-list li.win .cre-facts b { color: var(--text); }

/* teste A/B */
#frag-ab .an-badges { margin-bottom: 12px; }
#frag-ab .an-badge { padding: 3px 10px; }
#frag-ab .an-note { font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
#frag-ab .an-table { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
#frag-ab .an-table th {
    padding: 9px 12px; font-size: 9.5px; letter-spacing: .07em;
    background: rgba(255,255,255,.015);
}
#frag-ab .an-table td { padding: 12px; font-size: 12.5px; }
#frag-ab .an-table tbody tr:last-child td { border-bottom: 0; }
#frag-ab .an-table td:first-child { font-weight: 600; color: var(--text); }
#frag-ab .an-table td small {
    display: block; margin: 3px 0 0; font-family: var(--mono);
    font-size: 10.5px; color: var(--text-3);
}
#frag-ab .an-table .num { font-family: var(--mono); }
#frag-ab .an-table tr.win td { background: color-mix(in srgb, var(--pos) 8%, transparent); }

.ab-win {
    display: flex; align-items: center; gap: 12px; margin-top: 12px;
    padding: 12px 14px; border-radius: var(--r-md);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 9%, transparent), transparent), var(--bg-soft);
    border: 1px solid color-mix(in srgb, var(--pos) 32%, var(--border));
}
.ab-win small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ab-win-l b { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text); }
.ab-win-r { margin-left: auto; text-align: right; }
.ab-win-r b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--pos); }
.ab-win-r small { margin-top: 3px; text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--text-2); }

.ab-bars { display: grid; gap: 8px; margin-top: 14px; }
.ab-bars-t { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ab-bar { display: grid; grid-template-columns: 26px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.ab-bar b { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.ab-bar i { display: block; height: 7px; border-radius: 4px; background: var(--surface-hover); position: relative; overflow: hidden; }
.ab-bar i::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px;
    background: var(--text-3); transition: width 1s var(--ease);
}
.ab-bar.win b { color: var(--text); }
.ab-bar.win i::after { background: linear-gradient(90deg, var(--brand-dim), var(--brand)); }
.js .rv:not(.in) .ab-bar i::after { width: 0; }
.ab-bar em {
    font-style: normal; font-family: var(--mono); font-size: 11px;
    color: var(--text-2); text-align: right;
}
.ab-bar.win em { color: var(--pos); font-weight: 600; }

#frag-ab .an-clarity { margin-top: 14px; }
#frag-ab .an-clarity-map { font-size: 11px; padding: 5px 10px; }

/* ==========================================================================
   3. MCP — o relatório dentro da janela do Claude
   ========================================================================== */

/* a seção do MCP passa a ser empilhada: a copy em cima, o documento largo embaixo */
#mcp .feat { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 38px); justify-items: center; }
#mcp .feat-copy { max-width: 860px; text-align: center; }
#mcp .feat-copy .ticks {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px; margin-top: 26px; text-align: left;
}
#mcp .feat-copy .ticks li { margin: 0; }
#mcp .feat-note { text-align: center; }
#mcp #frag-mcp { width: 100%; max-width: 820px; }

#frag-mcp .mcp-chat { min-height: 0; padding: 16px; gap: 12px; }
#frag-mcp .mcp-skills { gap: 5px; margin-bottom: 2px; }
#frag-mcp .mcp-skills span { font-size: 10px; padding: 3px 8px; }
#frag-mcp .mcp-msg { font-size: 12.5px; }
#frag-mcp .mcp-msg.you { max-width: 82%; }
#frag-mcp .mcp-msg.bot { max-width: 92%; }

/* o documento */
.mcp-doc {
    align-self: stretch; max-width: none;
    padding: 0; border-radius: var(--r-md); overflow: hidden;
    background: var(--surface); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mcp-doc.in { opacity: 1; transform: none; }

.rep-head {
    padding: 14px 16px 13px;
    background: linear-gradient(180deg, rgba(60,230,160,.06), transparent), var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.rep-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand);
}
.rep-kicker::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.rep-head h3 {
    margin: 8px 0 0; font-size: 15.5px; font-weight: 600;
    color: var(--text); letter-spacing: -.015em; line-height: 1.3;
}
.rep-sub {
    margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
}

.rep-verdict { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.rep-lbl {
    display: block; margin-bottom: 7px;
    font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-3);
}
.rep-verdict p {
    margin: 0; font-size: 13px; line-height: 1.55; color: var(--text);
    padding-left: 12px; border-left: 2px solid var(--brand);
}
.rep-verdict p b { color: var(--text); font-weight: 600; }

.rep-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--border); border-bottom: 1px solid var(--border);
}
.rep-kpis > span { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; background: var(--surface); }
.rep-kpis small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.rep-kpis b { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); }
.rep-kpis b.pos { color: var(--pos); }

.rep-funnel {
    display: flex; align-items: stretch; gap: 1px;
    background: var(--border); border-bottom: 1px solid var(--border);
}
.rep-funnel span {
    flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0;
    padding: 10px 8px; background: var(--bg-soft); text-align: center;
}
.rep-funnel small { font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.rep-funnel b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-2); }
.rep-funnel span:last-child { background: color-mix(in srgb, var(--pos) 9%, var(--bg-soft)); }
.rep-funnel span:last-child b { color: var(--pos); }

.rep-block { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.rep-block h4 {
    margin: 0 0 8px; font-size: 13.5px; font-weight: 600; line-height: 1.35;
    color: var(--text); letter-spacing: -.012em;
}
.rep-p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.rep-p + .rep-p { margin-top: 8px; }
.rep-p b { color: var(--text); font-weight: 600; }
.rep-ev {
    margin: 10px 0 0; padding: 9px 11px; border-radius: 8px;
    font-family: var(--mono); font-size: 10.5px; line-height: 1.65; color: var(--text-3);
    background: var(--bg); border: 1px solid var(--border);
}
.rep-ev u { display: block; margin-bottom: 4px; text-decoration: none; font-family: var(--ui); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rep-ev b { color: var(--text-2); font-weight: 600; }

.rep-do { border-bottom: 1px solid var(--border); }
.rep-do ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: rep; }
.rep-do li {
    position: relative; padding-left: 27px;
    font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.rep-do li::before {
    counter-increment: rep; content: counter(rep);
    position: absolute; left: 0; top: 1px;
    width: 18px; height: 18px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    color: var(--brand); background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.rep-do li b { color: var(--text); font-weight: 600; }
.rep-do li em { font-style: normal; color: var(--text-3); }

.rep-foot {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 16px 13px; background: var(--bg-soft);
}
.rep-foot span { font-size: 11.5px; line-height: 1.55; color: var(--text-3); }
.rep-foot span b { color: var(--text-2); font-weight: 600; }

/* ==========================================================================
   4. Telas estreitas
   ========================================================================== */
@media (max-width: 900px) {
    #mcp .feat-copy { text-align: left; }
    #mcp .feat-copy .ticks { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #mcp .feat-note { text-align: left; }
}
@media (max-width: 620px) {
    #frag-attr .attr-synth,
    #frag-attr .attr-head,
    #frag-attr .attr-foot { padding-left: 14px; padding-right: 14px; }
    #frag-attr .attr-bulk { margin-left: 14px; margin-right: 14px; }
    #frag-attr .attr-table thead tr,
    #frag-attr .attr-table tbody tr { padding-left: 14px; padding-right: 14px; grid-template-columns: 16px minmax(0, 1fr) auto 72px; }
    #frag-attr .attr-table tbody { padding-left: 6px; padding-right: 6px; }
    #frag-attr .attr-table tbody tr { padding-left: 8px; padding-right: 8px; }
    #frag-attr .attr-tabs { margin-left: 0; }
    #frag-attr .attr-tabs b { padding: 6px 7px 8px; }
    #frag-attr .attr-table td:nth-child(3) { display: block; }
    #frag-attr .attr-table th:nth-child(3) { display: none; }
    #frag-attr .attr-table thead tr { grid-template-areas: "chk venda venda valor"; }
    #frag-attr .attr-table tbody tr {
        grid-template-columns: 16px minmax(0, 1fr) 72px;
        grid-template-areas:
            "chk venda valor"
            "chk origem origem"
            "chk chain chain";
    }
    #frag-attr .attr-table td:nth-child(3) { justify-self: start; }
    #frag-attr .attr-table td:nth-child(5) { display: block; }
    #frag-attr .attr-table td.attr-chain { white-space: normal; }

    #analytics .frag-body { padding: 14px; }
    .cre-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* a conversão já aparece nas barras logo abaixo, então sai da tabela */
    #frag-ab .an-table.ab th:nth-child(4),
    #frag-ab .an-table.ab td:nth-child(4) { display: none; }
    #frag-ab .an-table th, #frag-ab .an-table td { padding-left: 9px; padding-right: 9px; }
    .cre-name em { display: none; }

    .rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rep-ev { font-size: 10px; }
    .rep-funnel { flex-wrap: wrap; }
    .rep-funnel span { flex: 1 1 33%; }
    #frag-mcp .mcp-msg.bot { max-width: 96%; }
}