Sync from GitHub via hub-sync

src/app/[org]/[dataset]/[episode]/episode-viewer.tsx

@@ -93,10 +93,12 @@ export default function EpisodeViewer({
 
   if (error) {
     return (
-      <div className="flex h-screen items-center justify-center bg-slate-950 text-red-400">
-        <div className="max-w-xl p-8 rounded bg-slate-900 border border-red-500 shadow-lg">
-          <h2 className="text-2xl font-bold mb-4">Something went wrong</h2>
-          <p className="text-lg font-mono whitespace-pre-wrap mb-4">{error}</p>
+      <div className="flex h-screen items-center justify-center bg-[var(--bg)] text-red-300">
+        <div className="panel-raised max-w-xl p-6 border-red-500/40">
+          <h2 className="text-xl font-medium mb-3">Something went wrong</h2>
+          <p className="text-sm font-mono whitespace-pre-wrap text-red-200/90">
+            {error}
+          </p>
         </div>
       </div>
     );
@@ -104,7 +106,7 @@ export default function EpisodeViewer({
 
   if (!data) {
     return (
-      <div className="relative h-screen bg-slate-950">
+      <div className="relative h-screen bg-[var(--bg)]">
         <Loading />
       </div>
     );
@@ -480,105 +482,54 @@ function EpisodeViewerInner({
     }
   };
 
+  const TabButton = ({
+    tab,
+    label,
+    title,
+  }: {
+    tab: ActiveTab;
+    label: string;
+    title?: string;
+  }) => {
+    const active = activeTab === tab;
+    return (
+      <button
+        onClick={() => handleTabChange(tab)}
+        title={title}
+        className={`relative px-5 py-3 text-xs font-medium tracking-wide uppercase transition-colors ${
+          active ? "text-cyan-300" : "text-slate-400 hover:text-slate-100"
+        }`}
+      >
+        {label}
+        <span
+          className={`pointer-events-none absolute bottom-0 left-3 right-3 h-px transition-all ${
+            active
+              ? "bg-cyan-400 shadow-[0_0_8px_rgba(56,189,248,0.55)]"
+              : "bg-transparent"
+          }`}
+        />
+      </button>
+    );
+  };
+
   return (
-    <div className="flex flex-col h-screen max-h-screen bg-slate-950 text-gray-200">
+    <div className="flex flex-col h-screen max-h-screen bg-[var(--bg)] text-[var(--text-primary)]">
       {/* Top tab bar */}
-      <div className="flex items-center border-b border-slate-700 bg-slate-900 shrink-0">
-        <button
-          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-            activeTab === "episodes"
-              ? "text-orange-400"
-              : "text-slate-400 hover:text-slate-200"
-          }`}
-          onClick={() => handleTabChange("episodes")}
-        >
-          Episodes
-          {activeTab === "episodes" && (
-            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
-          )}
-        </button>
+      <div className="flex items-center border-b border-white/5 bg-[var(--surface-0)] shrink-0">
+        <TabButton tab="episodes" label="Episodes" />
         {hasURDFSupport(datasetInfo.robot_type) &&
           datasetInfo.codebase_version >= "v3.0" && (
-            <button
-              className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-                activeTab === "urdf"
-                  ? "text-orange-400"
-                  : "text-slate-400 hover:text-slate-200"
-              }`}
-              onClick={() => handleTabChange("urdf")}
-            >
-              3D Replay
-              {activeTab === "urdf" && (
-                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
-              )}
-            </button>
-          )}
-        <button
-          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-            activeTab === "statistics"
-              ? "text-orange-400"
-              : "text-slate-400 hover:text-slate-200"
-          }`}
-          onClick={() => handleTabChange("statistics")}
-        >
-          Statistics
-          {activeTab === "statistics" && (
-            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
+            <TabButton tab="urdf" label="3D Replay" />
           )}
-        </button>
-        <button
-          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-            activeTab === "filtering"
-              ? "text-orange-400"
-              : "text-slate-400 hover:text-slate-200"
-          }`}
-          onClick={() => handleTabChange("filtering")}
-        >
-          Filtering
-          {activeTab === "filtering" && (
-            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
-          )}
-        </button>
-        <button
-          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-            activeTab === "frames"
-              ? "text-orange-400"
-              : "text-slate-400 hover:text-slate-200"
-          }`}
-          onClick={() => handleTabChange("frames")}
-        >
-          Frames
-          {activeTab === "frames" && (
-            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
-          )}
-        </button>
-        <button
-          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-            activeTab === "insights"
-              ? "text-orange-400"
-              : "text-slate-400 hover:text-slate-200"
-          }`}
-          onClick={() => handleTabChange("insights")}
-        >
-          Action Insights
-          {activeTab === "insights" && (
-            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
-          )}
-        </button>
-        <button
-          className={`px-6 py-2.5 text-sm font-medium transition-colors relative ${
-            activeTab === "doctor"
-              ? "text-orange-400"
-              : "text-slate-400 hover:text-slate-200"
-          }`}
-          onClick={() => handleTabChange("doctor")}
+        <TabButton tab="statistics" label="Statistics" />
+        <TabButton tab="filtering" label="Filtering" />
+        <TabButton tab="frames" label="Frames" />
+        <TabButton tab="insights" label="Action Insights" />
+        <TabButton
+          tab="doctor"
+          label="Doctor"
           title="Dataset quality diagnostics (powered by lerobot-doctor)"
-        >
-          Doctor
-          {activeTab === "doctor" && (
-            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-orange-500" />
-          )}
-        </button>
+        />
       </div>
 
       {/* Body: sidebar + content */}
