From 321fc7e392a1d8e55f4a9d0ec8caeed1315886e5 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 16:26:36 -0400
Subject: [PATCH 1/5] Adjust gap sizes in DomainCard component

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/components/DomainCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DomainCard.tsx b/src/components/DomainCard.tsx
index 74cfc5c..ddf898f 100644
--- a/src/components/DomainCard.tsx
+++ b/src/components/DomainCard.tsx
@@ -154,8 +154,8 @@ export function DomainCard({
           spineClassName,
         ].join(' ')}
       >
-        <div className="flex items-start gap-3">
-          <span className="grid shrink-0 justify-items-center gap-2">
+        <div className="flex items-start gap-3.5">
+          <span className="grid shrink-0 justify-items-center gap-2.5">
             <span
               className={[
                 'ops-domain-glyph inline-flex h-9 w-9 items-center justify-center rounded-[2px] border border-ops-border-soft bg-ops-surface-base',
@@ -202,7 +202,7 @@ export function DomainCard({
             role="radiogroup"
             aria-label={`${sector.label} status`}
             aria-describedby={describedBy}
-            className="mt-3 grid grid-cols-3 gap-2"
+            className="mt-3 grid grid-cols-3 gap-2.5"
           >
             {STATUS_OPTIONS.map((option, optionIndex) => {
               const content = getStatusContent(option);

From 0762b1ffe466542ae8ec214cefdfb1f2cf63515f Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 16:27:01 -0400
Subject: [PATCH 2/5] Adjust padding in HeaderTelemetry component

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/components/HeaderTelemetry.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderTelemetry.tsx b/src/components/HeaderTelemetry.tsx
index a2a2865..7bbfcd6 100644
--- a/src/components/HeaderTelemetry.tsx
+++ b/src/components/HeaderTelemetry.tsx
@@ -173,7 +173,7 @@ function TelemetryChip({
   return (
     <div
       className={[
-        'ops-telemetry-chip min-h-[var(--ops-chip-min-h-lg)] px-3 py-3.5 text-left lg:px-4',
+        'ops-telemetry-chip min-h-[var(--ops-chip-min-h-lg)] px-3.5 py-4 text-left lg:px-4',
         isShimmering ? 'ops-telemetry-chip-shimmer' : '',
         isAttention ? 'ops-telemetry-chip-attention' : '',
         isPrimary ? 'ops-telemetry-chip-primary' : '',

From a61db8172639636e46bbc5a2521afb3f12b37088 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 16:27:38 -0400
Subject: [PATCH 3/5] Refactor TodayPanel styles for improved clarity

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/checkin/TodayPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/checkin/TodayPanel.tsx b/src/features/checkin/TodayPanel.tsx
index f0869f6..fa1840a 100644
--- a/src/features/checkin/TodayPanel.tsx
+++ b/src/features/checkin/TodayPanel.tsx
@@ -70,7 +70,7 @@ function DayCompletionRollup({
   return (
     <div
       className={[
-        'ops-day-rollup tactical-subpanel-strong mb-4 grid gap-4 p-4 sm:p-5 lg:grid-cols-[auto_minmax(0,1fr)] lg:items-center',
+        'ops-day-rollup ops-rollup-spine tactical-subpanel-strong mb-4 grid gap-4 p-4 sm:p-5 lg:grid-cols-[auto_minmax(0,1fr)] lg:items-center',
         isComplete ? 'ops-day-rollup-complete ops-complete-badge' : '',
       ].join(' ')}
     >
@@ -235,7 +235,7 @@ export function TodayPanel({
         </div>
       ) : null}
 
-      <div className="ops-flat-panel mb-4 px-4 py-3">
+      <div className="ops-direct-select-brief ops-flat-panel-strong mb-4 px-4 py-3">
         <p
           id={directSelectHintId}
           className="text-sm leading-6 text-ops-text-secondary lg:text-base lg:leading-7"

From 2fa1c186eea933d14ef008f1b902e597f7df9ec2 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 16:28:12 -0400
Subject: [PATCH 4/5] Fix grid class for export panel layout

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/export/exportPanelShared.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/export/exportPanelShared.tsx b/src/features/export/exportPanelShared.tsx
index a864a9f..77b14ef 100644
--- a/src/features/export/exportPanelShared.tsx
+++ b/src/features/export/exportPanelShared.tsx
@@ -54,7 +54,7 @@ export function AccordionSection({
           ].join(' ')}
         >
           <span className="ops-export-accordion-cap clip-notched ops-notch-chip shrink-0" />
-          <span className="grid min-w-0 flex-1 gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
+          <span className="grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto] items-start gap-3 sm:items-center">
             <span className="min-w-0">
               <span className="ops-eyebrow block text-xs font-semibold text-ops-text-muted">
                 {title}
@@ -64,7 +64,7 @@ export function AccordionSection({
               </span>
             </span>
             {statusChip ? (
-              <span className="flex shrink-0 sm:justify-end">{statusChip}</span>
+              <span className="flex shrink-0 justify-end">{statusChip}</span>
             ) : null}
           </span>
         </button>

From 7475ee1eb930ea7939f5a9b0e30c2183824a1beb Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 16:29:01 -0400
Subject: [PATCH 5/5] Refactor styles for grid cells and buttons

Updated various styles for grid cells, buttons, and cards to enhance visual appearance and consistency. Added gradients, adjusted box shadows, and modified background properties.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/styles/index.css | 259 ++++++++++++++++++++++++++++++-------------
 1 file changed, 179 insertions(+), 80 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index de08d2f..a8354a0 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -871,6 +871,7 @@ h3,
 }
 
 .ops-grid-cell {
+  position: relative;
   display: grid;
   place-items: center;
   width: 100%;
@@ -885,23 +886,33 @@ h3,
 }
 
 .ops-grid-nominal {
-  background: rgba(110, 231, 183, var(--ops-accent-a-4));
-  color: #042c1d;
-  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.1);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 36%),
+    rgba(110, 231, 183, var(--ops-accent-a-4));
+  color: #032719;
+  box-shadow:
+    inset 0 0 0 1px rgba(110, 231, 183, 0.22),
+    inset 0 -1px 0 rgba(4, 44, 29, 0.34);
 }
 
 .ops-grid-degraded {
-  background: rgba(245, 158, 11, 0.62);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 36%),
+    rgba(245, 158, 11, 0.62);
   color: #fff3c4;
   box-shadow:
-    inset 0 0 0 1px rgba(245, 158, 11, 0.2),
+    inset 0 0 0 1px rgba(245, 158, 11, 0.32),
     inset 0 -1px 0 rgba(74, 42, 4, 0.5);
 }
 
 .ops-grid-unmarked {
-  background: var(--ops-status-unmarked-bg);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 40%),
+    var(--ops-status-unmarked-bg);
   color: var(--ops-status-unmarked-text);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
 }
 
 .ops-grid-unmarked-mark {
@@ -927,9 +938,9 @@ h3,
   --ops-sector-spine-color: var(--ops-status-unmarked-border);
   box-shadow:
     inset var(--ops-sector-spine-width) 0 0 var(--ops-sector-spine-color),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05),
-    inset 0 0 0 1px var(--color-ops-border-soft),
-    inset 0 -24px 42px rgba(10, 15, 13, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 0 0 1px var(--color-ops-panel-border-strong),
+    inset 0 -32px 56px rgba(4, 8, 7, 0.2),
     0 0 0 1px rgba(255, 255, 255, 0.02);
   transition:
     box-shadow var(--ops-motion-fast),
@@ -950,10 +961,12 @@ h3,
 
 .ops-domain-glyph {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 48%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 48%),
     var(--ops-sector-tint, var(--color-ops-surface-base));
   border-color: var(--ops-sector-border, var(--color-ops-border-soft));
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
   transition:
     border-color var(--ops-motion-fast),
     color var(--ops-motion-fast),
@@ -995,12 +1008,18 @@ h3,
 }
 
 .ops-domain-card {
-  box-shadow: var(--ops-elevation-1);
+  box-shadow:
+    var(--ops-elevation-1),
+    0 0 0 1px rgba(255, 255, 255, 0.025);
+  transition:
+    box-shadow var(--ops-motion-fast),
+    transform var(--ops-motion-fast);
 }
 
 .ops-domain-card > div {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 24%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 24%),
+    linear-gradient(0deg, rgba(4, 8, 7, 0.28), transparent 38%),
     radial-gradient(
       ellipse 85% 58% at 50% 0,
       var(--ops-sector-tint, rgba(110, 231, 183, 0.05)),
@@ -1009,6 +1028,13 @@ h3,
     var(--color-ops-surface-raised);
 }
 
+.ops-domain-card:hover,
+.ops-domain-card:focus-within {
+  box-shadow:
+    var(--ops-elevation-2),
+    0 0 0 1px rgba(110, 231, 183, 0.08);
+}
+
 .ops-domain-title {
   font-family: var(--font-mono);
   letter-spacing: var(--ops-tracking-title);
@@ -1018,6 +1044,16 @@ h3,
   color: color-mix(in srgb, var(--color-ops-text-secondary) 88%, transparent);
 }
 
+.ops-direct-select-brief {
+  position: relative;
+  overflow: hidden;
+  box-shadow:
+    inset 3px 0 0 var(--color-ops-border-struct),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
+    inset 0 0 0 1px var(--color-ops-panel-border-strong);
+}
+
 .ops-section-spine-fault {
   box-shadow:
     inset 4px 0 0 var(--ops-status-degraded-border),
@@ -1336,16 +1372,22 @@ h3,
   position: relative;
   overflow: hidden;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.035), transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.045), transparent 42%),
     rgba(10, 15, 13, 0.16);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
 }
 
 .ops-telemetry-chip-primary {
   background:
-    linear-gradient(180deg, rgba(110, 231, 183, 0.08), transparent 54%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.05), transparent 46%),
+    linear-gradient(180deg, rgba(110, 231, 183, 0.12), transparent 54%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.075), transparent 46%),
     rgba(10, 15, 13, 0.18);
+  box-shadow:
+    inset 0 1px 0 rgba(183, 247, 218, 0.16),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.34);
 }
 
 .ops-telemetry-label-row,
@@ -1358,14 +1400,16 @@ h3,
 }
 
 .ops-telemetry-label-row {
-  margin-bottom: 0.55rem;
+  margin-bottom: 0.65rem;
 }
 
 .ops-telemetry-register {
   flex: 0 0 auto;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(10, 15, 13, 0.34);
-  padding: 0.125rem 0.35rem;
+  border: 1px solid var(--color-ops-panel-border-strong);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 46%),
+    rgba(10, 15, 13, 0.42);
+  padding: 0.175rem 0.4rem;
   font-family: var(--font-mono);
   font-size: 0.625rem;
   font-weight: 600;
@@ -1412,16 +1456,16 @@ h3,
 
 .ops-telemetry-spark {
   display: flex;
-  height: 14px;
+  height: 16px;
   align-items: end;
   gap: 2px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  background: linear-gradient(
-      180deg,
-      transparent 50%,
-      rgba(255, 255, 255, 0.035) 50%
-    )
-    left bottom / 100% 2px no-repeat;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-top-color: rgba(255, 255, 255, 0.05);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%),
+    linear-gradient(180deg, transparent 52%, rgba(255, 255, 255, 0.045) 52%)
+      left bottom / 100% 2px no-repeat;
+  padding: 2px;
 }
 
 .ops-telemetry-spark-segment {
@@ -1452,12 +1496,14 @@ h3,
 .ops-telemetry-spark-today-tick::after {
   content: '';
   position: absolute;
-  right: -1px;
-  bottom: -1px;
-  width: 2px;
-  height: 16px;
+  right: -2px;
+  bottom: -2px;
+  width: 3px;
+  height: 18px;
   background: var(--color-ops-accent);
-  box-shadow: 0 0 10px rgba(110, 231, 183, 0.2);
+  box-shadow:
+    0 0 0 1px rgba(10, 15, 13, 0.72),
+    0 0 10px rgba(110, 231, 183, 0.18);
 }
 
 .ops-telemetry-grid > .ops-telemetry-chip {
@@ -1534,6 +1580,7 @@ h3,
   position: relative;
   overflow: hidden;
   border-radius: 2px;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
   transition:
     box-shadow var(--ops-motion-fast),
     background-color var(--ops-motion-fast),
@@ -1543,17 +1590,18 @@ h3,
 }
 
 .ops-radio-chip-ghost {
-  border-color: rgba(255, 255, 255, 0.16);
+  border-color: rgba(255, 255, 255, 0.18);
   background:
     linear-gradient(
       180deg,
-      rgba(255, 255, 255, 0.028),
+      rgba(255, 255, 255, 0.04),
       rgba(255, 255, 255, 0) 32%
     ),
     rgba(16, 22, 19, 0.78);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.035),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
 }
 
 .ops-radio-chip-ghost:hover {
@@ -1571,9 +1619,9 @@ h3,
   box-shadow:
     0 0 0 1px
       color-mix(in srgb, var(--ops-radio-chip-status-border) 88%, white 12%),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    inset 0 -2px 0 rgba(0, 0, 0, 0.32),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    inset 0 -2px 0 rgba(0, 0, 0, 0.42),
     var(--ops-focus-ring-base-shadow);
 }
 
@@ -1585,7 +1633,10 @@ h3,
   width: 1.5rem;
   height: 2px;
   background: var(--ops-radio-chip-status-border);
-  box-shadow: 0 0 10px var(--ops-radio-chip-status-border);
+  box-shadow:
+    0 0 0 1px rgba(10, 15, 13, 0.38),
+    0 0 8px
+      color-mix(in srgb, var(--ops-radio-chip-status-border) 60%, transparent);
   transform: translateX(-50%);
 }
 
@@ -1593,7 +1644,7 @@ h3,
   --ops-radio-chip-status-border: var(--ops-status-nominal-border);
   border-color: var(--ops-status-nominal-border);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
     rgba(110, 231, 183, 0.28);
   color: #dcffef;
 }
@@ -1602,7 +1653,7 @@ h3,
   --ops-radio-chip-status-border: var(--ops-status-degraded-border);
   border-color: var(--ops-status-degraded-border);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
     rgba(245, 158, 11, 0.28);
   color: #fff1c2;
 }
@@ -1611,7 +1662,7 @@ h3,
   --ops-radio-chip-status-border: rgba(255, 255, 255, 0.28);
   border-color: rgba(255, 255, 255, 0.28);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
     rgba(64, 76, 70, 0.64);
   color: #d5ddd9;
 }
