/* Foreground/background pairs for the gated local preview. Keep diagnostic
   canvases, color-test patches and generated media in their original colors. */
html.kbt-msn-local {
    --msn-action-bg: #86b9ff;
    --msn-action-ink: #142033;
    --msn-action-hover: #aad0ff;
}
html.kbt-msn-local[data-kbt-msn-theme="light"] {
    --msn-action-bg: #005fb8;
    --msn-action-ink: #fff;
    --msn-action-hover: #004a92;
}

/* Shared utility controls previously kept black text on the light theme's
   blue action button, and browser-default gray placeholders in dark fields. */
html.kbt-msn-tool-local .msn-tool-stage .kbt-tool-button.primary,
html.kbt-msn-tool-local .msn-tool-stage #start-button {
    background: var(--msn-action-bg);
    color: var(--msn-action-ink);
}
html.kbt-msn-tool-local .msn-tool-stage .kbt-tool-button.primary:hover,
html.kbt-msn-tool-local .msn-tool-stage #start-button:hover {
    background: var(--msn-action-hover);
    color: var(--msn-action-ink);
}
html.kbt-msn-tool-local .msn-tool-stage :is(.kbt-tool-input, .kbt-tool-textarea)::placeholder {
    color: var(--msn-muted);
    opacity: 1;
}
/* These authored Arabic QR fields stay navy in either page theme. */
html.kbt-msn-tool-local[lang="ar"] .msn-tool-stage :is(#qr-text, #qr-reader-output)::placeholder {
    color: #cbd5e1;
}

/* An image-wide gradient alone cannot protect a long caption over a bright
   photo. The caption itself has a dark backing, even on an all-white image. */
html.kbt-msn-local .msn-feed-card--featured .msn-feed-card-copy,
html.kbt-msn-local .msn-blog-card--lead .msn-blog-card-copy {
    background-color: rgba(0, 0, 0, .72);
}
@media (min-width: 1000.01px) {
    html.kbt-msn-local .msn-blog-card--secondary .msn-blog-card-copy {
        background-color: rgba(0, 0, 0, .72);
    }
}
html.kbt-msn-local .msn-feed-card--featured .msn-feed-rating-stars {
    color: #b8b8b8;
}

html.kbt-msn-local body .msn-feed-story .kbt-story-card-body,
html.kbt-msn-local body .msn-feed-story :is(.kbt-story-open-link, .kbt-story-guide-link) {
    background-color: rgba(0, 0, 0, .78);
}
html.kbt-msn-local body .msn-feed-story :is(.kbt-story-open-link, .kbt-story-guide-link) {
    padding-inline: 6px;
}

/* Light cards need a darker empty-star outline and filled-star color. */
html.kbt-msn-local[data-kbt-msn-theme="light"] .msn-feed-card:not(.msn-feed-card--featured) .msn-feed-rating-stars,
html.kbt-msn-local[data-kbt-msn-theme="light"] .msn-blog-card--compact .msn-blog-rating-stars {
    color: #707070 !important;
}
html.kbt-msn-local[data-kbt-msn-theme="light"] .msn-blog-card--compact .msn-blog-rating-stars > span {
    color: #996200;
}

/* Labels around test media follow the site; the media and diagnostic colors
   themselves remain controlled by their tool. */
html.kbt-msn-tool-local .msn-tool-stage :is(.br-tip, .br-btn) {
    background: var(--msn-card);
    color: var(--msn-ink);
    border-color: var(--msn-line);
}
html.kbt-msn-tool-local .msn-tool-stage :is(.bleed-fs-btn, .latency-mode.is-active) {
    background: var(--msn-action-bg);
    color: var(--msn-action-ink);
}
html.kbt-msn-tool-local .msn-tool-stage .bleed-fs-btn:hover {
    background: var(--msn-action-hover);
    color: var(--msn-action-ink);
}
html.kbt-msn-tool-local .msn-tool-stage :is(.wc-card, .st-card) :is(h2, h3, .wc-feature-icon) {
    color: #0f172a !important;
}
html.kbt-msn-tool-local .msn-tool-stage .st-stat-card .label {
    color: #56657a;
}
html.kbt-msn-tool-local .msn-tool-stage .pbc :is(input, textarea)::placeholder {
    color: var(--pbc-muted);
    opacity: 1;
}
html.kbt-msn-tool-local #mobile-input::placeholder {
    color: #c8c8c8;
    opacity: 1;
}
html.kbt-msn-tool-local[data-kbt-msn-theme="dark"] .kbt-typing-pro :is(.typing-field, .typing-toggle, .typing-dashboard article) > span {
    color: #cbd5e1;
}
html.kbt-msn-tool-local[data-kbt-msn-theme="dark"] #typing-clear-history {
    color: #93c5fd;
}
html.kbt-msn-tool-local[data-kbt-msn-theme="light"] #wt-game-label {
    color: #56657a;
}

