/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Critical CSS, robust dark/light theme overrides and stable hero gradient.
*/

@keyframes glow {
    0% { box-shadow: 0 0 15px rgba(255, 51, 153, 0.4); }
    50% { box-shadow: 0 0 30px rgba(255, 51, 153, 0.8); }
    100% { box-shadow: 0 0 15px rgba(255, 51, 153, 0.4); }
}

.btn-glow {
    animation: glow 2s infinite;
}

html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff3399;
}

[data-modal].hidden {
    display: none;
}


/* v019 fallback: custom color utilities in case Tailwind CDN config is delayed or cached */
.bg-j-pink { background-color: #ff3399; }
.bg-j-cyan { background-color: #00c3ff; }
.bg-j-lime { background-color: #ccff00; }
.bg-j-dark { background-color: #0a0a0a; }
.text-j-pink { color: #ff3399; }
.text-j-cyan { color: #00c3ff; }
.text-j-lime { color: #ccff00; }
.text-j-dark { color: #0a0a0a; }
.border-j-pink { border-color: #ff3399; }
.border-j-cyan { border-color: #00c3ff; }
.border-j-lime { border-color: #ccff00; }
.fill-j-lime { fill: #ccff00; }
.hover\:bg-j-pink:hover { background-color: #ff3399; }
.hover\:text-j-pink:hover { color: #ff3399; }
.hover\:border-j-pink:hover { border-color: #ff3399; }
.hover\:border-j-cyan:hover { border-color: #00c3ff; }
.hover\:border-j-lime:hover { border-color: #ccff00; }
html.dark body { background-color: #0a0a0a; color: #fff; }


/* v019 Czech typography and controlled mobile line breaks */
.cz-heading {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

@supports not (text-wrap: balance) {
    .cz-heading {
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 640px) {
    .cz-manifest-title {
        font-size: clamp(2.05rem, 8.8vw, 2.55rem);
        line-height: 1.06;
        letter-spacing: -0.045em;
    }

    .cz-manifest-body {
        font-size: clamp(1.05rem, 4.7vw, 1.28rem);
        line-height: 1.55;
    }

    .cz-manifest-claim {
        display: inline-block;
        font-size: clamp(1.45rem, 6.8vw, 1.95rem);
        line-height: 1.18;
        letter-spacing: -0.035em;
    }

    .cz-ai-title {
        font-size: clamp(1.95rem, 8.1vw, 2.45rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
    }

    .cz-modal-title {
        font-size: 1.45rem;
        line-height: 1.15;
        letter-spacing: 0.01em;
    }
}


/* v019: robust hero gradient and light-mode contrast fixes.
   The highlighted word must never depend on Tailwind text-transparent utilities. */
.hero-headline {
    color: #ffffff;
    text-wrap: balance;
}

html:not(.dark) .hero-headline {
    color: #0f172a !important;
}

.hero-gradient-text {
    display: inline-block;
    color: #ff3399;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-gradient-text {
        background-image: linear-gradient(90deg, #00c3ff 0%, #ff3399 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* v019: light mode must be fully readable, not a washed-out copy of dark mode. */
html:not(.dark) body {
    background: radial-gradient(circle at 20% 10%, rgba(0, 195, 255, 0.10), transparent 34%),
                radial-gradient(circle at 80% 35%, rgba(255, 51, 153, 0.10), transparent 32%),
                #f8fafc;
    color: #0f172a;
}

html:not(.dark) .hero-card-main {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

html:not(.dark) .hero-card-main p,
html:not(.dark) .hero-card-main strong {
    color: #ffffff !important;
}

html:not(.dark) .hero-card-bonus {
    background-color: rgba(0, 195, 255, 0.12) !important;
    color: #0f172a !important;
    border-color: rgba(0, 195, 255, 0.42) !important;
}

html:not(.dark) .hero-card-bonus p {
    color: #334155 !important;
}

html:not(.dark) .hero-card-bonus strong:not(.text-j-cyan) {
    color: #0f172a !important;
}

html:not(.dark) .hero-card-waitlist {
    background-color: rgba(255, 255, 255, 0.82) !important;
    color: #334155 !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

html:not(.dark) .hero-card-waitlist p {
    color: #334155 !important;
}

html:not(.dark) .hero-card-waitlist strong,
html:not(.dark) .hero-card-waitlist button {
    color: #0f172a !important;
}

html:not(.dark) #manifest {
    background-color: #f1f5f9 !important;
}

html:not(.dark) .cz-manifest-body {
    color: #475569 !important;
}

html:not(.dark) .cz-manifest-claim {
    color: #0f172a !important;
}

html:not(.dark) [data-modal] .text-white,
html:not(.dark) #settings-panel .text-white {
    color: #ffffff;
}
/* v019: professional light-mode pass + dark-mode hero gradient stability.
   This block intentionally overrides Tailwind utility output where needed. */

:root {
    --j-pink: #ff3399;
    --j-cyan: #00c3ff;
    --j-lime: #ccff00;
    --j-dark: #0a0a0a;
    --light-ink: #0f172a;
    --light-muted: #475569;
    --light-soft: #f8fafc;
    --light-panel: #ffffff;
    --light-border: rgba(15, 23, 42, 0.12);
    --light-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

/* Stable headline spacing. Prevents Czech accents and the highlighted word from looking clipped. */
.hero-headline {
    line-height: 1.08 !important;
    padding-top: 0.04em;
    padding-bottom: 0.08em;
}

@media (min-width: 768px) {
    .hero-headline {
        line-height: 1.02 !important;
        padding-top: 0.02em;
        padding-bottom: 0.04em;
    }
}

/* The word "přepni." must remain visible in every browser and in both themes. */
.hero-headline .hero-gradient-text,
html.dark .hero-headline .hero-gradient-text,
html:not(.dark) .hero-headline .hero-gradient-text {
    display: inline-block;
    padding: 0 0.025em 0.06em;
    color: var(--j-pink) !important;
    -webkit-text-fill-color: var(--j-pink) !important;
    text-shadow: none !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-headline .hero-gradient-text,
    html.dark .hero-headline .hero-gradient-text,
    html:not(.dark) .hero-headline .hero-gradient-text {
        background: linear-gradient(90deg, #00c3ff 0%, #31a7ff 30%, #9b6cff 62%, #ff3399 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* Dark mode remains the premium neon theme. */
html.dark body,
html.dark .site-body {
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 195, 255, 0.07), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(255, 51, 153, 0.06), transparent 34%),
        #0a0a0a !important;
    color: #ffffff !important;
}

html.dark .hero-section {
    background: transparent;
}

html.dark .hero-headline {
    color: #ffffff !important;
}

/* Light mode: intentionally designed as a real theme, not a direct inversion. */
html:not(.dark) body,
html:not(.dark) .site-body {
    background:
        radial-gradient(circle at 12% 8%, rgba(0, 195, 255, 0.15), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(255, 51, 153, 0.13), transparent 34%),
        linear-gradient(180deg, #f8fcff 0%, #f7f9fc 42%, #ffffff 100%) !important;
    color: var(--light-ink) !important;
}

html:not(.dark) .ambient-glow {
    opacity: 0.42;
}

html:not(.dark) .hero-section {
    background:
        radial-gradient(circle at 20% 22%, rgba(0, 195, 255, 0.18), transparent 38%),
        radial-gradient(circle at 82% 45%, rgba(255, 51, 153, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.72));
}

html:not(.dark) .hero-headline {
    color: var(--light-ink) !important;
    text-shadow: none !important;
}

html:not(.dark) .hero-card-main {
    background: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}

html:not(.dark) .hero-card-main p,
html:not(.dark) .hero-card-main strong {
    color: #ffffff !important;
}

html:not(.dark) .hero-card-bonus {
    background: linear-gradient(135deg, rgba(236, 254, 255, 0.95), rgba(240, 249, 255, 0.90)) !important;
    color: var(--light-ink) !important;
    border-color: rgba(0, 195, 255, 0.42) !important;
    box-shadow: 0 18px 40px rgba(14, 165, 233, 0.12) !important;
}

html:not(.dark) .hero-card-bonus p,
html:not(.dark) .hero-card-bonus span:not(.text-j-pink):not(.line-through) {
    color: #334155 !important;
}

html:not(.dark) .hero-card-bonus strong:not(.text-j-cyan) {
    color: var(--light-ink) !important;
}

html:not(.dark) .hero-card-waitlist {
    background: rgba(255, 255, 255, 0.90) !important;
    color: #334155 !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10) !important;
}

html:not(.dark) .hero-card-waitlist p,
html:not(.dark) .hero-card-waitlist span {
    color: #334155 !important;
}

html:not(.dark) .hero-card-waitlist strong,
html:not(.dark) .hero-card-waitlist button {
    color: var(--light-ink) !important;
}

html:not(.dark) .hero-card-waitlist button:hover {
    color: var(--j-pink) !important;
}

html:not(.dark) .manifest-section {
    background: linear-gradient(180deg, #eef6fb 0%, #f8fafc 100%) !important;
}

html:not(.dark) .manifest-section h2,
html:not(.dark) .manifest-section .cz-manifest-claim,
html:not(.dark) .ai-section h2,
html:not(.dark) .mechanism-section h2,
html:not(.dark) .order-section h2 {
    color: var(--light-ink) !important;
}

html:not(.dark) .manifest-section .text-j-lime,
html:not(.dark) .mechanism-section .text-j-lime {
    color: #84cc16 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

html:not(.dark) .cz-manifest-body,
html:not(.dark) .manifest-section p,
html:not(.dark) .ai-section p,
html:not(.dark) .mechanism-section p,
html:not(.dark) .order-section p {
    color: var(--light-muted) !important;
}

html:not(.dark) .ai-section {
    background: linear-gradient(180deg, #f8fafc 0%, #fff7fb 100%);
}

html:not(.dark) .ai-chat-card {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: var(--light-shadow) !important;
}

html:not(.dark) .ai-user-bubble {
    background: #1e293b !important;
    color: #ffffff !important;
}

html:not(.dark) .ai-user-bubble p {
    color: #ffffff !important;
}

html:not(.dark) .ai-assistant-bubble {
    background: linear-gradient(135deg, #ffffff, #f8fbff) !important;
    color: var(--light-ink) !important;
    border-color: rgba(0, 195, 255, 0.22) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
}

html:not(.dark) .ai-assistant-bubble div,
html:not(.dark) .ai-assistant-bubble p,
html:not(.dark) .ai-assistant-bubble span:not(.text-j-pink) {
    color: #334155 !important;
}

html:not(.dark) .mechanism-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

html:not(.dark) .mechanism-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10) !important;
}

html:not(.dark) .mechanism-card h3 {
    color: var(--light-ink) !important;
}

html:not(.dark) .mechanism-card p {
    color: #475569 !important;
}

html:not(.dark) .mechanism-card .text-j-cyan {
    color: #0284c7 !important;
    opacity: 1 !important;
}

html:not(.dark) .mechanism-card .text-j-pink {
    color: #db2777 !important;
    opacity: 1 !important;
}

html:not(.dark) .mechanism-card .text-j-lime {
    color: #84cc16 !important;
    opacity: 1 !important;
}

html:not(.dark) .order-section {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

html:not(.dark) .order-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96)) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14) !important;
}

html:not(.dark) .order-card h2,
html:not(.dark) .order-card h4,
html:not(.dark) .order-card strong {
    color: var(--light-ink) !important;
}

html:not(.dark) .order-sale-pill {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

html:not(.dark) .order-includes-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) .order-includes-card p,
html:not(.dark) .order-trust,
html:not(.dark) footer {
    color: #64748b !important;
}

html:not(.dark) footer {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Keep settings drawer readable in both modes. */
html:not(.dark) #settings-panel > div {
    background: rgba(22, 22, 24, 0.96) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html:not(.dark) #settings-panel p,
html:not(.dark) #settings-panel a,
html:not(.dark) #settings-panel span {
    color: #cbd5e1;
}

html:not(.dark) #settings-panel [data-theme-toggle],
html:not(.dark) #settings-panel [data-cookie-choice="necessary"] {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.12) !important;
}

html:not(.dark) #settings-panel [data-cookie-choice="all"] {
    color: #ffffff !important;
}

html:not(.dark) #settings-panel [data-settings-toggle] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

html:not(.dark) #settings-panel [data-settings-toggle] svg {
    color: #0f172a !important;
}

/* Mobile refinements for the headline and following content. */
@media (max-width: 640px) {
    .hero-section {
        padding-top: 1.35rem !important;
        padding-bottom: 0.9rem !important;
    }

    .hero-headline {
        font-size: clamp(3.05rem, 13.4vw, 4.05rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-headline .hero-gradient-text {
        padding-top: 0.04em;
        padding-bottom: 0.10em;
    }

    .manifest-section {
        padding-top: 1rem !important;
    }
}

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Premium Bubbles Cleanup. Keeps the bubble language, strengthens offer hierarchy, and keeps both themes readable.
*/

/* Core comic language */
.comic-bubble,
.comic-panel {
    position: relative;
    isolation: isolate;
}

.comic-bubble {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.comic-bubble::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background: inherit;
    border: inherit;
    z-index: -1;
    transform: rotate(45deg);
    opacity: 0.92;
}

.comic-bubble-left::after {
    left: 1.65rem;
    bottom: -7px;
    border-top: 0;
    border-left: 0;
}

.comic-bubble-right::after {
    right: 1.65rem;
    bottom: -7px;
    border-top: 0;
    border-left: 0;
}

.comic-bubble-center::after {
    left: 50%;
    bottom: -7px;
    margin-left: -9px;
    border-top: 0;
    border-left: 0;
}

.comic-panel {
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

/* Hero offer stack: keep bubbles, but make the price and value proposition deliberate. */
.hero-offer-stack {
    align-items: stretch;
}

.hero-card-main,
.hero-card-bonus,
.hero-card-waitlist,
.hero-price-panel {
    border-width: 1px;
}

.hero-card-bonus {
    box-shadow: 0 16px 36px rgba(0, 195, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.hero-price-panel {
    background: linear-gradient(135deg, rgba(10, 12, 18, 0.86), rgba(20, 16, 26, 0.92));
    border-color: rgba(255, 51, 153, 0.32) !important;
    box-shadow: 0 20px 50px rgba(255, 51, 153, 0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}

.price-chip {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.price-chip-primary {
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.22), rgba(255, 51, 153, 0.10));
    border: 1px solid rgba(255, 51, 153, 0.45);
    color: #ffffff;
}

.price-chip-primary p:last-child {
    color: #ff3399;
    text-shadow: 0 0 20px rgba(255, 51, 153, 0.28);
}

.price-chip-regular {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #dbeafe;
}

.price-chip-regular p:last-child {
    color: #e5e7eb;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(255, 51, 153, 0.75);
}

.hero-card-waitlist {
    box-shadow: 0 16px 40px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Manifest and content sections become comic panels instead of plain blocks. */
.manifest-comic-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
    border-color: rgba(255,255,255,0.08);
}

.manifest-claim-bubble {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
}

.mechanism-card {
    overflow: visible;
}

.order-card {
    overflow: visible !important;
}

.order-includes-card {
    overflow: visible;
}

/* Light theme: comic bubbles must stay premium and readable, not washed out. */
html:not(.dark) .comic-panel {
    background: rgba(255,255,255,0.76);
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
}

html:not(.dark) .comic-bubble::after {
    border-color: inherit;
}

html:not(.dark) .hero-card-main {
    background: #1e293b !important;
    color: #ffffff !important;
}

html:not(.dark) .hero-card-bonus {
    background: linear-gradient(135deg, rgba(236, 254, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
    border-color: rgba(0, 195, 255, 0.44) !important;
}

html:not(.dark) .hero-price-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.92)) !important;
    border-color: rgba(255, 51, 153, 0.26) !important;
    box-shadow: 0 20px 52px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

html:not(.dark) .price-chip-primary {
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.16), rgba(255, 51, 153, 0.06)) !important;
    color: #831843 !important;
    border-color: rgba(255, 51, 153, 0.34) !important;
}

html:not(.dark) .price-chip-primary p:last-child {
    color: #db2777 !important;
    text-shadow: none;
}

html:not(.dark) .price-chip-regular {
    background: rgba(15, 23, 42, 0.045) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}

html:not(.dark) .price-chip-regular p:last-child {
    color: #334155 !important;
}

html:not(.dark) .manifest-comic-panel {
    background: rgba(255,255,255,0.72) !important;
}

html:not(.dark) .manifest-claim-bubble {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

html:not(.dark) .mechanism-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Mobile: keep the comic feel, but prevent speech tails from creating visual clutter. */
@media (max-width: 640px) {
    .comic-bubble::after {
        width: 14px;
        height: 14px;
        bottom: -6px;
    }

    .hero-price-panel {
        max-width: 95%;
    }

    .price-chip {
        min-height: 72px;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .price-chip-primary p:last-child,
    .price-chip-regular p:last-child {
        font-size: clamp(1.15rem, 5.5vw, 1.7rem) !important;
    }

    .manifest-comic-panel {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}


/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Premium Bubbles Cleanup. Removes literal comic tails/diamonds and keeps the bubble language elegant.
*/

/* v019: bubbles should feel premium, not like literal speech balloons. */
.comic-bubble::after,
.comic-bubble-left::after,
.comic-bubble-right::after,
.comic-bubble-center::after {
    content: none !important;
    display: none !important;
}

.hero-card-main,
.hero-card-bonus,
.hero-card-waitlist,
.ai-user-bubble,
.ai-assistant-bubble,
.mechanism-card,
.order-includes-card,
.manifest-claim-bubble,
.hero-price-panel {
    border-radius: 1.35rem !important;
}

.hero-card-main,
.hero-card-bonus,
.hero-card-waitlist {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.hero-card-bonus {
    background: linear-gradient(135deg, rgba(0, 195, 255, 0.13), rgba(0, 195, 255, 0.06)) !important;
    border-color: rgba(0, 195, 255, 0.34) !important;
}

.hero-card-waitlist {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.hero-price-panel {
    background: linear-gradient(135deg, rgba(10, 12, 18, 0.90), rgba(18, 14, 26, 0.94)) !important;
    border-color: rgba(255, 51, 153, 0.28) !important;
    box-shadow: 0 22px 58px rgba(255, 51, 153, 0.11), inset 0 1px 0 rgba(255,255,255,0.065) !important;
}

/* v019 light mode mirrors the premium bubble cleanup. */
html:not(.dark) .hero-card-main,
html:not(.dark) .hero-card-bonus,
html:not(.dark) .hero-card-waitlist {
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

html:not(.dark) .hero-card-waitlist {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Premium Glass Bubble System. Unified bubble backgrounds, unified gradient borders, subtle asymmetric corners, no cheap speech tails.
*/

:root {
    --bubble-bg-dark: linear-gradient(135deg, rgba(20, 28, 38, 0.78), rgba(32, 23, 34, 0.70));
    --bubble-border-dark: linear-gradient(135deg,
        rgba(255, 255, 255, 0.46) 0%,
        rgba(0, 195, 255, 0.24) 36%,
        rgba(255, 51, 153, 0.24) 100%
    );
    --bubble-bg-light: linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(246, 250, 252, 0.82));
    --bubble-border-light: linear-gradient(135deg,
        rgba(15, 23, 42, 0.20) 0%,
        rgba(0, 195, 255, 0.26) 38%,
        rgba(255, 51, 153, 0.24) 100%
    );
    --bubble-shadow-dark: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.075);
    --bubble-shadow-light: 0 18px 48px rgba(15, 23, 42, 0.105), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

/* v019: one visual language for all bubbles and panels. Text/accent colors inside remain responsible for attention. */
.comic-bubble,
.comic-panel,
.hero-card-main,
.hero-card-bonus,
.hero-card-waitlist,
.hero-price-panel,
.manifest-comic-panel,
.manifest-claim-bubble,
.ai-chat-card,
.ai-user-bubble,
.ai-assistant-bubble,
.mechanism-card,
.order-card,
.order-includes-card {
    background: var(--bubble-bg-dark) padding-box, var(--bubble-border-dark) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--bubble-shadow-dark) !important;
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
}

/* v019: subtle bubble hint via asymmetric corners, not cartoon tails. */
.comic-bubble-left,
.ai-assistant-bubble {
    border-radius: 0.62rem 1.45rem 1.45rem 1.45rem !important;
}

.comic-bubble-right,
.ai-user-bubble {
    border-radius: 1.45rem 0.62rem 1.45rem 1.45rem !important;
}

.comic-bubble-center,
.hero-price-panel,
.manifest-claim-bubble,
.mechanism-card,
.order-includes-card {
    border-radius: 1.45rem !important;
}

.comic-panel,
.manifest-comic-panel,
.ai-chat-card,
.order-card {
    border-radius: 2rem !important;
}

.order-card {
    border-radius: 2.35rem !important;
}

/* v019: glass corner glints. This replaces the removed triangles with a premium edge detail. */
.comic-bubble::before,
.comic-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 64%) left top / 54px 54px no-repeat,
        linear-gradient(315deg, rgba(0,195,255,0.10), rgba(255,51,153,0.10), rgba(255,255,255,0) 70%) right bottom / 72px 72px no-repeat;
    opacity: 0.82;
}

.comic-bubble > *,
.comic-panel > * {
    position: relative;
    z-index: 1;
}

/* Explicitly keep old speech-tail pseudo elements disabled. */
.comic-bubble::after,
.comic-bubble-left::after,
.comic-bubble-right::after,
.comic-bubble-center::after {
    content: none !important;
    display: none !important;
}

/* v019: keep price chips distinct inside the unified glass price bubble. */
.price-chip-primary {
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.20), rgba(255, 51, 153, 0.075)) !important;
    border: 1px solid rgba(255, 51, 153, 0.38) !important;
}

.price-chip-regular {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
}

/* v019 light theme: same bubble system, tuned for contrast and calm readability. */
html:not(.dark) .comic-bubble,
html:not(.dark) .comic-panel,
html:not(.dark) .hero-card-main,
html:not(.dark) .hero-card-bonus,
html:not(.dark) .hero-card-waitlist,
html:not(.dark) .hero-price-panel,
html:not(.dark) .manifest-comic-panel,
html:not(.dark) .manifest-claim-bubble,
html:not(.dark) .ai-chat-card,
html:not(.dark) .ai-user-bubble,
html:not(.dark) .ai-assistant-bubble,
html:not(.dark) .mechanism-card,
html:not(.dark) .order-card,
html:not(.dark) .order-includes-card {
    background: var(--bubble-bg-light) padding-box, var(--bubble-border-light) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--bubble-shadow-light) !important;
}

html:not(.dark) .comic-bubble::before,
html:not(.dark) .comic-panel::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0) 66%) left top / 54px 54px no-repeat,
        linear-gradient(315deg, rgba(0,195,255,0.08), rgba(255,51,153,0.08), rgba(255,255,255,0) 72%) right bottom / 72px 72px no-repeat;
    opacity: 0.92;
}

html:not(.dark) .hero-card-main,
html:not(.dark) .ai-user-bubble {
    color: #0f172a !important;
}

html:not(.dark) .hero-card-main p,
html:not(.dark) .hero-card-main strong,
html:not(.dark) .ai-user-bubble p {
    color: #0f172a !important;
}

html:not(.dark) .price-chip-primary {
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.15), rgba(255, 51, 153, 0.055)) !important;
    border-color: rgba(255, 51, 153, 0.32) !important;
}

html:not(.dark) .price-chip-regular {
    background: rgba(15, 23, 42, 0.045) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

@media (max-width: 640px) {
    .comic-bubble-left,
    .ai-assistant-bubble {
        border-radius: 0.55rem 1.25rem 1.25rem 1.25rem !important;
    }

    .comic-bubble-right,
    .ai-user-bubble {
        border-radius: 1.25rem 0.55rem 1.25rem 1.25rem !important;
    }

    .comic-bubble-center,
    .hero-price-panel,
    .manifest-claim-bubble,
    .mechanism-card,
    .order-includes-card {
        border-radius: 1.25rem !important;
    }
}

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Settings drawer and modal system aligned with the premium glass bubble layout.
*/

/* v019 settings drawer: same glass-bubble language, higher readability, dark/light parity. */
.settings-panel {
    font-family: 'Poppins', sans-serif;
}

.settings-toggle {
    background: var(--bubble-bg-dark) padding-box, var(--bubble-border-dark) border-box !important;
    border: 1px solid transparent !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.settings-drawer {
    background: var(--bubble-bg-dark) padding-box, var(--bubble-border-dark) border-box !important;
    border: 1px solid transparent !important;
    color: #f8fafc !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255,255,255,0.075) !important;
    backdrop-filter: blur(22px) saturate(122%);
    -webkit-backdrop-filter: blur(22px) saturate(122%);
}

.settings-drawer::-webkit-scrollbar {
    width: 5px;
}

.settings-drawer::-webkit-scrollbar-track {
    background: transparent;
}

.settings-drawer::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
}

.settings-section {
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.settings-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.settings-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.78rem;
}

.settings-section-title p {
    margin: 0;
    color: #f8fafc !important;
    font-size: 0.74rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.settings-copy {
    color: #cbd5e1 !important;
    font-size: 0.76rem;
    line-height: 1.55;
}

.settings-inline-link {
    color: #00c3ff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 180ms ease;
}

.settings-inline-link:hover {
    color: #ff3399 !important;
}

.settings-action,
.settings-legal-link {
    min-height: 2.55rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: #f8fafc !important;
    font-size: 0.76rem;
    font-weight: 800;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.settings-action:hover,
.settings-legal-link:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 195, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
}

.settings-action-primary {
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.96), rgba(255, 51, 153, 0.72)) !important;
    border-color: rgba(255, 51, 153, 0.52) !important;
    box-shadow: 0 14px 30px rgba(255, 51, 153, 0.18);
}

.settings-action-secondary {
    background: rgba(255, 255, 255, 0.09) !important;
}

.settings-theme-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.settings-legal-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.85rem;
    text-align: left;
    color: #dbeafe !important;
    font-weight: 700;
}

.settings-legal-link span {
    color: inherit !important;
}

html:not(.dark) .settings-toggle,
html:not(.dark) .settings-drawer {
    background: var(--bubble-bg-light) padding-box, var(--bubble-border-light) border-box !important;
    color: #0f172a !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

html:not(.dark) .settings-toggle,
html:not(.dark) .settings-toggle svg {
    color: #0f172a !important;
}

html:not(.dark) .settings-section {
    border-bottom-color: rgba(15, 23, 42, 0.10);
}

html:not(.dark) .settings-section-title p {
    color: #0f172a !important;
}

html:not(.dark) .settings-copy {
    color: #475569 !important;
}

html:not(.dark) .settings-action,
html:not(.dark) .settings-legal-link {
    background: rgba(255,255,255,0.72) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

html:not(.dark) .settings-action-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.98), rgba(219, 39, 119, 0.88)) !important;
    border-color: rgba(255, 51, 153, 0.32) !important;
}

html:not(.dark) .settings-inline-link {
    color: #0284c7 !important;
}

/* v019 modals: all popups use the same premium glass bubble system. */
.jee-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 24% 18%, rgba(0, 195, 255, 0.16), transparent 32%),
        radial-gradient(circle at 78% 72%, rgba(255, 51, 153, 0.16), transparent 35%),
        rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(14px) saturate(112%);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
}

.jee-modal.hidden {
    display: none !important;
}

.modal-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 4vw, 2.45rem);
    max-height: min(86vh, 820px);
    overflow-y: auto;
    background: var(--bubble-bg-dark) padding-box, var(--bubble-border-dark) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 2rem;
    color: #f8fafc;
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(22px) saturate(122%);
    -webkit-backdrop-filter: blur(22px) saturate(122%);
}

.modal-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 56%) left top / 76px 76px no-repeat,
        linear-gradient(315deg, rgba(0,195,255,0.10), rgba(255,51,153,0.12), rgba(255,255,255,0) 70%) right bottom / 110px 110px no-repeat;
    opacity: 0.92;
}

.modal-shell > * {
    position: relative;
    z-index: 1;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.modal-close:hover {
    color: #ffffff;
    background: rgba(255,51,153,0.18);
    transform: rotate(6deg);
}

.modal-eyebrow {
    margin: 0 3rem 0.55rem 0;
    color: #00c3ff !important;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.modal-title {
    margin: 0 3rem 1rem 0;
    color: #ffffff !important;
    font-size: clamp(1.65rem, 5vw, 2.25rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.modal-title .text-j-cyan,
.modal-title .text-j-pink {
    color: inherit;
}

.modal-lead,
.modal-rich-text {
    color: #dbeafe;
    font-size: 0.98rem;
    line-height: 1.7;
}

.modal-rich-text p + p {
    margin-top: 1rem;
}

.modal-rich-text strong,
.modal-lead strong {
    color: #ffffff;
}

.modal-rich-text .text-j-lime {
    color: #ccff00 !important;
}

.modal-primary-action,
.modal-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.modal-primary-action {
    margin-top: 1.45rem;
    width: 100%;
    padding: 0.85rem 1.2rem;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.98), rgba(255, 51, 153, 0.72));
    box-shadow: 0 18px 44px rgba(255, 51, 153, 0.20);
}

.modal-secondary-action {
    margin-top: 1.2rem;
    width: 100%;
    padding: 0.85rem 1.2rem;
    color: #f8fafc;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}

.modal-primary-action:hover,
.modal-secondary-action:hover {
    transform: translateY(-1px);
}

.modal-demo-list,
.modal-product-card {
    margin-top: 1.2rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
}

.modal-demo-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.72rem;
    align-items: start;
    color: #dbeafe;
    font-size: 0.9rem;
    line-height: 1.55;
}

.modal-demo-row + .modal-demo-row {
    margin-top: 0.72rem;
}

.modal-note {
    margin-top: 1rem;
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.55;
}

.modal-link-grid {
    display: grid;
    gap: 0.72rem;
    margin-top: 1.25rem;
}

.modal-doc-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.92rem 1rem;
    border-radius: 1rem;
    color: #f8fafc;
    background: rgba(255,255,255,0.065);
    border: 1px solid rgba(255,255,255,0.10);
    font-weight: 800;
    text-align: left;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.modal-doc-button:hover {
    transform: translateY(-1px);
    border-color: rgba(0,195,255,0.32);
    background: rgba(255,255,255,0.10);
}

.modal-form {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.2rem;
}

.modal-input {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.07);
    color: #f8fafc;
    padding: 0.95rem 1rem;
    outline: none;
    transition: border-color 180ms ease, background 180ms ease;
}

.modal-input::placeholder {
    color: #94a3b8;
}

.modal-input:focus {
    border-color: rgba(0, 195, 255, 0.45);
    background: rgba(255,255,255,0.10);
}

html:not(.dark) .jee-modal {
    background:
        radial-gradient(circle at 24% 18%, rgba(0, 195, 255, 0.16), transparent 32%),
        radial-gradient(circle at 78% 72%, rgba(255, 51, 153, 0.14), transparent 35%),
        rgba(248, 250, 252, 0.78);
}

html:not(.dark) .modal-shell {
    background: var(--bubble-bg-light) padding-box, var(--bubble-border-light) border-box !important;
    color: #0f172a;
    box-shadow: 0 34px 110px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.88);
}

html:not(.dark) .modal-close {
    color: #334155;
    background: rgba(15,23,42,0.055);
    border-color: rgba(15,23,42,0.08);
}

html:not(.dark) .modal-title {
    color: #0f172a !important;
}

html:not(.dark) .modal-lead,
html:not(.dark) .modal-rich-text,
html:not(.dark) .modal-demo-row {
    color: #475569;
}

html:not(.dark) .modal-rich-text strong,
html:not(.dark) .modal-lead strong,
html:not(.dark) .modal-product-card strong {
    color: #0f172a;
}

html:not(.dark) .modal-demo-list,
html:not(.dark) .modal-product-card,
html:not(.dark) .modal-doc-button {
    background: rgba(255,255,255,0.76);
    border-color: rgba(15,23,42,0.10);
    color: #0f172a;
}

html:not(.dark) .modal-secondary-action {
    color: #0f172a;
    background: rgba(15,23,42,0.055);
    border-color: rgba(15,23,42,0.10);
}

html:not(.dark) .modal-input {
    color: #0f172a;
    background: rgba(255,255,255,0.80);
    border-color: rgba(15,23,42,0.12);
}

html:not(.dark) .modal-input::placeholder {
    color: #64748b;
}

@media (max-width: 640px) {
    .settings-drawer {
        width: min(82vw, 320px) !important;
    }

    .modal-shell {
        border-radius: 1.55rem;
        padding: 1.25rem;
    }

    .modal-title {
        margin-right: 2.5rem;
    }
}

/* v019: keep accent spans inside modal titles visible. */
.modal-title .text-j-cyan { color: #00c3ff !important; }
.modal-title .text-j-pink { color: #ff3399 !important; }

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Responsive Glass Theme Fix. Refines light-mode glass surfaces and restores consistent mobile styling in both themes.
*/

:root {
    --v019-light-page: #fbfdff;
    --v019-light-ink: #0f172a;
    --v019-light-muted: #475569;
    --v019-light-faint: #64748b;
    --v019-glass-bg-light: linear-gradient(135deg,
        rgba(255, 255, 255, 0.66) 0%,
        rgba(242, 252, 255, 0.52) 48%,
        rgba(255, 242, 249, 0.54) 100%
    );
    --v019-glass-border-light: linear-gradient(135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(0, 195, 255, 0.22) 42%,
        rgba(255, 51, 153, 0.20) 100%
    );
    --v019-glass-shadow-light:
        0 26px 80px rgba(15, 23, 42, 0.105),
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(15, 23, 42, 0.045);
    --v019-glass-bg-dark: linear-gradient(135deg,
        rgba(22, 35, 48, 0.74) 0%,
        rgba(30, 30, 45, 0.68) 48%,
        rgba(52, 25, 45, 0.62) 100%
    );
    --v019-glass-border-dark: linear-gradient(135deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(0, 195, 255, 0.22) 42%,
        rgba(255, 51, 153, 0.22) 100%
    );
    --v019-glass-shadow-dark:
        0 24px 72px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.085),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* v019: Theme backgrounds. Light mode is a calm glass-lab theme, not a flat inversion. */
html:not(.dark) body,
html:not(.dark) .site-body {
    background:
        radial-gradient(circle at 14% 7%, rgba(0, 195, 255, 0.16), transparent 32%),
        radial-gradient(circle at 84% 12%, rgba(255, 51, 153, 0.14), transparent 33%),
        linear-gradient(180deg, #fbfdff 0%, #f7fbff 42%, #ffffff 100%) !important;
    color: var(--v019-light-ink) !important;
}

html.dark body,
html.dark .site-body {
    background:
        radial-gradient(circle at 14% 0%, rgba(0, 195, 255, 0.08), transparent 34%),
        radial-gradient(circle at 84% 16%, rgba(255, 51, 153, 0.07), transparent 35%),
        #080909 !important;
}

html:not(.dark) .hero-section {
    background:
        radial-gradient(circle at 18% 22%, rgba(0, 195, 255, 0.18), transparent 42%),
        radial-gradient(circle at 82% 44%, rgba(255, 51, 153, 0.14), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.68)) !important;
}

html:not(.dark) .manifest-section,
html:not(.dark) .ai-section,
html:not(.dark) .mechanism-section,
html:not(.dark) .order-section {
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 195, 255, 0.055), transparent 32%),
        radial-gradient(circle at 86% 20%, rgba(255, 51, 153, 0.050), transparent 34%),
        linear-gradient(180deg, rgba(250, 253, 255, 0.96), rgba(255, 255, 255, 0.98)) !important;
}

/* v019: Unified glass system for every visual bubble/panel in both themes. */
html.dark .comic-bubble,
html.dark .comic-panel,
html.dark .hero-card-main,
html.dark .hero-card-bonus,
html.dark .hero-card-waitlist,
html.dark .hero-price-panel,
html.dark .manifest-comic-panel,
html.dark .manifest-claim-bubble,
html.dark .ai-chat-card,
html.dark .ai-user-bubble,
html.dark .ai-assistant-bubble,
html.dark .mechanism-card,
html.dark .order-card,
html.dark .order-includes-card,
html.dark .settings-toggle,
html.dark .settings-drawer,
html.dark .modal-shell {
    background: var(--v019-glass-bg-dark) padding-box, var(--v019-glass-border-dark) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--v019-glass-shadow-dark) !important;
    backdrop-filter: blur(20px) saturate(122%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(122%) !important;
}

html:not(.dark) .comic-bubble,
html:not(.dark) .comic-panel,
html:not(.dark) .hero-card-main,
html:not(.dark) .hero-card-bonus,
html:not(.dark) .hero-card-waitlist,
html:not(.dark) .hero-price-panel,
html:not(.dark) .manifest-comic-panel,
html:not(.dark) .manifest-claim-bubble,
html:not(.dark) .ai-chat-card,
html:not(.dark) .ai-user-bubble,
html:not(.dark) .ai-assistant-bubble,
html:not(.dark) .mechanism-card,
html:not(.dark) .order-card,
html:not(.dark) .order-includes-card,
html:not(.dark) .settings-toggle,
html:not(.dark) .settings-drawer,
html:not(.dark) .modal-shell {
    background: var(--v019-glass-bg-light) padding-box, var(--v019-glass-border-light) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--v019-glass-shadow-light) !important;
    backdrop-filter: blur(20px) saturate(128%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(128%) !important;
}

/* v019: consistent subtle glints. No cartoon tails. */
.comic-bubble::after,
.comic-bubble-left::after,
.comic-bubble-right::after,
.comic-bubble-center::after {
    content: none !important;
    display: none !important;
}

.comic-bubble::before,
.comic-panel::before,
.modal-shell::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 62%) left top / 72px 72px no-repeat,
        linear-gradient(315deg, rgba(0,195,255,0.11), rgba(255,51,153,0.11), rgba(255,255,255,0) 72%) right bottom / 92px 92px no-repeat !important;
    opacity: 0.75 !important;
}

html:not(.dark) .comic-bubble::before,
html:not(.dark) .comic-panel::before,
html:not(.dark) .modal-shell::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 68%) left top / 84px 84px no-repeat,
        linear-gradient(315deg, rgba(0,195,255,0.075), rgba(255,51,153,0.085), rgba(255,255,255,0) 74%) right bottom / 110px 110px no-repeat !important;
    opacity: 0.98 !important;
}

/* v019: light text contrast, now tuned for glass surfaces. */
html:not(.dark) .hero-card-main,
html:not(.dark) .hero-card-bonus,
html:not(.dark) .hero-card-waitlist,
html:not(.dark) .hero-price-panel,
html:not(.dark) .manifest-comic-panel,
html:not(.dark) .manifest-claim-bubble,
html:not(.dark) .ai-chat-card,
html:not(.dark) .ai-user-bubble,
html:not(.dark) .ai-assistant-bubble,
html:not(.dark) .mechanism-card,
html:not(.dark) .order-card,
html:not(.dark) .order-includes-card {
    color: var(--v019-light-ink) !important;
}

html:not(.dark) .hero-card-main p,
html:not(.dark) .hero-card-main strong,
html:not(.dark) .hero-card-bonus p,
html:not(.dark) .hero-card-bonus strong,
html:not(.dark) .hero-card-waitlist p,
html:not(.dark) .hero-card-waitlist strong,
html:not(.dark) .ai-user-bubble p,
html:not(.dark) .ai-assistant-bubble p,
html:not(.dark) .ai-assistant-bubble div,
html:not(.dark) .mechanism-card p,
html:not(.dark) .order-card p,
html:not(.dark) .order-includes-card p {
    color: var(--v019-light-muted) !important;
}

html:not(.dark) .hero-card-main strong,
html:not(.dark) .hero-card-waitlist strong,
html:not(.dark) .manifest-claim-bubble span,
html:not(.dark) .mechanism-card h3,
html:not(.dark) .order-card h2,
html:not(.dark) .order-card h4,
html:not(.dark) .order-card strong,
html:not(.dark) .ai-section h2,
html:not(.dark) .mechanism-section h2,
html:not(.dark) .manifest-section h2,
html:not(.dark) .order-section h2 {
    color: var(--v019-light-ink) !important;
}

html:not(.dark) .hero-card-main .text-j-lime,
html:not(.dark) .manifest-section .text-j-lime,
html:not(.dark) .mechanism-section .text-j-lime {
    color: #65b600 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.72) !important;
}

/* v019: price and CTA hierarchy stays strong on glass. */
.price-chip {
    border-radius: 1.05rem !important;
    backdrop-filter: blur(14px) saturate(116%);
    -webkit-backdrop-filter: blur(14px) saturate(116%);
}

html.dark .price-chip-primary {
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.24), rgba(255, 51, 153, 0.10)) !important;
    border-color: rgba(255, 51, 153, 0.36) !important;
}

html.dark .price-chip-regular {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
}

html:not(.dark) .price-chip-primary {
    background: linear-gradient(135deg, rgba(255, 51, 153, 0.18), rgba(255, 255, 255, 0.34)) !important;
    border-color: rgba(255, 51, 153, 0.30) !important;
    color: #831843 !important;
}

html:not(.dark) .price-chip-primary p:last-child {
    color: #db2777 !important;
}

html:not(.dark) .price-chip-regular {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.055), rgba(255, 255, 255, 0.28)) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #334155 !important;
}

/* v019: settings menu and modals match the same glass language. */
.settings-drawer {
    border-radius: 0 0 0 1.45rem !important;
}

.settings-action,
.settings-legal-link,
.modal-demo-list,
.modal-product-card,
.modal-doc-button,
.modal-input,
.modal-secondary-action {
    backdrop-filter: blur(14px) saturate(116%);
    -webkit-backdrop-filter: blur(14px) saturate(116%);
}

html:not(.dark) .settings-copy,
html:not(.dark) .settings-drawer p,
html:not(.dark) .settings-drawer a,
html:not(.dark) .settings-drawer span,
html:not(.dark) .modal-lead,
html:not(.dark) .modal-rich-text,
html:not(.dark) .modal-demo-row {
    color: var(--v019-light-muted) !important;
}

html:not(.dark) .settings-section-title p,
html:not(.dark) .settings-legal-link,
html:not(.dark) .settings-action,
html:not(.dark) .modal-title,
html:not(.dark) .modal-rich-text strong,
html:not(.dark) .modal-lead strong {
    color: var(--v019-light-ink) !important;
}

html:not(.dark) .settings-action-primary,
html:not(.dark) .modal-primary-action {
    color: #ffffff !important;
}

html:not(.dark) .modal-demo-list,
html:not(.dark) .modal-product-card,
html:not(.dark) .modal-doc-button,
html:not(.dark) .modal-input,
html:not(.dark) .modal-secondary-action,
html:not(.dark) .settings-action,
html:not(.dark) .settings-legal-link {
    background: linear-gradient(135deg, rgba(255,255,255,0.66), rgba(241,248,252,0.48)) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}

/* v019: mobile-specific restoration. Keep the style, but make it fit and remain visible. */
@media (max-width: 640px) {
    html,
    body {
        min-width: 0 !important;
    }

    .site-body {
        pt: initial;
    }

    .hero-section {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        padding-top: 1.1rem !important;
        padding-bottom: 0.85rem !important;
    }

    .hero-section > div {
        max-width: 100% !important;
    }

    .hero-section img {
        max-width: min(72vw, 280px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-headline {
        font-size: clamp(2.95rem, 13vw, 3.95rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.055em !important;
        margin-top: 0.15rem !important;
        margin-bottom: 0.72rem !important;
        padding-top: 0.06em !important;
        padding-bottom: 0.10em !important;
    }

    .hero-headline .hero-gradient-text {
        padding-bottom: 0.11em !important;
    }

    .hero-offer-stack {
        width: 100% !important;
        max-width: 100% !important;
        gap: 0.70rem !important;
        margin-bottom: 0.55rem !important;
    }

    .hero-card-main,
    .hero-card-bonus,
    .hero-card-waitlist,
    .hero-price-panel {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0.92rem 1rem !important;
        border-radius: 1.18rem !important;
    }

    .hero-card-main p,
    .hero-card-bonus p,
    .hero-card-waitlist p {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
    }

    .hero-card-bonus .flex {
        gap: 0.65rem !important;
    }

    .hero-price-panel {
        padding: 0.65rem !important;
    }

    .hero-price-panel .grid {
        gap: 0.55rem !important;
    }

    .price-chip {
        min-height: 68px !important;
        padding: 0.72rem 0.78rem !important;
    }

    .price-chip p:first-child {
        font-size: 0.62rem !important;
        letter-spacing: 0.08em !important;
    }

    .price-chip-primary p:last-child,
    .price-chip-regular p:last-child {
        font-size: clamp(1.25rem, 5.7vw, 1.65rem) !important;
    }

    .btn-glow {
        width: min(100%, 21rem) !important;
        min-height: 3.35rem !important;
        font-size: 1rem !important;
    }

    .manifest-section {
        padding-top: 1.15rem !important;
        padding-bottom: 2.5rem !important;
    }

    .manifest-comic-panel,
    .ai-chat-card,
    .order-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1.45rem !important;
    }

    .manifest-comic-panel {
        padding: 1.15rem 1rem !important;
    }

    .cz-manifest-title {
        font-size: clamp(2.05rem, 8.6vw, 2.55rem) !important;
        line-height: 1.06 !important;
        margin-bottom: 1rem !important;
    }

    .cz-manifest-body {
        font-size: 1.02rem !important;
        line-height: 1.52 !important;
    }

    .cz-manifest-claim {
        font-size: clamp(1.32rem, 6vw, 1.78rem) !important;
        line-height: 1.16 !important;
    }

    .ai-section,
    .mechanism-section,
    .order-section {
        padding-top: 2.4rem !important;
        padding-bottom: 2.6rem !important;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    .cz-ai-title {
        font-size: clamp(1.75rem, 7.4vw, 2.25rem) !important;
        line-height: 1.08 !important;
    }

    .ai-chat-card {
        padding: 1rem !important;
    }

    .ai-user-bubble,
    .ai-assistant-bubble {
        max-width: 100% !important;
        padding: 0.9rem 1rem !important;
    }

    .mechanism-section .grid {
        gap: 0.85rem !important;
    }

    .mechanism-card {
        padding: 1.1rem !important;
        border-radius: 1.25rem !important;
    }

    .order-card {
        padding: 1.15rem !important;
        border-radius: 1.55rem !important;
    }

    .order-includes-card {
        padding: 1rem !important;
        border-radius: 1.25rem !important;
    }

    .settings-panel {
        top: 48px !important;
    }

    .settings-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    .settings-drawer {
        width: min(84vw, 320px) !important;
        max-height: 82vh !important;
        padding: 1rem !important;
        gap: 1rem !important;
    }

    .settings-action,
    .settings-legal-link {
        min-height: 2.75rem !important;
        font-size: 0.78rem !important;
    }

    .modal-shell {
        width: min(92vw, 520px) !important;
        max-height: 84vh !important;
        padding: 1.25rem !important;
        border-radius: 1.45rem !important;
    }

    .modal-title {
        font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
        line-height: 1.10 !important;
    }
}

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Bubble Consistency All Modes Fix. Calms nested gradients, restores mobile bubble corners, and fixes Czech mobile hero wrap.
*/

:root {
    --v019-main-bg-dark: linear-gradient(145deg,
        rgba(18, 28, 39, 0.80) 0%,
        rgba(20, 26, 36, 0.76) 50%,
        rgba(27, 25, 38, 0.72) 100%
    );
    --v019-main-border-dark: linear-gradient(145deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(0, 195, 255, 0.18) 48%,
        rgba(255, 51, 153, 0.14) 100%
    );
    --v019-nested-bg-dark: linear-gradient(145deg,
        rgba(255, 255, 255, 0.060) 0%,
        rgba(255, 255, 255, 0.038) 100%
    );
    --v019-nested-border-dark: linear-gradient(145deg,
        rgba(255, 255, 255, 0.20) 0%,
        rgba(0, 195, 255, 0.105) 58%,
        rgba(255, 255, 255, 0.10) 100%
    );
    --v019-main-bg-light: linear-gradient(145deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(246, 252, 255, 0.62) 50%,
        rgba(255, 248, 252, 0.58) 100%
    );
    --v019-main-border-light: linear-gradient(145deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(0, 145, 190, 0.18) 54%,
        rgba(190, 70, 135, 0.13) 100%
    );
    --v019-nested-bg-light: linear-gradient(145deg,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(247, 251, 253, 0.56) 100%
    );
    --v019-nested-border-light: linear-gradient(145deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(15, 23, 42, 0.090) 64%,
        rgba(0, 145, 190, 0.10) 100%
    );
    --v019-shadow-dark: 0 22px 68px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.082);
    --v019-shadow-light: 0 22px 68px rgba(15, 23, 42, 0.105), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    --v019-shadow-nested-dark: 0 14px 36px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.070);
    --v019-shadow-nested-light: 0 14px 36px rgba(15, 23, 42, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

/* v019: main glass surfaces may keep a calm transition. */
html.dark .hero-card-main,
html.dark .hero-card-bonus,
html.dark .hero-card-waitlist,
html.dark .hero-price-panel,
html.dark .manifest-comic-panel,
html.dark .ai-chat-card,
html.dark .order-card,
html.dark .settings-drawer,
html.dark .modal-shell {
    background: var(--v019-main-bg-dark) padding-box, var(--v019-main-border-dark) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--v019-shadow-dark) !important;
}

html:not(.dark) .hero-card-main,
html:not(.dark) .hero-card-bonus,
html:not(.dark) .hero-card-waitlist,
html:not(.dark) .hero-price-panel,
html:not(.dark) .manifest-comic-panel,
html:not(.dark) .ai-chat-card,
html:not(.dark) .order-card,
html:not(.dark) .settings-drawer,
html:not(.dark) .modal-shell {
    background: var(--v019-main-bg-light) padding-box, var(--v019-main-border-light) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--v019-shadow-light) !important;
}

/* v019: nested bubbles stay quieter. No carnival neon corners inside sub-bubbles. */
html.dark .manifest-claim-bubble,
html.dark .ai-user-bubble,
html.dark .ai-assistant-bubble,
html.dark .mechanism-card,
html.dark .order-includes-card,
html.dark .price-chip,
html.dark .settings-action,
html.dark .settings-legal-link,
html.dark .modal-demo-list,
html.dark .modal-product-card,
html.dark .modal-doc-button,
html.dark .modal-input,
html.dark .modal-secondary-action {
    background: var(--v019-nested-bg-dark) padding-box, var(--v019-nested-border-dark) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--v019-shadow-nested-dark) !important;
}

html:not(.dark) .manifest-claim-bubble,
html:not(.dark) .ai-user-bubble,
html:not(.dark) .ai-assistant-bubble,
html:not(.dark) .mechanism-card,
html:not(.dark) .order-includes-card,
html:not(.dark) .price-chip,
html:not(.dark) .settings-action,
html:not(.dark) .settings-legal-link,
html:not(.dark) .modal-demo-list,
html:not(.dark) .modal-product-card,
html:not(.dark) .modal-doc-button,
html:not(.dark) .modal-input,
html:not(.dark) .modal-secondary-action {
    background: var(--v019-nested-bg-light) padding-box, var(--v019-nested-border-light) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--v019-shadow-nested-light) !important;
}

/* v019: price chips still communicate hierarchy, but without loud background flares. */
html.dark .price-chip-primary {
    background: linear-gradient(145deg, rgba(255, 51, 153, 0.17), rgba(255,255,255,0.045)) padding-box,
                linear-gradient(145deg, rgba(255, 51, 153, 0.34), rgba(255,255,255,0.10)) border-box !important;
}

html.dark .price-chip-regular {
    background: linear-gradient(145deg, rgba(255,255,255,0.060), rgba(255,255,255,0.032)) padding-box,
                linear-gradient(145deg, rgba(255,255,255,0.14), rgba(0,195,255,0.08)) border-box !important;
}

html:not(.dark) .price-chip-primary {
    background: linear-gradient(145deg, rgba(255, 51, 153, 0.12), rgba(255,255,255,0.55)) padding-box,
                linear-gradient(145deg, rgba(255, 51, 153, 0.24), rgba(255,255,255,0.92)) border-box !important;
}

html:not(.dark) .price-chip-regular {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.040), rgba(255,255,255,0.62)) padding-box,
                linear-gradient(145deg, rgba(15, 23, 42, 0.10), rgba(255,255,255,0.90)) border-box !important;
}

