feat: add tabbed layout to settings page with Overview, Import, Maintenance tabs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/static/style.css

@@ -1212,6 +1212,78 @@ header {
 /*------------------------------------------------------------------------------
   Settings
 ------------------------------------------------------------------------------*/
+
+/* Settings page title */
+.settings-title {
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+/* Settings tab bar */
+.settings-tab-bar {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  max-width: 1600px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 1.5rem;
+}
+
+.settings-tab-btn {
+  padding: 0.4rem 1.1rem;
+  border-radius: 999px;
+  border: 1px solid var(--filter-border);
+  background: var(--filter-bg);
+  color: var(--filter-fg);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.settings-tab-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.settings-tab-btn.is-active {
+  background: var(--filter-active-bg);
+  border-color: var(--filter-active-border);
+  color: var(--filter-active-fg);
+}
+
+/* Settings tab panels */
+.settings-tab-panel {
+  display: none;
+}
+
+.settings-tab-panel.is-active {
+  display: block;
+}
+
+/* Maintenance tab — visually subdued */
+.settings-tab-panel[data-tab="maintenance"] .settings-container {
+  opacity: 0.8;
+}
+.settings-tab-panel[data-tab="maintenance"] .settings-container:hover {
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+/* Two-column layout for Import tab */
+.settings-two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .settings-two-col {
+    grid-template-columns: 1fr;
+  }
+}
 .settings-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);