/* ================ GLOBAL TEXT — ALL WHITE ================ */
body { color: #d4d4d8; }

/* NUCLEAR: every UI element with faint text gets forced to white */
.top-nav-tab,
button, label, span, select, option,
.cinema-mb-tab, .cinema-prop-label, .cinema-prop-value, .cinema-prop-title,
.cinema-tl-track-name, .cinema-tl-ruler-mark, .cinema-ctrl-text, .cinema-ctrl-select,
.cinema-credits, .cinema-transport-time, .cinema-tl-btn, .cinema-transport-btn,
.cinema-ctrl-btn, .cinema-mb-upload-btn, .cinema-tl-clip,
.seed-subnav-tab, .seed-gen-count, .seed-dp-label, .seed-dp-select,
.seed-project-item, .seed-filter-select, .seed-scenes-count, .seed-scenes-label,
.seed-mode-item, .seed-pill-select, .seed-vm-frame-btn, .seed-vm-label,
.seed-vm-res-badge, .seed-vm-genre-badge, .seed-vm-audio-toggle,
.seed-credit-display, .seed-dp-duration-unit, .seed-dp-duration-input,
.seed-dp-toggle-btn, .seed-dp-constraints-btn,
.dir-section-label, .dir-input, .dir-select,
.char-page-title, .char-card-name, .char-card-desc {
    color: rgba(255,255,255,0.85) !important;
}
/* Active states stay green */
.top-nav-tab.active, .cinema-mb-tab.active, .seed-subnav-tab.active,
.seed-mode-item.active, .seed-view-btn.active {
    color: #5ce89a !important;
}
/* Green-accent labels */
.cinema-mb-title, .cinema-prop-title, .seed-sidebar-title, .seed-dp-graph-label {
    color: rgba(92,232,154,0.85) !important;
}
/* Placeholders lighter */
::placeholder { color: rgba(255,255,255,0.4) !important; }
/* Generate buttons keep dark text on lime bg */
.seed-generate-btn, .cinema-generate-btn, .dir-generate-videos-btn {
    color: #0a0a0e !important;
}

/* ================ DESIGN TOKENS ================ */

/* Glow opacity property (progressive enhancement) */
@property --glow-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

:root {
    /* ── 8-Step Type Scale (Major Third 1.25) ── */
    --text-2xs: 0.714rem;  /* 10px */
    --text-xs: 0.786rem;   /* 11px */
    --text-sm: 0.857rem;   /* 12px */
    --text-base: 1rem;     /* 14px */
    --text-md: 1.143rem;   /* 16px */
    --text-lg: 1.429rem;   /* 20px */
    --text-xl: 1.714rem;   /* 24px */
    --text-2xl: 2rem;      /* 28px */

    /* ── Depth Layers (darkest → lightest) — pitch black base ── */
    --depth-base: #000000;
    --depth-surface: rgba(6, 8, 12, 0.64);
    --depth-elevated: rgba(10, 12, 18, 0.55);
    --depth-overlay: rgba(14, 16, 22, 0.76);
    --depth-recessed: rgba(2, 3, 6, 0.65);

    /* ── Glass System — silver opal + ice blue ── */
    --glass-bg: rgba(2, 4, 8, 0.58);
    --glass-bg-elevated: rgba(8, 12, 18, 0.55);
    --glass-bg-overlay: rgba(4, 6, 12, 0.72);
    --glass-bg-recessed: rgba(1, 2, 6, 0.62);
    --glass-blur: blur(28px) saturate(1.9);
    --glass-blur-heavy: blur(36px) saturate(2.1);
    --glass-blur-light: blur(16px) saturate(1.5);
    --glass-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 70px rgba(180,180,200,0.025), 0 0 40px rgba(20,60,100,0.02);
    --glass-shadow-hover: 0 14px 56px rgba(0,0,0,0.55), 0 0 90px rgba(92,232,154,0.06), 0 0 50px rgba(210,210,230,0.04);
    --glass-inset-glow: inset 0 1px 0 rgba(210,210,230,0.10), inset 0 0 30px rgba(92,232,154,0.03), inset 0 0 20px rgba(20,60,100,0.03), inset 0 -1px 0 rgba(0,0,0,0.3);
    --separator-gradient: linear-gradient(90deg, transparent, rgba(210,210,230,0.10), rgba(92,232,154,0.04), transparent);

    /* ── Silver / Neutral system ── */
    --silver: #999999;
    --silver-light: #f0f0f0;
    --silver-dark: #666666;
    --opal-glass: rgba(210, 210, 230, 0.09);
    --opal-border: rgba(210, 210, 230, 0.12);
    --opal-glow: 0 0 50px rgba(210,210,230,0.05);

    /* ── Ice Blue system (~10% accent) ── */
    --ice-blue: #4a8ab5;
    --ice-blue-dark: #1a3a5c;
    --ice-blue-glow: rgba(20, 80, 140, 0.08);
    --ice-blue-subtle: rgba(60, 120, 180, 0.04);

    /* ── Green system — bright lime green from brand palette ── */
    --opal-green: #5ce89a;
    --opal-green-light: #a8e0c4;
    --opal-green-dark: #5ce89a;
    --opal-green-glow: rgba(92, 232, 154, 0.15);
    --opal-green-subtle: rgba(92, 232, 154, 0.06);
    --opal-green-border: rgba(92, 232, 154, 0.12);

    /* Glass noise texture (SVG data URI for hyper-realism) */
    --glass-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    --panel-backlight: 0 0 80px rgba(210,210,230,0.04), 0 0 140px rgba(92,232,154,0.02), 0 0 200px rgba(210,210,230,0.015);

    /* ── Prismatic System (complement shimmer) ── */
    --prism-rose: #f43f5e;
    --prism-cyan: #06b6d4;
    --prism-violet: #5ce89a;
    --prism-amber: #f59e0b;
    --prism-shimmer: linear-gradient(135deg,
        rgba(244,63,94,0.06),
        rgba(6,182,212,0.06),
        rgba(139,92,246,0.06),
        rgba(245,158,11,0.06));
    --prism-glow-hover: 0 0 40px rgba(244,63,94,0.05),
        0 0 40px rgba(6,182,212,0.05),
        0 0 40px rgba(139,92,246,0.05);

    /* Base surfaces (aliased for backward compat) */
    --bg-base: #000000;
    --bg-surface: var(--depth-surface);
    --bg-card: var(--depth-elevated);
    --bg-card-hover: rgba(14, 14, 14, 0.65);
    --bg-input: var(--depth-recessed);
    --border: rgba(210, 210, 230, 0.10);
    --border-focus: rgba(92, 232, 154, 0.35);
    --border-bright: rgba(210, 210, 230, 0.18);
    --border-cyan: rgba(210, 210, 230, 0.14);

    /* Text — white for readability */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.82);
    --text-tertiary: rgba(255, 255, 255, 0.55);
    --text-muted: rgba(255, 255, 255, 0.45);
    --text-on-accent: #000;

    /* Opal green accent — mint green from brand palette */
    --accent-primary: #5ce89a;
    --accent-primary-light: #7ef0b2;
    --accent-primary-dark: #3cc878;
    /* Backward compat aliases */
    --accent-gold: var(--accent-primary);
    --accent-gold-light: var(--accent-primary-light);
    --accent-gold-dark: var(--accent-primary-dark);

    /* Bright green */
    --accent-bright: #5ce89a;
    --accent-bright-light: #7ef0b2;
    --accent-bright-dark: #3cc878;
    --accent-neon: #5ce89a;
    /* Backward compat aliases */
    --accent-cyan: var(--accent-bright);
    --accent-cyan-light: var(--accent-bright-light);
    --accent-cyan-dark: var(--accent-bright-dark);

    /* Logo silver accent */
    --accent-logo: #c0c0c8;
    --accent-logo-bright: #e0e0e8;
    --accent-logo-dark: #888890;

    /* Prismatic complement accents */
    --accent-indigo: #5ce89a;
    --accent-emerald: #5ce89a;
    --accent-amber: #f59e0b;
    --accent-red: #f43f5e;

    /* Glow system — opal green (98%) */
    --glow-gold: 0 0 20px rgba(92,232,154,0.15), 0 0 60px rgba(74,106,78,0.08);
    --glow-cyan: 0 0 20px rgba(92,232,154,0.12), 0 0 60px rgba(92,232,154,0.05);
    --glow-neon: 0 0 20px rgba(92,232,154,0.18), 0 0 60px rgba(74,106,78,0.08);
    --glow-bright: 0 0 20px rgba(45,183,48,0.25), 0 0 60px rgba(45,183,48,0.10);
    --glow-opal: 0 0 20px rgba(92,232,154,0.12), 0 0 60px rgba(92,232,154,0.05);
    --glow-silver: 0 0 20px rgba(210,210,230,0.12), 0 0 60px rgba(210,210,230,0.05);

    /* Enhanced surfaces (KlingAI depth) */
    --bg-elevated: var(--depth-elevated);
    --bg-glass: rgba(0, 0, 0, 0.50);
    --bg-glass-hover: rgba(10, 10, 10, 0.72);
    --border-glow: rgba(200, 200, 220, 0.10);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 8px 48px rgba(0, 0, 0, .6);
    --shadow-gold: 0 4px 24px rgba(92, 232, 154, 0.10);

    /* Typography */
    --font-heading: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* Animation timing */
    --transition: 200ms cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Spacing Scale ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
}

/* ── Task 15: Focus-Visible Accessibility ── */
*:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}
.cc-sidebar-left *:focus-visible,
.cc-sidebar-right *:focus-visible {
    outline-color: var(--accent-cyan);
}
.input-select:focus-visible,
.input-text:focus-visible,
.input-time:focus-visible,
.cc-prompt-input:focus-visible,
.cc-select:focus-visible {
    outline: none; /* already has border-focus styling */
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ================ CINEMATIC CANVAS BG ================ */
#bgCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ================ HEADER (Cinematic Glass) ================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 46px;
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0;
    border-radius: 0;
    min-height: 60px;
    box-sizing: border-box;
}

/* Nav tabs integrated into header center */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
}
.header-nav::-webkit-scrollbar { display: none; }

/* Gradient separator replacing border */
.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--separator-gradient);
    pointer-events: none;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-mark {
    display: flex;
    position: relative;
}

.logo-draw {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: logoStrokeDraw 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.logo-draw-secondary {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: logoStrokeDrawSecondary 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.logo-circle-draw {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: logoCircleDraw 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes logoStrokeDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes logoStrokeDrawSecondary {
    to { stroke-dashoffset: 0; }
}

@keyframes logoCircleDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(92, 232, 154, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(92, 232, 154, 0.6));
    }
}

.header-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #e0e0e8, #c0c0c8, #f0f0f4, #a0a0a8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: textGradientShift 6s ease-in-out infinite;
    line-height: 1.2;
}

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

.header-subtitle {
    font-size: var(--text-xs);
    color: #a8e0c4;
    font-weight: 400;
    font-family: var(--font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ================ STATUS BADGE ================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 20px;
    background: rgba(92, 232, 154, 0.10);
    border: 1px solid rgba(92, 232, 154, 0.12);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--accent-gold);
    transition: all 0.3s var(--ease-smooth);
    backdrop-filter: blur(12px) saturate(1.4);
}

/* Heartbeat pulse when workflow is active */
.status-badge.active {
    animation: statusHeartbeat 2s ease-in-out infinite;
    border-color: rgba(92, 232, 154, 0.3);
    color: var(--accent-cyan);
}

.status-badge.active .status-dot {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}

@keyframes statusHeartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.04); }
    30% { transform: scale(1); }
    45% { transform: scale(1.02); }
    60% { transform: scale(1); }
}

.status-badge.inactive {
    background: rgba(101, 163, 13, 0.1);
    border-color: rgba(101, 163, 13, 0.25);
    color: var(--accent-gold-dark);
}

.status-badge.inactive .status-dot {
    background: var(--accent-gold-dark);
    box-shadow: 0 0 8px var(--accent-gold-dark);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 0 8px var(--accent-gold), 0 0 16px rgba(92, 232, 154, 0.3);
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ================ BUTTONS ================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: var(--glass-bg-elevated);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), var(--glass-inset-glow);
}

.btn:hover {
    background: var(--glass-bg-overlay);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--glass-shadow-hover), var(--glass-inset-glow);
}

.btn:active {
    transform: translateY(0.5px) scale(0.97);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Size variants */
.btn-xs {
    padding: 4px 10px;
    font-size: var(--text-2xs);
    border-radius: 6px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: var(--text-xs);
    border-radius: 6px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: var(--text-base);
    border-radius: var(--radius-md);
}

.btn-icon {
    padding: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    backdrop-filter: var(--glass-blur-light);
}

.btn-icon:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 16px rgba(92,232,154,0.15), var(--glass-inset-glow);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-light));
    border: none;
    color: var(--text-on-accent);
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(45,183,48,0.35), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0,0,0,0.15);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 0;
}

/* Shine sweep on hover */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s var(--ease-smooth);
    z-index: 1;
    pointer-events: none;
}

.btn-primary:hover::before {
    left: 150%;
}

/* Press ripple on click */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--click-x, 50%) var(--click-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
    pointer-events: none;
}

.btn-primary:active::after {
    opacity: 1;
    transition: opacity 0s;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-cyan-light), var(--accent-cyan));
    box-shadow: 0 8px 32px rgba(45,183,48,0.55), 0 0 50px rgba(65,221,69,0.30), 0 0 80px rgba(45,183,48,0.15), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 0 rgba(0,0,0,0.15);
    transform: translateY(-2px) scale(1.02);
}

.btn-primary:active {
    transform: translateY(0.5px);
    box-shadow: 0 1px 6px rgba(92, 232, 154, 0.2), inset 0 2px 0 rgba(0,0,0,0.1);
}

.btn-save {
    background: rgba(92, 232, 154, 0.1);
    color: var(--accent-gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), var(--glass-inset-glow);
}

.btn-save:hover {
    background: rgba(92, 232, 154, 0.18);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 16px rgba(92,232,154,0.1);
}

.btn-secondary {
    background: rgba(210, 210, 230, 0.08);
    border: none;
    color: var(--silver-light);
    backdrop-filter: var(--glass-blur-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), var(--glass-inset-glow);
}

.btn-secondary:hover {
    background: rgba(92, 232, 154, 0.10);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 20px rgba(92,232,154,0.10);
    color: var(--yellow-light);
}

.btn-accent {
    background: rgba(45, 183, 48, 0.12);
    border: none;
    color: var(--accent-cyan);
    backdrop-filter: var(--glass-blur-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), var(--glass-inset-glow);
}

.btn-accent:hover {
    background: rgba(45, 183, 48, 0.22);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 20px rgba(45,183,48,0.15);
    color: var(--accent-cyan-light);
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    box-shadow: none;
    backdrop-filter: none;
}

.btn-ghost:hover {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2), var(--glass-inset-glow);
    color: var(--text-primary);
}

.btn-danger {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(244, 63, 94, 0.06));
    border: none;
    color: var(--accent-red);
    backdrop-filter: var(--glass-blur-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), var(--glass-inset-glow);
}

.btn-danger:hover {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(244, 63, 94, 0.12));
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 24px rgba(244,63,94,0.15);
}

/* ================ MAIN LAYOUT ================ */
.main {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ================ STATS ROW ================ */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: rgba(8, 12, 18, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px) saturate(1.8);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2), var(--glass-inset-glow);
    transition: all 300ms cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    border-left: 3px solid var(--accent, var(--accent-gold));
}

.stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200,200,220,0.04) 0%, rgba(20,60,100,0.03) 25%, transparent 50%, rgba(92, 232, 154, 0.03) 100%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s;
    border-radius: inherit;
}

.stat-card:hover::after {
    opacity: 1;
    background: linear-gradient(135deg, rgba(200,200,220,0.05) 0%, transparent 30%, rgba(92, 232, 154, 0.08) 100%);
}

.stat-card:hover {
    background: linear-gradient(135deg, rgba(16, 16, 18, 0.85), rgba(8, 8, 8, 0.7));
    border-color: var(--border-bright);
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md), var(--glow-gold);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    flex-shrink: 0;
}

.stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: block;
    color: var(--accent-gold-light);
}

.stat-label {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin-top: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ================ GRID ================ */
.grid-2col {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

.col-left,
.col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ================ CARDS (KlingAI Glass Morphism) ================ */
.card {
    background: rgba(6, 8, 14, 0.68);
    background-image: linear-gradient(135deg, rgba(200,200,220,0.06) 0%, rgba(20,60,100,0.04) 30%, transparent 60%, rgba(92,232,154,0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px) saturate(1.8);
    overflow: hidden;
    transition: all 350ms var(--ease-smooth);
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2), var(--glass-inset-glow);
    position: relative;
}

/* Glass card — no gradient border pseudo */
.card::before { display: none; }

.card:hover {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(92, 232, 154, 0.06), var(--glass-inset-glow);
    transform: translateY(-3px) scale(1.008);
}

/* 3D perspective parent */
.stats-row,
.grid-2col,
.social-grid,
.cd-grid {
    perspective: 1200px;
}

.card-full {
    margin-bottom: 18px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.card-title-group h2 {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.card-title-group svg {
    color: var(--text-secondary);
}

/* ================ SOCIAL MEDIA HUB ================ */
.social-hub {
    background: linear-gradient(135deg, rgba(20, 16, 8, 0.5), rgba(15, 12, 6, 0.5));
    border: none;
}

.section-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-style: italic;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 16px;
}

.social-card {
    background: rgba(6, 8, 14, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), var(--glass-inset-glow);
    transition: all 300ms var(--ease-smooth);
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(20px) saturate(1.6);
    min-height: 120px;
}

.social-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(10, 14, 22, 0.72);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(92, 232, 154, 0.08);
}

.social-card.connected {
    border-color: color-mix(in srgb, var(--platform-color, rgba(198, 166, 100)) 45%, transparent);
    background: color-mix(in srgb, var(--platform-color, rgba(198, 166, 100)) 10%, rgba(10, 14, 20, 0.65));
    box-shadow: 0 4px 24px color-mix(in srgb, var(--platform-color, rgba(198, 166, 100)) 18%, transparent), 0 0 40px color-mix(in srgb, var(--platform-color, rgba(198, 166, 100)) 8%, transparent);
}

.social-card.connecting {
    border-color: rgba(92, 232, 154, 0.4);
}

.social-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--platform-color) 15%, transparent);
    color: var(--platform-color);
    flex-shrink: 0;
    transition: all var(--transition);
}

.social-card.connected .social-icon-wrap {
    background: color-mix(in srgb, var(--platform-color) 25%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--platform-color) 20%, transparent);
}

.social-info {
    flex: 1;
    min-width: 0;
}

.social-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.social-status {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
}

.social-status.status-connected {
    color: var(--accent-cyan);
}

.social-status.status-connecting {
    color: var(--accent-gold-light);
    animation: blink 1.5s ease-in-out infinite;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-track {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    transition: all 0.3s var(--ease-smooth);
    position: relative;
    backdrop-filter: var(--glass-blur-light);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.35s var(--ease-spring);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked+.toggle-track {
    background: linear-gradient(135deg, var(--accent-cyan-dark), var(--accent-cyan));
    border-color: var(--accent-cyan);
    box-shadow: 0 0 16px rgba(92, 232, 154, 0.25);
}

.toggle-switch input:checked+.toggle-track .toggle-thumb {
    left: 23px;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 12px rgba(92, 232, 154, 0.2);
}

/* Active toggle pulse glow */
.toggle-switch input:checked+.toggle-track::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 0 8px rgba(92, 232, 154, 0.15);
    animation: toggleGlowPulse 2s ease-in-out infinite;
}

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

.toggle-switch input:disabled+.toggle-track {
    opacity: 0.4;
    cursor: not-allowed;
}

.social-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(92, 232, 154, 0.08);
    border: none;
    border-radius: 6px;
    color: var(--accent-gold);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.social-connect-btn:hover {
    background: rgba(92, 232, 154, 0.15);
    border-color: rgba(92, 232, 154, 0.35);
    transform: translateY(-1px);
}

.social-connect-btn.btn-connected {
    background: rgba(92, 232, 154, 0.1);
    border-color: rgba(92, 232, 154, 0.25);
    color: var(--accent-gold);
    cursor: default;
}

.social-connect-btn.btn-connected:hover {
    transform: none;
}

.social-connect-btn.btn-disconnect {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    margin-top: 6px;
}

.social-connect-btn.btn-disconnect:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
}

.connect-icon {
    font-size: var(--text-base);
}

/* ================ GOOGLE SHEETS ================ */
.sheets-tabs {
    display: flex;
    gap: 6px;
}

.tab {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.06);
}

.tab.active {
    background: rgba(92, 232, 154, 0.12);
    border-color: rgba(92, 232, 154, 0.18);
    color: var(--silver-light);
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.08);
}

.sheets-content {
    min-height: 200px;
    overflow-x: auto;
}

.sheets-table {
    width: 100%;
    border-collapse: collapse;
}

.sheets-table thead {
    background: rgba(10, 10, 20, 0.5);
    position: sticky;
    top: 0;
}

.sheets-table th {
    padding: 10px 16px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    text-align: left;
    border-bottom: none;
    white-space: nowrap;
}

.sheets-table td {
    padding: 10px 16px;
    font-size: var(--text-sm);
    border-bottom: none;
    color: var(--text-secondary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheets-table tbody tr {
    transition: background var(--transition);
}

.sheets-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.sheets-table td.cell-expand {
    white-space: normal;
    word-break: break-word;
    max-width: none;
}

.sheets-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.sheets-empty {
    text-align: center;
    padding: 48px;
    color: var(--text-tertiary);
    font-style: italic;
}

/* ================ DATA MANAGER ================ */
.data-manager-content {
    min-height: 200px;
}

.data-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: none;
}

.data-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.data-table-wrap {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: rgba(12, 10, 6, 0.8);
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: blur(8px);
}

.data-table th {
    padding: 12px 16px;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-gold);
    text-align: left;
    border-bottom: none;
    white-space: nowrap;
    opacity: 0.8;
}

.data-table th:last-child {
    width: 60px;
    text-align: center;
}

.data-table td {
    padding: 6px 16px;
    font-size: var(--text-sm);
    border-bottom: none;
    color: var(--text-secondary);
    vertical-align: top;
}

.data-table tbody tr {
    transition: all 200ms var(--ease-smooth);
}

.data-table tbody tr:nth-child(even) {
    background: rgba(92, 232, 154, 0.03);
}

.data-table tbody tr:hover {
    background: rgba(92, 232, 154, 0.08);
    border-left: 3px solid var(--accent-gold);
}

.data-table textarea.data-cell-input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color var(--transition);
}

.data-table textarea.data-cell-input:focus {
    border-color: var(--accent-gold);
}

.data-row-delete {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all var(--transition);
    font-size: 1rem;
    line-height: 1;
}

.data-row-delete:hover {
    background: rgba(244, 63, 94, 0.2);
    color: var(--accent-red);
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ================ CREATIVE DIRECTOR AGENT ================ */
#agentSection {
    background: linear-gradient(135deg, rgba(20, 16, 8, 0.5), rgba(15, 12, 6, 0.5));
    border: none;
}

#agentSection:hover {
    border-color: rgba(92, 232, 154, 0.22);
}

.agent-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(92, 232, 154, 0.1);
    border: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-gold);
}

.agent-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 0 8px var(--accent-gold);
    animation: blink 2s ease-in-out infinite;
}

.agent-info-bar {
    padding: 12px 20px;
    border-bottom: none;
    background: rgba(92, 232, 154, 0.04);
}

.agent-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.agent-info-item svg {
    color: var(--accent-gold);
    flex-shrink: 0;
}

.agent-prompt-section {
    padding: 0;
}

.agent-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: none;
}

.agent-prompt-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-prompt-actions {
    display: flex;
    gap: 8px;
}

.btn-outline {
    background: transparent;
    border: none;
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.agent-prompt-editor {
    min-height: 220px;
    border-top: none;
    background: rgba(10, 10, 20, 0.4);
    font-size: var(--text-sm);
    line-height: 1.65;
}

.agent-prompt-editor:focus {
    background: rgba(10, 10, 20, 0.7);
}

.agent-output-preview {
    border-top: none;
}

.agent-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: none;
}

.agent-output-box {
    padding: 20px;
    min-height: 100px;
}

.agent-output-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-style: italic;
}

.agent-output-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.agent-output-result {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-output-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: rgba(92, 232, 154, 0.06);
    border: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.agent-output-field:hover {
    background: rgba(92, 232, 154, 0.1);
    border-color: rgba(92, 232, 154, 0.2);
}

.agent-field-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-gold);
}

.agent-field-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

.spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

/* ================ PROMPT EDITOR ================ */
.prompt-editor {
    width: 100%;
    min-height: 180px;
    padding: 16px 20px;
    background: var(--glass-bg-recessed);
    border: none;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    resize: vertical;
    outline: none;
    transition: background var(--transition);
}

.prompt-editor:focus {
    background: rgba(15, 15, 30, 0.8);
}

.prompt-editor-sm {
    min-height: 80px;
}

.prompt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: none;
}

.char-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.prompt-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-style: italic;
}

/* ================ SETTINGS ================ */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 18px;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.setting-item.full-width {
    grid-column: 1 / -1;
}

.setting-item label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.input-select,
.input-text,
.input-time,
.cc-select {
    padding: 11px 16px;
    background: var(--glass-bg-recessed);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    outline: none;
    transition: all 250ms var(--ease-smooth);
    width: 100%;
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

.input-select:focus,
.input-text:focus,
.input-time:focus,
.cc-select:focus {
    border-color: rgba(92, 232, 154, 0.35);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 3px rgba(92,232,154,0.2);
}

/* Custom select arrow */
.input-select,
.cc-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(92,232,154,0.8)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 34px;
}

/* Placeholder styling */
.input-text::placeholder,
.cc-prompt-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    opacity: 1;
}

/* Setting labels above inputs */
.setting-item label,
.modal-input-group label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.input-select:focus,
.input-text:focus,
.input-time:focus {
    border-color: rgba(92, 232, 154, 0.40);
    box-shadow: 0 0 0 3px rgba(92, 232, 154, 0.2), 0 0 24px rgba(92, 232, 154, 0.08);
}

textarea.input-text {
    resize: vertical;
    font-family: var(--font-sans);
    line-height: 1.5;
}

/* ================ SCHEDULE ================ */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 18px;
}

.schedule-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.schedule-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.input-time {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 500;
}

/* ================ REF IMAGE ================ */
.image-preview-container {
    padding: 16px 20px 0;
    display: flex;
    justify-content: center;
}

.ref-image {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 2px solid var(--border);
    transition: all var(--transition);
}

.ref-image:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 0 24px rgba(92, 232, 154, 0.2);
    transform: scale(1.02);
}

/* ================ CREDENTIALS ================ */
.creds-list {
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cred-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--glass-bg-recessed);
    border-radius: var(--radius-sm);
    border: none;
    transition: all var(--transition);
}

.cred-item:hover {
    background: var(--bg-card-hover);
}

.cred-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cred-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.cred-name {
    font-size: var(--text-sm);
    font-weight: 500;
}

.cred-type {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.cred-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 500;
}

.cred-status.connected {
    color: var(--accent-gold);
}

.cred-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-gold);
}

/* ================ EXECUTION TABLE ================ */
.table-container {
    overflow-x: auto;
}

.exec-table {
    width: 100%;
    border-collapse: collapse;
}

.exec-table thead {
    background: rgba(10, 10, 20, 0.5);
}

.exec-table th {
    padding: 8px 16px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-align: left;
    border-bottom: none;
}

.exec-table td {
    padding: 10px 16px;
    font-size: var(--text-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
}

.exec-table tbody tr:last-child td {
    border-bottom: none;
}

.exec-table tbody tr {
    transition: background var(--transition);
}

.exec-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.exec-table .empty-row td {
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary);
    font-style: italic;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-pill.success {
    background: rgba(92, 232, 154, 0.12);
    color: var(--accent-gold);
}

.status-pill.error {
    background: rgba(244, 63, 94, 0.15);
    color: var(--accent-red);
}

.status-pill.running {
    background: rgba(92, 232, 154, 0.12);
    color: var(--accent-gold);
}

.status-pill.waiting {
    background: rgba(45, 183, 48, 0.12);
    color: var(--accent-gold-light);
}

/* ================ MODALS ================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 200ms ease-out;
}

.modal-overlay.visible {
    display: flex;
}

.modal {
    background: var(--glass-bg-overlay);
    border: none;
    border-radius: var(--radius-xl);
    min-width: 400px;
    max-width: 500px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), var(--glass-inset-glow);
    animation: modalScaleIn 300ms var(--ease-cinematic);
    backdrop-filter: var(--glass-blur-heavy);
}

.modal-lg {
    min-width: 520px;
    max-width: 600px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: none;
    background: linear-gradient(180deg, rgba(92,232,154,0.04), transparent);
}

.modal-header h3 {
    font-size: var(--text-md);
    font-weight: 700;
    font-family: var(--font-heading);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-tertiary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 250ms var(--ease-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.modal-close:hover {
    background: rgba(244, 63, 94, 0.15);
    color: var(--accent-red);
}

.modal-body {
    padding: 24px;
    text-align: center;
}

.modal-body p {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-top: 12px;
    line-height: 1.6;
}

.modal-spinner {
    display: flex;
    justify-content: center;
}

.modal-spinner .spinner {
    width: 32px;
    height: 32px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: linear-gradient(0deg, rgba(92,232,154,0.03), transparent);
}

.modal-steps {
    text-align: left;
    margin-top: 16px;
}

.modal-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.modal-step-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.modal-step-icon.done {
    background: rgba(92, 232, 154, 0.15);
    color: var(--accent-gold);
}

.modal-step-icon.current {
    background: rgba(45, 183, 48, 0.15);
    color: var(--accent-gold-light);
    animation: blink 1s ease-in-out infinite;
}

.modal-step-icon.pending {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
}

.modal-input-group {
    margin: 16px 0;
    text-align: left;
}

.modal-input-group label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.modal-input-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    outline: none;
}

.modal-input-group input:focus {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ================ TOAST ================ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--glass-bg-elevated);
    border: none;
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-inset-glow);
    animation: toastSlideIn 0.35s var(--ease-cinematic);
    min-width: 300px;
    font-size: var(--text-sm);
    will-change: transform;
}

.toast.success {
    border-left: 4px solid var(--accent-cyan);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(92, 232, 154, 0.1);
}

.toast.error {
    border-left: 4px solid var(--accent-red);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(244, 63, 94, 0.1);
}

.toast.info {
    border-left: 4px solid var(--accent-gold);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(92, 232, 154, 0.08);
}

.toast.warning {
    border-left: 4px solid var(--accent-amber);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(245, 158, 11, 0.08);
}

/* old slideIn/slideOut replaced by toastSlideIn/toastSlideOut below */

/* ================ PIPELINE PROGRESS TRACKER ================ */
.pipeline-tracker {
    overflow: hidden;
    position: relative;
}

.pipeline-tracker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), var(--accent-gold-light), var(--accent-gold), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.pipeline-tracker.active::before {
    opacity: 1;
    animation: scanLine 3s linear infinite;
}

@keyframes scanLine {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.pipeline-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pipeline-elapsed {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: rgba(92, 232, 154, 0.08);
    border: none;
    border-radius: 8px;
}

.pipeline-elapsed svg {
    color: var(--accent-gold);
}

/* Stop Button */
.btn-stop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(244, 63, 94, 0.15);
    border: none;
    color: var(--accent-red);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-stop:hover {
    background: rgba(244, 63, 94, 0.25);
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow: 0 0 16px rgba(244, 63, 94, 0.2);
    transform: translateY(-1px);
}

.btn-stop:active {
    transform: translateY(0);
}

.btn-stop:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pipeline-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    color: var(--text-tertiary);
    transition: all 0.4s ease;
}

.pipeline-status-badge.running {
    background: rgba(92, 232, 154, 0.12);
    border-color: rgba(92, 232, 154, 0.25);
    color: var(--accent-gold);
}

.pipeline-status-badge.success {
    background: rgba(92, 232, 154, 0.15);
    border-color: rgba(92, 232, 154, 0.3);
    color: var(--accent-gold-light);
}

.pipeline-status-badge.error {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.25);
    color: var(--accent-red);
}

.pipeline-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    transition: all 0.4s;
}

.pipeline-status-badge.running .pipeline-status-dot {
    animation: blink 1s ease-in-out infinite;
    box-shadow: 0 0 8px currentColor;
}

/* Progress Bar */
.pipeline-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 16px;
}

.pipeline-progress-bg {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.pipeline-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-gold-dark), var(--accent-gold), var(--accent-gold-light));
    transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    position: relative;
    z-index: 1;
}

