Change settings

src/views/LiveView.vue

@@ -436,179 +436,176 @@ watch(
 </script>
 
 <!-- Global brand tokens (unscoped to ensure cascade) -->
-<style>
-:root{
-  /* AMA gradient: rgb(0,0,185) → rgb(240,0,15) */
-  --ama-start: 0, 0, 185;
-  --ama-end:   240, 0, 15;
-
-  /* Metals */
-  --gold:   #D4AF37;
-  --silver: #C0C0C0;
-  --bronze: #CD7F32;
-
-  /* Finance tints */
-  --pos-bg: #E9F7EF;
-  --pos-fg: #0e7a3a;
-  --pos-br: #d7f0e0;
-
-  --neg-bg: #FBEAEA;
-  --neg-fg: #B91C1C;
-  --neg-br: #F3DADA;
-
-  --card-bg-1: #ffffff;
-  --card-bg-2: #f9faff;
+<!-- Paste this inside your Live view component as the full style -->
+<style scoped>
+/* ======= Page ======= */
+.live{
+  max-width:1280px;
+  margin:0 auto;
+  padding:18px 24px 64px;
+  color:var(--ink-900);
+  background: radial-gradient(ellipse at 30% -10%, #fdfdfd 0%, var(--surface-2) 60%, var(--surface-0) 100%);
 }
-</style>
 
-<style scoped>
-.live { max-width: 1280px; margin: 0 auto; padding: 18px 24px 64px; background: radial-gradient(ellipse at 30% -10%, #fdfdfd 0%, #f6f8ff 60%, #ffffff 100%); color: #0f172a; }
-
-/* toolbar */
-.toolbar {
-  position: sticky; top: 0; z-index: 10;
-  display: flex; align-items: center; justify-content: space-between; gap: 16px;
-  padding: 12px 0 14px;
-  background: #ffffff; color: #0f172a;
-  border-bottom: 2px solid rgba(var(--ama-end), .15);
+/* ======= Toolbar (assets + mode) ======= */
+.toolbar{
+  position:sticky; top:0; z-index:10;
+  display:flex; align-items:center; justify-content:space-between; gap:16px;
+  padding:12px 0 14px; background:var(--surface-0);
+  border-bottom:2px solid rgba(var(--ama-end), .15);
   backdrop-filter: blur(10px);
 }
-.toolbar__right { display: flex; align-items: center; gap: 12px; }
+.toolbar__right{ display:flex; align-items:center; gap:12px; }
 
-/* Asset tabs */
-.asset-tabs {
-  display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px;
-  background: #ffffff; border: 1px solid #E1E6F0;
-  box-shadow: 0 2px 8px rgba(0,0,0,.04);
+/* ======= Asset tabs ======= */
+.asset-tabs{
+  display:inline-flex; gap:6px; padding:4px;
+  border-radius:12px; background:var(--surface-0);
+  border:1px solid var(--bd-subtle); box-shadow:0 2px 8px rgba(0,0,0,.04);
 }
-.asset-tab {
-  min-width: 54px; height: 32px; padding: 0 10px;
-  border-radius: 8px; border: 1px solid transparent;
-  background: transparent; color: #0f172a; font-weight: 800; letter-spacing: .02em;
-  transition: all .2s ease; cursor: pointer;
+.asset-tab{
+  min-width:54px; height:32px; padding:0 10px;
+  border-radius:8px; border:1px solid transparent;
+  background:transparent; color:var(--ink-900);
+  font-weight:800; letter-spacing:.02em; cursor:pointer; transition:all .2s ease;
 }
-.asset-tab:hover { color: rgb(var(--ama-end)); border-color: rgba(var(--ama-end), .28); }
-.asset-tab.is-active {
-  color: #fff; border: none;
+.asset-tab:hover{ color:rgb(var(--ama-end)); border-color:rgba(var(--ama-end), .28); }
+.asset-tab.is-active{
+  color:#fff; border:none;
   background: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
   box-shadow: 0 0 0 1px rgba(var(--ama-end), .22), 0 8px 18px rgba(var(--ama-end), .22);
 }
 
-/* Segmented mode switch */
-.mode-switch {
-  display: inline-grid; grid-template-columns: 1fr 1fr;
-  border-radius: 12px; overflow: hidden;
-  border: 1px solid #E1E6F0; background: #ffffff;
-  box-shadow: 0 2px 8px rgba(0,0,0,.04);
+/* ======= Mode switch ($ / %) ======= */
+.mode-switch{
+  display:inline-grid; grid-template-columns:1fr 1fr;
+  border-radius:12px; overflow:hidden;
+  border:1px solid var(--bd-subtle); background:var(--surface-0);
+  box-shadow:0 2px 8px rgba(0,0,0,.04);
 }
-.mode-switch__btn {
-  height: 32px; min-width: 44px; padding: 0 12px; font-weight: 800; letter-spacing: .02em;
-  color: #0f172a; background: transparent; border: none; cursor: pointer;
-  transition: all .2s ease;
+.mode-switch__btn{
+  height:32px; min-width:44px; padding:0 12px;
+  font-weight:800; letter-spacing:.02em; border:none; background:transparent;
+  color:var(--ink-900); cursor:pointer; transition:all .2s ease;
 }
-.mode-switch__btn:not(.is-active):hover { color: rgb(var(--ama-end)); background: #f8fafc; }
-.mode-switch__btn.is-active {
-  color: #fff;
+.mode-switch__btn:not(.is-active):hover{ color:rgb(var(--ama-end)); background:#f8fafc; }
+.mode-switch__btn.is-active{
+  color:#fff;
   background: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
   box-shadow: inset 0 -1px 0 rgba(255,255,255,.2);
 }
 
-/* panels */
-.panel { background: #ffffff; border: 1px solid #E7ECF3; border-radius: 16px; margin-top: 16px; }
-.panel--chart { padding: 10px; }
-.panel--cards { padding: 16px; }
-
-/* empty */
-.empty { padding: 20px; border: 1px dashed #D7DDE7; border-radius: 12px; color: #6B7280; font-size: .95rem; background: #ffffff; text-align: center; }
-
-/* grid */
-.cards-grid-f1 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
-
-/* card base with subtle AMA hue */
-.card-f1 {
-  position: relative;
-  display: grid;
-  grid-template-rows: auto auto auto auto auto;
-  gap: 10px;
-  padding: 18px 18px 20px;
-  min-height: 230px;
-  border-radius: 16px;
-  background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 75%,var(--card-bg-1) 100%);
-  border: 1px solid rgba(0,0,0,0.05);
-  box-shadow: 0 2px 10px rgba(var(--ama-start), .05), 0 6px 20px rgba(var(--ama-end), .08);
-  color: #0f172a;
-  transition: transform .25s ease, box-shadow .25s ease;
+/* ======= Panels ======= */
+.panel{ background:var(--surface-0); border:1px solid var(--bd-soft); border-radius:16px; margin-top:16px; }
+.panel--chart{ padding:10px; }
+.panel--cards{ padding:16px; }
+
+/* ======= Empty State ======= */
+.empty{
+  padding:20px; border:1px dashed var(--bd-soft); border-radius:12px;
+  color:var(--ink-600); font-size:.95rem; background:var(--surface-0); text-align:center;
 }
-.card-f1:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
-.card-f1.bh { border-style: dashed; }
-
-/* podium metals */
-.card-f1.gold   { border-color: var(--gold);   box-shadow: 0 0 0 1px rgba(212,175,55,.32), 0 10px 28px rgba(212,175,55,.18); }
-.card-f1.silver { border-color: var(--silver); box-shadow: 0 0 0 1px rgba(192,192,192,.28), 0 10px 28px rgba(192,192,192,.14); }
-.card-f1.bronze { border-color: var(--bronze); box-shadow: 0 0 0 1px rgba(205,127,50,.28), 0 10px 28px rgba(205,127,50,.14); }
-.podium-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
-.card-f1.gold   .podium-ribbon { background: linear-gradient(90deg, #f6e27a, var(--gold)); }
-.card-f1.silver .podium-ribbon { background: linear-gradient(90deg, #e9eef2, var(--silver)); }
-.card-f1.bronze .podium-ribbon { background: linear-gradient(90deg, #f0c6a1, var(--bronze)); }
-
-/* head */
-.head { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 12px; }
-.logo { width: 44px; height: 44px; border-radius: 12px; background: #f3f4f6; display: grid; place-items: center; overflow: hidden; border: 1px solid #E5E7EB; }
-.logo img { width: 100%; height: 100%; object-fit: contain; }
-.logo__fallback { width: 60%; height: 60%; border-radius: 6px; background: #e5e7eb; }
-.names { min-width: 0; }
-.agent { font-size: 16px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.model { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-/* KPIs */
-.kpis { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
-.kpi__label { font-size: 12px; color: #6b7280; }
-.kpi__value { font-size: clamp(18px, 2.2vw, 25px); font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
-.kpi__pill{
-  display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius: 999px;
-  border:1px solid #E7ECF3; background:#F6F8FB; color:#0f172a;
+
+/* ======= Grid ======= */
+.cards-grid-f1{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
+
+/* ======= Cards (Tournament) ======= */
+.card-f1{
+  position:relative;
+  display:grid; grid-template-rows:auto auto auto auto auto; gap:10px;
+  padding:18px 18px 20px; min-height:230px; border-radius:16px;
+  background: linear-gradient(145deg, var(--surface-0), var(--surface-2) 75%, var(--surface-0) 100%);
+  border:1px solid rgba(0,0,0,.05);
+  box-shadow:0 2px 10px rgba(var(--ama-start), .05), 0 6px 20px rgba(var(--ama-end), .08);
+  color:var(--ink-900); transition: transform .25s ease, box-shadow .25s ease;
+}
+.card-f1:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); }
+.card-f1.bh{ border-style:dashed; }
+
+/* Podium metals (attach .gold/.silver/.bronze) */
+.card-f1.gold{
+  border-color:var(--gold);
+  box-shadow:0 0 0 1px rgba(212,175,55,.32), 0 10px 28px rgba(212,175,55,.18);
+}
+.card-f1.silver{
+  border-color:var(--silver);
+  box-shadow:0 0 0 1px rgba(192,192,192,.28), 0 10px 28px rgba(192,192,192,.14);
 }
-.kpi__pill.pos{ color: var(--pos-fg); background: var(--pos-bg); border-color: var(--pos-br); }
-.kpi__pill.neg{ color: var(--neg-fg); background: var(--neg-bg); border-color: var(--neg-br); }
-.align-right{ text-align:right; }
-
-/* Quality row */
-.quality{
-  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
-  padding: 2px 0 0;
+.card-f1.bronze{
+  border-color:var(--bronze);
+  box-shadow:0 0 0 1px rgba(205,127,50,.28), 0 10px 28px rgba(205,127,50,.14);
 }
+
+/* Optional thin ribbon bar on podium cards */
+.podium-ribbon{ position:absolute; top:0; left:0; right:0; height:6px; border-top-left-radius:16px; border-top-right-radius:16px; }
+.card-f1.gold   .podium-ribbon{ background: linear-gradient(90deg, #f6e27a, var(--gold)); }
+.card-f1.silver .podium-ribbon{ background: linear-gradient(90deg, #e9eef2, var(--silver)); }
+.card-f1.bronze .podium-ribbon{ background: linear-gradient(90deg, #f0c6a1, var(--bronze)); }
+
+/* ======= Card: Head ======= */
+.head{ display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:12px; }
+.logo{ width:44px; height:44px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; overflow:hidden; border:1px solid #E5E7EB; }
+.logo img{ width:100%; height:100%; object-fit:contain; }
+.logo__fallback{ width:60%; height:60%; border-radius:6px; background:#e5e7eb; }
+.names{ min-width:0; }
+.agent{ font-size:16px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.model{ font-size:11px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+/* ======= KPIs (Net Value + P&L) ======= */
+.kpis{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px; }
+.kpi__label{ font-size:12px; color:var(--ink-600); }
+.kpi__value{ font-size: clamp(18px, 2.2vw, 25px); font-weight:700; letter-spacing:-.01em; color:var(--ink-900); }
+.kpi__pill{
+  display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px;
+  border:1px solid var(--bd-soft); background:#F6F8FB; color:var(--ink-900);
+}
+.kpi__pill.pos{ color:var(--pos-fg); background:var(--pos-bg); border-color:var(--pos-br); }
+.kpi__pill.neg{ color:var(--neg-fg); background:var(--neg-bg); border-color:var(--neg-br); }
+
+/* ======= Quality (Sharpe, MaxDD) ======= */
+.quality{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 0; }
 .qitem{ display:flex; align-items:baseline; gap:8px; }
-.qitem__label{ font-size:12px; color:#6b7280; }
-.qitem__value{ font-size:14px; font-weight:800; color:#0f172a; }
-.qitem__value.strong{ color:#0e7a3a; }
-.qitem__value.dd{ color:#B91C1C; }
-
-/* Stats row */
-.stats{
-  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
-  font-size:12px; color:#374151;
+.qitem__label{ font-size:12px; color:var(--ink-600); }
+.qitem__value{ font-size:14px; font-weight:800; color:var(--ink-900); }
+.qitem__value.strong{ color:var(--pos-fg); }
+.qitem__value.dd-pos{ color:var(--pos-fg); }    /* small drawdown */
+.qitem__value.dd-mid{ color:var(--ink-900); }   /* medium drawdown */
+.qitem__value.dd-neg{ color:var(--neg-fg); }    /* large drawdown */
+
+/* ======= Stats (WinRate, Trades, Days) ======= */
+.stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; font-size:12px; color:var(--ink-700); }
+.stat{ display:flex; align-items:center; justify-content:space-between; background:#F8FAFD; border:1px solid var(--bd-soft); border-radius:10px; padding:6px 8px; }
+.stat__label{ color:var(--ink-600); }
+.stat__val{ font-weight:800; color:var(--ink-900); }
+.stat__val.pos{ color:var(--pos-fg); }
+.stat__val.neg{ color:var(--neg-fg); }
+
+/* ======= Bar vs B&H ======= */
+.bar{ height:6px; border-radius:999px; background:#F2F4F8; overflow:hidden; border:1px solid var(--bd-soft); margin:2px 0 8px; }
+.bar span{ display:block; height:100%; width:var(--bar, 40%); transition:width .5s ease;
+  background: linear-gradient(90deg,#16a34a,#22c55e);
 }
-.stat{ display:flex; align-items:center; justify-content:space-between; background:#F8FAFD; border:1px solid #E7ECF3; border-radius:10px; padding:6px 8px; }
-.stat__label{ color:#6b7280; }
-.stat__val{ font-weight:800; }
-.stat__val.pos{ color: var(--pos-fg); }
-.stat__val.neg{ color: var(--neg-fg); }
-
-/* Bar vs B&H */
-.bar { height: 6px; border-radius: 999px; background: #F2F4F8; overflow: hidden; border: 1px solid #E7ECF3; margin: 2px 0 8px; }
-.bar span { display: block; height: 100%; background: linear-gradient(90deg,#16a34a,#22c55e); width: var(--bar, 40%); transition: width .5s ease; }
-.bar.neg span { background: linear-gradient(90deg,#ef4444,#dc2626); }
-
-/* Meta row */
-.meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
-.chip.gap{
+.bar.neg span{ background: linear-gradient(90deg,#ef4444,#dc2626); }
+
+/* ======= Meta (Gap vs B&H chip + EOD) ======= */
+.meta{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
+.chip{
   display:inline-flex; align-items:center; gap:6px;
   font-size:12px; font-weight:800; padding:4px 8px; border-radius:999px;
-  background:#F6F8FB; color:#0f172a; border:1px solid #E7ECF3;
+  background:#F6F8FB; color:var(--ink-900); border:1px solid var(--bd-soft);
 }
-.chip.gap.pos{ color: var(--pos-fg); background: var(--pos-bg); border-color: var(--pos-br); }
-.chip.gap.neg{ color: var(--neg-fg); background: var(--neg-bg); border-color: var(--neg-br); }
+.chip.pos{ color:var(--pos-fg); background:var(--pos-bg); border-color:var(--pos-br); }
+.chip.neg{ color:var(--neg-fg); background:var(--neg-bg); border-color:var(--neg-br); }
 .chip__label{ opacity:.8; }
 .chip__value{ font-variant-numeric: tabular-nums; }
-.eod{ font-size:12px; color:#6b7280; }
+.eod{ font-size:12px; color:var(--ink-600); }
+
+/* ======= Responsive ======= */
+@media (max-width: 900px){
+  .stats{ grid-template-columns:1fr 1fr; }
+}
+@media (max-width: 640px){
+  .cards-grid-f1{ grid-template-columns:1fr; }
+  .kpi__value{ font-size:22px; }
+}
 </style>