/* =========================================================
   WhatTheChip — Design System v2
   IBM Carbon-inspired · Helvetica Neue · Blue #0f62fe
   ========================================================= */

/* ── TOKENS (Carbon White theme + extensões WTC) ─────────── */
:root {

  /* ── Superfícies ──────────────────────────────────────── */
  --bg:        #ffffff;   /* White */
  --surface:   #ffffff;   /* White */
  --surface-2: #f4f4f4;   /* Gray 10 */
  --surface-3: #e0e0e0;   /* Gray 20 */

  /* ── Texto ────────────────────────────────────────────── */
  --text-primary:     #161616;
  --text-secondary:   #525252;
  --text-helper:      #6f6f6f;
  --text-placeholder: #a8a8a8;
  --text-on-color:    #ffffff;

  /* ── Interação / Links ────────────────────────────────── */
  --interactive:        #0f62fe;   /* Carbon Blue 60 */
  --interactive-hover:  #0353e9;   /* Blue 70 */
  --interactive-active: #002d9c;   /* Blue 80 */
  --link:               #0f62fe;
  --link-hover:         #0043ce;
  --link-visited:       #8a3ffc;
  --focus:              #0f62fe;

  /* ── Bordas ───────────────────────────────────────────── */
  --border-subtle:  #e0e0e0;
  --border-default: #8d8d8d;
  --border-strong:  #161616;

  /* ── Status ───────────────────────────────────────────── */
  --success:     #198038;
  --success-bg:  #defbe6;
  --success-bd:  #a7f0ba;
  --warning:     #b28600;
  --warning-bg:  #fff8e1;
  --warning-bd:  #f1c21b;
  --error:       #da1e28;
  --error-bg:    #fff1f1;
  --error-bd:    #ffd7d9;
  --info:        #0043ce;
  --info-bg:     #edf5ff;
  --info-bd:     #d0e2ff;

  /* ── Tags ─────────────────────────────────────────────── */
  --tag-blue-bg:  #d0e2ff;  --tag-blue-fg:  #0043ce;
  --tag-green-bg: #defbe6;  --tag-green-fg: #0e6027;
  --tag-teal-bg:  #d9fbfb;  --tag-teal-fg:  #005d5d;
  --tag-cyan-bg:  #e5f6ff;  --tag-cyan-fg:  #0072c3;
  --tag-gray-bg:  #e0e0e0;  --tag-gray-fg:  #393939;
  --tag-cool-bg:  #dde1ff;  --tag-cool-fg:  #393aaa;

  /* ── Código ───────────────────────────────────────────── */
  --code-bg:     #f4f4f4;
  --code-fg:     #0f62fe;
  --code-border: #e0e0e0;

  /* ── Sombras ──────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.07);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.10);
  --shadow-md: 0 2px 8px rgba(0,0,0,.13);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.16);
  --shadow-xl: 0 8px 32px rgba(0,0,0,.20);

  /* ── Header ───────────────────────────────────────────── */
  --header-bg:     #ffffff;
  --header-text:   #161616;
  --header-height: 48px;

  /* ── Tipografia ───────────────────────────────────────── */
  --font:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Fira Code", "Courier New", monospace;

  /* ── Espaçamento (base 8px) ───────────────────────────── */
  --s1:  2px;   --s2:  4px;   --s3:  8px;   --s4:  12px;
  --s5:  16px;  --s6:  24px;  --s7:  32px;  --s8:  40px;
  --s9:  48px;  --s10: 64px;  --s11: 80px;  --s12: 96px;

  /* ── Layout ───────────────────────────────────────────── */
  --max-w:     1200px;
  --content-w: 880px;

  /* ── Raio de borda ────────────────────────────────────── */
  --r-sm: 2px;  --r: 4px;  --r-md: 6px;  --r-lg: 8px;

  /* ════════════════════════════════════════════════════════
     Aliases de compat retroativa — usados em conteúdo HTML
     antigo das páginas de marca e templates legados
     ════════════════════════════════════════════════════════ */
  --ink:        #161616;
  --ink-soft:   #525252;
  --ink-mute:   #6f6f6f;
  --paper:      #ffffff;
  --canvas:     #f4f4f4;
  --canvas-2:   #e0e0e0;
  --hi-1:       #0f62fe;
  --hi-2:       #0043ce;
  --hi-3:       #4589ff;
  --hi-4:       #d0e2ff;
  --hi-5:       #edf5ff;
  --rule:       #e0e0e0;
  --rule-soft:  #c6c6c6;
  --link-vis:   #8a3ffc;
  --select:     #0f62fe;
  --font-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --beige-1:    #f4f4f4;
  --beige-2:    #e0e0e0;
  --note-bg:    #edf5ff;
  --note-bd:    #0043ce;
  --warn-bg:    #fff1f1;
  --warn-bd:    #da1e28;
  --ok-bg:      #defbe6;
  --ok-bd:      #198038;
  --code-bg:    #f4f4f4;
  --code-bd:    #e0e0e0;

  /* Botões antigos (usados em .cta, .btn-print, .page-nav-btn) */
  --btn-bg:            #0f62fe;
  --btn-border:        #0043ce;
  --btn-shadow:        none;
  --btn-color:         #ffffff;
  --btn-hover-bg:      #0353e9;
  --btn-hover-border:  #002d9c;
  --btn-hover-shadow:  none;
  --btn-active-bg:     #002d9c;
  --btn-active-shadow: none;
  --btn-radius:        2px;
  --btn-pad:           10px 20px;
  --btn-font-size:     14px;
  --btn-font-weight:   600;
}

/* ────────────────────────────────────────────────────────── */
/* ── RESET & BASE ────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--interactive); color: #fff; }

/* ── Links ─────────────────────────────────────────────── */
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
a:visited { color: var(--link-visited); }

/* ── Código ─────────────────────────────────────────────── */
code, .chip, .tag {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  color: var(--code-fg);
  font-weight: 600;
}

pre {
  margin: var(--s4) 0 var(--s6) 0;
  padding: var(--s5);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  border-radius: var(--r-sm);
}

/* ── Texto ──────────────────────────────────────────────── */
strong { font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */
.wtc-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--header-bg);
  height: var(--header-height);
  border-bottom: none;
  box-shadow: none;
}

.wtc-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s5);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s5);
}

/* Brand */
.wtc-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.wtc-brand:hover,
.wtc-brand:visited { color: var(--text-primary) !important; text-decoration: none !important; }

.wtc-brand-name { color: var(--interactive); }
.wtc-brand-q    { color: var(--interactive); }

/* Nav */
.wtc-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
  margin-left: var(--s3);
}

.wtc-nav-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4);
  height: 100%;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none !important;
  border-bottom: none;
  border-top: none;
  white-space: nowrap;
  transition: color 0.12s;
}
.wtc-nav-link:hover {
  color: var(--interactive);
  background: transparent;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.wtc-nav-link:visited { color: var(--text-secondary); }
.wtc-nav-link--active {
  color: var(--interactive) !important;
  font-weight: 600;
  border-bottom: none;
}

.wtc-nav-badge {
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-helper);
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}

/* Header actions */
.wtc-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.wtc-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  flex-shrink: 0;
}
.wtc-theme-btn:hover {
  background: rgba(0,0,0,.05);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* Botão de idioma */
.wtc-lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--s4);
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.wtc-lang-btn:hover {
  background: rgba(0,0,0,.05);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.icon-sun  { display: none; }
.icon-moon { display: inline-flex; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: inline-flex; }

/* ════════════════════════════════════════════════════════════
   MAIN & LAYOUT
   ════════════════════════════════════════════════════════════ */
.wtc-main {
  min-height: calc(100vh - var(--header-height) - 49px);
}

/* .article — wrapper de conteúdo editorial (brand pages, prefixos) */
.article {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s11) var(--s5);
}

