From d8718994516d3abe71315ecaed00efd53188384d Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Sun, 28 Jun 2026 21:50:21 +0200
Subject: [PATCH 01/11] Apply saved appearance on app startup

---
 webui/static/init.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/webui/static/init.js b/webui/static/init.js
index aea68fab..aec092d7 100644
--- a/webui/static/init.js
+++ b/webui/static/init.js
@@ -274,6 +274,34 @@ function applyReduceEffects(enabled) {
     }
 })();
 
+async function bootstrapServerAppearanceSettings() {
+    try {
+        const response = await fetch('/api/settings', { credentials: 'same-origin' });
+        const settings = await response.json();
+        if (!response.ok || !settings || typeof settings !== 'object' || settings.error) return;
+
+        const appearance = settings.ui_appearance || {};
+        const preset = appearance.accent_preset || '#1db954';
+        const custom = appearance.accent_color || '#1db954';
+        const accent = preset === 'custom' ? custom : preset;
+        applyAccentColor(accent);
+
+        if (Object.prototype.hasOwnProperty.call(appearance, 'particles_enabled')) {
+            applyParticlesSetting(appearance.particles_enabled !== false);
+        }
+        if (Object.prototype.hasOwnProperty.call(appearance, 'worker_orbs_enabled')) {
+            applyWorkerOrbsSetting(appearance.worker_orbs_enabled !== false);
+        }
+        if (localStorage.getItem('soulsync-reduce-effects') === null) {
+            applyReduceEffects(appearance.reduce_effects === true);
+        }
+    } catch (error) {
+        console.warn('Could not bootstrap appearance settings:', error);
+    }
+}
+
+bootstrapServerAppearanceSettings();
+
 // ── Profile System ─────────────────────────────────────────────
 let currentProfile = null;
 const PROFILE_CONTEXT_CHANGED_EVENT = 'ss:webui-profile-context-changed';

From d4e2dccd73ab3031e5e4337247722b2355b9907b Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Sun, 28 Jun 2026 21:55:47 +0200
Subject: [PATCH 02/11] Render saved appearance before CSS paints

---
 web_server.py    | 73 +++++++++++++++++++++++++++++++++++++++++++++++-
 webui/index.html |  9 +++++-
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/web_server.py b/web_server.py
index 826c3fbe..84713700 100644
--- a/web_server.py
+++ b/web_server.py
@@ -303,6 +303,77 @@ app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0 if DEV_STATIC_NO_CACHE else 31536000
 import time as _cache_bust_time
 _STATIC_CACHE_BUST = str(int(_cache_bust_time.time()))
 
+def _valid_hex_color(value, fallback='#1db954'):
+    value = str(value or '').strip()
+    return value if re.fullmatch(r'#[0-9a-fA-F]{6}', value) else fallback
+
+
+def _hex_to_rgb(hex_color):
+    color = _valid_hex_color(hex_color)
+    return tuple(int(color[i:i + 2], 16) for i in (1, 3, 5))
+
+
+def _rgb_to_hsl(r, g, b):
+    rn, gn, bn = r / 255, g / 255, b / 255
+    max_c = max(rn, gn, bn)
+    min_c = min(rn, gn, bn)
+    lightness = (max_c + min_c) / 2
+    if max_c == min_c:
+        return 0, 0, lightness
+
+    delta = max_c - min_c
+    saturation = delta / (2 - max_c - min_c) if lightness > 0.5 else delta / (max_c + min_c)
+    if max_c == rn:
+        hue = ((gn - bn) / delta + (6 if gn < bn else 0)) / 6
+    elif max_c == gn:
+        hue = ((bn - rn) / delta + 2) / 6
+    else:
+        hue = ((rn - gn) / delta + 4) / 6
+    return hue, saturation, lightness
+
+
+def _hsl_to_rgb(hue, saturation, lightness):
+    if saturation == 0:
+        value = round(lightness * 255)
+        return value, value, value
+
+    def hue_to_rgb(p, q, t):
+        if t < 0:
+            t += 1
+        if t > 1:
+            t -= 1
+        if t < 1 / 6:
+            return p + (q - p) * 6 * t
+        if t < 1 / 2:
+            return q
+        if t < 2 / 3:
+            return p + (q - p) * (2 / 3 - t) * 6
+        return p
+
+    q = lightness * (1 + saturation) if lightness < 0.5 else lightness + saturation - lightness * saturation
+    p = 2 * lightness - q
+    return (
+        round(hue_to_rgb(p, q, hue + 1 / 3) * 255),
+        round(hue_to_rgb(p, q, hue) * 255),
+        round(hue_to_rgb(p, q, hue - 1 / 3) * 255),
+    )
+
+
+def _initial_appearance_context():
+    preset = config_manager.get('ui_appearance.accent_preset', '#1db954')
+    custom = config_manager.get('ui_appearance.accent_color', '#1db954')
+    accent = _valid_hex_color(custom if preset == 'custom' else preset)
+    r, g, b = _hex_to_rgb(accent)
+    hue, saturation, lightness = _rgb_to_hsl(r, g, b)
+    light = _hsl_to_rgb(hue, saturation, min(lightness + 0.16, 0.95))
+    neon = _hsl_to_rgb(hue, min(saturation + 0.1, 1.0), min(lightness + 0.30, 0.95))
+    return {
+        'initial_accent_color': accent,
+        'initial_accent_rgb': f'{r}, {g}, {b}',
+        'initial_accent_light_rgb': f'{light[0]}, {light[1]}, {light[2]}',
+        'initial_accent_neon_rgb': f'{neon[0]}, {neon[1]}, {neon[2]}',
+    }
+
 
 @app.context_processor
 def _inject_static_cache_bust():
@@ -319,7 +390,7 @@ def _inject_static_cache_bust():
                 static_v = str(max(mtimes))
         except Exception:
             static_v = _STATIC_CACHE_BUST
-    return {'static_v': static_v}
+    return {'static_v': static_v, **_initial_appearance_context()}
 
 
 @app.context_processor
diff --git a/webui/index.html b/webui/index.html
index 9690da8b..a5d1b4f8 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -7,12 +7,19 @@
     <title>SoulSync - Music Sync & Manager</title>
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png', v=static_v) }}">
     <link rel="manifest" href="{{ url_for('static', filename='manifest.json', v=static_v) }}">
-    <meta name="theme-color" content="#1db954">
+    <meta name="theme-color" content="{{ initial_accent_color }}">
     <link rel="apple-touch-icon" href="{{ url_for('static', filename='pwa-icon-192.png', v=static_v) }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=static_v) }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='basic-search-v2.css', v=static_v) }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='mobile.css', v=static_v) }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='setup-wizard.css', v=static_v) }}">
+    <style id="soulsync-initial-appearance">
+        :root {
+            --accent-rgb: {{ initial_accent_rgb }};
+            --accent-light-rgb: {{ initial_accent_light_rgb }};
+            --accent-neon-rgb: {{ initial_accent_neon_rgb }};
+        }
+    </style>
     {{ vite_assets('head')|safe }}
 </head>
 

From e2317de0a43af6c5939c79ec7c269a70fe497d92 Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Sun, 28 Jun 2026 22:25:28 +0200
Subject: [PATCH 03/11] Remove dead settings CSS

---
 webui/static/style.css | 335 -----------------------------------------
 1 file changed, 335 deletions(-)

diff --git a/webui/static/style.css b/webui/static/style.css
index ac4bcbfe..e4e741b0 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -3389,66 +3389,6 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     color: #a78bfa;          /* Usenet — violet */
 }
 
-/* Lidarr-style intro hero card on Indexers & Downloaders tab */
-.ind-hero {
-    padding: 18px 22px;
-    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(35, 35, 35, 0.6));
-    border: 1px solid rgba(var(--accent-rgb), 0.15);
-}
-
-.ind-hero-title {
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.8px;
-    text-transform: uppercase;
-    color: rgb(var(--accent-rgb));
-    margin-bottom: 12px;
-}
-
-.ind-hero-flow {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.85);
-}
-
-.ind-hero-step {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 12px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 999px;
-}
-
-.ind-hero-step-num {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: rgba(var(--accent-rgb), 0.2);
-    color: rgb(var(--accent-rgb));
-    font-weight: 700;
-    font-size: 11px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.ind-hero-arrow {
-    color: rgba(var(--accent-rgb), 0.55);
-    font-weight: 700;
-}
-
-.ind-hero-sub {
-    font-size: 12.5px;
-    color: rgba(255, 255, 255, 0.55);
-    line-height: 1.55;
-}
-
 .ind-hero-warning {
     margin-top: 14px;
     padding: 12px 14px;
@@ -3939,23 +3879,6 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.85);
 }
-.info-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    flex: 0 0 auto;
-    font-size: 12px;
-    line-height: 1;
-    color: rgba(var(--accent-rgb), 0.85);
-    cursor: pointer;
-    user-select: none;
-    transition: color 0.15s ease;
-}
-.info-icon:hover { color: rgba(var(--accent-rgb), 1); }
-.setting-help-body { margin-top: 4px; }
-
 /* Supported Formats */
 .supported-formats {
     color: rgba(255, 255, 255, 0.7);
@@ -4343,213 +4266,6 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     background: rgba(99, 179, 237, 0.3);
 }
 
-.quality-tier {
-    margin-bottom: 16px;
-    padding: 12px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    transition: all 0.2s ease;
-}
-
-.quality-tier:hover {
-    border-color: rgba(255, 255, 255, 0.12);
-}
-
-.quality-tier-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.quality-tier-name {
-    color: rgba(255, 255, 255, 0.95);
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.quality-tier-priority {
-    color: rgba(255, 255, 255, 0.45);
-    font-size: 10px;
-    font-weight: 500;
-}
-
-.quality-tier-sliders {
-    padding-left: 24px;
-    opacity: 1;
-    transition: opacity 0.3s ease;
-}
-
-.quality-tier-sliders.disabled {
-    opacity: 0.35;
-    pointer-events: none;
-}
-
-.flac-bit-depth-selector {
-    padding: 8px 12px;
-    transition: opacity 0.3s ease;
-}
-
-.flac-bit-depth-selector.disabled {
-    opacity: 0.35;
-    pointer-events: none;
-}
-
-.flac-bit-depth-selector label {
-    display: block;
-    margin-bottom: 6px;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 11px;
-}
-
-.bit-depth-buttons {
-    display: flex;
-    gap: 8px;
-}
-
-.bit-depth-btn {
-    flex: 1;
-    padding: 7px 12px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 11px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.bit-depth-btn.active {
-    background: linear-gradient(135deg,
-            rgba(var(--accent-rgb), 0.2) 0%,
-            rgba(var(--accent-light-rgb), 0.12) 100%);
-    border-color: rgba(var(--accent-rgb), 0.4);
-    color: rgb(var(--accent-light-rgb));
-    font-weight: 600;
-    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-.bit-depth-btn:hover {
-    background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.15);
-    color: #ffffff;
-    transform: translateY(-1px);
-}
-
-.bit-depth-btn.active:hover {
-    background: linear-gradient(135deg,
-            rgba(var(--accent-rgb), 0.28) 0%,
-            rgba(var(--accent-light-rgb), 0.18) 100%);
-}
-
-.slider-group {
-    margin-top: 8px;
-}
-
-.slider-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 11px;
-}
-
-.dual-slider-container {
-    position: relative;
-    height: 40px;
-    margin: 10px 0;
-}
-
-.range-slider {
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    -webkit-appearance: none;
-    appearance: none;
-    background: transparent;
-    outline: none;
-    pointer-events: none;
-}
-
-.range-slider::-webkit-slider-track {
-    width: 100%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 2px;
-}
-
-.range-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
-    cursor: pointer;
-    pointer-events: all;
-    border: 2px solid #0a0a0a;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(var(--accent-rgb), 0.2);
-}
-
-.range-slider::-webkit-slider-thumb:hover {
-    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), #22e968);
-    transform: scale(1.15);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--accent-rgb), 0.3);
-}
-
-.range-slider::-moz-range-track {
-    width: 100%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 2px;
-}
-
-.range-slider::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
-    cursor: pointer;
-    pointer-events: all;
-    border: 2px solid #0a0a0a;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(var(--accent-rgb), 0.2);
-}
-
-.range-slider::-moz-range-thumb:hover {
-    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), #22e968);
-    transform: scale(1.15);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--accent-rgb), 0.3);
-}
-
-.range-slider-track {
-    position: absolute;
-    top: 18px;
-    width: 100%;
-    height: 4px;
-    background: rgba(var(--accent-rgb), 0.25);
-    border-radius: 2px;
-    pointer-events: none;
-}
-
-.slider-values {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 8px;
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 11px;
-    font-weight: 500;
-}
-
-.slider-values span:first-child,
-.slider-values span:last-child {
-    color: rgb(var(--accent-light-rgb));
-    font-weight: 700;
-}
-
-/* ===== END QUALITY PROFILE STYLES ===== */
-
 .test-button {
     background: rgba(var(--accent-rgb), 0.1);
     color: rgb(var(--accent-light-rgb));
@@ -4603,12 +4319,6 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     transform: translateY(0) scale(0.97);
 }
 
-.settings-actions {
-    display: flex;
-    justify-content: center;
-    padding-top: 20px;
-}
-
 /* Additional Settings Components */
 .path-input-group {
     display: flex;
@@ -55841,18 +55551,6 @@ tr.tag-diff-same {
     flex-wrap: wrap;
 }
 
-/* ── Quality section ── */
-#settings-page .quality-tier {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    margin-bottom: 10px;
-    transition: border-color 0.2s;
-}
-#settings-page .quality-tier:hover {
-    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
-}
 #settings-page .preset-button {
     border-radius: 8px;
     font-size: 0.84em;
@@ -55902,30 +55600,6 @@ tr.tag-diff-same {
     padding: 0 18px 12px;
 }
 
-/* ── Save button — centered, sticky feel ── */
-#settings-page .settings-actions {
-    max-width: 760px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 24px 0 16px;
-}
-#settings-page .settings-actions .save-button {
-    width: 100%;
-    padding: 12px;
-    border-radius: 10px;
-    font-size: 0.92em;
-    font-weight: 600;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-#settings-page .settings-actions .save-button:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 20px rgba(var(--accent-rgb, 29, 185, 84), 0.35);
-}
-#settings-page .settings-actions .save-button:active {
-    transform: scale(0.99);
-    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 29, 185, 84), 0.2);
-}
-
 /* ── Path input groups (dir paths with Unlock buttons) ── */
 #settings-page .path-input-group {
     flex: 1;
@@ -56028,12 +55702,6 @@ tr.tag-diff-same {
     box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
 }
 
