feat(config): add configurable max accounts limit (#156)

Adds `maxAccounts` configuration parameter to control the maximum number of Google accounts.

**Changes:**
- New config field `maxAccounts` (default: 10, range: 1-100)
- Settings page: slider control for adjusting limit
- Accounts page: counter badge (e.g., "8/10") with visual feedback
- Add button disabled when limit reached
- Server-side validation on account creation

**Breaking Changes:** None

public/views/accounts.html

@@ -39,8 +39,17 @@
                 </svg>
                 <span x-text="$store.global.t('reload')">Reload</span>
             </button>
+            <!-- Account Count Indicator -->
+            <div class="flex items-center h-6 px-2 rounded bg-space-800/80 border border-space-border/50"
+                 :class="{ 'border-yellow-500/50': $store.data.accounts.length >= $store.data.maxAccounts }">
+                <span class="text-[11px] font-mono"
+                      :class="$store.data.accounts.length >= $store.data.maxAccounts ? 'text-yellow-400' : 'text-gray-400'"
+                      x-text="$store.data.accounts.length + '/' + $store.data.maxAccounts"></span>
+            </div>
             <button class="btn bg-neon-purple hover:bg-purple-600 border-none text-white btn-xs gap-2 shadow-lg shadow-neon-purple/20 h-8"
-                onclick="document.getElementById('add_account_modal').showModal()">
+                :class="{ 'opacity-50 cursor-not-allowed': $store.data.accounts.length >= $store.data.maxAccounts }"
+                :disabled="$store.data.accounts.length >= $store.data.maxAccounts"
+                @click="$store.data.accounts.length < $store.data.maxAccounts && document.getElementById('add_account_modal').showModal()">
                 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                 </svg>

public/views/settings.html

@@ -934,6 +934,28 @@
                             </label>
                         </div>
                     </div>
+
+                    <!-- Max Accounts -->
+                    <div class="form-control view-card border-space-border/50 hover:border-neon-cyan/50">
+                        <label class="label pt-0">
+                            <span class="label-text text-gray-400 text-xs">Max Accounts</span>
+                            <span class="label-text-alt font-mono text-neon-cyan text-xs font-semibold"
+                                x-text="serverConfig.maxAccounts || 10"></span>
+                        </label>
+                        <div class="flex gap-3 items-center">
+                            <input type="range" min="1" max="100" class="custom-range custom-range-cyan flex-1"
+                                :value="serverConfig.maxAccounts || 10"
+                                :style="`background-size: ${((serverConfig.maxAccounts || 10) - 1) / 99 * 100}% 100%`"
+                                @input="toggleMaxAccounts($event.target.value)"
+                                aria-label="Max accounts slider">
+                            <input type="number" min="1" max="100"
+                                class="input input-xs input-bordered w-16 bg-space-800 border-space-border text-white font-mono text-center"
+                                :value="serverConfig.maxAccounts || 10"
+                                @change="toggleMaxAccounts($event.target.value)"
+                                aria-label="Max accounts value">
+                        </div>
+                        <span class="text-[11px] text-gray-500 mt-1">Maximum number of Google accounts allowed</span>
+                    </div>
                 </div>
 
                 <!-- 🔀 Account Selection Strategy -->