.markets-toolbar,
.markets-filter-bar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:14px;
}

.markets-filter-bar{
align-items:flex-end;
}

.markets-control-panel{
display:flex;
flex-direction:column;
gap:12px;
padding:16px;
margin-bottom:14px;
border-radius:14px;
background:linear-gradient(180deg, rgba(15,23,42,0.82), rgba(2,6,23,0.56));
border:1px solid rgba(148,163,184,0.18);
box-shadow:
inset 0 1px 0 rgba(148,163,184,0.08),
inset 0 -1px 0 rgba(2,6,23,0.65),
0 10px 22px rgba(2,6,23,0.28);
transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.markets-control-panel:hover{
border-color:rgba(148,163,184,0.24);
box-shadow:
inset 0 1px 0 rgba(148,163,184,0.10),
inset 0 -1px 0 rgba(2,6,23,0.65),
0 10px 24px rgba(2,6,23,0.32);
}

.markets-control-head{
padding-bottom:10px;
border-bottom:1px solid rgba(148,163,184,0.10);
}

.markets-control-head-row{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
justify-content:space-between;
gap:10px 14px;
}

.markets-control-title-col{
display:flex;
flex-direction:column;
gap:4px;
min-width:0;
flex:1 1 12rem;
}

.markets-control-title{
font-size:12px;
letter-spacing:0.10em;
text-transform:uppercase;
color:rgba(226,232,240,0.92);
}

.markets-control-subtitle{
font-size:12px;
color:rgba(148,163,184,0.70);
line-height:1.3;
}

.markets-stream-status{
display:inline-flex;
align-items:center;
gap:6px;
flex-shrink:0;
margin-top:1px;
padding:3px 8px 3px 6px;
border-radius:999px;
font-size:9px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
border:1px solid rgba(71,85,105,0.4);
background:rgba(15,23,42,0.45);
color:rgba(148,163,184,0.75);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.markets-stream-status-glyph{
display:inline-flex;
align-items:center;
justify-content:center;
color:rgba(100,116,139,0.65);
}

.markets-stream-status-svg{
display:block;
}

.markets-stream-status--live .markets-stream-status-glyph{
color:rgba(45,212,191,0.85);
}

.markets-stream-status--live{
border-color:rgba(45,212,191,0.28);
color:rgba(165,243,252,0.88);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 0 12px rgba(34,211,238,0.12);
}

.markets-stream-status--live .markets-stream-status-pulse{
animation:mkt-stream-pulse 2.4s ease-in-out infinite;
}

.markets-stream-status--sync .markets-stream-status-glyph{
color:rgba(56,189,248,0.75);
}

.markets-stream-status--sync{
border-color:rgba(56,189,248,0.25);
color:rgba(125,211,252,0.82);
}

.markets-stream-status--idle .markets-stream-status-glyph,
.markets-stream-status--offline .markets-stream-status-glyph{
color:rgba(100,116,139,0.55);
}

.markets-stream-status--offline{
border-color:rgba(71,85,105,0.35);
color:rgba(148,163,184,0.55);
}

@keyframes mkt-stream-pulse{
0%, 100%{ opacity:0.4; }
50%{ opacity:1; }
}

.markets-control-row{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:8px;
}

.markets-control-row-primary{
display:grid;
grid-template-columns: max-content max-content 1fr;
align-items:end;
gap:8px;
}

/* Keep search anchored right without spreading everything */
.markets-control-row-primary > *:nth-child(3){
justify-self:end;
}

.markets-control-row-compare{
align-items:flex-start;
position:relative;
padding-top:10px;
}

.markets-control-row-compare::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(148,163,184,0.14), transparent);
}

.markets-control-row-meta{
gap:0;
}

.markets-control-group{
display:flex;
flex-direction:column;
gap:5px;
}

.markets-control-group-exchange{
min-width:min(520px, 100%);
}

.markets-control-group-network{
min-width:160px;
}

.markets-control-group-search{
display:flex;
flex-direction:row;
align-items:flex-end;
gap:8px;
flex:1;
min-width:min(520px, 100%);
justify-content:flex-end;
}

.markets-control-label{
display:inline-flex;
align-items:center;
gap:6px;
font-size:10px;
text-transform:uppercase;
letter-spacing:0.06em;
color:rgba(148,163,184,0.88);
}

.mkt-presence-panel .markets-control-label{
color:rgba(148,163,184,0.75);
}

.mkt-help-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:14px;
height:14px;
border-radius:999px;
border:1px solid rgba(148,163,184,0.25);
color:rgba(226,232,240,0.55);
background:rgba(15,23,42,0.55);
font-size:10px;
line-height:1;
cursor:help;
user-select:none;
opacity:0.75;
}

.mkt-help-icon svg{
display:block;
}

.mkt-help-icon:hover{
border-color:rgba(56,189,248,0.35);
color:#e2e8f0;
opacity:1;
}

.mkt-refresh-btn{
height:34px;
}

.markets-control-panel .mkt-search-input,
.markets-control-panel .mkt-network-select{
height:34px;
}

.markets-control-panel .mkt-search-input{
border-color:rgba(100,116,139,0.5);
box-shadow:inset 0 1px 0 rgba(148,163,184,0.07);
background:rgba(15,23,42,0.97);
border-radius:8px;
}

