/* ===== CSS VARIABLES & RESET ===== */
        :root {
            /* Colors */
            --primary-blue: #2c3e50;
            --secondary-blue: #3498db;
            --accent-orange: #e67e22;
            --accent-purple: #9b59b6;
            --light-bg: #f8f9fa;
            --dark-bg: #2c3e50;
            --success-green: #27ae60;
            --warning-yellow: #f39c12;
            --danger-red: #e74c3c;
            --aentech-color: #2c5aa0;
            
            /* Typography */
            --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --font-size-base: 1rem;
            --line-height-base: 1.6;
            
            /* Spacing */
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2rem;
            --spacing-xl: 3rem;
            
            /* Borders & Shadows */
            --border-radius: 8px;
            --border-radius-sm: 5px;
            --shadow-light: 0 4px 8px rgba(0,0,0,0.05);
            --shadow-medium: 0 6px 12px rgba(0,0,0,0.1);
            --shadow-heavy: 0 4px 12px rgba(0,0,0,0.1);
            
            /* Transitions */
            --transition-fast: 0.3s ease;
        }

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

        body {
            font-family: var(--font-primary);
            font-size: var(--font-size-base);
            line-height: var(--line-height-base);
            color: #333;
            background-color: #fafafa;
        }

        /* ===== TYPOGRAPHY ===== */
        h1, h2, h3, h4, h5, h6 {
            color: var(--primary-blue);
            margin-bottom: var(--spacing-sm);
            font-weight: 600;
        }

        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; }
        h3 { font-size: 1.75rem; }
        h4 { font-size: 1.5rem; }
        h5 { font-size: 1.25rem; }
        h6 { font-size: 1.1rem; }

        p {
            margin-bottom: var(--spacing-sm);
        }

        .lead {
            font-size: 1.25rem;
            font-weight: 300;
        }

        .text-muted {
            color: #6c757d;
        }

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

        .fw-bold {
            font-weight: 600;
        }

        .fst-italic {
            font-style: italic;
        }

        /* ===== HEADER COMPONENTS ===== */
        .scientific-header {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
            color: white;
            padding: var(--spacing-lg) 0;
            margin-bottom: var(--spacing-lg);
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            box-shadow: var(--shadow-heavy);
        }

        .section-header {
            background: linear-gradient(135deg, var(--aentech-color) 0%, #1a3a6b 100%);
            color: white;
            border-radius: var(--border-radius);
            padding: var(--spacing-sm);
            margin-bottom: var(--spacing-md);
            text-align: center;
            font-weight: 600;
        }

        .section-header.energy {
            background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
        }

        .section-header.matter {
            background: linear-gradient(135deg, var(--accent-orange) 0%, #d35400 100%);
        }

        .section-header.periodic {
            background: linear-gradient(135deg, var(--aentech-color) 0%, #1a3a6b 100%);
        }

        .section-header.atomic {
            background: linear-gradient(135deg, var(--aentech-color) 0%, #1a3a6b 100%);
        }

        .section-header.element {
            background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
        }

        .section-header.electron {
            background: linear-gradient(135deg, var(--accent-orange) 0%, #d35400 100%);
        }

        .section-header.bonding {
            background: linear-gradient(135deg, var(--aentech-color) 0%, #1a3a6b 100%);
        }

        .section-header.ionic {
            background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
        }

        .section-header.covalent {
            background: linear-gradient(135deg, var(--accent-orange) 0%, #d35400 100%);
        }

        .section-header.hybrid {
            background: linear-gradient(135deg, var(--accent-purple) 0%, #8e44ad 100%);
        }

        /* ===== CONTENT CARDS ===== */
        .content-card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            transition: transform var(--transition-fast);
            border-left: 4px solid var(--secondary-blue);
        }

        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

        .content-card.highlight {
            border-left-color: var(--accent-orange);
        }

        .content-card.info {
            border-left-color: var(--secondary-blue);
        }

        .content-card.warning {
            border-left-color: var(--warning-yellow);
        }

        .content-card.danger {
            border-left-color: var(--danger-red);
        }

        .content-card.success {
            border-left-color: var(--success-green);
        }

        /* ===== INFORMATION BOXES ===== */
        .info-box {
            background-color: #e8f4fc;
            border-left: 4px solid var(--secondary-blue);
            border-radius: var(--border-radius-sm);
            padding: var(--spacing-sm);
            margin: var(--spacing-md) 0;
        }

        .info-box.warning {
            background-color: #fff3cd;
            border-left-color: var(--warning-yellow);
        }

        .info-box.success {
            background-color: #d1ecf1;
            border-left-color: var(--success-green);
        }

        .info-box.danger {
            background-color: #f8d7da;
            border-left-color: var(--danger-red);
        }

        .info-box-icon {
            display: flex;
            align-items: center;
        }

        /* ===== FORMULA & EQUATION BOXES ===== */
        .formula-box {
            background-color: var(--light-bg);
            border-radius: var(--border-radius-sm);
            padding: var(--spacing-sm);
            margin: var(--spacing-sm) 0;
            text-align: center;
            overflow-x: auto;
        }

        .equation-container {
            background-color: var(--light-bg);
            border-radius: var(--border-radius-sm);
            padding: var(--spacing-sm);
            margin: var(--spacing-sm) 0;
            text-align: center;
        }

        /* ===== LISTS ===== */
        .property-list {
            list-style-type: none;
            padding-left: 0;
        }

        .property-list li {
            margin-bottom: var(--spacing-xs);
            padding-left: var(--spacing-md);
            position: relative;
        }

        .property-list li:before {
            content: "•";
            color: var(--secondary-blue);
            font-weight: 600;
            position: absolute;
            left: 0;
        }

        .property-list.warning li:before {
            color: var(--warning-yellow);
        }

        .property-list.success li:before {
            color: var(--success-green);
        }

        /* ===== IMAGES & FIGURES ===== */
        .scientific-img {
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            margin-bottom: var(--spacing-sm);
            transition: transform var(--transition-fast);
            max-width: 100%;
            height: auto;
        }

        .scientific-img:hover {
            transform: scale(1.02);
        }

        .figure-caption {
            font-style: italic;
            color: #6c757d;
            margin-top: var(--spacing-xs);
        }

        /* ===== TABLES ===== */
        .table-responsive {
            overflow-x: auto;
            margin-bottom: var(--spacing-md);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: var(--spacing-md);
        }

        .data-table th,
        .data-table td {
            padding: var(--spacing-sm);
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }

        .data-table th {
            background-color: var(--light-bg);
            font-weight: 600;
        }

        .data-table.striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }

        .data-table.success {
            background-color: #d4edda;
        }

        .data-table.success th {
            background-color: #c3e6cb;
        }

        /* ===== SPECIALIZED COMPONENTS ===== */
        .orbital {
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: var(--spacing-xs);
            background-color: #e8f4fc;
            display: inline-block;
            margin: 0.2rem;
        }

        .state-card {
            background: white;
            border-radius: var(--border-radius);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .state-title {
            color: var(--primary-blue);
            border-bottom: 1px solid #eee;
            padding-bottom: var(--spacing-xs);
            margin-bottom: var(--spacing-sm);
        }

        .aentech {
            background-color: var(--aentech-color);
        }

        /* ===== UTILITY CLASSES ===== */
        .mt-1 { margin-top: var(--spacing-xs); }
        .mt-2 { margin-top: var(--spacing-sm); }
        .mt-3 { margin-top: var(--spacing-md); }
        .mt-4 { margin-top: var(--spacing-lg); }
        .mt-5 { margin-top: var(--spacing-xl); }

        .mb-1 { margin-bottom: var(--spacing-xs); }
        .mb-2 { margin-bottom: var(--spacing-sm); }
        .mb-3 { margin-bottom: var(--spacing-md); }
        .mb-4 { margin-bottom: var(--spacing-lg); }
        .mb-5 { margin-bottom: var(--spacing-xl); }

        .p-1 { padding: var(--spacing-xs); }
        .p-2 { padding: var(--spacing-sm); }
        .p-3 { padding: var(--spacing-md); }
        .p-4 { padding: var(--spacing-lg); }
        .p-5 { padding: var(--spacing-xl); }

        .rounded { border-radius: var(--border-radius); }
        .rounded-sm { border-radius: var(--border-radius-sm); }

        .shadow { box-shadow: var(--shadow-light); }
        .shadow-medium { box-shadow: var(--shadow-medium); }
        .shadow-heavy { box-shadow: var(--shadow-heavy); }

        .text-light { color: white; }
        .text-primary { color: var(--primary-blue); }
        .text-secondary { color: var(--secondary-blue); }
        .text-accent { color: var(--accent-orange); }
        .text-success { color: var(--success-green); }
        .text-warning { color: var(--warning-yellow); }
        .text-danger { color: var(--danger-red); }

        .bg-light { background-color: var(--light-bg); }
        .bg-primary { background-color: var(--primary-blue); }
        .bg-secondary { background-color: var(--secondary-blue); }
        .bg-accent { background-color: var(--accent-orange); }
        .bg-success { background-color: var(--success-green); }
        .bg-warning { background-color: var(--warning-yellow); }
        .bg-danger { background-color: var(--danger-red); }
        .bg-aentech { background-color: var(--aentech-color); }

        .d-flex { display: flex; }
        .align-items-center { align-items: center; }
        .justify-content-center { justify-content: center; }
        .justify-content-between { justify-content: space-between; }

        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            .scientific-header h1 {
                font-size: 1.8rem;
            }
            
            h1 { font-size: 2rem; }
            h2 { font-size: 1.75rem; }
            h3 { font-size: 1.5rem; }
            h4 { font-size: 1.25rem; }
            
            .container {
                padding: 0 var(--spacing-xs);
            }
        }

        @media (max-width: 576px) {
            .content-card {
                padding: var(--spacing-sm);
            }
            
            .section-header {
                padding: var(--spacing-xs);
            }
        }

        /* ===== PRINT STYLES ===== */
        @media print {
            .content-card {
                box-shadow: none;
                border: 1px solid #ddd;
            }
            
            .scientific-header {
                background: var(--primary-blue) !important;
                -webkit-print-color-adjust: exact;
            }
            
            .info-box {
                background: #e8f4fc !important;
                -webkit-print-color-adjust: exact;
            }
        }