/* Hallmark · genre: Grand-Line-Atlas · theme: light-turquoise · design-system: design.md · designed-as-app
 * pre-emit critique: P5 H4 E4 S4 R4 V4
 * OPTCG Cloud — sistema de design compartilhado. Todas as páginas leem este arquivo.
 */

/* ============================ TOKENS ============================ */
:root {
  /* superfícies / tinta (quase-branco com toque de azul-mar) */
  --color-paper:      oklch(98% 0.008 205);
  --color-paper-2:    oklch(95% 0.022 195);
  --color-paper-3:    oklch(91% 0.026 195);
  --color-ink:        oklch(22% 0.02 235);
  --color-ink-2:      oklch(46% 0.02 220);
  --color-ink-3:      oklch(64% 0.015 215);
  --color-rule:       oklch(91% 0.014 195);
  --color-rule-2:     oklch(85% 0.02 195);

  /* acento turquesa (único) + dourado (reservado pro glifo de preço) */
  --color-accent:      oklch(64% 0.11 200);
  --color-accent-2:    oklch(53% 0.11 200);
  --color-accent-ink:  oklch(99% 0 0);
  --color-accent-wash: oklch(94% 0.025 195);
  --color-focus:       oklch(64% 0.11 200);
  --color-gold:        oklch(70% 0.12 75);

  /* semânticos — separados do acento e do dourado, nunca competem com eles */
  --color-ok:          oklch(62% 0.13 155);
  --color-ok-wash:     oklch(94% 0.035 155);
  --color-warn:        oklch(66% 0.12 70);
  --color-warn-wash:   oklch(94% 0.045 82);
  --color-danger:      oklch(58% 0.18 27);
  --color-danger-wash: oklch(94% 0.035 27);

  /* cores-de-carta One Piece (borda esquerda / chip funcional) — inalteradas, são o jogo */
  --c-red:    oklch(58% 0.19 27);
  --c-green:  oklch(58% 0.14 150);
  --c-blue:   oklch(58% 0.15 250);
  --c-purple: oklch(52% 0.16 300);
  --c-black:  oklch(38% 0.02 260);
  --c-yellow: oklch(80% 0.14 90);

  /* tipografia */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-xs: 0.75rem;  --text-sm: 0.8125rem; --text-md: 0.9375rem;
  --text-lg: 1.0625rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --text-display: clamp(1.9rem, 3vw + 0.5rem, 2.75rem);

  /* espaçamento 4pt */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem;  --space-xs: 0.75rem;
  --space-sm:  1rem;    --space-md:  1.5rem;  --space-lg: 2rem;
  --space-xl:  3rem;    --space-2xl: 4.5rem;  --space-3xl: 7rem;

  /* raios / sombras / réguas — cantos maiores, sombra difusa tintada (não cinza) */
  --radius-input: 12px; --radius-card: 20px; --radius-pill: 999px; --radius-chip: 8px;
  --radius-shell: 26px;
  --shadow-sm: 0 1px 2px oklch(22% 0.02 235 / 0.06);
  --shadow-md: 0 8px 24px -6px oklch(22% 0.02 235 / 0.10), 0 2px 6px oklch(22% 0.02 235 / 0.05);
  --shadow-lg: 0 24px 60px -12px oklch(64% 0.11 200 / 0.22), 0 4px 14px oklch(22% 0.02 235 / 0.06);
  --rule-hair: 1px solid var(--color-rule);

  /* motion — assentamento rápido sem ricochete (critically-damped), não ease-in-out genérico */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;

  --nav-h: 58px;
  --content-max: 1400px;
}

/* ============================ RESET / BASE ============================ */
* { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
/* A regra nativa do navegador que esconde o conteúdo de um <details>
   fechado é de origem "user agent", a mais fraca da cascata — QUALQUER
   regra de autor que declare display em um filho (mesmo um seletor de
   classe única, baixa especificidade) já basta pra vencer e deixar o
   conteúdo visível o tempo todo, por cima do que vem depois na página.
   Isso já causou bug real (formulário "Editar nome" sempre visível,
   sobrepondo a grade de cartas). Rede de segurança pra todo <details> do
   site, não só os que já foram corrigidos individualmente. */
details:not([open]) > *:not(summary) { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
/* lavagem radial sutil, tom mar + um toque de dourado — profundidade sem
   virar textura de papel. Fixo, atrás de tudo, sem pointer-events. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 15% -10%, color-mix(in oklab, var(--color-accent) 9%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 20%, color-mix(in oklab, var(--color-gold) 8%, transparent), transparent 60%);
}
nav, main, footer { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; font-style: normal; letter-spacing: -0.02em; line-height: 1.1; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 3px; }

/* ============================ NAV (chrome) ============================ */
/* pílula flutuante em vidro — não colada no topo, com respiro acima, igual
   ao mockup aprovado. .topnav fica full-width/sticky só pra segurar a
   posição; quem tem a cara de pílula é o .topnav-inner. */
.topnav {
  position: sticky; top: 0; z-index: 40; padding: 14px clamp(var(--space-sm), 3vw, var(--space-lg)) 0;
}
.topnav-inner {
  display: flex; align-items: center; gap: var(--space-md);
  height: 60px; padding: 0 10px 0 18px; max-width: var(--content-max); margin: 0 auto;
  background: color-mix(in oklab, var(--color-paper) 72%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid color-mix(in oklab, var(--color-rule) 90%, transparent);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
}
.topnav .wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -0.02em; color: var(--color-ink); display: inline-flex; align-items: center; gap: 10px;
}
.topnav .wordmark:hover { text-decoration: none; }
.topnav .wordmark .dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-wash);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: none;
}
.topnav .wordmark .dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
}
/* Destaque do "AI" no nome da marca (Grand LAIne) — usado no wordmark da
   nav e em qualquer outra menção soletrada do nome (ex: hero do scanner). */
.ai { color: var(--color-accent); }
.topnav .nav-links { display: flex; align-items: center; gap: 2px; margin-left: 6px; flex-wrap: wrap; }
.topnav .nav-links a {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2);
  padding: 9px 15px; border-radius: var(--radius-pill); line-height: 1;
  white-space: nowrap; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.topnav .nav-links a:hover { background: var(--color-paper-3); color: var(--color-ink); text-decoration: none; }
.topnav .nav-links a.active { color: var(--color-accent-2); background: var(--color-accent-wash); }

/* Área de usuário na nav (login/logout) */
.nav-user { display: flex; align-items: center; gap: var(--space-2xs); margin-left: auto; padding-left: var(--space-xs); }
.nav-username {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  color: var(--color-ink-2); white-space: nowrap;
  text-decoration: none; transition: color var(--dur) var(--ease-out);
}
.nav-username:hover { color: var(--color-accent-2); }
.btn-nav-login {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-ink);
  background: var(--color-accent); padding: 7px 16px; border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease-out);
}
.btn-nav-login:hover { background: var(--color-accent-2); text-decoration: none; }
.btn-nav-logout {
  background: none; border: none; cursor: pointer;
  font-size: var(--text-md); color: var(--color-ink-3); padding: 4px 8px;
  border-radius: var(--radius-chip); line-height: 1;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.btn-nav-logout:hover { color: var(--color-danger); background: var(--color-danger-wash); }

/* ============================ LAYOUT ============================ */
main { padding: var(--space-lg) clamp(var(--space-sm), 3vw, var(--space-xl)) var(--space-2xl); max-width: var(--content-max); margin: 0 auto; }
main.narrow { max-width: 760px; }

/* cabeçalho de página (eyebrow + título) */
.page-head { margin-bottom: var(--space-lg); }
.page-head .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-3); display: block; margin-bottom: var(--space-2xs); }
/* Link "voltar" no topo das páginas de detalhe — antes era texto discreto
   dentro de .eyebrow (mono, minúsculo, cor apagada), quase invisível como
   algo clicável. Agora tem cara de botão de verdade. */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-2); text-decoration: none;
  padding: 6px 14px; margin-bottom: var(--space-sm);
  border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.back-link:hover { background: var(--color-accent-wash); border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.page-head h1 { font-size: var(--text-2xl); }
.page-head .sub { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: 6px; }

/* ============================ HERO (index) ============================ */
.hero { padding: 12px 0 8px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-2);
  background: var(--color-accent-wash); padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.hero-title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -0.03em; line-height: 1; color: var(--color-ink); text-wrap: balance; max-width: 16ch;
}
.hero-title em { font-style: normal; color: var(--color-accent); }
.hero-sub { font-size: var(--text-md); color: var(--color-ink-2); max-width: 52ch; margin-top: 12px; line-height: 1.55; }

/* ============================ BUSCA (index) ============================ */
.search-shell {
  margin: 24px 0 var(--space-lg); padding: 6px; background: var(--color-paper-2); border-radius: 22px;
  box-shadow: inset 0 1px 2px oklch(64% 0.11 200 / 0.06);
}
.search-core {
  background: var(--color-paper); border-radius: 16px; box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1fr auto; align-items: center; overflow: hidden;
}
.search-core input[type=search] {
  border: none; outline: none; background: transparent; font-size: 1rem;
  padding: 16px 20px; border-radius: 0;
}
.search-core button {
  display: flex; align-items: center; gap: 8px; margin: 6px; padding: 11px 8px 11px 18px;
}
.icon-chip {
  width: 24px; height: 24px; border-radius: 50%; background: oklch(99% 0 0 / 0.22);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out);
}
button:hover .icon-chip { transform: translate(2px, -1px); }
.filterrow { padding: 10px 8px 2px; }

.meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); margin-bottom: var(--space-md); letter-spacing: 0.04em; }
h2 { font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--color-ink); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============================ BOTÕES / INPUTS ============================ */
button, .btn {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
  padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink); cursor: pointer;
  line-height: 1.1; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
button:hover, .btn:hover { background: var(--color-accent-2); }
/* pressiona de verdade (resposta no toque, não um deslize de 1px de SaaS) */
button:active, .btn:active { transform: scale(0.97); }
button:disabled { opacity: .6; cursor: wait; }
button.ghost, .btn.ghost { background: transparent; color: var(--color-ink-2); border-color: var(--color-rule); }
button.ghost:hover, .btn.ghost:hover { background: var(--color-paper-3); color: var(--color-ink); }
button.ghost.danger, .btn.ghost.danger { color: var(--color-danger); }
button.ghost.danger:hover, .btn.ghost.danger:hover { background: var(--color-danger-wash); color: var(--color-danger); }

input, select, textarea {
  font-family: var(--font-body); font-size: var(--text-md); color: var(--color-ink);
  padding: 9px 11px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-input);
  background: var(--color-paper); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--color-ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-wash); }
input[type=search] { font-size: 1rem; }
label { font-size: var(--text-xs); color: var(--color-ink-2); }

/* ============================ SURFACES / CARDS ============================ */
/* .panel é o tratamento SECUNDÁRIO por padrão (hairline só, sem sombra) —
   antes toda seção da tela (preço, mover carta, arquivar) usava o mesmíssimo
   cartão com sombra, sem hierarquia nenhuma entre o que é dado importante e
   o que é ação de apoio. Dado primário (preço) usa .ci-liga.panel abaixo,
   com moldura dupla — só ele ganha esse destaque. */
.panel, .scanbox, .adminbox {
  background: var(--color-paper); border: var(--rule-hair); border-radius: var(--radius-card);
  padding: var(--space-md); margin-bottom: var(--space-lg);
}
/* double-bezel — moldura externa com leve gradiente do acento envolvendo um
   núcleo branco com brilho interno ("hardware", não formulário). Só o
   painel de preço ganha esse tratamento — é o dado que de fato importa
   nessa tela. .ci-liga.panel é a casca; .liga-panel (já filho direto no
   HTML) é o núcleo — não precisou de nenhum wrapper novo no template. */
