/* ============================================================
   Knife Duels Scanner — painel
   Linguagem visual: fundo escuro com grade sutil, navegacao em pilulas,
   cartoes com cabecalho (nome + categoria), area da imagem e tabela de
   atributos rotulo/valor.
   ============================================================ */

:root {
  --bg: #0a0a0c;
  --bg-grid: rgba(255, 255, 255, .022);
  --panel: #111114;
  --panel-2: #17171b;
  --card: #141417;
  --card-hover: #1a1a1f;
  --inset: #0e0e11;
  --line: #26262c;
  --line-soft: #1e1e23;

  --text: #f2f3f5;
  --text-dim: #9a9aa5;
  --text-faint: #63636e;

  --accent: #6d8cff;
  --fx: #ff9d3d;
  --fx-soft: rgba(255, 157, 61, .14);
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;

  /* Cores de raridade alinhadas com a lista de valores de referencia, para o
     operador nao ter de reaprender o codigo de cor ao trocar de aba do
     navegador: SEGREDO e dourado, EXCLUSIVO roxo, MITICO vermelho. As nossas
     eram rosa/roxo/laranja e discordavam em duas das tres. */
  --c-secret: #d8bf5c;
  --c-exclusive: #a78bfa;
  --c-mythic: #f43f5e;
  --c-collectible: #4ade80;
  --c-epic: #f0883e;
  --c-rare: #38bdf8;
  --c-uncommon: #8b8b98;
  --c-common: #63636e;

  --acao-bots: #b47cff;   /* botao "bots on": cor propria, ver comentario abaixo */

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* O atributo hidden precisa vencer qualquer display declarado depois.
   Sem isto, `.modal { display: flex }` deixava o modal visivel por cima
   do site inteiro. */
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  color: var(--text);
  font: 14px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

.wrap { max-width: 1500px; margin: 0 auto; padding: 0 20px; }

/* ─── cabecalho ─────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Uma instrucao e um carregador local; a HUD mostra o andamento no jogo. */
.seguir-local {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--panel);
}
.seguir-local p { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.seguir-local strong { color: var(--text); }
.seguir-local .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .seguir-local { align-items: stretch; flex-direction: column; gap: 8px; }
}

/* Sincronizacao exibida apenas na aba Pendentes, junto ao gerenciamento de itens. */
.price-sync {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 18px; margin: 0 0 20px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel);
}
.price-sync-info { min-width: 0; }
.price-sync-heading { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.price-sync-heading span { margin: 0 5px; color: var(--text-faint); }
.price-sync-heading a { text-decoration: none; color: var(--accent); }
.price-sync-heading a:hover { text-decoration: underline; }
.price-sync-status { margin-top: 3px; overflow-wrap: anywhere; }
.price-sync-status.err { color: var(--err); }
.price-sync-status.ok { color: var(--ok); }
.price-sync-status.warn { color: var(--warn); }
.price-sync-details { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.price-sync .price-sync-btn { flex-shrink: 0; border-color: var(--accent); color: var(--accent); }
.price-sync .price-sync-btn:disabled { opacity: .55; cursor: wait; }
.price-sync .price-sync-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) {
  .price-sync { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px; }
  .price-sync .price-sync-btn { width: 100%; }
}

/* LOGO GRANDE. Na referencia ela domina o canto esquerdo da barra — e a
   primeira coisa que se ve. Como o PNG tem ~15% de borda transparente de cada
   lado (medido: desenho em x 184..1072 de 1254), a caixa precisa ser maior que
   a altura aparente desejada: 76px de caixa dao ~49px de wordmark visivel. */
.brand-logo {
  width: 76px; height: 76px; flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255,255,255,.12));
}
.brand-logo-alt {
  font-weight: 800; font-size: 17px; letter-spacing: 1.5px;
  color: var(--text); white-space: nowrap;
}

/* O nome do JOGO ja esta dentro da logo; este texto diz o que a FERRAMENTA e. */
.brand-name {
  font-weight: 800; font-size: 17px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text); line-height: 1.1;
}
.brand-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

/* navegacao em pilulas */
.nav {
  display: flex; gap: 8px; flex: 1; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px;
}
.nav button {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent;
  border-radius: 10px; padding: 9px 16px;
  color: var(--text-dim); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background .12s, color .12s;
}
.nav button:hover { background: var(--panel-2); color: var(--text); }
.nav button.on {
  background: #24242c; border-color: #3a3a46;
  color: #fff; font-weight: 700;
}
.nav .ico { font-size: 14px; opacity: .85; }
.nav .badge {
  background: var(--fx); color: #201305; border-radius: 20px;
  padding: 1px 7px; font-size: 10px; font-weight: 800;
}

