Minimal flat redesign: white accent, remove card backgrounds

Replace yellow accent (#f5a623) with white (#ffffff) across the entire
app. Flatten VideoCard grid variant by removing zinc-900 card background
so content sits directly on the page. Simplify active states, badges,
progress bars, and hover effects throughout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/Channel.jsx

@@ -112,7 +112,7 @@ export default function ChannelPage() {
               {isFollowed ? "Following" : "Follow"}
             </button>
             <button onClick={() => dlMut.mutate()} disabled={dlMut.isPending}
-              className="text-sm font-medium px-4 py-1.5 rounded-lg bg-accent text-black hover:bg-yellow-300 transition-colors disabled:opacity-60">
+              className="text-sm font-medium px-4 py-1.5 rounded-lg bg-accent text-black hover:bg-zinc-100 transition-colors disabled:opacity-60">
               {dlMut.isPending ? "Queuing…" : "Download all"}
             </button>
             <button onClick={() => indexMut.mutate()} disabled={indexMut.isPending || indexMut.isSuccess}
@@ -130,7 +130,7 @@ export default function ChannelPage() {
           {isFollowed ? "Following ✓" : "Follow"}
         </button>
         <button onClick={() => dlMut.mutate()} disabled={dlMut.isPending}
-          className="flex-1 text-sm font-medium py-2 rounded-lg bg-accent text-black hover:bg-yellow-300 transition-colors disabled:opacity-60">
+          className="flex-1 text-sm font-medium py-2 rounded-lg bg-accent text-black hover:bg-zinc-100 transition-colors disabled:opacity-60">
           {dlMut.isPending ? "Queuing…" : "Download all"}
         </button>
         <button onClick={() => indexMut.mutate()} disabled={indexMut.isPending || indexMut.isSuccess}

frontend/src/pages/Discovery.jsx

@@ -160,7 +160,7 @@ function ChannelCard({ item }) {
             <button
               onClick={() => followMut.mutate()}
               disabled={busy}
-              className="w-full py-1.5 rounded-lg bg-accent text-black text-xs font-semibold hover:bg-yellow-300 transition-colors disabled:opacity-50"
+              className="w-full py-1.5 rounded-lg bg-accent text-black text-xs font-semibold hover:bg-zinc-100 transition-colors disabled:opacity-50"
             >
               Follow
             </button>
@@ -292,7 +292,7 @@ export default function DiscoveryPage() {
           <button
             onClick={() => refreshMut.mutate()}
             disabled={refreshMut.isPending}
-            className="mt-2 px-6 py-2.5 rounded-xl bg-accent text-black font-semibold text-sm hover:bg-yellow-300 transition-colors disabled:opacity-60"
+            className="mt-2 px-6 py-2.5 rounded-xl bg-accent text-black font-semibold text-sm hover:bg-zinc-100 transition-colors disabled:opacity-60"
           >
             {refreshMut.isPending ? "Searching…" : "Find channels"}
           </button>

frontend/src/pages/Following.jsx

@@ -765,7 +765,7 @@ export default function Following() {
           <button
             onClick={() => dlAllMut.mutate()}
             disabled={dlAllMut.isPending}
-            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-accent text-black text-sm font-semibold hover:bg-yellow-300 transition-colors disabled:opacity-60"
+            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-accent text-black text-sm font-semibold hover:bg-zinc-100 transition-colors disabled:opacity-60"
           >
             {dlAllMut.isPending ? <><Spinner /> Queuing…</> : "Download all new"}
           </button>

frontend/src/pages/Home.jsx

@@ -153,7 +153,7 @@ export default function Home() {
               >
                 {m.label}
                 {m.value === "inbox" && inboxCount > 0 && (
-                  <span className="absolute -top-1 -right-1 min-w-[13px] h-3 bg-accent text-black text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
+                  <span className="absolute -top-1 -right-1 min-w-[13px] h-3 bg-zinc-200 text-zinc-900 text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
                     {inboxCount > 99 ? "99+" : inboxCount}
                   </span>
                 )}
@@ -252,7 +252,7 @@ export default function Home() {
           <button
             onClick={() => surpriseMut.mutate()}
             disabled={surpriseMut.isPending}
-            className="bg-accent text-black font-display font-bold text-lg px-8 py-4 rounded-2xl hover:scale-105 active:scale-95 transition-all disabled:opacity-60 shadow-lg shadow-accent/20"
+            className="bg-accent text-black font-display font-bold text-lg px-8 py-4 rounded-2xl hover:scale-105 active:scale-95 transition-all disabled:opacity-60 shadow-lg"
           >
             <span className="flex items-center gap-2">
               <span className="text-2xl">✦</span>

frontend/src/pages/Settings.jsx

@@ -413,7 +413,7 @@ function SubscriptionImportSection() {
             </div>
             <button
               onClick={() => setShowPaste((v) => !v)}
-              className="shrink-0 px-4 py-2 rounded-lg bg-accent text-black text-sm font-medium hover:bg-yellow-300 transition-colors"
+              className="shrink-0 px-4 py-2 rounded-lg bg-accent text-black text-sm font-medium hover:bg-zinc-100 transition-colors"
             >
               {showPaste ? "Cancel" : "Paste list"}
             </button>
@@ -430,7 +430,7 @@ function SubscriptionImportSection() {
               <button
                 onClick={handlePaste}
                 disabled={loading || !pasteText.trim()}
-                className="self-end px-4 py-2 rounded-lg bg-accent text-black text-sm font-medium hover:bg-yellow-300 transition-colors disabled:opacity-50"
+                className="self-end px-4 py-2 rounded-lg bg-accent text-black text-sm font-medium hover:bg-zinc-100 transition-colors disabled:opacity-50"
               >
                 {loading ? "Importing…" : `Import ${(pasteText.match(/@[\w.-]+(?=•)/g) || []).length} channels`}
               </button>

frontend/src/pages/Watch.jsx

@@ -230,7 +230,7 @@ function Placeholder({ video, dlStatus, onPlay, onDownloadAndPlay, isDownloading
         ) : onDownloadAndPlay ? (
           <button
             onClick={onDownloadAndPlay}
-            className="flex items-center gap-2 px-6 py-3 rounded-full bg-accent text-black font-bold text-sm hover:bg-yellow-300 transition-colors"
+            className="flex items-center gap-2 px-6 py-3 rounded-full bg-accent text-black font-bold text-sm hover:bg-zinc-100 transition-colors"
           >
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
@@ -1046,7 +1046,7 @@ export default function Watch() {
                       <button
                         onClick={() => addSubsMut.mutate()}
                         disabled={addSubsMut.isPending}
-                        className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-accent text-black hover:bg-yellow-300 transition-colors disabled:opacity-50"
+                        className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-accent text-black hover:bg-zinc-100 transition-colors disabled:opacity-50"
                       >
                         {addSubsMut.isPending && <span className="w-3 h-3 border-2 border-black/40 border-t-transparent rounded-full animate-spin inline-block" />}
                         {addSubsMut.isPending ? "Fetching…" : "Add subtitles"}