/* AffiliateRadar — Components
   Depende de theme.css. */

/* ── HEADER ──────────────────────────────────────────────────── */
#hdr {
  position: sticky; top: 0; z-index: 200;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 16px; height: 50px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-sm);
}
#logo { font-family: var(--mono); font-size: var(--fs-base); font-weight: 700; letter-spacing: .08em; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
#logo span { color: var(--green); }
#logo-img { font-size: var(--fs-xl); line-height: 1; display: block; }

.hbadge { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; padding: 2px 7px; border-radius: var(--radius-xs); background: var(--bg3); color: var(--muted); white-space: nowrap; }

.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hsp { flex: 1; }

/* ── SEARCH (linha 1) ──────────────────────────────────────────── */
#search-wrap { position: relative; flex: 0 0 210px; }
#search-inp {
  width: 100%; box-sizing: border-box;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 28px 5px 10px; font-size: var(--fs-md); color: var(--text);
  outline: none; font-family: var(--sans); height: 30px;
}
#search-inp:focus { border-color: var(--blue); }

/* ── LINHA 2: bid + vol ─────────────────────────────────────────
   Cada wrapper é uma "pílula" com label à esquerda e inputs à direita.
   Altura uniforme com a linha 1 (30px).
────────────────────────────────────────────────────────────────── */
#bid-filter-wrap,
#vol-filter-wrap {
  position: relative; display: inline-flex; align-items: center;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 10px; gap: 0; height: 30px;
}
/* Divisor visual entre label e inputs */
#bid-filter-wrap .bid-filter-label,
#vol-filter-wrap  .bid-filter-label {
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted); font-family: var(--mono);
  white-space: nowrap; letter-spacing: .04em; text-transform: uppercase;
  padding-right: 8px; margin-right: 8px;
  border-right: 1px solid var(--border);
}
.bid-filter-group  { display: flex; align-items: center; gap: 0; }
.bid-filter-inputs { display: flex; align-items: center; gap: 4px; }

/* Select de moeda — sem borda própria, fica dentro da pílula */
.bid-currency-sel {
  background: transparent; border: none; border-radius: var(--radius-xs);
  padding: 0 4px 0 0; font-size: var(--fs-md); color: var(--text); cursor: pointer;
  outline: none; font-family: var(--mono); font-weight: 700;
  height: 22px; min-width: 36px;
}
.bid-currency-sel:focus { outline: none; }

/* Inputs numéricos — bordas sutis, mesma fonte mono */
.bid-inp {
  width: 60px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 2px 6px; font-size: var(--fs-md); color: var(--text); outline: none;
  font-family: var(--mono); text-align: right; height: 22px; box-sizing: border-box;
}
.bid-inp:focus { border-color: var(--blue); background: var(--bg2); }
.bid-inp::placeholder { color: var(--muted); opacity: .55; }

/* Separador "–" entre De e Até */
.bid-sep {
  color: var(--muted); font-size: var(--fs-md); font-weight: 700;
  padding: 0 1px; flex-shrink: 0;
}

/* "acima de" no filtro de volume */
#vol-filter-wrap span[style] {
  font-size: var(--fs-sm) !important; color: var(--muted); white-space: nowrap;
  font-family: var(--mono); letter-spacing: .02em;
}

/* Botão × de limpar dentro da pílula */
.bid-clear-btn {
  border: none; background: transparent; color: var(--muted);
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  font-size: var(--fs-base); line-height: 1; padding: 0; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; margin-left: 2px;
  transition: background .12s, color .12s;
}
.bid-clear-btn:hover { background: var(--red-dim); color: var(--red); }

#btn-theme {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 9px; cursor: pointer; color: var(--text); font-size: var(--fs-lg);
}
/* Botões de navegação do header — base compartilhada */
#btn-home, #btn-ferramentas, #btn-integracoes, #btn-sair {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 10px; cursor: pointer; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
/* Variantes com rótulo de texto (mono) */
#btn-home, #btn-ferramentas { font-size: var(--fs-sm); font-weight: 700; font-family: var(--mono); }
/* Variantes só-ícone (engrenagem, sair) */
#btn-integracoes, #btn-sair { font-size: 14px; }
/* Estado ativo / hover — comum aos três */
#btn-home:hover, #btn-home.active,
#btn-ferramentas:hover, #btn-ferramentas.active,
#btn-integracoes:hover, #btn-integracoes.active {
  background: var(--blue-dim); color: var(--blue); border-color: var(--blue);
}
/* Sair é ação destrutiva de sessão: vermelho, para não ser clicado por engano */
#btn-sair:hover { background: var(--red-dim); color: var(--red); border-color: var(--red); }
/* badge-kp states */
#badge-kp.loading { background: var(--amber-dim); color: var(--amber); }
#badge-kp.real    { background: var(--green-dim); color: var(--green); }
#badge-kp.error   { background: var(--red-dim);   color: var(--red);   }

