.site-popup {
    --popup-ratio: 1.777778;
    --popup-chrome: 196px;
    color: #f8fafc;
    background: linear-gradient(135deg, #112946, #0a1525 72%);
    border: 1px solid rgba(102, 205, 234, .3);
    border-top: 3px solid #42d9f4;
    border-radius: 24px;
    padding: 0;
    margin: auto;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    box-shadow: 0 28px 100px rgba(0, 0, 0, .48), 0 0 60px rgba(25, 136, 216, .15);
    overflow: auto;
    font-family: inherit;
}
.site-popup[open] { animation: site-popup-enter .22s ease-out; }
.site-popup::backdrop { background: radial-gradient(ellipse at 50% 35%, rgba(11, 45, 92, .64), rgba(4, 10, 20, .88)); backdrop-filter: blur(8px); }
.site-popup *, .site-popup *::before, .site-popup *::after { box-sizing: border-box; }
.site-popup [hidden], #popup-editor [hidden] { display: none !important; }
.site-popup__header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; background: #10233c; }
.site-popup__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.site-popup__emblem { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(66, 217, 244, .3); border-radius: 15px; background: rgba(66, 217, 244, .09); color: #75e5f5; flex-shrink: 0; }
.site-popup__emblem svg { width: 26px; height: 26px; }
.site-popup__eyebrow { margin: 0 0 2px; font-size: 11px; color: #97b6ce; letter-spacing: .03em; line-height: 1.5; }
.site-popup__title { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; color: #f8fafc; }
.site-popup button { font: inherit; cursor: pointer; border: 1px solid #475569; color: #f8fafc; background: #1e293b; border-radius: 10px; min-height: 44px; padding: 8px 14px; }
.site-popup button:hover { background: #334155; }
.site-popup button:focus-visible, .site-popup video:focus-visible, .site-popup iframe:focus-visible { outline: 3px solid #7dd3fc; outline-offset: -3px; }
.site-popup .site-popup__close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; line-height: 1; min-width: 84px; padding: 8px 12px; flex-shrink: 0; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); }
.site-popup__close > span:first-child { font-size: 26px; }
.site-popup__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(1100px, calc(100vw - 26px), calc((100vh - var(--popup-chrome)) * var(--popup-ratio)));
    width: min(1100px, calc(100vw - 26px), calc((100dvh - var(--popup-chrome)) * var(--popup-ratio)));
    min-width: min(290px, calc(100vw - 26px));
    aspect-ratio: var(--popup-ratio);
    max-height: calc(100vh - var(--popup-chrome));
    max-height: calc(100dvh - var(--popup-chrome));
    background: #05090f;
}
.site-popup__stage > img, .site-popup__stage > video, .site-popup__stage > iframe, .site-popup__stage > .site-popup__youtube {
    display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; border: 0; grid-area: 1 / 1;
}
.site-popup__status { grid-area: 1 / 1; z-index: 1; text-align: center; max-width: 340px; margin: 0; padding: 20px; font-size: 15px; color: #e2e8f0; background: rgba(5, 9, 15, .9); border-radius: 12px; pointer-events: none; }
.site-popup__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.site-popup__hint { font-size: 12px; color: #a5b9cb; }
.site-popup__buttons { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.site-popup [data-popup-sound], .site-popup [data-popup-play] { background: #8ce7f2; border-color: #8ce7f2; color: #09293e; font-weight: 700; }
.site-popup [data-popup-sound]:hover, .site-popup [data-popup-play]:hover { background: #b8f2f8; }
.site-popup [data-popup-dismiss] { background: transparent; border-color: #567088; font-size: 13px; }
html.has-site-popup, html.has-site-popup body { overflow: hidden !important; overscroll-behavior: none; }
.popup-editor-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.popup-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.popup-editor-fields input[type="checkbox"] { width: auto; }
[data-popup-preview-error] { color: #b91c1c; }
@keyframes site-popup-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-popup[open] { animation: none; } }
@media (max-width: 600px) {
    .site-popup { border-radius: 18px; }
    .site-popup__header { padding: 12px; gap: 12px; }
    .site-popup__identity { gap: 8px; }
    .site-popup__title { font-size: 16px; }
    .site-popup__emblem { width: 36px; height: 36px; border-radius: 12px; }
    .site-popup__actions { justify-content: center; padding: 12px; gap: 8px; }
    .site-popup__hint { flex-basis: 100%; text-align: center; font-size: 11px; }
}
@media (max-height: 480px) {
    .site-popup { --popup-chrome: 134px; }
    .site-popup__header { padding: 6px 12px; }
    .site-popup__eyebrow, .site-popup__hint { display: none; }
    .site-popup__actions { padding: 6px 12px; justify-content: center; }
    .site-popup__title { font-size: 15px; }
}