/**
 * Translation Engine - Stunning Apple-Level UI
 * Version 2.0 - Complete redesign
 */

/* Hide native video controls globally in demo section */
#cinema-preview-section video::-webkit-media-controls,
.cn-moodboard-overlay video::-webkit-media-controls,
.cn-full-plan-overlay video::-webkit-media-controls {
    display: none !important;
}
#cinema-preview-section video::-webkit-media-controls-enclosure,
.cn-moodboard-overlay video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* ==========================================================================
   TRANSLATE BUTTON (Story Mode)
   ========================================================================== */
/* Story Mode Translate Button - Only visible on specific beats */
.story-translate-btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    display: none;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #a78bfa;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999990;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.story-translate-btn.visible {
    opacity: 1;
    transform: translateX(0);
}

.story-translate-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.2));
    border-color: #a78bfa;
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.3),
                0 0 60px rgba(139, 92, 246, 0.15);
}

.story-translate-btn svg {
    width: 18px;
    height: 18px;
}

.story-translate-btn span {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

/* ==========================================================================
   TRANSLATION OVERLAY
   ========================================================================== */
.cn-te-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* CRITICAL: Prevent click interception when closed */
}

.cn-te-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Enable clicks when active */
    animation: teOverlayIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes teOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.cn-te-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
}

.cn-te-overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: teContainerIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

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

/* Close button - Zordon Style */
.cn-te-overlay-close {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: rgba(0, 10, 20, 0.7);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(0, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10003;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Pulsing close X on the center panel card */
.cn-te-panel-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: rgba(0, 10, 20, 0.8);
    border: 1.5px solid rgba(0, 255, 200, 0.5);
    border-radius: 50%;
    color: #00ffc8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0;
    animation: cnPanelClosePulse 2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(0, 255, 200, 0.3), 0 0 24px rgba(0, 255, 200, 0.15);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.cn-te-panel-close-x svg {
    width: 18px;
    height: 18px;
}

.cn-te-panel-close-x:hover {
    background: rgba(0, 255, 200, 0.15);
    border-color: #00ffc8;
    transform: rotate(90deg) scale(1.15);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.5), 0 0 40px rgba(0, 255, 200, 0.25);
    animation: none;
}

@keyframes cnPanelClosePulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(0, 255, 200, 0.25), 0 0 16px rgba(0, 255, 200, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 18px rgba(0, 255, 200, 0.5), 0 0 36px rgba(0, 255, 200, 0.25);
        transform: scale(1.08);
    }
}

.cn-te-overlay-close:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
    color: #00ffff;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.cn-te-overlay-close svg {
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   ZORDON STYLE - EXACT COPY FROM ZORDON INTRO FLOW
   ========================================================================== */

:root {
    --te-card-opacity: 0.75;
    --te-card-border-color: #00ffc8;
    --te-float-duration: 10s;
    --te-float-distance: 15px;
    --te-scanline-opacity: 0.9;
    --te-glow-color: #00ffc8;
    --te-glow-intensity: 0.15;
}

.cn-te-zordon-style {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #000;
    font-family: 'Courier New', monospace;
    animation: teCrtPowerOn 0.6s ease-out;
    image-rendering: pixelated;
}

/* Pixelation effect */
.cn-te-zordon-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 200, 0.01) 2px, rgba(0, 255, 200, 0.01) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 200, 0.01) 2px, rgba(0, 255, 200, 0.01) 4px);
    pointer-events: none;
    z-index: 10005;
    opacity: 0.3;
}

/* Chromatic aberration */
.cn-te-zordon-style::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(
            45deg,
            rgba(255, 0, 100, 0.02) 0%,
            transparent 25%,
            rgba(0, 255, 255, 0.02) 50%,
            transparent 75%,
            rgba(255, 0, 100, 0.02) 100%
        );
    pointer-events: none;
    z-index: 10004;
    animation: teChromaticShift 4s ease-in-out infinite, teScreenFlicker 10s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes teCrtPowerOn {
    0% { transform: scale(1, 0.01); opacity: 0; }
    50% { transform: scale(1, 1); opacity: 0.6; }
    100% { transform: scale(1, 1); opacity: 1; }
}

@keyframes teChromaticShift {
    0% { transform: translateX(0); filter: hue-rotate(0deg); }
    33% { transform: translateX(-1px); filter: hue-rotate(90deg); }
    66% { transform: translateX(1px); filter: hue-rotate(180deg); }
    100% { transform: translateX(0); filter: hue-rotate(270deg); }
}

@keyframes teScreenFlicker {
    0%, 100% { opacity: 0; }
    2% { opacity: 0.15; }
    4% { opacity: 0; }
    6% { opacity: 0.2; }
    8% { opacity: 0; }
    92% { opacity: 0; }
    94% { opacity: 0.12; }
    96% { opacity: 0; }
    98% { opacity: 0.18; }
}

/* Hide the old static background */
.cn-te-zordon-style .cn-te-overlay-bg {
    display: none;
}

/* ==========================================================================
   BACKGROUND SLIDESHOW (Copied from Zordon Intro Flow)
   ========================================================================== */
.cn-te-bg-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.cn-te-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: scale(1.05);
    animation: slideshowZoom 10s ease-in-out infinite alternate;
}

.cn-te-bg-slide.active {
    opacity: 0.35;
}

@keyframes slideshowZoom {
    0% { transform: scale(1.05); }
    100% { transform: scale(1.15); }
}

.cn-te-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* Zordon-style cyan/teal hue overlay */
    background: 
        linear-gradient(
            180deg,
            rgba(0, 15, 25, 0.7) 0%,
            rgba(0, 30, 40, 0.6) 50%,
            rgba(0, 20, 35, 0.75) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(0, 255, 200, 0.08) 0%,
            transparent 70%
        );
}

/* ==========================================================================
   CRT EFFECTS (Copied from Zordon Intro Flow)
   ========================================================================== */

/* CRT Scanlines - HIDDEN (User requested removal) */
.cn-te-crt-scanlines {
    display: none;
}

@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* CRT Scanlines - Secondary - HIDDEN */
.cn-te-crt-scanlines-secondary {
    display: none;
}

/* CRT Flicker */
.cn-te-crt-flicker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9996;
    animation: crtFlicker 0.08s infinite, crtGlitch 8s infinite;
}

@keyframes crtFlicker {
    0%, 100% { opacity: 1; }
    10% { opacity: 0.98; }
    20% { opacity: 0.99; }
    30% { opacity: 0.97; }
    40% { opacity: 1; }
    50% { opacity: 0.98; }
    60% { opacity: 0.99; }
    70% { opacity: 0.97; }
    80% { opacity: 1; }
    90% { opacity: 0.98; }
}

@keyframes crtGlitch {
    0%, 90%, 100% { 
        transform: translate(0, 0) scale(1); 
        filter: hue-rotate(0deg) brightness(1);
    }
    93% { 
        transform: translate(3px, -2px) scale(1.001); 
        filter: hue-rotate(10deg) brightness(1.05);
    }
    96% { 
        transform: translate(-3px, 2px) scale(0.999); 
        filter: hue-rotate(-10deg) brightness(0.95);
    }
}

/* CRT Vignette - Zordon Style */
.cn-te-crt-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 90%,
        rgba(0, 0, 0, 0.9) 100%
    );
    pointer-events: none;
    z-index: 9995;
}

/* CRT Glow - Enhanced Zordon Style */
.cn-te-crt-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9994;
    animation: crtGlowPulse 2s ease-in-out infinite alternate;
}

.cn-te-crt-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 
        inset 0 0 150px rgba(0, 255, 200, var(--te-glow-intensity, 0.15)),
        inset 0 0 300px rgba(0, 255, 200, calc(var(--te-glow-intensity, 0.15) * 0.5));
    filter: blur(1px);
}

@keyframes crtGlowPulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* Legacy Floating Translations Container - Replaced by new styles */
.cn-te-floating-translations-legacy {
    display: none;
}

/* Individual Floating Card - Endless Dramatic Float */
.cn-te-float-card {
    position: absolute;
    pointer-events: auto;
    transform: rotate(var(--rotate, 0deg)) scale(var(--scale, 1));
    animation: 
        floatCardIn 1s cubic-bezier(0.4, 0, 0.2, 1) var(--delay, 0s) both,
        endlessFloat var(--float-duration, 20s) ease-in-out infinite,
        floatRotate calc(var(--float-duration, 20s) * 1.5) ease-in-out infinite;
    animation-delay: 
        var(--delay, 0s), 
        calc(var(--delay, 0s) + 1s),
        calc(var(--delay, 0s) + 0.5s);
}

@keyframes floatCardIn {
    from {
        opacity: 0;
        transform: rotate(var(--rotate, 0deg)) scale(calc(var(--scale, 1) * 0.5)) translateY(100px);
        filter: blur(15px);
    }
    to {
        opacity: 1;
        transform: rotate(var(--rotate, 0deg)) scale(var(--scale, 1)) translateY(0);
        filter: blur(0);
    }
}

/* Endless floating - dramatic movement across screen */
@keyframes endlessFloat {
    0%, 100% { 
        transform: rotate(var(--rotate, 0deg)) scale(var(--scale, 1)) translate(0, 0); 
    }
    10% { 
        transform: rotate(var(--rotate, 0deg)) scale(var(--scale, 1)) translate(calc(var(--float-distance, 80px) * 0.3), calc(var(--float-distance, 80px) * -0.5)); 
    }
    25% { 
        transform: rotate(var(--rotate, 0deg)) scale(calc(var(--scale, 1) * 1.05)) translate(calc(var(--float-distance, 80px) * 0.8), calc(var(--float-distance, 80px) * -0.8)); 
    }
    40% { 
        transform: rotate(var(--rotate, 0deg)) scale(var(--scale, 1)) translate(calc(var(--float-distance, 80px) * 0.5), calc(var(--float-distance, 80px) * -0.2)); 
    }
    55% { 
        transform: rotate(var(--rotate, 0deg)) scale(calc(var(--scale, 1) * 0.95)) translate(calc(var(--float-distance, 80px) * -0.3), calc(var(--float-distance, 80px) * 0.4)); 
    }
    70% { 
        transform: rotate(var(--rotate, 0deg)) scale(var(--scale, 1)) translate(calc(var(--float-distance, 80px) * -0.7), calc(var(--float-distance, 80px) * 0.6)); 
    }
    85% { 
        transform: rotate(var(--rotate, 0deg)) scale(calc(var(--scale, 1) * 1.02)) translate(calc(var(--float-distance, 80px) * -0.2), calc(var(--float-distance, 80px) * 0.3)); 
    }
}

/* Subtle rotation during float */
@keyframes floatRotate {
    0%, 100% { 
        --current-rotate: var(--rotate, 0deg);
    }
    25% { 
        --current-rotate: calc(var(--rotate, 0deg) + 5deg);
    }
    50% { 
        --current-rotate: calc(var(--rotate, 0deg) - 3deg);
    }
    75% { 
        --current-rotate: calc(var(--rotate, 0deg) + 4deg);
    }
}

.cn-te-float-card:hover {
    z-index: 100 !important;
    animation-play-state: paused;
}

/* Staggered animation for different cards */
.cn-te-float-card[data-float-index="0"] { animation-delay: 0s, 1s, 0.5s; }
.cn-te-float-card[data-float-index="1"] { animation-delay: 0.2s, 1.2s, 0.7s; }
.cn-te-float-card[data-float-index="2"] { animation-delay: 0.4s, 1.4s, 0.9s; }
.cn-te-float-card[data-float-index="3"] { animation-delay: 0.1s, 1.1s, 0.6s; }
.cn-te-float-card[data-float-index="4"] { animation-delay: 0.6s, 1.6s, 1.1s; }
.cn-te-float-card[data-float-index="5"] { animation-delay: 0.3s, 1.3s, 0.8s; }
.cn-te-float-card[data-float-index="6"] { animation-delay: 0.5s, 1.5s, 1s; }
.cn-te-float-card[data-float-index="7"] { animation-delay: 0.15s, 1.15s, 0.65s; }

/* Card Inner - Matching Film Card Style */
.cn-te-float-card-inner {
    background: rgba(10, 10, 18, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cn-te-float-card:hover .cn-te-float-card-inner {
    border-color: #00ffff;
    transform: scale(1.08) translateY(-10px);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(0, 255, 255, 0.2),
        0 0 100px rgba(0, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cn-te-float-card-inner.saved {
    border-color: rgba(16, 185, 129, 0.6);
}

.cn-te-float-card-inner.saved:hover {
    border-color: #10b981;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(16, 185, 129, 0.2),
        0 0 100px rgba(16, 185, 129, 0.1);
}

/* Scan-lines on each card */
.cn-te-float-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 10;
    opacity: 0.3;
}

/* Card Media (Video/Image) */
.cn-te-float-card-media {
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 100%);
}

.cn-te-float-card-media video,
.cn-te-float-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.cn-te-float-card:hover .cn-te-float-card-media video,
.cn-te-float-card:hover .cn-te-float-card-media img {
    transform: scale(1.1);
}

.cn-te-float-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg, 
        rgba(0, 0, 0, 0.2) 0%, 
        transparent 30%,
        transparent 70%,
        rgba(0, 0, 0, 0.6) 100%
    );
    pointer-events: none;
}

/* Card Content */
.cn-te-float-card-content {
    padding: 12px;
    position: relative;
    z-index: 5;
}

.cn-te-float-card-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff00ff;
    background: rgba(255, 0, 255, 0.15);
    border: 1px solid rgba(255, 0, 255, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.cn-te-float-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-te-float-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-te-float-card-budget {
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
}

/* Add Button - Corner positioned */
.cn-te-float-add {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.4);
    border-radius: 50%;
    color: #00ffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 20;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cn-te-float-add:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: #00ffff;
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.cn-te-float-add.added {
    background: rgba(16, 185, 129, 0.3);
    border-color: #10b981;
    color: #10b981;
}

.cn-te-float-add svg {
    width: 14px;
    height: 14px;
}

.cn-te-float-card.just-added .cn-te-float-card-inner {
    animation: cardAddedPulse 0.8s ease;
}

@keyframes cardAddedPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.12); box-shadow: 0 0 60px rgba(16, 185, 129, 0.5); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   CRT OVERLAY EFFECT - ONLY VISIBLE INSIDE ACTIVE TE OVERLAY
   Hidden by default to prevent showing on main site
   ========================================================================== */

.cn-te-crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10002;
    /* Hidden by default - only show when TE overlay is active */
    opacity: 0;
    visibility: hidden;
    background: none;
}

.cn-te-crt-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
}

/* teCrtShift animation - only used when TE is active (defined in active state CSS) */
@keyframes teCrtShift {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ==========================================================================
   APPLE-STYLE LIQUID GLASS CENTER PANEL
   ========================================================================== */

.cn-te-apple-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    width: 420px;
    max-width: 90vw;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: appleSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes appleSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Large Hero Media - Takes up most of the card */
.cn-te-apple-media {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #0a0a15 100%);
}

.cn-te-apple-media img,
.cn-te-apple-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay on media */
.cn-te-apple-media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    pointer-events: none;
}

/* Glass Content Overlay */
.cn-te-apple-glass {
    padding: 24px;
    background: rgba(20, 30, 40, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Category Badge */
.cn-te-apple-category {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.15);
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
}

/* Title */
.cn-te-apple-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Subtitle / Date */
.cn-te-apple-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-weight: 500;
}

/* Divider */
.cn-te-apple-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 18px 0;
}

/* Section Label */
.cn-te-apple-section {
    margin-bottom: 16px;
}

.cn-te-apple-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.cn-te-apple-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Budget Row */
.cn-te-apple-budget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0, 255, 200, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 200, 0.15);
}

.cn-te-apple-budget-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.cn-te-apple-budget-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00ffc8;
}

/* Mobile */
@media (max-width: 480px) {
    .cn-te-apple-panel {
        width: 100%;
        max-width: 360px;
        border-radius: 20px;
    }
    
    .cn-te-apple-media {
        aspect-ratio: 4/3;
    }
    
    .cn-te-apple-glass {
        padding: 20px;
    }
    
    .cn-te-apple-title {
        font-size: 1.4rem;
    }
}

/* ==========================================================================
   ZORDON-STYLE FLOATING TRANSLATION CARDS
   ========================================================================== */

.cn-te-floating-translations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
}

/* Brainwave scan effect - DISABLED */

/* Floating Card - EXACT Zordon Intro Card Style */
.cn-te-floating-card {
    position: absolute;
    width: 240px;
    background: linear-gradient(135deg, rgba(0, 30, 20, 0.75), rgba(0, 40, 30, 0.85));
    border: 2px solid var(--te-card-border-color, #00ffc8);
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    animation: teCardFloat var(--te-float-duration, 10s) ease-in-out infinite, teCardFadeIn 0.8s ease-out forwards;
    visibility: visible;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(0, 255, 200, 0.3);
    backdrop-filter: blur(4px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}

@keyframes teCardFadeIn {
    to { opacity: var(--te-card-opacity, 0.75); }
}

@keyframes teCardFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(var(--te-float-distance, 15px), calc(var(--te-float-distance, 15px) * -1)) rotate(0.6deg); }
    50% { transform: translate(calc(var(--te-float-distance, 15px) * -0.8), calc(var(--te-float-distance, 15px) * 0.6)) rotate(-0.4deg); }
    75% { transform: translate(var(--te-float-distance, 15px), var(--te-float-distance, 15px)) rotate(0.5deg); }
}

.cn-te-floating-card:hover {
    transform: scale(1.08) !important;
    z-index: 100 !important;
    opacity: 1 !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.95),
        0 0 80px rgba(0, 255, 200, 0.6);
}

/* Active card state (during cycling) - like Zordon intro */
.cn-te-floating-card.cn-te-card-active {
    opacity: 1 !important;
    border-color: var(--te-glow-color, #00ffc8);
    border-width: 4px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.95),
        0 0 120px rgba(0, 255, 200, 1),
        0 0 200px rgba(0, 255, 200, 0.8),
        0 0 300px rgba(0, 255, 200, 0.6),
        inset 0 0 40px rgba(0, 255, 200, 0.2);
    transform: scale(1.12);
    z-index: 999 !important;
    animation: teCardFloat var(--te-float-duration, 10s) ease-in-out infinite, 
               teAudioPulse 2.5s ease-in-out infinite,
               teColorCycle 4s ease-in-out infinite;
    filter: brightness(1.15);
}

@keyframes teAudioPulse {
    0%, 100% { 
        box-shadow: 
            0 20px 50px rgba(0, 0, 0, 0.95),
            0 0 120px rgba(0, 255, 200, 1),
            0 0 200px rgba(0, 255, 200, 0.8),
            inset 0 0 40px rgba(0, 255, 200, 0.2);
    }
    50% { 
        box-shadow: 
            0 25px 60px rgba(0, 0, 0, 0.95),
            0 0 150px rgba(0, 255, 200, 1),
            0 0 250px rgba(0, 255, 200, 0.9),
            inset 0 0 50px rgba(0, 255, 200, 0.25);
    }
}

@keyframes teColorCycle {
    0% { filter: brightness(1.15) hue-rotate(0deg); }
    25% { filter: brightness(1.15) hue-rotate(90deg); }
    50% { filter: brightness(1.15) hue-rotate(180deg); }
    75% { filter: brightness(1.15) hue-rotate(270deg); }
    100% { filter: brightness(1.15) hue-rotate(360deg); }
}

/* Rainbow shimmer on active card title */
.cn-te-floating-card.cn-te-card-active .cn-te-floating-card-blueprint {
    font-weight: 600;
    background: linear-gradient(
        90deg,
        rgba(255, 100, 255, 0.9) 0%,
        rgba(0, 255, 255, 0.9) 25%,
        rgba(255, 255, 100, 0.9) 50%,
        rgba(0, 255, 255, 0.9) 75%,
        rgba(255, 100, 255, 0.9) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: teShimmer 3s linear infinite;
}

/* Card Media */
.cn-te-floating-card-media {
    width: 100%;
    height: 140px;
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(0, 255, 200, 0.3);
}

.cn-te-floating-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.95) contrast(1.1);
}

/* Card Info */
.cn-te-floating-card-info {
    padding: 12px;
}

.cn-te-floating-card-category {
    font-size: 0.6rem;
    color: #00ffaa;
    background: rgba(0, 255, 170, 0.15);
    border: 1px solid rgba(0, 255, 170, 0.4);
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 6px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.8);
}

.cn-te-floating-card-title {
    font-size: 0.8rem;
    color: #ffffff;
    margin: 0 0 4px 0;
    line-height: 1.3;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 200, 0.6);
}

.cn-te-floating-card-budget {
    font-size: 0.7rem;
    color: rgba(0, 255, 200, 0.7);
}

.cn-te-floating-card-blueprint {
    font-size: 0.5rem;
    font-family: 'Courier New', monospace;
    color: rgba(0, 255, 200, 0.4);
    text-align: center;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(0, 255, 200, 0.12);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 
        0 0 8px rgba(0, 255, 200, 0.6),
        0 0 12px rgba(0, 255, 255, 0.3);
}

/* Impact Level Badge */
.cn-te-floating-card-impact {
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-top: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cn-te-floating-card-impact.high-impact {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.4);
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
}

.cn-te-floating-card-impact.medium-impact {
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

/* === METRICS DISPLAY ON CARDS === */
.cn-te-floating-card-metrics {
    background: linear-gradient(135deg, rgba(255, 0, 150, 0.2) 0%, rgba(0, 255, 200, 0.15) 100%);
    border: 1px solid rgba(255, 0, 150, 0.4);
    border-radius: 6px;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
}

.cn-te-metric-views {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff44ff;
    text-shadow: 
        0 0 8px rgba(255, 0, 255, 0.9),
        0 0 15px rgba(255, 0, 255, 0.6);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.cn-te-metric-desc {
    display: block;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 5px;
    line-height: 1.3;
    font-style: italic;
}

/* Hover state for metrics - make them pop more */
.cn-te-floating-card:hover .cn-te-floating-card-metrics,
.cn-te-card-active .cn-te-floating-card-metrics {
    border-color: rgba(255, 0, 255, 0.7);
    background: linear-gradient(135deg, rgba(255, 0, 150, 0.3) 0%, rgba(0, 255, 200, 0.25) 100%);
}

.cn-te-floating-card:hover .cn-te-metric-views,
.cn-te-card-active .cn-te-metric-views {
    font-size: 0.95rem;
    color: #ff66ff;
    text-shadow: 
        0 0 12px rgba(255, 0, 255, 1),
        0 0 25px rgba(255, 0, 255, 0.7);
}

/* Performance: Use will-change for animated elements */
.cn-te-floating-card {
    will-change: transform, opacity;
}

/* Rainbow shimmer on hover */
.cn-te-floating-card:hover .cn-te-floating-card-blueprint {
    font-weight: 600;
    background: linear-gradient(
        90deg,
        rgba(255, 100, 255, 0.9) 0%,
        rgba(0, 255, 255, 0.9) 25%,
        rgba(255, 255, 100, 0.9) 50%,
        rgba(0, 255, 255, 0.9) 75%,
        rgba(255, 100, 255, 0.9) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: teShimmer 3s linear infinite;
}

/* Add button on floating card */
.cn-te-floating-card-add {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(0, 255, 200, 0.2);
    border: 1px solid rgba(0, 255, 200, 0.5);
    border-radius: 50%;
    color: #00ffc8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.cn-te-floating-card:hover .cn-te-floating-card-add {
    opacity: 1;
}

.cn-te-floating-card-add:hover {
    background: rgba(0, 255, 200, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.5);
}

/* Legacy center card styling - kept for compatibility */
.cn-te-center-card {
    display: none; /* Hide old center card */
}

/* Multi-color cycling glow (legacy, replaced by zordon panel) */
.cn-te-center-glow {
    display: none;
}

@keyframes multiColorGlow {
    0%, 100% { 
        opacity: 0.6; 
        transform: scale(1) rotate(0deg);
        filter: blur(40px) hue-rotate(0deg);
    }
    25% {
        opacity: 0.9;
        transform: scale(1.1) rotate(5deg);
        filter: blur(50px) hue-rotate(60deg);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.15) rotate(0deg);
        filter: blur(60px) hue-rotate(120deg);
    }
    75% {
        opacity: 0.8;
        transform: scale(1.05) rotate(-5deg);
        filter: blur(45px) hue-rotate(200deg);
    }
}

/* Film card style container */
.cn-te-center-content {
    background: linear-gradient(135deg, rgba(0, 30, 20, 0.9), rgba(0, 40, 30, 0.95));
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.9),
        0 0 80px rgba(0, 255, 200, 0.3),
        0 0 150px rgba(255, 0, 255, 0.15),
        0 0 200px rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    animation: cardBorderCycle 6s linear infinite;
}

@keyframes cardBorderCycle {
    0%, 100% { border-color: rgba(0, 255, 200, 0.6); }
    25% { border-color: rgba(255, 0, 255, 0.6); }
    50% { border-color: rgba(0, 255, 255, 0.6); }
    75% { border-color: rgba(255, 255, 0, 0.5); }
}

/* Scan-lines on center card */
.cn-te-center-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 10;
    border-radius: 8px;
    opacity: 0.4;
}

.cn-te-center-content > * {
    position: relative;
    z-index: 2;
}

.cn-te-center-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #00ffaa;
    text-transform: uppercase;
    padding: 12px 16px 8px;
    background: rgba(0, 255, 170, 0.1);
    border-bottom: 1px solid rgba(0, 255, 200, 0.2);
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.8);
    text-align: center;
}

/* Film card media - 4:3 aspect ratio like main section */
.cn-te-center-media {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(0, 255, 200, 0.3);
    position: relative;
}

.cn-te-center-media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
}

.cn-te-center-media video,
.cn-te-center-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.95) contrast(1.1);
}

/* Film-card info section */
.cn-te-zordon-style .cn-te-center-content .cn-te-center-label ~ * {
    padding: 0 14px;
}

.cn-te-zordon-style .cn-te-event-category {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff00ff;
    background: rgba(255, 0, 255, 0.15);
    border: 1px solid rgba(255, 0, 255, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    margin: 10px 14px 6px;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.8);
}

.cn-te-zordon-style .cn-te-event-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    margin: 0 0 4px 0;
    padding: 0 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 0 10px rgba(0, 255, 200, 0.6);
}

.cn-te-zordon-style .cn-te-event-date {
    font-size: 0.7rem;
    color: rgba(0, 255, 200, 0.7);
    display: block;
    margin-bottom: 10px;
    padding: 0 14px;
}

.cn-te-zordon-style .cn-te-event-stats {
    display: none; /* Hide stats in compact film-card view */
}

.cn-te-zordon-style .cn-te-event-badge {
    font-size: 10px;
    font-weight: 600;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
}

.cn-te-zordon-style .cn-te-olivia-did {
    padding: 8px 14px 10px;
    background: rgba(255, 0, 255, 0.05);
    border-top: 1px solid rgba(255, 0, 255, 0.15);
    margin-bottom: 0;
    border-radius: 0;
}

.cn-te-zordon-style .cn-te-olivia-label {
    display: block;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 0, 255, 0.8);
    text-transform: uppercase;
    margin-bottom: 3px;
    text-shadow: 0 0 6px rgba(255, 0, 255, 0.5);
}

.cn-te-zordon-style .cn-te-olivia-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
    margin: 0;
    font-style: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-te-budget-notice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.08);
    border-top: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 0 0 6px 6px;
}

.cn-te-budget-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.cn-te-budget-value {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* Bottom Action Bar - Matching Zordon Style */
.cn-te-action-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 5, 10, 0.95) 100%);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10002;
}

.cn-te-action-info {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.cn-te-action-info span {
    color: #00ffff;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cn-te-action-buttons {
    display: flex;
    gap: 14px;
}

.cn-te-action-buttons .cn-te-btn {
    padding: 12px 20px;
    font-size: 12px;
    border-radius: 8px;
}

.cn-te-action-buttons .cn-te-btn-secondary {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    color: #00ffff;
}

.cn-te-action-buttons .cn-te-btn-secondary:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.cn-te-action-buttons .cn-te-btn-primary {
    background: linear-gradient(135deg, #00ffff 0%, #00cccc 100%);
    border: none;
    color: #000;
    font-weight: 700;
}

.cn-te-action-buttons .cn-te-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.4),
                0 0 40px rgba(0, 255, 255, 0.2);
}

/* Responsive adjustments for Zordon style */
@media (max-width: 1200px) {
    .cn-te-float-card {
        width: 180px;
    }
    
    .cn-te-float-card-text {
        font-size: 12px;
        min-height: 48px;
    }
    
    .cn-te-center-card {
        width: 340px;
    }
}

@media (max-width: 1200px) {
    .cn-te-floating-card {
        width: 180px !important;
    }
    
    .cn-te-floating-card-media {
        height: 110px;
    }
}

@media (max-width: 900px) {
    .cn-te-floating-translations {
        display: none;
    }
    
    .cn-te-zordon-center {
        max-width: 95%;
    }
    
    .cn-te-zordon-panel {
        padding: 20px;
    }
    
    .cn-te-zordon-title {
        font-size: 1rem;
    }
}

/* ==========================================================================
   OVERLAY HEADER (Legacy - kept for compatibility)
   ========================================================================== */
.cn-te-overlay-header {
    position: relative;
    padding: 50px 60px 30px;
    text-align: center;
}

.cn-te-header-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at center top, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.cn-te-header-content {
    position: relative;
    z-index: 1;
}

.cn-te-label {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.cn-te-label-alt {
    color: #a78bfa;
    margin-top: 20px;
}

.cn-te-context-title {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 15px;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cn-te-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent);
    margin: 20px auto;
}

.cn-te-context-subtitle {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ==========================================================================
   CAMPAIGN SPINE (MINI)
   ========================================================================== */
.cn-te-spine-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-te-spine-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.cn-te-spine-slots {
    display: flex;
    gap: 40px;
}

.cn-te-spine-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cn-te-spine-slot-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
}

.cn-te-spine-slot-icon svg {
    width: 18px;
    height: 18px;
}

.cn-te-spine-slot-progress {
    display: flex;
    gap: 4px;
}

.cn-te-spine-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.cn-te-spine-dot.filled {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    border-color: #a78bfa;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.cn-te-spine-dot.filled.animate {
    animation: dotFill 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dotFill {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); opacity: 1; }
}

.cn-te-spine-slot-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
}

/* ==========================================================================
   OVERLAY CONTENT
   ========================================================================== */
.cn-te-overlay-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 60px 40px;
}

.cn-te-overlay-content::-webkit-scrollbar {
    width: 6px;
}

.cn-te-overlay-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.cn-te-overlay-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

/* ==========================================================================
   EVENT CARD SECTION (Shows the campaign moment being translated)
   ========================================================================== */
.cn-te-event-section {
    margin-bottom: 40px;
    animation: eventSectionIn 0.5s ease both;
}

@keyframes eventSectionIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cn-te-event-card {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 20px;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}

.cn-te-event-media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.cn-te-event-media video,
.cn-te-event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-te-event-media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 70%, rgba(20, 20, 30, 0.9) 100%);
    pointer-events: none;
}

.cn-te-event-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.cn-te-event-details {
    padding: 30px 30px 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cn-te-event-category {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #000;
    background: #00ffff;
    padding: 5px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    width: fit-content;
}

.cn-te-event-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.cn-te-event-date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.cn-te-event-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 16px 0;
    max-height: 60px;
    overflow: hidden;
}

.cn-te-event-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.cn-te-event-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 6px 12px;
    border-radius: 6px;
}

.cn-te-olivia-did {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-te-olivia-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(139, 92, 246, 0.8);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cn-te-olivia-did .cn-te-olivia-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Translations Section Header */
.cn-te-translations-section {
    padding-top: 20px;
}

.cn-te-translations-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 30px;
}

.cn-te-translations-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.cn-te-budget-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
}

/* Responsive Event Card */
@media (max-width: 900px) {
    .cn-te-event-card {
        grid-template-columns: 1fr;
    }
    
    .cn-te-event-media {
        aspect-ratio: 16/9;
    }
    
    .cn-te-event-media::after {
        background: linear-gradient(180deg, transparent 60%, rgba(20, 20, 30, 0.9) 100%);
    }
    
    .cn-te-event-details {
        padding: 0 24px 24px 24px;
    }
}

/* ==========================================================================
   IDEAS GRID
   ========================================================================== */
.cn-te-ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.cn-te-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
}

/* ==========================================================================
   IDEA CARD
   ========================================================================== */
.cn-te-idea-card {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

.cn-te-idea-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 40px rgba(139, 92, 246, 0.1);
}

.cn-te-idea-card.just-saved {
    animation: cardSaved 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardSaved {
    0% { transform: translateY(-6px); }
    30% { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 60px rgba(139, 92, 246, 0.4); }
    100% { transform: translateY(-6px); }
}

/* Card Media */
.cn-te-idea-media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.cn-te-idea-media img,
.cn-te-idea-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-te-idea-card:hover .cn-te-idea-media img,
.cn-te-idea-card:hover .cn-te-idea-media video {
    transform: scale(1.08);
}

.cn-te-idea-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}

/* Impact Badge */
.cn-te-idea-impact {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cn-te-idea-impact.impact-high {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.cn-te-idea-impact.impact-medium {
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.cn-te-idea-impact.impact-low {
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #94a3b8;
}

/* Card Content */
.cn-te-idea-content {
    padding: 20px;
}

.cn-te-idea-title {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
}

.cn-te-idea-description {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin: 0 0 16px;
}

/* Card Footer */
.cn-te-idea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.cn-te-idea-budget {
    font-size: 11px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Save Button */
.cn-te-save-idea {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cn-te-save-idea:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: #a78bfa;
}

.cn-te-save-idea.saved {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.cn-te-save-idea svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   OVERLAY FOOTER
   ========================================================================== */
.cn-te-overlay-footer {
    padding: 20px 60px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.3);
}

.cn-te-footer-info {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.cn-te-footer-info span {
    color: #a78bfa;
    font-weight: 600;
}

.cn-te-footer-actions {
    display: flex;
    gap: 12px;
}

/* Buttons */
.cn-te-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cn-te-btn svg {
    width: 16px;
    height: 16px;
}

.cn-te-btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border: none;
    color: #fff;
}

.cn-te-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.cn-te-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.cn-te-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ==========================================================================
   CAMPAIGN SPINE PANEL (FULL VIEW)
   ========================================================================== */
.cn-te-spine-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.cn-te-spine-panel.active {
    display: flex;
    animation: teOverlayIn 0.4s ease forwards;
}

.cn-te-spine-panel-content {
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    animation: teContainerIn 0.5s ease 0.1s both;
}

.cn-te-spine-panel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cn-te-spine-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cn-te-spine-panel-close svg {
    width: 16px;
    height: 16px;
}

.cn-te-spine-panel-header {
    text-align: center;
    margin-bottom: 30px;
}

.cn-te-spine-panel-header h3 {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
}

.cn-te-spine-panel-header p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Full Spine Categories */
.cn-te-spine-full {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cn-te-spine-category {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
}

.cn-te-spine-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.cn-te-spine-category-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    color: #a78bfa;
}

.cn-te-spine-category-icon svg {
    width: 16px;
    height: 16px;
}

.cn-te-spine-category-header h4 {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.cn-te-spine-category-count {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-te-spine-category-count span {
    color: #a78bfa;
    font-weight: 600;
}

.cn-te-spine-category-slots {
    display: flex;
    gap: 10px;
}

.cn-te-spine-full-slot {
    flex: 1;
    height: 40px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cn-te-spine-full-slot.filled {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

.cn-te-spine-panel-footer {
    margin-top: 30px;
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .cn-te-overlay-header {
        padding: 40px 30px 25px;
    }
    
    .cn-te-overlay-content {
        padding: 20px 30px 30px;
    }
    
    .cn-te-overlay-footer {
        padding: 20px 30px;
        flex-direction: column;
        gap: 15px;
    }
    
    .cn-te-ideas-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .story-translate-btn {
        bottom: 90px;
        right: 15px;
        padding: 10px 16px;
        font-size: 11px;
    }
    
    .cn-te-context-title {
        font-size: 1.5rem;
    }
    
    .cn-te-spine-slots {
        gap: 20px;
    }
    
    .cn-te-ideas-grid {
        grid-template-columns: 1fr;
    }
    
    .cn-te-footer-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .cn-te-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   BODY STATE
   ========================================================================== */
body.cn-te-overlay-open {
    overflow: hidden;
}

/* ==========================================================================
   MAIN SECTION SIDEBAR (Key Moments Translation Engine)
   ========================================================================== */
.cn-te-sidebar {
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    width: 360px;
    max-height: 85vh;
    background: rgba(10, 12, 20, 0.96);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 16px;
    padding: 0;
    z-index: 200000 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55),
                0 0 50px rgba(0, 255, 255, 0.04);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.cn-te-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.cn-te-sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}

.cn-te-sidebar-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.cn-te-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.2);
    border-radius: 2px;
}

/* Show sidebar when active (added via JS) */
.cn-te-sidebar.visible {
    opacity: 1;
    pointer-events: auto;
}

.cn-te-sidebar::-webkit-scrollbar {
    display: none;
}

.cn-te-sidebar::-webkit-scrollbar-track {
    display: none;
}

.cn-te-sidebar::-webkit-scrollbar-thumb {
    display: none;
    border-radius: 2px;
}

.cn-te-sidebar-section {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-te-sidebar-section:last-child {
    border-bottom: none;
}

/* ==========================================================================
   SPINE SLOT STACK - Build Mode Sidebar Redesign
   ========================================================================== */

/* Sidebar header with campaign toggle + build mode status */
.cn-te-sidebar-header {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.cn-build-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-build-mode-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.cn-slots-filled-count {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Spine Slot Stack Container */
.cn-spine-slot-stack-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cn-spine-slot-stack {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    max-height: 50vh;
}

.cn-spine-slot-stack::-webkit-scrollbar {
    width: 4px;
}

.cn-spine-slot-stack::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.cn-spine-slot-stack::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.2);
    border-radius: 2px;
}

/* ==========================================================================
   SIMPLIFIED SIDEBAR SLOT ROWS (1:1 match with spine dots)
   ========================================================================== */

/* Progress percentage in header */
.cn-progress-percent {
    color: #00ffc8;
    font-weight: 600;
}

/* Slot Row - Simple horizontal layout */
.cn-slot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-slot-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.cn-slot-row:last-child {
    margin-bottom: 0;
}

/* Active Row (the one user should fill next) - PROMINENT */
.cn-slot-row-active {
    background: rgba(0, 255, 200, 0.12) !important;
    border-color: rgba(0, 255, 200, 0.6) !important;
    border-width: 2px !important;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.3), inset 0 0 10px rgba(0, 255, 200, 0.05);
    animation: activeSlotPulse 2s ease-in-out infinite;
}

@keyframes activeSlotPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 200, 0.3), inset 0 0 5px rgba(0, 255, 200, 0.05);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 255, 200, 0.5), inset 0 0 15px rgba(0, 255, 200, 0.1);
    }
}

/* Active row label - more prominent */
.cn-slot-row-active .cn-slot-row-label {
    color: #00ffc8 !important;
    font-weight: 700;
}

/* Active row status badge */
.cn-slot-row-active .cn-slot-row-status {
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Filled Slot Row */
/* FIXED: Filled Slot Row - wrap content below */
.cn-slot-row-filled {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    flex-wrap: wrap;
}

.cn-slot-row-filled .cn-slot-row-dot {
    background: #22c55e !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

/* Hide the status badge for filled slots - it's redundant */
.cn-slot-row-filled .cn-slot-row-status {
    display: none;
}

/* Filled Slot Content - takes full width below the main row */
.cn-slot-row-content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-basis: 100%;
}

.cn-slot-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.cn-slot-caption {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.cn-slot-platform {
    font-size: 0.6rem;
    padding: 2px 5px;
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
    color: #a78bfa;
    font-weight: 600;
    flex-shrink: 0;
}

/* Just Filled Animation */
.cn-slot-just-filled {
    animation: slotFillPulse 0.8s ease-out;
}

@keyframes slotFillPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
    }
}

/* Anchor Row (locked - red tint) */
.cn-slot-row.cn-slot-anchor {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

.cn-slot-row.cn-slot-anchor:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Row Dot (matches spine dot) */
.cn-slot-row-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.cn-dot-empty {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cn-dot-active {
    background: #00ffc8;
    border: 2px solid #00ffc8;
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.6);
    animation: dotPulseActive 1.5s ease-in-out infinite;
}

.cn-dot-filled {
    background: #00ffc8;
    border: 2px solid #00ffc8;
}

.cn-dot-locked {
    background: #ef4444;
    border: 2px solid #ef4444;
}

@keyframes dotPulseActive {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 200, 0.6); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 200, 0.9), 0 0 30px rgba(0, 255, 200, 0.4); }
}

/* Row Info */
.cn-slot-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-slot-row-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-slot-row-active .cn-slot-row-label {
    color: #00ffc8;
}

.cn-slot-anchor .cn-slot-row-label {
    color: #ef4444;
}

.cn-slot-row-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Row Status Badge */
.cn-slot-row-status {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.cn-status-empty {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.cn-status-active {
    background: rgba(0, 255, 200, 0.2);
    color: #00ffc8;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { background: rgba(0, 255, 200, 0.2); }
    50% { background: rgba(0, 255, 200, 0.35); }
}

.cn-status-filled {
    background: rgba(0, 255, 200, 0.15);
    color: #00ffc8;
}

.cn-status-locked {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Hover highlight from spine dot */
.cn-slot-row.cn-slot-card-hover {
    background: rgba(0, 255, 200, 0.15) !important;
    border-color: rgba(0, 255, 200, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.3);
    transform: scale(1.02);
}

.cn-slot-row.cn-slot-anchor.cn-slot-card-hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Selected state */
.cn-slot-row.cn-slot-card-selected {
    background: rgba(0, 255, 200, 0.12) !important;
    border-color: rgba(0, 255, 200, 0.5) !important;
}

/* ==========================================================================
   ZORDON TRANSLATION GUIDANCE - Centered Floating Card
   ========================================================================== */

/* Overlay - NO darkening, just positioning */
.cn-zordon-translate-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-zordon-translate-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Glass Card - Liquid Glass Style (matches Zordon intro) */
.cn-zordon-translate-card {
    position: relative;
    background: 
        /* Inner glow */
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        /* Base glass */
        linear-gradient(135deg, rgba(20, 25, 40, 0.95) 0%, rgba(15, 20, 35, 0.97) 50%, rgba(10, 15, 30, 0.98) 100%);
    border: 1px solid rgba(0, 255, 200, 0.35);
    border-radius: 20px;
    padding: 28px 32px;
    max-width: 380px;
    text-align: center;
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: 
        0 0 40px rgba(0, 255, 200, 0.2),
        0 0 80px rgba(168, 85, 247, 0.15),
        0 25px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-zordon-translate-overlay.active .cn-zordon-translate-card {
    transform: scale(1) translateY(0);
}

/* Rainbow top border */
.cn-zordon-translate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        #ff00ff 0%, 
        #00ffc8 25%, 
        #ffff00 50%, 
        #00d4ff 75%, 
        #ff6b00 100%
    );
    border-radius: 20px 20px 0 0;
}

/* Animated Zordon Orb */
.cn-zordon-floating-orb {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
}

.cn-zordon-floating-orb.small {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}

.zordon-orb-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
    filter: blur(15px);
    animation: orbGlowPulse 2s ease-in-out infinite;
}

@keyframes orbGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

.zordon-orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.cn-zordon-floating-orb.small .zordon-orb-core {
    gap: 3px;
}

.zordon-orb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.cn-zordon-floating-orb.small .zordon-orb-dot {
    width: 7px;
    height: 7px;
}

.zordon-orb-dot:nth-child(1) {
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
    animation-delay: 0s;
}
.zordon-orb-dot:nth-child(2) {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    animation-delay: 0.1s;
}
.zordon-orb-dot:nth-child(3) {
    background: linear-gradient(135deg, #ffff00, #ffd700);
    animation-delay: 0.2s;
}
.zordon-orb-dot:nth-child(4) {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    animation-delay: 0.3s;
}
.zordon-orb-dot:nth-child(5) {
    background: linear-gradient(135deg, #ff6b00, #ff9500);
    animation-delay: 0.4s;
}

/* Content */
.cn-zordon-translate-title {
    font-size: 1rem;
    font-weight: 600;
    color: #00ffc8;
    margin: 0 0 8px 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
}

.cn-zordon-translate-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 12px 0;
}

.cn-zordon-translate-instruction {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 16px 0;
}

.cn-highlight-btn {
    color: #a78bfa;
    font-weight: 600;
    background: rgba(167, 139, 250, 0.2);
    padding: 3px 8px;
    border-radius: 4px;
}

/* Dismiss button */
.cn-zordon-translate-dismiss {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-zordon-translate-dismiss:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   DRAMATIC TRANSLATE BUTTON EFFECT
   ========================================================================== */

/* When Zordon points to the Translate button - DRAMATIC effect */
.cn-translate-dramatic,
.generate-strategy-btn.cn-translate-dramatic,
#sidebar-translate-moment.cn-translate-dramatic {
    position: relative;
    animation: translateDramaticPulse 0.8s ease-in-out infinite !important;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.4)) !important;
    border: 2px solid #a78bfa !important;
    box-shadow: 
        0 0 30px rgba(139, 92, 246, 0.7),
        0 0 60px rgba(139, 92, 246, 0.4),
        0 0 100px rgba(139, 92, 246, 0.2),
        inset 0 0 20px rgba(139, 92, 246, 0.2) !important;
    z-index: 100;
}

.cn-translate-dramatic::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, #ff00ff, #00ffc8, #ffff00, #00d4ff, #ff6b00, #ff00ff);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: rainbowBorder 2s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
}

@keyframes translateDramaticPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.7), 0 0 60px rgba(139, 92, 246, 0.4), 0 0 100px rgba(139, 92, 246, 0.2);
    }
    50% { 
        transform: scale(1.08);
        box-shadow: 0 0 50px rgba(139, 92, 246, 0.9), 0 0 100px rgba(139, 92, 246, 0.5), 0 0 150px rgba(139, 92, 246, 0.3);
    }
}

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

/* ==========================================================================
   ZORDON SOCIAL IDEAS MODAL
   ========================================================================== */

.cn-zordon-social-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 10, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cn-zordon-social-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-zordon-social-card {
    position: relative;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, rgba(20, 25, 40, 0.95) 0%, rgba(10, 15, 30, 0.98) 100%);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 24px;
    padding: 32px;
    max-width: 900px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(0, 255, 200, 0.15), 0 30px 100px rgba(0, 0, 0, 0.5);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-zordon-social-overlay.active .cn-zordon-social-card {
    transform: scale(1) translateY(0);
}

.cn-zordon-social-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cn-zordon-social-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.cn-zordon-social-header {
    text-align: center;
    margin-bottom: 24px;
}

.cn-zordon-social-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
}

.cn-zordon-social-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.cn-zordon-social-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .cn-zordon-social-columns {
        grid-template-columns: 1fr;
    }
}

.cn-zordon-social-column-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #00ffc8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 255, 200, 0.2);
}

/* What Olivia Posted */
.cn-social-post-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.cn-social-post-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.cn-social-post-platform {
    font-size: 0.7rem;
    color: #a78bfa;
    font-weight: 600;
    margin-bottom: 6px;
}

.cn-social-post-content {
    font-size: 0.85rem;
    color: white;
    font-weight: 500;
    margin-bottom: 4px;
}

.cn-social-post-copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

/* Ideas for You */
.cn-social-idea-item {
    background: rgba(0, 255, 200, 0.05);
    border: 1px solid rgba(0, 255, 200, 0.15);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.cn-social-idea-item:hover {
    background: rgba(0, 255, 200, 0.1);
    border-color: rgba(0, 255, 200, 0.3);
}

.cn-social-idea-item.added {
    background: rgba(0, 255, 200, 0.15);
    border-color: rgba(0, 255, 200, 0.4);
}

.cn-social-idea-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cn-social-idea-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 255, 200, 0.2);
    color: #00ffc8;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-social-idea-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    flex: 1;
}

.cn-social-idea-platform {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
}

.cn-social-idea-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.cn-social-idea-add {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 255, 200, 0.15);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 6px;
    color: #00ffc8;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-social-idea-add:hover {
    background: rgba(0, 255, 200, 0.25);
    border-color: rgba(0, 255, 200, 0.5);
}

.cn-social-idea-add:disabled {
    background: rgba(0, 255, 200, 0.3);
    color: white;
    cursor: default;
}

.cn-zordon-social-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-zordon-social-skip {
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-zordon-social-skip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

/* ==========================================================================
   ZORDON CALENDAR INTRO MODAL
   ========================================================================== */

.cn-zordon-cal-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cn-zordon-cal-intro-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-zordon-cal-intro-card {
    position: relative;
    max-width: 420px;
    width: 90%;
    padding: 32px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, rgba(20, 25, 35, 0.98) 0%, rgba(15, 18, 28, 0.98) 100%);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 16px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(0, 255, 200, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-zordon-cal-intro-overlay.active .cn-zordon-cal-intro-card {
    transform: scale(1) translateY(0);
}

.cn-zordon-cal-intro-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #00ffc8;
    margin: 16px 0 12px 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
}

.cn-zordon-cal-intro-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.cn-zordon-cal-intro-hint {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px 0;
}

.cn-zordon-cal-intro-hint .cn-highlight-btn {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 255, 200, 0.2);
    border-radius: 4px;
    color: #00ffc8;
    font-weight: 600;
}

.cn-zordon-cal-intro-dismiss {
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.2), rgba(0, 255, 200, 0.1));
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 8px;
    color: #00ffc8;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-zordon-cal-intro-dismiss:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.3), rgba(0, 255, 200, 0.2));
    transform: translateY(-1px);
}

/* ==========================================================================
   SOCIAL STRATEGY + CALENDAR MODAL (Merged View)
   ========================================================================== */

.cn-social-strategy-cal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 100002;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cn-social-strategy-cal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-social-strategy-cal-card {
    position: relative;
    max-width: 760px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, rgba(18, 22, 32, 0.98) 0%, rgba(12, 15, 22, 0.98) 100%);
    border: 1px solid rgba(0, 255, 200, 0.15);
    border-top: 2px solid rgba(0, 255, 200, 0.4);
    border-radius: 14px;
    box-shadow: 
        0 30px 100px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(0, 255, 200, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-social-strategy-cal-overlay.active .cn-social-strategy-cal-card {
    transform: scale(1) translateY(0);
}

.cn-social-strategy-cal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-social-strategy-cal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Header - CENTERED */
.cn-social-strategy-cal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-social-strategy-cal-header .cn-zordon-floating-orb.small {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.cn-social-strategy-cal-titles {
    text-align: center;
}

.cn-social-strategy-cal-titles h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #00ffc8;
    margin: 0 0 4px 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
}

.cn-social-strategy-cal-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cn-slot-date-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 255, 200, 0.15);
    border-radius: 4px;
    color: #00ffc8;
    font-weight: 600;
    margin-left: 4px;
}

/* Section Titles */
.cn-social-strategy-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #00ffc8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}

/* Main content: Two columns */
.cn-social-strategy-cal-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .cn-social-strategy-cal-main {
        grid-template-columns: 1fr;
    }
}

/* Left column: What Artist Posted */
.cn-social-strategy-cal-left {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px;
}

.cn-social-strategy-posts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.cn-strategy-post-item {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 2px solid rgba(139, 92, 246, 0.6);
    border-radius: 6px;
}

.cn-strategy-post-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cn-strategy-post-date {
    font-size: 0.7rem;
    color: #a78bfa;
    font-weight: 600;
}

.cn-strategy-post-platform {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
}

.cn-strategy-post-type {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2px;
}

.cn-strategy-post-content {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-bottom: 2px;
}

.cn-strategy-post-copy {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Right column: Compact Calendar */
.cn-social-strategy-cal-right {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px;
}

.cn-social-strategy-mini-cal {
    min-height: 120px;
}

.cn-mini-cal-days {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.cn-mini-cal-day {
    flex: 1;
    max-width: 70px;
    text-align: center;
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cn-mini-cal-day:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cn-mini-cal-day-target {
    background: rgba(0, 255, 200, 0.1) !important;
    border-color: rgba(0, 255, 200, 0.4) !important;
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.2);
}

.cn-mini-cal-day-name {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.cn-mini-cal-day-num {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 2px;
}

.cn-mini-cal-day-target .cn-mini-cal-day-num {
    color: #00ffc8;
}

.cn-mini-cal-day-month {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.cn-mini-cal-day-posts {
    margin-top: 6px;
    display: flex;
    gap: 3px;
    justify-content: center;
    flex-wrap: wrap;
}

.cn-mini-cal-post-dot {
    width: 6px;
    height: 6px;
    background: #00ffc8;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 255, 200, 0.6);
}

/* Bottom: Ideas Grid */
.cn-social-strategy-cal-bottom {
    margin-bottom: 12px;
}

.cn-social-strategy-ideas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 768px) {
    .cn-social-strategy-ideas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cn-strategy-idea-card {
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-strategy-idea-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 255, 200, 0.3);
    transform: translateY(-2px);
}

.cn-strategy-idea-card.selected {
    background: rgba(0, 255, 200, 0.1);
    border-color: rgba(0, 255, 200, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.15);
}

.cn-strategy-idea-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.cn-strategy-idea-num {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 200, 0.2);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: #00ffc8;
}

.cn-strategy-idea-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.cn-strategy-idea-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-strategy-idea-meta {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.cn-strategy-idea-platform,
.cn-strategy-idea-type {
    font-size: 0.6rem;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-strategy-idea-select {
    width: 100%;
    padding: 6px 8px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 255, 200, 0.08));
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 5px;
    color: #00ffc8;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-strategy-idea-select:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.25), rgba(0, 255, 200, 0.15));
}

/* Schedule Panel */
.cn-social-strategy-schedule-panel {
    padding: 20px;
    background: rgba(0, 255, 200, 0.05);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 12px;
    margin-bottom: 16px;
}

.cn-schedule-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: #00ffc8;
    margin: 0 0 16px 0;
}

.cn-schedule-panel-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cn-schedule-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-schedule-form-row label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.cn-schedule-form-row-inline {
    flex-direction: row;
    gap: 16px;
}

.cn-schedule-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-schedule-platform-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cn-platform-btn {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-platform-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cn-platform-btn.active {
    background: rgba(0, 255, 200, 0.15);
    border-color: rgba(0, 255, 200, 0.4);
    color: #00ffc8;
}

.cn-schedule-form-row select,
.cn-schedule-form-row input,
.cn-schedule-form-row textarea {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
}

.cn-schedule-form-row textarea {
    min-height: 60px;
    resize: vertical;
}

.cn-schedule-form-row select:focus,
.cn-schedule-form-row input:focus,
.cn-schedule-form-row textarea:focus {
    outline: none;
    border-color: rgba(0, 255, 200, 0.4);
    box-shadow: 0 0 0 2px rgba(0, 255, 200, 0.1);
}

/* Asset Upload Area */
.cn-schedule-asset-row {
    margin-bottom: 4px;
}

.cn-asset-upload-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.cn-asset-preview-container {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-asset-thumb,
.cn-asset-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-asset-upload-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-asset-type-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.cn-asset-status {
    font-size: 0.7rem;
    color: #00ffc8;
}

.cn-schedule-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.cn-schedule-btn-cancel {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-schedule-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cn-schedule-btn-confirm {
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.3), rgba(0, 255, 200, 0.2));
    border: 1px solid rgba(0, 255, 200, 0.5);
    border-radius: 8px;
    color: #00ffc8;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-schedule-btn-confirm:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.4), rgba(0, 255, 200, 0.3));
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 255, 200, 0.3);
}

/* Asset Upload Area */
.cn-asset-upload-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.cn-asset-preview-container {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-asset-thumb,
.cn-asset-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-asset-upload-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-asset-type-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.cn-asset-status {
    font-size: 0.7rem;
    color: #00ffc8;
}

.cn-asset-status.cn-asset-missing {
    color: #ff6b6b;
}

/* Asset Upload Area */
.cn-asset-upload-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.cn-asset-preview-container {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.cn-asset-thumb, .cn-asset-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-asset-upload-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-asset-type-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.cn-asset-status {
    font-size: 0.7rem;
    color: #00ffc8;
}

/* ============================================
   GUIDED ONBOARDING STYLES
   ============================================ */

/* Zordon Guide Modal - positioned near buttons */
.cn-zordon-guide-modal {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cn-zordon-guide-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.cn-zordon-guide-card {
    background: linear-gradient(135deg, 
        rgba(20, 30, 50, 0.95) 0%,
        rgba(30, 40, 70, 0.92) 50%,
        rgba(20, 30, 50, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 16px;
    padding: 20px;
    max-width: 320px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 255, 200, 0.1),
        inset 0 0 40px rgba(0, 255, 200, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cn-zordon-guide-card.cn-guide-success {
    border-color: rgba(0, 255, 150, 0.5);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 255, 150, 0.2);
}

.cn-zordon-guide-orb {
    width: 50px;
    height: 50px;
}

.zordon-orb-floating-mini {
    position: relative;
    width: 100%;
    height: 100%;
    animation: zordonFloat 3s ease-in-out infinite;
}

.zordon-orb-floating-mini .zordon-orb-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(0, 255, 200, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: zordonPulse 2s ease-in-out infinite;
}

.zordon-orb-floating-mini .zordon-orb-core {
    position: absolute;
    inset: 10px;
    background: radial-gradient(circle at 30% 30%, 
        rgba(0, 255, 255, 0.9) 0%,
        rgba(0, 255, 200, 0.7) 30%,
        rgba(0, 200, 150, 0.5) 70%,
        rgba(0, 150, 100, 0.3) 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(0, 255, 200, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
}

.zordon-orb-floating-mini .zordon-orb-ring {
    position: absolute;
    inset: 5px;
    border: 2px solid rgba(0, 255, 200, 0.4);
    border-radius: 50%;
    animation: zordonSpin 8s linear infinite;
}

@keyframes zordonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes zordonPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes zordonSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cn-zordon-guide-content {
    text-align: center;
}

.cn-zordon-guide-content h3 {
    font-size: 1.1rem;
    color: #00ffc8;
    margin-bottom: 8px;
    font-weight: 600;
}

.cn-zordon-guide-content p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 8px;
}

.cn-zordon-guide-highlight {
    background: rgba(0, 255, 200, 0.1);
    border-left: 3px solid #00ffc8;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

.cn-zordon-guide-arrow {
    width: 24px;
    height: 24px;
    color: #00ffc8;
    animation: guideArrowBounce 1s ease-in-out infinite;
}

@keyframes guideArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* Guided highlight for buttons */
.cn-guided-highlight {
    animation: guidedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 20px rgba(0, 255, 200, 0.5),
        0 0 40px rgba(0, 255, 200, 0.3),
        inset 0 0 10px rgba(0, 255, 200, 0.1) !important;
    border-color: #00ffc8 !important;
}

@keyframes guidedPulse {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(0, 255, 200, 0.5),
            0 0 40px rgba(0, 255, 200, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(0, 255, 200, 0.7),
            0 0 60px rgba(0, 255, 200, 0.5);
    }
}

/* Arrow pulse highlight */
.cn-arrow-pulse {
    animation: arrowPulse 0.8s ease-in-out infinite !important;
}

@keyframes arrowPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 15px rgba(0, 255, 200, 0.5);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(0, 255, 200, 0.8);
    }
}

/* Blocked navigation message */
.cn-blocked-nav-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(30, 30, 40, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 180, 100, 0.4);
    border-radius: 12px;
    padding: 16px 24px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    z-index: 100001;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
    max-width: 300px;
}

.cn-blocked-nav-message.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cn-blocked-nav-message strong {
    color: #00ffc8;
}

/* ============================================
   DEMO GUIDANCE SYSTEM
   ============================================ */

.cn-demo-guidance {
    position: fixed;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
}

.cn-demo-guidance.active {
    opacity: 1;
    transform: translateY(0);
}

.cn-demo-guidance-card {
    background: linear-gradient(135deg, 
        rgba(15, 25, 45, 0.85) 0%,
        rgba(25, 35, 65, 0.8) 50%,
        rgba(15, 25, 45, 0.85) 100%);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 24px;
    max-width: 380px;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(100, 150, 200, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Liquid Glass Effect */
.cn-liquid-glass {
    background: linear-gradient(135deg, 
        rgba(30, 40, 60, 0.7) 0%,
        rgba(40, 50, 80, 0.6) 50%,
        rgba(30, 40, 60, 0.7) 100%);
    backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

/* Colorful Zordon Orbs */
.cn-zordon-orbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}

.cn-zordon-orbs.cn-orbs-small {
    gap: 6px;
    margin-bottom: 8px;
}

.cn-zordon-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: zordonDotPulse 2s ease-in-out infinite;
}

.cn-orbs-small .cn-zordon-dot {
    width: 12px;
    height: 12px;
}

.cn-dot-pink {
    background: radial-gradient(circle at 30% 30%, #ff9ff3, #f368e0);
    box-shadow: 0 0 15px rgba(243, 104, 224, 0.6);
    animation-delay: 0s;
}

.cn-dot-cyan {
    background: radial-gradient(circle at 30% 30%, #48dbfb, #0abde3);
    box-shadow: 0 0 15px rgba(10, 189, 227, 0.6);
    animation-delay: 0.1s;
}

.cn-dot-yellow {
    background: radial-gradient(circle at 30% 30%, #ffeaa7, #fdcb6e);
    box-shadow: 0 0 15px rgba(253, 203, 110, 0.6);
    animation-delay: 0.2s;
}

.cn-dot-blue {
    background: radial-gradient(circle at 30% 30%, #74b9ff, #0984e3);
    box-shadow: 0 0 15px rgba(9, 132, 227, 0.6);
    animation-delay: 0.3s;
}

.cn-dot-orange {
    background: radial-gradient(circle at 30% 30%, #ffeaa7, #e17055);
    box-shadow: 0 0 15px rgba(225, 112, 85, 0.6);
    animation-delay: 0.4s;
}

@keyframes zordonDotPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.15); opacity: 1; }
}

.cn-demo-guidance-card.cn-guide-compact {
    flex-direction: row;
    max-width: 320px;
    padding: 16px 20px;
    gap: 12px;
}

.cn-demo-guidance-orb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.cn-demo-guidance-orb-small {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.cn-demo-step {
    font-size: 0.75rem;
    color: rgba(0, 255, 200, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.cn-demo-guidance-content {
    text-align: center;
}

.cn-guide-compact .cn-demo-guidance-content {
    text-align: left;
}

.cn-demo-guidance-content h3 {
    font-size: 1.2rem;
    color: #00ffc8;
    margin-bottom: 10px;
    font-weight: 600;
}

.cn-demo-guidance-content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

.cn-demo-guidance-content strong {
    color: #00ffc8;
}

.cn-demo-guidance-arrow {
    width: 28px;
    height: 28px;
    color: #00ffc8;
    animation: guideArrowBounce 1s ease-in-out infinite;
}

/* Demo button highlights */
.cn-demo-highlight {
    animation: demoHighlight 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 25px rgba(0, 255, 200, 0.6),
        0 0 50px rgba(0, 255, 200, 0.4),
        inset 0 0 15px rgba(0, 255, 200, 0.15) !important;
    border-color: #00ffc8 !important;
    position: relative;
}

.cn-demo-highlight::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(0, 255, 200, 0.5);
    border-radius: inherit;
    animation: demoRing 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes demoHighlight {
    0%, 100% { 
        box-shadow: 
            0 0 25px rgba(0, 255, 200, 0.6),
            0 0 50px rgba(0, 255, 200, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 0 35px rgba(0, 255, 200, 0.8),
            0 0 70px rgba(0, 255, 200, 0.6);
        transform: scale(1.02);
    }
}

@keyframes demoRing {
    0%, 100% { 
        opacity: 0.5;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.05);
    }
}

.cn-demo-disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
    filter: grayscale(50%);
}

/* Request Access Popup */
.cn-request-access-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cn-request-access-overlay.active {
    opacity: 1;
}

.cn-request-access-card {
    background: linear-gradient(135deg, 
        rgba(20, 30, 50, 0.98) 0%,
        rgba(30, 45, 75, 0.95) 50%,
        rgba(20, 30, 50, 0.98) 100%);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 24px;
    padding: 40px;
    max-width: 480px;
    text-align: center;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 255, 200, 0.1);
}

.cn-request-access-header {
    margin-bottom: 24px;
}

.cn-demo-complete-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.2), rgba(0, 255, 150, 0.1));
    border: 1px solid rgba(0, 255, 200, 0.4);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #00ffc8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.cn-request-access-header h2 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 12px;
}

.cn-request-access-header p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.cn-request-access-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    padding: 20px;
    background: rgba(0, 255, 200, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 200, 0.1);
}

.cn-feature-check {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

.cn-request-access-cta p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
}

.cn-request-access-btn {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.3), rgba(0, 255, 150, 0.2));
    border: 1px solid rgba(0, 255, 200, 0.5);
    border-radius: 12px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 12px;
}

.cn-request-access-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.4), rgba(0, 255, 150, 0.3));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 255, 200, 0.3);
}

.cn-continue-demo-btn {
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-continue-demo-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

/* Footer */
.cn-social-strategy-cal-footer {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-social-strategy-cal-skip {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-social-strategy-cal-skip:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

/* Individual Slot Card */
.cn-slot-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-slot-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.cn-slot-card:last-child {
    margin-bottom: 0;
}

/* Slot Card Left (Status Dot) */
.cn-slot-card-left {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.cn-slot-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cn-slot-dot-empty {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cn-slot-dot-active {
    background: #00ffc8;
    border: 2px solid #00ffc8;
    box-shadow: 0 0 8px rgba(0, 255, 200, 0.5);
    animation: slotDotPulse 2s ease-in-out infinite;
}

.cn-slot-dot-filled {
    background: #00ffc8;
    border: 2px solid #00ffc8;
}

.cn-slot-locked {
    background: #ef4444;
    border: 2px solid #ef4444;
}

@keyframes slotDotPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 200, 0.4); }
    50% { box-shadow: 0 0 12px rgba(0, 255, 200, 0.7); }
}

/* Slot Card Main Content */
.cn-slot-card-main {
    flex: 1;
    min-width: 0;
}

.cn-slot-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.cn-slot-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Badges */
.cn-slot-status-badge {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.cn-status-empty {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.cn-status-required {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

.cn-status-filled {
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.15);
}

.cn-status-locked {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* Slot Card Prompt */
.cn-slot-card-prompt {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slot Card Meta */
.cn-slot-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-slot-date {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.02em;
}

.cn-slot-type-chip {
    font-size: 0.5rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cn-chip-single {
    color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
}

.cn-chip-announcement {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

.cn-chip-album {
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.15);
}

/* Slot Card Hint */
.cn-slot-card-hint {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    margin-top: 4px;
}

/* Active Slot Card */
.cn-slot-card-active {
    background: rgba(0, 255, 200, 0.08);
    border-color: rgba(0, 255, 200, 0.3);
}

.cn-slot-card-active .cn-slot-label {
    color: #00ffc8;
}

.cn-slot-card-active .cn-slot-card-prompt {
    color: #00ffc8;
    font-weight: 500;
}

/* Selected Slot Card (via click) */
.cn-slot-card-selected {
    background: rgba(0, 255, 200, 0.12);
    border-color: #00ffc8;
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.2);
}

/* Hover Slot Card (from spine dot hover) - VERY VISIBLE highlight */
.cn-slot-card-hover {
    background: rgba(0, 255, 200, 0.18) !important;
    border-color: rgba(0, 255, 200, 0.7) !important;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.5), 0 0 40px rgba(0, 255, 200, 0.2), inset 0 0 30px rgba(0, 255, 200, 0.1) !important;
    transform: scale(1.02);
    transition: all 0.15s ease;
}

/* Anchor hover gets red highlight */
.cn-slot-anchor.cn-slot-card-hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 40px rgba(239, 68, 68, 0.2), inset 0 0 30px rgba(239, 68, 68, 0.1) !important;
}

/* Selected Slot Card (from spine dot click) - persistent highlight */
.cn-slot-card-selected {
    background: rgba(0, 255, 200, 0.15) !important;
    border-color: rgba(0, 255, 200, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.4), inset 0 0 25px rgba(0, 255, 200, 0.08);
}

/* Selected anchor gets red glow instead */
.cn-slot-anchor.cn-slot-card-selected {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4), inset 0 0 25px rgba(239, 68, 68, 0.08);
}

/* Anchor Slot Card (RED styling for locked arcs) */
.cn-slot-anchor {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    cursor: default;
}

.cn-slot-anchor:hover,
.cn-slot-anchor.cn-slot-card-hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
}

.cn-slot-anchor .cn-slot-label {
    color: #ef4444;
    font-weight: 600;
}

.cn-slot-anchor .cn-slot-date {
    color: #ef4444;
    font-weight: 700;
}

.cn-slot-anchor .cn-slot-status-badge {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

/* ==========================================================================
   SLOT ACTIONS PANEL (Bottom of sidebar)
   ========================================================================== */
.cn-slot-actions-panel {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.cn-slot-actions-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-slot-action-btn {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cn-slot-action-btn svg {
    width: 14px;
    height: 14px;
}

.cn-slot-action-primary {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 200, 180, 0.1));
    border: 1px solid rgba(0, 255, 200, 0.4);
    color: #00ffc8;
}

.cn-slot-action-primary:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.25), rgba(0, 200, 180, 0.2));
    border-color: #00ffc8;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 255, 200, 0.25);
}

.cn-slot-action-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.cn-slot-action-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ==========================================================================
   WHAT ARTIST DID - Collapsible Section
   ========================================================================== */
.cn-what-artist-did-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-what-artist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cn-what-artist-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cn-what-artist-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.cn-what-artist-expand {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease;
}

.cn-what-artist-content {
    padding: 0 14px 14px;
    transition: all 0.3s ease;
}

.cn-what-artist-content.collapsed {
    display: none;
}

.cn-what-artist-moment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.cn-what-artist-image {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
}

.cn-what-artist-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin: 0;
}

/* ==========================================================================
   SPINE DOT HOVER/SELECTION STATES (Bidirectional sync)
   ========================================================================== */
.cn-thin-node.cn-dot-hover,
.cn-builder-tile.cn-dot-hover {
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.cn-thin-node.cn-dot-selected,
.cn-builder-tile.cn-dot-selected {
    transform: scale(1.4);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.6);
    border-color: #00ffc8 !important;
}

/* END Spine Slot Stack */

/* Old sidebar header - kept for compatibility */
.cn-te-sidebar-header-old {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cn-te-sidebar-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.cn-te-sidebar-label-top {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(0, 255, 255, 0.6);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cn-te-sidebar-count {
    font-size: 14px;
    font-weight: 700;
    color: #00ffff;
}

/* Current Moment Section */
.cn-te-moment-section {
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.05) 0%, transparent 100%);
    border-radius: 16px 16px 0 0;
}

.cn-te-moment-category {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000;
    background: #00ffff;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.cn-te-moment-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

/* What Olivia Did Section - Original */
.cn-te-olivia-section {
    background: rgba(139, 92, 246, 0.05);
}

.cn-te-olivia-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* ======================================================== */
/* ANIMATED OLIVIA + BUDGET SECTION (SLIMMED) */
/* ======================================================== */
.cn-te-olivia-budget-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(0, 255, 255, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 6px; /* SLIMMED from 8px */
    margin: 8px 10px 0; /* SLIMMED from 12px 12px 0 */
    padding: 10px 12px !important; /* SLIMMED from 14px 16px */
    position: relative;
    overflow: hidden;
}

/* BUDGET HEADER BOX - Separates "What Olivia Did" from Ideas */
.cn-te-budget-header-box {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 6px;
    margin: 8px 10px;
    padding: 8px 12px;
    text-align: center;
}

.cn-te-budget-header-box .cn-te-budget-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 3px;
}

.cn-te-budget-header-box .cn-te-budget-value {
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
}

.cn-te-budget-header-box .cn-te-budget-subtitle {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.cn-te-olivia-budget-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 92, 246, 0.1),
        rgba(0, 255, 255, 0.1),
        transparent
    );
    animation: oliviaSectionShimmer 4s linear infinite;
}

@keyframes oliviaSectionShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.cn-te-olivia-intro {
    position: relative;
    z-index: 1;
}

.cn-te-olivia-line {
    margin-bottom: 6px; /* SLIMMED from 10px */
}

.cn-te-olivia-line:last-child {
    margin-bottom: 0;
}

/* Olivia Header with Image */
.cn-te-olivia-header {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.cn-te-olivia-image-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: visible;
}

.cn-te-olivia-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.cn-te-olivia-image-pulse {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 8px;
    border: 2px solid rgba(0, 255, 255, 0.5);
    animation: olivia-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes olivia-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
        border-color: rgba(0, 255, 255, 0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
        border-color: rgba(0, 255, 255, 0.8);
    }
}

.cn-te-olivia-content {
    flex: 1;
    min-width: 0;
}

/* Glowing Text Animation */
.cn-te-glow-text {
    animation: glow-text 3s ease-in-out infinite;
}

@keyframes glow-text {
    0%, 100% {
        text-shadow: 0 0 4px rgba(0, 255, 255, 0.3);
        color: rgba(255, 255, 255, 0.85);
    }
    50% {
        text-shadow: 0 0 12px rgba(0, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.3);
        color: rgba(255, 255, 255, 1);
    }
}

/* ========== CAMPAIGN SELECTOR CARDS ========== */
.cn-campaign-selector {
    padding: 50px 20px 20px;
    max-width: 900px;
    margin: 0 auto 10px;
    box-sizing: border-box;
    overflow: visible;
}

.cn-campaign-selector-header {
    text-align: center;
    margin-bottom: 20px;
}

.cn-campaign-selector-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: 0.5px;
}

.cn-campaign-selector-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 16px 0;
    line-height: 1.65;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.cn-campaign-selector-action {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(100, 200, 180, 0.9);
    margin: 0;
    letter-spacing: 0.3px;
}

.cn-campaign-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0;
}

@media (max-width: 768px) {
    .cn-campaign-cards-row {
        grid-template-columns: 1fr;
    }
}

.cn-campaign-card {
    background: linear-gradient(135deg, rgba(10, 15, 25, 0.95), rgba(5, 10, 20, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.cn-campaign-card:hover {
    border-color: rgba(0, 255, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.cn-campaign-card.active {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
}

.cn-campaign-card[data-campaign="paranoia"].active {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.15);
}

.cn-campaign-card-media {
    position: relative;
    height: 160px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.cn-campaign-card-media img,
.cn-campaign-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cn-campaign-card:hover .cn-campaign-card-media img,
.cn-campaign-card:hover .cn-campaign-card-media video {
    transform: scale(1.05);
}

.cn-campaign-card-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(10, 15, 25, 1), transparent);
}

.cn-campaign-card-gradient.paranoia {
    background: linear-gradient(to top, rgba(20, 10, 15, 1), transparent);
}

.cn-campaign-card-content {
    padding: 16px 20px 20px;
}

.cn-campaign-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
}

.cn-campaign-card-artist {
    font-size: 13px;
    color: #00ffff;
    margin: 0 0 12px;
}

.cn-campaign-card[data-campaign="paranoia"] .cn-campaign-card-artist {
    color: #ef4444;
}

.cn-campaign-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cn-campaign-card-type {
    font-size: 9px;
    font-weight: 700;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.cn-campaign-card-type.paranoia {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.cn-campaign-card-year {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-campaign-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cn-campaign-tag {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.cn-campaign-tag.paranoia {
    border-color: rgba(239, 68, 68, 0.2);
}

/* Campaign Card Poster Image - Shows while video loads */
.cn-campaign-card-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.cn-campaign-card-poster.has-video {
    z-index: 2; /* Sits above video until video is ready */
}

/* Lazy loaded video styling */
.cn-lazy-video {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cn-lazy-video.cn-video-loaded {
    opacity: 1;
}

/* Demo Start Prompt - Call to action under campaign cards */
.cn-demo-start-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 25px auto 5px;
    padding: 14px 28px;
    max-width: fit-content;
    background: linear-gradient(135deg, 
        rgba(255, 50, 200, 0.15) 0%, 
        rgba(100, 50, 255, 0.1) 100%);
    border: 1px solid rgba(255, 50, 200, 0.4);
    border-radius: 30px;
    animation: demoPromptPulse 2s ease-in-out infinite;
}

.cn-demo-start-arrow {
    color: #ff32c8;
    animation: demoArrowBounce 1s ease-in-out infinite;
}

.cn-demo-start-arrow svg {
    display: block;
}

.cn-demo-start-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
    text-shadow: 0 0 10px rgba(255, 50, 200, 0.4);
}

@keyframes demoPromptPulse {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(255, 50, 200, 0.2),
            0 4px 15px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 50, 200, 0.4);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 50, 200, 0.4),
            0 4px 20px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 50, 200, 0.6);
    }
}

@keyframes demoArrowBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Hide prompt once demo has started */
body.cn-demo-study-focus .cn-demo-start-prompt,
body.cn-demo-moment-spotlight .cn-demo-start-prompt {
    display: none;
}

/* Campaign Selector Glass Panel - Matches Zordon modal styling */
.cn-campaign-selector-glass-panel {
    position: relative;
    max-width: 600px;
    margin: 30px auto 0;
    padding: 28px 36px;
    
    /* Frosted glass - same as Zordon onboarding modal */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    
    text-align: center;
    overflow: hidden;
}

/* Gradient overlay - same as Zordon modal */
.cn-campaign-selector-glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        transparent 50%
    );
    pointer-events: none;
    border-radius: 20px;
}

.cn-glass-panel-primary {
    position: relative;
    z-index: 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 16px 0;
    line-height: 1.65;
}

.cn-glass-panel-secondary {
    position: relative;
    z-index: 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.cn-glass-panel-tertiary {
    position: relative;
    z-index: 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    line-height: 1.55;
}

/* Film Strip Helper Text */
.film-strip-helper {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 auto 15px;
    max-width: 450px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* Action CTAs Helper */
.action-ctas-helper {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin: 12px auto 0;
    max-width: 400px;
}

/* Story Play Helper */
.story-play-helper {
    text-align: center;
    margin: 20px auto;
    padding: 16px 24px;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    max-width: 500px;
}

.story-play-helper-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Viewing Badge */
.cn-campaign-viewing-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 255, 255, 0.2);
    border: 1px solid rgba(0, 255, 255, 0.5);
    color: #00ffff;
    font-size: 8px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
    z-index: 10;
}

.cn-campaign-viewing-badge.paranoia {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

/* Campaign Switch Flash Animation */
#cinema-preview-section.campaign-switch-flash {
    animation: campaignSwitchPulse 0.5s ease;
}

@keyframes campaignSwitchPulse {
    0% { box-shadow: inset 0 0 0 2px rgba(0, 255, 255, 0); }
    50% { box-shadow: inset 0 0 0 2px rgba(0, 255, 255, 0.5); }
    100% { box-shadow: inset 0 0 0 2px rgba(0, 255, 255, 0); }
}

#cinema-preview-section[data-active-campaign="paranoia"].campaign-switch-flash {
    animation: campaignSwitchPulseParanoia 0.5s ease;
}

@keyframes campaignSwitchPulseParanoia {
    0% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0); }
    50% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.5); }
    100% { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0); }
}

/* Campaign Switcher in Sidebar - Keep compact since main cards are primary */
.cn-te-campaign-switcher-section {
    padding: 6px 8px !important;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.cn-te-campaign-switcher {
    display: flex;
    gap: 6px;
}

.cn-te-campaign-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cn-te-campaign-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.cn-te-campaign-btn.active {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.4);
}

.cn-te-campaign-btn.active[data-campaign="paranoia"] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
}

.cn-campaign-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cn-campaign-name {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.cn-campaign-artist {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
}

/* View Ideas Link in sidebar */
.cn-te-view-ideas-link {
    display: block;
    font-size: 9px;
    color: #a78bfa;
    text-decoration: none;
    padding: 8px 10px;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 6px;
    transition: all 0.25s ease;
    line-height: 1.4;
}

.cn-te-view-ideas-link:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.12));
    border-color: #a78bfa;
    color: #c4b5fd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.cn-te-view-ideas-link span {
    float: right;
    font-size: 12px;
}

.cn-te-olivia-line-1 {
    opacity: 0;
    transform: translateY(10px);
    animation: oliviaLineIn 0.5s ease forwards;
    animation-delay: 0.1s;
}

.cn-te-olivia-line-2 {
    opacity: 0;
    transform: translateY(10px);
    animation: oliviaLineIn 0.5s ease forwards;
    animation-delay: 0.3s;
}

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

.cn-te-olivia-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #a78bfa;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.cn-te-olivia-budget-section .cn-te-olivia-text {
    font-size: 10px; /* SLIMMED from 12px */
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin: 0;
    font-style: italic;
}

.cn-te-budget-intro,
.cn-te-budget-outro {
    font-size: 9px; /* SLIMMED from 11px */
    color: rgba(255, 255, 255, 0.6);
}

.cn-te-budget-value-animated {
    display: inline-block;
    font-size: 10px; /* SLIMMED from 12px */
    font-weight: 700;
    color: #00ffff;
    padding: 2px 6px; /* SLIMMED from 2px 8px */
    background: rgba(0, 255, 255, 0.15);
    border-radius: 3px;
    margin: 0 3px;
    animation: budgetPulse 2s ease-in-out infinite;
}

@keyframes budgetPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    }
}

/* More Ideas Button (Translation Engine) - SLIMMED */
.cn-te-more-ideas-btn {
    width: calc(100% - 16px); /* SLIMMED from 24px */
    margin: 8px 8px 6px !important; /* SLIMMED from 12px 12px 8px */
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08)) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #a78bfa !important;
    font-size: 9px !important; /* ADDED to slim */
    padding: 6px 10px !important; /* ADDED to slim */
}

.cn-te-more-ideas-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.15)) !important;
    border-color: #a78bfa !important;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.2) !important;
}

/* Custom Moment Button - SLIMMED */
.cn-te-custom-btn {
    width: calc(100% - 16px); /* SLIMMED from 24px */
    margin: 0 8px 8px !important; /* SLIMMED from 12px */
    background: transparent !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 9px !important; /* SLIMMED from 11px */
    padding: 6px 8px !important; /* SLIMMED from 8px 12px */
}

.cn-te-custom-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(0, 255, 255, 0.3) !important;
    color: rgba(0, 255, 255, 0.8) !important;
}

/* Custom Date Picker Modal */
.cn-custom-date-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cn-custom-date-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cn-custom-date-modal {
    background: rgba(15, 18, 28, 0.98);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.cn-custom-date-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
}

.cn-custom-date-close:hover {
    color: #fff;
}

.cn-custom-date-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.cn-custom-date-subtitle {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 14px;
}

.cn-custom-date-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.cn-custom-date-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-custom-date-card:hover {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
}

.cn-custom-date-day {
    font-size: 11px;
    font-weight: 700;
    color: #00ffff;
    min-width: 50px;
}

.cn-custom-date-event {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-custom-date-new-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-custom-date-new-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

/* Ideas section adjustments */
.cn-te-ideas-section {
    padding: 8px 0 0 !important;
    border-bottom: none !important;
}

.cn-te-sidebar-ideas {
    padding: 0 12px;
}

/* Radio-style translation ideas */
.cn-te-sidebar-idea input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.cn-te-sidebar-idea input[type="radio"]:checked {
    border-color: #00ffff;
    background: transparent;
}

.cn-te-sidebar-idea input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #00ffff;
    border-radius: 50%;
}

.cn-te-sidebar-idea input[type="radio"]:hover {
    border-color: rgba(0, 255, 255, 0.5);
}

/* Budget Section */
.cn-te-budget-section {
    padding: 12px 20px;
}

.cn-te-budget-value {
    font-size: 14px;
    font-weight: 700;
    color: #10b981;
}

/* Ideas Section - SLIMMED */
.cn-te-ideas-section {
    padding-bottom: 8px; /* SLIMMED from 12px */
}

.cn-te-sidebar-ideas {
    display: flex;
    flex-direction: column;
    gap: 6px; /* SLIMMED from 10px */
    margin-bottom: 10px; /* SLIMMED from 14px */
}

.cn-te-sidebar-idea {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* SLIMMED from 10px */
    padding: 6px 8px; /* SLIMMED from 10px 12px */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px; /* SLIMMED from 8px */
    transition: all 0.2s ease;
}

.cn-te-sidebar-idea:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.2);
}

.cn-te-sidebar-idea input[type="checkbox"] {
    flex-shrink: 0;
    width: 14px; /* SLIMMED from 18px */
    height: 14px; /* SLIMMED from 18px */
    margin-top: 2px;
    accent-color: #00ffff;
    cursor: pointer;
}

.cn-te-sidebar-idea input[type="checkbox"]:disabled {
    opacity: 0.5;
}

.cn-te-sidebar-idea label {
    font-size: 10px; /* SLIMMED from 12px */
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.35; /* SLIMMED from 1.4 */
    cursor: pointer;
}

.cn-te-sidebar-idea input:checked + label {
    color: #00ffff;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 255, 255, 0.4);
}

/* Translation in user's spine - highlighted */
.cn-te-sidebar-idea.in-spine {
    background: rgba(0, 255, 200, 0.15);
    border-color: rgba(0, 255, 200, 0.4);
    flex-wrap: wrap;
}

.cn-te-sidebar-idea.in-spine label {
    color: #00ffc8;
    text-decoration: none;
    font-weight: 600;
}

.cn-te-sidebar-idea.in-spine input:checked + label {
    text-decoration: none;
}

.cn-te-sidebar-idea .spine-date {
    width: 100%;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 255, 200, 0.2);
    font-size: 11px;
    color: #00ffc8;
    font-weight: 600;
}

/* Highlight sidebar translation when hovering over corresponding spine card */
.cn-te-sidebar-idea.spine-hover {
    background: rgba(255, 0, 255, 0.2);
    border-color: rgba(255, 0, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

.cn-te-sidebar-add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cn-te-sidebar-add:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.15));
    border-color: #00ffff;
    transform: translateY(-1px);
}

.cn-te-sidebar-add.added {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.15));
    border-color: #10b981;
    color: #10b981;
}

.cn-te-sidebar-add.shake {
    animation: sidebarShake 0.4s ease;
}

@keyframes sidebarShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.cn-te-sidebar-add svg {
    width: 14px;
    height: 14px;
}

/* Progress Mini Section */
.cn-te-progress-mini-section {
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.02);
}

.cn-te-progress-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    margin: -8px -12px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.cn-te-progress-mini:hover {
    background: rgba(0, 255, 200, 0.05);
}

/* ==========================================================================
   SIDEBAR - PLAN FOCUS SECTION
   ========================================================================== */
.cn-te-plan-focus-section {
    padding: 16px 20px;
    background: rgba(0, 255, 200, 0.03);
    border-top: 1px solid rgba(0, 255, 200, 0.1);
    border-bottom: 1px solid rgba(0, 255, 200, 0.1);
}

.cn-te-plan-focus-header {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cn-te-plan-focus-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(0, 255, 200, 0.8);
    text-transform: uppercase;
}

.cn-te-plan-focus-type {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #00ffff;
    text-transform: uppercase;
    background: rgba(0, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cn-te-plan-focus-targets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cn-te-target-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.cn-te-target-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.cn-te-target-label svg {
    width: 12px;
    height: 12px;
    color: rgba(0, 255, 255, 0.6);
}

.cn-te-target-count {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #00ffff;
}

.cn-te-target-count span {
    color: #00ffc8;
}

.cn-te-plan-focus-helper {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin: 10px 0 0;
    line-height: 1.4;
}

/* ==========================================================================
   SIDEBAR - VIEW BUTTONS
   ========================================================================== */
.cn-te-view-btns-section {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px !important;
}

.cn-te-sidebar-view-btn {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(0, 20, 40, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(0, 255, 255, 0.7);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
}

.cn-te-sidebar-view-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.4);
    color: #00ffff;
}

.cn-te-sidebar-view-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cn-te-birdseye-btn {
    background: rgba(0, 255, 0, 0.05);
    border-color: rgba(0, 255, 0, 0.2);
    color: rgba(0, 255, 0, 0.7);
}

.cn-te-birdseye-btn:hover {
    background: rgba(0, 255, 0, 0.12);
    border-color: rgba(0, 255, 0, 0.4);
    color: #00ff00;
}

.cn-te-content-cal-btn {
    flex: 1 1 100%;
    background: rgba(255, 200, 0, 0.05);
    border-color: rgba(255, 200, 0, 0.2);
    color: rgba(255, 200, 0, 0.7);
}

.cn-te-content-cal-btn:hover {
    background: rgba(255, 200, 0, 0.12);
    border-color: rgba(255, 200, 0, 0.4);
    color: #ffc800;
}

/* ==========================================================================
   CAMPAIGN SPINE MODAL (Clean, Centered)
   ========================================================================== */
.cn-spine-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200010;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.cn-spine-modal-overlay.active {
    display: flex;
}

body.spine-modal-open {
    overflow: hidden;
}

.cn-spine-modal {
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(10, 15, 25, 0.98), rgba(5, 10, 20, 0.99));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.1);
}

.cn-spine-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.cn-spine-modal-close:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.3);
    color: #ff5555;
}

.cn-spine-modal-close svg {
    width: 16px;
    height: 16px;
}

.cn-spine-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cn-spine-modal-title-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-spine-modal-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    margin: 0;
    font-family: 'Courier New', monospace;
}

.cn-spine-modal-subtitle {
    font-size: 10px;
    color: rgba(0, 255, 255, 0.6);
    letter-spacing: 1px;
}

.cn-spine-modal-stats {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

.cn-spine-modal-stats strong {
    color: #00ffff;
}

.cn-spine-modal-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.cn-spine-modal-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ff00, #00ffff, #a855f7);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
    transition: width 0.5s ease;
}

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

/* Horizontal Spine Modal Layout */
.cn-spine-modal.cn-spine-modal-horizontal {
    max-width: 95%;
    width: 1200px;
}

.cn-spine-modal-horizontal .cn-spine-modal-title-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* DNA Logo */
.cn-spine-dna-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ffff;
    animation: dna-pulse 3s ease-in-out infinite;
}

@keyframes dna-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.cn-spine-modal-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* DNA Breakdown Section */
.cn-spine-dna-breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.cn-dna-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cn-dna-badge.sour {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.15));
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #a855f7;
}

.cn-dna-badge.paranoia {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(153, 27, 27, 0.15));
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.cn-dna-badge.custom {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

.cn-dna-badge-percent {
    font-weight: 700;
    margin-left: 2px;
}

/* DNA Progress Bar - Multi-segment */
.cn-spine-modal-progress.cn-dna-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    overflow: hidden;
}

.cn-dna-segment {
    height: 100%;
    transition: width 0.5s ease;
    position: relative;
}

.cn-dna-segment.cn-dna-sour {
    background: linear-gradient(90deg, #a855f7, #6366f1);
}

.cn-dna-segment.cn-dna-paranoia {
    background: linear-gradient(90deg, #ef4444, #991b1b);
}

.cn-dna-segment.cn-dna-custom {
    background: linear-gradient(90deg, #00ffff, #10b981);
}

/* Legacy styles kept for compatibility */
.cn-spine-blueprint-influence {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.cn-influence-label {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}

.cn-influence-badge {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(0, 255, 255, 0.4);
    color: #00ffff;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 9px;
}

.cn-influence-percent {
    color: #10b981;
    font-weight: 700;
    font-size: 11px;
}

/* Animated Progress Bar */
.cn-spine-modal-progress.cn-animated-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.cn-progress-animated {
    position: relative;
    background: linear-gradient(90deg, #00ff00, #00ffff, #a855f7, #ff00ff, #00ffff, #00ff00);
    background-size: 300% 100%;
    animation: progressGradient 4s linear infinite;
}

.cn-progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressGlowMove 2s ease-in-out infinite;
}

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

@keyframes progressGlowMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Horizontal Body & Strip */
.cn-spine-horizontal-body {
    padding: 16px 24px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.cn-spine-modal-strip {
    display: flex;
    gap: 12px;
    padding-bottom: 8px;
    min-width: max-content;
}

.cn-spine-modal-strip .cn-spine-slot {
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
}

.cn-spine-modal-body {
    padding: 20px 24px;
    max-height: 400px;
    overflow-y: auto;
}

.cn-spine-modal-section-title {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
}

.cn-spine-modal-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

/* Spine Slot - Filled */
.cn-spine-slot {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px;
    position: relative;
    transition: all 0.2s ease;
}

.cn-spine-slot--filled:hover {
    border-color: rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.cn-spine-slot--filled.translated {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.05);
}

/* Campaign-specific source styling */
.cn-spine-slot--filled.source-sour {
    border-left: 3px solid #a855f7;
}

.cn-spine-slot--filled.source-paranoia {
    border-left: 3px solid #ef4444;
}

.cn-spine-slot--filled.source-paranoia.translated {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.cn-spine-source-label {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
}

.cn-spine-slot.source-sour .cn-spine-source-label {
    color: rgba(168, 85, 247, 0.7);
}

.cn-spine-slot.source-paranoia .cn-spine-source-label {
    color: rgba(239, 68, 68, 0.7);
}

.cn-spine-slot-cat {
    font-size: 8px;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.cn-spine-slot-title {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-spine-slot-date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

.cn-spine-slot-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 7px;
    padding: 2px 5px;
    background: rgba(168, 85, 247, 0.3);
    color: #a855f7;
    border-radius: 3px;
    text-transform: uppercase;
}

.cn-spine-slot-delete {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    font-size: 12px;
}

.cn-spine-slot--filled:hover .cn-spine-slot-delete {
    opacity: 1;
}

.cn-spine-slot-delete:hover {
    background: rgba(255, 50, 50, 0.8);
    color: #fff;
}

/* Spine Slot - Empty */
.cn-spine-slot--empty {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.cn-spine-slot-empty-icon {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 4px;
}

.cn-spine-slot-empty-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
}

.cn-spine-slot-empty-cat {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.cn-spine-slot-empty-hint {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 4px;
}

.cn-spine-slot--empty {
    cursor: pointer;
}

.cn-spine-slot--empty:hover {
    border-color: rgba(0, 255, 200, 0.4);
    background: rgba(0, 255, 200, 0.05);
}

.cn-spine-slot--empty:hover .cn-spine-slot-empty-icon {
    color: #00ffc8;
    transform: scale(1.2);
}

/* Slot Header Row */
.cn-spine-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* SOUR Source Reference */
.cn-spine-slot-source {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(168, 85, 247, 0.2);
}

.cn-spine-source-label {
    display: block;
    font-size: 7px;
    color: rgba(168, 85, 247, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.cn-spine-source-title {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Category Color Coding */
.cn-spine-slot.cn-spine-card--singles {
    border-left: 3px solid #00ffc8;
}

.cn-spine-slot.cn-spine-card--videos {
    border-left: 3px solid #ff00ff;
}

.cn-spine-slot.cn-spine-card--press {
    border-left: 3px solid #00d4ff;
}

.cn-spine-slot-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    padding: 12px;
}

.cn-spine-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.cn-spine-modal-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-spine-modal-btn.primary {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 255, 0.15));
    border: 1px solid rgba(0, 255, 255, 0.4);
    color: #00ffff;
}

.cn-spine-modal-btn.primary:hover {
    background: rgba(0, 255, 255, 0.25);
}

.cn-spine-modal-btn.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.cn-spine-modal-btn.secondary:hover {
    border-color: rgba(255, 50, 50, 0.3);
    color: rgba(255, 100, 100, 0.8);
}

/* ==========================================================================
   CONTENT CALENDAR MODAL - Later.com Style
   ========================================================================== */
.cn-content-cal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 200010;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.cn-content-cal-overlay.active {
    display: flex;
}

body.content-cal-open {
    overflow: hidden;
}

.cn-content-cal-modal {
    width: 98%;
    max-width: 1700px;
    height: 94vh;
    background: #080c14;
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 80px rgba(0, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

.cn-content-cal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.cn-content-cal-close:hover {
    background: rgba(255, 50, 50, 0.2);
    color: #ff5555;
}

.cn-content-cal-close svg {
    width: 16px;
    height: 16px;
}

/* Header with platform tabs */
.cn-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
}

.cn-cal-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-cal-title {
    font-size: 16px;
    color: #fff;
    margin: 0;
    font-weight: 600;
}

.cn-cal-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-cal-platform-tabs {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px;
    border-radius: 8px;
}

.cn-cal-platform-tab {
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-cal-platform-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
}

.cn-cal-platform-tab.active {
    background: rgba(0, 255, 255, 0.15);
    color: #00ffff;
}

.cn-cal-platform-tab svg {
    width: 16px;
    height: 16px;
}

/* Main content area */
.cn-cal-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Media Library Sidebar - Larger with vertical scroll */
.cn-cal-media-sidebar {
    width: 240px;
    min-width: 240px;
    background: rgba(0, 20, 40, 0.5);
    border-right: 1px solid rgba(0, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.cn-cal-media-header {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    flex-shrink: 0;
}

.cn-cal-upload-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 150, 200, 0.15));
    border: 1px solid rgba(0, 200, 255, 0.4);
    border-radius: 6px;
    color: #00c8ff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-upload-btn:hover {
    background: rgba(0, 200, 255, 0.25);
}

.cn-cal-media-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-cal-media-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-media-tab.active {
    color: #00ffff;
    border-bottom: 2px solid #00ffff;
}

.cn-cal-media-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
}

/* Film strip style media items - uniform like campaign timeline */
.cn-cal-media-item {
    width: 100%;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 20, 30, 0.8);
    border-radius: 6px;
    cursor: grab;
    position: relative;
    border: 2px solid rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Subtle scanline overlay on media */
.cn-cal-media-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 255, 255, 0.02) 2px,
        rgba(0, 255, 255, 0.02) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.cn-cal-media-item:hover {
    border-color: #00ffff;
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(0, 255, 255, 0.3);
    z-index: 10;
}

.cn-cal-media-video-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 7px;
    padding: 1px 3px;
    background: rgba(0, 0, 0, 0.9);
    color: #ff0000;
    border-radius: 2px;
    font-weight: bold;
}

/* Calendar Content */
.cn-cal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cn-cal-week-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-cal-nav-btn {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cn-cal-date-range {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.cn-cal-view-toggle {
    margin-left: auto;
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    padding: 2px;
}

.cn-cal-view-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.cn-cal-view-btn.active {
    background: rgba(0, 255, 255, 0.15);
    color: #00ffff;
}

/* Generate from Spine button */
.cn-cal-generate-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 200, 255, 0.08));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 6px;
    color: #00ffff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    margin-right: 16px;
}

.cn-cal-generate-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 255, 0.15));
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
}

.cn-cal-generate-btn svg {
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cn-cal-generate-btn:hover svg {
    animation-duration: 1s;
}

/* Week Grid */
.cn-cal-week-grid {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 255, 0.3) transparent;
}

.cn-cal-week-grid::-webkit-scrollbar {
    width: 6px;
}

.cn-cal-week-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.cn-cal-week-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 3px;
}

.cn-cal-grid-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 2px solid rgba(0, 255, 255, 0.15);
    position: sticky;
    top: 0;
    background: #0a0f18;
    z-index: 5;
}

.cn-cal-time-col {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.cn-cal-day-header {
    padding: 14px 10px;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cn-cal-day-header.today {
    background: rgba(0, 255, 255, 0.05);
    color: #00ffff;
}

.cn-cal-day-num {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-top: 4px;
}

.cn-cal-day-header.today .cn-cal-day-num {
    color: #00ffff;
}

.cn-cal-grid-row {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    min-height: 80px;
}

.cn-cal-time-label {
    padding: 10px 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    text-align: right;
    font-family: 'Courier New', monospace;
    background: rgba(0, 0, 0, 0.1);
}

.cn-cal-cell {
    min-height: 80px;
    border-left: 1px solid rgba(255, 255, 255, 0.03);
    padding: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.2s ease;
}

.cn-cal-cell:hover {
    background: rgba(0, 255, 255, 0.03);
}

.cn-cal-cell.drop-target {
    background: rgba(0, 255, 255, 0.08);
    border: 2px dashed rgba(0, 255, 255, 0.4);
}

/* Post Card in Calendar - Compact, platform color coded */
.cn-cal-post-card {
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid;
    background: rgba(10, 20, 30, 0.95);
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.cn-cal-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 255, 0.1);
    z-index: 10;
}

.cn-cal-post-card.selected {
    border-width: 2px;
    box-shadow: 0 0 20px currentColor;
}

/* Instagram - Pink/Magenta gradient */
.cn-cal-post-card.platform-instagram {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.2), rgba(131, 58, 180, 0.15));
    border-color: rgba(225, 48, 108, 0.5);
}

.cn-cal-post-card.platform-instagram .cn-cal-post-platform-icon {
    color: #E1306C;
}

/* TikTok - Black/Teal */
.cn-cal-post-card.platform-tiktok {
    background: linear-gradient(135deg, rgba(0, 242, 234, 0.15), rgba(255, 0, 80, 0.1));
    border-color: rgba(0, 242, 234, 0.5);
}

.cn-cal-post-card.platform-tiktok .cn-cal-post-platform-icon {
    color: #00f2ea;
}

/* Twitter/X - Blue */
.cn-cal-post-card.platform-twitter {
    background: linear-gradient(135deg, rgba(29, 161, 242, 0.2), rgba(29, 161, 242, 0.1));
    border-color: rgba(29, 161, 242, 0.5);
}

.cn-cal-post-card.platform-twitter .cn-cal-post-platform-icon {
    color: #1DA1F2;
}

/* YouTube - Red */
.cn-cal-post-card.platform-youtube {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.1));
    border-color: rgba(255, 0, 0, 0.5);
}

.cn-cal-post-card.platform-youtube .cn-cal-post-platform-icon {
    color: #FF0000;
}

/* Draft posts - dashed border */
.cn-cal-post-card.status-draft {
    border-style: dashed;
    opacity: 0.7;
}

.cn-cal-post-card.status-draft::after {
    content: 'Draft';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 7px;
    padding: 1px 3px;
    background: rgba(255, 200, 0, 0.8);
    color: #000;
    border-radius: 2px;
    text-transform: uppercase;
}

/* Post thumbnail - compact style */
.cn-cal-post-thumb {
    width: 100%;
    height: 50px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 20, 30, 0.6);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Asset required indicator */
.cn-cal-post-thumb.asset-required::after {
    content: '📷 Required';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 200, 0, 0.8);
    font-size: 9px;
    font-weight: 600;
}

.cn-cal-post-time-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 8px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #00ffff;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    z-index: 2;
}

.cn-cal-post-meta {
    padding: 6px 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-height: 36px;
}

.cn-cal-post-platform-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-cal-post-platform-icon svg {
    width: 12px;
    height: 12px;
}

.cn-cal-post-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-cal-post-type {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

.cn-cal-post-desc {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spine link indicator */
.cn-cal-post-spine-link {
    font-size: 7px;
    color: rgba(0, 255, 255, 0.5);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.cn-cal-post-spine-link svg {
    width: 8px;
    height: 8px;
}

/* Inspector Panel - Right side detail view */
.cn-cal-inspector {
    width: 350px;
    min-width: 350px;
    background: rgba(0, 15, 30, 0.95);
    border-left: 1px solid rgba(0, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cn-cal-inspector.hidden {
    display: none;
}

.cn-cal-inspector-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cn-cal-inspector-title {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cn-cal-inspector-close {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cn-cal-inspector-close:hover {
    background: rgba(255, 50, 50, 0.15);
    color: #ff5555;
}

.cn-cal-inspector-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cn-cal-inspector-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cn-cal-inspector-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cn-cal-inspector-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    transition: all 0.2s ease;
}

.cn-cal-inspector-input:focus {
    outline: none;
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
}

.cn-cal-inspector-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    min-height: 100px;
    resize: vertical;
}

.cn-cal-inspector-textarea:focus {
    outline: none;
    border-color: rgba(0, 255, 255, 0.4);
}

.cn-cal-inspector-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cn-cal-platform-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cn-cal-platform-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cn-cal-platform-btn.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

.cn-cal-inspector-asset {
    width: 100%;
    aspect-ratio: 16/9;
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-inspector-asset:hover {
    border-color: rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.03);
}

.cn-cal-inspector-asset.has-asset {
    border-style: solid;
    background-size: cover;
    background-position: center;
}

.cn-cal-inspector-spine-link {
    padding: 12px;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-inspector-spine-link:hover {
    background: rgba(0, 255, 255, 0.1);
}

.cn-cal-inspector-spine-link svg {
    color: #00ffff;
}

.cn-cal-inspector-spine-link span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.cn-cal-inspector-footer {
    padding: 16px;
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    display: flex;
    gap: 8px;
}

.cn-cal-inspector-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-inspector-btn.primary {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 255, 0.15));
    border: 1px solid rgba(0, 255, 255, 0.4);
    color: #00ffff;
}

.cn-cal-inspector-btn.primary:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 200, 255, 0.25));
}

.cn-cal-inspector-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.cn-cal-inspector-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cn-cal-inspector-btn.danger {
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 50, 50, 0.2);
    color: rgba(255, 100, 100, 0.8);
}

.cn-cal-inspector-btn.danger:hover {
    background: rgba(255, 50, 50, 0.2);
}

/* Auto-fill Prompt Modal */
.cn-cal-autofill-prompt {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    background: linear-gradient(135deg, #0a1520 0%, #061018 100%);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 12px;
    padding: 20px;
    z-index: 200010;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 255, 255, 0.1);
    animation: slideUp 0.3s ease;
}

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

.cn-cal-autofill-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.cn-cal-autofill-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 200, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ffff;
    flex-shrink: 0;
}

.cn-cal-autofill-icon svg {
    width: 20px;
    height: 20px;
}

.cn-cal-autofill-content {
    flex: 1;
}

.cn-cal-autofill-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.cn-cal-autofill-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.cn-cal-autofill-moment {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cn-cal-autofill-moment-thumb {
    width: 60px;
    height: 40px;
    background: rgba(0, 20, 30, 0.8);
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}

.cn-cal-autofill-moment-info {
    flex: 1;
}

.cn-cal-autofill-moment-category {
    font-size: 9px;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cn-cal-autofill-moment-title {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.cn-cal-autofill-posts {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.cn-cal-autofill-posts strong {
    color: #00ffff;
}

.cn-cal-autofill-actions {
    display: flex;
    gap: 8px;
}

.cn-cal-autofill-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-autofill-btn.primary {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 255, 0.15));
    border: 1px solid rgba(0, 255, 255, 0.4);
    color: #00ffff;
}

.cn-cal-autofill-btn.primary:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 200, 255, 0.25));
    transform: translateY(-1px);
}

.cn-cal-autofill-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.cn-cal-autofill-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cn-cal-autofill-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-cal-autofill-checkbox input {
    accent-color: #00ffff;
}

/* Status badges on posts */
.cn-cal-post-card.status-scheduled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #00ff00, #00cc00);
}

.cn-cal-post-card.status-idea {
    opacity: 0.5;
    border-style: dotted;
}

.cn-cal-post-card.status-idea::after {
    content: '💡';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 8px;
}

/* ==========================================================================
   SPINE PANEL - BLUEPRINT STYLE HEADER
   ========================================================================== */
.cn-spine-blueprint-header {
    margin: -20px -20px 16px;
    padding: 16px 20px;
    background: rgba(0, 8, 20, 0.95);
    border-bottom: 1px solid rgba(0, 255, 255, 0.15);
}

.cn-spine-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cn-spine-toggle-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    color: #00ffff;
    font-size: 14px;
    cursor: pointer;
}

.cn-spine-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-spine-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    font-family: 'Courier New', monospace;
}

.cn-spine-subtitle {
    font-size: 9px;
    color: rgba(0, 255, 255, 0.5);
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

.cn-spine-counts-header {
    display: flex;
    gap: 16px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

.cn-spine-counts-header strong {
    color: #00ffff;
}

.cn-spine-missing-copy {
    font-size: 12px;
    font-style: italic;
    color: rgba(0, 255, 255, 0.6);
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
}

/* Campaign DNA Bar */
.cn-spine-dna {
    margin-bottom: 12px;
}

.cn-spine-dna-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
    font-family: 'Courier New', monospace;
}

.cn-spine-dna-label strong {
    color: #00ffff;
}

.cn-dna-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 6px;
    color: #00ffff;
}

.cn-spine-dna-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.cn-spine-dna-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #a855f7);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Blueprint Source Badge */
.cn-spine-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #a855f7;
    font-family: 'Courier New', monospace;
}

.cn-spine-source-dot {
    width: 8px;
    height: 8px;
    background: #00ff00;
    border-radius: 50%;
    animation: pulseDot 2s ease infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.cn-spine-source-count {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

/* ==========================================================================
   SPINE TRACK - HORIZONTAL SCROLLING CARDS
   ========================================================================== */
.cn-spine-track-container {
    margin: 0 -20px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ffff rgba(0, 20, 40, 0.8);
}

.cn-spine-track-container::-webkit-scrollbar {
    height: 8px;
}

.cn-spine-track-container::-webkit-scrollbar-track {
    background: rgba(0, 20, 40, 0.8);
}

.cn-spine-track-container::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #00ff00, #00ffff);
    border-radius: 4px;
}

.cn-spine-track {
    display: flex;
    gap: 12px;
    padding: 12px 0 16px;
    min-height: 160px;
}

/* Spine Card */
.cn-spine-card {
    flex: 0 0 140px;
    min-width: 140px;
    max-width: 160px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: rgba(15, 20, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-spine-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cn-spine-card--event {
    border-color: rgba(0, 255, 255, 0.15);
}

.cn-spine-card--event:hover {
    border-color: rgba(0, 255, 255, 0.35);
}

.cn-spine-card--singles {
    border-color: rgba(168, 85, 247, 0.3);
}

.cn-spine-card--videos {
    border-color: rgba(255, 107, 107, 0.3);
}

.cn-spine-card--press {
    border-color: rgba(255, 193, 7, 0.3);
}

.cn-spine-card-media {
    width: 100%;
    height: 70px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), rgba(168, 85, 247, 0.05));
    overflow: hidden;
}

.cn-spine-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 50, 60, 0.4), rgba(20, 10, 40, 0.4));
    color: rgba(0, 255, 255, 0.4);
}

.cn-spine-card-body {
    padding: 10px;
}

.cn-spine-card-category {
    display: inline-block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.12);
    color: rgba(0, 255, 255, 0.9);
    margin-bottom: 6px;
    font-family: 'Courier New', monospace;
}

.cn-spine-card-title {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.cn-spine-card-date {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Courier New', monospace;
}

.cn-spine-card-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(168, 85, 247, 0.2);
    color: rgba(168, 85, 247, 0.9);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.cn-spine-card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    font-size: 14px;
}

.cn-spine-card:hover .cn-spine-card-delete {
    opacity: 1;
}

.cn-spine-card-delete:hover {
    background: rgba(255, 50, 50, 0.8);
    color: #fff;
}

/* Ghost Card */
.cn-spine-card--ghost {
    flex: 0 0 140px;
    min-width: 140px;
    padding: 20px 12px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.02), rgba(0, 0, 0, 0.3));
    border: 1px dashed rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.cn-spine-card--ghost:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(0, 0, 0, 0.4));
    border-color: rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.cn-spine-card--ghost.cn-spine-card--type-singles {
    border-color: rgba(168, 85, 247, 0.3);
}

.cn-spine-card--ghost.cn-spine-card--type-singles:hover {
    border-color: rgba(168, 85, 247, 0.5);
}

.cn-spine-card--ghost.cn-spine-card--type-singles .cn-spine-ghost-icon {
    color: rgba(168, 85, 247, 0.5);
    border-color: rgba(168, 85, 247, 0.3);
}

.cn-spine-card--ghost.cn-spine-card--type-videos {
    border-color: rgba(255, 107, 107, 0.3);
}

.cn-spine-card--ghost.cn-spine-card--type-videos:hover {
    border-color: rgba(255, 107, 107, 0.5);
}

.cn-spine-card--ghost.cn-spine-card--type-videos .cn-spine-ghost-icon {
    color: rgba(255, 107, 107, 0.5);
    border-color: rgba(255, 107, 107, 0.3);
}

.cn-spine-card--ghost.cn-spine-card--type-press {
    border-color: rgba(255, 193, 7, 0.3);
}

.cn-spine-card--ghost.cn-spine-card--type-press:hover {
    border-color: rgba(255, 193, 7, 0.5);
}

.cn-spine-card--ghost.cn-spine-card--type-press .cn-spine-ghost-icon {
    color: rgba(255, 193, 7, 0.5);
    border-color: rgba(255, 193, 7, 0.3);
}

.cn-spine-ghost-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    color: rgba(0, 255, 255, 0.4);
}

.cn-spine-ghost-title {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

.cn-spine-ghost-hint {
    font-size: 8px;
    color: rgba(0, 255, 255, 0.4);
    font-style: italic;
}

/* Goals Row */
.cn-spine-goals-row {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 255, 255, 0.08);
    margin-top: 12px;
}

.cn-spine-goals-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
}

.cn-spine-goals-btn:hover {
    background: rgba(0, 255, 255, 0.05);
    border-color: rgba(0, 255, 255, 0.2);
    color: #00ffff;
}

/* ==========================================================================
   BIRDSEYE VIEW BASE STYLES
   ========================================================================== */
.cn-birdseye-month-column {
    background: rgba(0, 8, 20, 0.9);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.cn-birdseye-month-header {
    padding: 10px 8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.cn-birdseye-month-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #00ffff;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

.cn-birdseye-month-count {
    display: block;
    font-size: 9px;
    color: rgba(0, 255, 0, 0.6);
    margin-top: 4px;
    font-family: 'Courier New', monospace;
}

.cn-birdseye-events-container {
    flex: 1;
    padding: 8px 4px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-birdseye-no-events {
    text-align: center;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.2);
    padding: 20px 4px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.cn-birdseye-event-chip {
    background: rgba(20, 20, 30, 0.9);
    border-radius: 6px;
    border-left: 3px solid #00ffff;
    padding: 8px 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-birdseye-event-chip:hover {
    background: rgba(30, 30, 50, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
}

.cn-birdseye-event-chip.is-spine-event {
    border-left-color: #a855f7;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(20, 20, 30, 0.9));
}

.cn-birdseye-event-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.cn-birdseye-day {
    font-size: 9px;
    font-weight: 700;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.cn-birdseye-time {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Courier New', monospace;
}

.cn-birdseye-event-title {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-birdseye-event-category {
    font-size: 8px;
    color: rgba(0, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-birdseye-spine-badge {
    margin-top: 4px;
    font-size: 7px;
    background: rgba(168, 85, 247, 0.3);
    color: #a855f7;
    padding: 2px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* ==========================================================================
   BIRDSEYE VIEW - FULLSCREEN 12 MONTH CALENDAR
   ========================================================================== */
.cn-birdseye-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200010;
    background: linear-gradient(135deg, #000814 0%, #001122 50%, #000814 100%);
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cn-birdseye-fullscreen.active {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

body.birdseye-fullscreen-open {
    overflow: hidden;
}

/* Matrix scan animation */
.cn-birdseye-fullscreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.01) 2px,
        rgba(0, 255, 0, 0.01) 4px
    );
    animation: matrixScan 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes matrixScan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Hacker Terminal Header - Matching campaign-network */
.cn-birdseye-header {
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 2px solid #00ff00;
    padding: 1rem 2rem;
    font-family: 'Courier New', monospace;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cn-birdseye-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-birdseye-title {
    font-size: 1.5rem;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
}

.cn-birdseye-subtitle {
    font-size: 0.75rem;
    color: rgba(0, 255, 0, 0.7);
    letter-spacing: 1px;
}

.cn-birdseye-header-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cn-birdseye-max-view-btn {
    background: linear-gradient(135deg, rgba(0,255,100,0.2), rgba(0,255,255,0.2));
    border: 2px solid #00ff00;
    color: #00ff00;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 0.85rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.cn-birdseye-max-view-btn:hover {
    background: linear-gradient(135deg, rgba(0,255,100,0.4), rgba(0,255,255,0.4));
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.4);
    transform: translateY(-2px);
}

.cn-birdseye-max-view-btn svg {
    width: 16px;
    height: 16px;
}

/* Legacy header bar styles for compatibility */
.cn-birdseye-header-bar {
    display: none; /* Replaced by .cn-birdseye-header */
}

.cn-birdseye-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-birdseye-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #00ff00;
    text-shadow: 0 0 15px #00ff00;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

.cn-birdseye-header-subtitle {
    font-size: 11px;
    color: rgba(0, 255, 255, 0.7);
    letter-spacing: 1.5px;
    font-family: 'Courier New', monospace;
}

/* Year Navigation Controls - Matching campaign-network */
.cn-birdseye-year-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.9);
    padding: 1rem 2rem;
    border-top: 1px solid #00ff00;
    position: relative;
    z-index: 10;
}

.cn-birdseye-year-btn {
    background: linear-gradient(135deg, #001122, #002244);
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.cn-birdseye-year-btn:hover {
    background: linear-gradient(135deg, #002244, #003366);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    transform: translateY(-1px);
}

.cn-birdseye-year-display {
    font-size: 2rem;
    color: #00ffff;
    font-weight: bold;
    text-shadow: 0 0 20px #00ffff;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
}

.cn-birdseye-recurring-btn {
    background: linear-gradient(135deg, #1a0033, #2d0066);
    border: 1px solid #00d1ff;
    color: #00d1ff;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-birdseye-recurring-btn:hover {
    background: linear-gradient(135deg, #2d0066, #4d00aa);
    box-shadow: 0 0 20px rgba(0, 209, 255, 0.3);
    transform: translateY(-1px);
}

/* MAX VIEW MODE */
.cn-birdseye-fullscreen.max-view .cn-birdseye-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 2rem !important;
    padding-bottom: 1.5rem !important;
    scroll-behavior: smooth !important;
}

.cn-birdseye-fullscreen.max-view .cn-birdseye-month-column {
    min-width: 300px !important;
    flex-shrink: 0 !important;
}

/* Birdseye Dock - Campaign Network Style */
.cn-birdseye-dock {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(0, 10, 20, 0.95);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 50px;
    padding: 10px 20px;
    z-index: 100000;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.cn-dock-item {
    width: 44px;
    height: 44px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ffff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.cn-dock-item:hover {
    background: rgba(0, 255, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.3);
}

.cn-dock-item.active {
    background: rgba(0, 255, 255, 0.3);
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.cn-dock-item.cn-dock-close {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.5);
    color: #ff6666;
}

.cn-dock-item.cn-dock-close:hover {
    background: rgba(255, 50, 50, 0.4);
    box-shadow: 0 8px 20px rgba(255, 50, 50, 0.3);
}

/* Dock tooltips */
.cn-dock-item::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.9);
    color: #00ffff;
    font-size: 10px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    margin-bottom: 8px;
}

.cn-dock-item:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

.cn-birdseye-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 50, 50, 0.2);
    border: 2px solid rgba(255, 50, 50, 0.5);
    border-radius: 50%;
    color: #ff6666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 24px;
    font-weight: bold;
    z-index: 100;
}

.cn-birdseye-close-btn:hover {
    background: rgba(255, 50, 50, 0.4);
    border-color: #ff5555;
    color: #fff;
    transform: scale(1.1);
}

.cn-birdseye-close-btn svg {
    width: 24px;
    height: 24px;
}

/* Fullscreen Body - Grid Container */
.cn-birdseye-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
    position: relative;
    z-index: 5;
}

/* Centered Background Logo */
.cn-birdseye-body::after {
    content: 'CAMPAIGN.NETWORK';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-family: 'Courier New', monospace;
    letter-spacing: 8px;
    color: rgba(0, 255, 0, 0.08);
    text-shadow: 0 0 40px rgba(0, 255, 0, 0.05);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

#cn-birdseye-grid-fullscreen {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    background: rgba(0, 255, 0, 0.08);
    min-height: calc(100vh - 180px);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#cn-birdseye-grid-fullscreen .cn-birdseye-month-column {
    background: rgba(0, 8, 20, 0.95);
    min-height: 400px;
}

#cn-birdseye-grid-fullscreen .cn-birdseye-month-header {
    padding: 14px 10px;
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid rgba(0, 255, 255, 0.25);
}

#cn-birdseye-grid-fullscreen .cn-birdseye-month-name {
    font-size: 14px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

#cn-birdseye-grid-fullscreen .cn-birdseye-month-count {
    font-size: 10px;
    margin-top: 6px;
}

#cn-birdseye-grid-fullscreen .cn-birdseye-events-container {
    padding: 12px 8px;
    gap: 8px;
}

#cn-birdseye-grid-fullscreen .cn-birdseye-event-chip {
    padding: 10px 8px;
    border-radius: 8px;
}

#cn-birdseye-grid-fullscreen .cn-birdseye-day {
    font-size: 10px;
}

#cn-birdseye-grid-fullscreen .cn-birdseye-event-title {
    font-size: 11px;
}

#cn-birdseye-grid-fullscreen .cn-birdseye-no-events {
    padding: 40px 8px;
    font-size: 10px;
}

/* Fullscreen Footer */
.cn-birdseye-footer {
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    text-align: center;
    position: relative;
    z-index: 10;
}


.cn-birdseye-logo-text {
    font-size: 14px;
    font-family: 'Courier New', monospace;
    letter-spacing: 4px;
    color: rgba(0, 255, 0, 0.25);
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
}

/* Responsive Birdseye Fullscreen */
@media (max-width: 1400px) {
    #cn-birdseye-grid-fullscreen {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 900px) {
    #cn-birdseye-grid-fullscreen {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    #cn-birdseye-grid-fullscreen {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cn-birdseye-header-title {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* ==========================================================================
   ADD MODAL - TIME & TARGET OPTIONS
   ========================================================================== */
.cn-add-modal-time-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cn-add-modal-time {
    width: 120px !important;
    padding: 10px 12px !important;
}

.cn-add-modal-time-hint {
    font-size: 10px;
    color: rgba(0, 255, 255, 0.5);
    font-style: italic;
}

.cn-add-modal-target-options {
    display: flex;
    gap: 12px;
}

.cn-add-modal-target-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(0, 20, 40, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cn-add-modal-target-option:hover {
    background: rgba(0, 30, 50, 0.5);
    border-color: rgba(0, 255, 255, 0.3);
}

.cn-add-modal-target-option.selected {
    background: rgba(0, 255, 200, 0.08);
    border-color: rgba(0, 255, 200, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.15);
}

.cn-add-modal-target-option input[type="radio"] {
    display: none;
}

.cn-add-modal-target-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 200, 0.1);
    border-radius: 8px;
    color: #00ffc8;
}

.cn-add-modal-target-icon svg {
    width: 16px;
    height: 16px;
}

.cn-add-modal-target-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-add-modal-target-text strong {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
}

.cn-add-modal-target-text small {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-te-progress-mini-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.cn-te-progress-mini-count {
    font-size: 13px;
    font-weight: 700;
    color: #00ffff;
}

/* CTA Section */
.cn-te-cta-section {
    padding: 16px 20px 20px;
}

.cn-te-translate-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    background: linear-gradient(135deg, #00ffff, #00e5e5);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-te-translate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.4),
                0 0 40px rgba(0, 255, 255, 0.2);
}

.cn-te-translate-btn svg {
    width: 18px;
    height: 18px;
}

.cn-te-translate-btn span {
    font-size: 16px;
    margin-left: auto;
}

/* Legacy support for old classes */
.cn-te-anchor-slot {
    width: 50px;
    height: 50px;
    border: 2px dashed rgba(0, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cn-te-anchor-slot.filled {
    border-style: solid;
    background: rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.cn-te-anchor-placeholder {
    color: rgba(0, 255, 255, 0.4);
}

.cn-te-anchor-placeholder svg {
    width: 24px;
    height: 24px;
}

/* Progress Circle (legacy) */
.cn-te-progress-section {
    display: flex;
    justify-content: center;
}

.cn-te-progress-circle {
    position: relative;
    width: 100px;
    height: 100px;
}

.cn-te-progress-circle svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.cn-te-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
}

.cn-te-progress-fill {
    fill: none;
    stroke: url(#progressGradient);
    stroke: #00ffff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 264;
    stroke-dashoffset: 264;
    transition: stroke-dashoffset 0.6s ease;
}

.cn-te-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.cn-te-progress-percent {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.cn-te-progress-label {
    display: block;
    font-size: 8px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

/* Campaign DNA (legacy) */
.cn-te-dna-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin-bottom: 10px;
}

.cn-te-dna-segment {
    height: 100%;
    transition: width 0.5s ease;
}

.cn-te-dna-sour {
    background: linear-gradient(90deg, #00ffff, #00e5e5);
}

.cn-te-dna-other {
    background: linear-gradient(90deg, #a78bfa, #8b5cf6);
}

.cn-te-dna-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-te-dna-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.cn-te-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.cn-te-dot-sour {
    background: #00ffff;
}

.cn-te-dot-other {
    background: #a78bfa;
}

/* Budget Section */
.cn-te-budget-value {
    font-size: 14px;
    font-weight: 700;
    color: #00ff88;
}

/* Ideas Section */
.cn-te-sidebar-ideas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.cn-te-sidebar-idea {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cn-te-sidebar-idea input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    margin-top: 2px;
}

.cn-te-sidebar-idea input[type="checkbox"]:checked {
    background: #00ffff;
    border-color: #00ffff;
}

.cn-te-sidebar-idea input[type="checkbox"]:checked::after {
    content: '✓';
    display: block;
    text-align: center;
    font-size: 10px;
    color: #000;
    line-height: 14px;
}

.cn-te-sidebar-idea label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    line-height: 1.4;
}

.cn-te-sidebar-add {
    width: 100%;
    padding: 10px 16px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    color: #00ffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.cn-te-sidebar-add:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: #00ffff;
}

.cn-te-sidebar-add.added {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.cn-te-sidebar-add svg {
    width: 14px;
    height: 14px;
}

/* Gap Section */
.cn-te-gap-section {
    background: rgba(255, 180, 0, 0.05);
    margin: 0 -20px -20px;
    padding: 20px;
    border-radius: 0 0 16px 16px;
    border-top: 1px solid rgba(255, 180, 0, 0.15);
}

.cn-te-gap-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cn-te-gap-icon {
    color: #ffb400;
    font-size: 14px;
}

.cn-te-gap-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffb400;
    text-transform: uppercase;
}

.cn-te-gap-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px;
    line-height: 1.4;
}

.cn-te-sidebar-btn {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 180, 0, 0.1);
    border: 1px solid rgba(255, 180, 0, 0.3);
    border-radius: 8px;
    color: #ffb400;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.cn-te-sidebar-btn:hover {
    background: rgba(255, 180, 0, 0.2);
    border-color: #ffb400;
}

.cn-te-sidebar-btn span {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.cn-te-sidebar-btn:hover span {
    transform: translateX(4px);
}

/* Hide sidebar on smaller screens or when not in cinema preview */
@media (max-width: 1400px) {
    .cn-te-sidebar {
        right: 10px;
        width: 250px;
    }
}

@media (max-width: 1200px) {
    .cn-te-sidebar {
        display: none;
    }
}

/* ==========================================================================
   SIDEBAR ACTION BUTTONS - BUILD MODE
   ========================================================================== */

/* Add This Moment Button - Primary action for direct-copy categories */
.cn-te-add-moment-btn {
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 200, 180, 0.1));
    border: 2px solid rgba(0, 255, 200, 0.4);
    border-radius: 8px;
    color: #00ffc8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 10px;
}

.cn-te-add-moment-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.25), rgba(0, 200, 180, 0.2));
    border-color: #00ffc8;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 255, 200, 0.3);
}

.cn-te-add-moment-btn svg {
    width: 16px;
    height: 16px;
}

/* Translate This Moment Button - For non-achievable categories */
.cn-te-translate-btn {
    width: 100%;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.cn-te-translate-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: #a78bfa;
}

.cn-te-translate-btn svg {
    width: 16px;
    height: 16px;
}

.cn-te-translate-btn span {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.cn-te-translate-btn:hover span {
    transform: translateX(4px);
}

/* Actions Section */
.cn-te-actions-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==========================================================================
   ADD MOMENT MODAL - CAMPAIGN SPINE BUILDER
   ========================================================================== */

.cn-add-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 5, 15, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none; /* Ensure no clicks when hidden */
    visibility: hidden; /* Double ensure hidden state */
}

.cn-add-modal-overlay.active {
    display: flex;
    animation: modalFadeIn 0.3s ease;
    pointer-events: auto; /* Enable clicks when active */
    visibility: visible;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cn-add-modal {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    background: rgba(8, 20, 35, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 20px;
    padding: 0;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 255, 200, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
    from { 
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Close Button */
.cn-add-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.cn-add-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: rotate(90deg);
}

.cn-add-modal-close svg {
    width: 18px;
    height: 18px;
}

/* MODAL INSIDE TE OVERLAY - Must be above TE z-index of 9999999 */
.cn-add-modal-overlay.inside-te {
    z-index: 99999999 !important;
    background: rgba(0, 10, 20, 0.9);
    backdrop-filter: blur(10px);
}

.cn-add-modal-overlay.inside-te .cn-add-modal {
    max-width: 520px;
    max-height: 85vh;
    box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.9),
        0 0 120px rgba(0, 255, 200, 0.25),
        0 0 0 1px rgba(0, 255, 200, 0.2);
}

/* Modal Header */
.cn-add-modal-header {
    padding: 30px 30px 20px;
    border-bottom: 1px solid rgba(0, 255, 200, 0.15);
}

.cn-add-modal-category {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.1);
    border: 1px solid rgba(0, 255, 200, 0.3);
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.cn-add-modal-title {
    font-size: 1.3rem;
    font-weight: 400;
    color: #00ffc8;
    margin: 0;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.cn-add-modal-cursor {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Modal Content */
.cn-add-modal-content {
    padding: 25px 30px;
}

/* Modal Fields */
.cn-add-modal-field {
    margin-bottom: 25px;
}

.cn-add-modal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #00ffc8;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cn-add-modal-bullet {
    color: #00ffc8;
}

.cn-add-modal-optional {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}

.cn-add-modal-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 20, 30, 0.8);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.cn-add-modal-input:focus {
    outline: none;
    border-color: rgba(0, 255, 200, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.1);
}

.cn-add-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Date Picker */
.cn-add-modal-dates {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-date-nav {
    width: 36px;
    height: 36px;
    background: rgba(0, 255, 200, 0.1);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 50%;
    color: #00ffc8;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.cn-date-nav:hover {
    background: rgba(0, 255, 200, 0.2);
    border-color: #00ffc8;
}

.cn-date-options {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px 0;
    scroll-behavior: smooth;
    flex: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cn-date-options::-webkit-scrollbar {
    display: none;
}

.cn-date-btn {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: rgba(0, 20, 30, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    min-width: 80px;
}

.cn-date-btn:hover {
    border-color: rgba(0, 255, 200, 0.3);
    background: rgba(0, 255, 200, 0.05);
}

.cn-date-btn.selected {
    background: rgba(0, 255, 200, 0.15);
    border-color: #00ffc8;
    color: #fff;
}

.cn-date-day {
    font-size: 15px;
    font-weight: 700;
}

.cn-date-weekday {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-date-btn.selected .cn-date-weekday {
    color: rgba(0, 255, 200, 0.8);
}

/* Counts Toward */
.cn-add-modal-counts {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(0, 255, 200, 0.05);
    border: 1px solid rgba(0, 255, 200, 0.15);
    border-radius: 8px;
    margin-bottom: 25px;
}

.cn-add-modal-counts-icon {
    color: #00ffc8;
}

.cn-add-modal-counts-icon svg {
    width: 18px;
    height: 18px;
}

.cn-add-modal-counts-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.cn-add-modal-counts-text strong {
    color: #00ffc8;
}

/* Same Day Timing */
.cn-add-modal-timing {
    padding: 16px;
    background: rgba(255, 180, 0, 0.05);
    border: 1px solid rgba(255, 180, 0, 0.2);
    border-radius: 10px;
    margin-bottom: 25px;
}

.cn-add-modal-timing-header {
    font-size: 12px;
    font-weight: 600;
    color: #ffb400;
    margin-bottom: 10px;
}

.cn-add-modal-timing-related {
    padding: 10px 14px;
    background: rgba(0, 20, 30, 0.6);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 12px;
}

.cn-add-modal-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.cn-add-modal-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00ffc8;
}

/* Asset Upload */
.cn-add-modal-assets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cn-asset-upload {
    padding: 20px 15px;
    background: rgba(0, 20, 30, 0.6);
    border: 2px dashed rgba(0, 255, 200, 0.2);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cn-asset-upload:hover {
    border-color: rgba(0, 255, 200, 0.4);
    background: rgba(0, 255, 200, 0.03);
}

.cn-asset-upload.has-file {
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.05);
}

.cn-asset-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.cn-asset-label {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.cn-asset-label span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.cn-asset-action {
    font-size: 10px;
    color: rgba(0, 255, 200, 0.6);
}

.cn-asset-upload.has-file .cn-asset-action {
    color: #10b981;
    font-size: 9px;
    word-break: break-all;
}

/* Modal Footer */
/* Social Posts Preview Section */
.cn-add-modal-social-section {
    margin-top: 20px;
    padding: 16px;
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 10px;
}

.cn-add-modal-social-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cn-add-modal-social-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-add-modal-social-title svg {
    opacity: 0.7;
}

.cn-add-modal-social-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.cn-add-modal-social-toggle input {
    accent-color: #00ffff;
    width: 16px;
    height: 16px;
}

.cn-add-modal-social-posts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.cn-add-modal-social-posts::-webkit-scrollbar {
    width: 3px;
}

.cn-add-modal-social-posts::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 2px;
}

/* Social Post Card - Compact Event Card Style */
.cn-social-post-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 10, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cn-social-post-card:hover {
    background: rgba(0, 20, 40, 0.9);
    border-color: rgba(0, 255, 255, 0.2);
}

.cn-social-post-date {
    font-size: 10px;
    color: #00ffff;
    font-weight: 600;
    white-space: nowrap;
    min-width: 90px;
    font-family: 'Courier New', monospace;
}

.cn-social-post-content {
    flex: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-social-post-platforms {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cn-social-post-platforms .platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-social-post-platforms .platform-icon svg {
    width: 12px;
    height: 12px;
}

.cn-add-modal-social-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.social-summary-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.social-summary-count strong {
    color: #00ffff;
    font-weight: 700;
}

.social-summary-platforms {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

/* Make modal wider for posts section */
.cn-add-modal-with-posts,
.cn-add-modal-with-slots {
    max-width: 520px;
}

/* Slot Selector in Modal */
.cn-add-modal-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cn-slot-btn {
    flex: 1;
    min-width: 100px;
    padding: 12px 10px;
    background: rgba(0, 10, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.cn-slot-btn:hover:not(.filled) {
    border-color: rgba(0, 255, 255, 0.4);
    background: rgba(0, 20, 40, 0.9);
}

.cn-slot-btn.selected {
    border-color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.cn-slot-btn.filled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 50, 50, 0.3);
}

.cn-slot-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #00ffff;
    margin-bottom: 4px;
}

.cn-slot-status {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-slot-btn.filled .cn-slot-status {
    color: rgba(0, 255, 200, 0.7);
}

.cn-slots-full {
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 10px;
    margin-top: 8px;
}

/* Spine Slots Display in Sidebar */
#sidebar-spine-slots {
    padding: 8px 0;
}

.cn-spine-category {
    margin-bottom: 12px;
}

.cn-spine-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 4px;
}

.cn-spine-category-label {
    font-size: 10px;
    font-weight: 700;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-spine-category-count {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Courier New', monospace;
}

.cn-spine-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cn-spine-slot {
    flex: 1;
    min-width: 70px;
    max-width: 100px;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

.cn-spine-slot.empty {
    background: rgba(0, 20, 40, 0.4);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    cursor: pointer;
    text-align: center;
}

.cn-spine-slot.empty:hover {
    border-color: rgba(0, 255, 255, 0.4);
    background: rgba(0, 30, 50, 0.6);
}

.cn-spine-slot.filled {
    background: rgba(0, 50, 60, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cn-spine-slot-empty-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2px;
}

.cn-spine-slot-empty-hint {
    font-size: 8px;
    color: rgba(0, 255, 255, 0.4);
}

.cn-spine-slot-date {
    font-size: 10px;
    color: #00ffff;
    font-weight: 600;
    margin-bottom: 2px;
}

.cn-spine-slot-name {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 14px;
}

.cn-spine-slot-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    background: rgba(255, 100, 100, 0.2);
    border: none;
    border-radius: 50%;
    color: rgba(255, 100, 100, 0.8);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-spine-slot.filled:hover .cn-spine-slot-clear {
    opacity: 1;
}

.cn-spine-slot-clear:hover {
    background: rgba(255, 100, 100, 0.4);
    color: #fff;
}

.cn-add-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.cn-add-modal-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.cn-add-modal-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.cn-add-modal-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.cn-add-modal-btn-primary {
    background: linear-gradient(135deg, #00ffc8 0%, #00ccaa 100%);
    border: none;
    color: #000;
}

.cn-add-modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 255, 200, 0.4);
}

.cn-add-modal-btn-primary svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   SPINE ADDED NOTIFICATION
   ========================================================================== */

.cn-spine-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    border-radius: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.4);
    z-index: 1000000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-spine-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cn-spine-notif-icon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-spine-notif-icon svg {
    width: 14px;
    height: 14px;
}

.cn-spine-notif-text {
    font-size: 14px;
}

.cn-spine-notif-text strong {
    font-weight: 700;
}

/* Generic Notification */
.cn-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 20px;
    background: rgba(10, 20, 30, 0.95);
    border: 1px solid var(--notif-color, #00ffff);
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 255, 0.2);
    z-index: 1000000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cn-notification-icon {
    width: 22px;
    height: 22px;
    background: var(--notif-color, #00ffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.cn-notification-icon svg {
    width: 12px;
    height: 12px;
}

.cn-notification-text {
    font-size: 13px;
}

.cn-notification-success {
    border-color: #00ffaa;
}

.cn-notification-error {
    border-color: #ff5555;
}

/* Modal open body state */
body.cn-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   CAMPAIGN SPINE PANEL - ENHANCED TIMELINE VIEW
   ========================================================================== */

.cn-spine-timeline {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    margin-bottom: 20px;
}

.cn-spine-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-spine-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: rgba(0, 255, 200, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 255, 200, 0.5);
}

.cn-spine-empty-icon svg {
    width: 28px;
    height: 28px;
}

.cn-spine-empty p {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px;
}

.cn-spine-empty span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* Spine Item */
.cn-spine-item {
    position: relative;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: rgba(0, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.cn-spine-item:hover {
    background: rgba(0, 30, 40, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
}

.cn-spine-item.original {
    border-left: 3px solid #00ffc8;
}

.cn-spine-item.translated {
    border-left: 3px solid #a78bfa;
}

/* Spine Item Badge */
.cn-spine-item-badge {
    position: absolute;
    top: 12px;
    right: 50px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 3px;
}

.cn-spine-item-badge.original {
    background: rgba(0, 255, 200, 0.15);
    color: #00ffc8;
    border: 1px solid rgba(0, 255, 200, 0.3);
}

.cn-spine-item-badge.translated {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Spine Item Content */
.cn-spine-item-category {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cn-spine-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    padding-right: 80px;
}

.cn-spine-item-date {
    font-size: 12px;
    color: rgba(0, 255, 200, 0.7);
    margin-bottom: 8px;
}

.cn-spine-item-source {
    font-size: 11px;
    color: rgba(167, 139, 250, 0.8);
    font-style: italic;
    padding: 6px 10px;
    background: rgba(167, 139, 250, 0.08);
    border-radius: 5px;
    margin-top: 8px;
}

.cn-spine-item.original .cn-spine-item-source {
    color: rgba(0, 255, 200, 0.7);
    background: rgba(0, 255, 200, 0.05);
}

.cn-spine-item-status {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: capitalize;
    margin-top: 8px;
}

.cn-spine-item-status.draft {
    background: rgba(255, 180, 0, 0.1);
    color: #ffb400;
}

.cn-spine-item-status.scheduled {
    background: rgba(0, 255, 200, 0.1);
    color: #00ffc8;
}

.cn-spine-item-status.completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Remove Button */
.cn-spine-item-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.cn-spine-item:hover .cn-spine-item-remove {
    opacity: 1;
}

.cn-spine-item-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.cn-spine-item-remove svg {
    width: 12px;
    height: 12px;
}

/* Progress Rows */
.cn-te-spine-progress {
    padding: 16px;
    background: rgba(0, 20, 30, 0.5);
    border-radius: 10px;
    margin-bottom: 20px;
}

.cn-spine-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-spine-progress-row:last-child {
    border-bottom: none;
}

.cn-spine-progress-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.cn-spine-progress-label svg {
    width: 16px;
    height: 16px;
    color: #00ffc8;
}

.cn-spine-progress-count {
    font-size: 14px;
    font-weight: 700;
    color: #00ffc8;
}

/* Panel Footer with secondary button */
.cn-te-spine-panel-footer {
    display: flex;
    gap: 12px;
}

.cn-te-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.cn-te-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* ==========================================================================
   STORY MODE - BUILD MODE LINK ELEMENTS
   ========================================================================== */

/* Story Mode Badge - Shows when viewing a campaign timeline moment */
.story-moment-badge {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    padding: 10px 20px;
    background: rgba(0, 255, 200, 0.1);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 30px;
    color: #00ffc8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 999991;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.story-moment-badge.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.story-moment-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #00ffc8;
    border-radius: 50%;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* View in Build Mode Button */
.story-view-build-btn {
    position: fixed;
    bottom: 100px;
    left: 30px;
    display: none;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 255, 200, 0.08));
    border: 1px solid rgba(0, 255, 200, 0.3);
    color: #00ffc8;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 30px;
    cursor: pointer;
    z-index: 999990;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.story-view-build-btn.visible {
    opacity: 1;
    transform: translateX(0);
}

.story-view-build-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.25), rgba(0, 255, 200, 0.15));
    border-color: #00ffc8;
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 255, 200, 0.2);
}

.story-view-build-btn svg {
    width: 16px;
    height: 16px;
}

/* Card highlight pulse when navigating from Story Mode */
.film-card.highlight-pulse {
    animation: cardHighlight 2s ease;
}

@keyframes cardHighlight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 200, 0);
    }
    25%, 75% {
        box-shadow: 0 0 0 4px rgba(0, 255, 200, 0.4),
                    0 0 40px rgba(0, 255, 200, 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 255, 200, 0.2),
                    0 0 60px rgba(0, 255, 200, 0.4);
    }
}

/* Responsive */
@media (max-width: 700px) {
    .cn-add-modal {
        max-width: 100%;
        margin: 10px;
        border-radius: 12px;
    }
    
    .cn-add-modal-assets {
        grid-template-columns: 1fr 1fr;
    }
    
    .cn-add-modal-header,
    .cn-add-modal-content,
    .cn-add-modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==========================================================================
   SIDEBAR SPINE STACK - Vertical timeline of spine events
   Prominent dates, video autoplay, delete buttons, source references
   ========================================================================== */

/* Spine Stack Container */
.cn-te-spine-stack {
    margin-top: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.cn-te-spine-stack::-webkit-scrollbar {
    width: 3px;
}

.cn-te-spine-stack::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.cn-te-spine-stack::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 200, 0.3);
    border-radius: 2px;
}

/* Spine Stack Header */
.cn-te-spine-stack-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cn-te-spine-stack-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #00ffc8;
    font-weight: 600;
}

.cn-te-spine-stack-count {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

/* Individual Spine Item - Vertical layout with date on top */
.cn-spine-stack-item {
    margin-bottom: 8px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 255, 200, 0.12);
}

.cn-spine-stack-item:hover {
    background: rgba(0, 255, 200, 0.06);
    border-color: rgba(0, 255, 200, 0.25);
}

.cn-spine-stack-item.active {
    border-color: #00ffc8;
    box-shadow: 0 0 12px rgba(0, 255, 200, 0.2);
}

/* Date Badge - PROMINENT */
.cn-spine-stack-date-badge {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 255, 200, 0.08));
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #00ffc8;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 255, 200, 0.1);
}

/* Content row - thumb, info, delete */
.cn-spine-stack-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    position: relative;
}

/* Thumbnail with video */
.cn-spine-stack-thumb {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.4);
}

.cn-spine-stack-thumb img,
.cn-spine-stack-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-spine-stack-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 255, 200, 0.4);
    font-size: 18px;
}

/* Info section */
.cn-spine-stack-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.cn-spine-stack-category {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.cn-spine-stack-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-weight: 500;
}

.cn-spine-stack-source {
    font-size: 9px;
    color: rgba(139, 92, 246, 0.8);
    margin-top: 2px;
    font-style: italic;
}

/* Delete button */
.cn-spine-stack-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 100, 100, 0.15);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: rgba(255, 100, 100, 0.7);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-spine-stack-item:hover .cn-spine-stack-delete {
    opacity: 1;
}

.cn-spine-stack-delete:hover {
    background: rgba(255, 100, 100, 0.3);
    border-color: rgba(255, 100, 100, 0.6);
    color: #ff6464;
}

/* Empty state */
.cn-spine-stack-empty {
    padding: 15px;
    text-align: center;
}

.cn-spine-stack-empty p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    line-height: 1.5;
}

/* Video hover glow when audio plays */
.cn-spine-stack-item.has-video:hover .cn-spine-stack-thumb {
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.3);
}

/* Spine stack section spacing */
.cn-te-spine-stack-section {
    margin-bottom: 15px;
}

/* ==========================================================================
   SIMPLIFIED ADD MODAL
   Cleaner, focused on what matters: name, date, progress
   ========================================================================== */

.cn-add-modal-simplified {
    max-width: 420px;
}

.cn-add-modal-simplified .cn-add-modal-header {
    padding-bottom: 15px;
}

.cn-add-modal-simplified .cn-add-modal-title {
    font-size: 18px;
    margin-bottom: 5px;
}

.cn-add-modal-source {
    font-size: 11px;
    color: rgba(139, 92, 246, 0.8);
    font-style: italic;
    margin: 0;
}

/* Simplified field labels */
.cn-add-modal-simplified .cn-add-modal-label {
    font-size: 11px;
    margin-bottom: 6px;
}

/* Progress section in modal */
.cn-add-modal-progress {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 200, 0.15);
    border-radius: 8px;
    padding: 12px;
    margin-top: 15px;
}

.cn-add-modal-progress-header {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.cn-add-modal-progress-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cn-add-modal-progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-add-modal-progress-item .progress-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    width: 50px;
}

.cn-add-modal-progress-item .progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
}

.cn-add-modal-progress-item .progress-fill {
    height: 100%;
    background: rgba(0, 255, 200, 0.4);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cn-add-modal-progress-item .progress-count {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    width: 30px;
    text-align: right;
}

/* Highlight the one being added */
.cn-add-modal-progress-item.adding .progress-label {
    color: #00ffc8;
    font-weight: 600;
}

.cn-add-modal-progress-item.adding .progress-fill {
    background: linear-gradient(90deg, #00ffc8, #00ff80);
}

.cn-add-modal-progress-item.adding .progress-count {
    color: #00ffc8;
}

/* Progress message */
.cn-add-modal-progress-message {
    margin-top: 10px;
    font-size: 11px;
    text-align: center;
}

.cn-add-modal-progress-message .progress-complete {
    color: #00ff80;
}

.cn-add-modal-progress-message .progress-close {
    color: #ffc800;
}

/* Date buttons with event indicators */
.cn-add-modal-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 65px;
}

.cn-add-modal-date:hover {
    border-color: rgba(0, 255, 200, 0.3);
    background: rgba(0, 255, 200, 0.05);
}

.cn-add-modal-date.selected {
    border-color: #00ffc8;
    background: rgba(0, 255, 200, 0.1);
}

.cn-add-modal-date .date-day {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.cn-add-modal-date .date-weekday {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

/* Date has existing events */
.cn-add-modal-date.has-events {
    border-color: rgba(139, 92, 246, 0.3);
}

.cn-add-modal-date.has-events .date-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #a78bfa;
    font-size: 10px;
}

.cn-add-modal-dates {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 0;
}

/* Dynamic CTA Button - Translate primary state */
.cn-te-add-moment-btn.cn-te-translate-primary {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.15)) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #a78bfa !important;
}

.cn-te-add-moment-btn.cn-te-translate-primary:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.25)) !important;
    border-color: #a78bfa !important;
}

/* Translation Engine Clarity Copy */
.cn-te-apple-clarity {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cn-te-clarity-headline {
    font-size: 13px;
    font-weight: 600;
    color: #00ffc8;
    margin: 0 0 5px;
}

.cn-te-clarity-body {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Translation Card Lift Labels */
.cn-te-card-lift {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-te-card-lift.lift-low {
    background: rgba(0, 255, 128, 0.2);
    color: #00ff80;
    border: 1px solid rgba(0, 255, 128, 0.3);
}

.cn-te-card-lift.lift-medium {
    background: rgba(255, 200, 0, 0.2);
    color: #ffc800;
    border: 1px solid rgba(255, 200, 0, 0.3);
}

.cn-te-card-lift.lift-high {
    background: rgba(255, 100, 100, 0.2);
    color: #ff6464;
    border: 1px solid rgba(255, 100, 100, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cn-spine-plan-targets {
        flex-direction: column;
        gap: 8px;
    }
    
    .cn-spine-plan-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cn-spine-complete-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ====================================================
   USED IDEA STYLING - Shows crossed out with usage info
   ==================================================== */

/* Card marked as used */
.cn-te-floating-card.cn-te-card-used {
    opacity: 0.6;
    filter: grayscale(30%);
}

.cn-te-floating-card.cn-te-card-used::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffc8, transparent);
    transform: translateY(-50%);
    pointer-events: none;
}

.cn-te-floating-card.cn-te-card-used:hover {
    opacity: 0.85;
    filter: grayscale(0%);
}

/* Used info badge */
.cn-te-used-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.25), rgba(0, 200, 160, 0.15));
    border-bottom: 1px solid rgba(0, 255, 200, 0.3);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px 12px 0 0;
}

.cn-te-used-badge {
    padding: 2px 6px;
    background: #00ffc8;
    color: #0a0a0a;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    white-space: nowrap;
}

.cn-te-used-details {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shift card content down when used info is present */
.cn-te-floating-card.cn-te-card-used .cn-te-floating-card-media {
    border-radius: 0;
}

.cn-te-floating-card.cn-te-card-used .cn-te-floating-card-info {
    padding-top: 28px;
}

/* ====================================================
   CRT EFFECT - Translation Engine ONLY
   Adds scanlines and flickering effect to the TE overlay
   ==================================================== */

/* CRT flicker animation - TE only */
@keyframes te-crt-flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}

/* Override CRT overlay when TE is active - add VISIBLE scanlines like Tell Zordon section */
#cn-te-overlay.active .cn-te-crt-overlay {
    /* Make visible */
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10000001 !important;
    background: 
        /* Stronger scanlines - visible horizontal lines */
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 2px,
            transparent 2px,
            transparent 4px
        ),
        /* Vignette darkening */
        radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, 0.5) 100%
        ) !important;
    animation: te-crt-flicker 0.08s infinite !important;
}

/* Add ::before for additional CRT glow/color effect */
#cn-te-overlay.active .cn-te-crt-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Subtle RGB chromatic aberration */
        linear-gradient(
            90deg,
            rgba(255, 0, 100, 0.03) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 255, 200, 0.03) 100%
        );
    pointer-events: none;
    animation: te-crt-color-shift 4s ease-in-out infinite;
}

@keyframes te-crt-color-shift {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Override the ::after for more intensity */
#cn-te-overlay.active .cn-te-crt-overlay::after {
    background: 
        /* Screen curvature glow */
        radial-gradient(
            ellipse at center,
            rgba(0, 255, 200, 0.05) 0%,
            transparent 50%
        ) !important;
    animation: te-crt-flicker 0.1s infinite !important;
}

/* ============================================================
   BUILD MODE SPINE REVAMP - CSS STYLES
   Zordon modals, Build Mode spine, sequential guidance
   ============================================================ */

/* ==========================================================================
   ZORDON MODAL OVERLAY - Base Styles (Intro Flow Glass Style)
   ========================================================================== */
.cn-zordon-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Deep space gradient */
        radial-gradient(ellipse at 30% 20%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(5, 10, 20, 0.98) 0%, rgba(10, 15, 30, 0.99) 100%);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-zordon-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Animated color waves in background */
.cn-zordon-modal-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.08) 0%, transparent 40%);
    animation: zordonModalWaves 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes zordonModalWaves {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* ==========================================================================
   ZORDON MODAL - Liquid Glass Card Style (Matches Intro Flow)
   ========================================================================== */
.cn-zordon-modal {
    position: relative;
    background: 
        /* Inner glow */
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
        /* Base glass */
        linear-gradient(135deg, rgba(20, 25, 40, 0.85) 0%, rgba(15, 20, 35, 0.9) 50%, rgba(10, 15, 30, 0.95) 100%);
    border: 1px solid rgba(0, 255, 200, 0.25);
    border-radius: 24px;
    padding: 40px;
    max-width: 650px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        /* Outer glow */
        0 0 80px rgba(0, 255, 200, 0.12),
        0 0 40px rgba(168, 85, 247, 0.08),
        /* Depth shadow */
        0 30px 100px rgba(0, 0, 0, 0.6),
        /* Inner light */
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transform: scale(0.92) translateY(30px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-zordon-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 200, 0.5) 20%, 
        rgba(168, 85, 247, 0.5) 50%, 
        rgba(0, 212, 255, 0.5) 80%, 
        transparent 100%
    );
    border-radius: 24px 24px 0 0;
}

.cn-zordon-modal-overlay.active .cn-zordon-modal {
    transform: scale(1) translateY(0);
}

/* ==========================================================================
   ZORDON MODAL HEADER - With Animated Orbs
   ========================================================================== */
.cn-zordon-modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.zordon-modal-orbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.zordon-modal-orbs .zordon-orb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.zordon-modal-orbs .zordon-orb:nth-child(1) {
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
    animation-delay: 0s;
}
.zordon-modal-orbs .zordon-orb:nth-child(2) {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    animation-delay: 0.15s;
}
.zordon-modal-orbs .zordon-orb:nth-child(3) {
    background: linear-gradient(135deg, #ffff00, #ffd700);
    animation-delay: 0.3s;
}
.zordon-modal-orbs .zordon-orb:nth-child(4) {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    animation-delay: 0.45s;
}
.zordon-modal-orbs .zordon-orb:nth-child(5) {
    background: linear-gradient(135deg, #ff6b00, #ff9500);
    animation-delay: 0.6s;
}

.zordon-modal-orbs.intensity-3 .zordon-orb {
    width: 14px;
    height: 14px;
    animation-duration: 1s;
}

@keyframes zordonOrbPulse {
    0%, 100% {
        transform: scale(0.8) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2) translateY(-4px);
        opacity: 1;
    }
}

.cn-zordon-modal-title {
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: #00ffc8;
    margin: 0 0 10px 0;
    text-transform: none;
    letter-spacing: 0;
}

.cn-zordon-modal-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   ZORDON MODAL BODY
   ========================================================================== */
.cn-zordon-modal-body {
    margin-bottom: 30px;
}

/* ==========================================================================
   FIRST SINGLE DATE PICKER
   ========================================================================== */
.cn-first-single-dates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 5px;
}

.cn-first-single-date-btn {
    background: rgba(30, 35, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.cn-first-single-date-btn:hover {
    background: rgba(40, 45, 55, 0.9);
    border-color: rgba(0, 255, 200, 0.4);
    transform: translateY(-2px);
}

.cn-first-single-date-btn.selected {
    background: rgba(0, 255, 200, 0.15);
    border-color: #00ffc8;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.2);
}

.cn-first-single-date-btn .date-display {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.cn-first-single-date-btn .date-day {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cn-first-single-date-btn.selected .date-display {
    color: #00ffc8;
}

/* ==========================================================================
   ZORDON PACING MODAL
   ========================================================================== */
.cn-zordon-pacing-modal {
    max-width: 700px;
}

.cn-zordon-pacing-body {
    padding: 0;
}

.cn-zordon-pacing-explanation {
    margin-bottom: 30px;
}

.cn-zordon-pacing-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin: 0 0 15px 0;
}

.cn-zordon-pacing-text strong {
    color: #00ffc8;
}

/* Timeline Preview */
.cn-zordon-timeline-preview {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
}

.cn-zordon-timeline-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
}

.cn-zordon-timeline-item.anchor {
    position: relative;
}

.timeline-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.timeline-marker.single {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.timeline-marker.album {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.5);
}

.timeline-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    color: #fff;
    flex: 1;
}

.timeline-date {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Share Tech Mono', monospace;
}

.timeline-spacing {
    font-size: 0.75rem;
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.cn-zordon-timeline-connector {
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, rgba(0, 255, 200, 0.5) 0%, rgba(0, 255, 200, 0.2) 100%);
    margin-left: 7px;
}

/* Pacing Note */
.cn-zordon-pacing-note {
    background: rgba(0, 255, 200, 0.05);
    border-left: 3px solid #00ffc8;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
}

.cn-zordon-pacing-note p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.cn-zordon-pacing-note p strong {
    color: #00ffc8;
}

.cn-zordon-note-small {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 8px !important;
}

/* ==========================================================================
   ZORDON MODAL FOOTER
   ========================================================================== */
.cn-zordon-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cn-zordon-modal-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cn-zordon-modal-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cn-zordon-modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.cn-zordon-modal-btn.primary {
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    color: #0a0f15;
}

.cn-zordon-modal-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 200, 0.4);
}

/* ==========================================================================
   BUILD MODE SPINE DISPLAY
   ========================================================================== */
.cn-build-mode-spine {
    padding: 20px 15px;
}

.cn-build-spine-header {
    margin-bottom: 20px;
    text-align: center;
}

.cn-build-spine-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    color: #00ffc8;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cn-build-spine-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Spine Timeline */
.cn-build-spine-timeline {
    position: relative;
    padding-left: 30px;
}

.cn-build-spine-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        rgba(0, 255, 200, 0.5) 0%, 
        rgba(168, 85, 247, 0.3) 50%,
        rgba(0, 255, 200, 0.2) 100%
    );
}

/* Spine Moment Base */
.cn-build-spine-moment {
    position: relative;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: rgba(30, 35, 45, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.cn-build-spine-moment:hover {
    background: rgba(40, 45, 55, 0.8);
    border-color: rgba(0, 255, 200, 0.3);
}

/* Spine Moment Markers */
.spine-moment-marker {
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    z-index: 1;
}

.spine-moment-marker.anchor-marker {
    background: linear-gradient(135deg, #ff00ff, #a855f7);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.spine-moment-marker.fillable-marker {
    background: rgba(30, 35, 45, 1);
    border: 2px solid rgba(0, 255, 200, 0.5);
}

/* Anchor Moments (Locked) */
.cn-build-spine-moment.anchor {
    border-left: 3px solid #ff00ff;
}

.cn-build-spine-moment.anchor.filled {
    background: rgba(168, 85, 247, 0.1);
}

.cn-build-spine-moment.anchor .lock-icon {
    font-size: 0.7rem;
    margin-left: 8px;
    opacity: 0.7;
}

/* Fillable Moments */
.cn-build-spine-moment.fillable.empty {
    border-style: dashed;
    border-color: rgba(0, 255, 200, 0.3);
    background: rgba(0, 255, 200, 0.03);
}

.cn-build-spine-moment.fillable.filled {
    background: rgba(0, 255, 200, 0.1);
    border-color: rgba(0, 255, 200, 0.4);
}

/* Next Slot Highlighting */
.cn-build-spine-moment.next-slot {
    border-color: #00ffc8 !important;
    border-style: solid !important;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.2);
    animation: nextSlotPulse 2s ease-in-out infinite;
}

.cn-build-spine-moment.next-slot .spine-moment-marker.fillable-marker {
    background: #00ffc8;
    border-color: #00ffc8;
    animation: markerPulse 1.5s ease-in-out infinite;
}

@keyframes nextSlotPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 200, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 255, 200, 0.4);
    }
}

@keyframes markerPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) scale(1.2);
    }
}

/* Future Slots Dimming */
.cn-build-spine-moment.future-slot {
    opacity: 0.5;
    pointer-events: none;
}

/* Spine Moment Content */
.spine-moment-content {
    min-height: 40px;
}

.spine-moment-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.spine-moment-category {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.spine-moment-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 4px;
}

.spine-moment-date {
    font-size: 0.75rem;
    color: rgba(0, 255, 200, 0.8);
}

.spine-moment-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.spine-moment-filled-name {
    font-size: 0.85rem;
    color: #00ffc8;
    margin-top: 4px;
}

.spine-moment-source {
    font-size: 0.7rem;
    color: rgba(168, 85, 247, 0.8);
    margin-top: 4px;
}

.spine-moment-next-prompt {
    font-size: 0.75rem;
    color: #00ffc8;
    margin-top: 8px;
    font-weight: 600;
}

/* Spine Guidance */
.cn-build-spine-guidance {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 255, 200, 0.05);
    border: 1px dashed rgba(0, 255, 200, 0.3);
    border-radius: 10px;
    text-align: center;
}

.guidance-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* ==========================================================================
   ZORDON CONTEXTUAL PROMPT (Floating)
   ========================================================================== */
.cn-zordon-prompt {
    position: fixed;
    bottom: 30px;
    right: 30px;
    max-width: 380px;
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.98) 0%, rgba(10, 15, 25, 0.99) 100%);
    border: 1px solid rgba(0, 255, 200, 0.4);
    border-radius: 16px;
    padding: 20px;
    z-index: 9999999;
    box-shadow: 
        0 0 40px rgba(0, 255, 200, 0.15),
        0 15px 50px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-zordon-prompt.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cn-zordon-prompt-orbs {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.cn-zordon-prompt-orbs .zordon-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.cn-zordon-prompt-orbs .zordon-orb:nth-child(1) {
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
    animation-delay: 0s;
}
.cn-zordon-prompt-orbs .zordon-orb:nth-child(2) {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    animation-delay: 0.1s;
}
.cn-zordon-prompt-orbs .zordon-orb:nth-child(3) {
    background: linear-gradient(135deg, #ffff00, #ffd700);
    animation-delay: 0.2s;
}
.cn-zordon-prompt-orbs .zordon-orb:nth-child(4) {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    animation-delay: 0.3s;
}
.cn-zordon-prompt-orbs .zordon-orb:nth-child(5) {
    background: linear-gradient(135deg, #ff6b00, #ff9500);
    animation-delay: 0.4s;
}

.cn-zordon-prompt-content {
    padding-right: 25px;
}

.cn-zordon-prompt-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #00ffc8;
    margin: 0 0 8px 0;
}

.cn-zordon-prompt-body {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.cn-zordon-prompt-action {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    background: rgba(0, 255, 200, 0.15);
    border: 1px solid rgba(0, 255, 200, 0.4);
    color: #00ffc8;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cn-zordon-prompt-action:hover {
    background: rgba(0, 255, 200, 0.25);
    transform: translateY(-2px);
}

.cn-zordon-prompt-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cn-zordon-prompt-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .cn-zordon-modal {
        padding: 25px;
        max-width: 95%;
    }
    
    .cn-first-single-dates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cn-zordon-prompt {
        bottom: 15px;
        right: 15px;
        left: 15px;
        max-width: none;
    }
}

/* ==========================================================================
   TRANSLATION SOURCE LABEL IN MODAL
   ========================================================================== */
.cn-add-modal-source {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
}

.cn-add-modal-source .source-icon {
    font-size: 1rem;
}

.cn-add-modal-source .source-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.cn-add-modal-source .source-text strong {
    color: #a855f7;
}

/* ==========================================================================
   SET FIRST SINGLE DATE BUTTON CONTAINER
   ========================================================================== */
.cn-set-first-single-container {
    padding: 20px 15px;
    text-align: center;
}

.cn-set-first-single-prompt {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.05) 0%, rgba(0, 212, 255, 0.03) 100%);
    border: 1px dashed rgba(0, 255, 200, 0.3);
    border-radius: 16px;
    padding: 30px 25px;
}

.zordon-inline-orbs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 15px;
}

.zordon-inline-orbs .zordon-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.zordon-inline-orbs .zordon-orb:nth-child(1) {
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
    animation-delay: 0s;
}
.zordon-inline-orbs .zordon-orb:nth-child(2) {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    animation-delay: 0.1s;
}
.zordon-inline-orbs .zordon-orb:nth-child(3) {
    background: linear-gradient(135deg, #ffff00, #ffd700);
    animation-delay: 0.2s;
}
.zordon-inline-orbs .zordon-orb:nth-child(4) {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    animation-delay: 0.3s;
}
.zordon-inline-orbs .zordon-orb:nth-child(5) {
    background: linear-gradient(135deg, #ff6b00, #ff9500);
    animation-delay: 0.4s;
}

.cn-set-first-single-prompt .prompt-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #00ffc8;
    margin: 0 0 15px 0;
}

.cn-set-first-single-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 24px;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    color: #0a0f15;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cn-set-first-single-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 255, 200, 0.4);
}

.cn-set-first-single-prompt .prompt-subtext {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 15px 0 0 0;
}

/* ==========================================================================
   MAIN SECTION BUILD MODE SPINE CONTAINER
   ========================================================================== */
.cn-main-build-mode-spine-container {
    margin: 40px auto;
    padding: 30px 40px;
    max-width: 1400px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(15, 20, 30, 0.9) 0%, rgba(10, 15, 25, 0.95) 100%);
    border: 1px solid rgba(0, 255, 200, 0.15);
    border-radius: 20px;
    box-shadow: 
        0 0 40px rgba(0, 255, 200, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Compact version - positioned under action buttons, left-aligned to avoid sidebar */
.cn-main-build-mode-spine-container.compact-spine {
    margin: 15px 0 10px 0;
    padding: 12px 15px;
    max-width: calc(100% - 340px); /* Leave room for sidebar */
    margin-right: auto;
    margin-left: 0;
    border-radius: 12px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, rgba(15, 20, 30, 0.85) 0%, rgba(10, 15, 25, 0.9) 100%);
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-header {
    margin-bottom: 10px;
    text-align: left;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-title {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #00ffc8;
    font-weight: 600;
    margin: 0;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-timeline {
    gap: 8px;
    padding: 5px 0;
    justify-content: flex-start;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item {
    min-width: 85px;
    max-width: 100px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-card {
    padding: 8px 6px;
    min-height: 80px;
    border-radius: 8px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item.anchor .spine-item-card {
    border-width: 1.5px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item.fillable.empty .spine-item-card {
    cursor: pointer;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item.fillable.empty:hover .spine-item-card {
    border-color: rgba(0, 255, 200, 0.6);
    background: rgba(0, 255, 200, 0.08);
    transform: translateY(-2px);
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item.fillable.next-slot .spine-item-card {
    border-style: solid;
    border-color: #00ffc8;
    animation: compactNextGlow 2s ease-in-out infinite;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-marker {
    margin-bottom: 5px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .marker-dot {
    width: 12px;
    height: 12px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item.anchor .marker-dot {
    width: 14px;
    height: 14px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-category {
    font-size: 0.5rem;
    padding: 1px 4px;
    margin-bottom: 3px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-label {
    font-size: 0.65rem;
    line-height: 1.2;
    text-align: center;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-date {
    font-size: 0.6rem;
    margin-top: 2px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-filled {
    font-size: 0.55rem;
    margin-top: 2px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-hint {
    font-size: 0.5rem;
    margin-top: 3px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .spine-item-next-badge {
    font-size: 0.45rem;
    padding: 1px 4px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-item .lock-badge {
    font-size: 0.5rem;
    top: -3px;
    right: -15px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-prompt {
    padding: 10px;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-prompt-inner {
    padding: 15px;
    gap: 15px;
    flex-direction: column;
    text-align: center;
}

.cn-main-build-mode-spine-container.compact-spine .cn-main-spine-guidance {
    font-size: 0.7rem;
    margin-top: 8px;
    text-align: center;
}

/* ==========================================================================
   CLEAN EMPTY STATE - No nodes until anchor exists
   "Nothing exists until you create the first anchor"
   ========================================================================== */
.cn-spine-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 30px 10px;
    position: relative;
}

/* Compact version - tighter spacing, no gaps */
.cn-spine-empty-state.cn-spine-compact {
    padding: 15px 30px 0;
    min-height: auto;
    margin-bottom: 0;
}

/* Remove any margin below the spine content area when in empty state */
#cn-main-spine-content:has(.cn-spine-compact) {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   PRE-CAMPAIGN STATE - Hide "Why This Mattered" and buttons
   User must set first single date before anything else shows
   ========================================================================== */
#cinema-preview-section.cn-pre-campaign .voiceover-section,
#cinema-preview-section.cn-pre-campaign .why-this-mattered,
#cinema-preview-section.cn-pre-campaign .scene-context,
#cinema-preview-section.cn-pre-campaign .action-ctas,
#cinema-preview-section.cn-pre-campaign .cn-te-action-ctas,
#cinema-preview-section.cn-pre-campaign .action-ctas-helper,
#cinema-preview-section.cn-pre-campaign .cn-main-cta-row,
#cinema-preview-section.cn-pre-campaign #cn-main-add-btn,
#cinema-preview-section.cn-pre-campaign .translate-btn,
#cinema-preview-section.cn-pre-campaign .play-btn,
#cinema-preview-section.cn-pre-campaign .social-calendar-btn {
    display: none !important;
}

/* ==========================================================================
   BUILD MODE - Button row directly under spine, single row
   ========================================================================== */
.scene-viewer {
    display: flex;
    flex-direction: column;
}

/* Spine comes first */
.scene-viewer .cn-narrative-rail-layer {
    order: 1;
}

/* Buttons directly under spine - SINGLE ROW, centered */
.scene-viewer .action-ctas {
    order: 2;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin: 0 auto;
    width: fit-content;
}

/* Compact buttons for single row */
.scene-viewer .action-ctas button {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Translate to My Budget button - animated glow to catch eye */
.scene-viewer .action-ctas .generate-strategy-btn,
#generate-strategy-btn {
    animation: translateButtonPulse 2.5s ease-in-out infinite;
    position: relative;
    border-color: rgba(0, 255, 200, 0.4) !important;
}

@keyframes translateButtonPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 200, 0.2), 0 0 10px rgba(0, 255, 200, 0.1);
        border-color: rgba(0, 255, 200, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 12px rgba(0, 255, 200, 0.5), 0 0 20px rgba(0, 255, 200, 0.3), 0 0 30px rgba(0, 255, 200, 0.15);
        border-color: rgba(0, 255, 200, 0.6);
        transform: scale(1.02);
    }
}

/* Translate button icon glow */
.scene-viewer .action-ctas .generate-strategy-btn svg,
#generate-strategy-btn svg {
    animation: translateIconSpin 3s linear infinite;
}

@keyframes translateIconSpin {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* Voiceover section comes AFTER buttons */
.scene-viewer .voiceover-section {
    order: 3;
    margin-top: 15px;
}

/* Also section and keyboard hints at the end */
.scene-viewer .also-section,
.scene-viewer .scene-keyboard-hint {
    order: 4;
}

/* Hide the decorative rail */
.cn-spine-empty-rail {
    display: none;
}

.cn-spine-empty-glow {
    display: none;
}

/* Content centered */
.cn-spine-empty-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Plus icon */
.cn-spine-empty-icon {
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
}

.cn-spine-empty-icon svg {
    stroke-width: 1;
}

/* Headline */
.cn-spine-empty-headline {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Subtext - now includes Zordon message */
.cn-spine-empty-subtext {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    max-width: 400px;
    line-height: 1.4;
}

/* Genesis CTA wrapper (Zordon + Button) */
.cn-genesis-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    margin-top: 12px;
}

/* Circular + icon with glow */
.cn-genesis-plus-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
    animation: plusIconPulse 3s ease-in-out infinite;
    margin-bottom: 12px;
}

@keyframes plusIconPulse {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(255, 255, 255, 0.05),
            inset 0 0 20px rgba(255, 255, 255, 0.02);
    }
    50% { 
        box-shadow: 
            0 0 40px rgba(255, 255, 255, 0.08),
            inset 0 0 25px rgba(255, 255, 255, 0.04);
    }
}

.cn-genesis-plus-icon svg {
    stroke: rgba(255, 255, 255, 0.35);
}

/* Zordon guide orbs - small row above button */
.cn-zordon-guide-orbs {
    display: flex;
    align-items: center;
    gap: 5px;
    animation: zordonGuideFloat 3s ease-in-out infinite;
}

.cn-zordon-guide-orbs .zordon-orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: zordonOrbPulse 2s ease-in-out infinite;
}

.cn-zordon-guide-orbs .zordon-orb:nth-child(1) {
    background: #ff00ff;
    animation-delay: 0s;
}

.cn-zordon-guide-orbs .zordon-orb:nth-child(2) {
    background: #00ffc8;
    animation-delay: 0.1s;
}

.cn-zordon-guide-orbs .zordon-orb:nth-child(3) {
    background: #ffff00;
    animation-delay: 0.2s;
}

.cn-zordon-guide-orbs .zordon-orb:nth-child(4) {
    background: #00d4ff;
    animation-delay: 0.3s;
}

.cn-zordon-guide-orbs .zordon-orb:nth-child(5) {
    background: #f4a460;
    animation-delay: 0.4s;
}

@keyframes zordonGuideFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes zordonOrbPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Genesis CTA button - THE PRIMARY ACTION */
.cn-genesis-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: #22c55e;
    border: 2px solid #16a34a;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        0 4px 15px rgba(34, 197, 94, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Subtle pulse animation on the button */
.cn-genesis-btn-primary.cn-genesis-pulse {
    animation: genesisBtnPulse 2.5s ease-in-out infinite;
}

@keyframes genesisBtnPulse {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(34, 197, 94, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 25px rgba(34, 197, 94, 0.5),
            0 2px 12px rgba(0, 0, 0, 0.25),
            0 0 30px rgba(34, 197, 94, 0.2);
    }
}

.cn-genesis-btn-primary:hover {
    background: #16a34a;
    transform: translateY(-2px);
    animation: none;
    box-shadow: 
        0 8px 25px rgba(34, 197, 94, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.25);
}

.cn-genesis-btn-primary:active {
    background: #15803d;
    transform: translateY(0);
}

.cn-genesis-btn-primary .genesis-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-genesis-btn-primary .genesis-icon svg {
    stroke: currentColor;
}

/* Zordon start tip - removed, message is now inline in subtext */

/* Legacy class support */
.cn-spine-genesis-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: #22c55e;
    border: 2px solid #16a34a;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        0 4px 15px rgba(34, 197, 94, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.cn-spine-genesis-btn:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(34, 197, 94, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.25);
}

.cn-spine-genesis-btn:active {
    background: #15803d;
    transform: translateY(0);
}

.cn-spine-genesis-btn .genesis-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-spine-genesis-btn .genesis-icon svg {
    stroke: currentColor;
}

/* Hide the old placeholder styles */
.cn-main-spine-timeline.empty-placeholder {
    display: none !important;
}

.cn-main-spine-empty-hint {
    display: none !important;
}

/* ==========================================================================
   SIDEBAR - CURRENT SLOT PANEL (Primary Focus)
   ========================================================================== */
.cn-te-current-slot-section {
    padding: 12px !important;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.08), rgba(0, 255, 200, 0.02));
    border-left: 3px solid #00ffc8 !important;
    border-bottom: 1px solid rgba(0, 255, 200, 0.2) !important;
}

/* Set First Single Date card in current slot panel */
.cn-te-current-slot-section.not-initialized {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.02));
    border-left-color: #a855f7 !important;
    border-bottom-color: rgba(168, 85, 247, 0.2) !important;
}

.cn-sidebar-set-date-card {
    text-align: center;
    padding: 8px 0;
}

.cn-sidebar-orbs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}

.cn-sidebar-orbs .zordon-orb {
    width: 8px;
    height: 8px;
    background: #a855f7;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.cn-sidebar-orbs .zordon-orb:nth-child(2) { animation-delay: 0.2s; }
.cn-sidebar-orbs .zordon-orb:nth-child(3) { animation-delay: 0.4s; }

.cn-sidebar-set-date-text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 10px 0;
}

.cn-sidebar-set-date-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}

.cn-sidebar-set-date-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(168, 85, 247, 0.5);
}

.cn-sidebar-set-date-btn svg {
    width: 14px;
    height: 14px;
}

.cn-sidebar-set-date-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin: 10px 0 0 0;
}

/* Hide sections when Build Mode is pending */
.cn-te-sidebar-section.build-mode-pending {
    opacity: 0.4;
    pointer-events: none;
}

.cn-te-current-slot-section.active-slot-panel {
    animation: currentSlotPulse 3s ease-in-out infinite;
}

@keyframes currentSlotPulse {
    0%, 100% { border-left-color: #00ffc8; background: linear-gradient(135deg, rgba(0, 255, 200, 0.08), rgba(0, 255, 200, 0.02)); }
    50% { border-left-color: #00ffff; background: linear-gradient(135deg, rgba(0, 255, 200, 0.12), rgba(0, 255, 200, 0.04)); }
}

.cn-current-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cn-current-slot-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
}

.cn-current-slot-remaining {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-current-slot-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.cn-current-slot-desc {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.cn-current-slot-status {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-current-slot-status .status-empty {
    color: #00ffc8;
    font-weight: 600;
}

.cn-current-slot-status .status-filled {
    color: #22c55e;
    font-weight: 600;
}

/* ==========================================================================
   SIDEBAR - MOMENT ACTIONS PANEL (Consistent CTAs)
   ========================================================================== */
.cn-te-moment-actions-section {
    padding: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cn-moment-actions-header {
    margin-bottom: 10px;
}

.cn-moment-actions-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.cn-moment-actions-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-te-sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid;
    text-align: center;
}

.cn-te-sidebar-btn svg {
    width: 14px;
    height: 14px;
}

.cn-te-btn-primary {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 255, 200, 0.08));
    border-color: rgba(0, 255, 200, 0.4);
    color: #00ffc8;
}

.cn-te-btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.25), rgba(0, 255, 200, 0.15));
    border-color: #00ffc8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 255, 200, 0.2);
}

.cn-te-btn-secondary {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.06));
    border-color: rgba(168, 85, 247, 0.35);
    color: #a855f7;
}

.cn-te-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.12));
    border-color: #a855f7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

.cn-te-btn-tertiary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.cn-te-btn-tertiary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ==========================================================================
   SIDEBAR - QUICK ACCESS PANEL
   ========================================================================== */
.cn-te-quick-access-section {
    padding: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cn-quick-access-btns {
    display: flex;
    gap: 6px;
}

.cn-te-quick-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-te-quick-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.cn-te-quick-btn svg {
    width: 12px;
    height: 12px;
}

/* ==========================================================================
   SIDEBAR - COMBINED MOMENT SECTION (Compact)
   ========================================================================== */
.cn-te-moment-combined-section {
    padding: 12px !important;
}

.cn-te-moment-combined {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cn-te-moment-combined-left {
    flex-shrink: 0;
}

.cn-te-moment-image {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cn-te-moment-combined-right {
    flex: 1;
    min-width: 0;
}

.cn-te-moment-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(168, 85, 247, 0.9);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.cn-te-moment-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-te-translate-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cn-te-translate-link:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
}

.cn-te-translate-icon {
    font-size: 0.8rem;
}

.cn-te-translate-text {
    flex: 1;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.cn-te-translate-arrow {
    color: rgba(168, 85, 247, 0.8);
    font-size: 0.9rem;
}

/* ==========================================================================
   SIDEBAR - SET FIRST SINGLE DATE BUTTON (Clean, Compact)
   ========================================================================== */
.cn-set-first-single-container {
    padding: 0;
    margin: 0;
}

.cn-sidebar-set-date-card {
    padding: 15px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.08) 0%, transparent 70%),
        rgba(20, 25, 35, 0.9);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 10px;
    text-align: center;
}

.cn-sidebar-orbs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
}

.cn-sidebar-orbs .zordon-orb {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.cn-sidebar-orbs .zordon-orb:nth-child(1) { background: #ff00ff; animation-delay: 0s; }
.cn-sidebar-orbs .zordon-orb:nth-child(2) { background: #00ffc8; animation-delay: 0.15s; }
.cn-sidebar-orbs .zordon-orb:nth-child(3) { background: #00d4ff; animation-delay: 0.3s; }

.cn-sidebar-set-date-text {
    font-size: 0.8rem;
    color: #00ffc8;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.cn-sidebar-set-date-btn {
    width: 100%;
    padding: 10px 15px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0a0f15;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-sidebar-set-date-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 255, 200, 0.4);
}

.cn-sidebar-set-date-sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 8px 0 0 0;
}

/* ==========================================================================
   SIDEBAR - Hidden sections in Pre-Campaign state
   ========================================================================== */
.cn-te-sidebar-section.hidden {
    display: none !important;
}

/* ==========================================================================
   CAMPAIGN SETUP PANEL - Pre-Campaign onboarding (human language)
   ========================================================================== */
.cn-te-campaign-setup-section {
    border-left-color: rgba(0, 255, 200, 0.4) !important;
}

.cn-campaign-setup-header {
    margin-bottom: 10px;
}

.cn-campaign-setup-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0, 255, 200, 0.85);
}

.cn-campaign-setup-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-setup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cn-setup-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.cn-setup-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.cn-setup-value.cn-setup-not-set {
    color: rgba(255, 200, 100, 0.85);
    font-weight: 600;
}

/* Sidebar helper message (status context only, no CTA) */
.cn-sidebar-helper {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-sidebar-helper p {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   FIRST SINGLE DATE MODAL - Request Access Frosted Glass Style
   Full calendar picker with month navigation
   ========================================================================== */
.cn-date-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same as Request Access modal overlay */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cn-date-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-date-modal-container {
    position: relative;
    width: 90%;
    max-width: 420px;
    padding: 32px;
    /* Frosted glass - same as Request Access */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Gradient overlay - same as Request Access */
.cn-date-modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
    border-radius: 20px;
}

/* Shimmer effect - same as Request Access */
.cn-date-modal-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    animation: zordonGlassShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.cn-date-modal-overlay.active .cn-date-modal-container {
    transform: translateY(0) scale(1);
}

.cn-date-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-date-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
}

.cn-date-modal-header {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.cn-date-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.cn-date-modal-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

.cn-date-modal-body {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

/* Calendar Navigation */
.cn-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 8px;
}

.cn-calendar-nav-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cn-calendar-month-year {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Calendar Weekdays */
.cn-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
    text-align: center;
}

.cn-calendar-weekdays span {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0;
}

/* Calendar Days Grid */
.cn-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cn-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-calendar-day:hover:not(.empty):not(.disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.cn-calendar-day.empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.cn-calendar-day.disabled {
    color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    cursor: not-allowed;
}

.cn-calendar-day.friday {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

.cn-calendar-day.friday:hover:not(.disabled) {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
}

.cn-calendar-day.selected {
    background: #22c55e !important;
    border-color: #16a34a !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Selected Date Display */
.cn-selected-date-display {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.cn-selected-date-display strong {
    color: #22c55e;
}

/* Footer Buttons */
.cn-date-modal-footer {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.cn-date-modal-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-date-modal-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.cn-date-modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

.cn-date-modal-btn.primary {
    background: #22c55e;
    border: 2px solid #16a34a;
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.cn-date-modal-btn.primary:hover:not(:disabled) {
    background: #16a34a;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4);
}

.cn-date-modal-btn.primary:disabled {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.4);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    box-shadow: none;
}

/* ==========================================================================
   GLASS MODAL - Frosted glass date picker with grid
   ========================================================================== */
.cn-glass-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cn-glass-modal.active {
    opacity: 1;
    visibility: visible;
}

.cn-glass-container {
    position: relative;
    width: 95%;
    max-width: 580px;
    padding: 35px 40px;
    background: rgba(30, 45, 65, 0.85);
    border: 1px solid rgba(100, 150, 180, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(100, 150, 180, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-glass-modal.active .cn-glass-container {
    transform: translateY(0) scale(1);
}

/* Zordon orbs row */
.cn-zordon-orbs-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.cn-zordon-orb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}

.cn-glass-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: #4ecdc4;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.cn-glass-subtitle {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Pacing reference line - shows which demo campaign */
.cn-glass-pacing-ref {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 8px 0;
    letter-spacing: 0.3px;
}

.cn-glass-pacing-ref strong {
    color: #4ecdc4;
    font-weight: 600;
}

/* Helper text below date grid */
.cn-glass-helper {
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0 20px 0;
    line-height: 1.45;
    font-style: italic;
}

/* Date Grid Expand Section */
.cn-date-grid-expand {
    text-align: center;
    margin: -12px 0 16px 0;
}

.cn-date-expand-btn {
    background: transparent;
    border: none;
    color: rgba(78, 205, 196, 0.7);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.cn-date-expand-btn:hover {
    color: #4ecdc4;
    text-decoration: underline;
}

/* Hidden dates (expanded state) */
.cn-date-grid-option.cn-date-hidden {
    display: none;
}

/* Date Grid - 3 columns x 4 rows */
.cn-date-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

.cn-date-grid-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    background: rgba(40, 60, 85, 0.6);
    border: 1px solid rgba(100, 150, 180, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-date-grid-option:hover {
    background: rgba(50, 75, 100, 0.7);
    border-color: rgba(100, 150, 180, 0.4);
}

.cn-date-grid-option.selected {
    background: rgba(78, 205, 196, 0.2);
    border-color: #4ecdc4;
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.3);
}

.cn-date-grid-main {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

.cn-date-grid-option.selected .cn-date-grid-main {
    color: #4ecdc4;
}

.cn-date-grid-day {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Glass modal footer */
.cn-glass-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.cn-glass-btn {
    padding: 14px 28px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: 0.3px;
}

.cn-glass-btn.secondary {
    background: rgba(60, 80, 100, 0.6);
    border: 1px solid rgba(100, 150, 180, 0.3);
    color: rgba(255, 255, 255, 0.6);
}

.cn-glass-btn.secondary:hover {
    background: rgba(70, 95, 115, 0.7);
    color: rgba(255, 255, 255, 0.85);
}

.cn-glass-btn.primary {
    background: #4ecdc4;
    border: none;
    color: #1a2530;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

.cn-glass-btn.primary:hover:not(:disabled) {
    background: #5fd9d1;
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.5);
}

.cn-glass-btn.primary:disabled {
    background: rgba(78, 205, 196, 0.2);
    color: rgba(26, 37, 48, 0.5);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}


/* ==========================================================================
   PACING EXPLANATION MODAL - Request Access Frosted Glass Style
   ========================================================================== */
.cn-pacing-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same as Request Access modal overlay */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cn-pacing-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-pacing-modal-container {
    position: relative;
    width: 90%;
    max-width: 520px;
    padding: 32px;
    /* Frosted glass - same as Request Access */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Gradient overlay - same as Request Access */
.cn-pacing-modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
    border-radius: 20px;
}

/* Shimmer effect - same as Request Access */
.cn-pacing-modal-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    animation: zordonGlassShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.cn-pacing-modal-overlay.active .cn-pacing-modal-container {
    transform: translateY(0) scale(1);
}

.cn-pacing-modal-header {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.cn-pacing-orbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.cn-pacing-orbs .zordon-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.cn-pacing-orbs .zordon-orb:nth-child(1) { background: #ff00ff; animation-delay: 0s; }
.cn-pacing-orbs .zordon-orb:nth-child(2) { background: #00ffc8; animation-delay: 0.1s; }
.cn-pacing-orbs .zordon-orb:nth-child(3) { background: #ffff00; animation-delay: 0.2s; }
.cn-pacing-orbs .zordon-orb:nth-child(4) { background: #00d4ff; animation-delay: 0.3s; }
.cn-pacing-orbs .zordon-orb:nth-child(5) { background: #ff6b00; animation-delay: 0.4s; }

.cn-pacing-modal-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #22c55e;
    margin: 0;
    letter-spacing: -0.01em;
}

.cn-pacing-modal-body {
    position: relative;
    z-index: 1;
}

.cn-pacing-explanation {
    margin-bottom: 20px;
}

.cn-pacing-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.cn-pacing-text strong {
    color: #22c55e;
    font-weight: 700;
}

.cn-pacing-highlight {
    color: #22c55e;
    font-weight: 600;
}

/* Pacing Timeline */
.cn-pacing-timeline {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.cn-pacing-timeline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-pacing-timeline-item:last-child {
    border-bottom: none;
}

.pacing-marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pacing-marker.single {
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
}

.pacing-marker.album {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
}

.pacing-label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.pacing-date {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.pacing-spacing {
    font-size: 0.75rem;
    font-weight: 600;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

/* Pacing Note */
.cn-pacing-note {
    background: rgba(34, 197, 94, 0.08);
    border-left: 3px solid #22c55e;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 24px;
}

.cn-pacing-note p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.cn-pacing-note-small {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic;
    margin-top: 6px !important;
}

/* Footer */
.cn-pacing-modal-footer {
    position: relative;
    z-index: 1;
}

.cn-pacing-modal-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: #22c55e;
    border: 2px solid #16a34a;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.cn-pacing-modal-btn {
    text-transform: none;
}

.cn-pacing-modal-btn:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

/* Footer hint text */
.cn-pacing-footer-hint {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 12px 0 0 0;
    font-style: italic;
}

/* Timeline Section with Label */
.cn-pacing-timeline-section {
    margin-bottom: 20px;
}

.cn-pacing-timeline-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 4px 0;
}

.cn-pacing-timeline-sublabel {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 12px 0;
    font-style: italic;
}


/* ==========================================================================
   BUILD MODE MODALS - INTRO FLOW STYLING (Legacy)
   Glass box, slideshow background, CRT effect
   ========================================================================== */
.cn-build-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cn-build-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Slideshow Background */
.cn-build-modal-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.cn-build-modal-slideshow .slideshow-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.cn-build-modal-slideshow .slideshow-slide.active {
    opacity: 1;
}

.cn-build-modal-slideshow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 50% 50%, rgba(5, 15, 30, 0.7) 0%, rgba(5, 15, 30, 0.9) 100%);
}

/* CRT Effect Overlay */
.cn-build-modal-crt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 4px
        );
    animation: crtFlicker 0.1s infinite;
}

.cn-build-modal-crt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 0%,
        rgba(0, 20, 40, 0.3) 100%
    );
}

@keyframes crtFlicker {
    0%, 100% { opacity: 0.97; }
    50% { opacity: 1; }
}

/* Glass Modal Box */
.cn-build-modal-glass {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 550px;
    padding: 35px 40px;
    background: 
        linear-gradient(135deg, 
            rgba(20, 30, 50, 0.85) 0%, 
            rgba(15, 25, 40, 0.9) 50%,
            rgba(20, 35, 55, 0.85) 100%
        );
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 20px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 255, 200, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.cn-build-modal-overlay.active .cn-build-modal-glass {
    transform: translateY(0);
}

.cn-build-modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.cn-build-modal-header .zordon-modal-orbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.cn-build-modal-header .zordon-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.cn-build-modal-header .zordon-orb:nth-child(1) { background: #ff00ff; animation-delay: 0s; }
.cn-build-modal-header .zordon-orb:nth-child(2) { background: #00ffc8; animation-delay: 0.1s; }
.cn-build-modal-header .zordon-orb:nth-child(3) { background: #ffff00; animation-delay: 0.2s; }
.cn-build-modal-header .zordon-orb:nth-child(4) { background: #00d4ff; animation-delay: 0.3s; }
.cn-build-modal-header .zordon-orb:nth-child(5) { background: #ff6b00; animation-delay: 0.4s; }

.cn-build-modal-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.4rem;
    color: #00ffc8;
    margin: 0 0 10px 0;
}

.cn-build-modal-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
}

/* Date Grid */
.cn-first-single-dates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 25px;
}

.cn-first-single-date-btn {
    padding: 12px 10px;
    background: rgba(20, 30, 45, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.cn-first-single-date-btn:hover {
    border-color: rgba(0, 255, 200, 0.4);
    background: rgba(0, 255, 200, 0.05);
}

.cn-first-single-date-btn.selected {
    border-color: #00ffc8;
    background: rgba(0, 255, 200, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.2);
}

.cn-first-single-date-btn .date-display {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
}

.cn-first-single-date-btn .date-day {
    display: block;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 3px;
    text-transform: uppercase;
}

.cn-first-single-date-btn.selected .date-display {
    color: #00ffc8;
}

/* Modal Footer */
.cn-build-modal-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.cn-build-modal-btn {
    padding: 12px 25px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-build-modal-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.cn-build-modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.cn-build-modal-btn.primary {
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    border: none;
    color: #0a0f15;
}

.cn-build-modal-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 200, 0.4);
}

/* ==========================================================================
   PACING MODAL SPECIFIC STYLES
   ========================================================================== */
.cn-build-modal-pacing {
    max-width: 600px;
}

.cn-pacing-explanation {
    margin-bottom: 25px;
}

.cn-pacing-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.cn-pacing-text strong {
    color: #00ffc8;
}

.cn-pacing-highlight {
    color: #00ffc8;
    font-weight: 600;
}

/* Pacing Timeline */
.cn-pacing-timeline {
    background: rgba(10, 15, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.cn-pacing-timeline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-pacing-timeline-item:last-child {
    border-bottom: none;
}

.pacing-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pacing-marker.single {
    background: linear-gradient(135deg, #ff00ff, #a855f7);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

.pacing-marker.album {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.4);
}

.pacing-label {
    flex: 1;
    font-size: 0.85rem;
    color: #fff;
}

.pacing-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.pacing-spacing {
    font-size: 0.7rem;
    color: #00ffc8;
    background: rgba(0, 255, 200, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

/* Pacing Note */
.cn-pacing-note {
    background: rgba(0, 255, 200, 0.05);
    border-left: 3px solid rgba(0, 255, 200, 0.4);
    padding: 15px;
    border-radius: 0 8px 8px 0;
}

.cn-pacing-note p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.cn-pacing-note-small {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-top: 8px !important;
}

.cn-main-spine-header {
    text-align: center;
    margin-bottom: 30px;
}

.cn-main-spine-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.zordon-spine-orbs {
    display: flex;
    gap: 5px;
}

.zordon-spine-orbs .zordon-orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.zordon-spine-orbs .zordon-orb:nth-child(1) { background: #ff00ff; animation-delay: 0s; }
.zordon-spine-orbs .zordon-orb:nth-child(2) { background: #00ffc8; animation-delay: 0.1s; }
.zordon-spine-orbs .zordon-orb:nth-child(3) { background: #ffff00; animation-delay: 0.2s; }
.zordon-spine-orbs .zordon-orb:nth-child(4) { background: #00d4ff; animation-delay: 0.3s; }
.zordon-spine-orbs .zordon-orb:nth-child(5) { background: #ff6b00; animation-delay: 0.4s; }

.cn-main-spine-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.3rem;
    color: #00ffc8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.cn-main-spine-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ==========================================================================
   MAIN SECTION FIRST SINGLE PROMPT
   ========================================================================== */
.cn-main-spine-prompt {
    padding: 30px;
}

.cn-main-spine-prompt-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: 
        radial-gradient(ellipse at 30% 50%, rgba(0, 255, 200, 0.08) 0%, transparent 50%),
        rgba(20, 25, 35, 0.6);
    border: 1px dashed rgba(0, 255, 200, 0.3);
    border-radius: 16px;
    margin-bottom: 25px;
}

.cn-main-spine-prompt .prompt-icon {
    flex-shrink: 0;
}

.zordon-prompt-orbs {
    display: flex;
    gap: 6px;
}

.zordon-prompt-orbs.intensity-2 .zordon-orb {
    width: 12px;
    height: 12px;
}

.cn-main-spine-prompt .prompt-content {
    flex: 1;
}

.cn-main-spine-prompt .prompt-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.2rem;
    color: #00ffc8;
    margin: 0 0 10px 0;
}

.cn-main-spine-prompt .prompt-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.cn-main-spine-set-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 28px;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    color: #0a0f15;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cn-main-spine-set-date-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 255, 200, 0.4);
}

.cn-main-spine-set-date-btn .btn-icon {
    font-size: 1.2rem;
}

/* Preview Items */
.cn-main-spine-prompt .prompt-preview {
    padding: 20px 25px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.cn-main-spine-prompt .preview-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px 0;
}

.cn-main-spine-prompt .preview-items {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.cn-main-spine-prompt .preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.cn-main-spine-prompt .anchor-icon {
    color: #ff00ff;
    font-size: 0.6rem;
}

.cn-main-spine-prompt .fillable-icon {
    color: #00ffc8;
    font-size: 0.6rem;
}

/* ==========================================================================
   MAIN SECTION HORIZONTAL TIMELINE
   ========================================================================== */
.cn-main-spine-timeline {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 20px 10px 30px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.cn-main-spine-timeline::-webkit-scrollbar {
    height: 6px;
}

.cn-main-spine-timeline::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.cn-main-spine-timeline::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 200, 0.3);
    border-radius: 3px;
}

/* ==========================================================================
   MAIN SECTION SPINE ITEMS
   ========================================================================== */
.cn-main-spine-item {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 160px;
}

.cn-main-spine-item .spine-item-card {
    position: relative;
    padding: 15px;
    background: rgba(25, 30, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    min-height: 130px;
}

/* ==========================================================================
   ANCHOR ITEMS - Visual Prominence (Bases)
   ========================================================================== */
.cn-main-spine-item.anchor .spine-item-card {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(255, 0, 255, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, rgba(40, 25, 50, 0.9) 0%, rgba(25, 20, 35, 0.95) 100%);
    border: 2px solid rgba(255, 0, 255, 0.4);
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cn-main-spine-item.anchor .spine-item-card:hover {
    border-color: rgba(255, 0, 255, 0.6);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.25);
    transform: translateY(-4px);
}

.cn-main-spine-item.anchor .spine-item-marker {
    position: relative;
    margin-bottom: 10px;
}

.cn-main-spine-item.anchor .marker-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #ff00ff, #a855f7);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
}

.cn-main-spine-item.anchor .lock-badge {
    position: absolute;
    top: -5px;
    right: -25px;
    font-size: 0.7rem;
    opacity: 0.8;
}

.cn-main-spine-item.anchor .spine-item-category {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ff00ff;
    background: rgba(255, 0, 255, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

.cn-main-spine-item.anchor .spine-item-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.cn-main-spine-item.anchor .spine-item-date {
    font-size: 0.75rem;
    color: #ff00ff;
    font-weight: 600;
}

.cn-main-spine-item.anchor .spine-item-filled {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   FILLABLE ITEMS - Creative Slots
   ========================================================================== */
.cn-main-spine-item.fillable .spine-item-card {
    background: rgba(20, 25, 35, 0.6);
    border: 1px dashed rgba(0, 255, 200, 0.3);
}

.cn-main-spine-item.fillable .spine-item-marker .marker-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid rgba(0, 255, 200, 0.5);
    border-radius: 50%;
    margin-bottom: 10px;
}

.cn-main-spine-item.fillable .spine-item-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.cn-main-spine-item.fillable .spine-item-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Filled fillable slot */
.cn-main-spine-item.fillable.filled .spine-item-card {
    background: rgba(0, 255, 200, 0.08);
    border: 1px solid rgba(0, 255, 200, 0.4);
}

.cn-main-spine-item.fillable.filled .marker-dot {
    background: #00ffc8;
    border-color: #00ffc8;
}

.cn-main-spine-item.fillable.filled .spine-item-filled {
    font-size: 0.75rem;
    color: #00ffc8;
    margin-top: 5px;
}

.cn-main-spine-item.fillable .spine-item-source {
    font-size: 0.65rem;
    color: rgba(168, 85, 247, 0.8);
    margin-top: 3px;
}

/* ==========================================================================
   NEXT SLOT HIGHLIGHTING - Sequential Enforcement
   ========================================================================== */
.cn-main-spine-item.fillable.next-slot .spine-item-card {
    border: 2px solid #00ffc8;
    border-style: solid;
    background: rgba(0, 255, 200, 0.1);
    animation: nextSlotGlow 2s ease-in-out infinite;
}

.cn-main-spine-item.fillable.next-slot .marker-dot {
    background: #00ffc8;
    border-color: #00ffc8;
    animation: markerBounce 1s ease-in-out infinite;
}

.cn-main-spine-item.fillable.next-slot .spine-item-next-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    color: #0a0f15;
    background: #00ffc8;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

@keyframes nextSlotGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 200, 0.3); }
    50% { box-shadow: 0 0 30px rgba(0, 255, 200, 0.5); }
}

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

/* ==========================================================================
   FUTURE SLOTS - Dimmed Until Previous Filled
   ========================================================================== */
.cn-main-spine-item.fillable.future-slot {
    opacity: 0.4;
    pointer-events: none;
}

.cn-main-spine-item.fillable.future-slot .spine-item-card {
    border-style: dotted;
}

/* ==========================================================================
   ZORDON HOVER-ONLY BEHAVIOR - Item #6
   Zordon floating icon only shows on hover of empty slots
   ========================================================================== */

/* Hint text styling */
.cn-main-spine-item.fillable.empty .spine-item-hint {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    text-align: center;
}

/* Clicked slot highlight */
.cn-main-spine-item.clicked-highlight .spine-item-card {
    border-color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.15) !important;
}

/* ==========================================================================
   SIMPLE CUSTOM FORM - Lightweight inline form (Requirement #11)
   ========================================================================== */
.cn-simple-custom-form-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 21, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cn-simple-custom-form-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-simple-custom-form {
    width: 90%;
    max-width: 400px;
    background: rgba(20, 25, 35, 0.95);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.cn-simple-custom-form-overlay.active .cn-simple-custom-form {
    transform: translateY(0);
}

.cn-simple-form-header {
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.08), rgba(0, 255, 200, 0.02));
    border-bottom: 1px solid rgba(0, 255, 200, 0.1);
    position: relative;
    text-align: center;
}

.cn-simple-form-header .zordon-inline-orbs {
    margin-bottom: 10px;
}

.cn-simple-form-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 5px 0;
}

.cn-simple-form-slot {
    font-size: 0.8rem;
    color: #00ffc8;
    margin: 0;
}

.cn-simple-form-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cn-simple-form-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.cn-simple-form-close svg {
    width: 14px;
    height: 14px;
}

.cn-simple-form-body {
    padding: 20px;
}

.cn-simple-form-field {
    margin-bottom: 15px;
}

.cn-simple-form-field:last-child {
    margin-bottom: 0;
}

.cn-simple-form-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cn-simple-form-field input,
.cn-simple-form-field textarea,
.cn-simple-form-field select {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
}

.cn-simple-form-field input:focus,
.cn-simple-form-field textarea:focus,
.cn-simple-form-field select:focus {
    border-color: #00ffc8;
    background: rgba(0, 255, 200, 0.05);
}

.cn-simple-form-field textarea {
    resize: vertical;
    min-height: 80px;
}

.cn-simple-form-footer {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cn-simple-form-cancel {
    padding: 10px 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-simple-form-cancel:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.cn-simple-form-submit {
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a0f15;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cn-simple-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 255, 200, 0.3);
}

.cn-simple-form-submit svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   MAIN SPINE GUIDANCE & COMPLETION
   ========================================================================== */
.cn-main-spine-guidance {
    text-align: center;
    padding: 20px;
    margin-top: 10px;
}

/* Guidance text styling - clean, no arrow */
.cn-main-spine-guidance .guidance-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.cn-main-spine-guidance .guidance-text strong {
    color: #00ffc8;
}

.cn-main-spine-guidance .guidance-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 10px 0 0 0;
}

.cn-main-spine-guidance .guidance-text strong {
    color: #00ffc8;
}

.cn-main-spine-complete {
    text-align: center;
    padding: 20px;
}

.cn-main-spine-complete .complete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    border-radius: 50%;
    color: #0a0f15;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.cn-main-spine-complete .complete-text {
    font-size: 1rem;
    color: #00ffc8;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE - Main Section Spine
   ========================================================================== */
@media (max-width: 768px) {
    .cn-main-build-mode-spine-container {
        padding: 20px;
        margin: 20px 15px;
    }
    
    .cn-main-spine-prompt-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .cn-main-spine-prompt .preview-items {
        flex-direction: column;
        align-items: center;
    }
    
    .cn-main-spine-item {
        min-width: 120px;
    }
}

/* ==========================================================================
   BUILD MODE SPINE SECTION - Compact under action buttons
   ========================================================================== */
.build-mode-spine-section {
    margin: 20px 0 15px;
    padding: 0;
}

.build-mode-spine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 5px;
}

.build-mode-spine-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.build-mode-spine-title span {
    font-weight: 400;
    color: rgba(0, 255, 200, 0.7);
}

.build-mode-spine-nav {
    display: flex;
    gap: 5px;
}

.build-mode-spine-nav .spine-nav-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 20, 30, 0.6);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.build-mode-spine-nav .spine-nav-btn:hover {
    border-color: rgba(0, 255, 200, 0.5);
    background: rgba(0, 255, 200, 0.1);
}

.build-mode-spine-nav .spine-nav-btn svg {
    width: 14px;
    height: 14px;
    stroke: rgba(255, 255, 255, 0.6);
}

.build-mode-spine-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 5px 15px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 200, 0.3) transparent;
}

.build-mode-spine-track::-webkit-scrollbar {
    height: 6px;
}

.build-mode-spine-track::-webkit-scrollbar-track {
    background: rgba(15, 20, 30, 0.5);
    border-radius: 3px;
}

.build-mode-spine-track::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 200, 0.3);
    border-radius: 3px;
}

/* ==========================================================================
   MAIN SPINE STRIP - BUILD MODE CARDS
   These replace the old film-card spine with Build Mode anchors + fillables
   ========================================================================== */

/* Prompt card when Build Mode not initialized */
.build-mode-spine-prompt-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    padding: 20px;
}

.build-mode-spine-prompt-card .prompt-card-inner {
    text-align: center;
    padding: 30px 40px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.1) 0%, transparent 60%),
        rgba(20, 25, 35, 0.9);
    border: 1px dashed rgba(0, 255, 200, 0.4);
    border-radius: 16px;
}

.build-mode-spine-prompt-card .zordon-inline-orbs {
    justify-content: center;
    margin-bottom: 15px;
}

.build-mode-spine-prompt-card .prompt-card-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    color: #00ffc8;
    margin: 0 0 8px 0;
}

.build-mode-spine-prompt-card .prompt-card-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 15px 0;
}

.build-mode-spine-prompt-card .prompt-card-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    color: #0a0f15;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.build-mode-spine-prompt-card .prompt-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 200, 0.4);
}

/* ==========================================================================
   SPINE ANCHOR CARDS - Locked Base Moments (Magenta)
   ========================================================================== */
.spine-card.spine-anchor-card {
    min-width: 140px;
    max-width: 160px;
}

.spine-card.spine-anchor-card .film-card-media {
    background: 
        radial-gradient(ellipse at 50% 30%, rgba(255, 0, 255, 0.2) 0%, transparent 60%),
        linear-gradient(180deg, rgba(50, 25, 60, 0.9) 0%, rgba(30, 20, 40, 0.95) 100%);
    border: 2px solid rgba(255, 0, 255, 0.5);
    border-radius: 10px 10px 0 0;
}

.spine-anchor-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    position: relative;
}

.spine-anchor-placeholder .anchor-marker-dot {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff00ff, #a855f7);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
}

.spine-anchor-placeholder .anchor-lock-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.75rem;
    opacity: 0.8;
}

.spine-card.spine-anchor-card .film-card-overlay {
    background: rgba(20, 15, 30, 0.95);
    border: 2px solid rgba(255, 0, 255, 0.5);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 12px;
}

.spine-anchor-type {
    color: #ff00ff !important;
    border-color: #ff00ff !important;
    background: rgba(255, 0, 255, 0.2) !important;
    font-size: 0.6rem !important;
}

.spine-anchor-title {
    font-size: 0.85rem !important;
    color: #fff;
    margin: 8px 0 5px !important;
}

.spine-anchor-date {
    color: #ff00ff !important;
    font-weight: 600;
}

.spine-anchor-filled-name {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 5px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filled anchor has checkmark feel */
.spine-card.spine-anchor-card.anchor-filled .anchor-marker-dot {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.6);
}

/* ==========================================================================
   SPINE FILLABLE CARDS - Creative Slots (Cyan)
   ========================================================================== */
.spine-card.spine-fillable-card {
    min-width: 130px;
    max-width: 150px;
    cursor: pointer;
}

.spine-card.spine-fillable-card .film-card-media {
    background: rgba(15, 20, 30, 0.8);
    border: 1px dashed rgba(0, 255, 200, 0.3);
    border-radius: 10px 10px 0 0;
}

.spine-fillable-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 70px;
    position: relative;
}

.spine-fillable-placeholder .fillable-marker-dot {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 2px solid rgba(0, 255, 200, 0.5);
    border-radius: 50%;
}

.spine-fillable-placeholder .fillable-next-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.55rem;
    font-weight: 700;
    color: #0a0f15;
    background: #00ffc8;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.spine-card.spine-fillable-card .film-card-overlay {
    background: rgba(15, 20, 30, 0.9);
    border: 1px dashed rgba(0, 255, 200, 0.3);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 10px;
}

.spine-fillable-title {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 5px !important;
}

.spine-fillable-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.spine-fillable-next-text {
    font-size: 0.65rem;
    color: #00ffc8;
    margin: 5px 0 0 0;
    font-weight: 600;
}

/* NEXT slot highlighting */
.spine-card.spine-fillable-card.spine-fillable-next .film-card-media {
    border: 2px solid #00ffc8;
    border-style: solid;
    background: rgba(0, 255, 200, 0.1);
    animation: spineNextGlow 2s ease-in-out infinite;
}

.spine-card.spine-fillable-card.spine-fillable-next .film-card-overlay {
    border: 2px solid #00ffc8;
    border-top: none;
    border-style: solid;
}

.spine-card.spine-fillable-card.spine-fillable-next .fillable-marker-dot {
    background: #00ffc8;
    border-color: #00ffc8;
    animation: markerBounce 1s ease-in-out infinite;
}

@keyframes spineNextGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 200, 0.3); }
    50% { box-shadow: 0 0 25px rgba(0, 255, 200, 0.5); }
}

/* FILLED fillable slot */
.spine-card.spine-fillable-card.spine-fillable-filled .film-card-media {
    background: rgba(0, 255, 200, 0.1);
    border: 1px solid rgba(0, 255, 200, 0.4);
    border-style: solid;
}

.spine-card.spine-fillable-card.spine-fillable-filled .fillable-marker-dot {
    background: #00ffc8;
    border-color: #00ffc8;
}

.spine-card.spine-fillable-card.spine-fillable-filled .film-card-overlay {
    border: 1px solid rgba(0, 255, 200, 0.4);
    border-top: none;
}

.spine-fillable-filled-name {
    font-size: 0.75rem;
    color: #00ffc8;
    margin: 0;
}

.spine-fillable-source {
    font-size: 0.65rem;
    color: rgba(168, 85, 247, 0.8);
    margin: 3px 0 0 0;
}

/* FUTURE slots - dimmed */
.spine-card.spine-fillable-card.spine-fillable-future {
    opacity: 0.35;
    pointer-events: none;
}

.spine-card.spine-fillable-card.spine-fillable-future .film-card-media {
    border-style: dotted;
}

.spine-card.spine-fillable-card.spine-fillable-future .film-card-overlay {
    border-style: dotted;
}

/* Hover effects */
.spine-card.spine-fillable-card.spine-fillable-empty:not(.spine-fillable-future):hover {
    transform: translateY(-5px);
}

.spine-card.spine-fillable-card.spine-fillable-empty:not(.spine-fillable-future):hover .film-card-media {
    border-color: rgba(0, 255, 200, 0.6);
    background: rgba(0, 255, 200, 0.08);
}

.spine-card.spine-anchor-card:hover {
    transform: translateY(-5px);
}

.spine-card.spine-anchor-card:hover .film-card-media {
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);
}

/* ==========================================================================
   FILL SLOT MODAL - Form to add moment to spine
   ========================================================================== */
.cn-fill-slot-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 10, 20, 0.85);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cn-fill-slot-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-fill-slot-modal {
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(20, 30, 45, 0.98) 0%, rgba(15, 20, 30, 0.98) 100%);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.cn-fill-slot-modal-overlay.active .cn-fill-slot-modal {
    transform: translateY(0);
}

.cn-fill-slot-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-fill-slot-close:hover {
    background: rgba(255, 100, 100, 0.2);
    color: #ff6666;
}

.cn-fill-slot-header {
    text-align: center;
    margin-bottom: 25px;
}

.cn-fill-slot-header .zordon-inline-orbs {
    justify-content: center;
    margin-bottom: 12px;
}

.cn-fill-slot-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.3rem;
    color: #00ffc8;
    margin: 0 0 8px 0;
}

.cn-fill-slot-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Options container */
.cn-fill-slot-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cn-fill-slot-option {
    background: rgba(10, 15, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.cn-fill-slot-option:hover {
    border-color: rgba(0, 255, 200, 0.3);
}

.cn-fill-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cn-fill-option-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 200, 0.15);
    border-radius: 6px;
    font-size: 14px;
    color: #00ffc8;
}

.cn-fill-option-translate .cn-fill-option-icon {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.cn-fill-option-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.cn-fill-option-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 15px 0;
}

/* Form styles */
.cn-fill-slot-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cn-fill-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-fill-form-group label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-fill-form-group input,
.cn-fill-form-group textarea,
.cn-fill-form-group select {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    padding: 10px 12px;
    background: rgba(15, 20, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    transition: all 0.2s ease;
}

.cn-fill-form-group input:focus,
.cn-fill-form-group textarea:focus,
.cn-fill-form-group select:focus {
    outline: none;
    border-color: rgba(0, 255, 200, 0.5);
    background: rgba(0, 255, 200, 0.05);
}

.cn-fill-form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.cn-fill-form-group select {
    cursor: pointer;
}

.cn-fill-submit-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 20px;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    color: #0a0f15;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 5px;
}

.cn-fill-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 200, 0.4);
}

/* Translate option */
.cn-fill-translate-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
}

.cn-fill-translate-btn:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%);
    border-color: rgba(168, 85, 247, 0.6);
    transform: translateY(-2px);
}

/* Reference card */
.cn-fill-slot-reference {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cn-fill-ref-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-fill-ref-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(255, 0, 255, 0.05);
    border: 1px solid rgba(255, 0, 255, 0.2);
    border-radius: 8px;
}

.cn-fill-ref-category {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-fill-ref-title {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   COMPACT SPINE ITEMS - Horizontal scrolling track
   ========================================================================== */
.spine-compact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    max-width: 120px;
    padding: 12px 10px;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: default;
    flex-shrink: 0;
}

/* ANCHOR items - Magenta/Purple */
.spine-compact-anchor {
    background: 
        radial-gradient(ellipse at 50% 20%, rgba(255, 0, 255, 0.15) 0%, transparent 70%),
        rgba(30, 20, 40, 0.8);
    border: 2px solid rgba(255, 0, 255, 0.4);
}

.spine-compact-anchor .spine-compact-marker {
    position: relative;
}

.spine-compact-anchor .marker-dot {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #ff00ff, #a855f7);
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}

.spine-compact-anchor .lock-icon {
    position: absolute;
    top: -5px;
    right: -8px;
    font-size: 0.6rem;
}

.spine-compact-anchor .spine-compact-category {
    font-size: 0.55rem;
    font-weight: 700;
    color: #ff00ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.spine-compact-anchor .spine-compact-label {
    font-size: 0.75rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
}

.spine-compact-anchor .spine-compact-date {
    font-size: 0.65rem;
    color: #ff00ff;
    margin-top: 4px;
}

.spine-compact-anchor .spine-compact-filled {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* FILLABLE items - Cyan */
.spine-compact-fillable {
    background: rgba(15, 20, 30, 0.6);
    border: 1px dashed rgba(0, 255, 200, 0.3);
    cursor: pointer;
}

.spine-compact-fillable:hover {
    border-color: rgba(0, 255, 200, 0.6);
    background: rgba(0, 255, 200, 0.05);
    transform: translateY(-3px);
}

.spine-compact-fillable .spine-compact-marker {
    position: relative;
}

.spine-compact-fillable .marker-dot {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 255, 200, 0.4);
    border-radius: 50%;
    font-size: 0.9rem;
    color: rgba(0, 255, 200, 0.6);
}

.spine-compact-fillable .next-badge {
    position: absolute;
    top: -8px;
    right: -15px;
    font-size: 0.5rem;
    font-weight: 700;
    background: #00ffc8;
    color: #0a0f15;
    padding: 2px 5px;
    border-radius: 3px;
}

.spine-compact-fillable .spine-compact-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: 8px;
    line-height: 1.2;
}

.spine-compact-fillable .spine-compact-hint {
    font-size: 0.6rem;
    color: rgba(0, 255, 200, 0.5);
    margin-top: 4px;
}

/* NEXT fillable slot - Highlighted */
.spine-compact-fillable.is-next {
    border: 2px solid #00ffc8;
    border-style: solid;
    background: rgba(0, 255, 200, 0.08);
    animation: compactNextGlow 2s ease-in-out infinite;
}

.spine-compact-fillable.is-next .marker-dot {
    border-style: solid;
    border-color: #00ffc8;
    background: rgba(0, 255, 200, 0.2);
    animation: compactMarkerPulse 1.5s ease-in-out infinite;
}

@keyframes compactNextGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 200, 0.3); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 200, 0.5); }
}

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

/* FILLED fillable slot */
.spine-compact-fillable.is-filled {
    border: 1px solid rgba(0, 255, 200, 0.4);
    border-style: solid;
    cursor: default;
}

.spine-compact-fillable.is-filled .marker-dot {
    background: #00ffc8;
    border: none;
    color: #0a0f15;
    font-size: 0.7rem;
}

.spine-compact-fillable.is-filled .spine-compact-filled {
    font-size: 0.65rem;
    color: #00ffc8;
    margin-top: 4px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* FUTURE slots - Dimmed */
.spine-compact-fillable.is-future {
    opacity: 0.3;
    pointer-events: none;
    border-style: dotted;
}

/* Prompt card styling update */
.build-mode-spine-prompt-card .prompt-card-inner {
    text-align: center;
    padding: 25px 30px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 255, 200, 0.1) 0%, transparent 60%),
        rgba(20, 25, 35, 0.9);
    border: 1px dashed rgba(0, 255, 200, 0.4);
    border-radius: 12px;
    min-width: 200px;
}

.build-mode-spine-prompt-card .prompt-card-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: #00ffc8;
    margin: 0 0 6px 0;
}

.build-mode-spine-prompt-card .prompt-card-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px 0;
}

.build-mode-spine-prompt-card .prompt-card-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 16px;
    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
    color: #0a0f15;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.build-mode-spine-prompt-card .prompt-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 255, 200, 0.4);
}

/* ==========================================================================
   ZORDON ONBOARDING - Frosted Glass Tooltips (Request Access Style)
   Same style as the Request Access popup modal
   ========================================================================== */

/* Floating frosted glass tooltip - matches Request Access modal */
.cn-zordon-onboarding-tooltip {
    position: fixed;
    z-index: 10000001;
    max-width: 360px;
    padding: 24px;
    
    /* Frosted glass - same as Request Access modal */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    
    /* Box shadow system from Request Access */
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    
    opacity: 0;
    transform: translateY(15px) scale(0.96);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Gradient overlay - same as Request Access */
.cn-zordon-onboarding-tooltip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
    border-radius: 20px;
}

/* Shimmer effect - same as Request Access */
.cn-zordon-onboarding-tooltip::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    animation: zordonGlassShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes zordonGlassShimmer {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 0.6; }
}

.cn-zordon-onboarding-tooltip.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Orbs with gradient colors */
.cn-zordon-tooltip-orbs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.cn-zordon-tooltip-orbs .zordon-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zordonOrbPulse 1.5s ease-in-out infinite;
}

.cn-zordon-tooltip-orbs .zordon-orb:nth-child(1) { 
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
    animation-delay: 0s;
}
.cn-zordon-tooltip-orbs .zordon-orb:nth-child(2) { 
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    animation-delay: 0.15s;
}
.cn-zordon-tooltip-orbs .zordon-orb:nth-child(3) { 
    background: linear-gradient(135deg, #ffff00, #ffd700);
    animation-delay: 0.3s;
}

.cn-zordon-tooltip-title {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cn-zordon-tooltip-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0 0 18px 0;
    position: relative;
    z-index: 1;
}

.cn-zordon-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.cn-zordon-step-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* Solid green button - same as Request Access */
.cn-zordon-tooltip-btn {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: #22c55e;
    border: 2px solid #16a34a;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cn-zordon-tooltip-btn:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   ZORDON HIGHLIGHT CLASSES - EXTRA PROMINENT
   Make highlighted elements impossible to miss
   ========================================================================== */

/* Feature container highlight - intense glow */
.zordon-feature-highlight {
    position: relative;
    z-index: 1000;
    box-shadow: 
        0 0 0 4px rgba(0, 255, 200, 0.7),
        0 0 60px rgba(0, 255, 200, 0.5),
        0 0 100px rgba(0, 255, 200, 0.3),
        inset 0 0 30px rgba(0, 255, 200, 0.1) !important;
    animation: zordonFeatureGlow 2s ease-in-out infinite !important;
}

@keyframes zordonFeatureGlow {
    0%, 100% { 
        box-shadow: 
            0 0 0 4px rgba(0, 255, 200, 0.6),
            0 0 50px rgba(0, 255, 200, 0.4),
            0 0 80px rgba(0, 255, 200, 0.2);
    }
    50% { 
        box-shadow: 
            0 0 0 6px rgba(0, 255, 200, 0.8),
            0 0 80px rgba(0, 255, 200, 0.6),
            0 0 120px rgba(0, 255, 200, 0.4);
    }
}

/* Empty slot highlight */
.zordon-slot-highlight .spine-item-card {
    border-color: rgba(0, 255, 200, 0.8) !important;
    box-shadow: 
        0 0 40px rgba(0, 255, 200, 0.4),
        inset 0 0 20px rgba(0, 255, 200, 0.1) !important;
}

/* Active/Next slot highlight - VERY prominent */
.zordon-active-slot-highlight .spine-item-card {
    border-color: #00ffc8 !important;
    border-width: 2px !important;
    box-shadow: 
        0 0 0 4px rgba(0, 255, 200, 0.3),
        0 0 50px rgba(0, 255, 200, 0.5),
        0 0 80px rgba(0, 255, 200, 0.3),
        inset 0 0 30px rgba(0, 255, 200, 0.15) !important;
    animation: zordonActiveSlotPulse 1.5s ease-in-out infinite !important;
}

@keyframes zordonActiveSlotPulse {
    0%, 100% { 
        box-shadow: 
            0 0 0 3px rgba(0, 255, 200, 0.3),
            0 0 40px rgba(0, 255, 200, 0.4),
            inset 0 0 20px rgba(0, 255, 200, 0.1);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 0 0 6px rgba(0, 255, 200, 0.5),
            0 0 70px rgba(0, 255, 200, 0.6),
            inset 0 0 40px rgba(0, 255, 200, 0.2);
        transform: scale(1.02);
    }
}

/* Button highlight - SUPER BRIGHT so user can't miss it */
.zordon-button-highlight {
    position: relative;
    z-index: 10000;
    box-shadow: 
        0 0 0 4px rgba(0, 255, 200, 0.8),
        0 0 40px rgba(0, 255, 200, 0.6),
        0 0 80px rgba(0, 255, 200, 0.4) !important;
    animation: zordonButtonGlow 1s ease-in-out infinite !important;
}

.zordon-button-highlight::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: inherit;
    background: linear-gradient(45deg, #00ffc8, #ff00ff, #00d4ff, #ffff00);
    background-size: 400% 400%;
    animation: zordonButtonRainbow 3s ease-in-out infinite;
    z-index: -1;
    opacity: 0.5;
    filter: blur(12px);
}

@keyframes zordonButtonGlow {
    0%, 100% { 
        box-shadow: 
            0 0 0 3px rgba(0, 255, 200, 0.7),
            0 0 30px rgba(0, 255, 200, 0.5),
            0 0 60px rgba(0, 255, 200, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 0 6px rgba(0, 255, 200, 1),
            0 0 50px rgba(0, 255, 200, 0.7),
            0 0 100px rgba(0, 255, 200, 0.5);
    }
}

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

/* Target element highlight */
.zordon-target-highlight {
    position: relative;
    z-index: 999;
}

/* Zordon modal overlay - Request Access style */
.cn-zordon-onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same as Request Access modal overlay */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cn-zordon-onboarding-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Zordon modal - Request Access style */
.cn-zordon-onboarding-modal {
    position: relative;
    max-width: 500px;
    width: 90%;
    padding: 32px;
    
    /* Frosted glass - same as Request Access */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Gradient overlay - same as Request Access */
.cn-zordon-onboarding-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
    border-radius: 20px;
}

/* Shimmer effect - same as Request Access */
.cn-zordon-onboarding-modal::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    animation: zordonGlassShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.cn-zordon-onboarding-overlay.active .cn-zordon-onboarding-modal {
    transform: translateY(0) scale(1);
}

.cn-zordon-onboarding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cn-zordon-step-indicator {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
}

.cn-zordon-onboarding-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px 0;
}

.cn-zordon-onboarding-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 25px 0;
}

.cn-zordon-onboarding-footer {
    display: flex;
    justify-content: flex-end;
}

.cn-zordon-btn {
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid;
}

.cn-zordon-btn-next,
.cn-zordon-btn-primary {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 255, 200, 0.08));
    border-color: rgba(0, 255, 200, 0.5);
    color: #00ffc8;
}

.cn-zordon-btn-next:hover,
.cn-zordon-btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.25), rgba(0, 255, 200, 0.15));
    border-color: #00ffc8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 200, 0.25);
}

.cn-zordon-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    margin-right: 10px;
}

.cn-zordon-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ==========================================================================
   SOCIAL CALENDAR INTRO MODAL - Request Access Style
   ========================================================================== */
.cn-zordon-social-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same as Request Access modal overlay */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cn-zordon-social-intro-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-zordon-social-intro-modal {
    position: relative;
    max-width: 500px;
    width: 90%;
    padding: 32px;
    /* Frosted glass - same as Request Access */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Gradient overlay - same as Request Access */
.cn-zordon-social-intro-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
    border-radius: 20px;
}

/* Shimmer effect - same as Request Access */
.cn-zordon-social-intro-modal::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    animation: zordonGlassShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.cn-zordon-social-intro-overlay.active .cn-zordon-social-intro-modal {
    transform: translateY(0) scale(1);
}

.cn-zordon-social-header {
    margin-bottom: 20px;
}

.cn-zordon-social-title {
    font-size: 18px;
    font-weight: 600;
    color: #00ffc8;
    margin: 0 0 12px 0;
}

.cn-zordon-social-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 25px 0;
}

.cn-zordon-social-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.cn-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 14px 24px;
    background: rgba(15, 20, 30, 0.95);
    border: 1px solid rgba(0, 255, 200, 0.3);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 10000001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cn-toast.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.cn-toast-message {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.cn-toast-success {
    border-color: rgba(34, 197, 94, 0.5);
}

.cn-toast-success .cn-toast-message {
    color: #22c55e;
}

.cn-toast-error {
    border-color: rgba(239, 68, 68, 0.5);
}

.cn-toast-error .cn-toast-message {
    color: #ef4444;
}

.cn-toast-info .cn-toast-message {
    color: #00ffc8;
}

/* ==========================================================================
   ACTIVE SLOT HIGHLIGHTING
   ========================================================================== */
.active-slot,
.next-slot {
    border-color: #00ffc8 !important;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.3) !important;
    animation: activeSlotPulse 2s ease-in-out infinite !important;
}

@keyframes activeSlotPulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(0, 255, 200, 0.3); 
        border-color: #00ffc8;
    }
    50% { 
        box-shadow: 0 0 30px rgba(0, 255, 200, 0.5); 
        border-color: #00ffff;
    }
}

.future-slot {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   BUILDER STATUS SECTION - Slot-aware UI
   ========================================================================== */
.cn-te-builder-status-section {
    background: rgba(0, 30, 40, 0.6);
    border: 1px solid rgba(0, 255, 200, 0.15);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.cn-builder-status-header {
    margin-bottom: 10px;
}

.cn-builder-status-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(0, 255, 200, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cn-builder-status-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cn-builder-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.cn-builder-row-label {
    color: rgba(255, 255, 255, 0.5);
}

.cn-builder-row-value {
    color: #fff;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-builder-building .cn-builder-row-value {
    color: #00ffc8;
}

.cn-builder-viewing .cn-builder-row-value {
    color: #a78bfa;
}

.cn-builder-phase .cn-builder-row-value {
    color: #f472b6;
}

.cn-builder-action-status {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cn-builder-action-status span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-builder-action-status .status-help {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.cn-builder-action-status .status-applicable {
    color: #22c55e;
}

.cn-builder-action-status .status-locked {
    color: #f59e0b;
}

.cn-builder-action-status .status-structural {
    color: #a78bfa;
}

.cn-builder-action-status svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   SLOT-AWARE MOMENT ACTIONS
   ========================================================================== */
#cn-moment-actions-panel.structural-mode {
    border-color: rgba(167, 139, 250, 0.3);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(139, 92, 246, 0.05));
}

#cn-moment-actions-panel.structural-mode .cn-moment-actions-label {
    color: #a78bfa;
}

#cn-moment-actions-panel.locked-mode {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 179, 8, 0.05));
}

#cn-moment-actions-panel.locked-mode .cn-moment-actions-label {
    color: #f59e0b;
}

.cn-te-sidebar-btn.cn-te-btn-locked {
    background: linear-gradient(135deg, rgba(75, 85, 99, 0.4), rgba(55, 65, 81, 0.3));
    border: 1px solid rgba(107, 114, 128, 0.4);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    position: relative;
}

.cn-te-sidebar-btn.cn-te-btn-locked .locked-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #f59e0b;
    color: #000;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.cn-locked-help {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 8px 0;
    padding: 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
}

/* Main section CTA states */

/* INSPO button — the ONE consistent state for strategic moments */
#add-to-timeline-btn.cn-te-btn-inspo {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(59, 130, 246, 0.15)) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    color: #38bdf8 !important;
}
#add-to-timeline-btn.cn-te-btn-inspo:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(59, 130, 246, 0.25)) !important;
    border-color: #38bdf8 !important;
}
#add-to-timeline-btn.cn-te-btn-inspo svg {
    width: 16px;
    height: 16px;
}

#add-to-timeline-btn.cn-te-btn-structural {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.2)) !important;
    border-color: rgba(167, 139, 250, 0.5) !important;
    color: #a78bfa !important;
}

#add-to-timeline-btn.cn-te-btn-structural:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.4), rgba(139, 92, 246, 0.3)) !important;
    border-color: #a78bfa !important;
}

#add-to-timeline-btn.cn-te-btn-locked {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(71, 85, 105, 0.15)) !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
    color: rgba(148, 163, 184, 0.8) !important;
    cursor: default;
    opacity: 0.7;
}
#add-to-timeline-btn.cn-te-btn-locked:hover {
    opacity: 0.85;
}
#add-to-timeline-btn.cn-te-btn-locked svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* ==========================================================================
   SAVE AS INSPO MODAL
   ========================================================================== */
.cn-inspo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 20, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cn-inspo-modal-overlay.cn-inspo-visible {
    opacity: 1;
}
.cn-inspo-modal {
    background: linear-gradient(160deg, #1a1e2e, #151822);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(56, 189, 248, 0.08);
    overflow: hidden;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
}
.cn-inspo-visible .cn-inspo-modal {
    transform: translateY(0) scale(1);
}
.cn-inspo-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
}
.cn-inspo-close:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}
.cn-inspo-close svg {
    width: 18px;
    height: 18px;
}
.cn-inspo-header {
    padding: 24px 24px 16px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cn-inspo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #38bdf8;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cn-inspo-badge svg {
    width: 14px;
    height: 14px;
}
.cn-inspo-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    font-family: 'Inter', -apple-system, sans-serif;
}
.cn-inspo-category {
    font-size: 11px;
    font-weight: 600;
    color: rgba(56, 189, 248, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.cn-inspo-body {
    padding: 16px 24px 20px;
}
.cn-inspo-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin: 0 0 16px;
}
.cn-inspo-note-section {
    margin-bottom: 14px;
}
.cn-inspo-note-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}
.cn-inspo-note-label svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}
.cn-inspo-note-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: #fff !important;
    font-family: 'Inter', -apple-system, sans-serif;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.2s;
    box-sizing: border-box;
    -webkit-text-fill-color: #fff;
}
.cn-inspo-note-input:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(255, 255, 255, 0.07);
}
.cn-inspo-note-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}
.cn-inspo-slot-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(34, 197, 94, 0.8);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
}
.cn-inspo-slot-info svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.cn-inspo-slot-info.cn-inspo-slot-full {
    color: rgba(148, 163, 184, 0.7);
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.15);
}
.cn-inspo-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}
.cn-inspo-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', -apple-system, sans-serif;
}
.cn-inspo-cancel:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}
.cn-inspo-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(59, 130, 246, 0.2));
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', -apple-system, sans-serif;
}
.cn-inspo-save:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.4), rgba(59, 130, 246, 0.3));
    border-color: #38bdf8;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}
.cn-inspo-save svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   STRUCTURAL ANCHOR STRATEGY MODAL
   ========================================================================== */
.cn-structural-strategy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000010;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.cn-structural-strategy-modal {
    background: linear-gradient(180deg, rgba(20, 30, 50, 0.98), rgba(10, 20, 35, 0.98));
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5),
                0 0 80px rgba(167, 139, 250, 0.15);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-structural-header {
    padding: 30px 30px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(167, 139, 250, 0.15);
}

.cn-structural-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(167, 139, 250, 0.4);
    color: #a78bfa;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.cn-structural-badge svg {
    width: 14px;
    height: 14px;
}

.cn-structural-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.cn-structural-type {
    font-size: 12px;
    color: rgba(167, 139, 250, 0.8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cn-structural-body {
    padding: 24px 30px;
}

.cn-structural-philosophy {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 12px;
    margin-bottom: 24px;
}

.cn-philosophy-icon {
    flex-shrink: 0;
}

.cn-philosophy-icon svg {
    width: 24px;
    height: 24px;
    color: #a78bfa;
}

.cn-philosophy-text strong {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 8px;
}

.cn-philosophy-text p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.cn-structural-actions h4 {
    font-size: 12px;
    font-weight: 700;
    color: #00ffc8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
}

.cn-structural-actions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cn-structural-actions li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 0;
}

.cn-structural-actions li svg {
    width: 16px;
    height: 16px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 1px;
}

.cn-structural-footer {
    display: flex;
    gap: 12px;
    padding: 20px 30px 30px;
    justify-content: center;
}

.cn-structural-footer .cn-te-sidebar-btn {
    padding: 12px 24px;
    font-size: 13px;
}

/* ==========================================================================
   SLOT HIGHLIGHT ANIMATION (on click feedback)
   ========================================================================== */
.zordon-slot-highlight {
    animation: zordonSlotHighlight 0.5s ease-in-out 3 !important;
    border-color: #00ffc8 !important;
    box-shadow: 0 0 40px rgba(0, 255, 200, 0.5),
                0 0 80px rgba(0, 255, 200, 0.2),
                inset 0 0 20px rgba(0, 255, 200, 0.1) !important;
}

@keyframes zordonSlotHighlight {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 255, 200, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 50px rgba(0, 255, 200, 0.6),
                    0 0 100px rgba(0, 255, 200, 0.3);
        transform: scale(1.02);
    }
}

/* Warning toast style */
.cn-toast-warning {
    border-color: rgba(245, 158, 11, 0.5);
}

.cn-toast-warning .cn-toast-message {
    color: #f59e0b;
}

/* ==========================================================================
   CAMPAIGN INTENT ONBOARDING MODAL - Request Access Style
   ========================================================================== */
.cn-zordon-intent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Same as Request Access modal overlay */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000020;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cn-zordon-intent-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-zordon-intent-modal {
    position: relative;
    /* Frosted glass - same as Request Access */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    width: 90%;
    max-width: 520px;
    padding: 40px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Gradient overlay - same as Request Access */
.cn-zordon-intent-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
    border-radius: 20px;
}

/* Shimmer effect - same as Request Access */
.cn-zordon-intent-modal::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    animation: zordonGlassShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.cn-zordon-intent-header {
    text-align: center;
    margin-bottom: 30px;
}

.cn-zordon-intent-header .zordon-thinking-orbs {
    margin-bottom: 20px;
}

.cn-zordon-intent-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.3;
}

.cn-zordon-intent-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
}

.cn-intent-questions {
    margin-bottom: 30px;
}

.cn-intent-question {
    display: none;
}

.cn-intent-question.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.cn-intent-q-title {
    font-size: 16px;
    font-weight: 600;
    color: #00ffc8;
    margin: 0 0 8px;
    text-align: center;
}

.cn-intent-q-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 0 0 20px;
}

.cn-intent-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cn-intent-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.cn-intent-option:hover {
    background: rgba(0, 255, 200, 0.08);
    border-color: rgba(0, 255, 200, 0.3);
    color: #fff;
}

.cn-intent-option.selected {
    background: rgba(0, 255, 200, 0.15);
    border-color: #00ffc8;
    color: #fff;
}

.cn-intent-option svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #00ffc8;
}

.cn-intent-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.cn-intent-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.cn-intent-progress-dot.active {
    background: #00ffc8;
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.5);
}

.cn-intent-footer {
    text-align: center;
}

.cn-intent-summary {
    background: rgba(0, 255, 200, 0.08);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.cn-intent-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-intent-summary-item:last-child {
    border-bottom: none;
}

.cn-intent-summary-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-intent-summary-value {
    font-size: 12px;
    color: #00ffc8;
    font-weight: 600;
}

/* ==========================================================================
   CONDITIONAL ANCHOR STYLES
   ========================================================================== */
#cn-moment-actions-panel.conditional-mode {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(234, 179, 8, 0.04));
}

#cn-moment-actions-panel.conditional-mode .cn-moment-actions-label {
    color: #f59e0b;
}

#cn-moment-actions-panel.conditional-match-mode {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(22, 163, 74, 0.04));
}

#cn-moment-actions-panel.conditional-match-mode .cn-moment-actions-label {
    color: #22c55e;
}

.cn-conditional-help {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 8px 0 0;
    padding: 10px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
}

.cn-builder-action-status .status-conditional {
    color: #f59e0b;
}

.cn-builder-action-status .status-conditional-match {
    color: #22c55e;
}

.cn-builder-action-status.status-conditional-state {
    border-color: rgba(245, 158, 11, 0.3);
}

.cn-builder-action-status.status-conditional-match-state {
    border-color: rgba(34, 197, 94, 0.3);
}

/* ==========================================================================
   CONDITIONAL TRANSLATION OVERLAY
   ========================================================================== */
.cn-conditional-te-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 20, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10000015;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cn-conditional-te-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-conditional-te-modal {
    background: linear-gradient(180deg, rgba(20, 35, 55, 0.98), rgba(10, 20, 40, 0.98));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6),
                0 0 80px rgba(34, 197, 94, 0.1);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-conditional-te-header {
    position: relative;
    padding: 30px 30px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-conditional-te-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.cn-conditional-te-badge svg {
    width: 14px;
    height: 14px;
}

.cn-conditional-te-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.cn-conditional-te-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.cn-conditional-te-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
}

.cn-conditional-te-close:hover {
    color: #fff;
}

.cn-conditional-te-close svg {
    width: 20px;
    height: 20px;
}

.cn-conditional-te-context {
    display: flex;
    gap: 20px;
    padding: 16px 30px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-context-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-context-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-context-value {
    font-size: 13px;
    color: #22c55e;
    font-weight: 600;
}

.cn-conditional-te-body {
    padding: 24px 30px;
    max-height: 400px;
    overflow-y: auto;
}

.cn-conditional-te-body h4 {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px;
}

.cn-conditional-te-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cn-conditional-te-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.cn-conditional-te-card:hover {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.cn-conditional-card-header {
    margin-bottom: 8px;
}

.cn-conditional-card-scale {
    font-size: 9px;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.cn-conditional-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
}

.cn-conditional-card-actions {
    display: flex;
    gap: 8px;
}

.cn-conditional-card-actions .cn-te-sidebar-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 11px;
}

.cn-conditional-te-footer {
    padding: 16px 30px 24px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   GHOST POST STYLES
   ========================================================================== */
.ghost-post-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    color: rgba(167, 139, 250, 0.8);
    background: rgba(167, 139, 250, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.social-calendar-container.highlighted {
    animation: calendarHighlight 0.5s ease-in-out 3;
    box-shadow: 0 0 60px rgba(0, 255, 200, 0.3) !important;
}

/* ==========================================================================
   PHASE-AWARE MOMENTUM MODAL - USES ZORDON GLASS BACKGROUND
   Extends .cn-zordon-modal-overlay and .cn-zordon-modal
   ========================================================================== */

/* Modal-specific positioning */
.cn-momentum-overlay.cn-zordon-modal-overlay {
    z-index: 10000030;
}

.cn-momentum-modal.cn-zordon-modal {
    max-width: 520px;
    padding: 32px;
}

/* Close Button */
.cn-momentum-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.cn-momentum-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cn-momentum-close-btn svg {
    width: 18px;
    height: 18px;
}

/* Override header for momentum modal */
.cn-momentum-modal .cn-zordon-modal-header {
    margin-bottom: 20px;
}

.cn-momentum-modal .cn-zordon-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.cn-momentum-modal .cn-zordon-modal-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.cn-momentum-modal .cn-zordon-modal-subtitle strong {
    color: #00ffc8;
    font-weight: 600;
}

/* Phase Context Bar */
.cn-momentum-context-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(0, 255, 200, 0.06);
    border: 1px solid rgba(0, 255, 200, 0.15);
    border-radius: 12px;
    margin-bottom: 24px;
}

.cn-context-phase {
    font-size: 13px;
    font-weight: 600;
    color: #00ffc8;
}

.cn-context-arrow {
    color: rgba(255, 255, 255, 0.3);
}

.cn-context-arrow svg {
    width: 14px;
    height: 14px;
}

.cn-context-anchor {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #a78bfa;
}

.cn-context-anchor svg {
    width: 14px;
    height: 14px;
}

/* Tabs */
.cn-momentum-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.cn-momentum-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cn-momentum-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.cn-momentum-tab.active {
    background: rgba(0, 255, 200, 0.1);
    border-color: rgba(0, 255, 200, 0.35);
    color: #00ffc8;
}

.cn-momentum-tab svg {
    width: 14px;
    height: 14px;
}

/* Tab Content */
.cn-momentum-tab-content {
    display: none;
    margin-bottom: 24px;
}

.cn-momentum-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Event Card from Campaign Timeline */
.cn-momentum-event-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--card-accent, #00ffc8);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.cn-momentum-event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top left, var(--card-accent, #00ffc8), transparent 70%);
    opacity: 0.05;
    pointer-events: none;
}

.cn-event-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cn-event-card-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--card-accent, #00ffc8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-event-card-source {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cn-event-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
    position: relative;
}

.cn-event-card-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.6;
    position: relative;
}

/* Empty State */
.cn-momentum-empty-state {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.cn-momentum-empty-state p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* Form Fields */
.cn-momentum-field {
    margin-bottom: 16px;
}

.cn-momentum-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.cn-label-optional {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    text-transform: none;
}

.cn-momentum-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.cn-momentum-input:focus {
    outline: none;
    border-color: rgba(0, 255, 200, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(0, 255, 200, 0.1);
}

.cn-momentum-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
}

.cn-momentum-textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.cn-momentum-textarea:focus {
    outline: none;
    border-color: rgba(0, 255, 200, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(0, 255, 200, 0.1);
}

.cn-momentum-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Date Section */
.cn-momentum-date-section {
    margin-bottom: 24px;
}

.cn-date-constraint {
    font-weight: 500;
    color: rgba(0, 255, 200, 0.7);
    text-transform: none;
}

/* Date Grid */
.cn-momentum-date-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cn-date-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cn-date-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.cn-date-option.selected {
    background: linear-gradient(135deg, rgba(0, 255, 200, 0.15), rgba(0, 200, 150, 0.1));
    border-color: rgba(0, 255, 200, 0.5);
    box-shadow: 0 4px 20px rgba(0, 255, 200, 0.15);
}

.cn-date-option-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.cn-date-option.selected .cn-date-option-label {
    color: rgba(0, 255, 200, 0.9);
}

.cn-date-option-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.cn-date-option.selected .cn-date-option-value {
    color: #00ffc8;
}

/* Footer */
.cn-momentum-footer {
    display: flex;
    gap: 12px;
    padding-top: 8px;
}

.cn-momentum-cancel-btn {
    flex: 0 0 auto;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-momentum-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cn-momentum-confirm-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #00ffc8, #00d4a8);
    border: none;
    border-radius: 12px;
    color: #0a1628;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.cn-momentum-confirm-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

.cn-momentum-confirm-btn:hover::before {
    left: 100%;
}

.cn-momentum-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 255, 200, 0.35);
}

.cn-momentum-confirm-btn svg {
    width: 16px;
    height: 16px;
}

/* Animation for fade in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   NARRATIVE STORY RAIL - macOS DOCK STYLE
   Magnification effect on hover like macOS Dock
   ========================================================================== */
:root {
    /* Story Rail Colors - UPDATED SEMANTICS */
    --story-locked: #ff6b6b;                        /* LOCKED = Red/coral - fixed anchors */
    --story-locked-glow: rgba(255, 107, 107, 0.5);
    --story-completed: #22c55e;                     /* FILLED = Green - user completed */
    --story-completed-glow: rgba(34, 197, 94, 0.6);
    --story-active: #00d4ff;                        /* ACTIVE = Cyan - current focus */
    --story-active-glow: rgba(0, 212, 255, 0.6);
    --story-empty: rgba(255, 255, 255, 0.3);        /* EMPTY = Dim white - needs filling */
    --story-empty-glow: rgba(255, 255, 255, 0.2);
    --story-future: rgba(255, 255, 255, 0.12);      /* FUTURE = Very dim */
    --story-line: rgba(255, 255, 255, 0.1);         /* Thin subtle line */
}

/* ==========================================================================
   NARRATIVE RAIL LAYER - INLINE PLACEMENT
   No container box. No panel. Embedded in content flow.
   TIGHT SPACING - thin elements need tight margins
   ========================================================================== */
.cn-narrative-rail-layer {
    padding: 10px 0 4px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-narrative-rail-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* Rail Identity Label */
.cn-story-rail-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 8px;
}

/* ==========================================================================
   STORY RAIL - THE THIN LINE
   ========================================================================== */
.cn-story-rail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

/* The thin continuous line */
.cn-story-line {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    height: 2px;
    background: var(--story-line);
    transform: translateY(-50%);
    border-radius: 1px;
}

/* ==========================================================================
   STORY NODES - CLEAN DOTS WITH HOVER DETAIL CARDS
   Simple dots on rail, detail card appears on hover
   ========================================================================== */
.cn-story-nodes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 20px 0 30px 0;
}

.cn-story-node {
    position: relative;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
}

.cn-story-node:hover {
    transform: scale(1.15);
}

.cn-story-node.hovered {
    transform: scale(1.2);
}

/* The dot itself */
.cn-story-dot {
    display: block;
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Anchor nodes = larger dots */
.cn-story-node.anchor .cn-story-dot {
    width: 14px;
    height: 14px;
}

/* Fillable nodes = medium dots */
.cn-story-node.fillable .cn-story-dot {
    width: 11px;
    height: 11px;
}

/* ==========================================================================
   NODE STATES - CLEAR VISUAL SEMANTICS
   
   LOCKED (Anchors) = RED - Fixed dates
   EMPTY = Pulsing outline - Needs filling
   FILLED = GREEN - User completed
   ACTIVE = CYAN - Current focus
   ========================================================================== */

/* LOCKED ANCHORS - RED/CORAL */
.cn-story-node.anchor .cn-story-dot,
.cn-story-node.anchor.locked .cn-story-dot {
    background: var(--story-locked);
    box-shadow: 0 0 10px var(--story-locked-glow);
}

.cn-story-node.anchor:hover .cn-story-dot,
.cn-story-node.anchor.hovered .cn-story-dot {
    box-shadow: 0 0 16px var(--story-locked-glow),
                0 0 32px var(--story-locked-glow);
}

/* EMPTY SLOTS - PULSING OUTLINE */
.cn-story-node.empty .cn-story-dot {
    background: transparent;
    border: 2px solid var(--story-empty);
    box-shadow: 0 0 6px var(--story-empty-glow);
    animation: emptyPulse 2.5s ease-in-out infinite;
}

.cn-story-node.empty:hover .cn-story-dot,
.cn-story-node.empty.hovered .cn-story-dot {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    animation: none;
}

/* Required empty = CYAN pulse */
.cn-story-node.empty.required .cn-story-dot {
    border-color: var(--story-active);
    box-shadow: 0 0 8px var(--story-active-glow);
    animation: requiredPulse 2s ease-in-out infinite;
}

/* FILLED SLOTS - GREEN GLOW */
.cn-story-node.filled .cn-story-dot,
.cn-story-node.completed:not(.anchor) .cn-story-dot {
    background: var(--story-completed);
    border: none;
    box-shadow: 0 0 10px var(--story-completed-glow);
}

.cn-story-node.filled:hover .cn-story-dot,
.cn-story-node.filled.hovered .cn-story-dot {
    box-shadow: 0 0 16px var(--story-completed-glow),
                0 0 32px var(--story-completed-glow);
}

/* ACTIVE SLOT - CYAN */
.cn-story-node.active .cn-story-dot {
    background: var(--story-active);
    box-shadow: 0 0 12px var(--story-active-glow);
    animation: activePulse 2s ease-in-out infinite;
}

.cn-story-node.active.empty .cn-story-dot {
    background: transparent;
    border: 2px solid var(--story-active);
}

/* FUTURE SLOTS - DIM */
.cn-story-node.future .cn-story-dot {
    background: var(--story-future);
    box-shadow: none;
    opacity: 0.4;
}

.cn-story-node.future:hover .cn-story-dot {
    opacity: 0.7;
}

/* ==========================================================================
   DETAIL CARD - Appears on hover over dots
   ========================================================================== */
.cn-spine-detail-card {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    margin-bottom: 15px;
}

.cn-spine-detail-card.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cn-detail-card-inner {
    background: rgba(12, 18, 30, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 1px rgba(255, 255, 255, 0.1);
}

/* State-based border colors */
.cn-detail-card-inner.locked {
    border-color: var(--story-locked);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 20px var(--story-locked-glow);
}

.cn-detail-card-inner.empty {
    border-color: var(--story-active);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 20px var(--story-active-glow);
}

.cn-detail-card-inner.filled {
    border-color: var(--story-completed);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 20px var(--story-completed-glow);
}

/* Detail card header */
.cn-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cn-detail-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-detail-state-badge svg {
    width: 12px;
    height: 12px;
}

.cn-detail-state-badge.locked {
    background: rgba(255, 107, 107, 0.2);
    color: var(--story-locked);
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.cn-detail-state-badge.locked svg {
    stroke: var(--story-locked);
}

.cn-detail-state-badge.empty {
    background: rgba(0, 212, 255, 0.15);
    color: var(--story-active);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.cn-detail-state-badge.empty svg {
    stroke: var(--story-active);
}

.cn-detail-state-badge.filled {
    background: rgba(34, 197, 94, 0.15);
    color: var(--story-completed);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.cn-detail-state-badge.filled svg {
    stroke: var(--story-completed);
}

.cn-detail-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* Detail card content */
.cn-detail-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
}

.cn-detail-category {
    font-size: 0.7rem;
    color: var(--story-locked);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.cn-detail-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin-bottom: 8px;
}

.cn-detail-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-bottom: 8px;
}

.cn-detail-hint svg {
    width: 14px;
    height: 14px;
    stroke: rgba(255, 200, 50, 0.7);
    flex-shrink: 0;
    margin-top: 1px;
}

.cn-detail-template {
    padding: 8px 10px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 6px;
    font-size: 0.7rem;
    margin-top: 8px;
}

.cn-template-label {
    color: rgba(255, 255, 255, 0.5);
}

.cn-template-name {
    color: var(--story-active);
    font-weight: 600;
}

.cn-detail-filled {
    padding: 8px 10px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
    font-size: 0.7rem;
    margin-top: 8px;
}

.cn-filled-label {
    color: rgba(255, 255, 255, 0.5);
}

.cn-filled-name {
    color: var(--story-completed);
    font-weight: 600;
}

/* Arrow pointing down to the dot */
.cn-spine-detail-card::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(12, 18, 30, 0.98);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes emptyPulse {
    0%, 100% {
        box-shadow: 0 0 4px var(--story-empty-glow);
        border-color: var(--story-empty);
    }
    50% {
        box-shadow: 0 0 10px var(--story-empty-glow);
        border-color: rgba(255, 255, 255, 0.5);
    }
}

@keyframes requiredPulse {
    0%, 100% {
        box-shadow: 0 0 6px var(--story-active-glow);
        border-color: var(--story-active);
    }
    50% {
        box-shadow: 0 0 14px var(--story-active-glow);
        border-color: rgba(0, 212, 255, 0.9);
    }
}

@keyframes activePulse {
    0%, 100% {
        box-shadow: 0 0 10px var(--story-active-glow);
    }
    50% {
        box-shadow: 0 0 18px var(--story-active-glow);
    }
}

/* ==========================================================================
   OLD PLAN FOCUS HUD - Hidden (replaced by cn-focus-bar)
   ========================================================================== */
.goal-tracking-hud {
    display: none !important;
}

/* ==========================================================================
   FOCUS BAR - REMOVED from main section (now in sidebar)
   ========================================================================== */
.cn-focus-bar {
    display: none !important;
}

.cn-focus-slots strong {
    color: var(--story-active);
}

.cn-focus-anchors strong {
    color: var(--story-locked);
}

.cn-focus-next strong {
    color: rgba(255, 255, 255, 0.85);
}

.cn-focus-divider {
    color: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   YOUR CAMPAIGN RAIL — user's approved timeline
   Anchors (fixed) + approved moments only. Ghosts for unapproved.
   ========================================================================== */

/* ── Header ── */
.cn-yc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 8px 8px;
}

.cn-yc-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-shrink: 0;
}

.cn-yc-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.cn-yc-count {
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
}

.cn-yc-progress-wrap {
    flex: 1;
    max-width: 200px;
}

.cn-yc-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.cn-yc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4fc3f7, #39ff14);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ── Empty state ── */
.cn-yc-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    font-style: italic;
}

.cn-yc-empty-state svg {
    flex-shrink: 0;
}

.cn-yc-empty-state p {
    margin: 0;
}

/* ── Rail ── */
.cn-yc-rail {
    position: relative;
    padding: 28px 0 8px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

.cn-yc-rail::-webkit-scrollbar { height: 5px; }
.cn-yc-rail::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 3px; }
.cn-yc-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.cn-yc-rail::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }

.cn-yc-rail-line {
    position: absolute;
    top: 34px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
}

/* ── Nodes container ── */
.cn-yc-nodes {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 0 12px;
    position: relative;
    z-index: 1;
    min-width: max-content;
}

/* ── Individual node ── */
.cn-yc-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding: 4px 6px;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.cn-yc-node:hover {
    transform: translateY(-2px);
}

/* ── The dot ── */
.cn-yc-dot {
    display: block;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Anchor dots — coral red, larger */
.cn-yc-node.anchor .cn-yc-dot {
    width: 14px;
    height: 14px;
    background: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.cn-yc-node.anchor:hover .cn-yc-dot {
    box-shadow: 0 0 18px rgba(255, 107, 107, 0.7), 0 0 30px rgba(255, 107, 107, 0.3);
    transform: scale(1.15);
}

/* Approved dots — solid, phase-colored */
.cn-yc-node.approved .cn-yc-dot {
    width: 12px;
    height: 12px;
    background: var(--node-color, #39ff14);
    box-shadow: 0 0 8px var(--node-color, #39ff14);
    animation: ycApprovedGlow 2.5s ease-in-out infinite;
}

@keyframes ycApprovedGlow {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

.cn-yc-node.approved:hover .cn-yc-dot {
    transform: scale(1.2);
    box-shadow: 0 0 14px var(--node-color, #39ff14), 0 0 24px var(--node-color, #39ff14);
}

/* Customized approved — ring to show user personalized it */
.cn-yc-node.approved.customized .cn-yc-dot {
    box-shadow: 0 0 8px var(--node-color, #39ff14),
                0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Ghost dots — faint dotted outline, small */
.cn-yc-node.ghost .cn-yc-dot {
    width: 8px;
    height: 8px;
    background: transparent;
    border: 1.5px dashed rgba(255, 255, 255, 0.15);
}

.cn-yc-node.ghost {
    opacity: 0.5;
    min-width: 20px;
}

.cn-yc-node.ghost:hover {
    opacity: 0.8;
}

.cn-yc-node.ghost:hover .cn-yc-dot {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.3);
}

/* ── Title ── */
.cn-yc-title {
    margin-top: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.cn-yc-node.anchor .cn-yc-title {
    color: #ff6b6b;
    font-weight: 700;
}

.cn-yc-node.approved .cn-yc-title {
    color: var(--node-color, #39ff14);
}

/* ── Date ── */
.cn-yc-date {
    font-size: 0.52rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    text-align: center;
    margin-top: 2px;
}

.cn-yc-node.anchor .cn-yc-date {
    color: rgba(255, 107, 107, 0.7);
}

/* ── "From Olivia's" reference — clickable link to filmstrip ── */
.cn-yc-ref {
    margin-top: 4px;
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(0, 255, 255, 0.55);
    white-space: normal;
    max-width: 100px;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    text-decoration: none;
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-yc-node:hover .cn-yc-ref {
    color: rgba(0, 255, 255, 0.85);
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.25);
    -webkit-line-clamp: 4;
    max-width: 140px;
}

.cn-yc-ref::before {
    content: '\21B3 ';
}

/* ── Customized badge ── */
.cn-yc-badge {
    margin-top: 3px;
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Currently-viewing highlight on spine node ── */
.cn-yc-node.cn-yc-viewing {
    background: rgba(0, 255, 255, 0.06);
    border-radius: 6px;
    outline: 1px solid rgba(0, 255, 255, 0.2);
    outline-offset: 2px;
}

.cn-yc-node.cn-yc-viewing .cn-yc-dot {
    box-shadow: 0 0 12px var(--node-color, #39ff14), 0 0 0 3px rgba(0, 255, 255, 0.15);
}

/* ── "Showing Olivia's moment" label on main section ── */
.cn-olivia-context-label {
    position: absolute;
    top: 8px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(0, 255, 255, 0.7);
    letter-spacing: 0.5px;
    z-index: 10;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.cn-olivia-context-label.visible {
    opacity: 1;
    transform: translateY(0);
}

.cn-olivia-context-label .cn-ocl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ffcc;
    flex-shrink: 0;
}

/* ── Filmstrip flash on click ── */
@keyframes ycFlash {
    0%   { box-shadow: inset 0 0 0 0 transparent; }
    30%  { box-shadow: inset 0 0 30px rgba(79, 195, 247, 0.15); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}

.film-strip-section.cn-yc-flash {
    animation: ycFlash 0.8s ease-out;
}

/* ── Fade-in for newly approved nodes ── */
.cn-yc-node.approved {
    animation: ycNodeAppear 0.4s ease-out;
}

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

/* ── Hide old elements ── */
.cn-narrative-guidance,
.cn-rail-node,
.cn-thin-guidance-strip {
    display: none !important;
}

/* ── Legacy builder tiles — hidden ── */
.cn-builder-tiles { display: none !important; }

/* (legacy builder-tile styles removed — tiles are hidden) */

/* ==========================================================================
   ZORDON TIPS - Strategic guidance tooltips
   ========================================================================== */
.cn-zordon-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 8px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.cn-zordon-tip.visible {
    opacity: 1;
    transform: translateY(0);
}

.cn-zordon-tip-icon {
    width: 20px;
    height: 20px;
    color: var(--story-active);
    flex-shrink: 0;
}

.cn-zordon-tip-icon svg {
    width: 100%;
    height: 100%;
}

.cn-zordon-tip-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    flex: 1;
}

.cn-zordon-tip-close {
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.cn-zordon-tip-close:hover {
    color: rgba(255, 255, 255, 0.8);
}

.cn-zordon-tip-close svg {
    width: 100%;
    height: 100%;
}

/* Hide old/redundant elements */
.cn-spine-popup-card,
.cn-spine-detail-card,
.cn-build-panel,
.cn-build-toggle-btn,
.cn-builder-guidance,
.cn-builder-strip,
.cn-builder-slots-strip,
.cn-builder-guidance-bar,
.cn-slot-pill {
    display: none !important;
}

/* ==========================================================================
   DATE LABELS - Below the dots
   ========================================================================== */
.cn-story-date {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    font-size: 0.55rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show dates on anchors - color coded */
.cn-story-node.anchor .cn-story-date {
    opacity: 1;
    color: var(--story-locked);
}

/* Show date on active node */
.cn-story-node.active .cn-story-date {
    opacity: 1;
    color: var(--story-active);
}

/* Show date on hover */
.cn-story-node:hover .cn-story-date,
.cn-story-node.hovered .cn-story-date {
    opacity: 1;
}

/* ==========================================================================
   SIMPLE TOOLTIPS - Hidden since we use detail cards
   ========================================================================== */
.cn-story-tooltip {
    display: none;
}

/* ==========================================================================
   PULSE ANIMATION - BREATHING EFFECT FOR ACTIVE NODE
   ========================================================================== */
@keyframes storyPulse {
    0%, 100% {
        box-shadow: 0 0 15px var(--story-active-glow),
                    0 0 30px var(--story-active-glow);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px var(--story-active-glow),
                    0 0 50px var(--story-active-glow);
        transform: scale(1.15);
    }
}

/* ==========================================================================
   BUILDER SEMANTICS - CONSTRUCTION SITE UI
   macOS Dock magnification + clear color semantics
   ========================================================================== */

/* Builder Rail Header - Progress tracking */
.cn-builder-rail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 30px;
}

.cn-builder-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    background: rgba(0, 212, 255, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.cn-progress-count {
    font-weight: 700;
    color: var(--story-active);
    font-size: 0.85rem;
}

.cn-progress-label {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.6rem;
}

/* ==========================================================================
   COLOR LEGEND - VISUAL SEMANTICS
   RED = Locked anchors (fixed dates)
   CYAN = Active/Required empty slots
   GREEN = Filled slots
   ========================================================================== */

/* Reference ghost shows template beneath empty slots */
.cn-reference-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    pointer-events: none;
    opacity: 0.3;
    z-index: -1;
}

.cn-story-node.has-template:hover .cn-reference-ghost {
    opacity: 0.6;
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
}

/* ==========================================================================
   TOOLTIP BUILDER ENHANCEMENTS
   ========================================================================== */
.cn-story-tooltip .cn-required-badge {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 6px;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--story-active);
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cn-story-tooltip .cn-template-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Larger tooltip for builder info */
.cn-story-node.has-template .cn-story-tooltip {
    white-space: normal;
    max-width: 180px;
    text-align: center;
}

/* ==========================================================================
   BUILDER GUIDANCE - "WHAT TO DO NEXT"
   ========================================================================== */
.cn-builder-guidance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    margin-top: 12px;
    font-size: 0.75rem;
    background: rgba(0, 212, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.cn-guidance-label {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.cn-guidance-action {
    color: var(--story-active);
    font-weight: 700;
}

.cn-guidance-template {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    font-style: italic;
}

.cn-builder-guidance.cn-builder-complete {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.cn-builder-guidance.cn-builder-complete .cn-guidance-action {
    color: var(--story-completed);
}

.cn-builder-guidance .cn-guidance-check {
    display: flex;
    align-items: center;
}

.cn-builder-guidance .cn-guidance-check svg {
    width: 16px;
    height: 16px;
    stroke: var(--story-completed);
}

/* ==========================================================================
   HIDE ALL OLD CONTAINER/BOXED SPINE STYLES
   Force removal of any legacy spine UI
   ========================================================================== */
#cn-main-build-mode-spine,
.cn-main-build-mode-spine-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

.cn-main-spine-header,
.cn-main-spine-title,
.cn-main-spine-content:not(#cn-main-spine-content) {
    display: none !important;
}

/* Hide all legacy card-based rail styles */
.cn-campaign-rail,
.cn-rail-track,
.cn-rail-node,
.cn-rail-line,
.cn-rail-guidance,
.cn-node-marker,
.cn-node-label,
.cn-node-date,
.cn-node-content {
    display: none !important;
}

/* Hide old timeline styles */
.cn-main-spine-timeline,
.spine-item-card,
.cn-main-spine-item {
    display: none !important;
}

/* Hide old sidebar spine styles */
.cn-build-spine-timeline,
.cn-build-spine-moment,
.spine-moment-marker {
    display: none !important;
}

/* ==========================================================================
   SIDEBAR RAIL - VERTICAL LIST
   Synced with main rail, simplified visual hierarchy
   ========================================================================== */
.cn-sidebar-rail {
    padding: 0;
}

.cn-sidebar-rail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-sidebar-rail-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rail-text-strong);
}

.cn-sidebar-rail-progress {
    font-size: 0.7rem;
    color: var(--rail-text);
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.cn-sidebar-rail-list {
    padding: 12px 0;
    max-height: 300px;
    overflow-y: auto;
}

.cn-sidebar-rail-node {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
    position: relative;
}

.cn-sidebar-rail-node:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cn-sidebar-rail-node.active {
    background: rgba(34, 197, 94, 0.08);
}

/* Vertical connecting line */
.cn-sidebar-rail-node::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 24px;
    bottom: -10px;
    width: 2px;
    background: var(--rail-line);
}

.cn-sidebar-rail-node:last-child::before {
    display: none;
}

/* Sidebar node markers */
.cn-sidebar-node-marker {
    flex-shrink: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.cn-sidebar-node-marker.large {
    width: 12px;
    height: 12px;
    background: var(--rail-primary);
    box-shadow: 0 0 8px var(--rail-primary-glow);
}

.cn-sidebar-node-marker.medium {
    width: 8px;
    height: 8px;
    margin: 2px;
    background: var(--rail-secondary);
}

/* Filled marker */
.cn-sidebar-rail-node.filled .cn-sidebar-node-marker.medium {
    background: var(--rail-primary);
    box-shadow: 0 0 6px var(--rail-primary-glow);
}

/* Active marker */
.cn-sidebar-rail-node.active .cn-sidebar-node-marker {
    box-shadow: 0 0 12px var(--rail-active-glow);
}

/* Future nodes */
.cn-sidebar-rail-node.future {
    opacity: 0.4;
}

.cn-sidebar-rail-node.future .cn-sidebar-node-marker {
    background: var(--rail-inactive);
    box-shadow: none;
}

/* Node info */
.cn-sidebar-node-info {
    flex: 1;
    min-width: 0;
}

.cn-sidebar-node-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rail-text);
    line-height: 1.3;
}

.cn-sidebar-rail-node.anchor .cn-sidebar-node-label {
    font-weight: 600;
    color: var(--rail-text-strong);
}

.cn-sidebar-rail-node.active .cn-sidebar-node-label {
    color: var(--rail-text-strong);
}

.cn-sidebar-node-content {
    font-size: 0.65rem;
    color: var(--rail-primary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-sidebar-node-date {
    font-size: 0.65rem;
    color: var(--rail-muted);
    margin-top: 2px;
}

.cn-sidebar-node-hint {
    font-size: 0.65rem;
    color: var(--rail-text);
    font-style: italic;
    margin-top: 2px;
}

/* Guidance */
.cn-sidebar-rail-guidance {
    padding: 12px 16px;
    font-size: 0.75rem;
    color: var(--rail-text);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-sidebar-guidance-label {
    color: var(--rail-primary);
    font-weight: 600;
}

.cn-sidebar-rail-complete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.75rem;
    color: var(--rail-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-sidebar-complete-icon svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   HIDE OLD CARD-BASED STYLES
   These are deprecated but kept hidden for safety
   ========================================================================== */
.cn-main-spine-timeline {
    display: none !important;
}

.spine-item-card {
    display: none !important;
}

.cn-main-spine-item {
    display: none !important;
}

/* Hide legacy sidebar styles */
.cn-build-spine-timeline {
    display: none !important;
}

.cn-build-spine-moment {
    display: none !important;
}

.spine-moment-marker {
    display: none !important;
}

/* ==========================================================================
   SUPPRESS COMPETING VISUAL ELEMENTS
   Old glow animations, lock badges, multiple highlights
   ========================================================================== */

/* Disable old glow animations - these compete with new rail system */
.cn-main-spine-item.next-slot,
.cn-build-spine-moment.next-slot {
    animation: none !important;
}

.cn-main-spine-item .marker-dot,
.cn-build-spine-moment .spine-moment-marker {
    animation: none !important;
}

/* Hide lock badges */
.spine-item-lock,
.spine-moment-lock,
.lock-badge,
.locked-badge {
    display: none !important;
}

/* Hide next badges (replaced by active state) */
.spine-item-next-badge,
.spine-moment-next-prompt {
    display: none !important;
}

/* Suppress old guidance arrow */
.cn-main-spine-guidance .guidance-arrow,
.cn-main-spine-guidance svg.arrow {
    display: none !important;
}

/* Hide old completion UI */
.cn-main-spine-complete {
    display: none !important;
}

/* Reset competing color glows to neutral */
.cn-main-spine-item.anchor .marker-dot,
.cn-build-spine-moment.anchor .spine-moment-marker {
    box-shadow: none !important;
}

/* Hide future slot visual indicators (handled by new rail) */
.cn-main-spine-item.future-slot,
.cn-build-spine-moment.future-slot {
    display: none !important;
}

/* Override old cyan/magenta glow system */
.cn-main-spine-item[data-id] .spine-item-card,
.cn-build-spine-moment[data-id] {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ==========================================================================
   NEW DEMO FLOW SYSTEM - Zordon Popups & Mode Styles
   Scripted, state-driven, scroll-aware demo guidance
   ========================================================================== */

/* Demo Dimmed Sections - Used in STUDY_MODE to focus on film strip */
.cn-demo-dimmed {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Zordon Demo Popup - Liquid glass style */
.cn-zordon-demo-popup {
    position: fixed;
    z-index: 1000000;
    max-width: 360px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}

.cn-zordon-demo-popup.active {
    opacity: 1;
    transform: translateY(0);
}

.cn-zordon-demo-card {
    background: linear-gradient(135deg, 
        rgba(15, 25, 45, 0.92) 0%,
        rgba(25, 40, 70, 0.88) 50%,
        rgba(15, 25, 45, 0.92) 100%);
    backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Gradient overlay */
.cn-zordon-demo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at 30% 0%,
        rgba(124, 58, 237, 0.15) 0%,
        transparent 50%
    );
    pointer-events: none;
    border-radius: 20px;
}

/* Zordon orbs in demo popup */
.cn-zordon-demo-orbs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.cn-zordon-demo-orbs .zordon-orb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: zordonOrbPulse 2s ease-in-out infinite;
}

.cn-zordon-demo-orbs .zordon-orb:nth-child(1) {
    background: linear-gradient(135deg, #ff6b9d, #ff4081);
    animation-delay: 0s;
}

.cn-zordon-demo-orbs .zordon-orb:nth-child(2) {
    background: linear-gradient(135deg, #00d4ff, #00b4d8);
    animation-delay: 0.3s;
}

.cn-zordon-demo-orbs .zordon-orb:nth-child(3) {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    animation-delay: 0.6s;
}

@keyframes zordonOrbPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.2); opacity: 1; }
}

.cn-zordon-demo-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px 0;
    position: relative;
}

.cn-zordon-demo-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 20px 0;
    position: relative;
}

.cn-zordon-demo-dismiss {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.cn-zordon-demo-dismiss:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

/* Demo mode body classes */
body.demo-study-mode .cn-thin-spine-track,
body.demo-study-mode .cn-thin-rail-wrapper,
body.demo-study-mode .cn-te-sidebar-spine-stack {
    opacity: 0.3;
}

body.demo-build-mode .cn-thin-spine-track,
body.demo-build-mode .cn-thin-rail-wrapper {
    opacity: 1;
}

/* ============================================================
   DEMO ENTRY STATE - Study Mode Focus
   Dims page to 45% except film strip, with first card pulse
   ============================================================ */

/* Dim overlay that covers entire page (body-level) */
.cn-demo-dim-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 199990;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cn-demo-dim-overlay.active {
    opacity: 1;
}

/* ── Inner dim overlay ─────────────────────────────────────
   Lives INSIDE .cn-hero-reveal (which is lifted to z-index 199993).
   Dims section internals; spotlighted elements get a higher
   z-index within the same stacking context so they appear lit.
   ─────────────────────────────────────────────────────────── */
.cn-demo-inner-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cn-demo-inner-dim.active {
    opacity: 1;
}

/* ── Study mode: Lift film strip above inner dim ──────────── */
/* z-index values here are WITHIN .cn-hero-reveal's stacking context */
body.cn-demo-study-focus #film-track,
body.cn-demo-study-focus .film-strip-container,
body.cn-demo-study-focus .cn-te-film-strip,
body.cn-demo-study-focus #cinema-preview-section .cn-film-strip-wrapper,
body.cn-demo-study-focus .cn-campaign-timeline-header {
    position: relative;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* Film strip pulse glow animation during study focus */
body.cn-demo-study-focus #film-track {
    animation: filmStripPulse 2s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes filmStripPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(138, 43, 226, 0.4),
            0 0 40px rgba(138, 43, 226, 0.2),
            0 0 60px rgba(138, 43, 226, 0.1);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(138, 43, 226, 0.6),
            0 0 60px rgba(138, 43, 226, 0.4),
            0 0 90px rgba(138, 43, 226, 0.2);
    }
}

body.cn-demo-study-focus #film-track .film-card {
    position: relative;
    z-index: 11;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Sidebar fully dimmed during study focus - nearly invisible */
body.cn-demo-study-focus .cn-te-main-section-sidebar,
body.cn-demo-study-focus #cn-te-main-section-sidebar {
    opacity: 0.05 !important;
    pointer-events: none !important;
}

/* Main moment card dimmed during study focus - nearly invisible */
body.cn-demo-study-focus .cn-te-main-moment-card,
body.cn-demo-study-focus .cn-moment-display-card {
    opacity: 0.08 !important;
}

/* Spine area dimmed - nearly invisible */
body.cn-demo-study-focus .cn-thin-spine-track,
body.cn-demo-study-focus .cn-thin-rail-wrapper,
body.cn-demo-study-focus .cn-te-sidebar-spine-stack {
    opacity: 0.03 !important;
}

/* Film strip cards - NO design changes, just ensure visibility */
body.cn-demo-study-focus #film-track .film-card {
    /* Preserve original design - no cropping, masking, or ratio changes */
    opacity: 1 !important;
}

/* Sidebar locked state during study focus */
.cn-te-sidebar-btn.cn-demo-locked {
    opacity: 0.2 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ============================================================
   DEMO CARD LOCKING - During onboarding, lock all cards except target
   ============================================================ */

/* Hide the film strip scrollbar when cards are locked so it doesn't clash */
#film-track:has(.cn-demo-card-locked)::-webkit-scrollbar {
    height: 0;
    display: none;
}
#film-track:has(.cn-demo-card-locked) {
    scrollbar-width: none;
}

/* Locked cards: dimmed and unclickable */
.film-card.cn-demo-card-locked {
    opacity: 0.25 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    filter: grayscale(0.6) brightness(0.5);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Target card: fully visible and clickable — z-index relative to section stacking context */
.film-card.cn-demo-card-target {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 12 !important;
}

/* Pulsing glow on the MEDIA container (the image/video box) so it matches the rounded card shape */
.film-card.cn-demo-card-target .film-card-media {
    animation: sourPromPulse 1.8s ease-in-out infinite;
    border-color: rgba(0, 255, 255, 0.6) !important;
    border-width: 2px !important;
    border-style: solid !important;
}

@keyframes sourPromPulse {
    0%, 100% {
        box-shadow: 
            0 0 8px rgba(0, 255, 255, 0.4),
            0 0 18px rgba(0, 255, 255, 0.25),
            0 0 28px rgba(0, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 12px rgba(0, 255, 255, 0.6),
            0 0 25px rgba(0, 255, 255, 0.4),
            0 0 40px rgba(0, 255, 255, 0.25),
            0 0 55px rgba(0, 255, 255, 0.1);
    }
}

/* ============================================================
   MOMENT SPOTLIGHT STATE - After first film strip click
   Dims EVERYTHING to near black EXCEPT the main center moment card
   ============================================================ */

/* Moment spotlight overlay — body-level, dims everything outside the section */
.cn-demo-moment-spotlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    z-index: 199990;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cn-demo-moment-spotlight-overlay.active {
    opacity: 1;
}

/* ── Moment spotlight: lift content above the INNER dim (z-index 5) ── */
/* These z-index values are relative to the .cn-hero-reveal stacking context */
body.cn-demo-moment-spotlight .cn-te-main-moment-card,
body.cn-demo-moment-spotlight .cn-moment-display-card,
body.cn-demo-moment-spotlight #cn-moment-card-container,
body.cn-demo-moment-spotlight .cn-te-main-section-content {
    position: relative;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* The actual moment content area - must be lit */
body.cn-demo-moment-spotlight .cn-te-main-content-area,
body.cn-demo-moment-spotlight .cn-moment-content,
body.cn-demo-moment-spotlight .cn-te-moment-container {
    position: relative;
    z-index: 10 !important;
    opacity: 1 !important;
}

/* Film strip nearly invisible during moment spotlight */
body.cn-demo-moment-spotlight #film-track,
body.cn-demo-moment-spotlight .film-strip-container,
body.cn-demo-moment-spotlight .cn-te-film-strip,
body.cn-demo-moment-spotlight .cn-campaign-timeline-header {
    opacity: 0.12 !important;
    pointer-events: none !important;
}

/* Sidebar nearly invisible during moment spotlight */
body.cn-demo-moment-spotlight .cn-te-main-section-sidebar,
body.cn-demo-moment-spotlight #cn-te-main-section-sidebar {
    opacity: 0.08 !important;
    pointer-events: none !important;
}

/* Spine area nearly invisible */
body.cn-demo-moment-spotlight .cn-thin-spine-track,
body.cn-demo-moment-spotlight .cn-thin-rail-wrapper,
body.cn-demo-moment-spotlight .cn-te-sidebar-spine-stack {
    opacity: 0.05 !important;
}

/* Navigation arrows - keep right arrow visible for pulse */
body.cn-demo-moment-spotlight #cn-fixed-prev {
    opacity: 0.15 !important;
}

body.cn-demo-moment-spotlight #cn-fixed-next {
    opacity: 0.8 !important;
    z-index: 200001 !important;
    pointer-events: auto !important;
}

/* ACT header dimmed */
body.cn-demo-moment-spotlight .cn-act-header,
body.cn-demo-moment-spotlight .cn-te-act-header {
    opacity: 0.2 !important;
}

/* Zordon popup during moment spotlight - above everything (body-level) */
body.cn-demo-moment-spotlight .cn-zordon-demo-popup {
    z-index: 200000 !important;
}

/* Moment Zordon specific positioning */
.cn-zordon-demo-popup.cn-moment-zordon {
    z-index: 200000 !important;
}

/* ============================================================
   MOMENT EXPLANATION POPUP - Liquid Glass Style
   Exact same design as "Tell Zordon who you are" section
   ============================================================ */

/* Modal container */
.cn-moment-explanation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.cn-moment-explanation-modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* Card - Frosted Glass effect matching "Set first single" modal */
.cn-moment-explanation-card {
    background: linear-gradient(
        135deg,
        rgba(20, 30, 40, 0.95) 0%,
        rgba(30, 45, 55, 0.9) 50%,
        rgba(20, 35, 45, 0.95) 100%
    );
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 35px 45px 40px;
    max-width: 480px;
    text-align: center;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 60px rgba(0, 255, 200, 0.1);
    position: relative;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-moment-explanation-modal.active .cn-moment-explanation-card {
    transform: scale(1) translateY(0);
}

/* Liquid glass shimmer */
.cn-moment-explanation-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 70%
    );
    animation: liquidFlowModal 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes liquidFlowModal {
    0%, 100% { transform: translate(0%, 0%) rotate(0deg); }
    25% { transform: translate(10%, 10%) rotate(5deg); }
    50% { transform: translate(0%, 20%) rotate(0deg); }
    75% { transform: translate(-10%, 10%) rotate(-5deg); }
}

/* Glass edge highlight */
.cn-moment-explanation-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4) 50%,
        transparent
    );
    pointer-events: none;
}

/* Zordon Orbs - EXACT same as zordon-intro.css */
.cn-moment-explanation-card .zordon-thinking-orbs {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 2;
}

.cn-moment-explanation-card .zordon-orb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00ffc8, #00d4ff, #00ffc8);
    box-shadow: 
        0 0 20px rgba(0, 255, 200, 1),
        0 0 40px rgba(0, 255, 200, 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.8);
    opacity: 1;
    filter: brightness(1.2) saturate(1.5);
    animation: zordonOrbBounce 1.5s ease-in-out infinite;
}

/* Pink orb */
.cn-moment-explanation-card .zordon-orb:nth-child(1) {
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
    box-shadow: 0 0 20px rgba(255, 0, 255, 1), 0 0 40px rgba(255, 0, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.8);
    animation-delay: 0s;
}

/* Cyan orb */
.cn-moment-explanation-card .zordon-orb:nth-child(2) {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    box-shadow: 0 0 20px rgba(0, 255, 200, 1), 0 0 40px rgba(0, 255, 200, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.8);
    animation-delay: 0.15s;
}

/* Yellow orb */
.cn-moment-explanation-card .zordon-orb:nth-child(3) {
    background: linear-gradient(135deg, #ffff00, #ffd700);
    box-shadow: 0 0 20px rgba(255, 255, 0, 1), 0 0 40px rgba(255, 255, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.8);
    animation-delay: 0.3s;
}

/* Blue orb */
.cn-moment-explanation-card .zordon-orb:nth-child(4) {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    box-shadow: 0 0 20px rgba(0, 212, 255, 1), 0 0 40px rgba(0, 212, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.8);
    animation-delay: 0.45s;
}

/* Orange orb */
.cn-moment-explanation-card .zordon-orb:nth-child(5) {
    background: linear-gradient(135deg, #ff6b00, #ff9500);
    box-shadow: 0 0 20px rgba(255, 107, 0, 1), 0 0 40px rgba(255, 107, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.8);
    animation-delay: 0.6s;
}

/* Orb bounce animation - same as zordon-intro */
@keyframes zordonOrbBounce {
    0%, 100% {
        transform: scale(0.8) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.4) translateY(-10px);
        opacity: 1;
    }
}

/* Title */
.cn-moment-explanation-title {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
}

/* Body text */
.cn-moment-explanation-body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 28px 0;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Button - same style as zordon-intro */
.cn-moment-explanation-btn {
    padding: 14px 50px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.cn-moment-explanation-btn:hover {
    background: linear-gradient(135deg, #9d74f7, #b97cf8);
    box-shadow: 0 6px 30px rgba(139, 92, 246, 0.6);
    transform: translateY(-2px);
}

/* ============================================================
   POST-INITIALIZATION SUBTLE HIGHLIGHTS
   After campaign is initialized - subtle UI cues, no popups
   ============================================================ */

/* Active sidebar slot highlight - subtle glow */
.cn-slot-active-highlight {
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.3) !important;
    border-color: rgba(0, 255, 200, 0.5) !important;
}

/* Subtle button pulse - for "Add to this slot" */
.cn-btn-subtle-pulse {
    animation: subtleBtnPulse 2s ease-in-out infinite;
}

@keyframes subtleBtnPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 200, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 200, 0.4);
    }
}

/* ============================================================
   BUTTON INTRO SEQUENCE
   Sequential button highlights after "Build My Campaign"
   ============================================================ */

/* Dim overlay */
.cn-button-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 200001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cn-button-intro-overlay.active {
    opacity: 1;
    pointer-events: none;
}

/* Sidebar raised above overlay during tour */
.cn-te-sidebar.cn-sidebar-tour-focus {
    z-index: 200002 !important;
}

/* Active upload card – bright glow during demo simulation */
.cn-action-card--release.cn-upload-active {
    border-color: rgba(57, 255, 20, 0.7) !important;
    box-shadow:
        0 0 0 3px rgba(57, 255, 20, 0.35),
        0 0 24px rgba(57, 255, 20, 0.4),
        inset 0 0 12px rgba(57, 255, 20, 0.06) !important;
    animation: uploadCardPulse 1s ease-in-out infinite;
    transform: scale(1.015);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes uploadCardPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.35), 0 0 24px rgba(57, 255, 20, 0.4); }
    50% { box-shadow: 0 0 0 5px rgba(57, 255, 20, 0.5), 0 0 40px rgba(57, 255, 20, 0.55); }
}

/* Upload complete – green check flash */
.cn-action-card--release.cn-upload-done {
    border-color: rgba(57, 255, 20, 0.4) !important;
    animation: uploadDoneFlash 0.6s ease forwards;
}

@keyframes uploadDoneFlash {
    0% { box-shadow: 0 0 40px rgba(57, 255, 20, 0.6); }
    100% { box-shadow: 0 0 0 rgba(57, 255, 20, 0); border-color: rgba(57, 255, 20, 0.15) !important; }
}

/* Artwork image reveal */
.cn-action-card-thumb.cn-artwork-reveal {
    animation: artworkReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    overflow: hidden;
    border-radius: 8px;
}

.cn-action-card-thumb.cn-artwork-reveal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

@keyframes artworkReveal {
    0% { opacity: 0; transform: scale(0.85); }
    60% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

/* Highlighted button - pops above overlay */
.cn-button-intro-highlight {
    position: relative;
    z-index: 200002 !important;
    box-shadow: 
        0 0 0 4px rgba(0, 255, 200, 0.6),
        0 0 30px rgba(0, 255, 200, 0.5),
        0 0 60px rgba(0, 255, 200, 0.3) !important;
    animation: buttonIntroGlow 1.5s ease-in-out infinite;
    filter: brightness(1.3) !important;
    opacity: 1 !important;
}

/* When the sidebar contains a highlighted element, raise the whole sidebar above the overlay */
.cn-te-sidebar:has(.cn-button-intro-highlight) {
    z-index: 200002 !important;
}

/* The highlighted element's parent card should also be visually prominent */
.cn-action-card:has(.cn-button-intro-highlight) {
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.3) !important;
    border-color: rgba(0, 255, 200, 0.4) !important;
}

@keyframes buttonIntroGlow {
    0%, 100% {
        box-shadow: 
            0 0 0 4px rgba(0, 255, 200, 0.6),
            0 0 30px rgba(0, 255, 200, 0.5),
            0 0 60px rgba(0, 255, 200, 0.3);
    }
    50% {
        box-shadow: 
            0 0 0 6px rgba(0, 255, 200, 0.8),
            0 0 50px rgba(0, 255, 200, 0.7),
            0 0 80px rgba(0, 255, 200, 0.4);
    }
}

/* Popup - Frosted glass style matching "Set first single" modal */
.cn-button-intro-popup {
    position: fixed;
    z-index: 200003;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.cn-button-intro-popup.active {
    opacity: 1;
    transform: translateY(0);
}

.cn-button-intro-card {
    background: linear-gradient(
        135deg,
        rgba(20, 30, 40, 0.95) 0%,
        rgba(30, 45, 55, 0.9) 50%,
        rgba(20, 35, 45, 0.95) 100%
    );
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
    text-align: center;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 60px rgba(0, 255, 200, 0.1);
}

/* Tour progress bar */
.cn-tour-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.cn-tour-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.cn-tour-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffc8, #00e5ff);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.cn-tour-progress-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    font-weight: 600;
}

/* Skip tour link */
.cn-tour-skip {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.cn-tour-skip:hover {
    color: rgba(255, 255, 255, 0.5);
}

/* Overlay guidance badge (Social Trail / TE) */
.cn-overlay-guide-badge {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    background: rgba(0, 0, 0, 0.92);
    border: 2px solid rgba(0, 255, 200, 0.5);
    border-radius: 24px;
    padding: 12px 28px;
    font-size: 14px;
    color: #fff;
    backdrop-filter: blur(16px);
    animation: guideBadgePulse 2s ease-in-out infinite;
    pointer-events: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 200, 0.1);
    letter-spacing: 0.3px;
}

@keyframes guideBadgePulse {
    0%, 100% { border-color: rgba(0, 255, 200, 0.5); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 200, 0.1); }
    50% { border-color: rgba(0, 255, 200, 0.8); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 255, 200, 0.25); }
}

/* =========================================
   DEMO COMPLETE STATE - Greyed Out Buttons
   ========================================= */
body.cn-demo-complete .cn-demo-disabled-btn {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    filter: grayscale(60%) !important;
}

body.cn-demo-complete .cn-demo-disabled-btn:hover {
    opacity: 0.5 !important;
    transform: none !important;
}

/* Keep Play button fully active */
body.cn-demo-complete #play-story-btn,
body.cn-demo-complete #play-campaign-btn {
    opacity: 1 !important;
    cursor: pointer !important;
    filter: none !important;
    pointer-events: auto !important;
}

/* CRITICAL: Ensure all overlays are hidden when demo is complete */
body.cn-demo-complete .cn-button-intro-overlay,
body.cn-demo-complete .cn-demo-moment-spotlight-overlay,
body.cn-demo-complete #structural-strategy-overlay,
body.cn-demo-complete .cn-conditional-te-overlay,
body.cn-demo-complete #conditional-te-overlay,
body.cn-demo-complete #cn-button-intro-overlay,
body.cn-demo-complete #cn-demo-dim-overlay,
body.cn-demo-complete #cn-demo-moment-spotlight-overlay,
body.cn-demo-complete .cn-zordon-translate-overlay,
body.cn-demo-complete #cn-zordon-translate-modal {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Targeted: Hide specific demo overlay elements when demo complete */
/* Do NOT use nuclear selectors that hide all fixed/z-index divs — that breaks normal UI */
body.cn-demo-complete #cn-zordon-translate-modal,
body.cn-demo-complete #cn-zordon-demo-popup,
body.cn-demo-complete #cn-moment-explanation-popup,
body.cn-demo-complete #cn-demo-dim-overlay,
body.cn-demo-complete #cn-demo-moment-spotlight-overlay,
body.cn-demo-complete #cn-demo-set-single-overlay,
body.cn-demo-complete #cn-set-single-modal,
body.cn-demo-complete #cn-button-intro-popup,
body.cn-demo-complete .cn-moment-explanation-modal {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure body is fully interactive */
body.cn-demo-complete {
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Social Trail is ALWAYS allowed — it's a view-only feature, not a demo action */
body.cn-demo-complete #cn-social-trail-overlay,
body.cn-demo-complete .cn-social-trail-overlay {
    /* Do NOT hide — Social Trail is always available */
    pointer-events: auto !important;
}

body.cn-demo-complete .film-card-social-trail-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    filter: none !important;
}

body.cn-demo-complete #social-trail-cta-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    filter: none !important;
}

/* Ensure main content is visible */
body.cn-demo-complete #page,
body.cn-demo-complete #main,
body.cn-demo-complete #content,
body.cn-demo-complete .site-content,
body.cn-demo-complete .cn-cinema-preview,
body.cn-demo-complete .main-content {
    opacity: 1 !important;
    filter: none !important;
}

/* =========================================
   REQUEST ACCESS POPUP (Demo Complete)
   ========================================= */
.cn-demo-completion-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cn-demo-completion-modal.active {
    opacity: 1;
}

.cn-demo-completion-card {
    background: linear-gradient(
        135deg,
        rgba(25, 40, 55, 0.98) 0%,
        rgba(35, 55, 70, 0.95) 50%,
        rgba(25, 45, 60, 0.98) 100%
    );
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 40px 50px;
    max-width: 500px;
    text-align: center;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 100px rgba(0, 255, 200, 0.08);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.cn-demo-completion-modal.active .cn-demo-completion-card {
    transform: scale(1);
}

.cn-demo-completion-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(0, 255, 150, 0.2), rgba(0, 200, 255, 0.2));
    border: 1px solid rgba(0, 255, 180, 0.4);
    color: #00ffb8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.cn-demo-completion-card h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.cn-demo-completion-card > p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.cn-demo-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px 20px;
}

.cn-demo-checklist li {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cn-demo-checklist li:last-child {
    border-bottom: none;
}

.cn-demo-cta-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 0 0 20px 0 !important;
}

.cn-request-access-btn {
    background: linear-gradient(135deg, #00c896, #00a87d);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    margin-bottom: 12px;
}

.cn-request-access-btn:hover {
    background: linear-gradient(135deg, #00d9a6, #00b88a);
    transform: translateY(-1px);
}

.cn-continue-demo-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.cn-continue-demo-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

/* =========================================
   SPINE DOT UPDATES AFTER SLOT FILL
   ========================================= */

/* Filled dot - GREEN */
.cn-te-spine-dot.filled.green,
.spine-dot.filled.green,
.cn-spine-marker.filled.green {
    background: linear-gradient(135deg, #00ff88, #00cc6a) !important;
    border-color: #00ff88 !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5) !important;
}

/* Active/Current dot - YELLOW */
.cn-te-spine-dot.active.yellow,
.cn-te-spine-dot.current.yellow,
.spine-dot.active.yellow,
.spine-dot.current.yellow,
.cn-spine-marker.active.yellow,
.cn-spine-marker.current.yellow {
    background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.5) !important;
}

/* Selection box around active dot - better sizing */
.cn-spine-selection,
.spine-box-indicator,
[class*="spine-box"] {
    border: 2px solid rgba(255, 204, 0, 0.8) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3) !important;
}

/* Moved to second position */
.cn-spine-selection.cn-moved-to-second,
.spine-box-indicator.cn-moved-to-second {
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

/* Sidebar slot states */
.cn-te-sidebar-slot.filled,
.sidebar-phase-slot.filled {
    border-color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.1) !important;
}

.cn-te-sidebar-slot.filled::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00ff88;
    font-size: 18px;
    font-weight: bold;
}

.cn-te-sidebar-slot.active.current,
.sidebar-phase-slot.active.current {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3) !important;
}

/* Zordon orbs in button intro */
.cn-button-intro-card .zordon-thinking-orbs {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0 0 16px 0;
}

.cn-button-intro-card .zordon-orb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.8);
    animation: zordonOrbBounce 1.5s ease-in-out infinite;
}

.cn-button-intro-card .zordon-orb:nth-child(1) {
    background: linear-gradient(135deg, #ff00ff, #ff6bd5);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
    animation-delay: 0s;
}

.cn-button-intro-card .zordon-orb:nth-child(2) {
    background: linear-gradient(135deg, #00ffc8, #00d4ff);
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.8);
    animation-delay: 0.15s;
}

.cn-button-intro-card .zordon-orb:nth-child(3) {
    background: linear-gradient(135deg, #ffff00, #ffd700);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.8);
    animation-delay: 0.3s;
}

.cn-button-intro-card .zordon-orb:nth-child(4) {
    background: linear-gradient(135deg, #00d4ff, #0066ff);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
    animation-delay: 0.45s;
}

.cn-button-intro-card .zordon-orb:nth-child(5) {
    background: linear-gradient(135deg, #ff6b00, #ff9500);
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.8);
    animation-delay: 0.6s;
}

.cn-button-intro-title {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #00ffc8;
    margin: 0 0 8px 0;
    letter-spacing: 0.02em;
}

.cn-button-intro-body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}

.cn-tour-next-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00ffcc, #00b4d8);
    color: #000;
    font-weight: 700;
    font-size: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cn-tour-next-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
}

.cn-tour-cta-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #e040fb, #7c4dff);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cn-tour-cta-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 24px rgba(224, 64, 251, 0.4);
}

/* ============================================================
   NAVIGATION ARROW PULSE - Encourages moment exploration
   Very prominent pulsing glow effect
   ============================================================ */

.cn-demo-pulse-arrow {
    animation: arrowPulseGlow 1s ease-in-out infinite !important;
    position: relative !important;
    z-index: 200001 !important;
}

.cn-demo-pulse-arrow::before {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 100, 200, 0.4) 0%, transparent 70%);
    animation: arrowPulseRing 1s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes arrowPulseGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 100, 200, 0.7),
            0 0 40px rgba(255, 100, 200, 0.4),
            inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
        transform: scale(1);
        filter: brightness(1.2);
    }
    50% {
        box-shadow: 
            0 0 35px rgba(255, 100, 200, 1),
            0 0 70px rgba(255, 100, 200, 0.6),
            0 0 100px rgba(255, 100, 200, 0.3),
            inset 0 0 15px rgba(255, 255, 255, 0.3) !important;
        transform: scale(1.2);
        filter: brightness(1.5);
    }
}

@keyframes arrowPulseRing {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Arrow Pulse Hint - Instruction text next to pulsing arrow */
.cn-demo-arrow-pulse-hint {
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.cn-demo-arrow-pulse-hint.active {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.cn-demo-hint-text {
    display: inline-block;
    padding: 10px 16px;
    background: linear-gradient(135deg, 
        rgba(30, 10, 45, 0.95) 0%, 
        rgba(20, 5, 35, 0.98) 100%);
    border: 1px solid rgba(255, 100, 200, 0.4);
    border-radius: 8px;
    box-shadow: 
        0 0 20px rgba(255, 100, 200, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.5);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 100, 200, 0.4);
    animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 100, 200, 0.3),
            0 4px 15px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(255, 100, 200, 0.5),
            0 4px 20px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================================
   SET FIRST SINGLE SPOTLIGHT
   ============================================================ */

body.cn-demo-set-single-spotlight .cn-te-main-moment-card,
body.cn-demo-set-single-spotlight .cn-moment-display-card,
body.cn-demo-set-single-spotlight #film-track,
body.cn-demo-set-single-spotlight .cn-te-main-section-sidebar {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

body.cn-demo-set-single-spotlight .cn-demo-spotlight-target {
    position: relative;
    z-index: 199995 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: setFirstSinglePulse 2s ease-in-out infinite;
}

/* Standalone spotlight target pulse - works WITHOUT the body dimming class
   so the green button glows even after overlays are removed */
.cn-demo-spotlight-target {
    animation: setFirstSinglePulse 2s ease-in-out infinite;
}

@keyframes setFirstSinglePulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 100, 200, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 100, 200, 0.8), 0 0 60px rgba(255, 100, 200, 0.4);
    }
}

/* Demo action button highlight - subtle glow, not flashing */
.cn-te-sidebar-btn.cn-demo-action-highlight {
    box-shadow: 
        0 0 15px rgba(0, 255, 200, 0.4),
        0 0 30px rgba(0, 255, 200, 0.2),
        inset 0 0 10px rgba(0, 255, 200, 0.1) !important;
    border-color: rgba(0, 255, 200, 0.6) !important;
    animation: subtleButtonGlow 2s ease-in-out infinite;
}

@keyframes subtleButtonGlow {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(0, 255, 200, 0.4),
            0 0 30px rgba(0, 255, 200, 0.2),
            inset 0 0 10px rgba(0, 255, 200, 0.1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(0, 255, 200, 0.5),
            0 0 40px rgba(0, 255, 200, 0.3),
            inset 0 0 15px rgba(0, 255, 200, 0.15);
    }
}

/* ============================================================
   ENHANCED ZORDON POPUP - Liquid Glass with Full Orb
   ============================================================ */

/* Override basic popup with liquid glass styling */
.cn-zordon-demo-popup .cn-zordon-demo-card.cn-liquid-glass {
    background: linear-gradient(135deg, 
        rgba(15, 20, 35, 0.95) 0%,
        rgba(20, 30, 50, 0.92) 50%,
        rgba(15, 20, 35, 0.95) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(100, 150, 200, 0.2);
    border-radius: 20px;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(100, 150, 200, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 40px rgba(100, 150, 200, 0.03);
    padding: 35px 40px;
    max-width: 420px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 5-Orb Zordon Icon - Same as "Tell Zordon who you are" */
.cn-zordon-five-orbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.cn-zordon-orb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: relative;
}

/* Individual orb colors with glow */
.cn-zordon-orb.cn-orb-pink {
    background: radial-gradient(circle at 30% 30%, #ff88cc 0%, #cc4499 50%, #993377 100%);
    box-shadow: 0 0 15px rgba(255, 100, 180, 0.6), 0 0 30px rgba(255, 100, 180, 0.3);
}

.cn-zordon-orb.cn-orb-cyan {
    background: radial-gradient(circle at 30% 30%, #88ffff 0%, #00cccc 50%, #009999 100%);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.3);
}

.cn-zordon-orb.cn-orb-yellow {
    background: radial-gradient(circle at 30% 30%, #ffee88 0%, #ddbb44 50%, #aa8833 100%);
    box-shadow: 0 0 15px rgba(255, 220, 100, 0.6), 0 0 30px rgba(255, 220, 100, 0.3);
}

.cn-zordon-orb.cn-orb-blue {
    background: radial-gradient(circle at 30% 30%, #88aaff 0%, #4477dd 50%, #3355aa 100%);
    box-shadow: 0 0 15px rgba(100, 150, 255, 0.6), 0 0 30px rgba(100, 150, 255, 0.3);
}

.cn-zordon-orb.cn-orb-orange {
    background: radial-gradient(circle at 30% 30%, #ffaa77 0%, #dd7744 50%, #aa5533 100%);
    box-shadow: 0 0 15px rgba(255, 150, 100, 0.6), 0 0 30px rgba(255, 150, 100, 0.3);
}

/* Subtle pulse animation for all orbs */
.cn-zordon-five-orbs .cn-zordon-orb {
    animation: orbPulse 3s ease-in-out infinite;
}

.cn-zordon-five-orbs .cn-zordon-orb:nth-child(1) { animation-delay: 0s; }
.cn-zordon-five-orbs .cn-zordon-orb:nth-child(2) { animation-delay: 0.2s; }
.cn-zordon-five-orbs .cn-zordon-orb:nth-child(3) { animation-delay: 0.4s; }
.cn-zordon-five-orbs .cn-zordon-orb:nth-child(4) { animation-delay: 0.6s; }
.cn-zordon-five-orbs .cn-zordon-orb:nth-child(5) { animation-delay: 0.8s; }

@keyframes orbPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* Content wrapper */
.cn-zordon-demo-popup .cn-zordon-demo-content {
    text-align: center;
}

/* Title styling */
.cn-zordon-demo-popup .cn-zordon-demo-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 14px 0;
    letter-spacing: 0.5px;
}

/* Body text */
.cn-zordon-demo-popup .cn-zordon-demo-body {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin: 0;
    white-space: pre-line;
}

/* Enhanced dismiss button */
.cn-zordon-demo-popup .cn-zordon-demo-dismiss {
    margin-top: 12px;
    padding: 14px 40px;
    background: linear-gradient(135deg, 
        rgba(120, 80, 200, 0.6) 0%, 
        rgba(100, 60, 180, 0.5) 100%);
    border: 1px solid rgba(150, 100, 220, 0.5);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.cn-zordon-demo-popup .cn-zordon-demo-dismiss:hover {
    background: linear-gradient(135deg, 
        rgba(140, 100, 220, 0.7) 0%, 
        rgba(120, 80, 200, 0.6) 100%);
    border-color: rgba(180, 140, 255, 0.6);
    box-shadow: 0 0 25px rgba(140, 100, 220, 0.4);
    transform: translateY(-2px);
}

/* Position popup above all page elements including fixed headers (99999) */
.cn-zordon-demo-popup {
    z-index: 200000 !important;
}

/* ========== Film Strip Arrow Indicator ========== */
.cn-demo-film-strip-arrow {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.cn-demo-film-strip-arrow.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cn-demo-arrow-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(135deg, 
        rgba(30, 10, 45, 0.95) 0%, 
        rgba(20, 5, 35, 0.98) 100%);
    border: 1px solid rgba(255, 50, 200, 0.4);
    border-radius: 12px;
    box-shadow: 
        0 0 30px rgba(255, 50, 200, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cn-demo-arrow-icon {
    color: #ff32c8;
    animation: cn-arrow-bounce 1s ease-in-out infinite;
}

.cn-demo-arrow-icon svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 8px rgba(255, 50, 200, 0.6));
}

.cn-demo-arrow-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(255, 50, 200, 0.5);
}

@keyframes cn-arrow-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* ============================================================
   DEMO GATING STYLES
   - Pulsing red close (X) button for Social Strategy & Translate modals
   - Gated Select & Schedule buttons
   - Post-demo interaction styles
   ============================================================ */

/* Pulsing Red Close Button - Applied to X buttons during demo onboarding */
.cn-demo-pulse-close-red {
    position: relative;
    z-index: 100;
    animation: cn-pulse-close-red 1.2s ease-in-out infinite !important;
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.6), 0 0 30px rgba(255, 50, 50, 0.3) !important;
    border: 2px solid rgba(255, 60, 60, 0.8) !important;
    border-radius: 50% !important;
    background: rgba(255, 40, 40, 0.25) !important;
    color: #ff3c3c !important;
    transition: all 0.3s ease !important;
}

.cn-demo-pulse-close-red:hover {
    background: rgba(255, 40, 40, 0.5) !important;
    box-shadow: 0 0 25px rgba(255, 50, 50, 0.8), 0 0 50px rgba(255, 50, 50, 0.5) !important;
    transform: scale(1.15) !important;
}

.cn-demo-pulse-close-red svg,
.cn-demo-pulse-close-red path {
    color: #ff3c3c !important;
    fill: #ff3c3c !important;
    stroke: #ff3c3c !important;
}

@keyframes cn-pulse-close-red {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 50, 50, 0.4), 0 0 20px rgba(255, 50, 50, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 50, 50, 0.8), 0 0 50px rgba(255, 50, 50, 0.4);
        transform: scale(1.12);
    }
}

/* Gated Select & Schedule buttons during demo */
.cn-demo-gated-btn {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    position: relative;
}

.cn-demo-gated-btn::after {
    content: '🔒';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

.cn-demo-gated-btn:hover {
    opacity: 0.6 !important;
    box-shadow: 0 0 10px rgba(255, 50, 50, 0.3) !important;
}

/* Post-demo disabled button styling */
.cn-demo-disabled-btn {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.6) !important;
    pointer-events: auto !important;
}

.cn-demo-disabled-btn:hover {
    opacity: 0.5 !important;
}

/* ============================================================
   SPINE THUMBNAIL — Film-card-style dot for filled inspo moments
   ============================================================ */

/* Override the node layout for filled nodes with media */
.cn-thin-node.filled.has-media {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    overflow: visible !important;
    z-index: 1;
    position: relative;
}

/* (Legacy spine-thumb styles removed — Your Campaign rail uses simple dots) */

/* ============================================================
   INSPO MODAL — Media Preview
   ============================================================ */

.cn-inspo-media-preview {
    position: relative;
    width: 100%;
    max-height: 180px;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cn-inspo-media-preview video,
.cn-inspo-media-preview img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.cn-inspo-media-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: rgba(0, 255, 204, 0.2);
    border: 1px solid rgba(0, 255, 204, 0.4);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #00ffcc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
}

/* ============================================================
   SIDEBAR — Inspo Note & Thumbnail for filled nodes
   ============================================================ */

.cn-sidebar-node-thumb {
    width: 100%;
    max-width: 120px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.cn-sidebar-node-thumb video,
.cn-sidebar-node-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cn-sidebar-node-note {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 4px;
    padding: 4px 6px;
    background: rgba(251, 191, 36, 0.08);
    border-left: 2px solid rgba(251, 191, 36, 0.5);
    border-radius: 0 4px 4px 0;
    font-size: 0.6rem;
    color: rgba(251, 191, 36, 0.8);
    font-style: italic;
    line-height: 1.3;
}

.cn-sidebar-node-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: rgba(251, 191, 36, 0.6);
}

.cn-sidebar-node-note span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cn-sidebar-node-source {
    font-size: 0.55rem;
    color: rgba(0, 255, 204, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Filled sidebar nodes with thumbnails get a green left border */
.cn-sidebar-rail-node.filled {
    border-left: 2px solid rgba(34, 197, 94, 0.4);
    padding-left: 8px;
}

/* Hover expand for sidebar inspo note */
.cn-sidebar-node-note:hover span {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/* ============================================================
   INSPO POPOVER — Rich hover card for filled spine nodes
   ============================================================ */

.cn-inspo-popover {
    position: absolute;
    z-index: 10000;
    width: 280px;
    background: rgba(10, 18, 35, 0.97);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 14px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow: visible;
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.cn-inspo-popover.cn-popover-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Arrow pointing down toward the node */
.cn-popover-arrow {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: rgba(10, 18, 35, 0.97);
    border-right: 1px solid rgba(56, 189, 248, 0.3);
    border-bottom: 1px solid rgba(56, 189, 248, 0.3);
    z-index: -1;
}

/* When below the node, arrow points up */
.cn-inspo-popover.cn-popover-below .cn-popover-arrow {
    bottom: auto;
    top: -7px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid rgba(56, 189, 248, 0.3);
    border-top: 1px solid rgba(56, 189, 248, 0.3);
}

/* Media preview */
.cn-popover-media {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.cn-popover-media video,
.cn-popover-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body */
.cn-popover-body {
    padding: 12px 16px 10px;
}

.cn-popover-source-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 700;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.cn-popover-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.2;
}

.cn-popover-category {
    font-size: 0.65rem;
    font-weight: 600;
    color: #00ffcc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Inspo note */
.cn-popover-note {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid rgba(251, 191, 36, 0.6);
    border-radius: 0 8px 8px 0;
    font-size: 0.75rem;
    color: rgba(251, 191, 36, 0.95);
    font-style: italic;
    line-height: 1.5;
    word-break: break-word;
}

/* Date row */
.cn-popover-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-popover-date-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cn-popover-date-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.7rem;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: border-color 0.2s;
}

.cn-popover-date-input:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.5);
}

/* color-scheme for dark date picker */
.cn-popover-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Actions */
.cn-popover-actions {
    display: flex;
    padding: 8px 16px 12px;
    gap: 8px;
}

.cn-popover-btn {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.cn-popover-remove {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.cn-popover-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.7);
}

/* Hide default tooltip on filled+media nodes — popover replaces it */
.cn-thin-node.filled.has-media .cn-node-tooltip {
    display: none !important;
}

.cn-thin-node.filled.has-media::after {
    display: none !important;
}

/* ==========================================================================
   SIDEBAR — COMPLETE REDESIGN v3
   Clean, modern, Netflix-inspired. No text overlap, no cramped layouts.
   ========================================================================== */

/* ---- Saved Campaigns Section ---- */
.cn-sidebar-saved-section {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-sidebar-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
}

.cn-sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}

.cn-sidebar-section-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.cn-sidebar-section-badge {
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(251, 191, 36, 0.8);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Saved Campaign Cards ---- */
.cn-sidebar-saved-campaigns {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 14px 6px;
}

.cn-sidebar-campaign-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Inter', -apple-system, sans-serif;
    min-width: 0;
    position: relative;
    width: 100%;
    text-align: left;
}

.cn-sidebar-campaign-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.cn-sidebar-campaign-btn.active {
    background: rgba(0, 255, 204, 0.04);
    border-color: rgba(0, 255, 204, 0.2);
    color: #fff;
}

.cn-sidebar-campaign-btn-thumb {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-sidebar-campaign-btn-initial {
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.cn-sidebar-campaign-btn-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.cn-sidebar-campaign-btn-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-sidebar-campaign-btn-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-sidebar-campaign-btn.active .cn-sidebar-campaign-btn-sub {
    color: rgba(0, 255, 204, 0.45);
}

.cn-sidebar-campaign-active-tag {
    font-size: 0.48rem;
    font-weight: 800;
    color: #00ffcc;
    background: rgba(0, 255, 204, 0.1);
    border: 1px solid rgba(0, 255, 204, 0.2);
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-left: auto;
}

/* ---- Saved Campaigns Hint ---- */
.cn-sidebar-saved-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 20px 14px;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.45;
}

.cn-sidebar-saved-hint svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.2);
}

/* ---- Explore Campaigns Section — clean button, no text field ---- */
.cn-sidebar-search-section {
    padding: 4px 14px 14px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-sidebar-explore-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-sizing: border-box;
}

.cn-sidebar-explore-btn:hover {
    background: rgba(0, 255, 204, 0.04);
    border-color: rgba(0, 255, 204, 0.2);
    color: rgba(0, 255, 204, 0.7);
}

.cn-sidebar-explore-btn:active {
    transform: scale(0.98);
}

.cn-sidebar-explore-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgba(0, 255, 204, 0.35);
    transition: color 0.25s;
}

.cn-sidebar-explore-btn:hover .cn-sidebar-explore-btn-icon {
    color: rgba(0, 255, 204, 0.7);
}

.cn-sidebar-explore-btn-text {
    flex: 1;
    text-align: left;
}

.cn-sidebar-explore-btn-shortcut {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    padding: 2px 6px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    letter-spacing: 0.02em;
    transition: opacity 0.3s;
    flex-shrink: 0;
}

/* ---- Hide old search-wrap styles if any remain ---- */
.cn-sidebar-search-section .cn-sidebar-section-hdr {
    display: none;
}

/* ====================================================================
   SEARCH OVERLAY — FULL-SCREEN NETFLIX-STYLE GRID
   ==================================================================== */
.cn-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(30px) saturate(140%);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-search-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cn-search-overlay-inner {
    width: 92%;
    max-width: 1100px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    animation: searchOverlayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cn-search-overlay.active .cn-search-overlay-inner {
    animation: searchOverlayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes searchOverlayIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cn-search-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 18px;
    flex-shrink: 0;
}

.cn-search-overlay-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    font-family: 'Inter', -apple-system, sans-serif;
}

.cn-search-overlay-title span {
    color: #00ffcc;
}

.cn-search-overlay-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.cn-search-overlay-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cn-search-overlay-close svg {
    width: 18px;
    height: 18px;
}

/* ---- Overlay Search Bar (inline in header) ---- */
.cn-search-overlay-header-left {
    flex-shrink: 0;
}

.cn-search-overlay-searchbar {
    flex: 1;
    max-width: 480px;
    position: relative;
    margin: 0 24px;
}

/* ===== WHITE PULSING SEARCH BAR — ALWAYS WHITE ===== */
.cn-search-overlay-input {
    width: 100%;
    padding: 14px 22px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #00ff88;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 14px;
    outline: none;
    font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
    letter-spacing: 0.01em;
    box-sizing: border-box;
    caret-color: #00ff88;
    animation: searchBarPulseWhite 2s ease-in-out infinite;
}

@keyframes searchBarPulseWhite {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3),
                    0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6),
                    0 0 40px rgba(255, 255, 255, 0.15),
                    0 0 0 4px rgba(255, 255, 255, 0.08);
    }
}

.cn-search-overlay-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
    font-weight: 500;
}

/* On focus: keep white, stop pulsing, green glow to match typed text */
.cn-search-overlay-input:focus {
    animation: none;
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
                0 0 40px rgba(0, 255, 136, 0.1),
                0 0 0 4px rgba(255, 255, 255, 0.1);
}

.cn-search-overlay-input:focus::placeholder {
    color: rgba(0, 0, 0, 0.25);
}

/* ---- Netflix-Style Card Grid ---- */
.cn-search-overlay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    overflow-y: auto;
    padding: 4px 4px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 204, 0.12) transparent;
}

.cn-search-overlay-grid::-webkit-scrollbar {
    width: 5px;
}

.cn-search-overlay-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 204, 0.12);
    border-radius: 3px;
}

/* ---- Grid Card — Matches trending blueprint-card ---- */
.cn-grid-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(10, 15, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    transform-origin: center center;
    animation: gridCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gridCardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cn-grid-card:hover {
    transform: scale(1.04);
    z-index: 10;
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.5),
                0 0 30px rgba(0, 255, 255, 0.12),
                0 16px 40px rgba(0, 0, 0, 0.5);
}

.cn-grid-card-active {
    border-color: rgba(0, 255, 204, 0.3);
}

.cn-grid-card-pulse {
    animation: gridPulse 0.7s ease !important;
}

@keyframes gridPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.06); box-shadow: 0 0 40px rgba(0, 255, 204, 0.4); }
    100% { transform: scale(1); }
}

/* ---- Card Media (top image/video area) ---- */
.cn-grid-card-media {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 58%; /* ~16:9 ish */
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
}

.cn-grid-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.cn-grid-card:hover .cn-grid-card-img {
    transform: scale(1.08);
}

/* ---- Video preview — ALWAYS VISIBLE like homepage trending cards ---- */
.cn-grid-card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: transform 0.5s ease;
}

/* Poster image sits behind the video, fades when video starts playing */
.cn-grid-card-poster {
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* When video is playing, fade out the poster image */
.cn-grid-card-video.playing ~ .cn-grid-card-poster {
    opacity: 0;
}

/* Cards with video — dark bg while video loads */
.cn-grid-card.has-video .cn-grid-card-media {
    background: #0a0f19;
}

/* Fallback: if video can't load, the poster img stays visible behind it */

.cn-grid-card:hover .cn-grid-card-video {
    transform: scale(1.08);
}

/* ---- Bottom gradient overlay ---- */
.cn-grid-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* ---- Play icon ---- */
.cn-grid-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 255, 255, 0.85);
    z-index: 5;
    opacity: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
}

.cn-grid-card-play svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.5));
}

.cn-grid-card:hover .cn-grid-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Hide play icon when video is playing */
.cn-grid-card-video.playing ~ .cn-grid-card-overlay ~ .cn-grid-card-play,
.cn-grid-card-video.playing ~ .cn-grid-card-play {
    opacity: 0;
}

/* ---- Badge on media ---- */
.cn-grid-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 6;
}

.cn-grid-card-badge.active-badge {
    color: #00ffcc;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(0, 255, 204, 0.4);
}

.cn-grid-card-badge.loaded-badge {
    color: rgba(251, 191, 36, 0.85);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

/* ---- CRT scanline overlay (subtle) ---- */
.cn-grid-card-media::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.15) 50%),
                linear-gradient(90deg, rgba(0,255,255,0.01), rgba(255,0,255,0.01), rgba(0,255,255,0.01));
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s;
}

.cn-grid-card:hover .cn-grid-card-media::after {
    opacity: 0.5;
}

/* ---- Card Body (text content) ---- */
.cn-grid-card-body {
    padding: 12px 14px 14px;
}

.cn-grid-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-grid-card-artist {
    font-size: 0.72rem;
    color: rgba(0, 255, 255, 0.6);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-grid-card-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.cn-grid-card:hover .cn-grid-card-desc {
    max-height: 50px;
    opacity: 1;
}

.cn-grid-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.cn-grid-card-type {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 255, 136, 0.8);
    background: rgba(0, 255, 136, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

.cn-grid-card-tag {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(0, 255, 255, 0.5);
    background: rgba(0, 255, 255, 0.06);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 10px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* ---- Loading & Empty States (inside overlay) ---- */
.cn-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    grid-column: 1 / -1;
}

.cn-search-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 255, 204, 0.15);
    border-top-color: rgba(0, 255, 204, 0.6);
    border-radius: 50%;
    animation: searchSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes searchSpin {
    to { transform: rotate(360deg); }
}

.cn-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    text-align: center;
    grid-column: 1 / -1;
}

.cn-search-empty svg {
    opacity: 0.3;
}

.cn-search-empty strong {
    color: rgba(0, 255, 204, 0.6);
}

/* ====================================================================
   MY CAMPAIGN / INSPO SECTION (unchanged structure, polished)
   ==================================================================== */

.cn-sidebar-inspo-section {
    padding: 0;
}

.cn-sidebar-inspo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
}

.cn-sidebar-inspo-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cn-sidebar-inspo-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.cn-sidebar-inspo-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: #00ffcc;
    background: rgba(0, 255, 204, 0.1);
    border-radius: 10px;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
}

/* ---- Inspo List ---- */
.cn-sidebar-inspo-list {
    padding: 6px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(80vh - 380px);
    overflow-y: auto;
}

.cn-sidebar-inspo-list::-webkit-scrollbar {
    width: 3px;
}

.cn-sidebar-inspo-list::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.12);
    border-radius: 2px;
}

/* ---- Empty State ---- */
.cn-sidebar-inspo-empty {
    padding: 28px 14px;
    text-align: center;
}

.cn-sidebar-inspo-empty p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.55;
    margin: 0;
}

.cn-sidebar-inspo-empty strong {
    color: rgba(0, 255, 204, 0.6);
}

/* ---- Inspo Item ---- */
.cn-sidebar-inspo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.cn-sidebar-inspo-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.cn-sidebar-inspo-item.active {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.1);
}

/* ---- Inspo Thumbnail ---- */
.cn-sidebar-inspo-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-sidebar-inspo-thumb video,
.cn-sidebar-inspo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cn-sidebar-inspo-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.12);
}

.cn-sidebar-inspo-thumb-placeholder svg {
    width: 16px;
    height: 16px;
}

/* ---- Inspo Info ---- */
.cn-sidebar-inspo-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.cn-sidebar-inspo-category {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.cn-sidebar-inspo-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-sidebar-inspo-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
}

.cn-sidebar-inspo-note {
    font-size: 0.65rem;
    color: rgba(251, 191, 36, 0.65);
    font-style: italic;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-sidebar-inspo-source {
    font-size: 0.5rem;
    color: rgba(34, 197, 94, 0.6);
    line-height: 1;
}

/* ---- Remove Button ---- */
.cn-sidebar-inspo-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    border: none;
    color: rgba(239, 68, 68, 0.6);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cn-sidebar-inspo-item:hover .cn-sidebar-inspo-remove {
    opacity: 1;
}

.cn-sidebar-inspo-remove:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #fff;
}

/* ---- Constrain ALL SVGs inside the sidebar ---- */
.cn-te-sidebar svg {
    max-width: 100%;
    max-height: 100%;
}

/* ---- Hide old sidebar sections that may still exist ---- */
.cn-te-sidebar > .cn-te-sidebar-section {
    display: none !important;
}

/* ---- Large Media for saved inspo items ---- */
.cn-sidebar-inspo-media {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
}

.cn-sidebar-inspo-media video,
.cn-sidebar-inspo-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.cn-sidebar-inspo-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

/* ---- Hide old viewing-banner, search-results dropdown ---- */
.cn-sidebar-viewing-banner,
.cn-sidebar-search-results:not(.cn-search-overlay-grid) {
    display: none !important;
}

/* ==========================================================================
   SPINE FLASH ANIMATION — after saving inspo
   ========================================================================== */
.cn-spine-flash {
    animation: spineFlashGlow 1.5s ease-out;
}

@keyframes spineFlashGlow {
    0% {
        box-shadow: 0 0 0 rgba(0, 255, 204, 0);
    }
    20% {
        box-shadow: 0 0 30px rgba(0, 255, 204, 0.3), 0 0 60px rgba(0, 255, 204, 0.15);
    }
    100% {
        box-shadow: 0 0 0 rgba(0, 255, 204, 0);
    }
}

/* ==========================================================================
   SOCIAL TRAIL — PER-CARD "SAVE AS INSPO" BUTTON
   ========================================================================== */

.cn-st-card-inspo-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cn-st-card-inspo-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

/* Show on card hover */
.cn-st-card:hover .cn-st-card-inspo-btn,
.cn-st-media-panel:hover .cn-st-card-inspo-btn {
    opacity: 1;
    transform: scale(1);
}

.cn-st-card-inspo-btn:hover {
    background: rgba(0, 255, 204, 0.2);
    border-color: rgba(0, 255, 204, 0.5);
    color: #00ffcc;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0, 255, 204, 0.25);
}

.cn-st-card-inspo-btn:hover svg {
    fill: rgba(0, 255, 204, 0.3);
}

/* Saved pulse animation */
.cn-st-card-inspo-btn.cn-st-card-inspo-saved {
    opacity: 1 !important;
    background: rgba(0, 255, 204, 0.25);
    border-color: #00ffcc;
    color: #00ffcc;
    transform: scale(1) !important;
    animation: inspoSavedPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-st-card-inspo-btn.cn-st-card-inspo-saved svg {
    fill: #00ffcc;
}

@keyframes inspoSavedPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Old search card styles removed — replaced by cn-grid-card and cn-search-overlay above */

/* ============================================================
   CANVA-STYLE BUILDER — One-Click Add, Drag-Drop, Progress
   ============================================================ */

/* ── Inline Onboarding Hint ── */
.cn-builder-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 0 8px;
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
}

.cn-builder-hint strong {
    color: #00ffff;
    font-weight: 600;
}

.cn-builder-hint-icon {
    flex-shrink: 0;
    color: rgba(0, 255, 255, 0.4);
    display: flex;
}

.cn-builder-hint-text {
    flex: 1;
}

.cn-builder-hint-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.25);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.cn-builder-hint-dismiss:hover {
    color: rgba(255, 255, 255, 0.6);
}

.cn-builder-hint.cn-hint-dismissed {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
}

/* ── Film Card Add Button ── */
.film-card-add-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 20, 30, 0.85);
    border: 1px solid rgba(0, 255, 255, 0.5);
    color: #00ffff;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    opacity: 0.85;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-transform: uppercase;
    font-family: inherit;
    line-height: 1;
}

.film-card:hover .film-card-add-btn {
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2);
}

.film-card-add-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    box-shadow: 0 2px 12px rgba(0, 255, 255, 0.25);
    border-color: rgba(0, 255, 255, 0.7);
}

.film-card-add-btn:active {
    transform: scale(0.95);
}

.film-card-add-btn svg {
    flex-shrink: 0;
}

/* Checkmark state after moment is added */
.film-card-add-btn.cn-added-check {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.3);
    pointer-events: none;
}

.film-card-add-btn.cn-added-check span::after {
    content: ' ✓';
}

/* ── Fly-to-sidebar Animation ── */
@keyframes cnFlyToSidebar {
    0%   { opacity: 1; transform: scale(1); }
    40%  { opacity: 0.8; transform: scale(0.6) translateX(60px); }
    100% { opacity: 0; transform: scale(0.3) translateX(160px) translateY(-10px); }
}

.film-card.cn-moment-added {
    animation: cnFlyToSidebar 0.5s ease-out forwards;
    pointer-events: none;
}

/* Pending state (waiting for TE) */
.film-card.cn-moment-pending .film-card-add-btn {
    opacity: 1;
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
    animation: cnPendingPulse 1s ease infinite;
}

@keyframes cnPendingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.3); }
    50% { box-shadow: 0 0 12px 3px rgba(168, 85, 247, 0.15); }
}

/* ── Drag-and-Drop States ── */
.film-card.cn-dragging {
    opacity: 0.45 !important;
    transform: scale(0.95) !important;
    transition: opacity 0.2s, transform 0.2s;
}

.cn-te-main-section-sidebar.cn-drop-target-active {
    outline: 2px dashed rgba(0, 255, 255, 0.25);
    outline-offset: -4px;
    transition: outline-color 0.2s, background 0.2s;
}

.cn-te-main-section-sidebar.cn-drop-hover {
    outline-color: rgba(0, 255, 255, 0.7) !important;
    background: rgba(0, 255, 255, 0.03) !important;
    box-shadow: inset 0 0 40px rgba(0, 255, 255, 0.04);
}

/* ── Study Mode Override: Keep Sidebar Visible ── */
body.cn-demo-study-focus .cn-te-main-section-sidebar,
body.cn-demo-study-focus #cn-te-main-section-sidebar {
    opacity: 0.85 !important;
    pointer-events: auto !important;
    z-index: 12 !important;
}

body.cn-demo-study-focus .cn-te-sidebar-spine-stack {
    opacity: 0.8 !important;
}

/* ── Build Progress Strip ── */
.cn-build-progress {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.cn-build-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.cn-build-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ffff, #a855f7);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.cn-build-progress-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.cn-build-progress-slots span {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.03em;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.cn-build-progress-slots span.cn-slot-complete {
    color: #00ffff;
    border-color: rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.06);
}

.cn-build-progress-hint {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
    line-height: 1.4;
}

.cn-build-progress-hint strong {
    color: #00ffff;
}

/* ── Translation Engine Demo Explanation Banner ── */
.cn-te-demo-explain-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(0, 20, 30, 0.9), rgba(10, 10, 30, 0.9));
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 12px;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 560px;
    width: calc(100% - 40px);
    z-index: 200010;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: cnBannerSlideIn 0.4s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

@keyframes cnBannerSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cn-te-demo-explain-banner svg {
    flex-shrink: 0;
}

.cn-te-demo-explain-banner p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.cn-te-demo-explain-banner strong {
    color: #00ffff;
}

.cn-te-demo-banner-dismiss {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: color 0.2s;
}

.cn-te-demo-banner-dismiss:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Empty Spine Slot Hints ── */
.spine-empty-hint {
    display: block;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 80px;
    line-height: 1.3;
}

/* ============================================================
   DISTRIBUTE TO DSPs — Button, States, Success Overlay
   ============================================================ */

.cn-distribute-section {
    padding: 10px 0 0;
    margin-bottom: 8px;
    opacity: 0.2;
    max-height: 50px;
    overflow: hidden;
    transition: all 0.5s ease;
    pointer-events: none;
}

.cn-distribute-section.cn-dist-visible {
    opacity: 0.6;
    max-height: 80px;
    pointer-events: auto;
}

.cn-distribute-section.cn-dist-expanded {
    opacity: 1;
    max-height: 200px;
    pointer-events: auto;
}

.cn-distribute-section.cn-dist-expanded .cn-distribute-btn {
    animation: cnDistPulse 2s ease infinite;
}

@keyframes cnDistPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.2); }
    50% { box-shadow: 0 0 20px 4px rgba(57, 255, 20, 0.15); }
}

.cn-distribute-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 16px;
    background: rgba(57, 255, 20, 0.04);
    border: 1.5px solid rgba(57, 255, 20, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

.cn-distribute-btn:hover {
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.3);
    transform: translateY(-1px);
}

.cn-distribute-btn svg {
    color: rgba(57, 255, 20, 0.5);
    transition: color 0.3s;
}

.cn-distribute-btn-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(57, 255, 20, 0.6);
    letter-spacing: 0.02em;
    transition: color 0.3s;
}

.cn-distribute-btn-sub {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.03em;
}

/* Warm state: >0% filled */
.cn-distribute-btn.cn-distribute-warm {
    border-color: rgba(255, 200, 50, 0.25);
    background: rgba(255, 200, 50, 0.04);
}

.cn-distribute-btn.cn-distribute-warm svg {
    color: rgba(255, 200, 50, 0.6);
}

.cn-distribute-btn.cn-distribute-warm .cn-distribute-btn-text {
    color: rgba(255, 200, 50, 0.65);
}

/* Hot state: >40% filled */
.cn-distribute-btn.cn-distribute-hot {
    border-color: rgba(255, 150, 30, 0.4);
    background: rgba(255, 150, 30, 0.06);
    animation: cnDistHotPulse 3s ease infinite;
}

.cn-distribute-btn.cn-distribute-hot svg {
    color: rgba(255, 150, 30, 0.8);
}

.cn-distribute-btn.cn-distribute-hot .cn-distribute-btn-text {
    color: rgba(255, 150, 30, 0.8);
}

@keyframes cnDistHotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 150, 30, 0.08); }
    50% { box-shadow: 0 0 16px 3px rgba(255, 150, 30, 0.06); }
}

/* Ready state: >80% filled — full green glow */
.cn-distribute-btn.cn-distribute-ready {
    border-color: rgba(57, 255, 20, 0.5);
    background: rgba(57, 255, 20, 0.08);
    animation: cnDistReadyPulse 2s ease infinite;
}

.cn-distribute-btn.cn-distribute-ready svg {
    color: #39ff14;
}

.cn-distribute-btn.cn-distribute-ready .cn-distribute-btn-text {
    color: #39ff14;
    text-shadow: 0 0 12px rgba(57, 255, 20, 0.3);
}

@keyframes cnDistReadyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.15); }
    50% { box-shadow: 0 0 28px 6px rgba(57, 255, 20, 0.12); }
}

.cn-distribute-status {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.22);
    text-align: center;
    margin: 6px 0 0;
    line-height: 1.4;
}

.cn-distribute-status strong {
    color: #39ff14;
}

/* ── Distribute Loading Sequence ── */
.cn-dist-loading {
    pointer-events: none;
    opacity: 0.9;
}

.cn-dist-spinner {
    vertical-align: middle;
    margin-right: 4px;
}

.cn-dist-progress-bar-wrap {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.cn-dist-progress-bar-inner {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #39ff14, #00ffcc);
    border-radius: 2px;
    transition: width 0.8s ease;
}

/* ── Moodboard Floating Trigger ── */
.cn-moodboard-trigger {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 200000;
    background: rgba(10, 10, 30, 0.9);
    border: 1px solid rgba(255, 193, 7, 0.25);
    color: rgba(255, 255, 255, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.cn-moodboard-trigger:hover {
    border-color: #ffd54f;
    color: #ffd54f;
    transform: scale(1.1);
}

.cn-moodboard-trigger.has-pins {
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffd54f;
}

.cn-mb-trigger-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ffd54f;
    color: #000;
    font-size: 8px;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Moodboard Overlay ── */
.cn-moodboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 300000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    overflow-y: auto;
}

.cn-moodboard-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.cn-moodboard-panel {
    width: 100%;
    max-width: 720px;
    background: #0a0a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-moodboard-overlay.active .cn-moodboard-panel {
    transform: scale(1) translateY(0);
}

.cn-mb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-mb-header-left { display: flex; flex-direction: column; gap: 2px; }

.cn-mb-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.cn-mb-count {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-mb-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cn-mb-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ── Campaign Filter Tabs ── */
.cn-mb-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cn-mb-tab {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-mb-tab:hover { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); }

.cn-mb-tab.active {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffd54f;
}

/* ── Moodboard Body ── */
.cn-mb-body {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.cn-mb-empty {
    text-align: center;
    padding: 40px 20px;
}

.cn-mb-empty p {
    margin: 10px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.5;
}

/* ── Pinterest-style Grid ── */
.cn-mb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.cn-mb-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(8px);
    animation: mbCardIn 0.35s ease forwards;
}

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

.cn-mb-card:hover {
    border-color: rgba(255, 193, 7, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cn-mb-card-media {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0a0a12;
    border-radius: 8px;
}

.cn-mb-card-media img,
.cn-mb-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cn-mb-card:hover .cn-mb-card-media img,
.cn-mb-card:hover .cn-mb-card-media video {
    transform: scale(1.05);
}

.cn-mb-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.04), rgba(168, 85, 247, 0.04));
}

.cn-mb-card-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-mb-card-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-mb-card-meta {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
}

.cn-mb-card-source {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid;
    border-radius: 3px;
    padding: 1px 5px;
    display: inline-block;
    width: fit-content;
    margin-top: 2px;
}

.cn-mb-card-actions {
    display: flex;
    gap: 4px;
    padding: 0 10px 8px;
}

.cn-mb-card-add {
    font-size: 8px;
    font-weight: 600;
    color: #39ff14;
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-mb-card-add:hover {
    background: rgba(57, 255, 20, 0.15);
    border-color: #39ff14;
}

.cn-mb-card-add.added {
    background: rgba(57, 255, 20, 0.15);
    border-color: rgba(57, 255, 20, 0.3);
    color: #39ff14;
    cursor: default;
    opacity: 0.7;
}

.cn-mb-card-remove {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    margin-left: auto;
    transition: color 0.15s ease;
}

.cn-mb-card-remove:hover {
    color: #ff5050;
}

/* ── Demo Upload Simulation Overlay ── */
.cn-demo-upload-overlay {
    position: fixed;
    inset: 0;
    z-index: 310000;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cn-demo-upload-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.cn-demo-upload-card {
    background: #0d0d1a;
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 16px;
    padding: 32px 36px;
    text-align: center;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-demo-upload-overlay.active .cn-demo-upload-card {
    transform: scale(1);
}

/* ── Distribute Success Overlay ── */
.cn-dist-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 300000;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cn-dist-success-overlay.active {
    opacity: 1;
}

.cn-dist-success-card {
    max-width: 580px;
    width: calc(100% - 40px);
    max-height: 92vh;
    overflow-y: auto;
    padding: 36px 32px;
    text-align: center;
    position: relative;
    animation: cnDistCardIn 0.6s ease 0.2s both;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.cn-dist-success-card::-webkit-scrollbar { width: 4px; }
.cn-dist-success-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

@keyframes cnDistCardIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cn-dist-success-close {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 300002;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    backdrop-filter: blur(8px);
}

.cn-dist-success-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.cn-dist-success-check {
    margin-bottom: 20px;
    animation: cnCheckPop 0.5s ease 0.5s both;
}

@keyframes cnCheckPop {
    0% { opacity: 0; transform: scale(0.5); }
    60% { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

.cn-dist-success-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.03em;
}

.cn-dist-success-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 20px;
}

/* ── Progress Summary Bar ── */
.cn-dist-progress-wrap {
    margin-bottom: 20px;
}

.cn-dist-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.cn-dist-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #39ff14, #00e5ff);
    border-radius: 3px;
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}

.cn-dist-progress-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}

/* ── Distribute Timeline ── */
.cn-dist-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
    text-align: left;
    position: relative;
    padding-left: 24px;
}

.cn-dist-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(57, 255, 20, 0.3), rgba(57, 255, 20, 0.08));
    border-radius: 1px;
}

.cn-dist-tl-release {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(57, 255, 20, 0.15);
    border-radius: 14px;
    opacity: 0;
    animation: distBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
}

@keyframes distBounceIn {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    60% { opacity: 1; transform: translateY(-4px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

.cn-dist-tl-spine-node {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #39ff14;
    border: 2px solid #0a0a1a;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
    z-index: 1;
}

.cn-dist-tl-art {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.cn-dist-tl-release-info {
    flex: 1;
    min-width: 0;
}

.cn-dist-tl-release-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.cn-dist-tl-mock-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.cn-dist-tl-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #39ff14;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.cn-dist-tl-plan-title {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
}

.cn-dist-tl-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.2);
    border-radius: 8px;
    padding: 5px 10px;
    margin-bottom: 8px;
}

.cn-dist-tl-cal-icon {
    color: #39ff14;
    flex-shrink: 0;
}

.cn-dist-tl-date-pill strong {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.cn-dist-tl-days-away {
    font-size: 10px;
    color: rgba(0, 255, 255, 0.8);
    font-weight: 600;
    background: rgba(0, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}

.cn-dist-tl-dsps {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* ── Between-singles collapsible moment strip ── */
.cn-dist-tl-between {
    margin: 4px 0;
    position: relative;
}

.cn-dist-tl-between-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255, 255, 255, 0.45);
}

.cn-dist-tl-between-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

.cn-dist-tl-between-count {
    font-size: 11px;
    font-weight: 600;
}

.cn-dist-tl-between-chevron {
    margin-left: auto;
    transition: transform 0.25s ease;
}

.cn-dist-tl-between.collapsed .cn-dist-tl-between-chevron {
    transform: rotate(-90deg);
}

.cn-dist-tl-between-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0 6px 16px;
    overflow: hidden;
    max-height: 300px;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
    opacity: 1;
}

.cn-dist-tl-between.collapsed .cn-dist-tl-between-list {
    max-height: 0;
    opacity: 0;
    padding: 0 0 0 16px;
}

.cn-dist-tl-moment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.cn-dist-tl-moment-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.cn-dist-tl-moment-dot.approved {
    background: #39ff14;
    border-color: #39ff14;
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}

.cn-dist-tl-moment-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.cn-dist-dsp-logo {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cn-dist-dsp-logo:hover {
    opacity: 1;
    transform: scale(1.15);
}

.cn-dist-dsp-logo svg {
    width: 100%;
    height: 100%;
}

.cn-dist-dsp-more-badge {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ── Campaign DNA bar in sidebar ── */
.cn-campaign-dna {
    padding: 6px 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cn-dna-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.cn-dna-seg {
    transition: width 0.5s ease;
    min-width: 2px;
}

.cn-dna-seg:first-child { border-radius: 3px 0 0 3px; }
.cn-dna-seg:last-child { border-radius: 0 3px 3px 0; }

.cn-dna-legend {
    display: flex;
    gap: 10px;
}

.cn-dna-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.cn-dna-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Undo Toast ── */
.cn-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 400000;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cn-undo-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cn-undo-toast-msg {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.cn-undo-toast-btn {
    font-size: 11px;
    font-weight: 700;
    color: #00ffcc;
    background: rgba(0, 255, 204, 0.08);
    border: 1px solid rgba(0, 255, 204, 0.25);
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-undo-toast-btn:hover {
    background: rgba(0, 255, 204, 0.15);
    border-color: #00ffcc;
}

/* ── Milestone Celebration ── */
.cn-milestone-burst {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 500000;
    text-align: center;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.cn-milestone-burst.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cn-milestone-pct {
    display: block;
    font-size: 64px;
    font-weight: 900;
    background: linear-gradient(135deg, #39ff14, #00ffcc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-shadow: none;
    animation: milestoneGlow 1.5s ease-in-out;
}

@keyframes milestoneGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

.cn-milestone-msg {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
}

/* ── What's Next Prompt ── */
.cn-whatsnext-toast {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 350000;
    background: #12122a;
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 340px;
}

.cn-whatsnext-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.cn-whatsnext-msg {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    flex: 1;
}

.cn-whatsnext-msg strong {
    color: #00ffcc;
}

.cn-whatsnext-btn {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.cn-whatsnext-go {
    color: #00ffcc;
    background: rgba(0, 255, 204, 0.08);
    border: 1px solid rgba(0, 255, 204, 0.25);
}

.cn-whatsnext-go:hover {
    background: rgba(0, 255, 204, 0.15);
    border-color: #00ffcc;
}

.cn-whatsnext-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
}

.cn-whatsnext-dismiss:hover {
    color: rgba(255, 255, 255, 0.5);
}

.cn-dist-success-singles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}

.cn-dist-success-single {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-align: left;
}

.cn-dist-success-single-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #39ff14;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.cn-dist-success-single-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-dist-success-single-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.cn-dist-success-single-date {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
}

.cn-dist-success-single-status {
    font-size: 0.65rem;
    font-weight: 700;
    color: #39ff14;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cn-dist-success-dsps {
    margin-bottom: 32px;
}

.cn-dist-success-dsps-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.25);
    margin: 0 0 10px;
}

.cn-dist-success-dsps-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.cn-dist-dsp-tag {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.cn-dist-dsp-more {
    color: rgba(57, 255, 20, 0.6);
    border-color: rgba(57, 255, 20, 0.15);
    background: rgba(57, 255, 20, 0.04);
}

.cn-dist-success-cta-wrap {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.cn-dist-success-cta-wrap.visible {
    opacity: 1;
    transform: translateY(0);
}

.cn-dist-success-cta-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0 14px;
}

.cn-dist-success-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    background: linear-gradient(135deg, #00ffff, #a855f7);
    color: #000;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.25);
    letter-spacing: -0.01em;
}

.cn-dist-success-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 255, 255, 0.4);
    color: #000;
}

/* ============================================================
   CANVA-STYLE: Template Label, Builder Timeline, Rec Cards
   ============================================================ */

/* ── Template Label Above Film Strip ── */
.cn-template-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 5% 4px;
    flex-wrap: wrap;
}

.cn-template-label-tag {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.25);
    padding: 3px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.cn-template-label-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.01em;
}

.cn-template-label-hint {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.25);
    margin-left: auto;
}

.cn-template-label-hint strong {
    color: rgba(0, 255, 255, 0.5);
}

/* ── Builder Hero Section (YOUR ROLLOUT at top of sidebar) ── */
.cn-sidebar-builder-hero {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
    margin-bottom: 8px;
}

/* ── Visual Builder Timeline ── */
.cn-builder-timeline {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
    padding-right: 4px;
}

.cn-builder-timeline::-webkit-scrollbar { width: 3px; }
.cn-builder-timeline::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.cn-builder-empty {
    text-align: center;
    padding: 20px 12px;
    color: rgba(255, 255, 255, 0.2);
}

.cn-builder-empty p {
    margin: 8px 0 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.25);
}

.cn-builder-empty-hint {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.18) !important;
    margin-top: 4px !important;
}

.cn-builder-empty-hint strong {
    color: rgba(0, 255, 255, 0.4);
}

.cn-builder-slot {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding: 3px 0;
    min-height: 32px;
}

.cn-builder-slot-line {
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: -3px;
    width: 2px;
    background: rgba(255, 255, 255, 0.06);
}

.cn-builder-slot--filled .cn-builder-slot-line {
    background: rgba(0, 255, 255, 0.15);
}

.cn-builder-slot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00ffff;
    flex-shrink: 0;
    margin-top: 4px;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
    z-index: 1;
}

.cn-builder-slot-dot--empty {
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.cn-builder-slot-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 6px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: border-color 0.2s;
    animation: cnSlotFadeIn 0.4s ease;
}

@keyframes cnSlotFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.cn-builder-slot-card:hover {
    border-color: rgba(0, 255, 255, 0.15);
}

.cn-builder-slot-cat {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #00ffff;
    opacity: 0.7;
}

.cn-builder-slot-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-builder-slot-date {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.25);
    font-family: 'Courier New', monospace;
}

.cn-builder-slot-placeholder {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.15);
    padding: 6px 10px;
    border: 1px dashed rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    flex: 1;
    text-align: center;
}

/* ── Saved Inspo / Pinned References Section ── */
.cn-sidebar-inspo-saved {
    border-top: 1px solid rgba(168, 85, 247, 0.12);
    padding: 10px 16px 8px;
    margin-bottom: 4px;
}

.cn-sidebar-inspo-saved .cn-sidebar-inspo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 0;
}

.cn-sidebar-inspo-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cn-sidebar-inspo-open-mb {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-sidebar-inspo-open-mb:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #e0b0ff;
}

.cn-sidebar-inspo-saved-section {
    border-top: 1px solid rgba(168, 85, 247, 0.12);
    padding-top: 10px;
    margin-bottom: 8px;
}

.cn-inspo-count-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
}

.cn-sidebar-inspo-toggle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
}
.cn-sidebar-inspo-toggle.expanded {
    transform: rotate(90deg);
}
.cn-sidebar-inspo-toggle svg {
    width: 8px;
    height: 8px;
}
.cn-sidebar-inspo-preview {
    display: flex;
    gap: 4px;
    padding: 4px 0 2px;
}
.cn-inspo-preview-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cn-inspo-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cn-inspo-preview-thumb span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 700;
}
.cn-inspo-preview-more {
    font-size: 8px;
    color: rgba(168, 85, 247, 0.6);
    font-weight: 700;
}

.cn-inspo-phase-group {
    margin-bottom: 8px;
}

.cn-inspo-phase-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(168, 85, 247, 0.5);
    padding: 4px 0 2px;
}

.cn-inspo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cn-inspo-item:hover {
    background: rgba(168, 85, 247, 0.06);
}

.cn-inspo-item-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-inspo-item-thumb img,
.cn-inspo-item-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-inspo-item-initial {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(168, 85, 247, 0.4);
}

.cn-inspo-item-info {
    flex: 1;
    min-width: 0;
}

.cn-inspo-item-title {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-inspo-item-meta {
    display: block;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
}

.cn-inspo-item-cat {
    font-size: 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 255, 255, 0.4);
    flex-shrink: 0;
    padding: 1px 4px;
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 3px;
}

/* ── Sidebar Recommendations ── */
.cn-sidebar-recs-section {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 10px;
    margin-bottom: 8px;
}

.cn-sidebar-recs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-sidebar-rec-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.cn-sidebar-rec-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.cn-sidebar-rec-card.cn-rec-locked {
    opacity: 0.5;
}

.cn-sidebar-rec-card.cn-rec-locked:hover {
    opacity: 0.65;
}

.cn-sidebar-rec-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-sidebar-rec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-sidebar-rec-thumb span {
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
}

.cn-sidebar-rec-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.cn-sidebar-rec-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-sidebar-rec-artist {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
}

.cn-sidebar-rec-badge {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

/* Compact saved campaigns section */
.cn-sidebar-saved-compact {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 10px;
}

.cn-sidebar-saved-compact .cn-sidebar-saved-hint {
    display: none;
}

/* ============================================================
   CANVA-STYLE: Contextual Action Strip, Social Preview, Play Overlay
   ============================================================ */

/* ── Action Strip (clean, Apple-style) ── */
.cn-action-strip {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 0 8px;
    flex-wrap: wrap;
}

.cn-action-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 26px;
    background: #00ffff;
    color: #000;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 14px rgba(0, 255, 255, 0.2);
    letter-spacing: -0.01em;
    flex-shrink: 0;
    font-family: inherit;
}

.cn-action-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.35);
}

.cn-action-primary:active {
    transform: scale(0.97);
}

.cn-action-tag--inspo {
    border-color: rgba(168, 85, 247, 0.2);
    color: rgba(168, 85, 247, 0.65);
}

.cn-action-tag--inspo:hover {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.4);
    color: #a855f7;
}

.cn-action-tag--inspo.cn-inspo-saved-flash {
    border-color: rgba(0, 255, 255, 0.5);
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
}

.cn-action-tags {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-action-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.cn-action-tag:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.cn-action-tag--translate {
    border-color: rgba(168, 85, 247, 0.25);
    color: rgba(168, 85, 247, 0.7);
}

.cn-action-tag--translate:hover {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.4);
    color: #a855f7;
}

.cn-action-tag--social {
    border-color: rgba(0, 201, 255, 0.2);
    color: rgba(0, 201, 255, 0.65);
}

.cn-action-tag--social:hover {
    background: rgba(0, 201, 255, 0.06);
    border-color: rgba(0, 201, 255, 0.35);
    color: #00c9ff;
}

.cn-action-tag--muted {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.cn-action-tag--play {
    border-color: rgba(57, 255, 20, 0.2);
    color: rgba(57, 255, 20, 0.6);
}

.cn-action-tag--play:hover {
    background: rgba(57, 255, 20, 0.06);
    border-color: rgba(57, 255, 20, 0.35);
    color: #39ff14;
}

/* Tag pulse animation for contextual appearance */
.cn-tag-pulse {
    animation: cnTagPulse 0.6s ease;
}

@keyframes cnTagPulse {
    0% { transform: scale(0.85); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Play Overlay on Scene Media — HIDDEN, audio plays on hover ── */
.cn-play-overlay {
    display: none !important;
}
.cn-play-overlay--legacy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 3;
    border-radius: inherit;
}

.scene-media-wrapper:hover .cn-play-overlay {
    opacity: 1;
}

.cn-play-overlay:hover svg {
    transform: scale(1.1);
}

.cn-play-overlay svg {
    transition: transform 0.2s ease;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

/* ── Social Trail Auto-Preview Strip ── */
.cn-social-preview {
    padding: 8px 0 0;
}

.cn-social-preview-inner {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    animation: cnSocialPreviewIn 0.4s ease;
}

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

.cn-social-preview-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0, 201, 255, 0.5);
    flex-shrink: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.cn-social-preview-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
}

.cn-social-preview-strip::-webkit-scrollbar { display: none; }

.cn-social-preview-card {
    flex-shrink: 0;
    width: 180px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-social-preview-card:hover {
    border-color: rgba(0, 201, 255, 0.3);
    background: rgba(0, 201, 255, 0.04);
    transform: translateY(-1px);
}

.cn-sp-card-media {
    width: 100%;
    height: 72px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.cn-sp-card-media img,
.cn-sp-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-sp-card-body {
    padding: 6px 8px;
}

.cn-sp-card-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-sp-card-platform {
    font-size: 0.55rem;
    text-transform: capitalize;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.cn-sp-card-verified {
    font-size: 0.5rem;
    color: #00c9ff;
}

.cn-sp-card-date {
    font-size: 0.5rem;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.25);
}

.cn-sp-card-caption {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-sp-card-engagement {
    font-size: 0.5rem;
    color: rgba(0, 255, 255, 0.45);
    margin-top: 2px;
    display: block;
}

.cn-social-preview-more {
    width: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 201, 255, 0.04);
    border: 1px dashed rgba(0, 201, 255, 0.2);
    color: rgba(0, 201, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 700;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
    font-family: inherit;
}

.cn-social-preview-more:hover {
    background: rgba(0, 201, 255, 0.08);
    border-color: rgba(0, 201, 255, 0.4);
    color: #00c9ff;
}

/* ── Compact Social Trail Preview ── */
.cn-social-preview-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(168, 85, 247, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 6px 0 0;
}

.cn-social-preview-compact:hover {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.3);
}

.cn-sp-thumbs-row {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cn-sp-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-sp-compact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cn-sp-compact-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(168, 85, 247, 0.7);
    text-transform: uppercase;
}

.cn-sp-compact-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-sp-platform-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
}

.cn-sp-platform-tag svg {
    width: 10px;
    height: 10px;
    opacity: 0.5;
}

/* ── Film Card Translate Indicator Dot ── */
.film-card-tx-dot {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    z-index: 4;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
    pointer-events: none;
}

/* ============================================================
   ROLLOUT CALENDAR VIEW
   ============================================================ */

.cn-calendar-view {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
    padding-right: 4px;
}

.cn-calendar-view::-webkit-scrollbar { width: 3px; }
.cn-calendar-view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.cn-cal-date-group {
    margin-bottom: 2px;
}

.cn-cal-date-group--release {
    background: rgba(57, 255, 20, 0.02);
    border-radius: 8px;
    padding: 2px 0;
}

.cn-cal-date-header {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 8px 10px 4px;
    position: sticky;
    top: 0;
    background: rgba(15, 18, 25, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cn-cal-date-group--release .cn-cal-date-header {
    color: #39ff14;
}

.cn-cal-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    transition: background 0.2s;
    border-radius: 6px;
    margin: 1px 4px;
    animation: cnCalEntryIn 0.35s ease;
}

@keyframes cnCalEntryIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

.cn-cal-entry:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cn-cal-entry-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.3);
}

.cn-cal-entry--release .cn-cal-entry-icon {
    color: #39ff14;
}

.cn-cal-entry-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-cal-entry-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-cal-entry--release .cn-cal-entry-title {
    color: #39ff14;
    font-weight: 700;
    font-size: 0.72rem;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
}

.cn-cal-entry-desc {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.3;
}

.cn-cal-entry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cn-cal-platform-tag {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
}

.cn-cal-platform--instagram {
    color: #e1306c;
    border-color: rgba(225, 48, 108, 0.2);
    background: rgba(225, 48, 108, 0.06);
}

.cn-cal-platform--tiktok {
    color: #00f2ea;
    border-color: rgba(0, 242, 234, 0.2);
    background: rgba(0, 242, 234, 0.06);
}

.cn-cal-platform--twitter {
    color: #1da1f2;
    border-color: rgba(29, 161, 242, 0.2);
    background: rgba(29, 161, 242, 0.06);
}

.cn-cal-platform--youtube {
    color: #ff0000;
    border-color: rgba(255, 0, 0, 0.2);
    background: rgba(255, 0, 0, 0.06);
}

.cn-cal-source {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.15);
    font-style: italic;
}

/* ── Add to Timeline Modal Enhancements ── */
/* ── Compact modal variant ── */
.cn-inspo-modal--compact {
    max-width: 420px !important;
}

.cn-inspo-header--compact .cn-inspo-header-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cn-inspo-header--compact .cn-inspo-media-preview {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.cn-inspo-header--compact .cn-inspo-media-preview img,
.cn-inspo-header--compact .cn-inspo-media-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-inspo-header--compact .cn-inspo-header-info {
    flex: 1;
    min-width: 0;
}

.cn-inspo-header--compact .cn-inspo-title {
    font-size: 0.95rem;
    margin: 0 0 2px;
}

.cn-inspo-header--compact .cn-inspo-category {
    font-size: 0.65rem;
}

.cn-inspo-note-compact {
    font-size: 0.75rem;
    padding: 6px 10px;
    margin-bottom: 8px;
    resize: none;
}

/* ── Calendar phase labels ── */
.cn-cal-phase-label {
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(168, 85, 247, 0.5);
    padding: 10px 10px 3px;
    border-top: 1px solid rgba(168, 85, 247, 0.1);
    margin-top: 4px;
}

.cn-inspo-action-suggestion {
    padding: 10px 14px;
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 8px;
    margin-bottom: 12px;
}

.cn-inspo-action-label {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #00ffff;
    opacity: 0.6;
    display: block;
    margin-bottom: 4px;
}

.cn-inspo-action-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.4;
}

.cn-inspo-tx-section {
    margin: 12px 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-inspo-tx-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(168, 85, 247, 0.6);
    margin: 0 0 8px;
}

/* ── Rich translation cards (from TE backend) ── */
.cn-inspo-tx-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.cn-inspo-tx-card {
    display: flex;
    flex-direction: column;
    background: rgba(168, 85, 247, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    padding: 0;
    font-family: inherit;
}

.cn-inspo-tx-card:hover {
    border-color: rgba(168, 85, 247, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.1);
}

.cn-inspo-tx-card.cn-tx-selected {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    box-shadow: 0 0 0 1px #a855f7;
}

.cn-inspo-tx-card-media {
    width: 100%;
    height: 70px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.cn-inspo-tx-card-media img,
.cn-inspo-tx-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-inspo-tx-card-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cn-inspo-tx-card-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-inspo-tx-card-budget {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(168, 85, 247, 0.6);
    letter-spacing: 0.03em;
}

/* ── Text-only translation options (fallback) ── */
.cn-inspo-tx-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.cn-inspo-tx-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: rgba(168, 85, 247, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1.3;
}

.cn-inspo-tx-option:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.cn-inspo-tx-option.cn-tx-selected {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.4);
    color: #a855f7;
}

.cn-inspo-tx-open-full {
    display: block;
    width: 100%;
    text-align: center;
    padding: 6px 12px;
    background: none;
    border: 1px dashed rgba(168, 85, 247, 0.2);
    border-radius: 8px;
    color: rgba(168, 85, 247, 0.6);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.cn-inspo-tx-open-full:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.5);
    color: #a855f7;
    transform: translateY(-1px);
}

/* Glowing Translation Engine button */
.cn-te-btn-glow {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(0, 255, 255, 0.05)) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.3) !important;
    color: #a855f7 !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    animation: cnTEBtnGlow 2.5s ease infinite;
    transition: all 0.3s ease;
}

.cn-te-btn-glow:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(0, 255, 255, 0.08)) !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.2) !important;
    transform: translateY(-1px);
}

@keyframes cnTEBtnGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.1); }
    50% { box-shadow: 0 0 16px 3px rgba(168, 85, 247, 0.12); }
}

.cn-inspo-progress {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-inspo-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.cn-inspo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #a855f7);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.cn-inspo-progress-text {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Moment entry (filled by user) ── */
.cn-cal-entry--moment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    margin: 1px 4px;
    animation: cnCalEntryIn 0.35s ease;
    transition: background 0.2s;
}

.cn-cal-entry--moment:hover {
    background: rgba(0, 255, 255, 0.03);
}

/* ── Empty slot ghost entry ── */
.cn-cal-entry--empty {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    margin: 1px 4px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.01);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-cal-entry--empty:hover {
    border-color: rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.02);
}

.cn-cal-empty-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    margin-top: 2px;
}

.cn-cal-empty-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

.cn-cal-req-tag {
    font-size: 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
}

.cn-cal-req-tag--req {
    color: rgba(0, 255, 255, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.15);
}

.cn-cal-req-tag--opt {
    color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-cal-empty-hint {
    display: block;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.18);
    line-height: 1.3;
}

.cn-cal-empty-ref {
    display: block;
    font-size: 0.5rem;
    color: rgba(168, 85, 247, 0.35);
    font-style: italic;
}

.cn-cal-summary {
    text-align: center;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.2);
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 6px;
}

/* ── Slot Picker Overlay ── */
.cn-slot-picker {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cn-slot-picker.active {
    opacity: 1;
}

.cn-sp-card {
    background: rgba(12, 16, 22, 0.95);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.05);
}

.cn-sp-header {
    margin-bottom: 14px;
}

.cn-sp-title {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.cn-sp-moment-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.cn-sp-tx-note {
    font-size: 0.6rem;
    color: rgba(168, 85, 247, 0.7);
    padding: 6px 10px;
    background: rgba(168, 85, 247, 0.06);
    border-radius: 6px;
    margin-bottom: 12px;
    border-left: 2px solid rgba(168, 85, 247, 0.3);
}

.cn-sp-phase {
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(0, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cn-sp-phase:first-child {
    border-top: none;
    padding-top: 0;
}

.cn-sp-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-sp-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.cn-sp-slot:hover {
    background: rgba(0, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.25);
    border-style: solid;
}

.cn-sp-slot--req {
    border-left: 2px solid rgba(0, 255, 255, 0.2);
}

.cn-sp-slot--opt {
    border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.cn-sp-slot-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.cn-sp-slot-meta {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
}

.cn-sp-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.cn-sp-close:hover {
    color: #fff;
}

/* ── Phase Picker (moments list inside slot picker) ── */
.cn-pp-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 45vh;
    overflow-y: auto;
}

.cn-pp-event {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.cn-pp-event:hover {
    background: rgba(0, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.2);
}

.cn-pp-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
}

.cn-pp-thumb--empty {
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.cn-pp-event-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cn-pp-event-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-pp-event-cat {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Date picker upload context ── */
.cn-setup-upload-context {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 16px;
}

.cn-setup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.cn-setup-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.cn-setup-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cn-setup-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(0, 255, 255, 0.6);
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.12);
    padding: 3px 8px;
    border-radius: 6px;
}

.cn-setup-note {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.4;
    margin: 0;
}

/* ── Sidebar calendar thumbnails ── */
.cn-cal-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-cal-thumb img,
.cn-cal-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cn-cal-tx-badge {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffb400;
    background: rgba(255, 180, 0, 0.1);
    border: 1px solid rgba(255, 180, 0, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
}

.cn-cal-entry-note {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.2);
    font-style: italic;
    display: block;
    margin-top: 1px;
    line-height: 1.3;
}

/* Legacy action entry */
.cn-cal-entry--action {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    margin: 1px 4px;
    animation: cnCalEntryIn 0.35s ease;
    transition: background 0.2s;
}

.cn-cal-entry--action:hover {
    background: rgba(0, 255, 255, 0.03);
}

.cn-cal-entry-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ffff;
    flex-shrink: 0;
    margin-top: 4px;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
}

.cn-cal-cat-tag {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #00ffff;
    opacity: 0.7;
    margin-bottom: 2px;
}

/* ── Inspired By attribution ── */
.cn-cal-inspired {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
}

.cn-cal-adapted {
    font-size: 0.6rem;
    color: rgba(0, 255, 255, 0.45);
    margin-top: 3px;
    line-height: 1.3;
    display: block;
}

.cn-cal-adapted strong {
    color: rgba(0, 255, 255, 0.7);
    font-weight: 600;
}

.cn-cal-slot-label {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1px;
}

/* ── Distribute Success: Assets Section ── */
.cn-dist-success-assets {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.cn-dist-success-assets-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0 10px;
}

.cn-dist-success-assets-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cn-dist-asset-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
}

.cn-dist-success-assets-note {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.5;
    margin: 0;
}

.cn-dist-success-assets-note strong {
    color: rgba(255, 255, 255, 0.5);
}

/* ── Distribute: Section Labels ── */
.cn-dist-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0 10px;
}

/* ── Distribute: Singles Rows ── */
.cn-dist-single-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 6px;
}

.cn-dist-single-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #39ff14;
    flex-shrink: 0;
}

.cn-dist-single-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-dist-single-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.cn-dist-single-release {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
}

.cn-dist-single-release strong {
    color: rgba(255, 255, 255, 0.6);
}

.cn-dist-single-badge {
    font-size: 0.58rem;
    font-weight: 700;
    color: #39ff14;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.2);
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ── Distribute: Rollout Plan Section ── */
.cn-dist-rollout-section {
    margin-bottom: 20px;
}

.cn-dist-rollout-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.cn-dist-rollout-list::-webkit-scrollbar { width: 3px; }
.cn-dist-rollout-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.cn-dist-rollout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 0.7rem;
}

.cn-dist-rollout-date {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    min-width: 45px;
    font-family: 'Courier New', monospace;
}

.cn-dist-rollout-cat {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #00ffff;
    opacity: 0.6;
    min-width: 60px;
}

.cn-dist-rollout-name {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   CONTEXTUAL FIRST-TIME TOOLTIPS
   ========================================================================== */
.cn-ctx-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 15, 30, 0.95);
    border: 1px solid rgba(0, 255, 255, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    z-index: 9999;
    white-space: nowrap;
    pointer-events: auto;
    animation: cnTipIn 0.35s ease both;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-ctx-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 255, 255, 0.35);
}

@keyframes cnTipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cn-ctx-tooltip-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    line-height: 1.4;
}

.cn-ctx-tooltip-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

.cn-ctx-tooltip-close:hover {
    color: #fff;
}

.cn-ctx-tooltip--te {
    border-color: rgba(255, 180, 0, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 180, 0, 0.08);
}

.cn-ctx-tooltip--te::after {
    border-top-color: rgba(255, 180, 0, 0.4);
}

.cn-ctx-tooltip--social {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.08);
}

/* ==========================================================================
   BRIDGE NOTE — contextual hint below action strip
   ========================================================================== */
.cn-bridge-note {
    padding: 8px 16px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(0, 255, 255, 0.2);
    margin: 8px 16px 0;
    border-radius: 0 6px 6px 0;
    animation: cnBridgeFade 0.4s ease both;
}

.cn-bridge-note strong {
    color: #00ffff;
    font-weight: 600;
}

@keyframes cnBridgeFade {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   PHASE PICKER — compact visual slot chooser
   ========================================================================== */
.cn-phase-pick {
    position: fixed;
    inset: 0;
    z-index: 200000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cn-phase-pick.active { opacity: 1; }

.cn-pp-card {
    background: rgba(12, 14, 28, 0.97);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 16px;
    padding: 28px 28px 20px;
    max-width: 380px;
    width: 90%;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 255, 255, 0.05);
    transform: scale(0.96) translateY(8px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-phase-pick.active .cn-pp-card {
    transform: scale(1) translateY(0);
}

.cn-pp-hdr { margin-bottom: 16px; }

.cn-pp-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.cn-pp-moment {
    display: block;
    font-size: 12px;
    color: rgba(0, 255, 255, 0.6);
    font-weight: 500;
}

.cn-pp-tx {
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(255, 180, 0, 0.08);
    border: 1px solid rgba(255, 180, 0, 0.2);
    border-radius: 8px;
    font-size: 11px;
    color: rgba(255, 200, 50, 0.8);
    line-height: 1.4;
}

.cn-pp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.cn-pp-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    color: #fff;
}

.cn-pp-slot:hover {
    background: rgba(0, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.25);
    transform: translateX(3px);
}

.cn-pp-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cn-pp-info {
    flex: 1;
    min-width: 0;
}

.cn-pp-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.cn-pp-hint {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
    margin-top: 1px;
}

.cn-pp-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

.cn-pp-badge--key {
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cn-pp-badge--bonus {
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-pp-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.cn-pp-close:hover { color: #fff; }

/* Flash animation for spine dot and sidebar entry */
.cn-dot-flash {
    animation: cnDotFlash 1.5s ease both !important;
}

@keyframes cnDotFlash {
    0%, 100% { box-shadow: none; }
    25% { box-shadow: 0 0 12px #00ffff, 0 0 24px #00ffff; transform: scale(1.8); }
    50% { box-shadow: 0 0 6px #00ffff; transform: scale(1.4); }
    75% { box-shadow: 0 0 12px #00ffff; transform: scale(1.6); }
}

.cn-cal-flash {
    animation: cnCalFlash 1.5s ease both;
}

@keyframes cnCalFlash {
    0%, 100% { background: transparent; }
    25% { background: rgba(0, 255, 255, 0.12); }
    50% { background: rgba(0, 255, 255, 0.04); }
    75% { background: rgba(0, 255, 255, 0.08); }
}

/* Spine ↔ Sidebar cross-highlight on hover */
.cn-cal-hover {
    background: rgba(0, 255, 255, 0.06) !important;
    border-color: rgba(0, 255, 255, 0.2) !important;
    transition: all 0.15s ease;
}

.cn-dot-hover {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
    transform: scale(1.5) !important;
    transition: all 0.15s ease !important;
}

/* ==========================================================================
   DEMO GUIDE OVERLAY (Step 2 of 3-step onboarding)
   ========================================================================== */
.cn-demo-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cn-demo-guide-overlay.active {
    opacity: 1;
}

.cn-demo-guide-card {
    background: rgba(12, 14, 28, 0.97);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 40px 44px;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 255, 255, 0.06);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-demo-guide-overlay.active .cn-demo-guide-card {
    transform: scale(1) translateY(0);
}

.cn-demo-guide-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 28px;
    text-align: center;
    letter-spacing: -0.3px;
}

.cn-demo-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.cn-demo-guide-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.cn-demo-guide-num {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.12);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #00ffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-demo-guide-step div {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.cn-demo-guide-step strong {
    color: #fff;
    font-weight: 600;
}

.cn-demo-guide-go {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #00ffff, #00cccc);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.2px;
    transition: all 0.2s ease;
}

.cn-demo-guide-go:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.25);
}

/* ============================================================
   GOALS MODAL — thin overlay, panel CSS comes from zordon-intro.css
   ============================================================ */
.cn-goals-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cn-goals-modal-overlay.active {
    opacity: 1;
}

.cn-goals-modal-card {
    background: rgba(12, 14, 28, 0.97);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 22px;
    padding: 36px 40px 32px;
    max-width: 520px;
    width: 92%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 255, 255, 0.06);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-goals-modal-overlay.active .cn-goals-modal-card {
    transform: scale(1) translateY(0);
}

.cn-goals-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.cn-goals-modal-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 12px 0 8px;
    letter-spacing: -0.3px;
}

.cn-goals-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: 0;
}

.cn-goals-sub strong {
    color: #00ffff;
}

.cn-goals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.cn-goal-option {
    display: block;
    cursor: pointer;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    padding: 0;
}

.cn-goal-option input[type="radio"] {
    display: none;
}

.cn-goal-option-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
}

.cn-goal-option:hover {
    border-color: rgba(0, 255, 255, 0.25);
    background: rgba(0, 255, 255, 0.04);
}

.cn-goal-option.selected {
    border-color: rgba(0, 255, 255, 0.5);
    background: rgba(0, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.06);
}

.cn-goal-check {
    width: 22px;
    min-width: 22px;
    height: 22px;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.2s ease;
}

.cn-goal-option.selected .cn-goal-check {
    color: #00ffff;
}

.cn-goal-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cn-goal-text strong {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.cn-goal-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.cn-goal-stats {
    font-size: 11px;
    color: rgba(0, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-top: 2px;
}

.cn-goals-confirm {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #00ffff, #00cccc);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.2px;
    transition: all 0.2s ease;
}

.cn-goals-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.25);
}

/* ============================================================
   PHASE-BASED SIDEBAR  
   ============================================================ */
.cn-phase-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-phase-goal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.25);
    font-size: 11px;
    font-weight: 600;
    color: #00ffff;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.cn-phase-goal-badge svg {
    width: 12px;
    height: 12px;
}

.cn-phase-group {
    margin: 0 0 12px 0;
    padding: 0;
}

.cn-phase-group-count {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.cn-phase-slot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 16px;
    transition: background 0.15s ease;
    cursor: default;
    min-height: 42px;
}

.cn-phase-slot:hover {
    background: rgba(255, 255, 255, 0.02);
}

.cn-phase-slot-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    margin-top: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    transition: all 0.3s ease;
}

.cn-phase-slot--filled .cn-phase-slot-dot {
    background: #00ffff;
    border-color: #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.cn-phase-slot--release .cn-phase-slot-dot {
    background: #39ff14;
    border-color: #39ff14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

.cn-phase-slot-content {
    flex: 1;
    min-width: 0;
}

.cn-phase-slot-title {
    display: block;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-phase-slot--empty .cn-phase-slot-title {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    font-weight: 400;
}

.cn-phase-slot-meta {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
    line-height: 1.3;
}

.cn-phase-slot-date {
    font-size: 11px;
    color: rgba(0, 255, 255, 0.5);
    font-weight: 500;
}

.cn-phase-slot-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.cn-phase-slot-tag--key {
    background: rgba(0, 255, 255, 0.15);
    color: #00ffff;
}

.cn-phase-slot-tag--adapted {
    background: rgba(255, 180, 0, 0.15);
    color: #ffb400;
}

.cn-phase-distribute-section {
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    background: rgba(10, 12, 20, 0.98);
    border-radius: 0 0 16px 16px;
}

.cn-phase-distribute-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: 2px solid rgba(57, 255, 20, 0.3);
    border-radius: 14px;
    background: rgba(57, 255, 20, 0.06);
    color: rgba(57, 255, 20, 0.5);
    font-size: 15px;
    font-weight: 700;
    cursor: not-allowed;
    transition: all 0.4s ease;
    letter-spacing: -0.2px;
    position: relative;
    overflow: hidden;
}

.cn-phase-distribute-btn.ready {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.15), rgba(0, 255, 255, 0.1));
    border-color: #39ff14;
    color: #39ff14;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.15);
    animation: distributeGlow 2s ease-in-out infinite;
}

@keyframes distributeGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(57, 255, 20, 0.1); }
    50% { box-shadow: 0 0 40px rgba(57, 255, 20, 0.25); }
}

.cn-phase-distribute-btn svg {
    width: 20px;
    height: 20px;
}

.cn-phase-distribute-sub {
    display: block;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 8px;
}

.cn-phase-progress-ring {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px 12px;
}

.cn-phase-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.cn-phase-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #39ff14);
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s ease;
}

.cn-phase-progress-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   UPLOAD CHECKLIST — inside single release slots
   ============================================================ */
.cn-upload-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 6px;
}

.cn-upload-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-upload-item:hover {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff;
    border-style: solid;
}

.cn-upload-item.uploading {
    pointer-events: none;
    color: rgba(0, 255, 255, 0.7);
    border-color: rgba(0, 255, 255, 0.3);
    border-style: solid;
    min-width: 90px;
}

.cn-upload-progress {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.cn-upload-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ffff, #39ff14);
    border-radius: 2px;
    transition: width 0.15s linear;
}

.cn-upload-item.done {
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.2);
    color: #39ff14;
    cursor: default;
    border-style: solid;
}

.cn-upload-icon {
    font-size: 11px;
}

.cn-upload-toggle {
    display: flex;
    align-items: center;
}

.cn-toggle-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

.cn-toggle-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    accent-color: #00ffff;
}

/* ============================================================
   EDITABLE DATES
   ============================================================ */
.cn-editable-date {
    cursor: pointer;
    transition: color 0.15s ease;
}

.cn-editable-date:hover {
    color: #00ffff !important;
}

.cn-editable-date svg {
    opacity: 0;
    transition: opacity 0.15s ease;
    vertical-align: middle;
}

.cn-editable-date:hover svg {
    opacity: 0.7;
}

.cn-inline-date-editor {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.cn-date-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    outline: none;
    color-scheme: dark;
}

.cn-date-save, .cn-date-cancel {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-date-save:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
    color: #00ffff;
}

.cn-date-cancel:hover {
    background: rgba(255, 80, 80, 0.1);
    border-color: #ff5050;
    color: #ff5050;
}

/* ============================================================
   PHASE COMPLETION ANIMATIONS
   ============================================================ */
.cn-phase-group-label.complete {
    color: #39ff14;
}

.cn-phase-group-label.complete::after {
    content: '\u2713';
    margin-left: 6px;
    font-size: 10px;
    animation: phaseCheckIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes phaseCheckIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.cn-phase-slot-dot {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-phase-slot--filled .cn-phase-slot-dot {
    animation: dotFillPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dotFillPop {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ============================================================
   GOAL-DRIVEN PHASE TIPS
   ============================================================ */
.cn-phase-tip {
    display: block;
    font-size: 10px;
    color: rgba(0, 255, 255, 0.4);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
}

/* ============================================================
   BUILT WITH — Template Attribution on Distribute Screen
   ============================================================ */
.cn-dist-built-with {
    margin: 16px 0;
    padding: 14px 16px;
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 12px;
}

.cn-dist-built-with-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.cn-dist-template-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-dist-template-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    min-width: 100px;
}

.cn-dist-template-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.cn-dist-template-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #00cccc);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.cn-dist-template-pct {
    font-size: 14px;
    font-weight: 700;
    color: #00ffff;
    min-width: 40px;
    text-align: right;
}

.cn-dist-upload-summary {
    text-align: center;
    margin: 10px 0 16px;
}

.cn-dist-upload-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 180, 0, 0.1);
    border: 1px solid rgba(255, 180, 0, 0.3);
    color: #ffb400;
}

.cn-dist-upload-badge.all-ready {
    background: rgba(57, 255, 20, 0.1);
    border-color: rgba(57, 255, 20, 0.3);
    color: #39ff14;
}

/* ============================================================
   PLAN HEADER — "Your Rollout Plan"
   ============================================================ */
.cn-plan-header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    border-radius: 16px 16px 0 0;
    background: rgba(10, 12, 20, 0.98);
}

.cn-plan-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.cn-plan-subtitle {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
    margin-top: 4px;
}

/* ============================================================
   ACTION CARDS — The core sidebar items
   ============================================================ */
.cn-action-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    transition: all 0.3s ease;
    position: relative;
}

.cn-action-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.15);
}

.cn-action-card--highlighted {
    background: rgba(0, 255, 255, 0.08) !important;
    border-color: rgba(0, 255, 255, 0.35) !important;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.1);
    animation: cardHighlight 0.4s ease;
}

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

.cn-action-card--customized {
    border-left: 2px solid #00ffff;
}

.cn-action-card--release {
    background: rgba(57, 255, 20, 0.04);
    border-color: rgba(57, 255, 20, 0.15);
    padding: 10px 12px;
}

.cn-action-card-release-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #39ff14;
}

.cn-action-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.cn-action-card-date {
    font-size: 11px;
    font-weight: 600;
    color: #00ffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.cn-action-card-date:hover {
    color: #fff;
}

.cn-action-card-platform {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 500;
}

.cn-action-card-action {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 4px;
}

.cn-action-card-detail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    margin-bottom: 5px;
    display: none;
}

.cn-action-card-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cn-action-card:hover .cn-action-card-controls {
    opacity: 1;
}

.cn-action-swap-btn,
.cn-action-remove-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s ease;
}

.cn-action-swap-btn:hover {
    border-color: #00ffff;
    color: #00ffff;
    background: rgba(0, 255, 255, 0.06);
}

.cn-action-remove-btn:hover {
    border-color: #ff4466;
    color: #ff4466;
    background: rgba(255, 68, 102, 0.06);
}

/* ============================================================
   PHASE GROUP HEADERS — now styled via inline vars + later block
   ============================================================ */

/* ============================================================
   SWAP PICKER MODAL
   ============================================================ */
.cn-swap-pick {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cn-swap-pick.active {
    opacity: 1;
    pointer-events: auto;
}

.cn-swap-card {
    background: #1a1a2e;
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    position: relative;
    animation: swapSlideUp 0.3s ease;
}

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

.cn-swap-header {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.cn-swap-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.cn-swap-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.cn-swap-option {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.cn-swap-option:hover {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

.cn-swap-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    cursor: pointer;
}

.cn-swap-close:hover {
    color: #fff;
}

/* ============================================================
   "IN YOUR PLAN" BUTTON STATE
   ============================================================ */
.cn-te-btn-in-plan {
    background: rgba(0, 255, 255, 0.08) !important;
    border-color: rgba(0, 255, 255, 0.3) !important;
    color: #00ffff !important;
}

.cn-te-btn-in-plan:hover {
    background: rgba(0, 255, 255, 0.15) !important;
}

/* ============================================================
   UPLOAD CHECKLIST (on release cards)
   ============================================================ */
.cn-action-card--release .cn-upload-checklist {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.cn-action-card--release .cn-upload-item {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s ease;
}

.cn-action-card--release .cn-upload-item:hover {
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

.cn-action-card--release .cn-upload-item.done {
    color: #39ff14;
    border-color: rgba(57, 255, 20, 0.2);
    background: rgba(57, 255, 20, 0.06);
    cursor: default;
}

.cn-action-card--release .cn-upload-icon {
    font-size: 11px;
}

/* ============================================================
   ACTION CARD — THUMBNAIL IMAGES
   ============================================================ */
.cn-action-card-body {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.cn-action-card-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.cn-action-card-thumb:hover {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
    transform: scale(1.05);
}

.cn-action-card-thumb img,
.cn-action-card-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cn-action-card-content {
    flex: 1;
    min-width: 0;
}

.cn-action-card-source {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.cn-inspo-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

/* ============================================================
   CASCADE ANIMATION — cards slide in sequentially
   ============================================================ */
@keyframes cardCascadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cn-action-card--cascade {
    opacity: 0;
    animation: cardCascadeIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================================
   SPINE DOTS — keep visible, hide builder tiles only
   ============================================================ */
.cn-builder-tiles {
    display: none !important;
}

.cn-node-tooltip {
    display: none !important;
}

/* ============================================================
   TRANSLATION ENGINE — SWAP BANNER
   ============================================================ */
.cn-te-swap-banner {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    animation: swapBannerPulse 2s ease-in-out infinite;
}

.cn-te-swap-banner strong {
    color: #00ffff;
}

.cn-te-swap-banner-icon {
    display: flex;
    align-items: center;
}

@keyframes swapBannerPulse {
    0%, 100% { border-color: rgba(0, 255, 255, 0.2); }
    50% { border-color: rgba(0, 255, 255, 0.5); }
}

/* ============================================================
   GUIDED DEMO — PULSE BUTTON EFFECT
   ============================================================ */
@keyframes demoPulseBtn {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(0, 255, 255, 0);
    }
}

.cn-demo-pulse-btn {
    animation: demoPulseBtn 1.2s ease-in-out infinite !important;
    border-color: #00ffff !important;
}

/* ============================================================
   ACTION CARD — TRANSLATE BUTTON (purple, TE-branded)
   ============================================================ */
.cn-action-card .cn-action-swap-btn {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #c084fc;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s ease;
}

.cn-action-card .cn-action-swap-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
    color: #e0b0ff;
}

/* ============================================================
   HIGHLIGHTED CARD — connected to current filmstrip moment
   ============================================================ */
.cn-action-card--highlighted {
    border-color: rgba(0, 255, 255, 0.4) !important;
    background: rgba(0, 255, 255, 0.04) !important;
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.08);
}

.cn-action-card--highlighted .cn-action-card-thumb {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.15);
}

/* ============================================================
   CUSTOMIZED CARD — user swapped via Translation Engine
   ============================================================ */
.cn-action-card--customized {
    border-left: 2px solid #a855f7;
}

.cn-action-card--customized::before {
    content: 'CUSTOMIZED';
    position: absolute;
    top: -8px;
    right: 10px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #a855f7;
    background: rgba(10, 10, 20, 0.9);
    padding: 1px 6px;
    border-radius: 3px;
}

.cn-action-card {
    position: relative;
}

/* ============================================================
   SIMPLE DEMO INTRO POPUP
   ============================================================ */
.cn-simple-demo-intro {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cn-simple-demo-intro.active {
    opacity: 1;
}

.cn-sdi-card {
    background: rgba(15, 15, 30, 0.95);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px 36px;
    max-width: 420px;
    text-align: center;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cn-sdi-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}

.cn-sdi-body {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

.cn-sdi-body strong {
    color: #00ffff;
}

.cn-sdi-go {
    background: linear-gradient(135deg, #00ffff, #a855f7);
    color: #000;
    border: none;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cn-sdi-go:hover {
    transform: scale(1.03);
}

/* ============================================================
   SIDEBAR CARDS — Canva-style editable template items
   ============================================================ */
.cn-action-card:not(.cn-action-card--release) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 3px;
}

.cn-action-card:not(.cn-action-card--release):hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.2);
}

.cn-action-card-thumb {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s ease;
}

.cn-action-card:hover .cn-action-card-thumb {
    border-color: rgba(0, 255, 255, 0.3);
}

.cn-action-card-thumb img,
.cn-action-card-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cn-action-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-action-card-title {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cn-action-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cn-action-card-date {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: color 0.2s ease;
}

.cn-action-card-date:hover {
    color: #00ffff;
}

.cn-action-card-date svg {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cn-action-card:hover .cn-action-card-date svg {
    opacity: 0.6;
}

/* TE (Translation Engine) icon on cards — base styles overridden later */

/* Remove button — appears on hover */
.cn-card-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 60, 60, 0.8);
    border: none;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cn-action-card:hover .cn-card-remove {
    opacity: 1;
}

.cn-card-remove:hover {
    background: #ff3c3c;
    transform: scale(1.15);
}

.cn-release-date {
    font-size: 9px;
    color: rgba(57, 255, 20, 0.6);
    margin-left: auto;
}

/* Phase groups — Enhanced with color coding and structure */
.cn-phase-group {
    margin-bottom: 12px;
}

.cn-phase-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    gap: 8px;
    border-left: 3px solid var(--phase-color, rgba(255,255,255,0.2));
    background: var(--phase-accent, rgba(255,255,255,0.04));
}

.cn-phase-label-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cn-phase-label-text {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--phase-color, #00ffff);
    line-height: 1.3;
}

.cn-phase-label-date {
    font-weight: 600;
    font-size: 9px;
    opacity: 0.8;
    letter-spacing: 0;
    text-transform: none;
}

.cn-phase-label-sub {
    font-size: 9px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
}

.cn-phase-label-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cn-phase-approve-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.2);
    color: rgba(57, 255, 20, 0.8);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cn-phase-approve-all-btn:hover {
    background: rgba(57, 255, 20, 0.18);
    border-color: rgba(57, 255, 20, 0.5);
    color: #39ff14;
}

.cn-phase-all-approved {
    color: #39ff14;
    display: flex;
    align-items: center;
}

.cn-phase-group-count {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    white-space: nowrap;
}

/* Day connectors between cards */
.cn-day-connector {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
}

.cn-day-connector-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.cn-day-connector-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Approve All button in plan header */
.cn-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cn-approve-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.25);
    color: rgba(57, 255, 20, 0.85);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cn-approve-all-btn:hover {
    background: rgba(57, 255, 20, 0.2);
    border-color: rgba(57, 255, 20, 0.5);
    color: #39ff14;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
}

/* Phase-tinted card backgrounds */
.cn-phase-group[data-phase="pre_release"] .cn-action-card:not(.cn-action-card--release):not(.cn-action-card--highlighted) {
    background: rgba(79, 195, 247, 0.03);
}
.cn-phase-group[data-phase="post_single_1"] .cn-action-card:not(.cn-action-card--release):not(.cn-action-card--highlighted),
.cn-phase-group[data-phase="post_single_2"] .cn-action-card:not(.cn-action-card--release):not(.cn-action-card--highlighted) {
    background: rgba(206, 147, 216, 0.03);
}
.cn-phase-group[data-phase="between_singles"] .cn-action-card:not(.cn-action-card--release):not(.cn-action-card--highlighted),
.cn-phase-group[data-phase="lead_up_single_2"] .cn-action-card:not(.cn-action-card--release):not(.cn-action-card--highlighted),
.cn-phase-group[data-phase="project_buildup"] .cn-action-card:not(.cn-action-card--release):not(.cn-action-card--highlighted) {
    background: rgba(255, 183, 77, 0.03);
}
.cn-phase-group[data-phase="post_release"] .cn-action-card:not(.cn-action-card--release):not(.cn-action-card--highlighted) {
    background: rgba(206, 147, 216, 0.03);
}

/* Card editable hover states — Canva feel */
.cn-action-card:not(.cn-action-card--release):hover {
    border-style: dashed !important;
    border-color: rgba(0, 255, 255, 0.25) !important;
}

.cn-editable-title {
    cursor: text;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.cn-action-card:hover .cn-editable-title {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.cn-editable-title.cn-editing {
    background: rgba(0, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 255, 0.3);
    outline: none;
    color: #fff;
}

.cn-editable-date {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 3px;
    transition: background 0.15s ease;
}

.cn-editable-date:hover {
    background: rgba(0, 255, 255, 0.08);
    color: #00ffff !important;
}

.cn-editable-date svg {
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.cn-editable-date:hover svg {
    opacity: 1;
}

/* Release cards — prominent upload checkpoint */
.cn-action-card--release {
    padding: 10px 10px;
    border: 1.5px solid rgba(57, 255, 20, 0.3);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.06), rgba(57, 255, 20, 0.02));
    margin-bottom: 5px;
}

.cn-release-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.cn-release-icon {
    font-size: 18px;
    line-height: 1;
}

.cn-release-info {
    flex: 1;
}

.cn-release-title {
    font-size: 12px;
    font-weight: 700;
    color: #39ff14;
}

.cn-release-date {
    font-size: 10px;
    color: rgba(57, 255, 20, 0.6);
}

.cn-upload-cta {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.3);
    color: #ffaa00;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.cn-upload-cta.cn-upload-complete {
    background: rgba(57, 255, 20, 0.1);
    border-color: rgba(57, 255, 20, 0.3);
    color: #39ff14;
}

/* Highlighted card — currently viewed moment */
.cn-action-card--highlighted {
    border-color: rgba(0, 255, 255, 0.35) !important;
    background: rgba(0, 255, 255, 0.04) !important;
}

/* Customized card — user swapped via TE */
.cn-action-card--customized {
    border-left: 2px solid #a855f7;
}

/* Approved card */
.cn-action-card--approved {
    border-color: rgba(57, 255, 20, 0.2);
    background: rgba(57, 255, 20, 0.03);
}

/* ============================================================
   CARD BODY — Source ref, your version, actions
   ============================================================ */
.cn-action-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cn-card-source-ref {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.55);
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.04));
    border-left: 2px solid #a855f7;
    padding: 3px 7px;
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    margin-bottom: 2px;
}

.cn-card-source-ref strong {
    color: #c084fc;
    font-weight: 800;
    margin-right: 3px;
}

.cn-card-your-version {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-action-card--approved .cn-card-your-version {
    color: rgba(57, 255, 20, 0.8);
}

.cn-card-date-row {
    display: flex;
    align-items: center;
}

.cn-card-date-row .cn-editable-date {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.cn-card-date-row .cn-editable-date:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
}

/* Action buttons row */
.cn-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.cn-card-approve-btn {
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.25);
    color: #39ff14;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
}

.cn-card-approve-btn:hover {
    background: rgba(57, 255, 20, 0.2);
    border-color: #39ff14;
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.2);
}

.cn-card-approved-badge {
    font-size: 9px;
    font-weight: 600;
    color: rgba(57, 255, 20, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.cn-card-te-btn {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(124, 58, 237, 0.15));
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-basis: 100%;
    justify-content: center;
}

.cn-card-te-btn .cn-te-label {
    white-space: nowrap;
}

.cn-card-te-btn:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(124, 58, 237, 0.25));
    border-color: #a855f7;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);
    color: #fff;
}

.cn-card-edit-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-card-edit-btn:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

.cn-card-remove {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.15);
    font-size: 14px;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1;
    transition: color 0.15s ease;
    margin-left: auto;
}

.cn-card-remove:hover {
    color: #ff4444;
}

/* Inline editing state */
.cn-card-your-version.cn-editing {
    background: rgba(0, 255, 255, 0.06);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 3px;
    padding: 2px 4px;
    outline: none;
    color: #fff;
}

/* ============================================================
   INLINE DATE PICKER
   ============================================================ */
.cn-inline-date-picker {
    position: fixed;
    z-index: 999999;
    background: #1a1a2e;
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-inline-date-picker .cn-date-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
    color-scheme: dark;
}

.cn-inline-date-picker .cn-date-input:focus {
    border-color: #00ffff;
}

.cn-inline-date-picker .cn-date-actions {
    display: flex;
    gap: 4px;
}

.cn-inline-date-picker .cn-date-save {
    flex: 1;
    background: rgba(0, 255, 255, 0.15);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #00ffff;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.cn-inline-date-picker .cn-date-save:hover {
    background: rgba(0, 255, 255, 0.25);
}

.cn-inline-date-picker .cn-date-cancel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.15s ease;
}

.cn-inline-date-picker .cn-date-cancel:hover {
    color: #fff;
}

/* ============================================================
   SPINE DOTS — Plan-aware styling (enlarged for visibility)
   ============================================================ */
.cn-spine-dot-plan {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00ffff;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
}

.cn-spine-dot-plan:hover {
    transform: translateX(-50%) scale(1.4);
}

.spine-film-card.has-plan-item .cn-spine-dot-plan {
    opacity: 1;
}

.cn-dot-pending {
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cn-dot-approved {
    background: #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.4);
}

.cn-dot-release {
    background: #39ff14;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
    border: 1px solid rgba(57, 255, 20, 0.4);
}

.spine-film-card.has-plan-item-release .cn-spine-dot-plan {
    background: #39ff14;
    width: 12px;
    height: 12px;
}

/* Plan connection line on dots */
.spine-film-card.has-plan-item::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background: rgba(0, 255, 255, 0.2);
}

/* Filmstrip legend */
.cn-filmstrip-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
}

.cn-legend-label {
    font-weight: 700;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-legend-dot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cn-dot-sample {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.cn-legend-tip {
    margin-left: auto;
    font-style: italic;
    color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   DISTRIBUTION FUNNEL PROGRESS
   ============================================================ */
.cn-distribute-funnel {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 0 14px 6px;
}

.cn-funnel-step {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    position: relative;
    justify-content: center;
}

.cn-funnel-step-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.cn-funnel-step.active .cn-funnel-step-icon {
    background: rgba(0, 255, 255, 0.15);
    border-color: #00ffff;
    color: #00ffff;
}

.cn-funnel-step.done .cn-funnel-step-icon {
    background: rgba(57, 255, 20, 0.15);
    border-color: #39ff14;
    color: #39ff14;
}

.cn-funnel-step-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
}

.cn-funnel-step.active .cn-funnel-step-label {
    color: #00ffff;
}

.cn-funnel-step.done .cn-funnel-step-label {
    color: rgba(57, 255, 20, 0.6);
}

.cn-funnel-connector {
    width: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.cn-funnel-step.done ~ .cn-funnel-connector {
    background: rgba(57, 255, 20, 0.3);
}

/* ============================================================
   GUIDED PULSE ANIMATION
   ============================================================ */
@keyframes cn-guided-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(0, 255, 255, 0); }
}

.cn-action-card.cn-pulse-guide {
    animation: cn-guided-pulse 1.5s ease-in-out 3;
}

@keyframes cn-te-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(168, 85, 247, 0); }
}

.cn-card-te-btn.cn-pulse-guide {
    animation: cn-te-pulse 1.5s ease-in-out infinite;
}

@keyframes cn-distribute-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(57, 255, 20, 0); }
}

.cn-distribute-btn.cn-pulse-guide {
    animation: cn-distribute-pulse 1.5s ease-in-out infinite;
}

.cn-card-your-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(57, 255, 20, 0.5);
    line-height: 1;
    margin-top: 1px;
}

.cn-card-ideas-btn {
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.2);
    color: #00ffff;
    font-size: 9px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
}

.cn-card-ideas-btn:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: #00ffff;
}

@keyframes cn-qi-appear {
    from { opacity: 0; transform: scale(0.92) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cn-qi-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cn-quick-ideas-popup {
    position: fixed;
    z-index: 999999;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cn-quick-ideas-popup.active {
    opacity: 1;
}

.cn-qi-card-inner {
    width: 420px;
    max-width: 92vw;
    border-radius: 20px;
    padding: 28px 24px 20px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.cn-quick-ideas-popup.active .cn-qi-card-inner {
    transform: scale(1);
}

.cn-qi-header {
    margin-bottom: 20px;
}

.cn-qi-title {
    font-size: 18px;
    font-weight: 700;
    color: #00ffff;
    margin: 10px 0 6px;
    letter-spacing: 0.5px;
}

.cn-qi-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

.cn-qi-sub strong {
    color: #fff;
}

/* Circle grid — matches goals window */
.cn-qi-circles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.cn-qi-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cn-qi-circle:hover {
    transform: scale(1.06);
}

.cn-qi-circle-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 40%, rgba(0, 255, 255, 0.12), rgba(0, 255, 255, 0.03));
    border: 1.5px solid rgba(0, 255, 255, 0.15);
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.06);
}

.cn-qi-circle:hover .cn-qi-circle-ring {
    border-color: rgba(0, 255, 255, 0.5);
    background: radial-gradient(circle at 40% 40%, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.06));
    box-shadow: 0 6px 30px rgba(0, 255, 255, 0.15);
}

.cn-qi-circle-ring svg {
    width: 24px;
    height: 24px;
}

.cn-qi-circle-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    max-width: 140px;
    transition: color 0.2s ease;
}

.cn-qi-circle:hover .cn-qi-circle-label {
    color: #00ffff;
}

/* ============================================================
   QUICK IDEAS — Fixed popup dropdown
   ============================================================ */
.cn-qi-popup {
    position: fixed;
    z-index: 999999;
    width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: #111128;
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.cn-qi-popup-header {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #00ffff;
    text-transform: uppercase;
    padding: 10px 12px 6px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.06);
}

.cn-qi-popup-item {
    padding: 9px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.12s ease;
}

.cn-qi-popup-item:hover {
    background: rgba(0, 255, 255, 0.06);
    color: #00ffff;
}

.cn-qi-popup-te {
    padding: 9px 12px;
    font-size: 10px;
    font-weight: 700;
    color: #c084fc;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    border-top: 1px solid rgba(168, 85, 247, 0.1);
    transition: all 0.12s ease;
}

.cn-qi-popup-te:hover {
    background: rgba(168, 85, 247, 0.08);
    color: #d8b4fe;
}

/* old — keep for backwards compat */
.cn-qi-drop {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 100;
    margin-top: 4px;
    background: linear-gradient(135deg, rgba(30, 40, 60, 0.85), rgba(20, 28, 50, 0.9));
    backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cn-qi-drop.open {
    opacity: 1;
    transform: translateY(0);
}

.cn-qi-drop-item {
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.12s ease;
}

.cn-qi-drop-item:last-child {
    border-bottom: none;
}

.cn-qi-drop-item:hover {
    background: rgba(0, 255, 255, 0.08);
    color: #00ffff;
    padding-left: 16px;
}

.cn-qi-drop-te {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    color: #c084fc;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    border-top: 1px solid rgba(168, 85, 247, 0.1);
    background: rgba(168, 85, 247, 0.04);
    transition: all 0.12s ease;
}

.cn-qi-drop-te:hover {
    background: rgba(168, 85, 247, 0.12);
    color: #d8b4fe;
}

.cn-qi-te-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    border-radius: 12px;
    color: #d8b4fe;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.2px;
}

.cn-qi-te-action:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(168, 85, 247, 0.2));
    border-color: #a855f7;
    color: #fff;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.cn-qi-full-te {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #c084fc;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.3px;
    background: rgba(168, 85, 247, 0.06);
    border: none;
    border-top: 1px solid rgba(168, 85, 247, 0.08);
    border-radius: 0 0 20px 20px;
    transition: all 0.2s ease;
}

.cn-qi-full-te:hover {
    background: rgba(168, 85, 247, 0.15);
    color: #d8b4fe;
}

/* ============================================================
   VIEW FULL PLAN BUTTON
   ============================================================ */
.cn-view-full-plan-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.06);
    border: 1px solid rgba(79, 195, 247, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cn-view-full-plan-btn:hover {
    background: rgba(79, 195, 247, 0.14);
    border-color: rgba(79, 195, 247, 0.35);
    color: #81d4fa;
}
.cn-view-full-plan-btn.cn-button-intro-highlight {
    animation: fullPlanPulse 1s ease-in-out infinite !important;
    background: rgba(0, 255, 200, 0.2) !important;
    border-color: rgba(0, 255, 200, 0.8) !important;
    color: #00ffc8 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 16px rgba(0,255,200,0.4) !important;
}
@keyframes fullPlanPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,255,200,0.4), 0 0 0 4px rgba(0,255,200,0.3); transform: scale(1); }
    50% { box-shadow: 0 0 32px rgba(0,255,200,0.7), 0 0 0 8px rgba(0,255,200,0.4); transform: scale(1.06); }
}

/* ============================================================
   FULL PLAN OVERLAY — Split-screen timeline comparison
   ============================================================ */
.cn-full-plan-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 300000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cn-full-plan-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.cn-full-plan-modal {
    width: 90vw;
    max-width: 900px;
    max-height: 85vh;
    background: #0a0a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-full-plan-overlay.active .cn-full-plan-modal {
    transform: scale(1);
}

.cn-full-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.cn-full-plan-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-full-plan-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.cn-full-plan-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.cn-full-plan-close {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 300002;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.cn-full-plan-close:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.cn-full-plan-columns {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cn-fp-col-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.cn-fp-col-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.cn-full-plan-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 24px;
}

.cn-fp-phase {
    margin-bottom: 16px;
}

.cn-fp-phase-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fp-color, #888);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 8px;
}

.cn-fp-phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cn-fp-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.cn-fp-left,
.cn-fp-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cn-fp-right {
    justify-content: flex-end;
    text-align: right;
}

.cn-fp-right .cn-fp-right-text {
    text-align: right;
}

.cn-fp-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-fp-left-text,
.cn-fp-right-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cn-fp-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.cn-fp-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-fp-connector {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    flex-shrink: 0;
}

.cn-fp-connector-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(0,255,255,0.15), rgba(255,255,255,0.04));
}

.cn-fp-connector-date {
    font-size: 8px;
    font-weight: 600;
    color: rgba(0, 255, 255, 0.5);
    white-space: nowrap;
}

.cn-fp-badge--approved {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Full Plan View: staggered fade-in animation ── */
.cn-fp-row {
    opacity: 0;
    transform: translateX(-8px);
    animation: fpSlideIn 0.35s ease forwards;
}

@keyframes fpSlideIn {
    to { opacity: 1; transform: translateX(0); }
}

.cn-fp-phase-header {
    opacity: 0;
    animation: fpFadeIn 0.4s ease forwards;
}

@keyframes fpFadeIn {
    to { opacity: 1; }
}

/* ── Draw-in line for connector ── */
.cn-fp-connector-line {
    transform-origin: left center;
    animation: fpLineDraw 0.5s ease forwards;
    animation-delay: inherit;
}

@keyframes fpLineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── Approved badge bounce ── */
.cn-fp-badge--approved {
    animation: fpBadgeBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: inherit;
}

@keyframes fpBadgeBounce {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

/* ── Full Plan audio player ── */
.cn-fp-audio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-left: 12px;
}

.cn-fp-audio-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cn-fp-audio-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
}

.cn-fp-audio-btn.playing {
    background: rgba(168, 85, 247, 0.2);
    border-color: #a855f7;
    color: #d8b4fe;
    animation: fpAudioPulse 2s ease-in-out infinite;
}

@keyframes fpAudioPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
    50%      { box-shadow: 0 0 10px 3px rgba(168, 85, 247, 0.2); }
}

.cn-fp-audio-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ── Full Plan: overall progress bar in header ── */
.cn-fp-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
}

.cn-fp-progress-text {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.cn-fp-progress-bar {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    flex-shrink: 0;
}

.cn-fp-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #39ff14, #4fc3f7);
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Full Plan: enhanced release rows ── */
.cn-fp-row--release {
    grid-template-columns: 1fr auto 1fr;
    background: rgba(57, 255, 20, 0.03);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(57, 255, 20, 0.1);
    margin-bottom: 6px;
}

.cn-fp-release-art {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-size: cover;
    background-position: center;
}

.cn-fp-release-art img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.cn-fp-dsp-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
}

.cn-fp-dsp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.cn-fp-dsp-icon svg {
    width: 14px;
    height: 14px;
}

.cn-fp-dsp-icon:hover {
    opacity: 1;
}

.cn-fp-dsp-more {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
}

.cn-fp-release-date {
    font-size: 9px;
    font-weight: 700;
    color: rgba(0, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}

.cn-fp-release-date svg {
    width: 10px;
    height: 10px;
    opacity: 0.5;
}

/* ── Full Plan: editable hover states ── */
.cn-fp-editable-title {
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
    padding: 1px 3px;
    margin: -1px -3px;
    border-radius: 3px;
}

.cn-fp-editable-title:hover {
    border-bottom-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

.cn-fp-editable-title[contenteditable="true"] {
    border-bottom-color: rgba(57, 255, 20, 0.4);
    background: rgba(57, 255, 20, 0.05);
    outline: none;
}

.cn-fp-editable-date {
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 1px 4px;
    margin: -1px -4px;
    border-radius: 3px;
}

.cn-fp-editable-date:hover {
    background: rgba(0, 255, 255, 0.08);
    color: rgba(0, 255, 255, 0.8);
}

/* ── Full Plan: empty slot nudge ── */
.cn-fp-empty-nudge {
    font-size: 10px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 8px;
    transition: all 0.15s ease;
}

.cn-fp-row:hover .cn-fp-empty-nudge {
    border-color: rgba(79, 195, 247, 0.2);
    color: rgba(79, 195, 247, 0.5);
}

/* ── Full Plan: scroll anchor highlight ── */
.cn-fp-row--current {
    position: relative;
}

.cn-fp-row--current::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    border-radius: 2px;
    background: #4fc3f7;
    opacity: 0.6;
}

/* ── Phase completion rings on individual cards ── */
.cn-action-card .cn-phase-progress-ring {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
    padding: 0;
}

.cn-phase-progress-ring svg {
    transform: rotate(-90deg);
}

.cn-phase-progress-ring .ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 2.5;
}

.cn-phase-progress-ring .ring-fill {
    fill: none;
    stroke: var(--phase-color, #888);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.cn-phase-progress-ring .ring-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
}

/* ── Save as Inspo → Pin for Reference ── */
.cn-pin-ref-btn {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.25);
    color: #ffd54f;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.cn-pin-ref-btn:hover {
    background: rgba(255, 193, 7, 0.18);
    border-color: #ffd54f;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.2);
    color: #fff;
}

.cn-pin-ref-btn .cn-pin-icon {
    font-size: 10px;
}

/* Pinned state */
.cn-pin-ref-btn.pinned {
    background: rgba(255, 193, 7, 0.18);
    border-color: #ffd54f;
    color: #ffd54f;
}

.cn-pin-ref-btn.pinned .cn-pin-label::after {
    content: ' \2713';
}

/* ====== Sidebar Campaign Switcher ====== */
.cn-sidebar-campaign-switch {
    display: flex !important;
    gap: 6px;
    margin: 8px 0 6px;
}
.cn-sidebar-camp-btn {
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.cn-sidebar-camp-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}
.cn-sidebar-camp-btn.active {
    background: rgba(255, 107, 157, 0.15);
    border-color: rgba(255, 107, 157, 0.4);
    color: #ff6b9d;
    box-shadow: 0 0 8px rgba(255, 107, 157, 0.15);
}
.cn-sidebar-camp-btn[data-campaign="paranoia"].active {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: #a855f7;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
}

/* ====== Upload Panel ====== */
.cn-upload-panel {
    padding: 0 16px 8px;
}
.cn-upload-panel-header {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(0, 255, 255, 0.5);
    margin-bottom: 6px;
}
.cn-upload-single-card {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 6px;
}
.cn-upload-single-art {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
}
.cn-upload-single-info {
    flex: 1;
    min-width: 0;
}
.cn-upload-single-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 4px;
}
.cn-upload-single-files {
    display: flex;
    gap: 4px;
}
.cn-upload-file-btn {
    font-size: 8px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.06);
    color: rgba(0, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}
.cn-upload-file-btn:hover:not(.uploaded):not(.uploading) {
    background: rgba(0, 255, 255, 0.12);
    border-color: rgba(0, 255, 255, 0.4);
}
.cn-upload-file-btn.uploaded {
    background: rgba(57, 255, 20, 0.1);
    border-color: rgba(57, 255, 20, 0.25);
    color: #39ff14;
    cursor: default;
}
.cn-upload-file-btn.uploading {
    opacity: 0.6;
    cursor: wait;
    animation: cn-upload-pulse 1s ease-in-out infinite;
}
@keyframes cn-upload-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ===== Campaign Merge Modal ===== */
.cn-merge-overlay {
    position: fixed;
    inset: 0;
    z-index: 300000;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(6px);
}
.cn-merge-overlay.active { opacity: 1; }
.cn-merge-card {
    background: linear-gradient(145deg, rgba(30,30,40,0.97), rgba(18,18,24,0.98));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.3s ease;
}
.cn-merge-overlay.active .cn-merge-card { transform: scale(1); }
.cn-merge-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}
.cn-merge-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 6px;
    color: #fff;
}
.cn-merge-plus {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
}
.cn-merge-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}
.cn-merge-card p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin: 0 0 16px;
}
.cn-merge-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    text-align: left;
}
.cn-merge-benefits li {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    padding: 5px 0 5px 20px;
    position: relative;
}
.cn-merge-benefits li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #39ff14;
    font-weight: 700;
}
.cn-merge-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.cn-merge-confirm-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cn-merge-confirm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(168,85,247,0.4);
}
.cn-merge-cancel-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.cn-merge-cancel-btn:hover {
    border-color: rgba(255,255,255,0.3);
}

/* ===== Campaign Badge on Action Cards ===== */
.cn-card-campaign-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 4px;
    opacity: 0.85;
}

/* ===== Distribute Button Pulse When Ready ===== */
.cn-phase-distribute-btn.ready {
    cursor: pointer !important;
    animation: cn-distribute-pulse 1.5s ease-in-out infinite;
}
@keyframes cn-distribute-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(57,255,20,0.2); }
    50% { box-shadow: 0 0 20px rgba(57,255,20,0.5); }
}

/* ===================================================================
   DEMO-HIDDEN ELEMENTS — Full-version features hidden during demo.
   To restore for launch: remove .cn-demo-hide-setup from the JS
   silent init block in translation-engine.js (~line 450).
   Elements: .cn-spine-empty-state (+ icon & "Set First Single" CTA),
   .cn-spine-genesis-prompt, #cn-set-first-single-container,
   #cn-campaign-setup-panel, showFirstSingleDateModal() (JS).
   =================================================================== */
.cn-demo-hide-setup {
    display: none !important;
}

/* Hide filmstrip ADD buttons during and after the demo */
body.cn-demo-active .film-card-add-btn {
    display: none !important;
}

/* ============================================================
   ZORDON GOALS PANEL — cloned into demo goals modal.
   No overrides here; all styling comes from zordon-intro.css.
   ============================================================ */
.cn-goals-modal-clone-wrap {
    transform: scale(0.95) translateY(10px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cn-goals-modal-overlay.active .cn-goals-modal-clone-wrap {
    transform: scale(1) translateY(0);
}