/**
 * Najibul Q&A — Single Question Stylesheet (Enterprise v2.0.0)
 *
 * ⚡ Enterprise-grade single question design
 * ⚡ Scoped to .qa-single (no global pollution)
 * ⚡ Core Web Vitals friendly (no layout shifts)
 * ⚡ Status banner (Open/Answered/Closed)
 * ⚡ Question header with title + meta line
 * ⚡ Answers list with best-answer highlighting
 * ⚡ Author avatar support (Gravatar)
 * ⚡ Difficulty badge display
 * ⚡ Tags display
 * ⚡ Share buttons section
 * ⚡ Answer form customization
 * ⚡ Comments styling
 * ⚡ Dark mode aware
 * ⚡ Responsive (mobile / tablet / desktop)
 * ⚡ Print styles
 * ⚡ Reduced motion support
 * ⚡ Accessibility focus states
 * ⚡ Safe typography (no fixed-width overflow)
 * ⚡ Balanced whitespace + readable line lengths
 *
 * ⭐ NEW v2.0.0 — ENTERPRISE UPGRADES:
 * ─────────────────────────────────────────────────────────────
 *   1. 🖥️ DESKTOP LAYOUT FIX (Critical)
 *      • Prevent title overflow on wide screens
 *      • Fix answer meta row wrapping
 *      • Fix share buttons wrapping
 *      • Fix related questions grid on desktop
 *      • All use min-width: 0 on flex/grid children
 *
 *   2. ⭐ AUTHOR REPUTATION BADGE
 *      • Trusted / Standard / Restricted / Blocked tiers
 *      • Color-coded next to author name
 *      • Works in question meta + answer meta
 *
 *   3. 🆔 GLOBAL QID DISPLAY
 *      • QID badge in question meta line
 *      • Copy-on-click visual affordance
 *      • Cross-language translation indicator
 *
 *   4. 📊 ANSWER SORTING UI
 *      • Sort dropdown styling (Date/Votes/Oldest/Newest)
 *      • Active state indication
 *
 *   5. 🏷️ TRANSLATION LINKS
 *      • Cross-language links in meta line
 *      • Flag icon + language name
 *
 *   6. 🎯 ANSWER ACTION BUTTONS (v2.0.0)
 *      • Mark as best answer
 *      • Copy link
 *      • Share answer
 *      • Reputation badge in answer meta
 *
 *   7. 📱 RESPONSIVE 3-TIER BREAKPOINTS
 *      • 1024px — reduce padding
 *      • 768px — stack meta, wrap buttons
 *      • 480px — micro-mobile
 *
 *   8. 🎨 ENHANCED TYPOGRAPHY
 *      • Better line-height for long-form
 *      • Improved code block styling
 *      • Improved blockquote styling
 *
 *   9. ♿ ACCESSIBILITY
 *      • Skip link
 *      • ARIA-compatible markup
 *      • focus-visible on all interactive
 *
 *   10. 🖨️ PRINT OPTIMIZATIONS
 *       • Hide share buttons + answer actions
 *       • Expand URLs after links
 *       • Preserve best-answer highlight
 *
 * Location: /wp-content/plugins/najibul-post-type/QA/assets/css/qa.css
 *
 * @package NajibulPT\QA
 * @version 2.0.0
 */

/* ============================================
   ROOT VARIABLES — Scoped to .qa-single
   ============================================ */

.qa-single {
    /* Brand colors */
    --qa-primary: #2563eb;
    --qa-primary-dark: #1d4ed8;
    --qa-primary-light: #dbeafe;
    --qa-primary-pale: #eff6ff;
    --qa-secondary: #0891b2;
    --qa-accent: #8b5cf6;

    /* Status colors */
    --qa-success: #16a34a;
    --qa-success-light: #f0fdf4;
    --qa-success-border: #a7f3d0;
    --qa-warning: #d97706;
    --qa-warning-light: #fffbeb;
    --qa-danger: #dc2626;
    --qa-danger-light: #fef2f2;

    /* Status badge colors */
    --qa-open: #1e40af;
    --qa-open-bg: #dbeafe;
    --qa-answered: #166534;
    --qa-answered-bg: #dcfce7;
    --qa-closed: #475569;
    --qa-closed-bg: #f1f5f9;

    /* Difficulty colors */
    --qa-easy: #16a34a;
    --qa-easy-bg: #dcfce7;
    --qa-easy-text: #166534;
    --qa-medium: #f59e0b;
    --qa-medium-bg: #fef3c7;
    --qa-medium-text: #92400e;
    --qa-hard: #dc2626;
    --qa-hard-bg: #fee2e2;
    --qa-hard-text: #991b1b;

    /* ⭐ Reputation tier colors (v2.0.0) */
    --qa-rep-trusted-bg: #dcfce7;
    --qa-rep-trusted-text: #166534;
    --qa-rep-trusted-border: rgba(22, 163, 74, 0.25);
    --qa-rep-standard-bg: #fef3c7;
    --qa-rep-standard-text: #92400e;
    --qa-rep-standard-border: rgba(217, 119, 6, 0.25);
    --qa-rep-restricted-bg: #ffedd5;
    --qa-rep-restricted-text: #9a3412;
    --qa-rep-restricted-border: rgba(234, 88, 12, 0.25);
    --qa-rep-blocked-bg: #fee2e2;
    --qa-rep-blocked-text: #991b1b;
    --qa-rep-blocked-border: rgba(220, 38, 38, 0.25);

    /* Text */
    --qa-text: #0f172a;
    --qa-text-subtle: #1e293b;
    --qa-text-body: #1e293b;
    --qa-text-muted: #64748b;
    --qa-text-faint: #94a3b8;

    /* Surfaces */
    --qa-bg: #ffffff;
    --qa-bg-subtle: #f8fafc;
    --qa-bg-muted: #f1f5f9;
    --qa-card-bg: #ffffff;
    --qa-answer-bg: #ffffff;
    --qa-best-answer-bg: #f0fdf4;
    --qa-border: #e2e8f0;
    --qa-border-subtle: #f1f5f9;
    --qa-quote-bg: #f8fafc;
    --qa-code-bg: #f1f5f9;

    /* Links */
    --qa-link: #2563eb;
    --qa-link-hover: #1d4ed8;

    /* Radii */
    --qa-radius-sm: 6px;
    --qa-radius-md: 8px;
    --qa-radius-lg: 12px;
    --qa-radius-xl: 16px;
    --qa-radius-pill: 20px;
    --qa-radius-circle: 50%;

    /* Shadows */
    --qa-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --qa-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --qa-shadow-lg: 0 12px 28px -8px rgba(37, 99, 235, 0.15);
    --qa-shadow-best: 0 4px 16px -4px rgba(22, 163, 74, 0.2);

    /* Motion */
    --qa-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --qa-max-width: 820px;
    --qa-content-size: 18px;
    --qa-content-line-height: 1.8;

    max-width: var(--qa-max-width);
    margin: 0 auto;
    padding: 24px 20px 60px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, system-ui, sans-serif;
    color: var(--qa-text-body);
    background: var(--qa-bg);
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* ⭐ v2.0.0: Prevent layout overflow on desktop */
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.qa-single *,
.qa-single *::before,
.qa-single *::after {
    box-sizing: border-box;
}

/* ⭐ v2.0.0: Prevent flex/grid overflow */
.qa-single .qa-answer,
.qa-single .qa-answer-body,
.qa-single .qa-question-body,
.qa-single .qa-answer-header,
.qa-single .qa-answer-author-info,
.qa-single .qa-meta,
.qa-single .qa-answers-header {
    min-width: 0;
}

/* ============================================
   STATUS BANNER
   ============================================ */

.qa-single .qa-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--qa-radius-md);
    margin: 0 0 20px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    flex-wrap: wrap;
}