.ci-liga.panel {
  background: linear-gradient(160deg, var(--color-accent-wash), var(--color-paper-2));
  border: none; border-radius: var(--radius-shell); padding: 7px; box-shadow: var(--shadow-lg);
}
.ci-liga.panel .lbl { margin: 4px 0 2px 7px; }

/* ============================ TAGS / BADGES ============================ */
.tag {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  background: var(--color-paper-3); color: var(--color-ink-2); padding: 3px 8px;
  border-radius: var(--radius-chip); vertical-align: middle; letter-spacing: 0.04em;
  border: 1px solid var(--color-rule); text-transform: none; white-space: nowrap;
}
.tag.warn { background: var(--color-warn-wash); color: oklch(45% 0.11 70); border-color: transparent; }
.tag.variant { background: var(--color-accent-wash); color: var(--color-accent-2); border-color: transparent; }
.tag.photo { background: var(--color-accent-wash); color: var(--color-accent-2); border-color: transparent; }
.tag.ok { background: var(--color-ok-wash); color: oklch(40% 0.11 152); border-color: transparent; }

/* ============================ BANNERS ============================ */
.banner { margin-top: var(--space-xs); border-radius: var(--radius-input); padding: 10px 13px; font-size: var(--text-sm); border: 1px solid transparent; }
.banner.error  { background: var(--color-danger-wash); border-color: oklch(85% 0.06 27); color: oklch(42% 0.16 27); }
.banner.ok     { background: var(--color-ok-wash);     border-color: oklch(85% 0.06 152); color: oklch(38% 0.12 152); }
.banner.warn2  { background: var(--color-warn-wash);   border-color: oklch(85% 0.07 82); color: oklch(42% 0.10 70); }
.toast-stack {
  position: fixed; left: 50%; bottom: var(--space-lg); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  transform: translateX(-50%); pointer-events: none; max-width: min(420px, calc(100vw - 32px));
}
.banner.toast {
  margin-top: 0; box-shadow: var(--shadow-md); cursor: pointer; pointer-events: auto;
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.banner.toast.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .banner.toast { transition-duration: 0.01ms; transform: none; }
}

/* ============================ CATÁLOGO — grade de cartas ============================ */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-xs); }
.cards-grid .card { margin-bottom: 0; }
.card {
  background: var(--color-paper); border: var(--rule-hair); border-left: 4px solid var(--c-black);
  border-radius: var(--radius-card); padding: 13px 15px; margin-bottom: var(--space-xs);
  display: flex; gap: 13px; align-items: center; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }
.card.Red { border-left-color: var(--c-red); }
.card.Green { border-left-color: var(--c-green); }
.card.Blue { border-left-color: var(--c-blue); }
.card.Purple { border-left-color: var(--c-purple); }
.card.Yellow { border-left-color: var(--c-yellow); }
.card .body { flex: 1; min-width: 0; }
.thumb { width: 60px; border-radius: 5px; flex-shrink: 0; }
.thumb.zoomable { cursor: zoom-in; }
.code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); letter-spacing: 0.04em; }
.name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; margin: 2px 0; }
.info { font-size: var(--text-sm); color: var(--color-ink-2); }
.power { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.power strong { font-size: 1.25rem; display: block; color: var(--color-ink); }
.power span { font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-ink-3); }

.empty { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--color-ink-2); }
.empty strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); margin-bottom: 6px; }

/* preço + variações da Liga no card de resultado */
.liga-price { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; color: var(--color-accent-2); margin-top: 5px; }
.liga-price .lp-lbl { display: block; font-family: var(--font-body); font-size: 0.625rem; font-weight: 400; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.varexp { margin-top: 6px; }
.varexp > summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); cursor: pointer; list-style: none; }
.varexp > summary::-webkit-details-marker { display: none; }
.varexp > summary::before { content: '▸ '; }
.varexp[open] > summary::before { content: '▾ '; }
.varlist { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-left: 4px; }
.varrow { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-xs); padding: 3px 0; border-bottom: 1px dashed var(--color-rule); }
.varrow .vr-code { font-family: var(--font-mono); color: var(--color-ink); flex: 1; min-width: 0; }
.varrow .vr-ed { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); }
.varrow .vr-price { font-family: var(--font-mono); font-weight: 600; color: var(--color-accent-2); }
.varrow a { font-size: 0.625rem; }

/* detalhes da carta (puxados do banco internacional pelo vínculo) */
.detexp { margin-top: 6px; }
.detexp > summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); cursor: pointer; list-style: none; }
.detexp > summary::-webkit-details-marker { display: none; }
.detexp > summary::before { content: '▸ '; }
.detexp[open] > summary::before { content: '▾ '; }
.detgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px 12px; margin: 8px 0; padding: 8px 10px; background: var(--color-paper-2); border-radius: var(--radius-input); }
.detgrid .dt-wide { grid-column: 1 / -1; }
.detgrid .dt-k { display: block; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-3); }
.detgrid .dt-v { font-size: var(--text-sm); color: var(--color-ink); }
.dt-effect { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink); background: var(--color-paper-2); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-input) var(--radius-input) 0; padding: 8px 10px; margin-bottom: 6px; }
.dt-trigger { font-size: var(--text-xs); color: var(--color-ink-2); margin-bottom: 6px; }
.dt-src { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-ink-3); letter-spacing: 0.04em; }
.dt-nolink { font-size: var(--text-xs); color: oklch(45% 0.11 70); background: var(--color-warn-wash); border-radius: var(--radius-input); padding: 8px 10px; }

/* ===== resultados da busca: clusters por cor + card + modal ===== */
.cluster { margin-bottom: var(--space-lg); }
/* divisor de seção em linha pontilhada — não é mais um título com underline
   grosso genérico, cada seção lê como um trecho de rota entre dois pontos. */
.cluster-hdr {
  display: flex; align-items: baseline; gap: 12px; font-size: var(--text-md);
  text-transform: none; letter-spacing: -0.01em; color: var(--color-ink);
  border-bottom: none; padding-bottom: 0; margin-bottom: var(--space-sm);
}
.cluster-hdr::after {
  content: ''; flex: 1; height: 1px; align-self: center; margin-left: 4px;
  background: repeating-linear-gradient(90deg, var(--color-rule-2) 0 6px, transparent 6px 11px);
}
.rescard {
  display: flex; gap: 13px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); padding: 12px 14px; cursor: pointer;
  font-family: var(--font-body); color: var(--color-ink); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.rescard:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px) scale(1.015); border-color: var(--color-rule-2); }
.rescard:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rc-thumb { flex-shrink: 0; position: relative; width: 72px; }
.rc-thumb .thumb { width: 72px; border-radius: var(--radius-input); display: block; }
/* selo de cor — substitui a faixa lateral genérica: um chip sobre a arte,
   como um marcador de lote, não uma borda de formulário. */
.color-chip {
  position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; border-radius: 50%;
  box-shadow: 0 0 0 2px oklch(99% 0 0 / 0.85), var(--shadow-sm);
}
.color-chip.Red { background: var(--c-red); } .color-chip.Green { background: var(--c-green); }
.color-chip.Blue { background: var(--c-blue); } .color-chip.Purple { background: var(--c-purple); }
.color-chip.Black { background: var(--c-black); } .color-chip.Yellow { background: var(--c-yellow); }
.rarity-pill {
  position: absolute; top: 5px; right: 5px; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700;
  background: oklch(22% 0.02 235 / 0.72); color: #fff; padding: 1px 5px; border-radius: var(--radius-chip);
  backdrop-filter: blur(2px);
}
.liga-link {
  position: absolute; left: 5px; bottom: 5px; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600;
  color: var(--color-accent-2); background: oklch(99% 0 0 / 0.88); padding: 1px 6px; border-radius: var(--radius-chip);
  letter-spacing: 0.03em;
}
.liga-link:hover { text-decoration: underline; }
.hit-badge {
  position: absolute; right: 5px; bottom: 5px; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700;
  background: oklch(85% 0.15 85 / 0.92); color: oklch(28% 0.08 60); padding: 1px 6px; border-radius: var(--radius-chip);
  letter-spacing: 0.02em;
}
.rc-body { flex: 1; min-width: 0; align-self: center; }
.rc-body .code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); letter-spacing: 0.04em; }
.rc-body .name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.015em; margin: 2px 0; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liga-price { white-space: nowrap; margin-top: 0; display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-accent-2); }
.liga-price-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.liga-price-row .liga-price:empty::before { content: '—'; color: var(--color-ink-3); font-weight: 400; }
.liga-refresh-btn.sm { width: 22px; height: 22px; font-size: 11px; }

/* modal de detalhes da carta */
/* ============================ MODAL DE DETALHE DA CARTA ============================
   Reconstruído do zero (não é o quadro escuro + tabela 2 colunas de antes):
   cabeçalho com o mesmo gradiente do double-bezel do preço (linguagem
   visual única pra "conteúdo importante" em todo o app), estatísticas como
   fichas/chips soltas em vez de tabela de planilha, efeito da carta como
   citação com aspas de verdade, variações como pastilhas escolhíveis. */
.cardmodal {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: oklch(22% 0.02 235 / 0.5); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.cardmodal.open { display: flex; }
.cm-box {
  background: var(--color-paper); border-radius: var(--radius-shell); max-width: 840px; width: 100%;
  max-height: 94vh; overflow-y: auto; box-shadow: var(--shadow-lg); position: relative;
}
.cm-close {
  position: absolute; top: 14px; right: 14px; background: color-mix(in oklab, var(--color-ink) 55%, transparent);
  color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 15px; line-height: 1;
  padding: 0; cursor: pointer; z-index: 2; transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.cm-close:hover { background: var(--color-ink); transform: scale(1.08); }
.cm-close:active { transform: scale(0.94); }
.cm-head {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-accent-ink); padding: 22px 26px 20px; border-radius: var(--radius-shell) var(--radius-shell) 0 0;
  position: relative; overflow: hidden;
}
.cm-head::after {
  /* onda sutil no rodapé do cabeçalho — o único lugar do app com esse
     motivo, marca a área como "isto é o cabeçalho de destaque", não decora
     à toa em todo canto. */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px;
  background: var(--color-paper);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,4 Q10,10 20,4 T40,4 T60,4 T80,4 T100,4 V10 H0 Z'/></svg>") bottom/100% 100% repeat-x;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,4 Q10,10 20,4 T40,4 T60,4 T80,4 T100,4 V10 H0 Z'/></svg>") bottom/100% 100% repeat-x;
}
.cm-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; opacity: .85; }
.cm-head h2 { color: var(--color-accent-ink); font-size: var(--text-2xl); margin-top: 3px; letter-spacing: -0.02em; }
/* cabeçalho do modal na cor da própria carta (setado via JS em openCard) —
   sem classe .mh-*, cai no gradiente turquesa padrão acima. */
.cm-head.mh-Red    { background: linear-gradient(135deg, var(--c-red), oklch(42% 0.18 27)); }
.cm-head.mh-Green   { background: linear-gradient(135deg, var(--c-green), oklch(40% 0.13 150)); }
.cm-head.mh-Blue   { background: linear-gradient(135deg, var(--c-blue), oklch(40% 0.14 250)); }
.cm-head.mh-Purple { background: linear-gradient(135deg, var(--c-purple), oklch(36% 0.15 300)); }
.cm-head.mh-Black  { background: linear-gradient(135deg, var(--c-black), oklch(20% 0.02 260)); }
.cm-head.mh-Yellow { background: linear-gradient(135deg, var(--c-yellow), oklch(64% 0.13 90)); color: oklch(24% 0.03 90); }
.cm-head.mh-Yellow h2 { color: oklch(24% 0.03 90); }
.cm-hit-badge {
  display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  background: oklch(85% 0.15 85 / 0.92); color: oklch(28% 0.08 60); padding: 3px 10px; border-radius: var(--radius-pill);
}
.cm-cols { display: flex; gap: var(--space-lg); padding: 22px var(--space-lg) var(--space-lg); flex-wrap: wrap; }
.cm-left { flex: 0 0 260px; max-width: 100%; }
.cm-left #cm-img {
  width: 100%; border-radius: 16px; cursor: zoom-in; box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out);
}
.cm-left #cm-img:hover { transform: scale(1.02); }
.cm-add-list-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cm-add-list-form .listsel, .cm-add-list-form .newlist { width: 100%; font-size: var(--text-sm); font-family: var(--font-mono); }
.cm-add-list-form button { width: 100%; }
.cm-alert-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cm-alert-phone-row { display: flex; gap: 6px; }
.cm-alert-phone-row input { flex: 1; min-width: 0; }
.cm-right { flex: 1 1 340px; min-width: 260px; }
/* fichas soltas em vez de linhas de tabela — cada estatística é seu próprio
   cartão pequeno, lê como um "hand" de peças, não uma planilha. */
