.mx {
    --mx-up: #0b9e6b;
    --mx-down: #e0364a;
    --mx-up-bg: rgba(11, 158, 107, .09);
    --mx-down-bg: rgba(224, 54, 74, .09);
    --mx-ink: #101828;
    --mx-text-2: #566273;
    --mx-text-3: #8b95a5;
    --mx-line: #e4e9f0;
    --mx-line-soft: #f0f3f7;
    --mx-hover: #f6f9fd;
    --mx-sel: #eaf2fe;
    --mx-brand: #1769e8;
    --mx-page: #eef1f6;
    --mx-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .1);
    --mx-ease: cubic-bezier(.22, .8, .24, 1);
    padding: 64px 0 32px;
    background: linear-gradient(180deg, #e8edf5 0, var(--mx-page) 260px);
    color: var(--mx-ink);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    overflow-x: clip;
}
.mx button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mx h1, .mx h2, .mx dl, .mx dd, .mx p { margin: 0; }
.mx-grow { flex: 1 1 auto; }
.mx .is-up { color: var(--mx-up); }
.mx .is-down { color: var(--mx-down); }
.mx-shell { max-width: 1780px; margin: 0 auto; padding: 8px 10px 0; }

.mx-rise { opacity: 0; transform: translateY(10px); }
.mx.is-ready .mx-rise { animation: mx-rise .55s var(--mx-ease) forwards; animation-delay: calc(var(--d) * 55ms); }
@keyframes mx-rise { to { opacity: 1; transform: none; } }
.mx.is-done .mx-rise { opacity: 1; transform: none; animation: none; }

