.theme-light {
  --bg-primary:       #ffffff;  /* Soft off-white */
  --bg-secondary:     #f0f2f5;  /* Gentle contrast */
  --text-primary:     #2d2d2d;  /* Soft charcoal */
  --text-secondary:   #5f6368;  /* Muted gray */
  --border-color:     #dcdfe3;
  --link-color:       #3b82f6;  /* Calmer blue */
  --link-hover-color: #2563eb;  /* Slightly stronger */
  --button-bg:        #3b82f6;
  --button-text:      #ffffff;
  --button-hover-bg:  #2563eb;
  --card-bg:          #ffffff;
  --input-bg:         #f1f5f9;  /* Very light gray-blue */
  --input-border:     #d1d5db;
  --input-focus-ring: #60a5fa;
  --modal-overlay-bg: rgba(249, 250, 251, 0.8);
  --profile-modal-bg: #ffffff;
  --notification-success-bg: #4ade80;
  --notification-error-bg: #f87171;
  --notification-info-bg: #60a5fa;
  --notification-warning-bg: #facc15;
  --notification-text-color: #1f2937;
  --code-bg:          #f9fafb;
  --code-text:        #374151;
  --blockquote-border: #e5e7eb;
  --blockquote-text:   #6b7280;

  --nav-bg: #ffffff;
  --nav-text: #2d2d2d;
  --nav-border-color: #e5e7eb;

  --button-primary-bg: #101010;
  --button-primary-text: #ffffff;
  --button-primary-hover-bg: #4a4a4a;
  --button-primary-border: transparent;

  --button-secondary-bg: #f3f4f6;
  --button-secondary-text: #2d2d2d;
  --button-secondary-hover-bg: #dbeafe;
  --button-secondary-border: #e5e7eb;

  --button-danger-bg: #ef4444;
  --button-danger-text: #ffffff;
  --button-danger-hover-bg: #b91c1c;
  --button-danger-border: transparent;

  --input-field-bg: #fbfbfb;
  --input-field-text: #2d2d2d;
  --input-field-border: #e3e3e3;
  --input-field-focus-ring: #3b82f6;
  --input-field-placeholder-text: #cfcfcf;

  --card-default-bg: #ffffff;
  --card-default-border: #e5e7eb;

  --post-card-bg: #ffffff;
  --post-card-border: #e5e7eb;

  --comment-bg: #f9fafb;

  --dropdown-bg: #ffffff;
  --dropdown-border: #e5e7eb;
  --dropdown-text: #2d2d2d;
  --dropdown-item-hover-bg: #f3f4f6;

  --modal-content-bg: #ffffff;

  --like-button-color: #6b7280;
  --like-button-active-color: #ff2d2d;
  --like-button-hover-color: #ff6a6a;

  --welcome-banner-bg: #f9fafb;
  --welcome-banner-text-header: #1f2937;
  --welcome-banner-text-body: #6b7280;
  --welcome-banner-border: #e5e7eb;

  --profile-avatar-border: #ffffff;
  --profile-initials-bg: #e5e7eb;
  --profile-initials-text-color: #6b7280;
  --filter-bar-bg: rgba(249, 250, 251, 0.8);
}