.qa-single .qa-status-banner.qa-banner-open {
    background: var(--qa-open-bg);
    color: var(--qa-open);
    border-color: rgba(37, 99, 235, 0.2);
}

.qa-single .qa-status-banner.qa-banner-answered {
    background: var(--qa-answered-bg);
    color: var(--qa-answered);
    border-color: rgba(22, 163, 74, 0.2);
}

.qa-single .qa-status-banner.qa-banner-closed {
    background: var(--qa-closed-bg);
    color: var(--qa-closed);
    border-color: rgba(71, 85, 105, 0.2);
}

.qa-single .qa-status-banner-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.qa-single .qa-status-banner-text {
    flex: 1;
    min-width: 0;
}

.qa-single .qa-status-banner-count {
    padding: 3px 12px;
    border-radius: var(--qa-radius-pill);
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ============================================
   ENTRY TITLE
   ============================================ */

.qa-single .entry-title,
.qa-single h1.entry-title {
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 18px 0;
    color: var(--qa-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    letter-spacing: -0.01em;
    max-width: 100%;
}

/* ============================================
   META LINE — With badges
   ============================================ */

.qa-single .qa-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--qa-text-muted);
    border-bottom: 1px solid var(--qa-border);
    padding-bottom: 15px;
    margin-bottom: 25px;
    line-height: 1.5;
    min-width: 0;
}

.qa-single .qa-meta a {
    color: var(--qa-link);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--qa-transition);
}

.qa-single .qa-meta a:hover,
.qa-single .qa-meta a:focus-visible {
    color: var(--qa-link-hover);
    text-decoration: underline;
}

.qa-single .qa-meta time {
    color: var(--qa-text);
    font-weight: 500;
}

/* Status badge */
.qa-single .qa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: var(--qa-radius-pill);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.qa-single .qa-status-badge.qa-status-open {
    background: var(--qa-open-bg);
    color: var(--qa-open);
    border-color: rgba(37, 99, 235, 0.25);
}

.qa-single .qa-status-badge.qa-status-answered {
    background: var(--qa-answered-bg);
    color: var(--qa-answered);
    border-color: rgba(22, 163, 74, 0.25);
}

.qa-single .qa-status-badge.qa-status-closed {
    background: var(--qa-closed-bg);
    color: var(--qa-closed);
    border-color: rgba(71, 85, 105, 0.25);
}

/* Difficulty badge */
.qa-single .qa-difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: var(--qa-radius-pill);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.qa-single .qa-badge-easy {
    background: var(--qa-easy-bg);
    color: var(--qa-easy-text);
    border-color: rgba(22, 163, 74, 0.25);
}

.qa-single .qa-badge-medium {
    background: var(--qa-medium-bg);
    color: var(--qa-medium-text);
    border-color: rgba(245, 158, 11, 0.25);
}

.qa-single .qa-badge-hard {
    background: var(--qa-hard-bg);
    color: var(--qa-hard-text);
    border-color: rgba(220, 38, 38, 0.25);
}

/* Views badge */
.qa-single .qa-views-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: var(--qa-radius-pill);
    background: var(--qa-bg-muted);
    color: var(--qa-text-subtle);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid var(--qa-border);
    white-space: nowrap;
}

/* ⭐ v2.0.0: Author reputation badge */
.qa-single .qa-author-reputation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--qa-radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.qa-single .qa-author-reputation.qa-rep-trusted {
    background: var(--qa-rep-trusted-bg);
    color: var(--qa-rep-trusted-text);
    border-color: var(--qa-rep-trusted-border);
}

