:root {
  --bg: #ffffff;
  --bg-secondary: #fafafa;
  --bg-hover: #f0f0f0;
  --fg: #0a0a0a;
  --fg-muted: #59595c;
  --fg-faint: #97979a;
  /* subcategoria da sidebar: um pouco mais escuro que --fg-muted, mais perto
     do preto, para destacar melhor sobre o fundo claro. */
  --subcat-fg: #3c3c3f;
  --border: #e6e6e6;
  --card-bg: #ffffff;
  /* Laranja extraído da logo do projeto (#f5932d). "gold" preenche fundos e
     bordas; "gold-text" é a variante escurecida, usada quando o tom vira texto
     sobre fundo claro, para não perder contraste. */
  --gold: #f5932d;
  --gold-bg: rgba(245, 147, 45, .13);
  --gold-text: #c2691a;
  /* Laranja sólido de destaque em tema escuro (botões, bordas, números) —
     mesmo tom de --gold/--gold-hero (rgb(245,147,45), a cor-base da marca),
     só que opaco: --gold-hero é translúcido e, sobre o fundo quase preto do
     tema escuro, ficaria "marrom sujo" (ver comentário de --gold-hero
     abaixo). Igual à cor do tema claro — só sem a transparência que não
     funciona sobre fundo escuro. */
  --gold-fim: #f5932d;
  /* O laranja do ícone da ilustração do hero (ex.: a raposa da MetaMask em
     assets/logo-criptools.png) é o próprio --gold, com uma transparência —
     --gold-hero reproduz essa cor+transparência como token: é a parada final
     do degradê da escrita "criptools" (.lw-b) e o fundo dos botões de ação.
     Só faz sentido sobre fundo claro — em tema escuro cai para --gold-fim
     sólido (ver overrides de .lw-b/.contact-btn/.submit-btn), porque
     translúcido sobre fundo quase preto vira marrom sujo, ilegível. */
  --gold-hero: rgba(245, 147, 45, .45);
  /* Card fixado (.card.pinned): mesmo --card-bg dos demais, com uma borda
     grossa em volta. Preta no tema claro; no escuro a preta somiria, então
     cai para um tom claro (ver overrides). Também é a cor do ícone de fixar
     quando ativo. */
  --pin-border: #0a0a0a;
  --accent: var(--gold);
  --accent-bg: var(--gold-bg);
  --radius-sm: 6px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.04);
  --shadow-hover: 0 4px 16px rgba(0,0,0,.08);
  --sidebar-w: 300px;   /* comporta o rótulo mais longo (Compliance | Travel Rule) */
}

:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-secondary: #131313;
  --bg-hover: #1e1e1e;
  --fg: #f2f2f2;
  --fg-muted: #a3a3a3;
  --fg-faint: #6b6b6b;
  /* subcategoria: um pouco mais claro que --fg-muted, mais perto do branco,
     para destacar melhor sobre o fundo escuro. */
  --subcat-fg: #c2c2c2;
  --border: #262626;
  --card-bg: #141414;
  --gold: #f5932d;
  --gold-bg: rgba(245, 147, 45, .16);
  --gold-text: #f5932d;
  --shadow: 0 1px 2px rgba(0,0,0,.3);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.4);
  --pin-border: #f4f4f5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --bg-secondary: #131313;
    --bg-hover: #1e1e1e;
    --fg: #f2f2f2;
    --fg-muted: #a3a3a3;
    --fg-faint: #6b6b6b;
    --subcat-fg: #c2c2c2;
    --border: #262626;
    --card-bg: #141414;
    --gold: #f5932d;
    --gold-bg: rgba(245, 147, 45, .16);
    --gold-text: #f5932d;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
    --shadow-hover: 0 8px 24px rgba(0,0,0,.4);
      --pin-border: #f4f4f5;
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.layout {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transition: transform .2s ease;
}

/* padding-left de 20px: alinha o início da escrita com os ícones das
   categorias (x=20). O fim da escrita cai em x=264, igual ao fim do texto
   das linhas de categoria — ver --sb-gutter abaixo. */
.sidebar-header {
  padding: 12px 20px;
  /* --sb-gutter = largura da barra de rolagem da lista, medida no app.js.
     Reservá-la aqui mantém o fim de "criptools" alinhado ao fim das linhas
     de categoria, que ficam dentro da área rolável. */
  padding-right: calc(20px + var(--sb-gutter, 0px));
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 2px;
  font-weight: 700;
  /* maior que antes (27px) — a caixa (.sidebar-header/.logo) mantém a mesma
     altura/largura; só o texto cresce, centralizado pelo align-items. */
  font-size: 31px;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--fg);
}