/* Layout legado — mantido para compat, agora single-column */
.layout {
  display: block;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s10) var(--s5);
}

/* Sidenav legada — oculta (removida do HTML, mas CSS preservado p/ segurança) */
.sidenav { display: none !important; }
.sidenav-header, .sidenav h4, .sidenav ul, .sidenav-foot { display: none !important; }

/* ════════════════════════════════════════════════════════════
   HEADINGS (dentro de .article)
   ════════════════════════════════════════════════════════════ */
.article h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--s5) 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.article h2, h2.section {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--s8) 0 var(--s5) 0;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border-subtle);
  letter-spacing: -0.01em;
}
.article h2:first-child, h2.section:first-child { margin-top: 0; }

.article h3, h3.section {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--s6) 0 var(--s3) 0;
}

.article h4, h4.section {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--s5) 0 var(--s3) 0;
}

.article p, .article > p {
  margin: 0 0 var(--s4) 0;
  font-size: 14px;
  line-height: 1.75;
}

.article ul, .article ol {
  margin: var(--s3) 0 var(--s5) var(--s6);
  padding: 0;
  font-size: 14px;
  line-height: 1.75;
}
.article ul li, .article ol li { margin-bottom: var(--s2); }
.article strong { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════
   HERO (página inicial) — estilo Google: logo + barra
   ════════════════════════════════════════════════════════════ */
.hero {
  background: linear-gradient(180deg, #dbeafe 0%, #edf5ff 30%, #f4f4f4 80%);
  padding: var(--s12) var(--s5) var(--s11) var(--s5);
  text-align: center;
  border-bottom: none;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  max-width: 600px;
  width: 100%;
}

/* Logo central — SVG Figma */
.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--s4) 0;
}
.hero-logo-svg {
  width: 408px;
  height: auto;
  display: block;
}

/* Troca de logo por modo */
.hero-logo-svg--dark  { display: none; }
[data-theme="dark"] .hero-logo-svg--light { display: none; }
[data-theme="dark"] .hero-logo-svg--dark  { display: block; }

/* Tagline */
.hero-eyebrow { display: none; }
.hero-title   { display: none; }
.hero-accent  { color: var(--interactive); }

/* Subtítulo — oculto por request */
.hero-subtitle { display: none; }

.hero-counter { display: none; }
.hero-counter-num,
.hero-counter .count {
  font-weight: 700;
  color: var(--interactive);
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   PIN SEARCH (caixas de caractere)
   ════════════════════════════════════════════════════════════ */
.pin-search {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

/* Hint abaixo do grupo de botões */
.pin-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--s2);
  min-height: 18px;
}

/* ── Carbon button system ──────────────────────────────────────────────────── */

/* Wrapper coluna: pin-boxes + pin-btn-group ficam com mesma largura */
.pin-input-group {
  display: inline-flex;
  flex-direction: column;
}

/* Grupo de botões flush — largura = .pin-boxes (align-self: stretch) */
.pin-btn-group {
  display: flex;
  align-self: stretch;
}

/* Base Carbon button */
.pin-btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

/* Primary — azul IBM */
.pin-btn--primary {
  background: var(--interactive);
  color: #fff;
}
.pin-btn--primary:hover:not(:disabled) {
  background: var(--interactive-hover);
}
.pin-btn--primary:active:not(:disabled) {
  background: var(--interactive-active);
}
.pin-btn--primary:disabled {
  background: #c6c6c6;
  color: #8d8d8d;
  cursor: not-allowed;
}

/* Secondary — cinza Carbon */
.pin-btn--secondary {
  background: #393939;
  color: #fff;
}
.pin-btn--secondary:hover:not(:disabled) {
  background: #4c4c4c;
}
.pin-btn--secondary:active:not(:disabled) {
  background: #6f6f6f;
}
.pin-btn--secondary:disabled {
  background: #c6c6c6;
  color: #8d8d8d;
  cursor: not-allowed;
}

/* ── Mic: barras animadas (equalizador) — compartilhado entre home e estoque ── */
.mic-bars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
}
.mic-bar {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  animation: mic-bar-bounce 0.75s ease-in-out infinite;
  transform-origin: bottom center;
}
.mic-bar:nth-child(1) { height: 6px;  animation-delay: 0s; }
.mic-bar:nth-child(2) { height: 13px; animation-delay: 0.18s; }
.mic-bar:nth-child(3) { height: 6px;  animation-delay: 0.36s; }

@keyframes mic-bar-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50%       { transform: scaleY(1.0);  }
}

/* Spinner de processamento */
.mic-icon__spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.18);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: mic-spin-anim 0.65s linear infinite;
  vertical-align: middle;
}
@keyframes mic-spin-anim { to { transform: rotate(360deg); } }

/* Dica "↵ Pressione Enter" — aparece após reconhecimento bem-sucedido */
.wtc-mic-hint--active {
  color: var(--interactive) !important;
  font-weight: 600 !important;
  transition: color 0.2s, font-weight 0.2s;
}

/* Flash no botão CTA (Decodificar) após reconhecimento */
.wtc-mic-cta-flash {
  animation: mic-cta-flash 1.2s ease-out forwards;
}
@keyframes mic-cta-flash {
  0%   { box-shadow: 0 0 0 0   rgba(15, 98, 254, 0.6); }
  30%  { box-shadow: 0 0 0 6px rgba(15, 98, 254, 0.3); }
  100% { box-shadow: 0 0 0 0   rgba(15, 98, 254, 0.0); }
}