-/* ── Path inputs with lock buttons ── */
-#settings-page .form-group .path-input-wrapper {
-    flex: 1;
-    max-width: 340px;
-}
-
 /* ── Hybrid source priority list (drag and drop) ── */
 .hybrid-source-list {
     display: flex;
@@ -56415,9 +56083,6 @@ tr.tag-diff-same {
     /* Accordion headers */
     #settings-page .stg-service > .stg-service-header { padding: 12px 14px; }
     #settings-page .stg-service > .stg-service-body { padding: 0 0 8px; }
-    /* Save button */
-    #settings-page .settings-actions { padding: 16px 8px; }
-    #settings-page .settings-actions .save-button { width: 100%; }
     /* Section titles */
     #settings-page .settings-group > h3 { padding: 24px 0 10px; }
 }

From 60dee1b4d82e1d6208fb3eedc6619c9ac2fb5d6b Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Sun, 28 Jun 2026 22:47:37 +0200
Subject: [PATCH 04/11] Align source settings card spacing

---
 webui/static/style.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/webui/static/style.css b/webui/static/style.css
index e4e741b0..1cfc2a35 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -68589,3 +68589,14 @@ body.app-locked > *:not(#launch-pin-overlay):not(#login-overlay):not(script):not
 .reid-replace-text em { color: #7f879e; font-style: normal; font-size: 11.5px; }
 .reid-footer-actions { display: flex; gap: 10px; }
 #reid-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }
+
+/* Settings cleanup: source settings uses the same inner-card spacing as Retry Logic. */
+#settings-page .settings-section-body:not(.collapsed) > .settings-group.source-settings-wrapper {
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+#settings-page .settings-section-body:not(.collapsed) > .settings-group.source-settings-wrapper > .settings-subcard {
+    margin: 0 !important;
+}

From 0276aa8764c7bf3f52670bf75685d4d47019b534 Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Sun, 28 Jun 2026 22:52:09 +0200
Subject: [PATCH 05/11] Update settings page overhaul

---
 webui/index.html         | 978 +++++++++++++++++++++++----------------
 webui/static/settings.js | 250 ++++++++--
 webui/static/style.css   | 350 +++++++++++++-
 3 files changed, 1129 insertions(+), 449 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index a5d1b4f8..46df8390 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -2148,7 +2148,7 @@
 
             <!-- Search Page -->
             <div class="page" id="search-page">
-                <!-- 
+                <!--
                 This top-level container replicates the QSplitter from downloads.py,
                 creating the two-panel layout for the page.
                 -->
@@ -3908,14 +3908,13 @@
             <!-- Settings Page -->
             <div class="page" id="settings-page">
                 <div class="page-shell">
-                <div class="dashboard-header"><div class="dashboard-header-sweep" aria-hidden="true"><span></span></div>
+                <div class="dashboard-header settings-header-compact"><div class="dashboard-header-sweep" aria-hidden="true"><span></span></div>
                     <div class="header-text">
                         <h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
-                        <p class="header-subtitle">Configure services, downloads, and preferences</p>
                     </div>
                     <div class="header-spacer"></div>
                     <div class="header-actions">
-                        <button class="save-button" onclick="document.getElementById('save-settings').click()">Save Settings</button>
+                        <button class="save-button" id="save-settings">Save Settings</button>
                     </div>
                 </div>
                 <div class="settings-content">
@@ -3923,7 +3922,7 @@
                     <div class="stg-tabbar">
                         <button class="stg-tab active" data-tab="connections" onclick="switchSettingsTab('connections')">Connections</button>
                         <button class="stg-tab" data-tab="downloads" onclick="switchSettingsTab('downloads')">Downloads</button>
-                        <button class="stg-tab" data-tab="indexers" onclick="switchSettingsTab('indexers')">Indexers &amp; Downloaders</button>
+                        <button class="stg-tab" data-tab="quality" onclick="switchSettingsTab('quality')">Quality</button>
                         <button class="stg-tab" data-tab="library" onclick="switchSettingsTab('library')">Library</button>
                         <button class="stg-tab" data-tab="appearance" onclick="switchSettingsTab('appearance')">Appearance</button>
                         <button class="stg-tab" data-tab="advanced" onclick="switchSettingsTab('advanced')">Advanced</button>
@@ -3937,6 +3936,7 @@
                             <div class="settings-group" data-stg="connections">
                                 <h3>API Configuration <button class="stg-accordion-toggle" onclick="toggleAllServiceAccordions(this)">Expand All</button></h3>
 
+
                                 <!-- Metadata Source Selection (first — tells user what they're configuring for) -->
                                 <div class="api-service-frame">
                                     <h4 class="service-title" style="color: #e8e8e8;">Metadata Source</h4>
@@ -3950,9 +3950,9 @@
                                             <option value="discogs">Discogs</option>
                                             <option value="musicbrainz">MusicBrainz</option>
                                         </select>
-                                    </div>
-                                    <div class="callback-info">
-                                        <div class="callback-help">Where artist, album, and track metadata comes from:<br>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                        <div class="setting-help-text setting-help-body" hidden>Where artist, album, and track metadata comes from:<br>
                                             • <strong>Spotify</strong> — official Spotify; connect your account in the Spotify section below.<br>
                                             • <strong>Spotify (no auth)</strong> — the same Spotify catalog with no account needed. It's unofficial and best-effort (may break if Spotify changes its site) and can't read your personal library or playlists.<br>
                                             • <strong>Deezer</strong> / <strong>iTunes</strong> — free, no account.<br>
@@ -3999,13 +3999,15 @@
                                                 Disconnect</button>
                                         </div>
                                         <div class="form-group" style="margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px;">
-                                            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal;">
-                                                <input type="checkbox" id="metadata-spotify-free-enrichment" style="width: auto; margin: 0;">
-                                                <span>Use Spotify (no auth) for background enrichment</span>
-                                            </label>
-                                            <div class="callback-info">
-                                                <div class="callback-help">Runs the background metadata enrichment worker on the no-auth Spotify source instead of this connected account — keeping bulk enrichment off your official API quota (and dodging rate-limit bans), so your account is reserved for interactive search and playlist sync. <strong>On by default.</strong> Turn off to enrich through your connected account instead. Works even with no account connected. Note: the no-auth source can't supply artist genres.</div>
+                                            <div class="setting-row" style="flex:1;min-width:0;">
+                                                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; margin:0;">
+                                                    <input type="checkbox" id="metadata-spotify-free-enrichment" style="width: auto; margin: 0;">
+                                                    <span>Use Spotify (no auth) for background enrichment</span>
+                                                </label>
+                                                <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                                    onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                             </div>
+                                            <div class="setting-help-text setting-help-body" hidden>Runs the background metadata enrichment worker on the no-auth Spotify source instead of this connected account — keeping bulk enrichment off your official API quota (and dodging rate-limit bans), so your account is reserved for interactive search and playlist sync. <strong>On by default.</strong> Turn off to enrich through your connected account instead. Works even with no account connected. Note: the no-auth source can't supply artist genres.</div>
                                         </div>
                                     </div>
                                 </div>
@@ -4571,81 +4573,17 @@
                         <!-- Right Column - Download Settings, Database, Metadata, Logging -->
                         <div class="settings-right-column">
                             <!-- Download Settings -->
-                            <div class="settings-group" data-stg="downloads">
-                                <h3>Download Settings</h3>
-                                <div class="setting-help-text">
-                                    These are container-internal paths. Only modify them if you know what you're doing — incorrect values will break downloads.
-                                </div>
+                                                        <!-- Download Settings (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Source Settings</h3>
+                                <span class="settings-section-hint">Source, stream &amp; concurrency</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="downloads">
+<div class="settings-group source-settings-wrapper" data-stg="downloads">
 
-                                <div class="form-group">
-                                    <label>Input Folder (Download Dir):</label>
-                                    <div class="path-input-group">
-                                        <input type="text" id="download-path" placeholder="./downloads" readonly>
-                                        <button class="browse-button locked" onclick="togglePathLock('download', this)">Unlock</button>
-                                    </div>
-                                </div>
-
-                                <div class="form-group">
-                                    <label>Output Folder (Music Library):</label>
-                                    <div class="path-input-group">
-                                        <input type="text" id="transfer-path" placeholder="./Transfer" readonly>
-                                        <button class="browse-button locked" onclick="togglePathLock('transfer', this)">Unlock</button>
-                                    </div>
-                                </div>
-
-                                <div class="form-group">
-                                    <label>Import Folder:</label>
-                                    <div class="path-input-group">
-                                        <input type="text" id="staging-path" placeholder="./Staging" readonly>
-                                        <button class="browse-button locked" onclick="togglePathLock('staging', this)">Unlock</button>
-                                    </div>
-                                </div>
-
-                                <div class="form-group">
-                                    <label>Music Videos Dir:</label>
-                                    <div class="path-input-group">
-                                        <input type="text" id="music-videos-path" placeholder="./MusicVideos" readonly>
-                                        <button class="browse-button locked" onclick="togglePathLock('music-videos', this)">Unlock</button>
-                                    </div>
-                                </div>
-
-                                <div class="form-group">
-                                    <label>Playlists Folder:</label>
-                                    <div class="path-input-group">
-                                        <input type="text" id="playlists-materialize-path" placeholder="./Playlists" readonly>
-                                        <button class="browse-button locked" onclick="togglePathLock('playlists-materialize', this)">Unlock</button>
-                                    </div>
-                                    <div class="setting-help-text" style="margin-top: 6px;">
-                                        Where <strong>Organize by playlist</strong> builds playlist folders — as shortcuts into your library, so songs are never stored twice. Keep this <strong>outside</strong> your music library folder so your media server doesn't scan the same tracks twice.
-                                    </div>
-                                </div>
-
-                                <div class="form-group">
-                                    <label>Playlist Folder Style:</label>
-                                    <select id="playlists-materialize-mode">
-                                        <option value="symlink">Symlinks — no extra disk, point to your library</option>
-                                        <option value="copy">Copies — real duplicates (USB sticks / players that can't follow links)</option>
-                                    </select>
-                                    <div class="setting-help-text" style="margin-top: 6px;">
-                                        Symlinks use almost no space. Copies are self-contained. Symlinks fall back to copies automatically where the filesystem can't link (Windows without privileges, some network shares, FAT/exFAT drives).
-                                    </div>
-                                    <button class="test-button" id="playlists-rebuild-btn" onclick="rebuildPlaylistFolders()" style="margin-top: 10px;">
-                                        Rebuild playlist folders now
-                                    </button>
-                                    <div class="setting-help-text" id="playlists-rebuild-status" style="margin-top: 6px;"></div>
-                                </div>
-
-                                <div class="form-group">
-                                    <label>M3U Entry Base Path:</label>
-                                    <div class="path-input-group">
-                                        <input type="text" id="m3u-entry-base-path" placeholder="e.g. /mnt/music (leave empty for relative paths)" readonly>
-                                        <button class="browse-button locked" onclick="togglePathLock('m3u-entry-base', this)">Unlock</button>
-                                    </div>
-                                    <div class="setting-help-text">
-                                        Optional prefix added to every track path in exported M3U files. Use this when your media server needs absolute paths (e.g. <code>/mnt/music</code>).
-                                    </div>
-                                </div>
 
+                                <div class="settings-subcard">
                                 <div class="form-group">
                                     <label>Download Source:</label>
                                     <select id="download-source-mode" class="form-select"
@@ -4663,7 +4601,9 @@
                                         <option value="usenet">Usenet Only (via Prowlarr)</option>
                                         <option value="hybrid">Hybrid (Primary + Fallback)</option>
                                     </select>
-                                    <div class="setting-help-text">
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                        onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
                                         Choose where to download music from. Hybrid mode tries primary source first,
                                         then falls back to secondary if it fails.
                                     </div>
@@ -4675,7 +4615,9 @@
                                         <option value="youtube">YouTube (Instant)</option>
                                         <option value="active">Active Download Source</option>
                                     </select>
-                                    <div class="setting-help-text">
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                        onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
                                         Where to stream audio when previewing tracks. YouTube is instant and requires no setup.
                                         "Active Download Source" uses your configured source (Tidal, Qobuz, etc.) — if that's Soulseek, YouTube is used automatically.
                                     </div>
@@ -4693,17 +4635,23 @@
                                         <option value="8">8</option>
                                         <option value="10">10</option>
                                     </select>
-                                    <div class="setting-help-text">
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                        onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
                                         Maximum simultaneous downloads per batch. Soulseek album downloads always use 1 worker
                                         due to per-user upload limits. Higher values speed up large playlists and wishlists.
                                     </div>
                                 </div>
 
+                                <div class="form-group">
+                                    <button class="test-button" id="test-all-sources-btn" onclick="testAllSources()">Test all sources</button>
+                                    <span class="setting-help-text" style="margin-left:10px;">Checks every selected source &amp; configured connection.</span>
+                                </div>
+
                                 <!-- Hybrid Mode Settings (shown only when hybrid is selected) -->
                                 <div id="hybrid-settings-container" style="display: none;">
                                     <div class="setting-help-text">
-                                        Drag to reorder source priority. Enable sources you want to use. Downloads try each enabled source in order.
-                                        The first source can use album-level downloads when supported; later sources stay track-level fallback.
+                                        Drag to reorder source priority. Toggle the sources you want to use — downloads try each enabled source in order. Click a source (or its ⚙) to configure it below. The first source can use album-level downloads when supported; later sources stay track-level fallback.
                                     </div>
                                     <div class="hybrid-source-list" id="hybrid-source-list">
                                         <!-- Populated by JS -->
@@ -4712,6 +4660,7 @@
                                     <select id="hybrid-primary-source" style="display:none;"><option value="soulseek">Soulseek</option><option value="youtube">YouTube</option><option value="tidal">Tidal</option><option value="qobuz">Qobuz</option><option value="hifi">HiFi</option><option value="deezer_dl">Deezer</option><option value="soundcloud">SoundCloud</option></select>
                                     <select id="hybrid-secondary-source" style="display:none;"><option value="soulseek">Soulseek</option><option value="youtube">YouTube</option><option value="tidal">Tidal</option><option value="qobuz">Qobuz</option><option value="hifi">HiFi</option><option value="deezer_dl">Deezer</option><option value="soundcloud">SoundCloud</option></select>
                                 </div>
+                                </div><!-- end basic source subcard -->
 
                                 <!-- Soulseek Settings (shown when soulseek is active source) -->
                                 <div id="soulseek-settings-container" style="display: none;">
@@ -4981,7 +4930,7 @@
                                 <div id="prowlarr-source-redirect" style="display: none;">
                                     <div class="form-group">
                                         <div class="setting-help-text" style="padding: 12px 14px; background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: 10px;">
-                                            📡 Torrent and Usenet downloads run through your Prowlarr indexers and your configured downloader. Set up Prowlarr + the torrent / usenet client on the <strong>Indexers &amp; Downloaders</strong> tab. Once Test Connection is green on both, this source is ready to use.
+                                            📡 Torrent / Usenet downloads use Prowlarr plus a torrent or usenet client — configure them in the <strong>Indexers &amp; Downloaders</strong> tiles below.
                                         </div>
                                     </div>
                                 </div>
@@ -5029,21 +4978,22 @@
                                 </div>
 
                             </div>
+                            </div><!-- end Download Settings body -->
 
                             <!-- ═══ QUALITY PROFILE ═══ -->
                             <!-- Whole tile is gated as a unit (Soulseek-only + downloads tab)
                                  by settings.js updateSourceVisibility — gating only the inner
                                  group would leave an empty expandable shell. -->
-                            <div id="quality-profile-tile" data-stg="downloads">
+                            <div id="quality-profile-tile" data-stg="quality">
                             <div class="settings-section-header collapsed" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
                                 <h3>Quality Profile</h3>
                                 <span class="settings-section-hint">Format priorities, bitrate, bit depth</span>
                             </div>
-                            <div class="settings-section-body collapsed" data-stg="downloads">
+                            <div class="settings-section-body collapsed" data-stg="quality">
 
                             <!-- Quality Profile Settings (global — applies to all download sources) -->
-                            <div class="settings-group" id="quality-profile-section" data-stg="downloads">
+                            <div class="settings-group" id="quality-profile-section" data-stg="quality">
 
                                 <!-- Presets -->
                                 <div class="quality-presets">
@@ -5079,7 +5029,7 @@
                                     <div class="setting-row">
                                         <label class="ranked-targets-label" style="margin:0;">Quality priority (drag to reorder — 1st = most preferred):</label>
                                         <span class="info-icon" role="button" tabindex="0" title="What's this?"
-                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">ⓘ</span>
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
                                     <div class="help-text setting-help-body" hidden>
                                         <strong>How it works:</strong> Each download source is checked against this list
@@ -5154,7 +5104,7 @@
                                     <div class="setting-row" style="margin-bottom:4px;">
                                         <label for="quality-search-mode" style="font-weight:600;">Search strategy</label>
                                         <span class="info-icon" role="button" tabindex="0" title="What's this?"
-                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">ⓘ</span>
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
                                     <select id="quality-search-mode" style="width:100%;max-width:420px;" onchange="onSearchModeChange()">
                                         <option value="priority">Source priority — fast (use the first source that has it)</option>
@@ -5180,7 +5130,7 @@
                                             Rank-based download order
                                         </label>
                                         <span class="info-icon" role="button" tabindex="0" title="What's this?"
-                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">ⓘ</span>
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
                                     <div class="help-text setting-help-body" hidden>
                                         A single source often returns several copies of the same track.<br><br>
@@ -5203,7 +5153,7 @@
                                             Accept off-list quality when nothing in the list is available
                                         </label>
                                         <span class="info-icon" role="button" tabindex="0" title="What's this?"
-                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">ⓘ</span>
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
                                     <div class="help-text setting-help-body" hidden>
                                         This does <strong>not</strong> mean "walk down my list" — the list already
@@ -5216,17 +5166,137 @@
                                     </div>
                                 </div>
 
-                                <!-- Require hard AcoustID verification — only shown when AcoustID is enabled -->
-                                <div class="form-group" id="acoustid-require-verified-group" style="display:none;">
+                            </div>
+
+                            </div><!-- end Quality Profile body -->
+                            </div><!-- end Quality Profile tile -->
+
+                            <!-- ═══ QUALITY ON IMPORT (moved from Library > Import — quality enforcement at import time) ═══ -->
+                            <div class="settings-section-header collapsed" data-stg="quality" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Quality on Import</h3>
+                                <span class="settings-section-hint">Apply the profile to manually imported files</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="quality">
+                            <div class="settings-group" data-stg="quality">
+                                <div class="form-group">
                                     <div class="setting-row">
-                                        <label class="checkbox-label" style="margin:0;">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="import-quality-filter-enabled" checked>
+                                            Only import tracks that meet your quality profile
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>
+                                        On by default. SoulSync always probes each downloaded file's real audio quality; this
+                                        toggle decides what to do with the result. <strong>On</strong> — files that don't meet your
+                                        quality profile are quarantined instead of imported (the same gate the download pipeline
+                                        uses; fallback/downsample settings still apply). <strong>Off</strong> — everything is
+                                        imported regardless of quality. Either way, the library <em>Quality Upgrade Scanner</em>
+                                        still flags below-profile tracks so you can act on them later.
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="import-replace-lower-quality">
+                                            Replace lower quality files on import
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>
+                                        When importing from Staging, if a track already exists in your library at a lower quality
+                                        (e.g. MP3), it will be replaced with the higher quality version (e.g. FLAC).
+                                        If disabled, existing tracks are always kept and the import file is skipped.
+                                    </div>
+                                </div>
+                            </div>
+                            </div><!-- end Quality on Import body -->
+
+                            <!-- ═══ POST-DOWNLOAD CONVERSION (quality — moved from Library) ═══ -->
+                            <div class="settings-section-header collapsed" data-stg="quality" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Post-Download Conversion</h3>
+                                <span class="settings-section-hint">Downsample hi-res, make lossy copies</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="quality">
+                            <div class="settings-group" data-stg="quality">
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="downsample-hires">
+                                            Downsample Hi-Res FLAC to CD quality (16-bit / 44.1kHz)
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>When a 24-bit or high sample-rate FLAC is downloaded, it is automatically converted to 16-bit/44.1kHz. The hi-res original is <strong>replaced</strong>, not kept alongside. Requires ffmpeg.</div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="lossy-copy-enabled"
+                                                onchange="document.getElementById('lossy-copy-options').style.display = this.checked ? 'block' : 'none'">
+                                            Create lossy copy of downloaded FLAC files
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>After downloading a FLAC, a lossy copy at the selected codec and bitrate is created in the same folder. Requires ffmpeg.</div>
+                                </div>
+                                <div id="lossy-copy-options" style="display: none;">
+                                    <div class="form-group">
+                                        <label>Codec:</label>
+                                        <select id="lossy-copy-codec" onchange="updateLossyBitrateOptions()">
+                                            <option value="mp3">MP3</option>
+                                            <option value="opus">Opus</option>
+                                            <option value="aac">AAC (M4A)</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>Bitrate:</label>
+                                        <select id="lossy-copy-bitrate">
+                                            <option value="320">320 kbps</option>
+                                            <option value="256">256 kbps</option>
+                                            <option value="192">192 kbps</option>
+                                            <option value="128">128 kbps</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group" style="margin-top: 12px;">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="lossy-copy-delete-original">
+                                            Blasphemy Mode — Delete original FLAC after conversion
+                                        </label>
+                                    </div>
+                                    <div class="help-text" style="color: rgba(255, 100, 100, 0.8);">
+                                        Warning: The original high-quality file will be permanently deleted.
+                                        Only the lossy copy will remain.
+                                    </div>
+                                </div>
+                            </div>
+                            </div><!-- end Post-Download Conversion body -->
+
+                            <!-- ═══ AUDIO VERIFICATION (global quality gate) ═══ -->
+                            <div class="settings-section-header collapsed" data-stg="quality" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Audio Verification</h3>
+                                <span class="settings-section-hint">AcoustID identity match + truncated/silent detection</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="quality">
+                            <div class="settings-group" data-stg="quality">
+                                <!-- AcoustID identity gate — always shown here; help notes it needs AcoustID enabled -->
+                                <div class="form-group" id="acoustid-require-verified-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
                                             <input type="checkbox" id="acoustid-require-verified">
                                             Only import AcoustID-verified tracks (reject "could not confirm")
                                         </label>
                                         <span class="info-icon" role="button" tabindex="0" title="What's this?"
-                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">ⓘ</span>
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
-                                    <div class="help-text setting-help-body" hidden>
+                                    <div class="setting-help-body" hidden>
                                         When <strong>on</strong>, a track that AcoustID runs but <em>cannot confirm</em>
                                         (no fingerprint match / cross-script metadata — the ⚠ "unverified" case) is
                                         <strong>quarantined</strong> instead of imported. Downloads then try the next
@@ -5244,96 +5314,51 @@
                                         outage) always import, so an AcoustID outage never stalls you. Requires AcoustID enabled.
                                     </div>
                                 </div>
-                            </div>
-
-                            </div><!-- end Quality Profile body -->
-                            </div><!-- end Quality Profile tile -->
-
-                            <!-- ═══ RETRY LOGIC ═══ -->
-                            <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
-                                <span class="settings-section-arrow">&#9660;</span>
-                                <h3>Retry Logic</h3>
-                                <span class="settings-section-hint">Next-best candidate, exhaustive per-source retry</span>
-                            </div>
-                            <div class="settings-section-body collapsed" data-stg="downloads">
-
-                            <div class="settings-group" data-stg="downloads">
-                                <h3>🔁 Retry Logic</h3>
-                                <small class="settings-hint" style="margin-bottom: 10px; display: block;">Controls what happens when a downloaded file is rejected (AcoustID mismatch, wrong version, or duration/integrity failure). Independent of post-processing.</small>
                                 <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="retry-next-candidate" checked>
-                                        Retry next-best candidate on mismatch
-                                    </label>
-                                    <small class="settings-hint">When a download is quarantined (AcoustID mismatch or duration/integrity failure), automatically try the next-best candidate instead of failing the track. Off = quarantine and fail immediately.</small>
-                                </div>
-                                <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="retry-exhaustive">
-                                        Exhaustive retry (separate budget per source)
-                                    </label>
-                                    <small class="settings-hint">Give every source (Soulseek, then HiFi/Tidal/…) its own retry budget. Each source spends <em>queries × retries-per-query</em> attempts before the track moves on. Worst case across two sources can mean many downloads — use for hard-to-match tracks (e.g. CJK artist names). Requires the option above.</small>
-                                </div>
-                                <div class="form-group">
-                                    <label for="retries-per-query">Retries per query (per source)</label>
-                                    <input type="number" id="retries-per-query" min="1" max="20" step="1" value="5" style="width: 100px;" autocomplete="off" data-bwignore="" data-1p-ignore="" data-lpignore="true">
-                                    <small class="settings-hint">In exhaustive mode, how many candidates to try per search query per source. The per-source budget is <em>number of search queries × this value</em>. Only used when Exhaustive retry is on.</small>
-                                </div>
-                                <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="accept-version-mismatch-fallback">
-                                        Accept best version mismatch as last resort
-                                    </label>
-                                    <small class="settings-hint">When retries are fully exhausted and <em>every</em> candidate for a track failed the <strong>same</strong> version mismatch (e.g. only an instrumental exists), accept the best (first-tried) one instead of leaving the track missing. Only AcoustID is bypassed — integrity/duration/bit-depth checks still run, so truncated or genuinely wrong files are never let through. Off = leave such tracks failed.</small>
-                                </div>
-                                <div class="form-group">
-                                    <label for="version-mismatch-min-count">Minimum matching mismatches before accepting</label>
-                                    <input type="number" id="version-mismatch-min-count" min="1" max="20" step="1" value="2" style="width: 100px;" autocomplete="off" data-bwignore="" data-1p-ignore="" data-lpignore="true">
-                                    <small class="settings-hint">How many quarantined candidates must have failed the <em>same</em> version mismatch before the last-resort acceptance kicks in. Higher = more confirmation that no correct version exists. Only used when the option above is on.</small>
-                                </div>
-                            </div>
-
-                            </div><!-- end Retry Logic body -->
-
-                            <!-- ═══ INDEXERS & DOWNLOADERS ═══ -->
-                            <!-- Intro hero — explains the search → fetch flow in one glance -->
-                            <div class="settings-group ind-hero" data-stg="indexers">
-                                <div class="ind-hero-title">Indexers &amp; Downloaders</div>
-                                <div class="ind-hero-flow">
-                                    <span class="ind-hero-step"><span class="ind-hero-step-num">1</span> Indexers find releases</span>
-                                    <span class="ind-hero-arrow">→</span>
-                                    <span class="ind-hero-step"><span class="ind-hero-step-num">2</span> Downloader fetches them</span>
-                                    <span class="ind-hero-arrow">→</span>
-                                    <span class="ind-hero-step"><span class="ind-hero-step-num">3</span> SoulSync imports to library</span>
-                                </div>
-                                <div class="ind-hero-sub">
-                                    Configure your Prowlarr instance to feed search results, and pick a torrent client and/or usenet client to handle the actual downloads. You only need to set up the protocols you actually use.
-                                </div>
-                                <div class="ind-hero-warning">
-                                    <div class="ind-hero-warning-title">💡 Filesystem access — easiest setup</div>
-                                    <div class="ind-hero-warning-body">
-                                        Torrent and usenet clients write files to <strong>their own download folders</strong>, not Soulseek's. SoulSync needs read access to those folders to import the files. <strong>Simplest fix:</strong> point all your downloaders (Soulseek, qBittorrent, SABnzbd / NZBGet) at the <em>same</em> download folder. One folder, one path to worry about, everything just works.
-                                        <ul>
-                                            <li><strong>Bare-metal:</strong> just set every client's download path to the same folder (e.g. your existing slskd folder). Done.</li>
-                                            <li><strong>Docker:</strong> easiest is to reuse the <code>./downloads</code> mount you already have for slskd — point qBit and SAB at <code>/downloads</code> inside their containers too. Or use the commented placeholders in <code>docker-compose.yml</code> if you want separate folders.</li>
-                                            <li><strong>Remote client (NAS / different host):</strong> mount the remote folder locally (SMB / NFS / rclone) before SoulSync can see it.</li>
-                                        </ul>
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="audio-completeness-check">
+                                            Verify real audio with ffmpeg
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
+                                    <div class="setting-help-body" hidden>Decodes every downloaded file with ffmpeg to catch fake 30s previews padded to full length and mostly-silent files — the kind whose header lies about the length so mutagen can't catch them. <strong>Off by default:</strong> this fully decodes each file, the most CPU-heavy post-processing step. Most sources (HiFi, Qobuz) already catch previews on their own, so only turn this on if you see padded/silent files slip through. Applies to all download sources.</div>
+                                </div>
+                            </div>
+                            </div><!-- end Audio Verification body -->
+
+                            <!-- ═══ INDEXERS & DOWNLOADERS (gated: only shown when torrent/usenet is a selected source — see updateDownloadSourceUI) ═══ -->
+                            <div id="indexers-downloaders-section" data-stg="downloads">
+                            <!-- Compact collapsible filesystem note (flow/intro text removed per design) -->
+                            <div class="ind-hero-warning" style="margin-bottom:12px;">
+                                <div class="ind-hero-warning-title" style="cursor:pointer;user-select:none;" onclick="const b=this.nextElementSibling; b.style.display=(b.style.display==='none'?'':'none'); const c=this.querySelector('.ind-hero-warning-caret'); if(c)c.textContent=(b.style.display==='none'?'▾':'▴');">💡 Filesystem access — easiest setup <span class="ind-hero-warning-caret" style="opacity:.6;">▾</span></div>
+                                <div class="ind-hero-warning-body" style="display:none;">
+                                    Torrent and usenet clients write files to <strong>their own download folders</strong>, not Soulseek's. SoulSync needs read access to those folders to import the files. <strong>Simplest fix:</strong> point all your downloaders (Soulseek, qBittorrent, SABnzbd / NZBGet) at the <em>same</em> download folder. One folder, one path to worry about, everything just works.
+                                    <ul>
+                                        <li><strong>Bare-metal:</strong> just set every client's download path to the same folder (e.g. your existing slskd folder). Done.</li>
+                                        <li><strong>Docker:</strong> easiest is to reuse the <code>./downloads</code> mount you already have for slskd — point qBit and SAB at <code>/downloads</code> inside their containers too. Or use the commented placeholders in <code>docker-compose.yml</code> if you want separate folders.</li>
+                                        <li><strong>Remote client (NAS / different host):</strong> mount the remote folder locally (SMB / NFS / rclone) before SoulSync can see it.</li>
+                                    </ul>
                                 </div>
                             </div>
 
                             <!-- ─── INDEXERS section ─── -->
-                            <div class="settings-section-header" data-stg="indexers" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                            <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
-                                <h3>🔎 Indexers</h3>
+                                <h3>Indexers</h3>
                                 <span class="settings-section-hint">Prowlarr — search aggregator</span>
                                 <span class="ind-status-dot ind-status-dot-unknown" id="prowlarr-status-dot" title="Not tested"></span>
                             </div>
-                            <div class="settings-section-body" data-stg="indexers">
-                                <div class="settings-group" data-stg="indexers">
+                            <div class="settings-section-body collapsed" data-stg="downloads">
+                                <div class="settings-group" data-stg="downloads">
                                     <div class="api-service-frame">
-                                        <h4 class="service-title prowlarr-title">⬢ Prowlarr</h4>
-                                        <div class="setting-help-text" style="margin-bottom: 14px;">
+                                        <div class="setting-row" style="padding:14px 18px;">
+                                            <h4 class="service-title prowlarr-title" style="padding:0!important;border:0!important;margin:0!important;flex:1;">⬢ Prowlarr</h4>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                                onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                        </div>
+                                        <div class="setting-help-text setting-help-body" style="margin-bottom: 14px;" hidden>
                                             Prowlarr manages your Usenet and torrent indexers and exposes them through one API. SoulSync uses Prowlarr to search across every indexer at once for the Torrent and Usenet download sources.
                                             <br><br>
                                             Don't have it? Grab Prowlarr from <code>prowlarr.com</code> (or your *arr stack). You point Prowlarr at your indexers, then point SoulSync at Prowlarr.
@@ -5381,18 +5406,23 @@
                                 </div>
                             </div>
 
-                            <!-- ─── TORRENT CLIENT section ─── -->
-                            <div class="settings-section-header collapsed" data-stg="indexers" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                            <!-- ─── TORRENT CLIENT section (gated on torrent source) ─── -->
+                            <div id="torrent-tile">
+                            <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
-                                <h3>🧲 Torrent Client</h3>
+                                <h3>Torrent Client</h3>
                                 <span class="settings-section-hint">qBittorrent · Transmission · Deluge</span>
                                 <span class="ind-status-dot ind-status-dot-unknown" id="torrent-client-status-dot" title="Not tested"></span>
                             </div>
-                            <div class="settings-section-body collapsed" data-stg="indexers">
-                                <div class="settings-group" data-stg="indexers">
+                            <div class="settings-section-body collapsed" data-stg="downloads">
+                                <div class="settings-group" data-stg="downloads">
                                     <div class="api-service-frame">
-                                        <h4 class="service-title torrent-title">⬢ Torrent Downloader</h4>
-                                        <div class="setting-help-text" style="margin-bottom: 14px;">
+                                        <div class="setting-row" style="padding:14px 18px;">
+                                            <h4 class="service-title torrent-title" style="padding:0!important;border:0!important;margin:0!important;flex:1;">⬢ Torrent Downloader</h4>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                                onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                        </div>
+                                        <div class="setting-help-text setting-help-body" style="margin-bottom: 14px;" hidden>
                                             Where SoulSync sends torrents once Prowlarr finds them. Pick the client you already use — only one can be active at a time. Add the URL of the client's WebUI, log in if it asks for credentials, and hit Test Connection.
                                         </div>
                                         <div class="form-group">
@@ -5473,18 +5503,25 @@
                                 </div>
                             </div>
 
-                            <!-- ─── USENET CLIENT section ─── -->
-                            <div class="settings-section-header collapsed" data-stg="indexers" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                            </div><!-- end torrent-tile -->
+
+                            <!-- ─── USENET CLIENT section (gated on usenet source) ─── -->
+                            <div id="usenet-tile">
+                            <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
-                                <h3>📰 Usenet Client</h3>
+                                <h3>Usenet Client</h3>
                                 <span class="settings-section-hint">SABnzbd · NZBGet</span>
                                 <span class="ind-status-dot ind-status-dot-unknown" id="usenet-client-status-dot" title="Not tested"></span>
                             </div>
-                            <div class="settings-section-body collapsed" data-stg="indexers">
-                                <div class="settings-group" data-stg="indexers">
+                            <div class="settings-section-body collapsed" data-stg="downloads">
+                                <div class="settings-group" data-stg="downloads">
                                     <div class="api-service-frame">
-                                        <h4 class="service-title usenet-title">⬢ Usenet Downloader</h4>
-                                        <div class="setting-help-text" style="margin-bottom: 14px;">
+                                        <div class="setting-row" style="padding:14px 18px;">
+                                            <h4 class="service-title usenet-title" style="padding:0!important;border:0!important;margin:0!important;flex:1;">⬢ Usenet Downloader</h4>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                                onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                        </div>
+                                        <div class="setting-help-text setting-help-body" style="margin-bottom: 14px;" hidden>
                                             Where SoulSync sends NZBs once Prowlarr finds them. Pick one usenet downloader. SABnzbd uses an API key for auth; NZBGet uses a username + password.
                                         </div>
                                         <div class="form-group">
@@ -5542,18 +5579,164 @@
                                     </div>
                                 </div>
                             </div>
+                            </div><!-- end usenet-tile -->
+                            </div><!-- end indexers-downloaders-section -->
+
+                            <!-- ═══ RETRY LOGIC (download behaviour — after the source/indexer config) ═══ -->
+                            <div class="settings-section-header collapsed" data-stg="downloads" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Retry Logic</h3>
+                                <span class="settings-section-hint">What happens when a download is rejected</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="downloads">
+                            <div class="settings-group" data-stg="downloads">
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="retry-next-candidate" checked>
+                                            Retry next-best candidate on mismatch
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>Controls what happens when a downloaded file is rejected (AcoustID mismatch, wrong version, or duration/integrity failure) — independent of post-processing. When on, SoulSync automatically tries the next-best candidate instead of failing the track. <strong>Off</strong> = quarantine and fail immediately.</div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="retry-exhaustive" onchange="syncRetryConditionalRows()">
+                                            Exhaustive retry (separate budget per source)
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>Give every source (Soulseek, then HiFi/Tidal/…) its own retry budget. Each source spends <em>queries × retries-per-query</em> attempts before the track moves on. Worst case across two sources can mean many downloads — use for hard-to-match tracks (e.g. CJK artist names). Requires the option above.</div>
+                                </div>
+                                <div class="form-group" id="retries-per-query-row" style="display:none;">
+                                    <div class="setting-row">
+                                        <label for="retries-per-query">Retries per query (per source)</label>
+                                        <input type="number" id="retries-per-query" min="1" max="20" step="1" value="5" style="width: 100px;" autocomplete="off" data-bwignore="" data-1p-ignore="" data-lpignore="true">
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>In exhaustive mode, how many candidates to try per search query per source. The per-source budget is <em>number of search queries × this value</em>. Only used when Exhaustive retry is on.</div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="accept-version-mismatch-fallback" onchange="syncRetryConditionalRows()">
+                                            Accept best version mismatch as last resort
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>When retries are fully exhausted and <em>every</em> candidate for a track failed the <strong>same</strong> version mismatch (e.g. only an instrumental exists), accept the best (first-tried) one instead of leaving the track missing. Only AcoustID is bypassed — integrity/duration/bit-depth checks still run, so truncated or genuinely wrong files are never let through. <strong>Off</strong> = leave such tracks failed.</div>
+                                </div>
+                                <div class="form-group" id="version-mismatch-min-count-row" style="display:none;">
+                                    <div class="setting-row">
+                                        <label for="version-mismatch-min-count">Minimum matching mismatches before accepting</label>
+                                        <input type="number" id="version-mismatch-min-count" min="1" max="20" step="1" value="2" style="width: 100px;" autocomplete="off" data-bwignore="" data-1p-ignore="" data-lpignore="true">
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="setting-help-body" hidden>How many quarantined candidates must have failed the <em>same</em> version mismatch before the last-resort acceptance kicks in. Higher = more confirmation that no correct version exists. Only used when the option above is on.</div>
+                                </div>
+                            </div>
+                            </div><!-- end Retry Logic body -->
 
                             <!-- ═══ PATHS & ORGANIZATION ═══ -->
                             <div class="settings-section-header collapsed" data-stg="library" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
                                 <h3>Paths &amp; Organization</h3>
-                                <span class="settings-section-hint">File templates, music library paths</span>
+                                <span class="settings-section-hint">Folders, file templates &amp; library paths</span>
                             </div>
                             <div class="settings-section-body collapsed" data-stg="library">
 
+                            <!-- Folder Paths (moved here from Downloads — all path settings live together) -->
+                            <div class="settings-group" data-stg="library">
+                                <h3>Folder Paths</h3>
+                                <div class="setting-help-text" style="margin-bottom: 4px;">
+                                    Container-internal paths. Only change them if you know what you're doing — wrong values break downloads.
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Input Folder (Download Dir):</label>
+                                    <div class="path-input-group">
+                                        <input type="text" id="download-path" placeholder="./downloads" readonly>
+                                        <button class="browse-button locked" onclick="togglePathLock('download', this)">Unlock</button>
+                                    </div>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Output Folder (Music Library):</label>
+                                    <div class="path-input-group">
+                                        <input type="text" id="transfer-path" placeholder="./Transfer" readonly>
+                                        <button class="browse-button locked" onclick="togglePathLock('transfer', this)">Unlock</button>
+                                    </div>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Import Folder:</label>
+                                    <div class="path-input-group">
+                                        <input type="text" id="staging-path" placeholder="./Staging" readonly>
+                                        <button class="browse-button locked" onclick="togglePathLock('staging', this)">Unlock</button>
+                                    </div>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Music Videos Dir:</label>
+                                    <div class="path-input-group">
+                                        <input type="text" id="music-videos-path" placeholder="./MusicVideos" readonly>
+                                        <button class="browse-button locked" onclick="togglePathLock('music-videos', this)">Unlock</button>
+                                    </div>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Playlists Folder:</label>
+                                    <div class="path-input-group">
+                                        <input type="text" id="playlists-materialize-path" placeholder="./Playlists" readonly>
+                                        <button class="browse-button locked" onclick="togglePathLock('playlists-materialize', this)">Unlock</button>
+                                    </div>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
+                                        Where <strong>Organize by playlist</strong> builds playlist folders — as shortcuts into your library, so songs are never stored twice. Keep this <strong>outside</strong> your music library folder so your media server doesn't scan the same tracks twice.
+                                    </div>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>Playlist Folder Style:</label>
+                                    <select id="playlists-materialize-mode">
+                                        <option value="symlink">Symlinks — no extra disk, point to your library</option>
+                                        <option value="copy">Copies — real duplicates (USB sticks / players that can't follow links)</option>
+                                    </select>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
+                                        Symlinks use almost no space. Copies are self-contained. Symlinks fall back to copies automatically where the filesystem can't link (Windows without privileges, some network shares, FAT/exFAT drives).
+                                    </div>
+                                    <div style="flex-basis:100%; width:100%;">
+                                        <button class="test-button" id="playlists-rebuild-btn" onclick="rebuildPlaylistFolders()">
+                                            Rebuild playlist folders now
+                                        </button>
+                                        <div class="setting-help-text" id="playlists-rebuild-status" style="margin-top: 6px;"></div>
+                                    </div>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>M3U Entry Base Path:</label>
+                                    <div class="path-input-group">
+                                        <input type="text" id="m3u-entry-base-path" placeholder="e.g. /mnt/music (leave empty for relative paths)" readonly>
+                                        <button class="browse-button locked" onclick="togglePathLock('m3u-entry-base', this)">Unlock</button>
+                                    </div>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
+                                        Optional prefix added to every track path in exported M3U files. Use this when your media server needs absolute paths (e.g. <code>/mnt/music</code>).
+                                    </div>
+                                </div>
+                            </div>
+
                             <!-- File Organization Settings -->
                             <div class="settings-group" data-stg="library">
-                                <h3>📁 File Organization</h3>
+                                <h3>File Organization</h3>
 
                                 <div class="form-group">
                                     <label class="checkbox-label">
@@ -5566,15 +5749,16 @@
                                     <label>Album Path Template:</label>
                                     <input type="text" id="template-album-path"
                                         placeholder="$albumartist/$albumartist - $album/$track - $title">
-                                    <small class="settings-hint">Variables: $albumartist, $artist, $artistletter, $album, $albumtype,
-                                        $title, $track, $disc (01), $discnum (1), $cdnum (CD01 on multi-disc, empty on single), $year, $quality (filename only). Use ${var} to append text: ${albumtype}s → Albums</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Variables: <code>$albumartist</code>, <code>$artist</code>, <code>$artistletter</code>, <code>$album</code>, <code>$albumtype</code>, <code>$title</code>, <code>$track</code>, <code>$disc</code> (01), <code>$discnum</code> (1), <code>$cdnum</code> (CD01 on multi-disc, empty on single), <code>$year</code>, <code>$quality</code> (filename only). Use <code>${var}</code> to append text: <code>${albumtype}s</code> → Albums</small>
                                 </div>
 
                                 <div class="form-group">
                                     <label>Single Path Template:</label>
                                     <input type="text" id="template-single-path"
                                         placeholder="$artist/$artist - $title/$title">
-                                    <small class="settings-hint">Variables: $albumartist, $artist, $artistletter, $title, $track (01), $album, $albumtype, $year, $quality (filename only). Use ${var} to append text: ${albumtype}s → Singles</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Variables: <code>$albumartist</code>, <code>$artist</code>, <code>$artistletter</code>, <code>$title</code>, <code>$track</code> (01), <code>$album</code>, <code>$albumtype</code>, <code>$year</code>, <code>$quality</code> (filename only). Use <code>${var}</code> to append text: <code>${albumtype}s</code> → Singles</small>
                                 </div>
 
                                 <!-- Playlist Path Template: hidden from the UI. Playlists now import
@@ -5593,14 +5777,16 @@
                                     <label>Playlist File Naming:</label>
                                     <input type="text" id="template-playlist-item"
                                         placeholder="Leave empty to keep the library filename">
-                                    <small class="settings-hint">Renames the files inside each "Organize by Playlist" folder (your real library files are never touched). <strong>Filename only — no folders.</strong> Variables: $position (playlist order), $artist, $album, $track, $title. Must include $title and cannot contain "/". Example: <code>$position - $artist - $title</code> → <code>01 - Daft Punk - One More Time.flac</code>. Empty = keep the original library filename.</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Renames the files inside each "Organize by Playlist" folder (your real library files are never touched). <strong>Filename only — no folders.</strong> Variables: <code>$position</code> (playlist order), <code>$artist</code>, <code>$album</code>, <code>$track</code>, <code>$title</code>. Must include <code>$title</code> and cannot contain "/". Example: <code>$position - $artist - $title</code> → <code>01 - Daft Punk - One More Time.flac</code>. Empty = keep the original library filename.</small>
                                 </div>
 
                                 <div class="form-group">
                                     <label>Music Video Path Template:</label>
                                     <input type="text" id="template-video-path"
                                         placeholder="$artist/$title-video">
-                                    <small class="settings-hint">Variables: $artist, $artistletter, $title, $year. Use ${var} to append text. Default: $artist/$title-video</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Variables: <code>$artist</code>, <code>$artistletter</code>, <code>$title</code>, <code>$year</code>. Use <code>${var}</code> to append text. Default: <code>$artist/$title-video</code></small>
                                 </div>
 
                                 <div class="form-group">
@@ -5609,7 +5795,8 @@
                                         <option value="Disc">Disc (e.g., Disc 1/)</option>
                                         <option value="CD">CD (e.g., CD 1/)</option>
                                     </select>
-                                    <small class="settings-hint">Label used for auto-created disc subfolders on multi-disc albums.</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Label used for auto-created disc subfolders on multi-disc albums.</small>
                                 </div>
 
                                 <div class="form-group">
@@ -5618,9 +5805,8 @@
                                         <option value="first">First Listed Artist (recommended)</option>
                                         <option value="all">All Artists Combined</option>
                                     </select>
-                                    <small class="settings-hint">How $albumartist resolves for albums with multiple artists.
-                                        "First Listed" uses only the primary artist for folder names (e.g., "Larry June" instead of "Larry June, Curren$y & The Alchemist").
-                                        Full artist list is always preserved in file metadata tags.</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>How <code>$albumartist</code> resolves for albums with multiple artists. "First Listed" uses only the primary artist for folder names (e.g., "Larry June" instead of "Larry June, Curren$y &amp; The Alchemist"). Full artist list is always preserved in file metadata tags.</small>
                                 </div>
 
                                 <div class="form-group">
@@ -5631,21 +5817,24 @@
                                         <option value=" / ">/ (slash)</option>
                                         <option value=" & ">&amp; (ampersand)</option>
                                     </select>
-                                    <small class="settings-hint">Separator between multiple artists in the ARTIST tag (e.g. <code>&amp;</code> matches MusicBrainz/Picard style)</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Separator between multiple artists in the ARTIST tag (e.g. <code>&amp;</code> matches MusicBrainz/Picard style)</small>
                                 </div>
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="write-multi-artist">
                                         <span>Write multi-value ARTISTS tag</span>
                                     </label>
-                                    <small class="settings-hint">Write each artist as a separate tag value for Navidrome/Jellyfin multi-artist support</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Write each artist as a separate tag value for Navidrome/Jellyfin multi-artist support</small>
                                 </div>
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="feat-in-title">
                                         <span>Move featured artists to title</span>
                                     </label>
-                                    <small class="settings-hint">Keep only primary artist in ARTIST tag, append others as (feat. ...) in title</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Keep only primary artist in ARTIST tag, append others as (feat. ...) in title</small>
                                 </div>
 
                                 <div class="form-group">
@@ -5653,9 +5842,8 @@
                                         <input type="checkbox" id="allow-duplicate-tracks" checked>
                                         Allow duplicate tracks across albums
                                     </label>
-                                    <small class="settings-hint">When enabled, the same song can be added to the wishlist from
-                                        different albums (e.g., completing a discography where albums share tracks).
-                                        When disabled, tracks with the same name and artist are skipped.</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>When enabled, the same song can be added to the wishlist from different albums (e.g., completing a discography where albums share tracks). When disabled, tracks with the same name and artist are skipped.</small>
                                 </div>
 
                                 <div class="form-group">
@@ -5671,7 +5859,7 @@
 
                             <!-- Music Library Paths (moved into Paths & Organization) -->
                             <div class="settings-group" data-stg="library">
-                                <h3>📂 Music Library Paths</h3>
+                                <h3>Music Library Paths</h3>
 
                                 <div class="help-text" style="margin-bottom: 12px;">
                                     Tell SoulSync where your music files live. Required for tag writing, streaming, and file detection
@@ -5699,7 +5887,6 @@
 
                             <!-- Metadata Enhancement Settings -->
                             <div class="settings-group" data-stg="library">
-                                <h3>🎵 Post-Processing</h3>
 
                                 <div class="form-group">
                                     <label class="checkbox-label">
@@ -5707,7 +5894,8 @@
                                             onchange="document.getElementById('post-processing-options').style.display = this.checked ? 'block' : 'none'">
                                         Enable post-processing on downloaded files
                                     </label>
-                                    <small class="settings-hint">Master toggle — disabling this skips all metadata, artwork, and lyrics processing</small>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <small class="settings-hint setting-help-body" hidden>Master toggle — disabling this skips all metadata, artwork, and lyrics processing.</small>
                                 </div>
 
                                 <div id="post-processing-options">
@@ -5731,11 +5919,13 @@
                                                 <input type="checkbox" id="prefer-caa-art">
                                                 Use MusicBrainz Cover Art Archive for album art
                                             </label>
-                                            <small>Higher resolution but quality may vary. When off, uses Spotify/iTunes/Deezer art (consistent 640x640). Ignored when a preferred album art source list is set below — add Cover Art Archive to that list instead.</small>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                            <small class="settings-hint setting-help-body" hidden>Higher resolution but quality may vary. When off, uses Spotify/iTunes/Deezer art (consistent 640x640). Ignored when a preferred album art source list is set below — add Cover Art Archive to that list instead.</small>
                                         </div>
                                         <div class="form-group">
                                             <label class="checkbox-label" style="cursor:default;">Preferred album art sources</label>
-                                            <small class="settings-hint">Order the sources to choose whose cover art is used. The first source that has a cover wins; misses fall through to the next, and if none match, your download's own art is kept. Only sources you're connected to are shown — leave all off to keep current behavior.</small>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                            <small class="settings-hint setting-help-body" hidden>Order the sources to choose whose cover art is used. The first source that has a cover wins; misses fall through to the next, and if none match, your download's own art is kept. Only sources you're connected to are shown — leave all off to keep current behavior.</small>
                                             <div class="hybrid-source-list" id="art-source-list"></div>
                                         </div>
                                         <div class="form-group">
@@ -5743,7 +5933,8 @@
                                                 <input type="checkbox" id="single-to-album-enabled">
                                                 Match singles to their parent album
                                             </label>
-                                            <small class="settings-hint">When a track matches a single release, look up the album that contains it and tag it as that album — so every song in an album gets the same (album) cover instead of some getting the single's art. Off by default: adds an extra metadata lookup per single-matched track.</small>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                            <small class="settings-hint setting-help-body" hidden>When a track matches a single release, look up the album that contains it and tag it as that album — so every song in an album gets the same (album) cover instead of some getting the single's art. Off by default: adds an extra metadata lookup per single-matched track.</small>
                                         </div>
                                         <div class="form-group">
                                             <label class="checkbox-label">
@@ -5756,19 +5947,14 @@
                                                 <input type="checkbox" id="replaygain-enabled">
                                                 Apply ReplayGain tags after download
                                             </label>
-                                            <small class="settings-hint">Analyzes loudness and writes ReplayGain track gain/peak tags. Requires ffmpeg. Adds a few seconds per track.</small>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                            <small class="settings-hint setting-help-body" hidden>Analyzes loudness and writes ReplayGain track gain/peak tags. Requires ffmpeg. Adds a few seconds per track.</small>
                                         </div>
                                         <div class="form-group">
                                             <label for="duration-tolerance-seconds">Duration tolerance (seconds)</label>
                                             <input type="number" id="duration-tolerance-seconds" min="0" max="60" step="0.5" value="0" style="width: 100px;">
-                                            <small class="settings-hint">Maximum drift between the file's actual length and the metadata source's expected length before the file is quarantined. <strong>0 = auto</strong> (3s normal, 5s for tracks &gt;10min). Raise this if tracks routinely quarantine for being a few seconds off (live recordings, alternate masterings, etc). Capped at 60s.</small>
-                                        </div>
-                                        <div class="form-group">
-                                            <label class="checkbox-label">
-                                                <input type="checkbox" id="audio-completeness-check">
-                                                Verify real audio with ffmpeg (detect truncated / silent files)
-                                            </label>
-                                            <small class="settings-hint">Decodes every downloaded file with ffmpeg to catch fake 30s previews padded to full length and mostly-silent files — the kind whose header lies about the length so mutagen can't catch them. <strong>Off by default:</strong> this fully decodes each file, the most CPU-heavy post-processing step. Most sources (HiFi, Qobuz) already catch previews on their own, so only turn this on if you see padded/silent files slip through. Applies to all download sources.</small>
+                                            <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                            <small class="settings-hint setting-help-body" hidden>Maximum drift between the file's actual length and the metadata source's expected length before the file is quarantined. <strong>0 = auto</strong> (3s normal, 5s for tracks &gt;10min). Raise this if tracks routinely quarantine for being a few seconds off (live recordings, alternate masterings, etc). Capped at 60s.</small>
                                         </div>
                                     </div>
 
@@ -5983,99 +6169,42 @@
                                 </div>
                             </div>
 
-                            <!-- Post-Download Conversion Settings -->
-                            <div class="settings-group" data-stg="library">
-                                <h3>📀 Post-Download Conversion</h3>
-
-                                <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="downsample-hires">
-                                        Downsample Hi-Res FLAC to CD quality (16-bit / 44.1kHz)
-                                    </label>
-                                </div>
-                                <div class="help-text">
-                                    When a 24-bit or high sample rate FLAC is downloaded, it will be
-                                    automatically converted to 16-bit/44.1kHz. The hi-res original is
-                                    replaced — not kept alongside. Requires ffmpeg.
-                                </div>
-
-                                <div class="form-group" style="margin-top: 16px;">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="lossy-copy-enabled"
-                                            onchange="document.getElementById('lossy-copy-options').style.display = this.checked ? 'block' : 'none'">
-                                        Create lossy copy of downloaded FLAC files
-                                    </label>
-                                </div>
-
-                                <div id="lossy-copy-options" style="display: none;">
-                                    <div class="form-group">
-                                        <label>Codec:</label>
-                                        <select id="lossy-copy-codec" onchange="updateLossyBitrateOptions()">
-                                            <option value="mp3">MP3</option>
-                                            <option value="opus">Opus</option>
-                                            <option value="aac">AAC (M4A)</option>
-                                        </select>
-                                    </div>
-                                    <div class="form-group">
-                                        <label>Bitrate:</label>
-                                        <select id="lossy-copy-bitrate">
-                                            <option value="320">320 kbps</option>
-                                            <option value="256">256 kbps</option>
-                                            <option value="192">192 kbps</option>
-                                            <option value="128">128 kbps</option>
-                                        </select>
-                                    </div>
-                                    <div class="help-text">
-                                        After downloading a FLAC, a lossy copy at the selected codec and bitrate
-                                        will be created in the same folder. Requires ffmpeg.
-                                    </div>
-                                    <div class="form-group" style="margin-top: 12px;">
-                                        <label class="checkbox-label">
-                                            <input type="checkbox" id="lossy-copy-delete-original">
-                                            Blasphemy Mode — Delete original FLAC after conversion
-                                        </label>
-                                    </div>
-                                    <div class="help-text" style="color: rgba(255, 100, 100, 0.8);">
-                                        Warning: The original high-quality file will be permanently deleted.
-                                        Only the lossy copy will remain.
-                                    </div>
-                                </div>
-                            </div>
-
                             </div><!-- end Post-Processing body -->
 
-                            <!-- ═══ LIBRARY PREFERENCES ═══ -->
+                            <!-- ═══ LISTENING STATS ═══ -->
                             <div class="settings-section-header collapsed" data-stg="library" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
-                                <h3>Library Preferences</h3>
-                                <span class="settings-section-hint">Import, content filter, playlists, stats</span>
+                                <h3>Listening Stats</h3>
+                                <span class="settings-section-hint">Play history from your media server</span>
                             </div>
                             <div class="settings-section-body collapsed" data-stg="library">
-
-                            <!-- Listening Stats Settings -->
                             <div class="settings-group" data-stg="library">
-                                <h3>📊 Listening Stats</h3>
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="listening-stats-enabled">
                                         Enable listening stats collection from media server
                                     </label>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                </div>
+                                <div class="help-text setting-help-body" hidden>
+                                    Polls your active media server (Plex, Jellyfin, or Navidrome) for play history
+                                    and displays stats on the Stats page.
                                 </div>
                                 <div class="form-group">
                                     <label>Poll Interval (minutes):</label>
                                     <input type="number" id="listening-stats-interval" min="5" max="1440" value="30">
                                 </div>
-                                <div class="help-text">
-                                    Polls your active media server (Plex, Jellyfin, or Navidrome) for play history
-                                    and displays stats on the Stats page.
-                                </div>
                             </div>
+                            </div><!-- end Listening Stats body -->
 
-                            </div><!-- end Library Preferences body -->
-
-                            <!-- Security & Access Settings -->
-                            <div class="settings-group" data-stg="advanced">
-                                <h3>🔒 Security &amp; Access</h3>
+                            <!-- Security & Access (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="advanced" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Security &amp; Access</h3>
+                                <span class="settings-section-hint">PIN · user accounts · reverse proxy</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="advanced">
+                            <div class="settings-group security-wrapper" data-stg="advanced">
                                 <div class="setting-help-text" style="margin-bottom: 18px;">
                                     By default, anyone who can reach SoulSync on your network can use it. Protect access below with a simple shared <strong>PIN</strong>, or full <strong>user accounts</strong> with passwords — you only need one. The last group is just for exposing SoulSync over the internet.
                                 </div>
@@ -6192,10 +6321,18 @@
                                     </div>
                                 </div>
                             </div>
+                            </div><!-- end Security & Access body -->
 
                             <!-- Discovery Settings -->
-                            <div class="settings-group" data-stg="advanced">
-                                <h3>🔍 Discovery Pool Settings</h3>
+                                                        <!-- Discovery Pool Settings (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="advanced" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Discovery Pool Settings</h3>
+                                <span class="settings-section-hint">Lookback &amp; hemisphere</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="advanced">
+<div class="settings-group" data-stg="advanced">
+
 
                                 <div class="form-group">
                                     <label>Lookback Period:</label>
@@ -6206,7 +6343,9 @@
                                         <option value="180">Last 6 months</option>
                                         <option value="all">Entire discography</option>
                                     </select>
-                                    <div class="setting-help-text">
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                        onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
                                         Controls how far back to scan when adding new artists or refreshing discovery
                                         pool.
                                         Once scanned, artists are kept updated with new releases only.
@@ -6219,13 +6358,16 @@
                                         <option value="northern">Northern Hemisphere</option>
                                         <option value="southern">Southern Hemisphere</option>
                                     </select>
-                                    <div class="setting-help-text">
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                        onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
                                         Adjusts seasonal playlists on the Discover page to match your region.
                                         Southern hemisphere flips seasons (e.g. December = Summer, June = Winter).
                                         Holidays like Christmas and Halloween stay calendar-fixed.
                                     </div>
                                 </div>
                             </div>
+                            </div><!-- end Discovery Pool Settings body -->
 
                         </div>
 
@@ -6291,8 +6433,15 @@
                             </div>
 
                             <!-- Database Settings -->
-                            <div class="settings-group" data-stg="advanced">
+                                                        <!-- Database Settings (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="advanced" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
                                 <h3>Database Settings</h3>
+                                <span class="settings-section-hint">Concurrency</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="advanced">
+<div class="settings-group" data-stg="advanced">
+
 
                                 <div class="form-group">
                                     <label>Concurrent Workers:</label>
@@ -6306,15 +6455,23 @@
                                         <option value="9">9</option>
                                         <option value="10">10</option>
                                     </select>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                 </div>
 
-                                <div class="help-text">Number of parallel threads for database updates. Higher values =
-                                    faster updates but more server load.</div>
+                                <div class="help-text setting-help-body" hidden>Number of parallel threads for database updates. Higher values = faster updates but more server load.</div>
                             </div>
+                            </div><!-- end Database Settings body -->
 
                             <!-- Database Maintenance -->
-                            <div class="settings-group" data-stg="advanced">
+                                                        <!-- Database Maintenance (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="advanced" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
                                 <h3>Database Maintenance</h3>
+                                <span class="settings-section-hint">Size, vacuum &amp; cleanup</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="advanced">
+<div class="settings-group" data-stg="advanced">
+
 
                                 <div class="form-group" id="db-maintenance-info">
                                     <label>Database Size:</label>
@@ -6339,39 +6496,87 @@
                                 </div>
                                 <div id="db-vacuum-status" style="display: none; margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 0.85em;"></div>
                             </div>
+                            </div><!-- end Database Maintenance body -->
 
 
-                            <!-- Content Filter Settings -->
+                            <!-- Import Settings (collapsible tile) — first here so it isn't buried among filters -->
+                            <div class="settings-section-header collapsed" data-stg="library" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Import</h3>
+                                <span class="settings-section-hint">Folder-artist override, permanent library</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="library">
                             <div class="settings-group" data-stg="library">
-                                <h3>🔞 Content Filter</h3>
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="import-folder-artist-override">
+                                            Use the top Staging folder as the artist
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="help-text setting-help-body" hidden>
+                                        On by default (legacy behaviour). When enabled, files staged as
+                                        <code>Artist/Album/…</code> (or <code>Artist/Albums/Album/…</code>) take the top
+                                        folder as the album artist — handy for mixtapes/compilations whose embedded tags
+                                        carry DJ names. <strong>Turn this off</strong> if you drop a mixed pile of songs
+                                        under one container folder: otherwise every file's artist gets overwritten with
+                                        that folder's name (the cause of the "soulsync" mass-mislabel). With it off, the
+                                        metadata-identified artist is always kept.
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <div class="setting-row">
+                                        <label class="checkbox-label">
+                                            <input type="checkbox" id="import-transfer-permanent">
+                                            Transfer is my permanent library — never move files out
+                                        </label>
+                                        <span class="info-icon" role="button" tabindex="0" title="What's this?"
+                                            onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    </div>
+                                    <div class="help-text setting-help-body" hidden>
+                                        Off by default. Turn this <strong>on</strong> if your Transfer folder is your
+                                        real, permanent library (served by Navidrome/Plex/etc.) rather than a scratch
+                                        drop area. A Deep Scan then never relocates files it doesn't recognize out to
+                                        Staging — it leaves them in place and just reports them. Even with this off, a
+                                        Deep Scan now refuses to move files when the database looks badly out of sync
+                                        with disk, as a safety guard against wiping a library (issue #904).
+                                    </div>
+                                </div>
+                            </div>
+                            </div><!-- end Import body -->
 
+                            <!-- Filtering (Content Filter + Genre Whitelist consolidated into one tile) -->
+                            <div class="settings-section-header collapsed" data-stg="library" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Filtering</h3>
+                                <span class="settings-section-hint">Explicit content &amp; genre whitelist</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="library">
+                            <div class="settings-group" data-stg="library">
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="allow-explicit" checked>
                                         Allow explicit content in downloads
                                     </label>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                 </div>
-                                <div class="help-text">
+                                <div class="help-text setting-help-body" hidden>
                                     When disabled, tracks marked as explicit on Spotify will be skipped
                                     during matched downloads. Does not affect manual Soulseek searches.
                                 </div>
-                            </div>
-
-
-                            <!-- Genre Whitelist -->
-                            <div class="settings-group" data-stg="library">
-                                <h3>🎵 Genre Whitelist</h3>
 
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="genre-whitelist-enabled" onchange="if(typeof debouncedAutoSaveSettings==='function')debouncedAutoSaveSettings()">
                                         Enable strict genre filtering
                                     </label>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                 </div>
-                                <div class="help-text" style="margin-bottom:12px;">
+                                <div class="help-text setting-help-body" hidden style="margin-bottom:12px;">
                                     When enabled, only genres on the whitelist below are kept during enrichment. Junk tags (artist names, radio shows, playlist names) are silently dropped. When disabled, all genres pass through unchanged.
                                 </div>
-
                                 <div id="genre-whitelist-container" style="display:none">
                                     <div class="form-group" style="margin-bottom:8px;">
                                         <input type="text" id="genre-whitelist-search" placeholder="Search or add genre..." class="form-input" style="margin-bottom:8px;">
@@ -6383,98 +6588,26 @@
                                     </div>
                                 </div>
                             </div>
+                            </div><!-- end Filtering body -->
 
-                            <!-- Import Settings (collapsible tile) -->
+                            <!-- Playlists (M3U Export + Playlist Sync consolidated into one tile) -->
                             <div class="settings-section-header collapsed" data-stg="library" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
                                 <span class="settings-section-arrow">&#9660;</span>
-                                <h3>Import</h3>
-                                <span class="settings-section-hint">Quality filter, replace rules, folder-artist</span>
+                                <h3>Playlists</h3>
+                                <span class="settings-section-hint">M3U export &amp; server playlist sync</span>
                             </div>
                             <div class="settings-section-body collapsed" data-stg="library">
-
                             <div class="settings-group" data-stg="library">
-                                <h3>📥 Import Settings</h3>
-
-                                <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="import-quality-filter-enabled" checked>
-                                        Only import tracks that meet your quality profile
-                                    </label>
-                                </div>
-                                <div class="help-text">
-                                    On by default. SoulSync always probes each downloaded file's real audio quality; this
-                                    toggle decides what to do with the result. <strong>On</strong> — files that don't meet your
-                                    quality profile are quarantined instead of imported (the same gate the download pipeline
-                                    uses; fallback/downsample settings still apply). <strong>Off</strong> — everything is
-                                    imported regardless of quality. Either way, the library <em>Quality Upgrade Scanner</em>
-                                    still flags below-profile tracks so you can act on them later.
-                                </div>
-
-                                <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="import-replace-lower-quality">
-                                        Replace lower quality files on import
-                                    </label>
-                                </div>
-                                <div class="help-text">
-                                    When importing from Staging, if a track already exists in your library at a lower quality
-                                    (e.g. MP3), it will be replaced with the higher quality version (e.g. FLAC).
-                                    If disabled, existing tracks are always kept and the import file is skipped.
-                                </div>
-
-                                <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="import-folder-artist-override">
-                                        Use the top Staging folder as the artist
-                                    </label>
-                                </div>
-                                <div class="help-text">
-                                    On by default (legacy behaviour). When enabled, files staged as
-                                    <code>Artist/Album/…</code> (or <code>Artist/Albums/Album/…</code>) take the top
-                                    folder as the album artist — handy for mixtapes/compilations whose embedded tags
-                                    carry DJ names. <strong>Turn this off</strong> if you drop a mixed pile of songs
-                                    under one container folder: otherwise every file's artist gets overwritten with
-                                    that folder's name (the cause of the "soulsync" mass-mislabel). With it off, the
-                                    metadata-identified artist is always kept.
-                                </div>
-
-                                <div class="form-group">
-                                    <label class="checkbox-label">
-                                        <input type="checkbox" id="import-transfer-permanent">
-                                        Transfer is my permanent library — never move files out
-                                    </label>
-                                </div>
-                                <div class="help-text">
-                                    Off by default. Turn this <strong>on</strong> if your Transfer folder is your
-                                    real, permanent library (served by Navidrome/Plex/etc.) rather than a scratch
-                                    drop area. A Deep Scan then never relocates files it doesn't recognize out to
-                                    Staging — it leaves them in place and just reports them. Even with this off, a
-                                    Deep Scan now refuses to move files when the database looks badly out of sync
-                                    with disk, as a safety guard against wiping a library (issue #904).
-                                </div>
-                            </div>
-
-                            </div><!-- end Import body -->
-
-
-                            <!-- M3U Export Settings -->
-                            <div class="settings-group" data-stg="library">
-                                <h3>📋 M3U Playlist Export</h3>
-
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="m3u-export-enabled">
                                         Auto-save M3U file when downloading playlists
                                     </label>
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                 </div>
-                                <div class="help-text">
+                                <div class="help-text setting-help-body" hidden>
                                     Saves an M3U playlist file alongside your music. Albums are skipped — they're already grouped by your media server.
                                 </div>
-                            </div>
-
-                            <!-- Playlist Sync Settings -->
-                            <div class="settings-group" data-stg="library">
-                                <h3>Playlist Sync Settings</h3>
 
                                 <div class="form-group">
                                     <label>Sync mode:</label>
@@ -6483,7 +6616,8 @@
                                         <option value="reconcile">Reconcile — edit in place, keep image &amp; description</option>
                                         <option value="append">Append — only add new tracks, never remove</option>
                                     </select>
-                                    <div class="help-text">
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="help-text setting-help-body" hidden>
                                         "Replace" deletes and recreates the server playlist every sync, which wipes its custom image/description. "Reconcile" updates the same playlist in place (adds new tracks, removes ones no longer in the source) so your custom image and description survive. "Append" only ever adds.
                                     </div>
                                 </div>
@@ -6495,10 +6629,18 @@
                                     </label>
                                 </div>
                             </div>
+                            </div><!-- end Playlists body -->
 
                             <!-- Logging Settings -->
-                            <div class="settings-group" data-stg="advanced">
+                                                        <!-- Logging (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="advanced" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
                                 <h3>Logging</h3>
+                                <span class="settings-section-hint">Log level &amp; path</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="advanced">
+<div class="settings-group" data-stg="advanced">
+
 
                                 <div class="form-group">
                                     <label>Log Level:</label>
@@ -6508,7 +6650,8 @@
                                         <option value="WARNING">WARNING (Minimal)</option>
                                         <option value="ERROR">ERROR (Critical Only)</option>
                                     </select>
-                                    <div class="setting-help-text">
+                                    <span class="info-icon" role="button" tabindex="0" title="What's this?" onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
+                                    <div class="setting-help-text setting-help-body" hidden>
                                         Controls the level of detail in application logs. DEBUG shows all details, INFO
                                         shows general operations, WARNING and ERROR show only issues.
                                     </div>
@@ -6519,10 +6662,18 @@
                                     <div class="readonly-field" id="log-path-display">logs/app.log</div>
                                 </div>
                             </div>
+                            </div><!-- end Logging body -->
 
                             <!-- SoulSync API Keys -->
-                            <div class="settings-group" data-stg="advanced">
+                                                        <!-- SoulSync API (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="advanced" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
                                 <h3>SoulSync API</h3>
+                                <span class="settings-section-hint">REST keys &amp; inbound endpoint</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="advanced">
+<div class="settings-group" data-stg="advanced">
+
                                 <div class="api-service-frame">
                                     <h4 class="service-title" style="color: #64ffda;">REST API Keys</h4>
                                     <div class="setting-help-text" style="margin-bottom: 12px; color: #888; font-size: 12px;">
@@ -6575,10 +6726,18 @@
                                     </div>
                                 </div>
                             </div>
+                            </div><!-- end SoulSync API body -->
 
                             <!-- Developer Mode -->
-                            <div class="settings-group" data-stg="advanced">
-                                <h3>🔧 Developer Mode</h3>
+                                                        <!-- Developer Mode (collapsible tile) -->
+                            <div class="settings-section-header collapsed" data-stg="advanced" onclick="this.classList.toggle('collapsed'); const b=this.nextElementSibling; b.classList.toggle('collapsed'); b.style.display=b.classList.contains('collapsed')?'none':''">
+                                <span class="settings-section-arrow">&#9660;</span>
+                                <h3>Developer Mode</h3>
+                                <span class="settings-section-hint">Advanced log viewer</span>
+                            </div>
+                            <div class="settings-section-body collapsed" data-stg="advanced">
+<div class="settings-group" data-stg="advanced">
+
                                 <div class="form-group">
                                     <label>Password:</label>
                                     <div style="display: flex; gap: 8px;">
@@ -6588,6 +6747,7 @@
                                     <div id="dev-mode-status" style="margin-top: 8px; color: #888;">Inactive</div>
                                 </div>
                             </div>
+                            </div><!-- end Developer Mode body -->
                         </div>
                     </div>
 
@@ -6630,10 +6790,6 @@
                         </div>
                     </div>
 
-                    <!-- Save Button -->
-                    <div class="settings-actions">
-                        <button class="save-button" id="save-settings">Save Settings</button>
-                    </div>
                 </div>
                 </div>
             </div>
diff --git a/webui/static/settings.js b/webui/static/settings.js
index f0b324e8..5902210c 100644
--- a/webui/static/settings.js
+++ b/webui/static/settings.js
@@ -40,15 +40,31 @@ async function copyAddress(address, cryptoName) {
 
 let settingsAutoSaveTimer = null;
 
-// The "Only import AcoustID-verified tracks" toggle (under Quality Profile) is
-// meaningless when AcoustID itself is off — only show it when verification is on.
+// The "Only import AcoustID-verified tracks" toggle lives in Audio Verification
+// and is always shown (its help notes it needs AcoustID enabled), so users can
+// always find it. Kept as a no-op for any existing callers.
 function syncAcoustidRequireVerifiedVisibility() {
     const group = document.getElementById('acoustid-require-verified-group');
-    const enabled = document.getElementById('acoustid-enabled');
-    if (group) group.style.display = (enabled && enabled.checked) ? '' : 'none';
+    if (group) group.style.display = '';
 }
 window.syncAcoustidRequireVerifiedVisibility = syncAcoustidRequireVerifiedVisibility;
 
+// Retry Logic: the two numeric rows are only meaningful when their parent toggle
+// is on — hide them otherwise. "Retries per query" needs Exhaustive retry;
+// "Minimum matching mismatches" needs the version-mismatch fallback.
+function syncRetryConditionalRows() {
+    const pairs = [
+        ['retry-exhaustive', 'retries-per-query-row'],
+        ['accept-version-mismatch-fallback', 'version-mismatch-min-count-row'],
+    ];
+    for (const [toggleId, rowId] of pairs) {
+        const toggle = document.getElementById(toggleId);
+        const row = document.getElementById(rowId);
+        if (row) row.style.display = (toggle && toggle.checked) ? '' : 'none';
+    }
+}
+window.syncRetryConditionalRows = syncRetryConditionalRows;
+
 function debouncedAutoSaveSettings() {
     // Ignore changes made while the page is programmatically populating its
     // fields on load — those aren't user edits and must not trigger a full
@@ -417,6 +433,11 @@ function switchSettingsTab(tab) {
     if (tab === 'advanced' && typeof loadDbMaintenanceInfo === 'function') {
         try { loadDbMaintenanceInfo(); } catch (e) { }
     }
+    // First time the Downloads tab is shown, auto-probe source status so the
+    // dots reflect real connection state without a manual "Test all sources".
+    if (tab === 'downloads' && typeof autoTestSourcesOnce === 'function') {
+        autoTestSourcesOnce();
+    }
     // Initialize live log viewer when switching to Logs tab
     if (tab === 'logs') {
         _logViewerInit();
@@ -659,6 +680,126 @@ const ALBUM_LEVEL_HYBRID_SOURCES = new Set(['soulseek', 'torrent', 'usenet']);
 let _hybridSourceOrder = ['soulseek', 'youtube'];
 let _hybridSourceEnabled = { soulseek: true, youtube: true, tidal: false, qobuz: false, hifi: false, deezer_dl: false, amazon: false, lidarr: false, soundcloud: false, torrent: false, usenet: false };
 let _hybridVisualOrder = null; // Full visual order including disabled sources
+// In hybrid mode, only one source's config panel is shown at a time (clicked
+// open from its row), so the long per-source config blocks don't all stack up.
+let _expandedHybridSource = null;
+
+function toggleHybridSourceConfig(srcId) {
+    _expandedHybridSource = (_expandedHybridSource === srcId) ? null : srcId;
+    buildHybridSourceList();
+    updateDownloadSourceUI();
+    // Bring the freshly opened config panel into view.
+    if (_expandedHybridSource) {
+        const map = {
+            soulseek: 'soulseek-settings-container', youtube: 'youtube-settings-container',
+            tidal: 'tidal-download-settings-container', qobuz: 'qobuz-settings-container',
+            hifi: 'hifi-download-settings-container', deezer_dl: 'deezer-download-settings-container',
+            amazon: 'amazon-download-settings-container', lidarr: 'lidarr-download-settings-container',
+            soundcloud: 'soundcloud-download-settings-container', torrent: 'prowlarr-source-redirect',
+            usenet: 'prowlarr-source-redirect',
+        };
+        const el = document.getElementById(map[_expandedHybridSource]);
+        if (el) setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 60);
+    }
+}
+
+// ── Per-source live connection status (shown as a dot in the hybrid list and
+// driven by the "Test all sources" button). srcId -> 'unknown'|'testing'|'ok'|'fail'|'na'
+let _hybridSourceStatus = {};
+
+async function _ssJson(url, opts) {
+    const r = await fetch(url, opts);
+    return await r.json();
+}
+function _ssTestConn(service) {
+    return _ssJson(API.testConnection || '/api/test-connection', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ service })
+    }).then(j => !!j.success);
+}
+// Each probe returns a boolean (connected/ok). Endpoints mirror the per-source
+// "Test Connection" buttons so the results match what those buttons would show.
+const HYBRID_SOURCE_PROBE = {
+    soulseek:   () => _ssTestConn('soulseek'),
+    tidal:      () => _ssTestConn('tidal'),
+    qobuz:      () => _ssJson('/api/qobuz/auth/status').then(j => j.authenticated === true),
+    hifi:       () => _ssJson('/api/hifi/status').then(j => j.available === true),
+    deezer_dl:  () => _ssJson('/api/deezer-download/test').then(j => j.success === true),
+    amazon:     () => _ssJson('/api/amazon/test-connection').then(j => j.connected === true),
+    lidarr:     () => _ssTestConn('lidarr'),
+    soundcloud: () => _ssJson('/api/soundcloud/status').then(j => j.available === true && j.reachable === true),
+    torrent:    () => _ssTestConn('torrent_client'),
+    usenet:     () => _ssTestConn('usenet_client'),
+    youtube:    () => Promise.resolve(true),  // no auth required
+};
+// Configured metadata / server connections that support a generic test.
+const CONNECTION_TEST_SERVICES = ['spotify', 'server', 'tidal', 'qobuz', 'lastfm', 'genius', 'listenbrainz', 'acoustid', 'discogs'];
+
+async function testAllSources(opts = {}) {
+    const silent = opts.silent === true;          // no toast / no connection sweep (used for auto-run on load)
+    const btn = document.getElementById('test-all-sources-btn');
+    if (btn && !silent) { btn.disabled = true; btn.dataset._label = btn.textContent; btn.textContent = 'Testing…'; }
+
+    // Which download sources to test: the enabled hybrid sources, or the single
+    // selected source in non-hybrid mode.
+    const mode = document.getElementById('download-source-mode')?.value;
+    const sources = new Set();
+    if (mode === 'hybrid') {
+        (typeof getHybridOrder === 'function' ? getHybridOrder() : []).forEach(s => sources.add(s));
+    } else if (mode) {
+        sources.add(mode);
+    }
+    if (sources.size === 0) sources.add('soulseek');
+
+    // Torrent/Usenet downloads go through Prowlarr — its connection must be
+    // established first or those source tests fail. Probe Prowlarr up front.
+    if (sources.has('torrent') || sources.has('usenet')) {
+        try { await _ssTestConn('prowlarr'); } catch (e) { /* surfaced via the per-source test below */ }
+    }
+
+    for (const id of sources) _hybridSourceStatus[id] = 'testing';
+    buildHybridSourceList();
+
+    let ok = 0, fail = 0;
+    for (const id of sources) {
+        const probe = HYBRID_SOURCE_PROBE[id];
+        if (!probe) { _hybridSourceStatus[id] = 'na'; continue; }
+        try { const good = await probe(); _hybridSourceStatus[id] = good ? 'ok' : 'fail'; good ? ok++ : fail++; }
+        catch (e) { _hybridSourceStatus[id] = 'fail'; fail++; }
+        buildHybridSourceList();
+    }
+
+    // Also test the metadata / server connections the user has configured
+    // (skipped on the silent auto-run to keep page load light).
+    let connOk = 0, connFail = 0;
+    if (!silent) {
+        try {
+            const cfg = await _ssJson('/api/settings/config-status');
+            for (const svc of CONNECTION_TEST_SERVICES) {
+                const configured = svc === 'server' ? true : (cfg && cfg[svc] && cfg[svc].configured);
+                if (!configured) continue;
+                try { const good = await _ssTestConn(svc); good ? connOk++ : connFail++; } catch (e) { connFail++; }
+            }
+        } catch (e) { /* config-status unavailable — skip connection sweep */ }
+    }
+
+    if (btn && !silent) { btn.disabled = false; btn.textContent = btn.dataset._label || 'Test all sources'; }
+    if (!silent) {
+        const parts = [`sources ${ok}✓${fail ? ' / ' + fail + '✗' : ''}`];
+        if (connOk || connFail) parts.push(`connections ${connOk}✓${connFail ? ' / ' + connFail + '✗' : ''}`);
+        showToast('Tested ' + parts.join(', '), (fail || connFail) ? 'error' : 'success');
+    }
+}
+window.testAllSources = testAllSources;
+
+// Auto-populate the source status dots once after the page settles, so they
+// reflect real state after a restart without the user having to click Test.
+let _sourcesAutoTested = false;
+function autoTestSourcesOnce() {
+    if (_sourcesAutoTested) return;
+    _sourcesAutoTested = true;
+    setTimeout(() => { try { testAllSources({ silent: true }); } catch (e) { } }, 1200);
+}
 
 function buildHybridSourceList() {
     const container = document.getElementById('hybrid-source-list');
@@ -689,11 +830,16 @@ function buildHybridSourceList() {
         const sourceLevelBadge = `<span class="hybrid-source-badge hybrid-source-badge-${sourceLevelClass}" title="${sourceLevelTitle}">${sourceLevel}</span>`;
 
         const item = document.createElement('div');
-        item.className = `hybrid-source-item${enabled ? '' : ' disabled'}`;
+        const isExpanded = enabled && _expandedHybridSource === srcId;
+        item.className = `hybrid-source-item${enabled ? '' : ' disabled'}${isExpanded ? ' config-open' : ''}`;
         item.draggable = true;
         item.dataset.sourceId = srcId;
 
+        // The name + a config chevron open this source's settings panel inline
+        // (only one at a time), so the long config blocks don't all stack up.
+        const clickConfig = enabled ? `onclick="toggleHybridSourceConfig('${srcId}')"` : '';
         item.innerHTML = `
+            <span class="hybrid-source-handle" title="Drag to reorder">⠿</span>
             <span class="hybrid-source-arrows">
                 <button class="hybrid-arrow-btn" onclick="moveHybridSource('${srcId}', -1)" title="Move up">▲</button>
                 <button class="hybrid-arrow-btn" onclick="moveHybridSource('${srcId}', 1)" title="Move down">▼</button>
@@ -702,9 +848,11 @@ function buildHybridSourceList() {
                 ? `<img class="hybrid-source-icon" src="${src.icon}" alt="${src.name}" onerror="this.outerHTML='<span class=\\'hybrid-source-icon emoji-icon\\'>${src.emoji}</span>'">`
                 : `<span class="hybrid-source-icon emoji-icon">${src.emoji}</span>`
             }
-            <span class="hybrid-source-name">${src.name}</span>
+            <span class="hybrid-source-name" ${clickConfig} style="${enabled ? 'cursor:pointer;' : ''}">${src.name}</span>
             ${sourceLevelBadge}
             <span class="hybrid-source-priority">${priorityNum}</span>
+            <span class="hybrid-source-status hss-${_hybridSourceStatus[srcId] || 'unknown'}" title="${({ unknown: 'Not tested yet', testing: 'Testing…', ok: 'Connected', fail: 'Connection failed', na: 'No connection test for this source' })[_hybridSourceStatus[srcId] || 'unknown']}"></span>
+            ${enabled ? `<button class="hybrid-source-config-btn" ${clickConfig} title="Configure ${src.name}">⚙</button>` : ''}
             <label class="hybrid-source-toggle">
                 <input type="checkbox" ${enabled ? 'checked' : ''} onchange="toggleHybridSource('${srcId}', this.checked)">
                 <span class="toggle-track"></span>
@@ -718,10 +866,15 @@ function buildHybridSourceList() {
             e.dataTransfer.setData('text/plain', srcId);
             item.classList.add('dragging');
         });
-        item.addEventListener('dragend', () => item.classList.remove('dragging'));
-        item.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; });
+        item.addEventListener('dragend', () => {
+            item.classList.remove('dragging');
+            container.querySelectorAll('.hybrid-source-item').forEach(el => el.classList.remove('drag-over'));
+        });
+        item.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; item.classList.add('drag-over'); });
+        item.addEventListener('dragleave', () => item.classList.remove('drag-over'));
         item.addEventListener('drop', (e) => {
             e.preventDefault();
+            item.classList.remove('drag-over');
             const draggedId = e.dataTransfer.getData('text/plain');
             if (draggedId && draggedId !== srcId) _reorderHybridSource(draggedId, srcId);
         });
@@ -768,6 +921,8 @@ function _reorderHybridSource(draggedId, targetId) {
 
 function toggleHybridSource(srcId, enabled) {
     _hybridSourceEnabled[srcId] = enabled;
+    // If the source we just disabled had its config panel open, close it.
+    if (!enabled && _expandedHybridSource === srcId) _expandedHybridSource = null;
     // Rebuild enabled order from visual order so priority matches position
     if (_hybridVisualOrder) {
         _hybridSourceOrder = _hybridVisualOrder.filter(id => _hybridSourceEnabled[id] !== false);
@@ -1269,6 +1424,7 @@ async function loadSettingsData() {
         document.getElementById('retries-per-query').value = settings.post_processing?.retries_per_query ?? 5;
         document.getElementById('accept-version-mismatch-fallback').checked = settings.post_processing?.accept_version_mismatch_fallback === true;
         document.getElementById('version-mismatch-min-count').value = settings.post_processing?.version_mismatch_min_count ?? 2;
+        if (typeof syncRetryConditionalRows === 'function') syncRetryConditionalRows();
         // Load service master toggles
         document.getElementById('embed-spotify').checked = settings.spotify?.embed_tags !== false;
         document.getElementById('embed-itunes').checked = settings.itunes?.embed_tags !== false;
@@ -1861,21 +2017,43 @@ function updateDownloadSourceUI() {
         activeSources.add(mode);
     }
 
-    soulseekContainer.style.display = activeSources.has('soulseek') ? 'block' : 'none';
-    tidalContainer.style.display = activeSources.has('tidal') ? 'block' : 'none';
-    qobuzContainer.style.display = activeSources.has('qobuz') ? 'block' : 'none';
-    youtubeContainer.style.display = activeSources.has('youtube') ? 'block' : 'none';
-    hifiContainer.style.display = activeSources.has('hifi') ? 'block' : 'none';
-    if (deezerDlContainer) deezerDlContainer.style.display = activeSources.has('deezer_dl') ? 'block' : 'none';
-    if (amazonContainer) amazonContainer.style.display = activeSources.has('amazon') ? 'block' : 'none';
-    if (lidarrContainer) lidarrContainer.style.display = activeSources.has('lidarr') ? 'block' : 'none';
-    if (soundcloudContainer) soundcloudContainer.style.display = activeSources.has('soundcloud') ? 'block' : 'none';
+    // In single-source mode the one config block is shown directly. In hybrid
+    // mode there can be many active sources, so we only reveal the one the user
+    // clicked open in the priority list (accordion-style) — no endless stack.
+    const isHybrid = mode === 'hybrid';
+    const showCfg = (src) => activeSources.has(src) && (!isHybrid || _expandedHybridSource === src);
+
+    soulseekContainer.style.display = showCfg('soulseek') ? 'block' : 'none';
+    tidalContainer.style.display = showCfg('tidal') ? 'block' : 'none';
+    qobuzContainer.style.display = showCfg('qobuz') ? 'block' : 'none';
+    youtubeContainer.style.display = showCfg('youtube') ? 'block' : 'none';
+    hifiContainer.style.display = showCfg('hifi') ? 'block' : 'none';
+    if (deezerDlContainer) deezerDlContainer.style.display = showCfg('deezer_dl') ? 'block' : 'none';
+    if (amazonContainer) amazonContainer.style.display = showCfg('amazon') ? 'block' : 'none';
+    if (lidarrContainer) lidarrContainer.style.display = showCfg('lidarr') ? 'block' : 'none';
+    if (soundcloudContainer) soundcloudContainer.style.display = showCfg('soundcloud') ? 'block' : 'none';
     const prowlarrRedirect = document.getElementById('prowlarr-source-redirect');
     if (prowlarrRedirect) {
-        const showProwlarr = activeSources.has('torrent') || activeSources.has('usenet');
+        const showProwlarr = showCfg('torrent') || showCfg('usenet');
         prowlarrRedirect.style.display = showProwlarr ? 'block' : 'none';
     }
 
+    // Indexers & Downloaders section: only relevant when a torrent or usenet
+    // source is actually selected. Hide the whole intro + Prowlarr/Torrent/Usenet
+    // tiles otherwise (Soulseek/HiFi-only users never see them). The two client
+    // tiles are gated individually on their own source. Selection-based (not the
+    // hybrid expand state) — the tiles are full config sections, not accordion
+    // panels. Tab-gated so it never leaks onto another tab.
+    const onDownloadsTab = document.querySelector('.stg-tab.active')?.dataset.tab === 'downloads';
+    const torrentActive = activeSources.has('torrent');
+    const usenetActive = activeSources.has('usenet');
+    const indSection = document.getElementById('indexers-downloaders-section');
+    if (indSection) indSection.style.display = (onDownloadsTab && (torrentActive || usenetActive)) ? '' : 'none';
+    const torrentTile = document.getElementById('torrent-tile');
+    if (torrentTile) torrentTile.style.display = torrentActive ? '' : 'none';
+    const usenetTile = document.getElementById('usenet-tile');
+    if (usenetTile) usenetTile.style.display = usenetActive ? '' : 'none';
+
     // Quality profile is now a GLOBAL system — the same ranked-target list
     // drives every source (Soulseek, Tidal, Qobuz, HiFi, Deezer, …), so it is
     // no longer Soulseek-gated. Show the whole collapsible tile whenever the
@@ -1884,23 +2062,25 @@ function updateDownloadSourceUI() {
     const qualityProfileTile = document.getElementById('quality-profile-tile');
     if (qualityProfileTile) {
         const activeTab = document.querySelector('.stg-tab.active');
-        const onDownloadsTab = activeTab && activeTab.dataset.tab === 'downloads';
-        qualityProfileTile.style.display = onDownloadsTab ? '' : 'none';
+        const onQualityTab = activeTab && activeTab.dataset.tab === 'quality';
+        qualityProfileTile.style.display = onQualityTab ? '' : 'none';
     }
 
-    if (activeSources.has('tidal')) {
+    // Only auto-probe a source's live status when its config panel is visible
+    // (always in single-source mode; only the opened one in hybrid mode).
+    if (showCfg('tidal')) {
         checkTidalDownloadAuthStatus();
     }
-    if (activeSources.has('qobuz')) {
+    if (showCfg('qobuz')) {
         checkQobuzAuthStatus();
     }
-    if (activeSources.has('hifi')) {
+    if (showCfg('hifi')) {
         testHiFiConnection();
     }
-    if (activeSources.has('amazon')) {
+    if (showCfg('amazon')) {
         testAmazonConnection();
     }
-    if (activeSources.has('soundcloud')) {
+    if (showCfg('soundcloud')) {
         testSoundcloudConnection();
     }
 }
@@ -2021,12 +2201,30 @@ function onSearchModeChange() {
 // body is the immediate next element or sits after a control (e.g. a <select>),
 // and regardless of any wrapping container.
 function toggleSettingHelp(iconEl) {
+    // Locate the help body to toggle. Search order:
+    //  1) the next .setting-help-body sibling after the icon's row (icon + body
+    //     both inside the same .form-group / .setting-row),
+    //  2) the element right after the enclosing .form-group (help wall that sits
+    //     as a sibling just below the group — the common always-visible case).
     const row = iconEl.closest('.setting-row') || iconEl;
     let el = row.nextElementSibling;
     while (el && !el.classList.contains('setting-help-body')) {
         el = el.nextElementSibling;
     }
-    if (el) el.hidden = !el.hidden;
+    if (!el) {
+        const fg = iconEl.closest('.form-group');
+        let sib = fg ? fg.nextElementSibling : null;
+        // Only accept an immediately-following help body — never reach across
+        // into the next setting/group.
+        if (sib && sib.classList.contains('setting-help-body')) el = sib;
+    }
+    if (el) {
+        el.hidden = !el.hidden;
+        // Reflect open state on the icon itself (filled badge) so it's clear
+        // which help panel is currently revealed.
+        const icon = iconEl.classList.contains('info-icon') ? iconEl : row.querySelector('.info-icon');
+        if (icon) icon.classList.toggle('open', !el.hidden);
+    }
 }
 
 function renderRankedTargets() {
diff --git a/webui/static/style.css b/webui/static/style.css
index 1cfc2a35..12ec557a 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -3269,10 +3269,14 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 
 .settings-section-body {
     transition: all 0.2s ease;
+    /* Breathing room before the next tile header so an expanded tile's last
+       control (e.g. "+ Add Path") never sits flush against the next section. */
+    margin-bottom: 18px;
 }
 
 .settings-section-body.collapsed {
     display: none;
+    margin-bottom: 0;
 }
 
 .settings-group {
@@ -3392,16 +3396,16 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 .ind-hero-warning {
     margin-top: 14px;
     padding: 12px 14px;
-    background: rgba(255, 165, 0, 0.06);
-    border: 1px solid rgba(255, 165, 0, 0.2);
+    background: rgba(255, 255, 255, 0.025);
+    border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 10px;
 }
 
 .ind-hero-warning-title {
     font-size: 12px;
-    font-weight: 700;
-    color: #ffb155;
-    letter-spacing: 0.4px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.6);
+    letter-spacing: 0.3px;
     margin-bottom: 6px;
 }
 
@@ -21800,8 +21804,13 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 8px;
     height: 520px;
+    width: 100%;
+    box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
+    /* Always reserve the scrollbar gutter so switching between a long log
+       (scrollbar present) and a short one (absent) never shifts the width. */
+    scrollbar-gutter: stable;
     padding: 12px;
     font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
     font-size: 12px;
@@ -55251,12 +55260,63 @@ tr.tag-diff-same {
 /* Columns become single centered column */
 #settings-page .settings-columns {
     flex-direction: column;
-    max-width: 760px;
+    max-width: 920px;
     width: 100%;
     gap: 0;
     margin: 0 auto;
     margin-bottom: 0;
 }
+/* The Logs tab uses the full available width — the log terminal benefits from
+   the extra horizontal space (other tabs stay at the readable 920px). Matches
+   only while the logs group is the visible one (switchSettingsTab clears its
+   inline display when active, sets display:none otherwise). */
+#settings-page .settings-columns:has(> .settings-group[data-stg="logs"]:not([style*="none"])) {
+    max-width: 100%;
+}
+
+/* ── Compact settings header — single row, no wasted vertical space ── */
+#settings-page .dashboard-header.settings-header-compact {
+    flex-direction: row;
+    align-items: center;
+    padding: 12px 24px;
+    margin-bottom: 16px;
+    position: relative;
+}
+/* Centre the Save button in the header regardless of the title width. */
+#settings-page .settings-header-compact .header-actions {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+}
+#settings-page .settings-header-compact .header-title {
+    font-size: 1.15em;
+    margin: 0;
+}
+#settings-page .settings-header-compact .page-header-icon {
+    width: 26px;
+    height: 26px;
+}
+#settings-page .settings-header-compact .header-actions {
+    margin-left: auto;
+}
+#settings-page .settings-header-compact .header-actions .save-button {
+    padding: 9px 22px;
+    border-radius: 10px;
+    font-size: 0.9em;
+    font-weight: 600;
+}
+
+/* Checkbox/label rows that carry an ⓘ icon span the full width so the help
+   body wraps cleanly beneath them. */
+#settings-page .form-group > .setting-row {
+    flex: 1 1 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
 
 #settings-page .settings-left-column,
 #settings-page .settings-right-column,
@@ -55321,12 +55381,14 @@ tr.tag-diff-same {
 #settings-page .form-group {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    /* Row grammar: label grows to hold the left, control + ⓘ group at the right.
+       (Was justify-content:space-between, which stranded selects in mid-row.) */
+    justify-content: flex-start;
     flex-wrap: wrap;
-    gap: 8px 20px;
-    padding: 14px 8px !important;
+    gap: 8px 16px;
+    padding: 12px 8px !important;
     margin: 0 !important;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
     border-radius: 8px;
     transition: background 0.2s;
 }
@@ -55339,9 +55401,17 @@ tr.tag-diff-same {
     font-size: 0.9em;
     color: rgba(255, 255, 255, 0.8);
     font-weight: 400;
-    white-space: nowrap;
     margin: 0;
-    flex-shrink: 0;
+    /* Grow to fill the left so the control aligns to a consistent right edge. */
+    flex: 1 1 auto;
+    min-width: 0;
+}
+/* The growing label pushes the control to a consistent right edge; the ⓘ rides
+   immediately after the control as a pair so it can never shove it around. The
+   help callout (flex-basis:100%) wraps to its own line below. */
+#settings-page .form-group > select,
+#settings-page .form-group > .form-select {
+    flex: 0 0 auto;
 }
 
 #settings-page .form-group > input[type="text"],
@@ -55579,6 +55649,15 @@ tr.tag-diff-same {
     color: #fff;
 }
 #settings-page .checkbox-label:last-child { border-bottom: none; }
+/* When a checkbox-label is the control of a .form-group row, the row separator
+   is the form-group's own border-bottom — drop the label's own border/box so
+   every row (checkbox or input/select) has ONE consistent full-width divider. */
+#settings-page .form-group > .checkbox-label {
+    border-bottom: 0 !important;
+    border-radius: 0 !important;
+    padding: 4px 0 !important;
+    background: transparent !important;
+}
 
 /* ── Tag service groups ── */
 #settings-page .tag-service-group {
@@ -55663,6 +55742,188 @@ tr.tag-diff-same {
     line-height: 1.5;
     margin: 0;
 }
+/* Collapsible ⓘ help bodies stay hidden until toggled — wins over the
+   .setting-help-text/.settings-hint display rules that would otherwise show them. */
+#settings-page .setting-help-body[hidden],
+.setting-help-body[hidden] {
+    display: none !important;
+}
+
+/* ════════════════════════════════════════════════════════════════
+   Expanded tile = ONE connected card. The header rounds only its top
+   and joins seamlessly to its body, which carries the side + bottom
+   frame; inner groups drop their own card frame so the expanded
+   settings clearly belong to the tile (no box-in-a-box, no detached feel).
+   ════════════════════════════════════════════════════════════════ */
+#settings-page .settings-section-header:not(.collapsed) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-bottom: 0;
+    /* Accent-tinted frame so the OPEN card clearly stands out from the grey
+       page instead of grey-on-grey. */
+    background: rgba(var(--accent-rgb), 0.07);
+    border-color: rgba(var(--accent-rgb), 0.30);
+    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
+}
+#settings-page .settings-section-body:not(.collapsed) {
+    border: 1px solid rgba(var(--accent-rgb), 0.30);
+    border-top: none;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    /* Dark neutral body (accent stays on the border + header) so the lighter
+       inner sub-cards stand out clearly instead of washing out on a tint.
+       Symmetric padding so the inner sub-cards sit an equal distance from the
+       outer frame on every side. */
+    background: rgba(0, 0, 0, 0.22);
+    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
+    padding: 14px;
+}
+/* Inner groups inside an expanded tile: no own frame/shadow/accent bar —
+   they're sub-sections of the one tile card, separated by their h3 labels. */
+/* ── Sub-cards: each sub-section inside an OPEN tile sits in its own framed
+   card that stands out clearly on the accent-tinted tile background. Covers
+   inner settings-groups (Folder Paths, File Organization, Retry rows, …) and
+   the Security method cards. ── */
+#settings-page .settings-section-body:not(.collapsed) > .settings-group,
+#settings-page .settings-section-body:not(.collapsed) .security-subgroup,
+#settings-page .settings-section-body:not(.collapsed) .settings-subcard,
+#settings-page .settings-section-body:not(.collapsed) [id$="-settings-container"]:not(#hybrid-settings-container) {
+    background: rgba(255, 255, 255, 0.045) !important;
+    border: 1px solid rgba(255, 255, 255, 0.13) !important;
+    border-radius: 10px !important;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
+    padding: 6px 16px 12px !important;
+    margin: 0 0 14px !important;
+}
+#settings-page .settings-section-body:not(.collapsed) > .settings-group:last-child,
+#settings-page .settings-section-body:not(.collapsed) .security-subgroup:last-child {
+    margin-bottom: 0 !important;
+}
+#settings-page .settings-section-body:not(.collapsed) > .settings-group::before { display: none; }
+/* Sub-card title: clean header inside its frame (no accent bar / huge padding). */
+#settings-page .settings-section-body:not(.collapsed) > .settings-group > h3 {
+    padding: 10px 0 10px;
+    border-left: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+/* The Security wrapper group is a transparent passthrough — its .security-subgroup
+   children are the actual sub-cards (avoids a card-in-a-card). */
+#settings-page .settings-section-body:not(.collapsed) > .settings-group.security-wrapper {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 4px 14px 6px !important;
+    margin: 0 !important;
+}
+/* Mid-level framed containers inside a tile sub-card get flattened so there are
+   never 3 stacked frames (tile → sub-card → container). The innermost
+   interactive items (draggable hybrid rows, tag-embed accordions) keep theirs. */
+#settings-page .settings-section-body:not(.collapsed) .api-service-frame,
+#settings-page .settings-section-body:not(.collapsed) .post-processing-section,
+#settings-page .settings-section-body:not(.collapsed) #hybrid-settings-container {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+/* The Source Settings group is a transparent passthrough: the basic source/
+   stream/concurrency rows + the hybrid drag list sit flat in the tile, and each
+   per-source config pops open in ITS OWN frame directly inside the tile
+   (tile → config card, never a triple frame). */
+#settings-page .settings-section-body:not(.collapsed) > .settings-group.source-settings-wrapper {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 4px 14px 6px !important;
+    margin: 0 !important;
+}
+
+/* ════════════════════════════════════════════════════════════════
+   Collapsible info panel (ⓘ help) — one consistent pattern.
+   The ⓘ is a small circular badge flush at the end of its row; the
+   help body, when revealed, is an indented accent-bordered panel that
+   spans the full width below the control. Rows never reflow sideways.
+   ════════════════════════════════════════════════════════════════ */
+#settings-page .info-icon {
+    /* Single clean circle with a centred "i" (was the ⓘ glyph, which carried
+       its own inner circle → a double-circle that read as off-centre). */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid rgba(var(--accent-rgb), 0.45);
+    background: transparent;
+    color: rgba(var(--accent-rgb), 0.9);
+    font-family: Georgia, 'Times New Roman', serif;
+    font-style: italic;
+    font-weight: 700;
+    font-size: 11px;
+    line-height: 1;
+    text-align: center;
+    margin-left: 6px;
+    flex: 0 0 auto;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+#settings-page .info-icon:hover {
+    background: rgba(var(--accent-rgb), 0.16);
+    border-color: rgba(var(--accent-rgb), 0.85);
+    color: rgba(var(--accent-rgb), 1);
+}
+#settings-page .info-icon.open {
+    background: rgba(var(--accent-rgb), 0.9);
+    border-color: rgba(var(--accent-rgb), 0.9);
+    color: #0b0f14;
+}
+/* The revealed panel — indented, readable, clearly a callout (not a
+   detached muted line). Higher source-order than the .settings-hint /
+   .setting-help-text colour rules above, so it wins on equal specificity. */
+#settings-page .setting-help-body {
+    display: block;
+    width: 100%;
+    flex-basis: 100%;
+    box-sizing: border-box;
+    margin: 8px 0 4px;
+    padding: 10px 12px;
+    background: rgba(var(--accent-rgb), 0.06);
+    border-left: 2px solid rgba(var(--accent-rgb), 0.5);
+    border-radius: 0 6px 6px 0;
+    font-size: 0.8em;
+    line-height: 1.55;
+    color: rgba(255, 255, 255, 0.6);
+    letter-spacing: 0.01em;
+}
+#settings-page .setting-help-body strong { color: rgba(255, 255, 255, 0.82); font-weight: 600; }
+#settings-page .setting-help-body em { color: rgba(var(--accent-rgb), 0.9); font-style: normal; }
+#settings-page .setting-help-body code {
+    font-family: monospace;
+    background: rgba(255, 255, 255, 0.06);
+    padding: 1px 5px;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.75);
+}
+/* A checkbox-label inside a .setting-row must drop its row-divider border and
+   box padding — otherwise it draws a partial underline only under the label
+   text and sits in a padded box, misaligned with the ⓘ. The label fills the
+   row so the icon is pushed flush to the right edge. (Replaces the old
+   per-element inline style="border:0;padding:0;flex:1" hacks.) */
+#settings-page .setting-row > .checkbox-label {
+    flex: 1 1 auto;
+    border-bottom: 0 !important;
+    border-radius: 0 !important;
+    padding: 4px 0 !important;
+}
+#settings-page .setting-row > .checkbox-label:hover { background: transparent; }
+/* Icon always sits at the right edge of its row, vertically centred. */
+#settings-page .setting-row > .info-icon {
+    margin-left: auto;
+    align-self: center;
+}
+
 /* Standalone help text (not inside a form-group) — add separator */
 #settings-page .settings-group > .setting-help-text {
     padding: 6px 0 14px;
@@ -55682,6 +55943,9 @@ tr.tag-diff-same {
 #settings-page #qobuz-settings-container,
 #settings-page #hifi-download-settings-container,
 #settings-page #deezer-download-settings-container,
+#settings-page #amazon-download-settings-container,
+#settings-page #lidarr-download-settings-container,
+#settings-page #soundcloud-download-settings-container,
 #settings-page #youtube-settings-container,
 #settings-page #hybrid-settings-container {
     background: rgba(255, 255, 255, 0.02);
@@ -55696,6 +55960,9 @@ tr.tag-diff-same {
 #settings-page #qobuz-settings-container:hover,
 #settings-page #hifi-download-settings-container:hover,
 #settings-page #deezer-download-settings-container:hover,
+#settings-page #amazon-download-settings-container:hover,
+#settings-page #lidarr-download-settings-container:hover,
+#settings-page #soundcloud-download-settings-container:hover,
 #settings-page #youtube-settings-container:hover,
 #settings-page #hybrid-settings-container:hover {
     border-color: rgba(255, 255, 255, 0.1);
@@ -55779,6 +56046,36 @@ tr.tag-diff-same {
     color: rgba(255, 255, 255, 0.85);
     font-weight: 500;
 }
+.hybrid-source-name[onclick]:hover {
+    color: rgb(var(--accent-light-rgb, 29, 185, 84));
+}
+/* ⚙ Configure button on each enabled source row */
+.hybrid-source-config-btn {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.3);
+    font-size: 0.95em;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 6px;
+    line-height: 1;
+    transition: all 0.15s;
+}
+.hybrid-source-config-btn:hover {
+    color: rgb(var(--accent-light-rgb, 29, 185, 84));
+    background: rgba(255, 255, 255, 0.06);
+    transform: rotate(45deg);
+}
+/* Row whose config panel is currently open */
+.hybrid-source-item.config-open {
+    border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.45);
+    background: rgba(var(--accent-rgb, 29, 185, 84), 0.06);
+}
+.hybrid-source-item.config-open .hybrid-source-config-btn {
+    color: rgb(var(--accent-light-rgb, 29, 185, 84));
+    transform: rotate(45deg);
+}
 .hybrid-source-badge {
     flex-shrink: 0;
     font-size: 0.68em;
@@ -55803,6 +56100,35 @@ tr.tag-diff-same {
     min-width: 18px;
     text-align: center;
 }
+/* Drag handle + drop-target highlight (mirrors the Quality ranked-target list). */
+.hybrid-source-handle {
+    cursor: grab;
+    color: rgba(255, 255, 255, 0.3);
+    font-size: 14px;
+    line-height: 1;
+    padding: 0 2px;
+    user-select: none;
+    flex-shrink: 0;
+}
+.hybrid-source-handle:active { cursor: grabbing; }
+.hybrid-source-item.drag-over {
+    border-color: rgba(var(--accent-rgb), 0.7) !important;
+    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4);
+}
+/* Per-source live connection status dot (set by "Test all sources"). */
+.hybrid-source-status {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.18);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+.hybrid-source-status.hss-ok     { background: #34d27b; box-shadow: 0 0 6px rgba(52, 210, 123, 0.6); }
+.hybrid-source-status.hss-fail   { background: #ff5f57; box-shadow: 0 0 6px rgba(255, 95, 87, 0.5); }
+.hybrid-source-status.hss-na     { background: rgba(255, 255, 255, 0.12); }
+.hybrid-source-status.hss-testing { background: #f0b429; animation: hssPulse 0.9s ease-in-out infinite; }
+@keyframes hssPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
 .hybrid-source-toggle {
     position: relative;
     width: 36px;

From 1da677ee2d4d2b7205e9cf4328dcdb403d5e6a29 Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Sun, 28 Jun 2026 23:45:49 +0200
Subject: [PATCH 06/11] Keep settings logs viewer full width

---
 webui/static/style.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/webui/static/style.css b/webui/static/style.css
index 395fe0f0..e7d8504d 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -55442,6 +55442,23 @@ tr.tag-diff-same {
     max-width: 100%;
 }
 
+#settings-page .settings-group[data-stg="logs"] {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+}
+
+#settings-page .settings-group[data-stg="logs"] .log-viewer-header,
+#settings-page .settings-group[data-stg="logs"] .log-viewer-terminal,
+#settings-page .settings-group[data-stg="logs"] .log-viewer-status {
+    width: 100%;
+}
+
+#settings-page .settings-group[data-stg="logs"] .log-viewer-controls,
+#settings-page .settings-group[data-stg="logs"] .log-viewer-actions {
+    min-width: 0;
+}
+
 /* ── Compact settings header — single row, no wasted vertical space ── */
 #settings-page .dashboard-header.settings-header-compact {
     flex-direction: row;

From 8149f35faebde36d275a074953a45fc22906eb6d Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Sun, 28 Jun 2026 23:57:26 +0200
Subject: [PATCH 07/11] Refine settings header layout

---
 webui/index.html       | 25 +++++------
 webui/static/style.css | 94 +++++++++++++++++++++++++++++++-----------
 2 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 19c515dd..20166043 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -3913,21 +3913,22 @@
                     <div class="header-text">
                         <h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
                     </div>
-                    <div class="header-spacer"></div>
-                    <div class="header-actions">
-                        <button class="save-button" id="save-settings">Save Settings</button>
-                    </div>
                 </div>
                 <div class="settings-content">
                     <!-- Category Tab Bar -->
-                    <div class="stg-tabbar">
-                        <button class="stg-tab active" data-tab="connections" onclick="switchSettingsTab('connections')">Connections</button>
-                        <button class="stg-tab" data-tab="downloads" onclick="switchSettingsTab('downloads')">Downloads</button>
-                        <button class="stg-tab" data-tab="quality" onclick="switchSettingsTab('quality')">Quality</button>
-                        <button class="stg-tab" data-tab="library" onclick="switchSettingsTab('library')">Library</button>
-                        <button class="stg-tab" data-tab="appearance" onclick="switchSettingsTab('appearance')">Appearance</button>
-                        <button class="stg-tab" data-tab="advanced" onclick="switchSettingsTab('advanced')">Advanced</button>
-                        <button class="stg-tab" data-tab="logs" onclick="switchSettingsTab('logs')">Logs</button>
+                    <div class="settings-nav-row">
+                        <div class="stg-tabbar">
+                            <button class="stg-tab active" data-tab="connections" onclick="switchSettingsTab('connections')">Connections</button>
+                            <button class="stg-tab" data-tab="downloads" onclick="switchSettingsTab('downloads')">Downloads</button>
+                            <button class="stg-tab" data-tab="quality" onclick="switchSettingsTab('quality')">Quality</button>
+                            <button class="stg-tab" data-tab="library" onclick="switchSettingsTab('library')">Library</button>
+                            <button class="stg-tab" data-tab="appearance" onclick="switchSettingsTab('appearance')">Appearance</button>
+                            <button class="stg-tab" data-tab="advanced" onclick="switchSettingsTab('advanced')">Advanced</button>
+                            <button class="stg-tab" data-tab="logs" onclick="switchSettingsTab('logs')">Logs</button>
+                        </div>
+                        <div class="header-actions">
+                            <button class="save-button" id="save-settings">Save Settings</button>
+                        </div>
                     </div>
                     <!-- Settings Panels -->
                     <div class="settings-columns">
diff --git a/webui/static/style.css b/webui/static/style.css
index e7d8504d..9944341c 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -55420,9 +55420,44 @@ tr.tag-diff-same {
     padding-bottom: 10vh;
 }
 
-/* Tab bar centered */
-#settings-page .stg-tabbar {
+/* Tab bar + save action sit on one control row. */
+#settings-page .settings-nav-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 14px;
+    width: 100%;
+    max-width: 920px;
     margin: 0 auto 28px;
+    padding: 0 2px;
+}
+
+#settings-page .stg-tabbar {
+    display: flex;
+    flex: 0 1 auto;
+    margin: 0;
+    width: fit-content;
+    max-width: 100%;
+    min-width: 0;
+}
+
+#settings-page .settings-nav-row .header-actions {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: auto;
+    margin: 0 0 0 auto;
+    margin-top: 0;
+}
+
+#settings-page .settings-nav-row .save-button {
+    padding: 8px 16px;
+    border-radius: 9px;
+    font-size: 0.84em;
+    font-weight: 600;
+    white-space: nowrap;
 }
 
 /* Columns become single centered column */
@@ -55459,38 +55494,38 @@ tr.tag-diff-same {
     min-width: 0;
 }
 
-/* ── Compact settings header — single row, no wasted vertical space ── */
+/* ── Settings local title — quiet, far-left, no dashboard banner ── */
 #settings-page .dashboard-header.settings-header-compact {
     flex-direction: row;
     align-items: center;
-    padding: 12px 24px;
-    margin-bottom: 16px;
+    width: 100%;
+    min-height: 0;
+    padding: 0;
+    margin: 0 0 12px;
     position: relative;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    overflow: visible;
 }
-/* Centre the Save button in the header regardless of the title width. */
-#settings-page .settings-header-compact .header-actions {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    margin: 0;
+#settings-page .dashboard-header.settings-header-compact::after,
+#settings-page .settings-header-compact .dashboard-header-sweep {
+    display: none;
+}
+#settings-page .settings-header-compact .header-text {
+    min-width: 0;
 }
 #settings-page .settings-header-compact .header-title {
-    font-size: 1.15em;
+    font-size: 1.42em;
     margin: 0;
+    line-height: 1.1;
+    color: rgba(255, 255, 255, 0.88);
 }
 #settings-page .settings-header-compact .page-header-icon {
-    width: 26px;
-    height: 26px;
-}
-#settings-page .settings-header-compact .header-actions {
-    margin-left: auto;
-}
-#settings-page .settings-header-compact .header-actions .save-button {
-    padding: 9px 22px;
-    border-radius: 10px;
-    font-size: 0.9em;
-    font-weight: 600;
+    width: 32px;
+    height: 32px;
+    opacity: 0.86;
 }
 
 /* Checkbox/label rows that carry an ⓘ icon span the full width so the help
@@ -56560,11 +56595,20 @@ tr.tag-diff-same {
 
 /* ── Responsive ── */
 @media (max-width: 768px) {
+    #settings-page .settings-nav-row {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 10px;
+        padding: 0 8px;
+    }
+    #settings-page .settings-nav-row .header-actions {
+        margin-left: auto;
+    }
     /* Tab bar scrolls horizontally */
     #settings-page .stg-tabbar {
         width: 100%;
+        flex: 1 1 100%;
         border-radius: 0;
-        margin-bottom: 16px;
         justify-content: flex-start;
     }
     .stg-tab { padding: 8px 14px; font-size: 0.8em; }

From 1382cb6117214fe16901db25bba8736d0c2c941d Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Mon, 29 Jun 2026 00:01:56 +0200
Subject: [PATCH 08/11] Bootstrap saved appearance effects early

---
 web_server.py        |  6 ++++++
 webui/index.html     |  9 +++++++--
 webui/static/init.js | 20 ++++++++++++++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/web_server.py b/web_server.py
index f965741f..50a9d97f 100644
--- a/web_server.py
+++ b/web_server.py
@@ -363,6 +363,9 @@ def _initial_appearance_context():
     preset = config_manager.get('ui_appearance.accent_preset', '#1db954')
     custom = config_manager.get('ui_appearance.accent_color', '#1db954')
     accent = _valid_hex_color(custom if preset == 'custom' else preset)
+    particles_enabled = config_manager.get('ui_appearance.particles_enabled', False) is True
+    worker_orbs_enabled = config_manager.get('ui_appearance.worker_orbs_enabled', True) is not False
+    reduce_effects = config_manager.get('ui_appearance.reduce_effects', False) is True
     r, g, b = _hex_to_rgb(accent)
     hue, saturation, lightness = _rgb_to_hsl(r, g, b)
     light = _hsl_to_rgb(hue, saturation, min(lightness + 0.16, 0.95))
@@ -372,6 +375,9 @@ def _initial_appearance_context():
         'initial_accent_rgb': f'{r}, {g}, {b}',
         'initial_accent_light_rgb': f'{light[0]}, {light[1]}, {light[2]}',
         'initial_accent_neon_rgb': f'{neon[0]}, {neon[1]}, {neon[2]}',
+        'initial_particles_enabled': particles_enabled,
+        'initial_worker_orbs_enabled': worker_orbs_enabled,
+        'initial_reduce_effects': reduce_effects,
     }
 
 
diff --git a/webui/index.html b/webui/index.html
index 20166043..792ac608 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -20,10 +20,15 @@
             --accent-neon-rgb: {{ initial_accent_neon_rgb }};
         }
     </style>
+    <script>
+        window._particlesEnabled = {{ initial_particles_enabled|tojson }};
+        window._workerOrbsEnabled = {{ initial_worker_orbs_enabled|tojson }};
+        window._reduceEffectsActive = {{ initial_reduce_effects|tojson }};
+    </script>
     {{ vite_assets('head')|safe }}
 </head>
 
-<body>
+<body{% if initial_reduce_effects %} class="reduce-effects"{% endif %}>
     <!-- Setup Wizard Overlay -->
     <div id="setup-wizard-overlay" class="setup-wizard-overlay" style="display: none;">
         <div class="setup-wizard-container">
@@ -354,7 +359,7 @@
         <!-- Main Content Area -->
         <div class="main-content">
             <!-- Global particle canvas for page background animations -->
-            <canvas id="page-particles-canvas"></canvas>
+            <canvas id="page-particles-canvas"{% if not initial_particles_enabled or initial_reduce_effects %} style="display: none;"{% endif %}></canvas>
             <div id="webui-react-root" class="page" data-react-app="router"></div>
 
             <!-- Dashboard Page -->
diff --git a/webui/static/init.js b/webui/static/init.js
index ca73baba..0b49db46 100644
--- a/webui/static/init.js
+++ b/webui/static/init.js
@@ -254,16 +254,28 @@ function applyReduceEffects(enabled) {
         }
     }
 
-    if (localStorage.getItem('soulsync-reduce-effects') === '1') {
+    const reduceEffectsSaved = localStorage.getItem('soulsync-reduce-effects');
+    if (reduceEffectsSaved === '1') {
         document.body.classList.add('reduce-effects');
         window._reduceEffectsActive = true;
+    } else if (reduceEffectsSaved === '0') {
+        document.body.classList.remove('reduce-effects');
+        window._reduceEffectsActive = false;
+    } else if (window._reduceEffectsActive) {
+        document.body.classList.add('reduce-effects');
     }
     const saved = localStorage.getItem('soulsync-accent');
     if (saved) applyAccentColor(saved);
     // Bootstrap particles setting from localStorage — OFF by default (continuous
     // full-page canvas = real GPU cost); only on when the user explicitly enabled it.
     const particlesSaved = localStorage.getItem('soulsync-particles');
-    window._particlesEnabled = (particlesSaved === 'true');
+    if (particlesSaved === 'true') {
+        window._particlesEnabled = true;
+    } else if (particlesSaved === 'false') {
+        window._particlesEnabled = false;
+    } else if (typeof window._particlesEnabled !== 'boolean') {
+        window._particlesEnabled = false;
+    }
     if (!window._particlesEnabled) {
         const canvas = document.getElementById('page-particles-canvas');
         if (canvas) canvas.style.display = 'none';
@@ -272,6 +284,10 @@ function applyReduceEffects(enabled) {
     const workerOrbsSaved = localStorage.getItem('soulsync-worker-orbs');
     if (workerOrbsSaved === 'false') {
         window._workerOrbsEnabled = false;
+    } else if (workerOrbsSaved === 'true') {
+        window._workerOrbsEnabled = true;
+    } else if (typeof window._workerOrbsEnabled !== 'boolean') {
+        window._workerOrbsEnabled = true;
     }
 })();
 

From caee0fc3e2d620a53f2343b73dafeab2d10d6173 Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Mon, 29 Jun 2026 00:19:53 +0200
Subject: [PATCH 09/11] Clarify import quality and AcoustID wording

---
 webui/index.html                            | 26 +++++++++++----------
 webui/src/routes/import/-ui/import-page.tsx |  4 ++--
 webui/static/settings.js                    |  2 +-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 792ac608..e10decb6 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -5190,18 +5190,19 @@
                                     <div class="setting-row">
                                         <label class="checkbox-label">
                                             <input type="checkbox" id="import-quality-filter-enabled" checked>
-                                            Only import tracks that meet your quality profile
+                                            Quality profile check on import
                                         </label>
                                         <span class="info-icon" role="button" tabindex="0" title="What's this?"
                                             onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
                                     <div class="setting-help-body" hidden>
-                                        On by default. SoulSync always probes each downloaded file's real audio quality; this
-                                        toggle decides what to do with the result. <strong>On</strong> — files that don't meet your
-                                        quality profile are quarantined instead of imported (the same gate the download pipeline
-                                        uses; fallback/downsample settings still apply). <strong>Off</strong> — everything is
-                                        imported regardless of quality. Either way, the library <em>Quality Upgrade Scanner</em>
-                                        still flags below-profile tracks so you can act on them later.
+                                        On by default. SoulSync probes each imported file's real audio quality and compares it
+                                        with your Quality Profile. <strong>On</strong> — files that don't meet your profile are
+                                        quarantined instead of imported (fallback/downsample settings still apply).
+                                        <strong>Off</strong> — files are imported regardless of format, bitrate, bit depth, or
+                                        sample rate. This does <strong>not</strong> skip AcoustID; fingerprint verification is a
+                                        separate setting below. Either way, the library <em>Quality Upgrade Scanner</em> still
+                                        flags below-profile tracks so you can act on them later.
                                     </div>
                                 </div>
                                 <div class="form-group">
@@ -5298,17 +5299,18 @@
                                     <div class="setting-row">
                                         <label class="checkbox-label">
                                             <input type="checkbox" id="acoustid-require-verified">
-                                            Only import AcoustID-verified tracks (reject "could not confirm")
+                                            Only allow AcoustID-verified tracks for imports and downloads
                                         </label>
                                         <span class="info-icon" role="button" tabindex="0" title="What's this?"
                                             onclick="toggleSettingHelp(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleSettingHelp(this);}">i</span>
                                     </div>
                                     <div class="setting-help-body" hidden>
-                                        When <strong>on</strong>, a track that AcoustID runs but <em>cannot confirm</em>
+                                        Applies to both <strong>imports</strong> and <strong>downloads</strong>. When
+                                        <strong>on</strong>, a track that AcoustID runs but <em>cannot confirm</em>
                                         (no fingerprint match / cross-script metadata — the ⚠ "unverified" case) is
-                                        <strong>quarantined</strong> instead of imported. Downloads then try the next
-                                        candidate; imports just quarantine (no candidate to retry). Only a clean AcoustID
-                                        <strong>pass</strong> is kept.
+                                        <strong>quarantined</strong> instead of being allowed into the library. Downloads then
+                                        try the next candidate; imports just quarantine (no candidate to retry). Only a clean
+                                        AcoustID <strong>pass</strong> is kept.
                                         <br><br>
                                         ⚠️ <strong>Use with care.</strong> AcoustID "could not confirm" is <em>common</em>
                                         for perfectly good tracks — anything not in its fingerprint database: new/obscure
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index e4204c6c..840c8d5e 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -102,9 +102,9 @@ function ImportOptions() {
         />
         <span
           id="import-quality-filter-label"
-          title="Only import tracks that meet your quality profile; otherwise import everything regardless of quality."
+          title="Checks imported files against your Quality Profile only. Turning this off imports files regardless of format/bitrate/bit depth/sample rate; AcoustID verification is separate and is not skipped."
         >
-          Quality check on import
+          Quality profile check on import
         </span>
       </div>
       <div className={styles.importOption}>
diff --git a/webui/static/settings.js b/webui/static/settings.js
index be5c967b..5b80eb4b 100644
--- a/webui/static/settings.js
+++ b/webui/static/settings.js
@@ -40,7 +40,7 @@ async function copyAddress(address, cryptoName) {
 
 let settingsAutoSaveTimer = null;
 
-// The "Only import AcoustID-verified tracks" toggle lives in Audio Verification
+// The "Only allow AcoustID-verified tracks" toggle lives in Audio Verification
 // and is always shown (its help notes it needs AcoustID enabled), so users can
 // always find it. Kept as a no-op for any existing callers.
 function syncAcoustidRequireVerifiedVisibility() {

From 512ec227bee3692464d90241937179a63eae50cf Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Mon, 29 Jun 2026 00:33:54 +0200
Subject: [PATCH 10/11] Polish security settings controls

---
 webui/static/style.css | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/webui/static/style.css b/webui/static/style.css
index 9944341c..1edfc1d1 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -55650,11 +55650,27 @@ tr.tag-diff-same {
     margin: 0;
     transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
 }
+#settings-page .form-group > textarea {
+    padding: 9px 14px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 10px;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.88em;
+    margin: 0;
+    resize: vertical;
+    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
+}
 #settings-page .form-group > input:hover {
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(255, 255, 255, 0.1);
 }
-#settings-page .form-group > input:focus {
+#settings-page .form-group > textarea:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+#settings-page .form-group > input:focus,
+#settings-page .form-group > textarea:focus {
     border-color: rgba(var(--accent-rgb), 0.4);
     background: rgba(255, 255, 255, 0.06);
     outline: none;
@@ -56019,6 +56035,9 @@ tr.tag-diff-same {
 #settings-page .settings-section-body:not(.collapsed) .security-subgroup:last-child {
     margin-bottom: 0 !important;
 }
+#settings-page .settings-section-body:not(.collapsed) .security-subgroup {
+    padding-top: 14px !important;
+}
 #settings-page .settings-section-body:not(.collapsed) > .settings-group::before { display: none; }
 /* Sub-card title: clean header inside its frame (no accent bar / huge padding). */
 #settings-page .settings-section-body:not(.collapsed) > .settings-group > h3 {

From 33fe92a5259fef0c4976dcdbf8fdb5478fd8823d Mon Sep 17 00:00:00 2001
From: dev <dev@localhost>
Date: Mon, 29 Jun 2026 00:37:01 +0200
Subject: [PATCH 11/11] Enlarge settings page header

---
 webui/static/style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webui/static/style.css b/webui/static/style.css
index 1edfc1d1..fabefe73 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -55517,14 +55517,14 @@ tr.tag-diff-same {
     min-width: 0;
 }
 #settings-page .settings-header-compact .header-title {
-    font-size: 1.42em;
+    font-size: 1.82em;
     margin: 0;
     line-height: 1.1;
     color: rgba(255, 255, 255, 0.88);
 }
 #settings-page .settings-header-compact .page-header-icon {
-    width: 32px;
-    height: 32px;
+    width: 44px;
+    height: 44px;
     opacity: 0.86;
 }