.mx-marquee { overflow: hidden; background: #fff; border-bottom: 1px solid var(--mx-line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mx-marquee-track { display: inline-flex; min-width: max-content; animation: mx-marquee 70s linear infinite; }
.mx-marquee:hover .mx-marquee-track { animation-play-state: paused; }
@keyframes mx-marquee { to { transform: translateX(-50%); } }
.mx-mq { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 18px; font-size: 12px; white-space: nowrap; }
.mx-mq b { font-weight: 500; color: var(--mx-text-2); }
.mx-mq em { font-style: normal; font-weight: 600; }

.mx-gem { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; background: var(--mx-line-soft); color: var(--mx-text-2); font-size: 12px; font-weight: 700; overflow: hidden; }
.mx-gem img { display: block; width: 20px; height: 20px; image-rendering: pixelated; }
.mx-gem svg { width: 62%; height: 62%; }
.mx-gem.is-index { background: var(--mx-sel); color: var(--mx-brand); }
.mx-gem-lg { width: 42px; height: 42px; border-radius: 8px; }
.mx-gem-lg img { width: 32px; height: 32px; }
.mx-gem-sm { width: 18px; height: 18px; border-radius: 3px; background: none; }
.mx-gem-sm img { width: 16px; height: 16px; }

.mx-bar {
    display: flex; align-items: center; gap: 12px 34px; flex-wrap: wrap;
    margin-bottom: 8px; padding: 12px 20px;
    background: #fff; border: 1px solid var(--mx-line); border-radius: 8px; box-shadow: var(--mx-shadow);
}
.mx-sym { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mx-sym-text { display: flex; flex-direction: column; min-width: 0; }
.mx-sym h1 { font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.mx-sym-text span { color: var(--mx-text-3); font-size: 12px; }
.mx-last { display: flex; flex-direction: column; min-width: 120px; }
.mx-last strong { font-size: 27px; line-height: 1.15; font-weight: 700; letter-spacing: -.3px; transition: color .35s; }
.mx-last-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
#mx-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
#mx-arrow.up { border-bottom: 6px solid var(--mx-up); }
#mx-arrow.down { border-top: 6px solid var(--mx-down); }
.mx-stats { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px 32px; }
.mx-stats > div { position: relative; }
.mx-stats dt { color: var(--mx-text-3); font-size: 11.5px; white-space: nowrap; }
.mx-stats dd { margin-top: 2px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.mx-seg.mx-tabs { display: none; }
.mx-grid {
    display: grid; gap: 8px;
    grid-template-columns: 330px minmax(0, 1fr) 268px;
    grid-template-rows: minmax(600px, calc(100vh - 262px)) 330px;
    grid-template-areas: "list chart ladder" "tape info info";
}
.mx-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border: 1px solid var(--mx-line); border-radius: 8px; box-shadow: var(--mx-shadow); overflow: hidden; }
.mx-ladder { grid-area: ladder; }
.mx-center { grid-area: chart; }
.mx-list { grid-area: list; }
.mx-info { grid-area: info; }
.mx-tape { grid-area: tape; }
.mx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; min-height: 40px; padding: 0 14px; border-bottom: 1px solid var(--mx-line-soft); }
.mx-head h2 { font-size: 13.5px; font-weight: 600; }
.mx-head > span { color: var(--mx-text-3); font-size: 11.5px; white-space: nowrap; }
.mx-empty { display: flex; align-items: center; justify-content: center; padding: 34px 12px; color: var(--mx-text-3); }

.mx-seg { position: relative; display: inline-flex; flex: none; }
.mx-seg button { position: relative; z-index: 1; flex: none; transition: color .2s; }
.mx-ind { position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: 0; transition: transform .28s var(--mx-ease), width .28s var(--mx-ease); pointer-events: none; }
.mx-seg-sm button { min-height: 26px; padding: 0 9px; color: var(--mx-text-2); font-size: 12px; }
.mx-seg-sm button:hover { color: var(--mx-ink); }
.mx-seg-sm button.is-on { color: var(--mx-brand); font-weight: 600; }
.mx-seg-sm .mx-ind { background: var(--mx-sel); border-radius: 4px; }
.mx-seg-line { display: flex; }
.mx-seg-line button { min-height: 36px; padding: 0 12px; color: var(--mx-text-2); font-size: 13px; }
.mx-seg-line button:hover { color: var(--mx-ink); }
.mx-seg-line button.is-on { color: var(--mx-ink); font-weight: 600; }
.mx-seg-line .mx-ind { top: auto; height: 2px; border-radius: 2px; background: var(--mx-brand); }
.mx-seg-xs { padding: 2px; background: var(--mx-line-soft); border-radius: 5px; }
.mx-seg-xs button { min-height: 22px; padding: 0 9px; color: var(--mx-text-2); font-size: 11.5px; }
.mx-seg-xs button.is-on { color: var(--mx-ink); font-weight: 600; }
.mx-seg-xs .mx-ind { top: 2px; bottom: 2px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

.mx-ladder-cols, .mx-lv { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr); gap: 6px; padding: 0 14px; }
.mx-ladder-cols { flex: none; min-height: 28px; align-items: center; color: var(--mx-text-3); font-size: 11px; }
.mx-ladder-cols span:not(:first-child), .mx-lv span:not(.a) { text-align: right; }
.mx-ladder-side { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mx-lv { position: relative; flex: 1 1 0; align-items: center; min-height: 18px; font-size: 12px; transition: background .15s; }
.mx-lv:hover { background: var(--mx-hover); }
.mx-lv i { position: absolute; top: 1px; bottom: 1px; right: 0; width: 0; transition: width .6s var(--mx-ease); }
.mx-lv span { position: relative; }
.mx-lv-up i { background: var(--mx-up-bg); }
.mx-lv-down i { background: var(--mx-down-bg); }
.mx-lv-up .a { color: var(--mx-up); }
.mx-lv-down .a { color: var(--mx-down); }
.mx-lv .c { color: var(--mx-text-3); }
.mx-mid { display: flex; align-items: baseline; gap: 8px; flex: none; margin: 4px 0; padding: 7px 14px; border-top: 1px solid var(--mx-line-soft); border-bottom: 1px solid var(--mx-line-soft); background: linear-gradient(90deg, var(--mx-hover), #fff); }
.mx-mid strong { font-size: 19px; font-weight: 700; transition: color .35s; }
.mx-mid span { color: var(--mx-text-3); font-size: 11.5px; }
.mx-ratio { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 14px; border-top: 1px solid var(--mx-line-soft); color: var(--mx-text-3); font-size: 11px; white-space: nowrap; }
.mx-ratio-bar { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--mx-down); overflow: hidden; }
.mx-ratio-bar i { display: block; height: 100%; width: 50%; background: var(--mx-up); transition: width .6s var(--mx-ease); }

.mx-toolbar { display: flex; flex: none; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 40px; padding: 4px 10px; border-bottom: 1px solid var(--mx-line-soft); }
.mx-sep { flex: none; width: 1px; height: 14px; margin: 0 7px; background: var(--mx-line); }
.mx-toggles { display: flex; gap: 1px; }
.mx-toggles button { flex: none; min-height: 26px; padding: 0 9px; border-radius: 4px; color: var(--mx-text-3); font-size: 12px; transition: color .2s, background .2s; }
.mx-toggles button:hover { color: var(--mx-ink); }
.mx-toggles button.is-on { color: var(--mx-brand); background: var(--mx-sel); font-weight: 600; }
.mx-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 28px; border-radius: 4px; color: var(--mx-text-2); transition: background .15s, color .15s, transform .15s; }
.mx-icon:hover { background: var(--mx-hover); color: var(--mx-ink); }
.mx-icon:active { transform: scale(.92); }
.mx-icon svg { width: 15px; height: 15px; }
.mx-legend { display: flex; flex: none; flex-wrap: wrap; gap: 2px 13px; min-height: 25px; padding: 6px 12px 0; font-size: 11.5px; color: var(--mx-text-3); }
.mx-legend b { font-weight: 500; margin-left: 3px; }
.mx-chart { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.mx-canvas { display: block; touch-action: pan-y; cursor: crosshair; }
.mx-canvas.is-drag { cursor: grabbing; }
.mx-state { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--mx-text-3); background: rgba(255, 255, 255, .72); opacity: 0; pointer-events: none; transition: opacity .25s; }
.mx-state.is-on { opacity: 1; }
.mx-spin { display: none; width: 15px; height: 15px; border: 2px solid var(--mx-line); border-top-color: var(--mx-brand); border-radius: 50%; animation: mx-spin .7s linear infinite; }
.mx-state.is-busy .mx-spin { display: block; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-center.is-full { position: fixed; inset: 0; z-index: 2000; border: 0; border-radius: 0; animation: mx-zoom .25s var(--mx-ease); }
@keyframes mx-zoom { from { opacity: .4; transform: scale(.985); } }

.mx-list-tools { flex: none; padding: 10px 12px 0; border-bottom: 1px solid var(--mx-line-soft); }
.mx-search { display: flex; align-items: center; gap: 7px; min-height: 32px; margin-bottom: 4px; padding: 0 10px; background: var(--mx-hover); border: 1px solid transparent; border-radius: 6px; color: var(--mx-text-3); transition: border-color .2s, background .2s, box-shadow .2s; }
.mx-search:focus-within { background: #fff; border-color: var(--mx-brand); box-shadow: 0 0 0 3px rgba(23, 105, 232, .12); }
.mx-search svg { flex: none; width: 14px; height: 14px; }
.mx-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--mx-ink); padding: 0; }
.mx-list-head, .mx-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 74px; gap: 8px; align-items: center; padding: 0 12px; }
.mx-list-head { flex: none; min-height: 28px; }
.mx-list-head button { padding: 0; color: var(--mx-text-3); font-size: 11px; text-align: right; white-space: nowrap; }
.mx-list-head button:first-child { text-align: left; }
.mx-list-head button:hover { color: var(--mx-ink); }
.mx-list-head button.asc::after { content: ' ↑'; }
.mx-list-head button.desc::after { content: ' ↓'; }
.mx-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mx-line) transparent; }
.mx-row { position: relative; min-height: 46px; text-align: right; cursor: pointer; transition: background .15s; }
.mx-row::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: var(--mx-brand); transform: scaleY(0); transition: transform .22s var(--mx-ease); }
.mx-row:hover { background: var(--mx-hover); }
.mx-row:focus-visible { outline: 2px solid var(--mx-brand); outline-offset: -2px; }
.mx-row.is-on { background: var(--mx-sel); }
.mx-row.is-on::before { transform: scaleY(1); }
.mx-row.flash-up { animation: mx-flash-up 1s ease-out; }
.mx-row.flash-down { animation: mx-flash-down 1s ease-out; }
@keyframes mx-flash-up { from { background: rgba(11, 158, 107, .2); } }
@keyframes mx-flash-down { from { background: rgba(224, 54, 74, .2); } }
.mx-row-name { display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; }
.mx-row-text { display: flex; flex-direction: column; min-width: 0; }
.mx-row-text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-row-text small { color: var(--mx-text-3); font-size: 10.5px; white-space: nowrap; }
.mx-star { flex: none; display: inline-flex; color: #d6dce5; transition: color .15s, transform .15s; }
.mx-star:hover { color: #f0a020; transform: scale(1.2); }
.mx-star.is-on { color: #f0a020; }
.mx-star svg { width: 12px; height: 12px; fill: currentColor; }
.mx-row-price { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.mx-row-pct { justify-self: end; min-width: 68px; padding: 4px 6px; border-radius: 4px; font-size: 12px; font-weight: 600; text-align: center; color: #fff; background: #aab3c0; transition: background .3s; }
.mx .mx-row-pct.is-up { color: #fff; background: var(--mx-up); }
.mx .mx-row-pct.is-down { color: #fff; background: var(--mx-down); }

.mx-info-tabs { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; border-bottom: 1px solid var(--mx-line-soft); }
.mx-info-tabs em { margin-left: 5px; padding: 0 5px; border-radius: 8px; background: var(--mx-up); color: #fff; font-size: 10px; font-style: normal; }
.mx-info-tabs em:empty { display: none; }
.mx-next { color: var(--mx-text-3); font-size: 11.5px; white-space: nowrap; }
.mx-info-body { flex: 1 1 0; min-height: 0; overflow: auto; animation: mx-fade .3s ease-out; }
@keyframes mx-fade { from { opacity: .3; } }
.mx-over { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 0 30px; min-height: 100%; padding: 16px 20px; }
.mx-over-ranges { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-right: 30px; border-right: 1px solid var(--mx-line-soft); }
.mx-range-title { display: block; margin-bottom: 8px; color: var(--mx-text-3); font-size: 12px; }
.mx-range-line { position: relative; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--mx-down), #f0c040, var(--mx-up)); }
.mx-range-line i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; background: var(--mx-ink); box-shadow: 0 1px 4px rgba(16, 24, 40, .35); transition: left .6s var(--mx-ease); }
.mx-range-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; font-weight: 500; }
.mx-over-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: center; gap: 22px 16px; }
.mx-st span { display: block; color: var(--mx-text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-st strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 600; white-space: nowrap; }
.mx-rank { padding: 4px 0; }
.mx-rank-row { display: grid; grid-template-columns: 22px 26px minmax(100px, 1.3fr) minmax(70px, 1fr) minmax(70px, .7fr) minmax(70px, .7fr); gap: 10px; align-items: center; min-height: 47px; padding: 0 20px; cursor: pointer; border-bottom: 1px solid var(--mx-line-soft); transition: background .15s; }
.mx-rank.is-new .mx-rank-row { opacity: 0; animation: mx-row-in .4s var(--mx-ease) forwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes mx-row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.mx-rank-row:hover { background: var(--mx-hover); }
.mx-rank-row .n { color: var(--mx-text-3); font-weight: 600; }
.mx-rank-row:nth-child(-n+3) .n { color: var(--mx-brand); }
.mx-rank-row b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-rank-row .sp svg { display: block; width: 100%; height: 28px; }
.mx-rank-row .p { text-align: right; font-weight: 500; }
.mx-rank-row .q { text-align: right; font-weight: 600; }
.mx-draw { clip-path: inset(0 100% 0 0); animation: mx-draw .9s var(--mx-ease) forwards; }
@keyframes mx-draw { to { clip-path: inset(0 -2px 0 0); } }
.mx-lims { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 14px 16px; }
.mx-lim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 14px; border: 1px solid var(--mx-line); border-radius: 8px; background: linear-gradient(135deg, #fff, var(--mx-hover)); transition: transform .2s var(--mx-ease), box-shadow .2s; }
.mx-lim:hover { transform: translateY(-2px); box-shadow: var(--mx-shadow); }
.mx-lim b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-lim strong { font-size: 15px; font-weight: 700; text-align: right; }
.mx-lim small { color: var(--mx-text-3); font-size: 11px; font-weight: 400; }
.mx-lim span { color: var(--mx-text-3); font-size: 12px; }
.mx-lim em { color: var(--mx-up); font-size: 12.5px; font-weight: 600; font-style: normal; text-align: right; }

.mx-tape-cols, .mx-tp { display: grid; grid-template-columns: minmax(0, 1fr) 56px 66px; gap: 6px; padding: 0 14px; }
.mx-tape-cols { flex: none; min-height: 26px; align-items: center; color: var(--mx-text-3); font-size: 11px; }
.mx-tape-cols span:not(:first-child), .mx-tp > span:not(:nth-child(2)) { text-align: right; }
.mx-tape-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mx-line) transparent; }
.mx-tp { position: relative; min-height: 22px; align-items: center; font-size: 12px; transition: background .15s; }
.mx-tp > i { position: absolute; top: 1px; bottom: 1px; right: 0; background: rgba(23, 105, 232, .05); }
.mx-tp > span { position: relative; text-align: left; }
.mx-tp > span:nth-child(2) { text-align: left; }
.mx-tp > span:nth-child(3), .mx-tp > span.tm { text-align: right; }
.mx-tp:hover { background: var(--mx-hover); }
.mx-tp .tm { color: var(--mx-text-3); }
.mx-tp small { display: block; color: var(--mx-text-3); font-size: 10.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-tp.is-new { animation: mx-tp-in .5s var(--mx-ease), mx-flash-down 1.4s ease-out; }
@keyframes mx-tp-in { from { opacity: 0; transform: translateY(-10px); } }

.mx-gauge { display: flex; flex: none; align-items: center; gap: 8px; }
.mx-gauge svg { flex: none; width: 74px; height: 41px; }
#mx-needle { transform-origin: 60px 60px; transform: rotate(-90deg); transition: transform 1s var(--mx-ease); }
.mx-gauge strong { display: block; font-size: 17px; line-height: 1.1; font-weight: 700; }
.mx-gauge span { color: var(--mx-text-3); font-size: 11.5px; white-space: nowrap; }

.mx-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.mx-toast { display: flex; align-items: center; gap: 9px; min-width: 240px; max-width: 340px; padding: 10px 14px; border-radius: 8px; background: #101828; color: #fff; font-size: 12.5px; box-shadow: 0 14px 34px -12px rgba(16, 24, 40, .5); animation: mx-toast-in .4s var(--mx-ease); transition: opacity .3s, transform .3s; }
.mx-toast.is-out { opacity: 0; transform: translateX(16px); }
.mx-toast .mx-gem { background: rgba(255, 255, 255, .12); }
@keyframes mx-toast-in { from { opacity: 0; transform: translateX(26px); } }

.mx-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0 20px; padding: 6px 16px; }
.mx-big-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--mx-line-soft); cursor: pointer; }
.mx-big-row .mx-gem { grid-row: span 2; }
.mx-big-row b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-big-row strong { font-weight: 600; text-align: right; }
.mx-big-row small { color: var(--mx-text-3); font-size: 11px; }
.mx-big-row em { color: var(--mx-text-3); font-size: 11px; font-style: normal; text-align: right; }
.mx-cmp { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100%; }
.mx-cmp-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; padding: 12px; border-right: 1px solid var(--mx-line-soft); overflow-y: auto; }
.mx .mx-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border: 1px solid var(--mx-line); border-radius: 12px; color: var(--mx-text-2); font-size: 11.5px; transition: background .15s, color .15s, border-color .15s; }
.mx .mx-chip i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mx-line); }
.mx .mx-chip.is-on { color: var(--mx-ink); border-color: var(--mx-text-3); }
.mx-cmp-plot { position: relative; min-width: 0; padding: 12px 58px 12px 14px; }
.mx-cmp-plot svg { display: block; width: 100%; height: 100%; min-height: 240px; overflow: visible; }
.mx-cmp-plot text { fill: var(--mx-text-3); font-size: 10.5px; }
.mx-calc { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 0 28px; padding: 18px 20px; }
.mx-field { display: block; color: var(--mx-text-3); font-size: 12px; }
.mx-field input { display: block; width: 100%; min-height: 36px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--mx-line); border-radius: 6px; outline: 0; font: inherit; font-size: 15px; color: var(--mx-ink); transition: border-color .2s, box-shadow .2s; }
.mx-field input:focus { border-color: var(--mx-brand); box-shadow: 0 0 0 3px rgba(23, 105, 232, .12); }
.mx-calc-note { margin-top: 12px !important; color: var(--mx-text-3); font-size: 12px; line-height: 1.7; }
.mx-calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 20px 16px; }
.mx-alert { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 0 28px; min-height: 100%; padding: 16px 20px; }
.mx-alert-form { display: flex; flex-direction: column; gap: 12px; }
.mx-alert-form .mx-seg { align-self: flex-start; }
.mx .mx-primary { min-height: 36px; border-radius: 6px; background: var(--mx-brand); color: #fff; font-weight: 600; transition: background .15s, transform .1s; }
.mx .mx-primary:hover { background: #0d58cd; }
.mx .mx-primary:active { transform: scale(.98); }
.mx-alert-list { min-width: 0; overflow-y: auto; }
.mx-alert-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 42px; border-bottom: 1px solid var(--mx-line-soft); }
.mx-alert-row b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-alert-row small { color: var(--mx-text-3); }
.mx .mx-alert-row button { color: var(--mx-text-3); font-size: 12px; }
.mx .mx-alert-row button:hover { color: var(--mx-up); }
.mx-login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; padding: 30px; color: var(--mx-text-3); }
.mx-login a { color: var(--mx-brand); font-weight: 600; }

