:root{
  --bg:#0f1216; --card:#151a21; --text:#e8eef7; --muted:#a9b4c2;
  --green:#2ecc71; --red:#e74c3c; --gray:#6b7280;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);}
a{color:#8ab4ff;text-decoration:none} a:hover{text-decoration:underline}

.topbar{display:flex;gap:14px;align-items:center;padding:10px 16px;background:#0b0e12;border-bottom:1px solid #222a35;position:sticky;top:0;z-index:10;}
.brand{font-weight:700}
.links{margin-left:auto;display:flex;gap:12px}
.links a{padding:6px 10px;border-radius:10px;color:var(--muted)}
.links a.active{background:#1a2230;color:var(--text)}

.stats{display:flex;gap:10px;flex-wrap:wrap}
.pill{background:#131a24;border:1px solid #222a35;padding:4px 10px;border-radius:999px;color:var(--muted)}
.pill b{color:var(--text)}

.top-actions{display:flex;gap:10px;align-items:center}
.filterBox{width:260px;max-width:40vw;padding:8px 10px;border-radius:12px;border:1px solid #2a3342;background:#0e131b;color:var(--text);outline:none;}
.filterBox:focus{border-color:#3b4b66}
.btn{padding:8px 12px;border-radius:12px;border:1px solid #2a3342;background:#1b2433;color:var(--text);cursor:pointer;}
.btn:hover{filter:brightness(1.1)}
.btn.on{background:#162235;border-color:#3b4b66}

.container{padding:16px;max-width:1100px;margin:0 auto;}
.container.wide{max-width:1600px}
.card{background:var(--card);border:1px solid #222a35;border-radius:14px;padding:10px;overflow:auto}

/* Centraliza colmeia */
.hivecard{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 150px);overflow:hidden;}
svg#hive{width:100%;height:calc(100vh - 170px);overflow:visible;}

/* Hex */
.hex{
  stroke: rgba(255,255,255,.9);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill .25s ease, stroke-width .15s ease, opacity .12s ease;
}
.hex.up{fill:var(--green)} .hex.down{fill:var(--red)} .hex.unknown{fill:var(--gray)}
.hextext{fill:rgba(255,255,255,.95);font-size:10.5px;text-anchor:middle;dominant-baseline:middle;pointer-events:none;}

.hexg{cursor:pointer;transition:transform .12s ease, filter .12s ease, opacity .12s ease;transform-box:fill-box;transform-origin:center;}
.hexg:hover{transform:scale(1.14);filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));}
.hexg:hover .hex{stroke-width:3;}
.hexg.dim{opacity:.12;}
.hexg.dim:hover{transform:none;filter:none;}

/* “Brotando” */
@keyframes bloom { from {opacity:0; transform:scale(.25);} to {opacity:1; transform:scale(1);} }
.hexg{ animation: bloom .35s ease both; animation-delay: calc(var(--i, 0) * 12ms); }

/* Pisca DOWN/UP (stroke + brilho) — bem confiável */
@keyframes flashDown {
  0%   { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
  15%  { stroke: #ff3b30; stroke-width:7; filter: drop-shadow(0 0 18px rgba(231,76,60,.95)); }
  30%  { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
  45%  { stroke: #ff3b30; stroke-width:7; filter: drop-shadow(0 0 18px rgba(231,76,60,.95)); }
  100% { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
}
@keyframes flashUp {
  0%   { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
  25%  { stroke: #34d399; stroke-width:6; filter: drop-shadow(0 0 16px rgba(46,204,113,.95)); }
  55%  { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
  100% { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
}
.hex.flash-down{ animation: flashDown 1.2s ease-in-out 0s 4; } /* pisca forte */
.hex.flash-up{ animation: flashUp .9s ease-in-out 0s 2; }

/* Tooltip */
#hexTooltip{
  position: fixed; z-index: 99999; pointer-events: none;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid #2a3342;
  background: rgba(15,18,22,.96);
  color: var(--text);
  max-width: 360px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
#hexTooltip.hidden{ display:none; }
#hexTooltip .tt-title{ font-weight: 800; margin-bottom: 4px; }
#hexTooltip .tt-line{ color: var(--muted); font-size: 12px; margin-top: 2px; }
#hexTooltip .tt-row{ display:flex; align-items:center; gap:8px; margin-top: 6px; font-size: 12px; }
#hexTooltip .tt-dot{ width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 0 2px rgba(255,255,255,.15) inset; }
#hexTooltip .tt-dot.up{ background: var(--green); }
#hexTooltip .tt-dot.down{ background: var(--red); }
#hexTooltip .tt-dot.unknown{ background: var(--gray); }

/* DOWN piscando continuamente até voltar UP */
@keyframes downPulse {
  0%   { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
  50%  { stroke: #ff3b30; stroke-width:7; filter: drop-shadow(0 0 18px rgba(231,76,60,.95)); }
  100% { stroke: rgba(255,255,255,.9); stroke-width:2; filter:none; }
}

/* roda sempre que estiver DOWN */
.hex.down{
  animation: downPulse 1.1s ease-in-out infinite;
}

/* quando estiver em “flash-down” (transição), deixa a animação de flash mandar */
.hex.down.flash-down{
  animation: flashDown 1.2s ease-in-out 0s 4;
}

/* evita corte do brilho no SVG */
svg#hive{ overflow: visible; }

/* tamanhos automáticos por classe */
.hextext.fs11 { font-size: 11px; }
.hextext.fs10 { font-size: 10px; }
.hextext.fs9  { font-size: 9px;  letter-spacing: -0.2px; }
.hextext.fs85 { font-size: 8.5px; letter-spacing: -0.3px; }

/* tamanhos automáticos por classe */
.hextext.fs11 { font-size: 11px; }
.hextext.fs10 { font-size: 10px; }
.hextext.fs9  { font-size: 9px;  letter-spacing: -0.2px; }
.hextext.fs85 { font-size: 8.5px; letter-spacing: -0.3px; }

/* ===== FIX: TODOS os DOWN piscam (pulso no FILL + stroke) ===== */
@keyframes downPulseAll {
  0%, 100% {
    fill: #e74c3c;
    stroke: rgba(255,255,255,.9);
    stroke-width: 2;
    opacity: 1;
    filter: none;
  }
  50% {
    fill: #ff2d2d;                    /* vermelho mais forte */
    stroke: #ff3b30;
    stroke-width: 6;
    opacity: .95;
    filter: none;                      /* evita bugs de drop-shadow em SVG */
  }
}

/* Enquanto estiver DOWN e NÃO estiver no flash de evento -> pulsa infinito */
svg#hive polygon.hex.down:not(.flash-down) {
  animation: downPulseAll 1.0s ease-in-out infinite !important;
  animation-play-state: running !important;
}

/* Quando acabou de cair (flash de evento), deixa o flash mandar */
svg#hive polygon.hex.down.flash-down {
  animation: flashDown 1.2s ease-in-out 0s 4 !important;
}

/* Evita corte de efeitos no SVG */
svg#hive { overflow: visible !important; }

/* ===== FONTES AUTO (se já existe, não tem problema) ===== */
.hextext.fs11 { font-size: 11px; }
.hextext.fs10 { font-size: 10px; }
.hextext.fs9  { font-size: 9px;  letter-spacing: -0.2px; }
.hextext.fs85 { font-size: 8.5px; letter-spacing: -0.3px; }

svg#hive { overflow: visible !important; }

/* anel interno */
.ring{
  fill: none;
  stroke: transparent;
  stroke-width: 2;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* PULSO “LUZ FORTE” (fill do hex) — todos os DOWN */
@keyframes downFillGlow {
  0%,100% { fill: #e74c3c; }
  50%     { fill: #ff2d2d; }
}
svg#hive polygon.hex.down:not(.flash-down){
  animation: downFillGlow 1.0s ease-in-out infinite !important;
}

/* PULSO DA BORDA (anel interno) — todos os DOWN */
@keyframes ringPulse {
  0%,100% {
    stroke: rgba(255,59,48,.65);
    stroke-width: 2;
    opacity: .55;
  }
  50%{
    stroke: rgba(255,59,48,1);
    stroke-width: 7;
    opacity: 1;
  }
}
svg#hive polygon.ring.down:not(.flash-down){
  animation: ringPulse 1.0s ease-in-out infinite !important;
}

/* FLASH quando ACABA de cair (bem forte, depois volta pro pulso infinito) */
@keyframes ringFlash {
  0%   { stroke: rgba(255,59,48,1); stroke-width: 2; opacity: .7; }
  15%  { stroke: rgba(255,59,48,1); stroke-width: 9; opacity: 1; }
  30%  { stroke: rgba(255,59,48,1); stroke-width: 2; opacity: .7; }
  45%  { stroke: rgba(255,59,48,1); stroke-width: 9; opacity: 1; }
  100% { stroke: rgba(255,59,48,1); stroke-width: 2; opacity: .7; }
}
svg#hive polygon.ring.down.flash-down{
  animation: ringFlash 1.2s ease-in-out 0s 3 !important;
}