:root {
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #20324a;
  --muted: #68778b;
  --faint: #8a98a9;
  --line: #dce3ed;
  --line-strong: #c6d0dd;
  --blue: #315acc;
  --blue-soft: #eaf0ff;
  --blue-faint: #f3f6ff;
  --teal: #147d78;
  --amber: #916000;
  --red: #a63e48;
  color-scheme: light;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body > aside {
  position: fixed; inset: 0 auto 0 0; width: 145px;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 18px 10px; display: flex; flex-direction: column; gap: 5px;
}
body > aside .brand { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 10px; }
body > aside p { color: var(--muted); font-size: 12px; margin: 0 10px 12px; }
body > aside nav { display: flex; flex-direction: column; gap: 5px; }
body > aside nav a {
  color: var(--muted); text-decoration: none; border-radius: 8px;
  font-size: 13px; font-weight: 500; min-height: 38px; padding: 8px 10px;
}
body > aside nav a:hover { background: var(--surface-soft); color: var(--ink); }
body > aside nav a.active { background: var(--blue-soft); color: var(--blue); }
body > aside small { margin-top: auto; color: var(--faint); font-size: 11px; padding: 10px; line-height: 1.6; }
main { margin-left: 145px; padding: 18px; min-width: 0; }
.matrix-layout { display: grid; gap: 14px; }
@media (min-width: 1100px) {
  .matrix-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; }
  .detail { margin-top: 0; max-height: calc(100vh - 36px); overflow: auto; position: sticky; top: 12px; }
}
.demo .matrix-layout { display: block; }
.view-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.caption, .quiet { color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.replay { text-align: right; display: grid; gap: 8px; justify-items: end; }
.replay label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
#notice { background: var(--blue-faint); border-left: 3px solid var(--blue); color: var(--muted); font-size: 12px; margin: 0 0 14px; padding: 8px 10px; line-height: 1.6; }
#notice.error { background: #fff0f1; border-left-color: var(--red); color: var(--red); }
.toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  margin-bottom: 14px; padding: 10px 12px;
}
.toolbar label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.venue-picker { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.venue-menu { position: relative; }
.venue-menu > summary {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  min-height: 35px;
  min-width: 168px;
  padding: 6px 28px 6px 9px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  position: relative;
}
.venue-menu > summary::-webkit-details-marker { display: none; }
.venue-menu > summary::after {
  content: "";
  position: absolute; right: 10px; top: 50%;
  border: 5px solid transparent; border-top-color: var(--muted);
  transform: translateY(-20%);
}
.venue-menu[open] > summary::after { transform: translateY(-70%) rotate(180deg); }
.venue-menu .venue-options {
  position: absolute; z-index: 6;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  margin-top: 4px;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  min-width: 100%;
  box-shadow: 0 10px 24px rgba(32,50,74,.12);
}
.venue-menu .venue-options label { align-items: center; flex-direction: row; font-weight: 500; color: var(--ink); gap: 8px; min-height: 28px; }
.venue-options input { min-height: 0; min-width: 0; }
.venue-count { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.venue-options .venue-count { margin-left: auto; }
.data-table thead .venue-count { margin-left: 6px; }
.check-filter { flex-direction: row; align-items: center; min-height: 35px; font-weight: 500; color: var(--ink); gap: 6px; }
.check-filter input { min-height: 0; min-width: 0; }
input, select, button { font: inherit; color: inherit; }
input, select {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  min-height: 35px; padding: 6px 9px; min-width: 140px;
}
button {
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  min-height: 32px; padding: 5px 9px; cursor: pointer;
}
button:disabled { color: var(--faint); cursor: default; }
.data-surface { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.data-head {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line); padding: 11px 13px;
}
.panel-title { font-size: 14px; font-weight: 600; margin: 0; }
.scope { color: var(--muted); font-size: 11px; }
.table-scroll { overflow: auto; }
#market-table.table-scroll { max-height: calc(2.3em + 20 * 2.85em); }
.data-table { border-collapse: collapse; min-width: 720px; width: 100%; }
.data-table th, .data-table td {
  border-bottom: 1px solid var(--line); font-size: 12px; padding: 10px 9px;
  text-align: left; vertical-align: middle;
}
.data-table tr:last-child th, .data-table tr:last-child td { border-bottom: 0; }
.data-table thead th { background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 600; position: sticky; top: 0; z-index: 3; }
.data-table tbody th { font-weight: 600; }
.compact th, .compact td { padding: 4px 7px; }
.sticky-col { background: var(--surface); left: 0; min-width: 168px; position: sticky; z-index: 1; }
.sticky-cat { background: var(--surface); box-shadow: 6px 0 8px -8px rgba(32,50,74,.28); color: var(--muted); font-size: 12px; font-weight: 500; left: 168px; min-width: 118px; position: sticky; white-space: nowrap; z-index: 1; }
thead .sticky-col, thead .sticky-cat { background: var(--surface-soft); z-index: 4; }
.row-name { display: block; font-size: 13px; }
.row-toggle {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font: inherit; min-height: 0; min-width: 0; padding: 0; text-align: left; width: 100%;
}
.row-toggle:hover .row-name, .row-toggle[aria-expanded="true"] .row-name { color: var(--blue); }
.expand-row td, .expand-row th { background: var(--surface-soft); vertical-align: top; }
.expand-row .sticky-col, .expand-row .sticky-cat { background: var(--surface-soft); }
.pair-list { display: grid; gap: 7px; list-style: none; margin: 0; max-height: 220px; overflow: auto; padding: 2px 0; }
.pair-list li { display: grid; gap: 1px; }
.pair-major { color: var(--muted); font-size: 10px; font-weight: 600; }
.pair-name { font-size: 12px; font-weight: 600; }
.pair-last { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-variant-numeric: tabular-nums; }
.pair-price-type { margin-left: 4px; font-family: inherit; font-size: 10px; color: var(--muted, #7a7f8a); }
.alias { color: var(--muted); display: block; font-size: 11px; font-weight: 400; margin-top: 2px; }
.table-button {
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  min-height: 30px; padding: 3px 5px; text-align: left; width: 100%;
}
.table-button:hover, .table-button[aria-pressed="true"] {
  background: var(--blue-faint); border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
}
.status { align-items: center; display: inline-flex; font-size: 11px; font-weight: 600; gap: 5px; }
.status::before { background: currentColor; border-radius: 50%; content: ""; height: 6px; width: 6px; }
.status-normal { color: var(--teal); }
.status-pending, .status-unknown { color: var(--amber); }
.status-none { color: var(--muted); }
.list-status { padding: 8px 12px; border-top: 1px solid var(--line); }
.pager { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: space-between; padding: 9px 12px; }
.pager-actions { align-items: center; display: flex; gap: 6px; }
.detail { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-top: 14px; padding: 13px; }
.detail-title { font-size: 16px; font-weight: 600; margin: 10px 0 4px; }
.detail-copy { color: var(--muted); font-size: 11px; margin: 0 0 11px; }
.detail-list { border-top: 1px solid var(--line); display: grid; grid-template-columns: 90px 1fr; margin: 0; padding-top: 9px; row-gap: 7px; }
.detail-list dt { color: var(--muted); font-size: 11px; }
.detail-list dd { font-size: 11px; margin: 0; overflow-wrap: anywhere; }
.empty { color: var(--muted); padding: 16px; }
.trail { margin-top: 14px; }
.trail summary { cursor: pointer; color: var(--muted); font-size: 12px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10px; max-height: 360px; overflow: auto; background: var(--surface-soft); padding: 10px; }
.market { border-top: 1px solid var(--line); padding: 12px 0; line-height: 1.65; }
.market h4 { margin: 6px 0; font-size: 13px; }
.source { padding: 8px 0; border-top: 1px dashed var(--line); font-size: 11px; }
.source p { margin: 4px 0; }
.price { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.group { font-size: 12px; margin: 12px 0 6px; color: var(--muted); }
.reference { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; font-size: 11px; }
.reference a { color: var(--blue); display: block; margin: 6px 0; }
.reference small { display: block; color: var(--muted); margin-top: 4px; }
.loading { color: var(--faint); }
@media (max-width: 900px) {
  body > aside { display: none; }
  main { margin: 0; padding: 14px; }
}