/* ============================================================================
   IAAI E-LEARNING MODULE STYLES
   ============================================================================
   
   Module: Botulinum Toxin - Upper Face Treatment
   Version: 2.0 (External CSS)
   Purpose: Visual enhancement styles for e-learning slides
   
   This stylesheet provides visual components for:
   - Color-coded cards and containers
   - Treatment zone displays
   - Comparison layouts
   - Statistical displays
   - Safety alerts and warnings
   - Interactive elements
   - Step sequences and guides
   
   ============================================================================ */

/* ============================================================================
   TABLE OF CONTENTS
   ============================================================================
   
   1. Base Styles & Layout
   2. Muscle Anatomy Cards
   3. Treatment Zone Cards
   4. Comparison Layouts
   5. Statistical Displays
   6. Mapping Principles
   7. Safety Elements
   8. Glabella Protocol
   9. Crow's Feet Technique
   10. Utility Classes
   
   ============================================================================ */

/* ============================================================================
   1. BASE STYLES & LAYOUT
   ============================================================================ */

   .anatomy-overview,
   .zones-overview,
   .mapping-principles,
   .glabella-protocol,
   .crowsfeet-protocol {
     padding: 20px;
     max-width: 100%;
   }
   
   .intro-text,
   .section-intro,
   .intro,
   .protocol-intro {
     font-size: 1.1em;
     color: #555;
     margin-bottom: 30px;
     text-align: center;
     line-height: 1.6;
   }
   
   /* ============================================================================
      2. MUSCLE ANATOMY CARDS
      ============================================================================ */
   
   .muscle-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     margin: 30px 0;
   }
   
   .muscle-card {
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     background: linear-gradient(135deg, #f5f7fa 0%, #fff 100%);
     border-left: 5px solid;
     transition: transform 0.3s ease;
   }
   
   .muscle-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 12px rgba(0,0,0,0.15);
   }
   
   .muscle-card.frontalis { border-left-color: #3498db; }
   .muscle-card.corrugator { border-left-color: #e74c3c; }
   .muscle-card.procerus { border-left-color: #9b59b6; }
   .muscle-card.orbicularis { border-left-color: #f39c12; }
   .muscle-card.nasalis { border-left-color: #1abc9c; }
   
   .muscle-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 15px;
     padding-bottom: 10px;
     border-bottom: 2px solid #ecf0f1;
   }
   
   .muscle-icon {
     font-size: 24px;
   }
   
   .muscle-header h3 {
     margin: 0;
     font-size: 1.3em;
     color: #2c3e50;
   }
   
   .muscle-body {
     margin: 15px 0;
   }
   
   .anatomy-detail {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
     border-bottom: 1px solid #ecf0f1;
   }
   
   .anatomy-detail .label {
     font-weight: 600;
     color: #7f8c8d;
     width: 35%;
   }
   
   .anatomy-detail .value {
     width: 60%;
     text-align: right;
     color: #2c3e50;
   }
   
   .clinical-pearl {
     margin-top: 15px;
     padding: 12px;
     background: #e8f5e9;
     border-radius: 8px;
     font-size: 0.95em;
     border-left: 4px solid #28a745;
   }
   
   .clinical-pearl.warning {
     background: #ffebee;
     color: #c62828;
     border-left-color: #c62828;
   }
   
   .clinical-pearl strong {
     display: block;
     margin-bottom: 5px;
   }
   
   /* ============================================================================
      3. TREATMENT ZONE CARDS
      ============================================================================ */
   
   .zones-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 25px;
     margin-bottom: 40px;
   }
   
   .zone-card {
     position: relative;
     border-radius: 15px;
     padding: 25px;
     box-shadow: 0 6px 12px rgba(0,0,0,0.15);
     background: white;
     border: 3px solid;
     transition: transform 0.3s ease;
   }
   
   .zone-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 16px rgba(0,0,0,0.2);
   }
   
   .forehead-zone {
     border-color: #3498db;
     background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
   }
   
   .glabella-zone {
     border-color: #e74c3c;
     background: linear-gradient(135deg, #ffebee 0%, #fff 100%);
   }
   
   .crowsfeet-zone {
     border-color: #f39c12;
     background: linear-gradient(135deg, #fff3e0 0%, #fff 100%);
   }
   
   .bunny-zone {
     border-color: #1abc9c;
     background: linear-gradient(135deg, #e0f2f1 0%, #fff 100%);
   }
   
   .zone-number {
     position: absolute;
     top: -15px;
     left: 20px;
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     font-weight: bold;
     font-size: 1.2em;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 3px 6px rgba(0,0,0,0.2);
   }
   
   .zone-content h3 {
     margin: 10px 0 15px 0;
     font-size: 1.4em;
     color: #2c3e50;
   }
   
   .zone-stats {
     display: flex;
     gap: 15px;
     margin: 20px 0;
     justify-content: center;
   }
   
   .stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 15px 20px;
     background: rgba(255,255,255,0.7);
     border-radius: 10px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
   
   .stat-value {
     font-size: 2em;
     font-weight: bold;
     color: #2c3e50;
     line-height: 1;
   }
   
   .stat-label {
     font-size: 0.85em;
     color: #7f8c8d;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-top: 5px;
   }
   
   .zone-details {
     margin-top: 20px;
   }
   
   .detail-row {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px;
     margin: 8px 0;
     background: rgba(255,255,255,0.5);
     border-radius: 8px;
   }
   
   .detail-row.safety {
     background: #fff3cd;
     border-left: 4px solid #ff9800;
     font-weight: 600;
   }
   
   .detail-row .icon {
     font-size: 1.2em;
   }
   
   /* ============================================================================
      4. KEY PRINCIPLES SECTION
      ============================================================================ */
   
   .key-principles {
     margin-top: 40px;
     padding: 25px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 15px;
     color: white;
   }
   
   .key-principles h3 {
     text-align: center;
     font-size: 1.5em;
     margin-bottom: 25px;
   }
   
   .principles-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 20px;
   }
   
   .principle-box {
     background: rgba(255,255,255,0.2);
     padding: 20px;
     border-radius: 10px;
     text-align: center;
     backdrop-filter: blur(10px);
   }
   
   .principle-icon {
     font-size: 2.5em;
     display: block;
     margin-bottom: 10px;
   }
   
   .principle-box strong {
     display: block;
     font-size: 1.2em;
     margin: 10px 0;
   }
   
   .principle-box p {
     font-size: 0.9em;
     opacity: 0.9;
     margin: 0;
   }
   
   /* ============================================================================
      5. MAPPING PRINCIPLES
      ============================================================================ */
   
   .principles-container {
     display: flex;
     flex-direction: column;
     gap: 30px;
   }
   
   .principle-card {
     background: white;
     border-radius: 15px;
     padding: 25px;
     box-shadow: 0 6px 15px rgba(0,0,0,0.1);
   }
   
   .principle-header {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 20px;
     padding-bottom: 15px;
     border-bottom: 3px solid #ecf0f1;
   }
   
   .principle-badge {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     font-size: 1.5em;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
   }
   
   .principle-header h3 {
     margin: 0;
     font-size: 1.4em;
     color: #2c3e50;
   }
   
   /* Comparison Layout */
   .comparison-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
   }
   
   .correct-way,
   .wrong-way {
     padding: 20px;
     border-radius: 12px;
     border: 3px solid;
   }
   
   .correct-way {
     background: linear-gradient(135deg, #d4edda 0%, #fff 100%);
     border-color: #28a745;
   }
   
   .wrong-way {
     background: linear-gradient(135deg, #f8d7da 0%, #fff 100%);
     border-color: #dc3545;
   }
   
   .visual-tag {
     display: inline-block;
     padding: 8px 16px;
     border-radius: 20px;
     font-weight: bold;
     font-size: 0.9em;
     margin-bottom: 15px;
   }
   
   .visual-tag.correct {
     background: #28a745;
     color: white;
   }
   
   .visual-tag.incorrect {
     background: #dc3545;
     color: white;
   }
   
   .benefit-list,
   .problem-list {
     margin: 10px 0 0 20px;
     padding: 0;
   }
   
   .benefit-list li {
     color: #155724;
     margin: 8px 0;
   }
   
   .problem-list li {
     color: #721c24;
     margin: 8px 0;
   }
   
   /* Danger Grid */
   .danger-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 15px;
     margin-bottom: 20px;
   }
   
   .danger-item {
     padding: 15px;
     border-radius: 10px;
     border-left: 5px solid;
   }
   
   .danger-item.critical {
     background: #ffebee;
     border-left-color: #c62828;
   }
   
   .danger-item.warning {
     background: #fff3e0;
     border-left-color: #f57c00;
   }
   
   .danger-icon {
     font-size: 1.5em;
     margin-right: 8px;
   }
   
   .danger-item strong {
     display: block;
     color: #2c3e50;
     margin: 5px 0;
   }
   
   .danger-item p {
     margin: 5px 0 0 0;
     color: #666;
     font-size: 0.9em;
   }
   
   .safety-rule {
     background: #1e88e5;
     color: white;
     padding: 15px 20px;
     border-radius: 10px;
     text-align: center;
     font-size: 1.1em;
   }
   
   /* Palpation Guide */
   .palpation-guide {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
   }
   
   .step-box {
     flex: 1;
     background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
     padding: 20px;
     border-radius: 12px;
     border: 2px solid #2196f3;
     text-align: center;
   }
   
   .step-number {
     background: #2196f3;
     color: white;
     padding: 5px 15px;
     border-radius: 20px;
     display: inline-block;
     font-weight: bold;
     font-size: 0.9em;
     margin-bottom: 10px;
   }
   
   .step-box strong {
     display: block;
     margin: 10px 0;
     color: #1976d2;
   }
   
   .step-box .detail {
     font-size: 0.9em;
     color: #666;
     margin: 5px 0 0 0;
   }
   
   .arrow {
     font-size: 2em;
     color: #2196f3;
     font-weight: bold;
   }
   
   /* Distance Table */
   .distance-table {
     background: white;
     border-radius: 10px;
     overflow: hidden;
     border: 2px solid #ecf0f1;
   }
   
   .table-row {
     display: grid;
     grid-template-columns: 1fr 1fr 1.5fr;
     gap: 15px;
     padding: 15px;
     border-bottom: 1px solid #ecf0f1;
   }
   
   .table-row.header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     font-weight: bold;
     border-bottom: none;
   }
   
   .table-row:last-child {
     border-bottom: none;
   }
   
   .table-row:not(.header):hover {
     background: #f8f9fa;
   }
   
   .cell.distance {
     font-size: 1.3em;
     font-weight: bold;
     color: #e74c3c;
   }
   
   /* Quick Principles */
   .quick-principles {
     display: flex;
     flex-direction: column;
     gap: 15px;
   }
   
   .quick-principle {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px;
     background: linear-gradient(90deg, #f8f9fa 0%, #fff 100%);
     border-radius: 12px;
     border-left: 5px solid #3498db;
   }
   
   .qp-badge {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #3498db;
     color: white;
     font-size: 1.3em;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .qp-content h4 {
     margin: 0 0 8px 0;
     color: #2c3e50;
     font-size: 1.1em;
   }
   
   .qp-content p {
     margin: 0;
     color: #666;
     font-size: 0.95em;
   }
   
   /* ============================================================================
      6. GLABELLA PROTOCOL
      ============================================================================ */
   
   .protocol-overview {
     margin-bottom: 40px;
   }
   
   .overview-stats {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 30px 0;
   }
   
   .stat-card {
     background: white;
     padding: 25px 35px;
     border-radius: 15px;
     box-shadow: 0 8px 16px rgba(0,0,0,0.15);
     text-align: center;
     border: 3px solid;
     min-width: 150px;
   }
   
   .stat-card.total-dose {
     border-color: #e74c3c;
     background: linear-gradient(135deg, #ffebee 0%, #fff 100%);
   }
   
   .stat-card.injection-points {
     border-color: #3498db;
     background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
   }
   
   .stat-card.muscles {
     border-color: #f39c12;
     background: linear-gradient(135deg, #fff3e0 0%, #fff 100%);
   }
   
   .stat-icon {
     font-size: 2.5em;
     margin-bottom: 10px;
   }
   
   .stat-value {
     font-size: 3em;
     font-weight: bold;
     color: #2c3e50;
     display: block;
   }
   
   .stat-label {
     font-size: 0.9em;
     color: #7f8c8d;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-top: 5px;
   }
   
   .injection-pattern {
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     padding: 30px;
     border-radius: 20px;
     margin: 30px 0;
   }
   
   .injection-pattern h3 {
     text-align: center;
     color: #2c3e50;
     font-size: 1.6em;
     margin-bottom: 30px;
   }
   
   .pattern-visual {
     display: flex;
     flex-direction: column;
     gap: 20px;
   }
   
   .injection-point {
     background: white;
     border-radius: 15px;
     padding: 25px;
     box-shadow: 0 6px 12px rgba(0,0,0,0.1);
     border-left: 6px solid;
   }
   
   .injection-point.central {
     border-left-color: #9b59b6;
   }
   
   .injection-point.medial-left,
   .injection-point.medial-right {
     border-left-color: #e74c3c;
   }
   
   .injection-point.lateral-left,
   .injection-point.lateral-right {
     border-left-color: #3498db;
   }
   
   .point-marker {
     display: inline-block;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     font-size: 1.5em;
     font-weight: bold;
     text-align: center;
     line-height: 40px;
     margin-right: 15px;
     box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
     float: left;
   }
   
   .point-details strong {
     display: block;
     font-size: 1.3em;
     color: #2c3e50;
     margin-bottom: 15px;
   }
   
   .detail-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
     margin: 15px 0;
     clear: both;
   }
   
   .detail-item {
     display: flex;
     justify-content: space-between;
     padding: 10px;
     background: #f8f9fa;
     border-radius: 8px;
   }
   
   .detail-item .label {
     font-weight: 600;
     color: #7f8c8d;
   }
   
   .detail-item .value {
     color: #2c3e50;
   }
   
   .detail-item .value.highlight {
     font-weight: bold;
     color: #e74c3c;
     font-size: 1.2em;
   }
   
   .technique-tip {
     background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
     padding: 12px 15px;
     border-radius: 10px;
     margin-top: 15px;
     border-left: 4px solid #28a745;
   }
   
   .safety-warning {
     background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
     padding: 12px 15px;
     border-radius: 10px;
     margin-top: 15px;
     border-left: 4px solid #ff9800;
   }
   
   .technique-summary {
     margin: 40px 0;
     padding: 25px;
     background: white;
     border-radius: 15px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   }
   
   .technique-summary h3 {
     color: #2c3e50;
     margin-bottom: 20px;
   }
   
   .sequence-steps {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
   }
   
   .sequence-step {
     flex: 1;
     background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
     padding: 20px;
     border-radius: 12px;
     border: 2px solid #2196f3;
     text-align: center;
   }
   
   .step-icon {
     font-size: 2.5em;
     margin-bottom: 10px;
   }
   
   .sequence-step strong {
     display: block;
     color: #1976d2;
     margin: 10px 0;
     font-size: 1.1em;
   }
   
   .sequence-step p {
     margin: 0;
     font-size: 0.9em;
     color: #666;
   }
   
   .sequence-arrow {
     font-size: 2em;
     color: #2196f3;
     font-weight: bold;
   }
   
   .critical-safety {
     margin-top: 40px;
   }
   
   .critical-safety h3 {
     color: #2c3e50;
     margin-bottom: 20px;
     font-size: 1.5em;
   }
   
   .safety-boxes {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
   }
   
   .safety-box {
     padding: 20px;
     border-radius: 12px;
     border-left: 5px solid;
   }
   
   .safety-box.danger {
     background: linear-gradient(135deg, #ffebee 0%, #fff 100%);
     border-left-color: #c62828;
   }
   
   .safety-box.warning {
     background: linear-gradient(135deg, #fff3e0 0%, #fff 100%);
     border-left-color: #f57c00;
   }
   
   .safety-box.info {
     background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
     border-left-color: #1976d2;
   }
   
   .safety-box.success {
     background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
     border-left-color: #388e3c;
   }
   
   .safety-icon {
     font-size: 1.8em;
     margin-right: 10px;
   }
   
   .safety-box strong {
     display: block;
     margin: 10px 0;
     color: #2c3e50;
     font-size: 1.1em;
   }
   
   .safety-box p {
     margin: 0;
     color: #666;
     font-size: 0.95em;
   }
   
   /* ============================================================================
      7. CROW'S FEET TECHNIQUE
      ============================================================================ */
   
   .protocol-header {
     display: flex;
     justify-content: center;
     gap: 30px;
     margin: 30px 0;
   }
   
   .header-card {
     display: flex;
     align-items: center;
     gap: 20px;
     background: white;
     padding: 20px 30px;
     border-radius: 15px;
     box-shadow: 0 6px 12px rgba(0,0,0,0.15);
     border: 3px solid #f39c12;
   }
   
   .card-icon {
     font-size: 3em;
   }
   
   .card-data {
     display: flex;
     flex-direction: column;
   }
   
   .data-value {
     font-size: 2.5em;
     font-weight: bold;
     color: #2c3e50;
     line-height: 1;
   }
   
   .data-label {
     font-size: 0.9em;
     color: #7f8c8d;
     text-transform: uppercase;
   }
   
   .technique-comparison {
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     padding: 30px;
     border-radius: 20px;
     margin: 40px 0;
   }
   
   .technique-comparison h3 {
     text-align: center;
     color: #2c3e50;
     font-size: 1.5em;
     margin-bottom: 30px;
   }
   
   .comparison-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
   }
   
   .technique-side {
     background: white;
     border-radius: 15px;
     padding: 25px;
     box-shadow: 0 8px 16px rgba(0,0,0,0.15);
   }
   
   .technique-side.correct {
     border: 4px solid #28a745;
   }
   
   .technique-side.incorrect {
     border: 4px solid #dc3545;
   }
   
   .technique-badge {
     display: inline-block;
     padding: 10px 20px;
     border-radius: 25px;
     font-weight: bold;
     font-size: 1.1em;
     margin-bottom: 15px;
   }
   
   .technique-badge.success {
     background: #28a745;
     color: white;
   }
   
   .technique-badge.error {
     background: #dc3545;
     color: white;
   }
   
   .technique-content h4 {
     font-size: 1.3em;
     color: #2c3e50;
     margin: 15px 0;
   }
   
   .technique-visual {
     background: #f8f9fa;
     border-radius: 10px;
     padding: 20px;
     margin: 20px 0;
   }
   
   .skin-layer {
     padding: 15px;
     margin: 5px 0;
     border-radius: 8px;
     position: relative;
     font-weight: 600;
   }
   
   .skin-layer.epidermis {
     background: #ffe5e5;
     border: 2px solid #ff9999;
   }
   
   .skin-layer.dermis {
     background: #ffd4d4;
     border: 2px solid #ff6666;
     font-size: 1.1em;
   }
   
   .skin-layer.subcutaneous {
     background: #fff3cd;
     border: 2px solid #ffc107;
   }
   
   .skin-layer.muscle {
     background: #f8d7da;
     border: 2px solid #dc3545;
   }
   
   .needle-icon {
     font-size: 1.5em;
     position: absolute;
     right: 20px;
   }
   
   .needle-icon.correct-depth {
     animation: pulse 2s infinite;
   }
   
   @keyframes pulse {
     0%, 100% { transform: scale(1); }
     50% { transform: scale(1.1); }
   }
   
   .technique-points {
     margin: 20px 0;
   }
   
   .point-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 12px;
     margin: 10px 0;
     background: #f8f9fa;
     border-radius: 8px;
   }
   
   .check {
     color: #28a745;
     font-size: 1.5em;
     font-weight: bold;
     flex-shrink: 0;
   }
   
   .x-mark {
     color: #dc3545;
     font-size: 1.5em;
     font-weight: bold;
     flex-shrink: 0;
   }
   
   .result-box {
     padding: 15px 20px;
     border-radius: 10px;
     margin-top: 20px;
     border-left: 5px solid;
   }
   
   .result-box.success {
     background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
     border-left-color: #28a745;
     color: #155724;
   }
   
   .result-box.error {
     background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
     border-left-color: #dc3545;
     color: #721c24;
   }
   
   .result-box strong {
     display: block;
     margin-bottom: 8px;
     font-size: 1.1em;
   }
   
   .injection-pattern-section {
     margin: 40px 0;
   }
   
   .injection-pattern-section h3 {
     color: #2c3e50;
     font-size: 1.5em;
     margin-bottom: 25px;
   }
   
   .pattern-description {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
   }
   
   .pattern-diagram {
     background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
     padding: 30px;
     border-radius: 15px;
     border: 3px solid #2196f3;
     position: relative;
   }
   
   .orbital-rim-marker {
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     font-weight: bold;
     color: #dc3545;
     font-size: 0.9em;
   }
   
   .injection-fan {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 20px;
     margin-left: 150px;
   }
   
   .fan-point {
     display: flex;
     align-items: center;
     gap: 15px;
     background: white;
     padding: 15px 20px;
     border-radius: 10px;
     box-shadow: 0 3px 6px rgba(0,0,0,0.1);
     border-left: 5px solid #2196f3;
   }
   
   .fan-point.optional {
     border-left-color: #9e9e9e;
     opacity: 0.7;
   }
   
   .point-num {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: #2196f3;
     color: white;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2em;
     flex-shrink: 0;
   }
   
   .point-label {
     font-size: 0.9em;
     line-height: 1.4;
   }
   
   .pattern-instructions {
     display: flex;
     flex-direction: column;
     gap: 15px;
   }
   
   .instruction-card {
     display: flex;
     align-items: center;
     gap: 20px;
     background: white;
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 3px 8px rgba(0,0,0,0.1);
     border-left: 5px solid #f39c12;
   }
   
   .inst-number {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
     color: white;
     font-weight: bold;
     font-size: 1.5em;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .inst-content strong {
     display: block;
     color: #2c3e50;
     margin-bottom: 5px;
   }
   
   .inst-content p {
     margin: 0;
     color: #666;
     font-size: 0.95em;
   }
   
   .safety-section {
     margin-top: 40px;
   }
   
   .safety-section h3 {
     color: #2c3e50;
     font-size: 1.5em;
     margin-bottom: 20px;
   }
   
   .safety-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
   }
   
   .safety-card {
     padding: 20px;
     border-radius: 12px;
     border-left: 5px solid;
     box-shadow: 0 3px 8px rgba(0,0,0,0.1);
   }
   
   .safety-card.critical {
     background: linear-gradient(135deg, #ffebee 0%, #fff 100%);
     border-left-color: #c62828;
   }
   
   .safety-card.warning {
     background: linear-gradient(135deg, #fff3e0 0%, #fff 100%);
     border-left-color: #f57c00;
   }
   
   .safety-card.info {
     background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
     border-left-color: #1976d2;
   }
   
   .safety-card.success {
     background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
     border-left-color: #388e3c;
   }
   
   .safety-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
   }
   
   .safety-icon {
     font-size: 1.5em;
   }
   
   .safety-header strong {
     font-size: 1.1em;
     color: #2c3e50;
   }
   
   .safety-card p {
     margin: 0;
     color: #666;
     font-size: 0.95em;
     line-height: 1.5;
   }
   
   /* ============================================================================
      8. RESPONSIVE DESIGN
      ============================================================================ */
   
   @media (max-width: 768px) {
     .muscle-grid,
     .zones-grid,
     .comparison-layout,
     .comparison-container,
     .pattern-description,
     .sequence-steps {
       grid-template-columns: 1fr;
     }
     
     .zone-stats,
     .overview-stats,
     .protocol-header {
       flex-direction: column;
     }
     
     .palpation-guide {
       flex-direction: column;
     }
     
     .arrow,
     .sequence-arrow {
       transform: rotate(90deg);
     }
     
     .injection-fan {
       margin-left: 0;
     }
   }
   
   /* ============================================================================
      9. PRINT STYLES
      ============================================================================ */
   
   @media print {
     .muscle-card,
     .zone-card,
     .principle-card,
     .injection-point,
     .technique-side,
     .safety-box {
       box-shadow: none !important;
       page-break-inside: avoid;
     }
   }
   


/* ============================================================================
   ADDITIONAL E-LEARNING STYLES FOR MODULES 7-10
   ============================================================================
   
   Add these classes to your existing e-learning stylesheet.
   These complement the existing styles and provide additional classes
   used in Modules 7, 8, 9, and 10.
   
   ============================================================================ */

/* ============================================================================
   GRADIENT BACKGROUNDS
   ============================================================================ */

   .gradient-blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    padding: 30px;
    border-radius: 15px;
    color: white;
    margin-bottom: 25px;
  }
  
  .gradient-green {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
    padding: 30px;
    border-radius: 15px;
    color: white;
    margin-bottom: 25px;
  }
  
  .gradient-purple {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    padding: 30px;
    border-radius: 15px;
    color: white;
    margin-bottom: 25px;
  }
  
  .gradient-orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    padding: 30px;
    border-radius: 15px;
    color: white;
    margin-bottom: 25px;
  }
  
  .gradient-red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    padding: 30px;
    border-radius: 15px;
    color: white;
    margin-bottom: 25px;
  }
  
  /* Module header with gradient */
  .module-header {
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  
  .module-header h1 {
    color: white;
    margin: 0 0 10px 0;
    font-size: 2.2em;
  }
  
  .module-header p {
    color: white;
    margin: 0;
    font-size: 1.2em;
    opacity: 0.95;
  }
  
  /* ============================================================================
     INFO BOXES
     ============================================================================ */
  
  .info-box {
    padding: 25px;
    border-radius: 12px;
    margin: 20px 0;
    border-left: 5px solid;
  }
  
  .info-box.info-purple {
    background: linear-gradient(to right, #f4ecf7, #e8daef);
    border-left-color: #9b59b6;
  }
  
  .info-box.info-green {
    background: linear-gradient(to right, #e8f8f5, #d1f2eb);
    border-left-color: #1abc9c;
  }
  
  .info-box.info-blue {
    background: linear-gradient(to right, #ebf5fb, #d6eaf8);
    border-left-color: #3498db;
  }
  
  .info-box.info-yellow {
    background: linear-gradient(to right, #fff3cd, #ffe8a1);
    border-left-color: #ffc107;
  }
  
  .info-box.info-red {
    background: linear-gradient(to right, #fadbd8, #f5b7b1);
    border-left-color: #e74c3c;
  }
  
  /* ============================================================================
     ALERT BOXES
     ============================================================================ */
  
  .warning-box {
    background: #fff3cd;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #ffc107;
    margin: 20px 0;
  }
  
  .danger-box {
    background: #ffebee;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #e74c3c;
    margin: 20px 0;
  }
  
  .critical-box {
    background: #ffebee;
    padding: 25px;
    border-radius: 12px;
    border: 3px solid #c62828;
    margin: 20px 0;
  }
  
  .success-box {
    background: #d5f4e6;
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid #27ae60;
    margin: 20px 0;
  }
  
  /* ============================================================================
     CONTENT TABLES
     ============================================================================ */
  
  .content-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
  }
  
  .content-table .table-header {
    background: linear-gradient(to right, #667eea, #764ba2);
    color: white;
  }
  
  .content-table th,
  .content-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
  }
  
  .content-table tr:last-child td {
    border-bottom: none;
  }
  
  .content-table tbody tr {
    background: white;
  }
  
  .content-table tbody tr:nth-child(even) {
    background: #f8f9fa;
  }
  
  .content-table tbody tr:hover {
    background: #e8f4f8;
  }
  
  /* ============================================================================
     GRID LAYOUTS
     ============================================================================ */
  
  .grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 25px 0;
  }
  
  .grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 25px 0;
  }
  
  .grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 25px 0;
  }
  
  /* Responsive grids */
  @media (max-width: 992px) {
    .grid-4col {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    .grid-2col,
    .grid-3col,
    .grid-4col {
      grid-template-columns: 1fr;
    }
  }
  
  /* ============================================================================
     SECTION LAYOUTS
     ============================================================================ */
  
  .gradient-section {
    padding: 30px;
    border-radius: 15px;
    margin: 25px 0;
  }
  
  .hero-section {
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
  
  /* ============================================================================
     TREATMENT PROTOCOL ELEMENTS
     ============================================================================ */
  
  .protocol-step {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin: 15px 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    border-left: 5px solid #3498db;
  }
  
  .step-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    margin-right: 15px;
  }
  
  .dosing-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin: 15px 0;
  }
  
  /* ============================================================================
     ASSESSMENT & QUIZ ELEMENTS
     ============================================================================ */
  
  .achievement-badge {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    border-radius: 15px;
    color: white;
    margin: 25px 0;
  }
  
  .achievement-badge h2 {
    color: white;
    margin: 10px 0;
  }
  
  /* ============================================================================
     UTILITY CLASSES
     ============================================================================ */
  
  .text-center {
    text-align: center;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .mb-20 {
    margin-bottom: 20px;
  }
  
  .p-20 {
    padding: 20px;
  }
  
  .bold {
    font-weight: bold;
  }
  
  .text-primary {
    color: #3498db;
  }
  
  .text-danger {
    color: #e74c3c;
  }
  
  .text-success {
    color: #27ae60;
  }
  
  .text-warning {
    color: #f39c12;
  }
  
  /* ============================================================================
     RESPONSIVE UTILITIES
     ============================================================================ */
  
  @media (max-width: 768px) {
    .module-header h1 {
      font-size: 1.8em;
    }
    
    .gradient-blue,
    .gradient-green,
    .gradient-purple,
    .gradient-orange,
    .gradient-red {
      padding: 20px;
    }
    
    .info-box,
    .warning-box,
    .danger-box,
    .success-box {
      padding: 15px;
    }
  }
  
  /* ============================================================================
     END OF ADDITIONAL STYLES
     ============================================================================ */

   /* ============================================================================
      END OF STYLESHEET
      ============================================================================ */