add some ui improvements

css/components.css

@@ -11,6 +11,10 @@
     transition: all var(--transition-fast);
 }
 
+.btn:active {
+    transform: scale(0.97);
+}
+
 .btn-primary {
     background-color: var(--color-primary);
     color: var(--color-bg);
@@ -64,6 +68,12 @@
     box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
+.input:focus-visible,
+.btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 .input::placeholder {
     color: var(--color-text-muted);
 }
@@ -86,11 +96,12 @@
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     overflow: hidden;
-    transition: box-shadow var(--transition-fast);
+    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
 }
 
 .card:hover {
     box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
 }
 
 .card-image {
@@ -200,6 +211,11 @@ app-header {
     z-index: var(--z-sticky);
     background-color: var(--color-bg);
     border-bottom: 1px solid var(--color-border);
+    transition: box-shadow var(--transition-fast);
+}
+
+app-header.scrolled {
+    box-shadow: var(--shadow-sm);
 }
 
 app-header .header-inner {

js/components/app-header.js

@@ -8,6 +8,7 @@ class AppHeader extends HTMLElement {
         this.langDropdownOpen = false
         this.handleOutsideClick = this.handleOutsideClick.bind(this)
         this.handleKeydown = this.handleKeydown.bind(this)
+        this.handleScroll = this.handleScroll.bind(this)
     }
 
     connectedCallback() {
@@ -15,6 +16,7 @@ class AppHeader extends HTMLElement {
         this.setupEventListeners()
         document.addEventListener('click', this.handleOutsideClick)
         document.addEventListener('keydown', this.handleKeydown)
+        window.addEventListener('scroll', this.handleScroll, { passive: true })
         
         // Subscribe to auth changes (only once!)
         this.authUnsubscribe = auth.subscribe(() => {
@@ -26,9 +28,14 @@ class AppHeader extends HTMLElement {
     disconnectedCallback() {
         document.removeEventListener('click', this.handleOutsideClick)
         document.removeEventListener('keydown', this.handleKeydown)
+        window.removeEventListener('scroll', this.handleScroll)
         if (this.authUnsubscribe) this.authUnsubscribe()
     }
 
+    handleScroll() {
+        this.classList.toggle('scrolled', window.scrollY > 10)
+    }
+
     handleOutsideClick() {
         if (this.langDropdownOpen) {
             this.closeDropdown()