body.dark-mode,
body.high-contrast,
body.kids-mode {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.high-contrast.dark-mode,
body.high-contrast.kids-mode {
    filter: none !important;
}

body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.dark-mode header,
body.dark-mode footer {
    background-color: #111 !important;
    color: #e0e0e0 !important;
}

body.dark-mode nav a {
    color: #ffffff !important;
}

body.dark-mode nav a:hover,
body.dark-mode nav a.active-link {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode section,
body.dark-mode .value-card,
body.dark-mode .settings-option,
body.dark-mode .account-card,
body.dark-mode .post-card,
body.dark-mode #posts>div {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode button {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #aaaaaa !important;
}

body.dark-mode #posts a {
    color: #4CAF50 !important;
}

body.dark-mode hr {
    border-top: 1px solid #333 !important;
}

body.dark-mode .comment {
    background-color: #2a2a2a !important;
}

body.dark-mode .search-input,
body.dark-mode .file-label {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

body.dark-mode .sort-btn,
body.dark-mode .tag-filter {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

body.dark-mode .sort-btn.active,
body.dark-mode .tag-filter.active {
    background-color: #4CAF50 !important;
    color: #fff !important;
    border-color: #4CAF50 !important;
}

body.dark-mode .post-author,
body.dark-mode .post-title,
body.dark-mode .post-content {
    color: #f0f0f0 !important;
}

body.dark-mode .post-time,
body.dark-mode .comment-count,
body.dark-mode .empty-state,
body.dark-mode .empty-sub {
    color: #aaaaaa !important;
}

body.dark-mode .like-btn {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .like-btn.liked {
    background-color: #422 !important;
    color: #ff6b6b !important;
}

body.dark-mode .skeleton-block,
body.dark-mode .skeleton-line {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%) !important;
    background-size: 200% 100% !important;
}

body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast header,
body.high-contrast footer,
body.high-contrast section,
body.high-contrast .value-card,
body.high-contrast .settings-option,
body.high-contrast .account-card,
body.high-contrast .post-card,
body.high-contrast #posts>div {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

body.high-contrast nav a {
    color: #fff !important;
}

body.high-contrast nav a:hover,
body.high-contrast nav a.active-link {
    background-color: #fff !important;
    color: #000 !important;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast button {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
    color: #fff !important;
}

body.high-contrast #posts a {
    color: #fff !important;
    text-decoration: underline !important;
}

body.high-contrast hr {
    border-top: 1px solid #fff !important;
}

body.high-contrast .search-input,
body.high-contrast .file-label,
body.high-contrast .sort-btn,
body.high-contrast .tag-filter,
body.high-contrast .like-btn,
body.high-contrast .comment {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

body.high-contrast .sort-btn.active,
body.high-contrast .tag-filter.active,
body.high-contrast .like-btn.liked {
    background-color: #fff !important;
    color: #000 !important;
}

body.high-contrast .avatar {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
}

body.high-contrast .post-content,
body.high-contrast .post-author,
body.high-contrast .post-title,
body.high-contrast .comment-body p,
body.high-contrast .comment-body strong {
    color: #fff !important;
}

body.high-contrast .video-link,
body.high-contrast .post-topic-tag {
    color: #fff !important;
    text-decoration: underline !important;
}

body.daltonism {
    filter: grayscale(100%);
}

body.daltonism #posts img {
    filter: grayscale(100%);
}

body.kids-mode {
    background-color: #fef9f4 !important;
    color: #2b2b2b !important;
    font-size: 1.05rem;
}

body.kids-mode header,
body.kids-mode footer {
    background-color: #ffd6a5 !important;
    color: #2b2b2b !important;
}

body.kids-mode section,
body.kids-mode .settings-option,
body.kids-mode .account-card,
body.kids-mode .post-card,
body.kids-mode #posts>div {
    background-color: #ffffff !important;
    border-radius: 18px !important;
    border: 2px solid #ffd6a5 !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08) !important;
}

body.kids-mode nav a {
    color: #ffffff !important;
}

body.kids-mode nav a:hover {
    background-color: #ffd6a5 !important;
    color: #000 !important;
}

body.kids-mode button {
    background-color: #ffb703 !important;
    color: #000 !important;
    border-radius: 12px !important;
}

body.kids-mode input,
body.kids-mode textarea {
    border-radius: 12px !important;
}

body.kids-mode h1,
body.kids-mode h2,
body.kids-mode h3 {
    font-weight: 700;
}

body.kids-mode .sort-btn,
body.kids-mode .tag-filter,
body.kids-mode .like-btn,
body.kids-mode .search-input,
body.kids-mode .file-label {
    border-radius: 16px !important;
}

body.kids-mode .avatar {
    border: 2px solid #ffd6a5 !important;
}

body.dark-mode #posts>div,
body.high-contrast #posts>div,
body.kids-mode #posts>div {
    transition: all 0.2s ease;
}