/**
 * GE AI Course Factory - Sophisticated Dopamine Edition
 * "Apple Arcade meets MasterClass"
 * Premium, Clean, Gamified, High-Action
 */

/* ===========================================
   CSS Variables - Sophisticated Dopamine Palette
   =========================================== */
:root {
    /* Primary Gradient: Blue → Purple */
    --ge-primary-start: #4F46E5;
    --ge-primary-end: #7C3AED;
    --ge-primary: #5B4FE8;
    --ge-primary-soft: rgba(91, 79, 232, 0.08);
    --ge-primary-glow: rgba(124, 58, 237, 0.25);

    /* Secondary Gradient: Coral → Pink */
    --ge-secondary-start: #F97316;
    --ge-secondary-end: #EC4899;
    --ge-secondary: #F472B6;

    /* Functional Colors */
    --ge-success: #14B8A6;
    --ge-success-soft: rgba(20, 184, 166, 0.1);
    --ge-success-glow: rgba(20, 184, 166, 0.3);

    --ge-warning: #F59E0B;
    --ge-warning-soft: rgba(245, 158, 11, 0.1);
    --ge-warning-glow: rgba(245, 158, 11, 0.3);

    --ge-danger: #EF4444;
    --ge-danger-soft: rgba(239, 68, 68, 0.08);
    --ge-danger-glow: rgba(239, 68, 68, 0.25);

    /* Neutrals - Warm & Soft */
    --ge-white: #FFFFFF;
    --ge-off-white: #FAFAFA;
    --ge-gray-50: #F9FAFB;
    --ge-gray-100: #F3F4F6;
    --ge-gray-200: #E5E7EB;
    --ge-gray-300: #D1D5DB;
    --ge-gray-400: #9CA3AF;
    --ge-gray-500: #6B7280;
    --ge-gray-600: #4B5563;
    --ge-gray-700: #374151;
    --ge-gray-800: #1F2937;
    --ge-gray-900: #111827;

    /* Spacing */
    --ge-space-xs: 4px;
    --ge-space-sm: 8px;
    --ge-space-md: 16px;
    --ge-space-lg: 24px;
    --ge-space-xl: 32px;
    --ge-space-2xl: 48px;

    /* Typography */
    --ge-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --ge-leading: 1.7;
    --ge-tracking: -0.01em;

    /* Effects - Dreamy & Soft */
    --ge-radius-sm: 8px;
    --ge-radius-md: 12px;
    --ge-radius: 16px;
    --ge-radius-lg: 20px;
    --ge-radius-xl: 24px;
    --ge-radius-full: 9999px;

    /* Dreamy Shadows */
    --ge-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --ge-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --ge-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
    --ge-shadow-glow: 0 8px 32px rgba(91, 79, 232, 0.15);

    /* Glassmorphism */
    --ge-glass-bg: rgba(255, 255, 255, 0.7);
    --ge-glass-border: rgba(255, 255, 255, 0.4);
    --ge-glass-blur: blur(20px);

    /* Transitions */
    --ge-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ge-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===========================================
   Base Content Typography
   Override WPLMS default styles with higher specificity
   =========================================== */
.unit_content,
.post-content,
.course_content_content,
.single-unit .content,
.single-course .course_content_content,
.wplms_unit_content,
.unit_iframe_content {
    font-family: var(--ge-font) !important;
    font-size: 17px !important;
    line-height: var(--ge-leading) !important;
    letter-spacing: var(--ge-tracking) !important;
    color: var(--ge-gray-700) !important;
}

.unit_content p,
.post-content p,
.course_content_content p,
.single-unit .content p,
.wplms_unit_content p {
    margin: 0 0 1.5em !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: var(--ge-gray-700) !important;
}

.unit_content h3,
.post-content h3,
.course_content_content h3,
.single-unit .content h3,
.wplms_unit_content h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--ge-gray-900) !important;
    margin: 2.5em 0 1em !important;
    letter-spacing: -0.025em !important;
    line-height: 1.3 !important;
}

.unit_content h3:first-child,
.post-content h3:first-child,
.course_content_content h3:first-child {
    margin-top: 0 !important;
}

/* Strong text */
.unit_content strong,
.post-content strong,
.course_content_content strong,
.wplms_unit_content strong {
    font-weight: 600 !important;
    color: var(--ge-gray-800) !important;
}

/* Links */
.unit_content a:not([class]),
.post-content a:not([class]),
.course_content_content a:not([class]),
.wplms_unit_content a:not([class]) {
    color: var(--ge-primary) !important;
    text-decoration: none !important;
    transition: color var(--ge-transition) !important;
}

.unit_content a:not([class]):hover,
.post-content a:not([class]):hover,
.course_content_content a:not([class]):hover {
    color: var(--ge-primary-end) !important;
}

/* Images */
.unit_content img,
.post-content img,
.course_content_content img,
.wplms_unit_content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--ge-radius-lg) !important;
    margin: 2em 0 !important;
    box-shadow: var(--ge-shadow-lg) !important;
}

/* Lists - Clean, modern styling */
.unit_content ul:not([class]),
.post-content ul:not([class]),
.course_content_content ul:not([class]),
.wplms_unit_content ul:not([class]) {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5em 0 !important;
}

.unit_content ul:not([class]) li,
.post-content ul:not([class]) li,
.course_content_content ul:not([class]) li,
.wplms_unit_content ul:not([class]) li {
    position: relative !important;
    padding-left: 1.75em !important;
    margin-bottom: 0.75em !important;
    line-height: 1.6 !important;
}

.unit_content ul li::before,
.post-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    border-radius: 50%;
}

.unit_content ol,
.post-content ol {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
    counter-reset: ol-counter;
}

.unit_content ol li,
.post-content ol li {
    position: relative;
    padding-left: 2.5em;
    margin-bottom: 0.75em;
    line-height: 1.6;
    counter-increment: ol-counter;
}

.unit_content ol li::before,
.post-content ol li::before {
    content: counter(ol-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75em;
    height: 1.75em;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--ge-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blockquote - Base */
.unit_content blockquote:not([class]),
.post-content blockquote:not([class]) {
    position: relative;
    margin: 2em 0;
    padding: 1.5em 2em;
    background: linear-gradient(135deg, var(--ge-gray-50) 0%, var(--ge-white) 100%);
    border-left: 4px solid var(--ge-primary);
    border-radius: 0 var(--ge-radius) var(--ge-radius) 0;
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--ge-gray-600);
}

/* ===========================================
   HOOK - Opening Curiosity Trigger
   Minimal cinematic text with Focus Pull animation
   =========================================== */
.ge-hook {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ge-gray-900, #1a1a1a);
    padding: var(--ge-space-2xl, 3rem) var(--ge-space-lg, 1.5rem);
    margin: var(--ge-space-xl, 2rem) auto;
    max-width: 800px;
    /* Focus Pull Animation - Initial State */
    opacity: 0;
    filter: blur(15px);
    transform: scale(0.95);
    transition: opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Focus Pull Animation - Animated State */
.ge-hook.ge-animate {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .ge-hook {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}

/* ===========================================
   QUEST - Mission Briefing Card
   Epic intro with star badge and glow effect
   =========================================== */
.ge-quest {
    position: relative;
    display: flex;
    gap: var(--ge-space-lg);
    padding: var(--ge-space-xl);
    margin: var(--ge-space-2xl) 0;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.03) 0%, rgba(124, 58, 237, 0.06) 100%);
    border-radius: var(--ge-radius-xl);
    border: 1px solid rgba(124, 58, 237, 0.15);
    overflow: hidden;
    transition: transform var(--ge-transition), box-shadow var(--ge-transition);
}

.ge-quest:hover {
    transform: translateY(-4px);
    box-shadow: var(--ge-shadow-glow);
}

.ge-quest-badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    border-radius: var(--ge-radius);
    box-shadow: 0 4px 16px var(--ge-primary-glow);
}

.ge-quest-badge svg {
    width: 28px;
    height: 28px;
    color: white;
}

.ge-quest-content {
    flex: 1;
    min-width: 0;
}

.ge-quest-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ge-primary);
    margin-bottom: var(--ge-space-sm);
}

.ge-quest-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ge-gray-700);
}

.ge-quest-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--ge-primary-glow) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.5;
}

/* ===========================================
   XP POINT - Collectible Knowledge Card
   Achievement unlocked / iOS notification style
   =========================================== */
.ge-xp-point {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-md);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-xl) 0;
    background: var(--ge-white);
    border-radius: var(--ge-radius-lg);
    box-shadow: var(--ge-shadow);
    border: 1px solid var(--ge-gray-100);
    overflow: hidden;
    transition: transform var(--ge-transition), box-shadow var(--ge-transition);
}

.ge-xp-point:hover {
    transform: translateY(-4px);
    box-shadow: var(--ge-shadow-lg);
}

.ge-xp-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ge-success), #34D399);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--ge-success-glow);
}

.ge-xp-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.ge-xp-body {
    flex: 1;
    min-width: 0;
}

.ge-xp-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ge-success);
    margin-bottom: var(--ge-space-xs);
}

.ge-xp-content {
    color: var(--ge-gray-600);
    line-height: 1.65;
}

.ge-xp-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    animation: ge-shine 4s ease-in-out infinite;
}

@keyframes ge-shine {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

/* ===========================================
   HAZARD - Trap Warning Card
   Engaging danger with pulse animation
   =========================================== */
.ge-hazard {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-md);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-xl) 0;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, rgba(249, 115, 22, 0.06) 100%);
    border-radius: var(--ge-radius-lg);
    border: 1px solid rgba(239, 68, 68, 0.15);
    overflow: hidden;
}

.ge-hazard-pulse {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    animation: ge-pulse 2s ease-in-out infinite;
}

@keyframes ge-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 0; }
}

.ge-hazard-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ge-danger), var(--ge-secondary-start));
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--ge-danger-glow);
}

.ge-hazard-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.ge-hazard-body {
    flex: 1;
    min-width: 0;
}

.ge-hazard-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ge-danger);
    margin-bottom: var(--ge-space-xs);
}

.ge-hazard-content {
    color: var(--ge-gray-700);
    line-height: 1.65;
}

/* ===========================================
   BLUEPRINT - Strategy Guide Container
   Metro map / Skill tree design
   =========================================== */
.ge-blueprint {
    position: relative;
    margin: var(--ge-space-2xl) 0;
    padding: var(--ge-space-lg);
    background: var(--ge-white);
    border-radius: var(--ge-radius-xl);
    box-shadow: var(--ge-shadow);
    border: 1px solid var(--ge-gray-100);
}

.ge-blueprint-header {
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    padding-bottom: var(--ge-space-md);
    margin-bottom: var(--ge-space-lg);
    border-bottom: 1px solid var(--ge-gray-100);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ge-gray-500);
}

.ge-blueprint-header svg {
    width: 18px;
    height: 18px;
    color: var(--ge-primary);
}

.ge-blueprint-track {
    position: relative;
    padding-left: 48px;
}

.ge-blueprint-track::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 24px;
    bottom: 24px;
    width: 3px;
    background: linear-gradient(180deg, var(--ge-primary-start), var(--ge-primary-end), var(--ge-success));
    border-radius: 3px;
}

/* ===========================================
   MILESTONE - Single step in Blueprint
   =========================================== */
.ge-milestone {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-md);
    padding: var(--ge-space-md) 0;
}

.ge-milestone-node {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ge-white);
    border: 3px solid var(--ge-primary);
    border-radius: var(--ge-radius-full);
    z-index: 1;
    transition: all var(--ge-transition);
}

.ge-milestone:first-child .ge-milestone-node {
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    border-color: transparent;
}

.ge-milestone:first-child .ge-milestone-num {
    color: white;
}

.ge-milestone-num {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ge-primary);
}

.ge-milestone-content {
    flex: 1;
    padding: var(--ge-space-md);
    background: var(--ge-gray-50);
    border-radius: var(--ge-radius);
    transition: all var(--ge-transition);
}

.ge-milestone:hover .ge-milestone-content {
    background: var(--ge-primary-soft);
}

.ge-milestone:hover .ge-milestone-node {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px var(--ge-primary-glow);
}

.ge-milestone-title {
    font-weight: 600;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-xs);
}

.ge-milestone-text {
    font-size: 0.9375rem;
    color: var(--ge-gray-600);
    line-height: 1.6;
}

/* ===========================================
   BOSS CARD - Major Concept
   Glassmorphism premium card
   =========================================== */
.ge-boss-card {
    position: relative;
    margin: var(--ge-space-2xl) 0;
    padding: var(--ge-space-xl);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-radius: var(--ge-radius-xl);
    border: 1px solid rgba(124, 58, 237, 0.1);
    overflow: hidden;
    transition: transform var(--ge-transition), box-shadow var(--ge-transition);
}

.ge-boss-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ge-shadow-glow);
}

.ge-boss-glass {
    position: absolute;
    inset: 0;
    background: var(--ge-glass-bg);
    backdrop-filter: var(--ge-glass-blur);
    -webkit-backdrop-filter: var(--ge-glass-blur);
    z-index: 0;
}

