/* «Стенка Хайп» — терминал, режим просмотра. Цвета, шрифты и размеры — по docs/mockup (Main.dc.html и др.). */
:root {
  --bg: #0E1116; --fg: #E6E8EB; --muted: #9BA4AF; --muted2: #8D96A1; --line: #1E242C; --line2: #222831;
  --chip: #161A21; --chip-b: #262C35; --chip-on: #2A313B; --btn: #C3CAD2;
  --green: #4CC38A; --green-t: #5FD39A; --red: #E5484D; --red-t: #F07A7E;
  --wall: #F5A524; --hl: #B39DFF;
  --row: 22px;
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--sans);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }

/* ---------- шапка ---------- */
.hdr { padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 1px; }
.hdr .title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .title .ex { font-weight: 500; color: var(--muted); }
.hdr .sub { font-size: 11.5px; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .sub .hl { color: var(--hl); }
.hdr .sub .wall { color: var(--wall); }
.hdr .sub .gone { color: var(--red-t); }
.hdr .sub .moved { color: var(--green-t); }
.hdr .sub .warn { color: var(--red-t); }

/* ---------- плашка события (без кнопок: только просмотр) ---------- */
.banner { margin: 0 10px 6px; height: 44px; border-radius: 10px; display: flex; align-items: center;
  padding: 0 12px; font-size: 13px; font-weight: 600; transition: opacity .4s ease, transform .4s ease; }
.banner.red { background: #2A1416; border: 1px solid #6B2C30; color: #F7B0B2; }
.banner.green { background: #12291D; border: 1px solid #2C6B49; color: #8FE0B5; }
.banner.out { opacity: 0; transform: translateY(-4px); }

/* ---------- полоса шага ---------- */
.stepbar { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 10px;
  font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stepbar .buy { color: var(--green-t); width: 64px; }
.stepbar .sell { color: var(--red-t); width: 64px; text-align: right; }
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--chip); border: 1px solid var(--chip-b); }
.seg button { height: 28px; min-width: 48px; border-radius: 7px; border: 0; background: transparent; color: var(--btn);
  font-size: 12px; font-family: var(--mono); padding: 0 6px; }
.seg button.on { background: var(--chip-on); color: #fff; font-weight: 700; }

/* ---------- стакан ---------- */
.ladder-wrap { flex-grow: 1; position: relative; min-height: 0; }
.ladder { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; overscroll-behavior: contain; }
.canvas { position: relative; }
.chart { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: .5; }
.chart .wick { position: absolute; width: 1px; }
.chart .body { position: absolute; width: 8px; border-radius: 1px; }
.chart svg { position: absolute; left: 0; top: 0; }
.rows { position: relative; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); height: var(--row);
  transition: background-color .4s ease; }
.row .cell { position: relative; }
.row .bar { position: absolute; top: 3px; bottom: 3px; transition: width .2s ease, background-color .4s ease; }
.row .bbar { right: 0; background: rgba(76, 195, 138, .18); border-radius: 3px 0 0 3px; }
.row .abar { left: 0; background: rgba(229, 72, 77, .18); border-radius: 0 3px 3px 0; }
.row .txt { position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted2); padding: 0 8px; white-space: nowrap; overflow: hidden; }
.row .btxt { justify-content: flex-end; }
.row .atxt { justify-content: flex-start; }
.row .px { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12.5px;
  border-radius: 4px; transition: background-color .4s ease, color .4s ease; white-space: nowrap; overflow: hidden; }
.row.ask .px { color: var(--red-t); }
.row.bid .px { color: var(--green-t); }
.row.wall { background: rgba(245, 165, 36, .12); }
.row.wall .px { font-size: 13px; font-weight: 700; color: var(--bg); background: var(--wall); }
.row.wall .bar.w { background: rgba(245, 165, 36, .75); }
.row.wall .txt.w { color: var(--bg); font-weight: 700; }
.row.was .px { color: var(--muted2); border: 1px dashed #6B2C30; text-decoration: line-through; }
.row.was.mv .px { border-color: #4A5360; text-decoration: none; }
.row.last.up { background: rgba(76, 195, 138, .28); }
.row.last.down { background: rgba(229, 72, 77, .28); }
.row.last .px { font-size: 13px; font-weight: 700; }
.row.last.up .px { background: var(--green); color: var(--bg); }
.row.last.down .px { background: var(--red); color: #fff; }
.row.last.flat .px { background: #3A414B; color: #fff; }

.tf { position: absolute; left: 8px; top: 6px; display: flex; gap: 2px; padding: 2px; border-radius: 10px;
  background: rgba(14, 17, 22, .55); border: 1px solid rgba(230, 232, 235, .12); }
.tf button { height: 30px; min-width: 40px; border-radius: 8px; border: 0; background: transparent; color: var(--btn); font-size: 12.5px; }
.tf button.on { background: rgba(230, 232, 235, .22); color: #fff; font-weight: 700; }
.pill { position: absolute; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(14, 17, 22, .85);
  font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid #6B5320; color: #F7D08A; display: flex; align-items: center; }
.pill.top { top: 8px; right: 8px; }
.pill.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.status { position: absolute; left: 8px; right: 8px; bottom: 44px; text-align: center; font-size: 12px; color: #F7B0B2;
  pointer-events: none; text-shadow: 0 1px 2px #000; }

/* ---------- нижняя полоса ---------- */
.foot { padding: 8px 10px 14px; border-top: 1px solid var(--line2); display: flex; gap: 8px; background: var(--bg); }
.foot button { height: 44px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.foot .walls-btn { padding: 0 14px; border: 1px solid #2E3640; background: transparent; color: var(--fg); }
.foot .ex-btn { flex-grow: 1; min-width: 0; border: 1px solid #2C6B49; background: #12291D; color: #8FE0B5;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.foot .ex-btn .r { color: #C9E9D6; }

/* ---------- вспышка уведомления ---------- */
.flash { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; opacity: 0; z-index: 20; }
.flash.red { background: rgba(229, 72, 77, .16); }
.flash.green { background: rgba(76, 195, 138, .16); }
.flash.go { animation: flash 1.2s ease-in-out 1 forwards; }
.flash .band { width: 100%; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.flash.red .band { background: rgba(229, 72, 77, .55); }
.flash.green .band { background: rgba(36, 140, 92, .62); }
.flash .t1 { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.flash .t2 { font-size: 13px; color: #F2F5F3; font-family: var(--mono); }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- список стенок и настройки ---------- */
.screen { flex-grow: 1; overflow-y: auto; padding: 0 10px 14px; }
.screen h1 { font-size: 16px; font-weight: 700; margin: 8px 2px 2px; }
.screen .hint { font-size: 11.5px; color: var(--muted); margin: 0 2px 10px; }
.card { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; margin-bottom: 6px;
  border-radius: 12px; background: #141920; border: 1px solid #1F262E; transition: opacity .4s ease, transform .4s ease; }
.card.new { opacity: 0; transform: translateY(-4px); }
.card .coin { font-size: 15px; font-weight: 700; }
.card .usd { font-family: var(--mono); font-weight: 600; text-align: right; color: var(--wall); }
.card .meta { grid-column: 1 / 3; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.card .side-b { color: var(--green-t); }
.card .side-a { color: var(--red-t); }
.empty { color: var(--muted); font-size: 13px; padding: 24px 4px; text-align: center; }
.ex-row { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 14px; margin-bottom: 6px;
  border-radius: 12px; background: #141920; border: 1px solid #1F262E; font-size: 15px; font-weight: 600; width: 100%; color: var(--fg); }
.ex-row.on { border-color: #2C6B49; background: #12291D; color: #8FE0B5; }
.ex-row[disabled] { opacity: .45; cursor: default; }
.ex-row .r { font-size: 12px; font-weight: 500; color: var(--muted); }
.err { margin: 24px 14px; padding: 14px; border-radius: 12px; background: #2A1416; border: 1px solid #6B2C30; color: #F7B0B2; font-size: 14px; }

/* ---------- 2026-10-05: плашки стенок, «К цене», карточки списка, панель замеров ---------- */
button.pill { cursor: pointer; font-family: var(--sans); }
.to-price { position: absolute; right: 8px; bottom: 44px; height: 32px; padding: 0 12px; border-radius: 16px;
  border: 1px solid #2E4D7A; background: rgba(14, 17, 22, .9); color: #CFE1FF; font-size: 12px; font-weight: 600; z-index: 5; }
button.card { width: 100%; text-align: left; color: inherit; font-family: inherit; }
.card .dist { color: var(--fg); }
.perf { position: absolute; left: 8px; right: 8px; top: calc(var(--safe-top) + 8px); z-index: 40; padding: 10px;
  border-radius: 12px; background: rgba(14, 17, 22, .97); border: 1px solid #3A414B; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.perf-h { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.perf pre { margin: 0; font: 11px/1.45 var(--mono); color: var(--fg); white-space: pre-wrap; word-break: break-word;
  user-select: text; -webkit-user-select: text; max-height: 60vh; overflow: auto; }
.perf-btns { display: flex; gap: 6px; margin-top: 8px; }
.perf-btns button { flex: 1; height: 36px; border-radius: 8px; border: 1px solid #3A414B; background: #1A2028; color: var(--fg); font-size: 12px; }