/* =======================================
   GLOBAL SNOWFLAT BUG FIX..
   Fixes the invisible purple mobile sidebar menu
   (Applies to both Light and Dark mode)
======================================= */
.qa-main-wrapper {
    overflow: visible !important; 
}
#qam-sidepanel-mobile {
    z-index: 99999 !important;
}
#qam-sidepanel-mobile.qam-sidepanel-active {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    right: 0 !important;
}

/* HIDE THE PURPLE SIDEBAR TOGGLE COMPLETELY */
#qam-sidepanel-toggle {
    display: none !important;
}

/* =======================================
   SnowFlat Clean Dark Mode v130 (Clean Inline Color + Light Highlight Fix)
   ======================================= */

/* 1. Base & Backgrounds */
html.qa-dark-mode,
html.qa-dark-mode body,
html.qa-dark-mode .qa-main,
html.qa-dark-mode .qa-part-q-view,
html.qa-dark-mode .qa-footer,
html.qa-dark-mode .qam-footer-box {
    background-color: #12181e !important;
    background: #12181e !important;
    color: #dbdee1 !important; /* Discord primary text */
    border: none !important;
    box-shadow: none !important;
}

/* Make wrappers transparent so they don't block the mobile menu underneath */
html.qa-dark-mode .qa-body-wrapper,
html.qa-dark-mode .qa-main-wrapper {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Content Blocks (Questions, Answers, Comments, Sidebars, Profiles, Messages, Passwords, Feeds) */
html.qa-dark-mode .qa-q-list-item,
html.qa-dark-mode .qa-q-view,
html.qa-dark-mode .qa-a-list-item,
html.qa-dark-mode .qa-widget-side,
html.qa-dark-mode .qa-widgets-side,
html.qa-dark-mode .qa-widget-side-box,
html.qa-dark-mode .qa-part-ranking,
html.qa-dark-mode .qa-part-form,
html.qa-dark-mode .qa-part-form-profile,
html.qa-dark-mode .qa-part-form-activity,
html.qa-dark-mode .qa-part-form-badges,
html.qa-dark-mode .qa-part-form-wall,
html.qa-dark-mode .qa-part-form-account,
html.qa-dark-mode .qa-part-form-password,
html.qa-dark-mode .qa-part-form-privacy,
html.qa-dark-mode .qa-part-message-list,
html.qa-dark-mode .qa-user-profile,
html.qa-dark-mode .qa-user-activity,
html.qa-dark-mode .qa-form-light,
html.qa-dark-mode .qa-form-tall,
html.qa-dark-mode .qa-form-wide,
html.qa-dark-mode .qa-sidepanel,
html.qa-dark-mode .qa-sidebar,
html.qa-dark-mode #qam-sidepanel-mobile {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #2a3744 !important;
    color: #dbdee1 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------
   SUB-COMMENTS FIX: Distinct Recessed Background
------------------------------------------------------ */
html.qa-dark-mode .qa-c-list-item {
    background-color: #12181e !important; /* Deeper, recessed background */
    background: #12181e !important;
    border: 1px solid #2a3744 !important;
    border-radius: 4px !important;
}

/* ---------------------------------------------------
   FORMS FIX: Ask, Edit, and Private Message Forms
------------------------------------------------------ */
/* Use Maximum Specificity to override SnowFlat's hardcoded white background */
html.qa-dark-mode .qa-main form.qa-form-tall,
html.qa-dark-mode .qa-main form.qa-form-wide,
html.qa-dark-mode .qa-main div[class*="qa-part-form"] {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #2a3744 !important;
    padding: 15px !important;
    border-radius: 4px !important;
}

/* Force Form Labels and Subtext to be Bright and Readable */
html.qa-dark-mode .qa-main .qa-form-tall-label,
html.qa-dark-mode .qa-main .qa-form-wide-label,
html.qa-dark-mode .qa-main .qa-form-tall-note,
html.qa-dark-mode .qa-main .qa-form-tall-note a,
html.qa-dark-mode .qa-main .qa-form-wide-note,
html.qa-dark-mode .qa-main .qa-form-tall-data label,
html.qa-dark-mode .qa-main .qa-form-wide-data label {
    color: #dbdee1 !important;
    text-shadow: none !important;
}
/* --------------------------------------------------- */

/* ---------------------------------------------------
   LISTS FIX: My Favorites, Users, & Categories
------------------------------------------------------ */
/* Paint the Main Container Boxes Dark using high specificity */
html.qa-dark-mode .qa-main .qa-part-ranking-users,
html.qa-dark-mode .qa-main .qa-part-ranking-tags,
html.qa-dark-mode .qa-main .qa-part-favorite-users,
html.qa-dark-mode .qa-main .qa-part-favorite-tags,
html.qa-dark-mode .qa-main .qa-part-favorite-cats,
html.qa-dark-mode .qa-main .qa-part-browse-cat,
html.qa-dark-mode .qa-main .qa-part-nav-list,
html.qa-dark-mode .qa-main .qa-part-nav-list-categories,
html.qa-dark-mode .qa-main .qa-part-nav-list-users,
html.qa-dark-mode .qa-main .qa-part-nav-list-tags {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #2a3744 !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
}

/* MAXIMUM SPECIFICITY: Sledgehammer the white backgrounds off all lists */
html.qa-dark-mode .qa-main ul.qa-browse-cat-list,
html.qa-dark-mode .qa-main li.qa-browse-cat-item,
html.qa-dark-mode .qa-main li.qa-browse-cat-open,
html.qa-dark-mode .qa-main ul.qa-user-list,
html.qa-dark-mode .qa-main li.qa-user-list-item,
html.qa-dark-mode .qa-main span.qa-ranking-item,
html.qa-dark-mode .qa-main span.qa-top-users-item,
html.qa-dark-mode .qa-main span.qa-top-tags-item,
html.qa-dark-mode .qa-main ul.qa-category-list,
html.qa-dark-mode .qa-main li.qa-category-list-item {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Add clean row dividers for categories and users */
html.qa-dark-mode .qa-main li.qa-browse-cat-item,
html.qa-dark-mode .qa-main li.qa-user-list-item {
    border-bottom: 1px solid #2a3744 !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
html.qa-dark-mode .qa-main li.qa-browse-cat-item:last-child,
html.qa-dark-mode .qa-main li.qa-user-list-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Brighten Text Labels so they are readable on dark backgrounds */
html.qa-dark-mode .qa-main .qa-browse-cat-nolink,
html.qa-dark-mode .qa-main .qa-browse-cat-link,
html.qa-dark-mode .qa-main .qa-user-link,
html.qa-dark-mode .qa-main .qa-top-users-label,
html.qa-dark-mode .qa-main .qa-top-users-label a {
    color: #dbdee1 !important;
}

html.qa-dark-mode .qa-main .qa-browse-cat-note,
html.qa-dark-mode .qa-main .qa-browse-cat-note a {
    color: #b5bac1 !important;
}

/* FIX FOR GREEN CATEGORY COUNT BOXES */
html.qa-dark-mode .qa-main .qa-browse-cat-note a,
html.qa-dark-mode .qa-main .qa-browse-cat-count {
    background-color: #27ae60 !important; 
    color: #ffffff !important;           
    text-shadow: none !important;
    border: none !important;
}

/* Ensure inner elements of the count box also stay white */
html.qa-dark-mode .qa-main .qa-browse-cat-note a *,
html.qa-dark-mode .qa-main .qa-browse-cat-count *,
html.qa-dark-mode .qa-main .qa-browse-cat-count a {
    color: #ffffff !important;
    text-shadow: none !important;
}
/* --------------------------------------------------- */

/* ---------------------------------------------------
   TAGS, LABELS & COUNTS (Muted Reds and Greens)
------------------------------------------------------ */
/* Muted Red for Category Names & Top Users */
html.qa-dark-mode .qa-main .qa-top-users-label,
html.qa-dark-mode .qa-main .qa-top-tags-label,
html.qa-dark-mode .qa-main .qa-browse-cat-link,
html.qa-dark-mode .qa-main a.qa-browse-cat-link,
html.qa-dark-mode .qa-main .qa-category-link,
html.qa-dark-mode .qa-main a.qa-category-link,
html.qa-dark-mode .qa-main .qa-part-ranking-users .qa-user-link,
html.qa-dark-mode .qa-main .qa-part-ranking-tags .qa-tag-link,
html.qa-dark-mode .qa-main .qa-top-users-label .qa-user-link {
    background-color: #8a2b21 !important; 
    background: #8a2b21 !important;
    color: #ffffff !important;
    border: none !important;
    text-shadow: none !important;
}
/* Ensure the little triangle tail matches the muted red */
html.qa-dark-mode .qa-main .qa-top-users-label::before,
html.qa-dark-mode .qa-main .qa-top-users-label::after,
html.qa-dark-mode .qa-main .qa-top-tags-label::before,
html.qa-dark-mode .qa-main .qa-top-tags-label::after,
html.qa-dark-mode .qa-main .qa-browse-cat-link::before,
html.qa-dark-mode .qa-main .qa-browse-cat-link::after,
html.qa-dark-mode .qa-main a.qa-browse-cat-link::before,
html.qa-dark-mode .qa-main a.qa-browse-cat-link::after,
html.qa-dark-mode .qa-main .qa-category-link::before,
html.qa-dark-mode .qa-main .qa-category-link::after,
html.qa-dark-mode .qa-main a.qa-category-link::before,
html.qa-dark-mode .qa-main a.qa-category-link::after,
html.qa-dark-mode .qa-main .qa-part-ranking-users .qa-user-link::before,
html.qa-dark-mode .qa-main .qa-part-ranking-users .qa-user-link::after,
html.qa-dark-mode .qa-main .qa-top-users-label .qa-user-link::before,
html.qa-dark-mode .qa-main .qa-top-users-label .qa-user-link::after {
    border-right-color: #8a2b21 !important;
    border-left-color: #8a2b21 !important;
}

/* Muted Green for Scores and Category Counts */
html.qa-dark-mode .qa-main .qa-top-users-score,
html.qa-dark-mode .qa-main .qa-top-tags-score,
html.qa-dark-mode .qa-main .qa-browse-cat-count {
    background-color: #1e6c3a !important; 
    background: #1e6c3a !important;
    color: #ffffff !important;
    border: none !important;
    text-shadow: none !important;
}
/* Ensure the little triangle tail matches the muted green */
html.qa-dark-mode .qa-main .qa-top-users-score::before,
html.qa-dark-mode .qa-main .qa-top-users-score::after,
html.qa-dark-mode .qa-main .qa-top-tags-score::before,
html.qa-dark-mode .qa-main .qa-top-tags-score::after,
html.qa-dark-mode .qa-main .qa-browse-cat-count::before,
html.qa-dark-mode .qa-main .qa-browse-cat-count::after {
    border-right-color: #1e6c3a !important;
    border-left-color: #1e6c3a !important;
}

/* Brighten standard text links inside these tags */
html.qa-dark-mode .qa-main .qa-top-users-label a,
html.qa-dark-mode .qa-main .qa-top-tags-label a,
html.qa-dark-mode .qa-main .qa-browse-cat-link a,
html.qa-dark-mode .qa-main .qa-browse-cat-item > a,
html.qa-dark-mode .qa-main .qa-top-users-score *,
html.qa-dark-mode .qa-main .qa-top-tags-score *,
html.qa-dark-mode .qa-main .qa-browse-cat-count * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* REMOVE RED BACKGROUND FROM QUESTION LIST CATEGORIES */
html.qa-dark-mode .qa-main .qa-q-item-meta .qa-category-link,
html.qa-dark-mode .qa-main .qa-q-view-meta .qa-category-link {
    background-color: transparent !important;
    background: transparent !important;
    color: #5ba4e5 !important;
    padding: 0 !important;
}
html.qa-dark-mode .qa-main .qa-q-item-meta .qa-category-link::before,
html.qa-dark-mode .qa-main .qa-q-item-meta .qa-category-link::after,
html.qa-dark-mode .qa-main .qa-q-view-meta .qa-category-link::before,
html.qa-dark-mode .qa-main .qa-q-view-meta .qa-category-link::after {
    display: none !important; /* Nuke the tail on plain text links */
}
/* --------------------------------------------------- */

/* ---------------------------------------------------
   RSS FEED FIX: Protect and paint the Activity Feed Block
------------------------------------------------------ */
html.qa-dark-mode .qa-feed {
    background-color: #1a232c !important;
    border: 1px solid #2a3744 !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin-top: 20px !important;
    text-align: center !important;
}
html.qa-dark-mode .qa-feed a.qa-feed-link {
    color: #dbdee1 !important;
    text-shadow: none !important;
}
/* --------------------------------------------------- */

/* Fix inner white boxes injected by the Private Message Plugin */
html.qa-dark-mode .qa-message-item,
html.qa-dark-mode .qa-message-item > div,
html.qa-dark-mode .qa-message-content {
    background-color: transparent !important;
    background: transparent !important;
    color: #dbdee1 !important;
}



/* ---------------------------------------------------
   PRIVATE MESSAGE STATUS BADGE FIX
   The private message plugin uses inline light-colored
   pill badges for Pending / Not approved states. These
   need dark-mode colors so the text stays readable.
------------------------------------------------------ */

/* Pending badge: background:#fffbd6; border:#e0c97a */
html.qa-dark-mode .qa-main span[style*="background:#fffbd6" i],
html.qa-dark-mode .qa-main span[style*="background: #fffbd6" i],
html.qa-dark-mode .qa-main span[style*="background-color:#fffbd6" i],
html.qa-dark-mode .qa-main span[style*="background-color: #fffbd6" i],
html.qa-dark-mode .qa-main span[style*="background:#fff8d6" i],
html.qa-dark-mode .qa-main span[style*="background: #fff8d6" i],
html.qa-dark-mode .qa-main span[style*="background-color:#fff8d6" i],
html.qa-dark-mode .qa-main span[style*="background-color: #fff8d6" i],
html.qa-dark-mode .qa-main span[style*="border:1px solid #e0c97a" i],
html.qa-dark-mode .qa-main span[style*="border: 1px solid #e0c97a" i] {
    background-color: #3b351d !important;
    background: #3b351d !important;
    color: #f6d66a !important;
    border-color: #8a6f1d !important;
    text-shadow: none !important;
}

html.qa-dark-mode .qa-main span[style*="background:#fffbd6" i] *,
html.qa-dark-mode .qa-main span[style*="background: #fffbd6" i] *,
html.qa-dark-mode .qa-main span[style*="background-color:#fffbd6" i] *,
html.qa-dark-mode .qa-main span[style*="background-color: #fffbd6" i] *,
html.qa-dark-mode .qa-main span[style*="border:1px solid #e0c97a" i] *,
html.qa-dark-mode .qa-main span[style*="border: 1px solid #e0c97a" i] * {
    color: #f6d66a !important;
    text-shadow: none !important;
}

/* Not approved / declined badge: background:#fff3e3; border:#e1a3a3 */
html.qa-dark-mode .qa-main span[style*="background:#fff3e3" i],
html.qa-dark-mode .qa-main span[style*="background: #fff3e3" i],
html.qa-dark-mode .qa-main span[style*="background-color:#fff3e3" i],
html.qa-dark-mode .qa-main span[style*="background-color: #fff3e3" i],
html.qa-dark-mode .qa-main span[style*="background:#ffe3e3" i],
html.qa-dark-mode .qa-main span[style*="background: #ffe3e3" i],
html.qa-dark-mode .qa-main span[style*="background-color:#ffe3e3" i],
html.qa-dark-mode .qa-main span[style*="background-color: #ffe3e3" i],
html.qa-dark-mode .qa-main span[style*="background:#fff0f0" i],
html.qa-dark-mode .qa-main span[style*="background: #fff0f0" i],
html.qa-dark-mode .qa-main span[style*="background-color:#fff0f0" i],
html.qa-dark-mode .qa-main span[style*="background-color: #fff0f0" i],
html.qa-dark-mode .qa-main span[style*="border:1px solid #e1a3a3" i],
html.qa-dark-mode .qa-main span[style*="border: 1px solid #e1a3a3" i] {
    background-color: #3a2022 !important;
    background: #3a2022 !important;
    color: #ffb3b3 !important;
    border-color: #9b5b5b !important;
    text-shadow: none !important;
}

html.qa-dark-mode .qa-main span[style*="background:#fff3e3" i] *,
html.qa-dark-mode .qa-main span[style*="background: #fff3e3" i] *,
html.qa-dark-mode .qa-main span[style*="background-color:#fff3e3" i] *,
html.qa-dark-mode .qa-main span[style*="background-color: #fff3e3" i] *,
html.qa-dark-mode .qa-main span[style*="border:1px solid #e1a3a3" i] *,
html.qa-dark-mode .qa-main span[style*="border: 1px solid #e1a3a3" i] * {
    color: #ffb3b3 !important;
    text-shadow: none !important;
}
/* --------------------------------------------------- */

/* Ensure nested Sub-Comments are transparent */
html.qa-dark-mode .qa-c-list-item .qa-c-list-item,
html.qa-dark-mode .qa-c-list-item .qa-c-item {
    background-color: transparent !important;
    border: none !important;
}

/* Darken "Recent Contacts" pill bubbles in Private Messages */
html.qa-dark-mode [class*="qa-template-message"] .qa-part-form a,
html.qa-dark-mode [class*="qa-template-message"] .qa-main a[style*="background"],
html.qa-dark-mode [class*="qa-template-message"] .qa-main a[style*="border"],
html.qa-dark-mode [class*="qa-template-message"] .qa-main a[class*="contact"],
html.qa-dark-mode [class*="qa-template-message"] .qa-main a[class*="pm-"] {
    background-color: #233140 !important;
    background: #233140 !important;
    color: #a3ccf5 !important;
    border: 1px solid #364859 !important;
    border-radius: 12px !important;
}

/* Target the white bar under questions and the "Page" label */
html.qa-dark-mode .qa-part-a-form,
html.qa-dark-mode .qa-a-form,
html.qa-dark-mode .qa-part-c-form,
html.qa-dark-mode .qa-c-form,
html.qa-dark-mode .qa-suggest-next,
html.qa-dark-mode .qa-page-links,
html.qa-dark-mode .qa-page-links-list,
html.qa-dark-mode .qa-page-links-label {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: #dbdee1 !important;
}

/* Pagination / Navigation Links */
html.qa-dark-mode .qa-page-links-list li,
html.qa-dark-mode .qa-page-links-list a,
html.qa-dark-mode .qa-page-links-list span {
    background-color: #161e26 !important;
    background: #161e26 !important;
    color: #5ba4e5 !important;
    border: 1px solid #2a3744 !important;
}

html.qa-dark-mode .qa-page-links-list .qa-page-selected {
    background-color: #5ba4e5 !important;
    background: #5ba4e5 !important;
    color: #12181e !important;
    border-color: #5ba4e5 !important;
}

html.qa-dark-mode .qa-page-links-list a:hover {
    background-color: #2a3744 !important;
    background: #2a3744 !important;
    color: #f2f3f5 !important;
}

/* Profile, Message, & Account Form Tables */
html.qa-dark-mode .qa-main table,
html.qa-dark-mode .qa-main tbody,
html.qa-dark-mode .qa-main tr,
html.qa-dark-mode .qa-main th,
html.qa-dark-mode .qa-main td,
html.qa-dark-mode .qa-part-custom,
html.qa-dark-mode .qa-part-custom div,
html.qa-dark-mode .qa-user-activity div,
html.qa-dark-mode .qa-form-wide-table,
html.qa-dark-mode .qa-form-tall-table,
html.qa-dark-mode .qa-form-light-table {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #2a3744 !important;
    color: #dbdee1 !important;
}

/* ---------------------------------------------------
   PLUGIN FIX: Nuke stubborn white boxes on User Profile 
------------------------------------------------------ */
html.qa-dark-mode .qa-template-user .qa-main > div:not(.qa-user-profile):not(.qa-user-activity) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}
html.qa-dark-mode .qa-template-user .qa-main > table {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* ---------------------------------------------------
   POLLS PLUGIN FIX: Override custom part transparency wipe
------------------------------------------------------ */
/* Paint the main poll box dark and override the transparent wipe */
html.qa-dark-mode .qa-main #qa-poll-div {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #2a3744 !important;
    color: #dbdee1 !important;
    padding: 15px !important;
    border-radius: 4px !important;
}

/* Brighten choice text and titles */
html.qa-dark-mode .qa-main .qa-poll-choice,
html.qa-dark-mode .qa-main .qa-poll-choice-title,
html.qa-dark-mode .qa-main #qa-poll-choices-title {
    color: #f2f3f5 !important;
}

/* Restore the green filled vote blocks (using td elements) */
html.qa-dark-mode .qa-main td.qa-poll-vote-block {
    background-color: #1abc9c !important;
    background: #1abc9c !important;
    border: none !important;
}

/* Make the empty vote blocks visible but dark-themed */
html.qa-dark-mode .qa-main td.qa-poll-vote-block-empty {
    background-color: #2a3744 !important;
    background: #2a3744 !important;
    border: none !important;
}

/* Darken standard buttons (Close/Delete) inside polls */
html.qa-dark-mode .qa-main input.qa-poll-button {
    background-color: #2a3744 !important;
    color: #dbdee1 !important;
    border: 1px solid #3f5266 !important;
    text-shadow: none !important;
    padding: 5px 10px !important;
}
html.qa-dark-mode .qa-main input.qa-poll-button:hover {
    background-color: #364859 !important;
}
/* --------------------------------------------------- */

/* Remove double borders from nested wrappers */
html.qa-dark-mode .qa-q-view-main,
html.qa-dark-mode .qa-item-main,
html.qa-dark-mode .qa-a-list,
html.qa-dark-mode .qa-c-list {
    background-color: transparent !important;
    border: none !important;
}

/* 3. Typography & Links */
html.qa-dark-mode h1,
html.qa-dark-mode h2,
html.qa-dark-mode h3,
html.qa-dark-mode .qa-q-item-title a,
html.qa-dark-mode .qa-q-view-title,
html.qa-dark-mode .qa-q-view-title a,
html.qa-dark-mode .qa-main-heading,
html.qa-dark-mode .qa-main-heading a {
    color: #f2f3f5 !important; /* Discord Header White */
    text-shadow: none !important;
    opacity: 1 !important;
}

html.qa-dark-mode a {
    color: #5ba4e5 !important;
}

html.qa-dark-mode a:hover {
    color: #8bbdf0 !important;
}

html.qa-dark-mode .qa-q-item-meta,
html.qa-dark-mode .qa-q-view-meta,
html.qa-dark-mode .qa-a-item-meta,
html.qa-dark-mode .qa-c-item-meta,
html.qa-dark-mode .qa-view-count-data {
    color: #b5bac1 !important; /* Discord Muted Grey */
}

/* Nuke shadow from feed/RSS link */
html.qa-dark-mode .qa-feed-link {
    text-shadow: none !important;
    color: #dbdee1 !important;
}

/* ---------------------------------------------------
   BLOCKQUOTE FIX: Distinct Dark Styling
------------------------------------------------------ */
html.qa-dark-mode blockquote {
    background-color: #12181e !important; /* Recessed dark background */
    background: #12181e !important;
    border-left: 4px solid #5ba4e5 !important; /* Matching blue theme accent */
    color: #b5bac1 !important; /* Slightly muted text for visual separation */
}
/* --------------------------------------------------- */


/* ---------------------------------------------------
   PRE / CODE BLOCK FIX
   Q2A uses stylesheet-based gray backgrounds for <pre>,
   so the inline pasted-text fix will not catch them.
------------------------------------------------------ */
html.qa-dark-mode .qa-main .qa-q-view-content pre,
html.qa-dark-mode .qa-main .qa-a-item-content pre,
html.qa-dark-mode .qa-main .qa-c-item-content pre,
html.qa-dark-mode .qa-main .qa-preview pre,
html.qa-dark-mode .qa-main .qa-post-content pre {
    background-color: #1f2a35 !important;
    background: #1f2a35 !important;
    color: #f2f3f5 !important;
    border: 1px solid #3f5266 !important;
    text-shadow: none !important;
}

/* Keep text/code inside pre blocks readable */
html.qa-dark-mode .qa-main .qa-q-view-content pre *,
html.qa-dark-mode .qa-main .qa-a-item-content pre *,
html.qa-dark-mode .qa-main .qa-c-item-content pre *,
html.qa-dark-mode .qa-main .qa-preview pre *,
html.qa-dark-mode .qa-main .qa-post-content pre * {
    color: #f2f3f5 !important;
    text-shadow: none !important;
}

/* Optional: inline code styling, in case users paste <code> outside a <pre> */
html.qa-dark-mode .qa-main .qa-q-view-content code,
html.qa-dark-mode .qa-main .qa-a-item-content code,
html.qa-dark-mode .qa-main .qa-c-item-content code,
html.qa-dark-mode .qa-main .qa-preview code,
html.qa-dark-mode .qa-main .qa-post-content code {
    background-color: #1f2a35 !important;
    background: #1f2a35 !important;
    color: #f2f3f5 !important;
    border: 1px solid #3f5266 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    text-shadow: none !important;
}
/* --------------------------------------------------- */


/* ---------------------------------------------------
   PASTED TEXT FIX - SAFE DARK MODE VERSION
   Preserve user-selected CKEditor text colors and background colors.
   Only remove pasted white backgrounds.
   Convert light gray backgrounds into dark-mode-safe gray.
------------------------------------------------------ */

/* Remove only pasted white backgrounds, not intentional colored highlights */
html.qa-dark-mode .qa-post-content [style*="background-color:#ffffff" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #ffffff" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#fff" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #fff" i],
html.qa-dark-mode .qa-post-content [style*="background-color:white" i],
html.qa-dark-mode .qa-post-content [style*="background-color: white" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(255,255,255)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(255, 255, 255)" i],
html.qa-dark-mode .qa-post-content [style*="background:#ffffff" i],
html.qa-dark-mode .qa-post-content [style*="background: #ffffff" i],
html.qa-dark-mode .qa-post-content [style*="background:#fff" i],
html.qa-dark-mode .qa-post-content [style*="background: #fff" i],
html.qa-dark-mode .qa-post-content [style*="background:white" i],
html.qa-dark-mode .qa-post-content [style*="background: white" i],
html.qa-dark-mode .qa-post-content [style*="background:rgb(255,255,255)" i],
html.qa-dark-mode .qa-post-content [style*="background: rgb(255, 255, 255)" i] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Convert very light gray backgrounds to a dark-mode-safe gray */
html.qa-dark-mode .qa-post-content [style*="background-color:#f5f5f5" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #f5f5f5" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#f2f2f2" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #f2f2f2" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#f0f0f0" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #f0f0f0" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#eeeeee" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #eeeeee" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#eee" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #eee" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#e6e6e6" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #e6e6e6" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#e5e5e5" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #e5e5e5" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#dddddd" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #dddddd" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#ddd" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #ddd" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#dcdcdc" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #dcdcdc" i],
html.qa-dark-mode .qa-post-content [style*="background-color:gainsboro" i],
html.qa-dark-mode .qa-post-content [style*="background-color: gainsboro" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#d9d9d9" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #d9d9d9" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#d8d8d8" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #d8d8d8" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#d3d3d3" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #d3d3d3" i],
html.qa-dark-mode .qa-post-content [style*="background-color:lightgray" i],
html.qa-dark-mode .qa-post-content [style*="background-color: lightgray" i],
html.qa-dark-mode .qa-post-content [style*="background-color:lightgrey" i],
html.qa-dark-mode .qa-post-content [style*="background-color: lightgrey" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#cccccc" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #cccccc" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#ccc" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #ccc" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#c0c0c0" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #c0c0c0" i],
html.qa-dark-mode .qa-post-content [style*="background-color:silver" i],
html.qa-dark-mode .qa-post-content [style*="background-color: silver" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(245,245,245)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(245, 245, 245)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(242,242,242)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(242, 242, 242)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(240,240,240)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(240, 240, 240)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(238,238,238)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(238, 238, 238)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(230,230,230)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(230, 230, 230)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(221,221,221)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(221, 221, 221)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(220,220,220)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(220, 220, 220)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(217,217,217)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(217, 217, 217)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(216,216,216)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(216, 216, 216)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(211,211,211)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(211, 211, 211)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(204,204,204)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(204, 204, 204)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(192,192,192)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(192, 192, 192)" i],
html.qa-dark-mode .qa-post-content [style*="background:#f5f5f5" i],
html.qa-dark-mode .qa-post-content [style*="background: #f5f5f5" i],
html.qa-dark-mode .qa-post-content [style*="background:#f2f2f2" i],
html.qa-dark-mode .qa-post-content [style*="background: #f2f2f2" i],
html.qa-dark-mode .qa-post-content [style*="background:#f0f0f0" i],
html.qa-dark-mode .qa-post-content [style*="background: #f0f0f0" i],
html.qa-dark-mode .qa-post-content [style*="background:#eeeeee" i],
html.qa-dark-mode .qa-post-content [style*="background: #eeeeee" i],
html.qa-dark-mode .qa-post-content [style*="background:#eee" i],
html.qa-dark-mode .qa-post-content [style*="background: #eee" i],
html.qa-dark-mode .qa-post-content [style*="background:#e6e6e6" i],
html.qa-dark-mode .qa-post-content [style*="background: #e6e6e6" i],
html.qa-dark-mode .qa-post-content [style*="background:#dddddd" i],
html.qa-dark-mode .qa-post-content [style*="background: #dddddd" i],
html.qa-dark-mode .qa-post-content [style*="background:#ddd" i],
html.qa-dark-mode .qa-post-content [style*="background: #ddd" i],
html.qa-dark-mode .qa-post-content [style*="background:#dcdcdc" i],
html.qa-dark-mode .qa-post-content [style*="background: #dcdcdc" i],
html.qa-dark-mode .qa-post-content [style*="background:gainsboro" i],
html.qa-dark-mode .qa-post-content [style*="background: gainsboro" i],
html.qa-dark-mode .qa-post-content [style*="background:#d9d9d9" i],
html.qa-dark-mode .qa-post-content [style*="background: #d9d9d9" i],
html.qa-dark-mode .qa-post-content [style*="background:#d8d8d8" i],
html.qa-dark-mode .qa-post-content [style*="background: #d8d8d8" i],
html.qa-dark-mode .qa-post-content [style*="background:#d3d3d3" i],
html.qa-dark-mode .qa-post-content [style*="background: #d3d3d3" i],
html.qa-dark-mode .qa-post-content [style*="background:lightgray" i],
html.qa-dark-mode .qa-post-content [style*="background: lightgray" i],
html.qa-dark-mode .qa-post-content [style*="background:lightgrey" i],
html.qa-dark-mode .qa-post-content [style*="background: lightgrey" i],
html.qa-dark-mode .qa-post-content [style*="background:#cccccc" i],
html.qa-dark-mode .qa-post-content [style*="background: #cccccc" i],
html.qa-dark-mode .qa-post-content [style*="background:#ccc" i],
html.qa-dark-mode .qa-post-content [style*="background: #ccc" i],
html.qa-dark-mode .qa-post-content [style*="background:#c0c0c0" i],
html.qa-dark-mode .qa-post-content [style*="background: #c0c0c0" i],
html.qa-dark-mode .qa-post-content [style*="background:silver" i],
html.qa-dark-mode .qa-post-content [style*="background: silver" i] {
    background-color: #2a3744 !important;
    background: #2a3744 !important;
}

/* Convert medium gray backgrounds to a slightly lighter dark-mode gray */
html.qa-dark-mode .qa-post-content [style*="background-color:#999999" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #999999" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#999" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #999" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#888888" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #888888" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#888" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #888" i],
html.qa-dark-mode .qa-post-content [style*="background-color:gray" i],
html.qa-dark-mode .qa-post-content [style*="background-color: gray" i],
html.qa-dark-mode .qa-post-content [style*="background-color:grey" i],
html.qa-dark-mode .qa-post-content [style*="background-color: grey" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(153,153,153)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(153, 153, 153)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(136,136,136)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(136, 136, 136)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(128,128,128)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(128, 128, 128)" i],
html.qa-dark-mode .qa-post-content [style*="background:#999999" i],
html.qa-dark-mode .qa-post-content [style*="background: #999999" i],
html.qa-dark-mode .qa-post-content [style*="background:#999" i],
html.qa-dark-mode .qa-post-content [style*="background: #999" i],
html.qa-dark-mode .qa-post-content [style*="background:#888888" i],
html.qa-dark-mode .qa-post-content [style*="background: #888888" i],
html.qa-dark-mode .qa-post-content [style*="background:#888" i],
html.qa-dark-mode .qa-post-content [style*="background: #888" i],
html.qa-dark-mode .qa-post-content [style*="background:gray" i],
html.qa-dark-mode .qa-post-content [style*="background: grey" i],
html.qa-dark-mode .qa-post-content [style*="background:grey" i],
html.qa-dark-mode .qa-post-content [style*="background: gray" i] {
    background-color: #3f5266 !important;
    background: #3f5266 !important;
}


/* ---------------------------------------------------
   USER FONT COLOR FIX + BLACK BACKGROUND SECRET FIX
------------------------------------------------------ */

/* Explicit user-selected true black text is intentionally left alone.
   Black should remain black in both light mode and dark mode.
   Black-on-black spoiler/secret behavior is handled by the safe
   black-on-black block below, and only applies when BOTH the text
   color and background are black. */

/* ---------------------------------------------------
   NEAR-BLACK PASTED TEXT FIX
   Some pasted/old posts use near-black inline colors such as #282829
   instead of true #000000. These are readable in light mode but almost
   invisible in dark mode. This block is intentionally exact, so custom
   colors such as #8B4513 are not changed.

   Keep this above the black-background secret/spoiler rule below so
   black-background secret mode still wins.
------------------------------------------------------ */
html.qa-dark-mode .qa-post-content [style^="color:#282829" i],
html.qa-dark-mode .qa-post-content [style^="color: #282829" i],
html.qa-dark-mode .qa-post-content [style*=";color:#282829" i],
html.qa-dark-mode .qa-post-content [style*="; color:#282829" i],
html.qa-dark-mode .qa-post-content [style*=";color: #282829" i],
html.qa-dark-mode .qa-post-content [style*="; color: #282829" i],

html.qa-dark-mode .qa-post-content [style^="color:#282828" i],
html.qa-dark-mode .qa-post-content [style^="color: #282828" i],
html.qa-dark-mode .qa-post-content [style*=";color:#282828" i],
html.qa-dark-mode .qa-post-content [style*="; color:#282828" i],
html.qa-dark-mode .qa-post-content [style*=";color: #282828" i],
html.qa-dark-mode .qa-post-content [style*="; color: #282828" i],

html.qa-dark-mode .qa-post-content [style^="color:#202124" i],
html.qa-dark-mode .qa-post-content [style^="color: #202124" i],
html.qa-dark-mode .qa-post-content [style*=";color:#202124" i],
html.qa-dark-mode .qa-post-content [style*="; color:#202124" i],
html.qa-dark-mode .qa-post-content [style*=";color: #202124" i],
html.qa-dark-mode .qa-post-content [style*="; color: #202124" i],

html.qa-dark-mode .qa-post-content [style^="color:#242424" i],
html.qa-dark-mode .qa-post-content [style^="color: #242424" i],
html.qa-dark-mode .qa-post-content [style*=";color:#242424" i],
html.qa-dark-mode .qa-post-content [style*="; color:#242424" i],
html.qa-dark-mode .qa-post-content [style*=";color: #242424" i],
html.qa-dark-mode .qa-post-content [style*="; color: #242424" i],

html.qa-dark-mode .qa-post-content [style^="color:#222222" i],
html.qa-dark-mode .qa-post-content [style^="color: #222222" i],
html.qa-dark-mode .qa-post-content [style*=";color:#222222" i],
html.qa-dark-mode .qa-post-content [style*="; color:#222222" i],
html.qa-dark-mode .qa-post-content [style*=";color: #222222" i],
html.qa-dark-mode .qa-post-content [style*="; color: #222222" i],

html.qa-dark-mode .qa-post-content [style^="color:#222" i],
html.qa-dark-mode .qa-post-content [style^="color: #222" i],
html.qa-dark-mode .qa-post-content [style*=";color:#222" i],
html.qa-dark-mode .qa-post-content [style*="; color:#222" i],
html.qa-dark-mode .qa-post-content [style*=";color: #222" i],
html.qa-dark-mode .qa-post-content [style*="; color: #222" i],

html.qa-dark-mode .qa-post-content [style^="color:#333333" i],
html.qa-dark-mode .qa-post-content [style^="color: #333333" i],
html.qa-dark-mode .qa-post-content [style*=";color:#333333" i],
html.qa-dark-mode .qa-post-content [style*="; color:#333333" i],
html.qa-dark-mode .qa-post-content [style*=";color: #333333" i],
html.qa-dark-mode .qa-post-content [style*="; color: #333333" i],

html.qa-dark-mode .qa-post-content [style^="color:#333" i],
html.qa-dark-mode .qa-post-content [style^="color: #333" i],
html.qa-dark-mode .qa-post-content [style*=";color:#333" i],
html.qa-dark-mode .qa-post-content [style*="; color:#333" i],
html.qa-dark-mode .qa-post-content [style*=";color: #333" i],
html.qa-dark-mode .qa-post-content [style*="; color: #333" i],

html.qa-dark-mode .qa-post-content [style^="color:rgb(40,40,41)" i],
html.qa-dark-mode .qa-post-content [style^="color: rgb(40, 40, 41)" i],
html.qa-dark-mode .qa-post-content [style*=";color:rgb(40,40,41)" i],
html.qa-dark-mode .qa-post-content [style*="; color:rgb(40,40,41)" i],
html.qa-dark-mode .qa-post-content [style*=";color: rgb(40, 40, 41)" i],
html.qa-dark-mode .qa-post-content [style*="; color: rgb(40, 40, 41)" i],

html.qa-dark-mode .qa-post-content [style^="color:rgb(32,33,36)" i],
html.qa-dark-mode .qa-post-content [style^="color: rgb(32, 33, 36)" i],
html.qa-dark-mode .qa-post-content [style*=";color:rgb(32,33,36)" i],
html.qa-dark-mode .qa-post-content [style*="; color:rgb(32,33,36)" i],
html.qa-dark-mode .qa-post-content [style*=";color: rgb(32, 33, 36)" i],
html.qa-dark-mode .qa-post-content [style*="; color: rgb(32, 33, 36)" i] {
    color: #f2f3f5 !important;
}
/* --------------------------------------------------- */


/* ---------------------------------------------------
   DARK HIGHLIGHT / DARK INLINE COLOR FIX
   Fixes user-created dark highlight boxes and dark pasted colors
   that are readable in light mode but too dark in dark mode.

   Important: Keep this ABOVE the black-background secret/spoiler
   rule so true black spoiler bars still stay hidden.
------------------------------------------------------ */

/* User selected a dark background with light text.
   In dark mode, keep it visible by changing the background to
   a lighter slate highlight instead of leaving it the same as
   the post background. */
html.qa-dark-mode .qa-post-content [style*="background-color:#1a232c" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #1a232c" i],
html.qa-dark-mode .qa-post-content [style*="background:#1a232c" i],
html.qa-dark-mode .qa-post-content [style*="background: #1a232c" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(26,35,44)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(26, 35, 44)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#12181e" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #12181e" i],
html.qa-dark-mode .qa-post-content [style*="background:#12181e" i],
html.qa-dark-mode .qa-post-content [style*="background: #12181e" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(18,24,30)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(18, 24, 30)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#2c3e50" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #2c3e50" i],
html.qa-dark-mode .qa-post-content [style*="background:#2c3e50" i],
html.qa-dark-mode .qa-post-content [style*="background: #2c3e50" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(44,62,80)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(44, 62, 80)" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#34495e" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #34495e" i],
html.qa-dark-mode .qa-post-content [style*="background:#34495e" i],
html.qa-dark-mode .qa-post-content [style*="background: #34495e" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(52,73,94)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(52, 73, 94)" i] {
    background-color: #3a4350 !important;
    background: #3a4350 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Inner elements inside those dark highlight boxes should not keep
   hardcoded dark text colors. */
html.qa-dark-mode .qa-post-content [style*="background-color:#1a232c" i] *,
html.qa-dark-mode .qa-post-content [style*="background-color: #1a232c" i] *,
html.qa-dark-mode .qa-post-content [style*="background:#1a232c" i] *,
html.qa-dark-mode .qa-post-content [style*="background: #1a232c" i] *,
html.qa-dark-mode .qa-post-content [style*="background-color:#12181e" i] *,
html.qa-dark-mode .qa-post-content [style*="background-color: #12181e" i] *,
html.qa-dark-mode .qa-post-content [style*="background:#12181e" i] *,
html.qa-dark-mode .qa-post-content [style*="background: #12181e" i] *,
html.qa-dark-mode .qa-post-content [style*="background-color:#2c3e50" i] *,
html.qa-dark-mode .qa-post-content [style*="background-color: #2c3e50" i] *,
html.qa-dark-mode .qa-post-content [style*="background:#2c3e50" i] *,
html.qa-dark-mode .qa-post-content [style*="background: #2c3e50" i] *,
html.qa-dark-mode .qa-post-content [style*="background-color:#34495e" i] *,
html.qa-dark-mode .qa-post-content [style*="background-color: #34495e" i] *,
html.qa-dark-mode .qa-post-content [style*="background:#34495e" i] *,
html.qa-dark-mode .qa-post-content [style*="background: #34495e" i] * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* The screenshots show inline color:#34495e / rgb(52,73,94)
   with no usable background. That is readable in light mode but nearly
   invisible in dark mode, so brighten only these very dark blue-gray
   text colors. */
html.qa-dark-mode .qa-post-content [style^="color:#34495e" i],
html.qa-dark-mode .qa-post-content [style^="color: #34495e" i],
html.qa-dark-mode .qa-post-content [style*=";color:#34495e" i],
html.qa-dark-mode .qa-post-content [style*="; color:#34495e" i],
html.qa-dark-mode .qa-post-content [style*=";color: #34495e" i],
html.qa-dark-mode .qa-post-content [style*="; color: #34495e" i],
html.qa-dark-mode .qa-post-content [style^="color:#2c3e50" i],
html.qa-dark-mode .qa-post-content [style^="color: #2c3e50" i],
html.qa-dark-mode .qa-post-content [style*=";color:#2c3e50" i],
html.qa-dark-mode .qa-post-content [style*="; color:#2c3e50" i],
html.qa-dark-mode .qa-post-content [style*=";color: #2c3e50" i],
html.qa-dark-mode .qa-post-content [style*="; color: #2c3e50" i],
html.qa-dark-mode .qa-post-content [style^="color:rgb(52,73,94)" i],
html.qa-dark-mode .qa-post-content [style^="color: rgb(52, 73, 94)" i],
html.qa-dark-mode .qa-post-content [style*=";color:rgb(52,73,94)" i],
html.qa-dark-mode .qa-post-content [style*="; color:rgb(52,73,94)" i],
html.qa-dark-mode .qa-post-content [style*=";color: rgb(52, 73, 94)" i],
html.qa-dark-mode .qa-post-content [style*="; color: rgb(52, 73, 94)" i],
html.qa-dark-mode .qa-post-content [style^="color:rgb(44,62,80)" i],
html.qa-dark-mode .qa-post-content [style^="color: rgb(44, 62, 80)" i],
html.qa-dark-mode .qa-post-content [style*=";color:rgb(44,62,80)" i],
html.qa-dark-mode .qa-post-content [style*="; color:rgb(44,62,80)" i],
html.qa-dark-mode .qa-post-content [style*=";color: rgb(44, 62, 80)" i],
html.qa-dark-mode .qa-post-content [style*="; color: rgb(44, 62, 80)" i] {
    color: #dbeafe !important;
    text-shadow: none !important;
}
/* --------------------------------------------------- */


/* ===================================================
   LIGHT MODE DARK-HIGHLIGHT READABILITY FIX

   Fixes posts where users/paste content saved a dark highlight
   color such as #1a232c, #12181e, #2c3e50, or #34495e.

   In light mode, dark text on those dark backgrounds is hard to
   read. This makes the text white only when the background is one
   of those dark highlight colors.

   True hidden text is not affected because black-on-black and
   white-on-white hidden mode is handled separately below.
=================================================== */

html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#1a232c" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #1a232c" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background:#1a232c" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background: #1a232c" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:rgb(26,35,44)" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: rgb(26, 35, 44)" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#12181e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #12181e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background:#12181e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background: #12181e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:rgb(18,24,30)" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: rgb(18, 24, 30)" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#2c3e50" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #2c3e50" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background:#2c3e50" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background: #2c3e50" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:rgb(44,62,80)" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: rgb(44, 62, 80)" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#34495e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #34495e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background:#34495e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background: #34495e" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:rgb(52,73,94)" i],
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: rgb(52, 73, 94)" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#1a232c" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #1a232c" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#1a232c" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #1a232c" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#12181e" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #12181e" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#12181e" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #12181e" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#2c3e50" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #2c3e50" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#2c3e50" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #2c3e50" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#34495e" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #34495e" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#34495e" i],
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #34495e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#1a232c" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #1a232c" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#1a232c" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #1a232c" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#12181e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #12181e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#12181e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #12181e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#2c3e50" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #2c3e50" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#2c3e50" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #2c3e50" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#34495e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #34495e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#34495e" i],
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #34495e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#1a232c" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #1a232c" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#1a232c" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #1a232c" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#12181e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #12181e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#12181e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #12181e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#2c3e50" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #2c3e50" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#2c3e50" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #2c3e50" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#34495e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #34495e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#34495e" i],
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #34495e" i] {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Inner spans/strong/b/i/etc inside those dark highlight boxes should also be readable. */
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#12181e" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #12181e" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background:#12181e" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background: #12181e" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background-color:#34495e" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background-color: #34495e" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background:#34495e" i] *,
html:not(.qa-dark-mode) .qa-post-content [style*="background: #34495e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#12181e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #12181e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#12181e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #12181e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color:#34495e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background-color: #34495e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background:#34495e" i] *,
html:not(.qa-dark-mode) .qa-q-view-content [style*="background: #34495e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#12181e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #12181e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#12181e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #12181e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color:#34495e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background-color: #34495e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background:#34495e" i] *,
html:not(.qa-dark-mode) .qa-a-item-content [style*="background: #34495e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#1a232c" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #1a232c" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#12181e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #12181e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#12181e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #12181e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#2c3e50" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #2c3e50" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color:#34495e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background-color: #34495e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background:#34495e" i] *,
html:not(.qa-dark-mode) .qa-c-item-content [style*="background: #34495e" i] * {
    color: #ffffff !important;
    text-shadow: none !important;
}
/* =================================================== */


/* 4. Navigation & Header */
/* Allow the top menu bar to automatically expand if the items wrap! */
html.qa-dark-mode #qam-topbar {
    background-color: #161e26 !important;
    border-color: #2a3744 !important;
    height: auto !important; 
    min-height: 52px !important;
}

html.qa-dark-mode .qa-nav-main,
html.qa-dark-mode .qa-nav-sub,
html.qa-dark-mode .qam-account-items-wrapper {
    background-color: #161e26 !important;
    border-color: #2a3744 !important;
}

/* Standard Header Links */
html.qa-dark-mode .qa-nav-main-link,
html.qa-dark-mode .qa-nav-sub-link {
    color: #dbdee1 !important;
}

/* Restore Bright Colors for "Hot!" and "Ask a Question" Navigation Items */
html.qa-dark-mode .qa-nav-main-hot .qa-nav-main-link,
html.qa-dark-mode .qa-nav-main-hot .qa-nav-main-link i {
    color: #f39c12 !important; /* Orange */
}
html.qa-dark-mode .qa-nav-main-ask .qa-nav-main-link,
html.qa-dark-mode .qa-nav-main-ask .qa-nav-main-link i {
    color: #2ecc71 !important; /* Green */
}

/* Hover effects */
html.qa-dark-mode .qa-nav-main-selected,
html.qa-dark-mode .qa-nav-main-link:hover {
    background-color: #233140 !important;
    color: #f2f3f5 !important;
}

/* Maintain special colors on hover */
html.qa-dark-mode .qa-nav-main-hot .qa-nav-main-link:hover,
html.qa-dark-mode .qa-nav-main-hot .qa-nav-main-link:hover i {
    color: #f39c12 !important;
}
html.qa-dark-mode .qa-nav-main-ask .qa-nav-main-link:hover,
html.qa-dark-mode .qa-nav-main-ask .qa-nav-main-link:hover i {
    color: #2ecc71 !important;
}

/* ---------------------------------------------------
   MENU TOGGLE FIX: Match Menu Formatting (Desktop vs Mobile)
------------------------------------------------------ */

/* Hide default infinity icon */
.qa-dark-mode-toggle-link::before {
    content: none !important;
    display: none !important;
}

/* Standard Desktop Layout */
.qa-dark-mode-toggle-link {
    display: block !important;
    text-align: center !important;
    /* Increased bottom padding from 1px to 5px to balance the height and add white space below */
    padding: 14px 10px 4px 10px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}


.qa-dark-mode-icon {
    display: block !important;
    margin: 0 auto 2px auto !important; /* Reduced bottom margin from 6px to 2px */
    width: 20px !important;
    height: 20px !important;
    position: relative !important; 
    top: -4px !important; 
}



/* Mobile Sidebar Layout */
@media (max-width: 800px) {
    .qa-dark-mode-toggle-link {
        display: block !important;
        text-align: left !important;
        padding: 10px 15px !important; 
    }
    
    .qa-dark-mode-icon {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 8px 0 0 !important;
    }
    
    .qa-dark-mode-text {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 18px !important;
    }
}

/* Mobile Ask Button Fix - Reverted to match light mode's turquoise */
html.qa-dark-mode .qam-ask-mobile a {
    background-color: #1abc9c !important; /* Snowflat turquoise */
    color: #ffffff !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
html.qa-dark-mode .qam-ask-mobile a:hover {
    background-color: #16a085 !important; /* Snowflat turquoise hover */
    color: #ffffff !important;
}

/* 5. Forms, Inputs & Buttons */
html.qa-dark-mode input[type="text"],
html.qa-dark-mode input[type="password"],
html.qa-dark-mode input[type="email"],
html.qa-dark-mode textarea,
html.qa-dark-mode select,
html.qa-dark-mode .qa-search-field {
    background-color: #0d1217 !important;
    color: #dbdee1 !important;
    border: 1px solid #364859 !important;
}

/* Private Messages History Box (Read-only inputs) */
html.qa-dark-mode textarea[readonly],
html.qa-dark-mode input[readonly],
html.qa-dark-mode textarea[disabled],
html.qa-dark-mode input[disabled] {
    background-color: #12181e !important;
    color: #b5bac1 !important;
    border: 1px solid #2a3744 !important;
}

/* Master Button Styles */
html.qa-dark-mode .qa-form-tall-button,
html.qa-dark-mode .qa-form-wide-button,
html.qa-dark-mode .qa-form-light-button {
    background-color: #2a3744 !important;
    color: #dbdee1 !important;
    border: 1px solid #3f5266 !important;
    text-shadow: none !important;
}

html.qa-dark-mode .qa-form-tall-button:hover,
html.qa-dark-mode .qa-form-light-button:hover {
    background-color: #364859 !important;
}

/* Force inner text to be grey! */
html.qa-dark-mode .qa-form-tall-button *,
html.qa-dark-mode .qa-form-wide-button *,
html.qa-dark-mode .qa-form-light-button * {
    color: #dbdee1 !important;
}

/* ---------------------------------------------------
   SIDEBAR / LOGIN WIDGET REGISTER BUTTON FIX
------------------------------------------------------ */
html.qa-dark-mode .qa-nav-user-list .qa-nav-user-register .qa-nav-user-link,
html.qa-dark-mode .qa-nav-user-list .qa-nav-user-login .qa-nav-user-link {
    background-color: #2a3744 !important;
    background: #2a3744 !important;
    color: #dbdee1 !important;
    border: 1px solid #3f5266 !important;
    text-shadow: none !important;
    display: block !important;
    text-align: center !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
}

html.qa-dark-mode .qa-nav-user-list .qa-nav-user-register .qa-nav-user-link:hover,
html.qa-dark-mode .qa-nav-user-list .qa-nav-user-login .qa-nav-user-link:hover {
    background-color: #364859 !important;
    background: #364859 !important;
}

/* ---------------------------------------------------
   USER PROFILE "SEND PRIVATE MESSAGE" BUTTON FIX
------------------------------------------------------ */
/* Ensure the "Registered user -" text is bright and readable */
html.qa-dark-mode .qa-form-wide-static {
    color: #dbdee1 !important;
}

/* Turn the raw link into a sleek dark green button */
html.qa-dark-mode .qa-form-wide-static a[href*="message"] {
    background-color: #27ae60 !important;
    background: #27ae60 !important;
    color: #dbdee1 !important;
    border: 1px solid #1e8449 !important;
    text-shadow: none !important;
    display: inline-block !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    margin-left: 5px !important;
}

html.qa-dark-mode .qa-form-wide-static a[href*="message"]:hover {
    background-color: #1e8449 !important;
    background: #1e8449 !important;
    color: #f2f3f5 !important;
}

/* ---------------------------------------------------
   BEST ANSWER CHECKBOX FIX
------------------------------------------------------ */
/* Recess the large white checkmark box */
html.qa-dark-mode .qa-a-selection input,
html.qa-dark-mode .qa-a-select-button,
html.qa-dark-mode .qa-a-unselect-button {
    background-color: #161e26 !important;
    border: 1px solid #364859 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Unselected state (Grey check) */
html.qa-dark-mode .qa-a-select-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5bac1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 32px !important;
    color: transparent !important;
}
html.qa-dark-mode .qa-a-select-button:hover {
    background-color: #233140 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* Selected state (Green check) */
html.qa-dark-mode .qa-a-unselect-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 32px !important;
    color: transparent !important;
}
html.qa-dark-mode .qa-a-unselect-button:hover {
    background-color: #3b2a2a !important;
    border-color: #e74c3c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e74c3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}
/* --------------------------------------------------- */

/* ---------------------------------------------------
   USER NOTIFICATIONS DROPDOWN FIX (Maximum Specificity)
------------------------------------------------------ */
/* Target the exact IDs to force the main wrappers dark */
html.qa-dark-mode div#nfyWrap,
html.qa-dark-mode div#nfyContainerInbox,
html.qa-dark-mode .nfyContainer {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #364859 !important;
    color: #dbdee1 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

/* Header Section ("My notifications") */
html.qa-dark-mode #nfyWrap .nfyTop {
    background-color: #161e26 !important;
    background: #161e26 !important;
    color: #f2f3f5 !important;
    border-bottom: 1px solid #2a3744 !important;
}

/* Close Link */
html.qa-dark-mode #nfyReadClose {
    color: #74b9ff !important; /* Brighter, legible blue */
}
html.qa-dark-mode #nfyReadClose:hover {
    color: #a3ccf5 !important;
}

/* Individual Notification Rows */
html.qa-dark-mode #nfyWrap .itemBox {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: 1px solid #2a3744 !important;
}

/* UNREAD / RECENT NOTIFICATIONS: Override blinding yellow with a dark muted gold highlight */
html.qa-dark-mode #nfyWrap .itemBox.unread,
html.qa-dark-mode #nfyWrap .itemBox.nfyUnread,
html.qa-dark-mode #nfyWrap .itemBox-new,
html.qa-dark-mode #nfyWrap .itemBox[style*="background"],
html.qa-dark-mode #nfyWrap .itemBox [style*="background"],
html.qa-dark-mode #nfyWrap .nfyItemLine[style*="background"] {
    background-color: #2f2a17 !important;
    background: #2f2a17 !important;
}

/* Row Hover Effect */
html.qa-dark-mode #nfyWrap .itemBox:hover {
    background-color: #233140 !important;
    background: #233140 !important;
}

/* Unread Row Hover Effect */
html.qa-dark-mode #nfyWrap .itemBox.unread:hover,
html.qa-dark-mode #nfyWrap .itemBox-new:hover,
html.qa-dark-mode #nfyWrap .itemBox[style*="background"]:hover,
html.qa-dark-mode #nfyWrap .itemBox:hover [style*="background"] {
    background-color: #3b351d !important;
    background: #3b351d !important;
}

/* Main Notification Text & Timestamps */
html.qa-dark-mode #nfyWrap .nfyWhat {
    color: #dbdee1 !important;
    text-shadow: none !important;
}
html.qa-dark-mode #nfyWrap .nfyTime {
    color: #b5bac1 !important;
    text-shadow: none !important;
}

/* HIGHLIGHT FIX: Make notification links a bright, legible pastel blue */
html.qa-dark-mode #nfyWrap .nfyWhat a {
    color: #74b9ff !important; 
    text-shadow: none !important;
}
html.qa-dark-mode #nfyWrap .nfyWhat a:hover {
    color: #a3ccf5 !important;
}

/* HIGHLIGHT FIX: Make bold text (like Usernames) bright white */
html.qa-dark-mode #nfyWrap .nfyWhat strong,
html.qa-dark-mode #nfyWrap .nfyWhat b {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Sledgehammer any residual white backgrounds or shadows inside */
html.qa-dark-mode #nfyWrap .nfyItemLine * {
    background-color: transparent !important;
    text-shadow: none !important;
}
/* --------------------------------------------------- */

/* ---------------------------------------------------
   REPLACE ALL BLACK PNG ICONS WITH CRISP WHITE SVGS
------------------------------------------------------ */
/* 1. Comment Bubble (with transparent 3 dots cut out!) */
html.qa-dark-mode .qa-form-light-button-comment,
html.qa-dark-mode .qa-c-list-item .qa-form-light-button-comment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dbdee1' fill-rule='evenodd' clip-rule='evenodd' d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z M 6 10 a 1.5 1.5 0 1 0 3 0 a 1.5 1.5 0 1 0 -3 0 M 10.5 10 a 1.5 1.5 0 1 0 3 0 a 1.5 1.5 0 1 0 -3 0 M 15 10 a 1.5 1.5 0 1 0 3 0 a 1.5 1.5 0 1 0 -3 0' /%3E%3C/svg%3E") !important;
}
/* 2. Reply Arrow */
html.qa-dark-mode .qa-form-light-button-reply {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbdee1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") !important;
}
/* 3. Edit Pencil */
html.qa-dark-mode .qa-form-light-button-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbdee1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
}
/* 4. Flag */
html.qa-dark-mode .qa-form-light-button-flag,
html.qa-dark-mode .qa-form-light-button-unflag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbdee1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E") !important;
}
/* 5. Hide / Reshow (Lightbulb) */
html.qa-dark-mode .qa-form-light-button-hide,
html.qa-dark-mode .qa-form-light-button-reshow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbdee1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E") !important;
}

/* 6. Close / Claim (Cross) */
html.qa-dark-mode .qa-form-light-button-close,
html.qa-dark-mode .qa-form-light-button-claim {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbdee1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}

/* Force standard sizing & keep left-alignment for main text buttons */
html.qa-dark-mode .qa-form-light-button[class*="-button-"] {
    background-size: 14px 14px !important;
    background-position: 10px center !important;
    background-repeat: no-repeat !important;
}

/* Center the SVGs perfectly inside the tiny square sub-comment buttons */
html.qa-dark-mode .qa-c-list-item .qa-form-light-button[class*="-button-"] {
    background-position: center center !important;
}

/* 7. Tags, Voting & Answer Counts */
html.qa-dark-mode .qa-tag-link {
    background-color: #233140 !important;
    border-color: #364859 !important;
    color: #a3ccf5 !important;
}

html.qa-dark-mode .qa-voting {
    background-color: #161e26 !important;
    border-color: #2a3744 !important;
    color: #dbdee1 !important;
}

/* Remove clashing background from voting boxes inside sub-comments */
html.qa-dark-mode .qa-c-list-item .qa-voting {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* Default Answer Count (Blue) */
html.qa-dark-mode .qa-a-count {
    background-color: #265a88 !important; 
    border-color: #1a4262 !important;
    color: #f2f3f5 !important;
}

/* Zero Answers (Red) */
html.qa-dark-mode .qa-a-count.qa-a-count-zero {
    background-color: #c0392b !important; 
    border-color: #c0392b !important;
    color: #f2f3f5 !important;
}

/* Selected / Best Answer (Green) */
html.qa-dark-mode .qa-a-count.qa-a-count-selected {
    background-color: #27ae60 !important; 
    border-color: #27ae60 !important;
    color: #f2f3f5 !important;
}

/* Ensure the text inside the answer blocks stays bright */
html.qa-dark-mode .qa-a-count *,
html.qa-dark-mode .qa-a-count-zero *,
html.qa-dark-mode .qa-a-count-selected * {
    color: #f2f3f5 !important;
}

/* Restore and brighten vote arrows */
html.qa-dark-mode .qa-vote-first-button,
html.qa-dark-mode .qa-vote-up-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'%3E%3Cpath fill='%238bbdf0' d='M12 2 2 16h20z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 14px !important;
    background-color: transparent !important;
    border: none !important;
    color: transparent !important;
}

html.qa-dark-mode .qa-vote-second-button,
html.qa-dark-mode .qa-vote-down-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'%3E%3Cpath fill='%23b5bac1' d='M12 16 22 2H2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 14px !important;
    background-color: transparent !important;
    border: none !important;
    color: transparent !important;
}

