add tema

src/styles.css

@@ -13,6 +13,36 @@
   --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
 }
 
+body[data-theme="nord"] {
+  --bg: #0b1220;
+  --bg-soft: #131d31;
+  --panel: #182235;
+  --panel-2: #10192b;
+  --line: #31425f;
+  --text: #edf3ff;
+  --muted: #a7b8d8;
+  --accent: #5e81ac;
+  --accent-2: #88c0d0;
+  --ok: #79c9a4;
+  --warn: #f0c674;
+  --shadow: 0 12px 32px rgba(4, 10, 18, 0.42);
+}
+
+body[data-theme="light"] {
+  --bg: #eef2f8;
+  --bg-soft: #f7f9fc;
+  --panel: #ffffff;
+  --panel-2: #ecf1f7;
+  --line: #cfd8e6;
+  --text: #152033;
+  --muted: #5f708d;
+  --accent: #d62828;
+  --accent-2: #ef4444;
+  --ok: #1f9d67;
+  --warn: #c98914;
+  --shadow: 0 10px 28px rgba(27, 45, 78, 0.12);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -22,9 +52,9 @@ body {
   font-family: Barlow, "Segoe UI", sans-serif;
   color: var(--text);
   background:
-    radial-gradient(circle at 15% 0%, rgba(225, 6, 0, 0.18), transparent 30%),
-    radial-gradient(circle at 100% 80%, rgba(37, 59, 103, 0.22), transparent 30%),
-    linear-gradient(160deg, #05070b 0%, #090d16 55%, #07090e 100%);
+    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
+    radial-gradient(circle at 100% 80%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 30%),
+    linear-gradient(160deg, color-mix(in srgb, var(--bg) 90%, #000 10%) 0%, var(--bg-soft) 55%, var(--bg) 100%);
   min-height: 100vh;
 }
 
@@ -178,7 +208,7 @@ body {
 .topbar-right {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .lang-wrap {
@@ -195,6 +225,14 @@ body {
   border-radius: 8px;
 }
 
+.theme-wrap {
+  min-width: 120px;
+}
+
+.theme-select {
+  min-width: 120px;
+}
+
 .view {
   margin-top: 16px;
 }