/* Shared Vue 2 / Vue 3 entrance and exit. Skin panels keep their own colors. */
.announcement-popup-mask { background:rgba(0,0,0,.54); backdrop-filter:none; -webkit-backdrop-filter:none; }
.announcement-popup-mask, .announcement-popup-panel { animation:none !important; }
.announcement-popup-enter-active { transition:opacity 200ms ease-out; }
.announcement-popup-leave-active { transition:opacity 180ms ease-in; pointer-events:none; }
.announcement-popup-enter-active .announcement-popup-panel { transition:transform 380ms cubic-bezier(.2,.8,.2,1),opacity 200ms ease-out; }
.announcement-popup-leave-active .announcement-popup-panel { transition:transform 180ms ease-in,opacity 180ms ease-in; }
.announcement-popup-enter, .announcement-popup-enter-from, .announcement-popup-leave-to { opacity:0; }
.announcement-popup-enter .announcement-popup-panel, .announcement-popup-enter-from .announcement-popup-panel { opacity:0; transform:translateY(24px) scale(.86); }
.announcement-popup-leave-to .announcement-popup-panel { opacity:0; transform:translateY(12px) scale(.96); }
.announcement-popup-check { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:6px; font-size:12px; line-height:20px; cursor:pointer; }
.announcement-popup-check input { width:14px; height:14px; margin:0; accent-color:currentColor; }
@media(prefers-reduced-motion:reduce) {
 .announcement-popup-enter-active, .announcement-popup-leave-active,
 .announcement-popup-enter-active .announcement-popup-panel, .announcement-popup-leave-active .announcement-popup-panel { transition:none; }
 .announcement-popup-panel { transform:none !important; }
}

/* The deployed legacy notice keeps its existing next/close image buttons. */
html[data-skin="qj"] .qj-announcement-mask { position:fixed;inset:0;z-index:2001;display:grid;place-items:center;padding:12px;box-sizing:border-box; }
html[data-skin="qj"] .qj-announcement-panel { position:relative;width:17.5em;max-width:100%;height:23.25em;font-size:1rem; }
html[data-skin="qj"] .notice:has(.qj-notice-dismiss) .qj-notice-dismiss {
  position:absolute;z-index:2;top:-7px;right:-7px;display:grid;place-items:center;
  width:28px;height:28px;padding:0;border:1px solid #edc4b7;border-radius:50%;
  background:#fff7ee;color:#8b2b19;font-size:23px;line-height:24px;cursor:pointer;
}
html[data-skin="qj"] .notice:has(.qj-notice-dismiss) .announcement-popup-check {
  position:absolute;top:calc(100% + 34px);bottom:auto;left:50%;transform:translateX(-50%);width:max-content;
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:26px;padding:3px 10px;border:1px solid #ffd4ba;border-radius:6px;
  background:#fff7ee;color:#8b2b19;font-size:13px;font-weight:600;line-height:18px;cursor:pointer;
}
html[data-skin="qj"] .notice:has(.qj-notice-dismiss) .announcement-popup-check input { width:16px;height:16px;margin:0;accent-color:#c73d27; }
html[data-skin="qj"] .qj-notice-dismiss:focus-visible,
html[data-skin="qj"] .notice:has(.qj-notice-dismiss) .announcement-popup-check:focus-within { outline:2px solid #8b2b19;outline-offset:2px; }