/* Pixelect Royal Compact: scoped illustrative homepage workflow. */
#home-activity-preview { padding:12px 16px 6px; background:#fcfbf9; color:#172033; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; }
#home-activity-preview * { box-sizing:border-box; }
#home-activity-preview .hap-shell { max-width:1120px; margin:auto; }
#home-activity-preview .hap-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
#home-activity-preview .hap-heading { min-width:0; }
#home-activity-preview .hap-title-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#home-activity-preview h2 { margin:0; font-size:16px; font-weight:800; line-height:1.4; }
#home-activity-preview .hap-sample { padding:4px 8px; border:1px solid #e5d9c6; border-radius:999px; background:#f8f1e7; color:#785020; font-size:10px; font-weight:700; white-space:nowrap; }
#home-activity-preview .hap-heading p { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#home-activity-preview .hap-control { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; min-width:44px; padding:8px 12px; border:1px solid #e2d6db; border-radius:10px; background:#fff; color:#9f1239; font:700 12px 'Plus Jakarta Sans','Segoe UI',sans-serif; cursor:pointer; flex:none; }
#home-activity-preview .hap-control:hover { background:#fff1f2; border-color:#9f1239; }
#home-activity-preview .hap-control:focus-visible { outline:3px solid #9f1239; outline-offset:3px; }
#home-activity-preview [hidden] { display:none!important; }
#home-activity-preview .hap-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
#home-activity-preview .hap-step { display:flex; gap:8px; min-width:0; padding:10px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 4px 14px #17203305; transition:border-color .35s,box-shadow .35s; }
#home-activity-preview .hap-step[data-status="active"] { border-color:#b76a81; box-shadow:0 4px 16px #9f123910; }
#home-activity-preview .hap-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; flex:none; background:#fff1f2; color:#9f1239; font-size:13px; }
#home-activity-preview [data-hap-step="complete"] .hap-icon { background:#ecfdf5; color:#166534; }
#home-activity-preview .hap-content { min-width:0; flex:1; }
#home-activity-preview .hap-step-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; }
#home-activity-preview h3 { margin:0; font-size:12px; line-height:1.5; font-weight:700; }
#home-activity-preview .hap-step-number { font-size:10px; font-weight:700; color:#64748b; }
#home-activity-preview .hap-total { display:flex; align-items:baseline; gap:6px; min-height:30px; margin-top:0; }
#home-activity-preview .hap-total strong { font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.25; letter-spacing:-.7px; }
#home-activity-preview .hap-total > span { color:#64748b; font-size:10px; }
#home-activity-preview progress { display:block; width:100%; height:5px; border:0; border-radius:999px; overflow:hidden; background:#f1e7eb; appearance:none; }
#home-activity-preview progress::-webkit-progress-bar { background:#f1e7eb; border-radius:999px; }
#home-activity-preview progress::-webkit-progress-value { background:#9f1239; border-radius:999px; }
#home-activity-preview progress::-moz-progress-bar { background:#9f1239; border-radius:999px; }
#home-activity-preview .hap-step p { margin:4px 0 0; min-height:16px; font-size:10px; line-height:1.6; color:#64748b; }
#home-activity-preview .hap-frames { display:flex; gap:5px; height:16px; align-items:center; }
#home-activity-preview .hap-frames > span { width:22px; height:16px; display:flex; align-items:center; justify-content:center; position:relative; background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; border-radius:4px; font-size:9px; }
#home-activity-preview .hap-frames b { position:absolute; right:-3px; top:-4px; display:none; align-items:center; justify-content:center; height:12px; width:12px; background:#9f1239; color:#fff; border-radius:50%; font:700 8px 'Segoe UI',sans-serif; }
#home-activity-preview .hap-frames .is-selected { background:#fff1f2; border-color:#b76a81; color:#9f1239; }
#home-activity-preview .hap-frames .is-selected b { display:flex; }
#home-activity-preview[data-running="true"] .hap-frames .is-selected b { animation:hap-select .3s ease-out both; }
#home-activity-preview .hap-result { margin-top:4px; min-height:26px; font-size:14px; font-weight:800; line-height:1.4; }
#home-activity-preview .hap-confirmation { display:flex; align-items:center; gap:5px; color:#166534; font-size:10px; line-height:1.6; }
#home-activity-preview [data-status="waiting"] .hap-confirmation { color:#64748b; }
#home-activity-preview [data-status="waiting"] .hap-confirmation i { visibility:hidden; }
#home-activity-preview[data-paused="true"] * { animation-play-state:paused!important; }
@keyframes hap-select { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
@media(max-width:650px) {
 #home-activity-preview { padding:10px 16px 6px; }
 #home-activity-preview .hap-header { align-items:center; gap:8px; margin-bottom:8px; }
 #home-activity-preview h2 { font-size:15px; }
 #home-activity-preview .hap-title-line { gap:6px; }
 #home-activity-preview .hap-steps { grid-template-columns:minmax(0,1fr); gap:6px; }
 #home-activity-preview .hap-step { padding:8px 10px; gap:8px; }
 #home-activity-preview .hap-content { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; align-items:center; }
 #home-activity-preview .hap-step-heading { grid-column:1; }
 #home-activity-preview .hap-step-number { display:none; }
 #home-activity-preview .hap-total { grid-column:2; grid-row:1 / span 2; margin:0; min-height:0; flex-direction:column; gap:0; align-items:flex-end; }
 #home-activity-preview .hap-total strong { font-size:23px; }
 #home-activity-preview .hap-total > span { font-size:9px; }
 #home-activity-preview :is(progress,.hap-frames,.hap-confirmation) { grid-column:1; margin-top:4px; }
 #home-activity-preview .hap-step p { grid-column:1 / -1; margin-top:4px; min-height:16px; }
 #home-activity-preview .hap-result { grid-column:2; grid-row:1 / span 2; max-width:115px; margin:0; min-height:0; text-align:right; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
 #home-activity-preview * { animation:none!important; transition:none!important; }
}