/* Header em telas estreitas: quebra em linhas em vez de forçar scroll lateral da página.
   O espaçador vira quebra de linha — controles à direita (cotação, tema, ⚙) descem juntos. */
@media (max-width: 640px) {
  #hdr { height: auto; min-height: 50px; flex-wrap: wrap; padding: 6px 12px; row-gap: 6px; }
  #hdr .hsp { flex-basis: 100%; height: 0; }
}

/* ── MAIN ─────────────────────────────────────────────────────── */
#main { padding: 8px 12px; }

/* ── FILTER BAR ──────────────────────────────────────────────── */
#filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

.fsel {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 10px; font-size: var(--fs-md); color: var(--text); cursor: pointer;
  outline: none; font-family: var(--sans); height: 30px; box-sizing: border-box;
}
.fsel:focus { border-color: var(--blue); }

/* ── SINAL (bolinha de viabilidade da tabela) ────────────────── */
.sinal-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
/* Select nativo (mesma seta/menu que os outros .fsel) fica com o texto
   invisível quando fechado — a cor por <option> só é respeitada pelo
   navegador na lista ABERTA, nunca na caixa fechada. #sel-sinal-label
   sobrepõe um rótulo real (bolinha .sinal-dot + texto) por cima, permitindo
   dot e texto em cores diferentes, o que uma <option> sozinha não permite. */
#sel-sinal { color: transparent; }
.fsel-wrap { position: relative; display: inline-flex; }
.fsel-fake-label {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: var(--fs-md); color: var(--text);
  pointer-events: none; white-space: nowrap;
}

/* ── TABLE ───────────────────────────────────────────────────── */
#tbl-wrap {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow);
  width: 100%; box-sizing: border-box;
}
/* Dica de scroll horizontal — só em telas estreitas, onde a tabela larga transborda */
.tbl-scroll-hint { display: none; }
@media (max-width: 800px) {
  .tbl-scroll-hint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted);
    padding: 6px 0 5px; letter-spacing: .02em; user-select: none;
  }
}

#ptbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); table-layout: auto; }
#ptbl thead th {
  background: var(--bg3-dark); border-bottom: 2px solid var(--border);
  padding: 10px 6px; text-align: left; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  user-select: none; overflow: visible;
  box-shadow: 0 1px 0 var(--border);
}
#ptbl thead th.sortable { cursor: pointer; }
#ptbl thead th.sortable:hover { background: var(--blue-dim); color: var(--blue); }
#ptbl thead th.s-asc, #ptbl thead th.s-desc { background: var(--blue-dim); color: var(--blue); }
.sa { margin-left: 3px; font-size: var(--fs-sm); }

#ptbl tbody tr { border-bottom: 1px solid var(--border); transition: background .12s ease, box-shadow .12s ease, opacity .15s ease; cursor: pointer; }
#ptbl tbody tr:last-child { border-bottom: none; }
/* Zebrado sutil para o olho não pular de linha nas 14 colunas. Cada produto
   ocupa 2 <tr> (prow+drow), por isso o passo 4n+1 alterna produto sim/produto não.
   Fica ANTES de hover/status, que vencem por ordem no arquivo. */
#ptbl tbody tr.prow:nth-child(4n+1) { background: color-mix(in srgb, var(--text) 4%, var(--bg2)); }
/* Hover nítido: tinge de azul e acende uma faixa à esquerda (sem deslocar layout) */
#ptbl tbody tr.prow:hover { background: color-mix(in srgb, var(--blue) 10%, var(--bg2)); box-shadow: inset 3px 0 0 var(--blue); }
/* Destaques de status — fundo suave + barra colorida grossa à esquerda.
   Escopados em .prow para manterem a cor mesmo sob o hover (mesma especificidade,
   vencem por ordem no arquivo). */
#ptbl tbody tr.prow.row-open      { background: var(--blue-dim);  box-shadow: inset 4px 0 0 var(--blue); }
#ptbl tbody tr.prow.row-espera    { background: var(--amber-dim); box-shadow: inset 4px 0 0 var(--amber); }
#ptbl tbody tr.prow.row-promovida { background: var(--green-dim); box-shadow: inset 4px 0 0 var(--green); }
#ptbl tbody tr.prow.row-ignorada  { background: var(--red-dim); box-shadow: inset 4px 0 0 var(--red); }