/* The brightness scale remains unchanged; only its small text badge darkens. */
html.kbt-msn-tool-local .br-label--light {
    background: rgba(0, 0, 0, .6);
}
html.kbt-msn-tool-local .st-color-btn:is([style*="#ff0000" i], [style*="#00ff00" i], [style*="#ff00ff" i], [style*="#808080" i]) {
    color: #000 !important;
    text-shadow: none !important;
}
html.kbt-msn-tool-local .msn-tool-stage .st-card :is(.st-kicker, .st-lede) { color: #56657a !important; }
html.kbt-msn-tool-local .msn-tool-stage .st-note { color: #1e3a8a !important; }
html.kbt-msn-tool-local .msn-tool-stage .st-note-warning { color: #9a3412 !important; }
html.kbt-msn-tool-local .msn-tool-stage .st-note-danger { color: #991b1b !important; }
html.kbt-msn-tool-local .msn-tool-stage .st-tip {
    background: var(--msn-card);
    color: var(--msn-ink);
    border-color: var(--msn-line);
}
html.kbt-msn-tool-local[data-kbt-msn-theme="light"] .st-tester :is(.st-status, .st-ch-label) { color: #56657a; }
html.kbt-msn-tool-local[data-kbt-msn-theme="light"] .st-tester .st-ch.is-active .st-ch-label { color: #08753c; }

html.kbt-msn-tool-local .msn-tool-discovery .msn-feed-row:is([data-msn-row-card-count="1"], [data-msn-row-card-count="2"]) .msn-feed-card-copy {
    background-color: rgba(0, 0, 0, .78);
}
html.kbt-msn-tool-local[data-kbt-msn-theme] .msn-tool-discovery .msn-feed-row:is([data-msn-row-card-count="1"], [data-msn-row-card-count="2"]) .msn-feed-rating-stars {
    color: #b8b8b8 !important;
}
@media (min-width: 601px) {
    html.kbt-msn-tool-local .msn-tool-category-blog[data-msn-blog-count="2"] .msn-blog-card-copy {
        background-color: rgba(0, 0, 0, .78);
    }
}
html.kbt-msn-local body .post-card-rating {
    background: rgba(15, 23, 42, .9);
}
html.kbt-msn-local[data-kbt-msn-theme="light"] .kbt-usage--muted {
    color: #595959;
}
html.kbt-msn-tool-local .intent-cluster-link { color: var(--msn-link); }
html.kbt-msn-local[data-kbt-msn-theme="light"] .kbt-rating-star {
    color: #646464;
}
html.kbt-msn-local[data-kbt-msn-theme="light"] .kbt-rating-star:is(.is-on, .is-hover) {
    color: #996200;
}
html.kbt-msn-local #adv-pro-panel .adv-section-h { color: var(--msn-ink) !important; }
html.kbt-msn-local #adv-pro-panel .adv-section-p { color: var(--msn-muted) !important; }
html.kbt-msn-local #latency-log-content .log-placeholder { color: var(--msn-muted); }
html.kbt-msn-local #mobile-clear-btn {
    background: #b42318;
    color: #fff;
}
html.kbt-msn-local .keyboard-tester .key.key-disabled > span { color: #b8b8b8; }
html.kbt-msn-tool-local .msn-tool-stage .hs-info-value { color: var(--msn-ink); }
html.kbt-msn-tool-local .msn-tool-stage .hs-slider-label { color: var(--msn-muted); }
html.kbt-msn-tool-local .msn-tool-stage #hs-placeholder p { color: #e2e8f0; }
html.kbt-msn-tool-local .msn-tool-stage .hs-btn-primary,
html.kbt-msn-tool-local .msn-tool-stage .hs-test-item.active {
    background: var(--msn-action-bg);
    color: var(--msn-action-ink);
}
html.kbt-msn-tool-local .msn-tool-stage .hs-btn-danger { background: #b42318; color: #fff; }
html.kbt-msn-tool-local .msn-tool-stage :is(.hs-btn-success, .hs-channel-btn.playing) { background: #08753c; color: #fff; }

/* Article/navigation components from older layouts must pair their own small
   labels and pale action surfaces with the shared theme. */
html.kbt-msn-local.kbt-msn-article-local :is(.kbt-companion-story__eyebrow, .kbt-blog-context-tools__kicker) {
    color: var(--msn-link);
}
html.kbt-msn-local.kbt-msn-article-local .msn-article-body :is(.jump-links a, .final-cta > a) {
    background: var(--msn-card);
    color: var(--msn-link) !important;
    border-color: var(--msn-line);
}
html.kbt-msn-local.kbt-msn-article-local .msn-article-body :is(th, td) {
    background: var(--msn-card) !important;
    color: var(--msn-ink) !important;
}
html.kbt-msn-local.kbt-msn-article-local .msn-article-body th { background: var(--msn-raised) !important; }
html.kbt-msn-local.kbt-msn-article-local .msn-article-body .cff-timeline > li::before {
    background: #08753c;
    color: #fff;
}
html.kbt-msn-local.kbt-msn-article-local .msn-article-body :is(a.amazon-affiliate-button, a.razer-affiliate-button) {
    color: #111827 !important;
}
html.kbt-msn-local.kbt-msn-article-local .msn-article-body :is(.kbt-primary-tool > a, .cta-block > a.cta-btn) {
    background: var(--msn-action-bg);
    color: var(--msn-action-ink) !important;
}
html.kbt-msn-local.kbt-msn-article-local .msn-article-body .warning-box {
    background: var(--msn-card);
    color: var(--msn-ink);
}
html.kbt-msn-local.kbt-msn-article-local .msn-article-body .warning-box :is(p, strong) {
    color: var(--msn-ink) !important;
}
html.kbt-msn-local.kbt-msn-article-local[data-kbt-msn-theme="dark"] .msn-article-body .warning-box-title {
    color: #ffbe8a;
}
html.kbt-msn-local body.blog-page .msn-blog-pagination .tn-page.is-active {
    background: var(--msn-action-bg);
    color: var(--msn-action-ink);
}

/* The Black Crush article deliberately forced a white-only palette before
   this preview. Its original content now uses the same reading surfaces. */
html.kbt-msn-local.kbt-msn-article-local .post-wrap.black-crush-post {
    --text-color: var(--msn-ink);
    --text-muted: var(--msn-muted);
    --primary-color: var(--msn-link);
    --surface: var(--msn-card);
    --border-color: var(--msn-line);
}
html.kbt-msn-local.kbt-msn-article-local .post-wrap.black-crush-post :is(.post-title, .blog-content, .blog-content p, .blog-content li, .blog-content strong, .blog-content h2, .blog-content h4) {
    color: var(--msn-ink) !important;
}
html.kbt-msn-local.kbt-msn-article-local .post-wrap.black-crush-post :is(.post-meta, .blog-content figcaption, .tool-card p, .fix-card p) {
    color: var(--msn-muted) !important;
}
html.kbt-msn-local.kbt-msn-article-local .post-wrap.black-crush-post .blog-content :is(h3, a) { color: var(--msn-link) !important; }
html.kbt-msn-local.kbt-msn-article-local .post-wrap.black-crush-post :is(.quick-links a, .tool-card, .source-list li, .faq-list li, .fix-card, th, td) {
    background: var(--msn-card);
    color: var(--msn-ink) !important;
    border-color: var(--msn-line);
}
html.kbt-msn-local.kbt-msn-article-local .post-wrap.black-crush-post :is(.kbt-byline-name, .kbt-ai-summary__title, .kbt-ai-summary__link) {
    color: var(--msn-ink);
}