/*
 * Yinse Custom Theme
 * For YinSe Store
 */
:root {
    --xn-block-gap: 18px;
    --xn-ink: #102738;
    --xn-ink-2: #1d4055;
    --xn-building: #0b2032;
    --xn-hair: #35c9d5;
    --xn-hair-soft: #8deaf2;
    --xn-sky: #c9f4ff;
    --xn-paper: rgba(248, 253, 255, 0.82);
    --xn-paper-2: rgba(234, 248, 251, 0.72);
    --xn-line: rgba(39, 174, 193, 0.24);
    --xn-line-strong: rgba(39, 174, 193, 0.48);
    --xn-pink: #ff4fa3;
    --xn-brick: #8e4656;
    --xn-success: #23b987;
    --xn-warning: #f0aa38;
    --xn-shadow: 0 18px 42px rgba(26, 73, 95, 0.18);
    --xn-shadow-hover: 0 24px 54px rgba(26, 73, 95, 0.25);
}

body.yinse-theme.ys {
    --yinse-layout-gap: var(--xn-block-gap);
    --yinse-bg: var(--xn-paper-2);
    --yinse-surface: var(--xn-paper);
    --yinse-black: #0b7f9a;
    --yinse-text: var(--xn-ink);
    --yinse-muted: #607889;
    --yinse-muted-strong: #35586b;
    --yinse-muted-soft: var(--xn-hair);
    --yinse-link: #0b7f9a;
    --yinse-border: var(--xn-line);
    --yinse-border-strong: var(--xn-line-strong);
    --yinse-accent: var(--xn-hair);
    --yinse-accent-light: var(--xn-hair-soft);
    --yinse-accent-rgb: 53, 201, 213;
    --yinse-shadow-soft: var(--xn-shadow);
    --yinse-shadow-elevated: var(--xn-shadow-hover);
    min-height: 100vh;
    background-color: #dff4f8 !important;
    background-image:
        var(--yinse-page-background-image, none) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--xn-ink);
}

body.yinse-theme.ys::before {
    display: none !important;
}

body.yinse-theme.ys.yinse-bg-mask-on::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    display: block !important;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.56));
}

.yinse-heart-particle-layer {
    position: fixed;
    inset: 0;
    z-index: 920;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

.yinse-heart-particle {
    position: absolute;
    left: var(--heart-x, 50vw);
    bottom: -32px;
    width: var(--heart-size, 18px);
    height: var(--heart-size, 18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--heart-color, var(--xn-pink));
    font-size: var(--heart-size, 18px);
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    filter: drop-shadow(0 8px 14px rgba(255, 79, 163, 0.18));
    transform: translate3d(-50%, 0, 0) rotate(calc(var(--heart-rotate, 0deg) + var(--heart-mouse-rotate, 0deg))) scale(calc(0.72 * var(--heart-mouse-scale, 1)));
    animation: yinseHeartFloat var(--heart-duration, 7.2s) cubic-bezier(0.22, 0.64, 0.26, 1) forwards;
    transition: filter 0.22s ease;
}

.yinse-heart-particle.is-near-mouse {
    filter:
        drop-shadow(0 10px 18px rgba(255, 79, 163, 0.26))
        drop-shadow(0 0 8px rgba(141, 234, 242, 0.28));
    animation-play-state: paused;
}

@keyframes yinseHeartFloat {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0) rotate(calc(var(--heart-rotate, 0deg) + var(--heart-mouse-rotate, 0deg))) scale(calc(0.18 * var(--heart-mouse-scale, 1)));
    }
    5% {
        opacity: var(--heart-opacity, 0.72);
        transform: translate3d(-50%, -8px, 0) rotate(calc(var(--heart-rotate, 0deg) + var(--heart-mouse-rotate, 0deg))) scale(calc(1.68 * var(--heart-mouse-scale, 1)));
    }
    10% {
        opacity: var(--heart-opacity, 0.72);
        transform: translate3d(-50%, -18px, 0) rotate(calc(var(--heart-rotate, 0deg) + var(--heart-mouse-rotate, 0deg))) scale(calc(0.92 * var(--heart-mouse-scale, 1)));
    }
    18% {
        opacity: var(--heart-opacity, 0.72);
        transform: translate3d(calc(-50% + var(--heart-drift-mid, 18px) * 0.22), calc(var(--heart-rise, -72vh) * 0.22), 0) rotate(calc((var(--heart-rotate, 0deg) * 0.35) + var(--heart-mouse-rotate, 0deg))) scale(calc(1 * var(--heart-mouse-scale, 1)));
    }
    42% {
        transform: translate3d(calc(-50% + var(--heart-drift-mid, 18px) * 0.72), calc(var(--heart-rise, -72vh) * 0.52), 0) rotate(calc((var(--heart-rotate, 0deg) * -0.4) + var(--heart-mouse-rotate, 0deg))) scale(calc(1 * var(--heart-mouse-scale, 1)));
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--heart-drift, -18px)), var(--heart-rise, -72vh), 0) rotate(calc(var(--heart-rotate, 0deg) + var(--heart-spin, 28deg) + var(--heart-mouse-rotate, 0deg))) scale(calc(0.88 * var(--heart-mouse-scale, 1)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .yinse-heart-particle-layer {
        display: none !important;
    }
}

/* 即使系统偏好减少动态效果，标题的鼠标悬停反馈仍需可见。 */
@media (prefers-reduced-motion: reduce) {
    .yinse-hero-title:hover .yinse-hero-title-main {
        animation: yinse-hero-title-glitch-trigger 0.74s steps(1, end) both !important;
    }

    .yinse-hero-title:hover .yinse-hero-title-main::before {
        animation: yinse-hero-title-glitch-trigger-cyan 0.74s steps(1, end) both !important;
    }

    .yinse-hero-title:hover .yinse-hero-title-main::after {
        animation: yinse-hero-title-glitch-trigger-pink 0.74s steps(1, end) both !important;
    }
}

@media (max-width: 767.98px) {
    .yinse-heart-particle-layer {
        display: none !important;
    }
}

body.ys .yinse-page-frame {
    min-height: 100vh;
}

body.ys .yinse-main {
    margin-top: var(--xn-block-gap) !important;
}

body.ys .yinse-nav-shell + .yinse-nav-shell,
body.ys .yinse-header + .yinse-nav-shell {
    padding-top: var(--xn-block-gap) !important;
}

body.ys .yinse-shop-layout {
    gap: var(--xn-block-gap) !important;
}

body.ys .yinse-catalog-panel,
body.ys .yinse-inline-item-panel,
body.ys .yinse-item-unified-panel,
body.ys .yinse-description-panel,
body.ys .yinse-item-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ys .yinse-nav,
body.ys .panel,
body.ys .yinse-item-unified-panel,
body.ys .yinse-footer-wrap,
body.ys .yinse-layer-popup,
body.ys .component-popup {
    border: 1px solid var(--xn-line) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(242, 251, 253, 0.46)) !important;
    color: var(--xn-ink) !important;
    box-shadow: var(--xn-shadow) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(122%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(122%) !important;
}

body.ys .yinse-nav {
    border-radius: 18px !important;

}

body.ys .yinse-nav::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--xn-hair), var(--xn-pink), transparent);
    opacity: 0.58;
}

body.ys .yinse-brand,
body.ys .yinse-brand-name,
body.ys .yinse-nav-link,
body.ys .yinse-user-chip,
body.ys .yinse-user-name,
body.ys .yinse-user-balance,
body.ys .dropdown-item,
body.ys .form-control,
body.ys .yinse-searchbox,
body.ys .yinse-search-combo,
body.ys .yinse-category-name,
body.ys .yinse-commodity-name,
body.ys .yinse-description-body,
body.ys .yinse-notice-popup-inner {
    color: var(--xn-ink) !important;
}

body.ys .yinse-brand-mark,
body.ys .yinse-user-avatar,
body.ys .yinse-current-cat-icon,
body.ys .item-cover {
    border: 1px solid rgba(53, 201, 213, 0.36) !important;
    box-shadow: 0 0 0 4px rgba(53, 201, 213, 0.08) !important;
}

body.ys .yinse-current-cat-icon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

body.ys .yinse-brand {
    position: relative;
    isolation: isolate;
    min-height: 48px;
    padding: 5px 14px 5px 6px;
    border: 1px solid transparent;
    border-radius: 15px;
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease,
        box-shadow 0.28s ease;
}

body.ys .yinse-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at 22px 50%, rgba(255, 79, 163, 0.18), transparent 36px),
        radial-gradient(circle at calc(100% - 18px) 18px, rgba(53, 201, 213, 0.16), transparent 42px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(200, 247, 253, 0.24));
    opacity: 0.62;
    transform: scale(0.98);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

body.ys .yinse-brand::after {
    content: "♡";
    position: absolute;
    right: 7px;
    top: 3px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 79, 163, 0.20);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.64);
    color: var(--xn-pink);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    opacity: 0.78;
    transform: translateY(0) rotate(10deg) scale(0.92);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

body.ys .yinse-brand-mark {
    position: relative;
    border: 1px solid rgba(53, 201, 213, 0.42) !important;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.92), rgba(234, 248, 251, 0.70)) !important;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.72),
        0 0 0 6px rgba(53, 201, 213, 0.08),
        0 8px 20px rgba(26, 73, 95, 0.13) !important;
    transform: translateY(0) rotate(0deg);
    transition:
        transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1.1),
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        filter 0.28s ease;
    animation: yinseBrandAvatarFloat 4.8s ease-in-out infinite;
}

body.ys .yinse-brand-chip {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 22px 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.ys .yinse-brand-chip::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 24px;
    bottom: 3px;
    height: 5px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 79, 163, 0.34), rgba(53, 201, 213, 0.46), rgba(126, 232, 168, 0.30));
    opacity: 0;
    transform: scaleX(0.24) translateY(2px);
    transform-origin: left center;
    pointer-events: none;
    filter: blur(0.2px);
    transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1.1);
}

body.ys .yinse-brand-chip::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 22px;
    height: 7px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 3px 50%, var(--xn-pink) 0 2.5px, transparent 3px),
        radial-gradient(circle at 11px 50%, var(--xn-hair) 0 2.5px, transparent 3px),
        radial-gradient(circle at 19px 50%, #7ee8a8 0 2.5px, transparent 3px);
    opacity: 0.72;
    transform: translateY(-50%);
}

body.ys .yinse-brand-name {
    position: relative;
    z-index: 1;
    color: transparent !important;
    background: linear-gradient(90deg, #133047 0%, #128da1 42%, var(--xn-pink) 72%, #35c9d5 100%);
    background-size: 180% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1.1rem;
    font-weight: 900;
    text-shadow: 0 6px 18px rgba(26, 73, 95, 0.10);
    transform: translateY(0);
    transition:
        transform 0.28s ease,
        background-position 0.38s ease,
        filter 0.28s ease,
        letter-spacing 0.28s ease;
}

body.ys .yinse-brand:hover,
body.ys .yinse-brand:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(39, 174, 193, 0.22);
    background: rgba(255, 255, 255, 0.20);
    box-shadow:
        0 12px 28px rgba(26, 73, 95, 0.12),
        0 0 18px rgba(53, 201, 213, 0.10);
}

body.ys .yinse-brand:hover::before,
body.ys .yinse-brand:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

body.ys .yinse-brand:hover::after,
body.ys .yinse-brand:focus-visible::after {
    opacity: 1;
    transform: translateY(-2px) rotate(-8deg) scale(1.1);
}

body.ys .yinse-brand:hover .yinse-brand-mark,
body.ys .yinse-brand:focus-visible .yinse-brand-mark {
    border-color: rgba(255, 79, 163, 0.40) !important;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.78),
        0 0 0 7px rgba(255, 79, 163, 0.10),
        0 12px 24px rgba(26, 73, 95, 0.16),
        0 0 20px rgba(53, 201, 213, 0.24) !important;
    filter: saturate(1.08);
    animation: yinseBrandLogoShake 0.72s ease both;
}

body.ys .yinse-brand:hover .yinse-brand-chip::before,
body.ys .yinse-brand:focus-visible .yinse-brand-chip::before {
    opacity: 1;
    transform: scaleX(1) translateY(0);
}

body.ys .yinse-brand:hover .yinse-brand-name,
body.ys .yinse-brand:focus-visible .yinse-brand-name {
    transform: translateY(-1px);
    background-position: 100% 50%;
    filter:
        drop-shadow(1px 0 0 rgba(255, 79, 163, 0.22))
        drop-shadow(-1px 0 0 rgba(53, 201, 213, 0.20))
        drop-shadow(0 5px 12px rgba(53, 201, 213, 0.18));
    letter-spacing: 0.018em;
}

@keyframes yinseBrandAvatarFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-1.5px) rotate(2deg);
    }
}

@keyframes yinseBrandLogoShake {
    0% {
        transform: translateY(-1px) rotate(0deg) scale(1.04);
    }
    18% {
        transform: translateY(-2px) rotate(-11deg) scale(1.06);
    }
    36% {
        transform: translateY(-2px) rotate(9deg) scale(1.06);
    }
    54% {
        transform: translateY(-1px) rotate(-7deg) scale(1.05);
    }
    72% {
        transform: translateY(-1px) rotate(5deg) scale(1.045);
    }
    100% {
        transform: translateY(-1px) rotate(0deg) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-brand-mark {
        animation: none;
    }

    body.ys .yinse-brand:hover .yinse-brand-chip::before,
    body.ys .yinse-brand:focus-visible .yinse-brand-chip::before {
        transition: none;
    }
}

body.ys .yinse-nav-link,
body.ys .yinse-button-light,
body.ys .yinse-user-chip,
body.ys .yinse-searchbox,
body.ys .yinse-search-combo,
body.ys .form-control,
body.ys .qty-group,
body.ys .password-form .input-group {
    border-color: rgba(39, 174, 193, 0.22) !important;
    background: rgba(234, 248, 251, 0.74) !important;
    box-shadow: none !important;
}

body.ys .yinse-nav-link:hover,
body.ys .yinse-nav-link.is-active,
body.ys .yinse-button-dark,
body.ys .yinse-commodity-action-link,
body.ys .sku.is-primary,
body.ys .view-card-btn,
body.ys .component-popup .queryBtn,
body.ys .component-popup .query-button {
    border-color: #129eb5 !important;
    background: linear-gradient(135deg, #129eb5, #36cbd8 58%, #58a9e8) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(18, 158, 181, 0.26) !important;
}

body.ys .yinse-button-light:hover,
body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-dropdown-menu .dropdown-item:hover {
    border-color: rgba(39, 174, 193, 0.34) !important;
    background: rgba(232, 249, 252, 0.72) !important;
    color: #0f6175 !important;
}

body.ys .panel {
    position: relative;
    border-radius: 20px !important;
    overflow: hidden;
}

body.ys .panel::before,
body.ys .yinse-hero-banner--notice::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    z-index: 2;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, rgba(53, 201, 213, 0.74), rgba(255, 79, 163, 0.62), rgba(141, 234, 242, 0.72), transparent);
    opacity: 0.72;
}

body.ys .yinse-hero-banner--notice::after {
    display: block !important;
}

body.ys .panel-header {
    position: relative;
    border-bottom: 1px solid rgba(39, 174, 193, 0.16) !important;
}

body.ys .panel-header::after,
.yinse-hero-notice-head::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 8px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 4px 50%, var(--xn-pink) 0 3px, transparent 3.5px),
        radial-gradient(circle at 17px 50%, var(--xn-hair) 0 3px, transparent 3.5px),
        radial-gradient(circle at 30px 50%, #7ee8a8 0 3px, transparent 3.5px);
    opacity: 0.74;
}

body.ys .yinse-catalog-heading::after {
    display: block !important;
    top: 18px;
    right: 18px;
}

body.ys .yinse-catalog-tools {
    position: absolute;
    top: 32px;
    right: 22px;
    width: min(100%, 360px);
    display: flex;
    justify-content: flex-end;
}

body.ys .yinse-catalog-tools::before {
    display: none !important;
}

body.ys .yinse-catalog-tools::after {
    display: none !important;
}

body.ys .panel-kicker,
body.ys .yinse-notice-kicker,
body.ys .yinse-commodity-muted,
body.ys .yinse-footer-copy,
body.ys .yinse-footer-icp {
    color: #607889 !important;
}

body.ys .panel-title,
body.ys .yinse-index-panel-title,
body.ys .yinse-item-inline-title,
body.ys .yinse-item-price .price,
body.ys .yinse-current-name,
body.ys .panel-title-small {
    color: var(--xn-ink-2) !important;
    text-shadow: none !important;
}

.yinse-banner-shell {
    margin-top: var(--xn-block-gap) !important;
}

body.ys .yinse-hero-banner {
    position: relative;
    min-height: 256px;
    padding: 0 !important;
    border: 1px solid var(--xn-line) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(242, 251, 253, 0.46)) !important;
    box-shadow: var(--xn-shadow) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(122%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(122%) !important;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
}

body.ys .yinse-hero-banner--notice {
    display: block !important;
    min-height: 256px;
    padding: 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(242, 251, 253, 0.46)) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(122%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(122%) !important;
    box-shadow: var(--xn-shadow) !important;
}

.yinse-hero-notice-head {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 13px 20px 12px;
    border-bottom: 1px solid rgba(39, 174, 193, 0.16);
    background:
        linear-gradient(90deg, rgba(223, 247, 251, 0.48), rgba(248, 253, 255, 0.22)) !important;
}

.yinse-hero-notice-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    color: var(--xn-ink) !important;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
}

.yinse-hero-notice-title i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(39, 174, 193, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: #0b7f9a;
    box-shadow: 0 8px 18px rgba(26, 73, 95, 0.12);
}

.yinse-hero-news.yinse-news-ticker {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 4px 0;
    border: 0 !important;
    color: var(--xn-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.yinse-hero-news .yinse-news-ticker-track {
    font-size: 13px;
    line-height: 1.35;
}

.yinse-hero-notice-body {
    padding: 14px 18px 18px;
    color: var(--xn-ink) !important;
}

.yinse-hero-notice-body > :first-child {
    margin-top: 0 !important;
}

.yinse-hero-notice-body > :last-child {
    margin-bottom: 0 !important;
}

.yinse-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

.yinse-hero-media-image {
    position: absolute;
    left: 50%;
    top: var(--yinse-hero-bg-y, 20%);
    width: var(--yinse-hero-bg-size, 103%);
    max-width: none;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    transform: translate3d(calc(-50% + var(--yinse-hero-shift-x, 0px)), calc(var(--yinse-hero-bg-y-neg, -20%) + var(--yinse-hero-shift-y, 0px)), 0) scale(1.02);
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
}

body.ys .yinse-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8, 28, 45, 0.22), transparent 32%, rgba(255, 255, 255, 0.04)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 28%, rgba(8, 28, 45, 0.10));
}

body.ys .yinse-hero-banner::after {
    display: none !important;
}

body.ys .yinse-hero-banner--notice::after {
    display: block !important;
}

body.ys .yinse-hero-banner--notice::before {
    display: none !important;
}

.yinse-hero-title {
    position: absolute;
    left: 42px;
    bottom: 86px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    pointer-events: auto;
}

.yinse-hero-title span {
    color: #ffffff;
    font-size: clamp(46px, 6vw, 86px);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: 0;
    text-shadow:
        0 5px 24px rgba(6, 22, 36, 0.46),
        0 0 34px rgba(53, 201, 213, 0.28);
}

.yinse-hero-title strong {
    color: #a7f7ff;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
    text-shadow: 0 4px 18px rgba(6, 22, 36, 0.42);
}

.yinse-hero-banner .container-fluid,
.yinse-hero-banner .yinse-nav-main,
.yinse-hero-banner .cyber-brand-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
}

.yinse-hero-banner .yinse-nav-main {
    padding: 0 !important;
    border: 0 !important;
}

.yinse-hero-actions {
    position: absolute;
    left: 42px;
    right: 42px;
    bottom: 28px;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.yinse-hero-actions .cyber-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
}

.yinse-hero-actions .cyber-btn-item {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid rgba(39, 174, 193, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: #0f6175 !important;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(26, 73, 95, 0.12);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.yinse-hero-actions .cyber-btn-item:hover {
    border-color: rgba(39, 174, 193, 0.52);
    background: rgba(255, 255, 255, 0.76);
    color: #0b7f9a !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(26, 73, 95, 0.18);
}

body.ys .yinse-news-ticker {
    border-color: rgba(39, 174, 193, 0.22) !important;
    background: transparent !important;
    color: var(--xn-ink) !important;
    box-shadow: none !important;
}

body.ys .yinse-news-ticker-track span[style] {
    border: 1px solid rgba(255, 79, 163, 0.26) !important;
    background: rgba(255, 244, 250, 0.82) !important;
    color: #e83f93 !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 16px rgba(255, 79, 163, 0.12) !important;
}

body.ys .yinse-category-link {
    position: relative;
    overflow: hidden;
    border-color: rgba(39, 174, 193, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(226, 247, 251, 0.34)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 5px 12px rgba(26, 73, 95, 0.045) !important;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        color 0.28s ease !important;
}

body.ys .yinse-category-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(53, 201, 213, 0.055), transparent 42%),
        radial-gradient(circle at 12% 20%, rgba(255, 79, 163, 0.055), transparent 24%);
    opacity: 0.58;
}

body.ys .yinse-category-link > * {
    position: relative;
    z-index: 1;
}

body.ys .yinse-category-link::after {
    content: "\2661";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--xn-pink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: translateY(-5px) rotate(12deg);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

body.ys .yinse-category-link:hover::after,
body.ys .yinse-category-link.is-active::after {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active {
    border-color: rgba(39, 174, 193, 0.38) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(218, 247, 251, 0.52)) !important;
    box-shadow:
        0 9px 18px rgba(26, 73, 95, 0.10),
        0 0 14px rgba(53, 201, 213, 0.11) !important;
}

body.ys .yinse-category-link.is-active:hover {
    transform: translateY(-5px) scale(1.018);
    border-color: rgba(255, 79, 163, 0.42) !important;
    background:
        radial-gradient(circle at 16px 14px, rgba(255, 79, 163, 0.12), transparent 68px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(207, 246, 251, 0.62)) !important;
    box-shadow:
        0 12px 24px rgba(26, 73, 95, 0.13),
        0 0 0 2px rgba(255, 79, 163, 0.10),
        0 0 18px rgba(53, 201, 213, 0.17) !important;
}

body.ys .yinse-category-link.is-active:hover::after {
    transform: translateY(-1px) rotate(10deg) scale(1.12);
}

body.ys .yinse-category-tree.is-floating .yinse-category-row {
    animation-name: yinseCategoryBuoy !important;
    animation-timing-function: cubic-bezier(0.42, 0, 0.26, 1) !important;
    transform-origin: 50% 62%;
}

body.ys .yinse-category-tree.is-floating .yinse-category-row:hover,
body.ys .yinse-category-tree.is-floating .yinse-category-row:has(.yinse-category-link.is-active) {
    animation-play-state: paused;
}

@keyframes yinseCategoryBuoy {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    16% {
        transform:
            translate3d(calc(var(--yinse-category-float-x1, 2px) * 0.45), calc(var(--yinse-category-float-y1, -3px) * 0.35), 0)
            rotate(calc(var(--yinse-category-float-r1, 0.35deg) * 0.45))
            scale(1.006);
    }
    38% {
        transform:
            translate3d(var(--yinse-category-float-x1, 2px), var(--yinse-category-float-y1, -3px), 0)
            rotate(var(--yinse-category-float-r1, 0.35deg))
            scale(1.012);
    }
    58% {
        transform:
            translate3d(calc(var(--yinse-category-float-x2, -3px) * 0.74), calc(var(--yinse-category-float-y2, 2px) * 0.82), 0)
            rotate(calc(var(--yinse-category-float-r2, -0.35deg) * 0.82))
            scale(1.004);
    }
    78% {
        transform:
            translate3d(var(--yinse-category-float-x3, 2px), var(--yinse-category-float-y3, 3px), 0)
            rotate(calc(var(--yinse-category-float-r2, -0.35deg) * -0.42))
            scale(1.01);
    }
}

body.ys .yinse-table-wrap,
body.ys .yinse-card-catalog-wrap,
body.ys .yinse-commodity-card,
body.ys .component-popup .fixed-table-container,
body.ys .component-popup .mcy-card {
    border-color: rgba(39, 174, 193, 0.18) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(118%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(118%) !important;
}

body.ys .yinse-commodity-table thead th,
body.ys .component-popup .bootstrap-table .fixed-table-container .table thead th {
    background: rgba(230, 247, 251, 0.46) !important;
    color: var(--xn-ink-2) !important;
}

body.ys .item-list .yinse-commodity-row:hover,
body.ys .yinse-commodity-card:hover,
body.ys .yinse-commodity-card.is-inline-active {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 9px !important;
}

body.ys .yinse-commodity-card .row-inner {
    position: relative;
    overflow: hidden;
}

body.ys .yinse-commodity-card:hover .row-inner,
body.ys .yinse-commodity-card.is-inline-active .row-inner {
    transform: translateY(-4px) !important;
    border-color: rgba(53, 201, 213, 0.36) !important;
    background:
        radial-gradient(circle at 18px 16px, rgba(255, 79, 163, 0.08), transparent 72px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(222, 248, 252, 0.48)) !important;
    box-shadow:
        0 12px 26px rgba(26, 73, 95, 0.13),
        0 0 18px rgba(53, 201, 213, 0.13) !important;
}

body.ys .yinse-commodity-card.is-inline-active .row-inner {
    border-color: rgba(255, 79, 163, 0.46) !important;
    background:
        radial-gradient(circle at 18px 16px, rgba(255, 79, 163, 0.13), transparent 76px),
        radial-gradient(circle at calc(100% - 18px) 20px, rgba(53, 201, 213, 0.13), transparent 82px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(217, 248, 252, 0.56)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.72),
        inset 0 0 0 2px rgba(53, 201, 213, 0.12),
        0 13px 28px rgba(26, 73, 95, 0.15),
        0 0 0 2px rgba(255, 79, 163, 0.12),
        0 0 20px rgba(53, 201, 213, 0.16) !important;
}

body.ys .yinse-commodity-card.is-inline-active:hover .row-inner {
    transform: translateY(-6px) scale(1.012) !important;
    border-color: rgba(255, 79, 163, 0.62) !important;
    background:
        radial-gradient(circle at 18px 16px, rgba(255, 79, 163, 0.17), transparent 82px),
        radial-gradient(circle at calc(100% - 18px) 20px, rgba(53, 201, 213, 0.17), transparent 88px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(207, 247, 252, 0.64)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.78),
        inset 0 0 0 2px rgba(53, 201, 213, 0.16),
        0 17px 34px rgba(26, 73, 95, 0.18),
        0 0 0 2px rgba(255, 79, 163, 0.18),
        0 0 26px rgba(53, 201, 213, 0.22) !important;
}

body.ys .yinse-commodity-card.is-inline-active:hover .row-inner::before {
    transform: translateY(-1px) rotate(10deg) scale(1.12);
}

body.ys .yinse-commodity-card .row-inner::before {
    content: "\2665";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--xn-pink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: translateY(-5px) rotate(12deg);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

body.ys .yinse-commodity-card:hover .row-inner::before,
body.ys .yinse-commodity-card.is-inline-active .row-inner::before {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

body.ys .yinse-commodity-thumb,
body.ys .yinse-category-icon {
    outline: 3px solid rgba(255, 255, 255, 0.52);
    outline-offset: -3px;
}

body.ys .yinse-commodity-thumb {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-origin: border-box;
    transition:
        transform 0.54s cubic-bezier(0.16, 0.82, 0.24, 1),
        filter 0.54s ease,
        box-shadow 0.54s ease,
        border-color 0.54s ease !important;
    will-change: transform, filter, box-shadow;
}

body.ys .yinse-commodity-thumb::before {
    content: "";
    position: absolute;
    inset: -52%;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: conic-gradient(
        from 225deg at 50% 50%,
        transparent 0deg 18deg,
        rgba(69, 191, 209, 0.42) 46deg,
        rgba(255, 255, 255, 0.84) 74deg,
        rgba(240, 141, 185, 0.46) 106deg,
        rgba(53, 201, 213, 0.44) 142deg,
        transparent 180deg 360deg
    );
    mix-blend-mode: screen;
    opacity: 0;
    transform: rotate(-78deg) scale(0.72);
    transition: opacity 0.32s ease, transform 0.82s cubic-bezier(0.16, 0.82, 0.24, 1);
}

body.ys .yinse-commodity-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 76% 18%, rgba(255, 255, 255, 0.98) 0 1px, transparent 2px),
        linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.82) 49%, transparent 56%) 75% 18% / 15px 2px no-repeat,
        linear-gradient(180deg, transparent 42%, rgba(141, 234, 242, 0.78) 49%, transparent 56%) 83% 10% / 2px 15px no-repeat,
        radial-gradient(circle at 22% 78%, rgba(240, 141, 185, 0.66) 0 1px, transparent 2px),
        linear-gradient(140deg, rgba(255, 255, 255, 0.24), transparent 40%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.32s ease, transform 0.54s cubic-bezier(0.16, 0.82, 0.24, 1);
}

body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb,
body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb {
    animation: yinseLogoHoloTilt 0.82s cubic-bezier(0.16, 0.82, 0.24, 1) both !important;
    border-color: rgba(240, 141, 185, 0.68) !important;
    filter: saturate(1.18) brightness(1.09) contrast(1.04);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.68),
        0 14px 28px rgba(72, 57, 112, 0.22),
        -8px 0 20px rgba(141, 234, 242, 0.28),
        8px 0 20px rgba(240, 141, 185, 0.24) !important;
}

body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::before,
body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::before {
    opacity: 0.88;
    transform: rotate(112deg) scale(1.12);
}

body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::after,
body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::after {
    opacity: 1;
    transform: scale(1);
}

body.ys .yinse-card-logo-border-off .yinse-commodity-thumb {
    border-color: transparent !important;
    outline: 0 !important;
}

body.ys .yinse-card-logo-border-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb,
body.ys .yinse-card-logo-border-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb {
    border-color: transparent !important;
}

body.ys .yinse-card-logo-glow-off .yinse-commodity-thumb,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb {
    box-shadow: none !important;
    filter: none !important;
}

body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::before,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::before,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::after,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::after {
    opacity: 0;
}

@keyframes yinseLogoHoloTilt {
    0% {
        transform: perspective(180px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    }
    38% {
        transform: perspective(180px) translate3d(0, -5px, 0) rotateX(5deg) rotateY(-11deg) scale(1.075);
    }
    68% {
        transform: perspective(180px) translate3d(0, -3px, 0) rotateX(-2deg) rotateY(6deg) scale(1.055);
    }
    100% {
        transform: perspective(180px) translate3d(0, -3px, 0) rotateX(0deg) rotateY(0deg) scale(1.045);
    }
}

body.ys .yinse-pill,
body.ys .badge-soft,
body.ys .badge-soft-primary {
    border-color: rgba(39, 174, 193, 0.18) !important;
    background: rgba(234, 248, 251, 0.82) !important;
    color: #0f6175 !important;
}

body.ys .badge-money {
    --yinse-badge-money-bg: #eaf8fb !important;
    --yinse-badge-money-border: rgba(39, 174, 193, 0.30) !important;
    color: #0f6175 !important;
}

body.ys .status-badge.status-paid,
body.ys .badge-soft-success {
    background: rgba(35, 185, 135, 0.14) !important;
    color: #16835f !important;
}

body.ys .goods-sku.a-badge-warning {
    background: rgba(240, 170, 56, 0.16) !important;
    color: #9b6716 !important;
}

/* Item purchase panel: badges, price, sku and form controls. */
body.ys .yinse-item-form-wrap {
    color: var(--xn-ink);
}

body.ys .yinse-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}

body.ys .yinse-item-badges .badge-soft,
body.ys .badge-soft,
body.ys .yinse-pill,
body.ys .snap-up,
body.ys .goods-sku,
body.ys .a-badge-primary,
body.ys .a-badge-warning,
body.ys .a-badge-success,
body.ys .a-badge-danger {
    position: relative;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 11px !important;
    border: 1px solid rgba(39, 174, 193, 0.28) !important;
    border-radius: 9px !important;
    background:
        radial-gradient(circle at 10px 8px, rgba(255, 79, 163, 0.08), transparent 34px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 239, 247, 0.82)) !important;
    color: #8e4656 !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    line-height: 1.2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 5px 12px rgba(26, 73, 95, 0.07) !important;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease;
}

