refactor: redesign ABS settings row to match backend status style

index.html

@@ -637,11 +637,16 @@
           <label>Bibliothek</label>
           <select id="abs-lib-select" onchange="absSetLibrary(this.value)" style="width:100%;padding:10px 12px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none"></select>
         </div>
-        <div style="display:flex;gap:8px;margin-top:8px">
-          <button class="btn-outline" style="flex:1;padding:9px;font-size:13px;color:var(--danger);border-color:rgba(224,85,85,0.3)" onclick="absDisconnect()">Trennen</button>
-          <button class="btn-outline" id="abs-s-connect-btn" style="flex:1;padding:9px;font-size:13px;font-weight:700" onclick="absConnectSettings()">Verbinden</button>
+        <div class="settings-row" style="margin-top:8px;border-radius:9px">
+          <div>
+            <div style="font-size:13px;font-weight:500">Audiobookshelf Status</div>
+            <div class="hint" id="abs-s-status">Nicht verbunden</div>
+          </div>
+          <div style="display:flex;align-items:center;gap:8px">
+            <div class="status-dot" id="abs-s-dot" style="display:none"></div>
+            <button class="btn-outline" id="abs-s-connect-btn" style="padding:6px 12px;font-size:12px;font-weight:600" onclick="absToggleConnection()">Verbinden</button>
+          </div>
         </div>
-        <span id="abs-s-status" style="font-size:12px;color:var(--green);display:block;margin-top:6px;min-height:16px"></span>
       </div>
       <div class="settings-section">
         <h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">