html.caiyun-announcement-open,
html.caiyun-announcement-open body {
    overflow: hidden !important;
}

#caiyun-global-announcement,
#caiyun-global-announcement * {
    box-sizing: border-box;
}

#caiyun-global-announcement {
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    overflow: hidden;
    color: #182035;
    background:
        radial-gradient(circle at 18% 12%, rgba(121, 122, 242, .18), transparent 34%),
        radial-gradient(circle at 84% 82%, rgba(106, 201, 218, .16), transparent 36%),
        rgba(24, 29, 48, .36);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(9px) saturate(1.16);
    -webkit-backdrop-filter: blur(9px) saturate(1.16);
    transition: opacity .34s cubic-bezier(.22, 1, .36, 1), visibility .34s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

#caiyun-global-announcement[data-open="true"] {
    opacity: 1;
    visibility: visible;
}

.cga-dialog {
    position: relative;
    width: min(520px, 100%);
    max-height: min(78vh, 680px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(245, 247, 255, .7)),
        rgba(255, 255, 255, .7);
    box-shadow:
        0 34px 90px rgba(22, 29, 63, .28),
        0 8px 28px rgba(38, 46, 90, .16),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(34px) saturate(1.55);
    -webkit-backdrop-filter: blur(34px) saturate(1.55);
    transform: translateY(28px) scale(.94);
    opacity: 0;
    transition: transform .46s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
    isolation: isolate;
}

#caiyun-global-announcement[data-open="true"] .cga-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.cga-liquid {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    opacity: .56;
}

.cga-liquid-one {
    top: -92px;
    right: -68px;
    width: 230px;
    height: 230px;
    background: radial-gradient(circle at 35% 35%, rgba(157, 158, 255, .82), rgba(104, 105, 226, .18) 62%, transparent 72%);
    animation: cga-float-one 8s ease-in-out infinite alternate;
}

.cga-liquid-two {
    bottom: -105px;
    left: -75px;
    width: 245px;
    height: 245px;
    background: radial-gradient(circle at 60% 35%, rgba(133, 223, 226, .64), rgba(105, 183, 218, .12) 64%, transparent 74%);
    animation: cga-float-two 9s ease-in-out infinite alternate;
}

@keyframes cga-float-one {
    to { transform: translate(-16px, 20px) scale(1.08); }
}

@keyframes cga-float-two {
    to { transform: translate(20px, -16px) scale(.94); }
}

.cga-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 25px 27px 18px;
}

.cga-icon {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, rgba(126, 127, 240, .95), rgba(79, 80, 207, .95));
    box-shadow: 0 10px 24px rgba(80, 81, 205, .25), inset 0 1px 1px rgba(255, 255, 255, .45);
    font-size: 22px;
    font-weight: 800;
}

.cga-heading {
    min-width: 0;
    flex: 1;
}

.cga-close {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #6f788b;
    background: rgba(255, 255, 255, .64);
    cursor: pointer;
    font: inherit;
    font-size: 23px;
    line-height: 1;
}