/* v019: remove the strong bottom-right neon glint globally. */
.comic-bubble::before,
.comic-panel::before,
.modal-shell::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055) 38%, rgba(255,255,255,0) 68%) left top / 70px 70px no-repeat !important;
    opacity: 0.58 !important;
}

html:not(.dark) .comic-bubble::before,
html:not(.dark) .comic-panel::before,
html:not(.dark) .modal-shell::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.22) 42%, rgba(255,255,255,0) 72%) left top / 78px 78px no-repeat !important;
    opacity: 0.80 !important;
}

/* v019: nested elements do not need an extra decorative glint. */
.price-chip::before,
.manifest-claim-bubble::before,
.ai-user-bubble::before,
.ai-assistant-bubble::before,
.mechanism-card::before,
.order-includes-card::before,
.settings-action::before,
.settings-legal-link::before,
.modal-demo-list::before,
.modal-product-card::before,
.modal-doc-button::before {
    content: none !important;
    display: none !important;
}

/* v019: restore premium bubble-corner language on every viewport. */
.comic-bubble-left,
.ai-assistant-bubble {
    border-radius: 0.62rem 1.45rem 1.45rem 1.45rem !important;
}

.comic-bubble-right,
.ai-user-bubble {
    border-radius: 1.45rem 0.62rem 1.45rem 1.45rem !important;
}

