/* Tema TrendAI (20/10/2026, pedido do usuário: "rouba esse estilo" de trendaisecurity.com). Carregado por último em
   todas as páginas: troca as cores, a letra e os detalhes de marca pelos do site. Tokens tirados do CSS do site:
   vermelho TrendAI #d71920 (400 #f94548, 600 #ae1218), laranja #ff9500, degradê "90deg, vermelho 51%, laranja",
   cinzas "void" (#000 a #f1f1f1) e a letra Work Sans (licença SIL OFL, arquivo e licença ao lado deste). */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/worksans-latin.woff2") format("woff2");
}
html, body { background: var(--black); }
body, button, input, select, textarea { font-family: var(--ta-font); }
body { font-feature-settings: "tnum" 0; }

/* Casca: preto puro, linha em degradê embaixo do topo (a linha que brilha entre as seções do site). */
.sidebar { background: var(--black); border-right: 1px solid var(--line-soft); }
.topbar { background: rgb(0 0 0 / 86%); border-bottom: 0; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ta-grad); opacity: .85; pointer-events: none; }
.workspace { background: var(--panel); border-color: var(--line); }
.nav-item.active { background: rgb(215 25 32 / 12%); }
.nav-item.active::before { background: var(--ta-grad); width: 3px; }
.nav-item.active > svg { color: var(--ta-red-400); }
.client-tab.selected { box-shadow: inset 0 -2px 0 var(--ta-red); }
.client-tab.selected .client-dot, .workspace-dot { background: var(--ta-red); }

/* Títulos como os do site: grossos e apertados; o sobretítulo no degradê. */
.page-heading h1, h1 { font-weight: 700; letter-spacing: -.025em; }
#eyebrow, .eyebrow { background: var(--ta-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: .14em; }
h2, h3 { letter-spacing: -.01em; }

/* Botões: vermelho cheio e contorno claro, cantos de 6 px. */
.button { border-radius: 6px; font-weight: 600; }
.button.primary { background: var(--ta-red); border-color: var(--ta-red); color: var(--white); box-shadow: none; }
.button.primary:hover { background: var(--ta-red-600); border-color: var(--ta-red-600); }
.button.secondary { background: transparent; border-color: #636363; color: var(--text); }
.button.secondary:hover { border-color: var(--text); }
.text-button { color: var(--ta-red-400); }

/* Cartões pretos com borda fina, como os do site. */
.panel, .kpi, .pf-tile, .pf-risk, .pf-section, .tv-card { background: var(--panel); border-color: var(--line); }
.pf-summary { background: var(--line); border-color: var(--line); }
.pf-summary .pf-stat { background: var(--panel); }
.pf-tile-icon { background: rgb(215 25 32 / 12%); }
.pf-tile-icon svg { stroke: var(--ta-red-400); }
.pf-title { font-weight: 700; letter-spacing: -.02em; }

/* Palco do mapa e TV na mesma letra; números alinhados. */
.am-stage, .am-tools button, .am-layers button, .am-tip, .tv { font-family: var(--ta-font); }
.am-stats b, .am-layers b, .am-card b, .tv-attack-kpis b { font-variant-numeric: tabular-nums; }
.am-brand h2 { font-weight: 800; letter-spacing: -.01em; text-transform: none; font-size: var(--fs-2xl); }
.am-brand h2 em { font-style: normal; background: var(--ta-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-stage { background: radial-gradient(ellipse at 70% 30%, rgb(46 15 228 / 12%) 0%, transparent 45%), radial-gradient(ellipse at 50% 46%, #0d0d10 0%, #050506 58%, var(--black) 100%); border-color: var(--line-soft); }
.am-live.on i { background: var(--ta-red); }
.am-tools button { border-radius: 6px; background: rgb(0 0 0 / 82%); }
.am-tools button[aria-pressed="true"] { border-color: var(--ta-red); box-shadow: inset 0 0 0 1px var(--ta-red); }
.am-head .am-seg, .am-layers button, .am-card { border-radius: 8px; }
.am-card { background: rgb(0 0 0 / 86%); }
.tv { background: var(--black); }
.tv-head { position: relative; padding-bottom: 14px; }
.tv-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ta-grad); opacity: .85; }

/* Entrada: o mesmo preto com o degradê no botão. */
.login-box .button.primary { background: var(--ta-grad); border: 0; }

/* Seletor de período do topo: escondido onde não vale; onde vale, escuro como os outros controles. */
#period[hidden] { display: none !important; }
.toolbar select { background-color: var(--panel); border-color: #4b4b4b; color: var(--text); }
.toolbar select:hover { border-color: var(--muted); }
.toolbar select option { background: var(--panel); color: var(--text); }