/* ================================================================
   KAN-103 — экран Hyperliquid Perps в витрине.
   Копия premium_feed/css/hl_feed.css, заскоупленная `.ds-screen`:
   вьюпортные @media прода сняты (карточка уже уже вьюпорта), вместо них
   ниже зафиксирован тот набор колонок, который видит десктоп <1900px,
   и свой мобильный блок. При правках hl_feed.css файл пересобирается
   тем же способом (см. tools/docs/web/LANDING_MODULE_SHOWCASE_2026_09_09.md).
   ================================================================ */
.ds-screen .mn-body { display: grid; grid-template-columns: 264px minmax(0,1fr) 312px; min-height: 0; overflow: hidden; }
.ds-screen .mn-side { border-right: 1px solid var(--border); background: var(--bg); min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 16px 14px 18px; }
.ds-screen .mn-side::-webkit-scrollbar { width: 0; }
.ds-screen .hl-panel { display: flex; flex-direction: column; }
.ds-screen .panel-head { display: flex; align-items: center; gap: 8px; padding: 0 6px 10px; margin-bottom: 10px; font-family: var(--tp-font-head); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px dashed var(--border); }
.ds-screen .panel-head .ic { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.ds-screen .panel-head > .pn-set-head { flex: 1; }
.ds-screen .panel-head .cnt { margin-left: auto; font-family: var(--tp-font-mono); font-size: 10px; letter-spacing: 0; padding: 1px 7px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); color: var(--text-4); }
.ds-screen .panel-group { display: flex; flex-direction: column; }
.ds-screen .panel-head-btn { width: 100%; background: transparent; border: none; border-bottom: 1px dashed var(--border); cursor: pointer; text-align: left; }
.ds-screen .panel-head-btn:hover { color: var(--text); }
.ds-screen .panel-head-btn .panel-chev { width: 12px; height: 12px; color: var(--text-4); flex-shrink: 0; transition: transform .18s; }
.ds-screen .hl-panel.is-collapsed .panel-head-btn { margin-bottom: 0; }
.ds-screen .hl-panel.is-collapsed .panel-head-btn .panel-chev { transform: rotate(-90deg); }
.ds-screen .hl-panel.is-collapsed .panel-group { display: none; }
.ds-screen .hl-setting-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--border); transition: background .15s; }
.ds-screen .panel-group .hl-setting-row:last-child { border-bottom: none; }
.ds-screen .hl-setting-row.clickable { cursor: pointer; }
.ds-screen .hl-setting-row.clickable:hover { background: var(--surface); }
.ds-screen .hl-setting-key { flex: 1; font-size: 12.5px; color: var(--text-2); }
.ds-screen .hl-setting-val { font-family: var(--tp-font-mono); font-size: 11.5px; color: var(--text); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.ds-screen .hl-setting-val .mut { color: var(--text-4); }
.ds-screen .hl-setting-chev { width: 13px; height: 13px; color: var(--text-4); }
.ds-screen .hl-toggle-switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
.ds-screen .hl-toggle-switch input { opacity: 0; width: 0; height: 0; }
.ds-screen .hl-toggle-slider { position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; transition: all .2s; cursor: pointer; }
.ds-screen .hl-toggle-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); transition: all .2s; }
.ds-screen .hl-toggle-switch input:checked + .hl-toggle-slider { background: var(--accent); border-color: var(--accent); }
.ds-screen .hl-toggle-switch input:checked + .hl-toggle-slider::before { left: 16px; background: #fff; }
.ds-screen .fav-trader-row { display: flex; align-items: center; gap: 9px; padding: 9px 6px; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--border); transition: background .15s; cursor: pointer; }
.ds-screen .panel-group .fav-trader-row:last-child { border-bottom: none; }
.ds-screen .fav-trader-row:hover { background: var(--surface); }
.ds-screen .fav-trader-row .ft-av { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.ds-screen .fav-trader-row .ft-av svg { width: 100%; height: 100%; display: block; }
.ds-screen .fav-trader-row .name { flex: 1; min-width: 0; font-family: var(--tp-font-head); font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-screen .fav-trader-row .ft-star { width: 12px; height: 12px; color: var(--warn); flex-shrink: 0; }
.ds-screen .fav-trader-row .copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 20px; flex-shrink: 0; padding: 0; border-radius: 6px; color: var(--text-4); background: var(--surface); border: 1px solid var(--border); transition: all .14s; }
.ds-screen .fav-trader-row .copy-btn:hover { color: var(--text-2); background: var(--surface-hover); }
.ds-screen .fav-trader-row .copy-btn svg { width: 11px; height: 11px; }
.ds-screen .copy-btn.copied, .ds-screen .copy-btn.copied:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ds-screen .bot-note { margin-top: auto; padding: 11px 12px; font-size: 11px; line-height: 1.5; color: var(--text-3); background: transparent; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-start; }
.ds-screen .bot-note .ic { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.ds-screen .bot-note b { color: var(--text-2); font-weight: 500; }
.ds-screen .mn-main { min-width: 0; overflow: auto; display: flex; flex-direction: column; background: var(--bg); }
.ds-screen .mn-main::-webkit-scrollbar { width: 8px; height: 8px; }
.ds-screen .mn-main::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.ds-screen .mn-inner { display: flex; flex-direction: column; min-width: 1080px; }
.ds-screen .sum-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: transparent; margin: 18px 20px 6px; border: none; border-radius: 0; flex-shrink: 0; }
.ds-screen .sum-cell { padding: 2px 16px; background: transparent; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; border-right: 1px solid var(--border); }
.ds-screen .sum-cell:last-child { border-right: none; }
.ds-screen .sum-cell .k { font-family: var(--tp-font-mono); font-size: 9.5px; color: var(--text-4); letter-spacing: .06em; text-transform: uppercase; }
.ds-screen .sum-cell .v { font-family: var(--tp-font-mono); font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ds-screen .sum-cell .v.pos { color: var(--success); }
.ds-screen .sum-cell .v.neg { color: var(--danger); }
.ds-screen .sum-cell .v.sm { font-size: 14px; }
.ds-screen .sum-cell .d { font-family: var(--tp-font-mono); font-size: 10px; color: var(--text-4); }
.ds-screen .sum-cell .d.pos { color: var(--success); }
.ds-screen .sum-cell .d.neg { color: var(--danger); }
.ds-screen .mt-stick { position: sticky; top: 0; z-index: 6; background: var(--bg); }
.ds-screen .mt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--border); }
/* KAN-89 (29.09): как в ленте — фильтры за воронкой со счётчиком, под тулбаром строка «показывают N из M» */
.ds-screen .mt-gear { display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--accent); cursor: pointer; }
.ds-screen .mt-gear:hover { border-color: var(--border-accent); background: var(--accent-soft); }
.ds-screen .mt-gear svg { width: 15px; height: 15px; }
.ds-screen .mt-gear-cnt { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--tp-font-mono); font-size: 9px; font-weight: 600; display: none; align-items: center; justify-content: center; padding: 0 3px; }
.ds-screen .mt-gear.has .mt-gear-cnt { display: inline-flex; }
.ds-screen .mt-filter-note { display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 7px 20px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 5%, transparent); font-family: var(--tp-font-mono); font-size: 11.5px; color: var(--text-3); }
.ds-screen .mt-filter-note .mfn-txt b { color: var(--text); font-weight: 600; }
.ds-screen .mt-filter-note .mfn-btn { flex-shrink: 0; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg-elev); color: var(--accent); cursor: pointer; }
.ds-screen .mt-filter-note .mfn-btn svg { width: 14px; height: 14px; }
.ds-screen .tt-mintr.tt-minsz { margin-left: 4px; }
.ds-screen .tt-mintr.tt-minsz input { width: 46px; }
.ds-screen .seg { display: inline-flex; gap: 2px; padding: 0; background: transparent; border: none; border-radius: 0; }
.ds-screen .seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: transparent; font-family: var(--tp-font-mono); font-size: 11.5px; font-weight: 500; color: var(--text-3); transition: color .14s, background .14s; white-space: nowrap; }
.ds-screen .seg-btn:hover { color: var(--text); background: var(--surface-hover); }
.ds-screen .seg-btn.active { color: var(--accent); background: var(--accent-soft); box-shadow: none; font-weight: 600; }
.ds-screen .seg.seg-status .seg-btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); flex-shrink: 0; }
.ds-screen .seg.seg-status .seg-btn[data-status="open"]::before { background: var(--success); }
.ds-screen .seg.seg-status .seg-btn[data-status="closed"]::before { background: var(--danger); }
.ds-screen .seg.seg-status .seg-btn[data-status="all"]::before { display: none; }
.ds-screen .dt-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
.ds-screen .dt-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border-radius: 8px; background: transparent; border: none; color: var(--text-3); font-family: var(--tp-font-mono); font-size: 11.5px; font-weight: 500; transition: all .14s; white-space: nowrap; }
.ds-screen .dt-chip svg { width: 14px; height: 14px; color: var(--accent); }
.ds-screen .dt-chip:hover { background: var(--surface-hover); color: var(--text); }
.ds-screen .dt-chip.on { background: var(--accent-soft); color: var(--accent); }
.ds-screen .dt-chip .dt-chip-cnt { font-family: var(--tp-font-mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 1px 5px; }
.ds-screen .dt-chip.on .dt-chip-cnt { color: #fff; background: var(--accent); }
.ds-screen .dt-dd { position: relative; }
.ds-screen .dt-dd-btn { gap: 7px; }
.ds-screen .dt-dd-btn .dt-dd-chev { width: 12px; height: 12px; color: var(--text-4); transition: transform .15s; }
.ds-screen .dt-dd-btn[aria-expanded="true"] .dt-dd-chev { transform: rotate(180deg); }
.ds-screen .dt-dd-btn.on { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent); }
.ds-screen .dt-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 180px; padding: 5px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 11px; box-shadow: var(--shadow-lg); }
.ds-screen .dt-dd-menu[hidden] { display: none; }
.ds-screen .dt-dd-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 7px; background: transparent; color: var(--text-2); font-size: 12.5px; transition: background .12s, color .12s; }
.ds-screen .dt-dd-item:hover { background: var(--surface-hover); color: var(--text); }
.ds-screen .dt-dd-ic { width: 18px; height: 18px; display: inline-flex; flex-shrink: 0; }
.ds-screen .dt-dd-ic svg { width: 100%; height: 100%; }
.ds-screen .dt-dd-check { width: 13px; height: 13px; margin-left: auto; color: var(--accent); opacity: 0; }
.ds-screen .dt-dd-item.on { color: var(--text); }
.ds-screen .dt-dd-item.on .dt-dd-check { opacity: 1; }
.ds-screen .dt-dd-search { width: 100%; box-sizing: border-box; margin-bottom: 5px; padding: 7px 10px; background: var(--surface-hover); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text); font-size: 12.5px; outline: none; }
.ds-screen .dt-dd-search:focus { border-color: var(--accent); }
.ds-screen .dt-dd-list { max-height: 300px; overflow-y: auto; }
.ds-screen .dt-dd-empty { padding: 12px 10px; text-align: center; color: var(--text-2); font-size: 12px; }
.ds-screen .dt-dd-limit { position: sticky; top: 0; z-index: 1; padding: 8px 10px; margin-bottom: 5px; border-radius: 7px; background: rgba(239,68,68,.13); color: #ef6b6b; font-size: 12px; font-weight: 600; text-align: center; }
.ds-screen .dd-lbl-ic { width: 16px; height: 16px; display: inline-flex; vertical-align: middle; }
.ds-screen .dd-lbl-ic + .dd-lbl-ic { margin-left: 3px; }
.ds-screen .dd-lbl-ic svg, .ds-screen .dd-lbl-ic img { width: 100%; height: 100%; }
.ds-screen .dt-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.ds-screen .mt-tools-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ds-screen .btn-reset { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: transparent; border: none; color: var(--text-3); font-family: var(--tp-font-mono); font-size: 11.5px; transition: all .14s; }
.ds-screen .btn-reset:hover { color: var(--text); background: var(--surface-hover); }
.ds-screen .btn-reset svg { width: 13px; height: 13px; }
.ds-screen .mt-table { --mcols: 52px minmax(132px,1.25fr) minmax(150px,1.45fr) 104px 92px 100px 116px 100px 130px 116px; }
.ds-screen .mt-head { display: grid; grid-template-columns: var(--mcols); align-items: center; gap: 10px; padding: 9px 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elev) 94%, var(--bg)); font-family: var(--tp-font-head); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.ds-screen .mt-h { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; text-align: center; }
.ds-screen .mt-h.r { justify-content: center; text-align: center; }
.ds-screen .mt-h.sortable { cursor: pointer; user-select: none; transition: color .12s; }
.ds-screen .mt-h.sortable:hover { color: var(--text-2); }
.ds-screen .mt-h.sorted { color: var(--accent); }
.ds-screen .mt-h.sorted::after { content: '▼'; font-size: 7px; line-height: 1; margin-left: 1px; }
.ds-screen .mt-h.sorted.asc::after { content: '▲'; }
.ds-screen .mt-group { display: flex; align-items: center; gap: 8px; padding: 11px 20px; font-family: var(--tp-font-head); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); }
.ds-screen .mt-group-ic { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; opacity: .85; }
.ds-screen .mt-group-cnt { font-family: var(--tp-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0; padding: 1px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); color: var(--text-4); }
.ds-screen .mt-fav-chk { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; cursor: pointer; padding: 0; }
.ds-screen .mt-fav-chk-ic { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.ds-screen .mt-fav-chk-lbl { font-family: var(--tp-font-mono); font-size: 11.5px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: normal; transition: color .14s; }
.ds-screen .mt-fav-chk:hover .mt-fav-chk-lbl { color: var(--text); }
.ds-screen .mt-fav-chk.on .mt-fav-chk-lbl { color: var(--accent); }
.ds-screen .mt-fav-chk.on .cs-check { background: var(--accent); border-color: var(--accent); }
.ds-screen .mt-fav-chk.on .cs-check svg { opacity: 1; color: #fff; }
.ds-screen .mt-row { position: relative; display: grid; grid-template-columns: var(--mcols); align-items: center; gap: 10px; width: 100%; padding: 11px 20px; cursor: pointer; text-align: left; border-bottom: 1px solid var(--border); transition: background .12s; }
.ds-screen .mt-row:hover { background: var(--surface); }
.ds-screen .mt-row.is-closed { background: var(--bg-elev-2); }
.ds-screen .mt-row.is-closed .mt-coin-name, .ds-screen .mt-row.is-closed .mt-num { color: var(--text-3); }
.ds-screen .mt-row.is-closed .mt-coin-ic, .ds-screen .mt-row.is-closed .tp-av { opacity: .6; }
.ds-screen .mt-row.is-closed:hover { background: var(--surface); }
.ds-screen .mt-row.tracked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .8; }
.ds-screen .mt-row .mt-unread { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); z-index: 3; pointer-events: none; }
.ds-screen .mt-row.has-unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* KAN-81: свечение новой активности — подсветка гаснет, блик пробегает слева направо.
   Класс ставит рендер строки (окно ~2.6с в _hlGlow), анимация одноразовая; строки обоих
   видов (таблица .mt-row и рейл .rail-row) уже position:relative. */
