.sp-popup {
    --sp-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 245, 255, 0.96));
    --sp-border: rgba(136, 77, 255, 0.14);
    --sp-shadow: 0 18px 48px rgba(38, 17, 77, 0.16);
    --sp-text: #2f2b39;
    --sp-muted: #7e788f;
    --sp-accent: #8f25da;
    --sp-link: #7f00ff;
    --sp-close: #6f6882;
    position: fixed;
    width: min(340px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 16px 18px 14px;
    border-radius: 18px;
    z-index: 999999;
    animation: fadeInUp .4s ease-out;
    font-family: "Inter", sans-serif;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow);
    color: var(--sp-text);
    overflow-wrap: anywhere;
    backdrop-filter: blur(16px);
}

.bottom-left { bottom: 20px; left: 20px; }
.bottom-right { bottom: 20px; right: 20px; }
.top-left { top: 20px; left: 20px; }
.top-right { top: 20px; right: 20px; }

.glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 241, 255, 0.76));
}

.card {
    backdrop-filter: none;
}

.shadow {
    backdrop-filter: none;
    box-shadow: 0 22px 60px rgba(24, 10, 52, 0.22);
}

.sp-popup.sp-theme-dark,
html.dark-mode .sp-popup,
body.dark-mode .sp-popup,
html[data-theme="dark"] .sp-popup,
body[data-theme="dark"] .sp-popup,
html[data-bs-theme="dark"] .sp-popup,
body[data-bs-theme="dark"] .sp-popup,
.dark-mode .sp-popup,
.dark .sp-popup,
body.night-mode .sp-popup {
    --sp-bg: linear-gradient(180deg, rgba(27, 26, 34, 0.96), rgba(17, 16, 24, 0.95));
    --sp-border: rgba(195, 136, 255, 0.18);
    --sp-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
    --sp-text: #f4f2fb;
    --sp-muted: #b0a9c4;
    --sp-accent: #cb8cff;
    --sp-link: #d49bff;
    --sp-close: #cbc4dd;
}

.sp-popup.sp-theme-dark.glass,
html.dark-mode .sp-popup.glass,
body.dark-mode .sp-popup.glass,
html[data-theme="dark"] .sp-popup.glass,
body[data-theme="dark"] .sp-popup.glass,
html[data-bs-theme="dark"] .sp-popup.glass,
body[data-bs-theme="dark"] .sp-popup.glass,
.dark-mode .sp-popup.glass,
.dark .sp-popup.glass,
body.night-mode .sp-popup.glass {
    background: linear-gradient(180deg, rgba(27, 26, 34, 0.84), rgba(16, 15, 23, 0.82));
    backdrop-filter: blur(18px);
}

.sp-popup.sp-theme-dark.card,
.sp-popup.sp-theme-dark.shadow,
html.dark-mode .sp-popup.card,
body.dark-mode .sp-popup.card,
html[data-theme="dark"] .sp-popup.card,
body[data-theme="dark"] .sp-popup.card,
html[data-bs-theme="dark"] .sp-popup.card,
body[data-bs-theme="dark"] .sp-popup.card,
.dark-mode .sp-popup.card,
.dark .sp-popup.card,
body.night-mode .sp-popup.card,
html.dark-mode .sp-popup.shadow,
body.dark-mode .sp-popup.shadow,
html[data-theme="dark"] .sp-popup.shadow,
body[data-theme="dark"] .sp-popup.shadow,
html[data-bs-theme="dark"] .sp-popup.shadow,
body[data-bs-theme="dark"] .sp-popup.shadow,
.dark-mode .sp-popup.shadow,
.dark .sp-popup.shadow,
body.night-mode .sp-popup.shadow {
    background: linear-gradient(180deg, rgba(27, 26, 34, 0.96), rgba(17, 16, 24, 0.96));
}

.sp-close {
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--sp-close);
}

.sp-line,
.sp-product {
    font-size: 14px;
    line-height: 1.45;
    color: var(--sp-text);
}

.sp-line {
    padding-right: 18px;
}

.sp-product {
    margin-top: 6px;
    padding-right: 14px;
}

.sp-strong {
    font-weight: 700;
    color: var(--sp-accent);
}

.sp-link {
    color: var(--sp-link);
    text-decoration: none;
}

.sp-link:hover {
    text-decoration: underline;
}

.sp-time {
    margin-top: 8px;
    font-size: 12px;
    color: var(--sp-muted);
}

.sp-cta,
.sp-powered {
    margin-top: 10px;
}

.sp-cta a,
.sp-powered a {
    color: var(--sp-link);
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
}

.sp-cta a:hover,
.sp-powered a:hover {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .sp-popup {
        --sp-bg: linear-gradient(180deg, rgba(27, 26, 34, 0.96), rgba(17, 16, 24, 0.95));
        --sp-border: rgba(195, 136, 255, 0.18);
        --sp-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
        --sp-text: #f4f2fb;
        --sp-muted: #b0a9c4;
        --sp-accent: #cb8cff;
        --sp-link: #d49bff;
        --sp-close: #cbc4dd;
    }

    .sp-popup.glass {
        background: linear-gradient(180deg, rgba(27, 26, 34, 0.84), rgba(16, 15, 23, 0.82));
    }

    .sp-popup.card,
    .sp-popup.shadow {
        background: linear-gradient(180deg, rgba(27, 26, 34, 0.96), rgba(17, 16, 24, 0.96));
    }
}

@media (max-width: 640px) {
    .sp-popup {
        width: min(310px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        padding: 14px 16px 12px;
        border-radius: 16px;
    }

    .bottom-left,
    .bottom-right {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .top-left,
    .top-right {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .sp-line,
    .sp-product {
        font-size: 13px;
        line-height: 1.4;
    }

    .sp-time,
    .sp-cta a,
    .sp-powered a {
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .sp-popup {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        padding: 13px 14px 12px;
        border-radius: 15px;
    }

    .bottom-left,
    .bottom-right {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .top-left,
    .top-right {
        left: 10px;
        right: 10px;
        top: 10px;
    }
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}