4sp-dv 1.0.26 → 1.0.28

package/4simpleproblems_v5.html

@@ -6,7 +6,7 @@
     <title>4SP - VERSION 5 CLIENT</title>
     <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo.png">
 
-    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.25/logged-in/">
+    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.28/logged-in/">
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
     
@@ -106,7 +106,7 @@
         font-size: 1rem; 
         cursor: pointer; 
         opacity: 1; 
-        transition: opacity 0.3s, color 0.3s ease; 
+        transition: opacity 0.3s, color 0.3s ease, background-color 0.3s ease; 
         z-index: 55; 
         pointer-events: auto;
         background: transparent;
@@ -115,13 +115,17 @@
 
     #glide-left { 
         left: 0; 
-        background: linear-gradient(to right, var(--navbar-bg, #000000) 30%, transparent); 
+        background-color: var(--navbar-bg, #000000);
+        -webkit-mask-image: linear-gradient(to right, black 30%, transparent);
+        mask-image: linear-gradient(to right, black 30%, transparent);
         justify-content: flex-start; 
         padding-left: 8px; 
     }
     #glide-right { 
         right: 0; 
-        background: linear-gradient(to left, var(--navbar-bg, #000000) 30%, transparent); 
+        background-color: var(--navbar-bg, #000000);
+        -webkit-mask-image: linear-gradient(to left, black 30%, transparent);
+        mask-image: linear-gradient(to left, black 30%, transparent);
         justify-content: flex-end; 
         padding-right: 8px; 
     }
@@ -140,7 +144,7 @@
     .nav-tab:hover { 
         color: var(--tab-hover-text, #ffffff); 
         background-color: var(--tab-hover-bg, rgba(79, 70, 229, 0.05));
-        border-color: var(--tab-hover-border, transparent);
+        border-color: var(--tab-active-border, #4f46e5);
         transform: translateY(-1px);
         z-index: 50; 
     }
@@ -424,7 +428,7 @@
     }
     .nav-tab:hover { 
         color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05);
-        border-color: #4f46e5; transform: scale(1.02);
+        border-color: var(--tab-active-border, #4f46e5); transform: scale(1.02);
         z-index: 50;
     }
 
@@ -611,7 +615,7 @@
                                     </div>
                                     
                                     <label class="block text-gray-400 text-xs mb-2 font-light">Background Color</label>
-                                    <div class="grid grid-cols-5 gap-2 mb-6" id="pfp-color-grid">
+                                    <div class="flex flex-wrap gap-2 mb-6" id="pfp-color-grid">
                                         <!-- Colors generated by JS -->
                                     </div>
                                     
@@ -774,7 +778,16 @@
         const displayUsername = document.getElementById('display-username');
         const displayEmail = document.getElementById('display-email');
 
-        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.25/logged-in/';
+        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.28/logged-in/';
+        
+        // Preload Logos
+        const preloadImgs = [
+            'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-dark.png',
+            'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-christmas.png',
+            'https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png'
+        ];
+        preloadImgs.forEach(src => new Image().src = src);
+
         const STORAGE_KEY = 'local_access_code';
         const USER_DATA_KEY = 'local_user_data';
         const LAST_PAGE_KEY = 'local_last_page';
@@ -1109,7 +1122,26 @@
             }
             
             // Initial check
-            setTimeout(updateScrollGilders, 50);
+            setTimeout(() => {
+                updateScrollGilders();
+                
+                // Ensure Active Tab Visibility (Scroll if under gradient)
+                const activeTab = tabsContainerEl.querySelector('.nav-tab.active');
+                if (activeTab) {
+                    const containerRect = tabsContainerEl.getBoundingClientRect();
+                    const tabRect = activeTab.getBoundingClientRect();
+                    const gradientWidth = 70; // Gradient is ~60px + padding
+
+                    // Check Left Edge
+                    if (tabRect.left < containerRect.left + gradientWidth) {
+                        tabsContainerEl.scrollBy({ left: tabRect.left - containerRect.left - gradientWidth - 20, behavior: 'smooth' });
+                    }
+                    // Check Right Edge
+                    else if (tabRect.right > containerRect.right - gradientWidth) {
+                         tabsContainerEl.scrollBy({ left: tabRect.right - containerRect.right + gradientWidth + 20, behavior: 'smooth' });
+                    }
+                }
+            }, 50);
         }
 
         // Auth Menu
@@ -1614,6 +1646,9 @@
                     if (sec.id === `tab-${tabId}`) sec.classList.remove('hidden');
                     else sec.classList.add('hidden');
                 });
+
+                // Save State
+                localStorage.setItem('last_settings_tab', tabId);
             });
         });
 
@@ -1684,7 +1719,18 @@
         // --- 2. Personalization ---
         // Letter Avatar Setup
         // Removed last color (Grey) to make 10 colors (5x2 grid)
-        const letterColors = ['EF4444', 'F97316', 'F59E0B', '84CC16', '10B981', '06B6D4', '3B82F6', '6366F1', '8B5CF6', 'EC4899'];
+        const letterColors = [
+            'EF4444', // Red
+            'F97316', 'FDBA74', // Orange
+            'EAB308', 'FDE047', // Yellow
+            '22C55E', '86EFAC', // Green
+            '06B6D4', '67E8F9', // Cyan
+            '3B82F6', '93C5FD', // Blue
+            '6366F1', 'A5B4FC', // Indigo
+            'A855F7', 'D8B4FE', // Purple
+            'EC4899', 'F9A8D4', // Pink
+            '6B7280', '000000'  // Grey & Black
+        ];
         const pfpModeBtns = document.querySelectorAll('.pfp-mode-btn');
         const pfpLetterOptions = document.getElementById('pfp-letter-options');
         const pfpUploadOptions = document.getElementById('pfp-upload-options');