/* Sora: geométrica e um pouco mais condensada que a Inter, dá presença à marca
   sem competir com o texto da interface. */
.logo-word {
  display: inline-flex;
  margin-left: auto;
  font-family: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* "criptools" (e "Law Enforcement", mesmas classes) sem degradê: preto sólido
   fosco no tema claro, branco sólido no escuro — as duas metades da palavra
   com a mesma cor. */
.lw-a, .lw-b { color: #0a0a0a; }

:root[data-theme="dark"] .lw-a,
:root[data-theme="dark"] .lw-b { color: #ffffff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lw-a,
  :root:not([data-theme="light"]) .lw-b { color: #ffffff; }
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-faint);
  margin: 16px 10px 6px;
}

.cat-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 13.5px;
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}

/* Hover discreto: leve deslocamento, faixa lateral na cor da marca e o ícone
   ganhando cor. Nada de escala, para não deslocar a lista inteira. */
.cat-item {
  position: relative;
  transition: background .14s ease, padding-left .14s ease, color .14s ease;
}

.cat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 2px 2px 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height .16s ease;
}

.cat-item:not(.is-soon):hover {
  background: var(--bg-hover);
  padding-left: 14px;
}

.cat-item:not(.is-soon):hover::before { height: 60%; }

/* Ícone em preto no hover (branco no tema escuro); a faixa lateral segue laranja. */
.cat-item:not(.is-soon):hover .cat-icon { color: var(--fg); }

.cat-item.active::before,
.cat-item.expanded::before { height: 60%; }

/* Categoria destacada tanto quando expandida quanto quando selecionada — e
   também em negrito (a regra vale igual para a subcategoria, que também é
   .cat-item). */
.cat-item.active,
.cat-item.expanded {
  background: var(--gold-bg);
  color: #0a0a0a;
  font-weight: 700;
}

.subcat-item.active { font-weight: 700; }

:root[data-theme="dark"] .cat-item.active,
:root[data-theme="dark"] .cat-item.expanded { color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat-item.active,
  :root:not([data-theme="light"]) .cat-item.expanded { color: #fff; }
}

.cat-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg-faint);
}

.cat-icon svg { width: 16px; height: 16px; }

.cat-item.active .cat-icon,
.cat-item:hover .cat-icon { color: inherit; }

.cat-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
  transition: transform .15s ease;
  /* box-sizing:content-box (o padrão do projeto é border-box, ver reset
     global) — sem isso, os 20px de padding (10+10) somados ao width:14px
     estourariam o próprio width em border-box, zerando a área de conteúdo
     e encolhendo o SVG filho até sumir (foi exatamente o que aconteceu
     antes de eu perceber). */
  box-sizing: content-box;
  /* padding aumenta a área de toque (14px sozinho é apertado no celular);
     a margem negativa cancela esse acréscimo no layout da linha, então o
     ícone continua visualmente do mesmo tamanho e na mesma posição — só
     fica mais fácil de acertar o toque. -16px à esquerda = -6px de antes
     (encostar no contador) + -10px de compensação do padding. */
  padding: 10px;
  margin: -10px -10px -10px -16px;
}

/* O <svg> não tem width/height no HTML (só viewBox) — sem isso, o tamanho
   padrão que cada navegador assume difere (Chromium encolhe pra caber no
   flex por conta própria; outros motores podem renderizar enorme e cortar,
   somindo o ícone na prática). Fixando aqui garante o mesmo resultado em
   qualquer navegador. */
.cat-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Categorias sem subcategoria mantêm a coluna da setinha vazia, para que
   todos os contadores fiquem alinhados um sobre o outro. */
.cat-chevron.is-vazia { visibility: hidden; }

.cat-item.expanded .cat-chevron {
  transform: rotate(180deg);
  color: inherit;
}

.subcat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px;
}

.subcat-item {
  padding-left: 10px;
  font-size: 12.5px;
  color: var(--subcat-fg);
}

.subcat-dash {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg-faint);
}