.pipeline-progress-fill.error {
    background: linear-gradient(90deg, var(--accent-gold-dark), #a08040);
}

.pipeline-progress-fill.complete {
    background: linear-gradient(90deg, var(--accent-gold-dark), var(--accent-gold), var(--accent-gold-light));
}

.pipeline-progress-glow {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 80%, rgba(92, 232, 154, 0.6));
    filter: blur(4px);
    transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}

.pipeline-progress-pct {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-gold);
    min-width: 36px;
    text-align: right;
}

/* Pipeline Stages */
.pipeline-stages {
    display: flex;
    align-items: flex-start;
    padding: 8px 20px 20px;
    gap: 0;
    overflow-x: auto;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 100px;
    position: relative;
    transition: all 0.4s ease;
}

.stage-icon-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.stage-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    color: var(--text-tertiary);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin: 0 auto;
}

.stage-connector {
    position: absolute;
    top: 50%;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-50%);
    z-index: 1;
    transition: all 0.4s ease;
}

.pipeline-stage:last-child .stage-connector {
    display: none;
}

.stage-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    text-align: center;
}

.stage-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    transition: color 0.4s;
}

.stage-detail {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    transition: color 0.4s;
}

/* Stage States */
.pipeline-stage.pending .stage-icon {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-tertiary);
}

.pipeline-stage.running .stage-icon {
    background: rgba(92, 232, 154, 0.15);
    border-color: rgba(92, 232, 154, 0.4);
    color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(92, 232, 154, 0.3), inset 0 0 12px rgba(92, 232, 154, 0.1);
    animation: stagePulse 2s ease-in-out infinite;
}

.pipeline-stage.running .stage-name {
    color: var(--accent-gold);
}

.pipeline-stage.running .stage-detail {
    color: var(--accent-gold);
}

@keyframes stagePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
}

.pipeline-stage.success .stage-icon {
    background: rgba(45, 183, 48, 0.15);
    border-color: rgba(45, 183, 48, 0.4);
    color: var(--accent-gold-light);
    box-shadow: 0 0 12px rgba(45, 183, 48, 0.2);
}

.pipeline-stage.success .stage-name {
    color: var(--accent-gold-light);
}

.pipeline-stage.success .stage-connector {
    background: linear-gradient(90deg, rgba(92, 232, 154, 0.5), rgba(92, 232, 154, 0.1));
}

.pipeline-stage.error .stage-icon {
    background: rgba(244, 63, 94, 0.2);
    border-color: rgba(244, 63, 94, 0.5);
    color: var(--accent-red);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.2);
    animation: stageError 0.5s ease-out;
}

.pipeline-stage.error .stage-name {
    color: var(--accent-red);
}

@keyframes stageError {

    0%,
    50%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* Content Moderation Alert */
.pipeline-content-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 20px 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.08), rgba(101, 163, 13, 0.06));
    border: none;
    border-radius: 10px;
    animation: slideDown 0.3s ease-out, contentAlertPulse 3s ease-in-out infinite;
}

@keyframes contentAlertPulse {
    0%, 100% { border-color: rgba(92, 232, 154, 0.25); }
    50% { border-color: rgba(101, 163, 13, 0.4); }
}

.content-alert-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(101, 163, 13, 0.25), rgba(92, 232, 154, 0.15));
    border: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
    color: var(--accent-gold-dark);
    letter-spacing: -0.02em;
}

.content-alert-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.content-alert-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-gold);
}

.content-alert-detail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.content-alert-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.content-alert-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.content-alert-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--accent-gold);
}

.content-alert-stat-label {
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Resolved state — gold */
.pipeline-content-alert.resolved {
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.08), rgba(92, 232, 154, 0.04));
    border-color: rgba(92, 232, 154, 0.25);
    animation: none;
}

.pipeline-content-alert.resolved .content-alert-badge {
    background: rgba(92, 232, 154, 0.15);
    border-color: rgba(92, 232, 154, 0.3);
    color: var(--accent-gold);
}

.pipeline-content-alert.resolved .content-alert-title {
    color: var(--accent-gold);
}

.pipeline-content-alert.resolved .content-alert-stat-value {
    color: var(--accent-gold);
}

/* Error Banner */
.pipeline-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px 16px;
    padding: 10px 16px;
    background: rgba(101, 163, 13, 0.1);
    border: none;
    border-radius: 8px;
    color: var(--accent-gold-dark);
    font-size: var(--text-sm);
    font-weight: 500;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* ================ CREATIVE DIRECTOR CONFIG PANEL ================ */
.cd-panel {
    background: linear-gradient(135deg, rgba(20, 16, 8, 0.5), rgba(15, 12, 6, 0.5));
    border: none;
}

.cd-panel:hover {
    border-color: rgba(92, 232, 154, 0.22);
}

.cd-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Config Tabs */
.cd-tabs {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: none;
}

.cd-tab {
    position: relative;
    padding: 10px 20px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.cd-tab:hover {
    color: var(--text-primary);
    background: rgba(92, 232, 154, 0.05);
}

.cd-tab.active {
    color: var(--accent-gold);
    border-bottom-color: var(--accent-gold);
}

.cd-tab-rename-input {
    background: var(--glass-bg-recessed);
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 0 4px;
    width: 100px;
    border-radius: 4px;
    outline: none;
}

.cd-status {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-style: italic;
}

.cd-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
}

.cd-col {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cd-col:first-child {
    border-right: none;
}

.cd-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cd-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 8px 0;
}

.cd-textarea {
    min-height: 140px;
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.cd-textarea-sm {
    min-height: 70px;
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.cd-ref-image-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cd-ref-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.cd-ref-image-row .input-text {
    flex: 1;
}

.cd-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
}

.cd-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.cd-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.cd-list-item input {
    flex: 1;
    padding: 8px 12px;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition);
}

.cd-list-item input:focus {
    border-color: var(--accent-gold);
}

.cd-list-item .cd-delete-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all var(--transition);
    font-size: var(--text-sm);
    line-height: 1;
    flex-shrink: 0;
}

.cd-list-item .cd-delete-btn:hover {
    background: rgba(244, 63, 94, 0.2);
    color: var(--accent-red);
}

.cd-list-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-tertiary);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* Prompt pool textarea items (taller for long prompts) */
.cd-list-item-tall {
    align-items: flex-start;
}

.cd-prompt-textarea {
    flex: 1;
    padding: 8px 12px;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.45;
    outline: none;
    transition: border-color var(--transition);
    resize: vertical;
    min-height: 64px;
    max-height: 200px;
}

.cd-prompt-textarea:focus {
    border-color: var(--accent-gold);
}

/* Variations section */
.cd-variations {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-variation-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-variation-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    width: 130px;
    flex-shrink: 0;
}

.cd-variation-input {
    flex: 1;
    padding: 7px 12px;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition);
}

.cd-variation-input:focus {
    border-color: var(--accent-gold);
}


/* ==================== EXTRACTED INLINE STYLES ==================== */

/* Assets bulk action bar */
.assets-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-bottom: 0;
  background: none;
  border-radius: 0;
  border: none;
}

.assets-bulk-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Director character strip */
.dir-char-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  overflow-x: auto;
}

/* Social circles row */
.social-circles-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  gap: 6px;
}

/* Schedule config label */
.schedule-config-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  accent-color: var(--accent-primary-light, #5ce89a);
}

/* Onboarding skip button hover */
.onboarding-skip-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.onboarding-skip-btn:hover {
  color: var(--text-secondary);
  background: var(--depth-surface);
}

/* Director character strip - additional */
.dir-char-strip-cards {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dir-char-strip-add {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px dashed var(--border-gold);
  background: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
}

.dir-char-strip-add:hover {
  border-color: var(--accent-primary-light);
  color: var(--text-secondary);
}

/* Schedule config label options */
.schedule-config-label-option {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.schedule-config-label-option input[type="radio"] {
  accent-color: var(--accent-primary-light, #5ce89a);
}

.schedule-config-label-option--alt input[type="radio"] {
  accent-color: var(--accent-primary, #5ce89a);
}

/* ================ RESPONSIVE ================ */
@media (max-width: 1200px) {
    .social-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2col {
        grid-template-columns: 1fr;
    }

    .cd-grid {
        grid-template-columns: 1fr;
    }

    .cd-col:first-child {
        border-right: none;
        border-bottom: none;
    }

    .header {
        padding: 14px 20px;
    }

    .main {
        padding: 20px;
    }

    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .header {
        flex-direction: column;
        gap: 12px;
    }

    .header-right {
        width: 100%;
        justify-content: flex-end;
    }

    .social-grid {
        grid-template-columns: 1fr;
    }
}

/* ================ ASSETS GALLERY ================ */
.assets-gallery .card-header {
    flex-wrap: wrap;
    gap: 12px;
}

.assets-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.assets-filter-tabs {
    display: flex;
    gap: 2px;
    background: var(--glass-bg-recessed);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.assets-tab {
    padding: 5px 14px;
    font-size: var(--text-xs);
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition);
}

.assets-tab:hover {
    color: var(--text-primary);
}

.assets-tab.active {
    background: var(--accent-gold);
    color: #000;
}

.assets-count {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.assets-grid {
    display: grid;
    grid-template-columns: repeat(var(--assets-cols, 4), 1fr);
    gap: 12px;
    margin-top: 4px;
    padding: 12px 16px 16px;
}

@media (max-width: 800px) {
    .assets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .assets-grid { grid-template-columns: 1fr; }
}

.assets-size-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.35);
}
.assets-size-control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 3px;
    background: rgba(92, 232, 154, 0.18);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.assets-size-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5ce89a;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(92, 232, 154, 0.5);
    border: 2px solid rgba(0, 0, 0, 0.6);
}
.assets-size-control input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5ce89a;
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0.6);
}
.assets-size-control:hover { color: rgba(92, 232, 154, 0.7); }

.assets-grid.collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.assets-empty {
    column-span: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 24px;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    text-align: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(92, 232, 154, 0.04) 0%, transparent 70%);
    border-radius: 16px;
    border: 1px dashed rgba(92, 232, 154, 0.1);
}

.asset-card {
    background: var(--glass-bg-recessed);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
    cursor: pointer;
    break-inside: avoid;
    margin-bottom: 12px;
    display: inline-block;
    width: 100%;
    contain: layout paint;
    /* Native browser-level virtualization — skip rendering cards that aren't near the viewport */
    content-visibility: auto;
    contain-intrinsic-size: 300px 300px;
}

.asset-card:hover {
    border-color: rgba(92, 232, 154, 0.3);
    box-shadow: 0 8px 28px rgba(92, 232, 154, 0.15), 0 2px 8px rgba(0,0,0,0.3);
}
.asset-card.asset-selected {
    outline: 2px solid #38bd94;
    outline-offset: -2px;
}

.asset-card:hover .asset-thumb img {
    transform: none;
    transition: none;
}

.asset-thumb img,
.asset-thumb video {
    transition: transform 0.4s ease;
}

.asset-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

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

.asset-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    backdrop-filter: blur(8px);
}

.asset-type-badge.image {
    background: rgba(45, 183, 48, 0.2);
    color: var(--accent-gold-light);
    border: none;
}

.asset-type-badge.video {
    background: rgba(101, 163, 13, 0.25);
    color: var(--accent-gold);
    border: none;
}

.asset-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0.8;
    transition: var(--transition);
}

.asset-card:hover .asset-play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.asset-meta {
    padding: 6px 8px;
    font-size: var(--text-xs);
}

.asset-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asset-exec-id {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--accent-gold);
    font-weight: 500;
}

.asset-size {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.asset-date {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.asset-prompt {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Asset lightbox */
.asset-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.asset-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.asset-lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.asset-lightbox-content img,
.asset-lightbox-content video {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

.asset-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.asset-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ================ SCROLLBAR ================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(210, 210, 230, 0.08);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(210, 210, 230, 0.18);
}

::selection {
    background: rgba(92, 232, 154, 0.3);
    color: #fff;
}

/* ================ TELEGRAM HUB ================ */
.telegram-hub .card-header {
    margin-bottom: 4px;
}

.telegram-section {
    padding: 10px 16px;
    border-top: none;
}

.telegram-section:first-of-type {
    border-top: none;
}

.section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.telegram-prompt-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.telegram-prompt-input {
    flex: 1;
    resize: vertical;
    min-height: 38px;
    font-size: var(--text-sm);
}

.btn-trigger-prompt {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 8px 14px;
    height: fit-content;
}

.telegram-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.telegram-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.telegram-toggle-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.telegram-toggle-desc {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* (duplicate .toggle-switch removed — standardized on .toggle-track/.toggle-thumb above) */

/* (duplicate .reveal-up removed — canonical version at end of file) */

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.revealed {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 80ms; }
.stagger-3 { transition-delay: 160ms; }
.stagger-4 { transition-delay: 240ms; }
.stagger-5 { transition-delay: 320ms; }
.stagger-6 { transition-delay: 400ms; }

/* ================ GOLD SHIMMER EFFECTS ================ */
@keyframes goldShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.shimmer-on-hover {
    position: relative;
    overflow: hidden;
}

.shimmer-on-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 35%,
        rgba(92, 232, 154, 0.04) 45%,
        rgba(45, 183, 48, 0.06) 50%,
        rgba(92, 232, 154, 0.04) 55%,
        transparent 65%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

.shimmer-on-hover:hover::before {
    opacity: 1;
    animation: goldShimmer 2s ease-in-out;
}

.shimmer-persistent::before {
    opacity: 1 !important;
    animation: goldShimmer 4s ease-in-out infinite !important;
}

/* ================ TEXT REVEAL ANIMATIONS ================ */
.text-reveal {
    clip-path: inset(0 100% 0 0);
    animation: textRevealClip 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes textRevealClip {
    to { clip-path: inset(0 0 0 0); }
}

.text-gradient-shift {
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold), #fff, var(--accent-gold-light));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease-in-out infinite;
}

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

/* Section title underline sweep */
.section-title-reveal {
    position: relative;
    display: inline-block;
}

.section-title-reveal::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light), transparent);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.revealed .section-title-reveal::after,
.section-title-reveal:hover::after {
    width: 100%;
}

/* ================ 3D CARD TILT ================ */
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

.card-3d .card-header,
.card-3d .stat-info,
.card-3d .stat-icon {
    transform: translateZ(20px);
}

/* ================ BUTTON RIPPLE ================ */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(92, 232, 154, 0.3);
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleExpand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ================ STAT COUNTER ANIMATION ================ */

.stat-counting {
    animation: countPulse 0.1s ease-in-out;
}

@keyframes countPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ================ MUSIC POOL POLISH ================ */
.cd-list-item[data-music-id] {
    background: rgba(8, 8, 14, 0.5);
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 12px !important;
    transition: all var(--transition);
}

.cd-list-item[data-music-id]:hover {
    border-color: rgba(92, 232, 154, 0.15);
    background: rgba(12, 12, 20, 0.6);
}

/* Music waveform decoration */
.cd-list-item[data-music-id]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(92, 232, 154, 0.1) 0%,
        rgba(92, 232, 154, 0.3) 25%,
        rgba(92, 232, 154, 0.1) 50%,
        rgba(92, 232, 154, 0.25) 75%,
        rgba(92, 232, 154, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.3s;
}

.cd-list-item[data-music-id]:hover::before {
    opacity: 1;
}

/* Pin button glow when active */
.cd-list-item .btn-save {
    box-shadow: 0 0 8px rgba(92, 232, 154, 0.3);
}

/* Upload button gold border */
#musicUploadInput + label,
.cd-list-header .btn-outline {
    border-style: dashed;
}

/* ================ LIGHTBOX ENHANCEMENT ================ */
.asset-lightbox {
    background: rgba(0, 0, 0, 0.95);
}

.asset-lightbox.active {
    animation: lightboxFadeIn 0.3s ease-out;
}

@keyframes lightboxFadeIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(8px); }
}

.asset-lightbox-content {
    border: none;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
}

.lightbox-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 95vw;
}

.lightbox-media {
    flex-shrink: 0;
}

.lightbox-media img,
.lightbox-media video {
    max-width: 55vw;
    max-height: 75vh;
    border-radius: 12px;
}

.lightbox-details {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    max-height: 75vh;
    overflow-y: auto;
    padding: 4px 0;
}

.lightbox-detail-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: none;
}

.lightbox-prompt-section {
    margin-bottom: 16px;
}

.lightbox-prompt-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-gold);
    margin-bottom: 6px;
}

.lightbox-prompt-text {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary, #a0a0a0);
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 8px;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

@media (max-width: 900px) {
    .lightbox-layout {
        flex-direction: column;
        align-items: center;
    }
    .lightbox-media img,
    .lightbox-media video {
        max-width: 90vw;
    }
    .lightbox-details {
        max-width: 90vw;
        max-height: none;
    }
}

/* (duplicate .toast merged into canonical definition above) */

/* Toast exit animation */
.toast-exit {
    animation: toastSlideOut 0.25s var(--ease-smooth) forwards !important;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
        filter: blur(4px);
    }
}

/* ================ MODAL ENHANCEMENT ================ */
.modal {
    background: rgba(8, 8, 14, 0.98);
    border: none;
}

/* ================ PIPELINE STAGE 3D FLIP ================ */
.pipeline-stage.success .stage-icon {
    animation: stageFlipComplete 0.6s ease-out;
}

@keyframes stageFlipComplete {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

/* Stage connection lines animated dash */
.pipeline-tracker.active .stage-connector {
    background: linear-gradient(90deg, rgba(92, 232, 154, 0.3), rgba(92, 232, 154, 0.1));
    background-size: 10px 2px;
    animation: dashFlow 1s linear infinite;
}

@keyframes dashFlow {
    from { background-position: 0 0; }
    to { background-position: 10px 0; }
}

/* Error glitch effect */
.pipeline-stage.error .stage-icon {
    animation: glitchShake 0.5s ease-out;
}

@keyframes glitchShake {
    0%, 100% { transform: translate(0); filter: none; }
    10% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
    20% { transform: translate(2px, -1px); }
    30% { transform: translate(-1px, -2px); filter: hue-rotate(-90deg); }
    40% { transform: translate(1px, 2px); }
    50% { transform: translate(-2px, -1px); filter: none; }
}

/* ================ SAVE BUTTON PARTICLE BURST ================ */
@keyframes saveBurst {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.08); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.btn-save.saved-flash {
    animation: saveBurst 0.6s ease-out;
}

/* ================ FILTER TABS UNDERLINE SLIDE ================ */
.assets-filter-tabs {
    position: relative;
}

.assets-tab {
    position: relative;
    transition: color 0.3s, background 0.3s;
}

/* ================ USER MENU ================ */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-card);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    transition: border-color var(--transition);
}

.user-menu-trigger:hover {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(92, 232, 154, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
}

.user-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-plan-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plan-starter, .plan-free {
    background: rgba(92, 232, 154, 0.2);
    color: var(--accent-gold);
    border: none;
}

.plan-creator {
    background: rgba(92, 232, 154, 0.15);
    color: var(--accent-cyan);
    border: none;
}

.plan-pro {
    background: rgba(92, 232, 154, 0.25);
    color: var(--accent-cyan);
    border: none;
}

.plan-premium, .plan-business {
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.2), rgba(92, 232, 154, 0.15));
    color: var(--accent-gold-light);
    border: none;
}

.plan-enterprise {
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.25), rgba(92, 232, 154, 0.2));
    color: var(--accent-gold-light);
    border: 1px solid rgba(218, 165, 32, 0.3);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--bg-glass);
    border: none;
    border-radius: var(--radius-md);
    backdrop-filter: blur(24px) saturate(1.6);
    padding: 8px;
    z-index: 100;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: all 0.25s var(--ease-cinematic);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

.user-menu.open .user-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-dropdown-header {
    padding: 8px 10px;
    border-bottom: none;
    margin-bottom: 4px;
}

.user-dropdown-email {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-runs {
    display: block;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--accent-gold);
    margin-top: 2px;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
}

.user-dropdown-item:hover {
    background: rgba(92, 232, 154, 0.1);
    color: var(--text-primary);
}

/* ================ UPGRADE MODAL ================ */
.upgrade-plans {
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

.upgrade-plan-card {
    flex: 1;
    padding: 16px;
    border: none;
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color var(--transition);
}

.upgrade-plan-card:hover {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}

.upgrade-plan-card.current {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.05);
}

.upgrade-plan-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: 4px;
}

.upgrade-plan-price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 2px;
}

.upgrade-plan-price span {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-secondary);
}

.upgrade-plan-runs {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-bottom: 12px;
}

/* ================ RESPONSIVE UPDATES ================ */
@media (max-width: 640px) {
    .header-title {
        font-size: 1.1rem;
    }

    .header-subtitle {
        font-size: var(--text-2xs);
    }

    .user-name {
        display: none;
    }

    .upgrade-plans {
        flex-direction: column;
    }
}

/* =====================================================
   iPHONE MODE STYLES
   ===================================================== */

.iphone-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.iphone-overlay.active {
    display: flex;
}
.iphone-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}
.iphone-frame {
    position: relative;
    width: 393px;
    height: 852px;
    background: #0a0a0c;
    border-radius: 50px;
    border: 3px solid #3a3a40;
    box-shadow: 0 0 0 6px #222226, 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(92, 232, 154, 0.05), inset 0 0 30px rgba(92,232,154,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.iphone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 126px;
    height: 34px;
    background: #0a0a0c;
    border-radius: 0 0 20px 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iphone-notch-inner {
    width: 100px;
    height: 28px;
    background: #000;
    border-radius: 0 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iphone-camera {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a1a2e;
    border: none;
}
.iphone-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 28px 4px;
    height: 44px;
    flex-shrink: 0;
    z-index: 5;
}
.iphone-time {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 17px;
    color: #fff;
}
.iphone-status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}
.iphone-battery {
    width: 24px;
    height: 11px;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 3px;
    position: relative;
    padding: 1px;
}
.iphone-battery::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 2.5px;
    width: 2px;
    height: 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 0 1px 1px 0;
}
.iphone-battery-fill {
    width: 80%;
    height: 100%;
    background: #34c759;
    border-radius: 1.5px;
}

/* Screens Viewport */
.iphone-screens-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.iphone-screens {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.iphone-screen {
    width: 25%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px 16px;
    scrollbar-width: none;
}
.iphone-screen::-webkit-scrollbar {
    display: none;
}
.iphone-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 4px;
}
.iphone-screen-header h2 {
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* Tab Bar */
.iphone-tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    background: rgba(10, 10, 14, 0.92);
    backdrop-filter: blur(16px) saturate(1.4);
    border-top: none;
    flex-shrink: 0;
    padding: 0 8px;
}
.iphone-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: color 0.2s;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 500;
}
.iphone-tab.active {
    color: var(--accent-gold);
}
.iphone-tab:hover {
    color: rgba(255,255,255,0.7);
}
.iphone-tab.active:hover {
    color: var(--accent-gold-light);
}

/* Home Indicator */
.iphone-home-indicator {
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iphone-home-indicator::after {
    content: '';
    width: 134px;
    height: 5px;
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
}

/* iPhone UI Components */
.iphone-btn {
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    background: rgba(92,232,154,0.08);
    color: var(--accent-gold-light);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.iphone-btn:hover {
    background: rgba(92,232,154,0.15);
    border-color: rgba(92,232,154,0.4);
}
.iphone-btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
    color: #000;
    border-color: transparent;
    font-weight: 600;
}
.iphone-btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-gold-light), #b8923e);
}
.iphone-btn-danger {
    border-color: rgba(244,63,94,0.3);
    color: #f43f5e;
    background: rgba(244,63,94,0.08);
}
.iphone-btn-danger:hover {
    background: rgba(244,63,94,0.15);
}
.iphone-btn-sm {
    padding: 6px 14px;
    border-radius: 10px;
    border: none;
    background: rgba(92,232,154,0.06);
    color: var(--accent-gold);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans, 'Inter', sans-serif);
}
.iphone-btn-sm:hover {
    background: rgba(92,232,154,0.12);
}
.iphone-input, .iphone-textarea, .iphone-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    background: var(--glass-bg-recessed);
    color: #fff;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    outline: none;
    transition: box-shadow 0.2s;
    box-sizing: border-box;
    backdrop-filter: var(--glass-blur-light);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
.iphone-input:focus, .iphone-textarea:focus, .iphone-select:focus {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}
.iphone-textarea {
    resize: vertical;
    min-height: 60px;
}
.iphone-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c6a664' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}
.iphone-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.iphone-search-bar input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 10px;
    border: none;
    background: rgba(20,16,8,0.5);
    color: #fff;
    font-size: 15px;
    outline: none;
    font-family: var(--font-sans, 'Inter', sans-serif);
}
.iphone-search-bar input:focus {
    border-color: rgba(92,232,154,0.3);
}
.iphone-search-bar select {
    padding: 8px 28px 8px 10px;
    border-radius: 10px;
    border: none;
    background: rgba(20,16,8,0.5);
    color: var(--accent-gold);
    font-size: 14px;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23c6a664' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* Character Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-bottom: 16px;
}
.card-grid-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 15px;
}
.character-card {
    background: rgba(20, 16, 8, 0.6);
    border: none;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.character-card:hover {
    border-color: rgba(92,232,154,0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.character-card.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px rgba(92,232,154,0.3);
}
.character-card-thumb {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(92,232,154,0.05), rgba(20,16,8,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.character-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.character-card-thumb svg {
    opacity: 0.2;
}
.character-card-info {
    padding: 8px 10px 10px;
}
.character-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.character-card-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    gap: 6px;
}
.character-card-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(92,232,154,0.12);
    color: var(--accent-gold);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.character-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-gold);
    display: none;
    align-items: center;
    justify-content: center;
}
.character-card.selected .character-card-check {
    display: flex;
}

/* Studio Section */
.studio-section {
    margin-bottom: 16px;
}
.studio-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0 0 8px;
}
.studio-card-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0;
    scrollbar-width: none;
}
.studio-card-bar::-webkit-scrollbar { display: none; }
.studio-card-bar-empty {
    color: rgba(255,255,255,0.6);
    font-size: 15px;
    padding: 16px;
    text-align: center;
    width: 100%;
}
.studio-card-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(92,232,154,0.1);
    border: none;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.studio-card-chip img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.studio-card-chip span {
    font-size: 14px;
    color: var(--accent-gold-light);
    font-weight: 500;
}
.studio-card-chip .remove-chip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.studio-prompt-preview {
    padding: 12px;
    border-radius: 12px;
    background: rgba(20,16,8,0.5);
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    line-height: 1.5;
    min-height: 60px;
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
}
.studio-actions {
    display: flex;
    gap: 10px;
    padding-top: 8px;
}
.studio-actions .iphone-btn {
    flex: 1;
}

/* Schedule Section */
.schedule-card-section, .schedule-times-section {
    margin-bottom: 20px;
}
.schedule-card-section h3, .schedule-times-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0 0 6px;
}
.schedule-hint {
    font-size: 14px;
    color: rgba(255,255,255,0.35);
    margin: 0 0 10px;
}
.schedule-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.schedule-card-list-empty {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    padding: 12px;
}
.schedule-time-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.schedule-time-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    background: rgba(92,232,154,0.06);
    color: var(--accent-gold);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.schedule-time-pill.active {
    background: rgba(92,232,154,0.2);
    border-color: var(--accent-gold);
}

/* Settings Section */
.settings-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: none;
}
.settings-group h3 {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0 0 10px;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}
.settings-row span {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}
.settings-row .iphone-select, .settings-row .iphone-input {
    width: auto;
    min-width: 140px;
}
.settings-social-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-social-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(20,16,8,0.4);
    border: none;
}
.settings-social-item span {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.settings-social-badge {
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 600;
}
.settings-social-badge.connected {
    background: rgba(92,232,154,0.15);
    color: #5ce89a;
}
.settings-social-badge.disconnected {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.35);
}

/* Card Form Steps */
.form-step {
    display: none;
}
.form-step.active {
    display: block;
}
.form-field {
    margin-bottom: 14px;
}
.form-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: none;
}
.form-step-dots {
    display: flex;
    gap: 6px;
}
.form-step-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(92,232,154,0.2);
    transition: background 0.2s;
}
.form-step-dots .dot.active {
    background: var(--accent-gold);
}

/* Card Detail Modal Body */
.card-detail-grid {
    display: grid;
    gap: 16px;
}
.card-detail-section {
    padding: 12px;
    border-radius: 12px;
    background: rgba(20,16,8,0.4);
    border: none;
}
.card-detail-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: rgba(92,232,154,0.6);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 8px;
}
.card-detail-section p {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: 1.5;
}
.card-detail-images {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
}
.card-detail-images img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border: none;
}

/* Modal Overrides for Card Modals */
#cardModalOverlay, #cardDetailOverlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#cardModal, #cardDetailModal {
    max-width: 440px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 20px;
}

/* ================ DASHBOARD CHARACTER HUB & VIDEO STUDIO ================ */
.dash-character-hub,
.dash-video-studio {
    background: linear-gradient(135deg, rgba(20, 16, 8, 0.5), rgba(15, 12, 6, 0.5));
    border: none;
}
.dash-hub-body,
.dash-studio-body {
    padding: 20px;
}
.dash-search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.dash-search-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--glass-bg-recessed);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color var(--transition);
}
.dash-search-input:focus {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}
.dash-select {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--glass-bg-recessed);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    outline: none;
    cursor: pointer;
}
.dash-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dash-card-grid-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: var(--text-sm);
}
.dash-studio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}
.dash-studio-section {
    margin-bottom: 16px;
}
.dash-studio-section h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0 0 8px;
}
.dash-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--glass-bg-recessed);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--transition);
    box-sizing: border-box;
}
.dash-textarea:focus {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}
.dash-studio-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: none;
}
.dash-studio-actions .btn {
    flex: 1;
}
.btn-gold {
    background: linear-gradient(135deg, rgba(92,232,154,0.2), rgba(92,232,154,0.1));
    border: none;
    color: var(--accent-gold-light);
}
.btn-gold:hover {
    background: linear-gradient(135deg, rgba(92,232,154,0.3), rgba(92,232,154,0.15));
    border-color: rgba(92,232,154,0.6);
}
@media (max-width: 1024px) {
    .dash-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .dash-card-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-studio-grid { grid-template-columns: 1fr; }
}

/* iPhone toggle button active state */
#iphoneToggle.active {
    color: var(--accent-gold);
    background: rgba(92,232,154,0.15);
    border-color: rgba(92,232,154,0.3);
}

/* Responsive: shrink iPhone on small screens */
@media (max-height: 900px) {
    .iphone-frame {
        height: 720px;
        width: 340px;
        border-radius: 42px;
    }
}
@media (max-width: 480px) {
    .iphone-frame {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    .iphone-backdrop { display: none; }
    .iphone-notch { display: none; }
}

/* ==================== ONBOARDING OVERLAY ==================== */

.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(5, 5, 15, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: onboardingFadeIn 0.4s ease;
}

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

.onboarding-container {
    max-width: 720px;
    width: 100%;
    padding: 32px;
    max-height: 90vh;
    overflow-y: auto;
}

.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    animation: onboardingSlideUp 0.3s ease;
}

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

.onboarding-header {
    text-align: center;
}

.onboarding-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 8px;
}

.onboarding-subtitle {
    color: rgba(240, 240, 245, 0.6);
    font-size: var(--text-base);
    margin: 0;
}

.onboarding-back {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: rgba(240, 240, 245, 0.5);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: 4px 0;
    transition: color 0.2s;
}

.onboarding-back:hover {
    color: var(--accent-gold-light);
}

/* Step 1: Path Cards */

.onboarding-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}

.onboarding-path-card {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 16px;
    padding: 40px 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.onboarding-path-card:hover {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.08);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(92, 232, 154, 0.15);
}

.onboarding-path-icon {
    color: var(--accent-gold);
    opacity: 0.8;
}

.onboarding-path-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #f0f0f5;
    margin: 0;
}

.onboarding-path-card p {
    color: rgba(240, 240, 245, 0.5);
    font-size: var(--text-sm);
    margin: 0;
    line-height: 1.5;
}

/* Step 2: Textarea & Upload */

.onboarding-textarea {
    width: 100%;
    min-height: 160px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 12px;
    color: #f0f0f5;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-base);
    padding: 16px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.onboarding-textarea:focus {
    border-color: var(--accent-gold);
}

.onboarding-textarea::placeholder {
    color: rgba(240, 240, 245, 0.3);
}

.onboarding-upload-zone {
    width: 100%;
    min-height: 180px;
    border: 2px dashed rgba(92, 232, 154, 0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(240, 240, 245, 0.5);
    font-size: var(--text-base);
}

.onboarding-upload-zone:hover,
.onboarding-upload-zone.drag-over {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.06);
}

.onboarding-upload-zone span {
    font-size: var(--text-sm);
    opacity: 0.6;
}

.onboarding-upload-previews {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.onboarding-upload-preview-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid rgba(92, 232, 154, 0.3);
}

.onboarding-action-btn {
    min-width: 220px;
    padding: 14px 28px;
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.onboarding-secondary-btn {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--accent-gold-light);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-secondary-btn:hover {
    background: rgba(92, 232, 154, 0.1);
    border-color: var(--accent-gold);
}

.onboarding-secondary-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Step 3: Image Grid */

.onboarding-progress-bar {
    width: 100%;
    position: relative;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    overflow: hidden;
}

.onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
    border-radius: 8px;
    transition: width 0.5s ease;
    width: 0%;
}

.onboarding-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-sm);
    color: #f0f0f5;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.onboarding-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.onboarding-image-cell {
    aspect-ratio: 9 / 16;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(92, 232, 154, 0.1);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.onboarding-image-cell:hover {
    border-color: rgba(92, 232, 154, 0.4);
}

