:root {
  --bg: #080b11;
  --panel: #0f141d;
  --panel-2: #151c28;
  --line: #1f2836;
  --text: #e7ecf3;
  --muted: #8591a3;
  --gold: #f5b942;
  --gold-bg: rgba(245, 185, 66, .10);
  --pos: #2fd4a3;
  --pos-bg: rgba(47, 212, 163, .10);
  --neg: #ff6b6b;
  --neg-bg: rgba(255, 107, 107, .10);
  --blue: #6aa8ff;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f7fa; --panel: #ffffff; --panel-2: #eef1f6; --line: #dde3ec;
    --text: #111722; --muted: #5d6a7c; --gold: #b07a0c; --gold-bg: rgba(176, 122, 12, .09);
    --pos: #0b8f67; --pos-bg: rgba(11, 143, 103, .09); --neg: #c93838; --neg-bg: rgba(201, 56, 56, .08);
    --blue: #2a64c9; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f5f7fa; --panel: #ffffff; --panel-2: #eef1f6; --line: #dde3ec;
  --text: #111722; --muted: #5d6a7c; --gold: #b07a0c; --gold-bg: rgba(176, 122, 12, .09);
  --pos: #0b8f67; --pos-bg: rgba(11, 143, 103, .09); --neg: #c93838; --neg-bg: rgba(201, 56, 56, .08);
  --blue: #2a64c9; color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); }
body { overflow-x: hidden; }
.muted { color: var(--muted); }
h2 { font-size: 16px; margin: 0 0 4px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
p { margin: 0; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; gap: 10px; align-items: center; }
.wordmark { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.tag { font-size: 12px; color: var(--muted); }
.status { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); }
.dot.stale { background: var(--gold); } .dot.down { background: var(--neg); }

main { max-width: 1760px; margin: 0 auto; padding: 18px 24px 40px; display: grid; gap: 18px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font: 600 20px/1.3 var(--mono); margin-top: 2px; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; position: sticky; top: 62px; z-index: 15; }
.ctl { display: grid; gap: 4px; }
.ctl.grow { flex: 1 1 180px; }
.ctl label, .assume label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; padding: 6px 11px; font: 500 13px var(--sans); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--panel-2); color: var(--text); }
select, input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: 13px var(--sans); }
input[type=search] { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chip { font: 500 12px var(--sans); border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.chip.off { background: transparent; color: var(--muted); text-decoration: line-through; }
.chip .k { color: var(--muted); font-size: 10px; margin-left: 4px; }

.sec-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.sec-head p { max-width: 760px; font-size: 13px; }

.badge { font: 600 10px var(--mono); letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.badge.swap { color: var(--gold); border-color: var(--gold); background: var(--gold-bg); }
.badge.proxy, .badge.scaled { color: var(--blue); border-color: var(--blue); }
.badge.closed { color: var(--muted); }

.swaps { background: linear-gradient(180deg, var(--gold-bg), transparent 70%); border: 1px solid var(--gold); border-radius: 12px; padding: 14px; }
.assume { display: grid; gap: 4px; max-width: 280px; }
.assume .inline { display: flex; align-items: center; gap: 6px; }
.assume input { width: 90px; font-family: var(--mono); }
.assume small { font-size: 11px; line-height: 1.35; }
.swap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-h .t { font: 600 15px var(--mono); }
.card-h .n { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); }
.best b { font-family: var(--mono); }
.mini { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.mini td { padding: 3px 4px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.mini td:first-child { text-align: left; font-family: var(--sans); }
.mini tr.var td:first-child { color: var(--gold); font-weight: 600; }

.board { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.arb { width: 100%; border-collapse: collapse; font: 13px var(--mono); min-width: 1400px; }
.arb th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; text-align: right; padding: 8px 8px; cursor: pointer; white-space: nowrap; user-select: none; }
.arb th.sorted { color: var(--text); }
.arb tr.groups th { cursor: default; text-align: center; font: 600 11px var(--sans); letter-spacing: .08em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.arb tr.groups th.g-var { color: var(--gold); background: var(--gold-bg); }
.arb tr.groups th.g-venue { color: var(--blue); }
.arb tr.groups th.g-arb { color: var(--pos); background: var(--pos-bg); }
.arb tr.cols th { top: 29px; }
.arb .gs, .arb tr.groups th.g { border-left: 1px solid var(--line); }
.arb td.join { box-shadow: inset 0 -2px 0 var(--gold); }
.arb th.sorted::after { content: " ↓"; }
.arb th.sorted.asc::after { content: " ↑"; }
.arb td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.arb .l { text-align: left; }
.arb .sticky { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.arb th.sticky { background: var(--panel-2); z-index: 2; }
.arb tbody tr.main { cursor: pointer; }
.arb tbody tr.main:hover td { background: var(--panel-2); }
.arb tr.is-swap td.sticky { box-shadow: inset 3px 0 0 var(--gold); }
.mk { display: flex; align-items: center; gap: 6px; }
.mk .t { font-weight: 600; }
.mk .n { color: var(--muted); font: 11px var(--sans); max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.net { font-weight: 600; }
.net.pos { background: var(--pos-bg); }
.trade { font: 12px var(--sans); }
.trade .s { color: var(--neg); } .trade .g { color: var(--pos); }
.skew { display: inline-flex; width: 70px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--neg); vertical-align: middle; margin-right: 6px; }
.skew i { background: var(--pos); display: block; }
.empty { text-align: center !important; color: var(--muted); padding: 30px !important; font-family: var(--sans); }
tr.detail > td { background: var(--bg); padding: 0 !important; }
.detail-inner { padding: 10px 14px 14px; }
.detail-inner table { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.detail-inner th { font: 500 10px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: right; padding: 4px 8px; }
.detail-inner td { padding: 4px 8px; border-top: 1px solid var(--line); text-align: right; }
.detail-inner .l { text-align: left; }

footer { max-width: 1760px; margin: 0 auto; padding: 0 24px 40px; font-size: 12px; color: var(--muted); display: grid; gap: 6px; }

}

.arb.nosort th { cursor: default; }
.arb.nosort th.sorted::after { content: none; }
.arb tr.swap-first td { border-top: 2px solid var(--line); }
.arb tr.swap-sub td { border-top: 1px dashed var(--line); }
.arb tr.swap-first td.sticky { box-shadow: inset 3px 0 0 var(--gold); }
.arb tr.swap-sub td.sticky { box-shadow: inset 3px 0 0 var(--gold-bg); }
.mk.sub .t { color: var(--muted); font-weight: 500; }
.arb td.var-venue { color: var(--gold); font-weight: 600; }
.badge.open { color: var(--pos); border-color: var(--pos); }
.swaps .table-wrap { background: var(--panel); }
.swaps, .board, main > section { min-width: 0; }
.arb tr.swap-more td { font: 12px var(--sans); padding: 5px 8px; border-top: 1px dashed var(--line); }
.arb tr.swap-more:hover td { color: var(--text); }
.detail-inner td.var-venue { color: var(--gold); font-weight: 600; }
.detail-inner tr.var-row td { background: var(--gold-bg); }
.detail-inner td.trade, .detail-inner th:nth-child(8) { padding-left: 18px; border-left: 1px solid var(--line); }

/* ---------------------------------------------------------------- mobile */
.mobile-only, .cards, .more-btn { display: none; }
.filters-toggle { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; font: 500 14px var(--sans); height: 38px; align-self: flex-end; }
.more-btn { width: 100%; margin-top: 12px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 500 14px var(--sans); }

@media (max-width: 900px) {
  html, body { font-size: 15px; }
  .top { padding: 10px 16px; }
  .top .tag { display: none; }
  .dots { display: none; }
  main { padding: 12px 12px 28px; gap: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .v { font-size: 18px; }

  .controls { position: static; padding: 10px 12px; gap: 10px; border-radius: 12px; }
  .controls .adv { display: none; }
  .controls.open .adv { display: grid; }
  .controls.open .chips.adv { display: flex; }
  .mobile-only { display: grid; }
  .filters-toggle.mobile-only { display: inline-block; }
  .ctl.grow { flex: 1 1 100%; order: -1; }
  .ctl { flex: 1 1 auto; }
  .seg { display: flex; }
  .seg button { flex: 1; padding: 9px 10px; font-size: 14px; }
  select, input { font-size: 16px; padding: 8px 10px; } /* 16px stops iOS zoom on focus */
  #msort { width: 100%; }
  .chip { padding: 6px 12px; font-size: 13px; }

  .table-wrap { display: none; }
  .cards { display: grid; gap: 10px; }
  .more-btn:not([hidden]) { display: block; }
  .sec-head { margin-bottom: 8px; }
  .sec-head p { font-size: 12.5px; }
  .swaps { padding: 12px; }
  .assume { max-width: none; width: 100%; }
  .board { padding: 12px; }
  footer { padding: 0 16px 30px; }
}

.mcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mcard:active { background: var(--panel-2); }
.mcard.is-swap { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.mc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mc-h .mk { flex-wrap: wrap; min-width: 0; }
.mc-h .mk .t { font: 600 16px var(--mono); }
.mc-h .mk .n { max-width: 150px; }
.mc-net { font: 700 20px/1.1 var(--mono); text-align: right; white-space: nowrap; }
.mc-net small { display: block; font: 500 11px var(--sans); color: var(--muted); margin-top: 2px; }
.mc-trade { font-size: 13px; }
.mc-grid { display: grid; grid-template-columns: auto 1fr 1fr; font: 13px var(--mono); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mc-grid > div { padding: 6px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-grid > div:nth-child(-n+3) { border-top: 0; }
.mc-grid .k { text-align: left; color: var(--muted); font: 12px var(--sans); }
.mc-grid .h { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--blue); background: var(--panel-2); }
.mc-grid .h.var { color: var(--gold); background: var(--gold-bg); }
.mc-grid > div:nth-child(1) { background: var(--panel-2); }
.mc-f { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.mc-f b { font: 600 12px var(--mono); color: var(--text); }
.mc-more { font-size: 12.5px; color: var(--blue); }
.mc-alts { display: grid; border-top: 1px solid var(--line); padding-top: 4px; }
.mc-alts .alt { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; font: 12.5px var(--mono); padding: 6px 0; border-bottom: 1px dashed var(--line); align-items: center; }
.mc-alts .alt:last-child { border-bottom: 0; }
.mc-alts .v { font-family: var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards .empty { text-align: center; color: var(--muted); padding: 24px; }
.mc-alts .alt.hdr { font: 500 10.5px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 4px 0; }
.mc-alts .alt.hdr span:not(:first-child) { text-align: right; }