.ge-boss-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ge-gray-900);
    margin-bottom: var(--ge-space-xs);
}

.ge-boss-subtitle {
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ge-gray-500);
    margin-bottom: var(--ge-space-md);
}

.ge-boss-icon {
    font-size: 1.5rem;
}

.ge-boss-content {
    position: relative;
    z-index: 1;
    color: var(--ge-gray-700);
    line-height: 1.7;
}

.ge-boss-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ge-primary-start), var(--ge-secondary-end));
    border-radius: 0 0 var(--ge-radius-xl) var(--ge-radius-xl);
}

/* ===========================================
   VS MODE - Pro vs Amateur Comparison
   Character select screen vibe
   =========================================== */
.ge-vs-mode {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    margin: var(--ge-space-2xl) 0;
    border-radius: var(--ge-radius-xl);
    overflow: hidden;
    box-shadow: var(--ge-shadow-lg);
}

.ge-vs-amateur {
    padding: var(--ge-space-xl);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.1);
    border-right: none;
    border-radius: var(--ge-radius-xl) 0 0 var(--ge-radius-xl);
}

.ge-vs-pro {
    padding: var(--ge-space-xl);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, rgba(20, 184, 166, 0.08) 100%);
    border: 1px solid rgba(20, 184, 166, 0.1);
    border-left: none;
    border-radius: 0 var(--ge-radius-xl) var(--ge-radius-xl) 0;
}

.ge-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    background: linear-gradient(180deg, var(--ge-gray-800), var(--ge-gray-900));
    font-size: 0.875rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.05em;
}

.ge-vs-divider span {
    transform: rotate(-90deg);
}

.ge-vs-badge {
    display: inline-block;
    padding: var(--ge-space-xs) var(--ge-space-md);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--ge-radius-full);
    margin-bottom: var(--ge-space-sm);
}

.ge-vs-amateur .ge-vs-badge {
    background: rgba(239, 68, 68, 0.15);
    color: var(--ge-danger);
}

.ge-vs-pro .ge-vs-badge {
    background: rgba(20, 184, 166, 0.15);
    color: var(--ge-success);
}

.ge-vs-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-sm);
}

.ge-vs-content {
    font-size: 0.9375rem;
    color: var(--ge-gray-600);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .ge-vs-mode {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 1fr;
    }

    .ge-vs-amateur {
        border-radius: var(--ge-radius-xl) var(--ge-radius-xl) 0 0;
        border-right: 1px solid rgba(239, 68, 68, 0.1);
        border-bottom: none;
    }

    .ge-vs-pro {
        border-radius: 0 0 var(--ge-radius-xl) var(--ge-radius-xl);
        border-left: 1px solid rgba(20, 184, 166, 0.1);
        border-top: none;
    }

    .ge-vs-divider {
        width: 100%;
        height: 40px;
    }

    .ge-vs-divider span {
        transform: none;
    }
}

/* ===========================================
   VS MODE VARIANTS
   Before/After, Do/Don't, Myth/Reality, etc.
   =========================================== */

/* Generic left/right panels */
.ge-vs-left {
    padding: var(--ge-space-xl);
    border-right: none;
    border-radius: var(--ge-radius-xl) 0 0 var(--ge-radius-xl);
}
.ge-vs-right {
    padding: var(--ge-space-xl);
    border-left: none;
    border-radius: 0 var(--ge-radius-xl) var(--ge-radius-xl) 0;
}

/* BEFORE/AFTER - Gray to Green transformation */
.ge-ba-before {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.06) 0%, rgba(107, 114, 128, 0.10) 100%);
    border: 1px solid rgba(107, 114, 128, 0.15);
}
.ge-ba-before .ge-vs-badge {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}
.ge-ba-after {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.04) 0%, rgba(34, 197, 94, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.15);
}
.ge-ba-after .ge-vs-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}
/* DO/DON'T - Red/Green best practices */
.ge-dd-dont {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.12);
}
.ge-dd-dont .ge-vs-badge {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}
.ge-dd-do {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.04) 0%, rgba(34, 197, 94, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.12);
}
.ge-dd-do .ge-vs-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

/* MYTH/REALITY - Orange/Blue misconception busting */
.ge-mr-myth {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.04) 0%, rgba(251, 146, 60, 0.08) 100%);
    border: 1px solid rgba(251, 146, 60, 0.15);
}
.ge-mr-myth .ge-vs-badge {
    background: rgba(251, 146, 60, 0.15);
    color: #ea580c;
}
.ge-mr-reality {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
}
.ge-mr-reality .ge-vs-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

/* EXPECTATION/REALITY - Pink/Gray managing expectations */
.ge-er-expectation {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.04) 0%, rgba(168, 85, 247, 0.06) 100%);
    border: 1px solid rgba(236, 72, 153, 0.15);
}
.ge-er-expectation .ge-vs-badge {
    background: rgba(236, 72, 153, 0.15);
    color: #db2777;
}
.ge-er-reality {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.04) 0%, rgba(100, 116, 139, 0.08) 100%);
    border: 1px solid rgba(100, 116, 139, 0.15);
}
.ge-er-reality .ge-vs-badge {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

/* OLD/NEW - Sepia/Blue modernization */
.ge-on-old {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.04) 0%, rgba(161, 98, 7, 0.06) 100%);
    border: 1px solid rgba(180, 83, 9, 0.15);
}
.ge-on-old .ge-vs-badge {
    background: rgba(180, 83, 9, 0.15);
    color: #92400e;
}
.ge-on-new {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.04) 0%, rgba(59, 130, 246, 0.06) 100%);
    border: 1px solid rgba(6, 182, 212, 0.15);
}
.ge-on-new .ge-vs-badge {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
}

/* Mobile responsive for variants */
@media (max-width: 640px) {
    .ge-vs-left {
        border-radius: var(--ge-radius-xl) var(--ge-radius-xl) 0 0;
        border-right: 1px solid inherit;
        border-bottom: none;
    }
    .ge-vs-right {
        border-radius: 0 0 var(--ge-radius-xl) var(--ge-radius-xl);
        border-left: 1px solid inherit;
        border-top: none;
    }
}

/* ===========================================
   POWER UP - Pro Tip
   Lightning bolt energy
   =========================================== */
.ge-power-up {
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-md);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-xl) 0;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(249, 115, 22, 0.08) 100%);
    border-radius: var(--ge-radius-lg);
    border: 1px solid rgba(245, 158, 11, 0.15);
    transition: transform var(--ge-transition), box-shadow var(--ge-transition);
}

.ge-power-up:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--ge-warning-glow);
}

.ge-power-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ge-warning), var(--ge-secondary-start));
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--ge-warning-glow);
}

.ge-power-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

.ge-power-body {
    flex: 1;
    min-width: 0;
}

.ge-power-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ge-warning);
    margin-bottom: var(--ge-space-xs);
}

.ge-power-content {
    color: var(--ge-gray-700);
    line-height: 1.65;
}

/* ===========================================
   UNLOCK - Key Insight
   Left-aligned icon style
   =========================================== */
.ge-unlock {
    position: relative;
    margin: 24px 0;
    padding: 24px 24px 24px 72px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border-radius: 12px;
    border: 1px solid #c7d2fe;
}

.ge-unlock-icon {
    position: absolute;
    left: 20px;
    top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--ge-primary-glow);
}

.ge-unlock-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.ge-unlock-content {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ge-gray-700);
}

@media (max-width: 640px) {
    .ge-unlock {
        max-width: 100%;
        padding: var(--ge-space-xl) var(--ge-space-md);
    }

    .ge-unlock-text {
        font-size: 1.25rem;
    }
}

/* ===========================================
   CHECKPOINT - Summary / Save Point
   Flag icon with gradient border
   =========================================== */
.ge-checkpoint {
    position: relative;
    margin: var(--ge-space-2xl) 0;
    padding: 24px 24px 24px 72px;
    background: var(--ge-gray-50);
    border-radius: var(--ge-radius-xl);
    overflow: hidden;
}

.ge-checkpoint-icon {
    position: absolute;
    left: 20px;
    top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--ge-success), #34D399);
    border-radius: var(--ge-radius);
    box-shadow: 0 4px 12px var(--ge-success-glow);
}

.ge-checkpoint-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.ge-checkpoint-header {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ge-gray-900);
    margin-bottom: var(--ge-space-md);
}

.ge-checkpoint-content {
    color: var(--ge-gray-700);
    line-height: 1.7;
}

.ge-checkpoint-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ge-checkpoint-content li {
    position: relative;
    padding-left: var(--ge-space-lg);
    margin-bottom: var(--ge-space-sm);
}

.ge-checkpoint-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ge-success);
    font-weight: 700;
}

.ge-checkpoint-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ge-success), #34D399, var(--ge-primary-end));
}

/* ===========================================
   QUOTE - Editorial Quote
   =========================================== */
blockquote.ge-quote {
    position: relative;
    margin: var(--ge-space-2xl) 0;
    padding: var(--ge-space-xl);
    padding-left: calc(var(--ge-space-xl) + 24px);
    background: var(--ge-gray-50);
    border-radius: var(--ge-radius-lg);
    border: none;
}

blockquote.ge-quote::before {
    content: '"';
    position: absolute;
    left: var(--ge-space-lg);
    top: var(--ge-space-md);
    font-size: 4rem;
    line-height: 1;
    color: var(--ge-gray-200);
    font-family: Georgia, serif;
}

.ge-quote-text {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--ge-gray-600);
    line-height: 1.8;
    margin-bottom: var(--ge-space-md);
}

.ge-quote-author {
    font-size: 0.875rem;
    font-weight: 600;
    font-style: normal;
    color: var(--ge-gray-500);
}

/* ===========================================
   HIGHLIGHT - Inline text highlight
   =========================================== */
.ge-highlight {
    background: linear-gradient(180deg, transparent 50%, rgba(251, 191, 36, 0.35) 50%);
    padding: 0 4px;
    border-radius: 2px;
}

/* ===========================================
   COLUMNS - Responsive grid
   =========================================== */
.ge-columns {
    display: grid;
    gap: var(--ge-space-lg);
    margin: var(--ge-space-xl) 0;
}

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

.ge-column {
    background: var(--ge-white);
    border: 1px solid var(--ge-gray-100);
    border-radius: var(--ge-radius-lg);
    padding: var(--ge-space-lg);
    transition: transform var(--ge-transition), box-shadow var(--ge-transition);
}

.ge-column:hover {
    transform: translateY(-4px);
    box-shadow: var(--ge-shadow-lg);
}

@media (max-width: 768px) {
    .ge-columns-3, .ge-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ge-columns-2, .ge-columns-3, .ge-columns-4 {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   DIVIDER - Section break
   =========================================== */
.ge-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--ge-space-2xl) 0;
    height: 24px;
}

.ge-divider span {
    display: block;
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, var(--ge-primary-start), var(--ge-primary-end));
    border-radius: var(--ge-radius-full);
}

/* ===========================================
   Table Enhancement
   =========================================== */
.unit_content table,
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--ge-space-xl) 0;
    font-size: 0.9375rem;
    border-radius: var(--ge-radius-lg);
    overflow: hidden;
    box-shadow: var(--ge-shadow-sm);
}

.unit_content table th,
.post-content table th {
    text-align: left;
    padding: var(--ge-space-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ge-white);
    background: linear-gradient(135deg, var(--ge-gray-700), var(--ge-gray-800));
}

.unit_content table td,
.post-content table td {
    padding: var(--ge-space-md);
    color: var(--ge-gray-700);
    border-bottom: 1px solid var(--ge-gray-100);
    background: var(--ge-white);
}

.unit_content table tr:last-child td,
.post-content table tr:last-child td {
    border-bottom: none;
}

.unit_content table tr:hover td,
.post-content table tr:hover td {
    background: var(--ge-primary-soft);
}

/* ===========================================
   LEGACY SHORTCODE SUPPORT
   Maps old styles to new gamified ones
   =========================================== */

/* ge_hero maps to ge_quest */
.ge-hero {
    position: relative;
    display: flex;
    gap: var(--ge-space-lg);
    padding: var(--ge-space-xl);
    margin: var(--ge-space-2xl) 0;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.03) 0%, rgba(124, 58, 237, 0.06) 100%);
    border-radius: var(--ge-radius-xl);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-left: none;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ge-gray-700);
}

.ge-hero::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ge-primary-start), var(--ge-primary-end));
    border-radius: var(--ge-radius-xl) 0 0 var(--ge-radius-xl);
}

/* ge_note maps to ge_xp_point */
.ge-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-md);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-xl) 0;
    background: var(--ge-white);
    border-radius: var(--ge-radius-lg);
    box-shadow: var(--ge-shadow);
    border: 1px solid var(--ge-gray-100);
}

.ge-note::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    align-self: stretch;
    background: linear-gradient(180deg, var(--ge-primary-start), var(--ge-primary-end));
    border-radius: 4px;
    margin: calc(var(--ge-space-lg) * -1);
    margin-right: var(--ge-space-md);
}

.ge-note-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ge-primary);
    margin-bottom: var(--ge-space-xs);
}