/* Definition for .theme-dark (New or Updated) */
.theme-dark {
    /* Base colors */
    --bg-primary:       #D1A9FF; /* Common dark theme main background */
    --bg-secondary:     #1E1E1E; /* Slightly lighter secondary background */
    --text-primary:     #E0E0E0; /* Light gray for primary text */
    --text-secondary:   #A0A0A0; /* Medium gray for secondary text */
    --border-color:     #3A3A3A; /* Dark gray for borders */
    --link-color:       #BB86FC; /* Purple accent, common in dark themes */
    --link-hover-color: #D1A9FF; /* Lighter purple for hover */
    --button-bg:        #BB86FC; /* Primary button background (same as link) */
    --button-text:      #000000; /* Black text for contrast on purple button */
    --button-hover-bg:  #A870E0; /* Darker purple for button hover */
    --card-bg:          #242424; /* Dark gray for cards */
    --input-bg:         #2C2C2C; /* Slightly lighter gray for inputs */
    --input-border:     #3A3A3A; /* Matches general border color */
    --input-focus-ring: #BB86FC; /* Purple focus ring */
    --modal-overlay-bg: rgba(0, 0, 0, 0.7); /* Darker overlay */
    --profile-modal-bg: #2A2A2A; /* Specific for dropdown/profile modal, slightly distinct */
    --notification-success-bg: #388E3C; /* Darker green */
    --notification-error-bg:   #D32F2F; /* Darker red */
    --notification-info-bg:    #1976D2; /* Darker blue */
    --notification-warning-bg: #FBC02D; /* Darker yellow/amber */
    --notification-text-color: #FFFFFF; /* White text for notifications */
    --code-bg:           #1E1E1E; /* Matches secondary background */
    --code-text:         #E0E0E0; /* Matches primary text */
    --blockquote-border: #4A4A4A;
    --blockquote-text:   #B0B0B0;

    /* Nav */
    --nav-bg: #242424; /* Matches card background */
    --nav-text: #E0E0E0;
    --nav-border-color: #3A3A3A;

    /* Buttons */
    --button-primary-bg: #BB86FC;
    --button-primary-text: #000000;
    --button-primary-hover-bg: #A870E0;
    --button-primary-border: transparent;

    --button-secondary-bg: #3A3A3A; /* Using border color as secondary button bg */
    --button-secondary-text: #E0E0E0;
    --button-secondary-hover-bg: #4A4A4A;
    --button-secondary-border: #5A5A5A;

    --button-danger-bg: #CF6679; /* Material Design Dark theme error color */
    --button-danger-text: #000000;
    --button-danger-hover-bg: #B04F5F;
    --button-danger-border: transparent;

    /* Input fields */
    --input-field-bg: #2C2C2C;
    --input-field-text: #E0E0E0;
    --input-field-border: #3A3A3A;
    --input-field-focus-ring: #BB86FC;
    --input-field-placeholder-text: #A0A0A0; /* Matches secondary text */

    /* Cards */
    --card-default-bg: #242424;
    --card-default-border: #3A3A3A;
    
    --post-card-bg: #242424;
    --post-card-border: #3A3A3A;

    /* Comments */
    --comment-bg: #1E1E1E; /* Matches secondary background */

    /* Dropdowns */
    --dropdown-bg: #2A2A2A; /* Matches profile modal bg */
    --dropdown-border: #3A3A3A;
    --dropdown-text: #E0E0E0;
    --dropdown-item-hover-bg: #3A3A3A; /* Using border color for item hover */
    
    /* Modals */
    --modal-content-bg: #242424; /* Matches card background */

    /* Like buttons */
    --like-button-color: #A0A0A0; /* Secondary text color */
    --like-button-active-color: #BB86FC; /* Link color */
    --like-button-hover-color: #BB86FC; /* Link color */

    /* Welcome banner */
    --welcome-banner-bg: #242424; /* Card background */
    --welcome-banner-text-header: #E0E0E0;
    --welcome-banner-text-body: #A0A0A0;
    --welcome-banner-border: #3A3A3A;

    /* Profile avatar */
    --profile-avatar-border: #242424; /* Card background */
    --profile-initials-bg: #3A3A3A;   /* Border color as initials bg */
    --profile-initials-text-color: #E0E0E0; /* Primary text for initials */
    --filter-bar-bg: #292929;
}


