/* ProcessFloor hero for neetuaisolutions.com — dark theme, values from
   app/src/theme/index.ts (dark) and admin/src/styles/tokens.css. Every class
   and keyframe is prefixed pfh-. Fonts: Inter + JetBrains Mono (site-loaded). */
.pfh-root{--pfh-canvas:#15111B;--pfh-surface:#1E1926;--pfh-sunk:#2A2333;--pfh-amb:#2A2138;--pfh-ink:#F1ECF6;--pfh-muted:#B8AEC4;--pfh-faint:#A399AF;--pfh-line:#352D40;--pfh-line2:#5A5066;--pfh-pri:#7A64A6;--pfh-pri-t:#C9B6EE;--pfh-pri-s:#352A48;--pfh-ok:#6FD39A;--pfh-ok-s:#1C3326;--pfh-ok-f:#2F8F58;--pfh-warn:#E3B866;--pfh-warn-s:#3A301E;--pfh-chart:#B9A3E3;
position:relative;display:block;width:100%;height:100%;min-height:0;aspect-ratio:4/3;container-type:inline-size;color:var(--pfh-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.3;text-align:left;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
.pfh-root *,.pfh-root *::before,.pfh-root *::after{box-sizing:border-box;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit}
.pfh-root b,.pfh-root i,.pfh-root em,.pfh-root s{font-style:normal;text-decoration:none}
.pfh-ui{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;font-size:clamp(11px,2.6cqw + 3.7px,18px);background:radial-gradient(120% 55% at 50% 0%,var(--pfh-amb),transparent 72%),var(--pfh-canvas);border:1px solid var(--pfh-line);border-radius:clamp(12px,2.8cqw,20px)}
.pfh-num{font-variant-numeric:tabular-nums}
.pfh-mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;letter-spacing:-.02em}

/* header */
.pfh-top{flex:none;display:flex;align-items:center;gap:.5em;padding:.7em .85em .55em}
.pfh-logo{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:.45em;background:linear-gradient(135deg,#594879,#65518B)}
.pfh-logo svg{display:block;width:1.2em;height:1.2em}
.pfh-brand{font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.pfh-ctx{display:none;font-size:.8em;color:var(--pfh-muted);white-space:nowrap}
.pfh-role{margin-left:auto;display:inline-flex;align-items:center;gap:.45em;padding:.3em .72em;border-radius:999px;background:var(--pfh-pri-s);color:var(--pfh-pri-t);font-size:.78em;font-weight:600;white-space:nowrap}
.pfh-rdot{flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--pfh-ok)}
.pfh-run .pfh-rdot{animation:pfh-pulse 1.6s ease-in-out infinite}
@keyframes pfh-pulse{50%{opacity:.35}}

/* stage + scenes */
.pfh-stage{position:relative;flex:1;min-height:0;margin:0 .75em}
.pfh-scene{position:absolute;inset:0;display:flex;flex-direction:column;gap:.45em;opacity:0;transform:translateY(.6em);transition:opacity .45s ease,transform .45s ease}
.pfh-scene.pfh-on{opacity:1;transform:none}
.pfh-card{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:.45em;padding:.7em .8em;background:var(--pfh-surface);border:1px solid var(--pfh-line);border-radius:1.1em;overflow:hidden}
.pfh-hhead{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:.5em;min-width:0}
.pfh-hhead>div{min-width:0}
.pfh-eye{font-size:.7em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pfh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfh-h{font-size:1.3em;font-weight:700;letter-spacing:-.025em;line-height:1.2;white-space:nowrap}

/* chips */
.pfh-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:.22em .62em;border-radius:999px;font-size:.74em;font-weight:600;line-height:1.3;white-space:nowrap;transition:background-color .3s,color .3s,opacity .3s,transform .3s}
.pfh-t-pri,.pfh-t-mac{background:var(--pfh-pri-s);color:var(--pfh-pri-t)}
.pfh-t-ok{background:var(--pfh-ok-s);color:var(--pfh-ok)}
.pfh-t-warn{background:var(--pfh-warn-s);color:var(--pfh-warn)}
.pfh-t-mac::before{content:"";width:.42em;height:.42em;margin-right:.4em;border-radius:50%;background:currentColor}

/* collector feed */
.pfh-feed{flex:none;position:relative;display:flex;align-items:center;gap:.45em;padding:.32em .7em;font-size:.76em;color:var(--pfh-muted);border:1px dashed var(--pfh-line2);border-radius:999px;opacity:0;transition:opacity .3s;white-space:nowrap}
.pfh-feed.pfh-on{opacity:1}
.pfh-feed>span:first-of-type{overflow:hidden;text-overflow:ellipsis}
.pfh-feedr{margin-left:auto;color:var(--pfh-ok);font-weight:600}
.pfh-pkt{position:absolute;left:1.1em;top:70%;width:.5em;height:.5em;border-radius:50%;background:var(--pfh-pri-t);box-shadow:0 0 .7em var(--pfh-pri-t);opacity:0}
.pfh-pkt.pfh-go{animation:pfh-pkt .5s ease-in forwards}
@keyframes pfh-pkt{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(3em)}}

/* heat card */
.pfh-heat{opacity:0;transform:translateY(.5em);transition:opacity .4s,transform .4s}
.pfh-heat.pfh-on{opacity:1;transform:none}
.pfh-rows{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly}
.pfh-row{position:relative;display:grid;grid-template-columns:4.9em minmax(0,1fr) auto;align-items:center;gap:.4em;padding:.3em .45em;margin:0 -.45em;border:1px solid transparent;border-radius:.7em;transition:border-color .3s,background-color .3s}
.pfh-row.pfh-act{border-color:var(--pfh-pri);background:var(--pfh-pri-s)}
.pfh-lbl{font-size:.82em;color:var(--pfh-muted);white-space:nowrap}
.pfh-val{display:flex;align-items:baseline;gap:.3em;white-space:nowrap;min-width:0;font-variant-numeric:tabular-nums}
.pfh-val b{font-size:1.15em;font-weight:600;letter-spacing:-.01em}
.pfh-val em{font-size:.74em;color:var(--pfh-muted)}
.pfh-val s{font-size:.72em;color:var(--pfh-faint);text-decoration:line-through;opacity:0;transition:opacity .3s}
.pfh-val s.pfh-on{opacity:1}
.pfh-row .pfh-chip{opacity:0;transform:scale(.85)}
.pfh-row .pfh-chip.pfh-on{opacity:1;transform:none}
.pfh-banner{flex:none;padding:.45em .7em;font-size:.78em;border-left:.25em solid var(--pfh-pri);border-radius:.7em;background:var(--pfh-pri-s);transition:background-color .35s,border-color .35s,color .35s}
.pfh-banner.pfh-ok{border-color:var(--pfh-ok);background:var(--pfh-ok-s);color:var(--pfh-ok)}

/* correct sheet */
.pfh-sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.42em;padding:.65em .8em .75em;background:var(--pfh-sunk);border-top:1px solid var(--pfh-line2);border-radius:1.1em 1.1em 0 0;box-shadow:0 -.6em 1.6em rgba(0,0,0,.45);transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pfh-sheet.pfh-on{transform:none}
.pfh-sh-t{font-weight:600;font-size:.95em}
.pfh-sh-m{font-size:.74em;color:var(--pfh-muted)}
.pfh-sh-m b{color:var(--pfh-ink);font-weight:600}
.pfh-input{display:flex;align-items:center;gap:.1em;padding:.32em .6em;background:var(--pfh-surface);border:1px solid var(--pfh-pri-t);border-radius:.6em;font-weight:600;font-variant-numeric:tabular-nums;min-height:1.9em}
.pfh-input em{margin-left:auto;font-size:.8em;font-weight:400;color:var(--pfh-muted)}
.pfh-caret{width:1px;height:1.05em;background:var(--pfh-pri-t)}
.pfh-run .pfh-caret{animation:pfh-pulse 1s steps(1) infinite}

/* buttons + taps */
.pfh-btn{position:relative;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;gap:.4em;padding:.5em 1em;border-radius:999px;background:var(--pfh-pri);color:#fff;font-size:.86em;font-weight:600;white-space:nowrap;transition:background-color .35s}
.pfh-btn.pfh-done{background:var(--pfh-ok-f)}
.pfh-tap{position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em 0 0 -1.2em;border-radius:50%;background:rgba(255,255,255,.4);opacity:0;pointer-events:none}
.pfh-row .pfh-tap{left:auto;right:1.2em;background:rgba(201,182,238,.45)}
.pfh-tap.pfh-go{animation:pfh-tap .5s ease-out}
@keyframes pfh-tap{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(2.2)}}

/* sign-off list */
.pfh-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly}
.pfh-li{display:grid;grid-template-columns:2.9em minmax(0,1fr) auto 5.6em;align-items:center;gap:.45em;padding:.22em 0;font-size:.86em;border-bottom:1px solid var(--pfh-line);opacity:0;transform:translateX(-.5em);transition:opacity .35s,transform .35s}
.pfh-li:last-child{border-bottom:0}
.pfh-li.pfh-on{opacity:1;transform:none}
.pfh-li .pfh-chip{font-size:.82em}
.pfh-g{color:var(--pfh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* register */
.pfh-tbl{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;font-size:.84em;font-variant-numeric:tabular-nums}
.pfh-tr{display:grid;grid-template-columns:2.9em minmax(0,1fr) 3.3em 3.7em;align-items:center;gap:.45em;padding:.2em 0;border-bottom:1px solid var(--pfh-line);white-space:nowrap;opacity:0;transform:translateX(-.4em);transition:opacity .35s,transform .35s}
.pfh-tr.pfh-on,.pfh-th{opacity:1;transform:none}
.pfh-th{font-size:.86em;font-weight:600;color:var(--pfh-muted)}
.pfh-n{text-align:right}
.pfh-bar{display:none;height:.5em;border-radius:999px;background:var(--pfh-sunk);overflow:hidden}
.pfh-th .pfh-bar{background:none}
.pfh-bar i{display:block;height:100%;background:var(--pfh-chart);transform-origin:left;transform:scaleX(0);transition:transform .7s ease}
.pfh-tr.pfh-on .pfh-bar i{transform:scaleX(var(--pfh-w))}
.pfh-mk{display:inline-block;width:.45em;height:.45em;margin-left:.3em;border-radius:50%;background:var(--pfh-warn);vertical-align:.1em}
.pfh-total{flex:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .4em;padding:.4em .7em;border-radius:.7em;background:var(--pfh-pri-s);opacity:0;transition:opacity .4s}
.pfh-total.pfh-on{opacity:1}
.pfh-total>span{font-size:.8em;color:var(--pfh-pri-t)}
.pfh-total b{font-size:1.25em;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pfh-total em{font-size:.74em;color:var(--pfh-muted)}
.pfh-total small{display:none;margin-left:auto;font-size:.74em;color:var(--pfh-muted)}
.pfh-fn{flex:none;font-size:.7em;color:var(--pfh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .4s}
.pfh-fn.pfh-on{opacity:1}
.pfh-fn .pfh-mk{margin:0 .35em 0 0}

/* footer */
.pfh-foot{flex:none;display:flex;flex-direction:column;gap:.4em;padding:.5em .85em .6em}
.pfh-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
.pfh-steps i{display:block;height:.18em;border-radius:999px;background:var(--pfh-line);overflow:hidden}
.pfh-steps b{display:block;height:100%;background:var(--pfh-pri-t);transform-origin:left;transform:scaleX(0)}
.pfh-tag{font-size:.78em;color:var(--pfh-muted);text-align:center;white-space:nowrap}

/* compact containers (280–399px): fold the heat title, tighten rhythm */
@container (max-width:399px){
.pfh-top{padding:.5em .7em .35em}
.pfh-logo{width:1.5em;height:1.5em}
.pfh-stage{margin:0 .6em}
.pfh-scene{gap:.3em}
.pfh-card{padding:.5em .65em;gap:.3em;border-radius:.9em}
.pfh-feed{padding:.18em .6em;font-size:.72em}
.pfh-heat .pfh-hhead{align-items:center}
.pfh-heat .pfh-h{display:none}
.pfh-h{font-size:1.1em}
.pfh-row{padding:.12em .45em}
.pfh-val b{font-size:1.05em}
.pfh-banner{padding:.28em .6em;font-size:.74em}
.pfh-sheet{padding:.45em .65em .55em;gap:.3em}
.pfh-input{min-height:1.7em;padding:.2em .55em}
.pfh-btn{padding:.38em 1em}
.pfh-li,.pfh-tr{padding:.1em 0}
.pfh-tbl{font-size:.84em}
.pfh-th{font-size:1em}
.pfh-tr{grid-template-columns:2.7em minmax(0,1fr) 3.9em 3.4em}
.pfh-feed{font-size:.8em}
.pfh-feed .pfh-mono,.pfh-tr .pfh-mono,.pfh-li .pfh-mono{font-size:1em}
.pfh-eye{font-size:.8em;letter-spacing:.05em}
.pfh-chip{font-size:.8em;padding:.18em .55em}
.pfh-li{font-size:.9em}
.pfh-li .pfh-chip{font-size:.9em}
.pfh-val em,.pfh-val s{font-size:.8em}
.pfh-banner,.pfh-sh-m,.pfh-total>span,.pfh-total em,.pfh-fn,.pfh-role{font-size:.8em}
.pfh-tag{font-size:.82em}
.pfh-total{padding:.25em .6em}
.pfh-foot{padding:.35em .7em .45em;gap:.3em}
}
/* roomier containers */
@container (min-width:400px){
.pfh-ctx{display:inline}
.pfh-t-mac::after{content:"\00a0\00b7\00a0 check it"}
.pfh-total small{display:inline}
}
@container (min-width:440px){
.pfh-tr{grid-template-columns:3em minmax(0,1fr) 3.4em 3.7em 5.5em}
.pfh-bar{display:block}
.pfh-sheet{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.6em}
.pfh-sh-t,.pfh-sh-m{grid-column:1/-1}
}

.pfh-snap *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.pfh-root *{transition:none!important;animation:none!important}}
