/* ════════════════════════════════════════════════════════════
   ОНЧЕЙН-СКРИНЕР (только владелец, webapp/js/onchain.js).
   Вид 1:1 с таблицей «Разлоков» (unlocks.css): те же фишки тулбара
   (.tb-btn/.tb-badge/.fields-menu), шапка, строки, моно-цифры. Цвета —
   токены темы; зелёный/красный — только у чисел со знаком и покупок/
   продаж. Префикс классов — oc-.
   ════════════════════════════════════════════════════════════ */
html.was-admin #nav-onchain.hidden { display: flex !important; }

/* цвета меток адресов (OC.kindColor) — свои ступени у тёмной и светлой темы */
:root {
  --oc-k-cex: #e0a526; --oc-k-dex: #3987e5; --oc-k-contract: #9085e9; --oc-k-bridge: #00a3a3;
  --oc-k-burn: #8a8f98; --oc-k-fund: #d55181; --oc-k-wallet: #aab4bf; --oc-k-whale: #d95926;
}
[data-theme="light"] {
  --oc-k-cex: #b77c00; --oc-k-dex: #2a78d6; --oc-k-contract: #6250d6; --oc-k-bridge: #008a8a;
  --oc-k-burn: #6b7079; --oc-k-fund: #c23d6e; --oc-k-wallet: #5d6670; --oc-k-whale: #c94f1c;
}

#page-onchain { min-height: 0; }
.oc-pos { color: var(--num-pos, var(--c-pos)); }
.oc-neg { color: var(--num-neg, var(--c-neg)); }
.oc-dim { color: var(--text-3); }
.oc-grow { flex: 1; min-width: 0; }

/* ── иконка сети: кружок фирменного цвета с буквой ── */
.oc-net {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--nc, #7a8a99); color: #fff;
  font: 700 9px/1 var(--font-body); font-style: normal; letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* ── тулбар в шапке: «Раздел» ▾ · поиск · Биржи · Фильтры · Поля · Кошельки ·
   Связки · … · «N из M · X с назад» · Ключи (10.11.2026: ряда вкладок под
   тулбаром больше нет, всё в одной строке шапки) ── */
/* ряд тянется на всю шапку: «N из M» и «Ключи» уходят к правому краю. Рост 999,
   как у конструктора пар: распорка шапки (.topbar-spacer, flex: 1) иначе
   забирала половину свободного места, и ряд резало */
@media (min-width: 769px) { #topbar .favs-toolbar.oc-bar { flex: 999 1 auto; min-width: 0; } }
.oc-bar .tb-btn { cursor: pointer; gap: 6px; }
.oc-bar .tb-btn > svg { flex: none; opacity: .85; }
.oc-bar .fields-dropdown.open > .tb-btn { background: var(--tb-chip-bg-hi); border-color: var(--tb-chip-bd-hi); }
.oc-bar .oc-search { flex: 0 1 200px; min-width: 150px; }
.oc-bar .oc-search::-webkit-search-cancel-button { cursor: pointer; }
/* кнопка «Раздел»: точка цвета раздела (радар — фирменный, выросли — зелёный,
   упали — красный), подпись, название, стрелка */
.oc-lbtn { font-weight: 600; }
.oc-lbtn .oc-lk { color: var(--text-3); font-weight: 500; }
.oc-lbtn .oc-lk::after { content: ":"; }
.oc-lbtn .oc-car { flex: none; color: var(--text-3); margin-left: -1px; transition: transform var(--dur) var(--ease); }
.oc-bar .fields-dropdown.open > .oc-lbtn .oc-car { transform: rotate(180deg); }
.oc-dot {
  display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dc, var(--text-3));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc, var(--text-3)) 22%, transparent);
}
/* меню «Раздел»: название + подсказка, у текущего — подсветка */
.oc-menu[data-menu-of="list"] { width: 300px; max-width: calc(100vw - 16px); }
.oc-li {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 10px 8px 12px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  color: var(--text-1); font-family: var(--font-body);
}
.oc-li:hover { background: var(--bg-hover); }
.oc-li.on { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-hi); }
.oc-li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-li b { font-size: 13px; font-weight: 700; }
.oc-li em { font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--text-3); white-space: normal; }
/* справа в тулбаре: счёт строк и свежесть, ключи API */
.oc-upd { margin-left: auto; color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-upd:empty { margin-left: auto; }
.oc-upd.stale { color: var(--brand); }
.oc-kdd { flex: none; }
.oc-keys {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--border-hi); background: none;
  color: var(--text-3); font: 600 11.5px/1.2 var(--font-body); white-space: nowrap;
}
.oc-keys:hover { color: var(--text-1); }
.oc-keys.full { border-style: solid; color: var(--c-pos); }
.oc-keys[hidden] { display: none; }

