/* Concept 1 Styles - Updated for Cobalt Blue and Classic Red */
        :root {
            --primary-cobalt: #004797; /* Dark Cobalt Blue */
            --accent-red: #CC0000; /* Classic Warning Red */
            --dark-navy: #2c3e50;
            --off-white: #f8f9fa;
            --success-green: #27ae60;
            --light-blue: #e6f0ff; /* Light Blue background for phase boxes */
            --light-red-key: #ffe6e6; /* Light Red background for emphasis */
            --light-success: #d4edda;
            --light-gray-warning: #f0f0f0; 
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            max-width: 950px;
            margin: 0 auto;
            padding: 20px;
            background: var(--off-white);
            color: var(--dark-navy);
            font-size: 16px; 
        }

        /* HEADER */
        .header-c1 {
            background: white;
            padding: 30px;
            border-bottom: 5px solid var(--primary-cobalt); /* Primary Color Line */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            text-align: left;
            margin-bottom: 30px;
            border-radius: 4px;
        }
        
        .module-title-c1 {
            color: var(--dark-navy);
            font-size: 2.2em;
            margin: 0 0 10px;
            font-weight: 700;
        }
        
        .module-subtitle-c1 {
            font-size: 1.1em;
            margin: 0;
            color: #555;
            font-style: italic;
        }

        /* SECTIONS & HEADINGS */
        .section-c1 {
            background: white;
            padding: 35px;
            margin-bottom: 25px;
            border-radius: 8px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
        }

        .section-header-c1 {
            color: var(--primary-cobalt); /* Primary Color for Section Headers */
            border-bottom: 4px solid var(--accent-red); /* Accent Color Line */
            padding-bottom: 12px;
            margin-top: 0;
            font-size: 2em;
            font-weight: 600;
        }
        
        h3 {
            color: var(--dark-navy);
            margin-top: 30px;
            font-size: 1.5em;
        }
        
        h4 {
            color: var(--primary-cobalt); /* Primary Color for sub-headers */
            margin-top: 25px;
            font-size: 1.2em;
        }

        /* BOXES - REMOVED LEFT BORDERS */
        .phase-box-c1 {
            background: var(--light-blue); /* Light Blue background */
            /* border-left removed */
            padding: 20px;
            margin: 20px 0;
            border-radius: 6px;
        }

        .rep-tip-c1 {
            background: var(--light-success);
            /* border-left removed */
            padding: 20px;
            margin: 25px 0;
            border-radius: 6px;
        }

        .disaster-box-c1 {
            /* WARNING BOXES: Reduced to 2px border, maintains gray background */
            background: var(--light-gray-warning); 
            border: 2px solid var(--accent-red);
            padding: 20px;
            margin: 25px 0;
            border-radius: 8px;
            color: var(--accent-red);
        }
        
        .disaster-box-c1 h3, .disaster-box-c1 h4, .disaster-box-c1 p {
             color: var(--accent-red);
        }

        .key-term-c1 {
            background: var(--light-red-key); 
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: 600;
            color: var(--dark-navy);
        }
        
        .caps {
            text-transform: uppercase;
            font-weight: bold;
            color: var(--accent-red); 
        }

        .emphasis {
            background: var(--light-red-key); 
            padding: 2px 6px;
            font-weight: bold;
            color: var(--dark-navy);
        }

        /* Lists and Tables */
        ul, ol { margin-left: 30px; margin-bottom: 20px; }
        li { margin-bottom: 8px; line-height: 1.5; }
        table { width: 100%; border-collapse: collapse; margin: 25px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        th { background: var(--primary-cobalt); color: white; font-weight: bold; }
        tr:nth-child(even) { background: #f0f8ff; } 
        tr:hover { background: #fff5f5; }

        .callout-c1 {
            background: #e8f4f4;
            /* border-left removed */
            padding: 20px;
            margin: 20px 0;
            border-radius: 6px;
        }
        
        .timeline-c1 {
            /* Timeline now uses Primary Cobalt border to signify structure/flow, not warning */
            border-left: 4px solid var(--primary-cobalt); 
            padding-left: 15px;
            margin: 20px 0;
        }

        .timeline-item-c1 {
            margin-bottom: 20px;
        }
        
        .timeline-item-c1 h4 {
            /* Timeline headers match the border color */
            color: var(--primary-cobalt); 
        }

        footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 3px solid var(--primary-cobalt);
            text-align: center;
            color: #7f8c8d;
        }
        
        /* ================================================= */
        /* == MOBILE RESPONSIVE STYLES (Screen Max 768px) == */
        /* ================================================= */
        @media (max-width: 768px) {
            body {
                padding: 10px;
                font-size: 15px; 
            }
            
            .header-c1 {
                padding: 20px 15px;
                margin-bottom: 20px;
            }
            
            .module-title-c1 {
                font-size: 1.8em; 
            }
            
            .section-header-c1 {
                font-size: 1.6em; 
                padding-bottom: 8px;
                border-bottom-width: 3px;
            }
            
            h3 {
                font-size: 1.3em; 
            }
            
            /* Table optimization for mobile */
            table, thead, tbody, th, td, tr { display: block; }
            thead tr { position: absolute; top: -9999px; left: -9999px; }
            tr { border: 1px solid #ccc; margin-bottom: 10px; }
            td {
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%; 
                text-align: right;
            }
            
            td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
                color: var(--primary-cobalt); 
            }
            
            td:nth-of-type(1):before { content: "Phase"; }
            td:nth-of-type(2):before { content: "Patients"; }
            td:nth-of-type(3):before { content: "Cost"; }
            td:nth-of-type(4):before { content: "Risk"; }
            
            .section-c1 { padding: 20px; }
            .phase-box-c1, .rep-tip-c1, .disaster-box-c1, .callout-c1 { padding: 15px; }
            ul, ol { margin-left: 20px; }
        }

/* Custom styles needed for presentation examples not typically covered by utility classes */
        .traffic-light.green { background-color: var(--light-success); border-left: 4px solid var(--success-green); padding: 5px; border-radius: 4px; display: inline-block; color: var(--success-green); font-weight: bold; }
        .traffic-light.red { background-color: var(--light-red-key); border-left: 4px solid var(--accent-red); padding: 5px; border-radius: 4px; display: inline-block; color: var(--accent-red); font-weight: bold; }
        .traffic-light.yellow { background-color: #fff3cd; border-left: 4px solid #daa520; padding: 5px; border-radius: 4px; display: inline-block; color: #daa520; font-weight: bold; }
        .realworld-c1 { margin-bottom: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 6px; }
        .risky { color: var(--accent-red); font-weight: bold; }
        .good { color: var(--success-green); font-weight: bold; }


/* Custom Medical Icons - Extracted from clinical_concepts_hub.html */

/* --- Styles for Consistent Module Icon Display --- */

.module-icon {
    width: 2.2em;
    height: 2.2em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-top: 5px;
    display: inline-block; /* Added for standalone use outside of flex */
}

.icon-regulatory {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23CC0000" stroke-width="2"><path d="M14 12h6v8l-2 4h-2l-2-4v-8z"/><path d="M12 12h10"/><rect x="28" y="8" width="12" height="16" rx="1"/><path d="M30 12h8"/><path d="M30 16h8"/><path d="M30 20h6"/><circle cx="17" cy="28" r="2" fill="%23CC0000"/><path d="M14 35h20"/><path d="M16 38h16"/></svg>');
}

.icon-science {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23CC0000" stroke-width="2"><ellipse cx="24" cy="20" rx="18" ry="8" stroke="%230066CC" fill="none"/><circle cx="12" cy="16" r="3" fill="%23008844"/><circle cx="36" cy="16" r="3" fill="%23008844"/><circle cx="24" cy="24" r="3" fill="%23FF6600"/><path d="M15 16l6 5"/><path d="M33 16l-6 5"/><path d="M20 32c4-2 8-2 12 0"/><path d="M18 34c6-1 12-1 18 0"/><path d="M16 36c8 0 16 0 24 0"/></svg>');
}

.icon-clinical-trials {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23CC0000" stroke-width="2"><rect x="6" y="6" width="36" height="32" rx="2"/><path d="M12 32l6-8 6 4 8-12 8 6"/><circle cx="18" cy="24" r="2" fill="%23008844"/><circle cx="24" cy="20" r="2" fill="%23008844"/><circle cx="32" cy="14" r="2" fill="%23008844"/><path d="M38 8h4v4"/><path d="M40 8v4h-4"/></svg>');
}

.icon-endpoints {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23FF6600" stroke-width="2"><rect x="8" y="8" width="32" height="32" rx="2"/><path d="M14 16h20"/><path d="M14 20h16"/><path d="M14 24h18"/><circle cx="34" cy="16" r="2" fill="%23008844"/><circle cx="30" cy="20" r="2" fill="%23008844"/><circle cx="32" cy="24" r="2" fill="%23008844"/><path d="M14 30h8"/><rect x="24" y="28" width="12" height="6" fill="%23f8f9fa"/></svg>');
}

.icon-injection {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23FF6600" stroke-width="2"><path d="M18 12c2-2 6-2 8 0v8c0 2-2 4-4 4s-4-2-4-4v-8z"/><circle cx="22" cy="26" r="6"/><path d="M16 26h12"/><path d="M22 20v12"/><path d="M30 14h8l4 4-4 4h-8"/><circle cx="34" cy="18" r="1" fill="%230066CC"/><path d="M32 16l6 4"/><ellipse cx="22" cy="26" rx="4" ry="2" fill="%230066CC" opacity="0.5"/></svg>');
}

.icon-safety {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23FF6600" stroke-width="2"><path d="M24 4l-12 4v12c0 8 12 16 12 16s12-8 12-16V8l-12-4z"/><path d="M18 22l4 4 8-8"/><circle cx="38" cy="38" r="6" fill="%23CC0000"/><path d="M35 38h6"/><path d="M38 35v6"/></svg>');
}

.icon-clinical-dialogue {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23008844" stroke-width="2"><circle cx="16" cy="14" r="6"/><path d="M8 32v-4c0-2 2-4 4-4h8c2 0 4 2 4 4v4"/><rect x="10" y="10" width="12" height="6" rx="3" fill="%230066CC"/><circle cx="32" cy="14" r="6"/><path d="M24 32v-4c0-2 2-4 4-4h8c2 0 4 2 4 4v4"/><rect x="26" y="10" width="12" height="6" rx="3" fill="%230066CC"/><path d="M12 36c2-1 4-1 6 0"/><path d="M28 36c2-1 4-1 6 0"/></svg>');
}

.icon-objections {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23008844" stroke-width="2"><circle cx="18" cy="24" r="14"/><path d="M14 18c0-4 4-6 8-6s8 2 8 6c0 2-2 4-4 4h-2"/><circle cx="18" cy="32" r="1" fill="%23008844"/><path d="M30 12l8 8-8 8"/><circle cx="38" cy="20" r="1" fill="%23008844"/></svg>');
}

.icon-implementation {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23008844" stroke-width="2"><path d="M12 18c2-4 6-6 10-6s8 2 10 6v8c0 4-4 8-10 8s-10-4-10-8v-8z"/><circle cx="22" cy="22" r="4"/><path d="M18 22h8"/><path d="M22 18v8"/><path d="M32 14h8l4 2-2 4-6-2h-4"/><circle cx="36" cy="16" r="1" fill="%230066CC"/><path d="M34 14l8 4"/><path d="M28 28l8 8"/><circle cx="36" cy="36" r="2" fill="%23008844"/></svg>');
}

.icon-excellence {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23008844" stroke-width="2"><circle cx="24" cy="14" r="8"/><path d="M12 36v-6c0-4 4-8 8-8h8c4 0 8 4 8 8v6"/><rect x="16" y="8" width="16" height="8" rx="4" fill="%230066CC"/><path d="M20 24c-2 2-2 6 0 8s6 2 8 0"/><circle cx="18" cy="30" r="2"/><circle cx="30" cy="30" r="2"/><path d="M18 30c2 2 6 2 8 0 2-2 2-6 0-8"/><polygon points="24,4 26,8 30,8 27,11 28,15 24,13 20,15 21,11 18,8 22,8" fill="%23FF6600"/></svg>');
}

.icon-patient-care {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%23008844" stroke-width="2"><path d="M24 38c8-6 16-12 16-20 0-6-4-10-8-10-2 0-4 1-6 3-2-2-4-3-6-3-4 0-8 4-8 10 0 8 8 14 16 20z"/><path d="M20 20h8"/><path d="M24 16v8"/><circle cx="38" cy="12" r="6" fill="%23CC0000"/><path d="M35 12h6"/><path d="M38 9v6"/></svg>');
}

.icon-data-tables {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%230066CC" stroke-width="2"><rect x="8" y="8" width="32" height="32" rx="2"/><path d="M8 16h32"/><path d="M8 24h32"/><path d="M8 32h32"/><path d="M20 8v32"/><circle cx="14" cy="20" r="1" fill="%23008844"/><circle cx="14" cy="28" r="1" fill="%23FF6600"/><circle cx="14" cy="36" r="1" fill="%23CC0000"/></svg>');
}

.icon-glossary {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%230066CC" stroke-width="2"><rect x="12" y="6" width="24" height="36" rx="2"/><path d="M16 14h16"/><path d="M16 18h12"/><path d="M16 22h14"/><path d="M16 26h10"/><circle cx="32" cy="30" r="6"/><path d="M29 27l6 6"/></svg>');
}

.icon-call-prep {
    /* No explicit code found for icon-call-prep, but you included it in a quick-access item */
    /* If you need an icon for a checklist/preparation, this one is close: */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%230066CC" stroke-width="2"><rect x="10" y="6" width="28" height="36" rx="2"/><path d="M14 16l2 2 4-4"/><path d="M14 24l2 2 4-4"/><path d="M14 32l2 2 4-4"/><path d="M24 16h10"/><path d="M24 24h10"/><path d="M24 32h10"/></svg>');
}

.icon-compliance {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="%230066CC" stroke-width="2"><rect x="10" y="8" width="28" height="32" rx="2"/><path d="M18 16h12"/><path d="M18 20h8"/><path d="M18 24h10"/><circle cx="32" cy="32" r="8" fill="%23CC0000"/><path d="M28 32h8"/><path d="M32 28v8"/></svg>');
}