@@ -1726,6 +1772,11 @@
             const div = document.createElement('div');
             div.className = 'w-10 h-10 rounded-lg cursor-pointer hover:scale-110 transition border-2 border-transparent';
             div.style.backgroundColor = '#' + color;
+            
+            if (color === '000000') {
+                div.style.borderColor = '#ffffff';
+            }
+
             div.onclick = () => {
                 pfpState.letterColor = '#' + color;
                 updatePfpPreview();
@@ -2096,24 +2147,36 @@
             // Apply Logo & Tinting
             const logoImg = document.getElementById('navbar-logo');
             if (logoImg) {
-                // Update Source (Use absolute path comparison or specific logic)
-                // We just set it. Browser handles cache.
-                // Note: The original navigation.js checked src endsWith to avoid reload flicker, but simple assignment is okay.
                 if (!logoImg.src.includes(logoSrc)) {
                      logoImg.src = logoSrc;
                 }
 
-                // Apply Tinting
                 const noFilterThemes = ['Dark', 'Light', 'Christmas'];
-                if (noFilterThemes.includes(theme.name)) {
+                const isNoFilter = noFilterThemes.includes(theme.name);
+                
+                // Check if mode is changing (Tinted <-> Standard)
+                // We check existing transform state
+                const wasNoFilter = logoImg.style.transform === '' || logoImg.style.transform === 'none';
+                const modeChanged = isNoFilter !== wasNoFilter;
+
+                if (modeChanged) {
+                    logoImg.style.transition = 'none';
+                }
+
+                if (isNoFilter) {
                     logoImg.style.filter = ''; 
                     logoImg.style.transform = '';
                 } else {
                     const tintColor = theme['tab-active-text'] || '#ffffff';
-                    // The original navigation.js used this trick for SVG coloring via filter
                     logoImg.style.filter = `drop-shadow(100px 0 0 ${tintColor})`;
                     logoImg.style.transform = 'translateX(-100px)';
                 }
+
+                if (modeChanged) {
+                    // Force Reflow
+                    void logoImg.offsetWidth; 
+                    logoImg.style.transition = ''; // Restore
+                }
             }
 
             // Save to local storage for persistence on reload
@@ -2371,6 +2434,14 @@
 
                 updatePfpPreview();
             }
+
+            // Restore Tab
+            const lastTab = localStorage.getItem('last_settings_tab');
+            if (lastTab) {
+                const tabBtn = document.querySelector(`.settings-tab[data-tab="${lastTab}"]`);
+                if(tabBtn) tabBtn.click();
+            }
+
             loadThemes();
             loadPanicKeys(); 
         }

package/component-library.html

@@ -291,7 +291,7 @@
                 .nav-tab:hover { 
                     color: var(--tab-hover-text); 
                     background-color: rgba(79, 70, 229, 0.05);
-                    border-color: #4f46e5;
+                    border-color: var(--tab-active-border);
                     transform: scale(1.05); /* Tab bubbles up */
                 }
                 .nav-tab.active { 

package/logged-in/countdowns.html

@@ -525,7 +525,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/dailyphoto.html

@@ -368,7 +368,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/dashboard.html

@@ -74,6 +74,7 @@
             
             /* Enable absolute positioning for spinner */
             position: relative; 
+            min-height: 200px; /* Ensure height stability */
         }
 
         .dashboard-widget:hover {
@@ -125,6 +126,12 @@
             width: 1px;
             height: 100px; 
             background-color: #262626;
+            transition: opacity 0.5s ease, width 0.5s ease;
+        }
+        .vertical-divider.hidden-anim {
+            opacity: 0;
+            width: 0;
+            margin: 0; 
         }
 
         /* --- WEATHER STYLES --- */
@@ -134,6 +141,15 @@
             flex-direction: column;
             justify-content: center;
             gap: 0.5rem;
+            transition: opacity 0.5s ease, transform 0.5s ease;
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .weather-section.hidden-anim {
+            opacity: 0;
+            transform: translateY(10px);
+            pointer-events: none;
+            position: absolute; /* Take out of flow when hidden */
         }
 
         .weather-main {
@@ -213,6 +229,38 @@
             font-size: 1.2rem;
         }
         