.cat-count {
  font-size: 11px;
  color: var(--fg-faint);
  background: var(--bg-hover);
  border-radius: 3px;
  /* fundo do mesmo tamanho para qualquer contagem: a caixa e dimensionada
     para o maior valor possivel (999), nao para o texto atual. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 30px;
  height: 16px;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.cat-item.active .cat-count,
.cat-item.expanded .cat-count {
  color: #0a0a0a;
  background: rgba(0,0,0,.06);
}

/* Contagem em negrito só na subcategoria */
.subcat-item.active .cat-count { font-weight: 700; }

:root[data-theme="dark"] .cat-item.active .cat-count,
:root[data-theme="dark"] .cat-item.expanded .cat-count {
  color: #fff;
  background: rgba(255,255,255,.08);
}

/* Ícone da categoria e travessão da subcategoria em preto quando em destaque */
.cat-item.active .cat-icon,
.cat-item.expanded .cat-icon { color: #0a0a0a; }
.subcat-item.active .subcat-dash { color: #0a0a0a; font-weight: 800; }

:root[data-theme="dark"] .cat-item.active .cat-icon,
:root[data-theme="dark"] .cat-item.expanded .cat-icon,
:root[data-theme="dark"] .subcat-item.active .subcat-dash { color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat-item.active .cat-count,
  :root:not([data-theme="light"]) .cat-item.expanded .cat-count { color: #fff; background: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .cat-item.active .cat-icon,
  :root:not([data-theme="light"]) .cat-item.expanded .cat-icon,
  :root:not([data-theme="light"]) .subcat-item.active .subcat-dash { color: #fff; }
}

/* Categorias fixadas no rodapé: mesmo respiro das categorias da lista acima
   (que ficam coladas entre si dentro de .sidebar-nav). */
.sidebar-le {
  padding: 0 10px;
  padding-right: calc(10px + var(--sb-gutter, 0px));
}

/* O bloco fixo (Law Enforcement) separa-se da lista rolável — a linha
   alaranjada marca a fronteira entre as categorias e o acesso restrito. */
#leGroup {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 147, 45, .45);
}

/* Law Enforcement em negrito no rodapé da coluna. */
.sidebar-le .cat-label { font-weight: 700; }

.sidebar-footer {
  padding: 10px;
  padding-right: calc(10px + var(--sb-gutter, 0px));
  border-top: 1px solid var(--border);
}

/* Links institucionais no rodapé da coluna (Privacidade · Termos · Informações). */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 2px 4px 10px;
  font-size: 12px;
}
.foot-links a {
  color: var(--fg-muted);
  text-decoration: none;
}
.foot-links a:hover { color: var(--gold-text); }
.foot-links a[aria-current="page"] { color: var(--gold-text); font-weight: 600; }

.contact-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: var(--gold-hero);
  color: #000;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.contact-btn .cat-icon { color: inherit; }

.contact-btn:hover { filter: brightness(1.08); }

/* --gold-hero é translúcido — sobre o fundo quase preto da sidebar em tema
   escuro isso viraria marrom sujo, então cai para --gold-fim opaco. */
:root[data-theme="dark"] .contact-btn { background: var(--gold-fim); color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact-btn { background: var(--gold-fim); color: #fff; }
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 30;
}

/* ---------- Filtros (no cabeçalho da listagem, à direita) ---------- */

.filter-wrap {
  position: relative;
  flex-shrink: 0;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.filter-toggle:hover { border-color: var(--gold); color: var(--fg); }

.filter-wrap.open .filter-toggle {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--fg);
}

.filter-icon { display: inline-flex; width: 15px; height: 15px; }
.filter-icon svg { width: 100%; height: 100%; }

.filter-chevron {
  display: inline-flex;
  width: 13px;
  height: 13px;
  transition: transform .15s ease;
}
.filter-chevron svg { width: 100%; height: 100%; }

.filter-wrap.open .filter-chevron { transform: rotate(180deg); }

.filter-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #0a0a0a;
  background: var(--gold);
  padding: 1px 7px;
  border-radius: 999px;
}

:root[data-theme="dark"] .filter-badge { color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filter-badge { color: #fff; }
}

.filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  width: 290px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-hover);
}

.filter-group + .filter-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.filter-group-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-faint);
  margin: 0 0 8px;
}

.chain-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chain-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.chain-chip:hover { border-color: var(--gold); color: var(--fg); }

.chain-chip.on {
  background: var(--gold-bg);
  border-color: var(--gold);
  color: #0a0a0a;
  font-weight: 700;
}

:root[data-theme="dark"] .chain-chip.on { color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chain-chip.on { color: #fff; }
}

.chain-chip-count { font-size: 10px; opacity: .7; }

.filter-clear {
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.filter-clear:hover { border-color: var(--gold); color: var(--gold-text); }


/* Categoria que leva para outra página (Law Enforcement -> login) */
.cat-item.cat-link { text-decoration: none; color: var(--fg); }

.cat-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--fg-faint);
}
.cat-lock svg { width: 100%; height: 100%; }
.cat-item.cat-link:hover .cat-lock { color: var(--gold); }

