.zp { position: relative; background: var(--bg); color: var(--fg-body); overflow-x: clip; }
.zp h1, .zp h2, .zp h3, .zp h4 { font-family: var(--font-display); color: var(--fg); letter-spacing: var(--tracking-tight); }
.zp .container:where(:not(.lp > .container)) { padding-left: 16px; padding-right: 16px; }
.zp-narrow { max-width: 920px; }
.zp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zp :focus-visible { outline: 2px solid var(--color-violet-600); outline-offset: 2px; }
.zp [data-zp-h]:focus { outline: none; }

.zp-hero { padding: 32px 0 72px; background: var(--gradient-soft-surface, var(--bg-soft)); border-bottom: 1px solid var(--border-soft); }
.zp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 32px; padding: 0; font-size: 13px; color: var(--fg-muted); }
.zp-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--fg-faint); }
.zp-crumbs a { color: var(--color-violet-700); text-decoration: none; }
.zp-crumbs a:hover { text-decoration: underline; }
.zp-crumbs [aria-current] { color: var(--fg); font-weight: 600; }
.zp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.zp-hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; margin: 16px 0 18px; }
.zp-hero .lede { margin-bottom: 22px; }
.zp-hero-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; font-weight: 500; color: var(--fg); }
.zp-hero-bullets li { display: flex; align-items: center; gap: 10px; }
.zp-hero-bullets i, .zp-hero-bullets svg { width: 18px; height: 18px; color: var(--color-emerald-600); flex-shrink: 0; }
.zp-shot { margin: 0; }
.zp-shot figcaption { margin-top: 12px; font-size: 13px; color: var(--fg-muted); }

.zp-win { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.zp-win-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--fg-muted); min-width: 0; }
.zp-win-bar > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.zp-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-slate-300); }
.zp-shot-body { padding: 18px; }
.zp-shot-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zp-shot-head b { display: block; color: var(--fg); }
.zp-shot-head small { color: var(--color-emerald-700); font-weight: 600; }
.zp-shot-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zp-shot-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); padding: 8px; border-bottom: 1px solid var(--border-soft); }
.zp-shot-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); }
.zp-shot-table td:first-child { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.zp-shot-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--color-violet-700); }
.zp-shot-btn { background: var(--color-violet-600); color: #fff; padding: 7px 14px; border-radius: var(--radius-md); }
.zp-logo { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--color-blue-50); color: var(--color-blue-700); font: 700 13px/1 var(--font-display); flex-shrink: 0; }

.zp-section { padding: var(--section-y, 88px) 0; }
.zp-alt { background: var(--bg-soft); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.zp-head { max-width: 760px; margin-bottom: 40px; }
.zp-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; margin: 14px 0 12px; }
.zp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.zp-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zp-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.zp-card h3 { font-size: 18px; margin: 14px 0 8px; }
.zp-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.zp-card-sm h3 { font-size: 16px; }
.zp-card-sm p { font-size: 14px; }
.zp-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-violet-50); color: var(--color-violet-700); }
.zp-ic i, .zp-ic svg { width: 20px; height: 20px; }
.zp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.zp-step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.zp-step-n { position: absolute; top: 20px; right: 20px; font: 700 28px/1 var(--font-display); color: var(--color-violet-200); }
.zp-step h3 { font-size: 17px; margin: 14px 0 8px; }
.zp-step p { margin: 0; font-size: 14px; line-height: 1.6; }

.zp-map-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-size: 15px; }
.zp-map-table th { text-align: left; padding: 14px 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); background: var(--bg-soft); }
.zp-map-table td { padding: 14px 18px; border-top: 1px solid var(--border-soft); color: var(--fg); }
.zp-map-arrow { width: 40px; color: var(--color-violet-500); }
.zp-map-arrow i, .zp-map-arrow svg { width: 18px; height: 18px; }
.zp-req { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-rose-50); color: var(--color-rose-600); font-size: 11px; font-weight: 700; vertical-align: middle; }

.zp-faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; }
.zp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 600; color: var(--fg); min-height: 44px; }
.zp-faq summary::-webkit-details-marker { display: none; }
.zp-faq summary i, .zp-faq summary svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.zp-faq details[open] summary i, .zp-faq details[open] summary svg { transform: rotate(180deg); }
.zp-faq p { margin: 0; padding: 0 20px 18px; line-height: 1.65; }

.zp-final { padding: 88px 0; background: var(--gradient-dark-intel, var(--bg-dark)); color: var(--fg-on-dark); text-align: center; }
.zp-final h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; }
.zp-final p { color: var(--fg-on-dark-muted); margin: 0 auto 28px; max-width: 560px; font-size: 17px; }
.zp-final .hero-ctas { justify-content: center; margin: 0; }

.zp-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.zp-demo .zp-guide { display: none; }
.zp-guide { position: sticky; top: 96px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-sm); }
.zp-guide-count { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-violet-700); }
.zp-progress { height: 6px; border-radius: 99px; background: var(--color-violet-100); overflow: hidden; }
.zp-progress span { display: block; height: 100%; width: 11%; background: var(--color-violet-600); transition: width var(--dur-slow) var(--ease-out); }
.zp-guide h3 { font-size: 20px; margin: 18px 0 8px; }
.zp-guide > p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
.zp-stages { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 2px; }
.zp-stages button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; font: 500 14px/1.3 var(--font-sans); color: var(--fg-body); text-align: left; cursor: pointer; }
.zp-stages button:hover:not(:disabled) { background: var(--color-violet-50); }
.zp-stages button:disabled { color: var(--fg-faint); cursor: default; }
.zp-stages button span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.zp-stages .is-done button span { background: var(--color-emerald-500); border-color: var(--color-emerald-500); color: #fff; }
.zp-stages .is-current button { background: var(--color-violet-50); color: var(--color-violet-700); font-weight: 700; }
.zp-stages .is-current button span { background: var(--color-violet-600); border-color: var(--color-violet-600); color: #fff; }
.zp-guide-hint { min-height: 20px; margin: 0 0 12px; font-size: 13px; color: var(--color-amber-600); }
.zp-guide-nav { display: flex; gap: 10px; }
.zp-guide-nav .btn { flex: 1; }
.zp-guide-nav .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.zp-guide-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.zp-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; font: 600 13px var(--font-sans); color: var(--color-violet-700); cursor: pointer; text-decoration: none; }
.zp-link i, .zp-link svg { width: 15px; height: 15px; }
.zp-app-wrap { min-width: 0; }
.zp-badge-demo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-amber-50); color: var(--color-amber-600); font-size: 12px; font-weight: 700; }
.zp-badge-demo i, .zp-badge-demo svg { width: 14px; height: 14px; }
.zp-app { min-height: 560px; outline: none; }
.zp-noscript { padding: 24px; background: #fff; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.zp-demo-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; text-align: center; }
.zp-demo-cta p { margin: 0; font-weight: 600; color: var(--fg); }

.zp-app-body { display: grid; grid-template-columns: 160px minmax(0, 1fr); min-height: 560px; }
.zp-portal-wrap { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.zp-strip { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 10px 12px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.zp-strip::-webkit-scrollbar { display: none; }
.zp-strip li { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--fg-body); white-space: nowrap; transition: background .3s ease, color .3s ease; }
.zp-strip li > span { display: inline-grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--color-slate-100); font-size: 11px; color: var(--fg-muted); transition: background .3s ease, color .3s ease; }
.zp-strip li > span svg, .zp-strip li > span i { width: 13px; height: 13px; }
.zp-strip li.is-current { background: var(--color-violet-50); color: var(--color-violet-700); }
.zp-strip li.is-current > span { background: var(--color-violet-600); color: #fff; }
.zp-strip li.is-done > span { background: var(--color-emerald-500); color: #fff; }
.zp-hintbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 12px; border-top: 1px solid var(--border-soft); }
.zp-hintbar p { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; margin: 0; padding: 9px 14px; border-radius: 10px; background: var(--color-violet-50); font-size: 14px; color: var(--color-violet-700); }
.zp-hintbar p > svg, .zp-hintbar p > i { flex-shrink: 0; width: 17px; height: 17px; }
.zp-hintbar b { color: var(--color-violet-700); }
.zp-flownav { display: inline-flex; gap: 6px; }
.zp-flow-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-violet-200); border-radius: 10px; background: #fff; color: var(--color-violet-700); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.zp-flow-btn:hover:not(:disabled) { background: var(--color-violet-50); border-color: var(--color-violet-400); }
.zp-flow-btn:focus-visible { outline: 2px solid var(--color-violet-600); outline-offset: 2px; }
.zp-flow-btn:disabled { opacity: .4; cursor: not-allowed; }
.zp-flow-btn svg, .zp-flow-btn i { width: 18px; height: 18px; }
.zp-portal { border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.zp-portal .zp-app-body { grid-template-columns: 250px minmax(0, 1fr); min-height: 720px; }
.zp-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-soft); background: #fff; }
.zp-side-brand { display: grid; gap: 8px; padding: 20px 18px 16px; border-bottom: 1px solid var(--border-soft); }
.zp-side-brand img { width: 150px; height: auto; }
.zp-side-brand > span { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--color-violet-50); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-violet-700); }
.zp-side-brand > span svg, .zp-side-brand > span i { width: 12px; height: 12px; }
.zp-side-scroll { flex: 1; display: grid; align-content: start; gap: 2px; padding: 10px 12px; }
.zp-side-group { margin: 12px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.zp-side-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: 500 14px var(--font-sans); text-align: left; color: var(--fg); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.zp-side-item:hover:not(.is-on) { background: var(--color-violet-50); }
.zp-side-item:focus-visible, .zp-side-user:focus-visible { outline: 2px solid var(--color-violet-600); outline-offset: 2px; }
button.zp-side-user { width: calc(100% - 24px); background: #fff; font: inherit; text-align: left; color: inherit; cursor: pointer; }
button.zp-side-user:hover, button.zp-side-user.is-on { background: var(--color-violet-50); }
.zp-ask { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-ask-answer { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--color-violet-50); color: var(--fg); font-size: 14px; }
.zp-ask-answer > svg, .zp-ask-answer > i { flex: none; width: 17px; height: 17px; color: var(--color-violet-600); }
.zp-page-list { list-style: none; margin: 0; padding: 0; }
.zp-page-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "m a"; gap: 2px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.zp-page-list li:first-child { border-top: 0; }
.zp-page-list li > b { grid-area: t; color: var(--fg); }
.zp-page-list li > .zp-muted { grid-area: m; font-size: 13px; }
.zp-page-list li > .zp-pill, .zp-page-list li > .zp-btn { grid-area: a; }
.zp-side-item > svg, .zp-side-item > i { flex-shrink: 0; width: 17px; height: 17px; color: var(--fg-muted); }
.zp-side-item > span { flex: 1; }
.zp-side-item em { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--color-slate-100); font-size: 11px; font-style: normal; font-weight: 700; text-align: center; color: var(--fg-muted); }
.zp-side-item.is-on { background: var(--color-violet-600); color: #fff; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(109, 40, 217, .7); }
.zp-side-item.is-on > svg, .zp-side-item.is-on > i { color: #fff; }
.zp-side-item.is-on em { background: rgba(255, 255, 255, .2); color: #fff; }
.zp-side-user { display: flex; align-items: center; gap: 10px; margin: 10px 12px 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 12px; }
.zp-side-user div { flex: 1; display: grid; }
.zp-side-user b { font-size: 13.5px; color: var(--fg); }
.zp-side-user small { font-size: 12px; color: var(--fg-muted); }
.zp-side-user > svg, .zp-side-user > i { width: 15px; height: 15px; color: var(--fg-muted); }
.zp-avatar-sm { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-violet-100); font-size: 12px; font-weight: 800; color: var(--color-violet-700); }
.zp-portal .zp-main { padding: 0; background: #FBFAFF; }
.zp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; border-bottom: 1px solid var(--border-soft); background: #fff; }
.zp-top h2 { margin: 0; font: 800 24px/1.2 var(--font-display); color: var(--fg); outline: none; }
.zp-top p { margin: 2px 0 0; font-size: 13.5px; color: var(--fg-muted); }
.zp-top-tools { display: flex; align-items: center; gap: 10px; }
.zp-top-search { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--fg-muted); }
.zp-top-search svg, .zp-top-search i, .zp-top-bell svg, .zp-top-bell i { width: 16px; height: 16px; }
.zp-top-bell { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; color: var(--fg-muted); }
.zp-main-body { padding: 22px 24px; }
.zp-portal .zp-page-head { display: none; }
.zp-ig-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.zp-ig-stat { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.zp-ig-stat b { display: block; font: 800 22px/1.1 var(--font-display); color: var(--fg); }
.zp-ig-stat div > span { font-size: 13px; color: var(--fg-muted); }
.zp-ig-stat-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; }
.zp-ig-stat-ico svg, .zp-ig-stat-ico i { width: 19px; height: 19px; }
.zp-ig-stat-ico.is-violet { background: var(--color-violet-50); color: var(--color-violet-600); }
.zp-ig-stat-ico.is-green { background: var(--color-emerald-50); color: var(--color-emerald-700); }
.zp-ig-stat-ico.is-amber { background: var(--color-amber-50); color: var(--color-amber-600); }
.zp-ig-stat-ico.is-gray { background: var(--color-slate-100); color: var(--color-slate-700); }
.zp-ig-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border: 1px dashed var(--color-violet-200); border-radius: 14px; background: #fff; font-weight: 700; color: var(--color-violet-700); }
.zp-ig-empty > svg, .zp-ig-empty > i { width: 18px; height: 18px; }
.zp-ig-empty span { flex: 1; text-align: center; }
.zp-ig-search { position: relative; flex-direction: row; align-items: center; }
.zp-ig-search > svg, .zp-ig-search > i { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: var(--fg-muted); transform: translateY(-50%); pointer-events: none; }
.zp-field.zp-ig-search input { flex: 1; padding-left: 36px; }
.zp-ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.zp-ig-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.zp-ig-card:hover { border-color: var(--color-violet-300); box-shadow: 0 14px 28px -22px rgba(76, 29, 149, .6); transform: translateY(-1px); }
.zp-ig-card-head { display: flex; align-items: center; gap: 12px; }
.zp-ig-card-head div { display: grid; }
.zp-ig-card-head b { color: var(--fg); }
.zp-ig-card p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-body); }
.zp-ig-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zp-ig-card .zp-logo { background: var(--color-violet-50); color: var(--color-violet-700); }
.zp-btn.soft { border-color: var(--color-violet-100); background: var(--color-violet-50); color: var(--color-violet-700); }
.zp-btn.soft:hover:not(:disabled) { background: var(--color-violet-100); }
@media (max-width: 1023px) {
  .zp-portal .zp-app-body { grid-template-columns: minmax(0, 1fr); }
  .zp-side { display: none; }
  .zp-ig-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-top-search { display: none; }
}
.zp-rail { padding: 16px 10px; background: var(--color-midnight, #0f172a); color: #cbd5e1; display: flex; flex-direction: column; gap: 2px; }
.zp-rail-brand { padding: 4px 10px 14px; font: 700 15px var(--font-display); color: #fff; }
.zp-rail-group { padding: 12px 10px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64748b; }
.zp-rail-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #94a3b8; font: 500 13px var(--font-sans); text-align: left; }
.zp-rail-item i, .zp-rail-item svg { width: 16px; height: 16px; }
.zp-rail-item.is-section { color: #e2e8f0; }
.zp-rail-item.is-on { background: rgba(167,139,250,.18); color: #fff; }
.zp-main { min-width: 0; padding: 22px; background: var(--bg-soft); font-size: 14px; }
.zp-page-head h3 { font-size: 20px; margin: 0 0 4px; }
.zp-page-head p { margin: 0 0 16px; color: var(--fg-muted); font-size: 13px; }
.zp-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; }
.zp-panel h4 { font-size: 15px; margin: 0 0 12px; }
.zp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zp-row h4 { margin: 0; }
.zp-grow { flex: 1 1 160px; min-width: 0; }
.zp-muted { color: var(--fg-muted); font-size: 13px; }
.zp-small { display: block; font-size: 13px; margin: 12px 0 6px; color: var(--fg); }
.zp-center { text-align: center; padding: 32px 18px; }
.zp-center p { margin: 0 0 14px; }
.zp-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 14px 0; font-size: 13px; }
.zp-dl dt { color: var(--fg-muted); }
.zp-dl dd { margin: 0; color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.zp-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-blue-50); color: var(--color-blue-700); font-size: 13px; margin: 0 0 14px; }
.zp-note i, .zp-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.zp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.zp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; color: var(--fg); font: 600 13px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.zp-btn i, .zp-btn svg { width: 15px; height: 15px; }
.zp-btn:hover:not(:disabled) { background: var(--bg-soft); }
.zp-btn.primary { background: var(--color-violet-600); border-color: var(--color-violet-600); color: #fff; }
.zp-btn.primary:hover:not(:disabled) { background: var(--color-violet-500); }
.zp-btn.ghost { border-color: transparent; background: transparent; color: var(--color-violet-700); }
.zp-btn.sm { min-height: 34px; padding: 0 10px; font-size: 12px; }
.zp-btn:disabled, .zp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.zp-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
.zp-pill.green { background: var(--color-emerald-50); color: var(--color-emerald-700); }
.zp-pill.blue { background: var(--color-blue-50); color: var(--color-blue-700); }
.zp-pill.amber { background: var(--color-amber-50); color: var(--color-amber-600); }
.zp-pill.gray { background: var(--color-slate-100); color: var(--color-slate-700); }

.zp-ok, .zp-final-msg { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-md); background: var(--color-emerald-50); color: var(--color-emerald-700); margin-top: 14px; }
.zp-ok b, .zp-final-msg b { display: block; color: var(--fg); margin-bottom: 2px; }
.zp-ok span, .zp-final-msg span { font-size: 13px; color: var(--fg-body); }
.zp-ok > i, .zp-ok > svg, .zp-final-msg > i, .zp-final-msg > svg { width: 20px; height: 20px; flex-shrink: 0; }
.zp-final-msg { background: var(--color-violet-50); color: var(--color-violet-700); flex-wrap: wrap; align-items: center; }
.zp-final-msg > div { flex: 1 1 220px; }
.zp-loading { display: flex; align-items: center; gap: 12px; padding: 18px 0; color: var(--fg); font-weight: 600; }
.zp-spin { width: 20px; height: 20px; border: 3px solid var(--color-violet-100); border-top-color: var(--color-violet-600); border-radius: 50%; animation: zp-spin .8s linear infinite; flex-shrink: 0; }
@keyframes zp-spin { to { transform: rotate(360deg); } }

.zp-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.zp-tabs button { min-height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 13px var(--font-sans); color: var(--fg-muted); cursor: pointer; white-space: nowrap; }
.zp-tabs [aria-selected="true"] { color: var(--color-violet-700); border-bottom-color: var(--color-violet-600); }
.zp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-bottom: 8px; padding: 0; border: 0; background: none; font: 600 13px var(--font-sans); color: var(--color-violet-700); cursor: pointer; }
.zp-back i, .zp-back svg { width: 15px; height: 15px; }
.zp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 12px; text-align: center; color: var(--fg-muted); }
.zp-empty b { color: var(--fg); }
.zp-empty > i, .zp-empty > svg { width: 28px; height: 28px; color: var(--color-violet-400); }
.zp-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.zp-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; text-align: left; font: 13px/1.5 var(--font-sans); color: var(--fg-body); cursor: pointer; }
.zp-option b { font-size: 15px; color: var(--fg); }
.zp-option > i, .zp-option > svg { width: 22px; height: 22px; color: var(--color-violet-600); }
.zp-option:hover { border-color: var(--color-violet-300); }
.zp-option.is-on { border-color: var(--color-violet-600); box-shadow: 0 0 0 3px var(--color-violet-100); }
.zp-provider { padding: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.zp-source-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zp-source-head h4 { margin: 0 0 2px; }

.zp-li-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 14px; overflow-x: auto; }
.zp-li-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.zp-li-steps span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-slate-100); font-size: 11px; }
.zp-li-steps .is-current { border-color: var(--color-violet-300); color: var(--color-violet-700); }
.zp-li-steps .is-current span { background: var(--color-violet-600); color: #fff; }

.zp-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.zp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--fg-muted); min-width: 150px; }
.zp-field input, .zp-field select, .zp-maps select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; font: 14px var(--font-sans); color: var(--fg); width: 100%; }
.zp-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.zp-selbar b { margin-right: auto; color: var(--fg); }
.zp-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.zp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zp-table th { text-align: left; padding: 9px 10px; background: var(--bg-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); white-space: nowrap; }
.zp-table td { padding: 10px; border-top: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.zp-table b { color: var(--fg); }
.zp-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-violet-600); cursor: pointer; }
.zp-table tr.is-on td { background: var(--color-violet-50); }
.zp-table tr.is-off td { color: var(--fg-faint); }
.zp-table tr.is-new td { background: var(--color-emerald-50); }
.zp-table tr.is-bad td { background: var(--color-rose-50); }
.zp-emp td:nth-child(2) { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.zp-src { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-blue-700); font-size: 13px; }
.zp-src i, .zp-src svg { width: 14px; height: 14px; }
.zp-error { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-rose-50); color: var(--color-rose-600); font-size: 13px; font-weight: 600; }
.zp-error i, .zp-error svg { width: 16px; height: 16px; flex-shrink: 0; }
.zp-inline-err { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--color-rose-600); }

