/* Performance product page (/performance-management) — page-only mock-ups on top of product.css. */
.pf-smart, .pf-check, .pf-flow, .pf-scale, .pf-cycle { width: 270px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .8rem; color: #1d2433; }
.pf-smart small, .pf-scale > small { display: block; color: #8a93a4; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }

/* 1 — SMART */
.pf-idea span { display: block; padding: 8px 10px; border-radius: 8px; background: #f7f8fb; color: #6b7487; font-style: italic; }
.pf-arrow { display: flex; justify-content: center; margin: 10px 0; position: relative; }
.pf-arrow::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: linear-gradient(#d9def0, #a78bfa); }
.pf-arrow span { position: relative; padding: 5px 12px; border-radius: 999px; color: #fff; font-weight: 700; font-size: .7rem; background: linear-gradient(135deg, #0c64ae, #8b5cf6); }
.pf-goal { padding: 10px 12px; border-radius: 10px; border: 1.5px solid #c7d7f3; background: #f6f9ff;
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .6s .9s, transform .6s .9s; }
.pp-card.in .pf-goal { opacity: 1; transform: none; }
.pf-goal b { display: block; font-size: .84rem; margin-bottom: 6px; }
.pf-goal small { margin: 0; }
.pf-goal span { display: block; color: #4b5568; }
.pf-goal em { display: inline-block; margin-top: 6px; font-style: normal; font-size: .68rem; font-weight: 600; color: #0c64ae; }

/* 2 — check-in */
.pf-check { text-align: center; }
.pf-ring { position: relative; width: 130px; height: 130px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pf-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pf-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.pf-ring .trk { stroke: #eef0f4; }
.pf-ring .arc { stroke: #16a34a; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1) .3s; }
.pp-card.in .pf-ring .arc { stroke-dashoffset: 35; }
.pf-ring b { font-size: 1.8rem; position: relative; }
.pf-ring small { font-size: .68rem; color: #8a93a4; position: relative; }
.pf-health { display: flex; gap: 5px; justify-content: center; margin-top: 12px; }
.pf-health span { padding: 4px 9px; border-radius: 999px; font-size: .68rem; font-weight: 600; background: #f2f4f8; color: #8a93a4; }
.pf-health span.on { background: #ecfdf3; color: #15803d; box-shadow: inset 0 0 0 1px #86efac; }
.pf-note { margin: 10px 0 0; font-size: .74rem; color: #6b7487; line-height: 1.4; }

/* 3 — review flow */
.pf-flow { padding: 18px 16px; }
.pf-flow-step { display: flex; gap: 12px; position: relative; padding-bottom: 16px;
  opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * 250ms + .3s); }
.pp-card.in .pf-flow-step { opacity: 1; transform: none; }
.pf-flow-step:last-child { padding-bottom: 0; }
.pf-flow-step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: #bbf7d0; }
.pf-flow-step > i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; position: relative; }
.pf-flow-step.done > i::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pf-flow-step.now > i { background: #fff; border: 3px solid #0c64ae; animation: ppPulse 1.6s infinite; }
.pf-flow-step span { display: flex; flex-direction: column; }
.pf-flow-step small { color: #8a93a4; font-size: .7rem; }
.pf-flow-step.now small { color: #0c64ae; font-weight: 600; }

/* 4 — scale */
.pf-scale { display: grid; gap: 6px; }
.pf-lvl { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; border: 1px solid #eef0f4; color: #4b5568; transition: all .4s; }
.pf-lvl b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #f2f4f8; font-size: .72rem; flex: none; }
.pp-card.in .pf-lvl.sel { background: linear-gradient(135deg, #eef5fd, #f3effd); border-color: #a5b4fc; color: #1d2433; font-weight: 600; transition-delay: .9s; }
.pp-card.in .pf-lvl.sel b { background: linear-gradient(135deg, #0c64ae, #5b5bd6); color: #fff; transition: all .4s .9s; }

/* 5 — feedback */
.pf-fb { width: 280px; position: relative; height: 230px; }
.pf-fb-card { position: absolute; left: 0; right: 0; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .78rem; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pf-fb-card.praise { top: 0; transform: rotate(-3deg); z-index: 2; }
.pf-fb-card.sugg { top: 108px; transform: rotate(2deg) translateX(10px); }
.pp-card.in .pf-fb-card.praise { transform: rotate(0); } .pp-card.in .pf-fb-card.sugg { transform: rotate(0); }
.pf-fb-tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; }
.praise .pf-fb-tag { background: #fdf2f8; color: #be185d; } .sugg .pf-fb-tag { background: #eef5fd; color: #0c64ae; }
.pf-fb-card p { margin: 8px 0; line-height: 1.4; color: #3c4557; }
.pf-fb-card small { display: flex; align-items: center; gap: 6px; color: #8a93a4; font-size: .68rem; }
.pf-fb-card .pp-av { width: 22px; height: 22px; font-size: .56rem; }

/* 6 — cycle */
.pf-cycle-top { display: flex; justify-content: space-between; align-items: center; }
.pf-cycle-top span { font-size: .64rem; font-weight: 700; color: #15803d; background: #ecfdf3; padding: 3px 8px; border-radius: 999px; }
.pf-cycle-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; }
.pf-cycle-counts div { text-align: center; padding: 6px 2px; border-radius: 8px; background: #f7f8fb; }
.pf-cycle-counts b { display: block; font-size: .95rem; }
.pf-cycle-counts small { font-size: .55rem; color: #8a93a4; line-height: 1.15; display: block; }
.pf-dist { display: flex; align-items: flex-end; gap: 10px; height: 90px; margin-top: 14px; }
.pf-dist div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.pf-dist span { width: 100%; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #a5b4fc, #5b5bd6);
  transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 90ms + .3s); }
.pp-card.in .pf-dist span { transform: scaleY(1); }
.pf-dist small { font-size: .64rem; color: #a0a8b6; }
.pf-dist-cap { text-align: center; font-size: .66rem; color: #8a93a4; margin-top: 4px; }

/* walkthrough */
.pf-qs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pf-qs span { font-size: .74rem; padding: 6px 10px; border-radius: 8px; background: #eef5fd; color: #0c64ae; font-weight: 600; }
.pf-qs + .pp-fake-btn { margin-top: 16px; }
.pf-write-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pf-stars { display: flex; gap: 4px; }
.pf-stars i { width: 18px; height: 18px; background: #e1e5ee; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pp-scene.on .pf-stars i.on { animation: pfStar .3s both; animation-delay: calc(var(--i) * 150ms + .3s); }
.pf-stars:not(:has(i[style])) i.on { background: #f59e0b; }
@keyframes pfStar { to { background: #f59e0b; } }
.pf-stars.sm i { width: 13px; height: 13px; }
.pf-write-txt { margin: 14px 0; padding: 12px; border: 1px solid #e3e7ee; border-radius: 10px; min-height: 64px; }
.pf-write-txt span, .pf-bar { display: block; height: 7px; border-radius: 4px; background: #dfe6f3; margin: 6px 0; width: var(--w); }
.pp-scene.on .pf-write-txt span { animation: trLineP .6s both; animation-delay: calc(var(--i) * 250ms + .9s); }
@keyframes trLineP { from { width: 0; } to { width: var(--w); } }
.pf-beside { display: grid; gap: 6px; margin-bottom: 14px; }
.pf-beside span { font-size: .74rem; padding: 7px 10px; border-radius: 8px; background: #f7f8fb; color: #4b5568; }
.pf-write .pp-fake-btn { margin-top: 0; }
.pf-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-side-col { padding: 12px; border-radius: 10px; background: #f7f8fb; display: grid; gap: 6px; align-content: start; }
.pf-side-col.me { background: #fff; border: 1.5px solid #c7d7f3; }
.pf-side-col small { font-size: .68rem; font-weight: 700; color: #8a93a4; text-transform: uppercase; letter-spacing: .05em; }
.pf-side-col:not(.me) .pf-stars i.on { background: #fbbf24; }
.pp-scene.on .pf-side-col.me .pf-bar { animation: trLineP .6s both; animation-delay: calc(var(--i) * 250ms + .9s); }
.pf-overall { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg, #eef5fd, #f3effd); display: flex; flex-direction: column; gap: 2px; }
.pf-overall small { color: #6b7487; font-size: .7rem; }
.pp-scene.on .pf-overall { animation: ppRow .5s 1.8s both; }
.pf-shared-top { display: flex; align-items: center; gap: 10px; }
.pf-shared-top > span:nth-child(2) { display: flex; flex-direction: column; }
.pf-shared-top small { color: #8a93a4; font-size: .72rem; }
.pf-shared-top em { margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 700; color: #5b5bd6; background: #f3effd; padding: 4px 9px; border-radius: 999px; text-align: center; }
.pf-ack { margin-top: 16px; padding: 12px; border: 1px solid #e3e7ee; border-radius: 10px; }
.pf-ack small { color: #8a93a4; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.pf-ack p { margin: 6px 0 0; }
.pf-ack-done { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #ecfdf3; color: #15803d; font-weight: 600; }
.pp-scene.on .pf-ack { animation: ppRow .5s .4s both; }
.pp-scene.on .pf-ack-done { animation: ppRow .5s 1.3s both; }

/* AI */
.pf-gen .pp-window-body { gap: 8px; }
.pf-gen-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a93a4; }
.pf-gen .pp-msg { max-width: 100%; align-self: stretch; border-radius: 10px; }
.pf-gen .pp-msg.me { background: #fff; border: none; padding: 0; font-weight: 700; font-size: .95rem; }
.pf-gen .pp-msg.me:empty { display: block; min-height: 1.4em; }
.pf-gen .pp-msg.ai { background: #fafbfd; border: 1px solid #e3e7ee; min-height: 9em; }

@media (prefers-reduced-motion: reduce) {
  .pf-goal, .pf-flow-step { opacity: 1 !important; transform: none !important; transition: none !important; }
}