/* Order book page — liquidity heatmap (templates/orderbook.html, static/js/orderbook.js). */
.ob-page { background: var(--ink-0, #050505); color: var(--fg-1, #e9ebf2); min-height: 100vh; }
.ob-wrap { max-width: 1680px; margin: 0 auto; padding: 86px 20px 40px; }   /* the site header is fixed, 70 px */
.ob-h1 { font-size: 15px; font-weight: 600; color: var(--text-secondary, #9aa0b4); margin: 0 0 10px; letter-spacing: .2px; }
.ob-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2, #9aa0b4); }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.ob-dot.on { background: var(--up, #26d07c); box-shadow: 0 0 8px var(--up, #26d07c); }
.ob-dot.off { background: var(--down, #ff5252); }

.ob-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ob-symbols, .ob-windows { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ob-chip { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--fg-2, #9aa0b4);
  font: 500 13px/1 'Inter', sans-serif; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all .15s; }
.ob-chip:hover { border-color: var(--acc, #9950F0); color: var(--fg-1, #e9ebf2); }
.ob-chip.active { background: linear-gradient(135deg, #9950F0, #802EDE); border-color: transparent; color: #fff; }
.ob-symform { display: flex; gap: 4px; }
.ob-mktswitch { padding-right: 10px; margin-right: 4px; border-right: 1px solid rgba(255,255,255,.08); }
.ob-symform input { width: 150px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  color: var(--fg-1, #e9ebf2); padding: 8px 10px; font: 500 13px 'JetBrains Mono', monospace; text-transform: uppercase; }

.ob-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ob-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 10px 14px; min-width: 150px; }
.ob-stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3, #6b7280); }
.ob-stat .v { font: 600 16px 'JetBrains Mono', monospace; margin-top: 4px; }
.ob-stat .s { font-size: 12px; color: var(--fg-2, #9aa0b4); margin-top: 2px; }
.ob-note { background: rgba(153,80,240,.08); border: 1px solid rgba(153,80,240,.25); color: var(--fg-2, #c8c2d8);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }

.ob-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; }
.ob-chart, .ob-ladder { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px; }
.ob-chart-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-weight: 600; }
.ob-badge { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: rgba(38,208,124,.12); color: var(--up, #26d07c); }
.ob-badge.live { background: rgba(255,193,7,.12); color: #ffc107; }
.ob-price { margin-left: auto; font: 600 18px 'JetBrains Mono', monospace; }
.ob-canvas-box { position: relative; height: clamp(520px, calc(100vh - 330px), 820px); }
#obHeat { width: 100%; height: 100%; display: block; border-radius: 8px; background: #070a12; cursor: crosshair; touch-action: none; }
#obHeat:active { cursor: grabbing; }
.ob-chart-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ob-layers { display: flex; flex-wrap: wrap; gap: 4px; }
.ob-chip.sm { padding: 6px 10px; font-size: 12px; }
.ob-chip.sm:not(.active)[data-layer] { opacity: .7; }
.ob-tf { display: flex; align-items: center; gap: 6px; font: 500 12px 'JetBrains Mono', monospace; color: var(--fg-3, #6b7280); }
.ob-tf select { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--fg-1, #e9ebf2);
  border-radius: 8px; padding: 5px 8px; font: 500 12px 'Inter', sans-serif; }
.ob-live-btn { margin-left: auto; border-color: rgba(153,80,240,.6); color: #fff; }
#obFullBtn { margin-left: auto; } .ob-live-btn:not([hidden]) + #obFullBtn { margin-left: 0; }
.ob-chart:fullscreen { background: #050505; padding: 12px; overflow: auto; }
.ob-chart:fullscreen .ob-canvas-box { height: calc(100vh - 220px); }
.ob-tip .up { color: #26d07c; } .ob-tip .down { color: #ff5252; }
.ob-delta { width: 100%; height: 100px; display: block; border-radius: 6px; background: #070a12; }
.ob-delta-label { font-size: 11px; color: var(--fg-3, #6b7280); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: .06em; }
.ob-tip { position: absolute; pointer-events: none; background: rgba(10,12,20,.92); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 8px 10px; font: 12px 'JetBrains Mono', monospace; color: #e9ebf2; white-space: nowrap; z-index: 2; }
.ob-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--fg-2, #9aa0b4); align-items: center; }
.ob-legend i { display: inline-block; vertical-align: middle; }
.ob-legend .ob-scale.liq { background: linear-gradient(90deg, #0e081e, #481278, #b5179e, #f77f00, #fcdc78); }
.ob-legend .ob-scale.fade { opacity: 1; -webkit-mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.25) 50%); mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.25) 50%); }
.ob-legend .ob-wall { width: 18px; height: 0; border-top: 2px solid #00e5ff; }
.ob-legend .ob-wall.move { border-top: 2px dashed #ff40c8; }
.ob-scale { width: 60px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #0b0f1a, #1b3a8a, #1fa6c8, #f2d14b, #ffffff); }
.ob-bubble { width: 10px; height: 10px; border-radius: 50%; }
.ob-bubble.buy { background: rgba(38,208,124,.75); } .ob-bubble.sell { background: rgba(255,82,82,.75); }
.ob-tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.ob-tri.long { border-top: 10px solid #ff7a45; } .ob-tri.short { border-bottom: 10px solid #4dd0e1; }
.ob-hint { margin-left: auto; color: var(--fg-3, #6b7280); }

.ob-ladder { display: flex; flex-direction: column; min-height: 0; }
.ob-main { align-items: stretch; }
.ob-ladder-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.ob-ladder-head span:last-child { font: 400 11px 'JetBrains Mono', monospace; color: var(--fg-3, #6b7280); }
.ob-ladder-sum { display: grid; gap: 3px; margin-bottom: 8px; }
.ob-sum { display: grid; grid-template-columns: 44px 58px 1fr 58px; gap: 6px; align-items: center; font: 11px 'JetBrains Mono', monospace; }
.ob-sum .k { color: var(--fg-3, #6b7280); } .ob-sum .up { color: #26d07c; text-align: right; } .ob-sum .down { color: #ff5252; }
.ob-sum .bal { height: 6px; border-radius: 3px; background: rgba(255,82,82,.55); overflow: hidden; } .ob-sum .bal i { display: block; height: 100%; background: rgba(38,208,124,.75); }
.ob-ladder-cols, .ob-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.7fr; gap: 4px; font: 12px 'JetBrains Mono', monospace; }
.ob-ladder.nocum .ob-row:not(.spread), .ob-ladder.nocum .ob-ladder-cols { grid-template-columns: 1.1fr 1.2fr 0.7fr; }
.ob-ladder.nocum .ob-ladder-cols .c { display: none; }
.ob-ladder-cols { color: var(--fg-3, #6b7280); font-size: 11px; padding: 0 4px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ob-ladder-body { overflow-y: auto; flex: 1; min-height: 0; max-height: clamp(520px, calc(100vh - 330px), 820px); scrollbar-width: thin; }
.ob-row { position: relative; padding: 1px 4px; }
.ob-row .p { color: var(--fg-2, #9aa0b4); }
.ob-row.ask .p { color: #ff8a8a; } .ob-row.bid .p { color: #7ee2a8; }
.ob-row .v, .ob-row .c { position: relative; text-align: right; z-index: 1; }
.ob-row .d { text-align: right; color: var(--fg-3, #6b7280); font-size: 10.5px; }
.ob-row .bar, .ob-row .cbar { position: absolute; top: 1px; bottom: 1px; right: 0; border-radius: 2px; z-index: -1; }
.ob-row.bid .bar { background: rgba(38,208,124,.25); } .ob-row.ask .bar { background: rgba(255,82,82,.25); }
.ob-row.bid .cbar { background: rgba(38,208,124,.1); } .ob-row.ask .cbar { background: rgba(255,82,82,.1); }
.ob-row.wall.bid .bar { background: rgba(38,208,124,.6); } .ob-row.wall.ask .bar { background: rgba(255,82,82,.6); }
.ob-row.wall .v { font-weight: 700; color: #fff; }
.ob-row.spread { grid-template-columns: 1fr 1fr; border-top: 1px dashed rgba(255,255,255,.2); border-bottom: 1px dashed rgba(255,255,255,.2);
  margin: 2px 0; padding: 3px 4px; color: #fff; font-weight: 600; } .ob-row.spread span:last-child { text-align: right; color: var(--fg-3, #6b7280); font-weight: 400; }
#obHeat:focus { outline: none; }
.ob-chart-tools { position: relative; }
.ob-cfg { position: absolute; z-index: 20; right: 0; top: 38px; width: 300px; max-height: 70vh; overflow-y: auto; background: #0d1020;
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); font-size: 12.5px; }
.ob-cfg-h { font-weight: 700; color: #fff; margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ob-cfg-h:first-child { margin-top: 0; }
.ob-cfg label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; color: var(--fg-2, #9aa0b4); }
.ob-cfg label.chk { justify-content: flex-start; } .ob-cfg input[type=range] { width: 120px; }
.ob-cfg select, .ob-cfg input[type=number] { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #e9ebf2; border-radius: 6px; padding: 4px 6px; max-width: 130px; }
#obCfgReset { margin-top: 10px; width: 100%; }
.ob-main:fullscreen { background: #050505; padding: 12px; overflow: auto; grid-template-columns: minmax(0, 1fr) 320px; }
.ob-main:fullscreen .ob-canvas-box { height: calc(100vh - 230px); }
.ob-main:fullscreen .ob-ladder-body { max-height: calc(100vh - 150px); }

@media (max-width: 1000px) {
  .ob-main { grid-template-columns: 1fr; }
  .ob-canvas-box { height: 460px; }
  .ob-ladder { max-height: 420px; }
  .ob-hint { display: none; }
}
@media (max-width: 600px) {
  .ob-wrap { padding: 80px 16px 90px; }
  .ob-canvas-box { height: 420px; }
  .ob-symform input { width: 120px; }
}
.ob-live-btn[hidden] { display: none !important; }   /* mobile.css gives buttons a display that beats [hidden] */

/* market context (screener, 6 exchanges) */
.ob-mkt { margin-top: 14px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px; }
.ob-mkt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-weight: 600; margin-bottom: 10px; }
.ob-mkt-spread { font: 400 12px 'JetBrains Mono', monospace; color: var(--fg-3, #6b7280); }
.ob-mkt-link { margin-left: auto; font-size: 12px; color: var(--acc-hi, #b98aff); text-decoration: none; }
.ob-mkt-kpi .v .up, .ob-mkt .up { color: #26d07c; } .ob-mkt .down { color: #ff5252; } .ob-mkt .warn { color: #ffc107; }
.ob-mkt-kpi .s { font: 11px 'JetBrains Mono', monospace; white-space: normal; }
.ob-mkt-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.ob-mkt-card { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 8px 10px; overflow-x: auto; }
.ob-mkt-t { width: 100%; border-collapse: collapse; font: 12px 'JetBrains Mono', monospace; }
.ob-mkt-t th { color: var(--fg-3, #6b7280); font: 500 11px 'Inter', sans-serif; text-align: right; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.ob-mkt-t td { text-align: right; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.03); white-space: nowrap; color: var(--fg-2, #c3c8d6); }
.ob-mkt-t th:first-child, .ob-mkt-t td:first-child { text-align: left; color: var(--fg-1, #e9ebf2); }
.ob-mkt-t .bs { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: rgba(255,82,82,.55); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ob-mkt-t .bs i { display: block; height: 100%; background: rgba(38,208,124,.8); }
.ob-mkt-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3, #6b7280); }
.ob-mkt-spark { width: 100%; height: 90px; display: block; margin: 6px 0; }
.ob-mkt-s { font: 11px 'JetBrains Mono', monospace; color: var(--fg-2, #9aa0b4); }
@media (max-width: 1000px) { .ob-mkt-grid { grid-template-columns: 1fr; } }
.ob-chip.sm.na { opacity: .45; text-decoration: line-through; }   /* clusters on, none for this range */