/* =====================================================================
   cth-heatmap.css — Attack surface heat map (módulo do Asset Map) — v2
   Todo seletor começa em .cth: nada vaza para html/body/*.
   ===================================================================== */

.cth{
  /* ---- severity: pastel ramp (baixo contraste de propósito: os painéis
     escuros carregam a estrutura, o pastel carrega o significado) ----  */
  --cth-critical:#062F3D;   /* deep blue-cyan: highest gravity */
  --cth-high:#0F5E76;       /* saturated blue-cyan */
  --cth-medium:#3F788B;
  --cth-low:#7899A5;        /* muted blue-gray */
  --cth-info:#A8C2CC;       /* pale blue-gray */
  --cth-critical-b:#6DE0EE; --cth-high-b:#6CC2DA; --cth-medium-b:#86B4C2;
  --cth-low-b:#A6C2CC;      --cth-info-b:#C8DADF;
  /* --cth-<sev>-area é opcional: define o preenchimento das caixas do
     treemap separado do acento. Sem ele, área = acento (é o caso aqui,
     porque esta rampa já é pastel). */
  --cth-on-pastel:#12242F;  /* texto sobre pastel */

  --cth-logo:#31D8E3; --cth-logo-deep:#27B0BA; --cth-logo-soft:#95E9EE;
  --cth-txt:var(--text-main,#FFFFFF);
  --cth-muted:var(--text-muted,rgba(255,255,255,.6));
  --cth-dim:rgba(255,255,255,.38);
  --cth-glass:var(--glass-bg,rgba(255,255,255,.055));
  --cth-glass-hi:var(--glass-highlight,rgba(255,255,255,.12));
  --cth-bd-sub:var(--glass-border-subtle,rgba(255,255,255,.15));
  --cth-bd:var(--glass-border,rgba(255,255,255,.20));

  /* ---- rampa de superfícies: contraste Box-Pai -> Box-Filho ---- */
  --cth-card:rgba(2,17,30,.62);          /* Box-Pai (card do ativo) */
  --cth-l1:rgba(255,255,255,.075);       /* grupo de tipo de teste  */
  --cth-l2:rgba(255,255,255,.125);       /* path / host             */
  --cth-l1-bd:rgba(255,255,255,.13);
  --cth-l2-bd:rgba(255,255,255,.20);

  --cth-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.5 12.8l5.2 5.2L19.5 6.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --cth-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --cth-r:14px;
  --cth-col:370px;                       /* largura mínima da coluna    */
  --cth-card-h:328px;                    /* altura do Box-Pai na grade  */
  --cth-zoom-h:min(560px, 68vh);         /* altura quando expandido     */
  --cth-drawer-w:400px;

  position:relative; color:var(--cth-txt); font-family:inherit; font-size:0.875rem; line-height:1.4;
}
.cth *{box-sizing:border-box}
.cth button{font:inherit; color:inherit}
.cth :focus-visible{outline:2px solid var(--cth-logo); outline-offset:2px}
.cth [hidden]{display:none !important}

.cth-frame{position:relative; display:flex; flex-direction:column}
.cth[data-profile="mobile"] .cth-desktop{display:none}
.cth[data-profile="desktop"] .cth-mobile{display:none}
.cth-mobile,.cth-desktop{display:flex; flex-direction:column}

/* ==================================================================
   1. BARRA / KPIs (compartilhado)
   ================================================================== */

.cth-dbar{display:flex; align-items:center; gap:7px 14px; flex-wrap:wrap; padding:0 0 12px}
.cth-grp{display:flex; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap}
.cth-gl{font-size:0.5625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cth-dim)}

/* O indicador NÃO é o input: `input[type=checkbox]` do styles.css empataria em
   especificidade e voltaria o controle nativo. O check é pseudo-elemento do label. */
.cth-chip{
  position:relative;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  padding:5px 11px 5px 9px; border-radius:999px; font-size:0.71875rem;
  background:var(--cth-glass); border:1px solid var(--cth-bd-sub); color:var(--cth-muted);
}
.cth-chip input{
  position:absolute; width:1px; height:1px; margin:0; padding:0; border:0;
  opacity:0; pointer-events:none; clip-path:inset(50%);
}
/* o anel existe nos dois estados: é ele que diz "isto é clicável".
   o check aparece dentro dele quando o filtro está ativo. */
.cth-chip .cth-mark{
  flex:0 0 15px; width:15px; height:15px; border-radius:50%;
  border:1.5px solid currentColor; opacity:.5;
  display:grid; place-items:center;
  transition:opacity .14s, background-color .14s, border-color .14s;
}
.cth-chip .cth-mark::after{
  content:""; width:9px; height:9px;
  background:var(--cth-logo-soft);
  -webkit-mask:var(--cth-check) center / 9px 9px no-repeat;
          mask:var(--cth-check) center / 9px 9px no-repeat;
  opacity:0; transform:scale(.6); transition:opacity .14s, transform .14s;
}
.cth-chip:hover .cth-mark{opacity:.8}
.cth-chip[data-on="1"]{color:var(--cth-txt); border-color:var(--cth-bd)}
.cth-chip[data-on="1"] .cth-mark{
  opacity:1; border-color:rgba(149,233,238,.5); background-color:rgba(39,176,186,.20);
}
.cth-chip[data-on="1"] .cth-mark::after{opacity:1; transform:none}

.cth-chip:focus-within{outline:2px solid var(--cth-logo); outline-offset:1px}

/* select do módulo: escrito com classe própria porque `.cth select`
   (0,1,1) empata com qualquer `select` do styles.css do sistema */
