diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css
index ce6e2a4..85e09e8 100644
--- a/manual_trading_hub/static/app.css
+++ b/manual_trading_hub/static/app.css
@@ -56,6 +56,18 @@ html[data-theme="dark"] {
   --display: "Orbitron", var(--font);
   --mono: var(--font);
   --layout-max: 1520px;
+  --archive-chart-bg: rgba(0, 0, 0, 0.12);
+  --archive-axis-fg: rgba(255, 255, 255, 0.42);
+  --archive-grid-stroke: rgba(255, 255, 255, 0.06);
+  --archive-grid-zero-stroke: rgba(255, 255, 255, 0.16);
+  --archive-viz-surface: rgba(0, 0, 0, 0.12);
+  --archive-viz-surface-border: rgba(255, 255, 255, 0.05);
+  --archive-viz-kpi-bg: rgba(255, 255, 255, 0.04);
+  --archive-viz-kpi-border: rgba(255, 255, 255, 0.06);
+  --archive-viz-track-bg: rgba(255, 255, 255, 0.08);
+  --archive-viz-mid-line: rgba(255, 255, 255, 0.2);
+  --archive-profit: #4cd97f;
+  --archive-loss: #ff6b6b;
   color-scheme: dark;
 }
 
@@ -111,6 +123,18 @@ html[data-theme="light"] {
   --ai-sum-heading-bg: rgba(201, 53, 82, 0.08);
   --ai-sum-heading-border: rgba(201, 53, 82, 0.42);
   --ai-sum-name: #7a182c;
+  --archive-chart-bg: var(--chart-surface);
+  --archive-axis-fg: var(--muted);
+  --archive-grid-stroke: rgba(20, 34, 50, 0.1);
+  --archive-grid-zero-stroke: rgba(20, 34, 50, 0.28);
+  --archive-viz-surface: var(--inset-surface-strong);
+  --archive-viz-surface-border: var(--border-soft);
+  --archive-viz-kpi-bg: var(--bg-elevated);
+  --archive-viz-kpi-border: var(--border-soft);
+  --archive-viz-track-bg: var(--chart-bar-bg);
+  --archive-viz-mid-line: rgba(20, 34, 50, 0.22);
+  --archive-profit: var(--green);
+  --archive-loss: var(--red);
   color-scheme: light;
 }
 
@@ -7236,8 +7260,8 @@ body.funds-fullscreen-open {
   gap: 4px;
   padding: 10px 8px;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--archive-viz-kpi-bg);