/* Active Vote States */
html.qa-dark-mode .qa-vote-up-selected,
html.qa-dark-mode .qa-vote-up-active,
html.qa-dark-mode .qa-vote-up-disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'%3E%3Cpath fill='%2315b833' d='M12 2 2 16h20z'/%3E%3C/svg%3E") !important;
}

html.qa-dark-mode .qa-vote-down-selected,
html.qa-dark-mode .qa-vote-down-active,
html.qa-dark-mode .qa-vote-down-disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'%3E%3Cpath fill='%23d65656' d='M12 16 22 2H2z'/%3E%3C/svg%3E") !important;
}

html.qa-dark-mode .qa-voting i {
    display: none !important;
}

/* ---------------------------------------------------
   CKEDITOR WYSIWYG & DIALOG (POPUPS) DARK MODE FIX
------------------------------------------------------ */
/* Invert the main embedded editor typing iframe */
html.qa-dark-mode .cke {
    filter: invert(1) hue-rotate(180deg) !important;
    border: none !important;
    border-radius: 4px;
}

/* Double-invert images inside the editor so they look normal (matches the live post) */
html.qa-dark-mode .cke img,
html.qa-dark-mode body.cke_editable img,
html.qa-dark-mode .cke_wysiwyg_frame img {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Paint all floating CKEditor Dialog Popups (like Image Upload) Dark */
html.qa-dark-mode .cke_dialog_background_cover {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

html.qa-dark-mode .cke_dialog_body,
html.qa-dark-mode .cke_dialog_title,
html.qa-dark-mode .cke_dialog_contents,
html.qa-dark-mode .cke_dialog_footer {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #dbdee1 !important;
    border-color: #2a3744 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

html.qa-dark-mode .cke_dialog_ui_labeled_label,
html.qa-dark-mode .cke_dialog_ui_html,
html.qa-dark-mode .cke_dialog_ui_checkbox,
html.qa-dark-mode .cke_dialog_ui_radio {
    color: #dbdee1 !important;
}

html.qa-dark-mode a.cke_dialog_tab {
    background-color: #161e26 !important;
    background: #161e26 !important;
    color: #b5bac1 !important;
    border: 1px solid #2a3744 !important;
}

html.qa-dark-mode a.cke_dialog_tab_selected {
    background-color: #233140 !important;
    background: #233140 !important;
    color: #f2f3f5 !important;
    border-bottom-color: #233140 !important;
}

/* FIX INPUTS INSIDE DIALOGS: Target the actual input elements so text is visible! */
html.qa-dark-mode .cke_dialog_ui_input_text input,
html.qa-dark-mode .cke_dialog_ui_input_password input,
html.qa-dark-mode .cke_dialog_ui_input_textarea textarea,
html.qa-dark-mode .cke_dialog_ui_select select {
    background-color: #0d1217 !important;
    color: #dbdee1 !important;
    border: 1px solid #364859 !important;
    padding: 4px !important;
}

/* ---------------------------------------------------
   FILE UPLOAD SLEDGEHAMMER (OPTICAL INVERSION)
------------------------------------------------------ */
/* File inputs are native browser elements or hidden iframes that often block CSS color changes.
   We force them to be pure white, then use an optical filter to invert them into a perfect dark mode! */
html.qa-dark-mode .cke_dialog_body input[type="file"],
html.qa-dark-mode .cke_dialog_ui_input_file iframe {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    color-scheme: light !important; /* Force light mode so the inversion works predictably */
    filter: invert(1) hue-rotate(180deg) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent the wrapper from interfering with the inversion */
html.qa-dark-mode .cke_dialog_ui_input_file {
    background: transparent !important;
    border: none !important;
    filter: none !important;
}
/* --------------------------------------------------- */

/* Preview Box (Lorem ipsum text area) - Rolled back to working v42 state! */
html.qa-dark-mode .ImagePreviewBox,
html.qa-dark-mode .cke_dialog_image_preview,
html.qa-dark-mode div[id^="cke_"] .ImagePreviewBox {
    background-color: #0d1217 !important;
    background: #0d1217 !important;
    color: #b5bac1 !important;
    border: 1px solid #364859 !important;
    filter: none !important; /* Stop the iframe inversion from destroying this box! */
}

/* Ensure text inside the preview box inherits the bright color */
html.qa-dark-mode .ImagePreviewBox *,
html.qa-dark-mode .cke_dialog_image_preview * {
    color: #b5bac1 !important;
    background-color: transparent !important;
}

html.qa-dark-mode fieldset {
    background-color: transparent !important;
    color: #b5bac1 !important;
    border: 1px solid #364859 !important;
}

/* Buttons in Dialog (OK / Cancel) */
html.qa-dark-mode .cke_dialog_ui_button {
    background-color: #2a3744 !important;
    background: #2a3744 !important;
    color: #dbdee1 !important;
    border: 1px solid #3f5266 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.qa-dark-mode .cke_dialog_ui_button:hover {
    background-color: #364859 !important;
    background: #364859 !important;
}

html.qa-dark-mode .cke_dialog_ui_button span {
    text-shadow: none !important;
    color: #dbdee1 !important;
}

/* Invert the little black lock/refresh icons in the image dialog */
html.qa-dark-mode .cke_btn_locked,
html.qa-dark-mode .cke_btn_unlocked,
html.qa-dark-mode .cke_btn_reset {
    filter: invert(1) !important;
}

/* Keep standard Q2A Images and Ads Normal (Do not invert them) */
html.qa-dark-mode img {
    filter: none !important;
}

html.qa-dark-mode ins.adsbygoogle,
html.qa-dark-mode .qa-ad,
html.qa-dark-mode .qa-ad iframe {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* ---------------------------------------------------
   CKEDITOR AUTOCOMPLETE / MENTIONS FIX
------------------------------------------------------ */
html.qa-dark-mode .cke_autocomplete_panel {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #364859 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

html.qa-dark-mode .cke_autocomplete_panel li {
    color: #dbdee1 !important;
    background-color: transparent !important;
}

html.qa-dark-mode .cke_autocomplete_panel li.cke_autocomplete_selected,
html.qa-dark-mode .cke_autocomplete_panel li:hover {
    background-color: #364859 !important;
    color: #f2f3f5 !important;
}

/* Hide visual RSS Feed buttons (Search engines will still find the hidden meta tags) */
.qa-feed, 
.qa-feed-link, 
a.qa-feed-link,
.icon-rss {
    display: none !important;
} 


/* ===================================================
   DARK MODE FIX: Medium Steel Blue Headers & Ask Box
=================================================== */

/* Tone down the bright blue background of the main question headers AND the Ask box */
html.qa-dark-mode .qa-main .qa-main-heading,
html.qa-dark-mode div.qa-main-heading,
html.qa-dark-mode .qa-main-heading,
html.qa-dark-mode .qa-ask-box {
    background-color: #2d79b1 !important; 
    background: #2d79b1 !important;
    border: 1px solid #246596 !important;
    border-radius: 4px !important;
}

/* Make sure the Favorite Star box perfectly blends into the new medium header */
html.qa-dark-mode .qa-main-heading .qa-favoriting,
html.qa-dark-mode .qa-main-heading form {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}
html.qa-dark-mode .qa-main-heading .qa-favorite-button,
html.qa-dark-mode .qa-main-heading .qa-unfavorite-button {
    background-color: #2d79b1 !important; 
    border: none !important; 
}

/* Protect the mobile turquoise Ask button wrapper from inheriting the blue background/borders */
html.qa-dark-mode .qam-ask-search-box,
html.qa-dark-mode .qam-ask-search-wrapper,
html.qa-dark-mode div.qam-ask-search-box {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}



/* ===================================================
   POLLS PLUGIN FIX & AUTOFILL OVERRIDE
=================================================== */
html.qa-dark-mode input.qa-poll-answer-text,
html.qa-dark-mode input[type="input"] {
    background-color: #0d1217 !important;
    color: #dbdee1 !important;
    border: 1px solid #364859 !important;
    box-sizing: border-box !important;
    /* Forces the native browser dropdown menu to be dark */
    color-scheme: dark !important; 
}

/* Sledgehammer to override Chrome/Edge forced white autofill backgrounds */
html.qa-dark-mode input:-webkit-autofill,
html.qa-dark-mode input:-webkit-autofill:hover, 
html.qa-dark-mode input:-webkit-autofill:focus, 
html.qa-dark-mode input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0d1217 inset !important;
    -webkit-text-fill-color: #dbdee1 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}


/* ===================================================
   FAVORITE STAR FIX - DARK MODE
   Make selected favorite state visibly gold in dark mode.
   Q2A uses:
   .qa-favorite-button   = not favorited
   .qa-unfavorite-button = already favorited
=================================================== */

/* Common star button reset */
html.qa-dark-mode .qa-main-heading .qa-favorite-button,
html.qa-dark-mode .qa-main-heading .qa-unfavorite-button,
html.qa-dark-mode .qa-main .qa-favorite-button,
html.qa-dark-mode .qa-main .qa-unfavorite-button {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 30px 30px !important;
    box-shadow: none !important;
}

/* Not favorited yet - muted blue/outline star */
html.qa-dark-mode .qa-main-heading .qa-favorite-button,
html.qa-dark-mode .qa-main .qa-favorite-button {
    background-color: #2d79b1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233a6f96' stroke='%238bbdf0' stroke-width='1.4' d='M12 2.2l2.95 6.08 6.7.95-4.86 4.7 1.15 6.64L12 17.43 6.06 20.57l1.15-6.64-4.86-4.7 6.7-.95L12 2.2z'/%3E%3C/svg%3E") !important;
}

/* Favorited / selected - bright gold star */
html.qa-dark-mode .qa-main-heading .qa-unfavorite-button,
html.qa-dark-mode .qa-main .qa-unfavorite-button {
    background-color: #2d79b1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f1c40f' stroke='%23f39c12' stroke-width='1.4' d='M12 2.2l2.95 6.08 6.7.95-4.86 4.7 1.15 6.64L12 17.43 6.06 20.57l1.15-6.64-4.86-4.7 6.7-.95L12 2.2z'/%3E%3C/svg%3E") !important;
}

/* Hover states */
html.qa-dark-mode .qa-main-heading .qa-favorite-button:hover,
html.qa-dark-mode .qa-main .qa-favorite-button:hover {
    background-color: #246596 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23467fa9' stroke='%23b9dcff' stroke-width='1.4' d='M12 2.2l2.95 6.08 6.7.95-4.86 4.7 1.15 6.64L12 17.43 6.06 20.57l1.15-6.64-4.86-4.7 6.7-.95L12 2.2z'/%3E%3C/svg%3E") !important;
}

html.qa-dark-mode .qa-main-heading .qa-unfavorite-button:hover,
html.qa-dark-mode .qa-main .qa-unfavorite-button:hover {
    background-color: #246596 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd84d' stroke='%23f39c12' stroke-width='1.4' d='M12 2.2l2.95 6.08 6.7.95-4.86 4.7 1.15 6.64L12 17.43 6.06 20.57l1.15-6.64-4.86-4.7 6.7-.95L12 2.2z'/%3E%3C/svg%3E") !important;
}
/* ===================================================
   FINAL CONSOLIDATED OVERRIDES - 2026-05-24
   Keep this as the only final cleanup block at the bottom.
   Purpose:
   - keep the darker live-site colors
   - keep Ask/search inputs black
   - keep SnowFlat's original search icon image
   - keep @ user / category autocomplete readable
   - keep answer/comment icons visible
=================================================== */

/* Dark live-site page/card colors */
html.qa-dark-mode,
html.qa-dark-mode body,
html.qa-dark-mode .qa-main,
html.qa-dark-mode .qa-part-q-view,
html.qa-dark-mode .qa-footer,
html.qa-dark-mode .qam-footer-box {
    background-color: #12181e !important;
    background: #12181e !important;
    color: #dbdee1 !important;
}

html.qa-dark-mode .qa-q-list-item,
html.qa-dark-mode .qa-q-view,
html.qa-dark-mode .qa-a-list-item,
html.qa-dark-mode .qa-widget-side,
html.qa-dark-mode .qa-widgets-side,
html.qa-dark-mode .qa-widget-side-box,
html.qa-dark-mode .qa-part-ranking,
html.qa-dark-mode .qa-part-form,
html.qa-dark-mode .qa-part-form-profile,
html.qa-dark-mode .qa-part-form-activity,
html.qa-dark-mode .qa-part-form-badges,
html.qa-dark-mode .qa-part-form-wall,
html.qa-dark-mode .qa-part-form-account,
html.qa-dark-mode .qa-part-form-password,
html.qa-dark-mode .qa-part-form-privacy,
html.qa-dark-mode .qa-part-message-list,
html.qa-dark-mode .qa-user-profile,
html.qa-dark-mode .qa-user-activity,
html.qa-dark-mode .qa-form-light,
html.qa-dark-mode .qa-form-tall,
html.qa-dark-mode .qa-form-wide,
html.qa-dark-mode .qa-sidepanel,
html.qa-dark-mode .qa-sidebar,
html.qa-dark-mode #qam-sidepanel-mobile {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #dbdee1 !important;
    border: 1px solid #2a3744 !important;
    box-shadow: none !important;
}

/* Ask/Edit/Message form containers */
html.qa-dark-mode .qa-main form.qa-form-tall,
html.qa-dark-mode .qa-main form.qa-form-wide,
html.qa-dark-mode .qa-main div[class*="qa-part-form"],
html.qa-dark-mode .qa-part-form,
html.qa-dark-mode .qa-part-a-form,
html.qa-dark-mode .qa-part-c-form {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #dbdee1 !important;
    border: 1px solid #2a3744 !important;
    box-shadow: none !important;
}

/* Inputs should match the darker live look */
html.qa-dark-mode input[type="text"],
html.qa-dark-mode input[type="password"],
html.qa-dark-mode input[type="email"],
html.qa-dark-mode textarea,
html.qa-dark-mode select,
html.qa-dark-mode .qa-search-field {
    background-color: #0d1217 !important;
    background: #0d1217 !important;
    color: #dbdee1 !important;
    border: 1px solid #364859 !important;
    box-shadow: none !important;
}

/* Ask-a-question title input specifically */
html.qa-dark-mode .qa-ask-box input[type="text"],
html.qa-dark-mode .qa-ask-box .qa-form-tall-text,
html.qa-dark-mode .qa-ask-box .qa-form-wide-text,
html.qa-dark-mode .qam-ask-search-box input[type="text"],
html.qa-dark-mode .qam-ask-search-wrapper input[type="text"],
html.qa-dark-mode .qam-ask-search-box .qa-search-field,
html.qa-dark-mode .qam-ask-search-wrapper .qa-search-field {
    background-color: #0d1217 !important;
    background: #0d1217 !important;
    color: #ffffff !important;
    border: 1px solid #364859 !important;
    box-shadow: none !important;
}

/* Side @ user / category search input */
html.qa-dark-mode #the-top-search input.qa-search-field,
html.qa-dark-mode #the-top-search .qa-search-field,
html.qa-dark-mode .qam-search.turquoise input.qa-search-field,
html.qa-dark-mode .qam-search.turquoise .qa-search-field {
    background-color: #0d1217 !important;
    background: #0d1217 !important;
    color: #ffffff !important;
    border: 1px solid #364859 !important;
    box-shadow: none !important;
}

html.qa-dark-mode #the-top-search input.qa-search-field::placeholder,
html.qa-dark-mode #the-top-search .qa-search-field::placeholder,
html.qa-dark-mode .qam-search.turquoise input.qa-search-field::placeholder,
html.qa-dark-mode .qam-search.turquoise .qa-search-field::placeholder,
html.qa-dark-mode .qa-ask-box input[type="text"]::placeholder,
html.qa-dark-mode .qam-ask-search-box input[type="text"]::placeholder,
html.qa-dark-mode .qam-ask-search-wrapper input[type="text"]::placeholder {
    color: #b5bac1 !important;
}

/* Restore SnowFlat's original magnifying-glass image and sizing.
   Use background-image, not a custom SVG, so it matches the live/original look. */
html.qa-dark-mode #the-top-search input.qa-search-button,
html.qa-dark-mode #the-top-search .qa-search-button,
html.qa-dark-mode .qam-search.turquoise input.qa-search-button,
html.qa-dark-mode .qam-search.turquoise .qa-search-button {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background-color: #2a3744 !important;
    background-image: url(images/search-icon-white.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: auto !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

html.qa-dark-mode #the-top-search input.qa-search-button:hover,
html.qa-dark-mode #the-top-search .qa-search-button:hover,
html.qa-dark-mode .qam-search.turquoise input.qa-search-button:hover,
html.qa-dark-mode .qam-search.turquoise .qa-search-button:hover {
    background-color: #364859 !important;
    background-image: url(images/search-icon-white.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: auto !important;
}

/* Help text below the side search box */
html.qa-dark-mode .kt-at-search-help {
    color: #d8e3ed !important;
    text-shadow: none !important;
}

/* KidzTalk @ user / category autocomplete dropdown */
html.qa-dark-mode .kt-at-user-menu {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #dbdee1 !important;
    border: 1px solid #364859 !important;
    border-top: 1px solid #364859 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important;
    text-shadow: none !important;
}

html.qa-dark-mode .kt-at-user-menu .kt-at-user-item,
html.qa-dark-mode .kt-at-user-menu .kt-at-user-message {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #d7e0ea !important;
    border-bottom: 1px solid #2a3744 !important;
    text-shadow: none !important;
}

html.qa-dark-mode .kt-at-user-menu .kt-at-user-name {
    color: #f2f3f5 !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

html.qa-dark-mode .kt-at-user-menu .kt-at-user-now {
    color: #cbd3dc !important;
    text-shadow: none !important;
}

/* The small count line: "224 questions", "39 questions", or user points */
html.qa-dark-mode .kt-at-user-menu .kt-at-user-points {
    color: #aebdcc !important;
    font-size: 13px !important;
    font-weight: normal !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html.qa-dark-mode .kt-at-user-menu .kt-at-user-message {
    color: #cbd3dc !important;
    font-size: 13px !important;
}

html.qa-dark-mode .kt-at-user-menu .kt-at-user-item:hover,
html.qa-dark-mode .kt-at-user-menu .kt-at-user-item.kt-at-user-active {
    background-color: #2d79b1 !important;
    background: #2d79b1 !important;
    color: #ffffff !important;
}

html.qa-dark-mode .kt-at-user-menu .kt-at-user-item:hover *,
html.qa-dark-mode .kt-at-user-menu .kt-at-user-item.kt-at-user-active * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Right-side category list counts */
html.qa-dark-mode .qa-nav-cat-note,
html.qa-dark-mode .qa-nav-cat-count,
html.qa-dark-mode .qa-nav-cat-list .qa-nav-cat-note,
html.qa-dark-mode .qa-nav-cat-list .qa-nav-cat-count,
html.qa-dark-mode .qa-sidepanel .qa-nav-cat-note,
html.qa-dark-mode .qa-sidepanel .qa-nav-cat-count,
html.qa-dark-mode .qa-sidebar .qa-nav-cat-note,
html.qa-dark-mode .qa-sidebar .qa-nav-cat-count,
html.qa-dark-mode .qa-widget-side .qa-nav-cat-note,
html.qa-dark-mode .qa-widget-side .qa-nav-cat-count {
    color: #cbd6e2 !important;
    font-weight: normal !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html.qa-dark-mode .qa-nav-cat-item:hover .qa-nav-cat-note,
html.qa-dark-mode .qa-nav-cat-item:hover .qa-nav-cat-count,
html.qa-dark-mode .qa-nav-cat-link:hover + .qa-nav-cat-note,
html.qa-dark-mode .qa-nav-cat-link:hover + .qa-nav-cat-count {
    color: #ffffff !important;
}

/* ===================================================
   SIDEBAR / LOGIN BOX INPUT FIELD FIX
   Fixes username/password fields in the SnowFlat login box.
   Add at the VERY BOTTOM of dark-mode.css.
=================================================== */

html.qa-dark-mode .qa-sidebar input[type="text"],
html.qa-dark-mode .qa-sidebar input[type="password"],
html.qa-dark-mode .qa-sidebar input[type="email"],
html.qa-dark-mode .qa-widget-side input[type="text"],
html.qa-dark-mode .qa-widget-side input[type="password"],
html.qa-dark-mode .qa-widget-side input[type="email"],
html.qa-dark-mode .qa-widgets-side input[type="text"],
html.qa-dark-mode .qa-widgets-side input[type="password"],
html.qa-dark-mode .qa-widgets-side input[type="email"],
html.qa-dark-mode .qa-nav-user-list input[type="text"],
html.qa-dark-mode .qa-nav-user-list input[type="password"],
html.qa-dark-mode .qa-nav-user-list input[type="email"],
html.qa-dark-mode .qa-nav-user input[type="text"],
html.qa-dark-mode .qa-nav-user input[type="password"],
html.qa-dark-mode .qa-nav-user input[type="email"],
html.qa-dark-mode input[name="emailhandle"],
html.qa-dark-mode input[name="password"] {
    background-color: #0d1217 !important;
    background: #0d1217 !important;
    color: #f2f3f5 !important;
    -webkit-text-fill-color: #f2f3f5 !important;
    border: 1px solid #566273 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color-scheme: dark !important;
}

/* Placeholder text inside the login fields */
html.qa-dark-mode .qa-sidebar input[type="text"]::placeholder,
html.qa-dark-mode .qa-sidebar input[type="password"]::placeholder,
html.qa-dark-mode .qa-widget-side input[type="text"]::placeholder,
html.qa-dark-mode .qa-widget-side input[type="password"]::placeholder,
html.qa-dark-mode .qa-widgets-side input[type="text"]::placeholder,
html.qa-dark-mode .qa-widgets-side input[type="password"]::placeholder,
html.qa-dark-mode .qa-nav-user-list input[type="text"]::placeholder,
html.qa-dark-mode .qa-nav-user-list input[type="password"]::placeholder,
html.qa-dark-mode input[name="emailhandle"]::placeholder,
html.qa-dark-mode input[name="password"]::placeholder {
    color: #b8c2cc !important;
    -webkit-text-fill-color: #b8c2cc !important;
    opacity: 1 !important;
}

/* Browser autofill fix: Chrome can force a pale yellow/white background */
html.qa-dark-mode .qa-sidebar input:-webkit-autofill,
html.qa-dark-mode .qa-widget-side input:-webkit-autofill,
html.qa-dark-mode .qa-widgets-side input:-webkit-autofill,
html.qa-dark-mode .qa-nav-user-list input:-webkit-autofill,
html.qa-dark-mode input[name="emailhandle"]:-webkit-autofill,
html.qa-dark-mode input[name="password"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0d1217 inset !important;
    box-shadow: 0 0 0 1000px #0d1217 inset !important;
    -webkit-text-fill-color: #f2f3f5 !important;
    caret-color: #f2f3f5 !important;
    border: 1px solid #566273 !important;
}

/* Checkbox and Remember label */
html.qa-dark-mode .qa-sidebar input[type="checkbox"],
html.qa-dark-mode .qa-widget-side input[type="checkbox"],
html.qa-dark-mode .qa-widgets-side input[type="checkbox"],
html.qa-dark-mode .qa-nav-user-list input[type="checkbox"] {
    accent-color: #5ba4e5 !important;
}

html.qa-dark-mode .qa-sidebar label,
html.qa-dark-mode .qa-widget-side label,
html.qa-dark-mode .qa-widgets-side label,
html.qa-dark-mode .qa-nav-user-list label {
    color: #dbdee1 !important;
    text-shadow: none !important;
}
/* =================================================== */


/* ===================================================
   KIDZTALK DARK MODE SOFT DIVIDERS + INPUT FIX
   Add at the VERY BOTTOM of dark-mode.css.
   Goal:
   - Fewer harsh white/gray divider lines
   - More SnowFlat-like blending between sections
   - Text boxes/editors not ultra black
=================================================== */

/* Use darker, quieter dividers instead of bright blue-gray lines */
html.qa-dark-mode .qa-q-view,
html.qa-dark-mode .qa-q-list-item,
html.qa-dark-mode .qa-a-list-item,
html.qa-dark-mode .qa-c-list-item,
html.qa-dark-mode .qa-widget-side,
html.qa-dark-mode .qa-widgets-side,
html.qa-dark-mode .qa-widget-side-box,
html.qa-dark-mode .qa-part-form,
html.qa-dark-mode .qa-form-light,
html.qa-dark-mode .qa-form-tall,
html.qa-dark-mode .qa-form-wide,
html.qa-dark-mode .qa-sidebar,
html.qa-dark-mode .qa-sidepanel,
html.qa-dark-mode .qa-user-profile,
html.qa-dark-mode .qa-user-activity,
html.qa-dark-mode .qa-part-message-list {
    border-color: #12181e !important;
}

/* Make internal horizontal rules blend into the outside background */
html.qa-dark-mode hr,
html.qa-dark-mode .qa-main hr,
html.qa-dark-mode .qa-a-item-main,
html.qa-dark-mode .qa-q-view-main,
html.qa-dark-mode .qa-item-main,
html.qa-dark-mode .qa-a-list,
html.qa-dark-mode .qa-c-list,
html.qa-dark-mode .qa-q-view-buttons,
html.qa-dark-mode .qa-a-item-buttons,
html.qa-dark-mode .qa-c-item-buttons,
html.qa-dark-mode .qa-part-a-form,
html.qa-dark-mode .qa-a-form,
html.qa-dark-mode .qa-part-c-form,
html.qa-dark-mode .qa-c-form {
    border-color: #12181e !important;
}

/* Soften common table/list divider lines */
html.qa-dark-mode .qa-main table,
html.qa-dark-mode .qa-main tbody,
html.qa-dark-mode .qa-main tr,
html.qa-dark-mode .qa-main th,
html.qa-dark-mode .qa-main td,
html.qa-dark-mode .qa-form-wide-table,
html.qa-dark-mode .qa-form-tall-table,
html.qa-dark-mode .qa-form-light-table,
html.qa-dark-mode .qa-main li.qa-browse-cat-item,
html.qa-dark-mode .qa-main li.qa-user-list-item {
    border-color: #12181e !important;
}

/* Keep real buttons visible, but remove the �random white border� feeling */
html.qa-dark-mode .qa-form-light-button,
html.qa-dark-mode .qa-form-tall-button,
html.qa-dark-mode .qa-form-wide-button,
html.qa-dark-mode .qa-search-button {
    border-color: #1a232c !important;
    background-color: #263442 !important;
    background: #263442 !important;
    color: #f2f3f5 !important;
}

/* Normal input fields should be dark gray, not black */
html.qa-dark-mode input[type="text"],
html.qa-dark-mode input[type="password"],
html.qa-dark-mode input[type="email"],
html.qa-dark-mode textarea,
html.qa-dark-mode select,
html.qa-dark-mode .qa-search-field {
    background-color: #263442 !important;
    background: #263442 !important;
    color: #f2f3f5 !important;
    -webkit-text-fill-color: #f2f3f5 !important;
    border: 1px solid #12181e !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    text-shadow: none !important;
}

/* Focus state: clearer, but still not harsh */
html.qa-dark-mode input[type="text"]:focus,
html.qa-dark-mode input[type="password"]:focus,
html.qa-dark-mode input[type="email"]:focus,
html.qa-dark-mode textarea:focus,
html.qa-dark-mode select:focus,
html.qa-dark-mode .qa-search-field:focus {
    background-color: #2d3b4a !important;
    background: #2d3b4a !important;
    border-color: #5ba4e5 !important;
    box-shadow: 0 0 0 1px rgba(91,164,229,0.35) !important;
    outline: none !important;
}

/* Placeholder text should be readable but muted */
html.qa-dark-mode input::placeholder,
html.qa-dark-mode textarea::placeholder {
    color: #aeb8c2 !important;
    -webkit-text-fill-color: #aeb8c2 !important;
    opacity: 1 !important;
}

/* CKEditor outer box: make it look like a normal SnowFlat input area */
html.qa-dark-mode .cke {
    border: 1px solid #12181e !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    border-radius: 3px !important;
}

/* CKEditor toolbar/contents shell: less harsh */
html.qa-dark-mode .cke_top,
html.qa-dark-mode .cke_bottom,
html.qa-dark-mode .cke_contents {
    border-color: #12181e !important;
}

/* Avoid bright separators in CKEditor toolbar */
html.qa-dark-mode .cke_toolgroup,
html.qa-dark-mode .cke_combo_button {
    border-color: #12181e !important;
}

/* If any plugin creates explicit border lines inside the main column,
   make them blend with the dark page background instead of standing out. */
html.qa-dark-mode .qa-main [style*="border-top"],
html.qa-dark-mode .qa-main [style*="border-bottom"] {
    border-color: #12181e !important;
}

/* Do not touch spoiler/secret text here. */

/* ===================================================
   CKEDITOR MATCHED DARK MODE SHELL FIX
   Add at the VERY BOTTOM of dark-mode.css.

   Important:
   .cke is visually inverted with filter: invert(1) hue-rotate(180deg).
   Therefore these colors are PRE-INVERSION colors.
   #d4d9df displays as the soft dark editor background.
   #ede7e1 displays close to #12181e for borders.
=================================================== */

html.qa-dark-mode .cke {
    border: 1px solid #ede7e1 !important; /* displays dark after invert */
    border-radius: 3px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background-color: #d4d9df !important;
    background: #d4d9df !important;
}

/* Make toolbar, content shell, and bottom resize bar match */
html.qa-dark-mode .cke_inner,
html.qa-dark-mode .cke_top,
html.qa-dark-mode .cke_bottom,
html.qa-dark-mode .cke_contents {
    background-color: #d4d9df !important;
    background: #d4d9df !important;
    border-color: #ede7e1 !important; /* displays dark after invert */
    box-shadow: none !important;
}

/* Make the separator lines dark/subtle after inversion */
html.qa-dark-mode .cke_top {
    border-bottom: 1px solid #ede7e1 !important;
}

html.qa-dark-mode .cke_bottom {
    border-top: 1px solid #ede7e1 !important;
}

html.qa-dark-mode .cke_contents {
    border-top: 1px solid #ede7e1 !important;
    border-bottom: 1px solid #ede7e1 !important;
}

/* Toolbar groups should not create bright/white boxes or harsh lines */
html.qa-dark-mode .cke_toolgroup,
html.qa-dark-mode .cke_combo_button,
html.qa-dark-mode .cke_button,
html.qa-dark-mode .cke_combo,
html.qa-dark-mode .cke_toolbar_separator {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #ede7e1 !important; /* displays dark after invert */
    box-shadow: none !important;
}

/* Keep combo dropdowns readable after inversion */
html.qa-dark-mode .cke_combo_text,
html.qa-dark-mode .cke_combo_open {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #ede7e1 !important;
    box-shadow: none !important;
}

/* Remove extra bright focus outlines inside CKEditor */
html.qa-dark-mode .cke * {
    outline-color: #ede7e1 !important;
}

/* =================================================== */


/* ===================================================
   ASK / EDIT FORM SUBJECT + TAGS INPUT MATCH FIX
   Add at the VERY BOTTOM of dark-mode.css.

   This makes the one-sentence/title input and tags input
   match the CKEditor visible dark background.
=================================================== */

html.qa-dark-mode .qa-main form.qa-form-tall input[type="text"],
html.qa-dark-mode .qa-main form.qa-form-wide input[type="text"],
html.qa-dark-mode .qa-main .qa-form-tall-text,
html.qa-dark-mode .qa-main .qa-form-wide-text,
html.qa-dark-mode .qa-main input[name="title"],
html.qa-dark-mode .qa-main input[name="q_title"],
html.qa-dark-mode .qa-main input[name="tags"],
html.qa-dark-mode .qa-main input[name="q_tags"] {
    background-color: #12181e !important;
    background: #12181e !important;
    color: #f2f3f5 !important;
    -webkit-text-fill-color: #f2f3f5 !important;
    border: 1px solid #12181e !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    text-shadow: none !important;
    color-scheme: dark !important;
}

/* Focus state: still blends, but gives a clear active field indicator */
html.qa-dark-mode .qa-main form.qa-form-tall input[type="text"]:focus,
html.qa-dark-mode .qa-main form.qa-form-wide input[type="text"]:focus,
html.qa-dark-mode .qa-main .qa-form-tall-text:focus,
html.qa-dark-mode .qa-main .qa-form-wide-text:focus,
html.qa-dark-mode .qa-main input[name="title"]:focus,
html.qa-dark-mode .qa-main input[name="q_title"]:focus,
html.qa-dark-mode .qa-main input[name="tags"]:focus,
html.qa-dark-mode .qa-main input[name="q_tags"]:focus {
    background-color: #12181e !important;
    background: #12181e !important;
    border-color: #5ba4e5 !important;
    box-shadow: 0 0 0 1px rgba(91,164,229,0.35) !important;
    outline: none !important;
}

/* Placeholder text */
html.qa-dark-mode .qa-main form.qa-form-tall input[type="text"]::placeholder,
html.qa-dark-mode .qa-main form.qa-form-wide input[type="text"]::placeholder,
html.qa-dark-mode .qa-main .qa-form-tall-text::placeholder,
html.qa-dark-mode .qa-main .qa-form-wide-text::placeholder,
html.qa-dark-mode .qa-main input[name="title"]::placeholder,
html.qa-dark-mode .qa-main input[name="q_title"]::placeholder,
html.qa-dark-mode .qa-main input[name="tags"]::placeholder,
html.qa-dark-mode .qa-main input[name="q_tags"]::placeholder {
    color: #aeb8c2 !important;
    -webkit-text-fill-color: #aeb8c2 !important;
    opacity: 1 !important;
}

/* Chrome autofill protection */
html.qa-dark-mode .qa-main form.qa-form-tall input[type="text"]:-webkit-autofill,
html.qa-dark-mode .qa-main form.qa-form-wide input[type="text"]:-webkit-autofill,
html.qa-dark-mode .qa-main .qa-form-tall-text:-webkit-autofill,
html.qa-dark-mode .qa-main .qa-form-wide-text:-webkit-autofill,
html.qa-dark-mode .qa-main input[name="title"]:-webkit-autofill,
html.qa-dark-mode .qa-main input[name="q_title"]:-webkit-autofill,
html.qa-dark-mode .qa-main input[name="tags"]:-webkit-autofill,
html.qa-dark-mode .qa-main input[name="q_tags"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #12181e inset !important;
    box-shadow: 0 0 0 1000px #12181e inset !important;
    -webkit-text-fill-color: #f2f3f5 !important;
    caret-color: #f2f3f5 !important;
    border: 1px solid #12181e !important;
}

/* =================================================== */

/* ===================================================
   SNOWFLAT EXACT BUTTON / ICON MATCH - DARK MODE
   Keep SnowFlat's light-mode sizing, font, padding, line-height,
   width, height, margins, icon placement, and button layout.

   This block intentionally DOES NOT set:
   height, width, min-width, min-height, padding, margin,
   line-height, font-size, font-weight, text-indent,
   background-position, or background-size.

   It only restores dark-mode colors and the same white icon files
   SnowFlat uses in light mode.
=================================================== */

/* Same SnowFlat button layout; dark-mode colors only */
html.qa-dark-mode .qa-form-light-button,
html.qa-dark-mode .qa-form-light-button-answer,
html.qa-dark-mode .qa-form-light-button-comment,
html.qa-dark-mode .qa-form-light-button-follow,
html.qa-dark-mode .qa-form-light-button-hide,
html.qa-dark-mode .qa-form-light-button-reshow,
html.qa-dark-mode .qa-form-light-button-flag,
html.qa-dark-mode .qa-form-light-button-unflag,
html.qa-dark-mode .qa-form-light-button-edit,
html.qa-dark-mode .qa-form-light-button-retagcat,
html.qa-dark-mode .qa-form-light-button-retag,
html.qa-dark-mode .qa-form-light-button-close,
html.qa-dark-mode .qa-form-light-button-reopen,
html.qa-dark-mode .qa-form-light-button-delete,
html.qa-dark-mode .qa-form-light-button-approve,
html.qa-dark-mode .qa-form-light-button-reject,
html.qa-dark-mode .qa-form-light-button-claim,
html.qa-dark-mode .qa-form-light-button-block,
html.qa-dark-mode .qa-form-light-button-unblock {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hover color only; no layout changes */
html.qa-dark-mode .qa-form-light-button:hover,
html.qa-dark-mode .qa-form-light-button-answer:hover,
html.qa-dark-mode .qa-form-light-button-comment:hover,
html.qa-dark-mode .qa-form-light-button-follow:hover,
html.qa-dark-mode .qa-form-light-button-hide:hover,
html.qa-dark-mode .qa-form-light-button-reshow:hover,
html.qa-dark-mode .qa-form-light-button-flag:hover,
html.qa-dark-mode .qa-form-light-button-unflag:hover,
html.qa-dark-mode .qa-form-light-button-edit:hover,
html.qa-dark-mode .qa-form-light-button-retagcat:hover,
html.qa-dark-mode .qa-form-light-button-retag:hover,
html.qa-dark-mode .qa-form-light-button-close:hover,
html.qa-dark-mode .qa-form-light-button-reopen:hover,
html.qa-dark-mode .qa-form-light-button-delete:hover,
html.qa-dark-mode .qa-form-light-button-approve:hover,
html.qa-dark-mode .qa-form-light-button-reject:hover,
html.qa-dark-mode .qa-form-light-button-claim:hover,
html.qa-dark-mode .qa-form-light-button-block:hover,
html.qa-dark-mode .qa-form-light-button-unblock:hover {
    background-color: #34495e !important;
    color: #ffffff !important;
}

/* Exact same SnowFlat icon files used in light mode */
html.qa-dark-mode .qa-form-light-button-answer {
    background-image: url(images/icons/answer-white.png) !important;
}

html.qa-dark-mode .qa-form-light-button-comment {
    background-image: url(images/icons/comment-white.png) !important;
}

html.qa-dark-mode .qa-form-light-button-follow {
    background-image: url(images/icons/link-white.png) !important;
}

html.qa-dark-mode .qa-form-light-button-hide,
html.qa-dark-mode .qa-form-light-button-reshow {
    background-image: url(images/icons/hide-white.png) !important;
}

html.qa-dark-mode .qa-form-light-button-flag,
html.qa-dark-mode .qa-form-light-button-unflag {
    background-image: url(images/icons/flag-white.png) !important;
}

html.qa-dark-mode .qa-form-light-button-edit,
html.qa-dark-mode .qa-form-light-button-retagcat,
html.qa-dark-mode .qa-form-light-button-retag {
    background-image: url(images/icons/edit-white.png) !important;
}

/* Icon-only buttons stay icon-only, but keep SnowFlat's native size/placement */
html.qa-dark-mode .qa-form-light-button-follow,
html.qa-dark-mode .qa-form-light-button-hide,
html.qa-dark-mode .qa-form-light-button-reshow,
html.qa-dark-mode .qa-form-light-button-flag,
html.qa-dark-mode .qa-form-light-button-unflag,
html.qa-dark-mode .qa-form-light-button-edit,
html.qa-dark-mode .qa-form-light-button-retagcat,
html.qa-dark-mode .qa-form-light-button-retag,
html.qa-dark-mode .qa-form-light-button-close,
html.qa-dark-mode .qa-form-light-button-reopen,
html.qa-dark-mode .qa-form-light-button-delete,
html.qa-dark-mode .qa-form-light-button-approve,
html.qa-dark-mode .qa-form-light-button-reject,
html.qa-dark-mode .qa-form-light-button-claim,
html.qa-dark-mode .qa-form-light-button-block,
html.qa-dark-mode .qa-form-light-button-unblock {
    color: transparent !important;
}
/* =================================================== */



/* ===================================================
   ADMIN APPROVE / REJECT BUTTON FIX - SIZE MATCH
   Uses SnowFlat's normal light-mode sizing.
   Only changes dark-mode colors/icons.
=================================================== */

/* Approve button */
html.qa-dark-mode .qa-q-item-buttons input.qa-form-light-button-approve,
html.qa-dark-mode .qa-q-item-buttons input[name$="_approve"] {
    background-color: #28a745 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Reject / decline button */
html.qa-dark-mode .qa-q-item-buttons input.qa-form-light-button-reject,
html.qa-dark-mode .qa-q-item-buttons input[name$="_reject"],
html.qa-dark-mode .qa-q-item-buttons input[name$="_decline"] {
    background-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='8' y1='8' x2='16' y2='16'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Hover colors only */
html.qa-dark-mode .qa-q-item-buttons input.qa-form-light-button-approve:hover,
html.qa-dark-mode .qa-q-item-buttons input[name$="_approve"]:hover {
    background-color: #218838 !important;
}

html.qa-dark-mode .qa-q-item-buttons input.qa-form-light-button-reject:hover,
html.qa-dark-mode .qa-q-item-buttons input[name$="_reject"]:hover,
html.qa-dark-mode .qa-q-item-buttons input[name$="_decline"]:hover {
    background-color: #c82333 !important;
}
/* =================================================== */


/* ===================================================
   CKEDITOR EXACT BACKGROUND MATCH FIX
   Add at the VERY BOTTOM of dark-mode.css.

   Because CKEditor is visually inverted with:
   filter: invert(1) hue-rotate(180deg)

   #e3e9ef displays visually as #12181e.
   Do NOT use #ede7e1 here because it creates a brown/orange tint.
=================================================== */

html.qa-dark-mode .cke {
    background-color: #e3e9ef !important;
    background: #e3e9ef !important;
    border: 1px solid #e3e9ef !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Toolbar, editor frame area, bottom bar */
html.qa-dark-mode .cke_inner,
html.qa-dark-mode .cke_top,
html.qa-dark-mode .cke_bottom,
html.qa-dark-mode .cke_contents {
    background-color: #e3e9ef !important;
    background: #e3e9ef !important;
    border-color: #e3e9ef !important;
    box-shadow: none !important;
}

/* Remove the visible tinted separator lines */
html.qa-dark-mode .cke_top,
html.qa-dark-mode .cke_bottom,
html.qa-dark-mode .cke_contents {
    border-top-color: #e3e9ef !important;
    border-bottom-color: #e3e9ef !important;
}

/* Toolbar button groups should blend into the same background */
html.qa-dark-mode .cke_toolgroup,
html.qa-dark-mode .cke_combo_button,
html.qa-dark-mode .cke_button,
html.qa-dark-mode .cke_combo,
html.qa-dark-mode .cke_toolbar_separator,
html.qa-dark-mode .cke_combo_text,
html.qa-dark-mode .cke_combo_open {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #e3e9ef !important;
    box-shadow: none !important;
}

/* Remove odd outlines that can appear orange/brown after inversion */
html.qa-dark-mode .cke *,
html.qa-dark-mode .cke *:before,
html.qa-dark-mode .cke *:after {
    outline-color: #e3e9ef !important;
}

/* =================================================== */


/* ===================================================
   FINAL CKEDITOR EXACT BACKGROUND MATCH FIX
   Add at the VERY BOTTOM of dark-mode.css.

   CKEditor is visually inverted with:
   filter: invert(1) hue-rotate(180deg)

   #e3e9ef displays visually as #12181e.
   Do NOT use #ede7e1 because it displays with a brown/orange tint.
=================================================== */

html.qa-dark-mode .cke {
    background-color: #e3e9ef !important;
    background: #e3e9ef !important;
    border: 1px solid #e3e9ef !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

html.qa-dark-mode .cke_inner,
html.qa-dark-mode .cke_top,
html.qa-dark-mode .cke_bottom,
html.qa-dark-mode .cke_contents {
    background-color: #e3e9ef !important;
    background: #e3e9ef !important;
    border-color: #e3e9ef !important;
    box-shadow: none !important;
}

html.qa-dark-mode .cke_top,
html.qa-dark-mode .cke_bottom,
html.qa-dark-mode .cke_contents {
    border-top-color: #e3e9ef !important;
    border-bottom-color: #e3e9ef !important;
}

html.qa-dark-mode .cke_toolgroup,
html.qa-dark-mode .cke_combo_button,
html.qa-dark-mode .cke_button,
html.qa-dark-mode .cke_combo,
html.qa-dark-mode .cke_toolbar_separator,
html.qa-dark-mode .cke_combo_text,
html.qa-dark-mode .cke_combo_open {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #e3e9ef !important;
    box-shadow: none !important;
}

html.qa-dark-mode .cke *,
html.qa-dark-mode .cke *:before,
html.qa-dark-mode .cke *:after {
    outline-color: #e3e9ef !important;
}
/* =================================================== */

/* ===================================================
   FINAL CKEDITOR TRUE-COLOR UI FIX - DARK MODE
   Keeps user-selected CKEditor font/background colors literal,
   while making the editor toolbar and input area readable.
   This block intentionally comes last to override older inversion rules.
=================================================== */

/* Stop old CKEditor inversion rules */
html.qa-dark-mode .cke,
html.qa-dark-mode .cke *,
html.qa-dark-mode .cke iframe,
html.qa-dark-mode .cke_wysiwyg_frame,
html.qa-dark-mode body.cke_editable,
html.qa-dark-mode .cke_panel_frame,
html.qa-dark-mode .cke_panel_frame * {
    filter: none !important;
}

/* Main CKEditor shell */
html.qa-dark-mode .cke {
    background-color: #12181e !important;
    background: #12181e !important;
    border: 1px solid #6b7280 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Toolbar and bottom bar */
html.qa-dark-mode .cke_inner,
html.qa-dark-mode .cke_top,
html.qa-dark-mode .cke_bottom {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border-color: #364859 !important;
    box-shadow: none !important;
}

/* Actual editor/click area */
html.qa-dark-mode .cke_contents {
    background-color: #12181e !important;
    background: #12181e !important;
    border: 1px solid #6b7280 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* Font / Size / Format dropdown buttons */
html.qa-dark-mode .cke_combo_button {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #364859 !important;
    box-shadow: none !important;
}

html.qa-dark-mode .cke_combo_button:hover,
html.qa-dark-mode .cke_combo_on .cke_combo_button,
html.qa-dark-mode .cke_combo_off a.cke_combo_button:hover {
    background-color: #263442 !important;
    background: #263442 !important;
    border-color: #5ba4e5 !important;
}

/* Font / Size / Normal text inside dropdown buttons */
html.qa-dark-mode .cke_combo_text,
html.qa-dark-mode .cke_combo_inlinelabel {
    color: #dbe1e8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Dropdown arrows */
html.qa-dark-mode .cke_combo_arrow {
    border-top-color: #c8d0d8 !important;
    opacity: 1 !important;
}

/* Toolbar groups and separators */
html.qa-dark-mode .cke_toolgroup {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #364859 !important;
    box-shadow: none !important;
}

html.qa-dark-mode .cke_toolbar_separator {
    background-color: #364859 !important;
}

/* Toolbar buttons */
html.qa-dark-mode .cke_button {
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.qa-dark-mode .cke_button:hover,
html.qa-dark-mode .cke_button_on,
html.qa-dark-mode .cke_button_off:hover {
    background-color: #263442 !important;
    background: #263442 !important;
    border-color: #364859 !important;
    box-shadow: none !important;
}

/* Brighten toolbar UI icons only */
html.qa-dark-mode .cke_button_icon,
html.qa-dark-mode .cke_combo_arrow {
    filter: invert(1) grayscale(1) brightness(1.45) !important;
    opacity: 0.9 !important;
}

html.qa-dark-mode .cke_button:hover .cke_button_icon,
html.qa-dark-mode .cke_button_on .cke_button_icon {
    opacity: 1 !important;
}

/* Keep actual editor images and palette colors literal */
html.qa-dark-mode .cke_wysiwyg_frame img,
html.qa-dark-mode iframe.cke_panel_frame,
html.qa-dark-mode .cke_panel,
html.qa-dark-mode .cke_panel_container,
html.qa-dark-mode .cke_panel_block {
    filter: none !important;
}

/* Make toolbar labels readable */
html.qa-dark-mode .cke_voice_label,
html.qa-dark-mode .cke_label {
    color: #dbe1e8 !important;
}

/* Default editor iframe background; JS also writes iframe body styling */
html.qa-dark-mode iframe.cke_wysiwyg_frame {
    background-color: #12181e !important;
    background: #12181e !important;
}

/* Bottom resize bar */
html.qa-dark-mode .cke_resizer {
    border-color: transparent #8b98a5 transparent transparent !important;
}
/* =================================================== */


/* ===================================================
   BLOCKQUOTE TEXT CONTRAST FIX - DARK MODE
   Fixes dark/muted quote text such as:
   blockquote p { color:#7f8c8d; }
=================================================== */

html.qa-dark-mode .qa-post-content blockquote,
html.qa-dark-mode .qa-q-view-content blockquote,
html.qa-dark-mode .qa-a-item-content blockquote,
html.qa-dark-mode .qa-c-item-content blockquote,
html.qa-dark-mode .qa-preview blockquote {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #dbe1e8 !important;

    border-left: 4px solid #5ba4e5 !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;

    padding: 12px 14px !important;
    margin: 12px 0 !important;
    border-radius: 0 4px 4px 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Override SnowFlat's dark quote paragraph color */
html.qa-dark-mode .qa-post-content blockquote p,
html.qa-dark-mode .qa-q-view-content blockquote p,
html.qa-dark-mode .qa-a-item-content blockquote p,
html.qa-dark-mode .qa-c-item-content blockquote p,
html.qa-dark-mode .qa-preview blockquote p {
    color: #dbe1e8 !important;
    background: transparent !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

/* Fix copied/pasted quote text with hardcoded black or gray inline colors */
html.qa-dark-mode .qa-post-content blockquote span,
html.qa-dark-mode .qa-post-content blockquote strong,
html.qa-dark-mode .qa-post-content blockquote b,
html.qa-dark-mode .qa-post-content blockquote em,
html.qa-dark-mode .qa-post-content blockquote i,
html.qa-dark-mode .qa-q-view-content blockquote span,
html.qa-dark-mode .qa-q-view-content blockquote strong,
html.qa-dark-mode .qa-q-view-content blockquote b,
html.qa-dark-mode .qa-q-view-content blockquote em,
html.qa-dark-mode .qa-q-view-content blockquote i,
html.qa-dark-mode .qa-a-item-content blockquote span,
html.qa-dark-mode .qa-a-item-content blockquote strong,
html.qa-dark-mode .qa-a-item-content blockquote b,
html.qa-dark-mode .qa-a-item-content blockquote em,
html.qa-dark-mode .qa-a-item-content blockquote i {
    color: #dbe1e8 !important;
    background: transparent !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

/* Bold text in quotes should be slightly brighter */
html.qa-dark-mode .qa-post-content blockquote strong,
html.qa-dark-mode .qa-post-content blockquote b,
html.qa-dark-mode .qa-q-view-content blockquote strong,
html.qa-dark-mode .qa-q-view-content blockquote b,
html.qa-dark-mode .qa-a-item-content blockquote strong,
html.qa-dark-mode .qa-a-item-content blockquote b {
    color: #f2f3f5 !important;
}

/* Italic text in quotes should remain readable */
html.qa-dark-mode .qa-post-content blockquote em,
html.qa-dark-mode .qa-post-content blockquote i,
html.qa-dark-mode .qa-q-view-content blockquote em,
html.qa-dark-mode .qa-q-view-content blockquote i,
html.qa-dark-mode .qa-a-item-content blockquote em,
html.qa-dark-mode .qa-a-item-content blockquote i {
    color: #dbe1e8 !important;
}
/* =================================================== */


/* ===================================================
   PRIVATE MESSAGE REPLY / DELETE ICON FIX - DARK MODE
   Fixes invisible PM action buttons:
   .qa-form-light-button-reply
   .qa-form-light-button-delete
=================================================== */

/* Reply button */
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-reply,
html.qa-dark-mode .qa-message-buttons input.qa-form-light-button-reply,
html.qa-dark-mode .qa-message-buttons input[name$="_reply"] {
    background-color: #2a3744 !important;
    background-image: url(images/icons/reply-white.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: auto !important;

    color: transparent !important;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Delete button */
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-delete,
html.qa-dark-mode .qa-message-buttons input.qa-form-light-button-delete,
html.qa-dark-mode .qa-message-buttons input[name$="_delete"] {
    background-color: #2a3744 !important;
    background-image: url(images/icons/delete-white.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: auto !important;

    color: transparent !important;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Hover states */
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-reply:hover,
html.qa-dark-mode .qa-message-buttons input.qa-form-light-button-reply:hover,
html.qa-dark-mode .qa-message-buttons input[name$="_reply"]:hover {
    background-color: #364859 !important;
}

html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-delete:hover,
html.qa-dark-mode .qa-message-buttons input.qa-form-light-button-delete:hover,
html.qa-dark-mode .qa-message-buttons input[name$="_delete"]:hover {
    background-color: #8a2b21 !important;
}
/* =================================================== */


/* ===================================================
   LEGACY KIDZBOT AI DISCLAIMER - DARK MODE FIX
   Fixes old saved KidzBot disclaimer boxes like:
   background:#f2f2f2; border:1px solid #d9d9d9; color:#444;
=================================================== */

/* Existing saved KidzBot disclaimer HTML */
html.qa-dark-mode .qa-post-content div[style*="margin-top:10px" i][style*="padding:10px 12px" i][style*="background:#f2f2f2" i][style*="border:1px solid #d9d9d9" i][style*="font-size:10px" i][style*="max-width:600px" i],
html.qa-dark-mode .qa-post-content div[style*="margin-top: 10px" i][style*="padding: 10px 12px" i][style*="background: #f2f2f2" i][style*="border: 1px solid #d9d9d9" i][style*="font-size: 10px" i][style*="max-width: 600px" i],
html.qa-dark-mode .qa-post-content div[style*="margin-top:10px" i][style*="padding:10px 12px" i][style*="background-color:#f2f2f2" i][style*="border:1px solid #d9d9d9" i][style*="font-size:10px" i][style*="max-width:600px" i],
html.qa-dark-mode .qa-post-content div[style*="margin-top: 10px" i][style*="padding: 10px 12px" i][style*="background-color: #f2f2f2" i][style*="border: 1px solid #d9d9d9" i][style*="font-size: 10px" i][style*="max-width: 600px" i] {
    background-color: #243447 !important;
    background: #243447 !important;
    color: #eaf2f8 !important;
    border: 1px solid #5f7890 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
    text-shadow: none !important;
}

/* KidzBot title */
html.qa-dark-mode .qa-post-content div[style*="margin-top:10px" i][style*="padding:10px 12px" i][style*="background:#f2f2f2" i][style*="font-size:10px" i][style*="max-width:600px" i] strong,
html.qa-dark-mode .qa-post-content div[style*="margin-top: 10px" i][style*="padding: 10px 12px" i][style*="background: #f2f2f2" i][style*="font-size: 10px" i][style*="max-width: 600px" i] strong,
html.qa-dark-mode .qa-post-content div[style*="margin-top:10px" i][style*="padding:10px 12px" i][style*="background-color:#f2f2f2" i][style*="font-size:10px" i][style*="max-width:600px" i] strong,
html.qa-dark-mode .qa-post-content div[style*="margin-top: 10px" i][style*="padding: 10px 12px" i][style*="background-color: #f2f2f2" i][style*="font-size: 10px" i][style*="max-width: 600px" i] strong {
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* @kidzbot mention */
html.qa-dark-mode .qa-post-content div[style*="margin-top:10px" i][style*="padding:10px 12px" i][style*="background:#f2f2f2" i][style*="font-size:10px" i][style*="max-width:600px" i] i,
html.qa-dark-mode .qa-post-content div[style*="margin-top: 10px" i][style*="padding: 10px 12px" i][style*="background: #f2f2f2" i][style*="font-size: 10px" i][style*="max-width: 600px" i] i,
html.qa-dark-mode .qa-post-content div[style*="margin-top:10px" i][style*="padding:10px 12px" i][style*="background-color:#f2f2f2" i][style*="font-size:10px" i][style*="max-width:600px" i] i,
html.qa-dark-mode .qa-post-content div[style*="margin-top: 10px" i][style*="padding: 10px 12px" i][style*="background-color: #f2f2f2" i][style*="font-size: 10px" i][style*="max-width: 600px" i] i {
    color: #b9dcff !important;
    font-style: italic !important;
    text-shadow: none !important;
}

/* Future version if you add a class later */
html.qa-dark-mode .qa-post-content .ks-kidzbot-ai-disclaimer {
    background-color: #243447 !important;
    background: #243447 !important;
    color: #eaf2f8 !important;
    border: 1px solid #5f7890 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
    text-shadow: none !important;
}

html.qa-dark-mode .qa-post-content .ks-kidzbot-ai-disclaimer strong {
    color: #ffffff !important;
}

html.qa-dark-mode .qa-post-content .ks-kidzbot-ai-disclaimer i {
    color: #b9dcff !important;
}

/* =================================================== */



/* ===================================================
   COPY/PASTE BLACK TEXT FIX - DARK MODE ONLY

   Fixes pasted Google Docs / rich-text content that brings
   its own black text color into dark mode.

   This does NOT affect normal CKEditor user-selected black
   text unless it has the copy/paste signature.
=================================================== */

/* Pasted paragraph with hardcoded black text and no intentional background */
html.qa-dark-mode .qa-post-content p[style*="caret-color: rgb(0, 0, 0)" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-q-view-content p[style*="caret-color: rgb(0, 0, 0)" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-a-item-content p[style*="caret-color: rgb(0, 0, 0)" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-c-item-content p[style*="caret-color: rgb(0, 0, 0)" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]) {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Google Docs style pasted spans with no intentional background */
html.qa-dark-mode .qa-post-content span[style*="font-variant" i][style*="white-space:pre-wrap" i]:not([style*="background" i]),
html.qa-dark-mode .qa-q-view-content span[style*="font-variant" i][style*="white-space:pre-wrap" i]:not([style*="background" i]),
html.qa-dark-mode .qa-a-item-content span[style*="font-variant" i][style*="white-space:pre-wrap" i]:not([style*="background" i]),
html.qa-dark-mode .qa-c-item-content span[style*="font-variant" i][style*="white-space:pre-wrap" i]:not([style*="background" i]) {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Pasted spans that explicitly include black text color */
html.qa-dark-mode .qa-post-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color:rgb(0,0,0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-post-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-q-view-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color:rgb(0,0,0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-q-view-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-a-item-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color:rgb(0,0,0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-a-item-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-c-item-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color:rgb(0,0,0)" i]:not([style*="background" i]),
html.qa-dark-mode .qa-c-item-content span[style*="font-variant" i][style*="white-space:pre-wrap" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background" i]) {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Do not override black-on-black spoiler/secret text */
html.qa-dark-mode .qa-post-content [style*="background:#000" i],
html.qa-dark-mode .qa-post-content [style*="background: #000" i],
html.qa-dark-mode .qa-post-content [style*="background-color:#000" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #000" i],
html.qa-dark-mode .qa-post-content [style*="background:black" i],
html.qa-dark-mode .qa-post-content [style*="background: black" i],
html.qa-dark-mode .qa-post-content [style*="background-color:black" i],
html.qa-dark-mode .qa-post-content [style*="background-color: black" i] {
    text-shadow: none !important;
}

/* =================================================== */



/* ===================================================
   GOOGLE DOCS / RICH PASTE BLACK TEXT FIX - DARK MODE

   Fixes pasted spans like:
   background-color:transparent;
   color:#000000;
   font-family:Arial,sans-serif;
   vertical-align:baseline;
   white-space:pre-wrap;

   This is intentionally narrow so normal user-selected
   black text from CKEditor is not changed.
=================================================== */

html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#000000" i][style*="font-family:Arial" i][style*="white-space:pre-wrap" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #000000" i][style*="font-family: Arial" i][style*="white-space: pre-wrap" i],
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i][style*="white-space:pre-wrap" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i][style*="white-space: pre-wrap" i],

html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#000000" i][style*="font-family:Arial" i][style*="white-space:pre-wrap" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #000000" i][style*="font-family: Arial" i][style*="white-space: pre-wrap" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i][style*="white-space:pre-wrap" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i][style*="white-space: pre-wrap" i],

html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#000000" i][style*="font-family:Arial" i][style*="white-space:pre-wrap" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #000000" i][style*="font-family: Arial" i][style*="white-space: pre-wrap" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i][style*="white-space:pre-wrap" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i][style*="white-space: pre-wrap" i] {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Same pasted pattern, but with font-family before color or other order variations */
html.qa-dark-mode .qa-post-content span[style*="white-space:pre-wrap" i][style*="vertical-align:baseline" i][style*="color:#000000" i]:not([style*="background:#000" i]):not([style*="background-color:#000" i]),
html.qa-dark-mode .qa-post-content span[style*="white-space: pre-wrap" i][style*="vertical-align: baseline" i][style*="color: #000000" i]:not([style*="background: #000" i]):not([style*="background-color: #000" i]),
html.qa-dark-mode .qa-post-content span[style*="white-space:pre-wrap" i][style*="vertical-align:baseline" i][style*="color:rgb(0,0,0)" i]:not([style*="background:#000" i]):not([style*="background-color:#000" i]),
html.qa-dark-mode .qa-post-content span[style*="white-space: pre-wrap" i][style*="vertical-align: baseline" i][style*="color: rgb(0, 0, 0)" i]:not([style*="background: #000" i]):not([style*="background-color: #000" i]),

html.qa-dark-mode .qa-q-view-content span[style*="white-space:pre-wrap" i][style*="vertical-align:baseline" i][style*="color:#000000" i]:not([style*="background:#000" i]):not([style*="background-color:#000" i]),
html.qa-dark-mode .qa-q-view-content span[style*="white-space: pre-wrap" i][style*="vertical-align: baseline" i][style*="color: #000000" i]:not([style*="background: #000" i]):not([style*="background-color: #000" i]),

html.qa-dark-mode .qa-a-item-content span[style*="white-space:pre-wrap" i][style*="vertical-align:baseline" i][style*="color:#000000" i]:not([style*="background:#000" i]):not([style*="background-color:#000" i]),
html.qa-dark-mode .qa-a-item-content span[style*="white-space: pre-wrap" i][style*="vertical-align: baseline" i][style*="color: #000000" i]:not([style*="background: #000" i]):not([style*="background-color: #000" i]) {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Keep links inside pasted content readable */
html.qa-dark-mode .qa-post-content span[style*="white-space:pre-wrap" i] a,
html.qa-dark-mode .qa-q-view-content span[style*="white-space:pre-wrap" i] a,
html.qa-dark-mode .qa-a-item-content span[style*="white-space:pre-wrap" i] a {
    color: #5ba4e5 !important;
}

/* =================================================== */

/* ===================================================
   GOOGLE DOCS SPLIT-SPAN BLACK TEXT FIX - DARK MODE

   Fixes pasted content where the parent span has:
   color:#000000; font-family:Arial,sans-serif

   but the inner child span has:
   font-size:...; white-space-collapse:preserve

   This keeps normal user-selected black text mostly untouched
   and targets the Google Docs / rich paste pattern.
=================================================== */

/* Parent pasted span with black Arial text */
html.qa-dark-mode .qa-post-content span[style*="color:#000000" i][style*="font-family:Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-post-content span[style*="color: #000000" i][style*="font-family: Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-post-content span[style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-post-content span[style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i]:not([style*="background" i]),

html.qa-dark-mode .qa-q-view-content span[style*="color:#000000" i][style*="font-family:Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-q-view-content span[style*="color: #000000" i][style*="font-family: Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-q-view-content span[style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-q-view-content span[style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i]:not([style*="background" i]),

html.qa-dark-mode .qa-a-item-content span[style*="color:#000000" i][style*="font-family:Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-a-item-content span[style*="color: #000000" i][style*="font-family: Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-a-item-content span[style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i]:not([style*="background" i]),
html.qa-dark-mode .qa-a-item-content span[style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i]:not([style*="background" i]) {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Children inside that pasted black Arial span */
html.qa-dark-mode .qa-post-content span[style*="color:#000000" i][style*="font-family:Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-post-content span[style*="color: #000000" i][style*="font-family: Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-post-content span[style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-post-content span[style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i]:not([style*="background" i]) *,

html.qa-dark-mode .qa-q-view-content span[style*="color:#000000" i][style*="font-family:Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-q-view-content span[style*="color: #000000" i][style*="font-family: Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-q-view-content span[style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-q-view-content span[style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i]:not([style*="background" i]) *,

html.qa-dark-mode .qa-a-item-content span[style*="color:#000000" i][style*="font-family:Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-a-item-content span[style*="color: #000000" i][style*="font-family: Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-a-item-content span[style*="color:rgb(0,0,0)" i][style*="font-family:Arial" i]:not([style*="background" i]) *,
html.qa-dark-mode .qa-a-item-content span[style*="color: rgb(0, 0, 0)" i][style*="font-family: Arial" i]:not([style*="background" i]) * {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Also catch the child-only Google Docs preserve style when inside a rich pasted paragraph */
html.qa-dark-mode .qa-post-content p[style*="line-height:1.38" i][style*="text-indent" i] span[style*="white-space-collapse:preserve" i],
html.qa-dark-mode .qa-post-content p[style*="line-height: 1.38" i][style*="text-indent" i] span[style*="white-space-collapse: preserve" i],
html.qa-dark-mode .qa-q-view-content p[style*="line-height:1.38" i][style*="text-indent" i] span[style*="white-space-collapse:preserve" i],
html.qa-dark-mode .qa-q-view-content p[style*="line-height: 1.38" i][style*="text-indent" i] span[style*="white-space-collapse: preserve" i],
html.qa-dark-mode .qa-a-item-content p[style*="line-height:1.38" i][style*="text-indent" i] span[style*="white-space-collapse:preserve" i],
html.qa-dark-mode .qa-a-item-content p[style*="line-height: 1.38" i][style*="text-indent" i] span[style*="white-space-collapse: preserve" i] {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Do not apply this fix inside black background spoiler/secret text */
html.qa-dark-mode .qa-post-content [style*="background:#000" i] span,
html.qa-dark-mode .qa-post-content [style*="background: #000" i] span,
html.qa-dark-mode .qa-post-content [style*="background-color:#000" i] span,
html.qa-dark-mode .qa-post-content [style*="background-color: #000" i] span {
    text-shadow: none !important;
}
/* =================================================== */


/* ===================================================
   RICH PASTE TRANSPARENT BACKGROUND + DARK TEXT FIX
   DARK MODE ONLY

   Fixes copy/pasted content like:
   style="background-color:transparent; color:#000000; font-family:Arial..."

   Previous rules using :not([style*="background"]) do not match this
   because "background-color:transparent" still contains "background".
=================================================== */

/* Parent pasted span has transparent background + black/dark text */
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#000000" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #000000" i],
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#000" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #000" i],
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#202124" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #202124" i],
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#282829" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #282829" i],
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#333333" i],
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #333333" i],

html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#000000" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #000000" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#000" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #000" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#202124" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #202124" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#282829" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #282829" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#333333" i],
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #333333" i],

html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#000000" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #000000" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#000" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #000" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#202124" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #202124" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#282829" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #282829" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#333333" i],
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #333333" i] {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Make children inherit the corrected color */
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#000000" i] *,
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #000000" i] *,
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:#000" i] *,
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: #000" i] *,
html.qa-dark-mode .qa-post-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i] *,
html.qa-dark-mode .qa-post-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i] *,

html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#000000" i] *,
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #000000" i] *,
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:#000" i] *,
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: #000" i] *,
html.qa-dark-mode .qa-q-view-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i] *,
html.qa-dark-mode .qa-q-view-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i] *,

html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#000000" i] *,
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #000000" i] *,
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:#000" i] *,
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: #000" i] *,
html.qa-dark-mode .qa-a-item-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i] *,
html.qa-dark-mode .qa-a-item-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i] * {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Very broad fallback for Google Docs/Word style pasted paragraphs:
   only when the paragraph has document-paste spacing/text-indent,
   not normal CKEditor text. */
html.qa-dark-mode .qa-post-content p[style*="line-height:1.38" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-post-content p[style*="line-height: 1.38" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-post-content p[style*="text-indent" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-post-content p[style*="text-indent" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-q-view-content p[style*="line-height:1.38" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-q-view-content p[style*="line-height: 1.38" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-q-view-content p[style*="text-indent" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-q-view-content p[style*="text-indent" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-a-item-content p[style*="line-height:1.38" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-a-item-content p[style*="line-height: 1.38" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-a-item-content p[style*="text-indent" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-a-item-content p[style*="text-indent" i] span[style*="color: #000000" i] {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Do not break black-on-black spoiler/secret text */
html.qa-dark-mode .qa-post-content [style*="background-color:#000" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #000" i],
html.qa-dark-mode .qa-post-content [style*="background:#000" i],
html.qa-dark-mode .qa-post-content [style*="background: #000" i],
html.qa-dark-mode .qa-q-view-content [style*="background-color:#000" i],
html.qa-dark-mode .qa-q-view-content [style*="background-color: #000" i],
html.qa-dark-mode .qa-q-view-content [style*="background:#000" i],
html.qa-dark-mode .qa-q-view-content [style*="background: #000" i] {
    text-shadow: none !important;
}
/* =================================================== */


/* ===================================================
   COMMENT APPROVAL RICH PASTE DARK TEXT FIX
   DARK MODE ONLY

   Same fix as question/answer pasted text, but for
   pending/comment approval areas.
=================================================== */

/* Comment pasted span has transparent background + black/dark text */
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:#000000" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: #000000" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:#000" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: #000" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:#202124" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: #202124" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:#282829" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: #282829" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:#333333" i],
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: #333333" i],

html.qa-dark-mode .qa-c-list-item span[style*="background-color:transparent" i][style*="color:#000000" i],
html.qa-dark-mode .qa-c-list-item span[style*="background-color: transparent" i][style*="color: #000000" i],
html.qa-dark-mode .qa-c-list-item span[style*="background-color:transparent" i][style*="color:#000" i],
html.qa-dark-mode .qa-c-list-item span[style*="background-color: transparent" i][style*="color: #000" i],
html.qa-dark-mode .qa-c-list-item span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-c-list-item span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i],

html.qa-dark-mode .qa-c-item span[style*="background-color:transparent" i][style*="color:#000000" i],
html.qa-dark-mode .qa-c-item span[style*="background-color: transparent" i][style*="color: #000000" i],
html.qa-dark-mode .qa-c-item span[style*="background-color:transparent" i][style*="color:#000" i],
html.qa-dark-mode .qa-c-item span[style*="background-color: transparent" i][style*="color: #000" i],
html.qa-dark-mode .qa-c-item span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-c-item span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i] {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Make children inherit the corrected color */
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:#000000" i] *,
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: #000000" i] *,
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:#000" i] *,
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: #000" i] *,
html.qa-dark-mode .qa-c-item-content span[style*="background-color:transparent" i][style*="color:rgb(0,0,0)" i] *,
html.qa-dark-mode .qa-c-item-content span[style*="background-color: transparent" i][style*="color: rgb(0, 0, 0)" i] *,

html.qa-dark-mode .qa-c-list-item span[style*="background-color:transparent" i][style*="color:#000000" i] *,
html.qa-dark-mode .qa-c-list-item span[style*="background-color: transparent" i][style*="color: #000000" i] *,
html.qa-dark-mode .qa-c-list-item span[style*="background-color:transparent" i][style*="color:#000" i] *,
html.qa-dark-mode .qa-c-list-item span[style*="background-color: transparent" i][style*="color: #000" i] *,

html.qa-dark-mode .qa-c-item span[style*="background-color:transparent" i][style*="color:#000000" i] *,
html.qa-dark-mode .qa-c-item span[style*="background-color: transparent" i][style*="color: #000000" i] *,
html.qa-dark-mode .qa-c-item span[style*="background-color:transparent" i][style*="color:#000" i] *,
html.qa-dark-mode .qa-c-item span[style*="background-color: transparent" i][style*="color: #000" i] * {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Comment approval pasted paragraph fallback */
html.qa-dark-mode .qa-c-item-content p[style*="line-height:1.38" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-c-item-content p[style*="line-height: 1.38" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-c-item-content p[style*="text-indent" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-c-item-content p[style*="text-indent" i] span[style*="color: #000000" i],

html.qa-dark-mode .qa-c-list-item p[style*="line-height:1.38" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-c-list-item p[style*="line-height: 1.38" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-c-list-item p[style*="text-indent" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-c-list-item p[style*="text-indent" i] span[style*="color: #000000" i],

html.qa-dark-mode .qa-c-item p[style*="line-height:1.38" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-c-item p[style*="line-height: 1.38" i] span[style*="color: #000000" i],
html.qa-dark-mode .qa-c-item p[style*="text-indent" i] span[style*="color:#000000" i],
html.qa-dark-mode .qa-c-item p[style*="text-indent" i] span[style*="color: #000000" i] {
    color: #dbe1e8 !important;
    caret-color: #dbe1e8 !important;
    text-shadow: none !important;
}

/* Do not break black-on-black spoiler/secret text inside comments */
html.qa-dark-mode .qa-c-item-content [style*="background-color:#000" i],
html.qa-dark-mode .qa-c-item-content [style*="background-color: #000" i],
html.qa-dark-mode .qa-c-item-content [style*="background:#000" i],
html.qa-dark-mode .qa-c-item-content [style*="background: #000" i],
html.qa-dark-mode .qa-c-list-item [style*="background-color:#000" i],
html.qa-dark-mode .qa-c-list-item [style*="background-color: #000" i],
html.qa-dark-mode .qa-c-list-item [style*="background:#000" i],
html.qa-dark-mode .qa-c-list-item [style*="background: #000" i] {
    text-shadow: none !important;
}
/* =================================================== */


/* ===================================================
   CRISIS / WARNING / GET HELP BOX - DARK MODE
   Make the help box softer and less bright in dark mode
=================================================== */
html.qa-dark-mode .qa-post-content .gethelp,
html.qa-dark-mode .qa-q-view-content .gethelp,
html.qa-dark-mode .qa-a-item-content .gethelp,
html.qa-dark-mode .qa-c-item-content .gethelp {
    color: #d9e2ea !important;
}

html.qa-dark-mode .qa-post-content .gethelp strong,
html.qa-dark-mode .qa-q-view-content .gethelp strong,
html.qa-dark-mode .qa-a-item-content .gethelp strong,
html.qa-dark-mode .qa-c-item-content .gethelp strong {
    color: #f3f6f9 !important;
}

html.qa-dark-mode .qa-post-content .gethelp a,
html.qa-dark-mode .qa-q-view-content .gethelp a,
html.qa-dark-mode .qa-a-item-content .gethelp a,
html.qa-dark-mode .qa-c-item-content .gethelp a {
    color: #7fc3ff !important;
}

html.qa-dark-mode .qa-post-content .gethelp,
html.qa-dark-mode .qa-q-view-content .gethelp,
html.qa-dark-mode .qa-a-item-content .gethelp,
html.qa-dark-mode .qa-c-item-content .gethelp {
    background: transparent !important;
}

html.qa-dark-mode .qa-post-content .gethelp,
html.qa-dark-mode .qa-q-view-content .gethelp,
html.qa-dark-mode .qa-a-item-content .gethelp,
html.qa-dark-mode .qa-c-item-content .gethelp {
    position: relative;
    z-index: 1;
}

html.qa-dark-mode .qa-post-content .gethelp,
html.qa-dark-mode .qa-q-view-content .gethelp,
html.qa-dark-mode .qa-a-item-content .gethelp,
html.qa-dark-mode .qa-c-item-content .gethelp {
    padding: 0 !important;
}

html.qa-dark-mode .qa-post-content .gethelp,
html.qa-dark-mode .qa-q-view-content .gethelp,
html.qa-dark-mode .qa-a-item-content .gethelp,
html.qa-dark-mode .qa-c-item-content .gethelp {
    color: #d9e2ea !important;
}

/* Parent note box */
html.qa-dark-mode .qa-post-content div[role="note"],
html.qa-dark-mode .qa-q-view-content div[role="note"],
html.qa-dark-mode .qa-a-item-content div[role="note"],
html.qa-dark-mode .qa-c-item-content div[role="note"] {
    background: #24303a !important;
    background-color: #24303a !important;
    border: 1px solid #3b4b59 !important;
    color: #d9e2ea !important;
    box-shadow: none !important;
}


/* ===================================================
   DARK MODE LOW-CONTRAST INLINE FONT FIX
   Fixes old/pasted/user inline dark font colors in dark mode.

   Rule:
   - Black/dark text alone becomes readable in dark mode.
   - Black text on black background stays hidden.
   - White text on white background stays hidden.
   - Light mode is not affected.
=================================================== */

/* Dark/black inline text with no intentional matching hidden background */
html.qa-dark-mode .qa-post-content [style^="color:#000" i],
html.qa-dark-mode .qa-post-content [style^="color: #000" i],
html.qa-dark-mode .qa-post-content [style*=";color:#000" i],
html.qa-dark-mode .qa-post-content [style*="; color:#000" i],
html.qa-dark-mode .qa-post-content [style*=";color: #000" i],
html.qa-dark-mode .qa-post-content [style*="; color: #000" i],
html.qa-dark-mode .qa-post-content [style^="color:black" i],
html.qa-dark-mode .qa-post-content [style^="color: black" i],
html.qa-dark-mode .qa-post-content [style*=";color:black" i],
html.qa-dark-mode .qa-post-content [style*="; color:black" i],
html.qa-dark-mode .qa-post-content [style*=";color: black" i],
html.qa-dark-mode .qa-post-content [style*="; color: black" i],
html.qa-dark-mode .qa-post-content [style^="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-post-content [style^="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-post-content [style*=";color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-post-content [style*="; color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-post-content [style*=";color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-post-content [style*="; color: rgb(0, 0, 0)" i],

html.qa-dark-mode .qa-post-content [style^="color:#111" i],
html.qa-dark-mode .qa-post-content [style^="color: #111" i],
html.qa-dark-mode .qa-post-content [style*=";color:#111" i],
html.qa-dark-mode .qa-post-content [style*="; color:#111" i],
html.qa-dark-mode .qa-post-content [style^="color:#222" i],
html.qa-dark-mode .qa-post-content [style^="color: #222" i],
html.qa-dark-mode .qa-post-content [style*=";color:#222" i],
html.qa-dark-mode .qa-post-content [style*="; color:#222" i],
html.qa-dark-mode .qa-post-content [style^="color:#333" i],
html.qa-dark-mode .qa-post-content [style^="color: #333" i],
html.qa-dark-mode .qa-post-content [style*=";color:#333" i],
html.qa-dark-mode .qa-post-content [style*="; color:#333" i],
html.qa-dark-mode .qa-post-content [style^="color:#444" i],
html.qa-dark-mode .qa-post-content [style^="color: #444" i],
html.qa-dark-mode .qa-post-content [style*=";color:#444" i],
html.qa-dark-mode .qa-post-content [style*="; color:#444" i],

html.qa-dark-mode .qa-post-content [style^="color:#202124" i],
html.qa-dark-mode .qa-post-content [style^="color: #202124" i],
html.qa-dark-mode .qa-post-content [style*=";color:#202124" i],
html.qa-dark-mode .qa-post-content [style*="; color:#202124" i],
html.qa-dark-mode .qa-post-content [style^="color:#282829" i],
html.qa-dark-mode .qa-post-content [style^="color: #282829" i],
html.qa-dark-mode .qa-post-content [style*=";color:#282829" i],
html.qa-dark-mode .qa-post-content [style*="; color:#282829" i],

html.qa-dark-mode .qa-q-view-content [style^="color:#000" i],
html.qa-dark-mode .qa-q-view-content [style^="color: #000" i],
html.qa-dark-mode .qa-q-view-content [style*=";color:#000" i],
html.qa-dark-mode .qa-q-view-content [style*="; color:#000" i],
html.qa-dark-mode .qa-q-view-content [style^="color:black" i],
html.qa-dark-mode .qa-q-view-content [style^="color: black" i],
html.qa-dark-mode .qa-q-view-content [style*=";color:black" i],
html.qa-dark-mode .qa-q-view-content [style*="; color:black" i],
html.qa-dark-mode .qa-q-view-content [style^="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-q-view-content [style^="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-q-view-content [style*=";color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-q-view-content [style*="; color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-q-view-content [style*=";color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-q-view-content [style*="; color: rgb(0, 0, 0)" i],

html.qa-dark-mode .qa-a-item-content [style^="color:#000" i],
html.qa-dark-mode .qa-a-item-content [style^="color: #000" i],
html.qa-dark-mode .qa-a-item-content [style*=";color:#000" i],
html.qa-dark-mode .qa-a-item-content [style*="; color:#000" i],
html.qa-dark-mode .qa-a-item-content [style^="color:black" i],
html.qa-dark-mode .qa-a-item-content [style^="color: black" i],
html.qa-dark-mode .qa-a-item-content [style*=";color:black" i],
html.qa-dark-mode .qa-a-item-content [style*="; color:black" i],
html.qa-dark-mode .qa-a-item-content [style^="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-a-item-content [style^="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-a-item-content [style*=";color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-a-item-content [style*="; color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-a-item-content [style*=";color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-a-item-content [style*="; color: rgb(0, 0, 0)" i],

html.qa-dark-mode .qa-c-item-content [style^="color:#000" i],
html.qa-dark-mode .qa-c-item-content [style^="color: #000" i],
html.qa-dark-mode .qa-c-item-content [style*=";color:#000" i],
html.qa-dark-mode .qa-c-item-content [style*="; color:#000" i],
html.qa-dark-mode .qa-c-item-content [style^="color:black" i],
html.qa-dark-mode .qa-c-item-content [style^="color: black" i],
html.qa-dark-mode .qa-c-item-content [style*=";color:black" i],
html.qa-dark-mode .qa-c-item-content [style*="; color:black" i],
html.qa-dark-mode .qa-c-item-content [style^="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-c-item-content [style^="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-c-item-content [style*=";color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-c-item-content [style*="; color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-c-item-content [style*=";color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-c-item-content [style*="; color: rgb(0, 0, 0)" i] {
    color: #f2f3f5 !important;
    caret-color: #f2f3f5 !important;
    text-shadow: none !important;
}

/* ===================================================
   HIDDEN MODE MUST WIN
   Put this AFTER the low-contrast fix above.
=================================================== */

/* Black text + black background stays hidden */
html.qa-dark-mode .qa-post-content [style*="background-color:#000" i][style*="color:#000" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #000" i][style*="color: #000" i],
html.qa-dark-mode .qa-post-content [style*="background:#000" i][style*="color:#000" i],
html.qa-dark-mode .qa-post-content [style*="background: #000" i][style*="color: #000" i],
html.qa-dark-mode .qa-post-content [style*="background-color:black" i][style*="color:black" i],
html.qa-dark-mode .qa-post-content [style*="background-color: black" i][style*="color: black" i],
html.qa-dark-mode .qa-post-content [style*="background:black" i][style*="color:black" i],
html.qa-dark-mode .qa-post-content [style*="background: black" i][style*="color: black" i],
html.qa-dark-mode .qa-post-content [style*="background-color:rgb(0,0,0)" i][style*="color:rgb(0,0,0)" i],
html.qa-dark-mode .qa-post-content [style*="background-color: rgb(0, 0, 0)" i][style*="color: rgb(0, 0, 0)" i],
html.qa-dark-mode .qa-q-view-content [style*="background-color:#000" i][style*="color:#000" i],
html.qa-dark-mode .qa-q-view-content [style*="background-color: #000" i][style*="color: #000" i],
html.qa-dark-mode .qa-a-item-content [style*="background-color:#000" i][style*="color:#000" i],
html.qa-dark-mode .qa-a-item-content [style*="background-color: #000" i][style*="color: #000" i],
html.qa-dark-mode .qa-c-item-content [style*="background-color:#000" i][style*="color:#000" i],
html.qa-dark-mode .qa-c-item-content [style*="background-color: #000" i][style*="color: #000" i] {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #000000 !important;
    caret-color: #000000 !important;
    text-shadow: none !important;
}

/* Parent black background + child black text stays hidden */
html.qa-dark-mode .qa-post-content [style*="background-color:#000" i] [style^="color:#000" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #000" i] [style^="color: #000" i],
html.qa-dark-mode .qa-post-content [style*="background:#000" i] [style^="color:#000" i],
html.qa-dark-mode .qa-post-content [style*="background: #000" i] [style^="color: #000" i],
html.qa-dark-mode .qa-post-content [style*="background-color:black" i] [style^="color:black" i],
html.qa-dark-mode .qa-post-content [style*="background-color: black" i] [style^="color: black" i],
html.qa-dark-mode .qa-post-content [style*="background:black" i] [style^="color:black" i],
html.qa-dark-mode .qa-post-content [style*="background: black" i] [style^="color: black" i] {
    color: #000000 !important;
    caret-color: #000000 !important;
    text-shadow: none !important;
}

/* White text + white background also stays hidden */
html.qa-dark-mode .qa-post-content [style*="background-color:#fff" i][style*="color:#fff" i],
html.qa-dark-mode .qa-post-content [style*="background-color: #fff" i][style*="color: #fff" i],
html.qa-dark-mode .qa-post-content [style*="background:#fff" i][style*="color:#fff" i],
html.qa-dark-mode .qa-post-content [style*="background: #fff" i][style*="color: #fff" i],
html.qa-dark-mode .qa-post-content [style*="background-color:white" i][style*="color:white" i],
html.qa-dark-mode .qa-post-content [style*="background-color: white" i][style*="color: white" i],
html.qa-dark-mode .qa-post-content [style*="background:white" i][style*="color:white" i],
html.qa-dark-mode .qa-post-content [style*="background: white" i][style*="color: white" i],
html.qa-dark-mode .qa-q-view-content [style*="background-color:#fff" i][style*="color:#fff" i],
html.qa-dark-mode .qa-q-view-content [style*="background-color: #fff" i][style*="color: #fff" i],
html.qa-dark-mode .qa-a-item-content [style*="background-color:#fff" i][style*="color:#fff" i],
html.qa-dark-mode .qa-a-item-content [style*="background-color: #fff" i][style*="color: #fff" i],
html.qa-dark-mode .qa-c-item-content [style*="background-color:#fff" i][style*="color:#fff" i],
html.qa-dark-mode .qa-c-item-content [style*="background-color: #fff" i][style*="color: #fff" i] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    text-shadow: none !important;
}
/* =================================================== */


/* ===================================================
   COMMENT APPROVE / REJECT BUTTON ICON FIX - DARK MODE
   Restores red/green comment moderation icons.
=================================================== */

/* Approve comment button */
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button.qa-form-light-button-approve,
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button.qa-form-light-button-approve,
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-approve[name$="_doapprove"],
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-approve[name*="_doapprove"] {
    background-color: #28a745 !important;
    background-image: url(images/icons/approved.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;

    color: transparent !important;
    text-indent: -9999px !important;
    text-shadow: none !important;

    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.20) !important;

    min-width: 86px !important;
    width: 86px !important;
    height: 42px !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Reject comment button */
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button.qa-form-light-button-reject,
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button.qa-form-light-button-reject,
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-reject[name$="_doreject"],
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-reject[name*="_doreject"] {
    background-color: #dc3545 !important;
    background-image: url(images/icons/rejected.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;

    color: transparent !important;
    text-indent: -9999px !important;
    text-shadow: none !important;

    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.20) !important;

    min-width: 86px !important;
    width: 86px !important;
    height: 42px !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Hover states */
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button.qa-form-light-button-approve:hover,
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button.qa-form-light-button-approve:hover,
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-approve[name$="_doapprove"]:hover,
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-approve[name*="_doapprove"]:hover {
    background-color: #218838 !important;
    background-image: url(images/icons/approved.png) !important;
}

html.qa-dark-mode .qa-c-list-item input.qa-form-light-button.qa-form-light-button-reject:hover,
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button.qa-form-light-button-reject:hover,
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-reject[name$="_doreject"]:hover,
html.qa-dark-mode input.qa-form-light-button.qa-form-light-button-reject[name*="_doreject"]:hover {
    background-color: #c82333 !important;
    background-image: url(images/icons/rejected.png) !important;
}
/* =================================================== */

/* ===================================================
   COMMENT APPROVE / REJECT BUTTON SIZE + ICON FIX
   DARK MODE ONLY

   Matches light-mode button size and restores:
   - green approve checkmark
   - red reject icon
=================================================== */

/* Shared size/shape for pending comment moderation buttons */
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button-approve,
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button-reject,
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button-approve,
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button-reject,
html.qa-dark-mode input.qa-form-light-button-approve[name*="_doapprove"],
html.qa-dark-mode input.qa-form-light-button-reject[name*="_doreject"] {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    padding: 0 !important;
    margin: 0 8px 0 0 !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;

    color: transparent !important;
    text-indent: -9999px !important;
    text-shadow: none !important;

    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.20) !important;
    cursor: pointer !important;
    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 42px !important;
}

/* Approve button: green with checkmark */
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button-approve,
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button-approve,
html.qa-dark-mode input.qa-form-light-button-approve[name*="_doapprove"] {
    background-color: #28a745 !important;
    background-image: url(images/icons/approved.png) !important;
}

/* Reject button: red with rejected icon */
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button-reject,
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button-reject,
html.qa-dark-mode input.qa-form-light-button-reject[name*="_doreject"] {
    background-color: #dc3545 !important;
    background-image: url(images/icons/rejected.png) !important;
}

/* Hover states */
html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button-approve:hover,
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button-approve:hover,
html.qa-dark-mode input.qa-form-light-button-approve[name*="_doapprove"]:hover {
    background-color: #218838 !important;
    background-image: url(images/icons/approved.png) !important;
}

html.qa-dark-mode .qa-c-item-buttons input.qa-form-light-button-reject:hover,
html.qa-dark-mode .qa-c-list-item input.qa-form-light-button-reject:hover,
html.qa-dark-mode input.qa-form-light-button-reject[name*="_doreject"]:hover {
    background-color: #c82333 !important;
    background-image: url(images/icons/rejected.png) !important;
}

/* Keep them aligned to the right like light mode */
html.qa-dark-mode .qa-c-item-buttons {
    text-align: right !important;
}
/* =================================================== */


/* ===================================================
   KIDZTALK ADVANCED SEARCH FORM - DARK MODE ONLY
   Add at the VERY BOTTOM of dark-mode.css
=================================================== */

html.qa-dark-mode .kt-search-sort-form {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #2a3744 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin: 0 0 16px 0 !important;
    color: #dbdee1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    text-shadow: none !important;
}

/* Form row layout */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 12px !important;
}

/* Labels */
html.qa-dark-mode .kt-search-sort-form label,
html.qa-dark-mode .kt-search-sort-form strong,
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-check {
    color: #f2f3f5 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Inputs and select boxes */
html.qa-dark-mode .kt-search-sort-form select,
html.qa-dark-mode .kt-search-sort-form input[type="text"] {
    background-color: #263442 !important;
    background: #263442 !important;
    color: #f2f3f5 !important;
    -webkit-text-fill-color: #f2f3f5 !important;
    border: 1px solid #3f5266 !important;
    border-radius: 5px !important;
    padding: 7px 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    text-shadow: none !important;
}



/* Placeholder text */
html.qa-dark-mode .kt-search-sort-form input::placeholder {
    color: #aeb8c2 !important;
    -webkit-text-fill-color: #aeb8c2 !important;
    opacity: 1 !important;
}

/* Focus state */
html.qa-dark-mode .kt-search-sort-form select:focus,
html.qa-dark-mode .kt-search-sort-form input[type="text"]:focus {
    background-color: #2d3b4a !important;
    background: #2d3b4a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5ba4e5 !important;
    box-shadow: 0 0 0 1px rgba(91,164,229,0.45) !important;
    outline: none !important;
}

/* Select dropdown options */
html.qa-dark-mode .kt-search-sort-form select option {
    background-color: #263442 !important;
    color: #f2f3f5 !important;
}

/* Checkbox */
html.qa-dark-mode .kt-search-sort-form input[type="checkbox"] {
    accent-color: #2f7db6 !important;
}

/* Apply button */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-submit,
html.qa-dark-mode .kt-search-sort-form input[type="submit"],
html.qa-dark-mode .kt-search-sort-form button {
    background-color: #2f7db6 !important;
    background: #2f7db6 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #4fa2dc !important;
    border-radius: 5px !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-submit:hover,
html.qa-dark-mode .kt-search-sort-form input[type="submit"]:hover,
html.qa-dark-mode .kt-search-sort-form button:hover {
    background-color: #3b8ccc !important;
    background: #3b8ccc !important;
    color: #ffffff !important;
}

/* Clear advanced link */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-clear {
    color: #8bbdf0 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-clear:hover {
    color: #ffffff !important;
}


/* ===================================================
   USERNAME AUTOCOMPLETE DROPDOWN - DARK MODE ONLY
=================================================== */

html.qa-dark-mode .kt-user-suggest-menu {
    background-color: #1a232c !important;
    background: #1a232c !important;
    border: 1px solid #3f5266 !important;
    border-radius: 6px !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.55) !important;
    color: #dbdee1 !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}

html.qa-dark-mode .kt-user-suggest-item {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #f2f3f5 !important;
    border-bottom: 1px solid #2a3744 !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

html.qa-dark-mode .kt-user-suggest-item:last-child {
    border-bottom: none !important;
}

html.qa-dark-mode .kt-user-suggest-item:hover,
html.qa-dark-mode .kt-user-suggest-item.kt-user-suggest-active {
    background-color: #2f7db6 !important;
    background: #2f7db6 !important;
    color: #ffffff !important;
}

html.qa-dark-mode .kt-user-suggest-handle {
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

html.qa-dark-mode .kt-user-suggest-points {
    color: #c8d7e2 !important;
    font-size: 12px !important;
    text-shadow: none !important;
}

html.qa-dark-mode .kt-user-suggest-item:hover .kt-user-suggest-points,
html.qa-dark-mode .kt-user-suggest-item.kt-user-suggest-active .kt-user-suggest-points {
    color: #eaf4ff !important;
}

html.qa-dark-mode .kt-user-suggest-empty {
    background-color: #1a232c !important;
    background: #1a232c !important;
    color: #c8d7e2 !important;
    padding: 8px 10px !important;
    text-shadow: none !important;
}


/* ===================================================
   MOBILE LAYOUT
=================================================== */

@media (max-width: 700px) {
    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row {
        display: block !important;
    }

    html.qa-dark-mode .kt-search-sort-form label,
    html.qa-dark-mode .kt-search-sort-form select,
    html.qa-dark-mode .kt-search-sort-form input[type="text"],
    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-submit,
    html.qa-dark-mode .kt-search-sort-form input[type="submit"],
    html.qa-dark-mode .kt-search-sort-form button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 9px 0 !important;
    }

    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-check {
        display: block !important;
        margin: 3px 0 10px 0 !important;
    }

    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-check input[type="checkbox"] {
        display: inline-block !important;
        width: auto !important;
        margin: 0 6px 0 0 !important;
    }

    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-clear {
        display: block !important;
        margin-top: 6px !important;
    }
}





/* ===================================================
   KidzTalk Advanced Search - Dark Mode Layout Fix
   Keeps the form wrapped and organized in dark mode
   Add at the VERY BOTTOM of dark-mode.css
=================================================== */

html.qa-dark-mode .kt-search-sort-form {
    overflow: visible !important;
}

/* Top Term/Search row */
html.qa-dark-mode .kt-search-sort-form .kt-search-query-row {
    display: grid !important;
    grid-template-columns: max-content minmax(300px, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
}

html.qa-dark-mode .kt-search-sort-form .kt-search-query-input,
html.qa-dark-mode .kt-search-sort-form input[name="q"].kt-search-query-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Remove Options label if any old CSS adds it */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row::before {
    content: none !important;
    display: none !important;
}

/* Main advanced controls */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row {
    display: grid !important;
    grid-template-columns: max-content 190px max-content 210px max-content max-content !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Row 1: Sort label */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row > label:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Row 1: Sort dropdown */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row > select {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 190px !important;
    min-width: 0 !important;
    max-width: 190px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Row 1: Answer by label */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row > label:nth-of-type(2) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Row 1: username autocomplete wrapper */
html.qa-dark-mode .kt-search-sort-form .kt-user-suggest-wrap {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 210px !important;
    min-width: 0 !important;
    max-width: 210px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Username input inside wrapper */
html.qa-dark-mode .kt-search-sort-form .kt-user-suggest-wrap input[name="answer_user"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Row 2: Exact phrase checkbox */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row > label.kt-search-advanced-check:nth-of-type(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Row 2: Title only checkbox */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row > label.kt-search-advanced-check:nth-of-type(4) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Row 2: Search button */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-submit,
html.qa-dark-mode .kt-search-sort-form input[type="submit"],
html.qa-dark-mode .kt-search-sort-form button {
    grid-column: 4 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 90px !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Row 2: Clear advanced */
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-clear {
    grid-column: 5 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Make sure old flex rules do not stretch labels */
html.qa-dark-mode .kt-search-sort-form label,
html.qa-dark-mode .kt-search-sort-form strong,
html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-check {
    flex: none !important;
    box-sizing: border-box !important;
}

/* Mobile/narrow layout */
@media (max-width: 850px) {
    html.qa-dark-mode .kt-search-sort-form .kt-search-query-row,
    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-row {
        display: block !important;
    }

    html.qa-dark-mode .kt-search-sort-form label,
    html.qa-dark-mode .kt-search-sort-form select,
    html.qa-dark-mode .kt-search-sort-form input[type="text"],
    html.qa-dark-mode .kt-search-sort-form .kt-user-suggest-wrap,
    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-submit,
    html.qa-dark-mode .kt-search-sort-form input[type="submit"],
    html.qa-dark-mode .kt-search-sort-form button {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 9px 0 !important;
    }

    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-check {
        display: block !important;
        margin: 3px 0 10px 0 !important;
    }

    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-check input[type="checkbox"] {
        display: inline-block !important;
        width: auto !important;
        margin: 0 6px 0 0 !important;
    }

    html.qa-dark-mode .kt-search-sort-form .kt-search-advanced-clear {
        display: block !important;
        margin-top: 6px !important;
    }
}