@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
}

:root {
    color-scheme: dark;
    --bg: #0e0c1d;
    --text: #f7f4ff;
    --muted: #aaa4ba;
    --line: rgba(255, 255, 255, .1);
    --purple: #9b7cff;
    --purple-light: #c6b7ff;
    --coral: #ff7489;
    --mint: #6ee7c2;
    --danger: #ff8ea0;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -10%, rgba(130, 93, 255, .17), transparent 38%),
        linear-gradient(160deg, #100d24 0%, #0c0b18 55%, #130e20 100%);
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.ambient {
    position: fixed;
    z-index: 0;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .12;
    pointer-events: none;
}
.ambient--one { top: -10rem; left: -10rem; background: #8a68ff; }
.ambient--two { right: -12rem; bottom: 2rem; background: #ff5d8f; }
.noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: .035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.activation-shell {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(100%, 650px);
    min-height: 100vh;
    min-height: 100svh;
    margin: 0 auto;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    perspective: 1400px;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    margin-bottom: 1.25rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: "Manrope", sans-serif;
    font-size: .93rem;
    font-weight: 800;
    text-decoration: none;
}
.brand__mark, .mini-brand {
    display: grid;
    place-items: center;
    color: #150f2e;
    background: linear-gradient(145deg, #f0eaff, #9c7cff);
    box-shadow: inset 0 1px rgba(255,255,255,.8), 0 7px 18px rgba(126,91,255,.3);
}
.brand__mark { width: 2rem; height: 2rem; border-radius: .68rem; transform: rotate(-7deg); }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .68rem;
    color: #cfc9df;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: rgba(255,255,255,.035);
    font-size: .69rem;
    font-weight: 600;
}
.status-pill i {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 4px rgba(110,231,194,.1), 0 0 14px rgba(110,231,194,.75);
}

.progress-wrap { margin: 0 0 .85rem; padding: 0 .2rem; }
.progress-copy {
    display: flex;
    justify-content: space-between;
    margin-bottom: .55rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.progress-track { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.progress-track span {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--purple), var(--coral));
    box-shadow: 0 0 16px rgba(155,124,255,.7);
    transition: width 500ms cubic-bezier(.22,1,.36,1);
}

.setup-card, .invalid-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1.6rem;
    background: linear-gradient(145deg, rgba(29,24,54,.9), rgba(18,16,34,.92));
    box-shadow: 0 30px 80px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.045);
    backdrop-filter: blur(24px);
}
.setup-card::before, .invalid-card::before {
    position: absolute;
    top: -8rem;
    right: -7rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: rgba(139,105,255,.11);
    content: "";
    filter: blur(15px);
    pointer-events: none;
}
.pages { position: relative; }
.setup-page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: min(550px, calc(100svh - 9.5rem));
    padding: 1.35rem;
}
.setup-page[hidden] { display: none; }

.setup-card.is-shuffling {
    pointer-events: none;
    transform-origin: 50% 68%;
    will-change: transform, opacity, box-shadow;
}
.setup-card.card-shuffle-forward-out { animation: card-shell-forward-out 340ms cubic-bezier(.4, 0, .5, 1) both; }
.setup-card.card-shuffle-forward-in { animation: card-shell-forward-in 340ms cubic-bezier(.22, 1, .36, 1) both; }
.setup-card.card-shuffle-back-out { animation: card-shell-back-out 340ms cubic-bezier(.4, 0, .5, 1) both; }
.setup-card.card-shuffle-back-in { animation: card-shell-back-in 340ms cubic-bezier(.22, 1, .36, 1) both; }

@keyframes card-shell-forward-out {
    0% { opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); transform: translate3d(0,0,0) rotateZ(0) scale(1); }
    45% { opacity: .96; box-shadow: 0 25px 52px rgba(0,0,0,.36); transform: translate3d(4%,-.65rem,2.5rem) rotateZ(1.8deg) scale(.995); }
    100% { opacity: 0; box-shadow: 0 8px 18px rgba(0,0,0,.12); transform: translate3d(-19%,1.1rem,-7rem) rotateZ(-5deg) scale(.95); }
}
@keyframes card-shell-forward-in {
    0% { opacity: 0; box-shadow: 0 8px 18px rgba(0,0,0,.12); transform: translate3d(19%,-1rem,-7rem) rotateZ(5deg) scale(.95); }
    66% { opacity: 1; box-shadow: 0 25px 52px rgba(0,0,0,.36); transform: translate3d(-1.2%,.1rem,1rem) rotateZ(-.4deg) scale(1.008); }
    100% { opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); transform: translate3d(0,0,0) rotateZ(0) scale(1); }
}
@keyframes card-shell-back-out {
    0% { opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); transform: translate3d(0,0,0) rotateZ(0) scale(1); }
    45% { opacity: .96; box-shadow: 0 25px 52px rgba(0,0,0,.36); transform: translate3d(-4%,-.65rem,2.5rem) rotateZ(-1.8deg) scale(.995); }
    100% { opacity: 0; box-shadow: 0 8px 18px rgba(0,0,0,.12); transform: translate3d(19%,1.1rem,-7rem) rotateZ(5deg) scale(.95); }
}
@keyframes card-shell-back-in {
    0% { opacity: 0; box-shadow: 0 8px 18px rgba(0,0,0,.12); transform: translate3d(-19%,-1rem,-7rem) rotateZ(-5deg) scale(.95); }
    66% { opacity: 1; box-shadow: 0 25px 52px rgba(0,0,0,.36); transform: translate3d(1.2%,.1rem,1rem) rotateZ(.4deg) scale(1.008); }
    100% { opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); transform: translate3d(0,0,0) rotateZ(0) scale(1); }
}