.ge-note-content {
    color: var(--ge-gray-600);
    line-height: 1.65;
}

/* ge_warning maps to ge_hazard */
.ge-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-md);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-xl) 0;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, rgba(249, 115, 22, 0.06) 100%);
    border-radius: var(--ge-radius-lg);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.ge-warning::before {
    content: '!';
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--ge-danger), var(--ge-secondary-start));
    color: white;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--ge-danger-glow);
}

.ge-warning-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ge-danger);
    margin-bottom: var(--ge-space-xs);
}

.ge-warning-content {
    color: var(--ge-gray-700);
    line-height: 1.65;
}

/* ge_tip maps to ge_power_up */
.ge-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-md);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-xl) 0;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, rgba(52, 211, 153, 0.08) 100%);
    border-radius: var(--ge-radius-lg);
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.ge-tip::before {
    content: '✓';
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--ge-success), #34D399);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--ge-success-glow);
}

.ge-tip-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ge-success);
    margin-bottom: var(--ge-space-xs);
}

.ge-tip-content {
    color: var(--ge-gray-700);
    line-height: 1.65;
}

/* ge_steps maps to ge_blueprint */
.ge-steps {
    position: relative;
    margin: var(--ge-space-2xl) 0;
    padding: var(--ge-space-lg);
    padding-left: 56px;
    background: var(--ge-white);
    border-radius: var(--ge-radius-xl);
    box-shadow: var(--ge-shadow);
    border: 1px solid var(--ge-gray-100);
}

.ge-steps::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 40px;
    bottom: 40px;
    width: 3px;
    background: linear-gradient(180deg, var(--ge-primary-start), var(--ge-primary-end), var(--ge-success));
    border-radius: 3px;
}

.ge-step {
    position: relative;
    padding: var(--ge-space-md) 0;
}

.ge-step:last-child {
    padding-bottom: 0;
}

.ge-step-number {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: var(--ge-white);
    border: 3px solid var(--ge-primary);
    color: var(--ge-primary);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--ge-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.ge-step:first-child .ge-step-number {
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    border-color: transparent;
    color: white;
}

.ge-step-content {
    padding: var(--ge-space-md);
    background: var(--ge-gray-50);
    border-radius: var(--ge-radius);
}

.ge-step-title {
    font-weight: 600;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-xs);
}

.ge-step-text {
    font-size: 0.9375rem;
    color: var(--ge-gray-600);
    line-height: 1.6;
}

/* ge_card maps to ge_boss_card */
.ge-card {
    position: relative;
    margin: var(--ge-space-xl) 0;
    padding: var(--ge-space-xl);
    background: var(--ge-white);
    border-radius: var(--ge-radius-xl);
    box-shadow: var(--ge-shadow);
    border: 1px solid var(--ge-gray-100);
    transition: transform var(--ge-transition), box-shadow var(--ge-transition);
}

.ge-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ge-shadow-lg);
}

.ge-card-title {
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ge-gray-900);
    margin-bottom: var(--ge-space-md);
    padding-bottom: var(--ge-space-md);
    border-bottom: 1px solid var(--ge-gray-100);
}

.ge-card-icon {
    font-size: 1.5rem;
}

.ge-card-content {
    color: var(--ge-gray-600);
    line-height: 1.7;
}

/* ge_summary maps to ge_checkpoint */
.ge-summary {
    position: relative;
    margin: var(--ge-space-2xl) 0;
    padding: var(--ge-space-xl);
    background: var(--ge-gray-50);
    border-radius: var(--ge-radius-xl);
    overflow: hidden;
}

.ge-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ge-success), #34D399, var(--ge-primary-end));
}

.ge-summary-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ge-success);
    margin-bottom: var(--ge-space-md);
}

.ge-summary-content {
    color: var(--ge-gray-700);
    line-height: 1.7;
}

.ge-summary-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ge-summary-content li {
    position: relative;
    padding-left: var(--ge-space-lg);
    margin-bottom: var(--ge-space-sm);
}

.ge-summary-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ge-success);
    font-weight: 700;
}

/* ge_insight - Editorial pull quote */
.ge-insight,
blockquote.ge-insight {
    position: relative;
    margin: var(--ge-space-2xl) auto;
    padding: var(--ge-space-2xl) var(--ge-space-xl);
    max-width: 85%;
    text-align: center;
    border: none;
    background: none;
}

.ge-insight::before,
blockquote.ge-insight::before {
    content: '"';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6rem;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--ge-primary);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;
}

.ge-insight p,
blockquote.ge-insight p {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ge-gray-700);
    letter-spacing: -0.01em;
    margin: 0;
    font-style: normal;
}

/* ===========================================
   Responsive Adjustments
   =========================================== */
@media (max-width: 640px) {
    .ge-quest,
    .ge-boss-card {
        padding: var(--ge-space-lg);
    }

    .ge-quest-badge {
        width: 48px;
        height: 48px;
    }

    .ge-quest-badge svg {
        width: 24px;
        height: 24px;
    }

    .ge-blueprint-track {
        padding-left: 40px;
    }

    .ge-blueprint-track::before {
        left: 15px;
    }

    .ge-milestone-node {
        left: -40px;
        width: 32px;
        height: 32px;
    }

    .ge-unlock-text {
        font-size: 1.25rem;
    }
}

/* ===========================================
   Animations
   =========================================== */