/* grid fixo de 3 colunas em vez de flex-wrap — com 6 fichas (custo/
   atributo/poder/counter/cor/raridade), flex-wrap deixava a 6ª (raridade)
   sozinha numa linha nova sempre que a largura não cabia as 6 juntas, sem
   alinhar com nada acima — um grid de 3 colunas garante 2 linhas de 3
   sempre alinhadas, em qualquer largura de tela. */
.cm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--space-md); border: none; }
.cm-st {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  background: var(--color-paper-2); border-radius: var(--radius-input); min-width: 0;
  border: none;
}
.cm-k { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.cm-v { font-family: var(--font-mono); font-weight: 700; color: var(--color-ink); font-size: var(--text-md); }
.cm-block { margin-bottom: var(--space-sm); }
.cm-blk-k { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); margin-bottom: 5px; }
.cm-blk-v { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink); }
.cm-blk-k { display: flex; align-items: center; gap: 8px; }
.cm-blk-lang { font-size: 0.5625rem; background: var(--color-paper-3); color: var(--color-ink-3); border: 1px solid var(--color-rule); border-radius: var(--radius-chip); padding: 0 5px; letter-spacing: 0.06em; }
.cm-tr-btn { margin-left: auto; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-accent-2); background: var(--color-accent-wash); border: none; border-radius: var(--radius-pill); padding: 3px 12px; cursor: pointer; }
.cm-tr-btn:hover { background: color-mix(in oklab, var(--color-accent-wash) 60%, var(--color-accent)); }
.cm-tr-btn:disabled { opacity: .6; cursor: wait; }
/* efeito da carta como citação — aspas de verdade em vez de uma barrinha
   colorida na lateral igual a todo blockquote genérico de admin dashboard. */
.cm-effect {
  background: var(--color-paper-2); border-radius: var(--radius-input); padding: 16px 18px 14px;
  white-space: pre-line; position: relative; font-size: var(--text-sm); line-height: 1.55;
}
.cm-effect::before {
  content: '\201C'; position: absolute; top: -4px; left: 10px; font-family: var(--font-display);
  font-size: 2.6rem; font-weight: 800; color: var(--color-accent); opacity: 0.35; line-height: 1;
}
.cm-effect-pt { background: var(--color-ok-wash); margin-top: 6px; }
.cm-effect-pt::before { color: var(--color-ok); }
/* variações — pastilhas escolhíveis lado a lado, não linhas de lista */
.cm-vars { display: flex; flex-wrap: wrap; gap: 7px; }
.cm-varrow {
  display: flex; gap: 7px; align-items: baseline; font-size: var(--text-xs);
  padding: 7px 12px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-paper); transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.cm-varrow:hover { background: var(--color-paper-3); transform: translateY(-1px); }
.cm-varrow.active { background: var(--vr-active-color, var(--color-accent)); border-color: var(--vr-active-color, var(--color-accent)); }
.cm-varrow.active .vr-code, .cm-varrow.active .vr-ed, .cm-varrow.active .vr-price { color: var(--color-accent-ink); }
.cm-varrow .vr-code { font-family: var(--font-mono); font-weight: 600; }
.cm-varrow .vr-ed { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); }
.cm-varrow .vr-price { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent-2); }
.cm-varrow.active .vr-price { color: var(--color-accent-ink); }
.cm-varrow .vr-open { color: var(--color-ink-3); text-decoration: none; padding: 0 2px; }
.cm-varrow .vr-open:hover { color: var(--color-accent); }
.cm-src { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); margin-top: var(--space-sm); letter-spacing: 0.03em; }
.cm-src:empty { display: none; margin-top: 0; }
@media (max-width: 640px) { .cm-left { flex-basis: 100%; } }

/* ============================ SCAN: busca + filtros ============================ */
.searchpanel { margin-bottom: var(--space-lg); }
.searchrow { display: flex; gap: var(--space-2xs); }
.searchrow input[type=search] { flex: 1; }
.filterrow { display: flex; gap: var(--space-2xs); margin-top: var(--space-2xs); flex-wrap: wrap; }
.filterrow select { flex: 1; min-width: 130px; font-family: var(--font-mono); font-size: var(--text-xs); }

/* scan box */
.scanform, .adminform { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; margin-top: var(--space-3xs); }
.scanform input[type=file] { flex: 1; min-width: 200px; font-size: var(--text-sm); font-family: var(--font-body); padding: 8px; border: 1px dashed var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper-2); }
/* fotos acumuladas antes de mandar ler — miniaturas com botão de remover,
   pra revisar o que já foi escolhido antes de disparar o reconhecimento. */
.scan-photos-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.scan-photos-preview:empty { margin-top: 0; }
.scan-photo-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--radius-input); overflow: hidden; border: var(--rule-hair); box-shadow: var(--shadow-sm); }
.scan-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spt-rm {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: oklch(22% 0.02 235 / 0.75); color: #fff; border: none; font-size: 11px; line-height: 1;
  cursor: pointer; padding: 0;
}
.spt-rm:hover { background: var(--color-danger); }
.adminform input[type=password] { flex: 1; min-width: 160px; font-family: var(--font-mono); }
.scanstatus { display: none; margin-top: var(--space-xs); padding: 10px 12px; border-radius: var(--radius-input); background: var(--color-accent-wash); border: 1px solid oklch(85% 0.06 258); color: var(--color-accent-2); font-size: var(--text-sm); }
.scanstatus.active { display: block; }
.scanstatus::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid oklch(80% 0.05 258); border-top-color: var(--color-accent); border-radius: 50%; animation: scan-spin .8s linear infinite; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
.qnote { font-size: var(--text-xs); color: var(--color-ink-3); margin-top: 6px; }
.qnote strong { color: var(--color-ink-2); }

/* ============================ SCAN: lote + carrinho ============================ */
.batchbar { background: var(--color-accent-wash); color: var(--color-ink); border: 1px solid oklch(88% 0.05 258); border-radius: var(--radius-input); padding: 11px 14px; margin: var(--space-xs) 0; font-size: var(--text-sm); }
.batchbar strong { color: var(--color-accent-2); }

.batch-layout { display: flex; gap: var(--space-md); align-items: flex-start; }
.batch-cards { flex: 1 1 auto; min-width: 0; }
.cart {
  flex: 0 0 248px; position: sticky; top: calc(var(--nav-h) + 12px); align-self: flex-start;
  background: var(--color-paper); border: var(--rule-hair); border-radius: var(--radius-card);
  padding: var(--space-sm); box-shadow: var(--shadow-md);
}
.cart-hdr { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--color-ink-2); margin-bottom: var(--space-xs); }
.cart-items { display: flex; flex-direction: column; gap: 7px; max-height: 46vh; overflow-y: auto; margin-bottom: var(--space-xs); }
.cart-empty { font-size: var(--text-xs); color: var(--color-ink-3); font-style: italic; }
.cart-item { display: flex; gap: 8px; align-items: center; font-size: var(--text-xs); border-bottom: var(--rule-hair); padding-bottom: 6px; }
.cart-item img { width: 30px; height: 42px; object-fit: cover; border-radius: 3px; border: 1px solid var(--color-rule); flex-shrink: 0; }
.cart-item .ci-body { flex: 1; min-width: 0; }
.cart-item .ci-name { font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item .ci-sub { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); }
.cart-item .ci-price { font-family: var(--font-mono); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--color-rule-2); padding-top: 8px; margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.cart-total strong { font-family: var(--font-mono); font-size: 1.15rem; color: var(--color-accent-2); }
.cart-lbl, .cart-note { display: block; }
.cart-lbl { font-size: var(--text-xs); color: var(--color-ink-2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.cart .listsel, .cart .newlist { width: 100%; margin-bottom: 8px; font-size: var(--text-sm); }
.cart .savebatch { width: 100%; }
.cart-note { font-size: 0.625rem; color: var(--color-ink-3); margin-top: 8px; line-height: 1.5; }

.savebatch { font-size: var(--text-md); padding: 12px 22px; background: var(--color-ok); }
.savebatch:hover { background: oklch(50% 0.13 152); }
.listsel { font-family: var(--font-mono); }
.discardbtn { background: transparent; color: var(--color-danger); border: 1px solid oklch(85% 0.08 27); padding: 8px 12px; font-size: var(--text-xs); }
.discardbtn:hover { background: var(--color-danger-wash); }

/* linha detectada */
.detected { border: var(--rule-hair); border-radius: var(--radius-card); padding: var(--space-sm); margin-top: var(--space-sm); background: var(--color-paper-2); }
.detected.uncertain { background: var(--color-warn-wash); border-color: oklch(85% 0.07 82); }
.detected.discarded { opacity: .4; }
.detected.discarded .fields, .detected.discarded .variants { pointer-events: none; }
.dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dhead .name { font-family: var(--font-display); }
.hdr-liga { color: var(--color-ink-3); font-weight: normal; }
.hdr-ligacode { font-family: var(--font-mono); color: var(--color-accent-2); font-weight: 600; }

.scan-main { display: flex; gap: var(--space-sm); align-items: flex-start; margin: var(--space-xs) 0 2px; flex-wrap: wrap; }
.scan-left { flex: 0 0 auto; }
.scan-right { flex: 1 1 340px; min-width: 300px; }

/* variações da Liga */
.ligavars { padding: 0; background: transparent; border: none; }
.ligavars-hdr { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--color-ink-3); margin-bottom: var(--space-xs); }
.ligavars-hdr .lv-count { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); padding: 0 7px; font-size: 0.6875rem; }
.ligavars-grid { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.ligavar { cursor: pointer; text-align: center; width: 96px; border: 1.5px solid var(--color-rule-2); border-radius: var(--radius-input); padding: 5px; background: var(--color-paper); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.ligavar input { display: none; }
.ligavar:hover { border-color: var(--color-accent); }
.ligavar.sel { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-wash); }
.ligavar img { width: 76px; height: 106px; object-fit: cover; border-radius: 5px; border: 1px solid var(--color-rule); }
.ligavar .lv-noimg { width: 76px; height: 106px; display: flex; align-items: center; justify-content: center; background: var(--color-paper-3); border-radius: 5px; font-size: 0.625rem; color: var(--color-ink-3); }
.ligavar .lv-code { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink); word-break: break-all; }
.ligavar .lv-ed { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-ink-3); }
.ligavar .lv-price { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-2); }
.ligavar .lv-zoom { font-size: 0.5625rem; color: var(--color-accent); cursor: zoom-in; text-decoration: underline; }
.ligavar-detail { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: var(--rule-hair); }
.lvd-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lvd-price { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; color: var(--color-accent-2); }
.lvd-code { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-paper-3); color: var(--color-ink-2); padding: 2px 9px; border-radius: var(--radius-pill); }
.lvd-ed { margin-top: 4px; font-size: var(--text-xs); color: var(--color-ink-2); }
.lvd-edsigla { font-family: var(--font-mono); font-weight: 600; color: var(--color-ink); background: var(--color-paper-3); padding: 1px 7px; border-radius: var(--radius-chip); }
.lvd-link { display: inline-block; margin-top: 8px; color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; }