.qa-single .qa-author-reputation.qa-rep-standard {
    background: var(--qa-rep-standard-bg);
    color: var(--qa-rep-standard-text);
    border-color: var(--qa-rep-standard-border);
}

.qa-single .qa-author-reputation.qa-rep-restricted {
    background: var(--qa-rep-restricted-bg);
    color: var(--qa-rep-restricted-text);
    border-color: var(--qa-rep-restricted-border);
}

.qa-single .qa-author-reputation.qa-rep-blocked {
    background: var(--qa-rep-blocked-bg);
    color: var(--qa-rep-blocked-text);
    border-color: var(--qa-rep-blocked-border);
}

/* ⭐ v2.0.0: Global QID badge */
.qa-single .qa-qid-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--qa-radius-pill);
    background: var(--qa-bg-subtle);
    color: var(--qa-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    line-height: 1.4;
    border: 1px solid var(--qa-border);
    cursor: pointer;
    transition: background var(--qa-transition),
                color var(--qa-transition);
    white-space: nowrap;
}

.qa-single .qa-qid-badge:hover {
    background: var(--qa-primary-light);
    color: var(--qa-primary-dark);
}

.qa-single .qa-qid-badge:focus-visible {
    outline: 2px solid var(--qa-primary);
    outline-offset: 2px;
}

/* ⭐ v2.0.0: Translation links */
.qa-single .qa-translations {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--qa-text-muted);
    flex-wrap: wrap;
}

.qa-single .qa-translations a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--qa-link);
    text-decoration: none;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--qa-radius-sm);
    background: var(--qa-bg-subtle);
    border: 1px solid var(--qa-border);
    transition: background var(--qa-transition),
                border-color var(--qa-transition);
    line-height: 1.4;
}

.qa-single .qa-translations a:hover,
.qa-single .qa-translations a:focus-visible {
    background: var(--qa-primary-light);
    border-color: var(--qa-primary);
    color: var(--qa-primary-dark);
}

/* ============================================
   TAGS
   ============================================ */

.qa-single .qa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px 0;
}

.qa-single .qa-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--qa-radius-pill);
    background: var(--qa-primary-light);
    color: var(--qa-primary-dark);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background var(--qa-transition), color var(--qa-transition);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qa-single .qa-tag:hover,
.qa-single .qa-tag:focus-visible {
    background: var(--qa-primary);
    color: #ffffff;
}

/* ============================================
   ENTRY CONTENT — Question Body
   ============================================ */

.qa-single .qa-question-body {
    font-size: var(--qa-content-size);
    line-height: var(--qa-content-line-height);
    color: var(--qa-text-body);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    padding: 20px 24px;
    background: var(--qa-bg-subtle);
    border-radius: var(--qa-radius-lg);
    border-left: 4px solid var(--qa-primary);
    margin: 0 0 32px 0;
}

.qa-single .qa-question-body > * + * {
    margin-top: 1.5em;
}

.qa-single .qa-question-body p {
    margin: 0 0 1.5em 0;
}

.qa-single .qa-question-body p:last-child {
    margin-bottom: 0;
}

/* Headings inside question body */
.qa-single .qa-question-body h2,
.qa-single .qa-question-body h3,
.qa-single .qa-question-body h4,
.qa-single .qa-question-body h5,
.qa-single .qa-question-body h6 {
    color: var(--qa-text);
    line-height: 1.3;
    margin: 1.5em 0 0.6em 0;
    font-weight: 700;
    word-wrap: break-word;
}

.qa-single .qa-question-body h2 { font-size: 1.4em; }
.qa-single .qa-question-body h3 { font-size: 1.2em; }
.qa-single .qa-question-body h4 { font-size: 1.05em; }

/* Lists */
.qa-single .qa-question-body ul,
.qa-single .qa-question-body ol {
    margin: 0 0 1.5em 0;
    padding-left: 1.5em;
}

.qa-single .qa-question-body li {
    margin-bottom: 0.5em;
}

/* Links */
.qa-single .qa-question-body a {
    color: var(--qa-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--qa-transition),
                text-decoration-thickness var(--qa-transition);
}

.qa-single .qa-question-body a:hover,
.qa-single .qa-question-body a:focus-visible {
    color: var(--qa-link-hover);
    text-decoration-thickness: 2px;
}

/* Images */
.qa-single .qa-question-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--qa-radius-md);
    display: block;
    margin: 20px 0;
}

/* Blockquotes */
.qa-single .qa-question-body blockquote {
    border-left: 4px solid var(--qa-primary);
    padding: 12px 20px;
    margin: 20px 0;
    background: var(--qa-quote-bg);
    border-radius: 0 var(--qa-radius-md) var(--qa-radius-md) 0;
    font-style: italic;
    color: var(--qa-text-body);
}

/* Code */
.qa-single .qa-question-body code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background: var(--qa-code-bg);
    padding: 2px 6px;
    border-radius: var(--qa-radius-sm);
    word-break: break-word;
    color: var(--qa-primary-dark);
}

.qa-single .qa-question-body pre {
    background: var(--qa-code-bg);
    padding: 16px;
    border-radius: var(--qa-radius-md);
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 20px 0;
    max-width: 100%;
}

.qa-single .qa-question-body pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre;
    word-break: normal;
}

/* Tables */
.qa-single .qa-question-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95em;
    display: table;
    overflow-x: auto;
}

.qa-single .qa-question-body th,
.qa-single .qa-question-body td {
    padding: 10px 14px;
    border: 1px solid var(--qa-border);
    text-align: left;
    word-wrap: break-word;
}

.qa-single .qa-question-body th {
    background: var(--qa-bg-subtle);
    font-weight: 700;
    color: var(--qa-text);
}

/* ============================================
   ANSWERS SECTION
   ============================================ */

