From 11aa88d4f9e04785a8d18500c0fede9e11203d55 Mon Sep 17 00:00:00 2001
From: m4 <m4@m4deMac-mini.local>
Date: Mon, 10 Aug 2026 20:02:13 +0800
Subject: [PATCH] style(webui): cyan active states in sidebar, premium login
 card

---
 src/app/components/ThreadList.tsx | 11 +++++++----
 src/app/login/page.tsx            |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/components/ThreadList.tsx b/src/app/components/ThreadList.tsx
index f8df2b2..b16b468 100644
--- a/src/app/components/ThreadList.tsx
+++ b/src/app/components/ThreadList.tsx
@@ -459,7 +459,7 @@ export function ThreadList({
             "grid w-full cursor-pointer items-center gap-2 rounded-md py-2 pl-2.5 pr-28 text-left transition-colors duration-200 md:pr-2.5 md:group-focus-within:pr-28 md:group-hover:pr-28",
             "hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             currentThreadId === thread.id
-              ? "border border-primary bg-accent hover:bg-accent"
+              ? "border border-transparent bg-[var(--color-active-bg)] text-[var(--color-active-text)] hover:bg-[var(--color-active-bg)]"
               : "border border-transparent bg-transparent"
           )}
           aria-current={currentThreadId === thread.id}
@@ -632,7 +632,8 @@ export function ThreadList({
         }}
         className={cn(
           "flex flex-shrink-0 items-center gap-2.5 border-b border-border px-3 py-3 text-left text-sm font-medium transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          view === "skills" && "bg-accent"
+          view === "skills" &&
+            "bg-[var(--color-active-bg)] text-[var(--color-active-text)]"
         )}
       >
         <Puzzle
@@ -655,7 +656,8 @@ export function ThreadList({
         }}
         className={cn(
           "flex flex-shrink-0 items-center gap-2.5 border-b border-border px-3 py-3 text-left text-sm font-medium transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          view === "memory" && "bg-accent"
+          view === "memory" &&
+            "bg-[var(--color-active-bg)] text-[var(--color-active-text)]"
         )}
       >
         <BrainCircuit
@@ -688,7 +690,8 @@ export function ThreadList({
         }}
         className={cn(
           "flex flex-shrink-0 items-center gap-2.5 border-b border-border px-3 py-3 text-left text-sm font-medium transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          view === "schedule" && "bg-accent"
+          view === "schedule" &&
+            "bg-[var(--color-active-bg)] text-[var(--color-active-text)]"
         )}
       >
         <Clock
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 9ef0d1a..1fe8ec2 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -76,7 +76,7 @@ export default function LoginPage() {
       <form
         onSubmit={submit}
         method="post"
-        className="w-full max-w-sm rounded-lg border border-border bg-[var(--color-surface)] p-6 shadow-sm"
+        className="w-full max-w-sm rounded-2xl border border-border bg-[var(--color-surface)] p-8 shadow-[var(--shadow-xl)]"
       >
         <div className="mb-6 flex items-center gap-3">
           <Image