/* Descartada: já promovida, não vale mais a pena. Nome riscado (sem apagar a linha). */
#ptbl tbody tr.prow.row-descartada { background: var(--purple-dim); box-shadow: inset 4px 0 0 var(--purple); }
#ptbl tbody tr.prow.row-descartada .td-name span:not(.descarte-tag) { text-decoration: line-through; text-decoration-color: var(--purple); }

/* Modo foco: com um produto aberto (row-open), as demais linhas apagam e desfocam
   para sobrar só o produto + detalhe na tela. Hover devolve a nitidez da linha,
   então dá pra trocar de produto sem fechar o atual. Tudo via :has() — zero JS. */
#ptbl tbody:has(tr.row-open) tr.prow:not(.row-open) { opacity: .25; }
#ptbl tbody:has(tr.row-open) tr.prow:not(.row-open) > td { filter: blur(1.5px); }
#ptbl tbody:has(tr.row-open) tr.prow:not(.row-open):hover { opacity: .9; }
#ptbl tbody:has(tr.row-open) tr.prow:not(.row-open):hover > td { filter: none; }
#ptbl td { padding: 8px 6px; vertical-align: middle; white-space: nowrap; }

.td-name  { font-weight: 600; font-size: var(--fs-md); width: 150px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-mono  { font-family: var(--mono); font-size: var(--fs-md); }
.td-green { font-family: var(--mono); font-size: var(--fs-md); color: var(--green); font-weight: 700; }
.td-red   { font-family: var(--mono); font-size: var(--fs-md); color: var(--red);   font-weight: 700; }
.td-muted { font-family: var(--mono); font-size: var(--fs-md); color: var(--muted); }

/* money cell */
.mc      { font-family: var(--mono); font-size: var(--fs-md); display: inline-flex; flex-direction: column; line-height: 1.3; }
.mc .usd { font-size: var(--fs-xs); color: var(--muted); }

/* ── DETAIL ROW ──────────────────────────────────────────────── */
.drow { display: none; }
.drow.open { display: table-row; }
.dcell  { padding: 0 !important; border-bottom: 2px solid var(--blue) !important; }
.dinner { background: var(--bg); padding: 10px 12px 14px; }

/* keyword table inside detail */
.kwt { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.kwt th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 5px 7px; line-height: 1.2; background: var(--bg3-dark); border-bottom: 1px solid var(--border); white-space: nowrap; }
.kwt td { padding: 4px 7px; line-height: 1.2; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-md); background: var(--bg3); white-space: nowrap; }
.kw-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 5px; cursor: pointer; font-size: var(--fs-sm); color: var(--muted); line-height: 1; }
.kw-btn:hover { background: var(--blue-dim); color: var(--blue); border-color: var(--blue); }

/* ── ROI CALCULATOR ──────────────────────────────────────────── */
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; box-sizing: border-box; }
.cf { display: flex; flex-direction: column; gap: 2px; }
.cf label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.cf input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 4px 7px; font-family: var(--mono); font-size: var(--fs-md); width: 100%; box-sizing: border-box; }
.cf input:focus { outline: none; border-color: var(--blue); }
.cdiv { grid-column: 1/-1; border: none; border-top: 1px dashed var(--border); margin: 1px 0; }
.cres { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; background: var(--bg3); border-radius: var(--radius-sm); padding: 4px 12px; }
.crr { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: var(--fs-md); border-bottom: 1px solid var(--border); }
.crr:nth-last-child(-n+2) { border-bottom: none; }
.crl { color: var(--muted); }
.crv { font-family: var(--mono); font-weight: 700; }
.crv.g { color: var(--green); }
.crv.r { color: var(--red);   }
.crv.b { color: var(--blue);  }
.crv.a { color: var(--amber); }
@media (max-width: 560px){ .calc-grid { grid-template-columns: 1fr 1fr; } }

/* ── DETAIL ACTIONS ──────────────────────────────────────────── */
.dacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; align-items: center; padding-bottom: 12px; }
.dacts > .ba { flex: 1; }
.ba { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 12px; font-size: var(--fs-md); font-weight: 700; cursor: pointer; color: var(--text); font-family: var(--mono); display: inline-flex; align-items: center; justify-content: center; }
.ba:hover  { background: var(--border); }
/* Ver na Plataforma (azul) */
.ba.p      { background: var(--act-platform-dim); color: var(--act-platform); border-color: var(--act-platform); font-weight: 800; }
.ba.p:hover { background: var(--act-platform); color: var(--on-accent); }
/* Ver no Google Trends (laranja) */
.ba.btn-trends { background: var(--act-trends-dim); color: var(--act-trends); border-color: var(--act-trends); font-weight: 800; }
.ba.btn-trends:hover { background: var(--act-trends); color: var(--on-accent); }
/* Botão Status (rosa-pink por padrão) — quando há status ativo, as cores vêm
   inline de setStatusBtnState (app-actions.js) e sobrepõem estas. */