.theme-midnight {
    /* Base colors */
    /* Base colors - Backgrounds slightly darkened */
    --bg-primary:       #8c7ae6;       /* Accent color, not a main background, kept as is */
    --bg-secondary:     #070714;    /* Darkened from #0d0c1d */
    --text-primary:     #dcdcff;     
    --text-secondary:   #8c7ae6;   
    --border-color:     #2A283E;     /* Slightly adjusted from #2f2d44 to match new bg tones */
    --link-color:       #d15de5;       
    --link-hover-color: #a463e8;    
    --button-bg:        #8c7ae6;       
    
    --button-text:      #020617;     
    --button-hover-bg:  #4f4970; 
    --card-bg:          #18172A;     /* Darkened from #1c1b2f */    
    --input-bg:         #35304D;     /* Darkened from #3a3552 */   
    --input-border:     #18172A;     /* Darkened from #1c1b2f, matches new card-bg */
    --input-focus-ring: #665b8a; 
    --modal-overlay-bg: rgba(2, 6, 23, 0.85); /* Slightly increased opacity */
    --profile-modal-bg: #181A21; /* Darkened from #1C1F26 - This is also used for dropdown-bg */
    --notification-success-bg: #15803d; 
    --notification-error-bg: #b91c1c;   
    --notification-info-bg: #7e62b8;  
    --notification-warning-bg: #65533f; 
    --notification-text-color: #e2e8f0; 
    --code-bg:           #1a2535;     /* Darkened from #1e293b */    
    --code-text:         #cbd5e1;       
    --blockquote-border: #2e3c4f;     /* Darkened from #334155 */
    --blockquote-text:   #94a3b8;   

    /* Nav */
    --nav-bg: #18172A; /* Darkened from #1c1b2f */
    --nav-text: #dcdcff;
    --nav-border-color: #2A283E; /* Matches new --border-color */

    /* Buttons */
    --button-primary-bg: #8c7ae6;
    --button-primary-text: #020617;
    --button-primary-hover-bg: #4f4970;
    --button-primary-border: transparent;

    --button-secondary-bg: #35304D; /* Darkened from #3a3552, matches new --input-bg */
    --button-secondary-text: #dcdcff;
    --button-secondary-hover-bg: #8c7ae6;
    --button-secondary-border: #2A283E; /* Matches new --border-color */

    --button-danger-bg: #b91c1c;
    --button-danger-text: #e2e8f0;
    --button-danger-hover-bg: #991b1b;
    --button-danger-border: transparent;

    /* Input fields */
    --input-field-bg: #35304D; /* Darkened from #3a3552 */
    --input-field-text: #dcdcff;
    --input-field-border: #18172A; /* Darkened from #1c1b2f, matches new --card-bg */
    --input-field-focus-ring: #665b8a;
    --input-field-placeholder-text: #8c7ae6;

    /* Cards */
    --card-default-bg: #18172A; /* Darkened from #1c1b2f */
    --card-default-border: #2A283E; /* Matches new --border-color */
    
    --post-card-bg: #18172A; /* Darkened from #1c1b2f */
    --post-card-border: #2A283E; /* Matches new --border-color */

    /* Comments */
    --comment-bg: #0A091A; /* Darkened from #0d0c1d, matches new --bg-secondary */

    /* Dropdowns */
    --dropdown-bg: #181A21; /* Darkened from #1C1F26, matches new --profile-modal-bg */
    --dropdown-border: #2A283E; /* Matches new --border-color */
    --dropdown-text: #dcdcff;
    --dropdown-item-hover-bg: #0A091A; /* Darkened from #0d0c1d, matches new --bg-secondary */
    
    /* Modals */
    --modal-content-bg: #18172A; /* Darkened from #1c1b2f, matches new --card-bg */

    /* Like buttons */
    --like-button-color: #94a3b8;
    --like-button-active-color: #d15de5;
    --like-button-hover-color: #d15de5;

    /* Welcome banner */
    --welcome-banner-bg: #1c1b2f;
    --welcome-banner-text-header: #dcdcff;
    --welcome-banner-text-body: #8c7ae6;
    --welcome-banner-border: #2f2d44;

    /* Profile avatar */
    --profile-avatar-border: #1c1b2f;
    --profile-initials-bg: #3a3552;
    --profile-initials-text-color: #8c7ae6;
    --filter-bar-bg: #110f21;
}

.mention-link {
    color: var(--accent-color);
    font-weight: bold;
    text-decoration: none !important;
}

.mention-link:hover {
    text-decoration: underline;
}

/* --- Apply Theme Variables --- */
/* Resetting some Tailwind text colors to use theme variables */
.text-gray-800 { color: var(--text-primary); }
.text-gray-700 { color: var(--text-primary); } 
.text-gray-600 { color: var(--text-secondary); }
.text-gray-500 { color: var(--text-secondary); }
.text-gray-400 { color: var(--text-secondary); } 

.text-blue-600 { color: var(--link-color); }
.text-blue-800 { color: var(--text-primary); } 


body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}
header {
    background-color: var(--nav-bg); /* UPDATED */
    border-bottom: 1px solid var(--nav-border-color); /* UPDATED */
}
header h1, header #auth-section button span { /* UPDATED nav #login-btn removed */
    color: var(--nav-text); /* UPDATED */
}
header #login-btn { /* For when user is logged out - uses primary button vars */
     background-color: var(--button-primary-bg); /* UPDATED */
     color: var(--button-primary-text); /* UPDATED */
     border: 1px solid var(--button-primary-border); /* ADDED */
}
header #login-btn:hover {
    background-color: var(--button-primary-hover-bg); /* UPDATED */
}

/* General button styles */
.button-primary, button[type="submit"], .button-submit-comment, .button-submit-reply {
    background-color: var(--button-primary-bg); /* UPDATED */
    color: var(--button-primary-text); /* UPDATED */
    padding: 0.5rem 1rem; 
    border-radius: 0.375rem; 
    font-weight: 500; 
    transition: background-color 0.2s;
    border: 1px solid var(--button-primary-border); /* UPDATED */
}
.button-primary:hover, button[type="submit"]:hover, .button-submit-comment:hover, .button-submit-reply:hover {
    background-color: var(--button-primary-hover-bg); /* UPDATED */
}

