feat: UI revamp with sidebar nav and grouped library

Replace top Nav with Sidebar, add lib/group.js for library grouping,
tokenized color/alert styles, and tighter Settings/Canvas export layout.
Adds @tabler/icons-react. Verified production build (standalone) passes,
so the Docker image built from this tree matches the local app.

Co-authored-by: Claude <claude-code@anthropic.com>

components/CanvasExportDialog.jsx

@@ -3,6 +3,7 @@
 // assignment. Auto-fills everything derivable; exposes the optional Canvas quiz settings
 // a teacher may want to set. Pure client-side (no upload) — see lib/canvas/export.js.
 import { useEffect, useMemo, useState } from "react";
+import { IconX } from "@tabler/icons-react";
 import { mapAssignmentToCanvas } from "@/lib/canvas/map";
 import { exportCanvasZip } from "@/lib/canvas/export";
 
@@ -145,18 +146,11 @@ export default function CanvasExportDialog({ assignment, onClose, onDone, onErro
   }
 
   return (
-    <div
-      onClick={onClose}
-      style={{
-        position: "fixed", inset: 0, zIndex: 100, background: "rgba(20,30,26,0.45)",
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
-        padding: "40px 16px", overflowY: "auto",
-      }}
-    >
+    <div className="modal-scrim" onClick={onClose}>
       <div
         onClick={(e) => e.stopPropagation()}
-        className="card"
-        style={{ width: 560, maxWidth: "100%", padding: 24, animation: "fade-in-up 0.18s ease" }}
+        className="modal"
+        style={{ width: 560, maxWidth: "100%", padding: 24 }}
       >
         <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
           <div style={{ flex: 1 }}>
@@ -165,7 +159,7 @@ export default function CanvasExportDialog({ assignment, onClose, onDone, onErro
               Downloads a QTI <code>.zip</code>. In Canvas: <b>Settings → Import Course Content → QTI .zip file</b>.
             </p>
           </div>
-          <button className="btn btn-sm" onClick={onClose} aria-label="Close">✕</button>
+          <button className="icon-btn" onClick={onClose} aria-label="Close"><IconX size={16} /></button>
         </div>
 
         {/* Summary of what will be exported */}