.ba.btn-status { background: var(--act-status-dim); color: var(--act-status); border-color: var(--act-status); font-weight: 800; }
.ba.btn-status:hover { background: var(--act-status); color: var(--on-accent); }
/* Botões de popup por produto — fundo dim + borda colorida, preenchem no hover */
.ba.btn-keywords { background: var(--act-keywords-dim); color: var(--act-keywords); border-color: var(--act-keywords); font-weight: 800; }
.ba.btn-keywords:hover { background: var(--act-keywords); color: var(--on-accent); }
.ba.btn-pagina { background: var(--act-pagina-dim); color: var(--act-pagina); border-color: var(--act-pagina); font-weight: 800; }
.ba.btn-pagina:hover { background: var(--act-pagina); color: var(--on-accent); }

/* ── POPUPS POR PRODUTO (Keywords, Página) ────────────────────────
   Overlay + cartão + cabeçalho padronizados. JS mostra com display:flex. */
.pop-ov { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.pop-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; width: min(520px, 96vw); max-height: 90vh; box-shadow: 0 20px 60px rgba(0,0,0,.45); overflow: hidden; display: flex; flex-direction: column; }
.pop-card.lg { width: min(680px, 96vw); }
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 18px 12px; border-bottom: 1px solid var(--border); background: var(--bg3); flex-shrink: 0; }
.pop-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.pop-title.blue   { color: var(--blue); }
.pop-title.purple { color: var(--purple); }
.pop-title.amber  { color: var(--amber); }
.pop-sub { font-size: 11px; color: var(--muted); margin-top: 3px; font-family: var(--mono); }
.pop-close { background: none; border: 1px solid var(--border); cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 3px 8px; border-radius: 8px; flex-shrink: 0; transition: all .15s; }
.pop-close:hover { background: var(--bg2); color: var(--text); }
.pop-body { flex: 1; overflow-y: auto; background: var(--bg); }