.qa-single .qa-answers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 40px 0 20px 0;
    padding-top: 24px;
    border-top: 2px solid var(--qa-border);
}

.qa-single .qa-answers-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--qa-text);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.qa-single .qa-answers-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: var(--qa-primary-light);
    color: var(--qa-primary);
    border-radius: var(--qa-radius-pill);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ⭐ v2.0.0: Answer sorting UI */
.qa-single .qa-answers-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--qa-text-muted);
    flex-shrink: 0;
}

.qa-single .qa-answers-sort label {
    font-weight: 600;
    margin: 0;
}

.qa-single .qa-answers-sort select {
    padding: 6px 10px;
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-md);
    background: var(--qa-bg);
    font-size: 12.5px;
    font-family: inherit;
    color: var(--qa-text-subtle);
    cursor: pointer;
    transition: border-color var(--qa-transition),
                box-shadow var(--qa-transition);
    max-width: 100%;
}

.qa-single .qa-answers-sort select:hover {
    border-color: #cbd5e1;
}

.qa-single .qa-answers-sort select:focus {
    outline: none;
    border-color: var(--qa-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Answers List */
.qa-single .qa-answers-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual answer */
.qa-single .qa-answer {
    position: relative;
    background: var(--qa-answer-bg);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
    padding: 20px 22px;
    transition: box-shadow var(--qa-transition),
                border-color var(--qa-transition),
                transform var(--qa-transition);
    box-shadow: var(--qa-shadow-sm);
    min-width: 0;
}

.qa-single .qa-answer:hover {
    box-shadow: var(--qa-shadow-md);
    border-color: #cbd5e1;
}

/* Best answer — highlighted */
.qa-single .qa-answer.qa-best-answer {
    background: var(--qa-best-answer-bg);
    border: 2px solid var(--qa-success-border);
    border-left: 6px solid var(--qa-success);
    box-shadow: var(--qa-shadow-best);
    padding-left: 24px;
}

.qa-single .qa-answer.qa-best-answer:hover {
    border-color: var(--qa-success);
    border-left-color: var(--qa-success);
}

/* Best answer ribbon */
.qa-single .qa-best-answer-ribbon {
    position: absolute;
    top: -12px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: linear-gradient(135deg, var(--qa-success), #15803d);
    color: #ffffff;
    border-radius: var(--qa-radius-pill);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    box-shadow: 0 4px 10px -2px rgba(22, 163, 74, 0.35);
    z-index: 1;
}

.qa-single .qa-best-answer-ribbon::before {
    content: '🏆';
    font-size: 12px;
    line-height: 1;
}

/* Answer header */
.qa-single .qa-answer-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--qa-border-subtle);
    min-width: 0;
}

.qa-single .qa-answer.qa-best-answer .qa-answer-header {
    border-bottom-color: rgba(22, 163, 74, 0.2);
}

/* Avatar */
.qa-single .qa-answer-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--qa-radius-circle);
    overflow: hidden;
    background: var(--qa-bg-muted);
}

.qa-single .qa-answer-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--qa-radius-circle);
}

.qa-single .qa-answer.qa-best-answer .qa-answer-avatar {
    box-shadow: 0 0 0 3px var(--qa-success-border);
}

/* Author info */
.qa-single .qa-answer-author-info {
    flex: 1;
    min-width: 0;
}

.qa-single .qa-answer-author {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--qa-text);
    line-height: 1.3;
    margin-bottom: 3px;
    min-width: 0;
}

.qa-single .qa-answer-author a {
    color: var(--qa-text);
    text-decoration: none;
    transition: color var(--qa-transition);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.qa-single .qa-answer-author a:hover,
.qa-single .qa-answer-author a:focus-visible {
    color: var(--qa-primary);
    text-decoration: underline;
}

.qa-single .qa-answer-author-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--qa-primary-light);
    color: var(--qa-primary);
    border-radius: var(--qa-radius-sm);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
}

.qa-single .qa-answer-date {
    font-size: 12px;
    color: var(--qa-text-muted);
    font-weight: 500;
    line-height: 1.4;
}

/* ⭐ v2.0.0: Answer reputation badge */
.qa-single .qa-answer-reputation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--qa-radius-pill);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.qa-single .qa-answer-reputation.qa-rep-trusted {
    background: var(--qa-rep-trusted-bg);
    color: var(--qa-rep-trusted-text);
    border-color: var(--qa-rep-trusted-border);
}

.qa-single .qa-answer-reputation.qa-rep-standard {
    background: var(--qa-rep-standard-bg);
    color: var(--qa-rep-standard-text);
    border-color: var(--qa-rep-standard-border);
}

.qa-single .qa-answer-reputation.qa-rep-restricted {
    background: var(--qa-rep-restricted-bg);
    color: var(--qa-rep-restricted-text);
    border-color: var(--qa-rep-restricted-border);
}

.qa-single .qa-answer-reputation.qa-rep-blocked {
    background: var(--qa-rep-blocked-bg);
    color: var(--qa-rep-blocked-text);
    border-color: var(--qa-rep-blocked-border);
}

/* Answer body */
.qa-single .qa-answer-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--qa-text-body);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

.qa-single .qa-answer-body > * + * {
    margin-top: 1.2em;
}

.qa-single .qa-answer-body p {
    margin: 0 0 1.2em 0;
}

.qa-single .qa-answer-body p:last-child {
    margin-bottom: 0;
}

.qa-single .qa-answer-body code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background: var(--qa-code-bg);
    padding: 2px 6px;
    border-radius: var(--qa-radius-sm);
    color: var(--qa-primary-dark);
    word-break: break-word;
}

.qa-single .qa-answer-body pre {
    background: var(--qa-code-bg);
    padding: 14px 16px;
    border-radius: var(--qa-radius-md);
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 16px 0;
    max-width: 100%;
}

