:root {
 --bg: #E8DFF0;
 --accent1: #ff2b7d;
 --accent2: #b14b7f;
 --deep: #000000; /* Changed to pure black */
 --glass: rgba(255, 255, 255, 0.14);
 --container-width: 1100px;
 --radius: 20px;
 font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Base */
* { box-sizing: border-box; }
html, body {
 height: 100%;
 margin: 0;
 background: linear-gradient(180deg, var(--bg), #ebd5ee 100%);
 background-attachment: fixed;
 color: #000000; /* Ensure base body text is black */
 -webkit-font-smoothing: antialiased;
 line-height: 1.45;
}
.container {
 width: min(94%, var(--container-width));
 margin-left: auto; /* Centering the container */
margin-right: auto; /* Centering the container */
}


/* Header */
.site-header {
 position: sticky; top: 0; z-index: 40;
 /* UPDATED: Use glass for transparent/blurred header background */
 background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* END UPDATE */
 padding: 10px 0 6px;
}
.header-inner {
 display: flex; align-items: center; justify-content: space-between; padding: 18px 0;
}
.brand { display: flex; gap: 12px; align-items: center; }
.logo-mark {
 width: 44px; height: 44px; border-radius: 10px;
background: linear-gradient(135deg, var(--accent1), var(--accent2));
 box-shadow: 0 6px 18px rgba(177, 75, 127, 0.22);
}
.brand-title { font-weight: 700; letter-spacing: 0.3px; color: var(--deep); }

.main-nav { display: flex; gap: 12px; align-items: center; }
.main-nav a {
 color: #000000; /* Changed to black */
 text-decoration: none; font-weight: 600;
 padding: 8px 6px; border-radius: 8px;
 transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.main-nav a:hover { background: rgba(255,255,255,0.6); transform: translateY(-2px); }

/* Search icon/link */
.search-link {
display: inline-flex; align-items: center; justify-content: center;
 width: 36px; height: 36px; border-radius: 8px;
}
.search-link i { font-size: 18px; color: #000; /* Ensure search icon is black */ }

/* Burger Menu */
.burger {
 display: flex; flex-direction: column; justify-content: space-between;
 width: 28px; height: 22px; background: transparent; border: none; cursor: pointer; z-index: 50; margin-left: 6px;
}
.burger span { display: block; height: 3px; width: 100%; background: #000; border-radius: 3px; transition: all 0.3s ease; }

/* Mobile Menu */
.mobile-menu {
 display: none; position: absolute; top: 70px; right: 10px;
 background: var(--glass); border-radius: 12px; padding: 12px; width: min(94%, 300px);
box-shadow: 0 20px 40px rgba(40, 20, 60, 0.12); transition: all 0.3s ease-in-out;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mobile-menu a {
 display: block; padding: 8px 6px; color: var(--deep); font-weight: 700; text-decoration: none;
}
.mobile-menu.is-open { display: block; }

/* Hero */
.hero {
 padding: 80px 0; min-height: 400px; display: flex; align-items: center; justify-content: center; position: relative;
}
.hero-inner { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 28px; text-align: center; }
.hero-title { font-size: 48px; font-weight: 800; letter-spacing: 0.6px; margin-bottom: 16px; color: #000; } /* Changed to black */
.hero-copy { font-size: 18px; max-width: 700px; margin-bottom: 24px; color: #000; } /* Changed to black */

.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: 0.3s; }
.btn-primary { background: linear-gradient(90deg, var(--accent1), var(--accent2)); color: #6c6161; border: none; }
.btn-primary:hover { opacity: 0.85; }

.magic-text {
 background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent1));
 background-size: 300% 300%;
 -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Features */
.features-wrapper {
 /* UPDATED: Increased width to showcase the grid alignment */
    width: 94%;
    max-width: var(--container-width);
    margin: 40px auto;
    padding: 40px 20px;
    background: var(--glass);
 border-radius: var(--radius); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.features { padding: 60px 0; }
.features h2 { text-align: center; font-size: 32px; margin-bottom: 36px; color: var(--deep); }

.features-grid {
 /* UPDATED: Changed to CSS Grid for specific placement */
    display: grid;
    /* Create 6 columns for fine-grained placement: 2 for card 1, 2 for card 2, 2 for card 3 */
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    justify-content: unset;
}

.feature-card {
background: #fff; border-radius: 16px; padding: 24px;
    /* Card takes up 2 out of 6 columns */
    grid-column: span 2;
    width: unset;
    height: unset;
    min-height: 260px; /* Keep a minimum height */
 text-align: center;
 box-shadow: 0 8px 24px rgba(60, 10, 60, 0.06);
 display: flex; flex-direction: column; justify-content: center; gap: 12px; cursor: pointer;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(60, 10, 60, 0.1); }
.feature-card i { font-size: 80px; color: #000; margin: 0 auto; }
.feature-card h3 { margin: 0; font-size: 18px; color: var(--accent2); }
.feature-card p { font-size: 14px; color: #000; } /* Changed to black */

/* NEW RULES for left/right alignment on wider screens: */

/* Card 1, 4, 7... start at the first column (LEFT) */
.features-grid .feature-card:nth-child(3n + 1) {
    grid-column: 1 / span 2;
}
/* Card 2, 5, 8... start at the third column (CENTER) */
.features-grid .feature-card:nth-child(3n + 2) {
    grid-column: 3 / span 2;
}
/* Card 3, 6, 9... start at the fifth column (RIGHT) */
.features-grid .feature-card:nth-child(3n + 0) {
    grid-column: 5 / span 2;
}

/* Footer */
.site-footer {
margin: 80px 0 0; padding: 80px 0;
 background: linear-gradient(180deg, #E8DFF0, #f7eef8 60%); border-radius: 0; color: #000; /* Changed to black */
}
.footer-inner {
 display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: nowrap;
}
.follow { display: flex; align-items: center; gap: 18px; }
.follow.horizontal { display: flex; align-items: center; gap: 18px; } /* explicit horizontal */
.follow-left { display: flex; flex-direction: column; align-items: flex-start; }
.follow-left h4 { margin: 0; color: #000; } /* Changed to black */
.follow-sub { font-size: 12px; color: #000; } /* Changed to black */

.follow-right { display: flex; gap: 12px; align-items: center; }
/* Style for Font Awesome icons in footer */
.follow-right a {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: #fff; color: var(--deep); /* Default icon color is dark */
transition: transform .15s, background .15s, color .15s;
}
.follow-right a:hover { transform: scale(1.06); background: var(--accent1); color: #fff; }
.follow-right a i { font-size: 18px; line-height: 1; }

/* Custom Colors for Facebook and Instagram Icons */
/* Targets the anchor tag containing the Facebook icon (assuming Font Awesome classes) */
.follow-right a i.fa-facebook-f,
.follow-right a i.fa-facebook {
color: #4267B2; /* Facebook Blue */
}
.follow-right a:hover i.fa-facebook-f,
.follow-right a:hover i.fa-facebook {
 color: #fff; /* White on hover */
}

/* Targets the anchor tag containing the Instagram icon (assuming Font Awesome classes) */
.follow-right a i.fa-instagram {
 /* Instagram Gradient approximated */
 background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 /* Reset default color, as text-fill-color will handle it */
 color: initial;
}
.follow-right a:hover i.fa-instagram {
-webkit-background-clip: initial; /* Remove clip on hover */
 -webkit-text-fill-color: initial; /* Remove fill color on hover */
 color: #fff; /* White on hover */
}


/* (Older image styles may still exist; fine to keep for compatibility) */
.follow-right a img { width: 36px; height: 36px; display: block; }

.footer-news { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer-news h4 { margin: 0; }
.ticker { overflow: hidden; background: transparent; padding: 6px 0; min-width: 260px; }
.ticker-track { display: inline-block; white-space: nowrap; animation: ticker 16s linear infinite; }
.ticker-track span { display: inline-block; padding-right: 36px; color: #000; font-weight: 700; } /* Changed to black */
.footer-bottom { padding-top: 16px; text-align: center; color: #000; opacity: 0.9; } /* Changed to black */

@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Responsive */
@media (max-width: 1024px){
 .hero-title { font-size: 36px; }
 /* On smaller screens, go back to centering the cards */
    .features-grid {
        display: flex; /* Override grid for mobile */
        flex-direction: column;
        align-items: center;
    }
    /* Reset manual grid positioning on mobile */
    .features-grid .feature-card {
        grid-column: span 1; /* Reset span */
        width: 260px; /* Restore original mobile width */
    }
    .features-grid .feature-card:nth-child(3n + 1),
    .features-grid .feature-card:nth-child(3n + 2),
    .features-grid .feature-card:nth-child(3n + 0) {
        grid-column: auto;
    }
    
    /* End mobile features reset */
    
 .footer-news { align-items: flex-start; }
 .footer-inner { flex-direction: column; gap: 14px; align-items: flex-start; }
 .follow-right { order: 2; }
}

/* MODAL STYLES (kept from your original) */
.modal {
 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center;
 z-index: 100; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease;
}
.modal.is-open { visibility: visible; opacity: 1; }
.modal-content {
background: #fff; border-radius: 20px; padding: 30px; width: min(90%, 600px); position: relative;
 transform: scale(0.95); transition: transform 0.3s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 display: flex; flex-direction: column; align-items: center; text-align: center;
}
.modal.is-open .modal-content { transform: scale(1); }
.modal-close-btn {
position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 2rem;
 cursor: pointer; color: #000; transition: color 0.2s; /* Changed to black */
}
.modal-close-btn:hover { color: #333; }
.modal-content h3 { font-size: 2rem; margin-bottom: 20px; color: var(--accent2); }
.modal-content p { font-size: 1rem; color: #000; margin-bottom: 20px; } /* Changed to black */

/* COMMON STYLES */
.btn, .post-btn, .chat-send-btn, .pathway-btn, .roadmap-btn, .challenge-btn, .event-btn, .mood-log-btn, .search-btn, .tool-btn {
background: var(--accent2); color: #fff; border: none; padding: 12px 24px; border-radius: 999px; cursor: pointer; font-weight: 700; transition: background 0.3s;
}
.btn:hover, .post-btn:hover, .chat-send-btn:hover, .pathway-btn:hover, .roadmap-btn:hover, .challenge-btn:hover, .event-btn:hover, .mood-log-btn:hover, .search-btn:hover, .tool-btn:hover { background: #a13a6e; }
.section-description { font-style: italic; color: #000; margin-top: -10px; margin-bottom: 30px; } /* Changed to black */

/* SEARCH FEATURE */
.search-input-container { display: flex; width: 100%; gap: 10px; }
.search-input {
width: 100%; border: 1px solid #ccc; border-radius: 8px; padding: 10px; margin-bottom: 10px;
}
.search-results { width: 100%; margin-top: 20px; text-align: left; font-style: italic; color: #000; } /* Changed to black */
.result-item { background: #f9f9f9; padding: 15px; border-radius: 12px; margin-top: 10px; }
.result-item h5 { margin: 0 0 5px; color: var(--deep); }
.search-suggestions { width: 100%; margin-top: 20px; text-align: left; }
.search-suggestions h4 { margin: 0 0 10px; color: var(--accent2); }
.suggestions-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.suggestion-item {
 background: #f0f0f0; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 0.9rem; transition: background 0.2s; color: #000; /* Changed to black */
}
.suggestion-item:hover { background: #ddd; }

/* (All your additional sections kept intact) */

/* GAMIFIED PROGRESS */
.card-content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; width: 100%; }
.stat-item { background: #f7f7f7; border-radius: 12px; padding: 15px; }
.stat-item h4 { margin: 0 0 5px; font-size: 0.9rem; color: #000; text-transform: uppercase; } /* Changed to black */
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--deep); }
.progress-bar-container { width: 100%; text-align: left; margin-top: 20px; }
.progress-bar-container label { font-weight: 600; color: var(--deep); display: block; margin-bottom: 5px; }
.progress-bar-container progress {
width: 80%; height: 15px; border-radius: 10px; overflow: hidden; background: #eee; -webkit-appearance: none; appearance: none;
}
.progress-bar-container progress::-webkit-progress-bar { background: #eee; border-radius: 10px; }
.progress-bar-container progress::-webkit-progress-value {
background: linear-gradient(90deg, var(--accent1), var(--accent2)); border-radius: 10px; transition: width 0.5s ease-in-out;
}
.progress-bar-container span { font-weight: 600; margin-left: 10px; color: var(--deep); }
.badge-gallery { margin-top: 20px; }
.badge-gallery h4 { margin: 0 0 10px; color: var(--accent2); }
.badges-grid { display: flex; justify-content: center; gap: 15px; }
.badge {
position: relative; font-size: 3rem; background: #f0f0f0; border-radius: 12px; padding: 10px; text-align: center;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.2s; cursor: pointer;
}
.badge:hover { transform: scale(1.1); }
.badge small { display: block; font-size: 0.7rem; color: #000; margin-top: 5px; } /* Changed to black */
.badge-tooltip {
 position: absolute; background: #c4b2b2; color: #fff; padding: 10px; border-radius: 8px; font-size: 0.9rem; white-space: nowrap; z-index: 110;
transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.3s;
}
.badge-tooltip.visible { opacity: 1; visibility: visible; }
.reward-section { margin-top: 30px; width: 100%; text-align: left; }
.reward-section h4 { margin: 0 0 10px; color: var(--accent2); }
.reward-item { display: flex; align-items: center; gap: 15px; background: #f9f9f9; padding: 15px; border-radius: 12px; margin-bottom: 10px; }
.reward-item img { filter: invert(1); }
.reward-item h5 { margin: 0; font-size: 1.1rem; color: var(--deep); }
.reward-item small { color: #000; } /* Changed to black */

/* SOCIAL LEARNING WALLS */
.filter-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.filter-btn { background: #f0f0f0; color: #000; border: none; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; } /* Changed to black */
.filter-btn:hover, .filter-btn.active { background: var(--accent2); color: #fff; }
.social-post-container {
 width: 100%; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 15px; padding: 10px;
 border: 1px solid #eee; border-radius: 12px;
}
.social-post { background: #f9f9f9; padding: 20px; border-radius: 12px; text-align: left; width: 100%; }
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-avatar { width: 40px; height: 40px; background: #ddd; border-radius: 50%; }
.post-user { font-weight: 700; color: var(--deep); }
.post-text { margin: 0; color: #000; } /* Changed to black */
.post-actions { display: flex; gap: 15px; margin-top: 15px; }
.action-btn { background: none; border: none; cursor: pointer; font-size: 1rem; display: flex; align-items: center; gap: 5px; color: #000; transition: color 0.2s; } /* Changed to black */
.action-btn:hover { color: var(--accent2); }
.post-comments { margin-top: 15px; border-top: 1px dashed #eee; padding-top: 10px; }
.comment-item { background: #f0f0f0; padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; color: #000; } /* Changed to black */
.post-textarea { width: 100%; border: 1px solid #ccc; border-radius: 8px; padding: 10px; margin-bottom: 10px; resize: vertical; }

/* AI LEARNING PATHWAYS */
.pathway-diagram { display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.pathway-step { background: #f0f0f0; padding: 10px 20px; border-radius: 999px; font-weight: 600; color: #000; cursor: pointer; transition: background 0.2s, transform 0.2s; } /* Changed to black */
.pathway-step:hover { transform: scale(1.05); }
.pathway-step.current { background: var(--accent1); color: #fff; box-shadow: 0 4px 8px rgba(255, 43, 125, 0.3); }
.pathway-arrow { font-size: 1.5rem; color: #000; } /* Changed to black */
.pathway-details { margin-top: 20px; text-align: left; background: #f9f9f9; padding: 20px; border-radius: 12px; width: 100%; color: #000; } /* Changed to black */
.pathway-tools { margin-top: 20px; width: 100%; text-align: center; }
.pathway-tools h4 { margin-bottom: 10px; color: var(--accent2); }
.tool-btn { margin: 5px; }

/* AI TUTORING */
.tutor-chat-log {
 width: 100%; max-height: 300px; overflow-y: auto; border: 1px solid #ddd; border-radius: 12px; padding: 15px;
 display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 15px;
}
.tutor-message { background: #eef; padding: 10px; border-radius: 12px; align-self: flex-start; color: #000; } /* Changed to black */
.user-message { background: #dff; padding: 10px; border-radius: 12px; align-self: flex-end; color: #000; } /* Changed to black */
.chat-input-container { display: flex; gap: 10px; width: 100%; }
.chat-input { flex-grow: 1; border: 1px solid #ccc; border-radius: 8px; padding: 10px; }
.chat-suggestions { width: 100%; margin-top: 20px; text-align: left; }

/* CAREER ROADMAP */
.roadmap-steps { display: flex; justify-content: space-around; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.roadmap-step {
background: #f9f9f9; padding: 20px; border-radius: 12px; text-align: center; flex: 1; min-width: 150px; position: relative; transition: background 0.3s; color: #000; /* Changed to black */
}
.roadmap-step.completed { background: #dff; border: 2px solid var(--accent2); }
.roadmap-icon { font-size: 2rem; margin-bottom: 10px; }
.complete-btn { margin-top: 10px; background: var(--accent1); color: white; padding: 8px 16px; border: none; border-radius: 999px; cursor: pointer; }
.complete-btn:disabled { background: #ccc; cursor: not-allowed; }
.roadmap-info { margin-top: 30px; width: 100%; text-align: left; color: #000; } /* Changed to black */
.roadmap-info h4 { margin: 0 0 10px; color: var(--accent2); }
.roadmap-info ul { list-style-type: '✅ '; padding-left: 20px; }

/* INDUSTRY INSIGHTS */
.chart-container { width: 100%; max-width: 500px; height: 300px; margin: 0 auto 20px; }
.insights-panel { margin-top: 30px; width: 100%; text-align: left; color: #000; } /* Changed to black */
.insights-panel h4 { margin: 0 0 10px; color: var(--accent2); }
.skills-list { list-style: none; padding: 0; }
.skills-list li {
display: flex; align-items: center; gap: 10px; background: #f9f9f9; padding: 10px 15px; border-radius: 8px; margin-bottom: 8px;
}

/* MOOD TRACKING */
.mood-emojis { font-size: 3rem; margin-bottom: 20px; display: flex; gap: 20px; justify-content: center; }
.mood-emoji { cursor: pointer; transition: transform 0.2s, filter 0.2s, background 0.2s; padding: 5px; border-radius: 10px; }
.mood-emoji:hover { transform: scale(1.2); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }
.mood-emoji.selected { background: #f0f0f0; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.mood-history { margin-top: 30px; width: 100%; text-align: left; }
.mood-history h4 { margin: 0 0 10px; color: var(--accent2); }
#moodList { list-style: none; padding: 0; max-height: 150px; overflow-y: auto; }
#moodList li {
background: #f9f9f9; padding: 10px; border-radius: 8px; margin-bottom: 5px; font-size: 0.9rem; display: flex; justify-content: space-between; color: #000; /* Changed to black */
}
#moodList li .date { color: #000; } /* Changed to black */
.resource-panel { margin-top: 30px; width: 100%; text-align: left; }
.resource-panel h4 { margin: 0 0 10px; color: var(--accent2); }
.mood-support-buttons { display: flex; gap: 15px; margin-top: 20px; }
.support-btn { padding: 12px 24px; font-weight: 600; }

/* WELLNESS CHALLENGES */
.challenge-list { list-style: none; padding: 0; width: 100%; text-align: left; margin-bottom: 20px; }
.challenge-list li {
 background: #f9f9f9; padding: 15px; border-radius: 12px; margin-bottom: 10px; cursor: pointer; transition: background 0.2s; color: #000; /* Changed to black */
}
.challenge-list li:hover { background: #f0f0f0; }
.challenge-progress-container { margin-top: 30px; width: 100%; text-align: left; }
.challenge-progress-container h4 { margin: 0 0 10px; color: var(--accent2); }
.progress-details { margin-top: 10px; color: #000; } /* Changed to black */

/* NETWORKING */
.user-profile-list { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.user-profile { display: flex; align-items: center; background: #f9f9f9; padding: 15px; border-radius: 12px; text-align: left; gap: 15px; }
.profile-avatar { width: 50px; height: 50px; border-radius: 50%; background: #ddd; }
.profile-info { flex-grow: 1; }
.profile-info h4 { margin: 0; font-size: 1.1rem; color: var(--deep); }
.profile-info p { margin: 0; font-size: 0.9rem; color: #000; } /* Changed to black */
.connect-btn { background: var(--accent1); color: #fff; border: none; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background 0.3s; }
.connect-btn:disabled { background: #ccc; cursor: not-allowed; }
.filter-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.profile-upload-section {
 width: 100%; margin-top: 30px; text-align: center; border-top: 1px dashed #ccc; padding-top: 20px;
}
.custom-file-upload {
background: #f0f0f0; padding: 10px 20px; border-radius: 999px; cursor: pointer; display: inline-block; color: #000; font-weight: 600; transition: background 0.2s; /* Changed to black */
}
.custom-file-upload:hover { background: #e0e0e0; }
.upload-preview {
margin-top: 20px; width: 150px; height: 150px; border-radius: 50%; border: 3px dashed #ccc; display: flex; justify-content: center; align-items: center;
 margin: 20px auto; overflow: hidden;
}
.profile-preview-img { width: 100%; height: 100%; object-fit: cover; }
.upload-btn { display: none; margin-top: 10px; }

/* EVENT CALENDAR */
.event-list { width: 100%; display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.event-item { display: flex; align-items: center; gap: 15px; background: #f9f9f9; padding: 15px; border-radius: 12px; }
.event-date {
background: var(--accent2); color: #fff; padding: 10px; border-radius: 8px; text-align: center; font-weight: 700; width: 60px;
}
.event-date span:first-child { display: block; font-size: 1.5rem; }
.event-date span:last-child { display: block; font-size: 0.8rem; text-transform: uppercase; }
.event-details { text-align: left; }
.event-details h4 { margin: 0; color: var(--deep); }
.event-details p { margin: 0; font-size: 0.9rem; color: #000; } /* Changed to black */
.event-meta { margin-top: 5px; color: #000; font-style: italic; } /* Changed to black */
.event-downloads { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.download-link {
 background: #e0e0e0; padding: 5px 10px; border-radius: 999px; font-size: 0.8rem; text-decoration: none; color: #000; /* Changed to black */
}
.rsvp-btn { margin-left: auto; background: var(--accent1); color: #fff; border: none; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.rsvp-btn:disabled { background: #ccc; cursor: not-allowed; }

/* --- Chat Modal Styles --- */
#chat-modal {
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.chat-overlay {
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.5);
}
.chat-box {
    position:relative;
    background:#fff;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
    width:320px;
    max-height:80vh;
    display:flex;
    flex-direction:column;
    z-index:10000;
}
.chat-header {
    background:#0077b5;
    color:#fff;
    padding:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:600;
    border-radius:10px 10px 0 0;
}
.chat-messages {
    flex:1;
    padding:10px;
    overflow-y:auto;
    background:#f7f7f7;
}
.msg {
    margin:5px 0;
    max-width:80%;
    padding:6px 10px;
    border-radius:10px;
    word-wrap:break-word;
}
.msg.me {
    background:#0077b5;
    color:#fff;
    margin-left:auto;
}
.msg.them {
    background:#e4e6eb;
    color:#333;
    margin-right:auto;
}
.chat-input {
    display:flex;
    border-top:1px solid #ddd;
}
.chat-input input {
    flex:1;
    border:none;
    padding:10px;
    outline:none;
}
.chat-input button {
    background:#0077b5;
    color:#fff;
    border:none;
    padding:0 15px;
    cursor:pointer;
}
.chat-input button:hover {
    background:#005582;
}
.chat-close {
    background:none;
    border:none;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}