/* ═══════════════════════════════════════════════════════════════
   NAI VIDHA WEB — SHARE BAZAAR (market.html + market_detail.html)
   Loaded after nv-web.css; uses the same tokens (--blue, --up, --down,
   --ink*, --line*, --mist, --num). Class prefix: sx-
═══════════════════════════════════════════════════════════════ */
.sx{--sx:#2563EB}
html.dark .sx{--sx:#5B8DEF}
.sx .pg-head .ic{background:color-mix(in srgb,var(--sx) 12%,transparent)}
.sx .pg-head .ic .ms{color:var(--sx)}
.sx .sel:hover,.sx .m-search input:focus{border-color:var(--sx)}
.sx .seg button.on{background:color-mix(in srgb,var(--sx) 10%,transparent);color:var(--sx)}
.sx .mc.on{background:var(--sx);color:#fff}
.sx .m-table th.on .ms{color:var(--sx)}
.sx .md-sec h2 .ms{color:var(--sx)}

/* session chip */
.sx-state{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:800;background:var(--mist);color:var(--ink2)}
.sx-state i{width:8px;height:8px;border-radius:50%;background:var(--ink3)}
.sx-state.open{background:color-mix(in srgb,var(--up) 12%,transparent);color:#15803D}
html.dark .sx-state.open{color:#4ADE80}
.sx-state.open i{background:var(--up);animation:pulse 1.4s ease-in-out infinite}
.sx-state.pre{background:rgba(217,119,6,.12);color:#B45309}
.sx-state.pre i{background:#D97706}
.sx-upd{font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:4px}
.sx-upd .ms{font-size:16px}
.sx-rf{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.sx-rf:hover{border-color:var(--sx);color:var(--sx)}
.sx-rf.busy .ms{animation:spn .8s linear infinite}

/* ── index board ── */
.sx-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sx-ix{position:relative;display:block;border:1px solid var(--line);border-radius:18px;padding:18px 20px 14px;overflow:hidden;background:var(--paper)}
.sx-ix:hover{border-color:var(--acc)}
.sx-ix .top{display:flex;align-items:baseline;gap:8px}
.sx-ix .top b{font-size:16px;font-weight:800}
.sx-ix .top small{font-size:12px;color:var(--ink3);font-family:var(--num);font-weight:600}
.sx-ix .top .sp{flex:1}
.sx-ix .top .ms{font-size:20px;color:var(--ink3)}
.sx-ix .val{display:flex;align-items:flex-end;gap:12px;margin-top:6px;flex-wrap:wrap}
.sx-ix .val .v{font-family:var(--num);font-size:38px;font-weight:800;letter-spacing:-1.4px;line-height:1.05}
.sx-ix .val .c{font-family:var(--num);font-size:14px;font-weight:800;color:var(--acc);margin-bottom:5px}
.sx-ix svg.sp{display:block;width:100%;height:64px;margin-top:10px}
.sx-ix .rng{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px;color:var(--ink3)}
.sx-ix .rng b{font-family:var(--num);color:var(--ink2);font-weight:700}

/* day-range bar in an index card (until history has 2+ points) */
.sx-dr{margin:16px 0 4px}
.sx-dr .trk{position:relative;height:10px;border-radius:6px;background:var(--line2)}
.sx-dr .fl{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 20%,transparent),color-mix(in srgb,var(--acc) 75%,transparent))}
.sx-dr .dt{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--acc);border:3px solid var(--paper);box-shadow:0 1px 6px rgba(0,0,0,.22)}
.sx-dr .pc{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:var(--ink3);opacity:.7}
.sx-dr .lbl{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:12px;color:var(--ink3)}
.sx-dr .lbl b{font-family:var(--num);color:var(--ink);font-weight:800}
.sx-ix .rng{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
/* small quotes under the board (gold, silver, USD, crypto) */
.sx-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;margin-top:12px}
.sx-chip{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--mist);min-width:0}
.sx-chip:hover{background:color-mix(in srgb,var(--sx) 8%,var(--mist))}
.sx-chip .e{font-size:22px;width:30px;text-align:center;flex:none}
.sx-chip .t{min-width:0;flex:1}
.sx-chip .t b{display:block;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-chip .t span{display:block;font-family:var(--num);font-size:14.5px;font-weight:800;margin-top:1px}
.sx-chip .t small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink3);margin-top:1px}
.sx-chip .c{font-family:var(--num);font-size:12px;font-weight:800;flex:none}

/* ── market mood (advance / decline) ── */
.sx-mood{margin-top:22px;padding:18px 20px;border-radius:18px;background:var(--mist)}
.sx-mood .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sx-mood h2{margin:0;font-size:17px;font-weight:800}
.sx-mood .say{font-size:14px;color:var(--ink2)}
.sx-mood .say b{color:var(--ink)}
.sx-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-top:14px;background:var(--line);gap:2px}
.sx-bar i{display:block;height:100%;transition:flex-grow .5s ease}
.sx-bar .u{background:var(--up)}
.sx-bar .f{background:var(--ink3);opacity:.45}
.sx-bar .d{background:var(--down)}
.sx-leg{display:flex;gap:18px;margin-top:10px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.sx-leg span{display:flex;align-items:center;gap:6px}
.sx-leg i{width:10px;height:10px;border-radius:3px}
.sx-leg b{font-family:var(--num);color:var(--ink);font-weight:800}

/* ── movers (reuses .movers/.mv grid, logo instead of emoji) ── */
.sx .movers{margin:22px 0}
.sx .mv a{grid-template-columns:34px minmax(0,1fr) auto auto}

/* logo tile — symbol initials on a colour taken from the symbol */
.sx-logo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--num);font-size:11.5px;font-weight:800;letter-spacing:-.2px;
  color:hsl(var(--h) 60% 34%);background:hsl(var(--h) 75% 93%)}
html.dark .sx-logo{color:hsl(var(--h) 80% 78%);background:hsl(var(--h) 35% 20%)}
.sx-logo.e{font-size:19px;font-family:var(--sans)}
.sx-logo.lg{width:64px;height:64px;border-radius:18px;font-size:18px}
.sx-logo.lg.e{font-size:36px}

/* ── stock table ── */
.sx-table td{vertical-align:middle}
.sx-table .nm{display:flex;align-items:center;gap:10px;min-width:0}
.sx-table .nm b{display:block;font-weight:800;font-size:14px;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.sx-table .nm small{display:block;font-family:var(--num);font-size:11.5px;color:var(--ink3);font-weight:600}
.sx-table td.px{font-family:var(--num);font-weight:800;font-size:14.5px}
.sx-table td.cg{font-family:var(--num);font-weight:800;font-size:13px}
.sx-table td.cg small{display:block;font-size:11.5px;font-weight:600;opacity:.85}
.sx-table td.sk{width:110px;padding-top:6px;padding-bottom:6px}
.sx-table td.sk svg{display:block;width:100px;height:30px}
.sx-table td.rg{width:150px}
.sx-flash-up{animation:fup 1.6s ease}
.sx-flash-dn{animation:fdn 1.6s ease}
@keyframes fup{0%{background:color-mix(in srgb,var(--up) 22%,transparent)}100%{background:transparent}}
@keyframes fdn{0%{background:color-mix(in srgb,var(--down) 22%,transparent)}100%{background:transparent}}

/* mini range bar (day low → high, dot = now) */
.sx-rg{position:relative;height:5px;border-radius:5px;background:var(--line2);margin:4px 0 6px}
.sx-rg i{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--acc,var(--sx));border:2px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.sx-rgl{display:flex;justify-content:space-between;font-family:var(--num);font-size:11px;color:var(--ink3)}

/* ── card view ── */
.sx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sx-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:14px 16px 12px;background:var(--paper)}
.sx-card:hover{border-color:var(--acc);box-shadow:0 8px 24px rgba(15,23,42,.08)}
.sx-card .hd{display:flex;align-items:center;gap:10px;min-width:0}
.sx-card .hd div{min-width:0;flex:1}
.sx-card .hd b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-card .hd small{font-family:var(--num);font-size:11.5px;color:var(--ink3);font-weight:600}
.sx-card .pr{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:12px}
.sx-card .pr .v{font-family:var(--num);font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:1}
.sx-card .pr .c{font-family:var(--num);font-size:12.5px;font-weight:800;color:var(--acc);text-align:right}
.sx-card svg{display:block;width:100%;height:40px;margin-top:10px}

/* ── detail ── */
.sx .md-hero{--acc:var(--sx)}
.sx-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:13.5px;color:var(--ink3)}
.sx-sub .tag{font-family:var(--num);font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--mist);color:var(--ink2)}
.sx .md-big .v{font-size:52px}
.sx .md-side h3{margin:16px 0 8px}
.sx .md-side h3:first-child{margin-top:0}
.sx-returns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:22px}
.sx-ret{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.sx-ret small{display:block;font-size:12px;color:var(--ink3);font-weight:600}
.sx-ret b{display:block;font-family:var(--num);font-size:19px;font-weight:800;margin-top:2px}
.sx-ret em{display:block;font-style:normal;font-size:11px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-rngs{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden}
.sx-rngs button{height:36px;min-width:46px;padding:0 10px;font-family:var(--num);font-size:12.5px;font-weight:800;color:var(--ink2)}
.sx-rngs button+button{border-left:1.5px solid var(--line)}
.sx-rngs button.on{background:var(--sx);color:#fff}
.sx-rngs button:hover:not(.on){background:var(--mist)}
.sx-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--mist);font-size:13px;color:var(--ink2)}
.sx-note .ms{font-size:18px;color:var(--sx)}
.htable tr.day{cursor:pointer}
.htable tr.day:hover td{background:var(--mist)}
.htable tr.day.on td{background:color-mix(in srgb,var(--sx) 9%,transparent)}
.sx-dayview{margin-top:14px;padding:14px;border-radius:14px;border:1px dashed var(--line)}
.sx-dayview h4{margin:0 0 8px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.sx-dayview h4 button{margin-left:auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.sx-dayview h4 button:hover{background:var(--mist);color:var(--ink)}
.sx-dayview .chart{height:200px}
.sx-peers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sx-peers .sx-card .pr .v{font-size:19px}

@media (max-width:1240px){ .sx-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sx-peers{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:960px){
  .sx-board{grid-template-columns:minmax(0,1fr)}
  .sx-returns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-table td.sk,.sx-table th.sk,.sx-table td.rg,.sx-table th.rg{display:none}
}
@media (max-width:620px){ .sx-grid,.sx-peers{grid-template-columns:minmax(0,1fr)} .sx-returns{grid-template-columns:repeat(2,minmax(0,1fr))} .sx .md-big .v{font-size:40px} }
@media (max-width:960px){ .sx-chips{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
.sx-young{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;padding:10px 12px;border-radius:10px;background:var(--paper);font-size:12.5px;line-height:1.55;color:var(--ink2)}
.sx-young .ms{font-size:18px;color:var(--sx)}
.sx-returns[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════
   MARKET PAGE v2 — "बाज़ार का स्काईलाइन"
   Navy hero (same #0B1730 as the home shorts stage) with Nifty / Sensex
   and a skyline: every stock is one column, sorted biggest gain → biggest
   fall, rising (green) or hanging (red) from the zero line.
═══════════════════════════════════════════════════════════════ */
.mx{--navy:#0B1730;--navy2:#13244A;--on:#E8EEF8;--on2:#9FB0CC;--on3:#6F80A0;--gain:#3DDC84;--fall:#FF6B6B}
html.dark .mx{--navy:#060C18;--navy2:#0E1A33}
.mx-hero{margin-top:22px;border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,var(--navy2) 0%,var(--navy) 55%);color:var(--on);padding:26px 28px 22px;position:relative;overflow:hidden}
html.dark .mx-hero{box-shadow:inset 0 0 0 1px var(--line)}
.mx-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mx-top h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:9px}
.mx-top h1 .ms{font-size:24px;color:#7CB8FF}
.mx-top .sp{flex:1}
.mx-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:8px;background:rgba(255,255,255,.08);font-size:12.5px;font-weight:700;color:var(--on2)}
.mx-chip i{width:7px;height:7px;border-radius:50%;background:var(--on3)}
.mx-chip.open{color:var(--gain);background:rgba(61,220,132,.12)}.mx-chip.open i{background:var(--gain);animation:pulse 1.4s ease-in-out infinite}
.mx-chip.pre{color:#FBBF24;background:rgba(251,191,36,.12)}.mx-chip.pre i{background:#FBBF24}
.mx-rf{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--on2);background:rgba(255,255,255,.06)}
.mx-rf:hover{background:rgba(255,255,255,.12);color:#fff}.mx-rf.busy .ms{animation:spn .8s linear infinite}

.mx-body{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:30px;margin-top:22px;align-items:end}
.mx-idx{display:flex;flex-direction:column;gap:18px}
.mx-ix{display:block;color:inherit}
.mx-ix .l{display:flex;align-items:baseline;gap:8px;font-size:13.5px;font-weight:700;color:var(--on2)}
.mx-ix .l small{font-family:var(--num);font-size:11px;font-weight:600;color:var(--on3);letter-spacing:.2px}
.mx-ix .v{font-family:var(--num);font-weight:800;letter-spacing:-1.6px;line-height:1.02;margin-top:4px;font-feature-settings:'tnum'}
.mx-ix.lead .v{font-size:52px}
.mx-ix.second .v{font-size:30px;letter-spacing:-.8px}
.mx-ix .c{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-family:var(--num);font-size:14px;font-weight:800}
.mx-ix.second .c{font-size:12.5px;margin-top:3px}
.mx-ix:hover .v{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.mx-ix .rg{margin-top:12px;max-width:300px}
.mx-ix .rg .trk{position:relative;height:5px;border-radius:5px;background:rgba(255,255,255,.12)}
.mx-ix .rg .dt{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.mx-ix .rg .pc{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--on3)}
.mx-ix .rg .lb{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--num);font-size:11px;color:var(--on3)}

/* skyline */
.mx-sky{min-width:0}
.mx-sky-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mx-sky-h b{font-size:15px;font-weight:800}
.mx-sky-h span{font-size:12px;color:var(--on3)}
.mx-bars{position:relative;height:210px;display:flex;align-items:stretch;gap:3px}
.mx-bars::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,.22)}
.mx-bar{flex:1 1 0;min-width:3px;position:relative;display:block;border-radius:3px}
.mx-bar i{position:absolute;left:0;right:0;border-radius:3px;transform-origin:center bottom;transition:filter .12s}
.mx-bar.up i{bottom:50%;background:linear-gradient(180deg,var(--gain),rgba(61,220,132,.45))}
.mx-bar.dn i{top:50%;transform-origin:center top;background:linear-gradient(0deg,var(--fall),rgba(255,107,107,.45))}
.mx-bar.flat i{top:calc(50% - 1px);height:2px!important;background:var(--on3)}
.mx-bar:hover i,.mx-bar:focus-visible i,.mx-bar.hl i{filter:brightness(1.35) saturate(1.2)}
.mx-bar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mx-bars.grow .mx-bar i{animation:mxgrow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 12ms)}
@keyframes mxgrow{from{transform:scaleY(0)}}
.mx-sky-f{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12.5px;color:var(--on2)}
.mx-sky-f b{font-family:var(--num);font-weight:800}
.mx-sky-f .g b{color:var(--gain)}.mx-sky-f .r b{color:var(--fall)}
.mx-sky-f a:hover{color:#fff}
.mx-tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,calc(-100% - 10px));padding:8px 11px;border-radius:10px;background:#fff;color:#0F172A;
  font-size:12px;line-height:1.45;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none}
.mx-tip b{display:block;font-size:13px}.mx-tip .p{font-family:var(--num);font-weight:800;font-size:14px}
.mx-tip .c{font-family:var(--num);font-weight:800}
.mx-empty{height:210px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--on3);font-size:13px;border:1px dashed rgba(255,255,255,.15);border-radius:14px}

/* bullion / currency / crypto board */
.mx-board{display:flex;align-items:stretch;margin-top:16px;border:1px solid var(--line);border-radius:16px;overflow-x:auto;scrollbar-width:none;background:var(--paper)}
.mx-board::-webkit-scrollbar{display:none}
.mx-q{flex:1 0 auto;display:flex;align-items:center;gap:10px;padding:13px 18px;min-width:170px;border-left:1px solid var(--line)}
.mx-q:first-child{border-left:0}
.mx-q:hover{background:var(--mist)}
.mx-q .e{font-size:22px}
.mx-q .n{font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap}
.mx-q .n small{color:var(--ink3);font-weight:600}
.mx-q .p{font-family:var(--num);font-size:16px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.mx-q .c{font-family:var(--num);font-size:11.5px;font-weight:800;white-space:nowrap}

/* list toolbar + table */
.mx-tools{position:sticky;top:115px;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.mx-tabs{display:flex;gap:2px}
.mx-tabs button{position:relative;height:38px;padding:0 13px;font-size:14px;font-weight:700;color:var(--ink2)}
.mx-tabs button i{font-style:normal;font-family:var(--num);font-size:11px;color:var(--ink3);margin-left:4px}
.mx-tabs button::after{content:'';position:absolute;left:10px;right:10px;bottom:-13px;height:3px;border-radius:3px 3px 0 0;background:var(--sx);transform:scaleX(0);transition:transform .15s}
.mx-tabs button.on{color:var(--ink);font-weight:800}.mx-tabs button.on::after{transform:none}
.mx-tabs button:hover{color:var(--ink)}
.mx-tools .sp{flex:1}
.mx-tools .m-search{max-width:250px}
.mx-tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.mx-tbl th{position:sticky;top:178px;z-index:10;background:var(--paper);text-align:left;font-size:12px;font-weight:800;color:var(--ink3);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
.mx-tbl th.r,.mx-tbl td.r{text-align:right}
.mx-tbl th .ms{font-size:15px;vertical-align:-3px;opacity:.45}.mx-tbl th.on{color:var(--ink)}.mx-tbl th.on .ms{opacity:1;color:var(--sx)}
.mx-tbl td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
.mx-tbl tbody tr{cursor:pointer}.mx-tbl tbody tr:hover{background:var(--mist)}
.mx-tbl .nm{display:flex;align-items:center;gap:10px;min-width:0}
.mx-tbl .nm b{display:block;font-weight:800;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-tbl .nm small{font-family:var(--num);font-size:11.5px;font-weight:600;color:var(--ink3)}
.mx-tbl .px{font-family:var(--num);font-weight:800;font-size:15px;font-feature-settings:'tnum'}
.mx-tbl .mxc{width:210px}
.mx-cb{display:grid;grid-template-columns:1fr 64px;align-items:center;gap:10px}
.mx-cb .trk{position:relative;height:8px;border-radius:4px;background:var(--line2)}
.mx-cb .trk::before{content:'';position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--ink3);opacity:.5}
.mx-cb .trk i{position:absolute;top:0;bottom:0;border-radius:4px}
.mx-cb b{font-family:var(--num);font-size:13px;font-weight:800;text-align:right}
.mx-tbl .rg{width:150px}
.mx-tbl .sk{width:96px}.mx-tbl .sk svg{display:block;width:92px;height:28px}

/* aside rank lists */
.mx-rank h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;font-weight:800}
.mx-rank h2 .ms{font-size:20px}
.mx-rank ol{list-style:none;margin:0;padding:0;counter-reset:r}
.mx-rank li a{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line2)}
.mx-rank li:last-child a{border-bottom:0}
.mx-rank li a::before{counter-increment:r;content:counter(r);font-family:var(--num);font-size:13px;font-weight:800;color:var(--ink3)}
.mx-rank .n{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-rank .n small{display:block;font-family:var(--num);font-size:11px;color:var(--ink3);font-weight:600}
.mx-rank .c{font-family:var(--num);font-size:13px;font-weight:800;text-align:right}
.mx-rank .c small{display:block;font-size:11px;font-weight:600;color:var(--ink3)}
.mx-rank li a:hover .n{color:var(--blue-deep)}

@media (max-width:1140px){ .mx-body{grid-template-columns:minmax(0,1fr)} .mx-ix.lead .v{font-size:44px} .mx-idx{flex-direction:row;flex-wrap:wrap;gap:28px} }
@media (max-width:960px){ .mx-hero{padding:20px 18px 18px;border-radius:18px} .mx-tbl .rg,.mx-tbl .sk{display:none} .mx-tools{top:60px} .mx-tbl th{top:123px} }
@media (max-width:620px){ .mx-bars{height:160px;gap:2px} .mx-ix.lead .v{font-size:38px} .mx-tbl .mxc{width:auto} .mx-cb{grid-template-columns:1fr} .mx-cb .trk{display:none} }
@media (prefers-reduced-motion:reduce){ .mx-bars.grow .mx-bar i{animation:none} }
#list{overflow-x:auto}
@media (max-width:620px){ .mx-tbl .nm b{max-width:42vw} .mx-tbl td,.mx-tbl th{padding-left:8px;padding-right:8px} .mx-tbl .mx-logo,.mx-tbl .sx-logo{width:30px;height:30px;font-size:10px} }
@media (max-width:620px){
  .mx .aside{grid-template-columns:minmax(0,1fr)}
  .mx-tbl .nm b{max-width:30vw}
  .mx-tbl th .full{display:none}
}
@media (min-width:621px){ .mx-tbl th .short{display:none} }

/* ═══ disclaimer: delayed prices, information only, no trading ═══ */
.mk-warn{display:flex;align-items:center;gap:12px;margin-top:16px;padding:11px 16px;border-radius:14px;
  background:#FFF7E6;border:1px solid #F5C77A;color:#7A4A00}
html.dark .mk-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);color:#FCD34D}
.mk-warn>.ms{flex:none;font-size:24px;color:#D97706}
.mk-warn b{display:block;font-size:14.5px;font-weight:800}
.mk-warn span.s{display:block;font-size:13px;line-height:1.5;opacity:.9}
.mk-warn a{margin-left:auto;flex:none;font-size:12.5px;font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:3px}
.mk-disc{margin:26px 0 8px;padding:18px 20px;border-radius:16px;background:var(--mist);border:1px solid var(--line)}
.mk-disc h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:16px;font-weight:800;color:var(--ink)}
.mk-disc h2 .ms{font-size:21px;color:#D97706}
.mk-disc ul{margin:0;padding:0 0 0 20px;display:grid;gap:7px}
.mk-disc li{font-size:13.5px;line-height:1.6;color:var(--ink2)}
.mk-disc li b{color:var(--ink)}
@media (max-width:620px){ .mk-warn{align-items:flex-start} .mk-warn a{display:none} }
.mk-disc{scroll-margin-top:140px}