.qa-single .qa-answer-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    white-space: pre;
    word-break: normal;
}

.qa-single .qa-answer-body a {
    color: var(--qa-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.qa-single .qa-answer-body a:hover {
    color: var(--qa-link-hover);
}

.qa-single .qa-answer-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--qa-radius-md);
    display: block;
    margin: 16px 0;
}

.qa-single .qa-answer-body blockquote {
    border-left: 3px solid var(--qa-primary);
    padding: 10px 16px;
    margin: 16px 0;
    background: var(--qa-quote-bg);
    border-radius: 0 var(--qa-radius-md) var(--qa-radius-md) 0;
    font-style: italic;
}

/* Answer footer (actions) */
.qa-single .qa-answer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--qa-border-subtle);
    flex-wrap: wrap;
    min-width: 0;
}

.qa-single .qa-answer.qa-best-answer .qa-answer-footer {
    border-top-color: rgba(22, 163, 74, 0.2);
}

.qa-single .qa-answer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.qa-single .qa-answer-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-pill);
    color: var(--qa-text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--qa-transition),
                border-color var(--qa-transition),
                color var(--qa-transition);
    white-space: nowrap;
}

.qa-single .qa-answer-action:hover,
.qa-single .qa-answer-action:focus-visible {
    background: var(--qa-bg-subtle);
    border-color: #cbd5e1;
    color: var(--qa-text);
    outline: none;
}

.qa-single .qa-answer-action:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Best answer marking button (for question author/admin) */
.qa-single .qa-answer-action.qa-mark-best {
    background: var(--qa-success-light);
    border-color: var(--qa-success-border);
    color: var(--qa-success);
}

.qa-single .qa-answer-action.qa-mark-best:hover {
    background: var(--qa-success);
    border-color: var(--qa-success);
    color: #ffffff;
}

/* Already marked as best */
.qa-single .qa-answer-action.qa-marked-best {
    background: var(--qa-success);
    border-color: var(--qa-success);
    color: #ffffff;
    cursor: default;
}

.qa-single .qa-answer-action.qa-marked-best:hover {
    background: var(--qa-success);
    border-color: var(--qa-success);
    color: #ffffff;
}

/* ============================================
   EMPTY STATE — No Answers Yet
   ============================================ */

.qa-single .qa-no-answers {
    text-align: center;
    padding: 40px 24px;
    background: var(--qa-bg-subtle);
    border: 2px dashed var(--qa-border);
    border-radius: var(--qa-radius-lg);
    margin: 20px 0 32px 0;
}

.qa-single .qa-no-answers-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 12px;
    display: block;
    opacity: 0.6;
}

.qa-single .qa-no-answers-text {
    font-size: 15px;
    color: var(--qa-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   SHARE SECTION
   ============================================ */

.qa-single .qa-share {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--qa-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.qa-single .qa-share .share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--qa-text-muted);
    margin-right: 6px;
    flex-shrink: 0;
}

.qa-single .qa-share a,
.qa-single .qa-share button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--qa-radius-pill);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    line-height: 1.3;
    transition: transform var(--qa-transition),
                box-shadow var(--qa-transition),
                opacity var(--qa-transition);
    white-space: nowrap;
}

.qa-single .qa-share a:hover,
.qa-single .qa-share a:focus-visible,
.qa-single .qa-share button:hover,
.qa-single .qa-share button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
    opacity: 0.95;
    outline: none;
}

.qa-single .qa-share a:focus-visible,
.qa-single .qa-share button:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Network colors */
.qa-single .qa-share .share-twitter   { background: #1DA1F2; }
.qa-single .qa-share .share-facebook  { background: #1877F2; }
.qa-single .qa-share .share-linkedin  { background: #0A66C2; }
.qa-single .qa-share .share-whatsapp  { background: #25D366; }
.qa-single .qa-share .share-telegram  { background: #0088CC; }
.qa-single .qa-share .share-reddit    { background: #FF4500; }
.qa-single .qa-share .share-email     { background: #64748b; }
.qa-single .qa-share .share-copy      { background: var(--qa-text-subtle); }

/* ============================================
   COMMENT FORM (Answer Form)
   ============================================ */

.qa-single #respond,
.qa-single .comment-respond {
    margin-top: 40px;
    padding: 24px;
    background: var(--qa-bg-subtle);
    border-radius: var(--qa-radius-lg);
    border: 1px solid var(--qa-border);
}

.qa-single #respond h3,
.qa-single .comment-respond h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--qa-text);
    margin: 0 0 20px 0;
    padding: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qa-single #respond h3::before,
.qa-single .comment-respond h3::before {
    content: '✍️';
    font-size: 18px;
}

.qa-single #respond .comment-form-comment label,
.qa-single .comment-respond .comment-form-comment label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--qa-text-subtle);
    margin-bottom: 8px;
}

.qa-single #respond textarea,
.qa-single .comment-respond textarea,
.qa-single #respond input[type="text"],
.qa-single #respond input[type="email"],
.qa-single #respond input[type="url"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-md);
    font-size: 15px;
    line-height: 1.5;
    font-family: inherit;
    color: var(--qa-text);
    background: var(--qa-bg);
    transition: border-color var(--qa-transition),
                box-shadow var(--qa-transition);
    box-sizing: border-box;
    max-width: 100%;
}

.qa-single #respond textarea {
    min-height: 140px;
    resize: vertical;
}

.qa-single #respond input[type="text"]:focus,
.qa-single #respond input[type="email"]:focus,
.qa-single #respond input[type="url"]:focus,
.qa-single #respond textarea:focus {
    outline: none;
    border-color: var(--qa-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.qa-single #respond .form-submit {
    margin: 16px 0 0 0;
}

.qa-single #respond input[type="submit"],
.qa-single #respond button[type="submit"],
.qa-single .qa-submit-answer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-secondary));
    color: #ffffff;
    border: none;
    border-radius: var(--qa-radius-pill);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    transition: transform var(--qa-transition),
                box-shadow var(--qa-transition);
    white-space: nowrap;
}