/* "não é essa carta" — busca Liga */
.ligasearch { margin: var(--space-2xs) 0 2px; padding: var(--space-xs); background: var(--color-paper); border: var(--rule-hair); border-radius: var(--radius-card); }
.ligasearch-bar { display: flex; gap: var(--space-2xs); }
.ligasearch-bar input { flex: 1; }
.ligasearch-results { margin-top: var(--space-2xs); display: flex; flex-direction: column; gap: 6px; }
.ls-msg { font-size: var(--text-xs); color: var(--color-ink-3); font-style: italic; padding: 4px 2px; }
.ls-hit { display: flex; align-items: center; gap: 10px; padding: 6px; border: var(--rule-hair); border-radius: var(--radius-input); cursor: pointer; background: var(--color-paper-2); transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.ls-hit:hover { background: var(--color-accent-wash); border-color: var(--color-accent); }
.ls-hit img, .ls-hit .ls-noimg { width: 40px; height: 56px; object-fit: cover; border-radius: 3px; }
.ls-hit .ls-noimg { background: var(--color-paper-3); display: inline-block; }
.ls-hit .ls-info { display: flex; flex-direction: column; gap: 1px; }
.ls-hit .ls-code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ok); }
.ls-hit .ls-n { font-size: var(--text-xs); color: var(--color-ink-3); }
.ls-suggests-hdr { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin-bottom: 6px; }
.ls-suggests { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-xs); }
.ls-or { font-size: var(--text-xs); color: var(--color-ink-3); margin: 4px 0 6px; font-style: italic; }
.altbtn { background: transparent; color: var(--color-ink-2); border: 1px solid var(--color-rule); padding: 6px 10px; font-size: var(--text-xs); margin-top: var(--space-2xs); }
.altbtn:hover { background: var(--color-paper-3); }

/* grid de alternativas (IA + Liga) — foco principal do "não é essa carta" */
.altgrid-hdr { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.altgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.altcardg {
  display: flex; gap: 9px; align-items: center; text-align: left;
  border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  padding: 8px; background: var(--color-paper); cursor: pointer; width: 100%;
  font-family: var(--font-body); color: var(--color-ink);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.altcardg:hover, .altcardg:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-wash); background: var(--color-paper); outline: none; }
.altcardg img, .altcardg .ac-noimg { width: 46px; height: 64px; object-fit: cover; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--color-rule); }
.altcardg .ac-noimg { background: var(--color-paper-3); display: flex; align-items: center; justify-content: center; font-size: 0.5625rem; color: var(--color-ink-3); }
.altcardg .ac-body { min-width: 0; flex: 1; }
.altcardg .ac-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.altcardg .ac-code { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-accent-2); margin: 1px 0 3px; }
.altcardg .ac-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.altcardg .ac-price { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink-2); }
.altcardg .ac-n { font-size: 0.625rem; color: var(--color-ink-3); }

/* bolinha de cor + badge de raridade (reutilizáveis) */
.color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; border: 1px solid oklch(0% 0 0 / 0.12); background: var(--color-ink-3); }
.color-dot.Red { background: var(--c-red); } .color-dot.Green { background: var(--c-green); }
.color-dot.Blue { background: var(--c-blue); } .color-dot.Purple { background: var(--c-purple); }
.color-dot.Black { background: var(--c-black); } .color-dot.Yellow { background: var(--c-yellow); }
.rarity-badge { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.04em; padding: 1px 5px; border-radius: var(--radius-chip); background: var(--color-paper-3); color: var(--color-ink-2); border: 1px solid var(--color-rule); }

/* busca por código/nome — agora secundária dentro do painel */
.ligasearch-secondary { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px dashed var(--color-rule); }
.ligasearch-secondary .ls-or { margin: 0 0 6px; }

/* campos editáveis */
.fields { display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: flex-end; margin-top: var(--space-xs); }
.fields label { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink-2); display: block; letter-spacing: 0.04em; }
.fields input { font-family: var(--font-mono); margin-top: 3px; }
.fields input.code-input { width: 130px; text-transform: uppercase; }
.fields input.qty-input { width: 76px; }
.fields input.warnfield { border-color: oklch(80% 0.09 82); background: var(--color-warn-wash); }

/* addform (adicionar à lista pela busca) */
.addform { display: flex; gap: 6px; margin-top: var(--space-2xs); flex-wrap: wrap; align-items: center; }
.addform select, .addform .newlist { padding: 6px 8px; font-size: var(--text-xs); font-family: var(--font-mono); }
.addform button { padding: 6px 12px; font-size: var(--text-xs); }
.addform .newlist { max-width: 140px; }

/* ============================ HISTÓRICO / RADAR ============================ */
.history { margin-top: var(--space-xl); }
.history h2 { border-bottom: 2px solid var(--color-rule); padding-bottom: 8px; }
.hrow { display: flex; gap: var(--space-xs); align-items: baseline; padding: 9px 4px; border-bottom: 1px dashed var(--color-rule); font-size: var(--text-sm); }
.hq { font-weight: 600; flex: 1; }
.hq small { font-family: var(--font-mono); color: var(--color-ink-3); font-weight: 400; }
.hr { color: var(--color-ink-2); font-size: var(--text-xs); }
.ht { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }
.radar .hq a { color: var(--color-ink); border-bottom: 1px dashed var(--color-rule); }
.radar .hq a:hover { border-bottom-color: var(--color-accent); text-decoration: none; }

/* foto + zoom */
.vphoto { cursor: zoom-in; text-align: center; }
.vphoto img { width: 140px; max-height: 200px; object-fit: contain; border-radius: 5px; border: 2px dashed var(--color-rule-2); display: block; }
.vname { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); display: block; margin-top: 3px; }
.zoomlink { display: block; font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-accent); cursor: zoom-in; text-decoration: underline; margin-top: 2px; }
#lightbox { display: none; position: fixed; inset: 0; background: oklch(25% 0.03 260 / 0.9); z-index: 60; align-items: center; justify-content: center; cursor: zoom-out; }
#lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: var(--shadow-lg); }

/* ============================ FOOTER ============================ */
footer.site { text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); padding: var(--space-lg); letter-spacing: 0.02em; line-height: 1.9; border-top: var(--rule-hair); margin-top: var(--space-xl); }
footer.site a { color: var(--color-ink-2); }

/* ============================ LISTAS ============================ */
.newform { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.newform input { flex: 1; min-width: 200px; }
.listcard { background: var(--color-paper); border: var(--rule-hair); border-left: 4px solid var(--color-accent); border-radius: var(--radius-card); padding: 14px 16px; margin-bottom: var(--space-2xs); display: flex; justify-content: space-between; align-items: center; color: var(--color-ink); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease-out); }
.listcard:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.listcard .name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.listcard .meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); margin: 3px 0 0; letter-spacing: 0; }
.count { text-align: right; font-family: var(--font-mono); }
.count strong { font-size: 1.35rem; display: block; color: var(--color-ink); }
.count span { font-size: 0.625rem; letter-spacing: 0.08em; color: var(--color-ink-3); }

/* detalhe da lista */
.item { background: var(--color-paper); border: var(--rule-hair); border-left: 4px solid var(--c-black); border-radius: var(--radius-card); padding: 12px 14px; margin-bottom: var(--space-2xs); display: flex; gap: var(--space-xs); align-items: center; box-shadow: var(--shadow-sm); }
.item.Red { border-left-color: var(--c-red); }
.item.Green { border-left-color: var(--c-green); }
.item.Blue { border-left-color: var(--c-blue); }
.item.Purple { border-left-color: var(--c-purple); }
.item.Yellow { border-left-color: var(--c-yellow); }
.item .thumb { width: 52px; }
.item .body { flex: 1; min-width: 0; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty form { display: inline; }
.qty .n { font-family: var(--font-mono); font-size: var(--text-lg); min-width: 28px; text-align: center; }
.qty button { padding: 4px 10px; font-size: var(--text-md); line-height: 1; }
.rm { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: var(--text-xs); text-decoration: underline; padding: 4px; }
.rm:hover { background: none; }
.toolbar { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-md); flex-wrap: wrap; align-items: flex-start; }
details.panel { padding: 12px 14px; }
summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); }
/* Gatilho "Editar nome/observações" no toolbar: antes usava .panel (feito
   pra cards de conteúdo — padding/raio/sombra/margem grandes, bem maiores
   que os botões vizinhos) e a regra genérica "summary" (fonte mono minúscula)
   — resultado eram 3 elementos de altura/estilo visivelmente diferentes na
   mesma fileira. Agora o gatilho tem sua própria classe, igual em tudo aos
   botões .btn.ghost ao lado (mesma fonte, padding, borda, raio, altura). */
.toolbar-edit { border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); }
.toolbar-edit > summary {
  list-style: none; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-2); padding: 10px 16px; line-height: 1.2;
}
.toolbar-edit > summary::-webkit-details-marker { display: none; }
.toolbar-edit > summary::before { content: '▸ '; }
.toolbar-edit[open] > summary::before { content: '▾ '; }
.toolbar-edit[open] { padding-bottom: var(--space-sm); }
.toolbar-edit .editform { padding: 0 14px; margin-top: 10px; }
/* .editform herda display:none dos filhos de <details> fechado do stylesheet
   do navegador (regra de tag, baixa especificidade) — um seletor de classe
   como ".editform { display: flex }" tem especificidade maior e ANULA essa
   regra nativa, deixando o formulário visível (e sobrepondo a grade de
   cartas abaixo) mesmo com o <details> fechado. Por isso o flex só entra
   quando [open] está presente. */
.toolbar-edit[open] .editform { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.editform input { flex: 1; min-width: 180px; }
.future { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); margin-top: var(--space-md); text-align: center; }

/* ============================ RESPONSIVO ============================ */
@media (max-width: 720px) {
  .batch-layout { flex-direction: column; }
  .cart { position: static; width: 100%; flex-basis: auto; }
  main { padding-left: var(--space-sm); padding-right: var(--space-sm); }

  /* Nav sem espaço pra tudo numa linha (Listas/Internacional/Bot/Admin/
     Backlog + usuário) — em vez de vazar pra fora da tela (a .topnav-inner
     era flex nowrap, e html/body usam overflow-x:clip pra segurar o layout
     geral, então o excesso simplesmente sumia cortado à direita), a pílula
     agora quebra em duas linhas: logo+usuário em cima, links embaixo. */
  .topnav-inner {
    flex-wrap: wrap;
    height: auto;
    row-gap: 4px;
    padding: 10px 10px 10px 14px;
  }
  .topnav .wordmark { order: 1; }
  .nav-user { order: 2; }
  .topnav .nav-links { order: 3; flex-basis: 100%; }
  .nav-username {
    max-width: 38vw; overflow: hidden; text-overflow: ellipsis;
    display: inline-block; vertical-align: middle;
  }
}
@media (max-width: 520px) {
  .topnav { gap: var(--space-2xs); }
  .topnav .nav-links a { padding: 6px 8px; }
  .cards-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ LISTAS: gestão ============================ */
.lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.listcard2 { display: flex; flex-direction: column; background: var(--color-paper); border: var(--rule-hair); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); color: var(--color-ink); transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.listcard2:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.lc-cover { aspect-ratio: 16/9; background: var(--color-paper-3); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lc-cover img { width: 100%; height: 100%; object-fit: cover; }
.lc-cover .lc-noimg { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); letter-spacing: 0.06em; }
.lc-badge { position: absolute; top: 8px; right: 8px; }
.badge-pub { background: var(--color-ok-wash); color: oklch(40% 0.11 152); border: 1px solid transparent; }
.lc-body { padding: var(--space-sm); flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lc-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.lc-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }
.lc-value { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--color-accent-2); margin-top: auto; }

