/* ============================================================================
WDAO skin для скринера — версия /v2.
Живёт параллельно со старым UI: / остаётся на style.css, /v2 — на этом файле.
Ни один селектор отсюда не применяется к старым страницам.
Токены — 1:1 из боевой дизайн-системы MiniApp
(miniapp/src/variants/final/palette.ts): тёмная зелёно-подкрашенная и
светлая кремовая. Три состояния темы, как в приложении: системная (ничего
не проставлено), явная тёмная, явная светлая.
========================================================================= */
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ptmono-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ptmono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ptmono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ptmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/rubik-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/rubik-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/rubik-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/rubik-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* --- 1. Токены ---------------------------------------------------------- */
:root{
/* Кегль служебного текста: подсказок, пустых состояний, статусов.
⚠️ Это КЛАСС дефекта, а не отдельные подписи. Заголовок карточки
(.detail h2) имеет 10px, а пояснения рядом жили кто как: .legend-hint
11px, .tg-bind-slot 12px, .loading вовсе без размера — наследовал 13px
у body. То есть служебный текст был КРУПНЕЕ того, что он поясняет, на
трёх классах из четырёх и на всех ширинах, а не только на мобильном.
Размер задаётся здесь ОДИН раз; интерактивные элементы внутри (кнопки)
свой кегль сохраняют — кнопка не подпись, и мельчить её нельзя. */
--fs-hint:10px;
--bg:#F4F0E5; --surface:#FBF7EC; --surface-2:#EFEAD9; --surface-float:rgba(244,240,229,.72);
--border:#E0D7C0; --border-soft:#ECE3CA;
--text:#16221C; --text-2:#5C685F; --text-3:#9A9985;
/* Стрелка селекта: тот же шеврон, что у иконок, цветом приглушённого текста.
Отдельная переменная нужна потому, что background-image не понимает
currentColor — иначе стрелка была бы одного цвета в обеих темах. */
--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9985' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9C18 9 13.58 15 12 15C10.42 15 6 9 6 9'/%3E%3C/svg%3E");
--accent:#1AA678; --accent-deep:#0F7A57; --hero-deep:#074A35;
--accent-soft:rgba(26,166,120,.13); --accent-border:rgba(26,166,120,.32);
--accent-glow:rgba(26,166,120,.30); --accent-ink:#FBF7EC;
--orange:#D97706; --red:#DC2626; --blue:#2563EB; --purple:#9333EA;
--orange-soft:rgba(217,119,6,.12);
--red-soft:rgba(220,38,38,.10);
--blue-soft:rgba(37,99,235,.12); --purple-soft:rgba(147,51,234,.12);
--row-hover:#DCE9DC;
--shadow-pop:0 10px 30px rgba(22,34,28,.14);
--logo-plate:#FFFFFF;
color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0A0F0C; --surface:#141A16; --surface-2:#1B221E; --surface-float:rgba(10,15,12,.72);
--border:#222B25; --border-soft:#1A211D;
--text:#E8EFEA; --text-2:#7A8580; --text-3:#525C57;
--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9C18 9 13.58 15 12 15C10.42 15 6 9 6 9'/%3E%3C/svg%3E");
--accent:#22D3A4; --accent-deep:#16a37e; --hero-deep:#0e6e54;
--accent-soft:rgba(34,211,164,.13); --accent-border:rgba(34,211,164,.35);
--accent-glow:rgba(34,211,164,.42); --accent-ink:#06120D;
--orange:#F59E0B; --red:#F87171; --blue:#60A5FA; --purple:#C084FC;
--orange-soft:rgba(245,158,11,.13);
--red-soft:rgba(248,113,113,.12);
--blue-soft:rgba(96,165,250,.13); --purple-soft:rgba(192,132,252,.13);
--row-hover:#1E2E27;
--shadow-pop:0 12px 34px rgba(0,0,0,.5);
--logo-plate:#F6F8FA;
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#0A0F0C; --surface:#141A16; --surface-2:#1B221E; --surface-float:rgba(10,15,12,.72);
--border:#222B25; --border-soft:#1A211D;
--text:#E8EFEA; --text-2:#7A8580; --text-3:#525C57;
--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9C18 9 13.58 15 12 15C10.42 15 6 9 6 9'/%3E%3C/svg%3E");
--accent:#22D3A4; --accent-deep:#16a37e; --hero-deep:#0e6e54;
--accent-soft:rgba(34,211,164,.13); --accent-border:rgba(34,211,164,.35);
--accent-glow:rgba(34,211,164,.42); --accent-ink:#06120D;
--orange:#F59E0B; --red:#F87171; --blue:#60A5FA; --purple:#C084FC;
--orange-soft:rgba(245,158,11,.13);
--red-soft:rgba(248,113,113,.12);
--blue-soft:rgba(96,165,250,.13); --purple-soft:rgba(192,132,252,.13);
--row-hover:#1E2E27;
--shadow-pop:0 12px 34px rgba(0,0,0,.5);
--logo-plate:#F6F8FA;
color-scheme:dark;
}
/* --- 2. База ------------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0}
/* ⚠️ Значение по умолчанию — `auto`, и мобильные Safari/Chrome сами
увеличивают текст внутри широких блоков, считая коэффициент по ширине
блока. Соседние подписи получают РАЗНЫЙ масштаб, и из статики это не
выводится — именно поэтому «кривые шрифты» не воспроизводились на
десктопе. Фиксируем: страница рисуется тем кеглем, который написан. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
background:var(--bg); color:var(--text);
font-family:'Rubik',system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.num,.mono,.px-cell,td.num,th.num{font-family:'PT Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums}
.muted,.dimmed{color:var(--text-2)}
.hidden{display:none !important}
.view-hidden{display:none !important}
section[hidden]{display:none}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px; border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
/* --- 3. Шапка ----------------------------------------------------------- */
/* Режим встраивания (см. static/embed.js): скринер стоит в кадре внутри
нашего MiniApp, где своя шапка уже есть. Две шапки подряд съели бы треть
экрана телефона, поэтому нашу прячем.
Именно `display:none`, а не удаление разметки: остальной код продолжает
находить #theme-btn, #rotate-btn, #statusbar и #tg-login-slot. Убери мы
узлы — половина скриптов упала бы на первом же обращении к null.
--embed-pad-bottom приходит сообщением от приложения: его плавающая
навигация висит поверх нижнего края кадра, и без запаса последняя строка
таблицы оказывается под ней. Сколько именно она занимает, знает только
приложение, поэтому число не зашито здесь. */
:root{--embed-pad-bottom:0px}
.embed .topbar{display:none}
.embed body.screener-page .main-col{padding-bottom:var(--embed-pad-bottom)}
.embed body:not(.screener-page){padding-bottom:var(--embed-pad-bottom)}
.topbar{
position:sticky; top:0; z-index:40;
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:10px 20px;
background:var(--surface-float); backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}
/* Бренд «W DAO | Screener» — типографика MiniApp: жирное имя, тонкий
разделитель цветом приглушённого текста, второе слово акцентом. */
.brand{
font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--text);
white-space:nowrap;
}
.brand:hover{text-decoration:none}
.brand .sep{color:var(--text-3); font-weight:400; margin:0 6px}
.brand .second{color:var(--accent)}
.crumb{color:var(--text-2); font-size:12.5px}
.crumb .muted{margin-left:6px}
.updated,.statusbar{
font-family:'PT Mono',monospace; font-size:11px; color:var(--text-3);
}
/* Состояние потока одной плашкой — как индикатор здоровья в MiniApp:
пульсирующая точка + моноширинное время. Пульс отключается, когда движок
отвалился: условие берём из уже существующего баннера через :has(), чтобы
не трогать логику screener.js (тот же приём, что у рельса фильтров). */
.stream-pill{
display:inline-flex; align-items:center; gap:7px; margin-left:auto;
padding:5px 11px; border:1px solid var(--border); border-radius:999px;
background:var(--surface); white-space:nowrap;
}
.stream-pill .updated{margin-left:0}
.stream-pill .statusbar:empty{display:none}
.stream-dot{
width:6px; height:6px; border-radius:50%; flex:none;
background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
animation:stream-pulse 2.4s ease-in-out infinite;
}
@keyframes stream-pulse{
0%,100%{opacity:1}
50%{opacity:.45}
}
@media (prefers-reduced-motion:reduce){
.stream-dot{animation:none}
}
body:has(#offline-banner:not(.hidden)) .stream-dot{
background:var(--red); box-shadow:0 0 0 3px var(--red-soft); animation:none;
}
/* На телефоне плашки нет: место дороже, а обрыв потока и так показывает
баннер во всю ширину (решение владельца, макет «правка 3»). */
@media (max-width:760px){
.stream-pill{display:none}
}
.topbar-tools{display:flex; align-items:center; gap:8px; margin-left:auto}
/* Вход через Telegram (tglogin.js). С 2026-09-06 шапка держит ТОЛЬКО аватар —
имя, @username и выход переехали в лист профиля по тапу, как в MiniApp.
Гостю на десктопе показывается кнопка, на телефоне — кружок и две строки.
Кнопка входа носит СВОЙ класс: общий .btn держит «Фильтры», «Выбрать все» и
пагинацию, и перекрасить его значило бы перекрасить полстраницы. */
.tg-login-slot{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-hint); min-height:36px}
/* Аватар — круг 36px, как в MiniApp. Фото, если Telegram его отдал; иначе
инициалы на фирменном градиенте со свечением. */
.tg-ava-btn{
width:36px; height:36px; padding:0; flex:none; cursor:pointer;
border:0; border-radius:50%; background:transparent; line-height:0;
transition:transform .12s ease;
}
.tg-ava-btn:active{transform:scale(.95)}
.tg-login-slot .tg-avatar{
width:36px; height:36px; border-radius:50%; object-fit:cover;
background:var(--surface-2); flex:none; display:block;
}
.tg-login-slot .tg-initials{
width:36px; height:36px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700; letter-spacing:.02em;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color:var(--accent-ink); flex:none;
box-shadow:0 5px 14px -4px var(--accent-glow);
}
/* Гость: тот же круг, но нейтральный — это приглашение, а не личность. */
.tg-login-slot .tg-initials-guest{
background:var(--surface-2); color:var(--text-3);
border:1px solid var(--border); box-shadow:none;
}
.tg-login-slot .tg-initials-guest svg{width:16px; height:16px}
/* Две строки рядом с аватаром — только на телефоне, где бренд из шапки убран. */
.tg-id-lines{display:none; min-width:0; flex-direction:column; line-height:1.25}
.tg-id-eyebrow{
font-size:9px; text-transform:uppercase; letter-spacing:.18em;
color:var(--text-3); font-weight:600; white-space:nowrap;
}
.tg-id-name{
font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--text);
max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Кнопка входа — токены W DAO: фон accent, текст accentInk, скругление 14px. */
.tg-login-btn{
display:inline-flex; align-items:center; gap:6px;
height:36px; padding:0 14px; border:0; border-radius:14px;
background:var(--accent); color:var(--accent-ink);
font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
transition:transform .12s ease, filter .12s ease;
}
.tg-login-btn:hover{filter:brightness(1.06)}
.tg-login-btn:active{transform:scale(.97)}
.tg-login-btn svg{width:15px; height:15px}
.tg-login-slot .tg-wait code{font-family:var(--mono, ui-monospace, monospace); font-size:12px; letter-spacing:.06em}
/* Компактный слот в карточке «Кастомные пары»: строка-пояснение и маленькая
кнопка. Не копия шапки — вход там уже есть; здесь важно объяснить, ПОЧЕМУ
блок пустой, а не предложить войти второй раз. */
.tg-bind-slot{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap}
.tg-bind-hint{font-size:12px; color:var(--text-2)}
.tg-login-btn.tg-login-mini{height:28px; padding:0 11px; border-radius:10px; font-size:12px}
.tg-login-btn.tg-login-mini svg{width:13px; height:13px}
/* Порядок в шапке. Слот — прямой потомок .topbar (а НЕ часть .topbar-tools:
внутри правой группы он был заперт между кнопками, и никакой margin его
оттуда не вытаскивал). На десктопе order отправляет его в конец строки,
на телефоне — в самое начало. */
.topbar > .tg-login-slot{order:3}
@media (max-width:760px){
/* Телефон: слот встаёт первым и занимает свободное место; бренд уезжает в
его надстрочник, кнопка входа схлопывается в кружок — макет «правка 3»,
вариант А. Служебные подписи («сессия не найдена…») здесь не показываем:
в узкой строке они наезжали на имя. */
.topbar > .brand{display:none}
.topbar > .tg-login-slot{order:-1; margin-right:auto; min-width:0; flex:1 1 auto}
.tg-id-lines{display:flex}
/* На странице пары надписи слота не показываем: там уже есть крошки с
названием пары, и они важнее бренда. Вместе слот (161px) и крошки (185px)
не влезали в 390 — кнопки переносились на вторую строку, шапка вырастала
до 101px. Условие берём из наличия крошек, чтобы не заводить второй
класс на шаблон. */
.topbar:has(.crumb) .tg-id-lines{display:none}
/* Шапка страницы пары обязана быть в ОДНУ строку. Считаем на 390: кружок 36
+ крошки 185 + кнопки 123 = 344, плюс отступы 40 и просветы 28 — 412, и
кнопки уезжали вниз. Ужимаем отступы и разрешаем крошкам сжиматься с
многоточием: название пары бывает и длиннее «READY KuCoin ↔ KuCoin(Spot)». */
.topbar{padding:10px 12px; gap:8px; flex-wrap:nowrap}
.topbar .crumb{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar-tools{flex:none}
/* ⚠️ Прячем ТОЛЬКО в шапке. Правило написано для неё: там кнопку заменяет
кружок с «?» и две строки, и вторая кнопка отъедала бы место у крумбов.
Без ограничения слотом оно гасило и компактную кнопку в карточке
«Кастомные пары» — там оставалась строка-пояснение без способа войти. */
.tg-login-slot .tg-login-btn,
.tg-login-slot .tg-login-alt,
.tg-login-slot .tg-wait,
.tg-login-slot .hint{display:none}
}
@media (min-width:761px){
/* Десктоп: у вошедшего рядом с аватаром ничего не дублируем — бренд уже
слева, имя открывается тапом. */
.tg-id-lines{display:none}
.tg-ava-guest{display:none}
}
/* --- лист профиля (шаблон InfoSheet из MiniApp) --- */
.sheet-overlay{
position:fixed; inset:0; z-index:60;
background:rgba(0,0,0,.6);
display:flex; align-items:flex-end; justify-content:center;
animation:sheet-fade .16s ease-out;
}
.sheet-overlay .sheet{
width:100%; max-width:420px;
background:var(--surface); border:1px solid var(--border); border-bottom:0;
border-radius:18px 18px 0 0; padding:16px 18px;
padding-bottom:calc(env(safe-area-inset-bottom) + 20px);
box-shadow:var(--shadow-pop);
animation:sheet-rise .2s cubic-bezier(.22,.61,.36,1);
}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}
@keyframes sheet-rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
.sheet-overlay,.sheet-overlay .sheet{animation:none}
}
.sheet-grab{width:38px; height:4px; border-radius:99px; background:var(--border); margin:0 auto 14px}
.sheet-id{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.sheet-ava{line-height:0; flex:none}
.sheet-ava .tg-avatar,.sheet-ava .tg-initials{width:46px; height:46px; font-size:16px}
.sheet-id-text{display:flex; flex-direction:column; min-width:0}
.sheet-name{font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--text)}
.sheet-sub{font-family:'PT Mono',monospace; font-size:11px; color:var(--text-3)}
.sheet-note{margin:0 0 14px; font-size:12.5px; color:var(--text-2)}
.sheet-logout{
display:block; width:100%; padding:11px; cursor:pointer;
border:1px solid var(--border); border-radius:14px;
background:var(--bg); color:var(--text-2);
font:inherit; font-size:13px; font-weight:600;
transition:transform .12s ease, color .12s ease, border-color .12s ease;
}
.sheet-logout:hover{color:var(--text); border-color:var(--accent-border)}
.sheet-logout:active{transform:scale(.98)}
/* Кнопки шапки — размер и скругление как у HeaderIcon в MiniApp: 36×36,
скругление 14px, фон surface, рамка border, приглушённый текст. */
.icon-btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
height:36px; min-width:36px; padding:0 10px;
border:1px solid var(--border); border-radius:14px;
background:var(--surface); color:var(--text-2);
font:inherit; font-size:12px; cursor:pointer;
transition:transform .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:active{transform:scale(.95)}
.icon-btn:hover{color:var(--text); border-color:var(--accent-border)}
.icon-btn.on{background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent)}
.theme-btn .theme-label{font-size:11px}
.offline-banner{
padding:7px 0; text-align:center; font-size:12.5px;
color:var(--red); background:var(--red-soft);
border-bottom:1px solid var(--border);
}
/* --- 4. Каркас страницы ------------------------------------------------- */
.content{max-width:1680px; margin:0 auto; padding:16px 20px 40px}
/* Раскладка ЯВНАЯ (grid-column/row), а не через order: панель фильтров живёт
в рельсе, а её кнопка — в верхней полосе, и на мобиле поток обязан идти
«полоса → панель → таблица». DOM-порядок именно такой, поэтому в одну
колонку всё складывается само. */
.screener-shell{display:grid; grid-template-columns:236px minmax(0,1fr); gap:16px; align-items:start}
.filters-tier1{grid-column:2; grid-row:1}
.rail{
grid-column:1; grid-row:1 / span 2;
position:sticky; top:62px;
display:flex; flex-direction:column; gap:14px;
max-height:calc(100vh - 78px); overflow-y:auto;
padding:14px; background:var(--surface);
border:1px solid var(--border); border-radius:14px;
}
.main-col{grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:12px; min-width:0}
.sec-label{
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
color:var(--text-3);
}
/* --- 5. Контролы -------------------------------------------------------- */
input[type=number],input[type=text],input:not([type]),select{
background:var(--surface-2); color:var(--text);
border:1px solid var(--border); border-radius:9px;
padding:6px 9px; font:inherit; font-size:12.5px;
font-family:'PT Mono',monospace; font-variant-numeric:tabular-nums;
}
/* ⚠️ Своя стрелка вместо системной. Нативная рисуется браузером вплотную к
рамке и на скруглении смотрится прижатой к краю (замечание владельца
2026-08-28: «кнопки в селекторах буквально стоят на краю»). Правый отступ
даёт ей место, а сама она — та же иконка chevron-down, что и в остальном
интерфейсе, и красится текущим цветом текста. */
select{
font-family:'Rubik',sans-serif; cursor:pointer;
-webkit-appearance:none; appearance:none;
padding-right:26px;
background-image:var(--select-chevron);
background-repeat:no-repeat;
background-position:right 9px center;
background-size:11px 11px;
}
/* Стрелка — маска цветом текста: одна и та же в обеих темах. */
select::-ms-expand{display:none}
input:focus,select:focus{outline:none; border-color:var(--accent-border); box-shadow:0 0 0 3px var(--accent-glow)}
input::placeholder{color:var(--text-3); font-family:'Rubik',sans-serif}
input[type=checkbox]{accent-color:var(--accent); width:15px; height:15px}
label{font-size:12.5px}
.btn{
display:inline-flex; align-items:center; gap:6px;
background:var(--accent); color:var(--accent-ink);
border:1px solid transparent; border-radius:9px;
padding:7px 13px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--accent-deep)}
.btn:disabled{opacity:.4; cursor:default}
.btn-ghost{
background:var(--surface); color:var(--text-2); border-color:var(--border); font-weight:500;
}
.btn-ghost:hover{background:var(--surface-2); color:var(--text); border-color:var(--accent-border)}
.btn-mini{padding:4px 9px; font-size:11px; border-radius:8px}
.btn-del,.btn.danger{background:transparent; border-color:transparent; color:var(--red); font-weight:500}
.btn-del:hover,.btn.danger:hover{background:var(--red-soft)}
/* Сегментированные переключатели (режим, вид графика, таймфрейм). */
.mode-toggle{
display:inline-flex; gap:3px; padding:3px; margin:0;
border:1px solid var(--border); border-radius:11px; background:var(--surface);
}
.mode-toggle label{
padding:6px 13px; border-radius:8px; cursor:pointer; user-select:none;
color:var(--text-2); font-size:12.5px; white-space:nowrap;
}
.mode-toggle label:hover{color:var(--text)}
.mode-toggle input{display:none}
.mode-toggle label:has(input:checked){
background:var(--accent-soft); color:var(--accent); font-weight:600;
box-shadow:inset 0 0 0 1px var(--accent-border);
}
.tf-toggle label{padding:4px 8px; font-size:11px; font-family:'PT Mono',monospace}
/* Чипы фильтров. */
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
display:inline-flex; align-items:center; padding:4px 10px;
border:1px solid var(--border); border-radius:9px;
background:var(--surface-2); color:var(--text-2);
font-size:11.5px; font-family:'PT Mono',monospace;
cursor:pointer; user-select:none;
}
.chip:hover{color:var(--text); border-color:var(--accent-border)}
.chip input{display:none}
.chip:has(input:checked){
background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); font-weight:600;
}
.achip{
display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
background:var(--orange-soft); border:1px solid var(--orange); border-radius:9px;
font-size:11px; color:var(--orange); font-family:'PT Mono',monospace;
}
.achip .achip-x{cursor:pointer; font-weight:700}
.achip .achip-x:hover{color:var(--text)}
.active-chips{display:inline-flex; gap:6px; flex-wrap:wrap}
#fltCount{color:var(--accent); margin-left:4px; font-family:'PT Mono',monospace}
/* --- 6. Панель фильтров ------------------------------------------------- */
.filters{display:contents}
.filters-tier1{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:10px 12px; background:var(--surface);
border:1px solid var(--border); border-radius:14px;
}
.filters-tier1 label{display:inline-flex; align-items:center; gap:6px; color:var(--text-2)}
.filters-tier1 .chk{cursor:pointer}
.filters-tier2{display:flex; flex-direction:column; gap:14px}
.flt-group{display:flex; flex-direction:column; gap:8px}
.flt-group label{display:flex; align-items:center; gap:6px; color:var(--text-2); flex-wrap:wrap}
.flt-group input[type=number]{width:100%; max-width:120px}
.flt-title{
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
color:var(--text-3);
}
.rowcount{
margin-left:auto; font-family:'PT Mono',monospace; font-size:11.5px; color:var(--text-3);
}
.rowcount b{color:var(--text-2); font-weight:400}
/* --- 7. Легенда порогов ------------------------------------------------- */
.legend{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
font-size:11px; color:var(--text-3); padding:0 2px;
}
.legend-chip{display:inline-flex; align-items:center; gap:4px}
.thr-edit{
cursor:text; padding:0 3px; border-radius:5px;
border-bottom:1px dashed currentColor; outline:none;
font-family:'PT Mono',monospace;
}
.thr-edit:focus{background:var(--accent-soft); border-color:transparent}
/* --- 8. Таблица --------------------------------------------------------- */
.table-panel{
width:100%; background:var(--surface);
border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.spreads-scroll{
width:100%; overflow-x:auto; background:transparent;
/* Полозья скрыты: они съедали 10px из content-box, из-за чего радиус шапки
уезжал от радиуса панели, а неоформленный ::-webkit-scrollbar-corner
рисовал серый квадрат внутри скругления. Прокрутка работает как прежде. */
scrollbar-width:none;
}
.spreads-scroll::-webkit-scrollbar{display:none}
table.spreads{
width:100%; min-width:1080px; background:transparent;
border-collapse:separate; border-spacing:0; border:0;
}
/* Шапка прибита (2026-08-24) — но не «просто sticky», это уже не работало.
`overflow-x:auto` у .spreads-scroll по спецификации делает `auto` и по
вертикали: контейнер становится СОБСТВЕННЫМ скроллпортом, и sticky-ячейки
прилипают к верху таблицы, а не к экрану. Убрать горизонтальную прокрутку
нельзя — таблица по контенту раскладывается в ~1320px при 1148 доступных
на экране 1440. Поэтому таблица получает собственную вертикальную
прокрутку (см. блок @media (min-width:901px)) — тем же приёмом, каким уже
живёт рельс фильтров. */
table.spreads th{
padding:9px 10px; text-align:left; white-space:nowrap;
background:var(--surface-2); color:var(--text-3);
font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
border-bottom:1px solid var(--border);
}
table.spreads td{
padding:7px 10px; text-align:left; border-bottom:1px solid var(--border-soft);
font-size:12.5px;
}
table.spreads td.num,table.spreads th.num{text-align:right}
table.spreads tr:last-child td{border-bottom:0}
th.sortable{cursor:pointer; user-select:none}
th.sortable:hover{color:var(--accent)}
th.sortable.sorted{color:var(--text)}
.sort-arrow{color:var(--accent); font-size:8px; margin-left:3px}
.loading{padding:26px; text-align:center; color:var(--text-3)}
/* Строки: заголовок токена (grp) и вложенные пары (member).
⚠️ Фон строки задаётся ЧЕРЕЗ ПЕРЕМЕННУЮ, а не правилами на td. Пара — это
два
(pair-top + pair-bottom), связанные только rowspan-ячейками, и на
правилах уровня td состояния дрались специфичностью: `tr.grp:hover td`
(0,2,2) бил классы строки (0,1,2), и раскраска расходилась у двух строк
одной пары. С переменной выигрывает последнее подходящее объявление на
самом
, и обе строки красятся согласованно. */
table.spreads tbody td{background:var(--row-bg,transparent)}
tr.grp{--row-bg:var(--surface-2)}
/* Наведение красит ОБЕ строки пары: :has() достаёт «снизу вверх», соседний
комбинатор — «сверху вниз».
⚠️ Цвет НЕПРОЗРАЧНЫЙ и ОДИН на все строки (2026-08-25). Полупрозрачная
подсветка ложилась на разные фоны: на сводке (--surface-2) давала дельту в
2-4% и была почти не видна. */
tr.pair-top:hover,tr.pair-bottom:hover,
tr.pair-top:has(+ tr.pair-bottom:hover),
tr.pair-top:hover + tr.pair-bottom{--row-bg:var(--row-hover)}
tr.grp,tr.member{cursor:pointer}
tr.pair-top td:not(.pair-span){border-bottom-color:transparent}
tr.pair-bottom td{border-bottom-color:var(--border)}
.pair-span{vertical-align:middle}
tr.row-stale td{opacity:.72}
tr.grp-collapse td{
padding:6px 0; text-align:center; cursor:pointer; user-select:none;
color:var(--text-3); font-size:11px; background:var(--surface-2);
}
tr.grp-collapse:hover td{color:var(--text); background:var(--row-hover)}
/* Баннеры секций поиска (2026-09-03, макет утверждён владельцем): строка во
всю ширину таблицы между секциями «прошли фильтры» → «не прошли» →
«скрыты вами», и такой же — «ничего не найдено». Без фона строки: баннер
сам несёт цвет секции (оранжевый — фильтры, синий — скрытое, нейтральный —
пусто), кнопка справа. */
tr.bnr-row{--row-bg:transparent; cursor:default}
tr.bnr-row td.bnr{padding:10px 12px}
.banner{display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:11px; border:1px solid var(--border)}
.banner .bnr-ic{flex:0 0 auto; display:flex}
.banner .bnr-ic .ic{width:22px; height:22px}
.banner .bnr-body{display:grid; gap:2px; min-width:0}
.banner .bnr-title{font-size:14px; font-weight:650; line-height:1.3}
.banner .bnr-sub{font-size:12.5px; color:var(--text-2); white-space:normal}
.banner .bnr-cnt{margin-left:auto; text-align:right; white-space:nowrap; color:var(--text-2); font-size:12.5px}
.banner .bnr-cnt b{display:block; font-family:'PT Mono',ui-monospace,monospace; font-size:15px; color:var(--text)}
.banner .bnr-act{margin-left:8px; padding:6px 11px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12.5px; white-space:nowrap; cursor:pointer}
.banner .bnr-act:hover{border-color:var(--accent-border); background:var(--surface-2)}
.banner.flt{background:var(--orange-soft); border-color:color-mix(in srgb, var(--orange) 55%, var(--border))}
.banner.flt .bnr-ic{color:var(--orange)}
.banner.hid{background:var(--blue-soft); border-color:color-mix(in srgb, var(--blue) 45%, var(--border))}
.banner.hid .bnr-ic{color:var(--blue)}
.banner.none{background:var(--surface-2); padding:20px 18px}
.banner.none .bnr-title{font-size:16px}
.banner.none .bnr-ic{color:var(--text-2)}
.banner.none .bnr-ic .ic{width:26px; height:26px}
@media (max-width:760px){
.banner{flex-wrap:wrap}
.banner .bnr-cnt{margin-left:0; text-align:left}
.banner .bnr-act{margin-left:auto}
}
.grp-token{min-width:186px; white-space:nowrap; vertical-align:middle; font-size:13px}
.token-name{display:inline-flex; align-items:baseline; gap:6px; vertical-align:middle}
.token-name b{font-weight:600; letter-spacing:-.01em}
.chev{display:inline-block; width:16px; font-size:11px; color:var(--accent); opacity:.75}
.coin-icon{
width:26px; height:26px; border-radius:50%; vertical-align:middle; margin-right:8px;
background:var(--surface-2);
}
.coin-icon-ph{
display:inline-flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; color:var(--text-3);
border:1px solid var(--border);
}
/* Подпись сырья (Au, WTI, GAS) вместо картинки — до четырёх знаков. */
.coin-icon-sym{font-size:9px; letter-spacing:-.02em}
/* Валюты вместо картинки показывают символ (€, ¥, £) — по решению владельца
он рисуется как настоящая иконка: белая плашка, тёмный знак. Тот же
--logo-plate, что под логотипами бирж, чтобы ряд читался однородно. */
.coin-icon-ccy{
background:var(--logo-plate); color:#16221C; border-color:rgba(0,0,0,.14);
font-size:13px; font-weight:600;
}
/* --- Альбомная ориентация на телефоне (кнопка ⟳, static/landscape.js) ---
Поворачивается ВЁРСТКА, а не экран: настоящий лок ориентации требует
полноэкранного режима и не поддерживается iOS Safari вовсе.
Ландшафт ≠ десктоп: своя типографика и своя высота графика под короткую
сторону экрана. */
body.force-landscape{
/* Сам документ не скроллится: прокрутка живёт внутри повёрнутого кадра.
Иначе палец двигал бы страницу вдоль НЕповёрнутой оси. */
overflow:hidden; position:fixed; inset:0;
font-size:12.5px;
}
body.force-landscape #rot-frame{
position:fixed; top:0; left:0;
/* Длинная сторона экрана становится шириной кадра, короткая — высотой.
svh, а не vh: с адресной строкой браузера vh больше видимой области, и
край вёрстки уезжал бы за экран («как будто обрезан»). */
width:100vh; width:100svh;
height:100vw;
/* Порядок важен: transform читается справа налево. Сначала поднимаем
элемент на его СОБСТВЕННУЮ высоту (100vw), потом поворачиваем вокруг
верхнего левого угла — тогда повёрнутый прямоугольник ложится ровно в
экран. С -100vh он уезжал целиком за правый край. */
transform:rotate(90deg) translateY(-100vw);
transform-origin:top left;
overflow-y:auto; overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
/* ⚠️ backdrop-filter под ПОВЁРНУТЫМ предком подмешивает НЕповёрнутый фон:
в альбомной ориентации это давало размытый слой поверх левой части графика
(жалоба владельца 2026-08-31). Внутри повёрнутого кадра шапка получает
непрозрачный фон, размытие снимается. */
body.force-landscape .topbar{padding:6px 12px; backdrop-filter:none; background:var(--surface)}
body.force-landscape .content{padding:8px 12px 24px; max-width:none}
/* Короткая сторона телефона — это высота ландшафта: график считаем ОТ НЕЁ
(100vw в повёрнутом кадре и есть высота), иначе на маленьком экране под
графиком не остаётся ни карточек, ни таблицы. */
body.force-landscape #tvchart{height:calc(100vw - 168px) !important; min-height:170px}
body.force-landscape .card{padding:10px}
body.force-landscape .icon-btn{height:26px}
/* Плотная таблица рассчитана на десктоп (min-width 1180px) — в кадре шириной
с короткую сторону телефона она давала бы горизонтальный скролл на каждой
строке. Ужимаем колонки под ширину кадра.
⚠️ Селектор обязан нести и .dense-view: правило min-width:1180px написано
ниже по файлу с той же силой, и без третьего класса побеждало бы оно. */
body.force-landscape.dense-view table.spreads{min-width:0; font-size:11px}
body.force-landscape.dense-view table.spreads th,
body.force-landscape.dense-view table.spreads td{padding:3px 5px}
body.force-landscape.dense-view .spreads-scroll{overflow-x:auto}
/* Фильтр по чипам бирж: поле поиска над списком. */
.ex-search{
width:100%; margin-bottom:6px; padding:5px 9px; font-size:12px;
background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:8px;
}
/* Каналы доставки алертов: окно выбора и метки в таблице уровней. Цвет
метки совпадает с цветом линии на графике. */
.chan-pop{
position:fixed; z-index:60; left:50%; top:30%; transform:translate(-50%,-30%);
background:var(--surface); border:1px solid var(--border); border-radius:12px;
padding:16px 18px; min-width:260px; box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.chan-title{font-weight:600; margin-bottom:10px}
.chan-opt{display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer}
.chan-remember{margin-top:8px; padding-top:10px; border-top:1px solid var(--border)}
.chan-actions{display:flex; gap:8px; margin-top:12px}
.chan-cell{white-space:nowrap}
.chan-chip{
border:1px solid var(--border); background:transparent; color:var(--text-3);
border-radius:6px; padding:1px 6px; margin-right:3px; font-size:11px; cursor:pointer;
}
.chan-chip.on.chan-telegram{border-color:#d29922; color:#d29922}
.chan-chip.on.chan-pushover{border-color:#2563EB; color:#2563EB}
.chan-chip.on.chan-browser{border-color:#7A8580; color:var(--text-2)}
/* Избранное: звезда закрепления. Не навигация — клик по ней перехвачен. */
.pin-col{width:34px; text-align:center}
.pin-btn{
background:none; border:0; cursor:pointer; padding:2px 4px; line-height:1;
font-size:15px; color:var(--text-3); transition:color .12s;
}
.pin-btn:hover{color:var(--yellow,#d29922)}
.pin-btn.on{color:var(--yellow,#d29922)}
/* Токен поднят из-за закреплённой внутри пары: звезда пустая, но заметная. */
/* Закреплённая пара — отдельной строкой над таблицей: золотая полоса слева
(в цвет звезды), чтобы блок читался как «избранное», а не как строка,
всплывшая сама по себе. */
/* ⚠️ Обязательно .pair-top и не .mrow. У нижней строки пары первая ячейка —
это td.leg-cell (токен-ячейка сверху несёт rowspan="2"), и полоса рисовалась
ВНУТРИ колонки «Ноги»; в карточном режиме единственная ячейка — td.mcell, и
полоса вставала СЛЕВА ОТ скруглённой карточки. */
tr.row-pinned.pair-top:not(.mrow) td:first-child{box-shadow:inset 3px 0 0 var(--yellow,#d29922)}
tr.row-pinned.pair-top td{border-top:1px solid var(--border)}
.mcard.is-pinned{border-color:var(--yellow,#d29922)}
.mc-flags .pin-btn{font-size:14px}
/* Шапка графика: слева название пары, справа действия над этим графиком
(закрепить, инверсия, поделиться) — по просьбе владельца они переехали
из верхней панели страницы и из-под графика. */
.chart-head{
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap; margin:0 0 12px;
}
.chart-actions{display:flex; align-items:center; gap:8px; margin-left:auto}
.chart-actions .pin-btn,.chart-actions #pair-pin{font-size:15px; line-height:1}
#pair-pin.on{color:var(--yellow,#d29922); border-color:var(--yellow,#d29922)}
/* Шапка графика: токен и обе биржи со своими логотипами и цветами. Крупно,
но не баннер: одна строка, на узком экране переносится. */
.chart-title{
display:flex; align-items:center; flex-wrap:wrap; gap:8px;
font-size:20px; font-weight:650; letter-spacing:-.01em; margin:0;
}
.chart-title:empty{display:none}
.ct-token{display:inline-flex; align-items:center; gap:2px}
/* Иконка токена в заголовке крупнее табличной и не липнет к тексту. */
.ct-token .coin-icon{width:26px; height:26px; margin-right:10px}
.ct-dash,.ct-slash{color:var(--text-3); font-weight:400; margin:0 2px}
.ct-leg{display:inline-flex; align-items:center}
/* Плашка логотипа НИЖЕ строки заголовка: одинаковая высота с 20px-текстом
выглядела как «иконка налезает на название». */
.ct-leg .exchange-logo{width:24px; height:24px; flex:0 0 24px}
.ct-leg .exchange-name{margin-left:9px; font-size:inherit; font-weight:inherit; line-height:1}
.ct-leg a{display:inline-flex; align-items:center; text-decoration:none}
.ct-leg a:hover .exchange-name{text-decoration:underline}
/* Пометка «торги закрыты» на странице пары: факт, а не ошибка — нейтральный тон. */
.halted-note{margin-top:10px; padding:7px 10px; border-radius:6px; font-size:12.5px;
background:var(--yellow-soft,rgba(210,153,34,.12)); color:var(--yellow,#d29922)}
/* Флаги и логотипы компаний не круглые — вписываем, а не обрезаем. */
img.coin-icon{object-fit:contain}
tr.member td.member-cell{
min-width:104px; padding-left:26px; color:var(--text-3); white-space:nowrap;
}
.member-branch{margin-right:7px; color:var(--text-3); opacity:.6}
/* Нога: направление, логотип, имя биржи. */
.leg-cell{min-width:196px; white-space:nowrap}
.leg-cell,.leg-cell > *{vertical-align:middle}
.leg-side{
display:inline-flex; align-items:center; gap:3px; width:60px; margin-right:8px;
font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.leg-long{color:var(--accent)}
/* Время последней сделки в пуле — вторая строка ячейки он-чейн ноги.
Отступ слева равен ширине .leg-side (60px) плюс её margin (8px), чтобы
подпись встала под именем биржи, а не под стрелкой направления.
Цвет нейтральный: владелец решил не выделять старые сделки — сама цифра
и есть сигнал. */
.leg-trade-age{
display:block; margin-left:68px; margin-top:1px;
font-size:10px; line-height:1.2; color:var(--text-3); white-space:nowrap;
}
.leg-short{color:var(--red)}
.exchange-logo{
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; flex:0 0 22px; padding:2px;
background:var(--logo-plate); border:1px solid var(--border); border-radius:7px;
overflow:hidden; vertical-align:middle;
}
.exchange-logo img{display:block; width:100%; height:100%; object-fit:contain}
.exchange-logo-missing{background:var(--surface-2)}
/* Тёмный логотип на белой плашке выглядит чернильным пятном (замер яркости
2026-08-28: bybit 45, okx 51, lighter 53, binance_alpha 47, dex_sol 27).
Плашку у таких убираем: знак у них круглый и без подложки читается как
монета. Список — DARK в static/exchanges.js. */
/* Образец цвета в легенде порогов: квадрат рисуется стилями, а не символом
«■» — тот зависел от шрифта и в тексте выглядел инородно. */
.legend-swatch{
display:inline-block; width:9px; height:9px; border-radius:2px;
background:currentColor; vertical-align:0.02em;
}
/* Плотный вид переключает КАРТОЧКИ на настоящую таблицу, а карточки бывают
только на узком экране (и в повёрнутой вёрстке). На десктопе кнопка не
делала ничего — прячем. */
@media (min-width: 761px){
body:not(.force-landscape) #dense-btn{display:none}
}
/* ⚠️ Иконка внутри кнопки с текстом рисуется ТОЛЩЕ. Подписи кнопок идут весом
600, и обводка 1.5 рядом с ними смотрелась блёклой. В таблице этого правила
нет намеренно: там текст обычного веса, и утолщение сделало бы значки
заметнее самих данных. Маски так не настроить — только инлайновый svg. */
.btn .ic-svg,.icon-btn .ic-svg,.tv-tool .ic-svg{stroke-width:2}
/* ⚠️ Сенсорный экран: цель нажатия и видимость.
Замечание владельца 2026-08-29 — «на мобильной пару никак нельзя убрать из
избранного». Причина не в обработчиках (они разбирают и тач-путь), а в
размере: звезда в шапке карточки занимала 22×19 px при рекомендованных 44.
Промах на пару пикселей попадал в карточку, и вместо снятия звезды браузер
уходил на страницу пары — со стороны это и выглядит как «не убирается».
Заодно глаз: он приглушён и проявляется по :hover, а на тач-экране hover не
наступает никогда — там он должен быть виден сразу. */
/* ⚠️ Условие двойное. Только `hover:none` мало: часть устройств с сенсором
рапортует наличие hover, а карточный режим включается по ширине — значит и
крупные цели нажатия должны включаться по ней же. */
@media (hover: none), (max-width: 760px){
.mc-flags .pin-btn,.mc-flags .hide-btn,
table.spreads .pin-btn,table.spreads .hide-btn{
min-width:34px; min-height:34px; padding:8px;
display:inline-flex; align-items:center; justify-content:center;
}
.hide-btn{opacity:1}
}
/* --- Пользовательское скрытие (2026-08-28) ------------------------------- */
/* Кнопка «Скрыть» в заголовке: появляется по наведению на сам столбец, чтобы
шапка в покое оставалась чистой. */
th[data-col]{position:relative}
/* Кнопка несёт И значок, И подпись: один минус без слова читался как часть
заголовка, а не как действие (правка 2026-08-30). Ширина по содержимому,
фон непрозрачный — на узком столбце кнопка накрывает заголовок целиком,
вместо того чтобы наползать на него полупрозрачно. */
.th-hide{
display:none; position:absolute; right:3px; top:50%; transform:translateY(-50%);
align-items:center; justify-content:center; gap:3px; padding:2px 6px;
cursor:pointer; font-size:11px; line-height:1.4; white-space:nowrap; z-index:3;
background:var(--surface); border:1px solid var(--border); border-radius:6px;
color:var(--text-2);
}
.th-hide .ic{width:12px; height:12px}
th[data-col]:hover .th-hide{display:inline-flex}
.th-hide:hover{color:var(--text); border-color:var(--text-3)}
/* Глаз рядом со звездой. Тусклый в покое: это уборка, а не основное действие. */
.hide-btn{
background:none; border:0; cursor:pointer; padding:2px 4px; line-height:1;
font-size:14px; color:var(--text-3); opacity:.55; transition:opacity .12s,color .12s;
}
tr:hover .hide-btn{opacity:1}
.hide-btn:hover{color:var(--red)}
/* Кнопка возврата стоит в ПОЛОСЕ НАД таблицей, прижатая вправо: `margin-left:auto`
в flex-полосе легенды. Две прежние попытки не годились — absolute над панелью
пропадала под sticky-шапкой (она красится поверх соседей при равном z-index),
а внутри ячейки шапки налезала на столбец действий. */
.pin-col{white-space:nowrap}
.restore-wrap{margin-left:auto; display:inline-flex; line-height:0}
.restore-btn{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; padding:0; cursor:pointer; font-size:14px;
background:var(--surface); border:1px solid var(--border); border-radius:7px;
color:var(--text-2);
}
.restore-btn:hover{color:var(--text); border-color:var(--text-3)}
.restore-pop{
/* ⚠️ position:FIXED, а координаты считает JS по прямоугольнику кнопки.
Привязка к предку не работает: и полоса легенды, и её обёртка
растягиваются родительским флексом каркаса (замер: 649px при кнопке в
24px), поэтому `top:100%` уводило окно на сотни пикселей вниз за экран.
Фиксированное позиционирование от кнопки не зависит от вёрстки вокруг. */
position:fixed; z-index:60; width:290px; max-height:min(60vh,340px);
overflow:auto; padding:10px 12px 12px;
background:var(--surface); border:1px solid var(--border); border-radius:10px;
box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.restore-head{
display:flex; align-items:center; justify-content:space-between;
font-size:12px; font-weight:700; margin-bottom:8px;
}
.restore-sec h4{
margin:8px 0 4px; font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-3);
}
.restore-list{display:flex; flex-direction:column; gap:3px; font-size:12px}
.restore-list .chk{display:flex; align-items:center; gap:6px; cursor:pointer}
.restore-actions{margin-top:10px; text-align:right}
/* Подтверждение скрытия — по центру экрана (решение владельца). */
.modal-back{
position:fixed; inset:0; z-index:50; display:flex; align-items:center;
justify-content:center; background:rgba(0,0,0,.42);
}
.modal-back.hidden{display:none}
.modal{
width:min(380px,92vw); padding:16px 18px;
background:var(--surface); border:1px solid var(--border); border-radius:12px;
box-shadow:0 18px 48px rgba(0,0,0,.3);
}
.modal-title{font-size:14px; font-weight:700; margin-bottom:6px}
.modal-text{font-size:12.5px; color:var(--text-2); margin-bottom:12px; line-height:1.45}
.modal .chk{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); cursor:pointer}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px}
/* --- Иконки (2026-08-28) -------------------------------------------------
Два вывода одного набора (static/icons.js): маска для табличных глифов и
инлайновый