:root {
    --fx-font: 'Segoe UI', 'Inter', system-ui, -apple-system, Arial, sans-serif;
    --fx-text: #1f1f1f;
    --fx-text-muted: rgba(0,0,0,.72);
    --fx-border: rgba(0,0,0,.08);
    --fx-surface: rgba(255,255,255,.92);
    --fx-surface-opaque: #fff;
    --fx-brand: #2564cf;
    --fx-brand-700: #164fa0;
    --fx-radius: 24px;
    --fx-radius-pill: 999px;
    --fx-shadow-1: 0 2px 8px rgba(0,0,0,.06);
    --fx-shadow-2: 0 12px 32px rgba(0,0,0,.12);
    --fx-shadow-3: 0 18px 46px rgba(0,0,0,.14);
    --fx-acrylic: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.74));
}

@media (prefers-color-scheme: dark) {
    :root {
        --fx-text: #f5f5f5;
        --fx-text-muted: rgba(255,255,255,.78);
        --fx-border: rgba(255,255,255,.12);
        --fx-surface: rgba(24,24,24,.78);
        --fx-surface-opaque: #1a1a1a;
        --fx-acrylic: linear-gradient(135deg, rgba(32,32,32,.78), rgba(24,24,24,.74));
    }
}

.cookie-banner {
    position: fixed;
    inset-inline: max(16px, env(safe-area-inset-left, 16px)) max(16px, env(safe-area-inset-right, 16px));
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    margin: 0 auto;
    width: clamp(320px, 56vw, 720px);
    max-width: 720px;
    background: var(--fx-acrylic);
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    color: var(--fx-text);
    padding: clamp(12px, 2vw, 18px) clamp(14px, 2.2vw, 22px);
    box-shadow: var(--fx-shadow-1), var(--fx-shadow-2);
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    font-family: var(--fx-font);
    z-index: 9999;
    border-radius: var(--fx-radius);
    border: 1px solid var(--fx-border);
    transform: translateY(12px);
    opacity: 0;
    animation: fx-slide-up .38s cubic-bezier(.2,.8,.2,1) forwards;
}

    .cookie-banner p {
        margin: 0;
        font-size: clamp(0.98rem, 1.1vw, 1.06rem);
        line-height: 1.45;
        color: var(--fx-text-muted);
        flex: 1 1 auto;
    }

    .cookie-banner a {
        color: var(--fx-brand);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .cookie-banner a:hover {
            text-decoration-thickness: 2px;
        }

    .cookie-banner button {
        appearance: none;
        background: var(--fx-brand);
        color: #fff;
        border: 1px solid transparent;
        border-radius: var(--fx-radius-pill);
        padding: 10px 18px;
        font-size: 0.98rem;
        font-weight: 700;
        cursor: pointer;
        transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
        box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 18px rgba(37,100,207,.18);
        white-space: nowrap;
    }

        .cookie-banner button:hover {
            background: var(--fx-brand-700);
            transform: translateY(-1px);
            box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 14px 28px rgba(37,100,207,.24);
        }

        .cookie-banner button:active {
            transform: translateY(0);
            box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 18px rgba(37,100,207,.20);
        }

        .cookie-banner button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-brand) 30%, #fff 70%), 0 0 0 5px color-mix(in srgb, var(--fx-brand) 50%, transparent);
        }

.privacy-wrapper {
    max-width: clamp(320px, 72vw, 980px);
    width: auto;
    margin: clamp(32px, 6vh, 64px) auto;
    padding: clamp(20px, 3vw, 36px);
    background: var(--fx-surface);
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    border-radius: 26px;
    box-shadow: var(--fx-shadow-1), var(--fx-shadow-2);
    font-size: clamp(1rem, 1.05vw, 1.1rem);
    color: var(--fx-text-muted);
    line-height: 1.75;
    font-family: var(--fx-font);
    border: 1px solid var(--fx-border);
}

    .privacy-wrapper h1,
    .privacy-wrapper h2,
    .privacy-wrapper h3 {
        color: var(--fx-text);
        margin-top: clamp(16px, 2.6vw, 28px);
        margin-bottom: clamp(12px, 2vw, 20px);
        letter-spacing: -0.015em;
    }

    .privacy-wrapper h1 {
        font-size: clamp(1.8rem, 3.4vw, 2.4rem);
        font-weight: 800;
    }

    .privacy-wrapper h2 {
        font-size: clamp(1.4rem, 2.6vw, 1.8rem);
        font-weight: 700;
    }

    .privacy-wrapper h3 {
        font-size: clamp(1.15rem, 2vw, 1.35rem);
        font-weight: 700;
    }

    .privacy-wrapper ul {
        padding-left: clamp(18px, 2vw, 22px);
        margin-bottom: clamp(12px, 1.8vw, 18px);
    }

    .privacy-wrapper li {
        margin-bottom: clamp(6px, 1vw, 10px);
    }

    .privacy-wrapper a {
        color: var(--fx-brand);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .privacy-wrapper a:hover {
            text-decoration-thickness: 2px;
        }

.cookie-banner[style*="display: none"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .cookie-banner {
        width: 100%;
        left: 0;
        right: 0;
        border-radius: 18px;
        padding: 14px 16px;
        gap: 12px;
    }

        .cookie-banner p {
            font-size: 0.98rem;
        }

        .cookie-banner button {
            padding: 10px 16px;
            font-size: 0.95rem;
        }

    .privacy-wrapper {
        width: 92% !important;
        margin: 24px auto;
        padding: clamp(16px, 4vw, 22px);
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner,
    .cookie-banner button {
        transition: none;
        animation: none;
        transform: none;
    }
}

@keyframes fx-slide-up {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

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