Tint quiz choices area light blue

Author: thinksyncs

education/quiz.css

@@ -17,6 +17,9 @@
   --danger:#ff6b6b;
   --shadow:0 12px 30px rgba(2,6,23,.6);
   --choice-hover:linear-gradient(90deg, rgba(78,161,255,0.04), rgba(155,227,127,0.02));
+  --choices-bg:
+    linear-gradient(180deg, rgba(78,161,255,0.08), rgba(255,255,255,0.01)),
+    linear-gradient(180deg,var(--glass),var(--glass-2));
 }
 *{box-sizing:border-box}
 html,body{height:100%}
@@ -76,7 +79,7 @@ details.cheatsheet summary{cursor:pointer;padding:12px 16px;border-radius:14px;b
 .q h4{margin:0;font-size:18px}
 .q .type{font-size:.8rem;color:var(--muted)}
 .q .body{display:grid;gap:12px}
-.choices{display:grid;gap:8px;margin-left:.2rem;padding:12px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,var(--glass),var(--glass-2))}
+.choices{display:grid;gap:8px;margin-left:.2rem;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--choices-bg)}
 .choice{display:flex;gap:10px;align-items:center;padding:12px 12px 12px 46px;border:1px dashed transparent;border-radius:16px;position:relative;min-height:46px;transition:all .18s ease}
 .choice:hover{background:var(--choice-hover);transform:translateY(-3px);box-shadow:0 6px 18px rgba(2,6,23,.45)}
 /* hide native control */
@@ -136,6 +139,9 @@ body[data-theme="light"]{
   --border:rgba(15,23,42,0.12);
   --shadow:0 12px 30px rgba(15,23,42,0.12);
   --choice-hover:linear-gradient(90deg, rgba(37,99,235,0.08), rgba(22,163,74,0.05));
+  --choices-bg:
+    linear-gradient(180deg, rgba(37,99,235,0.08), rgba(255,255,255,0.94)),
+    rgba(255,255,255,0.94);
 }
 body[data-theme="light"] .card{background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.9));border:1px solid rgba(15,23,42,0.1);box-shadow:var(--shadow);color:var(--fg)}
 body[data-theme="light"] .lang-toggle{border:1px solid rgba(15,23,42,0.12);background:rgba(255,255,255,0.8)}
@@ -149,7 +155,7 @@ body[data-theme="light"] .btn.ghost{background:rgba(255,255,255,0.7);color:#1f29
 body[data-theme="light"] .btn.primary{background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#1d4ed8;color:#f8fafc}
 body[data-theme="light"] .btn.success{background:#22c55e;border-color:#16a34a;color:#f0fdf4}
 body[data-theme="light"] .btn.warn{background:#fde68a;border-color:#f59e0b;color:#92400e}
-body[data-theme="light"] .choices{border-color:rgba(15,23,42,0.12);background:rgba(255,255,255,0.95)}
+body[data-theme="light"] .choices{border-color:rgba(15,23,42,0.12);background:var(--choices-bg)}
 body[data-theme="light"] .choice:hover{box-shadow:0 6px 18px rgba(15,23,42,0.12)}
 body[data-theme="light"] .choice::before{background:rgba(0,0,0,0.02);border-color:rgba(15,23,42,0.25)}
 body[data-theme="light"] .choice.correct{border-color:rgba(34,197,94,0.45);background:rgba(34,197,94,0.15)}