Add dynamic status messages and improve UI styling

- Add today's status message on tracking pages:
  - "Great job, nothing yet!" when no usage logged
  - "{count} recorded, you got this!" when usage exists
- Increase Log Usage button size (h-16, px-8, text-lg)
- Add drop shadows to:
  - Log Usage floating button
  - Calendar card
  - Stats cards
  - Trend graph card
  - Substance header on tracking pages

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/Dashboard.tsx

@@ -118,9 +118,9 @@ export function Dashboard({ user }: DashboardProps) {
               <Button
                 size="lg"
                 onClick={() => setShowUsagePrompt(true)}
-                className="h-14 px-6 rounded-full shadow-lg bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70"
+                className="h-16 px-8 text-lg rounded-full shadow-xl bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 drop-shadow-lg"
               >
-                <PlusCircle className="mr-2 h-5 w-5" />
+                <PlusCircle className="mr-2 h-6 w-6" />
                 Log Usage
               </Button>
             </div>

src/components/StatsCard.tsx

@@ -59,7 +59,7 @@ export function StatsCard({ usageData, substance }: StatsCardProps) {
     : 'from-green-500/5 to-transparent';
 
   return (
-    <Card className={`bg-card/80 backdrop-blur-sm border ${borderColor} bg-gradient-to-br ${bgGradient}`}>
+    <Card className={`bg-card/80 backdrop-blur-sm border ${borderColor} bg-gradient-to-br ${bgGradient} shadow-lg drop-shadow-md`}>
       <CardHeader className="pb-2">
         <CardTitle className="flex items-center gap-2 text-white">
           <SubstanceIcon className={`h-5 w-5 ${iconColor}`} />

src/components/SubstanceTrackingPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { User } from '@/lib/session';
 import { fetchUsageData, UsageEntry } from '@/lib/storage';
 import { UserHeader } from './UserHeader';
@@ -27,7 +27,14 @@ export function SubstanceTrackingPage({ user, substance }: SubstanceTrackingPage
     loadData();
   }, [loadData]);
 
+  const todayCount = useMemo(() => {
+    const today = new Date().toISOString().split('T')[0];
+    const entry = usageData.find((e) => e.date === today && e.substance === substance);
+    return entry?.count ?? 0;
+  }, [usageData, substance]);
+
   const substanceLabel = substance === 'nicotine' ? 'Nicotine' : 'Marijuana';
+  const unitLabel = substance === 'nicotine' ? 'puffs' : 'hits';
   const SubstanceIcon = substance === 'nicotine' ? Cigarette : Leaf;
   const gradientColors = substance === 'nicotine'
     ? 'from-red-500/20 to-orange-500/20'
@@ -49,7 +56,7 @@ export function SubstanceTrackingPage({ user, substance }: SubstanceTrackingPage
 
       <main className="container mx-auto px-4 py-8">
         {/* Substance Header */}
-        <div className={`mb-8 p-6 rounded-xl bg-gradient-to-r ${gradientColors} border ${borderColor} backdrop-blur-sm`}>
+        <div className={`mb-8 p-6 rounded-xl bg-gradient-to-r ${gradientColors} border ${borderColor} backdrop-blur-sm shadow-lg`}>
           <div className="flex items-center gap-4">
             <div className={`p-3 rounded-full bg-background/50 ${iconColor}`}>
               <SubstanceIcon className="h-8 w-8" />
@@ -61,9 +68,22 @@ export function SubstanceTrackingPage({ user, substance }: SubstanceTrackingPage
           </div>
         </div>
 
+        {/* Today's Status Message */}
+        <div className="mb-8 text-center">
+          {todayCount === 0 ? (
+            <p className="text-2xl font-medium text-green-400">
+              Great job, nothing yet!
+            </p>
+          ) : (
+            <p className="text-2xl font-medium text-white">
+              {todayCount} {todayCount === 1 ? (substance === 'nicotine' ? 'puff' : 'hit') : unitLabel} recorded, you got this!
+            </p>
+          )}
+        </div>
+
         {/* Inspirational Message */}
         <div className="mb-8 text-center">
-          <p className="text-2xl font-light text-white/80 italic">
+          <p className="text-xl font-light text-white/60 italic">
             &quot;One day at a time...&quot;
           </p>
         </div>

src/components/UsageCalendar.tsx

@@ -178,7 +178,7 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
 
   return (
     <>
-      <Card className="bg-card/80 backdrop-blur-sm">
+      <Card className="bg-card/80 backdrop-blur-sm shadow-lg drop-shadow-md">
         <CardHeader>
           <CardTitle>Usage Calendar</CardTitle>
         </CardHeader>

src/components/UsageTrendGraph.tsx

@@ -62,7 +62,7 @@ export function UsageTrendGraph({ usageData, substance }: UsageTrendGraphProps)
   }, [chartData]);
 
   return (
-    <Card className="bg-card/80 backdrop-blur-sm">
+    <Card className="bg-card/80 backdrop-blur-sm shadow-lg drop-shadow-md">
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span>{substanceLabel} Usage Trend</span>