.markets-control-panel .mkt-search-input:focus{
outline:none;
border-color:rgba(56,189,248,0.55);
box-shadow:
inset 0 1px 0 rgba(148,163,184,0.06),
0 0 0 3px rgba(34,211,238,0.10);
}

.markets-control-row-meta{
margin-top:-2px;
}

.mkt-compare-details{
flex:1 1 520px;
min-width:min(520px, 100%);
}

.mkt-compare-summary{
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:10px;
border:1px solid rgba(148,163,184,0.16);
background:rgba(15,23,42,0.45);
color:#cbd5e1;
cursor:pointer;
user-select:none;
}

.mkt-compare-chevron{
display:inline-flex;
align-items:center;
justify-content:center;
color:rgba(148,163,184,0.62);
}

.mkt-compare-details[open] .mkt-compare-chevron{
transform:rotate(180deg);
}

.mkt-compare-chevron svg{
display:block;
}

.mkt-compare-summary:hover{
border-color:rgba(56,189,248,0.22);
background:rgba(15,23,42,0.55);
}

.mkt-compare-summary::-webkit-details-marker{
display:none;
}

.mkt-compare-title{
font-size:10px;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(148,163,184,0.78);
}

.mkt-compare-hint{
margin-left:auto;
font-size:11px;
color:rgba(148,163,184,0.55);
}

.mkt-compare-details[open] .mkt-compare-summary{
border-color:rgba(148,163,184,0.20);
}

.mkt-compare-details[open] .mkt-presence-panel{
margin-top:8px;
}

/* Desktop default: show compare content (open-feel) */
@media (min-width: 821px){
  .mkt-compare-details .mkt-presence-panel{
    display:block;
    margin-top:8px;
  }

  .mkt-compare-chevron{
    transform:rotate(180deg);
  }
}

