/* Homepage hero/cards, ecosystem overlay and pet identity component styles. */
/* =========================================================
   HOME HERO — exact 1920×1080 composition from supplied UI
   Rebuilds the desktop card fan with the Figma coordinates so
   every card keeps a readable exposed area instead of being
   buried by the centre card.
   ========================================================= */
@media (min-width: 721px) {
    .hero {
        height: min(1080px, 100svh);
        min-height: 760px;
    }

    /* 1920 × 1080 design stage. JS scales this stage to the desktop width.
     Keeping the original coordinate system preserves the intended fan geometry. */
    .hero-deck {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 0;
        width: 1920px;
        height: 1080px;
        overflow: visible;
        perspective: none;
        transform-style: flat;
        transform-origin: 50% 100%;
        transform: translateX(-50%) scale(var(--hero-deck-scale, 1));
    }

    .eco-card,
    .eco-card--academy,
    .eco-card--wash,
    .eco-card--xiaota,
    .eco-card--social,
    .eco-card--territory {
        left: var(--card-x);
        top: var(--card-y);
        right: auto;
        bottom: auto;
        width: 465px;
        height: 600px;
        border-radius: 60px;
        transform-origin: 0 0;
        --stack-x: 77px;
        --stack-y: 866.746px;
        --fan-shift: 0px;
        --fan-y: 0px;
        --stack-shift: 0px;
        --stack-rot: -10deg;
        --lift: -18px;
        transform: translate(calc(var(--stack-x) - var(--card-x)), calc(var(--stack-y) - var(--card-y))) rotate(-10deg) scale(.985);
    }

    /* Exact card top-left coordinates and rotations from the supplied SVG. */
    .eco-card--academy {
        --card-x: 77px;
        --card-y: 866.746px;
        --fan-rot: -10deg;
        --fan-delay: 0s;
        z-index: 2;
    }

    .eco-card--wash {
        --card-x: 426px;
        --card-y: 766.531px;
        --fan-rot: -5deg;
        --fan-delay: .14s;
        z-index: 3;
    }

    .eco-card--xiaota {
        --card-x: 728px;
        --card-y: 666px;
        --fan-rot: 0deg;
        --fan-delay: .28s;
        z-index: 6;
    }

    .eco-card--social {
        --card-x: 1032px;
        --card-y: 726px;
        --fan-rot: 5deg;
        --fan-delay: .42s;
        z-index: 4;
    }

    .eco-card--territory {
        --card-x: 1386px;
        --card-y: 786.121px;
        --fan-rot: 10deg;
        --fan-delay: .56s;
        z-index: 2;
    }

    .hero-deck.is-fanned:not(.fan-complete) .eco-card {
        animation: fanOpenFigma 1.16s var(--ease) var(--fan-delay) both;
    }

    .hero-deck.is-fanned.fan-complete .eco-card {
        opacity: 1;
        transform: rotate(var(--fan-rot));
    }

    @keyframes fanOpenFigma {
        0% {
            opacity: 0;
            transform: translate(calc(var(--stack-x) - var(--card-x)), calc(var(--stack-y) - var(--card-y))) rotate(-10deg) scale(.985);
        }
        12% {
            opacity: 1
        }
        78% {
            opacity: 1;
            transform: translate(5px, -5px) rotate(calc(var(--fan-rot) + .55deg)) scale(1.004);
        }
        100% {
            opacity: 1;
            transform: rotate(var(--fan-rot));
        }
    }

    /* Hover must not collapse the fan or push one card over its neighbours. */
    .hero-deck.is-fanned.fan-complete .eco-card:hover,
    .hero-deck.is-fanned.fan-complete .eco-card:focus-visible {
        transform: translateY(-16px) rotate(var(--fan-rot)) scale(1.012);
        z-index: 9;
    }

    /* Figma text geometry: the exposed portions remain readable on all five cards. */
    .eco-card__body {
        left: 34px;
        right: 34px;
        top: 43px;
    }

    .eco-card h2,
    .eco-card--xiaota h2 {
        font-size: 31px;
    }

    .eco-card__tag {
        margin-bottom: 30px;
        font-size: 13px;
    }

    .eco-card p {
        max-width: 390px;
        font-size: 13px;
        line-height: 1.74;
    }

    .eco-card__body--feature {
        left: 28px;
        right: 28px;
        top: 42px;
        grid-template-columns:minmax(0, 1fr) 168px;
        gap: 18px;
    }

    .eco-card__qr {
        margin-top: 54px;
    }

    .eco-card__qr img {
        width: 168px;
        height: 168px;
        border-radius: 20px;
    }

    .eco-card__down {
        bottom: 82px;
    }

    /* The outer cards intentionally extend below the fold, but the ticker no longer
     hides their readable area. */
    .hero-ticker {
        bottom: 0;
        height: 46px;
    }
}

/* =========================================================
   HOME CARD MATERIAL + QR HOVER — targeted correction
   ========================================================= */
/* Card surface: fine diagonal pinstripes leaning like "/". */


/* Xiaota scan area: QR is not part of the initial layout and only appears when
   the pointer/focus is on the “扫码体验” trigger itself. */
.eco-card__aside {
    position: relative;


}

.eco-card__qr {


    margin-top: 0 !important;


}

.eco-card__qr::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 28px;
    width: 16px;
    height: 16px;
    border-radius: 3px 0 0 0;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 6px rgba(0, 0, 0, .035);
}

.eco-card__qr img {
    position: relative;
    z-index: 1;


}

/* Override the older aside-wide hover rule: hide by default even if the empty
   aside region is crossed, then show only from the label trigger. */
.eco-card__aside:hover .eco-card__qr,
.eco-card__aside:focus-within .eco-card__qr {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.94);
    pointer-events: none;
}

.eco-card__scan--trigger:hover + .eco-card__qr,
.eco-card__scan--trigger:focus-visible + .eco-card__qr {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.eco-card__scan--trigger {
    position: relative;
    z-index: 21;
}

@media (min-width: 721px) {
    /* Keep the original SVG-driven card composition; only make the QR column a
     compact trigger column so the hidden QR no longer occupies visible space. */
    .eco-card__body--feature {
        grid-template-columns:minmax(0, 1fr) auto;
        gap: 16px;
    }

    .eco-card__aside {
        min-width: max-content;
    }
}

@media (max-width: 720px) {
    /* Mobile also follows the same reveal rule rather than forcing the QR visible. */
    .eco-card__qr {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: 118px;
        height: 118px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(.94);
        pointer-events: none;
    }

    .eco-card__qr img {
        width: 118px;
        height: 118px;
        border-radius: 16px;
    }

    .eco-card__scan--trigger:hover + .eco-card__qr,
    .eco-card__scan--trigger:focus-visible + .eco-card__qr {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   HOME CARD POLISH — material / upright hover / unified scan
   Targeted to the hero ecosystem cards only.
   ========================================================= */


.eco-card__body--feature {
    grid-template-columns:minmax(0, 1fr) auto !important;
    align-items: start;
    column-gap: 16px;
}

.eco-card__copy {
    min-width: 0;
}

.eco-card__aside {
    min-width: max-content;
    width: max-content;
    align-items: flex-end;
    overflow: visible;
    gap: 0;
}

.eco-card__scan--trigger {

    border-radius: 999px;
    padding: 5px 8px 5px 5px;

    color: rgba(255, 255, 255, .90);

    transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}

.eco-card__scan--trigger:hover,
.eco-card__scan--trigger:focus-visible,
.eco-card__aside:hover .eco-card__scan--trigger,
.eco-card__aside:focus-within .eco-card__scan--trigger {

    color: #fff;


}

/* All five cards now use exactly the same scan interaction. The aside itself is
   only as large as the trigger, so this still reveals from the scan area rather
   than from an empty half of the card. */
.eco-card__qr {
    position: absolute;
    z-index: 40;
    top: calc(100% + 14px);
    right: 0;
    margin: 0 !important;
    width: 168px;
    height: 168px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.94);
    transform-origin: 84% 0;
    pointer-events: none;
    transition: opacity .20s ease, transform .30s var(--ease), visibility 0s linear .30s;
}

.eco-card__qr img {
    width: 168px;
    height: 168px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .34);
}

.eco-card__aside:hover .eco-card__qr,
.eco-card__aside:focus-within .eco-card__qr,
.eco-card__scan--trigger:hover + .eco-card__qr,
.eco-card__scan--trigger:focus-visible + .eco-card__qr {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}

.eco-card__detail {
    position: absolute;
    z-index: 8;
    left: 34px;
    bottom: 56px;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .62);
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s var(--ease), transform .34s var(--ease);
    pointer-events: none;
}

.eco-card__detail b {
    font-weight: 400;
    font-size: 14px;
}

@media (min-width: 721px) {
    /* The hovered card becomes the "front/centre" card: upright, slightly lifted,
     fully legible and above its neighbours, matching the supplied UI behavior. */
    .hero-deck.is-fanned.fan-complete .eco-card:hover,
    .hero-deck.is-fanned.fan-complete .eco-card:focus-visible {
        /* Every card has a different fan Y position. When it becomes the active
       upright card, compensate that original offset so its top edge lands on
       the centre-card baseline (666px). This keeps all upright cards at the
       same visual height instead of only lifting each one by a fixed amount. */
        transform: translateY(calc(666px - var(--card-y))) rotate(0deg) scale(1.018) !important;
        z-index: 30 !important;
        filter: brightness(1.08) saturate(1.02);
        border-color: rgba(255, 255, 255, .52);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 0 60px rgba(255, 255, 255, .025),
        0 30px 82px rgba(0, 0, 0, .34);
    }

    /* 当 hovered 卡变成正面/中间卡时，顶部对齐 baseline=666，高度 600，
     底部落到 1266 已被 .hero{overflow:hidden}（1080 视口）裁切。
     原 bottom:56 (=y≈1210) 落在裁切线之下，所以"查看平台详情"在 PC
     hover 后完全看不见。这里用 transform:translateY(-160px) 把该元素
     从原位置抬进 1080 视口（约 y≈1050），同时借助现有
     `transition:opacity .28s ...,transform .34s ...` 平滑出现。 */
    .eco-card:hover .eco-card__detail,
    .eco-card:focus-visible .eco-card__detail {
        opacity: 1;
        transform: translateY(-160px);
        pointer-events: auto;
    }

    .eco-card:hover .eco-card__down,
    .eco-card:focus-visible .eco-card__down {
        opacity: 0;
    }
}

@media (max-width: 720px) {
    .eco-card__body--feature {
        grid-template-columns:minmax(0, 1fr) auto !important;
    }

    .eco-card__aside {
        position: relative;
        right: auto;
        top: auto;
    }

    .eco-card__qr {
        width: 118px;
        height: 118px;
        top: calc(100% + 10px);
    }

    .eco-card__qr img {
        width: 118px;
        height: 118px;
        border-radius: 16px;
    }

    .eco-card__detail {
        display: none;
    }
}


