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

src/pages/student/Practice.tsx

@@ -24,6 +24,8 @@ const DOTS = [
 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; }
+
   .pr-screen {
     min-height: 100vh;
     background: #fffbf4;
@@ -63,6 +65,20 @@ const STYLES = `
     display: flex; flex-direction: column; gap: 1.5rem;
   }
 
+  /* Desktop / wide layout */
+  @media (min-width: 900px) {
+    .pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
+    .pr-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+
+    .pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
+    .pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
+    .pr-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
+    .pr-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
+
+    .pr-hero { padding: 2rem; }
+    .pr-hero-icon-bg { right: -60px; top: -40px; opacity: 0.12; }
+  }
+
   /* ── Animations ── */
   @keyframes prPopIn {
     from { opacity:0; transform: scale(0.92) translateY(12px); }