fix: segmented mode control was overridden by dead CSS

Two `.custom-test-modes` rule sets survived the earlier rebuild. The later one —
from the radio-card design that the sticky bar replaced — won on source order, so
the control rendered as two oversized separate boxes instead of a segmented pair.
Removed it, along with `.custom-test-actions`, which styled an action row that no
longer exists.

Also tightened the bar: smaller segment padding, and Refresh is now a quiet ↻
affordance rather than a grey slab competing with Create Test.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PpfzbZ1QTLMeVYxM2kyq8m

frontend/src/pages/CustomQuizPage.css

@@ -150,13 +150,20 @@
 .custom-test-modes label { cursor: pointer; }
 .custom-test-modes input { position: absolute; opacity: 0; width: 0; height: 0; }
 .custom-test-modes span {
-  display: block; padding: 9px 18px; font-size: 0.9rem; font-weight: 600;
+  display: block; padding: 7px 14px; font-size: 0.85rem; font-weight: 600;
   color: var(--text-muted); background: var(--card-bg); white-space: nowrap;
 }
 .custom-test-modes label + label span { border-left: 1px solid var(--border); }
 .custom-test-modes input:checked + span { background: var(--option-sel-bg); color: var(--primary); }
 .custom-test-modes input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; }
-.custom-test-start { margin-left: auto; min-width: 150px; }
+.custom-test-refresh {
+  background: none; border: 1px solid transparent; border-radius: 8px;
+  padding: 6px 9px; font: inherit; font-size: 0.82rem; color: var(--text-muted);
+  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
+}
+.custom-test-refresh:hover:not(:disabled) { border-color: var(--border); color: var(--text); }
+.custom-test-refresh:disabled { opacity: .5; cursor: not-allowed; }
+.custom-test-start { margin-left: auto; min-width: 140px; }
 
 /* ── Picker panel ─────────────────────────────────────────────────── */
 .facet-overlay {
@@ -229,20 +236,8 @@
 .custom-test-toggle-text span { font-size: 0.78rem; color: var(--text-muted); }
 .custom-test-check { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 0.88rem; cursor: pointer; }
 
-.custom-test-count-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
-.custom-test-count-row input { width: 110px; }
-.custom-test-count-of { color: var(--text-muted); font-size: 0.9rem; }
-.custom-test-modes { display: flex; gap: 8px; flex-wrap: wrap; }
-.custom-test-modes label {
-  flex: 1; min-width: 130px; display: flex; align-items: center; gap: 9px;
-  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
-  font-size: 0.9rem; cursor: pointer; background: var(--card-bg);
-}
-.custom-test-modes label:has(input:checked) { border-color: var(--primary); background: var(--option-sel-bg); }
 .custom-test-note { color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; margin: 8px 0 0; }
 .custom-test-error { color: var(--wrong-fg); font-size: 0.85rem; margin: 10px 0 0; }
-.custom-test-actions { display: flex; gap: 8px; margin-top: 18px; }
-.custom-test-actions .btn:last-child { flex: 1; }
 
 @media (max-width: 900px) {
   .custom-test-grid { grid-template-columns: 1fr; }
@@ -269,6 +264,6 @@
   .custom-test-modes { flex: 1 0 100%; }
   .custom-test-modes label { flex: 1; }
   .custom-test-modes span { text-align: center; padding: 10px; }
-  .custom-test-bar-inner > .btn-secondary { flex: 0 0 auto; }
+  .custom-test-refresh { flex: 0 0 auto; }
   .custom-test-start { flex: 1; width: auto; margin-left: 0; min-width: 0; }
 }

frontend/src/pages/CustomQuizPage.jsx

@@ -358,8 +358,10 @@ export default function CustomQuizPage() {
                 <span>Exam mode</span>
               </label>
             </div>
-            <button type="button" className="btn btn-secondary" disabled={submitting}
-              onClick={() => setRefresh(v => v + 1)}>Refresh count</button>
+            <button type="button" className="custom-test-refresh" disabled={submitting}
+              title="Recount available questions" onClick={() => setRefresh(v => v + 1)}>
+              <span aria-hidden="true">↻</span> Refresh
+            </button>
             <button className="btn btn-primary custom-test-start" type="submit"
               disabled={submitting || !ready || !validCount || !title.trim()}>
               {submitting ? 'Creating…' : 'Create Test'}

frontend/src/pages/CustomQuizPage.test.jsx

@@ -76,7 +76,7 @@ describe('CustomQuizPage', () => {
     await screen.findByText('No questions match these filters.')
     expect(screen.getByRole('button', { name: 'Create Test' })).toBeDisabled()
     setupCount(5)
-    await userEvent.click(screen.getByRole('button', { name: 'Refresh count' }))
+    await userEvent.click(screen.getByRole('button', { name: /Refresh/ }))
     await screen.findByText('5 questions available')
     expect(screen.getByRole('button', { name: 'Create Test' })).toBeDisabled()
     for (const value of ['0', '201', '1.5']) {
@@ -93,7 +93,7 @@ describe('CustomQuizPage', () => {
     await screen.findByRole('alert')
     expect(screen.getByRole('button', { name: 'Create Test' })).toBeDisabled()
     setupCount(30)
-    await userEvent.click(screen.getByRole('button', { name: 'Refresh count' }))
+    await userEvent.click(screen.getByRole('button', { name: /Refresh/ }))
     await screen.findByText('30 questions available')
     api.post.mockRejectedValue({ response: { data: { detail: 'Available count changed. Refresh the count and try again' } } })
     await userEvent.click(screen.getByRole('button', { name: 'Create Test' }))