body {
        font-family: Arial, sans-serif;
        background-color: #F5E6FF; /* لون الخلفية مشتق من Light Violet */
        color: #333;
        text-align: center;
        padding: 10px;
        margin: 0;
    }

    .container {
        max-width: 100%;
        margin: 0 auto;
        background: #FFF5FF; /* خلفية فاتحة */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

.floating-back-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #CF9FFF;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 15px;
    font-size: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
}



.floating-back-button:hover {
    background-color: #A67FFF;
}


    h1, h2 {
        color: #000 !important; /* العناوين باللون الأسود */
        font-weight: bold;
        font-size: 1.8em;
    }

    button {
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 12px;
        font-size: 1em;
        background-color: #CF9FFF; /* Light Violet */
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
    }

    button:hover {
        background-color: #A67FFF; /* Violet أغمق قليلاً */
    }

    .hidden {
        display: none;
    }

    .back-button {
        background-color: #9B59B6; /* Violet */
    }

    .back-button:hover {
        background-color: #6C3483; /* Violet أغمق */
    }

    .option {
        text-align: left;
        padding: 15px;
        margin: 5px 0;
        background-color: #F5E6FF; /* خلفية فاتحة */
        border: 1px solid #CF9FFF; /* Violet */
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        color: #000 !important; /* لون النص أسود */
        font-size: 1.1em;
    }

   .option:hover {
    background-color: #ddd;
}

.option.correct {
    background-color: #28a745; /* أخضر للإجابة الصحيحة */
    color: white;
}

.option.incorrect {
    background-color: #dc3545; /* أحمر للإجابة الخاطئة */
    color: white;
}
    .small-button {
        font-size: 1.2em;
        padding: 10px;
        background-color: #CF9FFF; /* Light Violet */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
    }

    .small-button:hover {
        background-color: #A67FFF; /* Violet أغمق قليلاً */
    }

    .progress-container {
        width: 100%;
        background-color: #E3BFFF; /* خلفية شريط التقدم */
        border-radius: 5px;
        margin-bottom: 20px;
        height: 25px;
        position: relative;
    }

    .progress-bar {
        height: 100%;
        background-color: #9B59B6; /* اللون الرئيسي لشريط التقدم */
        width: 0%;
        border-radius: 5px;
        text-align: center;
        color: white;
        line-height: 25px;
        font-weight: bold;
        font-size: 1em;
    }
    .essay-answer {
  /* إذا كنت تستخدم خلفية فاتحة */
  background: #e6f9e6;
  /* أو فقط لون الخط */
  color: #2e7d32;
  padding: 0.6em;
  border-radius: 4px;
  margin: 0.5em 0 1em 1em;
}

#english-only-buttons {
  display: none;
}

/* تظهر الإجابة فقط عند إضافة الصنف visible */
.essay-answer.visible {
  display: block; /* أو inline-block */
}

    /* استجابة للتصميم عند الأجهزة الصغيرة */
    @media (max-width: 768px) {
        .container {
            padding: 15px;
        }

        button {
            font-size: 1em;
            padding: 10px;
        }

        h1, h2 {
            font-size: 1.5em;
        }

        .option {
            font-size: 1em;
            padding: 10px;
        }

        .small-button {
            font-size: 1em;
            padding: 8px;
        }
    }

/* =====================================================================
   Student Theme Switcher (Stage 4) — additive only.
   Nothing above this line is modified. Everything below layers on top
   via CSS variables + body.theme-* classes, appended later in the
   cascade so it takes precedence without touching original rules.
   Default values below match the ORIGINAL hardcoded colors exactly,
   so with no theme class (or "default") the app looks unchanged.
   ===================================================================== */

