From a96410ebc436e548d170c8068ed35e82e3bb529f Mon Sep 17 00:00:00 2001
From: ECE CALISKAN <ececaliskan@ECEs-MacBook-Pro.local>
Date: Tue, 28 Oct 2025 22:10:47 +0000
Subject: [PATCH] remove default dark mode from the components

---
 app/home/page.tsx                  |  60 ++++++++---------
 app/landing/page.tsx               |   4 +-
 app/layout.tsx                     |   5 +-
 app/library/page.tsx               |  14 ++--
 app/music/[id]/page.tsx            | 102 ++++++++++++++---------------
 app/offline/page.tsx               |   6 +-
 app/study/page.tsx                 |  56 ++++++++--------
 components/ChatPanel.tsx           |  14 ++--
 components/FeatureCard.tsx         |   6 +-
 components/Footer.tsx              |  20 +++---
 components/HighlightToolbar.tsx    |   8 +--
 components/NavBar.tsx              |  28 ++++----
 components/music/PlaylistModal.tsx |  26 ++++----
 13 files changed, 175 insertions(+), 174 deletions(-)

diff --git a/app/home/page.tsx b/app/home/page.tsx
index 595cf90..709b2e9 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -94,9 +94,9 @@ export default function HomePage() {
   const displayName = (user?.displayName || user?.email || "there") as string;
 
   const StatCard = ({ label, value }: { label: string; value: string | number }) => (
-    <div className="rounded-2xl ring-1 ring-black/5 dark:ring-white/10 bg-white/70 dark:bg-white/5 p-4 flex flex-col gap-1">
-      <div className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{label}</div>
-      <div className="text-2xl font-semibold text-slate-900 dark:text-[--color-accent]">{value}</div>
+    <div className="rounded-2xl ring-1 ring-black/5  bg-white/70  p-4 flex flex-col gap-1">
+      <div className="text-xs uppercase tracking-wide text-slate-500 ">{label}</div>
+      <div className="text-2xl font-semibold text-slate-900 ">{value}</div>
     </div>
   );
 
@@ -116,10 +116,10 @@ export default function HomePage() {
         <section className="mb-10">
           <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
             <div>
-              <h1 className="text-3xl sm:text-4xl font-semibold text-slate-900 dark:text-[--color-accent]">
+              <h1 className="text-3xl sm:text-4xl font-semibold text-slate-900 ">
                 Hello, {displayName.split("@")[0]}
               </h1>
-              <p className="mt-2 text-slate-700 dark:text-slate-300">
+              <p className="mt-2 text-slate-700">
                 Welcome back. Here’s a quick look at your study activity.
               </p>
             </div>
@@ -134,7 +134,7 @@ export default function HomePage() {
               </button>
             </div>
           </div>
-          <p id="upload-help" className="mt-3 max-w-2xl text-sm sm:text-base text-slate-600 dark:text-slate-300">
+          <p id="upload-help" className="mt-3 max-w-2xl text-sm sm:text-base text-slate-600 ">
             Drag & drop a .txt, .pdf, or .docx file — or paste your notes. We’ll generate a personalized, focus-friendly soundtrack for your study session.
           </p>
         </section>
@@ -151,11 +151,11 @@ export default function HomePage() {
         <section className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
           {/* Left: Recent Study Sessions */}
           <div>
-            <h2 className="text-left text-2xl md:text-3xl font-semibold text-slate-900 dark:text-[--color-accent] mb-4">
+            <h2 className="text-left text-2xl md:text-3xl font-semibold text-slate-900  mb-4">
               Recent Study Sessions
             </h2>
             {recents.length === 0 ? (
-              <div className="rounded-2xl border border-black/5 dark:border-white/10 bg-white/60 dark:bg-white/5 backdrop-blur-sm p-8 text-center text-slate-700 dark:text-slate-300">
+              <div className="rounded-2xl border border-black/5 bg-white/60  backdrop-blur-sm p-8 text-center text-slate-700 ">
                 <p className="flex items-center justify-center gap-2 text-base md:text-lg">
                   <FaClock className="text-primary" />
                   No study sessions yet. Start by uploading your first notes!
@@ -164,16 +164,16 @@ export default function HomePage() {
             ) : (
               <ul className="space-y-3">
                 {recents.slice(0, 7).map((s) => (
-                  <li key={s.id} className="rounded-xl ring-1 ring-black/5 dark:ring-white/10 bg-white/70 dark:bg-white/5 p-4 hover:ring-primary/60 transition">
+                  <li key={s.id} className="rounded-xl ring-1 ring-black/5  bg-white/70 p-4 hover:ring-primary/60 transition">
                     {s.href ? (
                       <Link href={s.href} className="block">
-                        <div className="font-medium text-slate-900 dark:text-[--color-accent] line-clamp-1">{s.title}</div>
-                        <div className="text-xs text-slate-500 dark:text-slate-400">{new Date(s.openedAt).toLocaleString()}</div>
+                        <div className="font-medium text-slate-900  line-clamp-1">{s.title}</div>
+                        <div className="text-xs text-slate-500 ">{new Date(s.openedAt).toLocaleString()}</div>
                       </Link>
                     ) : (
                       <div className="block">
-                        <div className="font-medium text-slate-900 dark:text-[--color-accent] line-clamp-1">{s.title}</div>
-                        <div className="text-xs text-slate-500 dark:text-slate-400">{new Date(s.openedAt).toLocaleString()}</div>
+                        <div className="font-medium text-slate-900  line-clamp-1">{s.title}</div>
+                        <div className="text-xs text-slate-500 ">{new Date(s.openedAt).toLocaleString()}</div>
                       </div>
                     )}
                   </li>
@@ -184,11 +184,11 @@ export default function HomePage() {
 
           {/* Right: Recently Played */}
           <div>
-            <h2 className="text-left text-2xl md:text-3xl font-semibold text-slate-900 dark:text-[--color-accent] mb-4">
+            <h2 className="text-left text-2xl md:text-3xl font-semibold text-slate-900  mb-4">
               Recently Played
             </h2>
             {tracks.length === 0 ? (
-              <div className="rounded-2xl border border-black/5 dark:border-white/10 bg-white/60 dark:bg-white/5 backdrop-blur-sm p-8 text-center text-slate-700 dark:text-slate-300">
+              <div className="rounded-2xl border border-black/5  bg-white/60  backdrop-blur-sm p-8 text-center text-slate-700 ">
                 <p className="flex items-center justify-center gap-2 text-base md:text-lg">
                   <FaMusic className="text-primary" />
                   No music played yet. Generate background sound from your study space!
@@ -197,16 +197,16 @@ export default function HomePage() {
             ) : (
               <ul className="space-y-3">
                 {tracks.slice(0, 7).map((t) => (
-                  <li key={t.id} className="rounded-xl ring-1 ring-black/5 dark:ring-white/10 bg-white/70 dark:bg-white/5 p-4 hover:ring-primary/60 transition">
+                  <li key={t.id} className="rounded-xl ring-1 ring-black/5  bg-white/70 p-4 hover:ring-primary/60 transition">
                     {t.href ? (
                       <Link href={t.href} className="block">
-                        <div className="font-medium text-slate-900 dark:text-[--color-accent] line-clamp-1">{t.title}</div>
-                        <div className="text-xs text-slate-500 dark:text-slate-400">{new Date(t.playedAt).toLocaleString()}</div>
+                        <div className="font-medium text-slate-900  line-clamp-1">{t.title}</div>
+                        <div className="text-xs text-slate-500 ">{new Date(t.playedAt).toLocaleString()}</div>
                       </Link>
                     ) : (
                       <div className="block">
-                        <div className="font-medium text-slate-900 dark:text-[--color-accent] line-clamp-1">{t.title}</div>
-                        <div className="text-xs text-slate-500 dark:text-slate-400">{new Date(t.playedAt).toLocaleString()}</div>
+                        <div className="font-medium text-slate-900  line-clamp-1">{t.title}</div>
+                        <div className="text-xs text-slate-500 ">{new Date(t.playedAt).toLocaleString()}</div>
                       </div>
                     )}
                   </li>
@@ -229,16 +229,16 @@ export default function HomePage() {
           }}
         >
           {/* Backdrop */}
-          <div className="absolute inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm" />
+          <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" />
 
           {/* Panel */}
-          <div className="relative z-10 w-full max-w-2xl rounded-3xl bg-accent/95 dark:bg-[--color-dark-bg]/95 ring-1 ring-black/10 dark:ring-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.25)]">
+          <div className="relative z-10 w-full max-w-2xl rounded-3xl bg-accent/95  ring-1 ring-black/10  shadow-[0_20px_50px_rgba(0,0,0,0.25)]">
             {/* Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b border-black/10 dark:border-white/10">
-              <h3 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent]">Upload or Paste Notes</h3>
+            <div className="flex items-center justify-between px-6 py-4 border-b border-black/10 ">
+              <h3 className="text-lg font-semibold text-slate-900 ">Upload or Paste Notes</h3>
               <button
                 aria-label="Close"
-                className="inline-flex h-9 w-9 items-center justify-center rounded-lg ring-1 ring-black/10 dark:ring-white/10 bg-white/70 dark:bg-white/5 text-slate-700 dark:text-[--color-accent] hover:bg-white/80"
+                className="inline-flex h-9 w-9 items-center justify-center rounded-lg ring-1 ring-black/10  bg-white/70 text-slate-700  hover:bg-white/80"
                 onClick={() => setIsModalOpen(false)}
               >
                 <HiOutlineX size={18} />
@@ -252,7 +252,7 @@ export default function HomePage() {
               )}
               {/* Drag & drop upload */}
               <div
-                className={`group relative rounded-2xl bg-white/80 dark:bg-white/5 p-5 ring-1 ring-black/10 dark:ring-white/10 text-center transition ${
+                className={`group relative rounded-2xl bg-white/80  p-5 ring-1 ring-black/10 dtext-center transition ${
                   isDragging ? "ring-2 ring-primary shadow-[0_0_0_4px_rgba(139,198,236,0.25)]" : ""
                 }`}
                 onDrop={onDrop}
@@ -265,8 +265,8 @@ export default function HomePage() {
                 <div className="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/20 text-primary ring-1 ring-primary/30">
                   <FaCloudUploadAlt size={22} />
                 </div>
-                <p className="mt-3 font-medium text-slate-900 dark:text-[--color-accent]">Drag & drop your file here</p>
-                <p className="text-sm text-slate-600 dark:text-slate-300">.txt, .pdf, .docx</p>
+                <p className="mt-3 font-medium text-slate-900 ">Drag & drop your file here</p>
+                <p className="text-sm text-slate-600 ">.txt, .pdf, .docx</p>
                 <div className="mt-4">
                   <button
                     onClick={triggerFile}
@@ -310,7 +310,7 @@ export default function HomePage() {
                     }}
                   />
                 </div>
-                <div className="mt-2 inline-flex items-center gap-2 justify-center text-xs text-slate-500 dark:text-slate-400">
+                <div className="mt-2 inline-flex items-center gap-2 justify-center text-xs text-slate-500 ">
                   <FaInfoCircle aria-hidden />
                   <span>We process locally when possible for privacy.</span>
                 </div>
@@ -324,7 +324,7 @@ export default function HomePage() {
                   rows={8}
                   value={notesText}
                   onChange={(e) => setNotesText(e.target.value)}
-                  className="w-full resize-y rounded-2xl bg-white/80 dark:bg-white/5 text-slate-900 dark:text-[--color-accent] placeholder:text-slate-500 dark:placeholder:text-slate-400 p-4 ring-1 ring-black/10 dark:ring-white/10 focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="w-full resize-y rounded-2xl bg-white/80  text-slate-900  placeholder:text-slate-500  p-4 ring-1 ring-black/10 focus:outline-none focus:ring-2 focus:ring-primary"
                   placeholder="Paste your notes or write here…"
                 />
               </div>
diff --git a/app/landing/page.tsx b/app/landing/page.tsx
index 2b29382..3184c60 100644
--- a/app/landing/page.tsx
+++ b/app/landing/page.tsx
@@ -32,11 +32,11 @@ export default function Landing() {
 
       {/* Hero Section */}
       <section className="mx-auto flex min-h-[50vh] w-full max-w-6xl flex-col items-center justify-center px-6 pt-10 pb-10 text-center">
-    <h1 className="max-w-4xl text-4xl sm:text-5xl md:text-6xl font-semibold leading-tight text-slate-900 dark:text-[--color-accent] text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-blue-600"
+    <h1 className="max-w-4xl text-4xl sm:text-5xl md:text-6xl font-semibold leading-tight text-slate-900 text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-blue-600"
         >
           Where knowledge meets notes, in perfect harmony.
         </h1>
-        <p className="mt-4 max-w-2xl text-base sm:text-lg text-slate-700 dark:text-slate-300">
+        <p className="mt-4 max-w-2xl text-base sm:text-lg text-slate-700">
           A clever fusion of study notes and music notes. Get AI-powered explanations, focus music, and turn your learning into rhythm.
         </p>
         <div className="mt-8 flex flex-col sm:flex-row items-center gap-3">
diff --git a/app/layout.tsx b/app/layout.tsx
index a60584e..69a9dd0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,8 +22,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="dark:[color-scheme:dark] [color-scheme:light]">
-      <body className="antialiased font-sans text-slate-900 bg-accent dark:bg-[--color-dark-bg] dark:text-[--color-accent] min-h-screen">
+    <html lang="en" className="light">
+      <body className="antialiased font-sans text-primary bg-white min-h-screen">
+  
         <AuthProvider>
           <PWA />
           <NavBar isAuthenticated={false} />
diff --git a/app/library/page.tsx b/app/library/page.tsx
index 05d4621..e7f9bc8 100644
--- a/app/library/page.tsx
+++ b/app/library/page.tsx
@@ -32,8 +32,8 @@ export default function LibraryPage() {
 
   return (
     <main className="mx-auto w-full max-w-3xl px-5 pt-24 pb-16">
-      <h1 className="text-3xl font-semibold text-slate-900 dark:text-[--color-accent] mb-6">Library</h1>
-      <p className="text-slate-700 dark:text-slate-300 mb-8">
+      <h1 className="text-3xl font-semibold text-slate-900  mb-6">Library</h1>
+      <p className="text-slate-700  mb-8">
         {intent === "music"
           ? "Select a study upload to generate music for."
           : intent === "study"
@@ -42,8 +42,8 @@ export default function LibraryPage() {
       </p>
 
       {empty ? (
-        <div className="rounded-2xl border border-black/5 dark:border-white/10 bg-white/70 dark:bg-white/5 p-8 text-center">
-          <p className="text-slate-700 dark:text-slate-300">No uploads yet.</p>
+        <div className="rounded-2xl border border-black/5  bg-white/70  p-8 text-center">
+          <p className="text-slate-700 ">No uploads yet.</p>
           <div className="mt-4">
             <Link href="/home" className="inline-flex items-center justify-center rounded-full bg-primary px-5 py-2 text-slate-900 font-medium shadow-[0_4px_0_rgba(0,0,0,0.08)] hover:shadow-[0_6px_0_rgba(0,0,0,0.1)] hover:brightness-105 active:translate-y-px">
               Upload or Paste Notes
@@ -53,10 +53,10 @@ export default function LibraryPage() {
       ) : (
         <ul className="space-y-3">
           {sessions.map((s) => (
-            <li key={s.id} className="rounded-xl ring-1 ring-black/5 dark:ring-white/10 bg-white/70 dark:bg-white/5 p-4 hover:ring-primary/60 transition flex items-center justify-between gap-3">
+            <li key={s.id} className="rounded-xl ring-1 ring-black/5 bg-white/70  p-4 hover:ring-primary/60 transition flex items-center justify-between gap-3">
               <div>
-                <div className="font-medium text-slate-900 dark:text-[--color-accent] line-clamp-1">{s.title}</div>
-                <div className="text-xs text-slate-500 dark:text-slate-400">{new Date(s.createdAt).toLocaleString()}</div>
+                <div className="font-medium text-slate-900  line-clamp-1">{s.title}</div>
+                <div className="text-xs text-slate-500 ">{new Date(s.createdAt).toLocaleString()}</div>
               </div>
               <div className="flex items-center gap-2">
                 <button onClick={() => handleSelect(s.id)} className="inline-flex items-center justify-center rounded-full bg-secondary px-4 py-2 text-slate-900">Select</button>
diff --git a/app/music/[id]/page.tsx b/app/music/[id]/page.tsx
index be44776..671a686 100644
--- a/app/music/[id]/page.tsx
+++ b/app/music/[id]/page.tsx
@@ -474,8 +474,8 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
             <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 pt-16">
                 {/* Page title */}
                 <header className="mb-6">
-                    <h1 className="text-2xl sm:text-3xl font-semibold text-slate-900 dark:text-[--color-accent]">Music Generator</h1>
-                    <p className="text-sm text-slate-700 dark:text-slate-300">Turn your key topics into focus-friendly soundtracks.</p>
+                    <h1 className="text-2xl sm:text-3xl font-semibold text-slate-900 ">Music Generator</h1>
+                    <p className="text-sm text-slate-700 ">Turn your key topics into focus-friendly soundtracks.</p>
                 </header>
 
                 {/* Split view */}
@@ -483,18 +483,18 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                     {/* Left: Note Insights */}
                     <section className="lg:col-span-1 space-y-4">
                         {/* Song Scope card */}
-                        <div className="rounded-2xl bg-white/90 dark:bg-white/5 backdrop-blur p-6 shadow-md ring-1 ring-black/5 dark:ring-white/10 transition-transform hover:-translate-y-0.5">
-                            <h2 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent] mb-3">Song Scope</h2>
+                        <div className="rounded-2xl bg-white/90  backdrop-blur p-6 shadow-md ring-1 ring-black/5  transition-transform hover:-translate-y-0.5">
+                            <h2 className="text-lg font-semibold text-slate-900  mb-3">Song Scope</h2>
                             <div className="flex flex-col gap-2 text-sm">
-                                <div className="text-sm text-slate-700 dark:text-slate-300">Generating based on the entire lecture/upload.</div>
+                                <div className="text-sm text-slate-700 ">Generating based on the entire lecture/upload.</div>
                             </div>
                         </div>
 
                         {/* Topics card (only if scope is topics) */}
                         {scope === 'topics' && (
-                            <div className="rounded-2xl bg-white/90 dark:bg-white/5 backdrop-blur p-6 shadow-md ring-1 ring-black/5 dark:ring-white/10 transition-transform hover:-translate-y-0.5">
+                            <div className="rounded-2xl bg-white/90  backdrop-blur p-6 shadow-md ring-1 ring-black/5  transition-transform hover:-translate-y-0.5">
                                 <div className="flex items-center justify-between mb-3">
-                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent]">Detected Topics</h2>
+                                    <h2 className="text-lg font-semibold text-slate-900 ">Detected Topics</h2>
                                     <button
                                         className="text-sm rounded-full px-3 py-1 bg-primary text-slate-900 shadow hover:brightness-105"
                                         onClick={selectAll}
@@ -527,12 +527,12 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                 <div className="mt-4 flex items-center justify-between">
                                     <button
                                         onClick={analyzeAgain}
-                                        className="rounded-xl px-4 py-2 bg-white ring-1 ring-black/10 text-slate-800 hover:bg-white/90 dark:bg-white/10 dark:text-[--color-accent] dark:ring-white/10"
+                                        className="rounded-xl px-4 py-2 bg-white ring-1 ring-black/10 text-slate-800 hover:bg-white/90"
                                         title="Re-detect topics from notes"
                                     >
                                         Analyze Notes Again
                                     </button>
-                                    <span className="text-xs text-slate-500 dark:text-slate-400">{selectedTopics.size} selected</span>
+                                    <span className="text-xs text-slate-500 ">{selectedTopics.size} selected</span>
                                 </div>
                             </div>
                         )}
@@ -540,11 +540,11 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
 
                     {/* Right: Music Generator */}
                     <section className="lg:col-span-2">
-                        <div className="rounded-2xl bg-white/90 dark:bg-white/5 backdrop-blur p-6 shadow-md ring-1 ring-black/5 dark:ring-white/10">
+                        <div className="rounded-2xl bg-white/90 backdrop-blur p-6 shadow-md ring-1 ring-black/5 ">
                             <div className="flex items-center justify-between mb-4">
-                                <h2 className="text-xl font-semibold text-slate-900 dark:text-[--color-accent]">Generate Your Study Music</h2>
+                                <h2 className="text-xl font-semibold text-slate-900 ">Generate Your Study Music</h2>
                                 {isGenerating && (
-                                    <div className="text-sm text-slate-700 dark:text-slate-300">
+                                    <div className="text-sm text-slate-700 ">
                                         {steps[Math.min(genStep, steps.length - 1)]}…
                                     </div>
                                 )}
@@ -553,9 +553,9 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                             {/* Controls */}
                             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                 <div>
-                                    <label className="text-xs text-slate-600 dark:text-slate-300">Genre</label>
+                                    <label className="text-xs text-slate-600 ">Genre</label>
                                     <select
-                                        className="mt-1 w-full rounded-lg bg-white/80 dark:bg-white/10 ring-1 ring-black/10 dark:ring-white/10 p-2 text-slate-900 dark:text-[--color-accent]"
+                                        className="mt-1 w-full rounded-lg bg-white/80  ring-1 ring-black/10 p-2 text-slate-900 "
                                         value={genre}
                                         onChange={(e) => genreChange(e.target.value as any)}
                                     >
@@ -565,9 +565,9 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                     </select>
                                 </div>
                                 <div>
-                                    <label className="text-xs text-slate-600 dark:text-slate-300">Vibe / Mood</label>
+                                    <label className="text-xs text-slate-600 ">Vibe / Mood</label>
                                     <select
-                                        className="mt-1 w-full rounded-lg bg-white/80 dark:bg-white/10 ring-1 ring-black/10 dark:ring-white/10 p-2 text-slate-900 dark:text-[--color-accent]"
+                                        className="mt-1 w-full rounded-lg bg-white/80 ring-1 ring-black/10 d p-2 text-slate-900 "
                                         value={mood}
                                         onChange={(e) => moodChange(e.target.value as any)}
                                     >
@@ -577,7 +577,7 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                     </select>
                                 </div>
                                 <div>
-                                    <label className="text-xs text-slate-600 dark:text-slate-300">Tempo: {Math.round(tempo)} BPM</label>
+                                    <label className="text-xs text-slate-600">Tempo: {Math.round(tempo)} BPM</label>
                                     <input
                                         type="range"
                                         min={50}
@@ -588,7 +588,7 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                     />
                                 </div>
                                 <div>
-                                    <label className="text-xs text-slate-600 dark:text-slate-300">Energy Level</label>
+                                    <label className="text-xs text-slate-600 ">Energy Level</label>
                                     <div className="mt-1 flex gap-2">
                                         {(["Low", "Medium", "High"] as Energy[]).map((lv) => (
                                             <button
@@ -597,7 +597,7 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                                 className={`flex-1 rounded-lg px-3 py-2 ring-1 ${
                                                     energy === lv
                                                         ? "bg-primary text-slate-900 ring-primary/60"
-                                                        : "bg-white/80 dark:bg-white/10 text-slate-800 dark:text-[--color-accent] ring-black/10 dark:ring-white/10"
+                                                        : "bg-white/80  text-slate-800  ring-black/10 "
                                                 }`}
                                             >
                                                 {lv}
@@ -606,9 +606,9 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                     </div>
                                 </div>
                                 <div>
-                                    <label className="text-xs text-slate-600 dark:text-slate-300">Singer Style</label>
+                                    <label className="text-xs text-slate-600 ">Singer Style</label>
                                     <select
-                                        className="mt-1 w-full rounded-lg bg-white/80 dark:bg-white/10 ring-1 ring-black/10 dark:ring-white/10 p-2 text-slate-900 dark:text-[--color-accent]"
+                                        className="mt-1 w-full rounded-lg bg-white/80  ring-1 ring-black/10  p-2 text-slate-900 "
                                         value={singer}
                                         onChange={(e) => setSinger(e.target.value as any)}
                                     >
@@ -618,7 +618,7 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                     </select>
                                 </div>
                                 <div>
-                                    <label className="text-xs text-slate-600 dark:text-slate-300">Song Length: {Math.round(lengthSec/60)}:{String(Math.round(lengthSec%60)).padStart(2,'0')}</label>
+                                    <label className="text-xs text-slate-600 ">Song Length: {Math.round(lengthSec/60)}:{String(Math.round(lengthSec%60)).padStart(2,'0')}</label>
                                     <input
                                         type="range"
                                         min={30}
@@ -628,36 +628,36 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                         onChange={(e) => setLengthSec(Number(e.target.value))}
                                         className="mt-2 w-full"
                                     />
-                                    <p className="mt-1 text-[11px] text-slate-500 dark:text-slate-400">Shorter tracks are generated faster.</p>
+                                    <p className="mt-1 text-[11px] text-slate-500 ">Shorter tracks are generated faster.</p>
                                 </div>
                             </div>
 
                             {/* Lyrics Style */}
                             <div className="mt-4">
-                                <div className="text-xs text-slate-600 dark:text-slate-300 mb-1">Lyrics Style</div>
+                                <div className="text-xs text-slate-600 ">Lyrics Style</div>
                                 <div className="flex flex-wrap gap-2">
-                                    <button onClick={() => setLyricsMode('summary')} className={`rounded-full px-3 py-1.5 text-sm ring-1 ${lyricsMode==='summary' ? 'bg-secondary text-slate-900 ring-secondary/60' : 'bg-white/80 dark:bg-white/10 text-slate-800 dark:text-[--color-accent] ring-black/10 dark:ring-white/10'}`}>Summarize Notes into Catchy Lyrics</button>
-                                    <button onClick={() => setLyricsMode('educational')} className={`rounded-full px-3 py-1.5 text-sm ring-1 ${lyricsMode==='educational' ? 'bg-secondary text-slate-900 ring-secondary/60' : 'bg-white/80 dark:bg-white/10 text-slate-800 dark:text-[--color-accent] ring-black/10 dark:ring-white/10'}`}>Keep Educational Tone</button>
-                                    <button onClick={() => setLyricsMode('mix')} className={`rounded-full px-3 py-1.5 text-sm ring-1 ${lyricsMode==='mix' ? 'bg-secondary text-slate-900 ring-secondary/60' : 'bg-white/80 dark:bg-white/10 text-slate-800 dark:text-[--color-accent] ring-black/10 dark:ring-white/10'}`}>Mix Both</button>
+                                    <button onClick={() => setLyricsMode('summary')} className={`rounded-full px-3 py-1.5 text-sm ring-1 ${lyricsMode==='summary' ? 'bg-secondary text-slate-900 ring-secondary/60' : 'bg-white/80  text-slate-800  ring-black/10 '}`}>Summarize Notes into Catchy Lyrics</button>
+                                    <button onClick={() => setLyricsMode('educational')} className={`rounded-full px-3 py-1.5 text-sm ring-1 ${lyricsMode==='educational' ? 'bg-secondary text-slate-900 ring-secondary/60' : 'bg-white/80  text-slate-800  ring-black/10 '}`}>Keep Educational Tone</button>
+                                    <button onClick={() => setLyricsMode('mix')} className={`rounded-full px-3 py-1.5 text-sm ring-1 ${lyricsMode==='mix' ? 'bg-secondary text-slate-900 ring-secondary/60' : 'bg-white/80  text-slate-800  ring-black/10 '}`}>Mix Both</button>
                                 </div>
-                                <p className="mt-2 text-xs text-slate-600 dark:text-slate-300">You can preview generated lyrics before full song generation.</p>
+                                <p className="mt-2 text-xs text-slate-600 ">You can preview generated lyrics before full song generation.</p>
                             </div>
 
                             {/* Manual Topics Input */}
                             <div className="mt-4">
-                                <label className="text-xs text-slate-600 dark:text-slate-300">Areas/Topics to cover (optional)</label>
+                                <label className="text-xs text-slate-600 ">Areas/Topics to cover (optional)</label>
                                 <textarea
                                   value={manualTopics}
                                   onChange={(e) => setManualTopics(e.target.value)}
                                   placeholder="e.g. Backpropagation, Gradient Descent vs Adam, Overfitting, Regularization"
-                                  className="mt-1 w-full rounded-lg bg-white/80 dark:bg-white/10 ring-1 ring-black/10 dark:ring-white/10 p-2 text-sm min-h-20"
+                                  className="mt-1 w-full rounded-lg bg-white/80 ring-1 ring-black/10  p-2 text-sm min-h-20"
                                 />
-                                <p className="mt-1 text-[11px] text-slate-500 dark:text-slate-400">These topics will be prioritized in the lyrics and music prompt.</p>
+                                <p className="mt-1 text-[11px] text-slate-500 ">These topics will be prioritized in the lyrics and music prompt.</p>
                             </div>
 
                             {/* Instruments */}
                             <div className="mt-4">
-                                <div className="text-xs text-slate-600 dark:text-slate-300 mb-2">Instrument Mix</div>
+                                <div className="text-xs text-slate-600  mb-2">Instrument Mix</div>
                                 <div className="flex flex-wrap gap-2">
                                     {INSTRUMENTS.map((name) => {
                                         const on = !!instrumentMix[name];
@@ -668,7 +668,7 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                                 className={`rounded-full px-3 py-1.5 text-sm ring-1 transition ${
                                                     on
                                                         ? "bg-secondary text-slate-900 ring-secondary/60"
-                                                        : "bg-white/80 dark:bg-white/10 text-slate-800 dark:text-[--color-accent] ring-black/10 dark:ring-white/10"
+                                                        : "bg-white/80  text-slate-800  ring-black/10 "
                                                 }`}
                                                 title={on ? "Enabled" : "Enable"}
                                             >
@@ -697,13 +697,13 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                     <div className="h-2 w-full rounded-full bg-slate-200/70 overflow-hidden">
                                         <div className="h-full bg-gradient-to-r from-primary via-secondary to-primary transition-all" style={{ width: `${(Math.min(genStep, steps.length) / steps.length) * 100}%` }} />
                                     </div>
-                                    <div className="flex items-center justify-between text-sm text-slate-700 dark:text-slate-300">
+                                    <div className="flex items-center justify-between text-sm text-slate-700 ">
                                         <span>{steps[Math.min(genStep, steps.length - 1)]}…</span>
                                         <span className="italic opacity-80">{funTips[tipIndex]}</span>
                                     </div>
                                     <div className="h-24 rounded-xl bg-gradient-to-r from-primary/20 via-secondary/20 to-primary/20 relative overflow-hidden">
                                         <div className="absolute inset-0 opacity-60" style={{ backgroundImage: 'radial-gradient(circle at 20% 50%, rgba(255,255,255,0.6) 2px, transparent 2px)', backgroundSize: '20px 20px' }} />
-                                        <div className="absolute inset-0 flex items-center justify-center text-slate-800 dark:text-[--color-accent]">
+                                        <div className="absolute inset-0 flex items-center justify-center text-slate-800 ">
                                             <span className="text-sm">Creating your unique study soundtrack…</span>
                                         </div>
                                     </div>
@@ -717,15 +717,15 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                 {/* Preview section (collapsible) */}
                 {previewOpen && (
                     <section ref={previewRef} className="mt-6">
-                        <div className="rounded-2xl bg-white/95 dark:bg-white/5 backdrop-blur p-6 shadow-md ring-1 ring-black/5 dark:ring-white/10">
+                        <div className="rounded-2xl bg-white/95  backdrop-blur p-6 shadow-md ring-1 ring-black/5 ">
                             <button
                                 className="w-full flex items-center justify-between text-left"
                                 onClick={() => setPreviewOpen((v) => !v)}
                                 aria-expanded={previewOpen}
                             >
                                 <div>
-                                    <h3 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent]">Music Preview</h3>
-                                    <p className="text-xs text-slate-600 dark:text-slate-300">{moodIndicator}</p>
+                                    <h3 className="text-lg font-semibold text-slate-900 ">Music Preview</h3>
+                                    <p className="text-xs text-slate-600 ">{moodIndicator}</p>
                                 </div>
                                 {previewOpen ? <FaChevronUp /> : <FaChevronDown />}
                             </button>
@@ -736,7 +736,7 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                                     <button className={`pb-1 border-b-2 ${previewTab==='lyrics' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500'}`} onClick={() => setPreviewTab('lyrics')}>Lyrics Preview</button>
                                     <button className={`pb-1 border-b-2 ${previewTab==='notes' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500'}`} onClick={() => setPreviewTab('notes')}>Notes Covered</button>
                                 </div>
-                                <div className="mt-3 rounded-lg bg-white/80 dark:bg-white/10 ring-1 ring-black/10 dark:ring-white/10 p-4 max-h-48 overflow-auto text-sm text-slate-800 dark:text-[--color-accent]">
+                                <div className="mt-3 rounded-lg bg-white/80  ring-1 ring-black/10 p-4 max-h-48 overflow-auto text-sm text-slate-800 ">
                                     {previewTab === 'lyrics' ? (
                                         <pre className="whitespace-pre-wrap font-sans">{lyricsText}</pre>
                                     ) : (
@@ -756,11 +756,11 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
 
                                 {/* Edit Controls Panel */}
                                 <div className="mt-4 flex flex-wrap gap-2">
-                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 dark:bg-white/10 dark:ring-white/10" onClick={() => { pushToast('Regenerating lyrics only…'); setLyricsText(lyricsText + '\n\n(Alt verse) Knowledge grows with every line.'); }}>Regenerate Lyrics Only</button>
-                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 dark:bg-white/10 dark:ring-white/10" onClick={() => pushToast('Open genre selector')}>Change Genre</button>
-                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 dark:bg-white/10 dark:ring-white/10" onClick={() => pushToast('Open voice style selector')}>Change Voice Style</button>
-                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 dark:bg-white/10 dark:ring-white/10" onClick={() => pushToast('Adding instrument layer…')}>Add Instrument Layer</button>
-                                    <div className="flex items-center gap-2 rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white dark:bg-white/10 dark:ring-white/10">
+                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 " onClick={() => { pushToast('Regenerating lyrics only…'); setLyricsText(lyricsText + '\n\n(Alt verse) Knowledge grows with every line.'); }}>Regenerate Lyrics Only</button>
+                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 " onClick={() => pushToast('Open genre selector')}>Change Genre</button>
+                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 " onClick={() => pushToast('Open voice style selector')}>Change Voice Style</button>
+                                    <button className="rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white hover:bg-white/90 " onClick={() => pushToast('Adding instrument layer…')}>Add Instrument Layer</button>
+                                    <div className="flex items-center gap-2 rounded-lg px-3 py-2 ring-1 ring-black/10 bg-white ">
                                         <span className="text-sm">Adjust Tempo</span>
                                         <input type="range" min={50} max={120} value={tempo} onChange={(e)=>setTempo(Number(e.target.value))} />
                                     </div>
@@ -769,7 +769,7 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
                             </div>
 
                             {/* Tips */}
-                            <p className="mt-4 text-sm text-slate-700 dark:text-slate-300">💡 Tip: You can highlight parts of your notes to create mini-tracks for each concept.</p>
+                            <p className="mt-4 text-sm text-slate-700 ">💡 Tip: You can highlight parts of your notes to create mini-tracks for each concept.</p>
                         </div>
                     </section>
                 )}
@@ -777,24 +777,24 @@ const [topicsLoading, setTopicsLoading] = useState<boolean>(false);
 
             {/* Recent Songs */}
             <section className="mx-auto w-full max-w-7xl px-4 sm:px-6 mt-8">
-                <h2 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent] mb-3">Recently Generated Songs</h2>
+                <h2 className="text-lg font-semibold text-slate-900  mb-3">Recently Generated Songs</h2>
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                     {(recentTracks.slice(0,3)).map((t, i) => (
-                        <div key={t.id} className="rounded-2xl bg-white/90 dark:bg-white/5 backdrop-blur p-4 shadow-md ring-1 ring-black/5 dark:ring-white/10">
+                        <div key={t.id} className="rounded-2xl bg-white/90  backdrop-blur p-4 shadow-md ring-1 ring-black/5 ">
                             <div className="flex items-center gap-3">
                                 <div className={`h-12 w-12 rounded-md bg-gradient-to-br ${i % 2 === 0 ? 'from-primary to-secondary' : 'from-secondary to-primary'}`} />
                                 <div className="flex-1 min-w-0">
-                                    <div className="font-medium text-slate-900 dark:text-[--color-accent] truncate">{t.title}</div>
-                                    <div className="text-xs text-slate-600 dark:text-slate-300">{new Date(t.playedAt).toLocaleString()}</div>
+                                    <div className="font-medium text-slate-900  truncate">{t.title}</div>
+                                    <div className="text-xs text-slate-600 ">{new Date(t.playedAt).toLocaleString()}</div>
                                 </div>
                                 {t.href ? (
-                                    <a href={t.href} className="rounded-md px-2 py-1 ring-1 ring-black/10 bg-white hover:bg-white/90 dark:bg-white/10 dark:ring-white/10 text-xs">Open</a>
+                                    <a href={t.href} className="rounded-md px-2 py-1 ring-1 ring-black/10 bg-white hover:bg-white/90  text-xs">Open</a>
                                 ) : null}
                             </div>
                         </div>
                     ))}
                     {recentTracks.length === 0 && (
-                        <div className="rounded-2xl bg-white/90 dark:bg-white/5 backdrop-blur p-6 text-sm text-slate-700 dark:text-slate-300 ring-1 ring-black/5 dark:ring-white/10">No recent songs yet. Generate your first track above!</div>
+                        <div className="rounded-2xl bg-white/90  backdrop-blur p-6 text-sm text-slate-700  ring-1 ring-black/5 ">No recent songs yet. Generate your first track above!</div>
                     )}
                 </div>
             </section>
diff --git a/app/offline/page.tsx b/app/offline/page.tsx
index 2800636..d6622f0 100644
--- a/app/offline/page.tsx
+++ b/app/offline/page.tsx
@@ -5,12 +5,12 @@ export default function OfflinePage() {
   return (
     <main className="min-h-screen flex flex-col items-center justify-center gap-4 p-6 text-center">
       <h1 className="text-2xl font-semibold">You are offline</h1>
-      <p className="text-slate-600 dark:text-slate-300 max-w-prose">
+      <p className="text-slate-600  max-w-prose">
         Knotes works as a Progressive Web App. Some features may be unavailable without internet. You can still open previously visited pages and your saved sessions.
       </p>
       <div className="flex gap-3">
-        <Link className="px-4 py-2 rounded-lg ring-1 ring-black/10 bg-white hover:bg-white/90 dark:bg-white/10" href="/">Go to Home</Link>
-        <Link className="px-4 py-2 rounded-lg ring-1 ring-black/10 bg-white hover:bg-white/90 dark:bg-white/10" href="/study">Open Study</Link>
+        <Link className="px-4 py-2 rounded-lg ring-1 ring-black/10 bg-white hover:bg-white/90 " href="/">Go to Home</Link>
+        <Link className="px-4 py-2 rounded-lg ring-1 ring-black/10 bg-white hover:bg-white/90 " href="/study">Open Study</Link>
       </div>
     </main>
   );
diff --git a/app/study/page.tsx b/app/study/page.tsx
index 7aa14a8..0ee8321 100644
--- a/app/study/page.tsx
+++ b/app/study/page.tsx
@@ -717,7 +717,7 @@ export default function StudyWorkspace() {
       <div className={`mx-auto w-full max-w-7xl px-4 sm:px-6 pt-16 ${rightPadClass} transition-[padding] duration-300`}>
         <div className="mb-6 flex items-center justify-between">
           {/* Left: Timer control */}
-          <div className="flex items-center gap-2 text-slate-900 dark:text-[--color-accent]">
+          <div className="flex items-center gap-2 text-slate-900 ">
             {isTimerRunning && showCountdown ? (
               <button
                 onClick={() => setTimerOpen(true)}
@@ -790,11 +790,11 @@ export default function StudyWorkspace() {
 
           {/* Right: Focus Mode toggle */}
           <div className="flex items-center gap-3">
-            <span className="text-sm text-slate-700 dark:text-slate-300">Focus Mode</span>
+            <span className="text-sm text-slate-700 ">Focus Mode</span>
             <button
               aria-pressed={focusMode}
               onClick={() => setFocusMode(v => !v)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${focusMode ? 'bg-blue-500' : 'bg-slate-300'} ring-1 ring-black/10 dark:ring-white/10`}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${focusMode ? 'bg-blue-500' : 'bg-slate-300'} ring-1 ring-black/10 `}
               title="Hide menus and darken UI"
             >
               <span
@@ -1334,28 +1334,28 @@ export default function StudyWorkspace() {
           aria-modal="true"
           onClick={(e) => { if (e.target === e.currentTarget) setTimerOpen(false); }}
         >
-          <div className="absolute inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm" />
-          <div className="relative z-10 w-full max-w-md rounded-2xl bg-accent/95 dark:bg-[--color-dark-bg]/95 ring-1 ring-black/10 dark:ring-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.25)]">
-            <div className="flex items-center justify-between px-5 py-4 border-b border-black/10 dark:border-white/10">
-              <h3 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent]">Timer</h3>
+          <div className="absolute inset-0 bg-black/30  backdrop-blur-sm" />
+          <div className="relative z-10 w-full max-w-md rounded-2xl bg-accent/95  ring-1 ring-black/10  shadow-[0_20px_50px_rgba(0,0,0,0.25)]">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-black/10 ">
+              <h3 className="text-lg font-semibold text-slate-900 ">Timer</h3>
               <button
                 aria-label="Close"
-                className="inline-flex h-9 w-9 items-center justify-center rounded-lg ring-1 ring-black/10 dark:ring-white/10 bg-white/70 dark:bg-white/5 text-slate-700 dark:text-[--color-accent] hover:bg-white/80"
+                className="inline-flex h-9 w-9 items-center justify-center rounded-lg ring-1 ring-black/10  bg-white/70 text-slate-700  hover:bg-white/80"
                 onClick={() => setTimerOpen(false)}
               >
                 <HiOutlineX size={18} />
               </button>
             </div>
-            <div className="px-5 py-4 space-y-4 text-slate-800 dark:text-slate-200">
+            <div className="px-5 py-4 space-y-4 text-slate-800 ">
               <div className="flex gap-2">
                 <button
-                  className={`flex-1 rounded-lg px-3 py-2 ring-1 ${timerMode === 'pomodoro' ? 'bg-primary text-slate-900 ring-primary/50' : 'bg-white/70 dark:bg-white/5 ring-black/10 dark:ring-white/10'}`}
+                  className={`flex-1 rounded-lg px-3 py-2 ring-1 ${timerMode === 'pomodoro' ? 'bg-primary text-slate-900 ring-primary/50' : 'bg-white/70  ring-black/10 '}`}
                   onClick={() => setTimerMode('pomodoro')}
                 >
                   Pomodoro (25 min)
                 </button>
                 <button
-                  className={`flex-1 rounded-lg px-3 py-2 ring-1 ${timerMode === 'custom' ? 'bg-primary text-slate-900 ring-primary/50' : 'bg-white/70 dark:bg-white/5 ring-black/10 dark:ring-white/10'}`}
+                  className={`flex-1 rounded-lg px-3 py-2 ring-1 ${timerMode === 'custom' ? 'bg-primary text-slate-900 ring-primary/50' : 'bg-white/70  ring-black/10 '}`}
                   onClick={() => setTimerMode('custom')}
                 >
                   Custom
@@ -1364,7 +1364,7 @@ export default function StudyWorkspace() {
 
               {timerMode === 'custom' && (
                 <div className="flex items-center gap-3">
-                  <label htmlFor="minutes" className="text-sm text-slate-600 dark:text-slate-300">Minutes</label>
+                  <label htmlFor="minutes" className="text-sm text-slate-600 ">Minutes</label>
                   <input
                     id="minutes"
                     type="number"
@@ -1372,12 +1372,12 @@ export default function StudyWorkspace() {
                     max={180}
                     value={customMinutes}
                     onChange={(e) => setCustomMinutes(Math.max(1, Math.min(180, Number(e.target.value) || 0)))}
-                    className="w-24 rounded-lg bg-white/80 dark:bg-white/5 ring-1 ring-black/10 dark:ring-white/10 p-2 text-slate-900 dark:text-[--color-accent]"
+                    className="w-24 rounded-lg bg-white/80  ring-1 ring-black/10  p-2 text-slate-900 "
                   />
                 </div>
               )}
 
-              <label className="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+              <label className="inline-flex items-center gap-2 text-sm text-slate-700 ">
                 <input
                   type="checkbox"
                   checked={showCountdown}
@@ -1387,7 +1387,7 @@ export default function StudyWorkspace() {
               </label>
 
               <div className="flex items-center justify-between pt-2">
-                <div className="text-sm text-slate-600 dark:text-slate-300">
+                <div className="text-sm text-slate-600 ">
                   {isTimerRunning ? (
                     <>Remaining: <span className="font-semibold text-red-600">{formatTime(remainingSecs)}</span></>
                   ) : (
@@ -1398,7 +1398,7 @@ export default function StudyWorkspace() {
                   {isTimerRunning ? (
                     <>
                       <button
-                        className="rounded-lg px-4 py-2 ring-1 ring-black/10 dark:ring-white/10 bg-white/70 dark:bg-white/5 hover:bg-white/90"
+                        className="rounded-lg px-4 py-2 ring-1 ring-black/10  bg-white/70  hover:bg-white/90"
                         onClick={() => { setIsTimerRunning(false); setRemainingSecs(0); }}
                       >
                         Stop
@@ -1432,7 +1432,7 @@ export default function StudyWorkspace() {
       {/* Time Up Modal */}
       {timeUpOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="alertdialog" aria-modal="true">
-          <div className="absolute inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm" onClick={() => setTimeUpOpen(false)} />
+          <div className="absolute inset-0 bg-black/30  backdrop-blur-sm" onClick={() => setTimeUpOpen(false)} />
           <div className="relative z-10 w-full max-w-sm rounded-2xl bg-white ring-1 ring-black/10 shadow-xl p-6 text-center">
             <h4 className="text-xl font-semibold text-slate-900 mb-2">Time's up!</h4>
             <p className="text-slate-700 mb-4">Great job. Take a short break and resume when ready.</p>
@@ -1449,11 +1449,11 @@ export default function StudyWorkspace() {
           aria-modal="true"
           onClick={(e) => { if (e.target === e.currentTarget) setAiOpen(false); }}
         >
-          <div className="absolute inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm" />
-          <div className="relative z-10 w-full max-w-2xl rounded-3xl bg-accent/95 dark:bg-[--color-dark-bg]/95 ring-1 ring-black/10 dark:ring-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.25)]">
-            <div className="flex items-center justify-between px-6 py-4 border-b border-black/10 dark:border-white/10 gap-3">
-              <h3 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent]">AI Assistant</h3>
-              <div className="inline-flex rounded-full bg-white/50 dark:bg-white/10 p-1">
+          <div className="absolute inset-0 bg-black/30  backdrop-blur-sm" />
+          <div className="relative z-10 w-full max-w-2xl rounded-3xl bg-accent/95  ring-1 ring-black/10  shadow-[0_20px_50px_rgba(0,0,0,0.25)]">
+            <div className="flex items-center justify-between px-6 py-4 border-b border-black/10  gap-3">
+              <h3 className="text-lg font-semibold text-slate-900 ">AI Assistant</h3>
+              <div className="inline-flex rounded-full bg-white/50  p-1">
                 <TabBtn active={aiTab === "explain"} onClick={() => setAiTab("explain")}>
                   Explain
                 </TabBtn>
@@ -1469,13 +1469,13 @@ export default function StudyWorkspace() {
               </div>
               <button
                 aria-label="Close"
-                className="inline-flex h-9 w-9 items-center justify-center rounded-lg ring-1 ring-black/10 dark:ring-white/10 bg-white/70 dark:bg-white/5 text-slate-700 dark:text-[--color-accent] hover:bg-white/80"
+                className="inline-flex h-9 w-9 items-center justify-center rounded-lg ring-1 ring-black/10  bg-white/70  text-slate-700 hover:bg-white/80"
                 onClick={() => setAiOpen(false)}
               >
                 <HiOutlineX size={18} />
               </button>
             </div>
-            <div className="px-6 py-5 max-h-[45vh] overflow-auto text-slate-900 dark:text-slate-100">
+            <div className="px-6 py-5 max-h-[45vh] overflow-auto text-slate-900 ">
               <p className="whitespace-pre-wrap leading-7">{aiOutput || "AI is ready. Choose a tab or run an action from the toolbar."}</p>
             </div>
             <div className="px-6 pb-6">
@@ -1509,7 +1509,7 @@ export default function StudyWorkspace() {
 function ToolBtn({ children, title, onClick }: { children: React.ReactNode; title: string; onClick: () => void }) {
   return (
     <button
-      className="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-slate-800 dark:text-[--color-accent] hover:bg-black/5 dark:hover:bg-white/10"
+      className="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-slate-800  hover:bg-black/5 "
       title={title}
       onClick={onClick}
     >
@@ -1526,9 +1526,9 @@ function Panel({ title, open, onToggle, onCopy, children }: {
   children: React.ReactNode;
 }) {
   return (
-    <div className="mb-3 rounded-2xl ring-1 ring-black/5 dark:ring-white/10 bg-white/80 dark:bg-white/5">
+    <div className="mb-3 rounded-2xl ring-1 ring-black/5 bg-white/80 ">
       <div className="flex items-center justify-between px-4 py-3">
-        <button className="inline-flex items-center gap-2 text-sm font-medium text-slate-800 dark:text-[--color-accent]" onClick={onToggle}>
+        <button className="inline-flex items-center gap-2 text-sm font-medium text-slate-800 " onClick={onToggle}>
           {open ? <FaChevronDown /> : <FaChevronRight />} {title}
         </button>
         <button className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs text-primary ring-1 ring-primary/40 hover:bg-primary/10" onClick={onCopy}>
@@ -1548,7 +1548,7 @@ function Panel({ title, open, onToggle, onCopy, children }: {
 function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button
-      className={`px-3 py-1 rounded-full text-sm ${active ? "bg-primary text-slate-900" : "text-slate-700 dark:text-slate-200 hover:bg-white/60 dark:hover:bg-white/10"}`}
+      className={`px-3 py-1 rounded-full text-sm ${active ? "bg-primary text-slate-900" : "text-slate-700  hover:bg-white/60 "}`}
       onClick={onClick}
     >
       {children}
diff --git a/components/ChatPanel.tsx b/components/ChatPanel.tsx
index 2b01238..260aa8b 100644
--- a/components/ChatPanel.tsx
+++ b/components/ChatPanel.tsx
@@ -51,16 +51,16 @@ export default function ChatPanel({
   if (!open) return null;
 
   return (
-    <div className="fixed top-16 bottom-6 right-4 z-50 w-[92vw] max-w-lg rounded-2xl bg-white/95 dark:bg-[--color-dark-bg]/95 ring-1 ring-black/10 dark:ring-white/10 shadow-2xl overflow-hidden flex flex-col">
+    <div className="fixed top-16 bottom-6 right-4 z-50 w-[92vw] max-w-lg rounded-2xl bg-white/95  ring-1 ring-black/10  shadow-2xl overflow-hidden flex flex-col">
       {/* Header using Chatscope ConversationHeader for consistency */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-black/10 dark:border-white/10">
-        <div className="flex items-center gap-2 text-slate-900 dark:text-[--color-accent]">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-black/10 ">
+        <div className="flex items-center gap-2 text-slate-900">
           <span className="font-semibold">{title}</span>
         </div>
         <div className="flex items-center gap-2">
           <button
             aria-label="Close chat"
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md ring-1 ring-black/10 dark:ring-white/10 bg-white/70 dark:bg-white/10 hover:bg-white/90"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md ring-1 ring-black/10  bg-white/70 hover:bg-white/90"
             onClick={onClose}
           >
             <HiOutlineX size={16} />
@@ -97,13 +97,13 @@ export default function ChatPanel({
                 );
               })}
             </MessageList>
-            <div as={MessageInput} className="flex items-center gap-2 px-2 py-2 border-t border-black/10 dark:border-white/10 bg-white/90 dark:bg-[--color-dark-bg]/90 shrink-0">
+            <div as={MessageInput} className="flex items-center gap-2 px-2 py-2 border-t border-black/10  bg-white/90  shrink-0">
               {/* Record and Speaker controls moved next to input */}
               <button
                 type="button"
                 aria-label={recording ? "Stop recording" : "Start recording"}
                 title={recording ? "Stop recording" : "Hold to speak or click to toggle recording"}
-                className={`inline-flex items-center justify-center h-10 w-10 rounded-md ring-1 ring-black/10 dark:ring-white/10 transition-colors ${recording ? 'bg-red-600 text-white' : 'bg-white/70 dark:bg-white/10 text-slate-800 dark:text-[--color-accent]'}`}
+                className={`inline-flex items-center justify-center h-10 w-10 rounded-md ring-1 ring-black/10  transition-colors ${recording ? 'bg-red-600 text-white' : 'bg-white/70 text-slate-800 '}`}
                 onMouseDown={onMicStart}
                 onMouseUp={onMicStop}
                 onTouchStart={onMicStart}
@@ -116,7 +116,7 @@ export default function ChatPanel({
                 type="button"
                 aria-label={speakEnabled ? "Disable voice reply" : "Enable voice reply"}
                 title="Toggle voice reply"
-                className={`inline-flex items-center justify-center h-10 w-10 rounded-md ring-1 ring-black/10 dark:ring-white/10 transition-colors ${speakEnabled ? 'bg-primary text-slate-900' : 'bg-white/70 dark:bg-white/10 text-slate-800 dark:text-[--color-accent]'}`}
+                className={`inline-flex items-center justify-center h-10 w-10 rounded-md ring-1 ring-black/10  transition-colors ${speakEnabled ? 'bg-primary text-slate-900' : 'bg-white/70  text-slate-800 '}`}
                 onClick={onToggleSpeak}
               >
                 <FaVolumeUp />
diff --git a/components/FeatureCard.tsx b/components/FeatureCard.tsx
index 1c88e0b..b7b3141 100644
--- a/components/FeatureCard.tsx
+++ b/components/FeatureCard.tsx
@@ -9,13 +9,13 @@ type FeatureCardProps = {
 
 export default function FeatureCard({ icon, title, description }: FeatureCardProps) {
   return (
-    <div className="group relative flex flex-col items-center rounded-3xl bg-white/70 dark:bg-white/5 backdrop-blur-sm p-6 text-center shadow-[0_8px_24px_rgba(0,0,0,0.06)] ring-1 ring-black/5 dark:ring-white/10">
+    <div className="group relative flex flex-col items-center rounded-3xl bg-white/70 backdrop-blur-sm p-6 text-center shadow-[0_8px_24px_rgba(0,0,0,0.06)] ring-1 ring-black/5 ">
       <div className="mb-4 inline-flex h-14 w-14 items-center justify-center rounded-full bg-white text-primary ring-1 ring-primary/30">
        
         {icon}
       </div>
-      <h3 className="text-lg font-semibold text-slate-900 dark:text-[--color-accent]">{title}</h3>
-      <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">{description}</p>
+      <h3 className="text-lg font-semibold text-slate-900 ">{title}</h3>
+      <p className="mt-2 text-sm text-slate-600 ">{description}</p>
       {/* Soft glow on hover */}
       <div className="pointer-events-none absolute inset-0 -z-10 rounded-3xl opacity-0 transition-opacity duration-300 group-hover:opacity-100" style={{
         background:'color(display-p3 0.86 0.892 0.905 / 0.18)',
diff --git a/components/Footer.tsx b/components/Footer.tsx
index d0c0b6c..5232544 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -4,28 +4,28 @@ export default function Footer() {
   const year = new Date().getFullYear();
   return (
     <footer className="w-full bg-transparent">
-      <div className="mx-auto w-full max-w-6xl px-6 py-8 border-t border-black/5 dark:border-white/10">
+      <div className="mx-auto w-full max-w-6xl px-6 py-8 border-t border-black/5 ">
         {/* Links row */}
-        <nav aria-label="Footer" className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-slate-700 dark:text-slate-300">
-          <Link href="#" className="hover:text-slate-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
+        <nav aria-label="Footer" className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-slate-700 ">
+          <Link href="#" className="hover:text-slate-900  focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
             Privacy
           </Link>
-          <span className="text-slate-400 dark:text-slate-500 select-none">|</span>
-          <Link href="#" className="hover:text-slate-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
+          <span className="text-slate-400 select-none">|</span>
+          <Link href="#" className="hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
             Terms
           </Link>
-          <span className="text-slate-400 dark:text-slate-500 select-none">|</span>
-          <Link href="#" className="hover:text-slate-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
+          <span className="text-slate-400  select-none">|</span>
+          <Link href="#" className="hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
             About Knotes
           </Link>
-          <span className="text-slate-400 dark:text-slate-500 select-none">|</span>
-          <a href="mailto:hello@knotes.app" className="hover:text-slate-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
+          <span className="text-slate-400 select-none">|</span>
+          <a href="mailto:hello@knotes.app" className="hover:text-slate-900  focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded px-1">
             Feedback
           </a>
         </nav>
 
         {/* Copyright line */}
-        <p className="mt-3 text-center text-xs text-slate-500 dark:text-slate-400">
+        <p className="mt-3 text-center text-xs text-slate-500">
           © {year || 2025} Knotes — Built with Chrome Built-in AI
         </p>
       </div>
diff --git a/components/HighlightToolbar.tsx b/components/HighlightToolbar.tsx
index f80101c..424eb5c 100644
--- a/components/HighlightToolbar.tsx
+++ b/components/HighlightToolbar.tsx
@@ -17,25 +17,25 @@ export default function HighlightToolbar({ visible, x, y, onExplain, onRead, onS
     <div
       role="toolbar"
       aria-label="AI popup actions"
-      className="fixed z-50 -translate-x-1/2 -translate-y-full rounded-xl backdrop-blur-md bg-white/80 dark:bg-white/10 border border-black/10 dark:border-white/10 shadow-lg px-2 py-1 flex items-center gap-1"
+      className="fixed z-50 -translate-x-1/2 -translate-y-full rounded-xl backdrop-blur-md bg-white/80  border border-black/10  shadow-lg px-2 py-1 flex items-center gap-1"
       style={{ left: `${x}px`, top: `${y}px` }}
     >
       <button
-        className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-slate-800 dark:text-[--color-accent] hover:bg-black/5 dark:hover:bg-white/10 text-xs"
+        className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-slate-800  hover:bg-black/5  text-xs"
         title="Explain"
         onClick={onExplain}
       >
         <FaBrain /> <span className="hidden sm:inline">Explain</span>
       </button>
       <button
-        className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-slate-800 dark:text-[--color-accent] hover:bg-black/5 dark:hover:bg-white/10 text-xs"
+        className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-slate-800  hover:bg-black/5  text-xs"
         title="Read"
         onClick={onRead}
       >
         <FaVolumeUp /> <span className="hidden sm:inline">Read</span>
       </button>
       <button
-        className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-slate-800 dark:text-[--color-accent] hover:bg-black/5 dark:hover:bg-white/10 text-xs"
+        className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-slate-800  hover:bg-black/5  text-xs"
         title="Search More Info"
         onClick={onSearch}
       >
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 8ac7b2c..f3b2fd0 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -17,15 +17,15 @@ export default function NavBar({ isAuthenticated = false }: NavBarProps) {
   const isAuth = Boolean(isAuthenticated || user);
 
   const NavCenter = () => (
-    <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-slate-700 dark:text-[--color-accent]">
-      <Link href="/library?intent=study" className="hover:text-slate-900 dark:hover:text-white">Study</Link>
-      <Link href="/library?intent=music" className="hover:text-slate-900 dark:hover:text-white">Music</Link>
-      <Link href="/library" className="hover:text-slate-900 dark:hover:text-white">Library</Link>
+    <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-slate-700 ">
+      <Link href="/library?intent=study" className="hover:text-slate-900">Study</Link>
+      <Link href="/library?intent=music" className="hover:text-slate-900">Music</Link>
+      <Link href="/library" className="hover:text-slate-900">Library</Link>
     </nav>
   );
 
   return (
-    <header className="sticky top-0 z-40 w-full bg-white dark:bg-white backdrop-blur">
+    <header className="sticky top-0 z-40 w-full bg-white backdrop-blur">
       <div className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-4 sm:px-6">
         {/* Left: Logo */}
         <Link href="/" className="flex items-center gap-2">
@@ -37,7 +37,7 @@ export default function NavBar({ isAuthenticated = false }: NavBarProps) {
             className="rounded-md"
             priority
           />
-          <span className="hidden sm:inline text-base font-semibold text-slate-900 dark:text-[--color-accent]">
+          <span className="hidden sm:inline text-base font-semibold text-slate-900 ">
             Knotes
           </span>
         </Link>
@@ -63,7 +63,7 @@ export default function NavBar({ isAuthenticated = false }: NavBarProps) {
                 href="/login"
                 className="inline-flex items-center justify-center rounded-xl bg-transparent px-4 py-2 text-slate-900 font-medium shadow-[0_4px_0_rgba(0,0,0,0.08)] transition hover:shadow-[0_6px_0_rgba(0,0,0,0.1)] hover:brightness-105 active:translate-y-px active:shadow-[0_3px_0_rgba(0,0,0,0.1)]"
               >            
-                <svg className="w-6 h-6 text-blue-300 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#224971" viewBox="0 0 24 24">
+                <svg className="w-6 h-6 text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#224971" viewBox="0 0 24 24">
                   <path fillRule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clipRule="evenodd"/>
                 </svg>
                 
@@ -74,7 +74,7 @@ export default function NavBar({ isAuthenticated = false }: NavBarProps) {
           {/* Mobile menu button */}
           <button
             aria-label="Toggle menu"
-            className="md:hidden inline-flex h-10 w-10 items-center justify-center rounded-lg ring-1 ring-black/10 dark:ring-white/15 bg-white/70 dark:bg-white/5 text-slate-700 dark:text-[--color-accent]"
+            className="md:hidden inline-flex h-10 w-10 items-center justify-center rounded-lg ring-1 ring-black/10  bg-white/70  text-slate-700 "
             onClick={() => setOpen((v) => !v)}
           >
             {open ? <HiOutlineX size={20} /> : <HiOutlineMenu size={20} />}
@@ -84,13 +84,13 @@ export default function NavBar({ isAuthenticated = false }: NavBarProps) {
 
       {/* Mobile panel */}
       {open && (
-        <div className="md:hidden border-t border-black/5 dark:border-white/10 bg-accent/90 dark:bg-[--color-dark-bg]/80 backdrop-blur">
+        <div className="md:hidden border-t border-black/5  bg-accent/90  backdrop-blur">
           <div className="mx-auto max-w-5xl px-4 sm:px-6 py-3">
             {isAuth ? (
               <div className="flex flex-col gap-2">
-                <Link href="/library?intent=study" className="py-2 text-slate-800 dark:text-[--color-accent]">Study</Link>
-                <Link href="/library?intent=music" className="py-2 text-slate-800 dark:text-[--color-accent]">Music</Link>
-                <Link href="/library" className="py-2 text-slate-800 dark:text-[--color-accent]">Library</Link>
+                <Link href="/library?intent=study" className="py-2 text-slate-800 ">Study</Link>
+                <Link href="/library?intent=music" className="py-2 text-slate-800 ">Music</Link>
+                <Link href="/library" className="py-2 text-slate-800 ">Library</Link>
                 <Link
                 href="/settings"
                 className="mt-2 inline-flex w-max items-center gap-2 rounded-xl bg-secondary/70 px-3 py-2 text-slate-900 shadow-[0_3px_0_rgba(0,0,0,0.06)]"
@@ -101,14 +101,14 @@ export default function NavBar({ isAuthenticated = false }: NavBarProps) {
               </div>
             ) : (
               <div className="flex items-center justify-between py-2">
-                <span className="text-slate-700 dark:text-[--color-accent] font-medium">Welcome</span>
+                <span className="text-slate-700  font-medium">Welcome</span>
                 <Link
                   href="/login"
                    title="Login" 
                   className="inline-flex items-center justify-center rounded-xl bg-transparent px-4 py-2 text-slate-900 font-medium shadow-[0_4px_0_rgba(0,0,0,0.08)] transition hover:shadow-[0_6px_0_rgba(0,0,0,0.1)] hover:brightness-105 active:translate-y-px active:shadow-[0_3px_0_rgba(0,0,0,0.1)]"
                 >
                   
-                  <svg className="w-6 h-6 text-gray-800 dark:text-white " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                     <path fillRule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clipRule="evenodd"/>
                   </svg>
 
diff --git a/components/music/PlaylistModal.tsx b/components/music/PlaylistModal.tsx
index 8f73c91..e54d0a0 100644
--- a/components/music/PlaylistModal.tsx
+++ b/components/music/PlaylistModal.tsx
@@ -46,27 +46,27 @@ export default function PlaylistModal({ open, onClose, trackId }: PlaylistModalP
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative w-[min(92vw,520px)] rounded-2xl bg-white dark:bg-gray-900 shadow-xl ring-1 ring-black/10 dark:ring-white/10 p-5">
+      <div className="relative w-[min(92vw,520px)] rounded-2xl bg-white shadow-xl ring-1 ring-black/10  p-5">
         <div className="flex items-center justify-between mb-3">
-          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Add to Playlist</h3>
-          <button onClick={onClose} className="text-sm px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800">Close</button>
+          <h3 className="text-lg font-semibold text-slate-900 ">Add to Playlist</h3>
+          <button onClick={onClose} className="text-sm px-2 py-1 rounded-md bg-gray-100 ">Close</button>
         </div>
 
         <div className="space-y-4">
           <div>
-            <div className="text-sm font-medium text-slate-800 dark:text-gray-200 mb-2">Existing Playlists</div>
+            <div className="text-sm font-medium text-slate-800  mb-2">Existing Playlists</div>
             {playlists.length === 0 ? (
-              <div className="text-sm text-slate-500 dark:text-gray-400">No playlists yet.</div>
+              <div className="text-sm text-slate-500 ">No playlists yet.</div>
             ) : (
-              <ul className="max-h-40 overflow-auto divide-y divide-gray-100/60 dark:divide-white/10 rounded-md ring-1 ring-black/5 dark:ring-white/10">
+              <ul className="max-h-40 overflow-auto divide-y divide-gray-100/60  rounded-md ring-1 ring-black/5 ">
                 {playlists.map(p => (
-                  <li key={p.id} className="flex items-center justify-between px-3 py-2 bg-white/70 dark:bg-white/5">
+                  <li key={p.id} className="flex items-center justify-between px-3 py-2 bg-white/70 ">
                     <div className="truncate">
-                      <div className="text-sm font-medium text-slate-900 dark:text-white truncate">{p.name}</div>
-                      <div className="text-[11px] text-slate-500 dark:text-gray-400">{new Date(p.createdAt).toLocaleDateString()}</div>
+                      <div className="text-sm font-medium text-slate-900  truncate">{p.name}</div>
+                      <div className="text-[11px] text-slate-500 ">{new Date(p.createdAt).toLocaleDateString()}</div>
                     </div>
                     <button
-                      className={`text-xs rounded-md px-3 py-1 ring-1 transition ${selectedId===p.id ? 'bg-blue-600 text-white ring-blue-600' : 'bg-white dark:bg-transparent text-slate-800 dark:text-gray-200 ring-black/10 dark:ring-white/10'}`}
+                      className={`text-xs rounded-md px-3 py-1 ring-1 transition ${selectedId===p.id ? 'bg-blue-600 text-white ring-blue-600' : 'bg-white  text-slate-800  ring-black/10 '}`}
                       onClick={() => setSelectedId(p.id === selectedId ? null : p.id)}
                     >{selectedId===p.id ? 'Selected' : 'Select'}</button>
                   </li>
@@ -76,14 +76,14 @@ export default function PlaylistModal({ open, onClose, trackId }: PlaylistModalP
           </div>
 
           <div>
-            <div className="text-sm font-medium text-slate-800 dark:text-gray-200 mb-1">Or create a new playlist</div>
+            <div className="text-sm font-medium text-slate-800 mb-1">Or create a new playlist</div>
             <div className="flex gap-2">
               <input
                 type="text"
                 value={creatingName}
                 onChange={(e) => setCreatingName(e.target.value)}
                 placeholder="Playlist name"
-                className="flex-1 rounded-lg bg-white/80 dark:bg-white/10 ring-1 ring-black/10 dark:ring-white/10 px-3 py-2 text-sm"
+                className="flex-1 rounded-lg bg-white/80  ring-1 ring-black/10  px-3 py-2 text-sm"
               />
               <button
                 className="rounded-lg px-3 py-2 bg-secondary text-slate-900 font-medium disabled:opacity-60"
@@ -91,7 +91,7 @@ export default function PlaylistModal({ open, onClose, trackId }: PlaylistModalP
                 disabled={!canSubmit || working}
               >Add</button>
             </div>
-            <p className="mt-1 text-[11px] text-slate-500 dark:text-gray-400">We’ll add this song to the selected or newly created playlist.</p>
+            <p className="mt-1 text-[11px] text-slate-500 ">We’ll add this song to the selected or newly created playlist.</p>
           </div>
 
           <div className="flex justify-end">