From abc6ef2a9d06534d18cf4242a22026e2452fa3a3 Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Sun, 1 Feb 2026 18:36:50 +0300
Subject: [PATCH] Show home icon only on mobile with white background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Home icon only appears on narrow screens (≤850px), not desktop
- Added white circular background with subtle shadow for readability
- Icon is larger (28px + padding) for easier touch targeting

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 styles.css | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/styles.css b/styles.css
index 1a4fe33..4c8583f 100644
--- a/styles.css
+++ b/styles.css
@@ -179,24 +179,24 @@ body {
 .center-home {
     display: none;
     justify-content: center;
-    margin-bottom: 4px;
     pointer-events: auto;
     cursor: pointer;
 }
 
 .center-home svg {
-    width: 20px;
-    height: 20px;
-    color: #666;
-    transition: color 0.2s;
+    width: 28px;
+    height: 28px;
+    color: #333;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    padding: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    transition: all 0.2s;
 }
 
 .center-home:hover svg {
     color: #000;
-}
-
-.center-label.drilled-down .center-home {
-    display: flex;
+    background: #fff;
 }
 
 .center-amount {
@@ -389,7 +389,13 @@ body {
 
     /* Still show home icon on narrow screens when drilled down */
     .center-label.drilled-down {
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .center-label.drilled-down .center-home {
+        display: flex;
     }
 
     .center-label.drilled-down .center-month,