.qa-single #respond input[type="submit"]:hover,
.qa-single #respond button[type="submit"]:hover,
.qa-single .qa-submit-answer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.qa-single #respond input[type="submit"]:active,
.qa-single #respond button[type="submit"]:active {
    transform: translateY(0) scale(0.98);
}

/* Login required message */
.qa-single .qa-login-required {
    padding: 20px 24px;
    background: var(--qa-primary-pale);
    border: 1px solid var(--qa-primary-light);
    border-left: 4px solid var(--qa-primary);
    border-radius: var(--qa-radius-md);
    color: var(--qa-primary-dark);
    font-size: 14px;
    line-height: 1.6;
    margin: 20px 0;
}

.qa-single .qa-login-required a {
    color: var(--qa-primary-dark);
    font-weight: 700;
    text-decoration: underline;
}

/* ============================================
   RELATED QUESTIONS
   ============================================ */

.qa-single .qa-related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 2px solid var(--qa-border);
}

.qa-single .qa-related-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--qa-text);
    margin: 0 0 20px 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qa-single .qa-related-title::before {
    content: '🔗';
    font-size: 18px;
}

.qa-single .qa-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.qa-single .qa-related-item {
    background: var(--qa-card-bg);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-md);
    transition: border-color var(--qa-transition),
                transform var(--qa-transition),
                box-shadow var(--qa-transition);
    min-width: 0;
    overflow: hidden;
}

.qa-single .qa-related-item:hover {
    border-color: var(--qa-primary);
    transform: translateY(-2px);
    box-shadow: var(--qa-shadow-md);
}

.qa-single .qa-related-item a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.qa-single .qa-related-item-title {
    display: -webkit-box;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--qa-text);
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.qa-single .qa-related-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--qa-text-muted);
    flex-wrap: wrap;
    line-height: 1.4;
}

.qa-single .qa-related-item-meta .qa-related-answers {
    color: var(--qa-primary);
    font-weight: 600;
}

/* ============================================
   FOCUS STATES (accessibility)
   ============================================ */

