feat(ui): Checkbox/Radio 原子件 + 3 处原生控件采用（P2-5）

- checkboxClass/radioClass（accent-cinnabar + 统一焦点环）+ 同名测试
- Checkbox/Radio 原子件：无 label 只渲染受控原生 input 便于就地替换
- 采用：ChainStarter 链类型单选、GeneratorRunner 入库勾选、CharacterCardItem 角色勾选

apps/web/lib/ui/variants.test.ts

@@ -4,11 +4,13 @@ import {
   badgeClass,
   buttonClass,
   cardClass,
+  checkboxClass,
   cn,
   focusRing,
   inputClass,
   overlayScrim,
   proseBody,
+  radioClass,
   segmentedClass,
   statusNoteClass,
   transitionUi,
@@ -98,6 +100,14 @@ describe("ui variants", () => {
     expect(klass).toContain("px-3");
   });
 
+  it("styles checkbox and radio with accent + shared focus ring", () => {
+    expect(checkboxClass()).toContain("accent-cinnabar");
+    expect(checkboxClass()).toContain("rounded-xs");
+    expect(checkboxClass()).toContain("focus-visible:ring-cinnabar/35");
+    expect(radioClass()).toContain("rounded-full");
+    expect(radioClass()).toContain("accent-cinnabar");
+  });
+
   it("builds segmented control chrome", () => {
     const klass = segmentedClass();
 

apps/web/lib/ui/variants.ts

@@ -176,3 +176,15 @@ export function statusNoteClass({
 export function segmentedClass(className?: string): string {
   return cn("inline-flex rounded border border-line bg-bg p-1", className);
 }
+
+// 勾选/单选控件：原生 input + accent 上色，保留原生键盘/读屏语义，套统一焦点环。
+const controlBoxBase =
+  "h-4 w-4 shrink-0 border-line accent-cinnabar disabled:cursor-not-allowed disabled:opacity-45";
+
+export function checkboxClass(className?: string): string {
+  return cn(controlBoxBase, "rounded-xs", focusRing, className);
+}
+
+export function radioClass(className?: string): string {
+  return cn(controlBoxBase, "rounded-full", focusRing, className);
+}