style: align settings header with sidebar header bar

- Change settings-header to settings-header-bar class
- Match styling of sidebar-header-bar (background, border, padding)
- Reduce title font size to match sidebar style
- Adjust padding and spacing for consistent visual alignment
- Settings header now appears on same visual line as sidebar buttons

src/components/Settings.tsx

@@ -24,7 +24,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
 
   return (
     <div className="settings-view">
-      <div className="settings-header">
+      <div className="settings-header-bar">
         <h2>Settings</h2>
         <IconButton
           icon={faTimes}

src/index.css

@@ -1427,29 +1427,35 @@ body {
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  padding: 1.5rem;
+  padding: 0.75rem 1rem;
   text-align: left;
 }
 
-.settings-header {
+.settings-header-bar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
-  text-align: left;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  margin-bottom: 1rem;
 }
 
-.settings-header h2 {
+.settings-header-bar h2 {
   margin: 0;
-  font-size: 1.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
   text-align: left;
 }
 
 .settings-content {
   overflow-y: auto;
   flex: 1;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   text-align: left;
+  padding: 0 0.25rem;
 }
 
 .setting-group {