.comic-bubble-center,
.hero-price-panel,
.manifest-claim-bubble,
.mechanism-card,
.order-includes-card,
.price-chip {
    border-radius: 1.45rem !important;
}

.comic-panel,
.manifest-comic-panel,
.ai-chat-card,
.order-card,
.modal-shell {
    border-radius: 2rem !important;
}

.order-card {
    border-radius: 2.35rem !important;
}

/* v019: Czech mobile headline: "Sněz to" / "a přepni." */
.hero-line-two {
    display: inline-block;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .hero-headline {
        text-wrap: normal !important;
    }

    .hero-headline .md\:hidden {
        display: inline !important;
    }
}

@media (max-width: 640px) {
    .comic-bubble-left,
    .hero-card-main.comic-bubble-left,
    .hero-card-waitlist.comic-bubble-left,
    .ai-assistant-bubble {
        border-radius: 0.56rem 1.25rem 1.25rem 1.25rem !important;
    }

    .comic-bubble-right,
    .hero-card-bonus.comic-bubble-right,
    .ai-user-bubble {
        border-radius: 1.25rem 0.56rem 1.25rem 1.25rem !important;
    }

    .comic-bubble-center,
    .hero-price-panel,
    .manifest-claim-bubble,
    .mechanism-card,
    .order-includes-card,
    .price-chip {
        border-radius: 1.25rem !important;
    }

    .manifest-comic-panel,
    .ai-chat-card,
    .order-card,
    .modal-shell {
        border-radius: 1.48rem !important;
    }

    .hero-headline {
        font-size: clamp(3.05rem, 13.2vw, 3.95rem) !important;
        line-height: 1.02 !important;
    }

    .hero-line-two {
        margin-top: 0.02em;
    }
}

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Light Icon Contrast Fix. Makes small navigation icons readable in the light glass theme without changing layout.
*/