@media (prefers-reduced-motion: no-preference) {
    .ge-quest,
    .ge-xp-point,
    .ge-hazard,
    .ge-blueprint,
    .ge-boss-card,
    .ge-power-up,
    .ge-unlock,
    .ge-checkpoint,
    .ge-card,
    .ge-note,
    .ge-warning,
    .ge-tip,
    .ge-summary {
        animation: ge-fade-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    @keyframes ge-fade-up {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ge-milestone {
        animation: ge-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .ge-milestone:nth-child(1) { animation-delay: 0s; }
    .ge-milestone:nth-child(2) { animation-delay: 0.08s; }
    .ge-milestone:nth-child(3) { animation-delay: 0.16s; }
    .ge-milestone:nth-child(4) { animation-delay: 0.24s; }
    .ge-milestone:nth-child(5) { animation-delay: 0.32s; }

    @keyframes ge-slide-in {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* ===========================================
   Print Styles
   =========================================== */
@media print {
    .ge-quest,
    .ge-xp-point,
    .ge-hazard,
    .ge-blueprint,
    .ge-boss-card,
    .ge-power-up,
    .ge-unlock,
    .ge-checkpoint,
    .ge-card,
    .ge-note,
    .ge-warning,
    .ge-tip,
    .ge-summary {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--ge-gray-200);
    }

    .ge-milestone {
        break-inside: avoid;
    }

    .ge-quest:hover,
    .ge-xp-point:hover,
    .ge-boss-card:hover,
    .ge-power-up:hover,
    .ge-card:hover,
    .ge-column:hover {
        transform: none;
    }

    .ge-xp-shine,
    .ge-hazard-pulse,
    .ge-quest-glow,
    .ge-unlock-glow {
        display: none;
    }
}

/* ===========================================
   NEW GAMIFIED SHORTCODES (v1.5)
   11 Additional Premium Components
   =========================================== */

/* -------------------------------------------
   Lore - Background Story / History
   Sepia parchment theme, ancient scroll feel
   ------------------------------------------- */
.ge-lore {
    position: relative;
    background: linear-gradient(135deg, #faf6f0 0%, #f5efe5 50%, #ebe4d6 100%);
    border-radius: 12px;
    padding: 28px 28px 28px 72px;
    margin: 24px 0;
    border: 1px solid #d4c9b5;
    box-shadow:
        0 2px 8px rgba(139, 119, 90, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.ge-lore::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L30 60M0 30L60 30' stroke='%23d4c9b5' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E");
    opacity: 0.15;
    pointer-events: none;
}

.ge-lore-icon {
    position: absolute;
    left: 20px;
    top: 24px;
    width: 32px;
    height: 32px;
    color: #8b775a;
}

.ge-lore-icon svg {
    width: 100%;
    height: 100%;
}

.ge-lore-title {
    font-size: 15px;
    font-weight: 700;
    color: #5c4a32;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ge-lore-content {
    color: #6b5a45;
    line-height: 1.75;
    font-style: italic;
}

/* -------------------------------------------
   Side Quest - Optional Deep Dive
   Adventure compass theme
   ------------------------------------------- */
.ge-side-quest {
    position: relative;
    background: linear-gradient(135deg, #f0f7f4 0%, #e8f4ef 100%);
    border-radius: 12px;
    padding: 24px 24px 24px 68px;
    margin: 24px 0;
    border: 1px solid #a8d5c2;
    border-left: 4px solid #2d8659;
    box-shadow: 0 2px 8px rgba(45, 134, 89, 0.08);
}

.ge-side-quest-icon {
    position: absolute;
    left: 18px;
    top: 22px;
    width: 34px;
    height: 34px;
    color: #2d8659;
    animation: ge-compass-spin 8s ease-in-out infinite;
}

@keyframes ge-compass-spin {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.ge-side-quest-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2d8659 0%, #238c52 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.ge-side-quest-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e5c3d;
    margin: 0 0 10px 0;
}

.ge-side-quest-content {
    color: #3d6b52;
    line-height: 1.7;
}

/* -------------------------------------------
   Treasure - Rare/Valuable Information
   Gold chest with sparkle effect
   ------------------------------------------- */
.ge-treasure {
    position: relative;
    background: linear-gradient(135deg, #fffbf0 0%, #fff7e6 50%, #fff3d9 100%);
    border-radius: 16px;
    padding: 28px 28px 28px 76px;
    margin: 24px 0;
    border: 2px solid #f0c14b;
    box-shadow:
        0 4px 16px rgba(212, 160, 23, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.ge-treasure::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 215, 0, 0.1) 45%,
        rgba(255, 215, 0, 0.2) 50%,
        rgba(255, 215, 0, 0.1) 55%,
        transparent 60%
    );
    animation: ge-treasure-shine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ge-treasure-shine {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50% { transform: translateX(100%) rotate(45deg); }
}

.ge-treasure-icon {
    position: absolute;
    left: 20px;
    top: 24px;
    width: 40px;
    height: 40px;
    color: #d4a017;
    filter: drop-shadow(0 2px 4px rgba(212, 160, 23, 0.3));
}

.ge-treasure-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f0c14b 0%, #d4a017 100%);
    color: #5c4a00;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.25);
}

.ge-treasure-title {
    font-size: 18px;
    font-weight: 700;
    color: #8b6914;
    margin: 0 0 12px 0;
}

.ge-treasure-content {
    position: relative;
    z-index: 1;
    color: #6b5a30;
    line-height: 1.7;
}

/* -------------------------------------------
   Puzzle - Brain Teaser / Think About It
   Purple cognitive theme
   ------------------------------------------- */
.ge-puzzle {
    position: relative;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebff 100%);
    border-radius: 12px;
    padding: 24px 24px 24px 68px;
    margin: 24px 0;
    border: 1px solid #c9b8f0;
    border-left: 4px solid #7c4dff;
    box-shadow: 0 2px 12px rgba(124, 77, 255, 0.08);
}

.ge-puzzle-icon {
    position: absolute;
    left: 18px;
    top: 22px;
    width: 34px;
    height: 34px;
    color: #7c4dff;
    animation: ge-puzzle-rotate 6s ease-in-out infinite;
}

@keyframes ge-puzzle-rotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}

.ge-puzzle-title {
    font-size: 17px;
    font-weight: 700;
    color: #4a2d99;
    margin: 0 0 12px 0;
}

.ge-puzzle-content {
    color: #5c4a7a;
    line-height: 1.7;
    padding: 16px;
    background: rgba(124, 77, 255, 0.04);
    border-radius: 8px;
    border: 1px dashed #c9b8f0;
}

/* -------------------------------------------
   Mentor - Expert Quote / Wisdom
   Professional avatar speech bubble
   ------------------------------------------- */
.ge-mentor {
    position: relative;
    background: linear-gradient(135deg, #f7f9fc 0%, #eef2f7 100%);
    border-radius: 16px;
    padding: 28px 28px 28px 90px;
    margin: 24px 0;
    border: 1px solid #d1dae6;
    box-shadow: 0 3px 12px rgba(52, 73, 94, 0.08);
}

/* Speech bubble pointer removed - was overlapping text */

.ge-mentor-avatar {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 3px 10px rgba(52, 73, 94, 0.2);
}

.ge-mentor-avatar svg {
    width: 26px;
    height: 26px;
}

.ge-mentor-label {
    font-size: 11px;
    font-weight: 700;
    color: #7f8c9a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.ge-mentor-quote {
    font-size: 17px;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.7;
    margin: 0 0 12px 0;
    font-style: italic;
}

.ge-mentor-quote::before {
    content: '"';
    font-size: 24px;
    color: #bdc3c7;
    line-height: 1;
    vertical-align: top;
    margin-right: 2px;
}

.ge-mentor-quote::after {
    content: '"';
    font-size: 24px;
    color: #bdc3c7;
    line-height: 1;
    vertical-align: bottom;
    margin-left: 2px;
}

.ge-mentor-author {
    font-size: 14px;
    font-weight: 600;
    color: #5d6d7e;
}

.ge-mentor-author::before {
    content: '— ';
}

/* -------------------------------------------
   Level Up - Skill/Knowledge Gained
   Celebration arrows up theme
   ------------------------------------------- */
.ge-level-up {
    position: relative;
    background: linear-gradient(135deg, #e8f8f0 0%, #d4f5e4 100%);
    border-radius: 12px;
    padding: 24px 24px 24px 72px;
    margin: 24px 0;
    border: 2px solid #4ade80;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.15);
    overflow: hidden;
}

.ge-level-up::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.1));
    pointer-events: none;
}

.ge-level-up-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    color: #16a34a;
    animation: ge-level-bounce 2s ease-in-out infinite;
}

@keyframes ge-level-bounce {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(-60%); }
}

.ge-level-up-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

.ge-level-up-skill {
    font-size: 18px;
    font-weight: 700;
    color: #15803d;
    margin: 0 0 8px 0;
}

.ge-level-up-desc {
    color: #166534;
    line-height: 1.6;
}

/* -------------------------------------------
   Inventory - Tools/Resources List
   Backpack grid layout
   ------------------------------------------- */
.ge-inventory {
    position: relative;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ge-inventory-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.ge-inventory-icon {
    width: 32px;
    height: 32px;
    color: #6b7280;
}

.ge-inventory-title {
    font-size: 16px;
    font-weight: 700;
    color: #374151;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ge-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .ge-inventory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ge-inventory-grid {
        grid-template-columns: 1fr;
    }
}

.ge-inventory-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.ge-inventory-item:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ge-inventory-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.ge-inventory-item-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* -------------------------------------------
   Mini Boss - Medium Difficulty Concept
   Silver shield theme
   ------------------------------------------- */
.ge-mini-boss {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 24px 24px 24px 72px;
    margin: 24px 0;
    border: 2px solid #adb5bd;
    box-shadow:
        0 4px 12px rgba(108, 117, 125, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ge-mini-boss-icon {
    position: absolute;
    left: 20px;
    top: 24px;
    width: 32px;
    height: 32px;
    color: #6c757d;
    filter: drop-shadow(0 2px 3px rgba(108, 117, 125, 0.2));
}

.ge-mini-boss-icon svg {
    width: 100%;
    height: 100%;
}

.ge-mini-boss-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.ge-mini-boss-title {
    font-size: 17px;
    font-weight: 700;
    color: #343a40;
    margin: 0 0 10px 0;
}

.ge-mini-boss-content {
    color: #495057;
    line-height: 1.7;
}

/* -------------------------------------------
   Easter Egg - Fun Fact / Hidden Gem
   Colorful egg with confetti feel
   ------------------------------------------- */
.ge-easter-egg {
    position: relative;
    background: linear-gradient(135deg, #fef3f8 0%, #fce7f3 50%, #fbcfe8 100%);
    border-radius: 16px;
    padding: 24px 24px 24px 72px;
    margin: 24px 0;
    border: 2px solid #f9a8d4;
    box-shadow: 0 4px 16px rgba(249, 168, 212, 0.2);
    overflow: hidden;
}

.ge-easter-egg::before {
    content: '✨';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 18px;
    animation: ge-sparkle 2s ease-in-out infinite;
}

.ge-easter-egg::after {
    content: '🎉';
    position: absolute;
    bottom: 8px;
    right: 40px;
    font-size: 14px;
    animation: ge-sparkle 2s ease-in-out infinite 0.5s;
}

@keyframes ge-sparkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.ge-easter-egg-icon {
    position: absolute;
    left: 20px;
    top: 22px;
    width: 36px;
    height: 36px;
    color: #ec4899;
}

.ge-easter-egg-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.ge-easter-egg-content {
    position: relative;
    z-index: 1;
    color: #9d174d;
    line-height: 1.7;
    font-weight: 500;
}

/* -------------------------------------------
   Combo - Connected Concepts / Synergy
   Chain link multiplier theme
   ------------------------------------------- */
.ge-combo {
    position: relative;
    background: linear-gradient(135deg, #fef9e7 0%, #fef3c7 100%);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    border: 2px solid #fbbf24;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.15);
}

.ge-combo-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ge-combo-icon {
    width: 32px;
    height: 32px;
    color: #d97706;
}

.ge-combo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ge-combo-multiplier {
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
}

.ge-combo-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ge-combo-item {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #fcd34d;
    font-weight: 600;
    color: #92400e;
    transition: all 0.2s ease;
}

.ge-combo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
}

.ge-combo-plus {
    color: #d97706;
    font-size: 20px;
    font-weight: 700;
}

.ge-combo-result {
    margin-top: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 8px;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ge-combo-result::before {
    content: '=';
    font-size: 18px;
    font-weight: 700;
}

/* -------------------------------------------
   Arena - Practice Zone / Challenge Area
   Action sword theme
   ------------------------------------------- */
.ge-arena {
    position: relative;
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    border-radius: 16px;
    padding: 28px;
    margin: 24px 0;
    border: 2px solid #6366f1;
    box-shadow:
        0 8px 24px rgba(99, 102, 241, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.ge-arena::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
    animation: ge-arena-glow 3s ease-in-out infinite;
}

@keyframes ge-arena-glow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.ge-arena-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ge-arena-icon {
    width: 40px;
    height: 40px;
    color: #a5b4fc;
    filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.5));
}

.ge-arena-title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ge-arena-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
    animation: ge-badge-pulse 2s ease-in-out infinite;
}

@keyframes ge-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.ge-arena-subtitle {
    font-size: 12px;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ge-arena-content {
    color: #c7d2fe;
    line-height: 1.7;
}

.ge-arena-content ul,
.ge-arena-content ol {
    margin: 16px 0;
    padding-left: 20px;
}

.ge-arena-content li {
    margin-bottom: 10px;
    padding-left: 8px;
}

.ge-arena-content li::marker {
    color: #6366f1;
}

.ge-arena-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 13px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.ge-arena-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* -------------------------------------------
   New Shortcodes - Responsive Design
   ------------------------------------------- */
@media (max-width: 768px) {
    .ge-lore,
    .ge-side-quest,
    .ge-treasure,
    .ge-puzzle,
    .ge-mentor,
    .ge-level-up,
    .ge-mini-boss,
    .ge-easter-egg {
        padding-left: 20px;
        padding-top: 70px;
    }

    .ge-lore-icon,
    .ge-side-quest-icon,
    .ge-treasure-icon,
    .ge-puzzle-icon,
    .ge-level-up-icon,
    .ge-mini-boss-icon,
    .ge-easter-egg-icon {
        left: 20px;
        top: 20px;
    }

    .ge-mentor {
        padding-left: 20px;
        padding-top: 80px;
    }

    .ge-mentor-avatar {
        left: 20px;
        top: 20px;
    }

    .ge-mentor::before {
        display: none;
    }

    .ge-inventory-grid {
        grid-template-columns: 1fr;
    }

    .ge-combo-items {
        flex-direction: column;
        align-items: stretch;
    }

    .ge-combo-plus {
        text-align: center;
    }

    .ge-arena {
        padding: 20px;
    }
}

/* -------------------------------------------
   New Shortcodes - Animations
   ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .ge-lore,
    .ge-side-quest,
    .ge-treasure,
    .ge-puzzle,
    .ge-mentor,
    .ge-level-up,
    .ge-inventory,
    .ge-mini-boss,
    .ge-easter-egg,
    .ge-combo,
    .ge-arena {
        animation: ge-fade-up 0.4s ease-out both;
    }
}

/* -------------------------------------------
   New Shortcodes - Print Styles
   ------------------------------------------- */
@media print {
    .ge-lore,
    .ge-side-quest,
    .ge-treasure,
    .ge-puzzle,
    .ge-mentor,
    .ge-level-up,
    .ge-inventory,
    .ge-mini-boss,
    .ge-easter-egg,
    .ge-combo,
    .ge-arena {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--ge-gray-200);
    }

    .ge-arena {
        background: #f5f5f5;
        color: #333;
    }

    .ge-arena-content {
        color: #333;
    }

    .ge-treasure::after,
    .ge-easter-egg::before,
    .ge-easter-egg::after,
    .ge-arena::before {
        display: none;
    }
}

/* ===========================================
   DOMAIN-SPECIFIC SHORTCODES (v1.6)
   Signal-Based Content Specialized Components
   =========================================== */

/* -------------------------------------------
   CODE BLOCK - Programming/Development
   IDE-style dark theme with syntax colors
   ------------------------------------------- */

/* Reset all inherited styles for code block */
.ge-code-block,
.ge-code-block * {
    box-sizing: border-box;
}

.ge-code-block pre,
.ge-code-block code {
    font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace !important;
    text-shadow: none !important;
}

.ge-code-block {
    position: relative;
    margin: 24px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
    background: #1e1e2e !important;
}

.ge-code-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ge-code-dots {
    display: flex;
    gap: 6px;
}

.ge-code-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.ge-code-dots span:nth-child(1) { background: #ff5f57; }
.ge-code-dots span:nth-child(2) { background: #ffbd2e; }
.ge-code-dots span:nth-child(3) { background: #28c840; }

.ge-code-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.ge-code-file {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.ge-code-lang {
    font-size: 10px;
    font-weight: 700;
    color: #7c4dff;
    background: rgba(124, 77, 255, 0.15);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Copy Button */
.ge-code-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.ge-code-copy:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.ge-code-copy.copied {
    background: rgba(40, 200, 64, 0.2);
    border-color: rgba(40, 200, 64, 0.4);
    color: #28c840;
}

.ge-code-copy svg {
    width: 14px;
    height: 14px;
}

.ge-copy-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Prism.js Syntax Highlighting Integration */
.ge-code-block pre.ge-code-pre {
    margin: 0 !important;
    padding: 16px !important;
    background: #1e1e2e !important;
    background-color: #1e1e2e !important;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px; /* ~30 satır sonrası scroll */
    border: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;
    position: relative;
}

/* Prism Line Numbers Plugin için padding-left override (satır numaralarına yer aç) */
.ge-code-block pre.ge-code-pre.line-numbers {
    padding-left: 3.8em !important;
}

/* Prism Line Numbers Plugin - Sadece renk override'ları */
.ge-code-block .line-numbers-rows {
    border-right-color: rgba(255, 255, 255, 0.1) !important;
}

.ge-code-block .line-numbers-rows > span::before {
    color: rgba(255, 255, 255, 0.35) !important;
}

.ge-code-block pre.ge-code-pre code {
    display: block;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: 'Fira Code', 'JetBrains Mono', 'SF Mono', Consolas, Monaco, 'Andale Mono', monospace !important;
    color: #e4e4e7 !important;
    background: transparent !important;
    background-color: transparent !important;
    tab-size: 2;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    white-space: pre !important;
    text-shadow: none !important;
}

/* Prism token renkleri - Tomorrow Night teması ile uyumlu */
.ge-code-block .token.comment,
.ge-code-block .token.prolog,
.ge-code-block .token.doctype,
.ge-code-block .token.cdata {
    color: #6a737d !important;
}

.ge-code-block .token.punctuation {
    color: #e4e4e7 !important;
}

.ge-code-block .token.property,
.ge-code-block .token.tag,
.ge-code-block .token.boolean,
.ge-code-block .token.number,
.ge-code-block .token.constant,
.ge-code-block .token.symbol,
.ge-code-block .token.deleted {
    color: #f97583 !important;
}

.ge-code-block .token.selector,
.ge-code-block .token.attr-name,
.ge-code-block .token.string,
.ge-code-block .token.char,
.ge-code-block .token.builtin,
.ge-code-block .token.inserted {
    color: #9ecbff !important;
}

.ge-code-block .token.operator,
.ge-code-block .token.entity,
.ge-code-block .token.url,
.language-css .ge-code-block .token.string,
.style .ge-code-block .token.string {
    color: #79b8ff !important;
}

.ge-code-block .token.atrule,
.ge-code-block .token.attr-value,
.ge-code-block .token.keyword {
    color: #b392f0 !important;
}

.ge-code-block .token.function,
.ge-code-block .token.class-name {
    color: #79b8ff !important;
}

.ge-code-block .token.regex,
.ge-code-block .token.important,
.ge-code-block .token.variable {
    color: #ffab70 !important;
}

/* -------------------------------------------
   VOCABULARY - Language Learning
   Dictionary-style clean design
   ------------------------------------------- */
.ge-vocab {
    margin: 24px 0;
    background: linear-gradient(135deg, #fef7cd 0%, #fef3c7 100%);
    border-radius: 12px;
    border: 1px solid #fbbf24;
    overflow: hidden;
}

.ge-vocab-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
}

.ge-vocab-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ge-vocab-title {
    font-size: 16px;
    font-weight: 700;
    flex: 1;
}

.ge-vocab-langs {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
}

.ge-vocab-list {
    padding: 16px 20px;
}

.ge-vocab-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px dashed #fcd34d;
}

.ge-vocab-item:last-child {
    border-bottom: none;
}

.ge-vocab-term {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #78350f;
}

.ge-vocab-pron {
    font-size: 13px;
    font-weight: 400;
    color: #92400e;
    font-style: italic;
}

.ge-vocab-type {
    font-size: 10px;
    font-weight: 600;
    color: #d97706;
    background: rgba(217, 119, 6, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.ge-vocab-meaning {
    font-size: 15px;
    color: #92400e;
    padding-left: 4px;
}

/* -------------------------------------------
   FORMULA - Mathematics/Statistics
   Elegant mathematical expression display
   ------------------------------------------- */
.ge-formula {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 24px 0;
    padding: 24px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border: 1px solid #7dd3fc;
    border-left: 4px solid #0284c7;
}

.ge-formula-symbol {
    font-size: 48px;
    font-weight: 300;
    color: #0369a1;
    opacity: 0.3;
    font-family: 'Times New Roman', serif;
}

.ge-formula-body {
    flex: 1;
}

.ge-formula-title {
    font-size: 13px;
    font-weight: 700;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.ge-formula-expression {
    font-size: 22px;
    font-family: 'Cambria Math', 'Times New Roman', serif;
    color: #0c4a6e;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #bae6fd;
    display: inline-block;
}

.ge-formula-desc {
    margin-top: 10px;
    font-size: 14px;
    color: #0369a1;
    font-style: italic;
}

/* -------------------------------------------
   RECIPE - Cooking/Culinary
   Recipe card with warm kitchen feel
   ------------------------------------------- */
.ge-recipe {
    margin: 24px 0 !important;
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    display: block !important;
}

.ge-recipe-header {
    padding: 20px 24px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: white !important;
    text-align: center !important;
    border: none !important;
}

.ge-recipe-header-content {
    max-width: 100% !important;
}

.ge-recipe-label {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 3px 10px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    border: none !important;
}

.ge-recipe .ge-recipe-title,
.ge-recipe-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: none !important;
    color: white !important;
    background: transparent !important;
}

.ge-recipe-badges {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.ge-recipe-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    border: none !important;
    color: white !important;
}

.ge-recipe-badge svg {
    flex-shrink: 0 !important;
}

.ge-recipe-diff-easy { background: rgba(134, 239, 172, 0.3) !important; }
.ge-recipe-diff-medium { background: rgba(254, 240, 138, 0.3) !important; }
.ge-recipe-diff-hard { background: rgba(252, 165, 165, 0.3) !important; }

.ge-recipe-body {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    border: none !important;
}

@media (max-width: 700px) {
    .ge-recipe-body {
        grid-template-columns: 1fr !important;
    }
}

.ge-recipe-ingredients {
    padding: 20px !important;
    background: #fffbeb !important;
    border: none !important;
    border-right: 1px solid #fde68a !important;
}

@media (max-width: 700px) {
    .ge-recipe-ingredients {
        border-right: none !important;
        border-bottom: 1px solid #fde68a !important;
    }
}

.ge-recipe-instructions {
    padding: 20px !important;
    background: #fff !important;
    border: none !important;
}

.ge-recipe-section-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #ea580c !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border: none !important;
    border-bottom: 2px solid #fed7aa !important;
    background: transparent !important;
}

.ge-recipe-ingredients-grid {
    display: block !important;
    border: none !important;
}

.ge-recipe .ge-ingredient,
.ge-ingredient {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px dashed #fde68a !important;
    font-size: 14px !important;
    background: transparent !important;
}

.ge-recipe .ge-ingredient:last-child,
.ge-ingredient:last-child {
    border-bottom: none !important;
}

.ge-ingredient-amount {
    font-weight: 700 !important;
    color: #c2410c !important;
    white-space: nowrap !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
}

.ge-ingredient-name {
    color: #78350f !important;
    flex: 1 !important;
}

.ge-ingredient-is-optional {
    opacity: 0.7 !important;
}

.ge-ingredient-is-optional .ge-ingredient-name::after {
    content: ' *' !important;
    color: #f97316 !important;
    font-size: 11px !important;
}

.ge-recipe-instructions-content {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}

.ge-recipe-instructions-content ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    counter-reset: recipe-step !important;
    border: none !important;
}

.ge-recipe-instructions-content ol li {
    position: relative !important;
    padding-left: 36px !important;
    margin-bottom: 12px !important;
    counter-increment: recipe-step !important;
    border: none !important;
    background: transparent !important;
}

.ge-recipe-instructions-content ol li::before {
    content: counter(recipe-step) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ge-recipe-instructions-content ol li:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------
   MUSIC - Musical Notation/Theory
   Elegant staff-inspired design
   ------------------------------------------- */
.ge-music {
    margin: 24px 0;
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border-radius: 12px;
    border: 1px solid #e879f9;
    overflow: hidden;
}

.ge-music-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
}

.ge-music-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.ge-music-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
}

.ge-music-type {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    text-transform: uppercase;
}

.ge-music-key {
    font-size: 12px;
    opacity: 0.9;
}

.ge-music-content {
    padding: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #6b21a8;
    text-align: center;
    letter-spacing: 0.1em;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 8px,
        rgba(168, 85, 247, 0.1) 8px,
        rgba(168, 85, 247, 0.1) 10px
    );
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------
   FINANCE - Business/Financial Metrics
   Dashboard-style professional cards
   ------------------------------------------- */
.ge-finance {
    margin: 24px 0;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ge-finance-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ge-finance-icon {
    width: 24px;
    height: 24px;
    color: #64748b;
}

.ge-finance-title {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ge-finance-value {
    font-size: 36px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ge-finance-trend {
    display: flex;
    align-items: center;
}

.ge-finance-trend svg {
    width: 24px;
    height: 24px;
}

.ge-finance-up .ge-finance-trend { color: #22c55e; }
.ge-finance-down .ge-finance-trend { color: #ef4444; }

.ge-finance-subtitle {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 4px;
}

.ge-finance-desc {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* -------------------------------------------
   TIMELINE - Historical Events
   Elegant vertical timeline
   ------------------------------------------- */
.ge-timeline {
    margin: 24px 0;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    border: 1px solid #6ee7b7;
    padding: 24px;
}

.ge-timeline-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #a7f3d0;
}

.ge-timeline-icon {
    width: 28px;
    height: 28px;
    color: #059669;
}

.ge-timeline-title {
    font-size: 18px;
    font-weight: 700;
    color: #065f46;
}

.ge-timeline-track {
    position: relative;
    padding-left: 32px;
}

.ge-timeline-track::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #059669, #10b981, #34d399);
    border-radius: 3px;
}

.ge-era {
    position: relative;
    padding: 16px 0;
}

.ge-era-marker {
    position: absolute;
    left: -32px;
    top: 20px;
    width: 24px;
    height: 24px;
    background: white;
    border: 4px solid #059669;
    border-radius: 50%;
    z-index: 1;
}

.ge-era-content {
    background: white;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #a7f3d0;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
}

.ge-era-date {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    margin-bottom: 4px;
}

.ge-era-title {
    font-size: 16px;
    font-weight: 700;
    color: #064e3b;
    margin-bottom: 8px;
}

.ge-era-desc {
    font-size: 14px;
    color: #047857;
    line-height: 1.6;
}

/* -------------------------------------------
   EXPERIMENT - Science/Laboratory
   Lab notebook inspired design
   ------------------------------------------- */
.ge-experiment {
    margin: 24px 0;
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border-radius: 12px;
    border: 2px solid #5eead4;
    overflow: hidden;
}

.ge-exp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
}

.ge-exp-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.ge-exp-header-text {
    flex: 1;
}

.ge-exp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.8;
    margin-bottom: 2px;
}

.ge-exp-title {
    font-size: 17px;
    font-weight: 700;
}

.ge-exp-safety {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
}

.ge-exp-safety-low { background: rgba(255, 255, 255, 0.3); }
.ge-exp-safety-medium { background: #fbbf24; color: #78350f; }
.ge-exp-safety-high { background: #ef4444; color: white; }

.ge-exp-hypothesis {
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #99f6e4;
    font-size: 14px;
    color: #0f766e;
    font-style: italic;
}

.ge-exp-content {
    padding: 20px;
    color: #115e59;
    line-height: 1.7;
}

/* -------------------------------------------
   PROJECT - DIY/Crafts
   Compact card design with sections
   ------------------------------------------- */
.ge-project {
    margin: 24px 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.ge-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
    color: white;
}

.ge-project-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ge-project-diy-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    background: #fbbf24;
    color: #78350f;
    border-radius: 4px;
}

.ge-project-diy-badge svg {
    flex-shrink: 0;
}

.ge-project-title {
    font-size: 16px;
    font-weight: 700;
}

.ge-project-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ge-project-diff {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.ge-project-time {
    font-size: 11px;
    opacity: 0.85;
}

.ge-project-body {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    min-height: 0;
}

@media (max-width: 600px) {
    .ge-project-body {
        grid-template-columns: 1fr;
    }
}

.ge-project-materials {
    padding: 14px 16px;
    background: #fefce8;
    border-right: 1px solid #fde047;
}

@media (max-width: 600px) {
    .ge-project-materials {
        border-right: none;
        border-bottom: 1px solid #fde047;
    }
}

.ge-project-steps {
    padding: 14px 16px;
}

.ge-project-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #92400e;
    margin-bottom: 10px;
}

.ge-project-materials-list {
    font-size: 13px;
    line-height: 1.5;
    color: #713f12;
}

.ge-material {
    display: block;
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}

.ge-material::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ca8a04;
    font-size: 12px;
}

.ge-project-steps-content {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

.ge-project-steps-content p:first-child {
    display: none; /* Hide "Yapım Aşamaları:" if present */
}

.ge-project-steps-content ol,
.ge-project-steps-content ul {
    margin: 0;
    padding-left: 22px;
    list-style-type: decimal !important;
}

.ge-project-steps-content li {
    margin-bottom: 6px;
    padding-left: 4px;
}

.ge-project-steps-content li::marker {
    color: #92400e;
    font-weight: 600;
}

/* -------------------------------------------
   HEALTH - Medical/Wellness
   Clean medical/health card design
   ------------------------------------------- */
.ge-health {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    border-radius: 12px;
}

.ge-health-info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
}

.ge-health-warning {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
}

.ge-health-tip {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}

.ge-health-important {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #fde047;
}

.ge-health-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.ge-health-info .ge-health-icon { background: #3b82f6; color: white; }
.ge-health-warning .ge-health-icon { background: #ef4444; color: white; }
.ge-health-tip .ge-health-icon { background: #22c55e; color: white; }
.ge-health-important .ge-health-icon { background: #eab308; color: white; }

.ge-health-icon svg {
    width: 22px;
    height: 22px;
}

.ge-health-body {
    flex: 1;
}

.ge-health-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ge-health-info .ge-health-title { color: #1e40af; }
.ge-health-warning .ge-health-title { color: #991b1b; }
.ge-health-tip .ge-health-title { color: #166534; }
.ge-health-important .ge-health-title { color: #854d0e; }

.ge-health-content {
    font-size: 14px;
    line-height: 1.65;
}

.ge-health-info .ge-health-content { color: #1e3a8a; }
.ge-health-warning .ge-health-content { color: #7f1d1d; }
.ge-health-tip .ge-health-content { color: #14532d; }
.ge-health-important .ge-health-content { color: #713f12; }

/* -------------------------------------------
   LEGAL - Law/Compliance
   Formal document-inspired design
   ------------------------------------------- */
.ge-legal {
    margin: 24px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #475569;
}

.ge-legal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.ge-legal-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #475569;
}

.ge-legal-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.ge-legal-ref {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    padding: 2px 10px;
    background: #e2e8f0;
    border-radius: 4px;
    font-family: monospace;
}

.ge-legal-content {
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
}

.ge-legal-warning {
    border-left-color: #dc2626;
}

.ge-legal-warning .ge-legal-icon { color: #dc2626; }

/* -------------------------------------------
   LOCATION - Geography/Travel
   Map pin card design
   ------------------------------------------- */
.ge-location {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-radius: 12px;
    border: 1px solid #67e8f9;
}

.ge-location-pin {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.ge-location-pin svg {
    width: 24px;
    height: 24px;
    color: white;
    transform: rotate(45deg);
}

.ge-location-body {
    flex: 1;
}

.ge-location-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ge-location-name {
    font-size: 18px;
    font-weight: 700;
    color: #0e7490;
}

.ge-location-country {
    font-size: 14px;
    color: #0891b2;
}

.ge-location-type {
    font-size: 11px;
    font-weight: 600;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.15);
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
}

.ge-location-coords {
    display: block;
    font-size: 12px;
    color: #0891b2;
    font-family: monospace;
    margin-bottom: 10px;
}

.ge-location-desc {
    font-size: 14px;
    color: #155e75;
    line-height: 1.65;
}

/* -------------------------------------------
   Domain Shortcodes - Responsive Design
   ------------------------------------------- */
@media (max-width: 768px) {
    .ge-code-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ge-code-dots {
        width: 100%;
    }

    .ge-formula {
        flex-direction: column;
        text-align: center;
    }

    .ge-formula-symbol {
        font-size: 36px;
    }

    .ge-finance-value {
        font-size: 28px;
    }

    .ge-timeline-track {
        padding-left: 24px;
    }

    .ge-timeline-track::before {
        left: 6px;
    }

    .ge-era-marker {
        left: -24px;
        width: 18px;
        height: 18px;
    }

    .ge-location {
        flex-direction: column;
    }

    .ge-location-pin {
        transform: rotate(0deg);
        border-radius: 50%;
    }

    .ge-location-pin svg {
        transform: rotate(0deg);
    }
}

/* -------------------------------------------
   Domain Shortcodes - Animations
   ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .ge-code-block,
    .ge-vocab,
    .ge-formula,
    .ge-recipe,
    .ge-music,
    .ge-finance,
    .ge-timeline,
    .ge-experiment,
    .ge-project,
    .ge-health,
    .ge-legal,
    .ge-location {
        animation: ge-fade-up 0.4s ease-out both;
    }

    .ge-era {
        animation: ge-slide-in 0.4s ease-out both;
    }

    .ge-era:nth-child(1) { animation-delay: 0s; }
    .ge-era:nth-child(2) { animation-delay: 0.1s; }
    .ge-era:nth-child(3) { animation-delay: 0.2s; }
    .ge-era:nth-child(4) { animation-delay: 0.3s; }
    .ge-era:nth-child(5) { animation-delay: 0.4s; }
}

/* -------------------------------------------
   Domain Shortcodes - Print Styles
   ------------------------------------------- */
@media print {
    .ge-code-block,
    .ge-vocab,
    .ge-formula,
    .ge-recipe,
    .ge-music,
    .ge-finance,
    .ge-timeline,
    .ge-experiment,
    .ge-project,
    .ge-health,
    .ge-legal,
    .ge-location {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .ge-code-block {
        background: #f5f5f5;
    }

    .ge-code-pre {
        background: #f5f5f5;
    }

    .ge-code-content {
        color: #333;
    }
}

/* ===========================================
   INTERACTIVE LEARNING SHORTCODES (v1.7)
   Dopamine-Optimized Engagement Components
   =========================================== */

/* -------------------------------------------
   TRUE/FALSE - Quick Knowledge Check
   ------------------------------------------- */
.ge-truefalse {
    background: var(--ge-white);
    border-radius: var(--ge-radius-lg);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-lg) 0;
    border: 2px solid var(--ge-gray-200);
    transition: all 0.3s ease;
}

.ge-truefalse:hover {
    border-color: var(--ge-primary-soft);
    box-shadow: 0 4px 20px rgba(91, 79, 232, 0.08);
}

.ge-tf-statement {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-md);
    line-height: 1.6;
}

.ge-tf-buttons {
    display: flex;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-sm);
}

.ge-tf-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 2px solid var(--ge-gray-200);
    background: var(--ge-gray-50);
    border-radius: var(--ge-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ge-tf-btn svg {
    width: 20px;
    height: 20px;
}

.ge-tf-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ge-tf-true {
    color: var(--ge-success);
}

.ge-tf-true:hover:not(:disabled) {
    background: var(--ge-success-soft);
    border-color: var(--ge-success);
}

.ge-tf-false {
    color: var(--ge-danger);
}

.ge-tf-false:hover:not(:disabled) {
    background: var(--ge-danger-soft);
    border-color: var(--ge-danger);
}

.ge-tf-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.ge-tf-btn.selected {
    transform: scale(0.98);
}

.ge-tf-btn.correct {
    background: var(--ge-success);
    border-color: var(--ge-success);
    color: white;
}

.ge-tf-btn.incorrect {
    background: var(--ge-danger);
    border-color: var(--ge-danger);
    color: white;
}

.ge-tf-feedback {
    display: none;
    padding: var(--ge-space-md);
    border-radius: var(--ge-radius-md);
    font-weight: 500;
    margin-top: var(--ge-space-sm);
    animation: geFeedbackSlide 0.3s ease;
}

.ge-tf-feedback.show {
    display: block;
}

.ge-tf-feedback.correct {
    background: var(--ge-success-soft);
    color: #0d6b5f;
    border-left: 4px solid var(--ge-success);
}

.ge-tf-feedback.incorrect {
    background: var(--ge-danger-soft);
    color: #b91c1c;
    border-left: 4px solid var(--ge-danger);
}

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

/* -------------------------------------------
   FLASHCARD - Flip Card (Enhanced v1.7)
   ------------------------------------------- */
.ge-flashcard {
    perspective: 1000px;
    cursor: pointer;
    margin: var(--ge-space-lg) 0;
    height: 280px;
}

.ge-fc-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.ge-flashcard.flipped .ge-fc-inner {
    transform: rotateY(180deg);
}

.ge-fc-front,
.ge-fc-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    text-align: center;
    overflow: hidden;
}

/* Front Side Base */
.ge-fc-front {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #9333EA 100%);
    color: white;
    box-shadow: 0 20px 60px rgba(79, 70, 229, 0.4);
}

/* Back Side */
.ge-fc-back {
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
    border: 3px solid var(--ge-primary);
    color: var(--ge-gray-800);
    transform: rotateY(180deg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    justify-content: center;
}

/* Header (category + difficulty) */
.ge-fc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 28px;
}

/* Category Tag */
.ge-fc-category {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ge-fc-back .ge-fc-category {
    background: var(--ge-primary-soft);
    color: var(--ge-primary);
}

/* Difficulty Badge (Text-based) */
.ge-fc-difficulty {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Front side: white/bright badges on dark gradient */
.ge-fc-front .ge-fc-diff-easy {
    background: rgba(255, 255, 255, 0.95);
    color: #059669;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ge-fc-front .ge-fc-diff-medium {
    background: rgba(255, 255, 255, 0.95);
    color: #D97706;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ge-fc-front .ge-fc-diff-hard {
    background: rgba(255, 255, 255, 0.95);
    color: #DC2626;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Back side: colored badges on light background */
.ge-fc-back .ge-fc-diff-easy,
.ge-fc-diff-easy {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.ge-fc-back .ge-fc-diff-medium,
.ge-fc-diff-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.ge-fc-back .ge-fc-diff-hard,
.ge-fc-diff-hard {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Icon */
.ge-fc-icon {
    margin: 16px 0;
}

.ge-fc-icon svg {
    width: 48px;
    height: 48px;
    opacity: 0.9;
}

/* Content */
.ge-fc-content {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.ge-fc-back .ge-fc-content {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ge-gray-700);
    overflow-y: auto;
    max-height: 60%;
    text-align: left;
    line-height: 1.6;
}

/* Hint */
.ge-fc-hint {
    font-size: 0.85rem;
    opacity: 0.75;
    font-style: italic;
    margin-bottom: 8px;
}

/* Back Label (Answer) */
.ge-fc-back-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ge-success);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.ge-fc-back-label svg {
    width: 16px;
    height: 16px;
}

/* Action (Flip button) - Fixed width, centered */
.ge-fc-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 150px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* SVG tap/click icon with bounce animation */
.ge-fc-action svg {
    width: 16px;
    height: 16px;
    animation: tapBounce 1.2s ease-in-out infinite;
}

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

.ge-flashcard:hover .ge-fc-action {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

/* Back side action button */
.ge-fc-back .ge-fc-action {
    background: var(--ge-primary-soft);
    color: var(--ge-primary);
}

.ge-fc-back .ge-fc-action:hover {
    background: rgba(91, 79, 232, 0.15);
}

/* Shimmer Effect */
.ge-fc-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: fcShimmer 3s ease-in-out infinite;
}

@keyframes fcShimmer {
    0% { left: -100%; }
    50% { left: 150%; }
    100% { left: 150%; }
}

/* Hover Effects */
.ge-flashcard:hover .ge-fc-inner {
    transform: scale(1.02) translateY(-4px);
}

.ge-flashcard.flipped:hover .ge-fc-inner {
    transform: rotateY(180deg) scale(1.02) translateY(-4px);
}

.ge-flashcard:hover .ge-fc-front {
    box-shadow: 0 30px 80px rgba(79, 70, 229, 0.5);
}

/* ===== FLASHCARD COLOR VARIANTS ===== */

/* Concept - Blue/Cyan */
.ge-fc-concept .ge-fc-front {
    background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 50%, #14B8A6 100%);
    box-shadow: 0 20px 60px rgba(14, 165, 233, 0.4);
}
.ge-fc-concept:hover .ge-fc-front { box-shadow: 0 30px 80px rgba(14, 165, 233, 0.5); }
.ge-fc-concept .ge-fc-back { border-color: #0EA5E9; }
.ge-fc-concept .ge-fc-back .ge-fc-category { background: rgba(14, 165, 233, 0.1); color: #0EA5E9; }

/* Term - Emerald/Green */
.ge-fc-term .ge-fc-front {
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
    box-shadow: 0 20px 60px rgba(16, 185, 129, 0.4);
}
.ge-fc-term:hover .ge-fc-front { box-shadow: 0 30px 80px rgba(16, 185, 129, 0.5); }
.ge-fc-term .ge-fc-back { border-color: #10B981; }
.ge-fc-term .ge-fc-back .ge-fc-category { background: rgba(16, 185, 129, 0.1); color: #059669; }

/* Question - Purple/Pink */
.ge-fc-question .ge-fc-front {
    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 50%, #D946EF 100%);
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.4);
}
.ge-fc-question:hover .ge-fc-front { box-shadow: 0 30px 80px rgba(139, 92, 246, 0.5); }
.ge-fc-question .ge-fc-back { border-color: #8B5CF6; }
.ge-fc-question .ge-fc-back .ge-fc-category { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }

/* Fact - Orange/Amber */
.ge-fc-fact .ge-fc-front {
    background: linear-gradient(135deg, #F97316 0%, #F59E0B 50%, #EAB308 100%);
    box-shadow: 0 20px 60px rgba(249, 115, 22, 0.4);
}
.ge-fc-fact:hover .ge-fc-front { box-shadow: 0 30px 80px rgba(249, 115, 22, 0.5); }
.ge-fc-fact .ge-fc-back { border-color: #F97316; }
.ge-fc-fact .ge-fc-back .ge-fc-category { background: rgba(249, 115, 22, 0.1); color: #EA580C; }

/* Tip - Yellow/Gold */
.ge-fc-tip .ge-fc-front {
    background: linear-gradient(135deg, #EAB308 0%, #CA8A04 50%, #A16207 100%);
    box-shadow: 0 20px 60px rgba(234, 179, 8, 0.4);
}
.ge-fc-tip:hover .ge-fc-front { box-shadow: 0 30px 80px rgba(234, 179, 8, 0.5); }
.ge-fc-tip .ge-fc-back { border-color: #EAB308; }
.ge-fc-tip .ge-fc-back .ge-fc-category { background: rgba(234, 179, 8, 0.1); color: #CA8A04; }

/* Warning - Red/Rose */
.ge-fc-warning .ge-fc-front {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%);
    box-shadow: 0 20px 60px rgba(239, 68, 68, 0.4);
}
.ge-fc-warning:hover .ge-fc-front { box-shadow: 0 30px 80px rgba(239, 68, 68, 0.5); }
.ge-fc-warning .ge-fc-back { border-color: #EF4444; }
.ge-fc-warning .ge-fc-back .ge-fc-category { background: rgba(239, 68, 68, 0.1); color: #DC2626; }

/* -------------------------------------------
   QUIZ - Multiple Choice
   ------------------------------------------- */
.ge-quiz {
    background: var(--ge-white);
    border-radius: var(--ge-radius-lg);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-lg) 0;
    border: 2px solid var(--ge-gray-200);
}

.ge-quiz-question {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-md);
    line-height: 1.5;
}

.ge-quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-md);
}

.ge-quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ge-gray-50);
    border: 2px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ge-quiz-option:hover {
    background: var(--ge-primary-soft);
    border-color: var(--ge-primary);
}

.ge-quiz-option input[type="radio"] {
    display: none;
}

.ge-quiz-option-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--ge-gray-300);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.ge-quiz-option input:checked ~ .ge-quiz-option-box {
    border-color: var(--ge-primary);
    background: var(--ge-primary);
}

.ge-quiz-option input:checked ~ .ge-quiz-option-box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.ge-quiz-option-text {
    font-size: 1rem;
    color: var(--ge-gray-700);
}

.ge-quiz-option.correct {
    background: var(--ge-success-soft);
    border-color: var(--ge-success);
}

.ge-quiz-option.correct .ge-quiz-option-box {
    background: var(--ge-success);
    border-color: var(--ge-success);
}

.ge-quiz-option.incorrect {
    background: var(--ge-danger-soft);
    border-color: var(--ge-danger);
}

.ge-quiz-option.incorrect .ge-quiz-option-box {
    background: var(--ge-danger);
    border-color: var(--ge-danger);
}

.ge-quiz-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    color: white;
    border: none;
    border-radius: var(--ge-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ge-quiz-check:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(91, 79, 232, 0.3);
}

.ge-quiz-check:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ge-quiz-feedback {
    display: none;
    padding: var(--ge-space-md);
    border-radius: var(--ge-radius-md);
    font-weight: 500;
    margin-top: var(--ge-space-md);
    animation: geFeedbackSlide 0.3s ease;
}

.ge-quiz-feedback.show {
    display: block;
}

.ge-quiz-feedback.correct {
    background: var(--ge-success-soft);
    color: #0d6b5f;
    border-left: 4px solid var(--ge-success);
}

.ge-quiz-feedback.incorrect {
    background: var(--ge-danger-soft);
    color: #b91c1c;
    border-left: 4px solid var(--ge-danger);
}

/* -------------------------------------------
   FILL IN THE BLANK
   ------------------------------------------- */
.ge-fillblank {
    background: var(--ge-white);
    border-radius: var(--ge-radius-lg);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-lg) 0;
    border: 2px solid var(--ge-gray-200);
}

.ge-fb-statement {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-md);
    line-height: 1.6;
}

.ge-fb-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ge-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--ge-space-sm);
}

.ge-fb-input-wrapper {
    display: flex;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-sm);
}

.ge-fb-input {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-md);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.ge-fb-input:focus {
    outline: none;
    border-color: var(--ge-primary);
    box-shadow: 0 0 0 4px var(--ge-primary-soft);
}

.ge-fb-input.correct {
    border-color: var(--ge-success);
    background: var(--ge-success-soft);
}

.ge-fb-input.incorrect {
    border-color: var(--ge-danger);
    background: var(--ge-danger-soft);
}

.ge-fb-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--ge-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    border: none;
    border-radius: var(--ge-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ge-fb-check:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(91, 79, 232, 0.3);
}

.ge-fb-feedback {
    display: none;
    padding: var(--ge-space-md);
    border-radius: var(--ge-radius-md);
    font-weight: 500;
    margin-top: var(--ge-space-sm);
    animation: geFeedbackSlide 0.3s ease;
}

.ge-fb-feedback.show {
    display: block;
}

.ge-fb-feedback.correct {
    background: var(--ge-success-soft);
    color: #0d6b5f;
    border-left: 4px solid var(--ge-success);
}

.ge-fb-feedback.incorrect {
    background: var(--ge-danger-soft);
    color: #b91c1c;
    border-left: 4px solid var(--ge-danger);
}

/* -------------------------------------------
   MATCHING - Interactive Card Matching Game
   ------------------------------------------- */
.ge-matching {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-radius: var(--ge-radius-lg);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-lg) 0;
    border: 2px solid var(--ge-gray-200);
    overflow: hidden;
}

.ge-match-header {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ge-space-md);
}

.ge-match-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--ge-primary) 0%, #7c3aed 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(91, 79, 232, 0.3);
}

.ge-match-badge svg {
    width: 14px;
    height: 14px;
}

.ge-match-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-md);
    text-align: center;
}

.ge-match-game {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 120px;
    position: relative;
    margin-bottom: var(--ge-space-lg);
}

.ge-match-column {
    display: flex;
    flex-direction: column;
    gap: var(--ge-space-md);
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 200px;
}

.ge-match-col-left {
    z-index: 2;
}

.ge-match-col-right {
    z-index: 2;
}

.ge-match-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ge-match-lines line {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: var(--ge-gray-400) !important;
    opacity: 0.8;
}

.ge-match-card {
    padding: 14px 18px;
    border-radius: var(--ge-radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    user-select: none;
    position: relative;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.ge-match-left {
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    color: white;
    border: 2px solid transparent;
}

.ge-match-left:hover:not(.matched):not(.disabled) {
    transform: translateX(6px) scale(1.03);
    box-shadow: 0 6px 20px rgba(91, 79, 232, 0.35);
}

.ge-match-left.selected {
    transform: translateX(12px) scale(1.08);
    box-shadow: 0 0 0 4px #fbbf24, 0 12px 35px rgba(91, 79, 232, 0.6);
    animation: geMatchPulse 0.8s ease-in-out infinite;
    cursor: grab;
    outline: none;
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ge-match-right {
    background: white;
    color: var(--ge-gray-700);
    border: 2px solid var(--ge-gray-200);
}

.ge-match-right:hover:not(.matched):not(.disabled) {
    transform: translateX(-6px) scale(1.03);
    border-color: var(--ge-primary);
    box-shadow: 0 6px 20px rgba(91, 79, 232, 0.2);
}

.ge-match-right.hover-target {
    border-color: var(--ge-primary);
    background: var(--ge-primary-soft);
    transform: translateX(-6px) scale(1.03);
}

.ge-match-right.selected {
    transform: translateX(-12px) scale(1.08);
    border-color: var(--ge-primary);
    background: var(--ge-primary-soft);
    box-shadow: 0 12px 35px rgba(91, 79, 232, 0.5);
    animation: geMatchPulse 0.8s ease-in-out infinite;
    cursor: grab;
    outline: 3px solid var(--ge-primary);
    outline-offset: 2px;
}

/* Matched states - faded look but fully opaque to hide lines behind */
.ge-match-card.matched {
    cursor: default;
    opacity: 1;
    transform: scale(0.96);
    box-shadow: none;
    filter: grayscale(30%) brightness(0.95);
    z-index: 5;
}

.ge-match-left.matched {
    background: #9ca3af;
}

.ge-match-right.matched {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
}

.ge-match-card.disabled {
    pointer-events: none;
}

/* Correct/Incorrect after check */
.ge-match-card.correct {
    border-color: var(--ge-success) !important;
}

.ge-match-left.correct {
    background: var(--ge-success) !important;
}

.ge-match-card.incorrect {
    border-color: var(--ge-danger) !important;
    animation: geMatchShake 0.4s ease;
}

.ge-match-left.incorrect {
    background: var(--ge-danger) !important;
}

/* Progress indicator */
.ge-match-progress {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ge-gray-600);
    margin-bottom: var(--ge-space-md);
    padding: 8px 20px;
    background: white;
    border-radius: 20px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ge-matching {
    text-align: center;
}

.ge-match-count {
    color: var(--ge-primary);
    font-size: 1.25rem;
}

.ge-match-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    color: white;
    border: none;
    border-radius: var(--ge-radius-md);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(91, 79, 232, 0.3);
}

.ge-match-check:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(91, 79, 232, 0.4);
}

.ge-match-check:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ge-match-feedback {
    display: none;
    padding: var(--ge-space-md) var(--ge-space-lg);
    border-radius: var(--ge-radius-md);
    font-weight: 600;
    margin-top: var(--ge-space-lg);
    text-align: center;
    animation: geFeedbackSlide 0.4s ease;
}

.ge-match-feedback.show {
    display: inline-block;
}

.ge-match-feedback.correct {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #047857;
    border: 2px solid #10b981;
}

.ge-match-feedback.incorrect {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #b91c1c;
    border: 2px solid #ef4444;
}

.ge-match-error {
    padding: var(--ge-space-md);
    background: var(--ge-danger-soft);
    color: var(--ge-danger);
    border-radius: var(--ge-radius-md);
    text-align: center;
}

/* Animations */
@keyframes geMatchPulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(91, 79, 232, 0.5); }
    50% { box-shadow: 0 8px 35px rgba(91, 79, 232, 0.7); }
}

@keyframes geMatchShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

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

/* -------------------------------------------
   SORTABLE - Drag to Reorder
   ------------------------------------------- */
.ge-sortable {
    background: var(--ge-white);
    border-radius: var(--ge-radius-lg);
    padding: var(--ge-space-lg);
    margin: var(--ge-space-lg) 0;
    border: 2px solid var(--ge-gray-200);
}

.ge-sort-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-sm);
}

.ge-sort-list {
    display: flex;
    flex-direction: column;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-md);
}

.ge-sort-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ge-gray-50);
    border: 2px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-md);
    cursor: grab;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1),
                background 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
    user-select: none;
    touch-action: none;
}

.ge-sort-item:hover {
    border-color: var(--ge-primary);
    background: var(--ge-primary-soft);
}

.ge-sort-item.dragging {
    opacity: 0.9;
    cursor: grabbing;
    background: var(--ge-primary-soft);
    border-color: var(--ge-primary);
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(91, 79, 232, 0.25);
    z-index: 100;
}

/* Items shifting animation */
.ge-sort-item.shift-down {
    transform: translateY(calc(100% + var(--ge-space-sm)));
}

.ge-sort-item.shift-up {
    transform: translateY(calc(-100% - var(--ge-space-sm)));
}

.ge-sort-item.drag-over {
    border-color: var(--ge-primary);
    background: var(--ge-primary-soft);
    transform: scale(1.02);
}

.ge-sort-handle {
    display: flex;
    align-items: center;
    color: var(--ge-gray-400);
}

.ge-sort-handle svg {
    width: 20px;
    height: 20px;
}

.ge-sort-text {
    flex: 1;
    font-size: 1rem;
    color: var(--ge-gray-700);
}

.ge-sort-item.correct {
    background: var(--ge-success-soft);
    border-color: var(--ge-success);
}

.ge-sort-item.incorrect {
    background: var(--ge-danger-soft);
    border-color: var(--ge-danger);
}

.ge-sort-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    color: white;
    border: none;
    border-radius: var(--ge-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ge-sort-check:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(91, 79, 232, 0.3);
}

.ge-sort-feedback {
    display: none;
    padding: var(--ge-space-md);
    border-radius: var(--ge-radius-md);
    font-weight: 500;
    margin-top: var(--ge-space-md);
    animation: geFeedbackSlide 0.3s ease;
}

.ge-sort-feedback.show {
    display: block;
}

.ge-sort-feedback.correct {
    background: var(--ge-success-soft);
    color: #0d6b5f;
    border-left: 4px solid var(--ge-success);
}

.ge-sort-feedback.incorrect {
    background: var(--ge-danger-soft);
    color: #b91c1c;
    border-left: 4px solid var(--ge-danger);
}

/* Sortable Header & Badge */
.ge-sort-header {
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-md);
}

.ge-sort-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--ge-primary) 0%, #7c3aed 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(91, 79, 232, 0.3);
}

.ge-sort-badge svg {
    width: 14px;
    height: 14px;
}

/* Sort Item Number */
.ge-sort-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--ge-gray-100) 0%, var(--ge-gray-200) 100%);
    color: var(--ge-gray-500);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.ge-sort-item:hover .ge-sort-number {
    background: linear-gradient(135deg, var(--ge-primary-soft) 0%, #e9d5ff 100%);
    color: var(--ge-primary);
}

.ge-sort-item.dragging .ge-sort-number {
    background: var(--ge-primary);
    color: white;
    transform: scale(1.1);
}

.ge-sort-item.correct .ge-sort-number {
    background: var(--ge-success);
    color: white;
}

.ge-sort-item.incorrect .ge-sort-number {
    background: var(--ge-danger);
    color: white;
}

/* Sortable Drag Instruction - Always visible */
.ge-sort-mobile-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--ge-primary-soft) 0%, rgba(124, 58, 237, 0.1) 100%);
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ge-primary);
    margin-bottom: var(--ge-space-md);
    border: 1px solid rgba(91, 79, 232, 0.2);
    box-shadow: 0 2px 8px rgba(91, 79, 232, 0.1);
}

.ge-sort-mobile-hint svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Sortable Placeholder - Shows where item will drop */
.ge-sort-placeholder {
    height: 60px;
    margin: 6px 0;
    border: 2px dashed var(--ge-primary);
    border-radius: var(--ge-radius-md);
    background: linear-gradient(135deg, var(--ge-primary-soft) 0%, rgba(124, 58, 237, 0.08) 100%);
    opacity: 0.8;
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
}

.ge-sort-placeholder::after {
    content: '↕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: var(--ge-primary);
    opacity: 0.6;
}

/* Drop indicators */
.ge-sort-item.drop-above {
    margin-top: 70px;
    transition: margin 0.2s ease;
}

.ge-sort-item.drop-below {
    margin-bottom: 70px;
    transition: margin 0.2s ease;
}

/* -------------------------------------------
   Interactive Components - Mobile Responsive
   ------------------------------------------- */
@media (max-width: 768px) {
    .ge-tf-buttons {
        flex-direction: column;
    }

    .ge-flashcard {
        height: 260px;
    }

    .ge-fc-front,
    .ge-fc-back {
        padding: 20px;
    }

    .ge-fc-icon svg {
        width: 36px;
        height: 36px;
    }

    .ge-fc-content {
        font-size: 1.1rem;
    }

    .ge-fc-back .ge-fc-content {
        font-size: 1rem;
    }

    .ge-fc-category {
        font-size: 0.7rem;
        padding: 3px 10px;
    }

    .ge-match-game {
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
        justify-content: center;
    }

    .ge-match-column {
        min-width: 90px;
        max-width: 140px;
        flex: 1;
    }

    .ge-match-card {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .ge-match-lines {
        display: block;
    }

    .ge-match-lines line {
        stroke-width: 2;
    }

    .ge-match-left:hover:not(.matched):not(.disabled),
    .ge-match-left.selected {
        transform: translateX(4px) scale(1.02);
    }

    .ge-match-right:hover:not(.matched):not(.disabled),
    .ge-match-right.hover-target,
    .ge-match-right.selected {
        transform: translateX(-4px) scale(1.02);
    }

    .ge-quiz-option {
        padding: 12px 14px;
    }
}

/* ===========================================
   SCENARIO - Decision-Based Learning (v1.8)
   =========================================== */
.ge-scenario {
    background: var(--ge-white);
    border: 1px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-xl);
    padding: var(--ge-space-xl);
    margin: var(--ge-space-lg) 0;
    box-shadow: var(--ge-shadow-sm);
}

.ge-scenario-header {
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-md);
}

