feat: responsive for web with sidebar and different styling for test ui on web

src/pages/student/targeted-practice/page.tsx

@@ -68,6 +68,8 @@ const getSectionMeta = (section?: string) =>
 const STYLES = `
   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
 
+  :root { --content-max: 1100px; }
+
   .tp-screen {
     min-height: 100vh;
     background: #fffbf4;
@@ -351,16 +353,35 @@ const STYLES = `
 
   /* ── Bottom CTA bar ── */
   .tp-cta-bar {
-    position: fixed; bottom: 96px; left: 0; right: 0; z-index: 10;
+    position: fixed;
+    bottom: 96px;
+    left: 0;
+    right: 0;
+    z-index: 5;
     padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
-    background: rgba(255,251,244,0.9);
+    background: rgba(255, 251, 244, 0.9);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-top: 2px solid #f3f4f6;
   }
   .tp-cta-inner {
-    max-width: 560px; margin: 0 auto;
-    display: flex; gap: 0.75rem; align-items: center;
+    max-width: 560px;
+    margin: 0 auto;
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  @media (min-width: 900px) {
+    .tp-inner { max-width: var(--content-max); padding: 3rem 1.5rem 10rem; }
+    .tp-topic-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
+    .tp-cta-bar { left: var(--sidebar-width); right: 0; }
+
+    /* Align decorative blobs relative to the centered content container */
+    .tp-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 48px); }
+    .tp-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 56px); }
+    .tp-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 12px); }
+    .tp-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 12px); }
   }
 
   /* Next / Start button */