From 0c9ea0e3f2ed9d058ea40eae27783ca93fa60042 Mon Sep 17 00:00:00 2001
From: "Aaron D. Lee" <aaron.daniel.lee@mgial.com>
Date: Wed, 7 Jan 2026 20:14:02 -0500
Subject: [PATCH] Accordion headers: gold left border, warmer tint, visible
 chevrons

---
 frontends/web/templates/decode.html | 21 +++++++++++++++------
 frontends/web/templates/encode.html | 21 +++++++++++++++------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/frontends/web/templates/decode.html b/frontends/web/templates/decode.html
index 36a2597..0e5fd9c 100644
--- a/frontends/web/templates/decode.html
+++ b/frontends/web/templates/decode.html
@@ -6,20 +6,29 @@
 <style>
 /* Accordion styling */
 .step-accordion .accordion-button {
-    background: rgba(30, 40, 50, 0.6);
+    background: rgba(35, 45, 55, 0.8);
     color: #fff;
     padding: 0.75rem 1rem;
-    border-left: 3px solid transparent;
+    border-left: 3px solid rgba(255, 230, 153, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     transition: all 0.3s ease;
 }
+.step-accordion .accordion-button:hover {
+    background: rgba(45, 55, 65, 0.9);
+    border-left-color: rgba(255, 230, 153, 0.5);
+}
 .step-accordion .accordion-button:not(.collapsed) {
-    background: linear-gradient(90deg, rgba(99, 179, 237, 0.15) 0%, rgba(40, 50, 60, 0.8) 40%, rgba(40, 50, 60, 0.8) 100%);
+    background: linear-gradient(90deg, rgba(255, 230, 153, 0.12) 0%, rgba(40, 50, 60, 0.85) 40%, rgba(40, 50, 60, 0.85) 100%);
     color: #fff;
-    box-shadow: inset 0 1px 0 rgba(99, 179, 237, 0.1);
-    border-left: 3px solid rgba(99, 179, 237, 0.6);
+    box-shadow: inset 0 1px 0 rgba(255, 230, 153, 0.1);
+    border-left: 3px solid #ffe699;
 }
 .step-accordion .accordion-button::after {
-    filter: invert(1);
+    filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg);
+    opacity: 0.7;
+}
+.step-accordion .accordion-button:hover::after {
+    opacity: 1;
 }
 .step-accordion .accordion-body {
     background: rgba(30, 40, 50, 0.4);
diff --git a/frontends/web/templates/encode.html b/frontends/web/templates/encode.html
index 0da0767..ce84b46 100644
--- a/frontends/web/templates/encode.html
+++ b/frontends/web/templates/encode.html
@@ -6,20 +6,29 @@
 <style>
 /* Accordion styling */
 .step-accordion .accordion-button {
-    background: rgba(30, 40, 50, 0.6);
+    background: rgba(35, 45, 55, 0.8);
     color: #fff;
     padding: 0.75rem 1rem;
-    border-left: 3px solid transparent;
+    border-left: 3px solid rgba(255, 230, 153, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     transition: all 0.3s ease;
 }
+.step-accordion .accordion-button:hover {
+    background: rgba(45, 55, 65, 0.9);
+    border-left-color: rgba(255, 230, 153, 0.5);
+}
 .step-accordion .accordion-button:not(.collapsed) {
-    background: linear-gradient(90deg, rgba(99, 179, 237, 0.15) 0%, rgba(40, 50, 60, 0.8) 40%, rgba(40, 50, 60, 0.8) 100%);
+    background: linear-gradient(90deg, rgba(255, 230, 153, 0.12) 0%, rgba(40, 50, 60, 0.85) 40%, rgba(40, 50, 60, 0.85) 100%);
     color: #fff;
-    box-shadow: inset 0 1px 0 rgba(99, 179, 237, 0.1);
-    border-left: 3px solid rgba(99, 179, 237, 0.6);
+    box-shadow: inset 0 1px 0 rgba(255, 230, 153, 0.1);
+    border-left: 3px solid #ffe699;
 }
 .step-accordion .accordion-button::after {
-    filter: invert(1);
+    filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg);
+    opacity: 0.7;
+}
+.step-accordion .accordion-button:hover::after {
+    opacity: 1;
 }
 .step-accordion .accordion-body {
     background: rgba(30, 40, 50, 0.4);