/* Formulários dos popups (gerador de páginas) — antes inline nos helpers pg* */
.frm-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-family: var(--mono); }
.frm-col { display: flex; flex-direction: column; gap: 4px; }
.frm-col.grow { flex: 1; min-width: 190px; }
.frm-input { font-size: 11px; font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; color: var(--text); outline: none; width: 100%; box-sizing: border-box; }
.frm-input:focus, .frm-textarea:focus { border-color: var(--blue); }
.frm-textarea { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 11px; font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; color: var(--text); outline: none; resize: vertical; }
.frm-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; }
.frm-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--blue); }
.frm-toggle .lbl  { font-size: 11px; font-family: var(--mono); color: var(--text); }
.frm-toggle .hint { font-size: 9px;  font-family: var(--mono); color: var(--muted); }
/* Controle segmentado (Tipo, PC/mobile, idioma…) — estado ativo via classe .on */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.seg-btn { font-size: 10px; font-family: var(--mono); font-weight: 700; padding: 5px 12px; border: none; cursor: pointer; white-space: nowrap; background: var(--bg); color: var(--muted); transition: all .15s; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.on { background: var(--blue); color: var(--on-accent); }
.seg.wide { display: flex; width: 100%; border-radius: 8px; }
.seg.wide .seg-btn { flex: 1; padding: 7px 0; font-size: 11px; }
/* Cartão e títulos do gerador de páginas */
.pg-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; margin-bottom: 12px; }
.pg-card-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text); font-family: var(--mono); margin-bottom: 10px; }
.sec-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text); font-family: var(--mono); margin: 0 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--border); }
.pg-act { font-size: 11px; font-family: var(--mono); font-weight: 700; padding: 7px 14px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; background: var(--bg); color: var(--text); transition: all .15s; }
.pg-act:hover { border-color: var(--blue); }
.pg-act.primary { background: var(--blue); color: var(--on-accent); border-color: var(--blue); }
/* Sub-painéis do gerador (Simples/Cookie) */
.pg-subhead { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text); font-family: var(--mono); margin-bottom: 8px; }
.pg-div { border-top: 1px solid var(--border); margin: 14px 0; }
.pg-hint { font-size: 10px; font-family: var(--mono); color: var(--muted); line-height: 1.5; }
.pg-opt { font-size: 10px; font-family: var(--mono); font-weight: 700; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; text-align: left; background: var(--bg); color: var(--muted); transition: all .15s; }
.pg-opt.on { background: var(--blue); color: var(--on-accent); border-color: var(--blue); }
.pg-file { font-size: 11px; font-family: var(--mono); color: var(--text); }
.pg-thumb { text-align: center; }
.pg-thumb img { width: 130px; height: 84px; border: 1px solid var(--border); border-radius: 6px; }
.pg-thumb.contain img { object-fit: contain; background: #fff; } /* backplate branco proposital p/ logos */
.pg-thumb.cover img { object-fit: cover; object-position: top; }
.pg-thumb .cap { font-size: 9px; font-family: var(--mono); color: var(--muted); margin-top: 3px; }

/* Alvos de toque maiores em telas touch (não afeta uso com mouse) */
@media (pointer: coarse) {
  .kw-btn { padding: 6px 9px; }
  .ba { padding: 9px 12px; }
  .seg-btn { padding: 9px 14px; }
  .kwp-btn { padding: 11px 0; }
  .pg-act, .pg-opt { padding: 10px 14px; }
  .pop-close { padding: 8px 12px; }
}

/* Interior do popup Keywords — cartões por bloco (FDF azul, Review roxo) */
.kwp-card { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; background: var(--bg2); padding: 12px 14px; margin-bottom: 12px; }
.kwp-card.blue   { border-left-color: var(--blue); }
.kwp-card.purple { border-left-color: var(--purple); }
.kwp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kwp-title { font-size: 12px; font-weight: 800; font-family: var(--mono); }
.kwp-card.blue   .kwp-title { color: var(--blue); }
.kwp-card.purple .kwp-title { color: var(--purple); }
.kwp-count { font-size: 10px; font-family: var(--mono); font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.kwp-card.blue   .kwp-count { background: var(--blue-dim);   color: var(--blue); }
.kwp-card.purple .kwp-count { background: var(--purple-dim); color: var(--purple); }
.kwp-status { font-size: 10px; color: var(--green); font-family: var(--mono); font-weight: 700; margin-left: auto; }
.kwp-btns { display: flex; gap: 8px; }
.kwp-btn { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 7px 0; font-size: 11px; font-family: var(--mono); font-weight: 600; color: var(--text); cursor: pointer; transition: all .15s; text-align: center; }
.kwp-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.kwp-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 11px; font-family: var(--mono); border: 1px dashed var(--border); border-radius: 8px; }
/* Keyword Foco — coluna da tabela: input colado ao botão ↻ (mesmo sistema visual) */
.td-seed { padding: 4px 8px !important; }
.seed-group-col { display: inline-flex; align-items: stretch; width: 100%; }
.seed-inp-col {
  font-size: 11px; font-family: var(--mono); background: var(--bg2);
  border: 1px solid var(--border); border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 4px 7px; color: var(--text);
  width: 100%; min-width: 0; flex: 1; font-weight: 700; outline: none;
}
.seed-inp-col:focus { border-color: var(--act-update); }
.seed-save-col {
  background: var(--act-update-dim); color: var(--act-update);
  border: 1px solid var(--act-update); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 4px 9px; font-size: 12px; font-weight: 800; cursor: pointer;
  font-family: var(--mono); flex-shrink: 0; line-height: 1;
}
.seed-save-col:hover { background: var(--act-update); color: var(--on-accent); }
.seed-save-col:disabled { opacity: .6; cursor: default; }

/* ── ESTADOS (loading / empty / toast) ───────────────────────── */
#empty-st { text-align: center; padding: 64px 20px; line-height: 1.6; color: var(--muted); font-family: var(--mono); font-size: var(--fs-base); display: none; }
#load-st  { text-align: center; padding: 64px 20px; color: var(--muted); }
#toast {
  position: fixed; bottom: 16px; right: 16px; z-index: 999;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 9px 14px; font-size: var(--fs-base); font-weight: 600; box-shadow: var(--shadow);
  transform: translateY(60px); opacity: 0; transition: transform .2s, opacity .2s;
}
#toast.show { transform: translateY(0); opacity: 1; }

/* ── TOOLTIP ─────────────────────────────────────────────────── */
.ar-tip { position: relative; }
.ar-tip .tip-box {
  display: none; position: fixed;
  font-family: var(--sans); font-size: var(--fs-base); font-weight: 400; line-height: 1.6;
  text-transform: none; letter-spacing: 0;
  padding: 9px 13px; border-radius: var(--radius); white-space: normal;
  width: 220px; z-index: 99999; pointer-events: none; text-align: left;
}
.ar-tip .tip-box::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 6px solid transparent; bottom: -12px; top: auto; }
.ar-tip .tip-box.tip-below::after { top: -12px; bottom: auto; }

