refactor: demo page

resources/styles/overview.scss

@@ -1,6 +1,5 @@
 .grid-stack-container {
   position: relative;
-  transition: all 0.3s ease;
 }
 
 .grid-stack-container.edit-mode-active {
@@ -11,7 +10,6 @@
 
 .grid-stack-item {
   position: relative;
-  transition: all 0.3s ease;
 }
 
 .grid-stack-item.edit-mode {
@@ -260,6 +258,32 @@
   opacity: 1;
 }
 
+.custom-toggle {
+  .v-selection-control__input {
+    .v-switch__track {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      opacity: 1 !important;
+    }
+  }
+  
+  &.v-switch--on .v-selection-control__input {
+    .v-switch__track {
+      background-color: rgba(255, 255, 255, 0.8) !important;
+    }
+    
+    .v-switch__thumb {
+      background-color: rgba(var(--v-theme-primary), 1) !important;
+    }
+  }
+  
+  .v-label {
+    color: rgba(255, 255, 255, 0.95) !important;
+    font-weight: 500;
+    font-size: 0.9rem;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+}
+
 @media (max-width: 768px) {
   .banner-content {
     flex-direction: column;
@@ -291,4 +315,20 @@
     padding: 3px 6px !important;
     height: 24px !important;
   }
+
+  .auto-compact-switch {
+    .v-switch__track {
+      width: 44px !important;
+      height: 22px !important;
+    }
+    
+    .v-switch__thumb {
+      width: 18px !important;
+      height: 18px !important;
+    }
+    
+    .v-label {
+      font-size: 0.85rem;
+    }
+  }
 }