body { background: #0a0a0f; font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.card { background: #0d1117; border: 1px solid #21262d; border-radius: 10px; }
.card-hdr { background: #161b22; border-bottom: 1px solid #21262d; border-radius: 10px 10px 0 0; }

@keyframes fadeUp   { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes fillBar  { from { width:0 } to { width:var(--w) } }
@keyframes pulse    { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes slideIn  { from { opacity:0; transform:translateX(-8px) } to { opacity:1; transform:translateX(0) } }
@keyframes checkPop { 0% { transform:scale(0) } 70% { transform:scale(1.3) } 100% { transform:scale(1) } }
@keyframes glow     { 0%,100% { box-shadow:0 0 0 0 rgba(63,185,80,0) } 50% { box-shadow:0 0 24px 6px rgba(63,185,80,.15) } }
@keyframes blink    { 0%,100% { opacity:1 } 50% { opacity:0 } }

.fade-up  { animation: fadeUp .35s ease-out forwards; }
.fade-in  { animation: fadeIn .3s ease-out forwards; }
.fill-bar { animation: fillBar 1.1s ease-out forwards; }
.slide-in { animation: slideIn .3s ease-out forwards; }
.check-pop{ animation: checkPop .4s ease-out forwards; }
.phase-in { animation: fadeUp .4s ease-out; }

/* ── Step rail ──────────────────────────────── */
.step-rail-item { transition: all .3s; }
.step-rail-item.pending .step-num { background:#1c2128; border:2px solid #30363d; color:#484f58; }
.step-rail-item.active  .step-num { background:#0d2038; border:2px solid #388bfd; color:#58a6ff; animation:pulse 1.5s ease-in-out infinite; }
.step-rail-item.done    .step-num { background:#0d2e0d; border:2px solid #2ea043; color:#3fb950; }
.step-rail-item.active  .step-title { color:#e6edf3; font-weight:600; }
.step-rail-item.done    .step-title { color:#484f58; }
.step-rail-item.pending .step-title { color:#484f58; }

.step-connector { width:2px; margin-left:12px; transition:background .5s; }
.step-connector.done { background:#2ea043; }

/* ── Insight callout ───────────────────────── */
.insight-callout {
  background: rgba(210, 153, 34, 0.05);
  border: 1px solid rgba(210, 153, 34, 0.2);
  border-left: 3px solid #d29922;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.insight-callout .ic-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.6; }
.insight-callout p { color: #8b949e; line-height: 1.55; margin: 0; font-size: 0.82rem; }
.insight-callout strong { color: #e6edf3; }

/* ── Score bars ────────────────────────────── */
.score-row { opacity: 0; }
.score-row.visible { animation: fadeUp .3s ease-out forwards; }

/* ── Transaction steps ─────────────────────── */
.tx-step { opacity: 0; }
.tx-step.done { animation: fadeUp .3s ease-out forwards; }

/* ── Spinner ───────────────────────────────── */
.sp { display:inline-block; animation:pulse .8s ease-in-out infinite; }

/* ── Navigation bar ────────────────────────── */
.nav-btn {
  padding: 6px 14px;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-btn:hover:not(:disabled) { background: #21262d; color: #e6edf3; }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.nav-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #30363d;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.nav-dot:hover { background: #484f58; transform: scale(1.2); }
.nav-dot.active { background: #58a6ff; transform: scale(1.3); }

/* Step rail — nav states */
.step-rail-item.nav-clickable { cursor: pointer; }
.step-rail-item.nav-clickable:hover .step-num {
  border-color: #388bfd !important;
  transition: border-color .2s;
}
.step-rail-item.nav-viewing .step-num {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 3px rgba(88,166,255,.2);
}
.step-rail-item.nav-viewing .step-title { color: #58a6ff !important; font-weight: 600; }

/* ── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #21262d; border-radius: 3px; }