/* ── PAGINAÇÃO ───────────────────────────────────────────────── */
.pg-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 0 6px; font-size: var(--fs-md); font-family: var(--mono); }
.pg-btn { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer; color: var(--text); font-size: var(--fs-md); font-weight: 700; font-family: var(--mono); }
.pg-btn:hover:not(:disabled) { background: var(--blue-dim); color: var(--blue); border-color: var(--blue); }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.pg-info { color: var(--muted); font-size: var(--fs-md); }
/* Em telas estreitas a info vai para cima e os botões centralizam — sem estourar a viewport */
@media (max-width: 640px) {
  .pg-bar  { flex-wrap: wrap; justify-content: center; }
  #pg-top  { width: 100%; }
  .pg-info { width: 100%; text-align: center; order: -1; }
}

/* ── INTEGRAÇÕES ─────────────────────────────────────────────── */
#integ-page { padding: 16px; max-width: 900px; margin: 0 auto; }
#integ-page h1 { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }

.integ-global-actions {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  margin-bottom: 20px; padding: 12px 16px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
}
.integ-global-actions span { font-size: var(--fs-md); color: var(--muted); font-family: var(--mono); flex: 1; }
.integ-global-actions .btn-plat { white-space: nowrap; flex-shrink: 0; }

/* Card da plataforma */
.plat-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 16px; overflow: hidden;
}
.plat-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--bg3-dark);
  border-bottom: 1px solid var(--border);
}
.plat-card-name { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700; letter-spacing: .06em; flex: 1; }
.plat-card-status { font-size: var(--fs-sm); font-family: var(--mono); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.plat-status-ok      { background: var(--green-dim); color: var(--green); }
.plat-status-running { background: var(--amber-dim); color: var(--amber); }
.plat-status-error   { background: var(--red-dim);   color: var(--red);   }
.plat-status-off     { background: var(--bg3);       color: var(--muted); }

/* Plataforma desligada pelo toggle: card apagado, mas legível */
.plat-toggle { flex-shrink: 0; padding: 0; }
.plat-card.off .plat-card-body { opacity: .45; }
.plat-card.off .plat-card-name { color: var(--muted); }

.plat-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Stats row */
.plat-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.plat-stat {
  flex: 1; min-width: 110px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 8px 12px; display: flex; flex-direction: column; gap: 3px;
}
.plat-stat-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.plat-stat-val   { font-size: var(--fs-xl); font-weight: 700; font-family: var(--mono); line-height: 1; }
.plat-stat-sub   { font-size: var(--fs-sm); color: var(--muted); font-family: var(--mono); }
.sv-total   { color: var(--text); }
.sv-ok      { color: var(--green); }
.sv-err     { color: var(--red); }

/* Sync / KP sections inside card — 2 colunas lado a lado */
.plat-sections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .plat-sections-grid { grid-template-columns: 1fr; } }
.plat-section { display: flex; flex-direction: column; gap: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.plat-section-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 2px; }
.plat-section-row { display: flex; align-items: center; gap: 10px; }
.plat-btn-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.plat-btn-row .btn-plat { width: 100%; justify-content: center; }
.plat-meta { font-size: var(--fs-md); color: var(--muted); font-family: var(--mono); }
.plat-meta strong { color: var(--text); font-weight: 700; }

/* Botões do card */
.btn-plat {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: var(--fs-md); font-weight: 700; font-family: var(--mono);
  cursor: pointer; color: var(--text); white-space: nowrap;
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  line-height: 1.2;
}
.btn-plat:hover { background: var(--border); }
.btn-plat:disabled { opacity: .4; cursor: not-allowed; }
.btn-plat-primary { background: var(--green-dim); color: var(--green); border-color: var(--green); }
.btn-plat-primary:hover { background: var(--green); color: var(--on-accent); }
.btn-plat-blue { background: var(--blue-dim); color: var(--blue); border-color: var(--blue); }
.btn-plat-blue:hover { background: var(--blue); color: var(--on-accent); }
.btn-plat-purple { background: var(--purple-dim); color: var(--purple); border-color: var(--purple); }
.btn-plat-purple:hover { background: var(--purple); color: var(--on-accent); }
.btn-plat-danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn-plat-danger:hover { background: var(--red-dim); }

/* ── TRANSIÇÕES, FOCO E ESTADOS ─────────────────────────────────────────────── */

/* Transições suaves nos elementos interativos que não tinham */
.ba, .kw-btn, .pg-btn, .fsel, .seed-save-col, .seed-inp-col,
.bid-inp, .bid-currency-sel, #search-inp {
  transition: background .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}