.button-secondary, .button-cancel-reply {
    background-color: var(--button-secondary-bg); /* UPDATED */
    color: var(--button-secondary-text); /* UPDATED */
    padding: 0.5rem 1rem; 
    border-radius: 0.375rem; 
    font-weight: 500; 
    border: 1px solid var(--button-secondary-border); /* UPDATED */
    transition: background-color 0.2s, border-color 0.2s; /* Added border-color transition */
}
.button-secondary:hover, .button-cancel-reply:hover {
    background-color: var(--button-secondary-hover-bg); /* UPDATED */
}

/* Added .button-danger style */
.button-danger {
    background-color: var(--button-danger-bg);
    color: var(--button-danger-text);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.2s;
    border: 1px solid var(--button-danger-border);
}
.button-danger:hover {
    background-color: var(--button-danger-hover-bg);
}


/* Welcome message */
#welcome-message {
    background-color: var(--welcome-banner-bg);  /* UPDATED */
    border: 1px solid var(--welcome-banner-border); /* UPDATED */
    /* color: var(--text-primary); Main color set by text children */
}
#welcome-message h2 {
     color: var(--welcome-banner-text-header); /* UPDATED */
}
#welcome-message p {
    color: var(--welcome-banner-text-body);  /* UPDATED */
}

/* Create Post Form / Generic Form Styling */
#create-post-form, .form-card { 
    background-color: var(--card-default-bg); /* UPDATED */
    border: 1px solid var(--card-default-border); /* UPDATED */
    /* box-shadow: var(--card-default-shadow); */ /* ADDED - if defined */
    border-radius: 0.375rem; 
    padding: 1.5rem; 
}
#create-post-form h2, .form-card h2, #create-post-form label, .form-card label {
    color: var(--text-primary);
}
input[type="text"], input[type="email"], input[type="password"], textarea {
    background-color: var(--input-field-bg); /* UPDATED */
    border: 1px solid var(--input-field-border); /* UPDATED */
    color: var(--input-field-text); /* UPDATED */
    border-radius: 0.375rem; 
    padding: 0.75rem 1rem; 
}
input[type="text"]::placeholder, input[type="email"]::placeholder, 
input[type="password"]::placeholder, textarea::placeholder { /* ADDED for placeholder */
    color: var(--input-field-placeholder-text);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: var(--input-field-focus-ring); /* UPDATED */
    /* --tw-ring-color: var(--input-field-focus-ring); */ /* Keep if using Tailwind's ring utilities elsewhere */
    box-shadow: 0 0 0 2px var(--input-field-focus-ring); /* UPDATED */
    outline: none;
}
/* Create post button uses .button-primary */


/* Posts / Articles */
article { 
    background-color: var(--post-card-bg); /* UPDATED */
    border: 1px solid var(--post-card-border); /* UPDATED */
    /* box-shadow: var(--post-card-shadow); */ /* ADDED - if defined */
    border-radius: 0.375rem; 
}
article h2, article .font-medium.text-gray-800 { /* Post title and author name */
    color: var(--text-primary);
}
article .text-gray-700, article .text-gray-700 p { /* Post content */
    color: var(--text-primary); 
}
article .text-sm.text-gray-500 { /* Timestamp */
    color: var(--text-secondary);
}
article .border-t, article .border-b { /* Internal borders */
    border-color: var(--post-card-border); /* UPDATED or use a softer internal border var */
}

/* Comments */
.comment-wrapper .bg-gray-50 { /* This class was used for comment background */
    background-color: var(--comment-bg); /* UPDATED */
}
.comment-wrapper .font-medium.text-gray-800 { /* Comment author */
    color: var(--text-primary);
}
.comment-wrapper .text-gray-700 { /* Comment text */
    color: var(--text-primary);
}
.comment-actions .text-xs.text-gray-500 { /* Like count text */
    color: var(--text-secondary);
}
/* .button in comment actions seems to be general, specific like/reply below */
.comment-actions button:hover { /* Reply button text hover */
    color: var(--link-hover-color); /* UPDATED from --border-color */
}
.like-button { 
    color: var(--like-button-color); /* UPDATED */
    transition: color 0.2s ease-in-out;
}
.like-button:hover {
    color: var(--like-button-hover-color) !important; /* UPDATED */
}
.like-button-active {
    color: var(--like-button-active-color) !important;  /* UPDATED */
    font-weight: 600;
}

