.processing-flow{margin:12px 0 14px;padding:14px 16px 15px;border:1px solid rgba(35,172,145,.24);border-radius:16px;background:linear-gradient(135deg,rgba(244,252,249,.98),rgba(250,252,255,.98));box-shadow:0 8px 22px rgba(32,77,91,.08)}.processing-flow-error{border-color:rgba(205,92,69,.38);background:linear-gradient(135deg,rgba(255,249,246,.98),rgba(250,252,255,.98))}.processing-flow-head{display:flex;align-items:center;gap:10px;min-width:0}.processing-flow-orb{display:grid;flex:0 0 auto;width:28px;height:28px;place-items:center;border-radius:50%;color:#fff;background:#16a78c;box-shadow:0 0 0 5px rgba(22,167,140,.1);animation:processing-flow-orb-breathe 2.7s ease-in-out infinite}.processing-flow-error .processing-flow-orb{background:#d16c57;animation:none}.processing-flow-head div{display:grid;gap:2px;min-width:0}.processing-flow-head b{color:#173642;letter-spacing:.02em}.processing-flow-head span:last-child{overflow:hidden;color:#5f7480;text-overflow:ellipsis;white-space:nowrap}.processing-flow-steps{display:flex;align-items:flex-start;gap:0;margin:14px 0 0;padding:0;list-style:none}.processing-flow-step{position:relative;display:flex;flex:1 1 0;align-items:center;min-width:0}.processing-flow-step:not(:last-child)::after{position:absolute;top:13px;left:calc(50% + 18px);width:calc(100% - 36px);height:2px;content:'';background:#dbe8e7}.processing-flow-step.is-complete:not(:last-child)::after{background:#35b796}.processing-flow-marker{position:relative;z-index:1;display:grid;flex:0 0 auto;width:26px;height:26px;place-items:center;border:1px solid #c7d9dc;border-radius:50%;color:#7a9096;background:#fff;font-weight:700}.processing-flow-step.is-active .processing-flow-marker{border-color:#16a78c;color:#fff;background:#16a78c;box-shadow:0 0 0 5px rgba(22,167,140,.12)}.processing-flow-step.is-complete .processing-flow-marker{border-color:#35b796;color:#fff;background:#35b796}.processing-flow-step.is-error .processing-flow-marker{border-color:#d16c57;color:#fff;background:#d16c57}.processing-flow-step-copy{display:grid;gap:1px;min-width:0;margin-left:6px}.processing-flow-step-copy b,.processing-flow-step-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.processing-flow-step-copy b{color:#4a6069;}.processing-flow-step-copy small{color:#8b9ba1;}.processing-flow-step.is-active .processing-flow-step-copy b{color:#168e78}.processing-flow-pulse{width:7px;height:7px;border-radius:50%;background:currentColor;animation:processing-flow-pulse 1.5s ease-in-out infinite}@keyframes processing-flow-pulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}@keyframes processing-flow-orb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@media(max-width:640px){.processing-flow{padding:12px}.processing-flow-step-copy{margin-left:4px}.processing-flow-step-copy small{display:none}}@media(prefers-reduced-motion:reduce){.processing-flow-orb,.processing-flow-pulse{animation:none}}
/* The live status stays visible in one line; the six-step trace is opt-in. */
.processing-flow{padding:0;overflow:hidden}
.processing-flow-summary{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;cursor:pointer;list-style:none}
.processing-flow-summary::-webkit-details-marker{display:none}
.processing-flow-summary .processing-flow-orb{width:24px;height:24px;box-shadow:0 0 0 4px rgba(22,167,140,.1)}
.processing-flow-summary-copy{display:grid;gap:2px;min-width:0}
.processing-flow-summary-copy b{color:#173642;letter-spacing:.02em}
.processing-flow-summary-copy span{overflow:hidden;color:#5f7480;text-overflow:ellipsis;white-space:nowrap}
.processing-flow-toggle{margin-left:auto;padding:4px 7px;border:1px solid #c7e5e5;border-radius:999px;color:#087e91;background:#f4fcfc;font-weight:800;white-space:nowrap}
.processing-flow[open] .processing-flow-toggle::after{content:'閉じる';}
.processing-flow-details{padding:0 14px 14px}
.processing-flow-details .processing-flow-steps{margin-top:4px}