/* =========================================================
   HERO BACKGROUND SYNC — ecosystem card / hero image link
   Two independent layers crossfade so switching directly from
   one card to another never flashes the default background.
   ========================================================= */
.hero__background {
    z-index: 0;
}

.hero__background-layer {
    position: absolute;
    z-index: 0;

    background-color: #171617;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: visible;


    pointer-events: none;

}

.hero__background-layer.is-active {
    opacity: 1;
    transition-delay: 0s;
}

.hero__vignette {
    z-index: 1;
    transition: background .5s ease;
}

/* Give the background change a little more presence while keeping
   the brand mark and translucent cards readable. */
.hero.has-ecosystem-background .hero__vignette {
    background: linear-gradient(to bottom, rgba(13, 12, 14, .72) 0%, rgba(13, 12, 14, .38) 29%, rgba(12, 12, 13, .27) 49%, rgba(12, 12, 13, .52) 68%, rgba(11, 11, 12, .90) 100%),
    radial-gradient(ellipse at 50% 39%, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .17) 48%, rgba(0, 0, 0, .62) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .hero__background-layer {
        transition: opacity .18s linear, visibility 0s linear .18s;
        transform: scale(1.02);
    }

    .hero__background-layer.is-active {
        transform: scale(1.02);
    }
}

/* =========================================================
   ECOSYSTEM DETAIL — compact dark editorial panel
   Based on the five supplied 1920×1080 UI frames:
   left identity/copy + central visual story + ecosystem switch.
   The switch is moved to the left and the dialog is reduced to
   roughly two-thirds of the original full-screen presentation.
   ========================================================= */
.eco-dialog {

    width: min(1280px, calc(100vw - 96px));
    height: min(720px, calc(100vh - 80px));
    max-width: none;
    max-height: none;

    border-radius: 28px;
    padding: 0;
    overflow: hidden;

    color: #f2f2ef;
}


.eco-dialog::backdrop {
    background: rgba(3, 4, 5, .72);
    backdrop-filter: blur(12px) saturate(.8);
}

.eco-dialog__close {
    right: 18px;
    top: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    color: #e9e9e6;
    font-size: 23px;
    backdrop-filter: blur(14px);
}

.eco-dialog__close:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .22);
    transform: rotate(8deg);
}

.eco-detail {
    height: 100%;
    display: grid;
    grid-template-columns:92px minmax(250px, 290px) minmax(0, 1fr);
    grid-template-areas:"switch copy visual";
    gap: 28px;
    padding: 34px 36px 34px 26px;
    isolation: isolate;
    overflow: hidden;
}

.eco-detail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
}


/* Left ecosystem rail — derived from the right-side icon rail in the supplied UI. */
.eco-detail__switcher {
    grid-area: switch;
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: relative;
    z-index: 10;
    padding: 46px 8px 22px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.eco-detail__switcher::before {
    content: "ECOSYSTEM";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .34);
    writing-mode: vertical-rl;
}

.eco-detail__switcher button {
    position: relative;
    width: 64px;
    height: 68px;
    padding: 7px 4px 5px;
    display: grid;
    grid-template-rows:38px 1fr;
    justify-items: center;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: #8f9295;
    cursor: pointer;
    transition: transform .28s var(--ease), background .28s, border-color .28s, box-shadow .28s, color .28s;
}

.eco-detail__switcher img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    filter: saturate(.92) brightness(.9);
    transition: filter .25s var(--ease), transform .25s var(--ease);
}

.eco-detail__switcher span {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
    opacity: 1;
    pointer-events: none;
    transition: none;
}

.eco-detail__switcher button:hover, .eco-detail__switcher button:focus-visible {
    transform: translateX(3px);
    background: rgba(255, 255, 255, .045);
    color: #e6e7e7;
}

.eco-detail__switcher button:hover img, .eco-detail__switcher button:focus-visible img {
    filter: saturate(1) brightness(1.06);
    transform: scale(1.03);
}

.eco-detail__switcher button::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 16px;
    pointer-events: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}

.eco-detail__switcher button.is-active {
    color: #fff;

}

.eco-detail__switcher button.is-active::after {
    inset: -2px;
}

.eco-detail__switcher button.is-active img {
    filter: saturate(1.08) brightness(1.08);
}

/* Copy column keeps the hierarchy and breathing room of the supplied UI, but in a dark editorial treatment. */
.eco-detail__copy {
    grid-area: copy;
    min-width: 0;
    padding: 62px 0 26px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    border-right: 1px solid rgba(255, 255, 255, .055);
}

.eco-detail__eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 8px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--eco-accent) 60%, #8c8f91);
}

.eco-detail__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
}

.eco-detail__mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .06);
}

.eco-detail__title-row h2 {
    margin: 0;
    font-size: clamp(30px, 2.5vw, 39px);
    font-weight: 520;
    line-height: 1.05;
    letter-spacing: -.045em;
    color: #f4f4f1;
}

.eco-detail__lead {
    max-width: 258px;
    margin: 24px 22px 0 0;
    font-size: 13px;
    line-height: 1.78;
    color: #b9bbbd;
    text-align: left;
}

.eco-detail__meta {
    display: grid;
    gap: 6px;
    margin-top: 23px;
    padding-top: 18px;
    max-width: 258px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 10px;
    line-height: 1.6;
    color: #74777a;
}

.eco-detail__meta p {
    margin: 0;
}

.eco-detail__meta b {
    font-weight: 500;
    color: #929597;
}

.eco-detail__qr-stack {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.eco-detail__qr-stack figure {
    margin: 0;
    width: 78px;
}

.eco-detail__qr-stack img {
    display: block;
    width: 78px;
    height: 78px;
    object-fit: cover;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

.eco-detail__qr-stack figcaption {
    margin-top: 7px;
    font-size: 8px;
    color: #74777a;
    letter-spacing: .04em;
    text-align: center;
}

.eco-detail__qr-stack::after {
    content: "扫码体验";
    display: block;
    margin-bottom: 28px;
    font-size: 9px;
    letter-spacing: .12em;
    color: #8d9092;
}

/* Visual area preserves each of the five supplied compositions, but becomes a contained 'story canvas'. */
.eco-detail__visual {
    grid-area: visual;
    position: relative;
    align-self: stretch;
    min-width: 0;
    height: auto;
}

.eco-detail__visual::before {
    content: "";
    position: absolute;

}


/* Compact the UI-derived image compositions to fit the smaller modal without losing their identity. */


.eco-visual--territory img {
    transition: transform 1.1s var(--ease), filter .55s;
}


.eco-dialog.is-switching .eco-detail__visual {
    opacity: 0;
    transform: translateY(7px) scale(.988);
}


/* Smaller desktop/laptop fitting: remain compact rather than returning to the old full-screen modal. */
@media (max-width: 1380px) {
    .eco-dialog {
        width: min(1180px, calc(100vw - 56px));
        height: min(680px, calc(100vh - 54px));
    }

    .eco-detail {
        grid-template-columns:82px 250px minmax(0, 1fr);
        gap: 22px;
        padding: 28px 28px 28px 20px;
    }

    .eco-detail__switcher button {
        width: 58px;
        height: 62px;
        grid-template-rows:34px 1fr;
    }

    .eco-detail__switcher img {
        width: 34px;
        height: 34px;
    }

    .eco-detail__copy {
        padding-top: 52px;
    }

    .eco-detail__lead {
        font-size: 12px;
    }

    .eco-detail__visual {
        margin-right: 18px;
    }
}

@media (max-width: 980px) {
    .eco-dialog {
        width: calc(100vw - 24px);
        height: calc(100vh - 24px);
        border-radius: 20px;
        overflow: auto;
    }

    .eco-detail {
        min-height: 100%;
        display: grid;
        grid-template-columns:70px minmax(0, 1fr);
        grid-template-areas:"switch copy" "visual visual";
        gap: 18px;
        padding: 24px 20px 30px;
    }

    .eco-detail__switcher {
        grid-area: switch;
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        flex-direction: column;
        padding: 34px 6px 12px;
        border-right: 1px solid rgba(255, 255, 255, .07);
    }

    .eco-detail__switcher::before {
        top: 4px;
    }

    .eco-detail__switcher button, .eco-detail__switcher img {
        width: auto;
        height: auto;
    }

    .eco-detail__switcher button {
        width: 54px;
        height: 58px;
    }

    .eco-detail__switcher img {
        width: 32px;
        height: 32px;
    }

    .eco-detail__switcher span {
        display: block;
        font-size: 7px;
    }

    .eco-detail__copy {
        grid-area: copy;
        padding: 34px 0 12px;
        border-right: 0;
    }

    .eco-detail__lead, .eco-detail__meta {
        max-width: 520px;
    }

    .eco-detail__qr-stack {
        display: flex;
        margin-top: 22px;
    }

    .eco-detail__visual {
        grid-area: visual;
        height: 520px;
        margin: 12px 8px 8px;
    }

    .eco-visual {
        min-height: 0;
        height: 100%;
    }

    .eco-detail__waves {
        inset: 20% -20% -5% 4%;
    }
}

@media (max-width: 620px) {
    .eco-dialog {
        width: calc(100vw - 14px);
        height: calc(100vh - 14px);
        border-radius: 16px;
    }

    .eco-detail {
        grid-template-columns:1fr;
        grid-template-areas:"switch" "copy" "visual";
        padding: 64px 14px 20px;
        gap: 14px;
    }

    .eco-detail__switcher {
        position: absolute;
        left: 14px;
        right: 60px;
        top: 12px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 5px;
        padding: 0;
        border: 0;
        overflow-x: auto;
    }

    .eco-detail__switcher::before {
        display: none;
    }

    .eco-detail__switcher button {
        width: 48px;
        height: 45px;
        display: block;
        padding: 5px;
    }

    .eco-detail__switcher img {
        width: 34px;
        height: 34px;
    }

    .eco-detail__switcher span {
        display: none;
    }

    .eco-detail__copy {
        padding: 10px 4px 0;
    }

    .eco-detail__title-row h2 {
        font-size: 29px;
    }

    .eco-detail__lead {
        font-size: 12px;
        line-height: 1.68;
    }

    .eco-detail__meta {
        font-size: 9px;
        margin-top: 16px;
        padding-top: 14px;
    }

    /* ≤620px 单列布局下，让“扫码体验”始终可见。
     注：responsive.css 的 ≤768px !important 规则会先生效（页面里最后加载），
         此处只对极小屏做一次更紧凑的视觉补偿。*/
    .eco-detail__qr-stack {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 18px 0 6px !important;
        padding: 14px 14px !important;
        border-top: 1px solid rgba(255, 255, 255, .08) !important;
        background: rgba(255, 255, 255, .018) !important;
        border-radius: 12px !important;
    }

    .eco-detail__qr-stack figure {
        width: 84px !important;
        flex: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .eco-detail__qr-stack img {
        width: 84px !important;
        height: 84px !important;
        border-radius: 12px !important;
    }

    .eco-detail__qr-stack figcaption {
        display: block !important;
        margin-top: 6px !important;
        font-size: 8.5px !important;
        color: rgba(255, 255, 255, .6) !important;
        text-align: center !important;
    }

    .eco-detail__qr-stack::after {
        content: "扫码体验\A长按或截图识别小程序码" !important;
        white-space: pre !important;
        display: block !important;
        flex: 1 1 auto !important;
        margin: 0 0 0 2px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        letter-spacing: .04em !important;
        color: rgba(255, 255, 255, .78) !important;
    }

    .eco-detail__visual {
        height: 390px;
        margin: 10px 4px;
    }

    .eco-detail__visual::before {
        inset: -7px;
        border-radius: 20px;
    }

    .eco-visual {
        border-radius: 14px;
    }

}

/* =========================================================
   ECOSYSTEM DETAIL — wheel navigation + brand atmosphere
   + centered QR + UI-frame visual reconstruction
   ========================================================= */
html.eco-modal-open,
body.eco-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.eco-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

.eco-dialog {
    --eco-accent: #d5d5d5;
    --eco-rgb: 205 205 205;
    overscroll-behavior: contain;

    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* Brand colors follow the supplied five UI icons.
   Select is black/neutral — not green. */
.eco-dialog[data-active-eco="xiaota"] {
    --eco-accent: #d2d2d2;
    --eco-rgb: 205 205 205;
}

.eco-dialog[data-active-eco="wash"] {
    --eco-accent: #e53a3e;
    --eco-rgb: 229 58 62;
}

.eco-dialog[data-active-eco="academy"] {
    --eco-accent: #18a96b;
    --eco-rgb: 24 169 107;
}

.eco-dialog[data-active-eco="social"] {
    --eco-accent: #416fd4;
    --eco-rgb: 65 111 212;
}

.eco-dialog[data-active-eco="territory"] {
    --eco-accent: #d0a23b;
    --eco-rgb: 208 162 59;
}

.eco-detail::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, .032), transparent 24%),
    radial-gradient(circle at 17% 82%, rgb(var(--eco-rgb) / .15), transparent 31%),
    radial-gradient(circle at 72% 22%, rgb(var(--eco-rgb) / .055), transparent 34%);
}

.eco-detail__switcher button.is-active {
    background: rgb(var(--eco-rgb) / .075);
    border-color: rgb(var(--eco-rgb) / .28);
}

.eco-detail__switcher button.is-active::after {
    border-color: color-mix(in srgb, var(--eco-accent) 78%, white 8%);
    box-shadow: 0 0 0 3px rgb(var(--eco-rgb) / .075), 0 0 24px rgb(var(--eco-rgb) / .13);
}

/* QR occupies the lower information field as one centered visual anchor. */
@media (min-width: 981px) {
    .eco-detail__qr-stack {
        flex: 1 1 auto;
        width: 100%;
        min-height: 150px;
        margin: 18px 0 0;
        padding: 0 22px 0 0;
        display: grid;
        grid-template-rows:auto auto;
        place-content: center;
        justify-items: center;
        align-items: center;
        gap: 9px;
    }

    .eco-detail__qr-stack figure {
        grid-row: 1;
        width: 88px;
        margin: 0;
    }

    .eco-detail__qr-stack img {
        width: 88px;
        height: 88px;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .08);
    }

    .eco-detail__qr-stack figcaption {
        display: none;
    }

    .eco-detail__qr-stack::after {
        grid-row: 2;
        content: "扫码体验";
        display: block;
        margin: 0;
        font-size: 8px;
        letter-spacing: .14em;
        color: #8d9092;
        text-align: center;
    }
}