@@ -1630,9 +1681,10 @@ h3,
 
 .ops-history-selected-row-header {
   box-shadow:
-    inset 3px 0 0 var(--ops-sector-border, var(--ops-today-rail)),
+    inset 4px 0 0 var(--ops-sector-border, var(--ops-today-rail)),
     inset 0 -1px 0 var(--color-ops-border-soft),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
 }
 
 .ops-history-cell {
@@ -1648,23 +1700,25 @@ h3,
 
 .ops-history-today-header {
   box-shadow:
-    inset 0 2px 0 var(--ops-status-nominal-border),
+    inset 0 3px 0 var(--ops-status-nominal-border),
     inset 1px 0 0 var(--ops-today-rail),
-    inset -1px 0 0 var(--ops-today-rail);
+    inset -1px 0 0 var(--ops-today-rail),
+    inset 0 -1px 0 rgba(110, 231, 183, 0.2);
 }
 
 .ops-history-today-cell {
   box-shadow:
     inset 1px 0 0 var(--ops-today-rail),
-    inset -1px 0 0 rgba(110, 231, 183, 0.22);
+    inset -1px 0 0 rgba(110, 231, 183, 0.26),
+    inset 0 0 0 1px rgba(110, 231, 183, 0.08);
 }
 
 .ops-history-week-boundary {
   padding-left: 0.5rem;
   box-shadow:
     inset 2px 0 0
-      color-mix(in srgb, var(--color-ops-accent-deep) 54%, transparent),
-    inset 3px 0 0 rgba(255, 255, 255, 0.04);
+      color-mix(in srgb, var(--color-ops-accent-deep) 68%, transparent),
+    inset 4px 0 0 rgba(255, 255, 255, 0.055);
 }
 
 .ops-history-week-band {
@@ -1675,26 +1729,30 @@ h3,
   box-shadow:
     inset 1px 0 0 var(--ops-today-rail),
     inset -1px 0 0 var(--ops-today-rail),
-    inset 0 2px 0 var(--ops-status-nominal-border);
+    inset 0 3px 0 var(--ops-status-nominal-border),
+    inset 0 -1px 0 rgba(110, 231, 183, 0.2);
 }
 
 .ops-history-today-cell.ops-history-week-boundary {
   box-shadow:
     inset 1px 0 0 var(--ops-today-rail),
-    inset -1px 0 0 rgba(110, 231, 183, 0.22);
+    inset -1px 0 0 rgba(110, 231, 183, 0.26),
+    inset 0 0 0 1px rgba(110, 231, 183, 0.08);
 }
 
 .ops-history-selected-column-header {
   box-shadow:
-    inset 0 2px 0 var(--color-ops-border-strong),
-    inset 1px 0 0 rgba(255, 255, 255, 0.07),
-    inset -1px 0 0 rgba(255, 255, 255, 0.05);
+    inset 0 3px 0 var(--color-ops-border-strong),
+    inset 1px 0 0 rgba(255, 255, 255, 0.09),
+    inset -1px 0 0 rgba(255, 255, 255, 0.07),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .ops-history-selected-column {
   box-shadow:
-    inset 1px 0 0 rgba(255, 255, 255, 0.08),
-    inset -1px 0 0 rgba(255, 255, 255, 0.05);
+    inset 1px 0 0 rgba(255, 255, 255, 0.1),
+    inset -1px 0 0 rgba(255, 255, 255, 0.07),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
 }
 
 .ops-mobile-week-pip {
@@ -1707,18 +1765,26 @@ h3,
 }
 
 .ops-mobile-week-status {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 38%),
+    var(--color-ops-surface-overlay);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.09),
     inset 0 0 0 1px var(--color-ops-panel-border-strong),
     inset 0 -12px 24px rgba(4, 8, 7, 0.18);
 }
 
 .ops-mobile-week-state-chip {
   border-color: var(--color-ops-panel-border-strong);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
 }
 
 .ops-mobile-day-button {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.055),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
 }
 
 .ops-mobile-day-button[aria-pressed='true'] {
@@ -1728,7 +1794,8 @@ h3,
     rgba(110, 231, 183, 0.16);
   box-shadow:
     inset 0 0 0 1px var(--ops-status-nominal-border),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    inset 0 -1px 0 rgba(2, 44, 28, 0.36);
 }
 
 .ops-mobile-day-button-selected {
@@ -1753,26 +1820,35 @@ h3,
   position: relative;
   overflow: hidden;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.08), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 30%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.1), transparent 36%),