/* Comment/Reply Forms (Textareas are covered by general input styles) */
.reply-form p.text-gray-500 { /* "Replying to:" text */
    color: var(--text-secondary);
}
.reply-form a { 
    color: var(--link-color);
}
.reply-form a:hover {
    color: var(--link-hover-color);
}
/* Reply/Cancel buttons in reply forms use .button-primary and .button-secondary */

/* Empty State */
#empty-state h3 {
    color: var(--text-primary);
}
#empty-state p {
    color: var(--text-secondary);
}
#empty-state .text-gray-400 { /* Icon color */
    color: var(--text-secondary);
}

/* User Profile Modal (Dropdown in Nav) - Consolidated Styling */
/* Targets #user-profile (index), #user-profile-dropdown-profile (profile), #user-profile-dropdown-settings (settings) */
.post-action-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
}

#user-profile, 
#user-profile-dropdown-profile, 
#user-profile-dropdown-settings { 
    background-color: var(--dropdown-bg); 
    border: 1px solid var(--dropdown-border);
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* Tailwind shadow-lg consistency */
    padding: 0.5rem; /* Tailwind p-2 */
    width: 15rem; /* Tailwind w-60 */
    position: fixed; /* Already in HTML, but good to note */
    z-index: 50; /* Already in HTML */
    /* top: 4rem; right: 1rem; /* Tailwind top-16 right-4 - handled by inline HTML or specific JS if needed, but base structure is this */
}

/* Header section within the dropdown */
#user-profile > div:first-child,
#user-profile-dropdown-profile > div:first-child,
#user-profile-dropdown-settings > div:first-child {
    display: flex;
    align-items: center;
    padding: 0.5rem; /* Tailwind p-2 */
    margin-bottom: 0.5rem; /* Tailwind mb-2 */
    border-bottom: 1px solid var(--dropdown-border); /* Tailwind border-b */
}

/* User name in dropdown */
#user-profile #user-name, 
#user-profile-dropdown-profile #modal-user-name-profile, 
#user-profile-dropdown-settings #modal-user-name-settings {
    color: var(--dropdown-text);
    font-weight: 500; /* Tailwind font-medium */
    font-size: 0.875rem; /* Tailwind text-sm */
}

/* User email in dropdown */
#user-profile #user-email, 
#user-profile-dropdown-profile #modal-user-email-profile, 
#user-profile-dropdown-settings #modal-user-email-settings {
    color: var(--text-secondary); /* Using text-secondary for less emphasis */
    font-size: 0.75rem; /* Tailwind text-xs */
}

/* Profile image container within dropdown */
#modal-profile-img-container,
#modal-profile-img-container-profile,
#modal-profile-img-container-settings {
    /* Styling for the image itself is handled by createProfileImage JS (size, border) */
    margin-right: 0.25rem; /* Tailwind space-x-3 from parent */
}


/* Navigation links container within dropdown */
#user-profile nav,
#user-profile-dropdown-profile nav,
#user-profile-dropdown-settings nav {
    /* space-y-1 is handled by Tailwind class on the nav element */
}

/* Individual menu items (links and buttons) */
.profile-menu-item { /* This class is applied to a and button elements by JS/HTML */
    display: flex; /* For icon alignment */
    align-items: center; /* For icon alignment */
    width: 100%; 
    text-align: left; 
    padding: 0.5rem; /* Tailwind p-2, adjusted from 0.5rem 1rem for consistency */
    border-radius: 0.375rem; /* Tailwind rounded-md, matches index.html appearance */
    transition: background-color 0.2s, color 0.2s;
    color: var(--dropdown-text);
    font-size: 0.875rem; /* Tailwind text-sm */
}
.profile-menu-item svg {
    margin-right: 0.5rem; /* Tailwind mr-2 */
    width: 1.25rem; /* Tailwind w-5 */
    height: 1.25rem; /* Tailwind h-5 */
    /* stroke: currentColor; /* Usually inherited or set inline */
}

.profile-menu-item:hover {
    background-color: var(--dropdown-item-hover-bg);
    color: var(--link-hover-color); /* Make text color also change on hover for better feedback */
}