.cth-sel-order{
  font:inherit; font-size:0.71875rem; font-family:var(--cth-mono); color:var(--cth-txt);
  background:var(--cth-glass); border:1px solid var(--cth-bd-sub); border-radius:999px;
  padding:5px 10px; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none;
  padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center; background-size:12px 12px;
}
.cth-sel-order:hover{background-color:var(--cth-glass-hi)}
.cth-sel-order option{background:#062033; color:#fff}
.cth[data-dense="xl"] .cth-sel-order{font-size:0.8125rem}
.cth[data-dense="xxl"] .cth-sel-order{font-size:0.875rem}

/* primeira linha do módulo: o resumo do escopo (vulns, domínios, IPs) */
.cth-inv{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:3px 18px; padding:0 2px 5px;
  font-family:var(--cth-mono); font-size:0.71875rem; color:var(--cth-muted)}
.cth-inv b{color:var(--cth-txt); font-weight:600}

/* ==================================================================
   2. DESKTOP — grade de Box-Pai que cresce para baixo
   ================================================================== */
.cth-dmain{display:flex; align-items:flex-start}
.cth-dstagewrap{flex:1; min-width:0}
.cth-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--cth-col), 1fr));
  gap:14px;
  align-items:stretch;
  /* sem grid-auto-flow:dense: a ordem visual tem de ser a ordem do DOM */
}

/* o estado vazio ocupa a largura inteira */
.cth-grid[data-empty="1"]{grid-template-columns:1fr}

.cth{max-width:1360px; margin-inline:auto; margin-top:-24px}

