Add mobile-optimized styles for iPhone 13 and 16 Pro Max

- Add 500px breakpoint: smaller fonts, tighter spacing, smaller
  month buttons and previews, center label adjustments
- Add 400px breakpoint for iPhone 13 (390px): even smaller fonts,
  reduced padding, compact details box styling
- Title now fits on one line at all mobile sizes
- Month navigator buttons all visible without cutoff
- Center label scales appropriately for small screens

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

styles.css

@@ -362,25 +362,134 @@ body {
 }
 
 @media (max-width: 500px) {
+    h1 {
+        font-size: 22px;
+    }
+
     .month-btn {
-        padding: 6px 8px;
-        font-size: 12px;
+        padding: 4px 6px;
+        font-size: 11px;
     }
 
     .month-preview {
-        width: 32px;
-        height: 32px;
+        width: 28px;
+        height: 28px;
     }
 
     .month-label {
-        font-size: 10px;
+        font-size: 9px;
     }
 
     .nav-arrow {
-        width: 30px;
-        height: 30px;
+        width: 28px;
+        height: 28px;
+        font-size: 18px;
+    }
+
+    .month-navigator {
+        gap: 4px;
+    }
+
+    .month-list {
+        gap: 4px;
+    }
+
+    .center-label {
+        text-align: center;
+    }
+
+    .center-month {
+        font-size: 14px;
+    }
+
+    .center-category {
+        font-size: 14px;
+    }
+
+    .center-amount {
+        font-size: 18px;
+    }
+
+    .center-rub {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 400px) {
+    h1 {
         font-size: 20px;
     }
+
+    .container {
+        padding: 15px;
+    }
+
+    .month-btn {
+        padding: 4px 5px;
+    }
+
+    .month-preview {
+        width: 26px;
+        height: 26px;
+    }
+
+    .nav-arrow {
+        width: 26px;
+        height: 26px;
+        font-size: 16px;
+    }
+
+    .center-month {
+        font-size: 12px;
+    }
+
+    .center-category {
+        font-size: 12px;
+    }
+
+    .center-amount {
+        font-size: 16px;
+    }
+
+    .center-rub {
+        font-size: 14px;
+    }
+
+    .details-header {
+        padding: 8px 0;
+    }
+
+    .hover-name {
+        font-size: 16px;
+    }
+
+    .hover-amount {
+        font-size: 16px;
+        min-width: 100px;
+    }
+
+    #details-box h4 {
+        margin: 12px 0 5px;
+        font-size: 13px;
+    }
+
+    .top-item {
+        padding: 6px 0;
+    }
+
+    .top-item-name {
+        font-size: 13px;
+    }
+
+    .top-item-amount {
+        font-size: 13px;
+        min-width: 70px;
+    }
+
+    .top-item-percent {
+        font-size: 12px;
+        width: 40px;
+    }
 }
 
 /* Eye button for transaction details */