/* ── меню «Поля» и «Ключи» (оболочка — .fields-menu из app.css) ── */
.oc-mh {
  padding: 8px 10px 4px; color: var(--text-3);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.oc-menu[data-menu-of="keys"] { width: 340px; max-width: calc(100vw - 16px); }
/* «Биржи» — чекбоксы бирж с логотипами (вид — как у «Бирж» арбитража) */
.oc-menu[data-menu-of="ex"] { width: 250px; max-width: calc(100vw - 16px); }
.oc-exit { gap: 9px; }
.oc-exit .rr-exi, .oc-exit .rr-exl {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; border-radius: 4px; object-fit: cover;
}
.oc-exit .rr-exl { background: var(--ec, #7a8a99); color: #fff; font: 700 9px/1 var(--font-body); font-style: normal; }
.oc-exit input:not(:checked) ~ .rr-exi { opacity: .55; filter: grayscale(.6); }
.oc-key { display: flex; gap: 8px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; }
.oc-key > b { width: 14px; flex: none; color: var(--c-neg); text-align: center; }
.oc-key.on > b { color: var(--c-pos); }
.oc-key > div { min-width: 0; display: flex; flex-direction: column; }
.oc-key span { color: var(--text-1); font-weight: 600; }
.oc-key em { font-style: normal; color: var(--text-3); font-size: 11.5px; }
.oc-key code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); opacity: .8; }
.oc-mnote { padding: 8px 10px 10px; color: var(--text-3); font-size: 11.5px; line-height: 1.45; border-top: 1px solid var(--border); margin-top: 4px; }
.oc-mempty { padding: 10px 12px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }

/* ── тело: таблица раздела + боковая панель кошельков ── */
.oc-body { flex: 1; min-height: 0; display: flex; position: relative; }
.oc-side {
  display: none; position: relative; flex: none;
  width: var(--oc-side-w, 320px); min-width: 0;
  border-left: 1px solid var(--border); background: var(--bg-panel);
}
.oc-body.side-on .oc-side { display: flex; }
.oc-side-in { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.oc-side-rs {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; z-index: 3;
  cursor: col-resize; touch-action: none;
}
.oc-side-rs:hover, .oc-resizing .oc-side-rs { background: linear-gradient(90deg, transparent 3px, var(--brand) 3px, var(--brand) 5px, transparent 5px); }
.oc-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
.oc-side-bg { display: none; }

.oc-state { padding: 40px 16px; text-align: center; color: var(--text-3); font-size: 13px; font-family: var(--font-body); }

/* ── таблица (копия вида .ul-table): основа для радара (rr-table) и «Выросли / Упали» (oc-mv-table) ── */
table.oc-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.oc-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-panel); color: var(--text-3);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .2px; line-height: 1.25;
  padding: 5px 14px 5px 6px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  user-select: none; -webkit-user-select: none;
  transition: color var(--dur) var(--ease);
}
.oc-table thead th.oc-sortable { cursor: pointer; }
.oc-table thead th.oc-sortable:hover { color: var(--text-1); }
.oc-table thead th::after {
  content: ""; position: absolute; top: 50%; right: 5px;
  width: 9px; height: 9px; margin-top: -5px;
  background: currentColor; opacity: 0;
  -webkit-mask: no-repeat center / 9px 9px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1.4 5 4.6 9 1.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask: no-repeat center / 9px 9px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1.4 5 4.6 9 1.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.oc-table thead th.sort-desc, .oc-table thead th.sort-asc { color: var(--text-1); }
.oc-table thead th.sort-desc::after { opacity: 1; color: var(--brand); }
.oc-table thead th.sort-asc::after { opacity: 1; color: var(--brand); transform: rotate(180deg); }
.oc-table thead th[draggable] { cursor: grab; }
.oc-table thead th.oc-dragging { opacity: .45; }
.oc-table thead th.oc-drop-l { box-shadow: inset 2px 0 0 var(--brand); }
.oc-table thead th.oc-drop-r { box-shadow: inset -2px 0 0 var(--brand); }
.oc-table thead th:first-child { padding-left: 10px; }

.oc-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--dur) var(--ease); cursor: pointer; }
.oc-table tbody tr:hover { background: var(--bg-hover); }
.oc-table td {
  padding: 4px 8px; text-align: center; color: var(--text-1); white-space: nowrap;
  line-height: 1.35; height: 46px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.oc-table th:not(:first-child), .oc-table td:not(:first-child) { border-left: 1px solid var(--border-soft); }
.oc-table th.oc-l, .oc-table td.oc-l { text-align: left; }
.oc-table td.oc-pos, .oc-table td.oc-neg { font-weight: 600; }
.oc-table td.oc-warn { color: var(--brand); }
.oc-table td.oc-fresh { color: var(--brand); font-weight: 700; }
.oc-table td[data-c="rank"] { width: 34px; padding-left: 10px; padding-right: 4px; font-size: 11.5px; }
.oc-table td[data-c="px"] { min-width: 96px; }
.oc-table td sub { font-size: .72em; vertical-align: -.28em; line-height: 0; color: var(--text-2); margin: 0 1px; }
.oc-sub { color: var(--text-3); font-size: 11px; line-height: 1.3; }
.oc-thn { display: none; margin-left: 5px; color: var(--text-3); font-weight: 400; }

/* подсветка изменившейся цены при обновлении */
@keyframes ocFlUp { from { background: rgba(0, 210, 106, .26); } to { background: transparent; } }
@keyframes ocFlDn { from { background: rgba(255, 90, 82, .26); } to { background: transparent; } }
.oc-table td.oc-fl-up { animation: ocFlUp 1.4s ease-out; }
.oc-table td.oc-fl-dn { animation: ocFlDn 1.4s ease-out; }

/* ── логотип монеты с иконкой сети (радар, «Выросли / Упали», страницы пула и монеты) ── */
.oc-logo { position: relative; width: 28px; height: 28px; flex: none; }
.oc-logo > img, .oc-ava {
  position: absolute; inset: 0; width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
.oc-logo > img { opacity: 0; transition: opacity .2s ease; }
.oc-logo > img.ok { opacity: 1; background: var(--bg-card); }
.oc-logo:has(> img.ok) .oc-ava { visibility: hidden; }
.oc-ava {
  display: flex; align-items: center; justify-content: center; font-style: normal;
  background: hsl(var(--ah, 200) 38% 34%); color: #fff; font: 700 12px/1 var(--font-body);
}
[data-theme="light"] .oc-ava { background: hsl(var(--ah, 200) 45% 58%); }
.oc-net-badge {
  position: absolute; right: -4px; bottom: -3px; width: 14px; height: 14px; font-size: 8px;
  box-shadow: 0 0 0 2px var(--bg);
}
.oc-table tbody tr:hover .oc-net-badge { box-shadow: 0 0 0 2px var(--bg-hover); }

/* ── «Выросли» / «Упали»: лидеры CEX за 24ч (webapp/js/onchain-movers.js) ── */
.oc-bar .fields-dropdown[hidden] { display: none !important; }
.oc-mwrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.oc-mwrap[hidden] { display: none; }
.oc-mv-ctl {
  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; flex: none;
  padding: 7px 12px; border-bottom: 1px solid var(--border);
}
.oc-mv-lb { color: var(--text-3); font-size: 11.5px; margin-left: 4px; white-space: nowrap; }
.oc-mv-lb1 { margin-left: 0; }
.oc-mv-seg {
  display: inline-flex; gap: 2px; padding: 2px; flex: none;
  background: var(--input-bg, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--r-md);
}
.oc-mv-seg > button {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer; min-height: 24px;
  padding: 3px 10px; border-radius: calc(var(--r-md) - 2px);
  color: var(--text-3); font: 600 12px/1.2 var(--font-body); white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.oc-mv-seg > button:hover { color: var(--text-1); }
.oc-mv-seg > button.on { color: var(--text-1); background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-hi); }
.oc-mv-tw { flex: 1; min-height: 0; overflow: auto; }
.oc-mv-table tbody tr.oc-mv-nr { cursor: default; }
.oc-mv-table td[data-c="coin"] { font-family: var(--font-body); min-width: 150px; }
.oc-mv-coin { display: flex; align-items: center; gap: 9px; }
.oc-mv-nm { display: flex; flex-direction: column; min-width: 0; }
.oc-mv-sym { font-weight: 700; font-size: 13.5px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; }
.oc-mv-mkin { display: none; font-size: 10.5px; line-height: 1.2; color: var(--text-3); }
.oc-mv-mkin.perp { color: var(--brand); }
.oc-mv-table tr.oc-mv-go:hover .oc-mv-sym { color: var(--brand); }
.oc-mv-rd { display: inline-flex; color: var(--text-3); opacity: .8; }
.oc-mv-table tr.oc-mv-go:hover .oc-mv-rd { color: var(--brand); opacity: 1; }
.oc-mv-mk {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font: 600 10.5px/1.3 var(--font-body); letter-spacing: .2px; white-space: nowrap;
  border: 1px solid var(--border-hi); color: var(--text-2);
}
.oc-mv-mk.perp { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.oc-mv-table td[data-c="chg"] { min-width: 84px; }
.oc-mv-chg { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.oc-mv-table td[data-c="ex"] { min-width: 100px; }
.oc-mv-oth { display: inline-flex; align-items: baseline; gap: 5px; }
.oc-mv-oth em { font: 500 10.5px/1 var(--font-body); font-style: normal; color: var(--text-3); }
.oc-mv-oth b { font-weight: 600; }
.oc-mv-table td[data-c="exs"] { min-width: 290px; }
.oc-mv-exs { display: inline-flex; flex-wrap: wrap; gap: 3px 10px; max-width: 440px; white-space: normal; }
.oc-mv-x { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; white-space: nowrap; }
.oc-mv-x .rr-exi, .oc-mv-x .rr-exl { width: 14px; height: 14px; font-size: 8px; border-radius: 3px; }
.oc-mv-x b { font-weight: 600; }
.oc-mv-x.low { opacity: .45; }

/* ── окно «Фильтры» (#modal-ocflt, общее для радара и «Выросли / Упали»):
   классы #modal-filters из app.css — пресеты, сетка групп мин/макс,
   подзаголовки секций, галочки-условия, сети ── */
#modal-ocflt .modal { max-width: 700px; }
.oc-presets { margin: 6px 0 10px; }
.oc-fsec { margin-top: 2px; padding-top: 10px; }
.oc-fsec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.oc-fflags { gap: 4px; }
.oc-fflags > .filter-group-label { margin-bottom: 4px; }
.oc-fcnt { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.oc-fnets .filter-flow:has(input:checked) .oc-fcnt { color: var(--text-3); }
.oc-presets .seg-btn.active { color: #00D26A; border-color: rgba(0, 210, 106, .55); background: rgba(0, 210, 106, .10); }
.oc-upreset { display: inline-flex; align-items: center; gap: 6px; }
.oc-upreset [data-pdel] { display: inline-flex; opacity: .55; }
.oc-upreset [data-pdel]:hover { opacity: 1; color: var(--c-neg); }
.oc-padd { border-style: dashed; }
.oc-psave { display: flex; gap: 8px; margin-bottom: 10px; }
.oc-psave[hidden] { display: none; }
.oc-psave .filter-input { width: auto; }
.oc-fgrid { margin-top: 6px; gap: 12px 20px; }
.oc-dash { color: var(--text-3); flex: none; }
.oc-fnets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; }
.oc-fnets .filter-flow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-ocflt .filter-liq-hint { margin-top: 10px; }

/* ── панель «Отслеживаемые кошельки» ── */
.oc-side-h {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px; position: sticky; top: 0; z-index: 1; background: var(--bg-panel);
}
.oc-side-h b { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-2); }
.oc-side-h .oc-dim { font-size: 12px; font-family: var(--font-mono); }
.oc-side-h [data-wa="add"] { margin-left: auto; font-size: 17px; font-weight: 600; }
.oc-alh { border-top: 1px solid var(--border); margin-top: 6px; }
.oc-ib {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--text-3); font: 600 11.5px/1 var(--font-body);
}
.oc-ib:hover { color: var(--text-1); background: var(--bg-hover); }
.oc-ib.arm { color: #fff; background: var(--c-neg); }
.oc-side-x { display: inline-flex; }
.oc-wadd { margin: 0 12px 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.oc-wadd .filter-input { width: 100%; flex: none; }
.oc-wadd-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
.oc-wcols { display: flex; gap: 6px; flex-wrap: wrap; }
.oc-wc { width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--wc); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.oc-wc.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--wc); }
.oc-werr { color: var(--c-neg); font-size: 12px; min-height: 0; }
.oc-werr:empty { display: none; }
.oc-wadd-b { display: flex; justify-content: flex-end; gap: 8px; }
.oc-wadd-b .btn { padding: 6px 14px; }
.oc-w {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft);
}
.oc-w:hover { background: var(--bg-hover); }
.oc-wdot { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; background: var(--wc); cursor: pointer; }
.oc-wm { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-wn { font-weight: 600; font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-wa { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 11.5px; }
.oc-wa .oc-net { width: 14px; height: 14px; font-size: 8px; }
.oc-wa code { font-family: var(--font-mono); }
.oc-wren .filter-input { width: 100%; padding: 3px 6px; }
.oc-wact { display: inline-flex; gap: 0; opacity: .0; transition: opacity var(--dur) var(--ease); }
.oc-w:hover .oc-wact, .oc-wact:focus-within, .oc-wact:has(.arm) { opacity: 1; }
.oc-al {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft);
}
.oc-al:hover { background: var(--bg-hover); }
.oc-alt { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.oc-alw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); font-weight: 600; }
.oc-alw::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--wc); margin-right: 5px; vertical-align: 1px; }
.oc-alw:hover { text-decoration: underline; }
.oc-al b { font-weight: 700; }
.oc-alu { font-family: var(--font-mono); color: var(--text-2); }