:root {
    --q9-bg: #F5E6FF;
    --q9-container-bg: #FFF5FF;
    --q9-text: #333;
    --q9-heading: #000;
    --q9-btn-bg: #CF9FFF;
    --q9-btn-text: #fff;
    --q9-btn-hover: #A67FFF;
    --q9-backbtn-bg: #9B59B6;
    --q9-backbtn-hover: #6C3483;
    --q9-option-bg: #F5E6FF;
    --q9-option-border: #CF9FFF;
    --q9-option-text: #000;
    --q9-option-hover: #ddd;
    --q9-progress-track: #E3BFFF;
    --q9-progress-fill: #9B59B6;
    --q9-progress-text: #fff;
    --q9-essay-bg: #e6f9e6;
    --q9-essay-text: #2e7d32;
    --q9-shadow: rgba(0, 0, 0, 0.1);
}

/* Generic rules that consume the variables above. Same selectors as the
   original rules, appended later => win the cascade for every theme,
   including the default one (fallback values = original colors). */
body { background-color: var(--q9-bg); color: var(--q9-text); }
.container { background: var(--q9-container-bg); box-shadow: 0 4px 8px var(--q9-shadow); }
h1, h2 { color: var(--q9-heading) !important; }
button { background-color: var(--q9-btn-bg); color: var(--q9-btn-text); }
button:hover { background-color: var(--q9-btn-hover); }
.back-button { background-color: var(--q9-backbtn-bg); }
.back-button:hover { background-color: var(--q9-backbtn-hover); }
.small-button { background-color: var(--q9-btn-bg); color: var(--q9-btn-text); }
.small-button:hover { background-color: var(--q9-btn-hover); }
.option { background-color: var(--q9-option-bg); border-color: var(--q9-option-border); color: var(--q9-option-text) !important; }
.option:hover { background-color: var(--q9-option-hover); }
.progress-container { background-color: var(--q9-progress-track); }
.progress-bar { background-color: var(--q9-progress-fill); color: var(--q9-progress-text); }
.essay-answer { background: var(--q9-essay-bg); color: var(--q9-essay-text); }

/* Correct/incorrect/selected feedback is intentionally NOT themed here —
   .option.correct / .option.incorrect keep their original hardcoded
   green/red background from the rules above (this file, lines ~96-104),
   and the live quiz's checkAnswer() sets inline style.backgroundColor
   directly, which always wins over any CSS rule regardless of theme.
   The generic ".option { color: ... !important }" rule above would
   otherwise win over ".option.correct/.incorrect { color: white }" (an
   !important rule always beats a higher-specificity non-!important
   rule), so pin the text color back to white explicitly here. */
.option.correct,
.option.incorrect {
    color: white !important;
}