/* ── Mic button — variante para pin-btn-group (estoque) ────────────────────── */
/* Largura fixa para não comprimir Limpar/Decodificar */
.pin-btn--mic {
  flex: 0 0 48px;
  background: #e8e8e8;
  color: #525252;
}
.pin-btn--mic:hover { background: #d8d8d8; color: #161616; }
.pin-btn--mic:active { background: #c6c6c6; }

/* Ouvindo — azul IBM pulsante */
.pin-btn--mic.is-listening {
  background: var(--interactive);
  color: #fff;
  animation: mic-btn-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-btn-pulse {
  0%, 100% { filter: brightness(1.0);  }
  50%       { filter: brightness(1.18) saturate(1.1); }
}
/* Processando */
.pin-btn--mic.is-processing { background: #d0d0d0; color: #525252; cursor: wait; }

/* Reconhecido */
.pin-btn--mic.is-ok  { background: #24a148; color: #fff; }

/* Erro */
.pin-btn--mic.is-err { background: #da1e28; color: #fff; }

/* Dark mode */
[data-theme="dark"] .pin-btn--mic           { background: #4c4c4c; color: #c6c6c6; }
[data-theme="dark"] .pin-btn--mic:hover     { background: #606060; color: #f4f4f4; }
[data-theme="dark"] .pin-btn--mic.is-processing { background: #393939; color: #8d8d8d; }

/* ── Inline loading spinner ────────────────────────────────────────────────── */
.pin-btn-label  { pointer-events: none; transition: opacity 0.1s; }
.pin-btn-spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.pin-btn--loading .pin-btn-label   { opacity: 0; }
.pin-btn--loading .pin-btn-spinner {
  opacity: 1;
  animation: pin-spin .65s linear infinite;
}
@keyframes pin-spin { to { transform: rotate(360deg); } }

.pin-actions-hint {
  font-size: 12px;
  color: var(--text-helper);
  font-style: italic;
}
.pin-actions-hint--warn {
  color: var(--warning, #f1c21b);
  font-style: normal;
  font-weight: 600;
}

.pin-family-hint {
  font-size: 12px;
  font-weight: 600;
  color: transparent;
  text-align: center;
  letter-spacing: 0.03em;
  margin-bottom: var(--s3);
  height: 20px;
  line-height: 20px;
  transition: color 0.15s;
}
.pin-family-hint--active { color: var(--interactive); }

.pin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: text;
  overflow-x: auto;
  gap: 0;
}

/* Container das caixas */
.pin-boxes {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.15s;
  max-width: 100%;
}
.pin-boxes:focus-within {
  border-color: var(--interactive);
}

/* Cada caixa */
.pin-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 56px;
  flex-shrink: 0;
  border: none;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  transition: background 0.1s;
  user-select: none;
}

.pin-box.pin-filled  { background: var(--surface-2); }
.pin-box.pin-cursor  { background: var(--surface); animation: pin-cursor-blink 1s step-end infinite; }
.pin-box.pin-prefix  { background: var(--info-bg); color: var(--interactive); }
.pin-box.pin-prefix.pin-cursor { animation: pin-cursor-blink 1s step-end infinite; }

@keyframes pin-cursor-blink {
  0%, 49% { box-shadow: inset 0 -3px 0 var(--interactive); }
  50%, 100% { box-shadow: inset 0 -3px 0 transparent; }
}

/* Input real invisível — captura teclado e mobile keyboard */
.pin-real-input {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: -9999px;
}

/* ════════════════════════════════════════════════════════════
   RESULTADOS DA BUSCA (dropdown grande)
   ════════════════════════════════════════════════════════════ */
/* Painel de resultado — estático abaixo do input, sempre visível */
#big-search-results {
  display: block;
  margin-top: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: left;
}

/* Status bar do painel */
.wtc-rp-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.wtc-rp-status--idle   { background: var(--surface-2); color: var(--text-placeholder); }
.wtc-rp-status--typing { background: var(--info-bg);   color: var(--interactive); }
.wtc-rp-status--ok     { background: var(--success-bg); color: var(--success); }
.wtc-rp-status--warn   { background: var(--warning-bg); color: var(--warning); }
.wtc-rp-status--wait   { background: var(--info-bg);    color: var(--interactive); }
.wtc-rp-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .6; flex-shrink: 0;
}

/* Corpo: tipo + brand tag */
.wtc-rp-body {
  padding: 14px 20px 12px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  min-height: 64px;
}
.wtc-rp-chiptype {
  font-size: 24px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-primary); line-height: 1.2;
  transition: color .2s;
}
.wtc-rp-chiptype--idle {
  font-size: 14px; font-weight: 400; color: var(--text-placeholder); margin-top: 5px;
}
.wtc-rp-brand {
  display: inline-block; align-self: flex-start;
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  color: var(--interactive); background: var(--info-bg);
  border: 1px solid var(--info-bd); border-radius: var(--r);
  padding: 3px 10px; letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .2s;
}
.wtc-rp-brand--idle { color: var(--text-placeholder); background: transparent; border-color: var(--border-subtle); }

/* Subtipo inline ao lado do tipo principal */
.wtc-rp-subtype {
  font-size: 14px; font-weight: 400; color: var(--text-secondary);
  margin-left: 4px;
}

/* Rodapé — aparece só quando há resultado */
.wtc-rp-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 20px 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--text-helper);
}
.wtc-rp-sep   { opacity: .4; }
.wtc-rp-link  { color: var(--link); }
.wtc-rp-link:hover { color: var(--link-hover); text-decoration: underline; }
.wtc-rp-report-btn {
  background: none; border: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--error); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px; opacity: .75;
}
.wtc-rp-report-btn:hover { opacity: 1; }
.wtc-rp-debug-btn {
  background: none; border: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--text-helper); cursor: pointer; opacity: .65; transition: opacity .15s;
}
.wtc-rp-debug-btn:hover  { opacity: 1; color: var(--interactive); }
.wtc-rp-debug-btn:disabled { opacity: .35; cursor: default; }

/* Grade de specs do estado vazio */
.wtc-rp-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.wtc-rp-spec {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); padding: 10px 20px;
}
.wtc-rp-spec-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--interactive); font-family: var(--font-mono);
  flex-shrink: 0; white-space: nowrap; opacity: .5;
}
.wtc-rp-spec-val {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.wtc-rp-spec-val--idle {
  font-size: 20px; font-weight: 300; color: var(--border-default);
  letter-spacing: .05em; user-select: none;
}

/* Fade-in quando campo é preenchido */
@keyframes wtc-fadein {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabeçalho de colunas */
.pr-header {
  display: grid;
  grid-template-columns: 90px 100px 1fr;
  gap: 12px;
  padding: 7px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Linha de prefixo */
.pr-row {
  display: grid;
  grid-template-columns: 90px 100px 1fr;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  align-items: center;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
  transition: background 0.1s;
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:hover { background: var(--info-bg); text-decoration: none !important; }

a.pr-row        { display: grid; }
a.pr-row:visited { color: inherit; }

.pr-prefix {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--interactive);
  background: var(--info-bg);
  border: 1px solid var(--info-bd);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  display: inline-block;
  letter-spacing: 0.03em;
}
.pr-fab  { font-size: 12px; color: var(--text-secondary); }
.pr-tipo { font-size: 13px; color: var(--text-primary); line-height: 1.4; }

.pr-footer {
  padding: 9px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-helper);
  text-align: right;
}
.pr-footer a { color: var(--link); font-weight: 700; }
.pr-footer a:hover { color: var(--link-hover); }

.pr-empty {
  padding: 22px 18px;
  font-size: 13px;
  color: var(--text-helper);
  text-align: center;
}
.pr-empty a { color: var(--link); font-weight: 600; }

/* Busca do topbar — ocultada no redesign */
.top-search { display: none !important; }

/* ════════════════════════════════════════════════════════════
   NAV DROPDOWN — Fabricantes
   ════════════════════════════════════════════════════════════ */
.wtc-nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.wtc-nav-link--btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 5px;
}

.wtc-nav-arrow {
  font-size: 9px;
  opacity: 0.65;
  display: inline-block;
  transition: transform 0.15s;
}
.wtc-nav-item--dropdown:hover .wtc-nav-arrow { transform: rotate(180deg); }

/* O dropdown aparece no hover do item pai */
.wtc-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--interactive);
  min-width: 210px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 300;
}
.wtc-nav-item--dropdown:hover .wtc-dropdown { display: block; }

.wtc-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 11px 18px;
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s, color 0.1s;
  cursor: pointer;
}
.wtc-dropdown-item:last-child { border-bottom: none; }
.wtc-dropdown-item:hover { background: var(--info-bg); color: var(--interactive); text-decoration: none !important; }
.wtc-dropdown-item:visited { color: var(--text-secondary); }

.wtc-dropdown-item--dev {
  cursor: default;
  opacity: 0.4;
  pointer-events: none;
}

.wtc-dropdown-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-helper);
  white-space: nowrap;
}
.wtc-dropdown-badge--live {
  background: var(--success-bg);
  color: var(--success);
}

/* ícone de busca no pin-row — oculto por request */
.pin-icon { display: none !important; }

/* Dropdown alinhado à direita (idioma) */
.wtc-dropdown--right {
  left: auto;
  right: 0;
}

/* Item ativo no dropdown */
.wtc-dropdown-item--active {
  color: var(--interactive) !important;
  font-weight: 600;
  background: var(--info-bg);
  pointer-events: none;
  cursor: default;
}

/* (hero-logo-cn removido — logo agora é SVG) */

/* ════════════════════════════════════════════════════════════
   DECODE CARD — resultado de classificação de chip (v2)
   Classes dc2-* = redesign Carbon
   Classes dc-*  = compat retroativa (mantidas)
   ════════════════════════════════════════════════════════════ */

/* Separa o card dos prefixos abaixo */
#dc-result:not(:empty) {
  border-bottom: 1px solid var(--border-subtle);
}

/* Quando card v2 está presente, esconde "Nenhum prefixo encontrado" abaixo */
#dc-result:has(.dc2-card) + #prefix-results .pr-empty { display: none; }
/* Compat para card v1 */
#dc-result:has(.dc-card) + #prefix-results .pr-empty { display: none; }

