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

src/pages/student/Rewards.tsx

@@ -33,6 +33,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; }
+
   .rw-screen {
     height: 100vh;
     background: #fffbf4;
@@ -66,7 +68,6 @@ const STYLES = `
 
   .rw-sticky-top {
     position:relative;z-index:2;
-    background:#fffbf4;
     flex-shrink:0;
     padding:2rem 1.25rem 0;
   }
@@ -85,6 +86,26 @@ const STYLES = `
   }
   .rw-scroll-inner { max-width:580px;margin:0 auto; }
 
+  /* Desktop: wider centered layout */
+  @media (min-width: 900px) {
+    .rw-sticky-top-inner { max-width: var(--content-max); padding: 2rem 2rem 1.25rem; }
+    .rw-scroll-inner { max-width: var(--content-max); }
+    .rw-scroll-area { padding: 1.5rem 2.5rem 10rem; }
+
+    /* Make empty state sit visually centered within larger canvas */
+    .rw-empty { padding: 5rem 1rem; }
+
+    /* Slightly larger island pill on wide screens and rebalance blobs */
+    .rw-island-wrap { max-width: 420px; left:auto; right:calc((100vw - 256px - var(--content-max)) / 2); top:240px; bottom:auto; transform:none; margin-left:150px; }
+    .rw-island-card { gap: 0.75rem; }
+
+    /* Rebalance decorative blobs on wide screens */
+    .rw-blob-1 { left: -120px; top: -100px; width:300px; height:300px; }
+    .rw-blob-2 { left: 6%; bottom: -40px; }
+    .rw-blob-3 { right: -100px; top: 8%; width:260px; height:260px; }
+    .rw-blob-4 { right: 2%; bottom: 6%; }
+  }
+
   @keyframes rwPopIn {
     from{opacity:0;transform:scale(0.92) translateY(12px);}
     to{opacity:1;transform:scale(1) translateY(0);}
@@ -177,8 +198,9 @@ const STYLES = `
     flex-direction:column;
     align-items:center;
     gap:0.5rem;
-    width:calc(100% - 2rem);
+    width:auto;
     max-width:300px;
+    top:auto;
   }
 
   .rw-island-card {