ui: replace mode pills with large cards (icon, title, desc, check indicator)

app.py

@@ -486,8 +486,8 @@ BRIDGE_JS = """() => {
   // ── Mode toggle ────────────────────────────────────────────────────────────
   function setMode(m) {
     S.mode = m;
-    $('mode-open-btn')?.classList.toggle('active', m === 'open');
-    $('mode-mcq-btn')?.classList.toggle('active', m === 'mcq');
+    $('mode-open-btn')?.classList.toggle('selected', m === 'open');
+    $('mode-mcq-btn')?.classList.toggle('selected', m === 'mcq');
     S.currentQuestion = ''; S.mcqData = null;
     $('empty-state')?.classList.remove('hidden');
     $('question-area')?.classList.add('hidden');

ui/index.html

@@ -138,7 +138,51 @@
       display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
       margin-bottom: 24px;
     }
-    .controls-row .toggle-group:last-of-type { margin-right: auto; }
+
+    /* ── Mode selector cards ─────────────────────────────────────────────── */
+    .mode-selector {
+      display: flex; gap: 10px; width: 100%; margin-bottom: 20px;
+    }
+    .mode-card {
+      flex: 1; display: flex; align-items: center; gap: 12px;
+      padding: 14px 16px; border-radius: var(--r-sm);
+      border: 2px solid var(--border);
+      background: var(--surface);
+      cursor: pointer; transition: all .2s; text-align: left;
+      font-family: inherit;
+    }
+    .mode-card:hover { border-color: rgba(255,255,255,.2); background: var(--surface-2); }
+    .mode-card.selected {
+      border-color: var(--purple);
+      background: rgba(124,58,237,.12);
+      box-shadow: 0 0 0 1px rgba(124,58,237,.3), 0 4px 16px rgba(124,58,237,.2);
+    }
+    .mode-card-icon {
+      font-size: 1.5rem; flex-shrink: 0;
+      width: 40px; height: 40px;
+      border-radius: 10px; background: rgba(255,255,255,.06);
+      display: flex; align-items: center; justify-content: center;
+      transition: background .2s;
+    }
+    .mode-card.selected .mode-card-icon { background: rgba(124,58,237,.25); }
+    .mode-card-body { flex: 1; }
+    .mode-card-title {
+      font-size: .92rem; font-weight: 700; color: var(--muted);
+      margin-bottom: 2px; transition: color .2s;
+    }
+    .mode-card.selected .mode-card-title { color: var(--text); }
+    .mode-card-desc { font-size: .75rem; color: var(--dim); line-height: 1.3; }
+    .mode-card-check {
+      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
+      border: 2px solid var(--border);
+      display: flex; align-items: center; justify-content: center;
+      font-size: .7rem; color: transparent;
+      transition: all .2s;
+    }
+    .mode-card.selected .mode-card-check {
+      background: var(--purple); border-color: var(--purple); color: #fff;
+    }
+
     .diff-label { font-size: .75rem; color: var(--dim); font-weight: 500;
                   letter-spacing: .04em; margin-bottom: 4px; }
 
@@ -387,6 +431,26 @@
     <!-- ── Quiz card ────────────────────────────────────────────────────── -->
     <div class="card hidden fade-in-up" id="quiz-card" style="animation-delay:.1s">
 
+      <!-- Mode selector -->
+      <div class="mode-selector">
+        <button class="mode-card selected" id="mode-open-btn">
+          <div class="mode-card-icon">✏️</div>
+          <div class="mode-card-body">
+            <div class="mode-card-title">Open Question</div>
+            <div class="mode-card-desc">Write a free-form answer</div>
+          </div>
+          <div class="mode-card-check">✓</div>
+        </button>
+        <button class="mode-card" id="mode-mcq-btn">
+          <div class="mode-card-icon">🎯</div>
+          <div class="mode-card-body">
+            <div class="mode-card-title">Multiple Choice</div>
+            <div class="mode-card-desc">Pick the correct answer</div>
+          </div>
+          <div class="mode-card-check">✓</div>
+        </button>
+      </div>
+
       <!-- Controls row -->
       <div class="controls-row">
         <!-- Score ring -->