[style](trx-frontend-http): create connected button group for theme/auth buttons

Replace separate theme and auth buttons with a visually connected
button group. Buttons are grouped with no gap between them and
rounded corners only on the outer edges, creating a cohesive control.

Features:
- First button: rounded left edges
- Last button: rounded right edges
- Middle buttons: sharp edges (if more added)
- Negative margin to overlap borders smoothly
- Hover effect for feedback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -22,10 +22,12 @@
       </div>
       <div class="header-right">
         <img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
+        <div class="button-group">
           <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
           <button id="header-auth-btn" class="theme-toggle-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
         </div>
       </div>
+    </div>
     <!-- Auth gate (hidden by default, shown if auth is required) -->
     <div id="auth-gate" style="display:none; padding: 3rem 2rem; text-align: center;">
       <div style="margin-bottom: 1.5rem;">

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -303,6 +303,26 @@ small { color: var(--text-muted); }
   flex-shrink: 0;
 }
 .header-logo { height: 6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
+.button-group {
+  display: flex;
+  gap: 0;
+  align-items: center;
+}
+
+.button-group .theme-toggle-btn {
+  border-radius: 0;
+  margin-left: -1px;
+}
+
+.button-group .theme-toggle-btn:first-child {
+  border-radius: 999px 0 0 999px;
+  margin-left: 0;
+}
+
+.button-group .theme-toggle-btn:last-child:not(:first-child) {
+  border-radius: 0 999px 999px 0;
+}
+
 .theme-toggle-btn {
   height: 1.7rem;
   min-height: 1.7rem;
@@ -314,6 +334,12 @@ small { color: var(--text-muted); }
   border: 1px solid var(--btn-border);
   background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 82%, #ffffff), var(--btn-bg));
   color: var(--text);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.theme-toggle-btn:hover {
+  opacity: 0.9;
 }
 [data-theme="light"] .theme-toggle-btn {
   background: linear-gradient(135deg, #0f172a, #334155);