:root {
    --primary-pink: #FF69B4;
    --primary-pink-dark: #FF1493;
    --bg-pink: #FFE5F0;
    --text-dark: #1a1a2e;
    --text-gray: #666;

    /* Reduced font sizes */
    --font-scale: 0.4; /* 87.5% of original size */
}

.bg-brand-pink {
    background-color: var(--bg-pink);
}

.bg-gradient-pink {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-pink-dark) 100%);
}

.text-brand-pink {
    color: var(--primary-pink);
}

.border-brand-pink {
    border-color: var(--primary-pink);
}

.logo-text {
    font-weight: bold;
    color: var(--primary-pink);
    text-shadow:
        -1px -1px 0 var(--primary-pink),
        1px -1px 0 var(--primary-pink),
        -1px 1px 0 var(--primary-pink),
        1px 1px 0 var(--primary-pink);
    letter-spacing: 2px;
}

.btn-pink {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-pink-dark) 100%);
    transition: transform 0.2s;
}

.btn-pink:hover {
    transform: translateY(-2px);
}

.card-hover {
    transition: transform 0.3s;
}

.card-hover:hover {
    transform: translateY(-5px);
}

.online-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: var(--primary-pink);
    border: 3px solid white;
    border-radius: 50%;
}

/* Global font size reduction - Override Tailwind defaults */
html {
    font-size: 14px; /* Reduced from default 16px */
}

/* Tailwind text size overrides - reduced by ~12.5% */
.text-xs { font-size: 0.656rem !important; } /* was 0.75rem */
.text-sm { font-size: 0.766rem !important;line-height: 1rem !important; } /* was 0.875rem */
.text-base { font-size: 0.875rem !important; } /* was 1rem */
.text-lg { font-size: 0.984rem !important; } /* was 1.125rem */
.text-xl { font-size: 1.094rem !important; } /* was 1.25rem */
.text-2xl { font-size: 1.313rem !important; } /* was 1.5rem */
.text-3xl { font-size: 1.641rem !important; } /* was 1.875rem */
.text-4xl { font-size: 1.969rem !important; } /* was 2.25rem */
.text-5xl { font-size: 2.625rem !important; } /* was 3rem */
.text-6xl { font-size: 3.281rem !important; } /* was 3.75rem */
.text-7xl { font-size: 3.938rem !important; } /* was 4.5rem */
.text-8xl { font-size: 5.25rem !important; } /* was 6rem */
.text-9xl { font-size: 7rem !important; } /* was 8rem */

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Dark mode CSS variables */
:root {
    --dark-bg-primary: #0f0f1a;
    --dark-bg-secondary: #1a1a2e;
    --dark-bg-tertiary: #252542;
    --dark-text-primary: #f5f5f5;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #3a3a5c;
}

/* Dark mode background */
html.dark body {
    background-color: var(--dark-bg-primary) !important;
}

html.dark .bg-brand-pink {
    background-color: var(--dark-bg-primary) !important;
}

html.dark .bg-white {
    background-color: var(--dark-bg-secondary) !important;
}

html.dark .bg-gray-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

html.dark .bg-gray-100 {
    background-color: var(--dark-bg-tertiary) !important;
}

html.dark .bg-gray-200 {
    background-color: var(--dark-bg-secondary) !important;
}

/* Dark mode text colors */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
    color: var(--dark-text-primary) !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: var(--dark-text-secondary) !important;
}

html.dark .text-gray-400 {
    color: #888 !important;
}

/* Dark mode borders */
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: var(--dark-border) !important;
}

html.dark .divide-gray-200 > * + * {
    border-color: var(--dark-border) !important;
}

/* Dark mode shadows */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode cards */
html.dark .rounded-2xl,
html.dark .rounded-xl,
html.dark .rounded-lg {
    background-color: var(--dark-bg-secondary);
}

/* Dark mode hover states */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

html.dark .hover\:bg-pink-50:hover {
    background-color: rgba(255, 105, 180, 0.1) !important;
}

/* Dark mode inputs */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--dark-text-secondary) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--primary-pink) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2) !important;
}

/* Dark mode header */
html.dark header {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border);
}

/* Dark mode header text (user name, etc.) */
html.dark header .font-medium,
html.dark header span,
html.dark header button {
    color: var(--dark-text-primary) !important;
}