/* ── Card v2 ─────────────────────────────────────────────── */
.dc2-card {
  background: var(--surface);
  border-left: 4px solid var(--success);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  overflow: hidden;
  text-align: left;
}

/* Barra de status */
.dc2-status {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 6px var(--s5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dc2-status--ok   { background: var(--success-bg); color: var(--success); }
.dc2-status--warn { background: var(--warning-bg); color: var(--warning); }
.dc2-status--wait { background: var(--info-bg);    color: var(--interactive); }
.dc2-status-icon  { font-size: 12px; flex-shrink: 0; }

/* Brand tag — direita do head */
.dc2-brand-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--interactive);
  background: var(--info-bg);
  border: 1px solid var(--info-bd);
  border-radius: var(--r-sm);
  padding: 3px 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Cabeçalho: chiptype esquerda, brand-tag direita */
.dc2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5) var(--s3) var(--s5);
}
.dc2-head-main { flex: 1; min-width: 0; }
.dc2-chiptype {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.dc2-subtype {
  display: inline;
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: var(--s3);
  font-weight: 400;
  letter-spacing: 0;
}
.dc2-incomplete {
  display: inline-block;
  margin-top: var(--s3);
  padding: 3px 8px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-bd);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--warning);
}

/* Grade de especificações */
.dc2-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  margin: 0 var(--s5) var(--s4) var(--s5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.dc2-spec-col {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--surface);
  padding: var(--s3) var(--s5);
}
.dc2-spec-col--wide { grid-column: span 2; }

.dc2-spec-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--interactive);
  font-family: var(--font-mono);
  flex-shrink: 0;
  white-space: nowrap;
}
.dc2-spec-val {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

/* Alerta (aviso genérico) */
.dc2-alert {
  margin: 0 var(--s5) var(--s4) var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--error-bg);
  border: 1px solid var(--error-bd);
  border-left: 3px solid var(--error);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: #520408;
  line-height: 1.55;
}

/* ── Família sem documentação pública ───────────────────────────────────── */
/* Card modifier: borda laranja/amarela no lado esquerdo */
.dc2-card--undoc { border-left-color: var(--warning); }

/* Status bar — laranja (aviso) */
.dc2-status--undoc {
  background: var(--warning-bg);
  color: var(--warning);
}

/* Bloco central de aviso — destaque máximo, impossível de ignorar */
.dc2-undoc-block {
  margin: 0 var(--s5) var(--s4) var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--warning-bg);
  border: 1px solid var(--warning-bd);
  border-left: 4px solid var(--warning);
  border-radius: var(--r-sm);
  line-height: 1.6;
}
.dc2-undoc-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: var(--s3);
  letter-spacing: 0.02em;
}
.dc2-undoc-body {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--s4);
}
.dc2-undoc-btn {
  display: inline-block;
  padding: var(--s2) var(--s4);
  background: var(--warning);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.dc2-undoc-btn:hover { opacity: 0.88; }

/* Dark mode */
[data-theme="dark"] .dc2-undoc-block {
  background: rgba(241,194,27,.08);
  border-color: rgba(241,194,27,.25);
}
[data-theme="dark"] .dc2-undoc-body { color: var(--text-helper); }
[data-theme="dark"] .dc2-status--undoc { background: rgba(241,194,27,.10); }

/* Dica operacional — oculta no frontend (dados preservados no backend) */
.dc2-tip {
  display: none; /* hidden: tips podem estar desatualizadas */
  margin: 0 var(--s5) var(--s3) var(--s5);
  padding: var(--s2) var(--s4);
  background: var(--warning-bg);
  border: 1px solid var(--warning-bd);
  border-left: 3px solid var(--warning-bd);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: #4d3800;
  line-height: 1.5;
}

/* Rodapé do card */
.dc2-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s3) var(--s5) var(--s4) var(--s5);
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-helper);
}
.dc2-conf              { color: var(--text-helper); }
.dc2-conf--grammar     { color: var(--success); font-weight: 600; }
.dc2-conf--confirmed   { color: var(--success); font-weight: 600; }
.dc2-conf--estimated   { color: var(--text-helper); }
.dc2-link    { color: var(--link); font-size: 12px; }
.dc2-link:hover { color: var(--link-hover); text-decoration: underline; }
.dc2-queue         { font-size: 12px; color: var(--text-helper); font-style: italic; }
.dc2-queue--saved  { color: var(--success, #24a148); font-style: normal; font-weight: 600; }
.dc2-queue--warn   { color: var(--warning-text, #b28900); font-style: normal; }

.dc2-report-btn {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 12px;
  color: var(--error); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px;
  opacity: 0.75;
}
.dc2-report-btn:hover { opacity: 1; }

.dc2-copy-btn {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 12px;
  color: var(--text-helper); cursor: pointer; opacity: 0.65;
  transition: opacity 0.15s;
}
.dc2-copy-btn:hover  { opacity: 1; color: var(--interactive); }
.dc2-copy-btn:disabled { opacity: 0.35; cursor: default; }

/* Loading */
.dc-loading {
  padding: 18px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-helper);
  text-align: center;
  letter-spacing: 0.03em;
}
.dc-ellipsis::after {
  content: '';
  display: inline-block;
  width: 2ch;
  text-align: left;
  animation: dc-dots 1.2s steps(4, end) infinite;
}
@keyframes dc-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* Não encontrado v2 */
.dc2-not-found {
  padding: 18px;
  font-size: 13px;
  color: var(--text-secondary);
}
.dc2-not-found-head {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s3);
  font-size: 14px;
}
.dc2-not-found-hint { line-height: 1.65; }
.dc2-not-found-warn { margin-top: var(--s3); font-size: 12px; color: var(--warning); }

.dc2-fuzzy { border-top: 1px solid var(--border-subtle); }
.dc2-fuzzy-head {
  padding: 8px 18px 4px 18px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-helper);
}
.dc2-fuzzy-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
  font-size: 13px;
}
.dc2-fuzzy-item:hover { background: var(--info-bg); }
.dc2-fuzzy-item:last-child { border-bottom: 0; }

