From a8f6c38a6cb54dc87d6b9f43656a8637025f1cb9 Mon Sep 17 00:00:00 2001
From: Metacube <metacube@gmail.com>
Date: Sun, 24 May 2026 09:35:56 +0200
Subject: [PATCH] Add trading cockpit styles

---
 trade_web/static/styles.css | 885 ++++++++++++++++++++++++++++++++++++
 1 file changed, 885 insertions(+)
 create mode 100644 trade_web/static/styles.css

diff --git a/trade_web/static/styles.css b/trade_web/static/styles.css
new file mode 100644
index 0000000..d67c891
--- /dev/null
+++ b/trade_web/static/styles.css
@@ -0,0 +1,885 @@
+:root {
+  color-scheme: light;
+  --bg: #ebe4d8;
+  --surface: rgba(247, 241, 230, 0.88);
+  --surface-solid: #f7f1e6;
+  --surface-2: #efe7da;
+  --surface-3: #e4dacb;
+  --text: #26231f;
+  --muted: #716a60;
+  --line: rgba(58, 49, 39, 0.14);
+  --shadow: 0 18px 48px rgba(68, 55, 38, 0.12);
+  --shadow-soft: 0 8px 24px rgba(68, 55, 38, 0.08);
+  --blue: #3867c8;
+  --green: #257b50;
+  --orange: #9a6416;
+  --red: #b94a42;
+  --grey: #948b7e;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background:
+    linear-gradient(180deg, #f3eddf 0%, #ebe4d8 48%, #e1d7c7 100%);
+  color: var(--text);
+  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.shell {
+  width: min(1220px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 24px 0 42px;
+}
+
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: 20px;
+  margin-bottom: 18px;
+}
+
+h1, h2, h3, p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 28px;
+  font-weight: 760;
+}
+
+h2 {
+  font-size: 46px;
+  line-height: 1;
+  font-weight: 780;
+}
+
+h3 {
+  font-size: 15px;
+  margin-bottom: 12px;
+  font-weight: 720;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+select,
+input,
+button {
+  height: 36px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(248, 242, 231, 0.76);
+  color: var(--text);
+  padding: 0 11px;
+  font: inherit;
+}
+
+select,
+input {
+  box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.75);
+}
+
+button {
+  cursor: pointer;
+  background: var(--blue);
+  border-color: rgba(56, 103, 200, 0.62);
+  color: #fffaf1;
+  font-weight: 720;
+  box-shadow: 0 8px 18px rgba(10, 132, 255, 0.18);
+}
+
+button:hover:not(:disabled) {
+  filter: brightness(0.98);
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+  box-shadow: none;
+}
+
+.demo-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+}
+
+.muted,
+#updated,
+small {
+  color: var(--muted);
+}
+
+.signal-band,
+.panel,
+.timeframe,
+.summary-strip article {
+  background: var(--surface);
+  border: 1px solid rgba(255, 250, 241, 0.58);
+  border-radius: 8px;
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(18px);
+}
+
+.signal-band {
+  display: grid;
+  grid-template-columns: minmax(280px, 1fr) minmax(360px, 0.95fr);
+  gap: 18px;
+  padding: 24px;
+  margin-bottom: 14px;
+  box-shadow: var(--shadow);
+}
+
+.decision-status {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 18px;
+}
+
+.decision-copy {
+  max-width: 760px;
+  margin-top: 8px;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+.decision-foot {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+}
+
+.decision-foot span {
+  color: var(--muted);
+}
+
+.signal-blockers {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.signal-blockers span {
+  border: 1px solid rgba(185, 74, 66, 0.26);
+  border-radius: 999px;
+  background: rgba(185, 74, 66, 0.08);
+  color: #7b2c27;
+  padding: 5px 9px;
+  font-size: 12px;
+  font-weight: 680;
+}
+
+.signal-blockers span.ok {
+  border-color: rgba(37, 123, 80, 0.26);
+  background: rgba(37, 123, 80, 0.08);
+  color: var(--green);
+}
+
+.signal-light {
+  width: 66px;
+  height: 66px;
+  border-radius: 50%;
+  background: var(--grey);
+  border: 6px solid rgba(255, 250, 241, 0.70);
+  box-shadow: 0 10px 30px rgba(139, 148, 163, 0.28);
+}
+
+.signal-light.green {
+  background: var(--green);
+  box-shadow: 0 12px 34px rgba(31, 164, 99, 0.30);
+}
+
+.signal-light.orange {
+  background: var(--orange);
+  box-shadow: 0 12px 34px rgba(199, 121, 0, 0.26);
+}
+
+.signal-light.red {
+  background: var(--red);
+  box-shadow: 0 12px 34px rgba(185, 74, 66, 0.28);
+}
+
+.signal-numbers {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.signal-numbers span,
+.methodology-block,
+.optimizer-ranking div,
+.quality,
+.chart-card {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 11px;
+}
+
+.signal-numbers strong,
+.signal-numbers small {
+  display: block;
+}
+
+.signal-numbers strong {
+  font-size: 18px;
+  font-weight: 760;
+}
+
+.decision-graphic {
+  background: linear-gradient(180deg, rgba(239, 231, 218, 0.9), rgba(228, 218, 203, 0.72));
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+.decision-graphic-head,
+.gauge-row {
+  display: grid;
+  align-items: center;
+  gap: 10px;
+}
+
+.decision-graphic-head {
+  grid-template-columns: 1fr auto;
+  color: var(--muted);
+}
+
+.decision-graphic-head strong {
+  color: var(--text);
+}
+
+.gauge-row {
+  grid-template-columns: 52px 1fr 44px;
+  font-size: 12px;
+}
+
+.gauge-row label {
+  color: var(--muted);
+  font-weight: 720;
+}
+
+.gauge-row strong {
+  text-align: right;
+}
+
+.gauge-track {
+  position: relative;
+  height: 12px;
+  border-radius: 999px;
+  background: rgba(58, 49, 39, 0.12);
+  overflow: visible;
+}
+
+.gauge-track > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--grey);
+}
+
+.gauge-track.score > span,
+.gauge-track.confidence > span {
+  background: linear-gradient(90deg, var(--orange), var(--green));
+}
+
+.gauge-track.rr > span {
+  background: var(--blue);
+}
+
+.gauge-track i {
+  position: absolute;
+  top: -3px;
+  bottom: -3px;
+  width: 2px;
+  background: rgba(38, 35, 31, 0.55);
+}
+
+.gauge-thresholds {
+  position: absolute;
+  inset: 0;
+}
+
+.gauge-thresholds span {
+  position: absolute;
+  top: 15px;
+  transform: translateX(-50%);
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 680;
+  white-space: nowrap;
+}
+
+.tabs {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  gap: 8px;
+  padding: 8px 0 14px;
+  margin-bottom: 2px;
+  background: rgba(235, 228, 216, 0.86);
+  backdrop-filter: blur(18px);
+  overflow-x: auto;
+}
+
+.tab-button {
+  background: rgba(248, 242, 231, 0.78);
+  border-color: var(--line);
+  color: var(--text);
+  box-shadow: none;
+  white-space: nowrap;
+}
+
+.tab-button.active {
+  background: #2d2923;
+  border-color: #2d2923;
+  color: #fffaf1;
+}
+
+.tab-panel {
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+.summary-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.summary-strip article {
+  padding: 13px;
+}
+
+.summary-strip span,
+.summary-strip strong {
+  display: block;
+}
+
+.summary-strip span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.summary-strip strong {
+  margin-top: 4px;
+  font-weight: 720;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.timeframe,
+.panel {
+  padding: 15px;
+}
+
+.status-row,
+.corr-row,
+.pattern-row,
+.history-row,
+.macro-row {
+  display: grid;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid var(--line);
+  padding: 9px 0;
+}
+
+.status-row {
+  grid-template-columns: 18px 1fr;
+}
+
+.corr-row {
+  grid-template-columns: 1fr 70px 90px;
+}
+
+.pattern-row {
+  grid-template-columns: 120px 1fr;
+}
+
+.history-row {
+  grid-template-columns: 110px 160px 1fr 1.4fr;
+}
+
+.macro-row {
+  grid-template-columns: 18px 1fr;
+  align-items: start;
+}
+
+.timeframe-graphic {
+  display: grid;
+  grid-template-columns: 54px 1fr;
+  gap: 8px;
+  align-items: center;
+  margin: 6px 0 8px;
+}
+
+.tf-score {
+  width: 54px;
+  height: 54px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+}
+
+.tf-score strong {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.tf-score span {
+  color: var(--muted);
+  font-size: 10px;
+  max-width: 48px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tf-score.positive {
+  background: rgba(37, 123, 80, 0.1);
+  border-color: rgba(37, 123, 80, 0.26);
+  color: var(--green);
+}
+
+.tf-score.negative {
+  background: rgba(185, 74, 66, 0.1);
+  border-color: rgba(185, 74, 66, 0.26);
+  color: var(--red);
+}
+
+.tf-stack {
+  height: 10px;
+  display: flex;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(58, 49, 39, 0.12);
+  border: 1px solid rgba(58, 49, 39, 0.08);
+}
+
+.tf-stack span.green {
+  background: var(--green);
+}
+
+.tf-stack span.orange {
+  background: var(--orange);
+}
+
+.tf-stack span.red {
+  background: var(--red);
+}
+
+.tf-dots {
+  grid-column: 2;
+  display: flex;
+  gap: 5px;
+}
+
+.audit-row {
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  gap: 8px;
+}
+
+.audit-row span,
+.audit-row small {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.audit-table {
+  display: grid;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.audit-values {
+  display: grid;
+  grid-template-columns: 52px repeat(6, minmax(0, 1fr));
+  gap: 8px;
+  padding: 8px 0;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.audit-values strong {
+  color: var(--text);
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--grey);
+}
+
+.dot.green {
+  background: var(--green);
+}
+
+.dot.orange {
+  background: var(--orange);
+}
+
+.dot.red {
+  background: var(--red);
+}
+
+.dot.grey {
+  background: var(--grey);
+}
+
+.text-green {
+  color: var(--green);
+}
+
+.text-orange {
+  color: var(--orange);
+}
+
+.text-red {
+  color: var(--red);
+}
+
+.label span,
+.macro-row span,
+.optimizer-ranking span,
+.quality span {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.details-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.methodology-panel,
+.macro-panel,
+.backtest-panel,
+.history-panel {
+  margin-top: 12px;
+}
+
+.panel-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.panel-actions,
+.backtest-meta,
+.macro-summary,
+.chart-legend,
+.progress-line {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.backtest-meta,
+.macro-summary,
+.chart-legend,
+.progress-line {
+  color: var(--muted);
+  margin-bottom: 10px;
+}
+
+.optimizer-progress {
+  margin-bottom: 12px;
+}
+
+.progress-bar {
+  width: min(360px, 100%);
+  height: 10px;
+  background: var(--surface-3);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.progress-bar span {
+  display: block;
+  height: 100%;
+  background: var(--green);
+  transition: width 0.2s ease;
+}
+
+.optimizer-ranking,
+.methodology-grid,
+.macro-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.methodology-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.quality {
+  margin-bottom: 10px;
+}
+
+.quality.pass {
+  border-color: rgba(31, 164, 99, 0.45);
+}
+
+.quality.fail {
+  border-color: rgba(215, 53, 53, 0.42);
+}
+
+.backtest-table {
+  display: grid;
+  gap: 2px;
+}
+
+.backtest-row {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr 70px 80px 80px 60px 70px;
+  gap: 8px;
+  padding: 8px 0;
+  border-top: 1px solid var(--line);
+  align-items: center;
+}
+
+.backtest-row.head {
+  color: var(--muted);
+}
+
+.chart-card {
+  margin-top: 12px;
+  background: var(--surface-solid);
+}
+
+.chart-card svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin-top: 8px;
+}
+
+.chart-card line {
+  stroke: rgba(22, 25, 31, 0.18);
+  stroke-width: 1;
+}
+
+.chart-card text {
+  fill: var(--muted);
+  font-size: 11px;
+  font-weight: 620;
+}
+
+.chart-card .chart-axis {
+  stroke: rgba(38, 35, 31, 0.46);
+  stroke-width: 1.2;
+}
+
+.chart-card .chart-grid line {
+  stroke: rgba(58, 49, 39, 0.11);
+  stroke-width: 1;
+}
+
+.chart-card .chart-zero {
+  stroke: rgba(38, 35, 31, 0.32);
+  stroke-dasharray: 2 4;
+}
+
+.chart-card .chart-split {
+  stroke: rgba(56, 103, 200, 0.44);
+  stroke-dasharray: 5 5;
+}
+
+.chart-card .chart-label {
+  fill: rgba(38, 35, 31, 0.72);
+  font-size: 12px;
+  font-weight: 720;
+}
+
+.chart-point {
+  fill: var(--blue);
+  stroke: var(--surface-solid);
+  stroke-width: 2;
+}
+
+.chart-card path {
+  fill: none;
+  stroke-width: 3;
+}
+
+.price-chart line {
+  stroke: rgba(22, 25, 31, 0.18);
+  stroke-width: 1;
+}
+
+.price-chart rect {
+  stroke-width: 1;
+}
+
+.candle.up line,
+.candle.up rect {
+  fill: rgba(31, 164, 99, 0.18);
+  stroke: var(--green);
+}
+
+.candle.down line,
+.candle.down rect {
+  fill: rgba(215, 53, 53, 0.16);
+  stroke: var(--red);
+}
+
+.trade-marker circle {
+  fill: var(--blue);
+}
+
+.trade-marker line {
+  stroke: rgba(10, 132, 255, 0.44);
+  stroke-dasharray: 4 4;
+}
+
+.trade-marker line.stop {
+  stroke: rgba(215, 53, 53, 0.44);
+}
+
+.trade-marker line.target {
+  stroke: rgba(31, 164, 99, 0.44);
+}
+
+.equity-line {
+  stroke: var(--green);
+}
+
+.drawdown-line {
+  stroke: var(--red);
+}
+
+.history-line {
+  stroke: #51483c;
+}
+
+.forecast-line {
+  stroke: var(--green);
+}
+
+.forecast-band {
+  fill: rgba(37, 123, 80, 0.12);
+  stroke: none;
+}
+
+.metric-chart path,
+.forecast-chart path {
+  fill: none;
+  stroke-width: 3;
+}
+
+.forecast-chart .forecast-band {
+  fill: rgba(37, 123, 80, 0.12);
+}
+
+.methodology-block strong {
+  display: block;
+  margin-bottom: 6px;
+}
+
+.methodology-block ul {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
+}
+
+.warnings {
+  margin-top: 14px;
+  color: #8a5a00;
+}
+
+.warnings div {
+  padding: 8px 0;
+}
+
+@media (max-width: 980px) {
+  .topbar,
+  .signal-band {
+    grid-template-columns: 1fr;
+  }
+
+  h2 {
+    font-size: 36px;
+  }
+
+  .controls {
+    justify-content: flex-start;
+  }
+
+  .decision-foot {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .grid,
+  .details-grid,
+  .methodology-grid,
+  .macro-grid,
+  .optimizer-ranking,
+  .audit-values,
+  .summary-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .signal-numbers {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .gauge-row {
+    grid-template-columns: 44px 1fr 38px;
+  }
+
+  .backtest-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .history-row {
+    grid-template-columns: 1fr;
+  }
+}