:root {
    --panda-motion-fast: 120ms;
    --panda-motion-normal: 190ms;
    --panda-motion-slow: 260ms;
    --panda-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --panda-motion-expo: cubic-bezier(.16, 1, .3, 1);
}

html[data-panda-ui="neo"] {
    --panda-motion-a: 59, 130, 246;
    --panda-motion-b: 20, 184, 166;
    --panda-motion-c: 34, 197, 94;
    --panda-motion-glow: rgba(59, 130, 246, .16);
    --panda-motion-glow-2: rgba(20, 184, 166, .13);
    --panda-motion-ring: rgba(37, 99, 235, .32);
    --panda-motion-scan: linear-gradient(90deg, transparent, rgba(59, 130, 246, .16), rgba(20, 184, 166, .22), transparent);
}

html[data-panda-ui="dark"] {
    --panda-motion-a: 96, 165, 250;
    --panda-motion-b: 45, 212, 191;
    --panda-motion-c: 74, 222, 128;
    --panda-motion-glow: rgba(96, 165, 250, .22);
    --panda-motion-glow-2: rgba(45, 212, 191, .16);
    --panda-motion-ring: rgba(96, 165, 250, .42);
    --panda-motion-scan: linear-gradient(90deg, transparent, rgba(96, 165, 250, .20), rgba(45, 212, 191, .26), transparent);
}

html[data-panda-ui="anime"] {
    --panda-motion-a: 244, 114, 182;
    --panda-motion-b: 168, 85, 247;
    --panda-motion-c: 45, 212, 191;
    --panda-motion-glow: rgba(244, 114, 182, .18);
    --panda-motion-glow-2: rgba(168, 85, 247, .13);
    --panda-motion-ring: rgba(244, 114, 182, .36);
    --panda-motion-scan: linear-gradient(90deg, transparent, rgba(244, 114, 182, .20), rgba(168, 85, 247, .20), transparent);
}

html.panda-motion-ui,
html.panda-motion-ui body {
    background-color: var(--panda-motion-page-bg, inherit);
}

html[data-panda-ui="neo"] {
    --panda-motion-page-bg: #eef4fb;
}

html[data-panda-ui="dark"] {
    --panda-motion-page-bg: #07111f;
}

html[data-panda-ui="anime"] {
    --panda-motion-page-bg: #fff5fb;
}

.panda-motion-field,
.panda-motion-scan {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.panda-motion-field {
    z-index: 2147482000;
    overflow: hidden;
    opacity: 0;
    transition: opacity 180ms ease;
}

html.panda-motion-pointer .panda-motion-field.is-visible {
    opacity: 1;
}

.panda-cursor-glow {
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 45% 45%, rgba(var(--panda-motion-a), .12), rgba(var(--panda-motion-b), .06) 36%, rgba(var(--panda-motion-c), .025) 54%, transparent 72%);
    filter: blur(12px);
    opacity: .46;
    transform: translate3d(-999px, -999px, 0);
    will-change: transform;
}

html[data-panda-ui="dark"] .panda-cursor-glow {
    opacity: .58;
}

html[data-panda-ui="anime"] .panda-cursor-glow {
    opacity: .42;
}

.panda-motion-scan {
    z-index: 2147481999;
    display: none;
    overflow: hidden;
}

.panda-motion-scan::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -42%;
    width: 42%;
    background: var(--panda-motion-scan);
    filter: blur(.2px);
    transform: skewX(-15deg) translateX(0);
}

html.panda-motion-navigating .panda-motion-scan,
.panda-motion-scan.is-active {
    display: block;
}

html.panda-motion-navigating .panda-motion-scan::before,
.panda-motion-scan.is-active::before {
    animation: pandaMotionScan 240ms var(--panda-motion-expo) both;
}

body.panda-motion-arrived .ht-main,
body.panda-motion-arrived .sy-main,
body.panda-motion-arrived .dl-wrap {
    animation: pandaMotionPageSettle 240ms var(--panda-motion-ease) both;
}

.panda-motion-magnetic {
    position: relative;
    overflow: hidden;
    transform: translate3d(var(--panda-mx, 0), var(--panda-my, 0), 0) scale(var(--panda-ms, 1)) !important;
    transition:
        transform var(--panda-motion-normal) var(--panda-motion-ease),
        box-shadow var(--panda-motion-normal) var(--panda-motion-ease),
        border-color var(--panda-motion-fast) ease,
        background-color var(--panda-motion-fast) ease,
        color var(--panda-motion-fast) ease !important;
    will-change: transform;
}

.panda-motion-magnetic:hover {
    box-shadow: 0 12px 30px rgba(var(--panda-motion-a), .18), 0 0 0 1px rgba(var(--panda-motion-b), .12) !important;
}