+    linear-gradient(0deg, rgba(4, 8, 7, 0.22), transparent 42%),
     var(--color-ops-surface-raised);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    inset 0 0 0 1px var(--color-ops-panel-border-strong),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.36);
 }
 
 .ops-rollup-count-plate {
   border: 1px solid var(--color-ops-panel-border-strong);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
-    rgba(10, 15, 13, 0.3);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 42%),
+    rgba(10, 15, 13, 0.38);
   padding: 0.75rem 0.875rem;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
+    var(--ops-elevation-1);
 }
 
 .ops-day-rollup-meter {
+  border: 1px solid var(--color-ops-panel-border-strong);
+  background: rgba(4, 8, 7, 0.34);
   box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.03),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    0 0 0 1px rgba(255, 255, 255, 0.035),
+    inset 0 1px 0 rgba(255, 255, 255, 0.055),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.36);
 }
 
 .ops-rollup-pip-cell {
@@ -1780,8 +1856,9 @@ h3,
   overflow: hidden;
   color: var(--color-ops-text-secondary);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.05),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+    inset 0 1px 0 rgba(255, 255, 255, 0.075),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
 }
 
 .ops-rollup-pip-cell::before {
@@ -1804,9 +1881,9 @@ h3,
 
 .ops-rollup-pip-indicator {
   position: absolute;
-  right: 0.35rem;
-  bottom: 0.25rem;
-  left: 0.35rem;
+  right: 0.32rem;
+  bottom: 0.28rem;
+  left: 0.32rem;
   height: 2px;
   background: var(--ops-status-unmarked-border);
 }
@@ -2183,10 +2260,16 @@ h3,
 
 .ops-signal-card {
   --ops-signal-rail: var(--color-ops-border-struct);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.035), transparent 44%),