/* ============================ BINDER (álbum) ============================ */
.binder-head { margin-bottom: var(--space-md); }
.binder-head-row { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.binder-total {
  margin-left: auto; text-align: right; padding: 8px 18px; background: var(--color-paper-2);
  border-radius: var(--radius-input);
}
.binder-total .bt-v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); }
.binder-total .bt-k { display: block; font-family: var(--font-body); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); margin-top: 2px; }
/* variação do valor total desde o início da última leitura em lote —
   some quando não há nada recente pra mostrar (display:none no HTML). */
.bt-delta { display: block; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; margin-top: 4px; }
.bt-delta.up { color: oklch(42% 0.12 152); }
.bt-delta.down { color: oklch(45% 0.16 27); }
.binder { --bcols: 3; }
.binder-grid { display: grid; grid-template-columns: repeat(var(--bcols), minmax(0, 1fr)); gap: var(--space-sm); }
.binder-item { margin: 0; display: block; transition: transform var(--dur) var(--ease-out); }
.binder-item:hover { transform: translateY(-4px) scale(1.02); }
.binder-card {
  position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3);
  aspect-ratio: 63 / 88; box-shadow: var(--shadow-sm); cursor: zoom-in;
  transition: box-shadow var(--dur) var(--ease-out);
}
.binder-item:hover .binder-card { box-shadow: var(--shadow-lg); }
.binder-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.binder-card .bc-noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); text-align: center; padding: 8px; }
.binder-card .bc-qty {
  position: absolute; top: 7px; right: 7px; background: oklch(22% 0.02 235 / 0.72); backdrop-filter: blur(3px);
  color: #fff; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; padding: 2px 9px;
  border-radius: var(--radius-pill);
}
/* código da carta agora fica em cima da arte, canto superior esquerdo —
   o rodapé sobra só pra preço/variação (pedido do usuário). */
.binder-card .bc-code-tl {
  position: absolute; top: 7px; left: 7px; z-index: 2; background: oklch(22% 0.02 235 / 0.72); backdrop-filter: blur(3px);
  color: #fff; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: var(--radius-pill); max-width: calc(100% - 50px); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.binder-card .bc-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 9px 7px; background: linear-gradient(to top, oklch(18% 0.03 260 / 0.9), oklch(18% 0.03 260 / 0)); color: #fff; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.binder-card .bc-code { font-family: var(--font-mono); font-size: 0.625rem; opacity: .9; }
.binder-card .bc-price { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 3px; margin-right: auto; }
.binder-card .bc-price::before { content: '●'; color: var(--color-gold); font-size: 0.5rem; }
.binder-card .bc-price.manual::after { content: ' ✎'; font-size: 0.625rem; opacity: .8; }
/* preço de mercado (Liga) ao lado do preço da carta, só quando os dois
   divergem — junto com o pct-badge dá a variação completa de relance. */
.binder-card .bc-market {
  font-family: var(--font-mono); font-size: 0.6875rem; color: oklch(88% 0.02 260); opacity: .85;
  text-decoration: line-through; white-space: nowrap;
}
.binder.style-dark { background: oklch(24% 0.02 260); border-radius: var(--radius-card); padding: var(--space-md); }
.binder.style-dark .binder-card { background: oklch(32% 0.02 260); box-shadow: 0 8px 24px oklch(0% 0 0 / 0.45); }
.binder.style-minimal .binder-card { box-shadow: none; border: var(--rule-hair); }

/* controles do dono (só em /list/<id>) */
.bc-controls { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.bc-controls form { display: inline; margin: 0; }
.bc-controls .qbtn { padding: 3px 9px; font-size: var(--text-sm); line-height: 1; background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair); }
.bc-controls .qbtn:hover { background: var(--color-paper-3); }
.bc-controls .qn { font-family: var(--font-mono); font-size: var(--text-sm); min-width: 22px; text-align: center; }
.bc-controls .priceform { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.bc-controls .priceform .cur { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }
.bc-controls .priceform input { width: 74px; padding: 4px 6px; font-family: var(--font-mono); font-size: var(--text-xs); }
.bc-controls .priceform button { padding: 4px 8px; font-size: 0.625rem; }
.bc-controls .rmx { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: var(--text-md); padding: 2px 6px; }
.bc-controls .rmx:hover { background: var(--color-danger-wash); border-radius: var(--radius-chip); }

/* market price da pasta (histórico de valor total da lista) */
.value-history-panel h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.value-chart-wrap { width: 100%; position: relative; }
.value-chart-svg { display: block; width: 100%; height: 120px; overflow: visible; }
.value-chart-svg .vc-grid { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 4; }
.value-chart-svg .vc-line { stroke: var(--color-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.value-chart-svg .vc-grad-a { stop-color: var(--color-accent); stop-opacity: 0.28; }
.value-chart-svg .vc-grad-b { stop-color: var(--color-accent); stop-opacity: 0; }
.value-chart-svg .vc-dot { fill: var(--color-accent); cursor: default; }
.value-chart-svg .vc-dot-halo { fill: var(--color-accent); opacity: 0.15; }

/* busca automática (marketwatch) */
.auto-scan-panel { margin-bottom: var(--space-lg); }
.auto-scan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-2xs); }
.auto-scan-head h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.auto-scan-panel .hint { display: block; font-size: var(--text-xs); color: var(--color-ink-3); margin-bottom: var(--space-sm); }
.auto-scan-meta { margin-bottom: var(--space-sm); }

/* switch on/off — controle próprio, não existia nenhum no design system */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; background: var(--color-rule-2); border-radius: var(--radius-pill); transition: background var(--dur) var(--ease-out); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-paper); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out); }
.switch input:checked ~ .switch-track { background: var(--color-accent); }
.switch input:checked ~ .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible ~ .switch-track { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch input:disabled ~ .switch-track { opacity: 0.6; cursor: not-allowed; }

/* modal do histórico (reaproveita .cardmodal/.cm-box) */
.marketwatch-box { max-width: 620px; }
.marketwatch-body { padding: var(--space-md); max-height: 70vh; overflow-y: auto; }
.marketwatch-run { border: var(--rule-hair); border-radius: var(--radius-input); margin-bottom: var(--space-2xs); overflow: hidden; }
.marketwatch-run > summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); padding: 10px 12px; cursor: pointer; }
.marketwatch-run[open] > summary { border-bottom: var(--rule-hair); background: var(--color-paper-2); }
.marketwatch-changes { display: flex; flex-direction: column; }
.marketwatch-changes .bulk-report-row { padding: 8px 12px; }
.marketwatch-changes .hint { padding: 8px 12px; margin: 0; }
.mw-trigger {
  display: inline-block; font-family: var(--font-body); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: var(--radius-chip);
  margin-right: 2px;
}
.mw-trigger.auto { background: var(--color-accent-wash); color: var(--color-accent); }
.mw-trigger.manual { background: var(--color-paper-3); color: var(--color-ink-2); }

/* resumo inteligente no topo do marketwatch — estatística agregada, maiores
   altas/quedas e cartas oscilando, calculado no servidor a partir das
   últimas leituras (não é só um log bruto de "mudou de X pra Y"). */
.mw-intel { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair); }
.mw-summary { display: flex; gap: var(--space-sm); margin-bottom: var(--space-2xs); }
.mw-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border: var(--rule-hair); border-radius: var(--radius-input);
  background: var(--color-paper-2);
}
.mw-stat-v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); }
.mw-stat-lbl { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-3); }
.mw-stat-up .mw-stat-v { color: oklch(42% 0.12 152); }
.mw-stat-down .mw-stat-v { color: oklch(45% 0.16 27); }
.mw-period { margin-bottom: var(--space-sm); }
.mw-movers { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.mw-movers-col { flex: 1; min-width: 220px; }
.mw-movers-col h4, .mw-volatile h4 {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  color: var(--color-ink-2); margin-bottom: 4px;
}
.mw-volatile { margin-top: var(--space-sm); }
.mw-mover-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: var(--rule-hair); border-radius: var(--radius-input); margin-bottom: 4px;
  text-decoration: none; color: inherit; font-size: var(--text-sm);
  transition: background 0.1s ease;
}
.mw-mover-row:hover { background: var(--color-paper-2); }
.mw-mover-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-mover-prices {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-ink-3);
  white-space: nowrap; flex-shrink: 0;
}
.mw-mover-list { display: flex; flex-direction: column; }
/* abas do histórico — Histórico / Hits / Alta / Queda, em vez de tudo
   empilhado numa lista só de leituras. */
.mw-tabs { display: flex; gap: 2px; border-bottom: var(--rule-hair); margin: var(--space-sm) 0 var(--space-sm); }
.mw-tab {
  background: transparent; color: var(--color-ink-2); border: none; border-radius: 0;
  padding: 8px 12px; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.mw-tab:hover { background: transparent; color: var(--color-ink); }
.mw-tab.active { color: var(--color-accent-2); border-bottom-color: var(--color-accent); }
.mw-tab-count {
  font-family: var(--font-mono); font-size: 0.625rem; background: var(--color-paper-3);
  color: var(--color-ink-3); padding: 1px 6px; border-radius: var(--radius-pill);
}
.mw-tab.active .mw-tab-count { background: var(--color-accent-wash); color: var(--color-accent-2); }
.mw-panel:empty { display: none; }

/* painel de compartilhar */
.share-panel { background: var(--color-paper); border: var(--rule-hair); border-radius: var(--radius-card); padding: var(--space-md); margin-bottom: var(--space-lg); box-shadow: var(--shadow-sm); }
.share-panel h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.share-link { display: flex; gap: var(--space-2xs); align-items: center; margin: var(--space-2xs) 0; flex-wrap: wrap; }
.share-link input { flex: 1; min-width: 220px; font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-paper-2); }
.share-status { font-size: var(--text-sm); }
.share-status .on { color: oklch(45% 0.12 152); font-weight: 600; }
.share-status .off { color: var(--color-ink-3); }

/* binder público — cabeçalho e rodapé */
.pub-head { text-align: center; padding: var(--space-xl) var(--space-md) var(--space-md); }
.pub-head .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-3); }
.pub-head h1 { font-size: var(--text-2xl); margin: 6px 0; }
.pub-head .pub-total { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--color-accent-2); }
.pub-expired { max-width: 460px; margin: 12vh auto; text-align: center; padding: var(--space-xl); }
.pub-expired h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2xs); }
.pub-foot { text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); padding: var(--space-xl); }

@media (max-width: 520px) { .binder { --bcols: 2 !important; } }

/* card do binder como link (detalhe) */
a.binder-item { display: block; text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease-out); }
a.binder-item:hover .binder-card { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bc-foot-r { display: flex; align-items: center; gap: 6px; }

/* badge de % vs Liga */
.pct-badge { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap; }
.pct-badge.sm { font-size: 0.625rem; padding: 1px 6px; }
.pct-badge.down { background: var(--color-ok-wash); color: oklch(42% 0.12 152); }
.pct-badge.up { background: var(--color-danger-wash); color: oklch(45% 0.16 27); }
.pct-badge.eq { background: var(--color-paper-3); color: var(--color-ink-3); }
.binder-card .pct-badge { box-shadow: 0 1px 3px oklch(0% 0 0 / .3); }

/* botão trocar capa na gestão */
.lc-coverbtn { position: absolute; bottom: 8px; right: 8px; }
.lc-coverbtn label { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in oklab, var(--color-ink) 68%, transparent); color: #fff; cursor: pointer; font-size: 14px; }
.lc-coverbtn label:hover { background: var(--color-ink); }
.listcard2 { cursor: pointer; }

/* ===== página de detalhe da carta ===== */
.ci-cols { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: var(--space-lg); align-items: start; }
.ci-photos .ci-main { aspect-ratio: 63 / 88; }
.ci-photoact { margin-top: var(--space-xs); }
.ci-extras-hdr { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); margin: var(--space-md) 0 var(--space-2xs); }
.ci-extras { display: flex; gap: 8px; flex-wrap: wrap; }
.ci-extra { position: relative; margin: 0; width: 72px; }
.ci-extra img { width: 72px; height: 100px; object-fit: cover; border-radius: 6px; border: var(--rule-hair); cursor: zoom-in; }
.ci-extra .ci-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-danger); color: #fff; border: none; font-size: 11px; cursor: pointer; line-height: 1; padding: 0; }
.ci-addphoto { margin: 0; }
.ci-addphoto label { display: flex; align-items: center; justify-content: center; width: 72px; height: 100px; border: 1.5px dashed var(--color-rule-2); border-radius: 6px; cursor: pointer; font-size: 24px; color: var(--color-ink-3); }
.ci-addphoto label:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Sem limite de largura, .ci-edit esticava até o fim da coluna 1fr de
   .ci-cols — em telas largas isso passava de 900px, e os painéis de preço/
   formulário (conteúdo naturalmente compacto) ficavam com muito espaço
   vazio ao redor, parecendo "espalhado"/desconectado em vez de um bloco
   coeso. Largura máxima confortável de leitura/preenchimento. */
