design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme

- globals.css: add --cyan-ai CSS variable (rgb(12,96,96) light / #00F0FF dark)
  + opacity variants --cyan-ai-10/20/30/40/50/80
- Bulk replace all #00F0FF hardcoded Tailwind arbitrary values with
  var(--cyan-ai) / var(--cyan-ai-10) / etc across 55+ TSX/TS files
- Shadow glow colours also updated (suppressed by box-shadow:none in light mode)
- TypeScript: 0 errors

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

@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { StudyTimeOptimizationCard } from "@/components/AI/StudyTimeOptimizationCard"
 import { Clock, Zap, Moon, Sun, AlertCircle, ArrowRight, BarChart2 } from "lucide-react"
@@ -75,8 +75,8 @@ export default function TimeOptimizationPage() {
         <div className="flex items-start justify-between gap-4 flex-wrap">
           <div>
             <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
-              <span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
-                <Clock className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
+              <span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
+                <Clock className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
               </span>
               Study Time Optimization
             </h1>
@@ -84,7 +84,7 @@ export default function TimeOptimizationPage() {
               Understand your peak productive hours and schedule your hardest topics in your highest-efficiency windows.
             </p>
           </div>
-          <span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
+          <span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
             <Zap size={12} /> Chronobiology Analytics
           </span>
         </div>
@@ -94,7 +94,7 @@ export default function TimeOptimizationPage() {
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
         {[
           { label: "Peak Efficiency", value: isDemo ? "95%" : "--", sub: isDemo ? "2–5 PM window" : "Calibrating", color: "border-yellow-400/20 bg-yellow-400/5", icon: <Sun size={18} className="text-yellow-400" /> },
-          { label: "Study Hrs Today", value: isDemo ? "3.8 h" : "0.0 h", sub: "Target: 6 h", color: "border-[#00F0FF]/20 bg-[#00F0FF]/5", icon: <Clock size={18} className="text-[#00F0FF]" /> },
+          { label: "Study Hrs Today", value: isDemo ? "3.8 h" : "0.0 h", sub: "Target: 6 h", color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]", icon: <Clock size={18} className="text-[var(--cyan-ai)]" /> },
           { label: "Morning Block", value: isDemo ? "60%" : "0%", sub: "6–9 AM", color: "border-indigo-400/20 bg-indigo-400/5", icon: <Moon size={18} className="text-indigo-400" /> },
           { label: "Evening Block", value: isDemo ? "74%" : "0%", sub: "7–9 PM", color: "border-green-400/20 bg-green-400/5", icon: <BarChart2 size={18} className="text-green-400" /> },
         ].map(kpi => (
@@ -113,7 +113,7 @@ export default function TimeOptimizationPage() {
         {/* Chart — 2/3 */}
         <div className="lg:col-span-2 space-y-4">
           <div className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-muted-foreground">
-            <BarChart2 size={16} className="text-[#00F0FF]" />
+            <BarChart2 size={16} className="text-[var(--cyan-ai)]" />
             Hourly Efficiency Profile
           </div>
           <StudyTimeOptimizationCard />
@@ -131,7 +131,7 @@ export default function TimeOptimizationPage() {
                     <div className="w-16 text-xs font-bold text-muted-foreground shrink-0">{slot.slot}</div>
                     <div className="flex-1 h-1.5 bg-secondary rounded-full overflow-hidden">
                       <div
-                        className={`h-full rounded-full ${slot.pct >= 80 ? (slot.highlight ? "bg-yellow-400" : "bg-green-400") : slot.pct >= 60 ? "bg-[#00F0FF]" : isDemo ? "bg-red-400" : "bg-white/10"}`}
+                        className={`h-full rounded-full ${slot.pct >= 80 ? (slot.highlight ? "bg-yellow-400" : "bg-green-400") : slot.pct >= 60 ? "bg-[var(--cyan-ai)]" : isDemo ? "bg-red-400" : "bg-white/10"}`}
                         style={{ width: `${slot.pct}%` }}
                       />
                     </div>
@@ -158,9 +158,9 @@ export default function TimeOptimizationPage() {
             ))}
           </div>
 
-          <Card className="bg-gradient-to-br from-[#00F0FF]/10 via-secondary/20 to-background border border-[#00F0FF]/20 rounded-2xl">
+          <Card className="bg-gradient-to-br from-[var(--cyan-ai-10)] via-secondary/20 to-background border border-[var(--cyan-ai-20)] rounded-2xl">
             <CardContent className="p-5 space-y-3">
-              <h3 className="text-sm font-black uppercase tracking-wider text-[#00F0FF]">Apply Insights</h3>
+              <h3 className="text-sm font-black uppercase tracking-wider text-[var(--cyan-ai)]">Apply Insights</h3>
               <div className="space-y-2">
                 {[
                   { label: "Schedule Today's Study Plan", href: "/dashboard/ai-coach/study-plan" },