/* Specific Logout Button in Nav Dropdown */
/* Targets #logout-btn (index), #logout-btn-profile-page (profile), #logout-btn-settings-page (settings) */
#logout-btn, 
#logout-btn-profile-page, 
#logout-btn-settings-page {
    /* .profile-menu-item already provides most styling */
    /* Override for danger indication */
    background-color: transparent; /* Start transparent */
}

#logout-btn:hover, 
#logout-btn-profile-page:hover, 
#logout-btn-settings-page:hover,
.profile-menu-item-danger:hover {
    background-color: var(--button-danger-bg) !important; 
    color: var(--button-danger-text) !important; 
}
#logout-btn:hover svg, 
#logout-btn-profile-page:hover svg, 
#logout-btn-settings-page:hover svg,
.profile-menu-item-danger:hover svg {
    stroke: var(--button-danger-text) !important; /* Ensure icon color changes too */
}


/* Horizontal rule (hr) in dropdown */
#user-profile hr, 
#user-profile-dropdown-profile hr, 
#user-profile-dropdown-settings hr {
    border-top: 1px solid var(--dropdown-border);
    margin-top: 0.25rem; /* Tailwind my-1 */
    margin-bottom: 0.25rem; /* Tailwind my-1 */
}

/* Ensure dropdown items are not overly bold if they are part of .font-medium from user name */
#user-profile .profile-menu-item,
#user-profile-dropdown-profile .profile-menu-item,
#user-profile-dropdown-settings .profile-menu-item {
    font-weight: normal; /* Override any inherited font-medium */
}


/* Confirmation Modal */
#confirmation-modal-overlay {
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(4px); 
}
#confirmation-modal {
    background-color: var(--modal-content-bg); /* UPDATED */
    /* box-shadow: var(--card-default-shadow); */ /* ADDED - if defined for modals */
}
#confirmation-modal h3, #confirmation-modal p {
    color: var(--text-primary);
}
#confirmation-modal-cancel-btn { /* Uses secondary button style */
    background-color: var(--button-secondary-bg); 
    color: var(--button-secondary-text); 
    border: 1px solid var(--button-secondary-border); 
}
#confirmation-modal-cancel-btn:hover {
     background-color: var(--button-secondary-hover-bg); 
}
#confirmation-modal-confirm-btn { /* Uses danger button style */
    background-color: var(--button-danger-bg);  /* UPDATED */
    color: var(--button-danger-text); /* UPDATED */
    border: 1px solid var(--button-danger-border); /* ADDED */
}
 #confirmation-modal-confirm-btn:hover {
    background-color: var(--button-danger-hover-bg); /* UPDATED */
}

#report-modal-overlay {
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(4px);
}

#report-modal {
    background-color: var(--modal-content-bg);
}

#name-vc-modal-overlay {
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(4px);
}

#name-vc-modal-overlay {
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(4px);
}

/* Cropper Modal & Upload Modal (General Modal Styles) */
#crop-modal, #upload-modal { /* The overlay */
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(4px); 
}
.crop-modal-content, #upload-modal .bg-white { /* The modal content box */
    background-color: var(--modal-content-bg); /* UPDATED */
     /* box-shadow: var(--card-default-shadow); */ /* ADDED - if defined for modals */
}
.crop-modal-content h3, #upload-modal h3, #upload-modal p {
    color: var(--text-primary);
}
.crop-modal-content .text-gray-500:hover { /* Close icon */
    color: var(--text-primary);
}
.crop-image-container { 
     background-color: var(--bg-primary); /* Can be different from modal content */
     border: 2px dashed var(--border-color); /* Keep generic border for this */
}
#crop-cancel-btn { /* Uses secondary button style */
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
}
#crop-cancel-btn:hover {
    background-color: var(--button-secondary-hover-bg);
}
#crop-save { /* Uses primary button style */
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: 1px solid var(--button-primary-border);
}
#crop-save:hover {
    background-color: var(--button-primary-hover-bg);
}

#upload-modal .bg-gray-200 { /* Progress bar background */
    background-color: var(--input-field-bg); /* UPDATED */
}
#upload-modal .bg-blue-600 { /* Progress bar fill */
    background-color: var(--button-primary-bg); /* UPDATED */
}