.ci-edit { display: flex; flex-direction: column; gap: var(--space-md); max-width: 640px; }
.ci-liga .ci-liga-row { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: baseline; }
.ci-liga .lbl { display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }
.ci-liga-v, .ci-your-v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; }
.ci-your-v { color: var(--color-accent-2); }
.ci-yourprice-row {
  display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: baseline;
  padding-bottom: var(--space-sm); border-bottom: var(--rule-hair);
}
.ci-yourprice-row .lbl { display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }
.ci-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.ci-field { display: flex; flex-direction: column; gap: 4px; }
.ci-field .lbl { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.ci-field .hint { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-ink-3); text-transform: none; letter-spacing: 0; }
.ci-field textarea { font-family: var(--font-body); resize: vertical; }
.ci-move h3 { font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.ci-move .hint { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--color-ink-3); }
.ci-moveform { display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: center; }
.ci-moveform select, .ci-moveform input { min-width: 120px; }

/* botão "gerar anúncio" — verde, se destaca dos botões neutros ao redor
   (mover/arquivar/remover) já que é a ação de destaque do card. */
.ci-ad-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-2xs); }
.ci-ad-head h3 { font-family: var(--font-display); font-size: var(--text-md); }
.ci-ad-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; }
.ci-ad .hint { display: block; margin: 4px 0 var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-3); }
#generateAdBtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: oklch(62% 0.16 150); color: #fff;
}
#generateAdBtn:hover:not(:disabled) { background: oklch(55% 0.16 150); }
#generateAdBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.ci-ad-history { margin-top: var(--space-sm); }
.ci-ad-history > summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); cursor: pointer; }
.ci-ad-history-rows { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2xs); max-height: 220px; overflow-y: auto; }
.ci-ad-history-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 2px; border-bottom: 1px dashed var(--color-rule); font-size: var(--text-xs); }
.ci-ad-history-row .ci-ad-history-price { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent-2); white-space: nowrap; }
.ci-ad-history-row .ci-ad-history-headline { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-2); }
.ci-ad-history-row .ci-ad-history-date { margin-left: auto; font-family: var(--font-mono); color: var(--color-ink-3); white-space: nowrap; }

/* modal de gerar anúncio (reaproveita .cardmodal/.cm-box) */
.ad-modal-box { max-width: 460px; }
.ad-modal-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.ad-modal-body .lbl { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }
.ad-modal-body .hint { font-size: var(--text-xs); color: var(--color-ink-3); margin-bottom: var(--space-sm); }
.ad-headline-row { display: flex; gap: 6px; }
.ad-headline-row input { flex: 1; min-width: 0; }
#adSuggestBtn { flex-shrink: 0; white-space: nowrap; }
.ad-extra-phrases { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; margin-bottom: var(--space-sm); }
.ad-extra-phrase-row { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); cursor: pointer; }
.ad-extra-phrase-row input { margin-top: 3px; flex-shrink: 0; }
#adSendBtn { background: oklch(62% 0.16 150); color: #fff; }
#adSendBtn:hover:not(:disabled) { background: oklch(55% 0.16 150); }
.ad-result-box { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px dashed var(--color-rule); }
.ad-result-field { display: flex; flex-direction: column; gap: 6px; }
.ad-result-text { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; resize: vertical; background: var(--color-paper-2); }
.ad-result-img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 6px; border: 1px solid var(--color-rule-2); align-self: flex-start; }
.ad-result-img-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#adOpenWaBtn { background: oklch(62% 0.16 150); color: #fff; text-align: center; text-decoration: none; }
#adOpenWaBtn:hover { background: oklch(55% 0.16 150); }

@media (max-width: 640px) { .ci-cols { grid-template-columns: 1fr; } }

/* ===== estilos temáticos do binder ===== */
.binder.style-grandline { background: linear-gradient(160deg, oklch(38% 0.09 235), oklch(20% 0.06 255)); border-radius: var(--radius-card); padding: var(--space-md); }
.binder.style-grandline .binder-card { background: oklch(30% 0.04 250); box-shadow: 0 8px 24px oklch(0% 0 0 / .4), 0 0 0 2px oklch(72% 0.12 225 / .35); }
.binder.style-wanted { background: oklch(85% 0.055 78); border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: inset 0 0 60px oklch(55% 0.08 60 / .25); }
.binder.style-wanted .binder-card { border: 3px solid oklch(34% 0.06 55); border-radius: 4px; background: oklch(79% 0.05 78); box-shadow: 0 4px 12px oklch(30% 0.06 55 / .35); }
.binder.style-wanted .bc-qty { background: oklch(34% 0.06 55); }
.binder.style-treasure { background: radial-gradient(120% 90% at 50% 0%, oklch(32% 0.04 90), oklch(16% 0.02 265)); border-radius: var(--radius-card); padding: var(--space-md); }
.binder.style-treasure .binder-card { background: oklch(26% 0.02 265); box-shadow: 0 8px 24px oklch(0% 0 0 / .5), 0 0 0 2px oklch(80% 0.13 90 / .55); }
.binder.style-treasure .bc-qty { background: oklch(78% 0.14 88); color: oklch(25% 0.04 60); }
.binder.style-treasure .bc-price { color: oklch(85% 0.13 90); }

/* config: capa + dados do vendedor */
.owner-panel { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair); }
.owner-panel > summary { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.owner-panel .hint { font-family: var(--font-body); font-weight: 400; color: var(--color-ink-3); font-size: var(--text-xs); }
.owner-form { margin-top: var(--space-sm); }
.owner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-sm); }
.owner-grid label { display: flex; flex-direction: column; gap: 4px; }
.owner-grid .lbl { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-2); }

/* binder público: vendedor / coleção */
.pub-total-lbl { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-3); }
.seller { max-width: 640px; margin: 0 auto var(--space-lg); background: var(--color-paper); border: var(--rule-hair); border-radius: var(--radius-card); padding: var(--space-md); box-shadow: var(--shadow-sm); text-align: center; }
.seller-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.seller-meta { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-2); margin: 6px 0 var(--space-sm); }
.seller-note { font-size: var(--text-xs); color: var(--color-ink-3); margin-top: var(--space-sm); }
.coll-stats { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-lg); }
.coll-stats .cstat { text-align: center; }
.coll-stats .cs-v { display: block; font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--color-accent-2); }
.coll-stats .cs-k { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }

/* config do binder em grade organizada — 3 colunas fixas em vez de
   auto-fit: com 6 campos, auto-fit calcula quantas colunas cabem pela
   largura (dava 5), sobrando 1 campo sozinho numa 2ª linha com 4 células
   vazias do lado — a maior causa da sensação de bagunça no topo da lista.
   3 colunas fixas fecham 6 campos em 2 linhas completas, sem sobra. */
.share-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm) var(--space-md); }
.share-opts > label { display: flex; flex-direction: column; gap: 4px; }
.share-opts .lbl { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-2); }
@media (max-width: 760px) { .share-opts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .share-opts { grid-template-columns: 1fr; } }
.share-actions { display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: center; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair); }

/* botão + carrinho no card público */
.bc-add { position: absolute; bottom: 7px; left: 7px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent); color: #fff; border: none; font-size: 15px; line-height: 1; cursor: pointer; z-index: 3; box-shadow: var(--shadow-sm); padding: 0; }
.bc-add:hover { background: var(--color-accent-2); }

/* carrinho do comprador */
.cart-fab { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: none; align-items: center; gap: 6px; background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius-pill); padding: 12px 18px; font-size: var(--text-md); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-lg); }
.cart-drawer { position: fixed; right: 0; top: 0; height: 100%; width: min(360px, 92vw); background: var(--color-paper); border-left: var(--rule-hair); box-shadow: var(--shadow-lg); z-index: 75; transform: translateX(100%); transition: transform 0.25s var(--ease-out); display: flex; flex-direction: column; padding: var(--space-md); }
.cart-drawer.open { transform: translateX(0); }
.cart-dh { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-sm); }
.cart-x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--color-ink-2); padding: 0; }
.cart-dlist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2xs); }
.cart-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: var(--rule-hair); padding-bottom: 6px; }
.cart-rn { font-size: var(--text-sm); } .cart-rn small { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); }
.cart-rq { display: flex; align-items: center; gap: 6px; }
.cart-rq button { width: 24px; height: 24px; padding: 0; background: var(--color-paper-3); color: var(--color-ink); border: var(--rule-hair); border-radius: var(--radius-chip); cursor: pointer; }
.cart-rq span { font-family: var(--font-mono); min-width: 18px; text-align: center; }
.cart-dtotal { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--color-rule-2); padding-top: 8px; margin: var(--space-sm) 0; font-size: var(--text-sm); }
.cart-dtotal strong { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--color-accent-2); }
.cart-dnote { font-size: var(--text-xs); color: var(--color-ink-3); margin-top: var(--space-2xs); line-height: 1.5; }

/* modal público: miniaturas + preço/% */
.pm-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pm-thumbs img { width: 54px; height: 76px; object-fit: cover; border-radius: 5px; border: var(--rule-hair); cursor: pointer; }
.pm-price { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--color-accent-2); margin-bottom: var(--space-sm); }
.pm-pct { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); vertical-align: middle; }
.pm-pct.down { background: var(--color-ok-wash); color: oklch(42% 0.12 152); }
.pm-pct.up { background: var(--color-danger-wash); color: oklch(45% 0.16 27); }
.pm-pct.eq { background: var(--color-paper-3); color: var(--color-ink-3); }

/* página de arquivadas */
.arch-row { display: flex; align-items: center; gap: var(--space-sm); padding: 10px 4px; border-bottom: 1px dashed var(--color-rule); }
.arch-row img { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; border: var(--rule-hair); flex-shrink: 0; }
.arch-row .ar-body { flex: 1; min-width: 0; }
.arch-row .ar-name { font-weight: 600; }
.arch-row .ar-sub { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }
.arch-row .ar-reason { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); }
.arch-row .ar-price { font-family: var(--font-mono); font-weight: 600; text-align: right; white-space: nowrap; }

/* ============================ TRACKER DE PREÇO/ESTOQUE DA LIGA ============================ */
/* Hierarquia: preço+delta é o dado principal, com o botão de atualizar
   ancorado na mesma linha (não numa linha própria, longe do preço).
   Estoque + última leitura são metadado secundário, uma linha só, discreta.
   Os gráficos só existem visualmente quando há dado real pra desenhar —
   ver renderPanel(), que esconde .liga-charts inteiro sem histórico —
   então nunca aparece um rótulo sozinho sobre uma área vazia. */