/* The visual frame now behaves like the supplied UI artwork: a quiet frame
   around the composition, not a thick dark monitor bezel. */
.eco-detail__visual {
    margin: 20px 26px 20px 0;
}

.eco-detail__visual::before {


    border-color: rgba(255, 255, 255, .065);
}


/* 小它优选 — neutral, tall multi-screen editorial arrangement from the UI. */
.eco-visual--xiaota {
    background: radial-gradient(circle at 48% 42%, rgba(255, 255, 255, .95), rgba(239, 241, 244, .96) 66%),
    #eef0f2;
}


/* 小它洗护 — restore the four-screen relationship shown in the red UI frame. */
.eco-visual--wash {
    background: linear-gradient(145deg, #f6f7f9, #eceff3);
}

.eco-visual--wash::before {
    left: 34%;
    top: -1%;
    font-size: 132px;
    color: #dfe3e9;
    opacity: .78;
}


/* 宠派学院 — the reference is a light certificate collage with generous gaps. */
.eco-visual--academy {
    overflow: hidden;
    background: url("../images/ecosystem/detail/detail-waves.svg") 48% 48%/125% 125% no-repeat,
    #f5f3f1;
}


/* 人宠社交 — reconstruct the supplied T-WALK frame:
   light canvas + large black lower panel + phone/hand floating above it. */
.eco-visual--social {
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #f3f4f6 0%, #f0f1f3 100%);
    color: #fff;
}

.eco-visual--social::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 5%;
    bottom: 0;
    height: 58%;
    border-radius: 32px 32px 0 0;
    background: #191919;
    z-index: 0;
}


/* 它领地 — preserve the supplied architectural crop rather than darkening it. */
.eco-visual--territory {
    background: #111;
    overflow: hidden;
}

.eco-visual--territory img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    filter: saturate(.96) contrast(1.015) brightness(.98);
}

.eco-visual--territory:hover img {
    transform: scale(1.01);
    filter: saturate(1) contrast(1.02) brightness(1);
}

@media (max-width: 980px) {
    body.eco-modal-open {
        position: fixed;
    }

    .eco-detail__visual {
        margin: 12px 8px 8px;
    }


}


/* =========================================================
   ECOSYSTEM DETAIL — exact UI visual frames + motion polish
   1) Every large visual uses a crop from its supplied UI frame.
   2) QR is fixed to one desktop anchor independent of copy length.
   3) Animated flowing contour lines surround the content.
   4) Modal gets restrained specular edge, depth and accent glow.
   5) Wheel/click navigation uses directional depth transitions.
   ========================================================= */

/* ---------- shell material ---------- */
.eco-dialog {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .105);


}

.eco-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;

    -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

}

.eco-dialog::after {
    content: "";
    position: absolute;
    z-index: 0;


    top: -1px;
    height: 1px;
    pointer-events: none;

    filter: blur(.15px);
}

.eco-dialog__close {
    z-index: 40;
    border-color: rgba(255, 255, 255, .14);
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* ---------- animated contour field ---------- */
.eco-detail__waves {


    transform: none !important;


}

.eco-detail__waves::before,
.eco-detail__waves::after {


    inset: -8%;


    will-change: transform, background-position, opacity;
}

.eco-detail__waves::after {


    background-size: 119% 119%;
    transform: rotate(4deg) scale(1.04);

}

@keyframes ecoContourFlowA {
    0% {
        transform: translate3d(-1.8%, 1.2%, 0) rotate(-1.2deg) scale(1.015);
        background-position: 47% 51%
    }
    35% {
        transform: translate3d(.8%, -1.4%, 0) rotate(.7deg) scale(1.035);
        background-position: 51% 48%
    }
    68% {
        transform: translate3d(1.6%, .6%, 0) rotate(-.4deg) scale(1.025);
        background-position: 54% 52%
    }
    100% {
        transform: translate3d(-.5%, -.8%, 0) rotate(1deg) scale(1.045);
        background-position: 49% 49%
    }
}

@keyframes ecoContourFlowB {
    0% {
        transform: translate3d(1.4%, -1%, 0) rotate(3deg) scale(1.045);
        background-position: 53% 48%
    }
    50% {
        transform: translate3d(-1.1%, 1.2%, 0) rotate(5deg) scale(1.02);
        background-position: 48% 53%
    }
    100% {
        transform: translate3d(.4%, -.5%, 0) rotate(2deg) scale(1.06);
        background-position: 51% 50%
    }
}

/* ---------- copy & QR geometry ---------- */
@media (min-width: 981px) {
    .eco-detail__copy {
        padding-bottom: 186px;
    }

    .eco-detail__qr-stack {
        position: absolute;
        left: 0;
        right: 22px;
        bottom: 34px;
        width: auto;
        height: 126px;
        min-height: 126px;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-rows:90px 18px;
        place-items: center;
        align-content: center;
        gap: 7px;
    }

    .eco-detail__qr-stack figure {
        grid-row: 1;
        width: 90px;
        height: 90px;
        margin: 0;
    }

    .eco-detail__qr-stack img {
        width: 90px;
        height: 90px;
        border-radius: 13px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255, 255, 255, .095),
        0 0 28px rgb(var(--eco-rgb) / .055);
    }

    .eco-detail__qr-stack::after {
        grid-row: 2;
        margin: 0;
        align-self: center;
        line-height: 1;
    }
}

/* ---------- exact visual content from supplied UI frames ---------- */
.eco-detail__visual {


    transform-origin: center center;

}

.eco-detail__visual::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: -12%;
    bottom: -12%;
    left: -34%;
    width: 24%;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: skewX(-14deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .105), transparent);
    filter: blur(1px);
}

.eco-visual::after {
    box-shadow: none !important;
}

.eco-ui-reference {


    z-index: 5;
    display: block;


}


/* Remove legacy pseudo compositions; the supplied reference crop is now the visual source of truth. */
.eco-visual--wash::before, .eco-visual--social::before {
    display: none !important;
}

.eco-visual--xiaota,
.eco-visual--wash,
.eco-visual--academy,
.eco-visual--social,
.eco-visual--territory {
    background: transparent !important;
}

/* ---------- directional high-end wheel transition ---------- */

.eco-dialog.is-switching .eco-detail__copy,
.eco-dialog.is-switching .eco-detail__visual {
    opacity: 0;
    filter: blur(5px) saturate(.82);
}


.eco-dialog.is-entering .eco-detail__copy,
.eco-dialog.is-entering .eco-detail__visual {
    opacity: 0;
    filter: blur(6px) saturate(.86);

}


.eco-dialog:not(.is-entering):not(.is-switching) .eco-detail__copy,
.eco-dialog:not(.is-entering):not(.is-switching) .eco-detail__visual {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1);
}

.eco-dialog:not(.is-entering):not(.is-switching) .eco-detail__visual::after {
    animation: ecoVisualSheen .66s cubic-bezier(.2, .7, .2, 1) 1 both;
}

@keyframes ecoVisualSheen {
    0% {
        left: -34%;
        opacity: 0
    }
    18% {
        opacity: .7
    }
    55% {
        opacity: .26
    }
    100% {
        left: 116%;
        opacity: 0
    }
}

