/* ------------------------------------------------------------------
   Sign-in. Left: brand stage (always midnight). Right: form, follows
   the light/dark tokens from app.css.
   ------------------------------------------------------------------ */
:root {
    --si-night-1: #0B1120;
    --si-night-2: #0F172A;
    --si-night-3: #172554;
    --si-indigo: #4F46E5;
    --si-blue: #2563EB;
    --si-sky: #0EA5E9;
    --si-teal: #14B8A6;
    --si-emerald: #10B981;
    --si-ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--hr-app-bg); color: var(--hr-ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.si { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr); min-height: 100vh; }

/* ================= Brand stage ================= */
.si-stage { position: relative; overflow: hidden; color: #E2E8F0; background: radial-gradient(1200px 800px at 20% -10%, var(--si-night-3), transparent 60%), linear-gradient(160deg, var(--si-night-2) 0%, var(--si-night-1) 100%); padding: 40px 48px; display: flex; flex-direction: column; isolation: isolate; }

/* drifting aurora blobs */
.si-aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(70px); opacity: .55; }
.si-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: si-drift 22s var(--si-ease) infinite alternate; }
.si-aurora span:nth-child(1) { width: 46%; height: 46%; left: 8%; top: 12%; background: var(--si-indigo); }
.si-aurora span:nth-child(2) { width: 38%; height: 38%; right: 6%; top: 30%; background: var(--si-sky); animation-duration: 26s; animation-delay: -6s; }
.si-aurora span:nth-child(3) { width: 34%; height: 34%; left: 30%; bottom: 4%; background: var(--si-teal); animation-duration: 30s; animation-delay: -12s; opacity: .7; }
@keyframes si-drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6%, -5%) scale(1.12); }
    100% { transform: translate(-5%, 6%) scale(.94); }
}

/* fine grid, faded at the edges */
.si-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(148, 163, 184, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); }

