:root {
    --yjdi-accent: #45e3ff;
    --yjdi-top: 14px;
    --yjdi-mobile-top: 8px;
    --yjdi-expanded-width: 326px;
    --yjdi-shadow-alpha: .55;
}

html.yjdi-active {
    overflow-x: clip;
}

.yjdi-layer {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.yjdi-layer.is-visible {
    opacity: 1;
    visibility: visible;
}

.yjdi-backdrop {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .28s ease, backdrop-filter .28s ease;
}

.yjdi-layer[data-backdrop="dim"] .yjdi-backdrop {
    background: rgba(8, 11, 18, .14);
    opacity: 1;
}

.yjdi-layer[data-backdrop="blur"] .yjdi-backdrop {
    background: rgba(10, 13, 20, .08);
    -webkit-backdrop-filter: blur(3px) saturate(1.08);
    backdrop-filter: blur(3px) saturate(1.08);
    opacity: 1;
}

.yjdi-shell {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + var(--yjdi-top));
    left: 0;
    right: 0;
    width: 126px;
    height: 36px;
    margin-inline: auto;
    transform: translate3d(0, -18px, 0) scale(.88);
    transform-origin: 50% 0;
    will-change: width, height, transform, opacity;
    opacity: 0;
    border-radius: 999px;
    background: #050505;
    color: #fff;
    box-shadow:
        0 16px 44px rgba(0, 0, 0, calc(var(--yjdi-shadow-alpha) * .64)),
        0 4px 14px rgba(0, 0, 0, calc(var(--yjdi-shadow-alpha) * .36)),
        inset 0 0 0 1px rgba(255,255,255,.055);
    overflow: hidden;
    pointer-events: auto;
    isolation: isolate;
    transition:
        width .48s cubic-bezier(.2,.84,.22,1),
        height .48s cubic-bezier(.2,.84,.22,1),
        border-radius .4s ease,
        transform .42s cubic-bezier(.2,.84,.22,1),
        opacity .22s ease;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.admin-bar .yjdi-shell {
    top: calc(env(safe-area-inset-top, 0px) + var(--yjdi-top) + 32px);
}

.yjdi-layer.is-visible .yjdi-shell {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.yjdi-layer.is-expanded .yjdi-shell {
    width: min(var(--yjdi-expanded-width), calc(100vw - 24px));
    height: 78px;
    border-radius: 28px;
}

.yjdi-layer.is-done .yjdi-shell {
    width: min(266px, calc(100vw - 28px));
    height: 58px;
    border-radius: 24px;
}

.yjdi-island-glow {
    position: absolute;
    inset: -28px -18px auto;
    height: 80px;
    z-index: -1;
    opacity: .22;
    background:
        radial-gradient(
            circle at 35% 50%,
            color-mix(in srgb, var(--yjdi-accent) 70%, transparent),
            transparent 58%
        );
    filter: blur(18px);
}

.yjdi-camera {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, #264c69 0 14%, #0c1c2b 28%, #030405 62%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.03),
        inset 0 0 2px rgba(69,227,255,.26);
    opacity: .75;
    transition: opacity .2s ease;
}

.yjdi-layer.is-expanded .yjdi-camera,
.yjdi-layer.is-done .yjdi-camera {
    opacity: 0;
}

.yjdi-compact {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    opacity: 1;
    transform: scale(1);
    transition: opacity .16s ease, transform .25s ease;
}

.yjdi-layer.is-expanded .yjdi-compact,
.yjdi-layer.is-done .yjdi-compact {
    opacity: 0;
    transform: scale(.78);
}

.yjdi-compact-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yjdi-accent);
    box-shadow: 0 0 13px color-mix(in srgb, var(--yjdi-accent) 72%, transparent);
    animation: yjdi-pulse 1.05s ease-in-out infinite;
}

.yjdi-compact-line {
    width: 54px;
    height: 5px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(255,255,255,.13);
}

.yjdi-compact-line::before {
    content: "";
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--yjdi-accent), transparent);
    animation: yjdi-scan 1.18s ease-in-out infinite;
}

.yjdi-content {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 17px 13px 15px;
    opacity: 0;
    transform: translateY(7px) scale(.96);
    transition: opacity .24s .12s ease, transform .4s .08s cubic-bezier(.2,.84,.22,1);
}

.yjdi-layer.is-expanded .yjdi-content,
.yjdi-layer.is-done .yjdi-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.yjdi-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--yjdi-accent) 30%, #121212),
            #101010 65%
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 8px 18px rgba(0,0,0,.34);
    overflow: hidden;
}

