:root { --primary-grad: linear-gradient(135deg, #1a3870 0%, #da1038 100%); }
        body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #1e293b; min-height: 100vh; display: flex; flex-direction: column; }
        
        /* Navbar Styling */
        .navbar { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); }
        .nav-search-input { background-color: #f1f5f9 !important; border: none !important; }
        
        /* Shared Button Styling */
        .btn-modern { background: var(--primary-grad); color: white; border: none; border-radius: 50px; padding: 10px 24px; font-weight: 600; transition: 0.3s; }
        .btn-modern:hover { opacity: 0.9; color: white; transform: translateY(-1px); }
        
        /* Card & Detail Styling */
        .record-card { border: none; border-radius: 24px; transition: 0.3s; background: white; overflow: hidden; }
        .record-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; }
        .img-container { height: 200px; overflow: hidden; border-radius: 18px; margin: 12px; }
        .img-container img { width: 100%; height: 100%; object-fit: cover; }
        
        .detail-card { border: none; border-radius: 30px; background: white; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .social-circle { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #334155; transition: 0.3s; text-decoration: none; }
        .social-circle:hover { background: #1a3870; color: white; }
        
        /* Search Box Home */
        .search-box { border: 1px solid #e2e8f0; transition: all 0.3s ease; }
        .search-box:focus-within { box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1); border-color: #1a3870; transform: translateY(-2px); }
        
        footer { background: white; border-top: 1px solid #e2e8f0; padding: 40px 0; margin-top: auto; }
        
        #search-input::placeholder {
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 1;
            transform: translateY(0);
        }
    
        .placeholder-transitioning::placeholder {
            opacity: 0;
            transform: translateY(-15px);
        }
        
        .small {
            font-size: 0.85rem !important;
                    letter-spacing: 0.02rem;
                }
            
                @media (max-width: 576px) {
                    .btn-modern, .btn-light {
                        padding-left: 1.5rem !important;
                        padding-right: 1.5rem !important;
                        width: 45%; /* Keeps them side-by-side but small */
                        min-width: 120px;
                    }
                }
                
                /* 1. Fix the Scrollbar issue */
                .navbar-nav {
                    overflow: hidden !important; /* Removes scrollbar */
                    flex-wrap: nowrap;
                }
            
                /* 2. Text Styling */
                .nav-link {
                    font-size: 0.85rem;
                    padding: 0.5rem 0.4rem !important;
                    transition: all 0.2s ease;
                }
            
                @media (min-width: 768px) {
                    .nav-link {
                        font-size: 0.95rem;
                    }
                }
            
                /* 3. Modern Active Link Style */
                .active-link {
                    color: #1a3870 !important;
                    position: relative;
                }
            
                /* Subtle dot indicator for active page on desktop */
                @media (min-width: 768px) {
                    .active-link::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 4px;
                        height: 4px;
                        background-color: #1a3870;
                        border-radius: 50%;
                    }
                }
            
                /* 4. Small Mobile Adjustments */
                @media (max-width: 576px) {
                    .btn-modern {
                        padding: 6px 15px !important;
                        font-size: 0.75rem;
                    }
                }
                
                
                /* 1. Ensure the container looks like a singular unit */
                #recordTab {
                    border: 1px solid #e9ecef;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
                }
            
                /* 2. Style the inactive buttons */
                #recordTab .nav-link {
                    color: #6c757d;
                    background: transparent;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    font-size: 0.9rem;
                    border: 1px solid transparent;
                    white-space: nowrap;
                }
            
                /* 3. Style the active button with your primary blue */
                #recordTab .nav-link.active {
                    background: #1a3870 !important; /* Adjust if using var(--primary-grad) */
                    color: white !important;
                    box-shadow: 0 4px 10px rgba(26, 56, 112, 0.2);
                }
            
                /* 4. Mobile responsiveness */
                @media (max-width: 576px) {
                    #recordTab {
                        width: 100% !important; /* Take full width on mobile */
                        display: flex;
                    }
                    #recordTab .nav-link {
                        font-size: 0.8rem;
                        padding: 10px 5px !important;
                    }
                }
                
                 /* Premium Typography and Spacing */
                    .tracking-tight { letter-spacing: -0.025em; }
                    .tracking-wider { letter-spacing: 0.05em; }
                    .leading-relaxed { line-height: 1.8; }
                    
                    .nav-pills .nav-link {
                        color: #64748b;
                        transition: all 0.2s ease;
                    }
                    
                    .nav-pills .nav-link.active {
                        background: var(--primary-grad);
                        color: white;
                        box-shadow: 0 4px 12px rgba(26, 56, 112, 0.25);
                    }
                
                    .metadata-row span {
                        font-size: 0.95rem;
                    }
                
                    .prose {
                        color: #334155;
                        font-weight: 400;
                    }
                    .metadata-row {
                            min-height: 50px;
                        }
                        
                        /* Prevents title and content from overlapping */
                        .metadata-row span:last-child {
                            word-break: break-word; /* Wraps long text */
                            max-width: 60%;         /* Keeps the title on the left visible */
                        }
                    
                        .social-circle {
                            width: 45px;
                            height: 45px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            text-decoration: none;
                            transition: all 0.3s ease;
                            background: #f8f9fa;
                            color: #495057;
                        }
                    
                        .social-circle:hover {
                            background: #1a3870;
                            color: white;
                            transform: translateY(-3px);
                        }
                        
                        .bg-success-subtle {
                            background-color: rgba(25, 135, 84, 0.1) !important;
                        }
                        
                        .bg-primary-subtle {
                                background-color: rgba(26, 56, 112, 0.05) !important;
                            }
                            .tracking-widest {
                                letter-spacing: 0.15em;
                            }
                            .detail-card {
                                transition: transform 0.3s ease;
                            }
                            .detail-card:hover {
                                transform: translateY(-5px);
                            }
                            .btn-outline-secondary {
                                border-color: #eee;
                                color: #666;
                            }
                            .btn-outline-secondary:hover {
                                background: #f8f9fa;
                                color: #1a3870;
                                border-color: #1a3870;
                            }
                            
                            .tracking-tight { letter-spacing: -0.05em; }
                            .bg-primary-subtle { background-color: rgba(26, 56, 112, 0.05) !important; }
                                
                                /* Animation for the Measurement Hero */
                                .detail-card h2 {
                                    background: linear-gradient(45deg, #ffffff, #da1038);
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                }
                            
                                .border-dashed {
                                    border-style: dashed !important;
                                }
                                
                                 /* Ensures labels are always capitalized even if database is lowercase */
                            .text-capitalize {
                                text-transform: capitalize !important;
                            }
                            
                            .record-card {
                                transition: transform 0.2s ease, box-shadow 0.2s ease;
                                overflow: hidden;
                            }
                        
                            .record-card:hover {
                                transform: translateY(-5px);
                                box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
                            }
                        
                            .bg-primary-subtle { background-color: rgba(26, 56, 112, 0.1) !important; }
                            .bg-success-subtle { background-color: rgba(25, 135, 84, 0.1) !important; }
                            .bg-secondary-subtle { background-color: rgba(218, 16, 56, 0.1) !important; }
                            
                            
                            .tracking-widest { letter-spacing: 0.4em; margin-right: -0.4em; }
    
                            /* Input Placeholder Transition */
                            #search-input::placeholder {
                                transition: all 0.5s ease;
                                opacity: 1;
                                transform: translateY(0);
                            }
                        
                            .placeholder-hidden::placeholder {
                                opacity: 0;
                                transform: translateY(-10px);
                            }
                        
                            /* Modern Button Styles */
                            .btn-modern {
                                background: var(--primary-grad);
                                color: white;
                                font-weight: 600;
                                border: none;
                                transition: transform 0.2s ease;
                            }
                            
                            .btn-modern:hover {
                                transform: translateY(-2px);
                                box-shadow: 0 5px 15px rgba(26, 56, 112, 0.3);
                                color: white;
                            }
                            
                             /* Custom Styling */
                            .text-justify { text-align: justify; }
                            .text-justify-center { text-align: justify; text-align-last: center; }
                            .tracking-tight { letter-spacing: -0.025em; }
                            .tracking-widest { letter-spacing: 0.3em; font-size: 0.85rem; }
                            
                            /* Better Color Palette */
                            .text-primary { color: #1a3870 !important; }
                            .bg-primary-subtle { background-color: rgba(26, 56, 112, 0.05) !important; }
                            .bg-dark { background-color: #1a1d20 !important; }
                            
                            .border-dashed { border-style: dashed !important; }
                            
                            .transition-hover {
                                transition: all 0.3s ease;
                            }
                            .transition-hover:hover {
                                transform: translateY(-3px);
                                background-color: #000;
                                color: #fff;
                            }
                            
                             .tracking-tight { letter-spacing: -0.025em; }
                            .tracking-wider { letter-spacing: 0.05em; }
                        
                            /* Custom Radio Styling */
                            .btn-check:checked + .btn-outline-primary {
                                background: var(--primary-grad) !important;
                                border-color: transparent !important;
                                color: white !important;
                                box-shadow: 0 4px 12px rgba(26, 56, 112, 0.3);
                            }
                        
                            .form-control:focus {
                                background-color: #fff !important;
                                border-color: #1a3870 !important;
                                box-shadow: 0 0 0 4px rgba(26, 56, 112, 0.1) !important;
                            }
                            
                            .btn-outline-primary {
                                border-color: #e2e8f0;
                                color: #64748b;
                                font-weight: 500;
                            }
root { --primary-grad: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); }
        body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #1e293b; min-height: 100vh; display: flex; flex-direction: column; }
        
        /* Navbar Styling */
        .navbar { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); }
        .nav-search-input { background-color: #f1f5f9 !important; border: none !important; }
        
        /* Shared Button Styling */
        .btn-modern { background: var(--primary-grad); color: white; border: none; border-radius: 50px; padding: 10px 24px; font-weight: 600; transition: 0.3s; }
        .btn-modern:hover { opacity: 0.9; color: white; transform: translateY(-1px); }
        
        /* Card & Detail Styling */
        .record-card { border: none; border-radius: 24px; transition: 0.3s; background: white; overflow: hidden; }
        .record-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; }
        .img-container { height: 200px; overflow: hidden; border-radius: 18px; margin: 12px; }
        .img-container img { width: 100%; height: 100%; object-fit: cover; }
        
        .detail-card { border: none; border-radius: 30px; background: white; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .social-circle { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #334155; transition: 0.3s; text-decoration: none; }
        .social-circle:hover { background: #6366f1; color: white; }
        
        /* Search Box Home */
        .search-box { border: 1px solid #e2e8f0; transition: all 0.3s ease; }
        .search-box:focus-within { box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1); border-color: #6366f1; transform: translateY(-2px); }
        
        footer { background: white; border-top: 1px solid #e2e8f0; padding: 40px 0; margin-top: auto; }
        
        #search-input::placeholder {
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 1;
            transform: translateY(0);
        }
    
        .placeholder-transitioning::placeholder {
            opacity: 0;
            transform: translateY(-15px);
        }
        
        .small {
            font-size: 0.85rem !important;
                    letter-spacing: 0.02rem;
                }
            
                @media (max-width: 576px) {
                    .btn-modern, .btn-light {
                        padding-left: 1.5rem !important;
                        padding-right: 1.5rem !important;
                        width: 45%; /* Keeps them side-by-side but small */
                        min-width: 120px;
                    }
                }
                
                /* 1. Fix the Scrollbar issue */
                .navbar-nav {
                    overflow: hidden !important; /* Removes scrollbar */
                    flex-wrap: nowrap;
                }
            
                /* 2. Text Styling */
                .nav-link {
                    font-size: 0.85rem;
                    padding: 0.5rem 0.4rem !important;
                    transition: all 0.2s ease;
                }
            
                @media (min-width: 768px) {
                    .nav-link {
                        font-size: 0.95rem;
                    }
                }
            
                /* 3. Modern Active Link Style */
                .active-link {
                    color: #0d6efd !important;
                    position: relative;
                }
            
                /* Subtle dot indicator for active page on desktop */
                @media (min-width: 768px) {
                    .active-link::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 4px;
                        height: 4px;
                        background-color: #0d6efd;
                        border-radius: 50%;
                    }
                }
            
                /* 4. Small Mobile Adjustments */
                @media (max-width: 576px) {
                    .btn-modern {
                        padding: 6px 15px !important;
                        font-size: 0.75rem;
                    }
                }
                
                
                /* 1. Ensure the container looks like a singular unit */
                #recordTab {
                    border: 1px solid #e9ecef;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
                }
            
                /* 2. Style the inactive buttons */
                #recordTab .nav-link {
                    color: #6c757d;
                    background: transparent;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    font-size: 0.9rem;
                    border: 1px solid transparent;
                    white-space: nowrap;
                }
            
                /* 3. Style the active button with your primary blue */
                #recordTab .nav-link.active {
                    background: #0d6efd !important; /* Adjust if using var(--primary-grad) */
                    color: white !important;
                    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
                }
            
                /* 4. Mobile responsiveness */
                @media (max-width: 576px) {
                    #recordTab {
                        width: 100% !important; /* Take full width on mobile */
                        display: flex;
                    }
                    #recordTab .nav-link {
                        font-size: 0.8rem;
                        padding: 10px 5px !important;
                    }
                }
                
                 /* Premium Typography and Spacing */
                    .tracking-tight { letter-spacing: -0.025em; }
                    .tracking-wider { letter-spacing: 0.05em; }
                    .leading-relaxed { line-height: 1.8; }
                    
                    .nav-pills .nav-link {
                        color: #64748b;
                        transition: all 0.2s ease;
                    }
                    
                    .nav-pills .nav-link.active {
                        background: var(--primary-grad);
                        color: white;
                        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
                    }
                
                    .metadata-row span {
                        font-size: 0.95rem;
                    }
                
                    .prose {
                        color: #334155;
                        font-weight: 400;
                    }
                    .metadata-row {
                            min-height: 50px;
                        }
                        
                        /* Prevents title and content from overlapping */
                        .metadata-row span:last-child {
                            word-break: break-word; /* Wraps long text */
                            max-width: 60%;         /* Keeps the title on the left visible */
                        }
                    
                        .social-circle {
                            width: 45px;
                            height: 45px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            text-decoration: none;
                            transition: all 0.3s ease;
                            background: #f8f9fa;
                            color: #495057;
                        }
                    
                        .social-circle:hover {
                            background: #0d6efd;
                            color: white;
                            transform: translateY(-3px);
                        }
                        
                        .bg-success-subtle {
                            background-color: rgba(25, 135, 84, 0.1) !important;
                        }
                        
                        .bg-primary-subtle {
                                background-color: #f0f7ff !important;
                            }
                            .tracking-widest {
                                letter-spacing: 0.15em;
                            }
                            .detail-card {
                                transition: transform 0.3s ease;
                            }
                            .detail-card:hover {
                                transform: translateY(-5px);
                            }
                            .btn-outline-secondary {
                                border-color: #eee;
                                color: #666;
                            }
                            .btn-outline-secondary:hover {
                                background: #f8f9fa;
                                color: #0d6efd;
                                border-color: #0d6efd;
                            }
                            
                            .tracking-tight { letter-spacing: -0.05em; }
                                .bg-primary-subtle { background-color: rgba(13, 110, 253, 0.05) !important; }
                                
                                /* Animation for the Measurement Hero */
                                .detail-card h2 {
                                    background: linear-gradient(45deg, #ffffff, #a5c9ff);
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                }
                            
                                .border-dashed {
                                    border-style: dashed !important;
                                }
                                
                                 /* Ensures labels are always capitalized even if database is lowercase */
                            .text-capitalize {
                                text-transform: capitalize !important;
                            }
                            
                            .record-card {
                                transition: transform 0.2s ease, box-shadow 0.2s ease;
                                overflow: hidden;
                            }
                        
                            .record-card:hover {
                                transform: translateY(-5px);
                                box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
                            }
                        
                            .bg-primary-subtle { background-color: rgba(13, 110, 253, 0.1) !important; }
                            .bg-success-subtle { background-color: rgba(25, 135, 84, 0.1) !important; }
                            .bg-secondary-subtle { background-color: rgba(108, 117, 125, 0.1) !important; }
                            
                            
                            .tracking-widest { letter-spacing: 0.4em; margin-right: -0.4em; }
    
                            /* Input Placeholder Transition */
                            #search-input::placeholder {
                                transition: all 0.5s ease;
                                opacity: 1;
                                transform: translateY(0);
                            }
                        
                            .placeholder-hidden::placeholder {
                                opacity: 0;
                                transform: translateY(-10px);
                            }
                        
                            /* Modern Button Styles */
                            .btn-modern {
                                background: var(--primary-grad);
                                color: white;
                                font-weight: 600;
                                border: none;
                                transition: transform 0.2s ease;
                            }
                            
                            .btn-modern:hover {
                                transform: translateY(-2px);
                                box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
                                color: white;
                            }
                            
                             /* Custom Styling */
                            .text-justify { text-align: justify; }
                            .text-justify-center { text-align: justify; text-align-last: center; }
                            .tracking-tight { letter-spacing: -0.025em; }
                            .tracking-widest { letter-spacing: 0.3em; font-size: 0.85rem; }
                            
                            /* Better Color Palette */
                            .text-primary { color: #0d6efd !important; }
                            .bg-primary-subtle { background-color: #f0f7ff !important; }
                            .bg-dark { background-color: #1a1d20 !important; }
                            
                            .border-dashed { border-style: dashed !important; }
                            
                            .transition-hover {
                                transition: all 0.3s ease;
                            }
                            .transition-hover:hover {
                                transform: translateY(-3px);
                                background-color: #000;
                                color: #fff;
                            }
                            
                             .tracking-tight { letter-spacing: -0.025em; }
                            .tracking-wider { letter-spacing: 0.05em; }
                        
                            /* Custom Radio Styling */
                            .btn-check:checked + .btn-outline-primary {
                                background: var(--primary-grad) !important;
                                border-color: transparent !important;
                                color: white !important;
                                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
                            }
                        
                            .form-control:focus {
                                background-color: #fff !important;
                                border-color: #6366f1 !important;
                                box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
                            }
                            
                            .btn-outline-primary {
                                border-color: #e2e8f0;
                                color: #64748b;
                                font-weight: 500;
                            }
                            
                            /* Animation Keyframes */
@keyframes logo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* The class to trigger it */
.spin-on-load {
    animation: logo-spin 1s ease-in-out;
}

.logo-wrapper img:hover {
    transform: rotate(360deg);
    transition: transform 0.6s ease-in-out;
}