body.ys .yinse-item-badges .badge-soft::after {
    content: "\2665";
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--xn-pink);
    font-size: 10px;
    line-height: 1;
    transform: rotate(-8deg);
}

body.ys .yinse-item-badges .badge-soft:hover,
body.ys .yinse-pill:hover,
body.ys .goods-sku:hover,
body.ys .a-badge-primary:hover,
body.ys .a-badge-warning:hover,
body.ys .a-badge-success:hover,
body.ys .a-badge-danger:hover {
    transform: translateY(-2px);
    border-color: rgba(39, 174, 193, 0.48) !important;
    background:
        radial-gradient(circle at 10px 8px, rgba(255, 79, 163, 0.13), transparent 38px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 238, 255, 0.84)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 9px 18px rgba(26, 73, 95, 0.12),
        0 0 14px rgba(39, 174, 193, 0.12) !important;
}

body.ys .badge-soft-success {
    border-color: rgba(35, 185, 135, 0.24) !important;
    color: #16835f !important;
}

body.ys .badge-soft-danger,
body.ys .a-badge-danger {
    border-color: rgba(255, 79, 130, 0.28) !important;
    background:
        radial-gradient(circle at 10px 8px, rgba(255, 79, 163, 0.12), transparent 34px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 235, 244, 0.58)) !important;
    color: #c23f72 !important;
}

body.ys .badge-soft-info,
body.ys .shared-button {
    cursor: pointer;
}

body.ys .yinse-item-price {
    position: relative;
    margin: 8px 0 18px;
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid rgba(39, 174, 193, 0.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 24px 16px, rgba(255, 79, 163, 0.11), transparent 72px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(223, 247, 251, 0.44));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 10px 24px rgba(26, 73, 95, 0.08);
}

body.ys .yinse-item-price::after {
    content: "\2665";
    position: absolute;
    right: 12px;
    top: 10px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 79, 163, 0.20);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--xn-pink);
    font-size: 13px;
    transform: rotate(8deg);
}

body.ys .yinse-item-price .price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    color: #13b56f !important;
    font-size: clamp(2rem, 4vw, 3.1rem) !important;
    font-weight: 950 !important;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 10px 28px rgba(19, 181, 111, 0.16) !important;
}

body.ys .yinse-item-price .unit {
    color: #0f9f9f;
    font-size: 0.48em;
    font-weight: 950;
}

body.ys .yinse-form-stack {
    gap: 14px !important;
}

body.ys .yinse-field {
    position: relative;
    padding: 13px;
    border: 1px solid rgba(39, 174, 193, 0.14);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(226, 247, 251, 0.28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.ys .yinse-field .form-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px !important;
    color: #315c70 !important;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

body.ys .yinse-field .form-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--xn-hair);
    box-shadow: 0 0 0 4px rgba(53, 201, 213, 0.12);
}

body.ys .sku-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 2px !important;
}

body.ys .sku {
    position: relative;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 13px !important;
    border: 1px solid rgba(39, 174, 193, 0.24) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(225, 248, 252, 0.42)) !important;
    color: var(--xn-ink-2) !important;
    font-weight: 900 !important;
    line-height: 1.25;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 5px 14px rgba(26, 73, 95, 0.06) !important;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease;
}

body.ys .sku:hover {
    transform: translateY(-3px);
    border-color: rgba(53, 201, 213, 0.48) !important;
    background:
        radial-gradient(circle at 10px 9px, rgba(255, 79, 163, 0.10), transparent 36px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(212, 247, 252, 0.64)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 10px 22px rgba(26, 73, 95, 0.13),
        0 0 16px rgba(53, 201, 213, 0.12) !important;
}

body.ys .sku.is-primary {
    border-color: #129eb5 !important;
    background: linear-gradient(135deg, #129eb5, #36cbd8 58%, #58a9e8) !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 28px rgba(18, 158, 181, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.ys .sku.is-primary:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow:
        0 16px 34px rgba(18, 158, 181, 0.32),
        0 0 20px rgba(53, 201, 213, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

body.ys .sku-label {
    position: relative;
    z-index: 1;
}

body.ys .badge-money {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px !important;
    border: 1px solid rgba(255, 79, 163, 0.22) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: #e83f93 !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    line-height: 1;
    box-shadow: 0 5px 12px rgba(255, 79, 163, 0.10) !important;
}

body.ys .sku.is-primary .badge-money {
    color: #0f6175 !important;
    background: rgba(255, 255, 255, 0.84) !important;
}

body.ys .yinse-form-stack .form-control,
body.ys .yinse-form-stack input.form-control,
body.ys .yinse-form-stack input.captcha-input,
body.ys .yinse-captcha-group,
body.ys .qty-group,
body.ys .password-form .input-group {
    min-height: 42px;
    border: 1px solid rgba(39, 174, 193, 0.24) !important;
    border-radius: 12px !important;
    background: rgba(248, 253, 255, 0.68) !important;
    color: var(--xn-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 5px 14px rgba(26, 73, 95, 0.045) !important;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

body.ys .yinse-form-stack .form-control:focus,
body.ys .yinse-form-stack input.captcha-input:focus {
    border-color: rgba(53, 201, 213, 0.56) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 0 0 4px rgba(53, 201, 213, 0.12),
        0 8px 20px rgba(26, 73, 95, 0.08) !important;
    outline: 0 !important;
}

body.ys .yinse-form-stack .form-control::placeholder,
body.ys .yinse-form-stack input.captcha-input::placeholder {
    color: rgba(53, 88, 107, 0.58) !important;
}

body.ys .qty-group {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 6px;
    padding: 5px !important;
}

body.ys .qty-group .form-control {
    min-height: 34px;
    border: 0 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.52) !important;
    box-shadow: none !important;
    font-weight: 900;
}

body.ys .change-num-sub,
body.ys .change-num-add {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(39, 174, 193, 0.26) !important;
    border-radius: 9px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(225, 248, 252, 0.56)) !important;
    color: #0f6175 !important;
    box-shadow: 0 5px 12px rgba(26, 73, 95, 0.06) !important;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

body.ys .change-num-sub:hover,
body.ys .change-num-add:hover {
    transform: translateY(-2px);
    border-color: rgba(53, 201, 213, 0.50) !important;
    background: linear-gradient(135deg, #129eb5, #36cbd8) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(18, 158, 181, 0.22) !important;
}

body.ys .optional-card,
body.ys .view-card-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(39, 174, 193, 0.26) !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at 14px 10px, rgba(255, 79, 163, 0.10), transparent 42px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(222, 248, 252, 0.56)) !important;
    color: #0f6175 !important;
    font-weight: 900;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 6px 16px rgba(26, 73, 95, 0.08) !important;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

body.ys .optional-card:hover,
body.ys .view-card-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(53, 201, 213, 0.50) !important;
    background:
        radial-gradient(circle at 14px 10px, rgba(255, 79, 163, 0.15), transparent 48px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(205, 245, 251, 0.72)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 10px 22px rgba(26, 73, 95, 0.14) !important;
}

body.ys .yinse-captcha-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px !important;
}

body.ys .yinse-captcha-group .form-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.ys .captcha-img,
body.ys .input-group-text.captcha-img {
    min-width: 104px;
    height: 34px;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(39, 174, 193, 0.22) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.66) !important;
}

body.ys .wholesale-table,
body.ys table.wholesale-table {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(39, 174, 193, 0.20) !important;
    border-radius: 14px !important;
    background: rgba(248, 253, 255, 0.66) !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--xn-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 8px 18px rgba(26, 73, 95, 0.07) !important;
}

body.ys .wholesale-table th,
body.ys .wholesale-table td {
    border-color: rgba(39, 174, 193, 0.14) !important;
    background: transparent !important;
    color: var(--xn-ink) !important;
}

body.ys .cash-pay {
    padding: 13px;
    border: 1px solid rgba(39, 174, 193, 0.14);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(226, 247, 251, 0.28));
}

body.ys .cash-pay > .form-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #315c70 !important;
    font-weight: 900;
}

body.ys .pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

body.ys .pay-list .pay {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    border: 1px solid rgba(39, 174, 193, 0.24);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(222, 248, 252, 0.56));
    color: #0f6175;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(26, 73, 95, 0.07);
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

body.ys .pay-list .pay img {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    object-fit: cover;
}

body.ys .pay-list .pay:hover,
body.ys .pay-list .pay.active,
body.ys .pay-list .pay.pay-selected {
    transform: translateY(-2px);
    border-color: rgba(53, 201, 213, 0.50);
    background: linear-gradient(135deg, #129eb5, #36cbd8) !important;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(18, 158, 181, 0.22);
}

/* Order lookup heading. */
body.ys .yinse-query-panel {
    overflow: hidden;
}

body.ys .yinse-query-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    min-height: 92px;
    padding: 17px 20px !important;
    overflow: hidden;
    border-bottom: 1px solid rgba(39, 174, 193, 0.16) !important;
    background:
        radial-gradient(circle at 22px 18px, rgba(255, 79, 163, 0.08), transparent 72px),
        linear-gradient(90deg, rgba(223, 247, 251, 0.54), rgba(248, 253, 255, 0.18)) !important;
}

body.ys .yinse-query-heading-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(39, 174, 193, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
    color: #0b7f9a;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(26, 73, 95, 0.10);
    flex: 0 0 auto;
}

body.ys .yinse-query-heading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 14px;
    width: 34px;
    height: 8px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 4px 50%, var(--xn-pink) 0 3px, transparent 3.5px),
        radial-gradient(circle at 17px 50%, var(--xn-hair) 0 3px, transparent 3.5px),
        radial-gradient(circle at 30px 50%, #7ee8a8 0 3px, transparent 3.5px);
    opacity: 0.62;
}

body.ys .yinse-query-heading-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

body.ys .yinse-query-heading .panel-kicker {
    margin: 0;
    color: #607889 !important;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}

body.ys .yinse-query-title {
    margin: 0;
    color: var(--xn-ink-2) !important;
    font-size: clamp(1.28rem, 2.2vw, 1.72rem);
    line-height: 1.05;
    font-weight: 950;
    text-shadow: none !important;
}

body.ys .yinse-query-summary {
    margin: 0;
    max-width: 560px;
    color: #607889 !important;
    font-size: 0.84rem;
    line-height: 1.45;
}

/* Order lookup results. */
body.ys .order-results .panel-body {
    padding: 18px;
}

body.ys .order-list {
    display: grid;
    gap: 14px;
}

body.ys .order-item {
    position: relative;
    overflow: hidden;
    padding: 16px !important;
    border: 1px solid rgba(39, 174, 193, 0.22) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 24px 20px, rgba(255, 79, 163, 0.10), transparent 86px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(223, 247, 251, 0.46)) !important;
    color: var(--xn-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 12px 28px rgba(26, 73, 95, 0.10) !important;
    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        background 0.24s ease,
        box-shadow 0.24s ease;
}

body.ys .order-item::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--xn-pink), var(--xn-hair), #7ee8a8);
    opacity: 0.72;
}

body.ys .order-item::after {
    content: "\2665";
    position: absolute;
    top: 12px;
    right: 14px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 79, 163, 0.22);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--xn-pink);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    transform: rotate(8deg);
}

body.ys .order-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 79, 163, 0.34) !important;
    background:
        radial-gradient(circle at 24px 20px, rgba(255, 79, 163, 0.14), transparent 92px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(211, 246, 251, 0.58)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 16px 34px rgba(26, 73, 95, 0.14),
        0 0 22px rgba(53, 201, 213, 0.12) !important;
}

body.ys .order-header,
body.ys .goods-section {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

body.ys .order-header {
    padding: 4px 30px 14px 0;
    border-bottom: 1px solid rgba(39, 174, 193, 0.16);
}

body.ys .order-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

body.ys .order-status {
    flex: 0 0 auto;
}

body.ys .status-badge,
body.ys .shipment-badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 11px !important;
    border: 1px solid rgba(39, 174, 193, 0.24) !important;
    border-radius: 9px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(225, 248, 252, 0.54)) !important;
    color: #0f6175 !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 5px 12px rgba(26, 73, 95, 0.06) !important;
}

body.ys .status-badge.status-paid,
body.ys .shipment-badge.shipment-paid {
    border-color: rgba(35, 185, 135, 0.26) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(218, 250, 240, 0.58)) !important;
    color: #16835f !important;
}

body.ys .order-basic {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #35586b;
    font-size: 0.88rem;
    font-weight: 750;
}

body.ys .order-no {
    display: flex;
    align-items: center;
    color: var(--xn-ink-2);
    font-size: 1rem;
    font-weight: 950;
    word-break: break-all;
}

/* 订单号复制：仅保留主题色图标，不使用按钮边框或底色。 */
body.ys .order-copy-btn {
    width: 24px;
    height: 24px;
    margin-left: 5px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--yinse-visual-blue-deep);
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    flex: 0 0 auto;
    transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

body.ys .order-copy-btn i {
    display: block;
    font-size: 0.95rem;
    line-height: 1;
}

body.ys .order-copy-btn:hover {
    background: transparent;
    color: var(--xn-pink);
    box-shadow: none;
    filter: drop-shadow(0 3px 5px rgba(255, 79, 163, 0.28));
    transform: translateY(-1px) scale(1.08);
}

body.ys .order-copy-btn:focus-visible {
    outline: 2px solid rgba(39, 174, 193, 0.5);
    outline-offset: 2px;
}

body.ys .order-no::before {
    content: "Order";
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    padding: 2px 7px;
    border: 1px solid rgba(53, 201, 213, 0.22);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.58);
    color: #0f6175;
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.ys .payment-method {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.ys .payment-icon {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(26, 73, 95, 0.10);
}

body.ys .order-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

body.ys .order-amount {
    min-width: 118px;
    display: grid;
    gap: 5px;
    justify-items: end;
    padding: 10px 12px;
    border: 1px solid rgba(39, 174, 193, 0.18);
    border-radius: 13px;
    background: rgba(248, 253, 255, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

body.ys .amount-label {
    color: #607889;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.ys .amount-value {
    color: #13b56f;
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 8px 18px rgba(19, 181, 111, 0.14);
}

body.ys .goods-section {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(39, 174, 193, 0.16);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(226, 247, 251, 0.28));
}

body.ys .goods-thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    overflow: hidden;
    border: 1px solid rgba(39, 174, 193, 0.24);
    border-radius: 12px;
    background: rgba(248, 253, 255, 0.68);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 7px 16px rgba(26, 73, 95, 0.08);
}

body.ys .goods-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.ys .goods-details {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 8px;
    flex: 1 1 auto;
}

body.ys .goods-name {
    margin: 0;
    color: var(--xn-ink-2);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.35;
}

body.ys .goods-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.ys .card-section {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(39, 174, 193, 0.18) !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 22px 18px, rgba(255, 79, 163, 0.08), transparent 78px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(223, 247, 251, 0.38)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 9px 20px rgba(26, 73, 95, 0.07) !important;
}

body.ys .card-section .card-header {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(39, 174, 193, 0.14);
    background: rgba(230, 247, 251, 0.36);
}

body.ys .shipment-content,
body.ys .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    color: var(--xn-ink-2);
    font-size: 1rem !important;
    font-weight: 950;
}

body.ys .shipment-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.ys .shipment-title i {
    color: #0f9f9f;
}

body.ys .card-content-no-password,
body.ys .card-password-section,
body.ys .card-content {
    padding: 13px 14px;
    color: var(--xn-ink);
    font-weight: 750;
    line-height: 1.72;
}

body.ys .card-display {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed rgba(39, 174, 193, 0.24);
    border-radius: 12px;
    background: rgba(248, 253, 255, 0.56);
    color: var(--xn-ink-2);
    word-break: break-word;
}

body.ys .btn-copy-unified,
body.ys .btn-unified {
    min-height: 30px;
    padding: 4px 10px !important;
    border: 1px solid rgba(39, 174, 193, 0.26);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.68);
    color: #0f6175 !important;
    font-weight: 900;
    text-decoration: none !important;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

body.ys .btn-copy-unified:hover,
body.ys .btn-unified:hover {
    transform: translateY(-2px);
    border-color: rgba(53, 201, 213, 0.46);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 8px 18px rgba(26, 73, 95, 0.10);
}

@media (max-width: 767.98px) {
    body.ys .yinse-query-heading {
        align-items: flex-start;
        min-height: auto;
        padding: 14px !important;
    }

    body.ys .yinse-query-heading-icon {
        width: 36px;
        height: 36px;
        margin-right: 10px;
        border-radius: 10px;
        font-size: 15px;
    }

    body.ys .yinse-query-heading::after {
        right: 12px;
        top: 12px;
    }

    body.ys .yinse-query-title {
        font-size: 1.28rem;
    }

    body.ys .yinse-query-summary {
        font-size: 0.8rem;
    }

    body.ys .order-header,
    body.ys .goods-section {
        flex-direction: column;
    }

    body.ys .order-left {
        flex-direction: column;
    }

    body.ys .order-right,
    body.ys .order-amount {
        width: 100%;
        justify-items: start;
    }
}

body.ys .yinse-description-body a,
body.ys .btn-copy-card,
body.ys .cyber-back-btn {
    border-color: rgba(39, 174, 193, 0.32) !important;
    background: rgba(234, 248, 251, 0.82) !important;
    color: #0f6175 !important;
    box-shadow: none !important;
}

body.ys .yinse-description-body a:hover,
body.ys .btn-copy-card:hover,
body.ys .cyber-back-btn:hover {
    background: #129eb5 !important;
    color: #ffffff !important;
}

body.ys .yinse-description-body blockquote {
    position: relative;
    margin: 16px 0 !important;
    padding: 18px 20px 18px 24px !important;
    overflow: hidden;
    border: 1px solid var(--xn-quote-accent, currentColor);
    border-radius: 14px !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent),
        0 12px 28px rgba(26, 73, 95, 0.10);
}

body.ys .yinse-description-body blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, currentColor 26% 74%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, currentColor 24%, transparent);
}

body.ys .yinse-description-body blockquote::after {
    content: "\2665";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: currentColor;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

body.ys .yinse-description-body blockquote p {
    margin: 0 0 10px !important;
}

body.ys .yinse-description-body blockquote p:last-child,
body.ys .yinse-description-body blockquote > :last-child {
    margin-bottom: 0 !important;
}

body.ys .yinse-description-body blockquote ul,
body.ys .yinse-description-body blockquote ol {
    margin: 8px 0 0 !important;
    padding-left: 18px !important;
}

body.ys .yinse-description-body a,
body.ys .btn-copy-card,
body.ys .cyber-back-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    margin: 5px 6px;
    padding: 9px 18px 9px 20px;
    border: 1px solid rgba(151, 240, 247, 0.62) !important;
    border-radius: 7px;
    background: linear-gradient(115deg, rgba(7, 55, 76, 0.9), rgba(12, 130, 153, 0.72) 64%, rgba(152, 67, 126, 0.72)) !important;
    color: #ffffff !important;
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1.35;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(222, 255, 255, 0.24),
        0 9px 20px rgba(7, 31, 48, 0.28),
        0 0 0 1px rgba(55, 216, 229, 0.1) !important;
    overflow: hidden;
    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        background-color 0.24s ease,
        box-shadow 0.24s ease,
        color 0.24s ease;
}

body.ys .yinse-description-body a::before,
body.ys .btn-copy-card::before,
body.ys .cyber-back-btn::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #8df6ff, #30cbd9 64%, #ff88c3);
    box-shadow: 0 0 8px rgba(87, 233, 242, 0.72);
    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        background-color 0.24s ease,
        box-shadow 0.24s ease;
}

body.ys .yinse-description-body a:hover,
body.ys .btn-copy-card:hover,
body.ys .cyber-back-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(242, 255, 255, 0.84) !important;
    background: linear-gradient(115deg, rgba(8, 80, 106, 0.96), rgba(19, 161, 180, 0.8) 63%, rgba(188, 82, 151, 0.78)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 10px 22px rgba(26, 73, 95, 0.14),
        0 0 18px rgba(53, 201, 213, 0.18) !important;
}

body.ys .yinse-description-body a:hover::before,
body.ys .btn-copy-card:hover::before,
body.ys .cyber-back-btn:hover::before {
    box-shadow: 0 0 13px rgba(87, 233, 242, 0.92);
    transform: scaleY(1.16);
}

body.ys .yinse-description-body blockquote {
    padding: 20px 22px 18px 24px !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 12px 28px rgba(26, 73, 95, 0.10) !important;
    transform: translateY(0);
    transition:
        transform 0.26s ease,
        border-color 0.26s ease,
        background-color 0.26s ease,
        box-shadow 0.26s ease;
}

body.ys .yinse-description-body blockquote::before {
    left: 18px;
    top: 0;
    bottom: auto;
    width: 88px;
    height: 5px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 36%, transparent), transparent);
    box-shadow: 0 8px 20px color-mix(in srgb, currentColor 20%, transparent);
}

body.ys .yinse-description-body blockquote::after {
    content: "\2665";
    box-shadow: 0 6px 14px rgba(255, 79, 163, 0.12);
    transition:
        transform 0.26s ease,
        background-color 0.26s ease,
        box-shadow 0.26s ease;
}

body.ys .yinse-description-body blockquote:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent),
        0 16px 34px rgba(26, 73, 95, 0.14),
        0 0 22px color-mix(in srgb, currentColor 16%, transparent);
}

body.ys .yinse-description-body blockquote:hover::after {
    transform: rotate(8deg) scale(1.08);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 8px 18px rgba(255, 79, 163, 0.18);
}

body.ys .yinse-description-body blockquote.red {
    --xn-quote-accent: #c24f4a;
    --xn-quote-accent-rgb: 194, 79, 74;
}

body.ys .yinse-description-body blockquote.blue,
body.ys .yinse-description-body blockquote.blud {
    --xn-quote-accent: #3b82f6;
    --xn-quote-accent-rgb: 59, 130, 246;
}

body.ys .yinse-description-body blockquote.green {
    --xn-quote-accent: #22c55e;
    --xn-quote-accent-rgb: 34, 197, 94;
}

body.ys .yinse-description-body blockquote.cyan {
    --xn-quote-accent: #22c7d8;
    --xn-quote-accent-rgb: 34, 199, 216;
}

body.ys .yinse-description-body blockquote.red,
body.ys .yinse-description-body blockquote.blue,
body.ys .yinse-description-body blockquote.blud,
body.ys .yinse-description-body blockquote.green,
body.ys .yinse-description-body blockquote.cyan,
body.ys .yinse-description-body blockquote.has-xn-quote-accent,
body.ys .yinse-description-body blockquote[style*="border-left-color"],
body.ys .yinse-description-body blockquote[style*="border-color"] {
    border-color: var(--xn-quote-accent, currentColor);
}

body.ys .yinse-description-body blockquote.red::before,
body.ys .yinse-description-body blockquote.blue::before,
body.ys .yinse-description-body blockquote.blud::before,
body.ys .yinse-description-body blockquote.green::before,
body.ys .yinse-description-body blockquote.cyan::before,
body.ys .yinse-description-body blockquote.has-xn-quote-accent::before,
body.ys .yinse-description-body blockquote[style*="border-left-color"]::before,
body.ys .yinse-description-body blockquote[style*="border-color"]::before {
    background: linear-gradient(90deg, var(--xn-quote-accent, currentColor), color-mix(in srgb, var(--xn-quote-accent, currentColor) 36%, transparent), transparent);
    box-shadow: 0 8px 20px rgba(var(--xn-quote-accent-rgb, 53, 201, 213), 0.18);
}

body.ys .yinse-description-body blockquote.red::after,
body.ys .yinse-description-body blockquote.blue::after,
body.ys .yinse-description-body blockquote.blud::after,
body.ys .yinse-description-body blockquote.green::after,
body.ys .yinse-description-body blockquote.cyan::after,
body.ys .yinse-description-body blockquote.has-xn-quote-accent::after,
body.ys .yinse-description-body blockquote[style*="border-left-color"]::after,
body.ys .yinse-description-body blockquote[style*="border-color"]::after {
    border-color: var(--xn-quote-accent, currentColor);
    color: var(--xn-quote-accent, currentColor);
    box-shadow: 0 6px 14px rgba(var(--xn-quote-accent-rgb, 255, 79, 163), 0.12);
}

body.ys .yinse-description-body blockquote.red:hover,
body.ys .yinse-description-body blockquote.blue:hover,
body.ys .yinse-description-body blockquote.blud:hover,
body.ys .yinse-description-body blockquote.green:hover,
body.ys .yinse-description-body blockquote.cyan:hover,
body.ys .yinse-description-body blockquote.has-xn-quote-accent:hover,
body.ys .yinse-description-body blockquote[style*="border-left-color"]:hover,
body.ys .yinse-description-body blockquote[style*="border-color"]:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--xn-quote-accent, currentColor) 18%, transparent),
        0 16px 34px rgba(26, 73, 95, 0.14),
        0 0 22px rgba(var(--xn-quote-accent-rgb, 53, 201, 213), 0.12);
}

body.ys .cyber-note {
    border-left-color: var(--xn-hair) !important;
    background: rgba(241, 251, 253, 0.82) !important;
    color: var(--xn-ink) !important;
}

body.ys .yinse-payment-notice {
    position: relative;
    margin: 2px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(39, 174, 193, 0.28);
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(9, 30, 46, 0.82), rgba(17, 65, 79, 0.76)),
        var(--yinse-page-background-image, none);
    background-size: cover;
    background-position: center;
    color: rgba(238, 252, 255, 0.86);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.58;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 26px rgba(26, 73, 95, 0.12);
    overflow: hidden;
}

body.ys .yinse-payment-notice::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(53, 201, 213, 0.22), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(255, 79, 163, 0.14), transparent 30%);
    pointer-events: none;
}

body.ys .yinse-payment-notice > * {
    position: relative;
    z-index: 1;
}

body.ys .yinse-payment-notice p {
    margin: 0;
}

body.ys .yinse-payment-notice p + p {
    margin-top: 2px;
}

body.ys .yinse-payment-notice a {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    margin: 0 2px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #35e7ff !important;
    font-size: inherit;
    font-weight: 900;
    line-height: inherit;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    box-shadow: none !important;
    transform: none !important;
}

body.ys .yinse-payment-notice a::after {
    display: none !important;
}

body.ys .yinse-payment-notice a:hover {
    color: #9cf8ff !important;
    text-shadow: 0 0 12px rgba(53, 231, 255, 0.42);
}

body.ys .yinse-payment-panel {
    margin-top: var(--yinse-layout-gap);
    overflow: hidden;
}

body.ys .yinse-payment-heading {
    min-height: 96px;
    align-items: center;
}

body.ys .yinse-payment-body {
    padding: 18px;
}

body.ys .cash-pay--independent {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(39, 174, 193, 0.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 24px 18px, rgba(255, 79, 163, 0.10), transparent 78px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(223, 247, 251, 0.40));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        0 10px 24px rgba(26, 73, 95, 0.08);
}

body.ys .cash-pay--independent::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    width: 88px;
    height: 5px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--xn-pink), var(--xn-hair), #7ee8a8);
    box-shadow: 0 8px 20px rgba(53, 201, 213, 0.18);
}

body.ys .cash-pay--independent .pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.ys .cash-pay--independent .pay-list:empty {
    min-height: 38px;
}

body .yinse-layer-popup.layui-layer,
body.ys .layui-layer.layui-layer-page,
body.ys .component-popup {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(39, 174, 193, 0.24) !important;
    color: var(--xn-ink) !important;
    box-shadow: var(--xn-shadow-hover) !important;
}

body .yinse-item-popup-layer.layui-layer {
    overflow: visible;
    isolation: isolate;
    border: 1px solid var(--yinse-border) !important;
    border-radius: 22px !important;
    background: var(--yinse-visual-glass-surface, rgba(255, 255, 255, 0.9)) !important;
    box-shadow: var(--yinse-shadow-elevated) !important;
}

body .yinse-item-popup-backdrop-fx {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    background:
        radial-gradient(ellipse 34% 42% at 10% 10%, rgba(255, 250, 247, 0.26), transparent 72%),
        radial-gradient(ellipse 31% 39% at 91% 86%, rgba(156, 57, 51, 0.20), transparent 74%),
        linear-gradient(119deg, transparent 14%, rgba(247, 222, 214, 0.15) 31%, transparent 49%),
        linear-gradient(305deg, transparent 45%, rgba(140, 47, 43, 0.14) 68%, transparent 83%);
    mix-blend-mode: normal;
    animation: yinse-popup-window-breathe 8s ease-in-out infinite alternate;
}

body .yinse-item-popup-float-particle,
body .yinse-item-popup-float-text {
    position: absolute;
    top: var(--yinse-popup-y);
    left: var(--yinse-popup-x);
    pointer-events: none;
    will-change: transform, opacity;
}

body .yinse-item-popup-float-particle {
    width: var(--yinse-popup-size);
    height: var(--yinse-popup-size);
    border-radius: 50%;
    background: var(--yinse-popup-color);
    box-shadow: 0 0 8px var(--yinse-popup-color), 0 0 18px color-mix(in srgb, var(--yinse-popup-color) 70%, transparent);
    animation: yinse-popup-float-particle var(--yinse-popup-duration) ease-in-out var(--yinse-popup-delay) infinite alternate;
}

body .yinse-item-popup-float-text {
    max-width: 15vw;
    color: var(--yinse-popup-color);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: clamp(10px, 0.72vw, 13px);
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.45;
    opacity: 0.76;
    text-shadow: 0 0 6px color-mix(in srgb, var(--yinse-popup-color) 78%, transparent), 0 0 17px color-mix(in srgb, var(--yinse-popup-color) 44%, transparent);
    white-space: nowrap;
    animation: yinse-popup-float-text var(--yinse-popup-duration) ease-in-out var(--yinse-popup-delay) infinite alternate;
}

@keyframes yinse-popup-orbit-breathe {
    from {
        opacity: 0.78;
    }

    to {
        opacity: 1;
    }
}

@keyframes yinse-popup-float-particle {
    from {
        opacity: 0.2;
        transform: translate3d(-7px, 10px, 0) scale(0.75);
    }

    to {
        opacity: 1;
        transform: translate3d(9px, -14px, 0) scale(1.25);
    }
}

@keyframes yinse-popup-float-text {
    from {
        opacity: 0.22;
        transform: translate3d(-8px, 12px, 0) rotate(var(--yinse-popup-tilt));
    }

    to {
        opacity: 0.94;
        transform: translate3d(10px, -13px, 0) rotate(var(--yinse-popup-tilt));
    }
}

body .yinse-item-popup-layer .layui-layer-content {
    position: relative;
    z-index: 1;
    max-height: 90vh;
    overflow: auto !important;
    border-radius: inherit;
    background: transparent !important;
}

body .yinse-item-popup-layer .yinse-item-popup-close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 30;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border: 1px solid rgba(39, 174, 193, 0.36);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(226, 250, 254, 0.96));
    color: #19aec2;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(26, 73, 95, 0.17), inset 1px 1px 0 rgba(255, 255, 255, 0.94);
    transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body .yinse-item-popup-layer .yinse-item-popup-close::before {
    content: none;
}

body .yinse-item-popup-layer .yinse-item-popup-close i {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
}

body .yinse-item-popup-layer .yinse-item-popup-close:hover,
body .yinse-item-popup-layer .yinse-item-popup-close:focus-visible {
    outline: none;
    color: #087f95;
    box-shadow: 0 9px 20px rgba(26, 174, 193, 0.29), inset 1px 1px 0 rgba(255, 255, 255, 0.98);
    transform: translateY(-2px) rotate(4deg);
}

.yinse-item-popup {
    padding: 22px;
    color: var(--yinse-text);
}