@keyframes rrGlowFade {0%   { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
  100% { background-color: transparent; }}
@keyframes rrGlowSweep {0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }}
.ds-screen .mt-row.rr-glow, .ds-screen .rail-row.rr-glow { animation: rrGlowFade 2.4s ease-out var(--rr-gd, 0s) 1 both; }
.ds-screen .mt-row.rr-glow::after, .ds-screen .rail-row.rr-glow::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 65%); background-size: 220% 100%; background-repeat: no-repeat; animation: rrGlowSweep 1.15s ease-out var(--rr-gd, 0s) 1 both; }
.ds-screen .mt-pin { display: inline-flex; align-items: center; justify-content: center; }
.ds-screen .mt-pin svg { width: 13px; height: 13px; }
.ds-screen .mt-pin .pin-tracked { color: var(--accent); }
.ds-screen .mt-pin .pin-fav { color: var(--warn); }
.ds-screen .mt-actions { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.ds-screen .mt-act-btn { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 0; border-radius: 6px; background: transparent; border: none; color: var(--text-4); transition: color .14s, background .14s; cursor: pointer; }
.ds-screen .mt-act-btn svg { width: 13px; height: 13px; }
.ds-screen .mt-act-btn:hover { background: var(--surface-hover); color: var(--text-2); }
.ds-screen .mt-act-btn.star.on { color: var(--warn); }
.ds-screen .mt-act-btn.pin.on { color: var(--accent); }
.ds-screen .mt-coin-cell { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.ds-screen .mt-coin-ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); }
.ds-screen .mt-coin-ic svg { width: 100%; height: 100%; }
.ds-screen .mt-coin-ic .coin-icon-fb { -webkit-text-stroke: .35px #000; paint-order: stroke fill; }
.ds-screen .mt-coin-txt { min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 7px; }
.ds-screen .mt-coin-name { font-family: var(--tp-font-head); font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -.01em; line-height: 1; }
.ds-screen .mt-side { display: inline-flex; align-items: center; justify-content: center; font-family: var(--tp-font-mono); font-size: 10px; font-weight: 700; line-height: 1; color: #fff; padding: 3px 5px; border-radius: 5px; min-width: 20px; -webkit-text-stroke: .35px #000; paint-order: stroke fill; }
.ds-screen .mt-side.long { background: #2f8a6b; color: #fff; }
.ds-screen .mt-side.short { background: #b84d5d; color: #fff; }
.ds-screen .mt-trader { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; }
.ds-screen .tp-av { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.ds-screen .tp-av svg { width: 100%; height: 100%; display: block; }
.ds-screen .mt-trader-txt { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ds-screen .mt-trader-name { display: flex; align-items: center; gap: 5px; font-family: var(--tp-font-head); font-size: 12.5px; font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-screen .mt-trader-name .fav { width: 10px; height: 10px; color: var(--warn); flex-shrink: 0; }
.ds-screen .mt-trader-addr { display: flex; align-items: center; gap: 5px; font-family: var(--tp-font-mono); font-size: 10px; color: var(--text-4); }
.ds-screen .mt-trader-addr .copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 16px; padding: 0; border-radius: 5px; color: var(--text-4); background: var(--surface); border: 1px solid var(--border); transition: all .14s; }
.ds-screen .mt-trader-addr .copy-btn:hover { color: var(--text-2); background: var(--surface-hover); }
.ds-screen .mt-trader-addr .copy-btn svg { width: 9px; height: 9px; }
.ds-screen .mt-num { font-family: var(--tp-font-mono); font-size: 12px; font-weight: 600; color: var(--text-2); text-align: center; font-variant-numeric: tabular-nums; justify-self: center; }
.ds-screen .mt-num.warn { color: var(--warn); }
.ds-screen .mt-num .sub { display: block; font-size: 9.5px; font-weight: 500; margin-top: 2px; }
.ds-screen .mt-num .sub.pos { color: var(--success); }
.ds-screen .mt-num .sub.neg { color: var(--danger); }
.ds-screen .mt-num.mut { color: var(--text-4); }
.ds-screen .mt-pnl { display: flex; flex-direction: column; align-items: center; gap: 2px; justify-self: center; text-align: center; }
.ds-screen .mt-pnl-v { font-family: var(--tp-font-mono); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ds-screen .mt-pnl-v.pos { color: var(--success); }
.ds-screen .mt-pnl-v.neg { color: var(--danger); }
.ds-screen .mt-pnl-roi { font-family: var(--tp-font-mono); font-size: 9.5px; font-weight: 600; }
.ds-screen .mt-pnl-roi.pos { color: var(--success); }
.ds-screen .mt-pnl-roi.neg { color: var(--danger); }
.ds-screen .mt-status { display: flex; flex-direction: column; align-items: center; gap: 3px; justify-self: center; }
.ds-screen .st-chip { font-family: var(--tp-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; }
.ds-screen .st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ds-screen .st-chip.open { color: var(--success); }
.ds-screen .st-chip.open .st-dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
.ds-screen .st-chip.closed { color: var(--text-3); }
.ds-screen .st-chip.closed .st-dot { background: var(--danger); }
.ds-screen .st-chip.liquidated { color: var(--danger); }
.ds-screen .st-chip.liquidated .st-dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.ds-screen .mt-time { font-family: var(--tp-font-mono); font-size: 10px; color: var(--text-4); }
.ds-screen .mt-empty { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; text-align: center; color: var(--text-4); font-family: var(--tp-font-mono); font-size: 12.5px; }
.ds-screen .mt-empty svg { width: 28px; height: 28px; opacity: .5; }
.ds-screen .mt-table.is-empty .mt-group, .ds-screen .mt-table.is-empty #mtTracked, .ds-screen .mt-table.is-empty #mtAll { display: none; }
.ds-screen .mt-table.is-empty .mt-empty { display: flex; }
.ds-screen .rr-time { color: var(--text-4); font-size: 10px; font-family: var(--tp-font-mono); white-space: nowrap; margin-left: 6px; }
.ds-screen .mr-l2 .rr-time { margin-left: 0; }
.ds-screen .hl-more-ind { padding: 14px 16px 24px; text-align: center; font-family: var(--tp-font-mono); font-size: 11px; color: var(--text-4); }
.ds-screen .mn-rail { border-left: 1px solid var(--border); background: var(--bg); min-height: 0; display: flex; flex-direction: column; }
.ds-screen .mr-head { flex: none; display: flex; align-items: center; gap: 9px; padding: 15px 16px 13px; border-bottom: 1px solid var(--border); }
.ds-screen .mr-head .ic { width: 15px; height: 15px; color: var(--accent); }
.ds-screen .mr-title { font-family: var(--tp-font-head); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ds-screen .mr-unread { margin-left: auto; font-family: var(--tp-font-mono); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ds-screen .mr-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 0 22px; }
.ds-screen .mr-body::-webkit-scrollbar { width: 7px; }
.ds-screen .mr-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.ds-screen .mr-group { display: flex; align-items: center; gap: 8px; padding: 15px 16px 7px; font-family: var(--tp-font-head); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); }
.ds-screen .mr-group-ic { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; opacity: .85; }
.ds-screen .mr-group-cnt { font-family: var(--tp-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0; padding: 1px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); color: var(--text-4); }
.ds-screen .tt-item { position: relative; display: grid; grid-template-columns: 16px 26px minmax(0,1fr) 20px; align-items: center; gap: 7px; width: 100%; padding: 10px 12px; cursor: pointer; text-align: left; border-bottom: 1px solid var(--border); transition: background .12s; }
.ds-screen .tt-item:hover { background: var(--surface); }
.ds-screen .tt-rank { font-family: var(--tp-font-mono); font-size: 10.5px; font-weight: 600; color: var(--text-4); text-align: center; font-variant-numeric: tabular-nums; }
.ds-screen .tt-rank.top { color: var(--accent); }
.ds-screen .tt-av { width: 26px; height: 26px; border-radius: 9px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.ds-screen .tt-av svg { width: 100%; height: 100%; display: block; }
.ds-screen .tt-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ds-screen .tt-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ds-screen .tt-addr { flex: 0 1 auto; font-family: var(--tp-font-mono); font-size: 11.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-screen .tt-l2 { display: flex; align-items: center; gap: 6px; font-family: var(--tp-font-mono); font-size: 9.5px; color: var(--text-4); white-space: nowrap; }
.ds-screen .tt-l2 .sep { flex: none; width: 1px; height: 8px; background: var(--border-strong); }
.ds-screen .tt-money { margin-left: auto; flex: 0 0 auto; font-family: var(--tp-font-mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.ds-screen .tt-money.pos { color: var(--success); }
.ds-screen .tt-money.neg { color: var(--danger); }
.ds-screen .tt-money .tt-pct { font-weight: 500; opacity: .85; }
.ds-screen .tt-sorts { gap: 2px; }
.ds-screen .rail-top .tt-sorts .seg-btn { flex: 1 1 0; justify-content: center; padding: 5px 6px; font-size: 10.5px; border-radius: 7px; }
.ds-screen .rail-top .tt-sorts .seg-btn.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.ds-screen .tt-gates { flex-wrap: wrap; gap: 4px; width: 100%; min-width: 0; }
.ds-screen .tt-gates .dt-chip { padding: 4px 7px; font-size: 10px; border-radius: 7px; }
.ds-screen .tt-gates .dt-chip svg { width: 10px; height: 10px; }
.ds-screen .tt-mintr { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-family: var(--tp-font-mono); font-size: 10px; color: var(--text-4); cursor: text; }
.ds-screen .tt-mintr:focus-within { border-color: var(--accent); color: var(--text-3); }
.ds-screen .tt-mintr input { width: 30px; padding: 0; border: none; background: transparent; text-align: center; font-family: var(--tp-font-mono); font-size: 11px; font-weight: 600; color: var(--text); outline: none; -moz-appearance: textfield; }
.ds-screen .tt-mintr input::-webkit-outer-spin-button, .ds-screen .tt-mintr input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds-screen .tt-fav { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: transparent; border-radius: 6px; color: var(--text-4); cursor: pointer; transition: color .14s, background .14s; }
.ds-screen .tt-fav svg { width: 13px; height: 13px; }
.ds-screen .tt-fav:hover { color: var(--warn); background: var(--surface-hover); }
.ds-screen .tt-fav.on { color: var(--warn); }
.ds-screen .mt-row.mt-nohist, .ds-screen .rail-row.rail-nohist { opacity: .82; }
.ds-screen .mt-nohist-i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; background: #E6B400; color: #1a1a1a; font: 700 10px/1 var(--mono, ui-monospace, monospace); cursor: help; vertical-align: middle; flex: none; }

/* ── Набор колонок ─────────────────────────────────────────────────────
   В проде он зависит от ширины ОКНА: <1900px прячутся «Цена» и «До ликв.»,
   <1500px ещё и «Вход». Карточка живёт внутри страницы, поэтому фиксируем
   вариант десктопа <1900px — его видит большинство. */
.ds-screen .mn-inner { min-width: 0; }
.ds-screen .mt-table { --mcols: 44px minmax(100px,1.2fr) minmax(120px,1.4fr) 90px 84px 92px 110px 100px; }
.ds-screen .mt-head, .ds-screen .mt-row { gap: 8px; }
.ds-screen .mt-col-price, .ds-screen .mt-col-liq { display: none !important; }
/* Подвал с логотипом внутри таблицы карточке не нужен — бренд уже в шапке. */
.ds-screen .tp-brand-foot { display: none; }

/* ── Узкая карточка ───────────────────────────────────────────────────
   Повторяет мобильный фолбэк прода (<820px): таблица становится списком. */
@media (max-width: 900px) {
  .ds-screen .mn-body { grid-template-columns: 1fr; }
  .ds-screen .mn-side, .ds-screen .mn-rail { display: none; }
  .ds-screen .sum-bar { grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 12px 14px 4px; }
  .ds-screen .sum-cell:nth-child(2n) { border-right: none; }
  .ds-screen .sum-cell { align-items: flex-start; text-align: left; padding: 8px 14px; }
  .ds-screen .mt-toolbar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding: 10px 14px; }
  .ds-screen .mt-toolbar::-webkit-scrollbar { display: none; }
  .ds-screen .mt-head { display: none; }
  .ds-screen .mt-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
  .ds-screen .mt-row > .mt-pin, .ds-screen .mt-row > .mt-num, .ds-screen .mt-row > .mt-trader { display: none; }
  .ds-screen .mt-row > .mt-coin-cell { flex: 1 1 auto; justify-content: flex-start; min-width: 0; }
  .ds-screen .mt-row > .mt-pnl, .ds-screen .mt-row > .mt-status { align-items: flex-end; }
  .ds-screen .mt-group { padding: 10px 14px; }
}

/* В проде размер логотипа монеты приходит инлайном (data-style) — на лендинге
   инлайновые стили запрещены CSP, поэтому те же значения правилом. */
.ds-screen .coin-icon { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Маркер «пин + звезда» перед именем трейдера — правила лежат в hl_detail.css
   (он в проде грузится следом за hl_feed.css). */
.ds-screen .rr-mark { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; vertical-align: middle; }
.ds-screen .rr-mark:empty { display: none; }
.ds-screen .rr-mark svg { width: 11px; height: 11px; display: block; }
.ds-screen .rr-mark .hm-pin { color: var(--accent); }
.ds-screen .rr-mark .hm-star { color: #f5a623; }
/* Галочка «Показывать сделки избранных» — .cs-check из style.css прода. */
.ds-screen .cs-check { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface); flex-shrink: 0; }
.ds-screen .cs-check svg { width: 10px; height: 10px; opacity: 0; }