/* Active ecosystem chip also gets a very subtle specular treatment. */


/* Keep motion restrained for accessibility. */
@media (prefers-reduced-motion: reduce) {
    .eco-detail__waves::before,
    .eco-detail__waves::after {
        animation: none !important;
    }

    .eco-detail__copy,
    .eco-detail__visual {
        transition: opacity .18s linear !important;
    }

    .eco-detail__visual::after {
        display: none;
    }

    .eco-ui-reference {
        transition: none !important;
    }
}

@media (max-width: 980px) {
    .eco-detail__waves {
        inset: 20% -28% -8% 0;
    }

    .eco-detail__waves::after {
        display: none;
    }

    .eco-ui-reference {
        object-fit: cover;
    }
}


/* =========================================================
   ECOSYSTEM DETAIL — visual accuracy / organic rings / page-sheet transition
   Supplied UI frames are the visual source of truth.
   ========================================================= */

/* --- Modal material: cleaner edge, controlled depth, no "glow toy" look. --- */
.eco-dialog {
    border-color: rgba(255, 255, 255, .12) !important;
    background: radial-gradient(ellipse at 72% 16%, rgba(255, 255, 255, .045), transparent 34%),
    radial-gradient(circle at 17% 79%, rgb(var(--eco-rgb) / .13), transparent 32%),
    linear-gradient(148deg, #1a1c1f 0%, #121417 54%, #0b0d0f 100%) !important;
    box-shadow: 0 58px 150px rgba(0, 0, 0, .72),
    0 18px 48px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 255, 255, .025),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .58) !important;
}

.eco-dialog::before {
    opacity: .72 !important;
    background: linear-gradient(
            132deg,
            rgba(255, 255, 255, .30) 0%,
            rgba(255, 255, 255, .075) 13%,
            transparent 31%,
            transparent 63%,
            rgb(var(--eco-rgb) / .13) 79%,
            rgba(255, 255, 255, .14) 100%
    ) !important;
}

.eco-dialog::after {
    left: 11% !important;
    right: 11% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), rgba(255, 255, 255, .075), transparent) !important;
}

/* --- TRUE closed ripple rings.
       Three concentric organic-ring layers breathe and drift around the detail canvas. --- */
.eco-detail__waves {
    position: absolute !important;
    inset: -16% -14% -25% 17% !important;
    z-index: -1 !important;
    opacity: .68 !important;
    overflow: visible !important;
    pointer-events: none !important;
    mix-blend-mode: screen !important;
    filter: none !important;
    background: url("../images/ecosystem/detail/eco-ripple-rings.svg") center/100% 100% no-repeat !important;
    transform-origin: 56% 52% !important;
    animation: ecoRippleBase 16s cubic-bezier(.45, 0, .55, 1) infinite alternate !important;
}

.eco-detail__waves::before,
.eco-detail__waves::after {
    content: "" !important;
    position: absolute !important;
    background: url("../images/ecosystem/detail/eco-ripple-rings.svg") center/100% 100% no-repeat !important;
    pointer-events: none !important;
    transform-origin: 52% 50% !important;
}

.eco-detail__waves::before {
    inset: 5% !important;
    opacity: .42 !important;
    animation: ecoRippleInner 12.5s cubic-bezier(.45, 0, .55, 1) infinite alternate !important;
}

.eco-detail__waves::after {
    inset: -8% !important;
    opacity: .23 !important;
    animation: ecoRippleOuter 20s cubic-bezier(.45, 0, .55, 1) infinite alternate-reverse !important;
}

@keyframes ecoRippleBase {
    0% {
        transform: translate3d(-.7%, .4%, 0) scale(.965) rotate(-1.2deg)
    }
    45% {
        transform: translate3d(.45%, -.55%, 0) scale(1.018) rotate(.7deg)
    }
    100% {
        transform: translate3d(.7%, .3%, 0) scale(.985) rotate(-.25deg)
    }
}

@keyframes ecoRippleInner {
    0% {
        transform: translate3d(.5%, -.5%, 0) scale(.94) rotate(1deg)
    }
    50% {
        transform: translate3d(-.45%, .35%, 0) scale(1.035) rotate(-.8deg)
    }
    100% {
        transform: translate3d(.25%, .55%, 0) scale(.975) rotate(.35deg)
    }
}

@keyframes ecoRippleOuter {
    0% {
        transform: translate3d(-.4%, .25%, 0) scale(.91) rotate(-1.3deg)
    }
    55% {
        transform: translate3d(.55%, -.45%, 0) scale(1.055) rotate(.9deg)
    }
    100% {
        transform: translate3d(-.2%, .3%, 0) scale(.97) rotate(-.25deg)
    }
}

/* --- Copy / QR geometry: QR remains at the same physical anchor regardless of text length. --- */
@media (min-width: 981px) {
    .eco-detail__copy {
        padding-bottom: 174px !important;
    }

    .eco-detail__qr-stack {
        position: absolute !important;
        left: 0 !important;
        right: 22px !important;
        bottom: 30px !important;
        width: auto !important;
        height: 126px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-rows:92px 18px !important;
        place-items: center !important;
        align-content: center !important;
        gap: 8px !important;
    }

    .eco-detail__qr-stack figure {
        width: 92px !important;
        height: 92px !important;
        margin: 0 !important;
    }

    .eco-detail__qr-stack img {
        width: 92px !important;
        height: 92px !important;
        border-radius: 13px !important;
    }

    .eco-detail__qr-stack::after {
        margin: 0 !important;
        align-self: center !important;
        line-height: 1 !important;
    }
}

/* --- Showcase: the visual itself fully occupies the red-box area.
       No inner white gutter / no inset picture / no hover zoom. --- */
.eco-detail__visual {
    overflow: hidden !important;
    border-radius: 21px !important;
    /* background: #0d0f11 !important; */
    clip-path: inset(0 0 0 0 round 21px);
    transition: opacity .42s cubic-bezier(.22, 1, .36, 1),
    transform .62s cubic-bezier(.22, 1, .36, 1),
    clip-path .62s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform, opacity, clip-path;
}

/* No card material behind the artwork: no fill, no border, no inner shadow.
   The ripple rings behind the detail canvas stay visible. */
.eco-detail__visual::before {
    display: none !important;
}

.eco-detail__visual::after {
    display: none !important;
}

.eco-visual {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    /* background: #0d0f11 !important; */
    box-shadow: none !important;
}

.eco-ui-reference {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: translateY(-50%) !important;
    filter: none !important;
    transition: none !important;
}

.eco-detail__visual:hover .eco-ui-reference {
    transform: translateY(-50%) !important;
}

/* Small per-design framing adjustments; image still covers 100% of the visual window. */
.eco-visual--xiaota .eco-ui-reference {
    object-position: center 50% !important;
}

.eco-visual--wash .eco-ui-reference {
    object-position: center 50% !important;
}

.eco-visual--academy .eco-ui-reference {
    object-position: center 50% !important;
}

.eco-visual--social .eco-ui-reference {
    object-position: center 50% !important;
}

.eco-visual--territory .eco-ui-reference {
    object-position: center 50% !important;
}

/* --- Wheel transition: editorial page-sheet reveal.
       No sheen, no blur, no fake lighting.
       Current sheet collapses in scroll direction; next sheet grows from the opposite edge. --- */
.eco-detail__copy {
    transition: opacity .34s cubic-bezier(.22, 1, .36, 1),
    transform .58s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform, opacity;
}

.eco-dialog.is-switching .eco-detail__copy {
    opacity: 0 !important;
}

.eco-dialog.is-switching[data-switch-direction="next"] .eco-detail__copy {
    transform: translate3d(0, -20px, 0) !important;
}

.eco-dialog.is-switching[data-switch-direction="prev"] .eco-detail__copy {
    transform: translate3d(0, 20px, 0) !important;
}

.eco-dialog.is-switching[data-switch-direction="next"] .eco-detail__visual {
    opacity: .24 !important;
    transform: translate3d(0, -12px, 0) scale(.994) !important;
    clip-path: inset(0 0 100% 0 round 21px) !important;
}

.eco-dialog.is-switching[data-switch-direction="prev"] .eco-detail__visual {
    opacity: .24 !important;
    transform: translate3d(0, 12px, 0) scale(.994) !important;
    clip-path: inset(100% 0 0 0 round 21px) !important;
}

.eco-dialog.is-entering .eco-detail__copy,
.eco-dialog.is-entering .eco-detail__visual {
    transition: none !important;
}

.eco-dialog.is-entering[data-switch-direction="next"] .eco-detail__copy {
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) !important;
}

.eco-dialog.is-entering[data-switch-direction="prev"] .eco-detail__copy {
    opacity: 0 !important;
    transform: translate3d(0, -22px, 0) !important;
}

.eco-dialog.is-entering[data-switch-direction="next"] .eco-detail__visual {
    opacity: .2 !important;
    transform: translate3d(0, 18px, 0) scale(1.008) !important;
    clip-path: inset(100% 0 0 0 round 21px) !important;
}

.eco-dialog.is-entering[data-switch-direction="prev"] .eco-detail__visual {
    opacity: .2 !important;
    transform: translate3d(0, -18px, 0) scale(1.008) !important;
    clip-path: inset(0 0 100% 0 round 21px) !important;
}

.eco-dialog:not(.is-switching):not(.is-entering) .eco-detail__copy {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

.eco-dialog:not(.is-switching):not(.is-entering) .eco-detail__visual {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    clip-path: inset(0 0 0 0 round 21px) !important;
}

/* The active icon change also stays restrained. */
.eco-detail__switcher button.is-active {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .30),
    0 0 20px rgb(var(--eco-rgb) / .10),
    inset 0 1px 0 rgba(255, 255, 255, .075) !important;
}

/* Accessibility / smaller screens */
@media (prefers-reduced-motion: reduce) {
    .eco-detail__waves,
    .eco-detail__waves::before,
    .eco-detail__waves::after {
        animation: none !important;
    }

    .eco-detail__copy,
    .eco-detail__visual {
        transition: opacity .18s linear !important;
        clip-path: inset(0) !important;
        transform: none !important;
    }
}

@media (max-width: 980px) {
    .eco-detail__waves {
        inset: 10% -28% -12% -2% !important;
    }

    .eco-detail__waves::after {
        display: block !important;
    }
}


/* =========================================================
   GLOBAL ECOSYSTEM OVERLAY
   - The top/footer ecosystem navigation opens one shared dialog in place.
   - Current page navigation is visually suspended while the overlay is open.
   - Desktop shell scales by viewport tier; mobile remains near full-screen.
   ========================================================= */
.main-nav a.is-overlay-active {
    color: #fff;
}

.main-nav a.is-overlay-active::after {
    transform: translateX(-50%) scale(1);
}