/* ---------- Per-theme variable overrides ---------- */
body.theme-dark {
    --q9-bg: #0f172a; --q9-container-bg: #1e293b; --q9-text: #e2e8f0; --q9-heading: #ffffff;
    --q9-btn-bg: #6366f1; --q9-btn-text: #fff; --q9-btn-hover: #4f46e5;
    --q9-backbtn-bg: #334155; --q9-backbtn-hover: #1e293b;
    --q9-option-bg: #1e293b; --q9-option-border: #475569; --q9-option-text: #e2e8f0; --q9-option-hover: #334155;
    --q9-progress-track: #334155; --q9-progress-fill: #6366f1; --q9-progress-text: #fff;
    --q9-essay-bg: #14532d; --q9-essay-text: #86efac; --q9-shadow: rgba(0,0,0,0.5);
}
body.theme-light {
    --q9-bg: #f8fafc; --q9-container-bg: #ffffff; --q9-text: #1e293b; --q9-heading: #0f172a;
    --q9-btn-bg: #3b82f6; --q9-btn-text: #fff; --q9-btn-hover: #2563eb;
    --q9-backbtn-bg: #64748b; --q9-backbtn-hover: #475569;
    --q9-option-bg: #f1f5f9; --q9-option-border: #cbd5e1; --q9-option-text: #1e293b; --q9-option-hover: #e2e8f0;
    --q9-progress-track: #e2e8f0; --q9-progress-fill: #3b82f6; --q9-progress-text: #fff;
    --q9-essay-bg: #dcfce7; --q9-essay-text: #166534; --q9-shadow: rgba(0,0,0,0.08);
}
body.theme-blue {
    --q9-bg: #eff6ff; --q9-container-bg: #ffffff; --q9-text: #1e3a5f; --q9-heading: #0c4a6e;
    --q9-btn-bg: #0ea5e9; --q9-btn-text: #fff; --q9-btn-hover: #0284c7;
    --q9-backbtn-bg: #0369a1; --q9-backbtn-hover: #075985;
    --q9-option-bg: #e0f2fe; --q9-option-border: #7dd3fc; --q9-option-text: #0c4a6e; --q9-option-hover: #bae6fd;
    --q9-progress-track: #bae6fd; --q9-progress-fill: #0ea5e9; --q9-progress-text: #fff;
    --q9-essay-bg: #dbeafe; --q9-essay-text: #1e40af; --q9-shadow: rgba(14,165,233,0.15);
}
body.theme-purple {
    --q9-bg: #f5f0ff; --q9-container-bg: #ffffff; --q9-text: #3b2465; --q9-heading: #2e1a47;
    --q9-btn-bg: #8b5cf6; --q9-btn-text: #fff; --q9-btn-hover: #7c3aed;
    --q9-backbtn-bg: #6d28d9; --q9-backbtn-hover: #5b21b6;
    --q9-option-bg: #ede9fe; --q9-option-border: #c4b5fd; --q9-option-text: #2e1a47; --q9-option-hover: #ddd6fe;
    --q9-progress-track: #ddd6fe; --q9-progress-fill: #8b5cf6; --q9-progress-text: #fff;
    --q9-essay-bg: #ede9fe; --q9-essay-text: #5b21b6; --q9-shadow: rgba(139,92,246,0.15);
}
body.theme-green {
    --q9-bg: #f0fdf4; --q9-container-bg: #ffffff; --q9-text: #14532d; --q9-heading: #052e16;
    --q9-btn-bg: #22c55e; --q9-btn-text: #fff; --q9-btn-hover: #16a34a;
    --q9-backbtn-bg: #15803d; --q9-backbtn-hover: #166534;
    --q9-option-bg: #dcfce7; --q9-option-border: #86efac; --q9-option-text: #14532d; --q9-option-hover: #bbf7d0;
    --q9-progress-track: #bbf7d0; --q9-progress-fill: #22c55e; --q9-progress-text: #fff;
    --q9-essay-bg: #d1fae5; --q9-essay-text: #065f46; --q9-shadow: rgba(34,197,94,0.15);
}
body.theme-high-contrast {
    --q9-bg: #000000; --q9-container-bg: #000000; --q9-text: #ffffff; --q9-heading: #ffff00;
    --q9-btn-bg: #ffff00; --q9-btn-text: #000000; --q9-btn-hover: #ffffff;
    --q9-backbtn-bg: #ffffff; --q9-backbtn-hover: #ffff00;
    --q9-option-bg: #000000; --q9-option-border: #ffffff; --q9-option-text: #ffffff; --q9-option-hover: #333333;
    --q9-progress-track: #333333; --q9-progress-fill: #ffff00; --q9-progress-text: #000000;
    --q9-essay-bg: #003300; --q9-essay-text: #00ff00; --q9-shadow: rgba(255,255,0,0.3);
}
body.theme-high-contrast .option { border-width: 2px; }
body.theme-soft-pink {
    --q9-bg: #fff5f7; --q9-container-bg: #fffafb; --q9-text: #5c2a3a; --q9-heading: #7a3b52;
    --q9-btn-bg: #f472b6; --q9-btn-text: #fff; --q9-btn-hover: #ec4899;
    --q9-backbtn-bg: #db2777; --q9-backbtn-hover: #be185d;
    --q9-option-bg: #fce7f3; --q9-option-border: #f9a8d4; --q9-option-text: #5c2a3a; --q9-option-hover: #fbcfe8;
    --q9-progress-track: #fbcfe8; --q9-progress-fill: #f472b6; --q9-progress-text: #fff;
    --q9-essay-bg: #fce7f3; --q9-essay-text: #9d174d; --q9-shadow: rgba(244,114,182,0.15);
}
body.theme-rose-gold {
    --q9-bg: #fdf2f0; --q9-container-bg: #fffaf8; --q9-text: #6b3a35; --q9-heading: #8c4a3f;
    --q9-btn-bg: #e0a899; --q9-btn-text: #4a2b25; --q9-btn-hover: #d18f7e;
    --q9-backbtn-bg: #b76e5c; --q9-backbtn-hover: #9c5a4a;
    --q9-option-bg: #f7e4de; --q9-option-border: #e0a899; --q9-option-text: #6b3a35; --q9-option-hover: #f0d0c6;
    --q9-progress-track: #f0d0c6; --q9-progress-fill: #e0a899; --q9-progress-text: #4a2b25;
    --q9-essay-bg: #f7e4de; --q9-essay-text: #8c4a3f; --q9-shadow: rgba(224,168,153,0.2);
}
body.theme-lavender {
    --q9-bg: #f5f3ff; --q9-container-bg: #fdfcff; --q9-text: #433a5c; --q9-heading: #544a75;
    --q9-btn-bg: #a78bfa; --q9-btn-text: #fff; --q9-btn-hover: #8b5cf6;
    --q9-backbtn-bg: #7c6ba8; --q9-backbtn-hover: #63578a;
    --q9-option-bg: #ede9fe; --q9-option-border: #c4b5fd; --q9-option-text: #433a5c; --q9-option-hover: #ddd6fe;
    --q9-progress-track: #ddd6fe; --q9-progress-fill: #a78bfa; --q9-progress-text: #fff;
    --q9-essay-bg: #ede9fe; --q9-essay-text: #5b4f8a; --q9-shadow: rgba(167,139,250,0.15);
}
body.theme-soft-purple {
    --q9-bg: #f8f5fc; --q9-container-bg: #fffdff; --q9-text: #4a3b5c; --q9-heading: #5c4a75;
    --q9-btn-bg: #c4a3e0; --q9-btn-text: #3b2b52; --q9-btn-hover: #b18cd6;
    --q9-backbtn-bg: #9d7cbf; --q9-backbtn-hover: #8567a8;
    --q9-option-bg: #f0e6f9; --q9-option-border: #d4b8ec; --q9-option-text: #4a3b5c; --q9-option-hover: #e6d4f5;
    --q9-progress-track: #e6d4f5; --q9-progress-fill: #c4a3e0; --q9-progress-text: #3b2b52;
    --q9-essay-bg: #f0e6f9; --q9-essay-text: #6b4f8a; --q9-shadow: rgba(196,163,224,0.15);
}
body.theme-mint {
    --q9-bg: #f0fdfa; --q9-container-bg: #ffffff; --q9-text: #134e4a; --q9-heading: #0f3d3a;
    --q9-btn-bg: #2dd4bf; --q9-btn-text: #fff; --q9-btn-hover: #14b8a6;
    --q9-backbtn-bg: #0d9488; --q9-backbtn-hover: #0f766e;
    --q9-option-bg: #ccfbf1; --q9-option-border: #5eead4; --q9-option-text: #134e4a; --q9-option-hover: #99f6e4;
    --q9-progress-track: #99f6e4; --q9-progress-fill: #2dd4bf; --q9-progress-text: #fff;
    --q9-essay-bg: #d1fae5; --q9-essay-text: #065f46; --q9-shadow: rgba(45,212,191,0.15);
}
body.theme-sky {
    --q9-bg: #f0f9ff; --q9-container-bg: #ffffff; --q9-text: #0c4a6e; --q9-heading: #075985;
    --q9-btn-bg: #38bdf8; --q9-btn-text: #fff; --q9-btn-hover: #0ea5e9;
    --q9-backbtn-bg: #0284c7; --q9-backbtn-hover: #0369a1;
    --q9-option-bg: #e0f2fe; --q9-option-border: #7dd3fc; --q9-option-text: #0c4a6e; --q9-option-hover: #bae6fd;
    --q9-progress-track: #bae6fd; --q9-progress-fill: #38bdf8; --q9-progress-text: #fff;
    --q9-essay-bg: #dbeafe; --q9-essay-text: #1e40af; --q9-shadow: rgba(56,189,248,0.15);
}
body.theme-cream {
    --q9-bg: #fdf8ee; --q9-container-bg: #fffdf7; --q9-text: #5c4a2f; --q9-heading: #7a5f3a;
    --q9-btn-bg: #e0b070; --q9-btn-text: #4a2f1a; --q9-btn-hover: #d19c52;
    --q9-backbtn-bg: #c08840; --q9-backbtn-hover: #a3702f;
    --q9-option-bg: #faf0dc; --q9-option-border: #e6c98a; --q9-option-text: #5c4a2f; --q9-option-hover: #f5e4c2;
    --q9-progress-track: #f5e4c2; --q9-progress-fill: #e0b070; --q9-progress-text: #4a2f1a;
    --q9-essay-bg: #faf0dc; --q9-essay-text: #8a6a2f; --q9-shadow: rgba(224,176,112,0.2);
}
body.theme-night-purple {
    --q9-bg: #1a1229; --q9-container-bg: #241934; --q9-text: #d8c9f0; --q9-heading: #f0e6ff;
    --q9-btn-bg: #8b5cf6; --q9-btn-text: #fff; --q9-btn-hover: #a78bfa;
    --q9-backbtn-bg: #4c3575; --q9-backbtn-hover: #3b2a5c;
    --q9-option-bg: #2d2145; --q9-option-border: #5b3d8a; --q9-option-text: #d8c9f0; --q9-option-hover: #3b2a5c;
    --q9-progress-track: #3b2a5c; --q9-progress-fill: #8b5cf6; --q9-progress-text: #fff;
    --q9-essay-bg: #1f3a2e; --q9-essay-text: #86efac; --q9-shadow: rgba(0,0,0,0.5);
}
body.theme-sakura {
    --q9-bg: #fff6f8; --q9-container-bg: #fffbfc; --q9-text: #6b3a4a; --q9-heading: #8c4a5f;
    --q9-btn-bg: #f8b4c8; --q9-btn-text: #5c2438; --q9-btn-hover: #f39cb5;
    --q9-backbtn-bg: #e08aa3; --q9-backbtn-hover: #c96f8a;
    --q9-option-bg: #ffeef3; --q9-option-border: #f9c8d6; --q9-option-text: #6b3a4a; --q9-option-hover: #fddce6;
    --q9-progress-track: #fddce6; --q9-progress-fill: #f8b4c8; --q9-progress-text: #5c2438;
    --q9-essay-bg: #ffeef3; --q9-essay-text: #9d5169; --q9-shadow: rgba(248,180,200,0.2);
}
body.theme-cute-rose {
    --q9-bg: #fff0f6; --q9-container-bg: #fffafc; --q9-text: #6b2140; --q9-heading: #8a2b53;
    --q9-btn-bg: #ff6f9c; --q9-btn-text: #fff; --q9-btn-hover: #ff4785;
    --q9-backbtn-bg: #e0396f; --q9-backbtn-hover: #c22a5c;
    --q9-option-bg: #ffe0ec; --q9-option-border: #ffa8c5; --q9-option-text: #6b2140; --q9-option-hover: #ffc8dd;
    --q9-progress-track: #ffc8dd; --q9-progress-fill: #ff6f9c; --q9-progress-text: #fff;
    --q9-essay-bg: #ffe0ec; --q9-essay-text: #9d174d; --q9-shadow: rgba(255,111,156,0.2);
}
body.theme-butterfly-lavender {
    --q9-bg: #f6f0ff; --q9-container-bg: #fdfaff; --q9-text: #4a3a6b; --q9-heading: #5c4a8a;
    --q9-btn-bg: #b494e8; --q9-btn-text: #fff; --q9-btn-hover: #9d78dc;
    --q9-backbtn-bg: #8a67c2; --q9-backbtn-hover: #7355a8;
    --q9-option-bg: #ede4fa; --q9-option-border: #cbb3ee; --q9-option-text: #4a3a6b; --q9-option-hover: #ddd0f5;
    --q9-progress-track: #ddd0f5; --q9-progress-fill: #b494e8; --q9-progress-text: #fff;
    --q9-essay-bg: #ede4fa; --q9-essay-text: #6b4f9d; --q9-shadow: rgba(180,148,232,0.2);
}
body.theme-pink-stars {
    --q9-bg: #fdf0f8; --q9-container-bg: #fffafd; --q9-text: #5c2a4a; --q9-heading: #7a3a63;
    --q9-btn-bg: #e879c4; --q9-btn-text: #fff; --q9-btn-hover: #db5cb0;
    --q9-backbtn-bg: #c2429a; --q9-backbtn-hover: #a3357f;
    --q9-option-bg: #fce4f5; --q9-option-border: #f0a8dc; --q9-option-text: #5c2a4a; --q9-option-hover: #f9d0ec;
    --q9-progress-track: #f9d0ec; --q9-progress-fill: #e879c4; --q9-progress-text: #fff;
    --q9-essay-bg: #fce4f5; --q9-essay-text: #9d1785; --q9-shadow: rgba(232,121,196,0.2);
}
body.theme-pink-clouds {
    --q9-bg: #f6f4ff; --q9-container-bg: #fdfeff; --q9-text: #3a4a6b; --q9-heading: #4a5c8a;
    --q9-btn-bg: #a8c8f0; --q9-btn-text: #1a3355; --q9-btn-hover: #8ab0e8;
    --q9-backbtn-bg: #7098d6; --q9-backbtn-hover: #5a7fbf;
    --q9-option-bg: #e8f0fc; --q9-option-border: #c0d8f5; --q9-option-text: #3a4a6b; --q9-option-hover: #d4e4fa;
    --q9-progress-track: #d4e4fa; --q9-progress-fill: #a8c8f0; --q9-progress-text: #1a3355;
    --q9-essay-bg: #e8f0fc; --q9-essay-text: #3355a3; --q9-shadow: rgba(168,200,240,0.2);
}
body.theme-cute-night {
    --q9-bg: #231a35; --q9-container-bg: #2f2347; --q9-text: #e8d8f5; --q9-heading: #f5e8ff;
    --q9-btn-bg: #c88ee0; --q9-btn-text: #2a1a3d; --q9-btn-hover: #d9a5ec;
    --q9-backbtn-bg: #8a5aa8; --q9-backbtn-hover: #6f4589;
    --q9-option-bg: #3a2b52; --q9-option-border: #6b4a8a; --q9-option-text: #e8d8f5; --q9-option-hover: #4a3a63;
    --q9-progress-track: #4a3a63; --q9-progress-fill: #c88ee0; --q9-progress-text: #2a1a3d;
    --q9-essay-bg: #2a3d2f; --q9-essay-text: #a3e0b3; --q9-shadow: rgba(0,0,0,0.4);
}