.onboarding-image-cell.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(92, 232, 154, 0.3), inset 0 0 0 2px var(--accent-gold);
}

.onboarding-image-cell.loading {
    cursor: default;
}

.onboarding-image-cell.failed {
    cursor: default;
    opacity: 0.4;
}

.onboarding-image-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onboarding-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(92, 232, 154, 0.2);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: onboardingSpin 0.8s linear infinite;
}

@keyframes onboardingSpin {
    to { transform: rotate(360deg); }
}

.onboarding-cell-failed {
    color: rgba(240, 240, 245, 0.3);
    font-size: var(--text-xs);
}

.onboarding-image-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Step 4: Voice */

.onboarding-voice-section {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    align-items: center;
}

.onboarding-voice-select {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 10px;
    color: #f0f0f5;
    padding: 12px 16px;
    font-size: var(--text-base);
}

.onboarding-voice-hint {
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.45);
    margin: 8px 0 0;
    min-height: 1.2em;
}

.onboarding-voice-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Step 5: Name & Finish */

.onboarding-finish-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 280px;
}

.onboarding-finish-img {
    width: 200px;
    height: 356px;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid rgba(92, 232, 154, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.onboarding-name-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 12px;
    color: #f0f0f5;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 14px 16px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

.onboarding-name-input:focus {
    border-color: var(--accent-gold);
}

.onboarding-name-input::placeholder {
    color: rgba(240, 240, 245, 0.3);
    font-weight: 400;
}

.onboarding-finish-btn {
    min-width: 200px;
}

/* Responsive: stack cards on mobile */
@media (max-width: 600px) {
    .onboarding-container {
        padding: 20px;
    }
    .onboarding-cards {
        grid-template-columns: 1fr;
    }
    .onboarding-path-card {
        aspect-ratio: auto;
        padding: 28px 20px;
    }
    .onboarding-image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .onboarding-title {
        font-size: 1.5rem;
    }
    .onboarding-image-actions {
        flex-direction: column;
    }
}

/* ================ TOP TAB NAVIGATION ================ */
/* Standalone .top-nav no longer used — tabs are in .header-nav now */
.top-nav {
    display: none;
}

.top-nav::-webkit-scrollbar {
    display: none;
}

.top-nav-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 36px;
    font-size: 13px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.50);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 6px;
    flex-shrink: 0;
}

.top-nav-tab svg {
    opacity: 0.5;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

/* Bottom glow line that slides between tabs */
.top-nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
    border-radius: 3px 3px 0 0;
    transition: all 0.4s var(--ease-spring);
    transform: translateX(-50%);
    box-shadow: 0 0 8px transparent;
}

.top-nav-tab.active::after {
    width: 80%;
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.3), 0 0 24px rgba(92, 232, 154, 0.1);
}

.top-nav-tab:hover::after {
    width: 40%;
    box-shadow: 0 0 8px rgba(92, 232, 154, 0.15);
}

.top-nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.top-nav-tab:hover svg {
    opacity: 0.85;
}

.top-nav-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
    font-weight: 600;
    background: rgba(92, 232, 154, 0.08);
}

.top-nav-tab.active svg {
    opacity: 1;
    stroke: var(--accent-cyan);
}

/* Tab Pages */
.tab-page {
    display: none;
}

.tab-page.active {
    display: block;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    overflow-x: hidden;
    z-index: 100;
}

.tab-page[data-page="workflows"] {
    height: calc(100vh - 60px);
    overflow: hidden;
}
.tab-page[data-page="workflows"].fullheight {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9000;
    overflow: hidden;
}

/* CreatorMode — full width under main nav */
.tab-page[data-page="creatormode"] {
    overflow: hidden !important;
}

.tab-page[data-page="social"] {
    overflow: auto;
}
.tab-page[data-page="director"] {
    overflow: hidden !important;
}

/* When director is active, break out of .main max-width constraint */
.main:has(.tab-page[data-page="director"].active) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Responsive: mobile tab bar */
@media (max-width: 768px) {
    .top-nav {
        padding: 0 16px;
        top: 60px;
    }

    .top-nav-tab {
        padding: 10px 14px;
        font-size: var(--text-xs);
    }
}

/* ================ CARD IMAGE UPLOAD ZONE ================ */
.card-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--glass-bg-recessed);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.card-upload-zone span {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.card-upload-zone:hover,
.card-upload-zone.drag-over {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.06);
}
.card-upload-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.card-upload-preview img {
    max-width: 120px;
    max-height: 120px;
    border-radius: var(--radius-sm);
    border: none;
    object-fit: cover;
}

/* ================ CARD PORTRAIT GENERATION GRID ================ */
.card-gen-progress-bar {
    width: 100%;
    position: relative;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.card-gen-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
    border-radius: 8px;
    transition: width 0.5s ease;
    width: 0%;
}
.card-gen-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-sm);
    color: #f0f0f5;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.card-gen-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
}
.card-gen-image-cell {
    aspect-ratio: 9 / 16;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(92, 232, 154, 0.1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.card-gen-image-cell:hover {
    border-color: rgba(92, 232, 154, 0.4);
}
.card-gen-image-cell.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(92, 232, 154, 0.3), inset 0 0 0 2px var(--accent-gold);
}
.card-gen-image-cell.loading {
    cursor: default;
}
.card-gen-image-cell.failed {
    cursor: default;
    opacity: 0.4;
}
.card-gen-image-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-gen-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(92, 232, 154, 0.2);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: onboardingSpin 0.8s linear infinite;
}
.card-gen-cell-failed {
    color: rgba(240, 240, 245, 0.3);
    font-size: var(--text-xs);
}
.card-gen-image-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

/* ================ KLING DANCE PRESETS ================ */
.kling-presets-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.kling-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    text-align: center;
}
.kling-preset-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(92, 232, 154, 0.35);
}
.kling-preset-card.active {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.1);
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.15);
}
.kling-preset-card .preset-icon {
    font-size: 1.5rem;
}
.kling-preset-card .preset-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.2;
}
.kling-preset-card.active .preset-label {
    color: var(--accent-gold-light);
}

/* Motion Reference Upload */
.motion-ref-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--glass-bg-recessed);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.motion-ref-upload-zone span {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.motion-ref-upload-zone:hover,
.motion-ref-upload-zone.drag-over {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.06);
}
.motion-ref-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.motion-ref-preview video {
    max-width: 180px;
    max-height: 120px;
    border-radius: var(--radius-sm);
    border: none;
}

@media (max-width: 900px) {
    .kling-presets-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .kling-presets-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================ SOCIAL STRIP (Command Center) ================ */
.social-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.social-circle {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2.5px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    transition: all 250ms var(--ease-smooth);
    color: rgba(255, 255, 255, 0.4);
}

.social-circle svg {
    opacity: 0.6;
    transition: all 250ms var(--ease-smooth);
}

.social-circle:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
}

.social-circle:hover svg {
    opacity: 0.9;
}

.social-circle-check {
    display: none;
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-emerald);
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
}

/* Platform colors */
.social-circle[data-platform="youtube"] { --sc-color: #FF0000; }
.social-circle[data-platform="instagram"] { --sc-color: #E4405F; }
.social-circle[data-platform="facebook"] { --sc-color: #1877F2; }
.social-circle[data-platform="twitter"] { --sc-color: #1DA1F2; }
.social-circle[data-platform="tiktok"] { --sc-color: #00F2EA; }

.social-circle.connected {
    border-color: var(--sc-color);
    background: color-mix(in srgb, var(--sc-color) 15%, transparent);
    color: var(--sc-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--sc-color) 30%, transparent);
    transition: all 0.3s var(--ease-smooth);
}

.social-circle.connected svg {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--sc-color));
}

.social-circle.connected .social-circle-check {
    display: block;
    background: var(--accent-cyan);
}

/* Social Popover */
.social-popover {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    padding: 14px;
    background: rgba(20, 18, 12, 0.95);
    backdrop-filter: blur(20px) saturate(1.3);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 200;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.social-popover.open {
    display: flex;
    animation: popoverScaleIn 0.25s var(--ease-cinematic);
}

@keyframes popoverScaleIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.95); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.popover-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.popover-status {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.popover-status.status-connected {
    color: var(--accent-emerald);
}

.popover-toggle {
    transform: scale(0.85);
}

.popover-action-btn {
    width: 100%;
    padding: 6px 12px;
    background: rgba(92, 232, 154, 0.1);
    border: none;
    border-radius: 6px;
    color: var(--accent-gold);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.popover-action-btn:hover {
    background: rgba(92, 232, 154, 0.2);
    border-color: rgba(92, 232, 154, 0.4);
}

.popover-action-btn.btn-disconnect-small {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ================ SECTION COLLAPSIBLE ================ */
.section-collapsible-header {
    cursor: pointer;
    user-select: none;
}

.section-chevron {
    transition: transform 0.3s ease;
}

.section-collapsible.collapsed .section-chevron {
    transform: rotate(-90deg);
}

.section-collapsible-body {
    transition: max-height 0.35s ease, opacity 0.25s ease;
    overflow: hidden;
}

.section-collapsible.collapsed .section-collapsible-body {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ================ PIPELINE STICKY ================ */
.pipeline-tracker.active {
    position: sticky;
    top: 125px;
    z-index: 50;
}

/* ================ QUICK SETTINGS ACCORDION ================ */
.quick-settings-card {
    background: linear-gradient(135deg, rgba(20, 16, 8, 0.45), rgba(15, 12, 6, 0.45));
}

.quick-config-accordion {
    border-top: none;
}

.quick-config-section {
    border-bottom: none;
}

.quick-config-section:last-child {
    border-bottom: none;
}

.quick-config-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition), background var(--transition);
}

.quick-config-header:hover {
    color: var(--text-primary);
    background: rgba(200, 200, 220, 0.04);
}

.quick-config-header .section-chevron {
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
    flex-shrink: 0;
}

.quick-config-section.open .quick-config-header .section-chevron {
    transform: rotate(0deg);
}

.quick-config-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

.quick-config-section.open .quick-config-body {
    max-height: 500px;
    opacity: 1;
}

.quick-pools-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ================ RECENT ASSETS CONSTRAINTS ================ */
.cc-assets-body {
    max-height: 400px;
    overflow-y: auto;
    contain: layout style;
}

.cc-assets-body::-webkit-scrollbar {
    width: 6px;
}

.cc-assets-body::-webkit-scrollbar-thumb {
    background: rgba(92, 232, 154, 0.2);
    border-radius: 3px;
}

/* Gold pulse on pipeline complete (auto-expand) */
@keyframes goldPulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.02); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.assets-gallery.pulse-gold {
    animation: goldPulse 1s ease-out;
}

/* ================ COMMAND CENTER RESPONSIVE ================ */
@media (max-width: 768px) {
    .social-strip {
        gap: 12px;
    }
    .social-circle {
        width: 34px;
        height: 34px;
    }
    .social-circle svg {
        width: 14px;
        height: 14px;
    }
    .social-popover {
        width: 170px;
        padding: 10px;
    }
    .pipeline-tracker.active {
        top: 100px;
    }
    .quick-config-header {
        padding: 10px 16px;
    }
}

@media (max-width: 480px) {
    .social-strip {
        gap: 8px;
    }
    .social-circle {
        width: 30px;
        height: 30px;
    }
    .social-circle svg {
        width: 12px;
        height: 12px;
    }
}

/* ================================================================
   STUDIO WORKSPACE LAYOUT
   ================================================================ */

/* Header modifications */
.header-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-breadcrumb {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.breadcrumb-sep {
    margin: 0 6px;
    color: rgba(92, 232, 154, 0.3);
}

.header-socials {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-socials .social-circle {
    width: 34px;
    height: 34px;
}

.header-socials .social-circle svg {
    width: 15px;
    height: 15px;
}

.btn-upgrade {
    position: relative;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light));
    border: none;
    color: #000;
    font-weight: 700;
    font-size: var(--text-xs);
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(92, 232, 154, 0.3), 0 0 24px rgba(92, 232, 154, 0.15);
    z-index: 0;
    overflow: hidden;
    letter-spacing: 0.02em;
}

/* Animated rotating gradient border (cross-browser) */
.btn-upgrade::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        var(--accent-gold),
        var(--accent-cyan),
        var(--accent-neon),
        var(--accent-gold)
    );
    z-index: -2;
    animation: spinRotate 4s linear infinite;
}

.btn-upgrade::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light));
    z-index: -1;
    transition: all 0.3s;
}

.btn-upgrade:hover {
    box-shadow: 0 4px 20px rgba(92, 232, 154, 0.4), 0 0 20px rgba(92, 232, 154, 0.15);
    transform: translateY(-1px);
}

.btn-upgrade:hover::after {
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold));
}

/* Gem-style Upgrade button — compact icon that echoes the logo gem */
.btn-gem-upgrade {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(92,232,154,0.22);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(92,232,154,0.18), rgba(92,232,154,0.04) 65%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}
.btn-gem-upgrade svg {
    filter: drop-shadow(0 0 5px rgba(92,232,154,0.5));
    transition: filter 0.25s ease, transform 0.35s cubic-bezier(.4,0,.2,1);
}
.btn-gem-upgrade:hover {
    transform: scale(1.08);
    border-color: rgba(92,232,154,0.5);
    background: radial-gradient(circle at 30% 25%, rgba(92,232,154,0.32), rgba(92,232,154,0.06) 65%);
}
.btn-gem-upgrade:hover svg {
    filter: drop-shadow(0 0 9px rgba(92,232,154,0.85));
    transform: rotate(-6deg);
}
.btn-gem-upgrade:active {
    transform: scale(0.96);
}

/* Hide top-nav for workspace (optional — keep if you still want tabs) */
/* .top-nav { display: none; } */

/* Command center tab uses full-width workspace */
.tab-page[data-page="command-center"] {
    max-width: none;
    padding: 0;
}

/* ===== 3-Column Workspace Grid ===== */
.cc-workspace {
    display: grid;
    grid-template-columns: 280px 1fr 260px;
    gap: 6px;
    padding: 6px;
    height: calc(100vh - 60px);
    min-height: 400px;
    overflow: hidden;
}

/* ===== Left Sidebar ===== */
.cc-sidebar-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--glass-bg);
    background-image: linear-gradient(180deg, rgba(200,200,220,0.05) 0%, rgba(20,60,100,0.03) 20%, transparent 50%, rgba(92,232,154,0.02) 100%);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--panel-backlight), 0 10px 40px rgba(0,0,0,0.45), var(--glass-inset-glow);
    border-right: none;
    border-radius: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    contain: layout style;
}

.cc-sidebar-left::-webkit-scrollbar {
    width: 4px;
}

.cc-sidebar-left::-webkit-scrollbar-thumb {
    background: rgba(200, 200, 220, 0.12);
    border-radius: 4px;
}

.cc-sidebar-section {
    border-bottom: none;
}

.cc-sidebar-section.open .cc-sidebar-dropdown {
    grid-template-rows: 1fr;
}

.cc-sidebar-section.open .section-chevron {
    transform: rotate(180deg);
}

.cc-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(200, 200, 220, 0.03) 0%, transparent 100%);
    border: none;
    border-left: 3px solid rgba(200, 200, 220, 0.12);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 250ms var(--ease-smooth);
    text-align: left;
}

.cc-sidebar-toggle svg:first-child {
    color: var(--silver);
    opacity: 0.6;
    transition: all 250ms var(--ease-smooth);
}

.cc-sidebar-toggle:hover {
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.1) 0%, rgba(92, 232, 154, 0.03) 100%);
    color: var(--text-primary);
}

.cc-sidebar-toggle:hover svg:first-child {
    opacity: 1;
}

.cc-sidebar-toggle .section-chevron {
    margin-left: auto;
    transition: transform 0.2s;
    flex-shrink: 0;
    opacity: 0.7;
}

.cc-next-run {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-gold);
    margin-left: auto;
    margin-right: 4px;
}

.cc-sidebar-dropdown {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--ease-smooth);
    overflow: hidden;
}

.cc-sidebar-dropdown > * {
    overflow: hidden;
    padding: 0 16px;
    transition: padding 0.35s var(--ease-smooth);
}

.cc-sidebar-section.open .cc-sidebar-dropdown > * {
    padding: 12px 16px 14px;
    background: var(--depth-recessed);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cc-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.cc-schedule-pill {
    background: var(--depth-elevated);
    border: none;
    border-radius: var(--radius-sm);
    padding: 3px;
    transition: all 250ms var(--ease-smooth);
}

.cc-schedule-pill:focus-within {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(92, 232, 154, 0.1);
}

.cc-schedule-pill .input-time {
    width: 100%;
    padding: 6px 8px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--accent-cyan);
    text-align: center;
}

/* Character Section */
.cc-char-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-bottom: none;
}

.cc-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
}

.cc-sidebar-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cc-sidebar-header .btn {
    padding: 2px 8px;
    font-size: var(--text-sm);
    line-height: 1;
    min-width: 24px;
}

/* Prominent "New" character button */
.cc-new-char-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: #000;
    background: var(--accent-gold);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.02em;
}
.cc-new-char-btn:hover {
    background: #d4b65a;
    transform: scale(1.05);
}

/* "+" tile in character grid */
.cc-char-add-tile {
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    border: 2px dashed rgba(92, 232, 154, 0.35);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    transition: all 0.2s;
    color: rgba(92, 232, 154, 0.5);
}
.cc-char-add-tile:hover {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.08);
    color: var(--accent-gold);
    transform: scale(1.04);
}
.cc-char-add-tile svg {
    opacity: 0.7;
}
.cc-char-add-tile:hover svg {
    opacity: 1;
}
.cc-char-add-tile span {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cc-search-input {
    display: block;
    width: calc(100% - 28px);
    margin: 0 14px 8px;
    padding: 5px 10px;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color var(--transition);
}

.cc-search-input:focus {
    border-color: var(--accent-gold);
}

.cc-char-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    align-content: start;
}

.cc-char-grid::-webkit-scrollbar {
    width: 3px;
}

.cc-char-grid::-webkit-scrollbar-thumb {
    background: rgba(92, 232, 154, 0.12);
    border-radius: 3px;
}

/* Character card in sidebar grid */
.cc-char-thumb {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(92, 232, 154, 0.2);
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    background: var(--bg-card);
}

.cc-char-thumb:hover {
    border-color: rgba(92, 232, 154, 0.3);
    transform: scale(1.04);
}

/* Delete button on character card */
.cc-char-delete {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 5;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #ff6b6b;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.cc-char-thumb:hover .cc-char-delete {
    display: flex;
}
.cc-char-delete:hover {
    background: #ff4444;
    color: #fff;
    transform: scale(1.15);
}

.cc-char-thumb.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.3), 0 0 24px rgba(92, 232, 154, 0.1);
}

/* Holographic shimmer on hover */
.cc-char-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 20%,
        rgba(92, 232, 154, 0.1) 35%,
        rgba(92, 232, 154, 0.08) 45%,
        rgba(45, 183, 48, 0.06) 55%,
        transparent 70%
    );
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
    pointer-events: none;
}

.cc-char-thumb:hover::after {
    opacity: 1;
    animation: holoShimmer 2s ease-in-out infinite;
}

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

.cc-char-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-char-thumb .cc-char-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.08);
}

.cc-char-thumb .cc-char-name-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    backdrop-filter: blur(8px);
    font-size: var(--text-2xs);
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Sidebar Stats */
.cc-sidebar-stats {
    display: flex;
    justify-content: space-around;
    padding: 12px 14px;
    border-top: none;
    background: rgba(92, 232, 154, 0.05);
}

.cc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

.cc-stat + .cc-stat::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(200, 200, 220, 0.08);
}

.cc-stat-val {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--accent-gold-light);
    font-variant-numeric: tabular-nums;
}

.cc-stat-lbl {
    font-size: var(--text-2xs);
    color: var(--silver-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ===== Center Main ===== */
.cc-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(2, 4, 8, 0.38);
    background-image: linear-gradient(180deg, rgba(200,200,220,0.03) 0%, rgba(20,60,100,0.02) 15%, transparent 40%);
    backdrop-filter: blur(12px) saturate(1.4);
    border-radius: 12px;
    box-shadow: var(--panel-backlight), 0 10px 40px rgba(0,0,0,0.35);
    position: relative;
}

/* Subtle radial gradient overlay in center area */
.cc-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
    z-index: 0;
}

.cc-main > * {
    position: relative;
    z-index: 1;
}

.cc-preview-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 0;
    background: transparent;
}

.cc-preview {
    position: relative;
    width: auto;
    height: min(calc(100vh - 280px), 680px);
    aspect-ratio: 9/16;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 2px solid rgba(92, 232, 154, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(92, 232, 154, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: all 0.4s var(--ease-smooth);
}

/* Ambient light bleed behind preview */
.cc-preview::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: none;
    z-index: -1;
    transition: all 0.5s;
    filter: blur(20px);
}

/* Noise texture overlay */
.cc-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

.cc-preview:hover {
    border-color: rgba(92, 232, 154, 0.25);
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(92, 232, 154, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
    transform: scale(1.005);
}

.cc-preview:hover::before {
    background: none;
}

/* Corner brackets HUD overlay — glowing silver */
.cc-preview-hud-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 3;
    opacity: 0.6;
    transition: opacity 0.3s, border-color 0.3s, filter 0.3s;
    filter: drop-shadow(0 0 4px rgba(210,210,230,0.3));
}

.cc-preview:hover .cc-preview-hud-corner {
    opacity: 0.9;
    border-color: var(--silver-light) !important;
    filter: drop-shadow(0 0 8px rgba(210,210,230,0.5));
}

.cc-preview-hud-corner--tl { top: 8px; left: 8px; border-top: 2px solid var(--silver); border-left: 2px solid var(--silver); }
.cc-preview-hud-corner--tr { top: 8px; right: 8px; border-top: 2px solid var(--silver); border-right: 2px solid var(--silver); }
.cc-preview-hud-corner--bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--silver); border-left: 2px solid var(--silver); }
.cc-preview-hud-corner--br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--silver); border-right: 2px solid var(--silver); }

/* Scan line animation during loading */
.cc-preview.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-neon), var(--accent-cyan), transparent);
    z-index: 4;
    animation: previewScanLine 2s linear infinite;
    will-change: transform;
}

@keyframes previewScanLine {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(calc(100vh)); opacity: 0.3; }
}

/* Ken Burns zoom on preview image */
.cc-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-1%, -1%); }
}

/* Aspect ratio badge */
.cc-preview-ratio-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    border: none;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--accent-gold-light);
    z-index: 3;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.cc-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    animation: emptyFloat 4s ease-in-out infinite;
    padding: 32px 16px;
    background: radial-gradient(ellipse at 50% 40%, rgba(92, 232, 154, 0.03) 0%, transparent 70%);
    border-radius: 16px;
}

/* ── Animated Empty State Illustration ── */
.empty-state-illustration {
    position: relative;
    width: 120px;
    height: 120px;
}

.orbit-ring-1 {
    animation: spinRotate 12s linear infinite;
    transform-origin: 60px 60px;
}

.orbit-ring-2 {
    animation: spinRotate 8s linear infinite reverse;
    transform-origin: 60px 60px;
}

.empty-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.empty-particle--cyan {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    top: 10px;
    left: 50%;
    animation: emptyParticleFloat 3s ease-in-out infinite;
}

.empty-particle--gold {
    background: var(--accent-gold);
    box-shadow: 0 0 8px var(--accent-gold);
    bottom: 15px;
    right: 10px;
    animation: emptyParticleFloat 3s ease-in-out 1s infinite;
}

.empty-particle--neon {
    background: var(--accent-neon);
    box-shadow: 0 0 8px var(--accent-neon);
    bottom: 20px;
    left: 10px;
    width: 4px;
    height: 4px;
    animation: emptyParticleFloat 3s ease-in-out 2s infinite;
}

.empty-state-title {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.empty-state-hint {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
}

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

@keyframes emptyParticleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-8px) scale(1.2); opacity: 1; }
}

.cc-preview-name {
    margin-top: 10px;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--accent-gold-light);
    text-align: center;
    min-height: 1.2em;
    letter-spacing: 0.02em;
}

/* Prompt Bar — HERO element */
.cc-prompt-bar {
    padding: 12px 16px 14px;
    border-top: none;
    background: rgba(10, 8, 4, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
}

.cc-prompt-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 200, 220, 0.05), transparent);
    pointer-events: none;
}

/* ===== Freepik-Style Glowing Generation Ring (Cross-Browser) ===== */
.cc-prompt-glow-wrapper {
    position: relative;
    z-index: 1;
}

/* Rotating glow ring track — uses transform:rotate for Safari/Firefox */
.cc-glow-ring-track {
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--radius-sm) + 3px);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--accent-cyan) 10%,
        var(--accent-cyan-light) 20%,
        var(--accent-gold) 30%,
        transparent 40%,
        transparent 60%,
        var(--accent-neon) 70%,
        var(--accent-cyan) 80%,
        transparent 90%
    );
    opacity: 0;
    transition: opacity 0.4s var(--ease-smooth);
    z-index: -1;
    filter: blur(1px);
    pointer-events: none;
    animation: glowRingRotate 3s linear infinite paused;
}

/* Mask to show only the border ring */
.cc-glow-ring-track::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: var(--radius-sm);
    background: var(--depth-base);
}

/* Outer diffuse glow */
.cc-prompt-glow-wrapper::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: calc(var(--radius-sm) + 8px);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(92, 232, 154, 0.15) 15%,
        transparent 30%,
        transparent 50%,
        rgba(45, 183, 48, 0.1) 65%,
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.5s var(--ease-smooth);
    z-index: -2;
    filter: blur(12px);
    pointer-events: none;
    animation: glowRingRotate 3s linear infinite paused;
}

.cc-prompt-glow-wrapper.generating .cc-glow-ring-track {
    display: none;
}

.cc-prompt-glow-wrapper.generating::after {
    display: none;
}

.cc-prompt-glow-wrapper.generating .cc-prompt-input {
    border-color: rgba(92, 232, 154, 0.3);
    box-shadow: 0 0 20px rgba(92, 232, 154, 0.08), inset 0 0 12px rgba(92, 232, 154, 0.03);
}

@keyframes glowRingRotate {
    to { transform: rotate(360deg); }
}

/* Particle trails disabled — caused floating rectangle glitch */
.cc-glow-particle {
    display: none !important;
}

@keyframes particleOrbit {
    0% { transform: translate(-50%, 0) rotate(0deg) translateX(calc(50% + 3px)) rotate(0deg); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translate(-50%, 0) rotate(360deg) translateX(calc(50% + 3px)) rotate(-360deg); opacity: 0; }
}

.cc-prompt-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.cc-prompt-input {
    flex: 1;
    padding: 14px 16px;
    min-height: 100px;
    background: rgba(12, 10, 8, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    resize: vertical;
    outline: none;
    transition: all 250ms var(--ease-smooth);
    line-height: 1.5;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%;
}

.cc-prompt-input:focus {
    border-color: rgba(92, 232, 154, 0.5);
    box-shadow: 0 0 0 3px rgba(92, 232, 154, 0.15), 0 0 24px rgba(92, 232, 154, 0.08);
    background: rgba(12, 10, 8, 0.85);
    animation: inputBreathingGlow 2.5s ease-in-out infinite;
}

@keyframes inputBreathingGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(92, 232, 154, 0.1), 0 0 20px rgba(92, 232, 154, 0.06); }
    50% { box-shadow: 0 0 0 4px rgba(92, 232, 154, 0.18), 0 0 30px rgba(92, 232, 154, 0.12); }
}

.cc-generate-btn {
    padding: 12px 22px;
    border-radius: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: stretch;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-cyan-dark));
    box-shadow: 0 2px 14px rgba(92, 232, 154, 0.25), 0 2px 12px rgba(92, 232, 154, 0.25), 0 0 30px rgba(92, 232, 154, 0.08);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-generate-btn:hover {
    box-shadow: 0 4px 24px rgba(92, 232, 154, 0.35), 0 4px 20px rgba(92, 232, 154, 0.3), 0 0 40px rgba(92, 232, 154, 0.15);
    transform: translateY(-2px);
}

.cc-presets-row {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.cc-preset-chip {
    padding: 3px 10px;
    background: rgba(92, 232, 154, 0.1);
    border: none;
    border-radius: 999px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 250ms var(--ease-smooth);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    line-height: 1.4;
}

.cc-preset-chip:hover {
    background: rgba(92, 232, 154, 0.08);
    border-color: rgba(92, 232, 154, 0.25);
    color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(92, 232, 154, 0.08);
}

.cc-preset-chip.active {
    background: rgba(92, 232, 154, 0.12);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(92, 232, 154, 0.1);
}

/* ===== Right Sidebar ===== */
.cc-sidebar-right {
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    background-image: linear-gradient(180deg, rgba(200,200,220,0.05) 0%, rgba(20,60,100,0.03) 20%, transparent 50%, rgba(92,232,154,0.02) 100%);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--panel-backlight), 0 10px 40px rgba(0,0,0,0.45), var(--glass-inset-glow);
    border-radius: 12px;
    border-left: none;
    overflow-y: auto;
    contain: layout style;
}

.cc-sidebar-right::-webkit-scrollbar {
    width: 4px;
}

.cc-sidebar-right::-webkit-scrollbar-thumb {
    background: rgba(92, 232, 154, 0.15);
    border-radius: 4px;
}

.cc-sidebar-right .cc-sidebar-section:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cc-asset-filter-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(200, 200, 220, 0.06);
}

.cc-asset-tab {
    padding: 4px 8px 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: -1px;
}

.cc-asset-tab:hover {
    color: var(--text-secondary);
}

.cc-asset-tab.active {
    background: none;
    border-bottom-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.cc-asset-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    align-content: start;
}

.cc-asset-grid::-webkit-scrollbar {
    width: 3px;
}

.cc-asset-grid::-webkit-scrollbar-thumb {
    background: rgba(92, 232, 154, 0.12);
    border-radius: 3px;
}

.cc-asset-grid .asset-card {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 9/16;
}

.cc-asset-grid .asset-card .asset-thumb {
    height: 100%;
}

.cc-asset-grid .asset-card .asset-meta {
    display: none;
}

.cc-asset-grid .assets-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-align: center;
}

/* ====== Motion Library ====== */

.cc-motion-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cc-motion-section .cc-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cc-motion-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.12), rgba(92, 232, 154, 0.06));
    color: var(--accent-gold);
    cursor: pointer;
    transition: all 250ms var(--ease-smooth);
}

.cc-motion-upload-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.08);
}

.cc-motion-search {
    display: flex;
    gap: 4px;
    padding: 6px 10px 0;
}

.cc-motion-search input {
    flex: 1;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 6px;
    padding: 5px 8px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    outline: none;
    transition: border-color var(--transition);
}

.cc-motion-search input:focus {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}

.cc-motion-web-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}

.cc-motion-web-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.cc-motion-filter-tabs {
    display: flex;
    gap: 0;
    padding: 4px 10px 0;
    border-bottom: 1px solid rgba(200, 200, 220, 0.06);
}

.cc-motion-tab {
    padding: 4px 8px 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: -1px;
}

.cc-motion-tab:hover {
    color: var(--text-secondary);
}

.cc-motion-tab.active {
    background: none;
    border-bottom-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.cc-motion-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    align-content: start;
    contain: layout style;
}

.cc-motion-grid::-webkit-scrollbar {
    width: 3px;
}

.cc-motion-grid::-webkit-scrollbar-thumb {
    background: rgba(92, 232, 154, 0.12);
    border-radius: 3px;
}

.cc-motion-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 9/16;
    background: var(--bg-card);
    border: 2px solid rgba(92, 232, 154, 0.15);
    cursor: pointer;
    transition: all 250ms var(--ease-smooth);
}

.cc-motion-card:hover {
    border-color: rgba(92, 232, 154, 0.35);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(92, 232, 154, 0.08);
}

.cc-motion-card.selected {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 14px rgba(92, 232, 154, 0.3), 0 0 30px rgba(92, 232, 154, 0.1);
    animation: motionSelectedPulse 2s ease-in-out infinite;
}

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