+        /* Retry Button */
+        #retry-weather-btn {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            width: 40px;
+            height: 40px;
+            border-radius: 14px;
+            border: 1px solid #4b5563;
+            background: transparent;
+            color: #d1d5db;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 100;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.5s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
+            transform: scale(0.8) translateY(20px);
+        }
+        #retry-weather-btn:hover {
+            background-color: #374151;
+            color: white;
+            transform: scale(1.1) translateY(0);
+        }
+        #retry-weather-btn.visible {
+            opacity: 1;
+            pointer-events: auto;
+            transform: scale(1) translateY(0);
+        }
+        
         /* Font Awesome's base spin animation (needed for custom speed) */
         @keyframes fa-spin {
             0% {
@@ -250,7 +298,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@@ -276,9 +324,9 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
                 <div id="clock-date" class="date-display">--------</div>
             </div>
 
-            <div class="vertical-divider"></div>
+            <div class="vertical-divider" id="weather-divider"></div>
 
-            <div class="weather-section">
+            <div class="weather-section" id="weather-content">
                 <div class="weather-main">
                     <div id="w-icon" class="weather-icon"><i class="fa-solid fa-cloud"></i></div>
                     <div id="w-temp" class="weather-temp">--°</div>
@@ -301,6 +349,10 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
                 </div>
             </div>
             
+            <button id="retry-weather-btn" onclick="retryWeather()" title="Retry Weather">
+                <i class="fa-solid fa-cloud-sun"></i>
+            </button>
+
             <div id="weather-loader">
                 <i class="fa-solid fa-circle-notch fa-spin-slow"></i>
             </div>
@@ -329,6 +381,10 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
         const wWindArrow = document.getElementById('w-wind-arrow');
         const wLocLink = document.getElementById('w-location-link');
         const weatherLoader = document.getElementById('weather-loader'); 
+        
+        const weatherContent = document.getElementById('weather-content');
+        const weatherDivider = document.getElementById('weather-divider');
+        const retryBtn = document.getElementById('retry-weather-btn');
 
         // --- LOADER FUNCTIONS ---
         function showLoader() {
@@ -339,6 +395,35 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
             weatherLoader.classList.remove('loading');
         }
 
+        // --- ERROR STATE UI ---
+        function showRetryState() {
+            hideLoader();
+            weatherContent.classList.add('hidden-anim');
+            weatherDivider.classList.add('hidden-anim');
+            retryBtn.classList.add('visible');
+        }
+
+        function hideRetryState() {
+            retryBtn.classList.remove('visible');
+            // We don't immediately show weatherContent, wait for data or loader
+            // But we can prep them
+            weatherContent.classList.remove('hidden-anim');
+            weatherDivider.classList.remove('hidden-anim');
+        }
+
+        // --- RETRY LOGIC ---
+        window.retryWeather = function() {
+            hideRetryState();
+            showLoader();
+            
+            // If we have coords, use them. If not, re-init.
+            if (CURRENT_LAT && CURRENT_LON) {
+                loadWeatherPrimary(CURRENT_LAT, CURRENT_LON);
+            } else {
+                initWeather();
+            }
+        };
+
         // --- FIREBASE INIT WAITER ---
         function waitForFirebase(callback) {
             const check = setInterval(() => {
@@ -416,30 +501,42 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
                 // Cache is fresh, use it
                 console.log("Using cached weather data.");
                 updateWeatherUI(cache.weatherData);
-                hideLoader(); // FIX: Added hideLoader for cache hits
+                hideLoader(); 
+                // Ensure UI is visible
+                weatherContent.classList.remove('hidden-anim');
+                weatherDivider.classList.remove('hidden-anim');
+                retryBtn.classList.remove('visible');
             } else {
                 // Cache is stale or non-existent, fetch new data
                 console.log("Weather cache stale or missing. Fetching new data.");
                 resetWeatherDisplay();
-                loadWeatherWithFallback(lat, lon);
+                loadWeatherPrimary(lat, lon);
             }
         }
 
         // --- LOCATION FETCH (IP Fallback) ---
         async function initWeather() {
-            showLoader(); // Show loader at start of location determination
-        try {
-            const ipRes = await fetch('https://ipapi.co/json/');
-            if (!ipRes.ok) throw new Error('IP API Error');
-            const ipData = await ipRes.json();
-            lat = ipData.latitude;
-            lon = ipData.longitude;
-        } catch (e) {
-            console.warn("IP location fetch failed:", e);
-            // Fallback to New York or handle gracefully
-            lat = 40.7128;
-            lon = -74.0060;
-        }
+            showLoader(); 
+            // Hide previous state to avoid clutter during load
+            weatherContent.classList.add('hidden-anim');
+            weatherDivider.classList.add('hidden-anim');
+            retryBtn.classList.remove('visible');
+
+            try {
+                const ipRes = await fetch('https://ipapi.co/json/');
+                if (!ipRes.ok) throw new Error('IP API Error');
+                const ipData = await ipRes.json();
+                
+                // Store globally so retry can use it
+                CURRENT_LAT = ipData.latitude;
+                CURRENT_LON = ipData.longitude;
+                
+                loadWeatherPrimary(CURRENT_LAT, CURRENT_LON);
+            } catch (e) {
+                console.warn("IP location fetch failed:", e);
+                // Even if location fails, show retry button
+                showRetryState();
+            }
         }
 
         // --- LOCATION FETCH (Browser Geolocation) ---
@@ -449,8 +546,13 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
                 return;
             }
             
-            showLoader(); // Show loader before geolocating
+            showLoader(); 
             resetWeatherDisplay();
+            
+            // Hide content while locating
+            weatherContent.classList.add('hidden-anim');
+            weatherDivider.classList.add('hidden-anim');
+            retryBtn.classList.remove('visible');
 
             try {
                 const pos = await new Promise((resolve, reject) => {
@@ -463,131 +565,33 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
                 CURRENT_LAT = pos.coords.latitude;
                 CURRENT_LON = pos.coords.longitude;
                 
-                // When explicitly asked for new location, bypass cache and force a fetch
-                loadWeatherWithFallback(CURRENT_LAT, CURRENT_LON);
+                loadWeatherPrimary(CURRENT_LAT, CURRENT_LON);
 
             } catch(e) {
                 console.error("Geolocation failed:", e);
-                // Fallback to IP data if browser location fails (which is checked via initWeather)
-                initWeather(); 
+                // On geo fail, try init (IP) again? Or just error state.
+                // Let's go to error state to let user retry or see issue
+                showRetryState();
             }
         }
 
-        // --- FALLBACK LOGIC ---
-        async function loadWeatherWithFallback(lat, lon) {
-            // Loader is already shown by calling functions (initWeather or getUserBrowserLocation)
+        // --- PRIMARY FETCH (OPEN METEO ONLY) ---
+        async function loadWeatherPrimary(lat, lon) {
             try {
-                // 1. Google Weather (using Firebase API Key) - PRIMARY
-                try {
-                    await fetchGoogleWeather(lat, lon);
-                    return;
-                } catch(e) {
-                    console.warn("Google Weather failed, attempting NWS:", e);
-                }
-
-                // 2. NWS - SECONDARY
-                try {
-                    await fetchNWS(lat, lon);
-                    return;
-                } catch(e) {
-                    console.warn("NWS failed, attempting Open-Meteo:", e);
-                }
-
-                // 3. Open-Meteo - TERTIARY
-                try {
-                    await fetchOpenMeteo(lat, lon);
-                } catch(e) {
-                    console.error("All weather sources failed", e);
-                    hideLoader(); // Hide on absolute failure
-                }
-            } catch (finalError) {
-                // Catches errors during the fallback chain setup
-                hideLoader();
+                await fetchOpenMeteo(lat, lon);
+            } catch (error) {
+                console.error("Weather fetch failed:", error);
+                showRetryState();
             }
         }
 
-        // --- GOOGLE WEATHER FETCH ---
-        async function fetchGoogleWeather(lat, lon) {
-            const apiKey = firebaseConfig.apiKey;
-            const url = `https://weather.googleapis.com/v1/currentConditions:lookup?key=${apiKey}&location.latitude=${lat}&location.longitude=${lon}`;
-            
-            const res = await fetch(url);
-            if (!res.ok) {
-                const errText = await res.text();
-                console.error("Google Weather API Failed. Details:", errText);
-                throw new Error(`Google Weather Error: ${res.status} - ${errText}`);
-            }
-            
-            const data = await res.json();
-            if (!data.currentConditions) throw new Error("Invalid Google Weather Data");
-
-            const curr = data.currentConditions;
-            
-            let tempF = curr.temperature?.value;
-            if (curr.temperature?.unit?.toLowerCase() === 'celsius' || curr.temperature?.unit?.toLowerCase() === 'c') {
-                tempF = (tempF * 9/5) + 32;
-            }
-            
-            const weatherCode = curr.weatherCondition || "CLOUDY"; 
-
-            const weatherData = {
-                temp: Math.round(tempF || 0),
-                iconCode: weatherCode,
-                isDay: true, 
-                high: "--", 
-                low: "--",
-                windSpeed: (curr.windSpeed?.value || 0) + " mph",
-                windDir: curr.windDirection || 0,
-                isNWS: false,
-                isGoogle: true
-            };
-
-            setWeatherCache(weatherData);
-            updateWeatherUI(weatherData);
-            hideLoader(); // Hide loader on success
-        }
-
-        // --- NWS FETCH ---
-        async function fetchNWS(lat, lon) {
-            const pointsRes = await fetch(`https://api.weather.gov/points/${lat},${lon}`);
-            if (!pointsRes.ok) throw new Error("NWS Point Fail");
-            const pointsData = await pointsRes.json();
-            
-            const [forecastRes, hourlyRes] = await Promise.all([
-                fetch(pointsData.properties.forecast),
-                fetch(pointsData.properties.forecastHourly)
-            ]);
-
-            const dailyData = await forecastRes.json();
-            const hourlyData = await hourlyRes.json();
-
-            const current = hourlyData.properties.periods[0];
-            
-            const first24 = hourlyData.properties.periods.slice(0, 24);
-            const temps = first24.map(p => p.temperature);
-            const high = Math.max(...temps);
-            const low = Math.min(...temps);
-
-            const weatherData = {
-                temp: current.temperature,
-                iconCode: current.shortForecast,
-                isDay: current.isDaytime,
-                high: high,
-                low: low,
-                windSpeed: current.windSpeed, 
-                windDir: current.windDirection,
-                isNWS: true
-            };
-
-            setWeatherCache(weatherData);
-            updateWeatherUI(weatherData);
-            hideLoader(); // Hide loader on success
-        }
-
         // --- OPEN METEO FETCH ---
         async function fetchOpenMeteo(lat, lon) {
             const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,is_day,weather_code,wind_speed_10m,wind_direction_10m&daily=temperature_2m_max,temperature_2m_min&temperature_unit=fahrenheit&wind_speed_unit=mph&timezone=auto`;
+            
             const res = await fetch(url);
+            if (!res.ok) throw new Error("Open-Meteo API response not OK");
+            
             const data = await res.json();
             
             const weatherData = {
@@ -603,7 +607,12 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 
             setWeatherCache(weatherData);
             updateWeatherUI(weatherData);
-            hideLoader(); // Hide loader on success
+            
+            hideLoader(); 
+            // Success: Reveal UI
+            weatherContent.classList.remove('hidden-anim');
+            weatherDivider.classList.remove('hidden-anim');
+            retryBtn.classList.remove('visible');
         }
 
         // --- UI UPDATE (Unchanged) ---

package/logged-in/dictionary.html

@@ -248,7 +248,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/messenger-v2.html

@@ -265,7 +265,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/notes.html

@@ -395,7 +395,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/securly-tester.html

@@ -211,7 +211,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/soundboard.html

@@ -287,7 +287,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/test.html

@@ -271,7 +271,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/test2.html

@@ -270,7 +270,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/third-party-soundboard.html

@@ -216,7 +216,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
 .input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
 .settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
 .nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
+.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: var(--tab-active-border); transform: scale(1.05); }
 .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
 .eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
 .eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

package/logged-in/weather.html

@@ -18,7 +18,7 @@
     <script src="../injector.js"></script>
 
     <style>
-        /* --- 4SP BASE STYLING (MATCHING notes.html) --- */
+        /* --- 4SP BASE STYLING --- */
         :root {
             --bg-page: #040404;
             --bg-container: #000000;
@@ -46,55 +46,70 @@
             font-weight: 400 !important;
         }
 
-        /* --- UI COMPONENTS (MATCHING notes.html) --- */
+        /* --- UI COMPONENTS --- */
         .btn-toolbar-style {
             background: var(--menu-bg, #000000);
             border: 1px solid var(--menu-border, #333);
             border-radius: 0.75rem;
             color: #d1d5db;
-            padding: 0.5rem 1rem;
+            padding: 0.6rem 1.2rem;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.2s;
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            gap: 0.5rem;
+            gap: 0.75rem;
+            font-size: 0.95rem;
+            white-space: nowrap;
         }
         
         .btn-toolbar-style:hover {
             background-color: #000000;
             border-color: #fff;
             color: #ffffff;
+            transform: translateY(-1px);
         }
         
-        .btn-toolbar-style.btn-primary-override {
-            background-color: rgba(79, 70, 229, 0.1);
-            border: 1px solid #4f46e5;
-            color: #4f46e5;
-        }
-        .btn-toolbar-style.btn-primary-override:hover {
-            background-color: rgba(79, 70, 229, 0.15);
-            border-color: #6366f1;
-            color: #6366f1;
+        .provider-select-wrapper {
+            position: relative;
+            display: inline-block;
+            min-width: 180px; /* Minimum width */
         }
-
-        /* Input Styling */
-        .input-text-style {
-            width: 100%; 
-            padding: 0.6rem 1rem; 
-            border: 1px solid #333; 
-            background-color: #000000; 
-            border-radius: 0.75rem; 
-            color: #c0c0c0; 
-            transition: all 0.2s;
+        
+        .provider-select {
+            appearance: none;
+            background: #0d0d0d;
+            border: 1px solid #333;
+            color: #fff;
+            padding: 0.6rem 2.5rem 0.6rem 1rem;
+            border-radius: 0.75rem;
+            font-family: 'Geist', sans-serif;
             font-size: 0.95rem;
-            font-weight: 300;
+            cursor: pointer;
+            width: auto; /* Allow width to change based on content */
+            min-width: 100%;
+            transition: border-color 0.2s;
+        }
+        
+        .provider-select:hover {
+            border-color: #6366f1;
         }
-        .input-text-style:focus {
-            border-color: #505050; 
+        
+        .provider-select:focus {
             outline: none;
-            box-shadow: none;
+            border-color: #6366f1;
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        }
+
+        .select-icon {
+            position: absolute;
+            right: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+            color: #6b7280;
+            font-size: 0.75rem;
         }
 
         /* --- LAYOUT UTILS --- */
@@ -107,7 +122,7 @@
         header {
             display: flex;
             flex-direction: column;
-            gap: 1rem;
+            gap: 1.5rem;
             padding: 1.5rem;
             border-bottom: 1px solid #1a1a1a;
             background-color: var(--bg-page);
@@ -120,61 +135,6 @@
             }
         }
 
-        /* --- SEARCH DROPDOWN --- */
-        .search-container {
-            position: relative;
-            width: 100%;
-            max-width: 350px;
-        }
-        
-        .search-dropdown {
-            position: absolute;
-            top: calc(100% + 0.5rem);
-            left: 0;
-            right: 0;
-            background: #000000;
-            border: 1px solid #333;
-            border-radius: 1rem;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            z-index: 100;
-            max-height: 300px;
-            overflow-y: auto;
-            display: none;
-            padding: 0.5rem;
-        }
-        .search-dropdown.active {
-            display: block;
-            animation: fadeIn 0.2s ease-out;
-        }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
-
-        .search-item {
-            padding: 0.6rem 0.8rem;
-            cursor: pointer;
-            border-radius: 0.5rem;
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            transition: background 0.2s;
-            border-bottom: 1px solid transparent;
-        }
-        .search-item:hover { background: #1a1a1a; color: #fff; }
-        .search-item-main { font-size: 0.95rem; color: #e5e7eb; }
-        .search-item-sub { color: #6b7280; font-size: 0.8rem; }
-        
-        .geo-btn-absolute {
-            position: absolute;
-            right: 0.75rem;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #6b7280;
-            cursor: pointer;
-            transition: color 0.2s;
-            background: none;
-            border: none;
-        }
-        .geo-btn-absolute:hover { color: #4f46e5; }
-
         /* --- WEATHER CARDS --- */
         .weather-card {
             background-color: #0d0d0d;
@@ -200,11 +160,10 @@
             color: var(--color-indigo);
         }
 
-        /* Hourly Scroll with Fading Edges */
+        /* Hourly Scroll */
         .scroll-mask-container {
             position: relative;
             width: 100%;
-            /* CSS Mask for fading edges */
             -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
             mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
         }
@@ -213,12 +172,12 @@
             display: flex;
             overflow-x: auto;
             gap: 0.75rem;
-            padding: 1rem 1.5rem; /* Extra padding for the mask to not cut off content immediately */
+            padding: 1rem 1.5rem;
             margin-top: 0.5rem;
-            scrollbar-width: none; /* Hide scrollbar Firefox */
-            -ms-overflow-style: none;  /* Hide scrollbar IE/Edge */
+            scrollbar-width: none;
+            -ms-overflow-style: none;
         }
-        .hourly-container::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome */
+        .hourly-container::-webkit-scrollbar { display: none; }
 
         .hourly-item {
             min-width: 80px;
@@ -309,55 +268,16 @@
         .detail-label { color: #707070; font-size: 0.9rem; }
         .detail-value { color: #fff; font-weight: 500; }
         
-        /* Provider Select styling fix */
-        select option {
-            background: #000;
-            color: #fff;
-            padding: 10px;
-        }
-    
-/* INJECTED STYLES */
-:root { --bg-page: #040404; --bg-container: #000000; --border-color: #333; --text-primary: #c0c0c0; --text-light-grey: #d1d5db; --accent-color: #6366f1; --navbar-bg: #000000; --navbar-border: #1f2937; --tab-text: #9ca3af; --tab-hover-text: #ffffff; --tab-active-text: #4f46e5; --tab-active-bg: rgba(79, 70, 229, 0.1); --tab-active-border: #4f46e5; }
-@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-5deg); } 50% { transform: translateX(5px) rotate(5deg); } 75% { transform: translateX(-5px) rotate(-5deg); } 100% { transform: translateX(0); } }
-.shake-anim { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
-body.no-animations * { transition: none !important; animation: none !important; transform: none !important; }
-body:not(.no-animations) .btn-toolbar-style, body:not(.no-animations) .btn-lock-screen, body:not(.no-animations) .icon-btn, body:not(.no-animations) .nav-tab, body:not(.no-animations) .btn-card-action, body:not(.no-animations) .input-text-style, body:not(.no-animations) .input-lock-screen, body:not(.no-animations) .input-key-style { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
-body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .btn-lock-screen:active, body:not(.no-animations) .icon-btn:active, body:not(.no-animations) .nav-tab:active, body:not(.no-animations) .btn-card-action:active { transform: scale(0.96); transition: transform 0.05s ease-out !important; }
-.btn-toolbar-style { background: #0a0a0a; border: 1px solid #333; border-radius: 14px; color: #d1d5db; padding: 0.75rem 1.25rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); }
-.btn-toolbar-style:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); border-color: #fff; color: #ffffff; }
-.btn-toolbar-style.btn-primary-override { background-color: rgba(79, 70, 229, 0.1); border: 1px solid #4f46e5; color: #4f46e5; }
-.btn-toolbar-style.btn-primary-override:hover { background-color: rgba(79, 70, 229, 0.2); border-color: #6366f1; color: #6366f1; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); }
-.btn-toolbar-style.btn-primary-override-danger { background-color: rgba(220, 38, 38, 0.1); border: 1px solid #dc2626; color: #dc2626; }
-.btn-toolbar-style.btn-primary-override-danger:hover { background-color: rgba(220, 38, 38, 0.2); border-color: #ef4444; color: #ef4444; box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4); }
-.btn-lock-screen { padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 14px; color: rgb(99 102 241); background-color: rgba(99, 102, 241, 0.1); border: 1px solid rgb(99 102 241); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); }
-.btn-lock-screen:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); background-color: rgba(99, 102, 241, 0.2); }
-.icon-btn { width: 40px; height: 40px; border-radius: 14px; border: 1px solid #4b5563; display: flex; align-items: center; justify-content: center; color: #d1d5db; cursor: pointer; background: transparent; }
-.icon-btn:hover { background-color: #374151; color: white; transform: scale(1.1); }
-.btn-card-action { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 14px; background-color: transparent; border: 1px solid transparent; color: #9ca3af; cursor: pointer; }
-.btn-card-action:hover { background-color: rgba(79, 70, 229, 0.1); color: #4f46e5; border-color: #4f46e5; transform: scale(1.15); }
-.input-text-style, .input-select-style { width: 100%; padding: 0.75rem; border: 1px solid #252525; background-color: #111111; border-radius: 14px; color: #c0c0c0; }
-.input-text-style:focus, .input-select-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.02); }
-.input-lock-screen { background-color: #111; border: 1px solid #252525; color: white; border-radius: 14px; padding: 0.75rem; text-align: center; letter-spacing: 0.2em; outline: none; }
-.input-lock-screen:focus { border-color: rgb(99 102 241); transform: scale(1.02); }
-.input-key-style { width: 4rem; padding: 0.75rem; border: 1px solid #252525; background-color: #111111; border-radius: 14px; color: #c0c0c0; font-size: 1.1rem; text-align: center; font-weight: 500; text-transform: uppercase; }
-.input-key-style:focus { border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5); transform: scale(1.1); }
-.settings-box { border: 1px solid #333; border-radius: 24px; background-color: #000000; padding: 1.5rem; }
-.nav-tab { padding: 0.5rem 1rem; color: var(--tab-text); font-size: 0.875rem; font-weight: 400; border-radius: 12px; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer; background: transparent; }
-.nav-tab:hover { color: var(--tab-hover-text); background-color: rgba(79, 70, 229, 0.05); border-color: #4f46e5; transform: scale(1.05); }
-.nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); transform: scale(1.05); }
-.eagler-dropdown { position: relative; background-color: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 0.5rem; min-width: 200px; display: inline-block; }
-.eagler-dropdown-link { display: block; padding: 0.6rem 0.8rem; color: #d1d5db; text-decoration: none; border-radius: 14px; font-size: 0.9rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-.eagler-dropdown-link:hover { background-color: rgba(255, 255, 255, 0.1); color: white; transform: translateX(4px); }
-#notification-container { position: fixed; bottom: 2rem; right: 2rem; display: flex; flex-direction: column; gap: 0.75rem; z-index: 1000; pointer-events: none; }
-.notification-toast { background-color: #0a0a0a; border: 1px solid #333; border-radius: 14px; padding: 0.75rem 1.25rem; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; min-width: 200px; transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, background-color 0.2s; opacity: 0; pointer-events: auto; cursor: default; }
-.notification-toast.show { transform: translateX(0); opacity: 1; }
-.notification-toast.show:hover { transform: scale(1.05) translateX(-5px); background-color: #151515; border-color: #555; box-shadow: 0 8px 25px rgba(0,0,0,0.7); }
-.notification-icon { font-size: 1.1rem; }
-.notification-icon.success { color: #4ade80; }
-.notification-icon.info { color: #60a5fa; }
-.notification-icon.warning { color: #fbbf24; }
-
-</style>
+        /* Option Styling (Limited support) */
+        option { background-color: #000; color: #fff; padding: 10px; }
+
+    /* INJECTED STYLES (Animations) */
+    :root { --bg-page: #040404; --bg-container: #000000; --border-color: #333; --text-primary: #c0c0c0; --text-light-grey: #d1d5db; --accent-color: #6366f1; }
+    @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-5deg); } 50% { transform: translateX(5px) rotate(5deg); } 75% { transform: translateX(-5px) rotate(-5deg); } 100% { transform: translateX(0); } }
+    .shake-anim { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
+    body:not(.no-animations) .btn-toolbar-style, body:not(.no-animations) .hourly-item, body:not(.no-animations) .daily-row { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+    body:not(.no-animations) .btn-toolbar-style:active { transform: scale(0.96); }
+    </style>
     
 </head>
 <body class="min-h-screen">
@@ -378,7 +298,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
             </div>
             <div id="modal-details-list" class="flex flex-col gap-3 pt-2">
                 </div>
-            <button class="btn-toolbar-style w-full mt-4" onclick="closeHourlyModal()">Close</button>
+            <button class="btn-toolbar-style w-full mt-4 justify-center" onclick="closeHourlyModal()">Close</button>
         </div>
     </div>
 
@@ -391,22 +311,17 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
         </div>
         
         <div class="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto">
-            <div class="search-container">
-                <input type="text" id="loc-search-input" placeholder="Change Location..." class="input-text-style pr-10">
-                <button id="btn-geo" class="geo-btn-absolute" title="Use Current Location">
-                    <i class="fa-solid fa-location-crosshairs"></i>
-                </button>
-                
-                <div id="search-results" class="search-dropdown">
-                    </div>
-            </div>
-
-            <div class="relative w-full md:w-auto">
-                <select id="provider-select" class="btn-toolbar-style w-full appearance-none pr-8 outline-none">
-                    <option value="nws">🇺🇸 NWS (USA)</option>
-                    <option value="open-meteo">🌍 Open-Meteo</option>
+            <button id="btn-geo" class="btn-toolbar-style w-full md:w-auto">
+                <i class="fa-solid fa-location-crosshairs text-[#6366f1]"></i>
+                <span>Use Current Location</span>
+            </button>
+
+            <div class="provider-select-wrapper w-full md:w-auto">
+                <select id="provider-select" class="provider-select">
+                    <option value="nws">🇺🇸 NWS (Official)</option>
+                    <option value="open-meteo">🌍 Open-Meteo (Global)</option>
                 </select>
-                <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-xs pointer-events-none text-gray-400"></i>
+                <i class="fa-solid fa-chevron-down select-icon"></i>
             </div>
         </div>
     </header>
@@ -479,10 +394,6 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
         const mainContent = document.getElementById('main-content');
         const locNameEl = document.getElementById('loc-name');
         const providerSelect = document.getElementById('provider-select');
-        
-        // Search Elements
-        const searchInput = document.getElementById('loc-search-input');
-        const searchResults = document.getElementById('search-results');
         const btnGeo = document.getElementById('btn-geo');
 
         // Current Els
@@ -570,7 +481,7 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
                     loadWeather();
                 } catch (err) {
                     loadingText.innerText = "Location Failed.";
-                    alert("Could not determine location. Please search manually.");
+                    alert("Could not determine location. Check browser permissions.");
                     loadingOverlay.style.opacity = '0';
                     loadingOverlay.style.pointerEvents = 'none';
                 }
@@ -607,131 +518,10 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
             }
         }
         
-        // --- SEARCH LOGIC ---
-        let debounceTimer;
-        searchInput.addEventListener('input', (e) => {
-            clearTimeout(debounceTimer);
-            const query = e.target.value.trim();
-            if(query.length < 3) {
-                searchResults.classList.remove('active');
-                return;
-            }
-            // Show loading state in dropdown
-            searchResults.innerHTML = '<div class="search-item text-gray-500"><i class="fa-solid fa-spinner fa-spin mr-2"></i> Searching...</div>';
-            searchResults.classList.add('active');
-            
-            debounceTimer = setTimeout(() => fetchSearchResults(query), 500);
-        });
-        
-        document.addEventListener('click', (e) => {
-            if(!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
-                searchResults.classList.remove('active');
-            }
-        });
-        
         btnGeo.addEventListener('click', () => {
-            searchInput.value = '';
             triggerAutoLocation();
         });
 
-        async function fetchSearchResults(query) {
-            let viewbox = '';
-            if (STATE.lat && STATE.lon) {
-                const b = 1; 
-                viewbox = `&viewbox=${STATE.lon-b},${STATE.lat+b},${STATE.lon+b},${STATE.lat-b}`;
-            }
-            
-            try {
-                const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=10&addressdetails=1${viewbox}`;
-                const res = await fetch(url);
-                const data = await res.json();
-                
-                const filtered = data.filter(item => {
-                    const type = item.type;
-                    const category = item.class;
-                    const validClasses = ['place', 'boundary'];
-                    const validTypes = ['city', 'town', 'village', 'hamlet', 'administrative'];
-                    
-                    if (!validClasses.includes(category)) return false;
-                    if (category === 'boundary' && type !== 'administrative') return false;
-                    return true;
-                });
-
-                renderSearchResults(filtered.slice(0, 5));
-            } catch (e) {
-                console.error("Search failed", e);
-                searchResults.innerHTML = '<div class="search-item text-red-500">Error searching.</div>';
-            }
-        }
-
-        function renderSearchResults(results) {
-            searchResults.innerHTML = '';
-            
-            if (results.length === 0) {
-                const empty = document.createElement('div');
-                empty.className = 'search-item text-gray-500 cursor-default';
-                empty.innerText = 'No places found';
-                searchResults.appendChild(empty);
-            } else {
-                results.forEach(loc => {
-                    const div = document.createElement('div');
-                    div.className = 'search-item';
-                    
-                    const address = loc.address || {};
-                    const city = address.city || address.town || address.village || address.hamlet || loc.name;
-                    const state = address.state || address.country;
-                    
-                    div.innerHTML = `
-                        <div class="search-item-main">${city}</div>
-                        <div class="search-item-sub">${state}</div>
-                    `;
-                    
-                    div.addEventListener('click', () => {
-                        selectLocation(parseFloat(loc.lat), parseFloat(loc.lon), city, state, address.country_code);
-                    });
-                    
-                    searchResults.appendChild(div);
-                });
-            }
-            
-            // Add "Use Current Location" at the bottom
-            const currDiv = document.createElement('div');
-            currDiv.className = 'search-item border-t border-[#333] mt-1 pt-2';
-            if (STATE.locationAllowed) {
-                currDiv.innerHTML = `<div class="search-item-main text-[#6366f1]"><i class="fa-solid fa-location-crosshairs mr-2"></i> Use Current Location</div>`;
-                currDiv.addEventListener('click', () => {
-                    searchInput.value = '';
-                    searchResults.classList.remove('active');
-                    triggerAutoLocation();
-                });
-            } else {
-                currDiv.innerHTML = `<div class="search-item-main text-gray-500 cursor-not-allowed"><i class="fa-solid fa-location-slash mr-2"></i> Current Location Unavailable</div>`;
-            }
-            searchResults.appendChild(currDiv);
-
-            searchResults.classList.add('active');
-        }
-        
-        function selectLocation(lat, lon, city, region, countryCode) {
-            STATE.lat = lat;
-            STATE.lon = lon;
-            STATE.city = city;
-            STATE.region = region;
-            
-            searchInput.value = '';
-            searchResults.classList.remove('active');
-            
-            const isUS = (countryCode && countryCode === 'us');
-            
-            if (!isUS) {
-                STATE.provider = 'open-meteo';
-                providerSelect.value = 'open-meteo';
-            } 
-            
-            updateLocationDisplay();
-            loadWeather();
-        }
-
         // --- WEATHER FETCHING LOGIC ---
 
         async function loadWeather() {

package/navigation.js

@@ -1138,7 +1138,7 @@ let db;
                 text-decoration: none; line-height: 1.5; display: flex; align-items: center; margin-right: 8px; 
                 border: 1px solid transparent; 
             }
-            .nav-tab:not(.active):hover { color: var(--tab-hover-text); border-color: var(--tab-hover-border); background-color: var(--tab-hover-bg); }
+            .nav-tab:not(.active):hover { color: var(--tab-hover-text); border-color: var(--tab-active-border); background-color: var(--tab-hover-bg); }
             .nav-tab.active { color: var(--tab-active-text); border-color: var(--tab-active-border); background-color: var(--tab-active-bg); }
             .nav-tab.active:hover { color: var(--tab-active-hover-text); border-color: var(--tab-active-hover-border); background-color: var(--tab-active-hover-bg); }
             

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "4sp-dv",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/v5-4simpleproblems/v5-4simpleproblems-dv#readme",

package/test.html

@@ -53,7 +53,7 @@
         .nav-tab:hover { 
             color: var(--tab-hover-text, #ffffff); 
             background-color: var(--tab-hover-bg, rgba(79, 70, 229, 0.05));
-            border-color: var(--tab-hover-border, transparent);
+            border-color: var(--tab-active-border, #4f46e5);
         }
         .nav-tab.active { 
             color: var(--tab-active-text, #4f46e5);