/* ============================================================
   Gems Module - Custom Gems Workshop
   Scoped CSS for the gems PD module
   All selectors prefixed with .gems-module to avoid conflicts
   Mirrors structure of css/vibe-coding-launchpad.css
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS Variables (.gems-module scope)
   ------------------------------------------------------------ */
.gems-module {
    --bg-primary: #000000;
    --bg-elevated: #0a0f14;
    --bg-surface: #111820;
    --bg-card: rgba(10, 15, 20, 0.95);
    --bg-card-hover: rgba(15, 22, 30, 0.9);
    --bg-base: #0d1117;

    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.4);

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(255, 255, 255, 0.15);

    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-glow: rgba(20, 184, 166, 0.3);

    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-glow: rgba(168, 85, 247, 0.3);

    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-glow: rgba(59, 130, 246, 0.3);

    --pink-300: #A5B4FC;
    --pink-400: #818CF8;
    --pink-500: #6366F1;
    --pink-glow: rgba(99, 102, 241, 0.3);

    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-glow: rgba(245, 158, 11, 0.3);

    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-glow: rgba(34, 197, 94, 0.3);

    --success: #22c55e;
    --success-muted: rgba(34, 197, 94, 0.15);
    --warning: #facc15;
    --warning-muted: rgba(250, 204, 21, 0.15);
    --error: #ef4444;
    --error-muted: rgba(239, 68, 68, 0.15);

    --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --ambient-opacity: 1;
    --grid-color: rgba(255, 255, 255, 0.03);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.4s ease;
}


/* ------------------------------------------------------------
   2. Light Mode
   ------------------------------------------------------------ */
[data-theme="light"] .gems-module {
    --bg-primary: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-surface: #F9FAFB;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F9FAFB;
    --bg-base: #F9FAFB;

    --text-primary: #1a1a2e;
    --text-secondary: #5f6368;
    --text-muted: #9AA0A6;

    --border-subtle: transparent;
    --border-default: rgba(0, 0, 0, 0.06);
    --border-accent: rgba(0, 0, 0, 0.08);

    --teal-glow: rgba(16, 185, 129, 0.08);
    --purple-glow: rgba(139, 92, 246, 0.08);
    --blue-glow: rgba(59, 130, 246, 0.08);
    --pink-glow: rgba(99, 102, 241, 0.08);

    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 2px 8px rgba(0, 0, 0, 0.06);

    --ambient-opacity: 0;
    --grid-color: transparent;
}

[data-theme="light"] .gems-module .header {
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: none;
}

[data-theme="light"] .gems-module .header-progress { background: #F3F4F6; }
[data-theme="light"] .gems-module .header-progress-bar {
    background: linear-gradient(90deg, #4338CA, #6366F1) !important;
    box-shadow: none !important;
}

[data-theme="light"] .gems-module::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #FAFBFC;
    z-index: -1;
}

[data-theme="light"] .gems-module::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60vh;
    background: linear-gradient(180deg,
        rgba(99, 102, 241, 0.03) 0%,
        rgba(20, 184, 166, 0.02) 25%,
        rgba(59, 130, 246, 0.015) 50%,
        transparent 100%);
    z-index: -1;
    pointer-events: none;
}

[data-theme="light"] .gems-module .landing-bg { opacity: var(--ambient-opacity); }
[data-theme="light"] .gems-module .landing-grid {
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
}
[data-theme="light"] .gems-module .landing-orb { opacity: 0.35; }

/* Light mode - Cards (pastel fills, minimal borders) */
[data-theme="light"] .gems-module .glass-card {
    background: #F8F7FF;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
[data-theme="light"] .gems-module .glass-card:hover {
    background: #F5F3FF;
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gems-module .glass-card--highlight {
    background: #F5F3FF;
    border-color: rgba(99, 102, 241, 0.08);
}
[data-theme="light"] .gems-module .glass-card--highlight:hover {
    border-color: rgba(99, 102, 241, 0.15);
}

/* Light mode - Buttons (solid indigo, minimal) */
[data-theme="light"] .gems-module .btn--shiny {
    background: #4338CA !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    animation: none !important;
    overflow: hidden;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

/* Subtle glass sheen overlay */
[data-theme="light"] .gems-module .btn--shiny::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.05) 100%) !important;
    border-radius: inherit !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transition: opacity 0.3s ease !important;
}

/* Hover state overlay */
[data-theme="light"] .gems-module .btn--shiny::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: #3730A3 !important;
    border-radius: inherit !important;
    opacity: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
    filter: none !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
}

[data-theme="light"] .gems-module .btn--shiny span,
[data-theme="light"] .gems-module .btn--shiny i,
[data-theme="light"] .gems-module .btn--shiny svg {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .gems-module .btn--shiny:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Darker gradient shows through on hover */
[data-theme="light"] .gems-module .btn--shiny:hover::after {
    opacity: 1 !important;
}

[data-theme="light"] .gems-module .btn--shiny:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3),
                0 2px 6px rgba(2, 6, 23, 0.1) !important;
}

/* Hide particles in light mode */
[data-theme="light"] .gems-module .btn--shiny .points-wrapper {
    display: none !important;
}

/* Hide particles in dark mode */
[data-theme="dark"] .gems-module .btn--shiny .points-wrapper,
:root:not([data-theme="light"]) .gems-module .btn--shiny .points-wrapper {
    display: none;
}

