update the UI/UX for settings

src/renderer/App.tsx

@@ -8,13 +8,14 @@ import { useSettingsStore } from './stores/settingsStore'
 import { useAudioStore } from './stores/audioStore'
 import { SCOPE_KINDS } from '../types/scope'
 
-const SETTINGS_EXPAND_HEIGHT = 280
+const DEFAULT_SETTINGS_HEIGHT = 400
 
 export default function App(): JSX.Element {
   const [toolbarVisible, setToolbarVisible] = useState(false)
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [settingsPanelHeight, setSettingsPanelHeight] = useState(0)
+  const [bottomBarHeight, setBottomBarHeight] = useState(0)
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const prevSettingsOpenRef = useRef(false)
   const startupBoundsAppliedRef = useRef(false)
 
   const toggleScope = useSettingsStore((s) => s.toggleScope)
@@ -40,15 +41,15 @@ export default function App(): JSX.Element {
     }
   }, [])
 
-  // Expand/collapse window by a fixed amount when settings toggle — no dynamic tracking
+  const measuredSettingsHeight = settingsPanelHeight > 0 && bottomBarHeight > 0
-  useEffect(() => {
+    ? settingsPanelHeight + bottomBarHeight
-    if (settingsOpen && !prevSettingsOpenRef.current) {
+    : DEFAULT_SETTINGS_HEIGHT
-      window.electronAPI.expandSettings(SETTINGS_EXPAND_HEIGHT)
+
-    } else if (!settingsOpen && prevSettingsOpenRef.current) {
+  const settingsHeight = settingsOpen ? measuredSettingsHeight : 0
-      window.electronAPI.collapseSettings(SETTINGS_EXPAND_HEIGHT)
+
-    }
+  useLayoutEffect(() => {
-    prevSettingsOpenRef.current = settingsOpen
+    window.electronAPI.setSettingsHeight(settingsHeight)
-  }, [settingsOpen])
+  }, [settingsHeight])
 
   const showToolbar = useCallback(() => {
     if (hideTimeoutRef.current) {
@@ -137,9 +138,9 @@ export default function App(): JSX.Element {
       <ScopePopoutBridge />
 
       {settingsOpen && (
-        <div className="prism-settings-region" style={{ height: SETTINGS_EXPAND_HEIGHT }}>
+        <div className="prism-settings-region" style={{ height: settingsHeight }}>
-          <SettingsPanel />
+          <SettingsPanel onHeightChange={setSettingsPanelHeight} />
-          <BottomBar onClose={handleCloseSettings} />
+          <BottomBar onClose={handleCloseSettings} onHeightChange={setBottomBarHeight} />
         </div>
       )}
     </div>

src/renderer/components/BottomBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, type CSSProperties, type JSX } from 'react'
+import { useEffect, useLayoutEffect, useRef, type CSSProperties, type JSX } from 'react'
 import { useAudioStore } from '../stores/audioStore'
 import { useSettingsStore } from '../stores/settingsStore'
 import { useThemeStore, PRESETS, PRESET_IDS } from '../stores/themeStore'
@@ -17,9 +17,11 @@ const SCOPE_LABELS: Record<ScopeKind, string> = {
 
 interface BottomBarProps {
   onClose: () => void
+  onHeightChange?: (height: number) => void
 }
 
-export default function BottomBar({ onClose }: BottomBarProps): JSX.Element {
+export default function BottomBar({ onClose, onHeightChange }: BottomBarProps): JSX.Element {
+  const rootRef = useRef<HTMLDivElement | null>(null)
 
   const hiddenScopes = useSettingsStore((s) => s.hiddenScopes)
   const toggleScope = useSettingsStore((s) => s.toggleScope)
@@ -50,6 +52,33 @@ export default function BottomBar({ onClose }: BottomBarProps): JSX.Element {
     void refreshDevices()
   }, [refreshBackendSupport, refreshSystemSources, refreshDevices])
 
+  useLayoutEffect(() => {
+    if (!onHeightChange || !rootRef.current) return
+
+    const rootElement = rootRef.current
+    let frameId = 0
+
+    const reportHeight = (): void => {
+      cancelAnimationFrame(frameId)
+      frameId = requestAnimationFrame(() => {
+        onHeightChange(Math.ceil(rootElement.getBoundingClientRect().height))
+      })
+    }
+
+    reportHeight()
+
+    const resizeObserver = new ResizeObserver(() => {
+      reportHeight()
+    })
+
+    resizeObserver.observe(rootElement)
+
+    return () => {
+      cancelAnimationFrame(frameId)
+      resizeObserver.disconnect()
+    }
+  }, [onHeightChange])
+
   const handleSourceChange = async (value: string): Promise<void> => {
     if (value.startsWith('system:')) {
       const sourceId = value.slice('system:'.length)
@@ -84,135 +113,149 @@ export default function BottomBar({ onClose }: BottomBarProps): JSX.Element {
         : 'Idle'
 
   return (
-    <div className="bottom-bar">
+    <div className="bottom-bar" ref={rootRef}>
-      <section className="bottom-bar__section">
+      <div className="bottom-bar__rail" aria-label="Global settings">
-        <div className="bottom-bar__section-title">Modules</div>
+        <div className="bottom-bar__rail-content">
-        <div className="bottom-bar__inline">
+          <section className="bottom-bar__section bottom-bar__section--modules">
-          {SCOPE_KINDS.map((kind) => {
+            <div className="bottom-bar__section-title">Modules</div>
-            const active = !hiddenScopes.has(kind)
+            <div className="bottom-bar__section-body">
-            return (
+              <div className="bottom-bar__inline bottom-bar__inline--chips">
-              <button
+                {SCOPE_KINDS.map((kind) => {
-                key={kind}
+                  const active = !hiddenScopes.has(kind)
-                type="button"
+                  return (
-                className={`settings-chip ${active ? 'is-active' : ''}`.trim()}
+                    <button
-                onClick={() => toggleScope(kind)}
+                      key={kind}
-                title={SCOPE_LABELS[kind]}
+                      type="button"
-              >
+                      className={`settings-chip ${active ? 'is-active' : ''}`.trim()}
-                {SCOPE_LABELS[kind]}
+                      onClick={() => toggleScope(kind)}
-              </button>
+                      title={SCOPE_LABELS[kind]}
-            )
+                    >
-          })}
+                      {SCOPE_LABELS[kind]}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          </section>
+
+          <div className="bottom-bar__divider" />
+
+          <section className="bottom-bar__section bottom-bar__section--theme">
+            <div className="bottom-bar__section-title">Theme</div>
+            <div className="bottom-bar__section-body">
+              <div className="bottom-bar__inline bottom-bar__inline--theme">
+                {PRESET_IDS.map((id) => {
+                  const preset = PRESETS[id]
+                  const active = presetId === id && !customAccent
+                  return (
+                    <button
+                      key={id}
+                      type="button"
+                      className={`settings-swatch ${active ? 'is-active' : ''}`.trim()}
+                      style={{ '--swatch-color': preset.accent } as CSSProperties}
+                      onClick={() => setPreset(id)}
+                      title={preset.name}
+                      aria-label={preset.name}
+                    />
+                  )
+                })}
+                <input
+                  className="settings-accent-input"
+                  type="color"
+                  value={accent}
+                  onChange={(event) => setCustomAccent(event.target.value)}
+                  title="Custom accent color"
+                />
+                {customAccent && (
+                  <button
+                    type="button"
+                    className="settings-chip"
+                    onClick={() => setCustomAccent(null)}
+                  >
+                    Reset
+                  </button>
+                )}
+              </div>
+            </div>
+          </section>
+
+          <div className="bottom-bar__divider" />
+
+          <section className="bottom-bar__section bottom-bar__section--source">
+            <div className="bottom-bar__section-title">Audio Source</div>
+            <div className="bottom-bar__section-body">
+              <div className="bottom-bar__inline">
+                <select
+                  className="settings-control__select"
+                  value={selectedSourceValue}
+                  onChange={(event) => {
+                    void handleSourceChange(event.target.value)
+                  }}
+                >
+                  <optgroup label="Output Devices">
+                    {visibleSystemSources.map((source) => (
+                      <option key={source.id} value={`system:${source.id}`}>
+                        {source.isDefault ? `${source.label} (Default)` : source.label}
+                      </option>
+                    ))}
+                  </optgroup>
+                  {showInputDevices ? (
+                    <optgroup label="Input Devices">
+                      {devices.map((device) => (
+                        <option key={device.deviceId} value={`device:${device.deviceId}`}>
+                          {device.label || `Input ${device.deviceId.slice(0, 8)}`}
+                        </option>
+                      ))}
+                    </optgroup>
+                  ) : null}
+                </select>
+
+                <div className={`settings-status-pill is-${captureStatus}`.trim()}>
+                  <span className="settings-status-pill__dot" />
+                  <span>{indicatorLabel}</span>
+                </div>
+              </div>
+
+              {captureError ? (
+                <div className="settings-error-text bottom-bar__error-text">{captureError}</div>
+              ) : null}
+            </div>
+          </section>
+
+          <div className="bottom-bar__divider" />
+
+          <section className="bottom-bar__section bottom-bar__section--trim">
+            <div className="bottom-bar__section-title">Trim</div>
+            <div className="bottom-bar__section-body">
+              <div className="bottom-bar__inline">
+                <span className="bottom-bar__trim-value">
+                  {inputGainDb > 0 ? '+' : ''}{inputGainDb.toFixed(1)}dB
+                </span>
+                <input
+                  className="settings-control__range bottom-bar__trim-slider"
+                  type="range"
+                  min={-12}
+                  max={12}
+                  step={0.5}
+                  value={inputGainDb}
+                  onChange={(event) => setInputGain(Number(event.target.value))}
+                  onDoubleClick={() => setInputGain(0)}
+                />
+              </div>
+            </div>
+          </section>
         </div>
-      </section>
+      </div>
 
-      <div className="bottom-bar__divider" />
+      <div className="bottom-bar__actions">
-
+        <button
-      <section className="bottom-bar__section">
+          type="button"
-        <div className="bottom-bar__section-title">Theme</div>
+          className="settings-panel__close bottom-bar__close"
-        <div className="bottom-bar__inline">
+          onClick={onClose}
-          {PRESET_IDS.map((id) => {
+        >
-            const preset = PRESETS[id]
+          Close
-            const active = presetId === id && !customAccent
+        </button>
-            return (
+      </div>
-              <button
-                key={id}
-                type="button"
-                className={`settings-swatch ${active ? 'is-active' : ''}`.trim()}
-                style={{ '--swatch-color': preset.accent } as CSSProperties}
-                onClick={() => setPreset(id)}
-                title={preset.name}
-                aria-label={preset.name}
-              />
-            )
-          })}
-          <input
-            className="settings-accent-input"
-            type="color"
-            value={accent}
-            onChange={(event) => setCustomAccent(event.target.value)}
-            title="Custom accent color"
-          />
-          {customAccent && (
-            <button
-              type="button"
-              className="settings-chip"
-              onClick={() => setCustomAccent(null)}
-            >
-              Reset
-            </button>
-          )}
-        </div>
-      </section>
-
-      <div className="bottom-bar__divider" />
-
-      <section className="bottom-bar__section">
-        <div className="bottom-bar__section-title">Audio Source</div>
-        <div className="bottom-bar__inline">
-          <select
-            className="settings-control__select"
-            value={selectedSourceValue}
-            onChange={(event) => {
-              void handleSourceChange(event.target.value)
-            }}
-          >
-            <optgroup label="Output Devices">
-              {visibleSystemSources.map((source) => (
-                <option key={source.id} value={`system:${source.id}`}>
-                  {source.isDefault ? `${source.label} (Default)` : source.label}
-                </option>
-              ))}
-            </optgroup>
-            {showInputDevices ? (
-              <optgroup label="Input Devices">
-                {devices.map((device) => (
-                  <option key={device.deviceId} value={`device:${device.deviceId}`}>
-                    {device.label || `Input ${device.deviceId.slice(0, 8)}`}
-                  </option>
-                ))}
-              </optgroup>
-            ) : null}
-          </select>
-
-          <div className={`settings-status-pill is-${captureStatus}`.trim()}>
-            <span className="settings-status-pill__dot" />
-            <span>{indicatorLabel}</span>
-          </div>
-        </div>
-
-        {captureError ? (
-          <div className="settings-error-text">{captureError}</div>
-        ) : null}
-      </section>
-
-      <div className="bottom-bar__divider" />
-
-      <section className="bottom-bar__section">
-        <div className="bottom-bar__section-title">Trim</div>
-        <div className="bottom-bar__inline">
-          <span className="bottom-bar__trim-value">
-            {inputGainDb > 0 ? '+' : ''}{inputGainDb.toFixed(1)}dB
-          </span>
-          <input
-            className="settings-control__range bottom-bar__trim-slider"
-            type="range"
-            min={-12}
-            max={12}
-            step={0.5}
-            value={inputGainDb}
-            onChange={(event) => setInputGain(Number(event.target.value))}
-            onDoubleClick={() => setInputGain(0)}
-          />
-        </div>
-      </section>
-
-      <button
-        type="button"
-        className="settings-panel__close"
-        onClick={onClose}
-      >
-        Close
-      </button>
     </div>
   )
 }

src/renderer/components/ScopeSettingsSection.tsx

@@ -74,6 +74,23 @@ function ToggleChip({
   )
 }
 
+function ToggleGroup({
+  label,
+  children,
+}: {
+  label: string
+  children: ReactNode
+}): JSX.Element {
+  return (
+    <div className="settings-control settings-control--full settings-control--stack">
+      <span className="settings-control__label">{label}</span>
+      <div className="settings-chip-row">
+        {children}
+      </div>
+    </div>
+  )
+}
+
 function SelectControl({
   label,
   value,
@@ -175,7 +192,7 @@ export default function ScopeSettingsSection({
                 ))}
               </SelectControl>
 
-              <div className="settings-chip-row settings-control--full">
+              <ToggleGroup label="Display">
                 <ToggleChip
                   label="Fill"
                   active={current.fillGradient}
@@ -191,7 +208,7 @@ export default function ScopeSettingsSection({
                   active={current.showGrid}
                   onClick={() => onUpdate('spectrum', { showGrid: !current.showGrid })}
                 />
-              </div>
+              </ToggleGroup>
 
               <RangeControl
                 label="Tilt"
@@ -234,7 +251,7 @@ export default function ScopeSettingsSection({
           const current = settings as ScopeSettings['oscilloscope']
           return (
             <>
-              <div className="settings-chip-row settings-control--full">
+              <ToggleGroup label="Options">
                 <ToggleChip
                   label="Pitch Lock"
                   active={current.pitchLock}
@@ -250,7 +267,7 @@ export default function ScopeSettingsSection({
                   active={current.showGrid}
                   onClick={() => onUpdate('oscilloscope', { showGrid: !current.showGrid })}
                 />
-              </div>
+              </ToggleGroup>
 
               <RangeControl
                 label="Line Width"
@@ -282,7 +299,7 @@ export default function ScopeSettingsSection({
                 <option value="linear-bipolar">Linear (Bi)</option>
               </SelectControl>
 
-              <div className="settings-chip-row settings-control--full">
+              <ToggleGroup label="Overlays">
                 <ToggleChip
                   label="RGB"
                   active={current.multiband}
@@ -293,7 +310,7 @@ export default function ScopeSettingsSection({
                   active={current.showGrid}
                   onClick={() => onUpdate('vectorscope', { showGrid: !current.showGrid })}
                 />
-              </div>
+              </ToggleGroup>
 
               <RangeControl
                 label="Persistence"
@@ -421,13 +438,13 @@ export default function ScopeSettingsSection({
           const current = settings as ScopeSettings['waveform']
           return (
             <>
-              <div className="settings-chip-row settings-control--full">
+              <ToggleGroup label="Bands">
                 <ToggleChip
                   label="Multiband"
                   active={current.multiband}
                   onClick={() => onUpdate('waveform', { multiband: !current.multiband })}
                 />
-              </div>
+              </ToggleGroup>
 
               <RangeControl
                 label="Gain"

src/renderer/components/SettingsPanel.tsx

@@ -1,10 +1,16 @@
-import { useMemo, type CSSProperties, type JSX } from 'react'
+import { useLayoutEffect, useMemo, useRef, type CSSProperties, type JSX } from 'react'
 import { buildAnalyzerGridTemplateColumns } from '../analyzerLayout'
 import ScopeSettingsSection from './ScopeSettingsSection'
 import { useSettingsStore } from '../stores/settingsStore'
 
-export default function SettingsPanel(): JSX.Element {
+interface SettingsPanelProps {
+  onHeightChange?: (height: number) => void
+}
+
+export default function SettingsPanel({ onHeightChange }: SettingsPanelProps): JSX.Element {
   const { scopeSettings, updateScopeSettings, hiddenScopes, scopeOrder, widthWeights, scopePopouts } = useSettingsStore()
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const scopeTrackRef = useRef<HTMLDivElement | null>(null)
 
   const dockedScopes = useMemo(
     () => scopeOrder.filter((kind) => !hiddenScopes.has(kind) && !scopePopouts[kind]?.poppedOut),
@@ -16,9 +22,39 @@ export default function SettingsPanel(): JSX.Element {
     return { gridTemplateColumns } as CSSProperties
   }, [dockedScopes, widthWeights])
 
+  useLayoutEffect(() => {
+    if (!onHeightChange || !panelRef.current) return
+
+    const panelElement = panelRef.current
+    let frameId = 0
+
+    const reportHeight = (): void => {
+      cancelAnimationFrame(frameId)
+      frameId = requestAnimationFrame(() => {
+        onHeightChange(Math.ceil(panelElement.scrollHeight))
+      })
+    }
+
+    reportHeight()
+
+    const resizeObserver = new ResizeObserver(() => {
+      reportHeight()
+    })
+
+    resizeObserver.observe(panelElement)
+    if (scopeTrackRef.current) {
+      resizeObserver.observe(scopeTrackRef.current)
+    }
+
+    return () => {
+      cancelAnimationFrame(frameId)
+      resizeObserver.disconnect()
+    }
+  }, [dockedScopes, onHeightChange, scopeTrackStyle])
+
   return (
-    <div className="settings-panel">
+    <div className="settings-panel" ref={panelRef}>
-      <div className="settings-panel__scope-track" style={scopeTrackStyle}>
+      <div className="settings-panel__scope-track" style={scopeTrackStyle} ref={scopeTrackRef}>
         {dockedScopes.map((kind) => (
           <ScopeSettingsSection
             key={kind}

src/renderer/styles/globals.css

@@ -85,6 +85,11 @@ select {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(8, 10, 14, 0.94), rgba(4, 6, 9, 0.98)),
+    rgba(0, 0, 0, 0.96);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.34);
 }
 
 .toolbar {
@@ -449,16 +454,16 @@ select {
 }
 
 .settings-panel {
-  background: rgba(5, 7, 10, 0.98);
+  background: linear-gradient(180deg, rgba(7, 10, 15, 0.95), rgba(4, 6, 10, 0.98));
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
   flex: 1;
   min-height: 0;
   position: relative;
-  padding: 12px 0 14px;
+  padding: 10px 0 0;
   flex-shrink: 1;
 }
 
@@ -491,8 +496,8 @@ select {
   width: 100%;
   min-width: 0;
   gap: 0;
-  padding: 0 0 2px;
+  padding: 0 0 4px;
-  align-items: start;
+  align-items: stretch;
 }
 
 .settings-section-title {
@@ -505,8 +510,8 @@ select {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
-  padding: 0 16px;
+  padding: 0 16px 14px;
   border-left: 1px solid rgba(255, 255, 255, 0.06);
 }
 
@@ -516,35 +521,42 @@ select {
 
 .settings-scope-section__header {
   display: flex;
-  flex-direction: column;
+  align-items: baseline;
-  gap: 4px;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0 12px;
+  min-height: 42px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .settings-scope-section__title {
   color: var(--accent);
   font-size: 10px;
+  line-height: 1.3;
 }
 
 .settings-scope-section__summary {
-  color: var(--text-tertiary);
+  flex: 1;
+  color: rgba(255, 255, 255, 0.44);
   font-size: 9px;
   letter-spacing: 0.08em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: right;
 }
 
 .settings-scope-section__controls {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
-  gap: 10px 14px;
+  gap: 12px 14px;
   align-content: start;
 }
 
 .settings-control {
   display: flex;
   flex-direction: column;
-  gap: 7px;
+  gap: 6px;
   min-width: 0;
 }
 
@@ -553,6 +565,10 @@ select {
   grid-column: 1 / -1;
 }
 
+.settings-control--stack {
+  gap: 6px;
+}
+
 .settings-control.is-disabled {
   opacity: 0.46;
 }
@@ -561,75 +577,75 @@ select {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 10px;
-  color: var(--text-secondary);
+  color: rgba(255, 255, 255, 0.56);
   font-size: 9px;
 }
 
 .settings-control__value {
-  color: var(--text-tertiary);
+  color: rgba(255, 255, 255, 0.82);
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
 }
 
 .settings-control__select {
   width: 100%;
-  min-height: 32px;
+  min-height: 34px;
   padding: 0 12px;
-  border-radius: 999px;
+  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.09);
-  background: rgba(8, 12, 18, 0.72);
+  background: linear-gradient(180deg, rgba(10, 14, 20, 0.96), rgba(5, 8, 12, 0.96));
-  color: rgba(255, 255, 255, 0.86);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.9);
   font-size: 11px;
   outline: none;
-  backdrop-filter: blur(14px) saturate(1.04);
+  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
-  -webkit-backdrop-filter: blur(14px) saturate(1.04);
-  transition: border-color 140ms ease, background-color 140ms ease;
 }
 
 .settings-control__select:hover,
 .settings-control__select:focus {
-  border-color: rgba(255, 255, 255, 0.16);
+  border-color: rgba(var(--accent-rgb), 0.26);
-  background: rgba(12, 18, 26, 0.82);
+  background: linear-gradient(180deg, rgba(12, 17, 24, 0.98), rgba(7, 10, 15, 0.98));
+  color: var(--text-primary);
 }
 
 .settings-control__range {
   width: 100%;
-  height: 18px;
+  height: 16px;
   margin: 0;
   appearance: none;
   background: transparent;
 }
 
 .settings-control__range::-webkit-slider-runnable-track {
-  height: 3px;
+  height: 2px;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(var(--accent-rgb), 0.36));
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.1) 28%, rgba(var(--accent-rgb), 0.5));
 }
 
 .settings-control__range::-webkit-slider-thumb {
   appearance: none;
-  width: 12px;
+  width: 10px;
-  height: 12px;
+  height: 10px;
-  margin-top: -4.5px;
+  margin-top: -4px;
   border-radius: 50%;
-  border: 1px solid rgba(var(--accent-rgb), 0.5);
+  border: 1px solid rgba(var(--accent-rgb), 0.72);
-  background: rgba(7, 10, 14, 0.98);
+  background: rgba(5, 7, 10, 0.98);
-  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
 }
 
 .settings-control__range::-moz-range-track {
-  height: 3px;
+  height: 2px;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(var(--accent-rgb), 0.36));
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.1) 28%, rgba(var(--accent-rgb), 0.5));
 }
 
 .settings-control__range::-moz-range-thumb {
-  width: 12px;
+  width: 10px;
-  height: 12px;
+  height: 10px;
   border-radius: 50%;
-  border: 1px solid rgba(var(--accent-rgb), 0.5);
+  border: 1px solid rgba(var(--accent-rgb), 0.72);
-  background: rgba(7, 10, 14, 0.98);
+  background: rgba(5, 7, 10, 0.98);
-  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
 }
 
 .settings-chip-row {
@@ -639,57 +655,60 @@ select {
 }
 
 .settings-chip {
-  min-height: 30px;
+  min-height: 28px;
   padding: 0 11px;
-  border-radius: 999px;
+  border-radius: 9px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid transparent;
-  background: rgba(8, 12, 18, 0.72);
+  background: rgba(255, 255, 255, 0.015);
-  color: var(--text-secondary);
+  color: rgba(255, 255, 255, 0.5);
   font-size: 10px;
-  backdrop-filter: blur(14px) saturate(1.04);
+  white-space: nowrap;
-  -webkit-backdrop-filter: blur(14px) saturate(1.04);
   cursor: pointer;
   transition:
     border-color 140ms ease,
     color 140ms ease,
-    background-color 140ms ease,
+    background-color 140ms ease;
-    transform 140ms ease;
 }
 
 .settings-chip:hover {
-  transform: translateY(-1px);
+  color: rgba(255, 255, 255, 0.86);
-  color: rgba(255, 255, 255, 0.82);
+  border-color: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .settings-chip.is-active {
-  color: var(--accent);
+  color: rgba(255, 255, 255, 0.92);
-  border-color: rgba(var(--accent-rgb), 0.28);
+  border-color: rgba(var(--accent-rgb), 0.34);
-  background: rgba(var(--accent-rgb), 0.12);
+  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.1));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .settings-status-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  min-height: 30px;
+  min-height: 32px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 12, 18, 0.72);
+  background: linear-gradient(180deg, rgba(10, 14, 19, 0.94), rgba(7, 10, 14, 0.94));
-  color: var(--text-secondary);
+  color: rgba(255, 255, 255, 0.62);
   font-size: 10px;
-  backdrop-filter: blur(14px) saturate(1.04);
+  white-space: nowrap;
-  -webkit-backdrop-filter: blur(14px) saturate(1.04);
 }
 
 .settings-status-pill__dot {
-  width: 7px;
+  width: 6px;
-  height: 7px;
+  height: 6px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.26);
 }
 
+.settings-status-pill.is-connecting .settings-status-pill__dot {
+  background: var(--accent);
+  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
+}
+
 .settings-status-pill.is-capturing .settings-status-pill__dot {
   background: var(--success);
   box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
@@ -715,26 +734,30 @@ select {
 
 .settings-theme-swatches {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
 }
 
 .settings-swatch {
-  width: 18px;
+  width: 20px;
-  height: 18px;
+  height: 20px;
   border-radius: 999px;
-  border: 2px solid transparent;
+  border: 1px solid rgba(255, 255, 255, 0.08);
   background: var(--swatch-color);
   cursor: pointer;
-  transition: transform 120ms ease, border-color 120ms ease;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
 }
 
 .settings-swatch:hover {
-  transform: translateY(-1px);
+  border-color: rgba(255, 255, 255, 0.28);
 }
 
 .settings-swatch.is-active {
-  border-color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(255, 255, 255, 0.88);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.88),
+    0 0 0 4px rgba(var(--accent-rgb), 0.12);
 }
 
 .settings-accent-row {
@@ -745,26 +768,23 @@ select {
 }
 
 .settings-accent-input {
-  width: 92px;
+  width: 84px;
-  height: 32px;
+  height: 28px;
-  border-radius: 999px;
+  border-radius: 9px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.09);
-  background: rgba(8, 12, 18, 0.72);
+  background: linear-gradient(180deg, rgba(10, 14, 20, 0.96), rgba(5, 8, 12, 0.96));
   cursor: pointer;
-  padding: 4px;
+  padding: 3px 4px;
 }
 
 .settings-panel__close {
-  margin-left: auto;
+  min-height: 34px;
-  min-height: 28px;
+  padding: 0 14px;
-  padding: 0 12px;
+  border-radius: 10px;
-  border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(8, 12, 18, 0.72);
+  background: linear-gradient(180deg, rgba(10, 14, 20, 0.96), rgba(5, 8, 12, 0.96));
-  color: var(--text-tertiary);
+  color: rgba(255, 255, 255, 0.66);
   font-size: 9px;
-  backdrop-filter: blur(14px) saturate(1.04);
-  -webkit-backdrop-filter: blur(14px) saturate(1.04);
   cursor: pointer;
   transition:
     border-color 140ms ease,
@@ -773,25 +793,68 @@ select {
 }
 
 .settings-panel__close:hover {
-  color: rgba(255, 255, 255, 0.82);
+  color: rgba(255, 255, 255, 0.88);
-  border-color: rgba(255, 255, 255, 0.16);
+  border-color: rgba(var(--accent-rgb), 0.24);
-  background: rgba(255, 255, 255, 0.05);
+  background: linear-gradient(180deg, rgba(12, 17, 24, 0.98), rgba(7, 10, 15, 0.98));
 }
 
 .bottom-bar {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   gap: 0;
-  padding: 8px 0;
+  min-height: 92px;
-  background: rgba(3, 4, 6, 0.98);
+  padding: 0;
+  background: rgba(2, 4, 7, 0.98);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
   flex-shrink: 0;
 }
 
+.bottom-bar__rail {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 10px 0 8px 14px;
+  scrollbar-gutter: stable;
+}
+
+.bottom-bar__rail-content {
+  display: flex;
+  align-items: stretch;
+  width: max-content;
+  min-width: 100%;
+}
+
 .bottom-bar__section {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
   gap: 10px;
-  padding: 0 14px;
+  padding: 0 16px 0 0;
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.bottom-bar__section--modules {
+  min-width: 520px;
+}
+
+.bottom-bar__section--theme {
+  min-width: 228px;
+}
+
+.bottom-bar__section--source {
+  min-width: 360px;
+}
+
+.bottom-bar__section--trim {
+  min-width: 196px;
+}
+
+.bottom-bar__section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   min-width: 0;
 }
 
@@ -799,48 +862,75 @@ select {
   font-family: 'JetBrains Mono', monospace;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.72);
+  color: rgba(255, 255, 255, 0.54);
-  font-size: 10px;
+  font-size: 9px;
   white-space: nowrap;
-  flex-shrink: 0;
 }
 
 .bottom-bar__inline {
   display: flex;
   align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.bottom-bar__inline--chips {
+  gap: 4px;
+  padding: 4px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.bottom-bar__inline--theme {
   gap: 6px;
-  flex-wrap: wrap;
 }
 
 .bottom-bar__divider {
   width: 1px;
   align-self: stretch;
-  background: rgba(255, 255, 255, 0.08);
+  margin: 0 16px 0 0;
+  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14) 18%, rgba(255, 255, 255, 0.04) 82%, transparent);
   flex-shrink: 0;
 }
 
 .bottom-bar__trim-value {
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
-  color: var(--accent);
+  color: rgba(255, 255, 255, 0.88);
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
-  min-width: 48px;
+  min-width: 56px;
-  text-align: center;
+  text-align: right;
   white-space: nowrap;
 }
 
 .bottom-bar__trim-slider {
-  width: 100px;
+  width: 132px;
+  flex: 0 0 auto;
 }
 
 .bottom-bar .settings-control__select {
-  min-width: 180px;
+  min-width: 280px;
+  max-width: 280px;
 }
 
-.bottom-bar .settings-panel__close {
+.bottom-bar__error-text {
-  margin-left: auto;
+  margin-top: 0;
+  max-width: 360px;
+}
+
+.bottom-bar__actions {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 10px 14px 10px 16px;
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(90deg, rgba(2, 4, 7, 0.76), rgba(2, 4, 7, 0.98) 24%, rgba(2, 4, 7, 1));
+}
+
+.bottom-bar__close {
   flex-shrink: 0;
-  margin-right: 14px;
 }
 
 .scope-popout {