/* Merchant portal, phone width only.
   Marketplace order list: title on top, fields in the middle, the original buttons along the bottom.
   Every menu uses that card. Chat panes and mail rails stay on customer service.
   Desktop tables are unchanged. Buttons stay the ones the page already rendered. */

@media (max-width: 767px) {
  html[data-mp="cs"] .mp-layout__content {
    background: #f3f4f6;
    /* The assist button floats above the tab bar. This gap is the button plus the bar. */
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Chat sits in the column under the header. Do not size it from the viewport:
     that count includes the header again, so the list paints under the tab bar. */
  html[data-mp="cs"] .mp-layout__content--chat {
    padding: 0 0 calc(72px + env(safe-area-inset-bottom, 0px)) 0 !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }

  html[data-mp="cs"] .mp-header__brand-text {
    display: none !important;
  }

  html[data-mp="cs"] .mp-assist__fab-badge {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    z-index: 930;
  }

  /* In a thread the composer owns the bottom edge. Lift the assist button above it. */
  html[data-mp="cs"][data-cs-chat="thread"] .mp-assist__fab-badge {
    bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-mp] .ant-table-wrapper,
  html[data-mp] .ant-table,
  html[data-mp] .ant-table-container {
    background: transparent !important;
    overflow: visible !important;
  }

  html[data-mp] .ant-table-content,
  html[data-mp] .ant-table-body,
  html[data-mp] .ant-table-header {
    overflow: visible !important;
  }

  html[data-mp] .ant-table-thead {
    display: none !important;
  }

  html[data-mp] .ant-table-content > table,
  html[data-mp] .ant-table-body > table,
  html[data-mp] .ant-table-tbody {
    display: block;
    width: 100% !important;
  }

  html[data-mp] colgroup {
    display: none !important;
  }

  html[data-mp] .ant-table-measure-row,
  html[data-mp] .mp-market-empty {
    display: none !important;
  }

  html[data-mp] .ant-table-tbody > tr.ant-table-row {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 0 10px;
    padding: 12px 12px 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  html[data-mp] .ant-table-tbody > tr.ant-table-row > td {
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    background: transparent !important;
    border: none !important;
    padding: 3px 0 !important;
  }

  html[data-mp] .mp-market-check {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: auto !important;
    padding: 0 !important;
  }

  html[data-mp] .mp-market-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: #1a1a1a;
    padding: 0 28px 8px 0 !important;
    margin-bottom: 4px;
    border-bottom: 1px solid #f2f2f2 !important;
  }

  html[data-mp] .mp-market-field {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
  }

  html[data-mp] .mp-market-field::before {
    content: attr(data-label);
    flex: 0 0 42%;
    color: #8c8c8c;
    font-weight: 500;
  }

  html[data-mp] .mp-market-action {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px !important;
    border-top: 1px solid #f0f0f0 !important;
  }

  html[data-mp] .mp-market-action .ant-btn {
    min-height: 36px;
    border-radius: 18px;
    padding-inline: 14px;
  }

  html[data-mp] .mp-market-action .ant-btn:only-child {
    flex: 1 1 auto;
  }

  html[data-mp] .ant-pagination {
    margin: 4px 0 12px !important;
    justify-content: center;
  }

  /* Live chat: list of conversations, then the thread. Same pattern as a marketplace inbox. */
  html[data-mp="cs"] .mp-chat {
    flex: 1 1 auto;
    flex-direction: column;
    height: auto !important;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    border: none;
    border-radius: 0;
    background: #f3f4f6;
  }

  html[data-mp="cs"] .mp-chat__rooms,
  html[data-mp="cs"] .mp-chat__windows,
  html[data-mp="cs"] .mp-chat__window,
  html[data-mp="cs"] .mp-chat__messages {
    min-height: 0;
  }

  html[data-mp="cs"] .mp-chat__rooms {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    overflow: hidden;
    border-right: none;
    background: #f3f4f6;
  }

  html[data-mp="cs"] .mp-chat__rooms-head {
    flex: none;
  }

  html[data-mp="cs"] .mp-chat__rooms-list {
    background: #f3f4f6;
    padding-top: 8px;
    /* The assist button floats over this list. The gap lets the last card scroll clear of it. */
    padding-bottom: 96px;
  }

  html[data-mp="cs"] .mp-chat__windows {
    flex: 1 1 auto;
    width: 100%;
  }

  html[data-mp="cs"][data-cs-chat="thread"] .mp-chat__messages {
    padding-bottom: 104px;
  }

  html[data-mp="cs"] .mp-chat__room {
    margin: 0 10px 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-left: none;
    border-radius: 12px;
    align-items: flex-start;
  }

  html[data-mp="cs"] .mp-chat__room-main {
    flex: 1;
    min-width: 0;
  }

  html[data-mp="cs"] .mp-chat__room-preview {
    color: #666;
    font-size: 13px;
    margin-top: 4px;
  }

  /* Until a room is open, the thread and the member column stay off the list.
     Otherwise a 260px list and the thread sit side by side and the thread
     collapses to one character per line. */
  html[data-mp="cs"]:not([data-cs-chat="thread"]) .mp-chat__windows,
  html[data-mp="cs"]:not([data-cs-chat="thread"]) .mp-chat__panel {
    display: none !important;
  }

  html[data-mp="cs"][data-cs-chat="thread"] .mp-chat__rooms {
    display: none !important;
  }

  html[data-mp="cs"][data-cs-chat="thread"] .mp-chat__windows,
  html[data-mp="cs"][data-cs-chat="thread"] .mp-chat__window,
  html[data-mp="cs"][data-cs-chat="thread"] .mp-chat__panel {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    border-left: none !important;
  }

  html[data-mp="cs"][data-cs-chat="thread"] .mp-chat__panel {
    max-height: 34dvh;
    overflow-y: auto !important;
    border-top: 1px solid #eee;
  }

  html[data-mp="cs"][data-cs-chat="thread"] .mp-chat__window {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: #fff;
  }

  html[data-mp="cs"] .mp-market-back {
    display: none;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    border: none;
    border-radius: 18px;
    background: #f3f4f6;
    color: #1a1a1a;
    font-size: 24px;
    line-height: 1;
    flex: none;
    align-items: center;
    justify-content: center;
  }

  html[data-mp="cs"][data-cs-chat="thread"] .mp-market-back {
    display: inline-flex;
  }

  html[data-mp="cs"] .mp-chat__inputbar {
    flex: none;
    padding-bottom: 8px;
  }

  /* Chat settings dialog. Three mode cards in a row become one character wide,
     and the title tooltip paints a second "聊天设置" over the header. */
  html[data-mp="cs"] .ant-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    top: 12px;
    margin: 0 auto;
    padding-bottom: 0;
  }

  html[data-mp="cs"] .ant-modal-content {
    border-radius: 16px;
    overflow: hidden;
  }

  html[data-mp="cs"] .ant-modal-header {
    padding: 14px 40px 8px 16px;
    margin-bottom: 0;
  }

  html[data-mp="cs"] .ant-modal-title {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    width: auto !important;
    max-width: 100%;
  }

  html[data-mp="cs"] .ant-tooltip[data-mp-hide="1"] {
    display: none !important;
  }

  html[data-mp="cs"] .mp-cset {
    min-height: 0;
    max-height: calc(100dvh - 88px);
  }

  html[data-mp="cs"] .mp-cset__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 8px;
  }

  html[data-mp="cs"] .mp-cset__tab {
    flex: 1 0 auto;
    white-space: nowrap;
    padding: 12px 10px;
    font-size: 14px;
    text-align: center;
  }

  html[data-mp="cs"] .mp-cset__body {
    padding: 12px;
  }

  html[data-mp="cs"] .mp-cset__mode-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html[data-mp="cs"] .mp-cset__mode-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "icon label" "icon desc";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
    padding: 12px 36px 12px 14px;
  }

  html[data-mp="cs"] .mp-cset__mode-icon {
    grid-area: icon;
    margin: 0;
    font-size: 26px;
  }

  html[data-mp="cs"] .mp-cset__mode-label {
    grid-area: label;
    margin: 0;
  }

  html[data-mp="cs"] .mp-cset__mode-desc {
    grid-area: desc;
    line-height: 1.4;
  }

  html[data-mp="cs"] .mp-cset__mode-check {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  html[data-mp="cs"] .mp-cset__provider-row,
  html[data-mp="cs"] .mp-cset__key-row {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-mp="cs"] .mp-cset__footer {
    padding: 12px;
  }

  html[data-mp="cs"] .mp-cset__footer .ant-btn {
    min-height: 40px;
    border-radius: 20px;
    padding-inline: 16px;
  }

  /* Page title and the add button share one row on desktop. On a phone the title
     was squeezed until the last character dropped onto its own line. */
  html[data-mp] .mp-toolbar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html[data-mp] .mp-toolbar > :first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  html[data-mp] .mp-toolbar > :last-child,
  html[data-mp] .mp-toolbar .ant-space {
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    max-width: 100%;
  }

  html[data-mp] .mp-toolbar .ant-btn,
  html[data-mp] .mp-toolbar > button {
    min-height: 36px;
    white-space: nowrap;
  }

  /* Column headers of the hand-built lists. The row underneath becomes the card. */
  html[data-mp] .mp-flexhead,
  html[data-mp] .mp-gridhead {
    display: none !important;
  }

  html[data-mp] .mp-flexrow,
  html[data-mp] .mp-gridrow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    height: auto !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    margin: 8px !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    width: auto !important;
  }

  html[data-mp] .mp-flexrow,
  html[data-mp] .mp-gridrow {
    position: relative;
  }

  html[data-mp] .mp-flexrow > div,
  html[data-mp] .mp-gridrow > div {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 42% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* A 24px round avatar is a direct child. flex-basis 42% turns it into a wide pill. */
  html[data-mp] .mp-flexrow > .mp-card-icon,
  html[data-mp] .mp-gridrow > .mp-card-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    border-radius: 50% !important;
    order: -2;
  }

  html[data-mp] .mp-card-index {
    position: absolute !important;
    top: 12px;
    right: 12px;
    flex: none !important;
    width: auto !important;
    max-width: 36px !important;
    padding: 0 !important;
    color: #8c8c8c !important;
    background: transparent !important;
  }

  html[data-mp] .mp-card-title {
    flex: 1 1 calc(100% - 52px) !important;
    width: auto !important;
    order: -1;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    color: #1a1a1a !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #f2f2f2;
  }

  html[data-mp] .mp-card-title,
  html[data-mp] .mp-card-title * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
  }

  html[data-mp] .mp-flexrow > div:has(.ant-btn),
  html[data-mp] .mp-flexrow > div:has(button),
  html[data-mp] .mp-gridrow > div:has(.ant-btn),
  html[data-mp] .mp-gridrow > div:has(button) {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 2px;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0;
  }

  html[data-mp] .mp-flexrow .ant-btn,
  html[data-mp] .mp-gridrow .ant-btn {
    min-height: 32px;
  }

  /* Three-column forms (bot token / name / persona) become one column. */
  html[data-mp="cs"] .ant-col-8,
  html[data-mp="cs"] .ant-col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Four-up stat tiles stay two across. Three-up cards and mixed tracks stack. */
  html[data-mp] .mp-grid2 {
    grid-template-columns: 1fr 1fr !important;
  }

  html[data-mp] .mp-wrap2 {
    flex-wrap: wrap !important;
  }

  html[data-mp] .mp-wrap2 > * {
    flex: 1 1 46% !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 100% !important;
  }

  html[data-mp] .mp-stack {
    grid-template-columns: 1fr !important;
  }

  html[data-mp] .mp-stack button[style*="flex: 1"] {
    flex: 1 1 100% !important;
    text-align: left !important;
    padding: 10px 12px !important;
  }

  /* A label and a button group that do not fit on one line. */
  html[data-mp] .mp-bar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 8px !important;
  }

  html[data-mp] .mp-bar > :first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  html[data-mp] .mp-tabstrip {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  html[data-mp] .mp-tabstrip > button,
  html[data-mp] .mp-tabstrip > .ant-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
  }

  html[data-mp] .ant-tabs-nav {
    margin-bottom: 8px !important;
  }

  html[data-mp] .ant-tabs-nav-wrap {
    overflow-x: auto !important;
  }

  html[data-mp] .ant-tabs-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Desktop splits stack. Do not set height:auto here: a mail shell with
     height:auto gives its flex:1 message list 0px, so 202 rows disappear
     and only the refresh row plus the pager remain. */
  html[data-mp="cs"] .mp-split {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html[data-mp="cs"] .mp-split-side {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    border-right: none !important;
    border-left: none !important;
  }

  /* Mail: the folder rail is a 48px icon column. Put the folders in a row on top. */
  html[data-mp="cs"] .mp-mail-shell {
    flex-direction: column !important;
  }

  html[data-mp="cs"] .mp-mail-rail {
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    border-right: none !important;
    border-bottom: 1px solid #eee !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* Every block of the rail stays visible. Hiding "all but the last" left
     only the refresh button, and the same class on the message column hid
     the 202 emails. */
  html[data-mp="cs"] .mp-mail-rail > div {
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    border: none !important;
    padding: 4px 6px !important;
    overflow: visible !important;
  }

  html[data-mp="cs"] .mp-mail-rail > .mp-mail-stats {
    display: none !important;
  }

  html[data-mp="cs"] .mp-mail-rail div[style*="border-radius: 0px 20px"] {
    border-radius: 16px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-left-width: 0 !important;
  }

  html[data-mp="cs"] .mp-mail-scroll {
    padding-bottom: 28px !important;
  }

  /* Chrome rewrites calc(100vh - 130px) to calc(-130px + 100vh), so a
     selector that looks for the original spelling never matches. "100vh"
     is in both spellings. Keep a real height: the message list is flex:1
     and collapses to 0 when the shell is height:auto. Stack the columns
     so the WhatsApp detail pane is not a one-character strip on the right. */
  html[data-mp="cs"] .mp-vshell,
  html[data-mp="cs"] .mp-mail-shell,
  html[data-mp="cs"] div[style*="100vh"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 168px) !important;
    max-height: calc(100dvh - 168px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-mp="cs"] .mp-vshell > div,
  html[data-mp="cs"] .mp-mail-shell > div,
  html[data-mp="cs"] div[style*="100vh"] > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  html[data-mp="cs"] .mp-vshell > .mp-mail-rail,
  html[data-mp="cs"] .mp-mail-shell > .mp-mail-rail,
  html[data-mp="cs"] div[style*="100vh"] > .mp-mail-rail {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
  }

  html[data-mp="cs"] .mp-mail-shell > div:not(.mp-mail-rail) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html[data-mp="cs"] .mp-mail-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html[data-mp="cs"] .mp-mail-col > div:first-child {
    flex: 0 0 auto !important;
  }

  html[data-mp="cs"] .mp-mail-col > div:first-child > :first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html[data-mp="cs"] .mp-mail-shell .mp-mail-scroll {
    flex: 1 1 auto !important;
    min-height: 36dvh !important;
    overflow-y: auto !important;
  }

  /* No mail picked, or no WhatsApp chat picked: the empty reading pane
     was taking the lower half of the screen. The list uses that space. */
  html[data-mp="cs"] [data-cs-pane="list"] > .mp-pane-idle,
  html[data-mp="cs"] [data-cs-pane="list"] > .mp-pane-thread {
    display: none !important;
  }

  html[data-mp="cs"] [data-cs-pane="thread"] > .mp-pane-list {
    display: none !important;
  }

  html[data-mp="cs"] [data-cs-pane="thread"] > .mp-pane-thread {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  html[data-mp="cs"] [data-cs-pane="thread"] > .mp-pane-thread > .mp-market-back {
    display: inline-flex !important;
    margin: 8px 10px 0;
  }

  /* The assist button sits on the send control. Keep that control to its left. */
  html[data-mp="cs"] .mp-composer {
    padding-right: 76px !important;
    box-sizing: border-box;
  }

  html[data-mp] .mp-gridrow:last-child,
  html[data-mp] .mp-flexrow:last-child,
  html[data-mp="cs"] .ant-table-tbody > tr.ant-table-row:last-child {
    margin-bottom: 72px !important;
  }

  html[data-mp="cs"] .mp-mail-scroll span[style*="max-width: 110px"],
  html[data-mp="cs"] .mp-mail-scroll span[style*="max-width:110px"],
  html[data-mp="cs"] .mp-mail-scroll span[style*="max-width: 120px"],
  html[data-mp="cs"] .mp-mail-scroll span[style*="max-width:120px"] {
    max-width: 68% !important;
  }

  html[data-mp="cs"] div[style*="width: 220px"],
  html[data-mp="cs"] div[style*="width: 240px"],
  html[data-mp="cs"] div[style*="width: 260px"],
  html[data-mp="cs"] div[style*="width: 340px"],
  html[data-mp="cs"] div[style*="width: 380px"],
  html[data-mp="cs"] div[style*="width:220px"],
  html[data-mp="cs"] div[style*="width:240px"],
  html[data-mp="cs"] div[style*="width:260px"],
  html[data-mp="cs"] div[style*="width:340px"],
  html[data-mp="cs"] div[style*="width:380px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-mp="cs"] div[style*="overflow-y: auto"],
  html[data-mp="cs"] div[style*="overflow-y:auto"] {
    flex: 1 1 auto !important;
    min-height: 160px !important;
    overflow-y: auto !important;
  }

  /* Scrollable antd tables keep the header in .ant-table-header, which the
     earlier thead rule did not cover, so column titles stayed one character wide. */
  html[data-mp] .ant-table-header {
    display: none !important;
  }

  html[data-mp] .ant-table table {
    display: block !important;
    width: 100% !important;
  }

  html[data-mp] .ant-table-tbody > tr.ant-table-placeholder {
    display: flex !important;
    justify-content: center !important;
    padding: 28px 12px !important;
  }

  html[data-mp="cs"] div[style*="justify-content: space-between"],
  html[data-mp="cs"] div[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  html[data-mp="cs"] .mp-layout__content {
    overflow-x: hidden !important;
  }

  html[data-mp] .ant-alert-message,
  html[data-mp] .ant-alert-description {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* The rest of the portal uses the same order card. Chat, mail and
     viewport shells stay on the customer-service routes. */
  html[data-mp="app"] .mp-layout__content {
    background: #f3f4f6;
    overflow-x: hidden !important;
  }

  html[data-mp="app"] .mp-dataview__list {
    gap: 10px;
  }

  html[data-mp="app"] .mp-dataview__card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  html[data-mp="app"] .mp-dataview__label {
    flex: 0 0 42%;
    color: #8c8c8c;
  }

  html[data-mp="app"] .mp-dataview__card-actions .ant-btn {
    min-height: 36px;
    border-radius: 18px;
  }

  html[data-mp="app"] .ant-table-tbody > tr.ant-table-row:last-child {
    margin-bottom: 16px !important;
  }

}


/* phone header: brand row, then return-home row */
@media (max-width: 767px) {
  .mp-header {
    display: grid !important;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas:
      "brand brand brand brand brand"
      "menu tools bell help user";
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    gap: 8px 6px !important;
  }

  .mp-header__right {
    display: contents !important;
  }

  .mp-header__scope {
    grid-area: brand;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mp-header__scope .mp-brand-switcher,
  .mp-header .mp-brand-switcher {
    width: 100% !important;
    min-width: 0 !important;
  }

  .mp-header__left { grid-area: menu; }
  .mp-header__main-tools {
    grid-area: tools;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .mp-header__right > .ant-select { grid-area: tools; justify-self: start; }
  .mp-header__right > .ant-badge { grid-area: bell; }
  .mp-header__help { grid-area: help; }
  .mp-header__user { grid-area: user; justify-self: end; }

  .mp-header__main-site {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 8px !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #0f1111 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .mp-header__main-site-icon {
    display: inline-flex !important;
    font-size: 15px !important;
  }

  .mp-header__lang { width: auto !important; min-width: 76px !important; }
  .mp-header__lang .ant-select-selection-item {
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* Module shell: only this module, seller-center colors. */
html[data-mod] .mp-header__main-site { display: none !important; }

html[data-mod] .mp-bottomnav { display: none !important; }

.mp-module-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 940;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid #e7e5e4;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mp-module-nav__btn {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  background: #fff;
  color: #565959;
  font-size: 11px;
  line-height: 1.2;
}

.mp-module-nav__btn.is-active { color: #6d44c9; font-weight: 600; }

.mp-module-more {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  z-index: 930;
  background: #fff;
  border-top: 1px solid #e7e5e4;
  box-shadow: 0 -8px 24px rgba(15, 17, 17, 0.08);
  padding: 8px;
}

.mp-module-more.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mp-module-more a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  color: #0f1111;
  text-decoration: none;
  font-size: 14px;
  background: #fff;
}

.mp-module-more a.is-active {
  color: #6d44c9;
  border-color: #6d44c9;
  background: #f6f1ff;
}

@media (max-width: 767px) {
  html[data-mod] .mp-module-nav { display: flex; }
  html[data-mod] .mp-layout__content--hasnav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

html[data-mod] .mp-sidebar .ant-menu { display: none !important; }

.mp-module-side {
  display: flex;
  flex-direction: column;
  padding: 8px 0 16px;
}

.mp-module-side a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  color: #0f1111;
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}

.mp-module-side a.is-active {
  color: #6d44c9;
  background: #f6f1ff;
  border-left-color: #6d44c9;
  font-weight: 600;
}

html[data-mod] .mp-sidebar .ant-menu-item-selected {
  color: #6d44c9 !important;
  background: #f6f1ff !important;
}

.mp-module-side__home {
  margin-top: 8px;
  border-top: 1px solid #eee;
  color: #6d44c9 !important;
  font-weight: 600;
  border-left-color: transparent !important;
  background: transparent !important;
}

/* Operations phone: pinned return, language row, even cards. */
@media (max-width: 767px) {
  html[data-mod] .mp-header {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px 36px 36px !important;
    grid-template-rows: 44px 40px !important;
    grid-template-areas:
      "brand brand brand brand brand"
      "menu tools bell help user" !important;
    align-items: center !important;
    justify-content: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px 10px !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html[data-mod] .mp-header__right {
    display: contents !important;
  }

  html[data-mod] .mp-header__scope {
    grid-area: brand !important;
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 40px !important;
    max-height: 40px !important;
    min-height: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  html[data-mod] .mp-header .mp-brand-switcher {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    flex: none !important;
  }

  html[data-mod] .mp-header .mp-brand-switcher.ant-select .ant-select-selector {
    height: 40px !important;
    max-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #c4b6f5 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
  }

  html[data-mod] .mp-header .mp-brand-switcher .ant-select-selection-item,
  html[data-mod] .mp-header .mp-brand-switcher .ant-select-selection-placeholder {
    line-height: 38px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-mod] .mp-header__left {
    grid-area: menu !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: center !important;
    height: 36px !important;
  }

  html[data-mod] .mp-header__main-tools {
    grid-area: tools !important;
    grid-row: 2 !important;
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    overflow: hidden !important;
  }

  html[data-mod] .mp-header__lang {
    width: 108px !important;
    min-width: 96px !important;
    max-width: 120px !important;
    height: 36px !important;
    flex: none !important;
  }

  html[data-mod] .mp-header__lang.ant-select .ant-select-selector {
    height: 36px !important;
    max-height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid #e4dccf !important;
    box-shadow: none !important;
    background: #fffdf8 !important;
    padding: 0 26px 0 10px !important;
    display: flex !important;
    align-items: center !important;
  }

  html[data-mod] .mp-header__lang .ant-select-selection-item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 34px !important;
    padding-inline-end: 0 !important;
    font-weight: 700 !important;
  }

  html[data-mod] .mp-header__lang .ant-select-arrow,
  html[data-mod] .mp-header__lang .ant-select-suffix {
    inset-inline-end: 8px !important;
    margin-top: 0 !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  html[data-mod] .mp-header__right > .ant-badge {
    grid-area: bell !important;
    grid-row: 2 !important;
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;
  }

  html[data-mod] .mp-header__help {
    grid-area: help !important;
    grid-row: 2 !important;
    grid-column: 4 !important;
    justify-self: center !important;
  }

  html[data-mod] .mp-header__user {
    grid-area: user !important;
    grid-row: 2 !important;
    grid-column: 5 !important;
    justify-self: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html[data-mod] .mp-header__bell,
  html[data-mod] .mp-header__help {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    align-self: center !important;
  }
}

html[data-mod] .mp-sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
}

html[data-mod] .mp-sidebar__logo {
  flex: 0 0 auto !important;
}

html[data-mod] .mp-sidebar .ant-menu,
html[data-mod] .mp-sidebar__footer {
  display: none !important;
}

html[data-mod] .mp-module-side {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html[data-mod] .mp-module-side__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0 12px;
  -webkit-overflow-scrolling: touch;
}

html[data-mod] .mp-module-side__label {
  margin: 4px 16px 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #9a9188;
}

html[data-mod] .mp-module-side__home {
  flex: 0 0 auto;
  margin: 0 !important;
  min-height: 52px;
  padding: 0 16px !important;
  border-top: 1px solid #e6dfd2 !important;
  border-left-color: transparent !important;
  background: #fffdf8 !important;
  color: #6d44c9 !important;
  font-weight: 600;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  html[data-mod="ops"] .mp-layout__content {
    background: #f6f1e8;
  }

  html[data-mod="ops"] .mp-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
  }

  html[data-mod="ops"] .mp-kpi-grid > .mp-kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  html[data-mod="ops"] .mp-kpi,
  html[data-mod="ops"] .mp-kpi-card,
  html[data-mod="ops"] .mp-notice-kpi__card,
  html[data-mod="ops"] .mp-vip-kpi-card,
  html[data-mod="ops"] .ant-statistic {
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    min-height: 84px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-mod="ops"] .mp-kpi {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #e6dfd2 !important;
    background: #fbf7ef !important;
    box-shadow: none !important;
  }

  html[data-mod="ops"] .mp-kpi__label {
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #6f675f !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  html[data-mod="ops"] .mp-kpi__value {
    font-size: 28px !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums;
  }

  html[data-mod="ops"] .mp-layout__content div[style*="border-radius"] {
    min-width: 0;
  }

  html[data-mod="ops"] .ant-table-placeholder,
  html[data-mod="ops"] .ant-table-placeholder > td {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 0 !important;
  }

  html[data-mod="ops"] .ant-empty {
    margin: 8px 0 !important;
  }

  html[data-mod="ops"] .ant-empty-image {
    height: 36px !important;
    margin-bottom: 4px !important;
  }

  html[data-mod="ops"] .ant-empty-description {
    color: #9a9188;
    font-size: 13px;
  }

  html[data-mod="ops"] .ant-card,
  html[data-mod="ops"] .mp-dataview__card,
  html[data-mod="ops"] .ant-table-tbody > tr.ant-table-row {
    background: #fbf7ef !important;
    border: 1px solid #e6dfd2 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html[data-mod="ops"] .ant-card .ant-card-body {
    padding: 12px !important;
  }

  html[data-mod="ops"] .mp-market-field {
    align-items: flex-start !important;
  }

  html[data-mod="ops"] .mp-market-field::before {
    flex: 0 0 38% !important;
    color: #6f675f !important;
  }

  html[data-mod="ops"] .ant-row > .ant-col {
    min-width: 0;
  }
}

/* Review: native operations shell. Do not stretch the brand over the icon row.
   Language lives in the header tools cell. Return stays pinned in the module drawer. */
@media (max-width: 767px) {
  .mp-header,
  html[data-mod] .mp-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 10px 10px !important;
    gap: 8px !important;
    overflow: visible !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }

  .mp-header__left,
  html[data-mod] .mp-header__left {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }

  .mp-header__right,
  html[data-mod] .mp-header__right {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    grid-template-columns: minmax(0, 1fr) 36px 36px 36px !important;
    grid-template-rows: 40px 36px !important;
    grid-template-areas:
      "brand brand brand brand"
      "tools bell help user" !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .mp-header__scope,
  html[data-mod] .mp-header__scope {
    grid-area: brand !important;
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .mp-header .mp-brand-switcher,
  html[data-mod] .mp-header .mp-brand-switcher {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    flex: none !important;
  }

  .mp-header .mp-brand-switcher.ant-select .ant-select-selector,
  html[data-mod] .mp-header .mp-brand-switcher.ant-select .ant-select-selector {
    height: 40px !important;
    max-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #c4b6f5 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .mp-header .mp-brand-switcher .ant-select-selection-item {
    line-height: 38px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mp-header__right > .mp-header__lang,
  .mp-header__right > .ant-select,
  html[data-mod] .mp-header__main-tools {
    grid-area: tools !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .mp-header__lang,
  .mp-sidebar__language.mp-header__lang {
    width: 112px !important;
    min-width: 96px !important;
    max-width: 140px !important;
    height: 36px !important;
    flex: none !important;
  }

  .mp-header__lang.ant-select .ant-select-selector {
    height: 36px !important;
    max-height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid #e4dccf !important;
    box-shadow: none !important;
    background: #fffdf8 !important;
    padding: 0 28px 0 10px !important;
    display: flex !important;
    align-items: center !important;
  }

  .mp-header__lang .ant-select-selection-item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 34px !important;
    padding-inline-end: 4px !important;
  }

  .mp-header__lang .ant-select-arrow,
  .mp-header__lang .ant-select-suffix {
    inset-inline-end: 8px !important;
    height: 14px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .mp-header__right > .ant-badge,
  html[data-mod] .mp-header__right > .ant-badge {
    grid-area: bell !important;
    grid-row: 2 !important;
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
  }

  html[data-mod] .mp-header__help,
  .mp-header__help {
    grid-area: help !important;
    grid-row: 2 !important;
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;
  }

  html[data-mod] .mp-header__user,
  .mp-header__user {
    grid-area: user !important;
    grid-row: 2 !important;
    grid-column: 4 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mp-header__bell,
  .mp-header__help {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  .mp-sidebar--module .mp-sidebar__footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    flex-shrink: 0 !important;
    background: #fffdf8 !important;
    border-top: 1px solid #e6dfd2 !important;
  }

  .mp-sidebar--module .mp-sidebar__footer .mp-sidebar__language {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
  }

  .mp-sidebar--module .mp-sidebar__footer a[data-testid="return-main-site"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: #f6f1ff !important;
    color: #6d44c9 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .mp-layout--operations .mp-kpi-grid,
  .mp-layout--operations .mp-notice-kpi {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
  }

  .mp-layout--operations .mp-kpi-grid > .mp-kpi:last-child:nth-child(odd),
  .mp-layout--operations .mp-notice-kpi > .mp-notice-kpi__card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  .mp-layout--operations .mp-kpi,
  .mp-layout--operations .mp-notice-kpi__card,
  .mp-layout--operations .mp-kpi-card {
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    min-height: 84px !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #e6dfd2 !important;
    background: #fbf7ef !important;
    box-shadow: none !important;
  }

  .mp-layout--operations .mp-kpi__label,
  .mp-layout--operations .mp-kpi-card__label {
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #6f675f !important;
    margin: 0 !important;
  }

  .mp-layout--operations .mp-kpi__value,
  .mp-layout--operations .mp-kpi-card__value {
    font-size: 26px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
  }

  .mp-layout--operations .mp-promo-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .mp-layout--operations .mp-promo-card,
  .mp-layout--operations .mp-dataview__card,
  .mp-layout--operations .mp-notice-table-card,
  .mp-layout--operations .mp-notice-form-card,
  .mp-layout--operations .ant-table-tbody > tr.ant-table-row {
    border: 1px solid #e6dfd2 !important;
    border-radius: 12px !important;
    background: #fbf7ef !important;
    box-shadow: none !important;
    min-width: 0 !important;
  }

  .mp-layout--operations .mp-ops-dashboard .ant-table-placeholder,
  .mp-layout--operations .mp-ops-dashboard .ant-table-placeholder > td,
  .mp-layout--operations .mp-notice-table-card .ant-table-placeholder {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 0 !important;
  }

  .mp-layout--operations .ant-empty {
    margin: 8px 0 !important;
  }

  .mp-layout--operations .ant-empty-image {
    height: 36px !important;
    margin-bottom: 4px !important;
  }

  .mp-layout--operations .mp-market-field {
    align-items: flex-start !important;
  }

  .mp-layout--operations .mp-market-field::before {
    flex: 0 0 38% !important;
    color: #6f675f !important;
  }
}