.cross-market-depth { padding: 0 14px 24px; background: #090a0c; color: #a5aab2; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cross-market-depth .cross-depth-title { display: flex; align-items: center; height: 46px; border-bottom: 1px solid #1d2024; font-size: 15px; line-height: 20px; color: #e0e2e6; }
.cross-market-depth .cross-depth-head, .cross-market-depth .cross-depth-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.cross-market-depth .cross-depth-head { height: 34px; line-height: 34px; font-size: 11px; color: #656b74; }
.cross-market-depth .cross-depth-head > span:last-child { text-align: right; }
.cross-market-depth .cross-depth-side { min-width: 0; }
.cross-market-depth .cross-depth-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 30px; padding: 0 4px; box-sizing: border-box; font-size: 11px; line-height: 30px; }
.cross-market-depth .cross-depth-row span { position: relative; z-index: 1; min-width: 0; max-width: 58%; overflow-wrap: anywhere; word-break: break-word; line-height: 15px; }
.cross-market-depth .cross-depth-row span:last-child { text-align: right; }
.cross-market-depth .cross-depth-bar { position: absolute; top: 2px; bottom: 2px; max-width: 100%; pointer-events: none; opacity: .12; }
.cross-market-depth .cross-depth-left .cross-depth-bar { right: 0; }
.cross-market-depth .cross-depth-right .cross-depth-bar { left: 0; }
.cross-market-depth .cross-depth-empty { min-height: 300px; display: flex; align-items: center; justify-content: center; color: #8f96a3; font-size: 12px; text-align: center; }