:root {
    --v019-light-icon-strong: #008fc7;
    --v019-light-icon-ink: #0f172a;
    --v019-light-icon-glow: rgba(0, 195, 255, 0.26);
    --v019-light-scroll-bg: rgba(255, 255, 255, 0.62);
    --v019-light-scroll-border: rgba(15, 23, 42, 0.12);
}

/* Light theme: small UI icons must not disappear on pale glass backgrounds. */
html:not(.dark) .settings-theme-button [data-lucide],
html:not(.dark) .settings-theme-button svg,
html:not(.dark) .settings-section-title [data-lucide="palette"],
html:not(.dark) .settings-section-title [data-lucide="scale"],
html:not(.dark) .settings-section-title [data-lucide="cookie"] {
    color: var(--v019-light-icon-strong) !important;
    stroke: var(--v019-light-icon-strong) !important;
    filter: drop-shadow(0 0 7px var(--v019-light-icon-glow)) !important;
    opacity: 1 !important;
}

html:not(.dark) .settings-theme-button:hover [data-lucide],
html:not(.dark) .settings-theme-button:hover svg {
    color: #0ea5e9 !important;
    stroke: #0ea5e9 !important;
    filter: drop-shadow(0 0 10px rgba(0, 195, 255, 0.36)) !important;
}