/* Dark mode dropdowns */
html.dark .absolute.bg-white {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* Dark mode mobile sidebar */
html.dark #mobile-menu-sidebar {
    background-color: var(--dark-bg-secondary) !important;
}

html.dark #mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Dark mode footer */
html.dark footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border);
}

/* Dark mode alerts */
html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Dark mode pink accents remain vibrant */
html.dark .text-brand-pink,
html.dark .text-pink-500 {
    color: var(--primary-pink) !important;
}

html.dark .bg-pink-100 {
    background-color: rgba(255, 105, 180, 0.15) !important;
}

/* Dark mode logo */
html.dark .logo-text {
    color: var(--primary-pink);
    text-shadow:
        -1px -1px 0 var(--primary-pink),
        1px -1px 0 var(--primary-pink),
        -1px 1px 0 var(--primary-pink),
        1px 1px 0 var(--primary-pink);
}

/* Dark mode tables */
html.dark table {
    background-color: var(--dark-bg-secondary) !important;
}

html.dark th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

html.dark td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

html.dark tr:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Smooth transition for theme changes */
html.dark *,
html.light * {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


.username-style-default {
    background: url(/images/sparks/sparkle.gif);
    color:#000;
    /* -webkit-background-clip: text;
    background-clip: text; */
    background-size: cover;
}

html.dark .username-style-default {
 color:var(--dark-text-primary) !important;
}
/* Username Style Animations */
.username-style-purple-glow {
    color: #b747ff;
    text-shadow: 0 2px 5px #000;
    background: url(/images/sparks/zTF1Pzd.gif);
    /* -webkit-background-clip: text;
    background-clip: text; */
    font-weight: 600;
}

/* Style 4: Gold/Green Gradient */
.username-style-style1 {
    text-shadow: 1px 1px 8px rgb(178 209 0);
    letter-spacing: .02em;
    font-weight: 400;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(15deg, rgba(212, 175, 55, 1) 20%, rgba(58, 147, 74, 1) 30%, rgba(58, 147, 74, 1) 40%, rgba(212, 175, 55, 1) 50%, rgba(212, 175, 55, 1) 60%, rgba(58, 147, 74, 1) 70%, rgba(58, 147, 74, 1) 80%);
    animation: usernameHue 0.5s linear infinite;
}

@keyframes usernameHue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Style 5: Cyan Glow */
.username-style-style2 {
    position: relative;
    font-weight: 700 !important;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(73, 233, 255, 1) 35%, rgba(0, 228, 255, 1) 100%);
    background-size: 25em;
    animation: usernameStyle2 1s linear infinite;
}

@keyframes usernameStyle2 {
    0% {
        background-position: 0 0;
        text-shadow: 0 0 10px #00e4ff, 0 0 5px #00e4ff;
    }
    50% {
        text-shadow: 0 0 20px #00e4ff, 0 0 10px #00e4ff, 0 0 10px #00e4ff;
    }
    100% {
        background-position: 100em 0;
        text-shadow: 0 0 10px #00e4ff, 0 0 5px #00e4ff;
    }
}

/* Style 6: Green Neon */
.username-style-style3 {
    position: relative;
    font-weight: bold;
    text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 7px #F00, 0 0 7px #F00, 0 0 8px #F00, 0 0 9px #F00, 0 0 10px #F00;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(110, 255, 73, 1) 35%, rgba(56, 255, 0, 1) 100%);
    background-size: 25em;
    animation: usernameStyle3 3s linear infinite;
}

@keyframes usernameStyle3 {
    0% {
        text-shadow: 0 1px 15px rgb(0 255 0);
        background-position: -20em 0;
    }
    50% {
        text-shadow: 0 1px 15px rgb(0 255 0);
    }
    100% {
        text-shadow: 0 1px 15px rgb(0 255 0);
        background-position: 20em 0;
    }
}

/* Style 7: Gold Fire */
.username-style-style4 {
    background-image: url(/images/sparks/UBtu8za.gif);
    background-size: 10em;
    /* -webkit-background-clip: text; */
    /* background-clip: text; */
    -webkit-text-fill-color: transparent;
    position: relative;
    animation: usernameStyle4 4s ease infinite;
}

