/* ======================================================
   CSS VARIABLES
====================================================== */

:root {
    --bg-main:         #070508;
    --card-bg:         #1A1414;
    --card-hover:      #2A2020;

    --accent:          #FF9F1C;
    --accent2:         #FF2E63;
    --accent3:         #FFD166;
    --accent-gradient: linear-gradient(135deg, #FF9F1C, #FF2E63);

    --text-main:       #FFF6EB;
    --text-muted:      #94a3b8;

    --border-soft:     rgba(255, 159, 28, 0.08);

    --glow1:           #FF9F1C;
    --glow2:           #FF2E63;
    --glow3:           #FFD166;
    --np-bg:           #0f1117;
}


/* ======================================================
   BASE
====================================================== */

body {
    background:   #070508;
    color:        #FFF6EB;
    font-family:  'Inter', sans-serif;
    overflow-x:   hidden;
    transition:   background .6s ease;
    padding-top:  80px;
}

/* Only apply when class is explicitly added */
body.bg-main {
    background: transparent;
}

html {
    scroll-behavior: smooth;
}

header {
    position: relative;
    z-index:  5;
}

main,
header {
    position: relative;
    z-index:  2;
}


/* ======================================================
   AMBIENT BACKGROUND LAYERS
   FIX: keep individual z-index values; removed blanket override
====================================================== */

#ambient-bg {
    position:   fixed;
    inset:      0;
    z-index:    -3;
    background: #070508;
    pointer-events: none;
}

#ambient-color {
    position:   fixed;
    inset:      0;
    z-index:    -2;
    filter:     blur(140px);
    opacity:    .75;
    transition: background .6s ease;
    pointer-events: none;
}

#ambient-overlay {
    position:       fixed;
    inset:          0;
    z-index:        -1;
    pointer-events: none;
    background:
        radial-gradient(circle at center,
            rgba(0,0,0,0) 40%,
            rgba(0,0,0,0.35) 75%,
            rgba(0,0,0,0.65) 100%),
        linear-gradient(180deg,
            rgba(0,0,0,0.25) 0%,
            rgba(0,0,0,0.05) 35%,
            rgba(0,0,0,0.15) 100%);
}

.text-gradient {
    background:             var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ======================================================
   GLASS NAVBAR
====================================================== */

.glass-nav {
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    z-index:          9999;
    padding:          14px 0;
    overflow:         hidden;

    background: linear-gradient(
        180deg,
        rgba(10, 8, 14, 0.96) 0%,
        rgba(10, 8, 14, 0.88) 100%
    );

    backdrop-filter:         blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);

    border-bottom: 1px solid rgba(255, 159, 28, 0.18);

    box-shadow:
        0 10px 50px rgba(0,0,0,0.6),
        0 0    60px rgba(255,159,28,0.07),
        inset 0 1px 0 rgba(255,255,255,0.05);

    transition:
        transform  0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        background 0.35s ease,
        box-shadow 0.35s ease;
}

/* Scrolled state */
.glass-nav.scrolled {
    background: linear-gradient(
        180deg,
        rgba(7, 5, 8, 0.98) 0%,
        rgba(7, 5, 8, 0.94) 100%
    );
    backdrop-filter:         blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow:
        0 18px 70px rgba(0,0,0,0.75),
        0 0    80px rgba(255,159,28,0.1),
        inset 0 1px 0 rgba(255,255,255,0.07);
    border-bottom-color: rgba(255,159,28,0.25);
}

/* Shimmer sweep on hover */
.glass-nav::after {
    content:    "";
    position:   absolute;
    top:        0;
    left:       -50%;
    width:      60%;
    height:     100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.055) 50%,
        transparent 80%
    );
    transform:  skewX(-18deg);
    transition: left 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.glass-nav:hover::after {
    left: 100%;
}

/* Ambient bottom glow line */
.glass-nav::before {
    content:    "";
    position:   absolute;
    bottom:     -1px;
    left:       0;
    width:      100%;
    height:     1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--glow1) 30%,
        var(--glow2) 70%,
        transparent 100%
    );
    opacity:    0.3;
    filter:     blur(2px);
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.glass-nav:hover::before,
.glass-nav.scrolled::before {
    opacity: 0.55;
}

/* Brand logo */
.brand-logo {
    position:    relative;
    display:     inline-flex;
    align-items: center;
    gap:         12px;
    text-decoration: none;
    padding:     4px 0;
    isolation:   isolate;
}

/* Ambient glow blob */
.brand-logo::before {
    content:  "";
    position: absolute;
    left:     -14px;
    top:      50%;
    transform: translateY(-50%);
    width:    110px;
    height:   64px;
    background: radial-gradient(
        ellipse,
        rgba(255,159,28,0.38),
        rgba(255,46,99,0.22),
        transparent 70%
    );
    filter:   blur(22px);
    opacity:  0.65;
    z-index:  -1;
    pointer-events: none;
    animation: brandGlow 5s ease-in-out infinite;
}

/* FIX: single @keyframes brandGlow — removed duplicate from .ai-brand */
@keyframes brandGlow {
    0%, 100% { transform: translateY(-50%) scale(0.92); opacity: 0.5;  }
    50%       { transform: translateY(-50%) scale(1.12); opacity: 0.78; }
}

.brand-logo img {
    height:    36px;
    width:     auto;
    display:   block;
    filter:
        drop-shadow(0 0 10px rgba(255,159,28,0.6))
        drop-shadow(0 2px 5px rgba(0,0,0,0.4));
    transition:
        transform  0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter     0.35s ease;
    will-change: transform;
}