/* Dark theme keeps a stronger readable neon accent for the theme button too. */
html.dark .settings-theme-button [data-lucide],
html.dark .settings-theme-button svg {
    color: #ccff00 !important;
    stroke: #ccff00 !important;
    filter: drop-shadow(0 0 8px rgba(204, 255, 0, 0.22)) !important;
    opacity: 1 !important;
}

/* Light theme: the scroll cue needs a visible glass/ink treatment over pale backgrounds. */
html:not(.dark) .hero-scroll-hint-wrap {
    opacity: 1 !important;
}

html:not(.dark) .hero-scroll-hint {
    border-radius: 999px !important;
    background: var(--v019-light-scroll-bg) !important;
    border: 1px solid var(--v019-light-scroll-border) !important;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}

html:not(.dark) .hero-scroll-hint [data-lucide],
html:not(.dark) .hero-scroll-hint svg {
    color: var(--v019-light-icon-ink) !important;
    stroke: var(--v019-light-icon-ink) !important;
    opacity: 0.78 !important;
    filter: drop-shadow(0 0 7px rgba(0, 195, 255, 0.18)) !important;
}

html.dark .hero-scroll-hint-wrap {
    opacity: 0.62 !important;
}

html.dark .hero-scroll-hint [data-lucide],
html.dark .hero-scroll-hint svg {
    color: rgba(255, 255, 255, 0.86) !important;
    stroke: rgba(255, 255, 255, 0.86) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18)) !important;
}

