refactor: update component styles and improve layout with new utility classes

frontend/src/components/CardView.tsx

@@ -168,12 +168,12 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
   const ops = (item) =>
     typeof operations === "function" ? operations(item) : operations;
   return (
-    <div className="flex-1 flex flex-col overflow-auto">
-      <div className="overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
+    <div className="flex-overflow-hidden">
+      <div className="flex-overflow-auto grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
         {data.map((item) => (
           <div
             key={item.id}
-            className="border border-gray-100 rounded-lg p-4 bg-white hover:shadow-lg transition-shadow duration-200"
+            className="border-card p-4 bg-white hover:shadow-lg transition-shadow duration-200"
           >
             <div className="flex flex-col space-y-4 h-full">
               {/* Header */}

frontend/src/components/DetailHeader.tsx

@@ -48,7 +48,7 @@ function DetailHeader<T>({
       <div className="flex items-start justify-between">
         <div className="flex items-start gap-4 flex-1">
           <div
-            className={`w-16 h-16 text-white rounded-xl flex items-center justify-center shadow-lg ${
+            className={`w-16 h-16 text-white rounded-lg flex-center shadow-lg ${
               data?.iconColor
                 ? data.iconColor
                 : "bg-gradient-to-br from-blue-100 to-blue-200"

frontend/src/components/RadioCard.tsx

@@ -32,7 +32,7 @@ const RadioCard: React.FC<RadioCardProps> = ({
       {options.map((option) => (
         <div
           key={option.value}
-          className="border border-gray-200 rounded-lg hover:shadow-lg p-4 text-center"
+          className="border-card hover:shadow-lg p-4 text-center"
           style={{
             borderColor: value === option.value ? "#1677ff" : undefined,
             background: value === option.value ? "#e6f7ff" : undefined,

frontend/src/components/TagManagement.tsx

@@ -30,7 +30,7 @@ function CustomTag({
   return (
     <div
       key={tag.id}
-      className="flex items-center justify-between px-4 py-2 border border-gray-100 rounded-md hover:bg-gray-50"
+      className="flex items-center justify-between px-4 py-2 border-card hover:bg-gray-50"
     >
       {editingTag?.id === tag.id ? (
         <div className="flex gap-2 flex-1">
@@ -199,7 +199,7 @@ const TagManager: React.FC = ({
         title="标签管理"
         width={500}
       >
-        <div className="space-y-4 flex flex-col overflow-y-auto h-full">
+        <div className="space-y-4 flex-overflow">
           {/* Add New Tag */}
           <div className="flex gap-2">
             <Input
@@ -223,7 +223,7 @@ const TagManager: React.FC = ({
             </Button>
           </div>
 
-          <div className="flex-1 overflow-auto">
+          <div className="flex-overflow">
             <div className="overflow-auto grid grid-cols-2 gap-2">
               {tags.map((tag) => (
                 <CustomTag

frontend/src/components/TaskPopover.tsx

@@ -89,7 +89,7 @@ export default function TaskPopover() {
                 {tasks.map((task) => (
                   <div
                     key={task.id}
-                    className="p-3 border border-gray-100 rounded-lg hover:bg-gray-50"
+                    className="p-3 border-card hover:bg-gray-50"
                   >
                     <div className="space-y-2">
                       <div className="flex items-center justify-between">