@keyframes usernameStyle4 {
    0% { color: #ffe849; text-shadow: 0 0 0px #ffe849; }
    25% { color: #ffe849; text-shadow: 0 0 5px #ffe849; }
    50% { color: #ffe849; text-shadow: 0 0 15px #ffe849; }
    75% { color: #ffe849; text-shadow: 0 0 5px #ffe849; }
    100% { color: #ffe849; text-shadow: 0 0 0px #ffe849; }
}

/* Style 8: Teal Sparkle */
.username-style-style5 {
    font-weight: 800;
    text-shadow: 0 0 15px rgb(83 219 180);
    position: relative;
    background-image: linear-gradient(123deg, #54dcb3 0%, white 20%, #54dcb3 30%, white 49%, #54dcb3 57%, white 68%, #54dcb3 83%, white 100%), url(/images/sparks/DkqDqHl.gif);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: usernameStyle5 5.5s cubic-bezier(0.4, 0, 1, 1) infinite;
    background-size: 100em, 19em 10em;
}

@keyframes usernameStyle5 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 9: Rainbow */
.username-style-style6 {
    position: relative;
    font-weight: bold;
    text-shadow: 0 0 6px #ffffff, 0 0 2px #ffffff, 0 0 7px #F00, 0 0 7px #F00, 0 0 8px #F00, 0 0 9px #F00, 0 0 10px #F00;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(-45deg, #fff 0%, #FF0000 15%, #FF8000 25%, #F7FF00 35%, #FF0000 45%, #55FF00 55%, #03FFFF 65%, #0022FF 75%, #A100FF 85%, #FF00E6 95%, #fff 100%);
    background-size: 25em;
    animation: usernameStyle6 3s linear infinite;
}

@keyframes usernameStyle6 {
    0% {
        text-shadow: 0px 0px 10px rgba(255, 42, 0, 0.7);
        background-position: -20em 0;
    }
    50% { text-shadow: 0 1px 25px rgb(255 0 0); }
    100% {
        text-shadow: 0px 0px 10px rgba(255, 42, 0, 0.7);
        background-position: 20em 0;
    }
}

/* Style 10: Blue Glow */
.username-style-style7 {
    position: relative;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(76, 195, 255, 0.5);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: url(/images/sparks/1vgidgC.gif), url(/images/sparks/iMRH8VD.gif), linear-gradient(123deg, rgb(31, 204, 223) 0%, rgba(110, 123, 255, 1) 20%, rgb(47, 167, 255) 30%, rgb(40, 204, 255) 49%, rgba(74, 199, 255, 1) 57%, rgb(25, 210, 255) 68%, rgba(88, 100, 255, 1) 83%, rgb(31, 204, 223) 100%);
    background-size: 10em, 3em, 10em;
    animation: usernameStyle7 3s linear infinite;
}

@keyframes usernameStyle7 {
    0% { background-position: 0 0, 0 0, -10em 0; }
    100% { background-position: 0 0, 0 0, 10em 0; }
}

/* Style 11: Purple/Pink */
.username-style-style8 {
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.36);
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(-45deg, rgb(109, 2, 248) 0%, rgb(239, 3, 235) 10%, rgb(239, 3, 235) 20%, rgb(109, 2, 248) 30%, rgb(109, 2, 248) 40%, rgb(239, 3, 235) 50%, rgb(239, 3, 235) 60%, rgb(109, 2, 248) 70%, rgb(109, 2, 248) 80%, rgb(239, 3, 235) 90%, rgb(239, 3, 235) 100%), url(/images/sparks/Ocwa4cC.gif);
    background-size: 500% 500%, 8em;
    animation: usernameStyle8 3.5s cubic-bezier(0.4, 0, 1, 1) infinite;
    position: relative;
}

@keyframes usernameStyle8 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 12: Fire */
.username-style-style9 {
    -webkit-animation: usernameStyle9 5s linear infinite;
    animation: usernameStyle9 5s linear infinite;
    font-weight: bold;
}

@keyframes usernameStyle9 {
    0% { color: red; text-shadow: 0 0 5px red; }
    25% { color: #F5BB63; text-shadow: 0 0 5px orange; }
    50% { color: #a77c3d; text-shadow: 0 0 5px orange; }
    75% { color: #c76e1a; text-shadow: 0 0 5px orange; }
    100% { color: red; text-shadow: 0 0 5px red; }
}

/* Style 13: Green */
.username-style-style10 {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.38);
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 255, 0, 1) 41%, rgba(0, 255, 95, 1) 100%);
    background-size: 20% 1000%, 8em;
    animation: usernameStyle10 3.5s cubic-bezier(0.4, 0, 1, 1) infinite;
    position: relative;
}

@keyframes usernameStyle10 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 14: Red/Yellow Fire */
.username-style-style11 {
    font-weight: 800;
    position: relative;
    background-image: linear-gradient(123deg, red 0%, yellow 20%, red 30%, yellow 49%, red 57%, yellow 68%, red 83%, yellow 100%), url(/images/sparks/fMqEN6G.gif);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: usernameStyle11 5s linear infinite;
    background-size: 100em, 19em 10em;
}

@keyframes usernameStyle11 {
    0% { color: red; text-shadow: 0px 0px 10px red; background-position: 0% 0%, 0%; }
    50% { color: orange; text-shadow: 0px 0px 10px orange; }
    100% { color: red; text-shadow: 0px 0px 10px red; background-position: 200% 0%, 0%; }
}

/* Style 15: Pink */
.username-style-style12 {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(228, 15, 98, 1) 41%, rgba(241, 143, 181, 1) 100%), url(/images/sparks/iDVWHPh.gif);
    background-size: 100%, 20%;
    position: relative;
    animation: usernameStyle12 10s linear infinite;
}

@keyframes usernameStyle12 {
    0% { color: yellow; text-shadow: 0px 0px 10px rgb(228, 15, 98); background-position: 0% 0%, 0%; }
    99% { color: #660099; text-shadow: 0px 0px 10px rgb(228, 15, 98); background-position: 100% 0%, 50%; }
}

/* Style 16: Blue Particles */
.username-style-style13 {
    font-weight: 500;
    position: relative;
    text-shadow: 0 0 .25em rgba(255, 255, 255, 0.45);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: url(/images/sparks/particles.webp), linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(22, 15, 228, 1) 41%, rgba(143, 145, 241, 1) 100%);
    background-size: 3em, 10em;
    animation: usernameStyle13 3s linear infinite;
}

@keyframes usernameStyle13 {
    0% { background-position: 0 0, -10em 0; }
    100% { background-position: 0 0, 10em 0; }
}

/* Style 18: Cyan/White */
.username-style-style15 {
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.36);
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(-45deg, #0fdce4 0%, #fff 10%, #fff 20%, #0fdce4 30%, #0fdce4 40%, #fff 50%, #fff 60%, #0fdce4 70%, #0fdce4 80%, #fff 90%, #fff 100%);
    background-size: 500% 500%, 8em;
    animation: usernameStyle15 4s linear infinite;
}

@keyframes usernameStyle15 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 19: Light Blue */
.username-style-style16 {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(200deg, #05D0FE 20%, rgba(110, 123, 251, 1) 30%, rgb(189, 255, 255));
    background-size: 20% 1000%, 8em;
    animation: usernameStyle16 4s linear infinite;
}

@keyframes usernameStyle16 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 20: Red Glow */
.username-style-style17 {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(200deg, #ff0100 20%, rgba(255, 0, 0, 1) 50%, rgb(255, 255, 255));
    background-size: 20% 1000%, 8em;
    animation: usernameStyle17 4s linear infinite;
}

@keyframes usernameStyle17 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 21: Pink/Magenta */
.username-style-style18 {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.38);
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(227, 173, 225, 1) 41%, rgba(228, 15, 220, 1) 100%), url(/images/sparks/bg1.webp);
    background-size: 20% 1000%, 8em;
    animation: usernameStyle18 3.5s cubic-bezier(0.4, 0, 1, 1) infinite;
}

@keyframes usernameStyle18 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 22: Yellow/Gold */
.username-style-style19 {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.38);
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 215, 24, 1) 41%, rgba(255, 255, 0, 1) 100%);
    background-size: 20% 1000%, 8em;
    animation: usernameStyle19 3.5s cubic-bezier(0.4, 0, 1, 1) infinite;
    position: relative;
}

@keyframes usernameStyle19 {
    0% { background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; }
}

/* Style 23: Rainbow Neon */
.username-style-style20 {
    font-weight: 900;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(15deg, rgb(243, 81, 22) 20%, rgb(225, 218, 19) 30%, rgb(40, 245, 13) 40%, rgb(22, 228, 255) 50%, rgb(202, 22, 238) 60%, rgb(229, 255, 0) 70%, rgb(248, 240, 5) 80%);
    background-size: 400% 400%, 10em;
    animation: usernameStyle20 3s linear infinite;
}

@keyframes usernameStyle20 {
    0% { -webkit-filter: hue-rotate(100deg); background-position: 0% 50%, 0%; }
    50% { background-position: 100% 50%, 0%; }
    100% { background-position: 0% 50%, 0%; -webkit-filter: hue-rotate(0deg); }
}

/* ============================================
   ADDITIONAL DARK MODE FIXES
   ============================================ */

/* Fix 1: Wall pages - reaction counts (font-semibold text in reaction buttons) */
html.dark .flex.items-center.gap-1.px-3.py-1.bg-gray-100 span.font-semibold {
    color: var(--dark-text-primary) !important;
}

/* Fix 2: Wall pages - contenteditable input field */
html.dark #postContentEditor {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

html.dark #postContentEditor:empty:before {
    color: var(--dark-text-secondary) !important;
}