/* ---------- Special decorative themes (subtle, CSS-only, no images) ---------- */
body.theme-bow-pink {
    --q9-bg: #fff0f5; --q9-container-bg: #fffafc; --q9-text: #6b2c47; --q9-heading: #8c3a5c;
    --q9-btn-bg: #f778a1; --q9-btn-text: #fff; --q9-btn-hover: #ec4d80;
    --q9-backbtn-bg: #d6588a; --q9-backbtn-hover: #b8446f;
    --q9-option-bg: #ffe4ef; --q9-option-border: #f9a8c9; --q9-option-text: #6b2c47; --q9-option-hover: #fdd0e2;
    --q9-progress-track: #fdd0e2; --q9-progress-fill: #f778a1; --q9-progress-text: #fff;
    --q9-essay-bg: #ffe4ef; --q9-essay-text: #9d174d; --q9-shadow: rgba(247,120,161,0.2);
}
body.theme-bow-pink .container {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 14% 12%, rgba(247,120,161,0.10), transparent 42%),
        radial-gradient(circle at 86% 88%, rgba(247,120,161,0.10), transparent 42%);
}
body.theme-bow-pink .container::before,
body.theme-bow-pink .container::after {
    content: "🎀";
    position: absolute;
    font-size: 5rem;
    line-height: 1;
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
}
body.theme-bow-pink .container::before { top: -0.6rem; right: 0.4rem; transform: rotate(12deg); }
body.theme-bow-pink .container::after  { bottom: -0.6rem; left: 0.4rem; transform: rotate(-12deg); }