.zp-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.zp-map-grid .zp-panel { margin-bottom: 0; }
.zp-maps td { white-space: nowrap; }
.zp-maps td:last-child { min-width: 190px; white-space: normal; }
.zp-preview .zp-dl { font-size: 12px; }
.zp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-bottom: 12px; }
.zp-tile { padding: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-soft); }
.zp-tile b { display: block; font: 700 22px/1.1 var(--font-display); color: var(--fg); }
.zp-tile span { font-size: 12px; color: var(--fg-muted); }
.zp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.zp-records { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.zp-record { padding: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.zp-issues { margin: 8px 0 4px; padding-left: 18px; font-size: 12px; color: var(--color-amber-600); }
.zp-resolve { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zp-previewline { margin: 14px 0 0; font-size: 13px; }
.zp-meter { height: 8px; border-radius: 99px; background: var(--color-violet-100); overflow: hidden; margin: 14px 0; }
.zp-meter span { display: block; height: 100%; background: var(--color-violet-600); transition: width var(--dur-base) var(--ease-out); }
.zp-pill.violet { background: var(--color-violet-50); color: var(--color-violet-700); }
.zp-pill.rose { background: var(--color-rose-50); color: var(--color-rose-600); }
.zp-pill.dot::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.zp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.zp-toolbar .zp-back { margin-bottom: 0; }
.zp-linkbtn { padding: 0; border: 0; background: none; font: 600 13px var(--font-sans); color: var(--color-violet-700); cursor: pointer; }
.zp-linkbtn:hover { text-decoration: underline; }
.zp-panel h4 .zp-linkbtn { margin-left: 10px; font-size: 12px; }
.zp-num { text-align: right; font-variant-numeric: tabular-nums; }
.zp-table th.zp-num { text-align: right; }
.zp-warn { color: var(--color-amber-600); font-weight: 600; }
.zp-selbar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.zp-selbar > span { color: var(--fg-body); }
.zp-table .zp-cb-col { width: 40px; }
.zp-table tr.is-selectable { cursor: pointer; }
.zp-table tr.is-selectable:hover td { background: var(--bg-soft); }
.zp-scroll .zp-loading, .zp-scroll .zp-empty { justify-content: center; }
.zp-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.zp-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.zp-footer > span:first-child { flex: 1 1 240px; font-size: 13px; }
.zp-footer > .zp-btn.primary { margin-left: auto; }
.zp-right { text-align: right; }
.zp-required { color: var(--color-rose-600); font-weight: 700; }
.zp-type { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-slate-100); color: var(--color-slate-700); font-size: 11px; font-weight: 600; }
.zp-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--fg); cursor: pointer; }
.zp-toggle input { width: 18px; height: 18px; accent-color: var(--color-violet-600); }
.zp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--fg-muted); }
.zp-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.zp-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; text-align: left; cursor: pointer; font: 12px var(--font-sans); color: var(--fg-muted); }
.zp-stat b { font: 700 22px/1.1 var(--font-display); color: var(--fg); }
.zp-stat:hover { border-color: var(--color-violet-300); }
.zp-stat.is-active { border-color: var(--color-violet-600); box-shadow: 0 0 0 3px var(--color-violet-100); }
.zp-stat.is-create b, .zp-stat.is-created b { color: var(--color-emerald-700); }
.zp-stat.is-update b, .zp-stat.is-updated b { color: var(--color-blue-700); }
.zp-stat.is-review b { color: var(--color-amber-600); }
.zp-stat.is-failed b { color: var(--color-rose-600); }
.zp-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.zp-confirm .zp-muted { margin-top: 4px; }
.zp-recs td { vertical-align: top; }
.zp-details { white-space: normal !important; min-width: 260px; font-size: 12px; }
.zp-details > div + div { margin-top: 4px; }
.zp-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }
.zp-fields div { display: contents; }
.zp-fields dt { color: var(--fg-muted); text-transform: capitalize; }
.zp-fields dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.zp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); background: var(--color-violet-50); color: var(--color-violet-700); font-size: 12px; font-weight: 600; }
.zp-chip-x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.zp-chip-x:hover { background: var(--color-violet-100); }
.zp-chip-x i, .zp-chip-x svg { width: 13px; height: 13px; }
.zp-option .zp-btn { margin-top: 6px; }
div.zp-option { cursor: default; }
.zp-detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.zp-detail-head h3 { font-size: 20px; margin: 0; }
.zp-detail-head .zp-meta { margin-top: 6px; }
.zp-detail-head .zp-logo { background: var(--color-violet-50); color: var(--color-violet-700); }
.zp-top .zp-top-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); }
.zp-top-crumb b { color: var(--fg); }
.zp-top-crumb svg, .zp-top-crumb i { width: 13px; height: 13px; }
.zp-setup { list-style: none; margin: 0; padding: 0; }
.zp-setup li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.zp-setup li:last-child { padding-bottom: 0; }
.zp-setup li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: var(--border); }
.zp-setup-n { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border: 1.5px solid var(--border); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--fg-muted); background: #fff; }
.zp-setup li.is-current .zp-setup-n { border-color: var(--color-violet-600); color: var(--color-violet-700); }
.zp-setup-t { display: block; margin: 3px 0 6px; font-size: 14px; color: var(--fg); }
.zp-setup p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--fg-body); }
.zp-setup li:last-child p { margin: 0; }
.zp-h4-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zp-perms { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.zp-perms li { display: flex; gap: 12px; align-items: flex-start; }
.zp-perms li > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--fg-body); }
.zp-perms b { color: var(--fg); font-size: 13.5px; }
.zp-perms code { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); }
.zp-perm-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--color-violet-50); color: var(--color-violet-600); }
.zp-perm-ico svg, .zp-perm-ico i { width: 15px; height: 15px; }
.zp-detail-grid .zp-perm-note { margin: 0; font-size: 12.5px; }
.zp-detail-grid .zp-dl a { color: var(--color-violet-700); text-decoration: underline; }
.zp-logo-lg { width: 56px; height: 56px; font-size: 18px; border-radius: 15px; }
.zp-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.zp-detail-grid .zp-panel { margin-bottom: 0; }
.zp-detail-grid .zp-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.zp-detail-grid p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--fg-body); }
.zp-detail-grid .zp-dl { margin: 0 0 12px; }
.zp-scopes { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zp-scopes li { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--fg-body); }
.zp-scopes code, .zp-caps code { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--bg-soft); color: var(--fg); }
.zp-caps td { white-space: normal; vertical-align: top; }
.zp-caps td b { display: block; }
.zp-caps td code { display: inline-block; margin: 0 4px 4px 0; }
.zp-notice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius-md); font-size: 13px; }
.zp-notice span { flex: 1; }
.zp-notice.is-ok { background: var(--color-emerald-50); color: var(--color-emerald-700); }
.zp-notice.is-error { background: var(--color-rose-50); color: var(--color-rose-600); }
.zp-icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.zp-icon-btn:hover { background: rgba(0, 0, 0, .06); }
.zp-icon-btn i, .zp-icon-btn svg { width: 16px; height: 16px; }
.zp-activity { list-style: none; margin: 0 -18px -18px; padding: 0; }
.zp-activity li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--fg); }
.zp-activity i, .zp-activity svg { width: 16px; height: 16px; }
.zp-act-ok { color: var(--color-emerald-700); }
.zp-act-fail { color: var(--color-rose-600); }
.zp-act-meta { white-space: nowrap; }
.zp-btn.danger { background: var(--color-rose-600); border-color: var(--color-rose-600); color: #fff; }
.zp-btn.danger:hover:not(:disabled) { background: var(--color-rose-500, #e11d48); }
.zp-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(21, 16, 59, .45); }
.zp-modal { width: 100%; max-width: 460px; padding: 24px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-lg); }
.zp-modal h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; }
.zp-modal h4 i, .zp-modal h4 svg { width: 18px; height: 18px; color: var(--color-violet-700); }
.zp-modal p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--fg-body); }
.zp-modal .zp-actions { margin-top: 18px; }
.zp-auth { display: grid; gap: 16px; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px; border: 1px solid #e7e3f1; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px -40px rgba(21, 16, 59, .45); color: #15103a; font-family: Inter, system-ui, sans-serif; }
.zp-auth-tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff7e6; color: #9a5b00; font-size: 12px; font-weight: 700; }
.zp-auth h3 { margin: 0; font-size: 22px; line-height: 1.25; color: #15103a; }
.zp-auth p { margin: 0; color: #4b4668; font-size: 14.5px; line-height: 1.55; }
.zp-auth ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zp-auth li { padding: 10px 12px; border: 1px solid #ece8f5; border-radius: 12px; font-size: 14px; color: #15103a; }
.zp-auth li b { display: block; }
.zp-auth code { font-size: 12px; color: #6b6590; background: none; padding: 0; }
.zp-auth .zp-auth-note { padding: 10px 12px; border-radius: 12px; background: #f3f0fb; font-size: 13px; }
.zp-auth-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.zp-auth-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border-radius: 10px; font: 650 14px Inter, system-ui, sans-serif; cursor: pointer; }
.zp-auth-cancel { border: 1px solid #ddd8ea; background: #fff; color: #15103a; }
.zp-auth-ok { border: 1px solid #6d28d9; background: #6d28d9; color: #fff; }
.zp-auth-ok:hover { background: #5b21b6; }
.zp-auth-actions button:focus-visible { outline: 3px solid rgba(109, 40, 217, .45); outline-offset: 2px; }
@media (max-width: 420px) { .zp-auth-actions button { flex: 1; } }
@media (max-width: 860px) {
  .zp-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .zp-activity li { grid-template-columns: auto 1fr; }
  .zp-act-meta { grid-column: 2; white-space: normal; }
}
.zp-crash { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); text-align: center; }
.zp-crash > i, .zp-crash > svg { width: 28px; height: 28px; color: var(--color-amber-600); }

.zps-head-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }
.zps-head-side p { margin: 0; }
.zps-restart { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--zs-line); border-radius: 10px; background: #fff; font: 600 13px var(--font-sans); color: var(--zs-primary); cursor: pointer; }
.zps-restart:hover { border-color: #C4B5FD; background: #F5F3FF; }
.zps-restart svg, .zps-restart i { width: 15px; height: 15px; }
.zps-grid-steps > .zps-step.is-locked { opacity: .6; cursor: not-allowed; transition: opacity .5s ease, transform var(--dur-base) var(--ease-out), border-color .4s ease; }
.zps-grid-steps > .zps-step.is-locked:hover { transform: none; box-shadow: none; border-color: var(--zs-line); }
.zps-grid-steps > .zps-step.is-nudge { animation: zps-nudge .4s ease; }
@keyframes zps-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.zps-grid-steps > .zps-step.is-current { outline: 2px solid #7C3AED; outline-offset: 3px; }
.zp-demo.zp-demo-gated { position: relative; max-height: 680px; overflow: hidden; border-radius: var(--radius-xl); }
.zp-demo.zp-demo-gated > :not(.zp-gate) { filter: blur(2px); user-select: none; }
.zp-gate { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(82, 91, 117, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: var(--radius-xl); }
.zp-gate-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--fg); font: 600 18px var(--font-sans); text-decoration: none; box-shadow: 0 10px 30px -12px rgba(20, 24, 36, .45); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.zp-gate-btn:hover { color: var(--color-violet-700); transform: translateY(-1px); box-shadow: 0 14px 36px -12px rgba(20, 24, 36, .55); }
.zp-gate-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 3px; }
.zp-gate-btn i, .zp-gate-btn svg { width: 16px; height: 16px; }

body.zp-live .sl-nav, body.zp-live .sl-mobile, body.zp-live .sl-foot, body.zp-live #global-nav, body.zp-live #global-footer, body.zp-live .sl-annc { display: none; }
.zp-page { --zp-frame: 4px; --zp-gap: 0px; --zp-inset: calc(var(--zp-frame) + var(--zp-gap)); min-height: 100vh; padding: var(--zp-inset); background: #F8FAFC; }
.zp-page::after { content: ""; position: fixed; inset: 0; z-index: 1000; border: var(--zp-frame) solid #6D28D9; border-image: linear-gradient(135deg, #6D28D9 0%, #A78BFA 22%, #E42527 40%, #F9B21D 55%, #089949 70%, #226DB4 85%, #6D28D9 100%) 1; box-shadow: inset 0 0 0 var(--zp-gap) #F8FAFC; pointer-events: none; }
body.zp-live .zp-demo-section { padding: 0; background: none; }
body.zp-live .zp-demo-section > .container { max-width: none; width: 100%; padding: 0; }
body.zp-live .zp-demo { margin: 0; grid-template-columns: minmax(0, 1fr); }
body.zp-live .zp-badge-demo { margin: 10px 16px; }
body.zp-live .zp-portal-wrap, body.zp-live .zp-portal { border-left: 0; border-right: 0; border-radius: 0; }
body.zp-live .zp-demo-cta { padding: 0 12px; }
body.zp-live .zp-guide { top: calc(var(--zp-inset) + 80px); }
body.zp-live .zp-app, body.zp-live .zp-app-body { min-height: calc(100vh - 190px); }
body.zp-live .zp-demo-cta { margin: 24px 0 8px; }

.zps { --zh-red: #E42527; --zh-yellow: #F9B21D; --zh-green: #089949; --zh-blue: #226DB4; --zh-strip: linear-gradient(90deg, #6D28D9 0%, #A78BFA 20%, #E42527 40%, #F9B21D 60%, #089949 80%, #226DB4 100%); --zs-primary: #6D28D9; --zs-ink: #0F172A; --zs-text: #334155; --zs-muted: #64748B; --zs-line: #E2E8F0; --zs-bg: #F8FAFC; --zs-navy: #081220; background: var(--zs-bg); color: var(--zs-text); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; }
.zps *, .zps *::before, .zps *::after { box-sizing: border-box; }
.zps h1, .zps h2 { margin: 0; font-family: var(--font-display); letter-spacing: -.02em; color: var(--zs-ink); }
.zps p { margin: 0; }
.zps :focus-visible { outline: 3px solid rgba(109, 40, 217, .5); outline-offset: 2px; }
.zps-wrap { width: min(1600px, 100% - 64px); margin: 0 auto; }
.zps-top { position: sticky; top: var(--zp-inset, 0); z-index: 50; border-radius: 12px; background: linear-gradient(90deg, #081220 0%, #2E1065 45%, #4C1D95 72%, #1E3A6E 100%); box-shadow: 0 10px 24px -18px rgba(46, 16, 101, .8); }
.zps > .zps-top { border-radius: 12px 12px 0 0; }
.zp-page .zps-top, .zp-page .zps > .zps-top { border-radius: 0; }
.zp-page .zps-top.zps-top-inset { margin: 0; border-radius: 0; background: linear-gradient(90deg, #0B1026 0%, #2E1065 48%, #6D28D9 100%); }
.zps-top-inset::after { display: none; }
.zps-brand-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; flex: none; }
.zps-brand-ico svg, .zps-brand-ico i { width: 18px; height: 18px; }
.zps-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--zh-strip); pointer-events: none; }
.zps > .zps-top::after { border-radius: 0; }
.zps-top-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.zps-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.zps-brand b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.zps-brand small { display: block; font-size: 12px; font-weight: 600; color: #C4B5FD; }
.zps-logo { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6D28D9 0%, #6D28D9 45%, #226DB4 100%); color: #fff; font: 800 13px/1 var(--font-display); flex: none; box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0), 0 0 0 2px rgba(255, 255, 255, .12); }
.zps-brand .zps-logo { position: relative; overflow: hidden; }
.zps-brand .zps-logo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--zh-red) 0 25%, var(--zh-yellow) 25% 50%, var(--zh-green) 50% 75%, var(--zh-blue) 75%); }
.zps-logo svg, .zps-logo i { width: 18px; height: 18px; }
.zps-top-links { display: flex; gap: 4px; margin: 0 auto; }
.zps-top-links a { padding: 8px 14px; border-radius: 8px; color: #DDD6FE; font-size: 14px; font-weight: 700; text-decoration: none; }
.zps-top-links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.zps-top-actions { display: flex; align-items: center; gap: 8px; }
.zps-top :focus-visible { outline-color: rgba(255, 255, 255, .8); }
.zps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; font: 700 14px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.zps-btn svg, .zps-btn i { width: 16px; height: 16px; flex: none; }
.zps-btn-lg { min-height: 48px; padding: 12px 22px; border-radius: 10px; font-size: 15px; }
.zps-btn-light { background: #fff; color: var(--zs-navy); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); }
.zps-btn-light:hover { color: var(--zs-primary); transform: translateY(-1px); }
.zps-btn-outline, .zps-btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .3); }
.zps-btn-outline:hover, .zps-btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }

.zps-hero { position: relative; overflow: hidden; padding: 48px 0 44px; color: #fff; background: radial-gradient(760px 420px at 88% 8%, rgba(34, 109, 180, .5), transparent 60%), radial-gradient(520px 320px at 62% 100%, rgba(8, 153, 73, .28), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(109, 40, 217, .5), transparent 60%), radial-gradient(420px 260px at 40% 0%, rgba(228, 37, 39, .18), transparent 60%), linear-gradient(160deg, #081220 0%, #2E1065 50%, #3B1A80 78%, #1E3A6E 100%); }
.zps-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 85%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 85%); }
.zps-hero-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zps-hero-orbs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: zps-drift 18s ease-in-out infinite alternate; }
.zps-hero-orbs span:nth-child(1) { left: -80px; top: 40%; width: 420px; height: 420px; background: #6D28D9; }
.zps-hero-orbs span:nth-child(2) { right: 8%; top: -120px; width: 360px; height: 360px; background: var(--zh-blue); animation-duration: 22s; }
.zps-hero-orbs span:nth-child(3) { left: 45%; bottom: -140px; width: 260px; height: 260px; background: var(--zh-green); opacity: .35; animation-duration: 26s; }
.zps-hero-orbs span:nth-child(4) { left: 28%; top: -110px; width: 220px; height: 220px; background: var(--zh-red); opacity: .25; animation-duration: 24s; }
.zps-hero-orbs span:nth-child(5) { right: 30%; bottom: -120px; width: 200px; height: 200px; background: var(--zh-yellow); opacity: .2; animation-duration: 28s; }
@keyframes zps-drift { 0% { translate: 0 0; scale: 1; } 50% { translate: 60px -40px; scale: 1.12; } 100% { translate: -40px 30px; scale: .95; } }
.zps-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.zps-hero h1 { margin: 0 0 14px; font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; line-height: 1.05; color: #fff; }
.zps-hero h1 span { display: block; background: linear-gradient(90deg, #C4B5FD 0%, #F87171 32%, #F9B21D 52%, #4ADE80 72%, #60A5FA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zps-hero-copy > p { max-width: 560px; font-size: 17px; color: #DDD6FE; }
.zps-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.zps-stats { list-style: none; margin: 28px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(167, 139, 250, .6), rgba(228, 37, 39, .5), rgba(249, 178, 29, .5), rgba(8, 153, 73, .5), rgba(34, 109, 180, .6)) 1; }
.zps-stats li { position: relative; padding-top: 10px; }
.zps-stats li::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 3px; border-radius: 3px; background: #A78BFA; }
.zps-stats li:nth-child(2)::before { background: var(--zh-red); }
.zps-stats li:nth-child(3)::before { background: var(--zh-yellow); }
.zps-stats li:nth-child(4)::before { background: var(--zh-green); }
.zps-stats b { display: block; font: 800 30px/1.1 var(--font-display); color: #fff; }
.zps-stats span { font-size: 13px; font-weight: 600; color: #C4B5FD; }

.zps-section { padding: 48px 0; scroll-margin-top: 80px; }
.zps-section-alt { background: #fff; border-top: 1px solid var(--zs-line); border-bottom: 1px solid var(--zs-line); }
.zps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.zps-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.zps-head > p { color: var(--zs-muted); }
.zps-eyebrow { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--zs-primary); }
.zps-grid { display: grid; gap: 18px; }
.zps-grid-steps { position: relative; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px 56px; }
.zps-grid-steps > .zps-step { position: relative; z-index: 1; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color .4s ease; }
.zps-grid-steps > .zps-step::after { content: ""; position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: 50%; background: #10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 4px 10px -2px rgba(16, 185, 129, .55); transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.zps-grid-steps > .zps-step.is-active { border-color: #A78BFA; animation: zps-step-active 1s ease-in-out infinite; }
.zps-grid-steps > .zps-step.is-done { border-color: #6EE7B7; }
.zps-grid-steps > .zps-step.is-done::after { transform: scale(1); }
.zps-step.is-done .zps-step-ico { background: #ECFDF5; color: #059669; transition: background .4s ease, color .4s ease; }
.zps-step.is-done .zps-step-num { color: #A7F3D0; transition: color .4s ease; }
.zps-grid-steps.is-complete > .zps-step { animation: zps-step-wave .9s ease-out calc(var(--zps-i, 0) * 90ms) both; }
.zps-card-bar { display: block; height: 4px; margin-top: 4px; border-radius: 99px; background: #EDE9FE; overflow: hidden; }
.zps-card-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C3AED, #10B981); transition: width .6s cubic-bezier(.4, 0, .2, 1); }
.zps-step.is-done .zps-card-bar i { background: #10B981; }
.zps-tasks { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, margin .4s ease; }
.zps-step.is-open .zps-tasks { max-height: 420px; opacity: 1; margin: 6px 0 2px; }
.zps-tasks li { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; font-size: 13.5px; line-height: 1.35; color: var(--zs-text); opacity: .55; transform: translateX(-6px); transition: opacity .35s ease calc(var(--j, 0) * 80ms + 150ms), transform .35s ease calc(var(--j, 0) * 80ms + 150ms), color .3s ease; }
.zps-step.is-open .zps-tasks li { opacity: 1; transform: none; }
.zps-open-hint { display: none; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: #F5F3FF; font-size: 12.5px; font-weight: 700; color: #6D28D9; }
.zps-open-hint svg, .zps-open-hint i { width: 15px; height: 15px; }
.zps-step.is-current:not(.is-open) .zps-open-hint { display: inline-flex; animation: zps-task-in .35s ease both, zps-hint-pulse 1.8s ease-in-out .4s infinite; }
.zps-step.is-done:not(.is-open):hover .zps-open-hint, .zps-step.is-done:not(.is-open):focus-visible .zps-open-hint { display: inline-flex; background: #ECFDF5; color: #059669; }
.zps-grid-steps > .zps-step.is-current, .zps-grid-steps > .zps-step.is-done { cursor: pointer; }
.zps-grid-steps > .zps-step.is-open { cursor: default; }
.zps-grid-steps > .zps-step:focus-visible { outline: 3px solid #C4B5FD; outline-offset: 3px; }
@keyframes zps-hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .35); } 60% { box-shadow: 0 0 0 7px rgba(124, 58, 237, 0); } }
.zps-tasks li.is-done { color: var(--zs-ink); }
.zps-tasks li.is-done > span:last-child { text-decoration: line-through; text-decoration-color: rgba(16, 185, 129, .55); }
.zps-tasks li.is-now { color: #6D28D9; font-weight: 700; }
.zps-task-dot { position: relative; margin-top: 1px; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #DDD6FE; background: #fff; transition: background .3s ease, border-color .3s ease; }
.zps-tasks li.is-now .zps-task-dot { border-color: #7C3AED; animation: zps-task-now 1.4s ease-in-out infinite; }
.zps-tasks li.is-done .zps-task-dot { border-color: #10B981; background: #10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; animation: zps-task-pop .45s cubic-bezier(.3, 1.8, .5, 1); }
.zps-task-body { display: grid; gap: 2px; flex: 1 1 140px; min-width: 0; }
.zps-tasks .zps-task-note { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 12px; font-weight: 600; color: #059669; transition: max-height .35s ease, opacity .35s ease .1s; }
.zps-tasks li.is-done .zps-task-note { max-height: 40px; opacity: 1; }
.zps-task-btn { display: none; align-items: center; gap: 6px; min-height: 34px; margin-left: 28px; padding: 0 12px; border: 0; border-radius: 9px; background: linear-gradient(135deg, #7C3AED, #6D28D9); box-shadow: 0 8px 18px -10px rgba(109, 40, 217, .8); font: 700 12.5px var(--font-sans); color: #fff; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; }
.zps-task-btn svg, .zps-task-btn i { width: 14px; height: 14px; transition: transform .2s ease; }
.zps-task-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(109, 40, 217, .9); }
.zps-task-btn:hover:not(:disabled) svg { transform: translateX(2px); }
.zps-task-btn:focus-visible { outline: 3px solid #C4B5FD; outline-offset: 2px; }
.zps-task-btn:disabled { cursor: default; }
.zps-tasks li.is-now .zps-task-btn { display: inline-flex; animation: zps-task-in .35s ease both; }
.zps-tasks li.is-busy .zps-task-btn { opacity: .55; }
.zps-task-busy { display: none; width: 14px; height: 14px; margin: 2px 0 0 4px; border: 2px solid #DDD6FE; border-top-color: #7C3AED; border-radius: 50%; animation: zps-spin .7s linear infinite; }
.zps-tasks li.is-busy .zps-task-busy { display: inline-block; }
.zps-tasks li.is-busy .zps-task-dot { animation: none; }
@keyframes zps-task-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes zps-spin { to { transform: rotate(360deg); } }
.zps-pipe-token { fill: #10B981; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(16, 185, 129, .95)); }
.zps-grid-steps > .zps-step.is-arriving { animation: zps-arrive .9s cubic-bezier(.2, .9, .3, 1.2); }
.zps-grid-steps > .zps-step:focus:not(:focus-visible) { outline: none; }
@keyframes zps-arrive { 0% { transform: translateY(10px) scale(.97); box-shadow: 0 0 0 0 rgba(124, 58, 237, .5); } 45% { transform: translateY(-4px) scale(1.015); box-shadow: 0 0 0 10px rgba(124, 58, 237, .12), 0 24px 40px -24px rgba(76, 29, 149, .6); } 100% { transform: none; box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); } }
.zps-card-next { display: none; justify-content: flex-end; }
.zps-step.is-ready .zps-card-next { display: flex; animation: zps-task-in .4s ease both; }
.zps-next { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 10px 22px -12px rgba(5, 150, 105, .9); font: 700 14px var(--font-sans); color: #fff; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; animation: zps-next-pulse 1.8s ease-in-out infinite; }
.zps-next svg, .zps-next i { width: 16px; height: 16px; transition: transform .2s ease; }
.zps-next:hover:not(:disabled) { transform: translateY(-1px); }
.zps-next:hover:not(:disabled) svg { transform: translateX(3px); }
.zps-next:focus-visible { outline: 3px solid #A7F3D0; outline-offset: 2px; }
.zps-next:disabled { opacity: .6; cursor: default; animation: none; }
@keyframes zps-next-pulse { 0%, 100% { box-shadow: 0 10px 22px -12px rgba(5, 150, 105, .9), 0 0 0 0 rgba(16, 185, 129, .45); } 60% { box-shadow: 0 10px 22px -12px rgba(5, 150, 105, .9), 0 0 0 8px rgba(16, 185, 129, 0); } }
.zps-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.zps-task-count { margin-top: 6px; font-size: 12px; font-weight: 700; color: #A39BB8; transition: color .3s ease; }
.zps-step.has-progress .zps-task-count { color: #6D28D9; }
.zps-step.is-done .zps-task-count { color: #059669; }
@keyframes zps-task-now { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .4); } 60% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); } }
@keyframes zps-task-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.zps-btn-primary { background: linear-gradient(135deg, #7C3AED, #6D28D9); color: #fff; box-shadow: 0 12px 26px -14px rgba(109, 40, 217, .9); }
.zps-btn-primary:hover { transform: translateY(-1px); color: #fff; }
.zps-clock { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; align-items: center; }
.zps-dial { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; container-type: inline-size; background: radial-gradient(circle, #fff 0 41%, #FAF8FF 41.5% 70%, #F3F0FC 70.5% 100%); box-shadow: inset 0 0 0 1px #ECE7F8, 0 40px 80px -50px rgba(76, 29, 149, .55); }
.zps-dial-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.zps-dial-track { fill: none; stroke: #ECE7F8; stroke-width: 3; }
.zps-dial-ticks { fill: none; stroke: #DDD6FE; stroke-width: 3; stroke-dasharray: .8 9.3; }
.zps-dial-progress { fill: none; stroke: url(#zps-dial-grad); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }
.zps-clock.is-full .zps-dial-progress { filter: drop-shadow(0 0 4px rgba(16, 185, 129, .55)); }
.zps-dial-hand { position: absolute; inset: 0; pointer-events: none; transition: transform 1s cubic-bezier(.45, 1.55, .45, 1); }
.zps-dial-hand i { position: absolute; left: calc(50% - 2.5px); top: 13%; width: 5px; height: 37%; border-radius: 99px; background: linear-gradient(180deg, #7C3AED, rgba(124, 58, 237, .15)); }
.zps-dial-hand i::before { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: #7C3AED; box-shadow: 0 0 0 5px rgba(124, 58, 237, .18); transform: translateX(-50%); }
.zps-dial-center { position: absolute; top: 50%; left: 50%; width: 38%; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 2px; border-radius: 50%; background: #fff; box-shadow: 0 18px 40px -20px rgba(76, 29, 149, .5), inset 0 0 0 1px #ECE7F8; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.zps-dial-center img { width: 42cqw; max-width: 46%; height: auto; margin-bottom: 4px; animation: zps-logo-float 5s ease-in-out infinite; }
.zps-dial-center b { font: 800 clamp(22px, 6cqw, 34px)/1 var(--font-display); color: var(--zs-ink); }
.zps-dial-center b.is-tick { animation: zps-num-tick .5s cubic-bezier(.3, 1.6, .5, 1); }
.zps-dial-center span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A39BB8; }
.zps-dial-steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 3; }
.zps-dial-steps li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-41.5cqw) rotate(calc(var(--a) * -1)); }
.zps-clock.is-live .zps-dial-steps li { animation: zps-node-in .55s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i, 0) * 70ms) both; }
.zps-dial-node { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; transform: translate(-50%, -26px); }
.zps-dial-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid #E9E5F5; color: var(--zs-primary); box-shadow: 0 10px 22px -14px rgba(76, 29, 149, .6); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .35s ease, border-color .35s ease, color .35s ease; }
.zps-dial-ico svg, .zps-dial-ico i { width: 22px; height: 22px; }
.zps-dial-label { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 700; color: var(--zs-text); white-space: nowrap; box-shadow: 0 4px 12px -8px rgba(76, 29, 149, .5); transition: color .3s ease, background .3s ease; }
.zps-dial-node:hover .zps-dial-ico { transform: scale(1.08); border-color: #C4B5FD; }
.zps-dial-node:focus-visible { outline: none; }
.zps-dial-node:focus-visible .zps-dial-ico { outline: 3px solid #C4B5FD; outline-offset: 3px; }
.zps-dial-steps li.is-done .zps-dial-ico { background: #ECFDF5; border-color: #6EE7B7; color: #059669; }
.zps-dial-steps li.is-current .zps-dial-ico { background: linear-gradient(135deg, #7C3AED, #6D28D9); border-color: #7C3AED; color: #fff; transform: scale(1.16); animation: zps-node-pulse 1.8s ease-in-out infinite; }
.zps-dial-steps li.is-current .zps-dial-label { background: #7C3AED; color: #fff; }
.zps-clock-panel { display: grid; gap: 22px; }
.zps-clock-card { padding: 30px; border: 1px solid var(--zs-line); border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -44px rgba(76, 29, 149, .6); }
.zps-clock-card.is-in { animation: zps-card-in .55s cubic-bezier(.2, .8, .3, 1) both; }
.zps-clock-step { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--zs-primary); }
.zps-clock-card h3 { margin: 16px 0 10px; font: 800 clamp(22px, 2.4vw, 28px)/1.2 var(--font-display); color: var(--zs-ink); }
.zps-clock-card p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--zs-text); }
.zps-clock-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zps-clock-card li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--zs-ink); }
.zps-clock-card.is-in li { animation: zps-task-in .4s ease both; }
.zps-clock-card.is-in li:nth-child(2) { animation-delay: .1s; }
.zps-clock-card.is-in li:nth-child(3) { animation-delay: .2s; }
.zps-clock-card li svg, .zps-clock-card li i { flex-shrink: 0; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #ECFDF5; color: #059669; }
.zps-clock-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zps-clock-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--zs-line); border-radius: 50%; background: #fff; color: var(--zs-primary); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .15s ease; }
.zps-clock-btn:hover { border-color: #C4B5FD; background: #F5F3FF; transform: translateY(-1px); }
.zps-clock-btn svg, .zps-clock-btn i { width: 18px; height: 18px; }
.zps-clock-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.zps-clock-controls .zps-btn { min-height: 44px; }
.zps-btn-add { background: #fff; color: var(--zs-primary); box-shadow: inset 0 0 0 1.5px #C4B5FD; }
.zps-btn-add:hover { background: #F5F3FF; color: var(--zs-primary); transform: translateY(-1px); }
.zps-btn-add svg, .zps-btn-add i { width: 17px; height: 17px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.zps-btn-add:hover svg { transform: rotate(90deg); }
@keyframes zps-node-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes zps-node-pulse { 0%, 100% { box-shadow: 0 10px 22px -14px rgba(76, 29, 149, .6), 0 0 0 0 rgba(124, 58, 237, .45); } 60% { box-shadow: 0 10px 22px -14px rgba(76, 29, 149, .6), 0 0 0 10px rgba(124, 58, 237, 0); } }
@keyframes zps-num-tick { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes zps-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes zps-logo-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }
@media (max-width: 1023px) {
  .zps-clock { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .zps-dial { max-width: 520px; }
}
@media (max-width: 639px) {
  .zps-dial-label { display: none; }
  .zps-dial-ico { width: 40px; height: 40px; }
  .zps-dial-ico svg, .zps-dial-ico i { width: 18px; height: 18px; }
  .zps-dial-node { transform: translate(-50%, -20px); }
  .zps-dial-steps li { transform: rotate(var(--a)) translateY(-42.5cqw) rotate(calc(var(--a) * -1)); }
  .zps-clock-card { padding: 22px; }
  .zps-clock-ctas { margin-left: 0; width: 100%; }
  .zps-clock-controls .zps-btn { flex: 1 1 100%; }
}
html.zps-modal-open { overflow: hidden; }
.zps-emp { position: relative; }
.zps-emp.is-arriving { animation: zps-arrive .9s cubic-bezier(.2, .9, .3, 1.2); }
.zps-journey-steps.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zps-journey-steps.is-three::before { left: calc(24px + 16.66%); right: calc(24px + 16.66%); }
.zps-journey-steps.is-three::after { left: calc(24px + 16.66%); width: calc((100% - 48px - 33.33%) * var(--zps-j-progress, 0)); }
.zps-c-form.is-shake { animation: zps-nudge .4s ease; }
.zps-c-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.zps-c-field { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--zs-ink); }
.zps-c-field.is-wide { grid-column: 1 / -1; }
.zps-c-field input, .zps-c-field select { min-height: 44px; padding: 0 12px; border: 1px solid #DDD6FE; border-radius: 11px; background: #fff; font: 500 14px var(--font-sans); color: var(--zs-ink); transition: border-color .2s ease, box-shadow .2s ease; }
.zps-c-field input:focus, .zps-c-field select:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
.zps-c-field input[aria-invalid="true"] { border-color: #E11D48; box-shadow: 0 0 0 4px rgba(225, 29, 72, .1); }
.zps-c-field em { font-style: normal; font-size: 12px; font-weight: 600; color: #E11D48; }
.zps-c-field em:empty { display: none; }
.zps-c-field small { font-size: 12px; font-weight: 500; color: #A39BB8; }
.zps-c-preview { max-width: 320px; margin: 0 auto 4px; }
.zps-c-preview .zps-emp { cursor: default; animation: zps-card-in .5s ease .15s both; }
.zps-c-preview .zps-emp:hover { transform: none; }
@media (max-width: 639px) {
  .zps-c-grid { grid-template-columns: minmax(0, 1fr); }
  .zps-journey-steps.is-three::before { left: calc(8px + 16.66%); right: calc(8px + 16.66%); }
  .zps-journey-steps.is-three::after { left: calc(8px + 16.66%); width: calc((100% - 16px - 33.33%) * var(--zps-j-progress, 0)); }
}
.zps-emp { cursor: pointer; }
.zps-journey { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.zps-journey[hidden] { display: none; }
.zps-journey-backdrop { position: absolute; inset: 0; background: rgba(21, 16, 59, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s ease; }
.zps-journey-dialog { position: relative; display: flex; flex-direction: column; width: min(880px, 100%); max-height: calc(100vh - 40px); border-radius: 22px; background: #fff; box-shadow: 0 40px 90px -30px rgba(21, 16, 59, .6); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.1); }
.zps-journey-dialog:focus { outline: none; }
.zps-journey.is-open .zps-journey-backdrop { opacity: 1; }
.zps-journey.is-open .zps-journey-dialog { opacity: 1; transform: none; }
.zps-journey-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 14px; }
.zps-journey-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zps-journey-brand h3 { margin: 2px 0 0; font: 800 20px/1.2 var(--font-display); color: var(--zs-ink); }
.zps-journey-logo { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #ECE7F8, 0 8px 18px -12px rgba(76, 29, 149, .5); }
.zps-journey-logo img { width: 30px; height: 30px; }
.zps-journey-logo.is-sublime { background: linear-gradient(135deg, #7C3AED, #6D28D9); color: #fff; font: 800 20px var(--font-display); }
.zps-journey-flow { display: flex; gap: 4px; }
.zps-journey-flow i { width: 6px; height: 6px; border-radius: 50%; background: #C4B5FD; animation: zps-flow-dot 1.2s ease-in-out infinite; }
.zps-journey-flow i:nth-child(2) { animation-delay: .15s; }
.zps-journey-flow i:nth-child(3) { animation-delay: .3s; }
.zps-journey-x { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--zs-line); border-radius: 50%; background: #fff; color: var(--zs-text); cursor: pointer; }
.zps-journey-x:hover { background: #F5F3FF; color: var(--zs-primary); }
.zps-journey-x svg, .zps-journey-x i { width: 18px; height: 18px; }
.zps-journey-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 4px 24px 18px; list-style: none; border-bottom: 1px solid var(--zs-line); }
.zps-journey-steps::before, .zps-journey-steps::after { content: ""; position: absolute; left: calc(24px + 10%); right: calc(24px + 10%); top: 22px; height: 3px; border-radius: 3px; background: #EDE9FE; }
.zps-journey-steps::after { right: auto; width: calc((100% - 48px - 20%) * var(--zps-j-progress)); background: linear-gradient(90deg, #7C3AED, #10B981); transition: width .6s cubic-bezier(.4, 0, .2, 1); }
.zps-journey-steps li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 700; color: #A39BB8; }
.zps-journey-steps li small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #C4BDD6; }
.zps-journey-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid #E9E5F5; color: #A39BB8; transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.zps-journey-dot svg, .zps-journey-dot i { width: 18px; height: 18px; }
.zps-journey-steps li.is-current { color: #6D28D9; }
.zps-journey-steps li.is-current .zps-journey-dot { background: linear-gradient(135deg, #7C3AED, #6D28D9); border-color: #7C3AED; color: #fff; transform: scale(1.1); animation: zps-node-pulse 1.8s ease-in-out infinite; }
.zps-journey-steps li.is-done { color: #059669; }
.zps-journey-steps li.is-done .zps-journey-dot { background: #10B981; border-color: #10B981; color: #fff; animation: none; transform: none; }
.zps-journey-steps li.is-blocked { color: #E11D48; }
.zps-journey-steps li.is-blocked .zps-journey-dot { background: #E11D48; border-color: #E11D48; color: #fff; animation: none; }
.zps-journey-steps li.is-skipped { opacity: .45; }
.zps-journey-body { overflow-y: auto; padding: 22px 24px 24px; background: #FBFAFF; }
.zps-j-pane.is-enter { animation: zps-card-in .45s cubic-bezier(.2, .8, .3, 1) both; }
.zps-j-intro h4 { margin: 0 0 6px; font: 800 19px/1.3 var(--font-display); color: var(--zs-ink); }
.zps-j-intro p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--zs-text); }
.zps-j-intro.is-center { text-align: center; }
.zps-j-empty { color: #B9B2CB; font-style: italic; font-weight: 500; }
.zps-j-zoho, .zps-j-profile { border: 1px solid var(--zs-line); border-radius: 16px; background: #fff; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.zps-j-zoho.is-picked { border-color: #A78BFA; box-shadow: 0 0 0 4px rgba(167, 139, 250, .18); }
.zps-j-zoho-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--zs-line); }
.zps-j-zoho-row > div { flex: 1; min-width: 0; display: grid; }
.zps-j-zoho-row b { color: var(--zs-ink); }
.zps-j-zoho-row small { font-size: 12.5px; color: var(--zs-text); }
.zps-j-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #D9D2EE; color: transparent; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.zps-j-check svg, .zps-j-check i { width: 14px; height: 14px; }
.zps-j-zoho.is-picked .zps-j-check { background: #7C3AED; border-color: #7C3AED; color: #fff; animation: zps-task-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
.zps-j-record { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 18px; margin: 0; padding: 16px; }
.zps-j-record div { display: grid; gap: 2px; }
.zps-j-record dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #A39BB8; }
.zps-j-record dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--zs-ink); overflow-wrap: anywhere; }
.zps-j-zoho .zps-j-record div { opacity: .35; filter: blur(2px); transition: opacity .4s ease calc(var(--k, 0) * 70ms), filter .4s ease calc(var(--k, 0) * 70ms); }
.zps-j-zoho .zps-j-record.is-in div, .zps-j-zoho.is-picked .zps-j-record div { opacity: 1; filter: none; }
.zps-j-map { display: grid; gap: 8px; }
.zps-j-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.zps-j-src, .zps-j-dst { display: grid; gap: 1px; padding: 9px 12px; border-radius: 11px; background: #fff; border: 1px solid var(--zs-line); font-size: 13.5px; font-weight: 600; color: var(--zs-ink); min-width: 0; overflow-wrap: anywhere; }
.zps-j-src small, .zps-j-dst small { font-size: 11px; font-weight: 700; color: #A39BB8; }
.zps-j-arrow { display: grid; place-items: center; color: #D9D2EE; transition: color .3s ease calc(var(--k, 0) * 150ms), transform .3s ease calc(var(--k, 0) * 150ms); }
.zps-j-arrow svg, .zps-j-arrow i { width: 18px; height: 18px; }
.zps-j-dst { opacity: .25; transform: translateX(-10px); transition: opacity .35s ease calc(var(--k, 0) * 150ms + 80ms), transform .35s ease calc(var(--k, 0) * 150ms + 80ms), border-color .35s ease calc(var(--k, 0) * 150ms + 80ms); }
.zps-j-map.is-run .zps-j-arrow { color: #7C3AED; transform: translateX(2px); }
.zps-j-map.is-run .zps-j-dst { opacity: 1; transform: none; border-color: #A7F3D0; background: #F6FFFB; }
.zps-j-map.is-done .zps-j-arrow, .zps-j-map.is-done .zps-j-dst { transition-delay: 0s; }
.zps-j-map.is-done .zps-j-arrow { color: #10B981; }
.zps-j-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zps-j-checks li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 13px; background: #fff; border: 1px solid var(--zs-line); transition: border-color .3s ease, background .3s ease, opacity .3s ease; }
.zps-j-checks li > div { display: grid; gap: 2px; min-width: 0; }
.zps-j-checks b { font-size: 14px; color: var(--zs-ink); }
.zps-j-checks small { font-size: 12.5px; color: var(--zs-text); overflow-wrap: anywhere; }
.zps-j-ck { position: relative; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid #DDD6FE; background: #fff; }
.zps-j-checks li.is-run { border-color: #C4B5FD; }
.zps-j-checks li.is-run .zps-j-ck { border-color: #EDE9FE; border-top-color: #7C3AED; animation: zps-spin .7s linear infinite; }
.zps-j-checks li.is-ok { border-color: #A7F3D0; background: #F6FFFB; }
.zps-j-checks li.is-ok .zps-j-ck { border-color: #10B981; background: #10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; animation: zps-task-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
.zps-j-checks li.is-warn { border-color: #FCD34D; background: #FFFBEB; }
.zps-j-checks li.is-warn .zps-j-ck { border-color: #F59E0B; background: #F59E0B; animation: zps-task-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
.zps-j-checks li.is-warn .zps-j-ck::after, .zps-j-checks li.is-fail .zps-j-ck::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 13px/1 var(--font-sans); color: #fff; }
.zps-j-checks li.is-fail { border-color: #FDA4AF; background: #FFF1F2; animation: zps-nudge .4s ease; }
.zps-j-checks li.is-fail .zps-j-ck { border-color: #E11D48; background: #E11D48; }
.zps-j-checks li.is-skip { opacity: .45; }
.zps-j-banner { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; animation: zps-card-in .4s ease both; }
.zps-j-banner > svg, .zps-j-banner > i { flex-shrink: 0; width: 22px; height: 22px; }
.zps-j-banner div { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; }
.zps-j-banner b { font-size: 14.5px; }
.zps-j-banner.is-ok { background: #ECFDF5; color: #047857; }
.zps-j-banner.is-warn { background: #FFFBEB; color: #92400E; }
.zps-j-banner.is-bad { background: #FFF1F2; color: #9F1239; }
.zps-j-fix { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; }
.zps-j-fix svg, .zps-j-fix i { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; }
.zps-j-mail { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px dashed #C4B5FD; }
.zps-j-mail.is-in { animation: zps-mail-in .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.zps-j-mail-ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #F5F3FF; color: #7C3AED; }
.zps-j-mail div { display: grid; gap: 2px; font-size: 13px; color: var(--zs-text); }
.zps-j-mail b { font-size: 14px; color: var(--zs-ink); }
.zps-j-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; min-height: 44px; }
.zps-j-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #7C3AED, #6D28D9); box-shadow: 0 12px 24px -14px rgba(109, 40, 217, .9); font: 700 14px var(--font-sans); color: #fff; text-decoration: none; cursor: pointer; transition: transform .15s ease; animation: zps-task-in .35s ease both; }
.zps-j-btn:hover { transform: translateY(-1px); color: #fff; }
.zps-j-btn:focus-visible { outline: 3px solid #C4B5FD; outline-offset: 2px; }
.zps-j-btn svg, .zps-j-btn i { width: 17px; height: 17px; }
.zps-j-btn.is-ghost { background: #fff; color: var(--zs-primary); box-shadow: inset 0 0 0 1px var(--zs-line); }
.zps-j-btn.is-ghost:hover { color: var(--zs-primary); background: #F5F3FF; }
.zps-j-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #6D28D9; }
.zps-j-status svg, .zps-j-status i:not(.zps-j-spin) { width: 18px; height: 18px; color: #10B981; }
.zps-j-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid #EDE9FE; border-top-color: #7C3AED; border-radius: 50%; animation: zps-spin .7s linear infinite; }
.zps-j-pane.is-final { text-align: left; }
.zps-j-burst { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, #10B981, #059669); color: #fff; box-shadow: 0 18px 36px -18px rgba(5, 150, 105, .9); animation: zps-task-pop .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.zps-j-burst > svg, .zps-j-burst > i:first-child { width: 32px; height: 32px; }
.zps-j-burst > i:not(:first-child) { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px; animation: zps-burst .9s cubic-bezier(.2, .8, .3, 1) forwards; }
.zps-j-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 16px; animation: zps-card-in .5s ease .15s both; }
.zps-j-profile-main { display: grid; gap: 4px; }
.zps-j-profile-main b { font-size: 17px; color: var(--zs-ink); }
.zps-j-profile-main small { font-size: 13px; color: var(--zs-text); }
.zps-j-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zps-j-chips .zps-tag svg, .zps-j-chips .zps-tag i { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
.zps-j-profile .zps-j-record { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--zs-line); margin-top: 10px; }
.zps-j-profile .zps-j-record div { animation: zps-task-in .4s ease calc(var(--k, 0) * 70ms + .3s) both; }
@keyframes zps-flow-dot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); background: #7C3AED; } }
@keyframes zps-mail-in { from { opacity: 0; transform: translateY(16px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes zps-burst { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.6) rotate(200deg); opacity: 0; } }
@media (max-width: 639px) {
  .zps-journey { padding: 0; align-items: end; }
  .zps-journey-dialog { max-height: 94vh; border-radius: 20px 20px 0 0; }
  .zps-journey-head { padding: 16px 16px 10px; }
  .zps-journey-flow, .zps-journey-logo.is-sublime { display: none; }
  .zps-journey-brand h3 { font-size: 17px; }
  .zps-journey-steps { padding: 4px 8px 14px; }
  .zps-journey-steps::before, .zps-journey-steps::after { left: calc(8px + 10%); right: calc(8px + 10%); }
  .zps-journey-steps::after { width: calc((100% - 16px - 20%) * var(--zps-j-progress)); }
  .zps-journey-steps li > span:last-child { display: none; }
  .zps-journey-dot { width: 36px; height: 36px; }
  .zps-journey-body { padding: 18px 16px 20px; }
  .zps-j-map-row { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 6px; }
  .zps-j-actions { justify-content: stretch; }
  .zps-j-actions .zps-j-btn { flex: 1 1 100%; justify-content: center; }
}
.zps-carousel { --zps-card-w: min(360px, 80vw); position: relative; margin: 0 -24px; padding: 30px 0 36px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.zps-carousel-slot { position: absolute; top: 16px; left: 50%; width: calc(var(--zps-card-w) + 28px); height: 300px; border-radius: 24px; background: linear-gradient(180deg, rgba(237, 233, 254, .9), rgba(245, 243, 255, .55)); box-shadow: 0 0 0 2px #C4B5FD, 0 34px 70px -34px rgba(109, 40, 217, .65); transform: translateX(-50%); transition: height .5s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease, background .4s ease; pointer-events: none; z-index: 0; }
.zps-carousel-slot span { position: absolute; top: -12px; left: 50%; padding: 3px 12px; border-radius: 999px; background: #7C3AED; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 6px 14px -6px rgba(109, 40, 217, .8); transition: background .4s ease; }
.zps-carousel-slot.is-done { background: linear-gradient(180deg, rgba(209, 250, 229, .8), rgba(236, 253, 245, .5)); box-shadow: 0 0 0 2px #6EE7B7, 0 34px 70px -34px rgba(5, 150, 105, .55); }
.zps-carousel-slot.is-done span { background: #10B981; }
.zps-grid-steps.is-carousel { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0 56px; width: max-content; padding: 0; transition: transform .75s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.zps-grid-steps.is-carousel > .zps-step { flex: 0 0 var(--zps-card-w); width: var(--zps-card-w); transition: opacity .5s ease, filter .5s ease, border-color .4s ease, box-shadow .4s ease; }
.zps-grid-steps.is-carousel > .zps-step:not(.is-focus) { opacity: .5; filter: saturate(.7); }
.zps-grid-steps.is-carousel > .zps-step:not(.is-focus):hover { opacity: .8; }
.zps-grid-steps.is-carousel > .zps-step.is-focus { box-shadow: 0 24px 50px -30px rgba(76, 29, 149, .55); }
.zps-grid-steps.is-carousel > .zps-step.is-current { outline: none; }
.zps-grid-steps.is-carousel > .zps-step.is-gone { opacity: 0; filter: blur(3px); transform: translateY(-16px) scale(.85); visibility: hidden; pointer-events: none; transition: opacity .5s ease, filter .5s ease, transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s; }
.zps-pipe-link { transition: opacity .4s ease; }
.zps-pipe-link.is-gone { opacity: 0; }
@media (max-width: 639px) {
  .zps-carousel { --zps-card-w: min(300px, 78vw); margin: 0 -16px; }
  .zps-grid-steps.is-carousel { gap: 0 36px; }
}
.zps-pipe { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.zps-pipe path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.zps-pipe-track { stroke: #E4DEF5; stroke-width: 4; }
.zps-pipe-fill { stroke: #7C3AED; stroke-width: 5; opacity: 0; transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
.zps-pipe-link.is-on .zps-pipe-fill { opacity: 1; }
.zps-pipe-port { fill: #fff; stroke: #D9D2EE; stroke-width: 2.5; transition: fill .3s ease .45s, stroke .3s ease .45s; }
.zps-pipe-link.is-on .zps-pipe-port { fill: #10B981; stroke: #D1FAE5; }
.zps-pipe-packet { fill: #fff; stroke: #10B981; stroke-width: 2.5; opacity: 0; filter: drop-shadow(0 0 4px rgba(16, 185, 129, .9)); transition: opacity .3s ease .6s; }
.zps-pipe-link.is-on .zps-pipe-packet { opacity: 1; }
.zps-grid-steps.is-complete .zps-pipe-packet { opacity: .85; }
.zps-pipe-flow { stroke: rgba(255, 255, 255, .9); stroke-width: 2; stroke-dasharray: 6 12; opacity: 0; transition: opacity .3s ease .5s; }
.zps-pipe-link.is-on .zps-pipe-fill { animation: zps-pipe-hue 3s linear infinite; }
.zps-pipe-link.is-on .zps-pipe-flow { opacity: 1; animation: zps-pipe-flow .9s linear infinite; }
.zps-grid-steps.is-complete .zps-pipe-fill { animation: none; stroke: #10B981; transition: stroke .8s ease; }
.zps-grid-steps.is-complete .zps-pipe-flow { opacity: .5; animation-duration: 2.4s; }
@keyframes zps-pipe-hue { 0%, 100% { stroke: #7C3AED; } 33% { stroke: #10B981; } 66% { stroke: #226DB4; } }
@keyframes zps-pipe-flow { to { stroke-dashoffset: -36; } }
@keyframes zps-step-active { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .35); } 50% { box-shadow: 0 0 0 7px rgba(124, 58, 237, 0); } }
@keyframes zps-step-wave { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 60% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } 100% { box-shadow: none; } }
.zps-grid-emp { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: stretch; }
.zps-grid-emp > .zps-emp { grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; align-content: stretch; }
.zps-grid-emp > .zps-emp > .zps-link { align-self: end; }
.zps-step, .zps-emp { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--zs-line); border-radius: 14px; background: #fff; color: var(--zs-text); text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.zps-step:hover, .zps-emp:hover { transform: translateY(-3px); border-color: #C4B5FD; box-shadow: 0 18px 36px -24px rgba(76, 29, 149, .5); }
.zps-step b, .zps-emp b { font-size: 18px; color: var(--zs-ink); }
.zps-step small, .zps-emp small { font-size: 14px; color: var(--zs-text); }
.zps-step-top, .zps-emp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.zps-step-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #F5F3FF; color: var(--zs-primary); }
.zps-step-ico svg, .zps-step-ico i { width: 20px; height: 20px; }
.zps-step-num { font: 800 28px/1 var(--font-display); color: #DDD6FE; }
.zps-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--zs-primary); }
.zps-link svg, .zps-link i { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); }
.zps-step:hover .zps-link svg, .zps-emp:hover .zps-link svg { transform: translateX(3px); }
.zps-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F5F3FF; color: var(--zs-primary); font: 800 15px var(--font-display); }
.zps-emp small + small { margin-top: -6px; }
.zps-tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.zps-tag.is-green { background: #ECFDF5; color: #047857; }
.zps-tag.is-blue { background: #EFF6FF; color: #1D4ED8; }
.zps-tag.is-amber { background: #FFFBEB; color: #B45309; }
.zps-tag.is-gray { background: #F1F5F9; color: #475569; }
.zps-section-cta { padding-top: 24px; }
.zps-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px; border-radius: 18px; color: #fff; background: radial-gradient(600px 300px at 90% 0%, rgba(139, 92, 246, .55), transparent 60%), linear-gradient(135deg, #081220, #2E1065 60%, #4C1D95); }
.zps-band h2 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; }
.zps-band p { max-width: 620px; margin-top: 8px; color: #DDD6FE; }
.zps-band-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.zps-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--zs-muted); text-align: center; }
.zps-note svg, .zps-note i { width: 15px; height: 15px; flex: none; }


.zps-top::after { background: linear-gradient(90deg, #6D28D9, #E42527, #F9B21D, #089949, #226DB4, #6D28D9, #E42527, #F9B21D, #089949, #226DB4, #6D28D9); background-size: 200% 100%; animation: zps-strip 8s linear infinite; }
@keyframes zps-strip { to { background-position: 100% 0; } }
.zps-hero-copy > * { animation: zps-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.zps-hero-copy > :nth-child(2) { animation-delay: .15s; }
.zps-hero-copy > :nth-child(3) { animation-delay: .3s; }
.zps-hero-copy > :nth-child(4) { animation-delay: .45s; }
@keyframes zps-rise { from { opacity: 0; translate: 0 26px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.zps-hero h1 span { background-size: 220% 100%; animation: zps-shimmer 7s ease-in-out infinite; }
@keyframes zps-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.zps-stats li::before { transform-origin: left; animation: zps-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.zps-stats li:nth-child(1)::before { animation-delay: .6s; }
.zps-stats li:nth-child(2)::before { animation-delay: .75s; }
.zps-stats li:nth-child(3)::before { animation-delay: .9s; }
.zps-stats li:nth-child(4)::before { animation-delay: 1.05s; }
@keyframes zps-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.zps-sparks { position: absolute; inset: 0; pointer-events: none; }
.zps-sparks i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .7); opacity: 0; animation: zps-twinkle 4.8s ease-in-out infinite; }
.zps-sparks i:nth-child(1) { left: 52%; top: 18%; animation-delay: .2s; }
.zps-sparks i:nth-child(2) { left: 64%; top: 82%; background: #F9B21D; box-shadow: 0 0 12px 3px rgba(249, 178, 29, .7); animation-delay: 1.1s; }
.zps-sparks i:nth-child(3) { left: 93%; top: 14%; background: #60A5FA; box-shadow: 0 0 12px 3px rgba(96, 165, 250, .7); animation-delay: 2s; }
.zps-sparks i:nth-child(4) { left: 74%; top: 10%; animation-delay: 2.9s; }
.zps-sparks i:nth-child(5) { left: 96%; top: 70%; background: #4ADE80; box-shadow: 0 0 12px 3px rgba(74, 222, 128, .7); animation-delay: 3.6s; }
.zps-sparks i:nth-child(6) { left: 38%; top: 8%; background: #F87171; box-shadow: 0 0 12px 3px rgba(248, 113, 113, .7); animation-delay: 1.6s; }
.zps-sparks i:nth-child(7) { left: 8%; top: 88%; background: #C4B5FD; box-shadow: 0 0 12px 3px rgba(196, 181, 253, .7); animation-delay: 4.1s; }
@keyframes zps-twinkle { 0%, 100% { opacity: 0; scale: .3; } 45% { opacity: 1; scale: 1.25; } 60% { opacity: .9; scale: 1; } }





.zps-hero-art { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; gap: 8px; padding: 24px 0 48px; }
.zps-rec { display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: #fff; color: var(--zs-text); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.zps-rec-emp { position: relative; overflow: hidden; rotate: -3deg; padding-top: 22px; }
.zps-rec-emp::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--zh-red) 0 25%, var(--zh-yellow) 25% 50%, var(--zh-green) 50% 75%, var(--zh-blue) 75%); }
.zps-rec-learner { position: relative; rotate: 2deg; border: 2px solid #A78BFA; }
.zps-rec-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--zs-line); }
.zps-rec-head b { display: block; color: var(--zs-ink); font-size: 14px; }
.zps-rec-head small { color: var(--zs-muted); font-size: 12px; }
.zps-rec-emp .zps-logo { background: rgba(34, 109, 180, .12); color: var(--zh-blue); }
.zps-rec-name { font: 700 18px var(--font-display); color: var(--zs-ink); }
.zps-rec-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.zps-rec-row small { color: var(--zs-muted); }
.zps-rec-row b { color: var(--zs-ink); text-align: right; }
.zps-rec-tag { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: #EFF6FF; color: #1D4ED8; font-size: 12px; font-weight: 700; }
.zps-rec-tag svg, .zps-rec-tag i { width: 13px; height: 13px; }
.zps-beam { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--zh-blue), #6D28D9); border: 1px solid rgba(255, 255, 255, .35); color: #fff; animation: zps-pulse 2.4s ease-in-out infinite; }
.zps-beam svg, .zps-beam i { width: 20px; height: 20px; }
@keyframes zps-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 181, 253, .45); } 50% { box-shadow: 0 0 0 12px rgba(196, 181, 253, 0); } }
.zps-chip { position: absolute; left: 50%; bottom: 0; z-index: 4; transform: translate3d(calc(-50% + var(--zgx, 0px) * 1.5), calc(var(--zgy, 0px) * 1.5), 0); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--zs-ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); white-space: nowrap; }
.zps-chip b { display: block; font-size: 14px; color: var(--zh-green); }
.zps-chip small { font-size: 12px; color: var(--zs-muted); }
.zps-chip-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(8, 153, 73, .1); color: var(--zh-green); }
.zps-chip-ico svg, .zps-chip-ico i { width: 16px; height: 16px; }

.zps-hero-art { --zgx: 0px; --zgy: 0px; }
.zps-rec { position: relative; z-index: 2; transition: transform .5s cubic-bezier(.22, .9, .25, 1); }
.zps-rec-emp { transform: translate3d(calc(var(--zgx) * -.8), calc(var(--zgy) * -.8), 0); animation: zps-in-left 1s cubic-bezier(.2, .8, .2, 1) .35s both, zps-float 6s ease-in-out 1.4s infinite; }
.zps-rec-learner { transform: translate3d(calc(var(--zgx) * 1.1), calc(var(--zgy) * 1.1), 0); animation: zps-in-right 1s cubic-bezier(.2, .8, .2, 1) .7s both, zps-float 6s ease-in-out 2.4s infinite, zps-glow 4s ease-in-out 1.7s infinite; }
@keyframes zps-in-left { from { opacity: 0; translate: -60px 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes zps-in-right { from { opacity: 0; translate: 60px 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes zps-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes zps-glow { 0%, 100% { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 0 rgba(167, 139, 250, 0); } 50% { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 28px 2px rgba(96, 165, 250, .45); } }
.zps-beam { position: relative; z-index: 4; animation: zps-pulse 2.4s ease-in-out infinite, zps-pop .6s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
@keyframes zps-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.zps-flow { position: absolute; z-index: 3; left: calc(50% - 110px); width: 220px; top: calc(50% - 14px); height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(34, 109, 180, 0), rgba(255, 255, 255, .25), rgba(167, 139, 250, 0)); }
.zps-flow i { position: absolute; top: -3px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #F87171; box-shadow: 0 0 12px 2px currentColor; color: #F87171; opacity: 0; animation: zps-packet 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.zps-flow i:nth-child(1) { animation-delay: 1.2s; }
.zps-flow i:nth-child(2) { background: #F9B21D; color: #F9B21D; animation-delay: 1.8s; }
.zps-flow i:nth-child(3) { background: #4ADE80; color: #4ADE80; animation-delay: 2.4s; }
.zps-flow i:nth-child(4) { background: #60A5FA; color: #60A5FA; animation-delay: 3s; }
@keyframes zps-packet { 0% { left: 0; opacity: 0; scale: .5; } 15% { opacity: 1; scale: 1; } 80% { opacity: 1; background: #A78BFA; color: #A78BFA; } 100% { left: calc(100% - 10px); opacity: 0; scale: .5; background: #A78BFA; color: #A78BFA; } }

.zps-rec-row { margin: 0 -8px; padding: 3px 8px; border-radius: 6px; animation: zps-row-emp 8s ease-in-out infinite; }
.zps-rec-learner .zps-rec-row { animation-name: zps-row-learner; }
.zps-rec .zps-rec-row:nth-child(3) { animation-delay: 1.8s; }
.zps-rec .zps-rec-row:nth-child(4) { animation-delay: 2.5s; }
.zps-rec .zps-rec-row:nth-child(5) { animation-delay: 3.2s; }
.zps-rec .zps-rec-row:nth-child(6) { animation-delay: 3.9s; }
.zps-rec-learner .zps-rec-row:nth-child(3) { animation-delay: 2.4s; }
.zps-rec-learner .zps-rec-row:nth-child(4) { animation-delay: 3.1s; }
.zps-rec-learner .zps-rec-row:nth-child(5) { animation-delay: 3.8s; }
.zps-rec-learner .zps-rec-row:nth-child(6) { animation-delay: 4.5s; }
@keyframes zps-row-emp { 0%, 14%, 100% { background: transparent; } 4%, 9% { background: rgba(34, 109, 180, .12); } }
@keyframes zps-row-learner { 0%, 14%, 100% { background: transparent; } 4%, 9% { background: rgba(109, 40, 217, .12); } }
.zps-rec-learner .zps-rec-row b { animation: zps-type 8s ease-in-out infinite; animation-delay: inherit; }
@keyframes zps-type { 0% { opacity: .25; } 5%, 100% { opacity: 1; } }
.zps-rec-tag { animation: zps-tag 8s cubic-bezier(.3, 1.6, .5, 1) 5s infinite backwards; }
@keyframes zps-tag { 0% { opacity: 0; scale: .6; } 6%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .9; } }
.zps-chip { animation: zps-chip-in .8s cubic-bezier(.3, 1.5, .5, 1) 1.6s both, zps-float 5s ease-in-out 2.6s infinite; }
@keyframes zps-chip-in { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
.zps-chip-ico { position: relative; }
.zps-chip-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--zh-green); opacity: 0; animation: zps-ring 2.6s ease-out 2.4s infinite; }
@keyframes zps-ring { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 1.7; } }

@media (max-width: 1100px) {
  .zps-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .zps-hero-art { max-width: 640px; }
  body.zp-live .zp-demo { grid-template-columns: minmax(0, 1fr); }
  body.zp-live .zp-guide { position: static; }
}
@media (max-width: 860px) {
  .zps-top-links { display: none; }
  .zps-top-actions { margin-left: auto; }
  .zps-top-actions .zps-btn span, .zps-brand small { display: none; }
  .zps-top-actions .zps-btn { padding: 8px 11px; }
}
@media (max-width: 639px) {
  .zp-page { --zp-frame: 3px; }
  .zps-wrap { width: calc(100% - 32px); }
  .zps-top-row { gap: 12px; }
  .zps-top-inset .zps-brand, .zps-top-inset .zps-brand > span:last-child { min-width: 0; }
  .zps-top-inset .zps-brand b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .zps-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zps-hero-art { grid-template-columns: minmax(0, 1fr); justify-items: stretch; padding-bottom: 64px; }
  .zps-beam { justify-self: center; transform: rotate(90deg); }
  .zps-rec-emp, .zps-rec-learner { rotate: 0deg; }
  .zps-flow { display: none; }
  .zps-chip { white-space: normal; width: calc(100% - 16px); }
  .zps-band { padding: 24px; }
  .zps-band-ctas .zps-btn { width: 100%; }
  .zp-demo.zp-demo-gated { max-height: 560px; }
  .zp-gate-btn { padding: 12px 20px; font-size: 16px; }
}


.zp-app-wrap { position: relative; }
.zp-enter-fwd { animation: zp-slide-r .5s cubic-bezier(.2, .8, .2, 1) both; }
.zp-enter-back { animation: zp-slide-l .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes zp-slide-r { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes zp-slide-l { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
.zp-in { animation: zp-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--zp-i, 0) * 55ms); }
@keyframes zp-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.zp-flash:not(tr) { animation: zp-flash-bg 1s ease both; }
tr.zp-flash td { animation: zp-flash-bg 1s ease both; animation-delay: calc(var(--zp-i, 0) * 45ms); }
@keyframes zp-flash-bg { 0% { background-color: rgba(167, 139, 250, .45); box-shadow: inset 3px 0 0 #6D28D9; } 100% { background-color: transparent; box-shadow: inset 0 0 0 transparent; } }
.zp-table tr.is-on.zp-flash td { animation-name: zp-flash-on; }
@keyframes zp-flash-on { 0% { background-color: rgba(167, 139, 250, .55); } 100% { background-color: var(--color-violet-50); } }
.zp-bump { display: inline-block; animation: zp-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes zp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: var(--color-violet-700); } 100% { transform: scale(1); } }
.zp-pop { animation: zp-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes zp-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.zp-shake { animation: zp-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes zp-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.zp-coach { animation: zp-coach 1.8s ease-in-out infinite; }
@keyframes zp-coach { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, .55), 0 0 0 0 rgba(34, 109, 180, .35); } 60% { box-shadow: 0 0 0 7px rgba(109, 40, 217, 0), 0 0 0 14px rgba(34, 109, 180, 0); } }
.zp-option.zp-coach { animation-name: zp-coach-card; }
@keyframes zp-coach-card { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, .4); border-color: var(--border); } 50% { box-shadow: 0 0 0 5px rgba(109, 40, 217, .15); border-color: var(--color-violet-400); } }
.zp-guide-nav .btn.is-ready { animation: zp-ready 1.8s ease-in-out infinite; }
@keyframes zp-ready { 0%, 100% { box-shadow: var(--shadow-violet-soft), 0 0 0 0 rgba(109, 40, 217, .5); } 60% { box-shadow: var(--shadow-violet-soft), 0 0 0 8px rgba(109, 40, 217, 0); } }
.zp-stages .is-pop button span { animation: zp-check-pop .7s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes zp-check-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(8, 153, 73, .2); } 100% { transform: scale(1); } }
.zp-progress span { background: linear-gradient(90deg, #6D28D9, #A78BFA 40%, #226DB4); }

.zp-meter.is-live span { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .28) 0 10px, transparent 10px 20px), linear-gradient(90deg, #6D28D9, #226DB4); background-size: 28px 28px, 100% 100%; animation: zp-stripes .7s linear infinite; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes zp-stripes { to { background-position: 28px 0, 0 0; } }
.zp-meter.is-indeterminate { position: relative; margin-top: 4px; }
.zp-meter.is-indeterminate span { position: absolute; width: 35%; animation: zp-stripes .7s linear infinite, zp-sweep 1.2s ease-in-out infinite; }
@keyframes zp-sweep { 0% { left: -35%; } 100% { left: 100%; } }
.zp-meter.is-done span { background: linear-gradient(90deg, #089949, #34D399); }
.zp-skeleton { display: grid; gap: 10px; margin-top: 14px; }
.zp-skel-row { display: grid; grid-template-columns: 18px 70px 1.2fr 1.6fr 1fr; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.zp-skel-row i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--color-slate-100) 25%, var(--color-violet-50) 50%, var(--color-slate-100) 75%); background-size: 300% 100%; animation: zp-shimmer 1.3s ease-in-out infinite; }
.zp-skel-row i:first-child { height: 18px; border-radius: 4px; }
.zp-skel-row:nth-child(2n) i { animation-delay: .15s; }
@keyframes zp-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.zp-record { transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.zp-record.is-processed { border-color: var(--color-emerald-100); }
.zp-ok-big { background: linear-gradient(135deg, var(--color-emerald-50), #EFF6FF 60%, var(--color-violet-50)); border: 1px solid var(--color-emerald-100); }
.zp-ok-big > svg, .zp-ok-big > i { width: 28px; height: 28px; color: #089949; }

.zp-toast { position: absolute; top: 56px; right: 16px; z-index: 25; display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100% - 32px)); padding: 12px 16px 12px 12px; border-radius: 14px; background: linear-gradient(135deg, #0F172A, #2E1065 70%, #1E3A6E); color: #fff; box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .7); opacity: 0; transform: translateY(-12px) scale(.96); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); overflow: hidden; }
.zp-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #6D28D9, #E42527, #F9B21D, #089949, #226DB4); }
.zp-toast.is-on { opacity: 1; transform: none; }
.zp-toast b { display: block; font-size: 14px; }
.zp-toast small { display: block; font-size: 12px; color: #C4B5FD; }
.zp-toast-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #089949; box-shadow: 0 0 0 4px rgba(8, 153, 73, .25); }
.zp-toast.is-on .zp-toast-ico { animation: zp-pop .6s cubic-bezier(.3, 1.8, .5, 1) .1s both; }
.zp-toast-ico svg, .zp-toast-ico i { width: 17px; height: 17px; stroke-width: 3; }
.zp-confetti { position: absolute; inset: 0; z-index: 24; overflow: hidden; pointer-events: none; border-radius: var(--radius-xl); }
.zp-confetti i { position: absolute; top: -16px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; opacity: 0; transform: scale(var(--s)); animation: zp-fall 2.5s cubic-bezier(.2, .6, .4, 1) var(--d) forwards; }
.zp-confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
@keyframes zp-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(var(--s)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift), 620px) rotate(var(--r)) scale(var(--s)); } }


.zp-shot-body { position: relative; }
.zp-shot-head small { display: inline-flex; align-items: center; gap: 6px; transition: color .3s ease; }
.zp-shot-dot { width: 8px; height: 8px; border-radius: 50%; background: #089949; box-shadow: 0 0 0 0 rgba(8, 153, 73, .5); }
.zp-shot.is-loading:not(.is-connected) .zp-shot-head small { color: var(--color-amber-600); }
.zp-shot.is-loading:not(.is-connected) .zp-shot-dot { background: #F9B21D; animation: zp-dot-blink .8s ease-in-out infinite; }
.zp-shot.is-connected .zp-shot-dot { animation: zp-dot-pulse 1.8s ease-out infinite; }
@keyframes zp-dot-blink { 50% { opacity: .3; } }
@keyframes zp-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(8, 153, 73, .5); } 100% { box-shadow: 0 0 0 8px rgba(8, 153, 73, 0); } }
.zp-shot-table th, .zp-shot-table td { padding-left: 6px; padding-right: 6px; }
.zp-shot-table th, .zp-shot-table td:nth-child(-n+4) { white-space: nowrap; }
.zp-shot-table td:first-child { width: 28px; }
.zp-shot.is-loading tbody { background: linear-gradient(90deg, transparent 25%, var(--color-violet-50) 50%, transparent 75%); background-size: 300% 100%; animation: zp-shimmer 1.2s ease-in-out infinite; }
.zp-shot-table td:last-child { width: 1%; text-align: right; }
.zp-shot-table tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.zp-shot-table tbody tr.is-in { opacity: 1; transform: none; }
.zp-shot-table tbody td { transition: background .35s ease; }
.zp-shot-table tbody tr.is-on td { background: var(--color-violet-50); }
.zp-shot-table tbody tr.is-done td { background: transparent; }
.zp-shot-check { position: relative; display: block; width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; background: #fff; transition: background .2s ease, border-color .2s ease; }
.zp-shot-check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
tr.is-on .zp-shot-check { background: var(--color-violet-600); border-color: var(--color-violet-600); }
tr.is-on .zp-shot-check::after { transform: rotate(45deg) scale(1); }
.zp-shot-res { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.zp-shot-res[data-outcome="Created"] { background: var(--color-emerald-50); color: var(--color-emerald-700); }
.zp-shot-res[data-outcome="Updated"] { background: var(--color-blue-50); color: var(--color-blue-700); }
tr.is-done .zp-shot-res { opacity: 1; transform: none; }
.zp-shot.is-loading tbody tr:not(.is-in) td { color: transparent; }
.zp-shot-foot { gap: 12px; }
.zp-shot-foot [data-shot-count] { display: inline-block; }
.zp-shot-foot .is-bump { animation: zp-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
.zp-shot-meter { flex: 1; height: 6px; border-radius: 6px; background: var(--color-violet-100); overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.zp-shot-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 8px, transparent 8px 16px), linear-gradient(90deg, #6D28D9, #226DB4); background-size: 22px 22px, 100% 100%; animation: zp-stripes .7s linear infinite; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.zp-shot.is-importing .zp-shot-meter { opacity: 1; }
.zp-shot.is-complete .zp-shot-meter i { background: linear-gradient(90deg, #089949, #34D399); }
.zp-shot-btn { transition: background .3s ease; }
.zp-shot.is-complete .zp-shot-btn { background: #089949; }
.zp-shot-cursor { position: absolute; left: 0; top: 0; z-index: 3; margin: -4px 0 0 -4px; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); transform: translate(60%, 40%); transition: transform .8s cubic-bezier(.45, .05, .25, 1), opacity .3s ease; }
.zp-shot-cursor.is-on { opacity: 1; }
.zp-shot-cursor::after { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -12px 0 0 -12px; border-radius: 50%; border: 3px solid #A78BFA; opacity: 0; }
.zp-shot-cursor.is-tap::after { animation: zp-shot-tap .5s ease-out; }
@keyframes zp-shot-tap { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
.zp-shot .zp-win { transition: opacity .5s ease; }
.zp-shot.is-fade .zp-win { opacity: .35; }

@media (max-width: 1100px) {
  .zp-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-map-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .zp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .zp-demo { grid-template-columns: minmax(0, 1fr); }
  .zp-guide { position: static; }
  .zp-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-app-body { grid-template-columns: minmax(0, 1fr); }
  .zp-rail { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; }
  .zp-rail-brand, .zp-rail-group, .zp-rail-item:not(.is-on) { display: none; }
  .zp-rail-item { min-height: 44px; }
}
@media (max-width: 639px) {
  .zp-hero { padding-bottom: 48px; }
  .zp-section, .zp-final { padding: 56px 0; }
  .zp-cards, .zp-cards-4, .zp-steps, .zp-options { grid-template-columns: minmax(0, 1fr); }
  .zp-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-stages button { min-height: 44px; }
  .zp-main { padding: 14px; }
  .zp-btn { min-height: 44px; }
  .zp-btn.sm { min-height: 40px; }
  .zp-field { min-width: 0; flex: 1 1 100%; }
  .zp-hero .hero-ctas .btn, .zp-final .hero-ctas .btn { width: 100%; }
  .zp-shot-table th:nth-child(4), .zp-shot-table td:nth-child(4), .zp-shot-table th:nth-child(5), .zp-shot-table td:nth-child(5) { display: none; }
  .zp-map-table thead { display: none; }
  .zp-map-table tr { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; border-top: 1px solid var(--border-soft); }
  .zp-map-table td { border: 0; padding: 12px; font-size: 14px; }
  .zp-map-arrow { width: auto; padding: 0 !important; }
  .zp-scroll { border: 0; overflow: visible; }
  .zp-table thead { display: none; }
  .zp-table, .zp-table tbody, .zp-table tr, .zp-table td { display: block; width: 100%; }
  .zp-table tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; padding: 6px 0; background: #fff; }
  .zp-table td { border: 0; padding: 5px 12px; white-space: normal; display: flex; justify-content: space-between; gap: 12px; text-align: right; overflow-wrap: anywhere; }
  .zp-table td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); text-align: left; flex-shrink: 0; }
  .zp-table td:not([data-label]) { justify-content: flex-start; }
  .zp-table tr.is-on, .zp-table tr.is-new { border-color: var(--color-violet-300); }
  .zp-maps td { display: block; text-align: left; padding: 4px 12px; }
  .zp-maps td::before { display: none; }
  .zp-maps td:nth-child(2) { display: none; }
  .zp-maps td:first-child label { font-weight: 600; color: var(--fg); }
  .zp-maps td:last-child { min-width: 0; }
  .zp-emp tr { position: relative; }
  .zp-emp td:first-child { position: absolute; top: 6px; right: 0; width: auto; }
  .zp-emp td:nth-child(2) { padding-right: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .zps-grid-steps.is-carousel, .zps-carousel-slot { transition: none !important; }
  .zps-emp.is-arriving, .zps-c-form.is-shake, .zps-c-preview .zps-emp { transition: none !important; animation: none !important; }
  .zps-journey-dialog, .zps-journey-backdrop, .zps-journey-dot, .zps-journey-steps::after, .zps-j-pane, .zps-j-record div, .zps-j-arrow, .zps-j-dst, .zps-j-checks li, .zps-j-ck, .zps-j-banner, .zps-j-mail, .zps-j-btn, .zps-j-burst, .zps-j-profile, .zps-journey-flow i { transition: none !important; animation: none !important; }
  .zps-dial-hand, .zps-dial-progress, .zps-dial-ico, .zps-dial-steps li, .zps-dial-center img, .zps-dial-center b, .zps-clock-card, .zps-clock-card li { transition: none !important; animation: none !important; }
  .zps-tasks, .zps-tasks li, .zps-task-dot, .zps-card-bar i, .zps-task-note, .zps-task-btn, .zps-next, .zps-card-next, .zps-grid-steps > .zps-step.is-arriving, .zps-open-hint { transition: none !important; animation: none !important; }
  .zps-grid-steps > .zps-step, .zps-grid-steps > .zps-step::after, .zps-pipe path { animation: none !important; transition: none !important; }
  .zp-in, tr.zp-flash td { animation-delay: 0s !important; }
  .zp-coach, .zp-guide-nav .btn.is-ready { animation: none !important; box-shadow: 0 0 0 3px rgba(109, 40, 217, .35); }
  .zps-hero-orbs span, .zps-beam, .zps-top::after, .zps-hero *, .zps-hero *::before, .zps-hero *::after { animation: none !important; }
  .zps-flow, .zps-sparks { display: none; }
  .zps-rec, .zps-chip { transition: none; }
  .zps-step:hover, .zps-emp:hover { transform: none; }
  .zp *, .zp *::before, .zp *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .zp-spin { animation: none; border-top-color: var(--color-violet-600); }
}

.zw .o-toolbar .o-search { width: 230px; }
.zw .o-toolbar .o-select { width: 150px; }
.zw .o-table tr.enter td { animation: wy-in .45s var(--ease-out) both; }
.zw .o-table tr.hl td { background: #FFF1D6; }
.zw .o-table td a { color: #2D3B45; }
.zw .o-badge.left { background: #A65B5B; }
.zw .o-badge.dup { background: #B7791F; }
.zw .o-modal-c label.zw-gap { margin-top: 10px; }
.zw .o-input span { white-space: nowrap; overflow: hidden; }
.zw-o-form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 640px; }
.zw-o-form > label { font-size: 12.5px; font-weight: 700; color: #2D3B45; margin-top: 6px; }
.zw-o-form .o-select { width: 260px; }
.zw-o-file { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #55606B; }
.zw-o-file span.on { color: #2D3B45; font-weight: 700; }
.zw-o-csv { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #D6D9DE; font-family: monospace; font-size: 11px; color: #2D3B45; }
.zw-o-csv > div { padding: 5px 8px; border-right: 1px solid #E5E7EA; border-bottom: 1px solid #E5E7EA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 25px; }
.zw-o-csv .h { background: #F0F1F3; font-weight: 700; }
.zw-o-csv .miss { background: #FBEDED; }
.zw-o-csv > div.enter { animation: wy-fade .3s both; }
.zw-o-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 12px; color: #55606B; }
.zw-o-note svg { width: 14px; height: 14px; }
.zw-o-result { display: none; flex-direction: column; gap: 10px; max-width: 700px; }
.zw .o-page.is-result .zw-o-form { display: none; }
.zw .o-page.is-result .zw-o-result { display: flex; animation: wy-fade .35s both; }
.zw-o-result > b { font-size: 15px; color: #2D3B45; font-weight: 400; }
.zw-o-bar { height: 10px; border: 1px solid #C7CCD1; border-radius: 2px; background: #F5F5F6; overflow: hidden; }
.zw-o-bar i { display: block; height: 100%; width: 0; background: #5C636C; transition: width 1.6s linear; }
.zw-o-sum { font-size: 13px; color: #2D3B45; }
.zw-o-sum.bad { color: #A65B5B; font-weight: 700; }
.zw-o-errs { border: 1px solid #D6D9DE; border-radius: 3px; font-size: 12.5px; color: #2D3B45; }
.zw-o-errs:empty { display: none; }
.zw-o-errs > div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 9px 12px; border-top: 1px solid #E5E7EA; animation: wy-in .4s both; }
.zw-o-errs > div:first-child { border-top: none; }
.zw-o-errs b { font-weight: 700; color: #A65B5B; }
.zw-o-after { margin-top: 4px; }

.zw .n-side small:nth-of-type(1) { padding-top: 4px; }
.zw .n-filters.card .n-btn { margin-left: 8px; }
.zw-logo { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; background: #6B6478; }
.zw-logo.zp { background: linear-gradient(135deg, #E42527, #F9B21D); }
.zw-logo.b { background: #73C41D; } .zw-logo.g { background: #F38B00; } .zw-logo.a { background: #0A6ED1; }
.zw-logo.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
.zw-ints { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.zw-int { background: #fff; border: 1px solid #ECE8F4; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .3s, border-color .3s; }
.zw-int.hov, .zw-int.on { border-color: #C4B5FD; box-shadow: 0 16px 34px -20px rgba(109,40,217,.5); }
.zw-int-h { display: flex; align-items: center; gap: 12px; }
.zw-int-h > div { flex: 1; min-width: 0; }
.zw-int-h b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.zw-int-h span { display: block; font-size: 11.5px; color: #8B8499; }
.zw-int-h .n-tag { display: inline-flex; }
.zw-int p { margin: 0; font-size: 12.5px; color: #4A4358; line-height: 1.45; }
.zw-int-f { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #F1EEF8; font-size: 11.5px; color: #8B8499; }
.zw-steps { display: flex; gap: 6px; }
.zw-steps > span { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #ECE8F4; font-size: 12px; font-weight: 600; color: #8B8499; transition: all .3s; }
.zw-steps i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; background: #F1EEF8; color: #6B6478; }
.zw-steps .done { color: #15803D; } .zw-steps .done i { background: #DCFCE7; color: #15803D; }
.zw-steps .on { color: #211A2E; border-color: #C4B5FD; background: #F5F3FF; } .zw-steps .on i { background: #6D28D9; color: #fff; }
.zw-src { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding-right: 6px; }
.zw-cb { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #CFC8DD; background: #fff; vertical-align: middle; transition: all .2s; }
.zw-cb.on { background: #6D28D9; border-color: #6D28D9; }
.zw-cb.on::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.zw-cb.off { background: #F1EEF8; border-color: #E6E1EF; }
.zw-cb.hov { box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.zw-emps th:nth-child(1) { width: 6%; } .zw-emps th:nth-child(2) { width: 30%; } .zw-emps th:nth-child(3) { width: 14%; } .zw-emps th:nth-child(4) { width: 18%; } .zw-emps th:nth-child(5) { width: 12%; } .zw-emps th:nth-child(6) { width: 20%; }
.zw-emps td { padding-top: 6px; padding-bottom: 6px; }
.zw-emps tr.sel td { background: #FAF8FF; }
.zw-emps tr.na td { color: #A9A2B6; }
.zw-empty td { text-align: center; padding: 70px 12px !important; color: #8B8499; font-size: 13px; }
.zw-empty svg { width: 28px; height: 28px; display: block; margin: 0 auto 8px; color: #C4B5FD; }
.zw .n-tag.n { background: #F1EEF8; color: #8B8499; }
.zw-map-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.zw-map > div:last-child { padding: 6px 14px; }
.zw-map-r { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #F5F3F9; font-size: 12.5px; }
.zw-map-r:last-child { border-bottom: none; }
.zw-map-r > span { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid #ECE8F4; background: #FCFBFE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zw-map-r > span:last-child { background: #fff; font-weight: 600; }
.zw-map-r > svg { width: 14px; height: 14px; color: #8B5CF6; }
.zw-map-r em { margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6D28D9; }
.zw-map-r.ok > span:last-child { border-color: #BBF7D0; }
.zw-review { opacity: .35; filter: grayscale(.6); transition: opacity .5s, filter .5s; }
.zw-review.on { opacity: 1; filter: none; }
.zw-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px 4px; }
.zw-sum > div { border-radius: 12px; padding: 10px 12px; background: #F7F6FB; }
.zw-sum b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1; }
.zw-sum span { font-size: 11.5px; color: #6B6478; }
.zw-sum .g b { color: #15803D; } .zw-sum .b b { color: #1D4ED8; } .zw-sum .a b { color: #B45309; }
.zw-issues { padding: 6px 16px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.zw-issue { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F5F3F9; font-size: 12px; animation: wy-in .4s var(--ease-out) both; }
.zw-issue > div { flex: 1; min-width: 0; }
.zw-issue strong { display: block; font-size: 12.5px; }
.zw-issue div > span { display: block; font-size: 11px; color: #8B8499; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-review-f { display: flex; justify-content: flex-end; padding: 10px 16px 14px; }
.zw-learners th:nth-child(1) { width: 30%; } .zw-learners th:nth-child(2) { width: 13%; } .zw-learners th:nth-child(3) { width: 17%; } .zw-learners th:nth-child(4) { width: 15%; } .zw-learners th:nth-child(5) { width: 13%; } .zw-learners th:nth-child(6) { width: 12%; }
.zw-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #4A4358; }
.zw-chip .zw-logo { width: 18px; height: 18px; border-radius: 5px; font-size: 8px; }
.zw .n-page > * { flex-shrink: 0; }
.zw .n-page > .zw-map-grid { flex: 1; flex-shrink: 1; }
.zw-steps > span { padding: 6px 10px; }
.zw-emps td { padding-top: 4px; padding-bottom: 4px; }
.zw-emps .av { width: 26px; height: 26px; font-size: 10px; }
.zw-emps .n-who span { font-size: 10.5px; }
.zw-map-r { padding: 4px 0; }
.zw-map-r > span { padding: 5px 10px; }
.zp .zw .wy-capitem h3 { color: inherit; }
.zw-learners th:nth-child(1) { width: 28%; } .zw-learners th:nth-child(2) { width: 12%; } .zw-learners th:nth-child(5) { width: 15%; } .zw-learners th:nth-child(6) { width: 13%; }
.zw-int-h .zw-logo { display: inline-grid; font-size: 12px; color: #fff; }
.zw .n-page[data-page="learners"] .zw-learners th:nth-child(1) { width: 27%; } .zw .n-page[data-page="learners"] .zw-learners th:nth-child(2) { width: 12%; } .zw .n-page[data-page="learners"] .zw-learners th:nth-child(3) { width: 17%; } .zw .n-page[data-page="learners"] .zw-learners th:nth-child(4) { width: 14%; } .zw .n-page[data-page="learners"] .zw-learners th:nth-child(5) { width: 16%; } .zw .n-page[data-page="learners"] .zw-learners th:nth-child(6) { width: 14%; }

.zp-igd { --igd-fg1: #15103a; --igd-fg2: #4a4660; --igd-fg3: #6b6580; --igd-border: #ece9f4; --igd-divider: #f0eef6; --igd-soft: #f2edfe; --igd-primary: #5b21b6; display: flex; flex-direction: column; gap: 20px; }
.zp-igd .zp-back { align-self: flex-start; min-height: 32px; margin: 0; font-size: 13.5px; color: var(--igd-primary); }
.zp-igd .zp-panel { margin: 0; padding: 22px; border: 1px solid var(--igd-border); border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(21, 16, 58, .06), 0 1px 3px rgba(21, 16, 58, .04); min-width: 0; }
.zp-igd .zp-panel p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--igd-fg2); }
.zp-igd .zp-panel h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--igd-fg1); }
.zp-igd .zp-muted { color: var(--igd-fg3); font-size: 13px; }
.zp-igd .zp-detail-head { gap: 16px; }
.zp-igd .zp-detail-head h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--igd-fg1); }
.zp-igd .zp-detail-head .zp-logo { width: 56px; height: 56px; border-radius: 15px; font-size: 18px; background: var(--igd-soft); color: var(--igd-primary); }
.zp-igd .zp-meta { gap: 10px; margin-top: 6px; font-size: 13px; color: var(--igd-fg3); }
.zp-igd .zp-detail-grid { gap: 20px; margin: 0; }
.zp-igd .zp-detail-grid p { font-size: 14px; color: var(--igd-fg2); }
.zp-igd .zp-dl { gap: 8px 16px; margin: 0 0 12px; font-size: 13.5px; }
.zp-igd .zp-dl dt { color: var(--igd-fg3); }
.zp-igd .zp-dl dd { font-weight: 400; color: var(--igd-fg1); }
.zp-igd .zp-dl a { color: var(--igd-primary); text-decoration: underline; }
.zp-igd .zp-setup { margin-top: 4px; }
.zp-igd .zp-setup li { gap: 14px; padding-bottom: 22px; }
.zp-igd .zp-setup li:last-child { padding-bottom: 0; }
.zp-igd .zp-setup li:not(:last-child)::before { left: 13px; top: 30px; width: 2px; background: var(--igd-divider); }
.zp-igd .zp-setup-n { width: 28px; height: 28px; border: 2px solid var(--igd-border); font-size: 13px; color: var(--igd-fg3); }
.zp-igd .zp-setup li.is-current .zp-setup-n { border-color: #7c3aed; color: var(--igd-primary); }
.zp-igd .zp-setup li > div { flex: 1; min-width: 0; padding-top: 3px; }
.zp-igd .zp-setup-t { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--igd-fg1); }
.zp-igd .zp-setup p { margin: 0 0 10px; font-size: 14px; color: var(--igd-fg2); }
.zp-igd .zp-setup li:last-child p { margin: 0; }
.zp-igd .zp-h4-row { gap: 10px; }
.zp-igd .zp-perms { gap: 14px; margin: 0 0 12px; }
.zp-igd .zp-perms li > div { min-width: 0; font-size: 13px; color: var(--igd-fg2); }
.zp-igd .zp-perms b { font-size: 13.5px; color: var(--igd-fg1); }
.zp-igd .zp-perms code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--igd-fg3); background: none; padding: 0; }
.zp-igd .zp-perm-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--igd-soft); color: var(--igd-primary); }
.zp-igd .zp-perm-note { margin: 0; font-size: 12.5px; color: var(--igd-fg3); }
.zp-igd .zp-scroll { border: 0; border-radius: 0; }
.zp-igd .zp-table { font-size: 13.5px; }
.zp-igd .zp-table th { padding: 0 12px 10px 0; background: none; border-bottom: 1px solid var(--igd-divider); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--igd-fg3); }
.zp-igd .zp-table td { padding: 12px 12px 12px 0; border-top: 0; border-bottom: 1px solid var(--igd-divider); vertical-align: top; white-space: normal; color: var(--igd-fg2); }
.zp-igd .zp-table tr:last-child td { border-bottom: 0; }
.zp-igd .zp-table td b { display: block; color: var(--igd-fg1); }
.zp-igd .zp-caps code { margin: 0 4px 4px 0; padding: 2px 6px; border-radius: 6px; background: #eff1fb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--igd-fg2); }
.zp-igd .zp-empty b { color: var(--igd-fg1); }
.zp-igd .zp-dl { line-height: 1.35; }
.zp-igd .zp-table td { line-height: 1.4; }
.zp-igd .zp-caps td .zp-muted { display: block; margin-top: 2px; font-size: 12.5px; }
.zp-igd .zp-perms li > div { line-height: 1.4; }
.zp-igd .zp-empty { gap: 8px; padding: 14px 12px 6px; }
.zp-igd .zp-empty > i, .zp-igd .zp-empty > svg { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 10px; background: #eff1fb; color: var(--igd-fg3); }
.zp-igd .zp-empty b { font-size: 14px; }
.zp-igd .zp-setup li.is-done .zp-setup-n { border-color: #166534; background: #ecfdf5; color: #166534; }
.zp-igd .zp-setup-n svg, .zp-igd .zp-setup-n i { width: 14px; height: 14px; }
.zp-igd .zp-setup-t { display: flex; align-items: center; gap: 8px; }
.zp-igd .zp-step-done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--igd-fg2); }
.zp-igd .zp-step-done code, .zp-igd .zp-copy-row code, .zp-igd .zp-detail-grid .zp-dl code { padding: 2px 6px; border-radius: 6px; background: #eff1fb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--igd-fg2); overflow-wrap: anywhere; }
.zp-igd .zp-app-setup { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 760px; }
.zp-igd .zp-app-setup > p { margin: 0; }
.zp-igd .zp-app-setup a { color: var(--igd-primary); }
.zp-igd .zp-copy-list { align-self: stretch; margin: 0; padding: 12px 14px; border: 1px solid var(--igd-border); border-radius: 12px; background: #f7f6fb; }
.zp-igd .zp-copy-row { display: flex; align-items: center; gap: 6px; }
.zp-igd .zp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.zp-igd .zp-form-row .zp-field { font-size: 13px; color: var(--igd-fg1); }
.zp-igd .zp-form-row input::placeholder { color: var(--igd-fg2); opacity: 1; letter-spacing: 1px; }
.zp-igd .zp-form-row input[data-zp-app="secret"][type="text"] { color: var(--igd-fg2); letter-spacing: 1px; }
.zp-igd .zp-app-note { margin: 0; font-size: 12.5px; }
.zp-igd .zp-app-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.zp-igd .zp-setup li > div > .zp-app-note { margin-top: 8px; }
@media (max-width: 860px) {
  .zp-igd .zp-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .zp-igd .zp-form-row { grid-template-columns: minmax(0, 1fr); }
}
.zw-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.zw-reveal.in { opacity: 1; transform: none; }