body.categories-page {
    background-color: var(--darker-bg) !important;
}

/* Ensure container background matches */
body.categories-page .container {
    background-color: transparent;
}

/* Theme-specific background styling for categories page */
[data-theme="dark"] body.categories-page {
    background-color: var(--darker-bg) !important;
}

[data-theme="light"] body.categories-page {
    background-color: var(--darker-bg) !important;
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] body.categories-page {
        background-color: var(--darker-bg) !important;
    }
}

@media (prefers-color-scheme: light) {
    [data-theme="auto"] body.categories-page {
        background-color: var(--darker-bg) !important;
    }
}

/* Category card styling for bright white cards */
body.categories-page .category-card-inner {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.categories-page .category-card:hover .category-card-inner {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Alphabet button styling */
body.categories-page .alphabet-btn {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

body.categories-page .alphabet-btn:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}