/* General Styles */
            body {
                font-family: 'Inter', sans-serif;
                /* Using Inter font */
                transition: background-color 0.4s ease, color 0.4s ease;
                padding: 20px;
                margin: 0;
                background-color: #f8fafc;
                /* Light gray background */
                color: #1f2937;
                /* Dark gray text */
            }
    
            a {
                color: #2563eb;
                /* Blue links */
                text-decoration: none;
                transition: color 0.2s ease;
            }
    
            a:hover {
                color: #1d4ed8;
                /* Darker blue on hover */
            }
    
            h1,
            h2,
            h3,
            h4 {
                color: #111827;
                /* Very dark gray headings */
                margin-bottom: 0.5em;
            }
    
            code {
                background-color: #e5e7eb;
                /* Light gray code background */
                color: #ef4444;
                /* Red code text */
                padding: 2px 6px;
                border-radius: 4px;
                font-family: monospace;
            }
    
            abbr[title] {
                text-decoration: underline dotted;
                cursor: help;
            }
    
            hr {
                border: none;
                height: 1px;
                background-color: #6b21a8;
                /* Purple */
                margin: 20px 0;
            }
    
            /* Dark Mode Styles */
            .dark-mode {
                background-color: #1f2937;
                /* Dark background */
                color: #f3f4f6;
                /* Light gray text */
            }
    
            .dark-mode h1,
            .dark-mode h2,
            .dark-mode h3,
            .dark-mode h4 {
                color: #f9fafb;
                /* Almost white headings */
            }
    
            .dark-mode a {
                color: #60a5fa;
                /* Lighter blue links */
            }
    
            .dark-mode a:hover {
                color: #93c5fd;
                /* Even lighter blue on hover */
            }
    
            .dark-mode code {
                background-color: #4b5563;
                /* Darker gray code background */
                color: #fca5a5;
                /* Lighter red code text */
            }
    
            .dark-mode hr {
                background-color: #a855f7;
                /* Lighter purple */
            }
    
            .dark-mode .profile-card {
                background-color: #374151;
                /* Darker card background */
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
                border-color: #4b5563;
            }
    
            .dark-mode .profile-card .header {
                border-bottom-color: #4b5563;
            }
    
            .dark-mode .profile-card .name {
                color: #f9fafb;
            }
    
            .dark-mode .profile-card .bio,
            .dark-mode .profile-card .expanded-content {
                color: #d1d5db;
                /* Lighter gray text in card */
            }
    
            .dark-mode .read-more-btn {
                color: #60a5fa;
            }
    
            .dark-mode .modal__inner {
                background: #374151;
                color: #f3f4f6;
            }
    
            .dark-mode .modal__close:after,
            .dark-mode .modal__close:before {
                background: #9ca3af;
            }
    
            .dark-mode .modal__close:hover:after,
            .dark-mode .modal__close:hover:before {
                background: #d1d5db;
            }
    
            .dark-mode .btn {
                background-color: #7e22ce;
                /* Slightly lighter purple */
            }
    
            .dark-mode .btn:hover,
            .dark-mode .btn:focus {
                background-color: #9333ea;
            }
    
            .dark-mode .rating-btn {
                /* Keep rating buttons visible */
            }
    
            .dark-mode .toggle-label {
                background-color: #4b5563;
                /* Darker gray toggle background */
            }
    
            .dark-mode .toggle-checkbox:checked+.toggle-label {
                background-color: #a855f7;
                /* Purple when checked */
            }
    
            .dark-mode .toggle-label:after {
                background-color: #d1d5db;
                /* Lighter gray handle */
            }
    
            .dark-mode textarea,
            .dark-mode input[type="number"] {
                background-color: #4b5563;
                color: #f3f4f6;
                border-color: #6b7280;
            }
    
            .dark-mode textarea::placeholder,
            .dark-mode input[type="number"]::placeholder {
                color: #9ca3af;
            }
    
    
            /* Table Styles (Kept original for compatibility if needed) */
            table,
            th,
            td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 4px;
            }
    
            .dark-mode table,
            .dark-mode th,
            .dark-mode td {
                border-color: #6b7280;
            }
    
            /* Button Styles */
            button,
            .btn {
                /* Apply .btn styles to standard buttons too */
                color: white;
                background-color: #6b21a8;
                /* Purple */
                padding: 0.5em 1em;
                border: none;
                border-radius: 6px;
                /* Rounded corners */
                cursor: pointer;
                font-size: 1rem;
                transition: background-color 0.2s ease, transform 0.1s ease;
                display: inline-block;
                /* Ensure buttons behave like inline-blocks */
                margin: 5px;
                /* Add some margin */
                text-align: center;
            }
    
            button:hover,
            .btn:hover,
            button:focus,
            .btn:focus {
                background-color: #7e22ce;
                /* Lighter purple on hover/focus */
                outline: none;
            }
    
            button:active,
            .btn:active {
                transform: scale(0.98);
                /* Slight shrink on click */
            }
    
            /* Rating Button Styles */
            .rating-btn {
                font-size: 2em;
                cursor: pointer;
                background: none;
                border: none;
                outline: none;
                margin: 10px;
                padding: 0;
                /* Remove default padding */
                transition: transform 0.2s ease;
                color: #6b21a8;
                /* Use theme color */
            }
    
            .rating-btn:hover {
                transform: scale(1.3);
                /* Slightly smaller hover scale */
            }
    
            .dark-mode .rating-btn {
                color: #a855f7;
                /* Lighter purple in dark mode */
            }
    
            /* Dark Mode Toggle Styles */
            .toggle-container {
                display: inline-block;
                position: relative;
                vertical-align: middle;
                /* Align with text/buttons */
            }
    
            .toggle-checkbox {
                display: none;
                /* Hide actual checkbox */
            }
    
            .toggle-label {
                display: block;
                width: 44px;
                /* Slightly wider */
                height: 24px;
                /* Slightly taller */
                background-color: #cbd5e1;
                /* Gray background */
                border-radius: 24px;
                /* Fully rounded */
                position: relative;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }
    
            .toggle-label:after {
                content: '';
                display: block;
                width: 20px;
                /* Circle handle */
                height: 20px;
                background-color: #fff;
                border-radius: 50%;
                position: absolute;
                top: 2px;
                left: 2px;
                transition: left 0.3s ease;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }
    
            .toggle-checkbox:checked+.toggle-label {
                background-color: #6b21a8;
                /* Purple when checked */
            }
    
            .toggle-checkbox:checked+.toggle-label:after {
                left: 22px;
                /* Move handle to the right */
            }
    
            /* Modal Styles */
            .modal {
                opacity: 0;
                visibility: hidden;
                position: fixed;
                z-index: 1000;
                /* Ensure modal is on top */
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                text-align: left;
                background: rgba(40, 40, 60, 0.8);
                /* Semi-transparent dark background */
                transition: opacity .25s ease, visibility 0s linear .25s;
                /* Delay visibility change */
                display: flex;
                /* Use flexbox for centering */
                align-items: center;
                justify-content: center;
            }
    
            .modal__bg {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                cursor: pointer;
                /* Allows closing by clicking background */
            }
    
            .modal-state {
                display: none;
                /* Hide the checkbox */
            }
    
            .modal-state:checked+.modal {
                opacity: 1;
                visibility: visible;
                transition: opacity .25s ease;
                /* Transition opacity in */
            }
    
            .modal-state:checked+.modal .modal__inner {
                transform: translateY(0);
                /* Slide in from top */
                opacity: 1;
            }
    
            .modal__inner {
                position: relative;
                /* Position relative to the flex container */
                z-index: 1001;
                /* Above the background */
                width: 90%;
                max-width: 600px;
                /* Max width for larger screens */
                max-height: 80vh;
                /* Limit height */
                margin: auto;
                overflow: auto;
                /* Scroll if content overflows */
                background: #fff;
                border-radius: 8px;
                /* Rounded corners */
                padding: 1.5em 2em;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
                transform: translateY(-20px);
                /* Start slightly above */
                opacity: 0;
                transition: transform .25s ease, opacity .25s ease;
            }
    
            .modal__close {
                position: absolute;
                right: 1em;
                top: 1em;
                width: 1.5em;
                /* Larger click target */
                height: 1.5em;
                cursor: pointer;
                background: none;
                border: none;
                padding: 0;
            }
    
            .modal__close:after,
            .modal__close:before {
                content: '';
                position: absolute;
                width: 2px;
                height: 1.2em;
                /* Adjust line length */
                background: #9ca3af;
                /* Gray color */
                display: block;
                left: 50%;
                top: 50%;
                transform-origin: center;
                transition: background-color 0.2s ease;
            }
    
            .modal__close:before {
                transform: translate(-50%, -50%) rotate(45deg);
            }
    
            .modal__close:after {
                transform: translate(-50%, -50%) rotate(-45deg);
            }
    
            .modal__close:hover:after,
            .modal__close:hover:before {
                background: #4b5563;
                /* Darker gray on hover */
            }
    
            .modal textarea,
            .modal input[type="number"] {
                width: 100%;
                /* Full width */
                padding: 8px 12px;
                border: 1px solid #d1d5db;
                /* Gray border */
                border-radius: 6px;
                margin-top: 4px;
                margin-bottom: 12px;
                box-sizing: border-box;
                /* Include padding/border in width */
                font-size: 1rem;
            }
    
            .modal label {
                display: block;
                margin-bottom: 4px;
                font-weight: 500;
            }
    
            /* Profile Card Styles */
            .profile-cards-container {
                display: flex;
                flex-wrap: wrap;
                /* Allow cards to wrap on smaller screens */
                gap: 20px;
                /* Space between cards */
                margin-top: 20px;
            }
    
            .profile-card-wrapper {
                width: 100%;
                /* Full width on small screens */
                max-width: 350px;
                /* Max width per card */
                flex: 1 1 300px;
                /* Allow flexing and shrinking, base width 300px */
            }
    
            .profile-card {
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                transition: all 0.3s ease-in-out;
                border: 1px solid #e5e7eb;
                /* Light border */
                width: 100%;
                /* Take full width of its wrapper */
            }
    
            .profile-card .header {
                display: flex;
                align-items: center;
                padding: 16px;
                border-bottom: 1px solid #e5e7eb;
                /* Light border */
            }
    
            .profile-card .profile-picture {
                width: 50px;
                /* Slightly smaller */
                height: 50px;
                border-radius: 50%;
                object-fit: cover;
                margin-right: 12px;
                background-color: #e5e7eb;
                /* Placeholder background */
            }
    
            .profile-card .info {
                flex-grow: 1;
            }
    
            .profile-card .name {
                margin: 0;
                font-size: 1.1em;
                font-weight: 600;
                /* Bolder name */
                color: #1f2937;
            }
    
            .profile-card .bio {
                margin: 4px 0 0;
                font-size: 0.9em;
                color: #6b7280;
                /* Medium gray */
                line-height: 1.4;
            }
    
            .profile-card .content {
                padding: 0 16px 16px 16px;
                /* Remove top padding */
            }
    
            .profile-card .expanded-content {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in-out, padding-top 0.3s ease-in-out, margin-top 0.3s ease-in-out;
                padding-top: 0;
                margin-top: 0;
                color: #4b5563;
                /* Darker gray for content */
                line-height: 1.6;
                font-size: 0.95em;
            }
    
            .profile-card.expanded .expanded-content {
                max-height: 500px;
                /* Adjust as needed */
                padding-top: 12px;
                /* Add padding when expanded */
                margin-top: 10px;
            }
    
            .profile-card .read-more-btn {
                background: none;
                border: none;
                color: #2563eb;
                /* Blue */
                cursor: pointer;
                padding: 8px 0;
                font-size: 0.9em;
                font-weight: 500;
                display: block;
                margin-top: 10px;
                width: auto;
                /* Don't force full width */
                text-align: left;
            }
    
            .profile-card .read-more-btn:hover {
                text-decoration: underline;
            }
    
            /* No visual changes needed for expanded card itself, handled by content */
    
            @media screen and (max-width: 768px) {
                .modal__inner {
                    width: 95%;
                    /* Slightly wider on mobile */
                    max-height: 90vh;
                    padding: 1em 1.5em;
                }
    
                .profile-cards-container {
                    flex-direction: column;
                    /* Stack cards vertically */
                    align-items: center;
                    /* Center cards */
                }
    
                .profile-card-wrapper {
                    max-width: 90%;
                    /* Allow cards to be wider on mobile */
                    flex-basis: auto;
                    /* Reset flex basis */
                }
            }