:root{
  --bg-spot-blue: 0.10;
  --bg-spot-red:  0.08;
  --amber:#f5a623;
  --green:#34d399;
}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Code",monospace}

.hero{padding:84px 0 40px; position:relative; overflow:hidden}

/* Os gradientes terminam na PROPRIA cor com alfa 0, nao em `transparent`.
   `transparent` e' rgba(0,0,0,0): interpolar ate' ele passa por preto e cria uma
   borda suja no meio do brilho. Gradiente grande ja' e' propenso a banding, e o
   browser usa dithering para disfarcar -- quanto menos motivo para banda, menos
   dithering visivel quando a area e' re-rasterizada na rolagem. */
.hero::before{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(800px 380px at 12% 0%, rgba(4,107,210,var(--bg-spot-blue)), rgba(4,107,210,0) 60%),
        radial-gradient(700px 380px at 92% 100%, rgba(224,53,53,var(--bg-spot-red)), rgba(224,53,53,0) 60%);
    }

.hero-grid{display:grid; grid-template-columns: 1.15fr 1fr; gap:40px; align-items:center; position:relative}


.lead{font-size:clamp(16px,2vw,19px); color:#c7d2fe}

.livepill{margin-top:18px; font-size:13px; color:#cbd5e1; display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid var(--ring); border-radius:999px; background:rgba(255,255,255,.03)}

/* PONTO "AO VIVO" — o anel que pulsa.
   ANTES: `animation` sobre `box-shadow`. box-shadow e' propriedade de PINTURA: o
   browser repinta aquela regiao a cada quadro, indefinidamente. E a regiao fica
   em cima do radial-gradient azul do .hero::before (o brilho a 12% 0%, coluna
   esquerda). Gradiente grande e' desenhado com dithering para disfarcar banding;
   cada re-rasterizacao troca o padrao -> o brilho "pisca", e a rolagem, que ja'
   re-rasteriza tiles, e' quando aparece. Era a unica animacao infinita dentro de
   um hero em todo o site, e por isso o efeito so' acontecia nesta pagina.
   AGORA: o anel virou um ::after animado por `transform` + `opacity` -- as duas
   propriedades que o compositor resolve na GPU sem repintar nada atras.
   scale(3.2) sobre 9px reproduz o alcance do spread de 10px do box-shadow antigo. */
.livedot{position:relative; width:9px; height:9px; border-radius:50%; background:var(--green)}

.livedot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--green);
  animation:pulse 2s ease-out infinite;
}

@keyframes pulse{
  0%   {transform:scale(1);   opacity:.55}
  70%  {transform:scale(3.2); opacity:0}
  100% {transform:scale(3.2); opacity:0}
}

/* Modo demonstracao: ponto ambar e parado. O `animation:none` precisa mirar o
   ::after -- a animacao nao mora mais no .livedot. */
.livepill.demo .livedot{background:var(--amber); box-shadow:0 0 10px var(--amber)}
.livepill.demo .livedot::after{animation:none; display:none}

@media (prefers-reduced-motion:reduce){
  .livedot::after{animation:none; display:none}
  .skel::after{animation:none}
}

.actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap}

.term{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}

.term-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--ring); background:rgba(255,255,255,.02)}

.term-bar .d{width:11px; height:11px; border-radius:50%}

