style(stats): remove highlighted accent from Blog Posts card

Remove the teal highlight styling from the Blog Posts card on the Stats
page so all stat cards have uniform appearance. This removes the
highlighted property and associated conditional CSS classes.

src/pages/Stats.tsx

@@ -8,6 +8,8 @@ import {
   FileText,
   BookOpen,
   Activity,
+  TrendingUp,
+  Code,
 } from "lucide-react";
 
 // Site launched Dec 14, 2025 at 1:00 PM (v1.0.0), stats added same day (v1.2.0)
@@ -38,10 +40,50 @@ export default function Stats() {
     return null;
   }
 
+  // Stats card configuration with numbered sections
+  const statsCards = [
+    {
+      number: "01",
+      icon: Activity,
+      title: "Active Now",
+      value: stats.activeVisitors,
+      description: "Visitors on site",
+    },
+    {
+      number: "02",
+      icon: Eye,
+      title: "Total Views",
+      value: stats.totalPageViews,
+      description: `Since ${formatTrackingDate(stats.trackingSince)}`,
+      note: `Site launched ${SITE_LAUNCH_DATE}`,
+    },
+    {
+      number: "03",
+      icon: Users,
+      title: "Unique Visitors",
+      value: stats.uniqueVisitors,
+      description: "Unique sessions",
+    },
+    {
+      number: "04",
+      icon: BookOpen,
+      title: "Blog Posts",
+      value: stats.publishedPosts,
+      description: "Published posts",
+    },
+    {
+      number: "05",
+      icon: FileText,
+      title: "Pages",
+      value: stats.publishedPages,
+      description: "Static pages",
+    },
+  ];
+
   return (
-    <div className="stats-page">
+    <div className="stats-page-wide">
       {/* Header with back button */}
-      <nav className="stats-nav">
+      <nav className="stats-nav-wide">
         <button onClick={() => navigate("/")} className="back-button">
           <ArrowLeft size={16} />
           <span>Back</span>
@@ -49,80 +91,49 @@ export default function Stats() {
       </nav>
 
       {/* Page header */}
-      <header className="stats-header">
-        <h1 className="stats-title">Site Statistics</h1>
-        <p className="stats-subtitle">
+      <header className="stats-header-wide">
+        <h1 className="stats-title-wide">Site Statistics</h1>
+        <p className="stats-subtitle-wide">
           Real-time analytics for this site. All data updates automatically.
         </p>
       </header>
 
-      {/* Stats cards grid */}
-      <section className="stats-grid">
-        {/* Active visitors card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <Activity size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Active Now</span>
-          </div>
-          <div className="stat-card-value">{stats.activeVisitors}</div>
-          <div className="stat-card-desc">Visitors on site</div>
-        </div>
-
-        {/* Total page views card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <Eye size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Total Views</span>
-          </div>
-          <div className="stat-card-value">{stats.totalPageViews}</div>
-          <div className="stat-card-desc">
-            Since {formatTrackingDate(stats.trackingSince)}
-          </div>
-          <div className="stat-card-note">Site launched {SITE_LAUNCH_DATE}</div>
-        </div>
-
-        {/* Unique visitors card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <Users size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Unique Visitors</span>
-          </div>
-          <div className="stat-card-value">{stats.uniqueVisitors}</div>
-          <div className="stat-card-desc">Unique sessions</div>
-        </div>
-
-        {/* Published posts card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <BookOpen size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Blog Posts</span>
-          </div>
-          <div className="stat-card-value">{stats.publishedPosts}</div>
-          <div className="stat-card-desc">Published posts</div>
-        </div>
-
-        {/* Published pages card */}
-        <div className="stat-card">
-          <div className="stat-card-header">
-            <FileText size={18} className="stat-card-icon" />
-            <span className="stat-card-label">Pages</span>
-          </div>
-          <div className="stat-card-value">{stats.publishedPages}</div>
-          <div className="stat-card-desc">Static pages</div>
-        </div>
+      {/* Modern horizontal stats cards */}
+      <section className="stats-cards-modern">
+        {statsCards.map((card) => {
+          const IconComponent = card.icon;
+          return (
+            <div key={card.number} className="stat-card-modern">
+              <div className="stat-card-modern-header">
+                <div className="stat-card-modern-icon">
+                  <IconComponent size={16} />
+                </div>
+                <span className="stat-card-modern-number">{card.number}</span>
+              </div>
+              <div className="stat-card-modern-content">
+                <h3 className="stat-card-modern-title">{card.title}</h3>
+                <p className="stat-card-modern-value">{card.value}</p>
+                <p className="stat-card-modern-desc">{card.description}</p>
+                {card.note && (
+                  <p className="stat-card-modern-note">{card.note}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
       </section>
 
       {/* Active visitors by page */}
       {stats.activeByPath.length > 0 && (
-        <section className="stats-section">
-          <h2 className="stats-section-title">Currently Viewing</h2>
-          <div className="stats-list">
+        <section className="stats-section-wide">
+          <h2 className="stats-section-title-wide">Currently Viewing</h2>
+          <div className="stats-list-wide">
             {stats.activeByPath.map((item) => (
-              <div key={item.path} className="stats-list-item">
-                <span className="stats-list-path">
+              <div key={item.path} className="stats-list-item-wide">
+                <span className="stats-list-path-wide">
                   {item.path === "/" ? "Home" : item.path}
                 </span>
-                <span className="stats-list-count">
+                <span className="stats-list-count-wide">
                   {item.count} {item.count === 1 ? "visitor" : "visitors"}
                 </span>
               </div>
@@ -133,16 +144,16 @@ export default function Stats() {
 
       {/* Page views by page */}
       {stats.pageStats.length > 0 && (
-        <section className="stats-section">
-          <h2 className="stats-section-title">Views by Page</h2>
-          <div className="stats-list">
+        <section className="stats-section-wide">
+          <h2 className="stats-section-title-wide">Views by Page</h2>
+          <div className="stats-list-wide">
             {stats.pageStats.map((item) => (
-              <div key={item.path} className="stats-list-item">
-                <div className="stats-list-info">
-                  <span className="stats-list-title">{item.title}</span>
-                  <span className="stats-list-type">{item.pageType}</span>
+              <div key={item.path} className="stats-list-item-wide">
+                <div className="stats-list-info-wide">
+                  <span className="stats-list-title-wide">{item.title}</span>
+                  <span className="stats-list-type-wide">{item.pageType}</span>
                 </div>
-                <span className="stats-list-count">
+                <span className="stats-list-count-wide">
                   {item.views} {item.views === 1 ? "view" : "views"}
                 </span>
               </div>