/**
 * Frontend styles for INK Club Loyalty System.
 *
 * UI-only styles. Business logic remains in PHP modules.
 */

.ink-club-fa-icon {
    width: 1.18em;
    min-width: 1.18em;
    height: 1.18em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.12em;
    color: currentColor;
    line-height: 1;
    font-size: 1em;
}

/* Dashboard V4 icon/layout polish after Font Awesome class migration. */
.inkdbv2-wrap .inkdbv2-tiercards {
    gap: 16px !important;
    align-items: stretch !important;
}

.inkdbv2-wrap .inkdbv2-tiercard {
    min-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.inkdbv2-wrap .inkdbv2-tiercard .emblem {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Georgia, serif !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

.inkdbv2-wrap .inkdbv2-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.inkdbv2-wrap .inkdbv2-card {
    align-items: center !important;
    min-height: 108px !important;
    gap: 15px !important;
}

.inkdbv2-wrap .inkdbv2-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    flex: 0 0 58px !important;
    border-radius: 19px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.inkdbv2-wrap .inkdbv2-icon .ink-club-fa-icon,
.ink-mini-v4-stat-icon .ink-club-fa-icon,
.inkdbv2-progress-head .gift .ink-club-fa-icon {
    width: 1em !important;
    min-width: 1em !important;
    height: 1em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 1em !important;
}

.ink-mini-v4-stat-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 1100px) {
    .inkdbv2-wrap .inkdbv2-tiercards {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px 4px 16px !important;
        scroll-snap-type: x mandatory !important;
    }

    .inkdbv2-wrap .inkdbv2-tiercard {
        flex: 0 0 178px !important;
        width: 178px !important;
        min-width: 178px !important;
        min-height: 218px !important;
        scroll-snap-align: start !important;
    }
}

@media (max-width: 768px) {
    .inkdbv2-wrap .inkdbv2-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 430px) {
    .inkdbv2-wrap .inkdbv2-summary {
        grid-template-columns: 1fr !important;
    }
}

/* Premium dashboard polish for [ink_club_dashboard].
   Targets the migrated Batch 2 dashboard selectors without changing data. */
.ink-safe-dash {
    --ink-premium-bg: #fffaf2;
    --ink-premium-surface: rgba(255, 255, 255, .94);
    --ink-premium-ink: #162235;
    --ink-premium-gold: #f7921d;
    --ink-premium-soft: #ffe8a3;
    --ink-premium-muted: #667085;
    --ink-premium-line: rgba(247, 146, 29, .26);
    position: relative !important;
    isolation: isolate !important;
    max-width: 1220px !important;
    padding: clamp(16px, 2.2vw, 30px) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(247, 146, 29, .18), transparent 30%),
        radial-gradient(circle at 100% 4%, rgba(27, 38, 59, .12), transparent 34%),
        linear-gradient(135deg, #fffaf2 0%, #ffffff 48%, #f5ead7 100%) !important;
    border: 1px solid var(--ink-premium-line) !important;
    box-shadow:
        0 24px 80px rgba(27, 38, 59, .14),
        inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

.ink-safe-dash::before {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.ink-safe-alert {
    background: linear-gradient(135deg, #fff7ec, #ffffff) !important;
    border: 1px solid rgba(247, 146, 29, .30) !important;
    border-left: 5px solid var(--ink-premium-gold) !important;
    box-shadow: 0 10px 26px rgba(247, 146, 29, .10) !important;
}

.ink-safe-summary {
    align-items: stretch !important;
}

.ink-safe-card,
.ink-safe-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 250, 242, .90)) !important;
    border: 1px solid rgba(247, 146, 29, .24) !important;
    box-shadow:
        0 16px 42px rgba(27, 38, 59, .10),
        inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

.ink-safe-card {
    border-radius: 22px !important;
    min-height: 116px !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.ink-safe-card:hover,
.ink-safe-panel:hover {
    border-color: rgba(247, 146, 29, .42) !important;
    box-shadow:
        0 20px 54px rgba(27, 38, 59, .14),
        0 0 0 1px rgba(247, 146, 29, .08) !important;
}

.ink-safe-card:hover {
    transform: translateY(-2px) !important;
}

.ink-safe-icon {
    font-size: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 34% 24%, #fff7d6, transparent 36%),
        linear-gradient(135deg, #f7921d, #ffd166) !important;
    border: 1px solid rgba(255, 232, 163, .80) !important;
    color: #162235 !important;
    box-shadow:
        0 12px 26px rgba(247, 146, 29, .24),
        inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

.ink-safe-icon::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.ink-safe-summary .ink-safe-card:nth-child(1) .ink-safe-icon::before {
    content: "Tier" !important;
}

.ink-safe-summary .ink-safe-card:nth-child(2) .ink-safe-icon::before {
    content: "Pts" !important;
}

.ink-safe-summary .ink-safe-card:nth-child(3) .ink-safe-icon::before {
    content: "Spend" !important;
    font-size: 10px !important;
}

.ink-safe-summary .ink-safe-card:nth-child(4) .ink-safe-icon::before {
    content: "Refer" !important;
    font-size: 10px !important;
}

.ink-safe-card span,
.ink-safe-badge {
    letter-spacing: .04em !important;
}

.ink-safe-card strong {
    color: var(--ink-premium-ink) !important;
    font-size: clamp(22px, 2vw, 28px) !important;
}

.ink-safe-card small,
.ink-safe-small,
.ink-safe-rowtext {
    color: var(--ink-premium-muted) !important;
}

.ink-safe-main {
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr) !important;
}

.ink-safe-panel {
    border-radius: 24px !important;
}

.ink-safe-title h3 {
    color: var(--ink-premium-ink) !important;
    font-size: clamp(21px, 2vw, 27px) !important;
}

.ink-safe-percent,
.ink-safe-bigpoints {
    color: var(--ink-premium-gold) !important;
    text-shadow: 0 8px 24px rgba(247, 146, 29, .18) !important;
}

.ink-safe-track {
    height: 18px !important;
    background: #efe2cf !important;
    border: 1px solid rgba(27, 38, 59, .08) !important;
    box-shadow: inset 0 2px 8px rgba(27, 38, 59, .08) !important;
}

.ink-safe-fill {
    background:
        linear-gradient(90deg, #f7921d, #ffd166 72%, #ffe8a3) !important;
    box-shadow:
        0 8px 22px rgba(247, 146, 29, .28),
        inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

.ink-safe-refbox,
.ink-safe-note {
    background: linear-gradient(135deg, #fff8ec, #ffffff) !important;
    border-color: rgba(247, 146, 29, .32) !important;
}

.ink-safe-copy {
    background: linear-gradient(135deg, #162235, #30435f) !important;
    color: #ffe8a3 !important;
    box-shadow: 0 10px 24px rgba(27, 38, 59, .18) !important;
}

.ink-safe-cardpreview {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 146, 29, .30), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(255, 232, 163, .12), transparent 35%),
        linear-gradient(135deg, #182236, #0c1220) !important;
    border-color: rgba(255, 232, 163, .28) !important;
    box-shadow: 0 18px 42px rgba(27, 38, 59, .22) !important;
}

.ink-safe-tx {
    border-bottom-color: rgba(27, 38, 59, .08) !important;
}

.ink-safe-txicon {
    background: #fff7ec !important;
    border: 1px solid rgba(247, 146, 29, .22) !important;
}

@media (max-width: 1100px) {
    .ink-safe-main {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .ink-safe-dash {
        max-width: calc(100% - 16px) !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .ink-safe-card {
        min-height: 100px !important;
    }

    .ink-safe-icon {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }
}

/* Specificity boost for the actual shortcode markup.
   The shortcode still prints legacy inline CSS after wp_head, so this wrapper
   keeps the plugin stylesheet visually authoritative without changing logic. */
.ink-safe-dash.ink-club-dashboard-premium {
    width: min(1220px, calc(100% - 20px)) !important;
    margin: 18px auto 120px !important;
    padding: clamp(16px, 2.4vw, 32px) !important;
    border-radius: 30px !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 12% -8%, rgba(247, 146, 29, .24), transparent 30%),
        radial-gradient(circle at 96% 0%, rgba(27, 38, 59, .18), transparent 34%),
        linear-gradient(135deg, #fffaf2 0%, #ffffff 46%, #f7ead6 100%) !important;
    border: 1px solid rgba(247, 146, 29, .30) !important;
    box-shadow:
        0 26px 86px rgba(27, 38, 59, .16),
        inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

.ink-safe-dash.ink-club-dashboard-premium,
.ink-safe-dash.ink-club-dashboard-premium * {
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-hero {
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: clamp(20px, 3vw, 34px) !important;
    margin: 0 0 18px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 146, 29, .30), transparent 34%),
        linear-gradient(135deg, #1b263b, #0f1724) !important;
    border: 1px solid rgba(255, 232, 163, .24) !important;
    box-shadow: 0 22px 60px rgba(27, 38, 59, .20) !important;
    color: #ffffff !important;
    overflow: hidden !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-eyebrow {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(247, 146, 29, .16) !important;
    border: 1px solid rgba(247, 146, 29, .38) !important;
    color: #ffe8a3 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-hero h2 {
    margin: 14px 0 6px !important;
    color: #ffffff !important;
    font-family: Georgia, serif !important;
    font-size: clamp(34px, 5vw, 62px) !important;
    line-height: 1.02 !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-hero p {
    margin: 0 !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-hero-meta {
    min-width: min(260px, 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-hero-meta span {
    color: rgba(255, 255, 255, .66) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-hero-meta strong {
    color: #ffe8a3 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 0 18px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-card,
.ink-safe-dash.ink-club-dashboard-premium .ink-safe-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(255, 250, 242, .94)) !important;
    border: 1px solid rgba(247, 146, 29, .26) !important;
    border-radius: 24px !important;
    box-shadow:
        0 18px 48px rgba(27, 38, 59, .11),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-card {
    min-height: 118px !important;
    padding: 20px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    font-size: 0 !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 35% 20%, #fff7d6, transparent 36%),
        linear-gradient(135deg, #f7921d, #ffd166) !important;
    border: 1px solid rgba(255, 232, 163, .76) !important;
    box-shadow: 0 14px 30px rgba(247, 146, 29, .24) !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-icon::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #162235 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-summary .ink-safe-card:nth-child(1) .ink-safe-icon::before {
    content: "Tier" !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-summary .ink-safe-card:nth-child(2) .ink-safe-icon::before {
    content: "Points" !important;
    font-size: 10px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-summary .ink-safe-card:nth-child(3) .ink-safe-icon::before {
    content: "Spend" !important;
    font-size: 10px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-summary .ink-safe-card:nth-child(4) .ink-safe-icon::before {
    content: "Refer" !important;
    font-size: 10px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-card span,
.ink-safe-dash.ink-club-dashboard-premium .ink-safe-badge,
.ink-safe-dash.ink-club-dashboard-premium .ink-safe-card small {
    color: #667085 !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-card strong {
    color: #162235 !important;
    font-size: clamp(23px, 2.1vw, 29px) !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;
    gap: 18px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-grid3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-panel {
    padding: 22px !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-title h3 {
    color: #162235 !important;
    font-size: clamp(22px, 2vw, 28px) !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-track {
    height: 18px !important;
    background: #efe2cf !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-fill {
    background: linear-gradient(90deg, #f7921d, #ffd166 72%, #ffe8a3) !important;
}

.ink-safe-dash.ink-club-dashboard-premium .ink-safe-cardpreview {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 146, 29, .30), transparent 34%),
        linear-gradient(135deg, #1b263b, #0c1220) !important;
    border-color: rgba(255, 232, 163, .30) !important;
}

@media (max-width: 1100px) {
    .ink-safe-dash.ink-club-dashboard-premium .ink-safe-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ink-safe-dash.ink-club-dashboard-premium .ink-safe-main,
    .ink-safe-dash.ink-club-dashboard-premium .ink-safe-grid3 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .ink-safe-dash.ink-club-dashboard-premium {
        width: calc(100% - 14px) !important;
        padding: 12px !important;
        border-radius: 22px !important;
    }

    .ink-safe-dash.ink-club-dashboard-premium .ink-safe-hero {
        flex-direction: column !important;
        padding: 20px !important;
        border-radius: 22px !important;
    }

    .ink-safe-dash.ink-club-dashboard-premium .ink-safe-summary {
        grid-template-columns: 1fr !important;
    }
}

/* INK Club Vibe */
.ink-vibe-control,
.ink-vibe-control * {
    box-sizing: border-box !important;
}

.ink-vibe-control {
    position: absolute !important;
    left: 34px !important;
    top: 28px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 232, 163, .26) !important;
    background: linear-gradient(135deg, rgba(7, 16, 28, .78), rgba(27, 38, 59, .56)) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22), inset 0 0 24px rgba(255, 232, 163, .04) !important;
    backdrop-filter: blur(14px) !important;
    color: #ffe8a3 !important;
}

.ink-vibe-control.is-on {
    border-color: rgba(255, 209, 102, .74) !important;
    box-shadow: 0 18px 44px rgba(247, 146, 29, .22), 0 0 30px rgba(255, 209, 102, .22), inset 0 0 28px rgba(247, 146, 29, .10) !important;
}

.ink-vibe-control.is-audio-unavailable {
    border-color: rgba(255, 232, 163, .34) !important;
    background: linear-gradient(135deg, rgba(76, 29, 29, .68), rgba(27, 38, 59, .58)) !important;
}

.ink-vibe-control.is-audio-unavailable .ink-vibe-status {
    color: #ffd6a5 !important;
    font-size: 10px !important;
    letter-spacing: .6px !important;
    line-height: 1.15 !important;
}

.ink-vibe-copy {
    display: grid !important;
    gap: 2px !important;
    text-align: left !important;
    min-width: 108px !important;
}

.ink-vibe-kicker {
    color: rgba(255, 255, 255, .78) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.ink-vibe-status {
    color: #ffd166 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.6px !important;
    line-height: 1 !important;
}

.ink-vibe-toggle {
    appearance: none !important;
    position: relative !important;
    border: 0 !important;
    width: 74px !important;
    height: 36px !important;
    border-radius: 999px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, .12) !important;
    cursor: pointer !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
    transition: .22s ease !important;
}

.ink-vibe-toggle.is-on {
    background: linear-gradient(135deg, #f7921d, #ffd166) !important;
    box-shadow: 0 0 20px rgba(255, 209, 102, .36), inset 0 0 0 1px rgba(255, 255, 255, .24) !important;
}

.ink-vibe-switch {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fff8dc !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
    transform: translateX(0) !important;
    transition: .22s ease !important;
}

.ink-vibe-toggle.is-on .ink-vibe-switch {
    transform: translateX(34px) !important;
    background: #111827 !important;
}

.ink-vibe-bars {
    position: absolute !important;
    right: 13px !important;
    display: flex !important;
    align-items: end !important;
    gap: 3px !important;
    height: 15px !important;
    opacity: 0 !important;
    transition: .22s ease !important;
}

.ink-vibe-toggle.is-on .ink-vibe-bars {
    opacity: 1 !important;
}

.ink-vibe-bars span {
    display: block !important;
    width: 3px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    animation: inkVibeEq 820ms ease-in-out infinite !important;
}

.ink-vibe-bars span:nth-child(2) {
    animation-delay: 120ms !important;
}

.ink-vibe-bars span:nth-child(3) {
    animation-delay: 240ms !important;
}

@keyframes inkVibeEq {
    0%, 100% {
        height: 6px;
    }
    50% {
        height: 15px;
    }
}

.ink-vibe-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(3, 7, 18, .62) !important;
    backdrop-filter: blur(8px) !important;
}

.ink-vibe-popup {
    position: relative !important;
    overflow: hidden !important;
    width: min(460px, 100%) !important;
    border-radius: 28px !important;
    padding: 34px 28px 28px !important;
    text-align: center !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 22% 0%, rgba(247, 146, 29, .30), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(255, 232, 163, .16), transparent 34%),
        linear-gradient(135deg, #07101c 0%, #0d1b2a 46%, #1b263b 100%) !important;
    border: 1px solid rgba(255, 232, 163, .34) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .42), 0 0 34px rgba(247, 146, 29, .16) !important;
}

.ink-vibe-popup-glow {
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto 14px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 232, 163, .98), rgba(247, 146, 29, .62) 42%, rgba(247, 146, 29, 0) 72%) !important;
    filter: blur(.2px) !important;
    box-shadow: 0 0 34px rgba(255, 209, 102, .38) !important;
}

.ink-vibe-popup h2 {
    margin: 0 0 10px !important;
    color: #ffe8a3 !important;
    font-family: Georgia, serif !important;
    font-size: clamp(28px, 5vw, 40px) !important;
    line-height: 1.05 !important;
}

.ink-vibe-popup p {
    margin: 0 auto 22px !important;
    max-width: 340px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.ink-vibe-popup-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.ink-vibe-popup button {
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    font-weight: 900 !important;
}

.ink-vibe-popup-on {
    padding: 13px 20px !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #f7921d, #ffe8a3) !important;
    box-shadow: 0 12px 28px rgba(247, 146, 29, .28) !important;
}

.ink-vibe-popup-later {
    padding: 13px 18px !important;
    color: #ffe8a3 !important;
    background: rgba(255, 255, 255, .10) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 232, 163, .18) !important;
}

.ink-vibe-popup-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    color: rgba(255, 255, 255, .75) !important;
    background: rgba(255, 255, 255, .08) !important;
}

.ink-vibe-party-field {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border-radius: inherit !important;
}

.ink-vibe-party-field:before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 34% !important;
    width: min(620px, 86%) !important;
    height: min(300px, 56%) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, rgba(255, 232, 163, .25), rgba(247, 146, 29, .12) 42%, rgba(247, 146, 29, 0) 72%) !important;
    filter: blur(16px) !important;
    animation: inkVibePartyGlow 2.8s ease-out both !important;
}

.ink-vibe-party-piece {
    position: absolute !important;
    left: 50% !important;
    top: 45% !important;
    width: var(--ink-vibe-party-size) !important;
    height: calc(var(--ink-vibe-party-size) * 1.7) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fff4bc, #ffd166 52%, #f7921d) !important;
    box-shadow: 0 0 12px rgba(255, 232, 163, .72), 0 0 22px rgba(247, 146, 29, .30) !important;
    opacity: 0 !important;
    transform: translate3d(-50%, -50%, 0) rotate(var(--ink-vibe-party-rotate)) !important;
    animation: inkVibePartyFling 2.75s cubic-bezier(.17, .67, .25, 1) var(--ink-vibe-party-delay) both !important;
}

.ink-vibe-party-piece:nth-child(3n) {
    border-radius: 50% !important;
    height: var(--ink-vibe-party-size) !important;
    background: #ffe8a3 !important;
}

.ink-vibe-party-piece:nth-child(4n) {
    height: 2px !important;
    width: calc(var(--ink-vibe-party-size) * 2.3) !important;
    background: linear-gradient(90deg, rgba(255, 232, 163, 0), #ffe8a3, rgba(247, 146, 29, .60)) !important;
}

.ink-vibe-party-piece:after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 180% !important;
    height: 1px !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    background: rgba(255, 232, 163, .52) !important;
    box-shadow: 0 0 10px rgba(255, 232, 163, .42) !important;
}

@keyframes inkVibePartyGlow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.72);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.12);
    }
}

@keyframes inkVibePartyFling {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.45) rotate(0deg);
    }
    14% {
        opacity: 1;
    }
    64% {
        opacity: .86;
        transform: translate3d(calc(-50% + var(--ink-vibe-party-x)), calc(-50% + var(--ink-vibe-party-y)), 0) scale(1) rotate(var(--ink-vibe-party-rotate));
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--ink-vibe-party-x)), calc(-50% + var(--ink-vibe-party-y) + 44px), 0) scale(.62) rotate(calc(var(--ink-vibe-party-rotate) + 90deg));
    }
}

@media (max-width: 1050px) {
    .ink-vibe-control {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: fit-content !important;
        margin: 0 auto 18px !important;
    }
}

@media (max-width: 520px) {
    .ink-vibe-control {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: space-between !important;
        padding: 9px 10px !important;
    }

    .ink-vibe-copy {
        min-width: 0 !important;
    }

    .ink-vibe-popup {
        padding: 30px 18px 22px !important;
        border-radius: 24px !important;
    }
}