@@ -614,32 +565,32 @@ function EpisodeViewerInner({
 
           {activeTab === "episodes" && (
             <>
-              <div className="flex items-center justify-start my-4">
+              <div className="flex items-center gap-4 mb-2">
                 <a
                   href="https://github.com/huggingface/lerobot"
                   target="_blank"
-                  className="block"
+                  className="block shrink-0 opacity-90 hover:opacity-100 transition-opacity"
                 >
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
                     src="https://github.com/huggingface/lerobot/raw/main/media/readme/lerobot-logo-thumbnail.png"
                     alt="LeRobot Logo"
-                    className="w-32"
+                    className="w-24"
                   />
                 </a>
 
-                <div>
+                <div className="min-w-0">
                   <a
                     href={`https://huggingface.co/datasets/${datasetInfo.repoId}`}
                     target="_blank"
+                    className="text-slate-200 hover:text-cyan-300 transition-colors"
                   >
-                    <p className="text-lg font-semibold">
+                    <p className="text-base font-medium truncate">
                       {datasetInfo.repoId}
                     </p>
                   </a>
-
-                  <p className="font-mono text-lg font-semibold">
-                    episode {episodeId}
+                  <p className="text-[10px] uppercase tracking-wide text-slate-500 mt-0.5 tabular">
+                    Episode · {episodeId}
                   </p>
                 </div>
               </div>
@@ -654,19 +605,15 @@ function EpisodeViewerInner({
 
               {/* Language Instruction */}
               {task && (
-                <div className="mb-6 p-4 bg-slate-800 rounded-lg border border-slate-600">
-                  <p className="text-slate-300">
-                    <span className="font-semibold text-slate-100">
-                      Language Instruction:
-                    </span>
+                <div className="mb-6 panel p-4">
+                  <p className="text-[10px] uppercase tracking-wide text-slate-500">
+                    Language Instruction
                   </p>
-                  <div className="mt-2 text-slate-300">
+                  <div className="mt-1.5 space-y-0.5 text-sm text-slate-200">
                     {task
                       .split("\n")
                       .map((instruction: string, index: number) => (
-                        <p key={index} className="mb-1">
-                          {instruction}
-                        </p>
+                        <p key={index}>{instruction}</p>
                       ))}
                   </div>
                 </div>

src/app/explore/explore-grid.tsx

@@ -26,14 +26,16 @@ export default function ExploreGrid({
   const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
 
   return (
-    <main className="p-8">
-      <h1 className="text-2xl font-bold mb-6">Explore LeRobot Datasets</h1>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+    <main className="px-8 py-10 max-w-7xl mx-auto">
+      <h1 className="text-xl font-medium tracking-tight mb-6 text-slate-100">
+        Explore LeRobot datasets
+      </h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {datasets.map((ds, idx) => (
           <Link
             key={ds.id}
             href={`/${ds.id}`}
-            className="relative border rounded-lg p-4 bg-white shadow hover:shadow-lg transition overflow-hidden h-48 flex items-end group"
+            className="relative rounded-md overflow-hidden h-48 flex items-end group panel hover:border-cyan-400/40 transition-colors"
             onMouseEnter={() => {
               const vid = videoRefs.current[idx];
               if (vid) vid.play();
@@ -64,36 +66,36 @@ export default function ExploreGrid({
                 }
               }}
             />
-            <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-10 pointer-events-none" />
-            <div className="relative z-20 font-mono text-blue-100 break-all text-sm bg-black/60 backdrop-blur px-2 py-1 rounded shadow">
+            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10 pointer-events-none" />
+            <div className="relative z-20 w-full px-3 py-2 text-xs text-slate-200 truncate">
               {ds.id}
             </div>
           </Link>
         ))}
       </div>
-      <div className="flex justify-center mt-8 gap-4">
+      <div className="flex justify-center mt-8 gap-3">
         {currentPage > 1 && (
           <button
-            className="px-6 py-2 bg-gray-600 text-white rounded shadow hover:bg-gray-700 transition"
+            className="px-4 py-2 rounded-md panel text-sm text-slate-300 hover:text-slate-100 hover:bg-white/5 transition-colors"
             onClick={() => {
               const params = new URLSearchParams(window.location.search);
               params.set("p", (currentPage - 1).toString());
               window.location.search = params.toString();
             }}
           >
-            Previous
+            ‹ Previous
           </button>
         )}
         {currentPage < totalPages && (
           <button
-            className="px-6 py-2 bg-blue-600 text-white rounded shadow hover:bg-blue-700 transition"
+            className="px-4 py-2 rounded-md bg-cyan-400/10 border border-cyan-400/30 text-cyan-300 text-sm hover:bg-cyan-400/15 transition-colors"
             onClick={() => {
               const params = new URLSearchParams(window.location.search);
               params.set("p", (currentPage + 1).toString());
               window.location.search = params.toString();
             }}
           >
-            Next
+            Next ›
           </button>
         )}
       </div>

src/app/globals.css

@@ -1,35 +1,88 @@
 @import "tailwindcss";
 
+/* ── Design tokens ────────────────────────────────────────────────
+   Consolidated palette + surface scale. Use via Tailwind arbitrary
+   values (bg-[var(--surface-1)]) or via the semantic helpers below. */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* surface / depth scale */
+  --bg: #0a0e17;
+  --surface-0: #0d1220;
+  --surface-1: #11172a;
+  --surface-2: #151c33;
+  --border-subtle: rgba(255, 255, 255, 0.05);
+  --border-strong: rgba(255, 255, 255, 0.1);
+
+  /* text scale */
+  --text-primary: #e7ebf3;
+  --text-muted: #9aa3b5;
+  --text-faint: #5b6274;
+
+  /* single accent (cyan). Orange is reserved for destructive. */
+  --accent: #38bdf8;
+  --accent-soft: rgba(56, 189, 248, 0.18);
+  --accent-ring: rgba(56, 189, 248, 0.55);
+
+  --radius: 6px;
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+  --color-bg: var(--bg);
+  --color-surface-0: var(--surface-0);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-accent: var(--accent);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 html {
-  /* Scale all rem-based sizes (text, padding, buttons) up ~12% */
   font-size: 18px;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-feature-settings:
+    "cv11" 1,
+    "ss01" 1;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Numeric readouts always use tabular figures so rows don't jitter. */
+.tabular,
+[data-tabular] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Semantic helpers ────────────────────────────────────────────── */
+.panel {
+  @apply rounded-md border border-white/5 bg-white/[0.02];
+}
+.panel-raised {
+  @apply rounded-md border border-white/10 bg-white/[0.03];
+}
+
+/* Scrollbar: thin, subtle, matches the surface palette. */
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+  background-clip: padding-box;
 }
 
+/* ── Background video (used on the landing page) ─────────────────── */
 .video-background {
   @apply fixed top-0 right-0 bottom-0 left-0 -z-10 overflow-hidden w-screen h-screen;
 }
@@ -41,13 +94,13 @@ body {
   height: auto;
   transform: translate(-50%, -50%);
   object-fit: cover;
-  filter: brightness(0.9);
+  filter: brightness(0.55) saturate(0.85);
 }
 
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(16px);
   }
   to {
     opacity: 1;
@@ -56,5 +109,5 @@ body {
 }
 
 .animate-fade-in-up {
-  animation: fadeInUp 0.6s ease-out forwards;
+  animation: fadeInUp 0.55s ease-out forwards;
 }

src/app/page.tsx

@@ -171,7 +171,7 @@ function HomeInner() {
         {/* Title */}
         <h1 className="text-4xl md:text-5xl font-bold mb-2 drop-shadow-lg tracking-tight">
           LeRobot{" "}
-          <span className="bg-gradient-to-r from-sky-400 to-indigo-400 bg-clip-text text-transparent">
+          <span className="bg-gradient-to-r from-cyan-400 to-sky-300 bg-clip-text text-transparent">
             Dataset
           </span>{" "}
           Visualizer
@@ -208,13 +208,13 @@ function HomeInner() {
               onKeyDown={handleKeyDown}
               onFocus={() => query.trim() && setShowSuggestions(true)}
               placeholder="Enter dataset id (e.g. lerobot/pusht)"
-              className="pl-10 pr-4 py-2.5 rounded-md text-base text-white bg-white/10 backdrop-blur-sm border border-white/30 focus:outline-none focus:border-sky-400 focus:bg-white/15 w-[380px] shadow-md placeholder:text-white/40 transition-colors"
+              className="pl-10 pr-4 py-2.5 rounded-md text-base text-white bg-white/10 backdrop-blur-sm border border-white/30 focus:outline-none focus:border-cyan-400 focus:bg-white/15 w-[380px] shadow-md placeholder:text-white/40 transition-colors"
               autoComplete="off"
             />
 
             {/* Suggestions dropdown */}
             {showSuggestions && (
-              <ul className="absolute left-0 right-0 top-full mt-1 rounded-md bg-slate-900/95 backdrop-blur-sm border border-white/10 shadow-xl overflow-hidden z-50 max-h-64 overflow-y-auto">
+              <ul className="absolute left-0 right-0 top-full mt-1 rounded-md bg-[var(--surface-1)]/95 backdrop-blur-sm border border-white/10 shadow-xl overflow-hidden z-50 max-h-64 overflow-y-auto">
                 {isLoading ? (
                   <li className="flex items-center gap-2.5 px-4 py-3 text-sm text-white/50">
                     <svg
@@ -246,8 +246,8 @@ function HomeInner() {
                         type="button"
                         className={`w-full text-left px-4 py-2.5 text-sm transition-colors ${
                           i === activeIndex
-                            ? "bg-sky-600 text-white"
-                            : "text-slate-200 hover:bg-slate-700"
+                            ? "bg-cyan-500 text-white"
+                            : "text-slate-200 hover:bg-white/10"
                         }`}
                         onMouseDown={(e) => {
                           e.preventDefault();
@@ -272,7 +272,7 @@ function HomeInner() {
 
           <button
             type="submit"
-            className="px-5 py-2.5 rounded-md bg-sky-500 text-white font-semibold text-base hover:bg-sky-400 active:scale-95 transition-all shadow-md flex items-center gap-2"
+            className="px-5 py-2.5 rounded-md bg-cyan-500 text-white font-semibold text-base hover:bg-cyan-400 active:scale-95 transition-all shadow-md flex items-center gap-2"
           >
             Go
             <kbd className="text-xs font-mono bg-white/20 rounded px-1 py-0.5 leading-tight">
@@ -291,7 +291,7 @@ function HomeInner() {
               <button
                 key={ds}
                 type="button"
-                className="px-3 py-1.5 rounded-full border border-white/20 text-sm text-sky-200/80 hover:border-sky-400 hover:text-white hover:bg-sky-500/15 active:scale-95 transition-all backdrop-blur-sm"
+                className="px-3 py-1.5 rounded-full border border-white/20 text-sm text-cyan-200/80 hover:border-cyan-400 hover:text-white hover:bg-cyan-500/15 active:scale-95 transition-all backdrop-blur-sm"
                 onClick={() => navigate(ds)}
               >
                 {ds}
@@ -303,7 +303,7 @@ function HomeInner() {
         {/* Explore CTA */}
         <Link
           href="/explore"
-          className="inline-flex items-center gap-2 px-6 py-3 mt-8 rounded-md bg-sky-500/90 backdrop-blur-sm text-white font-semibold text-lg shadow-lg hover:bg-sky-400 active:scale-95 transition-all"
+          className="inline-flex items-center gap-2 px-6 py-3 mt-8 rounded-md bg-cyan-500/90 backdrop-blur-sm text-white font-semibold text-lg shadow-lg hover:bg-cyan-400 active:scale-95 transition-all"
         >
           Explore Open Datasets
           <svg

src/components/action-insights-panel.tsx

@@ -70,7 +70,7 @@ function FullscreenWrapper({ children }: { children: React.ReactNode }) {
     <div className="relative">
       <button
         onClick={() => setFs((v) => !v)}
-        className="absolute top-3 right-3 z-10 p-1.5 rounded bg-slate-700/60 hover:bg-slate-600 text-slate-400 hover:text-slate-200 transition-colors backdrop-blur-sm"
+        className="absolute top-3 right-3 z-10 p-1.5 rounded bg-white/5/60 hover:bg-white/5 text-slate-400 hover:text-slate-200 transition-colors backdrop-blur-sm"
         title={fs ? "Exit fullscreen" : "Fullscreen"}
       >
         <svg
@@ -102,10 +102,10 @@ function FullscreenWrapper({ children }: { children: React.ReactNode }) {
         </svg>
       </button>
       {fs ? (
-        <div className="fixed inset-0 z-50 bg-slate-950/95 overflow-auto p-6">
+        <div className="fixed inset-0 z-50 bg-[var(--bg)]/95 overflow-auto p-6">
           <button
             onClick={() => setFs(false)}
-            className="fixed top-4 right-4 z-50 p-2 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-300 hover:text-white transition-colors"
+            className="fixed top-4 right-4 z-50 p-2 rounded bg-white/5/80 hover:bg-white/5 text-slate-300 hover:text-white transition-colors"
             title="Exit fullscreen (Esc)"
           >
             <svg
@@ -145,7 +145,7 @@ function FlagBtn({ id }: { id: number }) {
     <button
       onClick={() => toggle(id)}
       title={flagged ? "Unflag episode" : "Flag for review"}
-      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}
+      className={`p-0.5 rounded transition-colors ${flagged ? "text-cyan-300" : "text-slate-600 hover:text-slate-400"}`}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -170,7 +170,7 @@ function FlagAllBtn({ ids, label }: { ids: number[]; label?: string }) {
   return (
     <button
       onClick={() => addMany(ids)}
-      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1"
+      className="text-xs text-slate-500 hover:text-cyan-300 transition-colors flex items-center gap-1"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -329,7 +329,7 @@ function AutocorrelationSection({
     return <p className="text-slate-500 italic">No action columns found.</p>;
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10 space-y-4">
       <div>
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-slate-200">
@@ -343,7 +343,7 @@ function AutocorrelationSection({
               Shows how correlated each action dimension is with itself over
               increasing time lags. Where autocorrelation drops below 0.5
               suggests a{" "}
-              <span className="text-orange-400 font-medium">
+              <span className="text-cyan-300 font-medium">
                 natural action chunk boundary
               </span>{" "}
               — actions beyond this lag are essentially independent, so
@@ -368,12 +368,12 @@ function AutocorrelationSection({
       </div>
 
       {suggestedChunk && (
-        <div className="flex items-center gap-3 bg-orange-500/10 border border-orange-500/30 rounded-md px-4 py-2.5">
-          <span className="text-orange-400 font-bold text-lg tabular-nums">
+        <div className="flex items-center gap-3 bg-cyan-400/10 border border-cyan-400/30 rounded-md px-4 py-2.5">
+          <span className="text-cyan-300 font-bold text-lg tabular-nums">
             {suggestedChunk}
           </span>
           <div>
-            <p className="text-sm text-orange-300 font-medium">
+            <p className="text-sm text-cyan-200 font-medium">
               Suggested chunk length: {suggestedChunk} steps (
               {(suggestedChunk / fps).toFixed(2)}s)
             </p>
@@ -639,7 +639,7 @@ function ActionVelocitySection({
     );
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10 space-y-4">
       <div>
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-slate-200">
@@ -700,7 +700,7 @@ function ActionVelocitySection({
           return (
             <div
               key={s.name}
-              className={`rounded-md px-2.5 py-2 space-y-1 ${dimmed ? "bg-slate-900/30 opacity-50" : "bg-slate-900/50"}`}
+              className={`rounded-md px-2.5 py-2 space-y-1 ${dimmed ? "bg-[var(--surface-0)]/30 opacity-50" : "bg-[var(--surface-0)]/50"}`}
             >
               <p
                 className={`text-xs font-medium truncate ${dimmed ? "text-slate-500" : "text-slate-200"}`}
@@ -743,7 +743,7 @@ function ActionVelocitySection({
                   );
                 })}
               </svg>
-              <div className="h-1 w-full bg-slate-700 rounded-full overflow-hidden">
+              <div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                 <div
                   className="h-full rounded-full"
                   style={{
@@ -764,7 +764,7 @@ function ActionVelocitySection({
       </div>
 
       {insight && (
-        <div className="bg-slate-900/60 rounded-md px-4 py-3 border border-slate-700/60 space-y-1.5">
+        <div className="bg-[var(--surface-0)]/60 rounded-md px-4 py-3 border border-white/10/60 space-y-1.5">
           <p className="text-sm font-medium text-slate-200">
             Overall:{" "}
             <span className={insight.verdict.color}>
@@ -792,7 +792,7 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
   const display = showAll ? episodes : episodes.slice(0, 15);
 
   return (
-    <div className="bg-slate-900/60 rounded-md px-4 py-3 border border-slate-700/60 space-y-2">
+    <div className="bg-[var(--surface-0)]/60 rounded-md px-4 py-3 border border-white/10/60 space-y-2">
       <div className="flex items-center justify-between">
         <p className="text-sm font-medium text-slate-200">
           Most Jerky Episodes{" "}
@@ -815,7 +815,7 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
       <div className="max-h-48 overflow-y-auto">
         <table className="w-full text-xs">
           <thead>
-            <tr className="text-slate-500 border-b border-slate-700">
+            <tr className="text-slate-500 border-b border-white/10">
               <th className="w-5 py-1" />
               <th className="text-left py-1 pr-3">Episode</th>
               <th className="text-right py-1">Mean |Δa|</th>
@@ -825,7 +825,7 @@ function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
             {display.map((e) => (
               <tr
                 key={e.episodeIndex}
-                className="border-b border-slate-800/40 text-slate-300"
+                className="border-b border-white/5/40 text-slate-300"
               >
                 <td className="py-1">
                   <FlagBtn id={e.episodeIndex} />
@@ -856,7 +856,7 @@ function VarianceHeatmap({
 
   if (loading) {
     return (
-      <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
+      <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10">
         <h3 className="text-sm font-semibold text-slate-200 mb-2">
           Cross-Episode Action Variance
         </h3>
@@ -884,7 +884,7 @@ function VarianceHeatmap({
 
   if (!data) {
     return (
-      <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
+      <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10">
         <h3 className="text-sm font-semibold text-slate-200 mb-2">
           Cross-Episode Action Variance
         </h3>
@@ -924,7 +924,7 @@ function VarianceHeatmap({
   }
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10 space-y-4">
       <div>
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-slate-200">
@@ -937,10 +937,7 @@ function VarianceHeatmap({
             <p className="text-xs text-slate-400">
               Shows how much each action dimension varies across episodes at
               each point in time (normalized 0–100%).
-              <span className="text-orange-400">
-                {" "}
-                High-variance regions
-              </span>{" "}
+              <span className="text-cyan-300"> High-variance regions</span>{" "}
               indicate multi-modal or inconsistent demonstrations — generative
               policies (diffusion, flow-matching) and action chunking help here
               by modeling multiple modes.
@@ -1135,7 +1132,7 @@ function SpeedVarianceSection({
   const barW = Math.max(8, Math.floor((isFs ? 900 : 500) / bins.length));
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10 space-y-4">
       <div>
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-slate-200">
@@ -1148,11 +1145,11 @@ function SpeedVarianceSection({
             <p className="text-xs text-slate-400">
               Distribution of average execution speed (mean ‖Δa<sub>t</sub>‖ per
               frame) across all episodes. Different human demonstrators often
-              execute at{" "}
-              <span className="text-orange-400">different speeds</span>,
-              creating artificial multimodality in the action distribution that
-              confuses the policy. A coefficient of variation (CV) above 0.3
-              strongly suggests normalizing trajectory speed before training.
+              execute at <span className="text-cyan-300">different speeds</span>
+              , creating artificial multimodality in the action distribution
+              that confuses the policy. A coefficient of variation (CV) above
+              0.3 strongly suggests normalizing trajectory speed before
+              training.
               <br />
               <span className="text-slate-500">
                 Based on &quot;Is Diversity All You Need&quot; (AGI-Bot, 2025)
@@ -1234,7 +1231,7 @@ function SpeedVarianceSection({
         </div>
       </div>
 
-      <div className="bg-slate-900/60 rounded-md px-4 py-3 border border-slate-700/60 space-y-1.5">
+      <div className="bg-[var(--surface-0)]/60 rounded-md px-4 py-3 border border-white/10/60 space-y-1.5">
         <p className="text-sm font-medium text-slate-200">
           Verdict: <span className={verdict.color}>{verdict.label}</span>
         </p>
@@ -1402,7 +1399,7 @@ function StateActionAlignmentSection({
     : "current episode";
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10 space-y-4">
       <div>
         <div className="flex items-center gap-2">
           <h3 className="text-sm font-semibold text-slate-200">
@@ -1415,11 +1412,11 @@ function StateActionAlignmentSection({
             <p className="text-xs text-slate-400">
               Per-dimension cross-correlation between Δaction<sub>d</sub>(t) and
               Δstate<sub>d</sub>(t+lag), aggregated as
-              <span className="text-orange-400"> max</span>,{" "}
+              <span className="text-cyan-300"> max</span>,{" "}
               <span className="text-slate-200">mean</span>, and
               <span className="text-blue-400"> min</span> across all matched
               action–state pairs. The{" "}
-              <span className="text-orange-400">peak lag</span> reveals the
+              <span className="text-cyan-300">peak lag</span> reveals the
               effective control delay — the time between when an action is
               commanded and when the corresponding state changes.
               <br />
@@ -1461,12 +1458,12 @@ function StateActionAlignmentSection({
       </div>
 
       {meanPeakLag !== 0 && (
-        <div className="flex items-center gap-3 bg-orange-500/10 border border-orange-500/30 rounded-md px-4 py-2.5">
-          <span className="text-orange-400 font-bold text-lg tabular-nums">
+        <div className="flex items-center gap-3 bg-cyan-400/10 border border-cyan-400/30 rounded-md px-4 py-2.5">
+          <span className="text-cyan-300 font-bold text-lg tabular-nums">
             {meanPeakLag}
           </span>
           <div>
-            <p className="text-sm text-orange-300 font-medium">
+            <p className="text-sm text-cyan-200 font-medium">
               Mean control delay: {meanPeakLag} step
               {Math.abs(meanPeakLag) !== 1 ? "s" : ""} (
               {(meanPeakLag / fps).toFixed(3)}s)
@@ -1555,7 +1552,7 @@ function StateActionAlignmentSection({
 
       <div className="flex flex-wrap gap-x-4 gap-y-1 px-1">
         <div className="flex items-center gap-1.5">
-          <span className="w-3 h-[3px] rounded-full shrink-0 bg-orange-500" />
+          <span className="w-3 h-[3px] rounded-full shrink-0 bg-cyan-500" />
           <span className="text-xs text-slate-400">
             max (peak: lag {maxPeakLag}, r={maxPeakCorr.toFixed(3)})
           </span>
@@ -1622,7 +1619,7 @@ function ActionInsightsPanel({
             onClick={() =>
               setMode((m) => (m === "episode" ? "dataset" : "episode"))
             }
-            className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${mode === "dataset" ? "bg-orange-500" : "bg-slate-600"}`}
+            className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${mode === "dataset" ? "bg-cyan-500" : "bg-white/10"}`}
             aria-label="Toggle episode/dataset scope"
           >
             <span

src/components/data-recharts.tsx

@@ -83,8 +83,8 @@ export const DataRecharts = React.memo(
               onClick={() => setExpanded((v) => !v)}
               className={`text-xs px-2.5 py-1 rounded transition-colors flex items-center gap-1.5 ${
                 expanded
-                  ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
-                  : "bg-slate-800/60 text-slate-400 hover:text-slate-200 border border-slate-700/50"
+                  ? "bg-cyan-400/15 text-cyan-300 border border-cyan-400/40"
+                  : "bg-[var(--surface-1)]/60 text-slate-400 hover:text-slate-200 border border-white/10/50"
               }`}
             >
               <svg
@@ -325,7 +325,7 @@ const SingleDataGraph = React.memo(
                           {label}
                         </span>
                         <span
-                          className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}
+                          className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-cyan-200/80" : "text-slate-600"}`}
                         >
                           {typeof currentData[key] === "number"
                             ? currentData[key].toFixed(2)
@@ -358,7 +358,7 @@ const SingleDataGraph = React.memo(
                   {key}
                 </span>
                 <span
-                  className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-orange-300/80" : "text-slate-600"}`}
+                  className={`text-xs font-mono tabular-nums ml-1 ${visibleKeys.includes(key) ? "text-cyan-200/80" : "text-slate-600"}`}
                 >
                   {typeof currentData[key] === "number"
                     ? currentData[key].toFixed(2)
@@ -385,7 +385,7 @@ const SingleDataGraph = React.memo(
     }, [groups, singles]);
 
     return (
-      <div className="w-full bg-slate-800/40 rounded-lg border border-slate-700/50 p-3">
+      <div className="w-full bg-[var(--surface-1)]/40 rounded-lg border border-white/10/50 p-3">
         {chartTitle && (
           <p
             className="text-xs font-medium text-slate-300 mb-1 px-1 truncate"

src/components/filtering-panel.tsx

@@ -22,7 +22,7 @@ function FlagBtn({ id }: { id: number }) {
     <button
       onClick={() => toggle(id)}
       title={flagged ? "Unflag episode" : "Flag for review"}
-      className={`p-0.5 rounded transition-colors ${flagged ? "text-orange-400" : "text-slate-600 hover:text-slate-400"}`}
+      className={`p-0.5 rounded transition-colors ${flagged ? "text-cyan-300" : "text-slate-600 hover:text-slate-400"}`}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -47,7 +47,7 @@ function FlagAllBtn({ ids, label }: { ids: number[]; label?: string }) {
   return (
     <button
       onClick={() => addMany(ids)}
-      className="text-xs text-slate-500 hover:text-orange-400 transition-colors flex items-center gap-1"
+      className="text-xs text-slate-500 hover:text-cyan-300 transition-colors flex items-center gap-1"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -75,7 +75,7 @@ function LowMovementSection({ episodes }: { episodes: LowMovementEpisode[] }) {
   const maxMovement = Math.max(...episodes.map((e) => e.totalMovement), 1e-10);
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-3">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10 space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-semibold text-slate-200">
           Lowest-Movement Episodes
@@ -94,14 +94,14 @@ function LowMovementSection({ episodes }: { episodes: LowMovementEpisode[] }) {
         {episodes.map((ep) => (
           <div
             key={ep.episodeIndex}
-            className="bg-slate-900/50 rounded-md px-3 py-2 flex items-center gap-3"
+            className="bg-[var(--surface-0)]/50 rounded-md px-3 py-2 flex items-center gap-3"
           >
             <FlagBtn id={ep.episodeIndex} />
             <span className="text-xs text-slate-300 font-medium shrink-0">
               ep {ep.episodeIndex}
             </span>
             <div className="flex-1 min-w-0">
-              <div className="h-1.5 bg-slate-700 rounded-full overflow-hidden">
+              <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
                 <div
                   className="h-full rounded-full"
                   style={{
@@ -157,7 +157,7 @@ function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
     0.01;
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700 space-y-4">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10 space-y-4">
       <h3 className="text-sm font-semibold text-slate-200">
         Episode Length Filter
       </h3>
@@ -168,9 +168,9 @@ function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
           <span className="tabular-nums">{rangeMax.toFixed(1)}s</span>
         </div>
         <div className="relative h-5">
-          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1 rounded bg-slate-700" />
+          <div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 h-1 rounded bg-white/5" />
           <div
-            className="absolute top-1/2 -translate-y-1/2 h-1 rounded bg-orange-500"
+            className="absolute top-1/2 -translate-y-1/2 h-1 rounded bg-cyan-500"
             style={{
               left: `${((rangeMin - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
               right: `${100 - ((rangeMax - globalMin) / (globalMax - globalMin || 1)) * 100}%`,
@@ -185,7 +185,7 @@ function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
             onChange={(e) =>
               setRangeMin(Math.min(Number(e.target.value), rangeMax))
             }
-            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer"
+            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-cyan-400 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-cyan-400 [&::-moz-range-thumb]:cursor-pointer"
           />
           <input
             type="range"
@@ -196,7 +196,7 @@ function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
             onChange={(e) =>
               setRangeMax(Math.max(Number(e.target.value), rangeMin))
             }
-            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-orange-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-orange-500 [&::-moz-range-thumb]:cursor-pointer"
+            className="absolute inset-0 w-full appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-cyan-400 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-cyan-400 [&::-moz-range-thumb]:cursor-pointer"
           />
         </div>
       </div>
@@ -210,7 +210,7 @@ function EpisodeLengthFilter({ episodes }: { episodes: EpisodeLengthInfo[] }) {
           {outsideIds.length > 0 && (
             <button
               onClick={() => addMany(outsideIds)}
-              className="text-xs bg-orange-500/20 text-orange-400 border border-orange-500/40 rounded px-2 py-1 hover:bg-orange-500/30 transition-colors"
+              className="text-xs bg-cyan-400/15 text-cyan-300 border border-cyan-400/40 rounded px-2 py-1 hover:bg-cyan-400/20 transition-colors"
             >
               Flag {outsideIds.length} outside range
             </button>
@@ -254,9 +254,9 @@ function FlaggedIdsCopyBar({
   if (count === 0) return null;
 
   return (
-    <div className="bg-slate-800/60 rounded-lg p-4 border border-orange-500/30 space-y-3">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-4 border border-cyan-400/30 space-y-3">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-orange-400">
+        <h3 className="text-sm font-semibold text-cyan-300">
           Flagged Episodes
           <span className="text-xs text-slate-500 ml-2 font-normal">
             ({count})
@@ -311,7 +311,7 @@ function FlaggedIdsCopyBar({
       {onViewEpisodes && (
         <button
           onClick={onViewEpisodes}
-          className="w-full text-xs py-1.5 rounded bg-slate-700/80 hover:bg-slate-600 text-slate-300 hover:text-white transition-colors flex items-center justify-center gap-1.5"
+          className="w-full text-xs py-1.5 rounded bg-white/5/80 hover:bg-white/5 text-slate-300 hover:text-white transition-colors flex items-center justify-center gap-1.5"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -330,20 +330,20 @@ function FlaggedIdsCopyBar({
           View flagged episodes
         </button>
       )}
-      <div className="bg-slate-900/60 rounded-md px-3 py-2 border border-slate-700/60 space-y-2.5">
+      <div className="bg-[var(--surface-0)]/60 rounded-md px-3 py-2 border border-white/10/60 space-y-2.5">
         <p className="text-xs text-slate-400">
           <a
             href="https://github.com/huggingface/lerobot"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-orange-400 underline"
+            className="text-cyan-300 underline"
           >
             LeRobot CLI
           </a>{" "}
           — delete flagged episodes:
         </p>
-        <pre className="text-xs text-slate-300 bg-slate-950/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes (modifies original dataset)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
-        <pre className="text-xs text-slate-300 bg-slate-950/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes and save to a new dataset (preserves original)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --new_repo_id ${repoId}_filtered \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
+        <pre className="text-xs text-slate-300 bg-[var(--bg)]/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes (modifies original dataset)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
+        <pre className="text-xs text-slate-300 bg-[var(--bg)]/50 rounded px-2 py-1.5 overflow-x-auto select-all">{`# Delete episodes and save to a new dataset (preserves original)\nlerobot-edit-dataset \\\n    --repo_id ${repoId} \\\n    --new_repo_id ${repoId}_filtered \\\n    --operation.type delete_episodes \\\n    --operation.episode_indices "[${ids.join(", ")}]"`}</pre>
       </div>
     </div>
   );
@@ -377,7 +377,7 @@ function FilteringPanel({
       )}
 
       {crossEpisodeLoading && (
-        <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
+        <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10">
           <div className="flex items-center gap-2 text-slate-400 text-sm py-4 justify-center">
             <svg
               className="animate-spin h-4 w-4"

src/components/loading-component.tsx

@@ -3,35 +3,37 @@
 export default function Loading() {
   return (
     <div
-      className="absolute inset-0 flex flex-col items-center justify-center bg-slate-950/70 z-10 text-slate-100 animate-fade-in"
+      className="absolute inset-0 flex flex-col items-center justify-center bg-[var(--bg)]/80 backdrop-blur-sm z-10 text-slate-200"
       tabIndex={-1}
       aria-modal="true"
       role="dialog"
     >
       <svg
-        className="animate-spin mb-8"
-        width="64"
-        height="64"
+        className="animate-spin mb-5 text-cyan-300"
+        width="42"
+        height="42"
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <circle
-          className="opacity-25"
+          className="opacity-15"
           cx="12"
           cy="12"
           r="10"
           stroke="currentColor"
-          strokeWidth="4"
+          strokeWidth="3"
         />
         <path
-          className="opacity-75"
+          className="opacity-80"
           fill="currentColor"
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
         />
       </svg>
-      <h1 className="text-2xl font-bold mb-2">Loading...</h1>
-      <p className="text-slate-400">preparing data & videos</p>
+      <h1 className="text-sm font-medium tracking-wide uppercase text-slate-300">
+        Loading
+      </h1>
+      <p className="text-xs text-slate-500 mt-1">preparing data &amp; videos</p>
     </div>
   );
 }

src/components/overview-panel.tsx

@@ -62,7 +62,7 @@ function FrameThumbnail({
 
   return (
     <div ref={containerRef} className="flex flex-col items-center">
-      <div className="w-full aspect-video bg-slate-800 rounded overflow-hidden relative group">
+      <div className="w-full aspect-video bg-[var(--surface-1)] rounded overflow-hidden relative group">
         {inView ? (
           <video
             ref={videoRef}
@@ -72,14 +72,14 @@ function FrameThumbnail({
             className="w-full h-full object-cover"
           />
         ) : (
-          <div className="w-full h-full animate-pulse bg-slate-700" />
+          <div className="w-full h-full animate-pulse bg-white/5" />
         )}
         <button
           onClick={() => toggle(info.episodeIndex)}
           className={`absolute top-1 right-1 p-1 rounded transition-opacity ${
             isFlagged
-              ? "opacity-100 text-orange-400"
-              : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-orange-400"
+              ? "opacity-100 text-cyan-300"
+              : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-cyan-300"
           }`}
           title={isFlagged ? "Unflag episode" : "Flag episode"}
         >
@@ -100,7 +100,7 @@ function FrameThumbnail({
         </button>
       </div>
       <p
-        className={`text-xs mt-1 tabular-nums ${isFlagged ? "text-orange-400" : "text-slate-400"}`}
+        className={`text-xs mt-1 tabular-nums ${isFlagged ? "text-cyan-300" : "text-slate-400"}`}
       >
         ep {info.episodeIndex}
         {isFlagged ? " ⚑" : ""}
@@ -181,7 +181,7 @@ export default function OverviewPanel({
         {flaggedOnly && onFlaggedOnlyChange && (
           <button
             onClick={() => onFlaggedOnlyChange(false)}
-            className="text-xs text-orange-400 hover:text-orange-300 underline"
+            className="text-xs text-cyan-300 hover:text-cyan-200 underline"
           >
             Show all episodes
           </button>
@@ -209,7 +209,7 @@ export default function OverviewPanel({
             <select
               value={selectedCamera}
               onChange={handleCameraChange}
-              className="bg-slate-800 text-slate-200 text-sm rounded px-3 py-1.5 border border-slate-600 focus:outline-none focus:border-orange-500"
+              className="bg-[var(--surface-1)] text-slate-200 text-sm rounded px-3 py-1.5 border border-white/10 focus:outline-none focus:border-cyan-400"
             >
               {data.cameras.map((cam) => (
                 <option key={cam} value={cam}>
@@ -228,8 +228,8 @@ export default function OverviewPanel({
               }}
               className={`text-xs px-2.5 py-1 rounded transition-colors flex items-center gap-1.5 ${
                 flaggedOnly
-                  ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
-                  : "text-slate-400 hover:text-slate-200 border border-slate-700"
+                  ? "bg-cyan-400/15 text-cyan-300 border border-cyan-400/40"
+                  : "text-slate-400 hover:text-slate-200 border border-white/10"
               }`}
             >
               <svg
@@ -259,7 +259,7 @@ export default function OverviewPanel({
             </span>
             <button
               onClick={() => setShowLast((v) => !v)}
-              className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${showLast ? "bg-orange-500" : "bg-slate-600"}`}
+              className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${showLast ? "bg-cyan-500" : "bg-white/10"}`}
               aria-label="Toggle first/last frame"
             >
               <span
@@ -280,7 +280,7 @@ export default function OverviewPanel({
             <button
               disabled={page === 0}
               onClick={() => setPage((p) => p - 1)}
-              className="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:cursor-not-allowed"
+              className="px-2 py-1 rounded bg-[var(--surface-1)] hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed"
             >
               ← Prev
             </button>
@@ -290,7 +290,7 @@ export default function OverviewPanel({
             <button
               disabled={page === totalPages - 1}
               onClick={() => setPage((p) => p + 1)}
-              className="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:cursor-not-allowed"
+              className="px-2 py-1 rounded bg-[var(--surface-1)] hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed"
             >
               Next →
             </button>

src/components/playback-bar.tsx

@@ -48,43 +48,36 @@ const PlaybackBar: React.FC = () => {
   };
 
   return (
-    <div className="flex items-center gap-4 w-full max-w-4xl mx-auto sticky bottom-0 bg-slate-900/95 px-4 py-3 rounded-3xl mt-auto">
+    <div className="sticky bottom-0 mt-auto w-full max-w-4xl mx-auto flex items-center gap-3 panel-raised bg-[var(--surface-0)]/90 backdrop-blur px-3 py-2">
       <button
         title="Jump backward 5 seconds"
         onClick={() => setCurrentTime(Math.max(0, currentTime - 5))}
-        className="text-2xl hidden md:block"
+        className="hidden md:flex h-8 w-8 items-center justify-center rounded-md text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-colors"
       >
-        <FaBackward size={24} />
+        <FaBackward size={14} />
       </button>
       <button
-        className={`text-3xl transition-transform ${isPlaying ? "scale-90 opacity-60" : "scale-110"}`}
-        title="Play. Toggle with Space"
-        onClick={() => setIsPlaying(true)}
-        style={{ display: isPlaying ? "none" : "inline-block" }}
+        className="flex h-9 w-9 items-center justify-center rounded-md bg-cyan-400/10 border border-cyan-400/30 text-cyan-300 hover:bg-cyan-400/15 transition-colors"
+        title={
+          isPlaying ? "Pause. Toggle with Space" : "Play. Toggle with Space"
+        }
+        onClick={() => setIsPlaying(!isPlaying)}
       >
-        <FaPlay size={24} />
-      </button>
-      <button
-        className={`text-3xl transition-transform ${!isPlaying ? "scale-90 opacity-60" : "scale-110"}`}
-        title="Pause. Toggle with Space"
-        onClick={() => setIsPlaying(false)}
-        style={{ display: !isPlaying ? "none" : "inline-block" }}
-      >
-        <FaPause size={24} />
+        {isPlaying ? <FaPause size={14} /> : <FaPlay size={14} />}
       </button>
       <button
         title="Jump forward 5 seconds"
         onClick={() => setCurrentTime(Math.min(duration, currentTime + 5))}
-        className="text-2xl hidden md:block"
+        className="hidden md:flex h-8 w-8 items-center justify-center rounded-md text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-colors"
       >
-        <FaForward size={24} />
+        <FaForward size={14} />
       </button>
       <button
         title="Rewind from start"
         onClick={() => setCurrentTime(0)}
-        className="text-2xl hidden md:block"
+        className="hidden md:flex h-8 w-8 items-center justify-center rounded-md text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-colors"
       >
-        <FaUndoAlt size={24} />
+        <FaUndoAlt size={14} />
       </button>
       <input
         type="range"
@@ -97,27 +90,26 @@ const PlaybackBar: React.FC = () => {
         onMouseUp={handleSliderMouseUp}
         onTouchStart={handleSliderMouseDown}
         onTouchEnd={handleSliderMouseUp}
-        className="flex-1 mx-2 accent-orange-500 focus:outline-none focus:ring-0"
+        className="flex-1 mx-1 h-1 accent-cyan-400 cursor-pointer focus:outline-none focus:ring-0"
         aria-label="Seek video"
       />
-      <span className="w-16 text-right tabular-nums text-xs text-slate-200 shrink-0">
+      <span className="w-16 text-right tabular text-[11px] text-slate-400 shrink-0">
         {Math.floor(sliderValue)} / {Math.floor(duration)}
       </span>
 
-      <div className="text-xs text-slate-300 select-none ml-8 flex-col gap-y-0.5 hidden md:flex">
-        <p>
-          <span className="inline-flex items-center gap-1 font-mono align-middle">
-            <span className="px-2 py-0.5 rounded border border-slate-400 bg-slate-800 text-slate-200 text-xs shadow-inner">
-              Space
-            </span>
-          </span>{" "}
-          to pause/unpause
+      <div className="hidden lg:flex flex-col gap-y-0.5 ml-4 text-[10px] text-slate-500 select-none">
+        <p className="inline-flex items-center gap-1.5">
+          <kbd className="px-1.5 py-0.5 rounded border border-white/10 bg-white/5 text-slate-300 text-[10px]">
+            Space
+          </kbd>
+          <span>pause/unpause</span>
         </p>
-        <p>
-          <span className="inline-flex items-center gap-1 font-mono align-middle">
-            <FaArrowUp size={14} />/<FaArrowDown size={14} />
-          </span>{" "}
-          to previous/next episode
+        <p className="inline-flex items-center gap-1.5">
+          <span className="inline-flex items-center gap-0.5 text-slate-300">
+            <FaArrowUp size={10} />
+            <FaArrowDown size={10} />
+          </span>
+          <span>prev/next episode</span>
         </p>
       </div>
     </div>

src/components/side-nav.tsx

@@ -42,98 +42,131 @@ const Sidebar: React.FC<SidebarProps> = ({
   return (
     <div className="flex z-10 shrink-0">
       <nav
-        className={`shrink-0 overflow-y-auto bg-slate-900 p-5 break-words w-60 ${
+        className={`shrink-0 overflow-y-auto bg-[var(--surface-0)] border-r border-white/5 p-4 break-words w-60 ${
           mobileVisible ? "block" : "hidden"
         } md:block`}
         aria-label="Sidebar navigation"
       >
-        <ul className="text-sm text-slate-300 space-y-0.5">
-          <li>Frames: {datasetInfo.total_frames.toLocaleString()}</li>
-          <li>Episodes: {datasetInfo.total_episodes.toLocaleString()}</li>
-          <li>FPS: {datasetInfo.fps}</li>
-        </ul>
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs text-slate-400 tabular">
+          <dt className="uppercase tracking-wide text-[10px] text-slate-500">
+            Frames
+          </dt>
+          <dd className="text-slate-200">
+            {datasetInfo.total_frames.toLocaleString()}
+          </dd>
+          <dt className="uppercase tracking-wide text-[10px] text-slate-500">
+            Episodes
+          </dt>
+          <dd className="text-slate-200">
+            {datasetInfo.total_episodes.toLocaleString()}
+          </dd>
+          <dt className="uppercase tracking-wide text-[10px] text-slate-500">
+            FPS
+          </dt>
+          <dd className="text-slate-200">{datasetInfo.fps}</dd>
+        </dl>
 
-        <div className="mt-4 flex items-center justify-between">
-          <p className="text-sm font-semibold text-slate-200">Episodes:</p>
+        <div className="mt-5 flex items-center justify-between">
+          <p className="text-[10px] uppercase tracking-wide text-slate-500">
+            Episodes
+          </p>
           {count > 0 && (
             <button
               onClick={() => onShowFlaggedOnlyChange(!showFlaggedOnly)}
-              className={`text-xs px-1.5 py-0.5 rounded transition-colors ${
+              className={`text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-md transition-colors ${
                 showFlaggedOnly
-                  ? "bg-orange-500/20 text-orange-400 border border-orange-500/40"
-                  : "text-slate-500 hover:text-slate-300 border border-slate-700"
+                  ? "bg-orange-500/15 text-orange-300 border border-orange-500/30"
+                  : "text-slate-500 hover:text-slate-300 border border-white/10"
               }`}
             >
-              Flagged ({count})
+              Flagged · {count}
             </button>
           )}
         </div>
 
-        <div className="ml-2 mt-1">
-          <ul>
-            {displayEpisodes.map((episode) => (
-              <li
-                key={episode}
-                className="mt-0.5 font-mono text-sm flex items-center gap-1"
-              >
+        <ul className="mt-2 space-y-px">
+          {displayEpisodes.map((episode) => {
+            const active = episode === episodeId;
+            const itemClass = `group flex items-center justify-between gap-2 px-2 py-1 rounded-md text-xs tabular transition-colors ${
+              active
+                ? "bg-cyan-400/10 text-cyan-300"
+                : "text-slate-300 hover:bg-white/5"
+            }`;
+            return (
+              <li key={episode}>
                 {onEpisodeSelect ? (
-                  <button
-                    onClick={() => onEpisodeSelect(episode)}
-                    className={`underline text-left cursor-pointer ${episode === episodeId ? "-ml-1 font-bold text-orange-400" : ""}`}
-                  >
-                    Episode {episode}
-                  </button>
+                  <div className={itemClass}>
+                    <button
+                      onClick={() => onEpisodeSelect(episode)}
+                      className="flex-1 text-left"
+                    >
+                      Episode {episode}
+                    </button>
+                    <button
+                      onClick={() => toggle(episode)}
+                      className={`text-xs leading-none transition-colors ${
+                        flagged.has(episode)
+                          ? "text-orange-400 hover:text-orange-300"
+                          : "text-slate-600 hover:text-slate-400 opacity-0 group-hover:opacity-100"
+                      }`}
+                      title={flagged.has(episode) ? "Unflag" : "Flag"}
+                    >
+                      ⚑
+                    </button>
+                  </div>
                 ) : (
-                  <Link
-                    href={`./episode_${episode}`}
-                    className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}
-                  >
-                    Episode {episode}
-                  </Link>
+                  <div className={itemClass}>
+                    <Link
+                      href={`./episode_${episode}`}
+                      className="flex-1 text-left"
+                    >
+                      Episode {episode}
+                    </Link>
+                    <button
+                      onClick={() => toggle(episode)}
+                      className={`text-xs leading-none transition-colors ${
+                        flagged.has(episode)
+                          ? "text-orange-400 hover:text-orange-300"
+                          : "text-slate-600 hover:text-slate-400 opacity-0 group-hover:opacity-100"
+                      }`}
+                      title={flagged.has(episode) ? "Unflag" : "Flag"}
+                    >
+                      ⚑
+                    </button>
+                  </div>
                 )}
-                <button
-                  onClick={() => toggle(episode)}
-                  className={`text-xs leading-none px-0.5 rounded transition-colors ${
-                    flagged.has(episode)
-                      ? "text-orange-400 hover:text-orange-300"
-                      : "text-slate-600 hover:text-slate-400"
-                  }`}
-                  title={flagged.has(episode) ? "Unflag" : "Flag"}
-                >
-                  ⚑
-                </button>
               </li>
-            ))}
-          </ul>
+            );
+          })}
+        </ul>
 
-          {!showFlaggedOnly && totalPages > 1 && (
-            <div className="mt-3 flex items-center text-xs">
-              <button
-                onClick={prevPage}
-                className={`mr-2 rounded bg-slate-800 px-2 py-1 ${
-                  currentPage === 1 ? "cursor-not-allowed opacity-50" : ""
-                }`}
-                disabled={currentPage === 1}
-              >
-                « Prev
-              </button>
-              <span className="mr-2 font-mono">
-                {currentPage} / {totalPages}
-              </span>
-              <button
-                onClick={nextPage}
-                className={`rounded bg-slate-800 px-2 py-1 ${
-                  currentPage === totalPages
-                    ? "cursor-not-allowed opacity-50"
-                    : ""
-                }`}
-                disabled={currentPage === totalPages}
-              >
-                Next »
-              </button>
-            </div>
-          )}
-        </div>
+        {!showFlaggedOnly && totalPages > 1 && (
+          <div className="mt-3 flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-400">
+            <button
+              onClick={prevPage}
+              className={`px-2 py-1 rounded-md border border-white/10 transition-colors hover:bg-white/5 hover:text-slate-200 ${
+                currentPage === 1 ? "cursor-not-allowed opacity-40" : ""
+              }`}
+              disabled={currentPage === 1}
+            >
+              ‹ Prev
+            </button>
+            <span className="tabular text-slate-500">
+              {currentPage} / {totalPages}
+            </span>
+            <button
+              onClick={nextPage}
+              className={`ml-auto px-2 py-1 rounded-md border border-white/10 transition-colors hover:bg-white/5 hover:text-slate-200 ${
+                currentPage === totalPages
+                  ? "cursor-not-allowed opacity-40"
+                  : ""
+              }`}
+              disabled={currentPage === totalPages}
+            >
+              Next ›
+            </button>
+          </div>
+        )}
       </nav>
 
       <button
@@ -141,7 +174,7 @@ const Sidebar: React.FC<SidebarProps> = ({
         onClick={() => setMobileVisible((prev) => !prev)}
         title="Toggle sidebar"
       >
-        <div className="h-10 w-2 rounded-full bg-slate-500" />
+        <div className="h-10 w-1 rounded-full bg-white/20" />
       </button>
     </div>
   );

src/components/simple-videos-player.tsx

@@ -224,20 +224,20 @@ export const SimpleVideosPlayer = ({
       {hiddenVideos.length > 0 && (
         <div className="relative mb-4">
           <button
-            className="flex items-center gap-2 rounded bg-slate-800 px-3 py-2 text-sm text-slate-100 hover:bg-slate-700 border border-slate-500"
+            className="inline-flex items-center gap-2 h-8 rounded-md panel px-3 text-xs text-slate-300 hover:text-slate-100 hover:bg-white/5 transition-colors"
             onClick={() => setShowHiddenMenu(!showHiddenMenu)}
           >
-            <FaEye /> Show Hidden Videos ({hiddenVideos.length})
+            <FaEye size={11} /> Show hidden · {hiddenVideos.length}
           </button>
           {showHiddenMenu && (
-            <div className="absolute left-0 mt-2 w-max rounded border border-slate-500 bg-slate-900 shadow-lg p-2 z-50">
-              <div className="mb-2 text-xs text-slate-300">
-                Restore hidden videos:
+            <div className="absolute left-0 mt-1.5 w-max panel-raised bg-[var(--surface-1)] shadow-xl p-1.5 z-50">
+              <div className="mb-1 px-2 text-[10px] uppercase tracking-wide text-slate-500">
+                Restore hidden videos
               </div>
               {hiddenVideos.map((filename) => (
                 <button
                   key={filename}
-                  className="block w-full text-left px-2 py-1 rounded hover:bg-slate-700 text-slate-100"
+                  className="block w-full text-left px-2 py-1 rounded-md text-xs text-slate-300 hover:text-slate-100 hover:bg-white/5 transition-colors"
                   onClick={() =>
                     setHiddenVideos((prev) =>
                       prev.filter((v) => v !== filename),
@@ -269,21 +269,25 @@ export const SimpleVideosPlayer = ({
                   : "max-w-96"
               }`}
             >
-              <p className="truncate w-full rounded-t-xl bg-gray-800 px-2 text-sm text-gray-300 flex items-center justify-between">
-                <span>{info.filename}</span>
-                <span className="flex gap-1">
+              <p className="truncate w-full rounded-t-md bg-[var(--surface-1)] border border-b-0 border-white/5 px-2.5 py-1 text-[11px] text-slate-400 flex items-center justify-between gap-2">
+                <span className="truncate">{info.filename}</span>
+                <span className="flex gap-0.5 shrink-0">
                   <button
                     title={isEnlarged ? "Minimize" : "Enlarge"}
-                    className="ml-2 p-1 hover:bg-slate-700 rounded"
+                    className="p-1 rounded text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors"
                     onClick={() =>
                       setEnlargedVideo(isEnlarged ? null : info.filename)
                     }
                   >
-                    {isEnlarged ? <FaCompress /> : <FaExpand />}
+                    {isEnlarged ? (
+                      <FaCompress size={10} />
+                    ) : (
+                      <FaExpand size={10} />
+                    )}
                   </button>
                   <button
                     title="Hide Video"
-                    className="ml-1 p-1 hover:bg-slate-700 rounded"
+                    className="p-1 rounded text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors disabled:opacity-30 disabled:hover:bg-transparent"
                     onClick={() =>
                       setHiddenVideos((prev) => [...prev, info.filename])
                     }
@@ -293,7 +297,7 @@ export const SimpleVideosPlayer = ({
                       ).length === 1
                     }
                   >
-                    <FaTimes />
+                    <FaTimes size={10} />
                   </button>
                 </span>
               </p>

src/components/stats-panel.tsx

@@ -104,7 +104,7 @@ function EpisodeLengthHistogram({
 
 function Card({ label, value }: { label: string; value: string | number }) {
   return (
-    <div className="bg-slate-800/60 rounded-lg p-4 border border-slate-700">
+    <div className="bg-[var(--surface-1)]/60 rounded-lg p-4 border border-white/10">
       <p className="text-xs text-slate-400 uppercase tracking-wide">{label}</p>
       <p className="text-xl font-bold tabular-nums mt-1">{value}</p>
     </div>
@@ -154,13 +154,16 @@ function StatsPanel({
 
       {/* Camera resolutions */}
       {datasetInfo.cameras.length > 0 && (
-        <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
+        <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10">
           <h3 className="text-sm font-semibold text-slate-200 mb-3">
             Camera Resolutions
           </h3>
           <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
             {datasetInfo.cameras.map((cam: CameraInfo) => (
-              <div key={cam.name} className="bg-slate-900/50 rounded-md p-3">
+              <div
+                key={cam.name}
+                className="bg-[var(--surface-0)]/50 rounded-md p-3"
+              >
                 <p
                   className="text-xs text-slate-400 mb-1 truncate"
                   title={cam.name}
@@ -201,7 +204,7 @@ function StatsPanel({
       {/* Episode length section */}
       {els && (
         <>
-          <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
+          <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10">
             <h3 className="text-sm font-semibold text-slate-200 mb-4">
               Episode Lengths
             </h3>
@@ -221,7 +224,7 @@ function StatsPanel({
           </div>
 
           {els.episodeLengthHistogram.length > 0 && (
-            <div className="bg-slate-800/60 rounded-lg p-5 border border-slate-700">
+            <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10">
               <h3 className="text-sm font-semibold text-slate-200 mb-4">
                 Episode Length Distribution
                 <span className="text-xs text-slate-500 ml-2 font-normal">

src/components/urdf-playback-bar.tsx

@@ -37,7 +37,7 @@ export default function UrdfPlaybackBar({
       <button
         onClick={onPlayPause}
         disabled={disabled}
-        className="w-8 h-8 flex items-center justify-center rounded bg-orange-600 hover:bg-orange-500 disabled:bg-slate-700 disabled:hover:bg-slate-700 disabled:cursor-not-allowed text-white transition-colors shrink-0"
+        className="w-8 h-8 flex items-center justify-center rounded-md bg-cyan-400/10 border border-cyan-400/30 text-cyan-300 hover:bg-cyan-400/15 disabled:bg-white/5 disabled:border-white/5 disabled:text-slate-500 disabled:cursor-not-allowed transition-colors shrink-0"
       >
         {playing ? (
           <svg width="12" height="14" viewBox="0 0 12 14">
@@ -57,8 +57,8 @@ export default function UrdfPlaybackBar({
         disabled={disabled}
         className={`px-2 h-8 text-xs rounded transition-colors shrink-0 disabled:cursor-not-allowed ${
           trailEnabled
-            ? "bg-orange-600/30 text-orange-400 border border-orange-500"
-            : "bg-slate-700 text-slate-400 border border-slate-600"
+            ? "bg-cyan-400/15 text-cyan-300 border border-cyan-400/40"
+            : "bg-white/5 text-slate-400 border border-white/10"
         }`}
         title={trailEnabled ? "Hide trail" : "Show trail"}
       >
@@ -73,7 +73,7 @@ export default function UrdfPlaybackBar({
         value={frame}
         onChange={onFrameChange}
         disabled={disabled}
-        className="flex-1 h-1.5 accent-orange-500 cursor-pointer disabled:cursor-not-allowed"
+        className="flex-1 h-1.5 accent-cyan-400 cursor-pointer disabled:cursor-not-allowed"
       />
       <span className="text-xs text-slate-400 tabular-nums w-28 text-right shrink-0">
         {currentTime}s / {totalTime}s
@@ -85,7 +85,7 @@ export default function UrdfPlaybackBar({
       {/* Keyboard hints */}
       <div className="text-xs text-slate-500 select-none hidden md:flex flex-col gap-y-0.5 ml-2 shrink-0">
         <p>
-          <span className="px-1.5 py-0.5 rounded border border-slate-600 bg-slate-800 text-slate-400 text-xs">
+          <span className="px-1.5 py-0.5 rounded border border-white/10 bg-[var(--surface-1)] text-slate-400 text-xs">
             Space
           </span>{" "}
           pause/unpause

src/components/urdf-viewer.tsx

@@ -946,9 +946,9 @@ export default function URDFViewer({
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* 3D Viewport */}
-      <div className="flex-1 min-h-0 bg-slate-900 rounded-lg overflow-hidden border border-slate-700 relative">
+      <div className="flex-1 min-h-0 bg-[var(--surface-0)] rounded-lg overflow-hidden border border-white/10 relative">
         {(episodeLoading || urdfLoading) && (
-          <div className="absolute inset-0 z-10 flex items-center justify-center bg-slate-900/70">
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-[var(--bg)]/80">
             <span className="text-white text-lg animate-pulse">
               {urdfLoading
                 ? "Loading 3D model…"
@@ -1046,7 +1046,7 @@ export default function URDFViewer({
       </div>
 
       {/* Controls */}
-      <div className="bg-slate-800/90 border-t border-slate-700 p-3 space-y-3 shrink-0">
+      <div className="bg-[var(--surface-1)]/90 border-t border-white/10 p-3 space-y-3 shrink-0">
         <UrdfPlaybackBar
           frame={frame}
           totalFrames={totalFrames}
@@ -1087,8 +1087,8 @@ export default function URDFViewer({
                     onClick={() => setSelectedGroup(name)}
                     className={`px-2 py-1 text-xs rounded transition-colors ${
                       selectedGroup === name
-                        ? "bg-orange-600 text-white"
-                        : "bg-slate-700 text-slate-300 hover:bg-slate-600"
+                        ? "bg-cyan-500 text-white"
+                        : "bg-white/5 text-slate-300 hover:bg-white/5"
                     }`}
                   >
                     {name}
@@ -1099,7 +1099,7 @@ export default function URDFViewer({
 
             <div className="flex-1 overflow-x-auto max-h-48 overflow-y-auto">
               <table className="w-full text-xs">
-                <thead className="sticky top-0 bg-slate-800">
+                <thead className="sticky top-0 bg-[var(--surface-1)]">
                   <tr className="text-slate-500">
                     <th className="text-left font-normal px-1">URDF Joint</th>
                     <th className="text-left font-normal px-1">→</th>
@@ -1111,10 +1111,7 @@ export default function URDFViewer({
                 </thead>
                 <tbody>
                   {displayJointNames.map((jointName) => (
-                    <tr
-                      key={jointName}
-                      className="border-t border-slate-700/50"
-                    >
+                    <tr key={jointName} className="border-t border-white/10/50">
                       <td className="px-1 py-0.5 text-slate-300 font-mono">
                         {jointName}
                       </td>
@@ -1128,7 +1125,7 @@ export default function URDFViewer({
                               [jointName]: e.target.value,
                             }))
                           }
-                          className="bg-slate-900 text-slate-200 text-xs rounded px-1 py-0.5 border border-slate-600 w-full max-w-[200px]"
+                          className="bg-[var(--surface-0)] text-slate-200 text-xs rounded px-1 py-0.5 border border-white/10 w-full max-w-[200px]"
                         >
                           <option value="">-- unmapped --</option>
                           {selectedColumns.map((col) => {

src/components/videos-player.tsx

@@ -274,7 +274,7 @@ export const VideosPlayer = ({
     <>
       {/* Error message */}
       {videoCodecError && (
-        <div className="font-medium text-orange-700">
+        <div className="font-medium text-amber-400">
           <p>
             Videos could NOT play because{" "}
             <a
@@ -322,7 +322,7 @@ export const VideosPlayer = ({
         <div className="relative">
           <button
             ref={showHiddenBtnRef}
-            className="flex items-center gap-2 rounded bg-slate-800 px-3 py-2 text-sm text-slate-100 hover:bg-slate-700 border border-slate-500"
+            className="flex items-center gap-2 rounded bg-[var(--surface-1)] px-3 py-2 text-sm text-slate-100 hover:bg-white/5 border border-white/10"
             onClick={() => setShowHiddenMenu((prev) => !prev)}
           >
             <FaEye /> Show Hidden Videos ({hiddenVideos.length})
@@ -330,7 +330,7 @@ export const VideosPlayer = ({
           {showHiddenMenu && (
             <div
               ref={hiddenMenuRef}
-              className="absolute left-0 mt-2 w-max rounded border border-slate-500 bg-slate-900 shadow-lg p-2 z-50"
+              className="absolute left-0 mt-2 w-max rounded border border-white/10 bg-[var(--surface-0)] shadow-lg p-2 z-50"
             >
               <div className="mb-2 text-xs text-slate-300">
                 Restore hidden videos:
@@ -338,7 +338,7 @@ export const VideosPlayer = ({
               {hiddenVideos.map((filename) => (
                 <button
                   key={filename}
-                  className="block w-full text-left px-2 py-1 rounded hover:bg-slate-700 text-slate-100"
+                  className="block w-full text-left px-2 py-1 rounded hover:bg-white/5 text-slate-100"
                   onClick={() =>
                     setHiddenVideos((prev: string[]) =>
                       prev.filter((v: string) => v !== filename),
@@ -373,7 +373,7 @@ export const VideosPlayer = ({
                 <span className="flex gap-1">
                   <button
                     title={isEnlarged ? "Minimize" : "Enlarge"}
-                    className="ml-2 p-1 hover:bg-slate-700 rounded focus:outline-none focus:ring-0"
+                    className="ml-2 p-1 hover:bg-white/5 rounded focus:outline-none focus:ring-0"
                     onClick={() =>
                       setEnlargedVideo(isEnlarged ? null : video.filename)
                     }
@@ -382,7 +382,7 @@ export const VideosPlayer = ({
                   </button>
                   <button
                     title="Hide Video"
-                    className="ml-1 p-1 hover:bg-slate-700 rounded focus:outline-none focus:ring-0"
+                    className="ml-1 p-1 hover:bg-white/5 rounded focus:outline-none focus:ring-0"
                     onClick={() =>
                       setHiddenVideos((prev: string[]) => [
                         ...prev,