more QOL improvements

public/css/style.css

@@ -10,6 +10,28 @@
   --muted: #636e72;
   --card-bg: #ffffff;
   --body-bg: #f0f2f5;
+  --text: #2d3436;
+  --border: #dfe6e9;
+  --table-hover: rgba(108, 92, 231, 0.03);
+  --table-border: #eee;
+}
+
+[data-theme="dark"] {
+  --primary: #a29bfe;
+  --primary-dark: #6c5ce7;
+  --accent: #fdcb6e;
+  --dark: #0d1117;
+  --darker: #161b22;
+  --light: #c9d1d9;
+  --success: #2ecc71;
+  --danger: #e74c3c;
+  --muted: #8b949e;
+  --card-bg: #161b22;
+  --body-bg: #0d1117;
+  --text: #c9d1d9;
+  --border: #30363d;
+  --table-hover: rgba(162, 155, 254, 0.06);
+  --table-border: #21262d;
 }
 
 * {
@@ -19,7 +41,7 @@
 body {
   font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
   background: var(--body-bg);
-  color: #2d3436;
+  color: var(--text);
   margin: 0;
   min-height: 100vh;
   display: flex;
@@ -63,6 +85,22 @@ body {
   gap: 5px;
 }
 
+/* Theme toggle */
+.theme-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 6px;
+  line-height: 1;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.theme-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 .nav-toggle span {
   display: block;
   width: 24px;
@@ -125,7 +163,7 @@ body {
   font-weight: 700;
   margin-bottom: 1rem;
   padding-bottom: 0.75rem;
-  border-bottom: 2px solid var(--body-bg);
+  border-bottom: 2px solid var(--border);
 }
 
 /* ─── Buttons ─────────────────────────────────────────── */
@@ -167,6 +205,10 @@ body {
   color: var(--primary);
 }
 
+.btn-outline:visited {
+  color: var(--primary);
+}
+
 .btn-outline:hover {
   background: var(--primary);
   color: #fff;
@@ -192,17 +234,19 @@ body {
   font-weight: 600;
   margin-bottom: 0.3rem;
   font-size: 0.9rem;
-  color: #555;
+  color: var(--muted);
 }
 
 .form-control {
   width: 100%;
   padding: 0.6rem 0.8rem;
-  border: 2px solid #dfe6e9;
+  border: 2px solid var(--border);
   border-radius: 8px;
   font-size: 0.95rem;
   transition: border-color 0.2s;
   font-family: inherit;
+  background: var(--card-bg);
+  color: var(--text);
 }
 
 .form-control:focus {
@@ -284,7 +328,7 @@ table {
 th, td {
   text-align: left;
   padding: 0.65rem 0.75rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--table-border);
 }
 
 th {
@@ -296,7 +340,7 @@ th {
 }
 
 tr:hover {
-  background: rgba(108, 92, 231, 0.03);
+  background: var(--table-hover);
 }
 
 .rank-cell {
@@ -497,13 +541,60 @@ tr:hover {
   background: var(--danger);
 }
 
+/* ─── Dark Mode Refinements ───────────────────────────── */
+[data-theme="dark"] .alert-danger {
+  background: #3d2e00;
+  border-color: #fdcb6e;
+  color: #fdcb6e;
+}
+
+[data-theme="dark"] .alert-danger.error {
+  background: #3d1515;
+  border-color: #e74c3c;
+  color: #fab1a0;
+}
+
+[data-theme="dark"] .alert-success {
+  background: #0d3320;
+  border-color: var(--success);
+  color: var(--success);
+}
+
+[data-theme="dark"] .alert-info {
+  background: #0d2137;
+  border-color: #74b9ff;
+  color: #74b9ff;
+}
+
+[data-theme="dark"] .package-card.scanned {
+  border-color: var(--success);
+  background: linear-gradient(135deg, var(--card-bg) 0%, #0d2618 100%);
+}
+
+[data-theme="dark"] a {
+  color: var(--primary);
+}
+
+[data-theme="dark"] .hunt-card {
+  color: var(--text);
+}
+
+[data-theme="dark"] .points-badge {
+  color: var(--dark);
+}
+
+[data-theme="dark"] select.form-control {
+  background: var(--card-bg);
+  color: var(--text);
+}
+
 /* ─── Footer ──────────────────────────────────────────── */
 .footer {
   text-align: center;
   padding: 1.5rem;
   color: var(--muted);
   font-size: 0.8rem;
-  border-top: 1px solid #dfe6e9;
+  border-top: 1px solid var(--border);
   margin-top: auto;
 }