@media (max-width: 820px){
  .markets-control-panel{
    padding:11px;
    gap:8px;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
  }

  .markets-control-row-primary{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .markets-control-group-exchange{
    min-width:0;
    width:100%;
  }

  .markets-control-group-exchange .segmented{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    max-width:100%;
    gap:3px;
    padding:3px;
    box-sizing:border-box;
  }

  .markets-control-group-exchange .segmented .segment-btn{
    flex-shrink:0;
    padding:5px 9px;
    font-size:11.5px;
    font-weight:600;
  }

  .markets-control-group-search{
    min-width:0;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    justify-content:flex-start;
  }

  .markets-control-panel .mkt-search-wrap{
    min-width:0;
    width:100%;
    max-width:none;
    flex:1 1 auto;
  }

  .markets-control-panel .mkt-search-input,
  .markets-control-panel .mkt-network-select{
    height:32px;
    min-height:32px;
    box-sizing:border-box;
  }

  .mkt-refresh-btn{
    width:100%;
    height:32px;
    min-height:32px;
    box-sizing:border-box;
  }

  .markets-control-row-compare{
    padding-top:6px;
    min-width:0;
  }

  .mkt-compare-details{
    min-width:0;
    max-width:100%;
  }

  .mkt-compare-summary{
    padding:8px 10px;
    flex-wrap:wrap;
    align-items:center;
    row-gap:4px;
    column-gap:8px;
    max-width:100%;
    box-sizing:border-box;
  }

  .mkt-compare-summary::after{
    content:"Configure compare filters";
    flex:1 1 100%;
    order:10;
    font-size:11px;
    line-height:1.3;
    color:rgba(148,163,184,0.68);
    padding:2px 0 0 22px;
    box-sizing:border-box;
  }

  .mkt-presence-row-label{
    min-width:40px;
  }

  .markets-control-row-meta{
    min-width:0;
  }

  .markets-meta{
    display:block;
    word-break:break-word;
  }

  .markets-control-panel .mkt-network-select{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .markets-control-panel .mkt-segmented-sm .segment-btn{
    padding:4px 8px;
    font-size:11px;
  }
}

/* Intermediate breakpoint: avoid Network/Search collisions */
@media (max-width: 1120px) and (min-width: 821px){
  .markets-control-row-primary{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px;
  }

  /* Row 1: Exchange */
  .markets-control-group-exchange{
    flex:1 1 100%;
    min-width:100%;
  }

  /* Row 2: Network + Search + Refresh */
  .markets-control-group-network{
    flex:0 0 auto;
  }

  .markets-control-group-search{
    flex:1 1 420px;
    min-width:420px;
    justify-content:flex-end;
  }

  .markets-control-panel .mkt-search-wrap{
    min-width:260px;
  }
}

.markets-control-panel .mkt-search-wrap{
min-width:320px;
max-width:520px;
flex:1;
}

.markets-control-panel .mkt-network-wrap{
min-width:170px;
}

.markets-control-panel .mkt-network-select{
max-width:none;
}

.mkt-presence-panel{
flex:1 1 520px;
min-width:min(520px, 100%);
}

.mkt-presence-builder{
display:flex;
flex-direction:column;
gap:6px;
margin-top:4px;
}

.mkt-presence-row{
display:flex;
align-items:flex-start;
gap:8px;
flex-wrap:wrap;
}

.mkt-presence-row-label{
min-width:44px;
padding-top:5px;
font-size:10px;
letter-spacing:0.04em;
color:rgba(148,163,184,0.78);
text-transform:uppercase;
display:inline-flex;
align-items:center;
gap:6px;
}

.mkt-presence-row-label[title]{
cursor:help;
}

.mkt-segmented-sm{
padding:3px;
border-radius:10px;
}

.mkt-segmented-sm .segment-btn{
padding:5px 9px;
font-size:11.5px;
font-weight:600;
}

/* Markets control panel: clearer active vs idle segments (scoped) */
.markets-control-panel .segment-btn:not(.segment-active){
color:rgba(148,163,184,0.62);
}

.markets-control-panel .segment-btn.segment-active{
background:linear-gradient(180deg, rgba(51,65,85,0.98), rgba(30,41,59,0.98));
color:#f8fafc;
border-color:rgba(148,163,184,0.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 14px rgba(34,211,238,0.07);
}

.markets-control-panel .segment-btn.segment-active:hover{
color:#fff;
border-color:rgba(148,163,184,0.52);
}

.mkt-segmented-sm .segment-btn.segment-active{
font-weight:700;
letter-spacing:0.02em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.09),
0 0 16px rgba(34,211,238,0.09);
}

.markets-meta{
font-size:11px;
color:rgba(148,163,184,0.62);
margin-left:0;
}

.mkt-search-wrap{
display:flex;
flex-direction:column;
gap:4px;
min-width:200px;
flex:1;
max-width:420px;
}

.mkt-search-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:0.04em;
color:#94a3b8;
}

.mkt-search-input{
font:inherit;
padding:8px 12px;
border-radius:6px;
border:1px solid #334155;
background:#0f172a;
color:#e2e8f0;
font-size:13px;
width:100%;
box-sizing:border-box;
}

.mkt-search-input::placeholder{
color:#64748b;
}

.mkt-network-wrap{
display:flex;
flex-direction:column;
gap:4px;
min-width:140px;
}

.mkt-network-select{
font:inherit;
padding:8px 12px;
border-radius:6px;
border:1px solid #334155;
background:#0f172a;
color:#e2e8f0;
font-size:13px;
max-width:220px;
}

.mkt-meta-warn{
display:inline-block;
margin-left:6px;
padding:1px 6px;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
border-radius:4px;
background:#422006;
color:#fbbf24;
vertical-align:middle;
cursor:help;
}

.mkt-meta-warn-inline{
padding:1px 5px;
font-size:11px;
border-radius:4px;
background:#422006;
color:#fbbf24;
}

.mkt-meta-amb{
display:inline-block;
margin-left:4px;
padding:0 5px;
font-size:9px;
font-weight:500;
letter-spacing:0.03em;
border-radius:4px;
background:rgba(15,23,42,0.55);
color:rgba(100,116,139,0.95);
vertical-align:middle;
cursor:help;
border:1px solid rgba(51,65,85,0.35);
opacity:0.88;
}

.mkt-meta-delisted{
display:inline-block;
margin-right:6px;
padding:1px 8px;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.06em;
border-radius:4px;
background:#3f1d1d;
color:#fca5a5;
vertical-align:middle;
border:1px solid #7f1d1d;
}

.mkt-net-cell{
display:flex;
flex-direction:row;
align-items:center;
min-height:1.5em;
}

.mkt-net-pill{
display:inline-flex;
align-items:center;
max-width:100%;
padding:2px 8px;
font-size:10px;
font-weight:500;
letter-spacing:0.03em;
line-height:1.25;
color:rgba(203,213,225,0.82);
background:rgba(30,41,59,0.42);
border:1px solid rgba(71,85,105,0.38);
border-radius:999px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:0.94;
}

.mkt-net-pill--with-icon{
gap:5px;
padding-left:5px;
}

.mkt-net-pill-text{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}

.mkt-net-ic{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:14px;
height:14px;
color:rgba(147,197,253,0.9);
}

.mkt-net-ic--card{
width:15px;
height:15px;
}

.mkt-net-ic--empty{
color:rgba(100,116,139,0.62);
}

.mkt-net-ic--delisted{
color:rgba(252,165,165,0.88);
}

.mkt-net-ic--ethereum{color:rgba(139,174,255,0.92);}
.mkt-net-ic--bsc{color:rgba(245,200,80,0.9);}
.mkt-net-ic--solana{color:rgba(125,211,252,0.88);}
.mkt-net-ic--base{color:rgba(96,165,250,0.9);}
.mkt-net-ic--arbitrum{color:rgba(147,197,253,0.88);}
.mkt-net-ic--polygon{color:rgba(167,139,250,0.9);}
.mkt-net-ic--tron{color:rgba(248,113,113,0.82);}
.mkt-net-ic--unknown{color:rgba(148,163,184,0.78);}

.mkt-net-svg{
display:block;
width:14px;
height:14px;
}

.mkt-net-ic--card .mkt-net-svg{
width:15px;
height:15px;
}

.mkt-net-pill--empty{
color:rgba(100,116,139,0.75);
font-weight:500;
background:rgba(15,23,42,0.4);
border-color:rgba(51,65,85,0.35);
}

.mkt-net-pill--delisted{
color:rgba(252,165,165,0.95);
background:rgba(63,29,29,0.45);
border-color:rgba(127,29,29,0.5);
}

.mkt-net-label{
font-weight:500;
color:rgba(203,213,225,0.88);
}

.mkt-dw-sub{
font-size:9px;
font-weight:400;
color:rgba(71,85,105,0.92);
line-height:1.3;
max-width:min(240px, 36vw);
opacity:0.88;
}

.markets-filter-bar.mkt-search-active .segmented,
.markets-filter-bar.mkt-search-active .mkt-network-wrap{
opacity:0.5;
transition:opacity 0.15s ease;
}

.mkt-contract{
max-width:140px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.mkt-contract-td{
max-width:min(260px, 38vw);
word-break:break-all;
vertical-align:middle;
font-size:10px;
font-weight:400;
line-height:1.35;
color:rgba(100,116,139,0.72);
opacity:0.88;
}

.mkt-contract-link{
color:rgba(125,211,252,0.82);
text-decoration:none;
font-family:ui-monospace, monospace;
}

.mkt-contract-link:hover{
color:rgba(186,230,253,0.98);
text-decoration:underline;
}

.mkt-contract-plain{
font-family:ui-monospace, monospace;
color:rgba(148,163,184,0.82);
}

td.mkt-pair{
vertical-align:middle;
line-height:1.25;
}

.mkt-pair-td-inner{
display:flex;
align-items:center;
min-height:0;
}

.mkt-pair-inner{
display:flex;
align-items:flex-start;
gap:0;
min-width:0;
flex:1;
}

.mkt-pair-inner.mkt-pair-inner--with-icon{
align-items:center;
gap:7px;
min-height:20px;
}

.mkt-token-icon{
width:20px;
height:20px;
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
overflow:hidden;
transform:translateY(0.5px);
}

.mkt-token-icon img.mkt-token-img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
background:transparent;
border:none;
display:block;
}

.mkt-token-icon--ready .mkt-token-img{
opacity:1;
}

.mkt-token-fallback{
width:100%;
height:100%;
min-width:20px;
min-height:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:8px;
font-weight:700;
line-height:1;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(248,250,252,0.9);
background:linear-gradient(148deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 42%, rgba(15,23,42,0.32) 100%);
border-radius:5px;
border:1px solid rgba(100,116,139,0.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.28);
font-variant-numeric:tabular-nums;
}

.mkt-pair-content{
min-width:0;
flex:1;
}

.mkt-card-pair{
flex:1 1 0;
min-width:0;
}

.mkt-base{
font-size:14px;
font-weight:700;
color:#f1f5f9;
}

.mkt-pair-symbol{
font-size:14px;
font-weight:700;
letter-spacing:-0.02em;
line-height:1.2;
color:rgba(248,250,252,0.98);
}

.mkt-exch-td{
vertical-align:middle;
}

.data-table.data-table-markets td.mkt-exch-td--mini{
width:1%;
max-width:6.75rem;
white-space:nowrap;
}

.mkt-exch.mkt-exchange--mini{
font-size:11px;
padding:2px 6px;
min-height:20px;
border-radius:6px;
letter-spacing:0.05em;
}

.mkt-exch{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:22px;
padding:2px 9px;
font-size:10px;
font-weight:600;
letter-spacing:0.06em;
line-height:1;
text-transform:uppercase;
border-radius:7px;
border:1px solid rgba(51,65,85,0.48);
background:linear-gradient(180deg, rgba(30,41,59,0.55) 0%, rgba(15,23,42,0.72) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
color:rgba(203,213,225,0.9);
}

.mkt-exch--binance{
color:rgba(240,185,11,0.92);
border-color:rgba(240,185,11,0.22);
background:rgba(240,185,11,0.06);
}

.mkt-exch--mexc{
color:rgba(56,189,248,0.88);
border-color:rgba(56,189,248,0.2);
background:rgba(56,189,248,0.06);
}

.mkt-exch--kucoin{
color:rgba(168,85,247,0.88);
border-color:rgba(168,85,247,0.2);
background:rgba(168,85,247,0.07);
}

.mkt-exch--gate{
color:rgba(52,211,153,0.85);
border-color:rgba(52,211,153,0.2);
background:rgba(52,211,153,0.06);
}

.mkt-exch--default{
color:rgba(148,163,184,0.88);
}

.mkt-price-cell-inner{
display:inline-block;
font-weight:700;
font-size:14px;
letter-spacing:-0.015em;
font-variant-numeric:tabular-nums;
color:rgba(248,250,252,0.98);
}

.mkt-td-price{
font-weight:600;
font-size:13px;
color:rgba(241,245,249,0.98);
}

.mkt-vol-cell-inner{
font-weight:500;
font-size:12px;
font-variant-numeric:tabular-nums;
color:rgba(163,180,198,0.9);
}

.mkt-td-vol{
font-weight:500;
font-size:12px;
min-width:5.25rem;
color:rgba(148,163,184,0.82);
}

.mkt-td-chg,
.mkt-td-chg30{
font-weight:500;
font-size:12px;
letter-spacing:0.01em;
color:rgba(186,198,214,0.88);
}

.mkt-chg-cell-inner{
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:5px;
min-width:0;
font-variant-numeric:tabular-nums;
}

.mkt-chg-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:0.65rem;
font-size:8px;
line-height:1;
opacity:0.72;
transform:translateY(-0.5px);
}

.mkt-chg-arrow--up{
color:rgba(52,211,153,0.88);
}

.mkt-chg-arrow--down{
color:rgba(248,113,113,0.88);
}

.mkt-chg-arrow--neutral{
font-size:11px;
opacity:0.42;
transform:translateY(-0.5px);
color:rgba(148,163,184,0.75);
}

.mkt-sep{
color:#64748b;
font-weight:400;
}

.mkt-quote{
font-size:13px;
color:#cbd5e1;
}

.mkt-ticker{
font-size:11px;
font-family:ui-monospace, monospace;
color:#64748b;
margin-top:3px;
}

.data-table-markets td.mono:empty{
padding-top:10px;
padding-bottom:10px;
}

/* Markets table — light row dividers, numeric alignment, responsive shell */
.markets-data-wrap{
width:100%;
max-width:100%;
box-sizing:border-box;
min-height:0;
}

/*
 * Dashboard grid: vertical scroll lives inside the Markets table box (not the main page).
 * max-height tracks viewport so the tab does not extend with thousands of rows.
 */
.markets-table-wrap.table-scroll{
border-left:none;
border-right:none;
border-top:none;
border-bottom:1px solid rgba(51,65,85,0.3);
border-radius:0;
background:transparent;
max-height:min(68vh, 640px);
overflow-x:auto;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}

/*
 * Desktop Markets table only (.markets-table-wrap visible; mobile uses cards).
 * Stable column grid (table-layout:fixed), header separation, ellipsis in cells.
 */
.markets-table-wrap.table-scroll .data-table.data-table-markets{
table-layout:fixed;
width:100%;
min-width:880px;
border-collapse:collapse;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th{
z-index:6;
padding-top:11px;
padding-bottom:15px;
border-bottom:2px solid rgba(51,65,85,0.72);
background-clip:padding-box;
box-shadow:
0 2px 0 rgba(15,23,42,0.88),
0 12px 28px rgba(0,0,0,0.28);
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-symbol,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-symbol{
width:18%;
min-width:128px;
max-width:280px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-exchange,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-exchange{
width:9%;
min-width:72px;
max-width:130px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-network,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-network{
width:13%;
min-width:100px;
max-width:200px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-contract,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-contract{
width:22%;
min-width:140px;
max-width:320px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-contract.mkt-contract-td{
max-width:320px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-price,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-price{
width:10%;
min-width:86px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-chg24,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-chg24{
width:8%;
min-width:70px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-chg30,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-chg30{
width:8%;
min-width:70px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets thead th.mkt-col-volume,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-volume{
width:12%;
min-width:88px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-symbol .mkt-pair-td-inner,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-symbol .mkt-pair-inner{
min-width:0;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-symbol .mkt-pair-row,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-symbol .mkt-pair-symbol{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:100%;
}

/* Token logo slot: fixed box + layered img over fallback (reduces blank flash on virtual remount) */
.markets-table-wrap.table-scroll .data-table.data-table-markets .mkt-token-icon{
position:relative;
width:20px;
height:20px;
min-width:20px;
min-height:20px;
flex-shrink:0;
background:rgba(15,23,42,0.5);
}

.markets-table-wrap.table-scroll .data-table.data-table-markets .mkt-token-icon .mkt-token-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
display:block;
z-index:2;
pointer-events:none;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets .mkt-token-icon--ready .mkt-token-img{
opacity:1;
transition:none;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets .mkt-token-icon .mkt-token-fallback{
position:relative;
z-index:1;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-price,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-chg24,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-chg30,
.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-volume{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets td.mkt-col-network .mkt-net-cell{
min-width:0;
max-width:100%;
}

.data-table-markets th,
.data-table-markets td{
border-left:none;
border-right:none;
border-top:none;
}

.data-table.data-table-markets th,
.data-table.data-table-markets td{
padding:8px 10px;
vertical-align:middle;
}

.data-table-markets thead th{
position:sticky;
top:0;
z-index:4;
font-size:10px;
font-weight:500;
letter-spacing:0.085em;
text-transform:uppercase;
color:rgba(148,163,184,0.72);
border-bottom:1px solid rgba(51,65,85,0.2);
background:linear-gradient(180deg, rgba(41,54,78,0.55) 0%, rgba(22,30,48,0.52) 48%, rgba(15,23,42,0.5) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.055);
}

.data-table.data-table-markets thead th.mkt-th-num{
font-weight:500;
letter-spacing:0.085em;
color:rgba(148,163,184,0.68);
padding-top:8px;
padding-bottom:8px;
}

.data-table.data-table-markets thead th.mkt-th--chg24,
.data-table.data-table-markets thead th.mkt-th--chg30{
font-size:10px;
font-weight:500;
letter-spacing:0.1em;
line-height:1.25;
color:rgba(163,180,198,0.78);
font-variant-numeric:tabular-nums;
}

.data-table.data-table-markets thead th.mkt-th--chg30{
letter-spacing:0.09em;
color:rgba(160,176,196,0.76);
}

.data-table.data-table-markets thead th.mkt-th{
vertical-align:middle;
font-weight:500;
letter-spacing:0.095em;
color:rgba(148,163,184,0.7);
}

.data-table.data-table-markets thead th.mkt-th--symbol,
.data-table.data-table-markets thead th.mkt-th--network{
font-weight:500;
letter-spacing:0.095em;
color:rgba(148,163,184,0.7);
}

.data-table.data-table-markets thead th.mkt-th .mkt-th-inner{
display:inline-flex;
align-items:center;
gap:5px;
vertical-align:middle;
line-height:1;
}

.data-table.data-table-markets thead th.mkt-th .mkt-th-ic{
flex-shrink:0;
width:10px;
height:10px;
display:block;
opacity:0.62;
color:rgba(186,198,214,0.72);
transform:translateY(0.12px);
}

.data-table.data-table-markets thead th.mkt-th .mkt-th-text{
letter-spacing:inherit;
line-height:1;
}

.data-table.data-table-markets tbody td{
border-bottom:1px solid rgba(51,65,85,0.28);
will-change:contents;
}

.data-table.data-table-markets tbody tr.markets-spacer-row td{
padding:0;
border:none;
line-height:0;
font-size:0;
vertical-align:top;
}

/* Live price cell: smooth updates + brief up/down tint (Markets WS / poll) */
.data-table-markets .mkt-price-cell-inner.mkt-price-live,
.markets-data-wrap .mkt-card-price.mkt-price-live{
transition:color 160ms ease, background-color 220ms ease;
border-radius:4px;
padding:0 3px;
margin:0 -3px;
display:inline-block;
}

.data-table-markets .mkt-price-cell-inner.mkt-price-tick-up,
.markets-data-wrap .mkt-card-price.mkt-price-tick-up{
background:rgba(34,197,94,0.12);
color:#22c55e;
}

.data-table-markets .mkt-price-cell-inner.mkt-price-tick-down,
.markets-data-wrap .mkt-card-price.mkt-price-tick-down{
background:rgba(239,68,68,0.12);
color:#f87171;
}

.data-table.data-table-markets tbody tr:last-child td{
border-bottom:none;
}

.data-table-markets tbody tr{
transition:background 0.14s ease, box-shadow 0.14s ease;
}

.data-table-markets tbody tr:hover{
background:rgba(30,41,59,0.4);
box-shadow:
inset 0 1px 0 rgba(148,163,184,0.06),
0 0 0 1px rgba(56,189,248,0.08),
0 5px 20px rgba(0,0,0,0.14);
}

.data-table-markets tbody tr:active{
background:rgba(30,41,59,0.48);
}

.data-table-markets tbody tr:hover td.mkt-td-num{
color:rgba(241,245,249,0.96);
}

.data-table.data-table-markets td.mkt-pair,
.data-table.data-table-markets td.mkt-contract-td,
.data-table.data-table-markets td.mkt-net-td{
vertical-align:middle;
}

.mkt-th-num,
.mkt-td-num{
text-align:right;
font-variant-numeric:tabular-nums;
}

.mkt-th-num{
padding-top:10px;
padding-bottom:10px;
}

.mkt-contract-td--compact .mkt-contract-compact{
display:inline-flex;
align-items:center;
gap:6px;
justify-content:flex-end;
flex-wrap:wrap;
max-width:100%;
}

.data-table.data-table-markets td.mkt-contract-td--mini{
max-width:110px;
width:1%;
word-break:normal;
white-space:nowrap;
overflow:hidden;
}

.mkt-contract-td--compact .mkt-contract-compact.mkt-contract--mini{
flex-wrap:nowrap;
max-width:110px;
min-width:0;
}

.mkt-contract-compact.mkt-contract--mini{
max-width:110px;
white-space:nowrap;
overflow:hidden;
}

.mkt-contract-compact.mkt-contract--mini .mkt-contract-link--short,
.mkt-contract-compact.mkt-contract--mini .mkt-contract-plain.mkt-contract-link--short{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
flex:1 1 auto;
}

.mkt-contract-compact.mkt-contract--mini .mkt-contract-copy{
flex-shrink:0;
}

.mkt-contract-compact--mobile-full{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:6px 10px;
justify-content:space-between;
width:100%;
max-width:100%;
}

.mkt-contract-compact--mobile-full .mkt-contract-link--full-mobile,
.mkt-contract-compact--mobile-full .mkt-contract-plain.mkt-contract-link--full-mobile{
flex:1 1 10rem;
min-width:0;
white-space:normal;
word-break:break-all;
overflow:visible;
text-overflow:clip;
text-align:left;
font-size:10px;
line-height:1.35;
}

.mkt-contract-compact--mobile-full .mkt-contract-copy{
flex-shrink:0;
align-self:flex-start;
margin-top:1px;
}

.mkt-contract-copy{
font:inherit;
cursor:pointer;
padding:1px 4px;
min-width:22px;
min-height:22px;
border-radius:4px;
border:1px solid rgba(71,85,105,0.35);
background:rgba(15,23,42,0.35);
color:rgba(148,163,184,0.75);
line-height:1;
font-size:10px;
display:inline-flex;
align-items:center;
justify-content:center;
transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.mkt-contract-copy-ic{
display:block;
opacity:0.65;
line-height:1;
}

.mkt-contract-copy:hover{
border-color:rgba(56,189,248,0.22);
color:rgba(226,232,240,0.92);
background:rgba(30,41,59,0.5);
}

.mkt-contract-copy:hover .mkt-contract-copy-ic{
opacity:0.95;
}

.mkt-contract-link--short{
font-family:ui-monospace, monospace;
font-size:11px;
}

.markets-cards{
display:none;
width:100%;
box-sizing:border-box;
}

@media (max-width: 819px){
.markets-cards{
display:block;
max-height:min(68vh, 640px);
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
min-height:0;
}
.markets-data-wrap .markets-table-wrap{
display:none !important;
}
}

.mkt-card{
border-bottom:1px solid rgba(51,65,85,0.35);
padding:9px 4px 10px;
box-sizing:border-box;
max-width:100%;
}

.mkt-card--glass{
margin-bottom:8px;
padding:9px 12px 10px;
border-radius:12px;
border:1px solid rgba(71,85,105,0.32);
background:linear-gradient(155deg, rgba(30,41,59,0.4) 0%, rgba(15,23,42,0.74) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 22px rgba(0,0,0,0.16);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
min-width:0;
max-width:100%;
box-sizing:border-box;
overflow-x:clip;
}

.mkt-card--glass:hover{
transform:translateY(-1px);
border-color:rgba(100,116,139,0.42);
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 10px 28px rgba(0,0,0,0.2),
0 0 26px rgba(56,189,248,0.08);
}

.mkt-card--glass:active{
transform:translateY(0);
border-color:rgba(71,85,105,0.45);
}

.mkt-card:last-child{
border-bottom:none;
}

.mkt-card-row--head{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}

.mkt-card-row--head .mkt-card-pair{
min-width:0;
display:flex;
align-items:center;
flex:1 1 0;
}

.mkt-card-row--meta{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-top:5px;
padding-top:5px;
border-top:1px solid rgba(51,65,85,0.22);
font-size:11px;
letter-spacing:0.01em;
}

.mkt-card-row--meta-fused{
padding-top:6px;
margin-top:6px;
border-top-color:rgba(51,65,85,0.2);
min-width:0;
}

.mkt-card-meta-fused{
width:100%;
min-width:0;
max-width:100%;
}

.mkt-card-meta-netex{
display:flex;
align-items:center;
justify-content:flex-start;
gap:7px;
min-width:0;
width:100%;
max-width:100%;
flex-wrap:nowrap;
padding:2px 2px;
border-radius:0;
border:none;
background:transparent;
box-shadow:none;
}

.mkt-card-meta-netex .mkt-net-ic--card{
flex-shrink:0;
}

.mkt-card-meta-netex .mkt-card-net-pill{
flex:1 1 auto;
min-width:0;
max-width:calc(100% - 5.75rem);
margin:0;
}

.mkt-card-meta-join{
display:none;
}

.mkt-card-exch-chip{
flex:0 0 auto;
min-width:0;
max-width:min(42%, 6.75rem);
margin-left:auto;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.mkt-card-net-pill{
display:inline-flex;
align-items:center;
max-width:58%;
padding:2px 8px;
font-size:10px;
font-weight:500;
color:rgba(203,213,225,0.8);
background:rgba(30,41,59,0.42);
border:1px solid rgba(71,85,105,0.36);
border-radius:999px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:0.94;
}

.mkt-card-net-pill--empty{
color:rgba(100,116,139,0.75);
background:rgba(15,23,42,0.35);
border-color:rgba(51,65,85,0.35);
}

.mkt-card-net-pill--delisted{
color:rgba(252,165,165,0.95);
background:rgba(63,29,29,0.4);
border-color:rgba(127,29,29,0.45);
}

.mkt-card-net{
font-weight:500;
color:rgba(148,163,184,0.78);
}

.mkt-card-ex{
font-weight:400;
color:rgba(100,116,139,0.92);
text-align:right;
}

.mkt-card-row--chg{
display:grid;
grid-template-columns:1fr 1fr;
align-items:start;
column-gap:12px;
row-gap:2px;
margin-top:7px;
padding-top:7px;
border-top:1px solid rgba(51,65,85,0.25);
}

.mkt-card-row--chg-one{
grid-template-columns:1fr;
}

.mkt-card-chg-group{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}

.mkt-card-chg-group--end{
text-align:right;
align-items:flex-end;
}

.mkt-card-row--chg-one .mkt-card-chg-group{
align-items:flex-start;
}

.mkt-card-chg-label{
font-size:9px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(71,85,105,0.95);
}

.mkt-card-chg-val{
font-size:13px;
font-weight:600;
font-variant-numeric:tabular-nums;
}

.mkt-card-chg-secondary{
font-size:12px;
font-weight:600;
opacity:0.9;
}

.mkt-card-price{
text-align:right;
font-weight:700;
font-size:15px;
font-variant-numeric:tabular-nums;
color:#f1f5f9;
flex-shrink:0;
letter-spacing:-0.01em;
}

.mkt-card-row--metrics{
display:grid;
align-items:start;
column-gap:10px;
row-gap:2px;
margin-top:6px;
padding-top:6px;
border-top:1px solid rgba(51,65,85,0.2);
}

.mkt-card-row--metrics-1{
grid-template-columns:minmax(0, 1fr);
}

.mkt-card-row--metrics-2{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.mkt-card-row--metrics-3{
grid-template-columns:repeat(3, minmax(0, 1fr));
}

.mkt-card-metric{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
}

.mkt-card-row--metrics-2 .mkt-card-metric:nth-child(2):not(.mkt-card-metric--vol),
.mkt-card-row--metrics-3 .mkt-card-metric:nth-child(2){
text-align:center;
align-items:center;
}

.mkt-card-row--metrics-2 .mkt-card-metric--vol,
.mkt-card-row--metrics-3 .mkt-card-metric:nth-child(3){
text-align:right;
align-items:flex-end;
}

.mkt-card-row--metrics-3 .mkt-card-metric:nth-child(1) .mkt-chg-cell-inner{
justify-content:flex-start;
}

.mkt-card-row--metrics-3 .mkt-card-metric:nth-child(2) .mkt-chg-cell-inner{
justify-content:center;
}

.mkt-card-row--metrics-3 .mkt-card-metric:nth-child(3) .mkt-chg-cell-inner{
justify-content:flex-end;
}

.mkt-card-metric-label{
font-size:9px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(71,85,105,0.95);
}

.mkt-card-metric-val{
font-size:12px;
font-weight:600;
font-variant-numeric:tabular-nums;
}

.mkt-card-metric-val--vol{
color:rgba(148,163,184,0.9);
}

.mkt-card-metric .mkt-chg-cell-inner{
justify-content:flex-end;
}

.mkt-card-row--metrics-1 .mkt-card-metric .mkt-chg-cell-inner{
justify-content:flex-start;
}

.mkt-card-row--metrics-2 .mkt-card-metric:first-child .mkt-chg-cell-inner{
justify-content:flex-start;
}

.mkt-card-row--metrics-2 .mkt-card-metric:nth-child(2):not(.mkt-card-metric--vol) .mkt-chg-cell-inner{
justify-content:center;
}

.mkt-card-row--vol{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:10px;
margin-top:6px;
padding-top:7px;
border-top:1px solid rgba(51,65,85,0.22);
}

.mkt-card-vol-label{
font-size:9px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:rgba(71,85,105,0.95);
}

.mkt-card-vol-val{
font-size:12px;
font-weight:600;
font-variant-numeric:tabular-nums;
color:rgba(148,163,184,0.9);
}

.mkt-card-row--contract{
margin-top:5px;
padding-top:5px;
border-top:1px solid rgba(51,65,85,0.2);
}

.mkt-card-chg-val .mkt-chg-cell-inner{
justify-content:flex-end;
}

.mkt-card-row--chg-one .mkt-card-chg-val .mkt-chg-cell-inner{
justify-content:flex-start;
}

.mkt-card-contract{
font-size:10px;
word-break:break-all;
color:rgba(100,116,139,0.75);
}

.mkt-card-contract--actions .mkt-contract-compact:not(.mkt-contract-compact--mobile-full){
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
width:100%;
max-width:100%;
flex-wrap:nowrap;
}

.mkt-card-contract--actions .mkt-contract-compact:not(.mkt-contract-compact--mobile-full) .mkt-contract-link--short,
.mkt-card-contract--actions .mkt-contract-compact:not(.mkt-contract-compact--mobile-full) .mkt-contract-plain.mkt-contract-link--short{
flex:1 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
text-align:left;
}

.mkt-cards-empty{
padding:14px 4px;
color:rgba(148,163,184,0.75);
font-size:13px;
}

.mkt-chg-up{
color:#34d399;
}

.mkt-chg-down{
color:#f87171;
}

/* Markets — wide desktop: denser table presence (viewport ≥1400px; cards/mobile unchanged) */
@media (min-width: 1400px){
.data-table.data-table-markets th,
.data-table.data-table-markets td{
padding:10px 12px;
}

.data-table.data-table-markets tbody td{
font-size:14px;
}

.data-table.data-table-markets .mkt-pair-symbol{
font-size:15px;
}

.data-table.data-table-markets .mkt-price-cell-inner{
font-size:15px;
}

.data-table.data-table-markets .mkt-td-price{
font-size:14px;
}

.data-table.data-table-markets .mkt-vol-cell-inner,
.data-table.data-table-markets .mkt-td-vol{
font-size:13px;
}

.data-table.data-table-markets .mkt-td-chg,
.data-table.data-table-markets .mkt-td-chg30{
font-size:13px;
}

.data-table.data-table-markets .mkt-token-icon{
width:21px;
height:21px;
}

.data-table.data-table-markets .mkt-pair-inner.mkt-pair-inner--with-icon{
min-height:21px;
}

.data-table.data-table-markets .mkt-token-fallback{
min-width:21px;
min-height:21px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets .mkt-token-icon{
width:21px;
height:21px;
min-width:21px;
min-height:21px;
}
}

@media (min-width: 1600px){
.data-table.data-table-markets th,
.data-table.data-table-markets td{
padding:11px 14px;
}

.data-table.data-table-markets tbody td{
font-size:14.5px;
}

.data-table.data-table-markets .mkt-pair-symbol{
font-size:15.5px;
}

.data-table.data-table-markets .mkt-price-cell-inner{
font-size:15.5px;
}

.data-table.data-table-markets .mkt-td-price{
font-size:14.5px;
}

.data-table.data-table-markets .mkt-vol-cell-inner,
.data-table.data-table-markets .mkt-td-vol{
font-size:13.5px;
}

.data-table.data-table-markets .mkt-td-chg,
.data-table.data-table-markets .mkt-td-chg30{
font-size:13.5px;
}

.data-table.data-table-markets .mkt-token-icon{
width:22px;
height:22px;
}

.data-table.data-table-markets .mkt-pair-inner.mkt-pair-inner--with-icon{
min-height:22px;
}

.data-table.data-table-markets .mkt-token-fallback{
min-width:22px;
min-height:22px;
}

.markets-table-wrap.table-scroll .data-table.data-table-markets .mkt-token-icon{
width:22px;
height:22px;
min-width:22px;
min-height:22px;
}
}