Compact donut layout for larger landscape phones (iPhone Pro Max)

For viewports >850px wide but <=500px tall (landscape):
- Hide center label text (month/amount), keep home icon on drill-down
- Wider details panel (40vw), smaller fonts (12-13px)
- Tighter spacing to fit all content without clipping

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

styles.css

@@ -725,6 +725,68 @@ body {
     }
 }
 
+/* Larger landscape phones (e.g. iPhone Pro Max ~956×440): compact center, tighter details */
+@media (min-width: 851px) and (max-height: 500px) and (orientation: landscape) {
+    .center-label {
+        display: none;
+    }
+
+    .center-label.drilled-down {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .center-label.drilled-down .center-home {
+        display: flex;
+    }
+
+    .center-label.drilled-down .center-month,
+    .center-label.drilled-down .center-category,
+    .center-label.drilled-down .center-amount {
+        display: none;
+    }
+
+    .chart-wrapper {
+        width: 58%;
+        height: calc(100dvh - 50px);
+    }
+
+    #details-box {
+        width: 40vw;
+        padding: 10px;
+        max-height: calc(100dvh - 50px);
+        right: 4px;
+    }
+
+    .details-header {
+        margin-bottom: 6px;
+        padding: 4px 0;
+    }
+
+    .hover-name {
+        font-size: 13px;
+    }
+
+    .hover-amount {
+        font-size: 16px;
+    }
+
+    #details-box h4 {
+        margin: 6px 0 2px;
+        font-size: 11px;
+    }
+
+    .top-item {
+        padding: 3px 0;
+        font-size: 12px;
+    }
+
+    .top-item-amount {
+        font-size: 12px;
+    }
+}
+
 /* Eye button for transaction details */
 .eye-btn {
     opacity: 0;