/* Video thumbnail play overlay on hover */
.cc-motion-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
    pointer-events: none;
}

.cc-motion-card:hover::before {
    opacity: 1;
}

.cc-motion-card video,
.cc-motion-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-motion-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 6px 5px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-motion-card-name {
    font-size: var(--text-2xs);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.cc-motion-card-duration {
    font-size: var(--text-2xs);
    color: rgba(255,255,255,0.5);
}

.cc-motion-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 5px;
    background: var(--accent-gold);
    color: var(--text-on-accent);
    font-size: var(--text-2xs);
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cc-motion-card .cc-motion-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-gold);
    color: #000;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    font-weight: 700;
}

.cc-motion-card.selected .cc-motion-check {
    display: flex;
}

.cc-motion-card-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 3px;
    opacity: 0;
    transition: opacity var(--transition);
}

.cc-motion-card:hover .cc-motion-card-actions {
    opacity: 1;
}

.cc-motion-card.selected .cc-motion-card-actions {
    display: none;
}

.cc-motion-card-actions button {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    font-size: var(--text-2xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.cc-motion-card-actions button:hover {
    background: rgba(92, 232, 154, 0.5);
}

.cc-motion-card-actions .cc-motion-save-btn {
    background: rgba(92, 232, 154, 0.7);
    color: #000;
    font-weight: 600;
    width: auto;
    padding: 0 6px;
}

.cc-motion-card-actions .cc-motion-save-btn:hover {
    background: var(--accent-gold);
}

.cc-motion-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-align: center;
}

.cc-motion-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-top: none;
    background: rgba(92, 232, 154, 0.06);
}

.cc-motion-selected-preview {
    width: 36px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.cc-motion-selected-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cc-motion-selected-name {
    font-size: var(--text-2xs);
    color: var(--accent-gold);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-motion-selected-label {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
}

.cc-motion-clear-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
}

.cc-motion-clear-btn:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.cc-motion-web-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: var(--text-tertiary);
    font-size: 0.7rem;
}

/* Settings in right sidebar */
.cc-settings-compact {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cc-setting-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-setting-row label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    min-width: 38px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.cc-select {
    flex: 1;
    padding: 3px 6px;
    font-size: 0.7rem;
    min-width: 0;
}

/* ===== Character Carousel ===== */
.cc-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 0;
    border-top: none;
    background: rgba(10, 8, 4, 0.6);
    overflow: hidden;
}

.cc-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 60px;
    background: rgba(92, 232, 154, 0.06);
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    z-index: 2;
    margin: 0 4px;
}

.cc-carousel-arrow:hover {
    background: rgba(92, 232, 154, 0.15);
    color: var(--accent-gold);
    border-color: rgba(92, 232, 154, 0.3);
}

.cc-carousel-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    flex: 1;
    padding: 4px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cc-carousel-track::-webkit-scrollbar {
    display: none;
}

.cc-carousel-card {
    flex-shrink: 0;
    width: 56px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    scroll-snap-align: center;
    background: var(--bg-card);
    position: relative;
}

.cc-carousel-card:hover {
    border-color: rgba(92, 232, 154, 0.3);
    transform: translateY(-3px);
}

.cc-carousel-card.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 14px rgba(92, 232, 154, 0.35);
    transform: translateY(-4px);
}

.cc-carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-carousel-card .cc-carousel-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.06);
}

.cc-carousel-card .cc-carousel-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1px 3px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    font-size: var(--text-2xs);
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Footer Pipeline Bar ===== */
.cc-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    min-height: 56px;
    background: var(--glass-bg);
    background-image: linear-gradient(90deg, rgba(200,200,220,0.04) 0%, rgba(20,60,100,0.03) 25%, transparent 50%, rgba(92,232,154,0.02) 100%);
    border-top: none;
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--panel-backlight), 0 -6px 30px rgba(0,0,0,0.35), var(--glass-inset-glow);
    border-radius: 12px;
    margin: 6px;
    position: relative;
}

.cc-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 200, 220, 0.06), rgba(200, 200, 220, 0.04), rgba(200, 200, 220, 0.06), transparent);
    pointer-events: none;
}

.cc-footer-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.15), rgba(92, 232, 154, 0.1));
    border: none;
    border-radius: 8px;
    color: var(--accent-gold-light);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--ease-smooth);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(92, 232, 154, 0.1);
}

/* Shine sweep on trigger button */
.cc-footer-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(92, 232, 154, 0.15), transparent);
    transition: left 0.5s var(--ease-smooth);
}

.cc-footer-trigger:hover::before {
    left: 150%;
}

.cc-footer-trigger:hover {
    background: rgba(92, 232, 154, 0.15);
    border-color: rgba(92, 232, 154, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(92, 232, 154, 0.15);
}

.cc-pipeline-dots {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: center;
    position: relative;
}

.cc-pipeline-dot {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.cc-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(92, 232, 154, 0.12);
    border: 2px solid rgba(92, 232, 154, 0.25);
    transition: all 0.4s var(--ease-spring);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    will-change: transform;
    backdrop-filter: blur(8px);
}

/* Dot halo glow ring */
.cc-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.4s var(--ease-spring);
    z-index: -1;
}

.cc-dot-label {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin-right: 4px;
    white-space: nowrap;
    transition: all 0.3s var(--ease-smooth);
}

.cc-dot-connector {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(92, 232, 154, 0.15), transparent 40%, transparent 60%, rgba(92, 232, 154, 0.15));
    margin: 0 2px;
    transition: all 0.5s var(--ease-smooth);
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}

/* Neon trace line fill animation */
.cc-dot-connector::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-smooth);
    border-radius: inherit;
}

/* Particle trail along connector */
.cc-dot-connector::after {
    content: '';
    position: absolute;
    top: -2px;
    width: 8px;
    height: 6px;
    background: var(--accent-cyan);
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0;
    z-index: 1;
}

/* Pipeline dot states - RUNNING */
.cc-pipeline-dot.running .cc-dot {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan-light);
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.5), 0 0 30px rgba(92, 232, 154, 0.2);
    animation: dotPulseRunning 1.5s ease-in-out infinite;
}

.cc-pipeline-dot.running .cc-dot::before {
    background: rgba(92, 232, 154, 0.15);
    animation: dotHaloPulse 1.5s ease-in-out infinite;
}

.cc-pipeline-dot.running .cc-dot-label {
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(92, 232, 154, 0.3);
}

.cc-pipeline-dot.running .cc-dot-connector::after {
    opacity: 1;
    animation: particleTravel 1.2s linear infinite;
}

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

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

@keyframes particleTravel {
    0% { transform: translateX(-8px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(40px); opacity: 0; }
}

/* Pipeline dot states - SUCCESS */
.cc-pipeline-dot.success .cc-dot {
    background: var(--accent-gold);
    border-color: var(--accent-gold-light);
    box-shadow: 0 0 10px rgba(92, 232, 154, 0.4), 0 0 25px rgba(92, 232, 154, 0.15);
    transition: all 0.4s var(--ease-spring);
}

.cc-pipeline-dot.success .cc-dot::before {
    background: rgba(92, 232, 154, 0.1);
}

.cc-pipeline-dot.success .cc-dot-connector {
    background: rgba(92, 232, 154, 0.3);
}

.cc-pipeline-dot.success .cc-dot-connector::before {
    transform: scaleX(1);
}

.cc-pipeline-dot.success .cc-dot-label {
    color: var(--accent-gold);
}

/* Shimmer sweep across completed stages */
.cc-pipeline-dot.success .cc-dot::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: shimmerSweepDot 3s ease-in-out infinite;
}

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

/* Pipeline dot states - ERROR */
.cc-pipeline-dot.error .cc-dot {
    background: var(--accent-red);
    border-color: var(--accent-red);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.4), 0 0 25px rgba(244, 63, 94, 0.15);
}

.cc-pipeline-dot.error .cc-dot-label {
    color: var(--accent-red);
}

.cc-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cc-pipeline-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 600;
}

.cc-pipeline-timer svg {
    color: var(--accent-gold);
}

.cc-pipeline-timer.active {
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(92, 232, 154, 0.3);
}

.cc-pipeline-timer.active svg {
    color: var(--accent-cyan);
}

/* ===== Responsive: Intermediate ===== */
@media (max-width: 1100px) {
    .cc-workspace {
        grid-template-columns: 240px 1fr 220px;
    }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 900px) {
    .cc-workspace {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }

    .cc-sidebar-left {
        border-right: none;
        border-bottom: none;
        max-height: 280px;
    }

    .cc-sidebar-right {
        border-left: none;
        border-top: none;
        max-height: 250px;
    }

    .cc-char-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cc-preview {
        height: min(50vh, 480px);
        width: auto;
    }

    .cc-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cc-pipeline-dots {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .header-center {
        display: none;
    }
}

@media (max-width: 600px) {
    .cc-workspace {
        grid-template-columns: 1fr;
    }

    .cc-sidebar-left,
    .cc-sidebar-right {
        max-height: 200px;
    }

    .cc-char-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cc-carousel-card {
        width: 48px;
        height: 62px;
    }

    .cc-dot-label {
        display: none;
    }

    .cc-dot-connector {
        width: 16px;
    }
}

/* ==================== CALENDAR & SAVED LOOKS ==================== */

.calendar-section {
    margin-top: 16px;
}

.calendar-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    padding: 16px;
}

.calendar-sub-heading {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.saved-looks-count {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Saved Looks Grid */
.saved-looks-panel {
    border-right: none;
    padding-right: 16px;
}

.saved-looks-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
}

.saved-looks-empty {
    text-align: center;
    padding: 20px 10px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.saved-look-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 250ms var(--ease-smooth);
    position: relative;
    background: rgba(92, 232, 154, 0.04);
    backdrop-filter: blur(8px);
}

.saved-look-card:hover {
    background: rgba(92, 232, 154, 0.1);
    border-color: rgba(92, 232, 154, 0.35);
    box-shadow: 0 2px 12px rgba(92, 232, 154, 0.06);
}

.saved-look-card.selected {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.1);
    box-shadow: 0 0 0 1px var(--accent-gold);
}

.saved-look-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-card);
    flex-shrink: 0;
}

.saved-look-info {
    flex: 1;
    min-width: 0;
}

.saved-look-name {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-look-meta {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
}

.saved-look-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 60, 60, 0.8);
    border: none;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.saved-look-card:hover .saved-look-delete {
    display: flex;
}

/* Calendar Grid */
.calendar-grid-panel {
    overflow-x: auto;
}

.calendar-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 4px;
}

.calendar-header-cell {
    text-align: center;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--accent-gold);
    padding: 8px 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.calendar-time-label {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.calendar-slot {
    min-height: 42px;
    border-radius: 6px;
    border: 1px dashed rgba(92, 232, 154, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 250ms var(--ease-smooth);
    position: relative;
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    padding: 4px;
    background: rgba(92, 232, 154, 0.02);
}

.calendar-slot:hover {
    border-color: var(--accent-gold);
    background: rgba(92, 232, 154, 0.08);
    border-style: solid;
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.05);
}

.calendar-slot.filled {
    border-style: solid;
    border-color: rgba(92, 232, 154, 0.4);
    background: rgba(92, 232, 154, 0.08);
    color: var(--text-primary);
    font-weight: 500;
}

.calendar-slot.disabled {
    opacity: 0.3;
    pointer-events: none;
    border-color: transparent;
}

.calendar-slot-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 60, 60, 0.8);
    border: none;
    color: white;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.calendar-slot.filled:hover .calendar-slot-remove {
    display: flex;
}

/* ── Hover Overlay Actions (Midjourney/Leonardo style) ── */
.asset-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: flex-end;
    padding: 8px;
    gap: 6px;
    border-radius: inherit;
    z-index: 3;
    pointer-events: none;
}
.asset-card:hover .asset-overlay {
    opacity: 1;
    pointer-events: auto;
}
.asset-overlay-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.asset-overlay-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}
.asset-overlay-btn.accent {
    background: rgba(92, 232, 154, 0.6);
}
.asset-overlay-btn.accent:hover {
    background: rgba(92, 232, 154, 0.85);
}

/* Legacy button styles — hidden, replaced by overlay */
.asset-save-look-btn,
.asset-download-btn {
    display: none !important;
}

.lightbox-download-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(92, 232, 154, 0.15);
    border: 1px solid rgba(92, 232, 154, 0.3);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.lightbox-download-btn:hover {
    background: rgba(92, 232, 154, 0.3);
    border-color: rgba(92, 232, 154, 0.5);
}

.lightbox-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lightbox-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
}

.lightbox-action-btn:hover {
    background: rgba(92, 232, 154, 0.2);
    border-color: rgba(92, 232, 154, 0.4);
}

.lightbox-action-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

@media (max-width: 900px) {
    .calendar-body {
        grid-template-columns: 1fr;
    }

    .saved-looks-panel {
        border-right: none;
        border-bottom: none;
        padding-right: 0;
        padding-bottom: 12px;
    }

    .saved-looks-grid {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }
}

/* ==================== CHARACTER BIO PREVIEW ==================== */
.cc-preview-bio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    padding: 4px 12px;
    max-width: 280px;
}
.cc-bio-personality {
    font-size: var(--text-2xs);
    color: rgba(92, 232, 154, 0.7);
    text-align: center;
    line-height: 1.3;
    font-style: italic;
    background: rgba(92, 232, 154, 0.06);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 4px 12px;
}
.cc-bio-location {
    font-size: var(--text-2xs);
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

/* Bio sections in card detail */
.card-detail-bio-header h4 {
    color: var(--accent-gold);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: none;
    padding-bottom: 6px;
    margin-bottom: 2px;
}

/* ==================== CONTENT AGENT UI ==================== */
.btn-agent {
    background: rgba(92, 232, 154, 0.15);
    border: none;
    color: var(--accent-gold);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-agent:hover {
    background: rgba(92, 232, 154, 0.25);
    border-color: rgba(92, 232, 154, 0.5);
}
.btn-agent.loading {
    opacity: 0.5;
    pointer-events: none;
}
.btn-agent.loading svg {
    animation: spin 1s linear infinite;
}
/* duplicate @keyframes spin removed — canonical at line 1034 */

.cc-agent-theme-row {
    display: flex;
    gap: 8px;
    padding: 0 4px;
    margin-top: 4px;
}
.cc-agent-theme-row .iphone-input,
.cc-agent-theme-row .iphone-select {
    font-size: var(--text-xs);
    padding: 5px 8px;
    background: rgba(10, 8, 4, 0.5);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
}

/* Content Agent Preview Card */
.cc-agent-preview {
    background: rgba(20, 16, 8, 0.85);
    border: none;
    border-radius: 12px;
    margin: 8px 0;
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.cc-agent-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: none;
}
.cc-agent-preview-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cc-agent-preview-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.cc-agent-preview-close:hover { color: var(--text-primary); }
.cc-agent-preview-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.cc-agent-field label {
    display: block;
    font-size: var(--text-2xs);
    color: rgba(92, 232, 154, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.cc-agent-field .iphone-textarea,
.cc-agent-field .iphone-input {
    font-size: var(--text-xs);
    padding: 6px 8px;
    background: rgba(10, 8, 4, 0.6);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    width: 100%;
    resize: vertical;
}
.cc-agent-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 14px;
    border-top: none;
}

/* ==================== MASTER AGENT CHAT ==================== */
.master-agent-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    height: 52px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-cyan-dark));
    border: none;
    color: #000;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px 0 16px;
    box-shadow: 0 4px 24px rgba(92, 232, 154, 0.35), 0 0 30px rgba(92, 232, 154, 0.15);
    transition: all 0.3s;
    animation: fabPulse 3s ease-in-out infinite;
}
@keyframes fabPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.9; }
}
.master-agent-fab-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.master-agent-fab:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 32px rgba(92, 232, 154, 0.5);
    animation: none;
}
.master-agent-fab.active {
    background: rgba(92, 232, 154, 0.15);
    color: var(--accent-gold);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    animation: none;
    padding: 0 14px;
    width: 48px;
    border-radius: 50%;
}
.master-agent-fab.active .master-agent-fab-label {
    display: none;
}

/* ==================== LOKI CHARACTER — JÖRMUNGANDR ==================== */
.loki-character {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto;
    left: auto;
    z-index: 2147483000; /* highest-in-practice — guarantees above every panel */
    cursor: grab;
    user-select: none;
    animation: serpentUndulate 4s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(92,232,154,0.45)) drop-shadow(0 0 36px rgba(92,232,154,0.12));
    transition: filter 0.3s;
    width: 64px;
}
.loki-character:hover {
    filter: drop-shadow(0 0 28px rgba(92,232,154,0.5)) drop-shadow(0 0 60px rgba(92,232,154,0.15));
}
.loki-character:hover .serpent-tongue { opacity: 0.9 !important; }

/* Minimize button — always visible */
.loki-minimize-btn {
    position: absolute; top: -6px; right: -6px; z-index: 10000;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(10,14,18,0.92); border: 1px solid rgba(92,232,154,0.3);
    color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.18s;
    opacity: 0;
    backdrop-filter: blur(8px);
}
.loki-character:hover .loki-minimize-btn { opacity: 1; }
.loki-minimize-btn:hover { background: rgba(239,68,68,0.85); color: #fff; border-color: transparent; transform: scale(1.1); }

/* Minimized state — pulsing mint gem, clearly clickable to restore */
.loki-character.loki-minimized {
    width: 44px !important; height: 44px !important;
    overflow: visible; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(168,255,204,0.9) 0%, rgba(92,232,154,1) 40%, rgba(23,106,60,1) 100%);
    opacity: 1;
    animation: jormMinPulse 2.4s ease-in-out infinite !important;
    filter: drop-shadow(0 0 10px rgba(92,232,154,0.55)) drop-shadow(0 0 22px rgba(92,232,154,0.18)) !important;
    cursor: pointer; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    border: 1px solid rgba(168,255,204,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.25);
}
.loki-character.loki-minimized::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><polygon points='12,2 20,9 12,22 4,9' fill='%23062b13' stroke='rgba(255,255,255,0.4)' stroke-width='0.5' stroke-linejoin='round'/></svg>") center/50% no-repeat;
    pointer-events: none;
}
.loki-character.loki-minimized * { display: none !important; }
.loki-character.loki-minimized:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(92,232,154,0.2), inset 0 1px 0 rgba(255,255,255,0.4);
}
@keyframes jormMinPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(92,232,154,0.55)) drop-shadow(0 0 22px rgba(92,232,154,0.18)); }
    50%      { filter: drop-shadow(0 0 18px rgba(92,232,154,0.75)) drop-shadow(0 0 36px rgba(92,232,154,0.3)); }
}
.loki-character.dragging {
    cursor: grabbing;
    animation: none;
    filter: drop-shadow(0 0 36px rgba(45,183,48,0.6)) drop-shadow(0 0 80px rgba(92,232,154,0.2));
}
/* Slow undulating rise-and-sway */
@keyframes serpentUndulate {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(0.5deg); }
    50% { transform: translateY(-8px) rotate(0deg); }
    75% { transform: translateY(-4px) rotate(-0.5deg); }
}

.loki-avatar {
    display: block;
    transform-origin: 50% 90%;
    will-change: transform, filter;
}

/* ── HOVER — scale + tilt + stronger glow ─────────────────────── */
.loki-character:hover {
    animation: jormHoverBob 1.4s ease-in-out infinite !important;
    filter: drop-shadow(0 0 22px rgba(92,232,154,0.6)) drop-shadow(0 0 50px rgba(92,232,154,0.22)) !important;
}
@keyframes jormHoverBob {
    0%, 100% { transform: scale(1.15) rotate(-3deg) translateY(0); }
    50%      { transform: scale(1.18) rotate(-1.5deg) translateY(-6px); }
}

/* ── CLICK — quick punch + glow flash (JS adds/removes .jorm-punched) */
.loki-character.jorm-punched {
    animation: jormPunch 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    filter: drop-shadow(0 0 32px rgba(168,255,204,1)) drop-shadow(0 0 60px rgba(92,232,154,0.6)) !important;
}
@keyframes jormPunch {
    0%   { transform: scale(1);    }
    35%  { transform: scale(0.88) rotate(4deg); }
    65%  { transform: scale(1.22) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ── TALKING — rhythmic bob + pulsing aura (like speech) ───────── */
.loki-character[data-mood="talking"] .loki-avatar {
    animation: jormTalk 0.55s ease-in-out infinite alternate;
}
@keyframes jormTalk {
    0%   { transform: scale(1)    translateY(0)   rotate(0); filter: drop-shadow(0 0 12px rgba(92,232,154,0.4)); }
    100% { transform: scale(1.04) translateY(-2px) rotate(1deg); filter: drop-shadow(0 0 22px rgba(92,232,154,0.65)); }
}

/* ── THINKING — slow figure-8 sway ─────────────────────────────── */
.loki-character[data-mood="thinking"] .loki-avatar {
    animation: jormThink 3.2s ease-in-out infinite;
}
@keyframes jormThink {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25%      { transform: rotate(-3deg) translateX(-2px); }
    50%      { transform: rotate(0deg)  translateX(0); }
    75%      { transform: rotate(3deg)  translateX(2px); }
}

/* ── GRUMPY — low shuddering anger, subtle red shift ───────────── */
.loki-character[data-mood="grumpy"] .loki-avatar,
.loki-character[data-mood="annoyed"] .loki-avatar {
    animation: jormGrump 0.16s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(255,100,100,0.35)) drop-shadow(0 0 30px rgba(255,60,60,0.12)) hue-rotate(-8deg);
}
@keyframes jormGrump {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25%      { transform: translateX(-1px) rotate(-0.4deg); }
    75%      { transform: translateX(1px) rotate(0.4deg); }
}

/* ── IDLE — keep the container undulation but keep the avatar still so
   it settles into a calm breathing serpent ────────────────────── */
.loki-character[data-mood="idle"] .loki-avatar {
    animation: jormIdleBreathe 4.5s ease-in-out infinite;
}
@keyframes jormIdleBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}

/* When the speech bubble is visible, the eye-glow pulses faster to feel responsive */
.loki-character .loki-speech-bubble.visible ~ .loki-avatar,
.loki-character:has(.loki-speech-bubble.visible) .loki-avatar {
    filter: drop-shadow(0 0 18px rgba(92,232,154,0.55)) drop-shadow(0 0 34px rgba(92,232,154,0.18));
}

/* --- IDLE: slow slit-eye pulse --- */
.loki-character[data-mood="idle"] .loki-pupil {
    animation: slitPulse 3s ease-in-out infinite;
}
@keyframes slitPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
/* Idle blink — narrow the eye sockets */
.loki-character[data-mood="idle"] .loki-eye {
    animation: serpentBlink 5s ease-in-out infinite;
}
@keyframes serpentBlink {
    0%, 40%, 44%, 100% { ry: 3.5; }
    42% { ry: 0.3; }
}

/* --- THINKING: pupils scan side to side --- */
.loki-character[data-mood="thinking"] .loki-pupil {
    animation: serpentScan 1.2s ease-in-out infinite alternate;
}
@keyframes serpentScan {
    0% { transform: translateX(-1.5px); }
    100% { transform: translateX(1.5px); }
}
/* Thinking: tongue flicks */
.loki-character[data-mood="thinking"] .serpent-tongue {
    opacity: 0.9 !important;
    animation: tongueFlick 0.6s ease-in-out infinite;
}

/* --- TALKING: jaw opens, tongue active --- */
.loki-character[data-mood="talking"] .loki-mouth {
    animation: serpentJaw 0.35s ease-in-out infinite alternate;
}
@keyframes serpentJaw {
    0% { d: path("M34 20 Q40.5 22 47 20"); }
    100% { d: path("M34 20 Q40.5 27 47 20"); }
}
.loki-character[data-mood="talking"] .serpent-tongue {
    opacity: 0.9 !important;
    animation: tongueFlick 0.4s ease-in-out infinite;
}
.loki-character[data-mood="talking"] .serpent-fang-l,
.loki-character[data-mood="talking"] .serpent-fang-r {
    animation: fangExtend 0.35s ease-in-out infinite alternate;
}
@keyframes fangExtend {
    0% { opacity: 0.9; }
    100% { opacity: 1; stroke-width: 1.5; }
}

/* --- ANNOYED / GRUMPY: eyes narrow, body tenses --- */
.loki-character[data-mood="annoyed"] .loki-eye,
.loki-character[data-mood="grumpy"] .loki-eye {
    animation: serpentGlare 0.3s ease forwards;
}
@keyframes serpentGlare {
    to { ry: 2; }
}
.loki-character[data-mood="annoyed"] .loki-pupil,
.loki-character[data-mood="grumpy"] .loki-pupil {
    animation: eyeFlare 2s ease-in-out infinite alternate;
}
@keyframes eyeFlare {
    0% { opacity: 0.9; }
    100% { opacity: 1; }
}

/* Tongue flick keyframes (shared) */
@keyframes tongueFlick {
    0%, 100% { opacity: 0; }
    30%, 70% { opacity: 0.9; }
}

/* --- Spine glow pulse --- */
.serpent-spine-glow circle,
.serpent-horn-glow {
    animation: spineGlow 2.5s ease-in-out infinite alternate;
}
@keyframes spineGlow {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}
/* Bioluminescent spot shimmer */
.serpent-biolum circle {
    animation: bioShimmer 3s ease-in-out infinite alternate;
}
@keyframes bioShimmer {
    0% { opacity: 0.15; }
    100% { opacity: 0.5; }
}

/* --- Name tag --- */
.loki-nametag {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--accent-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    border-radius: 6px;
    padding: 2px 8px;
    margin-top: -6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* --- Speech bubble --- */
.loki-speech-bubble {
    position: absolute;
    bottom: 140px;
    right: 0;
    min-width: 160px;
    max-width: 220px;
    padding: 8px 12px;
    background: var(--glass-bg-overlay);
    backdrop-filter: var(--glass-blur);
    border-radius: 12px 12px 4px 12px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    font-style: italic;
    box-shadow: var(--glass-shadow);
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: all 0.3s var(--ease-smooth);
    pointer-events: none;
}
.loki-speech-bubble.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.master-agent-panel {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 400px;
    max-height: 540px;
    background: var(--glass-bg-overlay);
    border: none;
    border-radius: 18px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: var(--glass-blur-heavy);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 40px rgba(92,232,154,0.05), var(--glass-inset-glow);
    animation: slideUpIn 0.25s var(--ease-cinematic);
    transition: width 0.25s var(--ease-cinematic), max-height 0.25s var(--ease-cinematic), bottom 0.25s var(--ease-cinematic), right 0.25s var(--ease-cinematic), border-radius 0.25s var(--ease-cinematic);
}
.master-agent-panel.expanded {
    width: 640px;
    max-height: 82vh;
    bottom: 24px;
    right: 24px;
}
.master-agent-panel.expanded .master-agent-messages {
    max-height: calc(82vh - 160px);
    min-height: 300px;
}
.master-agent-expand {
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 5px 7px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}
.master-agent-expand:hover {
    color: #5ce89a;
    border-color: rgba(92,232,154,0.3);
    background: rgba(92,232,154,0.06);
}

/* RAG source chips — shown below the agent reply when retrieval informed it */
.agent-sources-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3px;
}
.agent-sources-label {
    color: rgba(92,232,154,0.55);
    text-transform: uppercase;
    padding: 2px 0;
    margin-right: 2px;
}
.agent-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(92,232,154,0.2);
    background: rgba(92,232,154,0.05);
    color: rgba(232,232,236,0.7);
    font-size: 11px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-source-chip-score {
    color: rgba(92,232,154,0.55);
    font-weight: 600;
}
@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.master-agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: none;
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.04), transparent);
}
.master-agent-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-gold);
}
.master-agent-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.master-agent-close:hover { color: var(--text-primary); }

.master-agent-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    max-height: 340px;
}
.agent-msg {
    display: flex;
    max-width: 88%;
}
.agent-msg-user {
    align-self: flex-end;
    justify-content: flex-end;
}
.agent-msg-agent {
    align-self: flex-start;
}
.agent-msg-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: var(--text-xs);
    line-height: 1.45;
    word-break: break-word;
}
.agent-msg-user .agent-msg-bubble {
    background: var(--glass-bg-elevated);
    color: var(--text-primary);
    border-bottom-right-radius: 4px;
    border: none;
    backdrop-filter: var(--glass-blur-light);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2), var(--glass-inset-glow);
}
.agent-msg-agent .agent-msg-bubble {
    background: rgba(92, 232, 154, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-bottom-left-radius: 4px;
    border: none;
    backdrop-filter: var(--glass-blur-light);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(92,232,154,0.06);
}

.master-agent-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.7rem;
    color: rgba(92, 232, 154, 0.5);
}
.agent-thinking-dots {
    display: flex;
    gap: 3px;
}
.agent-thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    opacity: 0.3;
    animation: thinkPulse 1.4s infinite;
    box-shadow: 0 0 6px rgba(92, 232, 154, 0.3);
}
.agent-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.agent-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkPulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.1); }
}

.master-agent-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: none;
}
.master-agent-textarea {
    flex: 1;
    background: var(--glass-bg-recessed);
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: inherit;
    resize: none;
    min-height: 38px;
    max-height: 80px;
    line-height: 1.4;
    backdrop-filter: var(--glass-blur-light);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
    transition: all 250ms var(--ease-smooth);
}
.master-agent-textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}
.master-agent-textarea:focus {
    outline: none;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(92,232,154,0.3);
}
.master-agent-send {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-cyan-dark));
    border: none;
    color: #000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(92, 232, 154, 0.2);
}
.master-agent-send:hover {
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-cyan));
    box-shadow: 0 4px 16px rgba(92, 232, 154, 0.2);
    transform: scale(1.05);
}

/* Voice Controls */
.master-agent-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.agent-voice-toggle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.agent-voice-toggle.active {
    color: var(--accent-gold);
    border-color: rgba(92, 232, 154, 0.4);
    background: rgba(92, 232, 154, 0.1);
}
.agent-voice-toggle:hover {
    border-color: rgba(92, 232, 154, 0.35);
    color: rgba(255, 255, 255, 0.6);
}

.agent-mic-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.agent-mic-btn:hover {
    color: var(--accent-gold);
    border-color: rgba(92, 232, 154, 0.4);
}
.agent-mic-btn.recording {
    background: rgba(244, 63, 94, 0.2);
    border-color: var(--accent-red);
    color: var(--accent-red);
    animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.agent-voice-recording {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(244, 63, 94, 0.08);
    border-top: none;
    font-size: var(--text-xs);
    color: var(--accent-red);
}
.voice-recording-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-red);
    animation: recordPulse 1s ease-in-out infinite;
}
@keyframes recordPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}
.voice-recording-stop {
    margin-left: auto;
    background: rgba(244, 63, 94, 0.15);
    border: none;
    color: var(--accent-red);
    font-size: var(--text-2xs);
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
}
.voice-recording-stop:hover {
    background: rgba(244, 63, 94, 0.25);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 600px) {
    .master-agent-panel {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 80px;
        max-height: 70vh;
    }
    .master-agent-fab {
        bottom: 16px;
        right: 12px;
        padding: 0 14px 0 12px;
        width: 46px;
        height: 46px;
    }
    .cc-agent-preview {
        margin: 4px 0;
    }
    .cc-agent-preview-body {
        max-height: 240px;
    }
}