@media (max-width: 1320px) {
    .mx-grid {
        grid-template-columns: 320px minmax(0, 1fr);
        grid-template-rows: minmax(600px, calc(100vh - 262px)) 400px 330px;
        grid-template-areas: "list chart" "tape ladder" "info info";
    }
}
@media (max-width: 900px) {
    .mx { padding: 56px 0 84px; }
    .mx-shell { padding: 0; }
    .mx-bar { margin: 0; padding: 10px 12px; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
    .mx-gem-lg { width: 34px; height: 34px; font-size: 15px; }
    .mx-sym h1 { font-size: 16px; }
    .mx-last { margin-left: auto; align-items: flex-end; min-width: 0; }
    .mx-last strong { font-size: 22px; }
    .mx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; flex-basis: 100%; }
    .mx-stats dt, .mx-stats dd { overflow: hidden; text-overflow: ellipsis; }
    .mx-stats dd { font-size: 12px; }
    .mx-seg.mx-tabs { display: flex; background: #fff; border-bottom: 1px solid var(--mx-line); }
    .mx-tabs button { flex: 1 1 0; min-height: 40px; color: var(--mx-text-2); }
    .mx-tabs button.is-on { color: var(--mx-brand); font-weight: 600; }
    .mx-tabs .mx-ind { top: auto; height: 2px; background: var(--mx-brand); }
    .mx-grid { display: block; }
    .mx-panel { display: none; border-width: 0; border-radius: 0; box-shadow: none; opacity: 1; transform: none; animation: mx-fade .25s ease-out; }
    .mx-grid[data-pane-on="chart"] .mx-center,
    .mx-grid[data-pane-on="list"] .mx-list,
    .mx-grid[data-pane-on="ladder"] .mx-ladder,
    .mx-grid[data-pane-on="tape"] .mx-tape,
    .mx-grid[data-pane-on="info"] .mx-info { display: flex; height: calc(100vh - 320px); min-height: 440px; }
    .mx-over, .mx-calc, .mx-alert, .mx-cmp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .mx-cmp-list { border-right: 0; }
    .mx-calc-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-gauge { display: none; }
    .mx-toasts { left: 12px; right: 12px; bottom: 74px; }
    .mx-toast { max-width: none; }
    .mx-over-ranges { padding-right: 0; border-right: 0; }
    .mx-over-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-rank-row { grid-template-columns: 18px 26px minmax(0, 1fr) 70px 64px; gap: 8px; padding: 0 12px; }
    .mx-rank-row .sp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mx *, .mx *::before { animation: none !important; transition: none !important; }
    .mx-rise { opacity: 1; transform: none; }
    .mx-rank-row { opacity: 1; }
    .mx-draw { clip-path: none; }
}