/* CedCouplet nebula palette: tuned for the purple space background. */
:root {
    --ced-bg: #07051d;
    --ced-bg-deep: #040313;
    --ced-surface: rgba(13, 9, 43, 0.72);
    --ced-surface-solid: #100b35;
    --ced-surface-soft: rgba(24, 15, 67, 0.64);
    --ced-purple: #8b5cf6;
    --ced-violet: #6d3df5;
    --ced-magenta: #e879f9;
    --ced-blue: #526dff;
    --ced-cyan: #8be9fd;
    --ced-text: #f7f2ff;
    --ced-muted: #b9acd5;
    --ced-muted-soft: #8b80aa;
    --ced-line: rgba(180, 145, 255, 0.28);
    --ced-line-strong: rgba(218, 173, 255, 0.58);
    --ced-shadow: 0 18px 48px rgba(2, 1, 16, 0.48), 0 0 32px rgba(112, 54, 255, 0.14);
    --ced-shadow-hover: 0 20px 50px rgba(2, 1, 16, 0.56), 0 0 26px rgba(220, 94, 255, 0.22);
}

body.yinse-theme.ys {
    --yinse-bg: var(--ced-bg);
    --yinse-surface: var(--ced-surface);
    --yinse-black: var(--ced-text);
    --yinse-text: var(--ced-text);
    --yinse-muted: var(--ced-muted);
    --yinse-muted-strong: #d8c9ef;
    --yinse-muted-soft: var(--ced-muted-soft);
    --yinse-link: var(--ced-cyan);
    --yinse-border: var(--ced-line);
    --yinse-border-strong: var(--ced-line-strong);
    --yinse-accent: var(--ced-purple);
    --yinse-accent-light: var(--ced-magenta);
    --yinse-accent-rgb: 139, 92, 246;
    --yinse-shadow-soft: var(--ced-shadow);
    --yinse-shadow-elevated: var(--ced-shadow-hover);
    --xn-ink: var(--ced-text);
    --xn-ink-2: #ffffff;
    --xn-building: var(--ced-bg-deep);
    --xn-hair: var(--ced-purple);
    --xn-hair-soft: #c4a7ff;
    --xn-sky: var(--ced-cyan);
    --xn-paper: var(--ced-surface);
    --xn-paper-2: rgba(5, 3, 22, 0.82);
    --xn-line: var(--ced-line);
    --xn-line-strong: var(--ced-line-strong);
    --xn-pink: var(--ced-magenta);
    --xn-brick: #7045b9;
    --xn-success: #92e6cf;
    --xn-warning: #f5cc91;
    --xn-shadow: var(--ced-shadow);
    --xn-shadow-hover: var(--ced-shadow-hover);
    background-color: var(--ced-bg-deep) !important;
    color: var(--ced-text);
}

body.yinse-theme.ys.yinse-bg-mask-on::before {
    background:
        linear-gradient(90deg, rgba(5, 2, 21, 0.72), rgba(8, 4, 30, 0.22) 48%, rgba(3, 2, 17, 0.76)),
        linear-gradient(180deg, rgba(3, 2, 14, 0.32), rgba(5, 2, 20, 0.68)) !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(--ced-line) !important;
    background: var(--ced-surface) !important;
    box-shadow: var(--ced-shadow) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
}

body.ys .yinse-nav::after {
    background: linear-gradient(90deg, transparent, var(--ced-purple), var(--ced-magenta), var(--ced-cyan), transparent) !important;
    opacity: 0.72;
}

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,
body.ys .yinse-nav-toggle {
    border-color: rgba(180, 145, 255, 0.28) !important;
    background: rgba(11, 7, 35, 0.76) !important;
    color: var(--ced-text) !important;
}

body.ys .yinse-nav-link:hover,
body.ys .yinse-nav-link.is-active,
body.ys .yinse-category-link:hover,
body.ys .yinse-category-link.is-active,
body.ys .yinse-commodity-card:hover,
body.ys .yinse-button-light:hover,
body.ys .yinse-button:hover {
    border-color: var(--ced-line-strong) !important;
    background: rgba(104, 54, 194, 0.34) !important;
    box-shadow: 0 0 0 1px rgba(218, 173, 255, 0.12), 0 0 24px rgba(139, 92, 246, 0.18) !important;
}

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: rgba(232, 121, 249, 0.72) !important;
    background: linear-gradient(135deg, var(--ced-violet), var(--ced-magenta)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(109, 61, 245, 0.34), 0 0 20px rgba(232, 121, 249, 0.18) !important;
}

body.ys .yinse-button-dark:hover,
body.ys .yinse-commodity-action-link:hover,
body.ys .sku.is-primary:hover,
body.ys .view-card-btn:hover {
    filter: brightness(1.1) saturate(1.08);
}

