:root {
  --bg: #0b0e0c;
  --panel: rgba(20, 25, 22, 0.92);
  --panel-2: #111613;
  --line: #29312c;
  --text: #f1f6f2;
  --muted: #87938b;
  --green: #95f47f;
  --green-2: #45cf72;
  --red: #ff786f;
  --amber: #e8b764;
  --blue: #7bb8ff;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 1080px;
  color: var(--text);
  background:
    radial-gradient(circle at 20% -10%, rgba(75, 181, 100, 0.12), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(74, 120, 96, 0.08), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topbar {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 14, 12, 0.82);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand-block, .top-actions, .panel-heading, .asset-title, .direction-line,
.metric-line, .health-row, .assumption-row { display: flex; align-items: center; }
.brand-block { gap: 14px; }
.mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #4c6455;
  border-radius: 13px;
  color: var(--green);
  font: 700 16px/1 ui-monospace, SFMono-Regular, monospace;
  background: linear-gradient(145deg, rgba(149, 244, 127, 0.13), rgba(149, 244, 127, 0.02));
  box-shadow: inset 0 0 24px rgba(149, 244, 127, 0.05);
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 19px; letter-spacing: -0.02em; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
.eyebrow {
  color: var(--muted);
  font: 600 10px/1.6 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.14em;
}
.top-actions { gap: 12px; }
.live-pill {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  background: #101411;
}
.live-pill span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px currentColor;
}
.live-pill.online { color: var(--green); }
.live-pill.online span { background: var(--green); }
.live-pill.offline { color: var(--red); }
.live-pill.offline span { background: var(--red); }

.button {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--text);
  background: #161c18;
  cursor: pointer;
  font-weight: 650;
}
.button:hover { border-color: #46554b; background: #1a211c; }
.button:disabled { opacity: 0.5; cursor: wait; }

main { padding: 24px 28px 38px; max-width: 1800px; margin: 0 auto; }
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 16px;
}
.summary-card, .panel {
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(24, 30, 26, 0.94), rgba(16, 20, 17, 0.96));
  border-radius: var(--radius);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}
.summary-card { padding: 18px 19px; min-height: 112px; }
.summary-card .label { color: var(--muted); font-size: 12px; }
.summary-card .value { margin-top: 12px; font-size: 27px; font-weight: 720; letter-spacing: -0.035em; }
.summary-card .sub { margin-top: 7px; color: var(--muted); font-size: 11px; }
.value.positive { color: var(--green); }
.value.negative { color: var(--red); }

.workspace {
  display: grid;
  grid-template-columns: minmax(690px, 1.45fr) minmax(390px, 0.75fr);
  gap: 16px;
  align-items: start;
}
.panel-heading { justify-content: space-between; padding: 18px 20px 14px; }
.profit-filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.profit-filter input { accent-color: var(--green-2); }
.table-filters { display: flex; align-items: center; gap: 14px; }
.abnormal-filter input { accent-color: var(--amber); }
.table-wrap { overflow: auto; max-height: calc(100vh - 280px); border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th {
  color: #6f7d74;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  background: #101411;
  position: sticky;
  top: 0;
  z-index: 2;
}
th.numeric, td.numeric { text-align: right; }
td { padding: 13px 14px; border-top: 1px solid rgba(41, 49, 44, 0.72); font-size: 12px; }
tbody tr { cursor: pointer; transition: background 120ms ease; }
tbody tr:hover, tbody tr.selected { background: rgba(149, 244, 127, 0.045); }
tbody tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--green); }
.asset-title { gap: 10px; }
.asset-logo { width: 28px; height: 28px; border-radius: 50%; background: #242a26; }
.asset-name { font-weight: 700; }
.asset-pool { color: var(--muted); font-size: 10px; margin-top: 3px; }
.direction-label { color: #b8c2bb; font-size: 11px; }
.profit { font-weight: 740; }
.profit.positive { color: var(--green); }
.profit.negative { color: var(--red); }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: #202721;
  color: #9aa79e;
  font-size: 10px;
}
.badge.ready { background: rgba(69, 207, 114, 0.1); color: var(--green); }
.badge.error, .badge.halted { background: rgba(255, 120, 111, 0.1); color: var(--red); }
.badge.rejected { background: rgba(232, 183, 100, 0.12); color: var(--amber); }
tbody tr.rejected { background: rgba(232, 183, 100, 0.025); }

.detail-panel { position: sticky; top: 108px; min-height: 560px; overflow: hidden; }
.detail-head { padding: 20px; border-bottom: 1px solid var(--line); }
.detail-head .asset-title { margin-top: 7px; }
.detail-head .asset-logo { width: 38px; height: 38px; }
.detail-head .asset-name { font-size: 21px; }
.detail-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.detail-body { padding: 16px; }
.direction-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(10, 13, 11, 0.32); margin-bottom: 11px; }
.direction-line { justify-content: space-between; }
.direction-line strong { font-size: 12px; }
.direction-card .big-profit { font-size: 23px; font-weight: 760; margin-top: 11px; }
.detail-link { display: block; margin-top: 10px; color: var(--blue); font-size: 11px; text-decoration: none; }
.detail-link:hover { text-decoration: underline; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.metric { background: #101411; border-radius: 8px; padding: 9px; }
.metric span { color: var(--muted); font-size: 9px; display: block; }
.metric strong { font-size: 12px; margin-top: 4px; display: block; }
.chart-card { border-top: 1px solid var(--line); padding: 17px 16px 13px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: 9px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.legend .forward { background: var(--green); }
.legend .reverse { background: var(--blue); }
#profit-chart { width: 100%; height: 170px; display: block; }
.chart-axis { stroke: #303832; stroke-width: 1; }
.chart-zero { stroke: #667169; stroke-width: 1; stroke-dasharray: 4 4; }
.chart-forward { fill: none; stroke: var(--green); stroke-width: 2; }
.chart-reverse { fill: none; stroke: var(--blue); stroke-width: 2; }
.chart-label { fill: #728077; font: 9px ui-monospace, monospace; }
.rate-strip { margin-top: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.metric-line { justify-content: space-between; font-size: 11px; padding: 4px 0; }
.metric-line span { color: var(--muted); }
.empty-state { min-height: 560px; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
.spinner { width: 28px; height: 28px; border: 2px solid #303832; border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.note-panel { padding: 18px 20px; }
.note-panel h3 { margin: 2px 0 13px; }
.assumption-row, .health-row { justify-content: space-between; min-height: 28px; border-top: 1px solid rgba(41, 49, 44, 0.6); font-size: 11px; }
.assumption-row span:first-child, .health-row span:first-child { color: var(--muted); }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; display: inline-block; }
.health-dot.bad { background: var(--red); }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; background: #171d19; color: var(--text); transform: translateY(20px); opacity: 0; transition: 180ms ease; pointer-events: none; font-size: 12px; z-index: 50; }
.toast.show { transform: translateY(0); opacity: 1; }
.skeleton { position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

@media (max-width: 1200px) {
  .workspace { grid-template-columns: 1fr 420px; }
  main { padding-left: 18px; padding-right: 18px; }
}