.yinse-item-popup .yinse-main,
.yinse-item-popup .yinse-shell {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.yinse-item-popup .yinse-item-unified-panel {
    margin: 0 !important;
}

@media (max-width: 1360px) {
    body .yinse-item-popup-backdrop-fx {
        display: none;
    }
}

@media (max-width: 767px) {
    body .yinse-item-popup-backdrop-fx {
        display: none;
    }

    .yinse-item-popup {
        padding: 14px;
    }
}

body .yinse-layer-popup .layui-layer-content,
body .yinse-layer-popup .yinse-notice-title,
body .yinse-layer-popup .yinse-notice-popup-inner,
body .yinse-layer-popup .yinse-notice-tip {
    color: var(--xn-ink) !important;
}

body .yinse-layer-popup .yinse-notice-modal-head {
    background: linear-gradient(180deg, #eaf8fb, #ffffff) !important;
    border-bottom-color: rgba(39, 174, 193, 0.16) !important;
}

.yinse-form-stack input.form-control,
.yinse-form-stack input.captcha-input {
    color: var(--xn-ink) !important;
}

.yinse-form-stack input.form-control::placeholder,
.yinse-form-stack input.captcha-input::placeholder {
    color: #7b93a1 !important;
}

body.ys .yinse-back-to-top,
#backToTop {
    border-color: rgba(39, 174, 193, 0.30) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: #0f6175 !important;
    box-shadow: var(--xn-shadow) !important;
}

body.ys .yinse-back-to-top:hover,
#backToTop:hover {
    background: #129eb5 !important;
    color: #ffffff !important;
}

/* Kept here rather than CedGrid.css: this button is shared by desktop and mobile. */
body.ys .yinse-back-to-top {
    position: fixed;
    right: max(16px, calc(env(safe-area-inset-right, 0px) + 10px));
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    z-index: 1035;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 253, 250, 0.80) !important;
    border-radius: 50%;
    background: rgba(255, 252, 248, 0.74) !important;
    color: #8a3732 !important;
    box-shadow: 0 9px 22px rgba(73, 42, 39, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
    backdrop-filter: blur(calc(var(--yinse-container-blur, 20px) + 4px)) saturate(116%);
    -webkit-backdrop-filter: blur(calc(var(--yinse-container-blur, 20px) + 4px)) saturate(116%);
    opacity: 0;
    pointer-events: none;
    touch-action: manipulation;
    transform: translate3d(0, 12px, 0) scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

body.ys .yinse-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

body.ys .yinse-back-to-top i {
    color: currentColor !important;
    font-size: 0.94rem;
}

body.ys .yinse-back-to-top:hover,
body.ys .yinse-back-to-top:focus-visible,
body.ys .yinse-back-to-top:active {
    outline: none;
    background: #8a3732 !important;
    color: #fffaf7 !important;
    box-shadow: 0 12px 26px rgba(78, 33, 30, 0.30), 0 0 0 3px rgba(162, 61, 55, 0.14) !important;
    transform: translate3d(0, -2px, 0) scale(1.03);
}

@media (max-width: 767px) {
    :root {
        --xn-block-gap: 14px;
    }

    body.ys .yinse-nav-wrap,
    body.ys .yinse-shell,
    body.ys .yinse-shell--narrow,
    body.ys .yinse-footer-wrap {
        width: calc(100% - 20px);
    }

    body.yinse-theme.ys {
        background-position: center, center, 60% top !important;
        background-attachment: fixed !important;
    }

    .yinse-banner-shell {
        margin-top: var(--xn-block-gap) !important;
    }

    body.ys .yinse-hero-banner {
        min-height: 268px;
        border-radius: 20px !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(242, 251, 253, 0.46)) !important;
    }

    body.ys .yinse-hero-banner--notice {
        padding: 0 !important;
        min-height: auto;
    }

    .yinse-hero-notice-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .yinse-hero-news.yinse-news-ticker {
        width: 100%;
    }

    body.ys .yinse-catalog-tools {
        position: static;
        width: 100%;
    }

    /* 手机端搜索保持单行，按钮收进输入框右侧。 */
    body.ys .yinse-search-combo {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: 44px;
        padding: 0;
        gap: 0;
        border: 1px solid var(--yinse-border-strong);
        border-radius: var(--yinse-radius-pill);
        background: var(--yinse-surface);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    body.ys .yinse-searchbox-combo {
        width: 100%;
        min-height: 42px;
        height: 42px;
        padding: 0 88px 0 13px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.ys .yinse-search-combo .item-search-trigger {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        z-index: 1;
        width: 76px;
        min-height: 0;
        padding: 0 10px;
        border-radius: var(--yinse-radius-pill);
        font-size: 0.78rem;
        gap: 5px;
    }

    body.ys .yinse-catalog-tools::before,
    body.ys .yinse-catalog-tools::after {
        display: none !important;
    }

    .yinse-hero-media {
        inset: 0;
    }

    .yinse-hero-media-image {
        left: -12px;
        top: -4px;
        width: calc(100% + 24px);
        height: calc(100% + 8px);
        object-fit: cover;
        object-position: 64% 43%;
        transform: translate3d(var(--yinse-hero-shift-x, 0px), var(--yinse-hero-shift-y, 0px), 0) scale(1.03);
    }

    .yinse-hero-actions {
        left: 18px;
        right: 18px;
        bottom: 12px;
        padding: 0;
    }

    .yinse-hero-title {
        left: 18px;
        right: 18px;
        bottom: 78px;
        gap: 10px;
    }

    .yinse-hero-title span {
        max-width: 100%;
        font-size: clamp(28px, 9.4vw, 38px);
        line-height: 0.95;
        text-wrap: balance;
    }

    .yinse-hero-title strong {
        max-width: min(100%, 330px);
        font-size: clamp(12px, 3.8vw, 15px);
        line-height: 1.18;
        text-wrap: balance;
    }

    .yinse-hero-actions .cyber-nav-buttons {
        justify-content: flex-start;
        align-items: flex-start;
        gap: 6px;
        max-height: 58px;
        overflow: hidden;
    }

    .yinse-hero-actions .cyber-btn-item {
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(50% - 4px);
        min-height: 28px;
        padding: 0 9px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 8px 18px rgba(26, 73, 95, 0.12);
    }

}

@media (max-width: 420px) {
    body.ys .yinse-hero-banner {
        min-height: 268px;
    }

    .yinse-hero-media-image {
        left: -12px;
        top: -4px;
        width: calc(100% + 24px);
        height: calc(100% + 8px);
        object-position: 66% 42%;
    }

    .yinse-hero-title {
        bottom: 76px;
    }

    .yinse-hero-title span {
        font-size: clamp(26px, 9vw, 34px);
    }

    .yinse-hero-title strong {
        font-size: 12px;
    }

    .yinse-hero-actions .cyber-nav-buttons {
        gap: 6px;
        max-height: 58px;
    }

    .yinse-hero-actions .cyber-btn-item {
        max-width: calc(50% - 4px);
        min-height: 28px;
        padding: 0 8px;
        font-size: 11px;
    }
}


/* YinSe visual overrides */
/*
 * Yinse Custom Theme
 * YinSe Store visual layer
 */

:root {
    --yinse-visual-ink: #102738;
    --yinse-visual-ink-soft: #1d4055;
    --yinse-visual-blue: #35c9d5;
    --yinse-visual-blue-deep: #0b7f9a;
    --yinse-visual-blue-soft: #c9f4ff;
    --yinse-visual-sky: #c9f4ff;
    --yinse-visual-paper: rgba(255, 255, 255, 0.82);
    --yinse-visual-paper-strong: rgba(255, 255, 255, 0.88);
    --yinse-visual-glass-dark: rgba(11, 32, 50, 0.56);
    --yinse-visual-line: rgba(39, 174, 193, 0.26);
    --yinse-visual-line-strong: rgba(39, 174, 193, 0.48);
    --yinse-visual-shadow: 0 18px 44px rgba(26, 73, 95, 0.18);
    --yinse-visual-shadow-hover: 0 24px 56px rgba(26, 73, 95, 0.25);
    --yinse-visual-rgb-cyan: #8deaf2;
    --yinse-visual-rgb-pink: #ff4fa3;
    --yinse-visual-rgb-lime: #7ee8a8;
    --yinse-visual-rgb-violet: #35c9d5;
}

@keyframes yinseRgbHoverFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

body.yinse-theme.ys {
    --yinse-visual-glass-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(242, 251, 253, 0.46));
    --yinse-bg: rgba(234, 248, 251, 0.72);
    --yinse-surface: var(--yinse-visual-paper);
    --yinse-black: var(--yinse-visual-blue-deep);
    --yinse-text: var(--yinse-visual-ink);
    --yinse-muted: #607889;
    --yinse-muted-strong: #35586b;
    --yinse-muted-soft: var(--yinse-visual-blue);
    --yinse-link: var(--yinse-visual-blue-deep);
    --yinse-border: var(--yinse-visual-line);
    --yinse-border-strong: var(--yinse-visual-line-strong);
    --yinse-accent: var(--yinse-visual-blue);
    --yinse-accent-light: var(--yinse-visual-blue-soft);
    --yinse-accent-rgb: 53, 201, 213;
    --yinse-shadow-soft: var(--yinse-visual-shadow);
    --yinse-shadow-elevated: var(--yinse-visual-shadow-hover);
    background-color: #dff4f8 !important;
    color: var(--yinse-visual-ink) !important;
}

body.yinse-theme.ys.yinse-bg-mask-on::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(223, 244, 248, 0.62)),
        linear-gradient(90deg, rgba(13, 22, 31, 0.12), transparent 54%) !important;
}

body.ys .yinse-nav,
body.ys .panel,
body.ys .yinse-item-unified-panel,
body.ys .yinse-footer-wrap,
body.ys .yinse-layer-popup,
body.ys .component-popup {
    border-color: var(--yinse-visual-line) !important;
    background: var(--yinse-visual-glass-surface) !important;
    color: var(--yinse-visual-ink) !important;
    box-shadow: var(--yinse-visual-shadow) !important;
}

body.ys .yinse-nav::after,
body.ys .panel::before,
body.ys .yinse-hero-banner--notice::after {
    background: linear-gradient(90deg, transparent, rgba(141, 234, 242, 0.9), rgba(255, 79, 163, 0.78), rgba(141, 234, 242, 0.76), transparent) !important;
    box-shadow: 0 0 12px rgba(53, 201, 213, 0.28) !important;
}

body.ys .yinse-brand::after,
body.ys .yinse-description-body a::after,
body.ys .btn-copy-card::after,
body.ys .cyber-back-btn::after,
body.ys .yinse-description-body blockquote::after,
body.ys .yinse-brand-chip::after,
body.ys .panel-header::after,
.yinse-hero-notice-head::after {
    display: none !important;
}

body.ys .yinse-brand::before {
    background:
        radial-gradient(circle at 22px 50%, rgba(120, 191, 245, 0.16), transparent 42px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(218, 238, 255, 0.28)) !important;
}

body.ys .yinse-brand-name {
    color: var(--yinse-visual-ink) !important;
    background: none !important;
    text-shadow: 0 6px 18px rgba(10, 34, 55, 0.10) !important;
}

body.ys .yinse-brand:hover .yinse-brand-name,
body.ys .yinse-brand:focus-visible .yinse-brand-name {
    color: var(--yinse-visual-blue-deep) !important;
    filter: drop-shadow(0 0 10px rgba(120, 191, 245, 0.30)) !important;
}

body.ys .yinse-brand-mark,
body.ys .yinse-user-avatar,
body.ys .item-cover {
    border-color: rgba(120, 191, 245, 0.36) !important;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.74),
        0 8px 20px rgba(10, 34, 55, 0.12) !important;
}

body.ys .yinse-nav-link,
body.ys .yinse-button-light,
body.ys .yinse-user-chip,
body.ys .yinse-searchbox,
body.ys .yinse-search-combo,
body.ys .form-control,
body.ys .qty-group,
body.ys .password-form .input-group {
    border-color: rgba(120, 191, 245, 0.24) !important;
    background: rgba(246, 251, 255, 0.76) !important;
    color: var(--yinse-visual-ink) !important;
    box-shadow: none !important;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease !important;
}

body.ys .yinse-button-dark,
body.ys .yinse-nav-link:hover,
body.ys .yinse-nav-link.is-active,
body.ys .yinse-commodity-action-link,
body.ys .sku.is-primary,
body.ys .view-card-btn,
body.ys .component-popup .queryBtn,
body.ys .component-popup .query-button {
    border-color: rgba(11, 127, 154, 0.7) !important;
    background: linear-gradient(135deg, #0b7f9a, #35c9d5 58%, #ff71be) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.3),
        0 12px 28px rgba(11, 127, 154, 0.24) !important;
}

body.ys .yinse-nav-link:hover,
body.ys .yinse-button-dark:hover,
body.ys .yinse-commodity-action-link:hover,
body.ys .view-card-btn:hover,
body.ys .component-popup .queryBtn:hover,
body.ys .component-popup .query-button:hover,
.yinse-hero-actions .cyber-btn-item:hover {
    background: linear-gradient(120deg, #8deaf2, #35c9d5, #ff4fa3, #c9f4ff, #8deaf2) !important;
    background-size: 280% 280% !important;
    color: #ffffff !important;
    animation: yinseRgbHoverFlow 3.2s ease infinite !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 0 18px rgba(53, 201, 213, 0.34),
        0 14px 32px rgba(26, 73, 95, 0.2) !important;
}

body.ys .yinse-button-light:hover,
body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-dropdown-menu .dropdown-item:hover {
    border-color: rgba(39, 174, 193, 0.48) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(242, 251, 253, 0.88)) !important;
    color: var(--yinse-visual-blue-deep) !important;
}

body.ys .yinse-hero-banner {
    min-height: 286px;
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: var(--yinse-visual-glass-dark) !important;
    box-shadow: 0 20px 52px rgba(10, 34, 55, 0.26) !important;
}

body.ys .yinse-hero-banner--notice {
    min-height: 260px !important;
    border-color: var(--yinse-visual-line) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(233, 246, 255, 0.54)) !important;
    color: var(--yinse-visual-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        var(--yinse-visual-shadow) !important;
}

body.ys .yinse-hero-banner--notice::before {
    display: none !important;
    content: none !important;
}

body.ys .yinse-hero-banner--notice > * {
    position: relative;
    z-index: 1;
}

.yinse-hero-notice-head {
    border-bottom-color: rgba(120, 191, 245, 0.30) !important;
    background:
        linear-gradient(90deg, rgba(246, 251, 255, 0.72), rgba(218, 238, 255, 0.42), transparent) !important;
}

.yinse-hero-notice-title {
    color: var(--yinse-visual-ink) !important;
    text-shadow: none !important;
}

.yinse-hero-notice-title i {
    border-color: rgba(120, 191, 245, 0.40) !important;
    background: rgba(246, 251, 255, 0.84) !important;
    color: var(--yinse-visual-blue-deep) !important;
    box-shadow: 0 8px 18px rgba(10, 34, 55, 0.18), 0 0 14px rgba(120, 191, 245, 0.18) !important;
}

.yinse-hero-news.yinse-news-ticker {
    color: var(--yinse-visual-ink) !important;
}

.yinse-hero-news .yinse-news-ticker-track,
.yinse-hero-news .yinse-news-ticker-track * {
    color: inherit !important;
}

.yinse-hero-notice-body {
    color: var(--yinse-visual-ink) !important;
    text-shadow: none !important;
}

.yinse-hero-notice-body h1,
.yinse-hero-notice-body h2,
.yinse-hero-notice-body h3,
.yinse-hero-notice-body strong,
.yinse-hero-notice-body b {
    color: var(--yinse-visual-ink-soft) !important;
    text-shadow: none !important;
}

.yinse-hero-notice-body a {
    color: var(--yinse-visual-blue-deep) !important;
    text-decoration-color: rgba(45, 111, 159, 0.42) !important;
}

.yinse-hero-notice-body hr {
    border-color: rgba(120, 191, 245, 0.28) !important;
    opacity: 1;
}

.yinse-hero-notice-body [style*="color"] {
    text-shadow: 0 0 12px rgba(120, 191, 245, 0.16);
}

body.ys .yinse-hero-banner--image::before {
    display: none;
}

.yinse-hero-media-image {
    filter: saturate(1.04) contrast(1.03);
}

.yinse-hero-title {
    left: 44px;
    bottom: 92px;
    gap: 18px;
    transform: perspective(1000px) translate3d(var(--yinse-visual-motion-x, 0px), var(--yinse-visual-motion-y, 0px), 0) rotateX(var(--yinse-visual-motion-rotate-x, 0deg)) rotateY(var(--yinse-visual-motion-rotate-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.yinse-hero-title .yinse-hero-title-main {
    position: relative;
    display: inline-block;
    color: #ffffff !important;
    text-shadow:
        0 5px 24px rgba(7, 16, 26, 0.66),
        0 0 24px rgba(120, 191, 245, 0.30) !important;
    animation: yinse-hero-title-glitch 5.6s steps(1, end) infinite;
}

.yinse-hero-title .yinse-hero-title-main::before,
.yinse-hero-title .yinse-hero-title-main::after {
    position: absolute;
    inset: 0;
    content: attr(data-text);
    pointer-events: none;
    opacity: 0;
}

.yinse-hero-title .yinse-hero-title-main::before {
    color: #70ecf5;
    text-shadow: -2px 0 12px rgba(80, 232, 246, 0.72);
    animation: yinse-hero-title-glitch-cyan 5.6s steps(1, end) infinite;
}

.yinse-hero-title .yinse-hero-title-main::after {
    color: #ff78bc;
    text-shadow: 2px 0 12px rgba(255, 105, 181, 0.68);
    animation: yinse-hero-title-glitch-pink 5.6s steps(1, end) infinite;
}

.yinse-hero-title:hover .yinse-hero-title-main {
    animation: yinse-hero-title-glitch-trigger 0.74s steps(1, end) both;
}

.yinse-hero-title:hover .yinse-hero-title-main::before {
    animation: yinse-hero-title-glitch-trigger-cyan 0.74s steps(1, end) both;
}

.yinse-hero-title:hover .yinse-hero-title-main::after {
    animation: yinse-hero-title-glitch-trigger-pink 0.74s steps(1, end) both;
}

.yinse-hero-title strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #d9efff !important;
    padding-left: 14px;
    letter-spacing: 0.025em;
    text-shadow: 0 4px 18px rgba(7, 16, 26, 0.56) !important;
}

.yinse-hero-title strong::before {
    position: absolute;
    left: 0;
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 50%;
    background: #6eeaf4;
    box-shadow: 0 0 0 4px rgba(110, 234, 244, 0.14), 0 0 14px rgba(110, 234, 244, 0.92);
    animation: yinse-hero-signal-pulse 2.4s ease-in-out infinite;
}

.yinse-hero-title::after {
    display: none;
}

.yinse-hero-title-rule {
    position: relative;
    display: block;
    --yinse-hero-rule-rest: min(222px, 34vw);
    --yinse-hero-rule-extend: min(294px, 44vw);
    width: var(--yinse-hero-rule-rest);
    height: 2px;
    margin-top: 1px;
    background: linear-gradient(90deg, #6beaf4 0 34%, rgba(202, 247, 252, 0.72) 34% 82%, rgba(255, 129, 192, 0.82) 82% 100%);
    box-shadow: 0 0 10px rgba(83, 224, 239, 0.38);
    animation: yinse-hero-rule-breathe 4.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.yinse-hero-title-rule::before {
    position: absolute;
    top: 50%;
    left: -5px;
    width: 6px;
    height: 6px;
    content: "";
    border: 1px solid rgba(221, 255, 255, 0.94);
    border-radius: 50%;
    background: #62e9f3;
    box-shadow: 0 0 0 3px rgba(98, 233, 243, 0.16), 0 0 12px rgba(98, 233, 243, 0.72);
    transform: translateY(-50%);
}

.yinse-hero-title-rule::after {
    position: absolute;
    top: -2px;
    right: 16%;
    width: 16px;
    height: 6px;
    content: "";
    border-radius: 1px;
    background: #ff86c4;
    box-shadow: 0 0 10px rgba(255, 134, 196, 0.7);
    transform-origin: left center;
    animation: yinse-hero-rule-pulse 4.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

@keyframes yinse-hero-title-glitch {
    0%, 70%, 100% {
        filter: none;
        transform: translate3d(0, 0, 0);
    }

    71% {
        filter: brightness(1.62) contrast(1.14);
        transform: translate3d(-3px, -1px, 0) skewX(-1.2deg);
    }

    72% {
        filter: brightness(0.78) contrast(1.22);
        transform: translate3d(3px, 1px, 0) skewX(1.4deg);
    }

    73% {
        filter: none;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes yinse-hero-title-glitch-cyan {
    0%, 69%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 100% 0); }
    70% { opacity: 0.96; transform: translate3d(-8px, -2px, 0); clip-path: inset(14% 0 56% 0); }
    71% { opacity: 0.7; transform: translate3d(6px, 2px, 0); clip-path: inset(56% 0 12% 0); }
    72% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 100% 0); }
}

@keyframes yinse-hero-title-glitch-pink {
    0%, 71%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 100% 0); }
    72% { opacity: 0.94; transform: translate3d(8px, 2px, 0); clip-path: inset(4% 0 66% 0); }
    73% { opacity: 0.66; transform: translate3d(-5px, -2px, 0); clip-path: inset(66% 0 5% 0); }
    74% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 100% 0); }
}

@keyframes yinse-hero-title-glitch-trigger {
    0%, 100% {
        filter: none;
        transform: translate3d(0, 0, 0);
    }

    12% {
        filter: brightness(1.72) contrast(1.2);
        transform: translate3d(-4px, -1px, 0) skewX(-1.5deg);
    }

    26% {
        filter: brightness(0.74) contrast(1.24);
        transform: translate3d(4px, 1px, 0) skewX(1.5deg);
    }

    38% {
        filter: brightness(1.24);
        transform: translate3d(-2px, 0, 0);
    }
}

@keyframes yinse-hero-title-glitch-trigger-cyan {
    0%, 8%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 100% 0); }
    10% { opacity: 1; transform: translate3d(-10px, -2px, 0); clip-path: inset(12% 0 55% 0); }
    24% { opacity: 0.72; transform: translate3d(7px, 2px, 0); clip-path: inset(55% 0 12% 0); }
    38% { opacity: 0.32; transform: translate3d(-4px, 0, 0); clip-path: inset(30% 0 38% 0); }
}

@keyframes yinse-hero-title-glitch-trigger-pink {
    0%, 14%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 100% 0); }
    16% { opacity: 1; transform: translate3d(10px, 2px, 0); clip-path: inset(4% 0 65% 0); }
    28% { opacity: 0.76; transform: translate3d(-6px, -2px, 0); clip-path: inset(65% 0 5% 0); }
    42% { opacity: 0.34; transform: translate3d(4px, 0, 0); clip-path: inset(37% 0 31% 0); }
}

@keyframes yinse-hero-signal-pulse {
    0%, 100% { opacity: 0.64; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.16); }
}

@keyframes yinse-hero-rule-breathe {
    0%, 100% {
        width: var(--yinse-hero-rule-rest);
    }

    48% {
        width: var(--yinse-hero-rule-extend);
    }
}

@keyframes yinse-hero-rule-pulse {
    0%, 100% {
        opacity: 0.52;
        transform: scaleX(0.76);
        box-shadow: 0 0 7px rgba(255, 134, 196, 0.38);
    }

    48% {
        opacity: 1;
        transform: scaleX(1.5);
        box-shadow: 0 0 16px rgba(255, 134, 196, 0.92), 0 0 28px rgba(107, 234, 244, 0.42);
    }
}

.yinse-hero-side-notice {
    position: absolute;
    top: 32px;
    right: clamp(24px, 7vw, 88px);
    z-index: 2;
    width: min(42vw, 540px);
    display: grid;
    gap: 10px;
    pointer-events: auto;
}

.yinse-hero-side-notice p,
.yinse-hero-side-notice div {
    margin: 0 !important;
}