body.theme-strawberry {
    --q9-bg: #fff0f0; --q9-container-bg: #fffafa; --q9-text: #6b1f24; --q9-heading: #8c2a30;
    --q9-btn-bg: #ef4444; --q9-btn-text: #fff; --q9-btn-hover: #dc2626;
    --q9-backbtn-bg: #b91c1c; --q9-backbtn-hover: #991b1b;
    --q9-option-bg: #fee2e2; --q9-option-border: #fca5a5; --q9-option-text: #6b1f24; --q9-option-hover: #fecaca;
    --q9-progress-track: #fecaca; --q9-progress-fill: #ef4444; --q9-progress-text: #fff;
    --q9-essay-bg: #dcfce7; --q9-essay-text: #166534; --q9-shadow: rgba(239,68,68,0.2);
}
body.theme-strawberry .container {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 12% 14%, rgba(239,68,68,0.09), transparent 42%),
        radial-gradient(circle at 88% 86%, rgba(34,197,94,0.07), transparent 42%);
}
body.theme-strawberry .container::before,
body.theme-strawberry .container::after {
    content: "🍓";
    position: absolute;
    font-size: 5rem;
    line-height: 1;
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
}
body.theme-strawberry .container::before { top: -0.6rem; left: 0.4rem; transform: rotate(-10deg); }
body.theme-strawberry .container::after  { bottom: -0.6rem; right: 0.4rem; transform: rotate(10deg); }

