.hsx .zps { --zh-red: #FF7A59; --zh-yellow: #FFB89E; --zh-green: #00BDA5; --zh-blue: #00A4BD; --zh-strip: linear-gradient(90deg, #6D28D9 0%, #A78BFA 25%, #FF7A59 55%, #00BDA5 80%, #00A4BD 100%); }
.hsx.zp-page::after { border-image: linear-gradient(135deg, #6D28D9 0%, #A78BFA 25%, #FF7A59 50%, #00BDA5 75%, #6D28D9 100%) 1; }
.hsx .zps-top::after { background: linear-gradient(90deg, #6D28D9, #FF7A59, #00BDA5, #00A4BD, #6D28D9, #FF7A59, #00BDA5, #00A4BD, #6D28D9); background-size: 200% 100%; }
.hsx .zps-logo { background: linear-gradient(135deg, #FF7A59 0%, #FF5C35 100%); }
.hsx .zps-hero h1 span { background: linear-gradient(90deg, #C4B5FD 0%, #FF9B7D 40%, #FFB89E 60%, #5EEAD4 100%); -webkit-background-clip: text; background-clip: text; }
.hsx .zp-logo, .hsx .zps-rec-emp .zps-logo { background: #FFF1EC; color: #FF5C35; }
.hsx .zp-ig-card .zp-logo, .hsx .zp-detail-head .zp-logo { background: #FFF1EC; color: #FF5C35; }
.hsx .zw-logo.zp { background: #FF7A59; color: #fff; }
.hsx .zp-toast::before { background: linear-gradient(180deg, #6D28D9, #FF7A59, #00BDA5, #00A4BD); }
.hsx .zps-dial-center img { border-radius: 24%; }
.hsx-card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hsx-card-link:hover { border-color: var(--color-violet-200); box-shadow: var(--shadow-md); }
.hsx-card-link:focus-visible { outline: 2px solid var(--color-violet-600); outline-offset: 2px; }

.hsm { --hsm-ink: #1E1B4B; --hsm-muted: #6B6590; --hsm-line: #4C1D95; --hsm-accent: #FF7A59; --hsm-violet: #6D28D9; background-color: #F7F5FF; background-image: radial-gradient(rgba(109, 40, 217, .13) 1px, transparent 1px), radial-gradient(900px 520px at 72% 18%, rgba(167, 139, 250, .26), transparent 62%), radial-gradient(760px 520px at 8% 92%, rgba(109, 40, 217, .12), transparent 60%), linear-gradient(180deg, #FAF8FF 0%, #F3EFFF 100%); background-size: 22px 22px, auto, auto, auto; border-block: 1px solid #E4DDFB; padding-bottom: 32px; }
.hsm .zps-head p { font-family: var(--font-mono); font-size: 13px; }
.hsm-track { position: relative; padding: 8px 0 12px; }
.hsm { position: relative; overflow: clip; }
.hsm-bg { position: absolute; top: 0; bottom: 0; left: -180px; width: calc(100% + 360px); max-width: none; height: 100%; z-index: 0; opacity: .78; pointer-events: none; translate: 0 0; transition: translate 1.1s cubic-bezier(.65, 0, .35, 1), opacity 1.4s ease; }
.hsm[data-step="2"] .hsm-bg { translate: calc(var(--hsm-shift, 0px) * -1) 0; }
.hsm-bg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 86%, transparent 100%); mask-composite: intersect; }
.hsm::before, .hsm::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.hsm::before { width: 720px; height: 620px; left: 42%; top: 6%; background: radial-gradient(closest-side, rgba(167, 139, 250, .42), rgba(167, 139, 250, 0)); animation: hsm-aurora-a 22s ease-in-out infinite alternate; }
.hsm::after { width: 560px; height: 480px; left: 58%; top: 48%; background: radial-gradient(closest-side, rgba(255, 122, 89, .2), rgba(255, 122, 89, 0)); animation: hsm-aurora-b 26s ease-in-out infinite alternate; }
@keyframes hsm-aurora-a { 0% { transform: translate3d(-12%, -4%, 0) scale(1); } 50% { transform: translate3d(-30%, 8%, 0) scale(1.12); } 100% { transform: translate3d(-4%, 14%, 0) scale(.95); } }
@keyframes hsm-aurora-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-38%, -18%, 0) scale(1.15); } 100% { transform: translate3d(-14%, -30%, 0) scale(.92); } }
.hsm > .zps-wrap, .hsm > .hsm-track { position: relative; z-index: 1; }
.hsm-orbit { z-index: 1; }
.hsm-card, .hsm-orbit { translate: 0 0; }
.hsm-stage[data-step="2"] .hsm-card, .hsm-stage[data-step="2"] .hsm-orbit { translate: calc(var(--hsm-shift, 0px) * -1) 0; }
.hsm-stage { display: flex; align-items: center; }
.hsm-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: center; width: 100%; }
.hsm-steps { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 2px; border-left: 1.5px solid var(--hsm-line); }
.hsm-steps button { position: relative; display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: 500 13px var(--font-mono); color: var(--hsm-muted); text-align: left; cursor: pointer; transition: color .25s ease, background .25s ease; }
.hsm-steps button::before { content: ""; position: absolute; left: -15px; top: 50%; width: 10px; border-top: 1.5px solid var(--hsm-line); opacity: .5; }
.hsm-steps button:hover { color: var(--hsm-ink); }
.hsm-steps button:focus-visible { outline: 2px solid var(--hsm-violet); outline-offset: 1px; }
.hsm-n { font-size: 11px; opacity: .7; }
.hsm-steps .is-done button { color: var(--hsm-ink); }
.hsm-steps .is-on button { background: #fff; color: var(--hsm-ink); font-weight: 700; box-shadow: 0 8px 20px -14px rgba(22, 23, 28, .5); }
.hsm-steps .is-on button::before { opacity: 1; border-color: var(--hsm-accent); width: 14px; }
.hsm-steps .is-on .hsm-n { color: var(--hsm-accent); opacity: 1; }

.hsm-center { position: relative; min-height: calc(var(--ring, 640px) + 90px); display: grid; place-items: center; }
.hsm-orbit { --r: calc(var(--ring, 640px) / 2); position: absolute; left: 50%; top: 50%; width: var(--ring, 640px); height: var(--ring, 640px); margin: calc(var(--ring, 640px) / -2) 0 0 calc(var(--ring, 640px) / -2); border: 1.5px solid rgba(76, 29, 149, .32); border-radius: 50%; transform: rotate(var(--rot, 0deg)); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), translate 1.1s cubic-bezier(.65, 0, .35, 1); }
.hsm-orbit::before { content: ""; position: absolute; inset: 34px; border: 1px dashed rgba(76, 29, 149, .2); border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%; }
.hsm-node { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)); cursor: pointer; }
.hsm-node b, .hsm-node em { transform: rotate(calc(-1 * (var(--a) + var(--rot, 0deg)))); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, opacity .4s ease; }
.hsm-node b { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 1.5px solid rgba(76, 29, 149, .32); font: 600 11px var(--font-mono); color: var(--hsm-muted); }
.hsm-node em { position: absolute; left: 50%; top: -30px; width: 160px; margin-left: -80px; font: 700 12px var(--font-mono); font-style: normal; color: var(--hsm-ink); text-align: center; text-transform: uppercase; letter-spacing: .04em; opacity: 0; }
.hsm-node:hover b { border-color: var(--hsm-accent); color: var(--hsm-ink); }
.hsm-node.is-done b { background: var(--hsm-ink); border-color: var(--hsm-ink); color: #fff; }
.hsm-node.is-on b { background: var(--hsm-accent); border-color: var(--hsm-accent); color: #fff; box-shadow: 0 0 0 6px rgba(255, 122, 89, .2); }
.hsm-node.is-on em { opacity: 1; }

.hsm-card { position: relative; z-index: 2; width: min(360px, 100%); padding: 16px; border-radius: 18px; background: #fff; border: 1.5px solid #E2E4EA; box-shadow: 0 40px 70px -40px rgba(22, 23, 28, .55); transition: border-color .5s ease, box-shadow .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1), translate 1.1s cubic-bezier(.65, 0, .35, 1), scale .5s ease; scale: var(--card-scale, 1); }
.hsm-crumb { display: flex; flex-wrap: wrap; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; font: 500 11px var(--font-mono); color: var(--hsm-muted); transition: max-height .4s ease, opacity .4s ease, margin .4s ease; }
.hsm-crumb span { padding: 3px 8px; border-radius: 999px; background: #F5F3FF; }
.hsm-crumb-b { display: none; color: #C2410C; background: #FFF1EC !important; }
.hsm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #EEF0F4; }
.hsm-mark { position: relative; width: 34px; height: 34px; flex: none; }
.hsm-mark-hs, .hsm-mark-sl { position: absolute; inset: 0; border-radius: 10px; transition: opacity .5s ease, transform .5s ease; }
.hsm-mark-sl { display: grid; place-items: center; background: linear-gradient(135deg, #7C3AED, #6D28D9); color: #fff; opacity: 0; transform: scale(.6); }
.hsm-mark-sl svg { width: 18px; height: 18px; }
.hsm-sys { flex: 1; min-width: 0; }
.hsm-sys b { position: relative; display: block; height: 18px; overflow: hidden; font-size: 14px; color: var(--hsm-ink); }
.hsm-sys b span { display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hsm-sys small { display: block; font: 500 11px var(--font-mono); color: var(--hsm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsm-conn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #F2F3F6; font: 600 11px var(--font-mono); color: var(--hsm-muted); white-space: nowrap; }
.hsm-conn i { width: 7px; height: 7px; border-radius: 50%; background: #A3A6B0; }
.hsm-conn-b { display: none; }
.hsm-person { display: flex; align-items: center; gap: 10px; padding: 10px 0 8px; }
.hsm-person b { display: block; font-size: 16px; color: var(--hsm-ink); }
.hsm-person small { font-size: 12.5px; color: var(--hsm-muted); }
.hsm-check { position: relative; width: 18px; height: 18px; flex: none; border: 1.5px solid #C5C8D2; border-radius: 5px; transition: background .3s ease, border-color .3s ease, width .4s ease, margin .4s ease, opacity .4s ease; }
.hsm-check::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.hsm-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #FFF1EC; color: #C2410C; font-weight: 800; font-size: 14px; transition: background .5s ease, color .5s ease; }
.hsm-rows { margin: 0; display: grid; gap: 4px; }
.hsm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; align-items: center; padding: 5px 10px; border-radius: 10px; background: #F7F8FA; border: 1px solid transparent; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.hsm-row dt { position: relative; font: 500 11px var(--font-mono); color: var(--hsm-muted); min-width: 0; }
.hsm-src, .hsm-dst { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s ease, transform .4s ease, max-height .4s ease; }
.hsm-dst { max-height: 0; opacity: 0; color: var(--hsm-violet); transform: translateX(-8px); }
.hsm-row dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--hsm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity .35s ease calc(var(--k) * 70ms), transform .35s ease calc(var(--k) * 70ms); }
.hsm-row::after { content: ""; grid-column: 2; grid-row: 1; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #E7E9EE, #F4F5F8, #E7E9EE); background-size: 200% 100%; animation: hsm-shimmer 1.4s linear infinite; transition: opacity .3s ease; }
.hsm-row dd { grid-column: 2; grid-row: 1; }
.hsm-checks { display: flex; flex-wrap: wrap; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .4s ease, margin .4s ease; }
.hsm-checks span { padding: 3px 9px; border-radius: 999px; background: #ECFDF5; color: #047857; font: 600 11px var(--font-mono); }
.hsm-checks span::before { content: "✓ "; }
.hsm-progress { height: 0; overflow: hidden; opacity: 0; transition: height .4s ease, opacity .4s ease, margin .4s ease; }
.hsm-bar { display: block; height: 8px; border-radius: 99px; background: #EEF0F4; overflow: hidden; }
.hsm-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hsm-violet), var(--hsm-accent)); transition: width 1.4s cubic-bezier(.4, 0, .2, 1); }
.hsm-progress small { display: block; margin-top: 6px; font: 600 11px var(--font-mono); color: var(--hsm-muted); }
.hsm-progress-b { display: none; color: #047857; }
.hsm-tag { display: flex; align-items: center; gap: 6px; height: 0; overflow: hidden; opacity: 0; color: var(--hsm-violet); font: 700 12px var(--font-mono); transition: height .4s ease, opacity .4s ease, margin .4s ease; }
.hsm-tag svg { width: 14px; height: 14px; }
.hsm-card .is-target { box-shadow: 0 0 0 2px var(--hsm-accent), 0 0 0 6px rgba(255, 122, 89, .18); border-radius: 10px; }
@keyframes hsm-shimmer { to { background-position: -200% 0; } }
@keyframes hsm-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 189, 165, .55); } 100% { box-shadow: 0 0 0 8px rgba(0, 189, 165, 0); } }

.hsm-stage.at-0 .hsm-conn { background: #E6FBF7; color: #047857; }
.hsm-stage.at-0 .hsm-conn i { background: #00BDA5; animation: hsm-pulse 1.6s ease-out infinite; }
.hsm-stage.at-0 .hsm-conn-a { display: none; }
.hsm-stage.at-0 .hsm-conn-b { display: inline; }
.hsm-stage.at-1 .hsm-crumb { max-height: 60px; margin-bottom: 12px; opacity: 1; }
.hsm-stage.at-2 .hsm-crumb-b { display: inline-block; }
.hsm-stage.at-3 .hsm-row::after { opacity: 0; animation: none; }
.hsm-stage.at-3 .hsm-row dd { opacity: 1; transform: none; }
.hsm-stage.at-4 .hsm-check { background: var(--hsm-violet); border-color: var(--hsm-violet); }
.hsm-stage.at-4 .hsm-check::after { transform: rotate(45deg) scale(1); }
.hsm-stage.at-5 .hsm-src { opacity: .55; }
.hsm-stage.at-5 .hsm-src::after { content: " →"; }
.hsm-stage.at-5 .hsm-dst { max-height: 16px; opacity: 1; transform: none; }
.hsm-stage.at-6 .hsm-checks { max-height: 60px; margin-top: 10px; opacity: 1; }
.hsm-stage.at-6 .hsm-row[data-hsm-part="email"] { background: #F0FDF8; border-color: #A7F3D0; }
.hsm-stage.at-7 .hsm-progress { height: 34px; margin-top: 12px; opacity: 1; }
.hsm-stage.at-7 .hsm-bar i { width: 100%; }
.hsm-stage.at-8 .hsm-progress-a { display: none; }
.hsm-stage.at-8 .hsm-progress-b { display: inline; }
.hsm-stage.at-8 .hsm-card { border-color: #C4B5FD; box-shadow: 0 40px 70px -40px rgba(76, 29, 149, .6); }
.hsm-stage.at-8 .hsm-mark-hs { opacity: 0; transform: scale(.6); }
.hsm-stage.at-8 .hsm-mark-sl { opacity: 1; transform: none; }
.hsm-stage.at-8 .hsm-sys b span { transform: translateY(-100%); }
.hsm-stage.at-8 .hsm-avatar { background: #EDE9FE; color: #5B21B6; }
.hsm-stage.at-8 .hsm-check { width: 0; margin-right: -10px; opacity: 0; border-width: 0; }
.hsm-stage.at-8 .hsm-src { display: none; }
.hsm-stage.at-8 .hsm-dst { color: var(--hsm-muted); }
.hsm-stage.at-8 .hsm-tag { height: 20px; margin-top: 12px; opacity: 1; }

.hsm-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.hsm-lines path { fill: none; stroke: var(--hsm-line); stroke-width: 1.5; }
.hsm-lines circle { fill: var(--hsm-accent); }
.hsm-callout { position: absolute; z-index: 4; width: 230px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .94); border: 1px solid #E4DDFB; box-shadow: 0 20px 40px -28px rgba(22, 23, 28, .6); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s, top .35s ease; }
.hsm-callout.is-left { left: 8px; }
.hsm-callout.is-right { right: 24px; }
.hsm-callout.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hsm-callout-n { display: block; margin-bottom: 4px; font: 600 11px var(--font-mono); color: var(--hsm-accent); text-transform: uppercase; letter-spacing: .04em; }
.hsm-callout b { display: block; font-size: 15px; color: var(--hsm-ink); }
.hsm-callout > span:not(.hsm-callout-n) { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: #3F4250; }
.hsm-callout .zps-link { margin-top: 8px; font-size: 13px; }
.hsm-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; }
.hsm-controls { display: inline-flex; gap: 8px; margin-right: 8px; }

@media (max-width: 1439px) {
  .hsm-callout { width: 190px; padding: 12px 14px; }
  .hsm-callout b { font-size: 14px; }
}
@media (max-width: 1279px) {
  .hsm-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hsm-steps { display: flex; overflow-x: auto; gap: 4px; padding: 0 0 6px; border-left: 0; scrollbar-width: thin; }
  .hsm-steps li { flex: none; }
  .hsm-steps button::before { display: none; }
  .hsm-steps button { min-height: 40px; white-space: nowrap; }
  .hsm-center { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
  .hsm-orbit, .hsm-lines { display: none; }
  .hsm-bg { opacity: .5; }
  .hsm-card { width: min(400px, 100%); }
  .hsm-callout { position: static; display: none; width: min(400px, 100%); transform: none; }
  .hsm-callout.is-on { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hsm *, .hsm-orbit { transition: none !important; animation: none !important; }
  .hsm::before, .hsm::after { animation: none !important; }
}
.zp-modal-backdrop { padding-bottom: 96px; }
.zp-modal-backdrop .zp-auth { max-height: 100%; }