:root {
  --bg: #0b0e13;
  --panel: #131722;
  --panel-2: #1a2030;
  --border: #232b3d;
  --text: #d7dde8;
  --muted: #7c8698;
  --green: #26a69a;
  --red: #ef5350;
  --accent: #5b8def;
  --mono: "SF Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
}
.brand span { color: var(--accent); }

.env-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}

#app { padding: 20px; max-width: 1280px; margin: 0 auto; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

.pos { color: var(--green); }
.neg { color: var(--red); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--accent); }

.card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 4px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge.active { color: var(--green); border-color: var(--green); }
.badge.stopped, .badge.loss_halt { color: var(--red); border-color: var(--red); }
.badge.label { color: var(--accent); border-color: var(--accent); }
.badge.connectivity.external { color: var(--accent); border-color: var(--accent); }
.badge.connectivity.internal { color: var(--muted); }
.badge.obs { color: var(--muted); }
.badge.health.succeeded, .badge.succeeded {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 65%, var(--border));
}
.badge.health.failed, .badge.health.timed_out, .badge.failed {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 65%, var(--border));
}

.big-number {
  font-family: var(--mono);
  font-size: 22px;
  margin: 8px 0 2px;
}

.card .sub { font-size: 12px; color: var(--muted); }

.agent-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.latest-decision {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--panel-2);
  font-size: 12px;
}
.latest-decision .name {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.6px;
}
.latest-decision .decision-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spark { margin-top: 10px; height: 48px; }
.spark svg { width: 100%; height: 100%; display: block; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

.detail-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.detail-head h1 { font-size: 20px; margin: 0; }
.detail-head a { color: var(--accent); text-decoration: none; font-size: 13px; }

.layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.layer {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}
.layer .name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 6px;
}
.layer .value { font-family: var(--mono); font-size: 17px; }
.layer .obs { margin-top: 6px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
th {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
td.num, th.num { text-align: right; font-family: var(--mono); }

.chart-wrap { height: 320px; }

.u-legend { font-family: var(--mono); font-size: 12px; }

.activity-list { max-height: 260px; overflow-y: auto; }
.activity-item {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.activity-item .time { color: var(--muted); font-family: var(--mono); }

.trajectory-filters {
  display: flex;
  gap: 8px;
  margin: -2px 0 12px;
  flex-wrap: wrap;
}
.trajectory-filters select,
.trajectory-filters input {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--panel-2);
  padding: 5px 9px;
  font: inherit;
}
.trajectory-filters input { flex: 1; min-width: 180px; }

.trajectory-entry {
  position: relative;
  border-top: 1px solid var(--border);
  background: transparent;
}
.trajectory-entry:last-child { border-bottom: 1px solid var(--border); }
.trajectory-entry[hidden] { display: none; }

.trajectory-summary {
  display: grid;
  grid-template-columns: 12px 78px minmax(90px, 0.65fr) 76px minmax(190px, 2fr)
    132px 88px 62px 20px;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 8px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.trajectory-summary::-webkit-details-marker { display: none; }
.trajectory-summary::before {
  content: "›";
  color: var(--muted);
  margin-right: -5px;
}
.trajectory-entry[open] > .trajectory-summary::before { transform: rotate(90deg); }
.trajectory-time, .trajectory-duration, .trajectory-price {
  font-family: var(--mono);
  color: var(--muted);
}
.trajectory-market {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trajectory-outcome { color: var(--muted); }
.verification { font-weight: 700; text-align: center; }
.verification.verified { color: var(--green); }
.verification.failed { color: var(--red); }
.verification.incomplete { color: #d7a44a; }

.trajectory-hover {
  display: none;
  position: absolute;
  z-index: 5;
  top: 40px;
  left: 172px;
  max-width: min(620px, calc(100vw - 60px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #20283a;
  box-shadow: 0 8px 24px #0008;
  color: var(--text);
  font-size: 12px;
}
@media (hover: hover) {
  .trajectory-entry:not([open]):hover > .trajectory-hover { display: block; }
}

.trajectory-details {
  padding: 14px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.detail-grid section {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}
.detail-grid h3 {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.detail-grid p { margin: 4px 0; }
.market-review-list { margin: 0; padding-left: 18px; }
.market-review-list li { margin: 5px 0; }
.market-review-list .sub { display: block; }
.risk-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 2px solid var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
  color: #e7b4b3;
}
.raw-records { margin-top: 12px; }
.raw-records > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 11px;
}
.raw-records pre {
  overflow: auto;
  max-height: 360px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: pre-wrap;
  font: 10px/1.45 var(--mono);
  color: var(--muted);
}
.secondary-id { color: var(--muted); font-size: 10px; margin-left: 5px; }
.market-link { color: var(--text); text-decoration-color: var(--accent); }

.decision-action {
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
  text-transform: uppercase;
}
.decision-action.trade { color: var(--accent); }
.decision-action.abstain { color: var(--muted); }
.decision-action.failed { color: var(--red); }
.decision-action.unreported { color: #d7a44a; }
.decision-report p { margin: 8px 0; }
.trade-result .badge { display: inline-block; margin-top: 8px; }

@media (max-width: 1000px) {
  .trajectory-summary {
    grid-template-columns: 12px 68px 90px 68px minmax(160px, 1fr) 112px 78px 20px;
  }
  .trajectory-duration { display: none; }
}

@media (max-width: 620px) {
  #app { padding: 12px; }
  .trajectory-summary {
    grid-template-columns: 58px 1fr 58px 18px;
    gap: 6px;
    align-items: center;
  }
  .trajectory-summary::before { display: none; }
  .trajectory-summary > strong { overflow: hidden; text-overflow: ellipsis; }
  .trajectory-market { grid-column: 1 / -1; white-space: normal; }
  .trajectory-price { grid-column: 1 / 3; }
  .trajectory-outcome { grid-column: 3 / 5; text-align: right; }
  .trajectory-duration { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .trajectory-hover { display: none !important; }
  th, td { padding: 6px; }
}