:root{
  --bg0:#0b0f16;
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.65);
}
body{
  background: radial-gradient(1100px 650px at 20% 10%, rgba(13,110,253,.25), transparent 60%),
              radial-gradient(900px 650px at 85% 20%, rgba(25,135,84,.22), transparent 60%),
              var(--bg0);
}
.glass{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}
.muted{ color: var(--muted); }
.table-darkish{
  --bs-table-bg: rgba(255,255,255,.03);
  --bs-table-border-color: rgba(255,255,255,.10);
}


/* =========================
   Timeline (Fluxo)
   ========================= */
.timeline{
  position: relative;
  padding-left: 18px;
}
.timeline:before{
  content:"";
  position:absolute;
  left:7px;
  top:4px;
  bottom:4px;
  width:2px;
  background: rgba(255,255,255,.12);
}
.timeline-item{
  position: relative;
  display:flex;
  gap:12px;
  padding: 8px 0;
}
.timeline-dot{
  position:absolute;
  left:1px;
  width:14px;
  height:14px;
  border-radius: 50%;
  margin-top: 6px;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
}
.timeline-dot.dot-os{ background: rgba(255,255,255,.14); }
.timeline-dot.dot-aud{ background: rgba(13,110,253,.35); border-color: rgba(13,110,253,.65); }
.timeline-dot.dot-fix{ background: rgba(255,193,7,.35); border-color: rgba(255,193,7,.65); }

.timeline-content{
  margin-left: 22px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}