* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #f4f6f8;
  color: #0b1220;
}
.bo-header {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 28px; background: #fff; border-bottom: 1px solid #e2e6ea;
}
.bo-brand { font-size: 20px; font-weight: 800; }
.bo-brand span { color: #0b5fff; }
.bo-tabs { display: flex; gap: 18px; font-size: 14px; color: #5b6472; }
.bo-tabs b { color: #0b1220; border-bottom: 2px solid #0b5fff; padding-bottom: 14px; }
.bo-desk { margin-left: auto; font-size: 13px; color: #5b6472; }
.bo-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 20px;
  padding: 24px 28px; max-width: 1200px;
}
.bo-grid .card:nth-child(3) { grid-column: 1 / -1; }
.card { background: #fff; border: 1px solid #e2e6ea; border-radius: 14px; padding: 18px 20px; }
.card h3 { margin: 0 0 2px; font-size: 16px; }
.card h4 { margin: 16px 0 2px; font-size: 14px; }
.card .sub { margin: 0 0 14px; font-size: 12px; color: #5b6472; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ledger th { text-align: left; color: #5b6472; font-weight: 600; font-size: 11px; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid #e2e6ea; }
table.ledger td { padding: 10px 8px; border-bottom: 1px solid #eef1f4; }
table.ledger tr.new td { animation: flash 1.4s ease; }
@keyframes flash { from { background: #e6f0ff; } to { background: transparent; } }
td.buy { color: #1f9d55; font-weight: 600; }
td.sell { color: #d64545; font-weight: 600; }
.cp { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef1f4; }
.cp-name { font-weight: 600; font-size: 14px; }
.cp-sub { font-size: 12px; color: #5b6472; }
.cp .cp-btn { margin-left: auto; border: none; background: #0b5fff; color: #fff; padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; }
.cp .cp-btn.ghost { background: #eef1f4; color: #0b1220; }
.chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.chip.ok { background: rgba(31,157,85,0.14); color: #1f9d55; }
.chip.pending { background: rgba(214,163,69,0.18); color: #b9872b; }
pre.snippet { background: #0d1116; color: #cfe3ff; padding: 14px; border-radius: 10px; font-size: 12px; overflow-x: auto; }
.events { display: flex; flex-direction: column; gap: 8px; }
.events .muted { color: #5b6472; font-size: 13px; }
pre.event { background: #f4f6f8; border: 1px solid #e2e6ea; border-radius: 8px; padding: 10px; font-size: 11px; margin: 0; white-space: pre-wrap; word-break: break-all; }
.demo-note { max-width: 1200px; margin: 0 28px 24px; font-size: 12px; color: #5b6472; }
@media (max-width: 820px) { .bo-grid { grid-template-columns: 1fr; } .bo-tabs { display: none; } }