body.ys .yinse-brand-name,
body.ys .yinse-hero-title span,
body.ys .yinse-hero-title strong,
body.ys .panel-title,
body.ys .yinse-item-inline-title,
body.ys .yinse-page-title,
body.ys .panel-title-lg {
    color: var(--ced-text) !important;
    text-shadow: 0 0 18px rgba(216, 160, 255, 0.2);
}

body.ys .yinse-brand-name {
    background: linear-gradient(90deg, #ffffff, #c4a7ff 45%, var(--ced-magenta) 78%, var(--ced-cyan)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

body.ys .panel-kicker,
body.ys .yinse-eyebrow,
body.ys .yinse-muted,
body.ys .yinse-page-summary,
body.ys .yinse-hero-summary,
body.ys .yinse-current-meta,
body.ys .yinse-commodity-muted,
body.ys .yinse-user-balance {
    color: var(--ced-muted) !important;
}

body.ys .yinse-table-wrap,
body.ys .yinse-card-catalog-wrap,
body.ys .yinse-catalog-panel,
body.ys .yinse-catalog-body {
    background: transparent !important;
}

body.ys .yinse-commodity-card,
body.ys .yinse-commodity-card .row-inner,
body.ys .yinse-commodity-table,
body.ys .wholesale-table {
    background: rgba(10, 6, 32, 0.42) !important;
    border-color: rgba(180, 145, 255, 0.22) !important;
}

body.ys .yinse-commodity-card .row-inner {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 28px rgba(3, 1, 18, 0.26) !important;
}

body.ys .yinse-commodity-table thead th {
    background: rgba(25, 14, 68, 0.72) !important;
    color: var(--ced-muted) !important;
    border-color: var(--ced-line) !important;
}

body.ys .yinse-commodity-table tbody td,
body.ys .yinse-commodity-row {
    border-color: rgba(180, 145, 255, 0.18) !important;
}

body.ys .yinse-commodity-row:hover {
    background: rgba(139, 92, 246, 0.12) !important;
}

body.ys .yinse-commodity-name,
body.ys .yinse-commodity-price,
body.ys .yinse-commodity-price-main,
body.ys .yinse-description-body,
body.ys .yinse-item-form-wrap,
body.ys .yinse-notice-popup-inner {
    color: var(--ced-text) !important;
}

body.ys .yinse-result-count,
body.ys .yinse-category-count,
body.ys .loading-content,
body.ys .yinse-inline-note {
    background: rgba(139, 92, 246, 0.14) !important;
    color: var(--ced-muted) !important;
    border-color: rgba(180, 145, 255, 0.22) !important;
}

body.ys .yinse-hero-title {
    background: transparent !important;
    border-color: transparent !important;
}

body.ys .yinse-hero-actions .cyber-btn-item {
    border-color: rgba(232, 121, 249, 0.46) !important;
    background: rgba(20, 10, 57, 0.72) !important;
    color: var(--ced-text) !important;
}

body.ys .yinse-hero-actions .cyber-btn-item:hover {
    background: linear-gradient(135deg, rgba(109, 61, 245, 0.82), rgba(232, 121, 249, 0.7)) !important;
}

body.ys .yinse-footer-wrap {
    background: rgba(8, 5, 27, 0.66) !important;
}

body.ys .yinse-footer-copy,
body.ys .yinse-footer-icp {
    color: var(--ced-muted) !important;
}

body.ys .yinse-back-to-top,
body.ys #backToTop {
    border-color: var(--ced-line-strong) !important;
    background: rgba(13, 8, 42, 0.86) !important;
    color: var(--ced-text) !important;
}

body.ys .yinse-back-to-top:hover,
body.ys #backToTop:hover {
    background: var(--ced-violet) !important;
    color: #ffffff !important;
}

body.ys .yinse-hero-banner--image::before {
    background: linear-gradient(90deg, rgba(7, 3, 28, 0.16), rgba(7, 3, 28, 0.04) 58%, rgba(7, 3, 28, 0.48)) !important;
}

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

/* Keep the pointer effect on a compositor layer instead of repainting the full banner. */
body.ys .yinse-hero-pointer-glow {
    left: 50% !important;
    top: 50% !important;
    width: 170px !important;
    height: 170px !important;
    background: radial-gradient(circle, rgba(232, 121, 249, 0.24) 0, rgba(139, 92, 246, 0.12) 34%, transparent 72%) !important;
    filter: blur(2px) !important;
    transform: translate3d(var(--yinse-hero-glow-x, 0px), var(--yinse-hero-glow-y, 0px), 0) translate(-50%, -50%) !important;
    transition: opacity 0.18s ease !important;
    will-change: transform, opacity;
}

