feat: Dan Mode v2 — no grey anywhere, maximum neon

- Override --pico-box-shadow (had grey rgba values) with pure magenta/yellow glow
- Article/card: white bg, magenta border, yellow+magenta box-shadow
- Inputs/selects: yellow bg, magenta border, blue text (!important to beat Pico specificity)
- Dropdown: yellow bg, magenta border
- Footer: yellow bg, magenta border, red text
- Sharp corners (--pico-border-radius: 0) for brutalist aesthetic
- Hotkey hint: magenta
- Nav hover: red
- Header: yellow + red drop-shadow

src/app.css

@@ -61,56 +61,98 @@
 
   /* Base */
   --pico-background-color: #ffffff;
-  --pico-color: #0000ff;             /* pure electric blue body text */
+  --pico-color: #0000ff;
-  --pico-muted-color: #ff6600;       /* screaming orange for muted text */
+  --pico-muted-color: #ff6600;
   --pico-muted-border-color: #ff00ff;
+  --pico-border-radius: 0;           /* sharp corners — brutalist */
 
-  /* Cards */
+  /* Pico's default box-shadow has grey in it — nuke it */
+  --pico-box-shadow: 0 0 0 2px #ff00ff, 0 0 12px 2px #ffff00;
+
+  /* Cards / article */
   --pico-card-background-color: #ffffff;
-  --pico-card-border-color: #ff00ff; /* magenta borders */
+  --pico-card-border-color: #ff00ff;
-  --pico-card-box-shadow: 0 0 12px 2px #ffff00, 0 0 4px 1px #ff00ff;
+  --pico-card-box-shadow: 0 0 0 2px #ff00ff, 0 0 12px 4px #ffff00;
+  --pico-card-sectioning-background-color: #ffff00;
 
   /* Primary — nuclear yellow */
   --pico-primary: #cccc00;
   --pico-primary-background: #ffff00;
-  --pico-primary-border: #cccc00;
+  --pico-primary-border: #ff0000;
-  --pico-primary-hover: #aaaa00;
+  --pico-primary-hover: #ff0000;
-  --pico-primary-hover-background: #eeee00;
+  --pico-primary-hover-background: #ff0000;
-  --pico-primary-hover-border: #aaaa00;
+  --pico-primary-hover-border: #ff0000;
-  --pico-primary-focus: rgba(255, 255, 0, 0.6);
+  --pico-primary-focus: rgba(255, 0, 0, 0.6);
-  --pico-primary-inverse: #000000;   /* black text on yellow buttons */
+  --pico-primary-inverse: #000000;
 
   /* Secondary — hot magenta */
   --pico-secondary: #ff00ff;
-  --pico-secondary-background: #dd00dd;
+  --pico-secondary-background: #ff00ff;
   --pico-secondary-border: #ff00ff;
   --pico-secondary-hover: #ff44ff;
-  --pico-secondary-hover-background: #ff00ff;
+  --pico-secondary-hover-background: #cc00cc;
-  --pico-secondary-inverse: #ffffff;
+  --pico-secondary-hover-border: #cc00cc;
+  --pico-secondary-inverse: #ffff00;
+  --pico-secondary-focus: rgba(255, 0, 255, 0.5);
 
   /* Contrast */
   --pico-contrast: #000000;
   --pico-contrast-background: #000000;
   --pico-contrast-inverse: #ffff00;
 
-  /* Form elements */
+  /* Form elements — bright yellow bg, magenta borders, blue text */
-  --pico-form-element-background-color: #ffffcc;
+  --pico-form-element-background-color: #ffff00;
+  --pico-form-element-selected-background-color: #ffcc00;
   --pico-form-element-border-color: #ff00ff;
   --pico-form-element-color: #0000ff;
+  --pico-form-element-placeholder-color: #0000cc;
+  --pico-form-element-active-background-color: #ffff00;
   --pico-form-element-active-border-color: #ff0000;
-  --pico-form-element-focus-color: rgba(255, 0, 255, 0.5);
+  --pico-form-element-focus-color: rgba(255, 0, 0, 0.7);
+
+  /* Dropdown */
+  --pico-dropdown-background-color: #ffff00;
+  --pico-dropdown-border-color: #ff00ff;
+  --pico-dropdown-color: #0000ff;
+  --pico-dropdown-hover-background-color: #ff00ff;
 
   /* App-specific */
-  --color-label: #ff0000;            /* red labels */
+  --color-label: #ff0000;
 }
 
-/* Dan Mode: result tile text — override the [role=button] white-text reset */
+/* Body background */
+[data-theme=dan] body {
+  background-color: #ffffff;
+}
+
+/* Article (ConverterCard wrapper) — override Pico's grey box-shadow */
+[data-theme=dan] article {
+  background: #ffffff;
+  border: 2px solid #ff00ff;
+  box-shadow: 0 0 0 2px #ffff00, 0 0 20px 4px #ff00ff;
+}
+
+/* Input + select — yellow bg, magenta border, blue text */
+[data-theme=dan] input,
+[data-theme=dan] select {
+  background-color: #ffff00 !important;
+  border-color: #ff00ff !important;
+  color: #0000ff !important;
+}
+
+[data-theme=dan] input:focus,
+[data-theme=dan] select:focus {
+  border-color: #ff0000 !important;
+  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.5) !important;
+}
+
+/* Dan Mode: result tile */
 [data-theme=dan] .result-tile {
   --pico-color: initial;
   color: #0000ff;
   background-color: #ffffff;
-  border-color: #ff00ff;
+  border: 2px solid #ff00ff;
-  box-shadow: 0 0 8px 1px #ffff00;
+  box-shadow: 0 0 6px 1px #ffff00;
 }
 
 [data-theme=dan] .result-tile:hover,
@@ -118,7 +160,7 @@
   background-color: #ffff00;
   border-color: #ff0000;
   color: #000000;
-  box-shadow: 0 0 16px 4px #ff00ff;
+  box-shadow: 0 0 16px 4px #ff00ff, 0 0 4px 1px #ff0000;
 }
 
 [data-theme=dan] .result-label {
@@ -129,7 +171,11 @@
 [data-theme=dan] .highlighted-result {
   background-color: #ffff00;
   border-color: #ff0000 !important;
-  box-shadow: 0 0 20px 4px #ff00ff;
+  box-shadow: 0 0 0 2px #ff00ff, 0 0 20px 6px #ff0000;
+}
+
+[data-theme=dan] .highlighted-placeholder {
+  color: #ff0000;
 }
 
 [data-theme=dan] .highlighted-eq-from,
@@ -145,6 +191,7 @@
 [data-theme=dan] header {
   background-color: #ffff00;
   border-bottom: 3px solid #ff00ff;
+  box-shadow: 0 4px 0 #ff0000;
 }
 
 [data-theme=dan] header strong {
@@ -153,6 +200,23 @@
 
 [data-theme=dan] header nav a {
   color: #0000ff !important;
+  font-weight: 700;
+}
+
+[data-theme=dan] header nav a:hover {
+  color: #ff0000 !important;
+}
+
+/* Hotkey hint */
+[data-theme=dan] .hotkey-hint {
+  color: #ff00ff;
+}
+
+/* Footer */
+[data-theme=dan] footer {
+  background-color: #ffff00;
+  border-top: 3px solid #ff00ff;
+  color: #ff0000;
 }
 
 /* ── Results grid ──────────────────────────────────────────────────────────── */