/* Mobile/tablet safety: if the arrow is ever shown, it remains readable. */
@media (max-width: 767px) {
    html:not(.dark) .hero-scroll-hint [data-lucide],
    html:not(.dark) .hero-scroll-hint svg {
        color: #0f172a !important;
        stroke: #0f172a !important;
        opacity: 0.82 !important;
    }
}

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Final topbar divider cleanup and mobile AI rhythm refinement.
*/

/* v019: the FOMO topbar must not render a hard white/border line in any theme or viewport. */
.topbar-fomo {
    position: fixed;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.94)) !important;
    isolation: isolate;
}

.topbar-fomo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(940px, calc(100vw - 56px));
    height: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 195, 255, 0.00) 5%,
        rgba(0, 195, 255, 0.34) 27%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 51, 153, 0.28) 73%,
        rgba(255, 51, 153, 0.00) 95%,
        transparent 100%
    );
    opacity: 0.58;
}

.topbar-fomo::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: min(700px, calc(100vw - 70px));
    height: 10px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 51, 153, 0.10), transparent 72%);
    opacity: 0.42;
    filter: blur(6px);
}

html:not(.dark) .topbar-fomo,
html.dark .topbar-fomo {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .topbar-fomo::after {
        width: calc(100vw - 34px);
        opacity: 0.34;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 195, 255, 0.20) 26%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 51, 153, 0.18) 74%,
            transparent 100%
        );
    }

    .topbar-fomo::before {
        opacity: 0.22;
        width: calc(100vw - 58px);
    }
}