/* ==================== SCROLL-TRIGGERED REVEAL ANIMATIONS ==================== */
.reveal-up {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: all 0.6s var(--ease-cinematic);
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered entrance delays for children */
.reveal-up:nth-child(1) { transition-delay: 0s; }
.reveal-up:nth-child(2) { transition-delay: 0.08s; }
.reveal-up:nth-child(3) { transition-delay: 0.16s; }
.reveal-up:nth-child(4) { transition-delay: 0.24s; }
.reveal-up:nth-child(5) { transition-delay: 0.32s; }

/* ==================== ENHANCED FOOTER PIPELINE BAR ==================== */
/* (moved to main .cc-footer block above) */

/* ==================== ENHANCED SIDEBAR GLASS ==================== */
.cc-sidebar-left,
.cc-sidebar-right {
    backdrop-filter: blur(14px) saturate(1.3);
}

.cc-sidebar-left {
    box-shadow: inset -1px 0 0 rgba(92, 232, 154, 0.08);
}

.cc-sidebar-right {
    box-shadow: inset 1px 0 0 rgba(92, 232, 154, 0.08);
}

/* ==================== ENHANCED 3D TILT ON CHAR CARDS ==================== */
.cc-char-thumb:hover {
    border-color: rgba(92, 232, 154, 0.35);
    transform: scale(1.06) perspective(400px) rotateY(2deg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 16px rgba(92, 232, 154, 0.12);
}

/* ==================== CAROUSEL ENHANCED GLASS ==================== */
.cc-carousel {
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(92, 232, 154, 0.04);
}

.cc-carousel-card {
    transition: all 0.3s var(--ease-spring);
}

.cc-carousel-card:hover {
    border-color: rgba(92, 232, 154, 0.3);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(92, 232, 154, 0.1);
}

.cc-carousel-card.selected {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 16px rgba(92, 232, 154, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ==================== STAT CARDS ENHANCED ==================== */
/* (merged with main .stat-card block above) */

/* ==================== SOCIAL CARD ENHANCED ==================== */
/* (merged with main .social-card block above) */

/* ==================== SKELETON / SHIMMER LOADING ==================== */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--depth-elevated);
    border-radius: var(--radius-sm);
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(92, 232, 154, 0.06) 30%,
        rgba(92, 232, 154, 0.12) 50%,
        rgba(92, 232, 154, 0.06) 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeletonSweep 1.8s ease-in-out infinite;
}

@keyframes skeletonSweep {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.skeleton-card {
    aspect-ratio: 3/4;
    border: none;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }

.skeleton-thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    border: none;
}

/* ── Generation Shimmer Placeholder (Midjourney-style) ── */
.generating-placeholder {
    aspect-ratio: 9/16;
    background: linear-gradient(135deg, #1a1a24 0%, #252535 50%, #1a1a24 100%);
    background-size: 200% 200%;
    animation: shimmer 1.5s ease infinite;
    border-radius: 12px;
    border: 1px solid rgba(92, 232, 154, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.generating-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(92, 232, 154, 0.06), transparent 70%);
    animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.generating-card {
    animation: pulse-border 2s infinite;
    break-inside: avoid;
    margin-bottom: 12px;
}
@keyframes pulse-border {
    0%, 100% { border-color: rgba(92, 232, 154, 0.15); }
    50% { border-color: rgba(92, 232, 154, 0.45); }
}

.generating-spinner-icon {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(92, 232, 154, 0.2);
    border-top-color: rgba(92, 232, 154, 0.7);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==================== EMPTY STATE SHARED ==================== */
.empty-state-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    animation: emptyFloat 4s ease-in-out infinite;
}

.empty-state-anim svg {
    opacity: 0.3;
}

.empty-state-anim .empty-state-title {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.empty-state-anim .empty-state-hint {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
}

/* ==================== CYAN DUAL-ACCENT SYSTEM (Task 19) ==================== */

/* Active tab indicator → cyan */
.top-nav-tab.active {
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

.top-nav-tab.active svg {
    stroke: var(--accent-cyan) !important;
}

/* Loading spinners → cyan border-top */
.spinner {
    border-top-color: var(--accent-cyan) !important;
}

/* Active sidebar section headers → cyan left border */
.cc-sidebar-section.open > .cc-sidebar-toggle {
    border-left: 3px solid var(--accent-cyan);
    padding-left: 15px;
}

/* Motion tab active → cyan underline */
.cc-motion-tab.active {
    background: none;
    border-bottom-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* ==================== PERFORMANCE HINTS (Task 20) ==================== */
.cc-dot,
.cc-motion-card.selected,
.toast,
.master-agent-fab {
    will-change: transform;
}

/* Remove will-change from static cards */
.stat-card {
    will-change: auto;
}

/* ==================== FREEPIK-INSPIRED ENHANCEMENTS ==================== */

/* ── Feature 1: Enhanced Constellation Background Canvas ── */
/* (Canvas rendering upgraded in app.js — these are CSS overlays) */
#bgCanvas {
    opacity: 1;
    transition: opacity 0.5s;
}

/* Subtle radial vignette to frame the constellation */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ── Feature 2: Bright Cyan Glowing Border (Freepik-style) ── */

/* Character card selected — thick cyan glow like Freepik's selected node */
.cc-char-thumb.selected {
    border-color: var(--accent-cyan) !important;
    box-shadow:
        0 0 8px rgba(92, 232, 154, 0.4),
        0 0 20px rgba(92, 232, 154, 0.2),
        0 0 40px rgba(92, 232, 154, 0.1),
        inset 0 0 8px rgba(92, 232, 154, 0.05);
    animation: cyanGlowPulse 2.5s ease-in-out infinite;
}

.character-card.selected {
    border-color: var(--accent-cyan) !important;
    box-shadow:
        0 0 8px rgba(92, 232, 154, 0.4),
        0 0 20px rgba(92, 232, 154, 0.2),
        0 0 40px rgba(92, 232, 154, 0.1);
    animation: cyanGlowPulse 2.5s ease-in-out infinite;
}

.cc-motion-card.selected {
    border-color: var(--accent-cyan) !important;
    box-shadow:
        0 0 8px rgba(92, 232, 154, 0.4),
        0 0 20px rgba(92, 232, 154, 0.2),
        0 0 40px rgba(92, 232, 154, 0.1);
}

/* Preview frame gets cyan glow when image is loaded */
.cc-preview.has-image {
    border-color: rgba(92, 232, 154, 0.3);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(92, 232, 154, 0.15),
        0 0 60px rgba(92, 232, 154, 0.08);
}

.cc-preview.has-image .cc-preview-hud-corner--tl,
.cc-preview.has-image .cc-preview-hud-corner--tr,
.cc-preview.has-image .cc-preview-hud-corner--bl,
.cc-preview.has-image .cc-preview-hud-corner--br {
    border-color: var(--silver-light) !important;
    opacity: 0.7;
    filter: drop-shadow(0 0 6px rgba(210,210,230,0.4));
}

/* Carousel card selected glow */
.cc-carousel-card.selected {
    border-color: var(--accent-cyan) !important;
    box-shadow:
        0 0 8px rgba(92, 232, 154, 0.4),
        0 0 20px rgba(92, 232, 154, 0.2);
}

@keyframes cyanGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(92, 232, 154, 0.4),
            0 0 20px rgba(92, 232, 154, 0.2),
            0 0 40px rgba(92, 232, 154, 0.1);
    }
    50% {
        box-shadow:
            0 0 12px rgba(92, 232, 154, 0.5),
            0 0 28px rgba(92, 232, 154, 0.25),
            0 0 50px rgba(92, 232, 154, 0.12);
    }
}

/* ── Feature 3: Traveling Gradient Glow (Processing States) ── */

/* Wrapper for any element that needs the traveling border glow */
.traveling-glow {
    position: relative;
    overflow: visible;
}

.traveling-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        transparent 0%,
        var(--accent-cyan) 8%,
        var(--accent-cyan-light) 16%,
        var(--accent-gold) 24%,
        transparent 32%,
        transparent 100%
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s var(--ease-smooth);
    animation: travelingGlow 2.5s linear infinite;
    pointer-events: none;
}

/* Mask inner area to show only the border ring */
.traveling-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--depth-elevated);
    z-index: -1;
    pointer-events: none;
}

.traveling-glow.active::before {
    opacity: 1;
}

@keyframes travelingGlow {
    to { --glow-angle: 360deg; }
}

/* Fallback for browsers without @property support: use transform rotation */
.traveling-glow-wrap {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s var(--ease-smooth);
    z-index: -1;
    pointer-events: none;
}

.traveling-glow-wrap.active {
    opacity: 1;
}

.traveling-glow-wrap .glow-spinner {
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--accent-cyan) 8%,
        var(--accent-cyan-light) 16%,
        var(--accent-gold) 24%,
        transparent 32%,
        transparent 100%
    );
    animation: glowRingRotate 2.5s linear infinite;
}

.traveling-glow-wrap .glow-mask {
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: var(--depth-elevated);
}

/* Pipeline dot traveling glow during running state */
.cc-pipeline-dot.running {
    position: relative;
}

.cc-pipeline-dot.running .cc-dot {
    position: relative;
    overflow: visible;
}

.cc-pipeline-dot.running .cc-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--accent-cyan) 15%,
        transparent 30%,
        transparent 100%
    );
    animation: glowRingRotate 1.5s linear infinite;
    z-index: -1;
    filter: blur(1px);
}

/* Preview card traveling glow during generation */
.cc-preview.generating {
    border-color: transparent !important;
}

.cc-preview.generating::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--radius-lg) + 3px);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(92, 232, 154, 0.6) 8%,
        rgba(51, 255, 189, 0.4) 16%,
        rgba(92, 232, 154, 0.4) 24%,
        transparent 32%,
        transparent 60%,
        rgba(45, 183, 48, 0.3) 70%,
        rgba(92, 232, 154, 0.5) 80%,
        transparent 88%
    );
    z-index: -1;
    filter: blur(2px);
    animation: glowRingRotate 3s linear infinite;
}

/* Outer diffuse glow for generating preview */
.cc-preview.generating ~ .cc-preview-generating-glow {
    position: absolute;
    inset: -12px;
    border-radius: calc(var(--radius-lg) + 12px);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(92, 232, 154, 0.12) 15%,
        transparent 30%,
        transparent 50%,
        rgba(45, 183, 48, 0.08) 65%,
        transparent 80%
    );
    filter: blur(16px);
    animation: glowRingRotate 3s linear infinite;
    pointer-events: none;
    z-index: -2;
}

/* Agent preview card gets traveling glow while AI is thinking */
.cc-agent-preview.thinking {
    border-color: transparent;
    overflow: visible;
}

.cc-agent-preview.thinking::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-md) + 2px);
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(92, 232, 154, 0.5) 10%,
        rgba(51, 255, 189, 0.3) 20%,
        transparent 30%,
        transparent 100%
    );
    z-index: -1;
    filter: blur(1px);
    animation: glowRingRotate 2s linear infinite;
}

/* ── Feature 4: Freepik-Style Dotted Circle Loading Spinner ── */

.freepik-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
}

.freepik-spinner {
    position: relative;
    width: 48px;
    height: 48px;
}

/* Dotted circle ring */
.freepik-spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(92, 232, 154, 0.3);
    animation: spinRotateReverse 8s linear infinite;
}

/* Traveling arc highlight */
.freepik-spinner::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: var(--accent-cyan);
    border-right-color: rgba(92, 232, 154, 0.3);
    filter: drop-shadow(0 0 6px rgba(92, 232, 154, 0.4));
    animation: spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Inner pulsing dot */
.freepik-spinner-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.5);
    animation: freepikDotPulse 1.5s ease-in-out infinite;
}

@keyframes freepikDotPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.4); opacity: 1; }
}

@keyframes spinRotateReverse {
    to { transform: rotate(-360deg); }
}

@keyframes spinRotate {
    to { transform: rotate(360deg); }
}

.freepik-loader-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.freepik-loader-subtext {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin-top: -8px;
}

/* Full-page loading overlay (for initial app load) */
.freepik-loading-overlay {
    position: fixed;
    inset: 0;
    background: #000 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 10000;
    opacity: 1 !important;
    transition: opacity 0.6s ease, visibility 0.6s;
}
.freepik-loading-overlay.fade-out {
    opacity: 0 !important;
    visibility: hidden;
}

.freepik-loading-overlay .freepik-spinner {
    width: 64px;
    height: 64px;
}

.freepik-loading-overlay .freepik-spinner-dot {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
}

.freepik-loading-overlay .freepik-loader-text {
    font-size: var(--text-base);
    font-family: var(--font-heading);
}

/* Particle constellation dots in background (Freepik "Your space is ready") */
.constellation-dot {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ── Generating state enhancements ── */

/* Character cards pulse cyan during generation */
.cc-char-thumb.selected.generating-active {
    animation: cyanGlowBreath 1.5s ease-in-out infinite;
}

@keyframes cyanGlowBreath {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(92, 232, 154, 0.3),
            0 0 20px rgba(92, 232, 154, 0.15);
        border-color: var(--accent-cyan);
    }
    50% {
        box-shadow:
            0 0 16px rgba(92, 232, 154, 0.5),
            0 0 40px rgba(92, 232, 154, 0.25),
            0 0 60px rgba(92, 232, 154, 0.1);
        border-color: var(--accent-cyan-light);
    }
}

/* Prompt bar enhanced generating state */
.cc-prompt-glow-wrapper.generating {
    /* The traveling glow is already handled above — enhance with extra diffuse glow */
}

.cc-prompt-glow-wrapper.generating .cc-generate-btn {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark));
    color: #000;
    box-shadow: 0 0 20px rgba(92, 232, 154, 0.3);
    animation: genBtnPulse 2s ease-in-out infinite;
}

@keyframes genBtnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(92, 232, 154, 0.3); }
    50% { box-shadow: 0 0 30px rgba(92, 232, 154, 0.5), 0 0 60px rgba(92, 232, 154, 0.15); }
}

/* ==================== PHASE 20: MICRO-INTERACTIONS EVERYWHERE ==================== */

/* Global smooth transitions for all interactive elements */
a, button, .btn, .cc-preset-chip, .cc-motion-card, .cc-char-thumb, .social-circle,
.cc-asset-tab, .cc-motion-tab, .saved-look-card, .calendar-slot, .cred-item,
.user-menu-trigger, .cc-carousel-card, .top-nav-tab {
    transition: all 250ms var(--ease-smooth);
}

/* Press feedback on all buttons */
button:active:not(.cc-sidebar-toggle):not(.top-nav-tab),
.btn:active {
    transform: scale(0.97);
}

/* Tab page transitions */
.tab-page.active {
    animation: tabFadeIn 0.3s var(--ease-cinematic);
}

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

/* Links and clickable elements — subtle color shift */
.card-title-group h2,
.cc-sidebar-label,
.popover-name {
    transition: color 250ms var(--ease-smooth);
}

/* Smooth section collapse content fade */
.cc-sidebar-dropdown > * {
    transition: padding 0.35s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.cc-sidebar-section:not(.open) .cc-sidebar-dropdown > * {
    opacity: 0;
}

.cc-sidebar-section.open .cc-sidebar-dropdown > * {
    opacity: 1;
}

/* Card glass morphism enhancement on card body */
.card {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Enhanced prompt editor in card context */
.prompt-editor {
    background: var(--depth-recessed);
    backdrop-filter: blur(12px);
    border-bottom: none;
}

.prompt-editor:focus {
    background: rgba(8, 6, 3, 0.85);
    box-shadow: inset 0 0 20px rgba(92, 232, 154, 0.03);
}

/* Sidebar section open state — cyan left border */
.cc-sidebar-section.open > .cc-sidebar-toggle {
    border-left-color: var(--accent-cyan);
    color: var(--text-primary);
}

.cc-sidebar-section.open > .cc-sidebar-toggle svg:first-child {
    color: var(--accent-cyan);
    opacity: 1;
}

/* Motion filter tabs — active underline */
.cc-motion-tab.active,
.cc-asset-tab.active {
    background: none;
    border-bottom-color: var(--accent-cyan);
    color: var(--accent-cyan);
    font-weight: 600;
}

/* Settings dropdown selects — glass style */
.cc-sidebar-right .input-select,
.cc-sidebar-right .cc-select {
    backdrop-filter: blur(12px);
    background: var(--depth-recessed);
}

/* Pipeline status badge colored pills */
.cc-footer .status-badge {
    font-weight: 600;
}

/* Breadcrumb visibility */
.header-breadcrumb {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.breadcrumb-sep {
    color: var(--accent-gold);
    margin: 0 4px;
    opacity: 0.5;
}

/* Agent button glow */
.btn-agent:hover svg {
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 4px rgba(92, 232, 154, 0.4));
}

/* ============ BATCH VIDEO CALENDAR ============ */

.batch-calendar-section { }

.batch-platforms-row {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.batch-plat-pill {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.batch-plat-pill:hover {
    border-color: var(--opal-green);
    color: var(--text-primary);
}
.batch-plat-pill.active {
    background: var(--opal-green);
    border-color: var(--opal-green);
    color: #fff;
}

.batch-upload-progress {
    padding: 10px 14px;
    margin: 8px 0;
    background: rgba(92,232,154,0.08);
    border: 1px solid rgba(92,232,154,0.2);
    border-radius: 10px;
    transition: opacity 0.5s;
}
.batch-upload-progress.fade-out { opacity: 0; }
.upload-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.upload-progress-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--opal-green);
}
.upload-progress-eta {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.upload-progress-track {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.upload-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--opal-green), #8ecf8e);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.upload-progress-detail {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.batch-platform-toggles .platform-toggle-item {
    font-size: 0.8rem;
}

.batch-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-select {
    min-width: 180px;
}

.batch-calendar-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 12px;
    padding: 12px 0 0;
}

@media (max-width: 900px) {
    .batch-calendar-body { grid-template-columns: 1fr; }
}

/* Batch Video Panel */
.batch-video-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 700px;
    overflow-y: auto;
}

.batch-video-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.batch-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--opal-green);
    flex-shrink: 0;
}

.batch-name-label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.batch-video-count {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-left: auto;
}

.batch-upload-row {
    display: flex;
    gap: 8px;
}

.batch-upload-btn {
    cursor: pointer;
}

.batch-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.batch-video-thumb {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-input);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border);
}

.batch-video-thumb:hover {
    border-color: var(--border-focus);
    transform: scale(1.02);
}

.batch-video-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-video-thumb .thumb-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-mono);
}

.batch-video-thumb.posted video {
    filter: blur(3px) brightness(0.4);
}

.batch-video-thumb.posted {
    opacity: 0.6;
}

.thumb-posted-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(92, 232, 154, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
}

.batch-video-thumb .thumb-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: rgba(244,63,94,0.8);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.batch-video-thumb:hover .thumb-delete {
    display: flex;
}

.batch-video-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

/* Batch Music Panel - Polished */
.batch-music-panel {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.music-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.music-panel-tabs {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 2px;
}

.music-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.music-tab:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
}

.music-tab.active {
    color: var(--text-primary);
    background: rgba(92, 232, 154, 0.15);
}

.music-tab svg {
    opacity: 0.7;
}

.music-tab.active svg {
    opacity: 1;
}

.music-upload-btn {
    font-size: 13px !important;
    padding: 4px 10px !important;
}

.music-tab-content {
    display: none;
}

.music-tab-content.active {
    display: block;
}

.batch-section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.batch-music-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-music-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 14px;
    transition: all 0.15s;
}

.batch-music-item:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
}

.batch-music-item .music-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(92,232,154,0.2), rgba(92,232,154,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.batch-music-item .music-icon svg {
    opacity: 0.6;
}

.batch-music-item .music-info {
    flex: 1;
    min-width: 0;
}

.batch-music-item .music-name {
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    display: block;
}

.batch-music-item .music-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.batch-music-item .music-duration {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 12px;
}

.batch-music-item .music-section {
    display: flex;
    gap: 3px;
    align-items: center;
    color: var(--text-tertiary);
    font-size: 12px;
}

.batch-music-item .music-section input {
    width: 48px;
    padding: 3px 5px;
    font-size: 12px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    text-align: center;
}

.batch-music-item .music-section input:focus {
    border-color: var(--opal-green);
    outline: none;
}

.batch-music-item .music-delete {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    opacity: 0;
}

.batch-music-item:hover .music-delete {
    opacity: 1;
}

.batch-music-item .music-delete:hover {
    color: var(--prism-rose);
    background: rgba(244,63,94,0.1);
}

.batch-music-empty {
    text-align: center;
    padding: 20px 12px;
    color: var(--text-tertiary);
    font-size: 14px;
}

/* Trending Music */
.trending-music-filters {
    margin-bottom: 8px;
}

.trending-platform-pills {
    display: flex;
    gap: 4px;
}

.platform-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.15s;
}

.platform-pill:hover {
    border-color: rgba(255,255,255,0.5);
    color: var(--text-secondary);
}

.platform-pill.active {
    background: rgba(92,232,154,0.15);
    border-color: rgba(92,232,154,0.3);
    color: var(--opal-green-light);
}

.trending-music-list, .library-music-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.trending-music-list::-webkit-scrollbar, .library-music-list::-webkit-scrollbar {
    width: 4px;
}

.trending-music-list::-webkit-scrollbar-thumb, .library-music-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}

.trend-song-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.015);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.trend-song-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border);
}

.trend-rank {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    width: 18px;
    text-align: center;
    font-family: var(--font-mono);
}

.trend-rank.top-3 {
    color: var(--opal-green-light);
}

.trend-song-info {
    flex: 1;
    min-width: 0;
}

.trend-song-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-song-artist {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-song-platforms {
    display: flex;
    gap: 4px;
    align-items: center;
}

.trend-platform-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 500;
}

.trend-platform-badge.tiktok {
    background: rgba(255,0,80,0.08);
    color: #ff6b8a;
    border: 1px solid rgba(255,0,80,0.12);
}

.trend-platform-badge.instagram {
    background: rgba(193,53,132,0.08);
    color: #d876a8;
    border: 1px solid rgba(193,53,132,0.12);
}

.trend-uses {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.trend-add-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-tertiary);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    opacity: 0;
}

.trend-song-card:hover .trend-add-btn {
    opacity: 1;
}

.trend-add-btn:hover {
    background: rgba(92,232,154,0.15);
    border-color: var(--opal-green);
    color: var(--opal-green-light);
}

/* Library Search */
.library-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
}

.library-search-bar input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.library-search-bar input::placeholder {
    color: var(--text-tertiary);
}

.library-genre-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.genre-pill {
    padding: 3px 8px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.15s;
}

.genre-pill:hover {
    border-color: rgba(255,255,255,0.5);
    color: var(--text-secondary);
}

.genre-pill.active {
    background: rgba(92,232,154,0.12);
    border-color: rgba(92,232,154,0.25);
    color: var(--opal-green-light);
}