.liga-panel {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: var(--space-xs); padding: 16px 18px;
  border: none; border-radius: calc(var(--radius-shell) - 7px);
  background: var(--color-paper);
  box-shadow: inset 0 1px 1px oklch(99% 0 0 / 0.9), 0 1px 2px oklch(22% 0.02 235 / 0.04);
}
.liga-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.liga-panel-price-group { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.liga-panel-v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); }
.liga-panel-delta:empty { display: none; }
.liga-panel-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 20px; }
.liga-stock-badge:empty { display: none; }
.liga-panel-checked {
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink-3);
}
.liga-panel-checked:empty { display: none; }
/* Valorização da carta (subiu de preço = bom pra quem coleciona = verde) —
   convenção OPOSTA à de .pct-badge ("vs Liga"), por isso classes próprias. */
.price-delta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap; }
.price-delta.gain { background: var(--color-ok-wash); color: oklch(42% 0.12 152); }
.price-delta.loss { background: var(--color-danger-wash); color: oklch(45% 0.16 27); }
.price-delta.flat { background: var(--color-paper-3); color: var(--color-ink-3); }
.liga-refresh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  border-radius: var(--radius-pill); font-size: 15px; line-height: 1;
  border: 1px solid var(--color-rule-2); background: var(--color-paper);
  color: var(--color-ink-2); cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform 120ms var(--ease-out);
}
.liga-refresh-btn:hover:not(:disabled) {
  background: var(--color-accent-wash); border-color: var(--color-accent); color: var(--color-accent);
}
.liga-refresh-btn:active:not(:disabled) { transform: scale(0.92); }
.liga-refresh-btn:disabled { opacity: 0.55; cursor: default; }
.liga-refresh-btn.spinning { color: var(--color-accent); border-color: var(--color-accent); }
.liga-refresh-btn.spinning .liga-refresh-icon { animation: liga-spin 0.85s linear infinite; }
@keyframes liga-spin { to { transform: rotate(360deg); } }
.stock-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.stock-badge.ok { background: var(--color-ok-wash); color: var(--color-ok); }
.stock-badge.warn { background: var(--color-warn-wash); color: var(--color-warn); }
.stock-badge.danger { background: var(--color-danger-wash); color: var(--color-danger); }

/* Market Watch — sinal de compra/venda (preço atual vs. média móvel),
   volatilidade e divergência entre fontes. */
.signal-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.signal-badge.compra { background: var(--color-ok-wash); color: oklch(38% 0.13 152); }
.signal-badge.venda { background: var(--color-danger-wash); color: oklch(45% 0.16 27); }
.signal-badge.neutro { background: var(--color-paper-3); color: var(--color-ink-2); }
.signal-badge.sem_dado { background: var(--color-paper-3); color: var(--color-ink-3); font-weight: 500; }
.vol-badge { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-chip); white-space: nowrap; }
.vol-badge.alta { background: var(--color-warn-wash); color: var(--color-warn); }
.vol-badge.media { background: var(--color-paper-3); color: var(--color-ink-2); }
.vol-badge.baixa { background: var(--color-paper-3); color: var(--color-ink-3); }
.vol-badge.sem_dado { background: transparent; color: var(--color-ink-3); }
.spread-badge {
  display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-chip);
  background: var(--color-accent-wash); color: var(--color-accent-2); white-space: nowrap;
}
.liga-charts { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--color-rule); }
.liga-chart-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* rótulo de valor do eixo Y sobreposto ao gráfico — texto em HTML, não
   dentro do <svg> (o viewBox usa preserveAspectRatio="none" pra esticar a
   linha até preencher a largura toda; texto SVG esticaria distorcido
   junto). Alinhado por posição absoluta com o topo/base da área útil do
   gráfico (mesma faixa 4→40 de sparklineData). */
.liga-chart-frame { position: relative; }
.liga-chart-axis-y {
  position: absolute; left: 2px; font-family: var(--font-mono); font-size: 0.5625rem;
  color: var(--color-ink-3); background: color-mix(in oklab, var(--color-paper) 82%, transparent);
  padding: 0 3px; line-height: 1.3; pointer-events: none; z-index: 1;
}
.liga-chart-axis-y.top { top: 0; }
.liga-chart-axis-y.bottom { bottom: 0; }
.liga-chart-axis-y:empty { display: none; }
/* eixo X — data/hora de cada leitura (até 4), alinhado por % de posição
   com o ponto real no gráfico logo acima. */
.liga-chart-axis-x { position: relative; height: 13px; margin-top: 2px; }
.liga-chart-axis-x-tick {
  position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono);
  font-size: 0.5625rem; color: var(--color-ink-3); white-space: nowrap;
}
.liga-chart-axis-x-tick:first-child { transform: translateX(0); }
.liga-chart-axis-x-tick:last-child { transform: translateX(-100%); }
.liga-chart-lbl { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }
/* display:block é o que importa aqui — um <svg> é inline por padrão, o que
   reserva um "gap" de descender abaixo dele (espaço de fonte pra letras
   como "g"/"y"), invisível mas real: o .liga-chart-frame (pai) fica mais
   alto que o svg sozinho. Os pontos (.liga-chart-dots, position:absolute
   inset:0) posicionam por % da altura do FRAME, não do svg — com esse gap,
   a % deles mede contra uma caixa maior que a da linha do gráfico, e o
   ponto acaba mais baixo que a linha (o "os pontos não cruzam a linha"
   relatado pelo usuário, em TODOS os gráficos do site que reusam esse
   padrão). display:block tira o svg do fluxo inline e fecha o gap. */
.liga-sparkline { display: block; width: 100%; height: 44px; overflow: visible; }
.liga-sparkline .liga-chart-grid { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 3; }
.liga-sparkline .liga-chart-line { stroke: var(--color-accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.liga-sparkline .liga-chart-grad-a { stop-color: var(--color-accent); stop-opacity: 0.30; }
.liga-sparkline .liga-chart-grad-b { stop-color: var(--color-accent); stop-opacity: 0; }
.liga-sparkline-stores .liga-chart-line { stroke: var(--color-gold); }
.liga-sparkline-stores .liga-chart-grad-a { stop-color: var(--color-gold); stop-opacity: 0.30; }
.liga-sparkline-stores .liga-chart-grad-b { stop-color: var(--color-gold); stop-opacity: 0; }
/* pontos como <span> posicionados por %, por cima do SVG — não dentro dele.
   Um <circle> no viewBox esticado (preserveAspectRatio="none") vira elipse;
   posição em % não sofre disso, fica redondo sempre. */
.liga-chart-dots { position: absolute; inset: 0; pointer-events: none; }
.liga-chart-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent); border: 1.5px solid var(--color-paper);
  transform: translate(-50%, -50%); box-shadow: 0 1px 3px oklch(22% 0.02 235 / 0.25);
  pointer-events: auto; cursor: default;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.liga-chart-dot:hover { transform: translate(-50%, -50%) scale(1.6); z-index: 2; }
.liga-chart-dot.last {
  width: 9px; height: 9px; border-width: 2px;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--color-accent) 18%, transparent), 0 1px 4px oklch(22% 0.02 235 / 0.3);
}
[data-liga-dots-stores] .liga-chart-dot { background: var(--color-gold); }
[data-liga-dots-stores] .liga-chart-dot.last {
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--color-gold) 18%, transparent), 0 1px 4px oklch(22% 0.02 235 / 0.3);
}
/* linhas-guia + balão sob toque/hover — mostram exatamente onde o ponto
   cai nos dois eixos, não só um title nativo escondido. Um par só por
   gráfico (não um por ponto), reposicionado on the fly. */
.liga-chart-crosshair-x, .liga-chart-crosshair-y { position: absolute; display: none; pointer-events: none; z-index: 1; }
.liga-chart-crosshair-x { left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in oklab, var(--color-accent) 55%, transparent); }
.liga-chart-crosshair-y { top: 0; bottom: 0; width: 0; border-left: 1px dashed color-mix(in oklab, var(--color-accent) 55%, transparent); }
.liga-chart-tooltip {
  position: absolute; display: none; transform: translate(-50%, -100%) translateY(-10px);
  background: var(--color-ink); color: var(--color-paper); padding: 5px 9px; border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.6875rem; white-space: nowrap; text-align: center;
  box-shadow: var(--shadow-md); z-index: 2; pointer-events: none;
}
.liga-chart-tooltip strong { display: block; font-size: 0.75rem; font-weight: 700; }
.liga-chart-tooltip span { display: block; color: color-mix(in oklab, var(--color-paper) 70%, transparent); font-size: 0.625rem; margin-top: 1px; }
.liga-chart-tooltip::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--color-ink);
}
.liga-chart-tooltip.flip { transform: translate(-90%, -100%) translateY(-10px); }
.liga-chart-tooltip.flip::after { left: 90%; }
.liga-chart-caption { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); }
.liga-chart-caption:empty { display: none; }
.liga-chart-caption .liga-chart-range { font-weight: 600; color: var(--color-ink-2); white-space: nowrap; }
.liga-chart-caption .liga-chart-dates { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liga-charts-empty {
  display: none; font-size: 0.75rem; color: var(--color-ink-3); text-align: center;
  padding: 10px 8px; border: 1px dashed var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-paper-2);
}
.liga-panel-open {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin-top: 2px; font-size: 0.75rem; font-weight: 600; color: var(--color-accent);
  text-decoration: none;
}
.liga-panel-open:hover { text-decoration: underline; }
.liga-bulk-progress {
  display: none; align-items: center; gap: 10px; margin-top: var(--space-sm);
  padding: 10px 14px; border: var(--rule-hair); border-radius: var(--radius-input);
  background: var(--color-paper-2);
}
.liga-bulk-progress.on { display: flex; }
.liga-bulk-bar { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.liga-bulk-bar > i { display: block; height: 100%; background: var(--color-accent); width: 0%; border-radius: var(--radius-pill); transition: width .25s var(--ease-out); }
.liga-bulk-pct { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent-2); min-width: 40px; text-align: right; }
.liga-bulk-progress .hint { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; }

/* feed ao vivo — uma linha por carta conforme a atualização em lote avança
   (a mais recente entra no topo), pra acompanhar SEM esperar o job todo
   terminar. Some quando não há progresso rodando (fica vazio). */