/* ── узкий монитор / планшет: панель кошельков — выезжающая справа ── */
@media (max-width: 1100px) {
  .oc-body.side-sheet .oc-side {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 240;
    width: min(380px, 92vw); box-shadow: -18px 0 48px rgba(0, 0, 0, .45);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .oc-body.side-sheet .oc-side-bg { display: block; position: fixed; inset: 0; z-index: 239; background: rgba(0, 0, 0, .45); }
  .oc-side-rs { display: none; }
  .oc-wact { opacity: 1; }
}

/* телефон и планшет: монета приклеена, таблица листается вбок */
@media (max-width: 1200px) {
  .oc-mv-tw { overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
  .oc-mv-table tbody td[data-c="coin"] {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg); box-shadow: 1px 0 0 var(--border);
  }
  .oc-mv-table tbody tr:hover td[data-c="coin"] { background: var(--bg-hover); }
  .oc-mv-table thead th[data-k="coin"] { left: 0; z-index: 3; box-shadow: 1px 0 0 var(--border); }
}
/* до 1600px «Раздел:» и «N из M · X с назад» рядом с семью кнопками не влезают:
   подпись прячем (точка и название остаются), счёт строк — в заголовке колонки
   «Монета» (как на телефоне), ключи остаются справа */
@media (min-width: 769px) and (max-width: 1600px) {
  .oc-lbtn .oc-lk { display: none; }
  .oc-bar .oc-search { flex: 0 1 180px; min-width: 120px; }
  .oc-bar .tb-btn { padding-left: 10px; padding-right: 10px; }
  .oc-upd { display: none; }
  .oc-kdd { margin-left: auto; }
  .oc-thn { display: inline; }
}
/* ноутбук (с учётом zoom 1.08 шапки): поиск ещё уже, без счётчика «Полей»,
   «Ключи» — только значок (подробности в подсказке) */
@media (min-width: 769px) and (max-width: 1360px) {
  .oc-bar { gap: 6px; }
  .oc-bar .oc-search { flex: 0 1 130px; min-width: 100px; width: auto; }
  .oc-bar [data-menu="cols"] .tb-badge { display: none; }
  .oc-keys span { display: none; }
  .oc-keys { padding: 6px 7px; }
}

/* телефон: тулбар отдельной строкой — поиск во всю ширину, под ним кнопки
   по три в ряд («Раздел» — в ряду с остальными): у «Радара» шесть (два
   ряда), у «Выросли / Упали» пять. Счёт строк и ключи на телефоне не
   показываем — число монет видно в заголовке колонки «Монета» */
@media (max-width: 768px) {
  #topbar .favs-toolbar.oc-bar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    overflow: visible; padding-bottom: 8px;
  }
  .oc-bar .oc-search { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: none; flex: none; min-width: 0; }
  .oc-bar .tb-btn:not(.has-active) .tb-badge { display: none; }
  .oc-bar [data-menu="cols"] .tb-badge { display: none; }
  .oc-bar .fields-dropdown { min-width: 0; }
  .oc-bar .fields-dropdown[hidden] { display: none; }
  .oc-bar .fields-dropdown > .tb-btn {
    width: 100%; min-width: 0; justify-content: center; gap: 5px;
    padding-left: 4px; padding-right: 4px; font-size: 12.5px;
  }
  .oc-bar .fields-dropdown > .tb-btn > svg { display: none; }
  .oc-bar .fields-dropdown > .tb-btn > .oc-car { display: inline-block; }
  .oc-bar .fields-dropdown > .tb-btn [data-lbl] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oc-bar .tb-badge { flex: none; }
  .oc-lbtn .oc-lk { display: none; }
  .oc-upd, .oc-kdd { display: none; }
  /* меню «Раздел», «Биржи» и «Ключи» — на всю ширину, как у меню арбитража (app.css) */
  .oc-menu[data-menu-of="list"], .oc-menu[data-menu-of="ex"], .oc-menu[data-menu-of="keys"] { width: calc(100vw - 16px); }
  .oc-thn { display: inline; }

  .oc-table td { height: 50px; padding: 4px 6px; }
  .oc-logo, .oc-logo > img, .oc-ava { width: 24px; height: 24px; }
  .oc-table td[data-c="rank"] { display: none; }
  .oc-table th[data-k="rank"] { display: none; }
  .oc-fnets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal-ocflt .filters-grid { grid-template-columns: 1fr; }

  .oc-mv-ctl { padding: 6px 10px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .oc-mv-ctl::-webkit-scrollbar { display: none; }
  .oc-mv-seg > button { min-height: 28px; padding: 4px 9px; }
  .oc-mv-lb { display: none; }
  .oc-mv-table td[data-c="coin"] { min-width: 108px; max-width: 120px; padding-left: 8px; }
  .oc-mv-coin { gap: 7px; }
  .oc-mv-table td[data-c="rank"], .oc-mv-table th[data-k="rank"],
  .oc-mv-table td[data-c="mkt"], .oc-mv-table th[data-k="mkt"] { display: none; }
  .oc-mv-mkin { display: block; }
  .oc-mv-exs { max-width: 300px; }
}