/* v019: compact, readable AI section on phones. */
@media (max-width: 767px) {
    .ai-section {
        padding-top: 2.35rem !important;
        padding-bottom: 2.75rem !important;
    }

    .ai-section > .max-w-3xl,
    .ai-section > .max-w-5xl {
        max-width: 100% !important;
    }

    .ai-section .text-center.mb-8,
    .ai-section .text-center.md\:mb-10 {
        margin-bottom: 1.05rem !important;
    }

    .ai-section .text-j-cyan.uppercase {
        font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
        line-height: 1.15 !important;
        letter-spacing: 0.20em !important;
        margin-bottom: 0.45rem !important;
    }

    .cz-ai-title {
        max-width: 92vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: clamp(1.75rem, 7.4vw, 2.2rem) !important;
        line-height: 1.07 !important;
        letter-spacing: -0.045em !important;
    }

    .ai-chat-card {
        width: min(100%, 34rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1.12rem !important;
        border-radius: 1.45rem !important;
        box-shadow: 0 20px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    .ai-chat-card .flex.justify-end.mb-6,
    .ai-chat-card .flex.justify-end.mb-5 {
        margin-bottom: 0.95rem !important;
    }

    .ai-user-bubble {
        max-width: 82% !important;
        padding: 0.86rem 0.95rem !important;
        border-radius: 1.12rem 0.48rem 1.12rem 1.12rem !important;
    }

    .ai-user-bubble p {
        font-size: 0.92rem !important;
        line-height: 1.42 !important;
    }

    .ai-assistant-bubble {
        max-width: 100% !important;
        width: 100% !important;
        padding: 1.1rem 1rem 1rem 1.12rem !important;
        border-radius: 0.56rem 1.18rem 1.18rem 1.18rem !important;
    }

    .ai-assistant-bubble > .absolute {
        left: 0.82rem !important;
        top: -0.92rem !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-width: 3px !important;
    }

    .ai-assistant-bubble > .text-sm,
    .ai-assistant-bubble > div:last-child {
        min-height: 0 !important;
        font-size: 0.94rem !important;
        line-height: 1.55 !important;
        padding-top: 0.18rem !important;
    }

    .ai-assistant-bubble strong {
        margin-bottom: 0.42rem !important;
        font-size: 0.96rem !important;
    }

    #ai-typewriter {
        font-size: 0.94rem !important;
        line-height: 1.55 !important;
    }

    .mechanism-section {
        padding-top: 2.8rem !important;
    }

    .mechanism-section h2 {
        max-width: 92vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1.35rem !important;
        font-size: clamp(2.05rem, 9vw, 2.72rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.045em !important;
        text-wrap: balance;
    }
}

/*
Version: v019
Build: Jeeerky PHP package
Date: 2026-04-24
Note: Fix light-mode cookie choice button contrast in the settings drawer.
*/

html:not(.dark) #settings-panel #cookie-section .settings-action {
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

html:not(.dark) #settings-panel #cookie-section .settings-action-primary,
html:not(.dark) #settings-panel #cookie-section [data-cookie-choice="all"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff3399 0%, #db2777 100%) padding-box,
                linear-gradient(135deg, rgba(255, 51, 153, 0.62), rgba(0, 195, 255, 0.28)) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 0 14px 30px rgba(255, 51, 153, 0.20), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

html:not(.dark) #settings-panel #cookie-section .settings-action-secondary,
html:not(.dark) #settings-panel #cookie-section [data-cookie-choice="necessary"] {
    color: #0f172a !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(225, 243, 250, 0.70)) padding-box,
                linear-gradient(135deg, rgba(0, 195, 255, 0.26), rgba(255, 51, 153, 0.16)) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

html:not(.dark) #settings-panel #cookie-section .settings-action-primary:hover,
html:not(.dark) #settings-panel #cookie-section [data-cookie-choice="all"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff4aa5 0%, #be185d 100%) padding-box,
                linear-gradient(135deg, rgba(255, 51, 153, 0.72), rgba(0, 195, 255, 0.34)) border-box !important;
    transform: translateY(-1px);
}

html:not(.dark) #settings-panel #cookie-section .settings-action-secondary:hover,
html:not(.dark) #settings-panel #cookie-section [data-cookie-choice="necessary"]:hover {
    color: #020617 !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(215, 241, 250, 0.82)) padding-box,
                linear-gradient(135deg, rgba(0, 195, 255, 0.34), rgba(255, 51, 153, 0.22)) border-box !important;
    transform: translateY(-1px);
}