.ge-scenario-icon {
    width: 24px;
    height: 24px;
    color: var(--ge-primary);
}

.ge-scenario-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ge-scenario-context {
    background: var(--ge-gray-50);
    border-left: 3px solid var(--ge-primary);
    padding: var(--ge-space-md);
    border-radius: var(--ge-radius-md);
    margin-bottom: var(--ge-space-md);
    font-size: 0.9rem;
    color: var(--ge-gray-600);
    font-style: italic;
}

.ge-scenario-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-md);
    line-height: 1.5;
}

.ge-scenario-instruction {
    font-size: 0.8rem;
    color: var(--ge-gray-500);
    margin-bottom: var(--ge-space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ge-scenario-options {
    display: flex;
    flex-direction: column;
    gap: var(--ge-space-sm);
}

.ge-scenario-option {
    display: flex;
    align-items: center;
    gap: var(--ge-space-md);
    padding: var(--ge-space-md) var(--ge-space-lg);
    background: var(--ge-gray-50);
    border: 2px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.ge-scenario-option:hover:not(:disabled) {
    border-color: var(--ge-primary);
    background: var(--ge-primary-soft);
    transform: translateX(4px);
}

.ge-scenario-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ge-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ge-gray-600);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ge-scenario-option:hover:not(:disabled) .ge-scenario-letter {
    background: var(--ge-primary);
    color: white;
}

.ge-scenario-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--ge-gray-700);
}