/* Notification Styling - Already specific, looks good */
.notification {
    padding: 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    color: var(--notification-text-color);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notification-visible {
    opacity: 1;
    transform: translateY(0);
}
.notification-success { background-color: var(--notification-success-bg); }
.notification-error { background-color: var(--notification-error-bg); }
.notification-info { background-color: var(--notification-info-bg); }
.notification-warning { background-color: var(--notification-warning-bg); }

.notification-close-btn {
    background: none;
    border: none;
    color: var(--notification-text-color);
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
    padding: 0.25rem;
}
.notification-close-btn:hover {
    opacity: 1;
}

/* Links in posts/comments content */
.text-gray-700 a, .whitespace-pre-wrap a { 
    color: var(--link-color);
    text-decoration: underline; 
}
.text-gray-700 a:hover, .whitespace-pre-wrap a:hover {
    color: var(--link-hover-color);
}

/* Profile Image Styling (General) */
.profile-img { /* Container for profile image or initials */
     background-color: var(--profile-initials-bg);  /* UPDATED */
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border-radius: 9999px; 
}
.profile-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
.profile-initials {
     color: var(--profile-initials-text-color);  /* UPDATED */
     font-weight: 600;
}
/* Specific for nav profile button hover */
.nav-profile-button-hover:hover {
    background-color: var(--nav-bg) !important; /* UPDATED - could be a specific --nav-item-hover-bg */
    /* filter: brightness(95%); /* Or some other subtle effect */
}

/* Utility classes from index.html that might be useful globally */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}
.file-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.file-upload input[type=file] {
    position: absolute;
    left: -9999px;
}
.whitespace-pre-wrap {
    white-space: pre-wrap; 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    word-break: break-word; 
}
article h2.text-xl.font-bold.mb-3 { 
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal; 
}

/* Settings Page Specific (Radio buttons, Toggles) */
.setting-card {
    background-color: var(--card-default-bg); /* UPDATED */
    border: 1px solid var(--card-default-border); /* UPDATED */
    /* box-shadow: var(--card-default-shadow); */ /* ADDED - if defined */
    border-radius: 0.5rem; 
    padding: 1.5rem; 
    margin-bottom: 2rem; 
}
.setting-card h2 {
    color: var(--text-primary);
    font-size: 1.25rem; 
    font-weight: 600; 
    margin-bottom: 1rem; 
}
.setting-card p { 
    color: var(--text-secondary);
    font-size: 0.875rem; 
    margin-bottom: 0.25rem; 
}
.setting-card label[for^="theme-"] { /* Label for theme radio */
    color: var(--text-primary);
    border: 2px solid var(--input-field-border); /* UPDATED */
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem; 
    border-radius: 0.5rem; 
    transition: background-color 0.2s, border-color 0.2s;
}
.setting-card label[for^="theme-"]:hover {
    background-color: var(--input-field-bg);  /* UPDATED */
}
.setting-card input[type="radio"]:checked + label[for^="theme-"] {
    border-color: var(--link-color); 
    background-color: var(--bg-secondary); 
}
.setting-card input[type="radio"] + label[for^="theme-"] .radio-dot-container { 
    width: 1.25rem; 
    height: 1.25rem; 
    border: 2px solid var(--input-field-border); /* UPDATED */
    border-radius: 9999px; 
    margin-right: 0.75rem; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.setting-card input[type="radio"]:checked + label[for^="theme-"] .radio-dot-container {
    border-color: var(--link-color);
}
.setting-card input[type="radio"] + label[for^="theme-"] .radio-dot { 
    width: 0.625rem; 
    height: 0.625rem; 
    background-color: var(--link-color); 
    border-radius: 9999px; 
    display: none; 
}
.setting-card input[type="radio"]:checked + label[for^="theme-"] .radio-dot {
    display: block; 
}

/* Toggle Switches in Settings */
.setting-card label[for$="-toggle"] { /* Text label for toggle */
    color: var(--text-primary);
}
.setting-card .toggle-bg { /* Track of toggle */
    background-color: var(--input-field-bg);  /* UPDATED */
    border: 1px solid var(--input-field-border); /* UPDATED */
    display: block;
    overflow: hidden;
    height: 1.5rem; 
    border-radius: 9999px; 
    cursor: pointer;
    width: 2.5rem; 
    position: relative;
}
.setting-card .toggle-checkbox { /* Hidden actual checkbox */
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}
.setting-card .toggle-knob { /* Movable knob */
    display: block;
    width: 1.25rem; 
    height: 1.25rem; 
    background-color: var(--card-default-bg);  /* UPDATED to use card bg for knob */
    border-radius: 9999px; 
    position: absolute;
    top: 0.125rem; 
    left: 0.125rem; 
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--input-field-border); /* UPDATED */
}
.setting-card .toggle-checkbox:checked + .toggle-bg { 
    background-color: var(--button-primary-bg); /* UPDATED */
    border-color: var(--button-primary-bg); /* UPDATED */
}
.setting-card .toggle-checkbox:checked + .toggle-bg .toggle-knob {
    transform: translateX(1rem); 
    border-color: var(--button-primary-bg); /* UPDATED */
}

