Update style.css

style.css

@@ -1,28 +1,43 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
+/* style.css - small custom additions for index.html */
+
+/* simple show/hide for pages */
+.page-content { display: none; }
+.page-content.active { display: block; }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* result box for showing results / error */
+.result-box {
+  display: block;
+  background: rgba(255,255,255,0.9);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-top: 0.75rem;
+  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
+  color: #0f172a;
+  word-break: break-word;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* dark-mode adjustments */
+.dark .result-box {
+  background: rgba(15,23,42,0.55);
+  color: #e6eef8;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* small disabled button look */
+.btn-disabled { cursor: not-allowed; opacity: 0.6; }
+
+/* utility for small spinner hide/show (we toggle .hidden in JS) */
+.hidden { display: none !important; }
+
+/* responsive image */
+img.rounded-lg { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; }
+
+/* make forms look slightly nicer on small screens */
+input[type="text"]::placeholder {
+  color: #9ca3af;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* accessible focus ring */
+:focus {
+  outline: 2px solid rgba(59,130,246,0.5);
+  outline-offset: 2px;
 }