fix: eliminate chart, bar, and button layout transitions across all dashboard components

src/app/admin/students/page.tsx

@@ -263,7 +263,7 @@ export default function StudentsPage() {
           </div>
           <div className="w-full bg-secondary rounded-full h-2 overflow-hidden">
             <div 
-              className="bg-primary h-2 rounded-full transition-all duration-1000 ease-in-out" 
+              className="bg-primary h-2 rounded-full" 
               style={{ width: `${uploadProgress}%` }}
             ></div>
           </div>

src/app/dashboard/ai-coach/page.tsx

@@ -119,7 +119,7 @@ export default function AICoachDashboard() {
           { label: "Mistakes Mastered", value: mistakesMastered, color: "text-green-400", bg: "bg-green-400/5", border: "border-green-400/20", icon: <CheckCircle2 size={32} /> },
           { label: "AI Sessions", value: aiSessions, color: "text-purple-400", bg: "bg-purple-400/5", border: "border-purple-400/20", icon: <Bot size={32} /> },
         ].map((stat) => (
-          <Card key={stat.label} className={`border ${stat.border} ${stat.bg} backdrop-blur-sm transition-all duration-300 transform hover:-translate-y-1 rounded-2xl`}>
+          <Card key={stat.label} className={`border ${stat.border} ${stat.bg} backdrop-blur-sm rounded-2xl`}>
             <CardContent className="p-6 flex flex-col items-center justify-center text-center">
               <div className="text-3xl mb-2 filter drop-shadow-md">{stat.icon}</div>
               <div className={`text-4xl font-black ${stat.color} leading-none tracking-tight mb-2 filter drop-shadow-sm`}>{stat.value}</div>

src/app/dashboard/ai-coach/readiness/page.tsx

@@ -108,7 +108,7 @@ export default function ReadinessPage() {
                     <span className={`text-xs font-bold ${sub.statusColor}`}>{sub.score}% · {sub.status}</span>
                   </div>
                   <div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
-                    <div className={`h-full ${sub.color} rounded-full transition-all duration-700`} style={{ width: `${sub.score}%` }} />
+                    <div className={`h-full ${sub.color} rounded-full`} style={{ width: `${sub.score}%` }} />
                   </div>
                 </div>
               ))}
@@ -126,7 +126,7 @@ export default function ReadinessPage() {
                 <div key={d.week} className="flex flex-col items-center gap-1 flex-1">
                   <span className="text-xs font-black text-muted-foreground">{d.score}</span>
                   <div
-                    className={`w-full rounded-t-md transition-all duration-700 ${
+                    className={`w-full rounded-t-md ${
                       !isDemo
                         ? "bg-white/5 border border-white/10"
                         : i === scoreHistory.length - 1

src/app/dashboard/ai-coach/study-plan/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
 import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
@@ -99,7 +99,7 @@ export default function StudyPlanPage() {
                   </div>
                   <div className="h-2.5 w-full bg-secondary rounded-full overflow-hidden">
                     <div
-                      className={`h-full rounded-full transition-all duration-700 ${sub.covered >= 70 ? "bg-green-400" : sub.covered >= 55 ? "bg-amber-400" : "bg-red-400"}`}
+                      className={`h-full rounded-full ${sub.covered >= 70 ? "bg-green-400" : sub.covered >= 55 ? "bg-amber-400" : "bg-red-400"}`}
                       style={{ width: `${sub.covered}%` }}
                     />
                   </div>

src/app/dashboard/ai-coach/weekly-progress/page.tsx

@@ -108,7 +108,7 @@ export default function WeeklyProgressPage() {
                     </div>
                     <div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
                       <div
-                        className={`h-full ${item.color} rounded-full transition-all duration-500`}
+                        className={`h-full ${item.color} rounded-full`}
                         style={{ width: `${item.percentage}%` }}
                       />
                     </div>

src/app/dashboard/page.tsx

@@ -254,7 +254,7 @@ export default function DashboardPage() {
           <div className="space-y-4">
             {dpps.length > 0 ? (
               dpps.map((dpp) => (
-                <Card key={dpp.id} className="hover:border-primary/30 hover:shadow-md cursor-pointer transition-all duration-300 group">
+                <Card key={dpp.id} className="hover:border-primary/30 cursor-pointer group">
                   <CardContent className="p-5 flex items-center justify-between">
                     <div className="flex gap-4 items-center">
                       <div className="p-3 bg-secondary rounded-xl text-foreground">

src/components/AI/MistakeHeatmap.tsx

@@ -71,7 +71,7 @@ export function MistakeHeatmap() {
                   {row.attempts.map((errRate, i) => (
                     <div 
                       key={i} 
-                      className={`h-8 sm:h-9 rounded-sm sm:rounded-md border transition-all duration-300 group-hover:scale-105 flex items-center justify-center cursor-help ${getColor(errRate)}`}
+                      className={`h-8 sm:h-9 rounded-sm sm:rounded-md border flex items-center justify-center cursor-help ${getColor(errRate)}`}
                       title={`Error Rate: ${errRate}%`}
                     >
                       <span className="text-[8px] sm:text-xs font-black text-foreground/90">{errRate}%</span>

src/components/AI/ReadinessGauge.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { fetchWithAuth } from "@/lib/apiClient";
 import { useEffect, useState } from "react"
@@ -103,7 +103,6 @@ export function ReadinessGauge() {
                 strokeDasharray={circumference}
                 strokeDashoffset={isZero ? circumference : strokeDashoffset}
                 strokeLinecap="round"
-                className="transition-all duration-1500 ease-out"
               />
             </svg>
             <div className="absolute inset-0 flex flex-col items-center justify-center text-center mt-1">
@@ -156,7 +155,7 @@ export function ReadinessGauge() {
               <span className="text-xs font-bold text-muted-foreground w-24 shrink-0 truncate">{sub.name}</span>
               <div className="flex-1 h-2 rounded-full bg-white/10 overflow-hidden">
                 <div
-                  className="h-full rounded-full transition-all duration-1000"
+                  className="h-full rounded-full"
                   style={{ width: `${sub.val}%`, background: sub.color }}
                 />
               </div>

src/components/AI/ReferralCard.tsx

@@ -75,7 +75,7 @@ export function ReferralCard() {
           </div>
           <div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
             <div 
-              className="h-full bg-gradient-to-r from-primary to-teal-400 rounded-full transition-all duration-500" 
+              className="h-full bg-gradient-to-r from-primary to-teal-400 rounded-full" 
               style={{ width: `${Math.min((referralCount / nextTier) * 100, 100)}%` }} 
             />
           </div>

src/components/AI/StudyPlanCard.tsx

@@ -103,7 +103,7 @@ export function StudyPlanCard() {
         {/* Progress bar */}
         <div className="h-[3px] bg-[var(--cyan-ai-10)] w-full">
           <div 
-            className="h-full bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 rounded-r-[2px] transition-all duration-500"
+            className="h-full bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 rounded-r-[2px]"
             style={{ width: `${progressPercent}%` }}
           />
         </div>

src/components/AI/StudyTimeOptimizationCard.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client"
 import { Card, CardContent } from "@/components/ui/card"
 import { Flame, Star, Clock, TrendingUp, Sparkles } from "lucide-react"
 import { useState } from "react"
@@ -92,7 +92,7 @@ export function StudyTimeOptimizationCard() {
                         </div>
                       )}
                       <div
-                        className={`w-full rounded-t-md transition-all duration-300 ${
+                        className={`w-full rounded-t-md ${
                           slot.peak
                             ? "bg-gradient-to-t from-yellow-600/80 to-yellow-400 shadow-[0_0_14px_rgba(234,179,8,0.5)]"
                             : hovered === i

src/components/AI/WeeklyProgressReport.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { TrendingUp, TrendingDown, Brain, Zap, Target, Clock } from "lucide-react"
 import { Card, CardContent } from "@/components/ui/card"
@@ -97,7 +97,7 @@ export function WeeklyProgressReport() {
                         </div>
                       )}
                       <div
-                        className={`w-full rounded-t-md transition-all duration-700 ${
+                        className={`w-full rounded-t-md ${
                           !isDemo
                             ? "bg-white/5 border border-white/10"
                             : i === 6

src/components/ui/button.tsx

@@ -13,9 +13,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         ref={ref}
         className={cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
           {
-            "bg-primary text-primary-foreground hover:bg-primary/90 hover:scale-[1.02] active:scale-[0.98]": variant === "default",
+            "bg-primary text-primary-foreground hover:bg-primary/90": variant === "default",
             "bg-secondary text-secondary-foreground hover:bg-secondary/80": variant === "secondary",
             "border border-border bg-background hover:bg-accent hover:text-accent-foreground": variant === "outline",
             "hover:bg-accent hover:text-accent-foreground": variant === "ghost",