feat: implement monochrome design system across entire frontend

Migrate all 84 frontend files from the old themed/colored design to a
monochrome glass-morphism design system. Pure black backgrounds, white
text with opacity levels, glass-card components with backdrop-blur, and
functional color reserved for status indicators only.

Foundation: remap CSS variables to monochrome, simplify Tailwind config,
remove theme toggle, convert brand logo/wordmark to white. Pages: all
14 pages updated. Components: all common, library, session, step-library,
tree-editor, tree-preview, admin, and subscription components converted.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/admin/CategoryRow.tsx

@@ -38,7 +38,7 @@ export function CategoryRow({
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-center gap-3 rounded-lg border border-border bg-card p-4',
+        'flex items-center gap-3 glass-card rounded-2xl p-4',
         isDragging && 'opacity-50'
       )}
     >
@@ -47,7 +47,7 @@ export function CategoryRow({
         type="button"
         {...attributes}
         {...listeners}
-        className="cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing"
+        className="cursor-grab touch-none text-white/50 hover:text-white active:cursor-grabbing"
         aria-label="Drag to reorder"
       >
         <GripVertical className="h-5 w-5" />
@@ -56,17 +56,17 @@ export function CategoryRow({
       {/* Category Info */}
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <h3 className="font-medium text-foreground">{category.name}</h3>
+          <h3 className="font-medium text-white">{category.name}</h3>
           {!category.is_active && (
-            <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+            <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs font-medium text-white/70">
               Archived
             </span>
           )}
         </div>
         {category.description && (
-          <p className="mt-1 text-sm text-muted-foreground">{category.description}</p>
+          <p className="mt-1 text-sm text-white/40">{category.description}</p>
         )}
-        <p className="mt-1 text-xs text-muted-foreground">
+        <p className="mt-1 text-xs text-white/40">
           {stepCount} step{stepCount !== 1 ? 's' : ''}
         </p>
       </div>
@@ -77,8 +77,8 @@ export function CategoryRow({
           type="button"
           onClick={() => onEdit(category)}
           className={cn(
-            'rounded-md border border-input bg-background p-2 text-muted-foreground',
-            'hover:bg-accent hover:text-accent-foreground'
+            'rounded-md border border-white/10 bg-black/50 p-2 text-white/50',
+            'hover:bg-white/10 hover:text-white'
           )}
           title="Edit category"
         >