.liga-bulk-feed { display: flex; flex-direction: column-reverse; gap: 2px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.liga-bulk-feed-row {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; border-radius: var(--radius-input);
  background: var(--color-paper-2); font-size: var(--text-xs); animation: lbf-in .3s var(--ease-out);
}
/* verde subiu, vermelho desceu, sem cor (só o tom neutro do card) se
   manteve — pra dar pra ver de relance o que aconteceu sem ler o texto. */
.liga-bulk-feed-row.lbf-up { background: var(--color-ok-wash); }
.liga-bulk-feed-row.lbf-down { background: var(--color-danger-wash); }
.liga-bulk-feed-row.lbf-same, .liga-bulk-feed-row.lbf-kept-row { background: var(--color-paper-2); }
.lbf-code { font-family: var(--font-mono); font-weight: 700; color: var(--color-ink-3); white-space: nowrap; }
.lbf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-2); }
.lbf-change, .lbf-kept { font-family: var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lbf-kept { color: var(--color-ink-3); }
.lbf-up .lbf-change strong { color: oklch(42% 0.12 152); }
.lbf-down .lbf-change strong { color: oklch(45% 0.16 27); }
.lbf-same .lbf-change strong { color: var(--color-ink-2); }
@keyframes lbf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* pisca a carta no binder que acabou de receber um preço novo durante o
   lote — mesmo espírito do .rescard.just-updated do internacional. */
.binder-item.bi-just-updated .binder-card { animation: bi-flash 1.2s var(--ease-out); }
@keyframes bi-flash {
  0% { box-shadow: 0 0 0 2px var(--color-accent); }
  100% { box-shadow: none; }
}

/* relatório de preços pós-atualização em lote (reaproveita .cardmodal/.cm-box) */
.bulk-report-box { max-width: 720px; }
.bulk-report-body { padding: var(--space-md); }
.bulk-report-intro { font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.bulk-report-rows {
  display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto;
  border: var(--rule-hair); border-radius: var(--radius-input); margin-bottom: var(--space-md);
  background: var(--color-paper);
}
.bulk-report-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border-bottom: var(--rule-hair);
}
.bulk-report-row:nth-child(even) { background: var(--color-paper-2); }
.bulk-report-row:last-child { border-bottom: none; }
.bulk-report-row .brr-check { grid-row: 1 / 3; accent-color: var(--color-accent); width: 18px; height: 18px; }
/* Só as linhas de "O que mudou na Liga" (com foto da carta) usam esse
   modificador — as de dentro do histórico do Mercado (mesma classe
   .bulk-report-row, sem foto) continuam no grid de 3 colunas de sempre. */
.bulk-report-row.brr-with-img { grid-template-columns: auto auto 1fr auto; }
.bulk-report-row .brr-thumb {
  grid-row: 1 / 3; width: 34px; height: 48px; object-fit: cover;
  border-radius: 4px; background: var(--color-paper-3); flex-shrink: 0;
}
.bulk-report-row.brr-with-img .brr-name,
.bulk-report-row.brr-with-img .brr-prices { grid-column: 3; }
.bulk-report-row.brr-with-img .price-delta { grid-column: 4; }
.bulk-report-row .brr-name {
  grid-column: 2; font-size: var(--text-md); font-weight: 600; color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brr-code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }
.bulk-report-row .brr-manual {
  font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-accent); background: var(--color-accent-wash); border-radius: var(--radius-chip);
  padding: 1px 5px; margin-left: 6px; white-space: nowrap;
}
.bulk-report-row .brr-prices {
  grid-column: 2; display: flex; align-items: baseline; gap: 8px; margin-top: 2px;
}
.bulk-report-row .brr-old { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-3); text-decoration: line-through; white-space: nowrap; }
.bulk-report-row .brr-arrow { color: var(--color-ink-3); font-size: var(--text-sm); }
.bulk-report-row .brr-new { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.bulk-report-row .price-delta { grid-column: 3; grid-row: 1 / 3; flex-shrink: 0; }
.bulk-report-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.bulk-report-actions .btn.ghost { margin-left: auto; }

.bulk-fail-details { margin-bottom: var(--space-md); border: var(--rule-hair); border-radius: var(--radius-input); overflow: hidden; }
.bulk-fail-details summary { cursor: pointer; padding: 8px 12px; font-size: var(--text-sm); font-weight: 600; color: var(--color-danger); background: var(--color-danger-wash); list-style: none; }
.bulk-fail-details summary::-webkit-details-marker { display: none; }
.bulk-fail-details summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform .2s var(--ease-out); }
.bulk-fail-details[open] summary::before { transform: rotate(90deg); }
.bulk-fail-body { padding: 10px 12px; max-height: 260px; overflow-y: auto; }
.bulk-fail-group { padding: 6px 0; border-bottom: var(--rule-hair); }
.bulk-fail-group:last-child { border-bottom: none; }
.bulk-fail-err { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-danger); word-break: break-word; margin: 0 0 3px; }
.bulk-fail-cards { font-size: var(--text-xs); color: var(--color-ink-3); margin: 0; }

/* ==================== PÁGINA INTERNACIONAL (tcgcsv.com) ==================== */
.intl-updatebar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  margin: var(--space-sm) 0; padding: 10px 14px; background: var(--color-paper-2);
  border: var(--rule-hair); border-radius: var(--radius-input);
}
.intl-updated { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }
.intl-group { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intl-subtype {
  font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-accent); background: var(--color-accent-wash); border-radius: var(--radius-chip); padding: 1px 5px;
}
.intl-rate { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; }
.intl-view-toggle { display: inline-flex; border: var(--rule-hair); border-radius: var(--radius-pill); overflow: hidden; margin-left: auto; }
.intl-view-toggle button {
  background: transparent; color: var(--color-ink-3); border: none; border-radius: 0;
  padding: 6px 12px; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
.intl-view-toggle button.active { background: var(--color-accent); color: var(--color-accent-ink); }
.intl-view-toggle button:not(.active):hover { background: var(--color-paper-3); color: var(--color-ink); }
/* troca qual moeda vem em destaque nos cards/lista (a outra continua
   como referência menor) — pill simples, mesma linguagem visual do
   toggle grade/lista ao lado. */
.intl-currency-toggle {
  display: inline-flex; align-items: center; gap: 5px; background: var(--color-paper-2);
  border: var(--rule-hair); border-radius: var(--radius-pill); padding: 6px 12px;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2);
  cursor: pointer; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.intl-currency-toggle:hover { background: var(--color-accent-wash); border-color: var(--color-accent); }
.intl-currency-toggle strong { color: var(--color-accent-2); font-family: var(--font-mono); }

/* modo "lista" — pensado pra conferir preço/código/link rápido, sem
   imagem nenhuma (pedido explícito: não precisa da arte aqui). */
.intl-list-wrap { overflow-x: auto; border: var(--rule-hair); border-radius: var(--radius-card); margin-top: var(--space-xs); }
.intl-list-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.intl-list-table thead th {
  text-align: left; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-ink-3); padding: 10px 12px; border-bottom: var(--rule-hair);
  background: var(--color-paper-2); position: sticky; top: 0;
}
.intl-list-table tbody tr { cursor: pointer; border-bottom: var(--rule-hair); transition: background var(--dur) var(--ease-out); }
.intl-list-table tbody tr:hover { background: var(--color-paper-2); }
.intl-list-table tbody tr:last-child { border-bottom: none; }
.intl-list-table tbody tr.just-updated { animation: rescard-flash 1.2s var(--ease-out); }
.intl-list-table td { padding: 8px 12px; vertical-align: middle; }
.intl-list-code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; }
.intl-list-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intl-list-cell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.intl-list-cell.tcg { color: var(--color-accent-2); }
.intl-list-cell.ct { color: var(--color-gold); }
.intl-list-cell.liga { color: oklch(60% 0.17 25); }
.intl-list-cell.lowest { font-weight: 700; background: var(--color-accent-wash); border-radius: var(--radius-chip); }
.intl-list-cell a { color: inherit; opacity: .7; text-decoration: none; margin-left: 3px; }
.intl-list-cell a:hover { opacity: 1; }
.intl-price-pair { display: flex; gap: 10px; margin-top: 6px; }
.intl-price-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.intl-price-src { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.intl-price-block .intl-price {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent-2);
  font-variant-numeric: tabular-nums;
}
.intl-price-block.ct .intl-price { color: var(--color-gold); }
.intl-price-brl { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.intl-code-edit { display: flex; gap: 8px; }
.intl-code-edit input { flex: 1; font-family: var(--font-mono); font-size: var(--text-sm); padding: 6px 10px; }
.intl-liga-info { margin-bottom: 8px; }
.intl-cm-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#intlCardModal .cm-left { display: flex; flex-direction: column; gap: 8px; }
#intlCardModal .liga-panel-open { align-self: center; }

/* gráfico de 3 fontes (TCGPlayer / CardTrader / Liga BR) no modal internacional */
.tri-legend { display: flex; gap: var(--space-sm); margin-bottom: 6px; flex-wrap: wrap; }
.tri-legend-item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink-3); }
.tri-swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tri-swatch.tcg, .tri-line.tcg, .tri-dot-tcg { background: var(--color-accent); }
.tri-swatch.ct, .tri-line.ct, .tri-dot-ct { background: var(--color-gold); }
.tri-swatch.liga, .tri-line.liga, .tri-dot-liga { background: oklch(60% 0.17 25); }
path.tri-line.tcg { stroke: var(--color-accent); stroke-width: 2; }
path.tri-line.ct { stroke: var(--color-gold); stroke-width: 2; }
path.tri-line.liga { stroke: oklch(60% 0.17 25); stroke-width: 2; }

/* card do internacional com as 3 fontes lado a lado + zoom da imagem no hover */
/* grade do internacional: cards mais largos (mínimo 360px, contra os
   300px padrão do resto do site) — precisam de espaço pra 3 blocos de
   preço (USD+BRL) lado a lado sem ficarem espremidos. */
.intl-cards-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-sm); }
.intl-cards-grid .rescard { gap: 16px; padding: 14px 16px; }
.intl-cards-grid .rc-thumb { width: 88px; }
.intl-cards-grid .rc-thumb .thumb { width: 88px; }
.intl-price-trio { display: flex; gap: 10px; margin-top: 8px; }
.intl-price-block.liga .intl-price { color: oklch(60% 0.17 25); }
.intl-price-block.lowest {
  border-radius: var(--radius-chip); background: var(--color-accent-wash);
  padding: 3px 6px; margin: -3px -6px 0;
}
.intl-price-block.lowest .intl-price-src { color: var(--color-accent-2); font-weight: 700; }
/* zoom só quando o mouse está sobre a IMAGEM (não o card inteiro — clicar
   perto da borda do card antes disparava o zoom sem nem estar em cima da
   arte) e um aumento mais discreto (1.5x, não 3.4x) — grande o bastante
   pra confirmar a carta sem cobrir os preços ao lado. */
.intl-cards-grid .rc-thumb { overflow: visible; z-index: 1; }
.intl-cards-grid .rc-thumb .thumb {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  transform-origin: left center;
}
.intl-cards-grid .rc-thumb:hover .thumb,
.intl-cards-grid .rc-thumb:focus-within .thumb {
  transform: scale(1.5);
  box-shadow: var(--shadow-lg);
  position: relative; z-index: 5;
}
.rescard.just-updated { animation: rescard-flash 1.2s var(--ease-out); }
@keyframes rescard-flash {
  0% { box-shadow: 0 0 0 2px var(--color-accent); }
  100% { box-shadow: var(--shadow-sm, none); }
}

/* grade de preços 2 linhas (USD/BRL) x 3 colunas (TCG/CT/Liga) no modal */
.intl-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.intl-price-grid-col {
  display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center;
  padding: 8px 4px; border-radius: var(--radius-input); border: var(--rule-hair);
}
.intl-price-grid-col.lowest { background: var(--color-accent-wash); border-color: var(--color-accent); }
.intl-price-grid-lbl { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); }
.intl-price-grid-col.lowest .intl-price-grid-lbl { color: var(--color-accent-2); }
.intl-price-grid-usd { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.intl-price-grid-brl { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.intl-price-grid-code { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-ink-3); margin-top: 2px; }

/* três gráficos pequenos, um por fonte, no lugar do gráfico combinado */
.mini-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-chart-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini-chart-lbl { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-3); }
.mini-chart-lbl.tcg { color: var(--color-accent); }
.mini-chart-lbl.ct { color: var(--color-gold); }
.mini-chart-lbl.liga { color: oklch(60% 0.17 25); }
.mini-chart-wrap { position: relative; width: 100%; height: 60px; }
.mini-chart-svg { display: block; width: 100%; height: 60px; overflow: visible; }
.mini-chart-wrap .hint.sm, #intlPriceGrid ~ .hint.sm { font-size: 0.6875rem; }
.hint.sm { font-size: 0.6875rem; color: var(--color-ink-3); margin: 0; }

.btn.sm { padding: 5px 12px; font-size: var(--text-xs); }

/* ============================ PERGUNTE À IA (scanner) ===================== */
.aiq-form { display: flex; gap: 10px; margin-top: 10px; }
.aiq-form input[type="text"] { flex: 1; }
.aiq-response { margin-top: 12px; padding: 14px 16px; background: var(--color-paper-2); border-radius: var(--radius-md); font-size: var(--text-sm); white-space: pre-wrap; }
.aiq-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
#aiQueryCardsGrid .cluster { margin-top: var(--space-md); }
#aiQueryCardsGrid .cluster:first-child { margin-top: var(--space-sm); }
.aiq-img { width: 140px; height: 140px; object-fit: contain; border-radius: var(--radius-md); background: var(--color-paper-2); }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .scanstatus::before { animation: none; }
}