/* Replace the old title crosshair lines with small orbital sparks and an electric text pulse. */
body.ys .yinse-hero-title::before {
    content: "✦" !important;
    left: auto !important;
    right: -28px !important;
    top: 4px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: 0 0 10px rgba(232, 121, 249, 0.78), 16px 18px 0 -2px rgba(139, 92, 246, 0.88), -12px 42px 0 -3px rgba(139, 233, 253, 0.78) !important;
    color: #f7f2ff !important;
    font-size: 13px;
    line-height: 1;
    opacity: 0.9;
    animation: cedHeroSparkPulse 2.8s ease-in-out infinite;
}

body.ys .yinse-hero-title::after {
    content: "✧" !important;
    left: auto !important;
    right: -18px !important;
    bottom: -12px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: -18px 3px 0 -2px rgba(139, 233, 253, 0.86), -42px -4px 0 -3px rgba(232, 121, 249, 0.76), 0 0 12px rgba(139, 92, 246, 0.72) !important;
    color: #d8c5ff !important;
    font-size: 11px;
    line-height: 1;
    animation: cedHeroSparkPulse 2.4s ease-in-out 0.4s infinite;
}

body.ys .yinse-hero-title span {
    animation: yinseHeroTitleFloat 5.8s ease-in-out 0.9s infinite, cedHeroElectricPulse 3.6s ease-in-out 1.1s infinite !important;
    filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.26));
}

body.ys .yinse-hero-title strong {
    animation: yinseHeroSubtitleFloat 6.4s ease-in-out 1.1s infinite, cedHeroSubtitleSpark 4.8s ease-in-out 1.4s infinite !important;
}

/* Keep the image banner free of decorative particles and pointer glow. */
body.ys .yinse-hero-banner--image::after,
body.ys .yinse-hero-title::before,
body.ys .yinse-hero-title::after,
body.ys .yinse-hero-pointer-glow,
body.ys .yinse-hero-right-hud,
body.ys .yinse-hero-emblem,
body.ys .yinse-hero-orbit,
body.ys .yinse-hero-glass,
body.ys .yinse-hero-stardust,
body.ys .yinse-hero-bottom-light {
    display: none !important;
    content: none !important;
    animation: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Do not spend animation work while the banner title is outside the viewport. */
body.ys .yinse-hero-title.yinse-hero-title--paused,
body.ys .yinse-hero-title.yinse-hero-title--paused * {
    animation-play-state: paused !important;
}

@keyframes cedHeroElectricPulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.3)) drop-shadow(0 0 12px rgba(232, 121, 249, 0.08));
        text-shadow: 0 0 8px rgba(139, 92, 246, 0.24), 0 0 20px rgba(232, 121, 249, 0.12);
    }
    43% {
        filter: drop-shadow(0 0 7px rgba(139, 233, 253, 0.72)) drop-shadow(0 0 18px rgba(139, 92, 246, 0.36));
        text-shadow: 0 0 10px rgba(139, 233, 253, 0.72), 0 0 28px rgba(139, 92, 246, 0.36);
    }
    47% {
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 24px rgba(232, 121, 249, 0.62));
        text-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 0 32px rgba(232, 121, 249, 0.58);
    }
    52% {
        filter: drop-shadow(0 0 5px rgba(232, 121, 249, 0.46)) drop-shadow(0 0 16px rgba(139, 92, 246, 0.22));
        text-shadow: 0 0 9px rgba(232, 121, 249, 0.46), 0 0 22px rgba(139, 92, 246, 0.22);
    }
}

@keyframes cedHeroSubtitleSpark {
    0%, 100% { opacity: 0.86; text-shadow: 0 0 10px rgba(139, 233, 253, 0.22); }
    50% { opacity: 1; text-shadow: 0 0 12px rgba(139, 233, 253, 0.6), 0 0 22px rgba(232, 121, 249, 0.18); }
}

@keyframes cedHeroSparkPulse {
    0%, 100% { opacity: 0.42; transform: scale(0.78) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(18deg); }
}


body.ys ::selection {
    background: rgba(232, 121, 249, 0.38);
    color: #ffffff;
}

