/* ===== Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0a0a0a; color:#fff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height:1.6; min-height:100vh; }
.container { max-width:900px; margin:0 auto; padding:10px; }

/* ===== Timeline ===== */
.cyber-timeline {
  position: relative;
  padding: 12px 20px 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cyber-timeline::-webkit-scrollbar { display:none; }

.cyber-line {
  position:absolute; top:66px; left:20px; right:20px;
  height:4px; background:#1a1a1a; border-radius:2px; border:1px solid #333;
  box-shadow: inset 0 0 8px rgba(0,0,0,.5);
}
.cyber-progress {
  position:absolute; top:0; left:0; height:100%;
  background:linear-gradient(90deg, #00c853, #00e676, #66ffa6);
  border-radius:3px; transition: width .4s ease;
  box-shadow:0 0 10px rgba(0,230,118,.6), inset 0 0 8px rgba(255,255,255,.08);
}

.cyber-steps { display:flex; gap:12px; position:relative; z-index:2; min-width:100%; }
.cyber-step { display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; flex:1 1 0; min-width:0; }
.cyber-step-circle {
  width:60px; height:60px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:bold; margin-bottom:8px; background:#1a1a1a; border:2px solid #333;
  overflow:hidden; position:relative;
}
.cyber-step-circle::after {
  content:""; position:absolute; inset:3px; border-radius:50%;
  pointer-events:none; opacity:.35; box-shadow: inset 0 0 14px currentColor;
}
.cyber-step-icon { font-size:1.4em; margin-bottom:2px; }
.cyber-step-number { font-size:.7em; opacity:.8; }
.cyber-step-label { font-size:.7em; color:#ccc; max-width:80px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; line-height:1.1; }

/* ===== Estados ===== */
/* COMPLETED (verde neon escuro, estilo botão Start Video) */
.cyber-step.pb-completed .cyber-step-circle,
.cyber-step.completed    .cyber-step-circle {
  border-color:#00e676;
  color:#00e676;
  background:#001a0d;
  box-shadow:0 0 6px rgba(0,230,118,.6);
}
.cyber-step.pb-completed .cyber-step-label,
.cyber-step.completed    .cyber-step-label {
  color:#00e676;
}

/* ACTIVE (amarelo neon escuro) */
.cyber-step.pb-active .cyber-step-circle {
  border-color:#ffd23f;
  color:#ffd23f;
  background:#1a1a00;
  box-shadow:0 0 6px rgba(255,210,63,.6);
}
.cyber-step.pb-active .cyber-step-label {
  color:#ffd23f;
}

/* PENDING (cinza) */
.cyber-step.pb-pending .cyber-step-circle {
  border-color:#444;
  color:#666;
  opacity:.5;
  background:#1a1a1a;
}
.cyber-step.pb-pending .cyber-step-label {
  color:#666;
  opacity:.5;
}

/* ===== Efeito de brilho e pulso na bolinha ATIVA (amarela) ===== */
@keyframes pbPulse {
  from { box-shadow: 0 0 6px rgba(255,210,63,.45); }
  to   { box-shadow: 0 0 14px rgba(255,210,63,.9); }
}
@keyframes pbShine {
  from { transform: translateX(-150%) rotate(20deg); opacity: .0; }
  20%  { opacity: .25; }
  80%  { opacity: .25; }
  to   { transform: translateX(150%) rotate(20deg); opacity: .0; }
}

.cyber-step.pb-active .cyber-step-circle {
  animation: pbPulse 1.4s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}
.cyber-step.pb-active .cyber-step-circle::before {
  content:"";
  position:absolute; top:-30%; bottom:-30%; left:-60%; right:-60%;
  background: linear-gradient(120deg,
               rgba(255,255,200,0) 0%,
               rgba(255,255,200,.30) 50%,
               rgba(255,255,200,0) 100%);
  filter: blur(2px);
  mix-blend-mode: screen;
  pointer-events:none;
  animation: pbShine 1.6s linear infinite;
}

/* ===== Final travado (verde), sem animação nas bolinhas ===== */
.pb-finished .cyber-step .cyber-step-circle {
  animation: none !important;
}
.pb-finished .cyber-step.pb-active .cyber-step-circle::before {
  display: none !important;
}

/* Garantia extra de override no final */
.pb-finished .cyber-step.pb-active .cyber-step-circle {
  border-color: #00e676 !important;
  color: #00e676 !important;
  background: #001a0d !important;
}