.hero-visual {
    position: relative;
    width: 15rem;
    height: 13.2rem;
    margin: .1rem auto .4rem;
    perspective: 620px;
    transform-style: preserve-3d;
}

.keychain-float {
    position: absolute;
    z-index: 2;
    inset: 0;
    transform-style: preserve-3d;
    animation: keychain-wander-x 19s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    will-change: transform;
}

.keychain-drift {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: keychain-wander-yz 23s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    will-change: transform;
}

.smart-tag {
    position: absolute;
    z-index: 2;
    top: .25rem;
    left: 4.25rem;
    width: 9.5rem;
    height: 11.4rem;
    transform-style: preserve-3d;
}

.smart-tag__tilt {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateX(9deg) rotateY(-11deg) rotateZ(7deg);
    transform-style: preserve-3d;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.smart-tag__photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(15px 24px 18px rgba(0, 0, 0, .48));
    transform: translateZ(2px);
}

.smart-tag__shine {
    position: absolute;
    z-index: 3;
    inset: 0;
    background: linear-gradient(112deg,
        transparent 22%,
        rgba(255,255,255,.05) 36%,
        rgba(255,255,255,.72) 48%,
        rgba(196,178,255,.36) 54%,
        transparent 68%);
    background-position: 150% 0;
    background-size: 300% 100%;
    pointer-events: none;
    transform: translateZ(8px);
    -webkit-mask: url("../img/keychain-backside.png") center / contain no-repeat;
    mask: url("../img/keychain-backside.png") center / contain no-repeat;
    animation: tag-shimmer 5.8s ease-in-out infinite;
}
.smart-tag__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .36rem;
    color: rgba(24,15,57,.8);
    font-size: .38rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.mini-brand { width: 1.15rem; height: 1.15rem; border-radius: .35rem; font-size: .55rem; }