/* Light mode - Controls */
[data-theme="light"] .gems-module .controls {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .control-btn {
    border-color: rgba(0, 0, 0, 0.08);
    color: #4338CA;
}
[data-theme="light"] .gems-module .control-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.06);
    border-color: #4338CA;
}
[data-theme="light"] .gems-module .controls-counter { color: #6B7280; }
[data-theme="light"] .gems-module .controls-dot { background: #D1D5DB; }
[data-theme="light"] .gems-module .controls-dot:hover { background: #9CA3AF; }
[data-theme="light"] .gems-module .controls-dot.active { background: #4338CA; }
[data-theme="light"] .gems-module .controls-dot.completed { background: #16A34A; }
[data-theme="light"] .gems-module .dot-separator { background: rgba(0, 0, 0, 0.06); }

/* Light mode - Gem Flow Cards */
[data-theme="light"] .gems-module .gem-flow-step {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
[data-theme="light"] .gems-module .gem-flow-step:hover {
    background: #FAFBFF;
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .gems-module .gem-flow-arrow i { color: #4338CA; }
[data-theme="light"] .gems-module .gem-flow-desc { color: #4B5563; opacity: 1; }
[data-theme="light"] .gems-module .gem-flow-label { text-shadow: none; }
[data-theme="light"] .gems-module .gem-flow-icon {
    border-width: 2px;
}
[data-theme="light"] .gems-module .slide.active .gem-flow-step:nth-child(1) .gem-flow-icon { animation: none; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15); }
[data-theme="light"] .gems-module .slide.active .gem-flow-step:nth-child(2) .gem-flow-icon { animation: none; box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15); }
[data-theme="light"] .gems-module .slide.active .gem-flow-step:nth-child(3) .gem-flow-icon { animation: none; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15); }
[data-theme="light"] .gems-module .gem-flow-example {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: #374151;
}
[data-theme="light"] .gems-module .gem-flow-file {
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.25);
    color: #0D7377;
}
[data-theme="light"] .gems-module .gem-flow-upload-target {
    border-color: rgba(20, 184, 166, 0.3);
    color: rgba(13, 115, 119, 0.5);
}
[data-theme="light"] .gems-module .gem-flow-network .net-line { stroke: rgba(99, 102, 241, 0.2); }
[data-theme="light"] .gems-module .gem-flow-network .net-center { fill: rgba(99, 102, 241, 0.15); stroke: rgba(99, 102, 241, 0.4); }
[data-theme="light"] .gems-module .gem-flow-network .net-node { fill: rgba(99, 102, 241, 0.3); }

/* Light mode - Step Cards */
[data-theme="light"] .gems-module .step-item {
    background: #FAFAFA !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
[data-theme="light"] .gems-module .step-item:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .gems-module .step-item.current {
    background: #F5F3FF !important;
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
    border-left: 4px solid #4338CA !important;
    box-shadow: none !important;
}
[data-theme="light"] .gems-module .step-item.completed {
    background: #F0FDF4 !important;
    border: 1px solid rgba(22, 163, 74, 0.08) !important;
    border-left: 4px solid #16A34A !important;
}
[data-theme="light"] .gems-module .step-title { color: #111827 !important; }
[data-theme="light"] .gems-module .step-desc { color: #6B7280 !important; }

/* Light mode - Step Checkbox */
[data-theme="light"] .gems-module .step-checkbox {
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: #FFFFFF !important;
}
[data-theme="light"] .gems-module .step-checkbox:hover {
    border-color: #4338CA !important;
    background: rgba(99, 102, 241, 0.06) !important;
}
[data-theme="light"] .gems-module .step-checkbox:not(.checked)::before { color: #6B7280 !important; }
[data-theme="light"] .gems-module .step-checkbox.checked {
    background: #16A34A !important;
    border-color: #16A34A !important;
}
[data-theme="light"] .gems-module .step-checkbox.checked::after { border-color: #FFFFFF !important; }

/* Light mode - Code Blocks */
[data-theme="light"] .gems-module .code-block,
[data-theme="light"] .gems-module .code-block-editable {
    background: #1F2937;
    border-color: rgba(59, 130, 246, 0.3);
    color: #E5E7EB;
}
[data-theme="light"] .gems-module .code-block-editable:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Light mode - Quote Box */
[data-theme="light"] .gems-module .quote-box {
    background: #F0FDF4;
    border: 1px solid rgba(22, 163, 74, 0.08);
    border-left: 4px solid #16A34A;
}
[data-theme="light"] .gems-module .quote-box p { color: #374151; }

/* Light mode - Helper Video */
[data-theme="light"] .gems-module .helper-video-btn {
    background: #F5F3FF;
    border-color: rgba(0, 0, 0, 0.04);
    color: #6B7280;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .helper-video-btn:hover {
    background: #EDE9FE;
    border-color: rgba(99, 102, 241, 0.1);
    color: #111827;
    transform: translateY(-1px);
}
[data-theme="light"] .gems-module .video-preview { border-color: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .gems-module .video-preview:hover {
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Light mode - Inspiration Cards */
[data-theme="light"] .gems-module .inspiration-card {
    background: #F0F9FF !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .inspiration-card:hover {
    background: #E8F4FD !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px);
}

/* Light mode - Ideas List */
[data-theme="light"] .gems-module .ideas-list-container {
    background: #FAFAFA;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .gems-module .idea-item {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .gems-module .idea-item-text { color: #111827 !important; }
[data-theme="light"] .gems-module .idea-item-author { color: #6B7280 !important; }

/* Light mode - Anatomy Cards */
[data-theme="light"] .gems-module .anatomy-card {
    background: #F8F7FF !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .anatomy-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gems-module .anatomy-timeline::before { opacity: 0.2; }
[data-theme="light"] .gems-module .anatomy-example {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(0, 0, 0, 0.04);
}

/* Light mode - Gem Assembly Center */
[data-theme="light"] .gems-module .anatomy-gem-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
}
[data-theme="light"] .gems-module .anatomy-gem-label {
    color: #4338CA;
    text-shadow: none;
}
[data-theme="light"] .gems-module .anatomy-gem-sublabel {
    color: #9CA3AF;
}
[data-theme="light"] .gems-module .anatomy-card-grid:nth-child(1):hover { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1) !important; }
[data-theme="light"] .gems-module .anatomy-card-grid:nth-child(2):hover { box-shadow: 0 4px 20px rgba(20, 184, 166, 0.1) !important; }
[data-theme="light"] .gems-module .anatomy-card-grid:nth-child(3):hover { box-shadow: 0 4px 20px rgba(168, 85, 247, 0.1) !important; }
[data-theme="light"] .gems-module .anatomy-card-grid:nth-child(4):hover { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1) !important; }
[data-theme="light"] .gems-module .anatomy-card-grid:nth-child(5):hover { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1) !important; }

/* Light mode - Gem Compare */
[data-theme="light"] .gems-module .gem-compare {
    background: transparent;
}
[data-theme="light"] .gems-module .gem-compare-side {
    border-color: var(--border-default);
}
[data-theme="light"] .gems-module .gem-compare--before {
    background: #F9FAFB;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .gem-compare--after {
    background: linear-gradient(rgba(255, 255, 255, 1), rgba(238, 242, 255, 1)) padding-box,
        conic-gradient(from var(--gradient-angle),
            transparent 0%,
            #6366F1 8%,
            #818CF8 18%,
            #a855f7 28%,
            #6366F1 38%,
            transparent 48%) border-box;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 15px rgba(99, 102, 241, 0.1);
    animation: gems-shiny-border-spin 3s linear infinite;
}
[data-theme="light"] .gems-module .gem-compare--after::before {
    background: radial-gradient(circle at 50% 120%, rgba(99, 102, 241, 0.06), transparent 60%);
}
[data-theme="light"] .gems-module .gem-compare-icon--before {
    background: rgba(243, 244, 246, 0.6);
    border-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .gems-module .gem-compare-icon--after {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);
    animation: none;
}
[data-theme="light"] .gems-module .gem-compare-label--before { color: #9CA3AF; }
[data-theme="light"] .gems-module .gem-compare-label--after { color: #4338CA; text-shadow: none; }
[data-theme="light"] .gems-module .gem-compare-text { color: #6B7280; }
[data-theme="light"] .gems-module .gem-compare-text em { color: #1F2937; }
[data-theme="light"] .gems-module .gem-compare--before .gem-compare-example {
    background: rgba(243, 244, 246, 0.8);
    border-color: rgba(2, 6, 23, 0.08);
    color: #9CA3AF;
}
[data-theme="light"] .gems-module .gem-compare--after .gem-compare-example {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.15);
    color: #4338CA;
}
[data-theme="light"] .gems-module .gem-compare-divider {
    background: rgba(249, 250, 251, 0.8);
}
[data-theme="light"] .gems-module .gem-compare-divider::before {
    background: linear-gradient(to bottom, transparent, #6366F1, transparent);
    opacity: 0.2;
}
[data-theme="light"] .gems-module .gem-compare-arrow {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.06);
    color: #4338CA;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Light mode - Section accent gradient (color cycle) */
[data-theme="light"] .gems-module .text-section .accent {
    background: linear-gradient(135deg,
        #4338CA 0%, #0D9488 16%, #2563EB 33%, #7c3aed 50%, #4338CA 66%, #0D9488 83%, #4338CA 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gems-accent-color-cycle 8s ease-in-out infinite;
}

/* Light mode - Model Cards */
[data-theme="light"] .gems-module .model-card {
    background: #FAFAFA !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .model-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gems-module .model-card-tagline { color: #6B7280; }
[data-theme="light"] .gems-module .model-card-list li { color: #374151; }

/* Light mode - Stat Cards */
[data-theme="light"] .gems-module .stat-card {
    background: #F5F3FF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: none;
}

/* Light mode - Benefits Strip */
[data-theme="light"] .gems-module .gem-benefit-card {
    background: #FAFAFA;
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .gem-benefit--purple { background: #FAF5FF; border-color: rgba(168, 85, 247, 0.08); }
[data-theme="light"] .gems-module .gem-benefit--blue { background: #EFF6FF; border-color: rgba(59, 130, 246, 0.08); }
[data-theme="light"] .gems-module .gem-benefit--amber { background: #FFFBEB; border-color: rgba(245, 158, 11, 0.08); }
[data-theme="light"] .gems-module .gem-benefit-desc {
    color: #6B7280;
}

/* Light mode - Scaling Cards */
[data-theme="light"] .gems-module .scaling-card {
    background: #F8FAFC !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none;
}
[data-theme="light"] .gems-module .scaling-card:hover {
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Light mode - Gallery */
[data-theme="light"] .gems-module .gallery-card {
    background: #F8F7FF !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: none;
}
[data-theme="light"] .gems-module .gallery-card:hover {
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Light mode - Forms */
[data-theme="light"] .gems-module .form-input,
[data-theme="light"] .gems-module .form-select,
[data-theme="light"] .gems-module .form-textarea {
    background: #FAFAFA;
    border-color: rgba(0, 0, 0, 0.08);
    color: #111827;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .form-input::placeholder,
[data-theme="light"] .gems-module .form-textarea::placeholder { color: #9CA3AF; }
[data-theme="light"] .gems-module .form-input:focus,
[data-theme="light"] .gems-module .form-select:focus,
[data-theme="light"] .gems-module .form-textarea:focus {
    background: #FFFFFF;
    border-color: #4338CA;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
[data-theme="light"] .gems-module .form-select {
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}
[data-theme="light"] .gems-module .form-label { color: #111827; }

/* Light mode - Rating & Toggle buttons */
[data-theme="light"] .gems-module .rating-btn,
[data-theme="light"] .gems-module .toggle-btn {
    background: #FAFAFA; border-color: rgba(0, 0, 0, 0.06); color: #9CA3AF;
}
[data-theme="light"] .gems-module .rating-btn:hover,
[data-theme="light"] .gems-module .rating-btn.selected,
[data-theme="light"] .gems-module .toggle-btn:hover,
[data-theme="light"] .gems-module .toggle-btn.selected {
    background: rgba(99, 102, 241, 0.06); border-color: #4338CA; color: #4338CA;
}
[data-theme="light"] .gems-module .feedback-section + .feedback-section {
    border-top-color: var(--border-default);
}
[data-theme="light"] .gems-module .feedback-section-label { color: #4338CA; }

/* Light mode - Modals */
[data-theme="light"] .gems-module .video-modal,
[data-theme="light"] .gems-module .gallery-modal {
    background: rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .gems-module .gallery-modal-content {
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Light mode - Status messages */
[data-theme="light"] .gems-module .status-message.success {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.3);
}
[data-theme="light"] .gems-module .status-message.error {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

/* Light mode - Indigo Shiny Button */
[data-theme="light"] .gems-module .btn--shiny-pink {
    background: #4338CA !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .gems-module .btn--shiny-pink::after {
    background: #3730A3 !important;
}
[data-theme="light"] .gems-module .btn--shiny-pink:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Light mode - Radio Cards (Gem Architect) */
[data-theme="light"] .gems-module .radio-card-content {
    background: #FAFAFA;
    border: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .radio-card:hover .radio-card-content {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background: #F5F3FF;
}
[data-theme="light"] .gems-module .radio-card input:checked + .radio-card-content {
    background: rgba(20, 184, 166, 0.04);
    border-color: var(--teal-500);
    box-shadow: 0 0 0 1px var(--teal-500), 0 2px 8px rgba(20, 184, 166, 0.12);
}
[data-theme="light"] .gems-module .radio-card-icon {
    color: #6B7280;
}
[data-theme="light"] .gems-module .radio-card input:checked + .radio-card-content .radio-card-icon {
    color: var(--teal-600);
}
[data-theme="light"] .gems-module .radio-card-label {
    color: #1F2937;
}
[data-theme="light"] .gems-module .radio-card input:checked + .radio-card-content .radio-card-label {
    color: #1F2937;
}
[data-theme="light"] .gems-module .radio-card-sub {
    color: #9CA3AF;
}
[data-theme="light"] .gems-module .radio-card input:checked + .radio-card-content .radio-card-sub {
    color: #6B7280;
}

/* Light mode - Gem Builder Cards */
[data-theme="light"] .gems-module .gem-builder-card {
    background: #FAFAFA;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="light"] .gems-module .gem-builder-card--pink   { border-color: rgba(99, 102, 241, 0.15); background: #F8F7FF; }
[data-theme="light"] .gems-module .gem-builder-card--teal   { border-color: rgba(20, 184, 166, 0.15); background: #F0FDFA; }
[data-theme="light"] .gems-module .gem-builder-card--purple { border-color: rgba(168, 85, 247, 0.15); background: #FAF5FF; }
[data-theme="light"] .gems-module .gem-builder-card--blue   { border-color: rgba(59, 130, 246, 0.15); background: #EFF6FF; }
[data-theme="light"] .gems-module .gem-builder-card--amber  { border-color: rgba(245, 158, 11, 0.15); background: #FFFBEB; }
[data-theme="light"] .gems-module .gem-builder-card--green  { border-color: rgba(34, 197, 94, 0.15); background: #F0FDF4; }

[data-theme="light"] .gems-module .gem-builder-card-title { color: #1F2937; }
[data-theme="light"] .gems-module .gem-builder-card-desc { color: #5f6368; }

[data-theme="light"] .gems-module .gem-builder-badge--pink   { background: rgba(99, 102, 241, 0.1); color: #4338CA; }
[data-theme="light"] .gems-module .gem-builder-badge--teal   { background: rgba(20, 184, 166, 0.1); color: #0D9488; }
[data-theme="light"] .gems-module .gem-builder-badge--purple { background: rgba(168, 85, 247, 0.1); color: #7C3AED; }
[data-theme="light"] .gems-module .gem-builder-badge--blue   { background: rgba(59, 130, 246, 0.1); color: #2563EB; }
[data-theme="light"] .gems-module .gem-builder-badge--amber  { background: rgba(245, 158, 11, 0.1); color: #D97706; }
[data-theme="light"] .gems-module .gem-builder-badge--green  { background: rgba(34, 197, 94, 0.1); color: #16A34A; }

/* Light mode - Builder Preview Cards */
[data-theme="light"] .gems-module .gem-builder-preview--pink { border-color: rgba(99, 102, 241, 0.12); background: #F8F7FF; }
[data-theme="light"] .gems-module .gem-builder-preview--teal { border-color: rgba(20, 184, 166, 0.12); background: #F0FDFA; }
[data-theme="light"] .gems-module .gem-builder-preview-text {
    background: rgba(0, 0, 0, 0.02);
    border-left-color: rgba(0, 0, 0, 0.08);
    color: #374151;
}

/* Light mode - Builder Checklist */
[data-theme="light"] .gems-module .gem-builder-checklist-item {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gems-module .gem-builder-checklist-item:hover {
    border-color: rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .gems-module .gem-builder-checklist-check {
    border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .gems-module .gem-builder-checklist-label { color: #1F2937; }
[data-theme="light"] .gems-module .gem-builder-checklist-desc { color: #6B7280; }

/* Light mode - Builder Note */
[data-theme="light"] .gems-module .gem-builder-note {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.1);
    color: #5f6368;
}
[data-theme="light"] .gems-module .gem-builder-note i { color: #2563EB; }

/* Light mode - Builder Form Elements */
[data-theme="light"] .gems-module .gem-builder-input,
[data-theme="light"] .gems-module .gem-builder-textarea {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.1);
    color: #1F2937;
}
[data-theme="light"] .gems-module .gem-builder-input:focus,
[data-theme="light"] .gems-module .gem-builder-textarea:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.08);
}
[data-theme="light"] .gems-module .gem-builder-input::placeholder,
[data-theme="light"] .gems-module .gem-builder-textarea::placeholder { color: #9CA3AF; }

/* Light mode - Builder Chips */
[data-theme="light"] .gems-module .gem-builder-chip {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
    color: #5f6368;
}
[data-theme="light"] .gems-module .gem-builder-chip:hover {
    background: #F5F3FF;
    border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .gems-module .gem-builder-chip--active {
    background: rgba(168, 85, 247, 0.08);
    border-color: #7C3AED;
    color: #7C3AED;
}
[data-theme="light"] .gems-module .gem-builder-card--green .gem-builder-chip--active {
    background: rgba(34, 197, 94, 0.08);
    border-color: #16A34A;
    color: #16A34A;
}

/* Light mode - Builder Example Chips */
[data-theme="light"] .gems-module .gem-builder-example-chip {
    background: rgba(34, 197, 94, 0.04);
    border-color: rgba(34, 197, 94, 0.1);
    color: #6B7280;
}
[data-theme="light"] .gems-module .gem-builder-example-chip:hover {
    background: rgba(34, 197, 94, 0.08);
    border-color: #16A34A;
    color: #16A34A;
}

/* Light mode - Builder Tone Selector */
[data-theme="light"] .gems-module .gem-builder-tone-option {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gems-module .gem-builder-tone-option:hover {
    border-color: rgba(245, 158, 11, 0.2);
    background: #FFFBEB;
}
[data-theme="light"] .gems-module .gem-builder-tone-option--active {
    border-color: #D97706;
    background: #FFFBEB;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15);
}
[data-theme="light"] .gems-module .gem-builder-tone-icon {
    background: rgba(245, 158, 11, 0.08);
    color: #D97706;
}
[data-theme="light"] .gems-module .gem-builder-tone-label { color: #1F2937; }
[data-theme="light"] .gems-module .gem-builder-tone-desc { color: #6B7280; }

/* Light mode - Builder Intensity */
[data-theme="light"] .gems-module .gem-builder-intensity {
    background: #FFFBEB;
    border-color: rgba(245, 158, 11, 0.1);
}
[data-theme="light"] .gems-module .gem-builder-intensity-header { color: #D97706; }
[data-theme="light"] .gems-module .gem-builder-intensity-value { background: rgba(245, 158, 11, 0.05); }

/* Light mode - Builder Final Prompt */
[data-theme="light"] .gems-module .gem-builder-final-prompt {
    background: #1F2937;
    color: #D1D5DB;
}
[data-theme="light"] .gems-module .gem-builder-final-prompt-wrap {
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .gems-module .gem-builder-final-hint {
    background: rgba(168, 85, 247, 0.04);
    border-color: rgba(168, 85, 247, 0.08);
    color: #5f6368;
}
[data-theme="light"] .gems-module .gem-builder-final-steps {
    background: #FAFAFA;
    border-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .gems-module .gem-builder-final-steps p { color: #374151; }
[data-theme="light"] .gems-module .gem-builder-final-steps ol { color: #5f6368; }
[data-theme="light"] .gems-module .gem-builder-gemini-btn {
    background: #FAFAFA !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1F2937 !important;
}
[data-theme="light"] .gems-module .gem-builder-gemini-btn:hover {
    background: #F5F3FF !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Light mode - Theme Toggle */
[data-theme="light"] .gems-module .theme-toggle .sun-icon { display: none; }
[data-theme="light"] .gems-module .theme-toggle .moon-icon { display: block; }


/* ------------------------------------------------------------
   3. Header
   ------------------------------------------------------------ */
.gems-module .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}
.gems-module .logo { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.gems-module .logo-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--text-primary); letter-spacing: -0.01em; }
.gems-module .logo-divider { width: 1px; height: 24px; background: var(--border-default); }
.gems-module .logo-subtitle { font-size: 1.125rem; font-weight: 300; color: var(--text-muted); }
.gems-module .header-right { display: flex; align-items: center; gap: 20px; }
.gems-module .slide-counter { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.gems-module .header-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--border-subtle); }
.gems-module .header-progress-bar { height: 100%; background: linear-gradient(90deg, var(--pink-500), var(--purple-500)); transition: width 0.4s ease; box-shadow: 0 0 10px var(--pink-glow); }

.gems-module .theme-toggle {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    color: var(--text-primary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
}
.gems-module .theme-toggle:hover {
    border-color: var(--border-accent);
    transform: scale(1.05);
    background: var(--bg-card-hover);
}
.gems-module .theme-toggle svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.gems-module .theme-toggle:hover svg { transform: rotate(15deg); }
.gems-module .theme-toggle .sun-icon { display: block; }
.gems-module .theme-toggle .moon-icon { display: none; }

/* Smooth transition for theme switching */
.gems-module .header,
.gems-module .glass-card,
.gems-module .form-input,
.gems-module .form-select,
.gems-module .form-textarea,
.gems-module .btn--shiny {
    transition: all 0.3s ease;
}


/* ------------------------------------------------------------
   4. Slide Layout
   ------------------------------------------------------------ */
.gems-module .slide-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
    text-align: left;
}

.gems-module .slide {
    display: none;
    width: 100%;
    min-height: 100vh;
    padding: 120px 60px 140px;
    max-width: 85vw;
    margin: 0 auto;
}

.gems-module .slide.active {
    display: block;
    animation: gems-slideIn 0.5s var(--ease-out);
}

@keyframes gems-slideIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide entrance animations */
@keyframes gems-fadeSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gems-fadeScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.gems-module .slide-animate {
    opacity: 0;
    transform: translateY(40px);
}

.gems-module .slide-animate.animate-in {
    animation: gems-fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.gems-module .slide-animate.animate-scale {
    transform: scale(0.92);
    animation: gems-fadeScaleIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.gems-module .stat-card.slide-animate.animate-in {
    animation: gems-fadeSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.gems-module #slide-2 .text-body-lg {
    margin-bottom: 0;
    font-size: 1.15rem;
}


/* ------------------------------------------------------------
   5. Typography
   ------------------------------------------------------------ */
.gems-module .text-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--pink-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.gems-module .text-display {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.gems-module .text-display .accent {
    background: linear-gradient(135deg,
        #818CF8 0%, #6366F1 25%, #a78bfa 50%, #c4b5fd 75%, #818CF8 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gems-gradient-text-shift 15s ease-in-out infinite;
    text-shadow: none;
}

@keyframes gems-gradient-text-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gems-accent-color-cycle {
    0% { background-position: 0% 50%; }
    33% { background-position: 50% 50%; }
    66% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gems-module .text-section {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 300;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.gems-module .text-body {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 900px;
}

.gems-module .text-body-lg {
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 1000px;
}

.gems-module .text-muted { color: var(--text-muted); }
.gems-module .accent { color: var(--pink-400); font-weight: 400; }

.gems-module .text-section .accent {
    background: linear-gradient(135deg,
        #818CF8 0%, #2dd4bf 16%, #60a5fa 33%, #c084fc 50%, #818CF8 66%, #2dd4bf 83%, #818CF8 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gems-accent-color-cycle 8s ease-in-out infinite;
    font-weight: 400;
}
.gems-module .mb-lg { margin-bottom: 24px; }
.gems-module .mb-xl { margin-bottom: 48px; }


/* ------------------------------------------------------------
   6. Glass Cards
   ------------------------------------------------------------ */
.gems-module .glass-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-xl);
    padding: 36px;
    backdrop-filter: blur(12px);
    transition: all 0.3s var(--ease-out);
    text-align: left;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(99, 102, 241, 0.02);
}

.gems-module .glass-card:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(99, 102, 241, 0.15),
        inset 0 0 30px rgba(99, 102, 241, 0.03);
}

.gems-module .glass-card--highlight {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(0, 0, 0, 0.85);
}

.gems-module .glass-card--highlight:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(99, 102, 241, 0.2),
        inset 0 0 30px rgba(99, 102, 241, 0.03);
}

.gems-module .card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ------------------------------------------------------------
   7. Forms
   ------------------------------------------------------------ */
.gems-module .form-group {
    margin-bottom: 28px;
    width: 100%;
}
.gems-module .form-label {
    display: block;
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}
.gems-module .form-input,
.gems-module .form-select,
.gems-module .form-textarea {
    width: 100%;
    padding: 18px 22px;
    font-size: 1.125rem;
    font-family: var(--font-body);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    transition: all 0.3s var(--ease-out);
    box-sizing: border-box;
}
.gems-module .form-input:focus,
.gems-module .form-select:focus,
.gems-module .form-textarea:focus {
    outline: none;
    border-color: var(--pink-400);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 20px rgba(99, 102, 241, 0.1);
}
.gems-module .form-input::placeholder,
.gems-module .form-textarea::placeholder { color: var(--text-muted); }
.gems-module .form-textarea { resize: vertical; min-height: 100px; }
.gems-module .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 44px;
}
.gems-module .form-select option { background: var(--bg-elevated); color: var(--text-primary); }


/* ------------------------------------------------------------
   8. Buttons
   ------------------------------------------------------------ */
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.gems-module .btn--shiny {
    position: relative; overflow: hidden; border-radius: 9999px;
    padding: 1.25rem 2.75rem; font-size: 1.25rem; font-weight: 500;
    color: #ffffff; cursor: pointer; isolation: isolate;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    font-family: var(--font-body);
    background: linear-gradient(#000000, #000000) padding-box,
        conic-gradient(from var(--gradient-angle), transparent 0%, var(--pink-500) 10%, var(--pink-400) 20%, var(--purple-400) 30%, var(--pink-500) 40%, transparent 50%) border-box;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: gems-shiny-border-spin 3s linear infinite;
}
@keyframes gems-shiny-border-spin { to { --gradient-angle: 360deg; } }
.gems-module .btn--shiny:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 30px rgba(99, 102, 241, 0.4); }
.gems-module .btn--shiny:active { transform: translateY(1px); }
.gems-module .btn--shiny::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(99, 102, 241, 0.15), transparent 60%);
    pointer-events: none;
}
.gems-module .btn--shiny span,
.gems-module .btn--shiny i,
.gems-module .btn--shiny svg { position: relative; z-index: 2; }
.gems-module .btn--shiny:disabled { opacity: 0.4; cursor: not-allowed; animation: none; }

.gems-module .btn--shiny-pink {
    background: linear-gradient(#000000, #000000) padding-box,
        conic-gradient(from var(--gradient-angle), transparent 0%, #6366F1 10%, #818CF8 20%, #a855f7 30%, #6366F1 40%, transparent 50%) border-box;
}
.gems-module .btn--shiny-pink:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 30px rgba(99, 102, 241, 0.4);
}
.gems-module .btn--shiny-pink::before {
    background: radial-gradient(circle at 50% 120%, rgba(99, 102, 241, 0.15), transparent 60%);
}

@keyframes gems-floating-orbs {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.8; }
    50% { opacity: 1; transform: translateY(-25px) scale(1.1); }
    85% { opacity: 0.4; }
    100% { transform: translateY(-50px) scale(0.8); opacity: 0; }
}

.gems-module .btn-secondary {
    padding: 12px 24px; background: transparent; border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); color: var(--text-secondary); font-size: 0.9375rem;
    font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.3s ease;
}
.gems-module .btn-secondary:hover { border-color: var(--pink-400); color: var(--pink-400); }

.gems-module .btn-ghost {
    padding: 10px 20px; background: transparent; border: none; color: var(--text-muted);
    font-size: 0.875rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.3s ease;
}
.gems-module .btn-ghost:hover { color: var(--text-primary); }


/* ------------------------------------------------------------
   9. Status Messages
   ------------------------------------------------------------ */
.gems-module .status-message { padding: 12px; border-radius: var(--radius-md); margin: 12px 0; font-size: 0.875rem; display: none; }
.gems-module .status-message.success { display: block; background: var(--success-muted); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.3); }
.gems-module .status-message.error { display: block; background: var(--error-muted); color: var(--error); border: 1px solid rgba(239, 68, 68, 0.3); }
.gems-module .spinner { width: 24px; height: 24px; border: 2px solid var(--border-default); border-top-color: var(--pink-400); border-radius: 50%; animation: gems-spin 0.7s linear infinite; display: inline-block; }
@keyframes gems-spin { to { transform: rotate(360deg); } }


/* ------------------------------------------------------------
   10. Navigation Controls
   ------------------------------------------------------------ */
.gems-module .controls {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    backdrop-filter: blur(10px);
}

.gems-module .control-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.6);
    background: transparent; color: rgba(99, 102, 241, 0.9);
    font-size: 1.25rem; cursor: pointer;
    transition: all 0.3s var(--ease-out);
    display: flex; align-items: center; justify-content: center;
}
.gems-module .control-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.9);
    transform: scale(1.05);
}
.gems-module .control-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.gems-module .controls-counter {
    font-size: 1.1rem; font-weight: 500;
    color: rgba(255, 255, 255, 0.9); min-width: 40px; text-align: center;
}

.gems-module .controls-dots { display: flex; align-items: center; gap: 8px; }

.gems-module .controls-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease; cursor: pointer; position: relative;
}
.gems-module .controls-dot::before {
    content: ''; position: absolute; inset: -8px; border-radius: 50%;
}
.gems-module .controls-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.8);
}
.gems-module .controls-dot.active {
    width: 24px; border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.gems-module .controls-dot.completed { background: rgba(99, 102, 241, 0.8); }

.gems-module .dot-group { display: flex; align-items: center; gap: 8px; }
.gems-module .dot-group-intro {
    padding: 4px 8px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}
.gems-module .dot-separator {
    width: 1px; height: 16px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}


/* ------------------------------------------------------------
   11. Gem Flow Visualization (Slide 2)
   ------------------------------------------------------------ */
.gems-module .gem-flow-container {
    width: 100%; max-width: none;
    margin: 16px 0 8px 0; padding: 64px 32px;
}

.gems-module .gem-flow {
    display: flex; flex-direction: row;
    gap: 24px; justify-content: center; align-items: stretch;
}

.gems-module .gem-flow-step {
    flex: 1; max-width: 340px;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 36px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    transition: all 0.4s var(--ease-out);
    opacity: 0; transform: translateY(20px);
}

.gems-module .slide.active .gem-flow-step:nth-child(1) { animation: gems-vibeStepIn 0.6s var(--ease-out) 0.2s forwards; }
.gems-module .slide.active .gem-flow-step:nth-child(2) { animation: gems-vibeStepIn 0.6s var(--ease-out) 0.45s forwards; }
.gems-module .slide.active .gem-flow-step:nth-child(3) { animation: gems-vibeStepIn 0.6s var(--ease-out) 0.7s forwards; }

@keyframes gems-vibeStepIn {
    to { opacity: 1; transform: translateY(0); }
}

.gems-module .gem-flow-step:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.gems-module .gem-flow-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: 2px solid;
    margin-bottom: 16px; position: relative;
}
.gems-module .gem-flow-icon i { width: 30px !important; height: 30px !important; }

/* Pulsing glow on flow icons */
.gems-module .slide.active .gem-flow-step:nth-child(1) .gem-flow-icon { animation: gems-iconPulsePurple 3s ease-in-out infinite 0.8s; }
.gems-module .slide.active .gem-flow-step:nth-child(2) .gem-flow-icon { animation: gems-iconPulseTeal 3s ease-in-out infinite 1.1s; }
.gems-module .slide.active .gem-flow-step:nth-child(3) .gem-flow-icon { animation: gems-iconPulseBlue 3s ease-in-out infinite 1.4s; }

@keyframes gems-iconPulsePurple {
    0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); }
    50% { box-shadow: 0 0 50px rgba(168, 85, 247, 0.6), 0 0 80px rgba(168, 85, 247, 0.3); }
}
@keyframes gems-iconPulseTeal {
    0%, 100% { box-shadow: 0 0 20px rgba(20, 184, 166, 0.3); }
    50% { box-shadow: 0 0 50px rgba(20, 184, 166, 0.6), 0 0 80px rgba(20, 184, 166, 0.3); }
}
@keyframes gems-iconPulseBlue {
    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 50px rgba(59, 130, 246, 0.6), 0 0 80px rgba(59, 130, 246, 0.3); }
}

.gems-module .gem-flow-content { flex: 1; display: flex; flex-direction: column; }
.gems-module .gem-flow-label {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 1.2rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 10px; text-shadow: 0 0 20px currentColor;
}
.gems-module .gem-flow-label i { width: 18px !important; height: 18px !important; }
.gems-module .gem-flow-desc { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 14px; line-height: 1.5; opacity: 0.7; }
.gems-module .gem-flow-example {
    margin-top: auto; padding: 12px 14px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 8px; font-family: var(--font-body);
    font-size: 0.9rem; color: var(--text-primary);
    line-height: 1.45; font-style: italic;
}
.gems-module .gem-flow-step:nth-child(2) .gem-flow-example { background: rgba(20, 184, 166, 0.12); border-color: rgba(20, 184, 166, 0.25); }
.gems-module .gem-flow-step:nth-child(3) .gem-flow-example { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); }

.gems-module .gem-flow-arrow { position: absolute; right: -22px; top: 42px; z-index: 10; opacity: 0; }
.gems-module .slide.active .gem-flow-step:nth-child(1) .gem-flow-arrow { animation: gems-arrowFadeIn 0.4s ease-out 0.9s forwards, gems-arrowBounce 2s ease-in-out 1.3s infinite; }
.gems-module .slide.active .gem-flow-step:nth-child(2) .gem-flow-arrow { animation: gems-arrowFadeIn 0.4s ease-out 1.15s forwards, gems-arrowBounce 2s ease-in-out 1.55s infinite; }

@keyframes gems-arrowFadeIn { to { opacity: 1; } }
@keyframes gems-arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.gems-module .gem-flow-arrow i { color: var(--pink-400); filter: drop-shadow(0 0 8px var(--pink-glow)); width: 20px !important; height: 20px !important; }
.gems-module .gem-flow-step:last-child .gem-flow-arrow { display: none; }

/* File upload graphic (Train step) */
.gems-module .gem-flow-files {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.gems-module .gem-flow-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--teal-300);
    opacity: 0;
    transform: translateX(-12px);
}

.gems-module .slide.active .gem-flow-file--1 { animation: gems-fileSlideIn 0.4s var(--ease-out) 1.0s forwards; }
.gems-module .slide.active .gem-flow-file--2 { animation: gems-fileSlideIn 0.4s var(--ease-out) 1.2s forwards; }
.gems-module .slide.active .gem-flow-file--3 { animation: gems-fileSlideIn 0.4s var(--ease-out) 1.4s forwards; }

@keyframes gems-fileSlideIn {
    to { opacity: 1; transform: translateX(0); }
}

.gems-module .gem-flow-upload-target {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 2px dashed rgba(20, 184, 166, 0.25);
    border-radius: 8px;
    color: rgba(20, 184, 166, 0.4);
    opacity: 0;
    animation: none;
}

.gems-module .slide.active .gem-flow-upload-target {
    animation: gems-fileSlideIn 0.4s var(--ease-out) 1.6s forwards, gems-uploadPulse 2s ease-in-out 2.0s infinite;
}

@keyframes gems-uploadPulse {
    0%, 100% { border-color: rgba(20, 184, 166, 0.25); color: rgba(20, 184, 166, 0.4); }
    50% { border-color: rgba(20, 184, 166, 0.5); color: rgba(20, 184, 166, 0.7); }
}

/* Network graph animation (Deploy step) */
.gems-module .gem-flow-network {
    margin-top: auto;
    width: 100%;
    padding: 8px 0;
}
.gems-module .gem-flow-network svg {
    width: 100%;
    height: auto;
    display: block;
}
.gems-module .gem-flow-network .net-center {
    animation: gems-netCenterPulse 3s ease-in-out infinite;
}
@keyframes gems-netCenterPulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(59,130,246,0.3)); }
    50% { filter: drop-shadow(0 0 12px rgba(59,130,246,0.6)); }
}
.gems-module .gem-flow-network .net-line {
    opacity: 0;
}
.gems-module .slide.active .gem-flow-network .net-line--1 { animation: gems-netLineIn 0.4s ease-out 1.0s forwards; }
.gems-module .slide.active .gem-flow-network .net-line--2 { animation: gems-netLineIn 0.4s ease-out 1.15s forwards; }
.gems-module .slide.active .gem-flow-network .net-line--3 { animation: gems-netLineIn 0.4s ease-out 1.3s forwards; }
.gems-module .slide.active .gem-flow-network .net-line--4 { animation: gems-netLineIn 0.4s ease-out 1.45s forwards; }
.gems-module .slide.active .gem-flow-network .net-line--5 { animation: gems-netLineIn 0.4s ease-out 1.1s forwards; }
@keyframes gems-netLineIn {
    to { opacity: 1; }
}
.gems-module .gem-flow-network .net-node,
.gems-module .gem-flow-network .net-pulse {
    opacity: 0;
}
.gems-module .slide.active .gem-flow-network .net-node--1,
.gems-module .slide.active .gem-flow-network .net-node--1i { animation: gems-netNodeIn 0.3s ease-out 1.3s forwards; }
.gems-module .slide.active .gem-flow-network .net-node--2,
.gems-module .slide.active .gem-flow-network .net-node--2i { animation: gems-netNodeIn 0.3s ease-out 1.45s forwards; }
.gems-module .slide.active .gem-flow-network .net-node--3,
.gems-module .slide.active .gem-flow-network .net-node--3i { animation: gems-netNodeIn 0.3s ease-out 1.6s forwards; }
.gems-module .slide.active .gem-flow-network .net-node--4,
.gems-module .slide.active .gem-flow-network .net-node--4i { animation: gems-netNodeIn 0.3s ease-out 1.75s forwards; }
.gems-module .slide.active .gem-flow-network .net-node--5,
.gems-module .slide.active .gem-flow-network .net-node--5i { animation: gems-netNodeIn 0.3s ease-out 1.4s forwards; }
@keyframes gems-netNodeIn {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}
.gems-module .slide.active .gem-flow-network .net-pulse { opacity: 0.8; }


/* ------------------------------------------------------------
   11b. Gem Compare - Before/After (Slide 2)
   ------------------------------------------------------------ */
.gems-module .gem-compare {
    display: flex;
    align-items: stretch;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 28px;
    border-radius: var(--radius-xl);
    overflow: visible;
}

.gems-module .gem-compare-side {
    flex: 1;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s var(--ease-out);
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
}

.gems-module .gem-compare--before {
    background: rgba(0, 0, 0, 0.3);
}

.gems-module .gem-compare--after {
    background: linear-gradient(#000000, #000000) padding-box,
        conic-gradient(from var(--gradient-angle),
            transparent 0%,
            var(--pink-500) 8%,
            var(--pink-400) 18%,
            var(--purple-400) 28%,
            var(--pink-500) 38%,
            transparent 48%) border-box;
    border: 2px solid transparent;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
    animation: gems-shiny-border-spin 3s linear infinite, gems-afterGlow 3s ease-in-out infinite;
}

@keyframes gems-afterGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
    }
    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
    }
}

.gems-module .gem-compare-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.gems-module .gem-compare-icon--before {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
}

.gems-module .gem-compare-icon--after {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
    animation: gems-iconGlowPink 3s ease-in-out infinite;
}

@keyframes gems-iconGlowPink {
    0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); }
    50% { box-shadow: 0 0 35px rgba(99, 102, 241, 0.4), 0 0 60px rgba(168, 85, 247, 0.15); }
}

.gems-module .gem-compare-label {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gems-module .gem-compare-label--before {
    color: var(--text-muted);
}

.gems-module .gem-compare-label--after {
    color: var(--pink-400);
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.gems-module .gem-compare-text {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 380px;
}

.gems-module .gem-compare-text em {
    color: var(--text-primary);
    font-style: italic;
}

.gems-module .gem-compare-example {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    line-height: 1.55;
    font-style: italic;
    margin-top: auto;
    width: 100%;
}

.gems-module .gem-compare--before .gem-compare-example {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.gems-module .gem-compare--after .gem-compare-example {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--pink-300);
}

.gems-module .gem-compare-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    margin: 0 -12px;
}

.gems-module .gem-compare-divider::before {
    display: none;
}

.gems-module .gem-compare-arrow {
    position: relative;
    z-index: 3;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background: rgba(15, 15, 20, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink-400);
    animation: gems-comparePulse 2s ease-in-out infinite;
    backdrop-filter: blur(8px);
}

@keyframes gems-comparePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); }
}


/* ------------------------------------------------------------
   12. Stat Cards (Slide 2) - GLASS PATTERN
   ------------------------------------------------------------ */
.gems-module .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.gems-module .stat-card {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-xl);
    padding: 32px 24px; text-align: center;
    transition: all 0.3s ease;
}
.gems-module .stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(99, 102, 241, 0.15);
}
.gems-module .stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.gems-module .stat-label { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.4; }

/* Benefits Strip (Slide 2) - animated mini-cards */
.gems-module .gem-benefits-strip {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    max-width: 1100px;
    margin: 12px auto 0;
}

.gems-module .gem-benefit-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(16px);
    transition: all 0.3s ease;
}

.gems-module .slide.active .gem-benefit-card:nth-child(1) { animation: gems-vibeStepIn 0.5s var(--ease-out) 0.7s forwards; }
.gems-module .slide.active .gem-benefit-card:nth-child(2) { animation: gems-vibeStepIn 0.5s var(--ease-out) 0.85s forwards; }
.gems-module .slide.active .gem-benefit-card:nth-child(3) { animation: gems-vibeStepIn 0.5s var(--ease-out) 1.0s forwards; }

.gems-module .gem-benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Per-color glow borders */
.gems-module .gem-benefit--purple {
    border-color: rgba(168, 85, 247, 0.2);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.08);
}
.gems-module .gem-benefit--purple:hover {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.gems-module .gem-benefit--purple .gem-benefit-label { color: var(--purple-400); }

.gems-module .gem-benefit--blue {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.08);
}
.gems-module .gem-benefit--blue:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.gems-module .gem-benefit--blue .gem-benefit-label { color: var(--blue-400); }

.gems-module .gem-benefit--amber {
    border-color: rgba(245, 158, 11, 0.2);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.08);
}
.gems-module .gem-benefit--amber:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.gems-module .gem-benefit--amber .gem-benefit-label { color: var(--amber-400); }

.gems-module .gem-benefit-label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.gems-module .gem-benefit-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.4;
}


/* ------------------------------------------------------------
   12b. Anatomy Gem Center (Slide 3 - Assembly Visual)
   ------------------------------------------------------------ */
.gems-module .anatomy-gem-center {
    text-align: center;
    margin: 8px 0 28px 0;
    max-width: 960px;
    position: relative;
}

.gems-module .anatomy-gem-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border: 2px solid rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    animation: gems-gemAssemble 3s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes gems-gemAssemble {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.25), 0 0 40px rgba(168, 85, 247, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 35px rgba(99, 102, 241, 0.45), 0 0 70px rgba(168, 85, 247, 0.25);
        transform: scale(1.06);
    }
}

.gems-module .anatomy-gem-label {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pink-400);
    margin-bottom: 4px;
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.gems-module .anatomy-gem-sublabel {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.gems-module .anatomy-gem-connectors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

/* Improved anatomy card entrance animation */
@keyframes gems-anatomyCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.gems-module .anatomy-card {
    animation-name: gems-anatomyCardIn;
}

/* Subtle border highlight on anatomy cards when hovered */
.gems-module .anatomy-card-grid:nth-child(1):hover { border-color: rgba(99, 102, 241, 0.45) !important; }
.gems-module .anatomy-card-grid:nth-child(2):hover { border-color: rgba(20, 184, 166, 0.45) !important; }
.gems-module .anatomy-card-grid:nth-child(3):hover { border-color: rgba(168, 85, 247, 0.45) !important; }
.gems-module .anatomy-card-grid:nth-child(4):hover { border-color: rgba(59, 130, 246, 0.45) !important; }
.gems-module .anatomy-card-grid:nth-child(5):hover { border-color: rgba(245, 158, 11, 0.45) !important; }

/* Glow shadow on hover per color */
.gems-module .anatomy-card-grid:nth-child(1):hover { box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15); }
.gems-module .anatomy-card-grid:nth-child(2):hover { box-shadow: 0 8px 30px rgba(20, 184, 166, 0.15); }
.gems-module .anatomy-card-grid:nth-child(3):hover { box-shadow: 0 8px 30px rgba(168, 85, 247, 0.15); }
.gems-module .anatomy-card-grid:nth-child(4):hover { box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15); }
.gems-module .anatomy-card-grid:nth-child(5):hover { box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15); }

/* 5th element card spans full width */
.gems-module .anatomy-card-wide {
    grid-column: 1 / -1;
}


/* ------------------------------------------------------------
   13. Anatomy Timeline (Slide 3)
   ------------------------------------------------------------ */
.gems-module .anatomy-timeline { position: relative; padding-left: 40px; }
.gems-module .anatomy-timeline::before {
    content: ''; position: absolute; left: 31px; top: 40px; bottom: 40px; width: 2px;
    background: linear-gradient(to bottom, var(--pink-500), var(--teal-500), var(--purple-500), var(--blue-500), var(--amber-500));
    opacity: 0.4;
}

.gems-module .anatomy-card {
    display: flex; gap: 24px; align-items: flex-start;
    padding: 24px 28px; margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    transition: all 0.4s var(--ease-out);
    position: relative;
    opacity: 0;
    animation: gems-vibeStepIn 0.5s var(--ease-out) forwards;
}
.gems-module .anatomy-card:nth-child(1) { animation-delay: 0.15s; }
.gems-module .anatomy-card:nth-child(2) { animation-delay: 0.3s; }
.gems-module .anatomy-card:nth-child(3) { animation-delay: 0.45s; }
.gems-module .anatomy-card:nth-child(4) { animation-delay: 0.6s; }
.gems-module .anatomy-card:nth-child(5) { animation-delay: 0.75s; }

.gems-module .anatomy-card:hover { transform: translateX(6px); background: rgba(0, 0, 0, 0.65); }

.gems-module .anatomy-icon {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid; position: relative; z-index: 1;
    transition: all 0.3s var(--ease-out);
}
.gems-module .anatomy-card:hover .anatomy-icon { transform: scale(1.1); }

.gems-module .anatomy-body { flex: 1; text-align: left; }
.gems-module .anatomy-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; }
.gems-module .anatomy-desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; }
.gems-module .anatomy-example {
    font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted);
    margin-top: 10px; padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid; line-height: 1.5;
}


/* ------------------------------------------------------------
   13b. Anatomy Grid (Slide 3 – 2x2 layout)
   ------------------------------------------------------------ */
.gems-module .anatomy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.gems-module .anatomy-card-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 0;
}
.gems-module .anatomy-card-grid:hover {
    transform: translateY(-4px);
    background: rgba(0, 0, 0, 0.65);
}

/* ------------------------------------------------------------
   13c. Model Comparison (Slide 3b)
   ------------------------------------------------------------ */
.gems-module .model-compare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.gems-module .model-card {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    transition: all 0.4s var(--ease-out);
    opacity: 0;
    animation: gems-vibeStepIn 0.5s var(--ease-out) forwards;
}
.gems-module .model-card:nth-child(1) { animation-delay: 0.2s; }
.gems-module .model-card:nth-child(2) { animation-delay: 0.4s; }
.gems-module .model-card:nth-child(3) { animation-delay: 0.6s; }
.gems-module .model-card:hover {
    transform: translateY(-4px);
    background: rgba(0, 0, 0, 0.65);
}
.gems-module .model-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.gems-module .model-card-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}
.gems-module .model-card-tagline {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}
.gems-module .model-card-list {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    border-top: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gems-module .model-card-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.gems-module .model-card-badge {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 16px;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   14. Quote Box
   ------------------------------------------------------------ */
.gems-module .quote-box {
    background: rgba(99, 102, 241, 0.05);
    border-left: 4px solid var(--pink-400);
    padding: 28px 32px;
    margin: 40px 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.gems-module .quote-box p { color: var(--text-secondary); font-size: 1.25rem; line-height: 1.7; margin: 0; }
.gems-module .quote-box strong { color: var(--text-primary); }


/* ------------------------------------------------------------
   15. Inspiration Grid (Slide 4)
   ------------------------------------------------------------ */
.gems-module .inspiration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; max-width: 960px; margin-left: auto; margin-right: auto; }
.gems-module .inspiration-card {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(99, 102, 241, 0.15);
    transition: all 0.3s var(--ease-out);
}
.gems-module .inspiration-card:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}
.gems-module .inspiration-card-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.gems-module .inspiration-card-desc { font-size: 0.875rem; color: var(--text-muted); }


/* ------------------------------------------------------------
   16. Ideas List (Slide 5) - GLASS PATTERN
   ------------------------------------------------------------ */
.gems-module .ideas-list-container {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-xl);
    padding: 32px; max-height: 500px; overflow-y: auto;
}
.gems-module .idea-item { padding: 16px 0; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.gems-module .idea-item:last-child { border-bottom: none; }
.gems-module .idea-item-text { color: var(--text-primary); font-size: 1rem; line-height: 1.5; flex: 1; }
.gems-module .idea-item-author { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; }
.gems-module .empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }


/* ------------------------------------------------------------
   17. Step List (Slide 6)
   ------------------------------------------------------------ */
.gems-module .step-list { display: flex; flex-direction: column; gap: 0; list-style: none; }
.gems-module .step-item {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 28px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    transition: all 0.3s var(--ease-out);
}
.gems-module .step-item.completed { background: var(--success-muted); border-color: rgba(34, 197, 94, 0.3); }
.gems-module .step-item.current {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(10, 20, 25, 0.95);
    margin-top: -2px;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}
.gems-module .step-item.locked { opacity: 0.5; pointer-events: none; }
.gems-module .step-item.locked .step-checkbox { animation: none; border-color: var(--border-subtle); cursor: not-allowed; }
.gems-module .step-item.locked .step-checkbox::before { content: ''; display: none; }

.gems-module .step-checkbox {
    position: relative; width: 36px; height: 36px;
    border-radius: 50%; border: 2px solid var(--border-accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer;
    transition: all 0.3s var(--ease-out);
    animation: gems-checkboxPulse 2s ease-in-out infinite;
}
@keyframes gems-checkboxPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.15); }
}
.gems-module .step-checkbox:not(.checked)::before { content: '\2713'; font-size: 14px; color: var(--text-muted); opacity: 0; transition: opacity 0.2s ease; }
.gems-module .step-checkbox:hover { border-color: var(--pink-400); background: rgba(99, 102, 241, 0.1); transform: scale(1.1); }
.gems-module .step-checkbox:not(.checked):hover::before { opacity: 0.6; }
.gems-module .step-checkbox.checked { background: var(--success); border-color: var(--success); animation: none; }
.gems-module .step-checkbox.checked::before { display: none; }
.gems-module .step-checkbox.checked::after { content: ''; width: 12px; height: 8px; border: 2px solid white; border-top: none; border-right: none; transform: rotate(-45deg); }

.gems-module .step-title { font-weight: 500; font-size: 1.25rem; margin-bottom: 8px; color: var(--text-primary); }
.gems-module .step-content { flex: 1; }
.gems-module .step-desc { font-size: 1.125rem; color: var(--text-primary); margin-bottom: 12px; }


/* ------------------------------------------------------------
   18. Code Block
   ------------------------------------------------------------ */
.gems-module .code-block-editable {
    width: 100%; padding: 20px; background: var(--bg-elevated); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); color: var(--teal-300); font-family: var(--font-mono);
    font-size: 0.875rem; line-height: 1.6; resize: vertical; min-height: 200px;
    transition: border-color 0.3s ease; box-sizing: border-box;
}
.gems-module .code-block-editable:focus { outline: none; border-color: var(--pink-500); box-shadow: 0 0 0 3px var(--pink-glow); }


/* ------------------------------------------------------------
   19. Video Preview & Helper Video
   ------------------------------------------------------------ */
.gems-module .video-preview {
    width: 180px; height: 100px; border-radius: var(--radius-lg);
    overflow: hidden; cursor: pointer; position: relative;
    border: 2px solid var(--border-default);
    transition: all 0.3s var(--ease-out); flex-shrink: 0;
}
.gems-module .video-preview:hover { border-color: var(--pink-400); transform: scale(1.02); box-shadow: 0 0 20px var(--pink-glow); }
.gems-module .video-preview video { width: 100%; height: 100%; object-fit: cover; }
.gems-module .video-preview::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease;
}
.gems-module .video-preview:hover::after { opacity: 1; }
.gems-module .video-preview .expand-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; background: rgba(0, 0, 0, 0.7); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.gems-module .video-preview:hover .expand-icon { opacity: 1; }
.gems-module .video-preview--inline { width: 80px; height: 45px; border-radius: var(--radius-sm); }
.gems-module .video-preview--inline .expand-icon { display: none; }

.gems-module .helper-video-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer; transition: all 0.2s ease;
    color: var(--text-secondary); font-size: 0.9rem; width: fit-content;
}
.gems-module .helper-video-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--pink-400);
    color: var(--pink-400);
}
.gems-module .helper-video-btn .video-preview--inline { margin: 0; }

/* Video Modal */
.gems-module .video-modal {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95);
    z-index: 2000; align-items: center; justify-content: center; padding: 40px;
}
.gems-module .video-modal.active { display: flex; }
.gems-module .video-modal-content { position: relative; max-width: 1000px; width: 100%; }
.gems-module .video-modal-close {
    position: absolute; top: -48px; right: 0; width: 40px; height: 40px;
    border-radius: 50%; border: 1px solid var(--border-default); background: transparent;
    color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.gems-module .video-modal-content video { width: 100%; border-radius: var(--radius-xl); }


/* ------------------------------------------------------------
   20. Gallery (Slide 9) - GLASS PATTERN
   ------------------------------------------------------------ */
.gems-module .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.gems-module .gallery-card {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-xl);
    overflow: hidden; cursor: pointer;
    transition: all 0.3s ease;
}
.gems-module .gallery-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(99, 102, 241, 0.2);
}
.gems-module .gallery-icon { height: 120px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-muted); }
.gems-module .gallery-info { padding: 20px; }
.gems-module .gallery-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.gems-module .gallery-author { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 8px; }
.gems-module .gallery-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gems-module .gallery-audience { font-size: 0.75rem; color: var(--pink-400); margin-top: 8px; font-weight: 500; }

/* Gallery Modal - GLASS PATTERN */
.gems-module .gallery-modal {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    z-index: 2000; align-items: center; justify-content: center; padding: 40px;
}
.gems-module .gallery-modal.active { display: flex; }
.gems-module .gallery-modal-content {
    background: rgba(10, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-2xl); max-width: 600px; width: 100%;
    max-height: 90vh; overflow-y: auto; position: relative;
}
.gems-module .gallery-modal-close {
    position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
    border-radius: 50%; border: 1px solid var(--border-default); background: var(--bg-surface);
    color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 10;
}
.gems-module .gallery-modal-icon { height: 200px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--text-muted); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.gems-module .gallery-modal-info { padding: 32px; }
.gems-module .gallery-modal-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; }
.gems-module .gallery-modal-author { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 16px; }
.gems-module .gallery-modal-desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
.gems-module .gallery-modal-audience { font-size: 0.875rem; color: var(--pink-400); font-weight: 500; margin-bottom: 16px; }
.gems-module .gallery-modal-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
    background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    color: var(--pink-400); text-decoration: none; font-weight: 500; transition: all 0.3s ease;
}
.gems-module .gallery-modal-link:hover { border-color: var(--pink-400); }


/* ------------------------------------------------------------
   21. Feedback Components (Slide 10)
   ------------------------------------------------------------ */
.gems-module .feedback-section { margin-bottom: 32px; }
.gems-module .feedback-section + .feedback-section { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; }
.gems-module .feedback-section-label { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pink-400); margin-bottom: 20px; }

.gems-module .rating-container { display: flex; gap: 10px; margin: 16px 0; }
.gems-module .rating-btn {
    width: 48px; height: 48px; border-radius: var(--radius-lg); border: 1px solid var(--border-default);
    background: rgba(255, 255, 255, 0.02); color: var(--text-muted); font-size: 1.125rem;
    font-family: var(--font-body); cursor: pointer; transition: all 0.3s var(--ease-out);
    display: flex; align-items: center; justify-content: center;
}
.gems-module .rating-btn:hover,
.gems-module .rating-btn.selected {
    background: rgba(99, 102, 241, 0.15); border-color: var(--pink-400); color: var(--pink-400);
}

.gems-module .toggle-group { display: flex; gap: 10px; margin: 16px 0; }
.gems-module .toggle-btn {
    width: auto; padding: 0 24px; height: 48px; border-radius: var(--radius-lg); border: 1px solid var(--border-default);
    background: rgba(255, 255, 255, 0.02); color: var(--text-muted); font-size: 1.125rem;
    font-family: var(--font-body); cursor: pointer; transition: all 0.3s var(--ease-out);
    display: flex; align-items: center; justify-content: center;
}
.gems-module .toggle-btn:hover,
.gems-module .toggle-btn.selected {
    background: rgba(99, 102, 241, 0.15); border-color: var(--pink-400); color: var(--pink-400);
}


/* ------------------------------------------------------------
   22. Scaling Cards (Slide 8) - GLASS PATTERN
   ------------------------------------------------------------ */
.gems-module .scaling-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.gems-module .scaling-card {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: all 0.3s ease;
}
.gems-module .scaling-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(99, 102, 241, 0.15);
}
.gems-module .scaling-card-title { font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.gems-module .scaling-card-desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.5; }


/* ------------------------------------------------------------
   23. Landing Background
   ------------------------------------------------------------ */
.gems-module .landing-bg {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.gems-module .landing-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 60px 60px;
}
.gems-module .landing-orb {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.5;
}
.gems-module .landing-orb--purple {
    width: 1000px; height: 1000px;
    background: radial-gradient(circle, var(--purple-400) 0%, rgba(168, 85, 247, 0.2) 30%, transparent 60%);
    opacity: 0.35; top: -300px; right: -200px;
}
.gems-module .landing-orb--blue {
    width: 900px; height: 900px;
    background: radial-gradient(circle, var(--blue-400) 0%, rgba(59, 130, 246, 0.2) 30%, transparent 60%);
    opacity: 0.4; bottom: -200px; left: -150px;
}
.gems-module .landing-orb--teal {
    width: 800px; height: 800px;
    background: radial-gradient(circle, var(--teal-400) 0%, rgba(20, 184, 166, 0.2) 30%, transparent 60%);
    opacity: 0.25; top: 30%; left: 40%;
}
.gems-module .landing-particles { position: absolute; inset: 0; }
.gems-module .landing-particles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }


/* ------------------------------------------------------------
   24. Gem Architect Container (minimal)
   ------------------------------------------------------------ */
.gems-module #gem-architect-container { min-height: 400px; }

/* Tone Intensity Slider */
.tone-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
}
.tone-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink-400), var(--purple-500));
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4), 0 0 16px rgba(168, 85, 247, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tone-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.6), 0 0 24px rgba(168, 85, 247, 0.3);
}
.tone-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
}
.tone-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink-400), var(--purple-500));
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4), 0 0 16px rgba(168, 85, 247, 0.2);
    cursor: pointer;
}