+    var(--color-ops-surface-raised);
   box-shadow:
     inset 4px 0 0 var(--ops-signal-rail),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05),
-    inset 0 0 0 1px var(--color-ops-panel-border-strong);
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
+    inset 0 0 0 1px var(--color-ops-panel-border-strong),
+    var(--ops-elevation-1);
 }
 
 .ops-signal-card-safe {
@@ -2199,6 +2282,8 @@ h3,
 
 .ops-export-accordion-trigger {
   --ops-accordion-cap-color: rgba(110, 231, 183, 0.32);
+  position: relative;
+  overflow: hidden;
   transition-duration: var(--ops-motion-slow-duration);
   transition-timing-function: var(--ops-motion-select);
 }
@@ -2224,16 +2309,25 @@ h3,
 }
 
 .ops-export-accordion-trigger-open {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
+    var(--ops-tint-1);
   box-shadow:
     inset 6px 0 0 var(--ops-accordion-cap-color),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
     inset 0 0 0 1px var(--color-ops-panel-border-strong),
     var(--ops-elevation-1);
 }
 
 .ops-export-accordion-trigger-collapsed:hover {
-  background: var(--ops-tint-2);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
+    var(--ops-tint-2);
   box-shadow:
     inset 4px 0 0 var(--ops-accordion-cap-color),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
     var(--ops-elevation-1);
   transform: translateY(-1px);
 }
@@ -2243,12 +2337,17 @@ h3,
   min-height: 28px;
   align-self: stretch;
   background: var(--ops-accordion-cap-color);
-  box-shadow: 0 0 10px rgba(110, 231, 183, 0.1);
+  box-shadow:
+    0 0 0 1px rgba(10, 15, 13, 0.32),
+    0 0 10px color-mix(in srgb, var(--ops-accordion-cap-color) 34%, transparent);
 }
 
 .ops-export-accordion-trigger-open .ops-export-accordion-cap {
   width: 6px;
   background: var(--ops-accordion-cap-color);
+  box-shadow:
+    0 0 0 1px rgba(10, 15, 13, 0.4),
+    0 0 12px color-mix(in srgb, var(--ops-accordion-cap-color) 42%, transparent);
 }
 
 @media (prefers-reduced-motion: reduce) {