.si-brand { display: flex; align-items: center; gap: 12px; }
.si-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--si-blue), var(--si-indigo) 55%, var(--si-sky)); box-shadow: 0 10px 30px rgba(79, 70, 229, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.si-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: 0 6px 18px rgba(2, 6, 23, .35); }
.si-notice { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; margin-bottom: 16px; font-size: 13px; line-height: 1.45; color: var(--hr-primary); background: var(--hr-primary-tint); border: 1px solid rgba(var(--hr-primary-rgb), .2); }
.si-notice svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.si-brand-name { font-weight: 700; font-size: 16px; color: #F8FAFC; letter-spacing: -.01em; }
.si-brand-sub { font-size: 11.5px; color: #94A3B8; }

.si-copy { margin-top: clamp(40px, 9vh, 96px); max-width: 540px; }
.si-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #A5B4FC; background: rgba(99, 102, 241, .12); border: 1px solid rgba(129, 140, 248, .25); padding: 6px 12px; border-radius: 999px; }
.si-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--si-emerald); box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); animation: si-pulse 2.4s ease-in-out infinite; }
@keyframes si-pulse { 50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } }
.si-headline { font-family: 'Sora', 'Inter', sans-serif; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 18px 0 16px; color: #F8FAFC; }
.si-headline em { font-style: normal; background: linear-gradient(90deg, #93C5FD, #A5B4FC 40%, #5EEAD4 80%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: si-shimmer 8s linear infinite; }
@keyframes si-shimmer { to { background-position: -200% 0; } }
.si-lede { font-size: 15.5px; line-height: 1.65; color: #CBD5E1; margin: 0; max-width: 480px; }

/* ---- product stage ---- */
.si-showcase { position: relative; margin-top: auto; padding-top: 40px; height: clamp(300px, 40vh, 380px); }

.si-graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.si-graph .edge { stroke: rgba(148, 163, 184, .22); stroke-width: 1.2; fill: none; }
.si-graph .flow { stroke: url(#si-flow); stroke-width: 2; fill: none; stroke-linecap: round; stroke-dasharray: 10 190; animation: si-flow 3.2s linear infinite; }
.si-graph .flow.d2 { animation-delay: -1.1s; }
.si-graph .flow.d3 { animation-delay: -2.2s; }
@keyframes si-flow { to { stroke-dashoffset: -200; } }
.si-graph .node circle.halo { fill: rgba(99, 102, 241, .16); animation: si-halo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.si-graph .node:nth-of-type(2n) circle.halo { animation-delay: -1.5s; }
@keyframes si-halo { 50% { transform: scale(1.35); opacity: .35; } }
.si-graph .node circle.core { fill: #1E293B; stroke: rgba(165, 180, 252, .6); stroke-width: 1.5; }
.si-graph .node text { fill: #E2E8F0; font: 700 10px Inter, sans-serif; text-anchor: middle; dominant-baseline: central; }

.si-card { position: absolute; border-radius: 16px; background: rgba(15, 23, 42, .62); border: 1px solid rgba(148, 163, 184, .18); box-shadow: 0 24px 60px rgba(2, 6, 23, .55), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding: 14px 16px; animation: si-float 7s ease-in-out infinite; }
@keyframes si-float { 50% { transform: translateY(-8px); } }
.si-card-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.si-card-label svg { width: 14px; height: 14px; }

.si-ai { left: 0; top: 18px; width: min(360px, 62%); }
.si-ai .si-card-label { color: #A5B4FC; }
.si-ai-q { margin-top: 10px; display: flex; align-items: flex-start; gap: 10px; }
.si-ai-avatar { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, var(--si-indigo), var(--si-sky)); display: grid; place-items: center; }
.si-ai-avatar svg { width: 14px; height: 14px; color: #fff; }
.si-ai-text { font-size: 14px; line-height: 1.45; color: #F1F5F9; min-height: 42px; }
.si-caret { display: inline-block; width: 2px; height: 1.05em; background: #A5B4FC; vertical-align: -2px; margin-left: 1px; animation: si-blink 1s steps(1) infinite; }
@keyframes si-blink { 50% { opacity: 0; } }
.si-ai-foot { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.si-tag { font-size: 11px; color: #CBD5E1; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .16); padding: 3px 8px; border-radius: 999px; }

.si-life { right: 0; top: 0; width: min(300px, 48%); animation-delay: -2.5s; }
.si-life .si-card-label { color: #5EEAD4; }
.si-steps { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.si-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #94A3B8; transition: color .4s ease; }
.si-steps li b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; color: #64748B; background: rgba(148, 163, 184, .1); border: 1px solid rgba(148, 163, 184, .18); transition: all .4s ease; }
.si-steps li.on { color: #F1F5F9; }
.si-steps li.on b { color: #0B1120; background: #5EEAD4; border-color: #5EEAD4; box-shadow: 0 0 0 4px rgba(94, 234, 212, .15); }
.si-steps li.done b { color: #5EEAD4; background: rgba(94, 234, 212, .12); border-color: rgba(94, 234, 212, .35); }

.si-audit { right: 6%; bottom: 0; width: min(290px, 46%); animation-delay: -4.5s; }
.si-audit .si-card-label { color: #86EFAC; }
.si-audit-row { margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12.5px; }
.si-audit-row span { color: #94A3B8; }
.si-audit-row s { color: #FCA5A5; text-decoration-color: rgba(252, 165, 165, .5); }
.si-audit-row ins { color: #86EFAC; text-decoration: none; }

.si-trust { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: #94A3B8; }
.si-trust span { display: inline-flex; align-items: center; gap: 6px; }
.si-trust svg { width: 14px; height: 14px; color: #5EEAD4; }
.si-flags { display: inline-flex; gap: 4px; }
.si-flags b { font-weight: 600; font-size: 10.5px; color: #CBD5E1; background: rgba(148, 163, 184, .12); border-radius: 5px; padding: 1px 5px; letter-spacing: .03em; }

/* ================= Form panel ================= */
.si-panel { position: relative; display: flex; flex-direction: column; padding: 28px clamp(24px, 5vw, 64px); background: var(--hr-surface); }
.si-panel::before { content: ""; position: absolute; inset: 0; background: var(--hr-gradient-mesh); pointer-events: none; }
.si-panel-top { position: relative; display: flex; justify-content: space-between; align-items: center; }
.si-mobile-brand { display: none; align-items: center; gap: 10px; }
.si-mobile-brand .si-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.si-mobile-brand b { font-size: 15px; color: var(--hr-ink); }

.si-theme { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--hr-surface-2); border: 1px solid var(--hr-border); margin-left: auto; }
.si-theme button { width: 32px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--hr-muted); display: grid; place-items: center; cursor: pointer; transition: all .15s ease; }
.si-theme button:hover { color: var(--hr-ink); }
.si-theme button[aria-pressed="true"] { background: var(--hr-surface); color: var(--hr-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.si-theme svg { width: 15px; height: 15px; }

.si-form-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.si-form-card { width: 100%; max-width: 400px; animation: si-rise .6s var(--si-ease) both; }
@keyframes si-rise { from { opacity: 0; transform: translateY(14px); } }

.si-greet { font-size: 13px; font-weight: 600; color: var(--hr-primary); display: flex; align-items: center; gap: 8px; }
.si-greet svg { width: 16px; height: 16px; }
.si-title { font-family: 'Sora', 'Inter', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 6px; color: var(--hr-ink); }
.si-sub { font-size: 14px; color: var(--hr-muted); margin: 0 0 26px; }
.si-sub strong { color: var(--hr-body); font-weight: 600; }

.si-known { display: none; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--hr-border); border-radius: 14px; background: var(--hr-surface-2); margin-bottom: 18px; }
.si-known.show { display: flex; animation: si-rise .4s var(--si-ease) both; }
.si-known-avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--hr-gradient-brand); flex-shrink: 0; }
.si-known-text { flex: 1; min-width: 0; }
.si-known-text small { display: block; font-size: 11.5px; color: var(--hr-muted); }
.si-known-text span { display: block; font-size: 13.5px; font-weight: 600; color: var(--hr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-link-btn { border: 0; background: none; color: var(--hr-primary); font: 600 12.5px Inter, sans-serif; cursor: pointer; padding: 4px; border-radius: 6px; }
.si-link-btn:hover { text-decoration: underline; }
.si-link-btn:focus-visible { outline: 2px solid var(--hr-primary); outline-offset: 2px; }

.si-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; margin-bottom: 18px; }
.si-alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.si-alert--error { background: var(--hr-danger-bg); color: var(--hr-danger); border: 1px solid rgba(220, 38, 38, .2); animation: si-shake .42s cubic-bezier(.36, .07, .19, .97) both; }
.si-alert--ok { background: var(--hr-success-bg); color: var(--hr-success); border: 1px solid rgba(22, 163, 74, .2); }
@keyframes si-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

.si-field { position: relative; margin-bottom: 14px; }
.si-field input { width: 100%; height: 56px; padding: 22px 46px 8px 44px; font: 500 15px Inter, sans-serif; color: var(--hr-ink); background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 13px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.si-field input:hover { border-color: color-mix(in srgb, var(--hr-primary) 35%, var(--hr-border)); }
.si-field input:focus { border-color: var(--hr-primary); box-shadow: 0 0 0 4px rgba(var(--hr-primary-rgb), .14); }
.si-field label { position: absolute; left: 44px; top: 18px; font-size: 15px; color: var(--hr-muted); pointer-events: none; transition: all .16s var(--si-ease); }
.si-field input:focus + label, .si-field input:not(:placeholder-shown) + label { top: 9px; font-size: 11.5px; font-weight: 600; color: var(--hr-primary); letter-spacing: .01em; }
.si-field input:not(:focus):not(:placeholder-shown) + label { color: var(--hr-muted); }
.si-field .si-ico { position: absolute; left: 15px; top: 18px; width: 20px; height: 20px; color: var(--hr-muted); pointer-events: none; transition: color .15s ease; }
.si-field:focus-within .si-ico { color: var(--hr-primary); }
.si-field.invalid input { border-color: var(--hr-danger); }
.si-eye { position: absolute; right: 8px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--hr-muted); display: grid; place-items: center; cursor: pointer; }
.si-eye:hover { background: var(--hr-surface-2); color: var(--hr-ink); }
.si-eye:focus-visible { outline: 2px solid var(--hr-primary); outline-offset: 1px; }
.si-eye svg { width: 19px; height: 19px; }
.si-caps { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--hr-warning); margin: -6px 0 12px 4px; }
.si-caps.show { display: flex; }
.si-caps svg { width: 14px; height: 14px; }

.si-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; gap: 12px; }
.si-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--hr-body); cursor: pointer; user-select: none; }
.si-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.si-switch i { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--hr-border); transition: background .2s ease; flex-shrink: 0; }
.si-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .2s var(--si-ease); }
.si-switch input:checked + i { background: var(--hr-primary); }
.si-switch input:checked + i::after { transform: translateX(16px); }
.si-switch input:focus-visible + i { outline: 2px solid var(--hr-primary); outline-offset: 2px; }

.si-help { position: relative; }
.si-help-pop { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 250px; padding: 12px 14px; border-radius: 12px; background: var(--hr-surface); border: 1px solid var(--hr-border); box-shadow: var(--hr-shadow-pop); font-size: 12.5px; line-height: 1.5; color: var(--hr-body); z-index: 5; }
.si-help-pop.show { display: block; animation: si-rise .2s var(--si-ease) both; }

.si-submit { position: relative; width: 100%; height: 54px; border: 0; border-radius: 13px; cursor: pointer; overflow: hidden; font: 600 15.5px Inter, sans-serif; color: #fff; background: linear-gradient(135deg, #2563EB 0%, #4F46E5 60%, #6366F1 100%); box-shadow: 0 10px 28px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.si-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--si-ease); }
.si-submit:hover { box-shadow: 0 14px 34px rgba(37, 99, 235, .42), inset 0 1px 0 rgba(255, 255, 255, .22); filter: brightness(1.05); }
.si-submit:hover::after { transform: translateX(120%); }
.si-submit:active { transform: translateY(1px) scale(.995); }
.si-submit:focus-visible { outline: 3px solid rgba(var(--hr-primary-rgb), .45); outline-offset: 3px; }
.si-submit svg { width: 18px; height: 18px; transition: transform .2s var(--si-ease); }
.si-submit:hover svg { transform: translateX(3px); }
.si-submit .si-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: si-rot .7s linear infinite; }
.si-submit.busy { pointer-events: none; filter: saturate(.85); }
.si-submit.busy .si-spin { display: block; }
.si-submit.busy .si-arrow { display: none; }
@keyframes si-rot { to { transform: rotate(360deg); } }

.si-secure { margin-top: 22px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--hr-surface-2); font-size: 12.5px; color: var(--hr-muted); line-height: 1.45; }
.si-secure svg { width: 18px; height: 18px; color: var(--hr-success); flex-shrink: 0; }

.si-foot { position: relative; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--hr-muted); }
.si-kbd { font: 600 11px ui-monospace, Menlo, Consolas, monospace; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--hr-border); border-bottom-width: 2px; background: var(--hr-surface); color: var(--hr-body); }

/* ================= Responsive ================= */
@media (max-width: 1100px) {
    .si { grid-template-columns: 1fr 1fr; }
    .si-stage { padding: 32px; }
    .si-audit { display: none; }
}
@media (max-width: 860px) {
    .si { grid-template-columns: 1fr; }
    .si-stage { display: none; }
    .si-mobile-brand { display: flex; }
    .si-panel { min-height: 100vh; }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .si-caret { display: none; }
}

/* =====================================================================
   Auth v2 — shared by sign-in, register, forgot & reset password.
   ===================================================================== */

/* ---- stage extras: particles, cursor spotlight, parallax ---- */
.si-particles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .75; }
.si-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 30%), rgba(129, 140, 248, .16), transparent 60%); transition: background .08s linear; }
.si-parallax { transition: transform .25s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.si-brand { animation: si-rise .7s var(--si-ease) both; }
.si-copy > * { animation: si-rise .8s var(--si-ease) both; }
.si-copy > *:nth-child(2) { animation-delay: .08s; }
.si-copy > *:nth-child(3) { animation-delay: .16s; }

/* register stage */
.si-perks { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.si-perk { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: rgba(15, 23, 42, .5); border: 1px solid rgba(148, 163, 184, .16); backdrop-filter: blur(10px); animation: si-rise .7s var(--si-ease) both; transition: transform .2s ease, border-color .2s ease; }
.si-perk:hover { transform: translateY(-3px); border-color: rgba(165, 180, 252, .4); }
.si-perk:nth-child(2) { animation-delay: .08s; } .si-perk:nth-child(3) { animation-delay: .16s; } .si-perk:nth-child(4) { animation-delay: .24s; }
.si-perk i { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, rgba(99, 102, 241, .35), rgba(14, 165, 233, .25)); color: #C7D2FE; }
.si-perk i svg { width: 18px; height: 18px; }
.si-perk b { display: block; font-size: 13.5px; color: #F1F5F9; }
.si-perk span { font-size: 12.5px; color: #94A3B8; line-height: 1.45; }
.si-journey { margin-top: auto; padding-top: 34px; display: flex; align-items: center; gap: 0; max-width: 560px; }
.si-journey div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 11.5px; color: #94A3B8; position: relative; }
.si-journey div::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: linear-gradient(90deg, rgba(94, 234, 212, .6), rgba(165, 180, 252, .6)); background-size: 200% 100%; animation: si-shimmer 3s linear infinite; }
.si-journey div:first-child::before { display: none; }
.si-journey b { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; color: #0B1120; background: #5EEAD4; box-shadow: 0 0 0 5px rgba(94, 234, 212, .15); }

/* reset stage: animated shield */
.si-shield { margin: auto 0 0; padding-top: 30px; display: flex; justify-content: center; }
.si-shield svg { width: min(300px, 60%); height: auto; overflow: visible; }
.si-shield .ring { fill: none; stroke: rgba(165, 180, 252, .25); stroke-width: 1.5; transform-origin: 150px 150px; animation: si-orbit 18s linear infinite; stroke-dasharray: 4 10; }
.si-shield .ring.r2 { animation-duration: 26s; animation-direction: reverse; stroke: rgba(94, 234, 212, .25); }
.si-shield .body { fill: url(#si-shield-fill); stroke: rgba(199, 210, 254, .7); stroke-width: 2; filter: drop-shadow(0 20px 40px rgba(79, 70, 229, .5)); animation: si-float 6s ease-in-out infinite; transform-origin: center; }
.si-shield .key { fill: none; stroke: #F8FAFC; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: si-draw 2.4s var(--si-ease) .4s forwards; }
@keyframes si-orbit { to { transform: rotate(360deg); } }
@keyframes si-draw { to { stroke-dashoffset: 0; } }

/* ---- panel: glowing card, staggered entrance ---- */
.si-form-card { position: relative; }
.si-form-card.wide { max-width: 560px; }
.si-stagger > * { animation: si-rise .55s var(--si-ease) both; }
.si-stagger > *:nth-child(1) { animation-delay: .02s; } .si-stagger > *:nth-child(2) { animation-delay: .06s; } .si-stagger > *:nth-child(3) { animation-delay: .1s; }
.si-stagger > *:nth-child(4) { animation-delay: .14s; } .si-stagger > *:nth-child(5) { animation-delay: .18s; } .si-stagger > *:nth-child(6) { animation-delay: .22s; }
.si-stagger > *:nth-child(7) { animation-delay: .26s; } .si-stagger > *:nth-child(8) { animation-delay: .3s; } .si-stagger > *:nth-child(n+9) { animation-delay: .34s; }
.si-submit .si-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: si-ripple .6s ease-out forwards; pointer-events: none; }
@keyframes si-ripple { to { transform: scale(4); opacity: 0; } }
.si-submit.done { background: linear-gradient(135deg, #10B981, #059669) !important; }

.si-switch-line { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--hr-muted); }
.si-switch-line a { color: var(--hr-primary); font-weight: 700; text-decoration: none; }
.si-switch-line a:hover { text-decoration: underline; }
.si-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font: 600 13px Inter, sans-serif; color: var(--hr-muted); text-decoration: none; }
.si-back:hover { color: var(--hr-primary); }
.si-back svg { width: 16px; height: 16px; transition: transform .2s ease; }
.si-back:hover svg { transform: translateX(-3px); }

/* ---- segmented tabs with sliding thumb ---- */
.si-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 20px; border-radius: 14px; background: var(--hr-surface-2); border: 1px solid var(--hr-border); }
.si-seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--hr-surface); box-shadow: 0 2px 8px rgba(15, 23, 42, .12); transition: transform .3s var(--si-ease); }
.si-seg[data-active="1"]::before { transform: translateX(100%); }
.si-seg button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border: 0; background: transparent; font: 650 13.5px Inter, sans-serif; color: var(--hr-muted); cursor: pointer; transition: color .2s ease; }
.si-seg button svg { width: 17px; height: 17px; }
.si-seg button[aria-selected="true"] { color: var(--hr-primary); }

/* ---- wizard ---- */
.si-wiz { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; }
.si-wiz-step { display: flex; align-items: center; gap: 8px; font: 650 12px Inter, sans-serif; color: var(--hr-muted); white-space: nowrap; }
.si-wiz-step b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; border: 1.5px solid var(--hr-border); background: var(--hr-surface); color: var(--hr-muted); transition: all .3s var(--si-ease); }
.si-wiz-step.on { color: var(--hr-ink); }
.si-wiz-step.on b { border-color: var(--hr-primary); background: var(--hr-primary); color: #fff; box-shadow: 0 0 0 4px rgba(var(--hr-primary-rgb), .16); }
.si-wiz-step.done b { border-color: var(--hr-success); background: var(--hr-success); color: #fff; }
.si-wiz-line { flex: 1; height: 2px; border-radius: 2px; background: var(--hr-border); overflow: hidden; }
.si-wiz-line i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hr-primary), #0EA5E9); transition: width .4s var(--si-ease); }
.si-wiz-line.done i { width: 100%; }
.si-page { display: none; }
.si-page.on { display: block; animation: si-slide .4s var(--si-ease) both; }
.si-page.on.back { animation-name: si-slide-back; }
@keyframes si-slide { from { opacity: 0; transform: translateX(22px); } }
@keyframes si-slide-back { from { opacity: 0; transform: translateX(-22px); } }
.si-page-title { margin: 0 0 4px; font: 700 15px 'Sora', Inter, sans-serif; color: var(--hr-ink); }
.si-page-sub { margin: 0 0 16px; font-size: 13px; color: var(--hr-muted); }
.si-nav { display: flex; gap: 10px; margin-top: 8px; }
.si-nav .si-submit { flex: 1; }
.si-ghost { height: 54px; padding: 0 20px; border-radius: 13px; border: 1.5px solid var(--hr-border); background: var(--hr-surface); font: 650 14.5px Inter, sans-serif; color: var(--hr-body); cursor: pointer; transition: all .15s ease; }
.si-ghost:hover { border-color: var(--hr-primary); color: var(--hr-primary); }

/* ---- more field types ---- */
.si-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.si-field select, .si-field textarea { width: 100%; font: 500 15px Inter, sans-serif; color: var(--hr-ink); background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 13px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.si-field select { height: 56px; padding: 22px 36px 6px 44px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.si-field textarea { min-height: 92px; padding: 26px 14px 10px 44px; resize: vertical; }
.si-field select:focus, .si-field textarea:focus { border-color: var(--hr-primary); box-shadow: 0 0 0 4px rgba(var(--hr-primary-rgb), .14); }
.si-field select + label, .si-field textarea:focus + label, .si-field textarea:not(:placeholder-shown) + label, .si-field input[type="date"] + label { top: 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.si-field input[type="date"] { padding-right: 12px; }
.si-field.nolabel input { padding-top: 8px; }
.si-hint { margin: -8px 0 12px 4px; font-size: 11.5px; color: var(--hr-muted); }
.si-field-error { margin: -8px 0 12px 4px; font-size: 12px; font-weight: 600; color: var(--hr-danger); }
.si-field.invalid select, .si-field.invalid textarea { border-color: var(--hr-danger); }
.si-section-label { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font: 800 10.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-muted); }
.si-section-label::after { content: ""; flex: 1; height: 1px; background: var(--hr-border); }
.si-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.si-chips label { position: relative; cursor: pointer; }
.si-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.si-chips span { display: inline-flex; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--hr-border); font: 600 12.5px Inter, sans-serif; color: var(--hr-body); background: var(--hr-surface); transition: all .15s ease; }
.si-chips input:checked + span { border-color: var(--hr-primary); color: var(--hr-primary); background: var(--hr-primary-tint); }
.si-chips input:focus-visible + span { outline: 2px solid var(--hr-primary); outline-offset: 2px; }
.si-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; color: var(--hr-body); line-height: 1.5; cursor: pointer; }
.si-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--hr-primary); flex-shrink: 0; }

/* ---- password strength ---- */
.si-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: -4px 0 8px; }
.si-meter i { height: 5px; border-radius: 999px; background: var(--hr-border); transition: background .3s ease, transform .3s ease; }
.si-meter[data-score="1"] i:nth-child(-n+1) { background: #EF4444; }
.si-meter[data-score="2"] i:nth-child(-n+2) { background: #F97316; }
.si-meter[data-score="3"] i:nth-child(-n+3) { background: #EAB308; }
.si-meter[data-score="4"] i:nth-child(-n+4) { background: #10B981; }
.si-meter-label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: var(--hr-muted); }
.si-meter-label b { font-weight: 700; }
.si-rules { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.si-rules li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--hr-muted); transition: color .2s ease; }
.si-rules li::before { content: ""; width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--hr-border); transition: all .2s ease; }
.si-rules li.ok { color: var(--hr-success); }
.si-rules li.ok::before { border-color: var(--hr-success); background: var(--hr-success) 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* ---- success state ---- */
.si-success { text-align: center; padding: 10px 0; }
.si-success svg { width: 92px; height: 92px; margin-bottom: 14px; }
.si-success circle { fill: none; stroke: var(--hr-success); stroke-width: 3; stroke-dasharray: 290; stroke-dashoffset: 290; animation: si-draw .8s var(--si-ease) forwards; }
.si-success path { fill: none; stroke: var(--hr-success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: si-draw .5s var(--si-ease) .6s forwards; }
.si-success.pending circle, .si-success.pending path { stroke: #F59E0B; }
.si-success h2 { margin: 0 0 8px; font: 750 24px 'Sora', Inter, sans-serif; color: var(--hr-ink); letter-spacing: -.02em; }
.si-success p { margin: 0 auto 22px; max-width: 360px; font-size: 14px; color: var(--hr-muted); line-height: 1.6; }
.si-success .si-submit { max-width: 280px; margin: 0 auto; text-decoration: none; }
.si-timeline { list-style: none; margin: 0 auto 22px; padding: 0; max-width: 340px; text-align: left; }
.si-timeline li { display: flex; gap: 12px; padding: 0 0 14px; position: relative; font-size: 13px; color: var(--hr-body); }
.si-timeline li::before { content: ""; width: 12px; height: 12px; margin-top: 3px; flex-shrink: 0; border-radius: 50%; background: var(--hr-border); }
.si-timeline li.done::before { background: var(--hr-success); }
.si-timeline li.now::before { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }
.si-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 17px; bottom: 0; width: 2px; background: var(--hr-border); }
.si-timeline small { display: block; color: var(--hr-muted); font-size: 12px; }

@media (max-width: 560px) {
    .si-grid2, .si-rules, .si-perks { grid-template-columns: 1fr; }
    .si-wiz-step span { display: none; }
}