/* Light mode tone slider */
[data-theme="light"] .tone-intensity-container,
body.light-mode .tone-intensity-container {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.08);
    backdrop-filter: saturate(1.2) blur(12px);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
}


/* ------------------------------------------------------------
   25. Gem Element Timeline (Slide 3 - Scrollable)
   ------------------------------------------------------------ */

/* Slide 3 override: becomes tall scrollable, not single-viewport */
.gems-module #slide-3 {
    max-width: 100%;
    padding: 0;
    position: relative;
}

/* Timeline line (fixed left sidebar) */
.gems-module .gem-tl-line {
    position: fixed;
    left: 40px;
    top: 72px;
    bottom: 80px;
    width: 2px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 5;
    pointer-events: none;
}

.gems-module .gem-tl-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg,
        var(--pink-400),
        var(--teal-400),
        var(--purple-400),
        var(--blue-400),
        var(--amber-500)
    );
    box-shadow: 0 0 8px var(--pink-glow);
    transition: height 0.15s linear;
}

/* Nav dots (fixed right sidebar) */
.gems-module .gem-tl-nav {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}

.gems-module .gem-tl-nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    position: relative;
    text-decoration: none;
}

.gems-module .gem-tl-nav-dot.active {
    background: var(--dot-color, var(--pink-400));
    border-color: var(--dot-color, var(--pink-400));
    box-shadow: 0 0 12px var(--dot-glow, var(--pink-glow));
    transform: scale(1.4);
}