+  border: 1px solid var(--archive-viz-kpi-border);
   min-width: 0;
 }
 .archive-viz-kpi-val {
@@ -7267,8 +7291,8 @@ body.funds-fullscreen-open {
   height: 68px;
   border-radius: 50%;
   background: conic-gradient(
-    #4cd97f 0 calc(var(--win-pct) * 1%),
-    #ff6b6b calc(var(--win-pct) * 1%) 100%
+    var(--archive-profit) 0 calc(var(--win-pct) * 1%),
+    var(--archive-loss) calc(var(--win-pct) * 1%) 100%
   );
   display: flex;
   align-items: center;
@@ -7280,7 +7304,7 @@ body.funds-fullscreen-open {
   position: absolute;
   inset: 8px;
   border-radius: 50%;
-  background: var(--inset-surface, #141923);
+  background: var(--inset-surface);
 }
 .archive-viz-ring-label {
   position: relative;
@@ -7302,15 +7326,15 @@ body.funds-fullscreen-open {
   min-width: 0;
   padding: 10px;
   border-radius: 10px;
-  background: rgba(0, 0, 0, 0.12);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--archive-viz-surface);
+  border: 1px solid var(--archive-viz-surface-border);
 }
 .archive-viz-stacked {
   display: flex;
   height: 22px;
   border-radius: 6px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--archive-viz-track-bg);
 }
 .archive-viz-stacked-seg {
   display: flex;
@@ -7324,10 +7348,10 @@ body.funds-fullscreen-open {
   overflow: hidden;
 }
 .archive-viz-stacked-seg--profit {
-  background: linear-gradient(90deg, #2f9f62, #4cd97f);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--archive-profit) 72%, #000), var(--archive-profit));
 }
 .archive-viz-stacked-seg--loss {
-  background: linear-gradient(90deg, #c44a4a, #ff6b6b);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--archive-loss) 72%, #000), var(--archive-loss));
 }
 .archive-viz-stacked-meta {
   display: flex;
@@ -7345,10 +7369,10 @@ body.funds-fullscreen-open {
   vertical-align: middle;
 }
 .archive-viz-legend--profit::before {
-  background: #4cd97f;
+  background: var(--archive-profit);
 }
 .archive-viz-legend--loss::before {
-  background: #ff6b6b;
+  background: var(--archive-loss);
 }
 .archive-viz-legend--net {
   font-weight: 700;
@@ -7376,7 +7400,7 @@ body.funds-fullscreen-open {
   position: relative;
   height: 12px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--archive-viz-track-bg);
   overflow: hidden;
 }
 .archive-viz-div-mid {
@@ -7385,7 +7409,7 @@ body.funds-fullscreen-open {
   top: 0;
   bottom: 0;
   width: 1px;
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--archive-viz-mid-line);
   transform: translateX(-50%);
   z-index: 1;
 }
@@ -7397,10 +7421,10 @@ body.funds-fullscreen-open {
   border-radius: 2px;
 }
 .archive-viz-div-fill--profit {
-  background: linear-gradient(90deg, #2f9f62, #4cd97f);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--archive-profit) 72%, #000), var(--archive-profit));
 }
 .archive-viz-div-fill--loss {
-  background: linear-gradient(270deg, #c44a4a, #ff6b6b);
+  background: linear-gradient(270deg, color-mix(in srgb, var(--archive-loss) 72%, #000), var(--archive-loss));
 }
 .archive-viz-hold-grid {
   display: grid;
@@ -7413,7 +7437,8 @@ body.funds-fullscreen-open {
   gap: 4px;
   padding: 8px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--archive-viz-kpi-bg);
+  border: 1px solid var(--archive-viz-kpi-border);
 }
 .archive-viz-hold-val {
   font-size: 0.95rem;
@@ -7421,10 +7446,10 @@ body.funds-fullscreen-open {
   font-variant-numeric: tabular-nums;
 }
 .archive-viz-hold-card--win .archive-viz-hold-val {
-  color: #4cd97f;
+  color: var(--archive-profit);
 }
 .archive-viz-hold-card--loss .archive-viz-hold-val {
-  color: #ff6b6b;
+  color: var(--archive-loss);
 }
 .archive-viz-hold-lbl {
   font-size: 0.64rem;
@@ -7433,7 +7458,7 @@ body.funds-fullscreen-open {
 .archive-viz-bar-track {
   height: 10px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--archive-viz-track-bg);
   overflow: hidden;
 }
 .archive-viz-bar-fill {
@@ -7443,10 +7468,10 @@ body.funds-fullscreen-open {
   transition: width 0.25s ease;
 }
 .archive-viz-bar-fill--profit {
-  background: linear-gradient(90deg, #2f9f62, #4cd97f);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--archive-profit) 72%, #000), var(--archive-profit));
 }
 .archive-viz-bar-fill--loss {
-  background: linear-gradient(90deg, #c44a4a, #ff6b6b);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--archive-loss) 72%, #000), var(--archive-loss));
 }
 .archive-viz-empty {
   margin: 0;
@@ -7478,8 +7503,8 @@ body.funds-fullscreen-open {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  font-size: 0.58rem;
-  color: rgba(255, 255, 255, 0.42);
+  font-size: 0.64rem;
+  color: var(--archive-axis-fg);
   font-variant-numeric: tabular-nums;
   padding: 2px 0 14px;
   text-align: right;
@@ -7495,26 +7520,28 @@ body.funds-fullscreen-open {
   height: 96px;
   display: block;
   border-radius: 8px;
-  background: rgba(0, 0, 0, 0.12);
+  background: var(--archive-chart-bg);
+  border: 1px solid var(--archive-viz-surface-border);
 }
 .archive-cum-xaxis {
   display: flex;
   justify-content: space-between;
-  font-size: 0.58rem;
-  color: rgba(255, 255, 255, 0.42);
+  font-size: 0.64rem;
+  color: var(--archive-axis-fg);
   font-variant-numeric: tabular-nums;
   padding: 0 2px;
 }
 .archive-cum-foot {
-  font-size: 0.62rem;
+  font-size: 0.66rem;
   line-height: 1.35;
+  color: var(--archive-axis-fg);
 }
 .archive-cum-grid {
-  stroke: rgba(255, 255, 255, 0.06);
+  stroke: var(--archive-grid-stroke);
   stroke-width: 1;
 }
 .archive-cum-grid--zero {
-  stroke: rgba(255, 255, 255, 0.16);
+  stroke: var(--archive-grid-zero-stroke);
   stroke-dasharray: 4 4;
 }
 .archive-cum-line {
@@ -7524,23 +7551,23 @@ body.funds-fullscreen-open {
   stroke-linecap: round;
 }
 .archive-cum-line--up {
-  stroke: #4cd97f;
+  stroke: var(--archive-profit);
 }
 .archive-cum-line--down {
-  stroke: #ff6b6b;
+  stroke: var(--archive-loss);
 }
 .archive-cum-dot {
-  stroke: rgba(0, 0, 0, 0.35);
+  stroke: color-mix(in srgb, var(--text) 22%, transparent);
   stroke-width: 1;
 }
 .archive-cum-dot--up {
-  fill: #4cd97f;
+  fill: var(--archive-profit);
 }
 .archive-cum-dot--down {
-  fill: #ff6b6b;
+  fill: var(--archive-loss);
 }
 .archive-cum-dot--last {
-  stroke: rgba(255, 255, 255, 0.35);
+  stroke: color-mix(in srgb, var(--text) 28%, transparent);
   stroke-width: 1.5;
 }
 @media (max-width: 520px) {
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index abf94aa..b92d3ff 100644
--- a/manual_trading_hub/static/index.html
+++ b/manual_trading_hub/static/index.html
@@ -1229,7 +1229,7 @@
   <script src="/assets/plan.js?v=20260614-plan-refresh"></script>
   <script src="/assets/calculator.js?v=3"></script>
   <script src="/assets/trade_stats_calendar.js?v=3"></script>
-  <script src="/assets/archive.js?v=20260710-archive-cum"></script>
+  <script src="/assets/archive.js?v=20260710-archive-cum2"></script>
   <script src="/assets/funds.js?v=20260707-hub-options-funds"></script>
   <script src="/assets/dashboard.js?v=20260708-options-expiry-cd"></script>
   <script src="/assets/strategy.js?v=3"></script>