/* Cadeado/check do botão "Law Enforcement" (.contact-btn): maior que o
   .cat-lock padrão (13px) para ficar bem visível, e sem opacity reduzida —
   o SVG já vem com sua própria cor sólida (preto no fechado, cinza no
   check de autenticado), então esmaecer por cima só atrapalharia a
   diferença entre os dois estados. Sem padding-left aqui: um padding
   somado a um width/height fixo sob box-sizing:border-box global (linha
   ~85) encolhe a área de conteúdo real do ícone, como já aconteceu e foi
   documentado para .cat-chevron. O espaçamento já vem do gap do
   .contact-btn (flex) + margin-left:auto abaixo. */
.contact-btn .cat-lock {
  width: 17px;
  height: 17px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Categoria desativada ("em breve") */
.cat-item.is-soon { opacity: .5; cursor: not-allowed; }
.cat-item.is-soon:hover { background: transparent; }


/* ---------- Content ---------- */

.content {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: margin-left .2s ease;
}

/* Barra lateral recolhida (botão de três riscos no desktop) */
body.rail-collapsed .sidebar { transform: translateX(-100%); }
body.rail-collapsed .content { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .content { transition: none; }
}

/* ---------- Cabeçalho da listagem ---------- */

.main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.main-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.main-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg);
}

.active-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 8px;
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gold-text);
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  padding: 1px 8px;
  border-radius: 999px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.icon-btn:hover { background: var(--bg-hover); color: var(--fg); }

/* Botão de abrir/fechar a sidebar — fundo laranja para dar destaque visual
   e ajudar a localizar no celular, onde a sidebar abre fechada por padrão. */
#sidebarToggle {
  background: var(--gold-hero);
  color: #000;
  border-color: transparent;
}
#sidebarToggle:hover { filter: brightness(1.08); background: var(--gold-hero); color: #000; }
:root[data-theme="dark"] #sidebarToggle { background: var(--gold-fim); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #sidebarToggle { background: var(--gold-fim); color: #fff; }
}

/* ---------- Switch de tema claro/escuro ---------- */

.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  padding: 0 6px;
  margin-left: auto;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease;
}

.ts-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--fg-faint);
  transition: color .2s ease;
}

.ts-icon svg { width: 13px; height: 13px; }

.ts-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}

:root:not([data-theme="dark"]) .ts-sun { color: var(--gold); }
:root[data-theme="dark"] .theme-switch { background: #1a1a1a; }
:root[data-theme="dark"] .ts-thumb { transform: translateX(24px); background: #2a2a2a; }
:root[data-theme="dark"] .ts-moon { color: var(--gold); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-switch { background: #1a1a1a; }
  :root:not([data-theme="light"]) .ts-thumb { transform: translateX(24px); background: #2a2a2a; }
  :root:not([data-theme="light"]) .ts-moon { color: var(--gold); }
  :root:not([data-theme="light"]) .ts-sun { color: var(--fg-faint); }
}

.search-wrap {
  flex: 1;
  position: relative;
  max-width: 480px;
}

.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-faint);
}

#searchInput {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--fg);
  font-family: inherit;
  font-size: 13.5px;
}

#searchInput:focus {
  outline: none;
  border-color: var(--gold);
}