.gems-module .gem-tl-nav-dot:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.2);
}

.gems-module .gem-tl-nav-dot.active:hover {
    transform: scale(1.4);
}

.gems-module .gem-tl-nav-label {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.gems-module .gem-tl-nav-dot:hover .gem-tl-nav-label,
.gems-module .gem-tl-nav-dot.active .gem-tl-nav-label {
    opacity: 1;
}

/* Section layout */
.gems-module .gem-tl-main {
    position: relative;
    z-index: 1;
}

.gems-module .gem-tl-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(72px + 48px) 60px 40px 90px;
}

.gems-module .gem-tl-section--hero {
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
}

.gems-module .gem-tl-section--outro {
    min-height: 60vh;
    text-align: center;
}

.gems-module .gem-tl-section-inner {
    max-width: 920px;
    width: 100%;
}

/* Section dividers */
.gems-module .gem-tl-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}

.gems-module .gem-tl-divider-line {
    width: 2px;
    height: 80px;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.gems-module .gem-tl-divider-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--divider-color, var(--pink-400)), transparent);
    opacity: 0;
}

.gems-module .gem-tl-divider.visible .gem-tl-divider-line::after {
    animation: gems-tlDividerPulse 1.5s ease-out forwards;
}

.gems-module .gem-tl-divider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 8px 0;
    opacity: 0;
    transform: scale(0);
}

