/* Vibrozz 2 — market */
.mk{display:grid;gap:20px;min-width:0}

/* KPI row */
.mk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mk-k{padding:18px 20px;display:grid;gap:8px;align-content:start;min-width:0;color:var(--tx)}
.mk-k .grid.cb{padding:0}
.mk-k-err{grid-column:1/-1}
.mk-kh{display:flex;align-items:center;gap:8px;color:var(--tx-3);font-size:14px;font-weight:500;min-height:22px}
.mk-kl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kh .pill{margin-left:auto}
.mk-kof{flex:none;font-size:13px}
.mk-kbig{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-slash{color:var(--tx-3);font-weight:600;margin:0 6px}
.mk-kline{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;flex-wrap:wrap}
.mk-trends{display:inline-flex;gap:8px;margin-left:auto}
.mk-kspark{margin-top:2px}
.mk-k .k-sk{display:block}
.mk-brow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px}
.mk-brow .mk-bn{font-weight:600}
.mk-breadth{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--soft-2);gap:2px}
.mk-breadth i{display:block;height:100%;min-width:0}
.mk-breadth i.u{background:var(--up)}.mk-breadth i.f{background:var(--soft-2)}.mk-breadth i.d{background:var(--dn)}
.mk-kv{gap:10px}
.mk-kv>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 10px}
.mk-kv>div>span{color:var(--tx-3);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kv>div>b{font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.mk-liq{grid-column:1/-1;display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px}
.mk-liq i{display:block;height:100%}.mk-liq i.u{background:var(--up)}.mk-liq i.d{flex:1;background:var(--dn)}
.mk-fund{text-decoration:none;transition:box-shadow .15s,transform .06s}
.mk-fund:hover{box-shadow:var(--pop)}
.mk-fund .mk-chev{margin-left:auto;color:var(--tx-3)}
.mk-fund .pill+.mk-chev{margin-left:0}
.mk-fund small{font-size:13px}

/* movers + feed */
.mk-mid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:stretch}
.mk-movers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}
.mk-movers-err{grid-column:1/-1}
.mc{padding:18px;display:grid;gap:10px;align-content:start;color:var(--tx);text-decoration:none;min-width:0;transition:box-shadow .15s}
a.mc:hover{box-shadow:var(--pop)}
.mc .row b{font-size:16px;font-weight:700;display:block}
.mc .row small{display:block;color:var(--tx-3);font-size:13px;white-space:nowrap}
.mc .grid.cb{padding:0}
.mc-spark{height:44px}
.mc-spark .sk{height:44px}
.mc-fact{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-fact.warn{color:var(--warn)}.mc-fact.acc{color:var(--tx)}
.mc-fact.acc::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc-2);margin-right:6px;vertical-align:1px}
.mc-fact .mc-h1{color:inherit}
.mk-sk{display:block;width:100%}

.mk-feed{position:relative;min-height:320px;display:flex;flex-direction:column}
.mk-feed .ch{flex:none}
.mk-feed-n{font-size:13px;font-weight:700;color:var(--tx-3);background:var(--soft);border-radius:8px;padding:1px 8px}
.mk-feed-n:empty{display:none}
.mk-feed-b{position:absolute;top:62px;left:0;right:0;bottom:0;overflow-y:auto;padding:0 12px 14px;scrollbar-width:thin}
/* the cut-off end of the list fades (scroll-driven: no fade when it all fits or at the end) */
@property --mkfb{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes mk-vfade{from{--mkfb:36px}to{--mkfb:0px}}
@supports (animation-timeline:scroll()){
  .mk-feed-b{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--mkfb)),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - var(--mkfb)),transparent);
    animation:mk-vfade linear both;animation-timeline:scroll(self block)}
}
.mk-feed-b>.grid.cb{padding:4px 12px}
.mk-evs{display:grid;gap:2px}
.mk-ev{display:grid;grid-template-columns:42px 20px minmax(0,1fr);align-items:center;gap:10px;padding:9px 12px;border-radius:12px;color:var(--tx);text-decoration:none;font-size:14px}
.mk-ev:hover{background:var(--soft)}
.mk-ev time{color:var(--tx-3);font-size:13px;font-weight:500;white-space:nowrap}
:root[lang="en"] .mk-ev{grid-template-columns:62px 20px minmax(0,1fr)}
.mk-ev.warn span{color:var(--warn);font-weight:600}
.mk-ev .ell{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}

/* toolbar */
.mk-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.mk-search{display:flex;align-items:center;gap:8px;height:42px;width:240px;padding:0 14px;border-radius:14px;background:var(--card);color:var(--tx-3);box-shadow:var(--shadow);flex:none}
.mk-search:focus-within{box-shadow:var(--ring)}
.mk-search input{border:0;background:transparent;outline:0;flex:1;min-width:0;color:var(--tx);height:100%}
.mk-search input::placeholder{color:var(--tx-3)}
.mk-search input::-webkit-search-cancel-button{cursor:pointer}
.mk-filters .chip{display:inline-flex;align-items:center;gap:6px;height:42px}
.mk-filters .chip .n{font-size:12px;font-weight:700;color:var(--tx-3);font-variant-numeric:tabular-nums}
.mk-filters .chip .n:empty{display:none}
.mk-filters .chip .n[data-k="hotn"]{display:inline-block;min-width:2ch;text-align:center}   /* the count's room is kept before it arrives */
.mk-filters .chip.on .n{color:inherit;opacity:.7}
.mk-starchip svg{fill:var(--acc-2);stroke:none}
.mk-tools-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.mk-tf{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--tx-3)}
.mk-tf .seg{background:var(--card);box-shadow:var(--shadow)}
.mk-tf .seg button.on{background:var(--soft-2);box-shadow:none}
.mk-sortm{display:flex;align-items:center;gap:6px}
.mk-sortm .input{background-color:var(--card);width:auto;min-width:150px;height:40px}
.mk-dir svg{transition:transform .15s}
.mk-dir.down svg{transform:rotate(180deg)}

/* table */
.mk-tbl{min-width:0}
.mk-tbl .tbl th{position:sticky;top:0;z-index:2;background:var(--card);padding:16px 8px 10px;vertical-align:bottom}
.mk-tbl .tbl th:first-child{border-top-left-radius:var(--r-card)}
.mk-tbl .tbl th:last-child{border-top-right-radius:var(--r-card)}
.mk-tbl .tbl td{padding:10px 8px;vertical-align:middle}
.mk-tbl .tbl th:first-child,.mk-tbl .tbl td:first-child{padding-left:16px;padding-right:0}
.mk-tbl .tbl th:last-child,.mk-tbl .tbl td:last-child{padding-right:24px}
.mk-tbl tbody tr:first-child td{border-top-color:var(--line)}
.mk-sort{border:0;background:transparent;padding:0;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.mk-sort:hover{color:var(--tx)}
.mk-sort.on{color:var(--tx);font-weight:600}
.mk-sort svg{transform:rotate(180deg)}
.mk-sort.asc svg{transform:none}
th.r .mk-sort{justify-content:flex-end}
.mk-cs{width:44px}
.mk-star{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--tx-3);padding:0}
.mk-star svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.mk-star:hover{background:var(--soft);color:var(--tx-2)}
.mk-star.on{color:var(--acc-2)}
.mk-star.on svg{fill:currentColor}
.mk-coin{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;min-width:0}
.mk-cn{display:grid;min-width:0}
.mk-cn b{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-cn small{color:var(--tx-3);font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-cn small.up{color:var(--up)}.mk-cn small.dn{color:var(--dn)}
.mk-px{display:inline-block;font-weight:600;border-radius:6px;padding:2px 5px;margin:-2px -5px}
.mk-ch{font-weight:600}
.mk-rsi{display:inline-block;min-width:34px;text-align:center;font-weight:600;border-radius:8px;padding:2px 6px}
.mk-rsi.warm-hi{color:var(--dn)}.mk-rsi.warm-lo{color:var(--up)}
.mk-rsi.hot-hi{background:var(--dn-soft);color:var(--dn);font-weight:700}
.mk-rsi.hot-lo{background:var(--up-soft);color:var(--up);font-weight:700}
.mk-trs{display:inline-flex;gap:8px}
.mk-tr{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--tx-3)}
.mk-tr i{font-style:normal;font-weight:500;color:var(--tx-3)}
.mk-tr.up{color:var(--up)}.mk-tr.dn{color:var(--dn)}
.mk-nowc{min-width:120px;width:1%}
.mk-tbl .tbl .mk-nowc{width:160px}   /* the column keeps the room of its facts while they load */
.mk-now{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;max-width:190px}
.mk-now .pill{font-size:12px;padding:2px 7px;min-width:0}
.mk-now .pill:first-child{overflow:hidden;text-overflow:ellipsis;display:block;max-width:150px}
.mk-now .mk-more{padding:2px 6px;cursor:default}
.mk-to{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap}
.mk-skc{display:inline-block;vertical-align:middle;width:44px;height:14px;min-height:0;border-radius:6px}
.mk-skc.w{width:92px}
.mk-skbig{height:28px;width:60%;min-height:0}
.mk-skv{display:inline-block;vertical-align:middle;width:5em;height:.8em;min-height:0}
.mk-skbar{height:8px;min-height:0;border-radius:4px}
.mk-kerr{display:grid;gap:8px;justify-items:start;font-size:13px}
.mk-kv .mk-skc{width:70px;height:16px}
.mk-rv{font-size:11px;padding:1px 6px}
.mk-tbl [data-k="state"]:empty{display:none}
.mk-tbl [data-k="state"]>.grid.cb{padding:20px 24px 22px}
.mk-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 18px;border-top:1px solid var(--line);font-size:13px}
.mk-foot:empty{display:none}

/* funding dialog */
.mk-fd{display:grid;gap:10px}
.mk-fd .big{font-size:38px}
.mk-ftbl th:first-child,.mk-ftbl td:first-child{padding-left:4px}
.mk-ftbl th:last-child,.mk-ftbl td:last-child{padding-right:4px}
.mk-ftbl tr.mk-next td{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.mk-flink{color:var(--tx);font-weight:700;text-decoration:none}
.mk-flink:hover{text-decoration:underline}

/* responsive: the columns drop by width so the table always fits its card (no sideways scroll, the header stays sticky) */
.mk-scroll{overflow-x:clip}
@media (max-width:1280px){
  .mk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .mk-mid{grid-template-columns:minmax(0,1fr) 320px}
  .mk-tools-end{margin-left:0}
}
@media (max-width:960px){
  .mk-mid{grid-template-columns:1fr}
  .mk-feed{min-height:0}
  .mk-feed-b{position:static;height:340px}   /* a fixed height: the list arriving does not push the table down */
}
@media (max-width:760px){
  .mk{gap:14px}
  .mk-kpis{gap:12px}
  .mk-k{padding:14px 16px;gap:6px}
  .mk-kbig{font-size:20px}
  .mk-kline .mk-trends{display:none}
  .mk-kv>div{grid-template-columns:1fr}
  .mk-kv>div>span{font-size:12px}
  .mk-kv>div>b{font-size:15px}
  .mk-kv{gap:6px}
  .mk-brow{grid-template-columns:22px minmax(0,1fr);gap:8px}
  .mk-brow .mk-bn{display:none}
  .mk-movers{gap:12px}
  .mc{padding:14px;gap:8px}
  .mc .row{gap:8px}
  .mc .coin{width:32px;height:32px}
  .mc .row b{font-size:15px}
  .mc .pill{font-size:12px;padding:2px 5px}
  .mc-spark,.mc-spark .sk{height:36px}
  .mc-fact{font-size:12px}
  .mk-feed-b{padding:0 6px 10px;height:300px}
  .mk-ev{padding:10px 12px;min-height:40px}
  .mk-tools{gap:10px}
  .mk-search{width:100%;order:-1}
  .mk-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .mk-filters .chip{height:40px;padding:0 12px;font-size:13px}
  .mk-tools-end{width:100%;justify-content:space-between}
  .mk-sortm .input{min-width:0;width:130px}
  .mk-tbl thead{display:none}
  .mk-scroll{overflow:visible}
  .mk-tbl .tbl td{padding:8px 6px}
  .mk-tbl .tbl td:first-child{padding-left:8px}
  .mk-tbl .tbl td:last-child{padding-right:16px}
  .mk-tbl tbody tr:first-child td{border-top:0}
  .mk-star{width:40px;height:40px}
  .mk-cs{width:40px}
  .mk-coin .coin{width:32px;height:32px}
  .mk-foot{padding:12px 16px 16px}
  .mk-fd .big{font-size:32px}
}
/* phones: the RSI timeframe only matters when the rows are sorted by RSI (the value is on the line under the coin) */
@media (max-width:760px){
  .mk-tools:not(.rsi) .mk-tf{display:none}
  .mk-tbl .tbl td:nth-child(5){padding-right:16px}
  .mc .row{flex-wrap:wrap;row-gap:6px}
  .mc .row .grow{flex-basis:auto}
}
.mk-tbl .tbl td.mk-cc{min-width:150px}
@media (max-width:760px){.mk-tbl .tbl td.mk-cc{min-width:0;max-width:150px}}
@media (max-width:1500px){
  .mk-tbl .mk-tr i{display:none}
  .mk-trs{gap:6px}
}
@media (min-width:1281px) and (max-width:1380px){
  .mk-kline .mk-tr i{display:none}
}
@media (max-width:1440px){
  .mk-tbl .tbl td.mk-cc{min-width:130px}
  .mk-nowc{min-width:104px}
  .mk-tbl .tbl th,.mk-tbl .tbl td{padding-left:6px;padding-right:6px}
  .mk-tbl .tbl th:last-child,.mk-tbl .tbl td:last-child{padding-right:18px}
}
@media (max-width:1380px){
  .mk-tbl .mk-hm{display:none}
  .mk-tbl .tbl th:nth-last-child(2),.mk-tbl .tbl td:nth-last-child(2){padding-right:20px}
}
@media (max-width:1180px){
  .mk-tbl .tbl td.mk-cc{min-width:118px}
  .mk-now .pill:first-child{max-width:110px}
  .mk-tbl .tbl .mk-nowc{width:140px}
}
/* rows still wider than the card (long values): market.js drops, in turn, the volume pill, OI, trend, funding, 1h, turnover */
.mk-tbl.f1 .mk-rv,.mk-tbl.f2 .tbl tr>:nth-child(11),.mk-tbl.f3 .tbl tr>:nth-child(7),.mk-tbl.f4 .tbl tr>:nth-child(10),
.mk-tbl.f5 .tbl tr>:nth-child(4),.mk-tbl.f6 .tbl tr>:nth-child(9){display:none}
.mk-tbl.f6 .mk-cn small.show-s{display:block!important}
.mk-tbl.f2 .tbl tr>:nth-child(10),.mk-tbl.f4 .tbl tr>:nth-child(9),.mk-tbl.f6 .tbl tr>:nth-child(8){padding-right:18px}
@media (max-width:760px){
  .mk-tools-end{gap:8px}
  .mk-tf{gap:6px;flex:none}
  .mk-tf .seg button{padding:6px 8px}
  .mk-sortm{flex:1;min-width:0}
  .mk-sortm .input{flex:1;min-width:0;width:auto}
  .mk-dir{width:40px;height:40px}
}
.mk-k{grid-template-columns:minmax(0,1fr)}
.mk-k>*{min-width:0}
.mk-k small{overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .mk-kof{display:none}
  .mc .coin{display:none}
  .mc .row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mc-fact{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
.mk-mid.solo{grid-template-columns:minmax(0,1fr)}
.mk-mid.solo .mk-feed{min-height:200px}
.mk-k-err .empty{padding:18px 16px}
.mk-feed .empty{padding:28px 16px}
.mk-mid.solo .mk-feed{min-height:0}
.mk-mid.solo .mk-feed-b{position:static;height:auto;max-height:340px}
/* phone tap targets ≥ 40 px */
@media (max-width:760px){
  .pg-market .seg button{min-height:40px;min-width:40px}
  .pg-market .icon-btn.sm{width:40px;height:40px}
  .pg-market .btn.sm{height:40px}
}

/* horizontal scroll rows fade at the edge that has more content (CSS scroll-driven; no fade when nothing overflows) */
@property --mkfl{syntax:'<length>';inherits:false;initial-value:0px}
@property --mkfr{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes mk-hfade{from{--mkfl:0px;--mkfr:32px}to{--mkfl:32px;--mkfr:0px}}
@supports (animation-timeline:scroll()){
  .mk-filters{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--mkfl),#000 calc(100% - var(--mkfr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--mkfl),#000 calc(100% - var(--mkfr)),transparent);
    animation:mk-hfade linear both;animation-timeline:scroll(self inline)}
}

/* iOS zooms the page when a focused field is under 16 px */
@media (max-width:760px){.pg-market input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.sr),.pg-market select{font-size:16px}}

/* ---------- tablets ---------- */
/* portrait tablets (761–960): the table drops 1h and funding so it fits the card without sideways scroll */
@media (min-width:761px) and (max-width:960px){
  .mk-tbl .tbl th:nth-child(4),.mk-tbl .tbl td:nth-child(4),.mk-tbl .tbl th:nth-child(10),.mk-tbl .tbl td:nth-child(10){display:none}
  .mk-tbl .tbl th:nth-child(9),.mk-tbl .tbl td:nth-child(9){padding-right:20px}
  .mk-tbl .tbl td.mk-cc{min-width:118px}
}
@media (min-width:761px) and (pointer:coarse){
  .mk-star{width:40px;height:40px}
  .mk-cs{width:46px}
  .mk-sort{min-height:40px}
  .mk-ev{min-height:40px}
  .mk-dir{width:40px;height:40px}
  .pg-market .seg button{min-width:40px}
}
/* 761–800: the turnover moves under the coin name (as on phones) */
@media (min-width:761px) and (max-width:800px){
  .mk-tbl .tbl th:nth-child(9),.mk-tbl .tbl td:nth-child(9){display:none}
  .mk-tbl .mk-cn small.show-s{display:block!important}
  .mk-tbl .tbl th:nth-child(8),.mk-tbl .tbl td:nth-child(8){padding-right:20px}
}