/* JGQT_MARKET_DECK_UI_V1 — read-only market visualization surface. */
.mdVisuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.marketDeck {
  --md-cyan: #38d2ff;
  --md-green: #00e887;
  --md-red: #ff385b;
  --md-amber: #ffc24d;
  --md-ink: #eaf5ff;
  --md-muted: #748696;
  --md-line: #162633;
  --md-panel: #05090e;
  position: relative;
  z-index: 7;
  margin-top: 8px;
  border: 1px solid #1a2d3a;
  background:
    radial-gradient(circle at 78% -20%, rgba(56, 210, 255, .11), transparent 36%),
    linear-gradient(180deg, #070d13 0%, #03070b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .025);
  overflow: hidden;
}

.marketDeck::before {
  content: "";
  position: absolute;
  inset: 34px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 210, 255, .46), transparent);
  pointer-events: none;
}

.mdTapeShell {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 36px;
  min-height: 34px;
  background: #020507;
  border-bottom: 1px solid var(--md-line);
}

.mdTapeLabel,
.mdTapeControl {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #071017;
  color: var(--md-cyan);
  border: 0;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .13em;
}

.mdTapeLabel { border-right: 1px solid var(--md-line); }
.mdTapeControl {
  min-width: 0;
  padding: 0;
  border-left: 1px solid var(--md-line);
  color: var(--md-muted);
}
.mdTapeControl:hover,
.mdTapeControl:focus-visible { color: var(--md-cyan); background: #0a1720; }
.mdTapeControl:focus-visible { outline: 1px solid var(--md-cyan); outline-offset: -2px; }

.mdLiveDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--md-green);
  box-shadow: 0 0 0 3px rgba(0, 232, 135, .08), 0 0 10px rgba(0, 232, 135, .65);
  animation: mdPulse 1.8s ease-in-out infinite;
}

.mdTapeViewport {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.mdTapeTrack {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  animation: mdTicker 50s linear infinite;
  will-change: transform;
}
.mdTapeTrack.isPaused { animation-play-state: paused; }
.mdTapeViewport:hover .mdTapeTrack { animation-play-state: paused; }

.mdTapeSequence {
  display: flex;
  align-items: stretch;
  flex: none;
}

.mdTapeItem {
  display: flex;
  flex: none;
  align-items: center;
  border-right: 1px solid #0d1820;
}

.mdTapeItem button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 33px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: var(--md-ink);
  font-size: 9px;
  font-weight: 800;
}
.mdTapeItem button:hover,
.mdTapeItem button:focus-visible { background: rgba(56, 210, 255, .075); }
.mdTapeItem button:focus-visible { outline: 1px solid var(--md-cyan); outline-offset: -2px; }
.mdTapeSymbol { color: #dbe8f1; letter-spacing: .05em; }
.mdTapeLast { color: #a8b6c1; font-variant-numeric: tabular-nums; }
.mdTapeMove { font-variant-numeric: tabular-nums; }
.mdTapeMove.up { color: var(--md-green); }
.mdTapeMove.down { color: var(--md-red); }
.mdTapeMove.flat { color: var(--md-muted); }
.mdTapeArrow { font-size: 8px; }
.mdTapePlaceholder {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--md-muted);
  font-size: 8px;
  letter-spacing: .1em;
}

.mdWorkstation { min-width: 0; }

.mdCommandBar {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.25fr) minmax(150px, .55fr);
  align-items: stretch;
  min-height: 74px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(2, 6, 9, .72);
}

.mdInstrument,
.mdQuote {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
}

.mdInstrument { gap: 11px; }
.mdLogo {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #27404f;
  border-radius: 11px;
  background: linear-gradient(145deg, #142531, #071018);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 7px 18px rgba(0, 0, 0, .2);
  color: var(--md-cyan);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: -.04em;
}
.mdLogo::after {
  content: "";
  position: absolute;
  inset: auto 5px 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 210, 255, .7), transparent);
}
.mdLogo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mdLogo img[hidden] { display: none; }
.mdInstrumentCopy { min-width: 0; }
.mdEyebrow {
  color: var(--md-cyan);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}