body.eco-modal-open .main-nav a.is-active:not(.is-overlay-active) {
    color: #747474;
}

body.eco-modal-open .main-nav a.is-active:not(.is-overlay-active)::after {
    transform: translateX(-50%) scale(0);
}

@media (min-width: 1500px) and (min-height: 820px) {
    .eco-dialog {
        width: min(1360px, calc(100vw - 140px)) !important;
        height: min(760px, calc(100svh - 100px)) !important;
    }
}

@media (min-width: 921px) and (max-width: 1499px) {
    .eco-dialog {
        width: min(1160px, calc(100vw - 56px)) !important;
        height: min(680px, calc(100svh - 54px)) !important;
    }
}

@media (max-width: 720px) {
    body.eco-modal-open .main-nav a.is-active:not(.is-overlay-active) {
        color: #a5a5a5;
    }

    .main-nav a.is-overlay-active {
        color: #fff;
    }
}

@media (max-width: 620px) {
    /* Global overlay must expose all five ecosystems on mobile; the rail scrolls horizontally when needed. */
    .eco-dialog .eco-detail__switcher button:nth-child(n/**/+4) {
        display: block;
    }
}

/* =========================================================
   HOME CARDS — 90% TRANSPARENT FROSTED GLASS / SUBTLE DIAGONAL GRAIN
   Fan geometry and existing interactions remain untouched.
   ========================================================= */

.eco-card,
.eco-card--xiaota {
    /* 90% transparent glass: only 10% graphite fill; backdrop treatment carries readability. */
    background-color: rgba(45, 47, 49, .10) !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: center !important;
    background-blend-mode: normal !important;

    /* Slightly dimensional white edge: crisp outer hairline + inner top highlight. */
    border: 1px solid rgba(255, 255, 255, .42) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .18),
    0 4px 12px rgba(0, 0, 0, .10),
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 1px 0 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(255, 255, 255, .08) !important;

    /* Frost the scene behind the transparent cards instead of hiding it with a dark fill. */
    -webkit-backdrop-filter: blur(12px) saturate(.92) brightness(.80) !important;
    backdrop-filter: blur(12px) saturate(.92) brightness(.80) !important;

    filter: none !important;
    will-change: auto !important;

    transition: transform .44s cubic-bezier(.22, .78, .27, 1),
    border-color .24s ease,
    opacity .24s ease !important;
}

/* Fine diagonal grain remains extremely light so the glass stays transparent. */
.eco-card::before {
    inset: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    opacity: 1 !important;
    background: repeating-linear-gradient(
            114deg,
            rgba(255, 255, 255, .045) 0px,
            rgba(255, 255, 255, .045) 1px,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0) 5px
    ) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055) !important;
    pointer-events: none !important;
}

/* A tiny top sheen strengthens the white rim without turning into a gradient panel. */
.eco-card::after {
    inset: 1px !important;
    height: 44% !important;
    border-radius: inherit !important;
    opacity: .50 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0)) !important;
    pointer-events: none !important;
}

/* Typography: slightly cooler but less glaring than . */
.eco-card h2,
.eco-card--xiaota h2 {
    color: rgba(255, 255, 255, .98) !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, .23) !important;
}

.eco-card__tag {
    color: rgba(239, 242, 243, .76) !important;
}

.eco-card p {
    color: rgba(224, 228, 230, .70) !important;
}

/* Scan button keeps its function but loses the bright pill treatment. */
.eco-card__scan--trigger {
    border: 1px solid rgba(238, 242, 243, .16) !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: none !important;
}

.eco-card__scan--trigger:hover,
.eco-card__scan--trigger:focus-visible,
.eco-card__aside:hover .eco-card__scan--trigger,
.eco-card__aside:focus-within .eco-card__scan--trigger {
    border-color: rgba(244, 247, 248, .28) !important;
    background: rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Right-side fan cards mirror their content: copy on the right, scan trigger on the left. */
@media (min-width: 721px) {
    .eco-card--social .eco-card__body--feature,
    .eco-card--territory .eco-card__body--feature {
        grid-template-columns:auto minmax(0, 1fr) !important;
    }

    .eco-card--social .eco-card__aside,
    .eco-card--territory .eco-card__aside {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-items: flex-start !important;
    }

    .eco-card--social .eco-card__copy,
    .eco-card--territory .eco-card__copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: right !important;
    }

    .eco-card--social .eco-card__copy p,
    .eco-card--territory .eco-card__copy p {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .eco-card--social .eco-card__qr,
    .eco-card--territory .eco-card__qr {
        left: 0 !important;
        right: auto !important;
        transform-origin: 16% 0 !important;
    }

    .eco-card--social .eco-card__qr::before,
    .eco-card--territory .eco-card__qr::before {
        left: 28px !important;
        right: auto !important;
    }

    .eco-card--social .eco-card__detail,
    .eco-card--territory .eco-card__detail {
        left: auto !important;
        right: 34px !important;
    }
}

/* Desktop hover stays upright + same-height as previously approved,
   but all 3D/perspective/tilt is removed. */
@media (min-width: 721px) {
    .hero-deck {
        perspective: none !important;
        transform-style: flat !important;
    }

    .hero-deck.is-fanned.fan-complete .eco-card {
        transform: rotate(var(--fan-rot)) !important;
        transform-style: flat !important;
        backface-visibility: visible !important;
    }

    .hero-deck.is-fanned.fan-complete .eco-card:hover,
    .hero-deck.is-fanned.fan-complete .eco-card:focus-visible {
        /* Same top baseline as the centre card; no rotateX/Y/Z or perspective. */
        transform: translateY(calc(658px - var(--card-y))) rotate(0deg) scale(1.008) !important;
        z-index: 30 !important;
        filter: none !important;
        border-color: rgba(255, 255, 255, .62) !important;
        box-shadow: 0 28px 58px rgba(0, 0, 0, .30),
        0 8px 20px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 1px 0 0 rgba(255, 255, 255, .13),
        inset -1px 0 0 rgba(255, 255, 255, .10),
        inset 0 -1px 0 rgba(255, 255, 255, .10) !important;
    }

    /* No :has(), no neighbour filter repaint. The hovered card wins via z-index/shadow. */
}

/* Mobile gets exactly the same dark material, with lighter shadow cost. */
@media (max-width: 720px) {
    .eco-card,
    .eco-card--xiaota {
        border-color: rgba(255, 255, 255, .38) !important;
        -webkit-backdrop-filter: blur(9px) saturate(.92) brightness(.82) !important;
        backdrop-filter: blur(9px) saturate(.92) brightness(.82) !important;
        box-shadow: 0 16px 34px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(255, 255, 255, .07) !important;
    }
}

/* =========================================================
   HERO BACKGROUND PERFORMANCE
   Preserve the card→background crossfade, remove full-screen filter/zoom work.
   ========================================================= */
.hero__background-layer {
    inset: 0 !important;
    transform: none !important;
    filter: none !important;
    will-change: opacity !important;
    contain: paint;
    transition: opacity .56s cubic-bezier(.20, .72, .20, 1) !important;
}

.hero__background-layer.is-active {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .hero__background-layer {
        transition: opacity .16s linear !important;
    }
}

/* JS pauses continuous animations when their section is off-screen. */
.is-animation-paused {
    animation-play-state: paused !important
}

/* Homepage header brand mark: the former hero logo now lives with the wordmark. */
@media (max-width: 1200px) {
    .wordmark--with-mark {
        gap: 14px;
    }

    .wordmark__mark {
        width: 60px;
    }
}

@media (max-width: 720px) {
    .wordmark--with-mark {
        gap: 10px;
    }

    .wordmark__mark {
        width: 46px;
    }

    .wordmark__copy {
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .wordmark__mark {
        width: 42px;
    }

    .wordmark--with-mark {
        gap: 9px;
    }
}


/* =========================================================
   PET IDENTITY OVERLAY — production pet-record lookup
   Graphite glass, champagne-gold identity signal and a real-data card stage.
   UI consumes only the normalized pet record view model; backend field changes
   belong in the adapter inside app.js.
   ========================================================= */
.main-nav {
    gap: clamp(28px, 3.15vw, 58px);
}

body.pet-id-modal-open {
    overflow: hidden;
}

.main-nav a[data-pet-id-open] {
    white-space: nowrap;
}

.main-nav a.is-overlay-active {
    color: #fff;
}

.main-nav a.is-overlay-active::after {
    transform: translateX(-50%) scale(1);
}

body.pet-id-modal-open .main-nav a.is-active:not(.is-overlay-active) {
    color: #a5a5a5;
}

body.pet-id-modal-open .main-nav a.is-active:not(.is-overlay-active)::after {
    transform: translateX(-50%) scale(0);
}

.pet-id-dialog {
    width: min(1320px, calc(100vw - 56px));
    max-width: none;
    height: min(790px, calc(100dvh - 56px));
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    overflow: visible;
    color: #f4f0e8;
    background: transparent;
}

.pet-id-dialog::backdrop {
    background: rgba(4, 5, 6, .78);
    backdrop-filter: blur(18px) saturate(.78);
}

.pet-id-panel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(234, 221, 188, .22);
    border-radius: 30px;
    background: radial-gradient(circle at 78% 16%, rgba(218, 194, 138, .13), transparent 31%),
    radial-gradient(circle at 15% 88%, rgba(124, 144, 150, .10), transparent 28%),
    linear-gradient(145deg, rgba(24, 26, 28, .985), rgba(9, 11, 12, .995));
    box-shadow: 0 42px 120px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: petIdEnter .42s cubic-bezier(.2, .78, .2, 1) both;
}

@keyframes petIdEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.pet-id-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, .035), transparent 22%, transparent 76%, rgba(230, 205, 145, .035));
}

.pet-id-panel__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .35) 48%, transparent 86%);
}

.pet-id-close {
    position: absolute;
    z-index: 5;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .035);
    backdrop-filter: blur(10px);
    transition: .25s var(--ease);
}

.pet-id-close:hover {
    border-color: rgba(234, 221, 188, .45);
    background: rgba(234, 221, 188, .08);
    transform: rotate(4deg);
}

.pet-id-close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1px;
    background: #eee6d4;
    transform: translate(-50%, -50%) rotate(45deg);
}