/* Answered states */
.ge-scenario.answered .ge-scenario-option {
    cursor: default;
    opacity: 0.7;
}

.ge-scenario.answered .ge-scenario-option.selected {
    opacity: 1;
    border-width: 2px;
}

.ge-scenario.answered .ge-scenario-option.selected.score-best {
    border-color: var(--ge-success);
    background: var(--ge-success-soft);
}

.ge-scenario.answered .ge-scenario-option.selected.score-best .ge-scenario-letter {
    background: var(--ge-success);
    color: white;
}

.ge-scenario.answered .ge-scenario-option.selected.score-good {
    border-color: var(--ge-warning);
    background: var(--ge-warning-soft);
}

.ge-scenario.answered .ge-scenario-option.selected.score-good .ge-scenario-letter {
    background: var(--ge-warning);
    color: white;
}

.ge-scenario.answered .ge-scenario-option.selected.score-bad {
    border-color: var(--ge-danger);
    background: var(--ge-danger-soft);
}

.ge-scenario.answered .ge-scenario-option.selected.score-bad .ge-scenario-letter {
    background: var(--ge-danger);
    color: white;
}

/* Show best option highlight */
.ge-scenario.answered .ge-scenario-option.show-best:not(.selected) {
    opacity: 1;
    border-color: var(--ge-success);
    border-style: dashed;
}

