added some UX improvements

settings.css

@@ -5,6 +5,29 @@
   --panel: #fffaf1;
   --border: #eadbc8;
   --bg: #f5ead7;
+  --input-bg: #fffdf9;
+  --input-fg: var(--ink);
+  --card-bg: #fffefb;
+  --panel-shadow: 0 18px 40px rgba(120, 85, 55, 0.12);
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --ink: #abb2bf;
+  --muted: #8b93a5;
+  --accent: #61afef;
+  --panel: #2f343f;
+  --border: #3e4451;
+  --bg: linear-gradient(160deg, #2a2f3a, #1f232b);
+  --input-bg: #2b303b;
+  --input-fg: var(--ink);
+  --card-bg: #2b303b;
+  --panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
 }
 
 * {
@@ -14,10 +37,9 @@
 body {
   margin: 0;
   padding: 24px;
-  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
-    "Times New Roman", serif;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
   color: var(--ink);
-  background: linear-gradient(160deg, #f8efe1, #efe0c9);
+  background: var(--bg);
 }
 
 .title-block {
@@ -40,7 +62,7 @@ body {
   border-radius: 16px;
   padding: 16px;
   margin-bottom: 16px;
-  box-shadow: 0 18px 40px rgba(120, 85, 55, 0.12);
+  box-shadow: var(--panel-shadow);
 }
 
 .row {
@@ -73,12 +95,14 @@ label {
 }
 
 input,
-textarea {
+textarea,
+select {
   width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
-  background: #fffdf9;
+  background: var(--input-bg);
+  color: var(--input-fg);
   font-family: inherit;
   font-size: 13px;
 }
@@ -131,11 +155,28 @@ button:active {
   padding: 12px;
   border-radius: 12px;
   border: 1px solid var(--border);
-  background: #fffefb;
+  background: var(--card-bg);
   display: grid;
   gap: 8px;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :root[data-theme="system"] {
+    --ink: #abb2bf;
+    --muted: #8b93a5;
+    --accent: #61afef;
+    --panel: #2f343f;
+    --border: #3e4451;
+    --bg: linear-gradient(160deg, #2a2f3a, #1f232b);
+    --input-bg: #2b303b;
+    --input-fg: var(--ink);
+    --card-bg: #2b303b;
+    --panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+    color-scheme: dark;
+  }
+}
+
 .task-actions {
   display: flex;
   gap: 8px;