ui: rename account chooser and open list upwards to avoid viewport cutoff

- Change label from 'Demo Accounts' to 'Choose Account'
- Make account dropdown open upwards (bottom: 100%) with proper animation
- Adjust toggle texts accordingly
- Increase z-index to ensure it overlays the container

static/login.html

@@ -184,17 +184,17 @@
 
         .accounts-dropdown {
             position: absolute;
-            top: 100%;
+            bottom: 100%; /* open upwards to avoid being cut off at the bottom */
             left: 0;
             right: 0;
             background: white;
             border: 1px solid var(--gray-200);
             border-radius: var(--radius-xl);
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-            z-index: 10;
+            z-index: 20;
             overflow: hidden;
             opacity: 0;
-            transform: translateY(-10px);
+            transform: translateY(10px); /* animate from below upwards */
             transition: all 0.2s ease;
             pointer-events: none;
         }
@@ -333,7 +333,7 @@
 
         <div class="demo-accounts">
             <button class="demo-toggle" id="demoToggle" onclick="toggleDemoAccounts()">
-                Try Demo Accounts ↓
+                Choose Account ↓
             </button>
             
             <div class="accounts-dropdown" id="accountsDropdown">
@@ -368,10 +368,10 @@
             
             if (dropdown.classList.contains('show')) {
                 dropdown.classList.remove('show');
-                toggle.textContent = 'Try Demo Accounts ↓';
+                toggle.textContent = 'Choose Account ↓';
             } else {
                 dropdown.classList.add('show');
-                toggle.textContent = 'Hide Demo Accounts ↑';
+                toggle.textContent = 'Hide Accounts ↑';
             }
         }
 
@@ -384,7 +384,7 @@
             const dropdown = document.getElementById('accountsDropdown');
             const toggle = document.getElementById('demoToggle');
             dropdown.classList.remove('show');
-            toggle.textContent = 'Try Demo Accounts ↓';
+            toggle.textContent = 'Choose Account ↓';
             
             // Visual feedback on selection
             const button = event.target.closest('.account-item');
@@ -408,7 +408,7 @@
             
             if (!demoSection.contains(event.target) && dropdown.classList.contains('show')) {
                 dropdown.classList.remove('show');
-                document.getElementById('demoToggle').textContent = 'Try Demo Accounts ↓';
+                document.getElementById('demoToggle').textContent = 'Choose Account ↓';
             }
         });