优化PC核心工作流视觉 Wave2（05-27-pc-core-workflow-visual-wave2）

client/src/components/auth/AuthPanel.tsx

@@ -15,13 +15,13 @@ export function AuthPanel({ title, subtitle, children, footer, className, "data-
   return (
     <section
       className={cn(
-        "relative w-full overflow-hidden rounded-2xl border border-slate-200/80 bg-white/95 p-6 shadow-[0_24px_80px_rgba(15,23,42,0.10)] ring-1 ring-white/70 backdrop-blur sm:p-8",
+        "auth-panel relative w-full overflow-hidden p-6 sm:p-7",
         className,
       )}
       data-testid={testId}
     >
-      <div aria-hidden="true" className="absolute inset-x-0 top-0 h-1 bg-[linear-gradient(90deg,#00398a,#0f766e)]" />
-      <div className="space-y-7">
+      <div aria-hidden="true" className="auth-panel__accent" />
+      <div className="space-y-6">
         <AppBrand compact />
         <div>
           <h1 className="text-xl font-semibold leading-7 text-slate-950">{title}</h1>

client/src/components/patterns/MetricCard.tsx

@@ -9,6 +9,7 @@ export function MetricCard({
   href,
   tone = "neutral",
   ariaLabel,
+  className,
 }: {
   title: string;
   value: ReactNode;
@@ -16,6 +17,7 @@ export function MetricCard({
   href?: string;
   tone?: "neutral" | "warning" | "danger";
   ariaLabel?: string;
+  className?: string;
 }) {
   const content = (
     <div className="relative z-[1]">
@@ -28,22 +30,23 @@ export function MetricCard({
     </div>
   );
 
-  const className = cn(
+  const rootClassName = cn(
     "metric-card",
     tone === "warning" && "metric-card--warning",
     tone === "danger" && "metric-card--danger",
+    className,
   );
 
   if (href) {
     return (
-      <Link to={href} aria-label={ariaLabel} className={className}>
+      <Link to={href} aria-label={ariaLabel} className={rootClassName}>
         {content}
       </Link>
     );
   }
 
   return (
-    <div aria-label={ariaLabel} className={className}>
+    <div aria-label={ariaLabel} className={rootClassName}>
       {content}
     </div>
   );