.mdSymbolLine { display: flex; align-items: baseline; gap: 9px; min-width: 0; margin-top: 4px; }
.mdSymbolLine strong {
  flex: none;
  color: #fff;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.02em;
}
.mdSymbolLine span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8193a1;
  font-size: 8px;
}

.mdSearch {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 52px;
  align-self: center;
  height: 38px;
  margin: 0 12px;
  border: 1px solid #24404f;
  background: #061018;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 24px rgba(56, 210, 255, .035);
}
.mdSearch:focus-within {
  border-color: var(--md-cyan);
  box-shadow: 0 0 0 2px rgba(56, 210, 255, .1), 0 0 26px rgba(56, 210, 255, .08);
}
.mdSearchGlyph { display: grid; place-items: center; color: var(--md-cyan); font-size: 19px; }
.mdSearch input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f1f8fd;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mdSearch input::placeholder { color: #50616e; opacity: 1; }
.mdSearchSubmit {
  min-width: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid #203744;
  background: #0d202b;
  color: var(--md-cyan);
  font-size: 8px;
  letter-spacing: .08em;
}
.mdSearchSubmit:hover,
.mdSearchSubmit:focus-visible { background: var(--md-cyan); color: #001018; }
.mdSearchSubmit:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

.mdSuggestions {
  position: absolute;
  z-index: 50;
  top: calc(100% + 5px);
  left: -1px;
  right: -1px;
  max-height: 268px;
  overflow-y: auto;
  border: 1px solid #274656;
  background: rgba(4, 10, 15, .985);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .72);
}
.mdSuggestions[hidden] { display: none; }
.mdSuggestion {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid #111f28;
  background: transparent;
  text-align: left;
}
.mdSuggestion:last-child { border-bottom: 0; }
.mdSuggestion:hover,
.mdSuggestion.active,
.mdSuggestion[aria-selected="true"] { background: #0b1d27; }
.mdSuggestion:focus-visible { outline: 1px solid var(--md-cyan); outline-offset: -2px; }
.mdSuggestionSymbol { color: var(--md-cyan); font-size: 11px; font-weight: 950; }
.mdSuggestionDescription { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c7d3dc; font-size: 9px; }
.mdSuggestionExchange { color: #5f7281; font-size: 7px; letter-spacing: .07em; }
.mdSuggestionMessage { padding: 12px; color: var(--md-muted); font-size: 8px; letter-spacing: .06em; }

.mdQuote {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  border-left: 1px solid var(--md-line);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mdLast { color: #fff; font-size: 22px; font-weight: 950; line-height: 1; letter-spacing: -.035em; }
.mdChange { margin-top: 5px; color: var(--md-muted); font-size: 9px; font-weight: 900; }
.mdChange.up { color: var(--md-green); }
.mdChange.down { color: var(--md-red); }
.mdChange.flat { color: var(--md-muted); }

.mdStatusBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 41px;
  padding: 5px 8px 5px 11px;
  border-bottom: 1px solid var(--md-line);
  background: rgba(6, 12, 17, .84);
}
.mdStatusCluster,
.mdRangeBar { display: flex; align-items: center; gap: 5px; }
.mdBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 19px;
  padding: 0 7px;
  border: 1px solid #1b303d;
  border-radius: 2px;
  background: #071017;
  color: #758795;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .06em;
  white-space: nowrap;
}
.mdBadge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.mdBadgeLive { color: var(--md-green); border-color: rgba(0, 232, 135, .24); }
.mdBadgeClosed { color: var(--md-amber); border-color: rgba(255, 194, 77, .24); }
.mdBadgeError { color: var(--md-red); border-color: rgba(255, 56, 91, .28); }

.mdRangeBar { flex-wrap: wrap; justify-content: flex-end; }
.mdRange {
  min-width: 0;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #6f8393;
  font-size: 8px;
  letter-spacing: .04em;
}
.mdRange:hover { color: #eaf5ff; background: #0c1820; }
.mdRange:focus-visible { outline: 1px solid var(--md-cyan); outline-offset: -1px; }
.mdRange.active,
.mdRange[aria-pressed="true"] {
  border-color: #275164;
  background: linear-gradient(180deg, #123041, #091923);
  color: var(--md-cyan);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.mdRangeDivider { width: 1px; height: 17px; margin: 0 2px; background: #243540; }

.mdChartStage {
  position: relative;
  height: 462px;
  min-height: 340px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px),
    #03070a;
  background-size: 52px 52px;
}
.mdChart { position: absolute; inset: 0; z-index: 1; }
.mdChart canvas { cursor: crosshair; }
.mdChartLegend {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 10px;
  right: 84px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  color: #6e8292;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px #000;
}
.mdChartLegend b { color: #cbd8e2; font-weight: 850; }
.mdLegendSymbol { color: var(--md-cyan); font-weight: 950; letter-spacing: .05em; }

.mdChartLoading,
.mdChartEmpty {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(3, 7, 10, .92);
  color: #dce8f0;
  letter-spacing: .1em;
}
.mdChartLoading[hidden],
.mdChartEmpty[hidden] { display: none; }
.mdChartLoading strong,
.mdChartEmpty strong { font-size: 10px; }
.mdChartLoading small,
.mdChartEmpty span { color: var(--md-muted); font-size: 8px; letter-spacing: .07em; text-align: center; }
.mdLoader {
  width: 26px;
  height: 26px;
  border: 2px solid #17303e;
  border-top-color: var(--md-cyan);
  border-radius: 50%;
  animation: mdSpin .8s linear infinite;
  box-shadow: 0 0 15px rgba(56, 210, 255, .1);
}
.mdChartEmpty button {
  min-width: 92px;
  margin-top: 5px;
  padding: 8px 12px;
  border-color: #285166;
  background: #0b1b24;
  color: var(--md-cyan);
  font-size: 8px;
}
.mdChartEmpty button:hover,
.mdChartEmpty button:focus-visible { border-color: var(--md-cyan); background: #102937; }

.mdFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  padding: 5px 9px;
  border-top: 1px solid #13232d;
  background: #04090d;
  color: #526472;
  font-size: 7px;
  letter-spacing: .06em;
}
.mdFooterSource { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mdReadOnlyMark { padding: 2px 5px; border: 1px solid rgba(0, 232, 135, .27); color: var(--md-green); }
.mdTradingView { color: #6e8494; text-decoration: none; }
.mdTradingView:hover,
.mdTradingView:focus-visible { color: var(--md-cyan); text-decoration: underline; }

@keyframes mdTicker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes mdPulse {
  0%, 100% { opacity: .56; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes mdSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .mdCommandBar { grid-template-columns: minmax(225px, .8fr) minmax(250px, 1.2fr) minmax(130px, .5fr); }
  .mdChartStage { height: 420px; }
  .mdSymbolLine span { max-width: 120px; }
  .mdStatusBar { align-items: flex-start; flex-direction: column; }
  .mdRangeBar { width: 100%; justify-content: flex-start; }
}

@media (max-width: 680px) {
  .marketDeck { margin-top: 5px; }
  .mdTapeShell { grid-template-columns: 66px minmax(0, 1fr) 34px; }
  .mdTapeLabel { font-size: 7px; }
  .mdCommandBar { grid-template-columns: minmax(0, 1fr) minmax(112px, .36fr); }
  .mdInstrument { min-height: 65px; padding: 10px; }
  .mdLogo { flex-basis: 36px; width: 36px; height: 36px; border-radius: 9px; }
  .mdSymbolLine strong { font-size: 18px; }
  .mdQuote { min-width: 0; padding: 10px; }
  .mdLast { font-size: 18px; }
  .mdSearch { grid-column: 1 / -1; grid-row: 2; width: auto; margin: 0 9px 10px; }
  .mdSuggestions { max-height: 210px; }
  .mdStatusCluster { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .mdRange { flex: 1 1 43px; padding: 0 5px; }
  .mdRangeDivider { display: none; }
  .mdChartStage { height: 365px; min-height: 300px; }
  .mdChartLegend { right: 10px; gap: 6px; }
  .mdFooter { align-items: flex-start; }
  .mdFooterSource span:nth-child(2) { display: none; }
}

@media (max-width: 390px) {
  .mdInstrumentCopy { max-width: 150px; }
  .mdSymbolLine span { display: none; }
  .mdBadge:nth-child(2) { display: none; }
  .mdChartStage { height: 320px; }
  .mdChartLegend span:nth-last-child(-n+2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mdTapeTrack,
  .mdLiveDot,
  .mdLoader { animation: none !important; }
  .mdTapeViewport { overflow-x: auto; mask-image: none; }
  .mdTapeControl { display: none; }
}

/* JGQT_R6_9_19_MICROSTRUCTURE_RAIL */
.mdChartStage.mdMicrostructureEnabled .mdChart { right: 292px; }
.mdChartStage.mdMicrostructureEnabled .mdChartLegend { right: 376px; }
.mdChartStage.mdMicrostructureEnabled .mdChartLoading,
.mdChartStage.mdMicrostructureEnabled .mdChartEmpty { right: 292px; }

.mdMicroRail {
  position:absolute; z-index:12; top:0; right:0; bottom:0; width:292px;
  display:flex; flex-direction:column; overflow:hidden;
  border-left:1px solid #17303d;
  background:linear-gradient(180deg,#061016 0%,#03080c 100%);
  color:#aebdca; font-variant-numeric:tabular-nums;
  box-shadow:-8px 0 24px rgba(0,0,0,.22);
}
.mdMicroHead {
  min-height:35px; padding:7px 9px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-bottom:1px solid #17303d; background:#071219;
}
.mdMicroHead>div:first-child { min-width:0; display:flex; align-items:baseline; gap:7px; }
.mdMicroHead b { color:#3af1c6; font-size:8px; font-weight:950; letter-spacing:.12em; }
.mdMicroHead #mdMicroSymbol { max-width:74px; overflow:hidden; color:#eaf5ff; font-size:9px; font-weight:950; text-overflow:ellipsis; white-space:nowrap; }
.mdMicroHeadStatus { display:flex; align-items:center; gap:5px; color:#718594; font-size:7px; font-weight:850; letter-spacing:.07em; white-space:nowrap; }
.mdMicroDot { width:5px; height:5px; border-radius:50%; background:#596b77; }
.mdMicroDotLive { background:#00e887; box-shadow:0 0 8px rgba(0,232,135,.75); }
.mdMicroDotStale { background:#ffbf47; box-shadow:0 0 7px rgba(255,191,71,.45); }
.mdMicroDotOff { background:#ff5f73; box-shadow:0 0 7px rgba(255,95,115,.45); }

.mdMicroSection { min-height:0; border-bottom:1px solid #122630; background:rgba(4,10,14,.62); }
.mdMicroSectionTitle {
  min-height:23px; padding:0 8px; display:flex; align-items:center; justify-content:space-between; gap:7px;
  border-bottom:1px solid #10212a; color:#708492; font-size:6.5px; font-weight:900; letter-spacing:.08em; white-space:nowrap;
}
.mdMicroSectionTitle>span:first-child { color:#9babb7; }

.mdMicroNbbo { flex:0 0 111px; }
.mdMicroBook { display:grid; grid-template-columns:1fr .82fr 1fr .82fr; min-height:59px; }
.mdMicroBookCell {
  min-width:0; padding:7px 5px 5px; display:flex; flex-direction:column; justify-content:center; gap:3px;
  border-right:1px solid #10232c;
}
.mdMicroBookCell:last-child { border-right:0; }
.mdMicroBookCell span { color:#607582; font-size:6px; font-weight:900; letter-spacing:.07em; }
.mdMicroBookCell b { overflow:hidden; color:#d9e5ec; font-size:11px; font-weight:950; text-overflow:ellipsis; }
.mdMicroBookCell small { overflow:hidden; color:#50636f; font-size:5.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.mdMicroBid b { color:#00e887; } .mdMicroAsk b { color:#ff6176; }
.mdMicroBookMeta {
  min-height:28px; padding:0 7px; display:flex; align-items:center; justify-content:space-between; gap:6px;
  border-top:1px solid #10212a; color:#607582; font-size:6px; font-weight:850; white-space:nowrap;
}
.mdMicroBookMeta b { color:#d5e0e7; font-weight:950; }
#mdMicroImbalance.isBid { color:#00e887; } #mdMicroImbalance.isAsk { color:#ff6176; }
#mdMicroRecorder { color:#3af1c6; }

.mdMicroTapeSection { flex:1 1 210px; display:flex; flex-direction:column; min-height:132px; }
.mdMicroTapeHeader,.mdMicroTapeRow { display:grid; grid-template-columns:1.35fr .85fr .7fr .58fr .38fr; align-items:center; gap:4px; }
.mdMicroTapeHeader { min-height:20px; padding:0 7px; border-bottom:1px solid #10212a; color:#536a78; font-size:5.5px; font-weight:900; letter-spacing:.06em; }
.mdMicroTapeRows { flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#1e3947 #061016; }
.mdMicroTapeRow { min-height:20px; padding:0 7px; border-bottom:1px solid rgba(18,38,48,.54); color:#8498a5; font-size:6.5px; }
.mdMicroTapeRow:hover { background:#081820; }
.mdMicroTapePrice { color:#dce7ed; font-weight:900; } .mdMicroTapeSide { font-weight:950; }
.mdMicroSideASK .mdMicroTapePrice,.mdMicroSideASK .mdMicroTapeSide { color:#00e887; }
.mdMicroSideBID .mdMicroTapePrice,.mdMicroSideBID .mdMicroTapeSide { color:#ff6176; }
.mdMicroSideMID .mdMicroTapeSide { color:#ffbf47; }

.mdMicroChangesSection { flex:0 1 89px; min-height:67px; display:flex; flex-direction:column; }
.mdMicroChangeRows { min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#1e3947 #061016; }
.mdMicroChangeRow { min-height:18px; padding:0 7px; display:grid; grid-template-columns:61px 1fr; align-items:center; gap:5px; border-bottom:1px solid rgba(18,38,48,.52); font-size:6px; }
.mdMicroChangeTime { color:#566c79; }
.mdMicroChangeBody { overflow:hidden; color:#9aadb8; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }

.mdMicroDepthSection { flex:0 0 49px; border-bottom:0; }
.mdMicroDepthUnavailable,.mdMicroDepthAvailable { min-height:25px; padding:0 8px; display:flex; align-items:center; color:#ffbf47; font-size:6px; font-weight:900; letter-spacing:.055em; }
.mdMicroDepthAvailable { color:#00e887; }
.mdMicroEmpty { padding:12px 8px; color:#4f6572; font-size:6.5px; font-weight:850; letter-spacing:.05em; text-align:center; }

@media (max-width:980px) {
  .mdChartStage.mdMicrostructureEnabled { height:700px; }
  .mdChartStage.mdMicrostructureEnabled .mdChart { right:0; bottom:238px; }
  .mdChartStage.mdMicrostructureEnabled .mdChartLegend { right:84px; }
  .mdChartStage.mdMicrostructureEnabled .mdChartLoading,
  .mdChartStage.mdMicrostructureEnabled .mdChartEmpty { right:0; bottom:238px; }
  .mdMicroRail {
    top:auto; left:0; width:auto; height:238px; display:grid;
    grid-template-columns:1.05fr 1.6fr 1.1fr; grid-template-rows:35px 1fr;
    border-top:1px solid #17303d; border-left:0; box-shadow:0 -8px 24px rgba(0,0,0,.22);
  }
  .mdMicroHead { grid-column:1/-1; grid-row:1; }
  .mdMicroNbbo { grid-column:1; grid-row:2; }
  .mdMicroTapeSection { grid-column:2; grid-row:2; min-height:0; }
  .mdMicroChangesSection { grid-column:3; grid-row:2; min-height:0; }
  .mdMicroDepthSection { display:none; }
  .mdMicroBook { grid-template-columns:1fr 1fr; }
}

/* JGQT_R6_9_20_MICROSTRUCTURE_READABILITY_ADAPTIVE */
.mdChartStage.mdMicrostructureEnabled .mdChart { right: 312px; }
.mdChartStage.mdMicrostructureEnabled .mdChartLegend { right: 396px; }
.mdChartStage.mdMicrostructureEnabled .mdChartLoading,
.mdChartStage.mdMicrostructureEnabled .mdChartEmpty { right: 312px; }
.mdMicroRail { width: 312px; }

.mdMicroHead { min-height: 39px; padding: 7px 9px; }
.mdMicroHead b { font-size: 9px; }
.mdMicroHead #mdMicroSymbol { font-size: 10px; max-width: 82px; }
.mdMicroHeadStatus { font-size: 7.5px; }

.mdMicroSectionTitle { min-height: 25px; font-size: 7px; }
.mdMicroNbbo { flex-basis: 120px; }
.mdMicroBook { min-height: 64px; }
.mdMicroBookCell { padding: 7px 6px 5px; }
.mdMicroBookCell span { font-size: 6.5px; }
.mdMicroBookCell b { font-size: 13px; line-height: 1.05; }
.mdMicroBookCell small { font-size: 6px; }
.mdMicroBookMeta { min-height: 31px; font-size: 6.8px; }

#mdMicroRecorder {
  padding: 3px 5px;
  border: 1px solid rgba(58,241,198,.27);
  border-radius: 3px;
  background: rgba(58,241,198,.055);
  color: #3af1c6;
  font-weight: 950;
  letter-spacing: .03em;
}

.mdMicroTapeHeader { min-height: 22px; font-size: 6px; }
.mdMicroTapeRow { min-height: 22px; font-size: 7.2px; }
.mdMicroTapePrice { font-size: 7.7px; }
.mdMicroChangeRow { min-height: 20px; font-size: 6.7px; }
.mdMicroChangeTime { color: #6f8491; }
.mdMicroChangeBody { color: #b2c1ca; }
.mdMicroEmpty { padding: 10px 8px; font-size: 7px; }

.mdMicroRail.mdMicroMarketClosed .mdMicroTapeSection {
  flex: 0 0 92px;
  min-height: 92px;
}
.mdMicroRail.mdMicroMarketClosed .mdMicroChangesSection {
  flex: 1 1 auto;
  min-height: 105px;
}
.mdMicroRail.mdMicroMarketClosed .mdMicroTapeRows {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mdMicroRail.mdMicroMarketClosed .mdMicroEmpty { color: #8c7351; }

.mdMicroRail.mdMicroMarketLive .mdMicroTapeSection { flex: 1 1 235px; }
.mdMicroRail.mdMicroMarketLive .mdMicroChangesSection { flex: 0 1 104px; }

.mdMicroCollapse {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid #21404e;
  border-radius: 3px;
  background: #081820;
  color: #9fb5c2;
  font-size: 15px;
  line-height: 18px;
  cursor: pointer;
}
.mdMicroCollapse:hover,
.mdMicroCollapse:focus-visible {
  border-color: #3af1c6;
  color: #3af1c6;
  outline: none;
}

.mdChartStage.mdMicroCollapsed .mdChart,
.mdChartStage.mdMicroCollapsed .mdChartLoading,
.mdChartStage.mdMicroCollapsed .mdChartEmpty { right: 34px !important; }
.mdChartStage.mdMicroCollapsed .mdChartLegend { right: 118px !important; }
.mdChartStage.mdMicroCollapsed .mdMicroRail { width: 34px; }
.mdChartStage.mdMicroCollapsed .mdMicroRail > *:not(.mdMicroHead) { display: none; }
.mdChartStage.mdMicroCollapsed .mdMicroHead {
  width: 34px;
  min-width: 34px;
  padding: 6px 5px;
  justify-content: center;
}
.mdChartStage.mdMicroCollapsed .mdMicroHead > div { display: none; }
.mdChartStage.mdMicroCollapsed .mdMicroCollapse { margin: 0; }

@media (max-width: 980px) {
  .mdChartStage.mdMicrostructureEnabled .mdChart { right: 0; }
  .mdChartStage.mdMicrostructureEnabled .mdChartLegend { right: 84px; }
  .mdChartStage.mdMicrostructureEnabled .mdChartLoading,
  .mdChartStage.mdMicrostructureEnabled .mdChartEmpty { right: 0; }
  .mdMicroRail { width: auto; }
  .mdChartStage.mdMicroCollapsed .mdChart,
  .mdChartStage.mdMicroCollapsed .mdChartLoading,
  .mdChartStage.mdMicroCollapsed .mdChartEmpty { right: 0 !important; bottom: 34px !important; }
  .mdChartStage.mdMicroCollapsed .mdChartLegend { right: 84px !important; }
  .mdChartStage.mdMicroCollapsed .mdMicroRail {
    left: 0; right: 0; width: auto; height: 34px;
  }
  .mdChartStage.mdMicroCollapsed .mdMicroHead {
    width: auto; min-width: 0; height: 34px; justify-content: flex-end;
  }
}