style(frontend): refactor UI components with rounded corners, light theme, and design polish

services/frontend/src/shared/ui/MobileTabBar.tsx

@@ -15,7 +15,7 @@ interface MobileTabBarProps {
 
 export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) {
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-border bg-background/90 backdrop-blur-xl md:hidden">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-primary/20 bg-white rounded-t-xl md:hidden">
       {tabs.map(({ id, label, Icon }) => (
         <button
           key={id}

services/frontend/src/shared/ui/badge.tsx

@@ -11,11 +11,12 @@ type BadgeVariant =
 
 const variants: Record<BadgeVariant, string> = {
   default: "border-transparent bg-primary text-primary-foreground",
-  secondary: "border-transparent bg-secondary text-secondary-foreground",
-  destructive: "border-transparent bg-destructive text-destructive-foreground",
-  outline: "text-foreground",
-  success: "border-transparent bg-emerald-500/15 text-emerald-300",
-  warning: "border-transparent bg-amber-500/15 text-amber-300",
+  secondary:
+    "border-transparent bg-muted text-muted-foreground",
+  destructive: "border-transparent bg-[#FCA5A5] text-red-800",
+  outline: "border-border text-foreground",
+  success: "border-transparent bg-[#BBF7D0] text-green-800",
+  warning: "border-transparent bg-[#FDE68A] text-amber-800",
 };
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,7 +31,7 @@ export function Badge({
   return (
     <div
       className={cn(
-        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
+        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
         variants[variant],
         className,
       )}

services/frontend/src/shared/ui/button.tsx

@@ -11,19 +11,19 @@ type ButtonVariant =
 type ButtonSize = "default" | "sm" | "lg" | "icon";
 
 const variants: Record<ButtonVariant, string> = {
-  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-  destructive:
-    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+  default:
+    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  secondary: "bg-[#FFB7C5] text-[#1a1a2e] hover:bg-[#FFB7C5]/80",
+  destructive: "bg-[#FCA5A5] text-[#1a1a2e] hover:bg-[#FCA5A5]/80",
   outline:
-    "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
-  ghost: "hover:bg-accent hover:text-accent-foreground",
+    "border border-border bg-white hover:bg-primary-soft",
+  ghost: "hover:bg-primary-soft",
 };
 
 const sizes: Record<ButtonSize, string> = {
   default: "h-10 px-4 py-2",
-  sm: "h-9 rounded-md px-3",
-  lg: "h-11 rounded-md px-8",
+  sm: "h-9 rounded-xl px-3",
+  lg: "h-11 rounded-xl px-8",
   icon: "h-10 w-10",
 };
 
@@ -45,7 +45,7 @@ export function Button({
   return (
     <Comp
       className={cn(
-        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
         variants[variant],
         sizes[size],
         className,

services/frontend/src/shared/ui/card.tsx

@@ -8,7 +8,7 @@ export function Card({
   return (
     <div
       className={cn(
-        "rounded-2xl border border-border bg-card text-card-foreground shadow-sm",
+        "rounded-2xl border border-border bg-white text-card-foreground shadow-md hover:shadow-lg transition-shadow",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/index.ts

@@ -16,3 +16,4 @@ export { Select } from "./select";
 export { Skeleton } from "./skeleton";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 export { ToastProvider, useToast } from "./toast";
+export { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";

services/frontend/src/shared/ui/input.tsx

@@ -9,7 +9,7 @@ export function Input({ className, type, ...props }: InputProps) {
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/scroll-area.tsx

@@ -41,7 +41,7 @@ function ScrollBar({
       )}
       {...props}
     >
-      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-primary/30" />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   );
 }

services/frontend/src/shared/ui/select.tsx

@@ -21,7 +21,7 @@ export function Select({
   return (
     <select
       className={cn(
-        "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/skeleton.tsx

@@ -7,7 +7,7 @@ export function Skeleton({
 }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted/60", className)}
+      className={cn("rounded-md bg-muted animate-shimmer", className)}
       {...props}
     />
   );

services/frontend/src/shared/ui/tabs.tsx

@@ -26,7 +26,7 @@ export function TabsTrigger({
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary-soft data-[state=active]:text-foreground data-[state=active]:shadow-sm",
         className,
       )}
       {...props}

services/frontend/src/shared/ui/toast.tsx

@@ -6,6 +6,7 @@ import {
   useContext,
   useState,
 } from "react";
+import { cn } from "../lib/utils";
 
 interface Toast {
   id: string;
@@ -56,6 +57,20 @@ export function useToast() {
   return useContext(ToastContext);
 }
 
+const typeStyles: Record<Toast["type"], string> = {
+  info: "border-l-primary bg-white text-foreground",
+  success: "border-l-green-500 bg-white text-foreground",
+  error: "border-l-red-500 bg-white text-foreground",
+  warning: "border-l-amber-500 bg-white text-foreground",
+};
+
+const typeIcons: Record<Toast["type"], string> = {
+  info: "💠",
+  success: "🌸",
+  error: "😿",
+  warning: "⚠️",
+};
+
 function ToastContainer() {
   const { toasts, removeToast } = useContext(ToastContext);
 
@@ -66,18 +81,14 @@ function ToastContainer() {
       {toasts.map((toast) => (
         <div
           key={toast.id}
-          className={`rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur-xl cursor-pointer transition-all hover:scale-[1.02] ${
-            toast.type === "error"
-              ? "border-destructive/30 bg-destructive/20 text-destructive"
-              : toast.type === "success"
-                ? "border-green-500/30 bg-green-500/10 text-green-300"
-                : toast.type === "warning"
-                  ? "border-yellow-500/30 bg-yellow-500/10 text-yellow-300"
-                  : "border-border/30 bg-card/80 text-foreground"
-          }`}
+          className={cn(
+            "flex items-center gap-2 rounded-xl border border-border px-4 py-3 text-sm shadow-md cursor-pointer transition-all hover:scale-[1.02] border-l-4",
+            typeStyles[toast.type],
+          )}
           onClick={() => removeToast(toast.id)}
         >
-          {toast.message}
+          <span className="text-base leading-none">{typeIcons[toast.type]}</span>
+          <span>{toast.message}</span>
         </div>
       ))}
     </div>