/* ── Badge de Rentabilidade (dc2 card) ───────────────────── */
.wtc-profit-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 24px;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.wtc-profit-badge--rentavel {
  background: linear-gradient(180deg, #defbe6 0%, #b6f5c4 100%);
  color: #0e6027;
  border: 1px solid #a7f0ba;
}
.wtc-profit-badge--nao-rentavel {
  background: linear-gradient(180deg, #fff1f1 0%, #ffd7d9 100%);
  color: #750e13;
  border: 1px solid #ffb3b8;
}
.wtc-profit-badge--indeterminado {
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
[data-theme="dark"] .wtc-profit-badge--rentavel {
  background: linear-gradient(180deg, #082d14 0%, #0a3d1c 100%);
  color: #42be65; border-color: #198038;
}
[data-theme="dark"] .wtc-profit-badge--nao-rentavel {
  background: linear-gradient(180deg, #2d0a0a 0%, #3d0e0e 100%);
  color: #ff8389; border-color: #da1e28;
}
[data-theme="dark"] .wtc-profit-badge--indeterminado {
  background: var(--surface-2); color: var(--text-helper); border-color: var(--border-default);
}

/* ── Card v1 (backward compat) ───────────────────────────── */
.dc-card {
  padding: 16px 20px 14px;
  background: var(--ok-bg);
  border-left: 4px solid var(--ok-bd);
  text-align: left;
}
.dc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dc-brand {
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  color: var(--interactive); background: var(--info-bg);
  border: 1px solid var(--info-bd); border-radius: var(--r-sm);
  padding: 2px 8px; text-transform: uppercase; flex-shrink: 0;
}
.dc-head strong { color: var(--text-primary); font-size: 18px; font-weight: 700; }
.dc-head small  { font-size: 13px; color: var(--text-secondary); }
.dc-fields { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0 0 10px 0; align-items: baseline; }
.dc-fields dt { color: var(--text-helper); font-size: 9px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 0; white-space: nowrap; }
.dc-fields dd { margin: 0; color: var(--text-primary); font-size: 13px; padding: 3px 0; line-height: 1.4; }
.dc-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.07); font-size: 11px; color: var(--text-helper); }
.dc-alert { margin: 0 0 10px 0; padding: 6px 10px 6px 30px; background: var(--error-bg); border: 1px solid var(--error-bd); border-radius: var(--r-sm); font-size: 12px; color: #520408; position: relative; line-height: 1.55; }
.dc-alert::before { content: "⚠"; position: absolute; left: 9px; top: 6px; font-size: 13px; }
.dc-incomplete { margin: 0 0 10px 0; padding: 5px 10px; background: var(--warning-bg); border: 1px solid var(--warning-bd); border-radius: var(--r-sm); font-size: 12px; color: var(--warning); }
.dc-tip { margin: 0 0 10px 0; padding: 6px 10px 6px 26px; background: var(--warning-bg); border: 1px solid var(--warning-bd); border-radius: var(--r-sm); font-size: 12px; color: #4d3800; position: relative; line-height: 1.55; }
.dc-tip::before { content: "⚑"; position: absolute; left: 9px; top: 6px; color: var(--warning); }
.dc-conf, .dc-source-tag, .dc-queue { font-size: 11px; color: var(--text-helper); }
.dc-doclink, .dc-srclink { color: var(--link); font-size: 11px; border-bottom: 1px solid rgba(15,98,254,.25); }
.dc-report-btn { background: none; border: none; padding: 0; font: inherit; font-size: 11px; color: var(--error); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; opacity: 0.75; }
.dc-report-btn:hover { opacity: 1; }
.dc-copy-btn { background: none; border: none; padding: 0; font: inherit; font-size: 11px; color: var(--text-helper); cursor: pointer; opacity: 0.65; }
.dc-copy-btn:hover { opacity: 1; color: var(--interactive); }
.dc-copy-btn:disabled { opacity: 0.35; cursor: default; }
.dc-report-ok  { font-size: 11px; color: var(--success); font-style: italic; }
.dc-report-err { font-size: 11px; color: var(--error); font-style: italic; }
.dc-not-found { padding: 14px 18px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.dc-not-found-title { font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.dc-not-found-hint { line-height: 1.65; font-size: 12.5px; }
.dc-not-found-warn { margin-top: 6px; font-size: 12px; color: var(--warning); }
.dc-prefix-list { display: inline-block; font-family: var(--font-mono); font-size: 11px; background: var(--info-bg); color: var(--interactive); border-radius: var(--r-sm); padding: 2px 6px; margin: 2px 0; }
.dc-fuzzy { border-bottom: 1px solid var(--border-subtle); }
a.dc-fuzzy-item { cursor: pointer; display: grid; grid-template-columns: 180px 130px 1fr; gap: 12px; padding: 10px 18px; text-decoration: none !important; color: inherit; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
a.dc-fuzzy-item:hover { background: var(--info-bg); }

/* ════════════════════════════════════════════════════════════
   SEÇÃO DE MARCAS COBERTAS (home page)
   ════════════════════════════════════════════════════════════ */
.coverage {
  padding: var(--s10) var(--s5) var(--s11) var(--s5);
  max-width: var(--max-w);
  margin: 0 auto;
}

.coverage-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-secondary);
  margin: 0 0 var(--s6) 0;
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
  max-width: 640px;
}

.coverage-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s6);
  text-decoration: none !important;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.coverage-card--active:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--interactive);
  transform: translateY(-2px);
  text-decoration: none !important;
  color: inherit;
}
.coverage-card--active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--interactive) 0%, #4589ff 100%);
}
.coverage-card--dev {
  cursor: default;
  background: var(--surface-2);
}
.coverage-card-dev-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-helper);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: var(--s3);
}
.coverage-card-brand {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s4);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.coverage-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.cov-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  line-height: 1;
}
.cov-tag--blue  { background: var(--tag-blue-bg);  color: var(--tag-blue-fg); }
.cov-tag--green { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.cov-tag--teal  { background: var(--tag-teal-bg);  color: var(--tag-teal-fg); }
.cov-tag--cyan  { background: var(--tag-cyan-bg);  color: var(--tag-cyan-fg); }
.cov-tag--cool  { background: var(--tag-cool-bg);  color: var(--tag-cool-fg); }
.cov-tag--gray  { background: var(--tag-gray-bg);  color: var(--tag-gray-fg); }

.coverage-card-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--interactive);
}
.coverage-card-cta--disabled { color: var(--text-helper); }

/* ════════════════════════════════════════════════════════════
   TABELAS
   ════════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x: auto; margin: var(--s4) 0 var(--s6) 0; }

table {
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  width: 100%;
}

table th {
  background: linear-gradient(180deg, #0f62fe 0%, #002d9c 100%);
  color: #ffffff;
  border: 1px solid rgba(0,0,0,.15);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
}

table td {
  border: 1px solid var(--border-subtle);
  padding: 9px 14px;
  vertical-align: top;
  color: var(--text-primary);
  line-height: 1.5;
}

table tr:nth-child(even) td { background: var(--surface-2); }
table tr:hover td { background: var(--info-bg); }

/* Tabelas de anatomia / gabarito de decode */
tr.decode-gabarito th {
  font-family: var(--font-mono);
  font-size: 1.2em;
  text-align: center;
  padding: 10px;
  border-bottom: 2px solid rgba(255,255,255,.25);
}
tr.decode-labels td {
  background: var(--info-bg);
  font-weight: 700;
  font-size: 0.82em;
  color: var(--interactive);
  text-align: center;
  padding: 6px;
}
tr.decode-example td {
  font-size: 0.82em;
  color: var(--text-secondary);
  text-align: center;
  padding: 6px;
}

/* Flash de linha na busca de prefixo */
@keyframes row-flash {
  0%   { background-color: var(--info-bg); }
  60%  { background-color: var(--info-bg); }
  100% { background-color: transparent; }
}
tr.row-highlight td { animation: row-flash 2s ease-out forwards !important; }

/* ════════════════════════════════════════════════════════════
   CALLOUTS / NOTA
   ════════════════════════════════════════════════════════════ */
.nota, .callout {
  margin: var(--s5) 0 var(--s6) 0;
  padding: var(--s4) var(--s5) var(--s4) 46px;
  background: var(--info-bg);
  border: 1px solid var(--info-bd);
  border-left: 4px solid var(--interactive);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.7;
  position: relative;
  color: var(--text-primary);
}
.nota::before, .callout::before {
  content: "i";
  position: absolute;
  left: 14px; top: 13px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--interactive);
  color: #fff;
  font-style: italic;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
  font-size: 13px;
  font-family: var(--font);
}
.nota.warn, .callout.warn {
  background: var(--warning-bg);
  border-color: var(--warning-bd);
  border-left-color: var(--warning-bd);
}
.nota.warn::before, .callout.warn::before {
  content: "!";
  background: var(--warning-bd);
  color: #161616;
  font-style: normal;
}
.nota strong, .callout strong { color: var(--interactive); }

/* ════════════════════════════════════════════════════════════
   FAB BLOCK (páginas de fabricante)
   ════════════════════════════════════════════════════════════ */
.fab-block {
  border: 1px solid var(--border-subtle);
  margin: 0 0 var(--s7) 0;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.fab-header {
  background: linear-gradient(135deg, #0f62fe 0%, #002d9c 100%);
  padding: var(--s5) var(--s6);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s4);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.fab-header span {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,.80);
}

.fab-body { padding: var(--s6) var(--s7) var(--s8) var(--s7); }
.fab-body::after { content: ""; display: table; clear: both; }

.fab-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 var(--s6) 0;
  font-style: italic;
}
.fab-types { display: none; } /* substituído por chip-badges via JS */