.pet-id-close span + span {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pet-id-head {
    position: relative;
    z-index: 2;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 82px 0 42px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.pet-id-head__signal {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7f8385;
    font-size: 12px;
    letter-spacing: .14em;
}

.pet-id-head__signal i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6bd7e;
    box-shadow: 0 0 0 5px rgba(214, 189, 126, .08), 0 0 22px rgba(214, 189, 126, .4);
}

.pet-id-layout {
    position: relative;
    z-index: 2;
    height: calc(100% - 92px);
    display: grid;
    grid-template-columns:minmax(0, .88fr) minmax(500px, 1.12fr);
}

.pet-id-query {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 58px 52px 40px 52px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.pet-id-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    color: #817d73;
}

.pet-id-kicker span {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border: 1px solid rgba(220, 197, 143, .24);
    border-radius: 50%;
    font-size: 11px;
    color: #d7c28e;
}

.pet-id-kicker b {
    font-size: 11px;
    letter-spacing: .2em;
    font-weight: 500;
}

.pet-id-query h2 {
    margin: 0;
    font-size: clamp(36px, 3vw, 50px);
    line-height: 1.17;
    font-weight: 450;
    letter-spacing: -.055em;
    color: #f5f1e8;
}

.pet-id-query__lead {
    max-width: 500px;
    margin: 18px 0 30px;
    color: #8f9293;
    font-size: 17px;
    line-height: 1.8;
}

.pet-id-form label > span {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    color: #737779;
    letter-spacing: .08em;
}

.pet-id-input-wrap {
    position: relative;
    display: grid;
    grid-template-columns:44px auto minmax(0, 1fr) auto auto;
    align-items: center;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 15px;
    background: rgba(2, 3, 4, .32);
    transition: .25s var(--ease);
    overflow: hidden;
}

.pet-id-input-wrap:focus-within {
    border-color: rgba(220, 196, 139, .42);
    box-shadow: 0 0 0 4px rgba(220, 196, 139, .05), inset 0 0 28px rgba(220, 196, 139, .025);
}

.pet-id-input-wrap small {
    justify-self: end;
    padding-right: 14px;
    color: #6d7071;
    font-size: 12px;
    letter-spacing: .13em;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.pet-id-prefix {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 0 0 16px;
    color: #d3bd83;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .05em;
    user-select: none;
}

.pet-id-input-wrap input {
    min-width: 0;
    height: 100%;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eee8dc;
    font-size: 16px;
    letter-spacing: .035em;
}

.pet-id-input-wrap input::placeholder {
    color: #565a5c;
}

.pet-id-input-wrap button {
    height: 46px;
    margin-right: 8px;
    padding: 0 20px;
    border: 1px solid rgba(229, 211, 168, .2);
    border-radius: 10px;
    background: #d5bd82;
    color: #191a1b;
    font-size: 14px;
    font-weight: 600;
    transition: .24s var(--ease);
}

.pet-id-input-wrap .pet-id-submit:hover {
    background: #ead7a5;
    transform: translateY(-1px);
}

.pet-id-input-wrap button b {
    margin-left: 9px;
    font-size: 14px;
}

.pet-id-input-wrap .pet-id-clear {
    margin-right: 0;
    width: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8c8f90;
    font-size: 16px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.pet-id-input-wrap .pet-id-clear:hover {
    color: #dcdcdc;
    transform: none;
}

.pet-id-form.is-loading .pet-id-input-wrap button {
    pointer-events: none;
    opacity: .55;
}

.pet-id-form.is-loading .pet-id-input-wrap .pet-id-clear {
    display: none;
}

.pet-id-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 42px;
    margin-top: 14px;
    color: #74787a;
    font-size: 14px;
    line-height: 1.6;
}

.pet-id-status i {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: #555a5c;
}

.pet-id-status[data-tone="loading"] {
    color: #b5aa91
}

.pet-id-status[data-tone="loading"] i {
    background: #d6bd7e;
    animation: petIdPulse 1s ease-in-out infinite;
}

.pet-id-status[data-tone="success"] {
    color: #9cc0a3
}

.pet-id-status[data-tone="success"] i {
    background: #76b686;
    box-shadow: 0 0 12px rgba(118, 182, 134, .3);
}

.pet-id-status[data-tone="warning"] {
    color: #c4af7a
}

.pet-id-status[data-tone="warning"] i {
    background: #d6bd7e;
}

.pet-id-status[data-tone="error"] {
    color: #d19991
}

.pet-id-status[data-tone="error"] i {
    background: #c77d73;
}

@keyframes petIdPulse {
    50% {
        opacity: .35;
        transform: scale(.75)
    }
}

.pet-id-assurance {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.pet-id-assurance > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: 15px 16px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .018);
}

.pet-id-assurance > div > b {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(214, 189, 126, .22);
    border-radius: 50%;
    color: #c8b37e;
    font-size: 9px;
    font-weight: 500;
}

.pet-id-assurance > div > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.pet-id-assurance strong {
    color: #aaa79f;
    font-size: 13px;
    font-weight: 500;
}

.pet-id-assurance small {
    color: #5f6466;
    font-size: 11.5px;
    line-height: 1.6;
}


.pet-id-stage {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 40px 36px 72px;
    perspective: 1400px;
    background: radial-gradient(circle at 55% 42%, rgba(213, 189, 130, .085), transparent 34%),
    radial-gradient(circle at 66% 64%, rgba(255, 255, 255, .025), transparent 38%);
}

.pet-id-stage::before {
    content: "π";
    position: absolute;
    right: -10px;
    bottom: -110px;
    color: rgba(231, 216, 180, .028);
    font: 700 430px/1 Georgia, serif;
    pointer-events: none;
}

.pet-id-stage__orbit {
    position: absolute;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(214, 189, 126, .09);
    border-radius: 50%;
    transform: rotate(-14deg);
    opacity: .62;
    transition: opacity .45s var(--ease), filter .45s var(--ease);
}

.pet-id-stage__orbit::before, .pet-id-stage__orbit::after {
    content: "";
    position: absolute;
    inset: 55px;
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.pet-id-stage__orbit::after {
    inset: 125px;
    border-color: rgba(214, 189, 126, .07);
}

.pet-id-stage__orbit i {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d6bd7e;
    box-shadow: 0 0 14px rgba(214, 189, 126, .35);
}

.pet-id-stage__orbit i:nth-child(1) {
    left: 58px;
    top: 112px
}

.pet-id-stage__orbit i:nth-child(2) {
    right: 76px;
    bottom: 96px
}

.pet-id-stage__orbit i:nth-child(3) {
    left: 50%;
    bottom: -3px;
    opacity: .45
}

.pet-id-stage[data-state="idle"] .pet-id-stage__orbit, .pet-id-stage[data-state="focused"] .pet-id-stage__orbit {
    animation: petOrbitIdle 26s linear infinite;
}

.pet-id-stage[data-state="querying"] .pet-id-stage__orbit {
    opacity: .92;
    filter: drop-shadow(0 0 16px rgba(214, 189, 126, .08));
    animation: petOrbitQuery 11s linear infinite;
}

.pet-id-stage[data-state="success"] .pet-id-stage__orbit {
    animation: petOrbitConfirm .9s cubic-bezier(.2, .72, .2, 1) both;
}

@keyframes petOrbitIdle {
    to {
        transform: rotate(346deg)
    }
}

@keyframes petOrbitQuery {
    to {
        transform: rotate(706deg)
    }
}

@keyframes petOrbitConfirm {
    0% {
        transform: rotate(-14deg) scale(.96);
        opacity: .45
    }
    45% {
        opacity: 1
    }
    100% {
        transform: rotate(38deg) scale(1.035);
        opacity: .62
    }
}

.pet-card-stack {
    --pet-tilt-x: 0deg;
    --pet-tilt-y: 0deg;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    transition: transform .18s ease-out, opacity .5s ease;
}

/* Tech card stack (landscape) — visible by default */
.pet-card-stack--tech {
    --pet-card-ratio: 85.6 / 53.98;
    --pet-card-width: clamp(400px, 82%, 540px);
    width: min(100%, 650px);
    height: 440px;
    z-index: 2;
    transform: translate(-50%, -50%) perspective(1200px) rotateX(var(--pet-tilt-x)) rotateY(var(--pet-tilt-y));
}

/* Passport card stack (portrait) — hidden until success */
.pet-card-stack--passport {
    --pet-card-ratio: 426.85 / 595.26;
    --pet-card-width: clamp(270px, 72%, 390px);
    width: var(--pet-card-width);
    aspect-ratio: var(--pet-card-ratio);
    height: auto;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.92);
}

.pet-id-stage[data-state="success"] .pet-card-stack--tech {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) perspective(1200px) scale(.94);
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* ===== Tech card (dark) ===== */
.pet-identity-card-back, .pet-identity-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--pet-card-width);
    aspect-ratio: var(--pet-card-ratio);
    height: auto;
    overflow: hidden;
    border-radius: 24px;
    transform-origin: center;
    transition: transform .58s cubic-bezier(.2, .72, .2, 1), opacity .45s ease, border-color .4s ease, box-shadow .5s ease;
    backface-visibility: hidden;
    will-change: transform;
}

.pet-identity-card-back {
    z-index: 1;
    border: 1px solid rgba(255, 244, 211, .48);
    color: #332816;
    background: radial-gradient(circle at 22% 16%, rgba(255, 255, 255, .28), transparent 29%),
    linear-gradient(118deg, rgba(255, 255, 255, .11), transparent 34%, rgba(94, 67, 24, .10) 68%, rgba(255, 255, 255, .07)),
    linear-gradient(145deg, #ddca98 0%, #c6a767 47%, #ac8748 100%);
    box-shadow: 0 30px 68px rgba(0, 0, 0, .31), inset 0 1px 0 rgba(255, 255, 255, .52), inset 0 -1px 0 rgba(78, 57, 23, .26), inset 0 0 42px rgba(255, 255, 255, .045);
    transform: translate3d(calc(-50% + 25px), calc(-50% - 21px), 0) rotateZ(5deg);
}

.pet-identity-card-back::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .72;
    background: repeating-radial-gradient(ellipse at 12% 108%, transparent 0 13px, rgba(75, 53, 20, .10) 14px 15px, transparent 16px 24px), repeating-radial-gradient(ellipse at 96% -8%, transparent 0 18px, rgba(255, 248, 222, .085) 19px 20px, transparent 21px 31px), repeating-linear-gradient(118deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px), radial-gradient(circle at 76% 24%, rgba(255, 255, 255, .10), transparent 32%);
    mix-blend-mode: soft-light;
}

.pet-identity-card-back::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 1;
    border: 1px solid rgba(58, 45, 19, .16);
    border-radius: 17px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    pointer-events: none;
}

.pet-identity-card-back__watermark {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 42%;
    height: 58%;
    object-fit: contain;
    transform: translate(-50%, -50%) rotate(-7deg);
    filter: brightness(0);
    opacity: .06;
}

.pet-identity-card-back__sheen {
    position: absolute;
    z-index: 2;
    inset: -45% -70%;
    pointer-events: none;
    background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .32) 49%, transparent 59%);
    transform: translateX(-46%) rotate(7deg);
    opacity: .08;
}

.pet-identity-card-back__brand {
    position: absolute;
    z-index: 3;
    left: 30px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: .52;
}

.pet-identity-card-back__brand img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: brightness(0) opacity(.62);
}

