.flowPanel{border:1px solid var(--line);border-radius:10px;background:linear-gradient(115deg,#102c3e,#0c2232);margin:12px 0 16px;overflow:hidden}
.flowHeading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 16px}.flowHeading h2{font-size:16px;margin:3px 0}.flowHeading p{margin:0;color:var(--muted);font-size:11px}.flowBadge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px;letter-spacing:.7px;font-weight:750;border:1px solid #728ea466;border-radius:20px;padding:8px 11px;color:var(--muted);background:#193347}.flowDot{width:7px;height:7px;border-radius:50%;background:currentColor}.flowPanel[data-tone="good"] .flowBadge{color:#6beac5;border-color:#2a8d715e;background:#123b3d}.flowPanel[data-tone="warn"] .flowBadge{color:#ffca7c;border-color:#aa85445e;background:#363431}.flowPanel[data-tone="bad"] .flowBadge{color:#ff9cad;border-color:#b953675e;background:#392c3b}.flowPanel[data-tone="checking"] .flowBadge{color:#91dfff;border-color:#459ecc5e;background:#153b51}.flowPanel[data-tone="checking"] .flowDot{animation:requestPulse 1s ease-in-out infinite}
.flowSteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.flowStep{padding:11px 16px;min-width:0;position:relative}.flowStep+.flowStep{border-left:1px solid var(--line)}.flowStep:not(:last-child)::after{content:'→';position:absolute;right:-7px;top:16px;color:var(--blue);background:#10293a;z-index:1;font-size:13px}.flowStep span{font-size:9px;letter-spacing:.9px;color:var(--muted)}.flowStep strong{display:block;margin:4px 0;font-size:13px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.flowStep small{display:block;color:var(--muted);font-size:10px;overflow-wrap:anywhere;line-height:1.5}
.flowBottom{padding:8px 16px;display:flex;gap:12px;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}#flowSchedule{font-variant-numeric:tabular-nums}.flowPanel details{border-top:1px solid var(--line);padding:9px 16px;font-size:11px;color:var(--muted)}.flowPanel summary{color:var(--blue);cursor:pointer;min-height:22px}.flowPanel details p{font-size:10px;margin:6px 0}.flowHistory{list-style:none;padding:0;margin:7px 0}.flowHistory li{display:flex;gap:16px;align-items:baseline;justify-content:space-between;border-top:1px solid #294759;padding:7px 0;font-size:10px;overflow-wrap:anywhere}.flowHistory time{white-space:nowrap;font-variant-numeric:tabular-nums}.flowHistory .failed{color:#ff9cad}.flowLimits{color:#ffca7c}
@keyframes requestPulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.flowDot{animation:none!important}}
@media(max-width:680px){.flowHeading{align-items:flex-start;flex-direction:column;gap:8px;padding:12px}.flowSteps{grid-template-columns:1fr}.flowStep{padding:9px 12px}.flowStep+.flowStep{border-left:0;border-top:1px solid var(--line)}.flowStep:not(:last-child)::after{display:none}.flowBottom{align-items:flex-start;flex-direction:column;gap:3px;padding:8px 12px}.flowHistory li{flex-direction:column;gap:3px}.flowPanel details{padding:9px 12px}.flowBadge{font-size:9px}}