.status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); flex-shrink: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.dot.on { background: var(--ok); box-shadow: 0 0 9px rgba(74, 222, 128, .6); }
.dot.off { background: var(--err); }

/* ─── painel de controles (chips + busca + contador) ────── */
.controles {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 18px;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
/* Chips no estilo da referencia: o ativo e texto CLARO sobre fundo um pouco
   mais claro, com borda visivel. O invertido (branco solido, texto preto) que
   estava aqui gritava mais que os cartoes e puxava o olho para o filtro em vez
   de para o conteudo. */
.chip {
  background: #131317; border: 1px solid #22222a;
  border-radius: 9px; padding: 8px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: #7e7e8a; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: #1a1a20; color: var(--text); }
.chip.on { background: #24242c; border-color: #3a3a46; color: #fff; }

.linha-busca { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.busca-box {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
  background: var(--inset); border: 1px solid var(--line);
  border-radius: 10px; padding: 0 14px;
}
.busca-box:focus-within { border-color: var(--accent); }
.busca-box svg { flex-shrink: 0; opacity: .45; }
.busca-box input {
  flex: 1; background: none; border: none; outline: none;
  padding: 11px 0; color: var(--text);
}
.busca-box input::placeholder { color: var(--text-faint); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px;
  color: var(--text); cursor: pointer; font-size: 13px;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--card-hover); border-color: #33333b; }
.btn.primary { background: var(--text); border-color: var(--text); color: #0a0a0c; font-weight: 600; }
.btn.primary:hover { filter: brightness(.92); }
.btn.small { padding: 6px 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.check { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 12.5px; cursor: pointer; }
.check select {
  background: var(--inset); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 9px; outline: none;
}

.contador { margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.contador b { color: var(--text); font-weight: 700; }

.resumo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-faint);
}
.resumo b { color: var(--text-dim); font-weight: 600; }
.resumo .sep { width: 1px; height: 12px; background: var(--line); }

.alerta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: rgba(251, 191, 36, .07); border: 1px solid rgba(251, 191, 36, .28);
  color: var(--text-dim); font-size: 12.5px;
}
.alerta b { color: var(--warn); font-weight: 700; }

/* ─── grade de cartoes ──────────────────────────────────── */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.grid.jogadores { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

/* ── cartao de item do catalogo ─────────────────────────────
   Estrutura copiada da lista de valores de referencia, que o operador usa em
   paralelo: NOME no topo centralizado, RARIDADE colorida logo abaixo, IMAGEM
   no meio e os atributos como linhas rotulo/valor no rodape.
   Eu tinha montado antes a partir de uma descricao em texto (imagem primeiro,
   precos grandes) e ficou outra coisa. Com as telas em maos, a ordem acima e a
   que o operador reconhece sem reaprender. */
.item-card {
  background: #0e0e11; border: 1px solid #1d1d23;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .14s, transform .14s;
}
.item-card:hover {
  border-color: color-mix(in srgb, var(--cor-cat, #34343d) 45%, #1d1d23);
  transform: translateY(-2px);
}

.item-card .cab { padding: 14px 12px 0; text-align: center; }
.item-card .nome {
  font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-card .cat {
  margin-top: 3px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--cor-cat, var(--text-dim));
}

/* Palco da imagem: painel um pouco mais claro que o cartao, como na
   referencia. O quadriculado sutil evita que uma faca escura suma no fundo. */
.item-card .palco {
  margin: 12px 12px 0; border-radius: 12px;
  height: 132px; display: grid; place-items: center; padding: 14px;
  background:
    linear-gradient(#16161a, #131317),
    repeating-conic-gradient(rgba(255,255,255,.018) 0% 25%, transparent 0% 50%);
  background-size: auto, 18px 18px;
}
.item-card .palco img { max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.55)); }
.item-card .palco .sem-img { font-size: 30px; opacity: .14; }

/* Linhas rotulo/valor: rotulo a esquerda em cinza, valor a direita em branco.
   Espacamento generoso — na referencia elas respiram, e apertar aqui foi o que
   fez a versao antiga parecer uma tabela em vez de um cartao. */
.atributos { padding: 14px 14px 15px; display: flex; flex-direction: column; gap: 9px; }
.atributo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px;
}
.atributo .rot { color: #85858f; flex: none; }
.atributo .val { font-weight: 600; color: #eaeaef; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atributo .val.fx { color: var(--fx); }

.val.rising      { color: var(--ok); }
.val.stabilizing { color: var(--warn); }
.val.stable      { color: #85858f; }
.val.lowering    { color: var(--err); }
.val.desconhecido { color: #5c5c66; font-style: italic; font-weight: 400; }

.selo-manual {
  margin: 0 14px 13px; text-align: center;
  font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent); border: 1px dashed rgba(109,140,255,.4);
  border-radius: 6px; padding: 3px;
}

/* cores por categoria */
.c-SECRET { color: var(--c-secret); }
.c-EXCLUSIVE { color: var(--c-exclusive); }
.c-MYTHIC { color: var(--c-mythic); }
.c-COLLECTIBLE { color: var(--c-collectible); }
.c-EPIC { color: var(--c-epic); }
.c-RARE { color: var(--c-rare); }
.c-UNCOMMON { color: var(--c-uncommon); }
.c-COMMON { color: var(--c-common); }

.tag {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.b-SECRET { background: var(--c-secret); color: #21030a; }
.b-EXCLUSIVE { background: var(--c-exclusive); color: #15012a; }
.b-MYTHIC { background: var(--c-mythic); color: #201305; }
.b-COLLECTIBLE { background: var(--c-collectible); color: #00220f; }
.b-EPIC { background: var(--c-epic); color: #050f2e; }
.b-RARE { background: var(--c-rare); color: #01202e; }
.b-UNCOMMON { background: var(--c-uncommon); color: #0a0a0c; }
.b-COMMON { background: var(--c-common); color: #0a0a0c; }
.tag-fx { background: var(--fx); color: #201305; }

/* ── cartao de jogador ──────────────────────────────────── */
.player {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px; cursor: pointer;
  transition: border-color .14s, transform .14s;
}
.player:hover { border-color: #34343d; transform: translateY(-2px); }
.player.d2 { border-color: rgba(255, 157, 61, .45); }
.player.d3 { border-color: var(--fx); box-shadow: 0 0 26px -14px var(--fx); }
.player.novo { animation: chegou 2s ease-out; }
@keyframes chegou { from { box-shadow: 0 0 0 2px var(--ok); } to { box-shadow: 0 0 0 0 transparent; } }

.player-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.avatar {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--inset); border: 1px solid var(--line); object-fit: cover;
}
/* Sem foto (falha passageira ou jogador sem avatar): silhueta no lugar do
   quadrado vazio. Some sozinha quando o src chega. */
.avatar:not([src]),
.perfil-topo .avatar-g:not([src]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a8f98' fill-opacity='.6'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4 21c0-4.2 3.6-7 8-7s8 2.8 8 7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 62%;
}
.player-id { flex: 1; min-width: 0; }
.player-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-total { text-align: right; flex-shrink: 0; }
.player-total b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--ok); }
.player-total span { font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; }

.selos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.selo { font-size: 9.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; }
.selo-fx { background: var(--fx); color: #201305; }
.selo-serie { background: var(--c-exclusive); color: #15012a; }
.selo-desconhecido { background: var(--warn); color: #241a02; }

.items { display: flex; flex-direction: column; gap: 6px; }
/* A RARIDADE E SEMPRE UMA BORDA COLORIDA, no site inteiro: faixa no topo do
   cartao do catalogo, faixa na lateral da linha de item. Com uma so convencao,
   percorrer o cartao de um jogador com 4 facas vira leitura de cor, sem ter de
   ler quatro etiquetas. A cor vem de --cor-cat, definida inline pelo JS. */
.item-row {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 10px; border-radius: 9px; background: var(--inset);
  border: 1px solid transparent;
}
.item-row::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cor-cat, transparent);
}
.item-row.fx { background: linear-gradient(90deg, var(--fx-soft), rgba(255,157,61,.02)); border-color: rgba(255,157,61,.2); }
.item-img { width: 40px; height: 40px; border-radius: 7px; object-fit: contain; background: #0a0a0c; flex-shrink: 0; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { font-size: 10px; color: var(--text-faint); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.item-value { text-align: right; flex-shrink: 0; font-weight: 700; font-size: 13px; }
.item-value.unknown { color: var(--text-faint); font-style: italic; font-weight: 400; }
.sem-preco { color: var(--text-faint); font-style: italic; }

.serial { font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: var(--text-dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.serial.raro { color: var(--c-exclusive); border-color: rgba(180,124,255,.5); font-weight: 700; }
.equipped { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--ok); border: 1px solid rgba(74,222,128,.35); border-radius: 4px; padding: 0 5px; }
.more { font-size: 11px; color: var(--text-faint); padding: 5px 7px; }

.player-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--text-faint);
}
.fresh { color: var(--ok); }
.stale { color: var(--warn); }
.readstatus { padding: 2px 7px; border-radius: 5px; background: var(--panel-2); }
.readstatus.partial, .readstatus.timeout { background: rgba(251,191,36,.13); color: var(--warn); }
.readstatus.error, .readstatus.unavailable { background: rgba(248,113,113,.13); color: var(--err); }
.spacer { flex: 1; }

.acao {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 10px; font-size: 11px; color: var(--text-dim);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.acao:hover { color: var(--text); border-color: var(--accent); }
.acao.off { opacity: .4; cursor: default; }

/* ─── pendentes ─────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 390px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }
h2 { font-size: 15px; margin: 0 0 5px; font-weight: 700; }
.hint { color: var(--text-faint); font-size: 12px; }

.unknown-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.unknown-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px;
}
.unknown-row .raw { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.unknown-row .meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.form { display: flex; flex-direction: column; gap: 11px; margin-top: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-dim); }
.form input, .form select, .form textarea {
  background: var(--inset); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; outline: none; color: var(--text);
}
.form input:focus, .form select:focus { border-color: var(--accent); }
.form .row { display: flex; gap: 10px; }
.form .row label { flex: 1; }
.preview { max-width: 110px; border-radius: 9px; background: var(--inset); align-self: center; }
.form-msg { font-size: 12px; min-height: 17px; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }

/* ─── bots ──────────────────────────────────────────────── */
.bots-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bot-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px;
}
/* Verde no topo enquanto coleta. A pergunta que se faz ao abrir esta aba e
   "esta rodando?" — ela tem que se responder de longe, sem ler texto. */
.bot-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--line);
}
.bot-card.on::before { background: var(--ok); }
.bot-card.off { opacity: .72; }

.bot-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bot-id { font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  font-family: ui-monospace, Consolas, monospace; }
.bot-estado {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text-dim);
}
.bot-estado.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: color-mix(in srgb, var(--ok) 10%, transparent); }

.bot-progresso {
  margin-top: 9px; font-size: 11.5px; color: var(--text-dim);
  background: var(--inset); border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 5px 9px;
}

/* Os tres numeros que importam, grandes, antes das linhas de detalhe. */
.bot-numeros { display: flex; gap: 8px; margin: 12px 0 10px; }
.bot-numeros > div { flex: 1; min-width: 0; background: var(--inset);
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 9px; }
.bot-numeros b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; }
.bot-numeros span { display: block; margin-top: 1px; font-size: 9.5px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); }

.bot-lines { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.bot-line { display: flex; justify-content: space-between; gap: 12px; }
.bot-line span { color: var(--text-faint); }
.bot-line.err b { color: var(--err); }

/* Restos de teste que nunca mandaram sinal. Ficam visiveis e explicados, em
   vez de posarem de coletor "parado ha nunca" no meio dos de verdade. */
.bot-restos {
  grid-column: 1 / -1;
  background: var(--inset); border: 1px dashed var(--line);
  border-radius: var(--r-md); padding: 12px 14px;
}
.bot-restos b { display: block; font-size: 12px; color: var(--text-dim); }
.bot-restos span { display: block; margin-top: 4px; font-size: 11px;
  color: var(--text-faint); line-height: 1.5; }

/* ─── modal ─────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(4,4,6,.82); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; max-width: 740px; width: 100%; max-height: 88vh; overflow: auto; position: relative;
}
.modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 26px; line-height: 1; color: var(--text-dim); cursor: pointer; }
.modal-close:hover { color: var(--text); }
.modal h2 { font-size: 20px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; margin: 16px 0; }
.kv div { background: var(--inset); border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 11px; }
.kv span { display: block; font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; }
.kv b { font-size: 14px; }

.servidor-box { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin: 16px 0; }
.servidor-box code { display: block; font-size: 11px; color: var(--text-dim); margin: 7px 0 11px; word-break: break-all; }
.servidor-box .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }

.empty { text-align: center; padding: 70px 20px; color: var(--text-faint); }
.pager { text-align: center; margin-top: 22px; }
details summary { cursor: pointer; }
code { font-family: ui-monospace, Consolas, monospace; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 20px; z-index: 60; font-size: 13px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.9);
}
.toast.err { border-color: var(--err); color: var(--err); }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; }
  .grid, .grid.jogadores { grid-template-columns: 1fr; }
}

/* Saude dos coletores na aba Jogadores.
   Um bot que morre deixa a lista esvaziando ate zero, e lista vazia parece
   defeito do site. Esta faixa separa "ninguem valioso agora" de "parou de
   coletar". Cores diferentes: amarelo ainda ha bot vivo, vermelho nenhum. */

/* "entrar" e a acao principal do card: um clique, sem aba intermediaria.
   Destacada porque as outras duas sao plano B. */
.acao.acao-entrar { background: var(--accent, #3b82f6); border-color: var(--accent, #3b82f6); color: #fff; font-weight: 600; }
.acao.acao-entrar:hover { filter: brightness(1.12); }

/* "entrar (bots on)": caminho que pega o ingresso pela sessao do navegador.
   Cor diferente do "entrar" para o operador nao confundir qual usar — os
   dois entram na mesma sala, muda de onde sai a autenticacao. */
/* Cor propria, nao a da raridade EXCLUSIVE: um botao nao e uma raridade, e
   com a variavel compartilhada mexer na paleta de categorias mudava este
   botao junto, sem ninguem pedir. */
.acao.acao-entrar-bots { background: var(--acao-bots); border-color: var(--acao-bots); color: #14101c; font-weight: 700; }
.acao.acao-entrar-bots:hover { filter: brightness(1.1); }

/* "seguir": marca a sala como alvo e o kd-seguir teleporta pelo proprio jogo.
   E o caminho que funciona com o Voltz aberto, entao ganha o maior destaque. */
.acao.acao-seguir { background: var(--ok, #4ade80); border-color: var(--ok, #4ade80); color: #06210f; font-weight: 700; }
.acao.acao-seguir:hover { filter: brightness(1.1); }
.acao.acao-seguir:disabled { opacity: .6; cursor: default; }

/* Chips de categoria. Cor propria porque sao um recorte ORTOGONAL aos outros
   chips: "Secret" e "Com FX" podem estar ligados ao mesmo tempo, e misturar
   os dois grupos visualmente confundiria. */
/* Chips de categoria: derivam da MESMA variavel de raridade dos cartoes, em
   vez de repetirem hex proprio. Quando a paleta mudou (SECRET de rosa para
   dourado, MYTHIC de laranja para vermelho), estes tres ficariam discordando
   do resto do site — era o defeito de ter duas fontes para a mesma cor.
   Desligado o chip mostra so a cor na borda; ligado ele se acende, sem virar
   bloco solido que grita mais que o conteudo. */
.chip[class*="cat-"] { border-color: color-mix(in srgb, var(--cor-chip) 40%, #22222a); }
.chip[class*="cat-"]:hover { color: var(--cor-chip); }
.chip[class*="cat-"].on {
  color: var(--cor-chip);
  border-color: color-mix(in srgb, var(--cor-chip) 65%, transparent);
  background: color-mix(in srgb, var(--cor-chip) 16%, #131317);
}
.chip.cat-secret    { --cor-chip: var(--c-secret); }
.chip.cat-exclusive { --cor-chip: var(--c-exclusive); }
.chip.cat-mythic    { --cor-chip: var(--c-mythic); }

/* ════════════════════════════════════════════════════════════
   PASSE DE DESIGN — icones, hierarquia e respiro
   ════════════════════════════════════════════════════════════ */

/* Icones. SVG herda a cor do texto, entao um so arquivo serve para todos os
   estados (ativo, hover, desabilitado) sem variante de asset. O alinhamento
   otico pede um empurrao de 1px: o traco fica visualmente alto no meio da
   linha de texto. */
.ic { flex-shrink: 0; vertical-align: -2px; }
.nav button .ic { opacity: .65; transition: opacity .15s; }
.nav button:hover .ic,
.nav button.on .ic { opacity: 1; }


/* Botoes com icone: o gap so existe quando ha icone, entao nao mexe nos
   botoes de texto puro. */
.btn, .acao { display: inline-flex; align-items: center; gap: 6px; }
.btn .ic, .acao .ic { opacity: .8; }
.btn:hover .ic, .acao:hover .ic { opacity: 1; }

/* Chips: altura consistente com os botoes e transicao curta. */
.chip { transition: background .15s, border-color .15s, color .15s; }

/* Foco visivel por teclado, sem poluir o clique do mouse. */
.chip:focus-visible, .btn:focus-visible, .acao:focus-visible,
.nav button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Modal: cabecalho com avatar, e a documentacao longa recolhida. Antes o
   texto explicando os dois modos de entrada ocupava mais espaco que os dados
   do jogador. */
.perfil-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.perfil-topo .avatar-g { width: 56px; height: 56px; border-radius: 14px;
  background: var(--inset); border: 1px solid var(--line); object-fit: cover; flex-shrink: 0; }
.perfil-topo h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.perfil-topo .sub { font-size: 12px; color: var(--text-faint); margin-top: 2px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ajuda { margin-top: 10px; }
.ajuda > summary { cursor: pointer; font-size: 12px; color: var(--text-faint);
  list-style: none; user-select: none; }
.ajuda > summary::-webkit-details-marker { display: none; }
.ajuda > summary::before { content: '▸ '; }
.ajuda[open] > summary::before { content: '▾ '; }
.ajuda > summary:hover { color: var(--text-dim); }
.ajuda .hint { margin-top: 8px; }

/* ── pendentes ─────────────────────────────────────────────
   A contagem de aparicoes vira o primeiro elemento da linha: e o que decide
   a ordem de cadastro. Uma faca vista 1.400 vezes importa mais que uma vista
   3 vezes, e antes esse numero estava perdido no meio do texto cinza. */
.unknown-row .vezes {
  flex: none; min-width: 46px; text-align: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 7px; padding: 6px 4px;
}

/* Vazio aqui e boa noticia, nao falha. O estilo diz isso. */
.vazio-bom {
  border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--line));
  background: color-mix(in srgb, var(--ok) 6%, var(--inset));
  border-radius: var(--r-md); padding: 16px 18px;
}
.vazio-bom b { display: block; font-size: 13.5px; color: var(--ok); }
.vazio-bom span { display: block; margin-top: 5px; font-size: 12px;
  color: var(--text-dim); line-height: 1.55; max-width: 52ch; }

/* Scripts usam a paleta e os controles existentes, com dialogo nativo acessivel. */
.script-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.scripts-dialog {
  width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 36px);
  overflow: auto; padding: 26px; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: 0 20px 70px #0009;
}
.scripts-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.scripts-dialog h2 { margin: 0 35px 12px 0; }
.scripts-dialog .hint { margin: 9px 0; overflow-wrap: anywhere; }
.scripts-dialog .script-field {
  display: flex; flex-direction: column; gap: 6px; margin: 12px 0;
  color: var(--text-dim); font-size: 12px;
}
.scripts-dialog select, .scripts-dialog textarea {
  width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--text); background: var(--inset);
}
.scripts-dialog textarea { font: 12px/1.6 Consolas, monospace; resize: vertical; }
.scripts-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scripts-status { font-size: 12px; color: var(--accent); overflow-wrap: anywhere; }
.scripts-status:empty { display: none; }
@media (max-width: 640px) {
  .script-actions { flex-shrink: 1; }
  .script-actions .btn { flex: 1; }
  .scripts-dialog { padding: 20px; }
}

/* A escolha pertence ao navegador; varias contas podem seguir simultaneamente. */
.seguir-config { flex: 1; min-width: 0; }
.seguir-conta-label { display: block; margin: 10px 0 5px; font-size: 12px; font-weight: 650; }
.seguir-conta {
  width: min(100%, 360px); min-height: 38px; padding: 8px 10px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); font: inherit; font-size: 13px;
}
.seguir-conta:focus-visible { outline: 2px solid var(--ok, #4ade80); outline-offset: 2px; }
.seguir-local .seguir-conta-status { margin-top: 7px; }
.seguir-conta-status[data-estado="pronto"] { color: var(--ok, #4ade80); }
@media (max-width: 640px) { .seguir-conta { width: 100%; } }