.qa-single a:focus-visible,
.qa-single button:focus-visible {
    outline: 2px solid var(--qa-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   SCREEN-READER ONLY
   ============================================ */

.qa-single .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   RESPONSIVE — Large desktop (1200px+)
   ============================================ */

@media screen and (min-width: 1200px) {
    .qa-single {
        padding: 32px 24px 80px;
    }

    .qa-single .qa-related-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================
   RESPONSIVE — Tablet (max 1024px)
   ============================================ */

@media screen and (max-width: 1024px) {
    .qa-single {
        padding: 22px 18px 50px;
    }

    .qa-single .qa-question-body {
        padding: 18px 20px;
    }

    .qa-single .qa-answer {
        padding: 18px 20px;
    }

    .qa-single .qa-answer.qa-best-answer {
        padding-left: 20px;
    }
}

/* ============================================
   RESPONSIVE — Tablet portrait (max 768px)
   ============================================ */

@media screen and (max-width: 768px) {
    .qa-single {
        padding: 18px 15px 40px;
        --qa-content-size: 16px;
    }

    .qa-single .entry-title {
        font-size: clamp(22px, 6vw, 28px);
    }

    .qa-single .qa-meta {
        font-size: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .qa-single .qa-question-body {
        padding: 16px 18px;
        font-size: 15px;
        line-height: 1.7;
    }

    .qa-single .qa-answers-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .qa-single .qa-answer {
        padding: 16px 18px;
    }

    .qa-single .qa-answer.qa-best-answer {
        padding-left: 18px;
    }

    .qa-single .qa-answer-body {
        font-size: 15px;
        line-height: 1.65;
    }

    .qa-single .qa-answer-avatar {
        width: 38px;
        height: 38px;
    }

    .qa-single .qa-share {
        justify-content: flex-start;
    }

    .qa-single .qa-share a,
    .qa-single .qa-share button {
        padding: 6px 12px;
        font-size: 12px;
    }

    .qa-single .qa-related-list {
        grid-template-columns: 1fr;
    }

    .qa-single #respond {
        padding: 20px 18px;
    }
}

/* ============================================
   RESPONSIVE — Small mobile (max 480px)
   ============================================ */

@media screen and (max-width: 480px) {
    .qa-single {
        padding: 14px 12px 32px;
        --qa-content-size: 15px;
    }

    .qa-single .entry-title {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .qa-single .qa-meta {
        font-size: 11px;
        padding-bottom: 12px;
        margin-bottom: 18px;
        gap: 5px;
    }

    .qa-single .qa-status-badge,
    .qa-single .qa-difficulty-badge,
    .qa-single .qa-views-badge,
    .qa-single .qa-author-reputation {
        font-size: 10px;
        padding: 3px 10px;
    }

    .qa-single .qa-qid-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    .qa-single .qa-translations {
        font-size: 10.5px;
    }

    .qa-single .qa-translations a {
        font-size: 10.5px;
        padding: 2px 6px;
    }

    .qa-single .qa-status-banner {
        padding: 10px 14px;
        font-size: 12.5px;
    }

    .qa-single .qa-status-banner-icon {
        font-size: 18px;
    }

    .qa-single .qa-question-body {
        padding: 14px 16px;
        border-left-width: 3px;
        font-size: 14px;
    }

    .qa-single .qa-answers-title {
        font-size: 18px;
    }

    .qa-single .qa-answers-count {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .qa-single .qa-answer {
        padding: 14px 14px;
        border-radius: var(--qa-radius-md);
    }

    .qa-single .qa-answer.qa-best-answer {
        padding-left: 14px;
        border-left-width: 5px;
    }

    .qa-single .qa-answer-avatar {
        width: 32px;
        height: 32px;
    }

    .qa-single .qa-answer-author {
        font-size: 13px;
    }

    .qa-single .qa-answer-body {
        font-size: 14px;
    }

    .qa-single .qa-answer-action {
        padding: 4px 10px;
        font-size: 11px;
    }

    .qa-single .qa-best-answer-ribbon {
        left: 14px;
        font-size: 10px;
        padding: 3px 10px;
    }

    .qa-single .qa-answer-reputation {
        font-size: 9px;
        padding: 2px 6px;
    }

    .qa-single .qa-share {
        margin-top: 28px;
        padding-top: 18px;
        gap: 6px;
    }

    .qa-single .qa-share a,
    .qa-single .qa-share button {
        padding: 5px 10px;
        font-size: 11px;
    }

    .qa-single #respond {
        padding: 16px 14px;
    }

    .qa-single #respond h3 {
        font-size: 17px;
    }

    .qa-single #respond textarea {
        min-height: 110px;
        font-size: 14px;
    }

    .qa-single #respond input[type="submit"] {
        padding: 10px 22px;
        font-size: 13px;
        width: 100%;
        justify-content: center;
    }
}

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

@media (prefers-color-scheme: dark) {
    .qa-single {
        --qa-text: #f1f5f9;
        --qa-text-subtle: #e2e8f0;
        --qa-text-body: #cbd5e1;
        --qa-text-muted: #94a3b8;
        --qa-text-faint: #64748b;

        --qa-bg: #0f172a;
        --qa-bg-subtle: #1e293b;
        --qa-bg-muted: #1e293b;
        --qa-card-bg: #1e293b;
        --qa-answer-bg: #1e293b;
        --qa-best-answer-bg: #14532d;
        --qa-border: #334155;
        --qa-border-subtle: #1e293b;
        --qa-quote-bg: #1e293b;
        --qa-code-bg: #1e293b;

        --qa-link: #60a5fa;
        --qa-link-hover: #93bbfc;

        --qa-primary-light: #1e3a8a;
        --qa-primary-pale: #172554;

        --qa-open-bg: #1e3a8a;
        --qa-open: #bfdbfe;
        --qa-answered-bg: #14532d;
        --qa-answered: #86efac;
        --qa-closed-bg: #334155;
        --qa-closed: #cbd5e1;

        --qa-easy-bg: #14532d;
        --qa-easy-text: #86efac;
        --qa-medium-bg: #78350f;
        --qa-medium-text: #fcd34d;
        --qa-hard-bg: #7f1d1d;
        --qa-hard-text: #fca5a5;

        --qa-success-light: #14532d;
        --qa-success-border: #15803d;

        /* Reputation dark mode */
        --qa-rep-trusted-bg: #14532d;
        --qa-rep-trusted-text: #86efac;
        --qa-rep-standard-bg: #78350f;
        --qa-rep-standard-text: #fcd34d;
        --qa-rep-restricted-bg: #7c2d12;
        --qa-rep-restricted-text: #fdba74;
        --qa-rep-blocked-bg: #7f1d1d;
        --qa-rep-blocked-text: #fca5a5;
    }

    .qa-single .entry-title {
        color: #f1f5f9;
    }

    .qa-single .qa-meta {
        color: #94a3b8;
        border-bottom-color: #334155;
    }

    .qa-single .qa-meta a {
        color: #60a5fa;
    }

    .qa-single .qa-meta a:hover {
        color: #93bbfc;
    }

    .qa-single .qa-meta time {
        color: #e2e8f0;
    }

    .qa-single .qa-question-body {
        background: #1e293b;
        color: #cbd5e1;
    }

    .qa-single .qa-question-body h2,
    .qa-single .qa-question-body h3,
    .qa-single .qa-question-body h4 {
        color: #f1f5f9;
    }

    .qa-single .qa-question-body blockquote {
        background: #0f172a;
    }

    .qa-single .qa-question-body code {
        background: #0f172a;
        color: #fbbf24;
    }

    .qa-single .qa-question-body pre {
        background: #0f172a;
    }

    .qa-single .qa-question-body th {
        background: #0f172a;
        color: #f1f5f9;
    }

    .qa-single .qa-question-body th,
    .qa-single .qa-question-body td {
        border-color: #334155;
    }

    .qa-single .qa-answer {
        background: #1e293b;
        border-color: #334155;
    }

    .qa-single .qa-answer:hover {
        border-color: #475569;
    }

    .qa-single .qa-answer.qa-best-answer {
        background: #14532d;
        border-color: #15803d;
        border-left-color: #22c55e;
    }

    .qa-single .qa-answer-header {
        border-bottom-color: #334155;
    }

    .qa-single .qa-answer.qa-best-answer .qa-answer-header {
        border-bottom-color: rgba(34, 197, 94, 0.25);
    }

    .qa-single .qa-answer-author {
        color: #f1f5f9;
    }

    .qa-single .qa-answer-author a {
        color: #f1f5f9;
    }

    .qa-single .qa-answer-author a:hover {
        color: #60a5fa;
    }

    .qa-single .qa-answer-body {
        color: #cbd5e1;
    }

    .qa-single .qa-answer-body code {
        background: #0f172a;
        color: #fbbf24;
    }

    .qa-single .qa-answer-body pre {
        background: #0f172a;
    }

    .qa-single .qa-answer-body blockquote {
        background: #0f172a;
    }

    .qa-single .qa-answer-footer {
        border-top-color: #334155;
    }

    .qa-single .qa-answer.qa-best-answer .qa-answer-footer {
        border-top-color: rgba(34, 197, 94, 0.25);
    }

    .qa-single .qa-answer-action {
        border-color: #475569;
        color: #94a3b8;
    }

    .qa-single .qa-answer-action:hover {
        background: #334155;
        border-color: #64748b;
        color: #f1f5f9;
    }

    .qa-single .qa-no-answers {
        background: #1e293b;
        border-color: #334155;
    }

    .qa-single .qa-no-answers-text {
        color: #94a3b8;
    }

    .qa-single .qa-share {
        border-top-color: #334155;
    }

    .qa-single .qa-share .share-label {
        color: #94a3b8;
    }

    .qa-single .qa-related {
        border-top-color: #334155;
    }

    .qa-single .qa-related-item {
        background: #1e293b;
        border-color: #334155;
    }

    .qa-single .qa-related-item-title {
        color: #f1f5f9;
    }

    .qa-single #respond {
        background: #1e293b;
        border-color: #334155;
    }

    .qa-single #respond h3 {
        color: #f1f5f9;
    }

    .qa-single #respond textarea,
    .qa-single #respond input[type="text"],
    .qa-single #respond input[type="email"],
    .qa-single #respond input[type="url"] {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .qa-single .qa-login-required {
        background: #172554;
        border-color: #1e3a8a;
        color: #bfdbfe;
    }

    .qa-single .qa-login-required a {
        color: #93bbfc;
    }

    .qa-single .qa-tag {
        background: #1e3a8a;
        color: #bfdbfe;
    }

    .qa-single .qa-tag:hover {
        background: #2563eb;
        color: #ffffff;
    }

    .qa-single .qa-qid-badge {
        background: #1e293b;
        border-color: #334155;
        color: #94a3b8;
    }

    .qa-single .qa-qid-badge:hover {
        background: #1e3a8a;
        color: #bfdbfe;
    }

    .qa-single .qa-translations a {
        background: #1e293b;
        border-color: #334155;
        color: #60a5fa;
    }

    .qa-single .qa-translations a:hover {
        background: #1e3a8a;
        border-color: #2563eb;
        color: #bfdbfe;
    }

    .qa-single .qa-status-banner-count {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .qa-single *,
    .qa-single *::before,
    .qa-single *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .qa-single .qa-answer:hover {
        transform: none;
    }

    .qa-single .qa-related-item:hover {
        transform: none;
    }

    .qa-single .qa-share a:hover,
    .qa-single .qa-share button:hover {
        transform: none;
    }

    .qa-single #respond input[type="submit"]:hover {
        transform: none;
    }
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .qa-single {
        max-width: 100%;
        padding: 0;
        background: #ffffff;
        color: #000000;
        --qa-content-size: 12pt;
        --qa-content-line-height: 1.5;
    }

    .qa-single .entry-title {
        font-size: 20pt;
        page-break-after: avoid;
        color: #000000;
    }

    .qa-single .qa-meta {
        color: #333333;
        border-bottom-color: #cccccc;
    }

    .qa-single .qa-meta a {
        color: #000000;
        text-decoration: none;
    }

    .qa-single .qa-status-badge,
    .qa-single .qa-difficulty-badge,
    .qa-single .qa-views-badge,
    .qa-single .qa-author-reputation,
    .qa-single .qa-answer-reputation,
    .qa-single .qa-qid-badge {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
    }

    .qa-single .qa-status-banner {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #666666 !important;
    }

    .qa-single .qa-question-body {
        background: #f5f5f5;
        border-left-color: #000000;
        color: #000000;
    }

    .qa-single .qa-answer {
        background: #ffffff;
        border: 1px solid #cccccc;
        page-break-inside: avoid;
        box-shadow: none;
    }

    .qa-single .qa-answer.qa-best-answer {
        background: #f0f0f0;
        border: 2px solid #000000;
        border-left-width: 6px;
    }

    .qa-single .qa-best-answer-ribbon {
        background: #000000 !important;
        color: #ffffff !important;
    }

    .qa-single .qa-answer-body,
    .qa-single .qa-question-body {
        color: #000000;
    }

    .qa-single .qa-answer-body a,
    .qa-single .qa-question-body a {
        color: #000000;
        text-decoration: underline;
    }

    .qa-single .qa-answer-body a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
        color: #555555;
    }

    .qa-single .qa-answer-body img,
    .qa-single .qa-question-body img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    .qa-single .qa-answer-body h2,
    .qa-single .qa-answer-body h3,
    .qa-single .qa-question-body h2,
    .qa-single .qa-question-body h3 {
        page-break-after: avoid;
    }

    .qa-single .qa-share,
    .qa-single #respond,
    .qa-single .qa-answer-actions {
        display: none;
    }

    .qa-single .qa-related {
        page-break-before: always;
    }

    .qa-single .qa-related-item {
        background: #ffffff;
        border-color: #cccccc;
    }

    .qa-single .qa-answer-avatar {
        display: none;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: more) {
    .qa-single .qa-question-body a,
    .qa-single .qa-answer-body a {
        text-decoration-thickness: 2px;
    }

    .qa-single .qa-meta a {
        text-decoration: underline;
    }

    .qa-single a:focus-visible,
    .qa-single button:focus-visible {
        outline-width: 3px;
    }

    .qa-single .qa-answer {
        border-width: 2px;
    }

    .qa-single .qa-answer.qa-best-answer {
        border-width: 3px;
        border-left-width: 8px;
    }

    .qa-single .qa-status-banner {
        border-width: 2px;
    }
}

/* ============================================
   ✅ END OF FILE
   ============================================ */