/* Foco visível por teclado (acessibilidade) sem afetar o clique do mouse */
.fsel:focus-visible, #search-inp:focus-visible, .bid-inp:focus-visible,
.bid-currency-sel:focus-visible, .seed-inp-col:focus-visible, .seed-save-col:focus-visible,
.ba:focus-visible, .kw-btn:focus-visible, .pg-btn:focus-visible,
.btn-plat:focus-visible, .btn-plat-link:focus-visible, #btn-theme:focus-visible,
#btn-home:focus-visible, #btn-ferramentas:focus-visible, #btn-integracoes:focus-visible,
#btn-sair:focus-visible,
.bid-clear-btn:focus-visible, #search-clear:focus-visible,
.cf input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Realce sutil do anel de foco nos inputs de filtro */
#search-inp:focus, .bid-inp:focus, .seed-inp-col:focus, .cf input:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Carregando — spinner com cor de marca (padding/centralização na def. base acima) */
#load-st .spin { color: var(--blue); display: inline-block; }
#load-st p { margin-top: 10px; opacity: .85; }

/* Vazio — ícone discreto (padding/centralização na def. base acima) */
#empty-st::before {
  content: '🔍'; display: block; font-size: 30px;
  margin-bottom: 10px; opacity: .55;
}

/* ── Platform link button (↗ Acessar plataforma) ── */
.btn-plat-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--blue); text-decoration: none;
  padding: 2px 8px; border-radius: var(--radius-xs);
  border: 1px solid var(--blue);
  margin-left: 10px;
  opacity: .75; transition: opacity .15s, background .15s;
  white-space: nowrap;
}
.btn-plat-link:hover { opacity: 1; background: var(--blue-dim); }

/* ── Sync error panel inside platform card ── */
.plat-error-panel {
  margin: 10px 12px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: none;
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--mono); font-size: var(--fs-sm);
  color: var(--text); line-height: 1.7;
}
.plat-error-panel .err-item {
  display: flex; align-items: flex-start; gap: 6px; padding: 2px 0;
}
.plat-error-panel .err-icon {
  flex-shrink: 0; font-size: var(--fs-md); line-height: 1.7;
}
.plat-error-panel .err-msg {
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  color: var(--muted);
}
.plat-error-panel .err-label { font-weight: 700; color: var(--text); }

/* ── MOVIMENTO REDUZIDO (acessibilidade) ─────────────────────────
   Respeita prefers-reduced-motion: corta transições e a animação do
   toast. O spinner de carregamento é mantido (transmite status), mas
   desacelerado para reduzir o efeito de movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .spin { animation-duration: 1.5s !important; animation-iteration-count: infinite !important; }
  #toast { transition: opacity .15s !important; transform: none; }
  #toast.show { transform: none; }
}


/* ══ PASSO 7 — VENDÁVEL (PLANO_SAAS.md) ══════════════════════════
   Três blocos: telas de conta (fora do app), painel /admin e onboarding.
   Todos usam as variáveis do theme.css — nenhuma cor literal nova. */

/* ── Telas de conta (assinatura, recuperar senha, termos, aceite) ──
   Não estendem o base.html: são abertas sem sessão ou com o acesso
   bloqueado, quando o header ainda não faz sentido. */