@media (max-width: 768px) {
    body.theme-bow-pink .container::before,
    body.theme-bow-pink .container::after,
    body.theme-strawberry .container::before,
    body.theme-strawberry .container::after {
        font-size: 3rem;
        opacity: 0.08;
    }
}

/* ---------- Theme switcher button + panel ---------- */
.theme-fab-2009 {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 54px;
    height: 54px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--q9-btn-bg);
    color: var(--q9-btn-text);
    font-size: 1.5em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-fab-2009:hover { background-color: var(--q9-btn-hover); }

.theme-panel-2009 {
    position: fixed;
    bottom: 84px;
    left: 20px;
    width: min(320px, calc(100vw - 40px));
    max-height: min(70vh, 520px);
    background: var(--q9-container-bg);
    color: var(--q9-text);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 2001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    direction: rtl;
}
.theme-panel-2009.hidden { display: none; }

.theme-panel-header-2009 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: bold;
    background-color: var(--q9-btn-bg);
    color: var(--q9-btn-text);
}
.theme-panel-close-2009 {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0 6px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.1em;
    cursor: pointer;
}

.theme-choices-2009 {
    padding: 10px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.theme-choice-2009 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid var(--q9-option-border);
    background-color: var(--q9-option-bg);
    color: var(--q9-option-text);
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    text-align: right;
}
.theme-choice-2009:hover { background-color: var(--q9-option-hover); }
.theme-choice-active-2009 {
    outline: 2px solid var(--q9-btn-bg);
    outline-offset: 1px;
}
.theme-check-2009 {
    color: #16a34a;
    font-weight: bold;
}

@media (max-width: 768px) {
    .theme-choices-2009 { grid-template-columns: 1fr; }
    .theme-panel-2009 { left: 10px; bottom: 78px; width: calc(100vw - 20px); }
    .theme-fab-2009 { left: 10px; bottom: 14px; width: 48px; height: 48px; font-size: 1.3em; }
}