.brand-logo:hover img {
    transform: translateY(-2px) scale(1.07);
    filter:
        drop-shadow(0 0 18px rgba(255,159,28,0.9))
        drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.brand-logo span {
    font-size:   22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
    background:             var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    transition: background 0.3s ease;
}

.brand-logo:hover span {
    background:             linear-gradient(135deg, #FFB84D, #FF4D8F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* Sparkle particle on hover */
.brand-logo:hover::after {
    content:       "";
    position:      absolute;
    width:         5px;
    height:        5px;
    background:    #FFD166;
    border-radius: 50%;
    left:          22px;
    top:           8px;
    pointer-events: none;
    box-shadow:    0 0 8px #FFD166, 0 0 16px #FF9F1C;
    animation:     sparkleMove 0.55s ease forwards;
}

/* FIX: single @keyframes sparkleMove — removed duplicate from .ai-brand */
@keyframes sparkleMove {
    from { transform: translate(0, 0);         opacity: 1; }
    to   { transform: translate(44px, -9px);   opacity: 0; }
}

/* Nav links */
.glass-nav .nav-link {
    color:       var(--text-muted);
    font-size:   14px;
    font-weight: 500;
    padding:     6px 4px;
    position:    relative;
    transition:  color 0.2s ease;
}

.glass-nav .nav-link::after {
    content:       "";
    position:      absolute;
    bottom:        0;
    left:          0;
    width:         0;
    height:        1.5px;
    background:    var(--accent-gradient);
    border-radius: 2px;
    transition:    width 0.25s ease;
}

.glass-nav .nav-link:hover        { color: #FFF6EB; }
.glass-nav .nav-link:hover::after { width: 100%; }
.glass-nav .nav-link.active       { color: var(--accent); }
.glass-nav .nav-link.active::after { width: 100%; }

/* Nav CTA */
.glass-nav .btn-nav-cta {
    display:      inline-flex;
    align-items:  center;
    gap:          7px;
    padding:      9px 20px;
    border-radius: 50px;
    border:        none;
    font-size:     13px;
    font-weight:   600;
    letter-spacing: 0.2px;
    color:         white;
    background:    var(--accent-gradient);
    cursor:        pointer;
    transition:
        transform  0.2s ease,
        box-shadow 0.2s ease,
        filter     0.2s ease;
    box-shadow:
        0 4px 14px rgba(255,159,28,0.3),
        0 0   24px rgba(255,46,99,0.15);
}

.glass-nav .btn-nav-cta:hover {
    transform:  translateY(-1px);
    filter:     brightness(1.07);
    box-shadow:
        0 7px 22px rgba(255,159,28,0.45),
        0 0   34px rgba(255,46,99,0.25);
}

.glass-nav .btn-nav-cta:active { transform: scale(0.96); }

/* Mobile hamburger */
.glass-nav .navbar-toggler {
    border:        1px solid rgba(255,159,28,0.25);
    border-radius: 10px;
    padding:       8px 10px;
    transition:    all 0.2s ease;
}

.glass-nav .navbar-toggler:hover {
    background:    rgba(255,159,28,0.1);
    border-color:  rgba(255,159,28,0.5);
}

.glass-nav .navbar-toggler-icon { filter: invert(1); }

@media (max-width: 991px) {
    .glass-nav .navbar-collapse {
        margin-top:      12px;
        padding:         16px 20px;
        background:      rgba(10, 8, 14, 0.97);
        border:          1px solid rgba(255,159,28,0.12);
        border-radius:   16px;
        backdrop-filter: blur(20px);
    }
    .glass-nav .nav-link {
        padding:        10px 0;
        border-bottom:  1px solid rgba(255,255,255,0.05);
    }
    .glass-nav .nav-link:last-child { border-bottom: none; }
}


/* ======================================================
   HEADER
====================================================== */

header h1 { letter-spacing: -0.5px; }

header p {
    max-width: 600px;
    margin:    auto;
    color:     var(--text-muted);
}

header h4 {
    letter-spacing: -0.3px;
    max-width:      600px;
    margin:         auto;
    color:          #FFB84D;
}


/* ======================================================
   PROMPT CARDS
====================================================== */

.prompt-card {
    background:    #181818;
    border:        1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow:      visible;
    position:      relative;
    opacity:       0;
    transition:    opacity .45s ease, transform .45s ease;
}

.prompt-card.show {
    opacity:   1;
    transform: translateY(0);
}

.prompt-card .card-body  { background: var(--card-bg); }

.prompt-card:hover {
    transform:  translateY(-6px);
    background: var(--card-hover);
    box-shadow: 0 10px 30px rgba(255,159,28,.15);
}

.prompt-box {
    background: #121212;
    min-height: 110px;
}

.prompt-text {
    font-size:   14px;
    color:       #cbd5f5;
    line-height: 1.5;
}

.prompt-box {
    background:    #0e0e13;
    border:        1px solid var(--border-soft);
    border-radius: 10px;
    padding:       12px;
    max-height:    110px;
    overflow:      hidden;
}


/* ======================================================
   COMPARISON SLIDER
====================================================== */

.comparison-slider {
    width:             100%;
    height:            260px;
    position:          relative;
    overflow:          hidden;
    border-radius:     16px;
    background:        #000;
    cursor:            ew-resize;
    user-select:       none;
    will-change:       transform;
    border:            1px solid rgba(255,159,28,0.08);
    transition:        border-color 0.3s ease, box-shadow 0.3s ease;
}

.comparison-slider:hover {
    border-color: rgba(255,159,28,0.22);
    box-shadow:
        0 0 0 1px rgba(255,159,28,0.1),
        0 12px 40px rgba(0,0,0,0.5);
}

/* Images */
.before-img,
.after-img {
    position:          absolute;
    inset:             0;
    width:             100%;
    height:            100%;
    object-fit:        cover;
    pointer-events:    none;
    transition:        transform 0.6s ease;
}

.comparison-slider:hover .before-img,
.comparison-slider:hover .after-img {
    transform: scale(1.015);
}

.after-img {
    z-index:   2;
    clip-path: inset(0 0 0 50%); /* shows right half only */
}

/* Divider */
.slider-divider {
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       50%;
    width:      2px;
    transform:  translateX(-50%);
    z-index:    3;
    pointer-events: none;
    will-change: left;
    background: linear-gradient(180deg,
        rgba(255,255,255,1)   0%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,1)   100%);
    box-shadow:
        0 0  4px rgba(255,255,255,0.9),
        0 0 12px rgba(255,159,28,0.7),
        0 0 28px rgba(255,159,28,0.4),
        0 0 55px rgba(255,46,99,0.25);
}

.comparison-slider.dragging .slider-divider {
    box-shadow:
        0 0  6px rgba(255,255,255,1),
        0 0 18px rgba(255,159,28,1),
        0 0 40px rgba(255,159,28,0.6),
        0 0 80px rgba(255,46,99,0.4);
}

.divider-core {
    width:      100%;
    height:     100%;
    background: white;
    box-shadow: 0 0 4px rgba(255,255,255,0.5);
}

@keyframes dividerSettle {
    0%   { transform: translateX(-50%) scaleX(1);   }
    35%  { transform: translateX(-50%) scaleX(1.6); }
    65%  { transform: translateX(-50%) scaleX(0.9); }
    100% { transform: translateX(-50%) scaleX(1);   }
}

.slider-divider.settle {
    animation: dividerSettle 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Handle */
.slider-handle {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    z-index:       4;
    width:         56px;
    height:        56px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 65%),
        linear-gradient(135deg, #FF9F1C, #FF2E63);
    display:        flex;
    align-items:    center;
    justify-content: center;
    box-shadow:
        0  6px 20px rgba(0,0,0,0.6),
        0  0  30px rgba(255,159,28,0.7),
        0  0  60px rgba(255,46,99,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3);
    cursor:      grab;
    will-change: transform, left;
    transition:
        transform  0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.25s ease;
}

/* CSS arrow chevrons */
.slider-handle::before,
.slider-handle::after {
    content:  "";
    position: absolute;
    top:      50%;
    width:    0;
    height:   0;
    border-style: solid;
    transform: translateY(-50%);
    filter:   drop-shadow(0 0 3px rgba(255,255,255,0.6));
    opacity:  0.9;
}

.slider-handle::before {
    left:         9px;
    border-width: 5px 7px 5px 0;
    border-color: transparent white transparent transparent;
}

.slider-handle::after {
    right:        9px;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent white;
}

.comparison-slider:hover .slider-handle {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow:
        0  8px 26px rgba(0,0,0,0.7),
        0  0  45px rgba(255,159,28,0.95),
        0  0  90px rgba(255,46,99,0.6),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.comparison-slider.dragging .slider-handle {
    transform: translate(-50%, -50%) scale(1.2);
    cursor:    grabbing;
    box-shadow:
        0 10px 32px rgba(0,0,0,0.75),
        0  0  65px rgba(255,159,28,1),
        0  0 130px rgba(255,46,99,0.85),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Logo inside handle */
.slider-handle img {
    height:    26px;
    width:     auto;
    position:  relative;
    z-index:   1;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,1))
        drop-shadow(0 2px 5px rgba(0,0,0,0.5));
    transition: transform 0.25s ease;
}

.slider-handle.has-logo::before,
.slider-handle.has-logo::after { display: none; }

.comparison-slider:hover .slider-handle img { transform: scale(1.1); }

@keyframes handlePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 6px 20px rgba(0,0,0,.6),
            0 0 30px rgba(255,159,28,.7),
            0 0 60px rgba(255,46,99,.4);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 8px 26px rgba(0,0,0,.7),
            0 0 50px rgba(255,159,28,1),
            0 0 100px rgba(255,46,99,.7);
    }
}

.slider-handle.pulse { animation: handlePulse 0.8s ease; }

/* Before / After badge labels */
.badge-overlay {
    position:      absolute;
    bottom:        12px;
    padding:       4px 11px;
    font-size:     10px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color:         #FFF6EB;
    background:    rgba(7,5,8,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    border:        1px solid rgba(255,255,255,0.08);
    z-index:       5;
    opacity:       0.75;
    transition:    opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.badge-overlay.before {
    right:        12px;
    border-color: rgba(255,159,28,0.2);
    color:        #FFD166;
}

.badge-overlay.after {
    left:         12px;
    border-color: rgba(255,46,99,0.2);
    color:        #ff9de2;
}

.comparison-slider:hover .badge-overlay {
    opacity:   1;
    transform: translateY(-2px);
}

/* Drag hint */
.slider-hint {
    position:      absolute;
    bottom:        12px;
    left:          50%;
    transform:     translateX(-50%);
    font-size:     10px;
    font-weight:   600;
    letter-spacing: 0.5px;
    color:         rgba(255,255,255,0.6);
    background:    rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    padding:       3px 10px;
    border-radius: 20px;
    z-index:       5;
    pointer-events: none;
    animation:     hintFade 2.5s ease 1s forwards;
}

@keyframes hintFade {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}


/* ======================================================
   BUTTONS — CATEGORY FILTER
   FIX: merged duplicate .btn-filter.active and .more-btn rules
====================================================== */

.category-wrapper {
    position:        relative;
    z-index:         5;
    overflow:        hidden;
    padding:         10px 0 18px;
    margin:          20px 0;
    text-align:      center;
}

/* FIX: removed ::before and ::after since they're set to display:none elsewhere.
   Keeping them gone to avoid dead CSS. */

.category-scroll {
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    justify-content: center;
    transition:      all .3s ease;
}

.category-scroll::-webkit-scrollbar { display: none; }

.btn-filter {
    position:      relative;
    background:    #14141a;
    border:        1px solid rgba(255,255,255,0.08);
    color:         #9ca3af;
    border-radius: 999px;
    padding:       8px 16px;
    font-size:     13px;
    transition:    all 0.25s ease;
}

.btn-filter:hover {
    color:        #fff;
    border-color: rgba(255,159,28,0.5);
}

/* FIX: merged both .btn-filter.active blocks into one */
.btn-filter.active {
    background: linear-gradient(135deg, #FF9F1C, #FF2E63);
    color:      #fff;
    box-shadow:
        0 0 10px rgba(255,159,28,.6),
        0 0 20px rgba(255,46,99,.4);
}

.btn-filter.active::after {
    content:       "";
    position:      absolute;
    inset:         -2px;
    border-radius: 50px;
    background:    linear-gradient(135deg, #FF9F1C, #FF2E63);
    filter:        blur(10px);
    opacity:       0.6;
    z-index:       -1;
}

.btn-filter.clicked {
    animation:  categoryPulse .5s ease;
    transform:  scale(0.92);
    transition: transform .15s ease;
}

@keyframes categoryPulse {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1);    }
}

/* Hidden state */
.hidden-cat { display: none !important; }

/* FIX: merged both .more-btn blocks into one */
.more-btn {
    background:      rgba(255,255,255,0.08);
    color:           #ccc;
    border:          1px dashed rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    font-weight:     600;
    position:        relative;
    overflow:        hidden;
    transition:      all .3s ease;
}

.more-btn:hover { color: #fff; }

.more-btn::after {
    content:       "";
    position:      absolute;
    width:         0;
    height:        0;
    border-radius: 50%;
    background:    rgba(255,255,255,0.25);
    transform:     translate(-50%, -50%);
    transition:    width 0.4s ease, height 0.4s ease;
}

.more-btn:active::after {
    width:  200px;
    height: 200px;
}

.more-btn.active-more {
    background:  linear-gradient(135deg, #FF2E63, #FF9F1C);
    color:       white;
    transform:   rotate(90deg) scale(1.1);
    box-shadow:
        0 0 12px rgba(255,46,99,.5),
        0 0 25px rgba(255,159,28,.3);
}

/* Category anim */
.category-anim-show {
    animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Category sheet (mobile) */
.category-sheet {
    position:             fixed;
    bottom:               -100%;
    left:                 0;
    width:                100%;
    height:               60%;
    background:           #0b0b0f;
    border-top-left-radius:  20px;
    border-top-right-radius: 20px;
    transition:           bottom 0.4s ease;
    z-index:              999;
}

.category-sheet.active { bottom: 0; }

.sheet-content {
    padding:         20px;
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    justify-content: center;
}

/* Mobile swipe scroll */
@media (max-width: 768px) {
    .category-wrapper { overflow-x: auto; }

    #categoryWrapper {
        display:     flex;
        flex-wrap:   nowrap;
        gap:         10px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    #categoryWrapper .btn-filter {
        flex:             0 0 auto;
        scroll-snap-align: start;
        white-space:      nowrap;
    }

    #categoryWrapper::-webkit-scrollbar { display: none; }
}


/* ======================================================
   ACTION BUTTONS
====================================================== */

.btn-action {
    height:          46px;
    border-radius:   12px;
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-weight:     500;
    letter-spacing:  .2px;
    background:      linear-gradient(135deg, #FF9F1C, #FF2E63);
    color:           white;
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-action:hover {
    transform:  translateY(-1px);
    filter:     brightness(1.05);
    box-shadow:
        0 6px 18px rgba(255,159,28,.35),
        0 0   24px rgba(255,46,99,.25);
}

.btn-action:active {
    transform:  scale(0.96);
    box-shadow: 0 3px 10px rgba(255,159,28,.25);
}

.btn-action i { font-size: 14px; }

/* Like button */
.btn-action-heart {
    height:          46px;
    min-width:       72px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    border-radius:   12px;
    background:      #14141a;
    border:          1px solid rgba(255,255,255,.08);
    color:           #9ca3af;
    font-weight:     500;
    will-change:     transform;
    transition:
        transform        0.15s ease-out,
        background-color 0.18s ease,
        color            0.18s ease,
        box-shadow       0.18s ease;
}

.btn-action-heart:hover {
    color:        #ff4d6d;
    border-color: #ff4d6d;
    box-shadow:   0 4px 14px rgba(255,77,109,.25);
}

.btn-action-heart.liked {
    background: #ff2e63;
    color:      white;
    box-shadow: 0 4px 12px rgba(255,46,99,0.35);
}

.btn-action-heart.liked i,
.heart-pop {
    animation: heartPop .25s ease;
}

@keyframes heartPop {
    0%   { transform: scale(1);    }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1);    }
}

/* Share button */
.btn-action-share {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           46px;
    height:          46px;
    border-radius:   12px;
    border:          1px solid rgba(255,159,28,0.2);
    background:      #14141a;
    color:           #FF9F1C;
    font-size:       15px;
    cursor:          pointer;
    outline:         none;
    overflow:        hidden;
    flex-shrink:     0;
    transition:      all 0.25s ease;
}

.btn-action-share::before {
    content:       "";
    position:      absolute;
    inset:         0;
    border-radius: 12px;
    background:    linear-gradient(135deg, rgba(255,159,28,0.18), rgba(255,46,99,0.12));
    opacity:       0;
    transition:    opacity 0.25s ease;
}

.btn-action-share:hover {
    background:  linear-gradient(135deg, #FF9F1C, #FF2E63);
    border-color: transparent;
    color:       white;
    transform:   translateY(-2px) scale(1.06);
    box-shadow:
        0 6px 18px rgba(255,159,28,0.4),
        0 0 0 3px rgba(255,159,28,0.12);
}

.btn-action-share:hover::before { opacity: 1; }

.btn-action-share:hover i  { transform: rotate(20deg) scale(1.1); }
.btn-action-share:active   { transform: translateY(0) scale(0.95); }

.btn-action-share i {
    position:   relative;
    z-index:    1;
    transition: transform 0.25s ease;
    font-size:  14px;
}

.btn-action-share.copied {
    background:   linear-gradient(135deg, #22c55e, #16a34a);
    border-color: transparent;
    color:        white;
    box-shadow:   0 6px 18px rgba(34,197,94,0.4);
    pointer-events: none;
}

/* Tooltip */
.btn-action-share::after {
    content:     "Share";
    position:    absolute;
    bottom:      calc(100% + 9px);
    left:        50%;
    transform:   translateX(-50%) translateY(5px);
    background:  #1A1414;
    color:       #FFD166;
    font-size:   11px;
    font-weight: 600;
    padding:     4px 9px;
    border-radius: 6px;
    border:      1px solid rgba(255,159,28,0.22);
    white-space: nowrap;
    opacity:     0;
    pointer-events: none;
    transition:  all 0.2s ease;
    z-index:     10;
}

.btn-action-share:hover::after {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

.btn-action-share.copied::after {
    content:     "Copied!";
    background:  #052e16;
    color:       #4ade80;
    border-color: rgba(34,197,94,0.25);
    opacity:     1;
    transform:   translateX(-50%) translateY(0);
}


/* ======================================================
   CATEGORY SLIDER (home page)
====================================================== */

.slider-wrapper {
    overflow:  hidden;
    position:  relative;
    width:     100%;
}

.slider-track {
    display:    flex;
    gap:        20px;
    transition: transform .6s ease;
}

/* FIX: scoped to .slider-track to avoid conflict with .category-grid .category-card */
.slider-track .category-card {
    flex:          0 0 calc(25% - 15px);
    min-width:     calc(25% - 15px);
    height:        220px;
    border-radius: 16px;
    overflow:      hidden;
    position:      relative;
    cursor:        pointer;
    background:    #111;
    border:        1px solid rgba(255,255,255,0.06);
    transition:    all .35s ease;
}

.slider-track .category-card img { width: 100%; height: 100%; object-fit: cover; }

.slider-track .category-card:hover img { transform: scale(1.08); }

.slider-track .category-card:hover {
    transform:  translateY(-6px);
    box-shadow: 0 15px 40px rgba(255,159,28,.25);
}

.slide-btn {
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    width:         42px;
    height:        42px;
    border-radius: 50%;
    border:        none;
    background:    rgba(20,20,25,.8);
    color:         white;
    font-size:     18px;
    cursor:        pointer;
    backdrop-filter: blur(8px);
    z-index:       5;
}

.slide-btn.left  { left:  0; }
.slide-btn.right { right: 0; }
.slide-btn:hover { background: #FF9F1C; }

@media (max-width: 992px) {
    .slider-track .category-card {
        flex:      0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
}

@media (max-width: 576px) {
    .slider-track .category-card {
        flex:      0 0 100%;
        min-width: 100%;
    }
}


/* ======================================================
   CATEGORY GRID (explore page)
   FIX: scoped .category-card to .category-grid to avoid
   overriding the slider's .category-card above
====================================================== */

.category-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   16px;
}

/* FIX: shared base styles for .category-card in both contexts */
.category-card {
    position:      relative;
    border-radius: 16px;
    overflow:      hidden;
    cursor:        pointer;
    border:        1px solid rgba(255,255,255,0.06);
    transition:    all 0.3s ease;
}

.category-grid .category-card {
    height:     150px;
    background: #0f0f14;
}

.category-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.category-card:hover img    { transform: scale(1.07); }

.category-card:hover {
    transform:  translateY(-5px);
    box-shadow:
        0 10px 25px rgba(255,159,28,.25),
        0 0   40px rgba(255,46,99,.15);
}

.category-card.active-cat {
    border:     2px solid #FF9F1C;
    box-shadow:
        0 0 25px rgba(255,159,28,.6),
        0 0 60px rgba(255,46,99,.3);
}

/* FIX: single .card-overlay — merged duplicate */
.card-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    align-items:     center;
    padding:         16px;
    text-align:      center;
    background:      linear-gradient(to top, rgba(0,0,0,.85) 10%, rgba(0,0,0,.4) 45%, transparent 70%);
}

.card-overlay h3 {
    color:       white;
    font-size:   18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-overlay .likes {
    color:     #f59e0b;
    font-size: 14px;
}

.category-grid .category-card:first-child img {
    object-fit: contain;
    padding:    20px;
}


/* ======================================================
   SKELETON LOADER
====================================================== */

.skeleton-card {
    border-radius: 16px;
    overflow:      hidden;
    position:      relative;
    background:    linear-gradient(145deg, #14141a, #0f0f14);
    border:        1px solid rgba(255,255,255,0.06);
    box-shadow:
        0 10px 35px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.04);
    will-change:   transform, opacity;
    transform:     translateZ(0);
}

.skeleton-card.loaded {
    animation: skeletonBreath 2.5s ease-in-out infinite;
}

@keyframes skeletonBreath {
    0%, 100% { transform: scale(1);    }
    50%       { transform: scale(1.01); }
}

/* Shimmer */
.skeleton-card::before {
    content:    "";
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        100deg,
        transparent 40%,
        rgba(255,255,255,0.04) 48%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 52%,
        transparent 60%
    );
    background-size: 220% 100%;
}

.skeleton-card.loaded::before {
    animation: shimmerFlow 2.2s linear infinite;
}

@keyframes shimmerFlow {
    100% { background-position: -220% 0; }
}

/* Adaptive glow border */
.skeleton-card::after {
    content:       "";
    position:      absolute;
    inset:         -1px;
    border-radius: inherit;
    background:    linear-gradient(135deg, var(--glow1), var(--glow2), var(--glow3));
    opacity:       0.06;
    filter:        blur(6px);
    z-index:       -1;
}

.skeleton-card.loaded::after { opacity: 0.1; }

/* Skeleton sweep */
.skeleton-card .sweep {
    position: absolute;
    inset:    0;
    background: linear-gradient(90deg, transparent, rgba(255,159,28,0.15), transparent);
    animation:  premiumSweep 3s ease-in-out infinite;
}

@keyframes premiumSweep {
    0%   { opacity: 0; transform: translateX(-40%); }
    50%  { opacity: 0.08; }
    100% { opacity: 0; transform: translateX(140%); }
}

.skeleton-img {
    aspect-ratio: 16 / 9;
    height:       auto;
    background:   #1c1c24;
    position:     relative;
    overflow:     hidden;
}

.skeleton-img::after {
    content:    "";
    position:   absolute;
    inset:      0;
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.08), transparent 70%);
}

.skeleton-body {
    padding: 12px 14px;
}

.skeleton-line {
    height:        8px;
    border-radius: 4px;
    background:    linear-gradient(180deg, #1c1c24, #17171d);
    margin-bottom: 8px;
    will-change:   transform;
    transform:     translateZ(0);
}

.skeleton-actions {
    display:    flex;
    gap:        10px;
    margin-top: 12px;
}

.skeleton-btn {
    height:        36px;
    flex:          1;
    border-radius: 10px;
    background:    #1c1c24;
}

.skeleton-card.fade-out {
    opacity:    0;
    transform:  scale(0.98);
    transition: all 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-card,
    .skeleton-card::before { animation: none; }
}


/* ======================================================
   PROGRESSIVE IMAGE LOADING
====================================================== */

.progressive {
    filter:     blur(25px);
    opacity:    0.5;
    transition: filter 0.7s ease, opacity 0.5s ease;
}

.progressive.loaded {
    filter:  blur(0);
    opacity: 1;
}


/* ======================================================
   FLOATING ACTION BUTTONS
====================================================== */

.floating-actions {
    position:        fixed;
    right:           18px;
    bottom:          22px;
    display:         flex;
    flex-direction:  column;
    gap:             12px;
    z-index:         999;
}

.float-btn {
    width:           46px;
    height:          46px;
    border-radius:   50%;
    border:          1px solid rgba(255,255,255,0.15);
    cursor:          pointer;
    color:           white;
    font-size:       16px;
    background:      rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    box-shadow:      0 4px 15px rgba(0,0,0,0.25);
    opacity:         0;
    transform:       translateY(20px);
    position:        relative;
    overflow:        hidden;
    transition:      all 0.25s ease;
}

.float-btn::before {
    content:       "";
    position:      absolute;
    inset:         -2px;
    border-radius: 50%;
    background:    linear-gradient(135deg, var(--glow1), var(--glow2), var(--glow3));
    opacity:       0;
    filter:        blur(10px);
    transition:    opacity 0.25s ease;
    z-index:       -1;
}

.float-btn.show {
    opacity:   1;
    transform: translateY(0);
    animation: glowPulse 2.5s ease-in-out infinite;
}

.float-btn.show::before { opacity: 0.6; }
.float-btn:hover { transform: scale(1.08); }
.float-btn:hover::before { opacity: 1; filter: blur(14px); }

/* FIX: single @keyframes glowPulse — removed duplicate */
@keyframes glowPulse {
    0%, 100% { transform: scale(1);    }
    50%       { transform: scale(1.05); }
}

.scroll-wrapper {
    position: relative;
    width:    52px;
    height:   52px;
}

.progress-ring {
    position:  absolute;
    top:       -3px;
    left:      -3px;
    transform: rotate(-90deg);
}

.progress-bg {
    fill:         none;
    stroke:       rgba(255,255,255,0.15);
    stroke-width: 3;
}

.progress-bar {
    fill:             none;
    stroke:           #FF9F1C;
    stroke-width:     3;
    stroke-linecap:   round;
    stroke-dasharray: 138;
    stroke-dashoffset: 138;
    transition:       stroke-dashoffset 0.15s linear;
}


/* ======================================================
   EXPLORE SECTION
====================================================== */

.explore-prompts {
    margin-top:  80px;
    text-align:  center;
}

.explore-prompts h2 { font-weight: 700; margin-bottom: 5px; }
.explore-prompts p  { color: #94a3b8; margin-bottom: 30px; }

#promptsContainer {
    overflow:   visible;
    transition: opacity .3s ease, transform .3s ease;
}

#promptsContainer.fade-out {
    opacity:   0;
    transform: translateY(10px);
}

#top6 { scroll-margin-top: 100px; }


/* ======================================================
   SECTION HEADER
====================================================== */

.section-header   { position: relative; }

.section-title {
    font-size:      32px;
    font-weight:    700;
    letter-spacing: -0.5px;
    margin-bottom:  6px;
}

.section-subtitle {
    font-size:     14px;
    color:         var(--text-muted);
    margin-bottom: 0;
}

.section-line {
    width:         80px;
    height:        3px;
    margin:        0 auto 18px;
    border-radius: 50px;
    background:    var(--accent-gradient);
    box-shadow:
        0 0 12px rgba(255,159,28,.6),
        0 0 30px rgba(255,46,99,.3);
}

.cta-lead {
    font-size:      18px;
    font-weight:    600;
    color:          var(--text-main);
    letter-spacing: 0.2px;
}

.ai-generator-link {
    color:           white;
    margin-left:     20px;
    font-weight:     500;
    text-decoration: none;
}

.ai-generator-link:hover { color: #7c3aed; }


/* ======================================================
   FOOTER
====================================================== */

.pg-footer {
    position:   relative;
    padding:    100px 0 30px;
    background: transparent;
    overflow:   hidden;
}

.footer-inner {
    display:         flex;
    justify-content: space-between;
    gap:             80px;
    flex-wrap:       wrap;
    position:        relative;
    z-index:         2;
}

.footer-brand-block { max-width: 420px; }

.footer-logo {
    font-size:      24px;
    font-weight:    700;
    background:     var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom:  12px;
    display:        flex;
    align-items:    center;
    gap:            12px;
}

.footer-logo img {
    height: 36px;
    width:  auto;
    filter:
        drop-shadow(0 0 8px rgba(255,159,28,0.5))
        drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.footer-desc {
    margin-top:  14px;
    color:       var(--text-muted);
    line-height: 1.7;
}

.footer-grid {
    display:               grid;
    grid-template-columns: repeat(3, 160px);
    gap:                   50px;
}

.footer-col h4 { color: var(--accent3); margin-bottom: 12px; }

.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin: 8px 0; }

.footer-col a {
    color:           var(--text-muted);
    text-decoration: none;
    display:         inline-block;
    font-size:       14px;
    transition:      all 0.2s ease;
}

.footer-col a:hover { color: var(--accent); transform: translateX(3px); }

.footer-social {
    margin-top: 18px;
    display:    flex;
    gap:        10px;
}

.footer-social a {
    width:           36px;
    height:          36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   8px;
    background:      rgba(255,255,255,0.05);
    border:          1px solid rgba(255,255,255,0.08);
    transition:      all 0.2s ease;
}

.footer-social a:hover {
    background: var(--accent-gradient);
    transform:  translateY(-2px);
}

.footer-bottom {
    position:    relative;
    z-index:     2;
    margin-top:  50px;
    padding-top: 20px;
    text-align:  center;
    border-top:  1px solid rgba(255,255,255,0.06);
    color:       var(--text-muted);
    font-size:   14px;
}

.footer-glass-strip {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         60px;
    pointer-events: none;
    background:     linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02), transparent);
    opacity:        .22;
    backdrop-filter: blur(6px);
}

.footer-ambient-glow {
    position:       absolute;
    inset:          0;
    background:     radial-gradient(circle at 50% 0%, rgba(255,159,28,0.06), transparent 70%);
    pointer-events: none;
    z-index:        0;
}

.footer-mouse-light {
    position:       absolute;
    width:          350px;
    height:         350px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(255,159,28,0.1), transparent 70%);
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.3s ease;
    filter:         blur(50px);
    z-index:        1;
}

.footer-manual {
    width:       100%;
    text-align:  center;
    margin-top:  40px;
    margin-bottom: 10px;
}

.footer-manual a {
    color:           var(--accent3);
    font-size:       16px;
    font-weight:     500;
    text-decoration: none;
    transition:      .2s ease;
}

.footer-manual a:hover { color: var(--accent); }

/* FIX: removed duplicate .ai-brand::before — now uses .brand-logo::before and
   shared @keyframes brandGlow above */
.ai-brand { position: relative; }

.ai-brand:hover::after {
    content:       "";
    position:      absolute;
    width:         6px;
    height:        6px;
    background:    #FFD166;
    border-radius: 50%;
    left:          20px;
    top:           10px;
    box-shadow:    0 0 10px #FFD166, 0 0 20px #FF9F1C;
    animation:     sparkleMove .6s ease forwards;
}

@media (max-width: 992px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) {
    .footer-inner      { flex-direction: column; gap: 40px; }
    .footer-grid       { grid-template-columns: repeat(2, 1fr); }
    .footer-brand-block { max-width: 100%; }
}

@media (max-width: 576px) {
    .footer-grid    { grid-template-columns: 1fr; }
    .footer-social  { justify-content: center; }
}


/* ======================================================
   SHARE RIBBON & HIGHLIGHT
====================================================== */

.shared-ribbon {
    position:        absolute;
    top:             20px;
    left:            -38px;
    background:      linear-gradient(135deg, #FF9F1C, #FF2E63);
    color:           white;
    padding:         6px 52px;
    font-size:       0.7rem;
    font-weight:     700;
    letter-spacing:  0.8px;
    text-transform:  uppercase;
    transform:       rotate(-45deg);
    z-index:         5;
    opacity:         0;
    box-shadow:
        0 4px 16px rgba(255,159,28,0.45),
        0 8px 30px rgba(255,46,99,0.3);
    pointer-events:  none;
}

.animate-ribbon { animation: ribbonFadeIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }

@keyframes ribbonFadeIn {
    0%   { opacity: 0; transform: rotate(-45deg) scale(0.75) translateY(8px); }
    65%  { opacity: 1; transform: rotate(-45deg) scale(1.06); }
    100% { opacity: 1; transform: rotate(-45deg) scale(1);    }
}

.shared-highlight { animation: highlightPulse 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); }

@keyframes highlightPulse {
    0%   { transform: scale(0.97); box-shadow: 0 0 0px rgba(255,159,28,0);  }
    35%  { transform: scale(1.025); box-shadow: 0 0 30px rgba(255,159,28,0.5), 0 0 60px rgba(255,46,99,0.3); }
    70%  { transform: scale(1.01);  box-shadow: 0 0 20px rgba(255,159,28,0.3), 0 0 40px rgba(255,46,99,0.15); }
    100% { transform: scale(1);    box-shadow: 0 0 0px rgba(255,159,28,0);  }
}


/* ======================================================
   UNIVERSAL PREMIUM TOAST
   FIX: removed dead #shareToast and .share-toast blocks
   — using only .pg-toast
====================================================== */

.pg-toast {
    position:        fixed;
    top:             24px;
    right:           24px;
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         14px 22px;
    border-radius:   50px;
    font-size:       0.9rem;
    font-weight:     600;
    letter-spacing:  0.3px;
    color:           #fff;
    background:      rgba(20, 20, 25, 0.75);
    backdrop-filter: blur(14px);
    opacity:         0;
    transform:       translateY(-20px) scale(0.95);
    transition:      all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index:         99999;
    pointer-events:  none;
    border:          2px solid transparent;
    background-clip: padding-box;
}

/* Animated gradient border */
.pg-toast::before {
    content:          "";
    position:         absolute;
    inset:            -2px;
    border-radius:    inherit;
    background:       linear-gradient(120deg, #ff9f1c, #ff2e63, #6366f1);
    background-size:  300% 300%;
    animation:        toastBorderMove 4s linear infinite;
    z-index:          -1;
}

@keyframes toastBorderMove {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

.pg-toast.show {
    opacity:        1;
    transform:      translateY(0) scale(1);
    pointer-events: auto;
}

.pg-toast i           { font-size: 16px; }
.pg-toast.success i   { color: #22c55e; }
.pg-toast.error i     { color: #ef4444; }
.pg-toast.info i      { color: #3b82f6; }

@media (max-width: 768px) {
    .pg-toast {
        top:       auto;
        bottom:    24px;
        right:     50%;
        transform: translateX(50%) translateY(20px) scale(0.95);
    }
    .pg-toast.show {
        transform: translateX(50%) translateY(0) scale(1);
    }
}


/* ======================================================
   AI LINKS
====================================================== */

.best-result-text {
    margin-top:  20px;
    font-weight: 500;
    color:       var(--accent3);
}

.ai-link {
    position:        relative;
    text-decoration: none;
    font-weight:     600;
    color:           var(--accent);
    transition:      all 0.3s ease;
}

.ai-link:hover {
    color:       var(--accent3);
    text-shadow:
        0 0 8px  rgba(255,159,28,0.7),
        0 0 18px rgba(255,46,99,0.4);
}

.ai-link::after {
    content:       "";
    position:      absolute;
    width:         0%;
    height:        2px;
    left:          0;
    bottom:        -3px;
    background:    var(--accent-gradient);
    transition:    width 0.3s ease;
}

.ai-link:hover::after { width: 100%; }

.ai-link::before {
    content:        attr(data-tooltip);
    position:       absolute;
    bottom:         130%;
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--card-bg);
    color:          var(--text-main);
    padding:        5px 10px;
    font-size:      12px;
    border-radius:  6px;
    border:         1px solid var(--border-soft);
    opacity:        0;
    pointer-events: none;
    transition:     0.3s ease;
    white-space:    nowrap;
}

.ai-link:hover::before { opacity: 1; }

.ai-link.with-logo {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}

.ai-logo {
    width:      16px;
    height:     16px;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.ai-link:hover .ai-logo { transform: scale(1.12); }

/* Classy links */
.classy-links {
    display:     inline-flex;
    align-items: center;
    gap:         14px;
}

.classy-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-weight:     600;
    color:           var(--accent);
    text-decoration: none;
    transition:      all 0.25s ease;
}

.ext-arrow {
    font-size:  14px;
    opacity:    0.8;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.divider { opacity: 0.4; font-weight: 500; }

.classy-link:hover             { color: var(--accent3); }
.classy-link:hover .ai-logo    { transform: scale(1.1); }
.classy-link:hover .ext-arrow  { transform: translate(3px, -3px); opacity: 1; }


/* ======================================================
   NAV PANEL (SIDE DRAWER)
====================================================== */

#navPanel {
    position:  fixed;
    top:       0;
    left:      0;
    width:     380px;
    height:    100vh;
    background: #0f1117;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index:   100000;
}

#navPanel.open { transform: translateX(0); }

#npScrim {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    opacity:    0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index:    99999;
}

#npScrim.show { opacity: 1; visibility: visible; }


/* ======================================================
   COOKIE MODAL BACKDROP
====================================================== */

.modal-backdrop.show {
    background:      rgba(7,5,8,0.85);
    backdrop-filter: blur(8px);
}
/* =========================
   SHARED BADGE (LEFT + RIGHT)
========================= */
.shared-banner {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    background: linear-gradient(135deg, #FF9F1C, #FF2E63);
    color: white;

    padding: 10px 18px;
    border-radius: 30px;

    font-size: 13px;
    font-weight: 600;

    box-shadow: 0 8px 25px rgba(255,46,99,.3);

    opacity: 0;
    animation: bannerFade .4s ease forwards;
}

@keyframes bannerFade {
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* ======================================================
   SHARED BADGE SYSTEM
   Add these rules to your style.css
   (replaces the old .shared-ribbon system)
====================================================== */

/* Base badge — positioned absolute on the card */
.shared-badge {
    position:        absolute;
    z-index:         10;
    display:         inline-flex;
    align-items:     center;
    gap:             5px;

    padding:         5px 12px;
    border-radius:   20px;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  0.5px;
    text-transform:  uppercase;
    white-space:     nowrap;

    /* glass dark base */
    background:      rgba(10, 8, 14, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* start invisible — .show triggers the fade-in */
    opacity:         0;
    transform:       translateY(-6px);
    transition:
        opacity   0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);

    pointer-events:  none;
}

/* Left badge — 🔥 Shared */
.shared-badge.left {
    top:          10px;
    left:         10px;
    border:       1px solid rgba(255, 159, 28, 0.45);
    color:        #FFD166;
    box-shadow:
        0 0 12px rgba(255, 159, 28, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.5);
}

.shared-badge.left i {
    color:        #FF9F1C;
    font-size:    11px;
}

/* Right badge — 🔗 Link */
.shared-badge.right {
    top:          10px;
    right:        10px;
    border:       1px solid rgba(255, 46, 99, 0.45);
    color:        #ff9de2;
    box-shadow:
        0 0 12px rgba(255, 46, 99, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.5);
}

.shared-badge.right i {
    color:        #FF2E63;
    font-size:    11px;
}

/* Visible state */
.shared-badge.show {
    opacity:   1;
    transform: translateY(0);
}

/* Shared highlight pulse on the card */
.shared-highlight {
    animation: highlightPulse 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes highlightPulse {
    0%   { transform: scale(0.97); box-shadow: 0 0 0px rgba(255, 159, 28, 0);   }
    35%  { transform: scale(1.025); box-shadow: 0 0 30px rgba(255, 159, 28, 0.5), 0 0 60px rgba(255, 46, 99, 0.3); }
    70%  { transform: scale(1.01);  box-shadow: 0 0 20px rgba(255, 159, 28, 0.3), 0 0 40px rgba(255, 46, 99, 0.15); }
    100% { transform: scale(1);     box-shadow: 0 0 0px rgba(255, 159, 28, 0);  }
}