/* ============================================================
   BLOCKTICKER · MARKETS LAYER
   Charts · sentiment gauges · DEX scanner · exchange trust ·
   DeFi TVL · NFT floor grid · commodity & index desks
   Page accent via --acc: --fx (forex) · --warn (commodities) ·
   --purple (web3/defi/nft) · --reg (indices). body class "news markets".
   ============================================================ */

/* ===== MARKETS MEGA-MENU ICON TINTS ===== */
.mega__ico--cr{color:var(--btc)} .mega__ico--gl{color:var(--up)} .mega__ico--tl{color:var(--neon)}
.mega__ico--fxc{color:var(--fx)} .mega__ico--sent{color:var(--fx)}
.mega__ico--dex{color:var(--purple)} .mega__ico--exch{color:var(--purple)} .mega__ico--defi{color:var(--purple)} .mega__ico--nft{color:var(--purple)}
.mega__ico--gold{color:var(--warn)} .mega__ico--oil{color:var(--btc)} .mega__ico--idx{color:var(--reg)}

/* ===== QUOTE HEADER (asset / pair) ===== */
.quote{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-top:26px}
.quote__mark{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:20px;color:#07080a;flex-shrink:0}
.quote__main{display:flex;flex-direction:column;gap:4px}
.quote__pair{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--txt-2);font-family:var(--font-mono)}
.quote__px{font-family:var(--font-mono);font-size:clamp(34px,4.4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--txt)}
.quote__chg{font-family:var(--font-mono);font-size:16px;font-weight:600}
.quote__chg.up{color:var(--up)} .quote__chg.dn{color:var(--down)}
.quote__spread{margin-left:auto;display:flex;gap:22px;align-items:flex-end}
.quote__bidask{display:flex;flex-direction:column;gap:3px}
.quote__bidask .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.quote__bidask .v{font-family:var(--font-mono);font-size:18px;color:var(--txt)}
.quote__bidask .v.bid{color:var(--up)} .quote__bidask .v.ask{color:var(--down)}

/* ===== CHART ===== */
.chartbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.chartbox__bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chartbox__tf{display:flex;gap:2px;background:var(--bg-1);border:1px solid var(--line);border-radius:9px;padding:3px}
.chartbox__tf button{padding:6px 12px;border-radius:6px;font-family:var(--font-mono);font-size:11px;color:var(--txt-3);transition:.12s}
.chartbox__tf button.on{background:var(--panel-2);color:var(--acc)}
.chartbox__type{display:flex;gap:2px;background:var(--bg-1);border:1px solid var(--line);border-radius:9px;padding:3px}
.chartbox__type button{padding:6px 10px;border-radius:6px;font-size:12px;color:var(--txt-3);transition:.12s}
.chartbox__type button.on{background:var(--panel-2);color:var(--acc)}
.chartbox__ohlc{display:flex;gap:16px;font-family:var(--font-mono);font-size:11px;color:var(--txt-3);flex-wrap:wrap}
.chartbox__ohlc b{color:var(--txt);font-weight:600}
.chartbox__ohlc .up{color:var(--up)} .chartbox__ohlc .dn{color:var(--down)}
.chartbox__plot{position:relative;width:100%;height:380px;background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25% ,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/8.33% 100%;
  background-color:var(--bg)}
.chartbox__plot svg{position:absolute;inset:0;width:100%;height:100%}
.chartbox__axis{position:absolute;right:8px;top:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;
  padding:10px 0;font-family:var(--font-mono);font-size:10px;color:var(--txt-4);text-align:right;pointer-events:none}
.chartbox__foot{display:flex;align-items:center;gap:16px;padding:11px 18px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:10.5px;color:var(--txt-3);letter-spacing:.03em;flex-wrap:wrap}
.chartbox__foot .legend{display:flex;align-items:center;gap:7px}
.chartbox__foot .sw{width:18px;height:3px;border-radius:2px}