.gems-module .gem-tl-divider.visible .gem-tl-divider-dot {
    animation: gems-tlDotPop 0.4s var(--ease-spring) 0.6s forwards;
}

.gems-module .gem-tl-divider-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(8px);
}

.gems-module .gem-tl-divider.visible .gem-tl-divider-label {
    animation: gems-tlFadeUp 0.5s var(--ease-out) 0.8s forwards;
}

@keyframes gems-tlDividerPulse {
    0% { top: -100%; opacity: 0; }
    30% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes gems-tlDotPop {
    0% { opacity: 0; transform: scale(0); }
    70% { transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes gems-tlFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Element markers (circular badge) */
.gems-module .gem-tl-element-marker {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.gems-module .gem-tl-element-marker--pink {
    background: rgba(99, 102, 241, 0.12);
    border: 2px solid var(--pink-400);
    color: var(--pink-400);
    box-shadow: 0 0 24px var(--pink-glow);
}

.gems-module .gem-tl-element-marker--teal {
    background: rgba(20, 184, 166, 0.12);
    border: 2px solid var(--teal-400);
    color: var(--teal-400);
    box-shadow: 0 0 24px var(--teal-glow);
}

.gems-module .gem-tl-element-marker--purple {
    background: rgba(168, 85, 247, 0.12);
    border: 2px solid var(--purple-400);
    color: var(--purple-400);
    box-shadow: 0 0 24px var(--purple-glow);
}

.gems-module .gem-tl-element-marker--blue {
    background: rgba(59, 130, 246, 0.12);
    border: 2px solid var(--blue-400);
    color: var(--blue-400);
    box-shadow: 0 0 24px var(--blue-glow);
}

.gems-module .gem-tl-element-marker--amber {
    background: rgba(245, 158, 11, 0.12);
    border: 2px solid var(--amber-500);
    color: var(--amber-500);
    box-shadow: 0 0 24px var(--amber-glow);
}

/* Element titles (gradient text) */
.gems-module .gem-tl-element-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 8px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gems-module .gem-tl-element-title--pink { background-image: linear-gradient(135deg, #A5B4FC, var(--pink-500)); }
.gems-module .gem-tl-element-title--teal { background-image: linear-gradient(135deg, #5eead4, var(--teal-500)); }
.gems-module .gem-tl-element-title--purple { background-image: linear-gradient(135deg, #d8b4fe, var(--purple-500)); }
.gems-module .gem-tl-element-title--blue { background-image: linear-gradient(135deg, #93c5fd, var(--blue-500)); }
.gems-module .gem-tl-element-title--amber { background-image: linear-gradient(135deg, #fde047, #f59e0b); }

.gems-module .gem-tl-element-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 36px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/* Event cards grid */
.gems-module .gem-tl-cards {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .gems-module .gem-tl-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .gems-module .gem-tl-cards > :nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* Event card color borders */
.gems-module .gem-tl-event--pink { border-color: rgba(99, 102, 241, 0.15); }
.gems-module .gem-tl-event--pink:hover { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 8px 30px rgba(99, 102, 241, 0.12); }
.gems-module .gem-tl-event--teal { border-color: rgba(20, 184, 166, 0.15); }
.gems-module .gem-tl-event--teal:hover { border-color: rgba(20, 184, 166, 0.4); box-shadow: 0 8px 30px rgba(20, 184, 166, 0.12); }
.gems-module .gem-tl-event--purple { border-color: rgba(168, 85, 247, 0.15); }
.gems-module .gem-tl-event--purple:hover { border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 8px 30px rgba(168, 85, 247, 0.12); }
.gems-module .gem-tl-event--blue { border-color: rgba(59, 130, 246, 0.15); }
.gems-module .gem-tl-event--blue:hover { border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 8px 30px rgba(59, 130, 246, 0.12); }
.gems-module .gem-tl-event--amber { border-color: rgba(245, 158, 11, 0.15); }
.gems-module .gem-tl-event--amber:hover { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.12); }

/* Event card internals */
.gems-module .gem-tl-event-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.gems-module .gem-tl-event-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gems-module .gem-tl-event-icon--pink { background: rgba(99, 102, 241, 0.15); color: var(--pink-400); }
.gems-module .gem-tl-event-icon--teal { background: rgba(20, 184, 166, 0.15); color: var(--teal-400); }
.gems-module .gem-tl-event-icon--purple { background: rgba(168, 85, 247, 0.15); color: var(--purple-400); }
.gems-module .gem-tl-event-icon--blue { background: rgba(59, 130, 246, 0.15); color: var(--blue-400); }
.gems-module .gem-tl-event-icon--amber { background: rgba(245, 158, 11, 0.15); color: var(--amber-500); }

.gems-module .gem-tl-event-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gems-module .gem-tl-event-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.gems-module .gem-tl-event-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Example block (mono code style) */
.gems-module .gem-tl-example-block {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid;
    line-height: 1.6;
    font-style: italic;
}

/* Tip list */
.gems-module .gem-tl-tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gems-module .gem-tl-tip-list li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.gems-module .gem-tl-tip-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tip-color, var(--pink-400));
    opacity: 0.6;
}

/* Scroll-driven animations */
[data-gem-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-gem-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

[data-gem-animate="spring"] {
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-spring);
}
[data-gem-animate="spring"].visible {
    opacity: 1;
    transform: scale(1);
}

[data-gem-animate="fade-up"] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-gem-animate="fade-up"].visible {
    opacity: 1;
    transform: translateY(0);
}

[data-gem-animate="scale"] {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-gem-animate="scale"].visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays: cards */
.gems-module .gem-tl-cards [data-gem-animate]:nth-child(1) { transition-delay: 0ms; }
.gems-module .gem-tl-cards [data-gem-animate]:nth-child(2) { transition-delay: 150ms; }
.gems-module .gem-tl-cards [data-gem-animate]:nth-child(3) { transition-delay: 300ms; }

/* Stagger delays: section elements */
.gems-module .gem-tl-section-inner > [data-gem-animate]:nth-child(1) { transition-delay: 0ms; }
.gems-module .gem-tl-section-inner > [data-gem-animate]:nth-child(2) { transition-delay: 150ms; }
.gems-module .gem-tl-section-inner > [data-gem-animate]:nth-child(3) { transition-delay: 280ms; }
.gems-module .gem-tl-section-inner > [data-gem-animate]:nth-child(4) { transition-delay: 400ms; }
.gems-module .gem-tl-section-inner > [data-gem-animate]:nth-child(5) { transition-delay: 520ms; }

/* Scroll cue */
.gems-module .gem-tl-scroll-cue {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
    animation: gems-tlBounce 2s ease-in-out infinite;
}

@keyframes gems-tlBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Continue cue (outro section) */
.gems-module .gem-tl-continue-cue {
    text-align: center;
    margin-top: 40px;
}

.gems-module .gem-tl-continue-cue p {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 1.1rem;
}

/* Light mode overrides */
[data-theme="light"] .gems-module .gem-tl-line { background: rgba(2, 6, 23, 0.08); }
[data-theme="light"] .gems-module .gem-tl-nav-dot { background: rgba(2, 6, 23, 0.1); border-color: rgba(2, 6, 23, 0.15); }
[data-theme="light"] .gems-module .gem-tl-nav-label { color: var(--text-secondary); }
[data-theme="light"] .gems-module .gem-tl-divider-line { background: rgba(2, 6, 23, 0.06); }
[data-theme="light"] .gems-module .gem-tl-divider-dot { background: rgba(2, 6, 23, 0.12); border-color: rgba(2, 6, 23, 0.08); }
[data-theme="light"] .gems-module .gem-tl-element-title {
    -webkit-text-fill-color: initial;
    background: none !important;
}
[data-theme="light"] .gems-module .gem-tl-element-title--pink { color: #4338CA; }
[data-theme="light"] .gems-module .gem-tl-element-title--teal { color: #0d9488; }
[data-theme="light"] .gems-module .gem-tl-element-title--purple { color: #7e22ce; }
[data-theme="light"] .gems-module .gem-tl-element-title--blue { color: #1d4ed8; }
[data-theme="light"] .gems-module .gem-tl-element-title--amber { color: #b45309; }
[data-theme="light"] .gems-module .gem-tl-scroll-cue { color: var(--text-secondary); }
[data-theme="light"] .gems-module .gem-tl-example-block { background: rgba(2, 6, 23, 0.02); }


/* ------------------------------------------------------------
   26. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
    .gems-module .gem-flow { flex-direction: column; align-items: center; gap: 24px; }
    .gems-module .gem-flow-step { max-width: 100%; width: 100%; }
    .gems-module .gem-flow-arrow { display: none; }
    .gems-module .anatomy-grid { grid-template-columns: 1fr; }
    .gems-module .model-compare { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .gems-module .slide { padding: 80px 20px 80px; }
    .gems-module .header { padding: 12px 20px; }
    .gems-module .logo-subtitle { display: none; }
    .gems-module .glass-card { padding: 24px; width: 100% !important; }
    .gems-module .card-grid { grid-template-columns: 1fr; }
    .gems-module .gallery-grid { grid-template-columns: 1fr; }
    .gems-module .controls { padding: 10px 16px; gap: 12px; }
    .gems-module .control-btn { width: 40px; height: 40px; }
    .gems-module .controls-dots { display: none; }
    .gems-module .controls-counter { font-size: 1rem; }
    .gems-module .inspiration-grid { grid-template-columns: 1fr; }
    .gems-module .scaling-grid { grid-template-columns: 1fr; }
    .gems-module .step-content { padding-left: 0; }

    /* Gem Element Timeline - tablet */
    .gems-module .gem-tl-nav { display: none; }
    .gems-module .gem-tl-line { left: 16px; }
    .gems-module .gem-tl-section { padding: calc(72px + 24px) 20px 40px 20px; }
    .gems-module .gem-tl-section--hero { min-height: 100vh; }
    .gems-module .gem-tl-element-marker { width: 64px; height: 64px; }
    .gems-module .gem-tl-cards { grid-template-columns: 1fr; }
    .gems-module .gem-tl-cards > :nth-child(3) { grid-column: auto; }
    .gems-module .gem-tl-divider-line { height: 50px; }

    /* Gem Compare - stack vertically on mobile */
    .gems-module .gem-compare { flex-direction: column; gap: 16px; }
    .gems-module .gem-compare-side { padding: 28px 20px; }
    .gems-module .gem-compare-divider {
        width: 100%; height: 0;
        margin: -8px 0;
        flex-direction: row;
    }
    .gems-module .gem-compare-arrow { min-width: 40px; min-height: 40px; }
    .gems-module .gem-compare-arrow i { transform: rotate(90deg); }

    /* Benefits strip - stack on mobile */
    .gems-module .gem-benefits-strip {
        flex-direction: column;
        gap: 12px;
    }
    .gems-module .gem-benefit-card {
        padding: 14px 18px;
    }
    .gems-module .gem-compare-text { max-width: none; }

    /* Gem Assembly - smaller on mobile */
    .gems-module .anatomy-gem-icon { width: 64px; height: 64px; border-radius: 16px; }
    .gems-module .anatomy-gem-icon i { width: 28px !important; height: 28px !important; }
}

@media (max-width: 600px) {
    .gems-module .dot-group-intro { padding: 2px 4px; }
    .gems-module .dot-separator { margin: 0 2px; }

    /* Gem Element Timeline - mobile */
    .gems-module .gem-tl-line { display: none; }
    .gems-module .gem-tl-section { padding-left: 16px; padding-right: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-gem-animate],
    [data-gem-animate="spring"],
    [data-gem-animate="fade-up"],
    [data-gem-animate="scale"] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .gems-module .gem-tl-scroll-cue { animation: none; }
    .gems-module .gem-tl-line-fill { transition: none; }
    .gems-module .gem-tl-divider.visible .gem-tl-divider-line::after { animation: none; }
    .gems-module .gem-tl-divider.visible .gem-tl-divider-dot { animation: none; opacity: 1; transform: scale(1); }
    .gems-module .gem-tl-divider.visible .gem-tl-divider-label { animation: none; opacity: 1; transform: none; }
}


/* ============================================================
   Gem Instruction Builder - Interactive cards on Slide 3
   ============================================================ */

/* Builder slot containers - span full grid width */
.gems-module .gem-builder-slot {
    margin-top: var(--space-6);
    grid-column: 1 / -1;
}

/* ------------------------------------------------------------
   Builder Card (base)
   ------------------------------------------------------------ */
.gems-module .gem-builder-card {
    background: rgba(10, 15, 20, 0.85);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    backdrop-filter: blur(12px);
    position: relative;
}

/* Color variants */
.gems-module .gem-builder-card--pink   { border-color: rgba(99, 102, 241, 0.25); }
.gems-module .gem-builder-card--teal   { border-color: rgba(20, 184, 166, 0.25); }
.gems-module .gem-builder-card--purple { border-color: rgba(168, 85, 247, 0.25); }
.gems-module .gem-builder-card--blue   { border-color: rgba(59, 130, 246, 0.25); }
.gems-module .gem-builder-card--amber  { border-color: rgba(245, 158, 11, 0.25); }
.gems-module .gem-builder-card--green  { border-color: rgba(34, 197, 94, 0.25); }

/* Header row */
.gems-module .gem-builder-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gems-module .gem-builder-card-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.gems-module .gem-builder-card-desc {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
    line-height: 1.5;
}

/* Badge */
.gems-module .gem-builder-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gems-module .gem-builder-badge--pink   { background: rgba(99, 102, 241, 0.15); color: var(--pink-400); }
.gems-module .gem-builder-badge--teal   { background: rgba(20, 184, 166, 0.15); color: var(--teal-400); }
.gems-module .gem-builder-badge--purple { background: rgba(168, 85, 247, 0.15); color: var(--purple-400); }
.gems-module .gem-builder-badge--blue   { background: rgba(59, 130, 246, 0.15); color: var(--blue-400); }
.gems-module .gem-builder-badge--amber  { background: rgba(245, 158, 11, 0.15); color: var(--amber-400); }
.gems-module .gem-builder-badge--green  { background: rgba(34, 197, 94, 0.15); color: var(--green-400); }

/* ------------------------------------------------------------
   Preview Card (read-only pre-built content)
   ------------------------------------------------------------ */
.gems-module .gem-builder-preview {
    border-style: solid;
}

.gems-module .gem-builder-preview--pink { border-color: rgba(99, 102, 241, 0.2); background: rgba(99, 102, 241, 0.04); }
.gems-module .gem-builder-preview--teal { border-color: rgba(20, 184, 166, 0.2); background: rgba(20, 184, 166, 0.04); }

.gems-module .gem-builder-preview-text {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.gems-module .gem-builder-preview--pink .gem-builder-preview-text { border-left-color: var(--pink-500); }
.gems-module .gem-builder-preview--teal .gem-builder-preview-text { border-left-color: var(--teal-500); }

/* ------------------------------------------------------------
   Form Elements
   ------------------------------------------------------------ */
.gems-module .gem-builder-field {
    margin-bottom: var(--space-6);
}

.gems-module .gem-builder-field:last-child {
    margin-bottom: 0;
}

.gems-module .gem-builder-label {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.gems-module .gem-builder-hint {
    color: var(--text-muted);
    font-weight: 400;
}

.gems-module .gem-builder-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gems-module .gem-builder-input:focus {
    outline: none;
    border-color: var(--purple-400);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.gems-module .gem-builder-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M4.47 5.97L8 9.5l3.53-3.53'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--space-10);
    cursor: pointer;
}

.gems-module .gem-builder-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.gems-module .gem-builder-input::placeholder,
.gems-module .gem-builder-textarea::placeholder {
    color: var(--text-muted);
}

/* ------------------------------------------------------------
   Chips (demographics, frameworks)
   ------------------------------------------------------------ */
.gems-module .gem-builder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.gems-module .gem-builder-chip {
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.gems-module .gem-builder-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-accent);
}

.gems-module .gem-builder-chip--active {
    background: rgba(168, 85, 247, 0.15);
    border-color: var(--purple-400);
    color: var(--purple-400);
}

.gems-module .gem-builder-card--green .gem-builder-chip--active {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--green-400);
    color: var(--green-400);
}

/* ------------------------------------------------------------
   Example Question Chips
   ------------------------------------------------------------ */
.gems-module .gem-builder-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.gems-module .gem-builder-example-chip {
    padding: var(--space-1) var(--space-3);
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    text-align: left;
}

.gems-module .gem-builder-example-chip:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: var(--green-400);
    color: var(--green-400);
}

/* ------------------------------------------------------------
   Checklist (Knowledge Base)
   ------------------------------------------------------------ */
.gems-module .gem-builder-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gems-module .gem-builder-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.gems-module .gem-builder-checklist-item:hover {
    border-color: var(--blue-400);
}

.gems-module .gem-builder-checklist-item input[type="checkbox"] {
    display: none;
}

.gems-module .gem-builder-checklist-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--border-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.gems-module .gem-builder-checklist-check::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: transparent;
    transition: background 0.2s ease;
}

.gems-module .gem-builder-checklist-item input:checked ~ .gem-builder-checklist-check {
    border-color: var(--blue-400);
}

.gems-module .gem-builder-checklist-item input:checked ~ .gem-builder-checklist-check::after {
    background: var(--blue-400);
}

.gems-module .gem-builder-checklist-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gems-module .gem-builder-checklist-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--text-base);
}

.gems-module .gem-builder-checklist-desc {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Info note */
.gems-module .gem-builder-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.gems-module .gem-builder-note i { color: var(--blue-400); margin-top: 1px; }

/* ------------------------------------------------------------
   Tone Selector
   ------------------------------------------------------------ */
.gems-module .gem-builder-tone-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.gems-module .gem-builder-tone-option {
    position: relative;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.gems-module .gem-builder-tone-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gems-module .gem-builder-tone-option:hover {
    border-color: var(--amber-500);
    background: rgba(245, 158, 11, 0.04);
}

.gems-module .gem-builder-tone-option--active {
    border-color: var(--amber-500);
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}

.gems-module .gem-builder-tone-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-md);
    color: var(--amber-400);
}

.gems-module .gem-builder-tone-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.gems-module .gem-builder-tone-desc {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* Intensity slider area */
.gems-module .gem-builder-intensity {
    padding: var(--space-6);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(245, 158, 11, 0.12);
    border-radius: var(--radius-xl);
}

.gems-module .gem-builder-intensity-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--amber-400);
    margin-bottom: var(--space-4);
}

.gems-module .gem-builder-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, var(--amber-500) 50%, var(--pink-500) 100%);
    border-radius: var(--radius-full);
    outline: none;
    cursor: pointer;
}

.gems-module .gem-builder-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.gems-module .gem-builder-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.gems-module .gem-builder-intensity-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.gems-module .gem-builder-intensity-value {
    text-align: center;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: rgba(245, 158, 11, 0.06);
    border-radius: var(--radius-lg);
}

.gems-module .gem-builder-intensity-number {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 700;
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--amber-400), var(--pink-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gems-module .gem-builder-intensity-desc {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

/* ------------------------------------------------------------
   Final Prompt Output
   ------------------------------------------------------------ */
.gems-module .gem-builder-final {
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.gems-module .gem-builder-final-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.gems-module .gem-builder-final-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--teal-500), var(--blue-500));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.3);
}

.gems-module .gem-builder-final-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
}

.gems-module .gem-builder-final-subtitle {
    color: var(--text-muted);
    font-size: var(--text-base);
    text-align: left;
}

.gems-module .gem-builder-final-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.gems-module .gem-builder-final-hint i { color: var(--purple-400); }

.gems-module .gem-builder-final-prompt-wrap {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-default);
    overflow: hidden;
}

.gems-module .gem-builder-final-prompt {
    background: rgba(0, 0, 0, 0.4);
    padding: var(--space-6);
    text-align: left;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    margin: 0;
}

.gems-module .gem-builder-final-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.gems-module .gem-builder-copy-btn {
    gap: var(--space-2);
    display: inline-flex;
    align-items: center;
}

.gems-module .gem-builder-copy-btn--success {
    background: linear-gradient(135deg, var(--green-500), var(--teal-500)) !important;
    border-image: none !important;
}

.gems-module .gem-builder-gemini-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    gap: var(--space-2);
}

.gems-module .gem-builder-gemini-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--border-accent) !important;
}

.gems-module .gem-builder-final-steps {
    text-align: left;
    padding: var(--space-5);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.gems-module .gem-builder-final-steps p {
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.gems-module .gem-builder-final-steps ol {
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding-left: var(--space-5);
    line-height: 1.8;
}

.gems-module .gem-builder-reset-btn {
    color: var(--text-muted) !important;
}

/* ------------------------------------------------------------
   Green-themed section (Questions)
   ------------------------------------------------------------ */
.gems-module .gem-tl-element-marker--green {
    background: rgba(34, 197, 94, 0.12);
    border: 2px solid var(--green-400);
    color: var(--green-400);
    box-shadow: 0 0 24px var(--green-glow);
}

.gems-module .gem-tl-element-title--green {
    background: linear-gradient(135deg, var(--green-400), var(--teal-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gems-module .gem-tl-event--green { border-color: rgba(34, 197, 94, 0.15); }
.gems-module .gem-tl-event--green:hover { border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 8px 30px rgba(34, 197, 94, 0.12); }

.gems-module .gem-tl-event-icon--green {
    background: rgba(34, 197, 94, 0.1);
    color: var(--green-400);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .gems-module .gem-builder-card { padding: var(--space-5); }
    .gems-module .gem-builder-tone-grid { grid-template-columns: 1fr; }
    .gems-module .gem-builder-final-actions { flex-direction: column; }
    .gems-module .gem-builder-final-header { flex-direction: column; text-align: center; }
    .gems-module .gem-builder-final-title,
    .gems-module .gem-builder-final-subtitle { text-align: center; }
}

@media (max-width: 600px) {
    .gems-module .gem-builder-card { padding: var(--space-4); }
    .gems-module .gem-builder-chips { gap: var(--space-1); }
    .gems-module .gem-builder-chip { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
}


/* ============================================================
   Refinement Workshop (Slide 4)
   ============================================================ */

.gems-module .gem-workshop-section {
    background: rgba(10, 15, 20, 0.85);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    overflow: hidden;
    backdrop-filter: blur(12px);
}

.gems-module .gem-workshop-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: background 0.2s ease;
}

.gems-module .gem-workshop-section-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.gems-module .gem-workshop-section-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gems-module .gem-workshop-section-title {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.gems-module .gem-workshop-section-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gems-module .gem-workshop-section-body {
    padding: 0 var(--space-5) var(--space-5);
}

.gems-module .gem-workshop-textarea {
    width: 100%;
    min-height: 200px;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gems-module .gem-workshop-combined {
    margin-top: var(--space-8);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.gems-module .gem-workshop-combined-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: rgba(168, 85, 247, 0.06);
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.gems-module .gem-workshop-combined-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgba(168, 85, 247, 0.1);
    color: var(--purple-400);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gems-module .gem-workshop-combined-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.gems-module .gem-workshop-combined-body {
    padding: var(--space-5) var(--space-6);
}

.gems-module .gem-workshop-combined-prompt {
    width: 100%;
    min-height: 400px;
    max-height: 600px;
    padding: var(--space-5);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.gems-module .gem-workshop-textarea:focus {
    outline: none;
    border-color: var(--purple-400);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.gems-module .gem-workshop-textarea::placeholder {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-style: italic;
}

@media (max-width: 768px) {
    .gems-module .gem-workshop-section-header { padding: var(--space-3) var(--space-4); }
    .gems-module .gem-workshop-section-body { padding: 0 var(--space-4) var(--space-4); }
    .gems-module .gem-workshop-final-actions { flex-direction: column; }
}