.qr-symbol {
    position: absolute;
    z-index: 4;
    top: 3.8rem;
    left: 3rem;
    transform: translateZ(14px);
    display: grid;
    grid-template-columns: repeat(3, .86rem);
    grid-auto-rows: .86rem;
    gap: .25rem;
    padding: .55rem;
    border-radius: .7rem;
    background: rgba(255,255,255,.91);
    box-shadow: 0 10px 20px rgba(47,29,98,.22);
}
.qr-symbol i { border-radius: .15rem; background: #28184f; }
.qr-symbol i:nth-child(even) { transform: scale(.45); }
.qr-symbol i:nth-child(5) { border-radius: 50%; }
.smart-tag__caption {
    position: absolute;
    z-index: 1;
    bottom: .9rem;
    left: 0;
    width: 100%;
    color: rgba(27,17,61,.66);
    font-size: .34rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-align: center;
}
.keyring {
    position: absolute;
    z-index: 1;
    top: -1.7rem;
    left: 4.6rem;
    width: 4.7rem;
    height: 4.7rem;
    border: .36rem solid transparent;
    border-top-color: #d9d7e4;
    border-left-color: #8c8999;
    border-radius: 50%;
    box-shadow: inset 3px 3px 4px rgba(255,255,255,.35), -4px -2px 8px rgba(0,0,0,.25);
    transform: rotate(8deg);
    transform-origin: 82% 84%;
    animation: ring-hinge 11.5s linear infinite;
    will-change: transform;
}
.keyring::after {
    position: absolute;
    right: -1rem;
    bottom: -.55rem;
    width: 2.15rem;
    height: .72rem;
    border: .27rem solid #aaa6b6;
    border-radius: 99px;
    background: #524f5c;
    content: "";
    transform: rotate(50deg);
}
.orbit {
    position: absolute;
    inset: 1.4rem 0 0 2.2rem;
    width: 13rem;
    height: 10.3rem;
    border: 1px solid rgba(179,158,255,.18);
    border-radius: 50%;
    transform: rotate(-18deg);
}
.orbit span { position: absolute; top: 50%; left: -.25rem; width: .48rem; height: .48rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px rgba(255,116,137,.8); }
.signal {
    position: absolute;
    right: .9rem;
    bottom: 2.2rem;
    border: 2px solid transparent;
    border-top-color: rgba(255,255,255,.65);
    border-radius: 50%;
    transform: rotate(45deg);
    animation: signal-pulse 2s ease-out infinite;
}
.signal--one { width: 1.1rem; height: 1.1rem; }
.signal--two { width: 1.8rem; height: 1.8rem; right: .55rem; bottom: 1.85rem; animation-delay: 150ms; }
.signal--three { width: 2.5rem; height: 2.5rem; right: .2rem; bottom: 1.5rem; animation-delay: 300ms; }
@keyframes keychain-wander-x {
    0% { transform: translateX(-.95rem) rotateY(-8deg) rotateZ(-3deg); }
    100% { transform: translateX(1rem) rotateY(9deg) rotateZ(3.5deg); }
}

@keyframes keychain-wander-yz {
    0% { transform: translate3d(0, .38rem, -1.9rem) rotateX(-6deg); }
    100% { transform: translate3d(0, -1.72rem, 4.5rem) rotateX(8deg); }
}
@keyframes ring-hinge {
    0%, 100% { transform: rotate(8deg); }
    12.5% { transform: rotate(8.8deg); }
    25% { transform: rotate(9.5deg); }
    37.5% { transform: rotate(9.8deg); }
    50% { transform: rotate(9.4deg); }
    62.5% { transform: rotate(8.3deg); }
    75% { transform: rotate(7.2deg); }
    87.5% { transform: rotate(7.1deg); }
}
@keyframes tag-shimmer {
    0%, 18% { background-position: 150% 0; opacity: 0; }
    28% { opacity: .9; }
    58% { background-position: -50% 0; opacity: .75; }
    67%, 100% { background-position: -50% 0; opacity: 0; }
}
@keyframes signal-pulse { 0% { opacity: 0; transform: rotate(45deg) scale(.65); } 35% { opacity: .8; } 100% { opacity: 0; transform: rotate(45deg) scale(1.1); } }

.page-copy { margin-bottom: 1.45rem; }
.page-copy--center { text-align: center; }
.eyebrow {
    margin: 0 0 .55rem;
    color: var(--purple-light);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
h1 {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: clamp(1.75rem, 8vw, 2.65rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.05;
}
h1 span { color: transparent; background: linear-gradient(100deg, #bdabff, #ff8da1); background-clip: text; -webkit-background-clip: text; }
.lead { margin: .9rem 0 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }

.button-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    margin-top: auto;
    padding-top: 1.25rem;
}
.button-row--split { justify-content: space-between; }
.primary-button, .text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.45rem;
    border: 0;
    border-radius: 1rem;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}
.primary-button {
    width: 100%;
    gap: .6rem;
    padding: .85rem 1.2rem;
    color: #160f2e;
    background: linear-gradient(105deg, #bcaaff 0%, #a889ff 48%, #ff8da1 120%);
    box-shadow: 0 10px 30px rgba(126,88,255,.27), inset 0 1px rgba(255,255,255,.55);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.primary-button:hover { filter: brightness(1.06); box-shadow: 0 13px 35px rgba(126,88,255,.38); transform: translateY(-2px); }
.primary-button:active { transform: translateY(1px) scale(.99); }
.primary-button:focus-visible, .text-button:focus-visible, .reveal-button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(194,176,255,.7); outline-offset: 3px; }
.text-button { flex: 0 0 auto; gap: .4rem; min-height: 3rem; padding: .6rem .3rem; color: var(--muted); background: transparent; }
.button-row--split .primary-button { width: auto; min-width: 9.5rem; }

.step-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0;
    border: 0;
    border-radius: .62rem;
    transform: rotate(-4deg);
}
.step-icon svg, .edit-card svg, .support-links svg {
    width: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.step-icon svg { width: 1rem; }
.primary-button .arrow-icon,
.text-button .arrow-icon,
.edit-card .arrow-icon,
.support-links .arrow-icon {
    display: block;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.step-icon--link { color: #c5b7ff; background: rgba(150,116,255,.14); }
.step-icon--lock { color: #ff9baa; background: rgba(255,116,137,.11); }
.step-icon--support { color: #7ceaca; background: rgba(110,231,194,.1); }
.step-icon--error { color: var(--coral); background: rgba(255,116,137,.1); }

.eyebrow-row { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; }
.eyebrow-row--center { justify-content: center; }
.eyebrow-row .eyebrow { margin: 0; }

.field { display: block; margin-top: .15rem; }
.field__label { display: block; margin: 0 0 .55rem .1rem; color: #eae5f8; font-size: .77rem; font-weight: 700; }
.field__control {
    display: flex;
    align-items: center;
    min-height: 3.85rem;
    padding: 0 .95rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1rem;
    background: rgba(5,4,14,.35);
    box-shadow: inset 0 1px 6px rgba(0,0,0,.15);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field__control:focus-within { border-color: rgba(180,157,255,.7); box-shadow: 0 0 0 4px rgba(153,118,255,.1); }
.field.has-error .field__control { border-color: rgba(255,117,139,.75); box-shadow: 0 0 0 4px rgba(255,117,139,.08); }
.field__control > svg { flex: 0 0 auto; width: 1.25rem; margin-right: .72rem; fill: none; stroke: #7d758f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.field input { width: 100%; min-width: 0; padding: 1rem 0; color: var(--text); border: 0; outline: 0; background: transparent; font-size: 1rem; }
.field input::placeholder { color: #706a80; }
.field__hint, .field__error { display: block; min-height: 1.05rem; margin: .55rem .1rem 0; color: #827c91; font-size: .72rem; line-height: 1.4; }
.field__error:not(:empty) { color: var(--danger); }

.preview-chip {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .7rem;
    padding: .75rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: .95rem;
    background: rgba(255,255,255,.025);
}
.preview-chip__qr {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(3, .4rem);
    grid-auto-rows: .4rem;
    gap: .12rem;
    width: 2.25rem;
    height: 2.25rem;
    place-content: center;
    border-radius: .55rem;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 14px rgba(47,29,98,.22);
}
.preview-chip__qr i { border-radius: .08rem; background: #28184f; }
.preview-chip__qr i:nth-child(even) { transform: scale(.45); }
.preview-chip__qr i:nth-child(5) { border-radius: 50%; }
.preview-chip span:last-child { min-width: 0; }
.preview-chip small, .preview-chip strong { display: block; }
.preview-chip small { margin-bottom: .18rem; color: #7e788d; font-size: .66rem; }
.preview-chip strong { overflow: hidden; color: #dcd5ee; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }

.reveal-button { display: grid; flex: 0 0 auto; place-items: center; width: 2.5rem; height: 2.5rem; margin-right: -.45rem; padding: 0; color: #8a839b; border: 0; border-radius: .7rem; background: transparent; cursor: pointer; }
.reveal-button svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.eye-closed, .reveal-button.is-visible .eye-open { display: none; }
.reveal-button.is-visible .eye-closed { display: block; }
.password-meter { display: block; height: 3px; margin: .65rem .1rem 0; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.password-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--danger); transition: width 220ms ease, background 220ms ease; }
.privacy-note {
    display: flex;
    gap: .72rem;
    margin-top: .7rem;
    padding: .85rem;
    color: #9690a5;
    border: 1px solid rgba(110,231,194,.1);
    border-radius: .9rem;
    background: rgba(110,231,194,.045);
    font-size: .72rem;
    line-height: 1.45;
}
.privacy-note svg { flex: 0 0 auto; width: 1.2rem; fill: none; stroke: var(--mint); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.privacy-note strong { color: #c8c2d5; }
.primary-button--activate.is-loading { pointer-events: none; opacity: .8; }
.button-loader { display: none; width: 1.1rem; height: 1.1rem; border: 2px solid rgba(21,15,46,.3); border-top-color: #150f2e; border-radius: 50%; animation: spin 700ms linear infinite; }
.is-loading .button-loader { display: block; }
.is-loading .button-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.passkey-mark {
    display: grid;
    place-items: center;
    width: 7.5rem;
    height: 7.5rem;
    margin: .4rem auto 1.3rem;
    color: #cbbcff;
    border: 1px solid rgba(184,164,255,.15);
    border-radius: 2rem;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.1), transparent 38%), linear-gradient(145deg, rgba(155,124,255,.17), rgba(110,231,194,.055));
    box-shadow: 0 22px 50px rgba(44,27,94,.2), inset 0 1px rgba(255,255,255,.1);
    transform: rotate(-4deg);
}
.passkey-mark svg { width: 3.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.passkey-benefits { display: grid; gap: .55rem; margin-top: .2rem; padding: .85rem; border: 1px solid rgba(255,255,255,.07); border-radius: .95rem; background: rgba(255,255,255,.022); }
.passkey-benefits div { display: flex; align-items: center; gap: .6rem; color: #aaa3b8; font-size: .72rem; }
.passkey-benefits svg { flex: 0 0 auto; width: 1rem; fill: none; stroke: var(--mint); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.passkey-status { min-height: 1.1rem; margin: .75rem 0 0; color: #817a90; font-size: .68rem; line-height: 1.4; text-align: center; }
.passkey-status--error { color: #ff9baa; }
.passkey-status--success {
    color: transparent;
    background: linear-gradient(105deg,#91eccf,#6ee7c2);
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 700;
}
.passkey-action { position: relative; }
.passkey-action svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.passkey-action i { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(21,15,46,.3); border-top-color: #150f2e; border-radius: 50%; animation: spin 700ms linear infinite; }
.passkey-action.is-loading svg, .passkey-action.is-loading span { display: none; }
.passkey-action.is-loading i { display: block; }
.passkey-action.is-complete { background: linear-gradient(105deg,#91eccf,#6ee7c2); }
.passkey-action:disabled { cursor: default; opacity: .68; transform: none; }
.passkey-actions--complete #passkey-skip { display: none; }
.passkey-actions--complete .passkey-action { width: 100%; }

.success-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 8rem;
    height: 8rem;
    margin: .9rem auto 1.4rem;
    border: 1px solid rgba(110,231,194,.14);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110,231,194,.15), rgba(110,231,194,.025) 60%, transparent 61%);
}
.success-mark::before, .success-mark::after { position: absolute; border: 1px solid rgba(110,231,194,.14); border-radius: 50%; content: ""; animation: success-ring 2.2s ease-out infinite; }
.success-mark::before { inset: .75rem; }
.success-mark::after { inset: -.6rem; animation-delay: 500ms; }
.success-mark span {
    display: grid;
    z-index: 1;
    place-items: center;
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 1.2rem;
    color: #10291f;
    background: linear-gradient(145deg, #a3f8df, #5bd2af);
    box-shadow: 0 13px 35px rgba(83,215,176,.25), inset 0 1px rgba(255,255,255,.7);
    transform: rotate(-5deg);
    animation: success-pop 650ms cubic-bezier(.22,1.5,.36,1) both;
}
.success-mark svg { width: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
@keyframes success-pop { from { opacity: 0; transform: rotate(-20deg) scale(.4); } }
@keyframes success-ring { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }

.edit-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .95rem;
    border: 1px solid rgba(184,164,255,.18);
    border-radius: 1rem;
    background: rgba(153,118,255,.075);
    text-decoration: none;
    transition: border-color 180ms ease, transform 180ms ease;
}
.edit-card:hover { border-color: rgba(184,164,255,.35); transform: translateY(-2px); }
.edit-card__icon, .support-links__icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; color: #c4b4ff; border-radius: .8rem; background: rgba(174,145,255,.12); }
.edit-card small, .edit-card strong, .edit-card em { display: block; }
.edit-card small { margin-bottom: .18rem; color: #8e879d; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.edit-card strong { color: #e9e2ff; font-size: .93rem; }
.edit-card em { margin-top: .3rem; color: #9690a5; font-size: .7rem; font-style: normal; line-height: 1.4; }
.edit-card__arrow { color: #9d91b5; }

.support-links { display: grid; gap: .65rem; }
.support-links > a, .support-links > div {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .95rem;
    background: rgba(255,255,255,.025);
    text-decoration: none;
}
.support-links > a { transition: border-color 180ms ease, transform 180ms ease; }
.support-links > a:hover { border-color: rgba(110,231,194,.3); transform: translateY(-2px); }
.support-links__icon { width: 2.5rem; height: 2.5rem; color: var(--mint); background: rgba(110,231,194,.09); }
.support-links small, .support-links strong { display: block; }
.support-links small { margin-bottom: .16rem; color: #7e788d; font-size: .65rem; }
.support-links strong { overflow-wrap: anywhere; color: #ded8ea; font-size: .82rem; }
.finish-note { margin: 1rem 0 0; color: #817a90; font-size: .72rem; text-align: center; }
.finish-note span { margin-right: .3rem; color: var(--coral); }

.page-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 1.2rem .2rem 0; color: #5f596c; font-size: .63rem; }
.page-footer a { color: #8b849a; text-decoration: none; }
.invalid-card { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 2rem 1.35rem; text-align: center; }
.invalid-card .lead { margin-bottom: 1.8rem; }
.invalid-card .step-icon { width: 3.15rem; height: 3.15rem; margin: 0 auto 1.5rem; border-radius: 1rem; }
.invalid-card .step-icon svg { width: 1.4rem; }

@media (min-width: 560px) {
    .activation-shell { justify-content: center; padding-inline: 1.5rem; }
    .topbar { margin-bottom: 1.5rem; }
    .setup-page { min-height: 645px; padding: 2rem 2.25rem; }
    .hero-visual { width: 17rem; height: 14.5rem; transform: scale(1.08); }
    h1 { font-size: 2.5rem; }
    .lead { font-size: 1rem; }
    .page-footer { padding-top: 1.4rem; }
}

@media (max-height: 720px) and (max-width: 559px) {
    .topbar { margin-bottom: .65rem; }
    .progress-wrap { margin-bottom: .55rem; }
    .setup-page { min-height: calc(100svh - 8rem); }
    .hero-visual { height: 10.8rem; transform: scale(.83); transform-origin: top center; margin-bottom: -1rem; }
    .page-copy { margin-bottom: 1rem; }
    .lead { margin-top: .65rem; line-height: 1.45; }
    .button-row { padding-top: .85rem; }
    .page-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}