/* chart + side rail layout */
.mlayout{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.mrail{display:flex;flex-direction:column;gap:16px}

/* ===== SENTIMENT GAUGE ===== */
.sent{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px}
.sent__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sent__hd h4{font-size:14px;font-weight:600;letter-spacing:-.01em}
.sent__hd .src{font-family:var(--font-mono);font-size:9.5px;color:var(--txt-4);letter-spacing:.05em}
.sentbar{height:34px;border-radius:9px;overflow:hidden;display:flex;border:1px solid var(--line)}
.sentbar i{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:#07080a;transition:width .5s ease}
.sentbar i.long{background:var(--up)} .sentbar i.short{background:var(--down)}
.sent__legend{display:flex;justify-content:space-between;margin-top:11px;font-family:var(--font-mono);font-size:11px}
.sent__legend .l{color:var(--up)} .sent__legend .s{color:var(--down)}
.sent__legend b{color:var(--txt)}
.sent__note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--txt-3);line-height:1.55}
.sent__note b{color:var(--txt-2)}

/* ===== KEY LEVELS ===== */
.levels{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px}
.levels h4{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px}
.levels__row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:12.5px}
.levels__row:last-child{border-bottom:0}
.levels__row .lbl{color:var(--txt-3);display:flex;align-items:center;gap:8px}
.levels__row .lbl .t{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px}
.levels__row .lbl .t.r{color:var(--down);background:rgba(234,57,67,.1)} .levels__row .lbl .t.s{color:var(--up);background:rgba(22,199,132,.1)}
.levels__row .v{color:var(--txt);font-weight:600}
.levels__row.cur{background:linear-gradient(90deg,color-mix(in oklch,var(--acc) 10%,transparent),transparent);margin:0 -20px;padding:9px 20px;border-radius:0}
.levels__row.cur .v{color:var(--acc)}

/* ===== STAT STRIP ===== */
.mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:18px}
.mstat{background:var(--panel);padding:16px 18px}
.mstat dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.mstat dd{font-family:var(--font-mono);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:7px;color:var(--txt)}
.mstat dd.up{color:var(--up)} .mstat dd.dn{color:var(--down)} .mstat dd.acc{color:var(--acc)}