.pet-identity-card-back__brand span {
    font-size: 11px;
    letter-spacing: .22em;
    font-weight: 700;
}

.pet-identity-card-back__seal {
    position: absolute;
    z-index: 3;
    top: 28px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.pet-identity-card-back__seal strong {
    font: 600 44px/1 Georgia, serif;
}

.pet-identity-card-back__seal small {
    font-size: 10px;
    letter-spacing: .19em;
}

.pet-identity-card-back > p {
    position: absolute;
    z-index: 3;
    right: 30px;
    bottom: 27px;
    margin: 0;
    font-size: 10px;
    letter-spacing: .2em;
    opacity: .43;
}

.pet-identity-card {
    z-index: 2;
    padding: 20px 22px;
    border: 1px solid rgba(232, 217, 182, .24);
    background: radial-gradient(circle at 17% 12%, rgba(255, 255, 255, .07), transparent 28%), linear-gradient(125deg, rgba(255, 255, 255, .07), transparent 23%, transparent 69%, rgba(213, 189, 130, .065)), linear-gradient(145deg, rgba(45, 48, 49, .965), rgba(18, 20, 21, .985));
    box-shadow: 0 34px 76px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .095), inset 0 0 34px rgba(255, 255, 255, .018);
    backdrop-filter: blur(10px) saturate(.86);
    -webkit-backdrop-filter: blur(10px) saturate(.86);
    transform: translate3d(calc(-50% - 18px), calc(-50% + 18px), 38px) rotateZ(-4deg);
}

.pet-identity-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .78;
    background: repeating-radial-gradient(ellipse at 8% 118%, transparent 0 20px, rgba(255, 255, 255, .020) 21px 22px, transparent 23px 31px), repeating-linear-gradient(-32deg, rgba(255, 255, 255, .017) 0 1px, transparent 1px 8px);
    mix-blend-mode: soft-light;
}

.pet-identity-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 22px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .026);
}

.pet-identity-card__scan {
    position: absolute;
    z-index: 5;
    left: -8%;
    right: -8%;
    top: -12%;
    height: 18%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(232, 210, 153, .16) 52%, rgba(236, 216, 163, .62) 56%, transparent 63%);
    filter: drop-shadow(0 5px 10px rgba(214, 189, 126, .16));
}

.pet-identity-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.pet-identity-card__top span {
    font-size: 10.5px;
    letter-spacing: .15em;
    color: #9a9e9f;
}

.pet-identity-card__top b {
    font-size: 10.5px;
    letter-spacing: .11em;
    color: #ddc994;
    font-weight: 550;
}

.pet-identity-card__hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0 8px;
}

.pet-identity-card__hero .pet-identity-card__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(229, 211, 167, .2);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(222, 198, 143, .11), rgba(255, 255, 255, .02));
    overflow: hidden;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 64px;
    aspect-ratio: unset;
}

.pet-identity-card__hero .pet-identity-card__avatar img {
    width: 68%;
    height: 68%;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .28));
    transition: opacity .42s ease, transform .42s cubic-bezier(.2, .72, .2, 1);
}

.pet-identity-card__hero .pet-identity-card__avatar img.is-pet-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    opacity: 0;
    transform: scale(.96);
}

.pet-identity-card__hero .pet-identity-card__avatar img.is-pet-photo.is-ready {
    opacity: 1;
    transform: none;
}

.pet-identity-card__hero small {
    font-size: 10.5px;
    color: #858a8c;
    letter-spacing: .13em;
}

.pet-identity-card__hero h3 {
    margin: 4px 0 3px;
    font-size: 26px;
    font-weight: 550;
    letter-spacing: -.03em;
    color: #f3eee2;
}

.pet-identity-card__hero p {
    margin: 0;
    color: #a8acad;
    font-size: 12px;
}

.pet-identity-card__data {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:1fr 1fr;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-left: 1px solid rgba(255, 255, 255, .10);
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    position: relative;
}

.pet-identity-card__data div {
    min-width: 0;
    padding: 5px 10px;
    border-right: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.pet-identity-card__data dt {
    margin-bottom: 2px;
    color: #8b9092;
    font-size: 11px;
    letter-spacing: .06em;
}

.pet-identity-card__data dd {
    min-height: 16px;
    margin: 0;
    color: #d4d1c8;
    font-size: 13px;
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pet-identity-card__data dd:empty::after {
    content: "";
    display: block;
    width: 44%;
    height: 8px;
    margin-top: 2px;
    border-bottom: 1px solid rgba(196, 194, 186, .16);
    opacity: .72;
}

.pet-identity-card__data--wide {
    grid-column: 1/-1;
}

.pet-identity-card__data--wide dd {
    color: #eee4cb;
    font-size: 14px;
    font-weight: 520;
    letter-spacing: .012em;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.pet-identity-card__data--wide dd:empty::after {
    width: 30%;
}

.pet-identity-card__foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 7px;
}

.pet-identity-card__foot div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #929799;
    font-size: 10.5px;
}

.pet-identity-card__foot i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d6bd7e;
    box-shadow: 0 0 10px rgba(214, 189, 126, .28);
}

.pet-identity-card__foot strong {
    font: 500 28px/1 Georgia, serif;
    color: #d3bd83;
}

/* Tech card state animations */
.pet-id-stage[data-state="idle"] .pet-card-stack--tech .pet-identity-card {
    animation: petCardFrontFloat 6.4s ease-in-out infinite;
}

.pet-id-stage[data-state="idle"] .pet-identity-card-back {
    animation: petCardBackFloat 7.2s ease-in-out infinite;
}

.pet-id-stage[data-state="idle"] .pet-identity-card-back__sheen {
    animation: petCardGoldSheen 10s ease-in-out infinite;
}

@keyframes petCardFrontFloat {
    0%, 100% {
        translate: 0 0
    }
    50% {
        translate: 0 -3px
    }
}

@keyframes petCardBackFloat {
    0%, 100% {
        translate: 0 0
    }
    50% {
        translate: 0 3px
    }
}

@keyframes petCardGoldSheen {
    0%, 66%, 100% {
        transform: translateX(-46%) rotate(7deg);
        opacity: .06
    }
    82% {
        transform: translateX(50%) rotate(7deg);
        opacity: .24
    }
}

.pet-id-stage[data-state="focused"] .pet-card-stack--tech .pet-identity-card {
    transform: translate3d(calc(-50% - 13px), calc(-50% + 13px), 44px) rotateZ(-3deg);
    border-color: rgba(232, 217, 182, .31);
    box-shadow: 0 40px 84px rgba(0, 0, 0, .44), 0 0 42px rgba(214, 189, 126, .04), inset 0 1px 0 rgba(255, 255, 255, .11);
}

.pet-id-stage[data-state="focused"] .pet-identity-card-back {
    transform: translate3d(calc(-50% + 27px), calc(-50% - 22px), 0) rotateZ(5.4deg);
    opacity: .92;
}

.pet-id-stage[data-state="querying"] .pet-card-stack--tech .pet-identity-card {
    transform: translate3d(-50%, -50%, 48px) rotateZ(0deg);
    border-color: rgba(225, 202, 146, .41);
    box-shadow: 0 42px 90px rgba(0, 0, 0, .46), 0 0 58px rgba(214, 189, 126, .065), inset 0 1px 0 rgba(255, 255, 255, .11);
}

.pet-id-stage[data-state="querying"] .pet-identity-card-back {
    transform: translate3d(calc(-50% + 10px), calc(-50% - 5px), 0) rotateZ(1.5deg);
    opacity: .68;
}

.pet-id-stage[data-state="querying"] .pet-identity-card__scan {
    opacity: 1;
    animation: petCardScan .9s cubic-bezier(.3, .68, .28, 1) infinite;
}

.pet-id-stage[data-state="querying"] .pet-identity-card__data dd:empty::after {
    animation: petFieldPulse 1.15s ease-in-out infinite;
}

@keyframes petCardScan {
    0% {
        top: -16%;
        opacity: 0
    }
    14% {
        opacity: .75
    }
    78% {
        opacity: .75
    }
    100% {
        top: 102%;
        opacity: 0
    }
}

@keyframes petFieldPulse {
    50% {
        opacity: .28
    }
}

.pet-id-stage[data-state="not-found"] .pet-card-stack--tech .pet-identity-card, .pet-id-stage[data-state="error"] .pet-card-stack--tech .pet-identity-card {
    animation: petCardSoftReject .42s ease-out 1;
}

@keyframes petCardSoftReject {
    0%, 100% {
        translate: 0 0
    }
    32% {
        translate: -3px 0
    }
    68% {
        translate: 3px 0
    }
}

/* ===== Passport card (179.png background) ===== */
.pet-identity-card--passport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 26px;
    font-size: clamp(13px, 2.6vw, 16px);
    box-shadow: 0 40px 88px rgba(0, 0, 0, .32), 0 0 54px rgba(210, 184, 121, .055);
    /* Reset tech-card-specific properties */
    transform: none;
    padding: 0;
    border: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.pet-identity-card--passport::before {
    display: none;
}

.pet-identity-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../images/pet-id/179.png') center / cover no-repeat;
    border-radius: 26px;
}