/* Chip badges */
.chip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.chip-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  border: 1px solid;
  white-space: nowrap;
}
.chip-badge.on {
  background: var(--tag-blue-bg);
  border-color: #a8c8ff;
  color: var(--tag-blue-fg);
}
.chip-badge.off {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  color: var(--text-placeholder);
}

/* ════════════════════════════════════════════════════════════
   CHIP BLOCK (colapsável dentro de páginas de marca)
   ════════════════════════════════════════════════════════════ */
/* ── Chip Block ─────────────────────────────────────────────── */
.chip-block {
  border: 1px solid var(--border-subtle);
  margin: 0 0 var(--s4) 0;
  background: var(--surface);
  border-radius: var(--r-sm);
}

/* Header — área clicável */
.chip-block-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--s4) var(--s5);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  user-select: none;
  transition: background 0.12s;
}
.chip-block-header:hover { background: var(--surface-3); }
.chip-block-header-body  { flex: 1; min-width: 0; }
.chip-block-header strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}
.chip-block-subtitle { font-weight: 400; color: var(--text-secondary); font-size: 12px; }
.chip-block-prefixes { font-size: 12px; color: var(--text-helper); margin-top: 3px; }

/* Chevron animado */
.chip-block-chevron {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  margin-top: 2px;
}
.chip-block.is-open .chip-block-chevron { transform: rotate(180deg); }

/* Body — conteúdo truncado por padrão, com fade */
.chip-block-body {
  position: relative;
  overflow: hidden;
  max-height: 180px;
  padding: 14px 16px 0;
}
.chip-block-body::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
}
.chip-block.is-open .chip-block-body {
  max-height: none;
  overflow: visible;
  padding-bottom: 16px;
}
.chip-block.is-open .chip-block-body::after { display: none; }

/* Link EXPANDIR / RECOLHER — texto puro, azul, sem fundo */
.chip-block-expand {
  display: block;
  padding: 6px 16px 12px;
  cursor: pointer;
  background: transparent;
  border: none;
}
.chip-block-expand-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chip-block-expand:hover .chip-block-expand-label { color: var(--link-hover); }

/* ════════════════════════════════════════════════════════════
   IMAGENS
   ════════════════════════════════════════════════════════════ */
.img-wrap img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 4px;
  background: var(--surface);
}
.img-wrap p { font-size: 12px; color: var(--text-helper); margin-top: var(--s3); }

/* ════════════════════════════════════════════════════════════
   BOTÕES & CTAs
   ════════════════════════════════════════════════════════════ */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  background: var(--interactive);
  border: none;
  border-radius: var(--r-sm);
  padding: 11px 20px;
  color: #fff !important;
  font-weight: 600;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.1s;
  margin-top: var(--s3);
}
.cta:hover  { background: var(--interactive-hover); text-decoration: none !important; }
.cta:active { background: var(--interactive-active); }

.btn-print {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  text-decoration: none !important;
}
.btn-print:hover { background: var(--surface-2); text-decoration: none !important; }

.print-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px 0; }
.print-hint { font-size: 12px; color: var(--text-helper); }

/* ════════════════════════════════════════════════════════════
   NAVEGAÇÃO PREV / NEXT
   ════════════════════════════════════════════════════════════ */
.page-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--border-subtle);
  gap: var(--s4);
}
.page-nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none !important;
  transition: background 0.1s, border-color 0.1s;
}
.page-nav-btn:hover { background: var(--surface-2); border-color: var(--border-default); color: var(--text-primary) !important; text-decoration: none !important; }
.page-nav-btn:visited { color: var(--text-primary); }
.page-nav-btn.next { margin-left: auto; }

/* ════════════════════════════════════════════════════════════
   STEPS LIST
   ════════════════════════════════════════════════════════════ */
ol.steps {
  margin: var(--s4) 0 var(--s6) 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 12px 16px 12px 52px;
  margin-bottom: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.65;
}
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px; top: 12px;
  width: 24px; height: 24px;
  background: var(--interactive);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  line-height: 24px;
  border-radius: var(--r-sm);
}

/* ════════════════════════════════════════════════════════════
   HOME — CARDS LEGADOS (compat retroativa)
   ════════════════════════════════════════════════════════════ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-top: var(--s5);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card h3 {
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(135deg, #0f62fe, #0043ce);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.card-body { padding: 14px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.65; }
.card-body p { margin: 0 0 10px 0; }
.card-body p:last-of-type { margin-bottom: 0; }
.row-list { display: flex; flex-direction: column; gap: 8px; }
.row-list .row { line-height: 1.5; }
.row-list .key { color: var(--link); font-weight: 700; }
.row-list .em-dash { color: var(--text-helper); margin: 0 4px; }
.row-list .desc { color: var(--text-secondary); }
.updated { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--border-subtle); font-size: 12px; color: var(--text-helper); }
.quicklinks { text-align: center; font-size: 12px; color: var(--text-helper); margin: var(--s3) auto var(--s6) auto; max-width: 800px; line-height: 2; }
.quicklinks .count { color: var(--interactive); font-weight: 700; }
.quicklinks a { margin: 0 3px; color: var(--link); border-bottom: 0; }
.quicklinks .sep { color: var(--border-default); margin: 0 5px; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.wtc-footer {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-helper);
  padding: var(--s4) 0;
}
.wtc-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Legado */
.page-foot { background: var(--surface); border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-helper); }
.page-foot-inner { max-width: var(--max-w); margin: 0 auto; padding: 12px var(--s5); text-align: center; }

/* ════════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--interactive); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVIDADE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pin-box { width: 34px; height: 52px; font-size: 19px; }
}

@media (max-width: 900px) {
  .coverage-grid { grid-template-columns: 1fr; max-width: 480px; }
  .cards { grid-template-columns: 1fr; }
  .article { padding: var(--s6) var(--s5) var(--s9) var(--s5); }
  .pin-box { width: 30px; height: 48px; font-size: 17px; }
  .hero { padding: var(--s8) var(--s4) var(--s7) var(--s4); }
}

@media (max-width: 720px) {
  .wtc-nav-link { padding: 0 var(--s4); font-size: 13px; }
  .dc2-specs { grid-template-columns: 1fr; }
  .dc2-spec-col--wide { grid-column: span 1; }
}

@media (max-width: 640px) {
  .wtc-nav { display: none; }
  .hero-title { font-size: 28px; }
  .pin-box { width: 26px; height: 44px; font-size: 15px; }
  /* #big-search-results: sem ajuste de posição — layout estático */
  .pr-header { display: none; }
  .pr-row { grid-template-columns: 120px 1fr; }
  .pr-row .pr-tipo { display: none; }
}

