reverted style changes

src/baby_monitor/static/diapers.html

@@ -5,11 +5,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diapers - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
-    <link rel="stylesheet" href="/styles.css" />
     <style>
-      /* Page-specific overrides */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
       body {
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background-color: #f0f0f0;
+        min-height: 100vh;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
       }
 
       .button {
@@ -42,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -84,6 +118,13 @@
       .chart-wrapper {
         position: relative;
         height: 300px;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      .chart-wrapper canvas {
+        max-width: 100%;
+        max-height: 100%;
       }
 
       .charts-row {