From 3ea7f63b839689ce7092bb1bd756b739c2d95504 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Fri, 27 Feb 2026 07:09:27 +0000
Subject: [PATCH] style: remove panel borders and backgrounds on mobile for
 cleaner look

---
 src/App.vue                         |  7 +++++++
 src/components/tools/UrlCleaner.vue |  9 +++++++++
 src/style.css                       | 10 ++++++++++
 3 files changed, 26 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 693884b..94d1c7c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -74,6 +74,13 @@ onUnmounted(() => {
   padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
 }
 
+@media (max-width: 640px) {
+  .main-content {
+    padding: 1rem;
+    padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
+  }
+}
+
 @media (min-width: 768px) {
   .app-body {
     overflow: hidden;
diff --git a/src/components/tools/UrlCleaner.vue b/src/components/tools/UrlCleaner.vue
index b1abdee..c3cabda 100644
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -300,6 +300,15 @@ onUnmounted(() => {
   border-radius: 12px;
 }
 
+@media (max-width: 640px) {
+  .input-section {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
 .input-wrapper {
   display: flex;
   gap: 1rem;
diff --git a/src/style.css b/src/style.css
index 6864dc0..043e914 100644
--- a/src/style.css
+++ b/src/style.css
@@ -239,6 +239,16 @@ body {
   box-shadow: var(--glass-shadow);
 }
 
+@media (max-width: 640px) {
+  .glass-panel:not(.modal-content) {
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: none;
+    box-shadow: none;
+  }
+}
+
 .btn-neon {
   background: var(--button-bg);
   border: 1px solid var(--button-border);