.pet-identity-card__deco {
    position: absolute;
    z-index: 1;
    top: 62%;
    left: 5%;
    width: 33%;
    max-width: 140px;
    aspect-ratio: 140 / 167;
    height: auto;
    object-fit: cover;
    object-position: center;
    background: rgba(245, 239, 228, .55);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

/* API 返回的头像可能为任意比例（非 140/167），
   通过 aspect-ratio + object-fit:cover 把所有照片统一裁剪为
   140×167 的“证件照”形态，避免竖长图拉高溢出卡片。 */

.pet-identity-card--passport.has-record .pet-identity-card__deco {
    opacity: 1;
}

.pet-card-stack--passport .pet-identity-card__data {
    position: absolute;
    z-index: 2;
    top: 63%;
    bottom: 11%;
    left: 44%;
    right: 5%;
    display: grid;
    grid-template-rows:repeat(6, 1fr);
    margin: 0;
    grid-template-columns:1fr;
    border: none;
}

.pet-card-stack--passport .pet-identity-card__data > div {
    display: flex;
    align-items: baseline;
    gap: 6%;
    min-width: 0;
    padding: 0;
    border: none;
}

.pet-card-stack--passport .pet-identity-card__data dt {
    flex: 0 0 30%;
    margin: 0;
    color: #5E585C;
    font-size: .69em;
    letter-spacing: .02em;
    white-space: nowrap;
}

.pet-card-stack--passport .pet-identity-card__data dd {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 1em;
    margin: 0;
    color: #696F7F;
    font-size: .82em;
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pet-card-stack--passport .pet-identity-card__data dd:empty::after {
    content: "";
    display: block;
    width: 50%;
    height: .7em;
    border-bottom: 1px dashed rgba(150, 145, 140, .20);
}

.pet-card-stack--passport .pet-identity-card__data--wide {
    grid-column: 1/-1;
    flex-direction: column;
    gap: 2%;
}

.pet-card-stack--passport .pet-identity-card__data--wide dd {
    color: #4A4A4A;
    font-size: .82em;
    font-weight: 520;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    word-break: break-all;
}

.pet-card-stack--passport .pet-identity-card__data--wide dd:empty::after {
    width: 35%;
}

/* Passport success animations */
.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__data > div,
.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__deco {
    animation: petDataReveal .48s cubic-bezier(.2, .72, .2, 1) both;
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__data > div:nth-child(1) {
    animation-delay: .06s
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__data > div:nth-child(2) {
    animation-delay: .10s
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__data > div:nth-child(3) {
    animation-delay: .14s
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__data > div:nth-child(4) {
    animation-delay: .18s
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__data > div:nth-child(5) {
    animation-delay: .22s
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__data > div:nth-child(6) {
    animation-delay: .26s
}

.pet-id-stage[data-state="success"] .pet-card-stack--passport .pet-identity-card__deco {
    animation-delay: .30s;
}

@keyframes petDataReveal {
    from {
        opacity: 0;
        transform: translateY(7px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.pet-id-trust {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 3;
    display: flex;
    gap: 34px;
    transform: translateX(-50%);
}

.pet-id-trust div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5e6365;
    white-space: nowrap;
}

.pet-id-trust b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 500;
    color: #8a8170;
}

.pet-id-trust span {
    font-size: 11px;
    letter-spacing: .05em;
}

@media (max-width: 1200px) {
    .main-nav {
        gap: 34px;
    }

    .pet-id-dialog {
        width: calc(100vw - 38px);
        height: calc(100dvh - 38px);
    }

    .pet-id-layout {
        grid-template-columns:minmax(0, .94fr) minmax(450px, 1.06fr);
    }

    .pet-id-query {
        padding: 42px 38px 34px;
    }

    .pet-id-stage {
        padding-left: 32px;
        padding-right: 32px;
    }

    .pet-card-stack--tech {
        --pet-card-width: min(90%, 460px);
    }

    .pet-card-stack--tech .pet-identity-card {
        padding: 15px 16px;
    }

    .pet-card-stack--tech .pet-identity-card__top {
        padding-bottom: 8px;
    }

    .pet-card-stack--tech .pet-identity-card__hero {
        gap: 10px;
        padding: 8px 0 7px;
    }

    .pet-card-stack--tech .pet-identity-card__hero .pet-identity-card__avatar {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .pet-card-stack--tech .pet-identity-card__hero small {
        font-size: 9.5px
    }

    .pet-card-stack--tech .pet-identity-card__hero h3 {
        margin: 3px 0 2px;
        font-size: 22px
    }

    .pet-card-stack--tech .pet-identity-card__hero p {
        font-size: 11px;
    }

    .pet-card-stack--tech .pet-identity-card__data div {
        padding: 4px 7px
    }

    .pet-card-stack--tech .pet-identity-card__data dt {
        margin-bottom: 2px;
        font-size: 9.5px
    }

    .pet-card-stack--tech .pet-identity-card__data dd {
        min-height: 12px;
        font-size: 11.5px
    }

    .pet-card-stack--tech .pet-identity-card__data--wide dd {
        font-size: 12.5px;
    }

    .pet-card-stack--tech .pet-identity-card__foot {
        display: none;
    }

    .pet-card-stack--passport {
        --pet-card-width: min(88%, 375px);
    }
}

@media (max-width: 900px) {
    .pet-id-dialog {
        width: calc(100vw - 24px);
        height: calc(100dvh - 24px);
    }

    .pet-id-panel {
        border-radius: 24px;
        overflow: auto;
    }

    .pet-id-head {
        position: sticky;
        top: 0;
        z-index: 8;
        height: 76px;
        padding: 0 68px 0 24px;
        background: rgba(18, 20, 21, .86);
        backdrop-filter: blur(16px);
    }

    .pet-id-head__signal {
        display: none;
    }

    .pet-id-layout {
        height: auto;
        min-height: calc(100% - 76px);
        grid-template-columns:1fr;
    }

    .pet-id-query {
        padding: 38px 26px 42px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .pet-id-assurance {
        margin-top: 36px;
    }

    .pet-id-stage {
        min-height: 600px;
    }

    .pet-card-stack--tech {
        --pet-card-width: min(76vw, 480px);
    }

    .pet-card-stack--passport {
        --pet-card-width: min(76vw, 340px);
    }
}

@media (max-width: 720px) {
    .main-nav {
        gap: 30px;
    }

    .pet-id-dialog {
        width: 100vw;
        height: 100dvh;
    }

    .pet-id-panel {
        border: 0;
        border-radius: 0;
    }

    .pet-id-close {
        position: fixed;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .pet-id-head {
        height: 70px;
        padding-left: 18px;
    }

    .pet-id-head__brand img {
        width: 38px;
    }

    .pet-id-head__brand b {
        font-size: 10px
    }

    .pet-id-head__brand span {
        font-size: 9px;
    }

    .pet-id-query {
        padding: 34px 18px 38px;
    }

    .pet-id-query h2 {
        font-size: 34px;
    }

    .pet-id-query__lead {
        font-size: 16px;
        line-height: 1.75;
    }

    .pet-id-input-wrap {
        grid-template-columns:34px auto minmax(0, 1fr) auto;
        height: auto;
        overflow: visible;
    }

    .pet-id-prefix {
        height: 54px;
        padding-left: 11px;
        font-size: 13px;
    }

    .pet-id-input-wrap input {
        height: 54px;
        padding: 0 10px;
    }

    .pet-id-input-wrap .pet-id-clear {
        height: 38px;
        margin: 0;
    }

    .pet-id-input-wrap button {
        grid-column: 1/-1;
        width: calc(100% + 2px);
        height: 46px;
        margin: 0 -1px -1px;
        border-radius: 0 0 14px 14px;
    }

    .pet-id-assurance {
        grid-template-columns:1fr;
        margin-top: 30px;
        padding-top: 22px;
    }

    .pet-id-stage {
        min-height: 520px;
        padding: 42px 16px 70px;
    }

    .pet-id-stage__orbit {
        width: 430px;
        height: 430px;
    }

    .pet-card-stack--tech {
        --pet-card-width: min(calc(100vw - 34px), 440px);
        width: 100%;
        height: 315px;
        transform: translate(-50%, -50%) !important;
    }

    .pet-identity-card-back, .pet-card-stack--tech .pet-identity-card {
        border-radius: 20px;
    }

    .pet-identity-card-back {
        transform: translate3d(calc(-50% + 10px), calc(-50% - 8px), 0) rotateZ(3.2deg);
    }

    .pet-card-stack--tech .pet-identity-card {
        padding: 15px 16px;
        transform: translate3d(calc(-50% - 6px), calc(-50% + 10px), 24px) rotateZ(-2.2deg);
    }

    .pet-id-stage[data-state="focused"] .pet-card-stack--tech .pet-identity-card {
        transform: translate3d(calc(-50% - 4px), calc(-50% + 7px), 28px) rotateZ(-1.4deg);
    }

    .pet-id-stage[data-state="focused"] .pet-identity-card-back {
        transform: translate3d(calc(-50% + 11px), calc(-50% - 9px), 0) rotateZ(3.5deg);
    }

    .pet-id-stage[data-state="querying"] .pet-card-stack--tech .pet-identity-card {
        transform: translate3d(-50%, -50%, 30px) rotateZ(0deg);
    }

    .pet-id-stage[data-state="querying"] .pet-identity-card-back {
        transform: translate3d(calc(-50% + 5px), calc(-50% - 3px), 0) rotateZ(1deg);
    }

    .pet-id-stage[data-state="not-found"] .pet-card-stack--tech .pet-identity-card, .pet-id-stage[data-state="error"] .pet-card-stack--tech .pet-identity-card {
        transform: translate3d(calc(-50% - 6px), calc(-50% + 10px), 24px) rotateZ(-2deg);
    }

    .pet-id-stage[data-state="not-found"] .pet-identity-card-back, .pet-id-stage[data-state="error"] .pet-identity-card-back {
        transform: translate3d(calc(-50% + 10px), calc(-50% - 8px), 0) rotateZ(3.2deg);
    }

    .pet-card-stack--tech .pet-identity-card__top {
        padding-bottom: 8px;
    }

    .pet-card-stack--tech .pet-identity-card__hero {
        gap: 10px;
        padding: 9px 0 8px;
    }

    .pet-card-stack--tech .pet-identity-card__hero .pet-identity-card__avatar {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .pet-card-stack--tech .pet-identity-card__hero small {
        font-size: 7.5px
    }

    .pet-card-stack--tech .pet-identity-card__hero h3 {
        margin: 3px 0 2px;
        font-size: 19.5px
    }

    .pet-card-stack--tech .pet-identity-card__hero p {
        font-size: 9px;
    }

    .pet-card-stack--tech .pet-identity-card__data div {
        padding: 5px 7px
    }

    .pet-card-stack--tech .pet-identity-card__data dt {
        margin-bottom: 2px;
        font-size: 7.5px
    }

    .pet-card-stack--tech .pet-identity-card__data dd {
        min-height: 10px;
        font-size: 9.5px
    }

    .pet-card-stack--tech .pet-identity-card__data--wide dd {
        font-size: 10.5px;
    }

    .pet-card-stack--tech .pet-identity-card__foot {
        padding-top: 7px
    }

    .pet-card-stack--tech .pet-identity-card__foot div {
        gap: 5px;
        font-size: 6px
    }

    .pet-card-stack--tech .pet-identity-card__foot strong {
        font-size: 18px;
    }

    .pet-card-stack--passport {
        --pet-card-width: min(calc(100vw - 52px), 300px);
        transform: translate(-50%, -50%) scale(.92) !important;
    }

    .pet-id-stage[data-state="success"] .pet-card-stack--passport {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .pet-identity-card--passport, .pet-identity-card__bg {
        border-radius: 20px;
    }

    .pet-id-trust {
        gap: 14px;
    }

    .pet-id-trust span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pet-id-panel {
        animation: none;
    }

    .pet-id-status[data-tone="loading"] i {
        animation: none;
    }

    .pet-id-stage__orbit, .pet-identity-card, .pet-identity-card-back, .pet-identity-card-back::before, .pet-identity-card__scan, .pet-identity-card__avatar, .pet-identity-card__data > div, .pet-identity-card__deco, .pet-identity-card__foot, .pet-identity-card__foot i {
        animation: none !important;
    }

    .pet-card-stack--tech {
        transform: translate(-50%, -50%) !important;
    }

    .pet-card-stack--passport {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .pet-identity-card, .pet-identity-card-back {
        transition-duration: .01ms !important;
    }
}