/* ===== MARKETS DATA TABLE (generic) ===== */
.mtable{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.mtable__scroll{overflow-x:auto}
.mtable table{width:100%;border-collapse:collapse;min-width:680px}
.mtable th,.mtable td{padding:14px 18px;text-align:right;white-space:nowrap}
.mtable th:first-child,.mtable td:first-child{text-align:left;position:sticky;left:0;background:var(--panel)}
.mtable thead th{background:var(--bg-1);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);font-weight:500}
.mtable thead th:first-child{background:var(--bg-1)}
.mtable tbody tr{border-bottom:1px solid var(--line);transition:.13s}
.mtable tbody tr:last-child{border-bottom:0}
.mtable tbody tr:hover{background:rgba(255,255,255,.015)}
.mtable tbody tr:hover td:first-child{background:var(--panel-2)}
.mtable td{font-family:var(--font-mono);font-size:13px;color:var(--txt)}
.mtable .rank{color:var(--txt-4);font-size:11px}
.mtable .asset{display:flex;align-items:center;gap:11px;font-family:var(--font-ui)}
.mtable .asset .m{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:11px;color:#fff;flex-shrink:0}
.mtable .asset h4{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.mtable .asset .t{font-family:var(--font-mono);font-size:10px;color:var(--txt-4)}
.mtable .up{color:var(--up)} .mtable .dn{color:var(--down)}
.mtable .chip{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;padding:3px 8px;border-radius:5px;background:var(--bg-1);border:1px solid var(--line);color:var(--txt-3)}
.mtable .spark{width:100px;height:30px}
.mtable .score{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.mtable .score .bar{width:46px;height:5px;border-radius:3px;background:var(--bg-2);overflow:hidden}
.mtable .score .bar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.mtable .mini-btn{font-family:var(--font-mono);font-size:10.5px;color:var(--acc);border:1px solid color-mix(in oklch,var(--acc) 30%,transparent);
  padding:5px 10px;border-radius:7px;background:color-mix(in oklch,var(--acc) 8%,transparent)}

/* ===== NFT FLOOR GRID ===== */
.nftgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nft{background:var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:.15s}
.nft:hover{border-color:var(--line-2);transform:translateY(-2px)}
.nft__art{aspect-ratio:1;background:var(--bg-2);position:relative;display:grid;place-items:center;overflow:hidden}
.nft__art .ph{font-family:var(--font-mono);font-size:10px;color:var(--txt-4);letter-spacing:.04em}
.nft__rank{position:absolute;top:10px;left:10px;font-family:var(--font-mono);font-size:10px;color:var(--txt-2);
  background:rgba(7,8,10,.7);backdrop-filter:blur(8px);padding:3px 8px;border-radius:6px;border:1px solid var(--line)}
.nft__chg{position:absolute;top:10px;right:10px;font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:6px;
  background:rgba(7,8,10,.7);backdrop-filter:blur(8px);border:1px solid var(--line)}
.nft__chg.up{color:var(--up)} .nft__chg.dn{color:var(--down)}
.nft__body{padding:15px 16px}
.nft__body h4{font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:6px}
.nft__body h4 .vf{color:var(--fx);font-size:12px}
.nft__floor{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px}
.nft__floor .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.nft__floor .v{font-family:var(--font-mono);font-size:16px;color:var(--txt);font-weight:600;margin-top:3px}
.nft__floor .vol{text-align:right}
.nft__floor .vol .v{font-size:13px;color:var(--txt-2)}

/* ===== COMMODITY / INDEX DESK CARDS ===== */
.deskgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.deskcard{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:22px;transition:.15s;display:flex;flex-direction:column;gap:14px}
.deskcard:hover{border-color:var(--line-2);background:var(--panel-2)}
.deskcard__hd{display:flex;align-items:center;gap:12px}
.deskcard__mark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#07080a;flex-shrink:0}
.deskcard__hd h3{font-size:16px;font-weight:600;letter-spacing:-.015em}
.deskcard__hd .t{font-family:var(--font-mono);font-size:10px;color:var(--txt-4);margin-top:2px}
.deskcard__px{display:flex;align-items:baseline;gap:10px}
.deskcard__px .v{font-family:var(--font-mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
.deskcard__px .c{font-family:var(--font-mono);font-size:13px;font-weight:600}
.deskcard__px .c.up{color:var(--up)} .deskcard__px .c.dn{color:var(--down)}
.deskcard__spark{height:48px;margin:2px 0}
.deskcard__row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;padding:7px 0;border-top:1px solid var(--line)}
.deskcard__row span{color:var(--txt-3)} .deskcard__row b{color:var(--txt-2)}

/* spec table for a single commodity */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.spec div{background:var(--panel);padding:15px 18px}
.spec dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.spec dd{font-family:var(--font-mono);font-size:15px;color:var(--txt);margin-top:6px}

/* COT / positioning bar */
.cot{display:flex;flex-direction:column;gap:12px}
.cot__row{display:grid;grid-template-columns:96px 1fr 54px;gap:12px;align-items:center;font-family:var(--font-mono);font-size:11.5px}
.cot__row .nm{color:var(--txt-2)}
.cot__track{height:20px;background:var(--bg-2);border-radius:6px;overflow:hidden;display:flex}
.cot__track i{height:100%}.cot__track i.l{background:var(--up)}.cot__track i.s{background:var(--down)}
.cot__row .net{text-align:right;color:var(--txt)}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .mlayout{grid-template-columns:1fr}
  .mrail{flex-direction:row;flex-wrap:wrap}.mrail>*{flex:1;min-width:240px}
  .nftgrid{grid-template-columns:repeat(3,1fr)}
  .deskgrid{grid-template-columns:repeat(2,1fr)}
  .mstats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nftgrid{grid-template-columns:repeat(2,1fr)}
  .deskgrid{grid-template-columns:1fr}
  .quote__spread{margin-left:0;width:100%}
  .chartbox__plot{height:300px}
  .spec{grid-template-columns:1fr}
}