.term-bar .d.r{background:#ff5f56}

.term-bar .d.y{background:#ffbd2e}

.term-bar .d.g{background:#27c93f}

.term-bar .t{margin-left:8px; font-size:12px; color:var(--muted)}

.term-body{padding:16px; min-height:250px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.9}

.term-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.term-line .ts{color:#64748b}

.term-line .ok{color:var(--green)}

.term-line .crit{color:#fca5a5}

.term-line .warn{color:var(--amber)}

.term-line .eco{color:var(--accent)}

.statband{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:10px}

.stat{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:18px; padding:22px}

.stat .num{font-size:34px; font-weight:800; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.stat .lbl{margin-top:8px; color:var(--muted); font-size:13px}

.stat .src{margin-top:4px; font-size:11px; color:#64748b}

section{padding:56px 0}

.feed-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:18px}

.tabs{display:inline-flex; gap:6px; padding:5px; border:1px solid var(--ring); border-radius:14px; background:rgba(255,255,255,.03)}

.tab{padding:9px 16px; border-radius:10px; font-weight:600; font-size:14px; color:#cbd5e1; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px}

/* background-origin:border-box: o .tab tem border:1px solid transparent -- sem
   isto o 1px ladrilha o gradiente e mostra a cor da ponta OPOSTA. Explicado por
   extenso no .btn.primary do base.css. */
.tab[aria-selected="true"]{background:var(--grad); background-origin:border-box; color:#fff; box-shadow:0 6px 18px rgba(4,107,210,.28)}

.tab .badge{font-size:11px; padding:1px 7px; border-radius:999px; background:rgba(0,0,0,.25); font-family:ui-monospace,monospace}

.synced{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted)}

.refresh{background:transparent; border:1px solid var(--ring); color:#cbd5e1; border-radius:10px; padding:8px 12px; font-family:inherit; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, background .2s}

.refresh:hover{border-color:rgba(99,179,255,.4); background:rgba(255,255,255,.04)}

.refresh svg{width:15px; height:15px}

.refresh.spin svg{animation:spin 1s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}

.fchip{display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 8px; border-radius:999px; font-size:12.5px; color:#cbd5e1; border:1px solid var(--ring); background:rgba(255,255,255,.03); cursor:pointer; transition:border-color .2s, background .2s, color .2s}

.fchip[aria-pressed="true"]{border-color:rgba(99,179,255,.5); background:rgba(99,179,255,.12); color:#fff}

.fchip:hover{border-color:rgba(99,179,255,.4)}

.feed{display:grid; gap:14px}

.entry{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start; padding:20px 22px; border:1px solid var(--ring); border-radius:16px; background:rgba(255,255,255,.035); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}

.entry:hover{transform:translateY(-2px); border-color:rgba(99,179,255,.35); box-shadow:0 8px 28px rgba(4,107,210,.08)}

.sev{flex:0 0 auto; width:76px; text-align:center; padding:10px 6px; border-radius:12px; border:1px solid var(--ring)}

.sev .score{font-size:20px; font-weight:800; line-height:1; font-family:ui-monospace,monospace}

.sev .word{display:block; margin-top:5px; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; font-weight:700}

.sev.crit{background:rgba(224,53,53,.12); border-color:rgba(224,53,53,.4)}

.sev.crit .score,.sev.crit .word{color:#fca5a5}

.sev.high{background:rgba(224,53,53,.08); border-color:rgba(224,53,53,.3)}

.sev.high .score,.sev.high .word{color:#f2a6a6}

.sev.med{background:rgba(245,166,35,.10); border-color:rgba(245,166,35,.35)}

.sev.med .score,.sev.med .word{color:#f5c877}

.sev.low{background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.32)}

.sev.low .score,.sev.low .word{color:#7ee2bf}

.sev.mal{background:linear-gradient(135deg, rgba(224,53,53,.20), rgba(106,79,181,.18)); border-color:rgba(224,53,53,.5)}

.sev.mal .score,.sev.mal .word{color:#fca5a5}

.sev.info{background:rgba(255,255,255,.05)}

.sev.info .score,.sev.info .word{color:#cbd5e1}

.entry-main{min-width:0}

.entry-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px}

.ecochip{display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:3px 9px 3px 4px; border-radius:7px; background:rgba(99,179,255,.10); border:1px solid rgba(99,179,255,.28); color:#bfdbfe; font-family:ui-monospace,monospace}

.ecochip svg{width:15px; height:15px; display:block; flex:0 0 auto}

.fchip svg{width:15px; height:15px; display:block; flex:0 0 auto}

.fchip svg.globe{opacity:.7}

.pkg{font-size:12.5px; color:#e2e8f0; font-family:ui-monospace,monospace; font-weight:600; overflow-wrap:anywhere; word-break:break-word}

.cveid{font-size:11px; color:var(--muted); font-family:ui-monospace,monospace}

.malflag{font-size:10.5px; padding:2px 8px; border-radius:999px; background:rgba(224,53,53,.14); border:1px solid rgba(224,53,53,.4); color:#fca5a5; font-weight:700; letter-spacing:.4px; text-transform:uppercase}

.epss{display:inline-flex; align-items:center; gap:4px; font-family:'Space Mono',ui-monospace,monospace; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap}

.epss-hi{color:#fca5a5; background:rgba(224,53,53,.14); border-color:rgba(224,53,53,.32)}

.epss-mid{color:#fcd34d; background:rgba(234,179,8,.13); border-color:rgba(234,179,8,.30)}

.epss-lo{color:#93c5fd; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.26)}

.entry-title{font-size:16px; font-weight:600; color:#f4f7fb; margin:0 0 8px}

.entry-src{font-size:12.5px; color:#9fb0c7; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

.ts-read{margin-top:12px; padding:11px 14px; border-radius:12px; background:linear-gradient(180deg, rgba(4,107,210,.10), rgba(224,53,53,.05)); border:1px solid rgba(99,179,255,.2)}

.ts-read .tag{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; font-weight:700; color:var(--accent)}

.ts-read p{margin:5px 0 0; font-size:13.5px; color:#dbe4f0}

.entry-side{display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:0 0 auto}

.when{font-size:12px; color:var(--muted); white-space:nowrap; font-family:ui-monospace,monospace}

.srcbtn{font-size:12px; color:#cbd5e1; border:1px solid var(--ring); border-radius:9px; padding:7px 11px; display:inline-flex; gap:6px; align-items:center; white-space:nowrap; transition:border-color .2s, background .2s}

.srcbtn:hover{border-color:rgba(99,179,255,.4); background:rgba(255,255,255,.04)}

/* Esqueleto de carregamento. Mesmo problema do .livedot: antes o brilho corria
   animando `background-position`, que tambem e' PINTURA -- quatro caixas
   repintando a cada quadro durante todo o carregamento do feed. Agora o brilho e'
   um ::after deslizando por `transform`, resolvido no compositor. */
.skel{
  position:relative; overflow:hidden;
  height:118px; border-radius:16px; border:1px solid var(--ring);
  background:rgba(255,255,255,.03);
}

.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.07) 50%, rgba(255,255,255,0));
  transform:translateX(-100%);
  animation:shimmer 1.4s ease infinite;
}

@keyframes shimmer{to{transform:translateX(100%)}}

.feed-note{margin-top:18px; font-size:12.5px; color:#64748b; text-align:center}

.feed-note a{color:#9fb0c7; text-decoration:underline}

.empty{text-align:center; padding:40px; color:var(--muted); border:1px dashed var(--ring); border-radius:16px}

.more-btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:12px; font-weight:600; font-size:14px; color:#e2e8f0; border:1px solid var(--ring); background:rgba(255,255,255,.04); cursor:pointer; font-family:inherit; transition:border-color .2s, background .2s, transform .15s}

.more-btn:hover{border-color:rgba(99,179,255,.45); background:rgba(255,255,255,.07); transform:translateY(-1px)}

.more-btn .cnt{color:var(--muted); font-weight:500}

.eco-strip{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px}

.eco-strip .e{padding:9px 16px; border:1px solid var(--ring); border-radius:12px; background:rgba(255,255,255,.03); font-size:13.5px; color:#cbd5e1; font-family:ui-monospace,monospace}

.card .step-code{display:inline-block; padding:4px 10px; border-radius:8px; font-family:ui-monospace,monospace; font-weight:700; font-size:12px; background:linear-gradient(135deg, rgba(4,107,210,.30), rgba(224,53,53,.25)); border:1px solid var(--ring); color:#e2e8f0}

.card p{margin:0; color:#cbd5e1; font-size:14px}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .statband{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .statband{grid-template-columns:1fr}
  .entry{grid-template-columns:auto 1fr; }
  .entry-side{grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; margin-top:4px}
  .feed-head{flex-direction:column; align-items:stretch}
  .tabs{flex-wrap:wrap}
}

.band{align-items:center; background:radial-gradient(600px 200px at 10% -50%, rgba(4,107,210,.25), transparent), radial-gradient(600px 200px at 90% 130%, rgba(224,53,53,.25), transparent), linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--ring); border-radius:22px; display:flex; flex-wrap:wrap; gap:20px; padding:26px}

.band .actions{margin:0}

.card{background:rgba(255,255,255,.04); border:1px solid var(--ring); border-radius:18px; overflow:visible; padding:24px 22px; position:relative; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}

.card h3{font-size:18px; margin:12px 0 8px}

.card:hover{border-color:rgba(99,179,255,.4); box-shadow:0 8px 32px rgba(99,179,255,.08); transform:translateY(-4px)}

.cards{gap:18px; margin-top:20px}

@media(max-width:640px){
  .band{align-items:flex-start; flex-direction:column}
}


/* --- cadeia responsiva restaurada na ordem do site original.
   Precisa ficar no FIM: o css da pagina carrega depois do base.css,
   entao regra de topo vence @media do base (mesma especificidade).
   Reproduz o cascade antigo exatamente. --- */
.cards{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }