/* LIQ — Liquidations section (redesign по макету liq.html).
   ВСЁ заскоупено под #page-screeners-liq + префикс liq- : generic-имена (.card/.panel/.feed)
   заняты глобально 53× — утечки в другие 30 секций недопустимы. Только токены variables.css.
   Уроки вёрстки прода: 2 колонки через TABLE (не grid); рамки через inset-shadow (не border);
   внешний отступ таблицы гасим (margin/width), box-sizing глобальный; svg max-width:100%. */

/* overflow-x:hidden гасит горизонтальный выступ ряда (width+32/margin -16),
   но РАЗРЕШАЕТ вертикальный скролл — иначе сетку статов под 3 панелями не видно. */
/* СЕМАНТИКА СТОРОНЫ ЛИКВИДАЦИИ (локально, НЕ глобальные --up/--dn):
   лонг-ликв. = зелёный, шорт-ликв. = красный. Winners/Losers используют --up/--dn напрямую — не задеты. */
#page-screeners-liq{padding:14px;overflow-x:hidden;overflow-y:auto;--liq-long:var(--up);--liq-short:var(--dn)}
#page-screeners-liq *,#page-screeners-liq *::before,#page-screeners-liq *::after{box-sizing:border-box}
#page-screeners-liq .liq-card{background:var(--surface);background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--border);border-radius:12px;overflow:hidden}

/* header */
#page-screeners-liq .liq-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#page-screeners-liq .liq-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px}
#page-screeners-liq .liq-title .cap{font-size:11px;color:var(--dim);font-weight:400;margin-left:4px}
#page-screeners-liq .liq-ctl{display:flex;align-items:center;gap:9px;margin-left:6px}
#page-screeners-liq .liq-ctl select,#page-screeners-liq .liq-ctl input{background:var(--elevated);background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--border);color:var(--text);border-radius:7px;padding:6px 10px;font-size:12px;font-family:var(--font);outline:none;border:none}
#page-screeners-liq .liq-ctl input.numf{width:96px;font-family:var(--mono);text-align:right;-moz-appearance:textfield;appearance:textfield}
#page-screeners-liq .liq-ctl input.numf::-webkit-outer-spin-button,
#page-screeners-liq .liq-ctl input.numf::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#page-screeners-liq .liq-ctl input.tk{width:110px;color:var(--muted)}
#page-screeners-liq .liq-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--up);text-transform:uppercase}
#page-screeners-liq .liq-live b{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 6px var(--up);animation:liqPulse 2s infinite}
@keyframes liqPulse{0%,100%{box-shadow:0 0 6px var(--up)}50%{box-shadow:0 0 11px var(--up)}}

/* 5 metrics */
#page-screeners-liq .liq-metrics{display:flex;gap:12px;margin-bottom:12px}
#page-screeners-liq .liq-m{flex:1;min-width:0;border-radius:10px;padding:10px 13px}
#page-screeners-liq .liq-m .k{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
#page-screeners-liq .liq-m .v{font-size:17px;font-weight:700;font-family:var(--mono);margin-top:4px}
#page-screeners-liq .liq-m .v .u{font-size:11px;color:var(--dim)}
#page-screeners-liq .liq-m .s{font-size:11px;color:var(--muted);margin-top:3px}
#page-screeners-liq .liq-m .up{color:var(--up)}#page-screeners-liq .liq-m .dn{color:var(--dn)}#page-screeners-liq .liq-m .am{color:var(--amber)}
#page-screeners-liq .v.dn{color:var(--dn)}#page-screeners-liq .v.up{color:var(--up)}#page-screeners-liq .v.am{color:var(--amber)}
#page-screeners-liq .s .dn{color:var(--dn)}#page-screeners-liq .s .up{color:var(--up)}

/* TWO COLUMNS via TABLE (grid в этом проде схлопывался) */
#page-screeners-liq table.liq-cols{width:calc(100% + 24px);margin:0 -12px;border-collapse:separate;border-spacing:12px 0;table-layout:fixed}
#page-screeners-liq table.liq-cols td{vertical-align:top;padding:0}
#page-screeners-liq td.liq-left{width:55%}
#page-screeners-liq td.liq-right{width:45%}

#page-screeners-liq .liq-panel{display:flex;flex-direction:column;height:74vh}
#page-screeners-liq .liq-ph{padding:0 13px;height:44px;display:flex;align-items:center;flex:none;box-shadow:inset 0 -1px 0 var(--border)}
#page-screeners-liq .liq-ph .t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);display:flex;align-items:center;gap:6px}
#page-screeners-liq .liq-ph .t i{width:3px;height:12px;border-radius:2px;background:var(--blue);display:inline-block}
#page-screeners-liq .liq-ph .r{margin-left:auto;font-size:10px;color:var(--dim);font-family:var(--mono)}
#page-screeners-liq .liq-bd{padding:13px;flex:1;min-height:0;display:flex;flex-direction:column}

/* ratio bar */
#page-screeners-liq .liq-ratio{display:flex;height:26px;border-radius:7px;overflow:hidden;flex:none;background:var(--elevated)}
#page-screeners-liq .liq-ratio .l{background:linear-gradient(90deg,rgba(61,220,151,.78),rgba(61,220,151,.5));display:flex;align-items:center;padding:0 9px;transition:width .4s ease}
#page-screeners-liq .liq-ratio .s{background:linear-gradient(90deg,rgba(248,113,113,.5),rgba(248,113,113,.78));display:flex;align-items:center;justify-content:flex-end;padding:0 9px;transition:width .4s ease}
#page-screeners-liq .liq-ratio span{font-size:10px;font-weight:700;font-family:var(--mono);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);white-space:nowrap}
#page-screeners-liq .liq-rcap{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:5px;flex:none}
#page-screeners-liq #liq-rcap-l{color:var(--liq-long)}   /* «$X лонгов» — зелёный */
#page-screeners-liq #liq-rcap-s{color:var(--liq-short)}  /* «$Y шортов» — красный */

/* premium chart */
#page-screeners-liq .liq-chart{flex:1;min-height:200px;margin-top:14px;position:relative}
#page-screeners-liq .liq-chart svg{width:100%;height:100%;display:block;max-width:100%}
#page-screeners-liq .liq-chart svg text{font-family:var(--mono)}   /* оси/подписи — JetBrains Mono (токен), не generic monospace */
#page-screeners-liq .liq-tip{position:absolute;pointer-events:none;background:var(--elevated);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 24px -12px rgba(0,0,0,.9);border-radius:8px;padding:8px 11px;font:11px var(--mono);color:var(--text);opacity:0;transition:opacity .1s;white-space:nowrap;transform:translate(-50%,-118%);z-index:5;min-width:150px}
#page-screeners-liq .liq-tip .row{display:flex;justify-content:space-between;gap:14px;line-height:1.7}
#page-screeners-liq .liq-tip .tt{color:var(--dim)}
#page-screeners-liq .liq-tip .tl{color:var(--dn)}#page-screeners-liq .liq-tip .ts{color:var(--up)}#page-screeners-liq .liq-tip .tn{color:var(--blue);font-weight:700}
#page-screeners-liq .liq-tip .hd{font-weight:700;color:var(--text);margin-bottom:3px}
@keyframes liqBarIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes liqNowPulse{0%,100%{opacity:.35}50%{opacity:.9}}
#page-screeners-liq .bar{transition:y .5s ease,height .5s ease,opacity .12s}
#page-screeners-liq .bar-col.intro .bar{animation:liqBarIn .55s cubic-bezier(.22,1,.36,1) backwards}
#page-screeners-liq .bar-col:hover .bar{opacity:1!important;filter:brightness(1.15)}
#page-screeners-liq .hit{fill:transparent;cursor:crosshair}
#page-screeners-liq .cross{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .1s}
#page-screeners-liq .nowline{stroke:rgba(91,141,255,.5);stroke-width:1;stroke-dasharray:2 3}
#page-screeners-liq .nowdot{animation:liqNowPulse 1.8s infinite}
@media(prefers-reduced-motion:reduce){#page-screeners-liq .bar-col.intro .bar{animation:none}#page-screeners-liq .nowdot{animation:none}#page-screeners-liq .bar,#page-screeners-liq .liq-ratio .l,#page-screeners-liq .liq-ratio .s{transition:none}}
#page-screeners-liq .liq-legend{display:flex;gap:16px;font-size:11px;color:var(--muted);margin-top:12px;padding-top:12px;box-shadow:inset 0 1px 0 var(--border);flex:none}
#page-screeners-liq .liq-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}

/* feed (правый блок) — единственный скроллящийся элемент */
#page-screeners-liq .liq-feed{flex:1;min-height:0;overflow-y:auto;margin:0 -5px;padding:0 5px}
/* тонкий тёмный скроллбар ленты — без системных белых стрелок */
#page-screeners-liq .liq-feed{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
#page-screeners-liq .liq-feed::-webkit-scrollbar{width:6px;height:6px}
#page-screeners-liq .liq-feed::-webkit-scrollbar-track{background:transparent}
#page-screeners-liq .liq-feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
#page-screeners-liq .liq-feed::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
#page-screeners-liq .liq-feed::-webkit-scrollbar-button{display:none;width:0;height:0}

/* анимация появления НОВЫХ строк ленты (вешается только на свежие события в liq.js) */
@keyframes liqInRow{0%{opacity:0;transform:translateY(-7px)}100%{opacity:1;transform:translateY(0)}}
@keyframes liqFlashL{0%{background:rgba(61,220,151,.20)}100%{background:transparent}}   /* лонг-ликв → зелёный флеш */
@keyframes liqFlashS{0%{background:rgba(248,113,113,.20)}100%{background:transparent}}  /* шорт-ликв → красный флеш */
#page-screeners-liq .liq-fr.is-new.flashL{animation:liqInRow .42s cubic-bezier(.22,.61,.36,1) both, liqFlashL .9s ease-out both}
#page-screeners-liq .liq-fr.is-new.flashS{animation:liqInRow .42s cubic-bezier(.22,.61,.36,1) both, liqFlashS .9s ease-out both}
@media(prefers-reduced-motion:reduce){#page-screeners-liq .liq-fr.is-new.flashL,#page-screeners-liq .liq-fr.is-new.flashS{animation:none}}
#page-screeners-liq .liq-fr{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;box-shadow:inset 0 -.5px 0 rgba(255,255,255,.04)}
#page-screeners-liq .liq-fr:hover{background:rgba(255,255,255,.03)}
#page-screeners-liq .liq-fr .ex{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:9px;font-weight:700;font-family:var(--mono);color:var(--muted);background:var(--elevated);box-shadow:inset 0 0 0 1px var(--border)}
#page-screeners-liq .liq-fr .sym{font-weight:600;font-size:13px}
#page-screeners-liq .liq-fr .meta{font-size:10px;color:var(--dim);font-family:var(--mono);margin-top:2px}
#page-screeners-liq .liq-fr .amt{font-family:var(--mono);font-weight:700;font-size:13px;text-align:right}
#page-screeners-liq .liq-fr .side{font-size:9px;text-transform:uppercase;letter-spacing:.04em;text-align:right;margin-top:2px;font-weight:600}
#page-screeners-liq .liq-fr.long .amt,#page-screeners-liq .liq-fr.long .side{color:var(--liq-long)}
#page-screeners-liq .liq-fr.short .amt,#page-screeners-liq .liq-fr.short .side{color:var(--liq-short)}
#page-screeners-liq .liq-fr.whale{background:rgba(247,185,85,.04)}
#page-screeners-liq .liq-chip{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--blue-dim);color:var(--blue);margin-left:6px}
#page-screeners-liq .liq-empty{padding:24px 12px;text-align:center;color:var(--dim);font-size:12px}

/* ───────────────────────── redesign v4: 3 панели в ряд + сетка 6 статов ───────────────────────── */
/* верхний ряд: table-layout уравнивает высоту ячеек; карточки height:100% → равные панели.
   width:calc(100%+32px)+margin:0 -16px гасит внешний border-spacing → края совпадают с нижней сеткой. */
#page-screeners-liq table.liq-row3{width:calc(100% + 32px);margin:0 -16px;border-collapse:separate;border-spacing:16px 0;table-layout:fixed}
#page-screeners-liq table.liq-row3 td{vertical-align:top;height:1px;padding:0}
#page-screeners-liq td.liq-c1{width:42%}
#page-screeners-liq td.liq-c2{width:27%}
#page-screeners-liq td.liq-c3{width:31%}
/* ограниченная высота: иначе длинная лента (60 строк) раздувает ряд до тысяч px.
   фикс-высота → график/профиль вписаны, лента скроллится внутри (критерий 3b). */
#page-screeners-liq .liq-panel3{height:60vh;min-height:420px;max-height:680px;display:flex;flex-direction:column;padding:16px 18px}
#page-screeners-liq .liq-panel3 .liq-ph{height:auto;padding:0 0 12px;box-shadow:none}
#page-screeners-liq .liq-bd3{flex:1;display:flex;flex-direction:column;min-height:0}
#page-screeners-liq .liq-bd3 svg{display:block;width:100%;height:auto;max-width:100%}
#page-screeners-liq .liq-c1 .liq-chart{flex:1;display:flex;align-items:center;min-height:0;margin-top:12px}
#page-screeners-liq .liq-c1 .liq-chart svg{width:100%;height:auto}
#page-screeners-liq .liq-prof{flex:1;display:flex;align-items:center;min-height:0}
#page-screeners-liq .liq-prof svg{width:100%;height:auto}
#page-screeners-liq .liq-feedbd .liq-feed{flex:1;min-height:0;overflow-y:auto;margin:0 -5px;padding:0 5px}

/* KPI «Статистика · 24ч» (мобилка-онли, mockups/mobile-liq.html) — базово СКРЫТ на всех вьюпортах;
   показ на мобилке флагом .liq-kpi-on (mobile.css) при готовности /api/liq/stats24h. Десктоп: всегда скрыт → рендер байт-в-байт. */
#page-screeners-liq .liq-kpi-sec{display:none}
/* сетка 6 статов — одинаковые ячейки */
#page-screeners-liq .liq-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px;margin-top:16px}
#page-screeners-liq .liq-stat{padding:14px 16px;display:flex;flex-direction:column}
#page-screeners-liq .liq-stat .liq-ph{height:auto;padding:0 0 10px;box-shadow:none}
#page-screeners-liq .liq-stat-load{flex:1;display:grid;place-items:center;color:var(--dim);font-size:12px}
#page-screeners-liq table.liq-rows{width:100%;border-collapse:collapse;table-layout:fixed}
#page-screeners-liq table.liq-rows td{padding:6px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.04)}
#page-screeners-liq table.liq-rows tr:last-child td{border-bottom:none}
#page-screeners-liq td.liq-coin{width:56%;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-screeners-liq td.liq-val{width:44%;text-align:right;color:var(--muted)}
#page-screeners-liq td.liq-val.up{color:var(--up);font-weight:600}
#page-screeners-liq td.liq-val.down{color:var(--dn);font-weight:600}
#page-screeners-liq .liq-rank{display:inline-block;width:16px;color:var(--dim);font-size:11px}
#page-screeners-liq .liq-pillRail{display:inline-block;height:5px;border-radius:3px;vertical-align:middle;margin-right:6px;background:var(--dn);opacity:.5}

/* <1200px — ряд перестраивается без горизонтального скролла */
@media(max-width:1200px){
  #page-screeners-liq table.liq-row3,#page-screeners-liq table.liq-row3 tbody,#page-screeners-liq table.liq-row3 tr{display:block;width:100%}
  #page-screeners-liq table.liq-row3{margin:0;width:100%;border-spacing:0}
  #page-screeners-liq table.liq-row3 td{display:block;width:100%!important;margin-bottom:16px}
  #page-screeners-liq .liq-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){#page-screeners-liq .liq-stats{grid-template-columns:1fr}}

/* ───────── кастомный дропдаун бирж + единый стиль полей фильтра ───────── */
/* бейдж-монограмма биржи */
#page-screeners-liq .liq-bd{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:var(--mono);background:var(--elevated);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border);flex-shrink:0}
/* триггер */
#page-screeners-liq .liq-dd{position:relative}
#page-screeners-liq .liq-dd__trigger{display:flex;align-items:center;gap:9px;min-width:170px;height:38px;padding:0 12px;background:var(--elevated);color:var(--text);border:0;box-shadow:inset 0 0 0 1px var(--border);border-radius:10px;cursor:pointer;font:600 13px var(--font);transition:box-shadow .15s,background .15s}
#page-screeners-liq .liq-dd__trigger:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
#page-screeners-liq .liq-dd.open .liq-dd__trigger{box-shadow:inset 0 0 0 1.5px var(--blue)}
#page-screeners-liq .liq-dd__label{flex:1;text-align:left;white-space:nowrap}
#page-screeners-liq .liq-dd__chev{transition:transform .2s ease;flex-shrink:0}
#page-screeners-liq .liq-dd.open .liq-dd__chev{transform:rotate(180deg)}
/* панель */
#page-screeners-liq .liq-dd__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 12px 32px rgba(0,0,0,.45);border-radius:12px;padding:6px;z-index:60;transform-origin:top left;opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:opacity .16s ease,transform .18s cubic-bezier(.22,.61,.36,1)}
#page-screeners-liq .liq-dd.open .liq-dd__panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* пункты + стаггер */
#page-screeners-liq .liq-dd__opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:none;border:0;color:var(--text);font:500 13px var(--font);text-align:left;border-radius:8px;cursor:pointer;transition:background .12s;opacity:0;transform:translateY(-3px);animation:liqOptIn .26s ease forwards}
@keyframes liqOptIn{to{opacity:1;transform:translateY(0)}}
#page-screeners-liq .liq-dd:not(.open) .liq-dd__opt{animation:none;opacity:0}
#page-screeners-liq .liq-dd__opt:hover{background:rgba(91,141,255,.12)}
#page-screeners-liq .liq-dd__opt.sel{background:rgba(91,141,255,.10)}
#page-screeners-liq .liq-dd__opt .nm{flex:1}
#page-screeners-liq .liq-dd__opt .chk{color:var(--blue);opacity:0;flex-shrink:0}
#page-screeners-liq .liq-dd__opt.sel .chk{opacity:1}
/* поля min_usd / тикер в едином стиле */
#page-screeners-liq .liq-fld{position:relative;display:flex;align-items:center}
#page-screeners-liq .liq-fld input{height:38px;background:var(--elevated);color:var(--text);border:0;box-shadow:inset 0 0 0 1px var(--border);border-radius:10px;padding:0 12px;font:600 13px var(--mono);transition:box-shadow .15s}
#page-screeners-liq .liq-fld input::placeholder{color:var(--dim);font-family:var(--font);font-weight:500}
#page-screeners-liq .liq-fld input:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
#page-screeners-liq .liq-fld input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--blue)}
#page-screeners-liq .liq-fld .pre{position:absolute;left:12px;color:var(--dim);font-size:11px;pointer-events:none}
#page-screeners-liq .liq-fld input.numf{width:130px;padding-left:42px;text-align:left}
#page-screeners-liq .liq-fld input.tk{width:150px}
/* reduced-motion: без раскрытия/стаггера */
@media(prefers-reduced-motion:reduce){
  #page-screeners-liq .liq-dd__panel{transition:none}
  #page-screeners-liq .liq-dd__opt{animation:none;opacity:1;transform:none}
  #page-screeners-liq .liq-dd__chev{transition:none}
}