@media (max-width: 400px) {
  .pin-box { width: 24px; height: 40px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — Carbon Gray 100 theme
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Superfícies */
  --bg:        #161616;
  --surface:   #262626;
  --surface-2: #393939;
  --surface-3: #525252;

  /* Texto */
  --text-primary:     #f4f4f4;
  --text-secondary:   #c6c6c6;
  --text-helper:      #8d8d8d;
  --text-placeholder: #6f6f6f;

  /* Bordas */
  --border-subtle:  #525252;
  --border-default: #6f6f6f;
  --border-strong:  #f4f4f4;

  /* Interação */
  --interactive:        #4589ff;
  --interactive-hover:  #6ea6ff;
  --interactive-active: #002d9c;
  --link:               #4589ff;
  --link-hover:         #6ea6ff;
  --link-visited:       #be95ff;
  --focus:              #4589ff;

  /* Status */
  --success:     #42be65;
  --success-bg:  rgba(66,190,101,.12);
  --success-bd:  rgba(66,190,101,.30);
  --warning:     #f1c21b;
  --warning-bg:  rgba(241,194,27,.10);
  --warning-bd:  rgba(241,194,27,.35);
  --error:       #ff8389;
  --error-bg:    rgba(255,131,137,.10);
  --error-bd:    rgba(255,131,137,.30);
  --info:        #4589ff;
  --info-bg:     rgba(69,137,255,.10);
  --info-bd:     rgba(69,137,255,.30);

  /* Tags escuras */
  --tag-blue-bg:  rgba(69,137,255,.15);  --tag-blue-fg:  #78a9ff;
  --tag-green-bg: rgba(66,190,101,.15);  --tag-green-fg: #42be65;
  --tag-teal-bg:  rgba(0,197,194,.12);   --tag-teal-fg:  #08bdba;
  --tag-cyan-bg:  rgba(0,168,255,.12);   --tag-cyan-fg:  #33b1ff;
  --tag-cool-bg:  rgba(100,102,255,.15); --tag-cool-fg:  #a2a9f8;
  --tag-gray-bg:  #525252;               --tag-gray-fg:  #f4f4f4;

  /* Código */
  --code-bg:     #393939;
  --code-fg:     #78a9ff;
  --code-border: #525252;

  /* Compat retroativa */
  --ink:        #f4f4f4;
  --ink-soft:   #c6c6c6;
  --ink-mute:   #8d8d8d;
  --paper:      #262626;
  --canvas:     #161616;
  --canvas-2:   #393939;
  --hi-1:       #4589ff;
  --hi-2:       #6ea6ff;
  --hi-3:       #78a9ff;
  --hi-4:       rgba(69,137,255,.25);
  --hi-5:       rgba(69,137,255,.12);
  --rule:       #525252;
  --rule-soft:  #393939;
  --link-vis:   #be95ff;
  --note-bg:    rgba(69,137,255,.10);
  --note-bd:    rgba(69,137,255,.35);
  --warn-bg:    rgba(241,194,27,.10);
  --warn-bd:    rgba(241,194,27,.40);
  --ok-bg:      rgba(66,190,101,.12);
  --ok-bd:      #42be65;
  --code-bd:    #525252;
  --beige-1:    #262626;
  --beige-2:    #393939;
}

[data-theme="dark"] body { background: var(--bg); color: var(--text-primary); }

/* Header fica escuro no dark mode */
[data-theme="dark"] .wtc-header { background: #161616; border-color: #393939; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
[data-theme="dark"] .wtc-brand,
[data-theme="dark"] .wtc-brand:visited,
[data-theme="dark"] .wtc-brand:hover { color: var(--interactive) !important; }
[data-theme="dark"] .wtc-nav-link { color: #c6c6c6; }
[data-theme="dark"] .wtc-nav-link:hover { color: #f4f4f4; background: rgba(255,255,255,.06); }
[data-theme="dark"] .wtc-nav-link--active { color: #ffffff !important; }
[data-theme="dark"] .wtc-nav-badge { background: #393939; color: #8d8d8d; }
[data-theme="dark"] .wtc-theme-btn { border-color: #525252; color: #c6c6c6; }
[data-theme="dark"] .wtc-theme-btn:hover { background: rgba(255,255,255,.10); color: #f4f4f4; border-color: #8d8d8d; }
[data-theme="dark"] .wtc-lang-btn { border-color: #525252; color: #c6c6c6; }
[data-theme="dark"] .wtc-lang-btn:hover { background: rgba(255,255,255,.10); color: #f4f4f4; }
[data-theme="dark"] .wtc-dropdown { background: #262626; border-color: #393939; }
[data-theme="dark"] .wtc-dropdown-item { color: #c6c6c6; border-color: #393939; }
[data-theme="dark"] .wtc-dropdown-item:hover { background: var(--hi-5); color: var(--interactive); }

/* Hero */
[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #262626 0%, #161616 100%);
  border-color: var(--border-subtle);
}
/* (hero-logo-text removido — logo agora é SVG) */

/* Dropdown Fabricantes */
[data-theme="dark"] .wtc-dropdown {
  background: #1c1c1c;
  border-color: #393939;
}
[data-theme="dark"] .wtc-dropdown-item { color: #c6c6c6; border-color: #2a2a2a; }
[data-theme="dark"] .wtc-dropdown-item:hover { background: #2a2a2a; color: #f4f4f4; }

/* Pin search */
[data-theme="dark"] .pin-boxes {
  background: var(--surface);
  border-color: var(--border-default);
}
[data-theme="dark"] .pin-box {
  color: var(--text-primary);
}
[data-theme="dark"] .pin-box.pin-filled { background: var(--surface-2); }
[data-theme="dark"] .pin-box.pin-cursor { background: var(--surface); }
[data-theme="dark"] .pin-box.pin-prefix { background: var(--hi-5); color: var(--interactive); }

/* Carbon buttons dark */
[data-theme="dark"] .pin-btn--secondary {
  background: #6f6f6f;
}
[data-theme="dark"] .pin-btn--secondary:hover:not(:disabled) {
  background: #8d8d8d;
}
[data-theme="dark"] .pin-btn--primary:disabled,
[data-theme="dark"] .pin-btn--secondary:disabled {
  background: #393939;
  color: #6f6f6f;
}

/* Resultados */
[data-theme="dark"] #big-search-results {
  border-color: var(--border-subtle);
}
[data-theme="dark"] .wtc-rp-spec { background: var(--surface); }
[data-theme="dark"] .pr-header { background: var(--surface-2); border-color: var(--border-subtle); }
[data-theme="dark"] .pr-row    { border-color: var(--border-subtle); }
[data-theme="dark"] .pr-row:hover { background: var(--hi-5); }
[data-theme="dark"] .pr-footer { background: var(--surface-2); border-color: var(--border-subtle); }

/* Decode card v2 */
[data-theme="dark"] .dc2-card { background: var(--surface); }
[data-theme="dark"] .dc2-spec-col { background: var(--surface); }
[data-theme="dark"] .dc2-specs { background: var(--border-subtle); }
[data-theme="dark"] .dc2-status { background: rgba(66,190,101,.12); }
[data-theme="dark"] .dc2-spec-label { color: var(--interactive); }

/* Decode card v1 (compat) */
[data-theme="dark"] .dc-card { background: var(--ok-bg); }

/* Tabelas */
[data-theme="dark"] table { background: var(--surface); border-color: var(--border-subtle); }
[data-theme="dark"] table td { border-color: var(--border-subtle); color: var(--text-primary); }
[data-theme="dark"] table tr:nth-child(even) td { background: var(--surface-2); }
[data-theme="dark"] table tr:hover td { background: var(--hi-5); }
[data-theme="dark"] table th { color: #fff; }
[data-theme="dark"] tr.decode-labels td { background: var(--hi-5) !important; color: var(--interactive) !important; }
[data-theme="dark"] tr.decode-example td { color: var(--text-secondary) !important; }

/* Callouts */
[data-theme="dark"] .nota, [data-theme="dark"] .callout {
  background: var(--note-bg);
  border-color: var(--note-bd);
  border-left-color: var(--interactive);
}
[data-theme="dark"] .nota::before, [data-theme="dark"] .callout::before { background: var(--interactive); }
[data-theme="dark"] .nota.warn, [data-theme="dark"] .callout.warn {
  background: var(--warn-bg);
  border-color: var(--warn-bd);
  border-left-color: var(--warning-bd);
}
[data-theme="dark"] .nota.warn::before, [data-theme="dark"] .callout.warn::before { background: var(--warning-bd); color: #161616; }

/* Fab / chip blocks */
[data-theme="dark"] .fab-block { background: var(--surface); border-color: var(--border-subtle); box-shadow: none; }
[data-theme="dark"] .chip-block { background: var(--surface); border-color: var(--border-subtle); }
[data-theme="dark"] .chip-block-header { background: var(--surface-2); border-color: var(--border-subtle); }
[data-theme="dark"] .chip-block-preview-fade { background: linear-gradient(transparent, var(--surface)); }
[data-theme="dark"] .chip-badge.on { background: rgba(69,137,255,.15); border-color: rgba(69,137,255,.3); color: #78a9ff; }
[data-theme="dark"] .chip-badge.off { background: var(--surface-2); border-color: var(--border-subtle); color: var(--text-placeholder); }

/* Cards de cobertura */
[data-theme="dark"] .coverage-card { background: var(--surface); border-color: var(--border-subtle); }
[data-theme="dark"] .coverage-card--dev { background: var(--surface-2); opacity: 0.55; }

/* Botões */
[data-theme="dark"] .btn-print { background: var(--surface); border-color: var(--border-default); color: var(--text-primary); }
[data-theme="dark"] .page-nav-btn { background: var(--surface); border-color: var(--border-subtle); color: var(--text-primary); }
[data-theme="dark"] .page-nav-btn:hover { background: var(--surface-2); }
[data-theme="dark"] .page-nav { border-color: var(--border-subtle); }

/* Cards / steps */
[data-theme="dark"] .card { background: var(--surface); border-color: var(--border-subtle); box-shadow: none; }
[data-theme="dark"] .card-body { color: var(--text-secondary); }
[data-theme="dark"] ol.steps li { background: var(--surface); border-color: var(--border-subtle); }

/* Footer */
[data-theme="dark"] .wtc-footer { background: var(--surface); border-color: var(--border-subtle); color: var(--text-helper); }
[data-theme="dark"] .page-foot  { background: var(--surface); border-color: var(--border-subtle); color: var(--text-helper); }

/* Links */
[data-theme="dark"] a               { color: var(--link); }
[data-theme="dark"] a:hover         { color: var(--link-hover); }
[data-theme="dark"] a:visited       { color: var(--link-visited); }

/* nav visited */
[data-theme="dark"] .wtc-nav-link:visited { color: #c6c6c6; }

/* Scrollbar */
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--border-default); }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: var(--interactive); }

/* ════════════════════════════════════════════════════════════
   SEPARADOR "SABER MAIS" — transição entre hero e coverage
   ════════════════════════════════════════════════════════════ */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--s5);
  max-width: 700px;
  margin: 0 auto;
  padding: var(--s8) var(--s5) var(--s6) var(--s5);
  text-align: center;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.section-divider-text {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-helper);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   COVERAGE — classes extras (coverage-inner, card-head, cov-status)
   ════════════════════════════════════════════════════════════ */
.coverage-inner {
  max-width: 700px;
  margin: 0 auto;
}
.coverage-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--s3) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.coverage-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 var(--s6) 0;
  line-height: 1.6;
}
.coverage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.cov-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cov-status--live { color: var(--success); }
.cov-status--dev  { color: var(--text-helper); }
.coverage-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--s5) 0;
}

/* ════════════════════════════════════════════════════════════
   DC2 — classes extras (status modifiers, suffix, footer links)
   ════════════════════════════════════════════════════════════ */

/* Status bar modifiers */
.dc2-status--ok   { background: var(--success-bg); color: var(--success); }
.dc2-status--warn { background: var(--warning-bg); color: var(--warning); }
.dc2-status--wait { background: var(--info-bg);    color: var(--interactive); }
.dc2-status-detail {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
  margin-left: var(--s2);
}

/* Sufixo */
.dc2-suffix {
  margin: 0 var(--s5) var(--s3) var(--s5);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.dc2-suffix-label {
  font-weight: 700;
  color: var(--text-helper);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-right: var(--s2);
}

/* Footer links e separadores */
.dc2-sep        { color: var(--border-default); font-size: 12px; }
.dc2-doclink    { color: var(--link); font-size: 12px; }
.dc2-doclink:hover { color: var(--link-hover); text-decoration: underline; }
.dc2-srclink    { color: var(--link); font-size: 12px; }
.dc2-srclink:hover { color: var(--link-hover); text-decoration: underline; }
.dc2-source-tag { font-size: 12px; color: var(--text-helper); font-style: italic; }

/* Alias para not-found-title (DC2) */
.dc2-not-found-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s3);
  font-size: 14px;
}
.dc2-prefix-list {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--info-bg);
  color: var(--interactive);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  margin: 2px 0;
}

/* Hero counter link */
.hero-counter-link { color: var(--link); font-weight: 600; font-size: 12px; }
.hero-counter-link:hover { color: var(--link-hover); text-decoration: underline; }

/* DC2 cabeçalho: brand badge acima do chip type */
.dc2-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}

/* Dark mode extras */
[data-theme="dark"] .dc2-status--ok   { background: rgba(66,190,101,.12); color: var(--success); }
[data-theme="dark"] .dc2-status--warn { background: rgba(241,194,27,.10); color: var(--warning); }
[data-theme="dark"] .dc2-status--wait { background: rgba(69,137,255,.10); color: var(--interactive); }
[data-theme="dark"] .cov-status--live { color: var(--success); }
[data-theme="dark"] .cov-status--dev  { color: var(--text-helper); }

/* ════════════════════════════════════════════════════════════
   IMPRESSÃO — renderiza apenas a tabela de prefixos
   ════════════════════════════════════════════════════════════ */
@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }

  .wtc-header, .wtc-footer, .page-foot, .page-nav,
  .print-bar, .hero, .coverage, .cards, .pin-search,
  h2.section, .nota, .callout { display: none !important; }

  .layout { display: block !important; }

  .article {
    margin: 0 !important; padding: 0 !important;
    max-width: 100% !important;
    border: none !important; box-shadow: none !important;
  }

  body, .article, table, table td {
    background: #fff !important; color: #000 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  table { font-size: 7.5pt !important; line-height: 1.3 !important; border-collapse: collapse !important; }
  table th { background: #003399 !important; color: #fff !important; padding: 4px 6px !important; font-size: 8pt !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table td { padding: 3px 6px !important; border: 1px solid #ccc !important; }
  table tr:nth-child(even) td { background: #f0f4ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  .tbl-wrap { overflow: visible !important; }
  code { background: none !important; border: none !important; color: #000 !important; font-weight: bold; }

  .article::before {
    content: "WhatTheChip? — Tabela Rápida de Prefixos";
    display: block; font-family: serif; font-size: 13pt; font-weight: bold;
    text-align: center; margin-bottom: 8pt; color: #003399;
    border-bottom: 2px solid #003399; padding-bottom: 4pt;
  }
}

/* ══════════════════════════════════════════════════════════════
   FAB PAGES — estilos específicos das páginas de fabricante
   ══════════════════════════════════════════════════════════════ */

/* ── Título grande da marca (h2) ──────────────────────────── */
.fab-brand-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

/* ── Heading da Tabela Mestra ─────────────────────────────── */
.fab-master-hdg {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-subtle);
}

/* ── Índice de navegação (TOC) ────────────────────────────── */
.fab-toc {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  margin: 0 0 20px 0;
  padding: 12px 16px 14px;
}
.fab-toc-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.fab-toc-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
}
.fab-toc-group {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.fab-toc-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-helper);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
  margin-top: 2px;
}
.fab-toc-group a {
  font-size: 13px;
  line-height: 1.9;
  color: var(--link);
  border-bottom: none;
  display: block;
}
.fab-toc-group a:hover { color: var(--link-hover); text-decoration: underline; background: transparent; }
.fab-toc-group a:visited { color: var(--link-visited); }

/* ── Cabeçalho de grupo dentro de tabelas ─────────────────── */
/*    Uso: <tbody class="tbl-group-hdr"><tr><td colspan="N">…  */
.tbl-group-hdr tr td {
  background: #ebebeb !important;
  color: #555 !important;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 5px 10px;
  border-top: 2px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
.tbl-group-hdr tr:hover td { background: #ebebeb !important; }