.cth-grid[data-mode="sev"]{display:flex; flex-direction:column; gap:14px}
.cth-band{
  display:flex; flex-direction:column; height:440px;
  border:1px solid var(--cth-bd-sub);
  border-radius:var(--cth-r); background:var(--cth-card); overflow:hidden;
}
.cth-band[data-sev="critical"]{--cth-band-c:#2E8BA6}
.cth-band[data-sev="high"]    {--cth-band-c:#59A6BC}
.cth-band[data-sev="medium"]  {--cth-band-c:#88BAC7}
.cth-band[data-sev="low"]     {--cth-band-c:#B0CAD3}
.cth-band[data-sev="info"]    {--cth-band-c:#D7DFE2}

.cth-bandhd{
  flex:0 0 auto; display:flex; align-items:baseline;
  gap:12px; padding:10px 14px 6px;
}
.cth-bandnm{font-size:0.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cth-band-c)}
.cth-bandct{display:flex; align-items:baseline; gap:6px; font-family:var(--cth-mono)}
.cth-bandct b{font-size:0.9rem; color:var(--cth-txt)}
.cth-bandct span{font-size:0.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cth-dim)}

.cth-bandexp{
  margin-left:auto; flex:0 0 auto; align-self:center; cursor:pointer;
  font-family:var(--cth-mono); font-size:0.9rem; letter-spacing:.01em;
  color:var(--cth-muted); background:var(--cth-glass);
  border:1px solid var(--cth-bd-sub); border-radius:999px; padding:3px 13px;
  transition:color .14s, border-color .14s, background-color .14s;
}
.cth-bandexp:hover{color:var(--cth-txt); border-color:var(--cth-bd)}
.cth-bandexp:focus-visible{outline:2px solid var(--cth-logo); outline-offset:1px}
.cth-bandbody{position:relative; flex:1; min-height:0; margin:0 8px 8px; border-radius:9px; overflow:hidden}

.cth-mband{height:auto; margin-bottom:12px}
.cth-mband .cth-bandbody{flex:none; overflow:visible}

.cth-bandhd{cursor:pointer; user-select:none}
.cth-bandtg{
  flex:0 0 auto; align-self:center; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin:0 -6px 0 -4px; padding:0; cursor:pointer;
  background:none; border:0; border-radius:6px; color:var(--cth-muted);
  /* centrada na linha, a seta fica ~3px abaixo do meio das maiúsculas do nome */
  transform:translateY(-3px);
}
.cth-bandtg svg{width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .14s}
.cth-bandhd:hover .cth-bandtg{color:var(--cth-txt)}
.cth-bandtg:focus-visible{outline:2px solid var(--cth-logo); outline-offset:1px}
.cth-band[data-fold="1"]{height:auto}
.cth-band[data-fold="1"] .cth-bandhd{padding-bottom:10px}
.cth-band[data-fold="1"] .cth-bandbody{display:none}
.cth-band[data-fold="1"] .cth-bandtg svg{transform:rotate(-90deg)}
.cth-minv{justify-content:flex-start; padding:0 2px 8px}

.cth-tile.cth-vtile{background:var(--cth-fill); border-color:rgba(255,255,255,.07); color:#EEF3F9}

.cth-tile.cth-mmore{background:rgba(255,255,255,.045); border:1px dashed rgba(120,190,255,.28);
  box-shadow:none; color:var(--cth-muted); text-align:center;
  font-family:var(--cth-mono); font-size:0.75rem; font-weight:600; letter-spacing:.04em}
.cth-tile.cth-mmore:active{background:rgba(255,255,255,.08)}
/* ao recolher, a faixa volta ao topo da tela abaixo da busca flutuante */
.cth-mband{scroll-margin-top:84px}
.cth-vtile .cth-vt{position:absolute; inset:0; padding:10px 11px}
.cth-mdet{padding:2px 2px 24px}
.cth-mdet .cth-tdesc{margin:0 0 4px}

.cth-vt{position:absolute; inset:0; padding:9px 11px; display:flex; align-items:flex-start;
  justify-content:space-between; gap:10px; overflow:hidden; color:#EEF3F9}
.cth-vtnm{font-family:var(--cth-mono); font-size:0.75rem; font-weight:500; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical}
.cth-vtn{flex:0 0 auto; font-family:var(--cth-mono); font-size:0.875rem; font-weight:700; opacity:.8}

.cth-tdesc{margin-top:7px}
.cth-tdesc .cth-desc{margin:0; padding:0; background:none; border:0;
  font-size:0.75rem; line-height:1.5; color:var(--cth-muted)}
.cth-tdesc .cth-desc p{margin:0 0 6px}
.cth-tdesc .cth-desc p:last-child{margin-bottom:0}
.cth-dwsec{flex:0 0 auto; padding:13px 13px 8px}
.cth-dwsec:empty{display:none}
.cth-tsec{margin:0 !important}
.cth-dwsec:not(:empty) + .cth-dwbd{padding-top:0}
.cth-pop .cth-dwsec + .cth-popbd{padding-top:0}

.cth-scrollx{overflow-x:auto !important; overflow-y:hidden !important}

/* --- caixas do treemap --- */
.cth-box{position:absolute; overflow:hidden; border-radius:6px; cursor:pointer}
.cth-box.cth-g{                          /* grupo de tipo de teste */
  background:var(--cth-l1); border:1px solid var(--cth-l1-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
/* bloco do alvo: superfície neutra, sem cor de severidade preenchendo
   área. A única cor é a fita da base. */
.cth-box.cth-t{
  background:var(--cth-l2); border:1px solid var(--cth-l2-bd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cth-box.cth-t:hover{background:rgba(255,255,255,.17)}
/* alvo revelado: vira moldura para as folhas, como o path antigo */
.cth-box.cth-t.cth-open{background:var(--cth-l1); border-color:var(--cth-l1-bd)}
.cth-box.cth-t.cth-open:hover{background:var(--cth-l1)}
/* achado, visível só quando o alvo está revelado */
.cth-box.cth-leaf{
  background:var(--cth-fill); border:1px solid var(--cth-bd2); color:var(--cth-on-pastel);
  border-radius:4px;
}
.cth-lf{position:absolute; inset:0; padding:4px 6px; display:flex; flex-direction:column;
  gap:1px; overflow:hidden; line-height:1.18}
.cth-lf .cth-lsev{font-size:0.5rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; opacity:.6}
.cth-lf .cth-lt{font-weight:600; font-size:0.625rem; overflow:hidden}
.cth-lf .cth-lm{margin-top:auto; font-family:var(--cth-mono); font-size:0.53125rem; opacity:.72}
.cth-lf.cth-big{padding:7px 9px}
.cth-lf.cth-big .cth-lt{font-size:0.75rem; line-height:1.25}
.cth-lf.cth-big .cth-lm{font-size:0.59375rem}
.cth[data-dense="xl"] .cth-lf .cth-lt{font-size:0.78125rem}
.cth[data-dense="xl"] .cth-lf.cth-big .cth-lt{font-size:0.9375rem}
.cth[data-dense="xxl"] .cth-lf .cth-lt{font-size:0.875rem}
.cth[data-dense="xxl"] .cth-lf.cth-big .cth-lt{font-size:1.0625rem}
.cth-tl{position:absolute; inset:0; padding:6px 8px 12px; display:flex; flex-direction:column;
  gap:2px; overflow:hidden}
.cth-tl .cth-tn{font-family:var(--cth-mono); font-size:0.65625rem; font-weight:600; line-height:1.2;
  overflow:hidden; word-break:break-all}
.cth-tl .cth-tq{margin-top:auto; font-family:var(--cth-mono); font-size:0.5625rem; color:var(--cth-muted)}
.cth-tl.cth-big{padding:8px 10px 14px}
.cth-tl.cth-big .cth-tn{font-size:0.75rem; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical}
.cth-tl.cth-big .cth-tq{font-size:0.625rem}

.cth-box.cth-nokids::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 3px,transparent 3px 7px)}
.cth-box.cth-sel{outline:2px solid var(--cth-logo); outline-offset:-2px; z-index:5}
.cth-box:hover{filter:brightness(1.1)}
.cth-bh{
  position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:6px; padding:0 6px;
  white-space:nowrap; overflow:hidden;
}
.cth-box.cth-g > .cth-bh{
  background:linear-gradient(180deg, var(--cth-tint), rgba(255,255,255,.02));
  border-bottom:1px solid var(--cth-l1-bd);
}
.cth-bh .cth-nm{font-family:var(--cth-mono); font-weight:600; overflow:hidden; text-overflow:ellipsis}
.cth-box.cth-g > .cth-bh .cth-nm{
  font-family:inherit; letter-spacing:.06em; text-transform:uppercase; font-size:0.59375rem; color:var(--cth-logo-soft);
}
.cth-bh .cth-mt{margin-left:auto; font-family:var(--cth-mono); opacity:.6; flex:0 0 auto}
.cth-more{position:absolute; inset:auto 5px 4px 5px; font-family:var(--cth-mono); font-size:0.5625rem;
  color:var(--cth-muted); text-align:right; pointer-events:none}

.cth-tip{position:fixed; z-index:9000; pointer-events:none; max-width:330px; padding:9px 11px;
  border-radius:9px; opacity:0; transform:translateY(3px); transition:opacity .12s,transform .12s;
  background:rgba(3,20,34,.97); border:1px solid var(--cth-bd);
  box-shadow:0 18px 40px -18px #000; font-size:0.71875rem; color:var(--cth-txt)}
.cth-tip[data-show="1"]{opacity:1; transform:none}
.cth-tip .cth-tt{font-family:var(--cth-mono); font-weight:600; margin-bottom:4px; word-break:break-all}
.cth-tip .cth-tk{font-size:0.5625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cth-logo); margin-bottom:5px}
.cth-tip .cth-tr{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; font-family:var(--cth-mono); font-size:0.65625rem}
.cth-tip .cth-tr i{font-style:normal}
.cth-tip .cth-hint2{margin-top:7px; padding-top:6px; border-top:1px solid var(--cth-bd-sub);
  color:var(--cth-dim); font-size:0.625rem}

/* --- painel lateral (sticky, acompanha a rolagem) --- */
.cth-drawer{width:0; flex:0 0 auto; overflow:hidden; transition:width .22s ease, margin-left .22s ease}
.cth-drawer[data-open="1"]{width:var(--cth-drawer-w); margin-left:14px}
/* fechado precisa contribuir com ZERO altura: só width:0 não basta, o
   conteúdo invisível continuava definindo a altura de .cth-dmain e
   empurrava a legenda para o fim da página */
.cth-drawer[data-open="0"]{max-height:0}
.cth-dwin{
  position:sticky; top:14px; display:flex; flex-direction:column;
  max-height:calc(100dvh - 40px); border:1px solid var(--cth-bd-sub);
  border-radius:var(--cth-r); background:var(--cth-card);
}
/* busca flutuante visível (app.nav/search-float marca o body): o painel desce
   para não ficar coberto por ela */
.cth-dwin{transition:top .28s ease, max-height .28s ease}
body.search-float-on .cth-dwin{top:76px; max-height:calc(100dvh - 102px)}
.cth-dwx{position:absolute; top:9px; right:11px; z-index:2; border:0; background:none;
  color:var(--cth-muted); font-size:1.1875rem; cursor:pointer; line-height:1; padding:0 4px}
/* o cabeçalho do painel é a alça: arrastá-lo para fora fixa a janela */
.cth-dwhd{padding:13px 15px; flex:0 0 auto;
  cursor:grab; touch-action:none}
.cth-dwhd:active{cursor:grabbing}
.cth-dwhd .cth-dwx{cursor:pointer}
.cth-dwhd .cth-k{font-size:0.5625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cth-logo)}
.cth-dwhd h4{margin:4px 0 0; font-family:var(--cth-mono); font-size:0.84375rem; font-weight:600; word-break:break-all}
.cth-dwhd .cth-p{margin:3px 0 0; font-family:var(--cth-mono); font-size:0.6875rem; color:var(--cth-muted); word-break:break-all}
.cth-dwhd .cth-row{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.cth-dwbd{overflow-y:auto; padding:11px 13px 20px; min-height:0}
/* lista rolada (data-acima, marcado pelo JS): o topo esmaece sob "Affected
   hosts", indicando que há conteúdo acima. Vale no painel e nas janelas. */
.cth-dwbd[data-acima="1"], .cth-popbd[data-acima="1"]{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 28px);
          mask-image:linear-gradient(to bottom, transparent 0, #000 28px)}

/* ==================================================================
   5. POPUPS FIXADOS (tear-off) — `fixed`, para comparar vulns lado a lado
   ================================================================== */
.cth-poplayer{display:contents}
.cth-pop{
  position:fixed; z-index:9500; display:flex; flex-direction:column; overflow:hidden;
  width:392px; height:470px; min-width:260px; min-height:180px;
  border-radius:14px; border:1px solid var(--cth-bd);
  background:rgba(4,26,44,.97);
  box-shadow:0 40px 80px -30px #000, 0 0 0 1px rgba(0,0,0,.35);
}
/* Maximizada, a geometria vem só dos insets: o JS limpa o inline ao
   maximizar e o devolve ao restaurar. */
.cth-pop[data-max="1"]{inset:4vh 4vw; width:auto; height:auto}
.cth-pop[data-drag="1"]{box-shadow:0 50px 90px -26px #000; opacity:.97}
.cth-pophd{
  flex:0 0 auto; display:flex; align-items:flex-start; gap:10px; padding:12px 12px 11px;
  border-bottom:1px solid var(--cth-bd-sub); cursor:grab; touch-action:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}
.cth-pophd:active{cursor:grabbing}
.cth-pophd .cth-tx{min-width:0; flex:1}
.cth-pophd .cth-k{font-size:0.5625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cth-logo)}
.cth-pophd b{display:block; margin-top:3px; font-family:var(--cth-mono); font-size:0.78125rem;
  font-weight:600; word-break:break-all}
.cth-pophd .cth-row{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.cth-popact{flex:0 0 auto; display:flex; gap:5px}
.cth-popact button{
  width:26px; height:26px; border-radius:8px; cursor:pointer; display:grid; place-items:center;
  border:1px solid var(--cth-bd-sub); background:var(--cth-glass); color:var(--cth-muted); padding:0;
}
.cth-popact button:hover{background:var(--cth-glass-hi); color:var(--cth-txt)}
.cth-popact svg{width:12px; height:12px; stroke:currentColor; stroke-width:1.9; fill:none}
.cth-popbd{flex:1; min-height:0; overflow-y:auto; padding:12px 13px 18px}
.cth-pop-res{
  position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; touch-action:none;
  background:linear-gradient(135deg, transparent 50%, var(--cth-bd) 50%, var(--cth-bd) 62%, transparent 62%);
}
.cth-pop[data-max="1"] .cth-pop-res{display:none}
.cth-dragging, .cth-dragging *{user-select:none !important}

/* ==================================================================
   AJUDA — botão "?" na barra, painel ancorado nele
   ================================================================== */
.cth-helpbtn{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%; cursor:pointer; padding:0;
  display:grid; place-items:center; font-family:var(--cth-mono); font-size:0.8125rem; font-weight:600;
  color:var(--cth-muted); background:var(--cth-glass); border:1px solid var(--cth-bd-sub);
}
.cth-helpbtn:hover,.cth-helpbtn[aria-expanded="true"]{
  background:rgba(39,176,186,.18); border-color:rgba(49,216,227,.45); color:var(--cth-logo-soft);
}
.cth-help{
  position:absolute; z-index:9800; width:392px; max-width:calc(100vw - 24px);
  max-height:min(72vh, 620px); overflow-y:auto; overscroll-behavior:contain;
  border-radius:14px; border:1px solid var(--cth-bd); background:rgba(4,26,44,.98);
  box-shadow:0 38px 70px -26px #000, 0 0 0 1px rgba(0,0,0,.35);
  padding:16px 18px 18px;
}
.cth-help[hidden]{display:none}
.cth-help .cth-hx{position:absolute; top:12px; right:14px; width:24px; height:24px; border-radius:50%;
  cursor:pointer; display:grid; place-items:center; padding:0;
  border:1px solid var(--cth-bd-sub); background:var(--cth-glass); color:var(--cth-muted)}
.cth-help .cth-hx:hover{color:var(--cth-txt); background:var(--cth-glass-hi)}
.cth-help .cth-hx svg{width:11px; height:11px; stroke:currentColor; stroke-width:2.2; fill:none}
.cth-help h4{margin:0 34px 10px 0; font-size:0.59375rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cth-logo); font-weight:600}
.cth-help h4 + h4{margin-top:20px}
.cth-help p{margin:0 0 9px; font-size:0.78125rem; line-height:1.55; color:var(--cth-muted)}
.cth-help p b{color:var(--cth-txt); font-weight:600}
.cth-help .cth-legrow{display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 11px}
.cth-help .cth-lg{display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--cth-muted)}
.cth-help .cth-sw{width:11px; height:11px; border-radius:3px; flex:0 0 11px}
.cth-help dl{display:grid; grid-template-columns:auto 1fr; gap:9px 12px; margin:0}
.cth-help dt{justify-self:start}
.cth-help kbd{display:inline-block; font-family:var(--cth-mono); font-size:0.625rem; padding:3px 7px;
  border-radius:5px; border:1px solid var(--cth-bd-sub); background:var(--cth-glass); color:var(--cth-txt);
  white-space:nowrap}
.cth-help dd{margin:0; font-size:0.78125rem; line-height:1.45; color:var(--cth-muted)}

/* ==================================================================
   3. MOBILE — um nível por tela, crescendo para baixo
   ================================================================== */
.cth-mbar{display:flex; align-items:center; gap:10px; padding:0 2px 10px}
.cth-navbtn{
  border:1px solid var(--cth-bd-sub); background:var(--cth-glass); width:38px; height:38px;
  flex:0 0 38px; border-radius:11px; display:grid; place-items:center; cursor:pointer; padding:0;
}
.cth-navbtn:active{background:var(--cth-glass-hi)}
.cth-navbtn svg{width:17px; height:17px; stroke:var(--cth-logo-soft); stroke-width:2; fill:none}
.cth-navbtn[disabled]{opacity:.3; cursor:default}
.cth-mttl{flex:1; min-width:0}
.cth-mttl .cth-lv{font-size:0.5625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cth-logo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cth-mttl .cth-lv b{font-weight:600; color:var(--cth-dim); letter-spacing:.08em}
.cth-mttl h3{margin:2px 0 0; font-family:var(--cth-mono); font-size:0.90625rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cth-mcount{flex:0 0 auto; text-align:right; font-family:var(--cth-mono); line-height:1.05}
.cth-mcount b{display:block; font-size:0.9375rem; font-weight:600}
.cth-mcount span{font-size:0.53125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cth-dim)}

/* nada de rolagem horizontal aqui: com overflow o último chip (Info)
   ficava cortado pela metade e ninguém descobria que dava para rolar */
.cth-ribbon{display:flex; flex-wrap:wrap; gap:6px; padding:0 0 9px}

.cth-mmeta{display:flex; flex-wrap:wrap; gap:3px 15px; padding:0 2px 11px;
  font-family:var(--cth-mono); font-size:0.6875rem; color:var(--cth-muted)}
.cth-mmeta b{color:var(--cth-txt); font-weight:600}
.cth-srcrow{display:flex; gap:6px; flex-wrap:wrap; padding:0 0 10px}
.cth-rowbreak{flex:0 0 100%; height:0; margin:-3px 0}

.cth-mcanvas{position:relative; width:100%}
.cth-tile{
  position:absolute; border-radius:11px; overflow:hidden; cursor:pointer; padding:0; text-align:left;
  background:var(--cth-card); border:1px solid var(--cth-bd-sub);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px -16px #000;
  transition:transform .1s; touch-action:manipulation;
}
.cth-tile:active{transform:scale(.985)}

.cth-tile .cth-nm{font-family:var(--cth-mono); font-weight:600; font-size:0.78125rem; line-height:1.2;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  word-break:normal; overflow-wrap:anywhere}

.cth-tile.cth-sm .cth-nm{font-size:0.6875rem}

.cth-tile.cth-xs .cth-nm{font-size:0.65625rem; -webkit-line-clamp:3}

.cth-stripe{position:absolute; left:0; right:0; bottom:0; height:6px; display:flex; background:rgba(0,0,0,.3)}
.cth-stripe i{display:block; height:100%}

/* ==================================================================
   4. CARDS DE ACHADO (compartilhado)
   ================================================================== */
.cth-pill{font-family:var(--cth-mono); font-size:0.65625rem; padding:3px 9px; border-radius:999px;
  border:1px solid currentColor}
.cth-pill.cth-critical{color:var(--cth-critical)} .cth-pill.cth-high{color:var(--cth-high)}
.cth-pill.cth-medium{color:var(--cth-medium)} .cth-pill.cth-low{color:var(--cth-low)}
.cth-pill.cth-info{color:var(--cth-info)} .cth-pill.cth-n{color:var(--cth-muted)}

.cth-sevhd{display:flex; align-items:center; gap:8px; margin:16px 0 8px;
  font-size:0.59375rem; letter-spacing:.18em; text-transform:uppercase}
.cth-sevhd:first-child{margin-top:0}
/* cabeçalho de ALVO: o eixo principal da lista quando o nó abrange
   mais de um path/host/teste */
.cth-tgt{display:flex; align-items:baseline; gap:10px; margin:18px 0 9px; padding-bottom:7px;
  border-bottom:1px solid var(--cth-bd-sub)}
.cth-tgt:first-child{margin-top:2px}
.cth-tgt .cth-tn{font-family:var(--cth-mono); font-size:0.78125rem; font-weight:600;
  color:var(--cth-txt); word-break:break-all}
.cth-tgt .cth-tc{margin-left:auto; flex:0 0 auto; font-family:var(--cth-mono);
  font-size:0.65625rem; color:var(--cth-dim); white-space:nowrap}
/* grupo de scan, um nível acima do alvo */
.cth-scan{display:flex; align-items:center; gap:8px; margin:22px 0 10px;
  font-size:0.59375rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cth-logo)}
.cth-scan:first-child{margin-top:0}
.cth-scan .cth-ln{flex:1; height:1px; background:currentColor; opacity:.28}
/* a severidade acompanha o card quando não é mais o cabeçalho */
.cth-vsev{font-style:normal; font-weight:700; font-size:0.53125rem; letter-spacing:.14em;
  text-transform:uppercase}
.cth-sevhd .cth-ln{flex:1; height:1px; background:currentColor; opacity:.22}
.cth-vcard{border:1px solid var(--cth-bd-sub); border-radius:11px; background:var(--cth-glass);
  margin-bottom:8px; overflow:hidden; scroll-margin-top:12px}
.cth-vcard[data-hl="1"]{border-color:var(--cth-logo); box-shadow:0 0 0 1px rgba(49,216,227,.28)}
.cth-vcard>summary{cursor:pointer; padding:11px 12px; display:flex; gap:9px; align-items:flex-start;
  font-size:0.8125rem; line-height:1.35; list-style:none}
.cth-vcard>summary::-webkit-details-marker{display:none}
.cth-vcard>summary .cth-dot{width:8px; height:8px; border-radius:50%; flex:0 0 8px; margin-top:4px}
.cth-vcard>summary .cth-tx{flex:1; min-width:0}
/* caminho longo: uma linha, com degradê no fim indicando continuação (vale
   em qualquer fundo do card); o caminho inteiro está no title e na linha URL */
.cth-vcard>summary .cth-loc{display:block; white-space:nowrap; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent)}
.cth-vcard>summary .cth-cv{display:block; font-family:var(--cth-mono); font-size:0.65625rem;
  color:var(--cth-muted); margin-top:3px; word-break:break-all}
.cth-vdet{padding:0 13px 13px}
.cth-desc{
  margin:2px 0 12px; padding:11px 12px; border-radius:9px;
  background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.07);
  font-size:0.78125rem; line-height:1.55; color:rgba(255,255,255,.82);
}
.cth-desc p{margin:0 0 8px}
.cth-desc p:last-child{margin-bottom:0}
.cth-desc ul{margin:0 0 8px; padding-left:17px}
.cth-desc li{margin:0 0 4px}
.cth-vdet dl{display:grid; grid-template-columns:82px 1fr; gap:6px 10px; margin:0}
.cth-vdet dt{font-size:0.5625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cth-dim); padding-top:2px}
.cth-vdet dd{margin:0; font-family:var(--cth-mono); font-size:0.6875rem; word-break:break-word;
  color:rgba(255,255,255,.86)}
.cth-vdet dd.cth-sol{font-family:inherit; font-size:0.78125rem; line-height:1.5; color:var(--cth-muted)}
.cth-vdet code{background:rgba(0,0,0,.35); padding:2px 5px; border-radius:4px; font-size:0.65625rem}

.cth-empty{
  grid-column:1 / -1; display:grid; place-content:center; justify-items:center; gap:6px;
  min-height:260px; padding:40px 24px; text-align:center; color:var(--cth-muted); font-size:0.8125rem;
  border:1px dashed var(--cth-bd-sub); border-radius:var(--cth-r);
}
.cth-empty b{color:var(--cth-txt); font-size:0.9375rem}
.cth-empty span{max-width:46ch}

/* ==================================================================
   6. DENSIDADE — baldes pela largura do CONTAINER (data-dense, marcado
   pelo JS), não da viewport. Os fatores batem com DENSE do JS.
   ================================================================== */
.cth[data-dense="lg"]{
  --cth-col:410px; --cth-card-h:368px; --cth-drawer-w:430px;
  --cth-zoom-h:min(660px, 70vh);
  font-size:0.90625rem;
}
.cth[data-dense="xl"]{
  --cth-col:470px; --cth-card-h:430px; --cth-drawer-w:470px;
  --cth-zoom-h:min(820px, 72vh);
  font-size:0.96875rem;
}
.cth[data-dense="xxl"]{
  --cth-col:540px; --cth-card-h:496px; --cth-drawer-w:520px;
  --cth-zoom-h:min(1000px, 74vh);
  font-size:1.0625rem;
}
/* texto dentro das caixas: o JS calcula quantos caracteres cabem a
   partir destes tamanhos, então os fatores têm de bater com DENSE */
/* KPIs e chips acompanham */

.cth[data-dense="xl"] .cth-inv{font-size:0.75rem}
.cth[data-dense="xl"] .cth-chip{font-size:0.8125rem; padding:6px 13px 6px 10px}
.cth[data-dense="xl"] .cth-chip .cth-mark{flex-basis:17px; width:17px; height:17px}

.cth[data-dense="xxl"] .cth-inv{font-size:0.8125rem}
.cth[data-dense="xxl"] .cth-chip{font-size:0.875rem; padding:7px 15px 7px 11px}
.cth[data-dense="xxl"] .cth-chip .cth-mark{flex-basis:19px; width:19px; height:19px}

@media (prefers-reduced-motion:reduce){
  .cth-tile,.cth-drawer{transition:none}
}
/* toque: sem tooltip (não há ponteiro) e sem :hover preso depois do tap */
@media (hover:none){
  .cth-tip{display:none !important}
  .cth-box:hover,.cth-tile:hover{filter:none}
}
@media (max-width:1180px){ .cth-drawer[data-open="1"]{width:340px} }

/* ======================================================================
   [7] VARIANTE MONOCROMÁTICA — só tokens e apresentação
   ====================================================================== */
/* ==================================================================
   mono-theme — variante monocromática (família azul-ciano)
   Cada nível tem DOIS registros: superfície profunda (bloco do mapa) e
   acento pastel (rótulo e fio). Quanto maior a criticidade, mais densa a
   cor. Só redefine tokens e apresentação.
   ================================================================== */

.cth{
  /* a rampa vem do :root de styles.css (--sev-*), fonte única */
  --cth-critical:var(--sev-critical);  --cth-critical-b:var(--sev-critical-b);
  --cth-high:var(--sev-high);          --cth-high-b:var(--sev-high-b);
  --cth-medium:var(--sev-medium);      --cth-medium-b:var(--sev-medium-b);
  --cth-low:var(--sev-low);            --cth-low-b:var(--sev-low-b);
  --cth-info:var(--sev-info);          --cth-info-b:var(--sev-info-b);
  --cth-critical-t:var(--sev-critical-t);  --cth-high-t:var(--sev-high-t);
  --cth-medium-t:var(--sev-medium-t);      --cth-low-t:var(--sev-low-t);
  --cth-info-t:var(--sev-info-t);
  /* acentos vivos, só em rótulo e fio */
  --acc-critical:#6DE0EE;  --acc-high:#6CC2DA;  --acc-medium:#86B4C2;
  --acc-low:#A6C2CC;       --acc-info:#C8DADF;
  --cth-ok:#2E6B6E;                       /* corrigido, ainda em azul */

  --cth-frame:rgba(120,190,255,.14);      /* fio das molduras   */
  --cth-surface:rgba(255,255,255,.035);   /* superfície do alvo */
}

/* ---- 1. fita de severidade sai de cena --------------------------- */
.cth-stripe{display:none !important}
/* (a faixa do topo do card já não existe — ver .cth-card mais acima) */

/* ---- 2. grupo de scan: rótulo, não moldura ------------------------ */
.cth-box.cth-g{background:none; border:0}
.cth-box.cth-g > .cth-bh{
  background:none; border-bottom:1px solid var(--cth-frame);
  color:var(--cth-logo); letter-spacing:.14em;
}

/* ---- 3. alvo: a própria superfície carrega a severidade ---------- */
.cth-box.cth-t{
  background:var(--cth-info);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:none;
}
.cth-box.cth-t[data-sev="critical"]{background:var(--cth-critical)}
.cth-box.cth-t[data-sev="high"]    {background:var(--cth-high)}
.cth-box.cth-t[data-sev="medium"]  {background:var(--cth-medium)}
.cth-box.cth-t[data-sev="low"]     {background:var(--cth-low)}
.cth-box.cth-t[data-sev="info"]    {background:var(--cth-info)}
.cth-box.cth-t:hover{border-color:rgba(255,255,255,.22)}

/* o nome ocupa o bloco, centralizado; sem dígito, sem bloco interno */
.cth-tl{position:absolute; inset:0; padding:10px 10px 20px; display:grid; place-items:center}
.cth-tl .cth-tn{
  position:static; font-family:var(--cth-mono); font-size:0.78125rem; font-weight:500;
  line-height:1.3; text-align:center; color:#EEF3F9;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
}
.cth-tl .cth-tq{display:none}
/* o nível também em palavra: com as superfícies a 1.05:1 de luminância
   entre vizinhas, a matiz sozinha não deve carregar a informação */
.cth-box.cth-t:not(.cth-agg):not(.cth-open) .cth-tl::after{
  content:attr(data-sev); position:absolute; left:11px; bottom:7px;
  font-size:0.53125rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--acc-info); opacity:.9;
}
.cth-box.cth-t[data-sev="critical"] .cth-tl::after{color:var(--acc-critical)}
.cth-box.cth-t[data-sev="high"]     .cth-tl::after{color:var(--acc-high)}
.cth-box.cth-t[data-sev="medium"]   .cth-tl::after{color:var(--acc-medium)}
.cth-box.cth-t[data-sev="low"]      .cth-tl::after{color:var(--acc-low)}
.cth[data-dense="xl"] .cth-tl .cth-tn{font-size:0.875rem}
.cth[data-dense="xxl"] .cth-tl .cth-tn{font-size:1rem}

/* ==================================================================
   USAR O ESPAÇO QUANDO A PÁGINA É REDUZIDA: a largura mínima da coluna
   é relativa ao palco, então é o CONTEÚDO que cresce, não o nº de colunas.
   ================================================================== */
/* A medida é relativa ao PALCO (cqw), não à viewport. Dois modos:
     CONTEÚDO  desktop com zoom reduzido (dppx alto): a coluna cresce, 3-4 colunas.
     PAREDE    TV/monitor grande em escala nativa (dppx ~1): coluna quase fixa, 6-7 colunas.
   data-fit="fill" ou "zoom" na raiz força um dos modos. */
.cth-dstagewrap{container-type:inline-size}
.cth-grid{--cth-col:max(360px, 31cqw)}
.cth[data-dense="xl"] .cth-grid{--cth-col:max(460px, 28cqw)}
.cth[data-dense="xxl"] .cth-grid{--cth-col:max(520px, 23cqw)}

@media (min-width:2000px) and (max-resolution:1.25dppx){
  /* na parede o container deixa de ser limitado em degraus (acima de 4K) */
  .app-container.page-assets{max-width:96vw}
  /* clamp, não max: a coluna cresce até 700px e PARA. Depois disso todo
     espaço novo vira coluna nova, então não há teto de colunas — com
     `max` a fração acompanhava a tela e a conta empacava em 7. */
  .cth-grid{--cth-col:clamp(400px, 16cqw, 640px)}
  .cth[data-dense="lg"] .cth-grid{--cth-col:clamp(420px, 15cqw, 680px)}
  .cth[data-dense="xl"] .cth-grid{--cth-col:clamp(460px, 14cqw, 700px)}
  .cth[data-dense="xxl"] .cth-grid{--cth-col:clamp(460px, 14cqw, 700px)}
}
.cth[data-fit="fill"] .cth-grid{--cth-col:clamp(460px, 14cqw, 700px) !important}
.cth[data-fit="zoom"] .cth-grid{--cth-col:max(360px, 31cqw) !important}

/* a tipografia acompanha, senão o card cresce e o texto fica perdido */
.cth-tl .cth-tn{font-size:0.8125rem}
.cth[data-dense="lg"] .cth-tl .cth-tn{font-size:0.90625rem}
.cth[data-dense="xl"] .cth-tl .cth-tn{font-size:1.0625rem}
.cth[data-dense="xxl"] .cth-tl .cth-tn{font-size:1.25rem}
.cth[data-dense="lg"] .cth-box.cth-t .cth-tl::after{font-size:0.5625rem}
.cth[data-dense="xl"] .cth-box.cth-t .cth-tl::after{font-size:0.625rem}
.cth[data-dense="xxl"] .cth-box.cth-t .cth-tl::after{font-size:0.6875rem}

/* ---- 3b. REVELADO: a moldura tem de ser neutra ------------------- */
/* Contêiner é superfície neutra; cor pertence às folhas (senão a vuln
   crítica se fundia com a moldura). */
.cth-box.cth-t.cth-open{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.10) !important;
}
.cth-box.cth-t.cth-open > .cth-bh{
  color:var(--cth-muted); border-bottom:1px solid rgba(255,255,255,.09);
}
.cth-box.cth-t.cth-open:hover{background:rgba(255,255,255,.06) !important}

/* ---- 4. o agregado "More N" ------------------------------------- */
.cth-box.cth-t.cth-agg{
  background:rgba(255,255,255,.045); border:1px dashed rgba(120,190,255,.28);
}
.cth-box.cth-t.cth-agg:hover{background:rgba(255,255,255,.08); border-color:rgba(120,190,255,.5)}
/* o rótulo é a única coisa dentro: a contagem de vulns já aparece no
   cabeçalho do grupo, e duas linhas num bloco de espera é ruído */
.cth-box.cth-t.cth-agg .cth-tl{padding:10px; place-items:center}
.cth-box.cth-t.cth-agg .cth-tn{
  font-size:0.71875rem; color:var(--cth-muted); font-weight:600; letter-spacing:.04em;
}
.cth-box.cth-t.cth-agg .cth-tq{display:none}
.cth[data-dense="xl"] .cth-box.cth-t.cth-agg .cth-tn{font-size:0.8125rem}
.cth[data-dense="xxl"] .cth-box.cth-t.cth-agg .cth-tn{font-size:0.9375rem}

/* faixa espalhada: área que rola + coluna "› Show less" fixa à direita */
.cth-bandbody.cth-spread{display:flex; gap:3px}
.cth-spreadrow{position:relative; flex:1; min-width:0; height:100%}
.cth-fold{
  flex:0 0 auto; height:100%; border-radius:6px; cursor:pointer; user-select:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.045); border:1px dashed rgba(120,190,255,.28);
  color:var(--cth-muted); font-size:0.71875rem; font-weight:600; letter-spacing:.04em; text-align:center;
  transition:background-color .14s, border-color .14s, color .14s;
}
.cth-fold:hover{background:rgba(255,255,255,.08); border-color:rgba(120,190,255,.5); color:var(--cth-txt)}
.cth-fold:focus-visible{outline:2px solid var(--cth-logo); outline-offset:1px}
.cth-fold b{font-size:1.625rem; font-weight:400; line-height:1}
.cth[data-dense="xl"] .cth-fold{font-size:0.8125rem}
.cth[data-dense="xxl"] .cth-fold{font-size:0.9375rem}

/* ---- 5. achados revelados: mesma família, severidade em palavra -- */
.cth-box.cth-leaf{color:#EEF3F9; border-radius:5px}
.cth-lf .cth-lsev{opacity:1; letter-spacing:.14em; font-weight:700}
.cth-box.cth-leaf.cth-critical .cth-lsev{color:var(--acc-critical)}
.cth-box.cth-leaf.cth-high     .cth-lsev{color:var(--acc-high)}
.cth-box.cth-leaf.cth-medium   .cth-lsev{color:var(--acc-medium)}
.cth-box.cth-leaf.cth-low      .cth-lsev{color:var(--acc-low)}
.cth-box.cth-leaf.cth-info     .cth-lsev{color:var(--acc-info)}
.cth-lf .cth-lm{opacity:.62}

/* ---- 6. controles ------------------------------------------------  */

.cth-chip[data-on="1"]{color:var(--cth-txt)}

/* anel: superfície do nível + contorno no acento, nos dois estados */

/* desligado, o anel é vazado: o check só existe ligado */

/* a borda do chip acompanha, bem discreta */

/* mesma correção nas pílulas do tooltip e do painel: elas usavam a cor de
   SUPERFÍCIE como texto, e o "High 1" do tooltip ficava ilegível */
.cth-pill.cth-critical{color:var(--sev-critical-t)}
.cth-pill.cth-high    {color:var(--sev-high-t)}
.cth-pill.cth-medium  {color:var(--sev-medium-t)}
.cth-pill.cth-low     {color:var(--sev-low-t)}
.cth-pill.cth-info    {color:var(--sev-info-t)}

.cth-dwbd, .cth-popbd, .cth-scrollx{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.38) transparent;
}
.cth-dwbd::-webkit-scrollbar,
.cth-popbd::-webkit-scrollbar,
.cth-scrollx::-webkit-scrollbar{width:14px; height:14px}
.cth-dwbd::-webkit-scrollbar-button,
.cth-popbd::-webkit-scrollbar-button,
.cth-scrollx::-webkit-scrollbar-button{display:none; width:0; height:0}
.cth-dwbd::-webkit-scrollbar-track,
.cth-popbd::-webkit-scrollbar-track,
.cth-scrollx::-webkit-scrollbar-track{background:rgba(255,255,255,.05); border-radius:999px}
.cth-dwbd::-webkit-scrollbar-corner,
.cth-popbd::-webkit-scrollbar-corner,
.cth-scrollx::-webkit-scrollbar-corner{background:transparent}
.cth-dwbd::-webkit-scrollbar-thumb,
.cth-popbd::-webkit-scrollbar-thumb,
.cth-scrollx::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.38); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
  min-height:44px;
}
.cth-dwbd::-webkit-scrollbar-thumb:hover,
.cth-popbd::-webkit-scrollbar-thumb:hover,
.cth-scrollx::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.6); background-clip:content-box}
.cth-dwbd:hover, .cth-popbd:hover, .cth-scrollx:hover{scrollbar-color:rgba(255,255,255,.6) transparent}