.yjdi-icon::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.2),
        transparent 68%
    );
    transform: translateX(-100%);
    animation: yjdi-shine 2s ease-in-out infinite;
}

.yjdi-wave {
    position: relative;
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.yjdi-wave i {
    display: block;
    width: 3px;
    height: 8px;
    border-radius: 99px;
    background: var(--yjdi-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--yjdi-accent) 65%, transparent);
    animation: yjdi-wave .78s ease-in-out infinite alternate;
}

.yjdi-wave i:nth-child(2) { animation-delay: -.56s; }
.yjdi-wave i:nth-child(3) { animation-delay: -.34s; }
.yjdi-wave i:nth-child(4) { animation-delay: -.18s; }
.yjdi-wave i:nth-child(5) { animation-delay: -.42s; }

.yjdi-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,.2);
    border-top-color: var(--yjdi-accent);
    border-right-color: color-mix(in srgb, var(--yjdi-accent) 48%, transparent);
    border-radius: 50%;
    animation: yjdi-spin .82s linear infinite;
}

.yjdi-dots {
    display: flex;
    gap: 3px;
}

.yjdi-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yjdi-accent);
    animation: yjdi-dot .8s ease-in-out infinite alternate;
}

.yjdi-dots i:nth-child(2) { animation-delay: .14s; }
.yjdi-dots i:nth-child(3) { animation-delay: .28s; }

.yjdi-check {
    width: 24px;
    height: 24px;
    display: none;
    border-radius: 50%;
    background: var(--yjdi-accent);
    color: #021114;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    transform: scale(.72);
    animation: yjdi-pop .34s cubic-bezier(.2,1.4,.4,1) forwards;
}

.yjdi-layer.is-done .yjdi-wave,
.yjdi-layer.is-done .yjdi-spinner,
.yjdi-layer.is-done .yjdi-dots {
    display: none;
}

.yjdi-layer.is-done .yjdi-check {
    display: block;
}

.yjdi-copy {
    min-width: 0;
}

.yjdi-title {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .01em;
}

.yjdi-subtitle {
    margin-top: 3px;
    overflow: hidden;
    color: rgba(255,255,255,.56);
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yjdi-percent {
    min-width: 38px;
    color: var(--yjdi-accent);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.yjdi-close {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.yjdi-layer[data-close="1"].is-expanded .yjdi-close {
    display: flex;
}

.yjdi-progress {
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 8px;
    height: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.1);
    opacity: 0;
    transition: opacity .2s ease;
}

.yjdi-layer.is-expanded .yjdi-progress {
    opacity: 1;
}

.yjdi-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--yjdi-accent) 56%, #fff),
            var(--yjdi-accent)
        );
    box-shadow: 0 0 10px color-mix(in srgb, var(--yjdi-accent) 65%, transparent);
    transition: width .24s ease;
}

.yjdi-layer.is-done .yjdi-progress {
    opacity: 0;
}

@media (max-width: 782px) {
    body.admin-bar .yjdi-shell {
        top: calc(env(safe-area-inset-top, 0px) + var(--yjdi-mobile-top) + 46px);
    }

    .yjdi-shell {
        top: calc(env(safe-area-inset-top, 0px) + var(--yjdi-mobile-top));
    }

    .yjdi-layer.is-expanded .yjdi-shell {
        width: min(var(--yjdi-expanded-width), calc(100vw - 18px));
    }

    .yjdi-content {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
        padding-inline: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yjdi-layer[data-reduced="1"] *,
    .yjdi-layer[data-reduced="1"] *::before,
    .yjdi-layer[data-reduced="1"] *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .12s !important;
    }
}

@keyframes yjdi-pulse {
    0%,100% { transform: scale(.76); opacity: .55; }
    50% { transform: scale(1); opacity: 1; }
}

@keyframes yjdi-scan {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(250%); }
}

@keyframes yjdi-wave {
    from { height: 6px; opacity: .48; }
    to { height: 18px; opacity: 1; }
}

@keyframes yjdi-spin {
    to { transform: rotate(360deg); }
}

@keyframes yjdi-dot {
    from { transform: translateY(3px); opacity: .4; }
    to { transform: translateY(-3px); opacity: 1; }
}

@keyframes yjdi-shine {
    0%,34% { transform: translateX(-115%); }
    68%,100% { transform: translateX(115%); }
}

@keyframes yjdi-pop {
    to { transform: scale(1); }
}