diff --git a/admin/assets/css/main.css b/admin/assets/css/main.css
index a61c14c..2256283 100644
--- a/admin/assets/css/main.css
+++ b/admin/assets/css/main.css
@@ -16,12 +16,45 @@
   --ok-dim: #ecfdf3;
   --bad: #dc2626;
   --bad-dim: #fef2f2;
+  --dot: rgba(15, 23, 42, 0.05);
+  --header-bg: rgba(255, 255, 255, 0.82);
+  --scrim: rgba(15, 23, 42, 0.4);
+  --knob: #ffffff;
+  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
   --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
   --ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --radius: 12px;
   --radius-sm: 8px;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0b0f17;
+    --surface: #131a24;
+    --surface-2: #1a2230;
+    --surface-3: #232d3d;
+    --border: #273143;
+    --border-strong: #384660;
+    --text: #e6e9ef;
+    --muted: #9aa6b8;
+    --faint: #6b7789;
+    --accent: #6366f1;
+    --accent-strong: #818cf8;
+    --accent-dim: #1c2140;
+    --accent-text: #c7d2fe;
+    --ok: #22c55e;
+    --ok-dim: #10241a;
+    --bad: #f05252;
+    --bad-dim: #2a1618;
+    --dot: rgba(148, 163, 184, 0.08);
+    --header-bg: rgba(15, 20, 28, 0.82);
+    --scrim: rgba(2, 6, 12, 0.6);
+    --knob: #dfe4ee;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
+    color-scheme: dark;
+  }
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -47,7 +80,7 @@ body::before {
   content: "";
   position: fixed;
   inset: 0;
-  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
+  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
   background-size: 22px 22px;
   pointer-events: none;
   z-index: 0;
@@ -69,7 +102,7 @@ header {
   justify-content: space-between;
   gap: 16px;
   padding: 14px 32px;
-  background: rgba(255, 255, 255, 0.82);
+  background: var(--header-bg);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
 }
@@ -369,7 +402,7 @@ main {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #fff;
+  background: var(--knob);
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
   transition: transform 0.18s;
 }
@@ -495,7 +528,7 @@ main {
   position: fixed;
   inset: 0;
   z-index: 40;
-  background: rgba(15, 23, 42, 0.4);
+  background: var(--scrim);
   backdrop-filter: blur(2px);
 }