.main {
  padding: 20px 24px 60px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Explicação técnica da categoria/subcategoria, no lugar da contagem de links */
.main-desc {
  margin: 0;
  max-width: 76ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
  text-align: justify;
  text-justify: inter-word;
}

.main-meta {
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.main-meta:empty { display: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* ---------- Home / watermark ---------- */

.home-hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* --footer-h (definida em js/app.js só no index) é a altura do rodapé da
     página, que fica fora de .layout — sem descontar essa altura, a tela
     inicial (só a logo, sem nenhum card) sobrava exatamente esse tanto e
     forçava rolagem só para revelar o rodapé. Nas demais páginas a variável
     não existe e o fallback (0px) mantém o comportamento de sempre. */
  min-height: calc(100vh - 140px - var(--footer-h, 0px));
  text-align: center;
  user-select: none;
}

/* Logo do projeto: fica acima da escrita, sem sobrepor.
   O PNG já tem canal alfa (fundo removido), então não precisa de blend. */
.home-hero .hero-logo {
  display: block;
  /* O teto em vh fica abaixo do +20% "cheio" (52vh -> 62.4vh) de propósito:
     em janelas baixas e largas, 62.4vh estourava a altura da home e trazia
     rolagem de volta (ver home-hero abaixo, que depende de caber sem rolar). */
  width: min(696px, 76.8vw, 53vh);
  height: auto;
  /* margem negativa: o PNG tem uma folga transparente considerável em volta
     do desenho, então uma margem positiva deixa a escrita "criptools" longe
     demais da ilustração. */
  margin: 0 auto -40px;
  opacity: .28;
  pointer-events: none;
  user-select: none;
}

:root[data-theme="dark"] .home-hero .hero-logo { opacity: .22; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-hero .hero-logo { opacity: .22; }
}

.home-hero .watermark-logo {
  opacity: .55;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.home-hero .watermark-logo .logo-word {
  font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 6rem);
  letter-spacing: .01em;
}

/* Mesmo tom de cinza do .home-tagline logo abaixo, em vez do preto/branco
   fosco (.lw-a/.lw-b) usado no wordmark do topo. */
.home-hero .watermark-logo .lw-a,
.home-hero .watermark-logo .lw-b {
  color: var(--fg-faint);
}

.home-hero .home-tagline {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card:hover {
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
  transform: translateY(-1px);
}

/* ---------- Card fixado (.card.pinned) ---------- */
/* Mesmo --card-bg dos demais; o realce é só a borda grossa em volta. */
.card.pinned,
.card.pinned:hover {
  border: 2px solid var(--pin-border);
}

/* nos placeholders dos módulos do le.html o card ocupa toda a largura do main
   — a margem direita do texto coincide com a da página */
.le-module .card { max-width: none; }
.le-module .card .card-desc { display: block; -webkit-line-clamp: unset; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.card-favicon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--bg-hover);
  object-fit: cover;
}

.card-title {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Copiar link fica ao lado do nome do serviço */
.card-title-wrap .copy-btn {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: .55;
}

.card:hover .card-title-wrap .copy-btn { opacity: 1; }

.card-link {
  text-decoration: none;
  color: var(--fg);
  flex-shrink: 0;
}

.card-desc {
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

.badge-free      { background: var(--bg-hover); color: var(--fg-muted); }
.badge-freemium  { background: var(--bg-hover); color: var(--fg-muted); }
.badge-official  { background: var(--bg-hover); color: var(--fg-muted); }
.badge-paid      { background: var(--gold-bg); color: var(--gold-text); }
.badge-enterprise{ background: var(--fg); color: var(--bg); }
.badge-type      { background: var(--bg-hover); color: var(--fg-muted); }

/* Rede de utilização da ferramenta: mesma forma das demais tags
   (Gratuito, Agregador...), diferenciada só pela cor alaranjada. */
.badge-chain {
  background: var(--gold-bg);
  color: var(--gold-text);
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--fg-faint);
  cursor: pointer;
}

.card-action:hover { background: var(--bg-hover); color: var(--fg); }

/* Ícone de fixar quando ativo: preto (tom claro no tema escuro), como a borda. */
.card-action.pinned { color: var(--pin-border); }


.card-spacer { flex: 1; }

.card-visit {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
}

.card-visit:hover { background: var(--gold-bg); }

/* exchange apreendida/encerrada: não há para onde ir */
.card-sem-site {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-faint);
  font-style: italic;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--fg-muted);
  font-size: 14px;
}

/* ---------- Law Enforcement spreadsheet view ---------- */


.le-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.le-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-bg);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.5;
}

.le-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}

.le-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.le-toolbar-info {
  font-size: 13px;
  color: var(--fg-muted);
}

.le-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.le-download:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}

#leGroups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.le-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.le-group-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--fg);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
}

.le-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-faint);
}

.le-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.le-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 680px;
}

.le-table th {
  text-align: left;
  padding: 9px 12px;
  background: var(--bg-secondary);
  color: var(--fg-faint);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.le-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--fg);
}

.le-table tbody tr:last-child td { border-bottom: none; }

.le-table tbody tr:hover { background: var(--bg-hover); }

.le-name {
  font-weight: 600;
  white-space: nowrap;
}

.le-desc {
  color: var(--fg-muted);
  line-height: 1.5;
  min-width: 260px;
}

.le-updated {
  white-space: nowrap;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.le-action { white-space: nowrap; }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--fg);
  color: var(--bg);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0);
  }
  .sidebar-backdrop.show {
    display: block;
  }
  .content {
    margin-left: 0;
  }
  .main {
    padding: 16px 14px 60px;
  }
}

@media (max-width: 480px) {
  .search-wrap { max-width: none; }
  .grid { grid-template-columns: 1fr; }
}