/* Profile Page Specific Styles */
#profile-content { 
    background-color: var(--card-default-bg); /* UPDATED */
    border: 1px solid var(--card-default-border); /* UPDATED */
    /* box-shadow: var(--card-default-shadow); */ /* ADDED - if defined */
    border-radius: 0.5rem; 
    overflow: hidden; 
}
.profile-header { 
    background-color: var(--bg-primary); /* Can be different from card bg */
    border-bottom: 1px solid var(--card-default-border); /* UPDATED */
}
#profile-name {
    color: var(--text-primary);
}
#profile-joined-date {
    color: var(--text-secondary);
}
#profile-description-view {
    color: var(--text-primary); 
}
#profile-description-edit::placeholder {
    color: var(--input-field-placeholder-text); /* UPDATED */
}
/* #profile-description-edit uses general input styles */

#change-picture-section .border-t {
    border-top-color: var(--card-default-border); /* UPDATED */
}
#change-picture-section h3 {
    color: var(--text-primary);
}
/* Change profile picture button uses .button-primary */

/* Profile avatar on profile page */
.profile-avatar {
    width: clamp(80px, 20vw, 128px);
    height: clamp(80px, 20vw, 128px);
    border: clamp(2px, 0.5vw, 4px) solid var(--profile-avatar-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.profile-avatar .profile-initials {
    font-size: clamp(2rem, 8vw, 3rem);
}

#profile-loading p, #profile-error p {
    color: var(--text-secondary);
}
/* Go to homepage button on error uses .button-primary */


/* Ensure Tailwind base is loaded or some reset is active for consistency if not using Tailwind entirely */
/* For example, box-sizing: border-box; */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0; 
    border-style: solid; 
    border-color: var(--border-color); /* Base border color, specific components will override */
}

/* Ensure Tailwind border width classes pick up the theme color */
.border, .border-t, .border-r, .border-b, .border-l,
.border-x, .border-y {
    border-color: var(--border-color); /* Default to general border, components should specify if needed */
}

html {
    line-height: 1.5; 
    -webkit-text-size-adjust: 100%; 
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
}

/* Filter Bar Styling */
#filter-bar, #community-filter-bar {
    /* Applied via Tailwind: sticky top-0 z-40 mb-6 p-4 rounded-b-lg shadow-lg backdrop-blur-md */
    /* Background color needs to be theme-aware */
    background-color: var(--filter-bar-bg);
    border-bottom: 1px solid var(--border-color);
}


#filter-bar span, #community-filter-bar span { /* "Filter by:" text */
    color: var(--text-secondary);
}

.filter-btn {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    /* Tailwind classes handle padding, text size, font-medium, rounded-md */
}

.filter-btn:hover {
    background-color: var(--button-secondary-hover-bg);
    color: var(--text-primary); /* More prominent text on hover */
    border-color: var(--accent-color-subtle, var(--button-secondary-hover-bg)); /* Use accent-color-subtle if available */
}

.filter-btn.active-filter-btn {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-border, var(--button-primary-bg));
}

.filter-btn.active-filter-btn:hover {
    background-color: var(--button-primary-hover-bg);
    border-color: var(--button-primary-hover-bg);
}

.see-more-container {
    position: relative;
    max-height: 120px; /* Adjust as needed */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/* Post "See More" Gradient */
.post-see-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--post-card-bg));
}

/* Comment "See More" Gradient */
.comment-see-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--comment-bg));
}

/* Reply "See More" Gradient */
.reply-see-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--comment-bg));
}

.see-more-container.expanded {
    max-height: none;
}

.see-more-container.expanded::after {
    display: none;
}

.see-more-btn {
    display: block;
    margin: 1rem auto 0;
    font-weight: 600;
}

.back-to-posts-btn {
    background-color: var(--bg-secondary);
    color: var(--button-secondary-text);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.2s;
    border: 1.5px solid var(--button-secondary-border);
}

.back-to-posts-btn:hover {
    background-color: var(--button-secondary-hover-bg);
}

/* Custom Scrollbar for Slideshow */
.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 10px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-secondary);
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

/* Custom Scrollbar for Slideshow */
.slideshow-scrollbar::-webkit-scrollbar {
    height: 8px;
}

.slideshow-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 10px;
}

.slideshow-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-secondary);
}

.slideshow-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}