/* ─── VIEW 2: FLOW ─── */
.flow-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.flow-ctrl-btn {
  padding: 7px 18px; font-size: 13px; font-weight: 600; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.12); background: transparent;
  color: rgba(255,255,255,0.5); cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.flow-ctrl-btn:hover { border-color: rgba(255,255,255,0.28); color: #fff; }
.flow-ctrl-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 104px; }
.flow-ctrl-btn.primary.playing { background: #334155; border-color: #475569; color: #CBD5E1; }
.flow-ctrl-btn[disabled] { opacity: 0.28; cursor: default; pointer-events: none; }
.flow-steps-row {
  display: flex; align-items: center; padding: 12px 20px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05); overflow-x: auto; gap: 0;
}
.flow-step-pill {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  font-size: 11px; font-weight: 600; color: #2D3748; font-family: var(--mono);
  letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; transition: opacity 0.15s; user-select: none;
}
.flow-step-pill + .flow-step-pill::before { content: '\2192'; margin-right: 6px; color: #1e2a3a; font-size: 10px; }
.flow-step-pill.done   { color: var(--green); }
.flow-step-pill.active { color: #fff; }
.flow-step-pill:not(.active):hover { opacity: 0.75; }
.flow-step-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.flow-step-pill.done   .flow-step-num { background: var(--green); color: #fff; }
.flow-step-pill.active .flow-step-num { background: var(--accent); color: #fff; }
.flow-content {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 28px; overflow: hidden;
}
.flow-card {
  background: #fff; width: 100%; max-width: 460px;
  padding: 28px 28px 24px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
.flow-card-step  { font-size: 10px; font-weight: 700; color: #94A3B8; font-family: var(--mono); letter-spacing: 0.1em; }
.flow-card-title { font-size: 20px; font-weight: 800; color: #0A101E; letter-spacing: -0.5px; }
.flow-card-sub   { font-size: 12px; color: #64748B; font-family: var(--mono); margin-top: -10px; }
.flow-bill-row   {
  display: flex; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 13px; color: #0A101E;
}
.flow-bill-row .amt { font-family: var(--mono); color: #64748B; }
.flow-bill-row.tax  { opacity: 0.6; }
.flow-bill-total {
  display: flex; justify-content: space-between;
  padding: 10px 0 0; font-size: 15px; font-weight: 800; color: #0A101E;
}
.flow-bill-total .amt { font-family: var(--mono); color: var(--green); }