.panda-motion-magnetic:active {
    --panda-ms: .982;
}

.panda-motion-lite {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--panda-motion-fast) var(--panda-motion-ease),
        box-shadow var(--panda-motion-fast) ease,
        border-color var(--panda-motion-fast) ease,
        background-color var(--panda-motion-fast) ease,
        color var(--panda-motion-fast) ease !important;
}

.panda-motion-lite:hover {
    transform: translateY(-1px);
}

.panda-motion-lite:active {
    transform: scale(.986);
}

.panda-motion-ripple {
    position: absolute;
    left: var(--panda-rx, 50%);
    top: var(--panda-ry, 50%);
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .46), rgba(var(--panda-motion-a), .24) 42%, transparent 72%);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: pandaMotionRipple 460ms ease-out both;
    z-index: 2;
}

.panda-motion-card {
    position: relative;
    isolation: isolate;
    transition:
        transform var(--panda-motion-normal) var(--panda-motion-ease),
        box-shadow var(--panda-motion-slow) var(--panda-motion-ease),
        border-color var(--panda-motion-fast) ease !important;
}

.panda-motion-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(220px circle at var(--panda-card-x, 50%) var(--panda-card-y, 50%), var(--panda-motion-glow), transparent 68%),
        linear-gradient(135deg, transparent, var(--panda-motion-glow-2), transparent);
    transition: opacity var(--panda-motion-normal) ease;
    z-index: 1;
}

.panda-motion-card:hover::after,
.panda-motion-card:focus-within::after {
    opacity: 1;
}

.panda-motion-card:hover {
    border-color: var(--panda-motion-ring) !important;
    box-shadow: 0 16px 42px rgba(var(--panda-motion-a), .12) !important;
}

.panda-motion-card > * {
    position: relative;
    z-index: 2;
}

html.panda-motion-safe .panda-motion-field,
html.panda-motion-safe .panda-cursor-glow,
html.panda-motion-safe .panda-motion-card::after {
    display: none !important;
}

html.panda-motion-safe .panda-motion-card {
    isolation: auto;
}

.panda-support-widget.has-unread .panda-support-fab,
.panda-support-widget.message-flash .panda-support-fab {
    animation: pandaMotionUnreadBreath 1.45s ease-in-out infinite;
}

.panda-support-badge:not([hidden]),
#pandaSupportMenuBadge:not([hidden]),
.panda-motion-badge-pop {
    animation: pandaMotionBadgePop 520ms var(--panda-motion-expo) both;
}

.support-conv-item.has-new:not(.on),
.panda-support-admin-toast.show,
.panda-support-toast.show {
    animation: pandaMotionNoticeIn 360ms var(--panda-motion-ease) both;
}

.support-conv-item.has-new:not(.on) {
    box-shadow: 0 0 0 1px rgba(248, 113, 113, .18), 0 10px 26px rgba(248, 113, 113, .10) !important;
}

.alert-ok,
.alert-success,
.alert-err,
.alert-error,
.layui-layer-dialog,
.zu-mask.show .zu-dialog,
.flash-mask.show .flash-dialog,
.cw-mask.show .cw-dialog {
    animation: pandaMotionDialogIn 220ms var(--panda-motion-ease) both;
}

.alert-err,
.alert-error {
    box-shadow: 0 12px 28px rgba(220, 38, 38, .10) !important;
}

.alert-ok,
.alert-success {
    box-shadow: 0 12px 28px rgba(22, 163, 74, .10) !important;
}

@keyframes pandaMotionScan {
    from {
        transform: skewX(-15deg) translateX(0);
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    to {
        transform: skewX(-15deg) translateX(340%);
        opacity: 0;
    }
}

@keyframes pandaMotionPageSettle {
    from {
        opacity: .94;
        transform: translateY(6px) scale(.998);
        filter: saturate(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes pandaMotionRipple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(28);
    }
}

@keyframes pandaMotionBadgePop {
    0% {
        transform: translateY(0) scale(.82);
    }
    54% {
        transform: translateY(-2px) scale(1.08);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes pandaMotionUnreadBreath {
    0%, 100% {
        box-shadow: 0 10px 28px rgba(var(--panda-motion-a), .18), 0 0 0 0 rgba(239, 68, 68, .36);
    }
    50% {
        box-shadow: 0 16px 36px rgba(var(--panda-motion-a), .24), 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

@keyframes pandaMotionNoticeIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
        filter: saturate(.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes pandaMotionDialogIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.986);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
    .panda-motion-field {
        display: none !important;
    }

    .panda-motion-magnetic {
        transform: none !important;
    }

    .panda-motion-card:hover {
        transform: none !important;
    }
}

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

    .panda-motion-field,
    .panda-motion-scan {
        display: none !important;
    }
}