:root{
  --bg:#0b0e14; --panel:#121826; --panel2:#0f1522;
  --fg:#d7dde6; --muted:#7c8798; --line:#263043;
  --buy:#0ecb81; --sell:#f6465d; --accent:#00bcd4; --warn:#f0b90b;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--mono);
  font-variant-numeric: tabular-nums;
}
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.brand{ font-weight:700; letter-spacing:.3px; }
.badge{
  background:var(--warn); color:#000; padding:4px 10px; border-radius:6px;
  font-weight:800;
}
.grid{
  display:grid;
  grid-template-columns: 360px 1fr 420px;
  gap:12px;
  padding:12px;
}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  min-height: 240px;
}
.h{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 10px 0; padding-bottom:8px; border-bottom:1px solid var(--line);
  color:var(--accent); font-weight:800;
}
.kv{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; }
.kv span{ color:var(--muted); }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; }
button{
  background:#0d2230; color:var(--fg);
  border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; cursor:pointer; font-weight:700;
}
button:hover{ border-color: var(--accent); }
.small{ font-size:12px; color:var(--muted); }
.good{ color:var(--buy); font-weight:800; }
.bad{ color:var(--sell); font-weight:800; }
canvas{
  width:100%;
  height:520px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#070a10;
  display:block;
}
.logbox{
  height:520px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background:#070a10;
  font-size:12px;
  line-height:1.5;
  white-space:pre-wrap;
}