.cga-close:hover { color: #343d52; background: rgba(255, 255, 255, .92); }
.cga-close:focus-visible { outline: 3px solid rgba(91, 92, 226, .22); outline-offset: 2px; }

.cga-title {
    margin: 0;
    color: #1b2236;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.2px;
}

.cga-kicker {
    margin: 5px 0 0;
    color: #7e879b;
    font-size: 12px;
}

.cga-content-wrap {
    position: relative;
    margin: 0 17px;
    overflow: hidden;
    border: 1px solid rgba(218, 222, 238, .74);
    border-radius: 19px;
    background: rgba(255, 255, 255, .47);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

.cga-content {
    max-height: min(40vh, 340px);
    margin: 0;
    padding: 19px 20px;
    overflow: auto;
    color: #424b60;
    font-size: 14px;
    line-height: 1.85;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: rgba(114, 116, 190, .34) transparent;
}

.cga-content::-webkit-scrollbar {
    width: 5px;
}

.cga-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(114, 116, 190, .34);
}

.cga-contact-link {
    color: #4f50cf;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgba(79, 80, 207, .34);
    text-underline-offset: 3px;
}

.cga-contact-link:hover { color: #3435b4; text-decoration-color: currentColor; }
.cga-contact-link:focus-visible { outline: 3px solid rgba(91, 92, 226, .22); outline-offset: 2px; border-radius: 3px; }

.cga-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px 17px 20px;
}

.cga-button {
    min-width: 0;
    height: 45px;
    padding: 0 14px;
    border: 1px solid rgba(206, 211, 228, .82);
    border-radius: 14px;
    cursor: pointer;
    color: #525c72;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    font: inherit;
    font-size: 13px;
    font-weight: 680;
    transition: transform .17s ease, background .17s ease, box-shadow .17s ease, border-color .17s ease;
}

.cga-button:hover {
    border-color: rgba(142, 144, 225, .72);
    background: rgba(255, 255, 255, .84);
    transform: translateY(-1px);
}

.cga-button:active {
    transform: translateY(0) scale(.985);
}

.cga-button:focus-visible {
    outline: 3px solid rgba(91, 92, 226, .22);
    outline-offset: 2px;
}

.cga-button-primary {
    border-color: rgba(85, 86, 211, .76);
    color: #fff;
    background: linear-gradient(135deg, rgba(111, 112, 235, .96), rgba(75, 76, 201, .96));
    box-shadow: 0 9px 20px rgba(75, 76, 201, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.cga-button-primary:hover {
    border-color: rgba(75, 76, 201, .95);
    background: linear-gradient(135deg, rgba(121, 122, 241, 1), rgba(75, 76, 201, 1));
    box-shadow: 0 12px 24px rgba(75, 76, 201, .28), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.cga-note {
    margin: -7px 20px 17px;
    color: #929aad;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 520px) {
    #caiyun-global-announcement {
        align-items: end;
        padding-right: 10px;
        padding-left: 10px;
    }

    .cga-dialog {
        width: 100%;
        max-height: calc(88vh - env(safe-area-inset-bottom));
        border-radius: 27px 27px 22px 22px;
        transform: translateY(42px) scale(.98);
    }

    .cga-header { padding: 22px 20px 16px; }
    .cga-content-wrap { margin: 0 12px; }
    .cga-content { max-height: 42vh; padding: 17px; }
    .cga-actions { padding: 15px 12px 18px; }
    .cga-note { margin-right: 16px; margin-left: 16px; }
}

@media (max-width: 360px) {
    .cga-actions { grid-template-columns: 1fr; }
}

/* Desktop notices stay readable without locking or blurring the whole storefront. */
@media (min-width: 900px) {
    html.caiyun-announcement-open,
    html.caiyun-announcement-open body { overflow: auto !important; }

    #caiyun-global-announcement {
        place-items: start end;
        padding: 76px 32px 32px;
        background: transparent;
        pointer-events: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .cga-dialog {
        width: min(410px, calc(100vw - 64px));
        max-height: calc(100vh - 108px);
        border-radius: 20px;
        pointer-events: auto;
        box-shadow: 0 22px 58px rgba(22, 29, 63, .2), 0 5px 18px rgba(38, 46, 90, .12);
        transform: translateX(24px) translateY(-8px) scale(.98);
    }

    .cga-header { gap: 11px; padding: 17px 18px 12px; }
    .cga-icon { width: 40px; height: 40px; border-radius: 13px; font-size: 18px; }
    .cga-title { font-size: 18px; }
    .cga-kicker { margin-top: 2px; font-size: 11px; }
    .cga-content-wrap { margin: 0 12px; border-radius: 14px; }
    .cga-content { max-height: min(30vh, 220px); padding: 14px 15px; font-size: 13px; line-height: 1.68; }
    .cga-actions { gap: 8px; padding: 12px; }
    .cga-button { height: 40px; border-radius: 12px; font-size: 12px; }
    .cga-note { margin: -3px 14px 12px; font-size: 10px; }
    .cga-liquid-one { width: 170px; height: 170px; }
    .cga-liquid-two { width: 180px; height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    #caiyun-global-announcement,
    #caiyun-global-announcement * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}