.music-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Genre/mood tag */
.trend-genre-tag {
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
    color: var(--text-tertiary);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Month Calendar */
.batch-calendar-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.month-calendar-container {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 10px;
}

.month-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.month-calendar-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.month-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-header-cell {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 4px 0;
    text-transform: uppercase;
}

.cal-day-cell {
    aspect-ratio: 1 / 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    position: relative;
    min-height: 50px;
    border: 1px solid transparent;
    user-select: none;
}

.cal-day-cell:hover {
    background: var(--bg-card-hover);
}

.cal-day-cell.today {
    border-color: var(--opal-green);
    font-weight: 600;
}

.cal-day-cell.other-month {
    color: var(--text-tertiary);
    opacity: 0.4;
}

.cal-day-cell.selected {
    color: #fff;
    font-weight: 600;
}

.cal-day-cell.range-start {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.cal-day-cell.range-end {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.cal-day-cell.range-start.range-end {
    border-radius: var(--radius-sm);
}

.cal-day-cell.in-range {
    color: var(--text-primary);
}

.cal-day-cell.in-range:not(.range-start):not(.range-end) {
    border-radius: 0;
}

.cal-day-num {
    position: relative;
    z-index: 1;
}

.cal-schedule-bars {
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-schedule-bar {
    height: 14px;
    border-radius: 3px;
    opacity: 0.9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: opacity 0.2s, transform 0.1s;
}
.cal-schedule-bar:hover {
    opacity: 1;
    transform: scaleY(1.2);
    z-index: 2;
}
.cal-schedule-bar .bar-time-label {
    font-size: 9px;
    color: #fff;
    line-height: 14px;
    padding: 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.cal-schedule-bar.schedule-disabled {
    opacity: 0.35;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 2px,
        rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px
    ) !important;
}

/* Schedule popup */
.schedule-popup {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    min-width: 260px;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: popupFadeIn 0.15s ease;
}
@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.schedule-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 2px solid;
    background: rgba(255,255,255,0.03);
}
.schedule-popup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.schedule-popup-header strong {
    flex: 1;
    color: #fff;
    font-size: 15px;
}
.schedule-popup-status {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
}
.schedule-popup-status.active {
    background: rgba(106,200,110,0.2);
    color: #6ac86e;
}
.schedule-popup-status.inactive {
    background: rgba(255,160,80,0.2);
    color: #ffa050;
}
.schedule-popup-close {
    background: none;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
}
.schedule-popup-body {
    padding: 10px 12px;
}
.popup-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 14px;
    color: #ccc;
}
.popup-label {
    color: #888;
    font-size: 13px;
}
.schedule-popup-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.btn-sm {
    padding: 4px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.btn-success { background: #2d8a4e; color: #fff; }
.btn-warning { background: #b8860b; color: #fff; }
.btn-danger { background: #a03030; color: #fff; }
.btn-edit { background: #3a6b9f; color: #fff; }
.btn-sm:hover { filter: brightness(1.2); }

/* Disabled schedule card in list */
.schedule-card-disabled {
    opacity: 0.5;
}
.schedule-card-disabled .schedule-batch-name {
    text-decoration: line-through;
}

/* Schedule Config Panel */
.schedule-config-panel {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-focus);
    padding: 12px;
}

.schedule-config-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.schedule-config-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.schedule-config-row > label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-range-display {
    font-size: var(--text-sm);
    color: var(--opal-green-light);
    font-weight: 500;
}

.frequency-config {
    display: flex;
    gap: 8px;
    align-items: center;
}

.time-slots-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.time-slot-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-slot-row .slot-time {
    width: 110px;
    font-size: 0.8rem;
}

.time-slot-row .slot-x {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.time-slot-row .slot-label {
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

.time-slot-row .slot-count {
    font-size: 0.8rem;
}

/* Reddit Subreddit Config */
.reddit-config-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subreddit-search-wrap {
    position: relative;
}

.subreddit-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.subreddit-result-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    transition: background 0.15s;
}

.subreddit-result-item:hover {
    background: var(--bg-card-hover);
}

.subreddit-result-item.already-added {
    opacity: 0.5;
    pointer-events: none;
}

.subreddit-result-item .sub-name {
    font-weight: 600;
    color: var(--text-primary);
}

.subreddit-result-item .sub-meta {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    margin-left: auto;
}

.subreddit-result-item .sub-added-tag {
    font-size: 0.65rem;
    color: var(--opal-green);
    margin-left: auto;
}

.subreddit-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.subreddit-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    background: rgba(92,232,154,0.15);
    border: 1px solid rgba(92,232,154,0.3);
    border-radius: 14px;
    font-size: 0.75rem;
    color: var(--opal-green);
    font-weight: 500;
}

.subreddit-chip button {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 2px;
    line-height: 1;
}

.subreddit-chip button:hover {
    color: var(--prism-rose);
}

.subreddit-empty {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.cut-config {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cut-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cut-row .input-select {
    width: 100px;
}

.caption-config {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.platform-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.platform-toggle-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: pointer;
}

.platform-toggle-item input[type="checkbox"] {
    accent-color: var(--opal-green);
}

.schedule-config-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.schedule-music-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-music-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    padding: 4px 6px;
    background: var(--depth-recessed);
    border-radius: var(--radius-sm);
}

.schedule-music-item input[type="checkbox"] {
    accent-color: var(--opal-green);
}

/* Active Schedules */
.active-schedules-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.active-schedule-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.active-schedule-card .schedule-color-bar {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    flex-shrink: 0;
}

.active-schedule-card .schedule-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.active-schedule-card .schedule-batch-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.active-schedule-card .schedule-dates {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.active-schedule-card .schedule-stats {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.active-schedule-card .schedule-delete {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
}

.active-schedule-card .schedule-delete:hover {
    color: var(--prism-rose);
}

/* Batch Color Input */
.batch-color-input {
    width: 48px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    cursor: pointer;
    padding: 2px;
}

/* Create Batch Modal */
#createBatchModal .modal-content {
    background: var(--glass-bg-overlay);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

#createBatchModal h3 {
    margin-bottom: 16px;
    font-size: var(--text-md);
}

#createBatchModal .form-group {
    margin-bottom: 12px;
}

#createBatchModal .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 600;
}

#createBatchModal .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* Upload Progress */
.batch-upload-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.batch-upload-progress .progress-bar {
    height: 4px;
    background: var(--depth-recessed);
    border-radius: 2px;
    overflow: hidden;
}

.batch-upload-progress .progress-fill {
    height: 100%;
    background: var(--opal-green);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.batch-upload-progress .progress-text {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ==================== SPACES (Community Workflow Gallery) ==================== */

.spaces-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Hero Banner */
.spaces-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 36px 32px 32px;
}

.spaces-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(92,232,154,0.15) 0%,
        rgba(20,60,100,0.12) 40%,
        rgba(139,92,246,0.10) 70%,
        rgba(6,182,212,0.08) 100%);
    border: 1px solid rgba(210,210,230,0.08);
    border-radius: 20px;
    backdrop-filter: blur(40px);
}

.spaces-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 300px at 70% 30%, rgba(92,232,154,0.12), transparent),
        radial-gradient(ellipse 400px 250px at 30% 70%, rgba(139,92,246,0.08), transparent);
}

.spaces-hero-content {
    position: relative;
    z-index: 1;
}

.spaces-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.spaces-hero-sub {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    margin: 0 0 16px;
}

.spaces-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--opal-green);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.spaces-new-btn:hover {
    background: var(--opal-green-light);
    box-shadow: 0 0 20px rgba(92,232,154,0.3);
}

/* Filter Bar */
.spaces-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.spaces-tabs {
    display: flex;
    gap: 4px;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
}

.spaces-tab {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.spaces-tab.active {
    background: rgba(210,210,230,0.08);
    color: var(--text-primary);
}

.spaces-tab:hover:not(.active) {
    color: var(--text-secondary);
}

.spaces-filter-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.spaces-categories {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.spaces-cat {
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--text-2xs);
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: capitalize;
}

.spaces-cat.active {
    border-color: var(--opal-green);
    color: var(--opal-green-light);
    background: rgba(92,232,154,0.10);
}

.spaces-cat:hover:not(.active) {
    border-color: rgba(210,210,230,0.18);
    color: var(--text-secondary);
}

.spaces-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.spaces-search-wrap svg {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.spaces-search {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px 6px 30px;
    color: var(--text-primary);
    font-size: var(--text-xs);
    width: 200px;
    transition: all 0.2s;
    outline: none;
}

.spaces-search:focus {
    border-color: var(--border-focus);
    width: 220px;
}

/* Workflow Grid */
.spaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.spaces-loading {
    display: contents;
}

/* Workflow Card */
.spaces-card {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.spaces-card:hover {
    border-color: rgba(210,210,230,0.18);
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover);
}

.spaces-card-preview {
    position: relative;
    height: 140px;
    background: linear-gradient(135deg,
        rgba(0,0,0,0.4),
        color-mix(in srgb, var(--cat-color, #5ce89a) 8%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.spaces-card-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--cat-color, #5ce89a) 12%, transparent), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(210,210,230,0.04), transparent 50%);
}

.spaces-card-icon {
    position: relative;
    z-index: 1;
    color: rgba(210,210,230,0.3);
    transform: scale(2.5);
}

.spaces-card-nodes {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.5);
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

.spaces-card-cat-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

/* Use button on hover */
.spaces-card::after {
    content: 'Use';
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(255,255,255,0.95);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 8px;
    opacity: 0;
    transition: all 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

.spaces-card:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.spaces-card-body {
    padding: 12px 14px 14px;
}

.spaces-card-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spaces-card-desc {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    margin: 0 0 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spaces-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.spaces-card-author {
    color: var(--opal-green-light);
    font-weight: 500;
}

.spaces-card-tags {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.spaces-tag {
    font-size: 11px;
    color: var(--silver-dark);
    background: rgba(210,210,230,0.06);
    border: 1px solid rgba(210,210,230,0.06);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Like Button */
.spaces-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid transparent;
    color: var(--silver-dark);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    transition: all 0.2s;
    margin-left: auto;
}
.spaces-like-btn:hover {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.15);
}
.spaces-like-btn.liked {
    color: #f43f5e;
}
.spaces-like-btn.liked svg {
    fill: #f43f5e;
}
.spaces-like-count {
    font-weight: 500;
}

/* Sort Group */
.spaces-sort-group {
    display: flex;
    gap: 4px;
    background: rgba(210,210,230,0.04);
    border: 1px solid rgba(210,210,230,0.08);
    border-radius: 10px;
    padding: 3px;
}
.spaces-sort-btn {
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: var(--silver-dark);
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.spaces-sort-btn:hover {
    color: var(--silver);
    background: rgba(210,210,230,0.06);
}
.spaces-sort-btn.active {
    background: rgba(210,210,230,0.08);
    color: var(--text-primary, #fff);
}

/* Empty State */
.spaces-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 12px;
}

.spaces-empty-title {
    color: var(--text-secondary);
    font-size: var(--text-md);
    font-weight: 600;
    margin: 0;
}

.spaces-empty-hint {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    margin: 0;
}

/* Modals */
.spaces-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.spaces-modal {
    background: rgba(12,14,20,0.95);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.spaces-detail-modal {
    max-width: 600px;
}

.spaces-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}

.spaces-modal-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.spaces-modal-body {
    padding: 20px 24px;
}

.spaces-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
}

.spaces-form-group {
    margin-bottom: 16px;
}

.spaces-form-group label {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spaces-form-row {
    display: flex;
    gap: 12px;
}

.spaces-input,
.spaces-textarea,
.spaces-select {
    width: 100%;
    background: var(--glass-bg-recessed);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.spaces-input:focus,
.spaces-textarea:focus,
.spaces-select:focus {
    border-color: var(--border-focus);
}

.spaces-textarea {
    resize: vertical;
    min-height: 70px;
}

.spaces-select {
    appearance: none;
    cursor: pointer;
}

.btn-primary.spaces-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.spaces-delete-btn {
    background: rgba(244,63,94,0.12) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244,63,94,0.2) !important;
}

.spaces-delete-btn:hover {
    background: rgba(244,63,94,0.22) !important;
}

/* Detail Modal */
.spaces-detail-desc {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0 0 16px;
}

.spaces-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.spaces-detail-badge {
    background: var(--opal-green-subtle);
    border: 1px solid var(--opal-green-border);
    color: var(--opal-green-light);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.spaces-detail-stat {
    font-size: 13px;
    color: var(--text-tertiary);
}

.spaces-detail-node {
    padding: 8px 12px;
    background: rgba(210,210,230,0.04);
    border: 1px solid rgba(210,210,230,0.06);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.spaces-detail-node-type {
    color: var(--opal-green-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
    .spaces-hero { padding: 32px 24px 28px; }
    .spaces-hero-title { font-size: 1.8rem; }
    .spaces-filters { flex-direction: column; align-items: stretch; }
    .spaces-filter-right { flex-direction: column; }
    .spaces-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
    .spaces-form-row { flex-direction: column; gap: 0; }
}

/* ==================== CREATIONS (mirrors Spaces visual style) ==================== */
.creations-page { max-width: 1280px; margin: 0 auto; padding: 0 20px 40px; }
.creations-hero { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 20px; padding: 36px 32px 32px; }
.creations-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(92,232,154,0.15) 0%, rgba(20,60,100,0.12) 40%, rgba(139,92,246,0.10) 70%, rgba(6,182,212,0.08) 100%); border: 1px solid rgba(210,210,230,0.08); border-radius: 20px; backdrop-filter: blur(40px); }
.creations-hero-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 300px at 70% 30%, rgba(92,232,154,0.12), transparent), radial-gradient(ellipse 400px 250px at 30% 70%, rgba(139,92,246,0.08), transparent); }
.creations-hero-content { position: relative; z-index: 1; }
.creations-hero-title { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 700; color: #e8e8ec; margin: 0 0 6px; letter-spacing: -0.02em; }
.creations-hero-sub { font-size: 16px; color: #b0b0b8; margin: 0 0 16px; }
.creations-new-btn { display: inline-flex; align-items: center; gap: 6px; background: #5ce89a; color: #fff; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.2s; }
.creations-new-btn:hover { background: #7ef5b8; box-shadow: 0 0 20px rgba(92,232,154,0.3); }
.creations-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.creations-tabs { display: flex; gap: 4px; background: rgba(22,26,30,0.8); border: 1px solid rgba(210,210,230,0.08); border-radius: 10px; padding: 3px; }
.creations-tab { padding: 6px 14px; border: none; background: transparent; color: #b0b0b8; font-size: 14px; font-weight: 500; border-radius: 8px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.creations-tab.active { background: rgba(210,210,230,0.08); color: #e8e8ec; }
.creations-tab:hover:not(.active) { color: #d0d0d8; }
.creations-sort-group { display: flex; gap: 4px; background: rgba(210,210,230,0.04); border: 1px solid rgba(210,210,230,0.08); border-radius: 10px; padding: 3px; }
.creations-sort-btn { padding: 5px 10px; border: none; background: transparent; color: #b0b0b8; font-size: 12px; font-weight: 500; border-radius: 8px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; }
.creations-sort-btn:hover { color: #d0d0d8; background: rgba(210,210,230,0.06); }
.creations-sort-btn.active { background: rgba(210,210,230,0.08); color: #e8e8ec; }
.creations-filter-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.creations-categories { display: flex; gap: 4px; flex-wrap: wrap; }
.creations-cat { padding: 4px 12px; border: 1px solid rgba(210,210,230,0.08); background: transparent; color: #b0b0b8; font-size: 13px; font-weight: 500; border-radius: 20px; cursor: pointer; transition: all 0.2s; white-space: nowrap; text-transform: capitalize; }
.creations-cat.active { border-color: #5ce89a; color: #7ef5b8; background: rgba(92,232,154,0.10); }
.creations-cat:hover:not(.active) { border-color: rgba(210,210,230,0.18); color: #d0d0d8; }
.creations-search-wrap { position: relative; display: flex; align-items: center; }
.creations-search-wrap svg { position: absolute; left: 10px; color: #b0b0b8; pointer-events: none; }
.creations-search { background: rgba(22,26,30,0.8); border: 1px solid rgba(210,210,230,0.08); border-radius: 10px; padding: 6px 10px 6px 30px; color: #e8e8ec; font-size: 14px; width: 200px; transition: all 0.2s; outline: none; }
.creations-search:focus { border-color: rgba(92,232,154,0.3); width: 220px; }
.creations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.creations-loading { display: contents; }
.creations-card { background: rgba(22,26,30,0.8); border: 1px solid rgba(210,210,230,0.08); border-radius: 14px; overflow: hidden; cursor: pointer; transition: all 0.25s ease; position: relative; }
.creations-card:hover { border-color: rgba(210,210,230,0.18); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.creations-card-preview { position: relative; height: 140px; background: linear-gradient(135deg, rgba(0,0,0,0.4), color-mix(in srgb, var(--cat-color, #5ce89a) 8%, transparent)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.creations-card-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--cat-color, #5ce89a) 12%, transparent), transparent 60%), radial-gradient(circle at 70% 60%, rgba(210,210,230,0.04), transparent 50%); }
.creations-card-icon { position: relative; z-index: 1; color: rgba(210,210,230,0.3); transform: scale(2.5); }
.creations-card-nodes { position: absolute; bottom: 10px; left: 12px; font-size: 12px; color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.5); padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(8px); z-index: 1; }
.creations-card-cat-badge { position: absolute; top: 10px; right: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 6px; backdrop-filter: blur(8px); z-index: 1; }
.creations-card::after { content: 'Open'; position: absolute; top: 60px; left: 50%; transform: translateX(-50%) translateY(6px); background: rgba(255,255,255,0.95); color: #000; font-size: 14px; font-weight: 600; padding: 6px 20px; border-radius: 8px; opacity: 0; transition: all 0.25s ease; pointer-events: none; z-index: 2; }
.creations-card:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.creations-card-body { padding: 12px 14px 14px; }
.creations-card-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; color: #e8e8ec; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creations-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #b0b0b8; }
.creations-card-meta { color: #b0b0b8; }
.creations-delete-btn { display: inline-flex; align-items: center; background: none; border: 1px solid transparent; color: #b0b0b8; cursor: pointer; padding: 3px 6px; border-radius: 6px; transition: all 0.2s; opacity: 0; }
.creations-card:hover .creations-delete-btn { opacity: 1; }
.creations-delete-btn:hover { color: #f43f5e; background: rgba(244,63,94,0.08); border-color: rgba(244,63,94,0.15); }
.creations-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; gap: 12px; }
.creations-empty-title { color: #d0d0d8; font-size: 18px; font-weight: 600; margin: 0; }
.creations-empty-hint { color: #b0b0b8; font-size: 15px; margin: 0; }
@media (max-width: 768px) {
    .creations-hero { padding: 32px 24px 28px; }
    .creations-hero-title { font-size: 1.8rem; }
    .creations-filters { flex-direction: column; align-items: stretch; }
    .creations-filter-right { flex-direction: column; }
    .creations-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}

/* ==================== VISUAL ENHANCEMENTS ==================== */

/* ── 1. Premium Loading Overlay Bar ── */
.freepik-loader-bar {
    width: 180px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}

.freepik-loader-bar-fill {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent-gold-light), transparent);
    border-radius: 4px;
    animation: loaderBarSlide 1.8s ease-in-out infinite;
}

@keyframes loaderBarSlide {
    0% { transform: translateX(-100%); width: 40%; }
    50% { width: 60%; }
    100% { transform: translateX(350%); width: 40%; }
}

.freepik-loading-overlay .freepik-loader-subtext {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* ── 2. Empty State CTA Button ── */
.btn-empty-cta {
    margin-top: 8px;
    padding: 8px 20px;
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--accent-gold-light);
    background: rgba(92, 232, 154, 0.1);
    border: 1px solid rgba(92, 232, 154, 0.25);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
}

.btn-empty-cta:hover {
    background: rgba(92, 232, 154, 0.2);
    border-color: rgba(92, 232, 154, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(92, 232, 154, 0.12);
}

.empty-state-anim .empty-state-hint,
.empty-state-hint {
    max-width: 240px;
    text-align: center;
    line-height: 1.5;
}

/* ── 3. Pipeline Footer Spacing ── */
.cc-pipeline-dots--spaced {
    gap: 2px;
    padding: 0 8px;
}

.cc-pipeline-dots--spaced .cc-pipeline-dot {
    gap: 6px;
}

.cc-pipeline-dots--spaced .cc-dot-label {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 6px;
    font-weight: 500;
    color: var(--text-secondary);
}

.cc-pipeline-dots--spaced .cc-dot-connector {
    width: 48px;
}

/* ── 4. Upgrade Button Glow ── */
.btn-upgrade-glow {
    animation: upgradeGlowPulse 3s ease-in-out infinite;
}

@keyframes upgradeGlowPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(92, 232, 154, 0.2), 0 0 16px rgba(92, 232, 154, 0.08);
    }
    50% {
        box-shadow: 0 0 16px rgba(92, 232, 154, 0.35), 0 0 32px rgba(92, 232, 154, 0.15), 0 0 4px rgba(198, 166, 100, 0.2);
    }
}

.btn-upgrade-glow:hover {
    animation: none;
    box-shadow: 0 4px 24px rgba(92, 232, 154, 0.4), 0 0 24px rgba(92, 232, 154, 0.2);
}

/* ── 5. Social Platform Cards ── */
.social-icon-wrap {
    width: 36px;
    height: 36px;
}

.social-icon-wrap svg {
    width: 20px;
    height: 20px;
}

.social-status {
    font-weight: 500;
    letter-spacing: 0.02em;
}

.social-card .social-status {
    color: rgba(255, 255, 255, 0.35);
}

.social-card.connected .social-status {
    color: #4ade80;
    font-weight: 600;
}

.social-connect-btn {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 10px;
    margin-top: auto;
}

/* ── 6. Onboarding Overlay Enhancements ── */
.onboarding-overlay {
    background: rgba(2, 2, 8, 0.97);
    backdrop-filter: blur(32px) saturate(1.2);
}

.onboarding-container {
    background: radial-gradient(ellipse at center top, rgba(92, 232, 154, 0.06) 0%, transparent 60%);
}

.onboarding-step {
    animation: onboardingStepEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes onboardingStepEnter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.onboarding-path-card {
    border: 1px solid rgba(92, 232, 154, 0.12);
    position: relative;
}

.onboarding-path-tag {
    display: inline-block;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-gold-light);
    background: rgba(92, 232, 154, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(92, 232, 154, 0.2);
    margin-top: 4px;
}

.onboarding-action-btn {
    font-size: 1rem;
    padding: 16px 32px;
    min-width: 240px;
    box-shadow: 0 4px 24px rgba(92, 232, 154, 0.2);
    transition: all 0.3s ease;
}

.onboarding-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(92, 232, 154, 0.3);
}

.onboarding-skip-btn {
    margin-top: 12px;
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
}

/* ── 7. Enhanced Modal Headers & Close Buttons ── */
.modal-header-enhanced {
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(92, 232, 154, 0.06), transparent);
}

.modal-header-enhanced h3 {
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}

.modal-close-enhanced {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.modal-close-enhanced:hover {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.25);
    color: #f43f5e;
    transform: scale(1.05);
}

.modal-close-enhanced svg {
    flex-shrink: 0;
}

/* ── Reduced Motion Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ── Assets select/empty classes ── */
.assets-select-bar {
    padding: 8px 16px;
    background: rgba(56,189,148,0.08);
    border: 1px solid rgba(56,189,148,0.25);
    border-radius: 8px;
    margin: 0 16px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.assets-select-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.assets-select-label input[type="checkbox"] {
    accent-color: #38bd94;
}

.assets-selected-count {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.assets-select-bar .btn {
    font-size: 0.78rem;
    padding: 4px 10px;
}

.assets-select-btn {
    font-size: 0.78rem;
    padding: 4px 10px;
}

.assets-empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-muted);
    background: radial-gradient(ellipse at 50% 40%, rgba(92, 232, 154, 0.04) 0%, transparent 70%);
    border-radius: 16px;
    border: 1px dashed rgba(92, 232, 154, 0.1);
}

.assets-empty-state svg {
    margin-bottom: 16px;
    opacity: 0.25;
    filter: drop-shadow(0 0 8px rgba(92, 232, 154, 0.15));
}

.assets-empty-state .assets-empty-title {
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-weight: 500;
}

.assets-empty-state .assets-empty-sub {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── Section hint compact ── */
.section-hint {
    font-size: 0.7rem;
    max-width: 300px;
    text-align: right;
    line-height: 1.3;
}

/* ── Social card uniform height ── */
.social-card-top {
    gap: 8px;
}

/* ── Batch calendar section header ── */
.batch-calendar-section .card-header {
    padding: 12px 16px;
}

/* ── Active schedules compact ── */
.batch-section-title {
    font-size: var(--text-xs);
    margin-bottom: 8px;
}

/* ── Assets gallery header ── */
.assets-gallery .card-header {
    padding-bottom: 10px;
    gap: 8px;
}

/* ================ WIDE SCREEN RESPONSIVENESS ================ */
@media (min-width: 1600px) {
    .main {
        max-width: 1800px;
        padding: 28px 3% 60px;
    }

    .cc-workspace {
        grid-template-columns: 320px 1fr 300px;
    }

    .settings-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid-2col {
        grid-template-columns: 1.5fr 1fr;
    }

    .stats-row {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ================ PROFILE & BILLING PAGE ================ */

.profile-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.profile-section {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.profile-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-noise);
    pointer-events: none;
    opacity: 0.4;
}

.profile-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

/* Account card */
.profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--glass-bg-elevated);
    border: 2px solid var(--opal-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--opal-green-light);
    box-shadow: 0 0 30px rgba(92, 232, 154, 0.08);
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}

.profile-email {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.profile-joined {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Profile form fields */
.profile-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-form label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--opal-green);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.profile-form .input-text {
    max-width: 400px;
}

.profile-form .btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* Plan card */
.profile-plan-card {
    background: var(--glass-bg-elevated);
    border: 1px solid var(--opal-green-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 40px rgba(92, 232, 154, 0.04);
}

.profile-plan-badge {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 20px;
    flex-shrink: 0;
}

.profile-plan-badge.plan-free {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.profile-plan-badge.plan-pulse,
.profile-plan-badge.plan-flow {
    background: linear-gradient(135deg, rgba(92, 232, 154, 0.2), rgba(92, 232, 154, 0.1));
    color: var(--opal-green-light);
}

.profile-plan-badge.plan-forge,
.profile-plan-badge.plan-apex,
.profile-plan-badge.plan-titan {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(139, 92, 246, 0.15));
    color: var(--prism-amber);
}

.profile-plan-name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.profile-plan-details {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.profile-plan-card .btn {
    flex-shrink: 0;
}

/* Credits bar */
.profile-credits-card {
    background: var(--glass-bg-recessed);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 20px;
}

.profile-credits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.profile-credits-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-credits-text {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.profile-credits-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.profile-credits-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--opal-green-dark), var(--opal-green), var(--opal-green-light));
    border-radius: 4px;
    transition: width 800ms var(--ease-cinematic);
    box-shadow: 0 0 12px rgba(92, 232, 154, 0.3);
    position: relative;
}

.profile-credits-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
    border-radius: 0 4px 4px 0;
}

.profile-credits-purchased {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: 8px;
}

/* Usage stats grid */
.profile-usage-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    background: var(--glass-bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}

.profile-stat-value {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.profile-stat-label {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* Connected accounts */
.profile-connected-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-connected-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--glass-bg-recessed);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.profile-connected-item.connected {
    border-color: rgba(92, 232, 154, 0.15);
}

.profile-connected-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.profile-connected-item.connected svg {
    opacity: 1;
    color: var(--opal-green-light);
}

.profile-connected-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.profile-connected-status {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-connected-item.connected .profile-connected-status {
    color: var(--opal-green-light);
}

.profile-connected-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

/* Danger zone */
.profile-danger {
    border-color: rgba(244, 63, 94, 0.12);
}

.profile-danger .profile-section-title {
    color: var(--accent-red);
}

.profile-danger-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: 16px;
}

.profile-danger-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Profile page responsive */
@media (max-width: 600px) {
    .profile-page {
        padding: 16px 8px 40px;
    }

    .profile-section {
        padding: 20px 16px;
    }

    .profile-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-plan-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-usage-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-danger-actions {
        flex-direction: column;
    }
}

@media (min-width: 2000px) {
    .main {
        max-width: 100%;
        padding: 28px 4% 60px;
    }

    .cc-workspace {
        grid-template-columns: 360px 1fr 340px;
    }

    .stats-row {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ================ IN-APP STRIPE CHECKOUT ================ */

.checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}

.checkout-overlay.visible {
    display: flex;
}

.checkout-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(12px);
    animation: checkoutFadeIn 300ms ease-out;
}

.checkout-modal {
    position: relative;
    display: flex;
    max-width: 820px;
    width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(8, 12, 18, 0.95), rgba(4, 6, 12, 0.98));
    border: 1px solid rgba(210, 210, 230, 0.08);
    border-radius: 20px;
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.7),
        0 0 120px rgba(92, 232, 154, 0.04),
        inset 0 1px 0 rgba(210, 210, 230, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(40px) saturate(2);
    animation: checkoutSlideIn 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(210, 210, 230, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 250ms var(--ease-smooth);
    backdrop-filter: blur(8px);
}

.checkout-close:hover {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.25);
    color: var(--prism-rose);
    transform: rotate(90deg);
}

/* Left panel — plan info */
.checkout-left {
    flex: 0 0 44%;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-right: 1px solid rgba(210, 210, 230, 0.06);
    background: linear-gradient(180deg, rgba(92, 232, 154, 0.03), transparent 60%);
}

.checkout-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--opal-green-light);
    background: rgba(92, 232, 154, 0.10);
    border: 1px solid rgba(92, 232, 154, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    width: fit-content;
    margin-bottom: 16px;
}

.checkout-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.checkout-title span {
    background: linear-gradient(135deg, #1e8a22, #5ce89a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.checkout-price-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 24px;
}

.checkout-price {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.checkout-interval {
    font-size: 1rem;
    color: var(--text-tertiary);
    font-weight: 400;
}

.checkout-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(92, 232, 154, 0.15), rgba(210, 210, 230, 0.06), transparent);
    margin-bottom: 24px;
}

.checkout-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.checkout-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.checkout-feature svg {
    flex-shrink: 0;
    color: #1e8a22;
}

.checkout-guarantee {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(92, 232, 154, 0.06);
    border: 1px solid rgba(92, 232, 154, 0.10);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.checkout-guarantee svg {
    flex-shrink: 0;
    color: var(--opal-green-light);
}

/* Right panel — payment form */
.checkout-right {
    flex: 1;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkout-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.checkout-form-header svg {
    color: var(--silver-dark);
}

.checkout-stripe-element {
    min-height: 120px;
}

.checkout-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.checkout-loading .spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(92, 232, 154, 0.15);
    border-top-color: #1e8a22;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.checkout-error {
    color: var(--prism-rose);
    font-size: 0.85rem;
    min-height: 0;
    line-height: 1.5;
}

.checkout-error:empty {
    display: none;
}

.checkout-submit-btn {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e8a22, #25a028);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 300ms var(--ease-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 24px rgba(45, 183, 48, 0.20), 0 0 60px rgba(45, 183, 48, 0.06);
    letter-spacing: 0.3px;
}

.checkout-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #34cc38, #1e8a22);
    transform: translateY(-1px);
    box-shadow: 0 6px 32px rgba(45, 183, 48, 0.30), 0 0 80px rgba(45, 183, 48, 0.10);
}

.checkout-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.checkout-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkout-submit-btn.checkout-success {
    background: linear-gradient(135deg, #1e8a22, #25a028);
    pointer-events: none;
}

.checkout-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

.checkout-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.checkout-secure svg {
    color: var(--silver-dark);
}

/* Animations */
@keyframes checkoutFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes checkoutSlideIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive — stack on mobile */
@media (max-width: 700px) {
    .checkout-modal {
        flex-direction: column;
        max-height: 95vh;
    }

    .checkout-left {
        flex: none;
        border-right: none;
        border-bottom: 1px solid rgba(210, 210, 230, 0.06);
        padding: 28px 24px 20px;
    }

    .checkout-right {
        padding: 24px 24px 28px;
    }

    .checkout-price {
        font-size: 2.2rem;
    }

    .checkout-title {
        font-size: 1.3rem;
    }

    .checkout-features {
        gap: 10px;
        margin-bottom: 16px;
    }
}

@media (max-width: 420px) {
    .checkout-modal {
        width: 98vw;
        border-radius: 16px;
    }

    .checkout-left,
    .checkout-right {
        padding: 20px 18px;
    }
}

/* Glass/light theme removed */



/* ================================================================
   CREATORMODE — BIOLUMINESCENT FORGE
   Deep-sea bioluminescence meets precision engineering
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ---- BIOLUMINESCENT FORGE Keyframes ---- */

@keyframes cm-grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2%, -3%); }
    30% { transform: translate(3%, 2%); }
    50% { transform: translate(-1%, 4%); }
    70% { transform: translate(2%, -2%); }
    90% { transform: translate(-3%, 1%); }
}

@keyframes cm-breathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes cm-selected-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #5ce89a, 0 0 12px rgba(92,232,154,0.25), 0 0 30px rgba(92,232,154,0.1); }
    50% { box-shadow: 0 0 0 2px #5ce89a, 0 0 20px rgba(92,232,154,0.4), 0 0 50px rgba(92,232,154,0.15); }
}

@keyframes cm-run-pulse {
    0% { box-shadow: 0 0 0 0 rgba(92,232,154,0.5); }
    70% { box-shadow: 0 0 0 14px rgba(92,232,154,0); }
    100% { box-shadow: 0 0 0 0 rgba(92,232,154,0); }
}

@keyframes cm-conn-particle-flow {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@keyframes cm-conn-pulse {
    0%, 100% { stroke-opacity: 0.45; }
    50% { stroke-opacity: 0.9; filter: drop-shadow(0 0 4px rgba(92,232,154,0.5)); }
}

@keyframes cm-conn-pulse-active {
    0%, 100% { stroke-opacity: 0.6; filter: drop-shadow(0 0 3px rgba(92,232,154,0.4)); }
    50% { stroke-opacity: 1; filter: drop-shadow(0 0 8px rgba(92,232,154,0.7)); }
}

@keyframes cm-flow-animation {
    from { stroke-dashoffset: 12; }
    to { stroke-dashoffset: 0; }
}

@keyframes cm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes cm-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes cm-node-appear {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cm-welcome-scan {
    0% { left: -40%; }
    100% { left: 140%; }
}

@keyframes cm-port-hex-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(92,232,154,0.3)); }
    50% { filter: drop-shadow(0 0 6px rgba(92,232,154,0.7)); }
}

@keyframes cm-running-scan {
    0% { top: -2px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
}

/* ---- CSS Variables ---- */
.cm-app {
    /* Background Colors — DARK BUT NOT PITCH BLACK */
    --cm-canvas-bg: #0d0f13;
    --cm-canvas-bg-alt: #111418;
    --cm-sidebar-bg: #0a0e10;
    --cm-sidebar-bg-alt: #0e1214;
    --cm-topbar-bg: rgba(10,14,16,0.85);
    --cm-bottombar-bg: rgba(10,14,16,0.85);
    --cm-node-bg: #161a1e;
    --cm-node-bg-alt: #1a1e22;
    --cm-input-bg: rgba(255,255,255,0.04);
    --cm-hover-bg: rgba(255,255,255,0.06);
    --cm-hover-bg-alt: rgba(255,255,255,0.08);
    --cm-modal-bg: #121618;
    --cm-tooltip-bg: rgba(10,14,16,0.92);

    /* Text Colors — bright white for readability */
    --cm-text-primary: #e8e8ec;
    --cm-text-bright: #ffffff;
    --cm-text-secondary: #b0b0b8;
    --cm-text-muted: #6a6a72;
    --cm-text-placeholder: #505058;
    --cm-text-disabled: #3a3a42;

    /* Accent Colors — ALL GREEN, no blue/orange/purple/pink */
    --cm-accent: #5ce89a;
    --cm-accent-hover: #3bc878;
    --cm-accent-deep: #2aa865;
    --cm-accent-soft: #c8f5dc;
    --cm-accent-blue: #5ce89a;
    --cm-accent-blue-hover: #3bc878;
    --cm-accent-green: #5ce89a;
    --cm-accent-purple: #3bc878;
    --cm-accent-pink: #5ce89a;
    --cm-accent-amber: #5ce89a;
    --cm-accent-indigo: #2aa865;
    --cm-accent-red: #ef4444;
    --cm-accent-gray: #3d4a42;

    /* Borders — subtle, mostly neutral */
    --cm-border-default: rgba(255,255,255,0.06);
    --cm-border-hover: rgba(255,255,255,0.12);
    --cm-border-active: #5ce89a;

    /* Border Radius Scale — SHARPER */
    --cm-radius-xs: 3px;
    --cm-radius-sm: 4px;
    --cm-radius-md: 6px;
    --cm-radius-lg: 6px;
    --cm-radius-xl: 6px;
    --cm-radius-2xl: 6px;
    --cm-radius-pill: 9999px;

    /* Fonts — Bioluminescent Forge */
    --cm-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cm-font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

    /* Transitions */
    --cm-transition-fast: 0.1s ease;
    --cm-transition-default: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --cm-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --cm-transition-panel: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Layers */
    --cm-z-canvas: 0;
    --cm-z-connections: 10;
    --cm-z-nodes: 20;
    --cm-z-selected-node: 30;
    --cm-z-floating-toolbar: 40;
    --cm-z-canvas-toolbar: 50;
    --cm-z-sidebar: 60;
    --cm-z-topbar: 70;
    --cm-z-modal-overlay: 80;
    --cm-z-modal: 90;
    --cm-z-tooltip: 100;

    /* Layout */
    display: grid;
    grid-template-rows: 48px 1fr 40px;
    grid-template-columns: 48px 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar canvas"
        "sidebar bottombar";
    width: 100%;
    height: 100%;
    font-family: var(--cm-font);
    font-size: 15px;
    color: var(--cm-text-primary);
    background: var(--cm-canvas-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Fullscreen / Fullheight mode ---- */
.cm-app.fullheight {
    height: 100vh;
}


/* ================================================================
   SIDEBAR — Ultra-dark (#030306) with green LED indicators
   ================================================================ */
.cm-sidebar {
    grid-area: sidebar;
    background: var(--cm-sidebar-bg);
    border-right: 1px solid rgba(92,232,154,0.06);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    width: 48px;
    transition: width var(--cm-transition-panel);
    z-index: var(--cm-z-sidebar);
}

.cm-sidebar-top {
    padding: 4px 0;
}

.cm-sidebar-header {
    padding: 8px 4px;
    font-size: 0;
    font-weight: 700;
    color: var(--cm-accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    overflow: hidden;
    white-space: nowrap;
    height: 0;
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

.cm-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 0;
    color: var(--cm-text-secondary);
    text-decoration: none;
    font-size: 0;
    font-weight: 500;
    transition: color var(--cm-transition-default);
    cursor: pointer;
    border-radius: 0;
    height: 34px;
    position: relative;
}

.cm-nav-item:hover {
    color: #5ce89a;
    background: transparent;
}

/* Green LED indicator dot */
.cm-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0;
    background: var(--cm-accent);
    border-radius: 0 2px 2px 0;
    transition: height var(--cm-transition-default);
    box-shadow: 0 0 6px rgba(92,232,154,0.4);
}

.cm-nav-item:hover::before {
    height: 16px;
}

.cm-nav-item.cm-nav-active {
    color: var(--cm-accent);
    background: transparent;
}

.cm-nav-item.cm-nav-active::before {
    height: 20px;
}

.cm-nav-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: 0.5;
    transition: opacity var(--cm-transition-default);
}

.cm-nav-item:hover svg,
.cm-nav-item.cm-nav-active svg {
    opacity: 1;
}

.cm-nav-item span {
    display: none;
}

.cm-sidebar-divider {
    height: 1px;
    background: rgba(92,232,154,0.06);
    margin: 4px 6px;
}

.cm-sidebar-section {
    padding: 2px 0;
}

.cm-sidebar-label {
    padding: 0;
    font-size: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(92,232,154,0.3);
    font-family: 'JetBrains Mono', monospace;
}

.cm-tool-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 0;
    width: 100%;
    background: none;
    border: none;
    color: var(--cm-text-secondary);
    font-size: 0;
    font-weight: 500;
    font-family: var(--cm-font);
    cursor: pointer;
    transition: color var(--cm-transition-default);
    text-align: center;
    border-radius: 0;
    height: 34px;
    position: relative;
}

.cm-tool-item:hover {
    color: var(--cm-accent);
    background: transparent;
}

/* Green LED dot for tool items */
.cm-tool-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0;
    background: var(--cm-accent);
    border-radius: 0 2px 2px 0;
    transition: height var(--cm-transition-default);
    box-shadow: 0 0 6px rgba(92,232,154,0.4);
}

.cm-tool-item:hover::before {
    height: 14px;
}

.cm-tool-item svg {
    flex-shrink: 0;
    opacity: 0.4;
    width: 18px;
    height: 18px;
    transition: opacity var(--cm-transition-default);
}

.cm-tool-item:hover svg {
    opacity: 1;
}

.cm-tool-item span,
.cm-tool-item .cm-tool-text {
    display: none;
}

.cm-tool-item .cm-badge-new {
    display: none;
}

.cm-sidebar-bottom {
    margin-top: auto;
    padding: 4px 0;
}

.cm-sidebar-credits {
    display: none;
}

.cm-credits-label {
    display: none;
}

.cm-credits-link, .cm-credits-buy {
    display: none;
}

/* ---- SIDEBAR Expanded (220px) ---- */
.cm-app.cm-sidebar-expanded {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr 40px;
    grid-template-areas:
        "sidebar canvas"
        "sidebar bottombar";
}
.cm-app.cm-sidebar-expanded .cm-topbar {
    display: none;
}
.cm-app.cm-sidebar-expanded .cm-sidebar {
    width: 200px;
    min-width: 200px;
    padding: 12px 0;
}

.cm-app.cm-sidebar-expanded .cm-sidebar-header {
    padding: 12px 16px 8px;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    letter-spacing: 3px;
}

.cm-app.cm-sidebar-expanded .cm-nav-item {
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Green underline slide on hover */
.cm-app.cm-sidebar-expanded .cm-nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--cm-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(92,232,154,0.3);
}

.cm-app.cm-sidebar-expanded .cm-nav-item:hover::after {
    transform: scaleX(1);
}

.cm-app.cm-sidebar-expanded .cm-nav-item span {
    display: inline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.cm-app.cm-sidebar-expanded .cm-sidebar-divider {
    margin: 8px 16px;
}

.cm-app.cm-sidebar-expanded .cm-sidebar-label {
    padding: 16px 16px 8px;
    font-size: 11px;
    height: auto;
}

.cm-app.cm-sidebar-expanded .cm-tool-item {
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px;
    font-size: 15px;
    text-align: left;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Green underline slide on hover for tool items */
.cm-app.cm-sidebar-expanded .cm-tool-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--cm-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(92,232,154,0.3);
}

.cm-app.cm-sidebar-expanded .cm-tool-item:hover::after {
    transform: scaleX(1);
}

.cm-app.cm-sidebar-expanded .cm-tool-item span,
.cm-app.cm-sidebar-expanded .cm-tool-item .cm-tool-text {
    display: inline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 400;
}

.cm-app.cm-sidebar-expanded .cm-tool-item .cm-badge-new {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    background: var(--cm-accent);
    color: #050508;
    padding: 1px 6px;
    border-radius: var(--cm-radius-pill);
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}

.cm-app.cm-sidebar-expanded .cm-sidebar-credits {
    display: block;
    padding: 12px 16px;
    border-top: 1px solid rgba(92,232,154,0.06);
}

.cm-app.cm-sidebar-expanded .cm-credits-label {
    display: block;
    font-size: 12px;
    color: var(--cm-text-muted);
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cm-app.cm-sidebar-expanded .cm-credits-link, .cm-credits-buy {
    display: inline;
    font-size: 14px;
    color: var(--cm-accent);
    text-decoration: none;
    font-weight: 500;
}

.cm-app.cm-sidebar-expanded .cm-credits-link:hover {
    text-decoration: none;
    text-shadow: 0 0 10px rgba(92,232,154,0.5);
}

/* ---- SIDEBAR Collapsed (fully hidden) ---- */
/* Sidebar always visible — no collapsed state */


/* ================================================================
   TOP BAR — Near-invisible, glass blur, text shows on hover
   ================================================================ */
.cm-topbar {
    grid-area: topbar;
    display: none;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    background: rgba(10, 14, 16, 0.88);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(92, 232, 154, 0.06);
    z-index: 80;
    gap: 8px;
}

.cm-topbar:hover {
    background: rgba(5,5,8,0.85);
    border-bottom-color: rgba(92,232,154,0.1);
}

.cm-topbar-left,
.cm-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm-topbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Breadcrumb */
.cm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--cm-text-muted);
    font-weight: 400;
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.4;
    transition: opacity var(--cm-transition-slow);
}

.cm-topbar:hover .cm-breadcrumb {
    opacity: 1;
}

.cm-bc-sep {
    margin: 0 2px;
    color: var(--cm-text-muted);
}

.cm-bc-current {
    color: var(--cm-accent);
}

.cm-breadcrumb-item {
    cursor: pointer;
    transition: color var(--cm-transition-default);
}

.cm-breadcrumb-item:hover {
    color: var(--cm-accent);
}

/* Share button */
.cm-share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(92,232,154,0.1);
    border-radius: var(--cm-radius-sm);
    color: var(--cm-text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all var(--cm-transition-default);
    opacity: 0.5;
}

.cm-topbar:hover .cm-share-btn {
    opacity: 1;
}

.cm-share-btn:hover {
    border-color: var(--cm-accent);
    color: var(--cm-accent);
    box-shadow: 0 0 12px rgba(92,232,154,0.15);
}

.cm-share-btn svg {
    width: 14px;
    height: 14px;
}

.cm-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(92,232,154,0.08);
    border: 1px solid rgba(92,232,154,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-accent);
    font-size: 13px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.cm-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--cm-radius-sm);
    color: var(--cm-text-secondary);
    cursor: pointer;
    transition: all var(--cm-transition-default);
    font-size: 15px;
}

.cm-tb-btn:hover {
    color: var(--cm-accent);
}

.cm-tb-btn:active {
    transform: scale(0.95);
}

.cm-tb-primary {
    background: var(--cm-accent) !important;
    color: #050508 !important;
    padding: 6px 12px;
    border-radius: var(--cm-radius-sm);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    opacity: 1 !important;
}

.cm-tb-primary:hover {
    background: var(--cm-accent-hover) !important;
    box-shadow: 0 0 16px rgba(92,232,154,0.3);
}


/* ================================================================
   BOTTOM BAR
   ================================================================ */
.cm-bottombar {
    grid-area: bottombar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: var(--cm-bottombar-bg);
    backdrop-filter: blur(16px) saturate(1.3);
    border-top: 1px solid rgba(92,232,154,0.04);
    font-size: 13px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.cm-bottombar-left,
.cm-bottombar-center,
.cm-bottombar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.cm-page-indicator {
    color: var(--cm-text-muted);
    font-weight: 400;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}

.cm-feedback-link {
    color: var(--cm-text-muted);
    cursor: pointer;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    transition: color var(--cm-transition-default);
}

.cm-feedback-link:hover {
    color: var(--cm-accent);
}

/* Page tabs */
.cm-page-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
}
.cm-page-tab {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cm-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}
.cm-page-tab:hover {
    background: rgba(92,232,154,0.04);
    border-color: rgba(92,232,154,0.08);
}
.cm-page-tab.active {
    color: var(--cm-accent);
    background: rgba(92,232,154,0.08);
    border-color: rgba(92,232,154,0.15);
}
.cm-page-add {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--cm-text-muted);
    background: transparent;
    border: 1px dashed rgba(92,232,154,0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 4px;
}
.cm-page-add:hover {
    color: var(--cm-accent);
    border-color: rgba(92,232,154,0.3);
    background: rgba(92,232,154,0.04);
}

/* Zoom 100% button */
#cm-zoom-100 {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}

.cm-zoom-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--cm-text-muted);
    cursor: pointer;
    border-radius: var(--cm-radius-xs);
    font-size: 15px;
    transition: all var(--cm-transition-default);
}

.cm-zoom-btn:hover {
    color: var(--cm-accent);
}

.cm-zoom-pct {
    font-size: 12px;
    font-weight: 500;
    color: var(--cm-text-muted);
    min-width: 36px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
}


/* ================================================================
   CANVAS — #050508 with grain texture overlay
   ================================================================ */
.cm-canvas-container {
    grid-area: canvas;
    position: relative;
    overflow: hidden;
    background: #0f1014;
}

/* Grain texture overlay */
.cm-canvas-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
    animation: cm-grain 8s steps(10) infinite;
    mix-blend-mode: screen;
}

/* Dot grid is drawn by the JS canvas (pan/zoom-aware) — the static CSS overlay
   used to double-up on top of it and produced oversized, too-bright polka dots. */

.cm-canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}

/* Connection SVG layer */
#cm-connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: var(--cm-z-connections);
    pointer-events: none;
}

/* Connection lines — white ↔ mint gradient, soft permanent glow */
#cm-connections-svg path.cm-conn {
    fill: none;
    stroke-width: 1.75px;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke-width 0.15s, filter 0.2s;
    stroke-opacity: 0.95;
    filter: drop-shadow(0 0 2px rgba(92,232,154,0.25));
}

#cm-connections-svg path.cm-conn.cm-conn-active {
    stroke-width: 2.25px;
    filter: drop-shadow(0 0 4px rgba(92,232,154,0.45));
}

#cm-connections-svg path.cm-conn.cm-conn-flowing {
    stroke-dasharray: 12 12;
    animation: cm-conn-flow 1s linear infinite;
}
@keyframes cm-conn-flow {
    to { stroke-dashoffset: -24; }
}

#cm-connections-svg path.cm-conn:hover {
    stroke-width: 2.75px;
    filter: drop-shadow(0 0 6px rgba(92,232,154,0.55));
}

#cm-connections-svg path.cm-conn.cm-conn-selected {
    stroke-width: 2.75px;
    filter: drop-shadow(0 0 6px rgba(92,232,154,0.6));
}

#cm-connections-svg path.cm-conn.cm-conn-inactive {
    stroke: rgba(92,232,154,0.35);
    stroke-width: 1.5px;
    stroke-dasharray: 4 6;
    animation: cm-conn-particle-flow 3s linear infinite;
    filter: none;
}

#cm-connections-svg path.cm-conn-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    pointer-events: stroke;
    cursor: pointer;
}

#cm-drag-connection {
    fill: none;
    stroke: #5ce89a;
    stroke-width: 2px;
    stroke-dasharray: 6 4;
    opacity: 0.8;
    pointer-events: none;
    z-index: var(--cm-z-connections);
    filter: drop-shadow(0 0 4px rgba(92,232,154,0.4));
}

#cm-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cm-z-nodes);
    outline: none;
    pointer-events: none;
}

#cm-canvas .cm-node {
    pointer-events: auto;
}

#cm-selection-box {
    position: absolute;
    border: 1px solid var(--cm-accent);
    background: rgba(92,232,154,0.06);
    pointer-events: none;
    z-index: 4;
    display: none;
}


/* ================================================================
   NODES — Frosted obsidian glass-morphism cards
   ================================================================ */
.cm-node {
    position: absolute;
    min-width: 280px;
    max-width: 420px;
    width: 280px;
    background:
        linear-gradient(180deg, rgba(92,232,154,0.04) 0%, rgba(92,232,154,0) 64px),
        rgba(18,20,24,0.95);
    backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(92,232,154,0.16);
    border-radius: 14px;
    cursor: move;
    user-select: none;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 0 0 1px rgba(0,0,0,0.4),
        0 8px 24px rgba(0,0,0,0.55),
        0 0 28px rgba(92,232,154,0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    z-index: var(--cm-z-nodes);
    overflow: visible;
}

.cm-node:hover {
    border-color: rgba(92,232,154,0.32);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 0 0 1px rgba(0,0,0,0.4),
        0 10px 28px rgba(0,0,0,0.6),
        0 0 32px rgba(92,232,154,0.14);
    z-index: calc(var(--cm-z-nodes) + 1);
}

/* Selected node — Double green glow ring with pulsing animation */
.cm-node.cm-selected {
    border: 1px solid #5ce89a;
    animation: cm-selected-pulse 2.5s ease-in-out infinite;
    z-index: var(--cm-z-selected-node);
}

/* Node states */
.cm-node.cm-running {
    border-color: var(--cm-accent) !important;
    position: relative;
    overflow: hidden;
}

/* Green scanning line animation for running state */
.cm-node.cm-running::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5ce89a, rgba(92,232,154,0.6), transparent);
    box-shadow: 0 0 12px rgba(92,232,154,0.6), 0 0 30px rgba(92,232,154,0.3);
    z-index: 10;
    animation: cm-running-scan 1.8s ease-in-out infinite;
    pointer-events: none;
    border-radius: 1px;
}

.cm-node.cm-completed {
    border-color: #2aa865 !important;
    box-shadow: 0 0 16px rgba(92,232,154,0.15);
}

.cm-node.cm-error {
    border-color: var(--cm-accent-red) !important;
}

/* Node appear animation */
.cm-node.cm-new {
    animation: cm-node-appear 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ---- Node Header ---- */
.cm-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 40px;
    border-bottom: 1px solid rgba(92,232,154,0.10);
    position: relative;
}
.cm-node-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(92,232,154,0) 0%,
        rgba(92,232,154,0.5) 50%,
        rgba(92,232,154,0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cm-node:hover .cm-node-header::before,
.cm-node.cm-selected .cm-node-header::before {
    opacity: 1;
}

.cm-node-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cm-node-icon svg {
    width: 14px;
    height: 14px;
}

.cm-node-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #e8e8ec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.2px;
}

.cm-node-header-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.cm-node-header-action-btn, .cm-header-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-text-muted);
    border-radius: 3px;
    border: none;
    background: none;
    cursor: pointer;
    transition: all var(--cm-transition-default);
}

.cm-node-header-action-btn:hover {
    color: var(--cm-accent);
}

.cm-node-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cm-node-status.idle { background: var(--cm-text-muted); }
.cm-node-status.running { background: var(--cm-accent); animation: cm-dot-pulse 1s infinite; box-shadow: 0 0 8px rgba(92,232,154,0.5); }
.cm-node-status.completed { background: #2aa865; }
.cm-node-status.error { background: var(--cm-accent-red); }


/* ---- Node Type Icon Colors — ALL GREEN SHADES ---- */
/* Node icon colors — type-coded via TYPE_COLORS */
.cm-node[data-type="text"] .cm-node-icon { background: rgba(99,102,241,0.12); color: #6366f1; }
.cm-node[data-type="text"] .cm-node-icon svg { color: #6366f1; }
.cm-node[data-type="list"] .cm-node-icon { background: rgba(99,102,241,0.12); color: #6366f1; }
.cm-node[data-type="list"] .cm-node-icon svg { color: #6366f1; }
.cm-node[data-type="assistant"] .cm-node-icon { background: rgba(16,185,129,0.12); color: #10b981; }
.cm-node[data-type="assistant"] .cm-node-icon svg { color: #10b981; }
.cm-node[data-type="script"] .cm-node-icon { background: rgba(16,185,129,0.12); color: #10b981; }
.cm-node[data-type="script"] .cm-node-icon svg { color: #10b981; }
.cm-node[data-type="storyboard"] .cm-node-icon { background: rgba(16,185,129,0.12); color: #10b981; }
.cm-node[data-type="storyboard"] .cm-node-icon svg { color: #10b981; }
.cm-node[data-type="characterCreation"] .cm-node-icon { background: rgba(16,185,129,0.12); color: #10b981; }
.cm-node[data-type="characterCreation"] .cm-node-icon svg { color: #10b981; }
.cm-node[data-type="environmentCreation"] .cm-node-icon { background: rgba(16,185,129,0.12); color: #10b981; }
.cm-node[data-type="environmentCreation"] .cm-node-icon svg { color: #10b981; }
.cm-node[data-type="imageGen"] .cm-node-icon { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.cm-node[data-type="imageGen"] .cm-node-icon svg { color: #8b5cf6; }
.cm-node[data-type="upscaler"] .cm-node-icon { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.cm-node[data-type="upscaler"] .cm-node-icon svg { color: #8b5cf6; }
.cm-node[data-type="variations"] .cm-node-icon { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.cm-node[data-type="variations"] .cm-node-icon svg { color: #8b5cf6; }
.cm-node[data-type="videoGen"] .cm-node-icon { background: rgba(236,72,153,0.12); color: #ec4899; }
.cm-node[data-type="videoGen"] .cm-node-icon svg { color: #ec4899; }
.cm-node[data-type="videoCombiner"] .cm-node-icon { background: rgba(236,72,153,0.12); color: #ec4899; }
.cm-node[data-type="videoCombiner"] .cm-node-icon svg { color: #ec4899; }
.cm-node[data-type="musicGen"] .cm-node-icon,
.cm-node[data-type="sfxGen"] .cm-node-icon,
.cm-node[data-type="voiceover"] .cm-node-icon { background: rgba(245,158,11,0.12); color: #f59e0b; }
.cm-node[data-type="musicGen"] .cm-node-icon svg,
.cm-node[data-type="sfxGen"] .cm-node-icon svg,
.cm-node[data-type="voiceover"] .cm-node-icon svg { color: #f59e0b; }
.cm-node[data-type="upload"] .cm-node-icon { background: rgba(107,114,128,0.12); color: #6b7280; }
.cm-node[data-type="upload"] .cm-node-icon svg { color: #6b7280; }
.cm-node[data-type="socialPoster"] .cm-node-icon { background: rgba(59,130,246,0.12); color: #3b82f6; }
.cm-node[data-type="socialPoster"] .cm-node-icon svg { color: #3b82f6; }
.cm-node[data-type="inspiration"] .cm-node-icon { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.cm-node[data-type="inspiration"] .cm-node-icon svg { color: #8b5cf6; }

/* ---- Social Poster inline controls ---- */
.cm-platform-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.cm-platform-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--cm-text-secondary);
    background: rgba(92,232,154,0.03);
    border: 1px solid rgba(92,232,154,0.08);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.18s;
    user-select: none;
    font-family: 'JetBrains Mono', monospace;
}
.cm-platform-check input[type="checkbox"] {
    width: 12px;
    height: 12px;
    accent-color: #5ce89a;
    cursor: pointer;
}
.cm-platform-check:hover {
    border-color: rgba(92,232,154,0.3);
    color: var(--cm-text-primary);
}
.cm-platform-check.active {
    background: rgba(92,232,154,0.08);
    border-color: #5ce89a;
    color: #5ce89a;
}
.cm-hashtag-area {
    min-height: 40px !important;
    max-height: 60px;
    font-size: 13px;
    color: #5ce89a;
}
.cm-social-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.cm-action-btn {
    flex: 1;
    padding: 7px 12px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'JetBrains Mono', monospace;
}
.cm-action-post {
    background: #5ce89a;
    color: #050508;
}
.cm-action-post:hover {
    background: #3bc878;
    box-shadow: 0 0 14px rgba(92,232,154,0.3);
}
.cm-action-schedule {
    background: rgba(92,232,154,0.04);
    color: var(--cm-text-secondary);
    border: 1px solid rgba(92,232,154,0.1);
}
.cm-action-schedule:hover {
    border-color: #5ce89a;
    color: #5ce89a;
}


/* ---- Node Body ---- */
.cm-node-body {
    padding: 12px 16px 16px;
}


/* ---- Port Rows ---- */
.cm-port-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    position: relative;
    min-height: 24px;
}

.cm-port-row.input .cm-port-label {
    padding-left: 14px;
}

.cm-port-row.output {
    justify-content: flex-end;
}

.cm-port-row.output .cm-port-label {
    padding-right: 14px;
}

.cm-port-label {
    font-size: 13px;
    color: var(--cm-text-secondary);
    font-weight: 400;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.3px;
}


/* ---- Port container — positions the dots on node edges ---- */
.cm-port {
    position: relative;
    height: 20px;
    z-index: 10;
    pointer-events: auto;
}

.cm-port.input {
    margin-left: -1px;
}

.cm-port.output {
    margin-right: -1px;
}

/* ---- Connection Ports — circles matching Freepik Spaces ---- */
.cm-port-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: crosshair;
    z-index: 10;
    transition: all 0.15s ease;
    /* Generous padding for click/hover hit area */
    padding: 8px;
    margin: -8px;
    background-clip: content-box;
}

/* No pseudo-element needed — padding provides the hit area */

.cm-port-dot:hover {
    width: 14px;
    height: 14px;
    padding: 6px;
    margin: -6px;
    box-shadow: 0 0 10px currentColor;
}

.cm-port-dot.input {
    left: -7px;
}

.cm-port-dot.input:hover {
    left: -9px;
}

.cm-port-dot.output {
    right: -7px;
}

.cm-port-dot.output:hover {
    right: -9px;
}

/* Port type colors — white for text, shades of mint green for media */
.cm-port-dot[data-type="text"]  { background: #ffffff; border-color: rgba(255,255,255,0.35); color: #ffffff; }
.cm-port-dot[data-type="image"] { background: #5ce89a; border-color: rgba(92,232,154,0.35); color: #5ce89a; }
.cm-port-dot[data-type="audio"] { background: #3db87c; border-color: rgba(61,184,124,0.35); color: #3db87c; }
.cm-port-dot[data-type="video"] { background: #8ff0b7; border-color: rgba(143,240,183,0.35); color: #8ff0b7; }
.cm-port-dot.connected[data-type="text"]  { box-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 2px rgba(255,255,255,0.9); }
.cm-port-dot.connected[data-type="image"] { box-shadow: 0 0 10px rgba(92,232,154,0.6), 0 0 2px rgba(92,232,154,0.9); }
.cm-port-dot.connected[data-type="audio"] { box-shadow: 0 0 10px rgba(61,184,124,0.6), 0 0 2px rgba(61,184,124,0.9); }
.cm-port-dot.connected[data-type="video"] { box-shadow: 0 0 10px rgba(143,240,183,0.6), 0 0 2px rgba(143,240,183,0.9); }

/* Compatible port glow during drag */
.cm-port-compatible {
    animation: cm-port-pulse 0.8s ease-in-out infinite;
}
.cm-port-compatible[data-type="text"]  { box-shadow: 0 0 10px rgba(255,255,255,0.7), 0 0 20px rgba(255,255,255,0.35); }
.cm-port-compatible[data-type="image"] { box-shadow: 0 0 10px rgba(92,232,154,0.7), 0 0 20px rgba(92,232,154,0.35); }
.cm-port-compatible[data-type="audio"] { box-shadow: 0 0 10px rgba(61,184,124,0.7), 0 0 20px rgba(61,184,124,0.35); }
.cm-port-compatible[data-type="video"] { box-shadow: 0 0 10px rgba(143,240,183,0.7), 0 0 20px rgba(143,240,183,0.35); }

/* Incompatible port during drag — dimmed but still clickable */
.cm-port-incompatible {
    opacity: 0.25;
}

@keyframes cm-port-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.4); }
}

/* Credit cost badge on run button */
.cm-credit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(92,232,154,0.15);
    color: #5ce89a;
    border-radius: 8px;
    padding: 1px 5px;
    margin-left: 4px;
    line-height: 1.2;
    font-weight: 600;
}

/* Scissors on connection hover */
.cm-conn-scissors {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 50;
    opacity: 0.9;
    animation: cm-scissors-in 0.15s ease-out;
}
@keyframes cm-scissors-in {
    from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}

/* Connection flow animation is defined earlier in the file */

/* Port label text */
.cm-port-label-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.3px;
}
.cm-port.input .cm-port-label-text { left: 14px; }
.cm-port.output .cm-port-label-text { right: 14px; }


/* ---- Inline Controls — Minimal, thin green underline inputs ---- */
.cm-inline-controls {
    padding: 8px 12px;
    border-top: 1px solid rgba(92,232,154,0.06);
    display: none;
}

.cm-node.cm-selected .cm-inline-controls {
    display: block;
}

.cm-inline-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--cm-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'JetBrains Mono', monospace;
}

.cm-inline-input,
.cm-inline-textarea {
    width: 100%;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(92,232,154,0.1);
    border-radius: 0;
    color: var(--cm-text-bright);
    font-size: 15px;
    font-family: var(--cm-font);
    outline: none;
    margin-bottom: 8px;
    transition: border-color var(--cm-transition-default);
}

.cm-inline-textarea {
    resize: vertical;
    min-height: 60px;
}

.cm-inline-input::placeholder,
.cm-inline-textarea::placeholder {
    color: var(--cm-text-muted);
}

.cm-inline-input:focus,
.cm-inline-textarea:focus {
    border-bottom-color: #5ce89a;
    box-shadow: 0 1px 0 0 rgba(92,232,154,0.3);
}

.cm-inline-select {
    width: 100%;
    height: 36px;
    padding: 0 28px 0 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(92,232,154,0.1);
    border-radius: 0;
    color: var(--cm-text-bright);
    font-size: 15px;
    font-family: var(--cm-font);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235ce89a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    transition: border-color var(--cm-transition-default);
}

.cm-inline-select:hover {
    border-bottom-color: rgba(92,232,154,0.3);
}

.cm-inline-select:focus {
    border-bottom-color: #5ce89a;
}

.cm-inline-select option {
    color: #050508;
    background: #0e1012;
}


/* ---- Slider Controls ---- */
.cm-slider-track {
    height: 2px;
    background: rgba(92,232,154,0.1);
    border-radius: 1px;
    position: relative;
    width: 100%;
    margin: 8px 0;
}

.cm-slider-fill {
    height: 2px;
    background: #5ce89a;
    border-radius: 1px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 6px rgba(92,232,154,0.3);
}

.cm-slider-thumb {
    width: 12px;
    height: 12px;
    background: #5ce89a;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(92,232,154,0.4);
    cursor: grab;
    position: absolute;
    top: -5px;
    transform: translateX(-50%);
}

.cm-slider-thumb:active {
    cursor: grabbing;
    box-shadow: 0 0 14px rgba(92,232,154,0.6);
}


/* ---- Button Group / Segmented Control ---- */
.cm-button-group {
    display: flex;
    background: rgba(92,232,154,0.03);
    border: 1px solid rgba(92,232,154,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.cm-button-group-item {
    padding: 6px 14px;
    font-size: 13px;
    color: var(--cm-text-secondary);
    cursor: pointer;
    transition: all var(--cm-transition-default);
    border: none;
    background: none;
    font-family: 'JetBrains Mono', monospace;
}

.cm-button-group-item:hover {
    color: var(--cm-text-primary);
}

.cm-button-group-item.active {
    background: #5ce89a;
    color: #050508;
}


/* ---- Node Preview ---- */
.cm-node-preview {
    padding: 4px 12px;
    position: relative;
}

.cm-node-preview img,
.cm-node-preview video {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
}

/* FULL-BLEED image/video — image IS the node (Freepik style) */
.cm-node-visual {
    overflow: hidden;
}
.cm-node-visual .cm-node-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    border-bottom: none;
}
.cm-node-visual .cm-node-body {
    padding: 0;
}
.cm-node-preview-fullbleed {
    padding: 0 !important;
    margin-top: -40px; /* overlap under the header */
}
.cm-node-preview-fullbleed img,
.cm-node-preview-fullbleed video {
    width: 100%;
    min-height: 180px;
    max-height: 400px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.cm-node-preview-fullbleed .cm-resolution-badge {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.8);
    font-size: 12px; padding: 2px 8px;
    border-radius: 4px; font-family: 'JetBrains Mono', monospace;
    backdrop-filter: blur(4px);
}
.cm-node-visual .cm-node-bottom {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    padding: 12px 12px 8px;
}
.cm-node-visual .cm-inline-controls {
    position: absolute; bottom: 40px; left: 0; right: 0; z-index: 2;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
    border-top: none; margin: 0; padding: 8px 12px;
}
.cm-node-visual .cm-port {
    z-index: 10;
}

/* Drag & drop active state */
.cm-canvas-container.cm-drop-active {
    outline: 2px dashed rgba(92,232,154,0.4);
    outline-offset: -4px;
    background: rgba(92,232,154,0.02);
}
.cm-canvas-container.cm-drop-active::after {
    content: 'Drop files here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: rgba(92,232,154,0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 100;
}

.cm-node-preview .cm-preview-text {
    font-size: 14px;
    color: #d0d0d8;
    line-height: 1.6;
    max-height: 120px;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
    opacity: 0.85;
}

/* Node error display */
.cm-node-error {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 10px; margin: 4px 0;
    background: rgba(244,63,94,0.1);
    border: 1px solid rgba(244,63,94,0.25);
    border-radius: 4px;
    font-size: 13px; color: #f43f5e;
    line-height: 1.4;
    font-family: 'JetBrains Mono', monospace;
    word-break: break-word;
}
.cm-node-error svg { flex-shrink: 0; margin-top: 1px; stroke: #f43f5e; }

/* Image resolution badge */
.cm-node-image-badge {
    position: absolute;
    top: 12px;
    right: 20px;
    background: rgba(5,5,8,0.85);
    color: var(--cm-accent);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid rgba(92,232,154,0.1);
}

/* Image strip for multiple outputs */
.cm-node-image-strip {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 0;
}

.cm-node-image-strip img {
    border-radius: 4px;
    flex-shrink: 0;
}


/* ---- Node Actions ---- */
.cm-node-actions {
    padding: 8px 12px 12px;
    display: none;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(92,232,154,0.06);
}

.cm-node.cm-selected .cm-node-actions {
    display: flex;
}

/* ---- Run Button — Green with radial pulse emanation ---- */
.cm-run-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #5ce89a;
    color: #050508;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--cm-font);
    transition: all var(--cm-transition-default);
    padding: 0;
    flex-shrink: 0;
    position: relative;
    animation: cm-run-pulse 2.5s ease-out infinite;
}

.cm-run-btn:hover {
    background: #3bc878;
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(92,232,154,0.4);
}

.cm-run-btn:active {
    transform: scale(0.93);
}

.cm-run-btn.running {
    animation: cm-spin 1s linear infinite;
}

.cm-run-btn svg {
    width: 14px;
    height: 14px;
}

/* Node bottom bar layout */
.cm-node-bottom-bar, .cm-node-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 12px;
    gap: 8px;
}

.cm-node-bottom-bar .cm-run-btn, .cm-node-bottom .cm-run-btn {
    margin-left: auto;
}

.cm-model-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(92,232,154,0.08);
    border-radius: 4px;
    color: var(--cm-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--cm-transition-default);
    font-family: 'JetBrains Mono', monospace;
}

.cm-model-selector:hover {
    border-color: rgba(92,232,154,0.2);
    color: var(--cm-accent);
}

.cm-count-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--cm-text-secondary);
    font-family: 'JetBrains Mono', monospace;
}


/* ---- Upload Node File Items ---- */
.cm-upload-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(92,232,154,0.04);
}

.cm-upload-file-thumb {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}

.cm-upload-file-name {
    font-size: 14px;
    color: var(--cm-text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.cm-upload-file-dims {
    font-size: 12px;
    color: var(--cm-text-muted);
    font-family: 'JetBrains Mono', monospace;
}


/* ================================================================
   NODE PICKER — Frosted glass dropdown with green border glow
   ================================================================ */
.cm-endpoint-menu,
.cm-node-picker {
    position: fixed;
    z-index: 9999;
    width: 240px;
    max-height: 400px;
    background: rgba(10,12,14,0.92);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(92,232,154,0.12);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px rgba(92,232,154,0.06);
    padding: 8px;
    overflow-y: auto;
    font-family: var(--cm-font);
}

.cm-node-picker-search,
.cm-endpoint-search {
    height: 36px;
    background: rgba(92,232,154,0.03);
    border: 1px solid transparent;
    border-bottom: 1px solid rgba(92,232,154,0.1);
    border-radius: 0;
    padding: 0 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--cm-text-primary);
    font-size: 15px;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: border-color var(--cm-transition-default);
}

.cm-node-picker-search:focus,
.cm-endpoint-search:focus {
    border-bottom-color: #5ce89a;
}

.cm-node-picker-search::placeholder,
.cm-endpoint-search::placeholder {
    color: var(--cm-text-muted);
}

.cm-node-picker-section,
.cm-endpoint-section {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cm-text-muted);
    padding: 8px 8px 4px;
    letter-spacing: 1.5px;
    font-family: 'JetBrains Mono', monospace;
}

.cm-endpoint-item,
.cm-node-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 8px;
    border-radius: 4px;
    color: var(--cm-text-secondary);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--cm-transition-default);
    border: none;
    background: none;
    width: 100%;
    font-family: var(--cm-font);
}

.cm-endpoint-item:hover,
.cm-node-picker-item:hover {
    background: rgba(92,232,154,0.06);
    color: var(--cm-accent);
}

.cm-endpoint-item svg,
.cm-node-picker-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.5;
}

.cm-endpoint-item:hover svg,
.cm-node-picker-item:hover svg {
    opacity: 1;
}

.cm-badge-new {
    font-size: 11px;
    font-weight: 600;
    background: #5ce89a;
    color: #050508;
    padding: 1px 6px;
    border-radius: var(--cm-radius-pill);
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
}


/* ================================================================
   CONTEXT MENU — Glass card with green accent line on left
   ================================================================ */
.cm-context-menu {
    position: fixed;
    z-index: var(--cm-z-modal);
    min-width: 180px;
    background: rgba(10,12,14,0.94);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(92,232,154,0.1);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 16px rgba(92,232,154,0.05);
    padding: 4px;
    font-family: var(--cm-font);
}

.cm-context-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 8px 16px;
    border-radius: 4px;
    color: var(--cm-text-secondary);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--cm-transition-default);
    position: relative;
}

/* Green accent line on left of each item */
.cm-context-item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 0;
    background: #5ce89a;
    border-radius: 1px;
    transition: height var(--cm-transition-default);
    box-shadow: 0 0 4px rgba(92,232,154,0.3);
}

.cm-context-item:hover {
    background: rgba(92,232,154,0.06);
    color: var(--cm-accent);
}

.cm-context-item:hover::before {
    height: 14px;
}

.cm-context-item .cm-shortcut {
    font-size: 12px;
    color: var(--cm-text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.cm-context-sep {
    height: 1px;
    background: rgba(92,232,154,0.06);
    margin: 3px 8px;
}

.cm-context-item.danger {
    color: var(--cm-accent-red);
}

.cm-context-item.danger:hover {
    background: rgba(239,68,68,0.08);
    color: var(--cm-accent-red);
}

.cm-context-item.danger:hover::before {
    background: var(--cm-accent-red);
    box-shadow: 0 0 4px rgba(239,68,68,0.3);
}

.cm-context-label {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ================================================================
   FLOATING TOOLBAR — Translucent pill with green-tinted glass
   ================================================================ */
.cm-floating-toolbar {
    display: none;
    align-items: center;
    gap: 2px;
    background: rgba(10,12,14,0.88);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(92,232,154,0.1);
    border-radius: var(--cm-radius-pill);
    padding: 4px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 12px rgba(92,232,154,0.05);
    position: absolute;
    z-index: var(--cm-z-floating-toolbar);
    transform: translateX(-50%);
    pointer-events: auto;
}

.cm-node.cm-selected ~ .cm-floating-toolbar,
.cm-floating-toolbar.cm-visible {
    display: flex;
}

.cm-floating-toolbar-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--cm-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--cm-font);
    transition: all var(--cm-transition-default);
}

.cm-floating-toolbar-btn:hover {
    color: var(--cm-accent);
    background: rgba(92,232,154,0.08);
}

.cm-floating-toolbar-divider {
    width: 1px;
    height: 16px;
    background: rgba(92,232,154,0.08);
    margin: 0 4px;
}

/* Run button in floating toolbar */
.cm-floating-toolbar .cm-run-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    font-size: 12px;
}


/* ---- Text Formatting Toolbar ---- */
.cm-text-toolbar {
    display: none;
    align-items: center;
    gap: 2px;
    background: rgba(10,12,14,0.92);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(92,232,154,0.1);
    border-radius: 6px;
    padding: 4px 8px;
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--cm-z-floating-toolbar);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 10px rgba(92,232,154,0.04);
}

.cm-text-toolbar.cm-visible {
    display: flex;
}

.cm-text-toolbar-dropdown {
    height: 28px;
    padding: 0 8px;
    font-size: 14px;
    color: var(--cm-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: 'JetBrains Mono', monospace;
}

.cm-text-toolbar-dropdown:hover {
    color: var(--cm-accent);
    border-radius: 3px;
}

.cm-text-toolbar-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--cm-font);
    transition: all var(--cm-transition-default);
}

.cm-text-toolbar-btn:hover {
    color: var(--cm-accent);
}

.cm-text-toolbar-btn.active {
    color: #5ce89a;
    text-shadow: 0 0 8px rgba(92,232,154,0.4);
}


/* ================================================================
   LEFT CANVAS TOOLBAR — Translucent green-tinted glass pill
   ================================================================ */
.cm-canvas-toolbar {
    position: absolute;
    left: 12px;
    top: 16px;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(10,12,14,0.85);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(92,232,154,0.08);
    border-radius: 6px;
    padding: 6px;
    z-index: var(--cm-z-canvas-toolbar);
}

.cm-canvas-toolbar-btn {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--cm-font);
    transition: all var(--cm-transition-default);
}

.cm-canvas-toolbar-btn:hover {
    color: var(--cm-accent);
}

.cm-canvas-toolbar-btn.active {
    color: #5ce89a;
    background: rgba(92,232,154,0.1);
    box-shadow: inset 0 0 8px rgba(92,232,154,0.1);
}

.cm-canvas-toolbar-btn svg {
    width: 16px;
    height: 16px;
}

.cm-canvas-toolbar-divider {
    width: 20px;
    height: 1px;
    background: rgba(92,232,154,0.06);
    margin: 2px auto;
}

/* ===== Running state — visual emphasis during CreatorMode execution ===== */
/* Play button dims, Stop button pulses red when cm-running is active on the container. */
.cm-canvas-container.cm-running .cm-canvas-toolbar-btn[data-action="runAll"] {
    opacity: 0.3;
    pointer-events: none;
}
.cm-canvas-container.cm-running .cm-canvas-toolbar-btn[data-action="cancel"] {
    color: #ff5252;
    border-color: rgba(255,82,82,0.5);
    background: rgba(255,82,82,0.08);
    box-shadow: 0 0 0 1px rgba(255,82,82,0.3), 0 0 16px rgba(255,82,82,0.35);
    animation: cmRunningStopPulse 1.6s ease-in-out infinite;
}
@keyframes cmRunningStopPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,82,82,0.3), 0 0 14px rgba(255,82,82,0.25); }
    50%      { box-shadow: 0 0 0 1px rgba(255,82,82,0.7), 0 0 26px rgba(255,82,82,0.55); }
}

/* Floating banner centered at top of the canvas when a run is active */
.cm-running-banner {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 16px;
    border-radius: 999px;
    background: rgba(18,20,24,0.96);
    border: 1px solid rgba(92,232,154,0.22);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 22px rgba(92,232,154,0.1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    z-index: 60;
    backdrop-filter: blur(10px);
}
.cm-running-banner .cm-running-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #5ce89a;
    box-shadow: 0 0 10px rgba(92,232,154,0.85);
    animation: cmRunningDotBlink 1.1s ease-in-out infinite;
}
@keyframes cmRunningDotBlink {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.35); opacity: 0.55;}
}
.cm-running-banner .cm-running-label {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}
.cm-running-banner .cm-running-stop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    background: rgba(255,82,82,0.14);
    color: #ff6060;
    border: 1px solid rgba(255,82,82,0.35);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
}
.cm-running-banner .cm-running-stop:hover {
    background: rgba(255,82,82,0.28);
    color: #ffffff;
    border-color: rgba(255,82,82,0.7);
    box-shadow: 0 0 16px rgba(255,82,82,0.45);
}
.cm-running-banner .cm-running-stop svg { flex-shrink: 0; }

/* Persistent banner when Kie.ai upstream is out of credits */
.cm-kie-out-banner {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 14px;
    border-radius: 12px;
    background: rgba(40,20,20,0.96);
    border: 1px solid rgba(255,100,100,0.4);
    box-shadow: 0 10px 32px rgba(0,0,0,0.6), 0 0 28px rgba(255,82,82,0.22);
    font-family: 'Inter', system-ui, sans-serif;
    color: #ffd2d2;
    z-index: 61;
    backdrop-filter: blur(12px);
    max-width: 540px;
}
.cm-kie-out-banner > svg { color: #ff6060; flex-shrink: 0; }
.cm-kie-out-text { flex: 1; }
.cm-kie-out-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ff8888;
    margin-bottom: 2px;
}
.cm-kie-out-sub {
    font-size: 14px;
    color: rgba(255,210,210,0.85);
    line-height: 1.4;
}
.cm-kie-out-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 8px;
    background: rgba(92,232,154,0.14);
    color: #5ce89a;
    border: 1px solid rgba(92,232,154,0.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
}
.cm-kie-out-btn:hover {
    background: rgba(92,232,154,0.26);
    box-shadow: 0 0 18px rgba(92,232,154,0.45);
}
.cm-kie-out-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: none;
    color: rgba(255,210,210,0.55);
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
}
.cm-kie-out-close:hover { color: #ffffff; background: rgba(255,255,255,0.14); }

/* CreatorMode lightbox — click any completed node preview to see the generation at full size */
.cm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: cmLightboxFadeIn 0.18s ease-out;
}
@keyframes cmLightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cm-lightbox-content {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(14,16,20,0.96);
    border: 1px solid rgba(92,232,154,0.2);
    border-radius: 14px;
    padding: 14px 14px 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 36px rgba(92,232,154,0.12);
}
.cm-lightbox-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cm-lightbox-title {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #5ce89a;
}
.cm-lightbox-actions { display: flex; gap: 6px; }
.cm-lightbox-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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.6);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.cm-lightbox-btn:hover {
    color: #5ce89a;
    border-color: rgba(92,232,154,0.35);
    background: rgba(92,232,154,0.08);
}
.cm-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(92vh - 120px);
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}
.cm-lightbox-media {
    max-width: 100%;
    max-height: calc(92vh - 120px);
    display: block;
    object-fit: contain;
    border-radius: 10px;
}
.cm-lightbox-prompt {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,0.72);
    max-width: 82ch;
    align-self: center;
    padding: 0 4px;
    font-style: italic;
}


/* ================================================================
   WELCOME SCREEN — "YOUR FORGE AWAITS" with scan line
   ================================================================ */
.cm-welcome-container, .cm-welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: auto;
}

.cm-welcome-title {
    font-size: 44px;
    font-weight: 800;
    color: var(--cm-text-bright);
    font-family: 'Outfit', sans-serif;
    letter-spacing: 6px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

/* Green scan line animation across welcome title */
.cm-welcome-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(92,232,154,0.15), rgba(92,232,154,0.05), transparent);
    animation: cm-welcome-scan 4s ease-in-out infinite;
    pointer-events: none;
}

.cm-welcome-subtitle {
    font-size: 15px;
    color: var(--cm-text-muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cm-welcome-cards {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.cm-welcome-card {
    width: 100px;
    height: 80px;
    background: rgba(14,16,18,0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(92,232,154,0.06);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-welcome-card:hover {
    border-color: rgba(92,232,154,0.3);
    background: rgba(92,232,154,0.05);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 16px rgba(92,232,154,0.1);
}

.cm-welcome-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-accent);
}

.cm-welcome-card-icon svg {
    width: 24px;
    height: 24px;
}

.cm-welcome-card-label {
    font-size: 12px;
    color: var(--cm-text-secondary);
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}

/* Template cards on welcome screen */
.cm-template-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}
.cm-template-card {
    width: 130px;
    padding: 14px 12px;
    background: rgba(20,20,32,0.8);
    border: 1px solid rgba(42,42,54,0.6);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.cm-template-card:hover {
    border-color: #5ce89a;
    background: rgba(92,232,154,0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(92,232,154,0.1);
}
.cm-template-icon { font-size: 30px; margin-bottom: 6px; }
.cm-template-label { font-size: 14px; color: #d0e8d8; font-weight: 600; margin-bottom: 4px; }
.cm-template-desc { font-size: 11px; color: #7aaa8e; line-height: 1.3; }


/* ================================================================
   PROPERTIES PANEL
   ================================================================ */
.cm-properties-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    background: rgba(6,6,9,0.95);
    backdrop-filter: blur(20px) saturate(1.3);
    border-left: 1px solid rgba(92,232,154,0.06);
    padding: 16px;
    z-index: var(--cm-z-sidebar);
    transform: translateX(100%);
    opacity: 0;
    transition: transform var(--cm-transition-panel), opacity var(--cm-transition-panel);
    overflow-y: auto;
}

.cm-properties-panel.cm-visible {
    transform: translateX(0);
    opacity: 1;
}

.cm-properties-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cm-accent);
    margin-bottom: 16px;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cm-properties-panel-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cm-text-muted);
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ================================================================
   TEMPLATE / GALLERY CARDS
   ================================================================ */
.cm-template-card {
    border-radius: 6px;
    overflow: hidden;
    background: rgba(14,16,18,0.8);
    border: 1px solid rgba(92,232,154,0.06);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cm-template-card:hover {
    transform: translateY(-2px);
    border-color: rgba(92,232,154,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 14px rgba(92,232,154,0.08);
}

.cm-template-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.cm-template-card-label {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--cm-text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.cm-featured-card {
    width: 280px;
    height: 120px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(92,232,154,0.08), rgba(42,168,101,0.08));
    border: 1px solid rgba(92,232,154,0.1);
    padding: 16px;
    display: flex;
    gap: 16px;
    cursor: pointer;
    transition: all var(--cm-transition-default);
}

.cm-featured-card:hover {
    transform: translateY(-2px);
    border-color: rgba(92,232,154,0.25);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 16px rgba(92,232,154,0.08);
}

.cm-featured-card-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}

.cm-featured-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cm-text-bright);
    font-family: 'Outfit', sans-serif;
}


/* ================================================================
   CREDITS & RUN COSTS
   ================================================================ */
.cm-credit-display {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--cm-text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.cm-credit-display svg {
    width: 12px;
    height: 12px;
    color: #5ce89a;
}


/* ================================================================
   SCROLLBAR STYLING — green-tinted
   ================================================================ */
.cm-app ::-webkit-scrollbar {
    width: 4px;
}

.cm-app ::-webkit-scrollbar-track {
    background: transparent;
}

.cm-app ::-webkit-scrollbar-thumb {
    background: rgba(92,232,154,0.1);
    border-radius: 2px;
}

.cm-app ::-webkit-scrollbar-thumb:hover {
    background: rgba(92,232,154,0.2);
}


/* ================================================================
   TOOLTIP
   ================================================================ */
.cm-tooltip {
    position: absolute;
    background: rgba(5,5,8,0.95);
    backdrop-filter: blur(12px);
    color: var(--cm-accent);
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: var(--cm-z-tooltip);
    border: 1px solid rgba(92,232,154,0.1);
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 8px rgba(92,232,154,0.05);
}


/* ================================================================
   MODAL OVERLAY
   ================================================================ */
.cm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5,5,8,0.8);
    backdrop-filter: blur(4px);
    z-index: var(--cm-z-modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cm-modal {
    background: rgba(10,12,14,0.96);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(92,232,154,0.12);
    border-radius: 6px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.7), 0 0 24px rgba(92,232,154,0.06);
    padding: 24px;
    z-index: var(--cm-z-modal);
    max-width: 480px;
    width: 90%;
}

.cm-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cm-accent);
    margin-bottom: 12px;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 1px;
}

.cm-modal-body {
    font-size: 15px;
    color: var(--cm-text-secondary);
    line-height: 1.6;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .cm-app.cm-sidebar-expanded {
        grid-template-columns: 170px 1fr;
    }
    .cm-app.cm-sidebar-expanded .cm-sidebar {
        width: 170px;
        min-width: 170px;
    }
}

/* ================================================================
   FIXES — Missing CSS for JS-generated classes
   ================================================================ */
.cm-node-picker-search input {
    background: none; border: none; outline: none;
    color: var(--cm-text-primary); font-size: 14px; font-family: 'JetBrains Mono', monospace;
    flex: 1; width: 100%;
}
.cm-node-picker-search input::placeholder { color: var(--cm-text-muted); }

.cm-topbar-logo {
    font-size: 14px; font-weight: 700; color: #5ce89a;
    letter-spacing: 3px; font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(92,232,154,0.3);
}

.cm-run-all-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: #5ce89a; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.18s;
    animation: cm-run-pulse 2.5s ease-out infinite;
}
.cm-run-all-btn:hover { background: #3bc878; box-shadow: 0 0 20px rgba(92,232,154,0.4); }
.cm-run-all-btn svg { width: 14px; height: 14px; color: #050508; }

.cm-sidebar-expand-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none; border-radius: 6px;
    color: rgba(208,208,216,0.5);
    cursor: pointer;
    transition: all 0.15s;
    margin: 4px auto;
}
.cm-sidebar-expand-btn:hover { background: rgba(92,232,154,0.08); color: rgba(208,208,216,0.9); }
.cm-sidebar-account { padding: 8px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm-sidebar-account-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0; font-weight: 500; color: var(--cm-text-secondary);
    cursor: pointer; font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
}
.cm-app.cm-sidebar-expanded .cm-sidebar-account { padding: 8px 16px; }
.cm-app.cm-sidebar-expanded .cm-sidebar-account-label { font-size: 14px; }
.cm-sidebar-account-label svg { opacity: 0.4; }

.cm-credits-sub { display: block; font-size: 12px; color: var(--cm-text-muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }

/* JS node bottom bar children */
.cm-bottom-left, .cm-bottom-center, .cm-bottom-right {
    display: flex; align-items: center; gap: 4px;
}
.cm-model-name {
    font-size: 12px; color: var(--cm-text-muted);
    background: rgba(92,232,154,0.04); padding: 3px 8px;
    border-radius: 3px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid rgba(92,232,154,0.06);
    transition: all 0.18s;
}
.cm-model-name:hover { border-color: rgba(92,232,154,0.2); color: var(--cm-accent); }
.cm-export-btn {
    font-size: 12px; color: var(--cm-text-muted);
    background: rgba(92,232,154,0.04); padding: 3px 10px;
    border-radius: 3px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid rgba(92,232,154,0.06);
    transition: all 0.18s;
    margin-left: 6px;
}
.cm-export-btn:hover { border-color: rgba(92,232,154,0.25); color: var(--cm-accent); background: rgba(92,232,154,0.08); }
.cm-plus-btn {
    width: 20px; height: 20px; border-radius: 3px;
    background: rgba(92,232,154,0.04); border: 1px solid rgba(92,232,154,0.06);
    color: var(--cm-text-muted); font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.18s;
}
.cm-plus-btn:hover { border-color: rgba(92,232,154,0.2); color: var(--cm-accent); }
.cm-count-badge {
    font-size: 12px; color: var(--cm-text-muted);
    background: rgba(92,232,154,0.04); padding: 2px 6px;
    border-radius: 3px; font-family: 'JetBrains Mono', monospace;
}
.cm-drop-zone {
    border: 1px dashed rgba(92,232,154,0.15); border-radius: 6px;
    padding: 20px; text-align: center; cursor: pointer;
    transition: all 0.18s; background: rgba(92,232,154,0.02);
}
.cm-drop-zone:hover { border-color: #5ce89a; background: rgba(92,232,154,0.04); box-shadow: inset 0 0 20px rgba(92,232,154,0.05); }
.cm-drop-icon { font-size: 26px; margin-bottom: 8px; opacity: 0.3; color: #5ce89a; }
.cm-drop-text { font-size: 13px; color: var(--cm-text-muted); font-family: 'JetBrains Mono', monospace; }
.cm-preview-img-wrap { position: relative; }
.cm-resolution-badge, .cm-node-image-badge {
    position: absolute; top: 8px; right: 8px;
    background: rgba(5,5,8,0.85); color: #5ce89a;
    font-size: 11px; padding: 2px 6px;
    border-radius: 3px; font-family: 'JetBrains Mono', monospace;
    border: 1px solid rgba(92,232,154,0.1);
}
.cm-bg-item, .cm-button-group-item {
    padding: 4px 10px; border: 1px solid rgba(92,232,154,0.06);
    border-radius: 4px; background: none;
    color: var(--cm-text-muted); font-size: 12px;
    cursor: pointer; transition: all 0.18s;
    font-family: 'JetBrains Mono', monospace;
}
.cm-bg-item:hover, .cm-button-group-item:hover { border-color: rgba(92,232,154,0.2); color: var(--cm-text-primary); }
.cm-bg-item.active, .cm-button-group-item.active { background: #5ce89a; color: #050508; border-color: #5ce89a; }
input[type="range"].cm-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 2px;
    background: rgba(92,232,154,0.1); border-radius: 1px; outline: none;
}
input[type="range"].cm-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px;
    border-radius: 50%; background: #5ce89a; cursor: pointer;
    box-shadow: 0 0 8px rgba(92,232,154,0.4);
}

/* Dynamic node picker */
.cm-node-picker-search-input {
    background: none; border: none; outline: none;
    color: var(--cm-text-primary, #d0d8d4); font-size: 14px;
    font-family: 'JetBrains Mono', monospace; flex: 1; width: 100%;
}
.cm-node-picker-search-input::placeholder { color: var(--cm-text-muted, #3d4a42); }
.cm-node-picker-icon { width: 18px; height: 18px; flex-shrink: 0; }
.cm-node-picker-label { font-size: 14px; color: var(--cm-text-secondary, #7a8a80); font-family: var(--cm-font); flex:1; }
.cm-picker-cost { font-size: 12px; color: #5ce89a; font-family: 'JetBrains Mono', monospace; opacity: 0.6; margin-left: auto; }
.cm-node-picker-item { display: flex; align-items: center; gap: 8px; }

/* Social Media Poster node */
.cm-node[data-type="socialPoster"] .cm-node-icon { background: rgba(92,232,154,0.08); }

/* View toggle buttons in bottom bar */
.cm-view-toggle {
    width: 28px; height: 28px; border: none; border-radius: 4px;
    background: transparent; color: var(--cm-text-muted, #3d4a42);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.18s;
}
.cm-view-toggle:hover { color: var(--cm-accent); }
.cm-view-toggle.active { background: rgba(92,232,154,0.08); color: #5ce89a; }

/* Minimap placeholder in bottom bar */
.cm-minimap {
    width: 120px; height: 24px; border-radius: 4px;
    background: rgba(14,16,18,0.6); border: 1px solid rgba(92,232,154,0.06);
    opacity: 0.5;
}

/* Breadcrumb items */
.cm-bc-item {
    font-size: 14px; color: var(--cm-text-muted, #3d4a42);
    cursor: pointer; transition: color 0.18s;
    font-family: 'JetBrains Mono', monospace;
}
.cm-bc-item:hover { color: var(--cm-accent); }

/* Connection pulse dots */
.cm-conn-pulse {
    pointer-events: none;
}

/* Node selected glow override for running+selected */
.cm-node.cm-selected.cm-running {
    animation: cm-selected-pulse 2.5s ease-in-out infinite;
}
.cm-node.cm-selected.cm-running::after {
    animation: cm-running-scan 1.8s ease-in-out infinite;
}

/* ================== PREMIUM PRICING OVERLAY ================== */
.pricing-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(6, 8, 12, 0.85);
    backdrop-filter: blur(16px) saturate(1.2);
    overflow-y: auto;
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}
.pricing-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.pricing-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 32px 80px;
    color: #e8e8ec;
}
.pricing-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e8e8ec;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    z-index: 11010;
}
.pricing-close:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(92,232,154,0.5);
    transform: scale(1.05);
}

.pricing-header {
    text-align: center;
    margin-bottom: 40px;
}
.pricing-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: rgba(92,232,154,0.7);
    margin-bottom: 14px;
}
.pricing-title {
    font-family: Outfit, sans-serif;
    font-size: 46px;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -1px;
    color: #fff;
}
.pricing-subtitle {
    color: rgba(255,255,255,0.55);
    font-size: 17px;
    margin: 0 0 28px;
    line-height: 1.5;
}
.pricing-balance {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(92,232,154,0.08);
    border: 1px solid rgba(92,232,154,0.25);
    border-radius: 999px;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 24px;
}
.pricing-balance-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #5ce89a;
    font-size: 17px;
}
.pricing-balance-sub {
    margin-left: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
}

.pricing-period-toggle {
    display: inline-flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}
.pricing-period-toggle button {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.55);
    font-family: Outfit, sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pricing-period-toggle button.active {
    background: #fff;
    color: #0a0a10;
}
.pricing-period-save {
    font-size: 12px;
    font-weight: 700;
    color: #5ce89a;
    background: rgba(92,232,154,0.18);
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: 0.4px;
}
.pricing-period-toggle button.active .pricing-period-save {
    background: rgba(92,232,154,0.22);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 48px;
}
@media (max-width: 1180px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover {
    transform: translateY(-3px);
    border-color: var(--tier-accent, rgba(255,255,255,0.18));
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px var(--tier-accent, transparent);
}
.pricing-card.is-current {
    border-color: var(--tier-accent);
    box-shadow: 0 0 0 1px var(--tier-accent), 0 12px 36px -12px rgba(0,0,0,0.5);
}

.pricing-ribbon {
    color: #fff;
    text-align: center;
    padding: 7px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.pricing-ribbon-spacer { height: 28px; }

.pricing-card-body {
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pricing-card-name {
    font-family: Outfit, sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}
.pricing-card-tagline {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    line-height: 1.45;
    margin: 6px 0 18px;
    min-height: 34px;
}
.pricing-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: Outfit, sans-serif;
}
.pricing-price-strike {
    color: rgba(255,255,255,0.35);
    font-size: 20px;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: rgba(244,63,94,0.55);
    text-decoration-thickness: 2px;
}
.pricing-price-strike:empty { display: none; }
.pricing-price-current {
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1px;
}
.pricing-card-price-suffix {
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    margin: 4px 0 16px;
    font-family: Outfit, sans-serif;
}
.pricing-card-credits {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 2px solid var(--tier-accent);
    border-radius: 6px;
    margin-bottom: 18px;
}
.pricing-credit-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--tier-accent);
}
.pricing-credit-label {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}
.pricing-card-cta {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 0;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: filter 160ms ease, transform 120ms ease;
    margin-bottom: 18px;
}
.pricing-card-cta:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.pricing-card-cta:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: rgba(255,255,255,0.06);
}
.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pricing-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 15px;
    color: rgba(255,255,255,0.78);
    line-height: 1.45;
}
.pricing-card-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.pricing-credit-cost {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 40px;
    overflow: hidden;
}
.pricing-credit-cost summary {
    padding: 16px 20px;
    cursor: pointer;
    font-family: Outfit, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pricing-credit-cost summary::-webkit-details-marker { display: none; }
.pricing-credit-cost summary::before {
    content: '▸';
    color: rgba(92,232,154,0.6);
    transition: transform 160ms ease;
    font-size: 12px;
}
.pricing-credit-cost[open] summary::before { transform: rotate(90deg); }
.pricing-credit-cost-grid {
    padding: 4px 20px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px 24px;
}
.pricing-credit-cost-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 15px;
    color: rgba(255,255,255,0.7);
}
.pricing-credit-cost-grid strong {
    color: rgba(255,255,255,0.92);
    font-weight: 600;
}
.pricing-credit-cost-grid span {
    font-family: 'JetBrains Mono', monospace;
    color: #5ce89a;
    font-weight: 700;
}
.pricing-credit-cost-note {
    padding: 0 20px 18px;
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
    margin: 0;
}

.pricing-topups-section {
    margin-top: 16px;
}
.pricing-section-title {
    font-family: Outfit, sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #fff;
}
.pricing-section-sub {
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    margin: 0 0 22px;
}
.pricing-topups-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 780px) { .pricing-topups-grid { grid-template-columns: repeat(2, 1fr); } }
.pricing-topup-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    transition: border-color 160ms ease, transform 160ms ease;
}
.pricing-topup-card:hover {
    border-color: rgba(92,232,154,0.4);
    transform: translateY(-2px);
}
.pricing-topup-name {
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-bottom: 4px;
}
.pricing-topup-credits {
    font-family: 'JetBrains Mono', monospace;
    color: #5ce89a;
    font-size: 15px;
    margin-bottom: 8px;
}
.pricing-topup-price {
    font-family: Outfit, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}
.pricing-topup-cta {
    width: 100%;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid rgba(92,232,154,0.4);
    background: rgba(92,232,154,0.1);
    color: #5ce89a;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 160ms ease;
}
.pricing-topup-cta:hover {
    background: rgba(92,232,154,0.2);
}

/* ================== GENERATIONS PANEL (bottom drawer) ================== */
.cm-gens-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: rgba(14,14,20,0.94);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(92,232,154,0.2);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(92,232,154,0.05) inset;
    z-index: 40;
    transition: max-height 220ms ease, padding 220ms ease;
    max-height: 132px;
    overflow: hidden;
    padding: 6px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cm-gens-panel.cm-gens-collapsed {
    max-height: 30px;
    padding: 4px 10px;
}
.cm-gens-toggle {
    background: transparent;
    border: 0;
    color: rgba(92,232,154,0.85);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    align-self: flex-start;
}
.cm-gens-toggle:hover { color: #5ce89a; }
.cm-gens-toggle svg {
    transition: transform 220ms ease;
    transform: rotate(180deg);
}
.cm-gens-collapsed .cm-gens-toggle svg {
    transform: rotate(0deg);
}
.cm-gens-count {
    background: rgba(92,232,154,0.15);
    color: #5ce89a;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
}
.cm-gens-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.cm-gens-strip::-webkit-scrollbar { height: 6px; }
.cm-gens-strip::-webkit-scrollbar-thumb { background: rgba(92,232,154,0.3); border-radius: 3px; }
.cm-gens-empty {
    color: rgba(255,255,255,0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 18px 8px;
    width: 100%;
    text-align: center;
}
.cm-gens-item {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    cursor: zoom-in;
    transition: transform 140ms ease, border-color 140ms ease;
    background: #000;
}
.cm-gens-item:hover {
    transform: translateY(-2px);
    border-color: rgba(92,232,154,0.5);
}
.cm-gens-item img,
.cm-gens-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.cm-gens-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,0.7);
    color: #5ce89a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* ================== SOCIAL CIRCLE DOTS ================== */
.social-dots-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px 18px;
    align-items: center;
}
.social-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--platform-color, #888);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 220ms ease, transform 160ms ease, border-color 160ms ease, box-shadow 220ms ease, background 220ms ease;
    /* Grey by default — desaturated to convey "not connected" */
    filter: grayscale(1) brightness(0.7);
    padding: 0;
    flex-shrink: 0;
    position: relative;
}
.social-dot:hover {
    transform: translateY(-2px) scale(1.05);
    filter: grayscale(0.5) brightness(0.95);
    border-color: rgba(92,232,154,0.4);
}
.social-dot.connecting {
    border-color: rgba(92,232,154,0.6);
    animation: social-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes social-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(92,232,154,0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(92,232,154,0); }
}
.social-dot.connected {
    /* Full platform color when authenticated. Border + glow use the platform's
       own color so each lit dot is visually distinct (YouTube red, IG pink, etc). */
    filter: none;
    border-color: color-mix(in srgb, var(--platform-color) 60%, transparent);
    background: color-mix(in srgb, var(--platform-color) 12%, rgba(10,14,20,0.7));
    box-shadow: 0 0 12px -2px color-mix(in srgb, var(--platform-color) 50%, transparent),
                0 0 0 1px color-mix(in srgb, var(--platform-color) 35%, transparent) inset;
}
.social-dot.connected:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 18px -2px color-mix(in srgb, var(--platform-color) 65%, transparent),
                0 0 0 1px color-mix(in srgb, var(--platform-color) 50%, transparent) inset;
}
.social-dot svg {
    pointer-events: none;
}

/* ================== AUTO-POST PAGE COMPACT LAYOUT ================== */
/* Goal: fit Auto-Post Calendar + Social Hub in one viewport. Calendar cells
   are shorter, left panel scrolls within a tighter max-height, and the Social
   Hub becomes a horizontal row of compact circle pills instead of big cards. */

/* Shrink calendar day cells — they were aspect-ratio 1/1.1 which made the
   month very tall. 1.5/1 means cells are wider than tall, so 6 rows fits in
   half the height. */
.batch-calendar-section .cal-day-cell {
    aspect-ratio: 1.5 / 1;
    min-height: 30px;
    padding-top: 3px;
    font-size: 13px;
    background: rgba(255,255,255,0.015);
    border-radius: 5px;
    transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.batch-calendar-section .cal-day-cell:hover {
    background: rgba(92,232,154,0.07);
    border-color: rgba(92,232,154,0.35);
    transform: translateY(-1px);
    box-shadow: 0 0 8px -2px rgba(92,232,154,0.3);
}
/* Today — mint glow ring + bolder text */
.batch-calendar-section .cal-day-cell.today {
    border-color: #5ce89a !important;
    background: rgba(92,232,154,0.10);
    box-shadow: 0 0 0 1px rgba(92,232,154,0.4) inset, 0 0 12px -2px rgba(92,232,154,0.4);
    color: #5ce89a !important;
    font-weight: 700;
}
/* Selected day — solid mint pad */
.batch-calendar-section .cal-day-cell.selected:not(.today) {
    background: rgba(92,232,154,0.18);
    border-color: rgba(92,232,154,0.5);
    color: #fff;
}
/* Weekends — subtle warm tint (Jörmungandr gold accent) */
.batch-calendar-section .cal-day-cell.weekend {
    background: rgba(212,165,116,0.04);
}
.batch-calendar-section .cal-day-cell.weekend:hover {
    background: rgba(212,165,116,0.10);
    border-color: rgba(212,165,116,0.35);
    box-shadow: 0 0 8px -2px rgba(212,165,116,0.3);
}
.batch-calendar-section .cal-day-cell.other-month {
    background: transparent;
    opacity: 0.3;
}
.batch-calendar-section .cal-day-cell.has-events {
    background: rgba(92,232,154,0.05);
}
/* Scheduled-event dots — colored by platform, stacked at bottom of cell */
.batch-calendar-section .cal-day-events {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}
.batch-calendar-section .cal-day-event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--event-color, #5ce89a);
    box-shadow: 0 0 4px var(--event-color, #5ce89a);
}
.batch-calendar-section .cal-header-cell {
    font-size: 11px;
    padding: 2px 0;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.batch-calendar-section .cal-header-cell:nth-child(6),
.batch-calendar-section .cal-header-cell:nth-child(7) {
    color: rgba(212,165,116,0.6);
}
.batch-calendar-section .month-calendar-container {
    padding: 10px;
    background: linear-gradient(180deg, rgba(92,232,154,0.02), rgba(0,0,0,0.05));
    border: 1px solid rgba(92,232,154,0.08);
}
.batch-calendar-section .month-calendar-nav {
    margin-bottom: 6px;
}
.batch-calendar-section .month-calendar-title {
    color: #fff;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* Tighter left panel — was max-height 700 which pushed the page below fold. */
.batch-calendar-section .batch-video-panel {
    max-height: 480px;
}

/* ===== Compact circle-pill social hub ===== */
.social-hub .card-header {
    padding: 10px 16px;
}
.social-hub .card-header h2 {
    font-size: 0.95rem;
}
.social-hub .section-hint { display: none; }

.social-hub .social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px 14px;
    grid-template-columns: none !important;
}

/* Compact card — short horizontal pill, ~52px tall. Icon + name + toggle.
   Connect button hides; clicking the card calls connectPlatform via the JS
   already wired. */
.social-hub .social-card {
    flex: 0 1 auto;
    min-width: 180px;
    max-width: 220px;
    min-height: 0;
    padding: 8px 10px;
    gap: 0;
    flex-direction: row;
    align-items: center;
}
.social-hub .social-card-top {
    flex: 1;
    min-width: 0;
    gap: 8px;
}
.social-hub .social-icon-wrap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.social-hub .social-icon-wrap svg {
    width: 16px;
    height: 16px;
}
.social-hub .social-info {
    min-width: 0;
    flex: 1;
}
.social-hub .social-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.social-hub .social-status {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.1;
}
.social-hub .social-card.connected .social-status {
    color: #5ce89a;
}
.social-hub .toggle-switch {
    transform: scale(0.7);
    transform-origin: right center;
    margin: -4px;
}
/* Replace the big "Connect" button with a tiny icon-only button — clicking
   anywhere on the card already triggers connectPlatform via the existing
   .social-connect-btn handler, so we keep the button but hide its label. */
.social-hub .social-connect-btn {
    display: none;
}
.social-hub .social-card:not(.connected) {
    cursor: pointer;
}
.social-hub .social-card:not(.connected):hover .social-status::after {
    content: '  · click to connect';
    color: rgba(92,232,154,0.7);
}

/* Top nav drag-to-reorder states (nav-reorder.js) */
.top-nav-tab.reorder-unlocked { cursor: grab; }
.top-nav-tab.reorder-unlocked:active { cursor: grabbing; }
.top-nav-tab.reorder-dragging { opacity: 0.4; transform: scale(0.96); }
.top-nav-tab.reorder-over { box-shadow: inset 0 0 0 2px rgba(92,232,154,0.5); }