.ge-scenario.answered .ge-scenario-option.show-best:not(.selected) .ge-scenario-letter {
    background: var(--ge-success);
    color: white;
}

/* Feedback */
.ge-scenario-feedback {
    display: none;
    margin-top: var(--ge-space-lg);
    padding: var(--ge-space-md) var(--ge-space-lg);
    border-radius: var(--ge-radius-lg);
    font-size: 0.95rem;
    animation: geFadeSlideIn 0.3s ease;
}

.ge-scenario-feedback.show {
    display: block;
}

.ge-scenario-feedback.best {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.05));
    border: 1px solid var(--ge-success);
    color: #0d7377;
}

.ge-scenario-feedback.good {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid var(--ge-warning);
    color: #b45309;
}

.ge-scenario-feedback.bad {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border: 1px solid var(--ge-danger);
    color: #b91c1c;
}

/* ===========================================
   ESTIMATE - Number Guessing (v1.8)
   =========================================== */
.ge-estimate {
    background: var(--ge-white);
    border: 1px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-xl);
    padding: var(--ge-space-xl);
    margin: var(--ge-space-lg) 0;
    box-shadow: var(--ge-shadow-sm);
}

.ge-estimate-header {
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-md);
}

.ge-estimate-icon {
    width: 24px;
    height: 24px;
    color: var(--ge-warning);
}