html.dark [contenteditable="true"] {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Fix 3: Homepage - heart icons (follow buttons) */
html.dark .follow-btn.not-following,
html.dark a.text-black-300 {
    color: var(--dark-text-secondary) !important;
}

html.dark .follow-btn.not-following:hover,
html.dark a.text-black-300:hover {
    color: var(--primary-pink) !important;
}

/* Fix 4: How it works - heading section background */
html.dark .bg-gradient-to-br.from-pink-50,
html.dark .bg-gradient-to-br.from-pink-50.via-purple-50,
html.dark .bg-gradient-to-br.from-pink-50.via-purple-50.to-blue-50 {
    background: linear-gradient(to bottom right, var(--dark-bg-secondary), var(--dark-bg-tertiary), var(--dark-bg-secondary)) !important;
}

/* Fix 5: How it works - image sections (light colored backgrounds) */
html.dark .bg-gradient-to-br.from-pink-100,
html.dark .bg-gradient-to-br.from-pink-100.to-purple-100,
html.dark .bg-gradient-to-br.from-purple-100,
html.dark .bg-gradient-to-br.from-purple-100.to-blue-100,
html.dark .bg-gradient-to-br.from-blue-100,
html.dark .bg-gradient-to-br.from-blue-100.to-cyan-100,
html.dark .bg-gradient-to-br.from-cyan-100,
html.dark .bg-gradient-to-br.from-cyan-100.to-teal-100,
html.dark .bg-gradient-to-br.from-teal-100,
html.dark .bg-gradient-to-br.from-teal-100.to-green-100,
html.dark .bg-gradient-to-br.from-green-100,
html.dark .bg-gradient-to-br.from-green-100.to-pink-100 {
    background: linear-gradient(to bottom right, var(--dark-bg-tertiary), var(--dark-bg-secondary)) !important;
}

/* Fix 6: Creator profile - my content reset button */
html.dark a[href*="creator/content"].border-gray-300,
html.dark .border-gray-300.hover\:bg-gray-50 {
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

html.dark a[href*="creator/content"].border-gray-300:hover,
html.dark .border-gray-300.hover\:bg-gray-50:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Fix 7: Creator profile - upload buttons (photo, photo set, physical) default state text */
html.dark .border-2.border-gray-300 span.text-sm {
    color: var(--dark-text-primary) !important;
}

html.dark label .flex.flex-col.items-center.border-2 span {
    color: var(--dark-text-primary) !important;
}

/* Fix 8: Creator profile - custom requests "All" button when selected */
html.dark .bg-brand-pink.text-black {
    color: #1a1a2e !important;
}

/* Fix 9: Creator profile - tips "about tips" text (blue info box) */
html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark .bg-blue-50 .text-blue-800,
html.dark .bg-blue-50 .text-blue-900,
html.dark .bg-blue-50 p.text-blue-800 {
    color: #93c5fd !important;
}

html.dark .bg-blue-50 h4.text-blue-900,
html.dark .bg-blue-50 .font-bold.text-blue-900 {
    color: #bfdbfe !important;
}

html.dark .border-blue-500 {
    border-color: #3b82f6 !important;
}

html.dark .text-blue-600 {
    color: #60a5fa !important;
}