@media (max-width: 767px) {
    body.ys .yinse-nav-link {
        background: rgba(11, 7, 35, 0.84) !important;
    }

    body.ys .yinse-sidebar-panel,
    body.ys .yinse-sidebar-panel .panel-header,
    body.ys .yinse-sidebar-panel .panel-body {
        background: transparent !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Ambient stars: random fade-in/fade-out points, with no continuous screen-wide drift. */
body.ys .yinse-heart-particle-layer {
    contain: strict;
    isolation: isolate;
}

body.ys .yinse-star-particle {
    left: var(--star-x) !important;
    top: var(--star-y) !important;
    width: var(--star-size) !important;
    height: var(--star-size) !important;
    color: var(--star-color) !important;
    opacity: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 20px currentColor, 0 0 42px currentColor;
    filter: none !important;
    transform: translate3d(-50%, -50%, 0) rotate(var(--star-rotate)) scale(0.35) !important;
    animation: yinseStarTwinkle var(--star-duration) ease-in-out forwards !important;
    transition: none !important;
    will-change: opacity, transform;
    mix-blend-mode: screen;
}

body.ys .yinse-star-particle[data-shape="dot"] {
    background: currentColor;
    box-shadow: 0 0 14px currentColor, 0 0 30px currentColor;
}

body.ys .yinse-star-particle[data-shape="star"] {
    background: currentColor;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    box-shadow: 0 0 14px currentColor, 0 0 30px currentColor;
}

body.ys .yinse-star-particle[data-shape="cross"] {
    background: transparent;
}

body.ys .yinse-star-particle[data-shape="flare"] {
    background: radial-gradient(circle, #ffffff 0 9%, currentColor 24%, transparent 72%);
    box-shadow: 0 0 24px currentColor, 0 0 52px currentColor;
}

body.ys .yinse-star-particle[data-shape="flare"]::before,
body.ys .yinse-star-particle[data-shape="flare"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: 999px;
    opacity: 0.8;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 18px currentColor, 0 0 34px currentColor;
}

body.ys .yinse-star-particle[data-shape="flare"]::before {
    width: 140%;
    height: 1px;
}

body.ys .yinse-star-particle[data-shape="flare"]::after {
    width: 1px;
    height: 140%;
}

body.ys .yinse-star-particle[data-shape="cross"]::before,
body.ys .yinse-star-particle[data-shape="cross"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    background: currentColor;
    border-radius: 999px;
    box-shadow: 0 0 8px currentColor;
    transform: translate(-50%, -50%);
}

body.ys .yinse-star-particle[data-shape="cross"]::before {
    width: 100%;
    height: 1px;
}

body.ys .yinse-star-particle[data-shape="cross"]::after {
    width: 1px;
    height: 100%;
}

@keyframes yinseStarTwinkle {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) rotate(var(--star-rotate)) scale(0.2);
    }
    18% {
        opacity: var(--star-opacity);
        transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.16);
    }
    42% {
        opacity: calc(var(--star-opacity) * 0.5);
        transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(0.72);
    }
    62% {
        opacity: var(--star-opacity);
        transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.08);
    }
    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) rotate(var(--star-rotate)) scale(0.3);
    }
}

/* Star-trail entrance for product cards when a category is opened. */
body.ys .yinse-commodity-card {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.985);
}

body.ys .yinse-commodity-card.is-star-entering {
    animation: cedCardStarArrival 0.72s cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

@keyframes cedCardStarArrival {
    0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(0.985);
        filter: brightness(0.72) saturate(0.82);
    }
    55% {
        opacity: 1;
        transform: translate3d(0, -2px, 0) scale(1.006);
        filter: brightness(1.18) saturate(1.16);
    }
    76% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1.04) saturate(1.04);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1) saturate(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ys .yinse-commodity-card,
    body.ys .yinse-commodity-card.is-star-entering {
        opacity: 1;
        transform: none;
        animation: none !important;
        filter: none;
    }
}

/* Theme-colored scrollbars for the page and nested scroll containers. */
html,
body.ys,
body.ys * {
    scrollbar-color: var(--ced-purple) var(--ced-bg-deep);
    scrollbar-width: thin;
}

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

html::-webkit-scrollbar-track,
body.ys::-webkit-scrollbar-track,
body.ys *::-webkit-scrollbar-track {
    background: rgba(4, 3, 19, 0.82) !important;
    border-left: 1px solid rgba(139, 92, 246, 0.08);
}

html::-webkit-scrollbar-thumb,
body.ys::-webkit-scrollbar-thumb,
body.ys *::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 2px solid rgba(4, 3, 19, 0.92) !important;
    border-radius: 999px;
    background: linear-gradient(180deg, #e879f9 0%, #8b5cf6 52%, #526dff 100%) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.38);
}

html::-webkit-scrollbar-thumb:hover,
body.ys::-webkit-scrollbar-thumb:hover,
body.ys *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f7b4ff 0%, #a983ff 48%, #7d91ff 100%) !important;
    box-shadow: 0 0 14px rgba(232, 121, 249, 0.58);
}

html::-webkit-scrollbar-corner,
body.ys::-webkit-scrollbar-corner,
body.ys *::-webkit-scrollbar-corner {
    background: var(--ced-bg-deep) !important;
}