1 files changed, 45 insertions, 1 deletions

diff --git a/frontend/app/options.css b/frontend/app/options.css
index 2841932..cff0162 100644
--- a/frontend/app/options.css
+++ b/frontend/app/options.css
@@ -343,6 +343,7 @@
   border-radius: var(--r-3); overflow: hidden;
   box-shadow: var(--shadow-1);
   display: flex; flex-direction: column;
+  --opt-chain-group-row-offset: 23px;
 }
 .opt-chain-head {
   padding: var(--sp-3) var(--sp-4);
@@ -366,6 +367,7 @@
 .opt-chain th.group {
   font-family: var(--font-display); font-style: italic;
   font-size: var(--fs-14); text-transform: none; letter-spacing: 0; padding-bottom: 0;
+  text-align: center;
 }
 .opt-chain td {
   font-family: var(--font-mono); font-variant-numeric: tabular-nums;
@@ -377,18 +379,60 @@
 .opt-chain-wrap.compact .opt-chain-head { padding: var(--sp-2) var(--sp-3); }
 .opt-chain-wrap.compact .opt-chain-head h3 { font-size: var(--fs-16); }
 .opt-chain-wrap.compact .opt-chain-head .sub { font-size: 10px; }
+.opt-chain-wrap.compact { --opt-chain-group-row-offset: 21px; }
 .opt-chain td.k { text-align: center; color: var(--fg-2); font-weight: 500; }
 .opt-chain td.itm { color: var(--fg-1); }
 .opt-chain td.otm { color: var(--fg-3); }
 .opt-chain td.dim { color: var(--fg-4); font-size: var(--fs-12); }
 .opt-chain td.iv { color: var(--brass); }
+.opt-chain thead tr:first-child th {
+  box-sizing: border-box;
+  height: var(--opt-chain-group-row-offset);
+  line-height: 1;
+  padding-top: 0;
+  padding-bottom: 0;
+  top: 0;
+  z-index: 3;
+}
+.opt-chain thead tr:nth-child(2) th {
+  top: var(--opt-chain-group-row-offset);
+  z-index: 2;
+}
 .opt-chain tr { cursor: pointer; transition: background 100ms; }
 .opt-chain tr:hover { background: rgba(194,170,122,0.05); }
 .opt-chain tr.atm td { background: rgba(194,170,122,0.10); }
 .opt-chain tr.atm td.k { color: var(--brass-bright); font-weight: 600; }
 .opt-chain tr.selected td { background: rgba(194,170,122,0.22); }
 .opt-chain tr.selected td.k { color: var(--brass-bright); }
-.opt-chain-scroll { max-height: 540px; overflow: auto; }
+.opt-chain-scroll {
+  max-height: 540px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line-3) var(--ink-0);
+}
+
+.opt-chain-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.opt-chain-scroll::-webkit-scrollbar-track {
+  background: var(--ink-0);
+}
+
+.opt-chain-scroll::-webkit-scrollbar-thumb {
+  background: var(--line-3);
+  border-radius: var(--r-1);
+  border: 1px solid var(--ink-0);
+}
+
+.opt-chain-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--brass-deep);
+}
+
+.opt-chain-scroll::-webkit-scrollbar-corner {
+  background: var(--ink-0);
+}
 
 .opt-chart-card {
   background: var(--ink-1); border: 1px solid var(--line-1);