.yinse-hero-side-notice p {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid rgba(201, 244, 255, 0.46);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(11, 127, 154, 0.58), rgba(255, 79, 163, 0.34)),
        rgba(255, 255, 255, 0.16);
    color: #f4fbff;
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 850;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 2px 10px rgba(52, 44, 76, 0.56);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 12px 28px rgba(11, 32, 50, 0.2),
        0 0 18px rgba(53, 201, 213, 0.18);
    backdrop-filter: blur(10px) saturate(132%);
    -webkit-backdrop-filter: blur(10px) saturate(132%);
    transform: perspective(760px) translate3d(var(--yinse-visual-motion-x, 0px), var(--yinse-visual-motion-y, 0px), 0) rotateX(var(--yinse-visual-motion-rotate-x, 0deg)) rotateY(var(--yinse-visual-motion-rotate-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.yinse-hero-side-notice p:nth-child(2) {
    border-color: rgba(255, 79, 163, 0.48);
    background:
        linear-gradient(135deg, rgba(11, 127, 154, 0.62), rgba(255, 79, 163, 0.44)),
        rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 12px 28px rgba(11, 32, 50, 0.2),
        0 0 18px rgba(255, 79, 163, 0.2);
}

.yinse-hero-side-notice p:nth-child(3) {
    min-height: 48px;
    border-color: rgba(141, 234, 242, 0.48);
    color: #e9f7ff;
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 760;
}

.yinse-hero-actions .cyber-btn-item {
    position: relative;
    min-height: 42px;
    overflow: hidden;
    padding: 0 19px 0 16px;
    border-color: rgba(151, 240, 247, 0.62) !important;
    border-radius: 7px;
    background: linear-gradient(115deg, rgba(7, 55, 76, 0.9), rgba(12, 130, 153, 0.72) 64%, rgba(152, 67, 126, 0.72)) !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.06em;
    box-shadow: inset 0 1px 0 rgba(222, 255, 255, 0.24), 0 9px 20px rgba(7, 31, 48, 0.28), 0 0 0 1px rgba(55, 216, 229, 0.1) !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.yinse-hero-actions .cyber-btn-item::before {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 5px;
    width: 2px;
    content: "";
    background: linear-gradient(180deg, #8df6ff, #30cbd9 64%, #ff88c3);
    box-shadow: 0 0 8px rgba(87, 233, 242, 0.72);
}

.yinse-hero-actions .cyber-btn-item::after {
    position: absolute;
    top: -30%;
    left: 0;
    width: 38%;
    height: 170%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(227, 255, 255, 0.36), transparent);
    pointer-events: none;
    transform: translateX(-185%) skewX(-18deg);
    transition: transform 0.52s ease;
}

.yinse-hero-actions .cyber-btn-item i,
.yinse-hero-actions .cyber-btn-item span {
    position: relative;
    z-index: 1;
}

.yinse-hero-actions .cyber-btn-item i {
    color: #94f5fb;
    font-size: 14px;
    text-shadow: 0 0 10px rgba(119, 240, 247, 0.56);
}

body.ys .yinse-hero-actions .cyber-btn-item:hover,
body.ys .yinse-hero-actions .cyber-btn-item:focus-visible {
    border-color: rgba(242, 255, 255, 0.84) !important;
    background: linear-gradient(115deg, rgba(8, 80, 106, 0.96), rgba(19, 161, 180, 0.8) 63%, rgba(188, 82, 151, 0.78)) !important;
    color: #ffffff !important;
    outline: none;
    animation: none !important;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(238, 255, 255, 0.38), 0 13px 24px rgba(7, 34, 54, 0.34), 0 0 18px rgba(56, 221, 233, 0.28) !important;
}

.yinse-hero-actions .cyber-btn-item:hover::after,
.yinse-hero-actions .cyber-btn-item:focus-visible::after {
    transform: translateX(310%) skewX(-18deg);
}

.yinse-hero-actions {
    transform: perspective(900px) translate3d(var(--yinse-visual-motion-x, 0px), var(--yinse-visual-motion-y, 0px), 0) rotateX(var(--yinse-visual-motion-rotate-x, 0deg)) rotateY(var(--yinse-visual-motion-rotate-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.yinse-hero-side-notice p:hover {
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 32px rgba(11, 32, 50, 0.28), 0 0 22px rgba(255, 79, 163, 0.22);
}

body.ys .yinse-hero-banner--image.yinse-hero-banner--surface {
    border-color: var(--yinse-border) !important;
    background: var(--yinse-visual-glass-surface) !important;
    box-shadow: var(--yinse-shadow-soft) !important;
}

body.ys .yinse-hero-banner--surface .yinse-hero-title .yinse-hero-title-main {
    color: var(--yinse-visual-blue-deep) !important;
    text-shadow: 0 0 18px rgba(53, 201, 213, 0.18) !important;
}

body.ys .yinse-hero-banner--surface .yinse-hero-title strong {
    color: var(--yinse-visual-ink-soft) !important;
    text-shadow: none !important;
}

body.ys .yinse-hero-banner--surface .yinse-hero-title-rule {
    background: linear-gradient(90deg, var(--yinse-visual-blue), #ff4fa3, #8deaf2) !important;
}

body.ys .yinse-hero-banner--surface .yinse-hero-side-notice p {
    border-color: var(--yinse-border-strong);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(242, 251, 253, 0.88));
    color: var(--yinse-visual-ink);
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 10px 22px rgba(26, 73, 95, 0.1);
}

body.ys .yinse-hero-banner--surface .yinse-hero-actions .cyber-btn-item {
    border-color: rgba(11, 127, 154, 0.62) !important;
    background: linear-gradient(135deg, #0b7f9a, #35c9d5 58%, #ff71be) !important;
}

body.ys .yinse-news-ticker {
    border-color: rgba(120, 191, 245, 0.20) !important;
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-news-ticker-track span[style] {
    border: 1px solid rgba(120, 191, 245, 0.30) !important;
    border-radius: 999px !important;
    background: rgba(246, 251, 255, 0.86) !important;
    color: var(--yinse-visual-blue-deep) !important;
    box-shadow: 0 6px 16px rgba(10, 34, 55, 0.08) !important;
}

body.ys .yinse-category-link {
    border-color: rgba(120, 191, 245, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(223, 244, 248, 0.42)) !important;
}

body.ys .yinse-category-link::before {
    background:
        linear-gradient(90deg, rgba(120, 191, 245, 0.08), transparent 48%) !important;
}

body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-commodity-card:hover .row-inner,
body.ys .yinse-commodity-card.is-inline-active .row-inner {
    border-color: rgba(120, 191, 245, 0.52) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.34),
        0 0 18px rgba(120, 191, 245, 0.22),
        0 16px 34px rgba(10, 34, 55, 0.14) !important;
}

body.ys .yinse-commodity-card .row-inner,
body.ys .yinse-item-purchase-card,
body.ys .cash-pay--independent {
    border-color: rgba(120, 191, 245, 0.22) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(235, 247, 255, 0.52)) !important;
}

body.ys .panel-title,
body.ys .yinse-index-panel-title,
body.ys .yinse-item-inline-title,
body.ys .yinse-current-name,
body.ys .panel-title-small,
body.ys .yinse-item-price .price {
    color: var(--yinse-visual-ink-soft) !important;
    background: none !important;
    text-shadow: none !important;
}

body.ys .yinse-item-price .price {
    color: var(--yinse-visual-blue-deep) !important;
}

body.ys .yinse-payment-notice {
    border-color: rgba(120, 191, 245, 0.30) !important;
    background:
        linear-gradient(90deg, rgba(11, 18, 28, 0.86), rgba(34, 62, 86, 0.74)),
        var(--yinse-page-background-image, none) !important;
}

body.ys .yinse-payment-notice a {
    color: #9bd8ff !important;
}

body.ys .yinse-commodity-list-meta {
    display: none;
}

body.ys .yinse-heart-particle {
    color: var(--heart-color, var(--yinse-visual-blue)) !important;
    text-shadow:
        0 0 8px currentColor,
        0 0 16px rgba(53, 201, 213, 0.24) !important;
    filter:
        drop-shadow(0 8px 14px rgba(124, 108, 194, 0.22))
        drop-shadow(0 0 8px color-mix(in srgb, var(--heart-color, var(--yinse-visual-blue)) 42%, transparent)) !important;
}

body.ys .yinse-heart-particle.is-near-mouse {
    filter:
        drop-shadow(0 10px 18px rgba(255, 79, 163, 0.3))
        drop-shadow(0 0 12px color-mix(in srgb, var(--heart-color, var(--yinse-visual-blue)) 62%, transparent))
        drop-shadow(0 0 8px rgba(238, 234, 255, 0.32)) !important;
}

@keyframes yinseHeartFloat {
    0% {
        opacity: 0;
        transform:
            translate3d(-50%, 0, 0)
            rotate(calc(var(--heart-rotate, 0deg) + var(--heart-mouse-rotate, 0deg)))
            scale(calc(0.16 * var(--heart-mouse-scale, 1)));
    }

    7% {
        opacity: calc(var(--heart-opacity, 0.72) * 0.82);
        transform:
            translate3d(calc(-50% + var(--heart-drift-a, 12px) * 0.18), -10px, 0)
            rotate(calc(var(--heart-rotate, 0deg) * 0.65 + var(--heart-mouse-rotate, 0deg)))
            scale(calc(1.42 * var(--heart-depth-scale, 1) * var(--heart-mouse-scale, 1)));
    }

    16% {
        opacity: var(--heart-opacity, 0.72);
        transform:
            translate3d(calc(-50% + var(--heart-drift-a, 12px)), calc(var(--heart-rise, -72vh) * 0.14), 0)
            rotate(calc(var(--heart-rotate, 0deg) * -0.18 + var(--heart-mouse-rotate, 0deg)))
            scale(calc(0.92 * var(--heart-depth-scale, 1) * var(--heart-mouse-scale, 1)));
    }

    34% {
        opacity: calc(var(--heart-opacity, 0.72) * 0.92);
        transform:
            translate3d(calc(-50% + var(--heart-drift-b, -42px) * 0.72), calc(var(--heart-rise, -72vh) * 0.38), 0)
            rotate(calc(var(--heart-rotate, 0deg) * -0.8 + var(--heart-spin, 28deg) * 0.18 + var(--heart-mouse-rotate, 0deg)))
            scale(calc(1.05 * var(--heart-depth-scale, 1) * var(--heart-mouse-scale, 1)));
    }

    58% {
        opacity: calc(var(--heart-opacity, 0.72) * 0.76);
        transform:
            translate3d(calc(-50% + var(--heart-drift-c, 26px)), calc(var(--heart-rise, -72vh) * 0.64), 0)
            rotate(calc(var(--heart-rotate, 0deg) * 0.46 + var(--heart-spin, 28deg) * 0.52 + var(--heart-mouse-rotate, 0deg)))
            scale(calc(0.86 * var(--heart-depth-scale, 1) * var(--heart-mouse-scale, 1)));
    }

    82% {
        opacity: calc(var(--heart-opacity, 0.72) * 0.38);
        transform:
            translate3d(calc(-50% + var(--heart-drift, -18px) * 0.82), calc(var(--heart-rise, -72vh) * 0.88), 0)
            rotate(calc(var(--heart-rotate, 0deg) * -0.22 + var(--heart-spin, 28deg) * 0.82 + var(--heart-mouse-rotate, 0deg)))
            scale(calc(0.72 * var(--heart-depth-scale, 1) * var(--heart-mouse-scale, 1)));
    }

    100% {
        opacity: 0;
        transform:
            translate3d(calc(-50% + var(--heart-drift, -18px)), var(--heart-rise, -72vh), 0)
            rotate(calc(var(--heart-rotate, 0deg) + var(--heart-spin, 28deg) + var(--heart-mouse-rotate, 0deg)))
            scale(calc(0.46 * var(--heart-depth-scale, 1) * var(--heart-mouse-scale, 1)));
    }
}

html,
#yinse-category-tree {
    scrollbar-color: #35c9d5 rgba(255, 255, 255, 0.46);
    scrollbar-width: thin;
}

html::-webkit-scrollbar,
#yinse-category-tree::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
#yinse-category-tree::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.46) !important;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb,
#yinse-category-tree::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    background: linear-gradient(180deg, #c9f4ff 0%, #35c9d5 48%, #ff4fa3 100%) !important;
    background-clip: padding-box;
    box-shadow: 0 2px 8px rgba(129, 103, 189, 0.24);
}

html::-webkit-scrollbar-thumb:hover,
#yinse-category-tree::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #eaf8fb 0%, #35c9d5 45%, #ff71be 100%) !important;
    box-shadow: 0 3px 10px rgba(255, 79, 163, 0.30);
}

@media (max-width: 767px) {
    body.ys .yinse-hero-banner {
        min-height: 288px;
    }

    body.ys .yinse-hero-banner--notice {
        min-height: auto !important;
    }

    .yinse-hero-notice-head {
        padding: 12px 14px 10px !important;
        gap: 8px !important;
    }

    .yinse-hero-notice-title {
        font-size: 15px !important;
    }

    .yinse-hero-notice-body {
        padding: 12px 14px 15px !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .yinse-hero-title {
        left: 18px;
        right: 18px;
        top: 32px;
        bottom: auto;
        gap: 10px;
    }

    .yinse-hero-title span {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 0.94 !important;
    }

    .yinse-hero-title strong {
        max-width: min(100%, 320px);
        font-size: 12px !important;
        line-height: 1.18 !important;
    }

    /* 没有右侧公告时，标题后的按钮会成为直接相邻元素；此时收紧标题组本身。 */
    .yinse-hero-title:has(+ .yinse-hero-actions) {
        top: 91px;
        gap: 6px;
    }

    .yinse-hero-title::after {
        width: 112px;
        height: 2px;
        margin-top: 7px;
    }

    .yinse-hero-side-notice {
        left: 18px;
        right: 18px;
        top: 118px;
        bottom: auto;
        width: auto;
        gap: 5px;
    }

    .yinse-hero-side-notice p {
        min-height: 0;
        padding: 5px 8px;
        border-radius: 8px;
        font-size: 11px;
        line-height: 1.28;
    }

    .yinse-hero-side-notice p:nth-child(3) {
        min-height: 0;
        font-size: 11px;
    }

    .yinse-hero-side-notice + .yinse-hero-actions {
        bottom: 10px;
    }

    .yinse-hero-side-notice + .yinse-hero-actions .cyber-nav-buttons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        max-height: none;
        overflow: visible;
    }

    .yinse-hero-side-notice + .yinse-hero-actions .cyber-btn-item {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        max-width: none;
        padding: 0 4px;
        gap: 3px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .yinse-hero-side-notice + .yinse-hero-actions .cyber-btn-item i {
        font-size: 11px;
    }

    .yinse-hero-title + .yinse-hero-actions {
        top: 190px;
        bottom: auto;
    }

    .yinse-hero-title + .yinse-hero-actions .cyber-nav-buttons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        max-height: none;
        overflow: visible;
    }

    .yinse-hero-title + .yinse-hero-actions .cyber-btn-item {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        max-width: none;
        padding: 0 5px;
        gap: 4px;
        font-size: 10px;
        letter-spacing: 0;
    }

    .yinse-hero-title + .yinse-hero-actions .cyber-btn-item i {
        font-size: 12px;
    }

    .yinse-hero-media-image {
        object-position: 56% 42% !important;
    }
}

@media (max-width: 420px) {
    .yinse-hero-title {
        top: 28px;
    }

    .yinse-hero-title span {
        font-size: clamp(26px, 8.8vw, 34px) !important;
    }

    .yinse-hero-title strong {
        font-size: 11px !important;
    }

    .yinse-hero-title:has(+ .yinse-hero-actions) {
        top: 85px;
        gap: 5px;
    }

    .yinse-hero-title + .yinse-hero-actions {
        top: 177px;
        bottom: auto;
    }

    .yinse-hero-side-notice {
        top: 104px;
        gap: 4px;
    }

    .yinse-hero-side-notice p {
        padding: 4px 7px;
        font-size: 11px;
        line-height: 1.24;
    }

    .yinse-hero-side-notice p:nth-child(3) {
        font-size: 11px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .yinse-hero-side-notice {
        right: 24px;
        top: 28px;
        width: min(48vw, 420px);
        gap: 8px;
    }

    .yinse-hero-side-notice p {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 12px;
    }
}

@media (min-width: 1024px) {
    body.ys .yinse-shop-layout {
        display: grid !important;
        grid-template-columns: minmax(236px, 280px) minmax(0, 1fr) !important;
        grid-template-areas:
            "sidebar catalog"
            "sidebar detail" !important;
        align-items: start !important;
        gap: 18px !important;
    }

    body.ys .yinse-sidebar-panel {
        grid-area: sidebar !important;
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        position: sticky !important;
        top: 104px !important;
        max-height: calc(100vh - 124px);
        overflow: hidden !important;
    }

    body.ys .yinse-catalog-panel {
        grid-area: catalog !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    body.ys .yinse-inline-item-panel {
        grid-area: detail !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
    }

    body.ys .yinse-sidebar-panel .panel-body {
        max-height: calc(100vh - 228px);
        overflow: hidden auto !important;
        padding: 12px !important;
    }

    body.ys .yinse-category-tree {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 8px !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 2px !important;
    }

    body.ys .yinse-category-node {
        display: block !important;
        min-width: 0 !important;
    }

    body.ys .yinse-category-row {
        display: block !important;
        padding-left: calc(var(--yinse-depth, 0) * 10px) !important;
    }

    body.ys .yinse-category-tree.is-floating .yinse-category-row {
        animation: none !important;
        transform: none !important;
    }

    body.ys .yinse-category-link {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    body.ys .yinse-category-link:hover,
    body.ys .yinse-category-link.is-active {
        transform: translateX(4px) !important;
    }

    body.ys .yinse-category-icon {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    body.ys .yinse-category-copy {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body.ys .yinse-category-name {
        max-width: 100% !important;
        font-size: 0.9rem !important;
    }

    body.ys .yinse-catalog-heading {
        min-height: 86px !important;
        align-items: center !important;
    }

    body.ys .yinse-catalog-tools {
        top: 24px !important;
        right: 18px !important;
        width: min(42%, 360px) !important;
    }

    body.ys .yinse-card-catalog-wrap {
        padding: 12px !important;
    }

    body.ys .yinse-commodity-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.ys .yinse-commodity-card .row-inner,
    body.ys .yinse-card-guren-mode .yinse-commodity-card .row-inner {
        min-height: 76px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(470px, 46%) !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 9px 12px !important;
        border-radius: 8px !important;
    }

    body.ys .yinse-commodity-card:hover .row-inner {
        transform: translateX(3px) !important;
    }

    body.ys .yinse-commodity-card-main,
    body.ys .yinse-card-guren-mode .yinse-commodity-card-main {
        min-width: 0 !important;
        height: auto !important;
        align-items: center !important;
        gap: 12px !important;
    }

    body.ys .yinse-commodity-thumb,
    body.ys .yinse-card-guren-mode .yinse-commodity-thumb {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        border-radius: 7px !important;
    }

    body.ys .yinse-commodity-copy,
    body.ys .yinse-card-guren-mode .yinse-commodity-copy {
        min-height: 0 !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    body.ys .yinse-commodity-name {
        font-size: 0.94rem !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body.ys .yinse-commodity-list-meta {
        display: grid !important;
        grid-template-columns: 112px 118px 104px 96px !important;
        align-items: center !important;
        justify-content: end !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    body.ys .yinse-commodity-list-cell {
        width: 100% !important;
        height: 34px !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.ys .yinse-commodity-list-delivery {
        justify-content: center !important;
    }

    body.ys .yinse-commodity-list-stock {
        justify-content: center !important;
    }

    body.ys .yinse-commodity-list-price {
        justify-content: center !important;
    }

    body.ys .yinse-commodity-list-action {
        justify-content: center !important;
    }

    body.ys .yinse-desktop-delivery {
        width: 92px !important;
        min-width: 0 !important;
        height: 28px !important;
        padding: 0 10px !important;
        justify-content: center !important;
    }

    body.ys .yinse-desktop-stock {
        width: 100% !important;
        max-width: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.ys .yinse-desktop-price {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #13b96d !important;
        font-size: 1.08rem !important;
        text-align: center !important;
    }

    body.ys .yinse-desktop-buy {
        width: 86px !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 0 14px !important;
        justify-content: center !important;
    }

    body.ys .yinse-commodity-card-foot {
        display: none !important;
    }

    body.ys .yinse-commodity-meta-left {
        justify-content: flex-end !important;
    }

    body.ys .yinse-commodity-stock {
        font-size: 0.78rem !important;
    }

    body.ys .yinse-commodity-price {
        font-size: 1.06rem !important;
    }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    body.ys .yinse-shop-layout {
        grid-template-columns: 232px minmax(0, 1fr) !important;
    }

    body.ys .yinse-catalog-tools {
        position: static !important;
        width: 100% !important;
        margin-top: 12px !important;
        justify-content: flex-start !important;
    }

    body.ys .yinse-catalog-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body.ys .yinse-commodity-card .row-inner,
    body.ys .yinse-card-guren-mode .yinse-commodity-card .row-inner {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    body.ys .yinse-commodity-list-meta {
        grid-template-columns: 112px 118px 104px 96px !important;
        justify-content: end !important;
    }

    body.ys .yinse-commodity-card-foot {
        min-width: 0 !important;
        justify-content: space-between !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yinse-hero-title .yinse-hero-title-main,
    .yinse-hero-title .yinse-hero-title-main::before,
    .yinse-hero-title .yinse-hero-title-main::after,
    .yinse-hero-title strong::before,
    .yinse-hero-title-rule,
    .yinse-hero-title-rule::after {
        animation: none !important;
    }

    body.ys .yinse-nav-link:hover,
    body.ys .yinse-button-dark:hover,
    body.ys .yinse-commodity-action-link:hover,
    body.ys .view-card-btn:hover,
    body.ys .component-popup .queryBtn:hover,
    body.ys .component-popup .query-button:hover,
    .yinse-hero-actions .cyber-btn-item:hover {
        animation: none !important;
    }
}
/* 公共提取样式，减少重复代码 */
.bt-pro,
.bt-red,
.bt-blue,
.bt-green {
    /* 默认基准字号14px，内联style="font-size:XXpx"可覆盖修改大小 */
    font-size: 14px;
    font-weight: 900;
    position: relative;
    top: 0px;
    left: 5px;
    /* em = 自身font-size倍数，文字变大边距同步变大 */
    margin: 0 calc(0.625em) calc(0.125em) 0;
    padding: calc(0.14em) calc(0.71em);
    /* 圆角随字号自适应：1em=当前文字大小 */
    border-radius: 1em;
    display: inline-block;
    line-height: 1.2;
    color: #ffffff !important;
}
/* 多色循环标签 */
.bt-pro {
    background: rgba(255, 0, 0, 0.8);
    text-shadow: 0 0 calc(0.5em) #ff0000, 0 0 calc(1em) #ff0000;
    animation: yinsehd 8s infinite linear;
}
@keyframes yinsehd {
    0%,100% {
        background: #ff0000;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #ff0000, 0 0 calc(1em) #ff0000;
    }
    25% {
        background: #ff5500;
        color: #fff;
        text-shadow: 0 0 calc(0.5em) #ff5500, 0 0 calc(1em) #ff5500;
    }
    50% {
        background: #00d114;
        color: #fff;
        text-shadow: 0 0 calc(0.5em) #00d114, 0 0 calc(1em) #00d114;
    }
    75% {
        background: #0066ff;
        color: #fff;
        text-shadow: 0 0 calc(0.5em) #0066ff, 0 0 calc(1em) #0066ff;
    }
}

/* 红色渐变标签 */
.bt-red {
    background: rgba(255, 0, 0, 0.8);
    text-shadow: 0 0 calc(0.5em) #ff0000, 0 0 calc(1em) #ff0000;
    animation: yinsehd-alone-red 8s infinite linear;
}
@keyframes yinsehd-alone-red {
    0%,100% {
        background: #ff0000;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #ff0000, 0 0 calc(1em) #ff0000;
    }
    33% {
        background: var(--tokyo-accent,#ff2266); /* 兜底默认色，无变量不报错 */
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) var(--tokyo-accent,#ff2266), 0 0 calc(1em) var(--tokyo-accent,#ff2266);
    }
    66% {
        background: #ff71be;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #ff71be, 0 0 calc(1em) #ff71be;
    }
}

/* 蓝色渐变标签 */
.bt-blue {
    background: rgba(0, 102, 255, 0.8);
    text-shadow: 0 0 calc(0.5em) #0066ff, 0 0 calc(1em) #0066ff;
    animation: yinsehd-alone-blue 8s infinite linear;
}
@keyframes yinsehd-alone-blue {
    0%,100% {
        background: #0066ff;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #0066ff, 0 0 calc(1em) #0066ff;
    }
    33% {
        background: #00d2ff;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #00d2ff, 0 0 calc(1em) #00d2ff;
    }
    66% {
        background: #74b9ff;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #74b9ff, 0 0 calc(1em) #74b9ff;
    }
}

/* 绿色渐变标签 */
.bt-green {
    background: rgba(0, 209, 20, 0.8);
    text-shadow: 0 0 calc(0.5em) #00d114, 0 0 calc(1em) #00d114;
    animation: yinsehd-alone-green 8s infinite linear;
}
@keyframes yinsehd-alone-green {
    0%,100% {
        background: #00d114;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #00d114, 0 0 calc(1em) #00d114;
    }
    33% {
        background: #a2f82c;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #a2f82c, 0 0 calc(1em) #a2f82c;
    }
    66% {
        background: #00b894;
        color: #ffffff;
        text-shadow: 0 0 calc(0.5em) #00b894, 0 0 calc(1em) #00b894;
    }
}

/* Warm window-light palette: ivory paper, charcoal uniform and ribbon red. */
:root {
    --yinse-visual-ink: #302f31;
    --yinse-visual-ink-soft: #47434a;
    --yinse-visual-blue: #a23d37;
    --yinse-visual-blue-deep: #81312e;
    --yinse-visual-blue-soft: #dfdad4;
    --yinse-visual-sky: #f3ebe1;
    --yinse-visual-paper: rgba(255, 254, 251, 0.65);
    --yinse-visual-paper-strong: rgba(255, 255, 253, 0.65);
    --yinse-visual-glass-dark: rgba(38, 42, 46, 0.60);
    --yinse-visual-line: rgba(99, 89, 87, 0.25);
    --yinse-visual-line-strong: rgba(162, 61, 55, 0.44);
    --yinse-visual-shadow: 0 18px 44px rgba(42, 38, 35, 0.18);
    --yinse-visual-shadow-hover: 0 24px 56px rgba(42, 38, 35, 0.27);
    --yinse-visual-rgb-cyan: #ded9d3;
    --yinse-visual-rgb-pink: #a23d37;
    --yinse-visual-rgb-lime: #908985;
    --yinse-visual-rgb-violet: #7e7773;
}

body.yinse-theme.ys {
    --yinse-visual-glass-surface: linear-gradient(180deg, rgba(255, 255, 253, 0.65), rgba(240, 234, 226, 0.65));
    --yinse-bg: rgba(231, 225, 216, 0.76);
    --yinse-surface: var(--yinse-visual-paper);
    --yinse-black: var(--yinse-visual-blue-deep);
    --yinse-text: var(--yinse-visual-ink);
    --yinse-muted: #746e69;
    --yinse-muted-strong: #575150;
    --yinse-muted-soft: #a69e96;
    --yinse-link: var(--yinse-visual-blue-deep);
    --yinse-border: var(--yinse-visual-line);
    --yinse-border-strong: var(--yinse-visual-line-strong);
    --yinse-accent: var(--yinse-visual-blue);
    --yinse-accent-light: var(--yinse-visual-blue-soft);
    --yinse-accent-rgb: 162, 61, 55;
    --yinse-shadow-soft: var(--yinse-visual-shadow);
    --yinse-shadow-elevated: var(--yinse-visual-shadow-hover);
    background-color: #d9d3ca !important;
}

body.yinse-theme.ys.yinse-bg-mask-on::before {
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.04), rgba(227, 220, 209, 0.30)),
        linear-gradient(90deg, rgba(35, 37, 40, 0.30), transparent 62%) !important;
}

body.ys .yinse-nav::after,
body.ys .panel::before,
body.ys .yinse-hero-banner--notice::after {
    background: linear-gradient(90deg, transparent, rgba(222, 217, 211, 0.74), rgba(162, 61, 55, 0.68), rgba(222, 217, 211, 0.62), transparent) !important;
    box-shadow: 0 0 12px rgba(162, 61, 55, 0.16) !important;
}

body.ys .yinse-brand::before {
    background:
        radial-gradient(circle at 22px 50%, rgba(222, 217, 211, 0.22), transparent 42px),
        linear-gradient(135deg, rgba(255, 252, 247, 0.64), rgba(226, 216, 202, 0.34)) !important;
}

body.ys .yinse-brand-name {
    text-shadow: 0 6px 18px rgba(45, 40, 38, 0.10) !important;
}

body.ys .yinse-brand:hover .yinse-brand-name,
body.ys .yinse-brand:focus-visible .yinse-brand-name {
    color: var(--yinse-visual-blue-deep) !important;
    filter: drop-shadow(0 0 10px rgba(162, 61, 55, 0.20)) !important;
}

body.ys .yinse-brand-mark,
body.ys .yinse-user-avatar,
body.ys .item-cover {
    border-color: rgba(162, 61, 55, 0.30) !important;
    box-shadow: 0 0 0 3px rgba(255, 252, 247, 0.72), 0 8px 20px rgba(45, 40, 38, 0.14) !important;
}

body.ys .yinse-nav-link,
body.ys .yinse-button-light,
body.ys .yinse-user-chip,
body.ys .yinse-searchbox,
body.ys .yinse-search-combo,
body.ys .form-control,
body.ys .qty-group,
body.ys .password-form .input-group {
    border-color: rgba(94, 82, 74, 0.24) !important;
    background: rgba(255, 252, 247, 0.72) !important;
}

body.ys .yinse-button-dark,
body.ys .yinse-nav-link:hover,
body.ys .yinse-nav-link.is-active,
body.ys .yinse-commodity-action-link,
body.ys .sku.is-primary,
body.ys .view-card-btn,
body.ys .component-popup .queryBtn,
body.ys .component-popup .query-button {
    border-color: rgba(125, 42, 38, 0.82) !important;
    background: linear-gradient(135deg, #812f2c 0%, #a23d37 52%, #d8d1cb 100%) !important;
    box-shadow: 0 0 0 1px rgba(255, 252, 247, 0.34), 0 12px 28px rgba(99, 42, 39, 0.24) !important;
}

body.ys .yinse-nav-link:hover,
body.ys .yinse-button-dark:hover,
body.ys .yinse-commodity-action-link:hover,
body.ys .view-card-btn:hover,
body.ys .component-popup .queryBtn:hover,
body.ys .component-popup .query-button:hover,
.yinse-hero-actions .cyber-btn-item:hover {
    background: linear-gradient(135deg, #662a28 0%, #913631 58%, #c4b9b2 100%) !important;
    animation: none !important;
    box-shadow: 0 0 0 1px rgba(255, 252, 247, 0.46), 0 14px 32px rgba(87, 38, 36, 0.26) !important;
}

body.ys .yinse-button-light:hover,
body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-dropdown-menu .dropdown-item:hover {
    border-color: rgba(162, 61, 55, 0.40) !important;
    background: linear-gradient(135deg, rgba(255, 253, 249, 0.65), rgba(237, 225, 213, 0.65)) !important;
    color: var(--yinse-visual-blue-deep) !important;
}

body.ys .yinse-hero-banner {
    border-color: rgba(255, 252, 247, 0.38) !important;
    background: linear-gradient(135deg, rgba(37, 40, 44, 0.66), rgba(56, 55, 57, 0.48)) !important;
    box-shadow: 0 20px 52px rgba(39, 36, 34, 0.30) !important;
}

body.ys .yinse-hero-banner--notice,
body.ys .yinse-hero-banner--image.yinse-hero-banner--surface {
    background: var(--yinse-visual-glass-surface) !important;
}

body.ys .yinse-hero-banner--surface .yinse-hero-title .yinse-hero-title-main,
body.ys .yinse-item-price .price {
    color: var(--yinse-visual-blue-deep) !important;
    text-shadow: 0 0 18px rgba(162, 61, 55, 0.14) !important;
}

body.ys .yinse-hero-banner--surface .yinse-hero-title-rule,
body.ys .yinse-hero-banner--surface .yinse-hero-actions .cyber-btn-item {
    background: linear-gradient(90deg, #81312e, #a23d37, #ded9d3) !important;
}

body.ys .yinse-news-ticker,
body.ys .yinse-category-link,
body.ys .yinse-commodity-card .row-inner,
body.ys .yinse-item-purchase-card,
body.ys .cash-pay--independent {
    border-color: rgba(94, 82, 74, 0.24) !important;
    background: linear-gradient(135deg, rgba(255, 255, 253, 0.65), rgba(240, 234, 226, 0.65)) !important;
}

body.ys .yinse-category-link::before {
    background: linear-gradient(90deg, rgba(162, 61, 55, 0.10), transparent 48%) !important;
}

body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-commodity-card:hover .row-inner,
body.ys .yinse-commodity-card.is-inline-active .row-inner {
    border-color: rgba(162, 61, 55, 0.46) !important;
    box-shadow: 0 0 0 1px rgba(255, 252, 247, 0.34), 0 0 18px rgba(162, 61, 55, 0.14), 0 16px 34px rgba(45, 40, 38, 0.14) !important;
}

body.ys .yinse-payment-notice {
    border-color: rgba(222, 217, 211, 0.42) !important;
    background: linear-gradient(90deg, rgba(42, 46, 50, 0.88), rgba(80, 86, 91, 0.76)), var(--yinse-page-background-image, none) !important;
}

body.ys .yinse-payment-notice a {
    color: #f0e6df !important;
}

body.ys .yinse-heart-particle {
    color: var(--heart-color, #b85a53) !important;
    text-shadow: 0 0 8px currentColor, 0 0 16px rgba(162, 61, 55, 0.22) !important;
}

/* Keep the shopping, category and detail surfaces bright, but visibly frosted. */
body.ys .yinse-nav,
body.ys .panel,
body.ys .yinse-item-unified-panel,
body.ys .yinse-footer-wrap,
body.ys .yinse-layer-popup,
body.ys .component-popup {
    background: linear-gradient(180deg, rgba(255, 255, 253, 0.65), rgba(240, 234, 226, 0.65)) !important;
}

body.ys .yinse-searchbox,
body.ys .yinse-search-combo,
body.ys .yinse-button-light,
body.ys .yinse-user-chip,
body.ys .form-control,
body.ys .qty-group,
body.ys .password-form .input-group {
    background: rgba(255, 255, 253, 0.65) !important;
}

/* Bind every frosted surface to the template's “container blur” setting. */
body.ys .yinse-nav,
body.ys .panel,
body.ys .yinse-item-unified-panel,
body.ys .yinse-footer-wrap,
body.ys .yinse-layer-popup,
body.ys .component-popup,
body.ys .yinse-category-link,
body.ys .yinse-commodity-card .row-inner,
body.ys .yinse-item-purchase-card,
body.ys .cash-pay--independent,
body.ys .yinse-searchbox,
body.ys .yinse-search-combo,
body.ys .yinse-user-chip,
body.ys .form-control,
body.ys .qty-group,
body.ys .password-form .input-group {
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
}

/* Image-banner internals use the same ribbon-red and window-white palette. */
body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main {
    color: #fffdf9 !important;
    text-shadow: 0 5px 24px rgba(48, 31, 30, 0.66), 0 0 24px rgba(162, 61, 55, 0.22) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main::before {
    color: #ded9d3 !important;
    text-shadow: -2px 0 12px rgba(222, 217, 211, 0.62) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main::after {
    color: #b85a53 !important;
    text-shadow: 2px 0 12px rgba(184, 90, 83, 0.58) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title strong {
    color: #f1ebe6 !important;
    text-shadow: 0 4px 18px rgba(48, 31, 30, 0.60) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title strong::before {
    background: #b85a53 !important;
    box-shadow: 0 0 0 4px rgba(184, 90, 83, 0.16), 0 0 14px rgba(184, 90, 83, 0.70) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule {
    background: linear-gradient(90deg, #ded9d3 0 34%, #a23d37 34% 82%, rgba(255, 253, 249, 0.84) 82% 100%) !important;
    box-shadow: 0 0 10px rgba(162, 61, 55, 0.30) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule::before {
    border-color: rgba(255, 253, 249, 0.90) !important;
    background: #ded9d3 !important;
    box-shadow: 0 0 0 3px rgba(222, 217, 211, 0.18), 0 0 12px rgba(222, 217, 211, 0.64) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule::after {
    background: #b85a53 !important;
    box-shadow: 0 0 10px rgba(184, 90, 83, 0.58) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p {
    border-color: rgba(240, 233, 227, 0.52) !important;
    background: linear-gradient(135deg, rgba(129, 47, 44, 0.68), rgba(184, 90, 83, 0.48) 55%, rgba(222, 217, 211, 0.34)) !important;
    color: #fffdf9 !important;
    text-shadow: 0 2px 10px rgba(48, 31, 30, 0.56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 253, 249, 0.30), 0 12px 28px rgba(48, 31, 30, 0.22), 0 0 18px rgba(162, 61, 55, 0.16) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(2) {
    border-color: rgba(222, 217, 211, 0.58) !important;
    background: linear-gradient(135deg, rgba(114, 43, 40, 0.72), rgba(162, 61, 55, 0.52) 55%, rgba(222, 217, 211, 0.38)) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(3) {
    border-color: rgba(184, 90, 83, 0.54) !important;
    color: #fff8f3 !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:hover {
    border-color: rgba(255, 253, 249, 0.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 253, 249, 0.42), 0 16px 32px rgba(48, 31, 30, 0.28), 0 0 22px rgba(184, 90, 83, 0.22) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item {
    border-color: rgba(255, 250, 246, 0.62) !important;
    background: linear-gradient(115deg, rgba(99, 38, 35, 0.92), rgba(162, 61, 55, 0.76) 64%, rgba(216, 209, 203, 0.66)) !important;
    color: #fffdf9 !important;
    box-shadow: inset 0 1px 0 rgba(255, 253, 249, 0.24), 0 9px 20px rgba(64, 30, 29, 0.28), 0 0 0 1px rgba(184, 90, 83, 0.12) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item::before {
    background: linear-gradient(180deg, #ded9d3, #b85a53 64%, #8d332f) !important;
    box-shadow: 0 0 8px rgba(222, 217, 211, 0.56) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item::after {
    background: linear-gradient(90deg, transparent, rgba(255, 253, 249, 0.38), transparent) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item i {
    color: #f1d7d2 !important;
    text-shadow: 0 0 10px rgba(241, 215, 210, 0.48) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:hover,
body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:focus-visible {
    border-color: rgba(255, 253, 249, 0.86) !important;
    background: linear-gradient(115deg, rgba(94, 34, 32, 0.96), rgba(145, 52, 47, 0.84) 63%, rgba(198, 187, 180, 0.78)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 253, 249, 0.38), 0 13px 24px rgba(64, 30, 29, 0.34), 0 0 18px rgba(184, 90, 83, 0.24) !important;
}

/* A softer heartbeat signal for the image-banner title. */
body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main {
    letter-spacing: 0.035em;
    animation: yinse-heart-title-beat 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    transform-origin: left center;
}

body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main::before,
body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main::after {
    display: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title strong::before {
    animation: yinse-heart-signal-dot 1.4s ease-in-out infinite !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule {
    width: min(308px, 46vw);
    height: 26px;
    margin-top: 6px;
    overflow: visible;
    background:
        linear-gradient(90deg, transparent 0 4%, rgba(255, 253, 249, 0.40) 4% 96%, transparent 96%) center / 100% 1px no-repeat !important;
    box-shadow: none !important;
    animation: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16H66L79 16L87 8L96 25L107 2L118 16H320' fill='none' stroke='%23c74f47' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 16H66L79 16L87 8L96 25L107 2L118 16H320' fill='none' stroke='%23fffaf6' stroke-opacity='.82' stroke-width='.72' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow: none;
    transform: none;
    animation: yinse-heart-wave-glow 1.4s ease-in-out infinite !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule::after {
    top: 50%;
    right: auto;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fffaf6 !important;
    box-shadow: 0 0 0 3px rgba(199, 79, 71, 0.22), 0 0 12px rgba(255, 250, 246, 0.88), 0 0 18px rgba(199, 79, 71, 0.62) !important;
    transform: translate(-50%, -50%);
    animation: yinse-heart-scan 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes yinse-heart-title-beat {
    0%, 39%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    43% {
        filter: brightness(1.06);
        transform: scale(1.018);
    }
    48% {
        filter: brightness(0.99);
        transform: scale(0.996);
    }
    54% {
        filter: brightness(1.08);
        transform: scale(1.028);
    }
    61% {
        filter: brightness(1);
        transform: scale(1);
    }
}

@keyframes yinse-heart-signal-dot {
    0%, 42%, 100% { opacity: 0.68; transform: scale(0.78); }
    47% { opacity: 1; transform: scale(1.16); }
    55% { opacity: 1; transform: scale(1.30); }
    63% { opacity: 0.78; transform: scale(0.88); }
}

@keyframes yinse-heart-wave-glow {
    0%, 39%, 100% { filter: drop-shadow(0 0 2px rgba(199, 79, 71, 0.26)); opacity: 0.78; }
    47% { filter: drop-shadow(0 0 7px rgba(199, 79, 71, 0.72)); opacity: 1; }
    55% { filter: drop-shadow(0 0 11px rgba(255, 250, 246, 0.80)) drop-shadow(0 0 16px rgba(199, 79, 71, 0.64)); opacity: 1; }
    63% { filter: drop-shadow(0 0 3px rgba(199, 79, 71, 0.34)); opacity: 0.84; }
}

@keyframes yinse-heart-scan {
    0%, 30% { left: 0; opacity: 0; }
    34% { left: 2%; opacity: 1; }
    62% { left: 35%; opacity: 1; }
    72% { left: 49%; opacity: 0; }
    100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main,
    body.ys .yinse-hero-banner--image .yinse-hero-title strong::before,
    body.ys .yinse-hero-banner--image .yinse-hero-title-rule::before,
    body.ys .yinse-hero-banner--image .yinse-hero-title-rule::after {
        animation: none !important;
    }
}

/* Shared comet mark, replacing every decorative heart stamp in this theme. */
body.ys {
    --yinse-comet-mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik05ODAuNjUwNjY3IDE4MC4yMjRsLTYuMTQ0LTIuMDQ4Yy0wLjY4MjY2Ny0wLjM0MTMzMy0xLjcwNjY2Ny0wLjY4MjY2Ny0yLjM4OTMzNC0wLjY4MjY2Ny0xLjM2NTMzMy0wLjM0MTMzMy0yLjM4OTMzMy0wLjY4MjY2Ny0zLjc1NDY2Ni0xLjM2NTMzMy0xLjAyNC0wLjM0MTMzMy0yLjM4OTMzMy0wLjY4MjY2Ny0zLjQxMzMzNC0xLjAyNC0xLjAyNC0wLjM0MTMzMy0xLjcwNjY2Ny0wLjY4MjY2Ny0yLjczMDY2Ni0wLjY4MjY2Ny0xLjM2NTMzMy0wLjM0MTMzMy0yLjczMDY2Ny0wLjY4MjY2Ny00LjA5Ni0xLjM2NTMzMy0wLjY4MjY2Ny0wLjM0MTMzMy0xLjM2NTMzMy0wLjM0MTMzMy0xLjcwNjY2Ny0wLjY4MjY2Ny0xLjcwNjY2Ny0wLjM0MTMzMy0zLjA3Mi0xLjAyNC00Ljc3ODY2Ny0xLjM2NTMzMy0wLjM0MTMzMyAwLTAuNjgyNjY3LTAuMzQxMzMzLTEuMDI0LTAuMzQxMzMzLTEuNzA2NjY3LTAuMzQxMzMzLTMuNzU0NjY3LTEuMDI0LTUuNDYxMzMzLTEuMzY1MzM0aC0wLjM0MTMzM2MtNDEuMzAxMzMzLTEwLjU4MTMzMy04Ni42OTg2NjctMTMuOTk0NjY3LTEzNC44MjY2NjctMTAuOTIyNjY2LTIuMzg5MzMzIDAtNC43Nzg2NjcgMC4zNDEzMzMtNi44MjY2NjcgMC4zNDEzMzNoLTEuMzY1MzMzYy0yLjA0OCAwLTMuNzU0NjY3IDAuMzQxMzMzLTUuODAyNjY3IDAuMzQxMzMzLTEuMzY1MzMzIDAtMi43MzA2NjcgMC4zNDEzMzMtNC4wOTYgMC4zNDEzMzQtMS4wMjQgMC0yLjA0OCAwLjM0MTMzMy0zLjA3MiAwLjM0MTMzMy03LjUwOTMzMyAwLjY4MjY2Ny0xNS4wMTg2NjcgMS43MDY2NjctMjIuMTg2NjY2IDIuNzMwNjY3LTUuODAyNjY3IDAuNjgyNjY3LTExLjI2NCAxLjcwNjY2Ny0xNy4wNjY2NjcgMi43MzA2NjYtNzQuNzUyIDEzLjMxMi0xNTAuODY5MzMzIDQxLjY0MjY2Ny0yMjEuODY2NjY3IDgyLjYwMjY2Ny03Ny4xNDEzMzMgNDQuMzczMzMzLTE0My43MDEzMzMgMTAxLjM3Ni0xOTMuODc3MzMzIDE2NS4yMDUzMzMtNDIuNjY2NjY3IDU0LjI3Mi03Mi4wMjEzMzMgMTExLjYxNi04Ni4zNTczMzMgMTY4LjI3NzMzNC01OC4wMjY2NjctMjUuNi0xMjMuNTYyNjY3LTM2Ljg2NC0xOTIuMTcwNjY3LTMyLjc2OC0yMS44NDUzMzMgMS4wMjQtMzguOTEyIDE5LjQ1Ni0zOC4yMjkzMzMgNDEuNjQyNjY2IDEuMzY1MzMzIDU0LjI3MiAxNy40MDggMTA5LjU2OCA0Ni43NjI2NjYgMTYwLjA4NTMzNCAyNS4yNTg2NjcgNDMuNjkwNjY3IDU5LjA1MDY2NyA4MS41Nzg2NjcgOTcuOTYyNjY3IDEwOS4yMjY2NjYgOC44NzQ2NjcgNi40ODUzMzMgMTkuNzk3MzMzIDguODc0NjY3IDMwLjcyIDYuODI2NjY3IDQuNzc4NjY3LTAuNjgyNjY3IDkuMjE2LTIuMzg5MzMzIDEzLjMxMi00Ljc3ODY2NyA1LjEyLTMuMDcyIDkuNTU3MzMzLTcuMTY4IDEyLjk3MDY2Ny0xMi4yODggNDAuNjE4NjY3LTU4LjcwOTMzMyA2NS41MzYtMTIzLjIyMTMzMyA3My4wNDUzMzMtMTg4LjQxNiA1Ni4zMiAxNi4zODQgMTIxLjg1NiAxOS43OTczMzMgMTkwLjgwNTMzMyA5Ljg5ODY2NyA4MC4yMTMzMzMtMTEuNjA1MzMzIDE2Mi44MTYtNDAuOTYgMjM4LjkzMzMzNC04NS4zMzMzMzMgNzYuNDU4NjY3LTQ0LjAzMiAxNDMuMDE4NjY3LTEwMS4wMzQ2NjcgMTkzLjE5NDY2Ni0xNjQuODY0IDQuNzc4NjY3LTYuMTQ0IDkuMjE2LTExLjk0NjY2NyAxMy42NTMzMzQtMTguMDkwNjY3IDAuMzQxMzMzLTAuMzQxMzMzIDAuNjgyNjY3LTAuNjgyNjY3IDAuNjgyNjY2LTEuMDI0IDEuMDI0LTEuNzA2NjY3IDIuMzg5MzMzLTMuMDcyIDMuNDEzMzM0LTQuNzc4NjY3IDEuMDI0LTEuMzY1MzMzIDIuMDQ4LTIuNzMwNjY3IDMuMDcyLTQuNDM3MzMzIDAuMzQxMzMzLTAuNjgyNjY3IDAuNjgyNjY3LTEuMDI0IDEuMDI0LTEuNzA2NjY3IDEuMzY1MzMzLTEuNzA2NjY3IDIuMzg5MzMzLTMuNzU0NjY3IDMuNzU0NjY2LTUuNDYxMzMzbDAuMzQxMzM0LTAuMzQxMzMzYzI2LjYyNC00MC4yNzczMzMgNDYuMDgtODEuNTc4NjY3IDU3LjY4NTMzMy0xMjIuNTM4NjY3di0wLjM0MTMzM2MwLjY4MjY2Ny0xLjcwNjY2NyAxLjAyNC0zLjc1NDY2NyAxLjM2NTMzMy01LjQ2MTMzNCAwLTAuMzQxMzMzIDAuMzQxMzMzLTAuNjgyNjY3IDAuMzQxMzM0LTEuMDI0IDAuMzQxMzMzLTEuNzA2NjY3IDAuNjgyNjY3LTMuNDEzMzMzIDEuMzY1MzMzLTQuNzc4NjY2IDAtMC42ODI2NjcgMC4zNDEzMzMtMS4zNjUzMzMgMC4zNDEzMzMtMS43MDY2NjcgMC4zNDEzMzMtMS4zNjUzMzMgMC42ODI2NjctMi43MzA2NjcgMS4wMjQtNC40MzczMzMgMC4zNDEzMzMtMS4wMjQgMC4zNDEzMzMtMS43MDY2NjcgMC42ODI2NjctMi43MzA2NjcgMC4zNDEzMzMtMS4wMjQgMC42ODI2NjctMi4zODkzMzMgMC42ODI2NjctMy40MTMzMzMgMC4zNDEzMzMtMS4zNjUzMzMgMC4zNDEzMzMtMi4zODkzMzMgMC42ODI2NjYtMy43NTQ2NjcgMC0xLjAyNCAwLjM0MTMzMy0xLjcwNjY2NyAwLjM0MTMzNC0yLjczMDY2N2wxLjAyNC02LjE0NGMzLjQxMzMzMy0xOS43OTczMzMtNy41MDkzMzMtMzguNTcwNjY3LTI1LjYtNDUuMzk3MzMzek0xODIuMjcyIDgxMC4zMjUzMzNjLTI5LjAxMzMzMy0yMi41MjgtNTQuMjcyLTUyLjIyNC03My43MjgtODYuMDE2LTIyLjg2OTMzMy0zOS41OTQ2NjctMzYuMTgxMzMzLTgyLjYwMjY2Ny0zOS4yNTMzMzMtMTI0LjU4NjY2NiA2Mi40NjQtMi4wNDggMTIxLjUxNDY2NyAxMC4yNCAxNzIuMzczMzMzIDM2LjE4MTMzMy0zLjA3MiA1OS43MzMzMzMtMjMuNTUyIDExOS40NjY2NjctNTkuMzkyIDE3NC40MjEzMzN6IG01MTMuMDI0LTI2OS45OTQ2NjZDNTU4LjQyMTMzMyA2MTkuNTIgNDA1Ljg0NTMzMyA2NDUuMTIgMjk0LjU3MDY2NyA2MDcuNTczMzMzYzIzLjIxMDY2Ny0xMTUuMzcwNjY3IDEyMS41MTQ2NjctMjM1LjE3ODY2NyAyNTguMzg5MzMzLTMxNC4zNjggNTAuNTE3MzMzLTI5LjM1NDY2NyAxMDMuMDgyNjY3LTUxLjIgMTU0Ljk2NTMzMy02NS4xOTQ2NjYtNy41MDkzMzMgNDQuMDMyIDAgODkuMDg4IDIyLjE4NjY2NyAxMjcuNjU4NjY2IDIyLjE4NjY2NyAzOC41NzA2NjcgNTcuMzQ0IDY3LjU4NCA5OC45ODY2NjcgODIuOTQ0LTM4LjIyOTMzMyAzNy41NDY2NjctODMuMjg1MzMzIDcyLjM2MjY2Ny0xMzMuODAyNjY3IDEwMS43MTczMzR6IG0xNzIuMzczMzMzLTE0NC43MjUzMzRjLTM5LjU5NDY2Ny04LjE5Mi03My4zODY2NjctMzIuMDg1MzMzLTkyLjg0MjY2Ni02Ni4yMTg2NjYtMTkuNzk3MzMzLTM0LjEzMzMzMy0yMy41NTItNzUuNDM0NjY3LTEwLjU4MTMzNC0xMTMuNjY0IDY5Ljk3MzMzMy0xMS42MDUzMzMgMTM1LjE2OC03Ljg1MDY2NyAxODkuNDQgMTAuMjQtMTEuNjA1MzMzIDU1Ljk3ODY2Ny00MC45NiAxMTQuMzQ2NjY3LTg2LjAxNiAxNjkuNjQyNjY2eiIvPgogIDxwYXRoIGQ9Ik04MjIuNjEzMzMzIDMwMS43Mzg2NjdjNy4xNjggMTIuMjg4IDIyLjg2OTMzMyAxNi43MjUzMzMgMzUuNDk4NjY3IDkuNTU3MzMzczE2LjcyNTMzMy0yMy4yMTA2NjcgOS41NTczMzMtMzUuNDk4NjY3LTIyLjg2OTMzMy0xNi43MjUzMzMtMzUuNDk4NjY2LTkuNTU3MzMzYy0xMi4yODggNy4xNjgtMTYuNzI1MzMzIDIyLjg2OTMzMy05LjU1NzMzNCAzNS40OTg2Njd6Ii8+Cjwvc3ZnPgo=");
}

body.ys .yinse-comet-inline,
body.ys .yinse-brand::after,
body.ys .yinse-category-link::after,
body.ys .yinse-commodity-card .row-inner::before,
body.ys .yinse-item-badges .badge-soft::after,
body.ys .yinse-item-price::after,
body.ys .order-item::after,
body.ys .yinse-description-body blockquote::after {
    content: "" !important;
    display: inline-block;
    flex: 0 0 auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: currentColor !important;
    -webkit-mask: var(--yinse-comet-mask) center / contain no-repeat;
    mask: var(--yinse-comet-mask) center / contain no-repeat;
}

body.ys .yinse-comet-inline {
    width: 0.95em;
    height: 0.95em;
    margin: 0 0.14em;
    vertical-align: -0.12em;
    color: #a4433e;
}

body.ys .yinse-brand::after,
body.ys .yinse-category-link::after,
body.ys .yinse-commodity-card .row-inner::before,
body.ys .yinse-item-badges .badge-soft::after,
body.ys .yinse-item-price::after,
body.ys .order-item::after,
body.ys .yinse-description-body blockquote::after {
    color: #a4433e !important;
    border: 1px solid rgba(162, 61, 55, 0.17) !important;
    border-radius: 999px !important;
    background-color: rgba(255, 252, 248, 0.62) !important;
    background-image: var(--yinse-comet-mask) !important;
    background-position: center !important;
    background-size: 78% 78% !important;
    background-repeat: no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 4px 10px rgba(105, 51, 47, 0.09) !important;
    transition: background-size 0.22s ease, background-position 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

body.ys .yinse-brand:hover::after,
body.ys .yinse-category-link:hover::after,
body.ys .yinse-commodity-card:hover .row-inner::before,
body.ys .yinse-item-badges .badge-soft:hover::after,
body.ys .yinse-item-price:hover::after,
body.ys .order-item:hover::after,
body.ys .yinse-description-body blockquote:hover::after {
    background-position: calc(50% + 2px) center !important;
    background-size: 82% 82% !important;
    border-color: rgba(138, 55, 50, 0.30) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 5px 12px rgba(105, 51, 47, 0.14) !important;
}

/* Warm glass scrollbars, shared by the page and every internal scroll surface. */
html,
body.ys,
body.ys .yinse-category-tree,
body.ys .panel-body,
body.ys .layui-layer-content,
body.ys .fixed-table-body,
body.ys .bootstrap-table .fixed-table-body {
    scrollbar-color: #a4433e rgba(103, 86, 76, 0.14);
    scrollbar-width: thin;
}

html::-webkit-scrollbar,
body.ys ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body.ys ::-webkit-scrollbar-track {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(103, 86, 76, 0.14) !important;
    background-clip: padding-box !important;
}

html::-webkit-scrollbar-thumb,
body.ys ::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 2px solid rgba(255, 252, 248, 0.72);
    border-radius: 999px;
    background: linear-gradient(180deg, #d2a49d 0%, #a4433e 52%, #7e332f 100%) !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 8px rgba(89, 40, 37, 0.20);
}

html::-webkit-scrollbar-thumb:hover,
body.ys ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e2beb8 0%, #b55049 50%, #8c3632 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 3px 10px rgba(89, 40, 37, 0.28);
}

html::-webkit-scrollbar-corner,
body.ys ::-webkit-scrollbar-corner {
    background: transparent;
}

@media (max-width: 767.98px) {
    html::-webkit-scrollbar,
    body.ys ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
}

/* Compact title and an actual ECG waveform — no rectangular line background. */
body.ys .yinse-hero-banner--image .yinse-hero-title {
    gap: 11px;
}

body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main {
    font-size: clamp(34px, 4.4vw, 60px) !important;
    line-height: 1.02;
}

body.ys .yinse-hero-banner--image .yinse-hero-title strong {
    font-size: clamp(15px, 1.55vw, 21px) !important;
    line-height: 1.25;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule {
    width: min(260px, 38vw);
    height: 28px;
    margin-top: 2px;
    overflow: visible;
    background: none !important;
    box-shadow: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title-rule::before,
body.ys .yinse-hero-banner--image .yinse-hero-title-rule::after {
    display: none !important;
}

body.ys .yinse-hero-banner--image .yinse-heart-ecg-wave {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

body.ys .yinse-hero-banner--image .yinse-heart-ecg-wave path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.ys .yinse-hero-banner--image .yinse-heart-ecg-base {
    stroke: rgba(255, 250, 246, 0.56);
    stroke-width: 1.35;
}

body.ys .yinse-hero-banner--image .yinse-heart-ecg-pulse {
    stroke: #c74f47;
    stroke-width: 2.5;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    filter: drop-shadow(0 0 3px rgba(199, 79, 71, 0.56));
    animation: yinse-heart-ecg-draw 2.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

body.ys .yinse-hero-banner--image .yinse-heart-ecg-scan {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: #fffaf6;
    box-shadow: 0 0 0 3px rgba(199, 79, 71, 0.20), 0 0 12px rgba(255, 250, 246, 0.84), 0 0 18px rgba(199, 79, 71, 0.52);
    transform: translate(-50%, -50%);
    animation: yinse-heart-ecg-scan 2.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes yinse-heart-ecg-draw {
    0%, 31% { stroke-dashoffset: 100; opacity: 0; }
    37% { stroke-dashoffset: 100; opacity: 1; }
    62% { stroke-dashoffset: 0; opacity: 1; }
    76%, 100% { stroke-dashoffset: 0; opacity: 0.9; }
}

@keyframes yinse-heart-ecg-scan {
    0%, 31% { left: 0; opacity: 0; }
    37% { left: 0; opacity: 1; }
    62% { left: 100%; opacity: 1; }
    70%, 100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-hero-banner--image .yinse-heart-ecg-pulse,
    body.ys .yinse-hero-banner--image .yinse-heart-ecg-scan {
        animation: none !important;
    }

    body.ys .yinse-hero-banner--image .yinse-heart-ecg-pulse {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Cinematic ribbon gallery — selected hero direction.  The banner's existing dimensions stay untouched. */
body.ys .yinse-hero-banner--image {
    isolation: isolate;
    overflow: hidden;
}

body.ys .yinse-hero-banner--image::before {
    z-index: 1;
    background: linear-gradient(90deg, rgba(25, 21, 20, 0.74) 0%, rgba(35, 28, 27, 0.48) 38%, rgba(40, 32, 31, 0.12) 64%, rgba(20, 17, 16, 0.08) 100%) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-media,
body.ys .yinse-hero-banner--image .yinse-hero-media-image {
    z-index: 0;
}

body.ys .yinse-hero-banner--image .yinse-hero-media-image {
    filter: saturate(0.91) contrast(1.03) brightness(0.98) !important;
    transform: translate3d(var(--yinse-hero-shift-x, 0px), var(--yinse-hero-shift-y, 0px), 0) scale(1.045) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title,
body.ys .yinse-hero-banner--image .yinse-hero-side-notice,
body.ys .yinse-hero-banner--image .yinse-hero-actions {
    z-index: 3;
}

body.ys .yinse-hero-banner--image .yinse-hero-title {
    left: 42px;
    bottom: 82px;
    gap: 9px;
    max-width: min(57%, 680px);
    transform: perspective(900px) translate3d(var(--yinse-visual-motion-x, 0px), var(--yinse-visual-motion-y, 0px), 0) rotateX(var(--yinse-visual-motion-rotate-x, 0deg)) rotateY(var(--yinse-visual-motion-rotate-y, 0deg));
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main {
    color: #fffdfa !important;
    font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
    font-size: clamp(34px, 4.15vw, 58px) !important;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.025em;
    text-shadow: 0 4px 18px rgba(26, 18, 17, 0.54) !important;
    animation: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main::before,
body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main::after,
body.ys .yinse-hero-banner--image .yinse-hero-title strong::before,
body.ys .yinse-hero-banner--image .yinse-hero-title-rule {
    display: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title strong {
    color: rgba(255, 251, 247, 0.94) !important;
    font-size: clamp(14px, 1.5vw, 20px) !important;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.055em;
    text-shadow: 0 3px 13px rgba(26, 18, 17, 0.48) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice {
    top: 28px;
    right: clamp(26px, 5vw, 68px);
    width: min(32vw, 360px);
    gap: 9px;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p {
    min-height: 39px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 250, 246, 0.46) !important;
    border-radius: 13px;
    background: rgba(87, 57, 53, 0.30) !important;
    color: #fffdfa !important;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 10px 26px rgba(29, 20, 19, 0.16) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(106%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(106%) !important;
    transform: perspective(900px) translate3d(var(--yinse-visual-motion-x, 0px), var(--yinse-visual-motion-y, 0px), 0) rotateX(var(--yinse-visual-motion-rotate-x, 0deg)) rotateY(var(--yinse-visual-motion-rotate-y, 0deg));
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    animation: yinse-notice-breathe 5.8s ease-in-out infinite;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(2) {
    background: rgba(133, 48, 45, 0.34) !important;
    animation-delay: -1.9s;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(3) {
    background: rgba(117, 74, 67, 0.30) !important;
    animation-delay: -3.8s;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:hover {
    border-color: rgba(255, 252, 248, 0.76) !important;
    background: rgba(127, 57, 53, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 15px 30px rgba(45, 21, 20, 0.28) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions {
    left: 42px;
    right: 42px;
    bottom: 24px;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-nav-buttons {
    gap: 9px;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(255, 253, 250, 0.74) !important;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 253, 250, 0.70), rgba(238, 232, 227, 0.56)) !important;
    color: #542f2d !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 20px rgba(54, 33, 31, 0.20), 0 1px 2px rgba(94, 48, 44, 0.08) !important;
    backdrop-filter: blur(calc(var(--yinse-container-blur, 20px) + 8px)) saturate(118%) !important;
    -webkit-backdrop-filter: blur(calc(var(--yinse-container-blur, 20px) + 8px)) saturate(118%) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item::before,
body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item::after {
    display: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item i {
    color: #aa4d48 !important;
    text-shadow: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:hover,
body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:focus-visible {
    border-color: rgba(255, 252, 249, 0.92) !important;
    background: linear-gradient(135deg, rgba(152, 57, 52, 0.88), rgba(114, 42, 39, 0.84)) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(57, 23, 21, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 13px 26px rgba(63, 25, 23, 0.34), 0 0 0 3px rgba(184, 90, 83, 0.14) !important;
    transform: translateY(-2px);
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:hover i,
body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:focus-visible i {
    color: #fff5f1 !important;
}

@keyframes yinse-notice-breathe {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 10px 26px rgba(29, 20, 19, 0.16); }
    50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 28px rgba(58, 24, 23, 0.25); }
}

@media (max-width: 767.98px) {
    body.ys .yinse-hero-banner--image .yinse-hero-title {
        left: 18px;
        right: 18px;
        bottom: 78px;
        max-width: none;
        gap: 7px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main {
        font-size: clamp(28px, 8vw, 38px) !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title strong {
        font-size: 12px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice {
        top: 118px;
        left: 18px;
        right: 18px;
        width: auto;
        gap: 5px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p {
        min-height: 0;
        padding: 5px 8px;
        border-radius: 8px;
        font-size: 11px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-actions {
        left: 18px;
        right: 18px;
        bottom: 10px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-nav-buttons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 0 5px;
        justify-content: center;
        font-size: 10px;
        letter-spacing: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p {
        animation: none !important;
    }
}

/* Hero repair: keep the photo's native centre crop and do not inherit the page-card glass. */
body.ys .yinse-hero-banner--image {
    background: transparent !important;
    border-color: rgba(255, 252, 248, 0.42) !important;
    box-shadow: 0 18px 42px rgba(33, 23, 22, 0.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.ys .yinse-hero-banner--image::after {
    display: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-media-image {
    transform: translate3d(calc(-50% + var(--yinse-hero-shift-x, 0px)), calc(var(--yinse-hero-bg-y-neg, -20%) + var(--yinse-hero-shift-y, 0px)), 0) scale(1.045) !important;
}

@media (max-width: 767.98px) {
    body.ys .yinse-hero-banner--image .yinse-hero-title {
        top: 30px;
        bottom: auto;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice {
        top: 108px;
        gap: 4px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p {
        padding: 4px 8px;
        font-size: 10px;
        line-height: 1.18;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-actions {
        bottom: 7px;
    }
}

/* Desktop title: a higher visual anchor and a restrained recurring lustre. */
@media (min-width: 768px) {
    body.ys .yinse-hero-banner--image .yinse-hero-title {
        bottom: 102px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main {
        font-size: clamp(40px, 4.8vw, 68px) !important;
        display: inline-block;
        color: #fffdfa !important;
        background: none;
        -webkit-text-fill-color: currentColor;
        animation: yinse-hero-title-aura 5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
        will-change: filter;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-letter {
        display: inline-block;
        min-width: 0.18em;
        font-size: inherit !important;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: #fffdfa;
        text-shadow: 0 4px 18px rgba(26, 18, 17, 0.54);
        transform-origin: 50% 78%;
        animation: yinse-hero-title-letter-rise 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        animation-delay: var(--yinse-letter-delay, 0s);
        will-change: transform, filter;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title strong {
        animation: yinse-hero-subtitle-breathe 5.6s ease-in-out infinite;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-main {
        animation: yinse-hero-title-aura-hover 1.7s cubic-bezier(0.22, 0.8, 0.24, 1) both !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-letter {
        animation: yinse-hero-title-letter-rise-hover 1.7s cubic-bezier(0.22, 0.8, 0.24, 1) both;
        animation-delay: var(--yinse-letter-delay, 0s);
    }
}

@keyframes yinse-hero-title-aura {
    0%, 32%, 100% { filter: brightness(1); }
    46% { filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 244, 239, 0.24)); }
    60% { filter: brightness(1.02); }
}

@keyframes yinse-hero-title-letter-rise {
    0%, 35%, 100% {
        color: #fffdfa;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
    42% {
        color: #fffefd;
        filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 240, 235, 0.46));
        transform: translateY(-5px) scale(1.028);
    }
    49% {
        color: #f1c9c3;
        filter: brightness(1.06) drop-shadow(0 0 5px rgba(184, 90, 83, 0.28));
        transform: translateY(-2px) scale(1.012);
    }
    57% {
        color: #fffdfa;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
}

@keyframes yinse-hero-title-aura-hover {
    0%, 100% { filter: brightness(1); }
    38% { filter: brightness(1.16) drop-shadow(0 0 12px rgba(255, 244, 239, 0.32)); }
    64% { filter: brightness(1.03); }
}

@keyframes yinse-hero-title-letter-rise-hover {
    0%, 100% {
        color: #fffdfa;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
    34% {
        color: #ffffff;
        filter: brightness(1.22) drop-shadow(0 0 9px rgba(255, 240, 235, 0.52));
        transform: translateY(-6px) scale(1.032);
    }
    55% {
        color: #f2ccc6;
        filter: brightness(1.07) drop-shadow(0 0 5px rgba(184, 90, 83, 0.30));
        transform: translateY(-2px) scale(1.014);
    }
    72% {
        color: #fffdfa;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
}

/* Compact image hero on phones while preserving the desktop composition. */
@media (max-width: 767.98px) {
    body.ys .yinse-hero-banner--image {
        min-height: 258px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title {
        top: 24px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice {
        top: 98px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-actions {
        bottom: 7px !important;
    }
}

@media (max-width: 420px) {
    body.ys .yinse-hero-banner--image {
        min-height: 248px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title {
        top: 22px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice {
        top: 94px !important;
    }
}

/* Desktop product metadata uses the same cool indigo glass treatment as the rest of the theme. */
@media (min-width: 768px) {
    body.ys .yinse-commodity-list-delivery .yinse-desktop-delivery {
        border-color: rgba(164, 198, 255, 0.72) !important;
        background: linear-gradient(135deg, rgba(28, 49, 108, 0.94), rgba(67, 83, 172, 0.9)) !important;
        color: #eaf1ff !important;
        box-shadow: inset 0 1px 0 rgba(218, 233, 255, 0.22), 0 6px 16px rgba(2, 7, 24, 0.3) !important;
    }

    body.ys .yinse-commodity-list-stock .yinse-desktop-stock {
        color: #b9caff !important;
        text-shadow: 0 0 10px rgba(111, 156, 255, 0.18) !important;
    }

    body.ys .yinse-commodity-list-stock .yinse-desktop-stock i {
        color: #8fb7ff !important;
        text-shadow: 0 0 10px rgba(111, 156, 255, 0.42) !important;
    }

    body.ys .yinse-commodity-list-price .yinse-desktop-price {
        color: #d8e6ff !important;
        font-weight: 700 !important;
        text-shadow: 0 0 12px rgba(111, 156, 255, 0.24) !important;
    }

    body.ys .yinse-commodity-card:hover .yinse-commodity-list-delivery .yinse-desktop-delivery,
    body.ys .yinse-commodity-card.is-inline-active .yinse-commodity-list-delivery .yinse-desktop-delivery {
        border-color: rgba(205, 225, 255, 0.9) !important;
        background: linear-gradient(135deg, rgba(43, 74, 160, 0.96), rgba(88, 94, 202, 0.92)) !important;
        box-shadow: inset 0 1px 0 rgba(239, 246, 255, 0.3), 0 8px 20px rgba(2, 7, 24, 0.4), 0 0 14px rgba(111, 156, 255, 0.2) !important;
    }

    body.ys .yinse-commodity-card:hover .yinse-commodity-list-stock .yinse-desktop-stock,
    body.ys .yinse-commodity-card.is-inline-active .yinse-commodity-list-stock .yinse-desktop-stock {
        color: #d2e0ff !important;
    }

    body.ys .yinse-commodity-card:hover .yinse-commodity-list-price .yinse-desktop-price,
    body.ys .yinse-commodity-card.is-inline-active .yinse-commodity-list-price .yinse-desktop-price {
        color: #f0f5ff !important;
        text-shadow: 0 0 14px rgba(111, 156, 255, 0.42) !important;
    }
}

/* Keep the selected category dark on hover; the legacy rule used a pale wash here. */
body.ys .yinse-category-link.is-active:hover {
    border-color: rgba(164, 198, 255, 0.82) !important;
    background: linear-gradient(135deg, rgba(55, 79, 157, 0.94), rgba(38, 48, 111, 0.94)) !important;
    color: #f5f8ff !important;
    box-shadow: inset 0 1px 0 rgba(229, 240, 255, 0.18), 0 0 0 1px rgba(166, 197, 255, 0.18), 0 14px 30px rgba(1, 4, 16, 0.42), 0 0 22px rgba(111, 156, 255, 0.22) !important;
}

body.ys .yinse-category-link.is-active:hover .yinse-category-name {
    color: #ffffff !important;
}

/* Template setting: choose the vertical dock for the desktop notice rail. */
@media (min-width: 768px) {
    body.ys .yinse-hero-banner--image.yinse-hero-side-notice-bottom .yinse-hero-side-notice {
        top: auto !important;
        bottom: 20px !important;
    }

    body.ys .yinse-hero-banner--image.yinse-hero-side-notice-top .yinse-hero-side-notice {
        top: 16px !important;
        bottom: auto !important;
    }
}

@media (min-width: 1200px) {
    body.ys .yinse-hero-banner--image.yinse-hero-side-notice-bottom .yinse-hero-side-notice,
    body.ys .yinse-hero-banner--image.yinse-hero-side-notice-top .yinse-hero-side-notice {
        left: 52% !important;
        right: auto !important;
        width: min(23vw, 320px) !important;
    }
}

/* Wide desktop: dock the notice rail at the lower center-right so it clears the character's face. */
@media (min-width: 1200px) {
    body.ys .yinse-hero-banner--image .yinse-hero-side-notice {
        left: 52% !important;
        right: auto !important;
        top: auto !important;
        bottom: 20px !important;
        width: min(23vw, 320px) !important;
    }

    body.ys .yinse-hero-banner--image.yinse-hero-side-notice-top .yinse-hero-side-notice {
        top: 16px !important;
        bottom: auto !important;
    }
}

/* Mobile hero images already use a full-width cover box; avoid the desktop centering offset. */
@media (max-width: 767.98px) {
    body.ys .yinse-hero-banner--image .yinse-hero-media-image {
        transform: translate3d(var(--yinse-hero-shift-x, 0px), var(--yinse-hero-shift-y, 0px), 0) scale(1.03) !important;
    }
}

/* A distinct prism-refraction response for the image-banner title hover. */
@media (min-width: 768px) {
    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-main {
        animation: yinse-hero-title-prism-hover 1.55s cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-letter {
        animation: yinse-hero-title-letter-prism 1.55s cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
        animation-delay: var(--yinse-letter-delay, 0s);
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated strong {
        animation: yinse-hero-subtitle-prism 1.55s cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
    }
}

@keyframes yinse-hero-title-prism-hover {
    0% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        filter: brightness(1) drop-shadow(0 0 0 rgba(111, 156, 255, 0));
    }
    24% {
        transform: translate3d(-2px, -3px, 0) skewX(-1.1deg);
        filter: brightness(1.1) drop-shadow(0 0 11px rgba(111, 156, 255, 0.42));
    }
    50% {
        transform: translate3d(2px, -1px, 0) skewX(0.7deg);
        filter: brightness(1.06) drop-shadow(0 0 16px rgba(117, 108, 224, 0.34));
    }
    76% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        filter: brightness(1.03) drop-shadow(0 0 8px rgba(111, 156, 255, 0.2));
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        filter: brightness(1);
    }
}

@keyframes yinse-hero-title-letter-prism {
    0%, 100% {
        color: #edf4ff;
        filter: brightness(1);
        transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);
    }
    28% {
        color: #f5f8ff;
        filter: brightness(1.12) drop-shadow(0 0 9px rgba(111, 156, 255, 0.46));
        transform: translateY(-8px) rotateX(14deg) rotateZ(-1deg) scale(1.04);
    }
    54% {
        color: #d9e7ff;
        filter: brightness(1.06) drop-shadow(0 0 11px rgba(117, 108, 224, 0.38));
        transform: translateY(-2px) rotateX(0deg) rotateZ(0.5deg) scale(1.015);
    }
    78% {
        color: #edf4ff;
        filter: brightness(1.02) drop-shadow(0 0 6px rgba(111, 156, 255, 0.18));
        transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);
    }
}

@keyframes yinse-hero-subtitle-prism {
    0%, 100% { opacity: 0.86; filter: brightness(1); }
    34% { opacity: 1; filter: brightness(1.08) drop-shadow(0 0 9px rgba(111, 156, 255, 0.3)); }
    68% { opacity: 0.96; filter: brightness(1.03) drop-shadow(0 0 5px rgba(117, 108, 224, 0.18)); }
}

/* Reimagined title interaction: magnetic snap, prism flip and a single scan pass. */
@media (min-width: 768px) {
    body.ys .yinse-hero-banner--image .yinse-hero-title {
        perspective: 900px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated {
        isolation: isolate;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated::after {
        display: block;
        position: absolute;
        left: 0;
        bottom: -13px;
        width: 118px;
        height: 2px;
        content: "";
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(157, 201, 255, 0.96) 24%, rgba(139, 128, 255, 0.9) 72%, transparent);
        box-shadow: 0 0 8px rgba(111, 156, 255, 0.62), 0 0 18px rgba(117, 108, 224, 0.34);
        pointer-events: none;
        transform: translateX(-16px) scaleX(0.32);
        transform-origin: left center;
        animation: yinse-hero-title-prism-scan 1.18s cubic-bezier(0.18, 0.78, 0.22, 1) both;
        z-index: 2;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-main {
        transform-origin: left center;
        animation: yinse-hero-title-prism-snap 1.38s cubic-bezier(0.16, 0.82, 0.24, 1) both !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-letter {
        transform-style: preserve-3d;
        backface-visibility: hidden;
        animation: yinse-hero-title-letter-prism-wave 1.38s cubic-bezier(0.16, 0.82, 0.24, 1) both !important;
        animation-delay: calc(var(--yinse-letter-delay, 0s) * 0.72);
    }
}

@keyframes yinse-hero-title-prism-snap {
    0% {
        transform: translate3d(-10px, 2px, 0) rotateY(-7deg) skewX(-1.5deg) scale(0.985);
        filter: brightness(0.98) drop-shadow(0 0 0 rgba(111, 156, 255, 0));
    }
    28% {
        transform: translate3d(3px, -4px, 0) rotateY(2deg) skewX(0.6deg) scale(1.025);
        filter: brightness(1.14) drop-shadow(0 0 14px rgba(111, 156, 255, 0.48));
    }
    56% {
        transform: translate3d(-1px, 1px, 0) rotateY(-1deg) skewX(-0.3deg) scale(1.008);
        filter: brightness(1.06) drop-shadow(0 0 18px rgba(117, 108, 224, 0.36));
    }
    100% {
        transform: translate3d(0, 0, 0) rotateY(0deg) skewX(0deg) scale(1);
        filter: brightness(1);
    }
}

@keyframes yinse-hero-title-letter-prism-wave {
    0% {
        color: #dceaff;
        filter: brightness(0.98) blur(0.2px);
        transform: translate3d(-5px, 2px, 0) rotateX(-20deg) rotateY(-18deg) rotateZ(-2deg) scale(0.94);
    }
    26% {
        color: #f7faff;
        filter: brightness(1.18) drop-shadow(0 0 11px rgba(111, 156, 255, 0.58));
        transform: translate3d(0, -9px, 0) rotateX(18deg) rotateY(12deg) rotateZ(1deg) scale(1.06);
    }
    52% {
        color: #d3e2ff;
        filter: brightness(1.08) drop-shadow(0 0 14px rgba(117, 108, 224, 0.44));
        transform: translate3d(2px, -2px, 0) rotateX(-5deg) rotateY(-5deg) rotateZ(-0.5deg) scale(1.02);
    }
    78% {
        color: #edf4ff;
        filter: brightness(1.04) drop-shadow(0 0 7px rgba(111, 156, 255, 0.22));
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }
    100% {
        color: #edf4ff;
        filter: brightness(1);
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }
}

@keyframes yinse-hero-title-prism-scan {
    0% { opacity: 0; transform: translateX(-16px) scaleX(0.32); }
    18% { opacity: 1; transform: translateX(0) scaleX(0.72); }
    72% { opacity: 0.9; transform: translateX(420px) scaleX(1); }
    100% { opacity: 0; transform: translateX(560px) scaleX(0.62); }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-main,
    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated .yinse-hero-title-letter,
    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated strong {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-title.is-title-activated::after {
        display: none !important;
    }
}

/* Product detail controls use the same dark frosted glass language as the catalogue. */
body.ys .yinse-item-form-wrap .yinse-field,
body.ys .yinse-item-form-wrap .cash-pay,
body.ys .yinse-item-form-wrap .yinse-item-price {
    border-color: rgba(135, 164, 225, 0.34) !important;
    background: linear-gradient(135deg, rgba(30, 43, 86, 0.86), rgba(14, 22, 49, 0.86)) !important;
    color: var(--yinse-visual-ink) !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.1), 0 10px 24px rgba(1, 5, 20, 0.24) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
}

body.ys .yinse-item-form-wrap .yinse-field .form-label,
body.ys .yinse-item-form-wrap .cash-pay > .form-label {
    color: #9db4da !important;
    text-shadow: 0 1px 8px rgba(1, 5, 20, 0.3) !important;
}

body.ys .yinse-item-form-wrap .yinse-field .form-label::before {
    background: #6f9cff !important;
    box-shadow: 0 0 0 4px rgba(111, 156, 255, 0.14), 0 0 10px rgba(111, 156, 255, 0.34) !important;
}

body.ys .yinse-item-form-wrap .yinse-item-price {
    background: linear-gradient(135deg, rgba(40, 59, 123, 0.92), rgba(18, 28, 63, 0.9)) !important;
}

body.ys .yinse-item-form-wrap .yinse-item-price .price {
    color: #b9d4ff !important;
    text-shadow: 0 8px 24px rgba(111, 156, 255, 0.28), 0 0 16px rgba(117, 108, 224, 0.16) !important;
}

body.ys .yinse-item-form-wrap .yinse-item-price .unit {
    color: #7fb5ff !important;
}

body.ys .yinse-item-form-wrap .sku {
    border-color: rgba(135, 164, 225, 0.34) !important;
    background: linear-gradient(135deg, rgba(28, 42, 82, 0.84), rgba(14, 22, 49, 0.84)) !important;
    color: #d8e5ff !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.08), 0 6px 16px rgba(1, 5, 20, 0.2) !important;
}

body.ys .yinse-item-form-wrap .sku:hover {
    border-color: rgba(111, 156, 255, 0.66) !important;
    background: linear-gradient(135deg, rgba(47, 66, 135, 0.92), rgba(32, 42, 94, 0.9)) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(146, 183, 255, 0.18), 0 12px 24px rgba(1, 4, 16, 0.34), 0 0 18px rgba(111, 156, 255, 0.18) !important;
}

body.ys .yinse-item-form-wrap .sku.is-primary {
    border-color: rgba(142, 177, 255, 0.78) !important;
    background: linear-gradient(135deg, #2947a5 0%, #4168d6 56%, #756ce0 100%) !important;
    color: #f5f8ff !important;
}

body.ys .yinse-item-form-wrap .badge-money {
    border-color: rgba(164, 198, 255, 0.56) !important;
    background: rgba(225, 237, 255, 0.16) !important;
    color: #bcd5ff !important;
    box-shadow: 0 4px 12px rgba(1, 5, 20, 0.22) !important;
}

body.ys .yinse-item-form-wrap .sku.is-primary .badge-money {
    border-color: rgba(225, 237, 255, 0.44) !important;
    background: rgba(8, 17, 46, 0.34) !important;
    color: #dceaff !important;
}

body.ys .yinse-item-form-wrap .yinse-item-badges .badge-soft {
    border-color: rgba(135, 164, 225, 0.38) !important;
    background: linear-gradient(135deg, rgba(34, 50, 101, 0.84), rgba(16, 25, 56, 0.84)) !important;
    color: #c9dcff !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.08), 0 6px 14px rgba(1, 5, 20, 0.22) !important;
}

body.ys .yinse-item-form-wrap .yinse-item-badges .badge-soft-success {
    border-color: rgba(103, 208, 181, 0.38) !important;
    color: #9be8cb !important;
}

body.ys .yinse-item-form-wrap .yinse-item-badges .badge-soft-info,
body.ys .yinse-item-form-wrap .yinse-item-badges .shared-button {
    border-color: rgba(142, 177, 255, 0.46) !important;
    color: #bcd5ff !important;
}

body.ys .yinse-item-form-wrap .yinse-item-badges .badge-soft:hover,
body.ys .yinse-item-form-wrap .yinse-item-badges .shared-button:hover {
    border-color: rgba(190, 216, 255, 0.76) !important;
    background: linear-gradient(135deg, rgba(54, 78, 158, 0.92), rgba(38, 49, 110, 0.9)) !important;
    color: #ffffff !important;
}

body.ys .yinse-item-form-wrap .form-control,
body.ys .yinse-item-form-wrap input.form-control,
body.ys .yinse-item-form-wrap .qty-group,
body.ys .yinse-item-form-wrap .password-form .input-group {
    border-color: rgba(135, 164, 225, 0.36) !important;
    background: rgba(10, 18, 42, 0.72) !important;
    color: #e5eeff !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.08), 0 6px 16px rgba(1, 5, 20, 0.2) !important;
}

body.ys .yinse-item-form-wrap .form-control::placeholder {
    color: rgba(157, 180, 218, 0.72) !important;
    opacity: 1 !important;
}

body.ys .yinse-item-form-wrap .form-control:focus {
    border-color: rgba(111, 156, 255, 0.72) !important;
    background: rgba(16, 27, 59, 0.88) !important;
    box-shadow: 0 0 0 3px rgba(111, 156, 255, 0.14), 0 8px 20px rgba(1, 5, 20, 0.28) !important;
}

body.ys .yinse-item-form-wrap .qty-group .form-control {
    border: 0 !important;
    background: rgba(35, 51, 102, 0.72) !important;
    color: #edf4ff !important;
    box-shadow: none !important;
}

body.ys .yinse-item-form-wrap .change-num-sub,
body.ys .yinse-item-form-wrap .change-num-add {
    border-color: rgba(142, 177, 255, 0.5) !important;
    background: linear-gradient(135deg, rgba(58, 83, 160, 0.86), rgba(39, 54, 119, 0.86)) !important;
    color: #c5ddff !important;
    box-shadow: 0 6px 14px rgba(1, 5, 20, 0.24) !important;
}

body.ys .yinse-item-form-wrap .change-num-sub:hover,
body.ys .yinse-item-form-wrap .change-num-add:hover {
    border-color: rgba(205, 225, 255, 0.84) !important;
    background: linear-gradient(135deg, #4168d6, #756ce0) !important;
    color: #ffffff !important;
}

body.ys .yinse-item-form-wrap .pay-list .pay {
    border-color: rgba(135, 164, 225, 0.36) !important;
    background: linear-gradient(135deg, rgba(28, 42, 82, 0.84), rgba(14, 22, 49, 0.84)) !important;
    color: #c9dcff !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.08), 0 6px 16px rgba(1, 5, 20, 0.2) !important;
}

body.ys .yinse-item-form-wrap .pay-list .pay:hover,
body.ys .yinse-item-form-wrap .pay-list .pay.active,
body.ys .yinse-item-form-wrap .pay-list .pay.pay-selected {
    border-color: rgba(142, 177, 255, 0.76) !important;
    background: linear-gradient(135deg, #2947a5 0%, #4168d6 56%, #756ce0 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(175, 201, 255, 0.16), 0 12px 26px rgba(2, 7, 24, 0.38), 0 0 18px rgba(111, 156, 255, 0.18) !important;
}

body.ys .yinse-item-form-wrap .yinse-payment-notice {
    border-color: rgba(135, 164, 225, 0.34) !important;
    background: linear-gradient(135deg, rgba(21, 31, 67, 0.86), rgba(31, 27, 75, 0.8)) !important;
    color: #9fe9c8 !important;
}

/* Replace Bootstrap's dark hamburger SVG with a visible cool-blue glass accent. */
body.ys .yinse-nav-toggle .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%239fc4ff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: drop-shadow(0 0 4px rgba(111, 156, 255, 0.32));
    opacity: 1;
}

body.ys .yinse-nav-toggle:hover .navbar-toggler-icon,
body.ys .yinse-nav-toggle:focus-visible .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8f1ff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: drop-shadow(0 0 6px rgba(111, 156, 255, 0.58));
}

/* Mobile product metadata pills use dark glass instead of the legacy pale wash. */
body.ys .yinse-commodity-tags .yinse-mobile-meta {
    border-color: rgba(135, 164, 225, 0.38) !important;
    background: linear-gradient(135deg, rgba(29, 43, 86, 0.86), rgba(14, 22, 49, 0.86)) !important;
    color: #c9dcff !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.08), 0 5px 12px rgba(1, 5, 20, 0.22) !important;
}

body.ys .yinse-commodity-tags .yinse-mobile-price {
    border-color: rgba(142, 177, 255, 0.62) !important;
    background: linear-gradient(135deg, rgba(52, 75, 155, 0.9), rgba(40, 51, 113, 0.88)) !important;
    color: #edf4ff !important;
}

body.ys .yinse-commodity-tags .yinse-pill-success {
    border-color: rgba(103, 208, 181, 0.42) !important;
    background: linear-gradient(135deg, rgba(25, 93, 88, 0.82), rgba(18, 62, 70, 0.84)) !important;
    color: #b3f0d8 !important;
}

body.ys .yinse-commodity-tags .yinse-mobile-meta:hover {
    border-color: rgba(190, 216, 255, 0.76) !important;
    background: linear-gradient(135deg, rgba(54, 78, 158, 0.94), rgba(38, 49, 110, 0.92)) !important;
    color: #ffffff !important;
}

/* Raise the default contrast of product descriptions on the dark detail panel. */
body.ys .yinse-description-body {
    color: #dbe7ff !important;
    text-shadow: 0 1px 8px rgba(1, 5, 20, 0.24) !important;
}

body.ys .yinse-description-body :where(h1, h2, h3, h4, h5, h6) {
    color: #edf4ff !important;
}

body.ys .yinse-description-body :where(li, dt, dd, td, th) {
    color: #dbe7ff !important;
}

body.ys .yinse-description-body a {
    color: #a9caff !important;
    text-shadow: 0 0 10px rgba(111, 156, 255, 0.22) !important;
}

@keyframes yinse-hero-subtitle-breathe {
    0%, 100% { opacity: 0.86; letter-spacing: 0.048em; }
    50% { opacity: 1; letter-spacing: 0.068em; }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main,
    body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-letter,
    body.ys .yinse-hero-banner--image .yinse-hero-title strong {
        animation: none !important;
    }
}

/* Desktop benefits stay on the image edge: quiet glass cards, never a centre-covering banner. */
@media (min-width: 1024px) {
    body.ys .yinse-hero-banner--image .yinse-hero-side-notice {
        top: 16px;
        right: 28px;
        width: min(26vw, 350px);
        gap: 6px;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p {
        min-height: 40px;
        padding: 6px 12px;
        border-color: rgba(255, 250, 246, 0.38) !important;
        border-radius: 12px;
        background: rgba(76, 55, 52, 0.22) !important;
        font-size: 12.5px;
        line-height: 1.18;
        text-shadow: 0 2px 10px rgba(27, 18, 17, 0.48) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(29, 20, 19, 0.13) !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(2) {
        background: rgba(91, 57, 53, 0.24) !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(3) {
        background: rgba(76, 55, 52, 0.22) !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(1) {
        margin-left: 14px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(2) {
        margin-left: 7px !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(3) {
        margin-left: 0 !important;
    }

    body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:hover {
        background: rgba(126, 59, 55, 0.34) !important;
    }
}

/* Title letters inherit the responsive title scale on every breakpoint. */
body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-letter {
    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

/* A small refraction trail keeps the image interaction atmospheric rather than literal. */
body.ys .yinse-hero-banner--image .yinse-hero-light-lens,
body.ys .yinse-hero-banner--image .yinse-hero-light-trail {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

body.ys .yinse-hero-banner--image .yinse-hero-light-lens {
    left: 0;
    top: 0;
    width: clamp(170px, 22vw, 310px);
    aspect-ratio: 1.42;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 251, 247, 0.32) 0, rgba(235, 167, 160, 0.17) 32%, rgba(145, 48, 44, 0.06) 52%, transparent 72%);
    filter: blur(2.5px);
    transform: translate3d(calc(var(--yinse-light-x, -200px) - 50%), calc(var(--yinse-light-y, -200px) - 50%), 0) scale(0.88);
    transition: opacity 0.38s ease;
}

body.ys .yinse-hero-banner--image .yinse-hero-light-lens.is-active {
    opacity: 0.58;
    transform: translate3d(calc(var(--yinse-light-x, -200px) - 50%), calc(var(--yinse-light-y, -200px) - 50%), 0) scale(1);
}

body.ys .yinse-hero-banner--image .yinse-hero-light-trail {
    left: 0;
    top: 0;
    width: clamp(82px, 10vw, 150px);
    height: clamp(28px, 3vw, 48px);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 252, 248, 0.38) 0, rgba(224, 126, 120, 0.20) 35%, rgba(148, 48, 44, 0.07) 58%, transparent 74%);
    filter: blur(2px);
    transform: translate3d(calc(var(--yinse-trail-x, -200px) - 50%), calc(var(--yinse-trail-y, -200px) - 50%), 0) rotate(var(--yinse-trail-angle, 0deg)) scaleX(0.4);
}

body.ys .yinse-hero-banner--image .yinse-hero-light-trail::after {
    position: absolute;
    inset: 28% 16%;
    content: "";
    border-radius: 50%;
    background: rgba(255, 252, 248, 0.36);
    filter: blur(3px);
}

body.ys .yinse-hero-banner--image .yinse-hero-light-trail.is-trailing {
    animation: yinse-hero-light-trail 0.74s cubic-bezier(0.16, 0.72, 0.26, 1) both;
}

@keyframes yinse-hero-light-trail {
    0% {
        opacity: 0;
        transform: translate3d(calc(var(--yinse-trail-x, -200px) - 50%), calc(var(--yinse-trail-y, -200px) - 50%), 0) rotate(var(--yinse-trail-angle, 0deg)) scaleX(0.36);
    }
    20% { opacity: 0.42; }
    58% { opacity: 0.18; }
    100% {
        opacity: 0;
        transform: translate3d(calc(var(--yinse-trail-x, -200px) - 50%), calc(var(--yinse-trail-y, -200px) - 50%), 0) rotate(var(--yinse-trail-angle, 0deg)) scaleX(1.2);
    }
}

@media (prefers-reduced-motion: reduce), (max-width: 767.98px) {
    body.ys .yinse-hero-banner--image .yinse-hero-light-lens,
    body.ys .yinse-hero-banner--image .yinse-hero-light-trail {
        display: none !important;
    }
}

/* Whole-site atmosphere: backlit dust, tiny glass glints and rare ribbon reflections. */
.yinse-atmosphere-layer {
    position: fixed;
    inset: 0;
    z-index: 920;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.yinse-atmosphere-particle {
    position: absolute;
    left: var(--ambient-x, 50vw);
    bottom: -28px;
    display: block;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: yinse-atmosphere-drift var(--ambient-duration, 18s) cubic-bezier(0.28, 0.64, 0.4, 1) var(--ambient-delay, 0s) forwards;
}

.yinse-atmosphere-particle--dust {
    width: var(--ambient-size, 9px);
    height: var(--ambient-size, 9px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, rgba(255, 255, 252, 0.96) 0 8%, rgba(255, 239, 228, 0.62) 30%, rgba(173, 71, 63, 0.16) 58%, transparent 74%);
    box-shadow: 0 0 12px rgba(255, 230, 217, 0.28), 0 0 26px rgba(154, 53, 47, 0.12);
    filter: blur(0.35px);
}

.yinse-atmosphere-particle--glint {
    width: var(--ambient-size, 8px);
    height: var(--ambient-size, 8px);
    background: linear-gradient(135deg, transparent 35%, rgba(255, 252, 246, 0.94) 48%, rgba(218, 120, 112, 0.68) 52%, transparent 66%);
    clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 38%);
    filter: drop-shadow(0 0 7px rgba(255, 240, 231, 0.66));
}

.yinse-atmosphere-particle--filament {
    width: var(--ambient-size, 104px);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(242, 178, 171, 0.12), rgba(167, 54, 48, 0.62), rgba(255, 244, 238, 0.44), transparent);
    box-shadow: 0 0 14px rgba(158, 47, 43, 0.20);
    filter: blur(0.35px);
}

@keyframes yinse-atmosphere-drift {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0) rotate(var(--ambient-rotation, 0deg)) scale(0.72);
    }
    12% {
        opacity: var(--ambient-opacity, 0.34);
        transform: translate3d(calc(-50% + var(--ambient-drift-a, 12px)), var(--ambient-rise-start, -11vh), 0) rotate(calc(var(--ambient-rotation, 0deg) + var(--ambient-spin, 0deg))) scale(1);
    }
    52% {
        opacity: var(--ambient-opacity-mid, 0.26);
        transform: translate3d(calc(-50% + var(--ambient-drift-b, -18px)), var(--ambient-rise-mid, -53vh), 0) rotate(calc(var(--ambient-rotation, 0deg) + var(--ambient-spin, 0deg))) scale(0.92);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--ambient-drift-a, 12px)), var(--ambient-rise, -94vh), 0) rotate(calc(var(--ambient-rotation, 0deg) + var(--ambient-spin, 0deg))) scale(0.72);
    }
}

@media (max-width: 767.98px) {
    .yinse-atmosphere-particle--filament {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yinse-atmosphere-layer {
        display: none !important;
    }
}

/* Random light blooms replace directional floating: appear, breathe, and dissolve in place. */
.yinse-atmosphere-particle {
    left: var(--ambient-x, 50vw);
    top: var(--ambient-y, 50vh);
    bottom: auto;
    mix-blend-mode: normal;
    animation: yinse-atmosphere-appear var(--ambient-duration, 4s) cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}

.yinse-atmosphere-particle--bloom {
    width: var(--ambient-size, 18px);
    height: var(--ambient-size, 18px);
    border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #fffdf9 0 8%, rgba(255, 193, 199, 0.92) 24%, rgba(218, 78, 96, 0.72) 46%, rgba(144, 41, 44, 0.08) 72%, transparent 78%);
    box-shadow: 0 0 10px rgba(247, 147, 157, 0.66), 0 0 24px rgba(162, 48, 48, 0.36);
}

.yinse-atmosphere-particle--spark {
    width: var(--ambient-size, 11px);
    height: var(--ambient-size, 11px);
    background: linear-gradient(135deg, transparent 32%, #fff9eb 45%, #d65d61 51%, #fff7ed 57%, transparent 69%);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    filter: drop-shadow(0 0 7px rgba(255, 238, 213, 0.94)) drop-shadow(0 0 14px rgba(191, 56, 60, 0.56));
}

.yinse-atmosphere-particle--halo {
    width: var(--ambient-size, 76px);
    aspect-ratio: 2.4;
    border: 1px solid rgba(173, 54, 55, 0.46);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 244, 232, 0.32), rgba(222, 101, 104, 0.16) 34%, transparent 70%);
    box-shadow: 0 0 22px rgba(205, 77, 76, 0.28), inset 0 0 12px rgba(255, 240, 228, 0.24);
}

@keyframes yinse-atmosphere-appear {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) rotate(var(--ambient-rotation, 0deg)) scale(0.28);
    }
    18% {
        opacity: var(--ambient-opacity, 0.58);
        transform: translate3d(calc(-50% + var(--ambient-drift-x-start, 0px)), calc(-50% + var(--ambient-drift-y-start, 0px)), 0) rotate(calc(var(--ambient-rotation, 0deg) + 24deg)) scale(1);
    }
    60% {
        opacity: var(--ambient-opacity-mid, 0.42);
        transform: translate3d(calc(-50% + var(--ambient-drift-x, 0px)), calc(-50% + var(--ambient-drift-y, 0px)), 0) rotate(calc(var(--ambient-rotation, 0deg) + 54deg)) scale(0.92);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--ambient-drift-x, 0px)), calc(-50% + var(--ambient-drift-y, 0px)), 0) rotate(calc(var(--ambient-rotation, 0deg) + 70deg)) scale(0.62);
    }
}

/* Window-sheer atmosphere: no coloured particles, just slow light and shade across glass. */
.yinse-atmosphere-particle {
    display: none !important;
}

.yinse-atmosphere-layer {
    z-index: 2;
    mix-blend-mode: normal;
}

.yinse-atmosphere-wisp {
    position: absolute;
    left: var(--wisp-x, 50vw);
    top: var(--wisp-y, 50vh);
    width: var(--wisp-width, 30vw);
    pointer-events: none;
    transform-origin: center;
    will-change: transform, opacity;
}

.yinse-atmosphere-wisp--sheen {
    height: min(15vw, 190px);
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 254, 250, 0.03) 14%, rgba(255, 253, 248, 0.30) 49%, rgba(166, 151, 141, 0.12) 72%, transparent 100%);
    box-shadow: 0 0 44px rgba(255, 250, 244, 0.16);
    filter: blur(10px);
    opacity: 0.2;
    mix-blend-mode: soft-light;
    animation: yinse-atmosphere-sheen var(--wisp-duration, 23s) ease-in-out var(--wisp-delay, 0s) infinite alternate;
}

.yinse-atmosphere-wisp--thread {
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(98, 86, 79, 0.10) 16%, rgba(255, 253, 247, 0.64) 50%, rgba(133, 119, 109, 0.16) 78%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 250, 244, 0.34), 0 1px 8px rgba(48, 42, 38, 0.10);
    opacity: 0.44;
    animation: yinse-atmosphere-thread var(--wisp-duration, 17s) ease-in-out var(--wisp-delay, 0s) infinite alternate;
}

@keyframes yinse-atmosphere-sheen {
    0% {
        opacity: 0.08;
        transform: translate3d(-50%, -50%, 0) rotate(var(--wisp-rotate, 0deg)) scaleX(0.82);
    }
    52% {
        opacity: 0.34;
        transform: translate3d(calc(-50% + 28px), calc(-50% - 14px), 0) rotate(var(--wisp-rotate, 0deg)) scaleX(1.08);
    }
    100% {
        opacity: 0.13;
        transform: translate3d(calc(-50% + 56px), calc(-50% - 30px), 0) rotate(var(--wisp-rotate, 0deg)) scaleX(0.94);
    }
}

@keyframes yinse-atmosphere-thread {
    0% {
        opacity: 0.08;
        transform: translate3d(-50%, -50%, 0) rotate(var(--wisp-rotate, 0deg)) scaleX(0.64);
    }
    48% {
        opacity: 0.62;
        transform: translate3d(calc(-50% + 18px), calc(-50% - 8px), 0) rotate(var(--wisp-rotate, 0deg)) scaleX(1);
    }
    100% {
        opacity: 0.14;
        transform: translate3d(calc(-50% + 40px), calc(-50% - 18px), 0) rotate(var(--wisp-rotate, 0deg)) scaleX(0.78);
    }
}

@media (max-width: 767.98px) {
    .yinse-atmosphere-wisp--thread {
        opacity: 0.26;
    }
}

/* Deliberate window beams: readable through value contrast, never through saturated colour. */
.yinse-atmosphere-wisp--sheen,
.yinse-atmosphere-wisp--thread {
    display: none;
}

.yinse-atmosphere-layer {
    z-index: 2;
}

.yinse-atmosphere-wisp--beam,
.yinse-atmosphere-wisp--shade {
    position: absolute;
    left: var(--wisp-x, 50vw);
    top: var(--wisp-y, 50vh);
    width: var(--wisp-width, 50vw);
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity;
}

.yinse-atmosphere-wisp--beam {
    height: min(14vw, 188px);
    clip-path: polygon(12% 0, 100% 0, 86% 100%, 0 100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 253, 247, 0.04) 18%, rgba(255, 254, 250, 0.24) 48%, rgba(255, 250, 243, 0.10) 61%, rgba(60, 48, 42, 0.08) 71%, transparent 100%);
    box-shadow: 0 0 24px rgba(255, 248, 239, 0.12);
    filter: blur(3px);
    opacity: 0.28;
    animation: yinse-atmosphere-window-beam var(--wisp-duration, 24s) ease-in-out var(--wisp-delay, 0s) infinite alternate;
}

.yinse-atmosphere-wisp--shade {
    height: min(6vw, 84px);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    background: linear-gradient(90deg, transparent 0%, rgba(48, 40, 35, 0.02) 15%, rgba(53, 44, 39, 0.10) 46%, rgba(255, 252, 247, 0.16) 57%, rgba(59, 48, 42, 0.06) 69%, transparent 100%);
    filter: blur(2px);
    opacity: 0.22;
    animation: yinse-atmosphere-window-shade var(--wisp-duration, 19s) ease-in-out var(--wisp-delay, 0s) infinite alternate;
}

@keyframes yinse-atmosphere-window-beam {
    0% {
        opacity: 0.07;
        transform: translate3d(-50%, -50%, 0) rotate(var(--wisp-rotate, -16deg)) scaleX(0.76);
    }
    55% {
        opacity: 0.30;
        transform: translate3d(calc(-50% + 48px), calc(-50% - 18px), 0) rotate(var(--wisp-rotate, -16deg)) scaleX(1);
    }
    100% {
        opacity: 0.12;
        transform: translate3d(calc(-50% + 92px), calc(-50% - 34px), 0) rotate(var(--wisp-rotate, -16deg)) scaleX(0.86);
    }
}

@keyframes yinse-atmosphere-window-shade {
    0% {
        opacity: 0.05;
        transform: translate3d(-50%, -50%, 0) rotate(var(--wisp-rotate, -14deg)) scaleX(0.72);
    }
    48% {
        opacity: 0.24;
        transform: translate3d(calc(-50% + 32px), calc(-50% - 10px), 0) rotate(var(--wisp-rotate, -14deg)) scaleX(1);
    }
    100% {
        opacity: 0.09;
        transform: translate3d(calc(-50% + 66px), calc(-50% - 22px), 0) rotate(var(--wisp-rotate, -14deg)) scaleX(0.84);
    }
}

/* Fibre motes: visible on light and dark areas without injecting a new colour into the scene. */
.yinse-atmosphere-wisp {
    display: none !important;
}

.yinse-atmosphere-layer {
    z-index: 920;
}

.yinse-atmosphere-particle {
    display: block !important;
    position: absolute;
    left: var(--ambient-x, 50vw);
    top: var(--ambient-y, 50vh);
    bottom: auto;
    opacity: 0;
    mix-blend-mode: normal;
    pointer-events: none;
    will-change: transform, opacity;
    animation: yinse-atmosphere-fibre var(--ambient-duration, 6s) cubic-bezier(0.2, 0.72, 0.24, 1) forwards !important;
}

.yinse-atmosphere-particle--fibre {
    width: 3px;
    height: var(--ambient-height, 24px);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(110deg, rgba(78, 67, 60, 0.46) 0 22%, rgba(255, 253, 246, 0.92) 47%, rgba(169, 153, 139, 0.38) 72%, transparent 100%);
    box-shadow: 1px 0 3px rgba(39, 33, 29, 0.18), 0 0 5px rgba(255, 252, 245, 0.68);
}

.yinse-atmosphere-particle--mote {
    width: var(--ambient-size, 8px);
    height: var(--ambient-size, 8px);
    border: 1px solid rgba(76, 65, 58, 0.38);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 254, 249, 0.98) 0 18%, rgba(234, 225, 213, 0.66) 46%, rgba(94, 78, 68, 0.22) 72%);
    box-shadow: 0 0 5px rgba(255, 252, 244, 0.72), 0 0 10px rgba(64, 53, 47, 0.12);
}

.yinse-atmosphere-particle--petal {
    width: var(--ambient-size, 10px);
    height: var(--ambient-height, 10px);
    border: 1px solid rgba(91, 73, 66, 0.34);
    border-radius: 80% 20% 78% 22%;
    background: linear-gradient(145deg, rgba(255, 252, 247, 0.88), rgba(205, 190, 176, 0.58));
    box-shadow: 0 2px 5px rgba(54, 45, 40, 0.16), 0 0 5px rgba(255, 252, 245, 0.42);
}

@keyframes yinse-atmosphere-fibre {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) rotate(var(--ambient-rotation, 0deg)) scale(0.48);
    }
    16% {
        opacity: var(--ambient-opacity, 0.56);
        transform: translate3d(calc(-50% + var(--ambient-drift-x-start, 0px)), calc(-50% + var(--ambient-drift-y-start, 0px)), 0) rotate(calc(var(--ambient-rotation, 0deg) + 12deg)) scale(1);
    }
    62% {
        opacity: var(--ambient-opacity, 0.56);
        transform: translate3d(calc(-50% + var(--ambient-drift-x, 0px)), calc(-50% + var(--ambient-drift-y, 0px)), 0) rotate(calc(var(--ambient-rotation, 0deg) - 10deg)) scale(0.92);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--ambient-drift-x, 0px)), calc(-50% + var(--ambient-drift-y, 0px)), 0) rotate(calc(var(--ambient-rotation, 0deg) - 18deg)) scale(0.66);
    }
}

/* The original heart interaction now borrows only the collar-red and warm glass palette. */
body.ys .yinse-heart-particle {
    color: var(--heart-color, #a23c38) !important;
    text-shadow: 0 0 7px currentColor, 0 0 16px rgba(145, 48, 44, 0.22) !important;
    filter: drop-shadow(0 7px 13px rgba(95, 43, 40, 0.18)) drop-shadow(0 0 7px color-mix(in srgb, var(--heart-color, #a23c38) 38%, transparent)) !important;
}

body.ys .yinse-heart-particle.is-near-mouse {
    filter: drop-shadow(0 9px 16px rgba(145, 48, 44, 0.26)) drop-shadow(0 0 11px rgba(255, 244, 238, 0.54)) !important;
    animation-play-state: paused;
}

/* The atmosphere uses the supplied multicolour cat Symbol set only; no site icons are replaced. */
body.ys .yinse-heart-particle .yinse-particle-symbol {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    fill: currentColor;
    filter: drop-shadow(0 3px 5px rgba(255, 252, 248, 0.46));
}

/* Commerce actions share the same warm glass language as the image banner. */
body.ys .yinse-commodity-action-link,
body.ys .yinse-search-combo .item-search-trigger {
    border: 1px solid rgba(255, 248, 244, 0.52) !important;
    border-radius: 12px !important;
    background: linear-gradient(118deg, #8f3531 0%, #ab4c45 58%, #d4aaa3 100%) !important;
    color: #fffdfa !important;
    font-weight: 720;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 7px 16px rgba(83, 35, 32, 0.17) !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.ys .yinse-commodity-action-link:hover,
body.ys .yinse-commodity-action-link:focus-visible,
body.ys .yinse-search-combo .item-search-trigger:hover,
body.ys .yinse-search-combo .item-search-trigger:focus-visible {
    border-color: rgba(255, 253, 249, 0.78) !important;
    background: linear-gradient(118deg, #7d302d 0%, #9d413b 58%, #c98e87 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 21px rgba(72, 29, 27, 0.24) !important;
    transform: translateY(-1px);
}

/* Product marks behave like a focused seal: a compact press, warm frame and one clean light pass. */
body.ys .yinse-card-logo-motion .yinse-commodity-thumb {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform 0.26s cubic-bezier(0.2, 0.76, 0.24, 1), border-color 0.26s ease, box-shadow 0.26s ease, filter 0.26s ease !important;
}

body.ys .yinse-card-logo-motion .yinse-commodity-thumb::before {
    inset: 3px;
    z-index: 2;
    border: 1px solid rgba(255, 247, 241, 0.84);
    background: radial-gradient(circle at 50% 50%, transparent 48%, rgba(162, 61, 55, 0.34) 50% 53%, transparent 55%);
    mix-blend-mode: normal;
    opacity: 0;
    transform: scale(0.58);
    transition: none;
}

body.ys .yinse-card-logo-motion .yinse-commodity-thumb::after {
    inset: 0;
    z-index: 3;
    background: linear-gradient(106deg, transparent 24%, rgba(255, 251, 246, 0.10) 37%, rgba(255, 255, 252, 0.74) 48%, rgba(239, 196, 190, 0.24) 55%, transparent 67%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-125%);
    transition: none;
}

body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb,
body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb {
    animation: yinse-logo-seal-press 0.56s cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
    border-color: rgba(162, 61, 55, 0.58) !important;
    filter: saturate(1.05) brightness(1.03) !important;
    box-shadow: 0 0 0 2px rgba(255, 252, 248, 0.68), 0 7px 17px rgba(103, 43, 40, 0.20) !important;
}

body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::before,
body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::before {
    opacity: 1;
    animation: yinse-logo-seal-ring 0.56s cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::after,
body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::after {
    opacity: 1;
    animation: yinse-logo-seal-sweep 0.56s cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

@keyframes yinse-logo-seal-press {
    0% { transform: translate3d(0, 0, 0) scale(0.92); }
    48% { transform: translate3d(0, -2px, 0) scale(1.075); }
    100% { transform: translate3d(0, -1px, 0) scale(1.035); }
}

@keyframes yinse-logo-seal-ring {
    0% { opacity: 0; transform: scale(0.52); }
    52% { opacity: 0.96; transform: scale(1.06); }
    100% { opacity: 0.62; transform: scale(0.92); }
}

@keyframes yinse-logo-seal-sweep {
    0% { opacity: 0; transform: translateX(-125%); }
    18% { opacity: 0.9; }
    100% { opacity: 0; transform: translateX(125%); }
}

body.ys .yinse-card-logo-border-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb,
body.ys .yinse-card-logo-border-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb {
    border-color: transparent !important;
}

body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb {
    box-shadow: none !important;
    filter: none !important;
}

body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::before,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::before,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::after,
body.ys .yinse-card-logo-glow-off .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::after {
    opacity: 0 !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb,
    body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb,
    body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::before,
    body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::before,
    body.ys .yinse-card-logo-motion .yinse-commodity-card:hover .yinse-commodity-thumb::after,
    body.ys .yinse-card-logo-motion .yinse-commodity-card.is-inline-active .yinse-commodity-thumb::after {
        animation: none !important;
    }
}

/* Product-description links are actions, not the legacy cyan/pink neon controls. */
body.ys .yinse-description-body a,
body.ys .yinse-description-body .btn {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(162, 61, 55, 0.42) !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, rgba(255, 253, 250, 0.86), rgba(242, 224, 218, 0.72)) !important;
    color: #7e332f !important;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 6px 15px rgba(105, 51, 47, 0.14) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px));
    backdrop-filter: blur(var(--yinse-container-blur, 20px));
}

body.ys .yinse-description-body a::before,
body.ys .yinse-description-body a::after,
body.ys .yinse-description-body .btn::before,
body.ys .yinse-description-body .btn::after {
    display: none !important;
    content: none !important;
}

body.ys .yinse-description-body a:hover,
body.ys .yinse-description-body a:focus-visible,
body.ys .yinse-description-body .btn:hover,
body.ys .yinse-description-body .btn:focus-visible {
    transform: translateY(-2px) !important;
    border-color: rgba(126, 51, 47, 0.76) !important;
    background: linear-gradient(135deg, #7e332f, #a4433e 62%, #d3aaa2) !important;
    color: #fffaf7 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 10px 22px rgba(95, 43, 40, 0.25) !important;
}

/* Product popup: quiet window light and ribbon, replacing the legacy cyber panel. */
body.ys .yinse-item-popup-backdrop-fx {
    background:
        radial-gradient(ellipse 34% 42% at 10% 10%, rgba(255, 250, 247, 0.26), transparent 72%),
        radial-gradient(ellipse 31% 39% at 91% 86%, rgba(156, 57, 51, 0.20), transparent 74%),
        linear-gradient(119deg, transparent 14%, rgba(247, 222, 214, 0.15) 31%, transparent 49%),
        linear-gradient(305deg, transparent 45%, rgba(140, 47, 43, 0.14) 68%, transparent 83%) !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(5px) saturate(0.92);
    backdrop-filter: blur(5px) saturate(0.92);
    animation: yinse-popup-window-breathe 8s ease-in-out infinite alternate !important;
}

body.ys .yinse-item-popup-float-particle {
    border-radius: 999px !important;
    background: var(--yinse-popup-color) !important;
    box-shadow: 0 0 8px var(--yinse-popup-color), 0 0 16px rgba(255, 252, 248, 0.28) !important;
    opacity: 0.68 !important;
}

body.ys .yinse-item-popup-float-text {
    display: none !important;
}

body.ys .yinse-item-popup-layer.layui-layer {
    border-color: rgba(255, 252, 248, 0.74) !important;
    background: rgba(255, 252, 248, 0.76) !important;
    box-shadow: 0 22px 54px rgba(64, 38, 36, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

body.ys .yinse-item-popup-layer .yinse-item-popup-close {
    color: #8a3732 !important;
    border-color: rgba(162, 61, 55, 0.30) !important;
    background: rgba(255, 252, 248, 0.90) !important;
    box-shadow: 0 6px 18px rgba(86, 43, 40, 0.18) !important;
}

body.ys .yinse-item-popup-layer .yinse-item-popup-close:hover {
    color: #fffaf7 !important;
    border-color: #8a3732 !important;
    background: #8a3732 !important;
}

/* A small greeting follows the existing cat-particle hover enlargement. */
body.ys .yinse-heart-particle.is-near-mouse::after {
    content: '喵～';
    position: absolute;
    left: 62%;
    bottom: 86%;
    z-index: 1;
    padding: 2px 7px 3px;
    border: 1px solid rgba(162, 61, 55, 0.24);
    border-radius: 999px;
    background: rgba(255, 252, 248, 0.92);
    color: #8a3732;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(91, 45, 42, 0.17);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-10%, 4px, 0) scale(0.7);
    animation: yinse-cat-meow 1.15s cubic-bezier(0.18, 0.78, 0.25, 1) both;
}

@keyframes yinse-cat-meow {
    0% { opacity: 0; transform: translate3d(-10%, 7px, 0) scale(0.68); }
    20%, 72% { opacity: 1; transform: translate3d(-10%, -4px, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(-10%, -12px, 0) scale(0.92); }
}

@keyframes yinse-popup-window-breathe {
    0% { filter: saturate(0.92) brightness(0.98); }
    100% { filter: saturate(1.05) brightness(1.04); }
}

/* Mobile follows Tokyo's compact catalogue structure: a category drawer and simple list rows. */
@media (max-width: 767.98px) {
    body.ys.yinse-mobile-drawer-open {
        overflow: hidden !important;
    }

    body.ys .yinse-shop-layout {
        display: block !important;
        margin-top: 12px !important;
    }

    body.ys .yinse-mobile-filter-trigger,
    body.ys .yinse-mobile-sidebar-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    body.ys .yinse-mobile-filter-trigger {
        position: relative;
        isolation: isolate;
        width: 100%;
        min-height: 44px;
        padding: 0 16px !important;
        gap: 9px;
        overflow: hidden;
        border: 1px solid rgba(117, 39, 35, 0.78) !important;
        border-radius: 11px !important;
        background: linear-gradient(112deg, #7d302c 0%, #a4433e 55%, #c88d83 100%) !important;
        color: #fffaf7 !important;
        font-size: 0.9rem;
        font-weight: 800;
        letter-spacing: 0.035em;
        text-shadow: 0 1px 8px rgba(60, 24, 22, 0.30);
        box-shadow: 0 8px 20px rgba(122, 45, 40, 0.26), 0 0 0 1px rgba(255, 252, 248, 0.28);
        animation: yinse-filter-trigger-breathe 2.8s ease-in-out infinite;
        -webkit-tap-highlight-color: transparent;
    }

    body.ys .yinse-mobile-filter-trigger::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -55%;
        z-index: -1;
        width: 36%;
        content: "";
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255, 251, 247, 0.46), transparent);
        transform: skewX(-20deg);
        animation: yinse-filter-trigger-sheen 3.6s cubic-bezier(0.35, 0.08, 0.2, 1) infinite;
    }

    body.ys .yinse-mobile-filter-trigger i,
    body.ys .yinse-mobile-filter-trigger span {
        position: relative;
        z-index: 1;
    }

    body.ys .yinse-mobile-filter-trigger i {
        color: #fff2ee !important;
        font-size: 0.96rem;
        transition: transform 0.2s ease;
    }

    body.ys .yinse-mobile-filter-trigger:hover,
    body.ys .yinse-mobile-filter-trigger:focus-visible,
    body.ys .yinse-mobile-filter-trigger:active {
        outline: none;
        background: linear-gradient(112deg, #682825 0%, #913632 57%, #ba786f 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 11px 24px rgba(99, 35, 32, 0.34), 0 0 0 3px rgba(162, 61, 55, 0.14) !important;
        transform: translateY(-1px);
    }

    body.ys .yinse-mobile-filter-trigger:hover i,
    body.ys .yinse-mobile-filter-trigger:focus-visible i,
    body.ys .yinse-mobile-filter-trigger:active i {
        transform: rotate(-12deg) scale(1.12);
    }

    body.ys .yinse-mobile-sidebar-close {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        flex: 0 0 34px !important;
        border: 1px solid rgba(162, 61, 55, 0.28) !important;
        border-radius: 50% !important;
        background: rgba(255, 252, 248, 0.82) !important;
        color: #8a3732 !important;
        box-shadow: 0 4px 12px rgba(86, 43, 40, 0.12) !important;
        appearance: none;
        -webkit-appearance: none;
    }

    body.ys .yinse-mobile-sidebar-close i {
        font-size: 0.88rem;
        line-height: 1;
    }

    body.ys .yinse-sidebar-panel .yinse-news-ticker {
        margin: 0 14px !important;
        padding: 10px 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        border-bottom: 1px solid rgba(110, 85, 77, 0.16) !important;
    }

    body.ys .yinse-sidebar-panel .yinse-news-ticker-track {
        display: inline-block !important;
        min-width: 100% !important;
        padding-left: 100% !important;
        white-space: nowrap !important;
        font-size: 0.84rem;
        font-weight: 700;
        line-height: 1.35;
        animation: yinse-drawer-news-left var(--yinse-news-speed, 26s) linear infinite !important;
    }

    body.ys .yinse-sidebar-panel .yinse-news-right .yinse-news-ticker-track {
        padding-right: 100% !important;
        padding-left: 0 !important;
        animation-name: yinse-drawer-news-right !important;
    }

    body.ys .yinse-sidebar-panel .yinse-news-alternate .yinse-news-ticker-track {
        padding-right: 8px !important;
        padding-left: 8px !important;
        animation-name: yinse-drawer-news-alternate !important;
        animation-direction: alternate !important;
    }

    body.ys .yinse-mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        display: block;
        border: 0;
        background: rgba(47, 39, 35, 0.20);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.ys.yinse-mobile-drawer-open .yinse-mobile-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.ys .yinse-sidebar-panel {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        display: flex !important;
        flex-direction: column;
        width: min(84vw, 336px);
        height: 100dvh;
        border-radius: 0 12px 12px 0 !important;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(calc(-100% - 12px), 0, 0) !important;
        transition: transform 0.24s ease;
        overflow: hidden !important;
    }

    body.ys.yinse-mobile-drawer-open .yinse-sidebar-panel {
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) !important;
    }

    body.ys .yinse-sidebar-panel .panel-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden auto !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.ys .yinse-category-tree {
        display: grid !important;
        align-content: start;
        grid-auto-rows: max-content;
        gap: 6px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.ys .yinse-category-node {
        display: grid !important;
        align-content: start;
        gap: 6px;
    }

    body.ys .yinse-category-row {
        display: flex !important;
        align-items: center;
        min-width: 0;
        padding-left: calc(var(--yinse-depth, 0) * 12px) !important;
    }

    body.ys .yinse-category-link {
        width: 100% !important;
        min-height: 46px !important;
        padding: 7px 9px !important;
        border-radius: 8px !important;
    }

    body.ys .yinse-category-icon {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }

    body.ys .yinse-catalog-tools {
        position: static !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    body.ys .yinse-catalog-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body.ys .yinse-card-catalog-wrap {
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(110, 85, 77, 0.16) !important;
        border-radius: 10px !important;
        background: rgba(255, 252, 248, 0.38) !important;
    }

    body.ys .yinse-commodity-grid {
        display: block !important;
        padding: 0 !important;
    }

    body.ys .yinse-commodity-card .row-inner,
    body.ys .yinse-card-guren-mode .yinse-commodity-card .row-inner {
        display: flex !important;
        align-items: center !important;
        min-height: 84px !important;
        padding: 12px !important;
        gap: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(110, 85, 77, 0.14) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.ys .yinse-commodity-card:last-child .row-inner {
        border-bottom: 0 !important;
    }

    body.ys .yinse-commodity-card:hover .row-inner,
    body.ys .yinse-commodity-card.is-inline-active .row-inner {
        transform: none !important;
        border-color: rgba(110, 85, 77, 0.14) !important;
        background: rgba(255, 252, 248, 0.30) !important;
        box-shadow: none !important;
    }

    body.ys .yinse-commodity-card-main,
    body.ys .yinse-card-guren-mode .yinse-commodity-card-main {
        display: flex !important;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0 !important;
        align-items: center !important;
        gap: 12px !important;
    }

    body.ys .yinse-commodity-thumb,
    body.ys .yinse-card-guren-mode .yinse-commodity-thumb {
        display: block !important;
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        border-radius: 8px !important;
        background-position: center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-color: rgba(255, 252, 248, 0.58) !important;
    }

    body.ys .yinse-commodity-copy,
    body.ys .yinse-card-guren-mode .yinse-commodity-copy {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        min-height: 54px !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    body.ys .yinse-commodity-name {
        font-size: 0.92rem !important;
        line-height: 1.34 !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body.ys .yinse-commodity-tags {
        display: flex !important;
        flex-wrap: wrap;
        gap: 5px;
    }

    body.ys .yinse-mobile-meta {
        display: inline-flex !important;
        align-items: center;
        min-height: 20px;
        padding: 0 7px;
        border: 1px solid rgba(110, 85, 77, 0.16);
        border-radius: 999px;
        background: rgba(255, 252, 248, 0.58);
        color: #63524b;
        font-size: 0.64rem;
        font-weight: 700;
        white-space: nowrap;
    }

    body.ys .yinse-mobile-price {
        border-color: rgba(162, 61, 55, 0.22);
        background: rgba(162, 61, 55, 0.08);
        color: #8a3732;
    }

    body.ys .yinse-commodity-list-meta,
    body.ys .yinse-commodity-card-foot,
    body.ys .yinse-inline-item-panel {
        display: none !important;
    }
}

@keyframes yinse-filter-trigger-breathe {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(122, 45, 40, 0.26), 0 0 0 1px rgba(255, 252, 248, 0.28);
    }
    50% {
        box-shadow: 0 10px 23px rgba(122, 45, 40, 0.34), 0 0 0 4px rgba(162, 61, 55, 0.10);
    }
}

@keyframes yinse-filter-trigger-sheen {
    0%, 58% { transform: translateX(0) skewX(-20deg); }
    84%, 100% { transform: translateX(440%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-mobile-filter-trigger,
    body.ys .yinse-mobile-filter-trigger::before {
        animation: none !important;
    }
}

/* Keep category and catalogue images clean: no icon chrome behind the artwork. */
body.ys .yinse-category-icon,
body.ys .yinse-current-cat-icon,
body.ys .yinse-commodity-thumb,
body.ys .yinse-card-guren-mode .yinse-commodity-thumb {
    border: 0 !important;
    outline: none !important;
    outline-offset: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

body.ys .yinse-category-icon::before,
body.ys .yinse-category-icon::after,
body.ys .yinse-commodity-thumb::before,
body.ys .yinse-commodity-thumb::after {
    display: none !important;
    content: none !important;
}

@keyframes yinse-drawer-news-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes yinse-drawer-news-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@keyframes yinse-drawer-news-alternate {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100% - 100vw)); }
}

/* Image-matched night palette: deep indigo glass with blue-violet highlights. */
:root {
    --yinse-visual-ink: #edf2ff;
    --yinse-visual-ink-soft: #bcc8e5;
    --yinse-visual-blue: #6f9cff;
    --yinse-visual-blue-deep: #4168d6;
    --yinse-visual-blue-soft: #b1ceff;
    --yinse-visual-sky: #dbe8ff;
    --yinse-visual-paper: rgba(16, 23, 47, 0.78);
    --yinse-visual-paper-strong: rgba(22, 31, 61, 0.9);
    --yinse-visual-glass-dark: rgba(4, 8, 23, 0.86);
    --yinse-visual-line: rgba(157, 178, 229, 0.24);
    --yinse-visual-line-strong: rgba(111, 156, 255, 0.58);
    --yinse-visual-shadow: 0 18px 44px rgba(1, 4, 16, 0.34);
    --yinse-visual-shadow-hover: 0 24px 56px rgba(1, 4, 16, 0.48);
    --yinse-visual-rgb-cyan: #8cb9ff;
    --yinse-visual-rgb-pink: #8c80ff;
    --yinse-visual-rgb-lime: #9baed6;
    --yinse-visual-rgb-violet: #887cff;
}

body.yinse-theme.ys {
    --yinse-visual-glass-surface: linear-gradient(180deg, rgba(21, 29, 58, 0.68), rgba(10, 15, 34, 0.68));
    --yinse-bg: rgba(7, 11, 27, 0.78);
    --yinse-surface: var(--yinse-visual-paper);
    --yinse-black: #edf2ff;
    --yinse-text: var(--yinse-visual-ink);
    --yinse-muted: #a3b0ce;
    --yinse-muted-strong: #c3cde4;
    --yinse-muted-soft: #7180a3;
    --yinse-link: var(--yinse-visual-blue-soft);
    --yinse-border: var(--yinse-visual-line);
    --yinse-border-strong: var(--yinse-visual-line-strong);
    --yinse-accent: var(--yinse-visual-blue);
    --yinse-accent-light: var(--yinse-visual-blue-soft);
    --yinse-accent-rgb: 111, 156, 255;
    --yinse-shadow-soft: var(--yinse-visual-shadow);
    --yinse-shadow-elevated: var(--yinse-visual-shadow-hover);
    background-color: #070b1b !important;
    color: var(--yinse-visual-ink) !important;
}

body.yinse-theme.ys.yinse-bg-mask-on::before {
    background:
        linear-gradient(180deg, rgba(3, 6, 18, 0.22), rgba(3, 6, 18, 0.66)),
        linear-gradient(90deg, rgba(2, 5, 17, 0.5), transparent 68%) !important;
}

body.ys .yinse-nav::after,
body.ys .panel::before,
body.ys .yinse-hero-banner--notice::after {
    background: linear-gradient(90deg, transparent, rgba(178, 207, 255, 0.5), rgba(111, 156, 255, 0.86), rgba(139, 128, 255, 0.6), transparent) !important;
    box-shadow: 0 0 16px rgba(111, 156, 255, 0.3) !important;
}

body.ys .yinse-brand::before {
    background:
        radial-gradient(circle at 22px 50%, rgba(166, 199, 255, 0.28), transparent 42px),
        linear-gradient(135deg, rgba(155, 188, 255, 0.26), rgba(91, 80, 190, 0.22)) !important;
}

body.ys .yinse-brand-name,
body.ys .yinse-hero-title-main,
body.ys .yinse-page-title,
body.ys .panel-title,
body.ys .panel-title-lg,
body.ys .panel-title-small,
body.ys .yinse-item-inline-title {
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-brand:hover .yinse-brand-name,
body.ys .yinse-brand:focus-visible .yinse-brand-name {
    color: var(--yinse-visual-blue-soft) !important;
    filter: drop-shadow(0 0 12px rgba(111, 156, 255, 0.42)) !important;
}

body.ys .yinse-brand-mark,
body.ys .yinse-user-avatar,
body.ys .item-cover {
    border-color: rgba(137, 174, 255, 0.58) !important;
    box-shadow: 0 0 0 3px rgba(8, 13, 31, 0.72), 0 8px 20px rgba(1, 4, 16, 0.42) !important;
}

body.ys .yinse-nav,
body.ys .panel,
body.ys .yinse-item-unified-panel,
body.ys .yinse-footer-wrap,
body.ys .yinse-layer-popup,
body.ys .component-popup {
    border-color: rgba(135, 164, 225, 0.3) !important;
    background: var(--yinse-visual-glass-surface) !important;
    box-shadow: var(--yinse-visual-shadow) !important;
}

body.ys .yinse-nav-link,
body.ys .yinse-button-light,
body.ys .yinse-user-chip,
body.ys .yinse-searchbox,
body.ys .yinse-search-combo,
body.ys .form-control,
body.ys .qty-group,
body.ys .password-form .input-group {
    border-color: rgba(135, 164, 225, 0.34) !important;
    background: rgba(16, 24, 49, 0.78) !important;
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-nav-link,
body.ys .yinse-nav-link span,
body.ys .yinse-button-light,
body.ys .yinse-user-chip,
body.ys .yinse-searchbox,
body.ys .yinse-category-name,
body.ys .yinse-commodity-name,
body.ys .yinse-commodity-price,
body.ys .yinse-commodity-price-main,
body.ys .yinse-item-price .price {
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-button-dark,
body.ys .yinse-nav-link:hover,
body.ys .yinse-nav-link.is-active,
body.ys .yinse-commodity-action-link,
body.ys .sku.is-primary,
body.ys .view-card-btn,
body.ys .component-popup .queryBtn,
body.ys .component-popup .query-button,
body.ys .yinse-mobile-filter-trigger {
    border-color: rgba(142, 177, 255, 0.72) !important;
    background: linear-gradient(135deg, #2947a5 0%, #4168d6 54%, #786fe0 100%) !important;
    color: #f7f9ff !important;
    box-shadow: 0 0 0 1px rgba(175, 201, 255, 0.16), 0 12px 28px rgba(30, 56, 151, 0.34) !important;
}

body.ys .yinse-button-dark:hover,
body.ys .yinse-nav-link:hover,
body.ys .yinse-commodity-action-link:hover,
body.ys .view-card-btn:hover,
body.ys .component-popup .queryBtn:hover,
body.ys .component-popup .query-button:hover,
body.ys .yinse-mobile-filter-trigger:hover,
body.ys .yinse-mobile-filter-trigger:focus-visible {
    background: linear-gradient(135deg, #1d347f 0%, #355ac7 56%, #665bc8 100%) !important;
    box-shadow: 0 0 0 1px rgba(185, 209, 255, 0.24), 0 14px 32px rgba(27, 49, 131, 0.46) !important;
}

body.ys .yinse-button-light:hover,
body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-dropdown-menu .dropdown-item:hover {
    border-color: rgba(111, 156, 255, 0.58) !important;
    background: linear-gradient(135deg, rgba(45, 62, 112, 0.82), rgba(37, 44, 91, 0.82)) !important;
    color: var(--yinse-visual-blue-soft) !important;
}

body.ys .yinse-hero-banner {
    border-color: rgba(154, 184, 246, 0.36) !important;
    background: linear-gradient(135deg, rgba(11, 17, 39, 0.82), rgba(28, 32, 67, 0.7)) !important;
    box-shadow: 0 20px 52px rgba(1, 4, 16, 0.46) !important;
}

body.ys .yinse-hero-banner--notice,
body.ys .yinse-hero-banner--image.yinse-hero-banner--surface {
    background: var(--yinse-visual-glass-surface) !important;
}

body.ys .yinse-hero-banner--surface .yinse-hero-title .yinse-hero-title-main,
body.ys .yinse-item-price .price {
    color: var(--yinse-visual-blue-soft) !important;
    text-shadow: 0 0 18px rgba(111, 156, 255, 0.3) !important;
}

body.ys .yinse-news-ticker,
body.ys .yinse-category-link,
body.ys .yinse-commodity-card .row-inner,
body.ys .yinse-item-purchase-card,
body.ys .cash-pay--independent {
    border-color: rgba(135, 164, 225, 0.28) !important;
    background: linear-gradient(135deg, rgba(21, 31, 62, 0.78), rgba(12, 18, 41, 0.78)) !important;
}

body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-commodity-card:hover .row-inner,
body.ys .yinse-commodity-card.is-inline-active .row-inner {
    border-color: rgba(111, 156, 255, 0.66) !important;
    box-shadow: 0 0 0 1px rgba(146, 183, 255, 0.2), 0 0 22px rgba(111, 156, 255, 0.2), 0 16px 34px rgba(1, 4, 16, 0.4) !important;
}

body.ys .yinse-payment-notice {
    border-color: rgba(153, 188, 255, 0.42) !important;
    background: linear-gradient(90deg, rgba(10, 17, 40, 0.92), rgba(35, 46, 92, 0.78)), var(--yinse-page-background-image, none) !important;
}

body.ys .yinse-payment-notice a,
body.ys .yinse-description-body a,
body.ys .yinse-description-body .btn {
    color: var(--yinse-visual-blue-soft) !important;
}

body.ys .yinse-heart-particle {
    color: var(--heart-color, #8fb7ff) !important;
    text-shadow: 0 0 8px currentColor, 0 0 18px rgba(111, 156, 255, 0.38) !important;
}

/* Match the cat particles and their halo to the cool indigo theme. */
body.ys .yinse-heart-particle {
    color: var(--heart-color, #8fb9ff) !important;
    text-shadow: 0 0 8px currentColor, 0 0 18px rgba(111, 156, 255, 0.34), 0 0 28px rgba(117, 108, 224, 0.2) !important;
    filter: drop-shadow(0 7px 13px rgba(20, 38, 92, 0.24)) drop-shadow(0 0 9px rgba(111, 156, 255, 0.3)) !important;
}

body.ys .yinse-heart-particle.is-near-mouse {
    filter: drop-shadow(0 9px 16px rgba(20, 38, 92, 0.3)) drop-shadow(0 0 13px rgba(170, 200, 255, 0.46)) !important;
}

body.ys .yinse-heart-particle .yinse-particle-symbol {
    filter: drop-shadow(0 3px 5px rgba(169, 199, 255, 0.4)) drop-shadow(0 0 8px rgba(111, 156, 255, 0.2));
}

body.ys .yinse-table-wrap,
body.ys .yinse-commodity-table,
body.ys .wholesale-table,
body.ys .component-popup .bootstrap-table .fixed-table-container {
    border-color: rgba(135, 164, 225, 0.3) !important;
    background: rgba(8, 13, 31, 0.7) !important;
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-commodity-table thead th,
body.ys .component-popup .bootstrap-table .fixed-table-container .table thead th {
    background: rgba(35, 48, 91, 0.72) !important;
    color: var(--yinse-muted-strong) !important;
    border-color: rgba(135, 164, 225, 0.28) !important;
}

body.ys .yinse-commodity-table tbody td,
body.ys .component-popup .bootstrap-table .fixed-table-container .table td {
    border-color: rgba(135, 164, 225, 0.2) !important;
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-description-body a,
body.ys .yinse-description-body .btn {
    border-color: rgba(111, 156, 255, 0.5) !important;
    background: linear-gradient(135deg, rgba(31, 49, 104, 0.88), rgba(37, 42, 91, 0.82)) !important;
    box-shadow: inset 0 1px 0 rgba(215, 229, 255, 0.16), 0 8px 18px rgba(1, 4, 16, 0.34) !important;
}

body.ys .yinse-description-body a:hover,
body.ys .yinse-description-body a:focus-visible,
body.ys .yinse-description-body .btn:hover,
body.ys .yinse-description-body .btn:focus-visible {
    border-color: rgba(160, 193, 255, 0.78) !important;
    background: linear-gradient(135deg, #2947a5, #5d63cf 68%, #7d76e3) !important;
    color: #ffffff !important;
}

body.ys .yinse-item-popup-layer.layui-layer {
    border-color: rgba(156, 187, 255, 0.5) !important;
    background: rgba(13, 20, 44, 0.9) !important;
    box-shadow: 0 22px 54px rgba(1, 4, 16, 0.56), inset 0 1px 0 rgba(214, 229, 255, 0.16) !important;
}

body.ys .yinse-item-popup-layer .yinse-item-popup-close {
    color: var(--yinse-visual-blue-soft) !important;
    border-color: rgba(111, 156, 255, 0.5) !important;
    background: rgba(20, 31, 66, 0.88) !important;
}

body.ys .yinse-item-popup-layer .yinse-item-popup-close:hover {
    color: #ffffff !important;
    border-color: rgba(160, 193, 255, 0.78) !important;
    background: #4168d6 !important;
}

body.ys .yinse-layer-popup,
body.ys .yinse-layer-popup .layui-layer-content,
body.ys .yinse-notice-modal-head,
body.ys .yinse-notice-popup-inner,
body.ys .yinse-notice-actions,
body.ys .yinse-notice-tip {
    color: var(--yinse-visual-ink) !important;
    background: rgba(13, 20, 44, 0.9) !important;
}

body.ys .yinse-layer-popup .layui-layer-title,
body.ys .yinse-layer-popup .yinse-notice-modal-head {
    border-color: rgba(135, 164, 225, 0.28) !important;
    background: linear-gradient(135deg, rgba(34, 48, 96, 0.94), rgba(18, 27, 60, 0.94)) !important;
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-layer-popup .layui-layer-btn {
    border-color: rgba(135, 164, 225, 0.24) !important;
    background: rgba(10, 16, 38, 0.92) !important;
}

body.ys .yinse-layer-popup .yinse-notice-title,
body.ys .yinse-layer-popup .yinse-notice-kicker,
body.ys .yinse-layer-popup .yinse-notice-tip {
    color: var(--yinse-visual-ink) !important;
}

body.ys .yinse-mobile-filter-trigger {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-mobile-filter-trigger,
    body.ys .yinse-mobile-filter-trigger::before {
        animation: none !important;
    }
}

/* Match the image banner controls to the indigo-blue night palette. */
body.ys .yinse-hero-banner--image .yinse-hero-side-notice p,
body.ys .yinse-hero-banner--image .yinse-hero-side-notice div {
    border-color: rgba(153, 190, 255, 0.58) !important;
    background: linear-gradient(135deg, rgba(19, 31, 70, 0.84), rgba(38, 39, 89, 0.72)) !important;
    color: #edf3ff !important;
    text-shadow: 0 2px 10px rgba(2, 6, 22, 0.74) !important;
    box-shadow: inset 0 1px 0 rgba(215, 231, 255, 0.22), 0 10px 26px rgba(2, 7, 24, 0.34), 0 0 18px rgba(111, 156, 255, 0.2) !important;
    animation: yinse-night-notice-breathe 5.8s ease-in-out infinite !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(2) {
    border-color: rgba(154, 143, 255, 0.62) !important;
    background: linear-gradient(135deg, rgba(28, 33, 82, 0.86), rgba(55, 45, 111, 0.74)) !important;
    animation-delay: -1.9s !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:nth-child(3) {
    border-color: rgba(139, 183, 255, 0.52) !important;
    background: linear-gradient(135deg, rgba(16, 27, 61, 0.84), rgba(30, 39, 84, 0.72)) !important;
    animation-delay: -3.8s !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-side-notice p:hover,
body.ys .yinse-hero-banner--image .yinse-hero-side-notice div:hover {
    border-color: rgba(190, 216, 255, 0.86) !important;
    background: linear-gradient(135deg, rgba(38, 62, 132, 0.9), rgba(63, 60, 141, 0.84)) !important;
    box-shadow: inset 0 1px 0 rgba(229, 240, 255, 0.3), 0 15px 30px rgba(2, 7, 24, 0.42), 0 0 22px rgba(111, 156, 255, 0.34) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item,
body.ys .yinse-hero-actions .cyber-btn-item {
    border-color: rgba(164, 198, 255, 0.78) !important;
    background: linear-gradient(135deg, rgba(25, 43, 94, 0.92), rgba(54, 71, 145, 0.9) 58%, rgba(83, 70, 158, 0.88)) !important;
    color: #f5f8ff !important;
    text-shadow: 0 1px 8px rgba(1, 5, 20, 0.56) !important;
    box-shadow: inset 0 1px 0 rgba(218, 233, 255, 0.26), 0 8px 20px rgba(2, 7, 24, 0.38), 0 0 0 1px rgba(111, 156, 255, 0.16) !important;
    animation: none !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item i,
body.ys .yinse-hero-actions .cyber-btn-item i {
    color: #b9d6ff !important;
    text-shadow: 0 0 10px rgba(111, 156, 255, 0.58) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:hover,
body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:focus-visible,
body.ys .yinse-hero-actions .cyber-btn-item:hover,
body.ys .yinse-hero-actions .cyber-btn-item:focus-visible {
    border-color: rgba(211, 229, 255, 0.94) !important;
    background: linear-gradient(135deg, #2947a5 0%, #4168d6 58%, #756ce0 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(237, 245, 255, 0.36), 0 13px 26px rgba(2, 7, 24, 0.48), 0 0 0 3px rgba(111, 156, 255, 0.18) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:hover i,
body.ys .yinse-hero-banner--image .yinse-hero-actions .cyber-btn-item:focus-visible i,
body.ys .yinse-hero-actions .cyber-btn-item:hover i,
body.ys .yinse-hero-actions .cyber-btn-item:focus-visible i {
    color: #ffffff !important;
}

@keyframes yinse-night-notice-breathe {
    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(215, 231, 255, 0.22), 0 10px 26px rgba(2, 7, 24, 0.34), 0 0 18px rgba(111, 156, 255, 0.2);
    }
    50% {
        box-shadow: inset 0 1px 0 rgba(229, 240, 255, 0.3), 0 12px 28px rgba(2, 7, 24, 0.42), 0 0 24px rgba(126, 114, 255, 0.3);
    }
}

/* Signed-in account control follows the indigo glass treatment. */
body.ys .yinse-user-chip {
    border-color: rgba(149, 184, 255, 0.62) !important;
    background: linear-gradient(135deg, rgba(20, 31, 66, 0.92), rgba(37, 43, 91, 0.84)) !important;
    color: #f2f6ff !important;
    box-shadow: inset 0 1px 0 rgba(217, 231, 255, 0.16), 0 8px 20px rgba(1, 5, 19, 0.34) !important;
}

body.ys .yinse-user-chip:hover,
body.ys .yinse-user-chip:focus-visible,
body.ys .yinse-user-dropdown.show .yinse-user-chip {
    border-color: rgba(190, 216, 255, 0.86) !important;
    background: linear-gradient(135deg, rgba(38, 57, 122, 0.94), rgba(61, 59, 137, 0.88)) !important;
    box-shadow: inset 0 1px 0 rgba(231, 241, 255, 0.24), 0 10px 24px rgba(2, 7, 24, 0.44), 0 0 18px rgba(111, 156, 255, 0.22) !important;
}

body.ys .yinse-user-chip::after {
    border-top-color: #b9d6ff !important;
}

body.ys .yinse-user-name {
    color: #f5f8ff !important;
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(1, 5, 20, 0.48);
}

body.ys .yinse-user-balance {
    color: #b9d6ff !important;
    font-weight: 600;
}

body.ys .yinse-user-avatar {
    border-color: rgba(167, 199, 255, 0.74) !important;
    background: #101a3d !important;
    box-shadow: 0 0 0 2px rgba(8, 14, 35, 0.86), 0 0 12px rgba(111, 156, 255, 0.3) !important;
}

body.ys .yinse-dropdown-menu {
    border-color: rgba(149, 184, 255, 0.46) !important;
    background: linear-gradient(180deg, rgba(23, 33, 71, 0.97), rgba(10, 16, 38, 0.97)) !important;
    box-shadow: 0 18px 38px rgba(1, 5, 19, 0.52), inset 0 1px 0 rgba(215, 231, 255, 0.14) !important;
}

body.ys .yinse-dropdown-menu .dropdown-item {
    color: #e8efff !important;
    background: transparent !important;
}

body.ys .yinse-dropdown-menu .dropdown-item i {
    color: #9fc4ff !important;
}

body.ys .yinse-dropdown-menu .dropdown-item:hover,
body.ys .yinse-dropdown-menu .dropdown-item:focus-visible {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(55, 79, 159, 0.8), rgba(77, 69, 157, 0.72)) !important;
}

body.ys .yinse-dropdown-menu .dropdown-divider {
    border-color: rgba(145, 176, 241, 0.2) !important;
}

body.ys .yinse-dropdown-entry-danger .dropdown-item,
body.ys .yinse-dropdown-entry-danger .dropdown-item i {
    color: #ffafc0 !important;
}

body.ys .yinse-dropdown-entry-danger .dropdown-item:hover,
body.ys .yinse-dropdown-entry-danger .dropdown-item:focus-visible {
    color: #fff3f6 !important;
    background: linear-gradient(135deg, rgba(127, 48, 93, 0.7), rgba(94, 47, 104, 0.68)) !important;
}

/* Catalogue search action keeps the same blue-violet primary treatment. */
body.ys .yinse-search-combo .item-search-trigger {
    border-color: rgba(164, 198, 255, 0.8) !important;
    background: linear-gradient(135deg, #2947a5 0%, #4168d6 58%, #756ce0 100%) !important;
    color: #f7f9ff !important;
    text-shadow: 0 1px 8px rgba(1, 5, 20, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(225, 237, 255, 0.28), 0 8px 20px rgba(2, 7, 24, 0.4) !important;
}

body.ys .yinse-search-combo .item-search-trigger i {
    color: #c5ddff !important;
    text-shadow: 0 0 9px rgba(111, 156, 255, 0.54) !important;
}

body.ys .yinse-search-combo .item-search-trigger:hover,
body.ys .yinse-search-combo .item-search-trigger:focus-visible {
    border-color: rgba(219, 232, 255, 0.96) !important;
    background: linear-gradient(135deg, #1d347f 0%, #355ac7 58%, #665bc8 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(239, 246, 255, 0.36), 0 11px 24px rgba(2, 7, 24, 0.5), 0 0 0 3px rgba(111, 156, 255, 0.16) !important;
}

body.ys .yinse-search-combo .item-search-trigger:hover i,
body.ys .yinse-search-combo .item-search-trigger:focus-visible i {
    color: #ffffff !important;
}

/* Final cool-indigo scrollbar treatment for the full theme surface. */
html,
body.ys,
body.ys .yinse-category-tree,
body.ys .layui-layer-content,
body.ys .fixed-table-body,
body.ys .bootstrap-table .fixed-table-body {
    scrollbar-color: #5d7fe0 rgba(7, 12, 29, 0.62);
    scrollbar-width: thin;
}

html::-webkit-scrollbar,
body.ys::-webkit-scrollbar,
body.ys .yinse-category-tree::-webkit-scrollbar,
body.ys .layui-layer-content::-webkit-scrollbar,
body.ys .fixed-table-body::-webkit-scrollbar,
body.ys .bootstrap-table .fixed-table-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body.ys::-webkit-scrollbar-track,
body.ys .yinse-category-tree::-webkit-scrollbar-track,
body.ys .layui-layer-content::-webkit-scrollbar-track,
body.ys .fixed-table-body::-webkit-scrollbar-track,
body.ys .bootstrap-table .fixed-table-body::-webkit-scrollbar-track {
    background: rgba(7, 12, 29, 0.62);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body.ys::-webkit-scrollbar-thumb,
body.ys .yinse-category-tree::-webkit-scrollbar-thumb,
body.ys .layui-layer-content::-webkit-scrollbar-thumb,
body.ys .fixed-table-body::-webkit-scrollbar-thumb,
body.ys .bootstrap-table .fixed-table-body::-webkit-scrollbar-thumb {
    border: 2px solid rgba(7, 12, 29, 0.62);
    border-radius: 999px;
    background: linear-gradient(180deg, #8fb9ff 0%, #4168d6 54%, #756ce0 100%);
    box-shadow: inset 0 0 0 1px rgba(190, 216, 255, 0.42), 0 0 10px rgba(111, 156, 255, 0.24);
}

html::-webkit-scrollbar-thumb:hover,
body.ys::-webkit-scrollbar-thumb:hover,
body.ys .yinse-category-tree::-webkit-scrollbar-thumb:hover,
body.ys .layui-layer-content::-webkit-scrollbar-thumb:hover,
body.ys .fixed-table-body::-webkit-scrollbar-thumb:hover,
body.ys .bootstrap-table .fixed-table-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c6ddff 0%, #5a7ff0 54%, #8b7ff0 100%);
    box-shadow: inset 0 0 0 1px rgba(232, 241, 255, 0.72), 0 0 14px rgba(111, 156, 255, 0.42);
}

html::-webkit-scrollbar-corner,
body.ys::-webkit-scrollbar-corner,
body.ys .yinse-category-tree::-webkit-scrollbar-corner,
body.ys .layui-layer-content::-webkit-scrollbar-corner,
body.ys .fixed-table-body::-webkit-scrollbar-corner,
body.ys .bootstrap-table .fixed-table-body::-webkit-scrollbar-corner {
    background: rgba(7, 12, 29, 0.62);
}

/* Keep legacy !important scrollbar declarations from leaking into any nested surface. */
body.ys,
body.ys * {
    scrollbar-color: #5d7fe0 rgba(7, 12, 29, 0.62) !important;
    scrollbar-width: thin;
}

html::-webkit-scrollbar,
body.ys::-webkit-scrollbar,
body.ys ::-webkit-scrollbar,
body.ys *::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

html::-webkit-scrollbar-track,
body.ys::-webkit-scrollbar-track,
body.ys ::-webkit-scrollbar-track,
body.ys *::-webkit-scrollbar-track {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(7, 12, 29, 0.62) !important;
    background-clip: padding-box !important;
}

html::-webkit-scrollbar-thumb,
body.ys::-webkit-scrollbar-thumb,
body.ys ::-webkit-scrollbar-thumb,
body.ys *::-webkit-scrollbar-thumb {
    min-height: 36px !important;
    border: 2px solid rgba(190, 216, 255, 0.42) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #8fb9ff 0%, #4168d6 54%, #756ce0 100%) !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 0 0 1px rgba(190, 216, 255, 0.42), 0 0 10px rgba(111, 156, 255, 0.24) !important;
}

html::-webkit-scrollbar-thumb:hover,
body.ys::-webkit-scrollbar-thumb:hover,
body.ys ::-webkit-scrollbar-thumb:hover,
body.ys *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c6ddff 0%, #5a7ff0 54%, #8b7ff0 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(232, 241, 255, 0.72), 0 0 14px rgba(111, 156, 255, 0.42) !important;
}

html::-webkit-scrollbar-corner,
body.ys::-webkit-scrollbar-corner,
body.ys ::-webkit-scrollbar-corner,
body.ys *::-webkit-scrollbar-corner {
    background: rgba(7, 12, 29, 0.62) !important;
}

/* Tone down the announcement label so it belongs to the dark glass palette. */
body.ys .yinse-news-ticker-track span[style] {
    border: 1px solid rgba(169, 199, 255, 0.48) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(55, 78, 155, 0.82), rgba(92, 78, 158, 0.76)) !important;
    color: #e8f1ff !important;
    box-shadow: inset 0 1px 0 rgba(225, 237, 255, 0.22), 0 4px 12px rgba(1, 6, 23, 0.28) !important;
}

/* Frosted notice dialog: lower the frame contrast and let the page show through. */
body.ys .yinse-layer-popup.layui-layer {
    border: 1px solid rgba(135, 164, 225, 0.18) !important;
    border-radius: 24px !important;
    background: var(--yinse-visual-glass-surface) !important;
    box-shadow: 0 24px 60px rgba(1, 5, 20, 0.44), inset 0 1px 0 rgba(190, 216, 255, 0.08) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    outline: none !important;
    overflow: hidden !important;
}

body.ys .yinse-layer-popup .layui-layer-content {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.ys .yinse-layer-popup .yinse-notice-modal-head {
    border-bottom: 1px solid rgba(135, 164, 225, 0.1) !important;
    background: linear-gradient(135deg, rgba(34, 48, 96, 0.46), rgba(18, 27, 60, 0.38)) !important;
}

body.ys .yinse-layer-popup .yinse-notice-popup-inner {
    background: transparent !important;
}

body.ys .yinse-layer-popup .yinse-notice-actions {
    border-top: 1px solid rgba(135, 164, 225, 0.1) !important;
    background: transparent !important;
}

body.ys .yinse-layer-popup .yinse-notice-tip {
    background: transparent !important;
}

/* Order lookup header follows the same dark frosted glass treatment as the rest of the site. */
body.ys .yinse-query-heading {
    border-bottom: 1px solid rgba(135, 164, 225, 0.16) !important;
    background: linear-gradient(135deg, rgba(34, 48, 96, 0.56), rgba(18, 27, 60, 0.44)) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
}

body.ys .yinse-query-heading-icon {
    border-color: rgba(142, 177, 255, 0.42) !important;
    background: linear-gradient(135deg, rgba(47, 66, 135, 0.78), rgba(32, 42, 94, 0.72)) !important;
    color: #9fc4ff !important;
    box-shadow: inset 0 1px 0 rgba(222, 235, 255, 0.14), 0 8px 18px rgba(1, 5, 20, 0.24) !important;
}

body.ys .yinse-query-heading .panel-kicker,
body.ys .yinse-query-title,
body.ys .yinse-query-summary {
    color: var(--yinse-visual-ink) !important;
    text-shadow: 0 1px 8px rgba(1, 5, 20, 0.32) !important;
}

body.ys .yinse-query-heading .panel-kicker {
    color: #9db4da !important;
}

body.ys .yinse-query-summary {
    color: #8fa8d0 !important;
}

body.ys .order-query-form input::placeholder {
    color: rgba(157, 180, 218, 0.72) !important;
    opacity: 1 !important;
}

/* Order results use the same cool indigo glass layers as the query panel. */
body.ys .order-results .panel,
body.ys .order-item {
    border-color: rgba(135, 164, 225, 0.28) !important;
    background: linear-gradient(135deg, rgba(21, 31, 62, 0.78), rgba(12, 18, 41, 0.78)) !important;
    color: var(--yinse-visual-ink) !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.06), 0 12px 28px rgba(1, 5, 20, 0.24) !important;
    backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
    -webkit-backdrop-filter: blur(var(--yinse-container-blur, 20px)) saturate(112%) !important;
}

body.ys .order-item::before {
    background: linear-gradient(90deg, rgba(117, 108, 224, 0.9), rgba(111, 156, 255, 0.86), rgba(117, 108, 224, 0.9)) !important;
    opacity: 0.72 !important;
}

body.ys .order-item::after {
    display: none !important;
    content: none !important;
}

body.ys .order-header {
    border-bottom-color: rgba(135, 164, 225, 0.18) !important;
}

body.ys .order-basic,
body.ys .order-no,
body.ys .goods-name,
body.ys .card-content-no-password,
body.ys .card-password-section,
body.ys .card-content {
    color: #edf2ff !important;
}

body.ys .status-badge,
body.ys .shipment-badge,
body.ys .order-no::before {
    border-color: rgba(142, 177, 255, 0.38) !important;
    background: rgba(47, 66, 135, 0.58) !important;
    color: #dceaff !important;
    box-shadow: inset 0 1px 0 rgba(222, 235, 255, 0.1) !important;
}

body.ys .status-badge.status-paid,
body.ys .shipment-badge.shipment-paid {
    border-color: rgba(84, 213, 170, 0.42) !important;
    background: rgba(22, 112, 91, 0.42) !important;
    color: #8ff0cb !important;
}

body.ys .order-amount {
    border-color: rgba(142, 177, 255, 0.34) !important;
    background: linear-gradient(135deg, rgba(47, 66, 135, 0.58), rgba(32, 42, 94, 0.58)) !important;
    box-shadow: inset 0 1px 0 rgba(222, 235, 255, 0.12) !important;
}

body.ys .amount-label {
    color: #9db4da !important;
}

body.ys .amount-value {
    color: #78e0b7 !important;
}

body.ys .goods-section,
body.ys .card-section {
    border-color: rgba(135, 164, 225, 0.24) !important;
    background: linear-gradient(135deg, rgba(32, 45, 88, 0.66), rgba(16, 24, 53, 0.62)) !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.08), 0 8px 20px rgba(1, 5, 20, 0.18) !important;
}

body.ys .card-section .card-header {
    border-bottom-color: rgba(135, 164, 225, 0.18) !important;
    background: rgba(47, 66, 135, 0.28) !important;
}

body.ys .shipment-content,
body.ys .card-title {
    color: #e7efff !important;
}

body.ys .shipment-title i {
    color: #8fb9ff !important;
}

body.ys .card-display {
    border-color: rgba(142, 177, 255, 0.3) !important;
    background: rgba(19, 30, 64, 0.62) !important;
    color: #d9e7ff !important;
}

body.ys .btn-copy-unified,
body.ys .btn-unified {
    border-color: rgba(142, 177, 255, 0.38) !important;
    background: rgba(47, 66, 135, 0.54) !important;
    color: #bcd5ff !important;
}

body.ys .btn-copy-unified:hover,
body.ys .btn-unified:hover {
    border-color: rgba(190, 216, 255, 0.7) !important;
    background: rgba(65, 104, 214, 0.68) !important;
    color: #ffffff !important;
}

body.ys .yinse-layer-popup .yinse-notice-actions {
    padding-top: 12px !important;
}

/* Category and catalogue rows keep the night-glass palette in rest and hover states. */
body.ys .yinse-category-link,
body.ys .yinse-commodity-card .row-inner {
    border-color: rgba(135, 164, 225, 0.28) !important;
    background: linear-gradient(135deg, rgba(21, 31, 62, 0.78), rgba(12, 18, 41, 0.78)) !important;
    color: #edf2ff !important;
    box-shadow: inset 0 1px 0 rgba(198, 218, 255, 0.06), 0 6px 16px rgba(1, 5, 20, 0.18) !important;
}

body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-commodity-card:hover .row-inner,
body.ys .yinse-commodity-card.is-inline-active .row-inner {
    border-color: rgba(142, 177, 255, 0.72) !important;
    background: linear-gradient(135deg, rgba(47, 66, 135, 0.9), rgba(32, 42, 94, 0.9)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(222, 235, 255, 0.14), 0 0 0 1px rgba(146, 183, 255, 0.12), 0 12px 28px rgba(1, 4, 16, 0.36), 0 0 20px rgba(111, 156, 255, 0.16) !important;
}

body.ys .yinse-commodity-card.is-inline-active:hover .row-inner {
    background: linear-gradient(135deg, rgba(54, 76, 151, 0.94), rgba(38, 48, 109, 0.94)) !important;
    box-shadow: inset 0 1px 0 rgba(229, 240, 255, 0.18), 0 0 0 1px rgba(166, 197, 255, 0.2), 0 15px 32px rgba(1, 4, 16, 0.42), 0 0 24px rgba(111, 156, 255, 0.24) !important;
}

body.ys .yinse-category-link:hover .yinse-category-name,
body.ys .yinse-category-link.is-active .yinse-category-name,
body.ys .yinse-commodity-card:hover .yinse-commodity-name,
body.ys .yinse-commodity-card.is-inline-active .yinse-commodity-name {
    color: #ffffff !important;
}

/* The legacy row wrapper had a square pale background in its resting state. */
body.ys .yinse-commodity-card {
    border-radius: 8px !important;
    background: transparent !important;
}

body.ys .yinse-commodity-card .row-inner {
    border-radius: 8px !important;
}

body.ys .yinse-card-guren-mode .yinse-commodity-card .row-inner {
    border-radius: 8px !important;
}

/* Notice links use the same compact glass-button treatment as image-banner actions. */
body.ys .yinse-layer-popup .yinse-notice-popup-inner a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 6px 4px 0;
    padding: 0 16px;
    border: 1px solid rgba(142, 177, 255, 0.62) !important;
    border-radius: 7px !important;
    background: linear-gradient(115deg, rgba(23, 44, 105, 0.88), rgba(65, 104, 214, 0.8) 64%, rgba(117, 108, 224, 0.78)) !important;
    color: #f2f7ff !important;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    text-shadow: 0 1px 8px rgba(1, 5, 20, 0.45);
    box-shadow: inset 0 1px 0 rgba(225, 237, 255, 0.22), 0 8px 18px rgba(2, 7, 24, 0.3) !important;
    backdrop-filter: blur(10px) saturate(124%);
    -webkit-backdrop-filter: blur(10px) saturate(124%);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

body.ys .yinse-layer-popup .yinse-notice-popup-inner a:hover,
body.ys .yinse-layer-popup .yinse-notice-popup-inner a:focus-visible {
    border-color: rgba(205, 225, 255, 0.86) !important;
    background: linear-gradient(115deg, rgba(29, 52, 127, 0.96), rgba(53, 90, 199, 0.88) 64%, rgba(102, 91, 200, 0.86)) !important;
    color: #ffffff !important;
    outline: none;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(239, 246, 255, 0.34), 0 12px 24px rgba(2, 7, 24, 0.42), 0 0 0 2px rgba(111, 156, 255, 0.16) !important;
}

/* Remove the legacy fish/comet stamps from every theme surface. */
body.ys .yinse-comet-inline,
body.ys .yinse-brand::after,
body.ys .yinse-category-link::after,
body.ys .yinse-commodity-card .row-inner::before,
body.ys .yinse-item-badges .badge-soft::after,
body.ys .yinse-item-price::after,
body.ys .order-item::after,
body.ys .yinse-description-body blockquote::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: none !important;
}

/* Keep order cards dark when hovered; the legacy hover rule used a pale wash. */
body.ys .order-item:hover {
    border-color: rgba(142, 177, 255, 0.62) !important;
    background: linear-gradient(135deg, rgba(39, 56, 117, 0.88), rgba(20, 29, 64, 0.88)) !important;
    color: var(--yinse-visual-ink) !important;
    box-shadow: inset 0 1px 0 rgba(222, 235, 255, 0.12), 0 16px 34px rgba(1, 4, 16, 0.36), 0 0 22px rgba(111, 156, 255, 0.16) !important;
}

/* Keep image-banner title glow and pointer refraction in the cool indigo palette. */
body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-main,
body.ys .yinse-hero-banner--image .yinse-hero-title .yinse-hero-title-letter {
    color: #edf4ff !important;
    text-shadow: 0 4px 18px rgba(1, 5, 20, 0.68), 0 0 22px rgba(111, 156, 255, 0.34), 0 0 36px rgba(117, 108, 224, 0.18) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-title strong {
    color: rgba(218, 231, 255, 0.94) !important;
    text-shadow: 0 3px 13px rgba(1, 5, 20, 0.62), 0 0 14px rgba(111, 156, 255, 0.2) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-light-lens {
    background: radial-gradient(ellipse at center, rgba(194, 219, 255, 0.2) 0, rgba(111, 156, 255, 0.16) 32%, rgba(117, 108, 224, 0.08) 54%, transparent 74%) !important;
    filter: blur(3px) saturate(112%) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-light-trail {
    background: radial-gradient(ellipse at center, rgba(191, 219, 255, 0.3) 0, rgba(111, 156, 255, 0.2) 35%, rgba(117, 108, 224, 0.1) 58%, transparent 74%) !important;
    filter: blur(2px) saturate(116%) !important;
}

body.ys .yinse-hero-banner--image .yinse-hero-light-trail::after {
    background: rgba(196, 220, 255, 0.24) !important;
    box-shadow: 0 0 14px rgba(111, 156, 255, 0.22) !important;
}

@keyframes yinse-hero-title-aura {
    0%, 32%, 100% { filter: brightness(1); }
    46% { filter: brightness(1.08) drop-shadow(0 0 10px rgba(111, 156, 255, 0.3)); }
    60% { filter: brightness(1.02) drop-shadow(0 0 8px rgba(117, 108, 224, 0.16)); }
}

@keyframes yinse-hero-title-letter-rise {
    0%, 35%, 100% {
        color: #edf4ff;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
    42% {
        color: #f2f7ff;
        filter: brightness(1.1) drop-shadow(0 0 8px rgba(111, 156, 255, 0.36));
        transform: translateY(-5px) scale(1.028);
    }
    49% {
        color: #d8e6ff;
        filter: brightness(1.05) drop-shadow(0 0 6px rgba(117, 108, 224, 0.28));
        transform: translateY(-2px) scale(1.012);
    }
    57% {
        color: #edf4ff;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
}

@keyframes yinse-hero-title-aura-hover {
    0%, 100% { filter: brightness(1); }
    38% { filter: brightness(1.1) drop-shadow(0 0 12px rgba(111, 156, 255, 0.34)); }
    64% { filter: brightness(1.03) drop-shadow(0 0 8px rgba(117, 108, 224, 0.18)); }
}

@keyframes yinse-hero-title-letter-rise-hover {
    0%, 100% {
        color: #edf4ff;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
    34% {
        color: #f5f8ff;
        filter: brightness(1.12) drop-shadow(0 0 9px rgba(111, 156, 255, 0.4));
        transform: translateY(-6px) scale(1.032);
    }
    55% {
        color: #d8e6ff;
        filter: brightness(1.05) drop-shadow(0 0 6px rgba(117, 108, 224, 0.3));
        transform: translateY(-2px) scale(1.014);
    }
    72% {
        color: #edf4ff;
        filter: brightness(1);
        transform: translateY(0) scale(1);
    }
}

/* Final cascade guard: selected categories stay within the dark indigo palette on hover. */
body.ys .yinse-category-link.is-active:hover {
    border-color: rgba(164, 198, 255, 0.82) !important;
    background: linear-gradient(135deg, rgba(55, 79, 157, 0.94), rgba(38, 48, 111, 0.94)) !important;
    color: #f5f8ff !important;
    box-shadow: inset 0 1px 0 rgba(229, 240, 255, 0.18), 0 0 0 1px rgba(166, 197, 255, 0.18), 0 14px 30px rgba(1, 4, 16, 0.42), 0 0 22px rgba(111, 156, 255, 0.22) !important;
}

body.ys .yinse-category-link.is-active:hover .yinse-category-name {
    color: #ffffff !important;
}