.conta-wrap {
  min-height: 100vh; box-sizing: border-box; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px 16px; background: var(--bg);
}
.conta-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 28px; width: min(430px, 100%); box-sizing: border-box;
  text-align: center; font-family: var(--sans); color: var(--text);
}
/* Termos e Privacidade: texto corrido, alinhado à esquerda e mais largo. */
.conta-card-texto { width: min(760px, 100%); text-align: left; }
.conta-logo {
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: .08em; color: var(--muted); margin-bottom: 16px;
}
.conta-logo span { color: var(--green); }
.conta-icone { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.conta-titulo { font-size: 17px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
.conta-texto { font-size: var(--fs-lg); line-height: 1.65; color: var(--text); margin: 0 0 12px; }
.conta-nota  { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.conta-erro {
  font-size: var(--fs-base); color: var(--red); background: var(--red-dim);
  border: 1px solid var(--red); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 12px;
}
.conta-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.conta-input {
  font-family: var(--sans); font-size: var(--fs-lg); padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); outline: none; width: 100%;
  box-sizing: border-box;
}
.conta-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-ring); }
.conta-btn {
  display: inline-block; font-family: var(--sans); font-size: var(--fs-lg);
  font-weight: 700; padding: 11px 18px; border: 1px solid var(--green);
  border-radius: var(--radius-sm); background: var(--green);
  color: var(--on-accent); cursor: pointer; text-decoration: none;
  margin-top: 6px; transition: opacity .15s;
}
.conta-btn:hover { opacity: .88; }
.conta-links { margin-top: 18px; font-size: var(--fs-base); color: var(--muted); }
.conta-links a, .conta-rodape a { color: var(--muted); }
.conta-rodape { font-size: var(--fs-sm); color: var(--muted); font-family: var(--mono); }
.conta-doc { text-align: left; font-size: var(--fs-lg); line-height: 1.75; color: var(--text); }
.conta-doc h2 {
  font-size: var(--fs-lg); font-weight: 700; margin: 22px 0 8px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.conta-doc p  { margin: 0 0 10px; }
.conta-doc ul { margin: 0 0 12px; padding-left: 20px; }
.conta-doc li { margin-bottom: 6px; }

/* ── Faixa de cobrança em atraso (7.1) ─────────────────────────────
   `atrasado` PASSA, mas avisa: é cartão vencido, não fraude. */
.assin-faixa {
  background: var(--amber-dim); color: var(--amber);
  border-bottom: 1px solid var(--amber); font-family: var(--sans);
  font-size: var(--fs-base); text-align: center; padding: 7px 14px;
}
.assin-faixa a { color: var(--amber); font-weight: 700; }

/* ── Painel de contas (/admin, 7.3) ────────────────────────────────*/
#adm-page { padding: 14px 18px; max-width: 1100px; margin: 0 auto; }
.adm-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.adm-contagem { font-family: var(--mono); color: var(--muted); font-weight: 400; }
.adm-tbl-wrap { overflow-x: auto; }
.adm-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.adm-tbl th {
  text-align: left; font-family: var(--mono); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: 7px 8px; white-space: nowrap;
}
.adm-tbl td { border-bottom: 1px solid var(--border); padding: 6px 8px; vertical-align: middle; }
.adm-tbl tr:hover td { background: var(--bg3); }
.adm-id   { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.adm-mail { font-family: var(--mono); }
.adm-data { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.adm-vazio { text-align: center; color: var(--muted); padding: 18px 0; }
.adm-acoes { display: flex; gap: 6px; white-space: nowrap; }
.adm-sel { width: auto; min-width: 108px; }
.adm-tag {
  font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase;
  background: var(--blue-dim); color: var(--blue); border-radius: var(--radius-xs);
  padding: 1px 5px; margin-left: 4px;
}
.adm-ok   { color: var(--green); font-family: var(--mono); font-size: var(--fs-sm); }
.adm-pend { color: var(--amber); font-family: var(--mono); font-size: var(--fs-sm); }
.adm-nota { font-size: var(--fs-base); color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.adm-senha-box {
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--green);
  background: var(--green-dim); border-radius: var(--radius-sm);
  font-size: var(--fs-md); color: var(--text);
}
.adm-senha-box code {
  font-family: var(--mono); font-weight: 700; background: var(--bg2);
  padding: 2px 6px; border-radius: var(--radius-xs);
}
/* Cor por estado da assinatura — o mesmo vocabulário do resto do app. */
.adm-st-ativo     { border-color: var(--green); color: var(--green); }
.adm-st-trial     { border-color: var(--blue);  color: var(--blue); }
.adm-st-atrasado  { border-color: var(--amber); color: var(--amber); }
.adm-st-cancelado { border-color: var(--red);   color: var(--red); }

/* ── Onboarding (7.6) ──────────────────────────────────────────────*/
.ob-ov { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.5); }
.ob-balao {
  position: fixed; display: none; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 14px 16px;
  font-family: var(--sans); color: var(--text); box-sizing: border-box;
}
.ob-passo  { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); margin-bottom: 5px; }
.ob-titulo { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }
.ob-texto  { font-size: var(--fs-base); line-height: 1.6; color: var(--muted); }
.ob-acoes  { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; }
.ob-pular {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-family: var(--sans); font-size: var(--fs-base); padding: 5px 2px;
}
.ob-proximo {
  background: var(--green); color: var(--on-accent); border: none; cursor: pointer;
  font-family: var(--sans); font-size: var(--fs-base); font-weight: 700;
  border-radius: var(--radius-sm); padding: 7px 15px;
}
.ob-vazio { max-width: 460px; margin: 14px auto 0; text-align: center; }
.ob-vazio-icone  { font-size: 30px; margin-bottom: 8px; }
.ob-vazio-titulo { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ob-vazio-texto  { font-size: var(--fs-base); line-height: 1.65; color: var(--muted); }