maybe fixed dark mode

src/App.css

@@ -1,14 +1,22 @@
-#root {
+:root {
-  margin: 0;
+  color-scheme: light dark;
-  width: 100%;
+}
-  display: flex;
+
-  justify-content: center;
+* {
+  box-sizing: border-box;
 }
 
 body {
   margin: 0;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   background: #f5f7fb;
+  color: #111;
+}
+
+#root {
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .page {
@@ -42,16 +50,19 @@ body {
 .card {
   padding: 40px;
   max-width: 640px;
-  background: white;
+  background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.08);
 }
 
 .seal {
-  font-size: 60px;
   margin-bottom: 10px;
 }
 
+.seal img {
+  max-width: 120px;
+}
+
 .statement {
   color: #444;
   line-height: 1.5;
@@ -60,6 +71,7 @@ body {
 .name {
   font-size: 2rem;
   margin: 20px 0 10px;
+  color: #111;
 }
 
 .result {
@@ -86,4 +98,44 @@ body {
   margin-top: 20px;
   color: #888;
   font-size: 0.9rem;
+}
+
+/* Optional dark mode support */
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #0f1115;
+    color: #e8e8e8;
+  }
+
+  .tagline {
+    color: #aaa;
+  }
+
+  .card {
+    background: #1c1f26;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+  }
+
+  .statement {
+    color: #ccc;
+  }
+
+  .name {
+    color: #fff;
+  }
+
+  .fineprint {
+    color: #999;
+  }
+
+  .footer {
+    color: #999;
+  }
+
+  .badge {
+    background: #ffe06b;
+    border-color: #d4b000;
+    color: #222;
+  }
 }