/* Account, Markets and My trading reflow inside the selected device canvas.
   Desktop rules remain in their original scene stylesheets. */

.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-scene {
  container: account-content / inline-size;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-scene {
  container: market-content / inline-size;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.ac-scene, .mk-scene) {
  width: 100%;
  min-width: 0;
  padding-bottom: 16px;
}

/* Account overview: summary panels keep their data while growing vertically. */
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-toolbar {
  height: auto;
  min-height: 44px;
  flex-wrap: wrap;
  gap: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-breadcrumb {
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-toolbar-actions {
  margin-left: auto;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-pill-button {
  height: 44px;
  padding-inline: 14px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-stage-rail {
  width: 100%;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-summary-card {
  height: auto;
  min-height: 216px;
  padding: 18px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-product-heading {
  flex-direction: column;
  gap: 6px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-product-heading h1 {
  font-size: 24px;
  line-height: 32px;
  white-space: normal;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-account-number {
  padding-top: 0;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-product-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin-top: 24px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-profit-metric {
  grid-column: 1 / -1;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-label {
  white-space: normal;
  align-items: baseline;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-risk-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-risk-metrics .ac-label {
  min-height: 36px;
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-risk-footer > div {
  flex-wrap: wrap;
  gap: 8px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-card {
  height: auto;
  padding: 16px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-header {
  height: auto;
  display: block;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-metrics .ac-metric {
  min-width: 0;
  text-align: left;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-metrics .ac-label {
  justify-content: flex-start;
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-chart-scroll {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  padding: 0;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-chart-scroll:focus-visible {
  outline: 2px solid #dadbdf;
  outline-offset: 2px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-svg {
  width: 100%;
  height: 276px;
  overflow: visible;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-chart-label {
  font-size: 12px;
}

/* A history row becomes a readable card; its controls remain fully available. */
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-summary {
  display: grid;
  grid-template-columns: 20px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 10px;
  padding: 14px 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-arrow {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: center;
  margin: 0;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-summary > .token-logo {
  grid-area: 1 / 2 / 2 / 3;
  margin: 0;
  justify-self: start;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-contract {
  grid-area: 1 / 3 / 2 / -1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 20px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-contract > span {
  display: block;
  color: var(--ac-muted);
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-row-divider {
  display: none;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-badge {
  min-width: 0;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-summary > :is(.ac-short, .ac-long) {
  grid-area: 2 / 1 / 3 / 3;
  justify-self: start;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-leverage {
  grid-area: 2 / 3 / 3 / 4;
  justify-self: start;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-margin-mode {
  grid-area: 2 / 4 / 3 / -1;
  justify-self: start;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-pnl {
  grid-area: 3 / 1 / 4 / -1;
  align-items: flex-start;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--ac-line);
  white-space: normal;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-pnl > span {
  font-size: 12px;
  line-height: 18px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-pnl strong {
  font-size: 16px;
  line-height: 24px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-close-reason {
  grid-area: 4 / 1 / 5 / 4;
  justify-self: start;
  margin: 0;
  padding: 6px 9px;
  white-space: normal;
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-tools {
  grid-area: 4 / 4 / 5 / -1;
  justify-self: end;
  margin: 0;
  gap: 8px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-icon-button {
  width: 44px;
  height: 44px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px 14px;
  gap: 20px 14px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-pagination {
  flex-wrap: wrap;
  gap: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-pagination :is(button, select) {
  min-width: 44px;
  min-height: 44px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-table-scroll {
  width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #444 #151515;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table {
  min-width: 700px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table :is(th, td) {
  padding: 16px;
}

/* Markets and trading statistics follow the content width, including previews. */
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-tabs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  gap: 4px;
  border-radius: 16px;
  overflow: visible;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-tab {
  min-height: 44px;
  height: auto;
  flex: 1 1 auto;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-day-card {
  height: auto;
  overflow: visible;
  padding: 16px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-day-card p {
  font-size: 14px;
  line-height: 23px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metric {
  height: auto;
  min-height: 104px;
  padding: 14px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metric-label {
  white-space: normal;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-instruments-heading {
  height: auto;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.mk-boards, .mk-bars) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.mk-board, .mk-bar-card) {
  padding: 16px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.mk-board h3, .mk-heat-card h3, .mk-pattern-card h3) {
  flex-wrap: wrap;
  gap: 2px 8px;
  white-space: normal;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.mk-board h3 > span, .mk-heat-card h3 > span, .mk-pattern-card h3 > span) {
  white-space: normal;
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-board-row {
  min-height: 48px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-trade-filter {
  height: auto;
  flex-wrap: wrap;
  gap: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-account-filter {
  min-width: 0;
  flex: 1 1 290px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-account-filter select {
  width: auto;
  min-width: 0;
  flex: 1;
  font-size: 14px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-period {
  height: auto;
  min-height: 44px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-period button {
  min-height: 44px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-filter-note {
  flex-basis: 100%;
  margin-left: 0;
  white-space: normal;
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-card {
  height: auto;
  min-height: 182px;
  overflow: visible;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-rows {
  max-height: none;
  overflow: visible;
  gap: 10px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-row {
  grid-template-columns: minmax(72px, 1fr) minmax(32px, 1.2fr) 76px;
  gap: 8px;
  min-height: 28px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-label {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bottom-grid {
  grid-template-columns: minmax(0, 1fr);
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.mk-heat-card, .mk-pattern-card) {
  height: auto;
  padding: 16px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-heat-scroll {
  overscroll-behavior-x: contain;
  padding-block: 4px 8px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-heat-grid {
  min-width: 704px;
  grid-template-columns: 32px repeat(24, minmax(24px, 1fr));
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-heat-hour {
  font-size: 11px;
  line-height: 18px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-heat-cell {
  height: 26px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-heat-day {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--mk-canvas);
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-heat-legend {
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-pattern {
  height: auto;
  min-height: 76px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-pattern p {
  white-space: normal;
  overflow: visible;
  max-width: none;
  font-size: 12px;
  line-height: 18px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-pattern > strong {
  margin-left: 0;
}

/* Container queries use the actual device canvas, not the browser window. */
@container account-content (max-width: 650px) {
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.ac-terminal-button, .ac-buy-button) {
    width: 100%;
    min-width: 0;
    white-space: normal;
    padding: 8px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-stage-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    gap: 6px;
    margin-block: 20px 16px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-stage {
    min-height: 72px;
    height: auto;
    padding: 8px 3px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
    font-size: 12px !important;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-stage-line {
    display: none;
  }
}
@container account-content (max-width: 420px) {
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-summary-card {
    padding: 16px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-risk-metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-risk-metrics .ac-label {
    min-height: 0;
    font-size: 12px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-current-balance {
    grid-column: 1 / -1;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-value {
    font-size: 18px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container market-content (max-width: 520px) {
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-tab {
    min-width: 0;
    padding-inline: 4px;
    font-size: 13px !important;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metric:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metric {
    padding: 12px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metric-label {
    min-height: 36px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-metric-value {
    font-size: 22px;
    line-height: 30px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-account-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-account-filter select {
    width: 100%;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-period {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-period button {
    padding-inline: 6px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-pattern {
    grid-template-columns: 27px minmax(0, 1fr);
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-pattern > strong {
    grid-column: 2;
    justify-self: start;
  }
}
@container market-content (max-width: 310px) {
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-row {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 6px 10px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-track {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-row strong {
    grid-row: 1;
    grid-column: 2;
  }
}

/* Keep financial labels readable at the same type scale as actionable controls. */
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.ac-label, .ac-history-detail span) {
  font-size: 12px;
  line-height: 18px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-metric {
  min-width: 0;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-value {
  font-size: 18px;
  line-height: 26px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-profit-metric .ac-value {
  font-size: 22px;
  line-height: 30px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-info {
  width: 16px;
  height: 16px;
  font-size: 10px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-breadcrumb button {
  min-height: 44px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-detail strong {
  font-size: 14px;
  line-height: 22px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) :is(.mk-day-date, .mk-day-card small, .mk-metric-label, .mk-metric-note, .mk-instruments-heading p, .mk-board-group h4, .mk-filter-note, .mk-heat-hour, .mk-heat-day, .mk-pattern p) {
  color: #a2a8b1;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-account-filter select {
  font-size: 16px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-board-group h4 {
  font-size: 11px;
  line-height: 18px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-pattern h4 {
  font-size: 14px;
  line-height: 20px;
}
.artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-heat-scroll {
  scrollbar-gutter: stable;
  border: 1px solid #292c31;
  border-radius: 10px;
  padding: 12px;
}

/* Stages remain labelled when the comparison becomes a stack of criterion cards. */
@container account-content (max-width: 650px) {
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-table-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table tbody {
    display: grid;
    gap: 12px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--ac-line);
    border-radius: 14px;
    background: #111;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table td {
    display: block;
    min-width: 0;
    width: auto;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 22px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--ac-muted);
    font-size: 12px;
    line-height: 18px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ac-line);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table td:first-child::before {
    display: none;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criteria-table td:nth-child(2) {
    grid-column: 1 / -1;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criterion-progress {
    max-width: none;
    height: 5px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-criterion-current > small {
    font-size: 12px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-status-chip {
    white-space: normal;
    flex-wrap: wrap;
  }
}
@container account-content (max-width: 420px) {
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-balance-svg {
    height: 240px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .ac-history-pagination > div {
    flex-wrap: wrap;
    gap: 8px;
  }
}
@container market-content (max-width: 600px) {
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-row {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 7px 12px;
    padding-block: 4px;
    min-height: 48px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-track {
    grid-row: 2;
    grid-column: 1 / -1;
    height: 10px;
  }
  .artboard:is([data-device="mobile"], [data-device="tablet"]) .mk-bar-row strong {
    grid-row: 1;
    grid-column: 2;
    font-size: 14px;
  }
}