:root{--brand-primary:#2563eb;--brand-primary-light:#eaf1ff;--brand-primary-dark:#0f172a;--brand-text:#111827;--brand-muted:#6b7280;--brand-border:#e5e7eb;--brand-bg:#ffffff;--brand-card-bg:#ffffff;--before-color:#ef4444;--before-bg:#fff1f2;--before-border:#fecaca;--after-color:#16a34a;--after-bg:#f0fdf4;--after-border:#bbf7d0;--shadow-soft:0 12px 35px rgba(15,23,42,0.08);--radius-lg:18px}.pof-wrapper{width:100%;min-width:0;box-sizing:border-box;font-family:inherit;background:var(--brand-bg);color:var(--brand-text);padding:0}.pof-section{border-radius:var(--radius-lg);border:1.5px solid var(--brand-border);background:var(--brand-card-bg);box-shadow:var(--shadow-soft);overflow:clip;margin-bottom:16px}.pof-section--before{border-color:var(--before-border);background:var(--before-bg)}.pof-section--after{border-color:var(--after-border);background:var(--after-bg)}.pof-section-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 0;flex-wrap:wrap}.pof-section-header{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;letter-spacing:-.01em}.pof-section--before .pof-section-header{color:var(--before-color)}.pof-section--after .pof-section-header{color:var(--after-color)}.pof-section-header-icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}.pof-section--before .pof-section-header-icon{background:var(--before-color);color:#fff}.pof-section--after .pof-section-header-icon{background:var(--after-color);color:#fff}.pof-timer{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px}.pof-timer--before{color:var(--before-color);background:#fee2e2;border:1px solid var(--before-border)}.pof-timer--after{color:var(--after-color);background:#dcfce7;border:1px solid var(--after-border)}.pof-timer--done{font-weight:700}.pof-time-badge{display:inline-block;margin-left:7px;background:var(--before-color);color:#fff;font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.01em}.pof-flow-scroll{overflow-x:auto;overflow-y:visible;padding:18px 20px 14px;width:100%;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--brand-border) transparent}.pof-flow-scroll::-webkit-scrollbar{height:4px}.pof-flow-scroll::-webkit-scrollbar-track{background:transparent}.pof-flow-scroll::-webkit-scrollbar-thumb{background:var(--brand-border);border-radius:2px}.pof-flow-row{display:inline-flex;align-items:center}.pof-node{background:var(--brand-card-bg);border:1.5px solid var(--brand-border);border-radius:14px;padding:10px 8px;width:104px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;box-shadow:0 2px 8px rgba(15,23,42,.06);cursor:default;user-select:none;transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease,background .25s ease}.pof-node--before{border-color:var(--before-border);background:#fff}.pof-node--after{border-color:var(--after-border);background:#fff}.pof-node--active{transform:translateY(-2px)}.pof-node--before.pof-node--active{border-color:var(--before-color)!important;box-shadow:0 0 0 3px rgba(239,68,68,.14),0 5px 16px rgba(239,68,68,.14)!important}.pof-node--after.pof-node--active{border-color:var(--after-color)!important;box-shadow:0 0 0 3px rgba(22,163,74,.14),0 5px 16px rgba(22,163,74,.14)!important}.pof-node--before.pof-node--active .pof-node-icon-wrap{animation:pof-pulse-red 1.4s ease-in-out infinite}.pof-node--after.pof-node--active .pof-node-icon-wrap{animation:pof-pulse-green 1.4s ease-in-out infinite}.pof-node--before.pof-node--completed{border-color:var(--before-color)!important}.pof-node--after.pof-node--completed{border-color:var(--after-color)!important}.pof-node--before.pof-node--completed .pof-node-icon-wrap{background:var(--before-color);color:#fff}.pof-node--after.pof-node--completed .pof-node-icon-wrap{background:var(--after-color);color:#fff}.pof-node-icon-wrap svg{fill:none}.pof-node-icon-wrap{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s ease,color .25s ease}.pof-node--before .pof-node-icon-wrap{background:#fee2e2;color:var(--before-color)}.pof-node--after .pof-node-icon-wrap{background:#dcfce7;color:var(--after-color)}.pof-node-title{font-size:.68rem;font-weight:600;color:var(--brand-text);line-height:1.3}.pof-edge{position:relative;width:44px;height:50px;flex-shrink:0;display:flex;align-items:center}.pof-edge-line{position:absolute;left:4px;right:16px;height:2px;border-radius:1px;transition:background .3s ease}.pof-edge--before .pof-edge-line{background:var(--before-border)}.pof-edge--after .pof-edge-line{background:var(--after-border)}.pof-edge--before.pof-edge--completed .pof-edge-line{background:rgba(239,68,68,.45)}.pof-edge--after.pof-edge--completed .pof-edge-line{background:rgba(22,163,74,.45)}.pof-edge-dot{position:absolute;left:4px;top:50%;width:10px;height:10px;border-radius:50%;animation-name:pof-dot-travel-h;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:forwards}.pof-edge--before .pof-edge-dot{background:var(--before-color);box-shadow:0 0 8px var(--before-color),0 0 3px var(--before-color)}.pof-edge--after .pof-edge-dot{background:var(--after-color);box-shadow:0 0 8px var(--after-color),0 0 3px var(--after-color)}.pof-edge-arrow{position:absolute;right:3px;top:50%;transform:translateY(-50%);font-size:1.2rem;line-height:1}.pof-edge--before .pof-edge-arrow{color:var(--before-color)}.pof-edge--after .pof-edge-arrow{color:var(--after-color)}.pof-hint{display:flex;align-items:center;justify-content:center;padding:4px 20px 16px}.pof-hint-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:600}.pof-section--before .pof-hint-pill{background:#fee2e2;color:var(--before-color);border:1px solid var(--before-border)}.pof-section--after .pof-hint-pill{background:#dcfce7;color:var(--after-color);border:1px solid var(--after-border)}.pof-result{border-radius:var(--radius-lg);border:1.5px solid var(--after-border);background:var(--after-bg);padding:16px 24px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-soft)}.pof-result-icon{flex-shrink:0;color:var(--after-color)}.pof-result strong{color:var(--after-color);font-weight:700}@keyframes pof-dot-travel-h{0%{transform:translateY(-50%) translateX(0);opacity:0}8%{opacity:1}82%{opacity:1}to{transform:translateY(-50%) translateX(18px);opacity:0}}@keyframes pof-dot-travel-v{0%{transform:translateX(-50%) translateY(0);opacity:0}8%{opacity:1}82%{opacity:1}to{transform:translateX(-50%) translateY(20px);opacity:0}}@keyframes pof-pulse-red{0%,to{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}@keyframes pof-pulse-green{0%,to{box-shadow:0 0 0 0 rgba(22,163,74,.5)}50%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}@media (max-width:639px){.pof-section-top{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px 0}.pof-section-header{font-size:.88rem}.pof-flow-scroll{overflow-x:visible;padding:14px 16px 12px}.pof-flow-row{flex-direction:column;align-items:center;min-width:unset}.pof-node{width:min(220px,100%)}.pof-node--active{transform:none}.pof-edge{width:50px;height:44px}.pof-edge-line{top:4px;bottom:18px;left:50%;right:auto;width:2px;height:auto;transform:translateX(-50%)}.pof-edge-dot{top:4px;left:50%;animation-name:pof-dot-travel-v}.pof-edge-arrow{right:auto;top:auto;bottom:2px;left:50%;transform:translateX(-50%) rotate(90deg)}.pof-hint-pill{flex-wrap:wrap;justify-content:center;text-align:center}.pof-result{padding:14px 16px;font-size:.88rem}}