/* ============================================================================ v4.css — SPA «модель Nansen» с ФИКСИРОВАННЫМ ВЬЮПОРТОМ (цикл правок 2026-06-11). Закон: документ НЕ скроллится и НЕ растёт (body 100vh overflow hidden); скроллятся ТОЛЬКО внутренности панелей (.v4-scroll, min-height:0 на детях grid/flex — обязкогда). Ложится на tokens/base/components/v3.css (переиспользует w3-/ws-классы воркспейса). ========================================================================== */ body.v4{height:100vh; overflow:hidden; display:flex; flex-direction:column;} /* ---------- персистентный шелл ---------- */ .v4-top{height:52px; flex:0 0 auto; display:flex; align-items:center; gap:var(--space-5); padding-inline:var(--space-4); border-bottom:1px solid var(--border); position:relative; z-index:40; background:color-mix(in srgb, var(--bg) 94%, transparent);} .v4-brand{display:flex; align-items:center; gap:9px; color:var(--text-1); font-family:var(--font-display); font-weight:500; font-size:.875rem; letter-spacing:.18em;} .v4-brand svg{width:22px; height:22px; stroke:var(--text-1);} .v4-brand:hover{color:var(--text-1);} /* глобальный поиск токена (вход в воркспейс) */ .v4-omni{position:relative; flex:0 1 420px; min-width:220px;} .v4-omni .box{display:flex; align-items:center; gap:8px; height:34px; padding:0 11px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm);} .v4-omni .box:focus-within{border-color:var(--border-hover);} /* без акцентного свечения (user) */ .v4-omni input:focus,.v4-omni input:focus-visible{outline:none; box-shadow:none;} .v4-omni .ic{width:14px; height:14px; color:var(--text-3); flex:0 0 auto;} .v4-omni input{flex:1; min-width:0; background:none; border:none; outline:none; font-size:.875rem; color:var(--text-1);} .v4-omni input::placeholder{color:var(--text-disabled);} .v4-omni kbd{font-family:var(--font-mono); font-size:.625rem; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); border-radius:3px; padding:1px 5px;} .v4-omni .pop{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; display:none; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-2); padding:6px; max-height:380px; overflow:auto;} .v4-omni.open .pop{display:block;} .v4-omni .opt{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; font-size:.875rem; color:var(--text-2);} .v4-omni .opt .lg{width:20px; height:20px; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.5625rem; font-weight:600;} .v4-omni .opt .lg img{width:100%; height:100%; object-fit:cover;} .v4-omni .opt .sym{color:var(--text-1); font-weight:600;} .v4-omni .opt .meta{margin-left:auto; color:var(--text-3); font-size:.75rem;} .v4-omni .opt[aria-selected="true"], .v4-omni .opt:hover{background:var(--fill-hover); color:var(--text-1);} .v4-omni .opt[aria-selected="true"]{box-shadow:inset 2px 0 0 var(--accent);} .v4-top .right{margin-left:auto; display:flex; align-items:center; gap:var(--space-4);} /* .v4-live / .v4-live .dot удалены 2026-06-21: индикатор снапшота убран из топбара. */ /* ---------- тело: рейл + вид ---------- */ .v4-body{flex:1; min-height:0; display:flex;} .v4-rail{width:188px; flex:0 0 auto; border-right:1px solid var(--border); display:flex; flex-direction:column; padding:12px 10px; gap:2px; overflow:auto;} .v4-rail .grp{font-size:.625rem; letter-spacing:var(--track-caps-sm); text-transform:uppercase; color:var(--text-disabled); padding:12px 12px 6px;} .v4-rail a{display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-radius:var(--radius-sm); font-size:.875rem; font-weight:500; color:var(--text-2); position:relative; white-space:nowrap; transition:background-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);} .v4-rail a:hover{color:var(--text-1); background:var(--fill-hover);} .v4-rail a.is-active{color:var(--text-1); background:var(--fill-selected);} .v4-rail a.is-active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--accent); border-radius:2px;} .v4-rail a svg{width:16px; height:16px; flex:0 0 auto;} .v4-rail{overflow:hidden;} /* скроллит только полоса вкладок */ .v4-rail .tk-lg{width:18px; height:18px; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; font-weight:600; flex:0 0 auto;} .v4-rail .tk-lg img{width:100%; height:100%; object-fit:cover;} /* вкладки открытых токенов: накапливаются, переключение/закрытие, ограничены + скролл */ .v4-rail-tabs{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-top:6px;} .v4-rail-foot{flex:0 0 auto; display:flex; flex-direction:column; gap:2px; padding-top:6px;} .v4-rail-tab{position:relative; display:flex; align-items:center; border-radius:var(--radius-sm);} .v4-rail-tab .tk{flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:36px; padding:0 4px 0 12px; color:var(--text-2); border-radius:var(--radius-sm);} .v4-rail-tab .tk .sym{font-weight:500; font-size:.8125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .v4-rail-tab:hover{background:var(--fill-hover);} .v4-rail-tab:hover .tk{color:var(--text-1);} .v4-rail-tab.is-active{background:var(--fill-selected);} .v4-rail-tab.is-active .tk{color:var(--text-1);} .v4-rail-tab.is-active::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px; background:var(--accent); border-radius:2px;} .v4-rail-tab .x{width:24px; height:24px; flex:0 0 auto; margin-right:4px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-disabled); border-radius:var(--radius-sm); opacity:0; transition:opacity var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);} .v4-rail-tab:hover .x, .v4-rail-tab.is-active .x{opacity:1;} .v4-rail-tab .x:hover{color:var(--text-1); background:var(--fill-active);} .v4-rail-tab .x svg{width:13px; height:13px;} /* контент-область: фиксированная рамка, виды переключаются внутри */ .v4-view{flex:1; min-height:0; overflow:hidden; padding:12px; position:relative;} .v4-vw{height:100%; min-height:0;} .v4-vw[hidden]{display:none;} /* ===== ВИД: СВОДКА ЗА 12 ЧАСОВ (#vw-summary, buildSummary) ===== */ /* Зеркалит 12ч-роллап бота: сводка + наборы кошельков (Safe/Команда/Фреши) с выгрузкой+«В Дельту». Переиспользует .cf-counters (глобальный) + .ws-* (mountCapped/renderWallet); .side-sub скопирован т.к. рыночный отскоплен под .v4-market. Всё на тема-переменных → светлая/тёмная бесплатно. */ /* ЕДИНЫЙ скролл-владелец = #vw-summary; шапка-схема леджера липнет top:0, панель выгрузки — bottom:0 */ #vw-summary{height:100%; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px;} #vw-summary .side-sub{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0 7px; margin-top:2px; border-top:1px solid var(--border); font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:var(--track-caps-sm); color:var(--text-2);} #vw-summary .side-sub .t{white-space:nowrap;} /* селектор периодов сводки (прошедшие 12ч + текущий) — до 5 кнопок, перенос на узком экране (2026-07-11) */ .v4-persel{flex-wrap:wrap; max-width:100%;} .v4-persel button{font-family:var(--font-mono); font-size:.68rem; white-space:nowrap;} #vw-summary .side-sub .n{font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-3); font-size:.7rem; font-family:var(--font-mono);} /* КРОНА */ .rp-head{flex:0 0 auto;} .rp-summary{padding:2px var(--w3-pad) 14px;} .rp-deck{margin:9px 0 0; max-width:760px; font-size:.86rem; line-height:1.55; color:var(--text-2);} .rp-summary .cf-counters{margin-top:13px;} .rp-viz .side-sub{border-top:0; padding-top:2px;} /* внутри инфографики без разделителя */ .rp-upd{display:inline-flex; align-items:center; gap:6px; font-size:.7rem; color:var(--text-3); font-family:var(--font-mono);} .rp-upd .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto;} /* инфографика: стек-бар долей по сетям | интерактивные бары топ-токенов */ .rp-viz{display:grid; grid-template-columns:1fr 1fr; gap:2px 30px; padding-top:2px;} .rp-vcol{min-width:0;} .rp-evt{margin-top:14px;} /* инфографика по типам событий — отступ от бара сетей */ /* стек-бар долей по сетям (единый премиум-объект «в один взгляд») */ .rp-stack{display:flex; height:14px; gap:1px; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); margin:2px 0 9px;} .rp-stack span{min-width:3px; transition:filter var(--dur-2) var(--ease-std);} .rp-stack span:hover{filter:brightness(1.25);} .rp-slegend{display:flex; flex-wrap:wrap; gap:5px 16px;} .rp-slegend .li{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-3);} .rp-slegend .cd{width:8px; height:8px; border-radius:50%; flex:0 0 auto;} .rp-slegend .li b{font-family:var(--font-mono); color:var(--text-2); font-weight:500;} .rp-slegend .li em{font-style:normal; font-family:var(--font-mono); color:var(--text-3);} /* бары топ-токенов — акцент ТОЛЬКО на ховере (c2), в покое — законченная нейтральная заливка */ .rp-bars{display:flex; flex-direction:column; gap:2px; padding:2px 0 4px;} .rp-bar{display:grid; grid-template-columns:20px 58px minmax(0,1fr) auto; align-items:center; gap:10px; height:28px; padding-inline:5px; border-radius:var(--radius-sm); text-decoration:none; color:var(--text-2); transition:background-color var(--dur-2) var(--ease-std);} a.rp-bar:hover{background:var(--accent-tint);} .rp-bar .ic{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 auto;} .rp-bar .ic .lg{width:20px; height:20px; border-radius:999px; overflow:hidden;} .rp-bar .ic .lg img{width:100%; height:100%; object-fit:cover; display:block;} .rp-bar .lb{font-size:.8rem; font-weight:600; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color var(--dur-2) var(--ease-std);} a.rp-bar:hover .lb{color:var(--accent);} .rp-bar .track{height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden;} .rp-bar .fill{display:block; height:100%; border-radius:999px; background:color-mix(in srgb, var(--accent) 60%, var(--surface-3)); transition:background-color var(--dur-2) var(--ease-std);} a.rp-bar:hover .fill{background:var(--accent);} .rp-bar .val{font-family:var(--font-mono); font-size:.74rem; white-space:nowrap; color:var(--text-2); display:flex; align-items:center; justify-content:flex-end; gap:7px;} .rp-bar .val b{color:var(--text-1); font-weight:600;} .rp-bar .val i{font-style:normal; color:var(--text-3); font-size:.66rem; min-width:16px; text-align:right;} .rp-bar .arw{display:inline-flex; align-items:center; width:13px; opacity:0; color:var(--accent); transition:opacity var(--dur-2) var(--ease-std);} .rp-bar .arw svg{width:13px; height:13px;} a.rp-bar:hover .arw{opacity:1;} /* ЛЕДЖЕР → ДАЙДЖЕСТ ПО РАЗДЕЛАМ (группировка по типу сигнала). Крона над ним статична. */ .rp-cat{flex:0 0 auto; display:flex; flex-direction:column;} .rp-gloss{display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px var(--w3-pad) 11px; margin-top:10px; border-bottom:1px solid var(--border);} .rp-gloss .gi{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-3); line-height:1.3;} .rp-gloss .gi b{color:var(--text-2); font-weight:600;} .rp-gloss .gi .cd{width:8px; height:8px; border-radius:50%; flex:0 0 auto;} .rp-gloss .gi .gw{font-style:normal; color:var(--text-2); font-family:var(--font-mono); flex:0 0 auto;} /* раздел = тип сигнала; заголовок раздела липкий при скролле */ .dg-sect{border-top:1px solid var(--border);} .dg-sect:first-child{border-top:0;} .dg-sect-h{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:9px; padding:9px var(--w3-pad); background:var(--surface-1); border-bottom:1px solid var(--border);} .dg-sect-h .sd{width:9px; height:9px; border-radius:50%; flex:0 0 auto;} .dg-sect-h b{font-size:.82rem; font-weight:600; color:var(--text-1);} .dg-sect-h .cnt{margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--text-3);} .dg-sect-h .cnt b{color:var(--text-2); font-weight:600;} /* строка токена: единый грид (нет рваных дыр) */ .DGRID{display:grid; grid-template-columns:24px minmax(110px,1.3fr) 96px 54px minmax(140px,1fr) 46px 20px; align-items:center; column-gap:10px;} .dg-row{height:42px; padding:0 var(--w3-pad); border-bottom:1px solid var(--border); color:var(--text-2); position:relative; transition:background-color var(--dur-2) var(--ease-std);} .dg-row.is-multi{cursor:pointer;} .dg-row.is-multi:hover{background:var(--fill-hover);} .dg-row.open{background:var(--surface-2);} .dg-row.open::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent);} .c-sel{display:inline-flex; align-items:center;} .dg-row .c-tok{display:flex; align-items:center; gap:8px; min-width:0;} .c-tok .lg{width:20px; height:20px; border-radius:999px; overflow:hidden; flex:0 0 auto;} .c-tok .lg img{width:100%; height:100%; object-fit:cover; display:block;} .c-tok .sy{font-family:var(--font-mono); font-weight:600; color:var(--text-1); font-size:.82rem; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .c-tok .sy:hover{color:var(--accent);} .c-ch{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.64rem; color:var(--text-3); flex:0 0 auto;} .c-ch .cd{width:7px; height:7px; border-radius:50%; flex:0 0 auto;} .c-vol{text-align:right; font-family:var(--font-mono); font-size:.82rem; color:var(--text-1); white-space:nowrap;} .c-cnt{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.78rem; color:var(--text-2);} .c-cnt .cd{width:8px; height:8px; border-radius:50%; flex:0 0 auto;} .c-recv{display:flex; align-items:center; gap:8px; min-width:0;} .c-recv .ad{font-family:var(--font-mono); font-size:.76rem; color:var(--text-1); white-space:nowrap; cursor:pointer;} .c-recv .ad:hover{color:var(--accent);} .c-recv .ru{font-family:var(--font-mono); font-size:.66rem; color:var(--cat-withdrawal); white-space:nowrap;} .c-recv .plus{font-family:var(--font-mono); font-size:.64rem; color:var(--text-3); background:var(--surface-3); padding:1px 6px; border-radius:999px; flex:0 0 auto;} .c-act{display:flex; align-items:center; justify-content:flex-end; gap:4px;} .c-chev{display:inline-flex; align-items:center; justify-content:center; color:var(--text-disabled); transition:transform var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);} .c-chev svg{width:14px; height:14px;} .dg-row.open .c-chev{transform:rotate(90deg); color:var(--text-2);} /* аккордеон кошельков — реальные renderWallet-строки за цветной чейн-планкой */ .dg-exp{border-bottom:1px solid var(--border);} .dg-exp-in{padding:2px 12px 8px 16px; margin-left:22px; border-left:2px solid var(--border);} /* «Показать все N» + компактная строка токенов без детализации кошельков */ .dg-more{display:block; width:100%; text-align:center; font-size:.72rem; color:var(--text-3); background:transparent; border:0; border-bottom:1px solid var(--border); padding:7px; cursor:pointer; transition:color var(--dur-2) var(--ease-std);} .dg-more:hover{color:var(--accent);} .dg-chips{display:flex; align-items:center; flex-wrap:wrap; gap:5px 6px; padding:8px var(--w3-pad); border-bottom:1px solid var(--border); font-size:.72rem; color:var(--text-3);} .dg-chips .tkc{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); padding:2px 7px; border-radius:var(--radius-sm); background:var(--surface-2);} /* чекбоксы (нативные, с акцентом) */ /* кастом-чекбокс сайта (как .ws-sel) — НЕ нативный белый accent-color (не в стиле тёмного терминала) */ .rp-ledger input[type=checkbox]{flex:0 0 auto; width:15px; height:15px; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none; position:relative; background:transparent; border:1.5px solid var(--border-strong); border-radius:4px; transition:background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .rp-ledger input[type=checkbox]:hover{border-color:var(--accent);} .rp-ledger input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent);} .rp-ledger input[type=checkbox]:checked::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; font-weight:700; color:var(--accent-ink);} .rp-ledger input[type=checkbox]:focus-visible{outline:none; box-shadow:0 0 0 2px var(--accent-tint);} /* иконки-кнопки строки */ .rp-icb{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; color:var(--text-3); background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .rp-icb:hover:not([disabled]){color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .rp-icb[disabled]{opacity:.4; cursor:not-allowed;} .rp-icb svg{width:14px; height:14px;} /* мини-меню формата выгрузки на стрелке карточки-события (.txt/.csv) — 2026-07-11 */ .rp-dl{position:relative; display:inline-flex;} .rp-dlpop{position:absolute; top:calc(100% + 4px); right:0; z-index:30; display:none; flex-direction:column; min-width:84px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); box-shadow:var(--elev-2); overflow:hidden;} .rp-dl.open .rp-dlpop{display:flex;} .rp-dlpop button{display:block; width:100%; text-align:left; padding:7px 12px; font-family:var(--font-mono); font-size:.74rem; color:var(--text-2); background:none; border:0; cursor:pointer; transition:background-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);} .rp-dlpop button:hover{background:var(--fill-hover); color:var(--text-1);} /* липкая панель выгрузки — прижата к низу скролл-вьюпорта */ .rp-tools{position:sticky; bottom:0; z-index:3; display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:10px var(--w3-pad); background:var(--surface-2); border-top:1px solid var(--border-strong);} .rp-tools .flts{display:flex; gap:6px; flex-wrap:wrap;} .rp-tools .dl{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto;} .rp-fchip{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-3); background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 9px; cursor:pointer; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .rp-fchip .cls-dot{width:8px; height:8px; border-radius:50%; background:var(--cc, var(--text-3)); flex:0 0 auto;} .rp-fchip .ct{font-family:var(--font-mono); color:var(--text-2);} .rp-fchip:hover{color:var(--text-1); border-color:var(--border-hover);} .rp-fchip.is-on{color:var(--text-1); border-color:var(--cc, var(--accent)); background:var(--accent-tint);} .rp-selsum{font-family:var(--font-mono); font-size:.72rem; color:var(--text-2); white-space:nowrap;} /* ═══ НОВОСТНОЙ ДАЙДЖЕСТ ПО СОБЫТИЯМ (лид + чипы-фильтр + карточки-события). Реюз .rp-cat/.rp-gloss/ .dg-sect/.dg-sect-h/.dg-more/.c-sel/.rp-icb/.rp-tools. Крона над ним статична. ═══ */ .rp-lead{padding:2px var(--w3-pad) 4px;} .rp-lead-eye{font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:600; margin-bottom:7px;} .rp-lead-l1{font-size:1.02rem; line-height:1.45; color:var(--text-1); font-weight:500; max-width:76ch; margin:0 0 11px; text-wrap:balance;} .rp-lead-l1 b{font-weight:650;} .rp-lead-l1 .mono{font-weight:600;} .rp-lead-bul{display:flex; flex-direction:column; gap:6px; max-width:80ch;} .rp-lead-bul .b{display:flex; gap:9px; align-items:flex-start; font-size:.82rem; color:var(--text-2); line-height:1.4;} .rp-lead-bul .b .mk{flex:0 0 auto; width:6px; height:6px; border-radius:2px; margin-top:6px;} .rp-lead-bul .b b{color:var(--text-1); font-weight:600;} .rp-chips{display:flex; flex-wrap:wrap; gap:7px; padding:12px var(--w3-pad) 8px;} .rp-chip{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-3); background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 11px; cursor:pointer; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .rp-chip .cd{width:8px; height:8px; border-radius:2px; flex:0 0 auto;} .rp-chip b{font-family:var(--font-mono); color:var(--text-2); font-weight:500;} .rp-chip:hover{color:var(--text-1); border-color:var(--border-hover);} .rp-chip.is-on{color:var(--text-1); border-color:transparent; background:var(--surface-3);} .dg-sect-h .dg-gl{display:inline-flex; color:var(--text-3);} .dg-sect-h .dg-gl svg{width:15px; height:15px;} .dg-sect-h .dg-new{font-size:.58rem; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); border:1px solid var(--accent); border-radius:var(--radius-xs); padding:0 4px; line-height:1.6;} .se-card{display:grid; grid-template-columns:22px 26px minmax(0,1fr) auto auto 18px; align-items:center; column-gap:11px; min-height:46px; padding:7px var(--w3-pad); border-bottom:1px solid var(--border); position:relative; cursor:pointer; transition:background-color var(--dur-2) var(--ease-std);} .se-card:hover{background:var(--fill-hover);} .se-card:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent);} .se-card.is-hero::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent);} .se-glyph{width:26px; height:26px; border-radius:var(--radius-sm); display:grid; place-items:center; flex:0 0 auto;} .se-glyph svg{width:15px; height:15px;} .se-main{min-width:0;} .se-h{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.84rem; line-height:1.35; color:var(--text-1);} .se-h .lg{width:17px; height:17px; border-radius:999px; overflow:hidden; flex:0 0 auto;} .se-h .lg img{width:100%; height:100%; object-fit:cover; display:block;} .se-h .sy{font-family:var(--font-mono); font-weight:600; color:var(--text-1); text-decoration:none;} .se-h .sy:hover{color:var(--accent);} .se-h .se-ch{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.64rem; color:var(--text-3); flex:0 0 auto;} .se-h .se-ch .cd{width:7px; height:7px; border-radius:50%; flex:0 0 auto;} .se-hl{min-width:0; color:var(--text-1);} .se-hl .hl{font-weight:500;} .se-hl .mono{color:var(--text-1); font-weight:600;} .se-deck{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:3px; font-size:.72rem; color:var(--text-3);} .se-deck .cls{display:inline-flex; align-items:center; gap:5px;} .se-deck .cls .cd{width:7px; height:7px; border-radius:2px;} .se-deck .ru{color:var(--cat-withdrawal);} .se-deck .sep{opacity:.45;} .se-usd{text-align:right; font-family:var(--font-mono); font-size:.86rem; font-weight:600; color:var(--text-1); white-space:nowrap;} .se-chev{display:inline-flex; align-items:center; justify-content:center; color:var(--text-disabled);} .se-chev svg{width:15px; height:15px;} .se-mini{flex-basis:100%; height:5px; max-width:220px; margin-top:6px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden;} .se-mini i{display:block; height:100%; border-radius:var(--radius-pill);} /* два БЛОКА-РАЗДЕЛА в ряд на широком мониторе (слева напр. крупные переводы, справа депозиты и т.д.) — 2026-07-11. multicol плотно пакует разделы без пустот; sticky-заголовок раздела не работает внутри multicol → static. */ @media (min-width:1280px){ .rp-ledger{column-count:2; column-gap:24px;} .rp-ledger > .dg-sect{-webkit-column-break-inside:avoid; break-inside:avoid;} .rp-ledger > .dg-sect:first-child{border-top:0;} .rp-ledger > .dg-sect > .dg-sect-h{position:static;} } /* деградация (узкий экран ≤1180px): страница скроллится сама → распускаем внутренние скроллы/липкость */ @media (max-width:1180px){ .rp-viz{grid-template-columns:1fr;} } /* универсальный внутренний скролл панели */ .v4-scroll{min-height:0; overflow-y:auto; overscroll-behavior:contain;} /* шапка панели с фильтрами — перенос, чтобы дропдауны не переполняли узкую колонку */ .w3-ph.wrap{flex-wrap:wrap; row-gap:6px; padding-block:7px;} .w3-ph.wrap .right{flex-wrap:wrap; justify-content:flex-end; gap:8px;} /* панель как flex-колонка с шапкой и скролл-телом */ .v4-panel{display:flex; flex-direction:column; min-height:0;} .v4-panel > .w3-ph{flex:0 0 auto;} .v4-panel > .v4-scroll{flex:1;} /* ---------- вид: РЫНОК (одна лента-переключатель + 2 инфографики, в экран) ---------- */ .v4-market{display:grid; height:100%; gap:12px; grid-template-columns:minmax(0,1.7fr) minmax(0,1.15fr) minmax(0,0.95fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr) var(--mkt-bottom-h, 212px); grid-template-areas: "feed emi side" "feed emi side" "feed movers side";} /* правая колонка = ОДНА панель на ВСЮ высоту с верхними вкладками (Топ | Секторы | Структура): выбранная вью получает место целиком — конец «раздавленным» Секторам/Структуре. */ .v4-market .a-side{grid-area:side; display:flex; flex-direction:column; min-height:0;} .v4-market .a-side .a-side-body{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;} /* шапка вкладки «Активные токены | Потоки CEX»: переключатель вкладок занимает ВЕСЬ первый ряд; контролы вью (Час/День — «Активные токены»; Период/Направление/Класс — «Потоки CEX») лежат ВТОРЫМ рядом во ВСЮ ширину панели, выровнены ВЛЕВО и переносятся (flex-wrap). Узкий рейл (~283px) не вмещает их в одну строку — поэтому никакого right-align и обрезки: всё помещается. */ .v4-market .a-side > .w3-ph{align-items:center; row-gap:7px;} .v4-market .a-side > .w3-ph > .v4-sort{flex:1 1 100%;} /* табы — весь первый ряд */ .v4-market .a-side > .w3-ph > .right{flex:1 1 100%; min-width:0; margin-left:0; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:6px;} .v4-market .a-side > .w3-ph > .right:empty{display:none;} /* рейл прижат к ПРАВОМУ краю экрана → дефолтный right:0 уводил попап дропдауна за левый край (это и был «кривой Период»). Открываем попапы рейла ВЛЕВО-от-кнопки и держим в пределах панели. */ .v4-market .a-side .v4-dd-pop{left:0; right:auto; min-width:150px; max-width:250px;} /* под-заголовок секции внутри объединённой вкладки «Секторы» (блок «Структура» ниже секторов) */ .v4-market .side-sub{display:flex; align-items:center; gap:8px; padding:12px var(--w3-pad) 5px; margin-top:6px; border-top:1px solid var(--border); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:var(--track-caps-sm); color:var(--text-2);} .v4-market .side-sub .n{font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-3); font-size:.6875rem;} .v4-market .side-sub .right{margin-left:auto; text-transform:none; letter-spacing:0;} .v4-market .a-movers{grid-area:movers;} /* .v4-kpis удалён 2026-06-21: верхняя статичная KPI-панель убрана над дашбордом. */ .v4-market .a-feed{grid-area:feed;} /* лента: все контролы (табы + Сети/Типы/Объём + сортировка + Пресеты) лежат в одном .right, который раньше не сжимался (shrink:0) → перерастал колонку и обрезался .a-feed{overflow:hidden} (Пресеты уходили за край). Даём .right сжиматься и переносить контролы → ничего не вылезает. */ .v4-market .a-feed > .w3-ph{flex-wrap:wrap;} .v4-market .a-feed > .w3-ph > .right{flex:1 1 auto; min-width:0; flex-wrap:wrap; justify-content:flex-start; gap:6px 8px;} /* попапы дропдаунов ленты открываются ВПРАВО (внутрь широкой ~506px панели): дефолтный right:0 уводил попап ВЛЕВО за левый край панели, а .a-feed{overflow:hidden} его обрезал («Пресеты»). */ .v4-market .a-feed .v4-dd-pop{left:0; right:auto;} /* лента: шапка в ДВА ряда — переключатели сверху, фильтры снизу (без подписи «Лента») */ .v4-market .a-feed > .w3-ph.a-feed-hd{flex-direction:column; align-items:stretch; flex-wrap:nowrap; row-gap:8px;} .a-feed-hd .afh-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; min-width:0;} .a-feed-hd .afh-sp{flex:1 1 auto;} .v4-market .a-emi{grid-area:emi;} /* узкая средняя колонка (~413px): заголовок + сегмент ≥30/≥50/≥70 + кнопка «развернуть» не влезали в одну строку (panel overflow:hidden съедал иконку у правой границы). Прячем уже схлопнутый до 0 «% от total supply», убираем лишний margin у кнопки и разрешаем перенос как страховку — иконка всегда сохраняет правый отступ либо переносится, но не обрезается. */ .v4-market .a-emi > .w3-ph{flex-wrap:nowrap; gap:8px; align-items:center;} .v4-market .a-emi > .w3-ph .t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .v4-market .a-emi > .w3-ph .n{display:none;} .v4-market .a-emi > .w3-ph .right{flex:0 0 auto; margin-left:auto; align-items:center; gap:6px;} .v4-market .a-emi > .w3-ph .right .v4-sort button{height:22px; padding:0 8px; font-size:.6875rem;} .v4-market .a-emi > .w3-ph .right .v4-expand{margin-left:0;} /* контейнер инфографики, заполняющий панель (treemap позиционируется в %) */ .v4-fill{flex:1; min-height:0; position:relative; overflow:hidden;} .v4-market .treemap{aspect-ratio:auto; height:100%; background:transparent; position:relative;} /* «Эмиссия у команды» — КВАДРАНТ (X=% у команды, Y=капитализация log, размер ∝ $ команды) */ .emi-scatter{width:100%; height:100%; display:block;} .emi-grid{stroke:var(--border); stroke-width:1; vector-effect:non-scaling-stroke;} .emi-grid.v{stroke-opacity:.55;} /* compact (тайл) — крупнее, т.к. точек мало (топ-18-20). .full ниже ужимает для большого холста. */ .emi-axt{fill:var(--text-disabled); font-size:10px; font-family:var(--font-mono);} .emi-cap{fill:var(--text-3); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;} .emi-danger{fill:color-mix(in srgb, var(--thr-high) 9%, transparent);} .emi-dot{stroke:var(--surface-1); stroke-width:.8; fill-opacity:.78; cursor:pointer; transition:fill-opacity var(--dur-2) var(--ease-std), stroke var(--dur-2) var(--ease-std);} .emi-dot.lo{fill:var(--thr-low);} .emi-dot.mid{fill:var(--thr-mid);} .emi-dot.hi{fill:var(--thr-high);} .emi-dot:hover{fill-opacity:1; stroke:var(--text-1); stroke-width:1.4;} .emi-lab{fill:var(--text-2); font-size:11px; font-family:var(--font-mono); pointer-events:none; paint-order:stroke; stroke:var(--surface-1); stroke-width:2.5px; stroke-linejoin:round;} /* модальный режим: холст 820×500 рендерится крупным на экране → меньшие viewBox-шрифты дают читаемый результат + меньше визуального шума на полной популяции. */ .emi-scatter.full .emi-axt{font-size:9px;} .emi-scatter.full .emi-cap{font-size:9.5px;} .emi-scatter.full .emi-lab{font-size:8.5px; stroke-width:2px;} .emi-legend{position:absolute; top:6px; right:8px; display:flex; gap:9px; font-size:.5625rem; color:var(--text-3); pointer-events:none; font-family:var(--font-mono);} .emi-legend span{display:inline-flex; align-items:center; gap:3px;} .emi-legend span::before{content:""; width:7px; height:7px; border-radius:999px;} .emi-legend .lo::before{background:var(--thr-low);} .emi-legend .mid::before{background:var(--thr-mid);} .emi-legend .hi::before{background:var(--thr-high);} /* секторы — компактно: тонкая строка, чип-счётчик, аккуратный бар, $ справа */ .v4-market .sec-cap{font-size:.625rem; color:var(--text-3); padding:6px var(--w3-pad) 2px;} .v4-market .sec-list{display:block; padding:4px 0;} .v4-market .sec-row{grid-template-columns:minmax(0,1fr) auto minmax(54px,84px) 4.5rem; gap:10px; height:32px; padding:0 var(--w3-pad);} .v4-market .sec-row .sec-n{font-size:.8125rem;} .v4-market .sec-row .sec-cnt{font-size:.625rem; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:1px 7px; text-align:center;} .v4-market .sec-row .sec-bar{height:5px;} .v4-market .sec-row .sec-pct{font-size:.75rem;} /* грип вертикального ресайза нижней полосы (Динамика/Структура) — в шапке панели */ .v4-rsz{flex:0 0 auto; height:8px; margin-top:-1px; cursor:row-resize; display:flex; align-items:center; justify-content:center; touch-action:none;} .v4-rsz .grip{width:40px; height:3px; border-radius:2px; background:var(--border-strong); transition:background-color var(--dur-2) var(--ease-std), width var(--dur-2) var(--ease-std);} .v4-rsz:hover .grip{background:var(--accent); width:56px;} /* пагинатор токен-ленты (сверху, в шапке .ws-feed) */ .v4-pager{display:inline-flex; align-items:center; gap:4px;} .v4-pager:empty{display:none;} /* футер-пейджер главной ленты «События» (под списком, отделён линией). Пуст (:empty) → скрыт. */ .v4-feed-foot{flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:7px 10px; border-top:1px solid var(--border);} .v4-feed-foot:empty{display:none;} .v4-pg{width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-2); cursor:pointer;} .v4-pg:hover:not(:disabled){color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .v4-pg:disabled{opacity:.4; cursor:default;} .v4-pg svg{width:14px; height:14px;} .v4-pager .pg-i{font-size:.75rem; color:var(--text-3); font-variant-numeric:tabular-nums; min-width:46px; text-align:center;} /* числовой ввод номера страницы (переход без листания) — компактный инпут внутри .pg-i */ .pg-inp{width:30px; height:20px; text-align:center; padding:0 2px; margin:0; font-family:var(--font-mono); font-size:.75rem; font-variant-numeric:tabular-nums; color:var(--text-1); background:var(--surface-2); border:1px solid var(--border); border-radius:4px; -moz-appearance:textfield;} .pg-inp::-webkit-outer-spin-button,.pg-inp::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;} .pg-inp:focus,.pg-inp:focus-visible{outline:none; border-color:var(--accent); background:var(--surface-3);} /* динамика — компактные ГОРИЗОНТАЛЬНЫЕ ряды (вкладки Рост|Падение в шапке) */ .v4-movers{padding:6px var(--w3-pad) 8px;} .v4-movers .mvr-list{display:flex; flex-direction:column; gap:2px;} /* ВАЖНО: тикер-колонка ФИКСИРОВАНА (68px), НЕ minmax(...,auto). Каждая строка — свой grid; с `auto` колонка тикера = ширине ИМЕННО ЭТОЙ строки → бары стартуют с РАЗНОГО X (рассинхрон, правили ≥10 раз). Фикс-ширина + ellipsis у .sym → у всех строк одинаковый шаблон → бары ровные. */ .v4-movers .mvr{display:grid; grid-template-columns:18px 68px minmax(0,1fr) 3rem; align-items:center; gap:9px; height:26px; padding-inline:4px; border-radius:var(--radius-sm); color:var(--text-2); cursor:pointer; transition:background-color var(--dur-2) var(--ease-std);} .v4-movers .mvr:hover{background:var(--fill-hover);} .v4-movers .mvr .lg{width:18px; height:18px; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; font-weight:600; color:var(--text-2); flex:0 0 auto;} .v4-movers .mvr .lg img{width:100%; height:100%; object-fit:cover;} .v4-movers .mvr .sym{font-size:.75rem; font-weight:600; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .v4-movers .mvr .track{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden;} .v4-movers .mvr .fill{display:block; height:100%; border-radius:3px; transition:filter var(--dur-2) var(--ease-std);} .v4-movers .mvr.up .fill{background:var(--up-fill);} .v4-movers .mvr.down .fill{background:var(--down-fill);} .v4-movers .mvr:hover .fill{filter:brightness(1.14);} .v4-movers .mvr .pct{font-family:var(--font-mono); font-size:.75rem; text-align:right;} .v4-movers .mvr.up .pct{color:var(--up);} .v4-movers .mvr.down .pct{color:var(--down);} /* «Структура» — горизонтальные бары (Сети | Типы), компактно */ .struct-wrap{padding:6px var(--w3-pad) 8px;} .struct-list{display:flex; flex-direction:column; gap:3px;} .struct-row{display:grid; grid-template-columns:minmax(58px,34%) minmax(0,1fr) auto; align-items:center; gap:10px; height:26px;} .struct-row .sn{display:inline-flex; align-items:center; gap:7px; font-size:.75rem; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .struct-row .sn .dotc{width:8px; height:8px; border-radius:999px; flex:0 0 auto;} .struct-row .track{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden;} .struct-row .fill{display:block; height:100%; border-radius:3px; opacity:.85;} .struct-row .sv{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-2); text-align:right; white-space:nowrap;} /* ===== «Биржи / Потоки CEX» виджет (правый рейл «Рынка», вкладка sideTab='cex') ===== Дивергентный бар: отток влево (красный) / приток вправо (зелёный) от центральной оси; ярче (белый оверлей) у центра = доля фреш-кошельков. Заполняет высоту рейла через #side-body flex:1 (механизм «без пустот»); строки фикс-высоты → плотно на любом мониторе. */ .cf-legend{display:flex; flex-wrap:wrap; gap:10px; padding:8px var(--w3-pad) 6px; border-bottom:1px solid var(--border);} .cf-lg{display:inline-flex; align-items:center; gap:5px; font-size:.6875rem; color:var(--text-3); white-space:nowrap;} .cf-lg .d{width:9px; height:9px; border-radius:2px; flex:0 0 auto;} .cf-lg .d.in{background:var(--up-fill);} .cf-lg .d.out{background:var(--down-fill);} /* fresh swatch echoes the bar: fill colour brightening toward a light inner zone */ .cf-lg .d.fr{width:16px; background:linear-gradient(90deg, var(--up-fill) 30%, rgba(255,255,255,.82));} /* counters-anchor сверху: Приток / Отток / Нетто / N бирж — даёт панели «голову», убирает осиротевший футер над пустотой (Dune model). Тянутся в равные колонки по ширине рейла. */ .cf-counters{display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:1px; background:var(--border); border-block:1px solid var(--border); margin-bottom:2px;} .cf-counters .cf-ct{background:var(--surface-1); padding:9px 12px; display:flex; flex-direction:column; gap:3px;} .cf-counters .cf-ct .v{font-family:var(--font-display, var(--font-mono)); font-size:1.05rem; line-height:1; color:var(--text-1); font-weight:600;} .cf-counters .cf-ct .v.up{color:var(--up);} .cf-counters .cf-ct .v.down{color:var(--down);} .cf-counters .cf-ct .k{font-size:.625rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em;} .cf-list{display:flex; flex-direction:column; gap:2px; padding:6px var(--w3-pad) 4px;} .cf-row,.cf-tok{display:grid; grid-template-columns:minmax(70px,30%) minmax(0,1fr) auto; align-items:center; gap:9px; height:32px; border-radius:var(--radius-sm); text-decoration:none;} .cf-row.is-exp{cursor:pointer;} .cf-row.is-exp:hover,.cf-tok:hover{background:var(--fill-hover);} .cf-tok{height:28px; padding-left:6px; opacity:.92;} .cf-name{display:inline-flex; align-items:center; gap:5px; font-size:.8125rem; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cf-tok .cf-name{font-size:.75rem; color:var(--text-2);} .cf-name .cf-ch{font-family:var(--font-mono); font-size:.625rem; color:var(--text-3); font-style:normal;} .cf-name .cf-tm{font-family:var(--font-mono); font-size:.625rem; color:var(--text-disabled); font-style:normal;} /* тикер обрезается «…», мета-теги фиксированы — иначе длинный токен налезал/резался в узкой колонке */ .cf-name .lb{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cf-name .cf-ch,.cf-name .cf-tm{flex:0 0 auto;} /* кликабельная TX в строке токена «Бирж»: 4-я узкая колонка + иконка-обозреватель/панель */ .cf-tok.has-tx{grid-template-columns:minmax(70px,30%) minmax(0,1fr) auto 16px;} .cf-tok .ec-tx{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; color:var(--text-3); opacity:.5; border-radius:var(--radius-sm);} .cf-tok .ec-tx svg{width:11px; height:11px;} .cf-tok:hover .ec-tx{opacity:1;} .cf-tok .ec-tx:hover{color:var(--text-1); background:var(--fill-active);} .cf-chev{width:12px; height:12px; color:var(--text-disabled); flex:0 0 auto; transition:transform .12s ease;} .cf-chev svg{width:12px; height:12px;} .cf-row.open .cf-chev{transform:rotate(90deg); color:var(--text-3);} .cf-chev-sp{width:12px; flex:0 0 auto;} .cf-bar{position:relative; display:flex; align-items:center; height:16px; min-width:44px;} .cf-half{width:50%; height:14px; display:flex; position:relative; overflow:hidden;} .cf-tok .cf-bar{height:12px;} .cf-tok .cf-half{height:10px;} /* токен-дети чуть мельче родителя (master-detail) */ .cf-half.out{justify-content:flex-end;} /* приток-филл растёт ВЛЕВО от центра */ .cf-half.in{justify-content:flex-start;} /* отток-филл растёт ВПРАВО от центра */ .cf-half .fill{position:relative; height:100%; border-radius:2px; min-width:0;} .cf-half.out .fill{background:var(--down-fill);} .cf-half.in .fill{background:var(--up-fill);} .cf-half .fill .fr{position:absolute; top:0; height:100%; background:rgba(255,255,255,.5);} /* фреш — ярче, у центра */ .cf-half.in .fill .fr{left:0; border-radius:2px 0 0 2px;} .cf-half.out .fill .fr{right:0; border-radius:0 2px 2px 0;} .cf-axis{position:absolute; left:50%; top:-1px; bottom:-1px; width:1px; background:var(--border-strong); transform:translateX(-.5px);} .cf-val{font-family:var(--font-mono); font-size:.6875rem; text-align:right; white-space:nowrap;} .cf-val.up{color:var(--up);} .cf-val.down{color:var(--down);} .cf-totals{padding:8px var(--w3-pad) 10px; border-top:1px solid var(--border); font-size:.6875rem; color:var(--text-3);} .cf-totals b.up{color:var(--up);} .cf-totals b.down{color:var(--down);} /* чарт в воркспейсе: его собственные текст-строки (цена/события/ohlc/легенда/примечание) были ПРИБИТЫ к левому краю панели и не совпадали с отступом тулбара «График|Кластеры» сверху — выравниваем по паддингу панели (холст-канвас остаётся во всю ширину) */ .v4-ws .chart-host > .tc-head, .v4-ws .chart-host > .tc-toolbar, .v4-ws .chart-host > .tc-readout, .v4-ws .chart-host > .tc-cmp-legend, .v4-ws .chart-host > .tc-mk-note{ padding-inline:var(--w3-pad); } /* the vertical draw-toolbar (.tc-draw, left:8px, ~40px wide) can overflow a short plot's bottom edge and sit over the markers caption — indent the caption clear of the tool column so its text never collides with the toolbar (esp. the bottom «очистить» button). */ .v4-ws .chart-host > .tc-mk-note{ padding-left:calc(var(--w3-pad) + 44px); } .v4-ws .chart-host > .tc-head{ padding-top:6px; } /* КОМПАКТНАЯ шапка графика (user 2026-06-15: «зажат, шапка много места»): убираем 2-строчную сноску-пояснение (типы событий и так в чипах-фильтрах), поджимаем межстрочные отступы и убираем нижний margin тулбара — график получает ~3 строки высоты. OHLC теперь плавающий оверлей (см. components.css), отдельной строки не занимает. */ .v4-ws .chart-host > .tc-mk-note{ display:none; } .v4-ws .chart-host > .tc-head{ margin-bottom:4px; } .v4-ws .chart-host > .tc-toolbar{ margin-bottom:4px; } /* подпись провайдера цены + сегмент-селектор источника свечей (token-chart.js: .tc-prov-cap / .tc-prov-lnk / .tc-srcseg / .tc-srcb). Подпись наследует приглушённый вид .tc-prov; ссылка — ненавязчивая (тот же цвет, подчёркивание/→--text-1 на hover, без «синей» браузерной ссылки); кнопки источника — как сегмент-тумблеры ТФ/шкалы (.tc-tf/.tc-sbtn). */ .tc-prov-cap{display:inline; vertical-align:middle;} .tc-prov-lnk{color:inherit; text-decoration:none; cursor:pointer; transition:color var(--dur-2) var(--ease-std), text-decoration-color var(--dur-2) var(--ease-std);} .tc-prov-lnk:hover{color:var(--text-1); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;} .tc-prov-lnk:hover .tc-src,.tc-prov-lnk:hover .mono{color:var(--text-1);} .tc-srcseg{display:inline-flex; align-items:center; gap:3px; margin-inline-start:8px; vertical-align:middle;} .tc-srcb{display:inline-flex; align-items:center; height:22px; padding:0 8px; font-size:.625rem; font-weight:500; color:var(--text-3); background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; text-transform:none; letter-spacing:0; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), opacity var(--dur-2) var(--ease-std);} .tc-srcb:hover{color:var(--text-1); border-color:var(--border-hover);} .tc-srcb:active{transform:scale(.97);} .tc-srcb.is-active{color:var(--accent); border-color:var(--accent); background:var(--accent-tint);} /* загрузка свечей с выбранной биржи — приглушаем сегмент, мягкая пульсация */ .tc-srcseg.is-loading{opacity:.55; cursor:progress; animation:tc-srcseg-pulse 1s var(--ease-std) infinite;} .tc-srcseg.is-loading .tc-srcb{pointer-events:none;} @keyframes tc-srcseg-pulse{50%{opacity:.3;}} /* на бирже нет свечей — короткая красноватая вспышка рамки активной кнопки */ .tc-srcseg.is-empty .tc-srcb.is-active{border-color:var(--down); color:var(--down);} @media (prefers-reduced-motion:reduce){ .tc-srcseg.is-loading{animation:none;} } /* нижний бар окна события: TX в обозреватель + основная CTA (фикс, не «прибито» к скроллу) */ .v4-dfoot{flex:0 0 auto; display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--border); background:var(--surface-1);} .v4-dbtn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; border-radius:var(--radius-sm); font-size:.8125rem; font-weight:500; white-space:nowrap; border:1px solid var(--border); color:var(--text-2); background:var(--surface-2); transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .v4-dbtn:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .v4-dbtn.pri{background:var(--accent); color:var(--accent-ink); border-color:transparent;} .v4-dbtn.pri:hover{filter:brightness(1.06); color:var(--accent-ink); background:var(--accent);} .v4-dbtn svg{width:14px; height:14px;} /* на узком (мобильном) дровере три кнопки не влезают в один ряд → перенос вместо обрезки */ @media (max-width:420px){ .v4-dfoot{flex-wrap:wrap;} .v4-dbtn{flex:1 1 140px; min-width:0;} } /* окно деталей события (drawer справа) */ .v4-drawer{position:fixed; inset:0; z-index:80;} .v4-drawer[hidden]{display:none;} .v4-drawer-bd{position:absolute; inset:0; background:rgba(0,0,0,.5); animation:v4bd .2s ease;} @keyframes v4bd{from{opacity:0} to{opacity:1}} .v4-drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(440px,94vw); background:var(--surface-1); border-left:1px solid var(--border-strong); box-shadow:var(--elev-2); display:flex; flex-direction:column; min-height:0; animation:v4dr .24s var(--ease-out);} @keyframes v4dr{from{transform:translateX(100%)} to{transform:none}} .v4-dh{flex:0 0 auto; display:flex; align-items:center; gap:10px; height:52px; padding-inline:16px; border-bottom:1px solid var(--border);} .v4-dh .t2-ico{margin-left:auto;} .v4-db{flex:1; min-height:0; overflow-y:auto; padding:16px;} .v4-db h2{font-size:1.0625rem; margin:0 0 2px; outline:none;} .v4-db h2:focus,.v4-db h2:focus-visible{box-shadow:none;} .v4-db .sub{font-size:.75rem; color:var(--text-3); margin-bottom:12px;} .v4-fig{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; margin-block:12px;} .v4-fig svg{width:100%; height:auto;} .v4-dstats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-block:12px;} .v4-dstats > div{padding:10px 11px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);} .v4-dstats .v{font-family:var(--font-mono); font-size:1rem; color:var(--text-1);} .v4-dstats .l{font-size:.625rem; letter-spacing:var(--track-caps-sm); text-transform:uppercase; color:var(--text-3); margin-top:2px;} .v4-thesis{font-size:.875rem; line-height:1.55; color:var(--text-2); margin-block:12px;} .v4-dsec{margin-top:14px;} .v4-dsec .ttl{font-size:.6875rem; font-weight:500; letter-spacing:var(--track-caps-sm); text-transform:uppercase; color:var(--text-3); margin-bottom:8px; display:flex; gap:8px;} .v4-dsec .ttl .n{margin-left:auto; font-family:var(--font-mono); color:var(--text-3);} .v4-drow{display:flex; align-items:center; gap:9px; height:36px; padding-inline:2px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.8125rem; color:var(--text-2);} .v4-drow .tm{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3);} .v4-drow .usd{margin-left:auto; font-family:var(--font-mono); color:var(--text-1);} .v4-drow:hover{background:var(--fill-hover);} /* профиль кошелька (drawer): портфель */ .wl-idrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .wl-copy{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); font-size:.75rem; cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, background .15s;} .wl-copy:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .wl-copy.ok{color:var(--accent); border-color:var(--accent);} .wl-copy svg{width:13px; height:13px;} .wl-full{margin-top:9px; font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); word-break:break-all; cursor:pointer; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-1); transition:border-color .15s, color .15s;} .wl-full:hover{border-color:var(--border-hover); color:var(--text-2);} .wl-empty{padding:18px 4px; font-size:.8125rem; color:var(--text-3);} .wl-poslist{display:flex; flex-direction:column;} .wl-pos{display:flex; align-items:center; gap:10px; height:38px; padding-inline:9px; border-radius:var(--radius-sm); border-bottom:1px solid rgba(255,255,255,.05); font-size:.8125rem;} .wl-pos .sy{font-weight:500; color:var(--text-1); display:flex; align-items:center; gap:8px;} .wl-pos .sy .lg{width:18px; height:18px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-3); font-size:.5rem; color:var(--text-3); line-height:1;} .wl-pos .sy .lg img{width:100%; height:100%; object-fit:cover; display:block;} .wl-pos .am{margin-left:auto; font-family:var(--font-mono); color:var(--text-3); font-size:.75rem;} .wl-pos .usd{font-family:var(--font-mono); color:var(--text-1); min-width:64px; text-align:right;} .wl-pos .muted{color:var(--text-3); font-weight:400; font-size:.6875rem;} .wl-pos.is-target{background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);} .wl-pos .tg{font-size:.5625rem; letter-spacing:var(--track-caps-sm); text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:2px 5px; border-radius:999px;} .wl-native{opacity:.92;} @media (max-width:1180px){ body.v4{overflow:auto; height:auto;} /* деградация: столбик с общим скроллом */ .v4-market{display:flex; flex-direction:column; height:auto;} .v4-market .v4-scroll{max-height:420px;} .v4-market .a-emi .v4-fill{height:300px;} .v4-market .a-movers{height:210px;} } /* НЕВЫСОКИЕ экраны (ноутбук 15.6": широкие, но низкие) — фикс-вьюпорт остаётся, но всё КОМПАКТНЕЕ (меньше шрифты + плотнее строки), как у Nansen: на ноутбуке аккуратно влезает, на большом мониторе (height > 920) — просторнее и БОЛЬШЕ контента (та же вёрстка, без изменений). Правая колонка теперь flex-стек (Топ-3 авто-высота + Секторы со скроллом), так что «срез наполовину» уже структурно невозможен. */ @media (min-width:1181px) and (max-height:920px){ /* шапки панелей ниже + мельче (user: «шрифт мог быть и поменьше») */ .w3-ph{min-height:42px;} .w3-ph .t{font-size:.875rem;} .w3-ph .n{font-size:.75rem;} .v4-sort button{height:25px; padding:0 9px;} .v4-market{grid-template-rows:minmax(0,1fr) minmax(0,1fr) var(--mkt-bottom-h, 182px);} /* лента компактнее */ .v4-market .w3-feedrow{height:42px; font-size:.8125rem;} .v4-market .w3-feedrow .usd{font-size:.875rem;} /* эмиссия-плитки: меньше шрифт/лого + плотнее паддинг → подписи не клипуются */ .v4-market .treemap .tm-tile{padding:6px 7px;} .v4-market .treemap .tm-sym{font-size:.6875rem;} .v4-market .treemap .tm-pct{font-size:.8125rem;} .v4-market .treemap .tm-tile.lg{padding:7px 8px;} .v4-market .treemap .tm-tile.lg .tm-pct{font-size:.9375rem;} .v4-market .treemap .tm-tile .tlogo, .v4-market .treemap .tm-tile .tlogo .mono-chip{width:18px; height:18px;} /* Топ-3: компактные строки (всё равно авто-высота, но плотнее = больше воздуха секторам) */ .v4-top3 .t3{padding:7px var(--w3-pad); gap:11px;} .v4-top3 .t3 .lg{width:26px; height:26px;} .v4-top3 .t3 .rk{font-size:1.0625rem; width:18px;} .v4-top3 .t3 .id .s{font-size:.875rem;} .v4-top3 .t3 .r .v{font-size:.8125rem;} .v4-allbtn{height:30px; margin:6px var(--w3-pad) 8px; font-size:.75rem;} /* секторы + структура + динамика компактнее */ .v4-market .sec-row{height:28px;} .v4-movers .mvr,.struct-row{height:24px;} .cf-row{height:23px;} .cf-tok{height:21px;} .cf-legend{padding-top:6px; padding-bottom:5px;} } /* БОЛЬШОЙ МОНИТОР (обещанная в комментарии симметричная ветка): на высоких экранах строки выше — ограниченные по данным блоки (Секторы/Структура/Кошельки) дышат и добивают рейл, а длинные списки (Топ/Кошельки) всё равно заполняют высоту и скроллят. */ @media (min-width:1181px) and (min-height:1040px){ .v4-market .sec-row{height:38px;} .v4-market .struct-row{height:30px;} .v4-market .mkw{min-height:52px;} .v4-market .v4-top3 .t3{padding-block:15px;} .v4-market .cf-row{height:28px;} } /* строки рынка — компактнее воркспейсных, но читаемые */ .v4-mini{display:flex; align-items:center; gap:11px; height:44px; padding-inline:var(--w3-pad); border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; font-size:.875rem;} .v4-mini:hover{background:var(--fill-hover);} .v4-mini .lg{width:22px; height:22px; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.5625rem; font-weight:600; flex:0 0 auto;} .v4-mini .lg img{width:100%; height:100%; object-fit:cover;} .v4-mini .sym{font-weight:600; color:var(--text-1); white-space:nowrap;} .v4-mini .meta{color:var(--text-3); font-size:.8125rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .v4-mini .usd{margin-left:auto; font-family:var(--font-mono); color:var(--text-1); white-space:nowrap;} .v4-mini .tm{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); width:30px; flex:0 0 auto;} /* ---------- дизайнерское окно «Топ-3 по активности» ---------- */ .v4-top3{display:flex; flex-direction:column;} .v4-top3 .t3{position:relative; display:flex; align-items:center; gap:13px; padding:13px var(--w3-pad); border-bottom:1px solid rgba(255,255,255,.05); color:var(--text-2); transition:background-color var(--dur-2) var(--ease-std);} .v4-top3 .t3:hover{background:var(--fill-hover);} .v4-top3 .t3 .rk{font-family:var(--font-display); font-size:1.375rem; font-weight:500; color:var(--text-3); width:22px; text-align:center; font-variant-numeric:tabular-nums; flex:0 0 auto;} .v4-top3 .t3.first{background:linear-gradient(90deg, var(--accent-tint), transparent 70%);} .v4-top3 .t3.first::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--accent); border-radius:2px;} .v4-top3 .t3.first .rk{color:var(--accent);} .v4-top3 .t3 .lg{width:34px; height:34px; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.6875rem; font-weight:600; color:var(--text-2); flex:0 0 auto;} .v4-top3 .t3 .lg img{width:100%; height:100%; object-fit:cover;} .v4-top3 .t3 .id{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; overflow:hidden;} .v4-top3 .t3 .id .s{font-weight:600; font-size:1rem; color:var(--text-1); line-height:1;} .v4-top3 .t3 .id .m{min-width:0; max-width:100%;} .v4-top3 .t3 .r{margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:3px; flex:0 0 auto; padding-left:10px;} .v4-top3 .t3 .r .v{font-family:var(--font-mono); font-size:.9375rem; color:var(--text-1);} .v4-top3 .t3 .r .c{font-size:.6875rem; color:var(--text-3);} .v4-allbtn{display:flex; align-items:center; justify-content:center; gap:8px; height:38px; margin:10px var(--w3-pad) 12px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-2); font-size:.8125rem; font-weight:500; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .v4-allbtn:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .v4-allbtn svg{width:14px; height:14px;} /* вкладка «Кошельки» (рейл «Рынка»): 2-строчная строка — адрес + ХОЛДИНГ ($) сверху, ПАТТЕРН (класс) · ТОКЕН снизу. Длинный список заполняет рейл любой высоты и скроллит; клик → дровер профиля. */ /* фильтр-бары рейла/ленты: «Биржи» (окно·направление·класс) и «Кошельки» (класс) */ .v4-market .cf-flt{display:flex; flex-wrap:wrap; gap:6px; padding:8px var(--w3-pad) 6px; border-bottom:1px solid var(--border);} .v4-market .mkw-flt{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px var(--w3-pad); border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface-1); z-index:2;} .v4-market .mkw-flt .n{margin-left:auto; font-size:.6875rem; color:var(--text-3); font-family:var(--font-mono);} .v4-market .mkw-list{display:flex; flex-direction:column; padding:2px 0;} .v4-market .mkw{display:grid; grid-template-columns:auto minmax(0,1fr) auto 14px; align-items:center; gap:10px; min-height:46px; padding:6px var(--w3-pad); border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background-color var(--dur-2) var(--ease-std);} .v4-market .mkw:hover{background:var(--fill-hover);} .v4-market .mkw:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;} .v4-market .mkw .hdot{width:9px; height:9px; border-radius:999px; flex:0 0 auto;} .v4-market .mkw-id{display:flex; flex-direction:column; gap:3px; min-width:0;} .v4-market .mkw-id .ad{font-family:var(--font-mono); font-size:.8125rem; color:var(--text-1); white-space:nowrap;} .v4-market .mkw-id .sub{font-size:.6875rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .v4-market .mkw-id .sub b{color:var(--text-2); font-weight:600; font-family:var(--font-mono);} .v4-market .mkw-r{display:flex; flex-direction:column; align-items:flex-end; gap:3px;} .v4-market .mkw-r .usd{font-family:var(--font-mono); font-size:.9375rem; color:var(--text-1); white-space:nowrap;} .v4-market .mkw-r .c{font-size:.625rem; color:var(--text-3);} .v4-market .mkw .chev{width:14px; height:14px; color:var(--text-disabled);} .v4-market .mkw .chev svg{width:14px; height:14px;} .v4-market .mkw:hover .chev{color:var(--text-3);} /* ---------- вид: ТОКЕНЫ (карточный каталог — старый стиль под v4) ---------- */ .v4-sort{display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px;} .v4-sort button{height:28px; padding:0 11px; border-radius:3px; font-size:.75rem; color:var(--text-3); white-space:nowrap; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .v4-sort button:hover{color:var(--text-1);} .v4-sort button.is-on{color:var(--text-1); background:var(--fill-selected);} /* выезжающий фильтр-список (Сети / Сигналы / Капитализация) */ .v4-dd{position:relative;} /* минимал-фильтр (стиль Arkham): значок-воронка + подпись, без коробки; акцент только в активном */ .v4-dd-btn{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 7px; border:1px solid transparent; border-radius:var(--radius-sm); background:none; color:var(--text-3); font-size:.75rem; white-space:nowrap; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .v4-dd-btn:hover{color:var(--text-1); background:var(--fill-hover);} .v4-dd.open .v4-dd-btn{color:var(--text-1); background:var(--fill-hover);} .v4-dd-btn.on{color:var(--accent); background:none;} .v4-dd-btn .fic{width:13px; height:13px; opacity:.75; display:inline-flex; flex:0 0 auto;} .v4-dd-btn .fic svg{width:13px; height:13px;} .v4-dd-btn.on .fic{opacity:1;} .v4-dd-btn[disabled]{opacity:.4; cursor:not-allowed;} .v4-dd-btn .cnt{font-family:var(--font-mono); font-size:.625rem; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:0 5px; min-width:15px; text-align:center; line-height:15px;} /* single-select value chip («7д») — subtler than the multi-select count badge */ .v4-dd-btn .cnt.val{background:var(--accent-tint); color:var(--accent); padding:0 6px; min-width:0;} .v4-dd-btn .chev{width:12px; height:12px; opacity:.65; display:inline-flex; transition:transform var(--dur-2) var(--ease-std);} .v4-dd-btn .chev svg{width:12px; height:12px;} .v4-dd.open .v4-dd-btn .chev{transform:rotate(180deg);} .v4-dd-pop{position:absolute; top:calc(100% + 6px); right:0; z-index:40; display:none; min-width:200px; max-height:300px; overflow:auto; padding:5px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-2);} .v4-dd.open .v4-dd-pop{display:block;} .v4-dd-opt{display:flex; align-items:center; gap:9px; width:100%; height:32px; padding:0 9px; border-radius:var(--radius-sm); font-size:.8125rem; color:var(--text-2); cursor:pointer; text-align:left;} .v4-dd-opt:hover{background:var(--fill-hover); color:var(--text-1);} .v4-dd-opt .ck{width:14px; height:14px; opacity:0; color:var(--accent); flex:0 0 auto;} .v4-dd-opt .ck svg{width:14px; height:14px;} .v4-dd-opt.on{color:var(--text-1);} .v4-dd-opt.on .ck{opacity:1;} .v4-dd-opt .sw{width:8px; height:8px; border-radius:999px; flex:0 0 auto;} .v4-dd-opt .lg{width:18px; height:18px; border-radius:999px; overflow:hidden; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-3); font-size:.5rem; font-weight:600; color:var(--text-3); line-height:1;} .v4-dd-opt .lg img{width:100%; height:100%; object-fit:cover; display:block;} /* Чёрные/тёмные лого сливаются с тёмным фоном (user 2026-06-15: «светлая подложка ТОЛЬКО в тёмной теме»). Светлый пад кладём ПОД КАРТИНКУ лого (.lg img / .tk-lg img / .tlogo-img): у лого с прозрачным фоном тёмные марки проявляются на светлом круге; у полностью непрозрачных лого object-fit:cover скрывает пад → вид не меняется. Контейнер (surface-3) и монограмм-fallback (.mono-chip / .vfb) НЕ трогаем, поэтому пустой чип/буквы остаются как были. Светлая тема — без изменений. */ html:not([data-theme="light"]) .lg img, html:not([data-theme="light"]) .v4-rail .tk-lg img, html:not([data-theme="light"]) .cxt-lg img, html:not([data-theme="light"]) .tlogo .tlogo-img{ background:#edeff2; } /* v2Logo monogram fallback (.vfb): был подключён ТОЛЬКО для .cxt-exlg → токены без лого (напр. dexscreener-открытые, как MMT) показывали ПУСТОЙ круг. Раскрываем монограмму при сбое картинки (.mono-fb ставит v2ImgFB) + центрируем. .ws-band .lg всегда центрирует (и голую моно-строку). */ .lg .vfb{display:none;} .lg.mono-fb{display:inline-flex; align-items:center; justify-content:center; line-height:1; font-family:var(--font-mono); font-weight:700; color:var(--text-2); font-size:.6rem; text-transform:uppercase;} .lg.mono-fb img{display:none;} .lg.mono-fb .vfb{display:block;} .ws-band .lg{display:inline-flex; align-items:center; justify-content:center; line-height:1; font-family:var(--font-mono); font-weight:700; color:var(--text-2); font-size:.82rem; text-transform:uppercase;} .v4-dd-opt .lb{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .v4-dd-opt .n{margin-left:auto; font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3);} .v4-dd-clear{width:100%; height:30px; margin-top:4px; border-top:1px solid var(--border); color:var(--text-3); font-size:.75rem; text-align:center;} .v4-dd-clear:hover{color:var(--text-1);} /* вид-токены = одиночная панель: ограничиваем её высотой вьюпорта, иначе .v4-scroll не получает границ и каталог не скроллится (карточки клипуются за рамку) */ #vw-tokens > .w3-panel{height:100%; min-height:0;} #vw-tokens .v4-scroll{padding:14px var(--w3-pad) 18px;} #vw-tokens .token-grid{align-content:start; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(264px,100%),1fr));} /* в фикс-вьюпорте spotlight-JS не подключён → glow держим скрытым (статичная карточка) */ #vw-tokens .token-card .spot-glow{display:none;} /* ---------- вид: ТОКЕН (воркспейс в экран) ---------- */ .v4-token{display:grid; height:100%; gap:12px; grid-template-rows:auto minmax(0,1fr);} .v4-token .ws-band{padding-block:4px; margin-bottom:0;} .v4-token .ws-band .w3-stat .v{font-size:1.5rem;} /* «тот же контракт» chip — ×1000/×1M memecoin-perp alias marker (1000TAG ≡ TAG): same token, other exchange ticker */ .ws-band .meta .tok-alias{color:var(--accent); font-family:var(--font-mono); font-size:.72rem; line-height:1.4; padding:0 6px; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:var(--radius-sm); cursor:help;} /* токен-воркспейс: ЛЕВАЯ колонка (график + полная лента событий) скроллится как одно целое, ПРАВАЯ панель скроллится независимо — обе в фикс-вьюпорте. */ .v4-ws{display:grid; min-height:0; gap:12px; grid-template-columns:minmax(0,1.85fr) minmax(340px,1fr); grid-template-rows:minmax(0,1fr);} /* депег-токен (chart-only): нет правой колонки «Кто двигает / Значимые кошельки» → одна колонка */ .v4-ws.no-side{grid-template-columns:minmax(0,1fr);} /* explicit placement + position reset — neutralises stale v3.css (.ws-chart/.ws-feed/.ws-side grid-area + position:sticky) that otherwise scrambles this grid (ws-main collapsed to 0). */ /* ЕДИНЫЙ СКРОЛЛ КОЛОНКИ + СПЛИТТЕР (user 2026-06-15, исправление): вся левая колонка .ws-main скроллится ОДНИМ баром (overflow-y:auto). Сплиттер #ws-drag задаёт ВЫСОТУ ГРАФИКА (--ws-chart-h); лента течёт ПОД графиком в естественной высоте и СВОЕГО скролла НЕ имеет — прокручивается вместе с графиком одним баром колонки. Тулбар графика вверху, plot гибко сжимается (min 140px) → инструменты не обрезаются. initWsResize() пишет --ws-chart-h, оставляя сплиттер досягаемым. */ .v4-ws .ws-main{grid-column:1; grid-row:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column;} .v4-ws .ws-chart{flex:0 0 auto; min-height:240px; display:flex; flex-direction:column; height:var(--ws-chart-h, clamp(420px, 56vh, 600px));} /* нет OHLCV (депег-стейбл без биржевой пары): не растягиваем пустой блок графика на весь экран — сжимаем до компактной подписи «нет графика», история депегов ниже становится основным содержимым. */ .v4-ws .ws-chart.is-empty{min-height:0; height:auto;} .v4-ws .ws-chart.is-empty .chart-host{min-height:96px;} /* депег area-график (CoinGecko-стиль): панель диапазонных таймфреймов + холст */ .dpg-tfbar{display:flex; gap:4px; padding:6px 10px 2px; flex-wrap:wrap; align-items:center;} .dpg-tf{font:inherit; font-size:.75rem; line-height:1; padding:4px 10px; border-radius:var(--radius-sm,6px); border:1px solid var(--border,rgba(255,255,255,.1)); background:transparent; color:var(--text-3); cursor:pointer; transition:.12s;} .dpg-tf:hover{color:var(--text-1,#fff); border-color:var(--text-3);} .dpg-tf.is-on{background:var(--accent-tint,rgba(45,212,191,.12)); color:var(--accent,#2DD4BF); border-color:var(--accent-ring,rgba(45,212,191,.35));} .dpg-plot{flex:1; min-height:260px; position:relative;} /* position:relative — база для оверлея маркеров */ /* маркеры депег-событий = иконки «unlink» поверх холста (не нативные arrowDown LWC — см. spa.js). Слой прозрачен для панорамы/кликов графика; сами пины кликабельны только когда у события есть id. */ .dpg-marks{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3;} .dpg-mark{position:absolute; top:7px; transform:translateX(-50%); width:15px; height:15px; line-height:0; color:var(--cat-depeg,#E5484D); filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); transition:transform var(--dur-2,.12s) var(--ease-std,ease);} .dpg-mark svg{width:100%; height:100%; display:block;} .dpg-mark.is-clickable{pointer-events:auto; cursor:pointer;} .dpg-mark.is-clickable:hover{transform:translateX(-50%) scale(1.22);} /* HyperLiquid candle overlays: OUR-signal badges (.hlc-mk, arrow up=buy/down=sell) + the wallet's REAL fills (.hlc-fill dots) — HyperDash-style trade marks on the HL candles. Both layers snap to bar times + reposition on pan (mountHLChart.placeAll). */ .hlc-marks{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:4;} .hlc-fills{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3;} .hlc-mk{position:absolute; transform:translate(-50%,-50%); width:16px; height:16px; line-height:0; pointer-events:auto; cursor:default; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); transition:transform var(--dur-2,.12s) var(--ease-std,ease);} .hlc-mk-ic{display:block; width:100%; height:100%;} .hlc-mk-ic svg{width:100%; height:100%; display:block;} .hlc-mk.is-buy{color:var(--up,#3DD68C);} .hlc-mk.is-sell{color:var(--down,#FF9592);} .hlc-mk:hover{transform:translate(-50%,-50%) scale(1.3);} .hlc-mk.is-focus{width:20px; height:20px; filter:drop-shadow(0 0 6px currentColor);} .hlc-fill{position:absolute; transform:translate(-50%,-50%); width:5px; height:5px; border-radius:50%; opacity:.62;} .hlc-fill.is-buy{background:var(--up,#3DD68C);} .hlc-fill.is-sell{background:var(--down,#FF9592);} .v4-mini-lnk{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; color:var(--accent,#2DD4BF); text-decoration:none; white-space:nowrap;} .v4-mini-lnk:hover{text-decoration:underline;} .v4-mini-lnk [data-icon] svg, .v4-mini-lnk svg{width:12px; height:12px;} .v4-ws .ws-feed{flex:0 0 auto; min-height:0; display:flex; flex-direction:column;} .v4-ws .ws-feed > .w3-ph{flex:0 0 auto;} .v4-ws .ws-feed .ws-feed-list{min-height:0; overflow:visible;} /* лента БЕЗ своего скролла — её крутит общий бар колонки */ .v4-ws #ws-drag{display:flex; flex:0 0 auto;} /* сплиттер виден: тянем высоту графика */ /* ПРАВАЯ КОЛОНКА = ДВЕ панели-карточки («Экономика» сверху + «Кто двигает» ниже) с ЕДИНЫМ скроллбаром колонки (user 2026-06-15: убрать зажатость, симметрично левой колонке). Обе карточки текут естественной высотой, СВОЕГО скролла НЕ имеют — скроллит один бар .ws-side. */ .v4-ws .ws-side{grid-column:2; grid-row:1; position:static; top:auto; min-height:0; display:flex; flex-direction:column; gap:12px; overflow-y:auto; overscroll-behavior:contain;} .v4-ws .ws-econ-panel,.v4-ws .ws-mover-panel{flex:0 0 auto; display:flex; flex-direction:column;} .v4-ws .ws-econ-panel > .w3-ph,.v4-ws .ws-mover-panel > .w3-ph{flex:0 0 auto;} .v4-ws .ws-econ-panel > .v4-scroll,.v4-ws .ws-mover-panel > .v4-scroll{flex:0 0 auto; min-height:0; overflow:visible;} /* чарт растягивается под доступную высоту (LWC autoSize следит за контейнером) */ .v4-ws .chart-host{flex:1; min-height:0; display:flex; flex-direction:column;} .v4-ws .chart-host .tc-plot{flex:1; height:auto; min-height:140px;} /* ниже 200 → подпись-легенда внизу всегда помещается даже при поджатом графике */ .v4-ws .chart-host .tc-mk-note{flex:0 0 auto;} /* тулбар выгрузки списка кошельков (.txt) на вкладке «Кластеры» */ .cf-dl-bar{flex:0 0 auto; display:flex; flex-wrap:wrap; gap:4px; padding:6px var(--w3-pad); border-bottom:1px solid var(--border);} .cf-dl-bar .cf-dl{font-size:.6875rem; padding:3px 8px;} .cf-dl-bar .cf-dl .u{margin-left:3px; opacity:.6; font-family:var(--font-mono);} /* компактный переключатель формата выгрузки (.txt голые адреса / .csv полная таблица) */ .cf-fmt{display:inline-flex; align-self:center; margin-left:auto; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;} .cf-fmt-b{font-size:.625rem; font-family:var(--font-mono); padding:3px 7px; color:var(--text-3); background:transparent; border:0; cursor:pointer; transition:color .12s, background .12s;} .cf-fmt-b:hover{color:var(--text-1);} .cf-fmt-b.is-on{color:var(--accent-ink); background:var(--accent);} .cf-fmt-b + .cf-fmt-b{border-left:1px solid var(--border);} @media (max-width:1180px){ .v4-token{height:auto;} .v4-ws{display:flex; flex-direction:column;} .v4-ws .ws-main{display:block; overflow:visible; height:auto;} .v4-ws .ws-chart{height:auto;} .v4-ws #ws-drag{display:none;} /* на узких экранах простая колонка, ресайз не нужен */ .v4-ws .ws-feed .ws-feed-list{overflow:visible;} .v4-ws .chart-host .tc-plot{height:340px; flex:none;} .v4-ws .ws-mover-panel{flex:0 0 auto;} .v4-ws .ws-mover-panel > .v4-scroll{max-height:420px;} } /* ============ силовой граф кластеров (воркспейс токена: вкладка «Кластеры») ============ */ .ws-chart-ph{flex:0 0 auto; min-height:0; padding:6px var(--w3-pad); border-bottom:1px solid var(--border); display:flex; align-items:center;} .ws-chart .chart-host[hidden]{display:none;} .ws-chart .cluster-host{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;} .ws-chart .cluster-host[hidden]{display:none;} /* раскладка: сцена-граф (слева, тянется) + список кошельков по классам (справа) */ .cf-wrap{flex:1; min-height:0; display:flex; gap:12px;} .cf-stage{flex:1; min-width:0; position:relative; border-radius:var(--radius-md); overflow:hidden; background:radial-gradient(circle at 50% 46%, color-mix(in srgb,var(--surface-2) 55%, transparent), transparent 70%), var(--surface-1);} .cf{width:100%; height:100%; display:block; touch-action:none; user-select:none; cursor:grab;} .cf.cf-panning{cursor:grabbing;} /* рёбра: центр→хаб ярче, член→хаб тоньше; подсветка/затемнение кластера на ховере */ .cf-edge{stroke-width:1.2; stroke-opacity:.16; transition:stroke-opacity var(--dur-2) var(--ease-std);} .cf-edge-hub{stroke-width:1.7; stroke-opacity:.3;} .cf.cf-hot .cf-edge:not(.cf-lit){stroke-opacity:.05;} .cf-edge.cf-lit{stroke-opacity:.6;} .cf-edge.cf-edim{stroke-opacity:.04;} .cf-node,.cf-hub{cursor:grab; transition:opacity var(--dur-2) var(--ease-std);} .cf-node.cf-grab,.cf-hub.cf-grab,.cf.cf-dragging .cf-node,.cf.cf-dragging .cf-hub{cursor:grabbing;} .cf-node.cf-dim,.cf-hub.cf-dim{opacity:.18;} .cf-core{stroke:var(--bg); stroke-width:1.5; transition:stroke var(--dur-2) var(--ease-std);} .cf-node:hover .cf-core,.cf-node:focus-visible .cf-core,.cf-node.cf-on .cf-core{stroke:var(--text-1); stroke-width:2;} .cf-node-in{transform-box:fill-box; transform-origin:center;} @media (prefers-reduced-motion:no-preference){ .cf-node-in{animation:cfpop .5s var(--ease-out) backwards;} } @keyframes cfpop{from{opacity:0; transform:scale(.25);} to{opacity:1; transform:scale(1);}} .cf-node.cf-ping .cf-core{animation:cfping .7s var(--ease-out);} @keyframes cfping{0%{stroke:var(--accent); stroke-width:5;} 100%{stroke:var(--bg); stroke-width:1.5;}} .cf-hub-ring{fill:none; stroke-width:1.6; stroke-opacity:.85;} .cf-hub-l{fill:var(--text-2); font-size:11px; font-weight:600; paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round;} .cf-node:focus-visible,.cf-hub:focus-visible{outline:none;} .cf-center-ring{fill:var(--surface-2); stroke:var(--accent); stroke-width:1.5;} .cf-center-sym{fill:var(--text-1); font-size:12px; font-weight:700; font-family:var(--font-display);} .cf-pulse{fill:none; stroke:var(--accent); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:cfpulse 2.8s ease-out infinite;} @keyframes cfpulse{0%{opacity:.45; transform:scale(.85);} 70%{opacity:0; transform:scale(1.75);} 100%{opacity:0;}} /* зум-кнопки + примечание поверх сцены */ .cf-zoom{position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; gap:4px; z-index:4;} .cf-zoom button{width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-2); cursor:pointer;} .cf-zoom button:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .cf-note{position:absolute; left:12px; bottom:10px; right:54px; z-index:3; font-size:.6875rem; color:var(--text-3); line-height:1.5; margin:0; pointer-events:none;} .cf-tip{position:absolute; z-index:6; pointer-events:none; min-width:150px; max-width:240px; padding:9px 11px; background:var(--surface-4); border:1px solid var(--border-strong); border-radius:var(--radius-sm); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px -10px hsl(var(--shadow-color)/.7); font-size:.75rem; color:var(--text-2);} .cf-tip-h{display:flex; align-items:center; gap:6px; color:var(--text-1); font-weight:600; font-size:.75rem; margin-bottom:5px;} .cf-tip-a{font-family:var(--font-mono); color:var(--text-1); font-size:.75rem; margin-bottom:3px;} .cf-tip .tip-row{margin-top:2px;} .cf-tip .tip-row .v.sans{font-family:var(--font-sans);} .cf-tip .mono{font-family:var(--font-mono);} /* боковой список кошельков по классам (как у Bubblemaps) */ .cf-side{flex:0 0 286px; min-height:0; display:flex; flex-direction:column; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;} .cf-side-h{flex:0 0 auto; padding:9px var(--w3-pad); font-size:.75rem; font-weight:600; color:var(--text-2); letter-spacing:var(--track-caps-sm); text-transform:uppercase; border-bottom:1px solid var(--border);} .cf-side-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 0;} .cf-grp{padding:2px 0;} .cf-grp-h{display:flex; align-items:center; gap:8px; padding:7px var(--w3-pad) 5px; cursor:default;} .cf-grp-h .nm{font-size:.8125rem; font-weight:600; color:var(--text-1);} .cf-grp-h .cnt{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:0 6px; line-height:15px;} .cf-grp-h .pc{margin-left:auto; font-family:var(--font-mono); font-size:.75rem; color:var(--text-2);} .cf-grp:hover .cf-grp-h .nm{color:var(--text-1);} .cf-grp-rows{padding-bottom:4px;} .cf-wrow{display:flex; align-items:center; gap:8px; height:26px; padding:0 var(--w3-pad) 0 30px; cursor:pointer; font-size:.75rem; color:var(--text-2);} .cf-wrow:hover{background:var(--fill-hover); color:var(--text-1);} .cf-wrow.cf-copied{background:var(--accent-tint);} .cf-wrow.cf-copied .ad{color:var(--accent); font-family:var(--font-sans);} /* «Скопировано ✓» фидбэк */ .cf-wrow .ad{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono);} .cf-wrow .v{margin-left:auto; font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); white-space:nowrap;} .cf-wmore{padding:3px var(--w3-pad) 4px 30px; font-size:.6875rem; color:var(--text-disabled);} @media (max-width:980px){ .cf-side{display:none;} } /* невидимый хитбокс центров кластеров (хабов): тонкое кольцо r=12 + точка r=4 трудно поймать */ .cf-hub-hit{fill:transparent; pointer-events:all; cursor:grab;} .cf-hub.cf-grab .cf-hub-hit{cursor:grabbing;} /* сворачивание боковой панели «Кошельки по классам» → граф на всю ширину (кнопка в сцене, всегда видна) */ .cf-side-h{display:flex; align-items:center; gap:8px; padding-right:8px;} .cf-side-h .t{flex:1; min-width:0;} .cf-side-collapse{flex:0 0 auto; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; color:var(--text-3); background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); cursor:pointer;} .cf-side-collapse:hover{color:var(--text-1); background:var(--fill-hover); border-color:var(--border);} /* re-open tab on the stage's right edge — visible ONLY when the panel is collapsed (.cf-side-off) */ .cf-side-reopen{position:absolute; top:50%; right:0; transform:translateY(-50%); z-index:4; width:18px; height:56px; display:none; align-items:center; justify-content:center; cursor:pointer; font-size:.95rem; line-height:1; color:var(--text-2); border:1px solid var(--border); border-right:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm); background:color-mix(in srgb, var(--surface-1) 90%, transparent);} .cf-side-reopen:hover{color:var(--text-1); background:var(--fill-hover); border-color:var(--border-hover);} .cf-wrap.cf-side-off .cf-side{display:none;} .cf-wrap.cf-side-off .cf-side-reopen{display:flex;} /* ============ новая SPA-разметка (цикл правок) ============ */ /* шапка списка открытых вкладок: подпись «ОТКРЫТО» слева + «закрыть все» справа. Текстовая кнопка «Очистить» в шапке «Открытые» — видна всегда (иконочный вариант был невидим: svg не имел размера). Текст + рамка → находится сразу. */ .v4-tabs-hd{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-right:4px;} .v4-tabs-clear{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 8px; border-radius:var(--radius-sm); background:none; border:1px solid var(--border); color:var(--text-2); font-size:.6875rem; opacity:1; cursor:pointer; white-space:nowrap; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .v4-tabs-clear:hover{color:var(--text-1); background:var(--fill-active); border-color:var(--border-hover);} /* когорта-аккордеон («Кластеры»): кликабельная строка .ws-co.is-acc раскрывает .ws-co-body. Базовый .ws-co (v3.css) не трогаем — только модификаторы/дети. */ .ws-co.is-acc{cursor:pointer;} .ws-co .chev{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; color:var(--text-3); transition:transform .15s var(--ease-std);} .ws-co .chev svg{width:13px; height:13px;} .ws-co.is-open .chev{transform:rotate(90deg);} .ws-co-body{padding-left:18px;} .ws-co-body[hidden]{display:none;} /* панель выгрузки/выбора кошельков: тулбар + кнопки (вид .cf-fmt-b/ghost) + чекбоксы строк */ .ws-dlbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap;} .ws-dlbtn{display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-2); font-size:.6875rem; white-space:nowrap; cursor:pointer; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .ws-dlbtn:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .ws-dlbtn .u{margin-left:3px; opacity:.6; font-family:var(--font-mono);} /* строковый чекбокс выбора — кастомный под тёмную тему (нативный белый «резал глаз»): тот же вид, что чекбоксы «Сравнить» (.tc-cchip .cb) — бордюр в покое, заливка accent + ✓ при выборе. */ .ws-sel{flex:0 0 auto; width:15px; height:15px; vertical-align:middle; cursor:pointer; margin:0; appearance:none; -webkit-appearance:none; position:relative; background:transparent; border:1.5px solid var(--border-strong); border-radius:4px; transition:background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .ws-sel:hover{border-color:var(--accent);} .ws-sel:checked{background:var(--accent); border-color:var(--accent);} .ws-sel:checked::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; font-weight:700; color:#fff;} .ws-sel:focus-visible{outline:none; box-shadow:0 0 0 2px var(--accent-tint);} .ws-dlbtn svg{width:13px; height:13px;} .ws-dlbtn .n{margin-left:0; font-family:var(--font-mono); font-weight:600;} /* primary = акцентная (выгрузка), ghost = тихая (снять выбор) — единый scope-тулбар (Ф3) */ .ws-dlbtn.pri{color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:600;} .ws-dlbtn.pri:hover{background:var(--accent-hover, var(--accent)); border-color:var(--accent-hover, var(--accent)); color:var(--accent-ink);} .ws-dlbtn.pri .n{color:var(--accent-ink);} .ws-dlbtn.ghost{background:transparent;} /* формат-тумблер .txt/.csv — вид .cf-fmt кластера (единый паттерн) */ .ws-fmt{display:inline-flex; align-self:center; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;} .ws-fmt-b{font-size:.625rem; font-family:var(--font-mono); padding:4px 8px; color:var(--text-3); background:transparent; border:0; cursor:pointer; transition:color .12s, background .12s;} .ws-fmt-b:hover{color:var(--text-1);} .ws-fmt-b.is-on{color:var(--accent-ink); background:var(--accent);} .ws-fmt-b + .ws-fmt-b{border-left:1px solid var(--border);} /* аккумулируемая Σ$ выбранных кошельков (item 1) + кнопка алерта по дельте («на будущее») */ .ws-selsum{display:inline-flex; align-items:center; height:26px; padding:0 9px; margin-left:auto; font-family:var(--font-mono); font-size:.75rem; font-weight:600; color:var(--text-1); background:var(--fill-selected); border:1px solid var(--border); border-radius:var(--radius-sm); white-space:nowrap;} .ws-alertbtn{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--border-strong));} .ws-alertbtn:hover{color:var(--accent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);} /* короткий неблокирующий тост (_wsToast) — «фича в разработке» и т.п. */ .ws-toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%, 14px); z-index:1200; max-width:min(90vw, 420px); padding:10px 16px; background:var(--surface-2); color:var(--text-1); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-3, 0 8px 28px rgba(0,0,0,.4)); font-size:.8125rem; opacity:0; pointer-events:none; transition:opacity .18s var(--ease-std), transform .18s var(--ease-std);} .ws-toast.show{opacity:1; transform:translate(-50%, 0);} /* .live-dot / live-pulse удалены 2026-06-21: индикатор свежести ленты убран из UI. */ /* пресет-строка ленты в .v4-dd-pop: имя слева + удаление-крестик справа (вид .v4-dd-opt) */ .v4-preset-row{display:flex; align-items:center; gap:9px; width:100%; height:32px; padding:0 9px; border-radius:var(--radius-sm); font-size:.8125rem; color:var(--text-2); cursor:pointer; text-align:left;} .v4-preset-row:hover{background:var(--fill-hover); color:var(--text-1);} .v4-preset-row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .v4-preset-row .del{flex:0 0 auto; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); color:var(--text-disabled); opacity:0; cursor:pointer; transition:opacity var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .v4-preset-row:hover .del{opacity:1;} .v4-preset-row .del:hover{color:var(--text-1); background:var(--fill-active);} .v4-preset-row .del svg{width:12px; height:12px;} /* дропдаун «Пресеты»: осмысленное пустое состояние (иконка + подпись) и футер-действие «Сохранить текущие» как выраженная акцент-кнопка — вместо голого текста (вид «дёшево»). */ .v4-dd-pop[role] .v4-preset-list{display:flex; flex-direction:column; gap:1px;} .v4-preset-empty{display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 14px 16px; text-align:center;} .v4-preset-empty .ic{width:22px; height:22px; display:inline-flex; color:var(--text-disabled);} .v4-preset-empty .ic svg{width:22px; height:22px;} .v4-preset-empty .t{font-size:.75rem; line-height:1.35; color:var(--text-3); max-width:180px;} .v4-preset-foot{margin-top:5px; padding-top:6px; border-top:1px solid var(--border);} .v4-preset-save{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:34px; border-radius:var(--radius-sm); background:var(--accent-tint); color:var(--accent); font-size:.8125rem; font-weight:600; cursor:pointer; transition:background-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);} .v4-preset-save:hover{background:var(--accent); color:var(--accent-ink);} .v4-preset-save .ic{width:14px; height:14px; display:inline-flex; flex:0 0 auto;} .v4-preset-save .ic svg{width:14px; height:14px;} /* ============================================================================ .cxt- — Arkham-style CEX-FLOW TRACER popup (cex-tracer.js). Premium centered modal: backdrop blur + scale/fade card, header (logo + sym + period seg + ×), summary strip, 3-column SVG flow tracer (зелёный=приток / красный=отток / ярче=фреш), footer legend, hover tooltip. Only design-system vars (both themes). ========================================================================== */ .cxt-back{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(7,9,12,.62); backdrop-filter:blur(6px) saturate(120%); -webkit-backdrop-filter:blur(6px) saturate(120%); animation:cxtbd var(--dur-3) var(--ease-std);} @keyframes cxtbd{from{opacity:0} to{opacity:1}} .cxt-back.is-out{opacity:0; transition:opacity 160ms var(--ease-std);} .cxt-card{width:min(920px,94vw); max-height:86vh; display:flex; flex-direction:column; min-height:0; position:relative; background:var(--surface-1); border:1px solid var(--border-strong); border-radius:14px; box-shadow:var(--elev-2); outline:none; overflow:hidden; transform-origin:center; animation:cxtin var(--dur-3) var(--ease-out);} @keyframes cxtin{from{opacity:0; transform:scale(.965) translateY(8px)} to{opacity:1; transform:none}} .cxt-back.is-out .cxt-card{transform:scale(.985); opacity:0; transition:transform 160ms var(--ease-std), opacity 160ms var(--ease-std);} /* flow tracer wants room to breathe — same envelope as the quadrant expand modal (.syn-xw) */ .cxt-card.cxt-wide{width:min(1180px,95vw); height:min(840px,92vh); max-height:92vh;} /* header */ .cxt-hd{flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border);} .cxt-title{display:flex; align-items:center; gap:9px; min-width:0;} .cxt-lg{width:24px; height:24px; flex:0 0 auto; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.5625rem; font-weight:600; color:var(--text-3);} .cxt-lg img{width:100%; height:100%; object-fit:cover; display:block;} .cxt-lg.cxt-mono{font-family:var(--font-mono);} .cxt-sym{font-size:1rem; font-weight:600; color:var(--text-1); white-space:nowrap;} .cxt-sub{font-size:.8125rem; color:var(--text-3); white-space:nowrap;} .cxt-seg{margin-left:auto; display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px;} .cxt-seg button{height:26px; padding:0 11px; border:none; background:none; border-radius:3px; cursor:pointer; font-size:.75rem; color:var(--text-3); white-space:nowrap; font-family:inherit; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .cxt-seg button:hover{color:var(--text-1);} .cxt-seg button.is-on{color:var(--text-1); background:var(--fill-selected);} /* дженерик expand-модалка (.syn-modal) не имеет .cxt-seg/.syn-hd-ctrls (пустой → display:none) → у × нет правого толкателя и он «сползал» в центр шапки; прижимаем сам. */ .syn-modal .cxt-hd .cxt-x{margin-left:auto;} .cxt-x{flex:0 0 auto; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; border-radius:var(--radius-sm); color:var(--text-3); cursor:pointer; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .cxt-x:hover{color:var(--text-1); background:var(--fill-active);} .cxt-x svg{width:16px; height:16px;} /* summary strip */ .cxt-sum{flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:11px 16px; border-bottom:1px solid var(--border); font-size:.8125rem; color:var(--text-3);} .cxt-sum .cxt-s{display:inline-flex; align-items:baseline; gap:5px;} .cxt-sum .cxt-s b{font-family:var(--font-mono); color:var(--text-1); font-weight:600;} .cxt-sum .cxt-s.in b{color:var(--up);} .cxt-sum .cxt-s.out b{color:var(--down);} .cxt-sum .cxt-s.net.up b{color:var(--up);} .cxt-sum .cxt-s.net.down b{color:var(--down);} .cxt-sum .cxt-dot{color:var(--text-disabled);} /* body / graph stage — draggable node-link graph (cex-tracer.js buildGraph), mirrors the cluster graph (.cf-*) aesthetic & mechanics, WITHOUT physics. */ .cxt-body{flex:1; min-height:0; overflow:hidden; position:relative; background: linear-gradient(color-mix(in srgb,var(--text-disabled) 7%, transparent) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, color-mix(in srgb,var(--text-disabled) 7%, transparent) 1px, transparent 1px) 0 0/44px 44px, radial-gradient(ellipse 74% 66% at 50% 45%, color-mix(in srgb,var(--surface-2) 55%, transparent), transparent 72%), var(--surface-1);} .cxt-g{display:block; width:100%; height:100%; min-height:320px; touch-action:none; user-select:none; cursor:grab;} .cxt-g.cxt-panning,.cxt-g.cxt-dragging{cursor:grabbing;} /* curved edge ribbons: directional gradient stroke (green=приток / red=отток, bright at the exchange hub) + an animated dash "flow" tracing money direction. Fat transparent hit-path makes thin ribbons easy to hover. Dim on hover-elsewhere. */ .cxt-edge-g .cxt-hit{stroke:transparent; stroke-width:16; pointer-events:stroke; cursor:pointer;} .cxt-edge{stroke-linecap:round; opacity:.24; pointer-events:none; transition:opacity var(--dur-2) var(--ease-std);} .cxt-edge-g.is-fresh .cxt-edge{opacity:.36;} /* «водопад»: a lighter shade flows as ONE smooth, UNBROKEN gradient wave along the line, source →recipient (the bright bump lives in a shared sweep gradient animated in JS — NO dashes, no segments). The .cxt-flow path just gates that gradient's visibility on the line. */ .cxt-flow{stroke-linecap:round; pointer-events:none; opacity:.85; transition:opacity var(--dur-2) var(--ease-std);} .cxt-g.cxt-hot .cxt-edge-g:not(.is-hot) .cxt-edge, .cxt-g.cxt-hot .cxt-edge-g:not(.is-hot) .cxt-flow{opacity:.05;} .cxt-edge-g.is-hot .cxt-edge{opacity:.9;} .cxt-edge-g.is-hot .cxt-flow{opacity:1;} .cxt-edge-g.is-dim .cxt-edge,.cxt-edge-g.is-dim .cxt-flow{opacity:.05;} /* flow animation OFF (perf toggle / many wallets) — hide the pulse; static ribbon stays */ .cxt-g.cxt-flow-off .cxt-flow{display:none;} /* INFINITE axis grid — a faint hairline rail at every grid line (repeats both ways); populated columns (.is-col) read a touch stronger + carry a label; the rail under a dragged node brightens (.is-active). non-scaling-stroke keeps rails hairline at any zoom. */ .cxt-axis{stroke:var(--accent); stroke-opacity:.06; stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke-opacity var(--dur-2) var(--ease-std), stroke-width var(--dur-2) var(--ease-std);} .cxt-axis.is-col{stroke-opacity:.15; stroke-width:1.25;} .cxt-axis.is-active{stroke-opacity:.5; stroke-width:2;} .cxt-lane-l{fill:var(--text-3); font-size:10px; font-family:var(--font-mono); letter-spacing:.2em; text-transform:uppercase;} /* nodes (grab to drag; no spring-back) */ .cxt-node{cursor:grab; transition:opacity var(--dur-2) var(--ease-std);} .cxt-node.cxt-grab,.cxt-g.cxt-dragging .cxt-node{cursor:grabbing;} .cxt-node.is-dim{opacity:.22;} /* glass-bead pop-in on mount (inner group; staggered via inline animation-delay) */ .cxt-in{transform-box:fill-box; transform-origin:center;} @media (prefers-reduced-motion:no-preference){ .cxt-in{animation:cxtpop .52s var(--ease-out) backwards;} } @keyframes cxtpop{from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);}} /* wallet bead: opaque class-colored disc + white sheen overlay (gloss) + class ring; fresh gets a structural outer ring. The disc stays OPAQUE so no canvas bleeds through. */ .cxt-disc{stroke-width:1.4; stroke-opacity:.92; transition:stroke var(--dur-2) var(--ease-std), stroke-width var(--dur-2) var(--ease-std), stroke-opacity var(--dur-2) var(--ease-std);} /* bright class-coloured core dot — the bead's "data point" inside the dark-glass body */ .cxt-core{pointer-events:none; opacity:.9;} .cxt-fresh-ring{fill:none; stroke:var(--cat-fresh); stroke-width:1.1; stroke-opacity:.5;} .cxt-node:hover .cxt-disc,.cxt-node:focus-visible .cxt-disc,.cxt-node.is-hot .cxt-disc{ stroke:var(--text-1); stroke-width:2.2; stroke-opacity:1;} .cxt-w-addr{fill:var(--text-2); font-size:11px; font-family:var(--font-mono); paint-order:stroke; stroke:var(--surface-1); stroke-width:3px; stroke-linejoin:round;} .cxt-w-usd{fill:var(--text-1); font-size:11px; font-weight:600; font-family:var(--font-mono); paint-order:stroke; stroke:var(--surface-1); stroke-width:3px; stroke-linejoin:round;} .cxt-node.is-hot .cxt-w-addr{fill:var(--text-1);} /* line-2 value variants: current target-token balance ($) when known; «—» when no shard (unknown) */ .cxt-w-usd.is-empty{fill:var(--down); font-weight:700;} .cxt-w-usd.is-unknown{fill:var(--text-3); font-weight:500;} /* SWEPT wallet («вышедший»): red corner marker (top-right) + dimmed bead — it deposited then emptied, so the figure beside it is NOT a current balance. Marker stays full-strength; bead/label dim. */ .cxt-empty-dot{fill:var(--down); stroke:var(--surface-1); stroke-width:1.4; pointer-events:none;} .cxt-w.is-empty .cxt-disc{stroke-opacity:.38;} .cxt-w.is-empty .cxt-core{opacity:.32;} .cxt-w.is-empty .cxt-w-addr{fill:var(--text-3);} .cxt-w.is-empty:hover .cxt-disc,.cxt-w.is-empty:focus-visible .cxt-disc,.cxt-w.is-empty.is-hot .cxt-disc,.cxt-w.is-empty.cxt-sel .cxt-disc{stroke-opacity:1;} .cxt-w.is-empty:hover .cxt-core,.cxt-w.is-empty.is-hot .cxt-core,.cxt-w.is-empty.cxt-sel .cxt-core{opacity:.9;} /* TRANSFER sum pinned ON the edge (the money that moved — distinct from the wallet's current balance) */ .cxt-e-usd{fill:var(--text-1); font-size:10px; font-weight:600; font-family:var(--font-mono); pointer-events:none; paint-order:stroke; stroke:var(--surface-1); stroke-width:3px; stroke-linejoin:round; opacity:.92; transition:opacity var(--dur-2) var(--ease-std);} .cxt-edge-g.is-dim .cxt-e-usd{opacity:.16;} .cxt-g.cxt-flow-off .cxt-e-usd{opacity:.92;} /* the on-line $ is data, not animation — keep it when flow is off */ /* exchange medallion (premium): dark-glass core + depth + soft accent rim-glow + top gloss + ONE crisp hairline accent ring. No bright net-coloured outer ring (it read as a cheap badge); net sign lives in the value text colour. */ .cxt-ex-glow{stroke:var(--accent); stroke-width:5; stroke-opacity:.3; pointer-events:none; transition:stroke-opacity var(--dur-2) var(--ease-std);} .cxt-ex-gloss{pointer-events:none;} .cxt-ex-ring{fill:none; stroke:var(--accent); stroke-width:1.1; stroke-opacity:.5; transition:stroke-width var(--dur-2) var(--ease-std), stroke-opacity var(--dur-2) var(--ease-std);} .cxt-node.is-hot .cxt-ex-ring,.cxt-ex:hover .cxt-ex-ring,.cxt-ex:focus-visible .cxt-ex-ring{stroke-width:1.5; stroke-opacity:.95;} .cxt-node.is-hot .cxt-ex-glow,.cxt-ex:hover .cxt-ex-glow,.cxt-ex:focus-visible .cxt-ex-glow{stroke-opacity:.5;} /* name/net INSIDE (only for non-exchange hubs: Источник/Команда/…) — SITE font (Geist), not display */ .cxt-ex-nm{fill:var(--text-1); font-size:11px; font-weight:600; font-family:var(--font-sans); letter-spacing:.01em; pointer-events:none;} .cxt-ex-net{font-size:9.5px; font-family:var(--font-mono); pointer-events:none;} .cxt-ex-net.up{fill:var(--up);} .cxt-ex-net.down{fill:var(--down);} /* real exchange: brand-logo chip INSIDE + name/net label OUTSIDE (below) in the site font */ .cxt-exlg{width:100%; height:100%; box-sizing:border-box; border-radius:50%; overflow:hidden; background:#eef1f4; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);} /* cover + circular clip → square/rounded-square app-icons read as a clean CIRCLE (not a square in a ring) */ .cxt-exlg img{width:100%; height:100%; object-fit:cover; display:block;} .cxt-exlg .vfb{display:none; font-family:var(--font-sans); font-weight:700; color:#1a1f27; font-size:13px;} .cxt-exlg.mono-fb{background:var(--surface-3);} .cxt-exlg.mono-fb .vfb{display:flex; color:var(--text-1);} .cxt-ex-name-out{fill:var(--text-1); font-size:11px; font-weight:600; font-family:var(--font-sans); letter-spacing:.01em; pointer-events:none;} .cxt-ex-net-out{font-size:10px; font-family:var(--font-mono); pointer-events:none;} .cxt-ex-net-out.up{fill:var(--up);} .cxt-ex-net-out.down{fill:var(--down);} .cxt-node:focus-visible{outline:none;} /* census readout — quiet mono tally bottom-left (corner registration brackets removed) */ .cxt-hud{position:absolute; inset:0; pointer-events:none; z-index:2;} .cxt-hud-tag{position:absolute; left:13px; bottom:11px; font-family:var(--font-mono); font-size:.625rem; letter-spacing:.13em; color:var(--text-disabled);} /* zoom buttons (mirror .cf-zoom) */ .cxt-zoom{position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; gap:4px; z-index:4;} .cxt-zoom button{width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-2); cursor:pointer; font-family:inherit; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .cxt-zoom button:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} /* flow-animation toggle: accent when on, muted when off; small gap from the zoom triplet */ .cxt-zoom .cxt-flowtog{color:var(--accent); font-size:1.15rem; margin-bottom:4px;} .cxt-zoom .cxt-flowtog.is-off{color:var(--text-disabled);} /* empty state */ .cxt-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:200px; color:var(--text-3); font-size:.8125rem;} .cxt-empty .ic{width:22px; height:22px; color:var(--text-disabled);} .cxt-empty .ic svg{width:22px; height:22px;} /* footer legend */ .cxt-foot{flex:0 0 auto; display:flex; flex-wrap:wrap; gap:14px; padding:10px 16px; border-top:1px solid var(--border); font-size:.6875rem; color:var(--text-3);} .cxt-foot{flex-wrap:wrap; gap:8px 18px;} .cxt-fg{display:inline-flex; align-items:center; gap:11px;} .cxt-fgl{font-size:.625rem; letter-spacing:var(--track-caps-sm); text-transform:uppercase; color:var(--text-disabled);} .cxt-fk{display:inline-flex; align-items:center; gap:6px;} .cxt-fk .d{flex:0 0 auto;} /* поток = отрезок линии (как ребро); кошелёк = кружок (как узел) */ .cxt-fk .d.in,.cxt-fk .d.out{width:16px; height:3px; border-radius:2px;} .cxt-fk .d.in{background:linear-gradient(90deg, color-mix(in srgb,var(--up) 22%, transparent), var(--up));} .cxt-fk .d.out{background:linear-gradient(90deg, var(--down), color-mix(in srgb,var(--down) 22%, transparent));} .cxt-fk .d.cls{width:9px; height:9px; border-radius:999px; background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.4), var(--c, var(--text-3)) 60%);} .cxt-fk .d.cls.ex{--c:var(--accent);} .cxt-fk .d.cls.fresh{--c:var(--cat-fresh);} .cxt-fk .d.cls.team{--c:var(--cat-team);} .cxt-fk .d.cls.safe{--c:var(--cat-safe);} .cxt-fk .d.cls.def{--c:var(--text-2);} /* event-mode bits: schematic «note» advisory bar + header spacer when no period control */ .cxt-seg-sp{margin-left:auto;} .cxt-note{flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:7px 16px; font-size:.6875rem; color:var(--text-2); border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--warn) 8%, transparent);} .cxt-note .ic{width:13px; height:13px; color:var(--warn); flex:0 0 auto; display:inline-flex;} .cxt-note .ic svg{width:13px; height:13px;} /* hover tooltip (positioned within the card overlay — pointer-events on so the embedded Tx link is clickable; it opens the explorer, NOT the spa.js tx-panel) */ .cxt-tip{position:absolute; z-index:5; pointer-events:auto; min-width:170px; max-width:300px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-1); padding:9px 11px; font-size:.75rem; line-height:1.6; color:var(--text-2);} .cxt-tip[hidden]{display:none;} .cxt-tip-h{display:flex; align-items:center; gap:6px; color:var(--text-1); font-weight:600; font-size:.75rem; margin-bottom:5px;} .cxt-tip-h .key-sw{width:9px; height:9px; border-radius:2px; flex:0 0 auto;} .cxt-tip-h .key-sw.acc{background:var(--accent);} .cxt-tip-h .cxt-tk{width:11px; height:0; border-top:2px solid currentColor; flex:0 0 auto; align-self:center;} .cxt-tip-h .cxt-tk.in{color:var(--up);} .cxt-tip-h .cxt-tk.out{color:var(--down);} .cxt-tip-a{font-family:var(--font-mono); color:var(--text-1); font-size:.6875rem; margin-bottom:4px; word-break:break-all;} .cxt-tip .r{display:flex; align-items:baseline; gap:6px; margin-top:2px;} .cxt-tip .k{flex:0 0 auto; min-width:54px; color:var(--text-3); letter-spacing:var(--track-caps-sm); text-transform:uppercase; font-size:.625rem;} .cxt-tip .mono{font-family:var(--font-mono); color:var(--text-1); word-break:break-all;} .cxt-tip .mono.up{color:var(--up);} .cxt-tip .mono.down{color:var(--down);} .cxt-tip-tx{font-family:var(--font-mono); color:var(--accent); text-decoration:none; word-break:break-all;} .cxt-tip-tx:hover{text-decoration:underline;} /* wallet action popover — tap a bead to pin a card with the full, copyable address (+ explorer). The actionable surface the hover tooltip never gave: you can finally grab a wallet off the map. */ .cxt-pop{position:absolute; z-index:6; pointer-events:auto; width:252px; max-width:88%; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-1); padding:11px 12px 12px; font-size:.75rem; color:var(--text-2);} .cxt-pop[hidden]{display:none;} .cxt-pop-h{display:flex; align-items:center; gap:6px; color:var(--text-1); font-weight:600; font-size:.75rem; margin-bottom:7px;} .cxt-pop-h .key-sw{width:9px; height:9px; border-radius:2px; flex:0 0 auto;} .cxt-pop-h .nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cxt-pop-x{flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:var(--radius-sm); color:var(--text-3); font-size:1.05rem; line-height:1; cursor:pointer; padding:0;} .cxt-pop-x:hover{color:var(--text-1); background:var(--fill-hover);} .cxt-pop-a{font-family:var(--font-mono); color:var(--text-1); font-size:.6875rem; line-height:1.5; word-break:break-all; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 7px; margin-bottom:7px;} .cxt-pop-m{font-family:var(--font-mono); color:var(--text-3); font-size:.6875rem; margin-bottom:3px;} /* «Сейчас: …» current-balance line under «Переведено:» — empty = down-tinted, unknown = muted */ .cxt-pop-m2{font-family:var(--font-mono); color:var(--text-2); font-size:.6875rem; margin-bottom:9px;} .cxt-pop-m2.is-empty{color:var(--down);} .cxt-pop-m2.is-unknown{color:var(--text-3);} .cxt-pop-act{display:flex; gap:7px; flex-wrap:wrap;} /* danger (hide) action — shared by popover / cluster-modal / selection-panel buttons */ .cxt-pop-btn.danger,.cxt-cm-btn.danger,.cxt-sp-btn.danger{color:var(--down); border-color:color-mix(in srgb, var(--down) 30%, var(--border));} .cxt-pop-btn.danger:hover,.cxt-cm-btn.danger:hover,.cxt-sp-btn.danger:hover{border-color:var(--down); background:color-mix(in srgb, var(--down) 12%, var(--surface-3));} /* «Скрыто N · показать» chip — centred at the top, restores all hidden wallets/clusters */ .cxt-restore{position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:6; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px; color:var(--text-2); font-family:var(--font-sans); font-size:.72rem; font-weight:500; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .cxt-restore:hover{color:var(--text-1); border-color:var(--border-hover);} .cxt-restore[hidden]{display:none;} .cxt-restore .ic{width:13px; height:13px; flex:0 0 auto; display:inline-flex;} .cxt-restore .ic svg{width:13px; height:13px;} /* «Новые потоки · обновить» — live-feed pill: новый CEX-лег пришёл, но юзер арранжировал карту → не дёргаем layout, предлагаем обновить одним тапом (если карта pristine — обновляем сами). */ .cxt-livepill{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:7; display:inline-flex; align-items:center; gap:7px; padding:6px 14px; cursor:pointer; background:var(--accent); border:1px solid var(--accent); border-radius:999px; color:#06121d; font-family:var(--font-sans); font-size:.74rem; font-weight:600; box-shadow:var(--elev-1); animation:cxtpop .3s var(--ease-out) backwards;} .cxt-livepill[hidden]{display:none;} .cxt-livepill:hover{filter:brightness(1.08);} .cxt-livepill .dot{width:7px; height:7px; border-radius:999px; background:#06121d; opacity:.7; animation:cxtpulse 1.4s ease-in-out infinite;} @keyframes cxtpulse{0%,100%{opacity:.35;} 50%{opacity:.9;}} .cxt-pop-btn{flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:30px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-3); color:var(--text-1); font-family:var(--font-sans); font-size:.75rem; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .cxt-pop-btn:hover{border-color:var(--border-hover); background:var(--fill-hover);} .cxt-pop-btn .ic{width:13px; height:13px; flex:0 0 auto; display:inline-flex;} .cxt-pop-btn .ic svg{width:13px; height:13px;} .cxt-pop-btn.is-done{color:var(--up); border-color:color-mix(in srgb, var(--up) 50%, var(--border)); background:color-mix(in srgb, var(--up) 12%, var(--surface-3));} /* group brackets — a crisp vertical brace beside each exchange cluster, with name·count + accent ＋. Overlay tracks node positions through pan/zoom/drag; fades in once the clustering animation settles. */ .cxt-braks{position:absolute; inset:0; pointer-events:none; z-index:3; transition:opacity .26s var(--ease-out);} .cxt-braks.is-hiding{opacity:0;} .cxt-braks.is-hiding .cxt-brak-chip{pointer-events:none;} /* no click-capture on the fading-out (invisible) chips */ .cxt-brak{position:absolute; display:flex; align-items:center; gap:7px; animation:cxtbrakin .42s var(--ease-out) backwards;} .cxt-brak.is-in{transform:translateX(-100%); flex-direction:row;} @keyframes cxtbrakin{from{opacity:0;}} .cxt-brak-brace{width:11px; align-self:stretch; flex:0 0 auto; overflow:visible;} .cxt-brak-brace path{fill:none; stroke:var(--accent); stroke-opacity:.42; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;} .cxt-brak.is-big .cxt-brak-brace path{stroke-opacity:.34; stroke-dasharray:3 5;} .cxt-brak-chip{pointer-events:auto; display:flex; align-items:center; gap:9px; cursor:grab; touch-action:none; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-1); padding:5px 6px 5px 11px;} .cxt-brak-chip:active{cursor:grabbing;} /* кластер выделен (тап по бейджу / выделение всех его кошельков) → акцентная рамка на бейдже */ .cxt-brak.is-sel .cxt-brak-chip{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--elev-1);} .cxt-brak-meta{display:flex; flex-direction:column; line-height:1.18; min-width:0;} .cxt-brak-nm{font-family:var(--font-sans); font-weight:600; font-size:.75rem; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:128px;} .cxt-brak-n{font-family:var(--font-mono); font-size:.625rem; color:var(--text-3);} .cxt-brak-add{flex:0 0 auto; width:25px; height:25px; display:flex; align-items:center; justify-content:center; border:0; border-radius:var(--radius-sm); background:var(--accent); color:#06121d; cursor:pointer; font-family:var(--font-sans); font-size:1.15rem; font-weight:500; line-height:0; padding:0; transition:filter var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-std);} .cxt-brak-add:hover{filter:brightness(1.12); transform:translateY(-1px);} /* cluster collect modal — ＋ opens this over the tracer: addresses + create Delta-group / Watch-alert */ .cxt-cmodal{position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--surface-1) 60%, transparent); backdrop-filter:blur(2px); animation:cxtcmin .16s var(--ease-out);} @keyframes cxtcmin{from{opacity:0;}} .cxt-cm-card{width:min(430px,92%); max-height:84%; display:flex; flex-direction:column; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-1);} .cxt-cm-h{display:flex; align-items:center; gap:9px; padding:13px 14px; border-bottom:1px solid var(--border);} .cxt-cm-t{font-family:var(--font-sans); font-weight:600; font-size:.9375rem; color:var(--text-1); flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .cxt-cm-n{font-family:var(--font-mono); font-size:.6875rem; color:var(--text-3); flex:0 0 auto;} .cxt-cm-x{flex:0 0 auto; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:var(--radius-sm); color:var(--text-3); font-size:1.2rem; line-height:1; cursor:pointer; padding:0;} .cxt-cm-x:hover{color:var(--text-1); background:var(--fill-hover);} .cxt-cm-list{flex:1 1 auto; min-height:36px; max-height:230px; overflow:auto; padding:6px 14px;} .cxt-cm-row{font-size:.6875rem; color:var(--text-2); word-break:break-all; padding:4px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent);} .cxt-cm-empty{color:var(--text-3); font-size:.8125rem; padding:16px 0; text-align:center;} .cxt-cm-note{padding:9px 14px 0; font-size:.6875rem; color:var(--text-3); line-height:1.5;} .cxt-cm-act{display:flex; flex-wrap:wrap; gap:7px; padding:12px 14px 14px;} .cxt-cm-btn{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-3); color:var(--text-1); font-family:var(--font-sans); font-size:.8125rem; font-weight:500; cursor:pointer; white-space:nowrap; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .cxt-cm-btn:hover{border-color:var(--border-hover); background:var(--fill-hover);} .cxt-cm-btn.primary{background:var(--accent); border-color:var(--accent); color:#06121d;} .cxt-cm-btn.primary:hover{filter:brightness(1.1); background:var(--accent);} .cxt-cm-btn[disabled]{opacity:.45; cursor:not-allowed;} .cxt-cm-btn.is-done{color:var(--up); border-color:color-mix(in srgb, var(--up) 50%, var(--border));} .cxt-cm-btn .ic{width:14px; height:14px; flex:0 0 auto; display:inline-flex;} .cxt-cm-btn .ic svg{width:14px; height:14px;} /* «Кластеры» toggle (top-left overlay) — groups wallets by exchange-set on demand (default OFF) */ .cxt-clbtn{position:absolute; top:10px; left:13px; z-index:4; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-2); font-family:var(--font-sans); font-size:.75rem; font-weight:500; cursor:pointer; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .cxt-clbtn:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .cxt-clbtn.is-on{color:#06121d; background:var(--accent); border-color:var(--accent);} .cxt-clbtn .ic{width:14px; height:14px; flex:0 0 auto; display:inline-flex;} .cxt-clbtn .ic svg{width:14px; height:14px;} /* marquee selection (Shift/Ctrl+drag) + multi-select + left «Выделено» panel */ .cxt-marquee{position:absolute; z-index:5; pointer-events:none; border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:2px;} .cxt-marquee[hidden]{display:none;} .cxt-node.cxt-sel .cxt-disc, .cxt-node.cxt-sel-pre .cxt-disc{stroke:var(--accent); stroke-width:2.6; stroke-opacity:1;} .cxt-node.cxt-sel .cxt-core{opacity:1;} .cxt-selpanel{position:absolute; left:10px; top:48px; z-index:6; width:212px; max-height:calc(100% - 100px); display:flex; flex-direction:column; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-1);} .cxt-selpanel[hidden]{display:none;} .cxt-sp-h{display:flex; align-items:center; gap:7px; padding:9px 10px; border-bottom:1px solid var(--border);} .cxt-sp-h .t{font-family:var(--font-sans); font-weight:600; font-size:.8125rem; color:var(--text-1); flex:1 1 auto;} .cxt-sp-h .n{font-family:var(--font-mono); font-size:.625rem; color:var(--text-3); flex:0 0 auto;} .cxt-sp-x{flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:var(--radius-sm); color:var(--text-3); font-size:1.05rem; line-height:1; cursor:pointer; padding:0;} .cxt-sp-x:hover{color:var(--text-1); background:var(--fill-hover);} .cxt-sp-list{flex:1 1 auto; overflow:auto; padding:6px 10px;} .cxt-sp-grp{font-family:var(--font-sans); font-size:.6875rem; font-weight:600; color:var(--text-2); margin:6px 0 2px;} .cxt-sp-row{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:2px 0;} .cxt-sp-row .mono{font-family:var(--font-mono); font-size:.625rem; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cxt-sp-row .usd{font-family:var(--font-mono); font-size:.625rem; color:var(--text-3); flex:0 0 auto;} .cxt-sp-act{display:flex; flex-wrap:wrap; gap:6px; padding:9px 10px; border-top:1px solid var(--border);} .cxt-sp-act.is-sub{padding-top:0; border-top:0;} /* 2nd row («Скрыть») — no divider, sits under В алерт/Копировать */ .cxt-sp-btn.full{flex:1 1 100%;} .cxt-sp-btn{flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:30px; padding:0 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-3); color:var(--text-1); font-family:var(--font-sans); font-size:.75rem; font-weight:500; cursor:pointer; white-space:nowrap; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .cxt-sp-btn:hover{border-color:var(--border-hover); background:var(--fill-hover);} .cxt-sp-btn.primary{background:var(--accent); border-color:var(--accent); color:#06121d;} .cxt-sp-btn[disabled]{opacity:.45; cursor:not-allowed;} .cxt-sp-btn .ic{width:13px; height:13px; flex:0 0 auto; display:inline-flex;} .cxt-sp-btn .ic svg{width:13px; height:13px;} @media (prefers-reduced-motion:reduce){ .cxt-back,.cxt-card{animation:none;} .cxt-back.is-out,.cxt-back.is-out .cxt-card{transition:none;} .cxt-edge,.cxt-flow,.cxt-in,.cxt-node,.cxt-disc,.cxt-ex-ring,.cxt-x,.cxt-seg button,.cxt-zoom button,.cxt-livepill,.cxt-livepill .dot{transition:none; animation:none;} .cxt-braks,.cxt-brak,.cxt-cmodal,.cxt-brak-add{transition:none; animation:none;} /* no traveling pulse → hide it and let the (slightly stronger) static ribbon carry the flow */ .cxt-flow{opacity:0;} .cxt-edge{opacity:.5;} .cxt-edge-g.is-fresh .cxt-edge{opacity:.62;} } @media (max-width:560px){ .cxt-hd{flex-wrap:wrap; row-gap:8px;} .cxt-seg{margin-left:0;} } /* ===== панельная кнопка «развернуть» (квадрант → модалка; далее кластеры/график) ===== */ .v4-expand{flex:0 0 auto; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--surface-2); border-radius:var(--radius-sm); color:var(--text-3); cursor:pointer; margin-left:6px; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .v4-expand:hover{color:var(--text-1); background:var(--fill-active); border-color:var(--border-strong);} .v4-expand svg{width:14px; height:14px;} /* ===== generic modal (переиспользует .cxt-back/.cxt-card оболочку) ===== */ .syn-mw{width:min(1100px,95vw);} .syn-xw{width:min(1180px,95vw); height:min(840px,92vh); max-height:92vh;} .syn-hd-ctrls{margin-left:auto; display:flex; align-items:center; gap:8px;} .syn-hd-ctrls:empty{display:none;} .syn-modal-body{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;} /* фильтр-бар квадранта в модалке */ .emf-bar{flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:9px 18px; padding:11px 16px; border-bottom:1px solid var(--border);} .emf-grp{display:flex; align-items:center; gap:8px; min-width:0;} .emf-l{font-size:.625rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); white-space:nowrap;} .emf-seg{display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px;} .emf-seg button{height:24px; padding:0 9px; border:none; background:none; border-radius:3px; cursor:pointer; font-size:.75rem; color:var(--text-3); font-family:inherit; white-space:nowrap; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .emf-seg button:hover{color:var(--text-1);} .emf-seg button.on{color:var(--text-1); background:var(--fill-selected);} .emf-sel{height:28px; padding:0 8px; background:var(--surface-2); color:var(--text-1); font-family:inherit; font-size:.75rem; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; max-width:210px;} .emf-sel:hover{border-color:var(--border-strong);} /* поиск по тикеру/контракту в квадрант-модалке (item 4) */ .emf-grp-search{flex:1 1 220px; min-width:160px;} .emf-search{width:100%; height:28px; padding:0 10px; background:var(--surface-2); color:var(--text-1); font-family:inherit; font-size:.75rem; border:1px solid var(--border); border-radius:var(--radius-sm); transition:border-color var(--dur-2) var(--ease-std);} .emf-search::placeholder{color:var(--text-3);} .emf-search:hover{border-color:var(--border-strong);} .emf-search:focus, .emf-search:focus-visible{outline:none; box-shadow:none; border-color:var(--border-strong);} .emf-stage{flex:1; min-height:0; position:relative; overflow:hidden;} .emf-canvas{position:absolute; inset:8px 12px 6px;} .emf-canvas .emi-scatter{width:100%; height:100%; touch-action:none;} .emf-stage.zoomed{cursor:grab;} .emf-stage.zoomed:active{cursor:grabbing;} .emf-zoom{position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column; gap:4px; z-index:2;} .emf-zoom button{width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:color-mix(in srgb, var(--surface-2) 88%, transparent); color:var(--text-2); border-radius:var(--radius-sm); cursor:pointer; font-size:1rem; line-height:1; font-family:inherit; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);} .emf-zoom button:hover{color:var(--text-1); background:var(--fill-active); border-color:var(--border-strong);} .emf-zoom button:disabled{opacity:.4; cursor:default;} .emf-hint{position:absolute; left:14px; bottom:9px; font-size:.625rem; color:var(--text-3); pointer-events:none; z-index:2;} @media (max-width:640px){ .emf-bar{gap:8px 12px;} .emf-l{display:none;} } /* «развернуть» в шапке График|Кластеры — уводим вправо */ .ws-chart-ph .v4-expand{margin-left:auto;} /* модальный хост графика — зеркалит .v4-ws .chart-host (toolbar сверху, plot тянется) */ .syn-chart-host{flex:1; min-height:0; display:flex; flex-direction:column;} .syn-chart-host .tc-plot{flex:1; min-height:200px; height:auto;} .syn-chart-host > .tc-head, .syn-chart-host > .tc-toolbar, .syn-chart-host > .tc-readout, .syn-chart-host > .tc-cmp-legend, .syn-chart-host > .tc-mk-note{padding-inline:16px;} .syn-chart-host > .tc-head{padding-top:10px;} /* модальный хост кластеров — граф (SVG) тянется на всю площадь */ .syn-clu-host{flex:1; min-height:0; position:relative; display:flex; flex-direction:column; overflow:hidden;} /* Абсолютный формат времени (): колонка времени «.tm» по умолчанию 48px под «8ч» — расширяем под «21.06 14:30», иначе ломается сетка строк. Только geometry. */ [data-timefmt="abs"] .w3-feedrow{ grid-template-columns:92px 26px minmax(60px,auto) minmax(0,1fr) 104px 26px; } [data-timefmt="abs"] .v4-mini .tm{ width:auto; min-width:80px; } @media (max-width:880px){ [data-timefmt="abs"] .w3-feedrow{ grid-template-columns:88px 26px minmax(56px,auto) minmax(0,1fr) 96px 24px; } } /* Переключатель формата времени — компактная кнопка В РЯДУ ФИЛЬТРОВ (иконка-часы + «отн.»/«дата»), по высоте как .v4-dd-btn (28px). Состояние .on = абсолютный формат (акцент). */ .v4-tf{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 9px; flex:0 0 auto; color:var(--text-2); border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; font-size:.75rem; line-height:1; cursor:pointer; white-space:nowrap; transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .v4-tf:hover{color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover);} .v4-tf .fic{width:13px; height:13px; opacity:.75; display:inline-flex; flex:0 0 auto;} .v4-tf .fic svg{width:13px; height:13px;} .v4-tf.on{color:var(--accent); border-color:var(--accent);} .v4-tf.on .fic{opacity:1;} .v4-tf .tf-lb{font-variant-numeric:tabular-nums;} /* Фикс «зажёвывания» селектора при коротком списке: .w3-panel клипит overflow:hidden (карточка), из-за чего дропдаун фильтра в КОРОТКОЙ токен-ленте обрезался. Список крутит общий скролл колонки (.ws-feed-list уже overflow:visible), так что панели можно разрешить overflow → попап виден. */ .v4-ws .ws-feed{overflow:visible;} /* HL-лента: под-фильтр категорий (Все/Киты/Small-cap/Фреши) — пилюли, активная красится своим --c [P1 2026-07-06] */ .hl-subfilter{display:flex; gap:6px; flex-wrap:wrap; padding:8px 4px 10px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); margin-bottom:4px;} .hl-fchip{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; cursor:pointer; font-size:.74rem; line-height:1; background:var(--surface-2,rgba(255,255,255,.03)); color:var(--text-3,#8B919C); border:1px solid var(--border,rgba(255,255,255,.08)); transition:color .12s,border-color .12s,background .12s;} .hl-fchip b{font-weight:600; opacity:.8;} .hl-fchip .ic svg, .hl-fchip svg{width:13px; height:13px;} .hl-fchip:hover{color:var(--text-1,#E6E8EB); border-color:var(--c,var(--accent));} .hl-fchip.is-on{color:var(--c,var(--accent)); border-color:var(--c,var(--accent)); background:color-mix(in srgb, var(--c,var(--accent)) 12%, transparent);} /* HL coin-страница: тонкая строка рыночного контекста перпа (фандинг/OI/24ч), из ohlcv_hl.ctx [P2 2026-07-06] */ .hl-mktctx{display:flex; flex-wrap:wrap; gap:14px; padding:2px 2px 9px; font-size:.72rem; color:var(--text-3,#8B919C);} .hl-mktctx:empty{display:none;} .hl-mktctx b{font-family:var(--font-mono,ui-monospace,monospace); font-weight:600; color:var(--text-2,#c8cdd6);} /* market-context now lives in the chart-panel header (.ws-chart-ph), left of the expand button: single row, no own padding (header supplies it), truncates rather than growing the header. */ .ws-chart-ph .hl-mktctx{flex:1 1 auto; min-width:0; padding:0; gap:10px 16px; flex-wrap:nowrap; overflow:hidden;} .ws-chart-ph .hl-mktctx > span{white-space:nowrap;} /* ═══════════ HyperLiquid dashboard (#view=hl) — premium redesign ═══════════ Rebuilt 2026-07-07 as a faithful mirror of the .v4-market skeleton: hero feed (full height, 2-row filter header) + two always-visible infographics stacked in the centre (LONG/SHORT balance, then signal accuracy) + a full-height tabbed reference panel on the right. Generous rows, mono right-aligned values, category dots not bars, accent-highlighted rank-1. Whole doc never scrolls; only .v4-scroll inner regions do. */ .v4-hl{display:grid; height:100%; gap:12px; grid-template-columns:minmax(0,1.62fr) minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) var(--hl-act-h,208px); grid-template-areas: "feed ls side" "feed act side";} .v4-hl .a-feed{grid-area:feed;} .v4-hl .a-ls{grid-area:ls;} .v4-hl .a-act{grid-area:act;} .v4-hl .a-side{grid-area:side; display:flex; flex-direction:column; min-height:0;} .v4-hl > section{min-width:0; min-height:0;} /* ── feed: single-row filter header (Сторона/Тип/Объём dd + поиск, sort right) ── */ .v4-hl .a-feed > .w3-ph.a-feed-hd{flex-direction:column; align-items:stretch; flex-wrap:nowrap; row-gap:8px;} /* match the Market feed header height exactly (no padding-block, 8px gap) */ .v4-hl .afh-modes{align-items:center; gap:4px;} .hl-search{display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 7px; flex:0 1 auto; min-width:0; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-3);} .hl-search:focus-within{border-color:var(--border-hover); color:var(--text-2);} .hl-search .ic{width:14px; height:14px; flex:0 0 auto;} .hl-search input{width:48px; min-width:0; background:transparent; border:0; outline:0; box-shadow:none; color:var(--text-1); font-family:var(--font-sans); font-size:.8rem;} .hl-search input:focus-visible{box-shadow:none; outline:none;} /* kill the global :focus-visible glow ring; no stretch */ /* compact filter dropdowns — no wasted space for short labels: drop the funnel glyph, tighten padding, and let the popup shrink to its (short) options. Popup opens INSIDE the wide panel. */ .v4-hl .a-feed .v4-dd-btn{padding:0 7px; gap:3px;} .v4-hl .a-feed .v4-dd-btn .fic{display:none;} .v4-hl .a-feed .v4-sort button{padding:0 6px;} /* row 1 (afh-modes) = mode selector (left) + Время/Сумма sort (right); row 2 (afh-filters) = dropdowns + search */ .v4-hl .afh-filters{align-items:center; gap:5px;} .v4-hl .a-feed .afh-modes > .v4-sort[data-hlgrp="sort"]{margin-left:auto;} /* sort pushed right; mode stays left */ /* «Ликвидации» mode: the signal-only controls (Тип bucket dd + time/usd sort) don't apply → hide them */ .v4-hl[data-hlmode="liq"] .a-feed [data-dd="hl:bucket"], .v4-hl[data-hlmode="liq"] .a-feed .afh-modes > .v4-sort[data-hlgrp="sort"]{display:none;} /* option rows: no empty checkmark gutter for short single-select options — drop the (invisible) check placeholder and mark the selected row with the accent colour instead. */ .v4-hl .a-feed .v4-dd-opt{gap:6px; padding:0 10px;} .v4-hl .a-feed .v4-dd-opt .ck{display:none;} .v4-hl .a-feed .v4-dd-opt.on{color:var(--accent);} .v4-hl .a-feed .v4-dd-pop{left:0; right:auto; min-width:auto;} /* pinned-coin filter chips (feed-header row 2): the resolver pins coins here, each removable via ×; «Очистить» clears all when more than one is pinned. Reads as active accent-tinted filter tokens. */ .hl-pins{display:flex; flex-wrap:wrap; align-items:center; gap:6px;} .hl-pins.empty{display:none;} .hl-pin{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 4px 0 7px; line-height:1; border-radius:999px; font-size:.75rem; font-weight:600; color:var(--cat-hl); background:color-mix(in srgb, var(--cat-hl) 13%, transparent); border:1px solid color-mix(in srgb, var(--cat-hl) 30%, transparent);} .hl-pin .lg{width:16px; height:16px; border-radius:999px; overflow:hidden; flex:0 0 auto; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; color:var(--text-3);} .hl-pin .lg img{width:100%; height:100%; object-fit:cover;} .hl-pin .sym{color:var(--text-1);} .hl-pin .x{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--text-3); font-size:.95rem; line-height:1; cursor:pointer; transition:color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);} .hl-pin .x:hover{color:var(--text-1); background:color-mix(in srgb, var(--cat-hl) 22%, transparent);} .hl-pin-clr{height:24px; padding:0 8px; border:0; background:transparent; cursor:pointer; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); transition:color var(--dur-2) var(--ease-std);} .hl-pin-clr:hover{color:var(--text-1);} /* Лента «Рынка» переиспользует HL-компонент омни-поиска/пинов (.hl-omni/.hl-pin), но: (1) пины перекрашены в единый teal-акцент (single-accent, DESIGN_SPEC) вместо HL-синего --cat-hl; (2) омни и чипсы видны только на лентах «События»/«Лучшие» (data-tick=1), у «Кошельков» свой «Токен»-дропдаун. */ #vw-market .hl-pin{color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); border-color:color-mix(in srgb, var(--accent) 30%, transparent);} #vw-market .hl-pin .sym{color:var(--text-1);} #vw-market .hl-pin .x:hover{background:color-mix(in srgb, var(--accent) 22%, transparent);} .v4-market .a-feed-hd[data-tick="0"] .mkt-omni, .v4-market .a-feed-hd[data-tick="0"] #mkt-pins{display:none;} /* feed rows: 5-col grid (no empty 6th ec-tx track); height/font match the Market feed (--w3-row 48px, .875rem) */ .v4-hl .w3-feedrow{grid-template-columns:48px 26px minmax(60px,auto) minmax(0,1fr) auto; gap:13px;} /* абсолютный формат времени: колонка «.tm» 48px рассчитана на «2ч» и НЕ вмещает «09.07 14:30» → время заползало под лого. Расширяем ту же 5-колоночную сетку под дату, как у Market-ленты (см. L1533). */ [data-timefmt="abs"] .v4-hl .w3-feedrow{grid-template-columns:92px 26px minmax(60px,auto) minmax(0,1fr) auto;} @media (max-width:880px){ [data-timefmt="abs"] .v4-hl .w3-feedrow{grid-template-columns:88px 26px minmax(56px,auto) minmax(0,1fr) auto;} } .v4-hl .w3-feedrow .ph{gap:8px;} .v4-hl .w3-feedrow .ph .pt{color:var(--text-2);} .hl-cc{display:inline-flex; gap:5px; flex-wrap:nowrap; flex:0 0 auto; overflow:hidden;} .hl-cchip{font-family:var(--font-mono); font-size:.64rem; color:var(--text-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1px 6px; line-height:1.4; white-space:nowrap;} .hl-foot-n{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3);} .hl-foot-n b{color:var(--text-1); font-weight:600;} /* ── «Ликвидации» feed mode: near-liq rows with a distance-to-liquidation RISK meter ── «Шкала до ликвидации»: fill grows & reddens as the position nears forced liquidation (risk = (5% − dist)/5%), so the most imminent read boldest — mirrors the HLBot TWAP bar. */ .hl-liqrow{display:grid; grid-template-columns:26px minmax(0,1fr) 66px; gap:12px; align-items:center; padding:9px var(--w3-pad); cursor:pointer; text-decoration:none; color:var(--text-2); border-bottom:1px solid rgba(255,255,255,.05); transition:background-color var(--dur-2) var(--ease-std);} .hl-liqrow:hover{background:var(--fill-hover);} .hl-liqrow .lg{width:26px; height:26px; border-radius:999px; overflow:hidden; background:var(--surface-3); flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:.55rem; color:var(--text-3);} .hl-liqrow .lg img{width:100%; height:100%; object-fit:cover;} .hl-liqrow .ld{min-width:0; display:flex; flex-direction:column; gap:6px;} .hl-liqrow .ld .s{display:flex; align-items:center; gap:7px; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hl-liqrow .ld .s .cn{color:var(--text-1); font-weight:600;} .hl-liqrow .ld .s .mono{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis;} .hl-liqbar{position:relative; height:7px; border-radius:5px; background:var(--surface-3); overflow:hidden;} .hl-liqbar i{position:absolute; left:0; top:0; height:100%; min-width:2px; border-radius:5px; transition:width var(--dur-2) var(--ease-std);} .hl-liqrow .r{display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right;} .hl-liqrow .r .v{font-family:var(--font-mono); font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums;} .hl-liqrow .r .c{font-family:var(--font-mono); font-size:.58rem; color:var(--text-3);} /* ── LONG/SHORT diverging bars (full width → ratio always legible) ── */ .hl-lslist{display:flex; flex-direction:column; padding:3px 0;} .hl-lsrow{display:grid; grid-template-columns:20px 46px minmax(0,1fr) 52px; gap:10px; align-items:center; height:34px; padding:0 var(--w3-pad); cursor:pointer; text-decoration:none; transition:background-color var(--dur-2) var(--ease-std);} .hl-lsrow:hover{background:var(--fill-hover);} .hl-lsrow .lg{width:20px; height:20px; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.5rem; color:var(--text-3); flex:0 0 auto;} .hl-lsrow .lg img{width:100%; height:100%; object-fit:cover;} .hl-lsrow .sym{font-weight:600; font-size:.82rem; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .hl-lsbar{display:flex; height:11px; border-radius:6px; overflow:hidden; background:var(--surface-3);} .hl-lsbar .l{background:var(--up-fill); height:100%;} .hl-lsbar .s{background:var(--down-fill); height:100%;} .hl-lsrow .num{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); text-align:right;} .hl-lsrow .num b{font-weight:600;} /* ── activity: daily signal area chart (center-bottom; replaces win-rate) ── */ .hl-act-wrap{flex:1; min-height:0; display:flex; flex-direction:column; gap:5px; padding:9px var(--w3-pad) 8px;} .hl-act-head{display:flex; align-items:baseline; justify-content:space-between; font-family:var(--font-mono); font-size:.66rem; color:var(--text-3);} .hl-act-head b{color:var(--text-1); font-weight:600;} .hl-actchart{flex:1; min-height:0; width:100%; display:block; overflow:visible;} .hl-actchart .ln{fill:none; stroke:var(--cat-hl); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round;} .hl-actchart .gl{stroke:var(--border); stroke-width:1; vector-effect:non-scaling-stroke; stroke-opacity:.55;} .hl-actchart .glx{stop-color:var(--cat-hl);} .hl-actchart .dt{fill:var(--cat-hl); stroke:var(--surface-1); stroke-width:1;} .hl-actchart .hit{fill:transparent;} .hl-actchart .hit:hover{fill:color-mix(in srgb, var(--cat-hl) 11%, transparent);} .hl-act-x{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.6rem; color:var(--text-disabled);} /* ── right reference panel ── */ .hl-sidetabs{flex:1 1 100%; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; scrollbar-width:none;} .hl-sidetabs::-webkit-scrollbar{display:none;} .hl-sidetabs button{padding:0 10px; flex:0 0 auto;} .v4-hl .a-side-body{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;} /* wallet monogram + status badges (leaderboard / fresh) */ .hl-wl{font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; color:var(--text-3); background:var(--surface-3);} .v4-hl .t3 .id .s{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.9rem; white-space:nowrap;} .v4-hl .t3 .id .m{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hl-bdg{font-family:var(--font-mono); font-size:.6rem; font-weight:600; padding:1px 5px; border-radius:3px; text-transform:uppercase; letter-spacing:.02em; flex:0 0 auto;} .hl-bdg.st{color:var(--cat-hl); background:color-mix(in srgb, var(--cat-hl) 18%, transparent);} .hl-bdg.al{color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent);} .hl-bdg.hu{color:var(--up); background:color-mix(in srgb, var(--up) 16%, transparent);} .hl-bdg.fr{color:var(--cat-fresh); background:color-mix(in srgb, var(--cat-fresh) 18%, transparent);} /* HL coin resolver dropdown — feed search resolves a coin & navigates (#hl=COIN), like the global omnibox */ .hl-omni{position:relative; display:inline-flex; flex:0 1 auto; min-width:0;} .hl-omni-pop{position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:210px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--elev-2, 0 8px 24px rgba(0,0,0,.45)); padding:6px; display:none; max-height:340px; overflow:auto;} .hl-omni.open .hl-omni-pop{display:block;} .hl-omni-pop .opt{display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:var(--radius-sm); cursor:pointer; font-size:.8125rem; color:var(--text-2); white-space:nowrap;} .hl-omni-pop .opt .lg{width:20px; height:20px; border-radius:999px; overflow:hidden; flex:0 0 auto; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:600; color:var(--text-2);} .hl-omni-pop .opt .lg img{width:100%; height:100%; object-fit:cover;} .hl-omni-pop .opt .sym{color:var(--text-1); font-weight:600;} .hl-omni-pop .opt .meta{margin-left:auto; padding-left:14px; color:var(--text-3); font-family:var(--font-mono); font-size:.72rem;} .hl-omni-pop .opt[aria-selected="true"], .hl-omni-pop .opt:hover{background:var(--fill-hover); color:var(--text-1);} .hl-omni-pop .opt[aria-selected="true"]{box-shadow:inset 2px 0 0 var(--accent);} .hl-omni-pop .opt[aria-disabled="true"]{color:var(--text-3); cursor:default;} /* HL wallet profile: full address (mono, wraps) + copy button; TWAP progress mini-bar */ .ws-band .idn .s.hlw-ids{align-items:center; flex-wrap:wrap; gap:8px 10px;} .hlw-full{font-family:var(--font-mono); font-size:1rem; font-weight:500; color:var(--text-1); word-break:break-all; line-height:1.25;} .hl-mini-bar{display:inline-block; width:64px; height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin-left:7px; vertical-align:middle;} .hl-mini-bar i{display:block; height:100%;} /* positions / liquidation rows (t3-shaped) */ .hl-plist{display:flex; flex-direction:column;} .hl-prow{position:relative; display:flex; align-items:center; gap:12px; padding:11px var(--w3-pad); border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; text-decoration:none; color:var(--text-2); transition:background-color var(--dur-2) var(--ease-std);} .hl-prow:hover{background:var(--fill-hover);} .hl-prow .lg{width:30px; height:30px; border-radius:999px; overflow:hidden; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:600; color:var(--text-2); flex:0 0 auto;} .hl-prow .lg img{width:100%; height:100%; object-fit:cover;} .hl-prow .id{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; overflow:hidden;} .hl-prow .id .s{display:flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; color:var(--text-1); line-height:1; white-space:nowrap;} .hl-prow .id .m{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hl-side{font-family:var(--font-mono); font-size:.62rem; font-weight:600; padding:1px 6px; border-radius:3px; letter-spacing:.02em; flex:0 0 auto;} .hl-side.l{color:var(--up); background:color-mix(in srgb, var(--up) 15%, transparent);} .hl-side.s{color:var(--down); background:color-mix(in srgb, var(--down) 15%, transparent);} .hl-prow .r{margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:3px; flex:0 0 auto; padding-left:10px;} .hl-prow .r .v{font-family:var(--font-mono); font-size:.9rem; color:var(--text-1); font-variant-numeric:tabular-nums;} .hl-prow .r .c{font-family:var(--font-mono); font-size:.66rem; color:var(--text-3);} .hl-prow .r .c.up{color:var(--up);} .hl-prow .r .c.down{color:var(--down);} /* signal-mix list */ .hl-tylist{padding:6px 0;} .v4-hl .struct-row{height:28px; padding:0 var(--w3-pad);} .v4-hl .struct-row .sn{font-size:.78rem;} .v4-hl .struct-row .sv{font-size:.72rem;} /* accessible focus for keyboard nav on the link-rows */ .v4-hl [role="link"]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--radius-sm);} @media(max-width:1120px){ .v4-hl{display:block; height:auto; overflow:visible;} .v4-hl > section{margin-bottom:12px; height:auto; max-height:78vh;} .v4-hl .a-act{height:260px; max-height:260px;} } /* [hidden] must always win over id-specific display rules (e.g. #vw-summary{display:flex}) so an inactive view never stacks in flow and pushes a later view off-screen — 2026-07-06 */ .v4-vw[hidden]{display:none !important;}