.ge-estimate-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--ge-secondary-start), var(--ge-secondary-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ge-estimate-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ge-gray-800);
    margin-bottom: var(--ge-space-md);
    line-height: 1.5;
}

.ge-estimate-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--ge-space-sm);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: var(--ge-space-sm) var(--ge-space-md);
    border-radius: var(--ge-radius-md);
    font-size: 0.9rem;
    color: var(--ge-gray-600);
    margin-bottom: var(--ge-space-md);
    border-left: 3px solid var(--ge-primary);
}

.ge-hint-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--ge-primary) 0%, #7c3aed 100%);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.ge-hint-badge svg {
    width: 12px;
    height: 12px;
}

.ge-hint-text {
    flex: 1;
    line-height: 1.5;
    padding-top: 2px;
}

.ge-estimate-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-md);
}

.ge-estimate-input {
    flex: 1;
    max-width: 200px;
    padding: var(--ge-space-md);
    border: 2px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-lg);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
}

.ge-estimate-input:focus {
    outline: none;
    border-color: var(--ge-primary);
    box-shadow: 0 0 0 3px var(--ge-primary-soft);
}

.ge-estimate-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ge-gray-500);
}

/* Thermometer */
.ge-estimate-thermometer {
    height: 12px;
    background: var(--ge-gray-200);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: var(--ge-space-lg);
}

.ge-estimate-temp-bar {
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width 0.5s ease, background 0.3s ease;
}

.ge-estimate.exact .ge-estimate-temp-bar {
    background: linear-gradient(90deg, #10b981, #14b8a6);
}

.ge-estimate.hot .ge-estimate-temp-bar {
    background: linear-gradient(90deg, #f97316, #ef4444);
}

.ge-estimate.warm .ge-estimate-temp-bar {
    background: linear-gradient(90deg, #fbbf24, #f97316);
}

.ge-estimate.cold .ge-estimate-temp-bar {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.ge-estimate.freezing .ge-estimate-temp-bar {
    background: linear-gradient(90deg, #a5b4fc, #6366f1);
}

/* Check button */
.ge-estimate-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ge-space-md) var(--ge-space-xl);
    background: linear-gradient(135deg, var(--ge-secondary-start), var(--ge-secondary-end));
    color: white;
    border: none;
    border-radius: var(--ge-radius-lg);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ge-estimate-check:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.ge-estimate-check:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Feedback */
.ge-estimate-feedback {
    display: none;
    margin-top: var(--ge-space-lg);
    padding: var(--ge-space-md) var(--ge-space-lg);
    border-radius: var(--ge-radius-lg);
    font-size: 1rem;
    font-weight: 500;
    animation: geFadeSlideIn 0.3s ease;
}

.ge-estimate-feedback.show {
    display: block;
}

.ge-estimate-feedback.exact {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(20, 184, 166, 0.05));
    border: 2px solid var(--ge-success);
    color: #0d7377;
}

.ge-estimate-feedback.hot {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.05));
    border: 1px solid #f97316;
    color: #c2410c;
}

.ge-estimate-feedback.warm {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid var(--ge-warning);
    color: #b45309;
}

.ge-estimate-feedback.cold {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.05));
    border: 1px solid #3b82f6;
    color: #1d4ed8;
}

.ge-estimate-feedback.freezing {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(165, 180, 252, 0.05));
    border: 1px solid #6366f1;
    color: #4338ca;
}

/* ===========================================
   CATEGORIZE - Drag to Categories (v1.8)
   =========================================== */
.ge-categorize {
    background: var(--ge-white);
    border: 1px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-xl);
    padding: var(--ge-space-xl);
    margin: var(--ge-space-lg) 0;
    box-shadow: var(--ge-shadow-sm);
}

.ge-categorize-header {
    display: flex;
    align-items: center;
    gap: var(--ge-space-sm);
    margin-bottom: var(--ge-space-md);
}

.ge-categorize-icon {
    width: 24px;
    height: 24px;
    color: var(--ge-primary);
}

.ge-categorize-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ge-categorize-instruction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ge-primary);
    background: linear-gradient(135deg, var(--ge-primary-soft) 0%, rgba(124, 58, 237, 0.1) 100%);
    padding: 10px 16px;
    border-radius: 25px;
    margin-bottom: var(--ge-space-lg);
    border: 1px solid rgba(91, 79, 232, 0.2);
    box-shadow: 0 2px 8px rgba(91, 79, 232, 0.1);
}

/* Items pool */
.ge-categorize-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ge-space-sm);
    padding: var(--ge-space-lg);
    background: var(--ge-gray-50);
    border: 2px dashed var(--ge-gray-300);
    border-radius: var(--ge-radius-lg);
    min-height: 60px;
    margin-bottom: var(--ge-space-lg);
    transition: all 0.2s ease;
}

.ge-categorize-items.drag-over {
    background: var(--ge-primary-soft);
    border-color: var(--ge-primary);
}

.ge-cat-item {
    display: inline-flex;
    align-items: center;
    padding: var(--ge-space-sm) var(--ge-space-md);
    background: var(--ge-white);
    border: 2px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ge-gray-700);
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
    touch-action: none; /* Enable touch dragging on mobile */
}

.ge-cat-item:hover:not(.correct):not(.incorrect) {
    border-color: var(--ge-primary);
    background: var(--ge-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--ge-shadow-md);
}

.ge-cat-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.ge-cat-item.placed {
    background: linear-gradient(135deg, var(--ge-primary-soft), rgba(124, 58, 237, 0.05));
    border-color: var(--ge-primary);
}

.ge-cat-item.correct {
    background: var(--ge-success-soft);
    border-color: var(--ge-success);
    color: #0d7377;
}

.ge-cat-item.incorrect {
    background: var(--ge-danger-soft);
    border-color: var(--ge-danger);
    color: #b91c1c;
}

/* Category zones */
.ge-categorize-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ge-space-md);
    margin-bottom: var(--ge-space-lg);
}

.ge-cat-zone {
    border: 2px solid var(--ge-gray-200);
    border-radius: var(--ge-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.ge-cat-zone.drag-over {
    border-color: var(--ge-primary);
    background: var(--ge-primary-soft);
    box-shadow: 0 0 0 3px var(--ge-primary-glow);
}

.ge-cat-zone-header {
    padding: var(--ge-space-md);
    background: linear-gradient(135deg, var(--ge-gray-100), var(--ge-gray-50));
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ge-gray-700);
    text-align: center;
    border-bottom: 1px solid var(--ge-gray-200);
}

.ge-cat-zone-items {
    min-height: 80px;
    padding: var(--ge-space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ge-space-sm);
    align-content: flex-start;
}

/* Check button */
.ge-categorize-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ge-space-md) var(--ge-space-xl);
    background: linear-gradient(135deg, var(--ge-primary-start), var(--ge-primary-end));
    color: white;
    border: none;
    border-radius: var(--ge-radius-lg);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ge-categorize-check:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--ge-primary-glow);
}

.ge-categorize-check:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Feedback */
.ge-categorize-feedback {
    display: none;
    margin-top: var(--ge-space-lg);
    padding: var(--ge-space-md) var(--ge-space-lg);
    border-radius: var(--ge-radius-lg);
    font-size: 0.95rem;
    animation: geFadeSlideIn 0.3s ease;
}

.ge-categorize-feedback.show {
    display: block;
}

.ge-categorize-feedback.correct {
    background: linear-gradient(135deg, var(--ge-success-soft), rgba(20, 184, 166, 0.05));
    border: 1px solid var(--ge-success);
    color: #0d7377;
}

.ge-categorize-feedback.incorrect {
    background: linear-gradient(135deg, var(--ge-danger-soft), rgba(239, 68, 68, 0.05));
    border: 1px solid var(--ge-danger);
    color: #b91c1c;
}

/* ===========================================
   Advanced Shortcodes - Mobile Responsive
   =========================================== */
@media (max-width: 640px) {
    .ge-scenario,
    .ge-estimate,
    .ge-categorize {
        padding: var(--ge-space-lg);
        margin: var(--ge-space-md) 0;
    }

    .ge-scenario-question,
    .ge-estimate-question {
        font-size: 1rem;
    }

    .ge-scenario-option {
        padding: var(--ge-space-sm) var(--ge-space-md);
    }

    .ge-scenario-letter {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .ge-estimate-input {
        max-width: 150px;
        font-size: 1rem;
    }

    .ge-categorize-zones {
        grid-template-columns: 1fr;
    }

    .ge-cat-item {
        font-size: 0.85rem;
        padding: var(--ge-space-xs) var(--ge-space-sm);
    }
}