fix(ui): fix X button hover, clean ExamEnum titles, route CBT DPP to real /cbt/[id] engine

src/app/dashboard/dpp/page.tsx

@@ -83,10 +83,12 @@ export default function DPPPage() {
     if (t.includes('chem')) return '/dpps/dps-che-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
     if (t.includes('math')) return '/dpps/dps-mth-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
     if (t.includes('bio')) return '/dpps/dps-bio-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
-    // Default fallback
     return '/dpps/dps-phy-ch4-20260707.pdf#toolbar=0&navpanes=0&scrollbar=0';
   };
 
+  // Strip ugly ExamEnum. prefix from seeded test titles
+  const cleanTitle = (title: string) => title.replace(/\s*\(ExamEnum\.[^)]+\)/, '');
+
   return (
     <div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-5xl mx-auto">
       <div className="flex flex-col md:flex-row md:items-center justify-between p-8 bg-gradient-to-r from-secondary/50 to-background border border-border rounded-2xl shadow-sm gap-6">
@@ -169,9 +171,9 @@ export default function DPPPage() {
                       </>
                     ) : null}
                   </div>
-                  <h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors flex flex-wrap items-center gap-2">
-                    {dpp.title}
-                    <span className={`text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
+                  <h3 className="font-bold text-lg leading-tight group-hover:text-[#00F0FF] transition-colors">
+                    {cleanTitle(dpp.title)}
+                    <span className={`ml-2 text-[10px] uppercase px-2 py-0.5 rounded-md border font-bold tracking-wider ${getDifficultyColor(dpp.difficulty)}`}>
                       {dpp.difficulty}
                     </span>
                   </h3>
@@ -224,7 +226,7 @@ export default function DPPPage() {
                 </div>
                 <div>
                   <h3 className="font-black text-lg flex items-center gap-2">
-                    {selectedPdfDpp.title}
+                    {cleanTitle(selectedPdfDpp.title)}
                     <span className="text-[10px] bg-yellow-500/10 text-yellow-500 border border-yellow-500/20 px-2 py-0.5 rounded-full uppercase tracking-wider font-extrabold">
                       Protected In-App PDF View
                     </span>
@@ -234,14 +236,12 @@ export default function DPPPage() {
                   </p>
                 </div>
               </div>
-              <Button 
+              <button 
                 onClick={() => setSelectedPdfDpp(null)}
-                variant="outline" 
-                size="icon" 
-                className="rounded-full border-border hover:bg-secondary"
+                className="ml-4 flex-shrink-0 w-9 h-9 rounded-full border border-border bg-secondary flex items-center justify-center text-foreground hover:bg-destructive hover:border-destructive hover:text-white transition-all"
               >
                 <X size={18} />
-              </Button>
+              </button>
             </div>
 
             {/* Security Notice Banner */}
@@ -259,12 +259,13 @@ export default function DPPPage() {
             {/* Protected PDF Document Sheet Content (select-none) */}
             <div 
               onContextMenu={(e) => e.preventDefault()}
-              className="flex-1 w-full h-full min-h-[60vh] select-none bg-[#525659]"
+              className="flex-1 w-full select-none bg-[#525659] overflow-hidden" style={{minHeight: '55vh'}}
             >
               <embed 
                 src={getPdfUrl(selectedPdfDpp.title)} 
                 type="application/pdf" 
-                className="w-full h-full rounded-b-lg"
+                className="w-full h-full"
+                style={{height: '55vh'}}
               />
             </div>